/* ==========================================================================
   AegisLoader — design system
   One token set for the marketing site and the app shell.
   Accent is the logo's cyan → electric blue. Use it scarcely.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  color-scheme: dark;

  /* ---- ground (blue-black, cool) ---- */
  --bg:          #05080d;  /* page */
  --bg-sunk:     #080c13;  /* wells, code, table head */
  --surface:     #0c121b;  /* cards, panels */
  --surface-2:   #111926;  /* raised, hover, menus */
  --surface-3:   #172131;  /* pressed, selected row */
  --line:        #1a2433;  /* hairline */
  --line-2:      #26344a;  /* control border */
  --line-3:      #36486a;  /* hover border */
  --line-ctl:    #5e7396;  /* form-control border: 3:1 on every surface */

  /* ---- ink ---- */
  --ink:         #e7edf5;  /* primary text  (16.6:1 on surface) */
  --ink-2:       #a4b1c2;  /* secondary     (8.6:1) */
  --ink-3:       #7c8a9d;  /* tertiary/mono labels (5.1:1) */
  --ink-4:       #4b5869;  /* disabled, decorative only */

  /* ---- brand: the logo gradient ---- */
  --cyan:        #27e5ff;
  --azure:       #2e9bff;
  --cobalt:      #1e5bff;
  --accent-ink:  #5fd6ff;  /* links / active text on dark (10:1) */
  --on-accent:   #021019;  /* text on the cyan→azure fill (7.4:1 at the azure end) */
  --grad:        linear-gradient(118deg, var(--cyan) 0%, var(--azure) 100%);
  --grad-deep:   linear-gradient(150deg, var(--cyan) 0%, var(--azure) 48%, var(--cobalt) 100%);
  --accent-wash: rgba(46, 155, 255, .10);
  --accent-line: rgba(39, 229, 255, .38);

  /* ---- signal (always paired with a word or glyph) ---- */
  --ok:          #3ddc97;
  --ok-wash:     rgba(61, 220, 151, .11);
  --warn:        #ffb547;
  --warn-wash:   rgba(255, 181, 71, .11);
  --danger:      #ff6170;
  --danger-wash: rgba(255, 97, 112, .11);
  --danger-fill: #c92a3d;  /* white text 5.3:1 */

  /* ---- type ---- */
  --f-display: "Chakra Petch", "Bahnschrift", "DIN Alternate", system-ui, sans-serif;
  --f-ui:      "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---- space (4px base) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-24: 96px;

  /* ---- facets: chamfer sizes. The brand has no round corners. ---- */
  --cut-xs: 4px;
  --cut-sm: 7px;
  --cut-md: 12px;
  --cut-lg: 20px;
  --radius: 2px;  /* only for tiny things: checkboxes, focus offsets */

  --shadow-pop: 0 18px 50px -12px rgba(0, 0, 0, .7), 0 0 0 1px var(--line-2);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--cyan);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 120ms;
  --t: 200ms;

  --side-w: 248px;
  --side-rail: 68px;
  --top-h: 56px;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 clamp(13px, 0.18vw + 12.9px, 14.5px)/1.55 var(--f-ui);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}
