/* ensure hidden attribute works across browsers */
[hidden]{display:none !important;}
:root{
  color-scheme: dark;
  --bg: #0b0e11;
  --panel: rgba(255,255,255,.045);
  --panel2: rgba(255,255,255,.03);
  --border: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.70);
  --muted2: rgba(255,255,255,.58);
  --accent1: #F7A600;
  --accent2: #FFD24A;
  --good: #00C087;
  --bad: #F6465D;
  --shadow: rgba(0,0,0,.42);
  --r14: 14px;
  --r18: 18px;
  --r24: 24px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html, body{ overflow-x:hidden; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(900px 520px at 20% -10%, rgba(140,200,255,.16), transparent 60%),
    radial-gradient(820px 520px at 90% 10%, rgba(190,120,255,.12), transparent 55%),
    var(--bg);
  color:var(--text);
}

.container{ max-width:1360px; margin:0 auto; padding:0 18px; }
.page{ padding:24px 0 34px; }

.reveal{ opacity:0; transform: translateY(10px); transition: 420ms ease; }
.reveal.is-in{ opacity:1; transform:none; }

.topnav{
  /* NOTE: .topnav uses backdrop-filter which creates a stacking context.
     Keep it ABOVE the mobile overlay so the drawer stays clickable. */
  position:sticky; top:0; z-index:1000;
  backdrop-filter: blur(10px);
  background: rgba(10,12,18,.62);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topnav__inner{
  display:flex; align-items:center; gap:18px;
  padding:14px 0;
}

.navToggle{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  align-items:center; justify-content:center;
  margin-left:auto;
}
.navToggle span{
  display:block; width:18px; height:2px;
  background: rgba(255,255,255,.86);
  border-radius:999px;
  margin:2px 0;
}

.navWrap{ display:flex; align-items:center; gap:14px; flex:1; }

.brand{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; color:inherit;
}
.brand__dot{
  width:12px; height:12px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #9bf, #6f6, #f6f);
  box-shadow: 0 0 24px rgba(153,187,255,.35);
}
.brand__dot--sm{ width:10px; height:10px; }
.brand__name{ font-weight:900; letter-spacing:.2px; }
.brand__y{ color: var(--accent2); }
.brand__badge{
  font-size:12px; padding:2px 8px; border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.82);
}

.nav{ display:flex; gap:8px; margin-left:10px; flex:1; align-items:center; }
.nav__link{
  font-size:14px; text-decoration:none;
  color: rgba(255,255,255,.72);
  padding:8px 10px; border-radius:10px;
  transition:160ms ease;
}
.nav__link:hover{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}
.nav__actions{ display:flex; gap:10px; }

.nav__dd{ position:relative; }
.nav__link--dd{
  background: transparent;
  border:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.chev{ opacity:.75; font-size:12px; }
.ddMenu{
  position:absolute;
  top: calc(100% + 10px);
  left:0;
  min-width: 220px;
  background: rgba(10,12,18,.94);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding:8px;
  box-shadow: 0 20px 70px rgba(0,0,0,.45);
  display:none;
  backdrop-filter: blur(10px);
}
.nav__dd.open .ddMenu{ display:block; animation: ddIn 160ms ease; }
.ddLink{
  display:block;
  padding:10px 10px;
  border-radius:12px;
  text-decoration:none;
  color: rgba(255,255,255,.84);
  font-weight:800;
  font-size:14px;
}
.ddLink:hover{ background: rgba(255,255,255,.06); }
.ddHr{ height:1px; background: rgba(255,255,255,.10); margin:6px 6px; }

@keyframes ddIn{
  from{ transform: translateY(-6px); opacity:0; }
  to{ transform: translateY(0); opacity:1; }
}

/* Mobile menu */
@media (max-width: 980px){
  .navToggle{ display:inline-flex; }
  .navWrap{
    position: fixed;
    top:0; right:-340px;
    width:320px;
    height:100vh;
    padding: 76px 14px 18px;
    flex-direction:column;
    align-items:stretch;
    background: rgba(10,12,18,.98);
    border-left:1px solid rgba(255,255,255,.08);
    box-shadow: -20px 0 80px rgba(0,0,0,.45);
    transition: right 200ms ease;
    z-index:80;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
  }
  body.nav-open .navWrap{ right:0; }
  .nav{ flex-direction:column; align-items:stretch; margin-left:0; }
  .nav__link{ width:100%; justify-content:space-between; }
  .ddMenu{ position:static; box-shadow:none; margin-top:6px; }
  .nav__actions{ flex-direction:column; }
}

.navOverlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  /* below topnav (z-index:1000), above page content */
  z-index:900;
  display:none;
}
body.nav-open .navOverlay{ display:block; }

/* lock page scroll when drawer is open */
body.nav-open{ overflow:hidden; }

.btn{
  height:38px; padding:0 14px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  cursor:pointer;
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800;
}
.btn--ghost{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
}
.btn--ghost:hover{ background: rgba(255,255,255,.08); }

.btn--support{
  background: rgba(247,166,0,.10);
  border-color: rgba(247,166,0,.25);
  color: rgba(255,255,255,.92);
}
.btn--support:hover{
  background: rgba(247,166,0,.16);
  border-color: rgba(247,166,0,.32);
}

.btn--primary{
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  color:#0b0d12;
  border:1px solid rgba(255,255,255,.16);
}
.btn--primary:hover{ filter:brightness(1.05); }

.btn--buy{
  width:100%;
  background: linear-gradient(135deg, rgba(120,255,200,.92), rgba(120,210,255,.84));
  color:#07120d;
}
.btn--sell{
  width:100%;
  background: linear-gradient(135deg, rgba(255,140,160,.92), rgba(190,120,255,.82));
  color:#14070b;
}

.pill{
  display:inline-flex;
  font-size:13px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.84);
}

.noticebar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  position:relative;
  overflow:hidden;
}
.noticebar::before{
  content:"";
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(260px 260px at 18% 40%, rgba(247,166,0,.18), transparent 60%),
    radial-gradient(240px 240px at 85% 20%, rgba(255,210,74,.14), transparent 65%);
  opacity:.9;
  animation: heroGlow 10s ease-in-out infinite;
  pointer-events:none;
}
.noticebar__left,.noticebar__right{ position:relative; z-index:1; }
.noticebar__left{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.noticePill{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  font-weight:900;
}
.noticeText{ color: rgba(255,255,255,.72); font-size:13px; }
.noticebar__right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.noticeLink{ color: rgba(255,255,255,.9); text-decoration:none; font-weight:900; }
.noticeLink:hover{ text-decoration:underline; }
.dot{ width:6px; height:6px; border-radius:999px; background: rgba(255,255,255,.28); }

.quickGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
}
.quickCard{
  display:block;
  text-decoration:none;
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  padding:14px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.quickCard:hover{ transform: translateY(-2px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.quickCard__t{ font-weight:900; }
.quickCard__d{ margin-top:6px; color: rgba(255,255,255,.68); font-size:13px; line-height:1.5; }

@media (max-width: 980px){
  .quickGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .quickGrid{ grid-template-columns: 1fr; }
}

.h1{
  margin:14px 0 10px;
  font-size:46px; line-height:1.05; letter-spacing:-.6px;
}
.grad{
  background: linear-gradient(135deg, rgba(120,210,255,1), rgba(190,120,255,1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sub{
  margin:0;
  max-width:620px;
  color: rgba(255,255,255,.74);
  line-height:1.6;
}

.hero{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:20px;
  align-items:start;
  padding:10px 0 8px;
}
.hero__buttons{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }

.stats{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
.stat{
  border-radius: var(--r18);
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  padding:14px;
}
.stat__value{ font-weight:900; font-size:18px; }
.stat__label{ margin-top:6px; font-size:13px; color: rgba(255,255,255,.68); }

.preview{
  width:100%;
  border-radius: var(--r18);
  background: var(--panel);
  border:1px solid var(--border);
  box-shadow: 0 24px 80px var(--shadow);
  overflow:hidden;
}
.preview__top{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background: var(--panel2);
}
.preview__title{ font-weight:900; }
.badge{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background: rgba(120,210,255,.12);
  border:1px solid rgba(120,210,255,.22);
  color: rgba(180,225,255,.92);
}
.badge--soft{
  background: rgba(120,210,255,.10);
  border-color: rgba(120,210,255,.18);
}
.preview__grid{
  padding:14px;
  display:grid;
  gap:12px;
  grid-template-columns: 1.4fr 1fr;
}
.box{
  border-radius: var(--r14);
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.06);
  padding:12px;
  min-height:110px;
}
.box__title{ font-size:12px; color: rgba(255,255,255,.72); margin-bottom:10px; }

.fake-chart{
  height:84px; border-radius:12px;
  background:
    linear-gradient(180deg, rgba(120,210,255,.22), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 1px, transparent 1px, transparent 14px);
}
.fake-lines{
  height:84px; border-radius:12px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.10) 1px, transparent 1px, transparent 12px);
  opacity:.65;
}
.fake-lines2{
  height:84px; border-radius:12px;
  background:
    repeating-linear-gradient(180deg, rgba(190,120,255,.18), rgba(190,120,255,.18) 1px, transparent 1px, transparent 12px);
  opacity:.7;
}
.fake-form{
  height:84px; border-radius:12px;
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px dashed rgba(255,255,255,.10);
}
.note{ padding:12px 14px 14px; font-size:12px; color: rgba(255,255,255,.62); }

.pageHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
  padding:18px;
  border-radius: var(--r24);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
}
.pageHead__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.pageKicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.78);
}
.pageTitle{ margin:10px 0 0; font-size:32px; letter-spacing:-.4px; }
.pageSub{ margin-top:8px; max-width:820px; color: rgba(255,255,255,.68); line-height:1.6; }

.marketsToolbar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:12px;
  border-radius: var(--r18);
  background: rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
}
.input--search{ min-width: 260px; flex: 1; }

