/* HieraHMR: styles. Plain CSS, no build step.
 * Theme: light by default, dark when the system prefers it, and a manual override through
 * <html data-theme="light|dark"> (set by script.js and the header toggle). */

/* ------------------------------------------------------------------ Tokens */

/* Display face for headings: Bricolage Grotesque (SIL OFL 1.1, (c) The Bricolage Grotesque Project
   Authors; copyright and licence URL are in the font's name table). Latin only: Chinese and other
   scripts fall through to the system stack below. */
@font-face {
  font-family: "H3R Display";
  src: url("/assets/display.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched stand-in used until display.woff2 arrives, so the swap does not reflow headings:
   Arial scaled to Bricolage's measured width at display weights, with Bricolage's vertical metrics
   (ascent 930, descent 270 per 1000) divided by that scale. */
@font-face {
  font-family: "H3R Display Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
  font-weight: 200 800;
  size-adjust: 102%;
  ascent-override: 91.18%;
  descent-override: 26.47%;
  line-gap-override: 0%;
}

/* Design language: a motion-capture lab on warm paper. Ink-black type, one ultramarine signal
 * colour, monospace instrument labels, hairline rules. Dark mode is the same lab with the lights off. */

:root {
  /* Viewfinder corner brackets, drawn in currentColor; used by the landing stage, the dropzone
     and the running-job card. */
  --brackets:
    linear-gradient(currentColor, currentColor) top left / 14px 1px no-repeat,
    linear-gradient(currentColor, currentColor) top left / 1px 14px no-repeat,
    linear-gradient(currentColor, currentColor) top right / 14px 1px no-repeat,
    linear-gradient(currentColor, currentColor) top right / 1px 14px no-repeat,
    linear-gradient(currentColor, currentColor) bottom left / 14px 1px no-repeat,
    linear-gradient(currentColor, currentColor) bottom left / 1px 14px no-repeat,
    linear-gradient(currentColor, currentColor) bottom right / 14px 1px no-repeat,
    linear-gradient(currentColor, currentColor) bottom right / 1px 14px no-repeat;
  color-scheme: light;
  --bg: #f4f2ec;
  --bg-glow: rgba(51, 64, 240, 0.07);
  --surface: #fffefb;
  --surface-2: #f0eee7;
  --surface-3: #e5e2d9;
  --surface-glass: rgba(244, 242, 236, 0.78);
  --border: #e3dfd4;
  --border-strong: #cfcabd;
  --control-border: #8b8d94;
  --text: #111214;
  --text-2: #45474e;
  --text-3: #5e6068;
  --accent: #3340f0;
  --accent-hover: #2832d4;
  --accent-contrast: #ffffff;
  --accent-text: #2c37d8;
  --accent-soft: #e6e7fd;
  --accent-glow: rgba(51, 64, 240, 0.22);
  --focus: #3340f0;
  --danger: #c02a1d;
  --danger-hover: #9e2016;
  --danger-contrast: #ffffff;
  --danger-text: #ab2316;
  --danger-soft: #fbe9e5;
  --success-text: #0f6a37;
  --success-soft: #e1f2e5;
  --warning-text: #7a4a00;
  --warning-soft: #f8edd2;
  --neutral-soft: #ebe8e0;
  --ok-dot: #19a35a;
  --warn-dot: #d48a00;
  --bad-dot: #d4321f;
  --idle-dot: #9a9ca4;
  --stage-bg: #0b0c0f;
  --scene-bg: #f7f5f0;
  --scene-grid: #d9d5ca;
  --scene-ink: #5e6068;
  --shadow-1: 0 1px 0 rgba(17, 18, 20, 0.03), 0 1px 2px rgba(17, 18, 20, 0.05);
  --shadow-2: 0 18px 48px -12px rgba(17, 18, 20, 0.18), 0 4px 12px -4px rgba(17, 18, 20, 0.08);
  --shadow-3: 0 30px 80px -20px rgba(17, 18, 20, 0.22), 0 8px 24px -10px rgba(17, 18, 20, 0.12);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --backdrop: rgba(17, 18, 20, 0.42);
  --radius: 14px;
  --radius-small: 10px;
  --radius-large: 22px;
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "H3R Display", "H3R Display Fallback", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 0.14s;
  --dur-2: 0.26s;
  --dur-3: 0.6s;
  --gutter: clamp(16px, 3.2vw, 40px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0c0f;
    --bg-glow: rgba(141, 152, 255, 0.08);
    --surface: #14161b;
    --surface-2: #1b1d23;
    --surface-3: #262830;
    --surface-glass: rgba(11, 12, 15, 0.72);
    --border: #24262d;
    --border-strong: #353842;
    --control-border: #6c6f79;
    --text: #eceae4;
    --text-2: #c2c3c8;
    --text-3: #9a9ca4;
    --accent: #5b5cff;
    --accent-hover: #6f70ff;
    --accent-contrast: #ffffff;
    --accent-text: #9ea8ff;
    --accent-soft: #1c1f3d;
    --accent-glow: rgba(91, 92, 255, 0.4);
    --focus: #9ea8ff;
    --danger: #ff7a6b;
    --danger-hover: #ff958a;
    --danger-contrast: #1c0906;
    --danger-text: #ff9a8e;
    --danger-soft: #361814;
    --success-text: #78dc9c;
    --success-soft: #11291b;
    --warning-text: #f3c063;
    --warning-soft: #30250d;
    --neutral-soft: #20222a;
    --ok-dot: #4fd389;
    --warn-dot: #f0b040;
    --bad-dot: #ff7a6b;
    --idle-dot: #7e818b;
    --stage-bg: #060709;
    --scene-bg: #0f1014;
    --scene-grid: #2a2c34;
    --scene-ink: #9a9ca4;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 18px 48px -12px rgba(0, 0, 0, 0.7), 0 4px 12px -4px rgba(0, 0, 0, 0.5);
    --shadow-3: 0 30px 80px -20px rgba(0, 0, 0, 0.8), 0 8px 24px -10px rgba(0, 0, 0, 0.6);
    --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --backdrop: rgba(0, 0, 0, 0.66);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0c0f;
  --bg-glow: rgba(141, 152, 255, 0.08);
  --surface: #14161b;
  --surface-2: #1b1d23;
  --surface-3: #262830;
  --surface-glass: rgba(11, 12, 15, 0.72);
  --border: #24262d;
  --border-strong: #353842;
  --control-border: #6c6f79;
  --text: #eceae4;
  --text-2: #c2c3c8;
  --text-3: #9a9ca4;
  --accent: #5b5cff;
  --accent-hover: #6f70ff;
  --accent-contrast: #ffffff;
  --accent-text: #9ea8ff;
  --accent-soft: #1c1f3d;
  --accent-glow: rgba(91, 92, 255, 0.4);
  --focus: #9ea8ff;
  --danger: #ff7a6b;
  --danger-hover: #ff958a;
  --danger-contrast: #1c0906;
  --danger-text: #ff9a8e;
  --danger-soft: #361814;
  --success-text: #78dc9c;
  --success-soft: #11291b;
  --warning-text: #f3c063;
  --warning-soft: #30250d;
  --neutral-soft: #20222a;
  --ok-dot: #4fd389;
  --warn-dot: #f0b040;
  --bad-dot: #ff7a6b;
  --idle-dot: #7e818b;
  --stage-bg: #060709;
  --scene-bg: #0f1014;
  --scene-grid: #2a2c34;
  --scene-ink: #9a9ca4;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 18px 48px -12px rgba(0, 0, 0, 0.7), 0 4px 12px -4px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 30px 80px -20px rgba(0, 0, 0, 0.8), 0 8px 24px -10px rgba(0, 0, 0, 0.6);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --backdrop: rgba(0, 0, 0, 0.66);
}

/* -------------------------------------------------------------------- Base */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(1200px 520px at 85% -120px, var(--bg-glow), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font: 400 0.9375rem/1.55 var(--font);
  font-feature-settings: "kern", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: var(--accent-contrast); }

h1, h2, h3, h4, p, dl, dd, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 680; line-height: 1.2; letter-spacing: -0.022em; text-wrap: balance; }
h1 { letter-spacing: -0.03em; }
p { text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
canvas, video { display: block; }
code, .mono { font-family: var(--mono); font-size: 0.8125rem; }
.num, [class*="balance"], [class*="amount"], [class*="meta"] { font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  transition: outline-offset var(--dur-1) var(--ease-out);
}
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--radius-small);
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 10px; }

.icon { flex: none; }

.link, .btn-link {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.link { display: inline-flex; align-items: center; gap: 6px; }
.link:hover, .btn-link:hover { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.link, .btn-link { transition: text-underline-offset var(--dur-1) var(--ease-out), color var(--dur-1) ease; }
.btn-link {
  padding: 0;
  border: 0;
  background: none;
  font-weight: 500;
  border-radius: 4px;
}

.hint, .help, .fine {
  color: var(--text-3);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.lead { color: var(--text-2); max-width: 62ch; }

/* ----------------------------------------------------------------- Buttons */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  isolation: isolate;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease,
    box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn .icon { transition: transform var(--dur-2) var(--ease-out); }
.btn:active:not(:disabled) { transform: scale(0.97); transition-duration: 0.06s; }
.btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: var(--highlight), 0 1px 2px rgba(17, 18, 20, 0.12), 0 6px 16px -8px var(--accent-glow);
  overflow: hidden;
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-out);
  pointer-events: none;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); box-shadow: var(--highlight), 0 1px 2px rgba(17, 18, 20, 0.12), 0 12px 28px -10px var(--accent-glow); transform: translateY(-1px); }
.btn-primary:hover:not(:disabled)::after { transform: translateX(120%); }
.btn-primary:hover:not(:disabled) .icon-upload, .btn-primary:hover:not(:disabled) .icon-plus { transform: translateY(-1px) rotate(0deg) scale(1.08); }
.btn-secondary { background: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow-1); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--control-border); }
.btn-quiet { color: var(--text-2); }
.btn-quiet:hover { background: var(--surface-2); color: var(--text); }
.btn-danger { background: var(--danger); color: var(--danger-contrast); }
.btn-danger:hover { background: var(--danger-hover); }
.btn-danger-text { color: var(--danger-text); }
.btn-danger-text:hover { background: var(--danger-soft); color: var(--danger-text); }
.btn-small { min-height: 30px; padding: 0 12px; font-size: 0.8125rem; gap: 6px; }
.btn-large { min-height: 48px; padding: 0 24px; font-size: 0.9375rem; }
.btn-block { width: 100%; }
.btn:disabled, .icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.is-busy { cursor: progress; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-2) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.icon-btn:active:not(:disabled) { transform: scale(0.9); }
.icon-btn[data-action="theme-toggle"]:hover:not(:disabled) .icon { transform: rotate(-24deg); }
.icon-btn .icon { transition: transform var(--dur-3) var(--ease-spring); }
.icon-btn-small { width: 30px; height: 30px; }
.icon-btn-primary { background: var(--accent); color: var(--accent-contrast); width: 40px; height: 40px; border-radius: 50%; }
.icon-btn-primary:hover:not(:disabled) { background: var(--accent-hover); color: var(--accent-contrast); }
.icon-toggle[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-text); }

.btn-group { display: inline-flex; align-items: center; gap: 2px; }

/* ------------------------------------------------------------------- Forms */

.label { display: block; margin-bottom: 7px; font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.005em; color: var(--text-2); }

.input, .select {
  width: 100%;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  box-shadow: inset 0 1px 2px rgba(17, 18, 20, 0.04);
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-1) ease;
}
.input:hover:not(:focus):not(:disabled), .select:hover:not(:focus):not(:disabled) { border-color: var(--control-border); }
.input::placeholder { color: var(--text-3); opacity: 1; transition: opacity var(--dur-2) ease; }
.input:focus::placeholder { opacity: 0.55; }
.input:focus-visible, .select:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px var(--accent-glow); }
.input[aria-invalid="true"] { border-color: var(--danger-text); }
.input-mono { font-family: var(--mono); font-size: 0.9375rem; }
.select { width: auto; min-height: 38px; padding-right: 28px; font-size: 0.875rem; }
.select-small { min-height: 32px; padding: 4px 26px 4px 10px; font-size: 0.8125rem; }

.input-group { position: relative; display: flex; }
.input-group .input { padding-right: 46px; }
.input-addon { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }

.field-error {
  color: var(--danger-text);
  font-size: 0.8125rem;
  font-weight: 500;
}
.field-error:empty { display: none; }
.field-error:not(:empty) { margin-top: 6px; }
.help { margin-top: 6px; }

