@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Material+Symbols+Outlined');
:root { color-scheme:dark; --orange:#ff6a00; --muted:#b3b3b3; }
* { box-sizing:border-box; letter-spacing:0; }
[hidden] { display:none !important; }
body { margin:0; background:#000; color:#fff; font-family:Poppins,sans-serif; }
button,input { font:inherit; }
.topbar { height:76px; padding:0 32px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #242424; position:relative; }
.brand img { display:block; width:110px; height:44px; object-fit:contain; }
.material-symbols-outlined { font-family:'Material Symbols Outlined'; font-weight:normal; font-style:normal; font-size:24px; line-height:1; white-space:nowrap; font-feature-settings:'liga'; }
.icon-button { background:transparent; color:#fff; border:0; border-radius:8px; width:44px; height:44px; cursor:pointer; }
nav { position:absolute; right:32px; top:68px; z-index:2; width:240px; padding:8px; background:#0b0b0b; border:1px solid #333; border-radius:8px; }
nav a { display:block; padding:12px; color:#fff; text-decoration:none; border-radius:6px; }
nav a:hover { background:#222; }
main { width:min(100%,520px); margin:72px auto; padding:0 24px; }
.page-icon { color:var(--orange); font-size:40px; }
h1 { font-size:28px; line-height:1.3; margin:20px 0 16px; font-weight:600; }
p { color:var(--muted); font-size:14px; line-height:1.7; margin:0 0 24px; overflow-wrap:anywhere; }
label { display:block; font-size:14px; margin-bottom:8px; }
input { width:100%; min-width:0; padding:14px 16px; border:1px solid #444; background:#080808; color:#fff; border-radius:8px; }
.primary { width:100%; margin-top:24px; min-height:52px; padding:12px 16px; border:0; background:var(--orange); color:#000; border-radius:8px; display:flex; gap:12px; align-items:center; justify-content:center; font-weight:600; cursor:pointer; }
button:disabled { opacity:.55; cursor:wait; }
:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.code { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.code input { padding:12px 0; text-align:center; font-size:24px; font-weight:600; }
.message { min-height:24px; margin:20px 0; }
.message.error { color:#ff9c80; }
.secondary { display:block; color:var(--muted); font-size:13px; text-align:center; text-underline-offset:4px; }
@media (max-width:540px) { .topbar { height:68px; padding:0 20px; } main { margin:40px auto; } nav { right:20px; } .code { gap:8px; } h1 { font-size:26px; } }