/* Wingverify. Tokens in three tiers: primitives -> semantic -> component. */
:root{
  /* primitives */
  --n-950:#08090A; --n-900:#0E0F11; --n-850:#131417; --n-800:#1A1C20; --n-700:#262930;
  --n-400:#8E96A3; --n-300:#A7AEBA; --n-100:#F4F5F7;
  --v-500:#8486F5; --v-400:#9B9DF8;
  --g-400:#4ADE80; --a-400:#E8B84A; --r-400:#F2706B;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px;
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);

  /* semantic (dark) */
  --bg:var(--n-950); --surface:var(--n-900); --surface-2:var(--n-850); --surface-3:var(--n-800);
  --text:var(--n-100); --text-2:var(--n-300); --text-3:var(--n-400);
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16);
  --accent:var(--v-500); --accent-text:var(--v-400); --on-accent:#0A0A14;
  --accent-soft:color-mix(in srgb,var(--v-500) 14%,transparent);
  --ok:var(--g-400); --warn:var(--a-400); --bad:var(--r-400); --mute:var(--n-400);
  --shadow-float:0 12px 40px rgba(0,0,0,.45);
  --sel:rgba(132,134,245,.35);

  /* component */
  --radius:8px; --radius-sm:6px; --control-h:36px; --side-w:236px;
}
:root[data-theme=light]{
  --bg:#F5F6F8; --surface:#FFFFFF; --surface-2:#F0F1F5; --surface-3:#E6E8EE;
  --text:#14151A; --text-2:#454B59; --text-3:#5F6675;
  --line:rgba(16,20,30,.10); --line-strong:rgba(16,20,30,.22);
  --accent:#5456DB; --accent-text:#4547C9; --on-accent:#FFFFFF;
  --ok:#15803D; --warn:#8A5A00; --bad:#B42318; --mute:#5F6675;
  --shadow-float:0 12px 32px rgba(16,20,30,.18);
  --sel:rgba(84,86,219,.25);
}
*{box-sizing:border-box;margin:0}
html{color-scheme:dark}
:root[data-theme=light]{color-scheme:light}
body{background:var(--bg);color:var(--text-2);font:14px/1.55 var(--font);-webkit-font-smoothing:antialiased;min-height:100vh;caret-color:var(--accent)}
::selection{background:var(--sel);color:var(--text)}
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent-text);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
h1,h2,h3{color:var(--text);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.data{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--text-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- app shell ---------- */
.app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:var(--sp-4) var(--sp-3);overflow-y:auto}
.brand{display:flex;align-items:center;gap:var(--sp-2);color:var(--text);font-weight:600;font-size:16px;letter-spacing:-.02em;padding:var(--sp-1) var(--sp-2) var(--sp-4)}
.brand svg{color:var(--accent)}
.brand:hover{text-decoration:none}
.grp{font-size:12px;color:var(--text-3);padding:var(--sp-4) var(--sp-2) var(--sp-1)}
.navl{display:flex;align-items:center;gap:10px;padding:7px var(--sp-2);border-radius:var(--radius-sm);color:var(--text-2);transition:background .15s var(--ease),color .15s;white-space:nowrap}
.navl:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.navl[aria-current=page]{background:var(--surface-3);color:var(--text)}
.navl[aria-current=page] svg{color:var(--accent-text)}
.spacer{flex:1;min-height:var(--sp-4)}
.acct{border-top:1px solid var(--line);padding-top:var(--sp-3);display:grid;gap:var(--sp-2)}
.acct .who{font-size:12.5px;color:var(--text-3);padding:0 var(--sp-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.balchip{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:9px var(--sp-3);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);color:var(--text)}
.balchip:hover{border-color:var(--line-strong);text-decoration:none}
.balchip .l{font-size:12px;color:var(--text-3)}
.balchip .v{font-weight:600;font-variant-numeric:tabular-nums}
.row-btns{display:flex;gap:var(--sp-2)}
.content{padding:var(--sp-8) var(--sp-8) var(--sp-16);min-width:0}
.page{max-width:1040px;margin:0 auto}
.page-h{display:flex;align-items:flex-start;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.page-h h1{font-size:24px}
.page-h p{margin-top:var(--sp-1);max-width:62ch}
.page-h .grow{flex:1;min-width:220px}
@media(max-width:960px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;align-items:center;gap:var(--sp-1);padding:var(--sp-2) var(--sp-3);overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}
  .brand{padding:0 var(--sp-2) 0 var(--sp-1)}
  .grp,.acct .who,.balchip .l{display:none}
  .side nav{display:flex;gap:var(--sp-1)}
  .side{scrollbar-width:none}
  .side::-webkit-scrollbar{display:none}
  .spacer{display:none}
  .acct{border:0;padding:0;display:flex;align-items:center;margin-left:auto}
  .balchip{padding:5px 10px}
  .content{padding:var(--sp-6) var(--sp-4) var(--sp-12)}
  .navl{padding:6px 10px}
}

/* ---------- public shell ---------- */
.pubbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.pubbar .in{max-width:1120px;margin:0 auto;padding:0 var(--sp-6);height:60px;display:flex;align-items:center;gap:var(--sp-2)}
.pubbar .brand{padding:0 var(--sp-6) 0 0}
.pubbar .links{display:flex;gap:var(--sp-1)}
.pubbar .links a{color:var(--text-2);padding:6px 12px;border-radius:var(--radius-sm)}
.pubbar .links a:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.sp{flex:1}
.pubwrap{max-width:1120px;margin:0 auto;padding:0 var(--sp-6)}
@media(max-width:720px){.pubwrap,.pubbar .in{padding:0 var(--sp-4)}.pubbar .links{display:none}}
@media(max-width:520px){.pubbar #theme{display:none}.pubbar .brand{padding-right:var(--sp-2)}.pubbar .btn.sm{padding:0 9px}}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--control-h);padding:0 14px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text);cursor:pointer;font-weight:500;transition:background .15s var(--ease),border-color .15s,opacity .15s;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--surface-3);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent);filter:brightness(1.1)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn.ghost:hover{background:var(--surface-2);color:var(--text)}
.btn.danger{color:var(--bad)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.sm{min-height:30px;padding:0 10px;font-size:13px}
.btn.lg{min-height:44px;padding:0 20px;font-size:15px}
.btn.wide{width:100%}
.ibtn{width:var(--control-h);height:var(--control-h);padding:0}
input[type=text],input[type=email],input[type=password],input[type=number],select{background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:7px 11px;width:100%;color:var(--text);min-height:var(--control-h);transition:border-color .15s}
input::placeholder,textarea::placeholder{color:var(--text-3)}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--line-strong) 160%,transparent)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}
textarea{width:100%;min-height:220px;resize:vertical;background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:var(--sp-3);font:12.5px/1.65 var(--mono);color:var(--text)}
textarea.drag{border-color:var(--accent);background:var(--accent-soft)}
label.f{display:block;font-size:13px;font-weight:500;color:var(--text);margin-bottom:6px}
.hint{font-size:12.5px;color:var(--text-3);margin-top:6px}
.field+.field{margin-top:var(--sp-4)}
.row{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap}
.seg{display:inline-flex;padding:3px;gap:2px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);flex-wrap:wrap}
.seg button{background:none;border:0;border-radius:var(--radius-sm);padding:5px 12px;cursor:pointer;color:var(--text-2);display:inline-flex;gap:var(--sp-2);align-items:center;font-weight:500;transition:background .15s var(--ease),color .15s}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed=true],.seg button[aria-selected=true]{background:var(--surface-3);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
.seg .c{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}

/* ---------- surfaces ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.stack>*+*{margin-top:var(--sp-4)}
.stack-lg>*+*{margin-top:var(--sp-6)}
.ph{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);flex-wrap:wrap;min-height:50px}
.ph h2{font-size:14px;letter-spacing:0}
.ph .sub{font-size:12.5px;color:var(--text-3)}
.pb{padding:var(--sp-4)}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-4);align-items:start}
.cols-a{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:var(--sp-4);align-items:start}
@media(max-width:900px){.cols,.cols-a{grid-template-columns:1fr}}
.dl{display:grid;grid-template-columns:1fr auto;margin:0}
.dl>div{display:contents}
.dl dt,.dl dd{padding:10px var(--sp-4);border-bottom:1px solid var(--line)}
.dl>div:last-child dt,.dl>div:last-child dd{border-bottom:0}
.dl dt{color:var(--text-2)}
.dl dd{color:var(--text);text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.progress{height:4px;background:var(--surface-3);border-radius:2px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--accent);transition:width .4s var(--ease)}

/* callouts: full 1px border, tone in the icon dot */
.note{display:flex;gap:10px;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--radius);padding:10px var(--sp-3);font-size:13px;color:var(--text-2)}
.note>.dot{margin-top:7px}
.note.ok{border-color:color-mix(in srgb,var(--ok) 35%,var(--line))}
.note.bad{border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.note.warn{border-color:color-mix(in srgb,var(--warn) 40%,var(--line))}
.note b{color:var(--text)}

/* badges */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:2px 9px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,transparent)}
.badge.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 13%,transparent)}
.badge.bad{color:var(--bad);background:color-mix(in srgb,var(--bad) 13%,transparent)}
.badge.mute{color:var(--text-3);background:var(--surface-3)}
.badge.acc{color:var(--accent-text);background:var(--accent-soft)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--mute);display:inline-block;flex:none}
.dot.ok{background:var(--ok)}.dot.bad{background:var(--bad)}.dot.warn{background:var(--warn)}
.tag{display:inline-block;font-size:11.5px;border:1px solid var(--line-strong);border-radius:4px;padding:0 6px;margin:0 4px 2px 0;color:var(--text-2);line-height:1.6}

