/* 影片下載器 — "test signal" identity.
   One bold element: the 7-bar colour test pattern (brand mark, input underline,
   submit sweep). Everything else stays quiet: cool paper, ink, one blue. */

@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --paper: #f3f5f8;
  --surface: #ffffff;
  --sunken: #e9edf2;
  --ink: #1a1d23;
  --muted: #5d6573;
  --faint: #677080;
  --line: #d9dee6;
  --signal: #2433c9;
  --signal-ink: #ffffff;
  --signal-soft: #e6e9ff;
  --ok: #0d6b4c;
  --ok-soft: #e1f3eb;
  --bad: #c42b2b;
  --bad-soft: #fbe7e7;
  --bad-solid: #c42b2b;
  --warn: #7a5300;
  --warn-soft: #fff3d6;
  --bar-1: #c4c4c4;
  --bar-2: #d8c400;
  --bar-3: #00b4c2;
  --bar-4: #14a94a;
  --bar-5: #c126be;
  --bar-6: #d2232d;
  --bar-7: #2433c9;
  --shadow-float: 0 18px 50px -12px rgba(20, 28, 60, 0.35);
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 14px;
  --sans: system-ui, -apple-system, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Segoe UI", sans-serif;
  --display: "Barlow Condensed", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1116;
    --surface: #171a21;
    --sunken: #1f232c;
    --ink: #e7e9ee;
    --muted: #a0a7b4;
    --faint: #8f97a5;
    --line: #2a2f3a;
    --signal: #8c97ff;
    --signal-ink: #0f1116;
    --signal-soft: #22285a;
    --ok: #4fc897;
    --ok-soft: #12352a;
    --bad: #ff7a7a;
    --bad-soft: #3d1b1e;
    --bad-solid: #b3262f;
    --warn: #f0c35a;
    --warn-soft: #3a2f12;
    --shadow-float: 0 18px 50px -12px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.6 var(--sans);
  min-height: 100vh;
}
a { color: var(--signal); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
.num { font-family: var(--display); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.meta .num, .quota .num, .prog-line .num, td.num, td .num { font-size: 1.12em; line-height: 1; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }

/* ---------- test-signal bars ---------- */
.bars { display: flex; height: 100%; }
.bars i { flex: 1; }
.bars i:nth-child(1) { background: var(--bar-1); }
.bars i:nth-child(2) { background: var(--bar-2); }
.bars i:nth-child(3) { background: var(--bar-3); }
.bars i:nth-child(4) { background: var(--bar-4); }
.bars i:nth-child(5) { background: var(--bar-5); }
.bars i:nth-child(6) { background: var(--bar-6); }
.bars i:nth-child(7) { background: var(--bar-7); }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  max-width: 1120px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 20px; height: 58px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 650; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 26px; height: 18px; border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.brand-name { font-size: 16px; letter-spacing: 0.02em; }
.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav a {
  color: var(--muted); padding: 7px 12px; border-radius: 8px; font-size: 14.5px;
}
.nav a:hover { color: var(--ink); background: var(--sunken); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--ink); background: var(--sunken); font-weight: 600; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tier-chip {
  font-size: 12.5px; padding: 3px 10px; border-radius: 999px;
  background: var(--sunken); color: var(--muted); white-space: nowrap;
}
.tier-chip.admin { background: var(--signal-soft); color: var(--signal); }
a.tier-chip:hover { text-decoration: none; filter: brightness(0.97); }

/* ---------- layout ---------- */
main { max-width: 1120px; margin: 0 auto; padding: 28px 20px 96px; }
.narrow { max-width: 440px; margin: 40px auto; }
.page-title { font-size: 22px; font-weight: 650; margin: 0 0 4px; }
.page-sub { color: var(--muted); margin: 0 0 22px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 34px 0 10px; }
.section-head h2 { font-size: 16px; margin: 0; font-weight: 650; }
.section-head .aside { color: var(--muted); font-size: 13.5px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer; font-size: 14.5px; font-weight: 550;
  white-space: nowrap; text-decoration: none;
}
.btn:hover { border-color: var(--faint); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn.primary { background: var(--signal); color: var(--signal-ink); border-color: var(--signal); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--muted); }
.btn.quiet:hover { background: var(--sunken); color: var(--ink); }
.btn.danger { color: var(--bad); }
.btn.big { height: 52px; padding: 0 22px; font-size: 16px; border-radius: 10px; }
.btn.icon { width: 38px; padding: 0; }
.btn.block { width: 100%; }

/* ---------- capture (hero input) ---------- */
.capture { margin: 18px 0 8px; }
.capture h1 { font-size: clamp(26px, 4vw, 34px); line-height: 1.25; margin: 0 0 6px; font-weight: 700; letter-spacing: 0.01em; text-wrap: balance; }
.capture .lede { color: var(--muted); margin: 0 0 22px; max-width: 60ch; }
.capture-row { display: flex; gap: 10px; }
.url-field {
  position: relative; flex: 1; display: flex; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m) var(--r-m) 4px 4px;
  overflow: hidden;
}
.url-field input {
  flex: 1; min-width: 0; border: 0; background: transparent; height: 52px; padding: 0 14px 4px 16px;
  font-size: 16px; outline: none;
}
.url-field .signal-line { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; opacity: .55; transition: opacity .2s; }
.url-field:focus-within { border-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 22%, transparent); }
.url-field:focus-within .signal-line { opacity: 1; }
.url-field .btn.quiet { margin-right: 6px; height: 36px; }
.capture.sending .signal-line .bars { animation: sweep 0.9s ease-in-out 1; }
@keyframes sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .capture.sending .signal-line .bars { animation: none; } }

.presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 10px; border: 0; padding: 0; min-width: 0; }
.preset {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px;
  padding: 6px 14px; cursor: pointer; font-size: 14px; color: var(--ink);
}
.preset input { position: absolute; opacity: 0; pointer-events: none; }
.preset:has(input:checked:not([data-locked])) { border-color: var(--signal); background: var(--signal-soft); color: var(--signal); font-weight: 600; }
.preset:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }
.preset.locked { color: var(--faint); background: transparent; border-style: dashed; }
.preset svg { width: 14px; height: 14px; }
.quota { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--muted); font-size: 13.5px; }
.quota strong { color: var(--ink); font-weight: 600; }
.announce { background: var(--warn-soft); color: var(--warn); border-radius: var(--r-m); padding: 10px 14px; margin-bottom: 18px; font-size: 14px; }
.ts-box { margin-top: 12px; min-height: 0; }

/* ---------- job rows ---------- */
.jobs { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); }
.job {
  display: grid; grid-template-columns: 136px 1fr auto; gap: 16px; align-items: center;
  padding: 14px 16px; border-top: 1px solid var(--line);
}
.job:first-child { border-top: 0; }
.thumb {
  position: relative; width: 136px; aspect-ratio: 16 / 9; border-radius: var(--r-s); overflow: hidden;
  background: var(--sunken); display: grid; place-items: center; color: var(--faint);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb svg { width: 26px; height: 26px; }
.thumb .dur {
  position: absolute; right: 5px; bottom: 5px; background: rgba(10, 12, 18, .78); color: #fff;
  font-size: 13px; padding: 0 5px; border-radius: 4px; line-height: 19px;
}
.job-main { min-width: 0; }
.job-title {
  font-weight: 600; margin: 0 0 3px; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word;
}
.meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: 13px; }
.meta span { white-space: nowrap; }
.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.queued { color: var(--faint); }
.status.running { color: var(--signal); }
.status.done { color: var(--ok); }
.status.error { color: var(--bad); }
.status.canceled, .status.canceling { color: var(--faint); }
.status.expired, .status.deleted { color: var(--faint); }
.progress { margin-top: 9px; height: 6px; background: var(--sunken); border-radius: 3px; overflow: hidden; }
.progress > div {
  height: 100%; width: 0; background: var(--signal); border-radius: 3px; transition: width .6s ease;
  background-image: repeating-linear-gradient(90deg, transparent 0 10px, rgba(255,255,255,.28) 10px 12px);
}
.progress.indeterminate > div { width: 30% !important; animation: slide 1.4s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .progress.indeterminate > div { animation: none; width: 100% !important; opacity: .4; } }
.prog-line { display: flex; gap: 12px; margin-top: 5px; font-size: 12.5px; color: var(--muted); }
.error-box { margin-top: 8px; font-size: 13.5px; color: var(--bad); background: var(--bad-soft); border-radius: var(--r-s); padding: 7px 10px; }
.error-box .hint { color: var(--ink); opacity: .8; display: block; margin-top: 2px; }
.job-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

.empty { padding: 34px 20px; text-align: center; color: var(--muted); }
.empty .bars-mini { width: 64px; height: 10px; margin: 0 auto 14px; border-radius: 2px; overflow: hidden; opacity: .8; }

