/* Cryptoard v7 — Lumen Pro */
@import url('base.css');
@import url('components.css');

:root {
  --bg: #0f1419;
  --bg2: #151b24;
  --card: #1a2230;
  --card2: #141a24;
  --border: rgba(255, 255, 255, 0.08);
  --border-gold: rgba(229, 192, 72, 0.35);
  --text: #f4f6fa;
  --muted: #8b95a8;
  --muted2: #5c6578;
  --gold: #e5c048;
  --gold-dim: #b8942e;
  --gold-glow: rgba(229, 192, 72, 0.18);
  --green: #3dd68c;
  --green-bg: rgba(61, 214, 140, 0.12);
  --red: #f07178;
  --red-bg: rgba(240, 113, 120, 0.12);
  --blue: #6eb6ff;
  --violet: #a78bfa;
  --radius: 18px;
  --radius-sm: 12px;
  --nav-h: 62px;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
}

body.cr-pro {
  font-family: var(--sans);
  background: var(--bg);
  letter-spacing: -0.01em;
}

body.cr-pro::before {
  background:
    radial-gradient(ellipse 100% 60% at 50% -20%, rgba(229, 192, 72, 0.2), transparent 58%),
    radial-gradient(ellipse 55% 45% at 100% 75%, rgba(110, 182, 255, 0.14), transparent 50%),
    radial-gradient(ellipse 50% 40% at 0% 55%, rgba(167, 139, 250, 0.12), transparent 55%),
    var(--bg2) !important;
  background-size: auto !important;
  animation: crAurora 14s ease-in-out infinite alternate;
}

body.cr-pro::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.45;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  animation: crNoise 8s steps(4) infinite;
}

@keyframes crNoise {
  0%, 100% { opacity: 0.38; }
  50% { opacity: 0.52; }
}

@keyframes crAurora {
  0% { opacity: 0.9; filter: hue-rotate(0deg) brightness(1); }
  50% { opacity: 1; filter: hue-rotate(12deg) brightness(1.08); }
  100% { opacity: 0.94; filter: hue-rotate(-10deg) brightness(1.02); }
}

/* Ambient background layer */
.bg-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1s ease;
}
body.cr-pro .bg-ambient:not(.hidden) {
  opacity: 1;
}
#bgAmbientCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.88;
}
.bg-orbs { position: absolute; inset: 0; }
.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  will-change: transform;
}
.bg-orb-gold {
  width: min(85vw, 380px);
  height: min(85vw, 380px);
  top: -15%;
  left: -22%;
  background: rgba(229, 192, 72, 0.48);
  animation: crOrbDriftA 18s ease-in-out infinite;
}
.bg-orb-blue {
  width: min(75vw, 340px);
  height: min(75vw, 340px);
  bottom: 5%;
  right: -25%;
  background: rgba(110, 182, 255, 0.35);
  animation: crOrbDriftB 22s ease-in-out infinite;
  animation-delay: -9s;
}
.bg-orb-violet {
  width: min(58vw, 260px);
  height: min(58vw, 260px);
  top: 40%;
  left: 50%;
  background: rgba(167, 139, 250, 0.28);
  animation: crOrbDriftC 16s ease-in-out infinite;
  animation-delay: -14s;
}
@keyframes crOrbDriftA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40% { transform: translate(48px, 36px) scale(1.15); }
  70% { transform: translate(-28px, 52px) scale(0.92); }
}
@keyframes crOrbDriftB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  35% { transform: translate(-44px, -48px) scale(1.12); }
  65% { transform: translate(32px, -24px) scale(0.94); }
}
@keyframes crOrbDriftC {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-52px, 38px) scale(1.18); }
}
.bg-grid {
  position: absolute;
  inset: -40%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: crGridPan 32s linear infinite;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 15%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 15%, transparent 75%);
  opacity: 1;
}
@keyframes crGridPan {
  from { transform: translate(0, 0); }
  to { transform: translate(40px, 40px); }
}
.bg-shimmer {
  position: absolute;
  left: -60%;
  width: 220%;
  height: 2px;
  top: 22%;
  background: linear-gradient(90deg, transparent, rgba(229, 192, 72, 0.45), transparent);
  animation: crShimmerPass 6s ease-in-out infinite;
  opacity: 0.85;
}
.bg-shimmer::after {
  content: '';
  position: absolute;
  left: 0;
  top: 38vh;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(110, 182, 255, 0.28), transparent);
  animation: crShimmerPass 8s ease-in-out infinite reverse;
  animation-delay: -3s;
}
@keyframes crShimmerPass {
  0% { transform: translateX(-12%) rotate(-2deg); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 0.75; }
  100% { transform: translateX(45%) rotate(-2deg); opacity: 0; }
}
body.cr-pro .app {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  body.cr-pro::before,
  body.cr-pro::after,
  .bg-orb,
  .bg-grid,
  .bg-shimmer,
  .bg-shimmer::after {
    animation: none !important;
  }
  #bgAmbientCanvas { display: none; }
  .balance-value.pos,
  .balance-value.neg { animation: none !important; }
}

