/* ============================================================
   MARKET WATCH — Purposium edition
   Calm, professional, trustworthy financial dashboard.
   Blue/navy core · functional green-amber-coral signals
   Light + Dark · Plus Jakarta Sans
   ============================================================ */

/* ---------- FONT ---------- */
@font-face{font-family:"Plus Jakarta Sans";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/PlusJakartaSans-Regular.ttf") format("truetype");}
@font-face{font-family:"Plus Jakarta Sans";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/PlusJakartaSans-Medium.ttf") format("truetype");}
@font-face{font-family:"Plus Jakarta Sans";font-weight:600;font-style:normal;font-display:swap;src:url("fonts/PlusJakartaSans-SemiBold.ttf") format("truetype");}
@font-face{font-family:"Plus Jakarta Sans";font-weight:700;font-style:normal;font-display:swap;src:url("fonts/PlusJakartaSans-Bold.ttf") format("truetype");}
@font-face{font-family:"Plus Jakarta Sans";font-weight:800;font-style:normal;font-display:swap;src:url("fonts/PlusJakartaSans-ExtraBold.ttf") format("truetype");}

/* ============================================================
   TOKENS — LIGHT (default)
   ============================================================ */
:root{
  --font-sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* surfaces — Purposium light (blue-tinted) */
  --bg:#F2F4FC;
  --bg-tint:#E9EBFF;
  --raised:#FFFFFF;
  --raised-2:#F7F9FF;
  --inset:#EAEDFB;

  /* brand — Purposium Blue + Navy */
  --brand:#3965FA;
  --brand-deep:#1B1B39;
  --brand-soft:#E0E7FF;
  --cream:#E9EBFF;

  /* text — navy ink */
  --fg:#1B1B39;
  --fg-muted:#494C6B;
  --fg-subtle:#7E82A0;
  --on-brand:#FFFFFF;

  /* lines */
  --line:#E2E5F2;
  --line-strong:#CDD2E6;
  --hair:rgba(27,27,57,.08);

  /* signals — secondary functional palette */
  --up:#8CC63E;            /* green — naik / baik */
  --up-ink:#5E8C1E;
  --up-bg:rgba(140,198,62,.15);
  --up-bg-strong:rgba(140,198,62,.26);
  --down:#FF6D47;          /* coral red — turun / fear / avoid */
  --down-ink:#D8462A;
  --down-bg:rgba(255,109,71,.14);
  --down-bg-strong:rgba(255,109,71,.24);
  --warn:#FFD16B;          /* amber — netral / hati-hati */
  --warn-ink:#9A6A12;
  --warn-bg:rgba(255,209,107,.22);
  --warn-bg-strong:rgba(255,209,107,.36);
  --neutral:#7E82A0;
  --neutral-bg:rgba(126,130,160,.12);

  /* gauge ramp (fear → greed) */
  --ramp-1:#FF6D47;
  --ramp-2:#FFD16B;
  --ramp-3:#E0FFB7;
  --ramp-4:#8CC63E;
  --ramp-5:#215452;
  --needle:#1B1B39;

  /* elevation — warm tint */
  --sh-xs:0 1px 2px rgba(45,42,30,.06);
  --sh-sm:0 2px 10px rgba(45,42,30,.07);
  --sh-md:0 8px 26px rgba(45,42,30,.10);
  --sh-lg:0 18px 50px rgba(45,42,30,.15);
  --sh-up:0 10px 30px rgba(45,42,30,.13);

  /* radii */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.45,0,.25,1);
  --dur-fast:130ms; --dur:240ms; --dur-slow:420ms;

  color-scheme:light;
}

/* ============================================================
   TOKENS — DARK (warm olive, late-afternoon shadow)
   ============================================================ */
:root[data-theme="dark"]{
  --bg:#15152E;
  --bg-tint:#1B1B39;
  --raised:#222247;
  --raised-2:#2A2A55;
  --inset:#1C1C3D;

  --brand:#99B7FC;
  --brand-deep:#1B1B39;
  --brand-soft:#2A2A55;
  --cream:#E9EBFF;

  --fg:#ECEEFB;
  --fg-muted:#AAAECE;
  --fg-subtle:#7C80A2;
  --on-brand:#FFFFFF;

  --line:#2E2E55;
  --line-strong:#3E3E6E;
  --hair:rgba(0,0,0,.30);

  --up:#8CC63E;
  --up-ink:#AEDD72;
  --up-bg:rgba(140,198,62,.16);
  --up-bg-strong:rgba(140,198,62,.28);
  --down:#FF6D47;
  --down-ink:#FF8E72;
  --down-bg:rgba(255,109,71,.16);
  --down-bg-strong:rgba(255,109,71,.30);
  --warn:#FFD16B;
  --warn-ink:#FFDD8C;
  --warn-bg:rgba(255,209,107,.16);
  --warn-bg-strong:rgba(255,209,107,.28);
  --neutral:#8E92B4;
  --neutral-bg:rgba(142,146,180,.16);

  --ramp-1:#FF6D47;
  --ramp-2:#FFD16B;
  --ramp-3:#E0FFB7;
  --ramp-4:#8CC63E;
  --ramp-5:#215452;
  --needle:#ECEEFB;

  --sh-xs:0 1px 2px rgba(0,0,0,.4);
  --sh-sm:0 2px 12px rgba(0,0,0,.45);
  --sh-md:0 10px 30px rgba(0,0,0,.5);
  --sh-lg:0 22px 56px rgba(0,0,0,.6);
  --sh-up:0 14px 36px rgba(0,0,0,.55);

  color-scheme:dark;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
::selection{background:var(--brand);color:var(--on-brand)}
a{color:inherit}

.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
@media(max-width:560px){.wrap{padding:0 16px}}

/* ============================================================
   TYPE
   ============================================================ */
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-subtle);
}
.display{font-size:clamp(31px,4.4vw,43px);font-weight:800;line-height:1.06;letter-spacing:-.02em}
.h1{font-size:clamp(23px,2.6vw,29px);font-weight:700;line-height:1.18;letter-spacing:-.01em}
.h2{font-size:21px;font-weight:700;line-height:1.3;letter-spacing:-.005em}
.lead{font-size:18px;line-height:1.6;color:var(--fg-muted)}
.muted{color:var(--fg-muted)}
.subtle{color:var(--fg-subtle)}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ============================================================
   HEADER
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.brand{display:flex;align-items:center;gap:13px;min-width:0}
.brand .mono{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:var(--brand);box-shadow:var(--sh-xs)}
.brand .mono img{width:26px;height:26px;display:block}
.brand .txt{min-width:0}
.brand .name{font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .name b{color:var(--brand)}
.brand .tag{font-size:12.5px;color:var(--fg-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:560px){.brand .tag{display:none}}

.topbar-right{display:flex;align-items:center;gap:14px;flex:none}
.updated{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.updated .lbl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-subtle)}
.updated .val{font-size:13.5px;font-weight:600;color:var(--fg-muted)}
.updated .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--up);margin-right:6px;
  box-shadow:0 0 0 0 var(--up-bg-strong);animation:pulse 2.4s var(--ease-io) infinite}
