:root{--bg:#0b0b0c;--fg:#e9e9ea;--mut:#a8acb3;--line:#2a2d33;--link:#5ca0ff}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto}
a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline}
.topbar{height:52px;display:flex;align-items:center;gap:.8rem;padding:.6rem 1rem;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:10}
.hamb{font-size:22px;cursor:pointer;user-select:none}.brand{font-weight:700}
.wrap{max-width:920px;margin:1rem auto;padding:0 1rem}
.drawer{position:fixed;inset:0 auto 0 0;width:280px;max-width:86%;transform:translateX(-100%);transition:.2s ease;background:#111;border-right:1px solid var(--line);z-index:20}
.drawer.open{transform:none}.drawer .head{padding:1rem;border-bottom:1px solid var(--line);font-weight:700}
.drawer a{display:block;padding:.8rem 1rem;border-bottom:1px solid #101317;color:var(--fg)}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:saturate(140%) blur(2px);display:none;z-index:15}
.overlay.show{display:block}
@media(min-width:980px){ .drawer{transform:none} .overlay{display:none} body{display:grid;grid-template-columns:280px 1fr} .topbar{grid-column:2} .wrap{grid-column:2}}
input,button,select{width:100%;padding:.75rem;border-radius:.6rem;border:1px solid #444;background:#111;color:#eee}
.row{margin:.9rem 0}.actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.msg-ok{color:#6f6}.msg-err{color:#f66}
/* OTP six boxes */
.otp-grid{display:flex;gap:14px;margin:12px 0}
.otp-grid input{width:52px;height:52px;text-align:center;font-size:20px;border-radius:18px;border:1px solid #53556a;background:#232635;outline:none;caret-color:transparent}
.otp-grid input:focus{border-color:#7a7db0}