/* Sync Design Desk hub and account pages (hub.html, login.html, admin.html). The same tokens as the workspace
   (index.html :root, the one source of truth): monochrome chrome, Aptos, type 12/13/14/16/18/22/28/40, spacing
   4/8/12/16/24/32, radius 4/6/10/pill, hairline rules and a 2 px ink rule for a major section, subtle elevation,
   motion 120-220 ms ease-out with a reduced-motion fallback. */
:root{
  --bg:#F4F4F4; --panel:#FFFFFF; --panel-2:#F7F7F7; --hover:#EFEFEF; --ink:#0A0A0A; --ink-2:#333333; --muted:#636363; --line:#E6E6E6; --line-2:#D4D4D4; --field:#858585;
  --accent:#0A0A0A; --accent-h:#2B2B2B; --accent-2:#EDEDED; --accent-ink:#FFFFFF;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 10px 28px -10px rgba(0,0,0,.18); --shadow-s:0 1px 2px rgba(0,0,0,.1);
  --shadow-lg:0 1px 2px rgba(0,0,0,.06),0 28px 72px -24px rgba(0,0,0,.32); --lift:0 1px 2px rgba(0,0,0,.04),0 14px 34px -18px rgba(0,0,0,.24);
  --r-s:4px; --r-m:6px; --r-l:10px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --t-s:12px; --t-m:13px; --t-l:14px; --t-xl:16px; --t-xxl:18px; --t-2xl:22px; --t-3xl:28px; --t-4xl:40px;
  --ls-label:.08em; --ls-tight:-.012em; --ls-display:-.03em;
  --rule:1px solid var(--line); --rule-2:2px solid var(--ink);
  --ease:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.4,0,1,1); --dur-1:120ms; --dur-2:180ms; --dur-3:220ms;
  --f:"Aptos","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-display:"Aptos Display","Aptos","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"Aptos Mono","Cascadia Mono","Cascadia Code",Consolas,ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#000000; --panel:#111111; --panel-2:#171717; --hover:#1F1F1F; --ink:#F5F5F5; --ink-2:#C7C7C7; --muted:#A3A3A3; --line:#232323; --line-2:#333333; --field:#737373;
  --accent:#F5F5F5; --accent-h:#D6D6D6; --accent-2:#262626; --accent-ink:#0A0A0A;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 32px -10px rgba(0,0,0,.7); --shadow-s:0 1px 2px rgba(0,0,0,.5);
  --shadow-lg:0 0 0 1px rgba(255,255,255,.04),0 28px 72px -20px rgba(0,0,0,.9); --lift:0 0 0 1px rgba(255,255,255,.03),0 16px 36px -18px rgba(0,0,0,.9); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#000000; --panel:#111111; --panel-2:#171717; --hover:#1F1F1F; --ink:#F5F5F5; --ink-2:#C7C7C7; --muted:#A3A3A3; --line:#232323; --line-2:#333333; --field:#737373;
  --accent:#F5F5F5; --accent-h:#D6D6D6; --accent-2:#262626; --accent-ink:#0A0A0A;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 32px -10px rgba(0,0,0,.7); --shadow-s:0 1px 2px rgba(0,0,0,.5);
  --shadow-lg:0 0 0 1px rgba(255,255,255,.04),0 28px 72px -20px rgba(0,0,0,.9); --lift:0 0 0 1px rgba(255,255,255,.03),0 16px 36px -18px rgba(0,0,0,.9); color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.5 var(--f);-webkit-font-smoothing:antialiased;accent-color:var(--ink)}
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
::selection{background:var(--ink);color:var(--panel)}
button,input,select{font:inherit;color:inherit}
:where(a,button,.btn,input,select){transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),opacity var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
/* labels in the website's eyebrow style: mono capitals with a short leading rule */
.eyebrow{display:flex;align-items:center;gap:12px;margin:0;font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor;flex:none}
@keyframes sdd-rise{from{opacity:0;transform:translateY(10px) scale(.985)}}
@keyframes sdd-fade{from{opacity:0}}
@keyframes sdd-drop{from{opacity:0;transform:translateY(-4px) scale(.985)}}
@keyframes sdd-pulse{50%{opacity:.45}}
.skel{display:inline-block;border-radius:var(--r-s);background:var(--line);animation:sdd-pulse 1.4s ease-in-out infinite;color:transparent!important;user-select:none}
small{font-size:12px}
a{color:inherit}

