/* ──────────────────────────────────────────────────────────
   MIK Spec Checker · v2.4
   Bento Grid · Soft Neo-Brutalism · Dark Charcoal
   Pastel accents: salmon / periwinkle / yellow / mint
   Bold all-caps Inter — modular fintech SaaS aesthetic

   v2.4 notes: big hero PASS/FAIL, pane-swap result UI,
   action bar at top, check-row with plain-English detail.
   New classes appended at bottom of file.
   ─────────────────────────────────────────────────────────── */

:root {
  /* ── Deep charcoal base ── */
  --bg: #16161b;
  --bg-alt: #1d1d24;
  --surface: #24242c;
  --surface-2: #2b2b35;
  --surface-3: #32323d;

  --ink: #f4f2e6;
  --ink-soft: #d0cfc2;
  --ink-mute: #8a8a99;

  /* ── Vivid pastel accents ── */
  --salmon: #FFA69E;
  --salmon-dim: rgba(255, 166, 158, .16);
  --periwinkle: #AFB4FF;
  --peri-dim: rgba(175, 180, 255, .16);
  --yellow: #FFE66D;
  --yellow-dim: rgba(255, 230, 109, .16);
  --mint: #A9F5C5;
  --mint-dim: rgba(169, 245, 197, .18);

  --accent: var(--periwinkle);
  --accent-strong: #8f95ff;
  --coral: #FF6B6B;

  /* Semantic */
  --ok: var(--mint);
  --ok-soft: var(--mint-dim);
  --warn: var(--yellow);
  --warn-soft: var(--yellow-dim);
  --danger: var(--coral);
  --danger-soft: rgba(255, 107, 107, .16);

  /* Structure */
  --border: #3a3a46;
  --border-strong: #4a4a58;
  --shadow-block: 4px 4px 0 #0b0b10;
  --shadow-block-lg: 6px 6px 0 #0b0b10;
  --shadow-soft: 0 2px 6px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.35);

  --radius: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-xs: 8px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Dark is the canonical theme — light mode is a tonal remix */
:root.theme-auto, :root.theme-dark { /* defaults above */ }
:root.theme-light {
  --bg: #f5f2e6;
  --bg-alt: #e9e4d0;
  --surface: #ffffff;
  --surface-2: #fbf8ea;
  --surface-3: #efecdc;
  --ink: #1a1a1f;
  --ink-soft: #3a3a46;
  --ink-mute: #70707f;
  --border: #c9c4ad;
  --border-strong: #8f8b72;
  --shadow-block: 4px 4px 0 #1a1a1f;
  --shadow-block-lg: 6px 6px 0 #1a1a1f;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Soft radial wash — deep charcoal with a whisper of periwinkle */
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(175, 180, 255, .06), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(255, 166, 158, .05), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}
body.dragging { background: var(--bg-alt); }

::selection { background: color-mix(in srgb, var(--periwinkle) 45%, transparent); color: var(--ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--periwinkle); }

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

/* ── Topbar ───────────────────────────────────────────────── */
.topbar {
  background: rgba(36, 36, 44, .82);
  backdrop-filter: saturate(1.2) blur(12px);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  color: var(--ink);
  position: sticky; top: 0; z-index: 10;
  border-bottom: 2px solid var(--border);
}
.topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex; align-items: center; gap: 1.25rem;
  padding: .95rem 1.75rem;
}

/* Brand block: circular MIK logo + 2-line text */
.brand {
  display: flex; align-items: center; gap: .8rem;
  color: var(--ink);
  text-decoration: none;
  cursor: default;
}
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  color: var(--periwinkle);
  background: var(--surface-2);
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  box-shadow: var(--shadow-block);
  flex-shrink: 0;
}
.brand-mark svg { width: 30px; height: 30px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-size: .95rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink);
}
.brand-tag {
  font-size: .65rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--salmon);
  margin-top: 3px;
}

/* Tabs — pill-style with pastel highlight */
.tabs {
  display: flex; gap: .35rem;
  margin-left: 1rem;
  padding: .25rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-block);
}
.tab {
  background: none; border: 0; color: var(--ink-mute);
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .95rem;
  font: inherit;
  font-size: .7rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .14em;
  cursor: pointer;
  border-radius: 999px;
  transition: color .15s, background .15s;
}
.tab:hover { color: var(--ink); }
.tab.active {
  background: var(--periwinkle);
  color: #16161b;
}
.tab svg { width: 14px; height: 14px; }

.topbar-actions { margin-left: auto; display: flex; gap: .35rem; }
.icon-btn {
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--ink-soft);
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); cursor: pointer;
  box-shadow: var(--shadow-block);
  transition: background .15s, color .15s, border-color .15s, transform .08s, box-shadow .12s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--yellow); border-color: var(--yellow); }
.icon-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #0b0b10; }
.icon-btn svg { width: 18px; height: 18px; }

/* ── Main ─────────────────────────────────────────────────── */
.main {
  flex: 1;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 1.75rem 1.75rem 3rem;
}
.view { display: none; }
.view.active { display: block; animation: fadeIn .25s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── BENTO GRID — the check view becomes a grid of tiles ── */
#view-check.active {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  align-content: start;
}
@media (min-width: 980px) {
  #view-check.active {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    grid-auto-rows: min-content;
  }
  #view-check.active > .dropzone {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #view-check.active > .format-picker {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    grid-template-columns: 1fr;
    align-self: stretch;
  }
  #view-check.active > .progress,
  #view-check.active > #results,
  #view-check.active > .advanced {
    grid-column: 1 / -1;
  }
}