img, svg { display: block; max-width: 100%; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linejoin: miter; stroke-linecap: square; display: inline-block; vertical-align: middle; }
svg.i.sm { width: 15px; height: 15px; }
svg.i.lg { width: 22px; height: 22px; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
::selection { background: rgba(39, 229, 255, .28); color: #fff; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
code, kbd, samp, .mono { font-family: var(--f-mono); font-feature-settings: "zero", "ss02"; }
.num, .tnum { font-variant-numeric: tabular-nums; font-family: var(--f-mono); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

.skip {
  position: fixed; left: var(--s-4); top: -60px; z-index: 1000;
  background: var(--cyan); color: var(--on-accent); padding: 10px 16px; font-weight: 600;
  transition: top var(--t) var(--ease);
}
.skip:focus { top: var(--s-4); text-decoration: none; }

/* scrollbars, quiet */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border: 3px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   Type
   ========================================================================== */
.display, h1, h2, h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.01em; margin: 0; }
h1 { font-size: clamp(26px, 2.2vw + 14px, 34px); line-height: 1.08; }
h2 { font-size: 20px; line-height: 1.2; }
h3 { font-size: 16px; line-height: 1.3; }
h4 { font: 600 14px/1.3 var(--f-ui); margin: 0; }
p { margin: 0; }
.lede { color: var(--ink-2); font-size: 15px; max-width: 64ch; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.eyebrow {
  font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--grad); clip-path: polygon(0 0, 100% 0, 100% 40%, 40% 100%, 0 100%); }
.eyebrow.plain::before { display: none; }
.label-mono { font: 500 11px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.accent-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kbd { font: 500 11px/1 var(--f-mono); padding: 3px 6px; border: 1px solid var(--line-2); color: var(--ink-3); background: var(--bg-sunk); }

/* ==========================================================================
   Facet motif — chamfered geometry from the shield.
   .facet draws a bordered panel with the top-right and bottom-left corners cut,
   using two clipped layers so focus outlines on the element are never clipped.
   ========================================================================== */
.facet {
  --c: var(--cut-md);
  --f-border: var(--line);
  --f-fill: var(--surface);
  position: relative; isolation: isolate; background: none;
}
.facet::before, .facet::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.facet::before {
  inset: 0; background: var(--f-border);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
}
.facet::after {
  inset: 1px; background: var(--f-fill);
  clip-path: polygon(0 0, calc(100% - var(--c) + .4px) 0, 100% calc(var(--c) - .4px), 100% 100%, calc(var(--c) - .4px) 100%, 0 calc(100% - var(--c) + .4px));
}
.facet.sm { --c: var(--cut-sm); }
.facet.lg { --c: var(--cut-lg); }
.facet.sunk { --f-fill: var(--bg-sunk); }
.facet.raised { --f-fill: var(--surface-2); }
.facet.lit { --f-border: var(--accent-line); }
.facet.edge-grad::before { background: var(--grad-deep); }

/* bevel highlight: a 1px light catch along the top edge, like the logo's inner stroke */
.bevel { box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.chev { display: inline-block; width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  --c: var(--cut-sm);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px; border: 0; background: none;
  font: 500 13.5px/1 var(--f-ui); letter-spacing: .005em; white-space: nowrap;
  color: var(--ink); text-decoration: none !important; user-select: none;
  transition: color var(--t-fast), transform var(--t-fast);
}
.btn::before, .btn::after { content: ""; position: absolute; z-index: -1; pointer-events: none; transition: background var(--t-fast), opacity var(--t-fast); }
.btn::before { inset: 0; clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); }
.btn::after  { inset: 1px; clip-path: polygon(0 0, calc(100% - var(--c) + .4px) 0, 100% calc(var(--c) - .4px), 100% 100%, calc(var(--c) - .4px) 100%, 0 calc(100% - var(--c) + .4px)); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .5; }
.btn svg.i { width: 16px; height: 16px; }

/* primary: the logo gradient, dark ink */
.btn-primary { color: var(--on-accent); font-weight: 600; }
.btn-primary::before { background: var(--grad); }
.btn-primary::after { display: none; }
.btn-primary:hover:not(:disabled)::before { background: linear-gradient(118deg, #5beeff 0%, #52aeff 100%); }

/* subtle: surface fill + border */
.btn-subtle::before { background: var(--line-2); }
.btn-subtle::after { background: var(--surface-2); }
.btn-subtle:hover:not(:disabled)::before { background: var(--line-3); }
.btn-subtle:hover:not(:disabled)::after { background: var(--surface-3); }

/* ghost: border only */
.btn-ghost { color: var(--ink-2); }
.btn-ghost::before { background: var(--line-2); }
.btn-ghost::after { background: var(--bg); }
.btn-ghost:hover:not(:disabled) { color: var(--ink); }
.btn-ghost:hover:not(:disabled)::before { background: var(--line-3); }
.btn-ghost.on-surface::after { background: var(--surface); }

/* plain: text button */
.btn-plain { color: var(--ink-2); padding: 0 8px; }
.btn-plain::before, .btn-plain::after { display: none; }
.btn-plain:hover:not(:disabled) { color: var(--ink); background: var(--surface-2); }

/* danger */
.btn-danger { color: #fff; font-weight: 600; }
.btn-danger::before { background: var(--danger-fill); }
.btn-danger::after { display: none; }
.btn-danger:hover:not(:disabled)::before { background: #b52234; }
.btn-danger-ghost { color: var(--danger); }
.btn-danger-ghost::before { background: rgba(255,97,112,.38); }
.btn-danger-ghost::after { background: var(--surface); }
.btn-danger-ghost:hover:not(:disabled)::after { background: var(--danger-wash); }

.btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; gap: 6px; --c: 6px; }
.btn-lg { height: 46px; padding: 0 22px; font-size: 15px; --c: 10px; }
.btn-block { width: 100%; }

/* icon button: square, quiet */
.icon-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid transparent; background: none; color: var(--ink-3);
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.icon-btn:hover:not(:disabled) { color: var(--ink); background: var(--surface-2); border-color: var(--line-2); }
.icon-btn.danger:hover:not(:disabled) { color: var(--danger); border-color: rgba(255,97,112,.38); background: var(--danger-wash); }
.icon-btn:disabled, .icon-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.icon-btn[aria-disabled="true"]:hover { background: none; border-color: transparent; color: var(--ink-3); }
.icon-btn svg.i { width: 16px; height: 16px; }
.icon-btn.sm { width: 28px; height: 28px; }

/* copied / done state, shared by every copy control */
.is-copied { color: var(--ok) !important; }
.btn.is-copied::after { background: var(--ok-wash) !important; }
.btn-primary.is-copied { color: var(--on-accent) !important; }
.btn-primary.is-copied::before { background: var(--ok) !important; }

/* busy */
.btn.is-busy { color: transparent !important; pointer-events: none; }
.btn.is-busy > .spin { position: absolute; inset: 0; margin: auto; color: var(--ink); }
.btn-primary.is-busy > .spin { color: var(--on-accent); }
.spin { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Pills, badges, mode pills
   ========================================================================== */
/* Soft rounded pills — subtle tinted background, colored label, small round dot, rounded corners. */
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 23px; padding: 0 10px;
  font: 500 11.5px/1 var(--f-ui); letter-spacing: .005em; white-space: nowrap; border-radius: 999px;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-2);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill.no-dot::before, .pill.count::before { display: none; }
.pill.ok      { color: var(--ok);         background: var(--ok-wash);     border-color: rgba(61,220,151,.28); }
.pill.warn    { color: var(--warn);       background: var(--warn-wash);   border-color: rgba(255,181,71,.28); }
.pill.danger  { color: var(--danger);     background: var(--danger-wash); border-color: rgba(255,97,112,.3); }
.pill.accent  { color: var(--accent-ink); background: var(--accent-wash); border-color: var(--accent-line); }
.pill.neutral { color: var(--ink-3);      background: var(--surface-2);   border-color: var(--line-2); }
.pill.count   { color: var(--ink-2);      background: var(--surface-2);   border-color: var(--line-2); }

/* delivery-mode pills — each keeps a glyph so color is never the only signal */
.mode { display: inline-flex; align-items: center; gap: 5px; height: 23px; padding: 0 10px; font: 500 11.5px/1 var(--f-ui); white-space: nowrap; border: 1px solid; border-radius: 999px; }
.mode svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.mode-free   { color: var(--ink-2);      border-color: var(--line-3);        background: var(--surface-2); }
.mode-paid   { color: var(--accent-ink); border-color: var(--accent-line);   background: var(--accent-wash); }
.mode-ad     { color: var(--warn);       border-color: rgba(255,181,71,.3);  background: var(--warn-wash); }
.mode-custom { color: #cdd9e8;           border-color: #44546e;              background: #1b2430; }

.badge-ks {
  display: inline-flex; align-items: center; gap: 6px; height: 23px; padding: 0 11px;
  font: 600 10px/1 var(--f-ui); letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-wash); border: 1px solid var(--accent-line); border-radius: 999px;
}
.badge-ks svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; opacity: .85; }

.tag { font: 500 11px/1 var(--f-mono); color: var(--ink-3); border: 1px solid var(--line-2); padding: 4px 6px; }

/* ==========================================================================
   Cards / panels
   ========================================================================== */
.card { --c: var(--cut-md); }
.card > .card-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
  padding: 14px var(--s-5); border-bottom: 1px solid var(--line); min-height: 54px;
}
.card-head h2, .card-head h3 { font-size: 15px; font-family: var(--f-display); font-weight: 600; letter-spacing: 0; display: flex; align-items: center; gap: 8px; }
.card-head .sub { color: var(--ink-3); font-size: 12.5px; }
.card-head .tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card > .card-body { padding: var(--s-5); }
.card > .card-body.flush { padding: 0; }
.card > .card-foot { padding: 12px var(--s-5); border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* stat cards */
.stats { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.stat { --c: var(--cut-md); padding: 16px 18px 14px; min-height: 112px; display: flex; flex-direction: column; gap: 6px; }
.stat .label-mono { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.stat .label-mono svg.i { width: 15px; height: 15px; color: var(--ink-4); }
.stat .value { font: 500 28px/1.1 var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--ink); }
.stat .value small { font-size: 14px; color: var(--ink-3); letter-spacing: 0; margin-left: 2px; }
.stat .delta { font: 400 12px/1.3 var(--f-mono); color: var(--ink-3); margin-top: auto; }
.stat .delta .up { color: var(--ok); }
.stat .delta .down { color: var(--danger); }

/* meter (usage bars) */
.meter { height: 6px; background: var(--bg-sunk); border: 1px solid var(--line); position: relative; overflow: hidden; margin-top: 4px; }
.meter > span { position: absolute; inset: 0 auto 0 0; background: var(--grad); transition: width .6s var(--ease); }
.meter.is-warn > span { background: var(--warn); }
.meter.is-full > span { background: var(--danger); }
.meter-row { display: flex; justify-content: space-between; font: 400 12px/1.3 var(--f-mono); color: var(--ink-3); }

/* ==========================================================================
   Code blocks / loader card
   ========================================================================== */
.code {
  --c: var(--cut-sm); --f-fill: var(--bg-sunk); --f-border: var(--line-2);
  display: flex; align-items: stretch; min-width: 0;
}
.code pre, .code .code-text {
  flex: 1; min-width: 0; margin: 0; padding: 12px 14px; overflow-x: auto;
  font: 400 12.5px/1.6 var(--f-mono); color: var(--ink); white-space: pre; tab-size: 2;
}
.code.wrap { width: auto; margin-inline: 0; }
.code.wrap pre, .code.wrap .code-text { white-space: pre-wrap; word-break: break-all; }
/* fit a single-line snippet (e.g. a loader line) to ONE line by scaling the font to the container —
   no wrap, no horizontal scroll. Caps at the normal size on wide containers, shrinks to fit on tight ones. */
.code.fit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
.code.fit .cf { min-width: 0; display: flex; container-type: inline-size; overflow: hidden; }
.code.fit pre, .code.fit .code-text { flex: 1; min-width: 0; padding: 12px; white-space: nowrap; overflow: hidden; font-size: clamp(8px, 2cqi, 12.5px); }
@container (max-width: 380px) { .code.fit pre, .code.fit .code-text { white-space: normal; word-break: break-all; font-size: 11px; } }
.code .copy-btn { align-self: flex-start; margin: 6px 6px 0 0; flex: none; }
.code.inline { display: inline-flex; }
.code.inline pre { padding: 6px 10px; }
.code-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.code.multi { flex-direction: column; }
.code.multi .code-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 14px; border-bottom: 1px solid var(--line); }
.code.multi .code-bar .copy-btn { margin: 0; }
/* syntax: restrained, the accent only on strings */
.tk-k { color: #8fb4ff; }       /* keywords */
.tk-s { color: var(--cyan); }   /* strings */
.tk-c { color: var(--ink-3); font-style: italic; }
.tk-n { color: #ffd38a; }       /* numbers */
.tk-f { color: #e7edf5; font-weight: 500; }

/* endpoint row: METHOD chip + mono path */
.endpoint { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.method { font: 600 10.5px/1 var(--f-mono); letter-spacing: .08em; padding: 5px 7px; border: 1px solid; min-width: 50px; text-align: center; }
.method.get    { color: var(--ok); border-color: rgba(61,220,151,.35); background: var(--ok-wash); }
.method.post   { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-wash); }
.method.put, .method.patch { color: var(--warn); border-color: rgba(255,181,71,.35); background: var(--warn-wash); }
.method.delete { color: var(--danger); border-color: rgba(255,97,112,.35); background: var(--danger-wash); }
.path { font: 500 13px/1.4 var(--f-mono); color: var(--ink); word-break: break-all; }
.path .param { color: var(--accent-ink); }

/* ==========================================================================
   Forms
   ========================================================================== */
.field { display: grid; gap: 6px; min-width: 0; }
.field + .field { margin-top: var(--s-4); }
.form-grid > .field + .field, .row > .field + .field { margin-top: 0; }
.field > label, .field-label { font: 500 13px/1.3 var(--f-ui); color: var(--ink); display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.field-label .opt { font: 400 12px var(--f-ui); color: var(--ink-3); }
.hint { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.err { font-size: 12.5px; color: var(--danger); display: flex; gap: 6px; align-items: flex-start; }
.err::before { content: "!"; font: 700 10px/14px var(--f-mono); width: 14px; height: 14px; flex: none; text-align: center; background: var(--danger); color: var(--bg); clip-path: polygon(50% 0, 100% 100%, 0 100%); padding-top: 2px; }

.input, .select, .textarea {
  width: 100%; min-width: 0; height: 38px; padding: 0 12px;
  background: var(--bg-sunk); border: 1px solid var(--line-ctl); color: var(--ink);
  font-size: 14px; border-radius: 0; outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:hover, .select:hover, .textarea:hover { border-color: #7187ab; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(39,229,255,.14); }
.input.mono, .input[data-mono] { font-family: var(--f-mono); font-size: 13px; letter-spacing: .02em; }
.input[readonly] { color: var(--ink-2); background: var(--surface); }
.input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger); }
.input:disabled, .select:disabled { opacity: .55; cursor: not-allowed; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) 16px, calc(100% - 12px) 16px; background-size: 5px 5px; background-repeat: no-repeat;
}
.select option { background: var(--surface-2); color: var(--ink); }
.input-sm, .select-sm { height: 32px; font-size: 13px; }
.select-sm { background-position: calc(100% - 17px) 13px, calc(100% - 12px) 13px; }

/* custom select — bespoke trigger + popup so the OPEN list is ours, not OS chrome (ui.select).
   The native <select> is kept as the hidden form model. */
.select.is-enhanced { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.select-ui {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; height: 38px; padding: 0 12px; text-align: left; line-height: 1.2;
  background: var(--surface-2); border: 1px solid var(--line-ctl); color: var(--ink); font: inherit;
  cursor: pointer; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast);
  border-radius: 8px;
}
.select-ui.select-sm { height: 32px; font-size: 13px; }
.select-ui:hover:not(:disabled) { border-color: var(--line-3); background: var(--surface-3); }
.select-ui:focus-visible { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(39, 229, 255, .14); }
.select-ui[aria-expanded="true"] { border-color: var(--cyan); }
.select-ui:disabled { opacity: .55; cursor: not-allowed; }
.select-ui .sel-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-ui.is-empty .sel-val { color: var(--ink-3); }
.select-ui .sel-arrow { flex: none; width: 7px; height: 7px; margin-left: 2px; border-right: 1.6px solid var(--ink-3); border-bottom: 1.6px solid var(--ink-3); transform: translateY(-2px) rotate(45deg); transition: transform var(--t) var(--ease), border-color var(--t-fast); }
.select-ui[aria-expanded="true"] .sel-arrow { transform: translateY(1px) rotate(-135deg); border-color: var(--cyan); }
.select-pop { max-height: min(340px, 54vh); overflow-y: auto; padding: 4px; animation: pop-in var(--t-fast) var(--ease); transform-origin: top; }
.select-pop .sel-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.select-pop .sel-opt:hover, .select-pop .sel-opt:focus-visible { background: var(--surface-3); color: var(--ink); outline: none; }
.select-pop .sel-opt.on { color: var(--accent-ink); }
.select-pop .sel-opt.on::after { content: ""; flex: none; width: 5px; height: 9px; border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(45deg); margin: -2px 2px 0 0; }
.select-pop .sel-opt:disabled { opacity: .4; cursor: not-allowed; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scaleY(.97); } to { opacity: 1; transform: none; } }
.nu .select-ui { flex: 1; min-width: 96px; }
@media (prefers-reduced-motion: reduce) { .select-ui .sel-arrow { transition: none; } .select-pop { animation: none; } }

/* search input with icon */
.search { position: relative; min-width: 0; }
.search svg.i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-3); width: 16px; height: 16px; pointer-events: none; }
.search .input { padding-left: 34px; }

/* number + unit picker: "30 [days ▾]" */
.nu { display: flex; min-width: 0; }
.nu .input { width: 90px; flex: none; border-right: 0; font-family: var(--f-mono); }
.nu .select { flex: 1; min-width: 96px; }
.nu.is-never .input { opacity: .4; pointer-events: none; }

/* code-entry: 6 boxes */
.otp { display: flex; gap: 8px; max-width: 100%; }
.otp input { width: 44px; min-width: 0; flex: 0 1 44px; height: 52px; text-align: center; font: 600 22px var(--f-mono); padding: 0;
  background: var(--bg-sunk); border: 1px solid var(--line-ctl); color: var(--ink); border-radius: 0; outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.otp input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(39,229,255,.14); }
.otp input[aria-invalid="true"] { border-color: var(--danger); }
@media (max-width: 380px) { .otp { gap: 5px; } .otp input { width: 38px; height: 46px; font-size: 19px; } }

/* checkbox & toggle */
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; color: var(--ink-2); }
.check input { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; border: 1px solid var(--line-ctl); background: var(--bg-sunk); display: grid; place-items: center; flex: none; cursor: pointer; }
.check input:checked { background: var(--grad); border-color: transparent; }
.check input:checked::after { content: ""; width: 8px; height: 4px; border-left: 2px solid var(--on-accent); border-bottom: 2px solid var(--on-accent); transform: translateY(-1px) rotate(-45deg); }
.check input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.toggle { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle .track { flex: none; width: 38px; height: 22px; background: var(--bg-sunk); border: 1px solid var(--line-ctl); position: relative; transition: background var(--t); clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)); margin-top: 1px; }
.toggle .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--ink-3); transition: transform var(--t) var(--ease), background var(--t); }
.toggle input:checked + .track { background: var(--accent-wash); border-color: var(--cyan); }
.toggle input:checked + .track::after { transform: translateX(16px); background: var(--cyan); }
.toggle input:focus-visible + .track { outline: 2px solid var(--cyan); outline-offset: 2px; }
.toggle .t-text { display: grid; gap: 2px; }
.toggle .t-text strong { font-weight: 500; font-size: 13.5px; }
.toggle .t-text span { font-size: 12.5px; color: var(--ink-3); }

/* segmented control */
.seg { display: inline-flex; background: var(--bg-sunk); border: 1px solid var(--line-ctl); padding: 2px; gap: 2px; max-width: 100%; overflow-x: auto; }
.seg button {
  border: 0; background: none; height: 28px; padding: 0 11px; color: var(--ink-3);
  font: 500 12px/1 var(--f-mono); letter-spacing: .04em; white-space: nowrap; flex: none;
  transition: color var(--t-fast), background var(--t-fast);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--surface-3); color: var(--ink); box-shadow: inset 0 -2px 0 var(--cyan); }
.seg.lg button { height: 34px; padding: 0 14px; font: 500 13px/1 var(--f-ui); letter-spacing: 0; }

/* tabs (underline) */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs [role="tab"] {
  flex: none; border: 0; background: none; padding: 10px 14px; color: var(--ink-3); font: 500 13.5px/1 var(--f-ui);
  position: relative; white-space: nowrap;
}
.tabs [role="tab"]:hover { color: var(--ink); }
.tabs [role="tab"][aria-selected="true"] { color: var(--ink); }
.tabs [role="tab"][aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--grad); }

