/* ============================================================================
   SolAuth — product UI (auth screen + dashboard)
   Tokens, reset and the theme toggle live in theme.css, loaded first by every
   page. This file is only the product's components: flat surfaces, hairline
   borders, one accent, and no decoration that doesn't carry information.
   ========================================================================== */

.ainput:focus-visible,.keyinput:focus-visible,.iinput:focus-visible{outline:none}

/* ============================================================================
   AUTH
   A product bar across the top, one centred card beneath it. The card holds a
   heading, a line of context, the fields, and nothing else.
   ========================================================================== */
#auth{
  position:fixed;inset:0;z-index:100;overflow-y:auto;
  /* Reserve the scrollbar on both edges, otherwise its gutter pushes the centred
     card a few pixels off true centre. */
  scrollbar-gutter:stable both-edges;
  background:var(--bg0);
  transition:opacity .32s ease, transform .32s ease;
}
#auth.out{opacity:0;transform:scale(.99);pointer-events:none}

/* Product bar across the top of the auth screen — same language as the site's
   nav, so signing in doesn't feel like a different property. */
.nav, .anav{
  position:sticky;top:0;z-index:5;
  background:color-mix(in srgb,var(--bg0) 90%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-in, .anav-in{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  height:64px;max-width:var(--container);margin:0 auto;padding:0 var(--gutter);
}
.brand, .anav-brand{display:flex;align-items:center;gap:11px;font-size:17px;font-weight:700;letter-spacing:-.4px;justify-self:start;color:var(--t1);text-decoration:none}
.brand img, .anav-brand img{width:30px;height:30px;object-fit:contain;display:block}
.nav-links, .anav-links{display:flex;align-items:center;gap:2px;justify-self:center}
.nav-links a, .anav-links a{
  font-size:13.5px;font-weight:500;color:var(--t2);padding:8px 12px;border-radius:var(--radius-sm);
  transition:color .14s,background .14s;text-decoration:none;
}
.nav-links a:hover, .anav-links a:hover{color:var(--t1);background:var(--bg3)}
.nav-right, .anav-right{display:flex;align-items:center;gap:10px;justify-self:end}
.tlink{font-size:13.5px;font-weight:600;color:var(--t2);padding:8px 12px;border-radius:var(--radius-sm);transition:.14s;cursor:pointer;text-decoration:none}
.tlink:hover{color:var(--t1);background:var(--bg3)}
.tlink.on{color:var(--brand)}
.nav-right .btn{font-size:13px;font-weight:600;padding:8px 16px;border-radius:var(--radius-sm);background:var(--brand);color:var(--on-accent);transition:.15s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.nav-right .btn:hover{background:var(--brand-deep)}
.anav-back{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--t2);padding:8px 10px;border-radius:var(--radius-sm);transition:.14s;text-decoration:none}
.anav-back:hover{color:var(--t1);background:var(--bg3)}
.anav-back svg{width:14px;height:14px}
@media(max-width:1000px){.nav-links,.anav-links{display:none}.nav-in,.anav-in{grid-template-columns:auto 1fr}.nav-right,.anav-right{grid-column:2}}
@media(max-width:640px){.anav-back span,.anav-back{font-size:12.5px}}
@media(max-width:420px){.anav-back{display:none}}

/* 560, not 460: the API key is 52 characters and has to sit on ONE line in the
   key field without scrolling. At 460 the field could only show ~35 of them. */
.auth-stage{
  position:relative;z-index:2;width:100%;max-width:560px;
  margin:0 auto;padding:clamp(28px, 5vh, 56px) var(--gutter) clamp(40px, 6vh, 72px);
  display:flex;align-items:center;justify-content:center;min-height:calc(100svh - 64px);
}

.auth-shell{position:relative;z-index:2;width:100%;min-width:0}

/* The brand block that used to sit above the card is gone — the top bar already
   carries it, and repeating it was the main source of clutter here. */
.auth-card{
  position:relative;
  background:var(--bg2);
  border:1px solid var(--line2);
  border-radius:var(--radius-lg);
  padding:32px 28px 26px;
  box-shadow:var(--shadow);
}
#mode-key,#mode-register{animation:authIn .3s cubic-bezier(.2,.7,.25,1)}
@keyframes authIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(max-width:520px){.auth-card{padding:26px 20px 22px}}

/* Just the heading — no explanatory line under it. */
.auth-h{font-size:21px;font-weight:700;letter-spacing:-.6px;text-align:center;line-height:1.2;margin-bottom:26px}
.code-in{letter-spacing:6px;font-family:var(--mono);text-align:center}

.afield{margin-bottom:14px}
.afield label{display:block;font-size:12px;font-weight:600;color:var(--t2);margin-bottom:7px}
.afield-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.afield-top label{margin-bottom:7px}
.afield-hint{font-family:var(--mono);font-size:11px;color:var(--t3);transition:color .15s}
.afield-hint.ok{color:var(--ok)}
.afield-hint.bad{color:var(--err)}

/* ── Inputs ───────────────────────────────────────────────────────────────── */
.ainput,.iinput{
  width:100%;background:var(--bg0);border:1px solid var(--line2);
  color:var(--t1);border-radius:var(--radius-sm);padding:10px 13px;font-size:14px;
  outline:none;transition:border-color .15s, box-shadow .15s;font-family:var(--font);
}
:root[data-theme="light"] .ainput,
:root[data-theme="light"] .iinput{background:var(--bg1)}
.ainput:focus,.iinput:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
.ainput::placeholder,.iinput::placeholder{color:var(--t3)}

.keyfield{
  position:relative;display:flex;align-items:center;gap:9px;height:48px;
  background:var(--bg0);border:1px solid var(--line2);border-radius:var(--radius);padding:0 6px 0 13px;
  transition:border-color .15s, box-shadow .15s;
}
:root[data-theme="light"] .keyfield{background:var(--bg1)}
/* The tail-fade existed because a full key overran the field. It now fits on one
   line, so the fade would only ever dim real characters — removed. */
.keyfield:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
/* 10.5px with no extra tracking is what lands all 52 characters on one line
   inside the 560px card — measured against the rendered font, not guessed. */
.keyinput{flex:1;min-width:0;height:100%;padding:0;background:transparent;border:none;outline:none;color:var(--t1);font-family:var(--mono);font-size:10.5px;letter-spacing:0}
.keyinput::placeholder{color:var(--t3);letter-spacing:0;font-size:12.5px}
/* Masked and revealed MUST share font-size and tracking. In a monospace face a
   bullet takes the same advance width as a glyph, so any extra tracking here
   pushed the 52 dots past the edge (measured: 400px vs a 328px box) even though
   the revealed key fit. Keep the two states identical. */
.keyfield-btn{flex:0 0 auto;width:30px;height:30px;border-radius:7px;cursor:pointer;background:transparent;border:1px solid transparent;color:var(--t3);display:grid;place-items:center;transition:.15s}
.keyfield-btn:hover{color:var(--t1);background:var(--bg3);border-color:var(--line2)}
.keyfield-btn.on{color:var(--brand)}
.keyfield-btn svg{width:15px;height:15px}
.keyfield-paste.ok{color:var(--ok);border-color:var(--gn-border);background:var(--gn-g)}

.ainput-wrap{position:relative;display:flex;align-items:center}
.ainput-wrap .ainput{padding-right:44px}
/* Inline action inside a field (Send code) — keeps the email step to one line
   instead of stacking a full-width button under the input. Targeted by id rather
   than :has() so it doesn't depend on selector support. The padding leaves room
   for the button plus the validity tick that sits to its left. */
#rEmail{padding-right:124px}
.ainput-check{
  position:absolute;right:98px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--gn);pointer-events:none;transition:opacity .15s;
}
.ainput-inline{
  position:absolute;right:5px;height:30px;padding:0 11px;border-radius:7px;
  background:var(--bg3);border:1px solid var(--line2);color:var(--t1);
  font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.14s;
}
.ainput-inline:hover{background:var(--bg4);border-color:var(--line3)}
.ainput-inline:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.ainput-eye{position:absolute;right:6px;width:32px;height:32px;border-radius:8px;background:transparent;border:none;cursor:pointer;color:var(--t3);display:grid;place-items:center;transition:color .15s,background .15s}
.ainput-eye:hover{color:var(--t1);background:var(--bg3)}
.ainput-eye.on{color:var(--brand)}
.ainput-eye svg{width:16px;height:16px}

/* ── 6-digit code grid ────────────────────────────────────────────────────────
   One box per digit. `.filled` marks a box the user has answered, `.err` flashes
   the whole row when the server rejects the code, just before it's cleared. */
.code-grid-wrap{margin:16px 0 18px}
.code-grid-label{font-size:12px;font-weight:600;color:var(--t2);margin-bottom:10px;text-align:center}
.code-grid{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 0 14px}
.cd-box{
  width:44px;height:50px;text-align:center;font-family:var(--mono);font-size:20px;font-weight:700;
  color:var(--t1);background:var(--bg0);border:1px solid var(--line2);border-radius:var(--radius-sm);
  outline:none;transition:border-color .15s, box-shadow .15s, background .15s;
}
:root[data-theme="light"] .cd-box{background:var(--bg1)}
.cd-box:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring);background:var(--bg2)}
.cd-box.filled{border-color:var(--brand-line);background:var(--brand-soft)}
.cd-box:disabled{opacity:.6;cursor:default}
.cd-box.err{border-color:var(--rd);background:color-mix(in srgb,var(--rd) 12%,transparent);color:var(--rd)}
.code-grid.shake{animation:cdShake .4s ease}
@keyframes cdShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){.code-grid.shake{animation:none}}
@media(max-width:420px){.cd-box{width:38px;height:46px;font-size:18px}.code-grid{gap:6px}}
.cd-sep{width:8px;height:2px;background:var(--line2);margin:0 2px;border-radius:1px}
.code-grid-sub{font-size:12.5px;color:var(--t3);text-align:center;margin-top:10px}
.code-grid-sub b{color:var(--t1)}
.code-resend-link{color:var(--brand);font-weight:600;margin-left:8px;cursor:pointer}
.code-resend-link:hover{text-decoration:underline}
/* Cooling down after a send — the countdown is the label, so it must not read
   as a live link. */