.view-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 1rem; flex-wrap: wrap;
}
.view-header h2 {
  font-size: .78rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--yellow);
}
.view-header-actions { display: flex; gap: .6rem; align-items: center; }

/* ── Dropzone — hero bento tile ───────────────────────────── */
.dropzone {
  position: relative;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 166, 158, .14), transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(175, 180, 255, .10), transparent 55%),
    var(--surface);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 3rem 1.75rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .08s, box-shadow .15s;
  outline: none;
  box-shadow: var(--shadow-block-lg);
  overflow: hidden;
}
.dropzone::before {
  /* Corner label */
  content: "UPLOAD";
  position: absolute;
  top: 18px; left: 22px;
  font-size: .62rem; font-weight: 900;
  letter-spacing: .24em;
  color: var(--salmon);
  padding: 4px 10px;
  background: var(--salmon-dim);
  border: 1.5px solid var(--salmon);
  border-radius: 999px;
}
.dropzone::after {
  content: "01";
  position: absolute;
  top: 18px; right: 22px;
  font-family: var(--mono);
  font-size: .7rem; font-weight: 800;
  color: var(--ink-mute);
  letter-spacing: .08em;
}
.dropzone:hover, .dropzone:focus-visible {
  border-color: var(--salmon);
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 166, 158, .22), transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(175, 180, 255, .14), transparent 55%),
    var(--surface);
}
.dropzone.drag-over {
  border-color: var(--salmon); border-style: solid;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 166, 158, .30), transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(175, 180, 255, .18), transparent 55%),
    var(--surface);
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 #0b0b10;
}
.dropzone:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #0b0b10; }
.dropzone-icon { color: var(--salmon); margin-bottom: 1rem; filter: drop-shadow(0 2px 0 #0b0b10); }
.dropzone-icon svg { width: 56px; height: 56px; }
.dropzone-title {
  font-size: 1.35rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink);
  line-height: 1.15;
}
.dropzone-sub {
  color: var(--ink-mute);
  margin-top: .55rem; font-size: .78rem;
  font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
}

/* ── Format picker — bento tile-stack ─────────────────────── */
.format-picker {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.format-opt {
  position: relative;
  display: block; cursor: pointer;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
  box-shadow: var(--shadow-block);
  min-height: 100px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.format-opt:hover {
  border-color: var(--periwinkle);
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 #0b0b10;
}
.format-opt input { position: absolute; opacity: 0; pointer-events: none; }
.format-opt:has(input:checked) {
  border-color: var(--periwinkle);
  background: linear-gradient(135deg, rgba(175, 180, 255, .14), transparent 60%), var(--surface);
  box-shadow: var(--shadow-block);
}
.format-opt:has(input:checked)::after {
  content: "●";
  position: absolute;
  top: 12px; right: 14px;
  color: var(--periwinkle);
  font-size: .85rem;
  filter: drop-shadow(0 0 6px rgba(175, 180, 255, .7));
}
.format-head {
  display: flex; align-items: center; gap: .6rem;
  font-size: .95rem; font-weight: 900;
  color: var(--ink);
  text-transform: uppercase; letter-spacing: .05em;
}
.format-ic { font-size: 1.25rem; filter: saturate(1.3); }
.format-tag {
  display: inline-block; font-size: .6rem;
  color: var(--yellow); text-transform: uppercase;
  letter-spacing: .18em; font-weight: 900;
  margin-top: .35rem;
}
.format-opt:has(input:checked) .format-tag { color: var(--salmon); }
.format-meta {
  display: block; color: var(--ink-soft);
  font-family: var(--mono);
  font-size: .72rem; font-weight: 500;
  margin-top: .4rem;
  letter-spacing: .02em;
}

/* ── Progress ─────────────────────────────────────────────── */
.progress {
  background: var(--surface);
  border: 2px solid var(--border);
  border-left: 6px solid var(--yellow);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-block);
}
.progress-row {
  display: flex; justify-content: space-between;
  font-size: .75rem; margin-bottom: .65rem;
  text-transform: uppercase; letter-spacing: .12em;
}
.progress-label { font-weight: 900; color: var(--ink); }
.progress-stage { color: var(--ink-mute); font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .04em; }
.progress-bar { height: 8px; background: var(--bg-alt); border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--periwinkle), var(--salmon));
  width: 0%; transition: width .25s ease-out;
  box-shadow: 0 0 12px rgba(175, 180, 255, .55);
}