/* dropzone */
.drop {
  --c: var(--cut-md); --f-fill: var(--bg-sunk); --f-border: var(--line-2);
  display: grid; justify-items: center; gap: 6px; padding: 22px 16px; text-align: center; cursor: pointer;
  color: var(--ink-2); font-size: 13.5px;
}
.drop svg.i { width: 26px; height: 26px; color: var(--ink-3); margin-bottom: 4px; }
.drop:hover, .drop.is-over { --f-border: var(--cyan); }
.drop.is-over { --f-fill: rgba(39,229,255,.05); }
.drop .file-chosen { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink); display: flex; gap: 8px; align-items: center; }
.drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* form layout helpers */
.form-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: var(--s-5); }
.form-actions.start { justify-content: flex-start; }

/* inline notices */
.notice {
  --c: var(--cut-sm); --f-border: var(--line-2); --f-fill: var(--surface);
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; font-size: 13.5px; color: var(--ink-2);
}
.notice > svg.i { color: var(--ink-3); margin-top: 1px; }
.notice strong { color: var(--ink); font-weight: 600; }
.notice .n-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.notice .n-close { margin: -6px -6px 0 0; }
.notice.warn   { --f-border: rgba(255,181,71,.42); --f-fill: #17130b; }
.notice.warn > svg.i { color: var(--warn); }
.notice.danger { --f-border: rgba(255,97,112,.45); --f-fill: #190c10; }
.notice.danger > svg.i { color: var(--danger); }
.notice.ok     { --f-border: rgba(61,220,151,.4); --f-fill: #0a1712; }
.notice.ok > svg.i { color: var(--ok); }
.notice.info   { --f-border: var(--accent-line); --f-fill: #08131e; }
.notice.info > svg.i { color: var(--accent-ink); }

/* ==========================================================================
   Data tables
   Columns carry .p2/.p3/.p4 priority classes; container queries drop them
   right-to-left. Identity columns (.p1) and .col-actions never hide.
   ========================================================================== */
.tbl-wrap { container: tbl / inline-size; overflow-x: clip; position: relative; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tbl th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); background: var(--bg-sunk); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink-2); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background var(--t-fast); }
.tbl tbody tr:hover td { background: rgba(255,255,255,.018); }
.tbl tbody tr:hover td.col-actions { background: var(--surface-2); }
.tbl th:first-child, .tbl td:first-child { padding-left: var(--s-5); }
/* Pin EVERY non-identity column to its content (width:1px + nowrap = min-content). That leaves the
   identity column — or the note column when present — as the only column able to grow, so it absorbs
   ALL leftover row width. Without pinning, the browser scatters the slack into the middle columns as
   the empty "teeth gap" bands. (width:100% on one cell did NOT reliably win that tug-of-war.) */
.tbl th:not(:first-child), .tbl td:not(:first-child) { white-space: nowrap; width: 1px; }
.tbl th:first-child, .tbl td:first-child { width: auto; }
.tbl:has(td.col-note) th:first-child, .tbl:has(td.col-note) td:first-child { width: 1px; }
.tbl td.col-note, .tbl th.col-note { width: auto; }
.tbl .r, .tbl th.r { text-align: right; }
.tbl td.num, .tbl td .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; color: var(--ink); font-size: 12.5px; }
.tbl td.mono, .tbl td .mono { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink); }
.tbl td.date { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.tbl .cell-title { color: var(--ink); font-weight: 500; display: flex; align-items: center; gap: 8px; min-width: 0; }
.tbl .cell-title a { color: var(--ink); }
.tbl .cell-sub { color: var(--ink-3); font: 400 11.5px/1.3 var(--f-mono); margin-top: 2px; }
.tbl .trunc { max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.tbl.compact td { padding-top: 7px; padding-bottom: 7px; }
/* actions column — right-aligned, snug to content. NOT sticky: a sticky column with an opaque
   background paints over the adjacent cell's text whenever the row is a hair wider than its
   container (the "black line covering the text" that read as a teeth gap). */
.tbl th.col-actions, .tbl td.col-actions {
  text-align: right; width: 1%; white-space: nowrap; padding-right: var(--s-4);
}
.row-actions { display: inline-flex; gap: 2px; align-items: center; justify-content: flex-end; }
.row-actions .ra-more { display: none; }

@container tbl (max-width: 1080px) { .tbl .p4 { display: none; } }
@container tbl (max-width: 860px)  { .tbl .p3 { display: none; } }
@container tbl (max-width: 620px)  {
  .tbl .p2 { display: none; }
  .row-actions .ra-inline { display: none; }
  .row-actions .ra-more { display: inline-grid; }
  .tbl th:first-child, .tbl td:first-child { padding-left: var(--s-4); }
}
@container tbl (max-width: 420px) { .tbl .p1b { display: none; } }

/* states: loading / empty / error */
.state { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 40px 20px; color: var(--ink-2); }
.state svg.state-art { width: 56px; height: 56px; color: var(--ink-4); }
.state h3 { font-size: 15px; color: var(--ink); }
.state p { font-size: 13.5px; max-width: 46ch; color: var(--ink-3); }
.state .btn { margin-top: 6px; }
.state.error svg.state-art { color: var(--danger); opacity: .8; }
.skel { display: block; height: 12px; background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: skel 1.3s linear infinite; }
.skel-rows { padding: 8px var(--s-5) 16px; display: grid; gap: 18px; }
.skel-rows .skel-row { display: grid; grid-template-columns: 2fr 1fr 1fr .6fr; gap: 20px; }
@keyframes skel { to { background-position: -200% 0; } }

/* ==========================================================================
   Overlays: modal, menu, toast, tooltip
   ========================================================================== */
.scrim {
  position: fixed; inset: 0; z-index: 900; background: rgba(2, 4, 8, .72);
  display: grid; place-items: center; padding: 16px; overflow-y: auto;
  animation: fade var(--t) var(--ease);
}
@supports (backdrop-filter: blur(2px)) { .scrim { backdrop-filter: blur(3px); } }
.modal {
  --c: var(--cut-lg); --f-fill: var(--surface); --f-border: var(--line-2);
  width: min(100%, 520px); max-height: calc(100vh - 32px); display: flex; flex-direction: column;
  animation: rise var(--t) var(--ease);
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.6));
}
.modal.wide { width: min(100%, 680px); }
.modal.narrow { width: min(100%, 420px); }
.modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.modal-head h2 { font-size: 18px; flex: 1; padding-top: 4px; }
.modal-head .m-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: none; color: var(--accent-ink); background: var(--accent-wash); clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
.modal-head .m-icon.danger { color: var(--danger); background: var(--danger-wash); }
.modal-head .m-icon.warn { color: var(--warn); background: var(--warn-wash); }
.modal-body { padding: 18px 20px; overflow-y: auto; min-height: 0; }
.modal-body > p { color: var(--ink-2); }
.modal-body > p + p { margin-top: 10px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.affected { margin: 12px 0 0; padding: 10px 12px; background: var(--bg-sunk); border: 1px solid var(--line); display: grid; gap: 6px; list-style: none; }
.affected li { font: 400 12.5px/1.4 var(--f-mono); color: var(--ink); display: flex; gap: 8px; align-items: baseline; overflow-wrap: anywhere; min-width: 0; }
.affected li::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--danger); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transform: translateY(-1px); }
@media (max-width: 520px) {
  .scrim { place-items: end stretch; padding: 0; }
  .modal { width: 100%; max-height: 92vh; --c: 14px; }
  .modal-foot { position: sticky; bottom: 0; background: var(--surface); }
  .modal-foot .btn { flex: 1; }
}
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