.checkbox {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-weight: 500; }
.check .checkbox { margin-top: 2px; }

.switch { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; font-size: 0.875rem; font-weight: 500; }
.switch-input { position: absolute; left: 0; top: 50%; width: 36px; height: 20px; margin: -10px 0 0; opacity: 0; cursor: pointer; }
.switch-track { position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; background: var(--control-border); transition: background-color var(--dur-2) ease; }
.switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform var(--dur-2) var(--ease-spring);
}
.switch-input:checked + .switch-track { background: var(--accent); }
.switch-input:checked + .switch-track::after { transform: translateX(16px); }
:root[data-theme="dark"] .switch-input:checked + .switch-track::after { background: var(--accent-contrast); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .switch-input:checked + .switch-track::after { background: var(--accent-contrast); }
}
.switch-input:focus-visible + .switch-track { outline: 2px solid var(--focus); outline-offset: 2px; }

.range { min-width: 0; }

/* ------------------------------------------------------- Cards and notices */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  box-shadow: var(--highlight), var(--shadow-1);
  padding: clamp(18px, 2.2vw, 28px);
}
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-head h3, .card-title { font-size: 1.0625rem; }
.card-text { color: var(--text-2); margin-bottom: 14px; }

.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: 0.875rem;
  line-height: 1.45;
}
.notice .icon { margin-top: 1px; }
.notice-body { min-width: 0; overflow-wrap: anywhere; }
.notice-info { background: var(--accent-soft); color: var(--text); }
.notice-info .icon { color: var(--accent-text); }
.notice-warning { background: var(--warning-soft); color: var(--text); }
.notice-warning .icon { color: var(--warning-text); }
.notice-error { background: var(--danger-soft); color: var(--text); }
.notice-error .icon { color: var(--danger-text); }

.empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 28px 16px;
  text-align: center;
  color: var(--text-2);
}
.empty .icon { color: var(--text-3); width: 36px; height: 36px; padding: 8px; box-sizing: content-box; border-radius: 50%; background: var(--surface-2); }
.empty h3, .empty h1 { font-size: 1rem; color: var(--text); }
.empty p { max-width: 44ch; font-size: 0.875rem; }
.empty .btn { margin-top: 6px; }
.empty-large { padding: 56px 20px; }
.empty-large h1 { font-size: 1.25rem; }

.kv { display: grid; gap: 0; }
.kv-row { display: grid; grid-template-columns: minmax(96px, 168px) minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.kv-row:first-child { border-top: 0; }
.kv dt { color: var(--text-2); font-size: 0.875rem; }
.kv dd { overflow-wrap: anywhere; font-size: 0.875rem; }

/* ------------------------------------------------------- Badges, progress */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  height: 22px;
  padding: 0 9px 0 7px;
  border-radius: 999px;
  font-size: 0.71875rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
.badge-queued { background: var(--neutral-soft); color: var(--text-2); }
.badge-running { background: var(--accent-soft); color: var(--accent-text); }
.badge-succeeded { background: var(--success-soft); color: var(--success-text); }
.badge-failed { background: var(--danger-soft); color: var(--danger-text); }
.badge-cancelled { background: var(--neutral-soft); color: var(--text-2); }

.badge-spinner, .spinner {
  display: inline-block;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin 0.9s linear infinite;
}
.badge-spinner { width: 12px; height: 12px; margin: 0 1px; }
.spinner { width: 22px; height: 22px; border-width: 2.5px; }

.progress {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.progress-fill {
  position: relative;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.6s var(--ease-out);
  overflow: hidden;
}
.progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: translateX(-100%);
  animation: sheen 1.8s var(--ease-in-out) infinite;
}
.progress-indeterminate .progress-fill {
  width: 38%;
  transition: none;
  animation: slide 1.5s ease-in-out infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(290%); }
}
@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheen { to { transform: translateX(100%); } }
@keyframes enter {
  from { opacity: 0; transform: translateY(14px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes line-up { from { transform: translateY(105%); } to { transform: none; } }
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 currentColor; }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}

.skel {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}
.skel-line { height: 14px; }
.skel-small { height: 11px; }
.skel-title { height: 26px; width: 46%; }
.skel-block { height: 320px; border-radius: var(--radius); }

/* ------------------------------------------------------------------ Shell */

.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface-glass);
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  transition: border-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
.app-header.is-scrolled { border-bottom-color: var(--border); box-shadow: 0 10px 30px -24px rgba(17, 18, 20, 0.5); }
.app-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 64px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; border-radius: 10px; }
.brand-logo { transition: transform var(--dur-3) var(--ease-spring); }
.brand:hover .brand-logo { transform: rotate(-8deg) scale(1.06); }
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-contrast);
}
.brand-name { font-family: var(--font-display); font-size: 1.125rem; font-weight: 720; letter-spacing: -0.035em; }
.header-tools { display: flex; align-items: center; gap: 6px; min-width: 0; }

.health-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px 0 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 0.71875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.health-pill:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.health-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--idle-dot); }
[data-status="available"] > .health-dot { background: var(--ok-dot); color: var(--ok-dot); animation: pulse-ring 2.4s var(--ease-out) infinite; }
[data-status="checking"] > .health-dot { animation: fade 0.9s ease-in-out infinite alternate; }
[data-status="offline"] > .health-dot { background: var(--warn-dot); }
[data-status="unreachable"] > .health-dot { background: var(--bad-dot); }
.health-text-short { display: none; }
.health-line { display: flex; align-items: center; gap: 8px; }

.account { display: flex; align-items: center; gap: 4px; min-width: 0; }
.key-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 0.75rem;
  white-space: nowrap;
}

.app-main { flex: 1; width: 100%; max-width: 1480px; margin: 0 auto; padding: clamp(20px, 3vw, 36px) var(--gutter) clamp(40px, 6vw, 72px); }
.app-main:focus { outline: none; }
.app-main > * { animation: enter var(--dur-3) var(--ease-out) both; }

.boot { display: grid; gap: 14px; max-width: 520px; margin: 48px auto; }

.app-footer { border-top: 1px solid var(--border); }
.app-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 18px var(--gutter);
  color: var(--text-2);
  font-size: 0.8125rem;
}
.footer-name { font-family: var(--font-display); font-weight: 720; letter-spacing: -0.03em; color: var(--text); }
.footer-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-3);
  font-size: 0.78125rem;
  text-decoration: none;
  transition: color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.footer-link:hover { color: var(--text); background: var(--surface-2); }

.noscript { max-width: 520px; margin: 48px auto; padding: 16px 20px; border-radius: var(--radius); background: var(--warning-soft); color: var(--text); }

/* ---------------------------------------------------------------- Sign in */

.auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 56px;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(16px, 8vh, 88px) 0 24px;
}
.auth-card { padding: clamp(22px, 2.4vw, 32px); display: grid; gap: 18px; box-shadow: var(--highlight), var(--shadow-2); }
.auth-title { font-size: 1.5rem; letter-spacing: -0.035em; }
.auth-reason { font-size: 0.9375rem; }
.auth-form .btn { margin-top: 18px; }

/* ----------------------------------------------------------------- Landing */
/* The signed-out workspace: one focal point (headline, calls to action, live stage), then scroll
   chapters. Sign-in opens in the shell's dialog. */

.auth-landing { display: block; max-width: 1360px; margin: 0 auto; padding: clamp(4px, 2.5vh, 32px) 0 0; }
.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  grid-template-areas: "kicker kicker" "title side";
  column-gap: clamp(32px, 5vw, 96px);
  align-items: end;
}
.landing-side { grid-area: side; display: grid; gap: 24px; padding-bottom: clamp(18px, 2.2vw, 30px); }
.landing-ctas { display: flex; flex-wrap: wrap; gap: 10px; animation: enter 0.9s var(--ease-out) 0.5s both; }
.landing-ctas .btn-primary .icon-arrow-right, .landing-ctas .btn-primary .icon { transition: transform var(--dur-2) var(--ease-out); }
.landing-ctas .btn-primary:hover .icon { transform: translateX(3px); }

.landing-kicker {
  grid-area: kicker;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.71875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  animation: enter var(--dur-3) var(--ease-out) both;
}
.landing-kicker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); color: var(--accent); animation: pulse-ring 2.4s var(--ease-out) infinite; }

.landing-title {
  grid-area: title;
  margin: clamp(12px, 1.6vw, 20px) 0 clamp(16px, 2vw, 26px);
  font-size: clamp(3rem, 1.1rem + 6.4vw, 7.25rem);
  font-weight: 760;
  line-height: 0.9;
  letter-spacing: -0.032em;
  word-spacing: 0.02em;
  font-kerning: normal;
  text-wrap: initial;
}
:lang(zh) .landing-title, .landing-title:lang(zh) { letter-spacing: -0.02em; line-height: 1.02; font-size: clamp(2.75rem, 1rem + 5.6vw, 6.25rem); }
.landing-line { display: block; overflow: hidden; padding: 0.02em 0 0.08em; margin-bottom: -0.08em; }
.landing-line > span {
  display: inline-block;
  animation: line-up 1.1s var(--ease-out) both;
  animation-delay: calc(var(--i) * 110ms + 60ms);
}
.landing-accent {
  --t1: var(--t1-light, var(--accent));
  --t2: var(--t2-light, #8a3ffc);
  background: linear-gradient(100deg, var(--t1) 15%, var(--t2) 85%);
  background: linear-gradient(in oklch 100deg, var(--t1) 15%, var(--t2) 85%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: line-up 1.1s var(--ease-out) both;
  animation-delay: calc(var(--i) * 110ms + 60ms);
}
:root[data-theme="dark"] .landing-accent { --t1: var(--t1-dark, var(--accent)); --t2: var(--t2-dark, #8a3ffc); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .landing-accent { --t1: var(--t1-dark, var(--accent)); --t2: var(--t2-dark, #8a3ffc); } }
@keyframes accent-drift { from { background-position: 0% 0; } to { background-position: 100% 0; } }

.landing-lead {
  max-width: 36ch;
  color: var(--text-2);
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.3125rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  animation: enter 0.9s var(--ease-out) 0.4s both;
}

.landing-stage {
  position: relative;
  margin: clamp(28px, 3vw, 44px) 0 0;
  aspect-ratio: 21 / 9;
  min-height: 300px;
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  background:
    radial-gradient(70% 90% at 50% 60%, transparent 40%, var(--bg-glow) 100%),
    var(--scene-bg);
  box-shadow: var(--highlight), var(--shadow-1);
  overflow: hidden;
  cursor: crosshair;
  touch-action: pan-y;
  animation: enter 1.1s var(--ease-out) 0.55s both;
}
/* Viewfinder brackets in the four corners. */
.landing-stage::before {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  color: var(--text-3);
  background: var(--brackets);
  opacity: 0.55;
  z-index: 1;
}
.stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hud {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 22px 28px;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  white-space: nowrap;
}
.hud-tl { top: 0; left: 0; }
.hud-tr { top: 0; right: 0; }
.hud-bl { bottom: 0; left: 0; text-transform: none; letter-spacing: 0.02em; white-space: normal; max-width: 60%; }
.hud-br { bottom: 0; right: 0; }
.hud-value { color: var(--text); }
.hud-dim { opacity: 0.7; }
.hud-rec { width: 7px; height: 7px; border-radius: 50%; background: var(--bad-dot); animation: fade 0.8s steps(2, jump-none) infinite alternate; }
.hud-track { --track: var(--track-light); display: inline-flex; align-items: center; gap: 6px; color: var(--track); }
.hud-track::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: currentColor; }
:root[data-theme="dark"] .hud-track { --track: var(--track-dark); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hud-track { --track: var(--track-dark); } }

/* ---------------------------------------------------------- Chapters */

.landing-chapters { display: grid; margin-top: clamp(72px, 10vw, 160px); }
.chapter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(28px, 5vw, 96px);
  padding: clamp(40px, 6vw, 88px) 0;
  border-top: 1px solid var(--border-strong);
}
.chapter:nth-child(even) .chapter-copy { order: 2; }
.chapter-copy { display: grid; gap: 14px; align-content: center; max-width: 34rem; }
.chapter-n {
  color: var(--accent-text);
  font-family: var(--mono);
  font-size: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.chapter-title { font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem); font-weight: 740; line-height: 0.98; letter-spacing: -0.05em; }
:lang(zh) .chapter-title { letter-spacing: -0.01em; line-height: 1.1; }
.chapter-body { color: var(--text-2); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem); line-height: 1.55; max-width: 38ch; }
.chapter-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-large);
  background: radial-gradient(70% 90% at 50% 60%, transparent 40%, var(--bg-glow) 100%), var(--scene-bg);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-1);
  overflow: hidden;
}
.chapter-stage::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 1;
  color: var(--text-3);
  background: var(--brackets);
  opacity: 0.55;
  pointer-events: none;
}
.chapter-tag {
  position: absolute;
  left: 26px;
  top: 22px;
  z-index: 2;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
:lang(zh) .chapter-tag { letter-spacing: 0.04em; }

.landing-price {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "n title" "n value" "n body";
  column-gap: clamp(20px, 3vw, 48px);
  row-gap: 10px;
  padding: clamp(40px, 6vw, 88px) 0;
  border-top: 1px solid var(--border-strong);
}
.landing-price > .chapter-n { grid-area: n; }
.landing-price > .chapter-title { grid-area: title; }
.landing-price > .chapter-body { grid-area: body; }
.landing-price-value { grid-area: value; font-family: var(--font-display); font-size: clamp(3rem, 1.6rem + 6vw, 7rem); font-weight: 760; letter-spacing: -0.06em; line-height: 1; font-variant-numeric: tabular-nums; }
.landing-price-value:empty { display: none; }
.landing-price-value::after { content: " / s"; color: var(--text-3); font-size: 0.4em; letter-spacing: -0.02em; font-weight: 600; }

.landing-final {
  display: grid;
  justify-items: center;
  gap: 28px;
  margin-top: clamp(16px, 3vw, 40px);
  padding: clamp(56px, 9vw, 128px) 24px;
  border-radius: var(--radius-large);
  background: var(--text);
  color: var(--bg);
  text-align: center;
}
.landing-final-title { font-size: clamp(2.25rem, 1.2rem + 4vw, 5rem); font-weight: 760; letter-spacing: -0.05em; line-height: 0.98; }
.landing-final .btn-secondary { background: transparent; color: var(--bg); border-color: color-mix(in srgb, var(--bg) 40%, transparent); box-shadow: none; }
.landing-final .btn-secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--bg) 12%, transparent); border-color: var(--bg); }