@media(max-width:680px){.updated{display:none}}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--up-bg-strong)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* theme toggle */
.theme-toggle{
  width:62px;height:34px;border-radius:var(--r-pill);border:1px solid var(--line-strong);
  background:var(--inset);position:relative;cursor:pointer;flex:none;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.theme-toggle .knob{
  position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;
  background:var(--raised);box-shadow:var(--sh-sm);display:grid;place-items:center;
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
:root[data-theme="dark"] .theme-toggle .knob{transform:translateX(28px)}
.theme-toggle svg{width:15px;height:15px;color:var(--brand);transition:opacity var(--dur) var(--ease)}
.theme-toggle .ic-sun{opacity:1}
.theme-toggle .ic-moon{opacity:0;position:absolute}
:root[data-theme="dark"] .theme-toggle .ic-sun{opacity:0}
:root[data-theme="dark"] .theme-toggle .ic-moon{opacity:1}

/* ============================================================
   STATUS RIBBON + TABS
   ============================================================ */
.ribbon{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:18px 0 4px}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--r-pill);
  font-size:13px;font-weight:700;letter-spacing:.01em;border:1px solid transparent;white-space:nowrap;
}
.chip .ic{width:14px;height:14px}
.chip.date{background:var(--inset);color:var(--fg-muted);border-color:var(--line)}
.chip.regime{background:var(--warn-bg);color:var(--warn-ink);border-color:color-mix(in srgb,var(--warn) 32%,transparent)}
.chip.bear{background:var(--down-bg);color:var(--down-ink);border-color:color-mix(in srgb,var(--down) 32%,transparent)}