.menu {
  position: fixed; z-index: 950; min-width: 190px; padding: 4px; background: var(--surface-2);
  border: 1px solid var(--line-2); box-shadow: 0 16px 40px -8px rgba(0,0,0,.7);
  animation: fade var(--t-fast);
}
.menu button, .menu a {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none;
  color: var(--ink-2); font-size: 13.5px; text-align: left; text-decoration: none;
}
.menu button:hover, .menu button:focus-visible, .menu a:hover { background: var(--surface-3); color: var(--ink); outline: none; }
.menu button.danger { color: var(--danger); }
.menu button.danger:hover { background: var(--danger-wash); }
.menu hr { margin: 4px 0; border-color: var(--line-2); }

.toasts { position: fixed; z-index: 1000; right: 16px; bottom: 16px; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast {
  --c: var(--cut-sm); --f-fill: var(--surface-2); --f-border: var(--line-3);
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 12px 12px 14px; pointer-events: auto;
  font-size: 13.5px; color: var(--ink); animation: toast-in .24s var(--ease);
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.55));
}
.toast > svg.i { margin-top: 1px; }
.toast.ok > svg.i { color: var(--ok); }
.toast.error > svg.i { color: var(--danger); }
.toast.warn > svg.i { color: var(--warn); }
.toast.info > svg.i { color: var(--accent-ink); }
.toast.ok { --f-border: rgba(61,220,151,.45); }
.toast.error { --f-border: rgba(255,97,112,.5); }
.toast .t-body { flex: 1; min-width: 0; }
.toast .t-title { font-weight: 600; }
.toast .t-msg { color: var(--ink-2); font-size: 13px; }
.toast.out { animation: toast-out .2s var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(16px); } }
@media (max-width: 640px) { .toasts { left: 16px; right: 16px; bottom: calc(16px + var(--dock-h, 0px)); width: auto; } }

