/* ═══════════════════════════════════════════════════════════════
   FinSight — Enterprise Desktop UI
   Liquid Glass · 5-Theme · Dark/Light · Sidebar Shell
═══════════════════════════════════════════════════════════════ */

/* Inter & JetBrains Mono — `display=optional` keeps the system fallback if
   web fonts haven't loaded within 100ms (Phase 1.5 增补 3, no FOUT flash). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=optional');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=optional');

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   THEME / SURFACE / SHADOW / RADIUS / LAYOUT tokens have moved to
   tokens.css (single source of truth). This file now only owns
   component rules.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

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

body {
  font-family: "Inter","PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
  /* ss01 = stylistic alternate (one-storey a in Inter); cv11 = single-storey g.
     palt = proportional alternate widths in CJK (PingFang/YaHei honor it),
     which evens out the visual rhythm of CJK runs interleaved with Latin. */
  font-feature-settings: "ss01", "cv11", "palt";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.3s, color 0.3s;
}

/* Background gradient for depth */
body::before {
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 10% -10%, rgba(var(--accent-rgb),0.06) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(var(--accent-rgb),0.04) 0%, transparent 40%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(var(--accent-rgb),0.02) 0%, transparent 60%);
  transition: background 0.4s;
}

/* Financial number typography — tabular figures for aligned columns */
.stat-value, .bento-stat-value, .co-count, .cell-val,
.stmt-table td:not(:first-child), .metric-card .m-value,
.health-score-num, .ticker-val,
/* Pro UI numeric surfaces */
.pro-kpi-value, .pro-kpi-meta, .pro-insight-num,
.pro-grade-badge, .pro-score-num, .pro-trend-num,
.score-num, .score-max, .score-detail,
.dash-company-count, .stat-num, .kpi-num,
.fin-num {
  font-feature-settings: "tnum" 1, "ss01" 1;
  font-variant-numeric: tabular-nums;
}

/* Mono font for financial data */
.fin-mono {
  font-family: "JetBrains Mono", "SF Mono", "Fira Code", monospace;
  font-feature-settings: "tnum" 1;
}

/* Gain/Loss color utilities */
.val-gain { color: var(--gain) !important; }
.val-loss { color: var(--loss) !important; }
.val-gain-bg { background: var(--gain-dim); color: var(--gain); }
.val-loss-bg { background: var(--loss-dim); color: var(--loss); }

/* Reusable financial-number helpers */
.fin-num.neg { color: var(--loss); }
.fin-num.pos { color: var(--gain); }

/* ── Theme transition (active only while toggling) ─────────────── */
/* Apply a brief cross-element color/bg transition when html.theme-transitioning
   is on. Scoped to color properties so layout/transform stays snappy. */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition:
    background-color 0.28s ease,
    color 0.28s ease,
    border-color 0.28s ease,
    fill 0.28s ease,
    stroke 0.28s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-transitioning,
  html.theme-transitioning *,
  html.theme-transitioning *::before,
  html.theme-transitioning *::after { transition: none !important; }
}
/* View Transition rules — moved to motion.css (uses --dur-slow + --ease-spring). */

/* ── Metric watch modal ────────────────────────────────────────── */
.watch-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 14px; height: 14px;
  margin-left: 4px;
  padding: 0 4px;
  background: var(--warning, #fbbf24);
  color: #1a1f2e;
  font-size: 9.5px; font-weight: 700;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.watch-modal-overlay {
  position: fixed; inset: 0; z-index: 9550;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
  padding: 20px;
}
.watch-modal-overlay.open { opacity: 1; pointer-events: auto; }
.watch-modal {
  width: 560px; max-width: 100%; max-height: 80vh;
  background: var(--bg-elevated);
  border: 1px solid var(--glass-border-md);
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  display: flex; flex-direction: column;
  transform: scale(0.96); transition: transform 0.2s ease;
}
.watch-modal-overlay.open .watch-modal { transform: scale(1); }
.watch-modal-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--glass-border);
}
.watch-modal-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.watch-modal-sub { font-size: 11px; color: var(--text-muted); }
.watch-modal-close {
  margin-left: auto;
  width: 28px; height: 28px;
  background: transparent; border: 0;
  color: var(--text-muted); font-size: 22px; line-height: 1;
  cursor: pointer; border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.watch-modal-close:hover { color: var(--text-primary); background: var(--glass-bg-hover); }
.watch-modal-body {
  flex: 1; overflow-y: auto;
  padding: 14px 18px 18px;
}
.watch-add-form {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 2fr auto;
  gap: 6px;
  margin-bottom: 14px;
}
@media (max-width: 640px) { .watch-add-form { grid-template-columns: 1fr 1fr; } }
.watch-add-form select,
.watch-add-form input {
  padding: 5px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 12.5px;
}
.watch-add-form select:focus,
.watch-add-form input:focus { outline: none; border-color: var(--accent); }
.watch-add-form button { padding: 4px 14px; font-size: 12.5px; }
.watch-list { display: flex; flex-direction: column; gap: 6px; }
.watch-loading,
.watch-empty {
  padding: 24px 12px;
  color: var(--text-muted);
  font-size: 12.5px; text-align: center;
}
.watch-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
}
.watch-row-main { flex: 1; min-width: 0; }
.watch-row-rule {
  display: flex; gap: 6px; align-items: baseline;
  font-size: 13px;
}
.watch-metric { font-weight: 600; color: var(--text-primary); }
.watch-op { color: var(--text-muted); font-size: 12px; }
.watch-threshold { color: var(--accent); font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.watch-note { margin-top: 4px; font-size: 11.5px; color: var(--text-muted); }
.watch-row-meta {
  margin-top: 4px;
  font-size: 11px; color: var(--text-secondary);
  display: flex; align-items: center; gap: 8px;
  font-variant-numeric: tabular-nums;
}
.watch-trig-pill {
  background: rgba(251,191,36,0.16);
  color: var(--warning);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.watch-row.watch-triggered {
  border-color: rgba(251,191,36,0.4);
  background: rgba(251,191,36,0.04);
}
.watch-del {
  width: 22px; height: 22px;
  background: transparent; border: 0;
  color: var(--text-muted); font-size: 12px;
  cursor: pointer; border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.watch-del:hover { color: var(--danger); background: rgba(248,113,113,0.1); }
@media (prefers-reduced-motion: reduce) {
  .watch-modal-overlay,
  .watch-modal { transition: none; }
}

/* ── Period diff modal ─────────────────────────────────────────── */
.diff-modal-overlay {
  position: fixed; inset: 0; z-index: 9600;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
  padding: 20px;
}
.diff-modal-overlay.open { opacity: 1; pointer-events: auto; }
.diff-modal {
  width: 720px; max-width: 100%; max-height: 80vh;
  background: var(--bg-elevated);
  border: 1px solid var(--glass-border-md);
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  display: flex; flex-direction: column;
  transform: scale(0.96); transition: transform 0.2s ease;
}
.diff-modal-overlay.open .diff-modal { transform: scale(1); }
.diff-modal-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--glass-border);
}
.diff-modal-head h3 {
  margin: 0; font-size: 14px; font-weight: 700;
  color: var(--text-primary);
}
.diff-modal-controls {
  display: flex; align-items: center; gap: 6px;
  margin-left: auto;
}
.diff-modal-controls select {
  padding: 4px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.diff-modal-close {
  width: 28px; height: 28px;
  background: transparent; border: 0;
  color: var(--text-muted); font-size: 22px; line-height: 1;
  cursor: pointer; border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.diff-modal-close:hover { color: var(--text-primary); background: var(--glass-bg-hover); }
.diff-modal-body {
  flex: 1; overflow-y: auto;
  padding: 4px 18px 18px;
}
.diff-loading {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.diff-table {
  width: 100%; border-collapse: collapse;
  font-size: 12.5px;
}
.diff-table th {
  position: sticky; top: 0;
  background: var(--bg-elevated);
  text-align: left; padding: 8px 10px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--glass-border);
}
.diff-table td {
  padding: 7px 10px;
  border-bottom: 1px dashed var(--glass-border);
  font-variant-numeric: tabular-nums;
}
.diff-table .num-col { text-align: right; }
.diff-table .diff-label { color: var(--text-secondary); font-weight: 500; }
.diff-table tr:hover td { background: rgba(var(--accent-rgb), 0.04); }
.diff-table tr:last-child td { border-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .diff-modal-overlay,
  .diff-modal { transition: none; }
}

/* ── Onboarding (3-step first-run intro) ───────────────────────── */
.onboarding-overlay {
  position: fixed; inset: 0; z-index: 9700;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease;
  padding: 20px;
}
.onboarding-overlay.open { opacity: 1; pointer-events: auto; }
.onboarding-card {
  position: relative;
  width: 480px; max-width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--glass-border-md);
  border-radius: 14px;
  padding: 36px 40px 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  transform: scale(0.96);
  transition: transform 0.22s ease;
}
.onboarding-overlay.open .onboarding-card { transform: scale(1); }
.onboarding-skip {
  position: absolute; top: 12px; right: 14px;
  background: transparent; border: 0;
  color: var(--text-muted); font-size: 12px;
  cursor: pointer; padding: 4px 10px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.onboarding-skip:hover { color: var(--text-primary); background: var(--glass-bg-hover); }
.onboarding-icon {
  font-size: 36px;
  text-align: center;
  margin-bottom: 12px;
  filter: drop-shadow(0 2px 6px rgba(var(--accent-rgb), 0.25));
}
.onboarding-title {
  margin: 0 0 10px;
  font-size: 22px; font-weight: 700;
  text-align: center;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.onboarding-body {
  margin: 0 0 24px;
  font-size: 13.5px; line-height: 1.6;
  color: var(--text-secondary);
  text-align: center;
}
.onboarding-controls {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--glass-border);
}
.onboarding-dots {
  display: flex; gap: 6px;
}
.onboarding-dot {
  width: 7px; height: 7px;
  background: var(--glass-border-md);
  border-radius: 999px;
  transition: background 0.15s, transform 0.15s;
}
.onboarding-dot.active {
  background: var(--accent);
  transform: scale(1.3);
}
.onboarding-actions { display: flex; gap: 8px; }
@media (prefers-reduced-motion: reduce) {
  .onboarding-overlay,
  .onboarding-card,
  .onboarding-dot { transition: none; }
}

/* ── Per-metric note badge + popover ──────────────────────────── */
/* The badge sits between the existing copy-glyph and edit-pencil. It's
   only visible on hover when the cell has zero notes, but stays lit as
   an accent dot once at least one note exists. */
.cell-note {
  display: inline-flex; align-items: center; justify-content: center;
  position: absolute; right: 32px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  font-size: 11px;
  color: var(--text-muted);
  background: transparent;
  border: 0; border-radius: 3px;
  opacity: 0; cursor: pointer;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.editable-cell:hover .cell-note { opacity: 0.7; }
.cell-note.has-notes {
  opacity: 1;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.10);
}
.cell-note.has-notes::after {
  content: attr(data-count);
  position: absolute; top: -4px; right: -4px;
  min-width: 12px; height: 12px;
  padding: 0 3px;
  background: var(--accent);
  color: #fff;
  font-size: 9px; font-weight: 700; line-height: 12px;
  border-radius: 999px; text-align: center;
  pointer-events: none;
}
.cell-note:hover { opacity: 1; color: var(--accent); background: rgba(var(--accent-rgb), 0.16); }

.note-popover {
  position: fixed; z-index: 9500;
  width: 320px;
  background: var(--bg-elevated);
  border: 1px solid var(--glass-border-md);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  animation: note-pop-in 0.16s ease-out;
}
@keyframes note-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .note-popover { animation: none; } }
.note-pop-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--glass-border);
}
.note-pop-title {
  font-size: 12px; font-weight: 700;
  color: var(--text-primary);
}
.note-pop-close {
  margin-left: auto;
  background: transparent; border: 0;
  color: var(--text-muted); font-size: 18px; line-height: 1;
  cursor: pointer; padding: 0 4px;
  border-radius: 4px;
}
.note-pop-close:hover { color: var(--text-primary); background: var(--glass-bg-hover); }
.note-pop-body {
  max-height: 240px;
  overflow-y: auto;
  padding: 8px 14px;
}
.note-pop-loading,
.note-pop-empty {
  padding: 14px 4px;
  color: var(--text-muted);
  font-size: 12px; text-align: center;
}
.note-item {
  padding: 8px 0;
  border-bottom: 1px dashed var(--glass-border);
}
.note-item:last-child { border-bottom: 0; }
.note-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.note-author {
  font-weight: 600; font-size: 12px;
  color: var(--accent);
}
.note-ts {
  font-size: 10.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.note-del {
  margin-left: auto;
  width: 18px; height: 18px;
  background: transparent; border: 0;
  color: var(--text-muted); font-size: 11px;
  cursor: pointer; border-radius: 4px;
  opacity: 0;
  transition: opacity 0.12s, color 0.12s;
}
.note-item:hover .note-del { opacity: 0.7; }
.note-del:hover { opacity: 1; color: var(--danger); }
.note-body {
  font-size: 12.5px; line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap; word-break: break-word;
}
.note-mention {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 600;
}
.note-pop-form {
  display: grid; gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--glass-border);
  background: var(--bg-surface);
}
.note-pop-author,
.note-pop-text {
  width: 100%;
  padding: 6px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 12.5px;
  font-family: inherit;
  resize: vertical;
}
.note-pop-author:focus,
.note-pop-text:focus { outline: none; border-color: var(--accent); }
.note-pop-form button[type="submit"] {
  justify-self: end;
  padding: 4px 14px;
  font-size: 12px;
}

/* ── Batch upload review table ─────────────────────────────────── */
.batch-review {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px dashed var(--glass-border-md);
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.04);
}
.batch-review-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.batch-review-summary {
  font-size: 11px; color: var(--text-muted); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.batch-review-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.batch-review-table th {
  text-align: left;
  padding: 6px 8px;
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--glass-border);
}
.batch-review-table td {
  padding: 6px 8px;
  border-bottom: 1px dashed var(--glass-border);
  vertical-align: middle;
}
.batch-review-table tr:last-child td { border-bottom: 0; }
.bri-name {
  max-width: 220px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text-secondary);
  font-family: 'JetBrains Mono','SF Mono',monospace;
  font-size: 11.5px;
}
.bri-input {
  width: 100%;
  padding: 4px 8px;
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  color: var(--text-primary);
  font-size: 12px;
  transition: border-color 0.15s;
}
.bri-input:focus {
  border-color: var(--accent);
  outline: none;
}
.bri-input-narrow { max-width: 90px; }
.bri-period {
  font-variant-numeric: tabular-nums;
  font-weight: 500; color: var(--text-primary);
}
.bri-period small {
  margin-left: 4px;
  color: var(--text-muted); font-weight: 400;
}
.bri-period-empty { color: var(--warning); }
.bri-status { color: var(--text-muted); font-size: 11px; }
.bri-skip-btn {
  padding: 3px 10px;
  font-size: 11px;
  white-space: nowrap;
}
.bri-skipped { opacity: 0.45; }
.bri-skipped .bri-input { background: transparent; }

/* ── Company list filter chips ─────────────────────────────────── */
.company-filters {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0 12px;
  font-size: 12.5px;
}
.company-filter-label {
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 6px;
}
.company-filter-divider {
  width: 1px; height: 16px;
  background: var(--glass-border);
  margin: 0 4px;
}
.company-filter-summary {
  margin-left: auto;
  font-size: 11px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.company-chip {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.company-chip:hover {
  background: var(--glass-bg-hover);
  color: var(--text-primary);
}
.company-chip.active {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent);
  font-weight: 600;
}
.company-chip-toggle.active {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.45);
  color: var(--warning);
}
@media (prefers-reduced-motion: reduce) {
  .company-chip { transition: none; }
}

/* ── Investor brief (print-only) ───────────────────────────────── */
/* Always rendered into the DOM but hidden until exportInvestorBrief()
   adds .is-printing-brief to <body>. During that window everything
   except #print-brief is hidden so the browser's "Save as PDF" only
   captures the briefing. */
#print-brief { display: none; }
@media screen {
  body.is-printing-brief > * { display: none !important; }
  body.is-printing-brief #print-brief {
    display: block !important;
    background: #fff; color: #111;
    padding: 24px 32px;
    max-width: 900px; margin: 0 auto;
    font-family: "Inter","PingFang SC","Microsoft YaHei",sans-serif;
  }
}
@media print {
  /* In actual print, hide everything except the brief. */
  body > *:not(#print-brief) { display: none !important; }
  body.is-printing-brief > #print-brief { display: block !important; }
  #print-brief {
    display: block !important;
    background: #fff !important; color: #111 !important;
    padding: 16px 18px;
    font-family: "Inter","PingFang SC","Microsoft YaHei",sans-serif;
  }
  @page { size: A4; margin: 14mm 14mm; }
}
#print-brief .brief-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: 2px solid #111;
  padding-bottom: 10px; margin-bottom: 18px;
}
#print-brief .brief-id h1 { font-size: 24px; font-weight: 700; margin: 0; }
#print-brief .brief-ticker {
  display: inline-block; margin-left: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; color: #555;
  font-variant-numeric: tabular-nums;
}
#print-brief .brief-market {
  display: inline-block; margin-left: 8px;
  font-size: 12px; color: #777;
}
#print-brief .brief-meta { font-size: 11px; color: #555; text-align: right; line-height: 1.6; }
#print-brief .brief-section {
  margin-bottom: 18px;
  page-break-inside: avoid;
}
#print-brief .brief-section h2 {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #444; border-bottom: 1px solid #ccc;
  padding-bottom: 4px; margin: 0 0 10px;
}
#print-brief .brief-kpi-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
#print-brief .brief-kpi {
  border: 1px solid #ddd; border-radius: 4px;
  padding: 8px 10px;
}
#print-brief .brief-kpi-label {
  font-size: 9px; font-weight: 600; color: #777;
  text-transform: uppercase; letter-spacing: 0.06em;
}
#print-brief .brief-kpi-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px; font-weight: 700; color: #111;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
#print-brief .brief-kpi-meta {
  font-size: 10px; color: #666;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
