/* ============================================================
   WebTrader Client Area — Design System
   Extracted from the approved webtrader-app mockup.
   Pure CSS (custom properties). Fonts (Inter, Space Grotesk)
   are loaded via <link> in the brand index.html.
   ============================================================ */

/* ============================================================
   DESIGN SYSTEM — one source of truth for the whole terminal
   ============================================================ */
:root{
  /* Surfaces */
  --bg-0:#06080A;               /* app background        */
  --bg-1:#0B0F13;               /* deep panel wells       */
  --glass:rgba(17,23,29,.58);   /* liquid-glass panel     */
  --glass-2:rgba(255,255,255,.028); /* nested card        */
  --glass-3:rgba(255,255,255,.05);  /* hover surface      */
  --stroke:rgba(255,255,255,.065);  /* hairline border    */
  --stroke-2:rgba(255,255,255,.10);
  --inner-hi:inset 0 1px 0 rgba(255,255,255,.05);

  /* Unified accent system */
  --green:#21D07A;
  --green-bright:#3BE18F;
  --green-dim:rgba(33,208,122,.13);
  --green-glow:rgba(33,208,122,.28);
  --red:#E5566B;                /* soft premium red       */
  --red-dim:rgba(229,86,107,.13);
  --red-glow:rgba(229,86,107,.25);

  /* Text */
  --t1:#EAF0F4;
  --t2:#93A0AF;
  --t3:#5C6A78;
  --white:#FFFFFF;

  /* Shape & motion */
  --r-max:999px;--r-xl:25px;--r-lg:16px; --r-md:12px; --r-sm:9px;
  --shadow:0 18px 44px -18px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.35);
  --ease:cubic-bezier(.22,.61,.28,1);
  --blur:blur(18px) saturate(1.25);

  --font-ui:'Inter',system-ui,sans-serif;
  --font-display:'Space Grotesk',var(--font-ui);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-ui);
  font-size:13px;
  color:var(--t1);
  background:
    radial-gradient(1100px 620px at 62% -12%, rgba(33,208,122,.055), transparent 60%),
    radial-gradient(900px 700px at 108% 78%, rgba(52,120,246,.04), transparent 55%),
    linear-gradient(180deg,#080B0E 0%, var(--bg-0) 100%);
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.num{font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* ---------- Glass panel primitive ---------- */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow), var(--inner-hi);
}

/* ---------- App layout ---------- */
.app{
  --side-w:236px;
  display:grid;
  grid-template-columns:var(--side-w) minmax(0,1fr) 332px;
  grid-template-rows:74px minmax(430px,1fr) auto;
  grid-template-areas:
    "side top   top"
    "side chart right"
    "side table right";
  gap:14px;
  padding:14px;
  min-height:100vh;
}
.sidebar{grid-area:side}
.topbar{grid-area:top}
.chart-panel{grid-area:chart}
.right-col{grid-area:right;display:flex;flex-direction:column;gap:14px;min-height:0}
.positions{grid-area:table}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar{display:flex;flex-direction:column;padding:20px 14px 14px;position:sticky;top:14px;height:calc(100vh - 28px);transition:width .25s var(--ease)}

/* ---- Collapse toggle ---- */
.collapse-btn{
  position:absolute;top:78px;right:-13px;z-index:5;
  width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(180deg,rgba(30,38,46,.95),rgba(18,24,30,.95));
  border:1px solid var(--stroke-2);color:var(--t2);cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.45), var(--inner-hi);
  transition:color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.collapse-btn:hover{color:var(--green-bright);border-color:rgba(33,208,122,.4);transform:scale(1.08)}
.collapse-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.app.collapsed .collapse-btn svg{transform:rotate(180deg)}