.code-resend-link.off{color:var(--t3);cursor:default;pointer-events:none}
.code-resend-link.off:hover{text-decoration:none}

.auth-btn{
  width:100%;border:1px solid transparent;cursor:pointer;
  background:var(--brand);color:var(--on-accent);font-weight:600;font-size:14.5px;
  border-radius:var(--radius-sm);padding:12px;margin-top:4px;
  transition:background .15s, transform .05s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.auth-btn:hover{background:var(--brand-deep)}
.auth-btn:active{transform:translateY(1px)}
.auth-btn:disabled{opacity:.55;cursor:default}
.auth-btn svg{width:17px;height:17px}
.auth-btn.dsc{background:#5865f2}
.auth-btn.dsc:hover{background:#4752c4}

.auth-alt{margin-top:16px;text-align:center;font-size:13px;color:var(--t3)}
.auth-alt a{color:var(--brand);font-weight:600;cursor:pointer}
.auth-alt a:hover{text-decoration:underline}
.auth-err{display:none;background:color-mix(in srgb,var(--err) 10%,transparent);border:1px solid color-mix(in srgb,var(--err) 32%,transparent);color:var(--err);font-size:13px;padding:10px 12px;border-radius:var(--radius-sm);margin-bottom:14px}
.auth-foot{text-align:center;margin-top:20px;font-size:12px;color:var(--t3)}
.auth-foot a{color:var(--t2);text-decoration:underline;text-underline-offset:2px}
.auth-foot a:hover{color:var(--brand)}

.keyreveal{background:var(--bg0);border:1px solid var(--line2);border-radius:var(--radius);padding:14px;margin-bottom:14px}
:root[data-theme="light"] .keyreveal{background:var(--bg3)}
.keyreveal .kr-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--brand);font-weight:700;margin-bottom:8px}
.keyreveal code{display:block;font-family:var(--mono);font-size:13px;color:var(--t1);word-break:break-all;background:var(--bg2);border:1px solid var(--line2);border-radius:8px;padding:10px}
.keyreveal .kr-note{font-size:12px;color:var(--t3);margin-top:8px}

/* ============================================================================
   APP SHELL
   ========================================================================== */
#app{display:none;position:relative;z-index:1;min-height:100vh}
#app.show{display:block}

.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);
  background:var(--bg1);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:16px 12px;z-index:30;
}
.sb-brand{display:flex;align-items:center;gap:11px;padding:6px 8px 16px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.sb-brand .badge-logo{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto}
.sb-brand .badge-logo img{width:100%;height:100%;object-fit:contain;display:block}
.sb-brand .bt{font-size:16px;font-weight:700;letter-spacing:-.3px}
.sb-brand .bt span{color:var(--brand)}

.sb-section{font-size:10.5px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;color:var(--t3);padding:16px 10px 8px}
.nav-item{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:8px 11px;border-radius:var(--radius-sm);border:none;background:transparent;
  color:var(--t2);font-size:13.5px;font-weight:500;cursor:pointer;text-align:left;
  transition:background .13s,color .13s;position:relative;
}
.nav-item svg{width:17px;height:17px;flex-shrink:0}
.nav-item:hover{background:var(--bg3);color:var(--t1)}
.nav-item.on{background:var(--brand-soft);color:var(--brand);font-weight:600}
.nav-item.on::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--brand)}
.nav-badge{margin-left:auto;font-size:9px;font-weight:700;background:var(--brand-soft);color:var(--brand);padding:2px 6px;border-radius:5px;letter-spacing:.5px}