.tip {
  position: fixed; z-index: 960; pointer-events: none; padding: 6px 9px; background: var(--surface-3); border: 1px solid var(--line-3);
  font: 500 12px/1.3 var(--f-ui); color: var(--ink); white-space: nowrap; animation: fade var(--t-fast);
}

/* disclosure */
details.disc { border: 1px solid var(--line); background: var(--bg-sunk); }
details.disc > summary { list-style: none; cursor: pointer; padding: 10px 14px; display: flex; align-items: center; gap: 10px; font: 500 13px var(--f-ui); color: var(--ink-2); }
details.disc > summary::-webkit-details-marker { display: none; }
details.disc > summary .chev { transform: rotate(-45deg); transition: transform var(--t); width: 7px; height: 7px; }
details.disc[open] > summary .chev { transform: rotate(45deg); }
details.disc > summary:hover { color: var(--ink); }
details.disc > .disc-body { padding: 4px 14px 14px; display: grid; gap: 12px; }

/* numbered flow (vertical steps) */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: st; display: grid; gap: 0; }
.steps > li { counter-increment: st; position: relative; padding: 0 0 18px 40px; color: var(--ink-2); font-size: 13.5px; }
.steps > li::before {
  content: counter(st, decimal-leading-zero); position: absolute; left: 0; top: -1px; width: 26px; height: 22px;
  font: 600 11px/22px var(--f-mono); text-align: center; color: var(--accent-ink); background: var(--accent-wash); border: 1px solid var(--accent-line);
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}
.steps > li::after { content: ""; position: absolute; left: 12.5px; top: 26px; bottom: 4px; width: 1px; background: var(--line-2); }
.steps > li:last-child { padding-bottom: 0; }
.steps > li:last-child::after { display: none; }
.steps > li strong { color: var(--ink); font-weight: 500; display: block; margin-bottom: 2px; }
.steps > li.done::before { content: "✓"; color: var(--on-accent); background: var(--grad); border-color: transparent; }
.steps > li.done strong { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-4); }