/* tables */
.scroll{overflow:auto;max-height:560px}
.scroll.tall{max-height:none}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{font-size:12px;font-weight:500;color:var(--text-3);text-align:left;padding:9px var(--sp-4);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);white-space:nowrap;z-index:1}
.tbl td{padding:10px var(--sp-4);border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--surface-2)}
.tbl td.r,.tbl th.r{text-align:right}
.tbl .grp-row td{background:var(--surface-2);font-size:12px;font-weight:500;color:var(--text-3);padding:6px var(--sp-4)}
.tbl input,.tbl select{min-height:30px;padding:3px 8px;font-size:13px}
.tbl select{min-width:130px}
@media(max-width:900px){.panel>.tbl,.pb>.tbl{display:block;max-width:100%;overflow-x:auto}.scroll .tbl{min-width:600px}}
.tbl .em{color:var(--text);word-break:break-all}
.toolbar{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line)}
.toolbar input[type=text]{max-width:260px}
.empty{padding:var(--sp-12) var(--sp-6);text-align:center;color:var(--text-3);display:grid;justify-items:center;gap:var(--sp-2)}
.empty svg.i{width:28px;height:28px;color:var(--text-3)}
.empty strong{color:var(--text);font-size:15px}
.code{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--sp-3) var(--sp-4);font:12.5px/1.65 var(--mono);color:var(--text);overflow:auto;white-space:pre}
.chips{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.chip{border:1px solid var(--line-strong);background:var(--surface-2);border-radius:999px;padding:4px 13px;cursor:pointer;font-size:13px;color:var(--text);transition:background .15s,border-color .15s}
.chip:hover{background:var(--surface-3)}
.chip[aria-pressed=true]{border-color:var(--accent);color:var(--accent-text);background:var(--accent-soft)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--surface-3);border:1px solid var(--line-strong);padding:10px 16px;border-radius:var(--radius);color:var(--text);font-size:13.5px;z-index:60;box-shadow:var(--shadow-float);max-width:90vw}
[hidden]{display:none!important}