.sb-spacer{flex:1}
.sb-bottom{border-top:1px solid var(--line);padding-top:12px;margin-top:8px}
.sb-account{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);background:var(--bg2);border:1px solid var(--line)}
.sb-account .av{width:30px;height:30px;border-radius:7px;background:var(--brand);display:grid;place-items:center;font-weight:600;color:var(--on-accent);font-size:13px;flex-shrink:0}
.sb-account .who{min-width:0}
.sb-account .nm{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-account .rl{font-size:11px;color:var(--t3)}

#main{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
  padding:12px 28px;background:color-mix(in srgb,var(--bg0) 84%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.crumb{font-size:13px;color:var(--t3)}
.crumb b{color:var(--t1);font-weight:600}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:9px}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--t2);background:var(--bg2);border:1px solid var(--line2);padding:6px 11px;border-radius:var(--radius-sm)}
.pill svg{width:15px;height:15px}
.pill.premium{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-line)}
.pill.discord{cursor:pointer}
.pill.discord:hover{border-color:var(--line3);color:var(--t1)}
.iconbtn{width:34px;height:34px;border-radius:var(--radius-sm);background:var(--bg2);border:1px solid var(--line2);color:var(--t2);cursor:pointer;display:grid;place-items:center;transition:.15s}
.iconbtn:hover{color:var(--t1);border-color:var(--line3)}
.iconbtn svg{width:17px;height:17px}

