:root{
  --bg:#0d1017; --panel:#151a24; --panel2:#1c2331; --line:#242d3d;
  --ink:#e8edf7; --dim:#8b97ad; --accent:#f5a524; --accent2:#ffbe4d;
  --up:#3ddc97; --down:#ff6b6b; --mid:#4a9eff;
  --mono:"DejaVu Sans Mono","Liberation Mono",Menlo,Consolas,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --tabbar-h:47px;              /* tinggi bilah tab di HP (dipakai oleh toolbar yang menempel) */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
/* overflow-x:clip (bukan hidden) supaya position:sticky di dalam body tetap bekerja;
   "hidden" membuat body jadi kotak gulir sendiri sehingga bilah yang menempel tidak pernah menempel. */
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:14px;overflow-x:hidden;overflow-x:clip}
body{-webkit-text-size-adjust:100%;overscroll-behavior-y:contain}
h1,h2,h3{margin:0}
a{color:var(--accent2)}
button,input,select{font-family:inherit;font-size:13px;touch-action:manipulation}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- header ---------- */
header{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  padding:calc(12px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 12px calc(16px + env(safe-area-inset-left));
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#1a2130,#12171f);position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.mark{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(140deg,var(--accent),#c47b0d);color:#1a1204;
  font-weight:800;font-size:19px;
}
.brand h1{font-size:16px;letter-spacing:2px;font-weight:800;white-space:nowrap}
.brand p{margin:1px 0 0;font-size:10.5px;color:var(--dim);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.badge{
  font-size:9.5px;letter-spacing:.8px;padding:3px 7px;border-radius:20px;white-space:nowrap;
  background:rgba(245,165,36,.14);color:var(--accent2);border:1px solid rgba(245,165,36,.35);
}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:5px 11px;min-width:110px}
.chip span{display:block;font-size:9.5px;color:var(--dim);letter-spacing:.7px;text-transform:uppercase}
.chip b{font-size:14.5px;font-family:var(--mono)}
.chip i{font-style:normal;font-size:10.5px;color:var(--dim);margin-left:4px}
.actions{display:flex;align-items:center;gap:9px}
button{
  background:var(--panel2);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:8px 13px;cursor:pointer;min-height:36px;
}
button:hover{border-color:#3a465e}
button.primary{background:linear-gradient(140deg,var(--accent),#d18710);color:#1a1204;font-weight:700;border:0}
button.primary[disabled]{opacity:.5;cursor:progress}
.status{font-size:10.5px;color:var(--dim);max-width:170px}
.status.err{color:var(--down)}

/* ---------- banner (galat sambungan / info PWA) ---------- */
.banner{display:flex;align-items:center;gap:10px;padding:8px 16px;font-size:12px;line-height:1.45;
  background:rgba(245,165,36,.12);color:var(--accent2);border-bottom:1px solid var(--line)}
.banner[hidden]{display:none}
.banner.err{background:rgba(255,107,107,.14);color:#ffb9b9}
.banner.info{background:rgba(74,158,255,.14);color:#c3dcff}
.banner button{min-height:30px;padding:4px 10px;font-size:12px;flex:0 0 auto}
.banner .x{margin-left:auto;background:transparent;border:0;color:inherit;font-size:17px;
  padding:0 6px;min-height:30px}

/* ---------- coverage ---------- */
.coverage{padding:7px 16px;font-size:11.5px;color:var(--dim);background:#11161f;
  border-bottom:1px solid var(--line)}
.coverage b{color:var(--ink)}
.coverage .hint{display:block;margin-top:2px;font-size:10.5px;opacity:.75}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:2px;padding:8px 16px 0;overflow-x:auto;border-bottom:1px solid var(--line);
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab{background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;
  padding:9px 13px;color:var(--dim);font-weight:600;white-space:nowrap;min-height:40px}
.tab.active{color:var(--accent2);border-bottom-color:var(--accent)}
main{padding:14px 16px 40px;max-width:1500px;margin:0 auto}
.panel{display:none}
.panel.active{display:block}

/* ---------- toolbar ---------- */
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.toolbar.wrap{flex-wrap:wrap}
input[type=search],input[type=number],select{
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:8px 11px;outline:none;min-height:38px;
}
input[type=search]{min-width:200px;flex:1 1 200px}
input:focus,select:focus{border-color:var(--accent)}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;flex:0 0 auto}
.seg button{border:0;border-radius:0;background:var(--panel);color:var(--dim);padding:8px 11px;white-space:nowrap}
.seg button.on{background:rgba(245,165,36,.16);color:var(--accent2)}
.field{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim)}
.field input{width:100px}
.note{font-size:11.5px;color:var(--dim)}
.subhead{font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--dim);
  font-weight:600;margin:18px 0 8px}
.note.err{color:var(--down)}
.scrollhint{font-size:10.5px;color:var(--dim);padding:6px 2px}

/* Pita yang bisa digeser ke samping (chip, tab, filter) diberi tanda samar di
   tepi yang masih menyimpan isi, supaya terlihat bahwa masih bisa digeser.
   Kelas fade-l / fade-r dipasang oleh JS hanya saat memang bisa digeser. */
.chips.fade-r,.tabs.fade-r,.toolbar.fade-r{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
.chips.fade-l,.tabs.fade-l,.toolbar.fade-l{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 26px);
  mask-image:linear-gradient(90deg,transparent,#000 26px)}
.chips.fade-l.fade-r,.tabs.fade-l.fade-r,.toolbar.fade-l.fade-r{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent)}

/* ---------- cards ---------- */
.cards.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(266px,1fr));gap:11px}
.cards.list{display:block}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:12px;position:relative}
/* jarak antar-kartu hanya untuk mode daftar; di mode kotak jaraknya dari "gap" grid */
.cards.list .card + .card{margin-top:10px}
.card.ultra{border-color:rgba(245,165,36,.5);box-shadow:0 0 0 1px rgba(245,165,36,.14) inset}
.card .top{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.card .sym{font-weight:700;font-size:14.5px}
.card .name{font-size:10.5px;color:var(--dim);margin-left:auto;text-align:right;max-width:100px}
.ring{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:13.5px;font-family:var(--mono);flex:0 0 auto}
.lbl{font-size:9.5px;font-weight:700;letter-spacing:.9px;padding:2px 7px;border-radius:20px}
.lbl.ULTRA{background:rgba(245,165,36,.18);color:var(--accent2)}
.lbl.HIGH{background:rgba(61,220,151,.15);color:var(--up)}
.lbl.NORMAL{background:rgba(74,158,255,.15);color:var(--mid)}
.lbl.LEMAH{background:rgba(139,151,173,.15);color:var(--dim)}
.tf{font-size:9.5px;border:1px solid var(--line);border-radius:5px;padding:2px 6px;color:var(--dim)}
/* sasaran sentuh minimal 44x44 px (Apple HIG / Material) — dulu hanya 23x36 px */
.star{background:none;border:0;font-size:19px;color:#3c465c;padding:0;cursor:pointer;
  min-height:44px;min-width:44px;display:grid;place-items:center;flex:0 0 auto;
  margin:-6px -8px -6px 0}
.star.on{color:var(--accent)}
.card .price{font-family:var(--mono);font-size:16.5px;margin-bottom:2px}
.card .sub{font-size:11px;color:var(--dim);margin-bottom:8px;line-height:1.5}
.levels{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin-bottom:8px}
.levels div{background:var(--panel2);border-radius:7px;padding:5px 7px;min-width:0}
.levels span{display:block;font-size:9px;color:var(--dim);letter-spacing:.5px}
.levels b{font-family:var(--mono);font-size:11.5px;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.parts{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:7px}
.part{font-size:9.5px;background:var(--panel2);border-radius:5px;padding:2px 6px;color:var(--dim)}
.part.hot{background:rgba(245,165,36,.16);color:var(--accent2)}
.detail{font-size:10.5px;color:#a9b4c7;line-height:1.5}
.empty{color:var(--dim);text-align:center;padding:40px 0;grid-column:1/-1}

/* ---------- chart ---------- */
.chartwrap{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px;overflow:auto}
.chartwrap.small{margin:11px 0}
canvas{display:block;width:100%;height:auto}

/* ---------- tables & stats ---------- */
.statgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:9px;margin-bottom:12px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.stat span{display:block;font-size:9.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.7px}
.stat b{font-size:16px;font-family:var(--mono)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--panel);
  border:1px solid var(--line);border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:12px;min-width:640px}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.6px;background:var(--panel2)}
td.num{font-family:var(--mono);text-align:right}
.pos{color:var(--up)} .neg{color:var(--down)}

footer{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:12px calc(16px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  border-top:1px solid var(--line);font-size:10.5px;color:var(--dim)}
footer .err{color:var(--down)}

/* ============================ HP / tablet ============================ */
@media (max-width:900px){
  /* header tidak menempel; tombol pindai sebaris dengan judul, chip jadi strip */
  header{position:static;
    padding:calc(9px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 9px calc(12px + env(safe-area-inset-left));
    gap:8px}
  .brand{flex:1 1 auto;min-width:0}
  .brand p{display:none}
  .badge{display:none}
  .actions{flex:0 0 auto;gap:7px}
  .status{display:none}           /* status ringkas ada di footer + banner galat */
  .status.err{display:block;flex:1 1 100%;order:5;max-width:none;color:var(--down)}
  .chips{flex:1 1 100%;order:3;margin-left:0;flex-wrap:nowrap;overflow-x:auto;gap:7px;
    padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;min-width:96px;padding:5px 10px}
  .chip b{font-size:13.5px}

  /* bilah tab menempel paling atas, baris filter menempel tepat di bawahnya,
     jadi tetap bisa berpindah tab walau daftar sinyal panjang. */
  .tabs{position:sticky;top:0;z-index:25;background:var(--bg);
    padding:calc(6px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left));
    box-shadow:0 8px 14px -10px rgba(0,0,0,.95)}
  .tab{min-height:44px}
  .toolbar{position:sticky;top:calc(var(--tabbar-h) + env(safe-area-inset-top));z-index:15;background:var(--bg);
    margin:0 calc(-12px - env(safe-area-inset-right)) 12px calc(-12px - env(safe-area-inset-left));
    padding:9px calc(12px + env(safe-area-inset-right)) 9px calc(12px + env(safe-area-inset-left));
    border-bottom:1px solid var(--line);
    box-shadow:0 8px 14px -10px rgba(0,0,0,.95);
    flex-wrap:nowrap;overflow-x:auto;gap:7px;scrollbar-width:none}
  .toolbar::-webkit-scrollbar{display:none}
  .toolbar > *{flex:0 0 auto}
  /* 16px: di bawah itu Safari iOS memperbesar (zoom) halaman saat kolom diisi */
  input[type=search],input[type=number],select{font-size:16px}
  input[type=search]{flex:0 0 190px;min-width:0}
  main{padding:12px calc(12px + env(safe-area-inset-right)) 40px calc(12px + env(safe-area-inset-left))}

  .cards.grid{grid-template-columns:1fr;gap:9px}
  .card{padding:11px}
  .levels b{font-size:11px}
  .statgrid{grid-template-columns:repeat(2,1fr);gap:8px}
  .stat b{font-size:15px}
  .coverage{padding:7px calc(12px + env(safe-area-inset-right)) 7px calc(12px + env(safe-area-inset-left))}
  .coverage .hint{display:none}
  table{font-size:11.5px;min-width:560px}
  th,td{padding:7px 9px}
  footer{font-size:10px;
    padding:10px calc(12px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left))}

  /* tulisan terkecil dinaikkan supaya terbaca di layar HP (dulu 9-9.5 px) */
  .chip span,.stat span,.levels span{font-size:10px}
  .lbl,.tf,.part{font-size:10.5px}
  .card .sub{font-size:12px}
  .card .name{font-size:11px}
  .detail{font-size:11.5px}
  .note,.banner{font-size:12.5px}
  .coverage{font-size:12px}
}
@media (max-width:400px){
  .chip{min-width:88px}
  .card .name{display:none}
  .brand h1{font-size:15px}
}