/* Header */
body.cr-pro #legacyHeader {
  display: flex !important;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
body.cr-pro #legacyHeader .logo {
  background: linear-gradient(145deg, #fff0b3, var(--gold), var(--gold-dim));
  box-shadow: 0 4px 18px var(--gold-glow);
  color: #1a1400;
}
body.cr-pro #legacyHeader .app-title {
  font-weight: 800;
  letter-spacing: -0.03em;
}
body.cr-pro #legacyHeader .header-status.live {
  color: var(--green);
  border-color: rgba(61, 214, 140, 0.35);
  background: var(--green-bg);
}
body.cr-pro #statusRail { display: none !important; }
body.cr-pro .app.has-nav { padding-left: 18px; padding-right: 18px; }

.view-root { min-height: 40vh; }
.view-home { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }

/* Balance hero */
.balance-hero {
  position: relative;
  overflow: hidden;
  padding: 22px 20px 20px;
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(26, 34, 48, 0.96) 0%, rgba(18, 24, 34, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.4s, box-shadow 0.4s;
}
.balance-hero.is-live {
  border-color: rgba(61, 214, 140, 0.35);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.35),
    0 0 48px rgba(61, 214, 140, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.balance-hero.hero-reveal {
  animation: balanceHeroReveal 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes balanceHeroReveal {
  0% { transform: scale(0.98); }
  45% { transform: scale(1.012); }
  100% { transform: scale(1); }
}
.balance-hero-glow {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(
    from 180deg,
    transparent,
    rgba(229, 192, 72, 0.55),
    transparent,
    rgba(61, 214, 140, 0.45),
    transparent
  );
  animation: balanceBorderSpin 7s linear infinite;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 1px;
  transition: opacity 0.35s;
}
.balance-hero.is-live .balance-hero-glow { opacity: 0.85; }
.balance-hero-glow.ring-flash {
  opacity: 1;
  animation: balanceBorderSpin 7s linear infinite, balanceRingFlash 0.9s ease;
}
@keyframes balanceBorderSpin {
  to { transform: rotate(360deg); }
}
@keyframes balanceRingFlash {
  0% { filter: brightness(1); }
  40% { filter: brightness(1.6); }
  100% { filter: brightness(1); }
}
.balance-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(229, 192, 72, 0.18), transparent 55%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(110, 182, 255, 0.1), transparent 50%);
  animation: balanceBgPulse 6s ease-in-out infinite alternate;
}
.balance-hero.is-live .balance-hero-bg {
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(61, 214, 140, 0.16), transparent 55%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(229, 192, 72, 0.1), transparent 50%);
}
@keyframes balanceBgPulse {
  0% { opacity: 0.75; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.04); }
}
.balance-hero-inner {
  position: relative;
  z-index: 1;
}
.balance-hero-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.balance-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.balance-live {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}
.balance-live.on {
  color: var(--green);
  border-color: rgba(61, 214, 140, 0.35);
  background: var(--green-bg);
}
.balance-live.on .dot,
.balance-live.on::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(61, 214, 140, 0.8);
  animation: balanceLiveDot 2s ease infinite;
  margin-right: 5px;
  vertical-align: middle;
}
@keyframes balanceLiveDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}
.balance-live.off {
  color: var(--red);
  border-color: rgba(240, 113, 120, 0.3);
  background: var(--red-bg);
}
.balance-value-row {
  position: relative;
  margin: 4px 0 2px;
}
.balance-value-row::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 40px;
  background: radial-gradient(ellipse 60% 100% at 20% 100%, rgba(61, 214, 140, 0.12), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}
