:root {
  --navy: #0f2d48;
  --navy-mid: #1a4a72;
  --blue: #2eaef0;
  --blue-soft: #e8f4fd;
  --blue-glow: rgba(46, 174, 240, 0.25);
  --green: #00c076;
  --red: #f6465d;
  --yellow: #f0b90b;
  --white: #ffffff;
  --bg: #f4f8fc;
  --text: #0f2d48;
  --muted: #6b8299;
  --line: rgba(15, 45, 72, 0.08);
  --glass: rgba(255, 255, 255, 0.82);
  --shadow: 0 8px 32px rgba(15, 45, 72, 0.08);
  --shadow-lg: 0 16px 48px rgba(15, 45, 72, 0.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(165deg, #eef5fb 0%, #f8fbff 40%, #ffffff 100%);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

.hidden { display: none !important; }

/* SPLASH */
.splash {
  position: fixed; inset: 0; z-index: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(165deg, #eef5fb, #ffffff);
  transition: opacity .5s ease, visibility .5s ease;
}
.splash.hide { opacity: 0; visibility: hidden; pointer-events: none; }

.exmo-wordmark {
  display: flex;
  align-items: center;
  gap: 1px;
  line-height: 1;
  user-select: none;
}
.exmo-wordmark.splash-size { transform: scale(1.15); animation: logoIn .8s cubic-bezier(.2,.8,.2,1) both; }
.exmo-wordmark.header-size { margin-right: 4px; }

.wm-letter {
  font-family: "Arial Black", "Segoe UI", sans-serif;
  font-weight: 900;
  color: #163656;
  letter-spacing: -2px;
}
.splash-size .wm-letter { font-size: 52px; }
.header-size .wm-letter { font-size: 26px; }

.wm-x {
  display: flex;
  align-items: center;
  margin: 0 1px;
}
.splash-size .wm-x svg { width: 38px; height: 56px; }
.header-size .wm-x svg { width: 22px; height: 32px; }

.splash-bar {
  width: 120px; height: 3px; background: var(--line);
  border-radius: 3px; margin-top: 28px; overflow: hidden;
}
.splash-bar-fill {
  height: 100%; width: 40%; background: linear-gradient(90deg, var(--blue), var(--navy));
  border-radius: 3px; animation: loadBar 1.2s ease-in-out infinite;
}

@keyframes logoIn {
  from { opacity: 0; transform: scale(.85) translateY(20px); }
  to { opacity: 1; transform: none; }
}
@keyframes loadBar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

#app { max-width: 480px; margin: 0 auto; min-height: 100vh; padding-bottom: 220px; }

.glass {
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: var(--shadow);
}
.glass-pill {
  background: var(--glass);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 14px;
  padding: 8px 14px;
  box-shadow: var(--shadow);
}

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.brand-sub { font-size: 10px; color: var(--muted); font-weight: 600; margin-left: 2px; }

.top-balance { text-align: right; }
.top-balance span { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.top-balance strong { font-size: 16px; color: var(--navy); font-weight: 700; }

.alert {
  margin: 12px 16px; padding: 12px 14px; border-radius: 12px;
  background: #fff5f5; border: 1px solid #ffcdd2; color: var(--red);
  font-size: 13px; line-height: 1.45;
}

.screen { display: none; }
.screen.active { display: block; }

.anim-in { animation: fadeUp .45s cubic-bezier(.2,.8,.2,1) both; }
.delay-1 { animation-delay: .08s; }
.delay-2 { animation-delay: .16s; }
.delay-3 { animation-delay: .24s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.page-head { padding: 18px 16px 10px; }
.page-head h1 { font-size: 22px; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.page-head p { font-size: 13px; color: var(--muted); }

.markets-card {
  margin: 0 16px 16px; border-radius: 16px; overflow: hidden;
}

.table-head, .market-row {
  display: grid; grid-template-columns: 1.5fr 1fr .8fr;
  align-items: center; padding: 12px 16px;
}
.table-head {
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .5px; background: var(--blue-soft);
  border-bottom: 1px solid var(--line);
}

.market-row {
  border-bottom: 1px solid var(--line); cursor: pointer;
  transition: all .2s ease; background: var(--white);
}
.market-row:hover { background: var(--blue-soft); }
.market-row:active { transform: scale(.985); background: #dceefb; }

.m-pair { font-weight: 700; font-size: 14px; color: var(--navy); }
.m-pair small { display: block; color: var(--muted); font-size: 11px; font-weight: 500; margin-top: 2px; }
.m-price { font-weight: 700; font-size: 14px; }
.m-chg { font-size: 13px; font-weight: 700; padding: 4px 8px; border-radius: 6px; text-align: center; }
.m-chg.up { color: var(--green); background: rgba(0,192,118,.1); }
.m-chg.down { color: var(--red); background: rgba(246,70,93,.1); }

.trade-top {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 16px 0; padding: 12px 14px; border-radius: 14px;
}
.icon-btn {
  width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--white);
  font-size: 18px; cursor: pointer; color: var(--navy);
  transition: all .2s ease;
}
.icon-btn.accent { background: var(--blue-soft); border-color: rgba(46,174,240,.3); color: var(--blue); }
.icon-btn:active { transform: scale(.92); }

.pair-block { flex: 1; min-width: 0; }
.pair-name { font-size: 17px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }
.pair-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.pair-price { font-size: 15px; color: var(--blue); font-weight: 700; }
.pair-change {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.pair-change.up { color: var(--green); background: rgba(0,192,118,.12); }
.pair-change.down { color: var(--red); background: rgba(246,70,93,.12); }

.chart-wrap {
  margin: 8px 14px 10px;
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  height: 370px;
  max-height: 370px;
}
#price-chart {
  width: 100%;
  height: 370px;
  max-height: 370px;
  overflow: hidden;
}
.chart-wrap canvas {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.tv-chart-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 370px;
  max-height: 370px;
  min-height: 370px;
  position: relative;
  background: transparent;
  overflow: hidden;
}
.chart-fallback {
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.tv-chart-shell::after {
  content: "";
  position: absolute;
  inset: 118px 0 0;
  background: linear-gradient(90deg, rgba(234,236,239,.12), rgba(255,255,255,.35), rgba(234,236,239,.12));
  background-size: 220% 100%;
  animation: chartSkeleton 1.1s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.tv-chart-shell.ready::after { display: none; }
.tv-chart-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  border-bottom: 1px solid var(--line);
}
.tv-chart-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px 0;
}
.tv-chart-row-top { padding-top: 12px; padding-bottom: 6px; }
.tv-chart-row-toolbar {
  padding-top: 4px;
  padding-bottom: 6px;
  justify-content: flex-start;
}
.tv-chart-row-toolbar .tv-toolbar { width: 100%; justify-content: space-between; }
.tv-chart-head { min-width: 0; }
.tv-chart-head b {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.tv-chart-head span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tv-chart-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.tv-chart-ohlc {
  margin: 0 14px 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.55);
  font-size: 11px;
}
.tv-chart-ohlc.idle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
}
.tv-chart-ohlc.idle .ohlc-label {
  font-weight: 800;
  color: var(--navy);
  font-size: 11px;
}
.tv-chart-ohlc.idle .ohlc-hint { font-weight: 600; font-size: 10px; }
.tv-chart-ohlc.up { border-color: rgba(0,192,118,.22); background: rgba(0,192,118,.06); }
.tv-chart-ohlc.down { border-color: rgba(246,70,93,.2); background: rgba(246,70,93,.05); }
.tv-chart-ohlc.pinned { box-shadow: 0 0 0 2px rgba(46,174,240,.18); }
.tv-chart-ohlc .ohlc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.tv-chart-ohlc .ohlc-label {
  font-weight: 800;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue);
}
.tv-chart-ohlc .ohlc-time { font-weight: 700; color: var(--muted); font-size: 10px; }
.tv-chart-ohlc .ohlc-pin {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(46,174,240,.1);
  padding: 2px 7px;
  border-radius: 999px;
}
.tv-chart-ohlc .ohlc-values {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.tv-chart-canvas {
  position: relative;
  flex: 0 0 252px;
  width: 100%;
  min-height: 252px;
  max-height: 252px;
  height: 252px;
  z-index: 1;
  overflow: hidden;
  touch-action: pan-x pinch-zoom;
}
.tv-chart-mount {
  width: 100%;
  height: 100%;
  min-height: 252px;
  touch-action: pan-x pinch-zoom;
}
.tv-chart-mount .tv-lightweight-charts {
  width: 100% !important;
  height: 100% !important;
}
.tv-chart-shell a,
.tv-chart-shell iframe,
.tv-chart-shell [class*="attribution"],
.tv-chart-shell [class*="copyright"] {
  display: none !important;
  pointer-events: none !important;
}
.tv-price-badge {
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.tv-price-badge.up {
  color: var(--green);
  background: rgba(0,192,118,.12);
  border: 1px solid rgba(0,192,118,.22);
}
.tv-price-badge.down {
  color: var(--red);
  background: rgba(246,70,93,.1);
  border: 1px solid rgba(246,70,93,.2);
}
.tv-chart-live .tv-chart-canvas { min-height: 200px; height: 200px; }
.tv-tooltip {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  min-width: 148px;
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(15,45,72,.95);
  color: #fff;
  box-shadow: 0 10px 24px rgba(15,45,72,.2);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease;
}
.tv-tooltip.show { opacity: 1; transform: translateY(0); }
.tv-tooltip b { display: block; font-size: 13px; }
.tv-tooltip span { display: block; margin-top: 3px; font-size: 10px; color: rgba(255,255,255,.72); }
.tv-toolbar {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(244,248,252,.92);
  box-shadow: 0 4px 14px rgba(15,45,72,.06);
  width: 100%;
}
.tv-toolbar button {
  flex: 1;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  padding: 7px 10px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.tv-toolbar button.active {
  color: #fff;
  background: var(--navy);
}
@keyframes chartSkeleton {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

.pair-switcher {
  position: relative;
  margin: 8px 14px 0;
  border-radius: 16px;
  z-index: 20;
}
.pair-switcher-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  cursor: pointer;
  text-align: left;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pair-switcher-kicker {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.pair-switcher-btn strong {
  flex: 1;
  font-size: 16px;
  font-weight: 800;
  color: var(--navy);
}
.pair-switcher-caret { color: var(--muted); font-size: 14px; }
.pair-switcher-menu {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 6px);
  max-height: 240px;
  overflow-y: auto;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.97);
  box-shadow: 0 16px 40px rgba(15,45,72,.15);
  z-index: 30;
  padding: 6px;
}
.pair-switcher-item {
  width: 100%;
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 10px 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background .18s ease;
}
.pair-switcher-item:hover, .pair-switcher-item.active { background: var(--blue-soft); }
.psi-pair { font-size: 13px; font-weight: 800; color: var(--navy); }
.psi-pair small { display: block; font-size: 10px; font-weight: 600; color: var(--muted); }
.psi-price { font-size: 12px; font-weight: 700; color: var(--blue); text-align: right; }
.psi-chg { font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 8px; text-align: center; }
.psi-chg.up { color: var(--green); background: rgba(0,192,118,.1); }
.psi-chg.down { color: var(--red); background: rgba(246,70,93,.1); }
.pair-switcher-empty { padding: 14px; text-align: center; color: var(--muted); font-size: 12px; }

.candle-ohlc-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 14px 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.72);
  font-size: 11px;
}
.candle-ohlc-bar.hidden { display: none !important; }
.candle-ohlc-bar.up { border-color: rgba(0,192,118,.22); background: rgba(0,192,118,.06); }
.candle-ohlc-bar.down { border-color: rgba(246,70,93,.2); background: rgba(246,70,93,.05); }
.candle-ohlc-bar.pinned { box-shadow: 0 0 0 2px rgba(46,174,240,.18); }
.ohlc-time { font-weight: 700; color: var(--muted); margin-right: 4px; }
.ohlc-cell { display: inline-flex; align-items: center; gap: 4px; }
.ohlc-cell em { font-style: normal; font-weight: 700; color: var(--muted); font-size: 10px; }
.ohlc-cell b { font-weight: 800; color: var(--navy); }

.trades-list { padding: 0 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.trade-row {
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.7);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.trade-row:active { transform: scale(.99); }
.trade-row.win { border-color: rgba(0,192,118,.25); background: rgba(0,192,118,.07); }
.trade-row.lose { border-color: rgba(246,70,93,.22); background: rgba(246,70,93,.06); }
.trade-row-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.trade-row-top strong { font-size: 15px; color: var(--navy); }
.trade-row-badge { font-size: 10px; font-weight: 800; padding: 4px 8px; border-radius: 999px; }
.trade-row-badge.win { color: #1fa86a; background: rgba(0,192,118,.12); }
.trade-row-badge.lose { color: #e2556a; background: rgba(246,70,93,.12); }
.trade-row-meta { margin-top: 6px; font-size: 12px; color: var(--muted); }
.trade-row-pnl { margin-top: 4px; font-size: 16px; font-weight: 800; }
.trade-row-pnl.win { color: #1fa86a; }
.trade-row-pnl.lose { color: #e2556a; }
.trade-row-date { margin-top: 4px; font-size: 10px; color: var(--muted); }
.trades-empty { text-align: center; padding: 24px 12px; color: var(--muted); font-size: 13px; }

.trade-detail-overlay {
  position: fixed; inset: 0; z-index: 140;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(9,12,20,.62);
  backdrop-filter: blur(6px);
  padding: 16px;
}
.trade-detail-overlay.hidden { display: none !important; }
.trade-detail-card {
  width: 100%; max-width: 480px;
  border-radius: 24px 24px 18px 18px;
  padding: 0 0 18px;
  overflow: hidden;
  animation: walletSheetUp .34s cubic-bezier(.2,.8,.2,1);
}
.trade-detail-card::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #7c6df0, #9d93f5, #2dd4a8);
}
.trade-detail-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(255,255,255,.5);
  cursor: pointer; color: var(--muted);
  z-index: 3;
}
.trade-detail-head {
  padding: 16px 16px 0;
  margin-bottom: 0;
}
.td-brand-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-right: 36px;
}
.td-brand-logo {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(124,109,240,.1);
  border: 1.5px solid rgba(157,147,245,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: visible;
  box-shadow: 0 3px 10px rgba(124,109,240,.1);
}
.td-brand-logo svg {
  display: block;
  flex-shrink: 0;
}
.td-brand-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.td-brand-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.td-brand-sub { font-size: 11px; font-weight: 600; color: var(--muted); }
.td-status-pill {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.td-status-pill.win { color: #1fa86a; background: rgba(0,192,118,.12); border: 1px solid rgba(0,192,118,.25); }
.td-status-pill.lose { color: #e2556a; background: rgba(246,70,93,.1); border: 1px solid rgba(246,70,93,.22); }
.td-hero {
  text-align: center;
  padding: 14px 16px 16px;
  border-radius: 16px;
  margin: 0 14px;
  background: linear-gradient(180deg, rgba(124,109,240,.08), rgba(255,255,255,.02));
  border: 1px solid var(--line);
}
.trade-detail-head.win .td-hero { border-color: rgba(0,192,118,.2); background: linear-gradient(180deg, rgba(0,192,118,.08), rgba(255,255,255,.02)); }
.trade-detail-head.lose .td-hero { border-color: rgba(246,70,93,.18); background: linear-gradient(180deg, rgba(246,70,93,.06), rgba(255,255,255,.02)); }
.td-hero-pair {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.td-hero-amount {
  margin-top: 6px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.td-hero-amount.win { color: #1fa86a; }
.td-hero-amount.lose { color: #e2556a; }
.td-hero-meta {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #5a6f87;
}
.td-hero-date { margin-top: 4px; font-size: 11px; color: var(--muted); }
.trade-detail-grid {
  padding: 12px 16px 0;
}
.trade-detail-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.trade-detail-row:last-child { border-bottom: none; }
.trade-detail-row span { color: var(--muted); font-weight: 600; }
.trade-detail-row b { color: var(--navy); font-weight: 800; text-align: right; }
.td-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  background: rgba(46,174,240,.08);
  padding: 3px 8px;
  border-radius: 8px;
}

.stats-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 0 16px 12px;
}
.stat-box {
  border-radius: 14px; padding: 14px;
  transition: transform .2s ease;
}
.stat-box:active { transform: scale(.98); }
.stat-box.accent-border { border-color: rgba(46,174,240,.25); }
.stat-box small { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.stat-box b { font-size: 16px; font-weight: 800; color: var(--navy); }

.field { padding: 0 16px 12px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 8px; font-weight: 600; }

.input-line {
  display: flex; align-items: center; height: 54px;
  border-radius: 14px; padding: 0 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.72);
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.input-line:focus-within {
  box-shadow: 0 0 0 3px var(--blue-glow);
  border-color: rgba(46,174,240,.4);
  background: rgba(255,255,255,.92);
}
.input-line input {
  flex: 1; border: none !important; outline: none; background: transparent !important;
  box-shadow: none !important; font-size: 24px; font-weight: 800; color: var(--navy); width: 100%;
  -webkit-appearance: none; appearance: none;
}
.input-line span { color: var(--muted); font-size: 16px; font-weight: 700; flex-shrink: 0; }

.btn-main {
  display: block; width: calc(100% - 32px); margin: 8px 16px;
  padding: 16px; border: none; border-radius: 14px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 50%, var(--blue) 100%);
  color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 24px var(--blue-glow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-main:active { transform: scale(.97); box-shadow: 0 4px 12px var(--blue-glow); }

.btn-ghost {
  display: block; width: calc(100% - 32px); margin: 8px 16px;
  padding: 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--white); color: var(--muted); font-size: 14px; cursor: pointer;
  transition: all .2s ease;
}
.btn-ghost:active { background: var(--blue-soft); color: var(--navy); }

.choice-grid { padding: 8px 16px; display: flex; flex-direction: column; gap: 10px; }
.trade-direction-block {
  padding: 0 16px 8px;
}
.trade-direction-block > label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 10px;
}
.trade-choice-grid { padding: 0; }
.choice {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 16px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255,255,255,.75);
  transition: all .25s cubic-bezier(.2,.8,.2,1);
}
.choice span { font-size: 22px; width: 28px; text-align: center; font-weight: 800; }
.choice b { font-size: 15px; font-weight: 800; }
.choice.up {
  border-color: rgba(0,192,118,.28);
  background: rgba(0,192,118,.06);
  color: #00a86b;
}
.choice.up.active, .choice.up:active {
  border-color: rgba(0,192,118,.55);
  background: rgba(0,192,118,.14);
  box-shadow: 0 6px 18px rgba(0,192,118,.12);
}
.choice.down {
  border-color: rgba(246,70,93,.28);
  background: rgba(246,70,93,.06);
  color: #e04a5f;
}
.choice.down.active, .choice.down:active {
  border-color: rgba(246,70,93,.55);
  background: rgba(246,70,93,.12);
  box-shadow: 0 6px 18px rgba(246,70,93,.1);
}
.choice.equal {
  border-color: rgba(240,185,11,.35);
  background: rgba(240,185,11,.08);
  color: #b8860b;
}
.choice.equal.active, .choice.equal:active {
  border-color: rgba(240,185,11,.55);
  background: rgba(240,185,11,.16);
  box-shadow: 0 6px 18px rgba(240,185,11,.12);
}

.time-list { padding: 8px 16px; display: flex; flex-direction: column; gap: 10px; }
.time-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 18px; border-radius: 16px; cursor: pointer;
  transition: all .25s ease;
}
.time-item:active { transform: scale(.98); border-color: var(--blue); background: var(--blue-soft); }
.time-item .t-left { font-size: 16px; font-weight: 700; color: var(--navy); }
.time-item .t-mult {
  font-size: 15px; font-weight: 800; color: var(--blue);
  background: var(--blue-soft); padding: 6px 12px; border-radius: 8px;
}

.live-board {
  margin: 16px; border-radius: 20px; padding: 20px;
}
.live-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.live-pair { font-size: 20px; font-weight: 800; color: var(--navy); }
.live-timer { font-size: 32px; font-weight: 800; color: var(--blue); }
.live-timer small { font-size: 12px; color: var(--muted); font-weight: 500; }
.pulse { animation: pulse 1s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .7; }
}

.live-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.live-item { background: var(--blue-soft); border-radius: 10px; padding: 10px 12px; }
.live-item.full { grid-column: 1 / -1; }
.live-item span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.live-item b { font-size: 14px; font-weight: 700; color: var(--navy); }
.green { color: var(--green) !important; }
.red { color: var(--red) !important; }

.progress-bar {
  height: 6px; background: var(--line); border-radius: 3px;
  margin: 16px 0 8px; overflow: hidden;
}
#progress-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--navy), var(--blue));
  border-radius: 3px; transition: width 1s linear;
}

.live-note { text-align: center; font-size: 13px; color: var(--muted); }

.result-board {
  margin: 24px 16px; border-radius: 20px; padding: 36px 22px; text-align: center;
}
.result-board.win { border: 1px solid rgba(0,192,118,.3); }
.result-board.lose { border: 1px solid rgba(246,70,93,.3); }
.result-icon {
  width: 56px; height: 56px; margin: 0 auto 12px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800;
  animation: bounceIn .5s ease;
}
@keyframes bounceIn {
  0% { transform: scale(0); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.result-board.win .result-icon {
  background: rgba(0,192,118,.12);
  color: var(--green);
  border: 1px solid rgba(0,192,118,.25);
}
.result-board.lose .result-icon {
  background: rgba(246,70,93,.1);
  color: var(--red);
  border: 1px solid rgba(246,70,93,.22);
}
.result-board h2 { font-size: 20px; color: var(--navy); margin-bottom: 8px; }
.result-sum { font-size: 34px; font-weight: 800; margin-bottom: 8px; }
.result-board.win .result-sum { color: var(--green); }
.result-board.lose .result-sum { color: var(--red); }
.result-bal { color: var(--muted); font-size: 14px; margin-bottom: 16px; }

.tabs { display: flex; gap: 8px; padding: 0 16px 14px; }
.tab {
  flex: 1; padding: 13px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--white);
  color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all .28s cubic-bezier(.2,.8,.2,1);
}
.tab.active {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  box-shadow: 0 8px 22px var(--blue-glow);
  transform: translateY(-1px);
}

.wallet-cabinet-wrap { padding-bottom: 8px; }
.wallet-cabinet { padding: 12px 16px 4px; }
.wallet-cabinet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.wallet-cabinet-user {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.wallet-verif-pill {
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.7);
}
.wallet-verif-pill.ok { color: #0a7a4b; border-color: rgba(0,192,118,.25); background: rgba(0,192,118,.1); }
.wallet-verif-pill.no { color: #9a6b00; border-color: rgba(232,184,74,.3); background: rgba(232,184,74,.12); }
.wallet-balance-card {
  padding: 16px 18px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.wallet-balance-top { margin-bottom: 10px; }
.wallet-balance-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}
.wallet-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 12px;
}
.wallet-stat-cell {
  padding: 14px 16px;
  background: rgba(255,255,255,.55);
}
.wallet-stat-key {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}
.wallet-stat-val { font-size: 20px; font-weight: 800; color: var(--navy); }
.wallet-id-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}
.wallet-id-btn strong { font-size: 15px; font-weight: 800; color: var(--navy); font-family: ui-monospace, monospace; }
.wallet-id-btn em {
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  color: var(--blue);
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(46,174,240,.12);
}
.wallet-prefs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 6px;
}
.wallet-pref-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(238,247,255,.85));
  cursor: pointer;
  text-align: left;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wallet-pref-chip:active { transform: scale(.98); }
.wallet-pref-icon { font-size: 22px; line-height: 1; }
.wallet-pref-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wallet-pref-text small {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.wallet-pref-text strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wallet-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 16px 20px;
}
.wallet-action-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(238,247,255,.88));
  cursor: pointer;
  text-align: left;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wallet-action-btn:active { transform: scale(.98); }
.wallet-action-body { display: flex; align-items: center; gap: 14px; min-width: 0; }
.wallet-action-icon {
  font-size: 26px;
  line-height: 1;
  width: 42px;
  text-align: center;
  flex-shrink: 0;
}
.wallet-action-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wallet-action-label {
  font-size: 16px;
  font-weight: 800;
  color: var(--navy);
}
.wallet-action-desc {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.35;
}
.wallet-action-arrow {
  font-size: 22px;
  font-weight: 300;
  color: var(--muted);
  flex-shrink: 0;
  opacity: .7;
}
.wallet-settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(9, 12, 20, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 16px;
  animation: walletOverlayIn .28s ease;
}
.wallet-settings-overlay.hidden { display: none !important; }
@keyframes walletOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.wallet-settings-sheet {
  width: 100%;
  max-width: 480px;
  max-height: 70vh;
  border-radius: 22px 22px 18px 18px;
  padding: 18px 16px 20px;
  animation: walletSheetUp .34s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@keyframes walletSheetUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
.wallet-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.wallet-settings-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
}
.wallet-settings-close {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.6);
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
}
.wallet-settings-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-bottom: 4px;
}
.wallet-settings-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.65);
  cursor: pointer;
  text-align: left;
  transition: transform .18s ease, border-color .2s ease, background .2s ease;
}
.wallet-settings-opt:active { transform: scale(.99); }
.wallet-settings-opt.active {
  border-color: rgba(46,174,240,.45);
  background: rgba(46,174,240,.1);
  box-shadow: 0 4px 16px rgba(46,174,240,.12);
}
.wallet-settings-opt-main { display: flex; align-items: center; gap: 12px; }
.wallet-settings-opt-flag { font-size: 22px; line-height: 1; }
.wallet-settings-opt-label { font-size: 15px; font-weight: 700; color: var(--navy); }
.wallet-settings-opt-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: transparent;
  transition: all .2s ease;
}
.wallet-settings-opt.active .wallet-settings-opt-check {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}
.wallet-action-dep { border-color: rgba(76,175,122,.22); }
.wallet-action-wd { border-color: rgba(156,89,255,.22); }
.wallet-action-hist { border-color: rgba(46,174,240,.22); }
.wallet-flow { padding: 0 0 12px; }
.wallet-flow-back {
  margin: 4px 16px 12px;
  width: calc(100% - 32px);
}
.wallet-flow-panel { padding: 0 16px 12px; }
.flow-step.hidden { display: none !important; }
.hist-clickable { cursor: pointer; }
.hist-clickable:active { transform: scale(.99); }
.hist-clickable.hist-dep {
  border-color: rgba(46, 174, 240, .35);
  box-shadow: 0 4px 16px rgba(46, 174, 240, .12);
}
.hist-pending-hint {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--blue);
  font-weight: 600;
}

.panel { padding: 0 0 12px; }
.wallet-panel {
  opacity: 0;
  transform: translateY(10px);
}
.wallet-panel-in {
  animation: walletPanelIn .42s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes walletPanelIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.wallet-hero {
  position: relative;
  margin: 12px 16px 14px;
  padding: 18px 18px 16px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(46,174,240,.18);
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(238,247,255,.88));
}
.wallet-hero-glow {
  position: absolute;
  inset: -40% -20% auto auto;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(46,174,240,.22), transparent 70%);
  animation: walletGlow 4s ease-in-out infinite;
}
@keyframes walletGlow {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .7; }
  50% { transform: translate(-8px, 6px) scale(1.08); opacity: 1; }
}
.wallet-kicker {
  position: relative;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
}
.wallet-balance-line {
  position: relative;
  font-size: 34px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
  animation: walletBalanceIn .6s cubic-bezier(.2,.8,.2,1);
}
@keyframes walletBalanceIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.wallet-pending-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,193,7,.12), rgba(255,152,0,.08));
  border: 1px solid rgba(255,193,7,.22);
  font-size: 12px;
  color: #8a6200;
}
.wallet-pending-pill strong { color: var(--navy); font-size: 14px; }