.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.78);
}
.chip--soft{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }

.section{ margin-top:34px; }
.section__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
}
.section__top > div{ min-width: 260px; }

.section__head{ display:flex; justify-content:space-between; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.section__title{ font-size:18px; font-weight:900; letter-spacing:-.2px; }
.section__sub{ margin-top:6px; color: rgba(255,255,255,.64); font-size:14px; }

.table{
  margin-top:14px;
  border-radius: var(--r18);
  background: var(--panel);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.table__head, .table__row{
  display:grid;
  grid-template-columns: 1.1fr 1fr .8fr .9fr;
  gap:10px;
  padding:12px 14px;
}
.table__head{
  background: var(--panel2);
  color: rgba(255,255,255,.66);
  font-size:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.table__row{ border-bottom:1px solid rgba(255,255,255,.06); }
.table__row:last-child{ border-bottom:none; }
.table__sym{ font-weight:900; }
.link{ color: rgba(255,255,255,.92); text-decoration:none; }
.link:hover{ text-decoration:underline; }

.plus{ color: var(--good); font-weight:900; }
.minus{ color: var(--bad); font-weight:900; }

.grid2{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
.card{
  border-radius: var(--r18);
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  padding:16px;
}
.card__title{ font-weight:900; }
.card__text{ margin-top:8px; color: rgba(255,255,255,.68); line-height:1.6; font-size:14px; }

/* Home: Promo / Invite card */
.promoCard{
  position: relative;
  border-radius: var(--r18);
  padding:18px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  overflow:hidden;
}
.promoCard__glow{
  position:absolute; inset:-2px;
  background:
    radial-gradient(680px 260px at 18% 0%, rgba(255,179,0,.28), transparent 62%),
    radial-gradient(520px 260px at 92% 25%, rgba(0,229,255,.16), transparent 60%),
    radial-gradient(600px 360px at 50% 110%, rgba(255,255,255,.06), transparent 55%);
  pointer-events:none;
  filter: blur(.2px);
  opacity:.95;
}
.promoCard__head{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.promoCard__title{ font-weight:1000; letter-spacing:.2px; }
.promoCard__subtitle{
  margin-top:4px;
  color: rgba(255,255,255,.62);
  font-size:13px;
  line-height:1.45;
  max-width: 520px;
}
.promoBadges{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.promoBadge{
  padding:6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.78);
  font-size:12px;
  white-space:nowrap;
}
.promoBadge--accent{
  background: rgba(255,179,0,.14);
  border-color: rgba(255,179,0,.24);
  color: rgba(255,232,180,.96);
}
.promoCard__body{
  position:relative;
  margin-top:14px;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:14px;
  align-items:stretch;
}
.promoMetric__label{
  font-size:12px;
  letter-spacing:.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.promoMetric__value{
  margin-top:6px;
  font-weight:1000;
  font-size:28px;
  letter-spacing:.2px;
}
.promoMetric__value span{
  font-size:12px;
  font-weight:800;
  color: rgba(255,255,255,.6);
  margin-left:6px;
}
.promoPoints{ margin-top:12px; display:grid; gap:8px; }
.promoPoint{
  color: rgba(255,255,255,.72);
  font-size:13px;
  line-height:1.5;
}
.promoPoint b{ color: rgba(255,255,255,.92); font-weight:900; }
.promoCard__actions{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
.promoFine{ margin-top:10px; color: rgba(255,255,255,.54); font-size:12px; line-height:1.5; }
.promoRight{ display:flex; flex-direction:column; gap:10px; }
.promoTimer{
  border-radius: 18px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
  padding:12px 14px;
  backdrop-filter: blur(10px);
}
.promoTimer__label{
  font-size:11px;
  letter-spacing:.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.promoTimer__time{
  margin-top:8px;
  font-weight:1000;
  font-size:24px;
  letter-spacing:.8px;
  font-variant-numeric: tabular-nums;
  display:inline-block;
  padding:10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.promoTimer__time.is-done{ opacity:.7; }
.promoTimer__note{ margin-top:8px; color: rgba(255,255,255,.70); font-size:13px; line-height:1.45; }
.promoMiniCards{ display:grid; gap:10px; }
.promoMini{
  text-decoration:none;
  color: inherit;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  padding:12px 14px;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.promoMini:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.promoMini__t{ font-weight:900; }
.promoMini__d{ margin-top:6px; color: rgba(255,255,255,.62); font-size:13px; line-height:1.45; }

@media (max-width: 860px){
  .promoCard__body{ grid-template-columns: 1fr; }
  .promoBadges{ justify-content:flex-start; }
  .promoMetric__value{ font-size:26px; }
}

.faq{ margin-top:12px; display:grid; gap:10px; }
.faq__item{
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  padding:12px 14px;
}
.faq__item summary{ cursor:pointer; font-weight:900; }
.faq__body{ margin-top:10px; color: rgba(255,255,255,.7); line-height:1.6; font-size:14px; }

.footer{
  margin-top:40px;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer__inner{
  display:flex; justify-content:space-between; gap:12px; align-items:center;
  flex-wrap:wrap;
}
.footer__brand{ display:inline-flex; align-items:center; gap:10px; font-weight:900; }
.footer__text{ color: rgba(255,255,255,.6); font-size:13px; }

/* New footer layout */
.footerGrid{
  display:grid;
  grid-template-columns: 1.2fr repeat(3, .8fr);
  gap:18px;
  align-items:start;
}
.footerBrand{ display:flex; align-items:center; gap:10px; }
.footerText{ margin-top:10px; max-width: 520px; color: rgba(255,255,255,.60); font-size:13px; line-height:1.6; }
.footerCol__t{ font-weight:900; letter-spacing:.2px; margin-bottom:10px; }
.footerLink{ display:block; text-decoration:none; color: rgba(255,255,255,.72); padding:6px 0; }
.footerLink:hover{ color: rgba(255,255,255,.92); }
.footerBottom{ margin-top:16px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; color: rgba(255,255,255,.58); font-size:13px; }
.footerNote{ color: rgba(255,255,255,.54); }

@media (max-width: 900px){
  .footerGrid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footerGrid{ grid-template-columns: 1fr; }
}

.list{ display:grid; gap:8px; }
.list__a{ display:block; padding:10px 12px; border-radius:14px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); text-decoration:none; color: rgba(255,255,255,.86); font-weight:900; }
.list__a:hover{ background: rgba(255,255,255,.08); }

.contact{ border-radius: 16px; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); padding:12px; }
.contactRow{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.contactRow:last-child{ border-bottom:none; }

.codeBlock{ margin-top:10px; padding:12px; border-radius: 16px; background: rgba(0,0,0,.30); border:1px solid rgba(255,255,255,.08); overflow:auto; }
.codeBlock code{ color: rgba(255,255,255,.86); }

/* Terminal */
.terminalTop{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  padding: 6px 0 18px;
}

/* Bybit-like compact header row for terminal */
.terminalTop--bybit{
  align-items:center;
  padding: 6px 0 12px;
}
.terminalPair{ display:flex; flex-direction:column; gap:6px; min-width: 220px; }
.terminalKpis{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:stretch;
  flex: 1;
}
.tKpi{
  border-radius: 14px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  min-width: 98px;
}
.tKpi__l{ font-size: 11px; color: rgba(255,255,255,.60); }
.tKpi__v{ margin-top: 3px; font-weight: 900; font-variant-numeric: tabular-nums; }
.terminalActions{ display:flex; align-items:center; gap:10px; }
.terminalUpdate{ font-size: 12px; color: rgba(255,255,255,.60); }
.label{ font-size:12px; color: rgba(255,255,255,.64); }
.select{
  height:40px; padding:0 12px;
  border-radius: var(--r14);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  outline:none;
  color-scheme: dark;
}
.select option{ background-color: #0f141a; color: rgba(255,255,255,.92); }

@media (max-width: 560px){
  /* Make terminal header compact on phones */
  .terminalPair{ min-width: 0; width:100%; }
  .terminalPair .select{ width:100%; }
  .terminalKpis{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
  .tKpi{ min-width: 0; }
  .terminalActions{ width:100%; justify-content:space-between; }
  #refreshBtn{ height:38px; padding:0 12px; border-radius: 14px; }
}

.kpi{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.kpi__item{
  border-radius: var(--r14);
  padding:10px 12px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  min-width:120px;
}
.kpi__label{ font-size:12px; color: rgba(255,255,255,.62); }
.kpi__value{ margin-top:4px; font-weight:900; }

.grid3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
@media (max-width: 980px){
  .grid3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .grid3{ grid-template-columns: 1fr; }
}

.panel{
  border-radius: var(--r18);
  background: var(--panel);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.panel--big{ grid-row: 1 / span 2; }
.panel__top{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background: var(--panel2);
}
.panel__title{ font-weight:900; }
.panel__hint{ font-size:12px; color: rgba(255,255,255,.6); }

.chartArea{ position:relative; height:360px; padding:14px; }
.chartGlow{
  position:absolute; inset:12px; border-radius:16px;
  background:
    radial-gradient(500px 220px at 20% 30%, rgba(120,210,255,.20), transparent 70%),
    radial-gradient(540px 240px at 80% 60%, rgba(190,120,255,.16), transparent 70%);
}
.chartGrid{
  position:absolute; inset:14px; border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 1px, transparent 1px, transparent 18px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 1px, transparent 1px, transparent 18px);
  opacity:.9;
}

.positions{ padding:12px 14px 14px; border-top:1px solid rgba(255,255,255,.08); }
.posRow{
  margin-top:10px;
  border-radius: var(--r14);
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.06);
  padding:12px;
  display:flex; justify-content:space-between; gap:10px;
}
.posSym{ font-weight:900; }
.posMeta{ color: rgba(255,255,255,.66); }

.book{ padding:10px 12px 12px; }
.book__head{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  font-size:12px; color: rgba(255,255,255,.62);
  padding:0 2px 8px;
}
.bookRow{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  padding:6px 2px; border-radius:10px;
}
.bookRow:hover{ background: rgba(255,255,255,.04); }
.ask{ color: var(--bad); font-weight:900; }
.bid{ color: var(--good); font-weight:900; }
.size{ color: rgba(255,255,255,.76); }

.midRow{
  margin:8px 0; padding:10px 12px;
  border-radius: var(--r14);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  display:flex; justify-content:space-between;
}
.mid{ font-weight:900; }

.trades{ padding:10px 12px 12px; display:grid; gap:6px; }
.tradeRow{
  display:grid;
  grid-template-columns: .7fr 1fr .8fr;
  gap:10px;
  padding:8px 10px;
  border-radius: var(--r14);
  background: rgba(0,0,0,.26);
  border:1px solid rgba(255,255,255,.06);
}
.tradePrice, .tradeQty{ color: rgba(255,255,255,.78); }

.tabs{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding:12px 12px 0;
}
.tabs--row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0;
}
.tab{
  height:38px;
  border-radius: var(--r14);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  cursor:pointer; font-weight:900;
}
.tab--active{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.14);
}

.tabs--row .tab{
  height:34px;
  padding:0 12px;
  border-radius:999px;
}

.tabs--row .tab{
  height:34px;
  padding:0 12px;
  border-radius:999px;
  width:auto;
}

.chips{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.chip{
  display:inline-flex;
  height:34px;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.82);
}
.chip--soft{
  background: rgba(120,210,255,.10);
  border-color: rgba(120,210,255,.18);
  color: rgba(180,225,255,.92);
}

.form{ padding:12px; display:grid; gap:10px; }
.field{ display:grid; gap:6px; }
.field__label{ font-size:12px; color: rgba(255,255,255,.62); }
.input{
  height:42px; padding:0 12px;
  border-radius: var(--r14);
  background: rgba(0,0,0,.26);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  outline:none;
}
.input:focus{
  border-color: rgba(120,210,255,.35);
  box-shadow: 0 0 0 4px rgba(120,210,255,.10);
}

.summary{
  border-radius: 16px;
  padding:10px 12px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.sumRow{
  display:flex; justify-content:space-between;
  color: rgba(255,255,255,.74);
  font-size:13px;
  padding:4px 0;
}
.disclaimer{
  font-size:12px;
  color: rgba(255,255,255,.58);
  line-height:1.5;
}

@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
}
@media (max-width: 1100px){
  .grid3{ grid-template-columns: 1fr; }
  .panel--big{ grid-row:auto; }
}
/* old breakpoint removed: mobile menu is handled by .navWrap */
@media (max-width: 760px){
  .h1{ font-size: 36px; }
  .stats{ grid-template-columns: 1fr; }
  body.hasTermTabs .grid2{ grid-template-columns: 1fr; }
  .table__head, .table__row{ grid-template-columns: 1.2fr 1fr .7fr; }
  .table__head div:last-child, .table__row div:last-child{ display:none; }
}

/* --- Alerts / Auth --- */
.alert{
  margin:14px 0 0;
  padding:12px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
}
.alert--success{ border-color: rgba(120,255,200,.22); }
.alert--error{ border-color: rgba(255,140,160,.22); }

.authCard{
  max-width:520px;
  margin: 22px auto 0;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  padding:16px;
}

/* --- Admin additions --- */
.adminHeader {
  margin-top: 18px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  color: rgba(255,255,255,.74);
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 6px 10px;
}

.actionsRow {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn--danger{
  background: rgba(255,140,160,.14);
  border-color: rgba(255,140,160,.22);
  color: rgba(255,255,255,.92);
}
.btn--danger:hover{ background: rgba(255,140,160,.18); }

.btn--ok{
  background: rgba(120,255,200,.14);
  border-color: rgba(120,255,200,.22);
  color: rgba(255,255,255,.92);
}
.btn--ok:hover{ background: rgba(120,255,200,.18); }

.miniForm{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-end;
}

.smallInput{
  height:38px;
  padding:0 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  outline:none;
}
.smallInput:focus{
  border-color: rgba(120,210,255,.35);
  box-shadow: 0 0 0 4px rgba(120,210,255,.10);
}


/* bybit-ish extras */
body{
  background:
    radial-gradient(900px 500px at 20% -10%, rgba(247,166,0,.12), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(255,210,74,.10), transparent 55%),
    linear-gradient(180deg, #070a0f, #0b0e11 40%, #0b0e11);
}

.brand__logo{ width:92px; height:26px; display:block; }
.brand__badge{
  background: rgba(247,166,0,.14);
  border: 1px solid rgba(247,166,0,.25);
  color: rgba(255,255,255,.92);
}

.btn--primary{
  background: linear-gradient(135deg, rgba(247,166,0,.95), rgba(255,210,74,.9));
  color: #0b0e11;
  border: 1px solid rgba(255,255,255,.12);
}
.btn--primary:hover{ transform: translateY(-1px); filter: brightness(1.02); }

.pill{ border-color: rgba(247,166,0,.22); }
.pill--active{
  background: rgba(247,166,0,.14);
  border-color: rgba(247,166,0,.35);
  color: rgba(255,255,255,.95);
}

.marketTools{
  display:flex;
  gap:10px;
  padding:12px 12px 0;
  align-items:center;
  flex-wrap:wrap;
}

.marketItem__left{ display:flex; align-items:center; gap:10px; }
.marketItem__meta{ display:flex; flex-direction:column; gap:2px; }

.starBtn{
  width:30px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.55);
  cursor:pointer;
}
.starBtn:hover{ background: rgba(255,255,255,.08); color: rgba(255,255,255,.72); }
.starBtn--on{
  background: rgba(247,166,0,.14);
  border-color: rgba(247,166,0,.30);
  color: rgba(255,210,74,.98);
}

/* Home "Live markets" compact rows (Bybit-like) */
.homeRow{
  display:grid;
  grid-template-columns: 34px 1fr .85fr .85fr .55fr;
  gap: 10px;
  padding: 10px 8px;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.06);
}
.homeRow:first-child{ border-top: 0; }
.homeRow__symMain{ font-weight: 900; letter-spacing: .2px; }
.homeRow__symSub{ font-size: 12px; color: rgba(255,255,255,.55); margin-top: 2px; }
.homeRow__k{ font-size: 11px; color: rgba(255,255,255,.55); }
.homeRow__v{ font-weight: 900; }
.homeRow__v.good{ color: var(--good); }

@media (max-width: 980px){
  .homeRow{ grid-template-columns: 34px 1fr .9fr .6fr; }
  .homeRow__col--our{ display:none; }
}

.spark{
  width: 64px;
  height: 22px;
  opacity: .95;
}
.spark svg{ width:100%; height:100%; display:block; }

.check input:disabled + span{ opacity:.6; }
.grad{
  background: linear-gradient(90deg, rgba(247,166,0,.95), rgba(255,210,74,.92));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:20px;
  align-items:start;
  padding:10px 0 8px;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
}
.hero > *{ position: relative; z-index: 1; min-width: 0; }

/* Full-width Bybit-like hero background (used on the main page) */
.heroBg{
  position:absolute;
  inset: 0;
  z-index: 0;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  background:
    url('https://www.bybit.com/common-static/images/d1f4c6d61d634ceba1256e5505abcf0a_50100456313c7462ccd2ed1ac69d93e7.png') center/cover no-repeat,
    radial-gradient(360px 360px at 18% 22%, rgba(247,166,0,.22), transparent 60%),
    radial-gradient(420px 420px at 85% 15%, rgba(255,210,74,.18), transparent 60%),
    radial-gradient(360px 360px at 62% 86%, rgba(247,166,0,.12), transparent 65%);
  opacity: .38;
  /* IMPORTANT: keep translateX(-50%) while animating (otherwise background "breaks") */
  animation: heroGlowFull 9s ease-in-out infinite;
  pointer-events:none;
}

.hero--bybit{
  border-radius: 0;
  min-height: calc(100vh - 120px);
  padding: 24px 0 22px;
  overflow: visible;
}
.hero--bybit::before{ display:none; }
.hero::before{
  content:"";
  position:absolute; inset:-80px;
  z-index: 0;
  background:
    url('https://www.bybit.com/common-static/images/d1f4c6d61d634ceba1256e5505abcf0a_50100456313c7462ccd2ed1ac69d93e7.png') center/cover no-repeat,
    radial-gradient(300px 300px at 15% 20%, rgba(247,166,0,.22), transparent 60%),
    radial-gradient(340px 340px at 85% 15%, rgba(255,210,74,.18), transparent 60%),
    radial-gradient(300px 300px at 60% 85%, rgba(247,166,0,.12), transparent 65%);

  filter: blur(0px);
  opacity: .35;
  animation: heroGlow 9s ease-in-out infinite;
  pointer-events:none;
}
@keyframes heroGlow{
  0%,100%{ transform: translate3d(0,0,0) scale(1); opacity:.32; }
  50%{ transform: translate3d(0,-10px,0) scale(1.03); opacity:.5; }
}

/* Same glow, but preserves translateX(-50%) used by .heroBg */
@keyframes heroGlowFull{
  0%,100%{ transform: translateX(-50%) translate3d(0,0,0) scale(1); opacity:.32; }
  50%{ transform: translateX(-50%) translate3d(0,-10px,0) scale(1.03); opacity:.5; }
}

@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
}

.ticker{
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 999px;
  overflow: hidden;
}
.ticker__track{
  display:flex; gap:18px;
  padding: 10px 14px;
  width: max-content;
  animation: marquee 22s linear infinite;
}
.ticker__item{
  display:flex; align-items:center; gap:10px;
  font-size: 13px;
  color: rgba(255,255,255,.88);
  white-space: nowrap;
}
.ticker__sym{ font-weight: 900; letter-spacing:.3px; }
.ticker__chg.plus{ color: var(--good); }
.ticker__chg.minus{ color: var(--bad); }

@keyframes marquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 900px){
  .grid3{ grid-template-columns: 1fr; }
}

.feature{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 16px;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.feature:hover{
  transform: translateY(-2px);
  border-color: rgba(247,166,0,.22);
  background: rgba(255,255,255,.04);
}
.feature::after{
  content:"";
  position:absolute; inset:-40px;
  background: radial-gradient(220px 220px at 20% 10%, rgba(247,166,0,.10), transparent 60%);
  opacity:.8;
  transform: rotate(8deg);
}
.feature__t{ font-weight: 900; font-size: 14px; position:relative; }
.feature__d{ margin-top:8px; color: rgba(255,255,255,.70); font-size: 13px; position:relative; }

.steps{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; margin-top:14px; }
@media (max-width: 900px){ .steps{ grid-template-columns:1fr; } }
.step{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 16px;
}
.step__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius: 10px;
  background: rgba(247,166,0,.16);
  border:1px solid rgba(247,166,0,.25);
  font-weight: 900;
  margin-bottom: 10px;
}

.pulseDot{
  display:inline-block;
  width:8px; height:8px; border-radius: 999px;
  background: var(--good);
  box-shadow: 0 0 0 rgba(0,192,135,.0);
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(0,192,135,.0); opacity:.9; }
  35%{ box-shadow: 0 0 0 8px rgba(0,192,135,.18); opacity:1; }
  100%{ box-shadow: 0 0 0 18px rgba(0,192,135,0); opacity:.7; }
}

.count{
  font-weight: 900;
  font-size: 26px;
  letter-spacing: .3px;
}
.countSub{ color: rgba(255,255,255,.70); font-size: 12px; margin-top:4px; }

.table__head > div:nth-child(5),
.bookRow > div:nth-child(5){ text-align:right; }

.table--markets .table__head, .table--markets .table__row{ grid-template-columns: 1.1fr 1fr .8fr .9fr 1.1fr; }


/* terminal pro */
.terminalShell{
  display:grid;
  grid-template-columns: 260px 1fr 340px;
  gap:14px;
  align-items:start;
}

/* Right column: stack panels neatly */
.terminalRight{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width: 0;
}

.terminalShell--bybit{ grid-template-columns: 280px 1fr 380px; }
.terminalShell--bybit .terminalMain{ grid-template-rows: auto auto; }
.termPanel{ border-radius: 16px; }
@media (max-width: 1100px){
  .terminalShell{ grid-template-columns: 1fr; }
  .terminalRight{ order: 3; }
  .terminalMain{ order: 2; }
}

.terminalMain{
  display:grid;
  grid-template-rows: auto auto;
  gap:14px;
}

.marketList{
padding: 8px 8px 10px;
  max-height: 520px;
  overflow-y:auto;
  overflow-x:hidden;

}
.marketItem{
  display:grid;
  grid-template-columns: 1fr 56px auto;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius: 14px;
  cursor:pointer;
  border:1px solid transparent;
  min-width:0;
}
.marketItem__left{ min-width:0; }
.marketItem__sym{ font-weight: 900; letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.marketItem__right{ text-align:right; min-width:92px; }
.marketItem__id{ font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:92px; display:block; margin-left:auto; }
.spark{ width:56px; opacity:.95; }
.marketItem:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
.marketItem--active{
  background: rgba(247,166,0,.08);
  border-color: rgba(247,166,0,.22);
}
.marketItem__sym{ font-weight: 900; letter-spacing:.3px; }
.marketItem__p{ color: rgba(255,255,255,.88); font-variant-numeric: tabular-nums; }
.marketItem__chg.plus{ color: var(--good); font-weight:900; }
.marketItem__chg.minus{ color: var(--bad); font-weight:900; }

.chartHead{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding: 12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
@media (max-width: 900px){
  .chartHead{ flex-direction:column; }
}
.chartPrice__v{
  font-weight: 900;
  font-size: 30px;
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
}
.chartPrice__m{
  margin-top: 4px;
  font-size: 13px;
  font-weight: 900;
}
.chartPrice__m.plus{ color: var(--good); }
.chartPrice__m.minus{ color: var(--bad); }

.chartStats{
  display:flex; gap:12px; flex-wrap:wrap;
}
.kv{
  display:flex; flex-direction:column;
  padding: 8px 10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  min-width: 120px;
}
.kv span{ color: rgba(255,255,255,.62); font-size: 12px; }
.kv b{ margin-top: 4px; font-variant-numeric: tabular-nums; }

.tf{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.tf__btn{
  height:30px; padding:0 10px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.82);
  cursor:pointer;
  font-weight: 900;
}
.tf__btn--active{
  background: rgba(247,166,0,.12);
  border-color: rgba(247,166,0,.25);
  color: rgba(255,255,255,.92);
}

.tf--compact{ justify-content:flex-end; }
.tf--compact .tf__btn{ height:28px; border-radius: 10px; padding: 0 9px; font-size: 12px; }

.chartWrap{ padding: 10px 14px 14px; }
.chartWrap--tall{ padding: 12px 14px 14px; }
#priceChart{ height:180px; }
.chartWrap--tall #priceChart{ height:240px; }
#priceChart{
  width:100%;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
}

.tradeBox{ padding: 12px; display:grid; gap:10px; }
/* Order form rows (avoid conflict with .tradeRow used in "Recent trades" list) */
.orderRow{ display:grid; gap:6px; }
/* grid2 is used inside order form; global .grid2 has margin-top which breaks alignment */
.tradeBox .grid2{ margin-top: 0; }
.tradeRow{ display:grid; gap:6px; }
.quickPct{ display:flex; gap:8px; flex-wrap:wrap; }
.btn--sm{ height:32px; padding:0 10px; border-radius: 12px; font-weight: 900; }

.check{
  display:flex; gap:10px; align-items:flex-start;
  padding: 10px 12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
}
.check input{ margin-top: 3px; }

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 900px){
  .split{ grid-template-columns: 1fr; }
}
.subTitle{
  font-weight: 900;
  font-size: 13px;
  margin: 8px 0;
  color: rgba(255,255,255,.86);
}

.miniTable{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.20);
  overflow:hidden;
}
.miniRow{
  display:grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  gap:10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 13px;
}
.miniRow:last-child{ border-bottom: none; }
.miniRow b{ font-variant-numeric: tabular-nums; }
.miniRow .plus{ color: var(--good); font-weight: 900; }
.miniRow .minus{ color: var(--bad); font-weight: 900; }
.miniRow .muted{ color: rgba(255,255,255,.62); }

.bookRow{
  position: relative;
  overflow:hidden;
}
.bookRow::before{
  content:"";
  position:absolute; inset:0;
  width: var(--bar, 0%);
  background: rgba(255,255,255,.04);
  pointer-events:none;
}
.bookRow .ask, .bookRow .bid, .bookRow .size{ position: relative; }

.trades .tradeRow{ grid-template-columns: .7fr 1fr .8fr .8fr; }
.tradeSide.plus{ color: var(--good); font-weight:900; }
.tradeSide.minus{ color: var(--bad); font-weight:900; }
.tradeTime{ text-align:right; color: rgba(255,255,255,.62); font-variant-numeric: tabular-nums; }

.brand{display:flex;align-items:center;gap:10px}
.brand__mark{width:22px;height:22px;display:block}
.brand__mark--sm{width:18px;height:18px}
.brand__name{font-weight:900;letter-spacing:.2px;font-size:16px;line-height:1}
.brand__y{color:var(--accent2)}
.brand__logo{display:none}

.topnav{position:sticky;top:0;z-index:1000;backdrop-filter: blur(14px);-webkit-backdrop-filter: blur(14px)}
.topnav::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,16,.92),rgba(10,12,16,.62));border-bottom:1px solid rgba(255,255,255,.06);pointer-events:none}
.topnav__inner{position:relative}

/* home markets tables */
.table--ledger .table__head,.table--ledger .table__row{grid-template-columns:90px 90px 120px 1.8fr 170px}
.table--ledger .table__row>:nth-child(4){color: rgba(255,255,255,.70); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

@media (max-width:760px){
  .table--ledger .table__head,.table--ledger .table__row{grid-template-columns:80px 70px 90px 1fr !important;}
  .table--ledger .table__head>:nth-child(4),.table--ledger .table__row>:nth-child(4){display:none !important;}
  .table--ledger .table__head>:nth-child(5),.table--ledger .table__row>:nth-child(5){display:block !important;}
}

.table--markets .table__head,.table--markets .table__row{grid-template-columns:1.1fr 1fr .8fr .9fr 1.1fr}
.table--markets2 .table__head,.table--markets2 .table__row{grid-template-columns:1.1fr 1fr 1fr .9fr}

/* admin users list */
.table--users .table__head,.table--users .table__row{grid-template-columns:1.8fr 90px 90px 120px 140px 1.6fr}

@media (max-width:860px){
  .table--markets .table__head,.table--markets .table__row{grid-template-columns:1.1fr 1fr}
  .table--markets .table__head>:nth-child(n+3),.table--markets .table__row>:nth-child(n+3){display:none}
  .table--markets2 .table__head,.table--markets2 .table__row{grid-template-columns:1.1fr 1fr}
  .table--markets2 .table__head>:nth-child(n+3),.table--markets2 .table__row>:nth-child(n+3){display:none}
}

@media (max-width:920px){
  .table--users .table__head,.table--users .table__row{grid-template-columns:1.7fr 80px 80px 110px 130px 1.5fr}
}

@media (max-width:720px){
  .table--users{ overflow-x:auto; }
  .table--users .table__head,.table--users .table__row{ min-width: 980px; }
}


/* small table */
.table--small .table__head, .table--small .table__row{ grid-template-columns: 70px 90px 1fr 1.2fr 120px; }
@media (max-width: 720px){ .table--small .table__head, .table--small .table__row{ grid-template-columns: 60px 80px 1fr 1fr 100px; } }


/* admin tables */
.table--admin .table__head, .table--admin .table__row{ grid-template-columns: 70px 2.2fr 90px 110px 110px 1.2fr 170px 1.6fr; }
.table--admin2 .table__head, .table--admin2 .table__row{ grid-template-columns: 70px 2fr 90px 110px 1.8fr 170px 1.6fr; }
.table--admin3 .table__head, .table--admin3 .table__row{ grid-template-columns: 2fr 110px 110px 1fr 170px 2fr; }
@media (max-width: 920px){
  .table--admin .table__head, .table--admin .table__row{ grid-template-columns: 60px 1.6fr 80px 90px 90px 1fr 140px 1.6fr; }
  .table--admin2 .table__head, .table--admin2 .table__row{ grid-template-columns: 60px 1.6fr 80px 90px 1.4fr 140px 1.6fr; }
  .table--admin3 .table__head, .table--admin3 .table__row{ grid-template-columns: 1.6fr 100px 100px 1fr 140px 1.6fr; }
}
@media (max-width: 720px){
  .table--admin, .table--admin2, .table--admin3{ overflow-x:auto; }
  .table--admin .table__head, .table--admin .table__row{ min-width: 920px; }
  .table--admin2 .table__head, .table--admin2 .table__row{ min-width: 840px; }
  .table--admin3 .table__head, .table--admin3 .table__row{ min-width: 860px; }
}

/* terminal order button spacing */
#placeOrderBtn{ width:100%; margin-top: 6px; }
.tradeBox{ gap:12px; }

/* Compact Bybit-like alignment for desktop trade form */
@media (min-width: 981px){
  .tradeBox .orderRow{
    grid-template-columns: 96px 1fr;
    align-items:center;
    gap: 10px;
  }
  .tradeBox .orderRow .label{ margin:0; }
  .tradeBox .orderRow > .label + *{ min-width:0; }
  .tradeBox .quickPct{ margin-left: 96px; }
  .tradeBox .check{ padding: 10px 12px; }
}

/* Book tabs (orderbook / depth / trades) */
.bookTabs{
  display:flex;
  gap:8px;
  padding: 12px;
  padding-top: 0;
}
.bookTab{
  height:34px;
  padding: 0 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.86);
  cursor:pointer;
  font-weight: 900;
  font-size: 12px;
}
.bookTab:hover{ background: rgba(255,255,255,.06); }
.bookTab--active{
  background: rgba(247,166,0,.10);
  border-color: rgba(247,166,0,.28);
  color: rgba(255,255,255,.95);
}
.bookPane{ padding: 0 12px 12px; }
.bookPane[hidden]{ display:none; }


/* ledger mobile override */
@media (max-width: 760px){
  .table--ledger .table__head,.table--ledger .table__row{grid-template-columns:80px 70px 90px 1fr}
  .table--ledger .table__head>:nth-child(4),.table--ledger .table__row>:nth-child(4){display:none}
  .table--ledger .table__head>:nth-child(5),.table--ledger .table__row>:nth-child(5){display:block !important}
}


/* Depth chart */
.depthWrap{ padding:12px 14px; }
.depthCanvas{ width:100%; height:180px; display:block; }
.depthLegend{
  display:flex; gap:12px; align-items:center;
  margin-top:8px; font-size:12px;
  color: rgba(255,255,255,.70);
}
.depthLegend .muted{ margin-left:auto; color: rgba(255,255,255,.55); }


/* Cabinet: portfolio + tabs */
.pfChartWrap{
  border-radius: var(--r18);
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  padding:10px;
}
#pfChart{ width:100%; height:140px; display:block; }

.pfAlloc{ display:grid; gap:10px; }
.pfAllocRow{ display:grid; grid-template-columns: 1.2fr 2.4fr 70px; gap:10px; align-items:center; }
.pfAllocLeft{ display:flex; justify-content:space-between; gap:10px; color: rgba(255,255,255,.86); font-size:13px; }
.pfAllocSym{ font-weight:900; }
.pfAllocUsd{ color: rgba(255,255,255,.62); }
.pfAllocBar{
  height:10px; border-radius:999px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.pfAllocFill{
  height:100%;
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  border-radius:999px;
}
.pfAllocPct{ text-align:right; color: rgba(255,255,255,.70); font-weight:900; font-size:12px; }

.tabsRow{ display:flex; gap:8px; flex-wrap:wrap; }
.tabPill{
  height:36px; padding:0 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.86);
  cursor:pointer;
  font-weight:900;
}
.tabPill:hover{ background: rgba(255,255,255,.08); }
.tabPill--active{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
}
.tabPanel{ display:none; }
.tabPanel.is-active{ display:block; }

.badge--ok{ background: rgba(0,192,135,.16); border-color: rgba(0,192,135,.32); color: rgba(0,192,135,.95); }

.table--orders{ overflow:auto; }
.table--orders .table__head,.table--orders .table__row{
  grid-template-columns:120px 90px 70px 120px 120px 120px 90px 170px;
  min-width: 980px;
}
.table--trades{ overflow:auto; }
.table--trades .table__head,.table--trades .table__row{
  grid-template-columns:170px 120px 90px 120px 120px 140px;
  min-width: 860px;
}
.table--reqs{ overflow:auto; }
.table--reqs .table__head,.table--reqs .table__row{
  grid-template-columns:90px 90px 120px 1.6fr 120px 170px;
  min-width: 920px;
}
@media (max-width:760px){
  .pfAllocRow{ grid-template-columns: 1fr 1.6fr 60px; }
  #pfChart{ height:120px; }
}


/* --- Support floating button (Bybit-like) --- */
.supportFab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  text-decoration:none;
  color: rgba(0,0,0,.92);
  background: linear-gradient(180deg, rgba(255,208,77,1) 0%, rgba(255,183,38,1) 100%);
  box-shadow: 0 14px 50px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.24);
  font-weight: 900;
}
.supportFab__i{ font-size: 16px; line-height: 1; }
.supportFab__t{ font-size: 13px; }
.supportFab:hover{ transform: translateY(-1px); }
@media (max-width: 740px){
  .supportFab__t{ display:none; }
  .supportFab{ padding: 12px; }
}

/* Avoid blocking taps when mobile drawer/modals are open */
body.nav-open .supportFab,
body.modal-open .supportFab{
  opacity: 0;
  pointer-events: none;
}


/* Home 'buy cheaper' block */
.dealBox{
  border-radius: var(--r18);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  padding: 12px;
}
.dealBox__t{
  font-weight: 900;
  margin-bottom: 10px;
}
.dealBox__row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.dealBox__prices{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.dealPrice{
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.08);
  padding: 8px 10px;
  border-radius: 14px;
  font-weight: 900;
}
.dealPrice--good{
  background: rgba(24,255,136,.08);
  border-color: rgba(24,255,136,.20);
}
.dealBox__hint{ margin-top:10px; font-size:12px; color: rgba(255,255,255,.62); }


/* Toast notifications (UI) */
.toastHost{
  position: fixed;
  right: 18px;
  bottom: 86px; /* above support FAB */
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: min(420px, calc(100vw - 36px));
}
.toast{
  pointer-events: auto;
  background: rgba(12,16,22,.92);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 12px 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 10px;
  align-items: start;
  transform: translateY(6px);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show{
  opacity: 1;
  transform: translateY(0);
}
.toast__i{
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 14px;
  margin-top: 1px;
}
.toast__t{
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
}
.toast__m{
  font-size: 12.5px;
  line-height: 1.35;
  opacity: .92;
  margin-top: 2px;
  word-break: break-word;
}
.toast__x{
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.75);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 10px;
  margin-left: 6px;
}
.toast__x:hover{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.95);
}
.toast--success .toast__i{ background: rgba(0,200,140,.18); color: rgba(0,200,140,.95); }
.toast--error   .toast__i{ background: rgba(255,90,90,.16); color: rgba(255,90,90,.95); }
.toast--warn    .toast__i{ background: rgba(255,200,80,.16); color: rgba(255,200,80,.95); }
.toast--info    .toast__i{ background: rgba(120,180,255,.16); color: rgba(120,180,255,.95); }

