:root{
  --bg-top:#0d2350; --bg-mid:#0a1a40; --bg-bottom:#050d24;
  --panel:rgba(12,31,73,.82);
  --card:#123068; --card-2:#0f2658;
  --line:rgba(120,160,230,.20); --line-2:rgba(120,160,230,.34);
  --gold:#f6c343; --gold-soft:#ffe08a;
  --text:#eaf0fd; --muted:#9fb2db; --muted-2:#7288b5;
  --blue:#3b8dff; --cyan:#38d0e0; --violet:#a78bfa; --violet-2:#7c5cff;
  --up:#37d67a; --down:#ff5f6d; --warn:#f5a623; --flat:#8fa3cc;
  --shadow:0 8px 26px rgba(0,0,0,.38);
  --font:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--font); color:var(--text); min-height:100vh; font-size:14px;
  background:
    radial-gradient(1200px 620px at 12% -8%, rgba(59,141,255,.20), transparent 60%),
    radial-gradient(900px 520px at 102% -2%, rgba(124,92,255,.16), transparent 58%),
    radial-gradient(800px 500px at 50% 110%, rgba(56,208,224,.08), transparent 60%),
    linear-gradient(160deg,var(--bg-top),var(--bg-mid) 46%,var(--bg-bottom));
  background-attachment:fixed;
  padding:14px 18px 26px;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(59,141,255,.35)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(120,160,230,.28);border-radius:9px}
::-webkit-scrollbar-track{background:transparent}
.wrap{max-width:1680px;margin:0 auto}

/* ============ TOPBAR ============ */
.tophead{display:flex;justify-content:flex-end;margin-bottom:10px}
.spacer{flex:1}
.pill{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:9px;
  background:rgba(16,40,92,.85);border:1px solid var(--line);color:var(--text);font-size:12.5px;
  font-family:var(--font);cursor:pointer;transition:.16s ease;white-space:nowrap}
.pill:hover{border-color:var(--line-2);background:rgba(24,58,126,.9)}
select.pill{appearance:none;padding-right:28px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 16px) 14px,calc(100% - 11px) 14px;background-size:5px 5px;background-repeat:no-repeat}
select.pill option{background:#0c1f49;color:var(--text)}
.live{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:7px;
  background:rgba(55,214,122,.12);border:1px solid rgba(55,214,122,.32);color:#8df0b6;font-size:10.5px;
  font-weight:700;letter-spacing:.04em}
.dot{width:6px;height:6px;border-radius:50%;background:#37d67a;box-shadow:0 0 0 0 rgba(55,214,122,.7);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(55,214,122,0)}100%{box-shadow:0 0 0 0 rgba(55,214,122,0)}}

/* ============ KPI STRIP ============ */
/* auto-fit: jumlah kolom mengikuti jumlah kartu dan lebar layar,
   jadi 4 KPI maupun 9 KPI sama-sama tampil rapi tanpa ubah kode. */
.kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px;margin-bottom:14px}
.kpi{position:relative;padding:12px 13px 10px;border-radius:12px;background:linear-gradient(150deg,rgba(22,53,118,.92),rgba(12,30,70,.86));
  border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;transition:.18s ease}
.kpi:hover{transform:translateY(-2px);border-color:var(--line-2)}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kc,#3b8dff)}
.kpi .k-top{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:7px}
.kpi .k-name{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700}
.kpi .k-val{font-size:23px;font-weight:800;letter-spacing:-.5px;line-height:1.05}
.kpi .k-unit{font-size:10.5px;color:var(--muted-2);margin-left:5px;font-weight:600}
.kpi .k-row{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:4px}
.kpi .k-meta{font-size:10px;color:var(--muted-2);margin-top:6px;display:flex;align-items:center;gap:6px}
.chg{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800}
.chg.up{color:var(--up)} .chg.down{color:var(--down)} .chg.flat{color:var(--flat)}
.chg svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.6}
.aichip{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:800;letter-spacing:.07em;
  padding:2px 6px;border-radius:5px;background:rgba(124,92,255,.16);border:1px solid rgba(167,139,250,.34);color:#c9b8ff;text-transform:uppercase}

/* ============ LAYOUT ============ */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;align-items:start;margin-bottom:14px}

