/* ────────────────────────────────────────────────────────────────────────────
   THEME · v2 visual refresh
   ──────────────────────────────────────────────────────────────────────────── */
:root{
  --row-h:46px; --hdr-h:56px; --gap:12px; --radius:16px;

  /* Core surfaces */
  --bg:#0b0d12; --bg-2:#0c1118; --panel:#0e131b; --panel-2:#0d1219; --panel-3:#0e151f;

  /* Typography */
  --text:#eef4ff; --subtle:#e7efff; --muted:#a8bdd8; --muted-2:#9ab0cc;

  /* Lines & accents */
  --border:#1b2431; --accent:#f7b500; --buy:#17d190; --sell:#ff4d4f;

  /* Chart palette */
  --line:#6ee7ff;        /* main line */
  --sma20:#ffffffcc;     /* 80% white */
  --sma50:#ffffff77;     /* 47% white */
  --ema20:#99e1ffcc;     /* light aqua */
  --ema50:#ffd36acc;     /* amber */
  --bb:#6ee7ff33;        /* BB fill */
  --candle-up:#16c084;   /* body stroke */
  --candle-up-fill:#16c0842b; /* body fill */
  --candle-down:#ff5760;
  --candle-down-fill:#ff57602b;

  /* Tooltips / legend */
  --tooltip-bg:rgba(14,22,34,.95); --tooltip-border:rgba(110,140,170,.45);

  /* Chips / fills */
  --chip:#0f1722; --chip-hover:#101a27;

  /* Rings / grid */
  --ring:rgba(110,231,255,.32);
  --grid:rgba(150,170,200,.14); --grid-strong:rgba(150,170,200,.24);

  /* Brand: Phantom CTA */
  --phantom-1:#7c5cff; --phantom-2:#5a68ff; --phantom-3:#4b54d6;

  /* Active toggle bg */
  --seg-active-bg: linear-gradient(180deg,#142033,#0f1a29);

  /* Elevation (refined) */
  --elev: 0 18px 40px rgba(0,0,0,.46), 0 1px 0 rgba(255,255,255,.04) inset;

  /* Background gradient (wider v2) */
  --bg-grad:
    radial-gradient(1200px 600px at 85% -20%, rgba(124,92,255,.09) 0%, transparent 60%),
    radial-gradient(900px 420px at -20% 120%, rgba(111,231,255,.07) 0%, transparent 60%),
    linear-gradient(180deg,#0a0d12 0%,#0b0d12 100%);

  /* Shimmer */
  --shimmer-a: rgba(255,255,255,.05);
  --shimmer-b: rgba(255,255,255,.12);

  /* Price tag */
  --pricetag:#111826; --pricetag-br: #1c2636;

  /* Button press */
  --press: translateY(0.5px) scale(0.997);
}

html[data-theme="light"]{
  --bg:#f7f9fc; --bg-2:#eef3fa; --panel:#ffffff; --panel-2:#f6f8fd; --panel-3:#f3f6fb;
  --text:#0b1320; --subtle:#10223c; --muted:#2a3f62; --muted-2:#3f5b86;
  --border:#d9e3f0; --chip:#eef3fb; --chip-hover:#e8eff9; --ring:rgba(48,110,255,.28);
  --grid:rgba(46,66,98,.18); --grid-strong:rgba(46,66,98,.26);
  --line:#2060ff; --sma20:#0b1320b3; --sma50:#0b132066;
  --ema20:#2060ffa6; --ema50:#ff8c00a6; --bb:#2060ff25;
  --candle-up:#16c084; --candle-up-fill:#16c08426;
  --candle-down:#ff5760; --candle-down-fill:#ff576026;
  --tooltip-bg:#fff; --tooltip-border:#dbe4f0;
  --phantom-1:#6b5cff; --phantom-2:#5a68ff; --phantom-3:#4851d6;
  --seg-active-bg: linear-gradient(180deg,#5f73ff,#4857d6);
  --bg-grad:
    radial-gradient(1200px 600px at 85% -20%, rgba(124,92,255,.08) 0%, transparent 60%),
    radial-gradient(900px 420px at -20% 120%, rgba(111,150,255,.06) 0%, transparent 60%),
    linear-gradient(180deg,#f4f7fb 0%,#f7f9fc 100%);
  --pricetag:#f2f6ff; --pricetag-br:#dfe8f7;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg-grad);color:var(--text);
  font:14px/1.5 ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Ubuntu,Arial;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
@media (max-width:420px){ body{ font-size:15px; } }

a{color:inherit;text-decoration:none}
button{cursor:pointer}
input,select,button{font:inherit}
hr{border:0;border-top:1px solid var(--border);margin:12px 0}
img.token{width:22px;height:22px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.10);background:#0f1624; display:block}

.top-progress{position:fixed;left:0;top:0;height:3px;background:linear-gradient(90deg,#6ee7ff,var(--accent));width:0%;z-index:250;transition:width .2s ease}

/* Skeleton (crisper) */
.skeleton{ position:relative; overflow:hidden; border-radius:12px; background:var(--panel-3) }
.skeleton::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, var(--shimmer-b), transparent);
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer { 100% { transform:translateX(100%); } }

/* HEADER (stickier, lighter) */
header{
  position:sticky;top:0;z-index:60;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent),
    linear-gradient(90deg,var(--bg-2),var(--panel-2) 60%,var(--bg-2));
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(1.12) blur(8px)
}
.hbar{display:flex;align-items:center;gap:12px;padding:10px calc(12px + env(safe-area-inset-right));max-width:1920px;margin:0 auto;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px}
.logo .dot{width:12px;height:12px;border-radius:50%;
  background:radial-gradient(55% 55% at 32% 32%,#fff2a8 0 45%,#f7d36a 55%,var(--accent) 66%,#a46b00 100%);
  box-shadow:0 0 7px rgba(247,181,0,.35) inset,0 0 10px rgba(247,181,0,.35)}
.logo h1{margin:0;font-weight:900;font-size:16px;letter-spacing:.3px}

.pair{display:flex;gap:8px;align-items:center;min-width:0;flex:1 1 220px}
.pair .pair-pill{display:inline-flex;gap:8px;align-items:center;padding:8px 12px;border-radius:999px;background:var(--chip-hover);border:1px solid var(--border);min-width:0;max-width:100%;box-shadow:var(--elev)}
.pair .pair-pill strong{font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.2px}
.pair #px{white-space:nowrap}

.nav{display:flex;gap:6px;align-items:center}
.nav a{color:var(--muted);padding:8px 12px;border-radius:10px}
.nav a.active,.nav a:hover{background:var(--chip-hover);color:var(--text)}

.hdr-actions{display:flex;gap:6px;margin-left:auto}
.icon-btn,.btn{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--chip);color:var(--text);min-height:40px;box-shadow:var(--elev);transition:transform .12s ease, box-shadow .18s ease}
.icon-btn:active,.btn:active{ transform: var(--press); }
.icon-btn:focus-visible,.btn:focus-visible{outline:3px solid var(--ring);outline-offset:1px}
.btn.primary{background:linear-gradient(180deg,#172233,#101a29);color:#fff;}
.btn.cta{background:linear-gradient(180deg,#1a2a18,#132315);border-color:rgba(22,199,132,.5);color:#fff;}
.btn:hover,.icon-btn:hover{transform:translateY(-1px);box-shadow:0 14px 36px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.06) inset}

/* small helpers */
.badge{display:inline-flex;align-items:center;gap:6px;background:var(--chip);border:1px solid var(--border);border-radius:999px;padding:4px 8px}
.small{font-size:12px;color:var(--muted)}
kbd{padding:2px 6px;border-radius:6px;border:1px solid var(--border);background:var(--panel-2);font:12px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace}

/* Header: compact labels on small screens */
.icon-btn .txt{display:inline}
@media (max-width:780px){
  .nav{display:none}
  #menuBtn{display:inline-flex}
  .icon-btn .txt{display:none}
}
@media (min-width:781px){ #menuBtn{display:none} }

/* Mobile dropdown nav */
.mnav{display:none;border-top:1px solid var(--border);background:var(--panel-2)}
.mnav.open{display:block}
.mnav .wrap{max-width:1920px;margin:0 auto;padding:8px 12px;display:flex;gap:8px;flex-wrap:wrap}
.mnav a{padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--chip-hover)}

/* Phantom button (polish) */
#connectBtn{
  border-color: color-mix(in oklab,var(--phantom-1) 55%, var(--border));
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in oklab,var(--phantom-1) 84%, #fff 6%) 0%, transparent 60%),
    linear-gradient(180deg, color-mix(in oklab,var(--phantom-1) 86%, var(--phantom-2) 14%), var(--phantom-3));
  color:#fff; font-weight:800; letter-spacing:.2px;
  box-shadow:0 10px 28px color-mix(in oklab,var(--phantom-1) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
#connectBtn:hover{ transform:translateY(-1px); box-shadow:0 14px 34px color-mix(in oklab,var(--phantom-1) 42%, transparent), inset 0 1px 0 rgba(255,255,255,.12); }
#connectBtn.connected{ filter:saturate(.95) brightness(.96); }

/* LAYOUT */
.main{
  max-width:1920px;margin:0 auto;padding:12px;display:grid;gap:12px;
  grid-template-columns:minmax(260px,380px) minmax(560px,1fr) minmax(340px,480px);
  grid-template-areas:"markets chart orderbook" "markets chart trade"
}
@media (max-width:1280px){ .main{ grid-template-columns:minmax(360px,1fr) minmax(340px,500px); grid-template-areas:"chart orderbook" "chart trade" "markets markets"; } }
@media (max-width:980px){ .main{ grid-template-columns:1fr; grid-template-areas:"chart" "trade" "markets" "orderbook"; } }
@media (max-width:420px){ .main{ padding:8px; gap:8px; } }

.panel{background:
  radial-gradient(180% 120% at 0% 0%, color-mix(in oklab, var(--panel) 88%, #000 12%) 0, transparent 70%),
  var(--panel);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--elev);overflow:hidden}
.ph{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.ph h3{margin:0;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.linkbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.linkbar a{padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:var(--chip-hover)}
footer{border-top:1px solid var(--border);background:var(--panel-2);color:var(--muted)}
.foot{max-width:1920px;margin:0 auto;padding:16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.toasts{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;z-index:200}
.toast{background:var(--panel);border:1px solid var(--border);padding:10px 12px;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.28);opacity:0;transform:translateY(10px);transition:.18s}
.toast.show{opacity:1;transform:translateY(0)}
.toast.success{border-color:rgba(22,199,132,.5)} .toast.error{border-color:rgba(255,77,79,.5)} .toast.info{border-color:var(--border)}

/* MARKETS */
.markets{grid-area:markets}
.mhdr{
  position:sticky; top:0; z-index:2;
  display:grid;grid-template-columns:1fr 110px 82px 38px;gap:6px;
  padding:8px;border-bottom:1px solid var(--border);background:var(--panel-2);align-items:center
}
.mhdr .search{display:flex;gap:8px;align-items:center;grid-column:1/-1}
.mhdr input[type="search"]{flex:1;border:1px solid var(--border);background:var(--chip-hover);color:var(--text);border-radius:10px;padding:10px}
.mhdr .h{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}

.mgrid{padding:8px;display:grid;gap:8px;overflow:auto;max-height:calc(var(--row-h)*16 + 8px)}
.mrow{
  display:grid;align-items:center;gap:8px;border:1px solid color-mix(in oklab,var(--border) 86%, transparent);
  border-radius:12px;background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent),
    var(--panel-3);
  padding:10px 12px;
  grid-template-columns:auto 1fr 110px 82px 38px;
  grid-template-areas:"ava sym price chg fav" "ava meta meta chg fav"; min-height:46px;
  transition:box-shadow .15s ease, transform .15s ease, background .15s ease
}
.mrow:hover{ transform:translateY(-1px); background:color-mix(in oklab, var(--panel-3) 82%, var(--chip-hover) 18%); box-shadow:0 10px 24px rgba(0,0,0,.25); }
.mrow:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }
.mrow .ava{grid-area:ava}
.mrow .sym{grid-area:sym;font-weight:800;display:flex;gap:8px;align-items:center;min-width:0}
.mrow .sym span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow .meta{grid-area:meta;color:var(--muted-2);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow .price{grid-area:price;color:var(--subtle);font-feature-settings:"tnum" 1,"lnum" 1}
.mrow .chg{grid-area:chg;font-weight:800;text-align:right}
.mrow .fav{grid-area:fav;display:flex;justify-content:end}
.star{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border);background:var(--chip);opacity:.95;transition:transform .12s ease, box-shadow .15s ease}
.star:hover{ transform:scale(1.05); }
.star.active{background:linear-gradient(180deg,#2a1c10,#20160d);border-color:#3a2b18;box-shadow:0 0 0 1px rgba(247,181,0,.25) inset}
.mrow.up .chg{color:var(--buy)} .mrow.down .chg{color:var(--sell)}
.flash-up{animation:flashUp .6s ease} .flash-down{animation:flashDown .6s ease}
@keyframes flashUp{0%{box-shadow:0 0 0 0 rgba(22,199,132,.0)}30%{box-shadow:0 0 0 6px rgba(22,199,132,.14)}100%{box-shadow:0 0 0 0 rgba(22,199,132,.0)}}
@keyframes flashDown{0%{box-shadow:0 0 0 0 rgba(255,77,79,.0)}30%{box-shadow:0 0 0 6px rgba(255,77,79,.14)}100%{box-shadow:0 0 0 0 rgba(255,77,79,.0)}}

@media (max-width:560px){
  .mhdr{ grid-template-columns:1fr 86px 70px 32px }
  .mrow{ grid-template-columns:auto 1fr 86px 70px 32px; padding:10px }
  .mrow .meta{ display:none }
}

/* CHART */
.chart{grid-area:chart;display:grid;grid-template-rows:auto auto minmax(320px,1fr) auto}
#pxchart{display:block;width:100%;height:440px;background:radial-gradient(1000px 500px at 70% -40%,rgba(255,255,255,.03),transparent)}
.ctls{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--border);
  background:var(--panel-2);position:sticky;top:var(--hdr-h);z-index:55
}
.ctls .seg{display:inline-flex;background:var(--chip);border:1px solid var(--border);border-radius:999px;overflow:hidden}
.ctls .seg button{padding:6px 12px;border:0;background:transparent;color:var(--subtle);line-height:1.1}
.ctls .seg button:hover{background:var(--chip-hover);color:var(--text)}
.ctls .seg button.active{background:var(--seg-active-bg);color:#fff}
.ctls .seg button:focus-visible{outline:3px solid var(--ring);outline-offset:-2px}
.ctls .seg button:focus-visible{outline:3px solid var(--ring);outline-offset:-2px}
.ctls .stat{display:inline-flex;gap:6px;align-items:center}

.chart-legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%}

/* WALLET */
.orderbook{grid-area:orderbook;display:grid;grid-template-rows:auto auto auto}
.wallet-box{ padding:10px; max-height:clamp(200px, 32vh, 380px); overflow:auto }
.wallet-box.compact .balance-list{max-height:clamp(130px, 24vh, 280px)}
.balance-list{display:flex;flex-direction:column;gap:6px;max-height:clamp(150px, 26vh, 320px);overflow:auto}
.balance-item{
  display:flex;justify-content:space-between;align-items:center;
  border:1px dashed var(--border);background:var(--panel-3);padding:8px 10px;border-radius:12px
}
.balance-item div:last-child{font-weight:700}

.wallet-cmds{display:flex;gap:8px;align-items:center;padding:8px 10px;border-top:1px solid var(--border)}
.orderbook.collapsed .wallet-box,.orderbook.collapsed .wallet-cmds{display:none}

/* TRADE */
.trade{grid-area:trade}
.swap-card{padding:12px;display:grid;gap:12px}
.row2{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end}
.input{border:1px solid var(--border);background:var(--chip-hover);color:var(--text);border-radius:12px;padding:10px}
.sel{display:grid;gap:6px}
.sel label{font-size:11px;color:var(--muted)}
.token-sel{display:flex;gap:8px;align-items:center}
.token-sel select{min-width:220px;border:1px solid var(--border);background:var(--chip);color:var(--text);border-radius:10px;padding:8px 10px}
.amount input{width:100%;border:1px solid var(--border);background:var(--chip);color:var(--text);border-radius:10px;padding:10px}
.row2 .mid{display:flex;align-items:center;justify-content:center}
.flip{border-radius:10px;border:1px solid var(--border);background:var(--chip);padding:8px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center}
.kv .v{font-weight:700}
.route-chips{display:flex;gap:6px;flex-wrap:wrap}
.route-chip{padding:4px 8px;border:1px solid var(--border);border-radius:999px;background:var(--chip-hover);font-size:12px}
.alert{padding:8px;border:1px dashed var(--border);border-radius:10px;background:var(--panel-3);color:var(--muted)}
@media (max-width:560px){
  .token-sel select{ min-width:unset; width:100% }
  .row2{ grid-template-columns:1fr; gap:8px }
}

/* ORDERS */
.orders-wrap{margin-top:8px}
.ohdr{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--panel-2)}
.ogrid{display:grid;grid-template-columns:1fr 120px 120px 120px 120px 120px 110px;gap:6px;padding:8px}
.ogrid .h{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.orow{display:grid;grid-template-columns:inherit;gap:6px;align-items:center;padding:8px;border:1px solid color-mix(in oklab,var(--border) 86%, transparent);border-radius:10px;background:var(--panel-3)}
.orow .sym{display:flex;gap:8px;align-items:center;min-width:0}
.orow .sym span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill{display:inline-flex;gap:6px;align-items:center;padding:4px 8px;border:1px solid var(--border);border-radius:999px;background:var(--chip-hover);font-size:12px}
.status.open{color:var(--buy)} .status.cancelled{color:var(--muted)} .status.canceled{color:var(--muted)} .status.executed{color:var(--sell)} .status.completed{color:var(--sell)}
.orders-box{max-height:clamp(220px, 42vh, 520px);overflow:auto;padding:8px}
@media (max-width:1280px){
  .ogrid, .orow{ grid-template-columns:1fr 120px 120px 120px 120px 140px 110px }
}
@media (max-width:980px){
  .ogrid, .orow{ grid-template-columns:1fr 120px 120px 120px 110px 110px 98px }
}
@media (max-width:720px){
  .ogrid, .orow{ grid-template-columns:1fr 120px 110px 110px 98px 98px 88px }
}
@media (max-width:560px){
  .ogrid{display:none}
  .orow{grid-template-columns:1fr;gap:6px}
  .orow > *:not(:first-child){display:flex;justify-content:space-between}
}

/* UTILS */
.hidden{display:none !important}
.right{margin-left:auto}
.inline{display:inline}
.center{display:grid;place-items:center}

/* Compact mode */
body.compact{ font-size:13px }
body.compact .main{ gap:8px }
body.compact .panel{ border-radius:12px }

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important }
}

/* Price tag on chart (floating) */
.price-tag{
  position:absolute; right:16px; transform:translateY(-50%);
  padding:4px 8px; border-radius:8px; border:1px solid var(--pricetag-br); background:var(--pricetag); color:var(--text);
  font:12px/1.1 ui-sans-serif,system-ui; pointer-events:none; white-space:nowrap;
  box-shadow:0 8px 18px rgba(0,0,0,.2)
}