:root{--bg:#0b0d10;--panel:#14171c;--teks:#d6d9de;--redup:#8a919c;--biru:#2962ff;--merah:#ef5350;--garis:#252a31}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--teks);font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:#8fb0ff}.kecil{font-size:12px;color:var(--redup)}.pesan{color:#ffb4a8}
.kotak{max-width:380px;margin:10vh auto;padding:24px;background:var(--panel);border:1px solid var(--garis);border-radius:10px}
.kotak h1{margin:0 0 16px;font-size:20px}label{display:block;margin:12px 0}input{width:100%;margin-top:4px;padding:9px 10px;border-radius:6px;border:1px solid var(--garis);background:#0e1115;color:var(--teks);font-size:15px}
button,.tombol{display:inline-block;margin-top:8px;padding:9px 16px;border:0;border-radius:6px;background:var(--biru);color:#fff;font-size:14px;cursor:pointer;text-decoration:none}
.qr{display:block;margin:12px auto;background:#fff;padding:8px;border-radius:6px}.cadangan{background:#0e1115;padding:12px;border-radius:6px;font-size:16px;letter-spacing:1px}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--garis)}
.bar .logo{font-weight:700;color:var(--teks);text-decoration:none;margin-right:6px}.bar input{width:90px;margin:0;text-transform:uppercase}
#tf{display:flex;flex-wrap:wrap;gap:4px}
.grup{display:flex;align-items:center;gap:4px;padding:0 10px;border-left:1px solid #2c323b}.grup:first-of-type{border-left:0}
.simbol{font-weight:700;font-size:13px}.sinyal{gap:6px;font-size:12px;font-weight:700}.chip{padding:2px 6px;border-radius:4px;background:#1a1f26}
.judul{position:absolute;left:10px;top:8px;z-index:6;font-size:13px;font-weight:700;color:#d6d9de;pointer-events:none;letter-spacing:.3px}
#tf button{margin:0;padding:5px 8px;background:#1d222a;font-size:12px}#tf button.aktif{background:var(--biru)}
.kanan{margin-left:auto;font-size:13px;padding-left:10px;border-left:1px solid #2c323b}.sebaris{display:inline}.link{background:none;padding:0;margin:0;color:#8fb0ff;font-size:13px}
body{display:flex;flex-direction:column}.bar{flex:none}
#chart{position:relative;flex:1 1 auto;min-height:0}
.tabelwrap{flex:1 1 auto;min-height:0;overflow:auto}table{border-collapse:collapse;width:100%;font-size:13px}
th,td{padding:5px 8px;border-bottom:1px solid var(--garis);text-align:center;white-space:nowrap}th{position:sticky;top:0;background:var(--panel)}
td.kode{text-align:left;font-weight:600}.angka{text-align:right}td.s{cursor:pointer;font-weight:600}td.s:hover{outline:1px solid #fff}
.atribusi{position:fixed;left:8px;bottom:28px;z-index:5;font-size:11px;color:#5d6570;text-decoration:none}
.kunci{display:inline-block;margin-top:4px;padding:6px 8px;background:#0e1115;border-radius:4px;font-size:15px;letter-spacing:1px;word-break:break-all;user-select:all}
.kecilbtn{margin:0;padding:5px 8px;background:#1d222a;font-size:12px}
.lapisan{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}.labeltf{position:absolute;left:0;top:0;font-size:12px;font-weight:700;white-space:nowrap;text-shadow:0 0 3px #000,0 0 3px #000}
.panel{display:none;position:absolute;top:56px;left:12px;z-index:10;background:var(--panel);border:1px solid var(--garis);border-radius:8px;padding:10px 12px;font-size:13px}
.panel.buka{display:block}.panel table{border-collapse:collapse}.panel th,.panel td{padding:3px 8px;border:0;text-align:center}.panel tr.redup{opacity:.35}
.panel input[type=checkbox]{width:auto;margin:0}.panel label{margin:8px 0 0}
.panelatas{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:6px}.panelatas .link{margin:0}
/* bar atas: satu ukuran, huruf besar */
.bar,.bar *{font-size:12px!important;text-transform:uppercase;letter-spacing:.3px}
.bar button,.bar input,.bar .chip,.bar .logo,.bar .simbol{height:28px;line-height:28px;padding:0 9px;margin:0;border-radius:5px;box-sizing:border-box}
.bar button,.bar .chip{display:inline-flex;align-items:center}.bar input{width:80px}
.bar .logo{display:inline-flex;align-items:center;padding:0 6px;font-weight:700}.bar .simbol{display:inline-flex;align-items:center;font-weight:700}
.bar .link{height:auto;line-height:normal;padding:0}.bar .kanan{display:flex;align-items:center;gap:6px}
.akun{position:relative}.menu{display:none;position:absolute;top:32px;left:10px;z-index:20;background:var(--panel);border:1px solid var(--garis);border-radius:6px;padding:6px;min-width:120px}
.menu.buka{display:block}.menu form{margin:0}.menu button{width:100%;justify-content:flex-start;background:#1d222a}.menu button:hover{background:#2a303a}
/* bar satu baris, padat */
.bar{flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;white-space:nowrap;gap:0;padding:6px 8px;scrollbar-width:thin}
.bar .grup{padding:0 7px;gap:3px;flex:none}.bar button,.bar input{padding:0 7px}.bar input{width:64px}
.bar .sinyal{gap:7px}.bar .chip{background:none;padding:0;height:28px}
.bar .kanan{flex:none;margin-left:auto}
.menu{position:fixed;top:0;left:0}
/* lebih padat: muat ±920 px */
.bar .grup{padding:0 6px}.bar #tf button{padding:0 6px}.bar .sinyal{gap:5px}
.bar input{width:56px}.bar #atur,.bar #skala{padding:0 7px}
.menu .item{display:block;padding:7px 9px;border-radius:5px;color:var(--teks);text-decoration:none;text-transform:uppercase;font-size:12px}.menu .item:hover{background:#2a303a}
.bar,.bar *{letter-spacing:0}.bar{padding:6px 4px}.bar .sinyal{gap:4px}
/* kanan: link Dashboard/Chart lalu username (apa adanya, tidak kapital) paling kanan */
.bar .kanan{display:flex;align-items:center;gap:8px;margin-left:auto;padding-left:8px;border-left:1px solid #2c323b;flex:none}
.bar .navlink{color:#8fb0ff;text-decoration:none;padding:0 4px}.bar .navlink:hover{text-decoration:underline}
.bar .user,.menu button{text-transform:none!important}.akun{position:relative}
.bar .grup{padding:0 4px}.bar #tf button{padding:0 5px}.bar .sinyal{gap:3px}.bar #atur,.bar #skala{padding:0 6px}.bar .kanan{gap:6px;padding-left:6px}
/* satu ukuran huruf untuk seluruh bar */
.bar,.bar *{font-size:11.5px!important}
/* rapat + seragam: tombol TF tersambung, satu ketebalan huruf, kotak simbol lebih lebar */
.bar,.bar *{font-weight:600!important}
.bar .grup{padding:0 5px;gap:2px}.bar .sinyal,.sinyal{font-weight:600!important}
.bar #tf{gap:0}.bar #tf button{border-radius:0;padding:0 7px;border-right:1px solid #0b0d10}
.bar #tf button:first-child{border-radius:5px 0 0 5px}.bar #tf button:last-child{border-radius:0 5px 5px 0;border-right:0}
.bar input{width:96px}.bar .sinyal{gap:6px}
.judul{font-weight:600}
.bar,.bar *{font-size:11px!important}.bar input{width:84px}.bar #tf button{padding:0 5px}.bar .sinyal{gap:4px}.bar .grup{padding:0 4px}.bar #atur,.bar #skala{padding:0 5px}
/* seragam: tombol & input mewarisi jenis huruf halaman (default browser berbeda), satu ukuran 12px */
button,input,select,textarea{font-family:inherit}
.bar,.bar *{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;font-size:12px!important;font-weight:600!important;line-height:28px}
/* chip arah sinyal: kotak berwarna + teks putih, huruf sama persis dengan tombol */
.bar .chip{color:#fff!important;padding:0 7px;border-radius:5px;height:28px}
.bar .chip.naik{background:#2962ff}.bar .chip.turun{background:#d84340}.bar .chip.kosong{background:#2a3038;color:#9aa1ab!important}
.bar .sinyal{gap:3px}
/* chip arah sinyal: teks polos (tanpa kotak), huruf sama dengan tombol, warna lebih terang agar tidak tampak kecil */
.bar .chip,.bar .chip.naik,.bar .chip.turun,.bar .chip.kosong{background:none!important;padding:0 2px;border-radius:0}
.bar .chip.naik{color:#5b8cff!important}.bar .chip.turun{color:#ff5f5c!important}.bar .chip.kosong{color:#8a919c!important}
.bar .sinyal{gap:8px}
/* strip pengaturan kiri bawah chart, samping logo TradingView */
.strip{position:absolute;left:44px;bottom:34px;z-index:6;display:flex;flex-wrap:wrap;gap:0;max-width:calc(100% - 120px);
 background:rgba(11,13,16,.82);border:1px solid #252a31;border-radius:6px;padding:3px 4px;font-size:11px;color:#c9ced6}
.strip .item{display:inline-flex;align-items:center;gap:6px;padding:0 8px;border-left:1px solid #2c323b;white-space:nowrap;line-height:20px}
.strip .item:first-child{border-left:0}.strip b{font-weight:700;color:#e6e9ee}
.strip label{display:inline-flex;align-items:center;gap:3px;margin:0;cursor:pointer}.strip input{width:auto;margin:0;accent-color:#2962ff}
/* strip = tabel tipis: satu baris per TF */
.strip{display:block;padding:0;border-radius:5px;overflow:hidden;max-width:none}
.strip table{border-collapse:collapse;font-size:11px}
.strip th,.strip td{border:1px solid #2c323b;padding:1px 8px;line-height:17px;text-align:center;white-space:nowrap}
.strip th{background:#14171c;font-weight:600;color:#9aa1ab}.strip td:first-child{font-weight:700;color:#e6e9ee;text-align:left}
.strip tr.redup td{opacity:.35}.strip tr.bawah td{text-align:left}.strip tr.bawah label{display:inline-flex;gap:3px;margin-right:10px}
.menuset{padding:6px 10px;min-width:150px}.menuset label{display:flex;align-items:center;gap:7px;margin:4px 0;font-size:12px;text-transform:none;cursor:pointer;color:var(--teks)}
.menuset input{width:auto;margin:0;accent-color:#2962ff}
/* strip mendatar: satu baris, sekat tipis antar TF */
.strip th{display:none}.strip td{padding:2px 8px;line-height:18px;text-align:left}
.strip td b{margin-right:6px;font-weight:700;color:#e6e9ee}.strip td label{display:inline-flex;align-items:center;gap:3px;margin:0 6px 0 0;cursor:pointer}
.strip td.redup{opacity:.35}.strip td:first-child{text-align:left}
.strip{max-width:calc(100% - 110px);overflow-x:auto;overflow-y:hidden}.strip td{padding:2px 6px}
/* menu Setting bersubmenu (hover / klik) */
.menuset{padding:4px;min-width:130px}
.menuset .sub{position:relative}
.menuset .judulsub{padding:6px 10px;border-radius:5px;cursor:pointer;text-transform:uppercase;font-size:12px;font-weight:600;color:var(--teks);white-space:nowrap}
.menuset .sub:hover>.judulsub,.menuset .sub.buka>.judulsub{background:#2a303a}
.menuset .flyout{display:none;position:absolute;left:100%;top:-4px;margin-left:4px;background:var(--panel);border:1px solid var(--garis);border-radius:6px;padding:6px 10px;min-width:150px}
.menuset .sub:hover>.flyout,.menuset .sub.buka>.flyout{display:block}
.menuset .flyout label{display:flex;align-items:center;gap:7px;margin:4px 0;font-size:12px;cursor:pointer;color:var(--teks);white-space:nowrap}
/* strip bawah: hanya centang TF */
.strip td label{margin:0;gap:4px;font-weight:600;color:#e6e9ee}
/* dashboard: kolom Symbol maksimal ±10 karakter */
#tabel th:first-child,#tabel td.kode{width:10ch;max-width:10ch;overflow:hidden;text-overflow:ellipsis}
/* dashboard: tabel selebar isinya (tanpa gap kosong) */
#tabel{width:auto}#tabel th,#tabel td{padding:5px 10px}
/* dashboard dibelah: tabel padat kiri + chart kanan */
.belah{flex:1 1 auto;min-height:0;display:flex}
.belah .tabelwrap{flex:none;overflow:auto;border-right:1px solid var(--garis)}
#tabel th,#tabel td{padding:3px 6px;font-size:12px}#tabel td.kode{width:auto}
td.s.pilih{outline:2px solid #fff;outline-offset:-2px}
.panelchart{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.panelatas2{display:flex;justify-content:space-between;align-items:center;padding:4px 10px;font-size:12px;color:var(--redup);border-bottom:1px solid var(--garis)}
.panelatas2 a{text-decoration:none;font-size:15px;visibility:hidden}.panelchart.ada .panelatas2 a{visibility:visible}
.panelchart iframe{flex:1 1 auto;border:0;width:100%;background:var(--bg)}
/* dashboard: Symbol & Value selebar isinya; pemisah frame tabel | chart */
#tabel th:first-child,#tabel td.kode,#tabel th.angka,#tabel td.angka{width:1%;max-width:none;white-space:nowrap}
#tabel td.angka{padding-left:10px}
.belah .tabelwrap{border-right:0}
.pemisah{flex:none;width:7px;cursor:col-resize;background:#1a1f26;border-left:1px solid #2c323b;border-right:1px solid #2c323b}
.pemisah:hover{background:#2962ff}
/* dashboard: sel S latar hitam, teks berwarna */
td.s{background:transparent;color:#8a919c}td.s:hover{background:#161a20}td.s.pilih{background:#1a1f26;outline:1px solid #8fb0ff;outline-offset:-1px}
/* tabel bisa ditutup: klik pemisah */
.belah .tabelwrap{transition:max-width .2s ease;max-width:100vw}
.belah .tabelwrap.tutup{max-width:0!important;overflow:hidden}
.pemisah{width:12px;display:flex;align-items:center;justify-content:center;user-select:none}
.pemisah span{font-size:9px;color:#8a919c;line-height:1}.pemisah:hover span{color:#fff}
/* halaman login/2FA/aktivasi: latar dogfight + kotak semi-transparan */
.latar{position:fixed;inset:0;background:#05070a url(/static/dogfight.svg) center/cover no-repeat;z-index:0}
.kotak{position:relative;z-index:1;background:rgba(20,23,28,.80);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* form login menyatu dengan latar: lebih transparan + blur kuat */
.kotak{background:rgba(12,14,18,.52);backdrop-filter:blur(14px) saturate(.8);-webkit-backdrop-filter:blur(14px) saturate(.8);border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 40px rgba(0,0,0,.55)}
.kotak h1{font-size:15px;letter-spacing:.6px;text-transform:uppercase;color:#e6e9ee}
.kotak input{background:rgba(8,10,13,.7)}
.kotak h1{text-transform:none}
/* latar login: foto badai gelap (WebP 62 KB) + penggelap & vignette; tulisan DOGFIGHT */
.latar{background:
  radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 35%, rgba(0,0,0,.75) 100%),
  linear-gradient(rgba(2,3,5,.35), rgba(2,3,5,.6)),
  #05070a url(/static/latar.webp) center/cover no-repeat}
.merek{position:relative;z-index:1;margin:9vh auto 0;text-align:center;font-family:"Times New Roman",Georgia,serif;font-weight:700;
  font-size:clamp(38px,7vw,92px);letter-spacing:.32em;padding-left:.32em;color:rgba(214,220,230,.88);
  text-shadow:0 0 22px rgba(0,0,0,.95),0 0 3px rgba(255,255,255,.25)}
.merek+.kotak{margin-top:4vh}
.panelatas2 .perbesar{visibility:hidden;font-size:16px;line-height:1;padding:0 4px;margin:0}.panelchart.ada .panelatas2 .perbesar{visibility:visible}
/* di bawah DOGFIGHT: BACAKAK SERO (sedikit lebih besar dari judul kotak 15px) + tagline lebih kecil */
.merek2,.merek3{position:relative;z-index:1;text-align:center;color:rgba(214,220,230,.88);text-shadow:0 0 12px rgba(0,0,0,.95)}
.merek2{margin-top:6px;font-size:18px;font-weight:700;letter-spacing:.35em;padding-left:.35em}
.merek3{margin-top:6px;font-size:13px;letter-spacing:.04em;color:rgba(214,220,230,.7)}
.merek3+.kotak{margin-top:4vh}
/* DOGFIGHT dan BACAKAK SERO dirapatkan */
.merek{line-height:1}.merek2{margin-top:2px}
/* tagline: pojok kanan bawah, rata kanan */
.merek3{position:fixed;right:18px;bottom:14px;margin:0;text-align:right;font-style:italic}
/* judul kotak login huruf kecil; kutipan kedua di kiri atas (gaya sama dengan kanan bawah) */
.kotak h1{text-transform:lowercase}
.merek3.kiriatas{right:auto;bottom:auto;left:18px;top:14px;text-align:left}
/* versi logic: kanan bawah di dalam form, huruf kecil, gaya kutipan, sedikit lebih kecil */
.versikotak{margin-top:14px;text-align:right;font-size:11.5px;font-style:italic;letter-spacing:.04em;text-transform:lowercase;color:rgba(214,220,230,.6)}
/* form login lebih rapat: margin atas & bawah dipangkas */
.kotak{padding-top:12px;padding-bottom:10px}.kotak form>label:first-child{margin-top:0}.versikotak{margin-top:8px}
/* tombol form menyatu dengan tema gelap (kaca redup), bukan biru mencolok */
.kotak button{background:rgba(255,255,255,.10);color:#e6e9ee;border:1px solid rgba(255,255,255,.18);font-weight:600;letter-spacing:.03em}
.kotak button:hover{background:rgba(255,255,255,.18)}
/* daftar simbol sendiri (umum.js), sama di Android / Mac / desktop */
.daftarsimbol{display:none;position:fixed;z-index:60;width:260px;max-height:60vh;overflow-y:auto;padding:3px 0;background:#171b21;border:1px solid #2f3540;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.daftarsimbol.buka{display:block}
.daftarsimbol button{display:flex;gap:8px;align-items:baseline;width:100%;text-align:left;padding:7px 12px;background:none;border:0;border-radius:0;color:#c9ced6;font:12px -apple-system,system-ui,Roboto,sans-serif;cursor:pointer}
.daftarsimbol button b{font-weight:600;color:#e6e9ee;min-width:62px}.daftarsimbol button span{color:#8a929c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.daftarsimbol button:hover,.daftarsimbol button.aktif{background:#1d2b4f}
.terang .daftarsimbol{background:#fff;border-color:#d9dde3;box-shadow:0 6px 18px rgba(0,0,0,.15)}.terang .daftarsimbol button{color:#2b3036}.terang .daftarsimbol button b{color:#1f2328}.terang .daftarsimbol button:hover,.terang .daftarsimbol button.aktif{background:#e3ebff}
