/* Arena Latihan Kaela STONK — warna & ukuran dari ARENA-DESAIN.md */
:root{
  --bg:#232626; --card:#292D2E; --card2:#2F3435; --hdr:#323738; --btn:#4A5354; --btn2:#373E3F; --line:#3A4142;
  --tx:#fff; --mut:#B3BEC1; --mut2:#849194;
  --g:#2ECC71; --gbtn:#24EE89; --brand:#2CD97D; --r:#FF5449; --y:#D7ED47;
  --levg:linear-gradient(90deg,#24EE89,#D7ED47 36.67%,#FF5449 96%);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tx)}
body{font:500 12px/1.4 Poppins,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:var(--tx);background:none;border:0;outline:0;min-width:0}
[hidden]{display:none!important}
.dim{color:var(--mut)} .small{font-size:11px} .g{color:var(--g)} .r{color:var(--r)}
.lbl{color:var(--mut);font-size:12px;font-weight:500}

/* header */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;background:var(--hdr)}
.brand{display:flex;align-items:center;gap:8px;color:var(--tx);text-decoration:none;flex-shrink:0}
.bname{font-size:16px;font-weight:600;letter-spacing:.2px}.bname b{font-weight:700}
.tagline{color:var(--y);font-size:11px;font-weight:500;padding:3px 8px;border-radius:5px;background:rgba(215,237,71,.08);white-space:nowrap}
.wallet{margin-left:auto;display:flex;align-items:center;background:var(--bg);border-radius:6px;padding:3px}
.saldo{display:flex;align-items:center;gap:6px;padding:0 10px;height:30px;font-weight:600;font-size:13px}
.saldo small{color:var(--mut);font-weight:500;font-size:11px}
.koin{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#C2A633;color:#fff;font-size:11px;font-weight:700;flex-shrink:0}
.btn-brand{background:var(--brand);color:#000;font-weight:600;border-radius:5px;height:30px;padding:0 14px;font-size:13px}
.btn-brand:active,.buy:active,.sell:active{filter:brightness(.92)}
.btn-ghost{background:var(--btn2);color:var(--mut);border-radius:6px;height:38px;font-weight:600}
.wide{width:100%;margin-top:10px;height:40px}
.strip-mainan{display:none;text-align:center;font-size:11px;color:var(--y);background:rgba(215,237,71,.07);padding:4px 10px}

/* grid */
.grid{display:grid;gap:8px;padding:8px 14px 14px;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"pair" "chart" "panel" "bottom"}
.card{background:var(--card);border-radius:8px;min-width:0}
.pair{grid-area:pair;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;min-height:44px}
.pair-l{display:flex;align-items:center;gap:8px;min-width:0}
.sym-ic{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#5a6fe0,#2a3a8f);font-size:11px;font-weight:700}
.sym{font-size:14px;font-weight:600}
.px{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.chg{font-size:14px;font-weight:600}
.won{color:var(--mut);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.won b{color:var(--g)} .won i{font-style:normal;color:var(--tx)}
.trades{grid-area:trades;display:none}
.panel{grid-area:panel}
.bottom{grid-area:bottom;min-height:180px}
.chartbox{grid-area:chart;display:flex;flex-direction:column;overflow:hidden}

/* timeframe bar */
.tfbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:8px 10px 6px}
.round{order:-1;width:100%;font-size:12px}.round b{font-variant-numeric:tabular-nums}
.tfs{display:flex;gap:2px;align-items:center;flex:1;min-width:0}
.tfs button{padding:2px 7px;border-radius:6px;color:var(--mut);font-size:12px;font-weight:500}
.tfs button.on{color:var(--tx);font-weight:600}
.tfs .more{position:relative}
.tfs .more>button{background:var(--card2);font-weight:600;white-space:nowrap}
.tfs button{white-space:nowrap}
.menu{position:absolute;top:24px;left:0;z-index:15;background:var(--hdr);border-radius:8px;padding:4px;box-shadow:0 6px 18px rgba(0,0,0,.45);display:flex;flex-direction:column}
.menu button{text-align:left;padding:6px 14px}
.tfs .xtra{display:none}
.tfs .more>button.on{color:var(--tx)}
.tfr{display:flex;gap:4px}
.ic{width:28px;height:28px;border-radius:6px;color:var(--mut);font-size:15px;display:inline-grid;place-items:center}
.ic:hover,.ic.on{background:var(--card2);color:var(--tx)}

/* chart */
.chartwrap{position:relative;display:flex;height:360px;border-top:1px solid rgba(255,255,255,.04)}
.chartin{position:relative;flex:1;min-width:0}
#chart{position:absolute;inset:0}
#draw{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;touch-action:none}
#draw.aktif{pointer-events:auto;cursor:crosshair}
#draw.hapus{cursor:not-allowed}
.wm{position:absolute;left:50%;top:50%;transform:translate(-60%,-50%);font-size:20px;font-weight:700;color:rgba(255,255,255,.035);pointer-events:none;z-index:2;white-space:nowrap}
.loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--mut);z-index:4;pointer-events:none}
.tools{display:none;flex-direction:column;gap:2px;padding:6px 4px;border-right:1px solid rgba(255,255,255,.05);overflow-y:auto;flex-shrink:0;width:38px}
.tools.buka{display:flex}
.tools button{width:30px;height:30px;border-radius:6px;display:grid;place-items:center;color:var(--mut)}
.tools button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round}
.tools button:hover{background:var(--card2);color:var(--tx)}
.tools button.on{background:rgba(44,217,125,.14);color:var(--brand)}
.tools hr{border:0;border-top:1px solid rgba(255,255,255,.07);margin:3px 2px}
.bsv{width:22px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;padding:4px 0;font-size:9px;gap:3px}
.bsvbar{flex:1;width:4px;border-radius:2px;background:var(--r);position:relative;overflow:hidden}
.bsvbar i{position:absolute;left:0;right:0;top:0;background:var(--gbtn);transition:height .6s}
.chartbox.fs{position:fixed;inset:0;z-index:40;border-radius:0}
.chartbox.fs .chartwrap{flex:1;height:auto}

/* last trades */
.card-h{display:flex;align-items:center;gap:18px;padding:0 12px;height:44px;border-bottom:1px solid rgba(255,255,255,.05)}
.card-h .tab{font-size:14px;font-weight:600;height:44px;display:flex;align-items:center;border-bottom:2px solid transparent}
.card-h .tab.on{border-color:var(--brand)}
.card-h .tab.dim{margin-left:auto;font-size:12px;font-weight:500}
.lt-head,.lt>div{display:grid;grid-template-columns:1.1fr 1fr .9fr;padding:0 12px;font-variant-numeric:tabular-nums}
.lt-head{color:var(--mut);font-size:11px;padding-top:8px;padding-bottom:4px}
.lt-head span:not(:first-child),.lt>div span:not(:first-child){text-align:right}
.lt{overflow:hidden;font-size:11px;font-weight:600;line-height:18px}
.lt>div span:nth-child(2),.lt>div span:nth-child(3){color:var(--tx);font-weight:500}
.bsh{display:flex;align-items:center;gap:4px;padding:8px 12px;font-size:10px}
.bsh .b,.bsh .s{width:16px;height:16px;display:grid;place-items:center;border:1px solid var(--g);color:var(--g);border-radius:3px;font-weight:700}
.bsh .s{border-color:var(--r);color:var(--r)}
.bshbar{flex:1;height:14px;background:rgba(255,84,73,.25);position:relative;border-radius:2px;overflow:hidden}
.bshbar i{position:absolute;left:0;top:0;bottom:0;background:rgba(46,204,113,.3);transition:width .6s}

/* trade panel */
.pbody{padding:10px 12px 14px;display:flex;flex-direction:column;gap:8px}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.levbox,.inbox{display:flex;align-items:center;gap:6px;background:var(--bg);border-radius:6px;height:40px;padding:0 4px 0 12px}
.levbox input{flex:1;font-size:14px;font-weight:600}
.levbox .x{color:var(--mut)}
.levbox button,.inbox button{height:32px;min-width:40px;padding:0 8px;border-radius:6px;background:var(--btn);color:var(--mut);font-size:12px;font-weight:600}
.inbox input{flex:1;font-size:14px;font-weight:600;height:100%}
.tg{font-size:11px;font-weight:700;width:22px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:18px;background:transparent;margin:2px 0;--p:30%}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--levg) 0 0/var(--p) 100% no-repeat,var(--line)}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--levg) 0 0/var(--p) 100% no-repeat,var(--line)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;margin-top:-5px;box-shadow:0 0 0 3px rgba(0,0,0,.25)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff}
.otabs{display:flex;gap:16px;border-bottom:1px solid rgba(255,255,255,.06)}
.otabs button{padding:6px 0;color:var(--mut);font-weight:600;font-size:12px;border-bottom:2px solid transparent}
.otabs button.on{color:var(--tx);border-color:var(--tx)}
.fld{display:flex;flex-direction:column;gap:6px}
.chk{display:flex;align-items:center;gap:6px;cursor:pointer}
.chk input{accent-color:var(--brand);width:14px;height:14px}
.tpsl{display:flex;flex-direction:column;gap:6px}
.hint{color:var(--mut2);font-size:11px;margin:0}
.bs{display:flex;height:40px;margin-top:4px}
.bs button{flex:1;color:#fff;font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center;gap:6px}
.buy{background:var(--gbtn);border-radius:8px 0 0 8px;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);margin-right:-4px}
.sell{background:var(--r);border-radius:0 8px 8px 0;clip-path:polygon(10px 0,100% 0,100% 100%,0 100%);margin-left:-4px}
.bi{display:inline-grid;place-items:center;width:20px;height:20px;border:1.5px solid #fff;border-radius:50%;font-size:11px}
.bs button:disabled{opacity:.45;cursor:not-allowed}
.liq{display:flex;justify-content:space-between;gap:10px}
.liq>div{display:flex;flex-direction:column;gap:2px}.liq .ra{text-align:right}
.liq b,#sizeInfo{font-weight:500;font-variant-numeric:tabular-nums}
.fee summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;color:var(--mut)}
.fee summary::after{content:"⌄"}
.fee[open] summary::after{content:"⌃"}
.fee label{display:flex;gap:6px;align-items:center;margin-top:6px;color:var(--mut)}
.fee input{accent-color:var(--brand)}
.msg{min-height:16px;font-size:12px;color:var(--y)}
.msg.err{color:var(--r)} .msg.ok{color:var(--g)}