#print-brief .brief-score-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
#print-brief .brief-score {
  border: 1px solid #ddd; border-radius: 4px;
  padding: 10px;
  text-align: center;
}
#print-brief .brief-score-title {
  font-size: 10px; font-weight: 600; color: #555;
  margin-bottom: 4px;
}
#print-brief .brief-score-value {
  font-size: 26px; font-weight: 700; color: #111;
  font-variant-numeric: tabular-nums;
}
#print-brief .brief-score-verdict {
  font-size: 11px; color: #444; margin-top: 2px;
}
#print-brief .brief-memo-body {
  font-size: 11.5px; line-height: 1.7; color: #222;
}
#print-brief .brief-memo-body h1,
#print-brief .brief-memo-body h2,
#print-brief .brief-memo-body h3 {
  font-size: 12px; margin: 12px 0 6px;
}
#print-brief .brief-warn-list {
  margin: 0; padding-left: 18px;
  font-size: 11px; color: #444; line-height: 1.55;
}
#print-brief .brief-foot {
  display: flex; justify-content: space-between;
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid #ccc;
  font-size: 10px; color: #777;
}

/* ── Validation warnings: bell + Drawer ────────────────────────── */
.warn-bell {
  position: relative;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--glass-border);
  border-radius: 6px; color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.warn-bell:hover { background: var(--glass-bg-hover); color: var(--text-primary); }
.warn-bell.has-warnings { color: var(--warning); border-color: rgba(251,191,36,0.45); }
.warn-bell-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: var(--danger);
  color: #fff;
  font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  line-height: 16px; text-align: center;
}
.warn-drawer-overlay {
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
  display: flex; justify-content: flex-end;
}
.warn-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.warn-drawer {
  width: 420px; max-width: 90vw;
  height: 100%;
  background: var(--bg-elevated);
  border-left: 1px solid var(--glass-border-md);
  box-shadow: -8px 0 32px rgba(0,0,0,0.35);
  transform: translateX(20px);
  transition: transform 0.22s ease;
  display: flex; flex-direction: column;
}
.warn-drawer-overlay.open .warn-drawer { transform: translateX(0); }
.warn-drawer-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--glass-border);
}
.warn-drawer-head h3 {
  font-size: 14px; font-weight: 700; margin: 0;
  color: var(--text-primary);
}
.warn-drawer-count {
  font-size: 11px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.warn-drawer-close {
  margin-left: auto;
  width: 28px; height: 28px;
  background: transparent; border: 0;
  color: var(--text-muted); font-size: 22px; line-height: 1;
  cursor: pointer; border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.warn-drawer-close:hover { color: var(--text-primary); background: var(--glass-bg-hover); }
.warn-drawer-body {
  flex: 1; overflow-y: auto;
  padding: 8px 12px 20px;
}
.warn-drawer-loading,
.warn-drawer-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.warn-drawer-empty .empty-icon { font-size: 32px; opacity: .9; }
.warn-row {
  display: block;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  text-decoration: none; color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.warn-row:hover {
  border-color: rgba(251,191,36,0.5);
  transform: translateY(-1px);
}
.warn-row-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  margin-bottom: 6px;
}
.warn-row-name {
  font-weight: 600; color: var(--text-primary);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.warn-row-period {
  font-size: 11px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.warn-row-count {
  font-size: 11px; font-weight: 600; color: var(--warning);
  background: rgba(251,191,36,0.14);
  padding: 2px 7px; border-radius: 999px;
}
.warn-issue-list {
  list-style: none; margin: 0; padding: 0 0 0 6px;
  font-size: 11.5px; color: var(--text-secondary);
}
.warn-issue {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 3px 0;
  border-top: 1px dashed var(--glass-border);
}
.warn-issue:first-child { border-top: 0; }
.warn-issue-name { color: var(--text-primary); font-weight: 500; }
.warn-issue-detail {
  color: var(--text-muted);
  font-size: 11px;
}
.warn-issue-more {
  font-size: 10.5px; color: var(--text-muted);
  padding-top: 4px; font-style: italic;
}
@media (prefers-reduced-motion: reduce) {
  .warn-drawer-overlay,
  .warn-drawer { transition: none; }
}

/* ── Detail page sticky TOC (right edge) ───────────────────────── */
/* Pinned at the right edge so it's always visible while reading the
   long detail page. Clicking an anchor scrolls; clicking a tab entry
   activates the corresponding pro-tab. Hidden on narrower screens to
   avoid stealing horizontal real estate. */
.pro-toc {
  position: fixed;
  right: 18px;
  top: calc(var(--titlebar-h, 48px) + 32px);
  z-index: 25;
  width: 132px;
  padding: 10px 6px;
  border: 1px solid var(--line, var(--glass-border));
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(10px);
  font-size: 12px;
  pointer-events: auto;
}
html.light .pro-toc {
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.pro-toc ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.pro-toc-sep {
  height: 1px;
  background: var(--line, var(--glass-border-md));
  margin: 6px 6px;
}
.pro-toc a,
.pro-toc button {
  display: block; width: 100%;
  padding: 5px 10px;
  background: transparent; border: 0;
  border-left: 2px solid transparent;
  color: var(--text-muted);
  font: inherit; text-align: left;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.pro-toc a:hover,
.pro-toc button:hover {
  color: var(--text-primary);
  background: rgba(var(--accent-rgb), 0.08);
}
.pro-toc a.active,
.pro-toc button.active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  border-left-color: var(--accent);
  font-weight: 600;
}
@media (max-width: 1280px) {
  .pro-toc { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pro-toc a, .pro-toc button { transition: none; }
}

/* ── Detail hero stock sparkline ───────────────────────────────── */
.pro-spark {
  display: flex; flex-direction: column;
  width: 144px; height: 56px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong, var(--glass-border-md));
  border-radius: 8px;
  background: var(--bg-elevated, var(--bg-surface));
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.pro-spark:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.06);
  transform: translateY(-1px);
}
.pro-spark-head {
  display: flex; align-items: baseline; gap: 6px;
}
.pro-spark-price {
  font-family: 'JetBrains Mono','SF Mono',Consolas,monospace;
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.pro-spark-change {
  font-size: 10.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.pro-spark-change.up { color: var(--gain); }
.pro-spark-change.dn { color: var(--loss); }
.pro-spark-chart { flex: 1; min-height: 26px; }

/* ── Cursor-following accent glow (lightweight)  ───────────────── */
/* Used on tiles/rows that get a glow but shouldn't tilt or ripple.
   JS sets --mx / --my as the cursor moves; a radial-gradient overlay
   tracks it. Falls back to a subtle center glow when JS hasn't set
   the vars yet. */
.pro-kpi,
.today-watch-row,
[data-cursor-glow] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.pro-kpi::before,
.today-watch-row::before,
[data-cursor-glow]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    220px circle at var(--mx, 50%) var(--my, 50%),
    rgba(var(--accent-rgb), 0.13) 0%,
    rgba(var(--accent-rgb), 0.04) 35%,
    transparent 70%
  );
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 0;
}
.pro-kpi:hover::before,
.today-watch-row:hover::before,
[data-cursor-glow]:hover::before { opacity: 1; }
/* Make sure existing children paint above the glow layer. */
.pro-kpi > *,
.today-watch-row > *,
[data-cursor-glow] > * {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .pro-kpi::before,
  .today-watch-row::before,
  [data-cursor-glow]::before { transition: none; }
}

/* ── Full-page drag-and-drop overlay ───────────────────────────── */
#global-drop-overlay {
  position: fixed; inset: 0; z-index: 10500;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease;
}
#global-drop-overlay.visible { opacity: 1; pointer-events: auto; }
.global-drop-card {
  border: 2px dashed rgba(var(--accent-rgb), 0.7);
  border-radius: 16px;
  padding: 56px 80px;
  text-align: center;
  color: var(--text-primary);
  background: rgba(15, 31, 61, 0.55);
  box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0.05),
              0 30px 80px -10px rgba(0, 0, 0, 0.55);
  transform: scale(0.97);
  transition: transform 0.18s ease;
}
#global-drop-overlay.visible .global-drop-card { transform: scale(1); }
.global-drop-icon { color: var(--accent); margin-bottom: 14px; }
.global-drop-title {
  font-size: 22px; font-weight: 700;
  letter-spacing: 0.02em; margin-bottom: 6px;
}
.global-drop-sub {
  font-size: 13px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  #global-drop-overlay,
  .global-drop-card { transition: none; }
}

/* ── Low-confidence metric cell ────────────────────────────────── */
/* Cells flagged by the extractor as likely needing review get a soft
   amber wash + dashed outline so reviewers can scan the table and
   focus their double-checking. */
.editable-cell.low-conf {
  background: rgba(251, 191, 36, 0.06);
  outline: 1px dashed rgba(251, 191, 36, 0.45);
  outline-offset: -2px;
}
.editable-cell.low-conf:hover {
  background: rgba(251, 191, 36, 0.10);
}

/* ── Dashboard "今日要看" widget ────────────────────────────────── */
.dash-today-watch {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 6px;
}
.today-watch-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px; border-radius: 7px;
  text-decoration: none; color: inherit;
  transition: background .15s;
}
.today-watch-row:hover { background: var(--glass-bg-hover); }
.today-watch-info { flex: 1; min-width: 0; }
.today-watch-name {
  font-size: 13px; font-weight: 500; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.today-watch-ticker {
  font-size: 11px; color: var(--text-muted);
  font-variant-numeric: tabular-nums; margin-top: 1px;
}
.today-watch-tag {
  font-size: 10.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  letter-spacing: 0.02em; white-space: nowrap;
}
.today-tag-warn { background: rgba(251,191,36,0.14); color: var(--warning); }
.today-tag-info { background: rgba(var(--accent-rgb),0.14); color: var(--accent); }
.today-tag-new  { background: rgba(52,211,153,0.14); color: var(--success); }

/* ── Compare page empty/preview state ──────────────────────────── */
.compare-empty {
  padding: 32px 20px;
  text-align: center;
}
.compare-empty-title {
  font-size: 18px; font-weight: 600;
  margin: 12px 0 6px;
  color: var(--text-primary);
}
.compare-empty-subtitle {
  font-size: 13px; color: var(--text-muted);
  max-width: 480px; margin: 0 auto 22px;
  line-height: 1.55;
}
.compare-sample-preview {
  background: var(--bg-surface);
  border: 1px dashed var(--glass-border-md);
  border-radius: 10px;
  padding: 18px 18px 14px;
  max-width: 600px;
  margin: 0 auto;
  opacity: .92;
  text-align: left;
}
.compare-sample-label {
  font-size: 10.5px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.compare-sample-cards {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.compare-sample-card {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--bg-elevated);
  border-radius: 8px;
  flex: 1 1 140px;
}
.compare-sample-name { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.compare-sample-meta { font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.compare-sample-table {
  width: 100%; font-size: 12px; border-collapse: collapse;
}
.compare-sample-table th,
.compare-sample-table td {
  padding: 6px 8px; text-align: right;
  border-bottom: 1px solid var(--glass-border);
  font-variant-numeric: tabular-nums;
}
.compare-sample-table tr:last-child td { border-bottom: 0; }
.compare-sample-table th:first-child,
.compare-sample-table td:first-child {
  text-align: left; color: var(--text-secondary); font-weight: 500;
  font-variant-numeric: normal;
}
.compare-sample-table th {
  color: var(--text-muted); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.compare-sample-table td { color: var(--text-primary); }

/* ── Breadcrumb navigation ─────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0 6px;
  font-size: 12.5px;
  color: var(--text-muted);
  letter-spacing: .01em;
}
.breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color .15s;
}
.breadcrumb a:hover { color: var(--text-secondary); opacity: 1; }
.breadcrumb-sep { opacity: .55; }
.breadcrumb-current {
  color: var(--text-primary);
  font-weight: 500;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a { color:var(--accent); text-decoration:none; }
a:hover { opacity:.8; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   APP SHELL LAYOUT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.app-root {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.app-shell {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.main-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  position: relative;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TITLEBAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.titlebar {
  height: var(--titlebar-h);
  display: flex;
  align-items: center;
  padding: 0 16px 0 0;
  background: rgba(15,23,42,0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--glass-border-md);
  box-shadow: 0 1px 0 var(--glass-border), 0 2px 16px rgba(0,0,0,0.2);
  position: relative;
  z-index: 200;
  flex-shrink: 0;
  -webkit-app-region: drag;
  user-select: none;
}
html.light .titlebar {
  background: rgba(248,250,252,0.92);
  border-bottom-color: rgba(15,23,42,0.16);
}

.titlebar-brand {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  transition: width 0.28s cubic-bezier(0.4,0,0.2,1);
  -webkit-app-region: no-drag;
  overflow: hidden;
}
.sidebar.collapsed ~ .main-content,
.app-shell.collapsed .titlebar-brand { width: var(--sidebar-w-col); }

.brand-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb),0.6);
  flex-shrink: 0;
  transition: background 0.3s, box-shadow 0.3s;
}
.brand-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.2s, max-width 0.28s;
}

.titlebar-drag {
  flex: 1;
}

.titlebar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  -webkit-app-region: no-drag;
}

/* Theme swatches removed in 2026 redesign — 1 brand color only.
   Press alternate lives in Settings page (.theme-option). */

/* Mode toggle */
.mode-toggle {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--glass-border-md);
  background: var(--glass-bg);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  transition: all 0.2s;
}
.mode-toggle:hover {
  background: var(--glass-bg-hover);
  color: var(--text-primary);
  transform: rotate(20deg);
}

/* Window controls (Electron) */
.win-controls {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: 4px;
}
.win-controls button {
  width: 36px; height: 36px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  font-family: "Segoe MDL2 Assets", monospace;
  transition: background 0.15s, color 0.15s;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
}
.win-controls button:hover { background: var(--glass-bg-hover); color: var(--text-primary); }
.win-controls .wc-close:hover { background: #e81123; color: #fff; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SIDEBAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: rgba(8,12,24,0.82);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border-right: 1px solid rgba(148,163,184,0.06);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.03);
  transition: width 0.28s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
  position: relative;
  z-index: 100;
}
html.light .sidebar {
  background: rgba(248,250,252,0.88);
  border-right-color: rgba(15,23,42,0.06);
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.03);
}
.sidebar.collapsed { width: var(--sidebar-w-col); }

/* Sidebar toggle button */
.sidebar-toggle {
  width: 100%;
  height: 48px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.sidebar-toggle:hover { color: var(--text-primary); background: var(--glass-bg); }
.sidebar-toggle svg { flex-shrink: 0; }

/* Nav */
.sidebar-nav {
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar-nav::-webkit-scrollbar { width: 0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  margin: 2px 8px;
  cursor: pointer;
  border-radius: 8px;
  color: var(--text-muted);
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  font-weight: 500;
}
.nav-item:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}
.nav-item.active {
  color: var(--text-primary);
  background: rgba(var(--accent-rgb),0.1);
}
/* Active indicator — gradient left bar */
.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: linear-gradient(to bottom, var(--accent), rgba(var(--accent-rgb),0.3));
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 12px rgba(var(--accent-rgb),0.5);
}
.nav-item svg {
  flex-shrink: 0;
  width: 18px; height: 18px;
  opacity: 0.5;
  transition: opacity 0.2s, color 0.2s;
}
.nav-item:hover svg { opacity: 0.8; }
.nav-item.active svg { opacity: 1; color: var(--accent); }
html.light .nav-item:hover { background: rgba(0,0,0,0.04); }
html.light .nav-item.active { background: rgba(var(--accent-rgb),0.08); }

.nav-label {
  font-size: 13px;
  font-weight: 500;
  opacity: 1;
  max-width: 160px;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.2s, max-width 0.28s;
}
.sidebar.collapsed .nav-label {
  opacity: 0;
  max-width: 0;
  pointer-events: none;
}
.sidebar.collapsed .sidebar-toggle { padding: 0; justify-content: center; }

/* Sidebar footer */
.sidebar-footer {
  padding: 12px 16px;
  margin: 0 8px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
html.light .sidebar-footer { border-top-color: rgba(0,0,0,0.06); }

/* Tooltip on collapsed sidebar */
.sidebar.collapsed .nav-item { justify-content: center; padding: 11px 0; }
.sidebar.collapsed .nav-item:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(var(--sidebar-w-col) + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(15,23,42,0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 999;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  pointer-events: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SPA PAGES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page { display: none; pointer-events: none; }
.page.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  animation: page-enter 0.25s ease both;
}
@keyframes page-enter {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Page title */
.page-header {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}
.page-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LIQUID GLASS CARD
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.glass-card, .card {
  position: relative;
  overflow: hidden;
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-border-md);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm), 0 1px 0 0 rgba(255,255,255,0.04) inset;
  transition: transform 0.15s ease, border-color 0.2s, box-shadow 0.2s;
  padding: 20px;
  margin-bottom: 16px;
}

/* Top edge highlight */
.glass-card::before, .card::before {
  content:"";
  position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,0.12) 40%,
    rgba(255,255,255,0.06) 70%, transparent 100%);
  pointer-events:none; z-index:2;
}

/* Liquid shimmer sweep */
.glass-card[data-glass]::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(105deg,
      transparent 35%, rgba(255,255,255,0.07) 50%, transparent 65%),
    radial-gradient(280px circle at var(--mx,50%) var(--my,50%),
      rgba(var(--accent-rgb),0.09) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}
.glass-card[data-glass]:hover::after { opacity:1; }
.glass-card[data-glass]:hover {
  border-color: rgba(var(--accent-rgb),0.25);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.15), var(--shadow-md);
}

/* Subtle elevation on hover for all glass cards */
.glass-card:hover, .card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  border-color: rgba(var(--accent-rgb), 0.15);
}
html.light .glass-card:hover,
html.light .card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border-color: rgba(var(--accent-rgb), 0.12);
}