/* ── Results card — main bento tile ───────────────────────── */
.results {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-block-lg);
}
.result-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem 1.5rem;
  border-bottom: 2px solid var(--border);
  background:
    linear-gradient(135deg, rgba(175, 180, 255, .08), transparent 60%),
    var(--surface-2);
  gap: 1rem; flex-wrap: wrap;
}
.result-title {
  font-size: 1.05rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink);
}
.result-sub {
  font-size: .7rem; color: var(--ink-mute);
  font-family: var(--mono); font-weight: 600;
  letter-spacing: .04em;
  margin-top: .2rem;
}
.result-status {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  font-size: .7rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .14em;
  border: 2px solid transparent;
}
.result-status.ok { background: var(--mint-dim); color: var(--mint); border-color: var(--mint); }
.result-status.fail { background: var(--danger-soft); color: var(--coral); border-color: var(--coral); }
.result-status.warn { background: var(--warn-soft); color: var(--yellow); border-color: var(--yellow); }
.result-status.pending {
  background: transparent;
  color: var(--ink-soft);
  border: 2px dashed var(--border-strong);
}
.result-status.pending .status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--periwinkle);
  animation: pulse-dot 1.2s ease-in-out infinite;
}
.result-status.pending .status-count {
  font-family: var(--mono); font-size: .66rem;
  color: var(--ink-mute); margin-left: .25rem; font-weight: 700;
}
@keyframes pulse-dot {
  0%, 100% { opacity: .4; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

.check-list { padding: .3rem 0; }
.check-row {
  display: grid;
  grid-template-columns: 60px 260px 1fr auto;
  gap: 1rem; align-items: center;
  padding: .95rem 1.5rem;
  font-size: .9rem;
  border-top: 1px solid transparent;
  transition: background .18s ease, color .18s ease;
}
.check-row + .check-row { border-top-color: var(--border); }
.check-label {
  font-weight: 900;
  text-transform: uppercase; letter-spacing: .08em;
  font-size: .78rem;
  color: var(--ink-soft);
}
.check-value {
  font-family: var(--mono); font-size: .8rem;
  color: var(--ink); font-weight: 600;
  letter-spacing: .02em;
}
.check-value.muted { color: var(--ink-mute); font-style: italic; }
.check-expected {
  font-family: var(--mono); font-size: .72rem;
  color: var(--ink-mute); text-align: right; font-weight: 600;
  letter-spacing: .02em;
}
.check-icon { display: flex; align-items: center; justify-content: center; }
.check-row.pass .check-icon { color: #16161b; }
.check-row.fail .check-icon { color: #16161b; }
.check-row.fail .check-value { color: var(--coral); }

/* Check-box — big round pass/fail circles (pastel) */
.check-box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  color: var(--ink-mute);
  background: var(--bg-alt);
  transition: transform .25s cubic-bezier(.22,.8,.36,1), background .2s ease, border-color .2s ease, box-shadow .2s ease;
  flex-shrink: 0;
}
.check-box.pending-box {
  border-color: transparent;
  background: transparent;
}
.check-box.pass {
  background: var(--mint); border-color: var(--mint);
  color: #16161b;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mint) 25%, transparent),
              0 4px 12px color-mix(in srgb, var(--mint) 45%, transparent);
  animation: pop-in .36s cubic-bezier(.22,1.4,.36,1);
}
.check-box.fail {
  background: var(--coral); border-color: var(--coral);
  color: #16161b;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral) 25%, transparent),
              0 4px 12px color-mix(in srgb, var(--coral) 45%, transparent);
  animation: pop-in .36s cubic-bezier(.22,1.4,.36,1);
}
@keyframes pop-in {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.check-spinner { animation: spin .9s linear infinite; color: var(--periwinkle); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Pending row — shimmer */
.check-row.pending {
  opacity: .85;
  background: linear-gradient(90deg, transparent, rgba(175, 180, 255, .06), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s ease-in-out infinite;
}
.check-row.pending .check-label { color: var(--ink-soft); }
@keyframes shimmer {
  0% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

.check-row.revealed {
  animation: row-tick .36s cubic-bezier(.22,.8,.36,1);
}
.check-row.revealed.pass { background: color-mix(in srgb, var(--mint) 9%, transparent); }
.check-row.revealed.fail { background: color-mix(in srgb, var(--coral) 9%, transparent); }
@keyframes row-tick {
  0%   { opacity: .6; transform: translateX(-6px); }
  60%  { transform: translateX(2px); }
  100% { opacity: 1; transform: translateX(0); }
}
.check-row.dimmed { opacity: .35; }

.result-actions {
  display: flex; gap: .65rem;
  padding: 1.1rem 1.5rem;
  border-top: 2px solid var(--border);
  background: var(--surface-2);
  flex-wrap: wrap;
}

/* ── Transcription panel ─────────────────────────────────── */
.transcription-panel {
  border-top: 2px solid var(--border);
  padding: 1.15rem 1.5rem 1.5rem;
  background: var(--surface);
}
.transcription-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: .7rem;
}
.transcription-head h3 {
  margin: 0;
  font-size: .75rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--yellow);
}
.transcription-head .muted {
  color: var(--ink-mute); font-size: .7rem;
  font-family: var(--mono); font-weight: 700;
  letter-spacing: .04em;
}
.transcription-actions {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem;
}
.transcription-status { font-style: italic; color: var(--ink-mute); font-size: .85rem; }
.transcription-error { color: var(--coral); font-weight: 800; }
.transcription-full {
  background: var(--bg-alt);
  border: 1.5px solid var(--border);
  border-left: 5px solid var(--periwinkle);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem; margin-bottom: .7rem;
}
.transcription-full h4 {
  margin: 0 0 .55rem;
  font-size: .66rem; color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: .16em; font-weight: 900;
}
.transcription-full p { margin: 0; line-height: 1.6; color: var(--ink); white-space: pre-wrap; font-size: .92rem; }
.transcription-segs summary {
  cursor: pointer; font-size: .72rem; color: var(--ink-soft);
  padding: .4rem 0; font-weight: 900;
  text-transform: uppercase; letter-spacing: .12em;
}
.transcription-segs ul {
  list-style: none; padding: 0; margin: .55rem 0 0;
  max-height: 320px; overflow-y: auto;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-alt);
}
.transcription-seg {
  display: grid; grid-template-columns: 70px 1fr; gap: .85rem;
  padding: .55rem .9rem; font-size: .85rem;
  border-bottom: 1px solid var(--border);
}
.transcription-seg:last-child { border-bottom: none; }
.transcription-ts {
  font-family: var(--mono); font-size: .7rem;
  color: var(--periwinkle); font-weight: 800;
  letter-spacing: .04em;
}
.transcription-text { color: var(--ink); line-height: 1.5; }

/* About pills */
.ok-pill, .warn-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: .7rem; font-weight: 900; color: #16161b; margin-right: .35rem;
}
.ok-pill { background: var(--mint); }
.warn-pill { background: var(--yellow); }

.field-divider {
  display: flex; align-items: center; gap: .55rem;
  margin: 1.1rem 0 .4rem; padding-top: .85rem;
  border-top: 1.5px solid var(--border);
}
.field-divider span {
  font-size: .65rem; text-transform: uppercase;
  letter-spacing: .18em; font-weight: 900;
  color: var(--salmon);
}
.field-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary, .btn-ghost, .btn-danger {
  font: inherit;
  font-weight: 900; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .14em;
  border-radius: var(--radius-sm);
  padding: .7rem 1.2rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background .12s, border-color .12s, color .12s, transform .08s, box-shadow .12s;
  display: inline-flex; align-items: center; gap: .5rem;
  box-shadow: var(--shadow-block);
}
.btn-primary:active, .btn-ghost:active, .btn-danger:active {
  transform: translate(2px, 2px); box-shadow: 2px 2px 0 #0b0b10;
}
.btn-primary {
  background: var(--periwinkle); color: #16161b;
  border-color: var(--periwinkle);
}
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: var(--shadow-block); transform: none; }
.btn-ghost {
  background: var(--surface); color: var(--ink);
  border-color: var(--border-strong);
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--yellow); color: var(--yellow); }
.btn-danger {
  background: var(--coral); color: #16161b;
  border-color: var(--coral);
}
.btn-danger:hover { background: #ff5252; }

/* ── Advanced disclosure ──────────────────────────────────── */
.advanced {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-block);
}
.advanced > summary {
  padding: 1rem 1.2rem; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between;
  align-items: center;
  font-size: .74rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink);
}
.advanced > summary::-webkit-details-marker { display: none; }
.advanced > summary::before {
  content: "▸"; margin-right: .6rem; color: var(--periwinkle);
  transition: transform .15s;
}
.advanced[open] > summary::before { transform: rotate(90deg); }
.advanced-hint { font-size: .68rem; color: var(--ink-mute); font-weight: 700; letter-spacing: .1em; }
.advanced-body { padding: 0 1.2rem 1.2rem; border-top: 1.5px solid var(--border); }
.advanced-details { padding-top: 1rem; font-size: .85rem; color: var(--ink-soft); }
.advanced-details .muted { color: var(--ink-mute); font-style: italic; }