/* ---------- library grid ---------- */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.search { flex: 1; min-width: 200px; position: relative; }
.search input { width: 100%; height: 40px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); padding: 0 12px 0 36px; }
.search svg { position: absolute; left: 11px; top: 11px; width: 18px; height: 18px; color: var(--faint); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px 18px; }
.tile .thumb { width: 100%; border-radius: var(--r-m); cursor: pointer; }
.tile .thumb .play-ov { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; background: rgba(10,12,18,.35); transition: opacity .15s; color: #fff; }
.tile .thumb:hover .play-ov, .tile .thumb:focus-visible .play-ov { opacity: 1; }
.tile .thumb .play-ov svg { width: 40px; height: 40px; }
.tile h3 { font-size: 14.5px; font-weight: 600; margin: 9px 0 2px; line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.tile .row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; }

/* ---------- forms ---------- */
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; height: 42px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; background: var(--surface);
}
.field textarea { height: auto; padding: 10px 12px; min-height: 70px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--signal); outline-offset: 0; border-color: transparent; }
.check { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: var(--muted); margin: 6px 0 16px; }
.check input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--signal); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 22px; }
.panel + .panel { margin-top: 18px; }
.panel h2 { font-size: 16px; margin: 0 0 4px; }
.panel p.sub { color: var(--muted); margin: 0 0 16px; font-size: 14px; }
.form-error { color: var(--bad); font-size: 14px; margin: -4px 0 12px; }
.switch-line { text-align: center; color: var(--muted); font-size: 14px; margin-top: 16px; }
.qr { background: #fff; border-radius: 8px; padding: 6px; width: max-content; margin: 8px 0 12px; }
.qr svg { display: block; width: 200px; height: 200px; max-width: 100%; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; background: var(--sunken); padding: 8px 10px; border-radius: 6px; word-break: break-all; }
.steps-list { margin: 8px 0 0; padding-left: 20px; color: var(--muted); font-size: 14px; }
.steps-list li { margin-bottom: 6px; }

/* ---------- admin ---------- */
.subnav { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; overflow-x: auto; }
.subnav a { padding: 9px 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.subnav a:hover { color: var(--ink); text-decoration: none; }
.subnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--signal); font-weight: 600; }
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); }
.strip > div { padding: 14px 18px; border-left: 1px solid var(--line); }
.strip > div:first-child { border-left: 0; }
.strip .v { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.strip .k { color: var(--muted); font-size: 13px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 18px; align-items: start; }
.cols > .panel + .panel { margin-top: 0; }
.panel .barlist + h2 { margin-top: 20px; }
.toggle-row + .field { margin-top: 16px; }
.barlist { list-style: none; margin: 10px 0 0; padding: 0; }
.barlist li { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; gap: 10px; align-items: center; padding: 5px 0; font-size: 14px; }
.barlist .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barlist .track { height: 8px; background: var(--sunken); border-radius: 4px; overflow: hidden; }
.barlist .track > div { height: 100%; background: var(--signal); border-radius: 4px; }
.barlist .track.bad > div { background: var(--bad); }
.barlist .n { font-family: var(--display); font-size: 16px; font-variant-numeric: tabular-nums; min-width: 2.5em; text-align: right; }
.daily { display: flex; align-items: flex-end; gap: 4px; height: 140px; margin-top: 14px; container-type: inline-size; }
.daily .day { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.daily .col { width: 100%; max-width: 30px; background: var(--signal); border-radius: 4px 4px 0 0; position: relative; min-height: 2px; }
.daily .col .err { position: absolute; left: 0; right: 0; bottom: 0; background: var(--bad); border-radius: 0; }
.daily .lbl { font-size: 11.5px; color: var(--faint); font-family: var(--display); white-space: nowrap; }
.daily .day { min-width: 0; }
.daily .day.zero .col { background: var(--line); }
/* 14 labels do not fit a narrow panel: label every other day. */
@container (max-width: 520px) { .daily .lbl.odd { visibility: hidden; } }
.legend { display: flex; gap: 14px; font-size: 13px; color: var(--muted); margin-top: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.legend .lg-ok { background: var(--signal); }
.legend .lg-bad { background: var(--bad); }

.table-wrap { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow-x: auto; }
.table-wrap:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 600; color: var(--muted); font-size: 13px; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
td .wrap { white-space: normal; max-width: 360px; }
.table-wrap .job-actions { flex-wrap: nowrap; }
tr:last-child td { border-bottom: 0; }
td .title-cell { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
td .small { color: var(--muted); font-size: 12.5px; }
.pill { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--sunken); color: var(--muted); white-space: nowrap; }
.pill.admin { background: var(--signal-soft); color: var(--signal); }
.pill.user { background: var(--ok-soft); color: var(--ok); }
.pill.off { background: var(--bad-soft); color: var(--bad); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filters select, .filters input { height: 38px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 0 10px; }
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; color: var(--muted); font-size: 13.5px; }
.tier-grid { display: grid; grid-template-columns: 180px repeat(3, minmax(90px, 1fr)); gap: 0; font-size: 14px; }
.tier-grid > div { padding: 8px 10px; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.tier-grid .h { font-weight: 600; color: var(--muted); font-size: 13px; }
.tier-grid input[type="number"] { width: 100%; height: 34px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; background: var(--surface); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.toggle-row:last-child { border-bottom: 0; }
.toggle-row .d { color: var(--muted); font-size: 13.5px; }
.toggle { position: relative; display: inline-block; vertical-align: middle; width: 44px; height: 26px; flex: none; }
.toggle input { opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; position: absolute; z-index: 1; }
.toggle span { position: absolute; inset: 0; background: var(--line); border-radius: 13px; transition: background .15s; }
.toggle span::after { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.toggle input:checked + span { background: var(--signal); }
.toggle input:checked + span::after { transform: translateX(18px); }
.toggle input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }
.notice { border: 1px solid var(--line); border-left: 4px solid var(--warn); background: var(--surface); border-radius: var(--r-m); padding: 14px 16px; }
.notice h2 { font-size: 16px; margin: 0 0 6px; }
.notice p { margin: 0 0 10px; color: var(--muted); }

/* ---------- player modal / drawer ---------- */
dialog {
  border: 0; padding: 0; border-radius: var(--r-l); background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-float); width: min(960px, calc(100vw - 32px));
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto;
}
dialog::backdrop { background: rgba(8, 10, 16, .62); }
.player video, .player audio { width: 100%; display: block; background: #000; max-height: 70vh; }
.player video { aspect-ratio: 16 / 9; }
.player audio { background: var(--sunken); padding: 20px; }
.player-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.player-bar .t { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog-body { padding: 20px; }

/* ---------- toast ---------- */
.toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--ink); color: var(--paper); padding: 11px 16px; border-radius: 10px; box-shadow: var(--shadow-float); font-size: 14.5px; }
.toast.bad { background: var(--bad-solid); color: #fff; }

/* ---------- footer ---------- */
.foot { max-width: 1120px; margin: 0 auto; padding: 0 20px 40px; color: var(--faint); font-size: 13px; display: flex; gap: 16px; flex-wrap: wrap; }
.foot a { color: var(--faint); }
.prose { max-width: 70ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
/* Legal pages (terms / privacy / Impressum) */
.legal .h-sub { font-weight: 400; color: var(--faint); font-size: 0.82em; margin-left: 6px; }
.legal h3 { font-size: 15px; margin: 18px 0 4px; }
.legal .small { font-size: 13px; color: var(--faint); }
.legal-address { font-style: normal; line-height: 1.7; color: var(--ink); margin: 6px 0 12px; overflow-wrap: anywhere; }
.legal-kv { max-width: 40rem; margin: 6px 0 12px; }
.callout { background: var(--signal-soft); border-radius: var(--r-m); padding: 12px 16px; margin: 6px 0 18px; }
.callout p { margin: 0; color: var(--ink); }
.callout.warn { background: var(--warn-soft); }
.callout.warn p { color: var(--warn); }
.placeholder { display: inline-block; padding: 1px 6px; border: 1px dashed var(--warn); border-radius: var(--r-s);
  background: var(--warn-soft); color: var(--warn); font-size: 0.92em; overflow-wrap: anywhere; }
.prose h2 { font-size: 17px; margin: 26px 0 6px; }
.prose p, .prose li { color: var(--muted); }

/* ---------- mobile ---------- */
.tabbar { display: none; }
@media (max-width: 720px) {
  body { font-size: 15px; }
  .topbar-in { padding: 0 16px; height: 54px; }
  .nav { display: none; }
  main { padding: 18px 16px 110px; }
  .capture-row { flex-direction: column; }
  .capture-row .btn.big { width: 100%; }
  .job { grid-template-columns: 104px 1fr; gap: 12px; padding: 12px; }
  .thumb { width: 104px; }
  .job-actions { grid-column: 1 / -1; justify-content: stretch; }
  .job-actions .btn { flex: 1; height: 42px; }
  .job-actions .btn.icon { flex: 0 0 42px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
  .tile .row .btn { height: 36px; }
  .strip { grid-template-columns: repeat(2, 1fr); }
  .strip > div { border-left: 0; border-top: 1px solid var(--line); }
  .strip > div:nth-child(-n+2) { border-top: 0; }
  .strip > div:nth-child(even) { border-left: 1px solid var(--line); }
  .tier-grid { grid-template-columns: 120px repeat(3, minmax(70px, 1fr)); font-size: 13px; }
  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); font-size: 11.5px; padding: 4px 0; }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a[aria-current="page"] { color: var(--signal); }
  .tabbar a:hover { text-decoration: none; }
  .toasts { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .foot { padding-bottom: 100px; }
}
@media (max-width: 380px) {
  .grid { grid-template-columns: 1fr; }
}


/* =====================================================================
   v0.2 additions
   ===================================================================== */

/* ---------- a11y plumbing ---------- */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--signal); color: var(--signal-ink); padding: 10px 16px; border-radius: 8px; font-weight: 600;
}
.skip:focus { top: 10px; text-decoration: none; }
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, main:focus { outline: none; }
h1[tabindex="-1"]:focus-visible, h2[tabindex="-1"]:focus-visible { outline: none; }
.offline {
  position: sticky; top: 0; z-index: 25; background: var(--warn-soft); color: var(--warn);
  text-align: center; font-size: 14px; padding: 8px 16px; border-bottom: 1px solid var(--line);
}

/* ---------- skeletons ---------- */
.skel { display: block; background: var(--sunken); border-radius: 6px; position: relative; overflow: hidden; }
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 55%, transparent), transparent);
  transform: translateX(-100%); animation: shimmer 1.3s ease-in-out infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }
.skel-row { display: grid; grid-template-columns: 136px 1fr; gap: 16px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line); }
.skel-row:first-child { border-top: 0; }
.skel-thumb { aspect-ratio: 16 / 9; width: 136px; }
.skel-lines { display: grid; gap: 10px; }
.skel-line { height: 12px; }
.skel-line.w70 { width: 70%; }
.skel-line.w40 { width: 40%; }
.skel-block { display: grid; gap: 12px; padding: 18px; }
.skel-tile { display: grid; gap: 10px; }
.skel-media { aspect-ratio: 16 / 9; border-radius: var(--r-m); }
@media (max-width: 720px) {
  .skel-row { grid-template-columns: 104px 1fr; padding: 12px; }
  .skel-thumb { width: 104px; }
}