@media (max-width: 1100px) {
  .landing-stage { aspect-ratio: 16 / 9; }
}

@media (max-width: 899px) {
  .landing-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kicker" "title" "side"; }
  .landing-side { padding-bottom: 0; gap: 20px; }
  .chapter { grid-template-columns: minmax(0, 1fr); }
  .chapter:nth-child(even) .chapter-copy { order: 0; }
  .landing-stage { margin-top: 28px; aspect-ratio: 4 / 3; min-height: 0; }
  .hud { padding: 16px 18px; }
  .hud-bl { max-width: 100%; right: 0; }
  .hud-br { display: none; }
}

@media (max-width: 520px) {
  .hud-tl > span:nth-child(2), .hud-tr > span:first-child { display: none; }
  .hud { gap: 8px; }
  .landing-ctas .btn { flex: 1 1 auto; }
  .hud-bl { left: 12px; right: 12px; bottom: 12px; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--scene-bg) 85%, transparent); }
  .landing-price { grid-template-columns: minmax(0, 1fr); grid-template-areas: "n" "title" "value" "body"; }
  .landing-stage { aspect-ratio: 1 / 1; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); border-radius: 0; border-left: 0; border-right: 0; }
  .hud-tr .hud-dim { display: none; }
}

/* -------------------------------------------------------------- Workspace */

.workspace {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 36px);
  align-items: start;
}
.side-pane {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 112px);
  max-height: calc(100dvh - 112px);
  scrollbar-width: thin;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: -4px;
  padding: 4px;
}
.main-pane { min-width: 0; display: grid; gap: 16px; }
.back-link {
  display: none;
  align-items: center;
  gap: 4px;
  width: fit-content;
  min-height: 36px;
  margin-left: -6px;
  padding: 0 10px 0 4px;
  border-radius: 8px;
  color: var(--text-2);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
}
.back-link:hover { background: var(--surface-2); color: var(--text); }

.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.pane-head h2 { font-size: 0.71875rem; font-family: var(--mono); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.pane-title { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); line-height: 1.08; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.pane-title:focus { outline: none; }
.pane-intro { display: grid; gap: 6px; margin-bottom: 18px; }

/* ------------------------------------------------------------------- Jobs */

.jobs-panel { display: grid; gap: 12px; }
.jobs-panel .pane-head { margin-bottom: 0; }
.jobs-panel .btn[aria-current="page"] { box-shadow: var(--highlight), 0 8px 20px -10px var(--accent-glow); }
.job-list { display: grid; gap: 8px; }
.job-item {
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--highlight);
  transition: border-color var(--dur-1) ease, background-color var(--dur-1) ease, transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  animation: enter var(--dur-3) var(--ease-out) both;
}
.job-item:nth-child(2) { animation-delay: 40ms; }
.job-item:nth-child(3) { animation-delay: 80ms; }
.job-item:nth-child(4) { animation-delay: 120ms; }
.job-item:nth-child(5) { animation-delay: 160ms; }
.job-item:nth-child(n+6) { animation-delay: 200ms; }
.job-item::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform var(--dur-2) var(--ease-out);
}
.job-item:hover { border-color: var(--border-strong); transform: translateX(2px); box-shadow: var(--highlight), var(--shadow-1); }
.job-item.is-selected { border-color: var(--accent-text); background: var(--accent-soft); }
.job-item.is-selected::before { transform: none; }
.job-link {
  display: grid;
  gap: 5px;
  flex: 1;
  min-width: 0;
  padding: 11px 6px 11px 14px;
  border-radius: var(--radius) 0 0 var(--radius);
  color: inherit;
  text-decoration: none;
}
.job-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.job-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; letter-spacing: -0.01em; }
.job-badge { display: inline-flex; flex: none; }
.job-meta { color: var(--text-3); font-size: 0.8125rem; line-height: 1.4; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.job-link .progress { margin-top: 3px; height: 4px; }
.job-action { align-self: center; margin: 0 8px 0 2px; }
.job-skeletons { display: grid; gap: 8px; }
.job-skeleton { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.jobs-state:empty { display: none; }
.jobs-state .empty { border: 1px dashed var(--border); border-radius: var(--radius); }

/* -------------------------------------------------------- New reconstruction */

.new-panel { padding: clamp(20px, 2.8vw, 36px); }
.new-health:not(:empty) { margin-bottom: 16px; }
.new-form { display: grid; gap: 16px; }
.form-fields { display: grid; gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0; }
.form-fields:disabled { opacity: 0.6; }
.form-error:empty { display: none; }

.dropzone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: clamp(36px, 6vw, 64px) 20px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-large);
  --grid-line: color-mix(in srgb, var(--scene-grid) 60%, transparent);
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) -1px -1px / 32px 32px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) -1px -1px / 32px 32px,
    var(--surface-2);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: background-color var(--dur-2) ease, border-color var(--dur-2) ease, transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.dropzone::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, var(--surface-2) 35%, transparent 100%);
  pointer-events: none;
}
.dropzone > * { position: relative; }
.dropzone:hover { border-color: var(--accent-text); }
.dropzone:hover .drop-icon { transform: translateY(-4px); color: var(--accent-text); }
.dropzone.is-over { border-color: var(--accent-text); border-style: solid; background-color: var(--accent-soft); transform: scale(1.01); box-shadow: 0 0 0 6px var(--accent-glow); }
.dropzone.is-over::before { background: radial-gradient(circle at 50% 40%, var(--accent-soft) 20%, transparent 75%); }
.dropzone.is-over .drop-icon { transform: translateY(-6px) scale(1.12); color: var(--accent-text); }
.drop-icon { color: var(--text-3); width: 44px; height: 44px; transition: transform var(--dur-3) var(--ease-spring), color var(--dur-2) ease; }
.drop-title { font-family: var(--font-display); font-weight: 680; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); letter-spacing: -0.025em; }
.drop-or { color: var(--text-3); font-size: 0.8125rem; }
.dropzone .btn { margin: 2px 0 6px; }

.file-card {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 18px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.file-preview {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-small);
  background: var(--stage-bg);
  overflow: hidden;
}
.file-video { width: 100%; height: 100%; object-fit: contain; }
.file-noprev {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 16px;
  color: #c3cad4;
  text-align: center;
  font-size: 0.8125rem;
}
.file-info { display: grid; gap: 6px; align-content: start; min-width: 0; }
.file-label { color: var(--text-3); font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; }
.file-name { font-weight: 650; overflow-wrap: anywhere; }
.file-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 4px 0 8px; }
.file-meta dt { color: var(--text-3); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; }
.file-meta dd { font-size: 0.875rem; font-variant-numeric: tabular-nums; min-width: 4ch; }
.file-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.advanced { border: 1px solid var(--border); border-radius: var(--radius); transition: border-color var(--dur-1) ease; }
.advanced:hover { border-color: var(--border-strong); }
.advanced > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  min-height: 46px;
  padding: 8px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  list-style: none;
}
.advanced > summary::-webkit-details-marker { display: none; }
.advanced-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.advanced-title .icon { transition: transform var(--dur-2) var(--ease-out); transform: rotate(-90deg); }
.advanced[open] > .options-grid { animation: enter var(--dur-2) var(--ease-out); }
.advanced[open] .advanced-title .icon { transform: none; }
.advanced[open] > summary { border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.options-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; padding: 16px 14px 6px; }
.advanced > .btn { margin: 6px 8px 10px; }
/* Numeric processing options stay compact; other forms (sign-in, account, console) use the full field width. */
.options-grid .field .input { max-width: 160px; }

.consent { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.consent .field-error:not(:empty) { margin-left: 28px; }

.submit-row { display: flex; align-items: center; gap: 12px; }
.upload-progress { display: flex; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.upload-main { flex: 1; min-width: 0; display: grid; gap: 8px; }
.upload-text { font-size: 0.875rem; color: var(--text-2); font-variant-numeric: tabular-nums; min-height: 1.5em; }

/* ------------------------------------------------------------- Job detail */

.detail { display: grid; gap: 16px; min-width: 0; }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; }
.detail-heading { min-width: 0; display: grid; gap: 4px; }
.detail-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; }
.detail-title { min-width: 0; }
.detail-meta { color: var(--text-2); font-size: 0.875rem; }
.detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.detail-skeleton { display: grid; gap: 14px; }

