/* QUADLUX // terminal dosir — bahasa visual landing (crimson, sudut terpotong) untuk app.html.
   Dimuat paling akhir; hanya berlaku di body.app. Efek bergerak dibatasi ke garis 1px agar buku order tetap ringan. */
body.app{
  --pk:#ff3b5f;--pk2:#ff7a90;--pk-bg:rgba(255,59,95,.08);--pk-ln:rgba(255,59,95,.3);--pk-ln2:rgba(255,59,95,.16);
  --cy:'Big Shoulders Display','Geist',sans-serif;--ui:'Chakra Petch','Geist',sans-serif;
  --bg:#070306;--panel:rgba(10,4,8,.9);--panel-in:rgba(16,6,11,.92);
  --cut:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  --cut-s:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  --cut-xs:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
  background:#070306;
}
/* latar statis: cahaya crimson + garis pindai + kisi tipis (tidak dianimasikan) */
body.app::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
   radial-gradient(900px 420px at 50% -80px,rgba(255,59,95,.16),transparent 70%),
   radial-gradient(600px 400px at 100% 100%,rgba(255,59,95,.07),transparent 70%),
   repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 1px,transparent 1px 3px),
   linear-gradient(rgba(255,59,95,.035) 1px,transparent 1px) 0 0/48px 48px,
   linear-gradient(90deg,rgba(255,59,95,.035) 1px,transparent 1px) 0 0/48px 48px}
body.app ::selection{background:rgba(255,59,95,.35)}
body.app .fine{color:var(--ink-3)}

/* ---------- bar atas: kartu identitas market ---------- */
body.app .top{height:60px;gap:14px;padding:0 16px 0 14px;position:relative;background:linear-gradient(180deg,rgba(255,59,95,.07),rgba(7,3,6,.55));border-bottom:1px solid var(--pk-ln2)}
body.app .top::after{content:"";position:absolute;left:0;bottom:-1px;width:220px;height:1px;background:linear-gradient(90deg,var(--pk),transparent);box-shadow:0 0 10px var(--pk)}
body.app .mkt-btn{height:42px;padding:0 12px 0 14px;gap:10px;border-radius:0;border:1px solid var(--pk-ln);clip-path:var(--cut-s);background:linear-gradient(135deg,rgba(255,59,95,.14),rgba(10,4,8,.6) 70%);transition:background .25s,border-color .25s}
body.app .mkt-btn:hover{border-color:var(--pk);background:linear-gradient(135deg,rgba(255,59,95,.24),rgba(10,4,8,.6) 70%)}
body.app .mkt-btn svg{color:var(--pk)}
body.app .mkt-sym{font:900 26px/1 var(--cy);letter-spacing:.03em;text-transform:uppercase;color:#fff;text-shadow:0 0 18px rgba(255,59,95,.45)}
body.app .top .tag{border-radius:0;height:19px;font:700 10px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--pk);background:rgba(255,59,95,.1);border:1px solid var(--pk-ln)}
body.app .fav{border-radius:0;width:42px;height:42px;clip-path:var(--cut-xs);border-color:var(--pk-ln2);background:rgba(10,4,8,.6)}
body.app .fav:hover{border-color:var(--pk-ln);color:var(--ink)}
body.app .fav.on{color:var(--amber);border-color:rgba(242,180,83,.45);text-shadow:0 0 10px rgba(242,180,83,.6)}
body.app .stats{gap:0}
body.app .stats div{padding:0 16px;border-left:1px solid var(--pk-ln2);gap:3px}
body.app .stats div:first-child{border-left:0;padding-left:6px}
body.app .stats span{font:600 9.5px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
body.app .stats b{font:500 13px/1.1 var(--mono);letter-spacing:-.01em}
body.app .stats div:first-child b{font-size:15px;text-shadow:0 0 14px rgba(255,59,95,.35)}

/* ---------- grid: panel bersudut terpotong ---------- */
body.app .grid{gap:6px;padding:6px;background:transparent}
body.app .pane{position:relative;clip-path:var(--cut);border:1px solid var(--pk-ln2);
  background:
   linear-gradient(135deg,transparent 7.2px,rgba(255,59,95,.55) 7.2px 8.6px,transparent 8.6px) 0 0/14px 14px no-repeat border-box,
   linear-gradient(-45deg,transparent 7.2px,rgba(255,59,95,.55) 7.2px 8.6px,transparent 8.6px) 100% 100%/14px 14px no-repeat border-box,
   var(--panel)}
/* tanda sudut kanan atas */
body.app .pane::after{content:"";position:absolute;right:7px;top:7px;width:6px;height:6px;border-top:1px solid var(--pk);border-right:1px solid var(--pk);pointer-events:none;z-index:3}
/* cahaya berjalan di tepi atas: elemen 1px, hanya transform (murah) */
body.app .pane::before{content:"";position:absolute;left:0;top:0;height:1px;width:38%;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--pk),#fff,var(--pk),transparent);
  transform:translateX(-100%);animation:cyEdge 6.5s linear infinite;will-change:transform}