/* ---------- buttons & small parts ---------- */
.btn.small { height: 32px; padding: 0 10px; font-size: 13.5px; }
.btn.danger-solid { background: var(--bad-solid); border-color: var(--bad-solid); color: #fff; }
.btn.danger-solid:hover { filter: brightness(1.08); }
.btn.danger-solid:disabled { filter: none; }
.btn[aria-pressed="true"] { color: var(--signal); }
.btn[aria-busy="true"] { cursor: progress; }
.linkish {
  background: none; border: 0; padding: 0; color: var(--signal); cursor: pointer; text-align: left; font: inherit;
}
.linkish:hover { text-decoration: underline; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.head-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.empty p { margin: 0; }
.empty .empty-sub { margin-top: 6px; font-size: 14px; }
.grid-empty { grid-column: 1 / -1; }
.pager-btns { display: inline-flex; align-items: center; gap: 10px; }
.row-tools { display: inline-flex; gap: 2px; }
.break { overflow-wrap: anywhere; }
.code-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.toast { display: grid; gap: 2px; }
.toast-hint { font-size: 13px; opacity: .85; }

/* ---------- dialogs ---------- */
.dlg-title { font-size: 17px; margin: 0 0 8px; line-height: 1.45; overflow-wrap: anywhere; }
.dlg-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.detail .kv { margin-top: 14px; }

/* ---------- key/value lists ---------- */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---------- account ---------- */
.account-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); } /* wide tables scroll inside .table-wrap */
.account-grid > .panel + .panel { margin-top: 0; }
.device-list { list-style: none; margin: 0 0 14px; padding: 0; }
.device-list li { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.device-list li:first-child { border-top: 0; }
.dev-icon { color: var(--muted); }
.dev-icon svg { width: 22px; height: 22px; }
.dev-main { display: grid; gap: 2px; min-width: 0; }
.dev-main .small { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.danger-zone { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.danger-zone h2 { color: var(--bad); }
.notice + .account-grid, .notice + .panel { margin-top: 18px; }
.token-new { margin-bottom: 14px; }
#tokens:not(:empty) { margin-bottom: 14px; }

/* ---------- admin: system status ---------- */
.system { margin-bottom: 18px; }
.sys-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.sys-head h2 { margin: 0; }
.sys-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; padding: 4px 12px; border-radius: 999px; }
.sys-badge.ok { background: var(--ok-soft); color: var(--ok); }
.sys-badge.bad { background: var(--bad-soft); color: var(--bad); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; background: var(--faint); }
.dot.ok { background: var(--ok); }
.dot.bad { background: var(--bad); }
.dot.off { background: var(--faint); }
.dot.warn { background: var(--warn); }
.sys-badge.warn { background: var(--warn-soft); color: var(--warn); }
.sys-warn { background: var(--warn-soft); color: var(--warn); border-radius: var(--r-s); padding: 8px 12px; font-size: 14px; margin: 8px 0; }
.sys-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 28px; margin-top: 12px; }
.meter-row { margin-bottom: 12px; }
.meter-head { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--muted); margin-bottom: 5px; }
.meter { height: 8px; background: var(--sunken); border-radius: 4px; overflow: hidden; }
.meter > div { height: 100%; background: var(--signal); border-radius: 4px; }
.meter.warn > div { background: var(--warn); }
.meter.bad > div { background: var(--bad); }
.flags { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.flags li { display: flex; align-items: center; gap: 9px; }
.small { font-size: 12.5px; color: var(--muted); }

/* ---------- admin: settings ---------- */
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 18px; }
.two-col textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; }
.save-bar { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(transparent, var(--paper) 30%); z-index: 5; }
.filters label:not(.search) { display: inline-flex; }
.filters .search { flex: 1; min-width: 180px; }