.wd-note {
  margin: 0 16px 10px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}

.deposit-card {
  margin: 0 16px 16px; border-radius: 18px; padding: 20px;
  border: 1px solid rgba(46,174,240,.25);
  background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(232,246,255,.85));
}
.dep-head { font-size: 17px; font-weight: 800; color: var(--navy); margin-bottom: 16px; }
.dep-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.dep-row span { color: var(--muted); min-width: 90px; font-weight: 500; }
.dep-row b { flex: 1; font-weight: 700; word-break: break-all; color: var(--navy); }
.copy-btn {
  padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--blue-soft); font-size: 11px; font-weight: 600;
  color: var(--blue); cursor: pointer; transition: all .15s ease;
}
.copy-btn:active { transform: scale(.95); background: var(--blue); color: #fff; }
.dep-warning {
  margin-top: 14px; padding: 14px; border-radius: 12px;
  background: linear-gradient(135deg, #fff8e6, #fffdf5);
  border: 1px solid #ffe082; font-size: 12px; color: #7a6200; line-height: 1.5;
}
.btn-support {
  display: block; margin-top: 16px; padding: 15px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  color: #fff; text-align: center; text-decoration: none;
  font-weight: 700; font-size: 15px;
  box-shadow: 0 6px 20px var(--blue-glow);
  transition: transform .15s ease;
}
.btn-support:active { transform: scale(.97); }

.dep-timer-wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; margin: 10px 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff8e6, #fffdf5);
  border: 1px solid #ffe082;
  font-size: 12px; color: #7a6200;
}
.dep-timer { font-size: 20px; color: var(--navy); font-weight: 800; font-variant-numeric: tabular-nums; }
.dep-timer.urgent { color: var(--red); animation: pulse 1s ease infinite; }
.dep-check-msg {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  font-size: 12px; line-height: 1.45; text-align: center;
}
.dep-check-msg.warn { background: #fff8e6; color: #7a6200; border: 1px solid #ffe082; }
.dep-check-msg.ok { background: #e8fff3; color: #0a7a4b; border: 1px solid #a8e6c5; }
.dep-check-msg.err { background: #fff0f2; color: var(--red); border: 1px solid #ffcdd2; }

.credit-animation {
  margin-top: 12px; padding: 20px 16px 16px; border-radius: 16px; text-align: center;
  background: linear-gradient(165deg, #eef5fb 0%, #f5fffa 55%, #ffffff 100%);
  border: 1px solid rgba(46, 174, 240, 0.25);
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.credit-animation.active {
  opacity: 1;
  transform: none;
}

.credit-logo-stage {
  position: relative;
  width: 120px; height: 90px;
  margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
}
.credit-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(46,174,240,.35) 0%, rgba(46,174,240,0) 70%);
  animation: creditGlow 2.4s ease-in-out infinite;
}
.credit-ring {
  position: absolute; width: 88px; height: 88px;
  border: 2px solid rgba(46,174,240,.25);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: creditSpin 1.8s linear infinite;
}
.credit-size {
  position: relative; z-index: 2;
  animation: creditLogoPulse 2s ease-in-out infinite;
}
.credit-size .wm-letter { font-size: 30px; }
.credit-size .wm-x svg { width: 26px; height: 38px; }

.credit-label {
  font-size: 13px; color: var(--navy); font-weight: 600;
  animation: creditTextFade 1.2s ease infinite alternate;
}
.credit-balance {
  margin-top: 10px; font-size: 24px; font-weight: 800; color: var(--green);
  opacity: 0;
  transform: scale(0.85);
}
.credit-animation.active .credit-balance {
  animation: creditAmountIn .9s cubic-bezier(.2,.8,.2,1) .6s both;
}
.credit-progress {
  margin-top: 14px; height: 4px; background: rgba(15,45,72,.08);
  border-radius: 4px; overflow: hidden;
}
.credit-progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--navy), var(--blue), var(--green));
  border-radius: 4px;
}
.credit-animation.active .credit-progress-fill {
  animation: creditBar 1.4s cubic-bezier(.4,0,.2,1) .2s forwards;
}

@keyframes creditGlow {
  0%, 100% { opacity: .45; transform: scale(.95); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes creditSpin { to { transform: rotate(360deg); } }
@keyframes creditLogoPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(46,174,240,0)); }
  50% { transform: scale(1.06); filter: drop-shadow(0 4px 14px rgba(46,174,240,.35)); }
}
@keyframes creditTextFade { from { opacity: .55; } to { opacity: 1; } }
@keyframes creditAmountIn {
  from { opacity: 0; transform: scale(.85) translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes creditBar { to { width: 100%; } }

.withdraw-card {
  margin: 0 16px 16px; padding: 18px; border-radius: 18px;
  border: 1px solid rgba(156, 89, 255, .22);
  background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(245,240,255,.88));
}
.wallet-card-pop {
  opacity: 0;
  transform: translateY(14px) scale(.98);
}
.wallet-card-in {
  animation: walletCardIn .48s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes walletCardIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.wd-card-head { font-weight: 700; font-size: 15px; color: var(--navy); margin-bottom: 10px; }
.wd-card-amount {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line); margin-bottom: 12px;
  font-size: 13px;
}
.wd-card-amount b { font-size: 18px; color: var(--navy); }
.wd-status-badge {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 700; margin-bottom: 8px;
}
.wd-status-badge.pending { background: var(--blue-soft); color: var(--blue); }
.wd-status-badge.approved { background: #e8fff3; color: var(--green); }
.wd-status-badge.rejected { background: #fff0f2; color: var(--red); }
.wd-status-text { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }

.history-list { min-height: 260px; max-height: 430px; overflow-y: auto; padding: 0 16px 8px; }
.history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px;
  padding: 13px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(15,45,72,.96), rgba(46,174,240,.86));
  color: #fff;
  box-shadow: 0 14px 34px rgba(15,45,72,.16);
}
.history-head b { font-size: 15px; }
.history-head span {
  min-width: 28px;
  text-align: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  font-size: 12px;
  font-weight: 800;
}
.history-debug {
  margin: -3px 2px 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(15,45,72,.055);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.hist-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px 12px;
  align-items: center;
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.78);
  font-size: 12px;
  opacity: 0;
  transform: translateY(8px);
  animation: histIn .45s cubic-bezier(.2,.8,.2,1) forwards;
  transition: transform .2s ease, box-shadow .2s ease;
}
.hist-item:active { transform: scale(.985); }
@keyframes histIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.hist-item.hist-dep { border-left: 4px solid rgba(76, 175, 122, 0.45); background: linear-gradient(90deg, rgba(76,175,122,.05), rgba(255,255,255,.82)); }
.hist-item.hist-wd { border-left: 4px solid rgba(156, 89, 255, 0.35); background: linear-gradient(90deg, rgba(156,89,255,.05), rgba(255,255,255,.82)); }
.hist-item.hist-wd.hist-rejected { border-left-color: rgba(201, 104, 120, 0.45); background: linear-gradient(90deg, rgba(201,104,120,.06), rgba(255,255,255,.82)); }
.hist-item.hist-dep.hist-rejected { border-left-color: rgba(201, 104, 120, 0.4); background: linear-gradient(90deg, rgba(201,104,120,.05), rgba(255,255,255,.82)); }
.hist-item.hist-dep.hist-approved { border-left-color: rgba(76, 175, 122, 0.55); }
.hist-icon {
  width: 36px; height: 36px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  background: rgba(255,255,255,.85);
  box-shadow: inset 0 0 0 1px var(--line);
}
.hist-dep .hist-icon { background: rgba(76,175,122,.1); }
.hist-wd .hist-icon { background: rgba(156,89,255,.08); }
.hist-wd.hist-rejected .hist-icon { background: rgba(201,104,120,.1); }
.hist-main { min-width: 0; }
.hist-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hist-type { font-weight: 800; color: var(--navy); font-size: 13px; }
.hist-method {
  font-size: 10px; font-weight: 700; color: var(--blue);
  padding: 3px 8px; border-radius: 999px;
  background: var(--blue-soft);
}
.hist-side { text-align: right; }
.hist-amt { font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.hist-meta { color: var(--muted); font-size: 11px; margin-top: 2px; }
.hist-badge {
  font-size: 10px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  display: inline-block;
}
.hist-amt.plus { color: #4caf7a; }
.hist-amt.minus { color: #8b7cc8; }
.hist-amt.minus-fail { color: #c96878; }
.hist-item.hist-dep .hist-amt.plus { color: #4caf7a; }
.hist-item.hist-wd.hist-rejected .hist-amt.minus-fail { color: #c96878; }
.hist-badge.rejected { background: rgba(201,104,120,.12); color: #b85c6b; }
.hist-badge.approved { background: rgba(76,175,122,.12); color: #3d9a66; }
.hist-badge.pending { background: rgba(46,174,240,.1); color: var(--blue); }
.hist-badge.expired { background: #f5f5f5; color: var(--muted); }

.navbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  display: flex; border-top: 1px solid var(--line);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); z-index: 60;
}
.nav {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px; border: none; background: none;
  color: var(--muted); font-size: 10px; font-weight: 600; cursor: pointer;
  transition: color .2s ease;
}
.nav i { font-style: normal; font-size: 20px; transition: transform .2s ease; }
.nav { font-size: 9px; }
.nav.active { color: var(--blue); }
.nav.active i { transform: scale(1.1); }

/* ── Rating tab ── */
.rating-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 0 16px 12px;
  padding: 8px;
  border-radius: 14px;
}
.rating-tab {
  padding: 10px 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.rating-tab.active { color: var(--blue); border-color: var(--blue); }
.rating-panel { margin: 0 16px 80px; }
.rating-list { display: flex; flex-direction: column; gap: 8px; }
.rating-lb-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--white);
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.rating-lb-row.whale { border-color: rgba(124, 109, 240, 0.35); }
.rating-lb-row .lb-body strong { display: block; font-size: 13px; }
.rating-lb-row .lb-body small { color: var(--muted); font-size: 10px; }
.rating-lb-row .lb-score { font-weight: 800; color: var(--blue); font-size: 13px; }
.rating-live-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
}
.rating-live-list { display: flex; flex-direction: column; gap: 8px; }
.rating-trade-row {
  width: 100%;
  text-align: left;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--white);
  cursor: pointer;
}
.rating-trade-row.win { border-left: 3px solid var(--green); }
.rating-trade-row.lose { border-left: 3px solid var(--red); }
.rating-trade-user { font-weight: 700; font-size: 13px; }
.rating-trade-pair { font-size: 11px; color: var(--muted); }
.rating-trade-pnl { font-size: 14px; font-weight: 700; margin-top: 4px; }
.rating-trade-row.win .rating-trade-pnl { color: var(--green); }
.rating-trade-row.lose .rating-trade-pnl { color: var(--red); }
.rating-trade-meta { font-size: 10px; color: var(--muted); }

/* ── History summary & icons ── */
.history-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 16px 12px;
  padding: 12px;
  border-radius: 14px;
}
.hist-sum-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.03);
}
.hist-sum-card small { display: block; font-size: 10px; color: var(--muted); }
.hist-sum-card strong { font-size: 14px; }
.hist-sum-card.dep strong { color: var(--green); }
.hist-sum-card.wd strong { color: var(--red); }
.hist-sum-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
}
.hist-sum-card.dep .hist-sum-icon {
  background: linear-gradient(135deg, #2dd4a8, #1a9d74);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 4v12m0 0l-4-4m4 4l4-4M4 20h16'/%3E%3C/svg%3E") center/18px no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 4v12m0 0l-4-4m4 4l4-4M4 20h16'/%3E%3C/svg%3E") center/18px no-repeat;
}
.hist-sum-card.wd .hist-sum-icon {
  background: linear-gradient(135deg, #f07070, #c94a4a);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 20V8m0 0l4 4m-4-4l-4 4M4 4h16'/%3E%3C/svg%3E") center/18px no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 20V8m0 0l4 4m-4-4l-4 4M4 4h16'/%3E%3C/svg%3E") center/18px no-repeat;
}
.hist-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hist-icon-wrap.dep { background: rgba(45, 212, 168, 0.15); }
.hist-icon-wrap.wd { background: rgba(240, 112, 112, 0.15); }
.hist-icon-svg {
  width: 22px;
  height: 22px;
  display: block;
}
.hist-icon-wrap.dep .hist-icon-svg {
  background: #2dd4a8;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 4v12m0 0l-4-4m4 4l4-4'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 4v12m0 0l-4-4m4 4l4-4'/%3E%3C/svg%3E") center/contain no-repeat;
}
.hist-icon-wrap.wd .hist-icon-svg {
  background: #f07070;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 20V8m0 0l4 4m-4-4l-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 20V8m0 0l4 4m-4-4l-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
}

.toast {
  position: fixed; bottom: 230px; left: 50%; transform: translateX(-50%);
  background: var(--white); border: 1px solid var(--line);
  padding: 14px 20px; border-radius: 14px; font-size: 13px; font-weight: 500;
  z-index: 400; max-width: 92%; text-align: center;
  box-shadow: var(--shadow-lg);
  animation: toastIn .3s ease;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.toast.err { border-color: rgba(246,70,93,.3); color: var(--red); }
.toast.ok { border-color: rgba(0,192,118,.3); color: var(--green); }

/* ── Live activity feed ── */
.trade-widgets {
  position: fixed;
  right: 10px;
  bottom: calc(72px + env(safe-area-inset-bottom));
  width: min(168px, 42vw);
  z-index: 55;
  pointer-events: none;
}
.trade-widgets.hidden { display: none; }
.live-activity {
  border-radius: 14px;
  padding: 8px 10px;
  max-height: 220px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
}
.live-activity-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  margin-bottom: 6px;
  color: var(--muted);
}
.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: livePulse 1.4s ease infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}
.live-activity-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 180px;
  overflow: hidden;
}
.live-activity-item {
  font-size: 9px;
  line-height: 1.35;
  padding: 5px 6px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.03);
  animation: feedSlideIn 0.45s ease;
}
.live-activity-item.win { border-left: 2px solid var(--green); }
.live-activity-item.lose { border-left: 2px solid var(--red); }
.live-user { font-weight: 700; display: block; }
.live-pair { color: var(--muted); }
.live-pnl { font-weight: 700; display: block; }
.live-activity-item.win .live-pnl { color: var(--green); }
.live-activity-item.lose .live-pnl { color: var(--red); }
.live-meta { color: var(--muted); font-size: 8px; }
@keyframes feedSlideIn {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: none; }
}