/* bottom tabs */
.btabs{display:flex;gap:4px;overflow-x:auto;padding:0 8px;border-bottom:1px solid rgba(255,255,255,.05);scrollbar-width:none}
.btabs::-webkit-scrollbar{display:none}
.btabs button{height:40px;padding:0 10px;color:var(--mut2);font-size:14px;font-weight:500;white-space:nowrap;border-bottom:2px solid transparent}
.btabs button.on{color:var(--tx);border-color:var(--brand)}
.btabs span{margin-left:2px}
.bbody{padding:4px 12px 12px;overflow-x:auto}
.empty{color:var(--mut2);text-align:center;padding:30px 10px}
.bar-aksi{display:flex;justify-content:flex-end;gap:8px;padding:6px 0}
.mini{height:28px;padding:0 10px;border-radius:6px;background:var(--btn2);color:var(--tx);font-size:11px;font-weight:600}
.mini.r{background:rgba(255,84,73,.15);color:var(--r)}
table.tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tbl th{color:var(--mut2);font-weight:500;text-align:left;padding:10px 8px;font-size:12px;white-space:nowrap}
.tbl td{padding:10px 8px;border-top:1px solid rgba(255,255,255,.04);white-space:nowrap}
.tbl td.nm{max-width:150px;overflow:hidden;text-overflow:ellipsis}
.chip{display:inline-block;font-size:10px;padding:2px 6px;border-radius:4px;margin-right:3px;font-weight:500}
.chip.buy{background:rgba(46,204,113,.1);color:var(--g);clip-path:none;margin:0 3px 0 0}
.chip.sell{background:rgba(255,84,73,.1);color:var(--r);clip-path:none;margin:0 3px 0 0}
.chip.lev{background:var(--hdr);color:var(--mut)}
.chip.me{background:rgba(44,217,125,.15);color:var(--brand)}
.chip.bot{background:rgba(215,237,71,.12);color:var(--y);text-transform:uppercase;letter-spacing:.3px}
.won .chip{margin-right:6px}
.av{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px;font-size:10px;font-weight:700;margin-right:6px;vertical-align:middle;color:#fff}
.rank{display:inline-block;width:22px;color:var(--mut)}
.rank.t1{color:#F5C542}.rank.t2{color:#C9D2D6}.rank.t3{color:#D08A4E}
.ltm{display:none}

/* modal */
.modal{position:fixed;inset:0;z-index:60;background:rgba(10,12,12,.7);display:grid;place-items:center;padding:16px}
.mbox{width:100%;max-width:380px;background:var(--hdr);border-radius:10px;padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px}
.mh{display:flex;justify-content:space-between;align-items:center;font-size:15px}
.mtabs{display:flex;background:var(--bg);border-radius:6px;padding:3px}
.mtabs button{flex:1;height:32px;border-radius:5px;color:var(--mut);font-weight:600}
.mtabs button.on{background:var(--btn);color:var(--tx)}
.quick{display:flex;gap:6px}.quick button{flex:1;height:30px;border-radius:6px;background:var(--btn2);color:var(--mut);font-weight:600}
.nama{background:var(--bg);border-radius:6px;height:32px;padding:0 10px;width:150px;text-align:right}
.mt{margin-top:6px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;z-index:70;background:var(--hdr);border:1px solid var(--line);color:var(--tx);padding:10px 14px;border-radius:8px;transition:.25s;pointer-events:none;max-width:calc(100% - 32px);text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.toast.on{opacity:1;transform:translateX(-50%)}
.foot{color:var(--mut2);font-size:11px;padding:4px 14px 24px;text-align:center}
.foot a{color:var(--brand)}

/* HP: tabel jadi kartu */
@media (max-width:767px){
  .tagline,.won{display:none}
  .strip-mainan{display:block}
  .top{height:48px;padding:0 10px}
  .bname{font-size:14px}
  .saldo{padding:0 6px;font-size:12px}
  .btn-brand{padding:0 10px}
  .grid{padding:6px 10px 10px;gap:6px}
  .chartwrap{height:340px}
  .tbl thead{display:none}
  .tbl,.tbl tbody{display:block}
  .tbl tr{display:block;background:var(--card2);border-radius:8px;margin:8px 0;padding:8px 10px}
  .tbl td{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border:0;white-space:normal;text-align:right}
  .tbl td::before{content:attr(data-l);color:var(--mut);font-weight:500;text-align:left}
  .tbl td.hd{justify-content:flex-start;font-weight:600;padding-bottom:6px}
  .tbl td.hd::before{display:none}
  .tbl td.nm{max-width:none}
  .ltm{display:block}
}
@media (min-width:768px){ .bsv{display:none} }
@media (min-width:768px) and (max-width:1099px){
  .grid{grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"pair pair" "chart panel" "bottom bottom"}
  .chartwrap{height:470px}
}
@media (min-width:1100px){
  .grid{grid-template-columns:minmax(0,1fr) 240px 300px;grid-template-areas:"pair pair panel" "chart trades panel" "bottom bottom bottom"}
  .trades{display:flex;flex-direction:column}
  .lt{flex:1}
  .chartwrap{height:520px}
  .tools{display:flex}
  .round{order:0;width:auto;margin-left:auto}
  .tfbar{flex-wrap:nowrap}
  .tfs{flex:none}
  .tfs .xtra{display:inline-block}
  .tfs .more,#btnTools{display:none}
  .m-only{display:none}
}

/* aset (STONKS/BTC) & akun — 28 Okt 2026 */
.sym-ic{background:none;overflow:hidden;flex-shrink:0}
.sym-ic svg{width:100%;height:100%;display:block}
.aset{position:relative;display:flex}
.aset-btn{display:flex;align-items:center;gap:8px;padding:3px 6px 3px 3px;border-radius:6px;color:var(--tx)}
.aset-btn:hover,.aset-btn:focus-visible{background:var(--card2)}
.aset-btn .caret{color:var(--mut);font-size:11px}
.aset-menu{top:32px;min-width:210px;gap:2px}
.aset-menu button{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;text-align:left;color:var(--tx)}
.aset-menu button:hover,.aset-menu button.on{background:var(--card2)}
.aset-menu small{display:block;color:var(--mut);font-size:11px;font-weight:400}
.btn-akun{display:flex;align-items:center;gap:6px;height:36px;margin-left:8px;padding:0 10px 0 4px;border-radius:6px;background:var(--btn2);color:var(--tx);font-weight:600;font-size:13px;flex-shrink:0;max-width:160px}
.btn-akun .avk{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--bg);font-size:13px;flex-shrink:0}
.btn-akun.masuk .avk{background:var(--brand);color:#000}
#akNm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.akisi{display:flex;flex-direction:column;gap:8px}
.akisi p{margin:0}
.akisi .chk{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mut)}
.link{color:var(--brand);font-size:13px;font-weight:500;padding:6px 0}
.lbtabs{display:flex;gap:6px;margin:8px 0 6px;flex-wrap:wrap}
.lbtabs button{height:30px;padding:0 12px;border-radius:6px;background:var(--card2);color:var(--mut);font-size:12px;font-weight:600}
.lbtabs button.on{background:var(--btn);color:var(--tx)}
.hint a{color:var(--brand)}
@media (max-width:767px){
  .btn-akun{margin-left:6px;padding:0 3px;height:32px}
  #akNm{display:none}
}
@media (max-width:400px){ .saldo small{display:none} .bname{font-size:13px} }
.tpmode{display:flex;background:var(--bg);border-radius:6px;padding:3px}
.tpmode button{flex:1;height:28px;border-radius:5px;color:var(--mut);font-weight:600;font-size:12px}
.tpmode button.on{background:var(--btn);color:var(--tx)}
#tpslHint b{font-weight:600}

/* gerbang: belum masuk = cuma kotak masuk (Olan 28 Okt) */
body.gerbang .grid,body.gerbang .foot,body.gerbang .strip-mainan,body.gerbang .wallet,body.gerbang #btnAkun{display:none}
body.gerbang #akun{background:var(--bg)}
.tunggu-st{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mut);background:var(--bg);border-radius:6px;padding:8px 10px}
.tunggu-st .titik{width:8px;height:8px;border-radius:50%;background:var(--y);flex-shrink:0;animation:kedip 1.4s infinite}
@keyframes kedip{50%{opacity:.25}}

/* deposit lewat persetujuan + ranking (28 Okt) */
.mtunggu{background:rgba(215,237,71,.08);color:var(--y);border-radius:6px;padding:8px 10px;font-size:12px;display:flex;flex-direction:column;gap:4px}
.mtunggu b{color:var(--tx)}
.mdepo{display:flex;flex-direction:column;gap:6px}
.tbl tr.saya td{background:rgba(44,217,125,.06)}