body.app .center::before{animation-delay:1.6s}
body.app .side::before{animation-delay:3.1s}
body.app .ticket::before{animation-delay:4.4s}
@keyframes cyEdge{0%{transform:translateX(-100%)}55%,100%{transform:translateX(280%)}}

/* kepala panel bersama: daftar, chart, buku, tiket */
body.app .cy-ph,body.app .chart-bar,body.app .ph-tabs{flex:none;height:36px;display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--pk-ln2);
  background:linear-gradient(90deg,rgba(255,59,95,.09),transparent 65%)}
body.app .cy-ph{font:700 11.5px var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--pk)}
body.app .cy-ph b,body.app .chart-bar::before,body.app .side .ph-tabs::before{font:900 19px/1 var(--cy);letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px rgba(255,59,95,.75)}
body.app .cy-ph em{margin-left:auto;margin-right:12px;font:600 9.5px var(--ui);font-style:normal;letter-spacing:.14em;color:var(--ink-3)}

/* ---------- daftar market ---------- */
body.app .list-search{padding:10px 10px 8px}
body.app .list-search input{height:34px;border-radius:0;clip-path:var(--cut-s);border-color:var(--pk-ln2);background:rgba(255,59,95,.035);font:600 12px var(--ui);letter-spacing:.1em;text-transform:uppercase;transition:border-color .2s,background .2s}
body.app .list-search input::placeholder{color:var(--ink-3)}
body.app .list-search input:focus{border-color:var(--pk);background:rgba(255,59,95,.07)}
body.app .list-search kbd{top:18px;border-radius:0;font:600 10px var(--ui);letter-spacing:.06em;color:var(--pk);border-color:var(--pk-ln)}
body.app .cats{gap:3px}
body.app .cats button{height:22px;padding:0 8px;border-radius:0;clip-path:var(--cut-xs);font:600 10.5px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border:1px solid rgba(255,255,255,.07);transition:color .2s,border-color .2s,background .2s}
body.app .cats button:hover{color:#fff;border-color:var(--pk-ln)}
body.app .cats button.on{color:#fff;border-color:var(--pk);background:rgba(255,59,95,.18);box-shadow:inset 0 0 12px rgba(255,59,95,.35)}
body.app .list-h{border-bottom-color:var(--pk-ln2);border-top:1px solid rgba(255,255,255,.04);background:rgba(0,0,0,.25)}
body.app .list-h button{font:600 9.5px var(--ui);letter-spacing:.16em;text-transform:uppercase}
body.app .list-h button.on{color:var(--pk)}
body.app .row{border-bottom-color:rgba(255,59,95,.05);transition:background .15s}
body.app .row:hover{background:rgba(255,59,95,.05)}
body.app .row.on{background:linear-gradient(90deg,rgba(255,59,95,.2),rgba(255,59,95,.03) 80%);box-shadow:inset 2px 0 0 var(--pk)}
body.app .row .s b{font:700 13px var(--ui);letter-spacing:.04em}
body.app .row.on .s b{color:#fff;text-shadow:0 0 10px rgba(255,59,95,.6)}
body.app .row .p,body.app .row .c{font-family:var(--mono);font-size:11.5px;letter-spacing:-.01em}
body.app .lev-chip{border-radius:0;font:600 9px var(--ui);letter-spacing:.06em;color:var(--pk2);border-color:var(--pk-ln2);padding:0 4px}
body.app .rows::-webkit-scrollbar,body.app .ticket::-webkit-scrollbar,body.app .rd::-webkit-scrollbar{width:6px}
body.app .rows::-webkit-scrollbar-thumb,body.app .ticket::-webkit-scrollbar-thumb,body.app .rd::-webkit-scrollbar-thumb{background:rgba(255,59,95,.25)}
body.app .rows,body.app .ticket,body.app .rd{scrollbar-color:rgba(255,59,95,.3) transparent}

/* ---------- tengah: chart + bacaan ---------- */
body.app .chart-bar::before{content:"02"}
body.app .tf{gap:3px}
body.app .tf button{height:24px;padding:0 9px;border-radius:0;clip-path:var(--cut-xs);font:600 11px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border:1px solid transparent;transition:color .2s,border-color .2s,background .2s}
body.app .tf button:hover{color:#fff;border-color:var(--pk-ln2)}
body.app .tf button.on{color:#fff;background:rgba(255,59,95,.22);border-color:var(--pk);box-shadow:inset 0 0 12px rgba(255,59,95,.45);text-shadow:0 0 8px rgba(255,59,95,.9)}
body.app .chart-note{font:600 10px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-right:12px}
body.app .chart-note::before{content:"";display:inline-block;width:5px;height:5px;margin-right:7px;vertical-align:1px;background:var(--pk);box-shadow:0 0 6px var(--pk)}
/* bingkai bidik di atas kanvas chart (statis, tembus klik) */
body.app .chart{background:#000}
body.app .chart::after{content:"";position:absolute;inset:8px;z-index:4;pointer-events:none;
  background:
   linear-gradient(var(--pk),var(--pk)) 0 0/14px 1px,linear-gradient(var(--pk),var(--pk)) 0 0/1px 14px,
   linear-gradient(var(--pk),var(--pk)) 100% 0/14px 1px,linear-gradient(var(--pk),var(--pk)) 100% 0/1px 14px,
   linear-gradient(var(--pk),var(--pk)) 0 100%/14px 1px,linear-gradient(var(--pk),var(--pk)) 0 100%/1px 14px,
   linear-gradient(var(--pk),var(--pk)) 100% 100%/14px 1px,linear-gradient(var(--pk),var(--pk)) 100% 100%/1px 14px;
  background-repeat:no-repeat;opacity:.7}
body.app .readings{gap:6px;padding:6px;background:rgba(0,0,0,.35);border-top:1px solid var(--pk-ln2);height:256px}
body.app .rd{position:relative;background:var(--panel-in);border:1px solid rgba(255,59,95,.12);clip-path:var(--cut-s);padding:11px 13px;gap:9px}
body.app .rd::before{content:"";position:absolute;left:9px;top:0;width:22px;height:2px;background:var(--pk);box-shadow:0 0 8px var(--pk)}
body.app .rd h4{font:700 11px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--pk);padding-bottom:7px;border-bottom:1px solid var(--pk-ln2);flex:none}
body.app .rd-plain{font-size:12.5px;color:var(--ink-2)}
body.app .rd-plain b{color:#fff}
body.app .fr{font-family:var(--mono);font-size:11px}
body.app .fr span:first-child{font:600 10.5px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
body.app .fr.me span:first-child{color:var(--pk);font-weight:700}
body.app .fr .bar{height:7px;border-radius:0;background:repeating-linear-gradient(90deg,rgba(255,59,95,.1) 0 3px,transparent 3px 5px)}
body.app .fr .bar{padding:0;border:0;margin:0;display:block}
body.app .fr .bar i{border-radius:0}
body.app .fr .bar::after{background:rgba(255,255,255,.35)}
body.app .fr b{font-weight:500}
body.app .liq-big b{font:800 46px/.9 var(--cy);letter-spacing:.01em;color:var(--pk);text-shadow:0 0 22px rgba(255,59,95,.45)}
body.app .liq-big span{font:600 10.5px var(--ui);letter-spacing:.1em;text-transform:uppercase}
body.app .kv{border-top-color:var(--pk-ln2);font-size:11.5px}
body.app .kv span,body.app .rules dt{font:600 10px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);align-self:center}
body.app .kv b,body.app .rules dd{font-family:var(--mono);font-weight:500;font-size:11.5px}
body.app .notes{border-top-color:var(--pk-ln2)}
body.app .notes li::before{border-radius:0;width:5px;height:5px;background:var(--pk);transform:rotate(45deg);box-shadow:0 0 6px rgba(255,59,95,.7)}
body.app .notes li.amber::before{background:var(--amber);box-shadow:0 0 6px rgba(242,180,83,.7)}

/* ---------- buku order + trade ---------- */
body.app .side .ph-tabs::before{content:"03"}
body.app .side .ph-tabs:not(:first-child){border-top:1px solid var(--pk-ln2)}
body.app .side .ph-tabs:not(:first-child)::before{content:"3B"}
body.app .ph-tabs{justify-content:flex-start;font-size:11px}
body.app .ph-tabs .on{position:relative;align-self:stretch;display:flex;align-items:center;font:700 11.5px var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--pk);text-shadow:0 0 10px rgba(255,59,95,.55)}
body.app .ph-tabs .on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--pk);box-shadow:0 0 10px var(--pk)}
body.app .ph-tabs .faint{margin-left:auto;margin-right:12px;font-family:var(--mono);font-size:10.5px}
body.app .book-h{font:600 9.5px var(--ui);letter-spacing:.16em;text-transform:uppercase;padding-top:7px}
body.app .book,body.app .tape{font-family:var(--mono);font-size:11.5px;letter-spacing:-.01em}
body.app .lvl{height:19px}
body.app .lvl:hover{background:rgba(255,59,95,.08)}
body.app .lvl i{opacity:.16}
body.app .asks .lvl i{background:linear-gradient(90deg,transparent,var(--down) 60%)}
body.app .bids .lvl i{background:linear-gradient(90deg,transparent,var(--up) 60%)}
body.app .mid{position:relative;padding:7px 12px;margin:2px 0;border-top:1px solid var(--pk-ln);border-bottom:1px solid var(--pk-ln);background:linear-gradient(90deg,rgba(255,59,95,.14),rgba(255,59,95,.02))}
body.app .mid::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:var(--pk);box-shadow:0 0 10px var(--pk)}
body.app .mid b{font:500 15px var(--mono);color:#fff;letter-spacing:-.01em;text-shadow:0 0 12px rgba(255,59,95,.45)}
body.app .mid span{font-family:var(--mono);font-size:10.5px}
body.app .ratio{height:4px;border-radius:0;margin:7px 12px 9px;gap:2px;background:transparent}
body.app .ratio i{box-shadow:0 0 8px currentColor}
body.app #ratioB{color:var(--up)}body.app #ratioA{color:var(--down)}
body.app .tr{border-bottom:1px solid rgba(255,255,255,.02)}
body.app .tr.liq span:first-child::after{font:700 8.5px var(--ui);letter-spacing:.1em;padding:0 3px;border:1px solid rgba(242,180,83,.5)}
@keyframes trin{from{background:rgba(255,59,95,.14)}to{background:transparent}}

/* ---------- tiket ---------- */
body.app .ticket{padding:0 12px 14px;gap:11px}
body.app .ticket .cy-ph{margin:0 -12px 2px;position:sticky;top:0;z-index:2;background:linear-gradient(90deg,rgba(40,10,20,.97),rgba(12,5,9,.97) 70%)}
body.app .seg{border-radius:0;clip-path:var(--cut-s);border-color:var(--pk-ln2);background:rgba(0,0,0,.3)}
body.app .seg button{border-radius:0;font:700 12px var(--ui);letter-spacing:.14em;text-transform:uppercase;transition:background .2s,color .2s}
body.app .seg button:hover{color:#fff}
body.app .seg button.on{background:rgba(255,59,95,.2);color:#fff;box-shadow:inset 0 0 0 1px var(--pk),inset 0 0 14px rgba(255,59,95,.35)}
body.app .side-seg button{height:34px;clip-path:var(--cut-xs)}
body.app .side-seg button.long.on{background:var(--up);color:#00150d;box-shadow:0 0 18px rgba(47,211,154,.35)}
body.app .side-seg button.short.on{background:var(--down);color:#1d0004;box-shadow:0 0 18px rgba(255,92,108,.35)}
body.app .field{font:600 10px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
body.app .field input{border-radius:0;clip-path:var(--cut-s);border-color:var(--pk-ln2);background:rgba(255,59,95,.03);font-family:var(--mono);font-size:14px;letter-spacing:-.01em;transition:border-color .2s,background .2s}
body.app .field input:focus{border-color:var(--pk);background:rgba(255,59,95,.07)}
body.app .in-u em{font:700 10.5px var(--ui);letter-spacing:.14em;color:var(--pk);top:12px}
body.app .quick{gap:3px}
body.app .quick button{border-radius:0;clip-path:var(--cut-xs);border-color:var(--pk-ln2);font-family:var(--mono);font-size:11px;transition:border-color .2s,color .2s,background .2s}
body.app .quick button:hover{border-color:var(--pk);color:#fff;background:rgba(255,59,95,.1)}
body.app .lev-top{font:600 10px var(--ui);letter-spacing:.16em;text-transform:uppercase;align-items:baseline}
body.app .lev-top b{font:800 24px/1 var(--cy);letter-spacing:.02em;color:var(--pk);text-shadow:0 0 14px rgba(255,59,95,.5)}
/* slider leverage: rel bersegmen + kenop berlian */
body.app .lev input{-webkit-appearance:none;appearance:none;height:16px;background:transparent;accent-color:var(--pk);cursor:pointer}
body.app .lev input::-webkit-slider-runnable-track{height:6px;background:repeating-linear-gradient(90deg,rgba(255,59,95,.35) 0 2px,rgba(255,59,95,.08) 2px 6px)}
body.app .lev input::-moz-range-track{height:6px;background:repeating-linear-gradient(90deg,rgba(255,59,95,.35) 0 2px,rgba(255,59,95,.08) 2px 6px)}
body.app .lev input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-4px;background:var(--pk);border:2px solid #fff;transform:rotate(45deg);box-shadow:0 0 10px var(--pk)}
body.app .lev input::-moz-range-thumb{width:11px;height:11px;border-radius:0;background:var(--pk);border:2px solid #fff;transform:rotate(45deg);box-shadow:0 0 10px var(--pk)}
body.app .lev-ends{font-family:var(--mono)}
body.app .sum{border-top:1px solid var(--pk-ln2);padding:12px 12px 0;margin:0 -12px;gap:6px 10px;background:linear-gradient(180deg,rgba(255,59,95,.05),transparent 60px)}
body.app .sum dt{font:600 10px var(--ui);letter-spacing:.12em;text-transform:uppercase;align-self:center}
body.app .sum dd{font-family:var(--mono);font-weight:500;font-size:12px}
body.app .go{height:46px;border-radius:0;clip-path:var(--cut-s);background:var(--pk);color:#fff;font:700 13px var(--ui);letter-spacing:.16em;text-transform:uppercase;box-shadow:0 0 30px rgba(255,59,95,.35);position:relative;overflow:hidden}
body.app .go:hover{background:#ff5574}
body.app .go::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s cubic-bezier(.16,1,.3,1)}
body.app .go:hover::after{left:120%}
body.app .risk{border-radius:0;clip-path:var(--cut-s)}

/* ---------- bar bawah ---------- */
body.app footer.bar{height:30px;border-top:1px solid var(--pk-ln2);background:rgba(7,3,6,.9);font:600 10px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
body.app footer.bar b{font:500 11px var(--mono);letter-spacing:0;color:#fff}
body.app #barVenue{color:var(--ink-2)}
body.app footer.bar .faint{letter-spacing:.06em;text-transform:none;font:400 11px var(--font)}
body.app footer.bar .bar-r a{color:var(--pk2);transition:color .2s}
body.app footer.bar .bar-r a:hover{color:#fff}

/* ---------- palet ⌘K ---------- */
body.app .pal{background:rgba(7,3,6,.72)}
body.app .pal-box{border-radius:0;clip-path:var(--cut);border-color:var(--pk-ln);background:rgba(12,5,9,.98);box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 60px -20px rgba(255,59,95,.4)}
body.app .pal-box input{font:600 14px var(--ui);letter-spacing:.08em;border-bottom-color:var(--pk-ln2);background:linear-gradient(90deg,rgba(255,59,95,.08),transparent)}
body.app .pal-list button{font-family:var(--mono);font-size:12.5px}
body.app .pal-list button b{font:700 13px var(--ui);letter-spacing:.04em}
body.app .pal-list button.on{background:linear-gradient(90deg,rgba(255,59,95,.2),transparent);box-shadow:inset 2px 0 0 var(--pk)}
body.app .pal-foot{border-top-color:var(--pk-ln2);font:600 10px var(--ui);letter-spacing:.14em;text-transform:uppercase}

/* ---------- responsif ---------- */
@media (max-width:1380px){
  body.app .stats div{padding:0 12px}
}
@media (max-width:900px){
  body.app .top{height:auto;padding:10px 12px}
  body.app .top::after{width:120px}
  body.app .mkt-sym{font-size:24px}
  body.app .stats{gap:0;padding-bottom:4px}
  body.app .stats div{padding:0 12px}
  body.app .grid{gap:8px;padding:8px}
  body.app .pane{border-bottom:1px solid var(--pk-ln2)}
  body.app .readings{height:auto;padding:6px}
  body.app .rd{overflow:visible}
  body.app .ticket{overflow:visible;padding-bottom:16px}
  body.app .ticket .cy-ph{position:static}
  body.app footer.bar{height:auto;margin-bottom:76px;padding:8px 12px}
  body.app .mbar{background:rgba(7,3,6,.9);border-top:1px solid var(--pk-ln)}
  body.app .mbar button{border-radius:0;clip-path:var(--cut-s);font:700 13px var(--ui);letter-spacing:.16em;text-transform:uppercase}
}
@media (prefers-reduced-motion:reduce){body.app .pane::before{display:none}}

/* ---------- penyesuaian lebar sempit: label kepala tidak boleh patah baris ---------- */
body.app .cy-ph span,body.app .ph-tabs .on{white-space:nowrap}
body.app .cy-ph em,body.app .ph-tabs .faint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
body.app .cy-ph,body.app .ph-tabs{min-width:0}
body.app .ph-tabs .on{letter-spacing:.14em}
body.app .rd h4{white-space:normal;line-height:1.3;letter-spacing:.12em}
body.app .fr{grid-template-columns:84px 1fr 54px}
body.app .fr span:first-child{font-size:10px;letter-spacing:.05em}
body.app .rules{gap:6px 10px}
body.app .rules{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
body.app .rules dt{letter-spacing:.06em;line-height:1.3}
body.app .rules dd{line-height:1.35;overflow-wrap:anywhere}

/* cahaya tepi tidak boleh menambah lebar gulir (clip-path tidak memotong area gulir) */
body.app .pane{overflow:hidden}
body.app .ticket{overflow-x:hidden;overflow-y:auto}
body.app .chart-note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:900px){
  body.app .ticket{overflow:hidden}
}
@media (max-width:520px){
  body.app .chart-note{display:none}
  body.app .chart-bar{gap:6px;padding:0 10px}
}