/* skeleton */
.sk{background:var(--surface-3);border-radius:var(--radius-sm);height:14px;animation:sk 1.6s ease-in-out infinite}
@keyframes sk{50%{opacity:.45}}

/* ---------- landing ---------- */
.hero{padding:var(--sp-16) 0 var(--sp-12);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--sp-12);align-items:center}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.6rem);letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
.hero .lede{font-size:17px;line-height:1.6;max-width:52ch;margin:var(--sp-4) 0 var(--sp-6);text-wrap:pretty}
.hero ul{list-style:none;padding:0;margin-top:var(--sp-6);display:grid;gap:var(--sp-2);font-size:13.5px}
.hero li{display:flex;gap:var(--sp-2);align-items:center}
.hero li svg{color:var(--ok);width:16px;height:16px}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding:var(--sp-8) 0}}
.sample .tbl th,.sample .tbl td{padding:9px var(--sp-3)}
.sect{padding:var(--sp-12) 0;border-top:1px solid var(--line)}
.sect>h2{font-size:clamp(1.4rem,2.6vw,1.9rem);letter-spacing:-.025em;margin-bottom:var(--sp-2)}
.sect>p.lead{max-width:60ch;margin-bottom:var(--sp-6)}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);counter-reset:s}
.steps li{counter-increment:s;padding-top:var(--sp-3);border-top:2px solid var(--line-strong)}
.steps li::before{content:counter(s) ".";color:var(--accent-text);font-weight:600;margin-right:6px}
.steps b{color:var(--text)}
.steps p{margin-top:var(--sp-1)}
@media(max-width:800px){.steps{grid-template-columns:1fr}}
.foot{border-top:1px solid var(--line);padding:var(--sp-6) 0 var(--sp-8);color:var(--text-3);font-size:13px;display:flex;gap:var(--sp-4);flex-wrap:wrap}