/* Shimmer animation on non-hover too */
.glass-card[data-glass]::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: linear-gradient(105deg,
    transparent 40%, rgba(255,255,255,0.06) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: liquid-shimmer 8s ease-in-out infinite;
  top: 0; left: 0; right: 0; bottom: 0; height: auto;
}

@keyframes liquid-shimmer {
  0%   { transform:translateX(-100%) skewX(-12deg); }
  100% { transform:translateX(220%) skewX(-12deg); }
}

/* Ripple */
.ripple {
  position:absolute; border-radius:50%; pointer-events:none; z-index:3;
  width:4px; height:4px; transform:translate(-50%,-50%);
  background: rgba(var(--accent-rgb),0.35);
  animation: ripple-expand 0.65s cubic-bezier(0,0.5,0.5,1) forwards;
}
@keyframes ripple-expand {
  to { width:350px; height:350px; opacity:0; }
}

/* Card title */
.card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: .02em;
}
.card-title::before {
  content:"";
  display:inline-block;
  width:3px; height:14px;
  background: linear-gradient(to bottom, var(--accent), rgba(var(--accent-rgb),0.3));
  border-radius:2px;
  flex-shrink:0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BENTO GRID
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 110px;
  gap: 14px;
}
.bento-lg  { grid-column: span 8; grid-row: span 2; }
.bento-md  { grid-column: span 4; grid-row: span 2; }
.bento-sm  { grid-column: span 3; grid-row: span 1; }
.bento-sm2 { grid-column: span 4; grid-row: span 1; }

/* Premium stat card — subtle accent top edge */
.bento-grid > .glass-card.bento-sm {
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, rgba(var(--accent-rgb),0.6), rgba(var(--accent-rgb),0.05)) 1;
  border-image-slice: 1;
}
.bento-act { grid-column: span 6; grid-row: span 1; }
.bento-xl  { grid-column: span 12; grid-row: span 2; }

/* ── Brief Hero — 一句话晨报，dashboard 主角（PDF §5）─────────── */
.bento-hero {
  grid-column: span 12;
  grid-row: span 2;
  position: relative;
  padding: var(--space-36) var(--space-48);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 80% at 12% 30%,
      rgba(var(--accent-rgb), 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 92% 80%,
      rgba(var(--accent-rgb), 0.06) 0%, transparent 65%),
    var(--bg-surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-16);
}
.brief-eyebrow {
  font-family: "JetBrains Mono", "SF Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
}
.brief-headline {
  font-family: "Instrument Serif", "Iowan Old Style", "Songti SC", Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 3vw + 12px, 48px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
  max-width: 38ch;
}
.brief-headline .brief-num {
  color: var(--accent);
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-style: italic;
}
.brief-headline .brief-num.warn { color: var(--warning); }
.brief-headline .brief-num.gain { color: var(--gain); }
.brief-headline .brief-loading {
  color: var(--text-muted);
  font-size: 22px;
  font-style: italic;
}
.brief-headline a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent-soft); text-underline-offset: 4px; }
.brief-headline a:hover { text-decoration-color: var(--accent); }

/* Stat-unit — small caption under the value, used by the new mini-stats */
.stat-unit {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  letter-spacing: 0.04em;
}

/* ── PDF 增补 4: Quiet Luxury empty states ───────────────────────
   One pattern reused across 无公司 / 无 AI memo / 无告警 等场景:
   单线 64px SVG + Serif 一句话 + Cyan CTA + 居中. */
.fs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-48) var(--space-24);
  gap: var(--space-12);
  color: var(--text-muted);
}
.fs-empty-icon {
  width: 64px;
  height: 64px;
  color: var(--accent);
  opacity: 0.55;
  stroke-width: 1.4;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fs-empty-title {
  font-family: 'Instrument Serif', 'Iowan Old Style', 'Songti SC', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.005em;
}
.fs-empty-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  max-width: 32ch;
  line-height: 1.55;
}
.fs-empty-cta {
  margin-top: var(--space-8);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-spring);
}
.fs-empty-cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--accent-glow);
}

/* ── Settings · Logo batch fetch (feature/auto-logos) ─────────────── */
.logo-batch-status {
  font-size: 13px;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-feature-settings: "tnum" 1;
}
.logo-batch-bar {
  width: 100%;
  height: 6px;
  background: var(--glass-bg);
  border-radius: 3px;
  overflow: hidden;
}
.logo-batch-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  transition: width var(--dur-fast) var(--ease-out);
}
.logo-batch-log {
  margin-top: var(--space-12);
  max-height: 200px;
  overflow-y: auto;
  font-size: 11.5px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  line-height: 1.6;
  border-top: 1px solid var(--line);
  padding-top: var(--space-8);
}
.logo-batch-log-row { display: flex; gap: 8px; align-items: baseline; }
.logo-batch-log-row.ok    { color: var(--gain); }
.logo-batch-log-row.fail  { color: var(--loss); }
.logo-batch-log-row .lbl-name { color: var(--text-secondary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Settings · meta stats footer — DB 元统计下沉位（PDF §3.3.1）── */
.settings-meta-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-12);
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid var(--line);
}
.settings-meta-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-feature-settings: "tnum" 1;
}
.settings-meta-stats .sm-label {
  font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
.settings-meta-stats .sm-value {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 18px;
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ── PDF §10 容器宽度 — F-pattern hierarchy ───────────────────────
   narrow  680px   AI Memo 阅读
   default 1280px  大多数页
   wide    1600px  财务三表
   full    100%    同业雷达 / 大屏
   Use as `class="container container-wide"` (legacy `.container` keeps
   its existing rules; modifiers below override max-width only). */
.container-narrow  { max-width: var(--container-narrow);  margin-inline: auto; }
.container-default { max-width: var(--container-default); margin-inline: auto; }
.container-wide    { max-width: var(--container-wide);    margin-inline: auto; }
.container-full    { max-width: var(--container-full); }

.bento-card {
  position: relative;
  overflow: hidden;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  cursor: default;
  transition: transform 0.15s ease, border-color 0.2s, box-shadow 0.2s;
  box-shadow: var(--shadow-sm);
  transform-style: preserve-3d;
}
.bento-card.clickable { cursor: pointer; }

/* Bento stat card */
.bento-card-header {
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px; font-weight:600; color:var(--text-primary);
  margin-bottom:8px;
}
.bento-link { font-size:12px; color:var(--accent); text-decoration:none; opacity:.8; }
.bento-link:hover { opacity:1; }

/* Stat cards (dashboard) */
.stat-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 6px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-feature-settings: "tnum" 1;
}

.bento-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.bento-stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -1px;
  line-height: 1;
}
.bento-stat-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 6px;
}
.bento-accent { color: var(--accent); }

/* Action card */
.bento-action-card {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}
.bento-action-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb),0.15);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}
.bento-card:hover .bento-action-icon { background: rgba(var(--accent-rgb),0.25); }
.bento-action-icon svg { color: var(--accent); width:20px; height:20px; }
.bento-action-title { font-size:14px; font-weight:600; color:var(--text-primary); }
.bento-action-desc  { font-size:12px; color:var(--text-muted); margin-top:2px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   UPLOAD ZONE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#drop-zone {
  border: 2px dashed rgba(var(--accent-rgb),0.2);
  border-radius: var(--radius-lg);
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.03), transparent);
  position: relative;
}
#drop-zone:hover, #drop-zone.over {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.08), rgba(var(--accent-rgb),0.02));
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.06);
  transform: scale(1.01);
}
#drop-zone .icon { font-size:36px; margin-bottom:12px; opacity:.7; }
#drop-zone p  { color:var(--text-secondary); font-size:14px; margin-bottom:6px; }
#drop-zone small { color:var(--text-muted); font-size:12px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FORM ELEMENTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.form-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
.form-group { display:flex; flex-direction:column; gap:6px; flex:1; min-width:160px; }
.form-group label {
  font-size:11px; color:var(--text-muted);
  font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.form-group input, .form-group select {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border-md);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
}
html.light .form-group input,
html.light .form-group select {
  background: rgba(255,255,255,0.7);
}
.form-group input::placeholder { color:var(--text-muted); }
.form-group select option { background:var(--bg-elevated); color:var(--text-primary); }
.form-group input:focus, .form-group select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.15);
}
.form-actions { display:flex; gap:10px; margin-top:16px; align-items:center; flex-wrap:wrap; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BUTTONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 18px; border-radius:var(--radius-sm);
  border:none; font-size:13px; font-weight:600; cursor:pointer;
  transition:all 0.2s; font-family:inherit; letter-spacing:.01em;
  position:relative; overflow:hidden;
}
.btn:disabled { opacity:.4; cursor:not-allowed; }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color:#fff;
  box-shadow: 0 0 20px rgba(var(--accent-rgb),0.3);
}
.btn-primary:hover:not(:disabled) {
  box-shadow: 0 0 30px rgba(var(--accent-rgb),0.5);
  transform: translateY(-1px);
}
.btn-danger { background:linear-gradient(135deg,#ef4444,#dc2626); color:#fff; }
.btn-danger:hover:not(:disabled) { opacity:.9; transform:translateY(-1px); }
.btn-ghost {
  background:var(--glass-bg); color:var(--text-primary);
  border:1px solid var(--glass-border-md);
}
.btn-ghost:hover:not(:disabled) {
  background:var(--glass-bg-hover); color:var(--text-primary);
  border-color:rgba(var(--accent-rgb),0.3);
}
.btn-sm { padding:5px 12px; font-size:12px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COMPANY CHIPS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.company-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:20px; font-size:12px; font-weight:500;
  cursor:pointer; border:1px solid var(--glass-border-md);
  background:var(--glass-bg); color:var(--text-primary);
  transition:all 0.15s;
}
.chip:hover, .chip.active {
  background:rgba(var(--accent-rgb),0.12);
  color:var(--accent); border-color:rgba(var(--accent-rgb),0.4);
}
.chip .chip-mkt { font-size:10px; opacity:.6; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   QUEUE / DETECT BANNER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#batch-queue { display:none; margin-top:16px; }
.queue-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; border-radius:var(--radius-sm);
  background:var(--glass-bg); border:1px solid var(--glass-border);
  margin-bottom:6px; font-size:12px;
}
.queue-item .qi-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-primary); }
.queue-item .qi-status { font-size:11px; min-width:130px; text-align:right; font-weight:500; }
.qi-pending { color:var(--text-muted); }
.qi-running { color:var(--accent); }
.qi-ok      { color:var(--success); }
.qi-warn    { color:#f59e0b; }
.qi-err     { color:var(--danger); }

#detect-banner {
  display:none; padding:11px 16px; border-radius:var(--radius-sm);
  background:rgba(var(--accent-rgb),0.08);
  border:1px solid rgba(var(--accent-rgb),0.2);
  font-size:13px; margin-top:12px; color:var(--text-secondary);
}
#detect-banner b { color:var(--accent); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DATA TABLE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th {
  background: rgba(var(--accent-rgb),0.03);
  border-bottom: 2px solid rgba(var(--accent-rgb),0.15);
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 1;
}
.data-table td {
  border-bottom: 1px solid var(--glass-border);
  padding: 12px 14px;
  color: var(--text-primary);
}
.data-table td a { color:var(--text-primary); font-weight:500; }
.data-table td a:hover { color:var(--accent); }
.data-table tr:last-child td { border-bottom:none; }

/* Alternating row stripes — very subtle */
.data-table tbody tr:nth-child(even) td {
  background: rgba(var(--accent-rgb), 0.015);
}
html.light .data-table th {
  background: rgba(var(--accent-rgb),0.04);
  border-bottom-color: rgba(var(--accent-rgb),0.12);
}
html.light .data-table tbody tr:nth-child(even) td {
  background: rgba(0,0,0, 0.015);
}

/* Company-list row hover with brand-color left accent */
.company-row { transition:background 0.15s; }
.company-row:hover td { background:var(--glass-bg-hover); }
.company-row td:first-child { position:relative; }
.company-row:hover td:first-child::before {
  content:""; position:absolute; left:0; top:15%; bottom:15%;
  width:3px; border-radius:0 2px 2px 0;
  background:rgb(var(--row-brand-rgb, var(--accent-rgb)));
}

/* Company avatar circle */
.co-avatar {
  width: 42px; height: 42px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: #fff;
  letter-spacing: 0; user-select: none;
  outline: 2px solid rgba(255,255,255,0.08);
  outline-offset: -2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.co-avatar-img {
  width:46px; height:46px; border-radius:12px;
  border:1px solid var(--glass-border-md);
}

/* Company name + ticker */
.co-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 1px;
  letter-spacing: -0.01em;
}
.co-ticker {
  font-family:"JetBrains Mono",monospace;
  font-size:10px; font-weight:500;
  color:var(--text-muted);
  background:var(--glass-bg-md);
  border:1px solid var(--glass-border);
  padding:1px 5px; border-radius:3px;
  letter-spacing:.04em;
}

/* Report count badge */
.co-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:22px; padding:0 7px;
  background:var(--glass-bg-md); border:1px solid var(--glass-border);
  border-radius:20px; font-size:12px; font-weight:600;
  color:var(--text-secondary); font-family:"JetBrains Mono",monospace;
}

/* Action buttons in company list */
.btn-action-view {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600;
  border: 1px solid rgba(var(--accent-rgb),0.2); background: rgba(var(--accent-rgb),0.06);
  color: var(--accent); text-decoration: none;
  transition: all 0.15s; cursor: pointer;
}
.btn-action-view:hover {
  background: rgba(var(--accent-rgb),0.12);
  border-color: rgba(var(--accent-rgb),0.35);
  box-shadow: 0 0 12px rgba(var(--accent-rgb),0.1);
}
.btn-action-view::after { content:"→"; opacity:0.6; font-size:11px; }

.btn-action-del {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 500;
  border: 1px solid rgba(248,113,113,0.15); background: transparent;
  color: #f87171; cursor: pointer; transition: all 0.15s;
}
.btn-action-del:hover {
  background: rgba(248,113,113,0.08);
  border-color: rgba(248,113,113,0.35);
}