.batch-queue { padding-top: 1rem; }
.batch-queue h3 {
  font-size: .72rem; margin-bottom: .55rem;
  font-weight: 900; text-transform: uppercase; letter-spacing: .14em;
  color: var(--yellow);
}
.batch-queue ul { list-style: none; }
.batch-queue li {
  display: flex; justify-content: space-between; align-items: center;
  padding: .55rem 0; border-top: 1.5px solid var(--border);
  font-size: .85rem;
}
.batch-queue li:first-child { border-top: 0; }
.batch-name { font-family: var(--mono); font-size: .78rem; color: var(--ink-soft); font-weight: 600; }
.batch-state {
  font-size: .62rem; padding: .25rem .65rem;
  border-radius: 999px; background: var(--bg-alt);
  font-weight: 900; text-transform: uppercase; letter-spacing: .14em;
  border: 1.5px solid var(--border);
}
.batch-state.ok { background: var(--mint-dim); color: var(--mint); border-color: var(--mint); }
.batch-state.fail { background: var(--danger-soft); color: var(--coral); border-color: var(--coral); }
.batch-state.running { background: var(--warn-soft); color: var(--yellow); border-color: var(--yellow); }

/* ── History — bento list ─────────────────────────────────── */
.search-input {
  font: inherit; font-size: .85rem; font-weight: 500;
  padding: .55rem .85rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  min-width: 280px;
  box-shadow: var(--shadow-block);
  transition: border-color .15s;
}
.search-input:focus { outline: none; border-color: var(--periwinkle); }
.search-input::placeholder { color: var(--ink-mute); }

/* ── History view (v2.4 LIST pass) ────────────────────────────
   Replaces the previous card-grid (UX critique: rows competed
   for attention, low density, zig-zag reading flow).

   New model — a true tabular LIST:
     · No per-row borders / radius / shadow — flat rows
     · Single line per row, columns aligned across all rows
     · 1px divider between rows (rhythm, not chrome)
     · Compact padding for high scan density
     · Hover = background tint only, no transform
     · Date-group headers retained ("Today", "Yesterday", …)
     · Status pill stays — colour + word, scannable
   ───────────────────────────────────────────────────────────── */