/* The dashboard fills the space it is given rather than sitting in a fixed
   column; the cap only stops content stretching across an ultrawide. */
.content{padding:26px var(--gutter) 64px;max-width:min(1680px, 100%);width:100%}
.page{display:none}
.page.on{display:block;animation:fade .28s ease}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.page-head h1{font-size:21px;font-weight:650;letter-spacing:-.5px}
.page-head .hactions{display:flex;gap:10px;flex-wrap:wrap}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;cursor:pointer;
  background:var(--brand);color:var(--on-accent);
  font-size:13px;font-weight:600;border-radius:var(--radius-sm);padding:8px 14px;
  transition:background .14s, border-color .14s, opacity .14s;white-space:nowrap;
}
.btn:hover{background:var(--brand-deep)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:default}
.btn svg{width:15px;height:15px}
.btn-sm{padding:7px 12px;font-size:12.5px}
.btn-xs{padding:5px 9px;font-size:11.5px;gap:5px}
.btn-xs svg{width:13px;height:13px}
.btn-ghost{background:var(--bg3);border-color:var(--line2);color:var(--t1)}
.btn-ghost:hover{background:var(--bg4);border-color:var(--line3)}
.btn-danger{background:var(--err);border-color:transparent;color:#fff}
.btn-danger:hover{background:color-mix(in srgb,var(--err) 82%,#000)}
.btn-block{width:100%}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:20px;position:relative;box-shadow:var(--shadow-sm)}
.card-flush{padding:0;overflow:hidden}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.card-title{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;letter-spacing:-.2px}
.card-title svg{width:16px;height:16px;color:var(--t3)}
.muted-sub{font-size:12px;color:var(--t3)}

.grid-2{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1080px){.grid-2{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr 1fr}}

/* ── Stat cards ───────────────────────────────────────────────────────────── */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
@media(max-width:1080px){.stat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.stat-grid{grid-template-columns:1fr}}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:18px;position:relative;box-shadow:var(--shadow-sm)}
.stat-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.stat-label{font-size:12.5px;color:var(--t2);font-weight:500}
.stat-val{font-size:27px;font-weight:650;letter-spacing:-1px;margin-top:6px;line-height:1;font-variant-numeric:tabular-nums}
.stat-ic{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:var(--bg3);border:1px solid var(--line2)}
.stat-ic svg{width:17px;height:17px;color:var(--t2)}
.stat-meter{height:4px;border-radius:4px;background:var(--bg4);overflow:hidden;margin-top:16px}
.stat-meter span{display:block;height:100%;border-radius:4px;background:var(--brand);width:0;transition:width .6s ease}
.stat-sub{font-size:11.5px;color:var(--t3);margin-top:9px}
/* Semantic accents — a tinted chip and a coloured glyph, nothing more. */
.stat.accent .stat-ic,.stat.blue .stat-ic{background:var(--brand-soft);border-color:var(--brand-line)}
.stat.accent .stat-ic svg,.stat.blue .stat-ic svg{color:var(--brand)}
.stat.green .stat-ic{background:color-mix(in srgb,var(--ok) 13%,transparent);border-color:color-mix(in srgb,var(--ok) 26%,transparent)}
.stat.green .stat-ic svg{color:var(--ok)}
.stat.amber .stat-ic,.stat.pink .stat-ic{background:color-mix(in srgb,var(--warn) 14%,transparent);border-color:color-mix(in srgb,var(--warn) 28%,transparent)}
.stat.amber .stat-ic svg,.stat.pink .stat-ic svg{color:var(--warn)}
.stat.green .stat-meter span{background:var(--ok)}
.stat.amber .stat-meter span,.stat.pink .stat-meter span{background:var(--warn)}

/* ── Executions chart ─────────────────────────────────────────────────────── */
.exec-chart{width:100%;min-height:180px;display:flex;align-items:center;justify-content:center}
.ec-svg{display:block}
.ec-grid{stroke:var(--line);stroke-width:1}
.ec-line{stroke:var(--brand);stroke-width:2;fill:none}
.ec-dot{fill:var(--brand)}
.ec-xlabel{fill:var(--t3);font-size:10px;font-family:var(--font)}
.ec-fill-top{stop-color:var(--brand);stop-opacity:.22}
.ec-fill-bot{stop-color:var(--brand);stop-opacity:0}
.chart-caption{font-size:12px;color:var(--t3);margin-top:12px;text-align:center}

/* ── Activity / info rows ─────────────────────────────────────────────────── */
.activity-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.activity-item:last-child{border-bottom:none}
.activity-dot{width:32px;height:32px;border-radius:8px;background:var(--bg3);border:1px solid var(--line2);display:grid;place-items:center;color:var(--t2);flex-shrink:0}
.activity-dot svg{width:15px;height:15px}
.activity-info{flex:1;min-width:0}
.activity-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.activity-meta{font-size:11.5px;color:var(--t3);margin-top:1px}

.info-rows{display:flex;flex-direction:column;gap:2px}
.info-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.info-row:last-child{border-bottom:none}
.info-row .k{display:flex;align-items:center;gap:8px;color:var(--t2)}
.info-row .k svg{width:15px;height:15px;color:var(--t3)}
.info-row .v{color:var(--t1);font-weight:500;text-align:right}

.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:900px){.qa-grid{grid-template-columns:1fr 1fr !important}}
@media(max-width:560px){.qa-grid{grid-template-columns:1fr !important}}
.qa-tile{display:flex;align-items:center;gap:12px;padding:13px;border-radius:var(--radius-sm);background:var(--bg3);border:1px solid var(--line2);cursor:pointer;text-align:left;transition:.15s;color:var(--t1)}
.qa-tile:hover{background:var(--bg4);border-color:var(--line3)}
.qa-tile svg{width:18px;height:18px;color:var(--brand);flex-shrink:0}
.qa-t{font-size:13.5px;font-weight:600}
.qa-s{font-size:11.5px;color:var(--t3)}

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:5px;text-transform:uppercase;letter-spacing:.4px;line-height:1.6}
.badge svg{width:11px;height:11px}
.badge-accent{background:var(--brand-soft);color:var(--brand);border:1px solid var(--brand-line)}
.badge-green{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 28%,transparent)}
.badge-red{background:color-mix(in srgb,var(--err) 14%,transparent);color:var(--err);border:1px solid color-mix(in srgb,var(--err) 28%,transparent)}
.badge-dim{background:var(--bg4);color:var(--t2);border:1px solid var(--line2)}