/* ── Crypto news strip ── */
.crypto-news-strip {
  margin: 0 16px 12px;
  border-radius: 14px;
  padding: 10px 12px;
  overflow: hidden;
}
.news-strip-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-bottom: 8px;
}
.news-ticker-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.news-ticker-viewport::-webkit-scrollbar { display: none; height: 0; }
.news-ticker-track {
  display: flex;
  gap: 12px;
  width: max-content;
  padding: 4px 8px 8px;
}
.news-title-text { display: block; line-height: 1.35; }
.news-ticker-track .news-item {
  flex: 0 0 auto;
  min-width: 220px;
  max-width: 280px;
  font-size: 11px;
  line-height: 1.4;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.04);
  color: inherit;
  text-decoration: none;
  display: block;
  text-align: left;
}
.news-src {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 3px;
  text-transform: uppercase;
}

/* ── Staking ── */
.staking-balance-card {
  margin: 0 16px 12px;
  padding: 14px 16px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.staking-balance-card span { font-size: 12px; color: var(--muted); }
.staking-balance-card strong { font-size: 22px; }
.staking-warning {
  margin: 0 16px 16px;
  padding: 16px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
}
.staking-btn-wrap {
  margin-top: 14px;
  width: 100%;
}
.staking-warning .staking-btn-wrap {
  margin-top: 16px;
  padding: 0;
}
.staking-btn-wrap .btn-main {
  width: 100%;
  margin: 0;
  display: block;
}
.staking-warning { padding-bottom: 4px; }
.staking-step .staking-btn-wrap { margin-top: 14px; }
.staking-section { margin: 0 16px 16px; }
.staking-section-head { margin-bottom: 10px; font-size: 14px; }
.staking-list { display: flex; flex-direction: column; gap: 8px; }
.staking-row {
  padding: 12px;
  border-radius: 12px;
  background: var(--white);
  border: 1px solid var(--line);
}
.staking-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.staking-status {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.staking-status.active { background: rgba(0, 192, 118, 0.12); color: var(--green); }
.staking-status.closing { background: rgba(46, 174, 240, 0.12); color: var(--blue); }
.staking-status.history { background: rgba(0, 0, 0, 0.06); color: var(--muted); }
.staking-row-mid { font-size: 18px; font-weight: 700; margin: 6px 0 4px; }
.staking-row-bot { font-size: 11px; color: var(--muted); }
.staking-timer { display: block; margin-top: 4px; font-weight: 600; color: var(--blue); }
.staking-coins-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.staking-coin-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 12px;
  background: var(--white);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
}
.staking-coin-card:active { transform: scale(0.98); }
.staking-coin-name { display: block; font-size: 15px; font-weight: 700; }
.staking-coin-apy { display: block; font-size: 11px; color: var(--green); margin-top: 4px; }
.staking-flow { margin: 0 16px 16px; }
.staking-flow-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  margin-bottom: 12px;
}
.staking-flow-head small { color: var(--green); font-weight: 600; }
.staking-step-label { font-size: 13px; margin-bottom: 10px; color: var(--muted); }
.staking-times {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.staking-time-btn {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--white);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.staking-amount-wrap { margin-bottom: 8px; }
.staking-min-note { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.staking-empty {
  text-align: center;
  padding: 16px;
  color: var(--muted);
  font-size: 13px;
}

.btn-primary,
.btn-main.staking-submit-btn,
.btn-main.staking-accept-btn {
  display: block;
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 50%, var(--blue) 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.staking-accept-btn { margin-top: 0; }

.wallet-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.wallet-merchant-pill,
.wallet-vip-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.wallet-merchant-pill.ok {
  background: rgba(232, 184, 74, 0.15);
  color: #c9a227;
}
.wallet-vip-pill {
  background: rgba(0, 0, 0, 0.06);
  color: var(--muted);
}
.wallet-vip-pill.vip-gold { color: #d4a017; background: rgba(212, 160, 23, 0.12); }
.wallet-vip-pill.vip-platinum { color: #7c8cff; }
.wallet-vip-pill.vip-vip { color: #9d93f5; background: rgba(124, 109, 240, 0.15); }

.wallet-chart-card {
  margin: 0 16px 12px;
  padding: 12px 14px;
  border-radius: 14px;
}
.wallet-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
}
.wallet-chart-head span { color: var(--muted); }
.balance-chart-mount,
.trader-chart-mount {
  width: 100%;
  height: 140px;
  border-radius: 10px;
  overflow: hidden;
}
.ax-balance-chart {
  position: relative;
  width: 100%;
  height: 140px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.03);
}
.ax-balance-chart svg { display: block; width: 100%; height: 100%; }
.ax-balance-chart .ax-chart-logo {
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: 26px;
  height: 26px;
  opacity: 0.5;
  pointer-events: none;
}
.ax-balance-chart.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.35;
}

.hub-quick-row {
  display: flex;
  gap: 8px;
  margin: 0 16px 12px;
}
.hub-quick-btn {
  flex: 1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--white);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.live-activity-item {
  width: 100%;
  text-align: left;
  border: none;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}
.live-activity-item:active { transform: scale(0.98); opacity: 0.9; }

.news-item {
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.trader-profile-card {
  max-height: 86vh;
  overflow-y: auto;
  position: relative;
  padding-bottom: 4px;
  border-radius: 20px;
}
.trader-profile-head {
  padding: 0;
}
.tp-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 52px 16px 16px;
  background: linear-gradient(165deg, rgba(124,109,240,.14) 0%, rgba(124,109,240,.04) 55%, transparent 100%);
  border-bottom: 1px solid rgba(124,109,240,.12);
  position: relative;
  min-height: 88px;
}
.tp-avatar {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(124,109,240,.12);
  border: 1.5px solid rgba(157,147,245,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(124,109,240,.15);
}
.tp-avatar svg { display: block; }
.tp-info { flex: 1; min-width: 0; }
.tp-name {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  word-break: break-word;
}
.tp-badges {
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}
.tp-corner-logo {
  position: absolute;
  top: 14px;
  right: 48px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.92;
  pointer-events: none;
}
.ax-tri-logo {
  display: inline-block;
  flex-shrink: 0;
  background: linear-gradient(165deg, #e9d5ff 0%, #9d93f5 45%, #7c6df0 100%);
  clip-path: polygon(50% 5%, 96% 95%, 4% 95%);
  box-shadow: 0 2px 8px rgba(124,109,240,.28);
}
.tp-corner-logo .ax-tri-logo,
.ft-corner-logo .ax-tri-logo {
  filter: drop-shadow(0 2px 6px rgba(124,109,240,.35));
}
.tp-avatar .ax-tri-logo,
.ft-avatar .ax-tri-logo,
.td-brand-logo .ax-tri-logo,
.wallet-balance-logo .ax-tri-logo {
  display: block;
}
.trader-profile-actions {
  padding: 12px 16px 18px;
}
.trader-profile-actions .btn-main,
.feed-trade-card .btn-main {
  width: 100%;
  margin: 0;
  display: block;
}
.feed-trade-card { padding-bottom: 16px; overflow: hidden; }
.feed-trade-body { padding: 0 16px 12px; }
.ft-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 52px 14px 16px;
  background: linear-gradient(165deg, rgba(124,109,240,.14) 0%, transparent 100%);
  border-bottom: 1px solid rgba(124,109,240,.1);
  position: relative;
}
.ft-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(124,109,240,.1);
  border: 1.5px solid rgba(157,147,245,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ft-info { flex: 1; min-width: 0; }
.ft-name { margin: 0 0 4px; font-size: 17px; font-weight: 800; line-height: 1.2; }
.ft-pair { font-size: 12px; color: var(--muted); }
.ft-corner-logo {
  position: absolute;
  top: 14px;
  right: 48px;
  pointer-events: none;
}
.ft-result {
  margin: 14px 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.ft-result.win { background: rgba(45,212,168,.1); border: 1px solid rgba(45,212,168,.2); }
.ft-result.lose { background: rgba(240,112,112,.08); border: 1px solid rgba(240,112,112,.18); }
.ft-result strong { font-size: 18px; font-weight: 800; }
.ft-result.win strong { color: var(--green); }
.ft-result.lose strong { color: var(--red); }

.wallet-balance-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.wallet-balance-main { flex: 1; min-width: 0; }
.wallet-balance-logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(124,109,240,.1);
  border: 1.5px solid rgba(157,147,245,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 12px rgba(124,109,240,.12);
}
.wallet-balance-logo svg { display: block; }
.wallet-status-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.wallet-status-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.05);
  color: var(--muted);
}
.wallet-status-chip.ok { background: rgba(45,212,168,.14); color: var(--green); }
.wallet-status-chip.no { background: rgba(240,112,112,.1); color: #c96878; }
.wallet-status-chip.merchant { background: rgba(232,184,74,.14); color: #c9a227; }
.wallet-status-chip.muted { background: rgba(0,0,0,.04); color: var(--muted); }
.wallet-status-chip.vip { background: rgba(124,109,240,.12); color: #7c6df0; }
.wallet-status-chip.vip-vip { color: #9d93f5; }
.wallet-status-chip.vip-gold { color: #d4a017; }
.feed-trade-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  font-size: 12px;
}
.feed-trade-grid span { display: block; color: var(--muted); font-size: 10px; }
.feed-trade-grid .pos { color: var(--green); }
.feed-trade-grid .neg { color: var(--red); }

.trader-profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 16px 6px;
}
.trader-stat {
  padding: 12px 11px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.04);
  font-size: 10px;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.trader-stat span {
  display: block;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 9px;
}
.trader-stat b {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  word-break: break-word;
}
.trader-stat.highlight {
  background: rgba(124,109,240,.1);
  border-color: rgba(157,147,245,.22);
}
.trader-stat.highlight b { color: #9d93f5; }

.leaderboard-card { max-height: 78vh; overflow: hidden; display: flex; flex-direction: column; }
.leaderboard-head { padding: 16px 16px 8px; font-size: 16px; }
.leaderboard-tabs {
  display: flex;
  gap: 6px;
  padding: 0 16px 10px;
}
.lb-tab {
  flex: 1;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--white);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.lb-tab.active { color: var(--blue); border-color: var(--blue); }
.leaderboard-list {
  overflow-y: auto;
  padding: 0 12px 16px;
  flex: 1;
}
.leaderboard-row {
  width: 100%;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--white);
  text-align: left;
  cursor: pointer;
  font-size: 12px;
}
.lb-rank { font-weight: 800; color: var(--blue); }
.lb-vip { grid-column: 2 / 4; font-size: 10px; color: var(--muted); }

.news-reader-card { max-height: 80vh; overflow-y: auto; }
.news-reader-title {
  padding: 16px 16px 8px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
}
.news-reader-body {
  padding: 0 16px 20px;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--muted);
}

.overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(244,248,252,.7);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.loader-ring {
  width: 36px; height: 36px;
  border: 3px solid var(--line);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-msg {
  padding: 40px 20px; text-align: center; color: var(--muted);
  font-size: 14px; line-height: 1.55;
}

.empty-msg.error { color: var(--red); }

.positions-panel {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(62px + env(safe-area-inset-bottom));
  width: 100%;
  max-width: 480px;
  z-index: 55;
  border-radius: 16px 16px 0 0;
  border: 1px solid var(--line);
  border-bottom: none;
  overflow: hidden;
  transition: max-height .25s ease;
  max-height: 260px;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.18);
}
.positions-panel.collapsed { max-height: 44px; }
.positions-panel.collapsed .pos-body { display: none; }
.positions-panel.collapsed .pos-toggle { transform: rotate(-90deg); }

.pos-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--navy);
}
.pos-toggle {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  transition: transform .2s ease;
}

.pos-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 10px 0;
}
.pos-tab {
  flex: 1;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.6);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
  color: var(--navy);
  cursor: pointer;
}
.pos-tab.active {
  color: var(--blue);
  border-color: rgba(46,174,240,.35);
  background: var(--blue-soft);
}
.pos-tab em {
  font-style: normal;
  margin-left: 4px;
  background: var(--blue);
  color: #fff;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 10px;
}

.pos-list {
  max-height: 168px;
  overflow-y: auto;
  padding: 8px 10px 10px;
}
.pos-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.65);
  border: 1px solid var(--line);
  margin-bottom: 6px;
  font-size: 12px;
}
.pos-item:last-child { margin-bottom: 0; }
.pos-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pos-item .pos-pair {
  font-weight: 800;
  color: var(--navy);
  font-size: 14px;
  letter-spacing: -0.01em;
}
.pos-row-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #4a5d73;
}
.pos-amount { color: var(--navy); font-weight: 800; }
.pos-dir { color: #5a6f87; }
.pos-dur {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(46,174,240,.1);
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
}
.pos-row-pnl {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.pos-item .pos-status { font-weight: 800; font-size: 12px; text-align: right; }
.pos-item .pos-status.win { color: #1fa86a; }
.pos-item .pos-status.lose { color: #e2556a; }
.pos-item .pos-status.run { color: var(--blue); }
.pos-item.pos-closed.win { background: rgba(0,192,118,.08); border-color: rgba(0,192,118,.22); }
.pos-item.pos-closed.lose { background: rgba(246,70,93,.07); border-color: rgba(246,70,93,.2); }
.pos-item .pos-pnl.win { color: #1fa86a; }
.pos-item .pos-pnl.lose { color: #e2556a; }
.pos-item.pos-clickable { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.pos-item.pos-clickable:active { transform: scale(.99); }
.pos-empty {
  text-align: center;
  color: #5a6f87;
  font-size: 13px;
  font-weight: 600;
  padding: 16px 8px;
}

.pos-item.pos-open { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.pos-item.pos-open:active { transform: scale(.98); box-shadow: 0 4px 14px rgba(46,174,240,.12); }

.wd-confirm-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 12px;
}
.wd-confirm-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.wd-confirm-row span { color: var(--muted); }
.wd-confirm-row b { color: var(--navy); text-align: right; }
.wd-confirm-note {
  margin: 12px 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}
.wd-card-method {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}
.method-grid { display: grid; gap: 8px; }
.method-btn {
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--white);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: all .28s cubic-bezier(.2,.8,.2,1);
}
.method-btn.active {
  border-color: rgba(156,89,255,.35);
  background: linear-gradient(135deg, rgba(156,89,255,.08), rgba(46,174,240,.08));
  box-shadow: 0 6px 18px rgba(156,89,255,.12);
  transform: translateY(-1px);
}
.wd-confirm {
  margin: 12px 16px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(156,89,255,.18);
  background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(245,240,255,.85));
}

.dep-note {
  margin: 0 16px 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}
.dep-info, .dep-p2p {
  margin: 0 16px 12px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(46,174,240,.16);
  background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(238,247,255,.88));
}
.dep-info-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 10px;
}
.dep-info-body {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  color: var(--navy);
  margin: 0 0 12px;
  background: transparent;
  border: 0;
  padding: 0;
}
.dep-info-hint {
  font-size: 11px;
  color: var(--muted);
  margin: 10px 0 12px;
  line-height: 1.45;
}
.dep-links-title {
  width: 100%;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
}
.dep-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.dep-link-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(46,174,240,.22);
  background: rgba(46,174,240,.08);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.dep-p2p-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 10px;
}
.p2p-grid {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.p2p-grid-2 { grid-template-columns: 1fr 1fr; }
.p2p-choice-btn {
  padding: 12px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.75);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  text-align: center;
}
.p2p-choice-btn:active { transform: scale(.98); }

/* ========== STEP INDICATOR ========== */
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  margin: 8px 16px;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.step span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(142,164,189,0.25);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.step small {
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.step.active span {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 2px 8px rgba(46,174,240,0.4);
}
.step.active small { color: var(--blue); }
.step.completed span {
  background: var(--green);
  color: #fff;
}
.step.completed small { color: var(--green); }
.step-line {
  width: 24px;
  height: 2px;
  background: rgba(142,164,189,0.25);
  border-radius: 1px;
  transition: background 0.3s ease;
}
.step-line.active { background: var(--green); }

/* ========== AMOUNT SCREEN ========== */
.amount-field { margin-bottom: 8px; }
.amount-input-wrap input { font-size: 22px; font-weight: 700; }
.quick-amounts {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.quick-amounts::-webkit-scrollbar { display: none; }
.qa-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.6);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: all 0.2s ease;
}
.qa-btn:hover, .qa-btn.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  transform: scale(1.05);
}

/* ========== DIRECTION SCREEN ========== */
.direction-amount-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px;
  margin: 8px 16px 4px;
  background: linear-gradient(135deg, rgba(46,174,240,0.08) 0%, rgba(255,255,255,0.6) 100%);
  border-radius: 14px;
  border: 1px solid rgba(46,174,240,0.15);
}
.direction-amount-summary span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.direction-amount-summary strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--blue);
}
.direction-choose-label {
  text-align: center;
  padding: 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
}
.direction-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px 16px;
}
.direction-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 18px;
  border: 2px solid var(--line);
  background: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}