/* Badge colors */
.badge-green { background:rgba(52,211,153,0.12); color:#34d399; border:1px solid rgba(52,211,153,0.25); }
.badge-amber { background:rgba(251,191,36,0.12);  color:#f59e0b; border:1px solid rgba(251,191,36,0.25); }
html.light .badge-green { background:rgba(16,185,129,0.1);  color:#059669; }
html.light .badge-amber { background:rgba(217,119,6,0.1);   color:#b45309; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   METRIC CARDS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.metric-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px; margin-bottom:20px;
}
.metric-card {
  background:var(--glass-bg); border: var(--card-border);
  border-radius:var(--radius); padding:16px;
  transition:border-color 0.2s, transform 0.15s;
}
.metric-card:hover { border-color:rgba(var(--accent-rgb),0.25); transform:translateY(-2px); }
.metric-card .m-label { font-size:11px; color:var(--text-secondary); margin-bottom:8px; font-weight:500; }
.metric-card .m-value { font-size:22px; font-weight:700; color:var(--text-primary); letter-spacing:-0.5px; }
.metric-card .m-unit  { font-size:10px; color:var(--text-muted); margin-top:2px; }
.metric-card .m-yoy   { font-size:11px; margin-top:8px; font-weight:600; }
.m-yoy.up   { color:var(--success); }
.m-yoy.down { color:var(--danger); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CHART GRID
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.chart-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(460px,1fr));
  gap:14px; margin-bottom:20px;
}
.chart-box {
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:var(--radius); padding:18px 20px;
  transition:border-color 0.2s;
}
.chart-box:hover { border-color:rgba(var(--accent-rgb),0.2); }
.chart-box .chart-title {
  font-size:11px; font-weight:600; color:var(--text-muted);
  letter-spacing:.05em; text-transform:uppercase; margin-bottom:12px;
}
.chart-box .echart { width:100%; height:260px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BADGES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.badge {
  display:inline-flex; align-items:center;
  padding:3px 10px; border-radius:20px;
  font-size:11px; font-weight:600; letter-spacing:.02em;
}
.badge-blue   { background:rgba(var(--accent-rgb),0.12); color:var(--accent); border:1px solid rgba(var(--accent-rgb),0.2); }
.badge-green  { background:rgba(52,211,153,0.12); color:#34d399; border:1px solid rgba(52,211,153,0.2); }
.badge-orange { background:rgba(251,191,36,0.12); color:#fbbf24; border:1px solid rgba(251,191,36,0.2); }
.badge-warn   { background:rgba(251,191,36,0.15); color:#f59e0b; border:1px solid rgba(251,191,36,0.35); cursor:default; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SETTINGS PAGE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.settings-section {
  max-width: 600px;
  margin-bottom: 32px;
}
.settings-section h3 {
  font-size:13px; font-weight:700; color:var(--text-secondary);
  text-transform:uppercase; letter-spacing:.07em;
  margin-bottom:16px; padding-bottom:10px;
  border-bottom:1px solid var(--glass-border-md);
}
.theme-grid {
  display:flex; gap:12px; flex-wrap:wrap;
}
.theme-option {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  cursor:pointer; padding:12px 16px; border-radius:var(--radius);
  border:2px solid var(--glass-border);
  background:var(--glass-bg);
  transition:all 0.2s; min-width:90px;
}
.theme-option:hover { border-color:var(--glass-border-md); transform:translateY(-2px); }
.theme-option.active { border-color:var(--accent); box-shadow:0 0 16px rgba(var(--accent-rgb),0.2); }
.theme-dot {
  width:32px; height:32px; border-radius:50%;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
}
.theme-option-name { font-size:12px; font-weight:500; color:var(--text-secondary); }
.mode-selector { display:flex; gap:8px; }
.mode-btn {
  flex:1; max-width:140px;
  padding:12px 16px; border-radius:var(--radius-sm);
  border:1.5px solid var(--glass-border-md);
  background:var(--glass-bg); color:var(--text-primary);
  cursor:pointer; font-size:13px; font-weight:500;
  transition:all 0.2s; font-family:inherit;
  display:flex; align-items:center; gap:8px; justify-content:center;
}
.mode-btn:hover { background:var(--glass-bg-hover); color:var(--text-primary); }
.mode-btn.active { border-color:var(--accent); color:var(--accent); background:rgba(var(--accent-rgb),0.08); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STATEMENT TABLE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.stmt-wrap {
  overflow-x:auto; border:1px solid var(--glass-border);
  border-radius:var(--radius); background:var(--glass-bg);
  /* Drag-to-scroll */
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}
/* Cursor while actively dragging */
.stmt-wrap.is-dragging {
  cursor: grabbing;
}
.stmt-table { width:100%; border-collapse:collapse; font-size:13px; min-width:600px; }
.stmt-table th {
  background:rgba(255,255,255,0.03);
  border-bottom:1px solid var(--glass-border-md);
  padding:10px 18px; text-align:right;
  font-weight:600; font-size:11px; color:var(--text-secondary);
  white-space:nowrap; letter-spacing:.04em; text-transform:uppercase;
  position:sticky; top:0; z-index:2;
}
.stmt-table th:first-child {
  text-align:left; position:sticky; left:0; z-index:3;
  background:rgba(10,22,40,0.95); min-width:200px; max-width:260px;
}
html.light .stmt-table th:first-child { background:rgba(240,244,248,0.95); }
.stmt-table td {
  padding:9px 18px; text-align:right;
  border-bottom:1px solid rgba(255,255,255,0.04);
  white-space:nowrap; color:var(--text-primary);
  font-variant-numeric:tabular-nums;
}
.stmt-table td:first-child {
  text-align:left; position:sticky; left:0;
  background:rgba(10,22,40,0.8); backdrop-filter:blur(8px);
  z-index:1; font-weight:500; color:var(--text-primary);
}
html.light .stmt-table td:first-child { background:rgba(240,244,248,0.8); }
.stmt-table tr:hover td { background:rgba(255,255,255,0.03); }
.stmt-table tr:hover td:first-child { background:rgba(10,22,40,0.9); }
html.light .stmt-table tr:hover td:first-child { background:rgba(240,244,248,0.9); }
.stmt-table tr.section-hdr td {
  background:rgba(var(--accent-rgb),0.04) !important;
  font-weight:700; font-size:10px; color:var(--accent);
  text-transform:uppercase; letter-spacing:.08em; padding:7px 18px;
  border-top:1px solid rgba(var(--accent-rgb),0.1);
}
.stmt-table td.sub-label { padding-left:32px; color:var(--text-muted); font-weight:400; }
.stmt-table tr.divider td { border-top:1px solid var(--glass-border-md); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAGE-LEVEL TABS & STMT TABS & PERIOD FILTER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page-tabs {
  display:flex; gap:4px; margin-bottom:20px; padding:4px;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:12px; width:fit-content;
}
.page-tab {
  padding:8px 22px; border-radius:9px; font-size:13px; font-weight:600;
  border:none; background:transparent; color:var(--text-muted);
  cursor:pointer; transition:all 0.2s; font-family:inherit;
}
.page-tab:hover { color:var(--text-secondary); background:var(--glass-bg-hover); }
.page-tab.active {
  background:rgba(var(--accent-rgb),0.12); color:var(--accent);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),0.2);
}
.page-tab-content { display:none; }
.page-tab-content.active { display:block; }

.stmt-tabs { display:flex; margin-bottom:16px; border-bottom:1px solid var(--glass-border); }
.stmt-tab {
  padding:8px 20px; font-size:13px; font-weight:500;
  color:var(--text-muted); cursor:pointer; border:none; background:none;
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:all 0.15s;
}
.stmt-tab:hover { color:var(--text-secondary); }
.stmt-tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.stmt-tab+.stmt-tab::before { content:"|"; margin-right:20px; color:var(--glass-border-md); font-weight:300; }

.period-filter {
  display:inline-flex; border:1px solid var(--glass-border-md);
  border-radius:var(--radius-sm); overflow:hidden; margin-bottom:16px;
}
.period-filter button {
  padding:6px 18px; font-size:12px; font-weight:600;
  border:none; background:transparent; color:var(--text-muted);
  cursor:pointer; transition:all 0.15s; font-family:inherit;
}
.period-filter button+button { border-left:1px solid var(--glass-border); }
.period-filter button.active { background:rgba(var(--accent-rgb),0.12); color:var(--accent); }
.period-filter button:not(.active):hover { background:var(--glass-bg); color:var(--text-secondary); }

/* ── Table control bar (Period / View / Order dropdowns) ── */
.tbl-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tbl-ctrl-group {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-md);
  border-radius: var(--radius-sm);
  padding: 0 8px 0 10px;
  height: 32px;
}
.tbl-ctrl-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  letter-spacing: .02em;
}
.tbl-select {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 0 2px;
  appearance: none;
  -webkit-appearance: none;
  /* custom dropdown arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 16px;
}
.tbl-select option {
  background: var(--bg-elevated, #1a1a2e);
  color: var(--text-primary);
}
.tbl-select:hover { color: var(--accent); }

/* ── Scroll-outer wrapper — arrows float over the scrollable area ── */
.stmt-scroll-outer {
  position: relative; /* arrows are absolute children of this */
}
.stmt-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 32px;
  height: 56px;
  border: none;
  border-radius: 6px;
  background: rgba(0,0,0, 0.45);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s, background 0.15s;
  user-select: none;
}
.stmt-arrow-l { left: 0; }
.stmt-arrow-r { right: 0; }
.stmt-arrow:hover { background: rgba(var(--accent-rgb), 0.85); }
.stmt-arrow.arrow-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DERIVED METRICS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.derived-section { margin-bottom:28px; }
.derived-section-title {
  font-size:10px; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.1em;
  padding:0 0 10px 0; border-bottom:1px solid rgba(var(--accent-rgb),0.15);
  margin-bottom:0; display:flex; align-items:center; gap:8px;
}
.derived-section-title::before {
  content:""; display:inline-block; width:16px; height:1px;
  background:linear-gradient(90deg, var(--accent), transparent);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   VALUE COLORS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.val-pos { color:var(--success); }
.val-neg { color:var(--danger); }
.val-na  { color:var(--text-muted); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COMPANY HEADER (detail page)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#company-header {
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb),0.06) 0%,
    rgba(52,211,153,0.03) 100%) !important;
}
#hdr-name { color:var(--text-primary) !important; font-size:22px; font-weight:700; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOAST
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#toast-container {
  position:fixed; bottom:24px; right:24px; z-index:9999;
  display:flex; flex-direction:column; gap:8px;
}
/* Severity grouping: errors at the top, then warnings, success, info.
   Achieved with `order` so toasts visually group by type even when they
   arrive interleaved. */