/* ── Tables ───────────────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl thead th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--t3);font-weight:600;padding:12px 16px;background:var(--bg1);border-bottom:1px solid var(--line2);white-space:nowrap}
:root[data-theme="light"] .tbl thead th{background:var(--bg3)}
.tbl tbody td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:var(--bg3)}
.code-key{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;background:var(--bg3);border:1px solid var(--line2);border-radius:6px;padding:5px 9px;cursor:pointer;color:var(--brand);transition:.15s}
.code-key:hover{border-color:var(--brand)}
.code-key svg{width:12px;height:12px}

/* ── Forms ────────────────────────────────────────────────────────────────── */
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--t2);margin-bottom:7px}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.fg{grid-template-columns:1fr}}
.form-section{margin-bottom:20px}
.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
textarea.iinput{min-height:120px;resize:vertical;font-family:var(--mono);font-size:13px;line-height:1.55}
select.iinput{cursor:pointer}
.search{position:relative;display:flex;align-items:center}
.search svg{position:absolute;left:12px;width:15px;height:15px;color:var(--t3);pointer-events:none}
.search input{padding-left:36px;min-width:230px}

/* Appearance switch (Account → Preferences) */
.seg{display:inline-flex;gap:3px;background:var(--bg3);border:1px solid var(--line2);border-radius:var(--radius-sm);padding:3px}
.seg button{
  display:inline-flex;align-items:center;gap:6px;border:none;background:transparent;cursor:pointer;
  color:var(--t2);font-size:12.5px;font-weight:500;padding:6px 12px;border-radius:6px;transition:.14s;
}
.seg button:hover{color:var(--t1)}
.seg button.on{background:var(--bg1);color:var(--t1);font-weight:600;box-shadow:var(--shadow-sm)}
:root[data-theme="light"] .seg button.on{background:#fff}
.seg svg{width:14px;height:14px}

/* ── Mini stats ───────────────────────────────────────────────────────────── */
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
@media(max-width:720px){.mini-stats{grid-template-columns:1fr}}
.mini-stat{display:flex;align-items:center;gap:13px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:15px;box-shadow:var(--shadow-sm)}
.mini-stat-ic{width:38px;height:38px;border-radius:9px;background:var(--brand-soft);border:1px solid var(--brand-line);display:grid;place-items:center;flex-shrink:0}
.mini-stat-ic svg{width:18px;height:18px;color:var(--brand)}
.mini-stat.green .mini-stat-ic{background:color-mix(in srgb,var(--ok) 13%,transparent);border-color:color-mix(in srgb,var(--ok) 26%,transparent)}
.mini-stat.green .mini-stat-ic svg{color:var(--ok)}
.mini-stat-label{font-size:12px;color:var(--t3);font-weight:500}
.mini-stat-val{font-size:20px;font-weight:650;letter-spacing:-.5px;line-height:1.2;font-variant-numeric:tabular-nums}
.mini-stat-meter{height:4px;border-radius:4px;background:var(--bg4);overflow:hidden;margin-top:6px;width:120px}
.mini-stat-meter span{display:block;height:100%;background:var(--brand);width:0;transition:width .6s}

/* ── Projects ─────────────────────────────────────────────────────────────── */
.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.project-card{background:var(--bg2);border:1px solid var(--line2);border-radius:var(--radius);padding:16px;transition:.15s;box-shadow:var(--shadow-sm)}
.project-card:hover{border-color:var(--line3)}
.project-card.active{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.project-card-top{display:flex;gap:12px;margin-bottom:14px}
.project-avatar{width:38px;height:38px;border-radius:9px;background:var(--brand);display:grid;place-items:center;font-weight:600;color:var(--on-accent);font-size:14px;flex-shrink:0}
.project-info{min-width:0;flex:1}
.project-name-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.project-name{font-size:15px;font-weight:600}
.project-meta{margin-top:4px}
.project-id{font-family:var(--mono);font-size:11px;color:var(--t3);background:var(--bg0);border:1px solid var(--line);padding:2px 7px;border-radius:5px}
:root[data-theme="light"] .project-id{background:var(--bg3)}
.project-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:14px}
.project-stat-label{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.4px}
.project-stat-label svg{width:12px;height:12px}
.project-stat-val{font-size:17px;font-weight:650;margin-top:3px;font-variant-numeric:tabular-nums}
.project-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}
.project-actions-left{display:flex;gap:8px}