.history-list {
  display: flex; flex-direction: column;
  gap: 0;
}
.history-group {
  display: flex; flex-direction: column;
  margin-top: 1.4rem;
}
.history-group:first-child { margin-top: 0; }
.history-group-label {
  font-size: .62rem;
  color: var(--ink-mute);
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: .25rem .35rem .55rem;
  margin-bottom: .15rem;
  border-bottom: 1px solid var(--border);
}

/* Single flat row.  Columns: status | file | stats | time. */
.history-item {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  padding: .55rem .65rem;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1.1fr) 110px;
  column-gap: 1rem;
  align-items: center;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .12s ease;
}
.history-item:last-child { border-bottom: 0; }
.history-item:hover { background: var(--bg-alt); }
.history-item:focus-visible {
  outline: 2px solid var(--periwinkle);
  outline-offset: -2px;
  background: var(--bg-alt);
}

/* Status pill — slimmer, fits the dense row */
.history-status {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .26rem .55rem;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-alt);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: .6rem; font-weight: 900;
  letter-spacing: .14em; text-transform: uppercase;
  width: fit-content;
  min-width: 78px;
  justify-content: center;
  white-space: nowrap;
}
.history-status::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
}
.history-status.pass   { background: var(--mint-dim);    color: var(--mint);        border-color: var(--mint); }
.history-status.fail   { background: var(--danger-soft); color: var(--coral);       border-color: var(--coral); }
.history-status.fixed  { background: var(--peri-dim);    color: var(--periwinkle);  border-color: var(--periwinkle); }

/* Filename — normal case, strong weight, single line */
.history-file {
  font-weight: 700;
  color: var(--ink);
  font-size: .88rem;
  letter-spacing: 0;
  text-transform: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}

/* Stats column — dur · LUFS · checks, one line */
.history-stats {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--ink-mute);
  font-weight: 600;
  letter-spacing: .02em;
  display: flex; gap: .5rem; align-items: center;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.history-stats .dot-sep { color: var(--border-strong); }
.history-stats .history-tag {
  font-size: .56rem; padding: .12rem .5rem;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--periwinkle);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--periwinkle) 45%, var(--border));
  border-radius: 999px;
  font-weight: 900;
  flex-shrink: 0;
}

/* Time column — single relative time, right-aligned */
.history-meta {
  display: flex; align-items: baseline; justify-content: flex-end;
  gap: .45rem;
  font-family: var(--mono);
  white-space: nowrap;
  text-align: right;
}
.history-time {
  font-size: .72rem;
  color: var(--ink-soft);
  font-weight: 700;
  letter-spacing: .02em;
}
.history-time-abs {
  font-size: .58rem;
  color: var(--ink-mute);
  font-weight: 500;
}

/* On narrow viewports, drop the stats column entirely */
@media (max-width: 720px) {
  .history-item {
    grid-template-columns: 78px minmax(0, 1fr) 90px;
    column-gap: .7rem;
  }
  .history-stats { display: none; }
}

.empty-state {
  padding: 3.5rem 1rem; text-align: center;
  color: var(--ink-mute); font-size: .78rem; font-weight: 800;
  background: var(--surface);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  text-transform: uppercase; letter-spacing: .14em;
  grid-column: 1 / -1;
}

