@import url("kanit-fonts.css");

:root {
  --bg: #fafaf8; --surface: #ffffff; --sunken: #f2f1ec; --line: #e6e3da; --line-strong: #d3cfc2;
  --ink: #18191b; --ink-dim: #6b6f76; --ink-faint: #9a9d9f;
  --accent: #146b5c; --accent-wash: #e2efec; --accent-ink: #0e4e43;
  --crit: #c1392b; --crit-wash: #fbeae7; --high: #b8651f; --high-wash: #faf0e2;
  --med: #9c7a1a; --med-wash: #f8f2df; --ok: #4a7a52; --ok-wash: #edf4ee;
  --info: #2f6fa8; --info-wash: #e7f0f8;
  --radius: 8px; --radius-sm: 5px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121314; --surface: #1a1b1d; --sunken: #0e0f10; --line: #2b2d30; --line-strong: #3a3d41;
    --ink: #ecebe7; --ink-dim: #9b9d9f; --ink-faint: #6c6e70;
    --accent: #3fb69e; --accent-wash: #16302a; --accent-ink: #6fd0bb;
    --crit: #e0685a; --crit-wash: #351f1c; --high: #dd9a55; --high-wash: #33291b;
    --med: #d3b95c; --med-wash: #322c1a; --ok: #7cad84; --ok-wash: #1c2b1f;
    --info: #6fa8d8; --info-wash: #1a2733;
  }
}
:root[data-theme="dark"] {
  --bg: #121314; --surface: #1a1b1d; --sunken: #0e0f10; --line: #2b2d30; --line-strong: #3a3d41;
  --ink: #ecebe7; --ink-dim: #9b9d9f; --ink-faint: #6c6e70;
  --accent: #3fb69e; --accent-wash: #16302a; --accent-ink: #6fd0bb;
  --crit: #e0685a; --crit-wash: #351f1c; --high: #dd9a55; --high-wash: #33291b;
  --med: #d3b95c; --med-wash: #322c1a; --ok: #7cad84; --ok-wash: #1c2b1f;
  --info: #6fa8d8; --info-wash: #1a2733;
}
:root[data-theme="light"] {
  --bg: #fafaf8; --surface: #ffffff; --sunken: #f2f1ec; --line: #e6e3da; --line-strong: #d3cfc2;
  --ink: #18191b; --ink-dim: #6b6f76; --ink-faint: #9a9d9f;
  --accent: #146b5c; --accent-wash: #e2efec; --accent-ink: #0e4e43;
  --crit: #c1392b; --crit-wash: #fbeae7; --high: #b8651f; --high-wash: #faf0e2;
  --med: #9c7a1a; --med-wash: #f8f2df; --ok: #4a7a52; --ok-wash: #edf4ee;
  --info: #2f6fa8; --info-wash: #e7f0f8;
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Kanit", -apple-system, "Segoe UI", sans-serif; font-weight: 400;
  font-size: 13.5px; line-height: 1.5;
}
::selection { background: var(--accent-wash); color: var(--accent-ink); }
.num { font-variant-numeric: tabular-nums; }
button, input, select { font-family: inherit; }
svg { display: block; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Generic show/hide utility — every page's JS toggles this bare class on elements that don't
   otherwise carry a scoped ".xxx.hidden" rule (upload modal file list, auth buttons, etc.).
   !important so it always wins regardless of what other display value a component class sets. */
.hidden { display: none !important; }

/* ---------- shell ---------- */
/* Fixed-height app shell: .rail and .topbar stay pinned in the viewport, only .content scrolls.
   Without this, .shell just grows to whatever the page's tallest table needs and the whole
   document scrolls together — dragging the sidebar/topbar off-screen with it. */
.shell { display: flex; height: 100vh; overflow: hidden; }
.rail {
  width: 232px; flex-shrink: 0; background: var(--sunken); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 16px 12px; height: 100%; overflow-y: auto;
  transition: width .22s ease, padding .22s ease;
}
.rail.collapsed { width: 60px; padding: 16px 8px; }
.rail-brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px 18px; overflow: hidden; position: relative; }
.rail-mark { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; }
.rail-mark svg { width: 14px; height: 14px; color: #fff; }
.rec-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 6px;
  background: var(--crit); vertical-align: middle; animation: vc-rec-blink 1.4s ease-in-out infinite;
}
@keyframes vc-rec-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.rail-brand .txt { min-width: 0; white-space: nowrap; opacity: 1; transition: opacity .15s ease; }
.rail.collapsed .rail-brand .txt { opacity: 0; width: 0; }
.rail-brand .name { font-size: 13.5px; font-weight: 600; }
.rail-brand .co { font-size: 10.5px; color: var(--ink-dim); }

