/* AllV+ Control Center — admin console styles.
   Extracted from the original single-file public/admin/index.html
   (2026-09-15 UI refactor) — every existing class/rule below is unchanged
   in meaning, just moved here; new rules (sidebar, kpi cards, empty/loading
   states, heatmap, control panel, audit table) are added at the bottom. */

:root {
  --orange: #F5A623;
  --green: #2ECC71;
  --blue: #2E86DE;
  --red: #E74C3C;
  --ink: #1A1A1A;
  --muted: #999999;
  --bg: #F5F7FA;
  --card: #FFFFFF;
  --border: #E7EAEE;
  --sidebar-w: 208px;
  /* Financial Dashboard (Phase 6) accent — navy/white base per the approved
     visual direction (docs/financial-dashboard-information-architecture.md
     §"Visual direction"), blue/orange accents reuse the tokens above. */
  --navy: #0B2545;
  --navy-light: #EEF2F8;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}
.hidden { display: none !important; }

/* ---- Auth loading (shown before getSession()/api/admin/me resolve, so the
   page never flashes login-then-app-then-login) ---- */
#authLoading { display: flex; align-items: center; justify-content: center; min-height: 100vh; }

/* ---- Login / Set password (same card layout) ---- */
#loginScreen, #setPasswordScreen { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
#loginScreen .box, #setPasswordScreen .box { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 32px; width: 320px; }
#loginScreen .box h1, #setPasswordScreen .box h1 { font-size: 18px; text-align: center; margin: 0 0 4px; }
#loginScreen .box p.tag, #setPasswordScreen .box p.tag { text-align: center; color: var(--muted); font-size: 12px; margin: 0 0 20px; }
#loginScreen label, #setPasswordScreen label { display: block; font-size: 12px; color: var(--muted); margin: 12px 0 4px; }
#loginScreen input, #setPasswordScreen input { width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; }
#loginScreen button, #setPasswordScreen button { width: 100%; margin-top: 18px; padding: 10px; border: none; border-radius: 6px; background: var(--orange); color: #fff; font-weight: 600; cursor: pointer; }
#loginScreen button:disabled, #setPasswordScreen button:disabled { opacity: 0.6; cursor: default; }

/* ---- App shell: top bar + sidebar + content ---- */
#app { display: flex; flex-direction: column; min-height: 100vh; }
header.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
header.topbar .brand { font-weight: 700; font-size: 18px; }
header.topbar .brand span { color: var(--orange); }
header.topbar .who { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 12px; }
header.topbar button.link {
  background: none; border: none; color: var(--blue); cursor: pointer; font-size: 13px; padding: 0;
}

.shell { display: flex; flex: 1 1 auto; min-height: 0; }

.sidebar {
  flex: 0 0 var(--sidebar-w);
  background: var(--card);
  border-right: 1px solid var(--border);
  padding: 16px 0;
}
.sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  border-left: 3px solid transparent;
  user-select: none;
}
.sidebar .nav-item:hover { background: var(--bg); }
.sidebar .nav-item.active {
  background: var(--bg);
  color: var(--orange);
  border-left-color: var(--orange);
}
.sidebar .nav-item .icon { font-size: 15px; width: 18px; text-align: center; }