@media (max-width: 560px){
  .toastHost{ right: 12px; left: 12px; max-width: unset; bottom: 78px; }
  .toast{ grid-template-columns: 20px 1fr auto; }
}


/* ---------------- Promo / Invite page ---------------- */
.promoHero{
  position: relative;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: radial-gradient(1200px 480px at 15% 20%, rgba(96, 214, 255, .16), transparent 60%),
              radial-gradient(900px 420px at 85% 10%, rgba(151, 113, 255, .18), transparent 55%),
              linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  padding: 18px;
  overflow: hidden;
}
.promoHero__bg{
  position: absolute;
  inset: -2px;
  background: radial-gradient(600px 220px at 10% 10%, rgba(0, 200, 255, .14), transparent 65%),
              radial-gradient(600px 220px at 90% 0%, rgba(255, 110, 210, .12), transparent 60%);
  filter: blur(0px);
  pointer-events: none;
}
.promoHero__grid{
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  align-items: start;
}
.promoHero__left{ padding: 10px; }
.promoHero__right{ padding: 10px; }
.promoHero__cta{ display:flex; gap:10px; flex-wrap:wrap; }

.promoInvite{
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  padding: 12px;
}
.promoInvite__t{ font-weight: 700; }
.promoInvite__row{ display:flex; gap:10px; margin-top:10px; }
.promoInvite__row .input{ flex: 1; min-width: 220px; }