.tabbar{position:sticky;top:67px;z-index:35;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:6px;margin:9px 0;padding:5px;background:var(--inset);
  border:1px solid var(--line);border-radius:var(--r-md);width:fit-content;max-width:100%;overflow:auto}
.tab{
  display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:var(--r-sm);
  font-size:15px;font-weight:700;color:var(--fg-muted);background:transparent;border:none;cursor:pointer;
  white-space:nowrap;transition:color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.tab .ic{width:17px;height:17px}
.tab:hover{color:var(--fg)}
.tab.active{background:var(--raised);color:var(--brand);box-shadow:var(--sh-sm)}
:root[data-theme="dark"] .tab.active{color:var(--brand)}

/* in-page jump nav */
.jump{position:sticky;top:127px;z-index:30;display:flex;gap:4px;flex-wrap:wrap;padding:12px 0;
  background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);margin-bottom:8px}
.jump a{font-size:13.5px;font-weight:600;color:var(--fg-subtle);padding:6px 12px;border-radius:var(--r-pill);
  text-decoration:none;transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.jump a:hover{color:var(--fg);background:var(--inset)}
.jump a.active{color:var(--brand);background:var(--brand-soft)}
@media(max-width:680px){.jump{position:static;overflow-x:auto;flex-wrap:nowrap}}

/* ============================================================
   PANELS / SECTIONS
   ============================================================ */
.tabpane{display:none}
.tabpane.active{display:block;animation:fadeUp var(--dur-slow) var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

section.block{margin:38px 0;scroll-margin-top:120px}
.sec-head{display:flex;align-items:baseline;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.sec-head .num{font-size:13px;font-weight:800;color:var(--brand);letter-spacing:.04em;
  font-variant-numeric:tabular-nums}
.sec-head h2{font-size:clamp(20px,2.3vw,25px);font-weight:800;letter-spacing:-.015em;line-height:1.15}
.sec-head .hint{font-size:14px;color:var(--fg-subtle);margin-left:auto;text-align:right;max-width:42ch}
@media(max-width:680px){.sec-head .hint{margin-left:0;text-align:left;width:100%}}

.panel{
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;box-shadow:var(--sh-sm);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.panel.tint{background:var(--raised-2)}
.panel .cap{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-subtle);display:flex;align-items:center;gap:7px}

.grid{display:grid;gap:18px}
.g-2{grid-template-columns:1fr 1fr}
.g-hero{grid-template-columns:380px 1fr}
@media(max-width:900px){.g-2,.g-hero{grid-template-columns:1fr}}

/* ============================================================
   VERDICT HERO
   ============================================================ */
.verdict{
  position:relative;overflow:hidden;
  background:var(--brand-deep);color:var(--on-brand);
  border:1px solid color-mix(in srgb,var(--brand-deep) 60%,#000);
  border-radius:var(--r-xl);padding:32px clamp(24px,4vw,44px);box-shadow:var(--sh-lg);
}
:root[data-theme="dark"] .verdict{background:linear-gradient(150deg,#2A2A55,#16162F);
  border-color:var(--line-strong)}
.verdict::after{content:"";position:absolute;right:-80px;top:-90px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--cream) 22%,transparent),transparent 70%);pointer-events:none}
.verdict .eyebrow{color:color-mix(in srgb,var(--cream) 75%,transparent)}
.verdict .v-top{display:flex;gap:32px;flex-wrap:wrap;align-items:center;position:relative;z-index:1}
.verdict .v-call{min-width:230px}
.v-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:var(--r-pill);
  font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:var(--warn-bg-strong);color:var(--warn-ink);margin-bottom:14px}
:root .verdict .v-badge{background:rgba(255,209,107,.20);color:#FFD16B}
.v-word{font-size:clamp(35px,5vw,53px);font-weight:800;letter-spacing:-.02em;line-height:1;
  color:var(--cream)}
.v-sub{font-size:16px;line-height:1.55;margin-top:12px;color:color-mix(in srgb,var(--cream) 88%,transparent);max-width:34ch}
.v-sub b{color:#FFD16B}

.v-scale{flex:1;min-width:300px}
.scale-track{height:14px;border-radius:var(--r-pill);position:relative;
  background:linear-gradient(90deg,var(--ramp-1),var(--ramp-2) 28%,var(--ramp-3) 50%,var(--ramp-4) 72%,var(--ramp-5))}
.scale-marker{position:absolute;top:50%;width:22px;height:22px;border-radius:50%;
  background:var(--cream);border:3px solid var(--brand-deep);transform:translate(-50%,-50%) scale(0);
  box-shadow:0 4px 12px rgba(0,0,0,.35);transition:transform var(--dur-slow) var(--ease) .2s}
.in-view .scale-marker{transform:translate(-50%,-50%) scale(1)}
.scale-labels{display:flex;justify-content:space-between;margin-top:14px;font-size:12px;font-weight:700;
  letter-spacing:.04em;color:color-mix(in srgb,var(--cream) 60%,transparent)}
.scale-labels .now{color:var(--cream)}

.v-reasons{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;margin-top:26px;position:relative;z-index:1}
@media(max-width:780px){.v-reasons{grid-template-columns:1fr}}
.reason{display:flex;gap:12px}
.reason .rk{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--cream) 16%,transparent);color:var(--cream)}
.reason .rk svg{width:15px;height:15px}
.reason .rt{font-size:14.5px;line-height:1.5;color:color-mix(in srgb,var(--cream) 90%,transparent)}
.reason .rt b{color:var(--cream);font-weight:700}

/* ============================================================
   DISCLAIMER
   ============================================================ */
.disclaimer{display:flex;gap:13px;align-items:flex-start;background:var(--warn-bg);
  border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);border-radius:var(--r-md);
  padding:14px 18px;margin:22px 0}