.toast.toast-error   { order: 1; }
.toast.toast-warning { order: 2; }
.toast.toast-success { order: 3; }
.toast.toast-info    { order: 4; }
/* Repeat counter badge inside coalesced toasts. */
.toast-count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  vertical-align: 1px;
}
.toast-pulse {
  animation: toast-pulse 0.45s ease;
}
@keyframes toast-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0.45); }
  60%  { box-shadow: 0 0 0 8px rgba(var(--accent-rgb),0.0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0.0); }
}
@media (prefers-reduced-motion: reduce) { .toast-pulse { animation: none; } }
.toast {
  background:rgba(15,31,61,0.95); backdrop-filter:blur(16px);
  color:var(--text-primary); padding:11px 18px; border-radius:var(--radius-sm);
  font-size:13px; border:1px solid var(--glass-border-md);
  box-shadow:var(--shadow-lg); animation:slide-in 0.2s ease;
}
.toast.success { border-color:rgba(52,211,153,0.3); color:var(--success); }
.toast.error   { border-color:rgba(248,113,113,0.3); color:var(--danger); }
@keyframes slide-in {
  from { transform:translateX(60px); opacity:0; }
  to   { transform:translateX(0); opacity:1; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MISC
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.spinner {
  display:inline-block; width:14px; height:14px;
  border:2px solid rgba(255,255,255,0.1); border-top-color:var(--accent);
  border-radius:50%; animation:spin 0.7s linear infinite; vertical-align:middle;
}
@keyframes spin { to { transform:rotate(360deg); } }

.empty-state { text-align:center; padding:56px 24px; color:var(--text-muted); }
.empty-state .empty-icon { font-size:40px; margin-bottom:14px; opacity:.4; }
.empty-state p { margin-bottom:6px; font-size:14px; }

hr { border:none; border-top:1px solid var(--glass-border); margin:12px 0; }

/* Scrollbars */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.18); }
html.light ::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.15); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   UI.JS — ENHANCED TOAST
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.toast.toast-success,
.toast.toast-error,
.toast.toast-warning,
.toast.toast-info {
  display:flex; align-items:center; gap:10px;
  border-left:3px solid var(--text-muted);
  padding:10px 14px;
}
.toast.toast-success { border-left-color:var(--success); }
.toast.toast-error   { border-left-color:var(--danger); }
.toast.toast-warning { border-left-color:#fbbf24; }
.toast.toast-info    { border-left-color:var(--accent); }

.toast-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  font-size:12px; flex-shrink:0;
  background:rgba(255,255,255,0.06);
}
.toast-success .toast-icon { background:rgba(52,211,153,0.15); color:var(--success); }
.toast-error   .toast-icon { background:rgba(248,113,113,0.15); color:var(--danger); }
.toast-warning .toast-icon { background:rgba(251,191,36,0.15); color:#fbbf24; }
.toast-info    .toast-icon { background:rgba(var(--accent-rgb),0.15); color:var(--accent); }

.toast-msg { flex:1; }

.toast-close {
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  font-size:16px; line-height:1; padding:0 0 0 8px; opacity:0.6;
}
.toast-close:hover { opacity:1; color:var(--text-primary); }

.toast-enter {
  animation:toast-slide-in 0.25s ease forwards;
}
.toast-exit {
  animation:toast-slide-out 0.3s ease forwards;
}
@keyframes toast-slide-in {
  from { transform:translateX(60px); opacity:0; }
  to   { transform:translateX(0); opacity:1; }
}
@keyframes toast-slide-out {
  from { transform:translateX(0); opacity:1; }
  to   { transform:translateX(60px); opacity:0; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   UI.JS — SKELETON CARD
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.skeleton-card {
  padding:16px;
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  background:var(--glass-bg);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   UI.JS — EMPTY & ERROR STATE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.empty-state .empty-title { font-size:15px; font-weight:600; margin-bottom:4px; }
.empty-state .empty-subtitle { font-size:13px; color:var(--text-muted); margin-bottom:12px; }
.empty-state .empty-action { margin-top:8px; }

.error-state {
  text-align:center; padding:48px 24px; color:var(--text-muted);
}
.error-state .error-icon {
  font-size:36px; margin-bottom:12px; color:var(--danger); opacity:0.6;
}
.error-state .error-msg {
  font-size:14px; color:var(--text-secondary); margin-bottom:14px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   UI.JS — CONFIRM DIALOG
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.confirm-overlay {
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.45); backdrop-filter:blur(4px);
  opacity:0; transition:opacity 0.2s ease;
}
.confirm-overlay.open { opacity:1; }

.confirm-dialog {
  background:var(--bg-elevated); border:1px solid var(--glass-border-md);
  border-radius:var(--radius); padding:24px 28px;
  min-width:320px; max-width:440px;
  box-shadow:var(--shadow-lg);
  transform:scale(0.95); transition:transform 0.2s ease;
}
.confirm-overlay.open .confirm-dialog { transform:scale(1); }

.confirm-title {
  font-size:16px; font-weight:700; color:var(--text-primary); margin:0 0 8px;
}
.confirm-msg {
  font-size:14px; color:var(--text-secondary); margin:0 0 20px; line-height:1.5;
}
.confirm-actions {
  display:flex; justify-content:flex-end; gap:10px;
}

/* ── Media Upload Zone ──────────────────────── */
.media-drop-zone {
  border: 2px dashed rgba(var(--accent-rgb),0.2);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.02), transparent);
  margin-top: 12px;
}
.media-drop-zone:hover, .media-drop-zone.over {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.06), rgba(var(--accent-rgb),0.02));
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.06);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width:900px) {
  .bento-lg  { grid-column:span 12; }
  .bento-md  { grid-column:span 12; }
  .bento-sm  { grid-column:span 6; }
  .bento-act { grid-column:span 12; }
  .chart-grid { grid-template-columns:1fr; }
  /* New Phase 1+ components — keep brief hero compact on narrow screens */
  .bento-hero {
    grid-row: span 1;
    padding: var(--space-24);
  }
  .brief-headline { font-size: clamp(22px, 3vw + 10px, 32px); max-width: none; }
  /* Import wizard nav — drop the lines, let chips wrap */
  .import-wizard-nav { gap: var(--space-8); }
  .import-wizard-nav .iwz-line { display: none; }
}
@media (max-width:640px) {
  .metric-grid { grid-template-columns:repeat(2,1fr); }
  .form-row { flex-direction:column; }
  .bento-sm { grid-column:span 12; }
  /* Brief hero shrinks further; iwz nav collapses to numbers only */
  .bento-hero { padding: var(--space-16) var(--space-16); }
  .brief-eyebrow { font-size: 10.5px; letter-spacing: 0.16em; }
  .brief-headline { font-size: clamp(20px, 4vw + 8px, 26px); }
  .iwz-step { padding: 6px 10px 6px 5px; font-size: 12px; }
  .iwz-step .iwz-label { display: none; }      /* numbers only */
  .iwz-step.active .iwz-label { display: inline; } /* keep active label */
  .iwz-stage-title { font-size: 18px; }
  .iwz-done-title { font-size: 26px; }
  /* Settings meta-stats: 4 cols → 2 cols on phones */
  .settings-meta-stats { grid-template-columns: repeat(2, 1fr); }
  /* Empty-state padding tighter on phones */
  .fs-empty { padding: var(--space-24) var(--space-16); }
  .fs-empty-icon { width: 48px; height: 48px; }
  .fs-empty-title { font-size: 18px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DASHBOARD — company list & quick actions
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dash-company-list { display:flex; flex-direction:column; gap:4px; margin-top:8px; overflow-y:auto; max-height:220px; }
.dash-company-row  {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:8px;
  color:var(--text-primary); text-decoration:none; font-size:13px;
  transition:background 0.15s;
}
.dash-company-row:hover { background:rgba(var(--accent-rgb),0.08); }
.dash-company-name { flex:1; font-weight:500; }
.dash-company-count { font-size:12px; color:var(--text-muted); }

.quick-action {
  display:flex; align-items:center; gap:14px;
  padding:4px 0;
}
.qa-title { font-size:14px; font-weight:600; color:var(--text-primary); }
.qa-sub   { font-size:12px; color:var(--text-muted); margin-top:2px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SETTINGS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.settings-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
  gap:16px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   IMPORT PAGE — misc helpers
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.section-label {
  font-size:11px; color:var(--text-muted);
  margin-bottom:8px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
}
.divider {
  border:none; border-top:1px solid var(--gray-100);
  margin-bottom:14px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PRINT / PDF EXPORT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media print {
  /* Hide UI chrome */
  .titlebar, .sidebar, .page-tabs, .stmt-tabs, .period-filter,
  .page-tab, #page-reports, .btn, #yoy-strip .yoy-chip,
  #notes-wrap, #btn-export-csv { display:none !important; }

  /* Reset layout to single column */
  .app-shell { display:block !important; }
  .main-content { margin:0 !important; padding:0 !important; overflow:visible !important; }
  .container { max-width:100% !important; }
  .card { break-inside:avoid; box-shadow:none !important;
          border:1px solid #ccc !important; margin-bottom:12px; }

  /* Show all stmt panels */
  .stmt-panel { display:block !important; margin-bottom:16px; }

  /* Table styles */
  .stmt-table, .data-table { font-size:11px; }
  .stmt-wrap { overflow:visible !important;
               -webkit-mask-image:none !important; mask-image:none !important; }

  /* Charts — hide (ECharts canvas doesn't print well) */
  .derived-chart-wrap, .fin-chart-wrap { display:none !important; }

  /* Company header */
  #company-header { background:none !important; border:none !important; padding:0 !important; }

  /* YoY strip */
  .yoy-strip { flex-wrap:wrap; }

  /* Page breaks */
  .derived-section { break-inside:avoid; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COMPARE PAGE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.compare-select {
  width:100%; padding:8px 12px; border-radius:8px;
  border:1px solid var(--glass-border); background:var(--bg-elevated);
  color:var(--text-primary); font-size:13px; outline:none;
  cursor:pointer;
}
.compare-select option {
  background:var(--bg-elevated);
  color:var(--text-primary);
}
.compare-select:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(var(--accent-rgb),0.2);
}
.cmp-scroll-wrap { overflow-x:auto; }
.cmp-table { min-width:700px; }
.cmp-period-hdr { text-align:center; background:rgba(var(--accent-rgb),0.06); }
.cmp-company-hdr th { font-size:11px; font-weight:600; padding:4px 10px; }
.cmp-a-hdr { color:var(--accent); }
.cmp-b-hdr { color:#34d399; }
.cmp-win  { color:var(--success); font-weight:600; }
.cmp-lose { color:var(--text-muted); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COMPANY NOTES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.notes-textarea {
  width:100%; padding:8px 12px; resize:vertical;
  background:rgba(var(--accent-rgb),0.04);
  border:1px solid var(--glass-border); border-radius:6px;
  color:var(--text-primary); font-size:13px; font-family:inherit;
  outline:none; transition:border-color 0.2s;
}
.notes-textarea:focus { border-color:rgba(var(--accent-rgb),0.5); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   INLINE METRIC EDITOR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.editable-cell { position:relative; cursor:text; }
.editable-cell:hover { background:rgba(var(--accent-rgb),0.06); }
.edit-pencil {
  display:none; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  font-size:11px; color:var(--accent); opacity:0.7; pointer-events:none;
}
.editable-cell:hover .edit-pencil { display:inline; }
/* Hover-only "复制" affordance. The pencil pegs at right:4px so we offset
   the copy glyph 16 px further left and keep it clickable. */
.cell-copy {
  display: inline-flex; align-items: center; justify-content: center;
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  font-size: 11px; color: var(--text-muted);
  background: transparent; border: 0; border-radius: 3px;
  opacity: 0; cursor: pointer; user-select: none;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.editable-cell:hover .cell-copy { opacity: 0.7; }
.cell-copy:hover {
  opacity: 1; color: var(--accent);
  background: rgba(var(--accent-rgb), 0.10);
}
.cell-copy.copied { opacity: 1; color: var(--success); }
.cell-copy:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1;
}
.metric-edit-input { outline:none; }

/* ─── Report row editable fields ──────────────────────────────── */
.report-period-input {
  font-family: 'JetBrains Mono', monospace;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.report-period-input:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}
.report-period-input:hover {
  border-color: var(--glass-border-md) !important;
}
.report-type-toggle {
  display: inline-flex;
  align-items: center;
  user-select: none;
}
.report-type-toggle:hover .badge { opacity: 0.8; }
/* Highlight dirty reanalyze button */
#reports-table .btn-primary { animation: none; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   YOY STRIP
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.yoy-strip {
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:12px;
}
.yoy-chip {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 12px; border-radius:20px; font-size:12px; font-weight:600;
}
.yoy-label { color:var(--text-primary); font-weight:400; }
.yoy-up   { background:rgba(52,211,153,0.12); color:#34d399; border:1px solid rgba(52,211,153,0.25); }
.yoy-down { background:rgba(251,113,133,0.12); color:#fb7185; border:1px solid rgba(251,113,133,0.25); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   UPLOAD JUMP BANNER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.upload-jump-banner {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; margin-bottom:12px;
  border-left:3px solid var(--success);
  font-size:14px; font-weight:500;
  animation: slideDown 0.25s ease;
}
@keyframes slideDown {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FINANCIAL STATEMENT OVERVIEW CHART
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.fin-chart-wrap {
  margin-bottom:16px;
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  padding:8px;
  background:var(--bg-surface);
}
.fin-chart {
  width:100%; height:200px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DERIVED METRICS TREND CHARTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.derived-chart-wrap {
  margin-top:12px;
  border-top:1px solid var(--gray-100);
  padding-top:8px;
}
.derived-chart {
  width:100%; height:240px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   VALIDATION DETAIL PANEL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.val-detail-row td { padding:0 !important; }
.val-detail-panel {
  background:rgba(251,191,36,0.06);
  border-left:3px solid #f59e0b;
  border-radius:0 6px 6px 0;
  margin:0 8px 8px;
  padding:12px 16px;
  font-size:13px;
}
.val-detail-title {
  font-weight:600; color:#f59e0b; margin-bottom:10px;
}
.val-check-row {
  display:flex; align-items:center; gap:12px;
  padding:5px 0; border-bottom:1px solid rgba(251,191,36,0.15);
}
.val-check-row:last-of-type { border-bottom:none; }
.val-formula { flex:1; color:var(--text-secondary); font-family:monospace; }
.val-diff { color:#f59e0b; font-weight:600; white-space:nowrap; }
.val-detail-hint {
  margin-top:10px; color:var(--text-muted); font-size:11px; line-height:1.5;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   E — SKELETON LOADERS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.skeleton-block {
  /* v3 polish: cyan-tinted band sweep (matches .fs-shimmer for consistency).
     Visible on both dark and light because it rides on --accent-rgb. */
  position: relative;
  overflow: hidden;
  background: var(--bg-elevated);
  border-radius: 6px;
}
.skeleton-block::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--accent-rgb), 0.10) 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.6s linear infinite;
  pointer-events: none;
}
@keyframes skeleton-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* ───────── v3 状态卡片（fs-error-state · reusable error block） ───── */
.fs-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px;
  gap: 10px;
}
.fs-error-state .fs-error-icon {
  width: 48px;
  height: 48px;
  color: var(--loss);
  opacity: 0.85;
  margin-bottom: 4px;
}
.fs-error-state .fs-error-title {
  font-family: 'Instrument Serif','Iowan Old Style','Songti SC',Georgia,serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.fs-error-state .fs-error-hint {
  font-size: 12.5px;
  color: var(--text-muted);
  max-width: 360px;
  line-height: 1.55;
}
.fs-error-state .fs-error-code {
  font-family: 'JetBrains Mono','SF Mono',Consolas,monospace;
  font-size: 10.5px;
  color: var(--text-faint);
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  padding: 3px 10px;
  border-radius: 4px;
  margin-top: 2px;
}
.fs-error-state .fs-error-btns {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.fs-error-state .fs-error-btn {
  padding: 7px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  color: var(--text-primary);
  border-radius: 7px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: all var(--dur-fast, 150ms) var(--ease-out, ease);
}
.fs-error-state .fs-error-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.fs-error-state .fs-error-btn.primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 600;
}
.fs-error-state .fs-error-btn.primary:hover {
  filter: brightness(1.08);
}

/* ───────── v3 状态卡片（fs-nomatch-chips · search "no result" → did-you-mean chips） ─── */
.fs-nomatch-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}
.fs-nomatch-chips span {
  padding: 4px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  color: var(--text-secondary);
  border-radius: 999px;
  font-size: 11px;
  cursor: pointer;
  transition: all var(--dur-fast, 150ms) var(--ease-out, ease);
}
.fs-nomatch-chips span:hover {
  background: var(--accent-whisper);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.3);
}
.detail-skeleton {
  padding:16px 0;
  display:flex; flex-direction:column; gap:12px;
}
.detail-skeleton .sk-hd   { height:28px; width:35%; }
.detail-skeleton .sk-sub  { height:16px; width:55%; }
.detail-skeleton .sk-tabs { height:40px; width:60%; margin-top:8px; }
.detail-skeleton .sk-row  { height:40px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   D — VALUATION INPUTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.val-inputs-bar {
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  padding:10px 14px;
  background:var(--bg-elevated);
  border-radius:var(--radius-md);
  border:1px solid var(--glass-border);
  margin-bottom:16px;
  font-size:13px;
}
.val-input-group { display:flex; align-items:center; gap:6px; }
.val-input-group label { color:var(--text-secondary); white-space:nowrap; }
.val-input-group input {
  width:130px; padding:4px 8px;
  background:var(--bg-surface); border:1px solid var(--glass-border);
  border-radius:6px; color:var(--text-primary); font-size:12px;
  outline:none;
}
.val-input-group input:focus { border-color:rgba(var(--accent-rgb),.5); }
.val-hint { color:var(--text-muted); font-size:11px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   F — EDIT HISTORY DRAWER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.drawer-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  z-index:400; opacity:0; pointer-events:none;
  transition:opacity .25s;
}
.drawer-overlay.open { opacity:1; pointer-events:all; }
.drawer {
  position:fixed; top:0; right:0; bottom:0; width:360px; max-width:90vw;
  background:var(--bg-elevated);
  border-left: var(--card-border);
  border-radius: 0;
  z-index:401;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.drawer.open { transform:translateX(0); }
.drawer-header {
  padding:16px 20px;
  border-bottom:1px solid var(--glass-border);
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0;
}
.drawer-title { font-size:15px; font-weight:600; }
.drawer-close {
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  font-size:18px; line-height:1; padding:2px 6px; border-radius:4px;
}
.drawer-close:hover { color:var(--text-primary); background:var(--bg-elevated); }
.drawer-body { flex:1; overflow-y:auto; padding:12px 16px; }
.drawer-empty { text-align:center; color:var(--text-muted); padding:40px 0; font-size:13px; }
.hist-item {
  padding:10px 12px; border-radius:8px;
  background:var(--bg-elevated); border:1px solid var(--glass-border);
  margin-bottom:8px;
}
.hist-item-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.hist-metric { font-weight:600; font-size:13px; }
.hist-period { font-size:11px; color:var(--text-muted); }
.hist-change {
  font-size:12px; margin:4px 0;
  color:var(--text-secondary);
}
.hist-change .hi-old { text-decoration:line-through; color:var(--text-muted); }
.hist-change .hi-arrow { margin:0 4px; }
.hist-change .hi-new { color:var(--accent); font-weight:600; }
.hist-time { font-size:11px; color:var(--text-muted); }
.btn-undo {
  font-size:11px; padding:3px 9px;
  background:var(--bg-surface); border:1px solid var(--glass-border);
  border-radius:5px; color:var(--text-secondary); cursor:pointer;
}
.btn-undo:hover { border-color:rgba(var(--accent-rgb),.5); color:var(--accent); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   C — INDUSTRY TEMPLATE HIGHLIGHTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tmpl-highlight td:first-child {
  border-left:3px solid var(--accent);
  padding-left:9px !important;
  font-weight:600;
}
.tmpl-badge {
  display:inline-block; font-size:9px; font-weight:700; letter-spacing:.04em;
  padding:1px 5px; border-radius:3px;
  background:rgba(var(--accent-rgb),.15); color:var(--accent);
  margin-left:5px; vertical-align:middle; text-transform:uppercase;
}
.template-selector {
  display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;
}
.template-btn {
  font-size:11px; padding:4px 10px; border-radius:6px;
  border:1px solid var(--glass-border); background:var(--bg-elevated);
  color:var(--text-secondary); cursor:pointer; transition:all .15s;
}
.template-btn:hover { border-color:rgba(var(--accent-rgb),.5); color:var(--accent); }
.template-btn.active {
  background:rgba(var(--accent-rgb),.15);
  border-color:rgba(var(--accent-rgb),.5);
  color:var(--accent); font-weight:600;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   A — UPLOAD PREVIEW PANEL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.preview-panel {
  background:var(--bg-elevated);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  margin-top:16px; padding:16px;
}
.preview-panel-title {
  font-size:13px; font-weight:600; margin-bottom:12px;
  display:flex; align-items:center; gap:8px;
}
.preview-metrics-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px;
  margin-bottom:14px;
}
.preview-metric-card {
  background:var(--bg-surface); border-radius:8px;
  border:1px solid var(--glass-border); padding:8px 12px;
}
.preview-metric-name { font-size:11px; color:var(--text-muted); margin-bottom:3px; }
.preview-metric-val  { font-size:15px; font-weight:600; color:var(--text-primary); }
.preview-metric-val.pm-null { color:var(--text-muted); font-size:13px; font-style:italic; }
.preview-actions { display:flex; gap:10px; justify-content:flex-end; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   B — ALIAS SETTINGS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.alias-list { margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.alias-row {
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; background:var(--bg-elevated);
  border-radius:7px; border:1px solid var(--glass-border);
  font-size:13px;
}
.alias-arrow { color:var(--text-muted); flex-shrink:0; }
.alias-text { flex:1; color:var(--text-primary); font-family:monospace; font-size:12px; }
.alias-target { color:var(--accent); font-weight:600; }
.alias-del {
  background:none; border:none; color:var(--text-muted);
  cursor:pointer; font-size:15px; padding:0 4px;
}
.alias-del:hover { color:var(--danger); }
.alias-add-row {
  display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;
}
.alias-add-row input, .alias-add-row select {
  flex:1; min-width:120px; padding:6px 10px;
  background:var(--bg-elevated); border:1px solid var(--glass-border);
  border-radius:7px; color:var(--text-primary); font-size:12px; outline:none;
}
.alias-add-row input:focus, .alias-add-row select:focus {
  border-color:rgba(var(--accent-rgb),.5);
}

/* ══════════════════════════════════════════════════════════════════
   ENTERPRISE ADDITIONS — v2.0
   Custom scrollbar · Page transitions · Trend indicators ·
   Health score gauge · Search palette · Responsive · Print
══════════════════════════════════════════════════════════════════ */

/* ── Custom scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar           { width:5px; height:5px; }
::-webkit-scrollbar-track     { background:transparent; }
::-webkit-scrollbar-thumb     { background:var(--glass-border-md); border-radius:3px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(var(--accent-rgb),.45); }

/* ── Page / tab fade-in ────────────────────────────────────────── */
@keyframes _page-in {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
.page.active          { animation:_page-in 0.22s ease both; }
.page-tab-content.active { animation:_page-in 0.18s ease both; }

/* ── Trend delta chips ─────────────────────────────────────────── */
.trend-up, .trend-down, .trend-flat {
  display:inline-flex; align-items:center; gap:2px;
  font-size:10px; font-weight:600; padding:1px 5px;
  border-radius:10px; white-space:nowrap; vertical-align:middle; margin-left:3px;
}
.trend-up   { color:#34d399; background:rgba(52,211,153,.12); }
.trend-down { color:#f87171; background:rgba(248,113,113,.12); }
.trend-flat { color:var(--text-muted); background:var(--glass-bg-md); }
.cell-delta { display:block; margin-top:2px; }

/* ── Health score gauge ────────────────────────────────────────── */
.health-gauge-wrap {
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; background:var(--glass-bg);
  border:1px solid var(--glass-border); border-radius:var(--radius);
  cursor:pointer; transition:background 0.2s; position:relative; user-select:none;
}
.health-gauge-wrap:hover { background:var(--glass-bg-hover); }
.health-gauge { position:relative; width:48px; height:48px; flex-shrink:0; }
.health-ring {
  width:48px; height:48px; border-radius:50%;
  background:conic-gradient(var(--gauge-color,var(--accent)) var(--gauge-pct,0deg), var(--bg-elevated) 0%);
  display:flex; align-items:center; justify-content:center;
}
.health-ring::before {
  content:""; position:absolute; width:32px; height:32px;
  background:var(--bg-surface); border-radius:50%;
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.health-score-num {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:12px; font-weight:700; color:var(--text-primary); z-index:1;
}
.health-info { display:flex; flex-direction:column; gap:1px; }
.health-grade { font-size:15px; font-weight:700; }
.health-label { font-size:10px; color:var(--text-muted); }
.grade-a-plus,.grade-a { color:#34d399; }
.grade-b-plus,.grade-b { color:#60a5fa; }
.grade-c               { color:#fbbf24; }
.grade-d               { color:#f87171; }

/* Health score popup */
.health-popup {
  position:absolute; top:calc(100% + 8px); right:0; z-index:200;
  background:var(--bg-elevated); border:1px solid var(--glass-border-md);
  border-radius:var(--radius); padding:14px; min-width:260px;
  box-shadow:var(--shadow-lg); animation:_page-in 0.15s ease;
}
.health-popup-title { font-size:11px; font-weight:600; margin-bottom:10px; color:var(--text-secondary); }
.health-comp-row   { display:flex; align-items:center; gap:6px; margin-bottom:7px; }
.health-comp-name  { font-size:11px; color:var(--text-secondary); width:56px; flex-shrink:0; }
.health-comp-bar-wrap { flex:1; height:5px; background:var(--bg-overlay); border-radius:3px; overflow:hidden; }
.health-comp-bar   { height:100%; border-radius:3px; background:var(--accent); transition:width 0.5s ease; }
.health-comp-score { font-size:10px; color:var(--text-muted); width:30px; text-align:right; }
.health-comp-val   { font-size:10px; color:var(--text-muted); width:90px; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Global search command palette ────────────────────────────── */
.search-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,0.55); backdrop-filter:blur(8px) saturate(140%);
  display:flex; align-items:flex-start; justify-content:center; padding-top:9vh;
  opacity:0; visibility:hidden; transition:opacity 0.16s ease, visibility 0.16s;
}
.search-overlay.open { opacity:1; visibility:visible; }
.search-box {
  width:100%; max-width:580px; margin:0 16px;
  background:var(--bg-elevated); border: var(--card-border);
  border-radius:var(--radius); box-shadow:0 20px 60px rgba(0,0,0,0.5); overflow:hidden;
  transform:translateY(-14px); transition:transform 0.18s ease;
}
.search-overlay.open .search-box { transform:translateY(0); }
.search-input-wrap {
  display:flex; align-items:center; gap:10px; padding:13px 16px;
  border-bottom:1px solid var(--glass-border);
}
.search-icon-svg { color:var(--text-muted); flex-shrink:0; }
.search-input {
  flex:1; background:none; border:none; outline:none;
  font-size:15px; color:var(--text-primary); font-family:inherit;
}
.search-input::placeholder { color:var(--text-muted); }
.search-esc-kbd {
  font-size:11px; color:var(--text-muted); background:var(--bg-overlay);
  border:1px solid var(--glass-border); border-radius:4px; padding:2px 6px;
}
.search-results { max-height:300px; overflow-y:auto; }
.search-result-item {
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  cursor:pointer; transition:background 0.1s;
  border-bottom:1px solid var(--glass-border);
}
.search-result-item:last-child { border-bottom:none; }
.search-result-item:hover,.search-result-item.selected { background:var(--glass-bg-md); }
.search-result-name { font-size:14px; font-weight:500; }
.search-result-meta { font-size:11px; color:var(--text-muted); margin-left:auto; display:flex; gap:6px; align-items:center; }
.search-empty { padding:28px; text-align:center; color:var(--text-muted); font-size:13px; }

/* PDF 增补 5: ⌘K 命令面板 — section labels + command icons */
.palette-section-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 10px 16px 6px;
}
.palette-section-label:first-child { padding-top: 4px; }
.palette-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  font-size: 14px;
  color: var(--accent);
}
.search-result-item.palette-cmd .palette-icon {
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--accent-whisper);
  width: 22px; height: 22px;
}
.search-hint-bar {
  padding:8px 16px; font-size:11px; color:var(--text-muted);
  border-top:1px solid var(--glass-border); display:flex; gap:14px;
}
.search-hint-bar kbd {
  background:var(--bg-overlay); border:1px solid var(--glass-border);
  border-radius:3px; padding:1px 5px; font-size:10px;
}

/* Search button in titlebar */
.search-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--glass-border-md);
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  cursor: pointer; font-size: 12px; font-weight: 500;
  transition: all 0.2s;
}
.search-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(var(--accent-rgb),0.3);
  color: var(--text-primary);
}
.search-btn-kbd {
  background:var(--bg-elevated); border:1px solid var(--glass-border);
  border-radius:3px; padding:1px 5px; font-size:10px;
}

/* ── Navigation badge (warning dot) ───────────────────────────── */
.nav-badge {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--danger);
  position: absolute;
  top: 8px; right: 8px;
  box-shadow: 0 0 0 2px rgba(8,12,24,0.82);
  animation: badge-pulse 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(8,12,24,0.82); }
  50% { box-shadow: 0 0 0 2px rgba(8,12,24,0.82), 0 0 0 5px rgba(248,113,113,0.2); }
}

/* ── Sticky table headers ──────────────────────────────────────── */
.stmt-table thead th {
  position:sticky; top:0; z-index:2;
  background:var(--bg-surface); box-shadow:0 1px 0 var(--glass-border);
}

/* ── Cashflow chart ────────────────────────────────────────────── */
.cf-chart-wrap { margin-bottom:12px; }
.cf-chart { height:200px; width:100%; }

/* ── Dashboard warning companies card ─────────────────────────── */
.warn-company-row {
  display:flex; align-items:center; gap:8px; padding:7px 0;
  border-bottom:1px solid var(--glass-border); font-size:13px;
}
.warn-company-row:last-child { border-bottom:none; }

/* ── Keyboard shortcut hint ────────────────────────────────────── */
.kbd-hint { font-size:10px; color:var(--text-muted); display:inline-flex; align-items:center; gap:3px; }
.kbd-hint kbd { background:var(--bg-overlay); border:1px solid var(--glass-border); border-radius:3px; padding:1px 4px; font-size:9px; }

/* ── Improved print styles ─────────────────────────────────────── */
@media print {
  .sidebar, .titlebar, .page-tabs, .period-filter,
  .page-tab-content:not(.active), .btn, .yoy-strip,
  .val-inputs-bar, #btn-history, .template-selector,
  #notes-wrap, .derived-chart-wrap, .cf-chart-wrap,
  .fin-chart-wrap, #detail-skeleton { display:none !important; }
  .main-content { margin:0 !important; padding:16px !important; }
  .glass-card, .card { box-shadow:none !important; border:1px solid #ccc !important; background:#fff !important; }
  body { background:#fff !important; color:#000 !important; }
  .stmt-table th, .stmt-table td { border:1px solid #ddd !important; }
  .val-neg { color:#c00 !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MONOSPACE FONT — Financial Numbers
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.stat-value,
.stmt-table td,
.data-table td:not(:first-child),
.metric-card .m-value,
.cell-delta,
.yoy-chip,
.health-score-num,
.ticker-val,
.variance-col {
  font-family: 'JetBrains Mono', 'Roboto Mono', 'SF Mono', ui-monospace, monospace;
  font-feature-settings: "tnum" 1;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TICKER BAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ticker-bar {
  flex: 1;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
  min-width: 0;
}
.ticker-inner {
  display: flex;
  gap: 4px;
  animation: ticker-scroll 40s linear infinite;
  white-space: nowrap;
  padding: 0 16px;
}
.ticker-inner:empty { display: none; }
.ticker-inner:hover { animation-play-state: paused; }
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.ticker-item:hover { background: var(--glass-bg-hover); }
.ticker-name   { font-weight: 600; color: var(--text-primary); font-size: 11px; letter-spacing: 0.03em; }
.ticker-val    { font-size: 11px; }
.ticker-delta  { font-size: 10px; font-weight: 600; }
.ticker-delta.pos { color: var(--success); }
.ticker-delta.neg { color: var(--danger); }
.ticker-divider { color: var(--glass-border-md); font-size: 11px; padding: 0 4px; }

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Compare Page Components ──────────── */
.compare-select-label { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.compare-company-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.compare-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--glass-border); cursor: pointer;
  font-size: 13px; transition: all 0.2s;
}
.compare-chip.selected {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}
.compare-controls { display: flex; gap: 12px; align-items: center; }
.compare-result-header {
  font-family: 'Instrument Serif', 'Iowan Old Style', 'Songti SC', 'STSong', Georgia, serif;
  font-size: clamp(22px, 2vw + 12px, 28px);
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  margin: var(--space-24) 0 var(--space-8);
}
.compare-chart-wrap { margin-top: var(--space-24); }
.compare-chart-label { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; display: block; }

/* Compare result table — soft hover, smooth transition (PDF Phase 2 spirit) */
.compare-table-wrap .data-table tbody tr {
  transition: background var(--dur-fast) var(--ease-out);
}
.compare-table-wrap .data-table tbody tr:hover {
  background: var(--accent-whisper);
}
.compare-table-wrap .data-table tbody tr:hover td:first-child {
  background: var(--accent-whisper);
}

/* ── Warning Row ──────────────────────── */
.warn-link { color: var(--text-primary); text-decoration: none; font-weight: 500; }
.warn-status { margin-left: auto; font-size: 11px; color: var(--warning); }

/* ── Company Search Input ─────────────── */
.company-search-input {
  margin-left: auto; padding: 8px 14px; border-radius: 20px;
  border: 1px solid var(--glass-border-md); background: var(--glass-bg-md);
  color: var(--text-primary); font-size: 13px; width: 240px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.company-search-input:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

/* ── Bulk Action Bar ──────────────────── */
.bulk-action-bar {
  display: none; align-items: center; gap: 10px; padding: 8px 12px;
  background: rgba(var(--accent-rgb), 0.08); border-radius: 8px;
  margin-bottom: 10px; flex-wrap: wrap;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   AUDIT BADGES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.audit-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.audit-warn  { background: rgba(251,191,36,0.15);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
.audit-error { background: rgba(248,113,113,0.15); color: #f87171; border: 1px solid rgba(248,113,113,0.3); }
.audit-ok    { background: rgba(52,211,153,0.12);  color: #34d399; border: 1px solid rgba(52,211,153,0.25); }
html.light .audit-warn  { background: rgba(217,119,6,0.10);  color: #b45309; border-color: rgba(217,119,6,0.25); }
html.light .audit-error { background: rgba(220,38,38,0.08);  color: #b91c1c; border-color: rgba(220,38,38,0.2); }
html.light .audit-ok    { background: rgba(5,150,105,0.08);  color: #065f46; border-color: rgba(5,150,105,0.2); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SPARKLINE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sparkline-col { width: 96px; text-align: center; }
svg.sparkline { display: block; margin: auto; overflow: visible; }
th.num-col, td.num-col { text-align: right; font-variant-numeric: tabular-nums; }

/* Sortable column header */
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { color: var(--text-primary); }
th[data-sort] .sort-icon { opacity: 0.4; font-size: 10px; margin-left: 3px; }
th[data-sort].sort-asc .sort-icon::before  { content: '↑'; }
th[data-sort].sort-desc .sort-icon::before { content: '↓'; }
th[data-sort].sort-asc .sort-icon,
th[data-sort].sort-desc .sort-icon { opacity: 1; color: var(--accent); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   IMPORT WIZARD STEPS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ── PDF §3.3.2 — Import Wizard 单步漏斗 ─────────────────────────
   Each .iwz-stage is rendered solo; setImportStage(n) flips .active.
   .import-wizard-nav at the top shows progress without claiming
   actionable space (chips are clickable for 回退). */
.import-wizard-nav {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin: 0 0 var(--space-24);
  padding: 0;
  flex-wrap: wrap;
}
.iwz-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.iwz-step .iwz-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
}
.iwz-step:hover { color: var(--text-secondary); border-color: var(--line-strong); }
.iwz-step.done {
  color: var(--gain);
  border-color: rgba(var(--gain-rgb), 0.40);
}
.iwz-step.active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-whisper);
  box-shadow: var(--accent-glow);
}
.iwz-line {
  flex: 1;
  height: 1px;
  background: var(--line);
  min-width: 12px;
  max-width: 64px;
}

/* Stage container */
.iwz-stage {
  display: none;
  animation: fs-tab-content-in var(--dur-normal) var(--ease-out) both;
}
.iwz-stage.active { display: block; }
.iwz-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-12);
}
.iwz-stage-title {
  font-family: 'Instrument Serif', 'Iowan Old Style', 'Songti SC', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--text-primary);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.iwz-stage-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 var(--space-24);
}
.iwz-back {
  font-size: 12px;
  padding: 4px 12px;
}

/* Stage 4 — done state */
.iwz-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-48) var(--space-24);
  gap: var(--space-16);
}
.iwz-done-check { display: block; }
.iwz-done-title {
  font-family: 'Instrument Serif', 'Iowan Old Style', 'Songti SC', Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}
.iwz-done-meta {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}
.iwz-done-actions {
  display: flex;
  gap: var(--space-12);
  margin-top: var(--space-12);
}

.wizard-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 0 8px;
  margin-top: 12px;
}
.wstep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  position: relative;
}
.wstep-dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--glass-border-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-elevated);
  transition: all 0.3s ease;
  position: relative; z-index: 1;
}
.wstep.active .wstep-dot {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.15);
}
.wstep.active .wstep-dot::after {
  content: '';
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 2px solid rgba(var(--accent-rgb), 0.3);
  animation: pulse-ring 1.2s ease-out infinite;
}
.wstep.done .wstep-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.wstep-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}
.wstep.active .wstep-label { color: var(--accent); font-weight: 600; }
.wstep.done .wstep-label   { color: var(--text-secondary); }
.wstep-line {
  position: absolute;
  top: 15px; left: calc(50% + 17px);
  width: calc(100% - 34px);
  height: 2px;
  background: var(--glass-border-md);
  transition: background 0.4s;
}
.wstep.done .wstep-line { background: var(--accent); }

@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   VARIANCE ANALYSIS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.variance-col {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  min-width: 90px;
  padding: 6px 10px !important;
}
.variance-col small {
  display: block;
  font-size: 10px;
  opacity: 0.75;
  font-weight: 400;
}
.var-pos { color: var(--success); background: rgba(52,211,153,0.07); }
.var-neg { color: var(--danger);  background: rgba(248,113,113,0.07); }
html.light .var-pos { background: rgba(5,150,105,0.07); color: #065f46; }
html.light .var-neg { background: rgba(220,38,38,0.07);  color: #b91c1c; }

/* ── Keyboard Shortcuts Panel ──────────── */
.shortcuts-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.shortcuts-dialog {
  width: 90%; max-width: 480px;
  padding: 24px; border-radius: 16px;
}
.shortcuts-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.shortcuts-header h3 { font-size: 18px; font-weight: 700; }
.shortcuts-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.shortcut-section h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); margin-bottom: 12px;
}
.shortcut-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; font-size: 13px; color: var(--text-secondary);
}
.shortcut-row kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 6px;
  background: var(--glass-bg-md); border: 1px solid var(--glass-border-md);
  border-radius: 5px; font-family: "Inter", sans-serif;
  font-size: 11px; font-weight: 600; color: var(--text-primary);
}

@media (max-width: 700px) {
  .shortcuts-grid { grid-template-columns: 1fr; gap: 16px; }
  .shortcuts-dialog { width: 95%; padding: 20px; }
}

/* ── Responsive breakpoints ────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --sidebar-w:200px; }
  .bento-grid { grid-template-columns:repeat(6,1fr); }
  .bento-lg   { grid-column:span 6; }
  .bento-md   { grid-column:span 6; }
  .bento-sm   { grid-column:span 3; }
  .bento-act  { grid-column:span 6; }
}
/* ── Brand-driven hover for ghost buttons in company header ── */
#company-header .btn-ghost:hover {
  background:    rgba(var(--brand-rgb, var(--accent-rgb)), 0.14);
  border-color:  rgba(var(--brand-rgb, var(--accent-rgb)), 0.5);
  color:         rgb(var(--brand-rgb, var(--accent-rgb)));
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   METRIC SEARCH BAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.metric-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  margin-bottom: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.metric-search-bar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.12);
}
.metric-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  min-width: 0;
}
.metric-search-input::placeholder { color: var(--text-muted); }
.metric-search-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 3px;
  line-height: 1;
  transition: color 0.15s;
}
.metric-search-clear:hover { color: var(--text-primary); }
mark.metric-highlight {
  background: rgba(var(--accent-rgb), 0.25);
  color: var(--text-primary);
  border-radius: 2px;
  padding: 0 1px;
}
.stmt-table tbody tr[style*="display: none"] + tr.divider { display: none !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COMPANY LIST PAGINATION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.pg-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--glass-border-md);
  border-radius: var(--radius-sm);
  background: var(--glass-bg);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pg-btn:hover   { background: var(--glass-bg-hover); color: var(--text-primary); }
.pg-btn.active  { background: rgba(var(--accent-rgb), 0.15); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.pg-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.pg-info { font-size: 12px; color: var(--text-muted); margin: 0 6px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ENHANCED PRINT STYLES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media print {
  /* Page setup */
  @page { margin: 1.5cm; size: A4 landscape; }

  /* Hide interactive elements */
  .sidebar, .titlebar, .mobile-bottom-nav,
  .page-tabs, .period-filter, .btn,
  .tbl-controls, .metric-search-bar,
  .drawer, .drawer-overlay, .search-overlay,
  #toast-container, .health-popup,
  .hdr-actions, .shortcuts-overlay,
  .confirm-overlay,
  .page-tab-content:not(.active), .yoy-strip,
  .val-inputs-bar, #btn-history, #btn-export-csv, #btn-export-excel,
  .template-selector, #notes-wrap, #detail-skeleton,
  .stmt-arrow, #hdr-logo-wrap .hover-overlay,
  button:not(.no-print) { display: none !important; }

  /* Full width layout */
  .main-content { margin-left: 0 !important; padding: 0 !important; }
  body { background: white !important; color: black !important; }
  html { font-size: 11pt; }
  .app-root, .app-shell { display: block !important; }
  .container { max-width: 100% !important; padding: 0 !important; }

  /* Table optimization for print */
  .stmt-table { width: 100%; border-collapse: collapse; font-size: 10pt; }
  .stmt-table th, .stmt-table td {
    border: 1px solid #ccc; padding: 4px 8px;
    color: black !important; background: white !important;
  }
  .stmt-table th { background: #f5f5f5 !important; font-weight: 600; }
  .stmt-table .section-hdr td { background: #efefef !important; font-weight: 700 !important; }
  .stmt-wrap { overflow: visible !important; }
  .data-table { width: 100% !important; border-collapse: collapse !important; }
  .data-table th, .data-table td { border: 1px solid #ddd !important; padding: 4px 6px !important; }

  /* Company header for print */
  #company-header { border-bottom: 2px solid #333; padding-bottom: 12px; margin-bottom: 16px; }
  #hdr-name { color: black !important; font-size: 18pt; }
  .hdr-badge { border: 1px solid #999; color: #333 !important; background: #f5f5f5 !important; }
  #hdr-logo { display: none !important; }
  #hdr-logo-canvas { display: none !important; }

  /* Charts: hide (can't print canvas) */
  .fin-chart-wrap, .cf-chart-wrap, .derived-chart-wrap { display: none !important; }

  /* Cards: flat for print */
  .glass-card, .card {
    background: white !important; border: 1px solid #ddd !important;
    box-shadow: none !important; backdrop-filter: none !important;
    margin-bottom: 12pt !important;
  }

  /* Colors */
  .val-neg { color: #c00 !important; }
  .trend-up { color: #060 !important; }
  .trend-down { color: #c00 !important; }
  .badge { border: 1px solid #ccc !important; color: #333 !important; background: #f5f5f5 !important; }

  /* Page breaks */
  .stmt-section { page-break-inside: avoid; }
  .stmt-panel { page-break-before: auto; }
  h2, h3 { page-break-after: avoid; }
  .page-tab-content.active { display: block !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE RESPONSIVE ENHANCEMENTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 900px) {
  /* Company header: stack logo + info vertically */
  #company-header > div > div:first-child { display: none !important; }  /* hide logo on tablet */
  .tbl-controls { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tbl-ctrl-group { flex-direction: row; align-items: center; gap: 6px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE BOTTOM NAV BAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.mobile-bottom-nav {
  display: none; /* shown via media query */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 600;
  background: rgba(10,15,30,0.82);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
html.light .mobile-bottom-nav {
  background: rgba(255,255,255,0.88);
  border-top-color: rgba(0,0,0,0.06);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.06);
}
.mobile-bottom-nav-inner {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  height: 56px;
  max-width: 420px;
  margin: 0 auto;
  padding: 6px 4px 2px;
}
.mob-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  min-width: 52px;
  flex: 1;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.mob-nav-item svg { width: 22px; height: 22px; stroke-width: 1.8; transition: transform 0.2s; }
.mob-nav-item.active { color: var(--accent); }
.mob-nav-item.active svg { transform: scale(1.08); }
/* Active pill indicator */
.mob-nav-item.active::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
}
.mob-nav-item:active { transform: scale(0.92); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE LAYOUT — ≤ 700px
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 700px) {

  /* ── Layout shell ─────────────────────────── */
  .sidebar { display: none !important; }
  .mobile-bottom-nav { display: block; }
  .main-content {
    padding: 12px 16px 80px 16px;
    margin-left: 0 !important;
  }
  html, body { overflow: auto; }
  .app-shell { flex-direction: column; overflow: auto; }

  /* ── Titlebar: sleek ──────────────────────── */
  .titlebar {
    padding: 0 16px;
    height: 52px;
    min-height: 52px;
    border-bottom: none;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04);
  }
  html.light .titlebar { box-shadow: 0 1px 0 rgba(0,0,0,0.05); }
  .titlebar-brand { width: auto; padding: 0; gap: 8px; }
  .brand-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
  .ticker-bar { display: none; }
  .titlebar-actions { margin-left: auto; }
  .theme-swatches { display: none; }
  .win-controls { display: none; }
  .search-btn span:not(.search-btn-kbd) { display: none; }
  .search-btn .search-btn-kbd { display: none; }
  .search-btn {
    min-width: 34px; width: 34px; height: 34px;
    justify-content: center; padding: 0;
    border-radius: 50%;
  }
  .dark-toggle {
    width: 34px; height: 34px; min-width: 34px;
    border-radius: 50%; padding: 0;
    display: flex; align-items: center; justify-content: center;
  }

  /* ── Page headers ────────────────────────── */
  .page-header {
    margin-bottom: 20px;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .page-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.03em;
  }
  .page-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 0;
  }
  /* Companies header: vertical stack */
  .companies-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-bottom: 16px;
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }
  /* Company search on mobile: full width, prominent */
  .company-search-input {
    width: 100% !important;
    max-width: none !important;
    border-radius: 12px !important;
    padding: 12px 16px 12px 40px !important;
    font-size: 15px !important;
    background: var(--glass-bg-md) !important;
    border: 1px solid var(--glass-border-md) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237c8fa8' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    background-size: 16px !important;
  }
  .company-search-input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.1) !important;
  }

  /* ── Dashboard: 2-column stat grid ────────── */
  .bento-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    grid-auto-rows: auto !important;
  }
  .bento-lg, .bento-md, .bento-sm, .bento-act {
    grid-column: unset !important;
    grid-row: unset !important;
    min-height: 0 !important;
    height: auto !important;
  }
  /* Stat cards: compact 2-col */
  .bento-sm {
    padding: 14px !important;
    border-radius: 14px !important;
  }
  .stat-label {
    font-size: 11px !important;
    letter-spacing: 0.03em;
    opacity: 0.7;
  }
  .stat-value {
    font-size: 22px !important;
    margin-top: 4px !important;
    line-height: 1.1;
  }
  /* Larger cards span full width */
  .bento-lg, .bento-md, .bento-act {
    grid-column: 1 / -1 !important;
  }
  .bento-lg { padding: 14px !important; }
  .bento-md { padding: 14px !important; }
  .bento-act { padding: 12px 14px !important; }

  .bento-card-header {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .bento-link { font-size: 12px; }

  .dash-company-list { max-height: 180px; }
  .dash-company-row { padding: 10px 12px; border-radius: 10px; font-size: 13px; }

  /* Quick actions: horizontal row */
  .quick-action {
    padding: 4px 0;
    gap: 12px;
  }
  .quick-action svg { width: 24px; height: 24px; flex-shrink: 0; }
  .qa-title { font-size: 13px; }
  .qa-sub { font-size: 11px; }

  /* Chart container */
  #chart-market { height: 160px !important; margin-top: 4px !important; }

  .metric-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .card-value { font-size: 18px; }
  .card-label { font-size: 11px; }

  /* ── Companies: remove outer card wrapper on mobile ── */
  #page-companies > .card.glass-card,
  #page-companies > .glass-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  #page-companies > .card.glass-card::before,
  #page-companies > .glass-card::before { display: none !important; }

  /* ── Companies: mobile card view ───────────── */
  .data-table thead { display: none; }
  .data-table tbody tr.company-row {
    display: flex !important;
    flex-wrap: wrap;
    position: relative;
    margin-bottom: 12px;
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 16px;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .data-table tbody tr.company-row:active {
    transform: scale(0.98);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  }
  .data-table tbody td {
    border: none !important;
    padding: 0 !important;
    font-size: 13px;
  }
  .data-table tbody td::before { content: none; }

  /* ① Checkbox: hidden on mobile (tap the card to navigate) */
  .data-table tbody td:nth-child(1) {
    display: none !important;
  }

  /* ② Avatar + name: full width, bigger avatar */
  .data-table tbody td:nth-child(2) {
    width: 100%;
  }
  .data-table tbody td:nth-child(2) .co-avatar,
  .data-table tbody td:nth-child(2) .co-avatar-img {
    width: 44px !important; height: 44px !important;
    border-radius: 12px !important; font-size: 17px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }
  .data-table tbody td:nth-child(2) > div { gap: 12px !important; }
  .data-table tbody td:nth-child(2) .co-name {
    font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  }
  .data-table tbody td:nth-child(2) .co-ticker {
    font-size: 11px; padding: 2px 6px;
  }

  /* ③④⑥ Market / count / audit: tag row */
  .data-table tbody td:nth-child(3),
  .data-table tbody td:nth-child(4),
  .data-table tbody td:nth-child(6) {
    display: inline-flex !important;
    align-items: center;
    margin-top: 12px;
    margin-right: 6px;
  }
  .data-table tbody td:nth-child(4) .co-count {
    min-width: 22px; height: 20px; font-size: 11px; padding: 0 6px;
  }
  .data-table tbody td:nth-child(4)::before { content: none; }
  .data-table tbody td:nth-child(4)::after {
    content: "份报告";
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 4px;
  }

  /* ⑤ Sparkline: hidden */
  .data-table tbody td.sparkline-col { display: none !important; }

  /* ⑦ Actions: compact inline row, no separator */
  .data-table tbody td:nth-child(7) {
    width: 100%;
    margin-top: 14px;
    display: flex !important;
    justify-content: flex-end;
    gap: 8px;
  }
  .data-table tbody td:nth-child(7) > div {
    width: 100%;
    display: flex !important;
    gap: 8px !important;
  }
  .data-table tbody td:nth-child(7) .btn-action-view {
    flex: 1;
    text-align: center;
    justify-content: center;
    padding: 10px 0 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    border: none;
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.25);
  }
  .data-table tbody td:nth-child(7) .btn-action-view::after { content: none; }
  .data-table tbody td:nth-child(7) .btn-action-del {
    padding: 10px 16px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border-md);
    color: var(--text-muted);
  }

  /* Bulk action bar */
  #bulk-action-bar {
    flex-direction: column;
    align-items: stretch !important;
    gap: 6px;
    padding: 10px;
    border-radius: 14px;
  }
  #bulk-action-bar .btn { width: 100%; text-align: center; }

  /* ── Pagination ──────────────────────────── */
  .pagination { flex-wrap: wrap; justify-content: center; gap: 4px; }
  .pagination .btn {
    min-width: 34px; height: 34px; padding: 0 8px;
    font-size: 12px; border-radius: 10px;
  }
  .pagination .page-info { width: 100%; text-align: center; margin-top: 4px; font-size: 11px; }

  /* ── Import page ─────────────────────────── */
  .form-row { flex-direction: column; gap: 8px; }
  .form-group { min-width: 0; }
  #drop-zone {
    padding: 28px 16px;
    border-radius: 16px;
    border-width: 2px;
  }
  #drop-zone svg { width: 36px; height: 36px; }
  #drop-zone p { font-size: 14px; font-weight: 600; }
  #drop-zone small { font-size: 12px; }
  .company-chips { gap: 6px; }
  .chip {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 20px;
  }

  /* Wizard steps */
  .wizard-steps { gap: 2px; }
  .wstep-label { font-size: 9px; }
  .wstep-dot { width: 28px; height: 28px; }
  .wstep-num { font-size: 11px; }
  .wstep-line { width: 18px; }

  /* Preview grid */
  .preview-metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .preview-metric-card {
    padding: 10px !important;
    border-radius: 12px !important;
  }
  .preview-metric-name { font-size: 11px !important; }
  .preview-metric-val { font-size: 14px !important; }

  /* ── Compare page ────────────────────────── */
  .compare-company-grid { flex-direction: column !important; gap: 8px; }
  .compare-chip {
    width: 100%;
    border-radius: 12px;
    padding: 10px 14px;
  }
  .compare-table-wrap {
    font-size: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }

  /* ── Settings page ───────────────────────── */
  .settings-grid { grid-template-columns: 1fr !important; gap: 10px; }
  .settings-section { border-radius: 14px !important; }

  /* ── Detail page: company header ─────────── */
  #company-header {
    padding: 16px !important;
    border-radius: 16px !important;
    margin-bottom: 16px !important;
  }
  #company-header > div { flex-direction: column !important; gap: 14px !important; }
  #company-header > div > div:first-child { display: flex !important; align-items: center !important; gap: 14px !important; }
  .company-logo-wrap {
    width: 52px !important; height: 52px !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
  #hdr-name {
    font-size: 22px !important;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .hdr-badges { flex-wrap: wrap; gap: 6px !important; }
  .hdr-badge {
    font-size: 11px !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    font-weight: 600;
  }
  .hdr-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
  }
  .hdr-actions .btn {
    font-size: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    text-align: center;
    justify-content: center;
    min-width: 0;
  }
  .hdr-actions .btn-primary {
    grid-column: 1 / -1;
  }

  /* Health widget */
  .health-gauge-wrap { gap: 8px; }
  .health-gauge { width: 44px; height: 44px; }
  .health-score-num { font-size: 14px; }

  /* ── Financial tables ────────────────────── */
  .stmt-table th, .stmt-table td { padding: 8px 10px; font-size: 12px; }
  .stmt-table th:first-child,
  .stmt-table td:first-child { min-width: 90px; max-width: 120px; font-size: 11px; }
  .stmt-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
  }
  .stmt-tab {
    flex-shrink: 0;
    font-size: 12px;
    padding: 7px 14px;
    border-radius: 8px;
  }
  .tbl-controls { flex-wrap: wrap; gap: 6px; }
  .tbl-ctrl-group { flex: 1 1 100%; min-width: 0; }
  .tbl-select { width: 100%; font-size: 13px; border-radius: 10px; padding: 8px 10px; }

  /* Page tabs: pill-style scrollable */
  .page-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
  }
  .page-tab {
    flex-shrink: 0;
    font-size: 12px;
    padding: 8px 16px;
    border-radius: 10px;
    white-space: nowrap;
  }

  /* Reports table */
  .report-period-input { width: 90px !important; font-size: 12px !important; border-radius: 8px !important; }

  /* ── Detail page: report section header ── */
  .reports-section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .reports-section-header > div:last-child {
    width: 100%;
  }
  .reports-section-header > div:last-child .btn {
    flex: 1;
    text-align: center;
    justify-content: center;
  }

  /* ── Detail page: report cards ─────────── */
  #reports-table tbody tr[id^="report-row-"] {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    padding: 14px 16px;
    margin-bottom: 10px;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }
  /* Row 1: period input + type badge + validation badge */
  #reports-table tbody tr[id^="report-row-"] td:nth-child(1) {
    display: block !important;
    order: 1;
    flex: 1;
    min-width: 0;
  }
  #reports-table tbody tr[id^="report-row-"] td:nth-child(3) {
    display: inline-flex !important;
    order: 2;
    margin: 0 4px !important;
  }
  #reports-table tbody tr[id^="report-row-"] td:nth-child(6) {
    display: inline-flex !important;
    order: 3;
    margin: 0 !important;
  }
  /* Row 2: filename */
  #reports-table tbody tr[id^="report-row-"] td:nth-child(2) {
    order: 4;
    width: 100% !important;
    margin-top: 8px;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
  }
  /* Row 3: date · N 项指标 */
  #reports-table tbody tr[id^="report-row-"] td:nth-child(4) {
    display: inline-flex !important;
    order: 5;
    margin: 6px 0 0 0 !important;
  }
  #reports-table tbody tr[id^="report-row-"] td:nth-child(4)::after {
    content: none !important;
  }
  #reports-table tbody tr[id^="report-row-"] td:nth-child(5) {
    order: 6;
    display: inline-flex !important;
    align-items: center;
    margin: 6px 0 0 0 !important;
    font-size: 12px;
    color: var(--text-muted);
  }
  #reports-table tbody tr[id^="report-row-"] td:nth-child(5)::before {
    content: "·";
    margin: 0 6px;
    color: var(--text-muted);
  }
  #reports-table tbody tr[id^="report-row-"] td:nth-child(5)::after {
    content: " 项指标";
    color: var(--text-muted);
    font-size: 11px;
    margin-left: 2px;
  }
  /* Row 4: action buttons */
  #reports-table tbody tr[id^="report-row-"] td:nth-child(7) {
    order: 7;
    width: 100% !important;
    margin-top: 10px !important;
    display: flex !important;
  }
  #reports-table tbody tr[id^="report-row-"] td:nth-child(7) > div {
    width: 100%;
    display: flex !important;
    gap: 8px !important;
  }
  #reports-table tbody tr[id^="report-row-"] td:nth-child(7) .btn {
    flex: 1;
    text-align: center;
    justify-content: center;
    padding: 8px 12px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }
  /* Validation detail panel */
  #reports-table tbody tr.val-detail-row td {
    display: block !important;
    padding: 12px 16px !important;
  }

  /* ── Toast: floating above bottom nav ────── */
  #toast-container { left: 16px; right: 16px; bottom: 72px; }
  .toast {
    width: 100%;
    text-align: center;
    font-size: 13px;
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  }

  /* ── Search overlay ──────────────────────── */
  .search-overlay .search-box {
    margin: 8px;
    max-width: 100%;
    border-radius: 16px;
    padding: 4px;
  }
  .search-overlay .search-input { font-size: 15px; padding: 12px 14px; }
  .search-results { max-height: 50vh; }
  .search-hint { display: none; }

  /* ── Metric search ───────────────────────── */
  .metric-search-bar { margin-bottom: 8px; border-radius: 10px; }
  .metric-search-bar input { font-size: 13px; padding: 10px 12px; }

  /* ── Drawer: full-screen sheet ──────────── */
  .drawer {
    width: 100% !important;
    right: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 92vh;
  }

  /* ── Buttons: touch-friendly ─────────────── */
  .btn {
    min-height: 40px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
  }
  .btn-sm { min-height: 34px; border-radius: 8px; }
  .btn-primary, .btn[style*="background:var(--accent)"] {
    box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.25);
  }

  /* ── Cards: refined glass ────────────────── */
  .glass-card, .card {
    border-radius: 14px !important;
  }

  /* ── Notes textarea ──────────────────────── */
  .notes-textarea { font-size: 14px; border-radius: 12px; padding: 12px; }

  /* ── Alias management ────────────────────── */
  .alias-add-row { flex-direction: column; gap: 8px; }
  .alias-add-row input, .alias-add-row select { width: 100%; border-radius: 10px; padding: 10px 12px; }
  .alias-add-row .btn { width: 100%; }

  /* ── Upload progress ─────────────────────── */
  .upload-progress-bar { border-radius: 6px; height: 6px; }
  .upload-jump-banner { border-radius: 14px !important; }

  /* ── General polish ──────────────────────── */
  select, input[type="text"], input[type="number"], input[type="date"], textarea {
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   EXTRA SMALL — ≤ 375px (iPhone SE etc.)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 375px) {
  .main-content { padding: 8px 12px 80px 12px; }
  .page-title { font-size: 20px; }
  .stat-value { font-size: 20px !important; }
  .bento-sm { padding: 12px !important; }
  .card, .glass-card { padding: 12px; }
  #drop-zone { padding: 24px 12px; }
  .preview-metrics-grid { grid-template-columns: 1fr !important; }
  .wizard-steps { gap: 0; }
  .wstep-line { width: 12px; }
  .wstep-label { font-size: 8px; }
  .hdr-actions { grid-template-columns: 1fr !important; }
  .hdr-actions .btn { font-size: 11px; padding: 8px 10px; }
  /* Company cards: tighter on tiny screens */
  .data-table tbody tr.company-row { padding: 14px 12px; border-radius: 14px; }
  .data-table tbody td:nth-child(2) .co-avatar,
  .data-table tbody td:nth-child(2) .co-avatar-img {
    width: 38px !important; height: 38px !important;
    border-radius: 10px !important;
  }
  .data-table tbody td:nth-child(2) .co-name { font-size: 15px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COMPARE PAGE — additional styles
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.compare-chip {
  transition: all 0.2s ease;
  user-select: none;
}
.compare-chip:hover {
  background: rgba(var(--accent-rgb), 0.06);
  border-color: rgba(var(--accent-rgb), 0.3);
}
.compare-chip input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--accent);
}
.compare-table-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.compare-table-wrap .data-table th {
  font-size: 12px;
  white-space: nowrap;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAGINATION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 13px;
}
.pagination button {
  padding: 4px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border-md);
  background: var(--glass-bg);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
}
.pagination button:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: var(--accent);
}
.pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pagination button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.pagination .page-info {
  color: var(--text-muted);
  font-size: 12px;
  margin: 0 8px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOAST IMPROVEMENTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.toast.warning {
  background: var(--warning-dim);
  border-left: 3px solid var(--warning);
  color: var(--warning);
}
.toast.success {
  background: var(--success-dim);
  border-left: 3px solid var(--success);
  color: var(--success);
}
.toast.error {
  background: var(--danger-dim);
  border-left: 3px solid var(--danger);
  color: var(--danger);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ACCESSIBILITY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Focus-visible outlines for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  left: 0;
}

/* Light mode contrast fixes */
html.light .text-secondary,
html.light .page-subtitle {
  color: #475569;
}
html.light .text-muted,
html.light .search-btn-kbd {
  color: #64748b;
}
html.light .nav-item .nav-label {
  color: #334155;
}
html.light .nav-item.active .nav-label {
  color: var(--accent-dark);
}
html.light .card-value {
  color: #0f172a;
}
html.light .data-table th {
  color: #334155;
  background: rgba(0,0,0,0.03);
}
html.light .data-table td {
  color: #1e293b;
}
html.light .chip {
  color: #334155;
  border-color: rgba(0,0,0,0.12);
}

/* Upload progress bar */
.upload-progress-wrap {
  display: none;
  margin-top: 10px;
}
.upload-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--glass-bg-md);
  border-radius: 3px;
  overflow: hidden;
}
.upload-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.upload-progress-text {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  text-align: right;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   REDUCED MOTION — respect OS preference
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .liquid-shimmer { animation: none !important; }
  .ticker-inner { animation: none !important; }
  .ripple { display: none !important; }
  .page { animation: none !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ADDITIONAL UI ENHANCEMENTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 1. Stat card icons (dashboard) ─────────────────────────────── */
.stat-icon {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), 0.12); color: var(--accent);
  margin-bottom: 8px; flex-shrink: 0;
}
.stat-icon svg { width: 18px; height: 18px; }