.direction-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.direction-card:active { transform: scale(0.98); }
.up-card::before {
  background: linear-gradient(135deg, rgba(0,192,118,0.12) 0%, transparent 100%);
}
.down-card::before {
  background: linear-gradient(135deg, rgba(246,70,93,0.12) 0%, transparent 100%);
}
.direction-card:hover::before, .direction-card.selected::before { opacity: 1; }
.up-card.selected {
  border-color: var(--green);
  background: rgba(0,192,118,0.08);
  box-shadow: 0 4px 20px rgba(0,192,118,0.25);
}
.down-card.selected {
  border-color: var(--red);
  background: rgba(246,70,93,0.08);
  box-shadow: 0 4px 20px rgba(246,70,93,0.25);
}
.dir-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.up-card .dir-icon { background: rgba(0,192,118,0.12); }
.down-card .dir-icon { background: rgba(246,70,93,0.12); }
.equal-card::before {
  background: linear-gradient(135deg, rgba(142,164,189,0.16) 0%, transparent 100%);
}
.equal-card .dir-icon { background: rgba(142,164,189,0.16); }
.equal-card.selected {
  border-color: #8EA4BD;
  background: rgba(142,164,189,0.1);
  box-shadow: 0 4px 20px rgba(142,164,189,0.22);
}
.dir-label {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
}
.dir-sublabel {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.dir-flat { color: #8EA4BD; }

.markets-favs {
  display: flex;
  gap: 8px;
  padding: 0 16px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.markets-favs::-webkit-scrollbar { display: none; }
.markets-favs.hidden { display: none; }
.fav-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.72);
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.fav-chip .fav-chg.up { color: var(--green); }
.fav-chip .fav-chg.down { color: var(--red); }
.fav-chip .fav-price { color: var(--muted); font-weight: 600; }
.market-row-v2.fav { border-color: rgba(46,174,240,0.28); }

.time-hint {
  text-align: center;
  margin: 0 16px 8px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.confirm-card {
  margin: 8px 16px 24px;
  padding: 20px 18px;
  border-radius: 18px;
}
.confirm-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 14px;
  text-align: center;
}
.confirm-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.confirm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}
.confirm-row b { color: var(--navy); font-size: 14px; font-weight: 800; }
.confirm-row.highlight b { color: var(--green); }
.confirm-card .btn-main { width: 100%; margin-bottom: 8px; }
.confirm-card .btn-ghost { width: 100%; }

.live-price-block {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.live-price-block.up { color: var(--green); }
.live-price-block.down { color: var(--red); }
.live-price-block.flat { color: #8EA4BD; }
.live-now-price.flat { color: #8EA4BD; }
.stat-value.dir.flat { color: #8EA4BD; }

.result-session {
  margin: 10px 0 4px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.qa-btn.qa-all {
  border-color: rgba(46,174,240,0.45);
  color: var(--blue);
}

/* ========== TIME SCREEN ========== */
.time-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 20px;
  margin: 8px 16px 4px;
  background: linear-gradient(135deg, rgba(46,174,240,0.08) 0%, rgba(255,255,255,0.6) 100%);
  border-radius: 14px;
  border: 1px solid rgba(46,174,240,0.15);
}
.ts-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ts-item span { font-size: 11px; color: var(--muted); font-weight: 600; }
.ts-item strong { font-size: 16px; font-weight: 800; color: var(--navy); }
.ts-item strong.dir-up { color: var(--green); }
.ts-item strong.dir-down { color: var(--red); }
.ts-arrow {
  font-size: 18px;
  color: var(--muted);
  font-weight: 700;
}
.time-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px 16px;
}
.time-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-radius: 16px;
  border: 2px solid var(--line);
  background: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.time-card:hover, .time-card.selected {
  border-color: var(--blue);
  background: rgba(46,174,240,0.08);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(46,174,240,0.2);
}
.time-card .tc-duration {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
}
.time-card .tc-mult {
  font-size: 20px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--blue) 0%, #1d8bc8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ========== PROFESSIONAL SIMULATOR ========== */
.simulator-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  margin: 8px 16px;
}
.sim-pair {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
}
.sim-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.timer-ring {
  position: relative;
  width: 44px;
  height: 44px;
}
.timer-ring svg {
  transform: rotate(-90deg);
  width: 44px;
  height: 44px;
}
.timer-bg {
  fill: none;
  stroke: rgba(142,164,189,0.2);
  stroke-width: 3;
}
.timer-progress {
  fill: none;
  stroke: var(--blue);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
}
.timer-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  font-weight: 800;
  color: var(--blue);
}
.sim-timer small {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Futures Simulator */
.futures-simulator {
  position: relative;
  margin: 0 16px 16px;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, #0d1f33 0%, #071626 100%);
  border: 1px solid rgba(46,174,240,0.15);
  overflow: hidden;
}
.futures-simulator::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: 
    linear-gradient(90deg, rgba(46,174,240,0.03) 1px, transparent 1px),
    linear-gradient(rgba(46,174,240,0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
.futures-canvas {
  width: 100%;
  height: 200px;
  border-radius: 8px;
  display: block;
}
.futures-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.entry-marker {
  position: absolute;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(46,174,240,0.15);
  border: 1px solid rgba(46,174,240,0.3);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
}
.entry-dot {
  width: 8px;
  height: 8px;
  background: var(--blue);
  border-radius: 50%;
}
.entry-text {
  font-size: 9px;
  letter-spacing: 0.5px;
}
.entry-value {
  font-size: 11px;
}
.current-marker {
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  transition: all 0.3s ease;
}
.current-arrow {
  font-size: 10px;
}
.current-marker.up .current-arrow { color: var(--green); }
.current-marker.down .current-arrow { color: var(--red); }
.current-marker.up { border-color: rgba(0,192,118,0.4); background: rgba(0,192,118,0.1); }
.current-marker.down { border-color: rgba(246,70,93,0.4); background: rgba(246,70,93,0.1); }

/* Trade Stats */
.trade-stats {
  margin: 0 16px 16px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(142,164,189,0.1);
}
.stat-row:last-child { border-bottom: none; }
.stat-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.stat-value {
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
}
.stat-value.dir { color: var(--blue); }
.stat-value.dir.up { color: var(--green); }
.stat-value.dir.down { color: var(--red); }
.stat-value.pnl { font-size: 16px; }
.stat-value.pnl.positive { color: var(--green); }
.stat-value.pnl.negative { color: var(--red); }
.pnl-row { background: rgba(142,164,189,0.05); margin: 0 -16px; padding: 10px 16px; }

/* Live Status */
.live-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(0,192,118,0.7);
  animation: pulse-green 1.5s infinite;
}
@keyframes pulse-green {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,192,118,0.7); }
  70% { transform: scale(1.5); box-shadow: 0 0 0 10px rgba(0,192,118,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,192,118,0); }
}

/* Animation helpers */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.anim-in { animation: fadeSlideUp 0.4s ease forwards; }
.delay-1 { animation-delay: 0.08s; }
.delay-2 { animation-delay: 0.16s; }
.delay-3 { animation-delay: 0.24s; }

/* Result Screen - Professional Trading Animation */
.result-container {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
}
.result-anim-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.result-anim-bg.win {
  opacity: 1;
  background: 
    radial-gradient(circle at 20% 80%, rgba(0,212,170,0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,215,0,0.08) 0%, transparent 40%),
    radial-gradient(circle at center, rgba(0,212,170,0.1) 0%, transparent 70%);
  animation: winGlow 4s ease-in-out infinite;
}
.result-anim-bg.lose {
  opacity: 1;
  background: 
    radial-gradient(circle at 20% 80%, rgba(139,38,53,0.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(139,38,53,0.08) 0%, transparent 40%),
    radial-gradient(circle at center, rgba(139,38,53,0.05) 0%, transparent 70%);
}
@keyframes winGlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}
.result-card {
  position: relative;
  width: 100%;
  max-width: 340px;
  padding: 40px 28px;
  border-radius: 28px;
  text-align: center;
  z-index: 10;
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(250,252,255,0.9) 100%);
  border: 1px solid rgba(142,164,189,0.15);
  box-shadow: 
    0 20px 60px rgba(0,0,0,0.1),
    0 8px 20px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.8);
}
.result-card.win {
  border-color: rgba(0,212,170,0.4);
  box-shadow: 
    0 20px 60px rgba(0,212,170,0.15),
    0 8px 24px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.1);
  animation: cardWinEntry 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.result-card.lose {
  border-color: rgba(139,38,53,0.4);
  box-shadow: 
    0 20px 60px rgba(139,38,53,0.1),
    0 8px 24px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.1);
  animation: cardEntry 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes cardWinEntry {
  0% { transform: translateY(30px) scale(0.95); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes cardEntry {
  0% { transform: translateY(20px) scale(0.97); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.result-circle {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(240,245,250,0.8) 100%);
  border: 2px solid rgba(255,255,255,0.5);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.1),
    inset 0 2px 4px rgba(255,255,255,0.8);
}

/* EXMO Style Ring Animation */
.result-circle::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(0,212,170,0.3), rgba(255,215,0,0.2), transparent);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.6s ease;
}