.disclaimer .ic{flex:none;width:20px;height:20px;color:var(--warn-ink);margin-top:1px}
.disclaimer p{font-size:14px;line-height:1.55;color:var(--fg-muted)}
.disclaimer b{color:var(--warn-ink);font-weight:700}

/* ============================================================
   GAUGE
   ============================================================ */
.gauge-card{display:flex;flex-direction:column;align-items:center;text-align:center}
.gauge-svg{width:100%;max-width:300px}
.gauge-arc-bg{stroke:var(--inset)}
.gauge-needle{transition:transform 1.1s var(--ease);transform-origin:140px 150px;transform:rotate(-90deg)}
.in-view .gauge-needle{transform:rotate(0deg)}
.gauge-val{font-size:59px;font-weight:800;line-height:1;margin-top:-30px;color:var(--down)}
.gauge-tag{font-size:15px;font-weight:800;letter-spacing:.04em;color:var(--down);margin-top:8px;text-transform:uppercase}
.gauge-cap{font-size:13.5px;color:var(--fg-subtle);margin-top:12px;max-width:30ch;line-height:1.5}

/* component bars */
.comp{display:flex;flex-direction:column;gap:16px}
.comp-row{display:grid;grid-template-columns:1fr 70px;gap:14px;align-items:center}
.comp-row .lab{min-width:0}
.comp-row .nm{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:6px}
.comp-row .meta{font-size:12.5px;color:var(--fg-subtle);margin-top:2px}
.comp-bar{grid-column:1 / -1;height:9px;border-radius:var(--r-pill);background:var(--inset);overflow:hidden}
.comp-bar > i{display:block;height:100%;border-radius:var(--r-pill);width:0;
  transition:width 1s var(--ease)}
.in-view .comp-bar > i{width:var(--w)}
.comp-row .score{font-size:16px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.comp-item{display:grid;grid-template-columns:1fr 70px;gap:6px 14px;align-items:center}
.comp-item .nm{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:6px;line-height:1.3}
.comp-item .meta{font-size:12.5px;color:var(--fg-subtle);margin-top:2px}

/* ============================================================
   CATALYST CARDS
   ============================================================ */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:780px){.cat-grid{grid-template-columns:1fr}}
