/* Shared styles for the account, admin, privacy and success pages.
   Tokens and components mirror the landing page's inline CSS (index.html)
   so every page reads as one product — change both together. */
@font-face{font-family:"Geist";src:url(/fonts/Geist-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/fonts/GeistMono-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --bg:#000; --surface:#090A0F; --surface-2:#0E1017;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --fg:#E2E8F0; --fg-2:#8B98AD; --fg-3:#64748B;
  --accent:#70C7BA; --accent-10:rgba(112,199,186,.10); --accent-30:rgba(112,199,186,.32); --down:#F87171;
  --r-ctl:6px; --r-panel:12px; --ease:150ms ease;
  --mono:"Geist Mono",ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{background:var(--bg);color-scheme:dark}
body{font-family:Geist,system-ui,sans-serif;font-size:16px;line-height:1.5;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:inherit;text-decoration:none}
.wrap{max-width:1152px;margin:0 auto;padding:0 32px}
.mono{font-family:var(--mono)}
.label{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.eyebrow{color:var(--accent)}
h1{font-size:clamp(30px,3.6vw,40px);line-height:1.1;font-weight:600;letter-spacing:-.025em;margin-top:16px}
.muted{font-size:15px;line-height:24px;color:var(--fg-2)}
.small{font-size:13px;line-height:20px;color:var(--fg-2)}
.small a,.muted a{color:var(--fg-2);text-decoration:underline;text-underline-offset:3px} .small a:hover,.muted a:hover{color:var(--fg)}

/* header */
header{border-bottom:1px solid var(--line)}
.nav{height:80px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{width:195px;height:auto;display:block}
.right{display:flex;align-items:center;gap:8px}
.lang{display:flex;gap:4px}
.lang button{height:32px;padding:0 10px;background:transparent;border:1px solid transparent;border-radius:var(--r-ctl);color:var(--fg-2);font:500 12px var(--mono);letter-spacing:.06em;cursor:pointer;transition:color var(--ease),border-color var(--ease)}
.lang button:hover{color:var(--fg)}
.lang button[aria-pressed=true]{color:var(--fg);border-color:var(--line-2)}

/* buttons + inputs */
.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;border-radius:var(--r-ctl);font:600 14px/1 Geist,sans-serif;border:1px solid transparent;cursor:pointer;transition:background var(--ease),border-color var(--ease),color var(--ease);white-space:nowrap}
.btn.lg{height:44px;padding:0 22px;font-size:15px}
.btn.sm{height:32px;padding:0 12px;font-size:13px}
.btn.block{width:100%}
.btn.primary{background:var(--accent);color:#000} .btn.primary:hover{background:#86d3c7}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line-2)} .btn.ghost:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.03)}
.btn.danger{background:transparent;color:var(--down);border-color:rgba(248,113,113,.32)} .btn.danger:hover{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.5)}
.btn:disabled{opacity:.5;cursor:default}
.linkbtn{background:none;border:0;cursor:pointer;color:var(--fg-2);font:500 13px Geist,sans-serif;padding:6px 0;transition:color var(--ease)} .linkbtn:hover{color:var(--fg)}
.input{width:100%;min-width:0;height:44px;padding:0 14px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-ctl);font:400 15px Geist,sans-serif;color:var(--fg);transition:border-color var(--ease)}
.input::placeholder{color:#7C8AA0} .input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-10)}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden}
.panel .hd{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line)}
.panel .bd{padding:24px 20px;display:grid;gap:24px}

.tag{display:inline-flex;align-items:center;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:4px;border:1px solid var(--line-2);color:var(--fg-2);white-space:nowrap}
.tag.on{color:var(--accent);border-color:var(--accent-30);background:var(--accent-10)}
.tag.err{color:var(--down);border-color:rgba(248,113,113,.32);background:rgba(248,113,113,.08)}

/* chips (same as the landing page's briefing settings) */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;background:transparent;border:1px solid var(--line-2);border-radius:var(--r-ctl);font:500 14px Geist,sans-serif;color:var(--fg-2);cursor:pointer;transition:border-color var(--ease),background var(--ease),color var(--ease)}
.chip.mono{font:500 13px var(--mono)}
.chip .ck{display:none} .chip:hover{border-color:rgba(255,255,255,.28);color:var(--fg)}
.chip[aria-pressed=true]{border-color:var(--accent);background:var(--accent-10);color:var(--fg)} .chip[aria-pressed=true] .ck{display:block;color:var(--accent)}

.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.msg{font-size:13px;line-height:20px;color:var(--accent);min-height:20px} .msg.err{color:var(--down)}

footer{border-top:1px solid var(--line);padding:32px 0}
footer .wrap{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;font-size:13px;color:var(--fg-2)}
footer a:hover{color:var(--fg)}

a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.input:focus-visible{outline:none}

@media (max-width:900px){
  .wrap{padding:0 20px} .nav{height:72px} .shield{width:36px;height:36px} .brand img{width:146px}
}
@media (max-width:420px){ .brand img{display:none} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* language globe + menu (same as the landing page; behaviour in /lang-menu.js) */
.langsel{position:relative}
.globe{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:var(--r-ctl);color:var(--fg-2);cursor:pointer;transition:color var(--ease),border-color var(--ease),background var(--ease)}
.globe:hover,.globe[aria-expanded=true]{color:var(--fg);border-color:var(--line-2);background:rgba(255,255,255,.03)}
.lmenu{position:absolute;right:0;top:calc(100% + 8px);min-width:176px;background:var(--surface);border:1px solid var(--line-2);border-radius:8px;padding:4px;z-index:60}
.lmenu[hidden]{display:none}
.lmenu button{display:grid;grid-template-columns:16px 1fr auto;align-items:center;gap:8px;width:100%;height:40px;padding:0 10px;background:none;border:0;border-radius:6px;color:var(--fg-2);font:500 14px Geist,sans-serif;text-align:left;cursor:pointer;transition:background var(--ease),color var(--ease)}
.lmenu button:hover{background:rgba(255,255,255,.05);color:var(--fg)}
.lmenu .lck{visibility:hidden;color:var(--accent)} .lmenu [aria-checked=true] .lck{visibility:visible} .lmenu [aria-checked=true]{color:var(--fg)}
.lmenu .code{font:500 11px var(--mono);color:var(--fg-2);letter-spacing:.06em}
/* narrow screens: pin the language menu to the screen edge, not to the (crowded) globe button */
@media (max-width:560px){ .nav{position:relative} .langsel{position:static} .lmenu{right:20px;top:calc(100% - 8px)} }