/* ── Section divider ──────────────────────────────────────────────────────── */
.section-divider{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:26px 0 16px}
.section-title{font-size:16px;font-weight:650;letter-spacing:-.3px}
.section-sub{font-size:12.5px;color:var(--t3);margin-top:2px}

/* ── Script cards ─────────────────────────────────────────────────────────── */
.script-card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow-sm)}
.sc-head{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;transition:background .15s}
.sc-head:hover{background:var(--bg3)}
.sc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sc-dot.on{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
.sc-dot.off{background:var(--t3)}
.sc-name{font-size:14px;font-weight:600;flex:1}
.sc-badge{font-size:10px;font-weight:600;background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 28%,transparent);padding:2px 8px;border-radius:5px}
.sc-chevron{color:var(--t3);transition:transform .2s}
.sc-chevron svg{width:18px;height:18px}
.sc-chevron.open{transform:rotate(90deg);color:var(--brand)}
.sc-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.sc-body.open{max-height:1600px;border-top:1px solid var(--line)}
.sc-inner{padding:18px}
.sc-tabs{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.sc-tab{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--t2);background:var(--bg3);border:1px solid var(--line2);border-radius:var(--radius-sm);padding:7px 12px;cursor:pointer;transition:.15s}
.sc-tab svg{width:14px;height:14px}
.sc-tab:hover{color:var(--t1)}
.sc-tab.on{background:var(--brand);color:var(--on-accent);border-color:transparent}
.sc-tab-spacer{flex:1}
.sc-tab-on{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.sc-tab-off{color:var(--t3)}
.sc-tab-del{color:var(--err);border-color:color-mix(in srgb,var(--err) 26%,transparent)}
.sc-pane{display:none}
.sc-pane.on{display:block;animation:fade .25s}
.pane-label{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--t2);margin-bottom:9px}
.pane-label svg{width:14px;height:14px}
.code{font-family:var(--mono);font-size:12.5px;background:var(--bg0);border:1px solid var(--line2);border-radius:var(--radius-sm);padding:14px;color:var(--code);word-break:break-all;white-space:pre-wrap;line-height:1.6}
:root[data-theme="light"] .code{background:var(--bg3)}
.code-wrapper{position:relative}
.editor-wrapper{display:flex;background:var(--bg0);border:1px solid var(--line2);border-radius:var(--radius-sm);overflow:hidden}
:root[data-theme="light"] .editor-wrapper{background:var(--bg3)}
.editor-gutter{padding:14px 8px;text-align:right;color:var(--t3);font-family:var(--mono);font-size:12.5px;line-height:1.6;background:var(--bg1);user-select:none;min-width:42px;overflow:hidden}
textarea.code.edit{flex:1;border:none;border-radius:0;background:transparent;color:var(--t1);resize:vertical;outline:none;line-height:1.6;padding:14px}