.status-card { display: grid; gap: 14px; }
.status-top { display: flex; align-items: flex-start; gap: 14px; }
.status-top h2 { font-size: 1.125rem; }
.status-queue { color: var(--text-2); margin-top: 2px; }
.status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.status-icon-queued, .status-icon-cancelled { background: var(--neutral-soft); color: var(--text-2); }
.status-icon-running { background: var(--accent-soft); color: var(--accent-text); }
.status-icon-failed { background: var(--danger-soft); color: var(--danger-text); }
.status-offline:empty { display: none; }
.status-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.steps { display: grid; gap: 2px; }
.step { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 6px 0; color: var(--text-3); }
.step-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--control-border);
  background: var(--surface);
}
.step-label { font-weight: 550; }
.step-detail { color: var(--text-2); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.step[data-state="done"] { color: var(--text-2); }
.step[data-state="done"] .step-mark { border-color: var(--success-text); background: var(--success-text); color: var(--surface); }
.step[data-state="done"] .step-mark .icon { stroke-width: 3; }
.step[data-state="pending"] .step-mark { border-style: dashed; }
.step[data-state="current"] { color: var(--text); }
.step[data-state="current"] .step-mark { border-color: var(--accent-text); border-right-color: transparent; animation: spin 0.9s linear infinite; }

.technical > summary { cursor: pointer; color: var(--text-2); font-size: 0.875rem; font-weight: 550; width: fit-content; border-radius: 4px; padding: 4px 6px 4px 0; }
.technical pre {
  margin: 8px 0 0;
  padding: 12px;
  max-height: 240px;
  overflow: auto;
  border-radius: var(--radius-small);
  background: var(--surface-2);
  color: var(--text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ----------------------------------------------------------------- Viewer */

.viewer { display: grid; gap: 16px; min-width: 0; container-type: inline-size; container-name: viewer; }
.viewer-message:empty { display: none; }
.viewer-stages { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

.stage-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.stage-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.stage-head h3 { font-size: 0.9375rem; white-space: nowrap; }
.stage-status { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: var(--text-3); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.stage-tools { display: flex; align-items: center; gap: 6px; }
.stage-note, .stage-help { color: var(--text-3); font-size: 0.8125rem; line-height: 1.45; }

.stage {
  position: relative;
  width: 100%;
  min-height: 160px;
  max-height: min(66vh, 640px);
  border-radius: var(--radius-small);
  background: var(--stage-bg);
  overflow: hidden;
}
.video-stage { cursor: pointer; }
.scene-stage { background: var(--scene-bg); border: 1px solid var(--border); }
.stage-video, .stage-overlay, .stage-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-video { object-fit: contain; background: var(--stage-bg); }
.stage-overlay { pointer-events: none; }
.stage-scene { cursor: grab; touch-action: pan-y; }
.stage-scene.is-dragging { cursor: grabbing; }
.stage-scene:focus-visible { outline-offset: -2px; }
.stage.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(127, 140, 160, 0.16) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}
.stage-tip {
  position: absolute;
  z-index: 2;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(8, 10, 14, 0.88);
  color: #f2f4f7;
  font-size: 0.75rem;
  font-weight: 550;
  white-space: nowrap;
  pointer-events: none;
}
.scene-caption {
  position: absolute;
  left: 8px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--scene-bg);
  color: var(--scene-ink);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.scene-caption:empty { display: none; }

.viewer-controls { display: grid; gap: 14px; padding: 14px 16px; }
.transport {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "buttons timeline readout extra";
  align-items: center;
  gap: 8px 14px;
}
.transport-buttons { grid-area: buttons; display: flex; align-items: center; gap: 4px; }
.transport-extra { grid-area: extra; display: flex; align-items: center; gap: 6px; }
.readout {
  grid-area: readout;
  display: grid;
  justify-items: end;
  min-width: 13ch;
  color: var(--text-2);
  font-size: 0.75rem;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.readout-frame { color: var(--text); font-weight: 600; font-size: 0.8125rem; }

/* Sliders (timeline and confidence filter) share one look in every engine. The filled part of
   the track comes from --fill, which the scripts keep in step with the value. */
.timeline, .range {
  -webkit-appearance: none;
  appearance: none;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  --fill: 0%;
}
.timeline { grid-area: timeline; width: 100%; }
.timeline:disabled, .range:disabled { cursor: default; opacity: 0.5; }
.timeline::-webkit-slider-runnable-track, .range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--accent) var(--fill), var(--surface-3) var(--fill));
}
.timeline::-webkit-slider-thumb, .range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 1px 3px rgba(0, 0, 0, 0.3);
}
.timeline::-moz-range-track, .range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--surface-3); }
.timeline::-moz-range-progress, .range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--accent); }
.timeline::-moz-range-thumb, .range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.timeline:focus-visible, .range:focus-visible { outline: none; }
.timeline:focus-visible::-webkit-slider-thumb, .range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--focus); outline-offset: 2px; }
.timeline:focus-visible::-moz-range-thumb, .range:focus-visible::-moz-range-thumb { outline: 2px solid var(--focus); outline-offset: 2px; }

.display-options { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; padding-top: 12px; border-top: 1px solid var(--border); }
.range-field { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 0.875rem; font-weight: 500; }
.range-field .range { width: 140px; }
.range-value { min-width: 4ch; color: var(--text-2); font-variant-numeric: tabular-nums; }

.viewer-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.viewer-side { display: grid; gap: 16px; min-width: 0; }

.people-card { display: grid; gap: 10px; }
.people-card .card-head { margin-bottom: 0; }
.people-inframe { color: var(--text-2); font-size: 0.8125rem; margin-top: 2px; font-variant-numeric: tabular-nums; }
.people-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.people-count { color: var(--text-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.track-scroll {
  position: relative; /* contains the visually hidden labels inside the rows */
  max-height: 296px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
}
.track-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 10px;
  border-top: 1px solid var(--border);
  color: var(--text-2);
}
.track-row:first-child { border-top: 0; }
.track-row:hover, .track-row:focus-within { background: var(--surface-2); }
.track-label { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 36px; cursor: pointer; }
.swatch { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--swatch-light); }
:root[data-theme="dark"] .swatch { background: var(--swatch-dark); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .swatch { background: var(--swatch-dark); }
}
.track-name { font-size: 0.875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.track-present { display: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-text); }
.track-row.is-present { color: var(--text); }
.track-row.is-present .track-name { font-weight: 650; }
.track-row.is-present .track-present { display: inline-block; }
.track-frames { font-size: 0.8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.track-only { font-size: 0.8125rem; min-height: 28px; padding: 0 4px; }

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px 12px; }
.stats-options { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.stat dt { color: var(--text-2); font-size: 0.75rem; line-height: 1.3; }
.stat dd { margin-top: 2px; font-size: 1.125rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.stats-options .stat dd { font-size: 0.9375rem; }

@container viewer (min-width: 880px) {
  .viewer-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container viewer (min-width: 760px) {
  .viewer-panels { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
@container viewer (max-width: 640px) {
  .transport {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "readout readout" "timeline timeline" "buttons extra";
  }
  .readout { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
  .transport-extra { justify-self: end; }
  .stage-tools .btn-text { display: none; }
  .stage-tools .btn-small { padding: 0 8px; }
}

/* ----------------------------------------------------------------- Dialog */

.dialog {
  width: calc(100vw - 32px);
  max-width: 460px;
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-large);
  background: transparent;
  color: var(--text);
  overflow: visible;
}
.dialog-wide { max-width: 580px; }
.dialog::backdrop { background: var(--backdrop); -webkit-backdrop-filter: blur(6px) saturate(1.2); backdrop-filter: blur(6px) saturate(1.2); }
.dialog[open] { animation: dialog-in 0.42s var(--ease-out); }
.dialog[open]::backdrop { animation: fade 0.3s ease; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(16px) scale(0.97); } }
.dialog-panel {
  display: grid;
  gap: 14px;
  max-height: calc(100dvh - 32px);
  padding: clamp(20px, 2.4vw, 28px);
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  background: var(--surface);
  box-shadow: var(--highlight), var(--shadow-3);
}
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dialog-title { font-size: 1.3125rem; letter-spacing: -0.03em; padding-top: 4px; }
.dialog-close { margin: -4px -6px 0 0; }
.dialog-body { display: grid; gap: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.dialog-body strong { color: var(--text); }
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* ------------------------------------------------------------------ Toasts */

.toast-region {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: grid;
  gap: 8px;
  width: min(400px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 10px 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-2);
  pointer-events: auto;
  box-shadow: var(--highlight), var(--shadow-3);
  animation: toast-in 0.5s var(--ease-spring);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } }
.toast-leaving { opacity: 0; transform: translateX(12px); transition: opacity 0.2s ease, transform 0.2s var(--ease-out); }
.toast-icon { display: inline-flex; margin-top: 1px; }
.toast-info .toast-icon { color: var(--accent-text); }
.toast-success .toast-icon { color: var(--success-text); }
.toast-error .toast-icon { color: var(--danger-text); }
.toast-error { border-color: color-mix(in srgb, var(--danger-text) 35%, var(--border)); box-shadow: inset 3px 0 0 var(--danger-text), var(--highlight), var(--shadow-3); }
.toast-message { flex: 1; min-width: 0; font-size: 0.875rem; overflow-wrap: anywhere; }
.toast-action { flex: none; margin: -4px 0; border-color: var(--control-border); }
.toast-close { flex: none; width: 28px; height: 28px; margin: -4px 0; }

/* -------------------------------------------------------------- Responsive */

@media (max-width: 1100px) {
  .file-card { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 899px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .side-pane { position: static; max-height: none; overflow: visible; margin: 0; padding: 0; }
  .workspace[data-view="home"] .main-pane { display: none; }
  .workspace[data-view="new"] .side-pane,
  .workspace[data-view="job"] .side-pane { display: none; }
  .back-link { display: inline-flex; }
  .auth { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 8px; }
  .auth-card { order: -1; }
}

@media (max-width: 640px) {
  .app-header-inner { padding: 0 16px; gap: 8px; }
  .app-main { padding: 16px 16px 32px; }
  .app-footer-inner { padding: 12px 16px; }
  .health-text-long { display: none; }
  .health-text-short { display: inline; }
  .health-pill { padding: 0 10px 0 9px; }
  .key-chip { display: none; }
  .account .btn-text { display: none; }
  .account .btn { padding: 0; width: 36px; }
  .card { padding: 16px; }
  .new-panel { padding: 16px; }
  .auth-card { padding: 20px; }
  .options-grid { grid-template-columns: minmax(0, 1fr); }
  .options-grid .field .input { max-width: none; }
  .upload-progress { flex-direction: column; align-items: stretch; }
  .detail-actions { width: 100%; }
  .detail-actions .btn-primary { flex: 1; }
  .pane-title { font-size: 1.25rem; }
  .stage-card { padding: 10px; }
  .toast-region { right: 16px; bottom: 16px; }
  .dialog-actions .btn { flex: 1; }
  .range-field { width: 100%; }
  .range-field .range { flex: 1; width: auto; }
}

/* Touch screens: every control is at least 40-44px tall. Kept after the component rules so
   it wins over their default sizes. */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn-small { min-height: 40px; padding: 0 12px; }
  .stage-tools .btn-small { min-width: 40px; }
  .icon-btn, .icon-btn-small { width: 44px; height: 44px; }
  .toast-close { width: 40px; height: 40px; }
  .select, .select-small, .health-pill, .footer-link, .brand { min-height: 40px; }
  .back-link { min-height: 44px; }
  .track-row, .track-label { min-height: 44px; }
  .track-only { min-height: 40px; min-width: 44px; }
  .input { min-height: 44px; }
  .checkbox { width: 22px; height: 22px; }
  .consent .field-error:not(:empty) { margin-left: 32px; }
}

@media (max-width: 640px) and (pointer: coarse) {
  .account .btn { width: 44px; }
}

/* ---------------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .badge-spinner, .spinner, .step[data-state="current"] .step-mark { animation: none !important; border-right-color: currentColor; }
  .step[data-state="current"] .step-mark { border-color: var(--accent-text); background: var(--accent-soft); }
  .progress-indeterminate .progress-fill { animation: none !important; width: 100%; opacity: 0.45; }
  .skel, .stage.is-loading::after { animation: none !important; }
  .landing-accent, .progress-fill::after { animation: none !important; }
}

/* Theme switch: the new theme grows as a circle from the toggle (see initThemeToggle). */
.is-theme-transition::view-transition-old(root),
.is-theme-transition::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.is-theme-transition::view-transition-new(root) { animation: theme-reveal 0.62s var(--ease-in-out); }
@keyframes theme-reveal {
  from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); }
  to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 0)); }
}

@media (forced-colors: active) {
  .progress-fill { background: Highlight; }
  .health-dot, .swatch, .step-mark { forced-color-adjust: none; }
  .switch-track { border: 1px solid ButtonText; }
}

/* ===== Shell: navigation, menus, sign-in, consent, legal reader, shared kit ===== */

/* --------------------------------------------------------------- Header */

.brand-logo { display: block; width: 30px; height: 30px; border-radius: 8px; }
.app-header-inner { gap: 10px; }
.site-nav { display: flex; align-items: center; gap: 2px; margin-left: 10px; margin-right: auto; }
.site-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  color: var(--text-2);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}
.site-nav-link .icon { opacity: 0.7; transition: opacity var(--dur-1) ease, transform var(--dur-2) var(--ease-out); }
.site-nav-link:hover { background: var(--surface-2); color: var(--text); }
.site-nav-link:hover .icon { opacity: 1; transform: translateY(-1px); }
.site-nav-link[aria-current="page"] { background: var(--text); color: var(--bg); }
.site-nav-link[aria-current="page"] .icon { opacity: 1; }
.nav-toggle { display: none; }