/* ── Logs ─────────────────────────────────────────────────── */
.logs-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 1.1rem;
  min-height: 440px;
}
@media (max-width: 800px) {
  .logs-layout { grid-template-columns: 1fr; }
}
.logs-sidebar {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  max-height: 72vh; overflow-y: auto;
  box-shadow: var(--shadow-block);
}
.logs-sidebar ul { list-style: none; }
.logs-sidebar li {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .1s;
}
.logs-sidebar li:hover { background: var(--bg-alt); }
.logs-sidebar li.active { background: var(--periwinkle); color: #16161b; }
.logs-sidebar .log-title {
  font-size: .78rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .06em;
}
.logs-sidebar .log-sub {
  font-size: .68rem; color: var(--ink-mute);
  font-family: var(--mono); font-weight: 700;
  letter-spacing: .04em;
  margin-top: .2rem;
}
.logs-sidebar li.active .log-sub { color: rgba(22, 22, 27, .7); }

.logs-detail {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.2rem;
  overflow: auto;
  box-shadow: var(--shadow-block);
}
.logs-detail h3 {
  font-size: .8rem;
  font-weight: 900; text-transform: uppercase; letter-spacing: .14em;
  color: var(--yellow);
  margin-bottom: .7rem;
}
.logs-steps { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .95rem; }
.logs-step {
  font: inherit;
  font-size: .65rem; font-family: var(--mono); font-weight: 800;
  background: var(--bg-alt); color: var(--ink-soft);
  border: 1.5px solid var(--border); border-radius: var(--radius-xs);
  padding: .3rem .7rem; cursor: pointer;
  text-transform: uppercase; letter-spacing: .1em;
  transition: background .12s, color .12s, border-color .12s;
}
.logs-step:hover { border-color: var(--periwinkle); color: var(--periwinkle); }
.logs-step.active { background: var(--periwinkle); color: #16161b; border-color: var(--periwinkle); }
.logs-output {
  background: #0a0a10;
  color: #b4f0c8;
  font-family: var(--mono); font-size: .74rem; font-weight: 500;
  padding: 1.1rem; border-radius: var(--radius-sm);
  max-height: 55vh; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
  border: 1.5px solid var(--border);
}

/* ── Dialog ───────────────────────────────────────────────── */
.dialog {
  /* Reliable viewport centering across browsers.
     CRITICAL: do NOT add `inset: auto` after top/left — `inset`
     is the shorthand for top/right/bottom/left and would reset
     them, causing the dialog to fall back to UA `left:0; right:0`.
     `top:50%; left:50%; transform:translate(-50%,-50%)` is the
     centering, and the `dialogIn` keyframe preserves that
     translate so the entrance animation doesn't break it. */
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  margin: 0;
  transform: translate(-50%, -50%);
  border: 2px solid var(--border-strong); padding: 0;
  border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  max-width: 580px; width: calc(100% - 2rem);
  max-height: 85vh;
  box-shadow: var(--shadow-block-lg), 0 30px 80px rgba(0,0,0,.6);
}
.dialog[open] {
  animation: dialogIn .22s cubic-bezier(.22,.8,.36,1);
}
@keyframes dialogIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(.98); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.dialog::backdrop { background: rgba(10,10,15,.72); backdrop-filter: blur(6px); }
.dialog-form { display: flex; flex-direction: column; max-height: 85vh; }
.dialog-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.05rem 1.4rem;
  border-bottom: 2px solid var(--border);
  background: var(--surface-2);
}
.dialog-head h2 {
  font-size: .88rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink);
}
.dialog-head .icon-btn {
  box-shadow: none; border-color: transparent;
  background: transparent;
  color: var(--ink-soft);
}
.dialog-head .icon-btn:hover { background: var(--bg-alt); color: var(--coral); border-color: var(--coral); }
.dialog-body {
  padding: 1.2rem 1.4rem; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1rem;
}
.dialog-foot {
  display: flex; justify-content: flex-end; gap: .6rem;
  padding: 1.05rem 1.4rem; border-top: 2px solid var(--border);
  background: var(--surface-2);
}

.field { display: flex; flex-direction: column; gap: .35rem; }
.field label {
  font-size: .7rem; color: var(--ink-soft); font-weight: 900;
  text-transform: uppercase; letter-spacing: .14em;
}
.field input[type="number"], .field select, .field input[type="text"] {
  font: inherit; font-size: .88rem; font-weight: 500;
  padding: .6rem .8rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-alt); color: var(--ink);
  transition: border-color .15s;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--periwinkle); }
.field-inline {
  flex-direction: row; align-items: center; justify-content: space-between;
}
.field-inline label { font-size: .8rem; color: var(--ink); font-weight: 600; text-transform: none; letter-spacing: 0; }
.field input[type="checkbox"] { accent-color: var(--periwinkle); width: 20px; height: 20px; cursor: pointer; }

/* ── About ────────────────────────────────────────────────── */
.about-brand {
  display: flex; gap: .8rem; align-items: center;
  font-size: 1.1rem; font-weight: 900;
  color: var(--ink);
  margin-bottom: .35rem;
  text-transform: uppercase; letter-spacing: .06em;
}
.about-brand .brand-mark {
  width: 58px; height: 58px;
  box-shadow: var(--shadow-block);
}
.about-brand .brand-mark svg { width: 40px; height: 40px; }
.about-version {
  color: var(--salmon); font-family: var(--mono);
  font-size: .78rem; font-weight: 800;
  letter-spacing: .08em;
}
.about-desc { color: var(--ink-soft); margin: .95rem 0; font-size: .88rem; line-height: 1.6; }
.about-section {
  font-size: .66rem; text-transform: uppercase;
  letter-spacing: .18em; color: var(--yellow);
  margin-top: 1.15rem; margin-bottom: .5rem;
  font-weight: 900;
}
.about-grid {
  display: grid; grid-template-columns: 120px 1fr;
  gap: .4rem .9rem; font-size: .85rem;
}
.about-grid dt {
  color: var(--ink-mute);
  font-weight: 800; text-transform: uppercase;
  font-size: .68rem; letter-spacing: .12em;
}
.about-grid dd { color: var(--ink); font-family: var(--mono); font-size: .8rem; font-weight: 600; letter-spacing: .02em; }
.about-contact { margin-top: 1.15rem; font-size: .85rem; color: var(--ink-soft); }
.about-contact a { color: var(--salmon); font-weight: 800; text-decoration: none; border-bottom: 1.5px solid var(--salmon); }

kbd {
  font-family: var(--mono); font-size: .68rem; font-weight: 800;
  background: var(--bg-alt); color: var(--ink);
  border: 1.5px solid var(--border-strong);
  border-bottom-width: 2.5px;
  padding: 2px 8px; border-radius: var(--radius-xs);
}