/* ── Tools ────────────────────────────────────────────────────────────────── */
.sec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}
@media(max-width:900px){.sec-grid{grid-template-columns:1fr}}
.sec-card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm)}
.sec-card .sh{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sec-card .sh .si{width:36px;height:36px;border-radius:9px;background:var(--brand-soft);border:1px solid var(--brand-line);display:grid;place-items:center;flex-shrink:0}
.sec-card .sh .si svg{width:17px;height:17px;color:var(--brand)}
.sec-card .sh h3{font-size:14px;font-weight:600}
.sec-card p{font-size:12.5px;color:var(--t3);line-height:1.6}
.sec-card .st{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--ok);margin-top:12px}
.sec-card .st .dot-ok{margin-right:2px}

.callout{display:flex;gap:12px;background:var(--brand-soft);border:1px solid var(--brand-line);border-left:3px solid var(--brand);border-radius:var(--radius-sm);padding:14px 16px;font-size:13px;color:var(--t2);line-height:1.65}
.callout svg{width:18px;height:18px;color:var(--brand);flex-shrink:0;margin-top:1px}
.callout code{font-family:var(--mono);font-size:12px;color:var(--brand);background:var(--bg0);padding:1px 5px;border-radius:4px}
:root[data-theme="light"] .callout code{background:var(--bg3)}

/* ── Empty / spinner ──────────────────────────────────────────────────────── */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:44px 20px;text-align:center}
.empty-icon{width:46px;height:46px;border-radius:11px;background:var(--bg3);border:1px solid var(--line2);display:grid;place-items:center;color:var(--t3);margin-bottom:14px}
.empty-icon svg{width:21px;height:21px}
.empty-title{font-size:14.5px;font-weight:600}
.empty-sub{font-size:12.5px;color:var(--t3);margin-top:4px}
.spin{width:22px;height:22px;border:2.5px solid var(--bg4);border-top-color:var(--brand);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Progress bar ─────────────────────────────────────────────────────────── */
.progress{height:6px;border-radius:6px;background:var(--bg4);overflow:hidden}
.progress span{display:block;height:100%;background:var(--brand);width:0;transition:width .25s ease;border-radius:6px}

/* ── Modals ───────────────────────────────────────────────────────────────── */
.mo{position:fixed;inset:0;z-index:200;background:rgba(4,6,10,.6);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .2s}
:root[data-theme="light"] .mo{background:rgba(20,23,28,.34)}
.modal{background:var(--bg2);border:1px solid var(--line2);border-radius:var(--radius-lg);padding:24px;width:100%;max-width:480px;box-shadow:var(--shadow);max-height:90vh;overflow-y:auto}
.modal-title{font-size:17px;font-weight:650;margin-bottom:18px;letter-spacing:-.3px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.modal-hint{font-size:12px;color:var(--t3);margin:-8px 0 14px}
.modal-sub{font-size:11.5px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:1px;margin:18px 0 10px}
/* Dynamic modals (admin source viewer) */
.modal-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.modal-b{max-height:60vh;overflow:auto}
.modal-f{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}

/* ── Toasts ───────────────────────────────────────────────────────────────── */
#toast{position:fixed;top:20px;right:20px;z-index:300;display:flex;flex-direction:column;gap:10px}
.ti{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line2);border-radius:var(--radius);padding:12px 16px;font-size:13.5px;font-weight:500;box-shadow:var(--shadow);min-width:240px;max-width:360px;animation:slidein .3s ease}
.ti svg{width:16px;height:16px;flex-shrink:0}
.ti.ok{border-color:var(--gn-border)}
.ti.err{border-color:color-mix(in srgb,var(--err) 34%,transparent)}
.ti.info{border-color:var(--brand-line)}
@keyframes slidein{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

/* ── Responsive sidebar ───────────────────────────────────────────────────── */
@media(max-width:820px){
  :root{--sidebar-w:0px}
  .sidebar{transform:translateX(-100%);transition:transform .25s;box-shadow:var(--shadow);width:248px}
  .sidebar.open{transform:none}
  #main{margin-left:0}
  .menu-toggle{display:grid !important}
  .content{padding:20px var(--gutter) 56px}
  .topbar{padding:11px 16px}
  .topbar .pill.premium{display:none}
}
.menu-toggle{display:none}
.sb-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:29}
.sb-backdrop.on{display:block}

/* ── Register wizard ──────────────────────────────────────────────────────── */
.reg-steps{display:flex;align-items:center;justify-content:center;gap:6px;margin:2px 0 20px}
.reg-steps .rs{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;background:var(--bg3);color:var(--t3);border:1px solid var(--line2);transition:all .2s}
.reg-steps .rs.on{background:var(--brand);color:var(--on-accent);border-color:var(--brand)}
.reg-steps i{flex:0 0 16px;height:1px;background:var(--line2);display:block}
.reg-note{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--t2);background:var(--bg3);border:1px solid var(--line2);border-radius:var(--radius-sm);padding:11px 13px;margin-bottom:14px;line-height:1.5}
.reg-note i{width:16px;height:16px;color:var(--brand);flex-shrink:0;margin-top:1px}
.reg-ok{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ok);background:var(--gn-g);border:1px solid var(--gn-border);border-radius:var(--radius-sm);padding:11px 13px;margin-bottom:12px}
.reg-ok i{width:16px;height:16px;flex-shrink:0}

