/* Flow Update — Smart Money Tracker IDX (daily-flow-diff). Dark-theme aware via CSS vars. */

.fu-wrap { padding: 0; display: flex; flex-direction: column; gap: 16px; }

.fu-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg, 14px);
  overflow: hidden;
}
.fu-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap;
}
.fu-card-head h2 { margin: 0; font-size: 15px; font-weight: 650; color: var(--ink-1); }
.fu-card-head .sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.fu-card-body { padding: 16px 18px; }

/* segmented toggle (window) */
.fu-seg { display: inline-flex; background: var(--surface-soft); border: 1px solid var(--line-soft); border-radius: 999px; padding: 3px; }
.fu-seg button {
  border: 0; background: none; color: var(--ink-3); font-size: 12.5px; font-weight: 550;
  padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s;
}
.fu-seg button:hover { color: var(--ink-1); }
.fu-seg button.active { background: var(--surface); color: var(--ink-1); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.fu-seg button:focus-visible { outline: 2px solid var(--accent,#2563eb); outline-offset: 1px; }

/* freshness pill */
.fu-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: 999px;
  background: var(--surface-soft); border: 1px solid var(--line-soft); color: var(--ink-2); }
.fu-pill.stale { color: #b45309; border-color: rgba(180,83,9,.35); background: rgba(245,158,11,.10); }
.fu-pill.fresh { color: #0a7d33; border-color: rgba(16,185,129,.30); background: rgba(16,185,129,.10); }

/* narrative */
.fu-narr { font-size: 14px; line-height: 1.7; color: var(--ink-1); }
.fu-narr-src { font-size: 11.5px; color: var(--ink-3); margin-top: 10px; }
.fu-narr-pending { color: var(--accent,#3b82f6); animation: fu-pulse 1.4s ease-in-out infinite; }
@keyframes fu-pulse { 0%,100% { opacity: .45 } 50% { opacity: 1 } }

/* rotation table */
.fu-rot { width: 100%; border-collapse: collapse; font-size: 13px; }
.fu-rot th { text-align: right; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-3); font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--line-soft); }
.fu-rot th:first-child { text-align: left; }
.fu-rot td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); text-align: right; font-variant-numeric: tabular-nums; }
.fu-rot td:first-child { text-align: left; color: var(--ink-1); font-weight: 550; }
.fu-rot tr:last-child td { border-bottom: 0; }
.fu-rot tr:hover td { background: var(--surface-soft); }
.fu-bar-cell { width: 120px; }
.fu-bar { position: relative; height: 8px; background: var(--surface-soft); border-radius: 4px; overflow: hidden; }
.fu-bar > i { position: absolute; top: 0; bottom: 0; display: block; border-radius: 4px; }
.fu-bar > i.pos { left: 50%; background: #10b981; }
.fu-bar > i.neg { right: 50%; background: #ef4444; }
.fu-bar .mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line-soft); }

.pos { color: #0a7d33; } .neg { color: #b42318; } .zero { color: var(--ink-4); }

/* alerts table */
.fu-alerts { width: 100%; border-collapse: collapse; font-size: 13px; }
.fu-alerts th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-3); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.fu-alerts th.num, .fu-alerts td.num { text-align: right; font-variant-numeric: tabular-nums; }
.fu-alerts td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.fu-alerts tr.row { cursor: pointer; }
.fu-alerts tr.row:hover td { background: var(--surface-soft); }
.fu-alerts tr.row:focus-visible { outline: 2px solid var(--accent,#2563eb); outline-offset: -2px; }
.fu-tk { font-weight: 650; color: var(--ink-1); }
.fu-bk { font-weight: 600; color: var(--ink-1); }
.fu-sec { font-size: 11px; color: var(--ink-3); }

.fu-dir { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.fu-dir.buy { color: #0a7d33; background: rgba(16,185,129,.12); }
.fu-dir.sell { color: #b42318; background: rgba(239,68,68,.12); }

.fu-flag { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; margin-right: 4px;
  border: 1px solid var(--line-soft); color: var(--ink-2); white-space: nowrap; }
.fu-flag.rev { color: #7c3aed; border-color: rgba(124,58,237,.35); background: rgba(124,58,237,.08); }
.fu-flag.new { color: #b45309; border-color: rgba(180,83,9,.35); background: rgba(245,158,11,.08); }
.fu-flag.spk { color: var(--ink-3); }

.fu-type { font-size: 11px; padding: 1px 7px; border-radius: 6px; background: var(--surface-soft); color: var(--ink-3); }

/* lookback expanded row */
.fu-lb-row td { background: var(--surface-soft); padding: 0; }
.fu-lb { padding: 12px 16px 14px; font-size: 12.5px; color: var(--ink-2); line-height: 1.65; }
.fu-lb .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 18px; margin-top: 6px; }
.fu-lb b { color: var(--ink-1); }
.fu-lb .hl { color: #0a7d33; font-weight: 600; }
.fu-lb .hl.bad { color: #b42318; }

/* note box */
.fu-note { font-size: 12.5px; color: var(--ink-3); line-height: 1.7; padding: 14px 18px;
  background: var(--surface-soft); border: 1px solid var(--line-soft); border-radius: var(--r-lg, 14px); }
.fu-note b { color: var(--ink-2); }

/* narrative markdown */
.fu-src { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.fu-narr h3 { font-size: 13.5px; font-weight: 650; color: var(--ink-1); margin: 16px 0 6px; }
.fu-narr h3:first-child { margin-top: 0; }
.fu-narr p { font-size: 13.5px; line-height: 1.7; color: var(--ink-1); margin: 0 0 8px; }
.fu-narr ul { margin: 4px 0 8px; padding-left: 4px; list-style: none; }
.fu-narr li { font-size: 13.5px; line-height: 1.65; color: var(--ink-1); margin-bottom: 6px; padding-left: 16px; position: relative; }
.fu-narr li::before { content: "›"; position: absolute; left: 2px; color: var(--accent,#2563eb); font-weight: 700; }
.fu-narr strong { color: var(--ink-1); font-weight: 650; }

/* kondisi pasar */
.fu-kondisi-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.fu-verdict { font-size: 16px; font-weight: 700; color: var(--ink-1); }
.fu-stance { font-size: 12px; margin-top: 4px; display: inline-block; padding: 2px 8px; border-radius: 6px; }
.fu-stance.warn { color: #b45309; background: rgba(245,158,11,.12); }
.fu-stance.ok { color: #0a7d33; background: rgba(16,185,129,.12); }
.fu-stance.neutral { color: var(--ink-3); background: var(--surface-soft); }
.fu-net3 { display: flex; gap: 16px; text-align: right; }
.fu-net3 .lbl { display: block; font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; }
.fu-net3 b { font-size: 14px; font-variant-numeric: tabular-nums; }
.fu-sub2 { font-size: 12.5px; color: var(--ink-2); margin: 12px 0 8px; }
.fu-daily { width: 100%; height: 90px; display: block; }
.fu-dbar.pos { fill: #10b981; } .fu-dbar.neg { fill: #ef4444; }
.fu-axis { stroke: var(--line-soft); stroke-width: 1; }
.fu-daily-x { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-4); margin-top: 2px; }

/* rotasi uang helicopter */
.fu-flow { display: flex; align-items: stretch; gap: 12px; }
.fu-flow-col { flex: 1; background: var(--surface-soft); border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px; }
.fu-flow-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.fu-flow-h.neg { color: #b42318; } .fu-flow-h.pos { color: #0a7d33; }
.fu-flow-arrow { align-self: center; font-size: 22px; color: var(--ink-4); font-weight: 700; }
.fu-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fu-sec-chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-soft); color: var(--ink-2); background: var(--surface); }
.fu-sec-chip .amt { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fu-sec-chip.neg { border-color: rgba(239,68,68,.30); color: #b42318; }
.fu-sec-chip.pos { border-color: rgba(16,185,129,.30); color: #0a7d33; }
.fu-sec-chip.emerg { border-color: rgba(16,185,129,.30); color: #0a7d33; background: rgba(16,185,129,.06); }
.fu-sec-chip.fade { border-color: rgba(245,158,11,.30); color: #b45309; background: rgba(245,158,11,.06); }
.fu-flow-extra { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.fu-muted { color: var(--ink-4); }

/* aksi grid */
.fu-aksi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fu-aksi-col { background: var(--surface-soft); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px; }
.fu-aksi-col.buy { border-top: 3px solid #10b981; }
.fu-aksi-col.accum { border-top: 3px solid #3b82f6; }
.fu-aksi-col.sell { border-top: 3px solid #ef4444; }
.fu-aksi-col.watch { border-top: 3px solid var(--ink-4); }
.fu-aksi-col.pantau { border-top: 3px solid #f59e0b; }
.fu-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.fu-fold > summary h2 { margin: 0; }
.fu-fold > summary .sub, .fu-fold > summary .fu-src { margin-left: auto; }
.fu-fold > summary::-webkit-details-marker { display: none; }
.fu-fold > summary::before { content: "▸"; color: var(--ink-4); font-size: 12px; }
.fu-fold[open] > summary::before { content: "▾"; }
.fu-aksi-grid.two { grid-template-columns: repeat(2, 1fr); }
.fu-zona { font-weight: 600; color: #b45309; }
.fu-zona.ok { color: #059669; }
.fu-qual { font-size: 10.5px; color: var(--ink-3); border: 1px solid var(--line-soft); border-radius: 6px; padding: 0 5px; }
.fu-aksi-h { font-size: 12px; font-weight: 700; color: var(--ink-1); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.fu-aksi-n { font-size: 10.5px; color: var(--ink-3); background: var(--surface); border: 1px solid var(--line-soft); border-radius: 999px; padding: 0 6px; }
.fu-aksi-item { padding: 7px 0; border-top: 1px solid var(--line-soft); }
.fu-aksi-item:first-of-type { border-top: 0; }
.fu-aksi-row1 { display: flex; align-items: baseline; gap: 6px; }
.fu-aksi-row1 .fu-tk { font-weight: 650; color: var(--ink-1); font-size: 13px; }
.fu-aksi-row1 .fu-sec { font-size: 10px; color: var(--ink-4); flex: 1; }
.fu-aksi-net { font-size: 11px; font-variant-numeric: tabular-nums; }
.fu-aksi-reason { font-size: 11.5px; color: var(--ink-2); line-height: 1.5; margin-top: 2px; }
.fu-po { display: inline-block; font-size: 10px; padding: 0 5px; border-radius: 4px; white-space: nowrap; }
.fu-po.ok { color: #0a7d33; background: rgba(16,185,129,.10); }
.fu-po.bad { color: #b42318; background: rgba(239,68,68,.10); }
.fu-empty-sm { font-size: 11.5px; color: var(--ink-4); padding: 6px 0; }

@media (max-width: 900px) {
  .fu-aksi-grid { grid-template-columns: repeat(2, 1fr); }
  .fu-flow { flex-direction: column; }
  .fu-flow-arrow { transform: rotate(90deg); }
}

/* skeleton */
.fu-skel { background: linear-gradient(90deg, var(--surface-soft) 25%, var(--line-soft) 37%, var(--surface-soft) 63%);
  background-size: 400% 100%; animation: fu-shimmer 1.4s ease-in-out infinite; border-radius: 8px; }
@keyframes fu-shimmer { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }

.fu-empty { color: var(--ink-3); font-size: 13px; padding: 20px; text-align: center; }

@media (max-width: 720px) {
  .fu-alerts .hide-sm { display: none; }
  .fu-bar-cell { display: none; }
}

/* ── advanced patterns (2026-05-22) ─────────────────────────────────────────── */
/* divergence + streak chips in alert row */
.fu-flag.accum  { color: #0a7d33; background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.30); }
.fu-flag.distrib{ color: #b42318; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.30); }
.fu-flag.conf   { color: var(--ink-3); background: var(--surface-soft); border: 1px solid var(--line-soft); }
.fu-pc { font-size: 10px; font-variant-numeric: tabular-nums; margin-left: 3px; }
.fu-pc.pos { color: #10b981; } .fu-pc.neg { color: #ef4444; } .fu-pc.zero { color: var(--ink-4); }
.fu-streak { display: inline-block; font-size: 10px; font-weight: 650; padding: 0 5px; border-radius: 4px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.fu-streak.buy  { color: #0a7d33; background: rgba(16,185,129,.10); }
.fu-streak.sell { color: #b42318; background: rgba(239,68,68,.10); }

/* overhang pill in aksi */
.fu-ovh { display: inline-block; font-size: 10px; padding: 0 5px; border-radius: 4px; white-space: nowrap; font-weight: 600; }
.fu-ovh.ok  { color: #0a7d33; background: rgba(16,185,129,.10); }
.fu-ovh.mid { color: #92600a; background: rgba(245,158,11,.12); }
.fu-ovh.bad { color: #b42318; background: rgba(239,68,68,.12); }

/* crowding caveat banner */
.fu-crowd { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 4px;
  padding: 8px 10px; border-radius: 8px; font-size: 11.5px; line-height: 1.5;
  color: #92600a; background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.28); }
.fu-crowd svg { flex: 0 0 auto; margin-top: 1px; }

/* stock focus drill-down (in alert expansion) */
.fu-focus { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-soft); }
.fu-focus-t { font-size: 12px; font-weight: 700; color: var(--ink-1); margin-bottom: 8px; }
.fu-fb { margin-bottom: 8px; }
.fu-fb-h { font-size: 11px; font-weight: 650; color: var(--ink-2); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.fu-fb-b { font-size: 11.5px; color: var(--ink-2); line-height: 1.6; }
.fu-edge { font-size: 9.5px; font-weight: 600; padding: 0 5px; border-radius: 999px;
  color: var(--ink-3); background: var(--surface-soft); border: 1px solid var(--line-soft); }
.fu-edge.ok   { color: #0a7d33; background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.30); }
.fu-edge.warn { color: #92600a; background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.28); }
.fu-ovh-bar { position: relative; height: 18px; border-radius: 6px; background: var(--surface-soft);
  border: 1px solid var(--line-soft); overflow: hidden; display: flex; align-items: center; }
.fu-ovh-bar i { position: absolute; left: 0; top: 0; bottom: 0; opacity: .25; }
.fu-ovh-bar i.ok { background: #10b981; } .fu-ovh-bar i.mid { background: #f59e0b; } .fu-ovh-bar i.bad { background: #ef4444; }
.fu-ovh-bar span { position: relative; z-index: 1; font-size: 10.5px; color: var(--ink-2); padding: 0 8px; }
.fu-walls { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.fu-wall { display: flex; gap: 10px; font-size: 10.5px; font-variant-numeric: tabular-nums;
  padding: 3px 8px; background: var(--surface-soft); border-radius: 6px; }
.fu-wall .lvl { font-weight: 650; color: var(--ink-1); min-width: 92px; }
.fu-wall .pa { color: #b42318; min-width: 80px; }
.fu-wall .lots { color: var(--ink-3); }
.fu-clu { display: inline-block; font-size: 10.5px; color: var(--ink-2); padding: 1px 6px; margin: 1px;
  background: var(--surface-soft); border: 1px solid var(--line-soft); border-radius: 4px; }

/* "apa kata backtest" disclosure */
.fu-backtest { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px; padding: 0; }
.fu-backtest summary { cursor: pointer; padding: 12px 14px; font-size: 12.5px; font-weight: 650; color: var(--ink-1);
  display: flex; align-items: center; gap: 8px; list-style: none; transition: color .2s ease; }
.fu-backtest summary::-webkit-details-marker { display: none; }
.fu-backtest summary:hover { color: #10b981; }
.fu-backtest summary:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; border-radius: 8px; }
.fu-backtest[open] summary { border-bottom: 1px solid var(--line-soft); }
.fu-bt-body { padding: 12px 14px; font-size: 12px; color: var(--ink-2); line-height: 1.65; }
.fu-bt-body ul { margin: 8px 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.fu-bt-body li { padding-left: 2px; }
.fu-bt-body p { margin: 4px 0; }
@media (prefers-reduced-motion: reduce) { .fu-backtest summary { transition: none; } }

/* ── in-page explainers (2026-05-22, plain-language) ───────────────────────── */
.fu-focus-intro { font-size: 11.5px; color: var(--ink-3); line-height: 1.6; margin-bottom: 10px; }
.fu-fb-why { font-size: 11px; color: var(--ink-3); line-height: 1.65; margin: 1px 0 7px; }
.fu-fb-why i { color: var(--ink-2); font-style: italic; }
.fu-wall-head { font-size: 10px; color: var(--ink-4); margin-bottom: 4px; }
.fu-wall { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 10.5px;
  font-variant-numeric: tabular-nums; padding: 4px 8px; background: var(--surface-soft); border-radius: 6px; }
.fu-wall .lots { font-weight: 650; color: var(--ink-1); }
.fu-wall .nyk { color: var(--ink-2); }
.fu-wall .nyk b { color: var(--ink-1); }
.fu-wall .pa { color: #b42318; }
.fu-wall .brk { color: var(--ink-4); margin-left: auto; }

/* legend (details) in alert + aksi */
.fu-legend { margin-bottom: 12px; font-size: 12px; }
.fu-legend summary { cursor: pointer; color: var(--ink-3); font-weight: 600; list-style: none;
  padding: 7px 10px; background: var(--surface-soft); border: 1px solid var(--line-soft);
  border-radius: 8px; transition: color .2s ease; }
.fu-legend summary::-webkit-details-marker { display: none; }
.fu-legend summary:hover { color: #10b981; }
.fu-legend summary:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; }
.fu-legend-body { padding: 10px 12px; color: var(--ink-2); line-height: 1.6; }
.fu-legend-body p { margin: 2px 0 8px; }
.fu-legend-body ul { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.fu-legend-body li { padding-left: 14px; position: relative; }
.fu-legend-body li::before { content: "·"; position: absolute; left: 4px; color: var(--ink-4); font-weight: 700; }
.fu-legend-line { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft);
  font-size: 11px; color: var(--ink-3); line-height: 1.7; }
.fu-legend-line .fu-ovh, .fu-legend-line .fu-po { vertical-align: baseline; }

/* ─── v3 (2026-05-30): Sector Rotation + Pattern Match cards ─── */
.fu-narr-card { background: linear-gradient(135deg, rgba(0,102,204,.04) 0%, transparent 100%); border-color: rgba(0,102,204,.18); }
.fu-narr-full { font-size: 14.5px; line-height: 1.75; color: var(--ink-1); }
.fu-narr-full h2, .fu-narr-full h3 { margin-top: 18px; margin-bottom: 8px; font-size: 16px; color: var(--ink-1); font-weight: 700; letter-spacing: -.01em; }
.fu-narr-full h2:first-child, .fu-narr-full h3:first-child { margin-top: 0; }
.fu-narr-full p { margin-bottom: 12px; }
.fu-narr-full ul { margin: 8px 0 12px 18px; }
.fu-narr-full li { margin-bottom: 4px; }
.fu-narr-full strong { color: var(--ink-1); font-weight: 700; }

/* Sector Rotation card */
.fu-secrot-statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.fu-secrot-stat { background: var(--surface-soft); border-radius: 8px; padding: 12px 14px; }
.fu-secrot-stat .k { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .3px; font-weight: 600; margin-bottom: 3px; }
.fu-secrot-stat .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fu-secrot-stat .v.pos { color: var(--positive); }
.fu-secrot-stat .v.neg { color: var(--negative); }
.fu-secrot-section { margin-bottom: 22px; }
.fu-secrot-section h3 { font-size: 13.5px; font-weight: 700; color: var(--ink-1); margin: 0 0 4px; }
.fu-secrot-section .sub { font-size: 12px; color: var(--ink-3); margin-bottom: 10px; }
.fu-drivers { display: flex; flex-direction: column; gap: 6px; }
.fu-driver-row { display: grid; grid-template-columns: 140px 1fr 80px; gap: 10px; align-items: center; font-size: 12.5px; }
.fu-driver-label { font-weight: 600; color: var(--ink-1); font-size: 12px; }
.fu-driver-label .dim { color: var(--ink-3); font-weight: 400; font-size: 10.5px; }
.fu-driver-bar { height: 14px; background: var(--surface-soft); border-radius: 999px; position: relative; overflow: hidden; }
.fu-driver-bar::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background: var(--line); }
.fu-driver-fill { position: absolute; top: 0; height: 100%; border-radius: 999px; }
.fu-driver-fill.pos { background: var(--positive); }
.fu-driver-fill.neg { background: var(--negative); }
.fu-driver-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12px; }
.fu-driver-val.pos { color: var(--positive); }
.fu-driver-val.neg { color: var(--negative); }
.fu-secrot-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 740px) { .fu-secrot-3col { grid-template-columns: 1fr; } }
.fu-sigcol { background: var(--surface-soft); border-radius: 10px; padding: 12px 14px; }
.fu-sigcol-h { font-size: 13px; font-weight: 700; color: var(--ink-1); display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.fu-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.fu-dot.pos { background: var(--positive); }
.fu-dot.neg { background: var(--negative); }
.fu-dot.warn { background: var(--warning); }
.fu-sigcol .sub { font-size: 11px; color: var(--ink-3); margin-bottom: 8px; line-height: 1.4; }
.fu-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.fu-chip { font-size: 10.5px; padding: 4px 9px; border-radius: 999px; font-weight: 700; background: var(--surface); }
.fu-chip.pos { background: rgba(26,138,62,.12); color: var(--positive); }
.fu-chip.neg { background: rgba(200,51,26,.12); color: var(--negative); }
.fu-chip.warn { background: rgba(178,87,0,.12); color: var(--warning); }
.fu-empty-mini { font-size: 11px; color: var(--ink-3); font-style: italic; }
.fu-konflik-box { background: rgba(200,51,26,.04); border-left: 3px solid var(--negative); padding-left: 12px; padding-top: 10px; padding-bottom: 10px; border-radius: 6px; }
.fu-konflik-row { display: grid; grid-template-columns: 100px 1fr 130px; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line-soft); font-size: 12.5px; align-items: center; }
.fu-konflik-row:last-child { border-bottom: 0; }
.fu-konflik-code { font-weight: 700; color: var(--ink-1); }
.fu-konflik-msg { color: var(--ink-2); }
.fu-konflik-asing { text-align: right; font-variant-numeric: tabular-nums; color: var(--negative); font-weight: 700; font-size: 11.5px; }
.fu-secrot-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); text-align: right; font-size: 12.5px; }
.fu-secrot-foot a { color: var(--accent); text-decoration: none; font-weight: 600; }
.fu-secrot-foot a:hover { text-decoration: underline; }

/* Pattern Match card */
.fu-pat-hero { display: grid; grid-template-columns: 1fr 360px; gap: 18px; align-items: center; background: var(--surface-soft); border-radius: 10px; padding: 14px 18px; margin-bottom: 16px; }
@media (max-width: 740px) { .fu-pat-hero { grid-template-columns: 1fr; } }
.fu-pat-interp { font-size: 14px; color: var(--ink-1); font-weight: 600; line-height: 1.5; }
.fu-pat-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fu-pat-hero-stats > div { background: var(--surface); border-radius: 6px; padding: 8px 10px; text-align: center; }
.fu-pat-hero-stats .k { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .3px; font-weight: 600; }
.fu-pat-hero-stats .v { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; display: block; margin-top: 2px; }
.fu-pat-hero-stats .v.pos { color: var(--positive); }
.fu-pat-hero-stats .v.neg { color: var(--negative); }
.fu-pat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 740px) { .fu-pat-cards { grid-template-columns: 1fr; } }
.fu-pat-card { border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px 14px; background: var(--surface); }
.fu-pat-card-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.fu-pat-date { font-weight: 700; color: var(--ink-1); font-size: 13px; }
.fu-pat-sim { font-size: 10.5px; color: var(--accent); font-weight: 700; padding: 3px 8px; background: var(--accent-soft); border-radius: 999px; }
.fu-pat-card-grid { display: grid; grid-template-columns: 1fr; gap: 5px; font-size: 11.5px; }
.fu-pat-card-grid > div { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--line-faint); }
.fu-pat-card-grid > div:last-child { border-bottom: 0; }
.fu-pat-card-grid .k { color: var(--ink-3); font-weight: 500; }
.fu-pat-card-grid .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.fu-pat-card-grid .v.pos { color: var(--positive); }
.fu-pat-card-grid .v.neg { color: var(--negative); }
.fu-pat-foot { margin-top: 12px; font-size: 11px; color: var(--ink-3); line-height: 1.5; }