/* key/value list */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; font-size: 13.5px; }
.kv dt { color: var(--ink-3); font: 500 11.5px/1.9 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
.kv dd { margin: 0; color: var(--ink); min-width: 0; word-break: break-word; }
@media (max-width: 480px) { .kv { grid-template-columns: 1fr; gap: 2px; } .kv dd { margin-bottom: 8px; } }

/* ==========================================================================
   App shell
   ========================================================================== */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); border-right: 1px solid var(--line); overflow: hidden; z-index: 40;
}
.side-brand { display: flex; align-items: center; gap: 10px; height: var(--top-h); padding: 0 18px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none !important; flex: none; }
.side-brand svg { width: 24px; height: 27px; flex: none; }
.side-brand .wm { font: 600 16px/1 var(--f-display); letter-spacing: .01em; }
.side-nav { flex: 1; overflow-y: auto; padding: 10px 10px 16px; }
.nav-group + .nav-group { margin-top: 14px; }
.nav-group > .ng-label { font: 500 10.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding: 10px 10px 8px; }
.nav-link {
  display: flex; align-items: center; gap: 11px; height: 36px; padding: 0 10px; color: var(--ink-2);
  font-size: 13.5px; font-weight: 500; text-decoration: none !important; position: relative; white-space: nowrap;
}
.nav-link svg.i { color: var(--ink-3); width: 18px; height: 18px; }
.nav-link:hover { color: var(--ink); background: var(--surface); }
.nav-link:hover svg.i { color: var(--ink-2); }
.nav-link[aria-current="page"] { color: var(--ink); background: linear-gradient(90deg, rgba(39,229,255,.09), rgba(39,229,255,0) 80%); }
.nav-link[aria-current="page"] svg.i { color: var(--cyan); }
.nav-link[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px; background: var(--grad); }
.nav-link .ext { margin-left: auto; color: var(--ink-4); width: 13px; height: 13px; }
.nav-link .nl-text { overflow: hidden; text-overflow: ellipsis; }
.side-user { flex: none; border-top: 1px solid var(--line); padding: 12px; display: grid; gap: 10px; }
.user-chip { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; font: 600 13px var(--f-display); color: var(--on-accent);
  background: var(--grad-deep); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.user-chip .uc-text { min-width: 0; display: grid; gap: 3px; }
.user-chip .uc-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user .btn { width: 100%; }

.main-col { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--top-h); display: flex; align-items: center; gap: 12px;
  padding: 0 var(--s-6); background: rgba(5, 8, 13, .86); border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(4px)) { .topbar { backdrop-filter: blur(10px) saturate(1.2); } }