/* ── Toast ────────────────────────────────────────────────── */
.toast-stack {
  position: fixed; bottom: 1.35rem; right: 1.35rem;
  display: flex; flex-direction: column; gap: .55rem;
  z-index: 100; pointer-events: none;
}
.toast {
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--border);
  padding: .8rem 1.05rem;
  border-radius: var(--radius-sm);
  font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  box-shadow: var(--shadow-block), 0 10px 26px rgba(0,0,0,.45);
  max-width: 360px;
  animation: toastIn .22s ease-out;
  pointer-events: auto;
  border-left-width: 6px;
}
.toast.ok { border-left-color: var(--mint); }
.toast.fail { border-left-color: var(--coral); }
.toast.warn { border-left-color: var(--yellow); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Utilities ────────────────────────────────────────────── */
.muted { color: var(--ink-mute); }
.hidden { display: none !important; }
code, .mono { font-family: var(--mono); font-size: .82rem; font-weight: 600; }

/* Responsive tweaks */
@media (max-width: 720px) {
  .main { padding: 1.25rem 1rem 2rem; }
  .topbar-inner { padding: .75rem 1rem; gap: .75rem; }
  .tabs { margin-left: .25rem; }
  .tab span { display: none; }
  .dropzone { padding: 2.25rem 1rem; min-height: auto; }
  .dropzone-title { font-size: 1.1rem; }
  .check-row { grid-template-columns: 48px 1fr; grid-template-rows: auto auto; gap: .5rem; }
  .check-expected { grid-column: 2; text-align: left; }
  .brand-text { display: none; }
}

/* ──────────────────────────────────────────────────────────
   v2.4 additions · Hero status, pane-swap result, fuller checks,
   top action bar, download button, settings/about cleanup.
   These styles OVERRIDE parts of the older result-card layout.
   ─────────────────────────────────────────────────────────── */

/* -- Status-count chip on result header --------------------- */
.status-count-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem .7rem;
  border: 2px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--ink-soft);
  font: inherit;
  font-family: var(--mono);
  font-size: .68rem; font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.status-count-chip.ok { border-color: var(--mint); color: var(--mint); background: var(--mint-dim); }
.status-count-chip.fail { border-color: var(--coral); color: var(--coral); background: var(--danger-soft); }
.status-count-chip.pending {
  border-style: dashed;
  color: var(--ink-mute);
}

/* -- BIG hero status button --------------------------------- */
.result-hero {
  display: flex; align-items: center; justify-content: center;
  gap: .75rem;
  width: 100%;
  padding: 1.35rem 1.5rem;
  border-bottom: 2px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font);
  font-size: 1.65rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .22em;
  text-align: center;
  transition: background .28s ease, color .28s ease;
  position: relative;
  overflow: hidden;
}
.result-hero-text { position: relative; z-index: 1; }

/* Pending state — soft shimmer over charcoal */
.result-hero.result-hero-pending {
  background: var(--surface-2);
  color: var(--ink-soft);
  letter-spacing: .28em;
}
.result-hero.result-hero-pending::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(175,180,255,.08), transparent);
  background-size: 220% 100%;
  animation: shimmer 2.2s ease-in-out infinite;
  pointer-events: none;
}
.result-hero-spinner {
  display: inline-flex; align-items: center; gap: 5px;
}
.result-hero-spinner span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--periwinkle);
  animation: hero-dot 1.2s ease-in-out infinite;
}
.result-hero-spinner span:nth-child(2) { animation-delay: .18s; }
.result-hero-spinner span:nth-child(3) { animation-delay: .36s; }
@keyframes hero-dot {
  0%, 80%, 100% { opacity: .3; transform: scale(.8); }
  40% { opacity: 1; transform: scale(1.1); }
}

