:root{--bg:#0b0b0d;--bg2:#141418;--card:#1a1a20;--ink:#f3ecd9;--mute:#a79f8b;--gold:#d4af37;--gold2:#f0d77a;--warm:#e9a66b;--ok:#6fcf97;--bad:#eb6a5a;--line:#2b2b33;--rad:16px}
:root[data-theme=light]{--bg:#faf6ec;--bg2:#f1ead8;--card:#fffdf7;--ink:#1c1a14;--mute:#6b6454;--gold:#9a7410;--gold2:#7c5c05;--warm:#b5601f;--ok:#1f8a4c;--bad:#c0392b;--line:#ddd3b8}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 "Be Vietnam Pro",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh}
h1,h2,h3{font-family:Fraunces,Georgia,"Times New Roman",serif;line-height:1.2;margin:.2em 0 .5em}
h1{font-size:clamp(1.9rem,6vw,3rem)}h2{font-size:1.5rem;color:var(--gold)}h3{font-size:1.15rem}
a{color:var(--gold2)}
.mono{font-family:"Space Mono",ui-monospace,Menlo,monospace}
header.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:10px;padding:10px 14px;max-width:1000px;margin:0 auto}
.logo{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#111;font:700 .8rem "Space Mono",monospace;display:grid;place-items:center;cursor:pointer;user-select:none;flex:none;border:0}
.title{flex:1;min-width:0}.title b{display:block;font:600 1rem Fraunces,Georgia,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.title small{color:var(--mute);font-size:.72rem}
.btn{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font:600 .85rem "Be Vietnam Pro",sans-serif;cursor:pointer}
.btn:hover{border-color:var(--gold)}
.btn.gold{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#141414;border:0}
.btn.sm{padding:5px 10px;font-size:.78rem}
nav.tabs{display:flex;gap:6px;overflow-x:auto;padding:0 14px 10px;max-width:1000px;margin:0 auto;scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{flex:none;background:var(--bg2);color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font:600 .82rem "Be Vietnam Pro",sans-serif;cursor:pointer}
nav.tabs button.on{background:var(--gold);color:#111;border-color:var(--gold)}
main{max-width:1000px;margin:0 auto;padding:18px 14px 90px}
.hero{padding:28px 18px;border-radius:22px;background:radial-gradient(1200px 400px at 20% -10%,color-mix(in srgb,var(--gold) 22%,transparent),transparent),var(--card);border:1px solid var(--line)}
.kicker{font:700 .72rem "Space Mono",monospace;letter-spacing:.08em;color:var(--gold)}
.sub{color:var(--mute);font-size:1.05rem;max-width:60ch}
.row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:16px;margin:14px 0}
.grid{display:grid;gap:12px}
@media(min-width:700px){.grid.c2{grid-template-columns:1fr 1fr}.grid.c3{grid-template-columns:repeat(3,1fr)}}
.pill{display:inline-block;font:700 .68rem "Space Mono",monospace;background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold2);border-radius:999px;padding:3px 9px}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--rad)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:.88rem}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:var(--bg2);color:var(--gold);font:700 .72rem "Space Mono",monospace;text-transform:uppercase;letter-spacing:.05em}
tr:last-child td{border-bottom:0}
.me{background:color-mix(in srgb,var(--gold) 10%,transparent)}
ul.clean{padding-left:1.1em}ul.clean li{margin:.35em 0}
.mod{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.mod .n{flex:none;width:38px;height:38px;border-radius:50%;background:var(--gold);color:#111;display:grid;place-items:center;font:700 .95rem "Space Mono",monospace}
.mod.lock .n{background:var(--line);color:var(--mute)}
.idea{border-left:3px solid var(--gold);padding:8px 12px;margin:10px 0;background:var(--bg2);border-radius:0 12px 12px 0}
.idea p{margin:.3em 0}.idea .ln{font-family:Fraunces,Georgia,serif;font-size:1.05rem;color:var(--gold2)}
.tag{font:.7rem "Space Mono",monospace;color:var(--warm)}
.lockbox{border:1px dashed var(--gold);border-radius:var(--rad);padding:16px;text-align:center;background:color-mix(in srgb,var(--gold) 6%,transparent)}
input[type=text],input[type=number],select,textarea{width:100%;background:var(--bg2);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit}
.in{display:flex;gap:8px;margin:8px 0}.in input{flex:1}
label.chk{display:flex;gap:10px;align-items:flex-start;padding:8px 4px;border-bottom:1px solid var(--line);cursor:pointer}
label.chk input{margin-top:.35em;accent-color:var(--gold);width:18px;height:18px;flex:none}
.prog{height:10px;border-radius:99px;background:var(--bg2);overflow:hidden;border:1px solid var(--line)}.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));width:0}
.opt{display:block;padding:10px 12px;border:1px solid var(--line);border-radius:12px;margin:6px 0;cursor:pointer}
.opt.sel{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent)}
.opt.ok{border-color:var(--ok)}.opt.no{border-color:var(--bad)}
.big{font:700 2.4rem Fraunces,Georgia,serif;color:var(--gold)}
.price{font:700 2rem Fraunces,Georgia,serif;color:var(--gold)}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--gold);color:#111;padding:10px 16px;border-radius:999px;font-weight:700;z-index:50;display:none}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;place-items:center;z-index:40;padding:16px}
.modal.on{display:grid}.modal .box{background:var(--card);border:1px solid var(--gold);border-radius:var(--rad);padding:18px;max-width:380px;width:100%}
.timer{font:700 3rem "Space Mono",monospace;color:var(--gold);text-align:center}
.vault{white-space:pre-wrap;font:.8rem/1.5 "Space Mono",monospace;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px;overflow-x:auto}
.foot{margin-top:28px;color:var(--mute);font-size:.82rem;text-align:center}
.diploma{border:6px double var(--gold);padding:28px 20px;text-align:center;background:var(--card);border-radius:8px}
.diploma h1{color:var(--gold)}.diploma .nm{font:italic 600 2rem Fraunces,Georgia,serif;border-bottom:1px solid var(--gold);display:inline-block;padding:0 18px;margin:8px 0}
.printable{display:none}
@media print{
  body{background:#fff;color:#000}
  header.top,nav.tabs,.btn,.noprint,.toast,.modal{display:none!important}
  main>*{display:none!important}
  body.print-map main #printMap,body.print-diploma main #printDiploma{display:block!important}
  .printable{display:block}
  .diploma{background:#fff;color:#000;border-color:#8a6d00}.diploma h1,.diploma .nm{color:#6b5200}
}