.balance-hero.is-live .balance-value-row::after { opacity: 1; }
.balance-value {
  font-size: clamp(40px, 12vw, 52px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.02;
  cursor: pointer;
  display: inline-block;
  transform-origin: left center;
}
.balance-value.pos {
  color: var(--green);
  text-shadow: 0 0 40px rgba(61, 214, 140, 0.35);
  animation: balanceValueGlowPos 3s ease-in-out infinite;
}
.balance-value.neg {
  color: var(--red);
  text-shadow: 0 0 40px rgba(240, 113, 120, 0.3);
  animation: balanceValueGlowNeg 3s ease-in-out infinite;
}
@keyframes balanceValueGlowPos {
  0%, 100% { text-shadow: 0 0 28px rgba(61, 214, 140, 0.28); }
  50% { text-shadow: 0 0 56px rgba(61, 214, 140, 0.5), 0 4px 24px rgba(61, 214, 140, 0.2); }
}
@keyframes balanceValueGlowNeg {
  0%, 100% { text-shadow: 0 0 28px rgba(240, 113, 120, 0.25); }
  50% { text-shadow: 0 0 52px rgba(240, 113, 120, 0.42), 0 4px 24px rgba(240, 113, 120, 0.18); }
}
.balance-value.pnl-pop {
  animation: balancePnlPop 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.balance-value.is-counting.pnl-pop {
  animation: balancePnlPop 0.9s cubic-bezier(0.22, 1, 0.36, 1), balanceValueGlowPos 3s ease-in-out infinite;
}
.balance-value.is-counting.pnl-pop.neg {
  animation: balancePnlPop 0.9s cubic-bezier(0.22, 1, 0.36, 1), balanceValueGlowNeg 3s ease-in-out infinite;
}
@keyframes balancePnlPop {
  0% { transform: scale(0.82); opacity: 0.45; filter: blur(6px); }
  55% { transform: scale(1.07); opacity: 1; filter: blur(0); }
  100% { transform: scale(1); opacity: 1; filter: none; }
}
.balance-chart {
  margin-top: 18px;
  height: 84px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 8px 10px;
  overflow: hidden;
}
.balance-chart svg { width: 100%; height: 100%; display: block; }
.balance-hint {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.balance-hint .tap-hint { color: var(--gold); font-weight: 600; }

.balance-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.balance-tile {
  padding: 14px 12px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  width: auto;
  transition: border-color 0.15s, transform 0.15s;
}
.balance-tile:active {
  transform: scale(0.98);
  border-color: var(--border-gold);
}
.balance-tile .t-lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.balance-tile .t-val {
  font-size: 15px;
  font-weight: 700;
  margin-top: 6px;
  color: var(--text);
  letter-spacing: -0.02em;
}
.balance-tile .t-val.warn { color: var(--red); }

.balance-stats {
  display: flex;
  border-radius: 16px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--card2);
}
.balance-stat {
  flex: 1;
  text-align: center;
  padding: 13px 8px;
  border-right: 1px solid var(--border);
}
.balance-stat:last-child { border-right: none; }
.balance-stat .s-lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.balance-stat .s-val {
  font-size: 15px;
  font-weight: 700;
  margin-top: 4px;
  color: var(--text);
}

.spark-empty {
  height: 100%;
  min-height: 48px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Cards & sections */
body.cr-pro .section-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
body.cr-pro .section-card .section-head h2 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
body.cr-pro .action-banner {
  border-radius: 14px;
  border: 1px solid rgba(240, 113, 120, 0.25);
  background: var(--red-bg);
}
body.cr-pro .action-banner.ok-banner {
  border-color: rgba(61, 214, 140, 0.25);
  background: var(--green-bg);
}
body.cr-pro .action-banner.warn-banner {
  border-color: var(--border-gold);
  background: rgba(229, 192, 72, 0.08);
}
body.cr-pro .readiness-panel {
  border-radius: 16px;
  background: var(--card2);
  border: 1px solid var(--border);
}
body.cr-pro .readiness-bar-fill {
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
}
body.cr-pro .trade-card {
  border-radius: 14px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-left-width: 3px;
}
body.cr-pro .last-trade-hero {
  border-radius: 14px;
  background: var(--green-bg);
  border: 1px solid rgba(61, 214, 140, 0.2);
}
body.cr-pro .last-trade-hero.sell {
  background: var(--red-bg);
  border-color: rgba(240, 113, 120, 0.2);
}
body.cr-pro .leader-item.selected {
  border-color: var(--border-gold);
  background: rgba(229, 192, 72, 0.05);
}
body.cr-pro .pnl-hero-card {
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(26, 34, 48, 0.98), rgba(18, 24, 34, 0.98));
  border: 1px solid var(--border);
}
body.cr-pro .pnl-period-tabs button.active {
  background: rgba(229, 192, 72, 0.12);
  border-color: var(--border-gold);
  color: var(--gold);
}

/* Nav & FAB */
body.cr-pro .bottom-nav {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 460px;
  border-radius: 20px;
  background: rgba(20, 26, 36, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  min-height: calc(var(--nav-h) - 10px);
  padding: 6px 4px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
}
body.cr-pro .nav-pill {
  background: rgba(229, 192, 72, 0.14);
  border: 1px solid rgba(229, 192, 72, 0.28);
  border-radius: 14px;
}
body.cr-pro .nav-item.active { color: var(--gold); }
body.cr-pro .fab-primary {
  border-radius: 16px;
  background: linear-gradient(145deg, #fff0b3, var(--gold), var(--gold-dim));
  color: #1a1400;
  box-shadow: 0 8px 28px var(--gold-glow);
  font-weight: 800;
}
body.cr-pro .fab-primary.pause-mode {
  background: linear-gradient(145deg, rgba(240, 113, 120, 0.45), rgba(240, 113, 120, 0.15));
  color: #fff;
  box-shadow: 0 8px 24px rgba(240, 113, 120, 0.2);
}
body.cr-pro #primaryBtn,
body.cr-pro .card button:not(.ghost):not(.secondary) {
  background: linear-gradient(145deg, #fff0b3, var(--gold), var(--gold-dim));
  color: #1a1400;
  box-shadow: 0 4px 18px var(--gold-glow);
}
body.cr-pro .section-head button,
body.cr-pro .leader-more,
body.cr-pro .copy-btn,
body.cr-pro button.ghost { color: var(--gold); border-color: var(--border-gold); }

body.cr-pro .welcome-splash {
  background: radial-gradient(ellipse 90% 70% at 50% 20%, rgba(229, 192, 72, 0.12), transparent 55%), var(--bg);
}
body.cr-pro .splash-logo {
  background: linear-gradient(145deg, #fff0b3, var(--gold), var(--gold-dim));
  box-shadow: 0 12px 40px var(--gold-glow);
}
body.cr-pro .splash-title {
  background: linear-gradient(135deg, #fff 25%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* legacy class aliases */
.pnl-terminal, .view-overview, .metric-grid, .deck-stats { display: contents; }

/* Hero actions */
.balance-hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  font-size: 15px;
  line-height: 1;
  padding: 0;
  box-shadow: none;
  cursor: pointer;
}
.hero-icon-btn:active {
  border-color: var(--border-gold);
  background: rgba(229, 192, 72, 0.1);
}
.balance-trial {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 99px;
  color: var(--gold);
  border: 1px solid var(--border-gold);
  background: rgba(229, 192, 72, 0.1);
}
.pnl-tab-hero { margin-bottom: 14px; }
.spark-line-draw { transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1); }

/* Nav badge */
.nav-item { position: relative; }
.nav-badge-dot {
  position: absolute;
  top: 2px;
  right: 8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(240, 113, 120, 0.45);
}
.nav-badge-dot.hidden { display: none !important; }

/* Stale banner */
.stale-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
  border-radius: 12px;
  border: 1px solid rgba(229, 192, 72, 0.25);
  background: rgba(229, 192, 72, 0.08);
  font-size: 12px;
  color: var(--muted);
}
.stale-banner button {
  width: auto;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 8px;
  background: rgba(229, 192, 72, 0.15);
  color: var(--gold);
  box-shadow: none;
}

/* Referral home */
.referral-home-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--border-gold);
  background: rgba(229, 192, 72, 0.06);
}
.referral-home-text { flex: 1; min-width: 0; }
.referral-home-text strong { display: block; font-size: 14px; margin-bottom: 2px; }
.referral-home-text span { font-size: 12px; color: var(--muted); }

/* Trade toast */
.trade-toast {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 32px);
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(20, 26, 36, 0.96);
  border: 1px solid rgba(61, 214, 140, 0.3);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s;
  opacity: 0;
}
.trade-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.trade-toast .tt-side {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--green);
  flex-shrink: 0;
}
.trade-toast .tt-title {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.trade-toast .tt-amt {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  flex-shrink: 0;
}

/* Pull to refresh */
.pull-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  transition: transform 0.15s ease, opacity 0.2s;
}
.pull-hint.hidden { display: none !important; }
.pull-hint.pull-ready { color: var(--gold); }
.pull-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(229, 192, 72, 0.25);
  border-top-color: var(--gold);
  animation: pullSpin 0.8s linear infinite;
}
.pull-hint.pull-loading .pull-spinner {
  animation-duration: 0.55s;
}
@keyframes pullSpin { to { transform: rotate(360deg); } }