/* PASS — mint background, dark ink text */
.result-hero.result-hero-pass {
  background: var(--mint);
  color: #0b0b10;
  box-shadow: inset 0 -6px 0 color-mix(in srgb, #0b0b10 15%, transparent);
}

/* FAIL — salmon/coral background, dark ink text */
.result-hero.result-hero-fail {
  background: var(--salmon);
  color: #0b0b10;
  box-shadow: inset 0 -6px 0 color-mix(in srgb, #0b0b10 18%, transparent);
}

/* FIXED — yellow background (after an auto-fix) */
.result-hero.result-hero-fixed {
  background: var(--yellow);
  color: #0b0b10;
  box-shadow: inset 0 -6px 0 color-mix(in srgb, #0b0b10 15%, transparent);
}

/* -- Pane-swap (checks ↔ transcription) --------------------- */
.pane-host {
  position: relative;
  background: var(--surface);
}
.pane {
  animation: paneFade .18s ease-out;
}
.pane[hidden] { display: none; }
@keyframes paneFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* Tabs row for pane switching + action buttons (top of result) */
.result-actions {
  /* override: actions bar at TOP, slimmer, with tabs + actions aligned */
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.2rem;
  border-top: none;
  border-bottom: 2px solid var(--border);
  background: var(--surface-2);
  flex-wrap: wrap;
}
.pane-tabs {
  display: inline-flex; gap: .4rem; flex-wrap: wrap;
}
.pane-tab {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem;
  border: 2px solid var(--border);
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--ink-soft);
  font: inherit;
  font-size: .72rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .12em;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
}
.pane-tab:hover:not(:disabled) {
  border-color: var(--periwinkle);
  color: var(--ink);
  background: var(--peri-dim);
}
.pane-tab.active {
  background: var(--periwinkle);
  border-color: var(--periwinkle);
  color: #0b0b10;
  box-shadow: var(--shadow-block);
}
.pane-tab.working {
  border-color: var(--yellow);
  color: var(--yellow);
  background: var(--warn-soft);
}
.pane-tab:disabled { opacity: .45; cursor: not-allowed; }
.pane-tab svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Action row on the right side of the top bar */
.action-row {
  display: inline-flex; gap: .5rem; flex-wrap: wrap; align-items: center;
}
.action-row .btn-primary,
.action-row .btn-ghost,
.action-row .action-download {
  font-size: .72rem;
  padding: .5rem .85rem;
  letter-spacing: .1em;
}

/* Download-fixed button — salmon emphasis (it's the money click) */
.action-download {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem .9rem;
  background: var(--salmon);
  color: #0b0b10;
  border: 2px solid var(--salmon);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .72rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .1em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-block);
  transition: transform .08s ease, box-shadow .12s ease;
}
.action-download:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #0b0b10; }
.action-download:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 #0b0b10; }
.action-download svg { width: 14px; height: 14px; }

/* -- Redesigned check-row (icon + rich text) ---------------- */
/* Override the older 4-column grid with a cleaner 2-column shape */
.check-row {
  grid-template-columns: 60px 1fr !important;
  align-items: flex-start;
  padding: 1rem 1.5rem;
  gap: 1.1rem;
}
.check-text {
  display: flex; flex-direction: column;
  gap: .28rem;
  min-width: 0;
}
.check-text .check-label {
  display: flex; align-items: center; gap: .6rem;
  flex-wrap: wrap;
}
.check-text .check-label-expected {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  color: var(--ink-mute);
  text-transform: none;
  letter-spacing: .02em;
}
.check-blurb {
  color: var(--ink-mute);
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .01em;
}
.check-detail {
  color: var(--ink);
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.5;
  font-family: var(--font);
}
.check-detail strong {
  color: var(--ink);
  font-weight: 800;
  font-family: var(--mono);
  font-size: .86em;
  padding: .05rem .3rem;
  background: var(--bg-alt);
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
}
.check-row.fail .check-detail strong {
  color: var(--coral);
  border-color: color-mix(in srgb, var(--coral) 35%, var(--border));
  background: var(--danger-soft);
}
.check-row.pass .check-detail strong {
  color: var(--mint);
  border-color: color-mix(in srgb, var(--mint) 30%, var(--border));
  background: var(--mint-dim);
}

/* Optional explainer shown when an expected value had to shift (e.g.
   the silence target shrinks for a file already close to the duration
   ceiling). Kept deliberately quiet so it doesn't compete with the
   top-line "Got X. Spec needs Y." sentence. */
.check-note {
  margin-top: .35rem;
  padding: .4rem .55rem;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--ink-soft);
  background: var(--bg-alt);
  border-left: 3px solid var(--border);
  border-radius: var(--radius-xs);
  font-style: italic;
}

/* -- Transcription pane tweaks (sits inside pane-host) ------ */
.pane-host .transcription-panel {
  border-top: none;
}

/* -- About modal · centered MIK logo ------------------------ */
#about-dialog .dialog-body {
  padding: 1.5rem 1.6rem 1.7rem;
}
.about-brand {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .9rem;
  padding: .4rem 0 1rem;
  border-bottom: 1.5px solid var(--border);
  margin-bottom: 1.1rem;
}
.about-brand .brand-mark {
  width: 92px; height: 92px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-alt);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-block-lg);
  color: var(--salmon);
  transition: transform .2s ease;
}
.about-brand .brand-mark:hover { transform: translate(-2px, -2px); }
.about-brand .brand-mark svg { width: 58px; height: 58px; }
.about-brand .brand-text {
  display: flex; flex-direction: column; gap: .2rem;
  align-items: center;
}
.about-brand .brand-name {
  font-size: 1.35rem;
  letter-spacing: .04em;
}
.about-brand .brand-tag {
  font-size: .72rem;
  color: var(--ink-mute);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
}
.about-version {
  text-align: center;
  margin: 0 0 .9rem;
}
.about-desc {
  text-align: center;
  max-width: 46ch;
  margin-left: auto; margin-right: auto;
}

/* -- Settings dialog cleanup -------------------------------- */
#settings-dialog .dialog-body { gap: 1.1rem; }
#settings-dialog .field-inline {
  padding: .55rem .8rem;
  background: var(--bg-alt);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
}
#settings-dialog .field-divider {
  margin-top: .45rem;
  margin-bottom: 0;
}
#settings-dialog .field-divider span {
  color: var(--periwinkle);
  font-size: .68rem;
  letter-spacing: .2em;
}
#settings-dialog .field label {
  font-size: .66rem;
  color: var(--ink-mute);
}

/* -- Responsive tweaks (append) ----------------------------- */
@media (max-width: 720px) {
  .result-hero { font-size: 1.2rem; padding: 1.1rem 1rem; letter-spacing: .18em; }
  .result-actions { padding: .75rem .9rem; gap: .55rem; }
  .pane-tab { font-size: .66rem; padding: .4rem .7rem; }
  .action-download, .action-row .btn-primary, .action-row .btn-ghost {
    font-size: .66rem; padding: .4rem .7rem;
  }
  .check-row { grid-template-columns: 48px 1fr !important; padding: .85rem 1rem; gap: .75rem; }
  .about-brand .brand-mark { width: 76px; height: 76px; }
  .about-brand .brand-mark svg { width: 48px; height: 48px; }
}