/* auth */
.auth-wrap{min-height:calc(100vh - 60px);display:grid;place-items:center;padding:var(--sp-8) var(--sp-4)}
.auth{width:100%;max-width:400px}
.auth h1{font-size:26px;margin-bottom:var(--sp-1)}

/* docs (reading) */
.doc{max-width:780px}
.doc h3{font-size:16px;margin:var(--sp-8) 0 var(--sp-2)}
.m{display:inline-block;font:600 11px var(--mono);padding:1px 7px;border-radius:4px;background:var(--accent-soft);color:var(--accent-text);margin-right:8px}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* provider rows */
.prov{border-bottom:1px solid var(--line)}
.prov:last-child{border-bottom:0}
.prov summary{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);cursor:pointer;list-style:none;transition:background .15s var(--ease)}
.prov summary::-webkit-details-marker{display:none}
.prov summary:hover{background:var(--surface-2)}
.prov .pn{flex:1;min-width:0;color:var(--text)}
.prov .chev svg{width:16px;height:16px;color:var(--text-3);transition:transform .2s var(--ease)}
.prov[open] .chev svg{transform:rotate(90deg)}
.prov[open] summary{background:var(--surface-2)}
.prov .body{padding:var(--sp-4);border-top:1px solid var(--line);display:grid;gap:var(--sp-6)}
.kv{display:grid;grid-template-columns:minmax(160px,240px) minmax(0,1fr) auto;gap:var(--sp-3);align-items:center}
.kv+.kv{margin-top:var(--sp-3)}
.testbox{border-top:1px solid var(--line);padding-top:var(--sp-4)}
.prov .badges{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:flex-end}
@media(max-width:700px){.kv{grid-template-columns:1fr}.prov summary{flex-wrap:wrap}.prov .pn{flex:1 1 calc(100% - 32px)}.prov .badges{flex-basis:100%;justify-content:flex-start;padding-left:28px}}