/* Shared look for the account and admin pages: same tokens as the main site (3D wall + bento). */
:root{
  --bg:#f2f3f6; --surface:#ffffff; --surface-2:#e9ebf0; --ink:#0c0d12; --mute:#646a7a; --line:#dfe2e9;
  --accent:#3b46ff; --on-accent:#ffffff; --good:#13985a; --warn:#c77a00; --bad:#d6334a;
  --glass:rgba(255,255,255,.72); --shadow:0 1px 2px rgba(12,13,18,.06),0 12px 40px -18px rgba(12,13,18,.28);
  --display:'Unbounded','Arial Black',system-ui,sans-serif;
  --body:'Onest',system-ui,'Segoe UI',Arial,sans-serif;
  --mono:'Martian Mono',ui-monospace,Consolas,monospace;
  --r:22px; --r-sm:14px;
  --gl:max(16px,env(safe-area-inset-left,0px)); --gr:max(16px,env(safe-area-inset-right,0px));
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#07080b; --surface:#111318; --surface-2:#1a1d24; --ink:#f1f2f6; --mute:#8b91a3; --line:#22252e;
  --accent:#7079ff; --on-accent:#07080b; --good:#3ccf8a; --warn:#f0a63a; --bad:#ff5d73;
  --glass:rgba(17,19,24,.7); --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 50px -20px rgba(0,0,0,.8); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#07080b; --surface:#111318; --surface-2:#1a1d24; --ink:#f1f2f6; --mute:#8b91a3; --line:#22252e;
  --accent:#7079ff; --on-accent:#07080b; --good:#3ccf8a; --warn:#f0a63a; --bad:#ff5d73;
  --glass:rgba(17,19,24,.7); --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 50px -20px rgba(0,0,0,.8); color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px}
h1,h2,h3{margin:0;text-wrap:balance}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}

/* top bar */
.bar{position:sticky;top:0;z-index:20;padding:calc(12px + env(safe-area-inset-top,0px)) 0 12px;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font:700 14px var(--display);margin-right:auto;white-space:nowrap}
.brand i{width:28px;height:28px;border-radius:9px;background:var(--accent);display:grid;place-items:center;color:var(--on-accent);font:900 10px var(--display);font-style:normal}
.bar a.l{text-decoration:none;font-size:14px;color:var(--mute);padding:8px 12px;border-radius:99px}
.bar a.l:hover{color:var(--ink);background:var(--surface-2)}
.me{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.me img,.ava{width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--surface-2);flex:none}
.ava{display:grid;place-items:center;font:700 13px var(--display);color:var(--mute)}

/* building blocks */
.h1{font:800 clamp(30px,5vw,54px)/1 var(--display);letter-spacing:-.035em}
.h2{font:700 clamp(22px,3vw,30px)/1.1 var(--display);letter-spacing:-.03em}
.mute{color:var(--mute)}
.card{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);padding:clamp(18px,3vw,28px)}
.stack{display:grid;gap:16px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:99px;padding:12px 20px;font-weight:600;font-size:15px;cursor:pointer;text-decoration:none;background:var(--surface-2);color:var(--ink);transition:transform .15s,filter .15s}
.btn:active{transform:scale(.97)}
.btn:hover{filter:brightness(.96)}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.good{background:var(--good);color:#fff}
.btn.bad{background:color-mix(in srgb,var(--bad) 14%,var(--surface));color:var(--bad)}
.btn.small{padding:7px 13px;font-size:13.5px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.field{display:grid;gap:6px}
.field label{font-weight:600;font-size:14px}
.field .hint{font-size:13px;color:var(--mute)}
input[type=text],input[type=url],input[type=number],textarea,select{width:100%;border:0;border-radius:12px;padding:12px 14px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);outline:none}
input:focus,textarea:focus,select:focus{box-shadow:inset 0 0 0 2px var(--accent)}
textarea{min-height:96px;resize:vertical}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;font-size:12.5px;font-weight:600;background:var(--surface-2);color:var(--mute);white-space:nowrap}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.chip.good{background:color-mix(in srgb,var(--good) 14%,var(--surface));color:var(--good)}
.chip.warn{background:color-mix(in srgb,var(--warn) 16%,var(--surface));color:var(--warn)}
.chip.bad{background:color-mix(in srgb,var(--bad) 14%,var(--surface));color:var(--bad)}
.chip.info{background:color-mix(in srgb,var(--accent) 14%,var(--surface));color:var(--accent)}
.notice{padding:14px 16px;border-radius:var(--r-sm);background:var(--surface-2);font-size:15px}
.notice.good{background:color-mix(in srgb,var(--good) 12%,var(--surface))}
.notice.warn{background:color-mix(in srgb,var(--warn) 14%,var(--surface))}
.notice.bad{background:color-mix(in srgb,var(--bad) 12%,var(--surface))}
.choice{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.opt{position:relative;display:grid;gap:6px;padding:18px;border-radius:var(--r-sm);background:var(--surface-2);cursor:pointer;box-shadow:inset 0 0 0 1.5px transparent}
.opt input{position:absolute;opacity:0}
.opt b{font:700 17px var(--display);letter-spacing:-.02em}
.opt span{font-size:14px;color:var(--mute)}
.opt:has(input:checked){box-shadow:inset 0 0 0 2px var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.opt:has(input:focus-visible){outline:2.5px solid var(--accent);outline-offset:3px}
.toast{position:fixed;z-index:50;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));translate:-50% 0;padding:12px 18px;border-radius:99px;background:var(--ink);color:var(--bg);font-weight:600;font-size:14.5px;box-shadow:var(--shadow);animation:pop .3s cubic-bezier(.2,.8,.2,1)}
.toast.bad{background:var(--bad);color:#fff}
@keyframes pop{from{transform:translateY(12px)}}
.empty{padding:28px;text-align:center;color:var(--mute)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}