/* ── 2. Theme swatch active checkmark — REMOVED with the swatches. ── */

/* ── 3. Sticky first column in financial tables ─────────────────── */
.data-table th:first-child,
.data-table td:first-child {
  position: sticky; left: 0; z-index: 2;
  background: var(--bg-surface);
}
html.light .data-table th:first-child,
html.light .data-table td:first-child {
  background: #fff;
}
.data-table th:first-child { z-index: 3; }
.data-table td:first-child::after,
.data-table th:first-child::after {
  content: ''; position: absolute; right: -8px; top: 0; bottom: 0; width: 8px;
  background: linear-gradient(to right, rgba(0,0,0,0.08), transparent);
  pointer-events: none;
}

/* ── 4. Nav badge tooltip ───────────────────────────────────────── */
.nav-badge { cursor: help; }
.nav-badge[title] { position: relative; }

/* ── 5. Empty state styling ─────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 24px; text-align: center; color: var(--text-muted);
}
.empty-state-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.4; }
.empty-state-title { font-size: 16px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.empty-state-desc { font-size: 13px; max-width: 320px; line-height: 1.6; }
.empty-state .btn { margin-top: 16px; }

/* ── 6. Period quick nav buttons ────────────────────────────────── */
.period-quick-nav {
  display: flex; gap: 6px; align-items: center;
}
.period-quick-btn {
  padding: 4px 10px; border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 500; cursor: pointer;
  border: 1px solid var(--glass-border-md); background: transparent;
  color: var(--text-secondary); transition: all 0.15s;
}
.period-quick-btn:hover { background: var(--glass-bg-hover); color: var(--text-primary); }
.period-quick-btn.active { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); border-color: rgba(var(--accent-rgb), 0.3); }