/* ── Account ──────────────────────────────────────────────────────────────── */
.acct-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}
@media (max-width:900px){.acct-grid{grid-template-columns:1fr}}
.acct-id{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.acct-av{width:50px;height:50px;border-radius:12px;background:var(--brand);display:flex;align-items:center;justify-content:center;color:var(--on-accent);font-size:21px;font-weight:650;flex-shrink:0}
.acct-name{font-size:17px;font-weight:650}
.acct-sub{font-size:12.5px;color:var(--t3);font-family:var(--mono)}
.acct-key{display:flex;align-items:center;gap:8px;background:var(--bg0);border:1px solid var(--line2);border-radius:var(--radius-sm);padding:10px 12px;font-family:var(--mono);font-size:12.5px;color:var(--t2);word-break:break-all}
:root[data-theme="light"] .acct-key{background:var(--bg3)}
.acct-warn{display:flex;gap:9px;align-items:center;font-size:12.5px;color:var(--warn);background:var(--am-g);border:1px solid var(--am-border);border-radius:var(--radius-sm);padding:11px 13px;margin-bottom:14px}
.acct-warn i{width:16px;height:16px;flex-shrink:0}
.iprow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12.5px}
.iprow:last-child{border-bottom:none}

.keymask{letter-spacing:2px}
.key-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.acct-key .keyview{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;background:transparent;border:none;color:var(--brand);font:600 12px/1 inherit;cursor:pointer;padding:4px}
.acct-key .keyview:hover{color:var(--t1)}
.acct-key .keyview svg{width:14px;height:14px}

/* ── Confirm dialog ───────────────────────────────────────────────────────── */
.confirm-mo{z-index:260}
.confirm-card{max-width:430px}
.confirm-ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;margin-bottom:15px}
.confirm-ic.danger{background:color-mix(in srgb,var(--err) 12%,transparent);border:1px solid color-mix(in srgb,var(--err) 30%,transparent);color:var(--err)}
.confirm-ic.warn{background:var(--brand-soft);border:1px solid var(--brand-line);color:var(--brand)}
.confirm-ic svg{width:22px;height:22px}
.confirm-title{font-size:16.5px;font-weight:650;margin-bottom:9px}
.confirm-body{font-size:13.5px;color:var(--t2);line-height:1.62}

/* ── Bot-check gate ───────────────────────────────────────────────────────────
   A centred modal rather than a widget parked in a form. It opens on arrival,
   before sign-in and register, and before every script upload. The card holds a
   fixed height so the layout doesn't jump when Cloudflare swaps its widget in,
   and the whole thing fades out on success instead of snapping shut. */
.vg{
  position:fixed;inset:0;z-index:400;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(4,6,10,.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
:root[data-theme="light"] .vg{background:rgba(20,23,28,.38)}
.vg.on{display:flex;animation:vgIn .22s ease}
@keyframes vgIn{from{opacity:0}to{opacity:1}}
.vg-card{
  width:100%;max-width:352px;text-align:center;
  background:var(--bg2);border:1px solid var(--line2);border-radius:var(--radius-lg);
  padding:26px 24px;box-shadow:var(--shadow);
  animation:vgCard .28s cubic-bezier(.2,.7,.25,1);
}
@keyframes vgCard{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.vg-title{font-size:15.5px;font-weight:600;letter-spacing:-.2px;color:var(--t1)}
/* Reserve the widget's height up front — Turnstile injects its iframe a beat
   later, and without this the card would visibly grow under the cursor.
   `position:relative` anchors the loading spinner inside the reserved slot. */
.vg-widget{position:relative;min-height:70px;display:flex;align-items:center;justify-content:center;margin-top:18px}
.vg-widget iframe{border-radius:8px}

/* Loading state. Turnstile needs two beats: its script has to be present, then
   its iframe has to paint. Without this the reserved slot sat blank for that
   whole window, so the card read as broken and the widget appeared to pop in.
   The spinner holds the slot, then cross-fades to the real widget.

   FAIL-SAFE: the widget defaults to VISIBLE and the spinner to hidden. The JS
   turns the loading state on while it waits and off when the iframe paints, so
   if that code never runs the worst case is the old pop-in — never an invisible
   Cloudflare box the user can't interact with. */
.vg-spin{
  position:absolute;width:22px;height:22px;border-radius:50%;
  border:2.5px solid var(--line2);border-top-color:var(--brand);
  animation:spin .7s linear infinite;
  opacity:0;transition:opacity .18s ease;
}
#cfWidget{opacity:1;transition:opacity .22s ease}
@media(prefers-reduced-motion:reduce){
  .vg-spin{animation:none}
  #cfWidget,.vg-spin{transition:none}
}