.cat{background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;
  position:relative;overflow:hidden;box-shadow:var(--sh-xs);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.cat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--down)}
.cat.warn::before{background:var(--warn)}
.cat:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--line-strong)}
.cat .ci{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:13px;
  background:var(--down-bg);color:var(--down)}
.cat.warn .ci{background:var(--warn-bg);color:var(--warn-ink)}
.cat h4{font-size:16px;font-weight:700;margin-bottom:7px;letter-spacing:-.01em}
.cat p{font-size:14px;line-height:1.55;color:var(--fg-muted)}
/* catalyst — clickable + sentiment + short/long effect */
.cat{cursor:pointer}
.cat-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}
.cat-head .ci{margin-bottom:0}
.cat-sent{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;
  border-radius:var(--r-pill);white-space:nowrap}
.cat-sent.neg{background:var(--down-bg);color:var(--down-ink)}
.cat-sent.pos{background:var(--up-bg);color:var(--up-ink)}
.cat-more{display:flex;align-items:center;gap:6px;margin-top:13px;font-size:12.5px;font-weight:700;color:var(--brand)}
.cat-more svg{width:14px;height:14px;transition:transform var(--dur) var(--ease)}
.cat.open .cat-more svg{transform:rotate(180deg)}
.cat.open .cat-more .cm-open{display:none}
.cat-more .cm-close{display:none}
.cat.open .cat-more .cm-close{display:inline}
.cat-detail{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows var(--dur-slow) var(--ease)}
.cat.open .cat-detail{grid-template-rows:1fr}
.cat-detail-in{min-height:0;overflow:hidden}
.cat-detail-pad{padding-top:14px;margin-top:14px;border-top:1px dashed var(--line-strong)}
.cd-block{margin-bottom:13px}
.cd-block:last-child{margin-bottom:0}
.cd-t{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:7px}
.cd-t.short{color:var(--warn-ink)}
.cd-t.long{color:var(--brand)}

/* ============================================================
   KPI
   ============================================================ */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media(max-width:980px){.kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--raised-2);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--sh-sm);border-color:var(--line-strong)}
.kpi .k{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-subtle)}
.kpi .v{font-size:24px;font-weight:800;margin-top:8px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.kpi .d{font-size:13px;font-weight:700;margin-top:5px;display:flex;align-items:center;gap:5px}
.kpi .d svg{width:13px;height:13px}
.up-c{color:var(--up-ink)} .down-c{color:var(--down-ink)} .flat-c{color:var(--neutral)} .warn-c{color:var(--warn-ink)}

/* KPI — at-a-glance good/bad */
.kpi{border-left:3px solid transparent}
.kpi:has(.down-c){border-left-color:var(--down)}
.kpi:has(.up-c){border-left-color:var(--up)}
.kpi:has(.warn-c){border-left-color:var(--warn)}
.kpi:has(.flat-c){border-left-color:var(--neutral)}
.kpi .d{font-weight:800;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-pill);width:fit-content}
.kpi .d.up-c{background:var(--up-bg)}
.kpi .d.down-c{background:var(--down-bg)}
.kpi .d.warn-c{background:var(--warn-bg)}
.kpi .d.flat-c{background:var(--neutral-bg)}
/* Fear & Greed component score — colored pill */
.comp-item .score{justify-self:end;min-width:44px;text-align:center;padding:4px 9px;border-radius:var(--r-pill)}
.comp-item .score.down-c{background:var(--down-bg)}
.comp-item .score.warn-c{background:var(--warn-bg)}
.comp-item .score.up-c{background:var(--up-bg)}