/* ── 7. Notes auto-save indicator ───────────────────────────────── */
.notes-status {
  font-size: 11px; color: var(--text-muted); margin-top: 4px;
  transition: opacity 0.3s;
}
.notes-status.saved { color: var(--success); }

/* ── 8. Data anomaly highlight ──────────────────────────────────── */
.yoy-extreme {
  animation: pulse-warn 2s ease-in-out infinite;
  font-weight: 700 !important;
}
@keyframes pulse-warn {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ── 9. Trend chart popup ───────────────────────────────────────── */
.metric-trend-popup {
  position: fixed; z-index: 8000;
  background: var(--bg-elevated); border: var(--card-border);
  border-radius: var(--radius-lg); box-shadow: 0 16px 48px rgba(0,0,0,0.4);
  padding: 16px; min-width: 360px; max-width: 480px;
}
.metric-trend-popup .popup-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.metric-trend-popup .popup-title { font-size: 14px; font-weight: 600; }
.metric-trend-popup .popup-close {
  width: 24px; height: 24px; border-radius: 50%;
  border: none; background: var(--glass-bg-hover); color: var(--text-muted);
  cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center;
}

/* ── 10. Card view toggle for company list ──────────────────────── */
.view-toggle {
  display: inline-flex; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--glass-border-md);
}
.view-toggle-btn {
  padding: 5px 10px; border: none; background: transparent;
  color: var(--text-muted); cursor: pointer; font-size: 12px;
  transition: all 0.15s;
}
.view-toggle-btn.active {
  background: rgba(var(--accent-rgb), 0.15); color: var(--accent);
}
.company-card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.company-card {
  background: var(--glass-bg); border: var(--card-border);
  border-radius: var(--radius); padding: 16px;
  cursor: pointer; transition: all 0.2s;
}
.company-card:hover {
  background: var(--glass-bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.company-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.company-card-name { font-weight: 600; font-size: 14px; }
.company-card-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.company-card-stats { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); }
.company-card-stats span { display: flex; align-items: center; gap: 4px; }

/* ── 11. Keyboard shortcuts overlay (enhanced) ──────────────────── */
.shortcuts-overlay {
  opacity: 0; visibility: hidden; transition: opacity 0.16s, visibility 0.16s;
}
.shortcuts-overlay.open { opacity: 1; visibility: visible; }
.shortcuts-box {
  background: var(--bg-elevated); border: var(--card-border);
  border-radius: var(--radius-lg); padding: 24px; max-width: 420px; width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.shortcuts-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.shortcut-keys { display: flex; gap: 4px; }
.shortcut-key {
  background: var(--bg-surface); border: 1px solid var(--glass-border-md);
  border-radius: 4px; padding: 2px 8px; font-size: 11px; font-family: 'JetBrains Mono', monospace;
}
.shortcuts-divider {
  height: 1px; background: var(--glass-border); margin: 10px 0;
}
.shortcut-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0;
  font-size: 12.5px;
  color: var(--text-secondary);
}

/* ── 12. Import history section ─────────────────────────────────── */
.import-history-list { margin-top: 12px; }
.import-history-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: var(--radius-sm);
  font-size: 12px; color: var(--text-secondary);
  transition: background 0.15s;
}
.import-history-item:hover { background: var(--glass-bg); }
.import-history-item .file-name { font-weight: 500; color: var(--text-primary); }
.import-history-item .import-time { color: var(--text-muted); font-size: 11px; }
.import-history-item .import-status { font-size: 11px; }