/* ---------- help ---------- */
.help h2 { scroll-margin-top: 76px; }
.help h3 { font-size: 15px; margin: 18px 0 4px; color: var(--ink); }
.toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 18px; margin: 10px 0 8px; }
.toc ul { margin: 0; padding-left: 18px; columns: 2 220px; }
.toc li { margin: 3px 0; }
.fail-list { margin: 0; }
.fail-list dt { font-weight: 600; color: var(--ink); margin-top: 8px; }
.fail-list dd { margin: 2px 0 0; color: var(--muted); }
.help table th[scope="row"] { font-weight: 500; color: var(--ink); }
.prose ol, .prose ul { padding-left: 22px; }
.prose li { margin-bottom: 4px; }
.not-found { padding: 60px 20px; }
.bars-mini.big { width: 120px; height: 16px; }

/* ---------- small screens ---------- */
@media (max-width: 720px) {
  .head-tools .aside { display: none; }
  .kv { grid-template-columns: 1fr; gap: 0; }
  .kv dt { margin-top: 8px; font-size: 13px; }
  .device-list li { grid-template-columns: 24px 1fr; }
  .device-list li .btn { grid-column: 2; justify-self: start; }
  .dlg-actions .btn { flex: 1; }
}
@media (max-width: 420px) {
  .guest-chip { display: none; }
  .topbar-in { gap: 10px; }
  .brand-name { font-size: 15px; }
  .top-right .btn { padding: 0 10px; }
  .capture h1 { font-size: 24px; }
  .presets .preset { padding: 6px 12px; }
  .panel { padding: 18px 16px; }
  .toc ul { columns: 1; }
}
@media (max-width: 360px) {
  .brand-name { display: none; }
}