/* external composite */
.composite{display:flex;gap:30px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
.composite .big{min-width:180px}
.composite .big .v{font-size:47px;font-weight:800;line-height:1;color:var(--warn-ink);font-variant-numeric:tabular-nums}
.composite .big .t{font-size:15px;font-weight:800;color:var(--warn-ink);margin-top:4px}
.composite .big .o{font-size:13px;color:var(--fg-subtle);margin-top:4px}
.composite .big .o b{color:var(--down)}
.composite .scalewrap{flex:1;min-width:300px}
.composite .scale-labels{color:var(--fg-subtle)}
.composite .scale-labels .bad{color:var(--down)} .composite .scale-labels .good{color:var(--up)}
.flag{margin-top:14px;font-size:13.5px;line-height:1.55;background:var(--warn-bg);
  border:1px solid color-mix(in srgb,var(--warn) 28%,transparent);border-radius:var(--r-sm);
  padding:12px 15px;color:var(--fg-muted)}
.flag b{color:var(--warn-ink)}

/* ============================================================
   SCENARIOS
   ============================================================ */
.scn{display:flex;flex-direction:column;gap:20px}
.scn-row .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.scn-row .nm{font-size:15px;font-weight:700}
.scn-row .pct{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.scn-track{height:12px;border-radius:var(--r-pill);background:var(--inset);overflow:hidden}
.scn-track > i{display:block;height:100%;border-radius:var(--r-pill);width:0;transition:width 1s var(--ease)}
.in-view .scn-track > i{width:var(--w)}
.scn-row small{display:block;font-size:13px;color:var(--fg-subtle);margin-top:8px;line-height:1.5}

/* ============================================================
   HEATMAP
   ============================================================ */
.heat{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:520px){.heat{grid-template-columns:repeat(2,1fr)}}
.cell{border-radius:var(--r-md);padding:16px;border:1px solid transparent;position:relative;overflow:hidden;
  opacity:0;transform:scale(.94);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.in-view .cell{animation:cellIn var(--dur-slow) var(--ease) forwards;animation-delay:var(--d,0ms)}
@keyframes cellIn{to{opacity:1;transform:scale(1)}}
.cell:hover{transform:translateY(-3px) scale(1.01);box-shadow:var(--sh-md);z-index:2}
.cell .s{font-size:14.5px;font-weight:700}
.cell .p{font-size:21px;font-weight:800;margin-top:6px;font-variant-numeric:tabular-nums}

/* ============================================================
   LENSES
   ============================================================ */
.lenses{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:780px){.lenses{grid-template-columns:1fr}}
.lens{background:var(--raised-2);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;
  border-top:3px solid var(--brand);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.lens:hover{transform:translateY(-3px);box-shadow:var(--sh-sm)}
.lens.l1{border-top-color:var(--neutral)}
.lens.l2{border-top-color:var(--brand)}
.lens.l3{border-top-color:var(--warn)}
.lens.l4{border-top-color:var(--down)}
.lens .lh{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.lens .ln{font-size:23px;font-weight:800;color:var(--fg-subtle);font-variant-numeric:tabular-nums;line-height:1}
.lens h4{font-size:16px;font-weight:700;letter-spacing:-.01em}
.lens .tg{font-size:11.5px;font-weight:700;letter-spacing:.03em;padding:3px 9px;border-radius:var(--r-pill);
  background:var(--inset);color:var(--fg-subtle);margin-left:auto;white-space:nowrap}
.lens .def{font-size:13.5px;color:var(--fg-subtle);font-style:italic;margin-bottom:10px;line-height:1.5}

/* ============================================================
   LISTS
   ============================================================ */
ul.clean{list-style:none;display:flex;flex-direction:column;gap:9px}
ul.clean li{font-size:14.5px;line-height:1.55;color:var(--fg-muted);padding-left:22px;position:relative}
ul.clean li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:2px;
  background:var(--brand);transform:rotate(45deg)}
ul.clean li b{color:var(--fg);font-weight:700}

/* ============================================================
   TRADING
   ============================================================ */
.levels{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 16px}
.tagchip{font-size:13px;font-weight:700;padding:6px 12px;border-radius:var(--r-sm);
  background:var(--inset);border:1px solid var(--line);display:inline-flex;align-items:center;gap:6px}
.tagchip.sup{color:var(--up);border-color:color-mix(in srgb,var(--up) 30%,transparent);background:var(--up-bg)}
.tagchip.res{color:var(--down);border-color:color-mix(in srgb,var(--down) 30%,transparent);background:var(--down-bg)}

/* triggers */
.triggers{display:flex;gap:10px;flex-wrap:wrap}
.trg{font-size:14px;font-weight:600;padding:9px 15px;border-radius:var(--r-pill);
  background:var(--raised-2);border:1px solid var(--line);color:var(--fg-muted);
  display:inline-flex;align-items:center;gap:8px;
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.trg:hover{transform:translateY(-2px);border-color:var(--brand);color:var(--fg)}
.trg .dot{width:7px;height:7px;border-radius:50%;background:var(--warn)}

/* ============================================================
   INFO TOOLTIP
   ============================================================ */
.info{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;
  border:1.4px solid var(--fg-subtle);color:var(--fg-subtle);font-size:11px;font-weight:800;font-style:normal;
  cursor:help;position:relative;vertical-align:middle;flex:none;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.info:hover{border-color:var(--brand);color:var(--brand)}
.info .tip{display:block;visibility:hidden;opacity:0;position:absolute;top:150%;left:50%;
  transform:translateX(-50%) translateY(4px);width:230px;background:var(--raised);border:1px solid var(--line-strong);
  border-radius:var(--r-sm);padding:11px 13px;font-size:12.5px;font-weight:400;color:var(--fg-muted);
  line-height:1.5;z-index:50;box-shadow:var(--sh-md);text-align:left;letter-spacing:0;text-transform:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);pointer-events:none}
.info .tip b{color:var(--fg);font-weight:700}
.info:hover .tip{visibility:visible;opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================
   CORP CARDS (expandable)
   ============================================================ */
.intro-panel{margin-bottom:24px}
.intro-panel p{font-size:15.5px;line-height:1.6;color:var(--fg-muted)}
.intro-panel b{color:var(--fg);font-weight:700}

.ccards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.ccards{grid-template-columns:1fr}}
.ccard{background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;
  cursor:pointer;position:relative;box-shadow:var(--sh-xs);
  transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.ccard::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:4px;border-radius:0 4px 4px 0;
  background:var(--warn)}
.ccard.red::before{background:var(--down)}
.ccard.green::before{background:var(--up)}
.ccard:hover{box-shadow:var(--sh-md);border-color:var(--line-strong)}
.ccard.open{box-shadow:var(--sh-md)}
.ctop{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;padding-left:14px}
.cbadge{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.03em;padding:6px 12px;
  border-radius:var(--r-pill);text-transform:uppercase;line-height:1.45}
.cbadge-row{padding-left:14px;margin-bottom:12px}
.legend{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin:0 0 18px;padding:14px 18px;
  background:var(--inset);border:1px solid var(--line);border-radius:var(--r-md);font-size:13.5px}
.legend .lg{display:inline-flex;align-items:center;gap:8px;color:var(--fg-muted);font-weight:600}
.legend .lg b{color:var(--fg);font-weight:700}
.legend .sw{width:14px;height:14px;border-radius:5px;flex:none}
.legend .sw.green{background:var(--up)}
.legend .sw.warn{background:var(--warn)}
.legend .sw.red{background:var(--down)}
.cbadge.warn{background:var(--warn-bg);color:var(--warn-ink)}
.cbadge.red{background:var(--down-bg);color:var(--down-ink)}
.cbadge.green{background:var(--up-bg);color:var(--up)}
.ccode{font-size:20px;font-weight:800;letter-spacing:.02em;flex:none}
.ctitle{font-size:16px;font-weight:700;line-height:1.4;margin-bottom:10px;padding-left:14px;letter-spacing:-.01em}
.csum{font-size:14px;color:var(--fg-muted);padding-left:14px;line-height:1.55;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.csum b{color:var(--fg)}
.fscale{font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:var(--r-pill)}
.fscale.kecil{background:var(--neutral-bg);color:var(--neutral)}
.fscale.besar{background:var(--warn-bg);color:var(--warn-ink)}
.fscale.good{background:var(--up-bg);color:var(--up)}
.more{color:var(--brand);font-weight:700;margin-left:auto;display:inline-flex;align-items:center;gap:4px}
.more svg{width:14px;height:14px;transition:transform var(--dur) var(--ease)}
.ccard.open .more svg{transform:rotate(180deg)}
.ccard.open .more .mt-open{display:none}
.more .mt-close{display:none}
.ccard.open .more .mt-close{display:inline}

.cdetail{display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows var(--dur-slow) var(--ease)}
.ccard.open .cdetail{grid-template-rows:1fr}
.cdetail-in{min-height:0;overflow:hidden}
.cdetail-pad{padding:16px 0 2px 14px;margin-top:14px;border-top:1px solid var(--line)}
.csrc{font-size:13px;color:var(--brand);font-weight:600;margin-bottom:10px}
.csnip{font-size:14px;color:var(--fg-muted);font-style:italic;border-left:2px solid var(--line-strong);
  padding-left:12px;margin-bottom:14px;line-height:1.55}
.flowline{margin-top:14px;border-top:1px dashed var(--line-strong);padding-top:14px}
.flowline .ft{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);
  margin-bottom:10px;display:flex;align-items:center;gap:7px}
.flowline .ft svg{width:14px;height:14px}

/* ============================================================
   NOTES / FOOTER
   ============================================================ */
.note{font-size:14px;line-height:1.55;color:var(--warn-ink);background:var(--warn-bg);
  border:1px solid color-mix(in srgb,var(--warn) 26%,transparent);border-radius:var(--r-md);
  padding:13px 17px;margin-top:18px;display:flex;gap:11px;align-items:flex-start}
.note svg{flex:none;width:17px;height:17px;margin-top:1px}
.integrity{font-size:13.5px;line-height:1.6;color:var(--fg-muted);background:var(--inset);
  border:1px dashed var(--line-strong);border-radius:var(--r-md);padding:15px 18px;margin:40px 0 0}
.integrity b{color:var(--fg)}
footer.foot{margin:32px 0 56px;padding-top:24px;border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.7;color:var(--fg-subtle);text-align:center}
footer.foot .ft-brand{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:12px;
  font-weight:800;font-size:15px;color:var(--fg-muted)}
footer.foot .ft-brand img{width:22px;height:22px;opacity:.7}
footer.foot .tagline{font-style:italic;color:var(--brand);margin-top:8px;font-size:14px}

/* reveal helper */
.reveal{opacity:0;transform:translateY(16px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.reveal.in-view{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
  .in-view .comp-bar>i,.in-view .scn-track>i{transition:none}
}

/* ===== date picker (topbar) + bull chip — added in JSON refactor ===== */
.date-select{
  font: inherit; font-size:13.5px; font-weight:600;
  color: var(--fg-muted); background: transparent;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 3px 26px 3px 10px; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237b7b8f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center;
  transition: border-color .15s ease, color .15s ease;
}
.date-select:hover{ border-color: var(--line-strong); color: var(--fg); }
.date-select:focus-visible{ outline: 2px solid var(--brand); outline-offset: 1px; }
.date-select option{ color: #1B1B39; background: #fff; }

.chip.bull{ background:var(--up-bg); color:var(--up-ink); border-color:color-mix(in srgb,var(--up) 32%,transparent) }

/* jump-nav: tiap pill jangan pecah teksnya, biar baris rapi (desktop) / scroll horizontal (mobile) */
.jump a{ white-space:nowrap }
@media(max-width:680px){ .jump{ -webkit-overflow-scrolling:touch } .jump a{ flex:0 0 auto } }

/* KPI 5-kolom (setup eksternal) yang ikut responsif, bukan inline kaku */
.kpis.k5{ grid-template-columns:repeat(5,1fr) }
@media(max-width:980px){ .kpis.k5{ grid-template-columns:repeat(3,1fr) } }
@media(max-width:520px){ .kpis.k5{ grid-template-columns:repeat(2,1fr) } }

/* topbar mobile: date picker tetap tampil tapi compact, tidak menabrak brand */
@media(max-width:680px){
  .updated{ display:flex }
  .updated .lbl{ display:none }
  .topbar-in{ gap:6px }
  .topbar-right{ gap:6px }
  .brand{ gap:8px }
  .brand .mono{ width:32px; height:32px }
  .brand .mono img{ width:22px; height:22px }
  .brand .name{ font-size:15px }
  .date-select{ max-width:33vw; font-size:12px; padding:3px 21px 3px 9px; background-position:right 6px center }
}