:root {
  /* Talory brand palette */
  --navy: #0B1E3D;
  --coral: #FF6B47;
  --coral-700: #D54E2C;
  --coral-100: #FFE8E0;
  --coral-50:  #FFF4F0;
  --mist: #F5F2EC;
  --paper: #FFFFFF;
  --ink-muted: #5C6680;
  --ink-light: #8590A3;
  --line: #E5E1D6;
  --line-soft: #EFEAE0;

  /* Semantic tokens (mapped to brand) */
  --bg: var(--mist);
  --card: var(--paper);
  --border: var(--line);
  --text: var(--navy);
  --muted: var(--ink-muted);
  --accent: var(--coral);           /* CTAs + active accents */
  --accent-dark: var(--coral-700);
  --accent-soft: var(--coral-50);
  --ok: #2D9B6B;
  --warn: var(--coral-700);
  --err: #DC4A4A;
  --gate-on: #2D9B6B;
  --gate-off: var(--coral-700);
  --progress: #FFD2C6;              /* coral 200 */
  --progress-fill: var(--coral);

  font-family: 'Noto Sans SC', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'kern' 1;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
body { min-height: 100vh; }

/* HTML5 [hidden] attribute should always win over class-based display rules. */
[hidden] { display: none !important; }

/* ---------- login ---------- */
.login-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px;
}
.login-card {
  width: 360px; padding: 32px 32px 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.login-wordmark { width: 156px; height: auto; display: block; margin: 4px 0 0; }
.login-card h1 { margin: 0; font-size: 22px; }
.login-card .sub { margin: 6px 0 12px; color: var(--muted); font-size: 13px; }
.login-card label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.login-card input {
  padding: 9px 10px; font-size: 14px; border: 1px solid var(--border);
  border-radius: 6px; background: #fff; color: var(--text);
}
.login-card input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.login-card button {
  margin-top: 6px; padding: 10px 12px; font-size: 14px; font-weight: 600;
  background: var(--accent); color: #fff; border: 0; border-radius: 6px; cursor: pointer;
}
.login-card button:hover { background: var(--accent-dark); }
.err { color: var(--err); font-size: 13px; min-height: 18px; }

/* ---------- shared card ---------- */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

/* ---------- work layout ---------- */
.work-page { display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 18px; background: #fff; border-bottom: 1px solid var(--border);
}
.topbar .title { font-weight: 700; font-size: 15px; }
.topbar .role-tag {
  font-size: 11px; padding: 2px 7px; border-radius: 999px;
  background: var(--mist); color: var(--navy); margin-left: 4px; font-weight: 600;
  border: 1px solid var(--line);
}
.topbar .stats { display: flex; gap: 14px; margin-left: auto; }
.topbar .stat {
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1;
}
.topbar .stat .v { font-size: 14px; font-weight: 700; color: var(--text); }
.topbar .stat .k { font-size: 11px; color: var(--muted); margin-top: 2px; }
.topbar .user { display: flex; align-items: center; gap: 8px; margin-left: 14px; font-size: 13px; color: var(--muted); }
.topbar .logout-btn {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 12px;
}
.topbar .logout-btn:hover { color: var(--text); border-color: var(--text); }

/* language switcher pill (shared between top bar and login corner) */
.lang-switch { display: inline-flex; gap: 2px; padding: 2px; background: #eef0f5; border-radius: 6px; }
.lang-btn {
  border: 0; background: transparent; padding: 4px 9px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  border-radius: 4px; cursor: pointer; min-width: 30px;
}
.lang-btn:hover { color: var(--text); }
.lang-btn.is-active { background: #fff; color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.login-lang { position: fixed; top: 18px; right: 18px; }

.work-main {
  flex: 1; padding: 18px; display: grid; gap: 14px;
  grid-template-columns: minmax(0, 1fr);
  max-width: 980px; margin: 0 auto; width: 100%;
}

.seg-header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 12px 16px;
}
.seg-header .seg-id { font-weight: 700; font-size: 15px; }
.seg-header .seg-meta { font-size: 12px; color: var(--muted); }
.seg-header .file-name { font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }

/* ---------- audio player ---------- */
.player { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.player .controls { display: flex; align-items: center; gap: 12px; }
.player .play-btn {
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--accent); color: #fff; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex: 0 0 auto;
}
.player .play-btn:hover { background: var(--accent-dark); }
.player .play-btn:disabled { background: #cbd5e1; cursor: not-allowed; }
.player .time { font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: var(--muted); min-width: 90px; }
.player .speed { display: inline-flex; gap: 2px; padding: 2px; background: #eef0f5; border-radius: 6px; }
.player .speed-btn {
  border: 0; background: transparent; padding: 4px 8px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  border-radius: 4px; cursor: pointer;
}
.player .speed-btn:hover { color: var(--text); }
.player .speed-btn.is-active { background: #fff; color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

.player .gate {
  margin-left: auto; font-size: 12px; padding: 4px 10px; border-radius: 999px;
  background: #fef3c7; color: var(--gate-off); font-weight: 600;
}
.player .gate.ok { background: #dcfce7; color: var(--gate-on); }

.bar-wrap {
  position: relative; height: 10px; background: #eef0f5; border-radius: 999px; overflow: hidden;
}
.bar-listened { position: absolute; top: 0; left: 0; height: 100%; background: var(--progress); }
.bar-cursor   { position: absolute; top: 0; height: 100%; width: 2px; background: var(--progress-fill); }

/* ---------- text editor ---------- */
.editor { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.editor .original {
  background: #f3f4f7; border: 1px dashed var(--border); border-radius: 6px;
  padding: 10px 12px; font-size: 13px; color: var(--muted); white-space: pre-wrap;
}
.editor .original .label { font-size: 11px; color: var(--muted); display: block; margin-bottom: 4px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.editor textarea {
  width: 100%; min-height: 110px; padding: 10px 12px;
  font-size: 15px; line-height: 1.6; color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  font-family: inherit; resize: vertical;
}
.editor textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }

.actions { display: flex; gap: 10px; align-items: center; padding: 12px 16px; }
.actions .spacer { flex: 1; }
.btn {
  padding: 9px 16px; font-size: 14px; font-weight: 600;
  border-radius: 6px; cursor: pointer; border: 1px solid transparent;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-dark); }
.btn-primary:disabled { background: #cbd5e1; cursor: not-allowed; }
.btn-ghost { background: #fff; border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--muted); }
.btn-flag { background: #fff; border-color: #fcd9c1; color: var(--warn); }
.btn-flag:hover:not(:disabled) { background: #fff7ed; border-color: var(--warn); }
.btn-flag:disabled { opacity: 0.5; cursor: not-allowed; }

.hint { font-size: 12px; color: var(--muted); }
.hint kbd {
  background: #eef0f5; border: 1px solid var(--border); border-bottom-width: 2px;
  padding: 1px 5px; border-radius: 4px; font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}

.empty {
  padding: 40px; text-align: center; color: var(--muted);
}
.empty h2 { color: var(--text); }

/* toast */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: #1a1d24; color: #fff; padding: 8px 14px; border-radius: 6px;
  font-size: 13px; opacity: 0; transition: opacity .2s ease; pointer-events: none;
  z-index: 10;
}
.toast.show { opacity: 1; }
.toast.ok  { background: #15803d; }
.toast.err { background: #b91c1c; }

/* ============================================================
   ADMIN CONSOLE
   ============================================================ */
.admin-page { display: flex; flex-direction: column; min-height: 100vh; }
.topbar .tabs { display: inline-flex; gap: 2px; margin-left: 20px; padding: 2px; background: #eef0f5; border-radius: 6px; }
.topbar .tab {
  border: 0; background: transparent; padding: 5px 12px;
  font-size: 13px; font-weight: 600; color: var(--muted);
  border-radius: 4px; cursor: pointer;
}
.topbar .tab:hover { color: var(--text); }
.topbar .tab.is-active { background: #fff; color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.topbar-link {
  margin-left: 12px; font-size: 12px; color: var(--muted);
  text-decoration: none; padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px;
}
.topbar-link:hover { color: var(--text); border-color: var(--text); }
.role-tag.admin-tag { background: var(--coral-100); color: var(--coral-700); border-color: var(--coral-100); }

.admin-main { flex: 1; padding: 18px; max-width: 1280px; width: 100%; margin: 0 auto; }
.panel { display: flex; flex-direction: column; gap: 14px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-header h2 { margin: 0; font-size: 18px; }
.panel-header .inline-select {
  padding: 6px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; background: #fff;
}

.kpi-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.kpi {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 2px;
}
.kpi-label { font-size: 12px; color: var(--muted); }
.kpi-value { font-size: 22px; font-weight: 700; line-height: 1.2; }
.kpi-sub   { font-size: 12px; color: var(--muted); }

.data-table {
  width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; font-size: 13px;
}
.data-table th, .data-table td {
  padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.data-table th { background: #f9fafc; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table .muted { color: var(--muted); font-size: 12px; }
.empty-row { text-align: center; color: var(--muted); padding: 28px !important; }

.form-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.form-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); flex: 1; min-width: 180px; }
.form-row input, .form-row select {
  padding: 8px 10px; font-size: 14px; border: 1px solid var(--border); border-radius: 6px; background: #fff;
}
.form-row input:focus, .form-row select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.checkbox-row { flex-direction: row !important; align-items: center; gap: 6px; flex: 0 0 auto !important; min-width: auto !important; }
.checkbox-row input { width: auto; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; }

.link-btn {
  background: transparent; border: 0; color: var(--accent); cursor: pointer; padding: 0;
  font-size: 12px; text-decoration: underline;
}
.link-btn.warn { color: var(--warn); }
.link-btn:hover { opacity: .8; }

.problems-list { display: grid; gap: 10px; }
.problem-card { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.problem-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.problem-head .seg-id { font-weight: 700; margin-right: 8px; }
.problem-head .file-name { font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.problem-text { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.problem-text .kv { display: flex; gap: 8px; }
.problem-text .kv .k {
  flex: 0 0 110px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
  padding-top: 2px; font-weight: 600;
}
.problem-actions { display: flex; gap: 10px; justify-content: flex-end; }
.problem-card audio { width: 100%; }

/* topbar tweaks for new routed layout */
.topbar .spacer { flex: 1; }
.topbar a.title { color: inherit; text-decoration: none; }
.topbar a.title:hover { color: var(--accent); }

/* breadcrumb */
.breadcrumb {
  background: #fff; border-bottom: 1px solid var(--border);
  padding: 8px 18px; font-size: 12px; display: flex; align-items: center; gap: 6px;
}
.breadcrumb .crumb { color: var(--muted); text-decoration: none; }
.breadcrumb a.crumb:hover { color: var(--accent); text-decoration: underline; }
.breadcrumb .crumb.current { color: var(--text); font-weight: 600; }
.breadcrumb .sep { color: var(--border); }

/* sub-page header actions row */
.header-actions { display: flex; align-items: center; gap: 10px; }

/* section card */
.section-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-head h3 { margin: 0; font-size: 14px; }
.section-head .link { font-size: 12px; color: var(--accent); text-decoration: none; }
.section-head .link:hover { text-decoration: underline; }

/* trend chart */
.trend-chart { width: 100%; }
.trend-svg { display: block; width: 100%; height: auto; max-height: 100px; }
.trend-svg .bar-annotation { fill: var(--navy); opacity: 0.85; }
.trend-svg .bar-qc { fill: var(--coral); opacity: 0.95; }
.trend-svg .axis { stroke: var(--border); stroke-width: 1; }
.trend-svg .axis-label { fill: var(--muted); font-size: 9px; }
.trend-svg .bar-label  { fill: var(--muted); font-size: 9px; }
#trend-legend { font-size: 11px; color: var(--muted); }
.legend-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 2px; vertical-align: 0; margin-right: 3px;
}
.legend-dot.dot-annotation { background: var(--navy); }
.legend-dot.dot-qc { background: var(--coral); }

/* compact data table */
.data-table.compact th, .data-table.compact td { padding: 6px 10px; }
.data-table .link {
  color: var(--accent); text-decoration: none; font-size: 12px;
}
.data-table .link:hover { text-decoration: underline; }
.data-table .link.warn { color: var(--warn); }

/* pagination */
.pagination {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 8px 0; font-size: 13px;
}
.pagination .link-btn {
  border: 1px solid var(--border); padding: 4px 10px; border-radius: 6px;
  text-decoration: none; background: #fff; color: var(--text);
}
.pagination .link-btn:disabled { color: var(--border); cursor: not-allowed; }
.pagination .link-btn:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }

/* date input matches inline-select */
input[type="date"].inline-select {
  font: inherit; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: #fff;
}

/* ============================================================
   QC WORKSPACE
   ============================================================ */
.qc-page { display: flex; flex-direction: column; min-height: 100vh; }
.qc-main { flex: 1; padding: 14px 18px 30px; max-width: 980px; width: 100%; margin: 0 auto; }

/* sticky stats banner */
.qc-stats {
  position: sticky; top: 0; z-index: 8;
  background: var(--paper); border-bottom: 1px solid var(--border);
  display: flex; gap: 6px; padding: 10px 18px; overflow-x: auto;
}
.qc-stat {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px;
  padding: 4px 14px; border-right: 1px dashed var(--line);
  min-width: 92px;
}
.qc-stat:last-child { border-right: 0; }
.qc-stat-k { font-size: 10px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.qc-stat-v { font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.1; }
.qc-stat-v.warn { color: var(--coral-700); }
.qc-stat-sub { font-size: 10px; color: var(--muted); }

.qc-view { display: flex; flex-direction: column; gap: 14px; }

/* ASR reference line, attached under the player */
.asr-ref {
  display: flex; gap: 8px; align-items: baseline;
  padding: 4px 16px 0; font-size: 12px; color: var(--muted);
  line-height: 1.55;
}
.asr-ref .ref-tag {
  flex-shrink: 0; font-size: 9px; font-weight: 700; letter-spacing: 0.6px;
  background: var(--mist); color: var(--ink-muted); border: 1px solid var(--line);
  padding: 1px 5px; border-radius: 3px; line-height: 1.4;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* annotator submission zone — primary work surface, click-to-edit */
.annot-zone { padding: 8px 16px 0; }
.annot-zone-head {
  display: flex; align-items: baseline; gap: 10px; justify-content: space-between;
  margin-bottom: 6px;
}
.annot-zone-head .label {
  font-size: 11px; font-weight: 600; color: var(--muted);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.annot-zone-head .hint { font-size: 11px; color: var(--muted); }
.annot-view {
  padding: 12px 14px; min-height: 110px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--paper);
  font-size: 15px; line-height: 1.6; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
  cursor: not-allowed; transition: background 0.12s, border-color 0.12s;
}
.annot-zone.can-edit .annot-view { cursor: text; }
.annot-zone.can-edit .annot-view:hover {
  border-color: var(--coral); background: var(--coral-50);
}
.annot-edit {
  width: 100%; min-height: 110px;
  padding: 12px 14px; font-family: inherit;
  font-size: 15px; line-height: 1.6; color: var(--text);
  border: 1px solid var(--coral); border-radius: 8px;
  background: var(--paper); resize: vertical;
}
.annot-edit:focus { outline: 2px solid var(--coral); outline-offset: -1px; }

/* annotator info — inline inside the segment header, NO standalone pill */
.annotator-inline {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 12px; color: var(--muted); flex-wrap: wrap;
}
.annotator-inline .sep { color: var(--ink-light); }
.annotator-inline .ann-name { color: var(--text); font-weight: 600; }
.annotator-inline .ann-warn-tag {
  background: var(--coral-700); color: #fff; font-weight: 700;
  padding: 1px 6px; border-radius: 4px; font-size: 10px; letter-spacing: 0.2px;
}
.annotator-inline.is-warn .ann-name { color: var(--coral-700); }

/* Compact single-item header: one row with back-arrow + meta + annotator + file toggle */
.seg-info-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px 4px;
}
.seg-info-row .seg-id { font-weight: 700; font-size: 15px; }
.seg-info-row .seg-meta { font-size: 12px; color: var(--muted); }
.back-to-list {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 6px; color: var(--muted);
  text-decoration: none; font-size: 14px; flex-shrink: 0;
}
.back-to-list:hover { color: var(--coral); border-color: var(--coral); }
.seg-file-toggle {
  width: 26px; height: 26px; padding: 0; margin-left: auto;
  border: 1px solid var(--border); border-radius: 6px; background: #fff;
  font-size: 13px; cursor: pointer; color: var(--muted); line-height: 1;
}
.seg-file-toggle:hover { color: var(--coral); border-color: var(--coral); }
.seg-file-line {
  padding: 0 16px 8px; font-size: 11px; color: var(--ink-muted);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  word-break: break-all; line-height: 1.5;
}

/* diff highlight: annotator's edits relative to original ASR */
.annotator-text { background: #F9F8F2 !important; border-color: #EDE6D2 !important; }
/* additions — warm coral background */
.diff-add {
  background: var(--coral-100); color: var(--coral-700); padding: 0 3px; border-radius: 3px;
  font-weight: 600;
}
/* deletions — small, faded, strikethrough showing what was removed.
   Sits inline so the reviewer can see exactly what the annotator cut without
   breaking the reading flow of the new text. */
.diff-del {
  font-size: 0.78em; color: var(--ink-light); opacity: 0.85;
  text-decoration: line-through; text-decoration-color: rgba(133,144,163,0.7);
  text-decoration-thickness: 1px;
  margin: 0 1px; padding: 0 2px;
  background: rgba(229,225,214,0.45); border-radius: 2px;
  vertical-align: 1px;
  cursor: help;
}

/* batch list annotator with warning */
.ann-name.is-warn-inline { color: var(--coral-700); }
.ann-warn-dot { color: var(--coral-700); margin-left: 4px; font-weight: 700; }

/* Queue list — clickable rows + small status tags */
.data-table tr.row-clickable { cursor: pointer; }
.data-table tr.row-clickable:hover { background: var(--coral-50); }

/* QC queue table — explicit column widths so text-preview gets the lion's share */
.queue-table { table-layout: fixed; width: 100%; }
.queue-table th.col-sample,
.queue-table td.col-sample  { width: 72px; vertical-align: top; }
.queue-table th.col-sample div, .queue-table td.col-sample .seg-id { font-weight: 700; }
.queue-table th.col-ann,
.queue-table td.col-ann     { width: 140px; }
.queue-table th.col-edited,
.queue-table td.col-edited  { width: 76px; }
.queue-table th.col-status,
.queue-table td.col-status  { width: 96px; }
.queue-table th.col-action,
.queue-table td.col-action  { width: 96px; }
.queue-table th.col-text,
.queue-table td.col-text    { vertical-align: top; }

/* Text preview: 2-line clamp with an expand toggle for long content */
.text-cell { position: relative; padding-right: 22px; }
.text-cell .text-content {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.5; font-size: 13px;
}
.text-cell.expanded .text-content {
  display: block; overflow: visible; -webkit-line-clamp: unset;
}
.text-expand-btn {
  position: absolute; right: 0; top: 2px;
  background: var(--mist); border: 1px solid var(--line); color: var(--ink-muted);
  width: 18px; height: 18px; border-radius: 4px;
  font-size: 10px; line-height: 1; cursor: pointer; padding: 0;
}
.text-expand-btn:hover { color: var(--coral); border-color: var(--coral); }

/* Project name in DA/QA topbar — clickable placeholder for future switching */
.title.is-switchable {
  cursor: pointer; user-select: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s, color 0.15s;
}
.title.is-switchable:hover { border-bottom-color: var(--coral); color: var(--coral); }
.title.is-switchable::after {
  content: ' ⌄'; font-size: 0.8em; opacity: 0.55; font-weight: 700;
  margin-left: 1px; letter-spacing: -1px;
}
.tag {
  display: inline-block; font-size: 10px; font-weight: 600;
  padding: 1px 7px; border-radius: 999px; border: 1px solid transparent;
  letter-spacing: 0.2px;
}
.tag-edited  { background: var(--coral-100); color: var(--coral-700); }
.tag-passed  { background: #DCFCE7; color: #15803d; }
.tag-failed  { background: var(--coral-100); color: var(--coral-700); }
.tag-claimed { background: #E8EBF1; color: #3F506E; }

/* Make the unfinished stat clickable */
.qc-stat.is-clickable { cursor: pointer; }
.qc-stat.is-clickable:hover .qc-stat-v { color: var(--coral); }
.qc-stat.is-clickable .qc-stat-k::after {
  content: ' →'; opacity: 0.5; font-weight: 700;
}

/* low-rate annotator/QC row highlight on people-detail page */
.data-table tr.row-warn { background: #FFF4F0; }
.data-table tr.row-warn:hover { background: #FFE8E0; }
.data-table .rate-warn { color: var(--coral-700); font-weight: 600; }
.ann-warn-tag {
  display: inline-block; background: var(--coral-700); color: #fff;
  font-weight: 700; padding: 0 6px; border-radius: 4px; font-size: 10px;
  margin-left: 4px; vertical-align: 1px;
}

/* Talory brand mark in topbar */
.brand-mark {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
}
.brand-icon { width: 28px; height: 28px; flex-shrink: 0; display: block; }
.brand-divider {
  width: 1px; height: 16px; background: var(--line); margin: 0 4px; flex-shrink: 0;
}
.brand-wordmark { width: 80px; display: block; flex-shrink: 0; }

/* project settings gear in topbar */
.brand-gear {
  border: 1px solid var(--border); background: #fff; color: var(--muted);
  width: 26px; height: 26px; border-radius: 999px; font-size: 14px; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  margin-left: 8px; padding: 0;
}
.brand-gear:hover { color: var(--coral); border-color: var(--coral); }

/* inline warning text inside forms / modals */
.warn-inline { color: var(--coral-700); font-size: 12px; }

/* project type tag in topbar title — coral accent for ASR */
.project-type-tag {
  font-size: 10px; padding: 1px 6px; border-radius: 4px;
  background: var(--coral-100); color: var(--coral-700); font-weight: 700; margin-left: 6px;
  vertical-align: 2px; letter-spacing: 0.5px;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
}

/* user area in topbar (with account link) */
.topbar .user { display: flex; align-items: center; gap: 8px; margin-left: 14px; font-size: 13px; color: var(--muted); }

/* inline tabs (e.g., DA/QA inside a section) */
.inline-tabs { display: inline-flex; gap: 2px; padding: 2px; background: #eef0f5; border-radius: 6px; }
.inline-tab {
  border: 0; background: transparent; padding: 5px 14px; font-size: 13px;
  font-weight: 600; color: var(--muted); border-radius: 4px; cursor: pointer;
}
.inline-tab:hover { color: var(--text); }
.inline-tab.is-active { background: #fff; color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* sortable table header */
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { background: #f3f4f7; color: var(--text); }
.data-table th.sortable.is-sorted { color: var(--accent); }
.data-table th .sort-arrow { display: inline-block; min-width: 10px; }

/* modal dialog */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(11, 30, 61, 0.42); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal-card {
  background: var(--paper); border-radius: 14px; padding: 24px 26px;
  width: 100%; max-width: 460px; box-shadow: 0 12px 32px rgba(11, 30, 61, 0.18);
}
.modal-card h3 { margin: 0 0 18px; font-size: 16px; }
.modal-card .form-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.modal-card .form-field input,
.modal-card .form-field select {
  padding: 8px 10px; font-size: 14px; border: 1px solid var(--border);
  border-radius: 6px; background: #fff; color: var(--text);
}
.modal-card .form-field input:focus,
.modal-card .form-field select:focus { outline: 2px solid var(--coral); outline-offset: -1px; border-color: var(--coral); }
.modal-card .hint { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.modal-card .form-actions { margin-top: 16px; }

/* QC mode tag in batch list */
.qc-mode-tag {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  font-weight: 600; border: 1px solid transparent; white-space: nowrap;
}
.qc-mode-tag.mode-full           { background: var(--mist);       color: var(--navy);       border-color: var(--line); }
.qc-mode-tag.mode-per-item-sample{ background: #E8EBF1;           color: #2A3B5D;           border-color: #D2D8E1; }
.qc-mode-tag.mode-quick-sample   { background: var(--coral-100);  color: var(--coral-700);  border-color: var(--coral-100); }

.qc-target { font-size: 12px; color: var(--text); display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: baseline; }
.qc-target .muted { font-size: 10px; }

/* Sent-back banner on the annotator workspace */
.sent-back-banner {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 16px 0; padding: 8px 12px;
  background: var(--coral-100); border: 1px solid var(--coral); border-radius: 8px;
  color: var(--coral-700); font-size: 13px; font-weight: 600;
}
.sent-back-banner .warn-icon { font-size: 16px; }

/* Topbar "change password" button — same shape as logout, neutral label */
.topbar .change-pwd-btn {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 12px;
}
.topbar .change-pwd-btn:hover { color: var(--text); border-color: var(--text); }

/* "×" close button (e.g., on the account-management panel header) */
.btn-close {
  border: 1px solid var(--border); background: #fff; color: var(--muted);
  width: 32px; height: 32px; border-radius: 6px; font-size: 20px; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 300;
}
.btn-close:hover { color: var(--err); border-color: var(--err); background: #fef2f2; }

/* count·duration cell: count on top (primary), duration below (tiny secondary) */
.cd { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.cd-c { font-size: 14px; font-weight: 600; color: var(--text); }
.cd-s { font-size: 10px; color: var(--muted); margin-top: 1px; }
.data-table.compact .cd-c { font-size: 13px; }

/* user-name cell: 姓名 (primary) on top, 用户名 (secondary mono) below.
   Mirrors the count·duration stacked structure for visual consistency. */
.user-cell { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.user-cell .user-name { font-size: 14px; font-weight: 600; color: var(--text); }
.user-cell .user-login {
  font-size: 10px; color: var(--muted); margin-top: 1px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}
.data-table.compact .user-cell .user-name { font-size: 13px; }
/* Single-line variant for topbar / inline banners. */
.user-login-inline {
  font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 4px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}

/* ---------------- Multi-batch export / delivery ---------------- */

/* Always-visible toolbar above the batch table. Disabled state when no rows
   are checked still discoverable — keeps the export feature visible without
   requiring the user to click checkboxes first. */
.export-toolbar {
  display: flex;
  align-items: center; gap: 12px;
  margin: 8px 0 12px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(11, 30, 61, 0.04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Highlight only once the user has selected something. */
.export-toolbar.is-active {
  border-color: var(--coral);
  box-shadow: 0 1px 3px rgba(255, 107, 71, 0.18);
}
.export-toolbar-text { font-size: 13px; color: var(--muted); }
.export-toolbar.is-active .export-toolbar-text { color: var(--text); }
.export-toolbar-text strong { color: var(--coral); margin: 0 4px; font-size: 15px; }
.export-toolbar-hint { font-size: 12px; color: var(--muted); margin-left: auto; }
.export-toolbar.is-active .export-toolbar-hint { display: none; }
.export-toolbar .btn { padding: 6px 14px; font-size: 13px; }
.export-toolbar .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Selection column — narrow, centered. */
.data-table th.col-select,
.data-table td.col-select {
  width: 32px; padding-left: 10px; padding-right: 6px;
  text-align: center;
}
.data-table input[type="checkbox"].batch-select,
.data-table input[type="checkbox"]#batches-select-all {
  cursor: pointer; margin: 0; vertical-align: middle;
}
.data-table input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.4; }

/* 3-state delivered cell — working / ready / delivered.
   Color hierarchy: working = neutral grey (in-progress), ready = coral
   (call-to-action), delivered = navy (terminal/positive). */
.delivered-cell { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tag.tag-working {
  background: rgba(92, 102, 128, 0.10);
  color: var(--muted);
  border: 1px solid rgba(92, 102, 128, 0.20);
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
}
.tag.tag-ready {
  background: rgba(255, 107, 71, 0.10);
  color: var(--coral);
  border: 1px solid rgba(255, 107, 71, 0.35);
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
}
.tag.tag-delivered {
  background: rgba(11, 30, 61, 0.08);
  color: var(--navy);
  border: 1px solid rgba(11, 30, 61, 0.18);
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
}
/* Collapsed last-export icon — click toggles file-name reveal. */
.link-btn.icon-only {
  padding: 0; font-size: 14px; line-height: 1;
  background: transparent; border: none; cursor: pointer;
  color: var(--muted);
}
.link-btn.icon-only:hover { color: var(--coral); }
.export-fname {
  font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  word-break: break-all;
  max-width: 220px;
}