:root { --tab: 62px; }
  * { -webkit-tap-highlight-color: transparent; }
  html { -webkit-text-size-adjust:100%; }
  body { overscroll-behavior-y:none; }

  .display  { font-weight:800; letter-spacing:-.03em; line-height:1.24; }
  .title    { font-weight:700; letter-spacing:-.02em; line-height:1.4; }
  .ui       { font-weight:600; letter-spacing:-.01em; }
  .prose-fa { font-weight:400; line-height:2.05; }
  .overline { font-size:10.5px; font-weight:700; letter-spacing:.16em; }
  .nums     { font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

  .surface { background:#fff; border:1px solid #E8E4DC; border-radius:18px; }
  .dark .surface { background:#141E2C; border-color:rgba(255,255,255,.07); }
  .surface-flat { background:#F7F5F1; border-radius:16px; }
  .dark .surface-flat { background:#0C131E; }
  .hair { border-color:#E8E4DC; }
  .dark .hair { border-color:rgba(255,255,255,.08); }

  .ink {
    background:
      radial-gradient(135% 95% at 50% -28%, rgba(219,184,113,.13), transparent 58%),
      linear-gradient(180deg, #17222F 0%, #101A28 54%, #0B1220 100%);
  }
  .gold-face {
    background:linear-gradient(103deg,#8A6524 0%, #C1913C 13%, #F3DEAE 29%, #DCBB72 41%,#C9973F 55%, #A67B2C 71%, #E8CF97 87%, #B78D35 100%);
  }
  .rule-gold { background:linear-gradient(90deg, transparent, #C9973F 22%, #E9D3A5 50%, #C9973F 78%, transparent); }

  .press { transition: transform .14s cubic-bezier(.2,0,.2,1), background-color .18s, border-color .18s, color .18s; }
  .press:active { transform: scale(.975); }
  :where(a,button,input,select,textarea):focus-visible { outline:2px solid #C9973F; outline-offset:2px; border-radius:8px; }

  .seg { position:relative; display:flex; padding:3px; border-radius:12px; }
  .seg-thumb { position:absolute; top:3px; bottom:3px; left:3px; width:0; border-radius:9px; transition:transform .3s cubic-bezier(.16,1,.3,1); will-change:transform; }
  .seg button { position:relative; z-index:1; flex:1; font-weight:600; color:#7E8CA3; transition:color .2s; white-space:nowrap; }
  .dark .seg button { color:rgba(255,255,255,.42); }
  .seg button.on { color:#0F1824; font-weight:700; }
  .dark .seg button.on { color:#fff; }

  .mq { display:inline-flex; gap:2rem; white-space:nowrap; animation:mq 34s linear infinite; }
  @keyframes mq { from{transform:translateX(0)} to{transform:translateX(50%)} }
  .mq-wrap:hover .mq { animation-play-state:paused }

  #bar { background:#111C29 }
  .dark #bar { background:#080D15 }
  .mq-wrap { height:28px; overflow:hidden; }

  .no-sb{ scrollbar-width:none; -ms-overflow-style:none } .no-sb::-webkit-scrollbar{ display:none }
  .thin-sb{ scrollbar-width:thin; scrollbar-color:rgba(201,151,63,.4) transparent }
  .thin-sb::-webkit-scrollbar{ width:8px; height:8px }
  .thin-sb::-webkit-scrollbar-thumb{ background:rgba(201,151,63,.35); border-radius:99px }
  .safe-b { padding-bottom:max(env(safe-area-inset-bottom),0px) }
  .safe-t { padding-top:max(env(safe-area-inset-top),0px) }

  .sheet-p { transition: transform .36s cubic-bezier(.16,1,.3,1) }
  .draw-p  { transition: transform .34s cubic-bezier(.16,1,.3,1) }
  .clamp1 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

  .fld { width:100%; height:42px; border-radius:11px; border:1px solid #E8E4DC; background:#fff; padding:0 12px;
         font-weight:600; font-size:13.5px; transition:border-color .16s, box-shadow .16s; font-family:inherit; color:inherit; }
  .fld::placeholder { font-weight:400; color:#AEB9CA }
  .fld:focus { outline:none; border-color:#C9973F; box-shadow:0 0 0 3px rgba(201,151,63,.13) }
  .dark .fld { background:#0C131E; border-color:rgba(255,255,255,.09); color:#fff }
  .lnk { font-size:12px; font-weight:600; color:#8E6725; display:inline-flex; align-items:center; gap:.25rem }
  .dark .lnk { color:#DBB871 }
  .nvd { display:inline-flex; align-items:center; gap:.28rem; font-size:12.5px; font-weight:500; color:rgba(255,255,255,.62); padding:.42rem .6rem; border-radius:9px; transition:.2s; white-space:nowrap }
  .nvd:hover { color:#E9D3A5; background:rgba(255,255,255,.06) }
  .nvd.on { color:#0F1824; background:#DBB871; font-weight:700 }
  .dr { display:flex; align-items:center; gap:.8rem; padding:.7rem .85rem; border-radius:12px; font-size:13px; font-weight:500; transition:.16s }
  .dr svg { width:18px; height:18px; color:#B0812F; opacity:.9 } .dark .dr svg { color:#DBB871 }
  .dr:active { background:#F7F5F1 } .dark .dr:active { background:rgba(255,255,255,.05) }
  .is-hidden{ display:none !important }

  /* ═══════════ terminal ═══════════
     Chart-first: the chart IS the page. Every other surface floats over it as a
     card in the site material (dark, hairline, rounded, float shadow) or opens
     as a popup through the shared modal — a centred card on the desk and a
     bottom sheet on the phone, exactly like the rest of the site. */
  body.trading { overflow:hidden; }
  .term{ position:fixed; inset:80px 0 0 0; color:#E9EDF3; background:#111B28; }

  .chart-wrap{ position:absolute; inset:0; overflow:hidden; touch-action:none; }
  #cv-chart, #cv-fg{ position:absolute; inset:0; width:100%; height:100%; }
  #cv-fg{ pointer-events:none; }
  .chart-wrap.crosshair{ cursor:crosshair; }
  .chart-wrap.grabbing{ cursor:grabbing; }

  /* ── floating card: the one material every overlay shares ──
     Near-opaque, no backdrop-filter: stacking several blurred layers over a
     live canvas is a compositing hazard (and renders as transparent gaps in
     some engines). The panels read as glass from the shadow + hairline alone. */
  .fl{ position:absolute; z-index:12; background:#151F2C; border:1px solid rgba(255,255,255,.1);
       border-radius:15px; box-shadow:0 2px 6px rgba(0,0,0,.32), 0 18px 44px -18px rgba(0,0,0,.72); }

  /* top start — instrument + timeframe + chart tools */
  .f-bar{ top:12px; inset-inline-start:12px; display:flex; align-items:center; gap:5px; padding:5px; max-width:calc(100% - 24px); overflow-x:auto; }
  .sym-btn{ max-width:190px }
  .sym-btn span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .f-bar::-webkit-scrollbar{ display:none }
  .tbtn{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 11px; border-radius:9px;
         font-size:12px; font-weight:600; color:rgba(255,255,255,.72); white-space:nowrap; transition:.14s; flex:0 0 auto }
  .tbtn:hover{ background:rgba(255,255,255,.09); color:#fff; }
  .tbtn.on{ background:rgba(201,151,63,.2); color:#DBB871; }
  .tbtn svg{ width:15px; height:15px; opacity:.85 }
  .tbtn.icon{ padding:0; width:32px; justify-content:center; }
  .sym-btn{ height:36px; padding:0 12px; gap:8px; border-radius:11px; background:rgba(219,184,113,.14); color:#EBD6A8; font-size:13.5px; font-weight:800; }
  .sym-btn:hover{ background:rgba(219,184,113,.24); color:#fff }
  .tf{ height:32px; min-width:38px; padding:0 10px; border-radius:9px; font-size:11.5px; font-weight:700; color:rgba(255,255,255,.5); transition:.14s; flex:0 0 auto }
  .tf:hover{ color:#fff; background:rgba(255,255,255,.08) }
  .tf.on{ background:#C9973F; color:#0F1824; }
  .fl-div{ width:1px; height:20px; background:rgba(255,255,255,.1); flex:0 0 auto; margin:0 2px }

  /* top end — account pill, opens the full account popup */
  .f-acct{ top:12px; inset-inline-end:12px; display:flex; align-items:center; gap:11px; padding:8px 13px; transition:.15s; cursor:pointer }
  .f-acct:hover{ border-color:rgba(219,184,113,.35) }
  .f-acct .lbl{ font-size:9px; font-weight:700; letter-spacing:.08em; color:rgba(219,184,113,.7); display:block; margin-bottom:3px }
  .f-acct .val{ font-size:15.5px; font-weight:800; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
  .f-acct .pl{ font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:3px; display:block }
  .f-acct .chev, .f-pos .chev{ width:16px; height:16px; color:rgba(255,255,255,.3); flex:0 0 auto }

  /* end edge — drawing rail */
  .f-tools{ top:50%; transform:translateY(-50%); inset-inline-end:12px; display:flex; flex-direction:column;
            align-items:center; padding:6px; gap:3px; max-height:calc(100% - 210px); overflow-y:auto }
  .f-tools::-webkit-scrollbar{ display:none }
  .dtool{ width:32px; height:32px; display:grid; place-items:center; border-radius:9px; color:rgba(255,255,255,.55); transition:.13s; flex:0 0 auto; }
  .dtool:hover{ background:rgba(255,255,255,.09); color:#fff; }
  .dtool.on{ background:#C9973F; color:#0F1824; box-shadow:0 3px 10px -3px rgba(201,151,63,.6); }
  .dtool svg{ width:16px; height:16px; }
  .dtool.sep{ height:1px; width:20px; background:rgba(255,255,255,.11); border-radius:0; margin:3px 0; pointer-events:none; }
  .dtool.clear{ color:#FF8A90 } .dtool.clear:hover{ background:rgba(195,59,69,.18); color:#FF6B72 }

  /* bottom start — open positions summary, opens the blotter popup */
  .f-pos{ bottom:14px; inset-inline-start:12px; display:flex; align-items:center; gap:10px; padding:9px 13px; cursor:pointer; transition:.15s }
  .f-pos:hover{ border-color:rgba(219,184,113,.35) }
  .f-pos .ic{ width:30px; height:30px; border-radius:9px; background:rgba(201,151,63,.14); color:#DBB871; display:grid; place-items:center; flex:0 0 auto }
  .f-pos .ic svg{ width:15px; height:15px }
  .f-pos .t1{ font-size:11.5px; font-weight:700; color:rgba(255,255,255,.8); display:block }
  .f-pos .t2{ font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums; display:block; margin-top:2px }

  /* bottom centre — the deal ticket, always one tap away */
  .f-deal{ bottom:14px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:7px; padding:7px; }
  .dealbtn{ border-radius:12px; transition:.15s; border:1px solid transparent; display:flex; align-items:center; justify-content:center;
            gap:8px; height:50px; padding:0 18px; min-width:0 }
  .dealbtn .lbl{ font-size:12px; font-weight:700; opacity:.9; }
  .dealbtn .px{ font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em }
  .deal-sell{ background:rgba(195,59,69,.18); border-color:rgba(195,59,69,.38); color:#FF8A90; }
  .deal-sell:hover{ background:#C33B45; border-color:#C33B45; color:#fff; }
  .deal-buy{ background:rgba(14,138,95,.18); border-color:rgba(14,138,95,.38); color:#3ED8A0; }
  .deal-buy:hover{ background:#0E8A5F; border-color:#0E8A5F; color:#fff; }
  .dealbtn:active{ transform:scale(.975) }
  .qvol{ display:flex; align-items:center; gap:2px; background:rgba(0,0,0,.28); border-radius:12px; padding:4px; flex:0 0 auto }
  .qvol button{ width:36px; height:42px; border-radius:9px; font-size:19px; font-weight:700; color:rgba(255,255,255,.78); transition:.14s }
  .qvol button:hover{ background:rgba(201,151,63,.24); color:#DBB871 }
  .qvol .box{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:66px }
  .qvol input{ width:70px; height:22px; background:transparent; border:0; text-align:center; font-size:15px; font-weight:800;
               color:#fff; font-variant-numeric:tabular-nums; font-family:inherit }
  .qvol input:focus{ outline:none }
  .qvol .u{ font-size:8.5px; color:rgba(255,255,255,.4); letter-spacing:.04em; margin-top:-2px }
  .f-deal .more{ width:44px; height:50px; border-radius:13px; background:rgba(255,255,255,.07); color:rgba(255,255,255,.7);
                 display:grid; place-items:center; transition:.14s; flex:0 0 auto }
  .f-deal .more:hover{ background:rgba(201,151,63,.2); color:#DBB871 }
  .f-deal .more svg{ width:17px; height:17px }

  /* data window sits clear of the floating bar */
  .dwin{ position:absolute; top:66px; inset-inline-start:14px; max-width:calc(100% - 320px); z-index:8;
         font-size:11.5px; line-height:1.75; color:rgba(255,255,255,.82); font-variant-numeric:tabular-nums;
         pointer-events:none; padding:7px 12px; border-radius:12px;
         background:rgba(13,20,31,.86); border:1px solid rgba(255,255,255,.06); }
  .dwin .sym{ font-size:12.5px; font-weight:800; color:#fff; letter-spacing:-.01em }
  .dwin .lo{ color:rgba(255,255,255,.5) }
  .dwin b.u{ color:#3ED8A0; } .dwin b.d{ color:#FF6B72; }

  .mstat{ display:none; position:absolute; top:64px; left:10px; right:10px; z-index:9; height:42px;
          background:#151F2C; border:1px solid rgba(255,255,255,.1); border-radius:12px; overflow:hidden; }
  .mstat button{ flex:1; min-width:0; height:100%; display:flex; flex-direction:column; align-items:flex-start;
                 justify-content:center; padding:0 12px; text-align:start; }
  .mstat .k{ font-size:8.5px; font-weight:700; letter-spacing:.06em; color:rgba(219,184,113,.65) }
  .mstat .v{ font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums; color:#fff; margin-top:1px;
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100% }
  .sel-bar{ position:absolute; z-index:14; display:none; align-items:center; gap:2px; padding:4px; border-radius:11px;
            background:#1A2534; border:1px solid rgba(255,255,255,.12); box-shadow:0 12px 30px -10px rgba(0,0,0,.7); }
  .sel-bar button{ width:32px; height:32px; display:grid; place-items:center; border-radius:8px; color:rgba(255,255,255,.72); }
  .sel-bar button svg{ width:16px; height:16px }
  .sel-bar button.del:hover{ background:rgba(195,59,69,.2); color:#FF6B72 }
  .sel-bar button:hover{ background:rgba(255,255,255,.1); color:#fff; }
  .sel-bar .sw{ width:16px; height:16px; border-radius:5px; border:2px solid rgba(255,255,255,.2); }

  /* ── shared bits used inside popups ── */
  .op-sec{ font-size:9.5px; font-weight:700; letter-spacing:.12em; color:rgba(219,184,113,.6); }
  .deal-lg{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
  .deal-lg .dealbtn{ height:58px; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:0 }
  .deal-lg .dealbtn .px{ font-size:16.5px }
  .vol{ display:flex; align-items:center; gap:6px; }
  .vol button{ width:38px; height:42px; border-radius:11px; background:rgba(255,255,255,.06); font-size:18px; font-weight:700; color:rgba(255,255,255,.75); transition:.14s }
  .vol button:hover{ background:rgba(201,151,63,.2); color:#DBB871 }
  .vol input{ flex:1; min-width:0; height:42px; border-radius:11px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
              text-align:center; font-size:15px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; font-family:inherit }
  .vol input:focus{ outline:none; border-color:#C9973F; box-shadow:0 0 0 3px rgba(201,151,63,.15) }
  .vchip{ font-size:10.5px; font-weight:700; padding:5px 10px; border-radius:8px; background:rgba(255,255,255,.055); color:rgba(255,255,255,.55); transition:.14s }
  .vchip:hover{ background:rgba(201,151,63,.18); color:#DBB871; }
  .oswitch{ border-radius:12px; background:rgba(255,255,255,.04); padding:10px 12px; transition:.16s; cursor:pointer }
  .oswitch:hover{ background:rgba(255,255,255,.06) }
  .oswitch.on{ background:rgba(201,151,63,.11); }
  .osw-h{ display:flex; align-items:center; gap:10px; }
  .osw-h .nm{ font-size:12.5px; font-weight:600; color:rgba(255,255,255,.72); flex:1 }
  .oswitch.on .osw-h .nm{ color:#fff }
  /* toggle: physical left/right so RTL never flips the knob out of the pill.
     No transitions here — the vendored Tailwind build freezes a transitioned
     property when its state class is toggled by script, so an animated toggle
     ends up stuck showing the wrong state. These controls snap instead. */
  .op-check{ width:40px; height:23px; border-radius:99px; background:rgba(255,255,255,.16); position:relative;
             flex:0 0 auto; cursor:pointer }
  .op-check::after{ content:""; position:absolute; top:2.5px; left:2.5px; width:18px; height:18px; border-radius:99px;
                    background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.35) }
  .op-check.on{ background:#C9973F }
  .op-check.on::after{ transform:translateX(17px) }
  .op-check > *{ display:none }   /* swallow any stray icon dropped inside */
  /* every script-toggled state control opts out of transitions for the same reason */
  .chip, .tf, .dtool, .sw2, .oswitch, #m-ticket, .tbtn, .follow-btn{ transition:none !important }
  /* config-popup building blocks (shared, dark modal) */
  .op-lab{ font-size:12px; font-weight:600; color:rgba(255,255,255,.72) }
  .op-row{ display:flex; align-items:center; gap:10px }
  .op-row.tog{ justify-content:space-between; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.04); cursor:pointer; transition:.15s }
  .op-row.tog:hover{ background:rgba(255,255,255,.06) }
  .chips{ display:flex; gap:6px }
  .chip{ flex:1; min-width:0; height:38px; border-radius:10px; background:rgba(255,255,255,.06); color:rgba(255,255,255,.6);
         font-size:11.5px; font-weight:700; transition:.14s; white-space:nowrap }
  .chip:hover{ background:rgba(255,255,255,.1); color:#fff }
  .chip.on{ background:#C9973F; color:#0F1824 }
  .swrow{ display:flex; gap:7px; flex-wrap:wrap }
  .sw2{ width:32px; height:32px; border-radius:9px; border:2px solid transparent; transition:.12s; cursor:pointer }
  .sw2:hover{ transform:scale(1.06) }
  .sw2.on{ border-color:#fff }
  .op-fld{ height:38px; border-radius:10px; background:rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.1); color:#fff;
           font-size:13px; font-weight:700; padding:0 11px; width:100%; font-variant-numeric:tabular-nums; margin-top:8px; font-family:inherit }
  .op-fld:focus{ outline:none; border-color:#C9973F; box-shadow:0 0 0 3px rgba(201,151,63,.15) }
  .op-fld::placeholder{ font-weight:500; color:rgba(255,255,255,.28) }
  .big-btn{ width:100%; height:46px; border-radius:12px; font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:7px; transition:.15s }
  .buy-btn{ background:#0E8A5F; color:#fff; } .buy-btn:hover{ background:#0FA070 }
  .sell-btn{ background:#C33B45; color:#fff; } .sell-btn:hover{ background:#D9464F }
  .buy-btn:active,.sell-btn:active{ transform:scale(.98); }
  .op-info{ border-top:1px solid rgba(255,255,255,.07); padding-top:10px; display:flex; flex-direction:column; gap:6px }
  .op-info .r{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:11.5px; color:rgba(255,255,255,.45) }
  .op-info .r b{ color:rgba(255,255,255,.85); font-weight:700; font-variant-numeric:tabular-nums; font-size:12px }

  /* account popup */
  .acards{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
  .acard{ background:rgba(255,255,255,.04); border-radius:12px; padding:11px 13px }
  .acard.wide{ grid-column:1 / -1 }
  .acard .lbl{ font-size:10px; color:rgba(255,255,255,.4); display:block; margin-bottom:5px }
  .acard .val{ font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em }
  .acard.hero .val{ font-size:24px }
  .mlbar{ display:block; width:100%; height:6px; border-radius:99px; background:rgba(255,255,255,.1); margin-top:9px; overflow:hidden; }
  .mlbar i{ display:block; height:100%; border-radius:99px; background:#3ED8A0; transition:width .4s, background .4s; }

  /* market-watch rows inside the symbol popup */
  .mw-row{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 10px;
           padding:10px 11px; border-radius:12px; cursor:pointer; transition:background-color .14s; position:relative; }
  .mw-row:hover{ background:rgba(255,255,255,.05); }
  .mw-row.on{ background:rgba(201,151,63,.13); }
  .mw-row.on::before{ content:""; position:absolute; inset-inline-start:0; top:10px; bottom:10px; width:2.5px; border-radius:99px; background:#DBB871; }
  .mw-row .s{ font-size:13px; font-weight:700; }
  .mw-row .n{ font-size:9.5px; color:rgba(255,255,255,.35); grid-column:1; }
  .mw-row .b{ font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; text-align:left; }
  .mw-row .a{ font-size:10px; text-align:left; font-variant-numeric:tabular-nums; font-weight:600; }

  /* blotter popup */
  .tbox-tabs{ display:flex; align-items:center; gap:3px; padding-bottom:10px; overflow-x:auto }
  .tbox-tabs::-webkit-scrollbar{ display:none }
  .tbox-tab{ height:30px; padding:0 13px; border-radius:9px; font-size:12px; font-weight:600; color:rgba(255,255,255,.5); transition:.14s; white-space:nowrap; flex:0 0 auto }
  .tbox-tab:hover{ color:rgba(255,255,255,.85); background:rgba(255,255,255,.05) }
  .tbox-tab.on{ background:rgba(255,255,255,.08); color:#fff; font-weight:700 }
  .tbox-tab .badge{ display:inline-grid; place-items:center; min-width:17px; height:17px; padding:0 5px; font-size:9.5px; font-weight:700;
                    background:#C9973F; color:#0F1824; border-radius:99px; margin-inline-start:6px; }
  #btn-closeall{ color:#FF8A90 } #btn-closeall:hover{ background:rgba(195,59,69,.15); color:#FF6B72 }
  .tbox-body{ overflow:auto; max-height:52vh; margin:0 -16px; padding:0 16px }
  .ptable{ width:100%; border-collapse:collapse; font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .ptable th{ position:sticky; top:0; z-index:1; background:#131E2B; color:rgba(255,255,255,.35); font-weight:600; font-size:10px;
              padding:9px 10px; text-align:center; border-bottom:1px solid rgba(255,255,255,.07); }
  .ptable td{ padding:10px; text-align:center; border-bottom:1px solid rgba(255,255,255,.045); }
  .ptable tbody tr{ transition:background-color .12s }
  .ptable tbody tr:hover td{ background:rgba(255,255,255,.03); }
  .ptable tfoot td{ border:0; padding-top:10px }
  @media (max-width:640px){ .ptable .col-opt{ display:none } .ptable th, .ptable td{ padding:9px 7px } }
  .pside-buy{ color:#3ED8A0; font-weight:700; }
  .pside-sell{ color:#FF6B72; font-weight:700; }
  .x-close{ width:26px; height:26px; border-radius:8px; display:inline-grid; place-items:center; background:rgba(255,255,255,.06); color:rgba(255,255,255,.55); transition:.14s }
  .x-close:hover{ background:rgba(255,255,255,.14); color:#fff }
  .x-close.danger:hover{ background:#C33B45; color:#fff; }
  .empty-tb{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:34px 20px; text-align:center }
  .empty-tb .ic{ width:44px; height:44px; border-radius:14px; background:rgba(201,151,63,.1); color:#DBB871; display:grid; place-items:center }
  .empty-tb .ic svg{ width:19px; height:19px }
  .empty-tb .t1{ font-size:13px; font-weight:700; color:rgba(255,255,255,.8) }
  .empty-tb .t2{ font-size:11.5px; color:rgba(255,255,255,.4) }
  .jrow{ display:flex; gap:10px; font-size:11.5px; color:rgba(255,255,255,.62); padding:8px 2px; border-bottom:1px solid rgba(255,255,255,.035); font-variant-numeric:tabular-nums; }
  .jrow .t{ color:rgba(255,255,255,.3); flex:0 0 auto }

  @media (max-width:900px){
    /* phones: the chart is a real middle section — toolbar above it, deal bar below
       it, nothing floating over the candles (only the OHLC readout, which is inert). */
    .term{ display:flex; flex-direction:column; }
    #fbar{ position:static; order:1; flex:0 0 auto; inset:auto; max-width:none;
           border-radius:0; border-width:0 0 1px 0; box-shadow:none; padding:6px 8px; }
    #mstat{ position:static; order:2; flex:0 0 auto; inset:auto; height:34px;
            border-radius:0; border-width:0 0 1px 0; }
    #cwrap{ position:relative; order:3; flex:1 1 auto; min-height:0; inset:auto; }
    #fpos{ position:static; order:4; flex:0 0 auto; inset:auto;
           border-radius:0; border-width:1px 0 0 0; box-shadow:none; }
    #fdeal{ position:static; order:5; flex:0 0 auto; inset:auto; transform:none;
            border-radius:0; border-width:1px 0 0 0; box-shadow:none; gap:6px; padding:7px 8px; }
    /* the tf strip is the only part that scrolls — sym / indicators / tools / settings stay put */
    #tb-tf{ flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none; }
    #tb-tf::-webkit-scrollbar{ display:none }
    #btn-ind, #btn-tools{ width:32px; padding:0; justify-content:center; }
    #btn-ind .tbtn-lbl, #btn-tools .tbtn-lbl{ display:none }
    .f-bar{ overflow:hidden }
    .f-acct, .f-tools{ display:none }
    .mstat{ display:flex }
    .dwin{ top:8px; inset-inline-start:auto; left:10px; right:auto; font-size:10px; line-height:1.6;
           max-width:calc(100% - 20px); padding:5px 9px; background:rgba(15,24,36,.72) }
    .dwin .sym{ font-size:11px }
    .f-deal .dealbtn{ flex:1; flex-direction:column; gap:2px }
    .qvol{ padding:3px } .qvol button{ width:30px; height:38px } .qvol input{ width:46px; font-size:13.5px }
    .qvol .box{ min-width:52px }
  }
  @media (max-width:520px){
    .f-deal .dealbtn{ padding:0 9px; gap:1px }
    .f-deal .dealbtn .px{ font-size:12.5px } .f-deal .dealbtn .lbl{ font-size:10.5px }
    .f-deal .more{ width:40px; height:46px }
    .qvol button{ width:26px } .qvol input{ width:40px; font-size:12.5px }
  }

  /* tool picker popup */
  .tp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px }
  .tp-tool{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 6px; border-radius:12px;
            background:rgba(255,255,255,.04); color:rgba(255,255,255,.72); transition:.13s; font-size:10.5px; font-weight:600 }
  .tp-tool:hover{ background:rgba(255,255,255,.09); color:#fff }
  .tp-tool.on{ background:#C9973F; color:#0F1824 }
  .tp-tool svg{ width:18px; height:18px }

  /* phones: pinch/wheel zoom is enough — drop the zoom buttons, fold type into settings */
  @media (max-width:900px){ #btn-zin, #btn-zout, #btn-reset{ display:none } }

  /* modal / sheet — plain display toggling, no transition or animation gating
     visibility. This environment can pause a running CSS animation/transition
     indefinitely (backgrounded/hidden render surfaces), which would otherwise
     strand a popup at a mid-flight opacity or off-screen transform forever.
     A popup that simply appears is a correctness floor nothing can break. */
  .modal{ position:fixed; inset:0; z-index:80; display:none; }
  .modal.on{ display:block; }
  .modal-scrim{ position:absolute; inset:0; background:rgba(6,10,17,.62); }
  .modal-card{ position:absolute; background:#131E2B; color:#E9EDF3; border:1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; }
  @media (min-width:641px){
    .modal-card{ top:50%; left:50%; transform:translate(-50%,-50%); width:min(440px,92vw); max-height:86vh; border-radius:18px; }
    .modal.wide .modal-card{ width:min(780px,94vw); }
  }
  @media (max-width:640px){
    .modal-card{ left:0; right:0; bottom:0; max-height:88vh; border-radius:20px 20px 0 0; }
  }
  .modal-h{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
  .modal-h h3{ font-size:14px; font-weight:800; }
  .modal-b{ padding:14px 16px; overflow-y:auto; }

  .ind-item{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:11px; transition:.12s; }
  .ind-item:hover{ background:rgba(255,255,255,.05); }
  .ind-item.on{ background:rgba(201,151,63,.12); }
  .ind-item.on .ic{ background:rgba(201,151,63,.3); color:#F0D294; }
  .ind-item .ic{ width:30px; height:30px; border-radius:8px; background:rgba(201,151,63,.15); color:#DBB871; display:grid; place-items:center; flex:0 0 auto; }
  .ind-item .ic svg{ width:15px; height:15px; }
  .ind-on{ margin-inline-start:auto; font-size:9.5px; font-weight:800; color:#0F1824; background:#C9973F;
           padding:3px 9px; border-radius:999px; flex:0 0 auto; }

  .coach .row{ display:flex; gap:11px; align-items:flex-start; padding:9px 0 }
  .coach .row + .row{ border-top:1px solid rgba(255,255,255,.06) }
  .coach .ic{ width:30px; height:30px; border-radius:9px; background:rgba(201,151,63,.14); color:#DBB871; display:grid; place-items:center; flex:0 0 auto }
  .coach .ic svg{ width:15px; height:15px }
  .coach .tx b{ font-size:12.5px; display:block; margin-bottom:2px }
  .coach .tx span{ font-size:11px; color:rgba(255,255,255,.5); line-height:1.7 }
  .toast-wrap{ position:fixed; z-index:95; left:0; right:0; top:calc(env(safe-area-inset-top) + 88px); display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; padding:0 12px; }
  .toast{ pointer-events:auto; display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:11px; font-size:12.5px; font-weight:700; box-shadow:0 12px 30px -10px rgba(0,0,0,.5); transform:translateY(-10px); opacity:0; transition:.28s; }
  .toast.in{ transform:none; opacity:1; }
  .toast svg{ width:15px; height:15px; }

  @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important } .mq{ animation:none!important } }

  /* custom scrollbar — never the browser default (matches media/zarnoush.css) */
  html { color-scheme: light }
  html.dark { color-scheme: dark }
  * { scrollbar-width: thin; scrollbar-color: #CDBFA6 transparent }
  ::-webkit-scrollbar { width: 11px; height: 11px }
  ::-webkit-scrollbar-track { background: transparent }
  ::-webkit-scrollbar-thumb { background: #CDBFA6; border: 3px solid #F6F3ED; border-radius: 999px }
  ::-webkit-scrollbar-thumb:hover { background: #B98E45 }
  ::-webkit-scrollbar-corner { background: transparent }
  .dark * { scrollbar-color: #2C3B50 transparent }
  .dark ::-webkit-scrollbar-thumb { background: #2C3B50; border-color: #080D15 }
  .dark ::-webkit-scrollbar-thumb:hover { background: #B98E45 }