.promoCard{
  border-radius: 22px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  padding: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.promoCard__top{ padding: 6px 6px 0 6px; }
.promoCard__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-size: 12px;
}
.promoCard__amount{
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 10px;
}
.promoCard__desc{ margin-top: 6px; color: var(--muted); }

.promoSteps{ display:grid; gap:10px; }
.promoStep{
  display:grid;
  grid-template-columns: 32px 1fr;
  gap:10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  border-radius: 18px;
  padding: 10px;
}
.promoStep__n{
  width: 32px; height: 32px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight: 800;
  background: rgba(96, 214, 255, .14);
  border: 1px solid rgba(96, 214, 255, .22);
}
.promoStep__t{ font-weight: 700; }
.promoStep__d{ color: var(--muted); font-size: 13px; margin-top: 2px; }
.promoCard__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.promoCard__fineprint{ border-top: 1px dashed rgba(255,255,255,.10); padding-top: 12px; }

@media (max-width: 980px){
  .promoHero__grid{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  .promoInvite__row{ flex-direction: column; }
  .promoCard__amount{ font-size: 34px; }
}


/* Promo countdown */
.countdownBox{
  min-width: 220px;
  text-align:right;
  padding:12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
}
.countdownBox__label{
  font-size: 11px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.countdownBox__time{
  font-weight: 1000;
  font-size: 22px;
  letter-spacing: .6px;
  margin-top:6px;
  display:inline-block;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.countdownBox__time.is-done{ opacity: .65; }
.countdownInline .countdownBox__time{ text-align:left; }

@media (max-width: 680px){
  .countdownBox{ width: 100%; text-align:left; }
}

/* Language switcher */
.langBtn{ display:inline-flex; align-items:center; gap:8px; }
.langBtn__c{ font-weight:700; letter-spacing:.06em; font-size:12px; opacity:.9; }

/* Modal */
.modalOverlay{ position:fixed; inset:0; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); z-index: 9998; }
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index: 9999; padding: 18px; }
.modalCard{ width: 100%; max-width: 420px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(18,18,22,.96); box-shadow: 0 22px 90px rgba(0,0,0,.55); overflow:hidden; }
.modalHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 14px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.modalTitle{ font-weight: 800; font-size: 14px; letter-spacing: .02em; }
.modalClose{ width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); color: rgba(255,255,255,.92); cursor:pointer; }
.modalClose:hover{ background: rgba(255,255,255,.08); }
.modalBody{ padding: 10px 10px 14px; display:grid; gap: 8px; }
.langItem{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 12px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); color: rgba(255,255,255,.92); text-decoration:none; }
.langItem:hover{ background: rgba(255,255,255,.06); }
.modal-open{ overflow:hidden; }