/* Wizard v7 theme */
body.cr-wizard-pro {
  background: var(--bg);
}
body.cr-wizard-pro::before {
  background:
    radial-gradient(ellipse 90% 55% at 50% -15%, rgba(229, 192, 72, 0.14), transparent 58%),
    var(--bg2) !important;
}
body.cr-wizard-pro .progress-bar {
  background: linear-gradient(90deg, var(--gold-dim), var(--gold), #fff0b3);
}
body.cr-wizard-pro .step-dot.active {
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold-glow);
}
body.cr-wizard-pro #primaryBtn {
  background: linear-gradient(145deg, #fff0b3, var(--gold), var(--gold-dim));
  color: #1a1400;
  box-shadow: 0 4px 18px var(--gold-glow);
}
body.cr-wizard-pro .card {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(26, 34, 48, 0.92);
}
body.cr-wizard-pro .logo {
  background: linear-gradient(145deg, #fff0b3, var(--gold), var(--gold-dim));
  color: #1a1400;
}

/* BTC 5m tab */
.view-btc5m { padding-bottom: 8px; }
.btc5m-hero { text-align: center; margin-bottom: 14px; }
.btc5m-countdown {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--gold);
  line-height: 1.1;
  margin: 6px 0;
}
.btc5m-window-title { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.35; }
.btc5m-asset-scan {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
}
.btc5m-asset-pill {
  font-size: 11px; padding: 4px 8px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
}
.btc5m-asset-pill.ok { border-color: rgba(110,231,168,0.35); color: #6ee7a8; }
.btc5m-asset-pill.skip { color: var(--muted); }
.btc5m-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0;
}
.btc5m-metrics .k { display: block; font-size: 11px; color: var(--muted); }
.btc5m-metrics .v { font-size: 14px; font-weight: 600; }
.btc5m-book {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.btc5m-stake-chips, .btc5m-side-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.btc5m-chip {
  width: auto;
  min-width: 52px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.btc5m-chip.active {
  border-color: rgba(229, 192, 72, 0.45);
  background: rgba(229, 192, 72, 0.12);
  color: var(--gold);
}
.btc5m-chip.side.active.up { color: #6ee7a8; border-color: rgba(110,231,168,0.4); background: rgba(110,231,168,0.1); }
.btc5m-chip.side.active.down { color: #f87171; border-color: rgba(248,113,113,0.4); background: rgba(248,113,113,0.1); }
.btc5m-summary { font-size: 14px; line-height: 1.5; }
.btc5m-auto-card { border: 1px solid rgba(255,255,255,0.08); transition: border-color 0.2s, box-shadow 0.2s; }
.btc5m-auto-card.on {
  border-color: rgba(212,175,55,0.45);
  box-shadow: 0 0 0 1px rgba(212,175,55,0.12) inset;
}
.btc5m-auto-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.btc5m-auto-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.btc5m-auto-box {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.2);
  position: relative;
}
.btc5m-auto-toggle input:checked + .btc5m-auto-box {
  border-color: var(--gold);
  background: rgba(212,175,55,0.2);
}
.btc5m-auto-toggle input:checked + .btc5m-auto-box::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--gold);
}
.btc5m-auto-text { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.35; }
.btc5m-auto-status {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.35;
}
.btc5m-auto-status.wait {
  background: rgba(212,175,55,0.1);
  color: #f5d98a;
}
.btc5m-auto-status.done {
  background: rgba(110,231,168,0.1);
  color: #6ee7a8;
}
.btc5m-auto-status.skip {
  background: rgba(148,163,184,0.12);
  color: #94a3b8;
}
.btc5m-auto-status.pause {
  background: rgba(251,191,36,0.12);
  color: #fbbf24;
}
.btc5m-auto-hint { margin-top: 10px; font-size: 12px; }
.btc5m-bet-btn {
  width: 100%;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: none;
  font-size: 15px;
  font-weight: 700;
  background: linear-gradient(145deg, #fff0b3, var(--gold), var(--gold-dim));
  color: #1a1400;
  box-shadow: 0 4px 18px var(--gold-glow);
}
.btc5m-bet-btn:disabled { opacity: 0.45; box-shadow: none; }
.btc5m-history { display: flex; flex-direction: column; gap: 8px; }
.btc5m-hist-row {
  display: grid;
  grid-template-columns: 52px 48px 1fr;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
}
.btc5m-hist-side { font-weight: 800; font-size: 11px; }
.btc5m-hist-side.up { color: #6ee7a8; }
.btc5m-hist-side.down { color: #f87171; }
.btc5m-hist-q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.cr-pro .bottom-nav.crypto5m-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
body.cr-pro .bottom-nav.crypto5m-nav .nav-item span:last-child { font-size: 10px; }
body.cr-pro .bottom-nav.crypto5m-nav .nav-icon { font-size: 16px; font-weight: 700; }
.btc5m-mode-card { padding-bottom: 12px; }
.btc5m-mode-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btc5m-mode-btn {
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  border-radius: 12px;
  padding: 10px 8px;
  font-weight: 600;
  font-size: 13px;
}
.btc5m-mode-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(212,175,55,0.12); }
.btc5m-mode-hint { font-size: 12px; margin-top: 8px; }
.btc5m-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.btc5m-stat-grid .k { display: block; font-size: 11px; color: var(--text-muted); }
.btc5m-stat-grid .v { font-size: 18px; font-weight: 700; }
.btc5m-stat-grid.compact .v { font-size: 15px; }
.btc5m-period-block { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); }
.btc5m-period-block:first-of-type { border-top: none; padding-top: 0; }
.btc5m-period-title { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.btc5m-tp-toggle { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; }
.btc5m-tp-toggle input { width: 18px; height: 18px; }
.btc5m-skip-history .btc5m-hist-row.skip { opacity: 0.92; border-left: 2px solid rgba(251,191,36,0.45); }
.btc5m-asset-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 12px;
}
.btc5m-stat-pill {
  padding: 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.btc5m-stat-pill.active { border: 1px solid rgba(212,175,55,0.4); }
.btc5m-mode-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
}
.btc5m-mode-badge.dry { background: rgba(96,165,250,0.15); color: #93c5fd; }
.btc5m-mode-badge.live { background: rgba(110,231,168,0.15); color: #6ee7a8; }
.tip.warn { border-color: rgba(248,113,113,0.35); background: rgba(248,113,113,0.08); color: #fca5a5; }

/* Admin panel (miniapp) */
body.cr-pro.admin-visible .bottom-nav.crypto5m-nav {
  grid-template-columns: repeat(6, 1fr);
}
body.cr-pro.admin-visible .bottom-nav.crypto5m-nav .nav-item span:last-child { font-size: 9px; }
.view-admin { display: flex; flex-direction: column; gap: 12px; }
.admin-subnav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.admin-subnav-btn {
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
}
.admin-subnav-btn.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(212,175,55,0.12);
}
.admin-hero { text-align: center; padding: 18px 14px; }
.admin-hero-kicker { font-size: 12px; color: var(--gold); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.admin-hero-val { font-size: 32px; font-weight: 800; margin: 6px 0 4px; }
.admin-services.ok { border-color: rgba(110,231,168,0.35); }
.admin-services.warn { border-color: rgba(251,191,36,0.35); }
.admin-checks { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.admin-check-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.admin-check-row:last-child { border-bottom: none; }
.admin-problem-row {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
  cursor: pointer;
}
.admin-problem-row:last-child { border-bottom: none; }
.admin-problem-row b { display: block; margin-bottom: 4px; }
.admin-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-search {
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-size: 14px;
}
.admin-user-list { display: flex; flex-direction: column; gap: 8px; }
.admin-user-row {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  padding: 12px;
  color: inherit;
}
.admin-user-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.admin-user-sub { font-size: 12px; margin-top: 6px; }
.admin-back {
  align-self: flex-start;
  border: none;
  background: transparent;
  color: var(--gold);
  font-size: 14px;
  font-weight: 600;
  padding: 4px 0 8px;
}
.admin-actions { display: flex; flex-direction: column; gap: 8px; }
.admin-trade-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  grid-template-columns: none;
}
.admin-trade-row b { font-size: 12px; }