.rail-group-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); padding: 14px 10px 6px; white-space: nowrap; overflow: hidden; transition: opacity .15s ease; }
.rail.collapsed .rail-group-label { opacity: 0; height: 0; padding-top: 8px; padding-bottom: 0; }
.rail nav { display: flex; flex-direction: column; gap: 1px; }
.rail-item {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--ink-dim); cursor: pointer; border: none; background: none; width: 100%; text-align: left;
  white-space: nowrap; overflow: hidden; text-decoration: none; transition: background-color .12s ease, color .12s ease;
}
.rail-item svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .8; }
.rail-item:hover { background: var(--line); color: var(--ink); text-decoration: none; }
.rail-item.active {
  color: var(--accent-ink); font-weight: 600; pointer-events: none;
  position: relative; isolation: isolate; overflow: hidden;
}
/* Fill sweeps in left-to-right on paint instead of the highlight just snapping on — every full
   page load re-triggers this since the element is freshly painted each time. */
.rail-item.active::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--accent-wash); transform-origin: left; animation: vc-rail-sweep .38s cubic-bezier(.2, 0, 0, 1);
}
@keyframes vc-rail-sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rail-item.active svg { opacity: 1; }
.rail-item .lbl { transition: opacity .12s ease; }
.rail.collapsed .rail-item .lbl { opacity: 0; position: absolute; }
.rail-item .count { margin-left: auto; font-size: 10.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.rail-item.active .count { color: var(--accent-ink); }
.rail-item .dot-crit { width: 6px; height: 6px; border-radius: 50%; background: var(--crit); margin-left: auto; flex-shrink: 0; }
.rail.collapsed .rail-item { justify-content: center; }
.rail.collapsed .rail-item .count, .rail.collapsed .rail-item .dot-crit { display: none; }

/* Hamburger toggle lives beside the logo, not buried at the bottom of the rail — a plain
   static 3-line icon (no directional rotate), same spot users already look for a menu trigger.
   Positioned absolute (not a flex sibling of rail-mark/txt) so its hit target never drifts when
   those siblings resize/hide on the same click that toggles collapsed. */
.rail-toggle {
  position: absolute; top: 3px; right: 2px; width: 26px; height: 26px; border-radius: var(--radius-sm);
  border: none; background: none; color: var(--ink-dim); display: flex; align-items: center;
  justify-content: center; cursor: pointer; z-index: 1;
}
.rail-toggle:hover { background: var(--line); color: var(--ink); }
.rail-toggle svg { width: 16px; height: 16px; }
.rail.collapsed .rail-brand { justify-content: center; padding-left: 0; padding-right: 0; }
.rail.collapsed .rail-mark { display: none; }
.rail.collapsed .rail-toggle { right: 0; left: 0; margin: 0 auto; }

.rail-foot { margin-top: auto; padding: 10px 10px 4px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.rail-foot .avatar { width: 22px; height: 22px; border-radius: 6px; background: var(--line-strong); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: var(--ink-dim); flex-shrink: 0; }
.rail-foot .who { font-size: 11.5px; color: var(--ink-dim); white-space: nowrap; opacity: 1; transition: opacity .12s ease; overflow: hidden; text-overflow: ellipsis; }
.rail.collapsed .rail-foot .who { opacity: 0; width: 0; }
.rail-user { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rail-foot-row { display: flex; align-items: center; gap: 6px; }
.rail-foot-row .btn.small { flex: 1; justify-content: center; }
.rail-foot #authBtn { width: 100%; justify-content: center; }
.rail.collapsed .rail-foot { align-items: center; }
.rail.collapsed .rail-foot .lbl { display: none; }
.rail.collapsed .rail-foot #authBtn { width: 32px; padding: 0; }
.rail.collapsed .rail-foot-row { flex-direction: column; }
.rail.collapsed .rail-foot-row .btn.small { width: 32px; padding: 0; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.topbar h1 { font-size: 16px; font-weight: 600; margin: 0; }
.topbar .path { font-size: 11.5px; color: var(--ink-faint); margin-top: 1px; }
.topbar .actions { display: flex; gap: 8px; align-items: center; }
.btn {
  font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.btn svg { width: 13px; height: 13px; }
.btn:hover { background: var(--sunken); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-ink); }
.btn.small { font-size: 11.5px; padding: 4px 9px; }
.btn.icon { width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; }
.btn.icon svg { width: 15px; height: 15px; }
.btn.icon .moon { display: none; }
:root[data-theme="dark"] .btn.icon .sun { display: none; }
:root[data-theme="dark"] .btn.icon .moon { display: block; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.content { padding: 18px 24px 60px; overflow-x: auto; overflow-y: auto; flex: 1; min-height: 0; }

/* ---------- filter bar ---------- */
.filterbar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.field select, .field input, .field textarea { font-size: 12.5px; padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }
.field.grow { flex: 1; min-width: 160px; }
.filterbar .spacer { flex: 1; }
.filterbar .btnrow { display: flex; gap: 6px; }

/* ---------- compact stat tiles ---------- */
.stats { display: flex; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; flex-wrap: wrap; }
.stat { background: var(--surface); padding: 10px 16px; flex: 1; min-width: 110px; }
.stat .l { font-size: 10.5px; color: var(--ink-dim); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .v { font-size: 19px; font-weight: 600; }
.stat .v.crit { color: var(--crit); }
.stat .v.high { color: var(--high); }
.stat .v.med { color: var(--med); }
.stat .v.ok { color: var(--ok); }
.stat .v.info { color: var(--info); }
.stat .v small { font-size: 11px; font-weight: 400; color: var(--ink-dim); }

/* clickable bucket variant */
.stat.bucket { cursor: pointer; border: none; margin: 0; font: inherit; color: inherit; text-align: left; width: 100%; }
.stat.bucket:hover { background: var(--sunken); }
.stat.bucket.on { background: var(--accent-wash); }
.stat.bucket.on .l, .stat.bucket.on .v { color: var(--accent-ink); }

.section-title { font-size: 12.5px; font-weight: 600; margin: 20px 0 10px; display: flex; align-items: center; gap: 8px; }
.section-title .n { font-weight: 400; color: var(--ink-faint); }

/* ---------- dense data table ---------- */
table.dense { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.dense thead th {
  text-align: left; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-dim); padding: 0 10px 7px; border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
table.dense thead th.num, table.dense td.num { text-align: right; }
table.dense thead th.ctr, table.dense td.ctr { text-align: center; }
table.dense tbody tr { border-bottom: 1px solid var(--line); }
table.dense tbody tr:hover { background: var(--sunken); }
table.dense td { padding: 7px 10px; vertical-align: middle; }
table.dense .flagged td:first-child { box-shadow: inset 3px 0 0 var(--crit); }
table.dense .flagged-high td:first-child { box-shadow: inset 3px 0 0 var(--high); }
.dim { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }
.mono-ish { font-variant-numeric: tabular-nums; }
/* bare semantic text-color utilities — used directly on table cells outside .stat/.chip context */
.crit { color: var(--crit); }
.high { color: var(--high); }
.med { color: var(--med); }
.ok { color: var(--ok); }
.info { color: var(--info); }
.table-empty { padding: 28px; text-align: center; color: var(--ink-faint); font-size: 12.5px; }

/* scrollable table body with sticky header — for ranking panels taller than the viewport */
.table-scroll { max-height: 70vh; overflow: auto; }
.table-scroll table.dense thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }

.iconbtn { width: 26px; height: 26px; border-radius: var(--radius-sm); border: none; background: none; color: var(--ink-faint); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.iconbtn svg { width: 15px; height: 15px; }
.iconbtn:hover { background: var(--sunken); color: var(--ink); }
.iconbtn.play { color: var(--accent-ink); }
.ai-pending { color: #8b5cf6; }
.ai-busy { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: #8b5cf6; background: #f1edfd; padding: 3px 8px; border-radius: 20px; }
.ai-busy svg { width: 10px; height: 10px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ai-done { color: var(--ok); }
.ai-fail { color: var(--crit); }
.play-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.play-dot.in { background: var(--ok); } .play-dot.out { background: var(--high); }

.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
.chip.crit { background: var(--crit-wash); color: var(--crit); }
.chip.high { background: var(--high-wash); color: var(--high); }
.chip.med { background: var(--med-wash); color: var(--med); }
.chip.ok { background: var(--ok-wash); color: var(--ok); }
.chip.info { background: var(--info-wash); color: var(--info); }
.chip.neutral { background: var(--sunken); color: var(--ink-dim); }
.chip svg { width: 10px; height: 10px; }
.chip.solid { color: #fff; }
.chip.solid.crit { background: var(--crit); }
.chip.solid.neutral { background: var(--ink-faint); }

.badge-dir { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.badge-dir.in { background: var(--ok-wash); color: var(--ok); }
.badge-dir.out { background: var(--high-wash); color: var(--high); }

.emp { font-weight: 600; }
.emp-sub { font-size: 11px; color: var(--ink-faint); }

/* ---------- pagination toolbar ---------- */
.toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 2px; font-size: 11.5px; color: var(--ink-dim); }
.toolbar .pager { display: flex; align-items: center; gap: 6px; }
.toolbar .pager select { font-size: 11.5px; border: 1px solid var(--line-strong); border-radius: 5px; padding: 3px 5px; background: var(--surface); color: var(--ink); }

/* ---------- explainer box ---------- */
.explainer { background: var(--accent-wash); border: 1px solid var(--accent); border-radius: var(--radius); padding: 10px 14px; font-size: 12px; color: var(--accent-ink); margin-bottom: 14px; line-height: 1.6; }

/* ---------- fraud case cards ---------- */
.case-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; }
.case-card .row1 { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.case-card .who { font-size: 13px; font-weight: 600; }
.case-card .meta { font-size: 11.5px; color: var(--ink-dim); margin-bottom: 6px; }
.case-card .purpose { font-size: 11.5px; color: var(--ink-dim); margin-bottom: 4px; }
.case-card .evidence { font-size: 12px; color: var(--ink-dim); font-style: normal; border-left: 2px solid var(--line-strong); padding-left: 9px; margin: 6px 0; }
.case-card .callinfo { font-size: 11px; color: var(--ink-faint); margin-top: 6px; line-height: 1.6; }
.case-card .actions { display: flex; gap: 6px; margin-top: 8px; }
.case-card .actions .btn { font-size: 11.5px; padding: 4px 10px; }
.tag-src { font-size: 9.5px; color: var(--ink-faint); border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 5px; }
.case-empty { padding: 32px; text-align: center; color: var(--ink-faint); font-size: 12.5px; }

/* ---------- cost budget bar ---------- */
.budget-bar { height: 8px; background: var(--sunken); border-radius: 5px; overflow: hidden; margin: 8px 0; }
.budget-bar > div { height: 100%; background: var(--accent); border-radius: 5px; }
.minirow { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-dim); padding: 6px 0; border-top: 1px solid var(--line); }
.minirow b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.card.pad0 { padding: 0; overflow: hidden; }

/* ---------- show-more (avoids nesting a scrollbar inside a table when a list runs long) ---------- */
.show-more-row { display: flex; justify-content: center; padding: 10px; border-top: 1px solid var(--line); }
.show-more-row .btn { width: 100%; justify-content: center; }
.table-wrap { overflow-x: auto; }

/* ---------- scrollbars (themed instead of the browser's default white/grey, mainly for dark mode) ---------- */
* { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background-color: var(--line-strong); border-radius: 8px; border: 2px solid var(--sunken); background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--ink-faint); }

/* ---------- sync page: keep original two-column layout, retokened only ---------- */
.sync-grid { display: grid; grid-template-columns: 440px 1fr; gap: 16px; align-items: start; }
.cal-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.cal-card h3 { margin: 0 0 3px; font-size: 14.5px; font-weight: 600; }
.cal-card .sub { font-size: 11px; color: var(--ink-faint); margin-bottom: 14px; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 12.5px; font-weight: 600; }
.cal-nav button { border: none; background: none; color: var(--ink-dim); cursor: pointer; font-size: 12px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-dh { font-size: 10px; color: var(--ink-faint); font-weight: 600; margin-bottom: 3px; }
.cal-day {
  aspect-ratio: 1 / 1; border-radius: 6px; font-size: 12px; border: 1px solid var(--line); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.cal-day:not(.empty):hover { border-color: var(--accent); }
.cal-day.has-data { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.cal-day.empty { visibility: hidden; }
.cal-day .n { display: block; }
.cal-day .files { display: block; font-size: 9.5px; font-weight: 700; opacity: .85; line-height: 1.2; }
.sync-main { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.sync-head { margin-bottom: 14px; }
.sync-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sync-head h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.sync-head .co { font-size: 12px; color: var(--accent-ink); font-weight: 600; margin-bottom: 12px; }
.sync-head-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.sync-toolbar { display: flex; align-items: center; gap: 6px 10px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
.shortcuts { display: flex; gap: 5px; flex-wrap: nowrap; flex-shrink: 0; }
.shortcuts .btn { padding: 4px 8px; font-size: 11px; flex-shrink: 0; }
.sync-daterange { display: flex; align-items: center; gap: 4px; font-size: 11px; flex-wrap: nowrap; flex-shrink: 0; }
.sync-daterange label { color: var(--ink-dim); flex-shrink: 0; }
.sync-daterange input[type=datetime-local] { width: 158px; font-size: 11px; padding: 4px 5px; border-radius: 5px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }
.sync-daterange .btn { padding: 4px 9px; font-size: 11px; flex-shrink: 0; }
.dedupe { font-size: 11.5px; color: var(--ink-dim); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.sync-progress { height: 18px; background: var(--sunken); border-radius: 5px; overflow: hidden; margin: 12px 0; }
.sync-progress > div { height: 100%; background: var(--ok); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10.5px; font-weight: 600; }
.sync-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.sync-stat { background: var(--sunken); border-radius: var(--radius-sm); padding: 10px 12px; text-align: center; }
.sync-stat h4 { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-dim); margin: 0 0 4px; font-weight: 600; }
.sync-stat p { font-size: 21px; font-weight: 600; margin: 0; }

/* ---------- toggle switch (companies page) ---------- */
.toggle { position: relative; display: inline-block; width: 38px; height: 21px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .track { position: absolute; inset: 0; background: var(--line-strong); border-radius: 20px; transition: background .15s; cursor: pointer; }
.toggle .track::before { content: ''; position: absolute; width: 15px; height: 15px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; }
.toggle input:checked + .track { background: var(--accent); }
.toggle input:checked + .track::before { transform: translateX(17px); }

/* ---------- prompts editor (two-column) ---------- */
.prompt-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
.prompt-field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.prompt-field .hint { font-size: 11px; color: var(--ink-faint); margin-bottom: 6px; line-height: 1.5; }
.prompt-field textarea {
  width: 100%; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11.5px;
  padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); resize: vertical; line-height: 1.5;
}
.prompt-field textarea[readonly] { background: var(--sunken); color: var(--ink-dim); }
.prompt-field input[type=number] { padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 12.5px; width: 220px; }
.cheatsheet { background: linear-gradient(160deg, #1c2b28, #12201d); color: #e7ece9; border-radius: var(--radius); padding: 18px; }
:root[data-theme="light"] .cheatsheet, :root:not([data-theme]) .cheatsheet { background: linear-gradient(160deg, #17332c, #0e211c); }
.cheatsheet h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.cheatsheet p { font-size: 11.5px; color: #b7c2be; margin: 0 0 10px; line-height: 1.6; }
.cheatsheet ol { margin: 0; padding-left: 18px; font-size: 12px; color: #cfd8d4; line-height: 2; }
.cheatsheet ol b { color: var(--accent-ink); filter: brightness(1.6); font-family: ui-monospace, monospace; font-weight: 600; }
.cheatsheet .tip { margin-top: 14px; padding: 10px 12px; background: rgba(255,255,255,.07); border-radius: var(--radius-sm); font-size: 11px; color: #c7d0cc; line-height: 1.6; }

/* ---------- error banner (real async failure states — not shown in the static mockup) ---------- */
.errbox { background: var(--crit-wash); border: 1px solid var(--crit); color: var(--crit); border-radius: var(--radius); padding: 12px 14px; font-size: 12.5px; }
.errbox.hidden { display: none; }

/* ---------- loading / spinner (real async states) ---------- */
@keyframes vc-spin { to { transform: rotate(360deg); } }
.spin { animation: vc-spin 1s linear infinite; }
.loading-block { padding: 48px; text-align: center; color: var(--ink-faint); font-size: 12.5px; }
.loading-block svg { width: 28px; height: 28px; margin: 0 auto 10px; display: block; }

/* Compact inline spinner — sits inside a stat value/label slot as the initial "still loading"
   state, standing in for the static "—" placeholder until .textContent overwrites it with the
   real number (textContent replaces this element cleanly, no JS changes needed elsewhere). */
.mini-spin {
  display: inline-block; width: 13px; height: 13px; border: 2px solid var(--line-strong);
  border-top-color: var(--accent); border-radius: 50%; animation: vc-spin .7s linear infinite;
  vertical-align: -2px;
}
.overlay-loading { position: absolute; inset: 0; background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: blur(2px); z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius); }
.overlay-loading.hidden { display: none; }
.overlay-loading span { font-size: 12.5px; color: var(--ink-dim); font-weight: 500; }
.overlay-loading svg { width: 26px; height: 26px; color: var(--accent); }

/* ---------- modal (real interactive dialogs — preview/confirm flows the static mockup doesn't show) ---------- */
.modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(10, 10, 10, .5); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; }
.modal-overlay.hidden { display: none; }
.modal-panel { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(0,0,0,.3); width: 100%; max-width: 820px; max-height: 85vh; display: flex; flex-direction: column; }
.modal-head { padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--sunken); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.modal-head h2 { margin: 0; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.modal-head h2 svg { width: 17px; height: 17px; color: var(--med); }
.modal-head .sub { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }
.modal-close { color: var(--ink-faint); cursor: pointer; background: none; border: none; display: flex; }
.modal-close svg { width: 18px; height: 18px; }
.modal-close:hover { color: var(--ink); }
.modal-body { padding: 18px 20px; overflow-y: auto; background: var(--bg); }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface); display: flex; justify-content: flex-end; gap: 10px; }
.code-block { background: #14161a; color: #c9cdd1; padding: 18px; border-radius: 0 0 var(--radius) var(--radius); font-family: ui-monospace, monospace; font-size: 11.5px; white-space: pre-wrap; line-height: 1.6; max-height: 60vh; overflow: auto; margin: 0; }
.btn.small.warn { background: var(--med-wash); border-color: var(--med); color: var(--med); }
.btn.small.warn:hover { filter: brightness(0.95); }
.btn.warn-solid { background: var(--med); border-color: var(--med); color: #fff; }
.btn.warn-solid:hover { filter: brightness(0.92); }
.btn.small.danger { background: var(--crit); border-color: var(--crit); color: #fff; }
.btn.small.danger:hover { filter: brightness(0.92); }
.btn.ghost-danger { color: var(--crit); }
.btn.ghost-danger:hover { background: var(--crit-wash); }
.iconlink { color: var(--info); display: inline-flex; }
.iconlink svg { width: 16px; height: 16px; }
.pillbtn { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--info-wash); color: var(--info); }
.pillbtn:hover { text-decoration: none; filter: brightness(0.95); }

@media (max-width: 860px) {
  .rail { position: fixed; z-index: 90; height: 100%; transform: translateX(-100%); transition: transform .2s; }
  .rail.mobile-open { transform: translateX(0); }
  .sync-grid { grid-template-columns: 1fr; }
  .prompt-grid { grid-template-columns: 1fr; }
  .stats { flex-wrap: wrap; }
  .stat { min-width: 45%; }
}