/* ── 13. Compare preview info bar ───────────────────────────────── */
.compare-preview-info {
  font-size: 12px; color: var(--text-muted); padding: 8px 0;
  display: flex; align-items: center; gap: 6px;
}
.compare-preview-info .num { color: var(--accent); font-weight: 600; }

/* ── Market & Peer Comparison tab ─────────────────────────────── */
.market-card {
  background: var(--glass-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: 14px;
  padding: 18px 20px;
  backdrop-filter: blur(8px);
}
.market-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; gap: 12px; flex-wrap: wrap;
}
.market-card-head h3 {
  margin: 0; font-size: 15px; font-weight: 600; color: var(--text-primary);
}
.market-range-seg {
  display: inline-flex; gap: 2px; background: var(--glass-bg-md, rgba(255,255,255,0.05));
  border-radius: 8px; padding: 2px;
}
.market-range-seg button {
  padding: 5px 12px; font-size: 12px; border: none; background: transparent;
  color: var(--text-secondary); border-radius: 6px; cursor: pointer; transition: all .15s;
}
.market-range-seg button:hover { background: var(--glass-bg, rgba(255,255,255,0.06)); }
.market-range-seg button.active { background: var(--accent, #60a5fa); color: #fff; }

.trend-metric-tabs {
  display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap;
}
.trend-metric-tab, .peer-metric-tab {
  padding: 4px 12px; font-size: 12px; border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  background: transparent; color: var(--text-secondary); border-radius: 6px; cursor: pointer; transition: all .15s;
}
.trend-metric-tab:hover, .peer-metric-tab:hover { background: var(--glass-bg-md, rgba(255,255,255,0.05)); }
.trend-metric-tab.active, .peer-metric-tab.active {
  background: var(--accent, #60a5fa); color: #fff; border-color: var(--accent, #60a5fa);
}

/* Peer comparison table */
.peer-table-wrap { overflow-x: auto; }
.peer-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.peer-table th {
  text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 600;
  color: var(--text-muted); border-bottom: 1px solid var(--line-strong, rgba(255,255,255,0.1));
  text-transform: uppercase; letter-spacing: 0.05em;
}
.peer-table td {
  padding: 12px; border-bottom: 1px solid var(--line, rgba(255,255,255,0.05));
}
.peer-table .peer-num { text-align: right; font-variant-numeric: tabular-nums; }
.peer-table .peer-empty { color: var(--text-muted); }
.peer-row-self td { background: rgba(52,211,153,0.06); }
.peer-name-cell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.peer-self-badge {
  font-size: 10px; padding: 2px 6px; background: var(--success, #34d399);
  color: #fff; border-radius: 4px; font-weight: 600;
}
.peer-ticker {
  margin-left: 6px; font-size: 11px; color: var(--text-muted);
  padding: 1px 6px; background: var(--glass-bg-md, rgba(255,255,255,0.05)); border-radius: 4px;
}
.peer-remove-btn {
  width: 24px; height: 24px; border: none; background: transparent;
  color: var(--text-muted); cursor: pointer; border-radius: 4px; font-size: 14px;
}
.peer-remove-btn:hover { background: var(--danger, #ef4444); color: #fff; }

/* Peer picker overlay */
.peer-picker-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
  z-index: 9999; display: flex; align-items: center; justify-content: center;
}
.peer-picker {
  width: 480px; max-width: 90vw; background: var(--bg-elevated, #1f2937);
  border: 1px solid var(--line-strong, rgba(255,255,255,0.1)); border-radius: 12px;
  padding: 18px; box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.peer-picker-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; font-size: 14px; font-weight: 600;
}
.peer-picker-close {
  border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 18px;
}
#peer-picker-input {
  width: 100%; padding: 10px 14px; font-size: 14px; box-sizing: border-box;
  background: var(--glass-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
  border-radius: 8px; color: var(--text-primary); outline: none;
}
#peer-picker-input:focus { border-color: var(--accent, #60a5fa); }
.peer-picker-results { margin-top: 12px; max-height: 320px; overflow-y: auto; }
.peer-cand {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: background .12s;
}
.peer-cand:hover { background: var(--glass-bg-md, rgba(255,255,255,0.06)); }

@media (max-width: 700px) {
  .market-card { padding: 14px; }
  .peer-table th, .peer-table td { padding: 8px 6px; font-size: 11px; }
}

/* ── Quality Scorecard ─────────────────────────────────────── */
.score-card-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.score-card {
  background: var(--glass-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: 12px; padding: 16px;
}
.score-card-head { display: flex; justify-content: space-between; align-items: center; }
.score-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.score-verdict { font-size: 12px; font-weight: 600; }
.score-big { margin: 10px 0 4px; font-weight: 700; line-height: 1; }
.score-num { font-size: 32px; color: var(--text-primary); }
.score-max { font-size: 16px; color: var(--text-muted); margin-left: 4px; }
.score-sub { font-size: 11px; color: var(--text-muted); margin-bottom: 12px; }
.score-checks { list-style: none; padding: 0; margin: 0; }
.score-check {
  display: grid; grid-template-columns: 18px 1fr;
  column-gap: 8px; align-items: baseline;
  padding: 6px 0; border-top: 1px dashed var(--glass-border, rgba(255,255,255,0.06));
  font-size: 12px;
}
.score-check .score-icon { text-align: center; font-weight: 700; }
.score-check.ok .score-icon { color: #16a34a; }
.score-check.no .score-icon { color: #dc2626; }
.score-check.neutral .score-icon { color: var(--text-muted); }
.score-check .score-name { color: var(--text-primary); }
.score-check .score-detail {
  grid-column: 2; color: var(--text-muted); font-size: 11px; margin-top: 2px;
}

/* ── Piotroski drill-down ──────────────────────────────────────── */
/* The clickable header for drillable checks. Inherits the existing 18-col
   icon + content layout; the caret pegs to the right edge. */
.score-check.drillable { display: block; padding: 0; }
.score-check-row {
  display: grid; grid-template-columns: 18px 1fr auto auto;
  column-gap: 8px; align-items: baseline;
  width: 100%; padding: 6px 0;
  background: transparent; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.score-check-row:hover { background: rgba(var(--accent-rgb), 0.04); }
.score-check-row .score-detail { grid-column: auto; margin-top: 0; }
.score-caret {
  font-size: 10px; color: var(--text-muted); margin-left: 4px;
  transition: transform 0.2s ease;
}
.score-check.drillable.open .score-caret { transform: rotate(180deg); }
.score-drill {
  padding: 8px 26px 12px;
  background: rgba(var(--accent-rgb), 0.04);
  border-top: 1px dashed var(--glass-border, rgba(255,255,255,0.06));
  animation: score-drill-in 0.18s ease;
}
@keyframes score-drill-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .score-drill { animation: none; }
  .score-caret { transition: none; }
}
.score-drill-formula {
  font-size: 11.5px; font-style: italic;
  color: var(--text-secondary); margin-bottom: 8px;
  line-height: 1.55;
}
.score-drill-values {
  display: flex; gap: 16px; margin-bottom: 8px;
  font-size: 11.5px; color: var(--text-muted);
}
.score-drill-values b {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.score-drill-tbl {
  width: 100%; border-collapse: collapse; font-size: 11px;
}
.score-drill-tbl td {
  padding: 3px 6px; border-bottom: 1px dashed var(--glass-border, rgba(255,255,255,0.04));
}
.score-drill-tbl td:first-child {
  color: var(--text-muted);
}
.score-drill-tbl td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  font-family: 'JetBrains Mono','SF Mono',monospace;
}
.score-drill-tbl tr:last-child td { border-bottom: 0; }

/* ── AI Memo ───────────────────────────────────────────────── */
.memo-content {
  background: var(--glass-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: 12px; padding: 18px 22px; margin-top: 12px;
  min-height: 120px; line-height: 1.7; font-size: 13px; color: var(--text-primary);
}
.memo-content h1, .memo-content h2, .memo-content h3 {
  margin: 16px 0 8px; color: var(--text-primary);
}
.memo-content h1 { font-size: 18px; }
.memo-content h2 { font-size: 15px; }
.memo-content h3 { font-size: 14px; }
.memo-content p { margin: 6px 0; }
.memo-content ul { padding-left: 22px; margin: 6px 0; }
.memo-content li { margin: 3px 0; }
.memo-content strong { color: var(--accent, #60a5fa); }
.memo-content code {
  background: rgba(0,0,0,0.2); padding: 1px 5px; border-radius: 4px; font-size: 12px;
}

/* ─── File-gated editing: read-only cells & unlock affordance ─────────────
   When the user has not verified possession of a report's original file,
   its metric cells render with class `readonly-cell` instead of
   `editable-cell`. The lock glyph is a subtle ::after marker so layout
   stays identical to the editable variant. */
.readonly-cell {
  cursor: default;
  position: relative;
}
.readonly-cell::after {
  content: "🔒";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  opacity: 0.35;
  pointer-events: none;
}
.readonly-cell:hover { background: rgba(148, 163, 184, 0.06); }
/* When a cell flips from readonly → editable after unlock, briefly flash. */
.editable-cell.just-unlocked {
  animation: unlock-flash 0.6s ease;
}
@keyframes unlock-flash {
  0%   { background: rgba(99, 102, 241, 0.18); }
  100% { background: transparent; }
}

/* ─── Filing fetcher (SEC EDGAR / cninfo lookup) ─────────────────────── */
.filing-fetch { margin-bottom: 14px; }
.filing-fetch-results { min-height: 0; }
.filing-fetch-loading,
.filing-fetch-empty,
.filing-fetch-error {
  font-size: 13px;
  color: var(--text-muted);
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.06);
}
.filing-fetch-error { color: var(--loss); background: rgba(239, 68, 68, 0.06); }
.filing-fetch-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 8px;
}
.filing-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.filing-item {
  display: grid;
  grid-template-columns: 70px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.10);
  transition: background 0.15s ease;
}
.filing-item:hover { background: rgba(99, 102, 241, 0.08); }
.filing-form {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(99, 102, 241, 0.12);
  padding: 3px 8px;
  border-radius: 4px;
  text-align: center;
  letter-spacing: 0.5px;
}
.filing-title {
  font-size: 13px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filing-date { font-size: 12px; color: var(--text-muted); }
.filing-link {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.filing-link:hover { text-decoration: underline; }
.filing-fetch-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
  padding: 0 4px;
}
@media (max-width: 600px) {
  .filing-item { grid-template-columns: 50px 1fr; }
  .filing-date, .filing-link { grid-column: 2; }
}

/* ─── Q&A widget (earnings-report Q&A) ────────────────────────────── */
.qa-select {
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--bg-elev);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.qa-history {
  margin-top: 14px;
  max-height: 480px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 6px;
}
.qa-empty {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  padding: 24px 0;
}
.qa-pair {
  border-left: 3px solid var(--accent);
  padding: 10px 14px;
  background: rgba(99, 102, 241, 0.04);
  border-radius: 0 8px 8px 0;
}
.qa-q {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.qa-role {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.qa-q-text { flex: 1; word-break: break-word; }
.qa-del {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.15s;
}
.qa-pair:hover .qa-del { opacity: 1; }
.qa-del:hover { color: var(--loss); }
.qa-a {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-primary);
}
.qa-a p { margin: 6px 0; }
.qa-a ul { margin: 6px 0; padding-left: 20px; }
.qa-a li { margin: 3px 0; }
.qa-a strong { color: var(--text-primary); font-weight: 600; }
.qa-a code { background: rgba(148,163,184,0.10); padding: 1px 5px; border-radius: 3px; font-size: 12px; }
.qa-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
  font-family: ui-monospace, monospace;
}
.qa-input-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  align-items: flex-start;
}
.qa-input-row textarea {
  flex: 1;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--bg-elev);
  color: var(--text-primary);
  border: 1px solid var(--border);
  resize: vertical;
  font-family: inherit;
}
.qa-input-row textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.qa-input-row textarea:disabled {
  opacity: 0.6;
  cursor: wait;
}
.qa-input-row button { white-space: nowrap; align-self: stretch; }
.qa-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}