/* ============================
   Cabinet (v10.24 redesign)
   ============================ */
.cabHeader{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.cabHeader__actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.cabLayout{ display:grid; grid-template-columns: 320px 1fr; gap:14px; }
.cabSide{ display:flex; flex-direction:column; gap:12px; }
.cabMain{ min-width: 0; }

.cabUserCard{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.cabAvatar{
  width: 46px; height:46px;
  display:grid; place-items:center;
  border-radius: 14px;
  background: radial-gradient(120px 50px at 20% 10%, rgba(255,210,74,.22), transparent 70%), rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  font-weight: 1000;
  letter-spacing:.04em;
}
.cabUserMeta{ display:flex; flex-direction:column; gap:4px; margin-top:10px; }
.cabUserName{ font-weight: 1000; font-size: 14px; letter-spacing:.01em; }
.cabUserSub{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; color: rgba(255,255,255,.70); font-size: 12px; }
.cabDot{ opacity:.6; }
.cabUserBadges{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

.cabMenu{ display:flex; flex-direction:column; gap:8px; }
.cabMenuBtn{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.90);
  cursor:pointer;
  font-weight: 900;
  text-align:left;
  position:relative;
}
.cabMenuBtn:hover{ background: rgba(255,255,255,.06); }
.cabMenuBtn--active{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}
.cabMenuI{ width: 22px; height:22px; display:grid; place-items:center; color: rgba(255,255,255,.86); }
.cabMenuBadge{
  margin-left:auto;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.76);
}
.cabMenuBadge.ok{ background: rgba(0,192,135,.16); border-color: rgba(0,192,135,.30); color: rgba(0,192,135,.92); }
.cabMenuBadge.warn{ background: rgba(255,210,74,.14); border-color: rgba(255,210,74,.28); color: rgba(255,210,74,.95); }

.cabSideHint{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
  padding: 12px;
}
.cabSideHintRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }

.cabPanel{ display:none; }
.cabPanel.is-active{ display:block; }

.cabGrid2{ display:grid; gap:14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 980px){
  .cabLayout{ grid-template-columns: 1fr; }
  .cabGrid2{ grid-template-columns: 1fr; }
}

.pfChartWrap{
  width: 100%;
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
#pfChart{ width:100%; height:140px; display:block; }

.pfAlloc{
  display:grid;
  gap:8px;
  padding:10px;
  border-radius: 18px;
  background: rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.08);
}
.pfAllocRow{
  display:grid;
  grid-template-columns: 170px 1fr 56px;
  gap:12px;
  align-items:center;
  padding:8px 8px;
  border-radius: 14px;
}
.pfAllocRow:hover{ background: rgba(255,255,255,.03); }
.pfAllocLeft{ display:grid; gap:2px; align-items:start; }
.pfAllocSym{ font-weight: 1000; letter-spacing:.2px; }
.pfAllocUsd{ color: rgba(255,255,255,.70); font-size: 12px; }
.pfAllocBar{ height: 8px; border-radius: 999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); overflow:hidden; }
.pfAllocFill{ height:100%; border-radius: 999px; background: linear-gradient(90deg, rgba(247,166,0,.9), rgba(255,210,74,.95)); }
.pfAllocPct{ text-align:right; color: rgba(255,255,255,.78); font-size: 12px; font-weight: 1000; font-variant-numeric: tabular-nums; }

