:root{color-scheme:dark;--bg:#0a0f1e;--panel:#111a30;--panel2:#16213b;--garis:#1f2c4a;--teks:#e8ecf5;--redup:#8d9ab8;--aksen:#ff7a1a;--aksen-t:#1a0d00;--hijau:#22c55e;--merah:#f0545a;--biru:#4f8cff;--kuning:#f59e0b;--bayang:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px rgba(0,0,0,.35)}
html[data-tema="terang"]{color-scheme:light;--bg:#f4f6fb;--panel:#fff;--panel2:#f3f5fa;--garis:#e4e8f0;--teks:#111827;--redup:#667085;--aksen:#e8650a;--aksen-t:#fff;--hijau:#16a34a;--merah:#dc2626;--biru:#2563eb;--kuning:#b45309;--bayang:0 1px 2px rgba(17,24,39,.05),0 8px 24px rgba(17,24,39,.06)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--teks);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
body{min-height:100vh;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
[hidden]{display:none!important}
.layar{max-width:560px;margin:0 auto;padding:20px 16px 40px}
.layar.lebar{max-width:1240px;padding:18px 16px 40px}
h1{margin:0;font-size:22px;font-weight:750;letter-spacing:-.3px}
h2{margin:0 0 14px;font-size:14px;font-weight:700;letter-spacing:.2px;text-transform:uppercase}
h2 .redup{text-transform:none;font-weight:500;letter-spacing:0;margin-left:6px;font-size:12.5px}
.redup{margin:2px 0 0;color:var(--redup);font-size:13px}
.kecil{font-size:12px;color:var(--redup)}
/* tombol */
.tombol{font:inherit;font-size:14px;font-weight:650;min-height:42px;padding:0 16px;border-radius:12px;border:1px solid var(--garis);background:var(--panel);color:var(--teks);cursor:pointer;transition:transform .12s,background .15s,border-color .15s}
.tombol:hover{border-color:var(--aksen)}
.tombol:active{transform:scale(.95)}
.tombol:disabled{opacity:.45;cursor:default;transform:none}
.tombol.ikon{width:42px;padding:0;font-size:16px}
.tombol.utama{background:var(--aksen);color:var(--aksen-t);border-color:var(--aksen)}
.tombol.keluar{width:100%;margin-top:6px;color:var(--merah)}
.avatar{background:var(--aksen);color:var(--aksen-t);border-color:var(--aksen);font-weight:800}
/* bilah atas */
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.merek{display:flex;align-items:center;gap:12px;min-width:0}
.logo-k{width:42px;height:42px;border-radius:12px;background:var(--aksen);color:var(--aksen-t);display:flex;align-items:center;justify-content:center;font-size:22px;flex:none}
.aksi{display:flex;gap:8px;align-items:center}
.analisis{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:12px 14px;border-radius:12px;background:var(--panel);border:1px solid var(--garis);font-size:13.5px}
.titik{width:10px;height:10px;border-radius:50%;background:var(--aksen);flex:none;animation:denyut 1.1s ease-in-out infinite}
@keyframes denyut{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1.15);opacity:1}}
.galat{margin:8px 0 12px;color:var(--merah);font-size:13.5px}
.galat:empty{display:none}
/* tab modul */
.tabs{display:flex;gap:6px;margin:0 0 14px;padding:4px;background:var(--panel);border:1px solid var(--garis);border-radius:14px;overflow-x:auto}
.tab{flex:1;min-width:max-content;font:inherit;font-size:14px;font-weight:700;min-height:40px;padding:0 18px;border:0;border-radius:10px;background:transparent;color:var(--redup);cursor:pointer;transition:background .15s,color .15s}
.tab:hover{color:var(--teks)}
.tab.aktif{background:var(--aksen);color:var(--aksen-t)}
h2 .lencana{margin-left:8px;vertical-align:middle;text-transform:none;letter-spacing:0}
/* KPI */
.kpi{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:14px}
.k{background:var(--panel);border:1px solid var(--garis);border-radius:14px;padding:14px 16px;box-shadow:var(--bayang);border-top:3px solid var(--aksen);min-width:0}
.k small{display:block;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--redup)}
.k b{display:block;margin-top:6px;font-size:26px;font-weight:780;letter-spacing:-.5px}
.k span{display:block;margin-top:2px;font-size:12px;color:var(--redup)}
.k.hijau{border-top-color:var(--hijau)}.k.merah{border-top-color:var(--merah)}.k.biru{border-top-color:var(--biru)}
.k.hijau b{color:var(--hijau)}.k.merah b{color:var(--merah)}
/* grid panel */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.panel{background:var(--panel);border:1px solid var(--garis);border-radius:16px;padding:18px;box-shadow:var(--bayang);min-width:0}
.p-tabel{grid-column:1/-1}
.gulung{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px}
th{padding:10px 12px;text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--redup);border-bottom:1px solid var(--garis);white-space:nowrap;background:var(--panel2)}
td{padding:13px 12px;border-bottom:1px solid var(--garis);vertical-align:middle;white-space:nowrap}
tr:last-child td{border-bottom:0}
.kn{text-align:right}td.kn{font-variant-numeric:tabular-nums}
td b{font-size:15px}
td small{display:block;margin-top:2px;font-size:11.5px;color:var(--redup)}
td small.h{color:var(--hijau)}td small.m{color:var(--merah)}
.kosong{text-align:center;color:var(--redup);padding:28px 12px}
.buy{display:inline-block;padding:4px 14px;border-radius:8px;font-weight:800;font-size:13px;background:rgba(34,197,94,.16);color:var(--hijau);border:1px solid rgba(34,197,94,.4)}
.conf{display:flex;align-items:center;gap:8px;min-width:120px}
.conf i{flex:1;height:7px;border-radius:4px;background:var(--garis);overflow:hidden;display:block}
.conf i s{display:block;height:100%;background:var(--aksen);border-radius:4px}
.conf b{font-size:14px;min-width:38px;text-align:right}
/* pie */
.pie{display:flex;justify-content:center;margin:4px 0 12px}
.pie svg{width:190px;height:190px}
.pie .c1{font-size:26px;font-weight:800;fill:var(--teks)}
.pie .c2{font-size:8.5px;fill:var(--redup)}
.legenda{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:13px}
.legenda li{display:flex;align-items:center;gap:9px}
.legenda i{width:11px;height:11px;border-radius:3px;flex:none}
.legenda span{flex:1}.legenda b{font-variant-numeric:tabular-nums}
/* batang */
.batang{display:grid;gap:9px}
.b-baris{display:grid;grid-template-columns:78px 1fr 62px;align-items:center;gap:10px;font-size:13px}
.b-baris.pilih span{color:var(--aksen);font-weight:800}
.b-jalur{height:10px;border-radius:5px;background:var(--panel2);overflow:hidden}
.b-jalur s{display:block;height:100%;border-radius:5px}
.b-baris em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;font-weight:650}
.up{color:var(--hijau)}.dn{color:var(--merah)}
.lencana{display:inline-block;padding:3px 10px;border-radius:8px;font-size:12px;font-weight:750;border:1px solid transparent}
.h-tepat{background:rgba(34,197,94,.16);color:var(--hijau)}
.h-untung{background:rgba(45,212,191,.16);color:#2dd4bf}
.h-meleset{background:rgba(240,84,90,.16);color:var(--merah)}
.h-berjalan{background:rgba(245,158,11,.16);color:var(--kuning)}
.h-tidak_masuk,.h-tak_terukur{background:rgba(148,163,184,.16);color:var(--redup)}
.catatan{margin:16px 2px 0;font-size:12px;line-height:1.55;color:var(--redup)}
/* login & akun */
.kartu{background:var(--panel);border:1px solid var(--garis);border-radius:18px;padding:20px;box-shadow:var(--bayang)}
.masuk{margin-top:12vh;text-align:center;display:flex;flex-direction:column;gap:12px}
.logo{width:56px;height:56px;margin:0 auto;border-radius:16px;background:var(--aksen);color:var(--aksen-t);display:flex;align-items:center;justify-content:center;font-size:28px}
input,select{font:inherit;font-size:16px;min-height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--garis);background:var(--panel2);color:var(--teks);outline:none}
.masuk input{text-align:center;font-size:17px;min-height:48px}
input:focus,select:focus{border-color:var(--aksen);box-shadow:0 0 0 3px rgba(255,122,26,.18)}
.atas{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.blok{margin-bottom:14px}
.blok h2{font-size:15px;text-transform:none;letter-spacing:0}
.blok h3{margin:18px 0 8px;font-size:14px;color:var(--redup)}
.blok form{display:flex;flex-direction:column;gap:10px}
.pesan{margin:6px 0 0;font-size:14px;color:var(--merah)}
.pesan:empty{display:none}
.pesan.ok{color:var(--hijau)}
.baris-akun{padding:12px 0;border-bottom:1px solid var(--garis)}
.baris-akun:last-of-type{border-bottom:0}
.baris-akun .kepala{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.baris-akun .lencana{background:var(--panel2);color:var(--redup)}
.baris-akun .lencana.admin{background:rgba(255,122,26,.16);color:var(--aksen)}
.baris-akun .lencana.mati{background:rgba(240,84,90,.16);color:var(--merah)}
.baris-akun small{display:block;margin-top:4px;color:var(--redup);font-size:12.5px}
.aksi-akun{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tombol.kecil{min-height:36px;padding:0 12px;font-size:13px;border-radius:10px}
.tombol.bahaya{color:var(--merah)}
.form-reset{display:flex;flex-direction:row!important;gap:8px;margin-top:10px}
.form-reset input{flex:1;min-width:0}
/* responsif */
@media (max-width:980px){.kpi{grid-template-columns:repeat(3,1fr)}.grid{grid-template-columns:1fr}.p-tabel{grid-column:1}}
@media (max-width:560px){.kpi{grid-template-columns:repeat(2,1fr);gap:10px}.k b{font-size:22px}.panel{padding:14px;border-radius:14px}.bar{align-items:flex-start}.tombol{padding:0 12px}.logo-k{width:38px;height:38px}}
@media (max-width:700px){
  #tabel thead{display:none}
  #tabel,#tabel tbody{display:block}
  #tabel tr{display:block;padding:12px 4px;border-bottom:1px solid var(--garis)}
  #tabel tr:last-child{border-bottom:0}
  #tabel td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 8px;border:0;white-space:normal;text-align:right}
  #tabel td[data-l]::before{content:attr(data-l);color:var(--redup);font-size:12.5px;font-weight:600;text-align:left}
  #tabel td.nm{display:block;text-align:left;padding-bottom:8px}
  #tabel td.nm b{font-size:17px}
  #tabel td small{text-align:right}
  .conf{min-width:150px}
  .kpi .k:last-child{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ---- grafik & analisis rekomendasi ---- */
.gf-wadah{margin-top:18px}
.gf-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 2px 10px}
.gf-top h2{margin:0;font-size:1.15rem;letter-spacing:.2px}
.gf-sub{margin:0;color:var(--redup);font-size:.85rem}
.gf-pesan{margin:6px 2px 12px;color:var(--redup);font-size:.92rem}
.gf-pesan:empty{display:none}
.gf-daftar{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,560px),1fr));gap:14px}
.gf-kartu{background:var(--panel);border:1px solid var(--garis);border-radius:14px;padding:14px;box-shadow:var(--bayang,none);min-width:0}
.gf-kepala{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.gf-judul{display:flex;align-items:center;gap:10px;min-width:0}
.gf-no{background:var(--panel2);border:1px solid var(--garis);color:var(--redup);border-radius:8px;padding:2px 8px;font-size:.8rem}
.gf-nama{display:flex;flex-direction:column;min-width:0}
.gf-nama b{font-size:1.1rem}
.gf-nama small{color:var(--redup);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gf-skor{display:flex;flex-direction:column;align-items:center;background:var(--panel2);border:1px solid var(--garis);border-radius:10px;padding:4px 12px;flex:none}
.gf-skor b{font-size:1.25rem;color:var(--aksen)}
.gf-skor small{color:var(--redup);font-size:.68rem}
.gf-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px;margin-bottom:10px}
.gf-chip{background:var(--panel2);border:1px solid var(--garis);border-radius:8px;padding:5px 9px;display:flex;flex-direction:column;min-width:0}
.gf-chip-l{font-size:.68rem;color:var(--redup);text-transform:uppercase;letter-spacing:.4px}
.gf-chip-v{font-size:.86rem;font-weight:600;overflow-wrap:anywhere}
.gf-chip.c-tg .gf-chip-v{color:var(--hijau)}
.gf-chip.c-sl .gf-chip-v{color:var(--merah)}
.gf-chip.c-bl .gf-chip-v{color:var(--biru)}
.gf-bungkus{background:var(--panel2);border:1px solid var(--garis);border-radius:10px;padding:4px}
.gf-svg{display:block;width:100%;height:auto;max-width:100%;touch-action:pan-y;font-family:inherit}
.gf-kisi{stroke:var(--garis);stroke-width:1;opacity:.7}
.gf-hari{stroke:var(--redup);stroke-width:1;stroke-dasharray:2 4;opacity:.45}
.gf-sumbu{fill:var(--redup);font-size:10.5px}
.gf-kosong{fill:var(--redup);font-size:14px}
.gf-naik{--w:var(--hijau)}
.gf-turun{--w:var(--merah)}
.gf-sumbu-lilin.gf-naik,.gf-sumbu-lilin.gf-turun{stroke:var(--w);stroke-width:1.2}
.gf-badan.gf-naik,.gf-badan.gf-turun{fill:var(--w);stroke:var(--w);stroke-width:.5}
.gf-badan.gf-naik{fill-opacity:.85}
.gf-garis{stroke-width:1.3;stroke-dasharray:6 4}
.gf-garis.g-tg{stroke:var(--hijau)}
.gf-garis.g-bl{stroke:var(--biru)}
.gf-garis.g-sl{stroke:var(--merah)}
.gf-garis.g-now{stroke:var(--teks);stroke-dasharray:none;stroke-width:1;opacity:.75}
.gf-label.g-tg{fill:var(--hijau)}
.gf-label.g-bl{fill:var(--biru)}
.gf-label.g-sl{fill:var(--merah)}
.gf-label.g-now{fill:var(--teks)}
.gf-labelt{fill:var(--panel);font-size:10px;font-weight:700}
.gf-ema{fill:none;stroke:var(--kuning,#b45309);stroke-width:1.4;opacity:.9}
.gf-orb{fill:var(--aksen);opacity:.12}
.gf-silang{stroke:var(--teks);stroke-width:1;stroke-dasharray:3 3;opacity:.6}
.gf-sembunyi{display:none}
.gf-tangkap{fill:transparent;cursor:crosshair}
.gf-info{min-height:2.6em;margin:6px 2px 2px;font-size:.78rem;color:var(--redup);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.gf-legenda{display:flex;flex-wrap:wrap;gap:4px 12px;margin:4px 2px 10px;font-size:.74rem;color:var(--redup)}
.gf-lg{display:inline-flex;align-items:center;gap:5px}
.gf-lg i{display:inline-block;width:12px;height:8px;border-radius:2px;background:var(--redup)}
.gf-lg.gf-naik i{background:var(--hijau)}
.gf-lg.gf-turun i{background:var(--merah)}
.gf-lg.g-tg i{background:var(--hijau);height:2px}
.gf-lg.g-bl i{background:var(--biru);height:2px}
.gf-lg.g-sl i{background:var(--merah);height:2px}
.gf-lg.g-now i{background:var(--teks);height:2px}
.gf-lg.gf-emaK i{background:var(--kuning,#b45309);height:2px}
.gf-lg.gf-orbK i{background:var(--aksen);opacity:.35}
.gf-analisis{display:grid;gap:10px}
.gf-alasan{background:var(--panel2);border:1px solid var(--garis);border-left:3px solid var(--hijau);border-radius:10px;padding:9px 12px}
.gf-alasan.gf-claude{border-left-color:var(--aksen)}
.gf-alasan h4{margin:0 0 5px;font-size:.82rem;color:var(--redup);font-weight:600}
.gf-alasan ul{margin:0;font-size:.88rem;line-height:1.5}
.gf-alasan ul{list-style:none;padding-left:0}
.gf-alasan li{margin:3px 0;padding-left:16px;position:relative;overflow-wrap:anywhere}
.gf-alasan li:before{content:'';position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--redup);opacity:.6}
.gf-alasan li.gf-plus:before{background:var(--hijau);opacity:1}
.gf-alasan li.gf-waspada:before{background:var(--kuning,#b45309);opacity:1}
.gf-skorbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.gf-sb{display:grid;grid-template-columns:auto 1fr auto;gap:6px;align-items:center;font-size:.78rem;color:var(--redup)}
.gf-sb b{color:var(--teks)}
.gf-sb-t{height:6px;background:var(--garis);border-radius:4px;overflow:hidden}
.gf-sb-i{height:100%;background:var(--aksen);border-radius:4px}
.gf-w0{width:0%}.gf-w5{width:5%}.gf-w10{width:10%}.gf-w15{width:15%}.gf-w20{width:20%}.gf-w25{width:25%}.gf-w30{width:30%}.gf-w35{width:35%}.gf-w40{width:40%}.gf-w45{width:45%}.gf-w50{width:50%}.gf-w55{width:55%}.gf-w60{width:60%}.gf-w65{width:65%}.gf-w70{width:70%}.gf-w75{width:75%}.gf-w80{width:80%}.gf-w85{width:85%}.gf-w90{width:90%}.gf-w95{width:95%}.gf-w100{width:100%}
@media (max-width:560px){.gf-kartu{padding:10px}.gf-chips{grid-template-columns:1fr 1fr}.gf-daftar{gap:10px}}