.menu-anchor { position: relative; display: flex; }
.menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  display: grid;
  gap: 2px;
  min-width: 180px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-3);
  transform-origin: top left;
  animation: menu-in var(--dur-2) var(--ease-out);
}
.menu-panel-right { transform-origin: top right; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(0.97); } }
.menu-panel-right { left: auto; right: 0; min-width: 220px; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-1) ease, padding var(--dur-2) var(--ease-out);
}
.menu-item:hover { background: var(--surface-2); padding-left: 13px; }
.menu-item[aria-pressed="true"] { font-weight: 650; }
.menu-item .icon-check { margin-left: auto; color: var(--accent-text); }
.menu-item-danger { color: var(--danger-text); }
.menu-item-danger:hover { background: var(--danger-soft); }
.menu-summary { display: grid; gap: 2px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.menu-summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-summary span { color: var(--text-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

.lang-button { gap: 6px; padding: 0 8px; }
.account-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  max-width: 220px;
  padding: 2px 8px 2px 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.account-button:hover { background: var(--surface-2); border-color: var(--border-strong); }
.account-button .icon-chevron-down { transition: transform var(--dur-2) var(--ease-out); }
.account-button[aria-expanded="true"] .icon-chevron-down { transform: rotate(180deg); }
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #8a3ffc);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
}
.account-copy { display: grid; min-width: 0; text-align: left; line-height: 1.2; }
.account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8125rem; font-weight: 650; }
.account-balance { color: var(--text-2); font-size: 0.6875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --------------------------------------------------------------- Footer */

.footer-brand { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; }
.footer-icp { display: inline-flex; flex-wrap: wrap; gap: 2px 6px; }

/* -------------------------------------------------------------- Sign in */

.auth-form { display: grid; gap: 14px; }
.auth-form .btn { margin-top: 4px; }
.auth-reason { color: var(--text-2); }
.auth-rules { display: grid; gap: 4px; color: var(--text-2); font-size: 0.8125rem; }
.auth-rules li { display: flex; align-items: center; gap: 8px; }
.auth-rules li .icon { color: var(--text-3); }
.auth-rules li.is-met { color: var(--success-text); }
.auth-rules li.is-met .icon { color: var(--success-text); }
.auth-tabs { width: 100%; }
.auth-tabs button { flex: 1; }

/* ------------------------------------------------------------------ Kit */

.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); gap: 2px; }
.seg button {
  position: relative;
  z-index: 1;
  min-height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--dur-1) ease, background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(17, 18, 20, 0.1), 0 2px 8px -2px rgba(17, 18, 20, 0.1); }
/* Two-option switches slide one thumb between the options instead of swapping backgrounds. */
.auth-tabs { position: relative; }
.auth-tabs::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(17, 18, 20, 0.1), 0 2px 8px -2px rgba(17, 18, 20, 0.12);
  transition: transform var(--dur-3) var(--ease-out);
}
.auth-tabs:has(button:last-child[aria-pressed="true"])::before { transform: translateX(calc(100% + 2px)); }
.auth-tabs button[aria-pressed="true"] { background: transparent; box-shadow: none; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}
.tag-neutral { background: var(--neutral-soft); color: var(--text-2); }
.tag-info { background: var(--accent-soft); color: var(--accent-text); }
.tag-success { background: var(--success-soft); color: var(--success-text); }
.tag-warning { background: var(--warning-soft); color: var(--warning-text); }
.tag-danger { background: var(--danger-soft); color: var(--danger-text); }

.table-wrap { position: relative; width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-small); }
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th, .table td { padding: 9px 12px; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
.table thead th { border-top: 0; background: var(--surface-2); color: var(--text-3); font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.table tbody tr { transition: background-color var(--dur-1) ease; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table tbody tr:hover { background: var(--surface-2); }

.pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; }
.pager-range { color: var(--text-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.pager-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.pager-gap { padding: 0 4px; color: var(--text-3); }
.pager .btn-small { min-width: 30px; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 16px; }
.page-head h1 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); letter-spacing: -0.04em; line-height: 1.05; }
.page-grid { display: grid; gap: 16px; min-width: 0; }
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.skeleton { display: grid; gap: 10px; }

/* -------------------------------------------------------------- Consent */

.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-large);
  background: var(--surface);
  box-shadow: var(--shadow-3);
  animation: enter var(--dur-3) var(--ease-out) 0.6s both;
}
.cookie-banner-copy { flex: 1 1 320px; display: grid; gap: 4px; min-width: 0; }
.cookie-banner-copy h2 { font-size: 1rem; }
.cookie-banner-copy p { color: var(--text-2); font-size: 0.875rem; }
.cookie-banner-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body.has-cookie-banner .toast-region { bottom: 150px; }
body.has-cookie-banner .app-footer { padding-bottom: 120px; }

.cookie-categories { display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-small); }
.cookie-category { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-top: 1px solid var(--border); }
.cookie-category:first-child { border-top: 0; }
.cookie-category-copy { display: grid; gap: 2px; min-width: 0; }
.cookie-category-copy strong { color: var(--text); }
.cookie-category-copy p { font-size: 0.8125rem; }

/* --------------------------------------------------------- Legal reader */

.dialog-reader { max-width: 820px; }
.dialog-reader .dialog-panel { grid-template-rows: auto minmax(0, 1fr) auto; height: min(820px, calc(100dvh - 32px)); overflow: hidden; }
.dialog-reader .dialog-body { min-height: 0; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.legal-view { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; min-height: 0; }
.legal-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.legal-body { min-height: 120px; overflow-y: auto; padding-right: 6px; color: var(--text); }
.legal-feedback { display: flex; align-items: center; gap: 10px; }
.legal-status:empty { display: none; }
.legal-status { color: var(--text-2); font-size: 0.875rem; }
.legal-copy { display: grid; gap: 12px; max-width: 72ch; line-height: 1.65; overflow-wrap: anywhere; }
.legal-copy h4 { margin-top: 10px; font-size: 1rem; scroll-margin-top: 8px; }
.legal-copy h4:focus { outline: none; }
.legal-title { font-size: 1.25rem; }
.legal-meta { color: var(--text-2); font-size: 0.8125rem; }
.legal-draft { width: fit-content; padding: 3px 10px; border-radius: 999px; background: var(--warning-soft); color: var(--warning-text); font-weight: 650; }
.legal-note { color: var(--text-3); font-size: 0.8125rem; }
.legal-clause { color: var(--text); }
.legal-contents { border: 1px solid var(--border); border-radius: var(--radius-small); padding: 8px 12px; }
.legal-contents summary { cursor: pointer; font-weight: 600; }
.legal-contents nav { display: grid; gap: 6px; justify-items: start; padding: 8px 0 4px; }
.legal-table td, .legal-table th { font-size: 0.8125rem; }
.legal-page { display: grid; gap: 16px; max-width: 900px; margin: 0 auto; }
.legal-page .legal-body { overflow: visible; }

/* ----------------------------------------------------------- Responsive */

@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; margin-left: -6px; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 35;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 8px 12px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-2);
  }
  .site-nav.is-open { display: flex; }
  .site-nav-link { min-height: 44px; }
  .app-header { position: sticky; }
  .app-header-inner { position: relative; }
  .header-tools { margin-left: auto; }
}

@media (max-width: 640px) {
  .app-header-inner { gap: 6px; }
  .header-tools { gap: 2px; }
  /* On phones the service status is a dot; its full text is the button's accessible name. */
  .health-pill .health-text { display: none; }
  .health-pill { justify-content: center; width: 32px; padding: 0; }
  .brand { gap: 8px; min-width: 0; }
  .account-copy, .account-button .icon-chevron-down { display: none; }
  .account-button { padding: 3px; border-color: transparent; background: transparent; }
  .lang-button .lang-label { display: none; }
  .lang-button { width: 36px; padding: 0; }
  .brand-name { font-size: 1rem; }
  .menu-panel:not(.menu-panel-right) { left: auto; right: 0; }
  .cookie-banner { left: 8px; right: 8px; bottom: 8px; padding: 14px; }
  .cookie-banner-actions { width: 100%; }
  .cookie-banner-actions .btn { flex: 1 1 auto; }
  body.has-cookie-banner .toast-region { bottom: 250px; }
  body.has-cookie-banner .app-footer { padding-bottom: 230px; }
  .table th, .table td { padding: 8px 10px; }
  .pager { justify-content: center; }
  .legal-toolbar { justify-content: flex-start; }
}

@media (pointer: coarse) {
  .seg button, .menu-item { min-height: 40px; }
  .site-nav-link { min-height: 44px; }
  .lang-button { min-width: 44px; }
  .account-button { min-height: 44px; }
}

/* ===== Workspace additions: price line, cost estimate, agreement notice ===== */

.new-price { color: var(--text-2); font-size: 0.875rem; max-width: 70ch; }
.new-price:empty { display: none; }

.quote { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.quote-body { display: grid; gap: 4px; }
.quote-title { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.quote-amount { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.quote-amount span { color: var(--text-2); font-size: 0.9375rem; }
.quote-line { color: var(--text-2); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.quote .hint { margin-top: 2px; }

.consent { display: grid; gap: 8px; }
.consent-notice:empty { display: none; }
.consent .check { font-weight: 500; line-height: 1.5; }
.file-meta { gap: 6px 20px; }

/* The cost reads as a phrase ("20 tokens charged"), so it takes two columns of the summary grid. */
.stat-wide { grid-column: span 2; }

/* ===== 60-docs: API reference page (/api/). Every selector starts with .docs ===== */

.docs {
  /* Heights of the sticky header and of the sticky section index. These are the kit's sizes;
     60-apidocs.js replaces both with measured values. */
  --docs-top: 57px;
  --docs-index-h: 53px;
  --docs-anchor: calc(var(--docs-top) + var(--docs-index-h) + 12px);
  max-width: 920px;
}

.docs-intro { max-width: 70ch; font-size: 1rem; line-height: 1.6; }
.docs-basics { margin-top: 20px; }

/* ------------------------------------------------------------ Section index */

.docs-index {
  position: sticky;
  top: var(--docs-top);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-top: 24px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.docs-index a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text-2);
  font-size: 0.875rem;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}
.docs-index a:hover { background: var(--surface-2); color: var(--text); }
/* The current section is marked by an outline as well as by colour. */
.docs-index a[aria-current] {
  border-color: var(--accent-text);
  background: var(--accent-soft);
  color: var(--accent-text);
}

/* ------------------------------------------------------- Groups and sections */

.docs-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 40px;
  scroll-margin-top: var(--docs-anchor);
}
.docs-index + .docs-group { margin-top: 24px; }
.docs-group-title { font-size: 1.1875rem; }
.docs-group-intro { max-width: 76ch; color: var(--text-2); line-height: 1.6; }

.docs-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  scroll-margin-top: var(--docs-anchor);
}
.docs-section > p { max-width: 78ch; color: var(--text-2); line-height: 1.6; }

.docs-endpoint,
.docs-heading { font-size: 1rem; }
.docs-endpoint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
.docs-endpoint code { min-width: 0; font-size: 0.9375rem; font-weight: 650; overflow-wrap: anywhere; }
.docs-method {
  flex: none;
  padding: 2px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font: 700 0.6875rem/1.6 var(--mono);
  letter-spacing: 0.04em;
}
.docs-sub { margin-top: 4px; font-size: 0.8125rem; font-weight: 650; letter-spacing: 0; }

/* --------------------------------------------------------------- Field lists */

.docs-fields {
  display: grid;
  grid-template-columns: fit-content(44%) minmax(0, 1fr);
  border-top: 1px solid var(--border);
}
.docs-fields > dt,
.docs-fields > dd { min-width: 0; padding: 9px 0; border-bottom: 1px solid var(--border); }
.docs-fields > dt { padding-right: 20px; font-weight: 600; line-height: 1.75; overflow-wrap: anywhere; }
.docs-fields > dd { color: var(--text-2); line-height: 1.6; overflow-wrap: break-word; }

.docs-fields code,
.docs .table code {
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------- Code blocks */

.docs-code {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--surface-2);
}
.docs-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
  padding: 4px 6px 4px 14px;
  border-bottom: 1px solid var(--border);
}
.docs-code-label { color: var(--text-2); font-size: 0.75rem; font-weight: 650; }

.docs pre {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  color: var(--text);
  font: 400 0.8125rem/1.65 var(--mono);
  white-space: pre;
  tab-size: 4;
  scroll-margin-top: var(--docs-anchor);
}
.docs pre code { font: inherit; }
/* The block clips its content, so the focus ring is drawn inside it. */
.docs pre:focus-visible { outline-offset: -2px; }

.docs-copy {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  scroll-margin-top: var(--docs-anchor);
}
.docs-copy:hover { background: var(--surface-3); }
.docs-copy[data-state="copied"] {
  border-color: var(--success-text);
  background: var(--success-soft);
  color: var(--success-text);
}

/* -------------------------------------------------------------------- Tables */