.result-card.win .result-circle::before {
  opacity: 1;
  animation: ringPulse 3s ease-in-out infinite;
}

@keyframes ringPulse {
  0%, 100% { transform: rotate(0deg); opacity: 0.6; }
  50% { transform: rotate(180deg); opacity: 1; }
}

/* EXMO Floating Particles */
.crypto-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.crypto-particles::before,
.crypto-particles::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0;
}

.result-card.win .crypto-particles::before {
  background: radial-gradient(circle, rgba(0,212,170,0.8) 0%, transparent 70%);
  left: 25%;
  top: 35%;
  animation: particleFloat 4s ease-in-out infinite;
  animation-delay: 0.3s;
}

.result-card.win .crypto-particles::after {
  background: radial-gradient(circle, rgba(255,215,0,0.6) 0%, transparent 70%);
  right: 30%;
  top: 45%;
  animation: particleFloat 4s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes particleFloat {
  0%, 100% { 
    opacity: 0; 
    transform: translateY(10px) scale(0.5); 
  }
  50% { 
    opacity: 0.8; 
    transform: translateY(-20px) scale(1); 
  }
}

/* EXMO Grid Background */
.blockchain-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(0,212,170,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,170,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0;
  transition: opacity 1s ease;
}

.result-card.win .blockchain-grid {
  opacity: 1;
  animation: gridPulse 6s ease-in-out infinite;
}

@keyframes gridPulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.4; }
}
.result-card.win .result-circle {
  background: linear-gradient(135deg, rgba(0,212,170,0.08) 0%, rgba(0,212,170,0.15) 100%);
  border-color: rgba(0,212,170,0.5);
  box-shadow: 
    0 0 0 3px rgba(0,212,170,0.08),
    0 0 50px rgba(0,212,170,0.2),
    inset 0 1px 2px rgba(255,255,255,0.1);
  animation: winCircleEntry 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.result-card.lose .result-circle {
  background: linear-gradient(135deg, rgba(139,38,53,0.08) 0%, rgba(139,38,53,0.15) 100%);
  border-color: rgba(139,38,53,0.5);
  box-shadow: 
    0 0 0 3px rgba(139,38,53,0.08),
    0 0 40px rgba(139,38,53,0.15),
    inset 0 1px 2px rgba(255,255,255,0.1);
  animation: loseCircleEntry 0.5s ease;
}
@keyframes winCircleEntry {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes loseCircleEntry {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.result-icon {
  font-size: 56px;
  font-weight: 300;
  line-height: 1;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.result-icon svg {
  width: 56px;
  height: 56px;
}
.result-card.win .result-icon { 
  color: #00D4AA; 
  animation: iconWinPop 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
.result-card.win .result-icon svg circle {
  stroke: #00D4AA;
}
.result-card.win .result-icon svg path {
  stroke: #00D4AA;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: checkDraw 0.4s ease forwards 0.3s;
}
@keyframes checkDraw {
  to { stroke-dashoffset: 0; }
}
.result-card.lose .result-icon { 
  color: #8B2635; 
  animation: iconLosePop 0.4s ease 0.15s both;
}
.result-card.lose .result-icon svg circle {
  stroke: #8B2635;
}
.result-card.lose .result-icon svg path {
  stroke: #8B2635;
  d: path("M17 17L31 31M31 17L17 31");
}
@keyframes iconWinPop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes iconLosePop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.result-ripple {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid transparent;
  opacity: 0;
}
.result-card.win .result-ripple {
  animation: rippleMulti 3s ease-out infinite;
  border-color: rgba(0,212,170,0.3);
}
.result-card.win .result-ripple::before,
.result-card.win .result-ripple::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 50%;
  border: 2px solid rgba(0,212,170,0.2);
  animation: rippleMulti 3s ease-out infinite;
  animation-delay: 0.8s;
}
.result-card.win .result-ripple::after {
  animation-delay: 1.6s;
}
@keyframes rippleMulti {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}
.result-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.result-card.win .result-title { 
  color: #00D4AA; 
  animation: fadeSlideUp 0.4s ease 0.3s both;
}
.result-card.lose .result-title { 
  color: #8B2635; 
  animation: fadeSlideUp 0.3s ease 0.25s both;
}
.result-amount {
  font-size: 48px;
  font-weight: 900;
  margin-bottom: 20px;
  line-height: 1.1;
  transition: all 0.5s ease;
}
.result-card.win .result-amount {
  color: #00D4AA;
  animation: amountWinPop 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
  text-shadow: 0 2px 16px rgba(0,212,170,0.25);
}
.result-card.lose .result-amount {
  color: #8B2635;
  animation: amountLosePop 0.5s ease 0.25s both;
}
@keyframes amountWinPop {
  0% { transform: scale(0.8) translateY(10px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes amountLosePop {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.result-balance-line {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 28px;
  padding: 14px 18px;
  background: rgba(142,164,189,0.06);
  border-radius: 14px;
  border: 1px solid rgba(142,164,189,0.1);
  animation: fadeSlideUp 0.5s ease 0.6s both;
}
.result-balance-line b {
  color: var(--navy);
  font-weight: 800;
}
.result-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: fadeSlideUp 0.5s ease 0.7s both;
}
.btn-lg {
  padding: 18px 28px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 14px;
}
.result-card.win .btn-lg {
  background: linear-gradient(135deg, var(--green) 0%, #00a060 100%);
  box-shadow: 0 4px 20px rgba(0,192,118,0.4);
}
/* Crypto elements for win - Bitcoin symbols */
.result-card.win::before {
  content: '₿';
  position: absolute;
  top: -15px;
  right: 25px;
  font-size: 48px;
  font-weight: 900;
  color: rgba(247, 147, 26, 0.8);
  text-shadow: 0 0 30px rgba(247, 147, 26, 0.5);
  animation: cryptoDrop 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both;
}
.result-card.win::after {
  content: 'Ξ';
  position: absolute;
  top: 15px;
  left: 25px;
  font-size: 36px;
  font-weight: 900;
  color: rgba(98, 126, 234, 0.7);
  text-shadow: 0 0 20px rgba(98, 126, 234, 0.4);
  animation: cryptoDrop 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s both;
}
/* Additional crypto floating elements */
.result-card.win .crypto-float-1,
.result-card.win .crypto-float-2,
.result-card.win .crypto-float-3 {
  position: absolute;
  font-size: 24px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
}
.result-card.win .crypto-float-1 {
  content: '◈';
  top: 10%;
  left: 10%;
  color: rgba(0, 192, 118, 0.6);
  animation: cryptoFloat 3s ease-in-out infinite;
  animation-delay: 0.5s;
}
.result-card.win .crypto-float-2 {
  content: '◉';
  top: 20%;
  right: 15%;
  color: rgba(247, 147, 26, 0.5);
  animation: cryptoFloat 3s ease-in-out infinite;
  animation-delay: 1s;
}
.result-card.win .crypto-float-3 {
  content: '◎';
  bottom: 20%;
  left: 20%;
  color: rgba(98, 126, 234, 0.5);
  animation: cryptoFloat 3s ease-in-out infinite;
  animation-delay: 1.5s;
}
@keyframes cryptoDrop {
  0% { transform: translateY(-60px) rotate(-200deg) scale(0); opacity: 0; }
  60% { transform: translateY(5px) rotate(10deg) scale(1.1); opacity: 1; }
  80% { transform: translateY(-2px) rotate(-5deg) scale(0.98); }
  100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
}
@keyframes cryptoFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
  50% { transform: translateY(-20px) rotate(180deg); opacity: 0.8; }
}

/* Receipt Upload */
.receipt-section {
  margin: 16px 0;
  padding: 0 16px;
}
.receipt-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(0,192,118,0.08) 0%, rgba(0,192,118,0.04) 100%);
  border: 1px solid rgba(0,192,118,0.2);
  border-radius: 12px;
  margin-bottom: 12px;
}
.receipt-notice-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.receipt-notice-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
  line-height: 1.4;
}
.receipt-upload {
  margin-bottom: 12px;
}
.receipt-input {
  display: none;
}
.receipt-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  background: rgba(46,174,240,0.08);
  border: 2px dashed rgba(46,174,240,0.3);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.receipt-label:hover {
  background: rgba(46,174,240,0.12);
  border-color: rgba(46,174,240,0.5);
}
.receipt-icon {
  font-size: 20px;
}
.receipt-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
}
.receipt-preview {
  position: relative;
  margin-top: 12px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.receipt-preview img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  display: block;
}
.receipt-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(246,70,93,0.9);
  color: white;
  border: none;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-verify {
  width: 100%;
  margin-top: 8px;
  background: linear-gradient(135deg, var(--green) 0%, #00a060 100%);
}
.btn-verify:disabled {
  background: rgba(142,164,189,0.3);
  cursor: not-allowed;
}
.btn-verify.sent {
  background: linear-gradient(135deg, var(--blue) 0%, #1a7bb7 100%);
}

/* FIX: Круглые иконки мемкоинов и топ движений */
.ex-token-top .coin-icon,
.ex-mover-top .coin-icon,
.ex-token-card .coin-icon,
.ex-mover-card .coin-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
}
.ex-token-top .coin-icon img,
.ex-mover-top .coin-icon img,
.ex-token-card .coin-icon img,
.ex-mover-card .coin-icon img {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}