.cabQuick{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
  padding:10px;
  border-radius: 18px;
  background: rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.08);
}
.cabQuickBtn{
  display:flex; align-items:center; justify-content:center;
  gap:10px;
  height: 44px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  text-decoration:none;
  font-weight: 900;
  font-size: 13px;
}
.cabQuickBtn:hover{ background: rgba(255,255,255,.07); }
.cabQuickI{ width: 26px; height:26px; border-radius: 10px; display:grid; place-items:center; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); font-size: 14px; }
@media (max-width: 680px){ .cabQuick{ grid-template-columns: 1fr 1fr; } }

.cabKycRow{ display:flex; gap:14px; justify-content:space-between; flex-wrap:wrap; }
.cabKycStatus{ margin-top:6px; }

.cabSteps{ display:grid; gap:10px; }
.cabStep{ display:flex; gap:12px; align-items:flex-start; padding: 10px 10px; border-radius: 14px; border:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.18); }
.cabStepN{ width: 28px; height:28px; border-radius: 10px; display:grid; place-items:center; font-weight:1000; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); }
.cabStepT{ font-weight: 1000; }
.cabStep.is-done{ border-color: rgba(0,192,135,.22); background: rgba(0,192,135,.08); }
.cabStep.is-done .cabStepN{ background: rgba(0,192,135,.16); border-color: rgba(0,192,135,.30); }
.cabStep.is-warn{ border-color: rgba(255,210,74,.22); background: rgba(255,210,74,.06); }
.cabStep.is-warn .cabStepN{ background: rgba(255,210,74,.14); border-color: rgba(255,210,74,.28); }

.cabKycBanner{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; padding: 12px; border-radius: 18px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); }
.cabKycBig{ margin-top:6px; }
@media (max-width: 820px){ .cabKycBanner{ grid-template-columns: 1fr; } }

.badge--warn{ background: rgba(255,210,74,.14); border-color: rgba(255,210,74,.28); color: rgba(255,210,74,.95); }
.badge--bad{ background: rgba(255,90,90,.14); border-color: rgba(255,90,90,.28); color: rgba(255,120,120,.95); }
.badge--muted{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.80); }

/* KYC page */
.kycLayout{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
@media (max-width: 980px){ .kycLayout{ grid-template-columns: 1fr; } }
.kycStatusLine{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.kycCost{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; flex-wrap:wrap; padding: 10px 10px; border-radius: 14px; border:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.18); }
.kycCostV{ font-weight: 1000; }
.kycHelpList{ display:grid; gap:10px; margin-top:10px; }
.kycHelpItem{ padding: 10px 10px; border-radius: 14px; border:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.14); color: rgba(255,255,255,.80); }

/* KYC file picker (verify.php) */
.fileBlock{ display:grid; gap:8px; }
.fileField{ position:relative; display:flex; align-items:center; gap:10px; padding: 10px; border-radius: 14px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); }
.fileField__input{ position:absolute; opacity:0; pointer-events:none; width:0; height:0; }
.fileField__btn{ cursor:pointer; display:inline-flex; align-items:center; justify-content:center; height:40px; padding: 0 14px; border-radius: 12px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: rgba(255,255,255,.92); font-weight:1000; white-space:nowrap; }
.fileField__btn:hover{ background: rgba(255,255,255,.09); }
.fileField__name{ flex:1; min-width:0; font-size:13px; color: rgba(255,255,255,.72); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fileField.is-picked .fileField__name{ color: rgba(255,255,255,.92); }
.fileHint{ margin-top:6px; font-size:13px; color: rgba(255,255,255,.78); }
.fileMeta{ font-size:12px; }
@media (max-width: 520px){
  .fileField{ flex-wrap:wrap; }
  .fileField__name{ flex: 1 1 100%; }
}

/* Portfolio polish */
.pfHead{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pfHeadVal{ margin-top:4px; }
.pfValueKbd{ display:inline-flex; align-items:center; padding: 7px 12px; border-radius: 14px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.22); color: rgba(255,255,255,.94); font-weight:1000; font-size: 18px; letter-spacing: .2px; }
.pfHeadMeta{ text-align:right; }
.pfHeadMetaV{ font-weight: 900; color: rgba(255,255,255,.86); }

.pfChartWrap{ padding: 8px; }
#pfChart{ display:block; width:100%; height:156px; border-radius: 12px; background: rgba(255,255,255,.02); }

.pfAllocRow{ grid-template-columns: 160px 1fr 56px; }
.pfAllocLeft{ display:grid; gap:2px; align-items:start; }
.pfAllocSym{ display:inline-flex; align-items:center; gap:8px; font-weight:1000; letter-spacing:.2px; }
.pfAllocSym:before{ content:""; width:8px; height:8px; border-radius:999px; background: rgba(255,255,255,.26); border:1px solid rgba(255,255,255,.18); }
.pfAllocUsd{ font-size: 12px; color: rgba(255,255,255,.70); }

@media (max-width: 920px){
  .pfAllocRow{ grid-template-columns: 140px 1fr 52px; }
}
@media (max-width: 520px){
  .pfHeadMeta{ text-align:left; }
  .pfAllocRow{ grid-template-columns: 1fr; gap:8px; }
  .pfAllocPct{ justify-self:start; }
}

/* ===== v10.24.5: Portfolio UI tweaks (alloc list + quick actions) ===== */
.pfAllocRow{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
}
.pfAllocRow:hover{
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.10);
}
.pfAllocSym{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 4px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  width: fit-content;
}
.pfAllocSym:before{
  width: 10px;
  height: 10px;
  border: 0;
  background: linear-gradient(90deg, rgba(247,166,0,.9), rgba(255,210,74,.95));
}
.pfAllocUsd{
  font-variant-numeric: tabular-nums;
}
.pfAllocBar{ height: 10px; }