/* The kit draws .table-wrap > .table; these rules only add what the reference tables need. */
.docs .table-wrap { scroll-margin-top: var(--docs-anchor); }
.docs .table td { color: var(--text-2); line-height: 1.5; }
.docs .table .docs-status {
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.docs .table .docs-code-cell { white-space: nowrap; }

/* ---------------------------------------------------------------- Responsive */

@media (max-width: 640px) {
  /* The index stops being sticky and wraps in place, so it no longer adds to the anchor offset. */
  .docs { --docs-index-h: 0px; }
  .docs-index { position: static; margin-top: 20px; }
  .docs-group { margin-top: 32px; }
  .docs-index + .docs-group { margin-top: 20px; }
  .docs-group-title { font-size: 1.125rem; }
  .docs-section { padding: 16px; }
  .docs-fields { grid-template-columns: minmax(0, 1fr); }
  .docs-fields > dt { padding: 9px 0 0; border-bottom: 0; }
  .docs-fields > dd { padding-top: 4px; }
  .docs pre { padding: 10px 12px; font-size: 0.75rem; }
  /* Tighter cells, wrapping headers and codes that break at their underscores (<wbr>) let the
     tables fit a 360px screen; .table-wrap still scrolls sideways if a font runs wider. */
  .docs .table th,
  .docs .table td { padding: 8px 6px; }
  .docs .table thead th { white-space: normal; }
  .docs .table code { padding: 0; border: 0; background: none; font-size: 0.75rem; }
  .docs .table .docs-status { font-size: 0.75rem; }
  .docs .table .docs-code-cell { white-space: normal; }
}

@media (pointer: coarse) {
  .docs-index a,
  .docs-copy { min-height: 40px; }
}

@media (forced-colors: active) {
  .docs-index a[aria-current] {
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }
}

/* ===== 70-account: Account & Billing page (/account). Every selector starts with .acct ===== */

.acct { display: grid; gap: clamp(16px, 2vw, 24px); min-width: 0; max-width: 1160px; margin: 0 auto; }
.acct-head { align-items: center; margin-bottom: 0; }
.acct-heading { display: grid; gap: 10px; min-width: 0; }
.acct-refresh.is-busy .icon { animation: spin 0.9s linear infinite; }
.acct-status-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }

.acct-content { display: grid; gap: 16px; min-width: 0; }
.acct-columns { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
.acct-columns.is-single { grid-template-columns: minmax(0, 1fr); }
.acct-side { display: grid; gap: 16px; min-width: 0; }

.acct-card { min-width: 0; }
.acct-card .card-head { align-items: center; min-height: 30px; margin-bottom: 8px; }
.acct-card > .card-text { margin-bottom: 16px; font-size: 0.875rem; }
.acct-skeleton { display: grid; gap: 14px; }
.acct-skel-figure { width: 180px; height: 44px; }
.acct-skel-week { height: 104px; }
.acct-skel-block { height: 132px; }

/* Buttons that stay focusable while they cannot be used (see setSoftDisabled). */
.acct .btn[aria-disabled="true"],
.acct-checkout .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.acct .btn-primary[aria-disabled="true"]:hover { background: var(--accent); }
.acct .btn-secondary[aria-disabled="true"]:hover { background: var(--surface); }
.acct-checkout .btn-danger-text[aria-disabled="true"]:hover { background: transparent; }
.acct-btn-icon { display: inline-flex; }

/* ---------------------------------------------------------------- Balance */

.acct-balance-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.acct-balance-value { font-family: var(--font-display); font-size: clamp(2.75rem, 2rem + 2.4vw, 4rem); line-height: 1; font-weight: 740; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.acct-balance-unit { color: var(--text-2); }
.acct-stats { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.acct-stats dt { color: var(--text-3); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; }
.acct-note { margin-top: 16px; color: var(--text-2); font-size: 0.8125rem; line-height: 1.5; }

/* ---------------------------------------------------------------- Check-in */

/* The week is one row while a cell has room for its date; in a narrow card it wraps to four across. */
.acct-checkin-body { container-type: inline-size; container-name: acct-checkin; }
.acct-week { display: grid; grid-template-columns: repeat(var(--acct-days, 7), minmax(0, 1fr)); gap: 6px; }
@container acct-checkin (max-width: 380px) {
  .acct-week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.acct-day {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 10px 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.75rem;
  line-height: 1.2;
  text-align: center;
}
.acct-day-name { color: var(--text); font-weight: 650; }
.acct-day-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px dashed var(--control-border);
  border-radius: 50%;
}
.acct-day-amount { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.acct-day-amount.is-raise { color: var(--accent-text); font-weight: 750; }
.acct-day-mark .icon-acct-up { color: var(--accent-text); }
.acct-day-date { color: var(--text-3); font-size: 0.6875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Done and today are marked by shape (filled check, solid ring) as well as by color. */
.acct-day.is-done { border-color: transparent; background: var(--accent-soft); }
.acct-day.is-done .acct-day-mark { border: 0; background: var(--accent); color: var(--accent-contrast); }
.acct-day.is-done .acct-day-mark .icon { stroke-width: 3; }
.acct-day.is-today { border-color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-text); }
.acct-day.is-today:not(.is-done) .acct-day-mark { border-style: solid; border-color: var(--accent-text); }
.acct-checkin-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 16px; }
.acct-streak { color: var(--text-2); font-size: 0.875rem; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Top up */

.acct-topup { scroll-margin-top: 72px; }
.acct-form { display: grid; gap: 18px; }
.acct-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.acct-fieldset > legend { padding: 0; }
.acct-packages { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.acct-methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }

.acct-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.acct-option:hover { border-color: var(--accent-text); }
/* The checked radio button shows the choice; the frame and tint only reinforce it. */
.acct-option.is-selected { border-color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-text); }
.acct-option.is-unavailable { border-style: dashed; border-color: var(--border); background: var(--surface-2); color: var(--text-2); cursor: not-allowed; }
.acct-radio { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); cursor: inherit; }
.acct-option-body { display: grid; gap: 2px; min-width: 0; }
.acct-package-name { font-weight: 650; overflow-wrap: anywhere; }
.acct-package-price { font-size: 1.375rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.acct-package-tokens { color: var(--text-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.acct-package-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.acct-method { align-items: center; }
.acct-method .acct-radio { margin: 0; }
.acct-method-name { font-weight: 650; }
.acct-method-note { color: var(--text-2); font-size: 0.8125rem; }

/* Official WeChat Pay / Alipay marks on a light tile in both themes (brand artwork is drawn for white). */
.acct-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--mark, 36px); height: var(--mark, 36px); }
.acct-mark-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
/* WeChat Pay's lockup is cropped to its symbol by an #svgView fragment; fill keeps it full size (as pxform). */
img[src^="https://gtimg.wechatpay-global.com/pay_en/img/common/logo.svg"] { object-fit: fill; }
.acct-option.is-unavailable .acct-mark-logo { filter: grayscale(1); opacity: .55; }

.acct-custom-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.acct-custom-input { max-width: 220px; font-variant-numeric: tabular-nums; }
.acct-custom-price { color: var(--text-2); font-variant-numeric: tabular-nums; }
.acct-pay-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.acct-pay-summary { color: var(--text-2); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.acct-pay-error:not(:empty) { margin-top: -8px; }
.acct-spinner { flex: none; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.9s linear infinite; }

/* ----------------------------------------------------------- Pending order */

.acct-pending {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--warning-text);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.acct-pending > .icon { color: var(--warning-text); }
.acct-pending-copy { display: flex; align-items: baseline; flex: 1 1 240px; flex-wrap: wrap; gap: 2px 14px; min-width: 0; }
.acct-pending-detail, .acct-pending-time { color: var(--text-2); font-size: 0.875rem; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Tables */

/* Each table decides from the width of its own card whether it is a table or a list of blocks. */
.acct-history-host { container-type: inline-size; container-name: acct-history; }
.acct-paid-host { container-type: inline-size; container-name: acct-paid; }
.acct-table-wrap { position: relative; } /* contains the visually hidden text inside the rows */
.acct-table td { vertical-align: middle; }
/* A long status wraps inside its column instead of widening the table. */
.acct-table .tag { height: auto; min-height: 22px; padding-top: 4px; padding-bottom: 4px; border-radius: 11px; line-height: 1.2; white-space: normal; }
/* The item (or order) column takes the room that the fixed columns leave. */
.acct-history-table th:nth-child(1) { width: 20%; }
.acct-history-table th:nth-child(3) { width: 21%; }
.acct-history-table th:nth-child(4), .acct-history-table th:nth-child(5) { width: 11%; }
.acct-paid-table th:nth-child(2) { width: 19%; }
.acct-paid-table th:nth-child(3) { width: 9%; }
.acct-paid-table th:nth-child(4) { width: 12%; }
.acct-item-name { display: block; font-weight: 550; }
.acct-item-detail { display: block; color: var(--text-3); font-size: 0.75rem; overflow-wrap: anywhere; }
.acct-cell-time, .acct-cell-date { color: var(--text-2); font-variant-numeric: tabular-nums; }
.acct-cell-time { white-space: nowrap; }
.acct-cell-delta { font-weight: 650; }
.acct-cell-delta.is-plus { color: var(--success-text); }
.acct-order-id { display: block; min-width: 16ch; overflow-wrap: anywhere; }
.acct-no-action { color: var(--text-3); }
.acct-paid-error:empty { display: none; }
.acct-paid-error { margin-bottom: 12px; }

/* ---------------------------------------------------------------- Checkout */

.acct-checkout .dialog-body { gap: 14px; justify-items: center; text-align: center; }
.acct-co-provider { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 650; }
.acct-co-mark { display: inline-flex; }
.acct-co-summary { display: grid; gap: 2px; }
.acct-co-amount { font-size: 2rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.acct-co-tokens { font-variant-numeric: tabular-nums; }
.acct-co-media { display: grid; justify-items: center; width: 100%; }
.acct-co-media .notice { text-align: left; }
.acct-qr { display: block; width: 208px; height: 208px; border: 1px solid var(--border); border-radius: var(--radius-small); image-rendering: pixelated; }
.acct-co-hint { max-width: 38ch; color: var(--text); font-weight: 550; }
.acct-co-hint[data-mode="link"] { max-width: 42ch; color: var(--text-2); font-weight: 400; }
.acct-co-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radius-small);
  background: var(--surface-2);
  text-align: left;
}
.acct-co-status { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--text); font-weight: 550; }
.acct-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--text-3); }
.acct-dot-wait { background: var(--warning-text); animation: acct-pulse 1.6s ease-in-out infinite; }
.acct-dot-ok { background: var(--success-text); }
.acct-dot-err { background: var(--danger-text); }
@keyframes acct-pulse { 50% { opacity: 0.35; } }
.acct-co-expiry { font-size: 0.875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.acct-co-time { color: var(--text); font-weight: 650; }
.acct-checkout .field-error { width: 100%; margin-top: 0; text-align: left; }
.acct-co-note { max-width: 42ch; }
.acct-co-details { width: 100%; font-size: 0.8125rem; text-align: left; }
.acct-co-details > summary { width: fit-content; border-radius: 4px; color: var(--text-2); font-weight: 550; cursor: pointer; }
.acct-co-order { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; }
.acct-co-order-id { color: var(--text); overflow-wrap: anywhere; }

/* Refund confirmation */
.acct-reason-field { display: grid; }
.acct-reason-field .label { color: var(--text); }
.acct-reason { min-height: 84px; font-size: 0.9375rem; line-height: 1.45; resize: vertical; }

/* -------------------------------------------------------------- Responsive */

@media (max-width: 899px) {
  .acct-columns { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .acct-balance-value { font-size: 2.125rem; }
  .acct-packages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* In a narrow package card the price and the tokens use the full width, under the radio button. */
  .acct-package { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 8px; }
  .acct-package .acct-option-body { display: contents; }
  .acct-package .acct-radio { margin: 0; }
  .acct-package-price, .acct-package-tokens, .acct-package-tags { grid-column: 1 / -1; }
  .acct-methods { grid-template-columns: minmax(0, 1fr); }
  .acct-custom-input { max-width: none; flex: 1 1 160px; }
  .acct-pay-row .btn { width: 100%; }
  .acct-pending .btn { width: 100%; }
  .acct-qr { width: 196px; height: 196px; }
}

/* Tables as blocks: one block per row. The header row stays available to screen readers, and the
   rows keep their ARIA table roles (set in the markup). */
@container acct-history (max-width: 560px) {
  .acct-history-host .acct-table-wrap { overflow: visible; border: 0; border-radius: 0; }
  .acct-history-table, .acct-history-table tbody { display: block; }
  .acct-history-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .acct-history-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 3px 12px; padding: 12px 0; border-top: 1px solid var(--border); }
  .acct-history-table tbody tr:first-child { padding-top: 0; border-top: 0; }
  .acct-history-table tbody tr:last-child { padding-bottom: 0; }
  .acct-history-table tbody tr:hover { background: transparent; }
  .acct-history-table td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; }
  .acct-history-table td.num { text-align: right; }
  .acct-history-table .acct-cell-item { grid-area: 1 / 1; }
  .acct-history-table .acct-cell-delta { grid-area: 1 / 2; }
  .acct-history-table .acct-cell-time { grid-area: 2 / 1; font-size: 0.8125rem; white-space: normal; }
  .acct-history-table .acct-cell-balance { grid-area: 2 / 2; color: var(--text-2); font-size: 0.8125rem; }
  .acct-history-table .acct-cell-status { grid-area: 3 / 1 / auto / span 2; margin-top: 4px; }
  /* The column name travels with the value that would be ambiguous on its own. */
  .acct-history-table .acct-cell-balance::before { content: attr(data-label) " "; }
}

@container acct-paid (max-width: 720px) {
  .acct-paid-host .acct-table-wrap { overflow: visible; border: 0; border-radius: 0; }
  .acct-paid-table, .acct-paid-table tbody { display: block; }
  .acct-paid-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .acct-paid-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 3px 12px; padding: 12px 0; border-top: 1px solid var(--border); }
  .acct-paid-table tbody tr:first-child { padding-top: 0; border-top: 0; }
  .acct-paid-table tbody tr:last-child { padding-bottom: 0; }
  .acct-paid-table tbody tr:hover { background: transparent; }
  .acct-paid-table td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; }
  .acct-paid-table td.num { text-align: right; }
  .acct-paid-table .acct-cell-order { grid-area: 1 / 1 / auto / span 2; }
  .acct-paid-table .acct-cell-date { grid-area: 2 / 1; font-size: 0.8125rem; }
  .acct-paid-table .acct-cell-paid { grid-area: 2 / 2; font-weight: 650; }
  .acct-paid-table .acct-cell-status { grid-area: 3 / 1; margin-top: 4px; }
  .acct-paid-table .acct-cell-unused { grid-area: 3 / 2; color: var(--text-2); font-size: 0.8125rem; }
  .acct-paid-table .acct-cell-action { grid-area: 4 / 1 / auto / span 2; margin-top: 8px; }
  .acct-paid-table .acct-cell-action.is-empty { margin-top: 0; }
  .acct-paid-table .acct-cell-action.is-empty [aria-hidden] { display: none; }
  .acct-paid-table .acct-order-id { min-width: 0; }
  .acct-paid-table .acct-cell-unused::before { content: attr(data-label) " "; }
}
@container acct-paid (max-width: 480px) {
  .acct-paid-table .acct-cell-action .btn { width: 100%; }
}