/* Links inside running text are underlined (not distinguished by colour alone). */
.lede a, .quota a, .page-sub a, .sub a, .empty a, .switch-line a, .prose a, .check a, .notice a,
.foot a, .error-box a, .form-error a, .kv a, .steps-list a, .toast a { text-decoration: underline; text-underline-offset: 2px; }
.section-head .aside { text-decoration: underline; text-underline-offset: 2px; }

/* limits table (admin settings) */
.tier-table th[scope="row"] { font-weight: 500; color: var(--ink); white-space: normal; min-width: 140px; }
.tier-table td { white-space: normal; }
.tier-table input[type="number"] { width: 100%; min-width: 72px; height: 34px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; background: var(--surface); }

.ic { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; background: var(--sunken);
  padding: 1px 6px; border-radius: 4px; overflow-wrap: anywhere; color: var(--ink); }
.dev-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* text dialogs are narrower than the player */
dialog:has(.dialog-body) { width: min(640px, calc(100vw - 32px)); }
a.btn, a.btn:hover { text-decoration: none; }
tr:last-child th { border-bottom: 0; }


/* =====================================================================
   v0.3 — review fixes
   ===================================================================== */

/* ---------- first paint (static shell in index.html) ---------- */
.boot-shell .boot-input {
  position: relative; height: 54px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-m) var(--r-m) 4px 4px; overflow: hidden;
}
.boot-shell .signal-line { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; opacity: .55; }
.boot-chips { display: flex; gap: 8px; margin-top: 16px; }
.boot-chips .skel { width: 76px; height: 32px; border-radius: 999px; }
.noscript { text-align: center; padding: 20px; }

/* ---------- service banner ---------- */
/* same left/right edges as the page content (main: max 1120 px incl. 20 px padding) */
.service-banner {
  max-width: 1080px; margin: 14px auto 0; padding: 10px 16px; border-radius: var(--r-m);
  font-size: 14px; width: calc(100% - 40px);
}
.service-banner a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.service-banner.warn { background: var(--warn-soft); color: var(--warn); }
.service-banner.info { background: var(--signal-soft); color: var(--signal); }

/* ---------- home: form layout (presets sit between the URL and the button on phones) ---------- */
.capture-form {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px;
  grid-template-areas: "url btn" "err err" "presets presets" "quota quota" "ts ts";
}
.capture-form .url-field { grid-area: url; }
.capture-form #submit { grid-area: btn; }
.capture-form #submit-err { grid-area: err; margin: 8px 0 0; }
.capture-form .presets { grid-area: presets; }
.capture-form .quota { grid-area: quota; }
.capture-form .ts-box { grid-area: ts; }
.share-note { background: var(--signal-soft); color: var(--ink); border-radius: var(--r-m); padding: 10px 14px; font-size: 14px; }

/* ---------- error text: what happened + next step ---------- */
.form-error .err-msg { display: block; font-weight: 600; }
.form-error .err-hint { display: block; color: var(--ink); opacity: .85; font-size: 13.5px; margin-top: 2px; }
#err-action { margin: -4px 0 12px; }