.cabQuick{
  background: rgba(0,0,0,.12);
}
.cabQuickBtn{
  justify-content:flex-start;
  padding: 0 12px;
}
.cabQuickI{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(255,210,74,.12);
  border-color: rgba(255,210,74,.22);
  color: rgba(255,210,74,.95);
}
.cabQuickBtn:hover .cabQuickI{
  background: rgba(255,210,74,.18);
  border-color: rgba(255,210,74,.30);
}
.cabQuickI svg{ width:18px; height:18px; }

/* ===== v10.25: Topup UI (Crypto / Broker) ===== */
.depShell{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 12px;
  align-items:start;
}
.depTabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.depTab{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.86);
  text-decoration:none;
  font-weight: 900;
}
.depTab:hover{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
.depTab--on{
  background: rgba(255,210,74,.14);
  border-color: rgba(255,210,74,.28);
  color: rgba(255,232,180,.98);
}
.depTab svg{ width:18px; height:18px; opacity:.92; }

.depTitle{ font-weight: 1000; letter-spacing:-.2px; }
.depSub{ margin-top:6px; color: rgba(255,255,255,.66); line-height:1.6; font-size:14px; }

.depFormGrid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.depFormGrid .input, .depFormGrid select{ width:100%; }
.depSpan2{ grid-column: 1 / -1; }

.depSummary{
  margin-top: 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  padding: 10px 12px;
  border-radius: var(--r18);
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.08);
}
.depBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.84);
  font-size: 12px;
  font-weight: 900;
}
.depBadge b{ color: rgba(255,255,255,.94); }

.depAddr{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 160px;
  gap: 12px;
  align-items:stretch;
}
.depAddrBox{
  border-radius: var(--r18);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 12px;
}
.depAddrLabel{ color: rgba(255,255,255,.62); font-size: 12px; }
.depAddrValue{
  margin-top: 8px;
  font-weight: 900;
  word-break: break-all;
  font-variant-numeric: tabular-nums;
}
.depAddrActions{ margin-top: 10px; display:flex; gap:10px; flex-wrap:wrap; }

.depQr{
  border-radius: var(--r18);
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.10);
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  align-items:center;
  justify-content:center;
}
.depQrBox{
  width: 132px;
  height: 132px;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px) 0 0/10px 10px,
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px) 0 0/10px 10px,
    radial-gradient(70px 60px at 30% 35%, rgba(255,210,74,.18), transparent 60%),
    radial-gradient(70px 60px at 70% 65%, rgba(0,229,255,.10), transparent 60%),
    rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.12);
}
.depQrHint{ color: rgba(255,255,255,.58); font-size: 12px; text-align:center; line-height:1.35; }

.depCheck{
  margin-top: 12px;
  display:grid;
  gap: 8px;
}
.depCheckItem{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 10px 12px;
  border-radius: var(--r18);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.74);
  line-height:1.45;
}
.depCheckDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 5px;
  background: rgba(255,210,74,.9);
  box-shadow: 0 0 0 3px rgba(255,210,74,.18);
  flex: 0 0 auto;
}

.brokerGrid{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.brokerCard{
  border-radius: var(--r18);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 12px;
  cursor:pointer;
  display:flex;
  gap: 12px;
  align-items:center;
}
.brokerCard:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.brokerCard--on{
  background: rgba(255,210,74,.10);
  border-color: rgba(255,210,74,.22);
}
.brokerAva{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
}
.brokerMeta{ min-width: 0; }
.brokerName{ font-weight: 1000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brokerEmail{ margin-top: 4px; color: rgba(255,255,255,.62); font-size: 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.depSideCard .list{ margin-top: 10px; }

@media (max-width: 980px){
  .depShell{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .depFormGrid{ grid-template-columns: 1fr; }
  .depAddr{ grid-template-columns: 1fr; }
  .brokerGrid{ grid-template-columns: 1fr; }
}

/* --- PWA install button --- */
.installFab{
  position: fixed;
  right: 18px;
  bottom: 86px;
  z-index: 1199;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 14px 50px rgba(0,0,0,.38);
  font-weight: 900;
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.installFab__i{ font-size: 16px; line-height: 1; }
.installFab__t{ font-size: 13px; }
.installFab:hover{ transform: translateY(-1px); }
.installFab:disabled{ opacity:.55; cursor: default; }
@media (max-width: 740px){
  .installFab__t{ display:none; }
  .installFab{ padding: 12px; }
}
body.nav-open .installFab,
body.modal-open .installFab{
  opacity: 0;
  pointer-events: none;
}


/* terminal mobile tabs + advanced trade UI */
.termMobileTabs{ display:none; }
.termTab{ }
/* Terminal-only grid2: prevent overflow in trade panel (TP/SL + Advanced) */
body.hasTermTabs .grid2{
  margin-top: 0;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}
body.hasTermTabs .grid2 > *{ min-width:0; }
body.hasTermTabs .grid2 .input,
body.hasTermTabs .grid2 .select{ width:100%; box-sizing:border-box; }
body.hasTermTabs .grid2 .check{ width:100%; box-sizing:border-box; }

.levWrap{ display:flex; align-items:center; gap:10px; width:100%; }
.range{ width:100%; }
.termTabBtn{ flex:1; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); color: rgba(255,255,255,.86);
  padding:10px 8px; border-radius: 14px; font-weight: 900; font-size: 12px; letter-spacing: .2px; }
.termTabBtn--active{ background: rgba(247,166,0,.10); border-color: rgba(247,166,0,.28); color:#fff; }

@media (max-width: 980px){
  body.hasTermTabs .page{ padding-bottom: 84px; }
  .termMobileTabs{
    display:flex;
    position:fixed;
    left:12px; right:12px; bottom:12px;
    z-index: 50;
    gap:8px;
    padding:10px;
    border-radius: 20px;
    background: rgba(10,14,22,.88);
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
  }
  .termTab{ display:none; }
  .termTab.termTab--active{ display:block; }
  /* Make sticky terminal header opaque (prevents content from showing through while scrolling) */
  .terminalTop{
    position:sticky;
    top: var(--topnav-h, 58px);
    z-index: 30;
    background: rgba(10,14,22,.92);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    padding: 10px 12px 12px;
    margin-top: 8px;
    backdrop-filter: blur(10px);
  }

  /* Default: stack grid2 on phones, but keep Advanced switches in 2 columns */
  body.hasTermTabs .grid2{ grid-template-columns: 1fr; }
  body.hasTermTabs [data-term-tab="trade"] #advRow .grid2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Keep Buy/Sell tabs visible while scrolling the order form */
  body.hasTermTabs [data-term-tab="trade"] .tabs--row{
    position: sticky;
    top: calc(var(--topnav-h, 58px) + var(--termTop-h, 0px) + 10px);
    z-index: 28;
    margin: 10px 12px 0;
    padding: 10px !important;
    background: rgba(10,14,22,.88);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    backdrop-filter: blur(10px);
  }

  /* Keep CTA/button visible above the bottom tab bar */
  body.hasTermTabs [data-term-tab="trade"] .tradeBox{
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  }
  body.hasTermTabs [data-term-tab="trade"] #placeOrderBtn{
    position: sticky;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px) + 12px);
    z-index: 5;
  }

  /* Avoid Support FAB covering bottom tabs */
  body.hasTermTabs .supportFab{ bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
}