@media (pointer: coarse) {
  .acct-radio { width: 22px; height: 22px; }
  .acct-option { min-height: 48px; }
  .acct-co-details > summary { padding: 10px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .acct-dot-wait, .acct-spinner, .acct-refresh.is-busy .icon { animation: none !important; }
}

@media (forced-colors: active) {
  .acct-dot, .acct-day-mark { forced-color-adjust: none; }
  .acct-option.is-selected { outline: 2px solid Highlight; }
}

/* ===== Admin console (/admin): sign-in gate, section switcher, tiles, tables, charts, settings ===== */

/* ------------------------------------------------------------------- Gate */

.admin-gate { max-width: 440px; margin: 0 auto; padding: clamp(16px, 8vh, 88px) 0 24px; }
.admin-gate-head { display: flex; align-items: flex-start; gap: 12px; }
.admin-gate-head .auth-reason { margin-top: 4px; }
.admin-gate .field .input { max-width: none; }
.admin-gate-note:empty { display: none; }
.admin-unavailable { max-width: 560px; margin: clamp(16px, 8vh, 88px) auto 24px; }

/* ------------------------------------------------------------------ Frame */

/* Chart series: the accent and the amber of the kit. In the dark theme both are mixed toward the
   surface so two lines keep a similar weight on the dark card. */
.admin-console {
  display: grid;
  gap: 14px;
  min-width: 0;
  --admin-series-1: var(--accent);
  --admin-series-2: var(--warn-dot, var(--warning-text));
}
:root[data-theme="dark"] .admin-console {
  --admin-series-1: color-mix(in oklab, var(--accent) 75%, var(--surface));
  --admin-series-2: color-mix(in oklab, var(--warn-dot, var(--warning-text)) 75%, var(--surface));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .admin-console {
    --admin-series-1: color-mix(in oklab, var(--accent) 75%, var(--surface));
    --admin-series-2: color-mix(in oklab, var(--warn-dot, var(--warning-text)) 75%, var(--surface));
  }
}

.admin-head { align-items: center; margin-bottom: 0; }
.admin-updated { min-height: 1.45em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.admin-live-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--text-3); }
.admin-live[aria-pressed="true"] .admin-live-dot { border-color: var(--success-text); background: var(--success-text); }
.admin-refresh-error {
  padding: 6px 10px;
  border-left: 3px solid var(--warning-text);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.8125rem;
}
.admin-refresh-error:empty { display: none; }