.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.brand svg{flex:none}
.brand small{display:block;font-weight:500;font-size:12px;letter-spacing:.02em;text-transform:none;color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--panel);cursor:pointer;white-space:nowrap;font-weight:500;text-decoration:none}
.btn:hover{background:var(--hover);border-color:var(--field)}
.btn:active:not(:disabled){transform:translateY(.5px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn.primary:hover{background:var(--accent-h);border-color:var(--accent-h)}
.btn.ghost{border-color:transparent;background:none}
.btn.ghost:hover{background:var(--hover)}
.btn.sm{height:28px;padding:0 10px;font-size:12px}
.btn.danger{color:var(--ink);border-color:var(--ink)}
.btn:disabled{opacity:.4;cursor:default}
.btn:focus-visible,.link:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* login card */
.auth{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px}
.card{width:min(400px,100%);background:var(--panel);border:1px solid var(--line);border-top:var(--rule-2);border-radius:var(--r-l);box-shadow:var(--shadow-lg);padding:28px 28px 24px;animation:sdd-rise var(--dur-3) var(--ease)}
.card .brand{margin-bottom:28px}
.card h1{font-size:var(--t-2xl);font-weight:600;letter-spacing:var(--ls-display);line-height:1.15;margin:0 0 6px}
.card p.sub{margin:0 0 20px;color:var(--muted)}
.f{display:block;margin:0 0 14px}
.f span{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.f input{width:100%;height:40px;padding:0 12px;border:1px solid var(--field);border-radius:var(--r-m);background:var(--panel-2);outline:none}
.f input:hover:not(:focus){border-color:var(--ink-2)}
.f input:focus{border-color:var(--ink);background:var(--panel);box-shadow:inset 0 0 0 1px var(--ink)}
.f small{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.fx{margin:-6px 0 10px;text-align:right;font-size:13px}
.card p.sub.small{font-size:13px;margin-top:-10px}
.card .btn:not(.primary){width:100%;height:40px}
.card .btn.primary{width:100%;height:40px;margin-top:6px}
.msg{margin:0 0 14px;padding:10px 12px;border-radius:var(--r-m);background:var(--panel-2);border:1px solid var(--line-2);font-size:13px;animation:sdd-fade var(--dur-2) var(--ease)}
.msg.err{border-color:var(--line-2);border-left:3px solid var(--ink);padding-left:10px;font-weight:500}
.alt{margin:18px 0 0;text-align:center;color:var(--muted);font-size:13px}
.link{border:0;background:none;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px;color:var(--ink);font-weight:500}
.foot{margin-top:18px;color:var(--muted);font-size:12px;text-align:center}

/* admin */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;height:56px;padding:0 16px;background:color-mix(in srgb,var(--panel) 90%,transparent);-webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--line)}
.top .spacer{flex:1}
.wrap{max-width:1080px;margin:0 auto;padding:40px 16px 56px}
.head{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:16px;border-bottom:var(--rule-2)}
.head h1{font-size:var(--t-3xl);font-weight:500;letter-spacing:var(--ls-display);line-height:1.1;margin:0}
.head p{margin:2px 0 0;color:var(--muted)}
.head .spacer{flex:1}
.filters{display:flex;gap:4px;flex-wrap:wrap}
.filters button{height:32px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--panel);cursor:pointer;font-size:13px}
.filters button:hover:not(.on){background:var(--hover);border-color:var(--field)}
.filters button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:10px 14px 9px;border-bottom:1px solid var(--line-2);background:var(--panel-2);white-space:nowrap}
tbody tr:hover td{background:var(--panel-2)}
td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td .who b{display:block;font-weight:600}
td .who small{color:var(--muted)}
.tag{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;border:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap}
.tag.pending{border-color:var(--ink);color:var(--ink);font-weight:600}
.tag.unverified{border-style:dashed;border-color:var(--ink-2);color:var(--ink-2)}
.tag.disabled{color:var(--muted);text-decoration:line-through}
.msg.info{margin:0 0 14px}
code.link-out{font-size:13px;letter-spacing:0;font-weight:500}
.tag.admin{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.acts{display:flex;gap:4px;justify-content:flex-end;flex-wrap:wrap}
.num{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.empty{padding:28px;text-align:center;color:var(--muted)}
.note{margin:16px 0 0;color:var(--muted);font-size:13px}
dialog{border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel);color:var(--ink);box-shadow:var(--shadow-lg);padding:22px;width:min(420px,calc(100% - 32px))}
dialog[open]{animation:sdd-rise var(--dur-3) var(--ease)}
dialog::backdrop{background:rgba(10,10,10,.42);animation:sdd-fade var(--dur-2) var(--ease)}
dialog h2{font-size:var(--t-xxl);font-weight:650;letter-spacing:var(--ls-tight);margin:0 0 6px}
dialog p{margin:0 0 14px;color:var(--ink-2)}
dialog .row{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
code.pw{display:block;padding:10px 12px;border:1px dashed var(--line-2);border-radius:6px;background:var(--panel-2);font:600 16px ui-monospace,Consolas,monospace;letter-spacing:.04em;user-select:all;word-break:break-all}

@media (max-width:760px){
  .hide-narrow{display:none!important}
  table,thead,tbody,tr,td{display:block}
  thead{display:none}
  tr{border-bottom:1px solid var(--line);padding:10px 0}
  tr:last-child{border-bottom:0}
  td{border:0;padding:4px 14px}
  .acts{justify-content:flex-start;margin-top:4px}
  td.inl{display:inline-block;padding-right:0}
  td[data-l]::before{content:attr(data-l) ": ";color:var(--muted)}
}
.f .pwrow{position:relative;display:block;margin:0;font-weight:400;color:inherit}
.f .pwrow input{padding-right:64px}
.pwshow{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:6px 8px;font-size:13px}
/* confirm-password check: monochrome, told by words and weight; mismatch also thickens the field border */
.f small.pwmatch:empty{display:none}
.f small.pwmatch.bad{color:var(--ink);font-weight:600}
.f small.pwmatch.bad::before{content:"\2715\00a0";content:"\2715\00a0" / "";font-weight:700}
.f input[aria-invalid="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.foot a{color:inherit;text-underline-offset:2px}
/* Touch: 40 px targets on tablets and phones (same rule as the workspace) */
@media (pointer: coarse),(max-width:760px){
  .btn,.btn.sm,.filters button{min-height:40px}
  .pwshow{min-height:40px;min-width:48px}
  .link{min-height:40px;padding:0 4px}
  .brand{min-height:40px}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after,dialog::backdrop{transition:none!important;animation:none!important}}
a.brand{text-decoration:none;border-radius:6px}
a.brand:hover .appname{text-decoration:underline;text-underline-offset:3px}
.brandmod{color:var(--muted);font-size:13px;white-space:nowrap}
.brandmod::before{content:"\00b7";margin:0 6px 0 2px}