/* ---------- job rows: error box spans the row; thumb top-aligned ---------- */
.job { grid-template-columns: 136px minmax(0, 1fr) auto; align-items: start; }
.job > .thumb { grid-column: 1; grid-row: 1 / span 2; }
.job > .job-main { grid-column: 2; grid-row: 1; }
.job > .job-error { grid-column: 2; grid-row: 2; }
.job > .job-actions { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.job-error .error-box { margin-top: 0; }
.job[tabindex="-1"]:focus { outline: none; }

/* ---------- library tiles: aligned button rows, quieter save button ---------- */
.tile { display: flex; flex-direction: column; }
.tile h3 { min-height: 2.9em; }
.tile .row { margin-top: auto; padding-top: 6px; }
.btn.tonal { background: var(--signal-soft); color: var(--signal); border-color: transparent; }
.btn.tonal:hover { border-color: var(--signal); }

/* ---------- inputs used inside toolbars without a search icon ---------- */
.inline-field { flex: 1; min-width: 180px; }
.inline-field input, .inline-field select { width: 100%; height: 40px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 0 12px; }
.filters .search input { width: 100%; padding-left: 36px; }


/* ---------- touch targets ---------- */
.brand { min-height: 44px; }
.tier-chip { display: inline-flex; align-items: center; min-height: 32px; }

/* ---------- small screens ---------- */
@media (max-width: 720px) {
  .service-banner { width: calc(100% - 32px); }
  .capture-form {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "url" "err" "presets" "btn" "quota" "ts";
  }
  .capture-form #submit { width: 100%; margin-bottom: 12px; }
  .capture-form .presets { margin-top: 14px; }

  .job { grid-template-columns: 104px minmax(0, 1fr); }
  .job > .thumb { grid-row: 1; }
  .job > .job-error { grid-column: 1 / -1; grid-row: 2; }
  .job > .job-actions { grid-column: 1 / -1; grid-row: 3; align-self: auto; }

  .tile .row { flex-wrap: wrap; }
  .tile .row .btn { height: 44px; }
  .tile .row .btn.tonal { flex: 1 1 100%; }
  .tile .row .row-tools { margin-left: auto; }

  /* Tables become cards: each cell shows its column name. */
  table.cards-sm thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.cards-sm, table.cards-sm tbody, table.cards-sm tr, table.cards-sm td { display: block; width: 100%; }
  table.cards-sm tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  table.cards-sm tr:last-child { border-bottom: 0; }
  /* label in a fixed left column; whatever the cell holds (text, chips, several lines) flows on the right */
  table.cards-sm td { border: 0; padding: 4px 0 4px 86px; position: relative; white-space: normal; min-height: 28px; overflow-wrap: anywhere; }
  table.cards-sm td::before { content: attr(data-label); position: absolute; left: 0; top: 6px; width: 76px;
    color: var(--muted); font-size: 12.5px; font-weight: 600; }
  table.cards-sm td:empty::after { content: "—"; color: var(--muted); }
  table.cards-sm td .title-cell { max-width: none; white-space: normal; overflow-wrap: anywhere; }
  table.cards-sm td .job-actions { justify-content: flex-start; flex-wrap: wrap; }
  table.cards-sm .job-actions .btn { flex: 0 0 auto; }

  /* the sticky save bar sits above the tab bar */
  .save-bar { bottom: calc(64px + env(safe-area-inset-bottom)); }
}


/* =====================================================================
   v0.4 — verification fixes
   ===================================================================== */

/* ---------- top bar: no second 登入 on phones (the tab bar has it); guest chip hidden ≤420 px ---------- */
@media (max-width: 720px) { .top-right .top-login { display: none; } }
@media (max-width: 420px) { .top-right .guest-chip { display: none; } }

/* ---------- emails wrap before the "@", not inside a word ---------- */
/* each half stays on one line; only a half wider than the whole line may break */
.email > span { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
@media (min-width: 1024px) { table.admin-table .email > span { white-space: nowrap; } }

/* ---------- admin tables: everything fits, nothing sticks over other columns ---------- */
table.admin-table th, table.admin-table td { padding: 9px 10px; }
table.admin-table td { white-space: normal; overflow-wrap: break-word; }
table.admin-table td.actions { width: 1%; white-space: nowrap; }
table.admin-table .job-actions { gap: 4px; justify-content: flex-end; }
table.admin-table td .title-cell {
  max-width: 300px; white-space: normal; text-overflow: clip;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
table.admin-table td.who { min-width: 120px; }
table.jobs-table td:first-child { min-width: 78px; }
@media (max-width: 1279px) { table.admin-table td .title-cell { max-width: 220px; } }

/* below 1024 px the admin tables become cards: each cell shows its column name */
@media (max-width: 1023px) {
  table.cards-md thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.cards-md, table.cards-md tbody, table.cards-md tr, table.cards-md td { display: block; width: 100%; }
  table.cards-md tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  table.cards-md tr:last-child { border-bottom: 0; }
  table.cards-md td { border: 0; padding: 4px 0 4px 86px; position: relative; min-height: 28px; }
  table.cards-md td::before { content: attr(data-label); position: absolute; left: 0; top: 6px; width: 76px;
    color: var(--muted); font-size: 12.5px; font-weight: 600; }
  table.cards-md td:empty::after { content: "—"; color: var(--muted); }
  table.cards-md td.actions { width: 100%; }
  table.cards-md td .title-cell { max-width: none; display: block; -webkit-line-clamp: none; }
  table.cards-md .job-actions { justify-content: flex-start; flex-wrap: wrap; }
  table.cards-md .job-actions .btn { flex: 0 0 auto; }
  table.cards-md .job-actions .btn.icon { width: 44px; height: 44px; }
}

/* ---------- overflow menu (「⋯」) ---------- */
.menu {
  position: fixed; z-index: 70; min-width: 190px; max-width: calc(100vw - 16px); display: grid; gap: 2px; padding: 6px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-float);
}
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 12px;
  border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.menu-item svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.menu-item:hover { background: var(--sunken); }
.menu-item:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; background: var(--sunken); }
.menu-item.danger, .menu-item.danger svg { color: var(--bad); }
.btn.more[aria-expanded="true"] { background: var(--sunken); }

/* ---------- account: two columns on desktop, inputs not wider than they need ---------- */
.account-grid .field input, .account-grid .field select { max-width: 420px; }
.account-grid .inline-field { max-width: 360px; }
@media (min-width: 1024px) {
  .account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .account-grid > .span-2 { grid-column: 1 / -1; }
}

/* ---------- page that could not be loaded ---------- */
.load-error .page-title { margin-bottom: 8px; color: var(--ink); }
.load-error .cta-row { justify-content: center; margin-top: 16px; }


/* =====================================================================
   v0.5 — final UX round
   ===================================================================== */

/* ---------- keyboard focus never ends up under the sticky top bar or the phone tab bar ---------- */
html { scroll-padding-top: 76px; }
@media (max-width: 720px) {
  html { scroll-padding-top: 66px; scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* ---------- a job that has no file but did not fail (e.g. removed early to free space) ---------- */
.error-box.note { color: var(--ink); background: var(--sunken); }
.error-box.note .hint { color: var(--muted); opacity: 1; }

/* ---------- admin tables 1024–1279 px: labels, sizes and short values never break letter by letter ---------- */
table.admin-table .status, table.admin-table .pill, table.admin-table td.num { white-space: nowrap; }
table.admin-table td.small { word-break: keep-all; }

/* ---------- admin sub-navigation on phones: fade at the edge that has more tabs ---------- */
.subnav { position: relative; }
.subnav.more-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
}
.subnav.more-left {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 44px);
  mask-image: linear-gradient(to right, transparent, #000 44px);
}
.subnav.more-left.more-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}
@media (max-width: 420px) { .subnav a { padding: 9px 11px; } }

/* ---------- overview KPI strip: no lone card, numbers stay with their units ---------- */
.strip .k { word-break: keep-all; }
@media (min-width: 721px) and (max-width: 1023px) {
  .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .strip > div:nth-child(4n+1) { border-left: 0; }
  .strip > div:nth-child(n+5) { border-top: 1px solid var(--line); }
  .strip > div:last-child:nth-child(4n+3) { grid-column: span 2; }
}
@media (max-width: 720px) {
  .strip > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* a second list inside one overview panel */
.panel > h2:not(:first-child) { margin-top: 22px; }

/* ---------- two-factor setup: key, code field and errors have room ---------- */
.totp-setup .code { margin-bottom: 16px; }
.totp-setup .code-form { margin-bottom: 8px; }
.totp-setup .form-error { margin: 0 0 4px; }
.totp-setup .inline-field input[aria-invalid="true"] { border-color: var(--bad); }

/* ---------- 404 ---------- */
.not-found .page-title { color: var(--ink); margin: 0 0 8px; }
.not-found .page-sub { margin: 0; }
.not-found .cta-row { justify-content: center; margin-top: 20px; }

/* ---------- audit log detail ---------- */
.audit-detail { color: var(--muted); margin-top: 2px; }

/* ---------- v7: service note, account extras, library tools ---------- */
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.svc-note { margin: 8px 0 0; font-size: 13.5px; color: var(--warn); }
.panel h3.sub-h { font-size: 14.5px; margin: 18px 0 6px; font-weight: 650; }
.copy-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px 20px; }
.copy-row .code { flex: 1 1 260px; min-width: 0; }
details.adv { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
details.adv > summary { cursor: pointer; font-weight: 600; font-size: 14.5px; padding: 6px 0; min-height: 32px; }
details.adv[open] > summary { margin-bottom: 8px; }
.usage-kv { margin-top: 10px; }
.backup-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin: 12px 0 16px; padding-left: 26px; }
.backup-codes code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; letter-spacing: .04em; }
.warn-text { color: var(--warn); }
.filter-chip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.lib-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; padding: 2px; background: var(--surface); }
.seg-btn { border: 0; background: transparent; color: var(--muted); height: 34px; padding: 0 14px; border-radius: 7px; font-size: 14px; font-weight: 550; cursor: pointer; }
.seg-btn[aria-pressed="true"] { background: var(--sunken); color: var(--ink); }
.seg-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.lib-filter select { height: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); padding: 0 10px; max-width: 220px; }
.bulk-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin: 0 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); font-size: 14px; }
.bulk-btns { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.tile { position: relative; }
.tile-check { position: absolute; top: 6px; left: 6px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 10px; background: color-mix(in srgb, var(--surface) 88%, transparent); cursor: pointer; }
.tile-check input { width: 22px; height: 22px; accent-color: var(--signal); cursor: pointer; }
.tile.selected .thumb { outline: 3px solid var(--signal); outline-offset: 2px; }
.grid.as-list { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); }
.grid.as-list > .grid-empty { padding: 24px 16px; }
@media (max-width: 560px) {
  .lib-tools .search { flex-basis: 100%; }
  .lib-filter { flex: 1 1 30%; }
}
@media (max-width: 420px) {
  /* type + sort share a row, the (longer) site list gets its own: nothing is cut off at 320 px */
  .lib-filter { flex: 1 1 calc(50% - 8px); }
  .lib-filter:has(#f-site) { flex-basis: 100%; order: 3; }
}
@media (max-width: 560px) {
  .lib-filter select { width: 100%; max-width: none; }
  .backup-codes { grid-template-columns: minmax(0, 1fr); }
  .copy-row { margin-left: 0; }
}
.gone-page { max-width: 36rem; margin: 12vh auto; padding: 0 16px; }