.admin-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  scrollbar-width: thin;
}
.admin-tab {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 6px 6px 0 0;
  color: var(--text-2);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.admin-tab:hover { background: var(--surface-2); color: var(--text); }
.admin-tab[aria-current="page"] { color: var(--accent-text); box-shadow: inset 0 -2px 0 var(--accent-text); }
.admin-tab:focus-visible { outline-offset: -2px; }
.admin-picker { display: none; width: 100%; }

.admin-host { min-width: 0; }
.admin-host.is-loading .admin-data { opacity: 0.6; transition: opacity 0.15s ease 0.2s; }
.admin-loading { padding: 20px; }
.admin-failure:focus { outline: none; }

.admin-section { display: grid; gap: 16px; min-width: 0; }
.admin-section-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.admin-section-title { font-size: 1.125rem; scroll-margin-top: 76px; overflow-wrap: anywhere; }
.admin-section-title:focus { outline: none; }
.admin-card { display: grid; gap: 12px; min-width: 0; padding: 16px; }
.admin-card > .card-head { margin-bottom: 0; }
.admin-card-state { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.admin-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.admin-cols-settings { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.admin-col { display: grid; gap: 16px; min-width: 0; }
.admin-message:empty { display: none; }
.admin-period { margin-top: -8px; }

/* ------------------------------------------------------------------ Tiles */

.admin-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 12px; }
.admin-tile {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--highlight), var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-1) ease, box-shadow var(--dur-2) var(--ease-out);
}
.admin-tiles > .admin-tile:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--highlight), var(--shadow-2); }
.admin-card .admin-tile { border-color: transparent; background: var(--surface-2); box-shadow: none; }
.admin-tile-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; color: var(--text-3); font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.6; }
.admin-tile-value { margin-top: 4px; font-family: var(--font-display); font-size: clamp(1.375rem, 1.15rem + 0.45vw, 1.625rem); font-weight: 720; line-height: 1.1; letter-spacing: -0.04em; word-spacing: 0.14em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
:lang(zh) .admin-tile-label { letter-spacing: 0.04em; }
.admin-tile-note { min-height: 1.35em; color: var(--text-3); font-size: 0.75rem; line-height: 1.35; overflow-wrap: anywhere; }
.admin-status-stats { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.admin-facts .kv-row { padding: 6px 0; }

.admin-methods { display: grid; }
.admin-method { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.admin-method:first-child { padding-top: 0; border-top: 0; }
.admin-method:last-child { padding-bottom: 0; }
.admin-method-side { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ----------------------------------------------------------------- Tables */

.admin-data { min-width: 0; transition: opacity 0.15s ease; }
.admin-table-wrap:focus-visible { outline-offset: -2px; }
.admin-table .admin-col-toggle { width: 38px; padding-right: 0; }
.admin-table:not(.admin-table-stack) .admin-cell-main { white-space: nowrap; }
.admin-toggle .icon { transform: rotate(-90deg); transition: transform 0.14s ease; }
.admin-toggle[aria-expanded="true"] .icon { transform: none; }
.admin-table .admin-detail-row > td { padding: 12px 16px 16px 50px; background: var(--surface-2); }
.admin-table tbody .admin-detail-row:hover { background: transparent; }
.admin-value { min-width: 0; }
.admin-stacked { display: grid; gap: 3px; justify-items: start; min-width: 0; }
.admin-sub { color: var(--text-3); font-size: 0.75rem; line-height: 1.35; }
.admin-muted { color: var(--text-3); }
.admin-nowrap { white-space: nowrap; }
.admin-plus { color: var(--success-text); }
.admin-wrap { display: inline-block; max-width: 38ch; overflow-wrap: break-word; }
.admin-link { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.admin-link:hover { text-decoration-thickness: 2px; }
.admin-user-name { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.admin-error-text { display: flex; align-items: flex-start; gap: 6px; max-width: 44ch; color: var(--danger-text); font-size: 0.8125rem; line-height: 1.4; }
.admin-error-text .icon { margin-top: 2px; }
.admin-reason { max-width: 38ch; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.admin-mini { display: grid; gap: 1px; font-size: 0.8125rem; line-height: 1.45; }
.admin-mini > div { display: flex; gap: 8px; white-space: nowrap; }
.admin-mini dt { min-width: 5.2em; color: var(--text-3); }
.admin-mini dd { font-variant-numeric: tabular-nums; }
.admin-mini-2 { grid-template-columns: repeat(2, auto); justify-content: start; gap: 1px 16px; }

.admin-op-detail { display: grid; gap: 8px; max-width: 780px; }
.admin-op-detail-title { margin: 4px 0 0; color: var(--text-2); font-size: 0.75rem; font-weight: 650; }
.admin-kv .kv-row { grid-template-columns: minmax(96px, 200px) minmax(0, 1fr); padding: 5px 0; }

.admin-filters { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 12px; }
.admin-filter { display: grid; gap: 4px; min-width: 0; }
.admin-filter-label { color: var(--text-2); font-size: 0.75rem; font-weight: 650; }
.admin-filter .admin-filter-input { width: 200px; max-width: none; min-height: 32px; padding: 4px 10px; font-size: 0.8125rem; }
.admin-filter-actions { display: flex; gap: 6px; }
.admin-pager:empty { display: none; }
.admin-pager .pager { margin-top: 0; }

/* ----------------------------------------------------------------- Charts */

.admin-sparks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.admin-spark { display: grid; gap: 6px; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-small); }
.admin-spark-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.admin-spark-title { margin: 0; font-size: 0.8125rem; font-weight: 650; }
.admin-spark-peak { color: var(--text-3); font-size: 0.75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-spark-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 14px; min-height: 22px; color: var(--text-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.admin-spark-key { display: inline-flex; align-items: center; gap: 6px; }
.admin-spark-key strong { color: var(--text); font-weight: 650; }
.admin-spark-moment { margin-left: auto; color: var(--text-3); font-size: 0.75rem; }
.admin-swatch { flex: none; width: 12px; height: 2px; border-radius: 1px; }
.admin-swatch-1 { background: var(--admin-series-1); }
.admin-swatch-2 { background: var(--admin-series-2); }
.admin-spark-plot { position: relative; height: 72px; border-radius: 6px; cursor: crosshair; touch-action: pan-y; }
.admin-spark-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.admin-spark-rule { stroke: var(--border); stroke-width: 1; }
.admin-spark-cursor { stroke: var(--control-border); stroke-width: 1; }
.admin-spark-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.admin-spark-area { stroke: none; opacity: 0.1; }
.admin-spark-dot { stroke: var(--surface); stroke-width: 2; }
.admin-spark-line.admin-series-1 { stroke: var(--admin-series-1); }
.admin-spark-line.admin-series-2 { stroke: var(--admin-series-2); }
.admin-spark-area.admin-series-1, .admin-spark-dot.admin-series-1 { fill: var(--admin-series-1); }
.admin-spark-area.admin-series-2, .admin-spark-dot.admin-series-2 { fill: var(--admin-series-2); }
.admin-spark-scale {
  position: absolute;
  top: -3px;
  left: 0;
  padding-right: 4px;
  background: var(--surface);
  color: var(--text-3);
  font-size: 0.6875rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* ---------------------------------------------------------- User drill-down */

.admin-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  min-height: 32px;
  margin: -4px 0 -8px -6px;
  padding: 0 10px 0 4px;
  border-radius: 8px;
  color: var(--text-2);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.admin-back:hover { background: var(--surface-2); color: var(--text); }
.admin-user-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.admin-user-tags { display: inline-flex; gap: 6px; }
.admin-user-tags:empty { display: none; }
.admin-inline-links { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; }

.admin-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.admin-week-day {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  color: var(--text-2);
  font-size: 0.75rem;
  line-height: 1.3;
  text-align: center;
}
.admin-week-mark { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1.5px dashed var(--control-border); border-radius: 50%; }
.admin-week-tokens { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.admin-week-day.is-done { border-color: transparent; background: var(--success-soft); }
.admin-week-day.is-done .admin-week-mark { border: 0; background: var(--success-text); color: var(--surface); }
.admin-week-day.is-today { border-color: var(--accent-text); }

/* --------------------------------------------------------------- Settings */

.admin-settings-form { display: grid; gap: 16px; }
.admin-settings-groups { display: grid; gap: 14px; }
.admin-fieldset { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 12px 14px 14px; border: 1px solid var(--border); border-radius: var(--radius-small); }
.admin-fieldset > legend { padding: 0 6px; color: var(--text-2); font-size: 0.8125rem; font-weight: 650; }
.admin-setting { min-width: 0; }
.admin-amount-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.admin-setting .admin-amount { width: 132px; max-width: 132px; font-variant-numeric: tabular-nums; }
.admin-amount-unit { color: var(--text-2); font-size: 0.875rem; }
.admin-equivalent { color: var(--text-2); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.admin-setting-meta { margin-top: 4px; font-size: 0.75rem; }
.admin-setting-flag .help { margin-top: 0; }
.admin-setting-flag .help, .admin-setting-flag .admin-setting-meta { margin-left: 44px; }
.admin-settings-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.admin-server-said { margin-top: 4px; font-family: var(--mono); font-size: 0.8125rem; }
.admin-change { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-variant-numeric: tabular-nums; }
.admin-change-old, .admin-change-arrow { color: var(--text-2); }

/* ------------------------------------------------------------- Responsive */

@media (max-width: 899px) {
  .admin-cols, .admin-cols-settings { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .admin-tabs { display: none; }
  .admin-picker { display: block; min-height: 44px; font-size: 1rem; }
  .admin-card { padding: 14px; }
  .admin-filter { flex: 1 1 140px; }
  .admin-filter .admin-filter-input, .admin-filter .select { width: 100%; font-size: 1rem; }
  .admin-week { gap: 4px; }
  .admin-week-name { display: none; }
  .admin-setting-flag .help, .admin-setting-flag .admin-setting-meta { margin-left: 0; }

  /* Wide tables become one card per row: the column header moves in front of each value. */
  .admin-table-stack thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .admin-table-stack, .admin-table-stack tbody, .admin-table-stack tr, .admin-table-stack td { display: block; }
  .admin-table-stack tr { padding: 10px 12px; border-top: 1px solid var(--border); }
  .admin-table-stack tbody:first-of-type > tr:first-child { border-top: 0; }
  .admin-table-stack td { display: grid; grid-template-columns: minmax(88px, 36%) minmax(0, 1fr); justify-items: start; gap: 10px; padding: 3px 0; border: 0; }
  .admin-table-stack td.admin-cell-empty { display: none; }
  .admin-table-stack td::before { content: attr(data-label); color: var(--text-2); font-size: 0.75rem; font-weight: 650; line-height: 1.75; }
  .admin-table-stack td.num { text-align: left; white-space: normal; }
  .admin-table-stack td.admin-cell-main { display: block; padding-bottom: 6px; font-size: 0.9375rem; }
  .admin-table-stack td.admin-cell-main::before, .admin-table-stack td.admin-col-toggle::before { content: none; }
  .admin-table-stack td.admin-col-toggle { display: block; float: right; width: auto; margin: -6px -6px 0 8px; padding: 0; }
  .admin-table-stack tr.admin-detail-row { padding: 0; border-top: 0; }
  .admin-table-stack .admin-detail-row > td { display: block; padding: 10px 12px 14px; }
  .admin-table-stack .admin-detail-row > td::before { content: none; }
  .admin-table-stack .admin-wrap, .admin-table-stack .admin-reason, .admin-table-stack .admin-error-text { max-width: 100%; }
  .admin-table-stack .admin-mini > div { white-space: normal; }
  .admin-table-stack .admin-mini dt { flex: none; }
  .admin-table-stack .admin-mini-2 { grid-template-columns: minmax(0, 1fr); }
  .admin-kv .kv-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (pointer: coarse) {
  .admin-tab { min-height: 44px; }
  .admin-back { min-height: 44px; }
  .admin-filter .admin-filter-input { min-height: 40px; }
}

/* Links inside table cells get a 24 px tall target on touch screens and phones. */
@media (pointer: coarse), (max-width: 640px) {
  .admin-link { display: inline-block; padding-block: 4px; }
}

/* Chinese: CJK glyphs are already evenly spaced, so the tracked-out monospace labels keep tight spacing. */
:lang(zh) .landing-kicker, :lang(zh) .hud, :lang(zh) .pane-head h2, :lang(zh) .file-label, :lang(zh) .file-meta dt,
:lang(zh) .quote-title, :lang(zh) .acct-stats dt, :lang(zh) .table thead th, :lang(zh) .health-pill { letter-spacing: 0.04em; }

@media (max-width: 359px) {
  .brand-name { display: none; }
}
@media (max-width: 640px) and (pointer: coarse) {
  .health-pill { width: 40px; }
}

/* Below-the-fold landing content reveals as it scrolls into view where scroll-driven animations
   exist; elsewhere it keeps the timed entrance above. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .chapter-copy, .chapter-stage, .landing-price, .landing-final {
      animation: enter linear both;
      animation-delay: 0s;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    .chapter-stage { animation-range: entry 10% entry 70%; }
  }
}

/* ------------------------------------------------- Lab motif inside the app */

.dropzone::after {
  content: "";
  position: absolute;
  inset: 14px;
  color: var(--text-3);
  background: var(--brackets);
  opacity: 0.5;
  pointer-events: none;
  transition: inset var(--dur-3) var(--ease-out), color var(--dur-2) ease, opacity var(--dur-2) ease;
}
.dropzone:hover::after, .dropzone.is-over::after { inset: 10px; color: var(--accent-text); opacity: 0.9; }

.status-card { position: relative; }
.status-card-live { grid-template-columns: minmax(0, 1fr) clamp(180px, 22vw, 260px); column-gap: 24px; }
.status-card-live > :not(.status-stage) { grid-column: 1; }
.status-stage {
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: stretch;
  min-height: 200px;
  border-radius: var(--radius);
  background: var(--scene-bg);
  box-shadow: inset 0 0 0 1px var(--border);
  overflow: hidden;
}
.status-stage::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 1;
  color: var(--text-3);
  background: var(--brackets);
  opacity: 0.55;
  pointer-events: none;
}
@media (max-width: 640px) {
  .status-card-live { grid-template-columns: minmax(0, 1fr); }
  .status-stage { grid-column: 1; grid-row: auto; min-height: 0; aspect-ratio: 4 / 3; order: 9; }
}

/* The job's progress bar reads as a strip of frames. */
.status-card .progress {
  height: 12px;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--surface-3) 0 4px, transparent 4px 6px);
}
.status-card .progress-fill {
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 4px, transparent 4px 6px);
}
.status-card .progress-indeterminate .progress-fill { width: 30%; }

/* Fresh visitors: the storage notice is a compact card in the corner, not a bar over the stage. */
@media (min-width: 900px) {
  .cookie-banner { left: 24px; right: auto; bottom: 24px; max-width: 440px; margin: 0; flex-direction: column; align-items: stretch; gap: 14px; }
  .cookie-banner-copy { flex: none; }
  .cookie-banner-actions .btn { flex: 1 1 auto; }
  body.has-cookie-banner .app-footer { padding-bottom: 0; }
  body.has-cookie-banner .toast-region { bottom: 20px; }
}

@media (max-width: 380px) {
  .landing-kicker { letter-spacing: 0.08em; }
}

/* Phones: key/value lists stack the label over the value, so values keep the full width. */
@media (max-width: 520px) {
  .kv-row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; }
  .kv dt { color: var(--text-3); font-size: 0.8125rem; }
}

/* Admin tiles: a wrapped label must not push its value below the row's other values. */
.admin-tiles .admin-tile-label { min-height: 3.2em; align-items: flex-end; }
.admin-tile-note { text-wrap: balance; }

/* Phones: the storage notice keeps its full text but takes less height. */
@media (max-width: 899px) {
  .cookie-banner { gap: 10px; padding: 14px 16px; }
  .cookie-banner-copy p { font-size: 0.8125rem; line-height: 1.45; }
  .cookie-banner-actions { flex-wrap: nowrap; gap: 6px; }
  .cookie-banner-actions .btn { min-height: 40px; padding: 0 10px; font-size: 0.8125rem; }
}

@media (max-width: 420px) {
  .cookie-banner-actions { flex-wrap: wrap; }
  .cookie-banner-actions .btn:last-child { flex-basis: 100%; }
}

/* Dragging a file: the drop target is the only message; the secondary controls step back. */
.dropzone > .drop-or, .dropzone > .btn, .dropzone > :last-child { transition: opacity var(--dur-1) ease; }
.dropzone.is-over > .drop-or, .dropzone.is-over > .btn, .dropzone.is-over > :last-child { opacity: 0; }
.dropzone.is-over .drop-icon { transform: translateY(-6px) scale(1.15); }



/* ------------------------------------------------------- Real output */

.landing-real { display: grid; gap: clamp(24px, 3vw, 40px); padding: clamp(40px, 6vw, 88px) 0; border-top: 1px solid var(--border-strong); }
.real-head { display: grid; gap: 14px; max-width: 44rem; }
.real-host { min-width: 0; }
.real-host > .skel-block { height: clamp(280px, 40vw, 560px); }
.landing-real .download-card { display: none; }
.real-credit { color: var(--text-3); font-family: var(--mono); font-size: 0.75rem; line-height: 1.6; }
.real-credit .link { color: inherit; }
:lang(zh) .real-credit { font-family: var(--font); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .real-head { animation: enter linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}
/* The public sample shows the result itself; job summary and billing fields belong to real jobs. */
.landing-real .viewer-side { display: none; }
.landing-real .viewer-panels { grid-template-columns: minmax(0, 1fr); }

/* The landing shows the result, not the workbench: playback stays, the tuning controls, keyboard
   hint and per-track checklist do not; the two panels take the stage's viewfinder brackets. */
.landing-real .display-options, .landing-real .viewer-controls > .hint, .landing-real .people-card { display: none; }
.landing-real .viewer-controls { padding-block: 12px; }
/* Viewfinder brackets sit on the media frames themselves, clear of titles and captions; the
   difference blend keeps them visible over both the dark footage and the light 3D floor. */
.landing-real .stage::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 3;
  color: #ffffff;
  background: var(--brackets);
  mix-blend-mode: difference;
  opacity: 0.7;
  pointer-events: none;
}
.real-facts { color: var(--text-2); font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.real-facts:empty { display: none; }
:lang(zh) .real-facts { letter-spacing: 0; }
.landing-real .scene-caption { left: auto; right: 34px; bottom: 30px; }

/* Narrow phones (360px-class Android): the header's touch targets at 44px plus the wordmark are
   wider than the screen, so the status dot was squeezed into the wordmark. Below 400px the icon
   buttons use the 40px touch minimum used elsewhere, gaps tighten and nothing in the header shrinks. */
@media (max-width: 400px) {
  .app-header-inner { gap: 4px; }
  .brand { gap: 6px; }
  .brand-name { font-size: 0.9375rem; }
  .header-tools { gap: 0; }
  .header-tools > *, .health-pill, .nav-toggle { flex: none; }
}
@media (max-width: 400px) and (pointer: coarse) {
  .icon-btn, .nav-toggle, .lang-button { width: 40px; min-width: 40px; height: 40px; }
  .account-button { min-height: 40px; }
  .header-tools [data-action="sign-in"] { padding: 0 10px; }
}

/* Phones: footer links align with the footer name; the status button is drawn like the other
   header icon buttons (no chip fill or ring), keeping its 40px hit area. */
@media (max-width: 520px) {
  .footer-icp .footer-link, .footer-nav .footer-link { padding-left: 0; padding-right: 0; margin-right: 14px; }
}
@media (max-width: 640px) {
  .health-pill { border-color: transparent; background: transparent; }
  .health-pill:hover { background: var(--surface-2); border-color: transparent; }
}