/* ---- baris dengan tinggi kolom seragam ---- */
.grid.eq{align-items:stretch}
.grid.eq > div{display:flex;flex-direction:column;gap:14px;min-width:0}
.grid.eq .panel.grow{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.grid.eq .panel.grow .p-body{flex:1 1 auto;min-height:0;overflow-y:auto}
.grid.eq .col-3{position:relative}
.grid.eq .ai-rail{position:absolute;inset:0;display:flex;flex-direction:column;min-height:0}
.grid.eq .ai-body{flex:1 1 auto;min-height:0;overflow-y:auto}
.col-3{grid-column:span 3} .col-4{grid-column:span 4} .col-5{grid-column:span 5}
.col-6{grid-column:span 6} .col-7{grid-column:span 7} .col-8{grid-column:span 8}
.col-9{grid-column:span 9} .col-12{grid-column:span 12}

/* ============ PANEL ============ */
.panel{border-radius:14px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.p-head{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);
  background:linear-gradient(100deg,rgba(23,54,120,.75),rgba(12,30,70,.35))}
.p-head .ic{width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:rgba(59,141,255,.16);border:1px solid rgba(59,141,255,.3)}
.p-head .ic svg{width:14px;height:14px;stroke:#9dc6ff;fill:none;stroke-width:1.8}
.p-head h2{font-size:14px;font-weight:700;letter-spacing:.3px;flex:1}
.p-head .sub{font-size:10.5px;color:var(--muted-2);letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.p-body{padding:12px 13px}

/* ============ ASSET CARD ============ */
.acard{display:grid;grid-template-columns:38px 1fr 150px;gap:11px;align-items:center;
  position:relative;overflow:hidden;padding:10px 11px 10px 14px;border-radius:11px;background:linear-gradient(140deg,var(--card),var(--card-2));
  border:1px solid var(--line);margin-bottom:9px;transition:.16s ease;cursor:pointer}
.acard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sc,var(--line))}
.acard:last-child{margin-bottom:0}
.acard:hover{border-color:var(--line-2);transform:translateX(2px)}
.acard.sel{border-color:rgba(246,195,67,.6);box-shadow:0 0 0 1px rgba(246,195,67,.2) inset}
.acard .av{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:19px;
  background:rgba(6,18,44,.55);border:1px solid var(--line)}
.acard .an{font-size:12.5px;font-weight:700;letter-spacing:.2px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.acard .an small{font-size:10px;color:var(--muted-2);font-weight:600;letter-spacing:.06em}
.acard .aval{font-size:19px;font-weight:800;letter-spacing:-.4px;margin-top:3px;display:flex;align-items:baseline;gap:8px}
.acard .adesc{font-size:10.5px;color:var(--muted);margin-top:3px;line-height:1.4}
.acard .achart{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.acard .aper{font-size:9px;color:var(--muted-2);letter-spacing:.06em}
.stat{font-size:9px;font-weight:800;letter-spacing:.04em;padding:2px 6px;border-radius:5px;white-space:nowrap}
.st-g{background:rgba(55,214,122,.14);border:1px solid rgba(55,214,122,.34);color:#8df0b6}
.st-y{background:rgba(246,195,67,.14);border:1px solid rgba(246,195,67,.36);color:#ffe08a}
.st-r{background:rgba(255,95,109,.15);border:1px solid rgba(255,95,109,.36);color:#ff9aa3}
.badge-f{font-size:9px;font-weight:800;letter-spacing:.06em;padding:1.5px 5px;border-radius:4px;
  background:rgba(56,208,224,.13);border:1px solid rgba(56,208,224,.3);color:#7fe4ef;text-transform:uppercase}

/* ============ DEBT COMPOSITION ============ */
.compo .cbar{display:flex;height:26px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.compo .cseg{display:grid;place-items:center;font-size:11px;font-weight:800;color:#08152f;transition:.2s ease}
.compo .cseg:hover{filter:brightness(1.12)}
.compo .cleg{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px}
.compo .cleg span{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.compo .cleg i{width:9px;height:9px;border-radius:3px;display:inline-block}

/* ============ AI RAIL ============ */
.ai-rail{border-radius:14px;overflow:hidden;position:sticky;top:14px;
  background:linear-gradient(165deg,rgba(41,28,92,.9),rgba(12,26,62,.92));
  border:1px solid rgba(167,139,250,.3);box-shadow:0 10px 34px rgba(60,30,140,.28)}
.ai-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(167,139,250,.24);
  background:linear-gradient(100deg,rgba(96,66,200,.4),rgba(24,40,96,.25))}
.ai-head .orb{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:conic-gradient(from 210deg,#7c5cff,#38d0e0,#a78bfa,#7c5cff);
  box-shadow:0 0 18px rgba(124,92,255,.55);animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ai-head .orb span{width:22px;height:22px;border-radius:7px;background:#160f36;display:grid;place-items:center;font-size:12px;
  animation:spin 9s linear infinite reverse}
.ai-head h2{font-size:14px;font-weight:700;flex:1;letter-spacing:.2px}
.ai-head .sub{display:block;font-size:9.5px;color:#a08fd6;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-top:1px}
.ai-tabs{display:flex;gap:4px;padding:9px 10px 0}
.ai-tab{flex:1;padding:8px 4px;border-radius:8px 8px 0 0;border:1px solid transparent;border-bottom:none;
  background:transparent;color:var(--muted);font-size:11.5px;font-weight:700;font-family:var(--font);cursor:pointer;transition:.15s}
.ai-tab:hover{color:#d5c9ff}
.ai-tab.on{background:rgba(124,92,255,.16);border-color:rgba(167,139,250,.3);color:#d9ccff}
.ai-body{padding:11px 12px 13px;border-top:1px solid rgba(167,139,250,.22)}
.ai-pane{display:none;animation:fade .25s ease}
.ai-pane.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.ins{padding:10px 11px;border-radius:10px;background:rgba(8,20,48,.55);border:1px solid rgba(167,139,250,.2);margin-bottom:9px}
.ins:last-child{margin-bottom:0}
.ins .it{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.ins .it b{font-size:12px;font-weight:700;flex:1}
.ins p{font-size:11.8px;line-height:1.62;color:#c3d0ec}
.ins p b{color:#fff;font-weight:700}
.conf{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:800;color:#9fb2db;letter-spacing:.05em}
.conf .cb{width:34px;height:4px;border-radius:3px;background:rgba(255,255,255,.13);overflow:hidden;display:inline-block}
.conf .cb i{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--cyan))}
.ins-src{font-size:9.5px;color:var(--muted-2);margin-top:7px;display:flex;gap:6px;flex-wrap:wrap}
.ins-src span{padding:1.5px 6px;border-radius:4px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.hz{width:100%;border-collapse:collapse;margin-top:10px;font-size:11.5px}
.hz th{text-align:left;padding:6px 8px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);
  border-bottom:1px solid var(--line);font-weight:700}
.hz td{padding:7px 8px;border-bottom:1px solid rgba(120,160,230,.1)}
.hz tr:last-child td{border-bottom:none}
.hz .rng{font-size:10px;color:var(--muted-2)}

/* ============ FORECAST WORKBENCH ============ */
.fw-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 13px;border-bottom:1px solid var(--line);
  background:rgba(8,20,48,.34)}
.fw-tools .lbl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);font-weight:700;margin-right:2px}
.seg{display:inline-flex;background:rgba(8,20,48,.6);border:1px solid var(--line);border-radius:9px;padding:2px}
.seg button{border:0;background:transparent;color:var(--muted);font-family:var(--font);font-size:11.5px;font-weight:700;
  padding:6px 11px;border-radius:7px;cursor:pointer;transition:.15s}
.seg button:hover{color:#fff}
.seg button.on{background:linear-gradient(140deg,rgba(59,141,255,.34),rgba(124,92,255,.28));color:#fff;
  box-shadow:0 0 0 1px rgba(120,160,230,.28) inset}
.fw-grid{display:grid;grid-template-columns:1fr 320px;gap:0}
.fw-chart{padding:12px 8px 6px 4px;min-width:0}
/* Tinggi panel samping dikunci mengikuti kolom grafik. Isinya dipasang
   absolut supaya TIDAK ikut menentukan tinggi baris grid — kalau tidak,
   daftar sensitivitas yang panjang akan memanjangkan seluruh panel dan
   grafik ikut menggantung di ruang kosong. */
.fw-side{border-left:1px solid var(--line);background:rgba(8,20,48,.22);
  position:relative;overflow:hidden}
.fw-side-in{position:absolute;inset:0;padding:12px 13px;
  display:flex;flex-direction:column;min-height:0}
.fw-side-in h3{flex:none}
.fw-side-in .sns{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:4px}
.fw-side h3{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);font-weight:700;margin-bottom:9px}
.sns{display:grid;gap:9px}
.sns .sx{padding:8px 9px;border-radius:9px;background:rgba(8,20,48,.5);border:1px solid var(--line);transition:.16s}
.sns .sx.on{border-color:rgba(246,195,67,.55);background:rgba(246,195,67,.09)}
.sns .s1{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.sns .s1 b{font-size:11.5px;font-weight:700}
.sns .s1 span{font-size:9.5px;color:var(--muted-2);white-space:nowrap}
.sns .s2{display:flex;align-items:center;gap:8px;margin-top:6px}
.sns .s2 em{font-style:normal;font-size:13px;font-weight:800;color:#ff9aa3;white-space:nowrap}
.sns .sbar{flex:1;height:6px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}
.sns .sbar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--blue),var(--cyan))}
.sns .s2 u{text-decoration:none;font-size:10px;color:var(--muted);font-weight:700;min-width:26px;text-align:right}
.legend{display:flex;gap:14px;flex-wrap:wrap;padding:2px 12px 10px;font-size:10.5px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:16px;height:3px;border-radius:2px;display:inline-block}
.legend i.band{height:9px;width:14px;border-radius:3px}

/* ============ PENJELASAN SKENARIO ============ */
/* Kenapa garis proyeksi berbentuk begitu. Grafik yang tidak bisa
   dipertanggungjawabkan lebih buruk daripada tidak ada grafik. */
.penjelasan{margin:12px 4px 2px;padding:12px 14px;border-radius:10px;
  background:rgba(124,92,255,.07);border:1px solid rgba(167,139,250,.22)}
.pj-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.penjelasan p{margin:0;font-size:12.5px;line-height:1.62;color:var(--muted)}
.kchip{font-size:9.5px;font-weight:800;letter-spacing:.05em;padding:2px 7px;border-radius:5px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--muted);
  font-variant-numeric:tabular-nums}
.pemicu{margin:9px 0 0;padding-left:18px;font-size:12px;line-height:1.7;color:var(--muted)}
.pemicu li{margin-bottom:2px}
.pj-src{margin-top:10px;padding-top:8px;border-top:1px solid rgba(167,139,250,.16);
  font-size:10px;color:var(--muted-2);line-height:1.55}
.pj-src b{color:var(--muted)}
.aichip.mini{font-size:8.5px;padding:1px 5px;letter-spacing:.06em}

/* ============ ASK BAR ============ */
.ask{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:14px;margin-top:14px;
  background:linear-gradient(100deg,rgba(48,32,102,.75),rgba(12,30,70,.7));border:1px solid rgba(167,139,250,.3);
  box-shadow:var(--shadow)}
.ask .ai-ic{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;font-size:15px;
  background:linear-gradient(150deg,rgba(124,92,255,.4),rgba(56,208,224,.22));border:1px solid rgba(167,139,250,.35)}
.ask input{flex:1;min-width:0;height:38px;border-radius:10px;border:1px solid var(--line);background:rgba(6,16,40,.6);
  color:var(--text);font-family:var(--font);font-size:13px;padding:0 14px;outline:none;transition:.16s}
.ask input::placeholder{color:var(--muted-2)}
.ask input:focus{border-color:rgba(167,139,250,.6);box-shadow:0 0 0 3px rgba(124,92,255,.16)}
.ask .go{height:38px;padding:0 18px;border-radius:10px;border:0;cursor:pointer;font-family:var(--font);
  font-size:13px;font-weight:700;color:#fff;background:linear-gradient(140deg,var(--violet-2),var(--blue));
  box-shadow:0 4px 16px rgba(124,92,255,.35);transition:.16s}
.ask .go:hover{filter:brightness(1.12);transform:translateY(-1px)}
.sugg{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.sugg button{font-size:11px;padding:6px 11px;border-radius:8px;cursor:pointer;font-family:var(--font);
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted);transition:.15s}
.sugg button:hover{color:#fff;border-color:rgba(167,139,250,.45);background:rgba(124,92,255,.14)}
.answer{margin-top:12px;padding:13px 14px;border-radius:12px;background:rgba(8,20,48,.6);
  border:1px solid rgba(167,139,250,.26);font-size:12.5px;line-height:1.7;color:#c9d6f0;display:none}
.answer.on{display:block;animation:fade .3s ease}
.answer b{color:#fff}
.answer .ah{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:#b3a4e6;font-weight:800}
.answer ul{margin:8px 0 0 18px}
.answer li{margin-bottom:5px}
.typing i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#c9b8ff;margin-right:3px;animation:bl 1.2s infinite}
.typing i:nth-child(2){animation-delay:.18s} .typing i:nth-child(3){animation-delay:.36s}
@keyframes bl{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* ============ RESPONSIVE ============ */
@media (max-width:1300px){
  .col-5,.col-4,.col-3,.col-7,.col-8,.col-9,.col-6{grid-column:span 12}
  .ai-rail,.grid.eq .ai-rail{position:static;inset:auto}
  .grid.eq{align-items:start}
  .grid.eq .panel.grow .p-body,
  .grid.eq .ai-body{overflow-y:visible}
  .fw-grid{grid-template-columns:1fr}
  .fw-side{position:static;overflow:visible}
  .fw-side-in{position:static;inset:auto}
  .fw-side-in .sns{overflow-y:visible}
  .fw-side{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:760px){
  body{padding:10px 10px 20px}
  .kpi-strip{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .acard{grid-template-columns:34px 1fr;grid-template-rows:auto auto}
  .acard .achart{grid-column:1 / -1;align-items:stretch}
}