.topbar .hamburger { display: none; }
.crumbs { display: flex; align-items: center; gap: 8px; font: 500 12px/1 var(--f-mono); color: var(--ink-3); min-width: 0; white-space: nowrap; overflow: hidden; }
.crumbs .chev { width: 6px; height: 6px; opacity: .6; }
.crumbs .here { color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.topbar .t-search { margin-left: auto; width: min(340px, 40vw); }
.topbar .t-search .input { height: 34px; background: var(--surface); padding-right: 40px; }
.topbar .t-search .kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.topbar .t-actions { display: flex; align-items: center; gap: 4px; }
.search-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50; background: var(--surface-2); border: 1px solid var(--line-2); padding: 4px; box-shadow: 0 16px 40px -8px rgba(0,0,0,.7); max-height: 60vh; overflow-y: auto; }
.search-results a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: var(--ink-2); font-size: 13px; }
.search-results a:hover, .search-results a[aria-selected="true"] { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.search-results .sr-kind { margin-left: auto; font: 500 10.5px var(--f-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.search-results .sr-empty { padding: 12px 10px; color: var(--ink-3); font-size: 13px; }

.page { padding: var(--s-8) var(--s-6) var(--s-16); width: 100%; max-width: 1360px; margin: 0 auto; flex: 1; outline: none; }
.page.narrow { max-width: 760px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-6); flex-wrap: wrap; margin-bottom: var(--s-6); }
.page-head .ph-text { min-width: min(100%, 320px); flex: 1; display: grid; gap: 8px; }
.page-head .ph-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.section { margin-top: var(--s-8); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: var(--s-3); }
.section-head h2 { font-size: 18px; display: flex; align-items: center; gap: 10px; }
.section-head p { color: var(--ink-3); font-size: 13px; }
.stack { display: grid; gap: var(--s-4); }
.row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.cols-2 { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.cols-main-aside { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.cols-main-aside > aside { position: sticky; top: calc(var(--top-h) + 16px); }
.cols-even { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (max-width: 1100px) {
  .cols-2, .cols-main-aside, .cols-even { grid-template-columns: minmax(0, 1fr); }
  .cols-main-aside > aside { position: static; }
}
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px var(--s-5); border-bottom: 1px solid var(--line); }
.toolbar > * { min-width: 0; }
.toolbar .search { flex: 1 1 220px; }
.toolbar .select { width: auto; flex: 0 1 180px; }
/* the custom dropdown (ui.select) is width:100% by default — in the flex toolbar that makes each one
   demand a full row and stack. Give the ENHANCED trigger the same compact flex basis instead. */
.toolbar .select-ui { width: auto; flex: 0 1 170px; }
.toolbar .count { margin-left: auto; flex: none; }

/* faint shield watermark used on auth + empty canvases */
.watermark { position: fixed; pointer-events: none; z-index: 0; opacity: .045; color: var(--cyan); }

/* mobile dock: page's primary action stays one thumb away */
.dock { display: none; }

/* ---- shell responsiveness ---- */
@media (max-width: 1199px) and (min-width: 768px) {
  .shell { grid-template-columns: var(--side-rail) minmax(0, 1fr); }
  .side-brand { padding: 0; justify-content: center; }
  .side-brand .wm, .nav-group > .ng-label, .nav-link .nl-text, .nav-link .ext, .user-chip .uc-text, .side-user .lo-text { display: none; }
  .nav-group > .ng-label { display: block; height: 1px; padding: 0; margin: 8px 12px; background: var(--line); font-size: 0; }
  .nav-group:first-child > .ng-label { display: none; }
  .nav-link { justify-content: center; padding: 0; height: 40px; }
  .nav-link[aria-current="page"]::before { left: -10px; }
  .side-nav { padding: 10px 10px 16px; }
  .side-user { padding: 10px 8px; justify-items: center; }
  .user-chip { justify-content: center; }
  .side-user .btn { width: 40px; padding: 0; }
}
@media (max-width: 767px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side {
    position: fixed; left: 0; top: 0; bottom: 0; width: min(84vw, 300px); transform: translateX(-102%);
    transition: transform .26s var(--ease); z-index: 800; box-shadow: 24px 0 60px rgba(0,0,0,.6);
  }
  .shell.drawer-open .side { transform: none; }
  .drawer-scrim { position: fixed; inset: 0; z-index: 790; background: rgba(2,4,8,.6); animation: fade var(--t); }
  .topbar { padding: 0 var(--s-3) 0 var(--s-2); }
  .topbar .hamburger { display: inline-grid; }
  .topbar .t-search { width: auto; flex: 1; }
  .topbar .t-search .kbd { display: none; }
  .crumbs { display: none; }
  .page { padding: var(--s-5) var(--s-4) calc(var(--s-16) + var(--dock-h, 0px)); }
  .page-head { margin-bottom: var(--s-5); }
  .card > .card-head, .card > .card-body, .toolbar { padding-left: var(--s-4); padding-right: var(--s-4); }
  body.has-dock { --dock-h: 68px; }
  .dock {
    display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(5,8,13,.94); border-top: 1px solid var(--line);
  }
  .dock .btn { flex: 1; height: 42px; }
}
@media (max-width: 420px) {
  .topbar .t-search .input::placeholder { color: transparent; }
}

/* ==========================================================================
   Public pages (marketing, auth, legal) share these
   ========================================================================== */
.wrap { width: min(100% - 32px, 1200px); margin-inline: auto; }
.wrap-narrow { width: min(100% - 32px, 760px); margin-inline: auto; }
.pub-nav {
  position: sticky; top: 0; z-index: 50; height: 60px; display: flex; align-items: center;
  background: rgba(5, 8, 13, .8); border-bottom: 1px solid transparent; transition: border-color var(--t), background var(--t);
}
@supports (backdrop-filter: blur(4px)) { .pub-nav { backdrop-filter: blur(12px) saturate(1.3); } }
.pub-nav.scrolled { border-bottom-color: var(--line); background: rgba(5, 8, 13, .92); }
.pub-nav .wrap { display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none !important; flex: none; }
.brand svg { width: 24px; height: 27px; }
.brand .wm { font: 600 17px/1 var(--f-display); letter-spacing: .01em; }
.pub-links { display: flex; gap: 2px; align-items: center; }
.pub-links a { color: var(--ink-2); font-size: 13.5px; font-weight: 500; padding: 8px 10px; }
.pub-links a:hover { color: var(--ink); text-decoration: none; }
.pub-cta { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.pub-burger { display: none; }
@media (max-width: 900px) {
  .pub-links { display: none; }
  .pub-burger { display: inline-grid; }
  .pub-nav .wrap { gap: 12px; }
}
@media (max-width: 420px) { .pub-cta .btn-ghost { display: none; } .pub-cta .login-link { display: inline-flex; } }
.login-link { display: none; }
.pub-sheet { position: fixed; inset: 60px 0 auto 0; z-index: 49; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 16px 18px; display: grid; gap: 2px; animation: fade var(--t); }
.pub-sheet a { color: var(--ink); padding: 12px 4px; border-bottom: 1px solid var(--line); font-size: 15px; }

.pub-foot { border-top: 1px solid var(--line); padding: 48px 0 32px; margin-top: 0; background: var(--bg); position: relative; z-index: 1; }
.pub-foot .wrap { display: grid; gap: 28px; grid-template-columns: 1.4fr repeat(3, 1fr); }
.pub-foot h4 { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.pub-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pub-foot ul a { color: var(--ink-2); font-size: 13.5px; }
.pub-foot ul a:hover { color: var(--ink); }
.pub-foot .fine { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--line); font: 400 12px/1.5 var(--f-mono); color: var(--ink-3); }
.pub-foot .f-blurb { color: var(--ink-3); font-size: 13.5px; max-width: 34ch; margin-top: 12px; }
@media (max-width: 760px) { .pub-foot .wrap { grid-template-columns: 1fr 1fr; } .pub-foot .f-brand { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Motion system — see assets/js/motion.js. transform/opacity/filter only; fully
   prefers-reduced-motion safe. Appended last so these win the cascade for shared elements.
   ========================================================================== */
.rv { opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--ease) var(--r-delay, 0ms), transform .6s var(--ease) var(--r-delay, 0ms); }
.rv.rv-in { opacity: 1; transform: none; }

.motion-in .pub-nav { animation: m-drop .5s var(--ease) both; }
.motion-in .hero-copy > * { animation: m-rise .62s var(--ease) both; }
.motion-in .hero-copy > *:nth-child(2) { animation-delay: .06s; }
.motion-in .hero-copy > *:nth-child(3) { animation-delay: .12s; }
.motion-in .hero-copy > *:nth-child(4) { animation-delay: .18s; }
.motion-in .hero-copy > *:nth-child(5) { animation-delay: .24s; }
.motion-in .seal { animation: m-rise .7s var(--ease) .18s both; }
@keyframes m-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes m-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* tiles: micro-tilt + a cursor-tracking faceted spotlight (injected .t-glow child) + border lift */
.has-glow { transition: transform .32s var(--ease); transform-style: preserve-3d; }
.has-glow > .t-glow { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  transition: opacity .3s var(--ease);
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 0%), rgba(39, 229, 255, .11), transparent 62%); }
.has-glow:hover > .t-glow { opacity: 1; }
.has-glow:hover { --f-border: var(--accent-line); }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; transition: none; }
  .motion-in .pub-nav, .motion-in .hero-copy > *, .motion-in .seal { animation: none; }
  .has-glow { transition: none; transform: none !important; }
  .has-glow > .t-glow { display: none; }
}

/* ============ "LIFE" POLISH — colored, glowing buttons / flags / dropdowns ============ */
/* flag pills: generalized severity — solid colored pill + dot + count badge (no glow) */
.flags { display: flex; flex-wrap: wrap; gap: 6px; }
.flag-pill { display: inline-flex; align-items: center; gap: 7px; height: 25px; padding: 0 10px; border-radius: 7px;
  font: 600 11.5px/1 var(--f-ui); letter-spacing: .01em; white-space: nowrap; border: 1px solid; }
.flag-pill .fdot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.flag-pill .fx { font: 600 11px/1 var(--f-mono); opacity: .9; margin-left: 1px; padding-left: 7px; border-left: 1px solid; }
.flag-pill.is-danger { color: var(--danger); background: var(--danger-wash); border-color: rgba(255,97,112,.42); }
.flag-pill.is-warn   { color: var(--warn);   background: var(--warn-wash);   border-color: rgba(255,181,71,.42); }
.flag-pill.is-info   { color: var(--cyan);   background: rgba(39,229,255,.1); border-color: rgba(39,229,255,.4); }
.flag-pill.is-muted  { color: var(--ink-3);  background: var(--surface-2);    border-color: var(--line-2); }

/* button glow on hover (cyan primary, red danger) */
.btn-primary:hover:not(:disabled) { box-shadow: 0 4px 20px -4px rgba(39,229,255,.5); }
.btn-danger:hover:not(:disabled)  { box-shadow: 0 4px 20px -5px rgba(201,42,61,.75); }
.btn-danger-ghost:hover:not(:disabled) { box-shadow: 0 3px 16px -6px rgba(255,97,112,.5); }
.btn-subtle:hover:not(:disabled) { box-shadow: 0 3px 14px -7px rgba(0,0,0,.6); }

/* icon buttons: semantic color variants + hover glow (row actions: ban=warn, revoke=danger, reset/settings=accent) */
.icon-btn.warn:hover:not(:disabled)   { color: var(--warn); border-color: rgba(255,181,71,.42); background: var(--warn-wash); box-shadow: 0 0 0 1px rgba(255,181,71,.1), 0 3px 12px -5px rgba(255,181,71,.55); }
.icon-btn.accent:hover:not(:disabled) { color: var(--cyan); border-color: rgba(39,229,255,.42); background: rgba(39,229,255,.08); box-shadow: 0 0 0 1px rgba(39,229,255,.1), 0 3px 12px -5px rgba(39,229,255,.55); }
.icon-btn.ok:hover:not(:disabled)     { color: var(--ok);   border-color: rgba(61,220,151,.42); background: var(--ok-wash); }
.icon-btn.danger:hover:not(:disabled) { box-shadow: 0 0 0 1px rgba(255,97,112,.12), 0 3px 12px -5px rgba(255,97,112,.5); }

/* dropdown trigger: lift on hover, stronger focus/open ring */
.select-ui:hover:not(:disabled) { box-shadow: 0 3px 14px -7px rgba(0,0,0,.65); }
.select-ui[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(39,229,255,.16); }
.select-pop { border: 1px solid var(--line-ctl); border-radius: 10px; box-shadow: 0 14px 34px -10px rgba(0,0,0,.6); }
.select-pop .sel-opt { border-radius: 6px; }

/* source / acquisition tags get a touch of meaning */
.tag.src-ad     { color: var(--warn); border-color: rgba(255,181,71,.34); background: var(--warn-wash); }
.tag.src-manual { color: var(--cyan); border-color: rgba(39,229,255,.3);  background: rgba(39,229,255,.07); }

/* crypto purchase buttons on the profile access card */
.pay-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.pay-grid .btn { position: relative; }
.pay-grid .btn:hover:not(:disabled) { box-shadow: 0 4px 18px -6px rgba(39,229,255,.5); }