: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%; }
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; }

.topnav{
  position:sticky; top:0; z-index:50;
  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;
}

.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__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:14px; margin-left:10px; flex:1; }
.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; }

.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--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);
}

.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{
  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); }

.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; }

.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; }

/* Terminal */
.terminalTop{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  padding: 6px 0 18px;
}
.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); }

.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;
}
.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);
}

.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; }
}
@media (max-width: 860px){
  .nav{ display:none; }
}
@media (max-width: 760px){
  .h1{ font-size: 36px; }
  .stats{ grid-template-columns: 1fr; }
  .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);
}

.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; }
.hero::before{
  content:"";
  position:absolute; inset:-80px;
  z-index: 0;
  background:
    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: .9;
  animation: heroGlow 9s ease-in-out infinite;
  pointer-events:none;
}
@keyframes heroGlow{
  0%,100%{ transform: translate3d(0,0,0) scale(1); opacity:.8; }
  50%{ transform: translate3d(0,-10px,0) scale(1.03); opacity:1; }
}

@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;
}
@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);
}

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

.tradeBox{ padding: 12px; display:grid; gap:10px; }
.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__logo{display:none}

.topnav{position:sticky;top:0;z-index:50;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; }


/* 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; }
}