.content { flex: 1 1 auto; min-width: 0; padding: 24px; overflow-y: auto; }
.content > .page-title { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.content > .page-subtitle { font-size: 12px; color: var(--muted); margin: 0 0 18px; }

/* ---- Cards / sections (shared by every page) ---- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; margin-bottom: 20px; box-shadow: 0 1px 2px rgba(16,24,40,0.04); }
.card h2 { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--ink); }
.card p.hint { margin: 0 0 14px; font-size: 12px; color: var(--muted); }

/* ---- Mode control ---- */
.mode-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mode-badge { font-weight: 700; padding: 6px 14px; border-radius: 999px; font-size: 13px; }
.mode-OFF { background: #FDEDEC; color: var(--red); }
.mode-WHITELIST { background: #FFF6E5; color: var(--orange); }
.mode-LIVE { background: #EAFBF1; color: var(--green); }
.mode-UNKNOWN { background: #F0F0F0; color: var(--muted); }
.mode-btns { display: flex; gap: 8px; }
.mode-btns button { padding: 8px 16px; border-radius: 6px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 13px; font-weight: 600; }
.mode-btns button:disabled { opacity: 0.5; cursor: default; }
.btn-off { color: var(--red); border-color: var(--red) !important; }
.btn-whitelist { color: var(--orange); border-color: var(--orange) !important; }
.btn-live { color: var(--green); border-color: var(--green) !important; }

/* ---- Metrics (Support page's full 4-tile "Today" grid) ---- */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.metric { background: var(--bg); border-radius: 8px; padding: 14px; text-align: center; }
.metric .val { font-size: 26px; font-weight: 700; }
.metric .label { font-size: 12px; color: var(--muted); margin-top: 4px; }
.metric .sub { font-size: 10.5px; color: var(--muted); margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); }

/* ---- KPI cards (Dashboard, Support Analytics) ---- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.kpi-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(16,24,40,0.05); }
.kpi-card .kpi-val { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
.kpi-card .kpi-label { font-size: 12.5px; font-weight: 600; color: var(--ink); opacity: 0.72; margin-top: 4px; }
.kpi-card .kpi-sub { font-size: 11px; color: var(--muted); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border); font-size: 12px; }
td { padding: 8px; border-bottom: 1px solid var(--border); }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--bg); }
.muted-small { color: var(--muted); font-size: 11px; }
.pill { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.pill-PROCESSING { background: #EAF4FF; color: var(--blue); }
.pill-COOLDOWN { background: #FFF6E5; color: var(--orange); }
.pill-on { background: #EAFBF1; color: var(--green); }
.pill-off { background: #F0F0F0; color: var(--muted); }
.pill-AVAILABLE { background: #EAFBF1; color: var(--green); }
.pill-IN_USE { background: #EAF4FF; color: var(--blue); }
.pill-OUT_OF_ORDER { background: #FDEDEC; color: var(--red); }
.pill-UNKNOWN { background: #F0F0F0; color: var(--muted); }
.pill-SUCCESS { background: #EAFBF1; color: var(--green); }
.pill-FAILED { background: #FDEDEC; color: var(--red); }

.sync-health-card { min-width: 180px; }
.sync-health-source { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.sync-src-check { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; margin-right: 10px; }
.sync-gate-row { padding: 4px 0; font-size: 13px; }

/* ---- Empty / loading / error states (shared) ---- */
.empty-row td { text-align: center; color: var(--muted); padding: 18px; }
.empty-state, .loading-state {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 28px 16px;
  border: 1px dashed var(--border);
  border-radius: 8px;
}
.empty-state .empty-state-title { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.empty-state .empty-state-detail { font-size: 12px; margin-top: 6px; }

/* ---- Machine Control: summary cards + table + Control button ---- */
.mc-shop-label { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.mc-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mc-updated { font-size: 12px; color: var(--muted); }
.mc-refresh-error { font-size: 12px; color: var(--red); }
.mc-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 18px; }

/* ---- Command / control panel ---- */
.control-panel-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.control-panel-group-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 2px 2px;
}
.control-panel-group-title:first-child { padding-top: 2px; }
.control-panel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.control-panel-item button { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 12px; font-weight: 600; }
.control-panel-item button:disabled { opacity: 0.45; cursor: default; }
.control-panel-item .label { font-size: 13px; }
.control-panel-item .readonly-tag { font-size: 10px; color: var(--muted); margin-left: 6px; }

/* ---- Whitelist add form ---- */
#addTesterForm { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
#addTesterForm input { padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
#addTesterForm input[name=rawLineUserId] { flex: 2; min-width: 220px; }
#addTesterForm input[name=label] { flex: 1; min-width: 140px; }
#addTesterForm button { padding: 8px 16px; border: none; border-radius: 6px; background: var(--blue); color: #fff; font-weight: 600; cursor: pointer; }
.small-btn { padding: 4px 10px; font-size: 12px; border-radius: 6px; border: 1px solid var(--border); background: #fff; cursor: pointer; }

.banner { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; }
.banner-error { background: #FDEDEC; color: var(--red); }
.banner-ok { background: #EAFBF1; color: var(--green); }

/* ---- Modal ---- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal { background: #fff; border-radius: 12px; padding: 24px; width: 340px; }
.modal.modal-wide { width: 460px; max-width: calc(100vw - 32px); }
.modal h3 { margin: 0 0 8px; color: var(--red); }
.modal p { font-size: 13px; color: #444; line-height: 1.5; }
.modal .actions { display: flex; gap: 10px; margin-top: 18px; }
.modal .actions button { flex: 1; padding: 10px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; font-weight: 600; }
.modal .confirm { background: var(--green); color: #fff; border: none; }
.modal .cancel { background: #fff; }
.case-detail { font-size: 12px; background: var(--bg); border-radius: 8px; padding: 12px; margin-top: 8px; white-space: pre-wrap; }

/* ---- Machine Usage Heatmap (Dashboard) ---- */
.heatmap-grid {
  display: grid;
  grid-template-columns: 44px repeat(24, minmax(18px, 1fr));
  gap: 2px;
  font-size: 10px;
}
.heatmap-grid .heatmap-corner { }
.heatmap-grid .heatmap-hour-label { text-align: center; color: var(--muted); }
.heatmap-grid .heatmap-day-label { color: var(--muted); display: flex; align-items: center; }
.heatmap-grid .heatmap-cell { aspect-ratio: 1; border-radius: 2px; background: var(--bg); }
.heatmap-legend { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); margin-top: 10px; }
.heatmap-legend .swatch { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }

/* ---- Dashboard: Recent Activity / Recent Command Failures rows ---- */
.activity-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
}
.activity-item:last-child { border-bottom: none; }
.activity-item.activity-failed { border-left-color: var(--red); background: #FEF6F5; }
.activity-main { min-width: 0; }
.activity-title { font-size: 13px; font-weight: 600; }
.activity-item.activity-failed .activity-title { color: var(--red); }
.activity-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.activity-time { font-size: 12px; color: var(--muted); white-space: nowrap; flex: 0 0 auto; }

/* ---- Audit & Logs: filters + wide table + expandable details ---- */
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filter-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.filter-btn.active { background: var(--orange); border-color: var(--orange); color: #fff; }
.table-scroll { overflow-x: auto; }
tr.audit-row-failed > td { background: #FEF6F5; }
tr.audit-details-row td { background: var(--bg); }
.audit-details { font-size: 11px; color: var(--muted); font-family: ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-all; }

/* ---- Support: Overview / Analytics sub-tabs (reuses .filter-btn) ---- */
.sa-subtabs { display: flex; gap: 8px; margin-bottom: 18px; }

/* ---- Support Analytics: data-coverage notice — deliberately calm/neutral
   (soft blue "info" tint), never red/yellow — this is normal, expected
   short-history state, not a warning or an error. ---- */
.sa-coverage-card { padding: 14px 20px; }
.sa-coverage-note { font-size: 13px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.sa-coverage-note .sa-coverage-icon { color: var(--blue); font-size: 14px; }

/* ---- Support Analytics: date-range controls ---- */
.sa-range-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sa-range-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.sa-custom-range { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.sa-custom-range input[type=date] { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; }

/* ---- Support Analytics: hourly line chart (hand-rolled SVG, single
   AllV+-orange series with a subtle area fill — see
   docs/support-analytics.md) ---- */
.sa-chart-svg { width: 100%; height: auto; display: block; }
.sa-chart-svg .sa-chart-axis { stroke: var(--border); stroke-width: 1; }
.sa-chart-svg .sa-chart-gridline { stroke: var(--border); stroke-width: 1; }
.sa-chart-svg .sa-chart-area { fill: url(#saChartFill); stroke: none; }
.sa-chart-svg .sa-chart-line { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sa-chart-svg .sa-chart-dot { fill: var(--orange); stroke: #fff; stroke-width: 1.5; }
.sa-chart-svg .sa-chart-label { fill: var(--muted); font-size: 10px; }
.sa-chart-svg .sa-chart-ylabel { font-variant-numeric: tabular-nums; }

/* ---- Support Analytics: Weekday x Hour Heatmap — sequential AllV+ orange
   scale (cream -> burnt orange), deliberately NOT reusing Dashboard's
   unrelated blue placeholder heatmap classes above. Monday-first rows, all
   24 hour columns always shown (see .sa-heatmap-scroll below), in-cell
   numbers with automatic text contrast (see heatTextColor() in
   support-analytics.js). ---- */
.sa-heatmap-scroll { overflow-x: auto; padding-bottom: 4px; }
.sa-heatmap-grid {
  display: grid;
  grid-template-columns: 60px repeat(24, minmax(34px, 1fr));
  gap: 2px;
  font-size: 10.5px;
  min-width: 900px;
}
.sa-heatmap-grid .sa-heatmap-corner { }
.sa-heatmap-grid .sa-heatmap-hour-label { text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.sa-heatmap-grid .sa-heatmap-day-label { color: var(--ink); display: flex; align-items: center; font-weight: 700; cursor: help; }
.sa-heatmap-grid .sa-heatmap-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* No tracked date at all for this weekday/hour yet — visually distinct
   (dashed, no fill, neutral dash glyph) from a true tracked zero (solid
   lightest-orange fill with a visible "0", see the inline style computed
   in support-analytics.js). This distinction is a product requirement,
   not a styling nicety. */
.sa-heatmap-grid .sa-heatmap-cell-nodata { border: 1px dashed var(--border); background: transparent; color: var(--muted); font-weight: 400; }
.sa-heatmap-legend { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); margin-top: 10px; }
.sa-heatmap-legend .sa-heatmap-legend-bar {
  width: 120px; height: 10px; border-radius: 4px;
  background: linear-gradient(to right, #FFF8ED, #FFE0A8, #FFB65C, #F5A623, #B35900);
}

/* ---- Support Analytics: operational insight lines (peak hour, busiest
   weekday, average contacts/hour — all mathematically derived, see
   lib/support-analytics.ts) ---- */
.sa-insight-list { display: flex; flex-direction: column; gap: 10px; }
.sa-insight-item { font-size: 13px; }
.sa-insight-item .sa-insight-label { color: var(--muted); font-size: 12px; margin-right: 6px; }

/* ---- Settings ---- */
.settings-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.settings-row:last-child { border-bottom: none; }
.settings-row .settings-label { color: var(--muted); }

/* ---- Financial Dashboard (Phase 6) — Laundry Sales ---- */
.fin-header { background: var(--navy); color: #fff; border-radius: 10px; padding: 18px 20px; margin-bottom: 20px; }
.fin-header .page-title { color: #fff; }
.fin-header .page-subtitle { color: rgba(255,255,255,0.72); }
.fin-kpi-card { border-top: 3px solid var(--navy); }
.fin-kpi-card.fin-kpi-coin { border-top-color: var(--orange); }
.fin-kpi-card.fin-kpi-cashqr { border-top-color: var(--blue); }

.fin-range-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.fin-export-btn { padding: 8px 16px; border-radius: 6px; border: 1px solid var(--navy); background: #fff; color: var(--navy); font-size: 12.5px; font-weight: 700; cursor: pointer; margin-left: auto; }
.fin-export-btn:hover { background: var(--navy-light); }
.fin-export-btn:disabled { opacity: 0.5; cursor: default; }

.fin-help-icon { display: inline-block; margin-left: 4px; color: var(--muted); cursor: help; font-size: 11px; border: 1px solid var(--border); border-radius: 999px; width: 14px; height: 14px; text-align: center; line-height: 13px; }

.fin-group-row td { background: var(--navy-light); font-weight: 700; color: var(--navy); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; padding-top: 12px; padding-bottom: 6px; }
.fin-subtotal-row td { background: var(--bg); font-weight: 700; border-top: 2px solid var(--border); }
.fin-grandtotal-row td { background: var(--navy); color: #fff; font-weight: 700; }
.fin-coin-share-bar { display: inline-block; width: 48px; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.fin-coin-share-bar-fill { display: block; height: 100%; background: var(--orange); }
.fin-num { font-variant-numeric: tabular-nums; text-align: right; }
tr.fin-clickable-cell { cursor: pointer; }
tr.fin-clickable-cell:hover td { background: var(--navy-light); }
td.fin-clickable { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.kpi-card.fin-clickable-cell { cursor: pointer; }
.kpi-card.fin-clickable-cell:hover { background: var(--navy-light); }
td.fin-clickable:hover { color: var(--navy); }

.fin-charts-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.fin-bar-chart { width: 100%; }
.fin-bar-chart .fin-bar-label { font-size: 11px; fill: var(--ink); }
.fin-bar-chart .fin-bar-value { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.fin-bar-chart .fin-bar-tangjai { fill: var(--navy); }
.fin-bar-chart .fin-bar-partner { fill: var(--blue); }
.fin-bar-chart .fin-bar-coin { fill: var(--orange); }
.fin-bar-chart .fin-bar-cashqr { fill: var(--blue); }

.fin-drilldown-modal .modal { width: 640px; max-width: calc(100vw - 32px); max-height: calc(100vh - 64px); overflow-y: auto; }
.fin-drilldown-modal h3 { color: var(--navy); }

/* ---- Responsive: collapse sidebar to a top row below ~900px (tablet) ---- */
@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .sidebar {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    overflow-x: auto;
    padding: 6px 8px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .sidebar .nav-item {
    border-left: none;
    border-bottom: 3px solid transparent;
    padding: 8px 12px;
    white-space: nowrap;
  }
  .sidebar .nav-item.active { border-left-color: transparent; border-bottom-color: var(--orange); }
  .content { padding: 16px; }
}

/* ---- Financial Dashboard Phase 6 Pass 3 — Manual Classification form ---- */
.mc-evidence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; background: var(--bg); border-radius: 8px; padding: 12px; font-size: 13px; }
.mc-field-label { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 4px; }
.mc-field-input { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
.mc-field-input:disabled { background: var(--bg); color: var(--muted); }

/* ---- Financial Dashboard Phase 6 Pass 3 — Exceptions checkbox filters ---- */
.exc-checkbox-row { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.exc-checkbox-label { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink); }

/* ---- STM Daily Review (ตรวจสอบ STM รายวัน) — one card per statement date ----
   .stm-scope is on the page section AND on its dialogs (which sit beside the section, not inside it), so every rule
   below can be scoped once and still beat the generic .modal / .card rules above. Status is always carried by text
   and a symbol as well as by colour. */
.stm-scope {
  --stm-ok: #1B7F46; --stm-ok-bg: #EAFBF1; --stm-ok-line: #BFE9D0;
  --stm-bad: #B42318; --stm-bad-bg: #FDEDEC; --stm-bad-line: #F5C6C1;
  --stm-warn: #8A5A00; --stm-warn-bg: #FFF6E5; --stm-warn-line: #F3D9A0;
  --stm-idle: #475467; --stm-idle-bg: #F5F7FA; --stm-idle-line: #E0E5EC;
  --stm-text-muted: #667085;
}
.stm-scope button:focus-visible, .stm-scope select:focus-visible, .stm-scope input:focus-visible, .stm-scope textarea:focus-visible,
.stm-scope [tabindex]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.stm-scope .stm-panel:focus, .stm-scope .modal:focus { outline: none; }

.stm-hero { display: flex; align-items: center; gap: 16px; }
.stm-hero-icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; color: #fff; }
.stm-hero .page-title { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.stm-hero .page-subtitle { margin: 0; line-height: 1.55; font-size: 12.5px; }

.stm-filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 16px; margin-bottom: 12px; }
.stm-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stm-field label, .stm-label-spacer { font-size: 12px; font-weight: 600; color: var(--stm-text-muted); }
.stm-field select, .stm-field input { height: 36px; padding: 6px 10px; border: 1px solid #CBD2DC; border-radius: 6px; font-size: 13px; background: #fff; color: var(--ink); max-width: 100%; }
.stm-field-grow { flex: 1 1 220px; }
.stm-custom { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.stm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.stm-actions .fin-export-btn { margin-left: 0; height: 36px; }
.stm-refresh-btn { height: 36px; padding: 0 14px; border-radius: 6px; font-size: 12.5px; font-weight: 700; color: var(--navy); border-color: var(--navy); }
.stm-refresh-btn:hover:not(:disabled) { background: var(--navy-light); }
.stm-refresh-btn:disabled { opacity: 0.55; cursor: default; }
.stm-hint-banner { background: var(--navy-light); color: var(--navy); }
.stm-datemodel { margin: 0 0 16px; padding: 10px 14px; border-left: 3px solid var(--navy); border-radius: 6px; background: var(--navy-light); color: #344054; font-size: 12.5px; line-height: 1.6; }

.stm-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; border: 1px solid #D5DEEC; background: var(--navy-light); color: var(--navy); font-size: 12px; font-weight: 600; white-space: nowrap; }
.stm-chip-static { height: 36px; padding: 0 14px; background: #fff; border-color: #CBD2DC; color: var(--ink); cursor: default; }
.stm-chip-warn { background: var(--stm-warn-bg); border-color: var(--stm-warn-line); color: var(--stm-warn); }
.stm-chip-ok { background: var(--stm-ok-bg); border-color: var(--stm-ok-line); color: var(--stm-ok); }
.stm-chip-hit { background: #FFF9DB; border-color: #F1E08A; color: #6B5A00; }

.stm-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }
.stm-sum-tile { background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--navy); border-radius: 10px; padding: 12px 14px; }
.stm-sum-tile.stm-sum-ok { border-top-color: var(--green); }
.stm-sum-tile.stm-sum-warn { border-top-color: var(--orange); }
.stm-sum-tile.stm-sum-bad { border-top-color: var(--red); }
.stm-sum-val { font-size: 24px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stm-sum-label { font-size: 12.5px; font-weight: 600; color: #344054; margin-top: 2px; }
.stm-sum-sub { font-size: 11.5px; color: var(--stm-text-muted); margin-top: 4px; }
.stm-note { margin: 0 0 10px; font-size: 12px; color: var(--stm-text-muted); line-height: 1.55; }
.stm-note.stm-note-strong { color: #344054; background: var(--stm-idle-bg); border: 1px solid var(--stm-idle-line); border-radius: 8px; padding: 8px 12px; }
.stm-sum-note { margin: 0 0 14px; }

.stm-notice { padding: 10px 14px; border-radius: 8px; margin-bottom: 10px; font-size: 13px; line-height: 1.55; }
.stm-notice ul { margin: 6px 0 0; padding-left: 20px; }
.stm-notice-info { background: #EEF4FF; color: #1F3A68; }
.stm-notice-warn { background: var(--stm-warn-bg); color: #6B4400; border: 1px solid var(--stm-warn-line); }
.stm-asof { font-size: 11.5px; color: var(--stm-text-muted); margin: 0 0 12px; }
/* data freshness: how current the statement data is + the last successful sync of the statement mailbox (amber when behind, never red) */
.stm-fresh { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--stm-idle-line); background: var(--stm-idle-bg); font-size: 13px; line-height: 1.5; }
.stm-fresh-ok { background: var(--stm-ok-bg); border-color: var(--stm-ok-line); }
.stm-fresh-warn { background: var(--stm-warn-bg); border-color: var(--stm-warn-line); }
.stm-fresh-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.stm-fresh-ok .stm-fresh-head { color: var(--stm-ok); }
.stm-fresh-warn .stm-fresh-head { color: var(--stm-warn); }
.stm-fresh-dl { margin: 6px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px 20px; }
.stm-fresh-dl > div { display: flex; flex-direction: column; min-width: 0; }
.stm-fresh-dl dt { font-size: 11.5px; color: var(--stm-text-muted); }
.stm-fresh-dl dd { margin: 0; font-weight: 600; word-break: break-word; }
.stm-fresh-note { margin: 6px 0 0; font-size: 11.5px; color: var(--stm-text-muted); }
.stm-busy { opacity: 0.55; pointer-events: none; transition: opacity 0.15s; }

.stm-card { background: #fff; border: 1px solid var(--border); border-left: 5px solid var(--orange); border-radius: 12px; padding: 16px; margin-bottom: 18px; box-shadow: 0 1px 3px rgba(16,24,40,0.06); }
.stm-card-GREEN { border-left-color: var(--green); }
.stm-card-AMBER { border-left-color: var(--orange); }
.stm-card-RED { border-left-color: var(--red); }
.stm-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.stm-card-titlebox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.stm-card-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--navy); }
.stm-weekday { font-weight: 600; color: var(--stm-text-muted); }
.stm-health { display: inline-flex; align-items: center; gap: 4px; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid transparent; }
.stm-health-pill-GREEN { background: var(--stm-ok-bg); color: var(--stm-ok); border-color: var(--stm-ok-line); }
.stm-health-pill-AMBER { background: var(--stm-warn-bg); color: var(--stm-warn); border-color: var(--stm-warn-line); }
.stm-health-pill-RED { background: var(--stm-bad-bg); color: var(--stm-bad); border-color: var(--stm-bad-line); }
.stm-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.stm-expand-btn { margin-left: auto; padding: 7px 14px; border: 1px solid var(--navy); border-radius: 8px; background: #fff; color: var(--navy); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.stm-expand-btn:hover { background: var(--navy-light); }
.stm-card-reasons { flex-basis: 100%; font-size: 12px; color: var(--stm-text-muted); }

.stm-subcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stm-sub { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--stm-idle-line); background: var(--stm-idle-bg); }
.stm-sub-ok { background: var(--stm-ok-bg); border-color: var(--stm-ok-line); }
.stm-sub-bad { background: var(--stm-bad-bg); border-color: var(--stm-bad-line); }
.stm-sub-warn { background: var(--stm-warn-bg); border-color: var(--stm-warn-line); }
.stm-sub-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.stm-sub-head h4 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.stm-mark { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.stm-mark-ok { color: var(--stm-ok); }
.stm-mark-bad { color: var(--stm-bad); }
.stm-mark-warn { color: var(--stm-warn); }
.stm-mark-idle { color: var(--stm-idle); }
.stm-big { font-size: 13px; color: #344054; }
.stm-big strong { font-size: 17px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.stm-line { margin: 0; font-size: 12.5px; line-height: 1.5; color: #344054; }
.stm-muted { color: var(--stm-text-muted); font-size: 11.5px; }
.stm-line.stm-muted { font-size: 11.5px; }
.stm-diff { font-weight: 700; color: var(--stm-bad); }
.stm-sub-warn .stm-diff { color: var(--stm-warn); }
.stm-undetermined { color: var(--stm-warn); font-size: 12.5px; }
.stm-sub-btn { margin-top: auto; padding: 8px 12px; border: 1px solid var(--navy); border-radius: 8px; background: #fff; color: var(--navy); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.stm-sub-btn:hover:not(:disabled) { background: var(--navy-light); }
.stm-sub-btn:disabled { opacity: 0.5; cursor: default; }
.stm-sub .stm-line + .stm-sub-btn { margin-top: 8px; }

.stm-dl { margin: 0; }
.stm-dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 0; border-bottom: 1px dashed rgba(16,24,40,0.12); }
.stm-dl > div:last-child { border-bottom: none; }
.stm-dl dt { font-size: 12.5px; color: var(--stm-text-muted); }
.stm-dl-note { display: block; margin-top: 1px; font-size: 11px; font-weight: 400; color: var(--stm-text-muted); }
.stm-dl dd { margin: 0; font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; word-break: break-word; }
.stm-dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 20px; padding: 12px; border-radius: 8px; background: var(--bg); }
.stm-dl-grid > div { display: block; padding: 0; border: none; }
.stm-dl-grid dt { font-size: 11.5px; }
.stm-dl-grid dd { text-align: left; font-weight: 600; margin-top: 1px; }

.stm-panel { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.stm-panel-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.stm-panel-bar > .small-btn { margin-left: auto; }
.stm-seg { display: inline-flex; border: 1px solid #CBD2DC; border-radius: 8px; overflow: hidden; }
.stm-seg-btn { padding: 5px 12px; border: none; background: #fff; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--ink); }
.stm-seg-btn + .stm-seg-btn { border-left: 1px solid #CBD2DC; }
.stm-seg-btn[aria-pressed="true"] { background: var(--navy); color: #fff; }

.stm-table td { vertical-align: top; }
.stm-table th { white-space: nowrap; }
.stm-row-click { cursor: pointer; }
.stm-row-click:hover td { background: var(--navy-light); }
.stm-row-click:focus-visible { outline-offset: -2px; }
.stm-row-unexplained td { background: #FFFBF2; }
.stm-row-unexplained td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
.stm-row-hit td { background: #FFF9DB; }
.stm-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.stm-nowrap { white-space: nowrap; }
.stm-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; word-break: break-all; }
.stm-desc { word-break: break-word; max-width: 320px; }
.stm-matched-label { font-weight: 600; word-break: break-word; }
.stm-dir { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.stm-dir-IN { background: #E8F1FD; color: #1D4F91; }
.stm-dir-OUT { background: #EFF1F4; color: #374151; }
.stm-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.stm-badge-MATCHED, .stm-badge-CLASSIFIED { background: var(--stm-ok-bg); color: var(--stm-ok); border-color: var(--stm-ok-line); }
.stm-badge-AMOUNT_MISMATCH { background: var(--stm-bad-bg); color: var(--stm-bad); border-color: var(--stm-bad-line); }
.stm-badge-NEEDS_REVIEW { background: var(--stm-warn-bg); color: var(--stm-warn); border-color: var(--stm-warn-line); }
.stm-badge-UNEXPLAINED { background: #FFE9D6; color: #9A3412; border-color: #F6C9A3; }
.stm-act-btn { white-space: nowrap; }
.stm-act-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.stm-blocked-note { margin-top: 3px; max-width: 150px; }

.stm-modal .modal { width: 680px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow-y: auto; padding: 20px; }
.stm-modal-wide .modal { width: 1060px; }
.stm-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.stm-modal .modal h3 { margin: 0; font-size: 16px; line-height: 1.45; color: var(--navy); }
.stm-modal-x { flex: 0 0 auto; border: none; background: none; padding: 0 6px; font-size: 26px; line-height: 1; color: var(--stm-text-muted); cursor: pointer; }
.stm-modal .modal p { color: #344054; }
.stm-modal .actions { justify-content: flex-end; }
.stm-modal .modal .actions button { flex: 0 0 auto; min-width: 110px; }
.stm-modal .modal .actions .small-btn { min-width: 0; }
.stm-h4 { margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: var(--navy); }
.stm-block { margin-bottom: 14px; }
.stm-block-old { padding: 10px 12px; border-radius: 8px; background: var(--bg); }
.stm-block-old .stm-dl-grid { background: #fff; }
.stm-evidence { list-style: none; margin: 0 0 8px; padding: 0; }
.stm-evidence li { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.stm-ev-label { flex: 0 0 38%; color: var(--stm-text-muted); }
.stm-ev-value { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.stm-evidence-compact li { font-size: 12px; padding: 3px 0; gap: 8px; }
.stm-more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.stm-err-inline { color: var(--stm-bad); font-size: 12px; }

@media (min-width: 1280px) {
  .stm-subcards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .stm-subcards { grid-template-columns: minmax(0, 1fr); }
  .stm-filterbar { flex-direction: column; align-items: stretch; padding: 14px; }
  .stm-field-grow { flex: 0 0 auto; }
  .stm-field select, .stm-field input { width: 100%; }
  .stm-custom { flex-direction: column; align-items: stretch; }
  .stm-actions { margin-left: 0; }
  .stm-actions > button { flex: 1 1 0; }
  .stm-label-spacer { display: none; }
  .stm-chip-static { width: 100%; justify-content: center; }
  .stm-hero { gap: 12px; }
  .stm-hero-icon { width: 40px; height: 40px; }
  .stm-card { padding: 12px; border-left-width: 4px; }
  .stm-expand-btn { width: 100%; margin-left: 0; }
  .stm-modal .modal { padding: 14px; }
  .stm-evidence li { flex-direction: column; gap: 2px; }
  .stm-ev-label { flex-basis: auto; }
}

/* ---- STM Daily Review, bank-first refinement -------------------------------------------------------------------------
   Headline = the FULL statement total. Underneath: explained / matched + unexplained / needs review (the equation).
   Colour carries evidence: green = explained / matched, amber = needs review / incomplete evidence, red = a proven mismatch only. */
.stm-scope { --stm-out: #B0314B; --stm-out-bg: #FDEFF2; --stm-out-line: #F5CCD5; --stm-info-bg: #F1F6FD; --stm-info-line: #D5E3F7; }

/* date card: header always visible, body (sub-cards + STM rows) only when open */
.stm-card { padding: 14px 16px; margin-bottom: 14px; }
.stm-card-head { margin-bottom: 0; }
.stm-card-open .stm-card-head { margin-bottom: 14px; }
.stm-card-open .stm-card-reasons { display: none; }
.stm-card-body { margin-top: 14px; }
.stm-cal { display: inline-flex; align-items: center; color: var(--navy); }
.stm-card-title { font-size: 18px; }
.stm-weekday-pill { display: inline-flex; align-items: center; padding: 2px 12px; border-radius: 999px; background: #EEF2F7; border: 1px solid #DDE4EE; color: #475467; font-size: 12px; font-weight: 700; }
.stm-chip-in { background: var(--stm-ok-bg); border-color: var(--stm-ok-line); color: var(--stm-ok); }
.stm-chip-out { background: var(--stm-out-bg); border-color: var(--stm-out-line); color: var(--stm-out); }
.stm-chip > span[aria-hidden="true"] { margin-right: 4px; font-weight: 800; }
.stm-expand-btn { border-color: transparent; background: transparent; color: var(--navy); font-weight: 700; padding: 7px 10px; }
.stm-expand-btn:hover { background: var(--navy-light); }

/* sub-cards */
.stm-sub { gap: 8px; padding: 14px 16px; }
.stm-sub-info { background: var(--stm-info-bg); border-color: var(--stm-info-line); }
.stm-sub-head h4 { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.stm-dir-ico { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 13px; font-weight: 800; line-height: 1; background: #fff; border: 1px solid currentColor; }
.stm-dir-ico-in { color: var(--stm-ok); }
.stm-dir-ico-out { color: var(--stm-out); }
.stm-warn-ico { color: var(--stm-warn); font-size: 15px; }
.stm-headline { display: flex; flex-direction: column; gap: 0; }
.stm-headline-count { font-size: 13px; color: #344054; }
.stm-headline-amt { font-size: 23px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--ink); }
.stm-eq { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; padding-top: 9px; border-top: 1px solid rgba(16,24,40,0.12); }
.stm-eq-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; line-height: 1.45; }
.stm-eq-label { color: #344054; min-width: 0; }
.stm-eq-val { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; flex: 0 0 auto; max-width: 62%; }
.stm-eq-ok .stm-eq-val { color: var(--stm-ok); }
.stm-eq-warn .stm-eq-val { color: var(--stm-warn); }
.stm-eq-bad .stm-eq-val { color: var(--stm-bad); }
.stm-eq .stm-line { margin-top: 2px; }
.stm-dl-in dd { color: var(--stm-ok); }
.stm-dl-out dd { color: var(--stm-out); }
.stm-dl-net { margin-top: 2px; padding-top: 6px !important; border-top: 1px solid rgba(16,24,40,0.14); }
.stm-sub-info .stm-dl > div { padding: 5px 0; }

/* summary strip (reference layout: icon + number + label) */
.stm-sum-tile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top-width: 1px; border-top-color: var(--border); }
.stm-sum-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--navy-light); color: var(--navy); font-size: 18px; font-weight: 800; }
.stm-sum-ok .stm-sum-ico { background: var(--stm-ok); color: #fff; }
.stm-sum-warn .stm-sum-ico { background: var(--orange); color: #fff; }
.stm-sum-bad .stm-sum-ico { background: var(--stm-bad); color: #fff; }
.stm-sum-body { min-width: 0; }
.stm-sum-amt { display: block; font-size: 14px; font-weight: 800; color: var(--stm-warn); font-variant-numeric: tabular-nums; }
.stm-sum-rcpt { display: block; font-size: 11px; color: var(--stm-text-muted); line-height: 1.4; }

/* the STM rows of an open card */
.stm-panel-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; margin-bottom: 8px; }
.stm-panel-h { margin: 0; font-size: 14px; font-weight: 700; color: var(--navy); }
.stm-act-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

/* drill-downs: owner summary first, rows to review next, technical evidence last */
.stm-ownersum { margin-bottom: 14px; }
.stm-os-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.stm-os-tile { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--stm-idle-line); background: var(--stm-idle-bg); min-width: 0; }
.stm-os-ok { background: var(--stm-ok-bg); border-color: var(--stm-ok-line); }
.stm-os-warn { background: var(--stm-warn-bg); border-color: var(--stm-warn-line); }
.stm-os-bad { background: var(--stm-bad-bg); border-color: var(--stm-bad-line); }
.stm-os-idle { background: var(--stm-idle-bg); border-color: var(--stm-idle-line); }
.stm-os-label { font-size: 12px; font-weight: 600; color: var(--stm-text-muted); }
.stm-os-val { margin-top: 2px; font-size: 18px; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; word-break: break-word; }
.stm-os-sub { margin-top: 2px; font-size: 11.5px; color: var(--stm-text-muted); }
.stm-equation { margin: 10px 0 6px; padding: 8px 12px; border: 1px dashed #CBD2DC; border-radius: 8px; background: #F8FAFC; color: #344054; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; word-break: break-word; }
.stm-problems { margin: 14px 0; }
.stm-group-title { margin: 12px 0 4px; }
.stm-ok-line { margin: 6px 0; padding: 8px 12px; border: 1px solid var(--stm-ok-line); border-radius: 8px; background: var(--stm-ok-bg); color: var(--stm-ok); font-size: 13px; font-weight: 700; }
.stm-table-compact { font-size: 12.5px; }
.stm-tech-wrap { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.stm-tech-toggle { padding: 8px 14px; border: 1px solid var(--navy); border-radius: 8px; background: #fff; color: var(--navy); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.stm-tech-toggle:hover { background: var(--navy-light); }
.stm-tech { margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }

@media (max-width: 640px) {
  .stm-headline-amt { font-size: 21px; }
  .stm-sum-tile { padding: 10px 12px; }
  .stm-os-tiles { grid-template-columns: minmax(0, 1fr); }
  .stm-card-title { font-size: 16px; }
  .stm-eq-val { max-width: 58%; }
}