*{box-sizing:border-box}html,body{height:100%}
:root{--bg:#0b0f19;--card:#0f1627cc;--stroke:#243045;--muted:#9bb2d6;--text:#f1f6ff;--primary:#3b82f6;--accent:#ef4444;--glow1:#2563eb;--glow2:#f43f5e}
:root[data-theme="light"]{--bg:#f5f7fb;--card:#ffffffee;--stroke:#cfd8ea;--muted:#5b6a86;--text:#0b1530;--primary:#1d4ed8;--accent:#dc2626;--glow1:#60a5fa;--glow2:#fca5a5}
.hidden{display:none}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);transition:background .25s ease,color .25s ease}
.bg{position:fixed;inset:0;overflow:hidden;z-index:-1}
.bg-glow{position:absolute;filter:blur(80px);opacity:.35;mix-blend-mode:screen}
.bg-glow.one{width:40vmax;height:40vmax;background:radial-gradient(circle,var(--glow1),transparent 60%);top:-10vmax;left:-10vmax;animation:float1 14s ease-in-out infinite}
.bg-glow.two{width:42vmax;height:42vmax;background:radial-gradient(circle,var(--glow2),transparent 60%);bottom:-14vmax;right:-12vmax;animation:float2 16s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(3vmax,1vmax)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-2vmax,-3vmax)}}
.appbar{position:sticky;top:0;background:rgba(0,0,0,.15);border-bottom:1px solid rgba(255,255,255,.08);padding:12px env(safe-area-inset-right) 12px env(safe-area-inset-left);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}.brand .logo{font-size:20px;line-height:1}.appbar h1{margin:0;font-size:18px}
.container{max-width:860px;margin:0 auto;padding:16px}
.card{background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:16px;margin:18px 0;animation:fadeIn .35s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.elevate{box-shadow:0 10px 30px rgba(0,0,0,.15)}
h2{margin-top:0}.muted{color:var(--muted)}.center{text-align:center}.sr{position:absolute;left:-9999px}
.grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px}.span2{grid-column:span 2}.field{display:flex;flex-direction:column;gap:6px}
input,select{padding:12px;border-radius:12px;border:1px solid var(--stroke);background:rgba(0,0,0,.1);color:var(--text)}:root[data-theme="light"] input,:root[data-theme="light"] select{background:rgba(0,0,0,.02)}input::placeholder{color:color-mix(in srgb, var(--muted), #000 10%)}
.btn{padding:12px 16px;border-radius:12px;border:1px solid var(--stroke);background:rgba(0,0,0,.2);color:var(--text);font-weight:800;transition:transform .08s ease, filter .2s ease}
:root[data-theme="light"] .btn{background:#fff}.btn:hover{filter:brightness(1.08);cursor:pointer}.btn:active{transform:translateY(1px)}.btn.ghost{background:transparent}.btn.primary{background:linear-gradient(180deg, var(--primary), rgba(0,0,0,.2));border-color:color-mix(in srgb, var(--primary), #000 50%)}.btn.accent{background:linear-gradient(180deg, var(--accent), rgba(0,0,0,.25));border-color:color-mix(in srgb, var(--accent), #000 60%)}.btn.sm{padding:8px 12px;border-radius:10px}.btn.inline{padding:10px 12px;border-radius:10px}
.revealbox{width:100%;border:1px dashed var(--stroke);border-radius:14px;background:rgba(0,0,0,.12);padding:16px;text-align:center;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
:root[data-theme="light"] .revealbox{background:rgba(0,0,0,.03)}.roleline{font-size:22px;font-weight:900}
.foot{max-width:860px;margin:24px auto 40px;color:var(--muted);padding:0 16px}