/* ---- Collapsed sidebar state (manual toggle or narrow screens) ---- */
.app.collapsed{--side-w:76px}
.app.collapsed .logo{font-size:0;text-align:center}
.app.collapsed .logo::before{content:"d";font-size:26px;color:var(--t1)}
.app.collapsed .logo[data-initial]::before{content:attr(data-initial)}
.app.collapsed .logo .dot{font-size:26px}
.app.collapsed .user-chip b,
.app.collapsed .user-chip span,
.app.collapsed .nav a .txt,
.app.collapsed .acct-select .txt{display:none}
.app.collapsed .user-chip{justify-content:center;padding:8px}
.app.collapsed .nav a{justify-content:center;padding:11px 0}
.app.collapsed .nav a:hover{transform:none}
.app.collapsed .acct-select{justify-content:center}
.logo{font-family:var(--font-display);font-size:26px;font-weight:600;letter-spacing:-.01em;padding:2px 10px 0}
.logo .dot{color:var(--green)}
.user-chip{display:flex;align-items:center;gap:10px;margin:20px 6px 8px;padding:10px;border-radius:var(--r-md);background:var(--glass-2);border:1px solid var(--stroke)}
.avatar{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:600;font-size:12px;color:#06110B;background:linear-gradient(140deg,var(--green-bright),#0FA35E);box-shadow:0 0 0 1px rgba(33,208,122,.35),0 4px 12px -4px var(--green-glow)}
.user-chip b{font-size:12.5px;font-weight:600}
.user-chip span{display:block;font-size:10.5px;color:var(--t3)}
.nav{margin-top:14px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;overflow-x:hidden}
.nav a{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:10px;
  color:var(--t2);text-decoration:none;font-size:13px;font-weight:500;
  border:1px solid transparent;
  transition:color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.nav a svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.nav a:hover{color:var(--t1);background:var(--glass-3);transform:translateX(2px)}
.nav a:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.nav a.active{
  color:var(--green-bright);
  background:linear-gradient(90deg,var(--green-dim),rgba(33,208,122,.04));
  border-color:rgba(33,208,122,.22);
  box-shadow:inset 2px 0 0 var(--green), 0 0 18px -8px var(--green-glow);
}
.nav .spacer{flex:1 1 auto;min-height:10px}
.acct-select{
  margin:12px 6px 0;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 12px;border-radius:var(--r-md);
  background:var(--glass-2);border:1px solid var(--stroke);
  color:var(--t2);font-size:12px;cursor:pointer;
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
.acct-select:hover{border-color:var(--stroke-2);color:var(--t1)}
.acct-select b{color:var(--t1);font-weight:600}

/* ============================================================
   TOP ACCOUNT STATS BAR
   ============================================================ */
.topbar{display:flex;align-items:stretch;gap:0;padding:0 6px;overflow-x:auto}
.symbol-cell{display:flex;align-items:center;gap:10px;padding:0 20px;flex:none}
.flag{width:30px;height:30px;border-radius:50%;background:conic-gradient(from 90deg,#1546A0,#2A6BE0,#1546A0);display:grid;place-items:center;font-size:12px;box-shadow:0 0 0 1px var(--stroke-2)}
.symbol-cell b{font-family:var(--font-display);font-size:16px;letter-spacing:.02em}
.stat{
  flex:1 1 0;min-width:104px;display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding:0 18px;border-left:1px solid var(--stroke);
}
.stat .lbl{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--t3)}
.stat .val{font-size:14.5px;font-weight:600;color:var(--t1)}
.stat .val.pos{color:var(--green)}
.stat .val.neg{color:var(--red)}

/* ============================================================
   CHART PANEL
   ============================================================ */
.chart-panel{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.chart-tabs{display:flex;align-items:center;gap:6px;padding:10px 12px 0;flex-wrap:wrap}
.ctab{
  display:flex;align-items:center;gap:7px;
  padding:5px 6px 5px 12px;border-radius:9px;cursor:pointer;
  background:var(--glass-2);border:1px solid var(--stroke);color:var(--t2);
  font:600 11.5px var(--font-ui);letter-spacing:.02em;
  transition:all .16s var(--ease);animation:ctab-in .25s var(--ease);
}
@keyframes ctab-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
.ctab:hover{color:var(--t1);background:var(--glass-3)}
.ctab.active{
  color:var(--green-bright);background:var(--green-dim);
  border-color:rgba(33,208,122,.35);box-shadow:0 0 14px -6px var(--green-glow);
}
.ctab .cx{
  width:16px;height:16px;display:grid;place-items:center;border-radius:5px;
  color:var(--t3);font-size:11px;line-height:1;
  transition:all .14s var(--ease);
}
.ctab .cx:hover{color:var(--red);background:var(--red-dim)}
.chart-head{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--stroke);flex-wrap:wrap}
.chart-head .sym{font-family:var(--font-display);font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green-glow);animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.tf-group{display:flex;gap:4px;padding:4px;border-radius:10px;background:var(--glass-2);border:1px solid var(--stroke)}
.tf{
  padding:5px 10px;border-radius:7px;border:none;background:transparent;
  color:var(--t2);font:600 11px var(--font-ui);letter-spacing:.03em;cursor:pointer;
  transition:all .16s var(--ease);
}
.tf:hover{color:var(--t1);background:var(--glass-3)}
.tf.active{color:#06110B;background:var(--green);box-shadow:0 2px 10px -2px var(--green-glow)}
.tf:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.chart-tools{display:flex;gap:4px;margin-left:auto}
.tool-btn{
  width:30px;height:30px;display:grid;place-items:center;border-radius:8px;
  background:transparent;border:1px solid transparent;color:var(--t2);cursor:pointer;
  transition:all .16s var(--ease);
}
.tool-btn:hover{color:var(--t1);background:var(--glass-3);border-color:var(--stroke)}
.tool-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round}
.ohlc{display:flex;gap:14px;padding:10px 16px 0;font-size:11.5px;color:var(--t3)}
.ohlc b{color:var(--t2);font-weight:500;margin-left:4px}
.chart-body{position:relative;flex:1;min-height:340px}
canvas#chart{position:absolute;inset:0;width:100%;height:100%;display:block}
.price-tag{
  position:absolute;right:0;transform:translateY(-50%);
  background:var(--green);color:#05110A;font:600 11px var(--font-ui);
  padding:3px 8px;border-radius:6px 0 0 6px;font-variant-numeric:tabular-nums;
  box-shadow:0 0 14px -2px var(--green-glow);pointer-events:none;
}

/* ---------- Chart settings popover ---------- */
.settings-pop{
  position:absolute;top:10px;left:22px;z-index:30;width:236px;
  padding:14px 16px 16px;border-radius:var(--r-md);
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--stroke);box-shadow:var(--shadow), var(--inner-hi);
  opacity:0;pointer-events:none;transform:translateY(-6px) scale(.97);
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.settings-pop.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.sp-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.sp-head b{font-family:var(--font-display);font-size:13px;font-weight:600}
.sp-head .acc{font-size:10.5px;font-weight:600;color:var(--green-bright)}
.sp-head .x-btn{margin-left:auto;width:24px;height:24px}
.sp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0}
.sp-row + .sp-row{border-top:1px solid var(--stroke)}
.sp-row span{font-size:12px;font-weight:500;color:var(--t2)}
.switch{
  position:relative;flex:none;width:36px;height:20px;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.09);border:1px solid var(--stroke-2);
  transition:background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.switch::after{
  content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:#B9C3CD;transition:left .2s var(--ease), background .2s var(--ease);
}
.switch.on{background:rgba(33,208,122,.28);border-color:rgba(33,208,122,.5);box-shadow:0 0 12px -4px var(--green-glow)}
.switch.on::after{left:18px;background:var(--green-bright)}
.switch:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ============================================================
   RIGHT COLUMN — ORDER PANEL
   ============================================================ */
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 0}
.panel-title{font-family:var(--font-display);font-size:14px;font-weight:600}
.pair-chip{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--t2)}
.pair-chip .flag{width:20px;height:20px;font-size:9px}
.order{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px}
.side-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.side-btn{
  padding:9px 0;border-radius:var(--r-sm);font:600 12.5px var(--font-ui);cursor:pointer;
  background:var(--glass-2);border:1px solid var(--stroke);color:var(--t2);
  transition:all .18s var(--ease);
}
.side-btn:hover{transform:translateY(-1px)}
.side-btn.buy.active{color:var(--green-bright);background:var(--green-dim);border-color:rgba(33,208,122,.4);box-shadow:0 0 16px -6px var(--green-glow)}
.side-btn.sell.active{color:var(--red);background:var(--red-dim);border-color:rgba(229,86,107,.4);box-shadow:0 0 16px -6px var(--red-glow)}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field label{display:block;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin-bottom:5px}
.input{
  position:relative;display:flex;align-items:center;height:36px;
  background:rgba(0,0,0,.28);border:1px solid var(--stroke);border-radius:var(--r-sm);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.input:focus-within{border-color:rgba(33,208,122,.55);box-shadow:0 0 0 3px rgba(33,208,122,.12)}
.input input,.input select{
  flex:1;height:100%;padding:0 11px;background:transparent;border:none;outline:none;
  color:var(--t1);font:500 12.5px var(--font-ui);font-variant-numeric:tabular-nums;min-width:0;
}
.input select{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.input select option{background:#10161C;color:var(--t1)}
.input.area{height:auto;align-items:stretch}
.input textarea{flex:1;width:100%;padding:9px 11px;background:transparent;border:none;outline:none;color:var(--t1);font:500 12.5px var(--font-ui);resize:vertical;min-height:96px}
.input .clear{
  width:24px;height:24px;margin-right:5px;flex:none;display:grid;place-items:center;
  border:none;border-radius:6px;background:transparent;color:var(--t3);cursor:pointer;font-size:12px;
  transition:all .15s var(--ease);
}
.input .clear:hover{color:var(--red);background:var(--red-dim)}
.pl-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pl-box{padding:8px 11px;border-radius:var(--r-sm);background:var(--glass-2);border:1px solid var(--stroke)}
.pl-box .lbl{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.pl-box .val{font-size:13px;font-weight:600;margin-top:2px}
.quote-row{display:flex;justify-content:space-between;align-items:baseline;padding:2px 2px 0}
.quote .big{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.quote sup{font-size:11px;font-weight:700}
.quote .tag{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin-left:5px}
.quote.bid .big{color:var(--green)}
.quote.ask .big{color:var(--red)}
.cta{
  position:relative;width:100%;padding:12px 0;border:none;border-radius:var(--r-md);cursor:pointer;
  font:700 13.5px var(--font-ui);letter-spacing:.05em;color:#04120A;
  background:linear-gradient(160deg,var(--green-bright),#15B368);
  box-shadow:0 8px 22px -8px var(--green-glow), var(--inner-hi);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}
.cta:hover{transform:translateY(-1px);box-shadow:0 12px 28px -8px var(--green-glow),var(--inner-hi);filter:brightness(1.05)}
.cta:active{transform:translateY(0)}
.cta:focus-visible{outline:2px solid var(--green-bright);outline-offset:3px}
.cta.sell-mode{color:#170609;background:linear-gradient(160deg,#F0708C,#D63B55);box-shadow:0 8px 22px -8px var(--red-glow),var(--inner-hi)}
.cta:disabled{cursor:not-allowed;color:var(--t3);filter:none;transform:none;background:var(--glass-3);box-shadow:var(--inner-hi)}
.cta:disabled:hover{transform:none;filter:none;box-shadow:var(--inner-hi)}
.used-margin{text-align:center;font-size:11px;color:var(--t3)}
.used-margin b{color:var(--t2);font-weight:600}

/* ============================================================
   LEVEL 2 / MARKET DEPTH
   ============================================================ */
.depth-panel{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.tabs{display:flex;gap:2px;padding:12px 16px 0}
.tab{
  position:relative;padding:6px 12px 10px;border:none;background:none;cursor:pointer;
  font:600 11.5px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--t3);
  transition:color .18s var(--ease);
}
.tab:hover{color:var(--t2)}
.tab.active{color:var(--green-bright)}
.tab.active::after{
  content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;border-radius:2px;
  background:var(--green);box-shadow:0 0 10px var(--green-glow);
  animation:tab-in .28s var(--ease);
}
@keyframes tab-in{from{transform:scaleX(.3);opacity:0}to{transform:scaleX(1);opacity:1}}
.depth-sym{display:flex;align-items:center;gap:9px;padding:11px 16px;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke)}
.depth-sym b{font-weight:600;font-size:12.5px}
.depth-sym .px{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}
.depth-sym .chg{font-size:11px;font-weight:600;color:var(--green)}
.depth-table{flex:1;overflow-y:auto;padding:4px 8px 8px}
.depth-row,.depth-headrow{
  display:grid;grid-template-columns:1fr 1.15fr 1.15fr 1fr;gap:6px;align-items:center;
  padding:5px 8px;border-radius:7px;font-size:11.5px;font-variant-numeric:tabular-nums;
}
.depth-headrow{font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);position:sticky;top:0;background:linear-gradient(180deg,rgba(13,18,23,.95),rgba(13,18,23,.8));backdrop-filter:blur(6px);z-index:1}
.depth-row{transition:background .15s var(--ease)}
.depth-row:hover{background:var(--glass-3)}
.depth-row + .depth-row{margin-top:1px}
.dq{position:relative;padding:3px 7px;border-radius:5px;overflow:hidden;color:var(--t2);font-weight:500}
.dq .bar{position:absolute;inset:0;border-radius:5px;opacity:.9}
.dq span{position:relative}
.dq.bid{text-align:left}.dq.ask{text-align:right}
.dq.bid .bar{right:auto;background:linear-gradient(90deg,rgba(33,208,122,.30),rgba(33,208,122,.06))}
.dq.ask .bar{left:auto;background:linear-gradient(270deg,rgba(229,86,107,.28),rgba(229,86,107,.05))}
.dp.bid{color:var(--green);text-align:right;font-weight:600}
.dp.ask{color:var(--red);text-align:left;font-weight:600}
.range-block{padding:12px 16px 14px;border-top:1px solid var(--stroke);display:flex;flex-direction:column;gap:12px}
.range{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center}
.range .meta{font-size:10px;color:var(--t3);line-height:1.5}
.range .meta b{display:block;font-size:12px;color:var(--t1)}
.range .bar-wrap{position:relative}
.range .track{height:4px;border-radius:3px;background:linear-gradient(90deg,var(--red) 0%,#C9A73B 50%,var(--green) 100%);opacity:.75}
.range .thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;background:#EAF0F4;box-shadow:0 0 0 3px rgba(234,240,244,.15),0 2px 6px rgba(0,0,0,.5)}
.range .ends{display:flex;justify-content:space-between;font-size:9.5px;color:var(--t3);margin-top:5px;font-variant-numeric:tabular-nums}
.range .cap{text-align:center;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin-top:4px}

/* ============================================================
   BOTTOM POSITIONS TABLE
   ============================================================ */
.positions{display:flex;flex-direction:column;overflow:hidden}
.pos-head{display:flex;align-items:center;gap:6px;padding:10px 14px 0;flex-wrap:wrap}
.pos-tab{
  display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  border:1px solid transparent;background:transparent;color:var(--t2);
  font:600 12px var(--font-ui);cursor:pointer;transition:all .18s var(--ease);
}
.pos-tab svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round}
.pos-tab:hover{color:var(--t1);background:var(--glass-3)}
.pos-tab.active{color:var(--green-bright);background:var(--green-dim);border-color:rgba(33,208,122,.25)}
.pos-tab .count{font-size:10.5px;padding:1px 7px;border-radius:99px;background:rgba(255,255,255,.07);color:var(--t2)}
.pos-tab.active .count{background:rgba(33,208,122,.2);color:var(--green-bright)}
.pos-filters{margin-left:auto;display:flex;align-items:center;gap:8px}
.search{display:flex;align-items:center;gap:7px;height:32px;padding:0 11px;border-radius:var(--r-sm);background:rgba(0,0,0,.28);border:1px solid var(--stroke);transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.search:focus-within{border-color:rgba(33,208,122,.5);box-shadow:0 0 0 3px rgba(33,208,122,.1)}
.search svg{width:13px;height:13px;stroke:var(--t3);fill:none;stroke-width:1.8;stroke-linecap:round}
.search input{width:120px;background:none;border:none;outline:none;color:var(--t1);font:500 12px var(--font-ui)}
.search input::placeholder{color:var(--t3)}
.seg{display:flex;padding:3px;gap:2px;border-radius:var(--r-sm);background:var(--glass-2);border:1px solid var(--stroke)}
.seg button{padding:5px 11px;border:none;border-radius:6px;background:transparent;color:var(--t2);font:600 11px var(--font-ui);cursor:pointer;transition:all .16s var(--ease)}
.seg button:hover{color:var(--t1)}
.seg button.on-buy{color:#06110B;background:var(--green)}
.seg button.on-sell{color:#170609;background:var(--red)}
.seg button.on-all{color:var(--t1);background:var(--glass-3)}
.table-wrap{overflow-x:auto;padding:8px 8px 10px}
table.pos{width:100%;border-collapse:separate;border-spacing:0 4px;min-width:980px}
table.pos th{
  padding:7px 12px;text-align:right;font:600 9.5px var(--font-ui);
  letter-spacing:.1em;text-transform:uppercase;color:var(--t3);white-space:nowrap;
}
table.pos th:nth-child(-n+4){text-align:left}
table.pos td{
  padding:10px 12px;text-align:right;font-size:12px;font-variant-numeric:tabular-nums;
  background:var(--glass-2);border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);
  white-space:nowrap;transition:background .16s var(--ease);
}
table.pos td:nth-child(-n+4){text-align:left}
table.pos td:first-child{border-left:1px solid var(--stroke);border-radius:10px 0 0 10px;color:var(--t2)}
table.pos td:last-child{border-right:1px solid var(--stroke);border-radius:0 10px 10px 0}
table.pos tr:hover td{background:var(--glass-3)}
.type-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:10.5px;font-weight:600}
.type-pill.buy{color:var(--green-bright);background:var(--green-dim)}
.type-pill.sell{color:var(--red);background:var(--red-dim)}
td.profit.pos-v{color:var(--green);font-weight:600}
td.profit.neg-v{color:var(--red);font-weight:600}
.row-actions{display:inline-flex;gap:4px}
.row-actions button{
  width:26px;height:26px;display:grid;place-items:center;border-radius:7px;border:1px solid transparent;
  background:transparent;color:var(--t3);cursor:pointer;transition:all .15s var(--ease);
}
.row-actions button svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.row-actions button:hover{color:var(--t1);background:var(--glass-3);border-color:var(--stroke)}
.row-actions button.close-x:hover{color:var(--red);background:var(--red-dim);border-color:rgba(229,86,107,.3)}

/* ============================================================
   FLOATING PREDICTION MODAL
   ============================================================ */
.predict{
  position:fixed;left:50%;top:46%;transform:translate(-50%,-50%);
  width:min(480px,calc(100vw - 32px));z-index:60;
  padding:18px 20px 20px;
  animation:modal-in .45s var(--ease) both;
}
@keyframes modal-in{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.predict.hide{display:none}
.predict-head{display:flex;align-items:flex-start;gap:12px}
.predict-head h3{font-family:var(--font-display);font-size:14.5px;font-weight:600;line-height:1.35}
.predict-head .win{margin-left:auto;text-align:right;flex:none}
.predict-head .win .lbl{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.predict-head .win .amt{font-size:17px;font-weight:700;color:var(--green)}
.predict-head .win .avg{font-size:10px;color:var(--t3)}
.x-btn{
  flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:8px;
  border:1px solid var(--stroke);background:var(--glass);color:var(--t1);cursor:pointer;
  transition:all .16s var(--ease);
}
.x-btn:hover{color:var(--white);border-color:var(--stroke-2);background:var(--glass-3)}
.predict-body{display:grid;grid-template-columns:1fr 1fr 72px;gap:10px;align-items:stretch;margin-top:16px}
.vote{
  border:none;border-radius:var(--r-md);padding:12px 0 10px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font:700 14px var(--font-ui);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
  box-shadow:var(--inner-hi);
}
.vote small{font-size:10.5px;font-weight:600;opacity:.75}
.vote.yes{color:#04120A;background:linear-gradient(160deg,var(--green-bright),#15B368)}
.vote.no{color:#170609;background:linear-gradient(160deg,#F0708C,#D63B55)}
.vote:hover{transform:translateY(-2px);filter:brightness(1.06)}
.vote.yes:hover{box-shadow:0 10px 24px -8px var(--green-glow),var(--inner-hi)}
.vote.no:hover{box-shadow:0 10px 24px -8px var(--red-glow),var(--inner-hi)}
.timer{position:relative;display:grid;place-items:center}
.timer svg{width:60px;height:60px;transform:rotate(-90deg)}
.timer .track-c{stroke:rgba(255,255,255,.08)}
.timer .prog{stroke:var(--green);stroke-linecap:round;filter:drop-shadow(0 0 5px var(--green-glow));transition:stroke-dashoffset 1s linear}
.timer .t-val{position:absolute;text-align:center;font-variant-numeric:tabular-nums}
.timer .t-val b{display:block;font-size:15px;line-height:1}
.timer .t-val span{font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.stake-row{display:flex;align-items:center;gap:8px;margin-top:14px}
.stake-row .lbl{font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-right:2px}
.stake{
  flex:1;padding:7px 0;border-radius:999px;cursor:pointer;
  background:var(--glass-2);border:1px solid var(--stroke);color:var(--t2);
  font:600 12px var(--font-ui);font-variant-numeric:tabular-nums;
  transition:all .16s var(--ease);
}
.stake:hover{color:var(--t1);border-color:var(--stroke-2);transform:translateY(-1px)}
.stake.active{color:var(--green-bright);background:var(--green-dim);border-color:rgba(33,208,122,.45);box-shadow:0 0 14px -5px var(--green-glow)}

/* ============================================================
   MARKET WATCH — left rail view
   ============================================================ */
.side-view{display:flex;flex-direction:column;flex:1;min-height:0}
.app.watch-open{--side-w:264px}
.watch-head{display:flex;flex-direction:column;gap:8px;margin:16px 6px 10px}
.watch-search{
  display:flex;align-items:center;gap:8px;height:36px;padding:0 11px;
  border-radius:var(--r-sm);background:rgba(0,0,0,.28);border:1px solid var(--stroke);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.watch-search:focus-within{border-color:rgba(33,208,122,.5);box-shadow:0 0 0 3px rgba(33,208,122,.1)}
.watch-search svg{width:14px;height:14px;flex:none;stroke:var(--t3);fill:none;stroke-width:1.8;stroke-linecap:round}
.watch-search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--t1);font:500 12.5px var(--font-ui)}
.watch-search input::placeholder{color:var(--t3)}
.watch-filters{display:flex;gap:8px}
.watch-filters .select-sm{flex:1}
.watch-filters .select-sm select{width:100%}
.watch-back{
  width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:var(--r-sm);
  background:var(--glass-2);border:1px solid var(--stroke);color:var(--t2);cursor:pointer;
  transition:all .16s var(--ease);
}
.watch-back:hover{color:var(--green-bright);border-color:rgba(33,208,122,.35);background:var(--green-dim)}
.watch-back svg,.watch-filters .icon-sq svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-sq{
  width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:var(--r-sm);
  background:var(--glass-2);border:1px solid var(--stroke);color:var(--t2);cursor:pointer;
  transition:all .16s var(--ease);
}
.icon-sq:hover{color:var(--t1);background:var(--glass-3)}
.watch-list{flex:1;overflow-y:auto;margin:0 2px;padding:0 4px 6px;display:flex;flex-direction:column;gap:3px}
.w-row{
  display:flex;align-items:center;gap:8px;
  padding:8px 8px;border-radius:10px;border:1px solid transparent;cursor:pointer;
  transition:background .15s var(--ease), border-color .15s var(--ease);
}
.w-row:hover{background:var(--glass-3)}
.w-row.active{background:var(--green-dim);border-color:rgba(33,208,122,.25)}
.w-ic{
  width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:50%;
  font:700 10px var(--font-ui);color:var(--t1);
  background:var(--glass-3);box-shadow:0 0 0 1px var(--stroke-2);
}
.w-star{
  flex:none;width:20px;height:20px;display:grid;place-items:center;
  background:none;border:none;color:var(--t3);cursor:pointer;padding:0;
  transition:color .15s var(--ease), transform .15s var(--ease);
}
.w-star svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linejoin:round}
.w-star.on{color:var(--green)}
.w-star.on svg{fill:var(--green)}
.w-star:hover{transform:scale(1.15)}
.w-sym{flex:1;min-width:0;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-px{font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
.w-chg{width:47px;text-align:right;font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums}
.up-c{color:var(--green)} .down-c{color:var(--red)} .flat-c{color:var(--t3)}
.watch-foot{
  display:flex;align-items:center;gap:6px;margin:10px 6px 0;padding-top:10px;
  border-top:1px solid var(--stroke);
}
.watch-foot .select-sm{flex:1}
.watch-foot .select-sm select{width:100%}
.app.collapsed #side-watch{display:none}

/* ============================================================
   MODALS — shared glass dialog system (all nav views)
   ============================================================ */
.overlay{
  position:fixed;inset:0;z-index:80;background:rgba(3,6,9,.55);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease);
}
.overlay.open{opacity:1;pointer-events:auto}
.modal{
  position:fixed;left:50%;top:50%;z-index:81;
  width:min(540px,calc(100vw - 28px));max-height:calc(100vh - 40px);overflow-y:auto;
  padding:20px 22px 22px;
  opacity:0;pointer-events:none;
  transform:translate(-50%,-47%) scale(.965);
  transition:opacity .28s var(--ease), transform .28s var(--ease);
}
.modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.modal-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.modal-title{font-family:var(--font-display);font-size:16px;font-weight:600}
.modal-head .x-btn{margin-left:auto;flex:none}
.modal-sub{font-size:12px;color:var(--t3);margin:-10px 0 14px}

.m-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}
.m-tabs.cols-3{grid-template-columns:repeat(3,1fr)}
.m-tab{
  padding:9px 0;border-radius:var(--r-max);cursor:pointer;
  background:var(--glass-2);border:1px solid var(--stroke);color:var(--t2);
  font:600 12.5px var(--font-ui);transition:all .18s var(--ease);
}
.m-tab:hover{color:var(--t1);transform:translateY(-1px)}
.m-tab.active{color:var(--green-bright);border-color:rgba(33,208,122,.4);box-shadow:0 0 16px -6px var(--green-glow)}

.pillset{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:2px 0 16px}
.pillset button{
  padding:8px 20px;border-radius:999px;cursor:pointer;
  background:var(--glass-2);border:1px solid var(--stroke);color:var(--t2);
  font:600 12px var(--font-ui);transition:all .16s var(--ease);
}
.pillset button:hover{color:var(--t1);transform:translateY(-1px)}
.pillset button.active{color:#06110B;background:var(--green);border-color:transparent;box-shadow:0 4px 14px -4px var(--green-glow)}

.form-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-1{display:grid;gap:12px}
.form-3{display:grid;grid-template-columns:1fr .7fr 1.3fr;gap:10px}
.form-1>.field,.form-2>.field,.form-3>.field{min-width:0}
@media (max-width:520px){.form-2,.form-3{grid-template-columns:1fr}}
@media (max-width:760px){.update-account__form{display:flex;flex-direction:column}.update-account__form .cta{order:-1;margin-bottom:18px}}
.modal .cta{margin-top:6px}

.empty{
  margin:4px 0;padding:30px 20px;border-radius:var(--r-md);
  border:1px dashed var(--stroke-2);background:rgba(255,255,255,.015);
  text-align:center;color:var(--t3);font-size:12.5px;line-height:1.55;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.empty .ic{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--glass-2);border:1px solid var(--stroke);color:var(--t2);
}
.empty .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.empty b{color:var(--t1);font-size:13.5px;font-weight:600}

.btn-ghost{
  padding:8px 16px;border-radius:var(--r-sm);cursor:pointer;
  background:var(--glass-2);border:1px solid var(--stroke);color:var(--t2);
  font:600 12px var(--font-ui);transition:all .16s var(--ease);
}
.btn-ghost:hover{color:var(--green-bright);border-color:rgba(33,208,122,.35);background:var(--green-dim)}
.mini-cta{
  padding:8px 14px;border:none;border-radius:var(--r-sm);cursor:pointer;
  color:#04120A;font:700 11.5px var(--font-ui);letter-spacing:.03em;
  background:linear-gradient(160deg,var(--green-bright),#15B368);
  box-shadow:0 6px 16px -6px var(--green-glow),var(--inner-hi);
  transition:transform .16s var(--ease), filter .16s var(--ease);
}
.mini-cta:hover{transform:translateY(-1px);filter:brightness(1.05)}

.greet-card{
  padding:14px 16px;border-radius:var(--r-md);margin-bottom:16px;
  background:var(--glass-2);border:1px solid var(--stroke);
}
.greet-card .date{font-size:11px;color:var(--t3)}
.greet-card .msg{font-size:14px;font-weight:600;margin-top:3px}
.greet-card .msg b{color:var(--green-bright)}

.big-amount{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.big-amount .v{font-family:var(--font-display);font-size:30px;font-weight:700;font-variant-numeric:tabular-nums}
.cur-chip{display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:var(--glass-2);border:1px solid var(--stroke);font-weight:600;font-size:12px}
.cur-chip .flag{width:18px;height:18px;font-size:8px}

.section-lbl{font-size:12.5px;font-weight:600;margin:16px 0 4px}
.methods{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.method{
  padding:14px 8px 12px;border-radius:var(--r-md);cursor:pointer;
  background:var(--glass-2);border:1px solid var(--stroke);color:var(--t2);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font:600 11.5px var(--font-ui);transition:all .18s var(--ease);
}
.method svg{width:20px;height:20px;stroke:var(--t2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .18s var(--ease)}
.method{text-align:center;text-decoration:none}
.method img{width:26px;height:26px;object-fit:contain}
/* coin marks (parts/cryptoIcons.js) render inside a span, so the wrapper
   has to behave like the <svg> it replaces in the flex row */
.method .coin-ic{display:inline-flex;line-height:0;flex-shrink:0}
.method:hover{transform:translateY(-2px);border-color:var(--stroke-2);color:var(--t1)}
.method.active{color:var(--green-bright);/*background:var(--green-dim);*/border-color:rgba(33,208,122,.45);box-shadow:0 0 18px -7px var(--green-glow)}
.method.active svg{stroke:var(--green-bright)}

/* short-labelled options (crypto networks): single scrollable row, icon + label inline */
.methods-row{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:10px}
.methods-row .method{flex:0 0 auto;flex-direction:row;justify-content:center;gap:8px;padding:10px 16px;white-space:nowrap}
.methods-row .method svg,.methods-row .method img{flex-shrink:0}

.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.row-between .lbl-lg{font-size:13px;font-weight:600}
.select-sm{position:relative;display:flex;align-items:center;height:32px;background:rgba(0,0,0,.28);border:1px solid var(--stroke);border-radius:var(--r-sm);transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.select-sm:focus-within{border-color:rgba(33,208,122,.55);box-shadow:0 0 0 3px rgba(33,208,122,.12)}
.select-sm select{
  width:100%;height:100%;padding:0 30px 0 10px;background:transparent;border:none;outline:none;cursor:pointer;
  color:var(--t1);font:500 12px var(--font-ui);min-width:0;text-overflow:ellipsis;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
}
.select-sm select::-ms-expand{display:none}
.select-sm::after{
  content:"";position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:12px;height:12px;pointer-events:none;background-color:var(--t3);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/12px 12px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/12px 12px no-repeat;
  transition:background-color .18s var(--ease);
}
.select-sm:hover::after{background-color:var(--t2)}
.select-sm:focus-within::after{background-color:var(--t1)}
.select-sm select option{background:#10161C;color:var(--t1)}

/* ---- News tab (right panel) ---- */
.depth-view{display:flex;flex-direction:column;flex:1;min-height:0}
.news-list{flex:1;overflow-y:auto;padding:6px 10px 10px}
.news-item{
  display:flex;align-items:center;gap:11px;padding:12px 8px;border-radius:10px;
  transition:background .16s var(--ease);
}
.news-item + .news-item{border-top:1px solid var(--stroke)}
.news-item:hover{background:var(--glass-3)}
.news-thumb{
  flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(33,208,122,.16),rgba(33,208,122,.03));
  border:1px solid rgba(33,208,122,.2);color:var(--green);
}
.news-thumb svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.news-item b{flex:1;font-size:11.8px;font-weight:600;line-height:1.4}
.read-btn{
  flex:none;padding:5px 14px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid rgba(33,208,122,.4);color:var(--green-bright);
  font:600 10px var(--font-ui);letter-spacing:.1em;text-transform:uppercase;
  transition:all .16s var(--ease);
}
.read-btn:hover{background:var(--green-dim);box-shadow:0 0 12px -4px var(--green-glow);transform:translateY(-1px)}

/* ============================================================
   SCROLLBARS, FOCUS, MOTION, RESPONSIVE
   ============================================================ */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
button{font-family:var(--font-ui)}
button:focus-visible,.stake:focus-visible{outline:2px solid var(--green);outline-offset:2px}

@media (max-width:1420px){
  .app{grid-template-columns:var(--side-w) minmax(0,1fr) 320px}
}
@media (max-width:1120px){
  .app{
    grid-template-columns:var(--side-w) minmax(0,1fr);
    grid-template-rows:74px minmax(420px,1fr) auto auto;
    grid-template-areas:"side top" "side chart" "side right" "side table";
  }
  .right-col{flex-direction:row;flex-wrap:wrap}
  .right-col > *{flex:1 1 300px}
}
@media (max-width:760px){
  .app{grid-template-columns:1fr;grid-template-areas:"top" "chart" "right" "table";padding:10px;gap:10px}
  .sidebar{display:none}
  .topbar{flex-wrap:wrap;padding:10px}
  .stat{flex:1 1 30%;padding:8px 12px;border-left:none}
  .predict{top:auto;bottom:12px;transform:translateX(-50%)}
  @keyframes modal-in{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ============================================================
   LOADER — signature glowing dual-ring spinner
   ============================================================ */
.loading-overlay{
  position:absolute;inset:0;z-index:55;display:grid;place-items:center;
  background:rgba(8,11,14,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:inherit;
  opacity:0;pointer-events:none;transition:opacity .28s var(--ease);
}
.loading-overlay.on{opacity:1;pointer-events:auto}
.loader{display:flex;flex-direction:column;align-items:center;gap:15px}
.spin{position:relative;width:54px;height:54px}
.spin .track{position:absolute;inset:0;border-radius:50%;border:3.5px solid rgba(255,255,255,.06)}
.spin .ring{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 22%, rgba(33,208,122,.35) 60%, var(--green-bright) 100%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 3.5px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 3.5px));
  animation:ld-spin 1s linear infinite;
  filter:drop-shadow(0 0 9px var(--green-glow));
}
.spin .ring2{
  position:absolute;inset:10px;border-radius:50%;opacity:.85;
  background:conic-gradient(from 180deg, transparent 0 58%, rgba(59,225,143,.6) 100%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.2px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.2px));
  animation:ld-spin 1.7s linear infinite reverse;
}
.spin .dot{
  position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:var(--green);box-shadow:0 0 12px var(--green-glow);
  animation:ld-pulse 1.2s ease-in-out infinite;
}
@keyframes ld-spin{to{transform:rotate(360deg)}}
@keyframes ld-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.55);opacity:.55}}
.load-lbl{
  font:600 10.5px var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--t2);
  display:flex;
}
.load-lbl::after{content:"";width:16px;text-align:left;animation:ld-dots 1.2s steps(4,end) infinite}
@keyframes ld-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}100%{content:""}}
@media (prefers-reduced-motion:reduce){
  .spin .ring,.spin .ring2{animation-duration:3s}
}

/* ============================================================
   WT-LOADER — full-screen loader while the client area/webtrader
   boots or reconnects. Webtrader is ~99% of the app, so this gets
   the same big centered spinner treatment as the auth screen,
   not a small inline one.
   ============================================================ */
.wt-loader{
  position:fixed;inset:0;z-index:150;display:grid;place-items:center;
  background:var(--bg-0);
}
.wt-loader .loader{gap:20px}
.wt-loader .spin{width:84px;height:84px}
.wt-loader .spin .track{border-width:5px}
.wt-loader .spin .dot{width:9px;height:9px;margin:-4.5px 0 0 -4.5px}
.wt-loader .load-lbl{font-size:12.5px}

/* ============================================================
   AUTH SCREEN (scoped) + TOASTS + SYSTEM GLUE
   ============================================================ */
body:not(.authed){overflow:hidden}
body:not(.authed) .predict{display:none}
#screen-auth{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:28px 16px;overflow-y:auto;background:var(--bg-0)}
body.authed #screen-auth{display:none}
#screen-auth .bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#screen-auth .bg::before,#screen-auth .bg::after{content:"";position:absolute;border-radius:50%;filter:blur(90px)}
#screen-auth .bg::before{width:64vmax;height:64vmax;left:-14vmax;top:-24vmax;background:radial-gradient(circle, rgba(33,208,122,.10), transparent 62%);animation:glow-a 16s ease-in-out infinite alternate}
#screen-auth .bg::after{width:56vmax;height:56vmax;right:-16vmax;bottom:-22vmax;background:radial-gradient(circle, rgba(52,120,246,.09), transparent 60%);animation:glow-b 20s ease-in-out infinite alternate}
@keyframes glow-a{from{transform:translate(0,0) scale(1)}to{transform:translate(7vmax,5vmax) scale(1.12)}}
@keyframes glow-b{from{transform:translate(0,0) scale(1.08)}to{transform:translate(-6vmax,-4vmax) scale(1)}}
#screen-auth .grid-bg{position:absolute;inset:-60px;background-image:linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 90% 80% at 50% 45%, #000 30%, transparent 78%);-webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 45%, #000 30%, transparent 78%);animation:grid-drift 40s linear infinite}
@keyframes grid-drift{from{transform:translate(0,0)}to{transform:translate(56px,56px)}}
canvas#bg-chart{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
#screen-auth .vignette{position:absolute;inset:0;background:radial-gradient(ellipse 120% 100% at 50% 40%, transparent 40%, rgba(4,6,8,.8) 100%)}
#screen-auth .stage{position:relative;z-index:1;width:100%;max-width:460px}
#screen-auth .card{position:relative;overflow:hidden;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--stroke);border-radius:20px;box-shadow:0 30px 70px -24px rgba(0,0,0,.75), 0 2px 8px rgba(0,0,0,.35), var(--inner-hi);padding:34px 36px 30px;animation:card-in .6s var(--ease) both}
@keyframes card-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
#screen-auth .view{display:none}
#screen-auth .view.on{display:block;animation:view-in .35s var(--ease)}
@keyframes view-in{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
#screen-auth .brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:8px}
#screen-auth .brand .logo{font-family:var(--font-display);font-size:28px;font-weight:600}
#screen-auth .brand .logo .dot{color:var(--green)}
#screen-auth .brand .live{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green-glow);animation:pulse 2.2s infinite}
#screen-auth h1{font-family:var(--font-display);font-size:19px;font-weight:600;text-align:center}
#screen-auth .sub{text-align:center;font-size:12.5px;color:var(--t3);margin:6px 0 26px;line-height:1.5}
#screen-auth .sub b{color:var(--green-bright)}
#screen-auth .sub .brand-link{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .18s var(--ease),opacity .18s var(--ease)}
#screen-auth .sub .brand-link:hover{border-bottom-color:var(--green-bright)}
#screen-auth .sub .brand-link:focus-visible{outline:2px solid var(--green-bright);outline-offset:2px;border-radius:3px}
#screen-auth .form{display:grid;gap:14px}
#screen-auth .frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:440px){#screen-auth .frow{grid-template-columns:1fr}}
#screen-auth .input{height:44px}
#screen-auth .input input{font-size:13.5px;padding:0 14px}
#screen-auth .input:hover{border-color:var(--stroke-2)}
#screen-auth .cc{flex:none;display:flex;align-items:center;gap:6px;padding:0 10px 0 13px;height:100%;border-right:1px solid var(--stroke);color:var(--t2);font:600 12.5px var(--font-ui)}
#screen-auth .cc img{width:18px;border-radius:3px;display:block}
.eye{flex:none;width:34px;height:34px;margin-right:5px;display:grid;place-items:center;border:none;border-radius:7px;background:transparent;color:var(--t3);cursor:pointer;transition:color .16s var(--ease), background .16s var(--ease)}
.eye:hover{color:var(--green-bright);background:var(--green-dim)}
.eye svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.check{display:flex;gap:11px;cursor:pointer;user-select:none;position:relative}
.check input{position:absolute;opacity:0;pointer-events:none}
.check .box{flex:none;width:18px;height:18px;margin-top:1px;border-radius:6px;background:rgba(0,0,0,.3);border:1px solid var(--stroke-2);display:grid;place-items:center;transition:all .18s var(--ease)}
.check .box svg{width:11px;height:11px;stroke:#06110B;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);transition:all .18s var(--ease)}
.check:hover .box{border-color:rgba(33,208,122,.4)}
.check input:checked + .box{background:var(--green);border-color:var(--green);box-shadow:0 0 12px -3px var(--green-glow)}
.check input:checked + .box svg{opacity:1;transform:scale(1)}
.check .txt{font-size:11.5px;line-height:1.55;color:var(--t2)}
.check .txt a{color:var(--green-bright);text-decoration:none;white-space:nowrap}
.check .txt a:hover{text-decoration:underline}
#screen-auth .cta{padding:13px 0;font-size:14px;position:relative;overflow:hidden}
#screen-auth .cta::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);transform:skewX(-18deg);transition:left .5s var(--ease)}
#screen-auth .cta:hover::after{left:125%}
#screen-auth .cta:disabled{cursor:not-allowed;color:var(--t3);filter:none;transform:none;background:var(--glass-3);box-shadow:var(--inner-hi)}
#screen-auth .cta:disabled::after{display:none}
#screen-auth .links{display:flex;justify-content:space-between;align-items:center;margin-top:20px}
.link-btn{position:relative;background:none;border:none;padding:2px 0;cursor:pointer;color:var(--green-bright);font:600 12.5px var(--font-ui)}
.link-btn::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;background:var(--green);transition:right .22s var(--ease)}
.link-btn:hover::after{right:0}
#screen-auth .divider{display:flex;align-items:center;gap:12px;margin:20px 0 0;color:var(--t3);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
#screen-auth .divider::before,#screen-auth .divider::after{content:"";flex:1;height:1px;background:var(--stroke)}
.ghost-wide{width:100%;margin-top:16px;padding:12px 0;border-radius:var(--r-md);cursor:pointer;background:var(--glass-2);border:1px solid var(--stroke);color:var(--t2);font:600 13px var(--font-ui);transition:all .2s var(--ease)}
.ghost-wide:hover{color:var(--green-bright);border-color:rgba(33,208,122,.4);background:var(--green-dim);transform:translateY(-1px)}
#screen-auth .risk{margin-top:16px;text-align:center;font-size:10.5px;color:var(--t3);line-height:1.6}
#screen-auth .foot{margin-top:22px;text-align:center;font-size:11px;color:var(--t3);position:relative;z-index:1}
.err{display:none;font-size:11px;color:var(--red);margin-top:6px}
.field.invalid .input{border-color:rgba(229,86,107,.55)!important;box-shadow:0 0 0 3px rgba(229,86,107,.1)!important}
.field.invalid .err{display:block}
.form-ok{display:flex;align-items:flex-start;gap:11px;margin-top:14px;padding:13px 15px;border-radius:var(--r-md);background:var(--green-dim);border:1px solid rgba(33,208,122,.32);box-shadow:0 0 20px -10px var(--green-glow)}
.form-ok svg{flex:none;width:20px;height:20px;margin-top:1px;fill:none;stroke:var(--green-bright);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.form-ok .ok-title{color:var(--green-bright);font:600 12.5px var(--font-ui);line-height:1.4}
.form-ok .ok-sub{margin-top:3px;color:var(--t2);font-size:11px;line-height:1.55}
/* Error twin of .form-ok - same layout, red tokens. */
.form-ok.form-err{background:var(--red-dim);border-color:rgba(229,86,107,.32);box-shadow:0 0 20px -10px var(--red-glow)}
.form-ok.form-err svg{stroke:var(--red)}
.form-ok.form-err .ok-title{color:var(--red)}
.hint{margin-top:14px;padding:10px 12px;border-radius:var(--r-sm);background:var(--green-dim);border:1px solid rgba(33,208,122,.25);font-size:11px;color:var(--t2);line-height:1.6;text-align:center}
.hint b{color:var(--green-bright);font-weight:600}

/* ---- Prevent grid items (fields) from blowing out the card width ---- */
#screen-auth .form>*,#screen-auth .frow>*{min-width:0}

/* ---- Sign In / Sign up mode switch ---- */
#screen-auth .mode-switch{display:flex;gap:4px;padding:4px;margin:18px 0 24px;border-radius:var(--r-md);background:rgba(0,0,0,.28);border:1px solid var(--stroke)}
#screen-auth .mode-switch button{flex:1;padding:10px 0;border:none;border-radius:8px;background:transparent;color:var(--t2);font:600 13px var(--font-ui);cursor:pointer;transition:all .2s var(--ease)}
#screen-auth .mode-switch button:hover{color:var(--t1)}
#screen-auth .mode-switch button.active{color:#06110B;background:linear-gradient(160deg,var(--green-bright),#15B368);box-shadow:0 4px 14px -4px var(--green-glow),var(--inner-hi)}
#screen-auth .mode-switch button:focus-visible{outline:2px solid var(--green-bright);outline-offset:2px}

/* ---- Leading field icons (sign up form) ---- */
#screen-auth .f-ic{flex:none;width:36px;height:100%;display:grid;place-items:center;color:var(--t3)}
#screen-auth .f-ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- Phone field (intl-tel-input) ---- */
#screen-auth .phone-field .input{padding:0;overflow:visible}
#screen-auth .phone-field .iti{width:100%;display:flex}
#screen-auth .phone-field .iti input[type=tel]{flex:1;width:100%;height:100%;padding:0 14px 0 52px;background:transparent;border:none;outline:none;color:var(--t1);font:500 13.5px var(--font-ui)}

/* ---- intl-tel-input theming (unique vendor classes, safe to keep global) ---- */
.iti{z-index:300}
.iti__selected-flag{background:transparent!important;padding:0 8px 0 12px;border-radius:9px 0 0 9px}
.iti__selected-flag:hover,.iti__selected-flag:focus{background:rgba(255,255,255,.05)!important}
.iti__arrow{border-top-color:var(--t3)}
.iti__arrow--up{border-bottom-color:var(--t3)}
.iti__country-list{background:#10161C!important;color:var(--t1);border:1px solid var(--stroke);border-radius:9px;box-shadow:0 18px 44px -18px rgba(0,0,0,.8);font-size:13px;margin:6px 0 0}
.iti__country{padding:8px 10px}
.iti__country.iti__highlight{background:var(--green-dim)!important}
.iti__dial-code{color:var(--t3)}

/* ---- Sign up generic/server error banner ---- */
#screen-auth .su-error{margin-top:6px;text-align:center;font-size:11.5px;color:var(--red);line-height:1.5}

/* ---- reCAPTCHA ---- */
#screen-auth .su-recaptcha{display:flex;justify-content:center;margin-top:2px}

/* toasts */
.right-col > section,.positions{position:relative}
.acct-hero{
  padding:14px 16px;border-radius:var(--r-md);margin-bottom:12px;
  background:linear-gradient(160deg, rgba(33,208,122,.10), rgba(33,208,122,.02));
  border:1px solid rgba(33,208,122,.25);box-shadow:0 0 24px -12px var(--green-glow), var(--inner-hi);
}
.acct-hero .who{font-size:12px;font-weight:600;color:var(--green-bright)}
.acct-hero .row{display:flex;align-items:baseline;gap:10px;margin-top:4px;justify-content: space-between;}
.acct-hero .row .lbl{font-size:11px;color:var(--t3)}
.acct-hero .row .no{font-family:var(--font-display);font-size:12px;color:var(--white);font-weight:700;font-variant-numeric:tabular-nums;flex:1;text-align:center}
.acct-hero .row .cur{font-size:12px;font-weight:700;color:var(--green-bright)}
.acc-row{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:var(--r-md);margin-bottom:8px;
  /*background:var(--glass-2);border:1px solid var(--stroke);box-shadow:var(--inner-hi);
  transition:border-color .18s var(--ease), background .18s var(--ease);*/
}
.acc-row:hover{background:var(--glass-3);border-color:var(--stroke-2)}
.acc-ic{
  flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(150deg, rgba(33,208,122,.16), rgba(33,208,122,.03));
  border:1px solid rgba(33,208,122,.22);color:var(--green);
}
.acc-ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.acc-row .lbl{font-size:13px;font-weight:500}
.acc-row .val{margin-left:auto;font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.acc-row .unit{font-size:13.5px;font-weight:700;color:var(--green-bright);margin-left:5px}
.toast-wrap{position:fixed;top:18px;right:18px;z-index:400;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:10px;min-width:230px;max-width:330px;
  padding:11px 14px;border-radius:var(--r-md);
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--stroke);box-shadow:var(--shadow),var(--inner-hi);
  font:500 12.5px var(--font-ui);color:var(--t1);
  animation:toast-in .35s var(--ease);
}
.toast.out{animation:toast-out .3s var(--ease) forwards}
@keyframes toast-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes toast-out{to{opacity:0;transform:translateX(20px)}}
.toast .tic{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center}
.toast.ok .tic{background:var(--green-dim);color:var(--green-bright)}
.toast.bad .tic{background:var(--red-dim);color:var(--red)}
.toast .tic svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* title + body + dismiss variant (parts/Toasts.vue) */
.toast-wrap .toast{pointer-events:auto;align-items:flex-start}
.toast .tic.round{width:30px;height:30px;border-radius:50%}
.toast .tic.round svg{width:15px;height:15px}
.toast.ok .tic.round{box-shadow:0 0 20px -5px var(--green-glow)}
.toast .t-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.toast .t-title{font-family:var(--font-display);font-size:13.5px;font-weight:700;color:var(--white)}
.toast .t-text{font-size:12px;font-weight:500;color:var(--t2);line-height:1.4}
.toast .t-x{flex:none;margin-left:auto;padding:2px;line-height:0;background:none;border:0;cursor:pointer;color:var(--t3);transition:color .18s var(--ease)}
.toast .t-x:hover{color:var(--t1)}
.toast .t-x svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
/* inline ticket form */
.ticket-form{display:flex;gap:8px;margin-bottom:12px}
.ticket-form .input{flex:1;height:38px}
.ticket-row{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:var(--r-sm);background:var(--glass-2);border:1px solid var(--stroke);margin-bottom:6px;font-size:12px}
.ticket-row .st{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-bright);background:var(--green-dim);padding:3px 9px;border-radius:99px}
.txn-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:10px 12px;border-radius:var(--r-sm);background:var(--glass-2);border:1px solid var(--stroke);margin-bottom:6px;font-size:12px}
.txn-row .d{color:var(--t3);font-size:10.5px}
.txn-row .amt{font-weight:700;font-variant-numeric:tabular-nums}
.st{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-bright);background:var(--green-dim);padding:3px 9px;border-radius:99px;white-space:nowrap}
.st.pending{color:var(--t2);background:var(--glass-3)}
.st.declined{color:var(--red);background:var(--red-dim)}
/* trading history list */
.th-list{display:flex;flex-direction:column;gap:6px}
.th-item{border-radius:var(--r-sm);/*background:var(--glass-2);border:1px solid var(--stroke);*/overflow:hidden}
.th-row{display:grid;grid-template-columns:1fr auto auto 16px;gap:12px;align-items:center;width:100%;text-align:left;cursor:pointer;padding:10px 12px;background:none;border:none;color:var(--t1);font:inherit}
.th-row:hover{background:var(--glass-3)}
.th-sym{display:flex;flex-direction:column;gap:2px;min-width:0}
.th-sym .th-name{font-size:13px;font-weight:600}
.th-sym .th-vol{font-size:10.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.04em}
.th-price{display:flex;flex-direction:column;gap:2px;text-align:right}
.th-price .th-plabel{font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.th-price .th-pval{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.th-profit{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.th-chev{width:16px;height:16px;color:var(--t3);stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s var(--ease)}
.th-chev.open{transform:rotate(90deg)}
.th-details{padding:2px 12px 10px;border-top:1px solid var(--stroke)}
.th-drow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;font-size:12px;border-bottom:1px solid var(--stroke)}
.th-drow:last-child{border-bottom:none}
.th-drow > span{color:var(--t3)}
.th-drow b{font-weight:600;color:var(--t1);font-variant-numeric:tabular-nums}
.th-details .cta,.th-details .btn-ghost{margin-top:12px}
.sum-cards{display:flex;gap:10px;flex-wrap:wrap;padding:4px}
.sum-card{flex:1;min-width:130px;padding:12px 14px;border-radius:var(--r-sm);background:var(--glass-2);border:1px solid var(--stroke)}
.sum-card .l{font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.sum-card .v{font-size:15px;font-weight:700;margin-top:3px}

/* ============================================================
   CLIENT AREA SHELL — sidebar (app 1) over WebTrader iframe (app 2)
   The iframe fills the area; the sidebar floats on the left.
   Collapsed (base) = narrow rail; expanded = wider panel that
   OVERLAYS the iframe (base block sizes never change).
   ============================================================ */
.ca-shell{
  --ca-rail-w:60px;      /* collapsed sidebar width  */
  --ca-open-w:236px;     /* expanded sidebar width   */
  position:fixed;inset:0;overflow:hidden;
}

/* ---- main = WebTrader iframe area (app 2) ---- */
.ca-main{
  position:absolute;top:0;right:0;bottom:0;
  left:var(--ca-rail-w);
  overflow:hidden;
}
.ca-main .webtrader,
.ca-main .tab{width:100%;height:100%}
.ca-main #webtader-iframe,
.ca-main iframe{width:100%;height:100%;border:0;display:block;background:var(--bg-1)}

/* ---- sidebar (app 1) ---- */
.ca-sidebar{
  border-radius: 0;
  position:absolute;top:0;left:0;bottom:0;z-index:30;
  width:var(--ca-rail-w);
  display:flex;flex-direction:column;padding:18px 8px 12px;
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-right:1px solid var(--stroke);box-shadow:var(--shadow),var(--inner-hi);
  transition:width .26s var(--ease), padding .26s var(--ease);
}
.ca-sidebar.open{width:var(--ca-open-w);padding:18px 14px 12px}

/* collapse/expand toggle lives inside the nav, between the logo and the nav items */
.ca-sidebar .nav-toggle svg{transition:transform .25s var(--ease)}
/* collapsed rail points right (expand); expanded points left (collapse) */
.ca-sidebar:not(.open) .nav-toggle svg{transform:rotate(180deg)}

/* logo */
.ca-sidebar .logo{padding:2px 8px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
/* long brand names get stepped down so they stay inside the rail (see brandSizeClass) */
.ca-sidebar.open .logo.is-long{font-size:21px}
.ca-sidebar.open .logo.is-longer{font-size:17px;letter-spacing:-.015em}
.ca-sidebar.open .logo.is-longest{font-size:14px;letter-spacing:-.02em}
.ca-sidebar:not(.open) .logo{font-size:0;text-align:center;padding:2px 0 0}
.ca-sidebar:not(.open) .logo::before{content:attr(data-initial);font-size:24px;color:var(--t1);font-family:var(--font-display);font-weight:600}
.ca-sidebar:not(.open) .logo .dot{font-size:24px}

/* user chip */
.ca-sidebar .user-chip{overflow:hidden}
.ca-sidebar:not(.open) .user-chip{justify-content:center;padding:8px;margin:16px 2px 8px}
.ca-sidebar:not(.open) .user-chip .u-meta{display:none}

/* nav */
.ca-sidebar .nav{margin-top:12px;flex:1 1 auto;min-height:0}
.ca-sidebar .nav a{cursor:pointer;white-space:nowrap;overflow:hidden}
.ca-sidebar .nav a .nav-ic{flex:none;width:17px;height:17px;display:grid;place-items:center}
.ca-sidebar .nav a .nav-ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.ca-sidebar:not(.open) .nav a{justify-content:center;padding:11px 0}
.ca-sidebar:not(.open) .nav a .txt{display:none}
.ca-sidebar:not(.open) .nav a:hover{transform:none}

/* account selector */
.ca-sidebar .acct-select{margin:12px 4px 0;width:auto;overflow:hidden}
.ca-sidebar:not(.open) .acct-select{justify-content:center;padding:10px 0}
.ca-sidebar:not(.open) .acct-select .txt{display:none}
.acct-select select{
  flex:1;min-width:0;background:transparent;border:none;outline:none;cursor:pointer;
  color:var(--t1);font:600 12px var(--font-ui);
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
}
.acct-select select option{background:#10161C;color:var(--t1)}
.acct-select .acct-chev{flex:none;color:var(--t3)}
.ca-sidebar:not(.open) .acct-select .acct-chev{margin:0}

/* ============================================================
   CLIENT AREA MODAL BASE — centred glass card for nav components
   ============================================================ */
.ca-modal{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:81;
  width:min(540px,calc(100vw - 28px));max-height:calc(100vh - 40px);
  display:flex;flex-direction:column;
}
.ca-modal.modal-sm{width:min(420px,calc(100vw - 28px))}
.ca-modal.modal-md{width:min(540px,calc(100vw - 28px))}
.ca-modal.modal-lg{width:min(720px,calc(100vw - 28px))}
.ca-modal.modal-xl{width:min(940px,calc(100vw - 28px))}
.ca-modal-close{position:absolute;top:0px;right:0px;z-index:2}
.ca-modal-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:22px;border-radius:inherit}

/* modal enter/leave (Vue transition name="ca-modal") */
.ca-modal-enter-active,.ca-modal-leave-active{transition:opacity .28s var(--ease), transform .28s var(--ease)}
.ca-modal-enter,.ca-modal-leave-to{opacity:0;transform:translate(-50%,-47%) scale(.965)}
.ca-overlay-enter-active,.ca-overlay-leave-active{transition:opacity .25s var(--ease)}
.ca-overlay-enter,.ca-overlay-leave-to{opacity:0}

/* ============================================================
   CLIENT AREA — MOBILE (<=760px): bottom nav + bottom sheets
   Desktop chrome (SideBar + centred modal) is replaced by the
   BottomBar chrome; the iframe fills above the bottom nav.
   ============================================================ */
.ca-shell{--nav-h:64px}

@media (max-width:760px){
  /* iframe (app 2) fills the space above the bottom nav */
  .ca-main{left:0;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px))}
  /* overlay dims the content but leaves the bottom nav tappable */
  .overlay{top:0;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));z-index:60}
}

/* ---- bottom navigation ---- */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  max-width:480px;margin:0 auto;
  display:grid;grid-template-columns:repeat(5,1fr);
  padding:8px 6px calc(env(safe-area-inset-bottom,0px) + 8px);
  background:linear-gradient(180deg,rgba(10,14,18,.88),rgba(8,11,14,.96));
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-top:1px solid var(--stroke);
}
.bn{
  display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;
  padding:0 0;border:none;background:none;color:var(--t3);
  font:600 10px var(--font-ui);letter-spacing:.03em;border-radius:12px;
  transition:color .18s var(--ease);position:relative;
}
.bn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s var(--ease)}
.bn:hover{color:var(--t2)}
.bn.active{color:var(--green-bright)}
.bn.active svg{transform:translateY(-1px);filter:drop-shadow(0 0 6px var(--green-glow))}
.bn.active::before{content:"";position:absolute;top:0;width:18px;height:3px;border-radius:3px;background:var(--green);box-shadow:0 0 10px var(--green-glow)}

/* ---- bottom sheet (mobile modal) ---- */
.sheet{
  position:fixed;left:0;right:0;z-index:61;
  max-width:480px;margin:0 auto;
  bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));
  max-height:calc(94dvh - var(--nav-h) - env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--stroke);border-bottom:none;border-radius:22px 22px 0 0;
  box-shadow:0 -18px 44px -18px rgba(0,0,0,.7), var(--inner-hi);
  /* --sheet-drag follows the finger during a swipe-to-dismiss (see sheetDrag.js);
     the transition springs the sheet back when the swipe is released short. */
  transform:translateY(var(--sheet-drag,0px));
  transition:transform .3s var(--ease);
}
.sheet.is-dragging{transition:none;will-change:transform}
/* grab handle — the dismiss affordance, padded out to a comfortable touch target */
.sheet-handle{flex:none;display:flex;justify-content:center;padding:10px 0 6px;cursor:grab;touch-action:none}
.sheet-handle:active{cursor:grabbing}
.grab{width:38px;height:4px;border-radius:99px;background:rgba(255,255,255,.14);flex:none}
/* the scroll box clips (overflow + the inherited 22px top corners), so it keeps a
   little top padding — flush against that edge the first child loses its top
   border and any active/focus glow. The handle gives back the same 6px so the
   gap between handle and content is unchanged. */
.sheet-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 18px 20px;border-radius:inherit}
.sheet-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.sheet-title{font-family:var(--font-display);font-size:16px;font-weight:600}
.sheet-head .x-btn{margin-left:auto}

/* sheet slide-up (Vue transition name="ca-sheet") */
.ca-sheet-enter-active,.ca-sheet-leave-active{transition:transform .32s var(--ease)}
.ca-sheet-enter,.ca-sheet-leave-to{transform:translateY(calc(102% + var(--nav-h)))}

/* ---- "More" menu sheet ---- */
.me-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md);background:var(--glass-2);border:1px solid var(--stroke);margin-bottom:14px}
.me-card .avatar{width:38px;height:38px;border-radius:11px;font-size:13px}
.me-card b{display:block;font-size:13px;font-weight:600}
.me-card span{font-size:11px;color:var(--t3)}
.menu{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.menu button{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;
  padding:13px 12px;border-radius:11px;border:1px solid transparent;background:none;
  color:var(--t1);font:500 13.5px var(--font-ui);transition:background .16s var(--ease);
}
.menu button:hover{background:var(--glass-3)}
.menu button .me-ic{flex:none;display:flex}
.menu button .me-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.menu button .me-label{flex:1}
.menu button .chev{width:16px;height:16px;color:var(--t3);stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.menu button.danger{color:var(--red)}
.menu button.danger .me-ic svg{color:var(--red)}
.sheet .acct-select{margin-top:2px}

/* ============================================================
   CLIENT AREA — component refinements inside the mobile sheet
   (same components as desktop; tuned for phone width per the
   webtrader-mobile mockup — vertical method list, centred
   balance, roomier tap targets)
   ============================================================ */
@media (max-width:760px){
  /* the desktop modal absorbs .modal-sub's negative top margin in its 22px
     scroll padding; the sheet has none, so the line would clip at the top
     edge of .sheet-scroll (the grab handle supplies the spacing instead) */
  .sheet .modal-sub{margin-top:0}

  /* toasts span the phone width instead of hugging the right edge */
  .toast-wrap{top:12px;left:12px;right:12px}
  .toast{max-width:none;min-width:0}

  /* payment/withdraw methods: stack as full-width rows (mockup .method-list) */
  .sheet .methods{grid-template-columns:1fr;gap:8px}
  .sheet .method{flex-direction:row;justify-content:flex-start;gap:12px;padding:13px 14px;text-align:left;font-size:13px}
  .sheet .method svg{width:20px;height:20px}
  .sheet .method img{width:22px;height:22px}
  /* short-labelled options (the crypto networks from clientAreaSettings.deposit)
     stay in a single scrollable row with icon + label inline at phone width too */
  .sheet .methods.methods-row{display:flex;flex-wrap:nowrap;overflow-x:auto;grid-template-columns:none;gap:8px}
  .sheet .methods.methods-row .method{flex:0 0 auto;flex-direction:row;justify-content:center;gap:8px;padding:11px 16px;text-align:left;font-size:12.5px;white-space:nowrap}
  /* withdraw methods keep the desktop 3-up grid (icon above label) at phone
     width — the labels are short enough to sit side by side */
  .sheet .withdraw-request .methods{grid-template-columns:repeat(3,1fr);gap:8px}
  .sheet .withdraw-request .method{flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:12px 6px;text-align:center;font-size:11.5px;line-height:1.25}
  /* balance headline centred like the mobile mockup */
  .sheet .big-amount{justify-content:center;gap:12px}
  .sheet .big-amount .v{font-size:32px}
  /* roomier inputs / controls for touch */
  .sheet .input{height:40px}
  .sheet .m-tab{padding:11px 0}
  .sheet .cta{padding:13px 0}
  /* keep the 3-up transaction/order selects readable when they wrap */
  .sheet .form-3{gap:12px}
}


/* ============================================================
   SESSION EXPIRED — blocking relogin dialog
   Shown when the session dies (401) or the terminal fails to
   load within 15s. Intentionally has no close affordance: the
   single action clears storage + cookies and reloads, so a
   broken cache can't leave the user stuck in a dead session.
   ============================================================ */
.relogin-popup-overlay{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;padding:20px;
  background:rgba(3,6,9,.7);
  -webkit-backdrop-filter:blur(9px) saturate(1.1);backdrop-filter:blur(9px) saturate(1.1);
}
.relogin-popup{
  width:min(400px,calc(100vw - 40px));
  padding:30px 26px 22px;text-align:center;
  font-family:var(--font-ui);color:var(--t1);
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--stroke);border-radius:var(--r-xl);
  box-shadow:var(--shadow),var(--inner-hi);
}
/* amber badge — a warning, not an error: nothing was lost, the
   session just needs restarting */
.relogin-icon{
  width:56px;height:56px;margin:0 auto 18px;
  display:grid;place-items:center;border-radius:50%;
  color:#F5B544;background:rgba(245,181,68,.12);
  box-shadow:0 0 0 1px rgba(245,181,68,.28), 0 12px 28px -14px rgba(245,181,68,.55);
}
.relogin-icon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.relogin-title{font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:-.01em;margin-bottom:9px}
.relogin-text{font-size:13px;line-height:1.6;color:var(--t2);margin:0 auto 22px;max-width:34ch}
.relogin-popup .relogin-button{width:100%}
.relogin-note{margin-top:12px;font-size:11px;line-height:1.5;color:var(--t3)}

/* fade the scrim, lift the card (Vue transition name="ca-relogin") */
.ca-relogin-enter-active,.ca-relogin-leave-active{transition:opacity .25s var(--ease)}
.ca-relogin-enter,.ca-relogin-leave-to{opacity:0}
.ca-relogin-enter-active .relogin-popup,.ca-relogin-leave-active .relogin-popup{transition:opacity .28s var(--ease),transform .28s var(--ease)}
.ca-relogin-enter .relogin-popup,.ca-relogin-leave-to .relogin-popup{opacity:0;transform:translateY(10px) scale(.96)}

@media (max-width:760px){
  .relogin-popup{padding:26px 20px 18px;border-radius:var(--r-lg)}
  .relogin-icon{width:50px;height:50px;margin-bottom:14px}
  .relogin-title{font-size:16.5px}
}

/* ---- iOS: no auto-zoom when a field receives focus ----
   Mobile WebKit (Safari and iOS Chrome, which is WebKit too) zooms the page
   whenever the focused control computes to a font-size below 16px. Our fields
   sit at 12.5–13.5px, so every tap on the login form zoomed in. Raising the
   text-entry controls to 16px on touch devices removes the trigger while
   leaving pinch-to-zoom available (unlike a maximum-scale viewport lock). */
@media (pointer:coarse){
  input,select,textarea,
  .input input,.input select,.input textarea,
  #screen-auth .input input,
  #screen-auth .phone-field .iti input[type=tel],
  .search input,.watch-search input{
    font-size:16px;
  }
}