:root{--ink:#1F3A5F;--teal:#D72229;--teal-soft:#fbe9ea;--bg:#f5f5f5;--card:#fff;--muted:#5F5E5A;--warn:#A01920}
*{box-sizing:border-box}
body{margin:0;font:16px/1.45 Calibri,Carlito,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:#111}
header{background:#fff;color:var(--teal);padding:10px 16px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-bottom:3px solid var(--teal);display:flex;align-items:center;gap:10px}
header img{height:32px;width:32px}
header .sub{color:var(--muted);font-weight:500;text-transform:none;letter-spacing:0;font-size:.85rem}
header a{color:var(--teal);text-decoration:none}
main{max-width:720px;margin:0 auto;padding:16px 12px 140px}
h1{font-size:1.25rem;margin:8px 0 4px}
h2{font-size:1rem;margin:0 0 6px;word-break:break-word}
.muted{color:var(--muted);font-size:.9rem}
.warn{color:var(--warn)}
.pill{display:inline-block;background:var(--teal-soft);color:var(--teal);border-radius:999px;padding:2px 10px;font-size:.8rem;font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.card{background:var(--card);border-radius:12px;padding:14px;box-shadow:0 1px 3px rgba(0,0,0,.08);text-align:center}
.card h2 a{color:var(--ink);text-decoration:none}
.qr{display:block;width:100%;max-width:240px;margin:10px auto}
.btn{display:inline-block;background:var(--teal);color:#fff;border:0;border-radius:10px;padding:12px 18px;font-size:1rem;font-weight:600;text-decoration:none;cursor:pointer;width:100%}
.btn:disabled{background:#b9c7c5;cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--teal);border:2px solid var(--teal)}
.row{display:flex;gap:10px;margin-top:10px}
input,select{width:100%;padding:12px;font-size:1rem;border:1px solid #c9d3d2;border-radius:10px;background:#fff;margin:6px 0 14px}
label{display:block;font-weight:600}
form button[type=submit]{margin-top:6px}
.tabs{display:flex;gap:0;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.tab{flex:1;padding:12px;border:0;background:#fff;color:var(--muted);font-weight:600;font-size:.95rem}
.tab.active{color:var(--teal);border-bottom:3px solid var(--teal)}
.progress{height:4px;background:#dfe6e5;border-radius:2px;margin:6px 0 10px}
#bar{height:100%;width:0;background:var(--teal);border-radius:2px;transition:width .2s}
#pages{background:var(--card);border-radius:12px;padding:8px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.page{display:block;width:100%;height:auto;aspect-ratio:1/1.4142;margin-bottom:8px;border:1px solid #e3e8e7;background:#fafafa}
.sticky{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #dfe6e5;padding:10px 12px 14px;box-shadow:0 -2px 8px rgba(0,0,0,.06)}
.sticky>*{max-width:720px;margin-left:auto;margin-right:auto}
.confirm{display:flex;gap:10px;align-items:flex-start;background:var(--teal-soft);border:2px solid var(--teal);border-radius:10px;padding:10px;font-weight:500}
.confirm input{width:22px;height:22px;margin:2px 0 0;flex:none}
.hint{margin:6px 0 8px;font-size:.85rem;color:var(--muted)}
#pad{display:block;width:100%;height:220px;background:#fff;border:2px dashed #9fb3b0;border-radius:10px;touch-action:none}
.btn.big{font-size:1.15rem;padding:16px;margin:10px 0 4px}
.or{margin:6px 0 0}