/* Flow Analisis — shared styles (list + per-saham detail + per-broker detail). Pakai CSS var dashboard. */
.fa-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:16px;}
.fa-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:14px;}
.fa-h2{margin:0;font-size:16px;font-weight:600;color:var(--ink-1);letter-spacing:-.01em;}
.fa-sub{margin:4px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.45;max-width:74ch;}

/* segmented control */
.fa-seg{display:inline-flex;background:var(--surface-soft);border:1px solid var(--line-soft);border-radius:10px;padding:3px;gap:2px;}
.fa-seg button{border:0;background:none;color:var(--ink-3);font-size:12px;font-weight:500;padding:6px 12px;border-radius:7px;cursor:pointer;transition:background .18s,color .18s;min-height:32px;}
.fa-seg button:hover{color:var(--ink-1);}
.fa-seg button.active{background:var(--surface);color:var(--ink-1);box-shadow:0 1px 2px rgba(0,0,0,.06);}
.fa-seg button:focus-visible{outline:2px solid var(--accent,#2563eb);outline-offset:1px;}

/* back link */
.fa-back{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3);text-decoration:none;cursor:pointer;transition:color .15s;}
.fa-back:hover{color:var(--ink-1);}
.fa-back svg{width:14px;height:14px;}

/* toolbar */
.fa-toolbar{position:sticky;top:0;z-index:50;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:16px;display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;}
.fa-field{display:flex;flex-direction:column;gap:5px;}
.fa-field label,.fa-field-label{font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em;}
#fa-ticker{padding:8px 12px;background:var(--surface-soft);border:1px solid var(--line-soft);color:var(--ink-1);border-radius:9px;font-size:15px;width:120px;text-transform:uppercase;font-weight:600;letter-spacing:.04em;}
#fa-ticker:focus-visible{outline:2px solid var(--accent,#2563eb);outline-offset:1px;}
.fa-pricenow{font-size:13px;color:var(--ink-3);margin-left:auto;font-variant-numeric:tabular-nums;}

/* tables */
.fa-scanner table,.fa-bt,.fab-t{width:100%;border-collapse:collapse;font-size:12.5px;}
.fa-scanner th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-4);font-weight:600;padding:6px 10px;border-bottom:1px solid var(--line-soft);}
.fa-scanner td{padding:9px 10px;border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums;}
.fa-scanner tbody tr{cursor:pointer;transition:background .15s;}
.fa-scanner tbody tr:hover{background:var(--surface-soft);}
.fa-scanner tbody tr:focus-visible{outline:2px solid var(--accent,#2563eb);outline-offset:-2px;}
.fa-bt th{text-align:right;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-4);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line-soft);white-space:nowrap;}
.fa-bt th:first-child,.fa-bt th:nth-child(2),.fa-bt th:nth-child(3){text-align:left;}
.fa-bt td{padding:8px;border-bottom:1px solid var(--line-soft);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.fa-bt td:first-child,.fa-bt td:nth-child(2),.fa-bt td:nth-child(3){text-align:left;}
.fa-bt tbody tr:hover{background:var(--surface-soft);}

/* chips & arch */
.fa-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;border:1px solid var(--line-soft);}
.fa-chip.acc{color:#0a7d33;background:rgba(16,185,129,.10);border-color:rgba(16,185,129,.30);}
.fa-chip.dist{color:#b42318;background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.30);}
.fa-chip.neu{color:var(--ink-3);background:var(--surface-soft);}
.fa-chip.warn{color:#92600a;background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.32);}
.fa-arch{font-weight:600;}
.fa-arch.acc{color:#0a7d33;}.fa-arch.dist{color:#b42318;}.fa-arch.scal{color:var(--ink-4);}.fa-arch.pm{color:#7c3aed;}
.fa-warn{color:#b45309;font-size:11px;}
.fa-pos{color:#0a7d33;}.fa-neg{color:#b42318;}

/* TLDR */
.fa-status-badge{display:inline-flex;align-items:center;gap:7px;font-size:18px;font-weight:700;padding:6px 14px;border-radius:10px;}
.fa-status-badge.acc{color:#0a7d33;background:rgba(16,185,129,.12);}
.fa-status-badge.dist{color:#b42318;background:rgba(239,68,68,.12);}
.fa-status-badge.neu{color:var(--ink-2);background:var(--surface-soft);}
.fa-narr{font-size:14px;line-height:1.6;color:var(--ink-1);margin-top:12px;}
.fa-narr-src{font-size:10.5px;color:var(--ink-4);text-transform:uppercase;letter-spacing:.06em;margin-top:8px;}
.fa-narr-pending{color:var(--accent,#3b82f6);animation:fa-pulse 1.4s ease-in-out infinite;}
@keyframes fa-pulse{0%,100%{opacity:.45}50%{opacity:1}}

/* phases */
.fa-phase-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:13px;}
.fa-phase-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}

/* signals */
.fa-sig-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
.fa-sig{background:var(--surface-soft);border:1px solid var(--line-soft);border-radius:10px;padding:12px 14px;}
.fa-sig .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-4);}
.fa-sig .v{font-size:15px;font-weight:600;color:var(--ink-1);margin-top:3px;font-variant-numeric:tabular-nums;}

/* chart hover tooltip */
.fa-tt{position:absolute;z-index:60;pointer-events:none;background:var(--surface);border:1px solid var(--line-soft);border-radius:8px;padding:8px 10px;font-size:11.5px;box-shadow:0 6px 20px rgba(0,0,0,.18);min-width:150px;}
.fa-tt-date{font-weight:600;color:var(--ink-1);margin-bottom:5px;font-size:11px;}
.fa-tt-row{display:flex;justify-content:space-between;gap:16px;line-height:1.65;color:var(--ink-2);font-variant-numeric:tabular-nums;}
.fa-tt-row i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;}
.fa-tt-row b{color:var(--ink-1);font-weight:600;}

/* legend */
.fa-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:11.5px;color:var(--ink-3);}
.fa-legend span{display:inline-flex;align-items:center;gap:5px;}
.fa-legend i{width:14px;height:3px;border-radius:2px;display:inline-block;}

/* per-broker buy/sell two-column */
.fab-tables{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.fab-tables h3{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;}
.fab-tables h3.buy{color:#0a7d33;}.fab-tables h3.sell{color:#b42318;}
@media(max-width:760px){.fab-tables{grid-template-columns:1fr;}}

/* skeleton + states */
.fa-skel{background:linear-gradient(90deg,var(--surface-soft) 25%,var(--line-soft) 37%,var(--surface-soft) 63%);background-size:400% 100%;animation:fa-shimmer 1.4s ease infinite;border-radius:8px;}
@keyframes fa-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion: reduce){.fa-skel{animation:none}.fa-seg button,.fa-back,.fa-scanner tbody tr{transition:none}}
.fa-empty{color:var(--ink-3);font-size:13px;text-align:center;padding:24px;}
.fa-risk{font-size:12.5px;line-height:1.6;color:var(--ink-3);}
@media(max-width:640px){.fa-toolbar{gap:10px}.fa-pricenow{margin-left:0;width:100%}}

/* ── 5-day inflow strip (net asing) — 2026-05-23 ───────────────────────────── */
.fa-flat{color:var(--ink-4);}
.fa-flow5-wrap{overflow-x:auto;}
table.fa-flow5{width:100%;border-collapse:collapse;font-size:12.5px;}
.fa-flow5 th{text-align:center;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-4);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line-soft);white-space:nowrap;}
.fa-flow5 th:first-child{text-align:left;}
.fa-flow5 td{padding:7px 8px;border-bottom:1px solid var(--line-soft);text-align:center;font-variant-numeric:tabular-nums;}
.fa-flow5 td:first-child{text-align:left;}
.fa-flow5 th.fa-d,.fa-flow5 td.fa-d{min-width:46px;}
.fa-flow5 th.fa-d{color:var(--ink-3);}
.fa-d-date{display:block;font-size:8.5px;color:var(--ink-4);font-weight:400;letter-spacing:0;margin-top:1px;}
.fa-flow5 tbody tr{cursor:pointer;transition:background .15s;}
.fa-flow5 tbody tr:hover{background:var(--surface-soft);}
.fa-flow5 tbody tr:focus-visible{outline:2px solid #10b981;outline-offset:-2px;}
.fa-muted{color:var(--ink-4);}

/* inline expand: 5-day breakdown */
.fa-flow5-detail td{padding:0 !important;background:var(--surface-soft);}
.fa-flow5-detail-box{padding:12px 14px;}
.fa-f5d-head{font-size:12.5px;font-weight:650;color:var(--ink-1);margin-bottom:4px;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;}
.fa-f5d-link{font-size:11.5px;font-weight:500;color:#10b981;text-decoration:none;}
.fa-f5d-link:hover{text-decoration:underline;}
.fa-f5d-why{font-size:11px;color:var(--ink-3);line-height:1.6;margin-bottom:10px;}
.fa-f5d-day{padding:8px 0;border-top:1px solid var(--line-soft);}
.fa-f5d-day:first-of-type{border-top:0;}
.fa-f5d-date{font-size:11px;font-weight:650;color:var(--ink-1);margin-bottom:4px;font-variant-numeric:tabular-nums;}
.fa-f5d-types{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:5px;}
.fa-tnet{font-size:11.5px;}
.fa-tnet .lbl{color:var(--ink-3);}
.fa-f5d-brokers{font-size:11px;color:var(--ink-2);line-height:1.9;}
.fa-bchip{display:inline-block;font-size:10.5px;padding:1px 6px;margin:1px 2px;border-radius:5px;font-variant-numeric:tabular-nums;border:1px solid var(--line-soft);}
.fa-bchip.buy{color:#0a7d33;background:rgba(16,185,129,.08);}
.fa-bchip.sell{color:#b42318;background:rgba(239,68,68,.08);}
@media (prefers-reduced-motion:reduce){.fa-flow5 tbody tr{transition:none;}}

/* ── Flow Summary (bar charts) + Broker Trend (heatmap) — 2026-05-23 ────────── */
/* shared hover tooltip */
.fa-tip{position:fixed;z-index:9999;pointer-events:none;background:#111827;color:#fff;font-size:11.5px;
  line-height:1.45;padding:7px 10px;border-radius:7px;max-width:260px;box-shadow:0 6px 20px rgba(0,0,0,.25);}
.fa-tip b{color:#fff;font-weight:650;}

/* flow summary */
.fa-fs-ctrl{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.fa-select{padding:6px 10px;background:var(--surface-soft);border:1px solid var(--line-soft);color:var(--ink-1);
  border-radius:8px;font-size:12px;min-height:32px;cursor:pointer;}
.fa-fs-charts{display:flex;flex-direction:column;gap:14px;margin-top:6px;}
.fa-fs-chart{}
.fa-fs-h{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:3px;}
.fa-fs-h b{font-variant-numeric:tabular-nums;font-size:12.5px;}
.fa-fs-svg{width:100%;height:96px;display:block;}
.fa-fs-axis{stroke:var(--line-soft);stroke-width:1;}
.fa-bar{transition:opacity .12s;}
.fa-bar.pos{fill:#16a34a;}
.fa-bar.neg{fill:#dc2626;}
.fa-bar:hover{opacity:.65;}

/* broker trend heatmap */
.fa-hm-wrap{overflow-x:auto;}
.fa-hm{display:flex;flex-direction:column;gap:3px;min-width:560px;margin-top:4px;}
.fa-hm-row{display:flex;align-items:center;gap:8px;}
.fa-hm-label{width:34px;flex:0 0 34px;font-size:11px;font-weight:650;color:var(--ink-1);text-align:right;cursor:default;}
.fa-hm-cells{display:flex;gap:2px;flex:1;}
.fa-hm-cell{flex:1;min-width:12px;height:17px;border-radius:3px;background:var(--ink-4);cursor:default;transition:transform .1s;}
.fa-hm-cell.acc{background:#16a34a;}
.fa-hm-cell.dist{background:#dc2626;}
.fa-hm-cell.neu{background:var(--ink-4);}
.fa-hm-cell:hover{transform:scale(1.25);}
.fa-hm-tot{width:78px;flex:0 0 78px;text-align:right;font-size:11px;font-variant-numeric:tabular-nums;}
@media (prefers-reduced-motion:reduce){.fa-bar,.fa-hm-cell{transition:none;}}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM REDESIGN v8 — electric-blue fintech (Linear/Stripe/Vercel inspired)
   Scoped under .fa-page (added to all 3 Flow Analisis templates' .main).
   Glassmorphism cards · soft layered shadows · blue gradient accents.
   ═══════════════════════════════════════════════════════════════════════════ */
.fa-page{
  --fa-blue:#2563ff;--fa-blue-2:#3b6bff;--fa-blue-3:#1e4fe0;
  --fa-violet:#7c3aed;--fa-pos:#16a34a;--fa-neg:#dc2626;
  position:relative;
}
/* layered, blue-tinted background (full-bleed, behind content) */
.fa-page::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1000px 540px at 88% -10%, rgba(37,99,255,.09), transparent 60%),
    radial-gradient(780px 620px at -6% 110%, rgba(124,58,237,.07), transparent 55%),
    linear-gradient(180deg,#fcfdff 0%,#f5f7fc 46%,#eef2fb 100%);
}

/* elegant gradient italic in the serif page title */
.fa-page .page-head h1 em{
  font-style:italic;
  background:linear-gradient(120deg,var(--fa-blue) 0%,var(--fa-violet) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* header status badges → soft glass pills */
.fa-page .page-head .right .badge{
  background:rgba(255,255,255,.82);border:1px solid var(--line-soft);
  color:var(--ink-2);text-transform:none;letter-spacing:0;
  font-size:11px;font-weight:500;padding:6px 11px;border-radius:999px;
  box-shadow:0 1px 2px rgba(15,23,42,.05);backdrop-filter:blur(6px);
}
/* Sumber Data → light glass button with icon (blue reserved for active toggle) */
.fa-page #fa-cookies-btn{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.85);color:var(--ink-1);
  border:1px solid var(--line-soft);border-radius:11px;font-weight:500;padding:8px 14px;
  box-shadow:0 1px 2px rgba(15,23,42,.05);backdrop-filter:blur(6px);
  transition:all .15s var(--ease);
}
.fa-page #fa-cookies-btn:hover{border-color:var(--fa-blue);color:var(--fa-blue);}
.fa-page #fa-cookies-btn svg{width:14px;height:14px;}

/* ── glass card ── */
.fa-page .fa-card{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.82));
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.7);
  border-radius:22px;padding:22px 24px;margin-bottom:18px;
  box-shadow:
    0 0 0 1px rgba(15,23,42,.04),
    0 1px 0 rgba(255,255,255,.7) inset,
    0 24px 48px -28px rgba(15,23,42,.30),
    0 4px 12px -6px rgba(15,23,42,.08);
}

/* ── toolbar (detail/broker) glass + sticky ── */
.fa-page .fa-toolbar{
  background:rgba(255,255,255,.78);backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.7);border-radius:18px;
  box-shadow:0 0 0 1px rgba(15,23,42,.04),0 14px 32px -24px rgba(15,23,42,.25);
}

/* ── segmented control: electric-blue gradient active ── */
.fa-page .fa-seg{
  background:rgba(15,23,42,.045);border:1px solid rgba(15,23,42,.06);
  border-radius:14px;padding:4px;gap:3px;
}
.fa-page .fa-seg button{border-radius:11px;font-weight:500;color:var(--ink-3);padding:7px 14px;transition:all .2s var(--ease);}
.fa-page .fa-seg button:not(.active):hover{color:var(--ink-1);background:rgba(255,255,255,.75);}
.fa-page .fa-seg button.active{
  background:linear-gradient(135deg,var(--fa-blue),var(--fa-blue-2));color:#fff;
  box-shadow:0 8px 18px -8px rgba(37,99,255,.65),0 1px 0 rgba(255,255,255,.35) inset;
}
.fa-page .fa-seg button.active:hover{background:linear-gradient(135deg,var(--fa-blue),var(--fa-blue-2));}

/* ── status pills (soft gradient) ── */
.fa-page .fa-chip{padding:4px 11px;font-size:11px;border-radius:999px;font-weight:600;letter-spacing:.005em;}
.fa-page .fa-chip.acc{color:#047a3d;background:linear-gradient(180deg,#eafaf1,#d1fae5);border-color:rgba(4,122,61,.20);}
.fa-page .fa-chip.dist{color:#bc2716;background:linear-gradient(180deg,#fff1f1,#fee2e2);border-color:rgba(188,39,22,.20);}
.fa-page .fa-chip.neu{color:var(--ink-3);background:var(--surface-soft);border-color:var(--line-soft);}
.fa-page .fa-chip.warn{color:#92600a;background:linear-gradient(180deg,#fffbeb,#fef3c7);border-color:rgba(146,96,10,.22);}
.fa-l2bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 12px;}
.fa-peer-self{background:rgba(37,99,235,.07);}
.fa-peer-self td{font-weight:600;}
.fa-mktbanner{margin:0 0 14px;padding:12px 14px;border:1px solid var(--line-soft);border-radius:10px;background:var(--surface-soft);}
.fa-mkt-stance{font-weight:700;font-size:13.5px;color:var(--ink-1);margin-bottom:3px;}
.fa-mkt-stats{font-size:12px;color:var(--ink-3);}
.fa-mkt-stats b{font-variant-numeric:tabular-nums;}
.fa-field-hint{font-weight:400;font-size:10.5px;color:var(--ink-4);}

/* status badge (detail TL;DR) */
.fa-page .fa-status-badge.acc{background:linear-gradient(180deg,#eafaf1,#d1fae5);color:#047a3d;}
.fa-page .fa-status-badge.dist{background:linear-gradient(180deg,#fff1f1,#fee2e2);color:#bc2716;}

/* signal cards → soft neumorphic tiles */
.fa-page .fa-sig{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(248,250,252,.85));
  border:1px solid var(--line-soft);border-radius:14px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}

/* ── tables: softer separators + accent hover ── */
.fa-page .fa-flow5 thead th,.fa-page .fa-scanner th,.fa-page .fa-bt th{border-bottom:1px solid rgba(15,23,42,.07);}
.fa-page .fa-flow5 tbody td,.fa-page .fa-scanner td,.fa-page .fa-bt td{border-bottom:1px solid rgba(15,23,42,.045);}
.fa-page .fa-flow5 tbody tr,.fa-page .fa-scanner tbody tr{transition:background .16s var(--ease);}
.fa-page .fa-flow5 tbody tr:hover,.fa-page .fa-scanner tbody tr:hover{background:rgba(37,99,255,.05);}
.fa-page .fa-flow5 tbody tr:last-child td,.fa-page .fa-scanner tbody tr:last-child td{border-bottom:0;}

/* ── sparkline cell (5-day trend) ── */
.fa-spark-cell{width:84px;text-align:right;}
.fa-spark{display:inline-block;vertical-align:middle;}
.fa-spark-line{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.fa-spark-area{stroke:none;opacity:.13;}
.fa-spark.pos .fa-spark-line{stroke:var(--fa-pos);}.fa-spark.pos .fa-spark-area{fill:var(--fa-pos);}
.fa-spark.neg .fa-spark-line{stroke:var(--fa-neg);}.fa-spark.neg .fa-spark-area{fill:var(--fa-neg);}
.fa-spark.flat .fa-spark-line{stroke:var(--ink-4);}.fa-spark.flat .fa-spark-area{fill:var(--ink-4);}

/* ── list footer: pagination + export ── */
.fa-listfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:16px;}
.fa-pager{display:inline-flex;align-items:center;gap:4px;}
.fa-pager button{
  min-width:33px;height:33px;padding:0 9px;border:1px solid var(--line-soft);
  background:rgba(255,255,255,.72);color:var(--ink-2);border-radius:10px;
  font-size:12.5px;font-weight:500;cursor:pointer;font-family:var(--font-body);
  transition:all .15s var(--ease);font-variant-numeric:tabular-nums;
}
.fa-pager button:hover:not(:disabled):not(.active){border-color:var(--fa-blue);color:var(--fa-blue);}
.fa-pager button.active{
  background:linear-gradient(135deg,var(--fa-blue),var(--fa-blue-2));color:#fff;border-color:transparent;
  box-shadow:0 7px 16px -7px rgba(37,99,255,.6);
}
.fa-pager button:disabled{opacity:.4;cursor:default;}
.fa-pager .fa-ellip{color:var(--ink-4);padding:0 3px;font-size:13px;}
.fa-export{
  display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:11px;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.82);color:var(--ink-1);
  font-size:12.5px;font-weight:500;cursor:pointer;font-family:var(--font-body);
  transition:all .15s var(--ease);
}
.fa-export:hover{border-color:var(--fa-blue);color:var(--fa-blue);box-shadow:0 7px 18px -9px rgba(37,99,255,.45);transform:translateY(-1px);}
.fa-export svg{width:15px;height:15px;}
.fa-listfoot .fa-sub{margin:0;}

@media (prefers-reduced-motion:reduce){
  .fa-page #fa-cookies-btn,.fa-page .fa-seg button,.fa-export,.fa-pager button{transition:none;}
  .fa-page #fa-cookies-btn:hover,.fa-export:hover{transform:none;}
}
@media(max-width:640px){.fa-page .fa-card{padding:18px 16px;border-radius:18px;}.fa-listfoot{justify-content:center;}}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM REDESIGN v9 — full-width layout, colored status pills + icons,
   star favorites, status icons, detail multi-panel grid.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── FULL-WIDTH: drop the 1280px center cap on Flow Analisis pages ── */
.main.fa-page{max-width:none;padding-left:44px;padding-right:44px;}
@media(max-width:1024px){.main.fa-page{padding-left:20px;padding-right:20px;}}

/* ── header status pills: colored + iconed ── */
.fa-page .page-head .right .fa-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  padding:6px 11px;border-radius:999px;border:1px solid transparent;
  backdrop-filter:blur(6px);line-height:1.2;
}
.fa-page .page-head .right .fa-pill svg{width:13px;height:13px;flex-shrink:0;}
.fa-page .page-head .right .fa-pill.fa-pill-ok{background:linear-gradient(180deg,#eafaf1,#d1fae5);color:#047a3d;border-color:rgba(4,122,61,.22);}
.fa-page .page-head .right .fa-pill.fa-pill-warn{background:linear-gradient(180deg,#fef6e3,#fef3c7);color:#b25700;border-color:rgba(178,87,0,.22);}
.fa-page .page-head .right .fa-pill.fa-pill-bad{background:linear-gradient(180deg,#fff1f1,#fee2e2);color:#bc2716;border-color:rgba(188,39,22,.22);}

/* ── toggle + chip icons ── */
.fa-page .fa-seg button{display:inline-flex;align-items:center;gap:6px;}
.fa-page .fa-seg button svg{width:14px;height:14px;flex-shrink:0;}
.fa-page .fa-chip svg{width:12px;height:12px;flex-shrink:0;}

/* ── star favorite column ── */
.fa-star-col{width:30px;padding-left:14px !important;padding-right:0 !important;text-align:center;}
.fa-star{cursor:pointer;color:var(--ink-4);display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:7px;transition:color .15s var(--ease),background .15s var(--ease);}
.fa-star svg{width:15px;height:15px;}
.fa-star:hover{color:#f59e0b;background:rgba(245,158,11,.10);}
.fa-star.on{color:#f59e0b;}
.fa-star.on svg{fill:#f59e0b;}
.fa-page .fa-flow5 tbody tr.fav td{background:linear-gradient(90deg,rgba(245,158,11,.05),transparent 40%);}

/* ── sparkline cell tinted background by direction ── */
.fa-spark-cell.pos{background:linear-gradient(180deg,rgba(22,163,74,.07),rgba(22,163,74,.03));}
.fa-spark-cell.neg{background:linear-gradient(180deg,rgba(220,38,38,.07),rgba(220,38,38,.03));}
.fa-spark-cell.pos,.fa-spark-cell.neg,.fa-spark-cell.flat{border-radius:8px;}

/* ── footer gear button (next to Export CSV) ── */
.fa-gear{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.82);color:var(--ink-3);
  border-radius:11px;cursor:pointer;transition:all .15s var(--ease);margin-left:8px;
}
.fa-gear:hover{border-color:var(--fa-blue);color:var(--fa-blue);transform:translateY(-1px);}
.fa-gear svg{width:16px;height:16px;}
.fa-foot-actions{display:inline-flex;align-items:center;}

/* ═══ DETAIL PAGE: multi-panel responsive grid (like 20.27.38 mockup) ═══ */
.fa-detail-grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start;padding:0;}
.fa-detail-grid > .fa-card{margin-bottom:0;}
.fa-detail-grid > .fa-toolbar{margin-bottom:0;}
.fa-col-span2{grid-column:1 / -1;}
@media(max-width:1180px){.fa-detail-grid{grid-template-columns:1fr;}.fa-col-span2{grid-column:auto;}}

@media (prefers-reduced-motion:reduce){.fa-star,.fa-gear:hover{transition:none;transform:none;}}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM REDESIGN v10 — DATA-DENSE DASHBOARD (ui-ux-pro-max: financial analytics)
   Replaces ornate glass with a clean, space-efficient analytics surface.
   Skill tokens: padding 12-16px · row ~40px · font 12-14px · blue #1E40AF + amber #F59E0B.
   Adds KPI cards, functional search + status filter, sortable headers.
   ═══════════════════════════════════════════════════════════════════════════ */
.fa-page{--fa-blue:#1e40af;--fa-blue-2:#3b82f6;--fa-amber:#f59e0b;--fa-pos:#16a34a;--fa-neg:#dc2626;}

/* calmer background (de-ornate) */
.fa-page::before{
  background:
    radial-gradient(900px 360px at 100% -12%, rgba(59,130,246,.05), transparent 62%),
    linear-gradient(180deg,#fbfcfe 0%,#f6f8fc 100%);
}
/* clean, flat cards — no heavy blur/shadow */
.fa-page .fa-card{
  background:#fff;border:1px solid var(--line-soft);border-radius:14px;
  padding:16px 18px;margin-bottom:14px;
  box-shadow:0 1px 2px rgba(15,23,42,.05);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.fa-page .fa-toolbar{
  background:#fff;border:1px solid var(--line-soft);border-radius:12px;
  box-shadow:0 1px 2px rgba(15,23,42,.05);backdrop-filter:none;-webkit-backdrop-filter:none;
}
.fa-detail-grid > .fa-card,.fa-detail-grid > .fa-toolbar{margin-bottom:0;}

/* deeper-blue active states */
.fa-page .fa-seg button.active,.fa-page .fa-seg button.active:hover{
  background:linear-gradient(135deg,var(--fa-blue),var(--fa-blue-2));
  box-shadow:0 4px 10px -5px rgba(30,64,175,.55),0 1px 0 rgba(255,255,255,.3) inset;
}
.fa-page .fa-pager button.active{background:linear-gradient(135deg,var(--fa-blue),var(--fa-blue-2));box-shadow:0 4px 10px -5px rgba(30,64,175,.5);}

/* compact header pills */
.fa-page .page-head .right .fa-pill{font-size:10px;padding:5px 9px;gap:5px;letter-spacing:.04em;}
.fa-page .page-head .right .fa-pill svg{width:12px;height:12px;}

/* ── KPI cards row ── */
.fa-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px;margin-bottom:14px;}
.fa-kpi{background:#fff;border:1px solid var(--line-soft);border-radius:12px;padding:12px 15px;position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.04);}
.fa-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--fa-blue-2);opacity:.55;}
.fa-kpi.pos::before{background:var(--fa-pos);}.fa-kpi.neg::before{background:var(--fa-neg);}
.fa-kpi-l{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-4);font-weight:600;}
.fa-kpi-v{font-size:21px;font-weight:600;font-family:var(--font-mono);margin-top:5px;letter-spacing:-.02em;color:var(--ink-1);font-variant-numeric:tabular-nums;line-height:1.1;}
.fa-kpi-v.fa-pos{color:var(--fa-pos);}.fa-kpi-v.fa-neg{color:var(--fa-neg);}
.fa-kpi-s{font-size:10.5px;color:var(--ink-3);margin-top:4px;}

/* ── search + status filter bar ── */
.fa-l2bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.fa-search{position:relative;display:inline-flex;align-items:center;}
.fa-search svg{position:absolute;left:11px;width:15px;height:15px;color:var(--ink-4);pointer-events:none;}
.fa-search input{padding:8px 12px 8px 34px;border:1px solid var(--line-soft);border-radius:10px;background:#fff;font-size:13px;font-family:var(--font-body);min-width:220px;color:var(--ink-1);transition:border-color .15s,box-shadow .15s;}
.fa-search input::placeholder{color:var(--ink-4);}
.fa-search input:focus{outline:none;border-color:var(--fa-blue-2);box-shadow:0 0 0 3px rgba(59,130,246,.13);}
.fa-statusfilter button[data-s="acc"].active,.fa-statusfilter button[data-s="acc"].active:hover{background:linear-gradient(135deg,#15803d,#16a34a);box-shadow:0 4px 10px -5px rgba(21,128,61,.5);}
.fa-statusfilter button[data-s="dist"].active,.fa-statusfilter button[data-s="dist"].active:hover{background:linear-gradient(135deg,#b91c1c,#dc2626);box-shadow:0 4px 10px -5px rgba(185,28,28,.5);}

/* ── sortable headers + tighter rows ── */
.fa-page .fa-flow5 th.fa-sortable{cursor:pointer;user-select:none;white-space:nowrap;transition:color .12s;}
.fa-page .fa-flow5 th.fa-sortable:hover{color:var(--fa-blue);}
.fa-page .fa-flow5 th.fa-sortable:focus-visible{outline:2px solid var(--fa-blue-2);outline-offset:-2px;border-radius:4px;}
.fa-sortarr{font-size:9px;margin-left:3px;color:var(--fa-blue);vertical-align:middle;}
.fa-page .fa-flow5 thead th{padding:8px 9px;}
.fa-page .fa-flow5 tbody td{padding:9px;}

/* Let the flex main-wrapper shrink so the table's overflow-x:auto wrapper can
   scroll internally instead of stretching the page (this CSS only loads on FA pages). */
.main-wrapper{min-width:0;}

/* ── mobile: stop header pill cluster from forcing horizontal scroll ── */
@media(max-width:760px){
  .fa-page .page-head{flex-wrap:wrap;}
  .fa-page .page-head .left{min-width:0;}
  .fa-page .page-head .right{flex-shrink:1;min-width:0;width:100%;justify-content:flex-start;}
  .fa-page .fa-l2bar{flex-direction:column;align-items:stretch;}
  .fa-page .fa-search input{width:100%;min-width:0;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   v11 — DETAIL PAGE: masonry-style 2-column stacks (no row-alignment gaps)
   Each column packs its cards tightly top-to-bottom; genuinely-wide panels
   (chart, broker table, risk) stay full-width below. Fixes the dead space a
   short card (Ringkasan) left next to a tall one (Rincian Harian).
   ═══════════════════════════════════════════════════════════════════════════ */
.fa-detail-grid{display:block;grid-template-columns:none;padding:0;}
.fa-detail-grid > .fa-toolbar,
.fa-detail-grid > .fa-card,
.fa-detail-grid > .fa-masonry{margin-bottom:14px;}
.fa-detail-grid > :last-child{margin-bottom:0;}
/* CSS multi-column = true masonry: browser auto-balances the two columns'
   heights, so no card leaves dead space below it. Wide panels (chart, broker
   table, risk) stay full-width OUTSIDE this container. */
.fa-masonry{columns:1;}
.fa-masonry > .fa-card{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;margin:0 0 14px;display:block;width:100%;}
@media(max-width:1180px){.fa-masonry{columns:1;}}

/* unit clarifier above the daily-flow table (D-4…D0 = miliar Rupiah) */
.fa-unit-note{display:flex;align-items:flex-start;gap:8px;background:rgba(59,130,246,.06);
  border:1px solid rgba(59,130,246,.18);border-radius:10px;padding:9px 12px;
  font-size:12px;color:var(--ink-2);line-height:1.5;margin-bottom:12px;}
.fa-unit-note svg{width:15px;height:15px;color:var(--fa-blue-2);flex-shrink:0;margin-top:1px;}
.fa-unit-note b{color:var(--ink-1);font-weight:600;}

/* per-cell unit suffix ("M" = miliar) — keeps each number self-documenting */
.fa-cu{font-size:.72em;color:var(--ink-4);margin-left:1px;font-weight:500;}
/* group header labelling the 5 daily columns */
.fa-page .fa-flow5 .fa-grouphdr th{border:0;padding:2px 9px;background:transparent;}
.fa-page .fa-flow5 .fa-grouphdr .fa-daygroup{
  font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fa-blue-2);text-align:center;
  border-bottom:2px solid rgba(59,130,246,.30);padding-bottom:3px;}

/* ═══════════════════════════════════════════════════════════════════════════
   v14 — SWISS TERMINAL  (Swiss Modernism 2.0 × Bloomberg terminal)
   Near-monochrome + ONE cobalt accent · hairlines not shadows · sharp corners
   (2–3px) · mono tabular numerals · uppercase grotesque labels · flat surfaces.
   This theme block intentionally overrides the earlier "premium"/glass styling.
   ═══════════════════════════════════════════════════════════════════════════ */
.fa-page{
  --fa-ink:#0a0a0a;--fa-grey:#5c5c5c;--fa-faint:#9a9a9a;
  --fa-line:#e4e4e4;--fa-line-2:#cdcdcd;--fa-bg:#f4f4f4;
  --fa-accent:#1a3aff;                 /* the single vibrant accent */
  --fa-pos:#0f7a3d;--fa-neg:#c81e1e;
  --fa-blue:#1a3aff;--fa-blue-2:#1a3aff;  /* remap legacy vars → accent */
}
.fa-page::before{display:none !important;}            /* kill AI gradient blobs */
.main.fa-page{background:var(--fa-bg);}

/* ── masthead: uppercase grotesque + strong section rule ── */
.fa-page .page-head{border-bottom:2px solid var(--fa-ink);padding-bottom:18px;}
.fa-page .page-head .eyebrow{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:var(--fa-grey);}
.fa-page .page-head h1{font-family:var(--font-body);font-weight:700;text-transform:uppercase;font-size:36px;letter-spacing:-.012em;line-height:1.04;color:var(--fa-ink);}
.fa-page .page-head h1 em{font-style:normal;color:var(--fa-accent);-webkit-text-fill-color:var(--fa-accent);background:none;-webkit-background-clip:border-box;background-clip:border-box;}
.fa-page .page-head .lede{color:var(--fa-grey);font-size:13px;}
.fa-page .fa-back{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;font-size:10px;color:var(--fa-grey);}
.fa-page .fa-back:hover{color:var(--fa-accent);}

/* ── flat hairline cards (no shadow, sharp) ── */
.fa-page .fa-card,.fa-page .fa-toolbar{background:#fff;border:1px solid var(--fa-line);border-radius:3px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
.fa-page .fa-h2{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.04em;font-size:13px;font-weight:700;color:var(--fa-ink);}
.fa-page .fa-sub{color:var(--fa-grey);}
.fa-page .fa-sig{background:#fff;border:1px solid var(--fa-line);border-radius:3px;box-shadow:none;}
.fa-page .fa-sig .k{font-family:var(--font-mono);letter-spacing:.1em;color:var(--fa-faint);}

/* ── KPI: tight hairline numeric band (no shadow, no colored bars) ── */
.fa-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-bottom:14px;
  border:1px solid var(--fa-line);border-radius:3px;overflow:hidden;background:#fff;}
.fa-kpi{border:0;border-left:1px solid var(--fa-line);border-radius:0;box-shadow:none;padding:14px 18px;}
.fa-kpi:first-child{border-left:0;}
.fa-kpi::before{display:none;}
.fa-kpi-l{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.11em;color:var(--fa-faint);}
.fa-kpi-v{font-family:var(--font-mono);font-weight:600;font-size:24px;color:var(--fa-ink);}
.fa-kpi-v.fa-pos{color:var(--fa-pos);}.fa-kpi-v.fa-neg{color:var(--fa-neg);}
.fa-kpi-s{font-family:var(--font-mono);font-size:10px;color:var(--fa-faint);}
@media(max-width:760px){
  .fa-kpis{grid-template-columns:repeat(2,1fr);}
  .fa-kpi:nth-child(odd){border-left:0;}
  .fa-kpi:nth-child(n+3){border-top:1px solid var(--fa-line);}
}

/* ── segmented controls: sharp, mono, solid accent active ── */
.fa-page .fa-seg{background:var(--fa-bg);border:1px solid var(--fa-line);border-radius:3px;padding:2px;}
.fa-page .fa-seg button{border-radius:2px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:500;color:var(--fa-grey);}
.fa-page .fa-seg button:not(.active):hover{background:#fff;color:var(--fa-ink);}
.fa-page .fa-seg button.active,.fa-page .fa-seg button.active:hover{background:var(--fa-accent);color:#fff;box-shadow:none;}
.fa-statusfilter button[data-s="acc"].active,.fa-statusfilter button[data-s="acc"].active:hover{background:var(--fa-pos);box-shadow:none;}
.fa-statusfilter button[data-s="dist"].active,.fa-statusfilter button[data-s="dist"].active:hover{background:var(--fa-neg);box-shadow:none;}

/* ── search, buttons, pager, pills: sharp + accent ── */
.fa-search input{border-radius:3px;font-family:var(--font-mono);}
.fa-search input:focus{border-color:var(--fa-accent);box-shadow:0 0 0 2px rgba(26,58,255,.18);}
.fa-page #fa-cookies-btn,.fa-export,.fa-gear{border-radius:3px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em;font-size:11px;}
.fa-page #fa-cookies-btn:hover,.fa-export:hover{border-color:var(--fa-accent);color:var(--fa-accent);transform:none;}
.fa-pager button{border-radius:3px;font-family:var(--font-mono);}
.fa-pager button:hover:not(:disabled):not(.active){border-color:var(--fa-accent);color:var(--fa-accent);}
.fa-pager button.active{background:var(--fa-accent);box-shadow:none;}
.fa-page .page-head .right .fa-pill{border-radius:3px;font-family:var(--font-mono);font-weight:600;}
.fa-page .page-head .right .fa-pill.fa-pill-ok{background:rgba(15,122,61,.10);color:var(--fa-pos);border-color:rgba(15,122,61,.30);}
.fa-page .page-head .right .fa-pill.fa-pill-warn{background:rgba(176,87,0,.10);color:#9a5b00;border-color:rgba(176,87,0,.30);}
.fa-page .page-head .right .fa-pill.fa-pill-bad{background:rgba(200,30,30,.09);color:var(--fa-neg);border-color:rgba(200,30,30,.28);}

/* ── status chips: sharp uppercase mono ── */
.fa-page .fa-chip{border-radius:3px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em;font-size:10px;font-weight:600;}
.fa-page .fa-chip.acc{background:rgba(15,122,61,.10);color:var(--fa-pos);border-color:rgba(15,122,61,.30);}
.fa-page .fa-chip.dist{background:rgba(200,30,30,.09);color:var(--fa-neg);border-color:rgba(200,30,30,.28);}
.fa-page .fa-chip.mixed{background:rgba(176,124,8,.10);color:#9a6a00;border-color:rgba(176,124,8,.30);}
.fa-page .fa-status-badge{border-radius:3px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.03em;}
.fa-page .fa-status-badge.acc{background:rgba(15,122,61,.10);color:var(--fa-pos);}
.fa-page .fa-status-badge.dist{background:rgba(200,30,30,.09);color:var(--fa-neg);}

/* ── data table: hairline grid, mono numerals, uppercase headers ── */
.fa-page .fa-flow5,.fa-page .fa-bt,.fa-page .fa-scanner table{font-family:var(--font-mono);font-size:12px;}
.fa-page .fa-flow5 thead th,.fa-page .fa-bt th,.fa-page .fa-scanner th{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--fa-faint);font-size:9.5px;border-bottom:1px solid var(--fa-line-2);}
.fa-page .fa-flow5 tbody td,.fa-page .fa-scanner td{border-bottom:1px solid var(--fa-line);}
.fa-page .fa-flow5 td strong,.fa-page .fa-scanner td strong{font-family:var(--font-body);font-weight:700;letter-spacing:0;}
.fa-page .fa-flow5 tbody tr:hover,.fa-page .fa-scanner tbody tr:hover{background:var(--fa-bg);}
.fa-page .fa-flow5 th.fa-sortable:hover{color:var(--fa-accent);}
.fa-sortarr{color:var(--fa-accent);}
.fa-page .fa-d-date{color:var(--fa-faint);}
.fa-flat{color:var(--fa-faint);}
.fa-pos{color:var(--fa-pos);}.fa-neg{color:var(--fa-neg);}
.fa-cu{color:var(--fa-faint);}
.fa-page .fa-flow5 .fa-grouphdr .fa-daygroup{color:var(--fa-accent);border-bottom-color:var(--fa-accent);}

/* ── sparkline: flat line, no fill/tint (Swiss restraint) ── */
.fa-spark-cell.pos,.fa-spark-cell.neg,.fa-spark-cell.flat{background:none;}
.fa-spark-area{display:none;}
.fa-spark.pos .fa-spark-line{stroke:var(--fa-pos);}
.fa-spark.neg .fa-spark-line{stroke:var(--fa-neg);}
.fa-spark.flat .fa-spark-line{stroke:var(--fa-faint);}

/* ── misc sharp corners + accent ── */
.fa-unit-note{border-radius:3px;background:var(--fa-bg);border-color:var(--fa-line);color:var(--fa-grey);}
.fa-unit-note svg{color:var(--fa-accent);}
.fa-page .fa-skel{border-radius:3px;}
.fa-arch.pm{color:var(--fa-accent);}.fa-arch.acc{color:var(--fa-pos);}.fa-arch.dist{color:var(--fa-neg);}

/* ═══════════════════════════════════════════════════════════════════════════
   v18 — FULL-PAGE: user wants no left/right dead space. Remove the 1360px cap;
   content fills the viewport (side padding from .main.fa-page rule above).
   Type sizes & row height bumped below so the wider layout still reads well.
   ═══════════════════════════════════════════════════════════════════════════ */
.main.fa-page{max-width:none;margin-left:0;margin-right:0;}

/* bigger, more legible type */
.fa-page .page-head h1{font-size:40px;}
.fa-page .page-head .lede{font-size:14px;}
.fa-page .fa-sub{font-size:12.5px;}
.fa-page .fa-h2{font-size:14px;}
.fa-unit-note{font-size:12.5px;}
.fa-page .fa-seg button{font-size:12px;}
.fa-search input{font-size:13.5px;}

/* KPI band — larger numbers + labels */
.fa-kpi{padding:16px 20px;}
.fa-kpi-l{font-size:10.5px;}
.fa-kpi-v{font-size:28px;}
.fa-kpi-s{font-size:11px;}

/* data table — bigger cells, taller rows, clearer headers */
.fa-page .fa-flow5,.fa-page .fa-bt,.fa-page .fa-scanner table{font-size:13.5px;}
.fa-page .fa-flow5 thead th,.fa-page .fa-bt th,.fa-page .fa-scanner th{font-size:10.5px;}
.fa-page .fa-flow5 .fa-grouphdr .fa-daygroup{font-size:10.5px;}
.fa-page .fa-flow5 tbody td,.fa-page .fa-bt tbody td,.fa-page .fa-scanner tbody td{font-size:13.5px;}
.fa-page .fa-flow5 tbody td{padding:12px 10px;}
.fa-page .fa-flow5 thead th{padding:9px 10px;}
.fa-cu{font-size:.82em;}
.fa-page .fa-chip{font-size:11px;padding:5px 10px;}
.fa-page .fa-status-badge{font-size:16px;}

/* bigger sparkline */
.fa-spark{width:104px;height:30px;}
.fa-spark-cell{width:120px;}

@media(max-width:1024px){.main.fa-page{max-width:none;}}

/* ── divergence filter row (search left · div-select + status chips right) ── */
.fa-l2right{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;}
.fa-page .fa-select{
  border-radius:3px;font-family:var(--font-mono);font-size:11.5px;
  background:#fff;border:1px solid var(--fa-line);color:var(--fa-ink);
  padding:7px 10px;min-height:34px;cursor:pointer;
}
.fa-page .fa-select:focus{outline:none;border-color:var(--fa-accent);box-shadow:0 0 0 2px rgba(26,58,255,.18);}

/* ── Konviksi Smart Money (detail) ── */
.fa-conv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}
.fa-conv{border:1px solid var(--fa-line);border-radius:3px;padding:13px 15px;background:#fff;}
.fa-conv-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px;}
.fa-conv-code{font-family:var(--font-body);font-weight:700;font-size:15px;color:var(--fa-ink);}
.fa-conv-name{font-size:11px;color:var(--fa-grey);font-family:var(--font-body);}
.fa-conv-grp{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em;padding:2px 6px;border-radius:2px;background:var(--fa-bg);color:var(--fa-grey);border:1px solid var(--fa-line);}
.fa-conv-rows{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-family:var(--font-mono);font-size:12px;}
.fa-conv-rows .k{color:var(--fa-faint);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;align-self:center;}
.fa-conv-rows .v{text-align:right;color:var(--fa-ink);font-variant-numeric:tabular-nums;}
.fa-conv-beh{margin-top:9px;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.03em;padding:5px 9px;border-radius:3px;display:inline-block;font-weight:600;}
.fa-conv-beh.acc{background:rgba(15,122,61,.10);color:var(--fa-pos);}
.fa-conv-beh.dist{background:rgba(200,30,30,.09);color:var(--fa-neg);}
.fa-conv-beh.neu{background:var(--fa-bg);color:var(--fa-grey);}

/* ── Smart Money flag (detail) + Broker Leaderboard (list) ── */
.fa-flag{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--fa-line);border-left-width:3px;border-radius:3px;margin:4px 0 12px;background:#fff;}
.fa-flag.acc{border-left-color:var(--fa-pos);background:rgba(15,122,61,.05);}
.fa-flag.dist{border-left-color:var(--fa-neg);background:rgba(200,30,30,.05);}
.fa-flag.neu{border-left-color:var(--fa-grey);}
.fa-flag-dot{font-size:15px;line-height:1;}
.fa-flag-lbl{font-family:var(--font-body);font-weight:700;font-size:15px;color:var(--fa-ink);}
.fa-flag-rows{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:720px){.fa-flag-rows{grid-template-columns:1fr;}}
.fa-flag-k{display:block;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.fa-bchips{display:flex;flex-wrap:wrap;gap:6px;}
.fa-bchip{font-family:var(--font-mono);font-size:11px;padding:4px 8px;border-radius:3px;border:1px solid var(--fa-line);background:var(--fa-bg);color:var(--fa-ink);font-variant-numeric:tabular-nums;}
.fa-bchip.pos{border-color:rgba(15,122,61,.35);}
.fa-bchip.neg{border-color:rgba(200,30,30,.30);}
.fa-bchip em{font-style:normal;color:var(--fa-grey);}
.fa-bchip b{color:var(--fa-ink);}
/* leaderboard table */
.fa-lb-h{font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;margin:0 0 8px;}
table.fa-lb{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:12.5px;}
table.fa-lb th{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--fa-faint);text-align:left;padding:8px 10px;border-bottom:1px solid var(--fa-line);font-weight:600;}
table.fa-lb td{padding:9px 10px;border-bottom:1px solid var(--fa-line);font-variant-numeric:tabular-nums;vertical-align:top;}
.fa-q{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.04em;padding:1px 5px;border-radius:2px;border:1px solid var(--fa-line);}
.fa-q.diversifikasi{color:var(--fa-pos);border-color:rgba(15,122,61,.35);}
.fa-q.terkonsentrasi{color:var(--fa-neg);border-color:rgba(200,30,30,.30);}
.fa-q.sedang{color:var(--fa-grey);}
/* track record per-broker di saham ini (deskripsi tambahan) */
.fa-tr{margin-top:14px;padding-top:12px;border-top:1px solid var(--fa-line);}
.fa-tr-h{font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--fa-ink);margin-bottom:8px;line-height:1.4;}
table.fa-trtbl{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:12.5px;}
table.fa-trtbl th{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--fa-faint);text-align:left;padding:7px 10px;border-bottom:1px solid var(--fa-line);font-weight:600;}
table.fa-trtbl td{padding:8px 10px;border-bottom:1px solid var(--fa-line);font-variant-numeric:tabular-nums;vertical-align:top;}
table.fa-trtbl th.num,table.fa-trtbl td.num{text-align:right;white-space:nowrap;}
.fa-tr-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
.fa-tr-badge{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.04em;padding:1px 5px;border-radius:2px;border:1px solid var(--fa-line);}
.fa-tr-badge.buy{color:var(--fa-pos);border-color:rgba(15,122,61,.35);background:rgba(15,122,61,.07);}
.fa-tr-badge.andal{color:var(--fa-pos);border-color:rgba(15,122,61,.35);background:rgba(15,122,61,.07);}
.fa-tr-badge.lawan{color:var(--fa-neg);border-color:rgba(200,30,30,.32);background:rgba(200,30,30,.06);}
.fa-tr-badge.lemah,.fa-tr-badge.sm{color:var(--fa-grey);}