/* ==================================================================
   OST v3 — Deep Space Theme
   ================================================================== */

/* --- VARIABLES --- */
:root {
  --bg: #06080f;
  --bg-alt: #0c0f1a;
  --surface: #111627;
  --surface2: #171d32;
  --text: #e4e7f1;
  --text-muted: #8b92ad;
  --accent: #6d9fff;
  --accent2: #a78bfa;
  --warm: #f5c468;
  --success: #34d399;
  --danger: #ef4444;
  --border: rgba(109,159,255,.15);
  --glow: 0 0 30px rgba(109,159,255,.12);
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --radius: 16px;
  --radius-sm: 10px;
}

/* --- RESET --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  min-height: 100dvh;
  margin: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow-x: hidden;
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
  min-height: 100dvh;
  margin: 0;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent), var(--accent2)); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

a { color: var(--accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent2); }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; font-family: inherit; }
button:not(.topup-modal-close),
.nav-links a,
.game-card,
.topup-card,
.topup-tier,
.converter-tab,
.converter-btn {
  min-height: 48px;
}
input, select, textarea { font-family: inherit; font-size: 16px; }

/* --- UTILITIES --- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.text-muted { color: var(--text-muted); }
.gradient-text { background: linear-gradient(135deg, var(--accent), var(--accent2), var(--warm)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% 200%; animation: gradient-shift 3s ease infinite; }
@keyframes gradient-shift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
code { background: var(--surface); padding: 2px 8px; border-radius: 6px; font-size: .9em; color: var(--accent); }

/* --- GLOBAL 3D PERSPECTIVE --- */
.section { perspective: 1200px; }

/* --- ENHANCED SCROLL REVEAL --- */
.sr {
  opacity: 0;
  transform: translateY(32px) scale(0.97);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.sr.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.sr-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.sr-left.visible { opacity: 1; transform: translateX(0); }
.sr-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.sr-right.visible { opacity: 1; transform: translateX(0); }

/* --- 3D TILT CARDS --- */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform .15s ease-out, box-shadow .3s ease;
  will-change: transform;
}
.tilt-card:hover {
  box-shadow: 0 20px 60px rgba(109,159,255,.12), 0 0 40px rgba(167,139,250,.06);
}
.tilt-card .tilt-inner {
  transform: translateZ(20px);
  transition: transform .3s ease;
}
.tilt-card:hover .tilt-inner {
  transform: translateZ(30px);
}

/* --- BUTTONS --- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--radius-sm); font-weight: 600; font-size: .95rem;
  transition: all .25s cubic-bezier(.16,1,.3,1); border: none; text-align: center;
  position: relative; overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,.25) 0%, transparent 60%);
  opacity: 0; transition: opacity .4s;
}
.btn:active::after { opacity: 1; transition: opacity 0s; }
.btn:active { transform: scale(0.96); }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; }
.btn-primary:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 40px rgba(109,159,255,.35); color: #fff; }
.btn-outline { background: transparent; border: 1.5px solid var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(109,159,255,.12); }
.btn-glow { box-shadow: 0 0 24px rgba(109,159,255,.2); }
.btn-glow:hover { box-shadow: 0 0 50px rgba(109,159,255,.4), 0 12px 40px rgba(109,159,255,.2); }

/* --- NAV --- */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(6,8,15,.85); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border); transition: background .3s;
}
.nav-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; height: 64px;
}
.logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.3rem; color: var(--text); }
.logo:hover { color: var(--accent); }
.logo-icon { color: var(--accent); font-size: 1.5rem; }
.nav-links { display: flex; gap: 6px; }
.nav-links a {
  padding: 6px 12px; border-radius: 8px; font-size: .85rem; font-weight: 500;
  color: var(--text-muted); transition: all .2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); background: var(--surface); }
.nav-right { display: flex; align-items: center; gap: 12px; }

/* Wallet button */
.wallet-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; font-weight: 600; font-size: .85rem; transition: all .25s;
}
.wallet-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(109,159,255,.3); }
.wallet-btn.connected { background: linear-gradient(135deg, var(--success), #22c55e); }
.wallet-icon { font-size: 1.1rem; }

/* Lang */
.lang-dropdown { position: relative; }
.lang-trigger {
  display: flex; align-items: center; gap: 4px; padding: 6px 10px;
  background: var(--surface); border-radius: 8px; color: var(--text); font-size: .85rem;
  border: 1px solid var(--border); transition: all .2s;
}
.lang-trigger:hover { border-color: var(--accent); }
.lang-list {
  position: absolute; top: 110%; right: 0; min-width: 150px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 0; display: none; z-index: 100;
  max-height: 300px; overflow-y: auto;
}
.lang-list.open { display: block; }
.lang-list a {
  display: block; padding: 8px 16px; font-size: .85rem; color: var(--text-muted);
  transition: background .15s;
}
.lang-list a:hover, .lang-list a.active { background: var(--surface2); color: var(--text); }

/* Mobile Toggle */
.nav-toggle { display: none; background: none; color: var(--text); font-size: 1.5rem; }

@media (min-width: 821px) {
  html { scroll-padding-top: 88px; }
  body { padding-right: 68px; }
  nav { overflow: visible; }
  .nav-inner {
    min-height: 64px;
    height: auto;
    gap: 12px;
  }
  .nav-links {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
    padding: 8px 2px;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { height: 4px; }
  .nav-links::-webkit-scrollbar-thumb { background: rgba(109,159,255,.38); border-radius: 999px; }
  .nav-links a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    white-space: nowrap;
  }
  .nav-right {
    flex: 0 0 auto;
    min-width: max-content;
  }
  section[id] { scroll-margin-top: 92px; }
  .hero { min-height: 100svh; }
}

@media (min-width: 821px) and (max-width: 1180px) {
  .nav-inner { padding: 0 14px; }
  .nav-links { gap: 4px; }
  .nav-links a { padding: 6px 10px; font-size: .8rem; }
  .wallet-btn { padding: 8px 12px; }
  .ancient-toggle { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (min-width: 1440px) {
  .container { max-width: 1320px; }
  .hero-split { max-width: 1500px; }
}

/* --- HERO --- */
.hero {
  position: relative; min-height: 100vh; display: flex; flex-direction: column;
  align-items: stretch; justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 30% 40%, rgba(109,159,255,.08) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 60%, rgba(167,139,250,.06) 0%, transparent 50%),
              var(--bg);
}

/* Split layout: text left, globe right */
.hero-split {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 1400px; margin: 0 auto;
  padding: 100px 48px 20px; gap: 32px;
  position: relative; z-index: 3;
}

/* Globe container */
.hero-globe-wrap {
  position: relative; flex: 1 1 50%; max-width: 600px;
  aspect-ratio: 1 / 1; min-height: 400px;
}
#globeCanvas {
  position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;
  border-radius: 50%; z-index: 2;
}
.hero-globe-wrap .satellite-layer {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 3;
}

.hero-content {
  position: relative; z-index: 5; text-align: left; flex: 1 1 50%;
  max-width: 620px; padding: 0;
}
.hero-tag {
  font-size: .9rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px; opacity: 0;
  animation: fadeUp .8s .3s forwards;
}
.hero h1 {
  font-family: var(--font-serif); font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 700; line-height: 1.12; margin-bottom: 20px;
  opacity: 0; animation: heroTextReveal 1.2s .5s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes heroTextReveal {
  0% { opacity: 0; transform: translateY(40px) skewY(2deg); filter: blur(8px); }
  60% { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) skewY(0); filter: blur(0); }
}
.hero-sub {
  font-size: 1.05rem; color: var(--text-muted); max-width: 520px; margin: 0 0 24px;
  line-height: 1.65;
  opacity: 0; animation: fadeUp .8s .9s forwards;
}
.hero-actions {
  display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap;
  opacity: 0; animation: heroActionsReveal 1s 1.1s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes heroActionsReveal {
  0% { opacity: 0; transform: translateY(20px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-stats {
  display: flex; align-items: center; gap: 20px;
  margin-top: 32px; flex-wrap: wrap;
  opacity: 0; animation: fadeUp .8s 1.1s forwards;
}
.stat { text-align: center; }
.stat-num { display: block; font-size: 1.4rem; font-weight: 700; color: var(--accent); }
.stat-label { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.stat-divider { width: 1px; height: 28px; background: var(--border); }

/* Hero Ticker */
.hero-ticker {
  margin-top: 20px; display: flex; align-items: center; gap: 10px;
  font-size: .9rem; opacity: 0; animation: fadeUp .8s 1.3s forwards;
}

/* Knowledge bar – full width strip under the split */
.hero-knowledge-bar {
  position: relative; z-index: 5; padding: 20px 48px 0;
}
.ticker-label { color: var(--text-muted); }
.ticker-price { font-weight: 700; color: var(--warm); }
.ticker-change { font-weight: 600; font-size: .8rem; }
.ticker-change.up { color: var(--success); }
.ticker-change.down { color: var(--danger); }

/* Knowledge Banner */
.knowledge-banner {
  margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 20px;
  opacity: 0; animation: fadeUp .8s 1.6s forwards; flex-wrap: wrap;
}
.knowledge-item { text-align: center; }
.knowledge-num { display: block; font-size: 1.1rem; font-weight: 700; color: var(--warm); }
.knowledge-label { display: block; font-size: .65rem; color: var(--text-muted); max-width: 140px; }
.knowledge-divider { width: 1px; height: 32px; background: rgba(255,255,255,.15); }

/* Scroll Hint */
.scroll-hint {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 5;
  opacity: 0; animation: fadeUp .8s 1.5s forwards;
}
.scroll-mouse {
  width: 24px; height: 38px; border: 2px solid rgba(255,255,255,.3); border-radius: 12px;
  display: flex; justify-content: center; padding-top: 8px;
}
.scroll-dot {
  width: 4px; height: 8px; background: var(--accent); border-radius: 4px;
  animation: scrollBounce 1.8s infinite;
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scrollBounce { 0%,100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(10px); opacity: .3; } }

/* --- SECTIONS --- */
.section { padding: 100px 0; position: relative; }
.section-space {
  background-image:
    radial-gradient(ellipse at 10% 20%, rgba(109,159,255,.03) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 80%, rgba(167,139,250,.03) 0%, transparent 40%);
}
.section-alt { background-color: var(--bg-alt); }
.section-title {
  font-family: var(--font-serif); font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700; text-align: center; margin-bottom: 12px;
}
.section-subtitle {
  text-align: center; color: var(--text-muted); font-size: 1.05rem; max-width: 600px;
  margin: 0 auto 48px;
}

/* --- STORY TIMELINE --- */
.story-timeline { position: relative; max-width: 900px; margin: 0 auto; padding: 20px 0; }
.timeline-line {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--accent), var(--accent2), transparent);
  transform: translateX(-50%);
}
.timeline-item {
  display: flex; width: 100%; margin-bottom: 60px; position: relative;
}
.timeline-left { justify-content: flex-start; padding-right: calc(50% + 40px); }
.timeline-right { justify-content: flex-end; padding-left: calc(50% + 40px); }
.timeline-dot {
  position: absolute; left: 50%; top: 24px; width: 16px; height: 16px;
  background: var(--accent); border-radius: 50%; transform: translateX(-50%);
  border: 3px solid var(--bg); z-index: 2;
}
.dot-glow { box-shadow: 0 0 20px var(--accent), 0 0 40px rgba(109,159,255,.3); }
.timeline-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; transition: transform .3s, box-shadow .3s;
}
.timeline-card:hover { transform: translateY(-4px); box-shadow: var(--glow); }
.timeline-img { width: 100%; height: 180px; object-fit: cover; }
.timeline-content { padding: 20px; }
.timeline-year {
  display: inline-block; font-size: .75rem; font-weight: 700;
  color: var(--accent); background: rgba(109,159,255,.1);
  padding: 4px 12px; border-radius: 20px; margin-bottom: 8px;
  letter-spacing: 1px; text-transform: uppercase;
}
.timeline-content h3 { font-size: 1.2rem; margin-bottom: 8px; }
.timeline-content p { font-size: .9rem; color: var(--text-muted); line-height: 1.6; }
.timeline-stats { display: flex; gap: 24px; margin: 16px 0; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.tstat { flex: 1; text-align: center; }
.tstat-num { display: block; font-size: 1.4rem; font-weight: 700; color: var(--accent); }
.tstat-label { display: block; font-size: .7rem; color: var(--text-muted); margin-top: 2px; }
.timeline-detail { font-size: .85rem !important; margin-top: 12px; color: var(--text-muted); line-height: 1.7 !important; }

/* --- MANIFESTO --- */
.manifesto {
  text-align: center; max-width: 700px; margin: 0 auto; padding: 32px 24px;
}
.manifesto p { color: var(--text-muted); margin-bottom: 16px; font-size: 1rem; line-height: 1.8; }
.manifesto-lead {
  font-family: var(--font-serif); font-size: 1.3rem; color: var(--text) !important;
  font-style: italic;
}
.manifesto-closing { font-weight: 600; color: var(--accent) !important; font-size: 1.1rem; }

/* --- DECENTRALIZATION --- */
.decentral-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(480px, 100%), 1fr)); gap: 32px; margin-bottom: 48px; }
.decentral-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform .3s, box-shadow .3s; }
.decentral-card:hover { transform: translateY(-6px); box-shadow: var(--glow); }
.decentral-visual { position: relative; }
.decentral-img { width: 100%; height: 200px; object-fit: cover; }
.decentral-badge { position: absolute; top: 12px; left: 12px; background: rgba(6,8,15,.8); backdrop-filter: blur(8px); padding: 6px 14px; border-radius: 20px; font-size: .8rem; font-weight: 600; color: var(--text); }
.decentral-card h3 { padding: 24px 24px 8px; font-family: var(--font-serif); font-size: 1.4rem; }
.decentral-lead { padding: 0 24px; font-size: .9rem; color: var(--text-muted); line-height: 1.7; }
.decentral-timeline-mini { padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.dt-step { display: flex; gap: 12px; align-items: baseline; padding: 6px 10px; border-left: 2px solid var(--border); transition: border-color .3s; }
.dt-step:hover { border-color: var(--accent); }
.dt-step-ost { border-color: var(--accent); background: rgba(109,159,255,.06); border-radius: 0 8px 8px 0; }
.dt-year { font-weight: 700; color: var(--warm); font-size: .8rem; min-width: 60px; }
.dt-text { font-size: .82rem; color: var(--text-muted); }
.decentral-stats { display: flex; gap: 16px; padding: 0 24px 16px; flex-wrap: wrap; }
.ds { text-align: center; flex: 1; min-width: 90px; padding: 12px 8px; background: rgba(109,159,255,.06); border-radius: 10px; }
.ds-num { display: block; font-size: 1.3rem; font-weight: 700; color: var(--accent); }
.ds-label { font-size: .7rem; color: var(--text-muted); }
.decentral-quote { padding: 12px 24px 24px; font-style: italic; font-size: .82rem; color: var(--text-muted); border-top: 1px solid var(--border); margin: 0 24px; padding-top: 16px; }
.decentral-manifesto { text-align: center; background: linear-gradient(135deg, rgba(109,159,255,.06), rgba(167,139,250,.06)); border: 1px solid var(--border); border-radius: var(--radius); padding: 48px 32px; }
.decentral-icon-row { display: flex; justify-content: center; gap: 32px; margin-bottom: 24px; }
.decentral-orb { width: 64px; height: 64px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; position: relative; }
.decentral-orb-ring { position: absolute; inset: -6px; border: 1px solid var(--accent); border-radius: 50%; opacity: .3; animation: orbPulse 3s infinite; }
@keyframes orbPulse { 0%,100%{transform:scale(1);opacity:.3} 50%{transform:scale(1.2);opacity:.1} }
.decentral-manifesto h3 { font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: 24px; }
.decentral-pillars { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; text-align: left; }
.pillar { padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pillar h4 { font-size: 1rem; margin-bottom: 8px; color: var(--accent); }
.pillar p { font-size: .85rem; color: var(--text-muted); line-height: 1.7; }

/* --- CITIZEN CARDS --- */
.citizen-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.citizen-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0; position: relative; overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}
.citizen-card:hover { transform: translateY(-4px); box-shadow: var(--glow); }
.citizen-img { width: 100%; height: 160px; object-fit: cover; }
.citizen-body { padding: 20px 24px 24px; }
.culture-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2; }
.culture-china .culture-bar { background: linear-gradient(90deg, #de2910, #ffde00); }
.culture-india .culture-bar { background: linear-gradient(90deg, #ff9933, #138808); }
.culture-nigeria .culture-bar { background: linear-gradient(90deg, #008751, #fff); }
.culture-brazil .culture-bar { background: linear-gradient(90deg, #009739, #fedd00, #002776); }
.culture-mexico .culture-bar { background: linear-gradient(90deg, #006847, #fff, #ce1126); }
.culture-russia .culture-bar { background: linear-gradient(90deg, #fff, #0039a6, #d52b1e); }
.culture-iran .culture-bar { background: linear-gradient(90deg, #239f40, #fff, #da0000); }
.culture-indonesia .culture-bar { background: linear-gradient(90deg, #ff0000, #fff); }
.culture-turkey .culture-bar { background: linear-gradient(90deg, #e30a17, #fff); }
.culture-egypt .culture-bar { background: linear-gradient(90deg, #ce1126, #fff, #000); }
.culture-japan .culture-bar { background: linear-gradient(90deg, #fff, #bc002d, #fff); }
.culture-kenya .culture-bar { background: linear-gradient(90deg, #006600, #bb0000, #000); }
.citizen-flag { font-size: 2.2rem; margin-bottom: 8px; }
.citizen-card h3 { font-size: 1.15rem; margin-bottom: 4px; }
.culture-tagline { font-size: .8rem; color: var(--accent); font-weight: 600; margin-bottom: 10px; }
.citizen-card > p:last-of-type { font-size: .88rem; color: var(--text-muted); }
.culture-symbols { margin-top: 12px; font-size: 1.3rem; display: flex; gap: 8px; }
.citizen-stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 10px 0; }
.citizen-stat { font-size: .75rem; color: var(--accent); background: rgba(109,159,255,.08); padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.btn-map { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 8px 16px; font-size: .82rem; font-weight: 600; color: var(--accent); background: rgba(109,159,255,.08); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: all .3s; }
.btn-map:hover { background: rgba(109,159,255,.18); border-color: var(--accent); transform: translateY(-1px); }

/* Map Modal */
.map-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity .3s; }
.map-modal.open { pointer-events: auto; opacity: 1; }
.map-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.7); }
.map-modal-content { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; max-width: 700px; width: 90%; z-index: 1; }
.map-modal-close { position: absolute; top: 12px; right: 16px; background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; transition: color .2s; }
.map-modal-close:hover { color: var(--text); }
.map-modal-content h3 { font-size: 1.3rem; margin-bottom: 16px; }
.map-modal-sub { font-size: .85rem; color: var(--text-muted); margin-top: 12px; text-align: center; }

/* --- FEATURES GRID --- */
.features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-bottom: 48px; }
.feature-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px 24px; transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
  transform-style: preserve-3d;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(109,159,255,.12), 0 0 24px rgba(109,159,255,.06); }
.feature-icon { font-size: 2rem; margin-bottom: 16px; display: block; }
.feature-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.feature-card p { font-size: .9rem; color: var(--text-muted); }
.feature-detail { margin-top: 16px; }
.feature-img { width: 100%; height: 140px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 12px; }
.feature-bullets { list-style: none; padding: 0; margin: 0 0 12px; }
.feature-bullets li { font-size: .82rem; color: var(--text-muted); padding: 4px 0 4px 20px; position: relative; }
.feature-bullets li::before { content: '✓'; position: absolute; left: 0; color: var(--success); font-weight: 700; }
.feature-compare { display: flex; flex-direction: column; gap: 6px; }
.compare-bad { font-size: .78rem; color: var(--danger); padding: 6px 12px; background: rgba(239,68,68,.08); border-radius: 8px; }
.compare-good { font-size: .78rem; color: var(--success); padding: 6px 12px; background: rgba(52,211,153,.08); border-radius: 8px; font-weight: 600; }
.glow-card { position: relative; }
.glow-card::before {
  content: ''; position: absolute; inset: -1px; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(109,159,255,.1), transparent, rgba(167,139,250,.1));
  z-index: -1; opacity: 0; transition: opacity .3s;
}
.glow-card:hover::before { opacity: 1; }

/* --- PAY DEMO --- */
.pay-demo {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 40px 32px; margin-top: 48px;
}
.pay-demo h3 { font-family: var(--font-serif); font-size: 1.5rem; text-align: center; margin-bottom: 8px; }
.pay-demo-sub { text-align: center; color: var(--text-muted); margin-bottom: 32px; }

.shop-catalog-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
  margin-bottom: 18px;
}
.shop-catalog-kicker {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  border-radius: 999px; border: 1px solid rgba(109,159,255,.25);
  background: rgba(109,159,255,.08); color: var(--accent); font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.shop-catalog-copy {
  margin-top: 10px; max-width: 760px; color: var(--text-muted); line-height: 1.6;
}
.shop-catalog-meta {
  flex-shrink: 0; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(109,159,255,.08), rgba(167,139,250,.06));
  color: var(--text); font-size: .82rem; font-weight: 700;
}

.store-filter-bar {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px;
}
.store-filter-chip {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface2); color: var(--text-muted); font-size: .8rem; font-weight: 600;
  cursor: pointer; transition: all .2s ease;
}
.store-filter-chip:hover {
  border-color: rgba(109,159,255,.35); color: #fff; transform: translateY(-1px);
}
.store-filter-chip.is-active {
  background: linear-gradient(135deg, rgba(109,159,255,.18), rgba(167,139,250,.12));
  border-color: rgba(109,159,255,.35); color: #fff;
  box-shadow: 0 10px 30px rgba(109,159,255,.12);
}

.store-products {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;
  margin-bottom: 32px;
}
.store-item {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.store-item:hover {
  border-color: var(--accent); transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(6,8,15,.24);
}
.store-item-hidden { display: none !important; }
.item-img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--surface); }
.item-visual { font-size: 2rem; width: 48px; text-align: center; flex-shrink: 0; }
.item-details { flex: 1; min-width: 0; }
.item-name { display: block; font-weight: 600; font-size: .9rem; }
.item-desc { display: block; font-size: .75rem; color: var(--text-muted); margin-top: 2px; line-height: 1.3; }
.item-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.item-tag {
  padding: 4px 8px; border-radius: 999px; background: rgba(109,159,255,.1);
  border: 1px solid rgba(109,159,255,.2); color: var(--accent); font-size: .68rem; font-weight: 700;
}
.item-source { display: block; font-size: .75rem; color: var(--text-muted); margin-top: 4px; }
.item-link { color: var(--accent); text-decoration: none; font-size: .7rem; }
.item-link:hover { text-decoration: underline; }
.item-price { display: block; font-size: .8rem; margin-top: 4px; }
.item-usd { color: var(--warm); font-weight: 600; }
.item-ost { color: var(--accent); }
.btn-add {
  width: 36px; height: 36px; border-radius: 50%; font-size: 1.2rem; font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s; flex-shrink: 0;
}
.btn-add:hover { transform: scale(1.15); }

/* Cart */
.store-cart {
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.cart-header {
  display: flex; align-items: center; gap: 10px; padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.cart-icon { font-size: 1.2rem; }
.cart-title { font-weight: 600; }
.cart-badge {
  background: var(--accent); color: #fff; font-size: .75rem; font-weight: 700;
  padding: 2px 8px; border-radius: 12px; margin-left: auto;
}
.cart-items { padding: 16px 20px; min-height: 60px; }
.cart-empty { color: var(--text-muted); font-size: .9rem; }
.cart-item {
  display: flex; align-items: center; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.cart-item-name { flex: 1; font-size: .9rem; }
.cart-item-price { font-size: .85rem; color: var(--warm); font-weight: 600; }
.cart-item-remove {
  background: none; color: var(--danger); font-size: 1rem; padding: 4px;
  transition: transform .2s;
}
.cart-item-remove:hover { transform: scale(1.2); }
.cart-footer { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cart-total { display: flex; gap: 12px; font-weight: 600; }
.cart-total-amount { color: var(--warm); }
.btn-pay {
  padding: 12px 24px; font-size: .9rem;
}
.btn-pay:disabled { opacity: .4; pointer-events: none; }
.pay-icon { font-size: 1.1rem; }

/* Pay Overlay */
.pay-overlay {
  display: none; margin-top: 32px; padding: 40px 20px;
  background: rgba(6,8,15,.95); border: 1px solid var(--border); border-radius: var(--radius);
  text-align: center;
}
.pay-overlay.active { display: block; }
.pay-progress { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; margin-bottom: 24px; }
.pay-step { display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: .3; transition: opacity .5s; }
.pay-step.active { opacity: 1; }
.step-ring {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border); font-size: 1.4rem; background: var(--surface);
  transition: all .4s;
}
.pay-step.active .step-ring { border-color: var(--accent); box-shadow: 0 0 20px rgba(109,159,255,.3); }
.pay-step.done .step-ring { border-color: var(--success); background: rgba(52,211,153,.1); }
.pay-step span:last-child { font-size: .75rem; color: var(--text-muted); }
.step-detail { font-size: .65rem; color: var(--accent); font-family: monospace; margin-top: 4px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 14px; }
.step-hex { color: var(--accent2); letter-spacing: 1px; }
.pay-connector { width: 40px; height: 2px; background: var(--border); margin: 0 4px 24px; flex-shrink: 0; transition: background .4s; }
.pay-connector.active { background: var(--accent); }
.pay-receipt { display: none; }
.pay-receipt.show { display: block; animation: fadeUp .6s forwards; }
.receipt-emoji { font-size: 3rem; margin-bottom: 12px; }
.receipt-text { font-size: 1.2rem; font-weight: 700; }
.receipt-sub { color: var(--text-muted); font-size: .9rem; margin-top: 8px; }
.receipt-details { margin-top: 16px; text-align: left; display: inline-block; font-size: .78rem; font-family: monospace; color: var(--text-muted); background: var(--surface2); border-radius: var(--radius-sm); padding: 12px 20px; line-height: 1.8; }
.receipt-details .rd-label { color: var(--text-muted); }
.receipt-details .rd-value { color: var(--accent); }

/* --- CHARTS --- */
.charts-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-bottom: 48px; }
.chart-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; transition: box-shadow .3s;
}
.chart-card:hover { box-shadow: var(--glow); }
.chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.chart-coin { font-weight: 600; font-size: .95rem; }
.chart-price { font-weight: 700; color: var(--warm); font-size: 1.1rem; }
.chart-canvas-wrap { width: 100%; height: 120px; }
.chart-canvas-wrap canvas { width: 100% !important; }
.chart-change { display: block; text-align: right; font-size: .8rem; font-weight: 600; margin-top: 8px; }
.chart-change.up { color: var(--success); }
.chart-change.down { color: var(--danger); }

/* --- EXCHANGE CALCULATOR --- */
.exchange-calc {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px; margin-bottom: 48px; text-align: center;
}
.exchange-calc h3 { font-family: var(--font-serif); font-size: 1.4rem; margin-bottom: 8px; }
.calc-row { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 24px; flex-wrap: wrap; }
.calc-input-group { display: flex; gap: 8px; }
.calc-input {
  width: 140px; padding: 12px 16px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: 1.1rem; font-weight: 600;
}
.calc-input:focus { outline: none; border-color: var(--accent); }
.calc-select {
  padding: 12px 16px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: .9rem;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b92ad' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 32px;
}
.calc-select:focus { outline: none; border-color: var(--accent); }
.calc-arrow { font-size: 1.5rem; color: var(--accent); font-weight: 700; }
.calc-result { text-align: center; }
.calc-ost-amount { font-size: 2rem; font-weight: 700; color: var(--accent); transition: color .2s; }
.calc-ost-amount.calc-pulse { animation: calcPulse .35s ease; }
@keyframes calcPulse { 0%{transform:scale(1);color:var(--accent)} 40%{transform:scale(1.12);color:var(--warm)} 100%{transform:scale(1);color:var(--accent)} }
.calc-ost-label { font-size: .8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; }
.calc-rate { font-size: .8rem; color: var(--text-muted); margin-top: 4px; }
.calc-updated { font-size: .7rem; color: var(--success); margin-top: 6px; animation: liveBlink 2s infinite; }
@keyframes liveBlink { 0%,100%{opacity:1} 50%{opacity:.4} }
.calc-live-dot { display: block; width: 6px; height: 6px; background: var(--success); border-radius: 50%; margin: 6px auto 0; animation: liveBlink 1.5s infinite; }
.calc-arrow { display: flex; flex-direction: column; align-items: center; }
.calc-arrow-icon { font-size: 1.5rem; color: var(--accent); font-weight: 700; }

/* --- TRANSFER WIDGET --- */
.transfer-widget {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 40px 32px; text-align: center; margin-bottom: 32px;
}
.transfer-widget h3 { font-family: var(--font-serif); font-size: 1.4rem; margin-bottom: 24px; }
.transfer-visual {
  display: flex; align-items: stretch; gap: 24px; justify-content: center; flex-wrap: wrap;
}
.transfer-node {
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; text-align: center; flex: 1; min-width: 200px; max-width: 300px;
}
.node-icon { font-size: 2rem; margin-bottom: 8px; }
.node-label { font-size: .85rem; color: var(--text-muted); margin-bottom: 12px; }
.transfer-select, .transfer-amount {
  width: 100%; padding: 10px 14px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: .9rem; margin-top: 8px;
}
.transfer-select { appearance: none; -webkit-appearance: none; }
.transfer-select:focus, .transfer-amount:focus { outline: none; border-color: var(--accent); }
.node-process { display: flex; align-items: center; }
.process-steps { display: flex; flex-direction: column; gap: 12px; }
.process-step {
  display: flex; align-items: center; gap: 10px; opacity: .4;
  transition: opacity .5s;
}
.process-step.active { opacity: 1; }
.process-dot {
  width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border);
  transition: all .4s; flex-shrink: 0;
}
.process-step.active .process-dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.process-step.done .process-dot { border-color: var(--success); background: var(--success); }
.process-step span:last-child { font-size: .8rem; color: var(--text-muted); white-space: nowrap; }
.node-result { margin-top: 20px; font-weight: 600; color: var(--accent); font-size: .9rem; }
.transfer-note { text-align: center; color: var(--text-muted); font-size: .8rem; margin-top: 16px; }
.convert-providers { text-align: center; margin-top: 16px; padding: 16px; background: rgba(109,159,255,.04); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.convert-providers-label { font-size: .85rem; color: var(--text-muted); margin-bottom: 12px; }
.convert-provider-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.convert-prov-btn { font-size: .82rem !important; }

/* Fiat Ramp */
.fiat-ramp { text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; }
.fiat-ramp h3 { font-family: var(--font-serif); font-size: 1.3rem; margin-bottom: 12px; }
.fiat-ramp p { color: var(--text-muted); font-size: .95rem; }

/* --- OFFLINE --- */
.offline-install-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin: 32px 0 8px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(0,212,255,.11), rgba(0,255,136,.07));
  border: 1px solid rgba(0,212,255,.38);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,212,255,.08);
}
.offline-install-mark {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(0,212,255,.12);
  border: 1px solid rgba(0,212,255,.34);
  color: #00d4ff;
  font-size: 2rem;
  box-shadow: inset 0 0 24px rgba(0,212,255,.12);
}
.offline-install-copy h3 { font-size: 1.25rem; margin-bottom: 8px; }
.offline-install-copy p:last-child { color: var(--text-muted); line-height: 1.65; margin: 0; }
.offline-install-eyebrow {
  margin: 0 0 6px;
  color: #00d4ff;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.offline-install-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.offline-install-btn { white-space: nowrap; }
.offline-install-btn[hidden] { display: none; }
.offline-install-status {
  max-width: 220px;
  color: var(--text-muted);
  font-size: .82rem;
  text-align: right;
}
.offline-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-top: 48px; }
.offline-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px 24px; text-align: center;
}
.offline-icon-wrap { position: relative; display: inline-block; margin-bottom: 16px; }
.offline-icon { font-size: 2.5rem; position: relative; z-index: 2; }
.offline-pulse {
  position: absolute; inset: -12px; border-radius: 50%;
  border: 2px solid var(--accent); opacity: .4;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0% { transform: scale(.8); opacity: .4; } 100% { transform: scale(1.4); opacity: 0; } }
.offline-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.offline-card p { font-size: .88rem; color: var(--text-muted); }

@media (max-width: 760px) {
  .offline-install-card { grid-template-columns: 1fr; text-align: center; }
  .offline-install-mark { margin: 0 auto; }
  .offline-install-actions { align-items: center; }
  .offline-install-status { text-align: center; }
}

/* --- SCENARIO CARDS --- */
.scenario-heading { text-align: center; font-size: 1.3rem; margin-top: 56px; }
.scenario-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.scenario-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; overflow: hidden; transition: transform .3s, box-shadow .3s;
}
.scenario-card:hover { transform: translateY(-4px); box-shadow: var(--glow); }
.scenario-card h4 { font-size: 1.05rem; margin-bottom: 10px; }
.scenario-card > p { font-size: .85rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 12px; }
.scenario-stat { font-size: .8rem; color: var(--text-muted); padding: 8px 12px; background: rgba(109,159,255,.06); border-radius: 8px; }
.scenario-highlight { font-weight: 700; color: var(--warm); font-size: 1.1rem; }

/* Scenario Animations */
.scenario-anim { height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; position: relative; gap: 8px; }

/* NFC phone-to-phone */
.s-phone { width: 48px; height: 76px; background: var(--surface2); border: 2px solid var(--border); border-radius: 10px; position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.s-phone-notch { width: 20px; height: 4px; background: var(--border); border-radius: 0 0 4px 4px; margin-top: 2px; }
.s-phone-screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px; }
.s-screen-amount { font-size: .55rem; font-weight: 700; color: var(--danger); }
.s-amount-green { color: var(--success) !important; }
.s-screen-label { font-size: .45rem; color: var(--text-muted); }
.s-screen-receive .s-screen-label { color: var(--success); }
.s-nfc-waves { display: flex; align-items: center; justify-content: center; width: 40px; position: relative; }
.s-wave { position: absolute; width: 20px; height: 20px; border: 2px solid var(--accent); border-radius: 50%; animation: sWaveExpand 1.8s infinite; opacity: 0; }
.s-wave-2 { animation-delay: .6s; }
.s-wave-3 { animation-delay: 1.2s; }
@keyframes sWaveExpand { 0%{transform:scale(.3);opacity:.8} 100%{transform:scale(2.5);opacity:0} }

/* QR scan */
.s-qr-display { position: relative; }
.s-qr-code { width: 72px; height: 72px; background: #fff; border-radius: 6px; padding: 6px; position: relative; overflow: hidden; }
.s-qr-corner { position: absolute; width: 14px; height: 14px; border: 3px solid #111; }
.s-qr-tl { top: 4px; left: 4px; border-right: none; border-bottom: none; }
.s-qr-tr { top: 4px; right: 4px; border-left: none; border-bottom: none; }
.s-qr-bl { bottom: 4px; left: 4px; border-right: none; border-top: none; }
.s-qr-matrix { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; padding: 12px 6px 6px; }
.s-qr-matrix span { background: #222; border-radius: 1px; aspect-ratio: 1; animation: qrBlink 2.5s infinite; }
.s-qr-matrix span:nth-child(2n) { animation-delay: .4s; }
.s-qr-matrix span:nth-child(3n) { animation-delay: .8s; }
.s-scan-beam { position: absolute; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--success), transparent); top: 0; animation: scanDown 2.5s infinite; border-radius: 2px; }
.s-qr-status { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .7rem; color: var(--text-muted); }
.s-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warm); animation: pulse 2s infinite; }

/* Disaster BLE */
.scenario-anim-disaster { flex-direction: column; gap: 6px; }
.s-disaster-scene { display: flex; align-items: flex-end; gap: 6px; justify-content: center; position: relative; }
.s-building { background: var(--surface2); border: 1px solid var(--border); border-radius: 2px 2px 0 0; }
.s-building-1 { width: 18px; height: 35px; transform: rotate(-3deg); }
.s-building-2 { width: 22px; height: 45px; }
.s-building-3 { width: 16px; height: 30px; transform: rotate(2deg); }
.s-signal-off { font-size: .55rem; color: var(--danger); position: absolute; top: -4px; right: -8px; font-weight: 700; animation: blink 1.5s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.s-ble-transfer { display: flex; align-items: center; gap: 6px; }
.s-ble-device { font-size: 1.1rem; }
.s-ble-pulse-ring { width: 16px; height: 16px; border: 2px solid var(--accent); border-radius: 50%; animation: pulse 1.5s infinite; }
.s-ble-dots { display: flex; gap: 4px; }
.s-ble-dot { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; animation: bleDotMove 1.2s infinite; }
.s-ble-dot:nth-child(2) { animation-delay: .3s; }
.s-ble-dot:nth-child(3) { animation-delay: .6s; }
@keyframes bleDotMove { 0%{opacity:0;transform:translateX(-8px)} 50%{opacity:1} 100%{opacity:0;transform:translateX(8px)} }

/* Remittance route */
.scenario-anim-remit { flex-direction: column; gap: 6px; }
.s-remit-route { display: flex; align-items: center; gap: 8px; }
.s-remit-city { text-align: center; }
.s-city-flag { font-size: 1.3rem; }
.s-city-label { font-size: .6rem; color: var(--text-muted); }
.s-remit-line { position: relative; width: 80px; height: 2px; background: linear-gradient(90deg, var(--accent), var(--success)); }
.s-remit-coin { position: absolute; top: -8px; left: 0; font-size: .9rem; color: var(--accent); animation: routeMove 2.5s infinite; }
.s-remit-savings { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-size: .55rem; color: var(--success); font-weight: 700; white-space: nowrap; }
.s-remit-compare { display: flex; gap: 8px; font-size: .6rem; flex-wrap: wrap; justify-content: center; }
.s-compare-old { color: var(--danger); text-decoration: line-through; }
.s-compare-new { color: var(--success); font-weight: 600; }

/* Power outage mesh */
.scenario-anim-power { flex-direction: column; gap: 8px; }
.s-power-grid { display: flex; align-items: center; gap: 6px; justify-content: center; }
.s-power-line { width: 30px; height: 2px; background: var(--danger); opacity: .4; }
.s-power-bulb { font-size: 1.2rem; opacity: .3; animation: flickerBulb 3s infinite; }
@keyframes flickerBulb { 0%,100%{opacity:.15} 5%{opacity:.6} 10%{opacity:.2} 15%{opacity:.5} 20%,100%{opacity:.15} }
.s-power-off-text { font-size: .55rem; color: var(--danger); font-weight: 700; }
.s-mesh-network { display: flex; align-items: center; gap: 4px; }
.s-mesh-node { font-size: .9rem; }
.s-mesh-link { width: 16px; height: 2px; background: var(--accent); animation: meshPulse 1.5s infinite; position: relative; }
.s-mesh-link::after { content: ''; position: absolute; width: 4px; height: 4px; background: var(--accent); border-radius: 50%; top: -1px; animation: routeMove 1.5s infinite; }
@keyframes meshPulse { 0%,100%{opacity:.3} 50%{opacity:1} }

/* Refugee wallet */
.scenario-anim-refugee { flex-direction: column; gap: 6px; }
.s-refugee-scene { display: flex; align-items: center; gap: 10px; justify-content: center; }
.s-border-wall { width: 6px; height: 50px; background: linear-gradient(180deg, var(--border), var(--text-muted)); border-radius: 2px; }
.s-person-icon { font-size: 1.8rem; animation: walkForward 3s infinite; }
@keyframes walkForward { 0%{transform:translateX(-20px)} 50%{transform:translateX(0)} 100%{transform:translateX(20px)} }
.s-wallet-bubble { background: rgba(109,159,255,.12); border: 1px solid var(--accent); border-radius: 12px; padding: 6px 12px; display: flex; align-items: center; gap: 6px; }
.s-wallet-chip { font-size: .8rem; }
.s-wallet-amount { font-size: .7rem; font-weight: 700; color: var(--success); }
.s-refugee-text { text-align: center; }
.s-cross-label { font-size: .65rem; color: var(--success); font-weight: 600; }
@keyframes qrBlink { 0%,80%{opacity:1} 90%{opacity:.3} 100%{opacity:1} }
@keyframes scanDown { 0%{top:0;opacity:1} 100%{top:100%;opacity:.3} }
@keyframes routeMove { 0%{left:0} 100%{left:100%} }

/* --- OST PRICE CARD --- */

/* --- GROWTH CHART --- */
.growth-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; margin-bottom: 32px; text-align: center; }
.growth-section h3 { font-family: var(--font-serif); font-size: 1.3rem; margin-bottom: 8px; }
.growth-chart-wrap { position: relative; margin: 24px 0; }
.growth-chart-wrap canvas { width: 100% !important; border-radius: var(--radius-sm); }
.growth-metrics { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.growth-metric { text-align: center; flex: 1; min-width: 140px; padding: 16px; background: rgba(109,159,255,.06); border-radius: var(--radius-sm); }
.growth-metric-num { display: block; font-size: 1.4rem; font-weight: 700; color: var(--success); }
.growth-metric-label { font-size: .75rem; color: var(--text-muted); margin-top: 4px; display: block; }

/* --- SELL OST --- */
.sell-ost-section { text-align: center; margin-bottom: 32px; }
.sell-ost-section h3 { font-family: var(--font-serif); font-size: 1.3rem; margin-bottom: 8px; }
.sell-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.sell-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 20px; text-align: center; transition: transform .3s, box-shadow .3s; }
.sell-card:hover { transform: translateY(-4px); box-shadow: var(--glow); }
.sell-icon { font-size: 2rem; margin-bottom: 12px; }
.sell-card h4 { font-size: 1.05rem; margin-bottom: 8px; }
.sell-card p { font-size: .85rem; color: var(--text-muted); margin-bottom: 16px; line-height: 1.6; }

/* --- OST PRICE CARD (original) --- */
.ost-price-card {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, rgba(109,159,255,.08), rgba(167,139,250,.08));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px 32px; margin-bottom: 32px; flex-wrap: wrap; gap: 16px;
}
.price-card-left { display: flex; align-items: center; gap: 16px; }
.price-card-icon { font-size: 2.5rem; color: var(--accent); }
.price-card-name { display: block; font-weight: 700; font-size: 1.2rem; }
.price-card-chain { display: block; font-size: .8rem; color: var(--text-muted); }
.price-card-right { text-align: right; }
.price-card-value { display: block; font-size: 1.8rem; font-weight: 700; color: var(--warm); }
.price-card-change { display: block; font-size: .9rem; font-weight: 600; }
.price-card-change.up { color: var(--success); }
.price-card-change.down { color: var(--danger); }

/* --- JUPITER WIDGET --- */
.jupiter-widget {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px; text-align: center; margin-bottom: 32px;
}
.jupiter-widget h3 { font-family: var(--font-serif); font-size: 1.3rem; margin-bottom: 8px; }
.jupiter-widget p { color: var(--text-muted); font-size: .95rem; }
.jupiter-embed-area { margin-top: 24px; }
.jupiter-placeholder { padding: 40px 20px; }
.jupiter-bolt { font-size: 2.5rem; display: block; margin-bottom: 12px; }

/* --- FIAT GRID --- */
.fiat-section { text-align: center; margin-bottom: 48px; }
.fiat-heading { font-family: var(--font-serif); font-size: 1.3rem; margin-bottom: 8px; }
.fiat-sub { color: var(--text-muted); margin-bottom: 24px; font-size: .95rem; }
.fiat-grid {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.fiat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 50px; font-size: .85rem; font-weight: 500; color: var(--text);
  transition: all .2s;
}
.fiat-pill:hover {
  border-color: var(--accent); color: var(--accent); background: rgba(109,159,255,.06);
  transform: translateY(-2px);
}

/* --- FAUCET --- */
.faucet-section { text-align: center; }
.faucet-section h3 { font-family: var(--font-serif); font-size: 1.3rem; margin-bottom: 8px; }
.faucet-machine {
  position: relative; width: 200px; height: 250px; margin: 32px auto;
}
.faucet-pipe {
  width: 60px; height: 80px; background: linear-gradient(180deg, #555, #333);
  border-radius: 8px 8px 0 0; margin: 0 auto; position: relative;
}
.faucet-spout {
  width: 24px; height: 12px; background: #666; border-radius: 0 0 6px 6px;
  position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%);
}
.faucet-drop-zone { height: 80px; position: relative; overflow: hidden; }
.faucet-coin {
  position: absolute; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--warm), #c9953a);
  box-shadow: 0 0 10px rgba(245,196,104,.4);
  animation: coinDrop 1s forwards;
}
@keyframes coinDrop { 0% { top: 0; opacity: 1; } 90% { opacity: 1; } 100% { top: 70px; opacity: 0; } }
.faucet-pool {
  background: rgba(109,159,255,.1); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px; text-align: center;
}
.faucet-amount { font-size: 1.8rem; font-weight: 700; color: var(--accent); }
.faucet-label { font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; }
.faucet-btn { margin-top: 16px; }
.faucet-status { margin-top: 12px; font-size: .85rem; color: var(--text-muted); }

/* --- AI SECTION --- */
.ai-hero-visual { display: flex; justify-content: center; margin-bottom: 48px; }
.ai-orb { position: relative; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; }
.ai-core { font-size: 3rem; position: relative; z-index: 2; }
.ai-ring {
  position: absolute; inset: 0; border-radius: 50%; border: 1px solid;
}
.ai-ring-1 { border-color: rgba(109,159,255,.3); animation: spin 8s linear infinite; }
.ai-ring-2 { inset: -16px; border-color: rgba(167,139,250,.2); animation: spin 12s linear infinite reverse; }
.ai-ring-3 { inset: -32px; border-color: rgba(245,196,104,.15); animation: spin 16s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- BOT CONNECTOR PANEL --- */
.bot-connector-panel { margin-top: 56px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; }
.bot-connector-panel > h3 { font-size: 1.3rem; margin-bottom: 4px; }
.connector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-bottom: 24px; }
.connector-card { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 20px; transition: border-color .3s; }
.connector-card.connected { border-color: var(--success); }
.connector-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.connector-logo { font-size: 1.8rem; }
.connector-header h4 { font-size: 1rem; margin: 0; }
.connector-type { font-size: .75rem; color: var(--text-muted); margin: 0; }
.connector-status { margin-left: auto; font-size: .75rem; color: var(--text-muted); white-space: nowrap; }
.connector-status.online { color: var(--success); }
.connector-fields { display: flex; flex-direction: column; gap: 10px; }
.connector-fields label { font-size: .78rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 4px; }
.connector-input, .connector-select {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; color: var(--text); font-size: .85rem; outline: none;
  transition: border-color .2s;
}
.connector-input:focus, .connector-select:focus { border-color: var(--accent); }
.btn-sm { padding: 8px 16px; font-size: .82rem; }
.btn-connect { align-self: flex-start; margin-top: 4px; }
.connector-log { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.log-header { padding: 10px 16px; background: var(--surface); font-size: .85rem; font-weight: 600; border-bottom: 1px solid var(--border); }
.log-body { padding: 12px 16px; max-height: 200px; overflow-y: auto; font-family: 'Courier New', monospace; font-size: .78rem; }
.log-entry { margin: 4px 0; padding: 0; }
.log-info { color: var(--text-muted); }
.log-success { color: var(--success); }
.log-error { color: var(--danger); }
.log-warn { color: var(--warm); }

/* --- CREATORS --- */

/* Build Code Showcase */
.build-code-showcase { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); gap: 20px; margin-bottom: 48px; }
.build-terminal { background: #0d1117; border: 1px solid rgba(109,159,255,.15); border-radius: var(--radius); overflow: hidden; }
.terminal-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #161b22; border-bottom: 1px solid rgba(109,159,255,.1); }
.terminal-dot { width: 10px; height: 10px; border-radius: 50%; }
.td-red { background: #ff5f57; }
.td-yellow { background: #febc2e; }
.td-green { background: #28c840; }
.terminal-title { margin-left: 10px; font-size: .75rem; color: var(--text-muted); }
.terminal-body { padding: 16px 20px; overflow-x: auto; font-family: 'Courier New', Monaco, monospace; font-size: .78rem; line-height: 1.8; color: #c9d1d9; margin: 0; }
.terminal-body code { background: none; padding: 0; font-size: inherit; color: inherit; }
.code-kw { color: #ff7b72; }
.code-fn { color: #d2a8ff; }
.code-str { color: #a5d6ff; }
.code-num { color: #79c0ff; }
.code-comment { color: #8b949e; font-style: italic; }

/* Creator Cards with images */
.creators-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-bottom: 48px; }
.creator-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; transition: transform .3s, box-shadow .3s;
}
.creator-card:hover { transform: translateY(-4px); box-shadow: var(--glow); }
.creator-img { width: 100%; height: 160px; object-fit: cover; }
.creator-body { padding: 20px 20px 24px; }
.creator-icon { font-size: 2rem; margin-bottom: 16px; display: block; }
.creator-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.creator-card p { font-size: .85rem; color: var(--text-muted); margin-bottom: 12px; line-height: 1.6; }
.creator-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.creator-stats span { font-size: .72rem; color: var(--text-muted); padding: 4px 10px; background: rgba(109,159,255,.06); border-radius: 16px; }
.creator-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  padding: 4px 12px; background: rgba(109,159,255,.1); border-radius: 20px;
  font-size: .75rem; font-weight: 500; color: var(--accent);
}

/* Bounty Cards */
.build-bounty-grid { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 24px 0; }
.bounty-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 20px; text-align: center; min-width: 180px; transition: transform .2s, border-color .2s; }
.bounty-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.bounty-amount { display: block; font-size: 1.3rem; font-weight: 700; color: var(--success); }
.bounty-task { font-size: .75rem; color: var(--text-muted); }

/* CTA Box */
.cta-box {
  background: linear-gradient(135deg, rgba(109,159,255,.08), rgba(167,139,250,.08));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 48px 32px; text-align: center;
}
.cta-box h3 { font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: 12px; }
.cta-box p { color: var(--text-muted); margin-bottom: 24px; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* --- VERIFY --- */
.verify-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-top: 48px; }

/* --- FOOTER --- */
.footer {
  border-top: 1px solid var(--border); padding: 60px 0 32px;
  background: radial-gradient(ellipse at 50% 0%, rgba(109,159,255,.04) 0%, transparent 60%), var(--bg);
}
.footer-space { text-align: center; max-width: 600px; margin: 0 auto 40px; }
.footer-space p { color: var(--text-muted); font-size: .95rem; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.footer-logo { font-weight: 700; font-size: 1.2rem; display: flex; align-items: center; gap: 8px; }
.footer-copy { font-size: .8rem; color: var(--text-muted); }
.footer-links { display: flex; gap: 20px; }
.footer-links a { font-size: .85rem; color: var(--text-muted); }
.footer-links a:hover { color: var(--accent); }

/* --- BACKGROUND PARTICLES --- */
.bg-particles {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.bg-particle {
  position: absolute; width: 3px; height: 3px; background: rgba(109,159,255,.15);
  border-radius: 50%;
  animation: floatParticle linear infinite;
}
@keyframes floatParticle {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(30px); opacity: 0; }
}

/* --- WALLET MODAL --- */
.wallet-modal {
  position: fixed; inset: 0; z-index: 2000; display: none;
  align-items: center; justify-content: center;
}
.wallet-modal.open { display: flex; }
.wallet-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.7); }
.wallet-modal-content {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 40px 32px; max-width: 420px; width: 90%;
  z-index: 1;
}
.wallet-modal-content h3 { font-family: var(--font-serif); font-size: 1.4rem; margin-bottom: 8px; text-align: center; }
.wallet-modal-content .text-muted { text-align: center; margin-bottom: 24px; }
.wallet-options { display: flex; flex-direction: column; gap: 10px; }
.wallet-option {
  display: flex; align-items: center; gap: 12px; padding: 14px 20px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-weight: 500; font-size: .95rem; transition: all .2s;
}
.wallet-option:hover { border-color: var(--accent); background: rgba(109,159,255,.06); }
.wallet-option img { width: 32px; height: 32px; }
.wallet-fallback { font-size: 1.5rem; width: 32px; text-align: center; }
.wallet-close {
  position: absolute; top: 16px; right: 16px; background: none;
  color: var(--text-muted); font-size: 1.3rem; padding: 4px;
}
.wallet-close:hover { color: var(--text); }

/* --- TOAST --- */
.toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 3000;
  display: flex; flex-direction: column; gap: 10px;
}
.toast {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 20px; font-size: .9rem; color: var(--text); display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.4); min-width: 280px;
  animation: toastIn .3s forwards;
}
.toast.removing { animation: toastOut .3s forwards; }
.toast-icon { font-size: 1.2rem; }
@keyframes toastIn { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100px); opacity: 0; } }

/* --- SCROLL REVEAL --- */
.sr { opacity: 0; transform: translateY(30px); transition: opacity .7s, transform .7s; }
.sr.visible { opacity: 1; transform: translateY(0); }

/* --- PAY ANYWHERE --- */
.pay-anywhere {
  margin-top: 64px; padding: 40px 32px; background: var(--surface);
  border-radius: var(--radius); border: 1px solid var(--border);
}
.pay-anywhere h3 { font-size: 1.6rem; text-align: center; margin-bottom: 8px; }
.pay-anywhere-sub { text-align: center; color: var(--text-muted); margin-bottom: 32px; max-width: 600px; margin-left: auto; margin-right: auto; }
.pay-anywhere-form { max-width: 640px; margin: 0 auto; }
.pa-field { margin-bottom: 20px; }
.pa-field label { display: block; font-size: .85rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.pa-input {
  width: 100%; padding: 14px 16px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 1rem;
  transition: border-color .2s;
}
.pa-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(109,159,255,.15); }
.pa-select {
  width: 100%; padding: 14px 16px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 1rem;
}
.pa-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pa-url-preview { display: block; font-size: .8rem; color: var(--accent); margin-top: 4px; min-height: 18px; }
.pa-conversion {
  background: var(--bg); border-radius: var(--radius-sm); padding: 20px;
  margin: 24px 0; border: 1px solid var(--border);
}
.pa-conv-row { display: flex; justify-content: space-between; padding: 8px 0; }
.pa-conv-row + .pa-conv-row { border-top: 1px solid var(--border); }
.pa-conv-label { color: var(--text-muted); font-size: .9rem; }
.pa-conv-value { font-weight: 600; color: var(--text); }
.pa-conv-rate .pa-conv-value { color: var(--accent); font-size: .85rem; }
.pa-conv-fee .pa-conv-value { color: var(--success); font-size: .85rem; }
.pa-how { margin: 28px 0; }
.pa-how h4 { font-size: 1rem; margin-bottom: 16px; color: var(--accent); }
.pa-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pa-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 12px 8px; background: var(--bg); border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: .82rem; color: var(--text-muted); }
.pa-step-num { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; border-radius: 50%; font-weight: 700; font-size: .85rem; }
.pa-pay-btn { width: 100%; justify-content: center; padding: 16px; font-size: 1.05rem; margin-top: 8px; }
.pa-pay-btn:disabled { opacity: .5; cursor: not-allowed; }
.pa-supported { text-align: center; margin-top: 24px; }
.pa-supported span:first-child { font-size: .85rem; color: var(--text-muted); display: block; margin-bottom: 12px; }
.pa-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pa-badge { padding: 6px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 20px; font-size: .8rem; color: var(--text-muted); }

.interchange-desk {
  margin-top: 28px; padding: 28px; border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(11,17,32,.96), rgba(8,12,24,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 24px 48px rgba(6,8,15,.28);
}
.interchange-desk-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.interchange-desk-kicker {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; margin-bottom: 10px;
  border-radius: 999px; border: 1px solid rgba(52,211,153,.24);
  background: rgba(52,211,153,.08); color: var(--success); font-size: .76rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.interchange-desk-head h4 {
  font-family: var(--font-serif); font-size: 1.35rem;
}
.interchange-desk-badge {
  flex-shrink: 0; padding: 10px 14px; border-radius: 999px;
  background: rgba(109,159,255,.1); border: 1px solid rgba(109,159,255,.22); color: var(--accent);
  font-size: .76rem; font-weight: 700;
}
.interchange-desk-copy {
  margin: 14px 0 18px; max-width: 760px; color: var(--text-muted); line-height: 1.65;
}
.interchange-desk-status {
  padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(109,159,255,.16);
  background: rgba(109,159,255,.08); color: var(--text); line-height: 1.5;
}
.interchange-desk-status.is-info { border-color: rgba(109,159,255,.2); background: rgba(109,159,255,.08); }
.interchange-desk-status.is-success { border-color: rgba(52,211,153,.22); background: rgba(52,211,153,.08); }
.interchange-desk-status.is-warning { border-color: rgba(245,196,104,.24); background: rgba(245,196,104,.08); }
.interchange-desk-status.is-error { border-color: rgba(248,113,113,.24); background: rgba(248,113,113,.08); }
.interchange-desk-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px;
  margin: 18px 0;
}
.interchange-desk-stat {
  padding: 14px; border-radius: 16px; border: 1px solid var(--border); background: rgba(255,255,255,.02);
}
.interchange-desk-stat span {
  display: block; color: var(--text-muted); font-size: .74rem; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .03em;
}
.interchange-desk-stat strong {
  font-size: .95rem; line-height: 1.45;
}
.interchange-desk-items {
  padding: 4px 0 0;
}
.interchange-desk-empty {
  padding: 18px; border-radius: 16px; border: 1px dashed var(--border); color: var(--text-muted); text-align: center;
}
.interchange-desk-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.interchange-desk-item:last-child { border-bottom: none; }
.interchange-desk-item-copy {
  display: flex; flex-direction: column; gap: 4px;
}
.interchange-desk-item-copy span {
  color: var(--text-muted); font-size: .78rem;
}
.interchange-desk-item-value {
  color: var(--warm); font-weight: 700; white-space: nowrap;
}
.interchange-desk-actions {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px;
}
.interchange-link-disabled {
  opacity: .45; pointer-events: none;
}
.interchange-desk-receipt {
  margin-top: 18px;
}
.interchange-desk-receipt-card {
  padding: 22px; border-radius: 18px; border: 1px solid rgba(52,211,153,.2); background: rgba(52,211,153,.06);
}
.interchange-desk-receipt-title {
  font-size: 1rem; font-weight: 800; margin-bottom: 14px; color: #d1fae5;
}
.interchange-desk-receipt-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
}
.interchange-desk-receipt-grid div {
  padding: 12px; border-radius: 14px; background: rgba(6,8,15,.22); border: 1px solid rgba(255,255,255,.05);
}
.interchange-desk-receipt-grid span {
  display: block; color: var(--text-muted); font-size: .72rem; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .03em;
}
.interchange-desk-receipt-card p {
  margin-top: 14px; color: var(--text-muted); line-height: 1.6;
}
.interchange-desk-receipt-links {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px;
}
.interchange-desk-receipt-links a {
  color: var(--accent); text-decoration: none; font-weight: 700;
}
.interchange-desk-receipt-links a:hover { text-decoration: underline; }

/* --- LAUNCH CHECKLIST --- */
.launch-checklist h3 { text-align: center; font-size: 1.6rem; margin-bottom: 8px; }
.checklist-grid { display: grid; gap: 16px; max-width: 800px; margin: 0 auto; }
.checklist-item {
  display: flex; gap: 16px; padding: 20px 24px; background: var(--surface);
  border-radius: var(--radius-sm); border: 1px solid var(--border); align-items: flex-start;
}
.checklist-item.done { border-color: rgba(52,211,153,.3); }
.checklist-item .check-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }
.checklist-item h4 { font-size: 1rem; margin-bottom: 4px; }
.checklist-item p { font-size: .85rem; color: var(--text-muted); line-height: 1.5; }
.check-status { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 12px; font-size: .75rem; font-weight: 600; }
.status-done { background: rgba(52,211,153,.15); color: var(--success); }
.status-pending { background: rgba(245,196,104,.12); color: var(--warm); }

/* --- RESPONSIVE --- */
@media (max-width: 960px) {
  .nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: rgba(6,8,15,.95); flex-direction: column; padding: 20px; border-bottom: 1px solid var(--border); }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; }
  .wallet-text { display: none; }
  .timeline-left, .timeline-right { padding-left: 60px; padding-right: 0; }
  .timeline-line { left: 24px; }
  .timeline-dot { left: 24px; }
  .wd-create-grid { grid-template-columns: 1fr 1fr; }
  .bridge-grid { grid-template-columns: 1fr 1fr; }
  .wd-ql-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .charts-row, .citizen-grid, .offline-grid, .verify-grid, .scenario-grid, .sell-grid { grid-template-columns: 1fr; }
  .pa-row, .pa-steps { grid-template-columns: 1fr; }
  .shop-catalog-head, .interchange-desk-head { flex-direction: column; align-items: stretch; }
  .store-filter-bar { gap: 8px; }
  .interchange-desk-actions > * { width: 100%; justify-content: center; }
  .calc-row { flex-direction: column; }
  .calc-arrow { transform: rotate(90deg); }
  .transfer-visual { flex-direction: column; align-items: center; }
  .transfer-node { max-width: 100%; }
}

/* ==================================================================
   MY WALLET DASHBOARD
   ================================================================== */
.wallet-command-shell {
  display: grid;
  gap: 24px;
  margin-top: 32px;
}

.wallet-command-hero,
.wallet-access-grid,
.wallet-market-grid-shell,
.wallet-convert-grid {
  display: grid;
  gap: 24px;
}

.wallet-command-hero {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  align-items: stretch;
}

.wallet-command-copy,
.wallet-market-board,
.wallet-side-card,
.wallet-portal-card,
.wallet-coming-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(12,18,34,.94), rgba(8,12,24,.98));
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 18px 45px rgba(2,6,23,.28);
}

.wallet-command-copy,
.wallet-market-board,
.wallet-side-card,
.wallet-coming-card {
  padding: 28px;
}

.wallet-command-kicker,
.wallet-side-kicker,
.wallet-portal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(109,159,255,.12);
  border: 1px solid rgba(109,159,255,.22);
  color: var(--accent);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
}

.wallet-command-copy h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin: 16px 0 10px;
}

.wallet-command-copy p,
.wallet-side-card p,
.wallet-portal-card p,
.wallet-coming-card p {
  color: var(--text-muted);
  line-height: 1.6;
}

.wallet-market-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.wallet-mini-stat {
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(109,159,255,.14);
}

.wallet-mini-stat span {
  display: block;
  font-size: .78rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.wallet-mini-stat strong {
  font-size: 1.2rem;
}

.wallet-market-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: .9rem;
  color: var(--text-muted);
}

.wallet-market-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(52,211,153,.09);
  border: 1px solid rgba(52,211,153,.22);
  color: var(--success);
  font-size: .75rem;
  font-weight: 700;
}

.wallet-market-main {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 16px;
  margin-top: 18px;
}

.wallet-market-stat {
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(109,159,255,.12);
}

.wallet-market-stat span {
  display: block;
  color: var(--text-muted);
  font-size: .78rem;
  margin-bottom: 10px;
}

.wallet-market-stat strong {
  display: block;
  font-size: 1.6rem;
  line-height: 1.1;
}

.wallet-market-stat em {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: .9rem;
}

.wallet-market-chart-wrap {
  margin-top: 18px;
  padding: 14px;
  border-radius: 20px;
  background: rgba(6,10,22,.72);
  border: 1px solid rgba(109,159,255,.14);
}

.wallet-market-chart-wrap canvas {
  display: block;
  width: 100%;
  height: 140px;
}

.wallet-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 10px;
  background: rgba(9,13,26,.78);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.wallet-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
}

.wallet-tab-btn:hover {
  color: var(--text);
  background: rgba(255,255,255,.05);
}

.wallet-tab-btn.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(109,159,255,.95), rgba(52,211,153,.72));
  box-shadow: 0 12px 24px rgba(109,159,255,.18);
}

.wallet-tab-panel[hidden] {
  display: none !important;
}

.wallet-access-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  align-items: start;
}

.wallet-access-grid .wallet-dashboard {
  max-width: none;
  margin: 0;
}

.wallet-side-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.wallet-side-item {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(109,159,255,.10);
  color: var(--text);
  line-height: 1.55;
}

.wallet-market-grid-shell {
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.9fr);
  align-items: start;
}

.wallet-market-grid-main .charts-row {
  margin-bottom: 0;
}

.wallet-market-grid-shell .exchange-calc {
  margin: 0;
}

.wallet-convert-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.85fr);
  align-items: start;
}

.wallet-convert-side {
  display: grid;
  gap: 24px;
}

.wallet-convert-side .jupiter-widget,
.wallet-convert-side .sell-ost-section {
  margin-bottom: 0;
}

.wallet-portal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.wallet-portal-card,
.wallet-coming-card {
  padding: 22px;
  color: var(--text);
  text-decoration: none;
  min-height: 220px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.wallet-portal-card:hover {
  transform: translateY(-4px);
  border-color: rgba(109,159,255,.32);
  box-shadow: 0 16px 32px rgba(2,6,23,.26);
}

.wallet-portal-card h4,
.wallet-coming-card h4 {
  margin: 16px 0 10px;
  font-size: 1.15rem;
}

.wallet-portal-meta {
  display: block;
  margin-top: auto;
  color: var(--accent);
  font-size: .82rem;
}

.wallet-coming-card {
  border-style: dashed;
  background: linear-gradient(135deg, rgba(109,159,255,.08), rgba(52,211,153,.05));
}

.prediction-market-board {
  grid-column: 1 / -1;
  display: grid;
  position: relative;
  overflow: hidden;
  gap: 16px;
  padding: 22px;
  border: 1px solid rgba(109,159,255,.22);
  border-radius: 22px;
  background:
    linear-gradient(140deg, rgba(13,20,36,.99), rgba(6,10,18,.99) 52%, rgba(9,18,24,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 24px 60px rgba(6,8,15,.28);
}

.prediction-market-board::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0%, rgba(109,159,255,.12) 42%, rgba(52,211,153,.08) 52%, transparent 66%);
  transform: translateX(-72%);
  animation: predictionVenueSweep 9s ease-in-out infinite;
}

.prediction-market-board > * {
  position: relative;
  z-index: 1;
}

@keyframes predictionVenueSweep {
  0%, 48% { transform: translateX(-78%); opacity: 0; }
  58% { opacity: .9; }
  100% { transform: translateX(78%); opacity: 0; }
}

@keyframes predictionCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.prediction-market-head {
  display: grid;
  grid-template-columns: minmax(260px, .78fr) minmax(340px, 1.2fr) minmax(210px, .58fr);
  gap: 14px;
  align-items: stretch;
}

.prediction-market-copy {
  justify-content: center;
}

.prediction-market-copy,
.prediction-market-hero-card {
  min-width: 0;
}

.prediction-market-copy h4 {
  margin: 8px 0 0;
  font-size: 1.48rem;
  letter-spacing: 0;
}

.prediction-market-copy p {
  margin: 0;
  max-width: 58ch;
  color: var(--text-muted);
  font-size: .96rem;
  line-height: 1.65;
}

.prediction-market-venue-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.prediction-venue-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  color: #eff6ff;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.prediction-market-hero-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at top left, rgba(109,159,255,.16), transparent 40%),
    radial-gradient(circle at bottom right, rgba(52,211,153,.14), transparent 34%),
    linear-gradient(180deg, rgba(5,8,14,.92), rgba(6,10,18,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 44px rgba(0,0,0,.24);
}

.prediction-market-hero-topline,
.prediction-market-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.prediction-market-hero-copy {
  display: grid;
  gap: 10px;
}

.prediction-market-hero-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(245,196,104,.2);
  background: rgba(245,196,104,.08);
  color: #f8e2a3;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.prediction-market-hero-copy h5 {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.32;
}

.prediction-market-hero-copy p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.62;
}

.prediction-market-hero-price-grid,
.prediction-market-hero-metrics {
  display: grid;
  gap: 12px;
}

.prediction-market-hero-price-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.prediction-market-hero-price,
.prediction-market-hero-metric {
  position: relative;
  overflow: hidden;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(5,8,14,.45);
}

.prediction-market-hero-price::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .65;
  pointer-events: none;
}

.prediction-market-hero-price.is-yes::before {
  background: linear-gradient(135deg, rgba(52,211,153,.16), transparent 62%);
}

.prediction-market-hero-price.is-no::before {
  background: linear-gradient(135deg, rgba(248,113,113,.12), transparent 62%);
}

.prediction-market-hero-price span,
.prediction-market-hero-metric span {
  display: block;
  position: relative;
  z-index: 1;
  font-size: .72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.prediction-market-hero-price strong,
.prediction-market-hero-metric strong {
  display: block;
  position: relative;
  z-index: 1;
  margin-top: 8px;
}

.prediction-market-hero-price strong {
  font-size: 1.5rem;
}

.prediction-market-hero-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.prediction-market-hero-metric strong {
  font-size: .98rem;
}

.prediction-market-side {
  display: grid;
  gap: 10px;
  min-width: 0;
  align-content: start;
}

.prediction-market-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  border: 1px solid rgba(109,159,255,.2);
  background: rgba(109,159,255,.1);
  color: var(--accent);
}

.prediction-market-badge.is-live {
  border-color: rgba(52,211,153,.28);
  background: rgba(52,211,153,.1);
  color: var(--success);
}

.prediction-market-badge.is-warning {
  border-color: rgba(245,196,104,.28);
  background: rgba(245,196,104,.08);
  color: var(--warm);
}

.prediction-market-badge.is-error {
  border-color: rgba(248,113,113,.24);
  background: rgba(248,113,113,.08);
  color: #fca5a5;
}

.prediction-market-updated {
  font-size: .82rem;
  color: var(--text-muted);
}

.prediction-market-side-stack {
  display: grid;
  gap: 10px;
}

.prediction-market-side-card {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}

.prediction-market-side-card span {
  display: block;
  font-size: .72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.prediction-market-side-card strong {
  display: block;
  margin-top: 6px;
  font-size: .98rem;
}

.prediction-market-side-card p {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.55;
}

.prediction-market-controls {
  display: grid;
  gap: 12px;
}

.prediction-market-source-toggle,
.prediction-market-topic-toggle,
.prediction-market-rank-toggle {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 3px;
  scrollbar-width: thin;
}

.prediction-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: var(--text-muted);
  font-size: .82rem;
  font-weight: 700;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.prediction-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(109,159,255,.28);
  color: var(--text);
}

.prediction-chip.is-active {
  border-color: rgba(109,159,255,.32);
  background: rgba(109,159,255,.12);
  color: #eff6ff;
}

.prediction-market-search-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.prediction-market-search {
  flex: 1;
}

.prediction-market-search-label {
  display: block;
  margin-bottom: 6px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.prediction-market-search-input {
  width: 100%;
  padding: 13px 15px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(7,10,18,.82);
  color: var(--text);
  font-size: .92rem;
}

.prediction-market-search-input:focus {
  outline: none;
  border-color: rgba(109,159,255,.32);
  box-shadow: 0 0 0 3px rgba(109,159,255,.12);
}

.prediction-refresh-btn {
  min-width: 108px;
}

.prediction-market-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.prediction-market-stat {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}

.prediction-market-stat span {
  display: block;
  margin-bottom: 6px;
  font-size: .74rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.prediction-market-stat strong {
  font-size: 1.1rem;
}

.prediction-market-note {
  display: none;
}

.prediction-market-pulse-wrap {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}

.prediction-market-pulse-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.prediction-market-pulse-head strong {
  display: block;
  font-size: 1rem;
}

.prediction-market-pulse-head p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: .84rem;
  line-height: 1.55;
}

.prediction-market-pulse {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.prediction-pulse-card,
.prediction-pulse-empty {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(5,8,14,.48);
}

.prediction-pulse-card {
  display: grid;
  gap: 12px;
  width: 100%;
  padding: 16px;
  color: inherit;
  text-align: left;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.prediction-pulse-card::before,
.prediction-market-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  opacity: .55;
}

.prediction-pulse-card::before,
.prediction-market-card.source-polymarket-card::before {
  background: linear-gradient(90deg, rgba(109,159,255,.95), rgba(52,211,153,.45));
}

.prediction-pulse-card.is-down::before,
.prediction-market-card.source-kalshi-card::before {
  background: linear-gradient(90deg, rgba(52,211,153,.95), rgba(245,196,104,.4));
}

.prediction-pulse-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 18px 36px rgba(0,0,0,.2);
}

.prediction-pulse-card.is-selected {
  border-color: rgba(109,159,255,.34);
  box-shadow: 0 0 0 1px rgba(109,159,255,.26), 0 18px 36px rgba(0,0,0,.22);
}

.prediction-pulse-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  color: var(--text-muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.prediction-pulse-topline,
.prediction-pulse-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}

.prediction-pulse-card strong {
  font-size: .96rem;
  line-height: 1.42;
}

.prediction-pulse-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.55;
}

.prediction-pulse-meta span {
  font-size: .75rem;
  color: var(--text-muted);
  font-weight: 700;
}

.prediction-pulse-empty {
  grid-column: 1 / -1;
  padding: 18px;
  color: var(--text-muted);
  text-align: center;
}

.prediction-market-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(320px, .86fr);
  gap: 16px;
  align-items: start;
}

.prediction-market-main {
  min-width: 0;
}

.prediction-market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 12px;
  align-items: stretch;
}

.prediction-market-card,
.prediction-market-empty-card {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  gap: 12px;
  min-height: 0;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.prediction-market-card {
  animation: predictionCardIn .38s ease both;
  animation-delay: var(--prediction-card-delay, 0ms);
}

.prediction-market-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 20px 42px rgba(0,0,0,.24);
}

.prediction-market-card {
  cursor: pointer;
}

.prediction-market-card.is-selected {
  border-color: rgba(109,159,255,.4);
  box-shadow: 0 0 0 1px rgba(109,159,255,.28), 0 18px 40px rgba(0,0,0,.24);
  transform: translateY(-1px);
}

.prediction-market-empty-card {
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  min-height: 170px;
  color: var(--text-muted);
  text-align: center;
}

.prediction-market-load-card {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(109,159,255,.16);
  background: rgba(109,159,255,.06);
}

.prediction-market-load-card span {
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.prediction-market-load-card strong {
  flex: 1;
  min-width: 0;
  font-size: .9rem;
}

.prediction-market-load-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.prediction-market-topline,
.prediction-market-footer,
.prediction-market-contract-row,
.prediction-market-meta-row,
.prediction-market-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.prediction-market-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35), 0 4px 14px rgba(239, 68, 68, 0.25);
  animation: ostLivePulse 1.6s ease-in-out infinite;
  margin-left: auto;
}

@keyframes ostLivePulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35), 0 4px 14px rgba(239, 68, 68, 0.25); }
  50%      { box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.6),  0 6px 22px rgba(239, 68, 68, 0.45); }
}

.prediction-market-footer,
.prediction-market-meta-row,
.prediction-market-actions {
  flex-wrap: wrap;
}

.prediction-market-actions {
  margin-top: auto;
  justify-content: flex-start;
  gap: 8px;
}

.prediction-market-actions .prediction-market-api-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}

.prediction-market-source,
.prediction-market-topic,
.prediction-market-contract {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.prediction-market-source.source-polymarket {
  border: 1px solid rgba(109,159,255,.22);
  background: rgba(109,159,255,.1);
  color: #dbeafe;
}

.prediction-market-source.source-kalshi {
  border: 1px solid rgba(52,211,153,.22);
  background: rgba(52,211,153,.1);
  color: #d1fae5;
}

.prediction-market-topic,
.prediction-market-contract {
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  color: var(--text-muted);
}

.prediction-market-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.prediction-market-spotlight {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(245,196,104,.2);
  background: rgba(245,196,104,.1);
  color: #f8e2a3;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.prediction-market-card.is-featured {
  grid-column: auto;
  gap: 18px;
  padding: 22px;
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 22px 48px rgba(0,0,0,.28);
}

.prediction-market-card.is-featured.source-polymarket-card {
  background:
    radial-gradient(circle at top left, rgba(109,159,255,.18), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
}

.prediction-market-card.is-featured.source-kalshi-card {
  background:
    radial-gradient(circle at top left, rgba(52,211,153,.16), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
}

.prediction-market-card.is-featured h5 {
  font-size: 1.24rem;
  line-height: 1.34;
}

.prediction-market-card.is-featured p {
  font-size: .93rem;
  max-width: 64ch;
}

.prediction-market-card.is-featured .prediction-market-price-grid {
  grid-template-columns: repeat(2, minmax(0, 180px));
  justify-content: flex-start;
}

.prediction-market-card.is-featured .prediction-market-price {
  background: rgba(5,8,14,.55);
}

.prediction-trade-desk {
  display: grid;
  gap: 12px;
  position: sticky;
  top: 18px;
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at top right, rgba(109,159,255,.16), transparent 36%),
    radial-gradient(circle at bottom left, rgba(52,211,153,.1), transparent 30%),
    linear-gradient(180deg, rgba(5,8,14,.88), rgba(5,8,14,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 20px 40px rgba(0,0,0,.22);
  scrollbar-width: thin;
}

.prediction-trade-head h5,
.prediction-selected-card h6,
.prediction-trade-receipt h6 {
  margin: 0;
  font-size: 1.08rem;
}

.prediction-trade-head p,
.prediction-selected-card p {
  margin: 8px 0 0;
  color: var(--text-muted);
  line-height: 1.6;
}

.prediction-selected-card,
.prediction-trade-receipt,
.prediction-position-ledger {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}

.prediction-selected-topline,
.prediction-position-ledger-head,
.prediction-trade-receipt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.prediction-outcome-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.prediction-side-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  color: var(--text-muted);
  transition: border-color .2s ease, background .2s ease, transform .2s ease, color .2s ease;
}

.prediction-side-btn:hover {
  transform: translateY(-1px);
  color: var(--text);
}

.prediction-side-btn strong {
  font-size: 1.08rem;
  color: var(--text);
}

.prediction-side-btn.is-active[data-prediction-side="yes"] {
  border-color: rgba(52,211,153,.3);
  background: rgba(52,211,153,.1);
  color: #d1fae5;
}

.prediction-side-btn.is-active[data-prediction-side="no"] {
  border-color: rgba(248,113,113,.28);
  background: rgba(248,113,113,.08);
  color: #fecaca;
}

.prediction-stake-field {
  display: block;
}

.prediction-stake-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.prediction-trade-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.prediction-trade-stat strong {
  font-size: 1rem;
}

.prediction-trade-status {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  color: var(--text-muted);
  line-height: 1.55;
}

.prediction-trade-status.is-info {
  border-color: rgba(109,159,255,.18);
  background: rgba(109,159,255,.08);
  color: #dbeafe;
}

.prediction-trade-status.is-success {
  border-color: rgba(52,211,153,.22);
  background: rgba(52,211,153,.08);
  color: #d1fae5;
}

.prediction-trade-status.is-warning {
  border-color: rgba(245,196,104,.22);
  background: rgba(245,196,104,.08);
  color: #f8e2a3;
}

.prediction-trade-status.is-error {
  border-color: rgba(248,113,113,.24);
  background: rgba(248,113,113,.08);
  color: #fecaca;
}

.prediction-trade-action {
  width: 100%;
  justify-content: center;
}

.prediction-trade-receipt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.prediction-position-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.prediction-position-row,
.prediction-position-empty {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.05);
  background: rgba(5,8,14,.45);
}

.prediction-position-row {
  display: grid;
  gap: 10px;
}

.prediction-position-empty {
  color: var(--text-muted);
  text-align: center;
}

.prediction-position-row-top,
.prediction-position-row-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.prediction-position-row strong {
  display: block;
  font-size: .92rem;
}

.prediction-position-row span,
.prediction-position-row a {
  font-size: .78rem;
  color: var(--text-muted);
}

.prediction-position-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.prediction-position-pill.side-yes {
  border: 1px solid rgba(52,211,153,.22);
  background: rgba(52,211,153,.08);
  color: #d1fae5;
}

.prediction-position-pill.side-no {
  border: 1px solid rgba(248,113,113,.22);
  background: rgba(248,113,113,.08);
  color: #fecaca;
}

.prediction-market-card h5 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.45;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prediction-market-card p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
  font-size: .88rem;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prediction-market-price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.prediction-market-price {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(5,8,14,.45);
}

.prediction-market-price span {
  display: block;
  font-size: .74rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.prediction-market-price strong {
  display: block;
  margin-top: 6px;
  font-size: 1.12rem;
}

.prediction-market-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.prediction-market-metric span {
  font-size: .72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.prediction-market-metric strong {
  font-size: .88rem;
}

.prediction-market-link,
.prediction-market-api-link {
  color: var(--accent);
  font-size: .82rem;
  font-weight: 700;
  text-underline-offset: 2px;
}

.prediction-market-quick-btn,
.prediction-market-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  color: var(--text);
  font-size: .76rem;
  font-weight: 800;
  line-height: 1;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.prediction-market-quick-btn:hover,
.prediction-market-open-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(109,159,255,.26);
  background: rgba(109,159,255,.08);
}

.prediction-market-quick-btn.is-yes {
  border-color: rgba(52,211,153,.22);
  color: #d1fae5;
}

.prediction-market-quick-btn.is-no {
  border-color: rgba(248,113,113,.22);
  color: #fecaca;
}

.prediction-market-api-link {
  color: var(--text-muted);
}

.prediction-market-link:hover,
.prediction-market-api-link:hover {
  text-decoration: underline;
}

.prediction-market-link.is-disabled {
  opacity: .45;
  pointer-events: none;
}

.prediction-market-rank-toggle {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 3px;
  scrollbar-width: thin;
}

.prediction-market-main {
  display: grid;
  gap: 18px;
}

.prediction-market-stage {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at top left, rgba(109,159,255,.14), transparent 36%),
    radial-gradient(circle at bottom right, rgba(52,211,153,.1), transparent 34%),
    linear-gradient(180deg, rgba(5,8,14,.94), rgba(4,7,12,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 40px rgba(0,0,0,.22);
}

.prediction-stage-head {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
  gap: 14px;
  align-items: start;
}

.prediction-stage-topline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.prediction-stage-copy h5 {
  margin: 10px 0 8px;
  font-size: 1.2rem;
  line-height: 1.32;
}

.prediction-stage-copy p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 68ch;
}

.prediction-stage-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.prediction-stage-stat {
  min-height: 86px;
}

.prediction-stage-body {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .75fr);
  gap: 12px;
}

.prediction-stage-chart-card,
.prediction-depth-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

.prediction-stage-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.prediction-stage-panel-head strong {
  display: block;
  font-size: 1rem;
}

.prediction-stage-panel-head p {
  margin: 6px 0 0;
  color: var(--text-muted);
  line-height: 1.55;
  font-size: .84rem;
}

.prediction-stage-trend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.prediction-stage-trend.is-up {
  border-color: rgba(52,211,153,.26);
  background: rgba(52,211,153,.1);
  color: #d1fae5;
}

.prediction-stage-trend.is-down {
  border-color: rgba(248,113,113,.24);
  background: rgba(248,113,113,.1);
  color: #fecaca;
}

.prediction-stage-chart {
  width: 100%;
  min-height: 240px;
  display: block;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(5,8,14,.86);
}

.prediction-stage-axis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-muted);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.prediction-stage-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.prediction-depth-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.prediction-depth-label {
  display: block;
  margin-bottom: 8px;
  font-size: .78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.prediction-depth-list {
  display: grid;
  gap: 10px;
}

.prediction-depth-row,
.prediction-depth-empty {
  position: relative;
  overflow: hidden;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.05);
  background: rgba(5,8,14,.5);
}

.prediction-depth-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.prediction-depth-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, rgba(109,159,255,.18), rgba(52,211,153,.1));
  pointer-events: none;
}

.prediction-depth-row span,
.prediction-depth-row strong,
.prediction-depth-row em {
  position: relative;
  z-index: 1;
}

.prediction-depth-row span {
  font-size: .8rem;
  color: #eff6ff;
  font-weight: 700;
}

.prediction-depth-row strong {
  font-size: .84rem;
  color: var(--text);
}

.prediction-depth-row em {
  font-style: normal;
  font-size: .76rem;
  color: var(--text-muted);
}

.prediction-depth-empty {
  color: var(--text-muted);
  text-align: center;
}

.prediction-market-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.prediction-market-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.prediction-market-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.prediction-market-probability-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #dbeafe;
  font-size: .78rem;
  font-weight: 700;
}

.prediction-market-bar {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}

.prediction-market-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(109,159,255,.85), rgba(52,211,153,.92));
}

.prediction-market-contract-trend {
  color: #dbeafe;
}

.prediction-trade-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.prediction-trade-stat strong {
  font-size: .96rem;
}

@media (max-width: 1200px) {
  .prediction-market-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .prediction-market-side {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .prediction-market-hero-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .prediction-market-pulse {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .prediction-market-shell {
    grid-template-columns: 1fr;
  }

  .prediction-trade-desk {
    position: static;
    max-height: none;
  }
}

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

  .prediction-market-side,
  .prediction-market-hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .prediction-stage-head,
  .prediction-stage-body {
    grid-template-columns: 1fr;
  }

  .prediction-stage-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .prediction-market-stage,
  .prediction-stage-chart-card,
  .prediction-depth-card {
    padding: 16px;
  }

  .prediction-market-hero-card,
  .prediction-market-pulse-wrap {
    padding: 16px;
  }

  .prediction-stage-panel-head,
  .prediction-stage-axis {
    flex-direction: column;
    align-items: flex-start;
  }

  .prediction-market-hero-actions,
  .prediction-market-pulse-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .prediction-stage-stats,
  .prediction-depth-columns,
  .prediction-trade-metrics {
    grid-template-columns: 1fr;
  }

  .prediction-market-hero-price-grid,
  .prediction-market-hero-metrics,
  .prediction-market-pulse,
  .prediction-market-side {
    grid-template-columns: 1fr;
  }

  .prediction-depth-row {
    grid-template-columns: 1fr;
  }

  .prediction-market-load-card {
    align-items: stretch;
    flex-direction: column;
  }
}

.wallet-region-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.wallet-region-row .fiat-pill {
  margin: 0;
}

.wallet-dashboard { max-width: 900px; margin: 0 auto; }

/* Not connected state */
.wd-not-connected { text-align: center; }
.wd-hero-icon { font-size: 4rem; margin-bottom: 16px; }
.wd-not-connected h3 { font-size: 1.6rem; margin-bottom: 8px; }

.wd-create-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin: 32px 0;
}
.wd-create-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px 20px; text-align: center; transition: all .25s;
}
.wd-create-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--glow); }
.wd-card-seedless { border-color: rgba(167,139,250,.3); background: linear-gradient(135deg, rgba(167,139,250,.06), transparent); }
.wd-card-seedless:hover { border-color: var(--accent2); box-shadow: 0 0 30px rgba(167,139,250,.15); }
.wd-card-icon { font-size: 2.5rem; margin-bottom: 12px; }
.wd-create-card h4 { font-size: 1.1rem; margin-bottom: 6px; }
.wd-create-card p { font-size: .85rem; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; }
.wd-card-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 16px; }
.wd-tag { padding: 3px 10px; background: var(--bg); border-radius: 12px; font-size: .72rem; color: var(--text-muted); border: 1px solid var(--border); }
.wd-tag-new { background: rgba(167,139,250,.15); color: var(--accent2); border-color: rgba(167,139,250,.3); }
.wd-connect-btn { width: 100%; justify-content: center; padding: 10px 16px !important; font-size: .85rem !important; }

.wd-download-links { margin-top: 32px; }
.wd-dl-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 12px; }
.wd-dl-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: .85rem; color: var(--text); transition: all .2s;
}
.wd-dl-link:hover { border-color: var(--accent); color: var(--accent); }

.wd-journey {
  margin-bottom: 24px;
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid rgba(109,159,255,.18);
  background:
    radial-gradient(circle at top right, rgba(109,159,255,.14), transparent 36%),
    linear-gradient(155deg, rgba(255,255,255,.04), rgba(10,13,23,.92));
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
}

.wd-journey-head {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.wd-journey-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(109,159,255,.22);
  background: rgba(109,159,255,.1);
  color: #cfe0ff;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.wd-journey-head h4 {
  margin: 0;
  font-size: 1.18rem;
}

.wd-journey-head p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.wd-journey-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.wd-journey-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}

.wd-journey-step.is-ready {
  border-color: rgba(52,211,153,.24);
  background: rgba(52,211,153,.08);
}

.wd-journey-step.is-active {
  border-color: rgba(109,159,255,.26);
  background: rgba(109,159,255,.1);
}

.wd-journey-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.wd-journey-step.is-ready .wd-journey-step-index {
  background: rgba(52,211,153,.18);
  border-color: rgba(52,211,153,.26);
  color: #c8ffe7;
}

.wd-journey-step.is-active .wd-journey-step-index {
  background: rgba(109,159,255,.18);
  border-color: rgba(109,159,255,.24);
  color: #d9e7ff;
}

.wd-journey-step-copy {
  min-width: 0;
}

.wd-journey-step-copy strong {
  display: block;
  margin-bottom: 4px;
  color: #fff;
}

.wd-journey-step-copy p {
  margin: 0;
  color: var(--text-muted);
  font-size: .84rem;
  line-height: 1.5;
}

.wd-journey-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.wd-journey-actions .btn {
  min-height: 44px;
}

.wd-intelligence {
  margin-bottom: 24px;
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid rgba(109,159,255,.16);
  background:
    radial-gradient(circle at top left, rgba(52,211,153,.08), transparent 30%),
    linear-gradient(160deg, rgba(255,255,255,.04), rgba(10,13,23,.94));
  box-shadow: 0 18px 48px rgba(0,0,0,.16);
}

.wd-intelligence-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.wd-intelligence-head h4 {
  margin: 6px 0 8px;
  font-size: 1.16rem;
}

.wd-intelligence-head p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.wd-intelligence-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(109,159,255,.24);
  background: rgba(109,159,255,.08);
  color: #dce8ff;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.wd-intelligence-badge.is-live {
  border-color: rgba(52,211,153,.28);
  background: rgba(52,211,153,.12);
  color: #d8fff0;
}

.wd-intelligence-badge.is-warning {
  border-color: rgba(245,196,104,.28);
  background: rgba(245,196,104,.12);
  color: #ffe7b3;
}

.wd-intelligence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.wd-intel-card {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}

.wd-intel-card span {
  display: block;
  margin-bottom: 10px;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wd-intel-card strong {
  display: block;
  font-size: 1.05rem;
  color: #fff;
}

.wd-intel-card p {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.5;
}

.wd-intelligence-chart-card {
  margin-top: 16px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(5,8,14,.78);
}

.wd-intelligence-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.wd-intelligence-chart-head strong {
  display: block;
  color: #fff;
}

.wd-intelligence-chart-head p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: .84rem;
  line-height: 1.5;
}

.wd-portfolio-chart {
  display: block;
  width: 100%;
  min-height: 240px;
}

.wd-portfolio-axis {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  color: var(--text-muted);
  font-size: .78rem;
}

.wd-route-matrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.wd-route-card {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}

.wd-route-card strong {
  display: block;
  margin: 12px 0 8px;
  color: #fff;
}

.wd-route-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: .83rem;
  line-height: 1.52;
}

.wd-route-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: #dce6ff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.wd-route-status.is-live {
  border-color: rgba(52,211,153,.28);
  background: rgba(52,211,153,.12);
  color: #d6ffee;
}

.wd-route-status.is-warning {
  border-color: rgba(245,196,104,.28);
  background: rgba(245,196,104,.12);
  color: #ffe5ac;
}

.wd-route-status.is-preview {
  border-color: rgba(109,159,255,.26);
  background: rgba(109,159,255,.1);
  color: #d9e7ff;
}

.prediction-market-tape {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scroll-snap-type: x proximity;
}

.prediction-market-tape::-webkit-scrollbar {
  height: 4px;
}

.prediction-market-tape::-webkit-scrollbar-thumb {
  background: rgba(109,159,255,.35);
}

.prediction-tape-chip {
  min-width: 220px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  color: var(--text);
  text-align: left;
  scroll-snap-align: start;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.prediction-tape-chip:hover,
.prediction-tape-chip.is-selected {
  border-color: rgba(109,159,255,.28);
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(0,0,0,.14);
}

.prediction-tape-chip strong {
  display: block;
  margin: 10px 0 8px;
  color: #fff;
  line-height: 1.35;
}

.prediction-tape-chip span,
.prediction-tape-chip em {
  display: block;
  font-size: .8rem;
}

.prediction-tape-chip span {
  color: var(--text-muted);
}

.prediction-tape-chip em {
  margin-top: 8px;
  color: #dce8ff;
  font-style: normal;
  font-weight: 600;
}

.prediction-tape-chip.is-up em {
  color: var(--success);
}

.prediction-tape-chip.is-down em {
  color: #f6a6a6;
}

.prediction-tape-empty {
  padding: 16px;
  min-width: 220px;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,.12);
  color: var(--text-muted);
  font-size: .84rem;
}

.prediction-trade-breakdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

/* Connected state */
.wd-profile {
  display: flex; align-items: center; gap: 16px; padding: 20px 24px;
  background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border);
  margin-bottom: 24px;
}
.wd-avatar {
  width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent2)); font-size: 1.5rem; flex-shrink: 0;
}
.wd-info { flex: 1; min-width: 0; }
.wd-address { font-family: 'JetBrains Mono', monospace; font-size: 1rem; font-weight: 600; }
.wd-network { font-size: .8rem; color: var(--text-muted); margin-top: 2px; }
.btn-sm { padding: 6px 14px !important; font-size: .8rem !important; }

.wd-balances { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.wd-balance-card {
  display: flex; align-items: center; gap: 16px; padding: 20px;
  background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border);
}
.wd-balance-sol { border-color: rgba(167,139,250,.25); }
.wd-balance-ost { border-color: rgba(109,159,255,.25); }
.wd-bal-icon { font-size: 2rem; }
.wd-bal-info { flex: 1; }
.wd-bal-amount { font-size: 1.5rem; font-weight: 700; }
.wd-bal-label { font-size: .8rem; color: var(--text-muted); }
.wd-bal-usd { font-size: .9rem; color: var(--success); font-weight: 600; }

.wd-actions {
  display: flex; gap: 12px; justify-content: center; margin-bottom: 24px;
}
.wd-action-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 20px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: .85rem; color: var(--text); transition: all .2s;
  min-width: 80px; text-decoration: none;
}
.wd-action-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.wd-action-btn span { font-size: 1.3rem; }

.wd-receive-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; text-align: center; margin-bottom: 24px;
}
.wd-receive-panel h4 { margin-bottom: 6px; }
.wd-qr { margin: 16px auto; display: flex; justify-content: center; }
.wd-receive-addr {
  font-family: 'JetBrains Mono', monospace; font-size: .85rem; color: var(--text-muted);
  word-break: break-all; margin-bottom: 12px; padding: 8px; background: var(--bg); border-radius: 8px;
}

.wd-quick-links { margin-top: 8px; }
.wd-quick-links h4 { text-align: center; margin-bottom: 16px; color: var(--text-muted); }
.wd-ql-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wd-ql-item {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: .85rem; color: var(--text); transition: all .2s; text-decoration: none;
}
.wd-ql-item:hover { border-color: var(--accent); color: var(--accent); }
.wd-ql-item span { font-size: 1.1rem; }

@media (max-width: 1100px) {
  .wallet-command-hero,
  .wallet-access-grid,
  .wallet-market-grid-shell,
  .wallet-convert-grid {
    grid-template-columns: 1fr;
  }

  .wallet-portal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .prediction-market-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .wallet-command-shell {
    gap: 20px;
  }

  .wallet-command-copy,
  .wallet-market-board,
  .wallet-side-card,
  .wallet-coming-card {
    padding: 22px 18px;
  }

  .wd-journey {
    padding: 20px 18px;
  }

  .wd-journey-grid {
    grid-template-columns: 1fr;
  }

  .wd-intelligence {
    padding: 20px 18px;
  }

  .wd-intelligence-head,
  .wd-intelligence-chart-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .wd-intelligence-grid,
  .wd-route-matrix {
    grid-template-columns: 1fr;
  }

  .wd-journey-actions {
    flex-direction: column;
  }

  .wd-journey-actions .btn {
    width: 100%;
  }

  .wallet-market-main,
  .wallet-market-strip {
    grid-template-columns: 1fr;
  }

  .wallet-tabs {
    width: 100%;
    border-radius: 24px;
  }

  .wallet-tab-btn {
    flex: 1 1 calc(50% - 10px);
    min-height: 44px;
  }

  .wallet-portal-grid {
    grid-template-columns: 1fr;
  }

  .prediction-market-board {
    padding: 22px 18px;
  }

  .prediction-market-search-row {
    flex-direction: column;
    align-items: stretch;
  }

  .prediction-market-head {
    grid-template-columns: 1fr;
  }

  .prediction-market-shell,
  .prediction-trade-metrics,
  .prediction-trade-breakdown,
  .prediction-trade-receipt-grid {
    grid-template-columns: 1fr;
  }

  .prediction-trade-desk {
    position: static;
  }

  .prediction-market-side {
    align-items: flex-start;
    min-width: 0;
  }

  .prediction-market-summary,
  .prediction-market-grid,
  .prediction-market-price-grid {
    grid-template-columns: 1fr;
  }

  .prediction-market-card.is-featured {
    grid-column: auto;
  }

  .wallet-region-row .fiat-pill {
    flex: 1 1 calc(50% - 10px);
    text-align: center;
  }
}

@media (max-width: 720px) {
  .prediction-market-board {
    gap: 12px;
    padding: 14px 12px;
    border-radius: 16px;
  }

  .prediction-market-copy p,
  .prediction-market-hero-copy p,
  .prediction-stage-copy p,
  .prediction-trade-head p,
  .prediction-selected-card p {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .prediction-market-side-stack,
  .prediction-market-pulse-wrap,
  .prediction-depth-card,
  .prediction-market-card p,
  .prediction-market-tags,
  .prediction-market-price-grid,
  .prediction-market-meta-row,
  .prediction-market-footer {
    display: none;
  }

  .prediction-market-summary,
  .prediction-market-hero-price-grid,
  .prediction-market-hero-metrics,
  .prediction-stage-stats,
  .prediction-trade-metrics,
  .prediction-trade-breakdown,
  .prediction-trade-receipt-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .prediction-market-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .prediction-market-stat,
  .prediction-market-hero-price,
  .prediction-market-hero-metric,
  .prediction-stage-stat {
    padding: 10px;
    border-radius: 10px;
  }

  .prediction-market-stat strong,
  .prediction-market-hero-price strong,
  .prediction-market-hero-metric strong {
    font-size: .88rem;
  }

  .prediction-market-card,
  .prediction-market-empty-card {
    gap: 9px;
    padding: 12px;
    border-radius: 12px;
  }

  .prediction-market-card h5 {
    font-size: .92rem;
    line-height: 1.35;
  }

  .prediction-market-topline,
  .prediction-market-probability-row,
  .prediction-market-actions {
    gap: 7px;
  }

  .prediction-market-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .prediction-market-actions .prediction-market-api-link,
  .prediction-market-quick-btn,
  .prediction-market-open-btn {
    width: 100%;
    min-height: 32px;
    padding: 7px 8px;
  }

  .prediction-stage-chart {
    min-height: 190px;
  }

  .prediction-stage-chart-card {
    padding: 12px;
  }

  .prediction-market-load-card strong {
    font-size: .82rem;
  }
}

/* ==================================================================
   BRIDGES, RAMPS & EXCHANGES
   ================================================================== */
.bridge-hub h3 { font-size: 1.3rem; margin-bottom: 6px; }
.bridge-hub > p { color: var(--text-muted); font-size: .9rem; margin-bottom: 20px; }
.bridge-hub { margin-bottom: 48px; }

.bridge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bridge-card, .ramp-card, .offramp-card, .dex-card {
  display: flex; flex-direction: column; padding: 24px 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  transition: all .25s; text-decoration: none; color: var(--text);
}
.bridge-card:hover, .ramp-card:hover, .offramp-card:hover, .dex-card:hover {
  border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--glow);
  color: var(--text);
}
.bridge-icon { font-size: 2rem; margin-bottom: 12px; }
.bridge-card h4, .ramp-card h4, .offramp-card h4, .dex-card h4 { font-size: 1rem; margin-bottom: 6px; }
.bridge-card p, .ramp-card p, .offramp-card p, .dex-card p { font-size: .82rem; color: var(--text-muted); line-height: 1.5; flex: 1; }
.bridge-chains { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.bridge-chains span {
  padding: 2px 8px; font-size: .72rem; background: var(--bg); border-radius: 8px;
  color: var(--text-muted); border: 1px solid var(--border);
}
.bridge-status { margin-top: 10px; }
.bridge-live {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .75rem; color: var(--success); font-weight: 600;
}
.bridge-live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--success); animation: livePulse 2s infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; } 50% { opacity: .4; }
}

/* How to buy steps */
.bridge-how { margin-top: 48px; text-align: center; }
.bridge-how h3 { font-size: 1.4rem; margin-bottom: 8px; }
.bridge-how > p { color: var(--text-muted); margin-bottom: 24px; }
.bridge-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bridge-step {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 24px 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); text-align: center;
}
.bridge-step-num {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; border-radius: 50%; font-weight: 700; font-size: 1rem;
}
.bridge-step h4 { font-size: .95rem; }
.bridge-step p { font-size: .82rem; color: var(--text-muted); line-height: 1.5; }

/* 43 currencies grid */
.fiat-grid-full {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  margin-top: 24px;
}
.fiat-grid-full a {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: .82rem; color: var(--text); transition: all .2s; text-decoration: none;
}
.fiat-grid-full a:hover { border-color: var(--accent); color: var(--accent); }

/* ==================================================================
   HERO ENHANCEMENTS — Futuristic Feel
   ================================================================== */
.particle-canvas {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
  pointer-events: none;
}
.hero-badge-row {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px;
  opacity: 0; animation: fadeUp .8s .2s forwards;
}
.hero-live-badge, .hero-era-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 20px; font-size: .75rem; font-weight: 600;
  border: 1px solid var(--border); backdrop-filter: blur(8px);
}
.hero-live-badge { background: rgba(52,211,153,.1); color: var(--success); border-color: rgba(52,211,153,.3); }
.hero-era-badge { background: rgba(109,159,255,.08); color: var(--accent); }
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--success);
  animation: livePulse 2s infinite;
}
.btn-pulse { animation: btnPulse 3s infinite; }
@keyframes btnPulse {
  0%,100% { box-shadow: 0 0 20px rgba(109,159,255,.2); }
  50% { box-shadow: 0 0 40px rgba(109,159,255,.5), 0 0 60px rgba(167,139,250,.2); }
}

/* ==================================================================
   CENSORSHIP CASES
   ================================================================== */
.censorship-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.censorship-case {
  padding: 24px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); transition: all .25s;
}
.censorship-case:hover { border-color: rgba(239,68,68,.4); transform: translateY(-2px); }
.cc-flag { font-size: 2rem; margin-bottom: 10px; }
.censorship-case h4 { font-size: 1rem; margin-bottom: 8px; }
.censorship-case p { font-size: .85rem; color: var(--text-muted); line-height: 1.6; }
.cc-source { margin-top: 10px; font-size: .72rem; color: var(--text-muted); opacity: .7; font-style: italic; }

/* ==================================================================
   BROWSER MOCKUP — Pay Anywhere
   ================================================================== */
.ost-browser {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin-top: 24px;
}
.browser-chrome {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.browser-dots { display: flex; gap: 6px; }
.browser-dots span {
  width: 12px; height: 12px; border-radius: 50%; background: var(--surface2);
}
.browser-dots span:nth-child(1) { background: #ef4444; }
.browser-dots span:nth-child(2) { background: #f59e0b; }
.browser-dots span:nth-child(3) { background: #22c55e; }
.browser-bar {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: var(--surface2); border-radius: 8px; padding: 6px 12px;
  border: 1px solid var(--border);
}
.browser-lock { font-size: .85rem; }
.browser-url-input {
  flex: 1; background: none; border: none; color: var(--text); font-size: .85rem;
  outline: none; font-family: inherit;
}
.browser-url-input::placeholder { color: var(--text-muted); }
.browser-go {
  padding: 4px 12px; background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; border: none; border-radius: 6px; font-size: .8rem; font-weight: 600;
  cursor: pointer; transition: all .2s;
}
.browser-go:hover { transform: scale(1.05); }
.browser-ost-badge {
  padding: 4px 10px; background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.3);
  border-radius: 12px; font-size: .72rem; color: var(--success); font-weight: 600;
  white-space: nowrap;
}
.browser-viewport {
  min-height: 380px; padding: 24px; position: relative;
}
.browser-placeholder { text-align: center; }
.browser-placeholder-icon { font-size: 4rem; margin-bottom: 12px; }
.browser-placeholder h4 { font-size: 1.3rem; margin-bottom: 8px; }
.browser-quick-links {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0 0;
  padding-top: 16px; border-top: 1px solid var(--border);
}
.browser-quick {
  padding: 6px 14px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: .8rem; color: var(--text-muted);
  cursor: pointer; transition: all .2s;
}
.browser-quick:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

/* Auto-cycling Showcase */
.browser-auto-showcase {
  min-height: 280px; display: flex; align-items: center; justify-content: center;
}
.showcase-fade-in { animation: showcaseFade .5s ease-out; }
@keyframes showcaseFade {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.showcase-card {
  width: 100%; max-width: 560px; margin: 0 auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.showcase-store-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--surface2); border-bottom: 1px solid var(--border);
  font-size: .8rem;
}
.showcase-domain { font-weight: 600; }
.showcase-badge {
  color: var(--success); font-size: .72rem; font-weight: 600;
  padding: 3px 10px; background: rgba(52,211,153,.1); border-radius: 10px;
  border: 1px solid rgba(52,211,153,.25);
}
.showcase-body {
  display: flex; gap: 20px; padding: 20px;
}
.showcase-img {
  width: 140px; height: 140px; flex-shrink: 0; border-radius: 12px;
  overflow: hidden; background: var(--surface2); display: flex; align-items: center; justify-content: center;
}
.showcase-img img {
  width: 100%; height: 100%; object-fit: cover;
}
.showcase-info { flex: 1; min-width: 0; }
.showcase-info h4 { font-size: 1.1rem; margin-bottom: 6px; color: var(--text); }
.showcase-info p { font-size: .82rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 12px; }
.showcase-prices {
  display: flex; align-items: center; gap: 10px;
}
.showcase-fiat { font-size: 1.15rem; font-weight: 700; color: var(--warm); }
.showcase-arrow { color: var(--text-muted); font-size: .9rem; }
.showcase-ost { font-size: 1.15rem; font-weight: 700; color: var(--accent); }
.showcase-ext-cta {
  padding: 12px 20px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end;
}
.showcase-pay-btn {
  font-size: .85rem !important; padding: 8px 20px !important;
}

/* Simulated store product cards (browser viewport) */
.sim-products-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;
  padding: 16px 0;
}
.sim-product-card {
  background: #fff; border: 1px solid #e2e5ea; border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s;
}
.sim-product-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.1); }
.sim-product-card .sim-product-img {
  width: 100%; height: 160px; object-fit: cover; display: block; background: #f3f4f6;
}
.sim-product-card .sim-product-img-emoji {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 160px;
  font-size: 3rem; background: #f3f4f6;
}
.sim-product-body { padding: 12px 14px; flex: 1; }
.sim-product-name { display: block; font-weight: 600; font-size: .9rem; color: #111; margin-bottom: 4px; }
.sim-product-desc { display: block; font-size: .78rem; color: #666; line-height: 1.35; margin-bottom: 8px; }
.sim-product-price { display: block; font-size: .95rem; font-weight: 700; color: #111; }
.sim-product-ost { display: block; font-size: .8rem; color: #6d9fff; font-weight: 600; margin-top: 2px; }
.sim-pay-item-btn {
  margin: 0 14px 14px; font-size: .82rem !important; padding: 8px 16px !important;
  justify-content: center; text-align: center;
}

/* OST Extension Overlay */
.ost-ext-overlay {
  position: absolute; bottom: 16px; right: 16px; width: 300px;
  background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 16px; box-shadow: 0 8px 40px rgba(0,0,0,.5); z-index: 10;
}
.ext-header { font-size: .85rem; font-weight: 600; color: var(--accent); margin-bottom: 10px; }
.ext-logo { font-size: 1rem; margin-right: 4px; }
.ext-product { font-size: .9rem; margin-bottom: 8px; }
.ext-conversion { font-size: .85rem; color: var(--text-muted); margin-bottom: 12px; }
.ext-pay-btn { width: 100%; justify-content: center; }
.ext-footer { font-size: .68rem; color: var(--text-muted); text-align: center; margin-top: 8px; }
/* Browser site loaded state */
.browser-site-frame {
  width: 100%; border: none; min-height: 400px; border-radius: 8px; background: #fff;
}
.browser-checkout {
  position: absolute; bottom: 16px; right: 16px; width: 320px;
  background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 20px; box-shadow: 0 8px 40px rgba(0,0,0,.4);
  z-index: 10;
}
.checkout-header h4 { font-size: 1rem; margin-bottom: 4px; color: var(--accent); }
.checkout-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: .85rem; color: var(--text-muted); }
.checkout-row-big { font-weight: 700; font-size: 1rem; color: var(--text); border-top: 1px solid var(--border); padding-top: 10px; margin-top: 6px; }
.checkout-row-fee { font-size: .78rem; }

/* ==================================================================
   ROADMAP
   ================================================================== */
.roadmap-track { max-width: 800px; margin: 0 auto; }
.roadmap-phase {
  padding: 20px 24px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  border-left: 4px solid var(--border);
}
.roadmap-done { border-left-color: var(--success); }
.roadmap-current { border-left-color: var(--accent); background: rgba(109,159,255,.04); }
.roadmap-future { opacity: .8; }
.roadmap-phase-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.roadmap-status-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.roadmap-status-dot.done { background: var(--success); }
.roadmap-status-dot.current { background: var(--accent); animation: livePulse 2s infinite; }
.roadmap-status-dot.future { background: var(--text-muted); }
.roadmap-date { font-size: .8rem; color: var(--text-muted); margin-left: auto; }
.roadmap-items { list-style: none; padding: 0; margin: 0; }
.roadmap-items li {
  padding: 4px 0; font-size: .88rem; color: var(--text-muted);
}
.roadmap-items li.done { color: var(--success); }
.roadmap-items li.active { color: var(--accent); font-weight: 600; }

/* ==================================================================
   UNIVERSAL IN-PAGE POPUP (iframe overlay)
   ================================================================== */
.ost-popup-overlay {
  display: none; position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.75); backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
}
.ost-popup-overlay.open { display: flex; }
.ost-popup-overlay[aria-hidden="true"] { display: none !important; }
.ost-popup {
  width: 94vw; max-width: 900px; height: 85vh;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.ost-popup-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: var(--bg); border-bottom: 1px solid var(--border);
}
.ost-popup-title {
  font-size: .9rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80%;
}
.ost-popup-close {
  background: none; border: none; color: var(--text-muted); font-size: 1.5rem;
  cursor: pointer; line-height: 1; padding: 4px 8px; border-radius: 8px;
  transition: background .2s, color .2s;
}
.ost-popup-close:hover { background: rgba(255,255,255,.08); color: #fff; }
.ost-popup-frame {
  flex: 1; width: 100%; border: none; background: #0d1117;
}
@media (max-width: 600px) {
  .ost-popup { width: 100vw; height: 100vh; max-width: 100%; border-radius: 0; }
}



/* ==================================================================
   SIMULATED STORE (Browser Mockup)
   ================================================================== */
.sim-store { padding: 20px; font-family: Inter, sans-serif; }
.sim-store-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 12px; }
.sim-store-icon { font-size: 2rem; }
.sim-store-header h4 { font-size: 1.3rem; color: #111; margin: 0; flex: 1; }
.sim-ost-badge {
  background: linear-gradient(135deg, #6d9fff, #34d399); color: #fff; font-size: .7rem; font-weight: 700;
  padding: 4px 10px; border-radius: 20px; white-space: nowrap;
}
.sim-products { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.sim-product {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer;
  background: #fff; border: 2px solid #e5e7eb; border-radius: 10px; transition: border-color .2s, background .2s;
}
.sim-product-selected { border-color: #6d9fff; background: #f0f7ff; }
.sim-product-check { accent-color: #6d9fff; width: 16px; height: 16px; cursor: pointer; }
.sim-product-img { font-size: 1.8rem; line-height: 1; }
.sim-product-info { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sim-product-name { font-size: .9rem; color: #333; font-weight: 500; }
.sim-product-price { font-size: .9rem; color: #111; font-weight: 700; white-space: nowrap; }
.sim-cart {
  padding: 14px; background: #f0fdf4; border: 1px solid #bbf7d0;
  border-radius: 10px; font-size: 1rem; color: #111; text-align: right;
}
.sim-address { margin-top: 16px; }
.sim-address h5 { color: #333; margin: 0 0 10px 0; font-size: .95rem; }
.sim-addr-fields { display: flex; flex-direction: column; gap: 8px; }
.sim-addr-row { display: flex; gap: 8px; }
.sim-input {
  padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px;
  font-size: .85rem; background: #fff; color: #111; width: 100%; box-sizing: border-box;
}
.sim-input:focus { outline: 2px solid #6d9fff; border-color: #6d9fff; }
select.sim-input { cursor: pointer; }

/* Real-site iframe bar */
.sim-real-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  background: #111827; color: #d1d5db; font-size: .8rem; border-bottom: 1px solid #1f2937;
}
.sim-real-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; display: inline-block;
  animation: sim-dot-pulse 1.2s infinite;
}
.sim-real-dot-ok { background: #34d399; animation: none; }
@keyframes sim-dot-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.sim-real-iframe {
  width: 100%; height: calc(100% - 38px); border: none; background: #fff;
}
.sim-real-fallback-btn {
  margin-left: auto; background: none; border: 1px solid #374151; color: #9ca3af;
  padding: 3px 10px; border-radius: 6px; font-size: .75rem; cursor: pointer;
}
.sim-real-fallback-btn:hover { background: #1f2937; color: #fff; }
.sim-pay-overlay-btn { font-size: .75rem !important; padding: 4px 12px !important; }

/* Popup fallback card */
.ost-popup-fallback {
  display: none; flex: 1; align-items: center; justify-content: center; background: var(--surface);
}

/* Checkout currency detection row */
.checkout-row-conv { color: #fbbf24; font-size: .8rem; }

/* ==================================================================
   OST INDEPENDENCE BANNER
   ================================================================== */
.ost-independence-banner {
  position: relative; padding: 48px 32px; margin-bottom: 48px;
  background: linear-gradient(135deg, rgba(109,159,255,.06), rgba(167,139,250,.06), rgba(245,196,104,.04));
  border: 1px solid rgba(109,159,255,.2); border-radius: var(--radius);
  overflow: hidden; text-align: center;
}
.ind-glow {
  position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 400px; height: 200px; background: radial-gradient(circle, rgba(109,159,255,.15), transparent 70%);
  pointer-events: none;
}
.ind-icon { font-size: 3rem; margin-bottom: 12px; }
.ost-independence-banner h3 { font-family: var(--font-serif); font-size: 1.6rem; margin-bottom: 16px; color: var(--text); }
.ost-independence-banner p { color: var(--text-muted); font-size: .95rem; line-height: 1.7; max-width: 720px; margin: 0 auto; }
.ind-roadmap {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 28px auto; flex-wrap: wrap; max-width: 800px;
}
.ind-phase {
  padding: 10px 18px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: .82rem; color: var(--text-muted);
  display: flex; align-items: center; gap: 8px;
}
.ind-phase-now { border-color: rgba(245,196,104,.4); }
.ind-phase-next { border-color: rgba(109,159,255,.4); }
.ind-phase-future { border-color: rgba(52,211,153,.4); }
.ind-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ind-dot-now { background: var(--warm); }
.ind-dot-next { background: var(--accent); animation: livePulse 2s infinite; }
.ind-dot-future { background: var(--success); }
.ind-arrow { color: var(--accent); font-size: 1.2rem; font-weight: 700; }
.ind-footnote { font-size: .82rem !important; color: var(--text-muted) !important; margin-top: 20px !important; font-style: italic; }
.bridge-temp-badge {
  display: inline-block; font-size: .7rem; font-weight: 600; padding: 3px 10px;
  background: rgba(245,196,104,.12); color: var(--warm); border: 1px solid rgba(245,196,104,.3);
  border-radius: 12px; margin-left: 8px; vertical-align: middle;
}

/* ==================================================================
   PAY DEMO HEADER - Enhanced
   ================================================================== */
.pay-demo-header { text-align: center; margin-bottom: 32px; }
.pay-demo-icon-ring {
  width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 50%; font-size: 1.8rem; color: #fff; margin: 0 auto 16px;
  box-shadow: 0 0 30px rgba(109,159,255,.3), 0 0 60px rgba(109,159,255,.1);
  animation: iconRingPulse 3s infinite;
}
@keyframes iconRingPulse {
  0%, 100% { box-shadow: 0 0 30px rgba(109,159,255,.3), 0 0 60px rgba(109,159,255,.1); }
  50% { box-shadow: 0 0 40px rgba(109,159,255,.5), 0 0 80px rgba(109,159,255,.2); }
}
.pay-demo-trust {
  display: flex; gap: 20px; justify-content: center; margin-top: 16px;
}
.pdt-item { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--text-muted); }
.pdt-dot { width: 8px; height: 8px; border-radius: 50%; }
.pdt-green { background: var(--success); }
.pdt-blue { background: var(--accent); animation: livePulse 2s infinite; }
.pdt-gold { background: var(--warm); }

/* ==================================================================
   PAY ANYWHERE - Revolutionary Redesign
   ================================================================== */
.pa-hero {
  position: relative; text-align: center; padding: 40px 24px 32px; margin-bottom: 32px;
  overflow: hidden;
}
.pa-hero-glow {
  position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
  width: 500px; height: 300px;
  background: radial-gradient(circle, rgba(109,159,255,.12), rgba(167,139,250,.06), transparent 70%);
  pointer-events: none;
}
.pa-hero-icon {
  font-size: 3.5rem; margin-bottom: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent2), var(--warm));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pay-anywhere h3 { font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: 12px; }

/* OST Pipeline Visualization */
.pa-pipeline {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin-top: 32px; flex-wrap: wrap;
}
.pa-pipe-node {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 20px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); min-width: 90px; transition: all .3s;
}
.pa-pipe-node:hover { border-color: var(--accent); transform: translateY(-2px); }
.pa-pipe-ost {
  background: linear-gradient(135deg, rgba(109,159,255,.12), rgba(167,139,250,.08));
  border-color: rgba(109,159,255,.4);
}
.pa-pipe-done {
  background: rgba(52,211,153,.08); border-color: rgba(52,211,153,.3);
}
.pa-pipe-icon { font-size: 1.4rem; }
.pa-pipe-node span:last-child { font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
.pa-pipe-arrow {
  display: flex; flex-direction: column; align-items: center; color: var(--accent);
  font-size: 1rem; font-weight: 700; position: relative;
}
.pa-pipe-line {
  width: 24px; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 1px;
}

/* Browser Mockup - Enhanced */
.browser-ost-badge {
  padding: 4px 12px; background: linear-gradient(135deg, rgba(109,159,255,.15), rgba(52,211,153,.12));
  border: 1px solid rgba(109,159,255,.3); border-radius: 12px; font-size: .72rem;
  color: var(--accent); font-weight: 600; white-space: nowrap;
}
.bhow-highlight {
  background: linear-gradient(135deg, rgba(109,159,255,.08), rgba(167,139,250,.06)) !important;
  border-color: rgba(109,159,255,.3) !important; color: var(--accent) !important;
}
.bhow-highlight .bhow-num {
  font-size: .85rem !important; background: linear-gradient(135deg, var(--accent), var(--success)) !important;
}

/* ==================================================================
   CONVERT TERMINAL - Premium Redesign
   ================================================================== */
.convert-terminal {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0; margin-bottom: 32px; overflow: hidden;
}
.ct-glow {
  position: absolute; top: -40px; right: -40px; width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(109,159,255,.1), transparent 70%);
  pointer-events: none;
}
.ct-header {
  padding: 32px 32px 20px; text-align: center;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(109,159,255,.04), transparent);
}
.ct-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 14px; background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.2);
  border-radius: 20px; font-size: .72rem; color: var(--success); font-weight: 600;
  margin-bottom: 12px;
}
.ct-status-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--success);
  animation: livePulse 2s infinite;
}
.ct-header h3 { font-family: var(--font-serif); font-size: 1.6rem; margin-bottom: 6px; }
.ct-sub { color: var(--text-muted); font-size: .88rem; }

.ct-body {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 0;
  padding: 32px; align-items: start;
}
.ct-side { padding: 20px; }
.ct-from { background: rgba(109,159,255,.03); border-right: 1px solid var(--border); border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.ct-to { background: rgba(52,211,153,.03); border-left: 1px solid var(--border); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.ct-label {
  display: block; font-size: .7rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px;

.ct-route-state {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(109,159,255,.16);
  background: rgba(109,159,255,.08);
  color: #d8e5ff;
  font-size: .84rem;
  line-height: 1.55;
}
}
.ct-select {
  width: 100%; padding: 12px 14px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: .9rem;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b92ad' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
  transition: border-color .2s;
}
.ct-select:focus { outline: none; border-color: var(--accent); }
.ct-amount {
  width: 100%; padding: 14px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: 1.3rem; font-weight: 700;
  margin-top: 12px; text-align: center; transition: border-color .2s;
}
.ct-amount:focus { outline: none; border-color: var(--accent); }
.ct-amount::placeholder { color: var(--text-muted); font-weight: 400; }

.ct-middle {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px 16px; min-width: 140px;
}
.ct-flow { margin-bottom: 20px; position: relative; }
.ct-flow-line {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent2), var(--success));
  transform: translateX(-50%); opacity: .3;
}
.ct-flow-steps { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; }
.ct-step {
  display: flex; align-items: center; gap: 8px; opacity: .5; transition: all .4s;
  padding: 6px 12px; background: var(--surface2); border: 1px solid transparent;
  border-radius: var(--radius-sm);
}
.ct-step.active { opacity: 1; border-color: var(--accent); background: rgba(109,159,255,.08); }
.ct-step.done { opacity: 1; border-color: var(--success); }
.ct-step-dot {
  width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border);
  flex-shrink: 0; transition: all .4s;
}
.ct-step.active .ct-step-dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.ct-step.done .ct-step-dot { border-color: var(--success); background: var(--success); }
.ct-step span:last-child { font-size: .78rem; color: var(--text-muted); white-space: nowrap; }

.ct-convert-btn {
  display: flex; align-items: center; gap: 8px; padding: 14px 28px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; border: none; border-radius: var(--radius-sm); font-size: .95rem;
  font-weight: 700; cursor: pointer; transition: all .3s;
  box-shadow: 0 4px 20px rgba(109,159,255,.3);
}
.ct-convert-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(109,159,255,.4); }
.ct-btn-icon { font-size: 1.2rem; }

.ct-ost-output { text-align: center; }
.ct-ost-icon { font-size: 3rem; margin-bottom: 8px; color: var(--accent); }
.ct-ost-name { font-size: .85rem; color: var(--text-muted); margin-bottom: 12px; }
.ct-ost-result {
  font-size: 1.1rem; font-weight: 700; color: var(--accent);
  padding: 12px 16px; background: rgba(109,159,255,.06); border: 1px solid rgba(109,159,255,.15);
  border-radius: var(--radius-sm); min-height: 48px; display: flex; align-items: center; justify-content: center;
}

.ct-providers {
  padding: 16px 32px; border-top: 1px solid var(--border);
  background: rgba(109,159,255,.02); text-align: center;
}
.ct-prov-label { font-size: .82rem; color: var(--text-muted); margin-bottom: 10px; }
.ct-prov-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ct-prov-btn {
  padding: 6px 16px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: .8rem; text-decoration: none;
  transition: all .2s;
}
.ct-prov-btn:hover { border-color: var(--accent); color: var(--accent); }
.ct-note {
  text-align: center; color: var(--text-muted); font-size: .78rem;
  padding: 16px 32px; border-top: 1px solid var(--border);
}

/* ==================================================================
   PAY ANY LINK — Universal Checkout Terminal
   ================================================================== */
/* ==================================================================
   BACK BUTTON — Browser Mockup Navigation
   ================================================================== */
.sim-back-btn {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-muted); padding: 6px 14px; font-size: .82rem; cursor: pointer;
  transition: all .2s; margin-bottom: 12px; display: inline-flex; align-items: center; gap: 4px;
}
.sim-back-btn:hover { border-color: var(--accent); color: var(--accent); }
.sim-store .sim-back-btn { position: absolute; top: 12px; left: 12px; z-index: 2; margin: 0;
  background: rgba(255,255,255,.9); color: #333; border-color: #ddd; }
.sim-store .sim-back-btn:hover { color: var(--accent); border-color: var(--accent); }
.sim-store { position: relative; }

/* ==================================================================
   SPACEX / STARLINK DePIN PARTNERSHIP STRATEGY
   ================================================================== */
.spacex-strategy { text-align: center; }
.sx-header { margin-bottom: 36px; }
.sx-icon-ring {
  width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(109,159,255,.2), rgba(52,211,153,.15));
  border-radius: 50%; font-size: 1.8rem; margin: 0 auto 16px;
  box-shadow: 0 0 30px rgba(109,159,255,.2);
}
.sx-header h3 { font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: 8px; }

/* Timeline */
.sx-timeline {
  position: relative; max-width: 680px; margin: 0 auto 40px;
  padding-left: 28px; text-align: left;
}
.sx-timeline::before {
  content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--accent), var(--success), var(--warm));
  opacity: .3;
}
.sx-phase { position: relative; padding: 16px 0 24px 24px; }
.sx-phase-dot {
  position: absolute; left: -24px; top: 22px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--surface2); border: 2px solid var(--border);
}
.sx-dot-active { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px rgba(109,159,255,.5); }
.sx-phase-content h4 { margin: 0 0 10px; font-size: .95rem; }
.sx-phase-content ul { list-style: none; padding: 0; margin: 0; }
.sx-phase-content li { padding: 5px 0; font-size: .85rem; color: var(--text-muted); line-height: 1.5; }
.sx-phase-now .sx-phase-content h4 { color: var(--accent); }
.sx-phase-future .sx-phase-content h4 { color: var(--warm); }

/* Analogue Cards */
.sx-analogues { margin-bottom: 32px; }
.sx-analogue-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.sx-analogue-card {
  padding: 20px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); text-align: center;
}
.sx-a-icon { font-size: 1.8rem; display: block; margin-bottom: 8px; }
.sx-analogue-card strong { display: block; margin-bottom: 6px; font-size: .9rem; }
.sx-analogue-card p { margin: 0; font-size: .78rem; color: var(--text-muted); line-height: 1.4; }

/* Quote */
.sx-quote {
  max-width: 700px; margin: 0 auto; padding: 24px; text-align: center;
  background: linear-gradient(135deg, rgba(109,159,255,.05), rgba(52,211,153,.05));
  border: 1px solid var(--border); border-radius: var(--radius);
}
.sx-quote blockquote {
  margin: 0; padding: 0; font-style: italic; font-size: .9rem; color: var(--text);
  line-height: 1.6;
}
.sx-quote-attr { display: block; margin-top: 12px; font-size: .78rem; color: var(--accent); }

/* SpaceX Checklist Phases */
.sx-checklist-phase { margin-bottom: 28px; }
.sx-phase-banner {
  display: flex; align-items: center; gap: 10px; padding: 14px 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 16px;
}
.sx-phase-banner.sx-phase-active { border-color: rgba(109,159,255,.4); background: rgba(109,159,255,.04); }
.sx-phase-banner h4 { font-size: 1rem; margin: 0; flex: 1; text-align: left; }
.sx-phase-label { font-size: .75rem; color: var(--text-muted); white-space: nowrap; }
.sx-phase-status-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted);
  flex-shrink: 0;
}
.sx-dot-live { background: var(--accent); animation: livePulse 2s infinite; }
.sx-checklist-phase .checklist-grid { margin-left: 0; }

/* Checklist Progress Bar */
.checklist-progress-bar {
  width: 100%; max-width: 500px; height: 8px; background: var(--surface2);
  border-radius: 4px; margin: 0 auto 8px; overflow: hidden;
  border: 1px solid var(--border);
}
.checklist-progress-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--success));
  transition: width .6s ease;
}
.checklist-progress-text { font-size: .82rem; color: var(--text-muted); }

/* ==================================================================
   SCANNING & AUTO-DETECT UI — Browser Mockup Price Detection
   ================================================================== */
.sim-scanning { text-align: center; padding: 40px 24px; }
.sim-scan-anim { position: relative; display: inline-block; margin-bottom: 8px; }
.sim-scan-ring {
  position: absolute; inset: -12px; border: 2px solid var(--accent); border-radius: 50%;
  animation: scanPulse 1.5s ease-in-out infinite;
}
@keyframes scanPulse {
  0%, 100% { transform: scale(1); opacity: .4; }
  50% { transform: scale(1.3); opacity: 0; }
}
.sim-scan-steps { max-width: 320px; margin: 0 auto; text-align: left; }
.sim-scan-step {
  padding: 8px 12px; margin-bottom: 6px; font-size: .82rem;
  color: var(--text-muted); opacity: .4; transition: all .3s;
  border-left: 2px solid var(--border); padding-left: 14px;
}
.sim-scan-step.sim-scan-active { opacity: 1; color: var(--success); border-color: var(--success); }

/* Detected Product */
.sim-detected { padding: 20px; }
.sim-detected-badge {
  display: inline-block; padding: 6px 16px; margin-bottom: 20px;
  background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.3);
  border-radius: 20px; font-size: .82rem; color: var(--success);
}
.sim-detected-product {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); margin-bottom: 20px;
}
.sim-detected-img { flex-shrink: 0; }
.sim-detected-info { flex: 1; min-width: 0; }
.sim-detected-title { margin: 0 0 6px; font-size: 1rem; word-wrap: break-word; }
.sim-detected-desc { margin: 0 0 8px; font-size: .82rem; color: var(--text-muted); line-height: 1.4; }
.sim-detected-price { font-size: 1.3rem; font-weight: 700; color: var(--accent); }
.sim-detected-conversion, .sim-manual-conversion { margin-bottom: 16px; }
.sim-conv-row {
  display: flex; justify-content: space-between; padding: 8px 0;
  border-bottom: 1px solid var(--border); font-size: .85rem; color: var(--text-muted);
}
.sim-conv-row:last-child { border-bottom: none; }

/* Manual Entry Fallback */
.sim-manual { padding: 20px; }
.sim-manual-header { display: flex; gap: 14px; align-items: center; margin-bottom: 20px; }
.sim-manual-form { max-width: 480px; }
.sim-manual-row { display: flex; gap: 10px; margin-bottom: 16px; }
.sim-manual-field { flex: 1; }
.sim-manual-input, .sim-manual-select {
  width: 100%; padding: 12px 14px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: .9rem; transition: border-color .2s;
}
.sim-manual-input:focus, .sim-manual-select:focus { outline: none; border-color: var(--accent); }

/* ==================================================================
   GROW VAULTS — Multi-Generational Family Accounts
   ================================================================== */
.grow-vaults-section { text-align: center; }
.gv-header { margin-bottom: 36px; }
.gv-icon-ring {
  width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(245,196,104,.2), rgba(167,139,250,.2));
  border-radius: 50%; font-size: 1.8rem; margin: 0 auto 16px;
  box-shadow: 0 0 30px rgba(245,196,104,.2);
}
.gv-header h3 { font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: 8px; }

/* Timeline */
.gv-timeline {
  display: flex; align-items: flex-start; justify-content: center; gap: 0;
  position: relative; margin: 32px auto; max-width: 900px; overflow-x: auto;
  padding: 16px 8px;
}
.gv-timeline::before {
  content: ''; position: absolute; top: 20px; left: 5%; right: 5%; height: 2px;
  background: linear-gradient(90deg, var(--warm), var(--accent), var(--success));
  opacity: .3;
}
.gv-milestone {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  position: relative; z-index: 1; flex: 1; min-width: 90px;
}
.gv-ms-dot {
  width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--border);
  background: var(--surface); transition: all .3s;
}
.gv-milestone-active .gv-ms-dot { border-color: var(--warm); background: var(--warm); box-shadow: 0 0 12px var(--warm); }
.gv-milestone-grad .gv-ms-dot-grad { border-color: var(--success); background: var(--success); box-shadow: 0 0 16px var(--success); width: 18px; height: 18px; }
.gv-ms-content { display: flex; flex-direction: column; gap: 2px; }
.gv-ms-age { font-size: .78rem; font-weight: 700; color: var(--text); }
.gv-ms-reward { font-size: .85rem; font-weight: 600; color: var(--accent); }
.gv-ms-label { font-size: .68rem; color: var(--text-muted); font-style: italic; }

/* Modal Overlay — shared by Grow Vault & DePIN */
.ost-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.65); backdrop-filter: blur(6px);
  justify-content: center; align-items: center; padding: 24px;
  overflow-y: auto;
}
.ost-modal-overlay.ost-modal-open {
  display: flex;
}
.ost-modal {
  position: relative; width: 100%; max-width: 460px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 24px;
  box-shadow: 0 24px 64px rgba(0,0,0,.5); text-align: center;
  animation: modalSlideIn .3s ease;
  max-height: 90vh; overflow-y: auto;
}
.ost-modal-overlay > .ost-modal {
  display: block;
  position: relative;
  inset: auto;
  z-index: auto;
  color: var(--text);
  font-family: var(--font-sans);
}
.ost-modal-lg { max-width: 540px; }
@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.ost-modal-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; color: var(--text-muted);
  font-size: 1.6rem; cursor: pointer; line-height: 1;
  transition: color .2s;
}
.ost-modal-close:hover { color: var(--text); }
.gv-open-modal-btn, .depin-open-modal-btn {
  display: block; margin: 28px auto; font-size: 1rem; padding: 14px 32px;
}

/* Create Form */
.gv-create-form {
  max-width: 400px; margin: 36px auto; padding: 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  text-align: center;
}
.gv-create-form h4 { margin-bottom: 16px; font-size: 1rem; }
.gv-form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; text-align: left; }
.gv-form-label { font-size: .82rem; color: var(--text-muted); font-weight: 600; }
.gv-form-input {
  width: 100%; padding: 12px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: .95rem; text-align: center;
}
.gv-form-input:focus { outline: none; border-color: var(--accent); }
.gv-create-btn { width: 100%; }
.gv-status { margin-top: 12px; font-size: .85rem; color: var(--text-muted); min-height: 24px; }

/* Disclaimer */
.gv-disclaimer {
  display: flex; align-items: flex-start; gap: 10px; max-width: 600px; margin: 24px auto 0;
  padding: 16px; background: rgba(245,196,104,.06); border: 1px solid rgba(245,196,104,.2);
  border-radius: var(--radius-sm); font-size: .78rem; color: var(--text-muted); line-height: 1.5;
  text-align: left;
}
.gv-disclaimer span { font-size: 1.2rem; flex-shrink: 0; }

/* ==================================================================
   DEPIN FAUCET — Infrastructure Rewards
   ================================================================== */
.depin-faucet-section { text-align: center; }
.depin-header { margin-bottom: 32px; }
.depin-icon-ring {
  width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(109,159,255,.2), rgba(52,211,153,.15));
  border-radius: 50%; font-size: 1.8rem; margin: 0 auto 16px;
  box-shadow: 0 0 30px rgba(109,159,255,.2);
}
.depin-header h3 { font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: 8px; }

.depin-rewards-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  max-width: 600px; margin: 0 auto 32px;
}
.depin-reward-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 20px 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); transition: all .3s;
}
.depin-reward-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.depin-reward-highlight { background: linear-gradient(135deg, rgba(109,159,255,.06), rgba(52,211,153,.04)); border-color: rgba(109,159,255,.3); }
.depin-r-icon { font-size: 1.6rem; }
.depin-r-type { font-size: .82rem; font-weight: 600; color: var(--text); }
.depin-r-amount { font-size: .85rem; font-weight: 700; color: var(--accent); }
.depin-r-minute {
  font-size: .7rem; font-weight: 600; color: var(--success);
  padding: 3px 8px; background: rgba(52,211,153,.1);
  border: 1px solid rgba(52,211,153,.2); border-radius: 12px;
  white-space: nowrap; margin-top: 2px;
}

.depin-claim-box {
  max-width: 400px; margin: 0 auto; padding: 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  text-align: center;
}
.depin-claim-label { font-size: .9rem; color: var(--text-muted); margin-bottom: 12px; }
.depin-claim-btn { width: 100%; }
.depin-claim-status { margin-top: 12px; font-size: .85rem; color: var(--text-muted); min-height: 24px; }
.depin-claim-note { font-size: .72rem; color: var(--text-muted); margin-top: 12px; }

/* ==================================================================
   RESPONSIVE ADDITIONS
   ================================================================== */
@media (max-width: 960px) {
  .censorship-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- TABLET ---- */
@media (max-width: 768px) {
  /* Global sizing */
  .section { padding: 56px 0; }
  .container { padding: 0 16px; }
  .section-title { font-size: clamp(1.4rem, 5vw, 1.8rem); }
  .section-subtitle { font-size: .92rem; margin-bottom: 32px; }
  .btn { padding: 12px 20px; font-size: .88rem; }

  /* Hero */
  .hero { min-height: auto; }
  .hero-split { flex-direction: column; padding: 80px 20px 20px; gap: 24px; }
  .hero-content { text-align: center; max-width: 100%; }
  .hero-actions { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-ticker { justify-content: center; }
  .hero-badge-row { justify-content: center; }
  .hero-globe-wrap { max-width: 420px; min-height: 320px; margin: 0 auto; }
  .hero h1 { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  .hero-sub { font-size: .95rem; margin-left: auto; margin-right: auto; }
  .hero-badge-row { flex-direction: column; align-items: center; }
  .hero-stats { gap: 12px; }
  .stat-num { font-size: 1.2rem; }
  .hero-knowledge-bar { padding: 16px 16px 0; }
  .knowledge-banner { gap: 12px; }
  .knowledge-num { font-size: .95rem; }

  /* Nav */
  .nav-inner { height: 56px; padding: 0 12px; }

  /* Grids – collapse to 1 column */
  .censorship-grid { grid-template-columns: 1fr; }
  .decentral-grid { grid-template-columns: 1fr; }
  .build-code-showcase { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .creators-grid { grid-template-columns: 1fr; }
  .bridge-grid { grid-template-columns: 1fr 1fr; }
  .bridge-steps { grid-template-columns: 1fr 1fr; }
  .connector-grid { grid-template-columns: 1fr; }

  /* Cards – tighter padding */
  .feature-card { padding: 24px 18px; }
  .offline-card { padding: 24px 18px; }
  .scenario-card { padding: 18px; }
  .citizen-body { padding: 16px 18px 20px; }
  .decentral-card h3 { padding: 18px 18px 6px; }
  .decentral-lead { padding: 0 18px; }
  .decentral-timeline-mini { padding: 14px 18px; }
  .decentral-stats { padding: 0 18px 14px; }
  .decentral-quote { margin: 0 18px; }
  .decentral-manifesto { padding: 32px 18px; }

  /* Pay demo & pay anywhere */
  .pay-demo { padding: 24px 16px; }
  .pay-demo h3 { font-size: 1.2rem; }
  .pay-anywhere { padding: 24px 16px; margin-top: 40px; }
  .pay-anywhere h3 { font-size: 1.2rem; }

  /* Browser mockup */
  .browser-chrome { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .browser-ost-badge { display: none; }
  .browser-dots span { width: 10px; height: 10px; }
  .browser-viewport { padding: 20px 14px; min-height: 280px; }
  .browser-placeholder-icon { font-size: 2.8rem; }
  .browser-placeholder h4 { font-size: 1.05rem; }
  .browser-checkout { position: static; width: 100%; margin-top: 16px; }
  .browser-how-it-works { flex-direction: column; }
  .browser-quick { padding: 7px 12px; font-size: .8rem; }

  /* Simulated stores */
  .sim-store { padding: 14px; }
  .sim-store-header h4 { font-size: 1.05rem; }
  .sim-product { padding: 8px 10px; gap: 8px; }
  .sim-product-img { font-size: 1.4rem; }
  .sim-product-name { font-size: .82rem; }
  .sim-product-price { font-size: .82rem; }
  .sim-detected-product { flex-direction: column; }
  .sim-manual-row { flex-direction: column; }
  .sim-manual-field { max-width: 100% !important; }

  /* Pipeline */
  .pa-pipeline { gap: 6px; }
  .pa-pipe-node { min-width: 60px; padding: 8px 10px; }
  .pa-pipe-icon { font-size: 1.1rem; }
  .pa-pipe-node span:last-child { font-size: .65rem; }
  .pa-pipe-arrow { display: none; }

  /* Convert terminal */
  .ct-header { padding: 24px 16px 16px; }
  .ct-header h3 { font-size: 1.2rem; }
  .ct-body { grid-template-columns: 1fr; padding: 20px 16px; }
  .ct-from { border-right: none; border-bottom: 1px solid var(--border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
  .ct-to { border-left: none; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
  .ct-middle { flex-direction: row; gap: 12px; padding: 12px; }
  .ct-flow { margin-bottom: 0; }
  .ct-flow-line { display: none; }
  .ct-flow-steps { flex-direction: row; }
  .ct-providers { padding: 12px 16px; }
  .ct-note { padding: 12px 16px; }

  /* Exchange calc */
  .exchange-calc { padding: 24px 16px; }
  .exchange-calc h3 { font-size: 1.15rem; }
  .calc-input { width: 110px; font-size: 1rem; padding: 10px 12px; }
  .calc-ost-amount { font-size: 1.5rem; }

  /* Transfer widget */
  .transfer-widget { padding: 28px 16px; }

  /* Independence banner */
  .ost-independence-banner { padding: 32px 16px; }
  .ost-independence-banner h3 { font-size: 1.2rem; }
  .ind-roadmap { flex-direction: column; }
  .ind-arrow { transform: rotate(90deg); }

  /* CTA box */
  .cta-box { padding: 32px 18px; }
  .cta-box h3 { font-size: 1.2rem; }

  /* Fiat grid */
  .fiat-grid-full { grid-template-columns: repeat(3, 1fr); }

  /* Wallet dashboard */
  .wd-create-grid { grid-template-columns: 1fr; }
  .wd-balances { grid-template-columns: 1fr; }
  .wd-actions { flex-wrap: wrap; justify-content: center; }
  .wd-profile { flex-wrap: wrap; }
  .wd-ql-grid { grid-template-columns: repeat(2, 1fr); }

  /* Checklist */
  .checklist-item { padding: 14px 16px; }

  /* Footer */
  .footer { padding: 40px 0 24px; }
  .footer-bottom { flex-direction: column; text-align: center; }

  /* Wallet modal */
  .wallet-modal-content { padding: 28px 20px; width: 94%; }

  /* Toast */
  .toast-container { bottom: 12px; right: 12px; left: 12px; }
  .toast { min-width: auto; font-size: .85rem; padding: 12px 16px; }

  /* Scenario animations */
  .scenario-anim { height: 100px; }

  /* Grow vaults */
  .gv-timeline { flex-wrap: wrap; gap: 12px; }
  .gv-timeline::before { display: none; }
  .gv-create-form { padding: 20px 16px; }

  /* DePIN */
  .depin-rewards-grid { grid-template-columns: repeat(2, 1fr); }

  /* SpaceX */
  .sx-analogue-grid { grid-template-columns: 1fr; }
  .sx-timeline { padding-left: 20px; }
  .sx-phase-dot { left: -18px; width: 10px; height: 10px; }
  .sx-header h3 { font-size: 1.2rem; }
  .sx-phase-banner { padding: 10px 14px; }
  .sx-phase-banner h4 { font-size: .9rem; }
  .sx-checklist-phase .checklist-item { padding: 12px 14px; }

  /* Bot panel */
  .bot-connector-panel { padding: 20px 16px; }

  /* AI section */
  .ai-orb { width: 100px; height: 100px; }
  .ai-core { font-size: 2rem; }
  .ai-ring-2 { inset: -10px; }
  .ai-ring-3 { inset: -20px; }

  /* Manifesto */
  .manifesto { padding: 24px 16px; }
  .manifesto-lead { font-size: 1.1rem; }

  /* Growth section */
  .growth-section { padding: 24px 16px; }
  .growth-metric { min-width: 100px; padding: 12px 8px; }
  .growth-metric-num { font-size: 1.1rem; }

  /* Price card */
  .ost-price-card { padding: 18px 16px; flex-direction: column; text-align: center; }
  .price-card-right { text-align: center; }
  .price-card-value { font-size: 1.4rem; }

  /* Jupiter */
  .jupiter-widget { padding: 24px 16px; }

  /* Faucet */
  .faucet-machine { transform: scale(.85); }

  /* Pay overlay steps */
  .pay-progress { gap: 0; }
  .step-ring { width: 44px; height: 44px; font-size: 1.1rem; }
  .pay-connector { width: 20px; }
  .pay-step span:last-child { font-size: .68rem; }
  .receipt-details { font-size: .72rem; padding: 10px 14px; }
}

/* ---- SMALL PHONE ---- */
@media (max-width: 480px) {
  .section { padding: 40px 0; }
  .container { padding: 0 12px; }
  .hero-split { padding: 72px 12px 16px; }
  .hero-globe-wrap { max-width: 320px; min-height: 260px; }
  .hero h1 { font-size: 1.5rem; }
  .hero-sub { font-size: .88rem; }
  .hero-actions { flex-direction: column; gap: 10px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-stats { flex-direction: column; gap: 10px; }
  .stat-divider { display: none; }
  .hero-ticker { font-size: .8rem; flex-wrap: wrap; }
  .hero-knowledge-bar { padding: 12px 12px 0; }
  .knowledge-banner { flex-direction: column; align-items: center; }
  .knowledge-divider { display: none; }

  /* Section titles */
  .section-title { font-size: 1.3rem; }
  .section-subtitle { font-size: .85rem; }

  /* Nav */
  .nav-inner { height: 50px; }
  .logo { font-size: 1.1rem; }

  /* Grids – single column */
  .bridge-grid { grid-template-columns: 1fr; }
  .bridge-steps { grid-template-columns: 1fr; }
  .store-products { grid-template-columns: 1fr; }
  .fiat-grid-full { grid-template-columns: repeat(2, 1fr); }
  .wd-ql-grid { grid-template-columns: 1fr; }
  .depin-rewards-grid { grid-template-columns: 1fr; }

  /* Pay demo */
  .pay-demo { padding: 18px 12px; }
  .pay-anywhere { padding: 18px 12px; margin-top: 32px; }

  /* Browser mockup */
  .browser-chrome { padding: 6px 10px; gap: 6px; }
  .browser-dots span { width: 8px; height: 8px; }
  .browser-bar { padding: 5px 8px; }
  .browser-url-input { font-size: .78rem; }
  .browser-go { padding: 3px 8px; font-size: .72rem; }
  .browser-viewport { padding: 14px 10px; min-height: 240px; }
  .browser-placeholder-icon { font-size: 2.2rem; }
  .browser-placeholder h4 { font-size: .95rem; }
  .browser-quick-links { flex-direction: column; }
  .browser-quick { font-size: .78rem; padding: 6px 10px; }

  /* Simulated stores */
  .sim-store { padding: 10px; }
  .sim-store-header h4 { font-size: .95rem; }
  .sim-product { padding: 6px 8px; }
  .sim-product-img { font-size: 1.2rem; }
  .sim-product-name, .sim-product-price { font-size: .78rem; }
  .sim-detected { padding: 14px 10px; }
  .sim-detected-title { font-size: .9rem; }
  .sim-detected-price { font-size: 1.1rem; }
  .sim-manual { padding: 14px 10px; }

  /* Pipeline */
  .pa-pipeline { gap: 4px; }
  .pa-pipe-node { min-width: 50px; padding: 6px 6px; font-size: .65rem; }
  .pa-pipe-icon { font-size: .9rem; }

  /* Convert terminal */
  .ct-header { padding: 18px 12px 12px; }
  .ct-header h3 { font-size: 1.05rem; }
  .ct-body { padding: 14px 12px; }
  .ct-side { padding: 14px; }
  .ct-amount { font-size: 1.1rem; }
  .ct-convert-btn { padding: 12px 20px; font-size: .85rem; }

  /* Exchange calc */
  .exchange-calc { padding: 20px 12px; }
  .calc-row { gap: 12px; }
  .calc-input { width: 90px; font-size: .9rem; padding: 10px; }
  .calc-ost-amount { font-size: 1.2rem; }

  /* Various cards */
  .feature-card { padding: 20px 14px; }
  .offline-card { padding: 20px 14px; }
  .scenario-card { padding: 14px; }
  .cta-box { padding: 24px 14px; }
  .cta-box h3 { font-size: 1.05rem; }
  .cta-actions { flex-direction: column; }
  .cta-actions .btn { width: 100%; justify-content: center; }

  /* Transfer widget */
  .transfer-widget { padding: 20px 12px; }
  .transfer-node { padding: 16px 12px; min-width: 0; }
  .node-icon { font-size: 1.5rem; }

  /* OST Independence banner */
  .ost-independence-banner { padding: 24px 12px; }
  .ost-independence-banner h3 { font-size: 1.05rem; }
  .ind-phase { padding: 8px 12px; font-size: .75rem; }

  /* Faucet */
  .faucet-machine { transform: scale(.75); }
  .faucet-amount { font-size: 1.4rem; }

  /* Pay overlay */
  .pay-overlay { padding: 24px 12px; }
  .step-ring { width: 36px; height: 36px; font-size: .9rem; }
  .pay-connector { width: 12px; margin-bottom: 16px; }
  .pay-step span:last-child { font-size: .6rem; }
  .step-detail { font-size: .55rem; max-width: 80px; }

  /* Wallet modal */
  .wallet-modal-content { padding: 24px 16px; }
  .wallet-option { padding: 10px 14px; font-size: .88rem; }

  /* Bot connector */
  .bot-connector-panel { padding: 16px 12px; }
  .log-body { font-size: .72rem; }

  /* Footer */
  .footer { padding: 32px 0 16px; }
  .footer-links { gap: 12px; flex-wrap: wrap; }
  .footer-links a { font-size: .78rem; }

  /* Scrollbar / code blocks */
  .terminal-body { padding: 12px 14px; font-size: .72rem; }

  /* SpaceX */
  .sx-header h3 { font-size: 1.05rem; }
  .sx-icon-ring { width: 52px; height: 52px; font-size: 1.4rem; }
  .sx-phase-content li { font-size: .78rem; }
  .sx-quote blockquote { font-size: .82rem; }
  .sx-quote { padding: 16px; }

  /* Grow vaults */
  .gv-create-form { padding: 16px 12px; }
  .gv-icon-ring { width: 52px; height: 52px; font-size: 1.4rem; }

  /* DePIN */
  .depin-icon-ring { width: 52px; height: 52px; font-size: 1.4rem; }
  .depin-claim-box { padding: 18px 14px; }

  /* Manifesto */
  .manifesto { padding: 20px 12px; }
  .manifesto p { font-size: .9rem; }
  .manifesto-lead { font-size: 1rem; }

  /* Growth */
  .growth-section { padding: 20px 12px; }
  .growth-metrics { gap: 10px; }
  .growth-metric { min-width: 80px; }

  /* Price card */
  .ost-price-card { padding: 14px 12px; }
  .price-card-value { font-size: 1.2rem; }

  /* AI */
  .ai-orb { width: 80px; height: 80px; }
  .ai-core { font-size: 1.6rem; }
  .ai-ring-2 { inset: -8px; }
  .ai-ring-3 { inset: -16px; }

  /* Checklist */
  .checklist-item { padding: 12px; gap: 10px; }
  .checklist-item h4 { font-size: .9rem; }
  .checklist-item p { font-size: .78rem; }
}

/* ================================================================== */
/* NEW COMPONENTS — Satellites, Rocket Timeline, News Feed, AI Hook    */
/* ================================================================== */

/* Section spacing for new pages */
.section-space { padding: 100px 0 80px; }

/* ---------- 3D Satellites on Home ---------- */
.satellite-layer {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none; overflow: hidden; z-index: 1;
}
.satellite {
  position: absolute;
  animation: orbit-satellite 20s linear infinite;
}
.sat-body {
  font-size: 2rem;
  filter: drop-shadow(0 0 12px rgba(100,200,255,.6));
  animation: sat-pulse 3s ease-in-out infinite;
}
.sat-trail {
  position: absolute; top: 50%; left: -60px;
  width: 60px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(100,200,255,.4));
  transform: translateY(-50%);
}
.sat-1 { top: 18%; animation-duration: 18s; animation-delay: 0s; }
.sat-2 { top: 45%; animation-duration: 24s; animation-delay: -8s; }
.sat-3 { top: 72%; animation-duration: 30s; animation-delay: -15s; }
@keyframes orbit-satellite {
  0%   { left: -80px; transform: rotate(0deg); }
  50%  { left: 110%; transform: rotate(5deg); }
  50.01% { left: 110%; transform: rotate(0deg) scaleX(-1); }
  100% { left: -80px; transform: rotate(-5deg) scaleX(-1); }
}
@keyframes sat-pulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* ---------- Revolution Preview Strip ---------- */
.revolution-preview {
  position: relative; z-index: 2;
  margin-top: -20px; padding: 0 24px 40px;
}
.rev-strip {
  display: flex; gap: 12px; overflow-x: auto;
  justify-content: center; flex-wrap: wrap;
  padding: 16px 0;
}
.rev-chip {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: .82rem; font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  backdrop-filter: blur(8px);
  transition: all .3s;
}
.rev-chip:hover {
  background: rgba(109,159,255,.15);
  border-color: rgba(109,159,255,.4);
  transform: translateY(-2px);
}
.rev-chip-icon { margin-right: 6px; }

/* ---------- AI Hook Banner ---------- */
.ai-hook-banner {
  position: relative;
  background: linear-gradient(135deg, rgba(109,159,255,.08), rgba(139,92,246,.08));
  border: 1px solid rgba(109,159,255,.2);
  border-radius: 20px;
  padding: 40px; margin: 32px 0 48px;
  overflow: hidden;
}
.ai-hook-glow {
  position: absolute; top: -50%; right: -20%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(109,159,255,.15), transparent 70%);
  border-radius: 50%;
  animation: ai-glow-pulse 4s ease-in-out infinite;
}
@keyframes ai-glow-pulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}
.ai-hook-content { position: relative; z-index: 1; }
.ai-hook-content h3 {
  font-size: 1.5rem; margin-bottom: 12px;
  background: linear-gradient(135deg, #6d9fff, #8b5cf6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.ai-hook-content p {
  color: var(--text-muted); line-height: 1.7;
  max-width: 700px; margin-bottom: 24px;
}
.ai-hook-icon { font-size: 3rem; margin-bottom: 12px; }
.ai-hook-stats {
  display: flex; gap: 32px; flex-wrap: wrap; margin-bottom: 24px;
}
.ai-hook-stat {
  display: flex; flex-direction: column; align-items: center;
}
.ai-hook-num {
  font-size: 1.5rem; font-weight: 700;
  color: #6d9fff;
}
.ai-hook-stat span:last-child {
  font-size: .78rem; color: var(--text-muted); margin-top: 2px;
}
.ai-hook-use-cases {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.ai-hook-tag {
  background: rgba(109,159,255,.1);
  border: 1px solid rgba(109,159,255,.2);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: .8rem; color: var(--text);
}

.ai-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: 20px;
  margin: 0 0 40px;
}
.ai-command-card {
  position: relative;
  padding: 24px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(12,18,34,.92), rgba(18,12,32,.88));
  border: 1px solid rgba(109,159,255,.16);
  box-shadow: 0 18px 48px rgba(0,0,0,.25);
  overflow: hidden;
}
.ai-command-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(109,159,255,.12), transparent 45%);
  pointer-events: none;
}
.ai-command-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.ai-command-kicker {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(109,159,255,.08);
  border: 1px solid rgba(109,159,255,.18);
  color: #dce8ff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ai-command-status {
  font-size: .72rem;
  color: #9be8c1;
  font-weight: 600;
}
.ai-command-card h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 16px;
  font-size: 1.12rem;
  line-height: 1.45;
}
.ai-command-code {
  position: relative;
  z-index: 1;
  margin: 0 0 16px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(4,10,20,.78);
  border: 1px solid rgba(109,159,255,.12);
  color: #dce8ff;
  overflow-x: auto;
}
.ai-command-code code {
  font-family: 'Courier New', monospace;
  font-size: .8rem;
  line-height: 1.6;
  white-space: pre-wrap;
}
.ai-command-tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ai-command-tags span {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 600;
}
.ai-route-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}
.ai-route-row {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
}
.ai-route-row strong {
  color: #f2f7ff;
  font-size: .82rem;
}
.ai-route-row span {
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.45;
}

.build-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
  gap: 20px;
  margin: 32px 0 36px;
}
.build-command-card {
  position: relative;
  padding: 26px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(8,24,18,.88), rgba(10,18,32,.88));
  border: 1px solid rgba(52,211,153,.14);
  box-shadow: 0 18px 48px rgba(0,0,0,.24);
  overflow: hidden;
}
.build-command-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(52,211,153,.12), transparent 40%);
  pointer-events: none;
}
.build-command-card-secondary {
  border-color: rgba(109,159,255,.16);
  background: linear-gradient(160deg, rgba(10,18,32,.9), rgba(18,14,30,.88));
}
.build-command-kicker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(52,211,153,.08);
  border: 1px solid rgba(52,211,153,.16);
  color: #dfffee;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.build-command-card h3 {
  position: relative;
  z-index: 1;
  margin: 14px 0 18px;
  font-size: 1.12rem;
  line-height: 1.45;
}
.build-command-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.build-command-stat {
  padding: 14px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  text-align: center;
}
.build-command-stat strong {
  display: block;
  font-size: 1rem;
  color: #34d399;
}
.build-command-stat span {
  display: block;
  margin-top: 4px;
  font-size: .7rem;
  color: var(--text-muted);
}
.build-command-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}
.build-command-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
}
.build-command-item > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(52,211,153,.1);
  border: 1px solid rgba(52,211,153,.16);
  color: #34d399;
  font-size: .78rem;
  font-weight: 800;
}
.build-command-item strong {
  display: block;
  margin-bottom: 4px;
  font-size: .82rem;
  color: #f4fff8;
}
.build-command-item p {
  margin: 0;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.build-surface-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.build-surface-card {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
}
.build-surface-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: .82rem;
  color: #eef7ff;
}
.build-surface-card span {
  display: block;
  font-size: .76rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.build-signal-strip {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.build-signal-strip span {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(109,159,255,.08);
  border: 1px solid rgba(109,159,255,.14);
  color: #dce8ff;
  font-size: .72rem;
  font-weight: 600;
}

@media (max-width: 980px) {
  .ai-command-grid,
  .build-command-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .ai-command-card,
  .build-command-card {
    padding: 20px;
  }
  .build-command-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .build-surface-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Live Censorship News Feed ---------- */
.censorship-live-feed {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(239,68,68,.2);
  border-radius: 16px;
  padding: 24px; margin-bottom: 40px;
  overflow: hidden;
}
.clf-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.clf-live-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #ef4444;
  animation: clf-blink 1.5s ease-in-out infinite;
}
@keyframes clf-blink {
  0%, 100% { opacity: 1; } 50% { opacity: .3; }
}
.clf-header h4 { font-size: 1rem; margin: 0; color: #ef4444; }
.clf-refresh {
  margin-left: auto; font-size: .75rem;
  color: var(--text-muted); opacity: .7;
}
.clf-ticker {
  display: flex; flex-direction: column; gap: 12px;
  max-height: 300px; overflow-y: auto;
}
.clf-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: rgba(239,68,68,.05);
  border-radius: 10px; border-left: 3px solid #ef4444;
}
.clf-time {
  font-size: .72rem; color: var(--text-muted);
  white-space: nowrap; min-width: 60px;
}
.clf-text { font-size: .85rem; color: var(--text); flex: 1; }
.clf-source {
  font-size: .7rem; color: #6d9fff; white-space: nowrap;
}

/* ================================================================
   OST Vision Home Banner
   ================================================================ */
.ost-vision-home {
  position: relative;
  margin-top: 32px;
  padding: 32px 24px;
  background: linear-gradient(135deg, rgba(109,159,255,.08) 0%, rgba(167,139,250,.06) 50%, rgba(52,211,153,.05) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.vision-glow {
  position: absolute; top: -40%; left: -20%; width: 60%; height: 180%;
  background: radial-gradient(ellipse, rgba(109,159,255,.12) 0%, transparent 70%);
  pointer-events: none;
}
.vision-inner {
  position: relative; z-index: 1;
  display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap;
}
.vision-main { flex: 2; min-width: 280px; }
.vision-main h3 {
  font-size: 1.5rem; font-weight: 700; margin-bottom: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.vision-main > p { font-size: .95rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 16px; }

/* Vision Sovereign Network Roadmap Flow */
.vision-roadmap-flow {
  display: flex; align-items: center; gap: 0; flex-wrap: wrap;
  justify-content: center; margin: 20px 0 18px;
}
.vision-stage {
  flex: 1; min-width: 160px; max-width: 220px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 14px; text-align: center;
  position: relative; transition: transform .2s, box-shadow .2s;
}
.vision-stage:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.vision-stage-label {
  display: inline-block; font-size: .65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; padding: 2px 10px; border-radius: 10px; margin-bottom: 6px;
}
.vision-stage-now .vision-stage-label { background: rgba(251,191,36,.15); color: #f59e0b; border: 1px solid rgba(251,191,36,.3); }
.vision-stage-next .vision-stage-label { background: rgba(96,165,250,.15); color: #60a5fa; border: 1px solid rgba(96,165,250,.3); }
.vision-stage-goal .vision-stage-label { background: rgba(52,211,153,.15); color: #34d399; border: 1px solid rgba(52,211,153,.3); }
.vision-stage-now { border-color: rgba(251,191,36,.3); }
.vision-stage-next { border-color: rgba(96,165,250,.3); }
.vision-stage-goal { border-color: rgba(52,211,153,.4); box-shadow: 0 0 20px rgba(52,211,153,.08); }
.vision-stage-icon { font-size: 1.6rem; display: block; margin-bottom: 4px; }
.vision-stage h4 { font-size: .88rem; font-weight: 700; margin-bottom: 4px; }
.vision-stage p { font-size: .78rem; color: var(--text-muted); margin: 0; line-height: 1.4; }
.vision-stage-arrow {
  font-size: 1.4rem; color: var(--text-muted); padding: 0 6px; flex-shrink: 0;
}
@media (max-width: 660px) {
  .vision-roadmap-flow { flex-direction: column; gap: 0; }
  .vision-stage { max-width: 100%; }
  .vision-stage-arrow { transform: rotate(90deg); padding: 2px 0; }
}

.vision-pills { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.vision-pill {
  padding: 6px 14px; font-size: .78rem; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; color: var(--text); white-space: nowrap;
}
@media (max-width: 480px) {
  .vision-pills { flex-direction: column; align-items: stretch; gap: 6px; }
  .vision-pill { white-space: normal; text-align: center; padding: 8px 12px; }
}
.vision-spacex {
  flex: 1; min-width: 220px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; text-align: center;
}
.vision-sx-icon { font-size: 2rem; margin-bottom: 8px; }
.vision-spacex h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 6px; }
.vision-spacex p { font-size: .82rem; color: var(--text-muted); line-height: 1.5; }

/* ================================================================
   Roadmap Compact Accordion
   ================================================================ */
.roadmap-compact { max-width: 700px; margin: 0 auto; }
.rc-phase {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 12px; overflow: hidden;
  transition: border-color .3s;
}
.rc-phase:hover { border-color: var(--accent); }
.rc-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; cursor: pointer; user-select: none;
}
.rc-header h4 { flex: 1; font-size: 1rem; font-weight: 600; margin: 0; }
.rc-date { font-size: .75rem; color: var(--text-muted); }
.rc-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
}
.rc-dot.done { background: var(--success); box-shadow: 0 0 8px rgba(52,211,153,.4); }
.rc-dot.active { background: var(--accent); box-shadow: 0 0 8px rgba(109,159,255,.4); animation: pulse 2s infinite; }
.rc-dot.pending { background: var(--text-muted); }
.rc-toggle {
  font-size: .9rem; color: var(--text-muted); transition: transform .3s;
  flex-shrink: 0;
}
.rc-items {
  max-height: 0; overflow: hidden; transition: max-height .4s ease;
  padding: 0 20px;
}
.rc-items ul { list-style: none; padding: 0; margin: 0 0 16px; }
.rc-items li {
  padding: 6px 0; font-size: .85rem; color: var(--text-muted);
  border-bottom: 1px solid rgba(109,159,255,.06);
}
.rc-items li:last-child { border-bottom: none; }
.rc-phase.rc-expanded .rc-items { max-height: 600px; }
.rc-phase.rc-expanded .rc-toggle { transform: rotate(180deg); }

/* ================================================================
   Bounty Premium Cards
   ================================================================ */
.bounty-premium {
  border: 1px solid rgba(245,196,104,.3) !important;
  background: linear-gradient(135deg, rgba(245,196,104,.06), rgba(167,139,250,.04)) !important;
  position: relative;
}
.bounty-premium::before {
  content: '\2605'; position: absolute; top: 8px; right: 12px;
  font-size: 1.2rem; color: var(--warm); opacity: .7;
}
.bounty-premium .bounty-reward {
  color: var(--warm) !important; font-weight: 700;
}
.bounty-img {
  width: 100%; height: 120px; object-fit: cover;
  border-radius: 8px 8px 0 0; margin: -12px -16px 12px;
  width: calc(100% + 32px);
}
.bounty-premium .bounty-img {
  border-bottom: 2px solid rgba(245,196,104,.3);
}

/* Hero FREE Banner */
.hero-free-banner {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 16px auto 0; padding: 10px 20px;
  background: linear-gradient(135deg, rgba(52,211,153,.1), rgba(109,159,255,.08));
  border: 1px solid rgba(52,211,153,.25);
  border-radius: 32px; max-width: 520px;
  animation: fadeUp .8s 1.2s forwards; opacity: 0;
}
.hero-free-badge {
  padding: 4px 12px; font-size: .8rem; font-weight: 700;
  background: var(--success); color: #000; border-radius: 16px;
  white-space: nowrap; letter-spacing: .5px;
}
.hero-free-text {
  font-size: .82rem; color: var(--text-muted); line-height: 1.4;
}

/* Google Shopping highlight button */
.browser-quick-google {
  background: linear-gradient(135deg, #4285F4, #34A853, #FBBC05, #EA4335) !important;
  color: #fff !important; font-weight: 700 !important;
  border-color: rgba(66,133,244,.4) !important;
  padding: 8px 16px !important;
}
.browser-quick-google:hover {
  box-shadow: 0 0 16px rgba(66,133,244,.3);
}
.browser-google-tip {
  margin-top: 16px; padding: 12px 16px;
  background: rgba(66,133,244,.08);
  border: 1px solid rgba(66,133,244,.2);
  border-radius: var(--radius);
  font-size: .82rem; color: var(--text-muted); line-height: 1.5;
  display: flex; align-items: flex-start; gap: 8px;
}
.browser-google-tip span { font-size: 1.1rem; flex-shrink: 0; }

@media (max-width: 768px) {
  .vision-inner { flex-direction: column; }
  .vision-main h3 { font-size: 1.2rem; }
  .roadmap-compact { padding: 0 8px; }
  .rc-header { padding: 12px 14px; }
  .rc-header h4 { font-size: .9rem; }
  .hero-free-banner { flex-direction: column; text-align: center; gap: 6px; margin: 16px auto 0; justify-content: center; }
  .bounty-img { height: 90px; }
  .showcase-body { flex-direction: column; gap: 12px; }
  .showcase-img { width: 100%; height: 180px; }
  .sim-products-grid { grid-template-columns: 1fr; }
  .ost-ext-overlay { position: relative; bottom: auto; right: auto; width: 100%; margin-top: 12px; }
  .store-products { grid-template-columns: 1fr; }
  .browser-ost-badge { display: none; }
}
.clf-source a { color: #6d9fff; text-decoration: none; }

/* Censorship Citizen Banner */
.censorship-citizen-banner {
  position: relative;
  background: linear-gradient(135deg, rgba(109,159,255,.06), rgba(16,185,129,.06));
  border: 1px solid rgba(109,159,255,.15);
  border-radius: 20px;
  padding: 48px 40px;
  text-align: center;
  overflow: hidden;
}
.ccb-glow {
  position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
  width: 400px; height: 200px;
  background: radial-gradient(ellipse, rgba(109,159,255,.1), transparent 70%);
}
.censorship-citizen-banner h3 {
  font-size: 1.4rem; margin-bottom: 12px;
  position: relative;
}
.censorship-citizen-banner p {
  color: var(--text-muted); max-width: 650px; margin: 0 auto 24px;
  line-height: 1.7; position: relative;
}
.ccb-stats {
  display: flex; justify-content: center; gap: 40px;
  flex-wrap: wrap; position: relative;
}
.ccb-stat { display: flex; flex-direction: column; align-items: center; }
.ccb-num { font-size: 1.5rem; font-weight: 700; color: #6d9fff; }
.ccb-stat span:last-child { font-size: .78rem; color: var(--text-muted); }

/* ---------- Interactive Rocket Timeline ---------- */
.rocket-timeline {
  position: relative;
  padding: 60px 20px 40px;
  margin: 40px 0;
}
.rt-track {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 4px;
  background: linear-gradient(180deg,
    #10b981 0%, #10b981 25%,
    rgba(109,159,255,.3) 25%, rgba(109,159,255,.3) 100%);
  border-radius: 2px;
}
.rt-rocket {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: 10%;
  z-index: 3;
  transition: top 1s cubic-bezier(.4,0,.2,1);
}
.rt-rocket-body {
  font-size: 2.5rem;
  filter: drop-shadow(0 0 16px rgba(245,158,11,.6));
  animation: rocket-hover 2s ease-in-out infinite;
  transform: rotate(0deg);
}
@keyframes rocket-hover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.rt-rocket-flame {
  position: absolute;
  bottom: -16px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 24px;
  background: linear-gradient(180deg, #f59e0b, #ef4444, transparent);
  border-radius: 50%;
  opacity: .7;
  animation: flame-flicker .3s ease-in-out infinite alternate;
}
@keyframes flame-flicker {
  0% { height: 20px; opacity: .6; }
  100% { height: 28px; opacity: .9; }
}
.rt-path {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: 0; bottom: 0;
  width: 4px;
}
.rt-stations {
  position: relative;
  display: flex; flex-direction: column;
  gap: 80px;
}
.rt-station {
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative;
  opacity: .5;
  transition: opacity .5s, transform .5s;
}
.rt-station:nth-child(odd) {
  flex-direction: row;
  padding-left: calc(50% + 40px);
}
.rt-station:nth-child(even) {
  flex-direction: row-reverse;
  padding-right: calc(50% + 40px);
  text-align: right;
}
.rt-station-active { opacity: 1; }
.rt-station-icon {
  font-size: 2.5rem;
  position: absolute;
  left: 50%; transform: translateX(-50%);
  z-index: 2;
  background: var(--bg);
  padding: 8px;
  border-radius: 50%;
}
.rt-station-ring {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 64px; height: 64px;
  border: 2px solid rgba(109,159,255,.3);
  border-radius: 50%;
  z-index: 1;
}
.rt-station-active .rt-station-ring {
  border-color: #10b981;
  box-shadow: 0 0 20px rgba(16,185,129,.3);
}
.rt-station-label h4 {
  font-size: 1.1rem; margin: 0 0 4px;
}
.rt-station-label p {
  font-size: .85rem; color: var(--text-muted); margin: 0 0 6px;
}
.rt-status {
  font-size: .72rem; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  display: inline-block;
}
.rt-status-done {
  background: rgba(16,185,129,.15); color: #10b981;
}
.rt-status-pending {
  background: rgba(245,158,11,.1); color: #f59e0b;
}

/* 3D Scene Canvases */
.rt-3d-wrap {
  width: 100%;
  max-width: 340px;
  height: 240px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid rgba(109, 159, 255, 0.25);
  box-shadow: 0 0 24px rgba(109, 159, 255, 0.12), inset 0 0 30px rgba(0,0,0,0.3);
  background: radial-gradient(ellipse at center, rgba(10,15,30,0.9), rgba(0,0,0,0.95));
  position: relative;
}
.rt-3d-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.rt-3d-canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 16px;
}
.rt-station-active .rt-3d-wrap {
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.15), inset 0 0 30px rgba(0,0,0,0.3);
}

/* =================== UNIFIED SPACE JOURNEY 3D =================== */
.space-journey-3d {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  height: 85vh;
  min-height: 500px;
  max-height: 1100px;
  margin-top: 24px;
  margin-bottom: 40px;
  overflow: hidden;
  border-top: 1px solid rgba(109,159,255,0.3);
  border-bottom: 1px solid rgba(109,159,255,0.3);
  box-shadow: 0 0 80px rgba(109,159,255,0.12), inset 0 0 120px rgba(0,0,0,0.6);
  background: radial-gradient(ellipse at 60% 40%, rgba(12,18,42,0.98), #000);
}
.sj-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Cinematic HUD */
.sj-hud {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 18px 28px; pointer-events: none; z-index: 5;
  font-family: 'Courier New', monospace;
}
.sj-hud-left, .sj-hud-right { display: flex; flex-direction: column; gap: 6px; }
.sj-hud-center { text-align: center; }
.sj-hud-label {
  font-size: .6rem; letter-spacing: 2px; color: rgba(109,159,255,0.5);
  text-transform: uppercase; display: block;
}
.sj-hud-val {
  font-size: .85rem; color: rgba(16,185,129,0.9); font-weight: 700;
  text-shadow: 0 0 8px rgba(16,185,129,0.4);
}
.sj-hud-mission {
  font-size: .72rem; letter-spacing: 3px; color: rgba(255,255,255,0.7);
  text-transform: uppercase; margin-bottom: 4px;
}
.sj-hud-status {
  font-size: .6rem; letter-spacing: 2px; color: rgba(16,185,129,0.6);
  animation: sjHudBlink 2s ease infinite;
}
@keyframes sjHudBlink { 0%,80%{opacity:1} 90%{opacity:.3} 100%{opacity:1} }

/* Crosshair */
.sj-crosshair {
  position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px;
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 4;
  border: 1px solid rgba(109,159,255,0.15);
  border-radius: 50%;
  box-shadow: inset 0 0 10px rgba(109,159,255,0.05);
}
.sj-crosshair::before, .sj-crosshair::after {
  content: ''; position: absolute;
  background: rgba(109,159,255,0.12);
}
.sj-crosshair::before {
  width: 1px; height: 12px;
  left: 50%; top: -8px; transform: translateX(-50%);
}
.sj-crosshair::after {
  width: 12px; height: 1px;
  top: 50%; left: -8px; transform: translateY(-50%);
}

.sj-phase-indicators {
  position: absolute; bottom: 44px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 6px; padding: 10px 20px;
  background: rgba(0,0,0,0.7); border-radius: 999px;
  border: 1px solid rgba(109,159,255,0.15);
  backdrop-filter: blur(12px); z-index: 6;
}
.sj-phase-btn {
  padding: 8px 16px;
  background: rgba(109,159,255,0.08);
  border: 1px solid rgba(109,159,255,0.2);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .3s;
}
.sj-phase-btn:hover {
  background: rgba(109,159,255,0.15);
  color: var(--text);
}
.sj-phase-active {
  background: rgba(16,185,129,0.15) !important;
  border-color: rgba(16,185,129,0.4) !important;
  color: #10b981 !important;
  box-shadow: 0 0 12px rgba(16,185,129,0.2);
}
.sj-phase-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  text-align: center; padding: 10px;
  font-size: .82rem; font-weight: 600;
  color: var(--text-muted);
  background: rgba(0,0,0,0.7);
  letter-spacing: 0.5px; z-index: 6;
  border-top: 1px solid rgba(109,159,255,0.1);
}

/* =================== FAMILY VAULT MULTI-STEP =================== */
.gv-form-subtitle {
  font-size: .82rem;
  color: var(--text-muted);
  margin-bottom: 20px;
  line-height: 1.5;
}
.gv-form-step { animation: fadeSlideIn .4s ease; }
.gv-form-step-hidden { display: none !important; }
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.gv-step-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--text);
}
.gv-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  flex-shrink: 0;
}
.gv-req { color: #ef4444; }
.gv-form-select {
  appearance: auto;
  -webkit-appearance: auto;
  cursor: pointer;
}
.gv-form-row-inline {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.gv-form-row-inline .btn { flex: 1; }
.gv-next-btn, .gv-back-btn {
  width: 100%;
  margin-top: 16px;
}
.gv-consent-checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
  text-align: left;
}
.gv-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .8rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1.4;
}
.gv-consent-row input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.gv-progress-bar {
  margin-top: 16px;
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
.gv-pb-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--success));
  border-radius: 999px;
  transition: width .5s ease;
}
.gv-pb-text {
  position: absolute;
  top: 10px;
  right: 0;
  font-size: .7rem;
  color: var(--text-muted);
}

/* =================== DEPIN VERIFICATION FORM =================== */
.depin-claim-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.depin-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  text-align: left;
}
.depin-form-hidden { display: none !important; }
.depin-form-label {
  font-size: .82rem;
  color: var(--text-muted);
  font-weight: 600;
}
.depin-form-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: .88rem;
}
.depin-form-input:focus { outline: none; border-color: var(--accent); }
.depin-proof-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.depin-proof-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: var(--text-muted);
  cursor: pointer;
}
.depin-proof-option input {
  accent-color: var(--accent);
}
.depin-verify-status {
  min-height: 24px;
  margin: 10px 0;
  font-size: .85rem;
  color: var(--text-muted);
}
.depin-verify-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
  padding: 16px;
  background: rgba(109,159,255,0.04);
  border: 1px solid rgba(109,159,255,0.15);
  border-radius: var(--radius-sm);
  text-align: left;
}
.depin-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  color: var(--text-muted);
  transition: color .3s;
}
.depin-check-item.depin-chk-pass {
  color: #10b981;
}
.depin-check-item.depin-chk-fail {
  color: #ef4444;
}
.depin-chk-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

/* ---------- Responsive additions ---------- */
@media (max-width: 768px) {
  .ost-modal-overlay { padding: 12px; }
  .ost-modal { padding: 20px 16px; max-height: 85vh; }
  .ost-modal-lg { max-width: 100%; }
  .gv-open-modal-btn, .depin-open-modal-btn { padding: 12px 20px; font-size: .92rem; }

  .section-space { padding: 80px 0 60px; }

  /* Satellites */
  .sat-body { font-size: 1.3rem; }
  .sat-trail { width: 40px; }

  /* Rev strip */
  .rev-strip { justify-content: flex-start; }
  .rev-chip { font-size: .75rem; padding: 6px 12px; }

  /* AI hook */
  .ai-hook-banner { padding: 24px 16px; }
  .ai-hook-content h3 { font-size: 1.2rem; }
  .ai-hook-stats { gap: 16px; }
  .ai-hook-num { font-size: 1.2rem; }
  .ai-hook-use-cases { gap: 6px; }
  .ai-hook-tag { font-size: .72rem; padding: 4px 10px; }

  /* News feed */
  .censorship-live-feed { padding: 16px; }
  .clf-item { flex-direction: column; align-items: flex-start; gap: 6px; }
  .clf-time { min-width: auto; }

  /* Censorship banner */
  .censorship-citizen-banner { padding: 32px 20px; }
  .ccb-stats { gap: 20px; }

  /* Rocket timeline */
  .rocket-timeline { padding: 40px 8px 20px; }
  .rt-stations { gap: 60px; }
  .rt-station:nth-child(odd) { padding-left: 60px; }
  .rt-station:nth-child(even) { padding-right: 0; padding-left: 60px; flex-direction: row; text-align: left; }
  .rt-track { left: 24px; transform: none; }
  .rt-station-icon { left: 24px; font-size: 1.8rem; }
  .rt-station-ring { left: 24px; width: 48px; height: 48px; }
  .rt-3d-wrap { max-width: 280px; height: 200px; }
  .sj-canvas { height: 100%; }
  .sj-phase-btn { font-size: .68rem; padding: 6px 10px; }
  .space-journey-3d { height: 65vh; min-height: 350px; }
  .sj-hud { padding: 10px 14px; }
  .sj-hud-val { font-size: .72rem; }
  .sj-hud-mission { font-size: .6rem; letter-spacing: 1px; }
  .sj-crosshair { width: 28px; height: 28px; }
  .gv-create-form { padding: 16px; }
  .depin-claim-box { padding: 16px; }
  .rt-rocket { left: 24px; }
  .rt-station-label h4 { font-size: .95rem; }
}

/* ==========================================================================
   OST GIFT CARD EXCHANGE — giftcash.com style
   ========================================================================== */
.gc2 { margin-top: 64px; position: relative; padding: 40px 28px 28px; border-radius: 24px; background: linear-gradient(165deg, rgba(0,200,83,.02) 0%, rgba(8,10,20,.7) 40%, rgba(0,200,83,.01) 100%); border: 1px solid rgba(0,200,83,.08); overflow: hidden; }
.gc2::before { content:''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,200,83,.5), transparent); }

/* Hero */
.gc2-hero { text-align: center; margin-bottom: 28px; }
.gc2-hero-badge {
  display: inline-block; padding: 4px 14px; border-radius: 50px;
  background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.3);
  color: var(--success); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;
}
.gc2-hero h3 { font-size: 2rem; font-weight: 800; background: linear-gradient(135deg, #00c853, #fff, #00c853); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 8px; }
.gc2-hero p { color: var(--muted); max-width: 440px; margin: 0 auto; font-size: .9rem; line-height: 1.5; }

/* 3-step progress bar */
.gc2-steps-bar { display: flex; gap: 8px; justify-content: center; margin-bottom: 28px; }
.gc2-step-pill { display: flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 30px; font-size: .82rem; font-weight: 700; color: var(--muted); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); transition: .3s; }
.gc2-step-pill.gc2-step-active { background: rgba(0,200,83,.1); border-color: rgba(0,200,83,.3); color: #00c853; }
.gc2-step-pill.gc2-step-done { background: rgba(0,200,83,.06); border-color: rgba(0,200,83,.15); color: #00c853; }
.gc2-step-connector { flex: 1; height: 2px; background: var(--border); min-width: 20px; margin: 0 -4px; align-self: center; }
.gc2-step-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.06); font-weight: 800; font-size: .78rem; }
.gc2-step-active .gc2-step-num { background: #00c853; color: #0a0a16; }
.gc2-step-done .gc2-step-num { background: #00c853; color: #0a0a16; }

/* Panels (steps) */
.gc2-panel { display: none; max-width: 820px; margin: 0 auto; }
.gc2-panel-active { display: block; animation: gc2FadeIn .3s ease; }
@keyframes gc2FadeIn { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }

/* Fields */
.gc2-field { margin-bottom: 18px; }
.gc2-label { display: block; font-size: .78rem; font-weight: 700; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.gc2-opt { font-weight: 400; text-transform: none; font-size: .72rem; opacity: .5; }
.gc2-inp { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.25); color: var(--text); font-size: .9rem; outline: none; transition: border-color .2s, box-shadow .2s; box-sizing: border-box; }
.gc2-inp:focus { border-color: #00c853; box-shadow: 0 0 0 2px rgba(0,200,83,.1); }
.gc2-inp::placeholder { color: rgba(255,255,255,.2); }

/* Brand search */
.gc2-brand-search-wrap { position: relative; }
.gc2-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: .9rem; pointer-events: none; z-index: 1; }
.gc2-inp-search { padding-left: 36px !important; }
.gc2-sel-rate { font-size: .72rem; color: var(--success,#00c853); font-weight: 600; background: rgba(52,211,153,.1); padding: 2px 8px; border-radius: 6px; margin-left: auto; }
.gc2-brand-dropdown { position: absolute; top: 100%; left: 0; right: 0; max-height: 240px; overflow-y: auto; background: #15161f; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; z-index: 20; display: none; box-shadow: 0 12px 40px rgba(0,0,0,.5); scrollbar-width: thin; }
.gc2-brand-dropdown.gc2-dd-open { display: block; }
.gc2-brand-opt { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; transition: background .15s; font-size: .85rem; }
.gc2-brand-opt:hover { background: rgba(0,200,83,.06); }
.gc2-brand-opt img { width: 36px; height: 36px; border-radius: 10px; object-fit: contain; background: #fff; padding: 3px; box-sizing: border-box; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.gc2-brand-opt-name { font-weight: 600; }
.gc2-brand-opt-rate { margin-left: auto; font-size: .72rem; color: #00c853; font-weight: 700; }

/* Selected brand chip */
.gc2-selected-brand { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(0,200,83,.06); border: 1px solid rgba(0,200,83,.15); margin-top: 8px; }
.gc2-sel-logo { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; background: #fff; padding: 2px; box-sizing: border-box; }
.gc2-sel-name { font-weight: 700; font-size: .88rem; flex: 1; }
.gc2-sel-x { background: none; border: none; color: var(--muted); font-size: 1.2rem; cursor: pointer; padding: 0 4px; }
.gc2-sel-x:hover { color: #ff5252; }

/* Balance row */
.gc2-balance-row { display: flex; gap: 8px; }
.gc2-currency-sel { flex: 0 0 110px; padding: 12px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.3); color: var(--text); font-size: .85rem; outline: none; cursor: pointer; -webkit-appearance: none; appearance: none; box-sizing: border-box; }
.gc2-currency-sel option { background: #15161f; }

/* Quick amounts */
.gc2-quicks { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.gc2-q { padding: 8px 16px; border-radius: 10px; border: 1px solid rgba(0,200,83,.1); background: rgba(0,200,83,.04); color: #00c853; font-size: .8rem; font-weight: 700; cursor: pointer; transition: .2s; }
.gc2-q:hover { background: rgba(0,200,83,.12); border-color: rgba(0,200,83,.25); transform: translateY(-1px); }
.gc2-q.gc2-q-active { background: rgba(0,200,83,.15); border-color: #00c853; }

/* Offer button */
.gc2-offer-btn { width: 100%; padding: 14px; border-radius: 14px; border: none; background: #00c853; color: #0a0a16; font-size: 1rem; font-weight: 800; cursor: pointer; transition: .2s; }
.gc2-offer-btn:hover:not(:disabled) { background: #00b848; box-shadow: 0 0 24px rgba(0,200,83,.25); transform: translateY(-1px); }
.gc2-offer-btn:disabled { opacity: .35; cursor: not-allowed; }

/* Cart */
.gc2-cart { margin-top: 24px; border-radius: 16px; background: rgba(0,0,0,.15); border: 1px solid rgba(255,255,255,.05); padding: 18px; }
.gc2-cart-title { font-weight: 700; font-size: .88rem; margin-bottom: 12px; }
.gc2-cart-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.gc2-cart-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.12); border: 1px solid rgba(255,255,255,.03); }
.gc2-cart-item img { width: 28px; height: 28px; border-radius: 7px; object-fit: contain; background: #fff; padding: 2px; box-sizing: border-box; }
.gc2-cart-item-info { flex: 1; font-size: .82rem; font-weight: 600; }
.gc2-cart-item-val { text-align: right; }
.gc2-cart-item-fiat { font-size: .75rem; color: var(--muted); }
.gc2-cart-item-ost { font-size: .82rem; font-weight: 800; color: #00c853; }
.gc2-cart-item-x { background: none; border: none; color: var(--muted); font-size: .9rem; cursor: pointer; padding: 0 4px; }
.gc2-cart-item-x:hover { color: #ff5252; }
.gc2-cart-total { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.05); font-weight: 700; }
.gc2-cart-total-val { font-size: 1.2rem; color: #00c853; font-weight: 800; }
.gc2-checkout-btn { width: 100%; padding: 14px; border-radius: 14px; border: none; background: linear-gradient(135deg, #00c853, #00b848); color: #0a0a16; font-size: 1rem; font-weight: 800; cursor: pointer; transition: .2s; margin-top: 8px; }
.gc2-checkout-btn:hover { box-shadow: 0 0 24px rgba(0,200,83,.3); transform: translateY(-1px); }

/* Step 2 — Offer card */
.gc2-offer-card { text-align: center; padding: 32px; border-radius: 22px; background: linear-gradient(165deg, rgba(0,200,83,.03) 0%, rgba(15,15,28,.95) 100%); border: 1px solid rgba(0,200,83,.12); box-shadow: 0 20px 60px rgba(0,0,0,.3); position: relative; overflow: hidden; }
.gc2-offer-card::before { content:''; position: absolute; top: -1px; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,200,83,.4), transparent); }
.gc2-offer-icon { font-size: 2.8rem; margin-bottom: 10px; filter: drop-shadow(0 4px 12px rgba(0,200,83,.2)); }
.gc2-offer-heading { font-size: 1.3rem; font-weight: 800; margin-bottom: 16px; }
.gc2-offer-details { text-align: left; margin-bottom: 16px; border-radius: 12px; background: rgba(0,0,0,.2); padding: 14px; }
.gc2-offer-det-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: .82rem; border-bottom: 1px solid rgba(255,255,255,.03); }
.gc2-offer-det-row:last-child { border-bottom: none; }
.gc2-offer-total-row { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-radius: 14px; background: rgba(0,200,83,.06); border: 1px solid rgba(0,200,83,.15); margin-bottom: 14px; font-weight: 700; box-shadow: inset 0 1px 0 rgba(0,200,83,.08); }
.gc2-offer-total-val { font-size: 1.4rem; color: #00c853; font-weight: 900; text-shadow: 0 0 20px rgba(0,200,83,.2); }
.gc2-offer-fees { display: flex; justify-content: center; gap: 20px; font-size: .75rem; color: var(--muted); margin-bottom: 16px; }
.gc2-offer-fees b { color: var(--text); }

/* Payout options */
.gc2-offer-payout { margin-bottom: 18px; }
.gc2-payout-label { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; }
.gc2-payout-opts { display: flex; gap: 8px; justify-content: center; }
.gc2-payout-opt { padding: 8px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.03); color: var(--muted); font-size: .82rem; font-weight: 600; cursor: pointer; transition: .2s; }
.gc2-payout-opt input { display: none; }
.gc2-payout-active { border-color: rgba(0,200,83,.3); background: rgba(0,200,83,.08); color: #00c853; }

.gc2-accept-btn { width: 100%; padding: 16px; border-radius: 14px; border: none; background: #00c853; color: #0a0a16; font-size: 1.05rem; font-weight: 800; cursor: pointer; transition: .25s; margin-bottom: 10px; }
.gc2-accept-btn:hover { background: #00b848; box-shadow: 0 0 32px rgba(0,200,83,.3), 0 0 64px rgba(0,200,83,.08); transform: translateY(-2px); }
.gc2-back-btn { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.06); background: transparent; color: var(--muted); font-size: .85rem; cursor: pointer; transition: .2s; }
.gc2-back-btn:hover { color: var(--text); border-color: rgba(255,255,255,.15); }

/* Step 3 — Done card */
.gc2-done-card { text-align: center; padding: 32px; border-radius: 22px; background: linear-gradient(165deg, rgba(0,200,83,.04) 0%, rgba(15,15,28,.95) 100%); border: 1px solid rgba(0,200,83,.15); box-shadow: 0 20px 60px rgba(0,0,0,.3); position: relative; overflow: hidden; }
.gc2-done-card::before { content:''; position: absolute; top: -1px; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,200,83,.5), transparent); }
.gc2-done-icon { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #00c853, #00e67a); color: #0a0a16; font-size: 1.6rem; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; box-shadow: 0 8px 24px rgba(0,200,83,.25); }
.gc2-done-heading { font-size: 1.3rem; font-weight: 800; margin-bottom: 6px; }
.gc2-done-amount { font-size: 1.8rem; font-weight: 900; color: #00c853; margin-bottom: 8px; }
.gc2-done-tx { font-size: .75rem; color: var(--muted); margin-bottom: 14px; }
.gc2-tx-hash { font-family: 'Courier New', monospace; color: var(--text); word-break: break-all; }
.gc2-copy-tx { padding: 8px 20px; border-radius: 10px; border: 1px solid rgba(0,200,83,.2); background: rgba(0,200,83,.06); color: #00c853; font-size: .82rem; font-weight: 600; cursor: pointer; transition: .2s; margin-right: 8px; }
.gc2-copy-tx:hover { background: rgba(0,200,83,.12); }
.gc2-new-btn { padding: 8px 20px; border-radius: 10px; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.03); color: var(--text); font-size: .82rem; font-weight: 600; cursor: pointer; transition: .2s; }
.gc2-new-btn:hover { border-color: rgba(255,255,255,.15); }

/* Flow animation */
.gc2-flow { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; max-width: 520px; margin-left: auto; margin-right: auto; }
.gc2-fstep { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: rgba(0,0,0,.12); border: 1px solid rgba(255,255,255,.03); opacity: .25; transition: .5s; font-size: .82rem; }
.gc2-fstep.gc2-fs-active { opacity: 1; border-color: #00c853; background: rgba(0,200,83,.04); }
.gc2-fstep.gc2-fs-done { opacity: 1; border-color: rgba(0,200,83,.25); background: rgba(0,200,83,.03); }
.gc2-fdot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.12); flex-shrink: 0; transition: .3s; }
.gc2-fs-active .gc2-fdot { background: #00c853; box-shadow: 0 0 8px rgba(0,200,83,.5); animation: gc2Pulse 1.2s infinite; }
.gc2-fs-done .gc2-fdot { background: var(--accent); }
@keyframes gc2Pulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(0,200,83,.3); } 50%{ box-shadow: 0 0 0 8px rgba(0,200,83,0); } }

/* History */
.gc2-hist-wrap { margin: 24px 0 14px; }
.gc2-hist-toggle { width: 100%; padding: 10px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.04); background: rgba(0,0,0,.12); color: var(--text); font-size: .82rem; font-weight: 600; cursor: pointer; transition: .25s; text-align: left; }
.gc2-hist-toggle:hover { border-color: rgba(0,200,83,.12); background: rgba(0,200,83,.03); }
.gc2-hist { padding: 10px 0 0; }
.gc2-hist-empty { text-align: center; padding: 20px; font-size: .82rem; color: var(--muted); }
.gc2-hist-list { display: flex; flex-direction: column; gap: 5px; max-height: 200px; overflow-y: auto; scrollbar-width: thin; }
.gc2-hx { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.12); border: 1px solid rgba(255,255,255,.03); }
.gc2-hx img { width: 28px; height: 28px; border-radius: 7px; object-fit: contain; background: #fff; padding: 2px; box-sizing: border-box; flex-shrink: 0; }
.gc2-hx-info { flex: 1; }
.gc2-hx-name { font-size: .78rem; font-weight: 700; }
.gc2-hx-date { font-size: .64rem; color: var(--muted); }
.gc2-hx-amt { text-align: right; }
.gc2-hx-fiat { font-size: .75rem; color: var(--muted); }
.gc2-hx-ost { font-size: .82rem; font-weight: 800; color: #00c853; }
.gc2-note { margin-top: 16px; padding: 10px 14px; border-radius: 10px; background: rgba(0,200,83,.02); border: 1px solid rgba(0,200,83,.04); font-size: .7rem; color: var(--muted); text-align: center; line-height: 1.5; }

@media (max-width: 700px) {
  .gc2-hero h3 { font-size: 1.5rem; }
  .gc2-steps-bar { flex-direction: column; align-items: stretch; }
  .gc2-step-pill { justify-content: center; }
  .gc2-balance-row { flex-direction: column; }
  .gc2-currency-sel { flex: none; width: 100%; }
  .gc2-brands-grid { gap: 8px; }
  .gc2-payout-opts { flex-direction: column; }
}

/* ==========================================================================
   OST FUEL FINDER — gasbuddy.com style
   ========================================================================== */
.fuel2 { margin-top: 72px; position: relative; padding: 40px 28px 28px; border-radius: 24px; background: linear-gradient(165deg, rgba(0,113,206,.03) 0%, rgba(8,10,20,.7) 40%, rgba(0,113,206,.015) 100%); border: 1px solid rgba(0,113,206,.08); overflow: hidden; }
.fuel2::before { content:''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,113,206,.5), transparent); }

/* Hero */
.fuel2-hero { text-align: center; margin-bottom: 28px; }
.fuel2-hero-badge {
  display: inline-block; padding: 4px 14px; border-radius: 50px;
  background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.3);
  color: var(--success); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;
}

.fuel2-hero h3 { font-size: 1.8rem; font-weight: 800; background: linear-gradient(135deg, #0071CE, #fff, #0071CE); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 8px; }
.fuel2-hero-sub { color: var(--muted); max-width: 460px; margin: 0 auto 20px; font-size: .9rem; line-height: 1.5; }

/* Search bar */
.fuel2-search-bar { display: flex; gap: 10px; max-width: 520px; margin: 0 auto 18px; }
.fuel2-loc-input { flex: 1; padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.3); color: var(--text); font-size: .9rem; outline: none; transition: border-color .2s; box-sizing: border-box; }
.fuel2-loc-input:focus { border-color: #0071CE; box-shadow: 0 0 0 2px rgba(0,113,206,.1); }
.fuel2-loc-input::placeholder { color: rgba(255,255,255,.2); }
.fuel2-find-btn { padding: 14px 28px; border-radius: 14px; border: none; background: #0071CE; color: #fff; font-size: .9rem; font-weight: 700; cursor: pointer; transition: .25s; white-space: nowrap; }
.fuel2-find-btn:hover { background: #005fa3; box-shadow: 0 6px 24px rgba(0,113,206,.35), 0 0 60px rgba(0,113,206,.08); transform: translateY(-2px); }

/* Fuel type tabs */
.fuel2-fuel-tabs { display: flex; gap: 4px; justify-content: center; }
.fuel2-ft { padding: 8px 18px; border-radius: 10px; font-size: .82rem; font-weight: 700; background: transparent; border: 1px solid rgba(255,255,255,.06); color: var(--muted); cursor: pointer; transition: .2s; }
.fuel2-ft:hover { color: var(--text); border-color: rgba(255,255,255,.15); }
.fuel2-ft-active { background: rgba(0,113,206,.1); border-color: rgba(0,113,206,.3); color: #4da6ff; }

/* List header */
.fuel2-list-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.fuel2-list-title-wrap { display: grid; gap: 4px; }
.fuel2-list-title { font-size: .92rem; font-weight: 700; }
.fuel2-list-title span { color: #4da6ff; }
.fuel2-list-sub { font-size: .74rem; color: var(--muted); }
.fuel2-sort-row { display: flex; gap: 4px; }
.fuel2-sort { padding: 6px 14px; border-radius: 8px; font-size: .75rem; font-weight: 700; background: transparent; border: 1px solid rgba(255,255,255,.06); color: var(--muted); cursor: pointer; transition: .2s; }
.fuel2-sort:hover { color: var(--text); }
.fuel2-sort-active { background: rgba(0,113,206,.1); border-color: rgba(0,113,206,.25); color: #4da6ff; }
.fuel2-list-tools { display: flex; justify-content: flex-end; margin: -6px 0 16px; }
.fuel2-list-toggle {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(126,200,255,.2);
  background: rgba(126,200,255,.06);
  color: #b8e6ff;
  font-size: .75rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.fuel2-list-toggle:hover { transform: translateY(-1px); border-color: rgba(126,200,255,.35); background: rgba(126,200,255,.1); }

/* Station list */
.fuel2-station-list { display: flex; flex-direction: column; gap: 12px; }

/* Station card — GasBuddy-style rows */
.fuel2-station {
  display: flex; gap: 16px; padding: 20px; border-radius: 18px;
  background: linear-gradient(165deg, rgba(0,113,206,.02) 0%, rgba(15,15,28,.9) 100%);
  border: 1px solid rgba(255,255,255,.06);
  transition: all .3s cubic-bezier(.4,0,.2,1); cursor: pointer; align-items: flex-start;
  position: relative; overflow: hidden;
}
.fuel2-station::after { content:''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,113,206,.15), transparent); }
.fuel2-station:hover { border-color: rgba(0,113,206,.35); background: linear-gradient(165deg, rgba(0,113,206,.06) 0%, rgba(15,15,28,.95) 100%); transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,.3), 0 0 0 1px rgba(0,113,206,.08); }

/* Rank number */
.fuel2-station-rank { font-size: 1.1rem; font-weight: 900; color: var(--muted); min-width: 28px; text-align: center; padding-top: 4px; }
.fuel2-station:first-child .fuel2-station-rank { color: #4da6ff; }

/* Station logo */
.fuel2-station-logo { width: 56px; height: 56px; border-radius: 14px; object-fit: contain; background: #fff; padding: 5px; box-sizing: border-box; box-shadow: 0 4px 16px rgba(0,0,0,.2); flex-shrink: 0; transition: transform .3s; }
.fuel2-station:hover .fuel2-station-logo { transform: scale(1.06); }

/* Station info */
.fuel2-station-info { flex: 1; min-width: 0; }
.fuel2-station-name { font-weight: 700; font-size: .95rem; margin-bottom: 3px; }
.fuel2-station-addr { font-size: .75rem; color: var(--muted); margin-bottom: 4px; }
.fuel2-station-stars { display: flex; gap: 2px; margin-bottom: 4px; }
.fuel2-star { color: #ffd700; font-size: .85rem; }
.fuel2-star-empty { color: rgba(255,255,255,.1); font-size: .85rem; }
.fuel2-station-reviews { font-size: .68rem; color: var(--muted); }
.fuel2-station-amenities { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.fuel2-amenity { padding: 4px 10px; border-radius: 8px; font-size: .64rem; font-weight: 600; background: rgba(0,113,206,.04); border: 1px solid rgba(0,113,206,.08); color: rgba(255,255,255,.5); transition: all .2s; }
.fuel2-station:hover .fuel2-amenity { background: rgba(0,113,206,.08); border-color: rgba(0,113,206,.15); color: rgba(255,255,255,.7); }

/* Station price column */
.fuel2-station-price-col { text-align: right; flex-shrink: 0; }
.fuel2-station-price { font-size: 1.6rem; font-weight: 900; color: #4da6ff; line-height: 1; text-shadow: 0 0 20px rgba(77,166,255,.15); }
.fuel2-station-price-unit { font-size: .68rem; color: var(--muted); margin-bottom: 4px; }
.fuel2-station-reporter { font-size: .62rem; color: var(--muted); }
.fuel2-station-time { font-size: .62rem; color: var(--muted); }
.fuel2-station-cash { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: .62rem; font-weight: 700; background: rgba(0,200,83,.1); border: 1px solid rgba(0,200,83,.15); color: #00c853; margin-top: 3px; animation: cashBadgePulse 3s ease infinite; }
@keyframes cashBadgePulse { 0%,100%{ box-shadow: none; } 50%{ box-shadow: 0 0 8px rgba(0,200,83,.15); } }
.fuel2-station-dist { font-size: .65rem; color: var(--muted); margin-top: 2px; }

/* Station Detail Modal */
.fuel2-detail-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.8); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.fuel2-detail-modal { width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; background: linear-gradient(165deg, rgba(0,113,206,.02) 0%, #12131c 40%); border: 1px solid rgba(255,255,255,.1); border-radius: 22px; padding: 30px; position: relative; scrollbar-width: thin; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.fuel2-detail-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.06); border: none; color: var(--muted); font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .2s; }
.fuel2-detail-close:hover { background: rgba(255,255,255,.12); color: #fff; }

.fuel2-det-top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.fuel2-det-logo { width: 56px; height: 56px; border-radius: 14px; object-fit: contain; background: #fff; padding: 5px; box-sizing: border-box; box-shadow: 0 3px 12px rgba(0,0,0,.2); }
.fuel2-det-info { flex: 1; }
.fuel2-det-info h4 { font-size: 1.1rem; margin-bottom: 3px; }
.fuel2-det-addr { font-size: .78rem; color: var(--muted); }
.fuel2-det-stars { display: flex; gap: 2px; margin: 4px 0; }
.fuel2-det-reviews-count { font-size: .72rem; color: var(--muted); }

/* Price grid in detail */
.fuel2-det-prices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.fuel2-det-price-box { text-align: center; padding: 14px 10px; border-radius: 14px; background: linear-gradient(165deg, rgba(0,113,206,.03) 0%, rgba(0,0,0,.25) 100%); border: 1px solid rgba(0,113,206,.08); transition: all .2s; }
.fuel2-det-price-box:hover { border-color: rgba(0,113,206,.2); box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.fuel2-det-price-type { font-size: .62rem; font-weight: 700; color: var(--muted); text-transform: uppercase; margin-bottom: 4px; }
.fuel2-det-price-val { font-size: 1.25rem; font-weight: 900; color: #4da6ff; text-shadow: 0 0 16px rgba(77,166,255,.12); }

/* Amenities in detail */
.fuel2-det-amenities { display: flex; flex-wrap: wrap; gap: 6px; }
.fuel2-det-amenity { padding: 5px 12px; border-radius: 8px; font-size: .72rem; font-weight: 600; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.04); color: var(--muted); }

.fuel2-det-section { margin-bottom: 18px; }
.fuel2-det-section-title { font-size: .85rem; font-weight: 700; margin-bottom: 10px; color: var(--text); }

/* Pay with OST in detail */
.fuel2-det-pay { margin-bottom: 18px; padding: 18px; border-radius: 16px; background: rgba(0,0,0,.15); border: 1px solid rgba(255,255,255,.04); }
.fuel2-det-session-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.fuel2-det-pay-fields { display: flex; gap: 10px; margin-bottom: 14px; }
.fuel2-pf { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.fuel2-pf label { font-size: .68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.fuel2-det-inp { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.25); color: var(--text); font-size: .85rem; outline: none; transition: border-color .2s; box-sizing: border-box; }
.fuel2-det-inp:focus { border-color: #0071CE; box-shadow: 0 0 0 2px rgba(0,113,206,.1); }
.fuel2-det-inp::placeholder { color: rgba(255,255,255,.2); }
.fuel2-det-merchant-note { margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(126,200,255,.06); border: 1px solid rgba(126,200,255,.12); color: #d7f2ff; font-size: .74rem; line-height: 1.45; }
.fuel2-det-totals { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; padding: 12px; border-radius: 12px; background: rgba(0,0,0,.15); }
.fuel2-dtr { display: flex; justify-content: space-between; font-size: .85rem; }
.fuel2-dtr-ost span:last-child { color: var(--accent); font-weight: 800; }
.fuel2-dtr-rw { padding-top: 6px; border-top: 1px solid rgba(255,255,255,.04); color: #ffd700; font-size: .8rem; }
.fuel2-pay-btn { width: 100%; padding: 14px; border-radius: 14px; border: none; background: #0071CE; color: #fff; font-size: .95rem; font-weight: 700; cursor: pointer; transition: .25s; }
.fuel2-pay-btn:hover:not(:disabled) { background: #005fa3; box-shadow: 0 8px 28px rgba(0,113,206,.35), 0 0 60px rgba(0,113,206,.06); transform: translateY(-1px); }
.fuel2-pay-btn:disabled { opacity: .35; cursor: not-allowed; }

/* Flow in detail */
.fuel2-det-flow { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.fuel2-dfs { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: rgba(0,0,0,.1); border: 1px solid rgba(255,255,255,.03); opacity: .25; transition: .5s; font-size: .82rem; }
.fuel2-dfs.f2-active { opacity: 1; border-color: #0071CE; background: rgba(0,113,206,.05); }
.fuel2-dfs.f2-done { opacity: 1; border-color: rgba(0,200,83,.2); background: rgba(0,200,83,.03); }
.fuel2-dfd { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.12); flex-shrink: 0; transition: .3s; }
.f2-active .fuel2-dfd { background: #0071CE; box-shadow: 0 0 6px rgba(0,113,206,.5); animation: fuel2Pulse 1.2s infinite; }
.f2-done .fuel2-dfd { background: var(--accent); }
.fuel2-det-receipt {
  margin-top: 12px;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(0,200,83,.08), rgba(6,20,16,.9));
  border: 1px solid rgba(0,200,83,.16);
}
.fuel2-det-receipt strong { display: block; margin-bottom: 6px; color: #9cffc1; }
.fuel2-det-receipt p { margin: 0; font-size: .78rem; color: var(--text); line-height: 1.5; }
@keyframes fuel2Pulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(0,113,206,.3); } 50%{ box-shadow: 0 0 0 8px rgba(0,113,206,0); } }

/* Reviews in detail */
.fuel2-det-reviews { display: flex; flex-direction: column; gap: 8px; max-height: 180px; overflow-y: auto; margin-bottom: 10px; scrollbar-width: thin; }
.fuel2-review { padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.12); border: 1px solid rgba(255,255,255,.03); }
.fuel2-review-user { font-size: .72rem; color: #4da6ff; font-weight: 700; margin-bottom: 2px; }
.fuel2-review-stars-sm { font-size: .72rem; color: #ffd700; margin-bottom: 3px; }
.fuel2-review-text { font-size: .8rem; color: var(--muted); line-height: 1.4; }
.fuel2-review-date { font-size: .62rem; color: rgba(255,255,255,.2); margin-top: 3px; }

/* Review form */
.fuel2-det-review-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fuel2-review-inp { flex: 1; min-width: 120px; }
.fuel2-review-stars { display: flex; gap: 2px; }
.fuel2-review-stars span { font-size: 1.1rem; color: rgba(255,255,255,.15); cursor: pointer; transition: color .15s; }
.fuel2-review-stars span.fuel2-star-lit { color: #ffd700; }
.fuel2-review-send { padding: 10px 16px; border-radius: 10px; border: none; background: #0071CE; color: #fff; font-size: .82rem; font-weight: 700; cursor: pointer; transition: .2s; }
.fuel2-review-send:hover { background: #005fa3; }

/* Report price */
.fuel2-report-row { display: flex; gap: 8px; align-items: center; }
.fuel2-report-sel { flex: 0 0 100px; }
.fuel2-report-btn { padding: 10px 16px; border-radius: 10px; border: none; background: rgba(0,113,206,.15); color: #4da6ff; font-size: .82rem; font-weight: 700; cursor: pointer; transition: .2s; }
.fuel2-report-btn:hover { background: rgba(0,113,206,.25); }

/* Rewards */
.fuel2-rw-bar-wrap { max-width: 520px; margin: 24px auto 0; padding: 16px 18px; border-radius: 16px; background: rgba(0,0,0,.15); border: 1px solid rgba(255,255,255,.04); }
.fuel2-rw-title { font-size: .82rem; font-weight: 700; color: #ffd700; margin-bottom: 10px; }
.fuel2-rw-bar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.05); overflow: hidden; margin-bottom: 8px; }
.fuel2-rw-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #0071CE, #4da6ff); transition: width .6s ease; }
.fuel2-rw-meta { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); font-weight: 600; }
.fuel2-note { margin-top: 20px; padding: 10px 14px; border-radius: 10px; background: rgba(0,113,206,.02); border: 1px solid rgba(0,113,206,.04); font-size: .7rem; color: var(--muted); text-align: center; line-height: 1.5; }

/* v49: Incentive Banner */
.fuel2-incentive-banner {
  display: flex; align-items: center; gap: 14px;
  margin: 18px auto 0; max-width: 560px;
  padding: 14px 20px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(0,200,83,.06), rgba(109,159,255,.06));
  border: 1px solid rgba(0,200,83,.15);
}
.fuel2-incentive-icon { font-size: 1.8rem; }
.fuel2-incentive-text strong { display: block; font-size: .88rem; color: #00c853; margin-bottom: 2px; }
.fuel2-incentive-text span { font-size: .76rem; color: var(--text-muted); line-height: 1.4; }

/* v49: Brand Wheel (same as GC) */
.fuel2-brand-wheel-wrap {
  margin: 16px 0 20px; position: relative; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.fuel2-brand-wheel {
  display: flex; gap: 10px;
  overflow-x: auto; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: 10px 24px;
}
.fuel2-brand-wheel::-webkit-scrollbar { display: none; }
.fuel2-wheel-item {
  flex: 0 0 72px; width: 72px; height: 72px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; background: var(--surface2);
  border: 1.5px solid var(--border); border-radius: 14px;
  cursor: pointer; transition: all .2s ease; padding: 6px;
}
.fuel2-wheel-item:hover {
  border-color: #0071CE; transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 24px rgba(0,113,206,.15);
}
.fuel2-wheel-item.active {
  border-color: #0071CE; background: rgba(0,113,206,.1);
  box-shadow: 0 0 0 2px rgba(0,113,206,.2);
}
.fuel2-wheel-item.dimmed { opacity: .35; }
.fuel2-wheel-item img {
  width: 36px; height: 36px; border-radius: 8px;
  object-fit: contain; background: #fff; padding: 2px;
}
.fuel2-wheel-item span {
  font-size: .58rem; color: var(--text-muted); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 64px;
}

/* v49: Oil Price Section */
.fuel2-oil-section {
  margin: 32px 0 24px; padding: 24px;
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(255,152,0,.03), rgba(8,10,20,.7));
  border: 1px solid rgba(255,152,0,.1);
}
.fuel2-oil-header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
  flex-wrap: wrap;
}
.fuel2-oil-icon { font-size: 2rem; }
.fuel2-oil-header h4 { font-size: 1.1rem; font-weight: 700; color: #fff; margin: 0; }
.fuel2-oil-header p { font-size: .76rem; color: var(--text-muted); margin: 2px 0 0; }
.fuel2-oil-live { margin-left: auto; text-align: right; }
.fuel2-oil-price {
  display: block; font-size: 1.4rem; font-weight: 800;
  color: #ff9800;
}
.fuel2-oil-change {
  font-size: .78rem; font-weight: 600; padding: 2px 10px;
  border-radius: 6px; display: inline-block;
}
.fuel2-oil-change.up { color: #00c853; background: rgba(0,200,83,.1); }
.fuel2-oil-change.down { color: #ef4444; background: rgba(239,68,68,.1); }
.fuel2-oil-chart-wrap {
  border-radius: 12px; overflow: hidden;
  background: rgba(0,0,0,.2); padding: 12px;
  border: 1px solid rgba(255,255,255,.04);
}
.fuel2-oil-chart-wrap canvas { width: 100%; height: 220px; display: block; }
.fuel2-oil-legend {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; font-size: .7rem; color: var(--text-muted);
}

/* v49: Strait of Hormuz News */
.fuel2-news-section {
  margin: 24px 0; padding: 24px;
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(239,68,68,.03), rgba(8,10,20,.7));
  border: 1px solid rgba(239,68,68,.08);
}
.fuel2-news-header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
}
.fuel2-news-icon { font-size: 2rem; }
.fuel2-news-header h4 { font-size: 1.1rem; font-weight: 700; color: #fff; margin: 0; }
.fuel2-news-header p { font-size: .76rem; color: var(--text-muted); margin: 2px 0 0; }
.fuel2-news-list { display: flex; flex-direction: column; gap: 8px; }
.fuel2-news-item {
  display: grid; grid-template-columns: 90px 1fr auto; gap: 10px;
  align-items: center;
  padding: 12px 16px; border-radius: 12px;
  background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.04);
  transition: all .2s;
}
.fuel2-news-item:hover {
  border-color: rgba(239,68,68,.15);
  background: rgba(239,68,68,.03);
}
.fuel2-news-date { font-size: .7rem; color: var(--text-muted); font-weight: 600; }
.fuel2-news-title { font-size: .82rem; color: #fff; font-weight: 600; line-height: 1.4; }
.fuel2-news-src {
  font-size: .66rem; color: var(--text-muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  padding: 3px 10px; border-radius: 6px;
  background: rgba(255,255,255,.04);
}

/* v49: OST Swap Banner in detail */
.fuel2-det-ost-swap {
  padding: 8px 14px; border-radius: 10px; margin: 8px 0;
  background: rgba(109,159,255,.06); border: 1px solid rgba(109,159,255,.1);
  font-size: .76rem; color: var(--accent);
}

/* v49: Reward tier badges */
.fuel2-rw-tiers {
  display: flex; gap: 8px; margin-bottom: 10px;
}
.fuel2-rw-tier-badge {
  padding: 4px 12px; border-radius: 8px;
  font-size: .7rem; font-weight: 700;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
  color: var(--text-muted);
}
.fuel2-rw-tier-badge[data-tier="bronze"] { border-color: rgba(205,127,50,.3); color: #cd7f32; }
.fuel2-rw-tier-badge[data-tier="silver"] { border-color: rgba(192,192,192,.3); color: #c0c0c0; }
.fuel2-rw-tier-badge[data-tier="gold"] { border-color: rgba(255,215,0,.3); color: #ffd700; }

@media (max-width: 700px) {
  .fuel2-news-item { grid-template-columns: 1fr; }
  .fuel2-oil-header { flex-direction: column; align-items: flex-start; }
  .fuel2-oil-live { margin-left: 0; text-align: left; }
  .fuel2-incentive-banner { flex-direction: column; text-align: center; }
}

/* Brand tab strip — horizontal scroll */
.fuel2-brand-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 10px; margin-bottom: 18px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(0,113,206,.15) transparent; }
.fuel2-brand-tabs::-webkit-scrollbar { height: 3px; }
.fuel2-brand-tabs::-webkit-scrollbar-thumb { background: rgba(0,113,206,.2); border-radius: 2px; }
.fuel2-brand-tab { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.15); color: var(--text-muted); font-size: .75rem; font-weight: 700; cursor: pointer; transition: all .25s; white-space: nowrap; flex-shrink: 0; scroll-snap-align: start; }
.fuel2-brand-tab img { width: 24px; height: 24px; border-radius: 6px; object-fit: contain; background: #fff; padding: 1px; box-sizing: border-box; }
.fuel2-brand-tab:hover { border-color: rgba(0,113,206,.25); color: var(--text); background: rgba(0,113,206,.04); }
.fuel2-brand-tab-active { border-color: rgba(0,113,206,.35); color: #4da6ff; background: rgba(0,113,206,.08); box-shadow: 0 0 12px rgba(0,113,206,.08); }

/* Compact horizontal station cards */
.fuel2-station-compact { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(0,113,206,.12) transparent; }
.fuel2-station-compact::-webkit-scrollbar { height: 4px; }
.fuel2-station-compact::-webkit-scrollbar-thumb { background: rgba(0,113,206,.2); border-radius: 2px; }

/* Yelp embed in detail modal */
.fuel2-yelp-section { margin-top: 4px; }
.fuel2-yelp-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.fuel2-yelp-tab { padding: 7px 16px; border-radius: 8px; font-size: .78rem; font-weight: 700; background: transparent; border: 1px solid rgba(255,255,255,.06); color: var(--text-muted); cursor: pointer; transition: .2s; }
.fuel2-yelp-tab:hover { color: var(--text); border-color: rgba(255,255,255,.15); }
.fuel2-yelp-tab-active { background: rgba(0,113,206,.1); border-color: rgba(0,113,206,.3); color: #4da6ff; }
.fuel2-yelp-frame { width: 100%; height: 400px; border: 1px solid rgba(255,255,255,.06); border-radius: 14px; background: #fff; overflow: hidden; }
.fuel2-yelp-frame iframe { width: 100%; height: 100%; border: none; }
.fuel2-yelp-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 200px; border-radius: 14px; background: rgba(0,0,0,.12); border: 1px solid rgba(255,255,255,.04); }
.fuel2-yelp-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; border-radius: 10px; background: #d32323; color: #fff; font-size: .88rem; font-weight: 700; text-decoration: none; transition: .2s; }
.fuel2-yelp-link:hover { background: #b81e1e; box-shadow: 0 4px 16px rgba(211,35,35,.3); transform: translateY(-1px); }
.fuel2-google-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; border-radius: 10px; background: #4285F4; color: #fff; font-size: .88rem; font-weight: 700; text-decoration: none; transition: .2s; }
.fuel2-google-link:hover { background: #3367d6; box-shadow: 0 4px 16px rgba(66,133,244,.3); transform: translateY(-1px); }
.fuel2-maps-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; border-radius: 10px; background: rgba(0,113,206,.1); border: 1px solid rgba(0,113,206,.2); color: #4da6ff; font-size: .88rem; font-weight: 700; text-decoration: none; transition: .2s; }
.fuel2-maps-link:hover { background: rgba(0,113,206,.18); transform: translateY(-1px); }
.fuel2-ext-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* Station gallery */
.fuel2-det-gallery { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 16px; padding-bottom: 6px; scrollbar-width: thin; }
.fuel2-det-gallery img { width: 120px; height: 80px; border-radius: 10px; object-fit: cover; flex-shrink: 0; border: 1px solid rgba(255,255,255,.06); cursor: pointer; transition: .2s; }
.fuel2-det-gallery img:hover { border-color: rgba(0,113,206,.3); transform: scale(1.04); }

@media (max-width: 700px) {
  .fuel2-hero h3 { font-size: 1.4rem; }
  .fuel2-search-bar { flex-direction: column; }
  .fuel2-fuel-tabs { flex-wrap: wrap; }
  .fuel2-det-session-grid { grid-template-columns: 1fr; }
  .fuel2-station { flex-direction: column; }
  .fuel2-station-price-col { text-align: left; display: flex; gap: 8px; align-items: center; }
  .fuel2-station-price { font-size: 1.2rem; }
  .fuel2-list-head { flex-direction: column; }
  .fuel2-det-prices { grid-template-columns: repeat(2, 1fr); }
  .fuel2-det-pay-fields { flex-direction: column; }
  .fuel2-report-row { flex-direction: column; }
  .fuel2-rw-meta { flex-direction: column; gap: 2px; align-items: center; }
  .fuel2-yelp-frame { height: 280px; }
}
.lp-topbar-stat { font-size: .78rem; color: var(--text-muted); font-weight: 600; }
.lp-topbar-stat span { color: #00ff88; font-weight: 800; }

/* Panels */
.lp-panel { min-height: 400px; }

/* ── CREATE TAB ── */
.lp-create-wrap { max-width: 520px; margin: 0 auto; }
.lp-create-card {
  background: rgba(15,15,28,.85); border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px; padding: 32px; backdrop-filter: blur(12px);
}
.lp-create-title { font-family: var(--font-serif); font-size: 1.3rem; margin-bottom: 6px; text-align: center; }
.lp-create-sub { text-align: center; font-size: .82rem; margin-bottom: 24px; }

/* Image upload area */
.lp-upload-area {
  position: relative; width: 100%; min-height: 180px;
  border: 2px dashed rgba(255,255,255,.12); border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; margin-bottom: 20px; overflow: hidden;
  transition: border-color .2s, background .2s;
  background: rgba(0,0,0,.15);
}
.lp-upload-area:hover, .lp-upload-area.lp-drag-over { border-color: #00ff88; background: rgba(0,255,136,.03); }
.lp-upload-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-muted); font-size: .85rem; }
.lp-upload-icon { font-size: 2.5rem; opacity: .5; }
.lp-upload-hint { font-size: .72rem; opacity: .5; }
.lp-upload-preview { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.lp-upload-clear {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
  border-radius: 50%; background: rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: 1.1rem; cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center;
}

/* Fields */
.lp-field { margin-bottom: 16px; }
.lp-label { display: block; font-size: .78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; text-transform: lowercase; }
.lp-input {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.25);
  color: var(--text); font-size: .9rem; outline: none;
  transition: border-color .2s, box-shadow .2s; box-sizing: border-box;
}
.lp-input:focus { border-color: #00ff88; box-shadow: 0 0 0 2px rgba(0,255,136,.08); }
.lp-input::placeholder { color: rgba(255,255,255,.2); }
.lp-textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
.lp-char-count { display: block; text-align: right; font-size: .7rem; color: var(--text-muted); margin-top: 4px; }

/* Show more toggle */
.lp-more-toggle {
  display: block; width: 100%; text-align: center;
  padding: 8px; margin-bottom: 16px; font-size: .82rem; font-weight: 600;
  color: var(--text-muted); background: transparent; border: none;
  cursor: pointer; transition: color .2s;
}
.lp-more-toggle:hover { color: #00ff88; }
.lp-more-fields { margin-bottom: 8px; }

/* Initial buy */
.lp-initial-buy { margin-top: 4px; }
.lp-field-hint { font-size: .72rem; margin: 0 0 8px; }
.lp-buy-row { display: flex; align-items: center; gap: 10px; }
.lp-buy-row .lp-input { flex: 1; }
.lp-buy-denom { font-weight: 700; font-size: .85rem; color: var(--text-muted); white-space: nowrap; }

/* Create button */
.lp-create-btn {
  width: 100%; padding: 16px; border-radius: 14px; border: none;
  background: #00ff88; color: #0a0a16; font-size: 1.05rem; font-weight: 800;
  cursor: pointer; transition: .2s; margin-top: 8px;
  text-transform: lowercase; letter-spacing: .3px;
}
.lp-create-btn:hover:not(:disabled) { background: #00e67a; box-shadow: 0 0 40px rgba(0,255,136,.3), 0 0 80px rgba(0,255,136,.08); transform: translateY(-2px); }
.lp-create-btn:disabled { opacity: .35; cursor: not-allowed; }
.lp-create-cost { text-align: center; font-size: .72rem; margin-top: 8px; }

/* Bonding curve info */
.lp-curve-info {
  max-width: 520px; margin: 28px auto 0;
  background: rgba(15,15,28,.6); border: 1px solid rgba(255,255,255,.05);
  border-radius: 16px; padding: 24px;
}
.lp-curve-info h4 { text-align: center; font-size: 1rem; margin-bottom: 16px; color: var(--text); }
.lp-curve-steps { display: flex; flex-direction: column; gap: 12px; }
.lp-cs { display: flex; align-items: center; gap: 12px; font-size: .85rem; color: var(--text-muted); }
.lp-cs-num {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: rgba(0,255,136,.1); border: 1px solid rgba(0,255,136,.2);
  color: #00ff88; font-weight: 800; font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
}
.lp-safe-note { text-align: center; font-size: .76rem; color: var(--text-muted); margin-top: 16px; }

/* Flow animation */
.lp-flow { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.lp-fstep {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-radius: 10px; background: rgba(0,0,0,.12); border: 1px solid rgba(255,255,255,.03);
  opacity: .25; transition: .5s; font-size: .85rem; transform: translateX(-4px);
}
.lp-fstep.lp-fs-active { opacity: 1; border-color: #00ff88; background: rgba(0,255,136,.04); transform: translateX(0); }
.lp-fstep.lp-fs-done { opacity: 1; border-color: rgba(0,255,136,.25); background: rgba(0,255,136,.03); transform: translateX(0); }
.lp-fdot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.12); flex-shrink: 0; transition: .3s; }
.lp-fs-active .lp-fdot { background: #00ff88; box-shadow: 0 0 8px rgba(0,255,136,.5); animation: lpPulse 1.2s infinite; }
.lp-fs-done .lp-fdot { background: var(--success); }
@keyframes lpPulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(0,255,136,.3); } 50%{ box-shadow: 0 0 0 8px rgba(0,255,136,0); } }

/* Success card */
.lp-success {
  text-align: center; padding: 24px; border-radius: 16px;
  background: rgba(0,255,136,.04); border: 1px solid rgba(0,255,136,.15);
  margin-top: 16px; animation: lpReveal .5s ease;
}
@keyframes lpReveal { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
.lp-success-icon { font-size: 2.6rem; margin-bottom: 8px; }
.lp-success h4 { font-size: 1.1rem; font-weight: 800; margin-bottom: 14px; color: #00ff88; }
.lp-success-details { text-align: left; border-radius: 12px; background: rgba(0,0,0,.2); padding: 14px; margin-bottom: 14px; }
.lp-sd-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: .82rem; border-bottom: 1px solid rgba(255,255,255,.03); }
.lp-sd-row:last-child { border-bottom: none; }
.lp-sd-row span:last-child { font-weight: 700; color: #00ff88; }
.lp-mint-addr { font-family: 'Courier New', monospace; font-size: .72rem; word-break: break-all; }
.lp-success-actions { display: flex; gap: 10px; justify-content: center; }
.lp-copy-mint, .lp-view-token {
  padding: 8px 18px; border-radius: 10px; border: 1px solid rgba(0,255,136,.2);
  background: rgba(0,255,136,.06); color: #00ff88; font-size: .82rem;
  font-weight: 600; cursor: pointer; transition: .2s;
}
.lp-copy-mint:hover, .lp-view-token:hover { background: rgba(0,255,136,.12); }

/* ── FEED TAB ── */
.lp-feed-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.lp-feed-sorts { display: flex; gap: 4px; }
.lp-sort {
  padding: 6px 14px; border-radius: 8px; font-size: .78rem; font-weight: 700;
  background: transparent; border: 1px solid rgba(255,255,255,.06); color: var(--text-muted);
  cursor: pointer; transition: .2s;
}
.lp-sort:hover { color: var(--text); border-color: rgba(255,255,255,.15); }
.lp-sort-active { background: rgba(0,255,136,.08); border-color: rgba(0,255,136,.2); color: #00ff88; }
.lp-search-in { max-width: 220px; padding: 8px 14px; font-size: .82rem; }

/* Token card grid */
.lp-feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.lp-card {
  background: linear-gradient(165deg, rgba(0,255,136,.02) 0%, rgba(15,15,28,.9) 100%); border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px; overflow: hidden; cursor: pointer;
  transition: all .3s cubic-bezier(.4,0,.2,1); position: relative;
}
.lp-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%, rgba(0,255,136,.04) 0%, transparent 60%); opacity:0; transition:opacity .3s; pointer-events:none; z-index:1; }
.lp-card:hover { transform: translateY(-5px); border-color: rgba(0,255,136,.25); box-shadow: 0 16px 48px rgba(0,0,0,.35), 0 0 0 1px rgba(0,255,136,.08); }
.lp-card:hover::before { opacity:1; }
.lp-card-img {
  width: 100%; height: 160px; object-fit: cover; display: block;
  background: linear-gradient(135deg, rgba(0,255,136,.06), rgba(109,159,255,.06));
}
.lp-card-img-placeholder {
  width: 100%; height: 160px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(0,255,136,.06), rgba(109,159,255,.06));
  font-size: 3rem; color: rgba(255,255,255,.1);
}
.lp-card-body { padding: 14px; }
.lp-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lp-card-name { font-weight: 800; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-card-ticker { font-size: .78rem; font-weight: 700; color: #00ff88; }
.lp-card-koth { font-size: .9rem; margin-left: auto; }
.lp-card-desc { font-size: .75rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lp-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: .72rem; color: var(--text-muted); }
.lp-card-mcap { font-weight: 700; color: #00ff88; }
.lp-card-time { opacity: .6; }

/* Bonding curve progress bar (card) */
.lp-card-curve { margin-top: 8px; }
.lp-card-curve-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.06); overflow: hidden; }
.lp-card-curve-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, #00ff88, #6d9fff); transition: width .3s; }
.lp-card-curve-lbl { display: flex; justify-content: space-between; font-size: .65rem; color: var(--text-muted); margin-top: 3px; }

/* Creator pill */
.lp-card-creator { font-size: .68rem; color: var(--text-muted); }
.lp-card-creator span { color: #00ff88; }

/* ── LEADERBOARD TAB ── */
.lp-board-head { text-align: center; margin-bottom: 24px; }
.lp-board-head h3 { font-size: 1.3rem; margin-bottom: 4px; }
.lp-board-list { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.lp-board-row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-radius: 16px;
  background: linear-gradient(165deg, rgba(0,255,136,.01) 0%, rgba(15,15,28,.9) 100%); border: 1px solid rgba(255,255,255,.06);
  transition: all .3s cubic-bezier(.4,0,.2,1); cursor: pointer; position: relative;
}
.lp-board-row:hover { border-color: rgba(0,255,136,.25); transform: translateX(4px); box-shadow: 0 8px 28px rgba(0,0,0,.25); }
.lp-board-row:first-child { border-color: rgba(255,215,0,.35); background: linear-gradient(165deg, rgba(255,215,0,.04) 0%, rgba(15,15,28,.9) 100%); box-shadow: 0 4px 20px rgba(255,215,0,.06); }
.lp-board-rank { font-weight: 900; font-size: 1.1rem; width: 32px; text-align: center; color: var(--text-muted); }
.lp-board-row:first-child .lp-board-rank { color: #ffd700; }
.lp-board-img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: rgba(255,255,255,.05); box-shadow: 0 3px 12px rgba(0,0,0,.2); transition: transform .3s; }
.lp-board-row:hover .lp-board-img { transform: scale(1.06); }
.lp-board-info { flex: 1; min-width: 0; }
.lp-board-name { font-weight: 700; font-size: .88rem; }
.lp-board-sub { font-size: .72rem; color: var(--text-muted); }
.lp-board-mcap { text-align: right; }
.lp-board-mcap-val { font-weight: 800; font-size: .92rem; color: #00ff88; display: block; }
.lp-board-mcap-lbl { font-size: .65rem; color: var(--text-muted); }
.lp-board-curve { width: 80px; }
.lp-board-curve-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
.lp-board-curve-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #00ff88, #6d9fff); }

/* ── TOKEN DETAIL MODAL ── */
.lp-detail-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.8); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.lp-detail-modal {
  width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto;
  background: #12131c; border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px; padding: 28px; position: relative;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent;
}
.lp-detail-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: none; color: var(--text-muted);
  font-size: 1.2rem; cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: .2s;
}
.lp-detail-close:hover { background: rgba(255,255,255,.12); color: #fff; }

.lp-detail-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.lp-detail-img { width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.05); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.lp-detail-img img { width: 100%; height: 100%; object-fit: cover; }
.lp-detail-info { flex: 1; min-width: 0; }
.lp-detail-info h3 { font-size: 1.15rem; margin-bottom: 2px; }
.lp-detail-ticker { font-weight: 700; color: #00ff88; font-size: .88rem; margin-right: 8px; }
.lp-detail-creator { font-size: .72rem; color: var(--text-muted); }
.lp-detail-mcap { text-align: right; font-weight: 800; font-size: 1rem; color: #00ff88; }
.lp-detail-desc { font-size: .82rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 14px; }
.lp-detail-socials { display: flex; gap: 8px; margin-bottom: 16px; }
.lp-detail-socials a {
  padding: 5px 12px; border-radius: 8px; font-size: .72rem; font-weight: 600;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  color: var(--text-muted); text-decoration: none; transition: .2s;
}
.lp-detail-socials a:hover { color: #00ff88; border-color: rgba(0,255,136,.2); }

/* Bonding curve box */
.lp-curve-box { margin-bottom: 18px; }
.lp-curve-label { display: flex; justify-content: space-between; font-size: .78rem; color: var(--text-muted); margin-bottom: 6px; }
.lp-curve-track { height: 10px; border-radius: 5px; background: rgba(255,255,255,.06); overflow: hidden; }
.lp-curve-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #00ff88, #6d9fff); transition: width .5s; }
.lp-curve-note { font-size: .72rem; margin-top: 8px; line-height: 1.4; }

/* Buy/Sell tabs */
.lp-trade-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.lp-trade-tab {
  flex: 1; padding: 10px; border-radius: 10px; font-size: .88rem; font-weight: 700;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
  color: var(--text-muted); cursor: pointer; text-align: center; transition: .2s;
}
.lp-trade-tab-active[data-side="buy"] { background: rgba(0,255,136,.1); border-color: rgba(0,255,136,.25); color: #00ff88; }
.lp-trade-tab-active[data-side="sell"] { background: rgba(255,82,82,.1); border-color: rgba(255,82,82,.25); color: #ff5252; }

.lp-trade-form { margin-bottom: 18px; }
.lp-trade-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lp-trade-row .lp-input { flex: 1; }
.lp-trade-denom { font-weight: 700; font-size: .85rem; color: var(--text-muted); }
.lp-trade-presets { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.lp-tp {
  padding: 5px 12px; border-radius: 8px; font-size: .72rem; font-weight: 700;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
  color: var(--text-muted); cursor: pointer; transition: .2s;
}
.lp-tp:hover { border-color: rgba(0,255,136,.2); color: #00ff88; }
.lp-trade-btn {
  width: 100%; padding: 14px; border-radius: 12px; border: none;
  font-size: .95rem; font-weight: 800; cursor: pointer; transition: .2s;
  text-transform: lowercase;
}
.lp-trade-buy { background: #00ff88; color: #0a0a16; }
.lp-trade-buy:hover { background: #00e67a; }
.lp-trade-sell { background: #ff5252; color: #fff; }
.lp-trade-sell:hover { background: #e04848; }

/* Holders / Comments sub-tabs */
.lp-detail-tabs-sec { display: flex; gap: 4px; margin-bottom: 12px; }
.lp-det-tab {
  padding: 6px 14px; border-radius: 8px; font-size: .78rem; font-weight: 700;
  background: transparent; border: 1px solid rgba(255,255,255,.06); color: var(--text-muted);
  cursor: pointer; transition: .2s;
}
.lp-det-tab-active { background: rgba(255,255,255,.06); color: var(--text); }
.lp-detail-section { max-height: 200px; overflow-y: auto; scrollbar-width: thin; }

/* Holders */
.lp-holder-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: .78rem; border-bottom: 1px solid rgba(255,255,255,.03); }
.lp-holder-addr { color: var(--text-muted); font-family: monospace; font-size: .72rem; }
.lp-holder-pct { font-weight: 700; color: #00ff88; }

/* Comments */
.lp-comment { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.03); }
.lp-comment-user { font-size: .72rem; color: #00ff88; font-weight: 700; margin-bottom: 2px; }
.lp-comment-text { font-size: .8rem; color: var(--text-muted); line-height: 1.4; }
.lp-comment-input { display: flex; gap: 8px; margin-top: 10px; }
.lp-comment-input .lp-input { flex: 1; padding: 8px 12px; font-size: .82rem; }
.lp-comment-send {
  padding: 8px 16px; border-radius: 10px; border: none;
  background: #00ff88; color: #0a0a16; font-weight: 700; font-size: .82rem;
  cursor: pointer; transition: .2s;
}
.lp-comment-send:hover { background: #00e67a; }

/* Footer note */
.lp-footer-note { margin-top: 28px; padding: 10px 14px; border-radius: 10px; background: rgba(0,255,136,.02); border: 1px solid rgba(0,255,136,.04); font-size: .7rem; color: var(--text-muted); text-align: center; line-height: 1.5; }

/* Live ticker strip */
.lp-ticker-wrap { overflow: hidden; border-radius: 10px; background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.04); margin-bottom: 20px; padding: 8px 0; }
.lp-ticker { display: flex; gap: 24px; animation: lpTickerScroll 30s linear infinite; white-space: nowrap; width: max-content; }
.lp-ticker:hover { animation-play-state: paused; }
@keyframes lpTickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.lp-ticker-item { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: color .2s; }
.lp-ticker-item:hover { color: #00ff88; }
.lp-ticker-img { width: 20px; height: 20px; border-radius: 6px; object-fit: cover; }
.lp-ticker-name { font-weight: 700; color: var(--text); }
.lp-ticker-price { color: #00ff88; }
.lp-ticker-change-up { color: #00ff88; }
.lp-ticker-change-down { color: #ff5252; }

/* Stats bar */
.lp-stats-row { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; justify-content: center; }
.lp-stat-box { display: flex; flex-direction: column; align-items: center; padding: 12px 20px; border-radius: 12px; background: rgba(0,0,0,.15); border: 1px solid rgba(255,255,255,.04); min-width: 100px; }
.lp-stat-val { font-size: 1.1rem; font-weight: 900; color: #00ff88; }
.lp-stat-label { font-size: .65rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* Quick-buy button on cards */
.lp-card-actions { display: flex; gap: 6px; margin-top: 8px; }
.lp-card-quick { flex: 1; padding: 7px 0; border-radius: 8px; border: 1px solid rgba(0,255,136,.15); background: rgba(0,255,136,.04); color: #00ff88; font-size: .72rem; font-weight: 700; cursor: pointer; transition: .2s; text-align: center; }
.lp-card-quick:hover { background: rgba(0,255,136,.12); border-color: rgba(0,255,136,.3); transform: translateY(-1px); }
.lp-card-view { flex: 1; padding: 7px 0; border-radius: 8px; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.03); color: var(--text-muted); font-size: .72rem; font-weight: 700; cursor: pointer; transition: .2s; text-align: center; }
.lp-card-view:hover { background: rgba(255,255,255,.08); color: var(--text); }

/* Activity feed */
.lp-activity { max-height: 160px; overflow-y: auto; scrollbar-width: thin; margin-bottom: 16px; border-radius: 12px; background: rgba(0,0,0,.12); border: 1px solid rgba(255,255,255,.03); padding: 10px; }
.lp-activity-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.02); font-size: .72rem; }
.lp-activity-item:last-child { border-bottom: none; }
.lp-activity-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.lp-activity-dot-buy { background: #00ff88; box-shadow: 0 0 6px rgba(0,255,136,.4); }
.lp-activity-dot-sell { background: #ff5252; box-shadow: 0 0 6px rgba(255,82,82,.4); }
.lp-activity-dot-launch { background: #6d9fff; box-shadow: 0 0 6px rgba(109,159,255,.4); }
.lp-activity-text { color: var(--text-muted); flex: 1; }
.lp-activity-text b { color: var(--text); font-weight: 700; }
.lp-activity-time { color: var(--text-muted); opacity: .5; font-size: .65rem; }

/* Share / Watchlist buttons in detail */
.lp-detail-actions { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.lp-detail-action { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.03); color: var(--text-muted); font-size: .75rem; font-weight: 600; cursor: pointer; transition: .2s; }
.lp-detail-action:hover { border-color: rgba(0,255,136,.2); color: #00ff88; background: rgba(0,255,136,.04); }
.lp-detail-action.lp-action-active { border-color: rgba(0,255,136,.25); color: #00ff88; background: rgba(0,255,136,.06); }

.lp-market-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
  gap: 16px;
  margin: 0 0 24px;
}
.lp-market-card {
  position: relative;
  padding: 20px 22px;
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(0,255,136,.03), rgba(12,18,24,.92));
  border: 1px solid rgba(0,255,136,.12);
  overflow: hidden;
}
.lp-market-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(0,255,136,.12), transparent 38%);
  pointer-events: none;
}
.lp-market-kicker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,255,136,.08);
  border: 1px solid rgba(0,255,136,.14);
  color: #dfffee;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lp-market-card h3 {
  position: relative;
  z-index: 1;
  margin: 12px 0 16px;
  font-size: 1.1rem;
}
.lp-market-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.lp-market-stat {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
}
.lp-market-stat span {
  display: block;
  font-size: .68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.lp-market-stat strong {
  display: block;
  margin-top: 6px;
  font-size: .96rem;
  color: #00ff88;
}
.lp-rule-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.lp-rule-row {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  display: grid;
  gap: 4px;
}
.lp-rule-row strong {
  font-size: .82rem;
  color: var(--text);
}
.lp-rule-row span {
  font-size: .76rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.lp-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
}
.lp-create-layout .lp-create-wrap {
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.lp-create-layout .lp-curve-info {
  max-width: none;
  margin: 0;
}
.lp-compose-rail {
  display: grid;
  gap: 16px;
  position: sticky;
  top: 96px;
}
.lp-compose-card {
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(8,20,16,.92), rgba(12,18,32,.9));
  border: 1px solid rgba(0,255,136,.12);
  box-shadow: 0 18px 48px rgba(0,0,0,.25);
}
.lp-compose-card-secondary {
  border-color: rgba(109,159,255,.16);
  background: linear-gradient(165deg, rgba(12,18,32,.94), rgba(15,15,28,.92));
}
.lp-compose-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.lp-compose-stage {
  font-size: .7rem;
  font-weight: 700;
  color: #b8f5d6;
  background: rgba(0,255,136,.08);
  border: 1px solid rgba(0,255,136,.15);
  padding: 6px 10px;
  border-radius: 999px;
}
.lp-compose-media {
  height: 180px;
  border-radius: 18px;
  background: radial-gradient(circle at 20% 20%, rgba(0,255,136,.14), rgba(109,159,255,.12) 55%, rgba(255,255,255,.03) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,.05);
}
.lp-compose-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lp-compose-media span {
  font-size: 3.5rem;
  font-weight: 900;
  color: rgba(255,255,255,.72);
  text-transform: uppercase;
}
.lp-compose-token {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.lp-compose-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
}
.lp-compose-ticker {
  font-size: .82rem;
  font-weight: 700;
  color: #00ff88;
  margin-top: 4px;
}
.lp-compose-creator {
  text-align: right;
}
.lp-compose-creator span {
  display: block;
  font-size: .68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.lp-compose-creator strong {
  display: block;
  margin-top: 6px;
  font-size: .82rem;
  color: #dfffee;
}
.lp-compose-desc {
  font-size: .8rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 14px;
  min-height: 56px;
}
.lp-compose-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.lp-compose-stats div {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
}
.lp-compose-stats span {
  display: block;
  font-size: .68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.lp-compose-stats strong {
  display: block;
  margin-top: 6px;
  font-size: .92rem;
  color: #f4fff8;
}
.lp-compose-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.lp-compose-links span {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(109,159,255,.08);
  border: 1px solid rgba(109,159,255,.14);
  color: #dce8ff;
  font-size: .72rem;
  font-weight: 600;
}
.lp-compose-checklist {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.lp-compose-check {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  display: grid;
  gap: 4px;
}
.lp-compose-check strong {
  font-size: .8rem;
  color: var(--text);
}
.lp-compose-check span {
  font-size: .76rem;
  line-height: 1.45;
  color: var(--text-muted);
}

@media (max-width: 980px) {
  .lp-market-shell,
  .lp-create-layout {
    grid-template-columns: 1fr;
  }
  .lp-compose-rail {
    position: static;
    top: auto;
  }
}

@media (max-width: 768px) {
  .lp-market-grid,
  .lp-compose-stats {
    grid-template-columns: 1fr;
  }
  .lp-compose-token {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .lp-topbar { flex-direction: column; align-items: flex-start; }
  .lp-topbar-tabs { width: 100%; overflow-x: auto; }
  .lp-feed-bar { flex-direction: column; }
  .lp-search-in { max-width: 100%; }
  .lp-feed-grid { grid-template-columns: 1fr; }
  .lp-detail-modal { padding: 20px; }
  .lp-trade-presets { gap: 4px; }
  .lp-create-card { padding: 20px; }
  .lp-stats-row { gap: 6px; }
  .lp-stat-box { min-width: 70px; padding: 8px 12px; }
  .lp-ticker-wrap { display: none; }
}

/* ================================================================== */
/* v39 ENHANCEMENTS — All 4 Sections                                  */
/* ================================================================== */

/* --- SpaceX: Accordion + Enhanced Satellite --- */
.sx-phase-banner {
  transition: background .3s, border-color .3s;
}
.sx-phase-banner:hover {
  background: rgba(109,159,255,.06);
  border-color: rgba(109,159,255,.3);
}
.sx-phase-banner::after {
  content: '▾';
  font-size: .8rem;
  color: var(--text-muted);
  transition: transform .3s;
  margin-left: auto;
}
.sx-phase-banner[data-collapsed="1"]::after {
  transform: rotate(-90deg);
}
.checklist-grid {
  transition: max-height .5s ease, opacity .3s ease;
}

/* Enhanced satellite trails */
.sat-trail {
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(100,200,255,.3), rgba(100,200,255,.6));
  filter: blur(.5px);
}
.satellite {
  transition: transform .1s linear;
}
.sat-body {
  cursor: default;
}

/* Rocket timeline station hover */
.rt-station {
  transition: opacity .4s, transform .5s;
  cursor: pointer;
}
.rt-station:hover .rt-station-ring {
  border-color: rgba(109,159,255,.6);
  box-shadow: 0 0 20px rgba(109,159,255,.3);
}
.rt-station:hover .rt-station-icon {
  transform: scale(1.15);
  transition: transform .2s;
}

/* Space journey phase buttons glow */
.sj-phase-active {
  animation: sjPhasePulse 2.5s ease-in-out infinite;
}
@keyframes sjPhasePulse {
  0%, 100% { box-shadow: 0 0 8px rgba(109,159,255,.3); }
  50% { box-shadow: 0 0 20px rgba(109,159,255,.5), 0 0 40px rgba(109,159,255,.15); }
}

/* ==============================================================
   SURVIVAL MODE — Catastrophe-Resilient Bearer Tokens
   ============================================================== */
/* Header */
.sv-header { text-align: center; padding-bottom: 32px; }
.sv-icon-ring {
  width: 80px; height: 80px; margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF6B35 0%, #E53E3E 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  box-shadow: 0 0 40px rgba(255,107,53,.25), 0 0 80px rgba(229,62,62,.1);
  animation: svIconPulse 3s ease-in-out infinite;
}
@keyframes svIconPulse {
  0%,100%{ box-shadow: 0 0 40px rgba(255,107,53,.25), 0 0 80px rgba(229,62,62,.1); }
  50%{ box-shadow: 0 0 60px rgba(255,107,53,.4), 0 0 100px rgba(229,62,62,.2); }
}

/* Badges */
.sv-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.sv-badge {
  padding: 5px 14px; border-radius: 20px; font-size: .72rem; font-weight: 600;
  background: rgba(255,107,53,.1); color: #FF6B35; border: 1px solid rgba(255,107,53,.25);
  letter-spacing: .3px;
}
.sv-badge-red {
  background: rgba(229,62,62,.15); color: #fc8181; border-color: rgba(229,62,62,.35);
  animation: svBadgePulse 2s ease-in-out infinite;
}
@keyframes svBadgePulse {
  0%,100%{ box-shadow: none; }
  50%{ box-shadow: 0 0 12px rgba(229,62,62,.3); }
}

/* Threat strip */
.sv-threat-strip {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 12px;
  margin: 0 auto 40px; max-width: 700px;
}
.sv-threat {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 8px; font-size: .78rem; font-weight: 600;
  background: rgba(229,62,62,.08); border: 1px solid rgba(229,62,62,.18); color: #fc8181;
}
.sv-threat-icon { font-size: 1rem; }

/* Pillars */
.sv-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; }
.sv-pillar {
  position: relative; overflow: hidden;
  background: rgba(20,20,35,.65); border: 1px solid rgba(255,107,53,.12);
  border-radius: 18px; padding: 28px 24px;
  backdrop-filter: blur(12px);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.sv-pillar:hover {
  transform: translateY(-3px);
  border-color: rgba(255,107,53,.35);
  box-shadow: 0 8px 40px rgba(255,107,53,.12);
}
.sv-pillar-glow {
  position: absolute; top: -40px; right: -40px; width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(255,107,53,.15) 0%, transparent 70%);
  pointer-events: none;
}
.sv-pillar-icon { font-size: 2.2rem; margin-bottom: 12px; }
.sv-pillar h3 { font-family: var(--font-serif); font-size: 1.15rem; margin-bottom: 8px; color: #FF6B35; }
.sv-pillar p { font-size: .82rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 14px; }
.sv-pillar-list { list-style: none; padding: 0; margin: 0; }
.sv-pillar-list li {
  font-size: .78rem; color: var(--text-muted); padding: 3px 0; line-height: 1.5;
}

/* How it works */
.sv-how {
  background: rgba(20,20,35,.55); border: 1px solid rgba(255,107,53,.1);
  border-radius: 18px; padding: 32px; margin-bottom: 40px;
  backdrop-filter: blur(10px);
}
.sv-how h3 { font-family: var(--font-serif); text-align: center; margin-bottom: 28px; font-size: 1.15rem; color: #FF6B35; }
.sv-flow-steps { display: flex; flex-direction: column; gap: 18px; max-width: 640px; margin: 0 auto; }
.sv-flow-step { display: flex; gap: 16px; align-items: flex-start; }
.sv-flow-num {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #FF6B35, #E53E3E);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem; color: #fff;
}
.sv-flow-text strong { display: block; margin-bottom: 4px; font-size: .9rem; }
.sv-flow-text p { font-size: .78rem; color: var(--text-muted); margin: 0; line-height: 1.5; }

/* Mint panel */
.sv-mint-panel {
  background: rgba(20,20,35,.7); border: 1px solid rgba(255,107,53,.15);
  border-radius: 22px; padding: 36px; margin-bottom: 40px;
  backdrop-filter: blur(16px);
  box-shadow: 0 4px 60px rgba(255,107,53,.06);
}
.sv-mint-head { text-align: center; margin-bottom: 28px; }
.sv-mint-head h3 { font-family: var(--font-serif); font-size: 1.25rem; color: #FF6B35; margin-bottom: 6px; }
.sv-mint-row { display: flex; gap: 20px; margin-bottom: 18px; }
.sv-mint-field { flex: 1; }
.sv-label { display: block; font-size: .76rem; font-weight: 600; margin-bottom: 6px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.sv-input {
  width: 100%; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255,107,53,.2);
  background: rgba(10,10,22,.6); color: #fff; font-size: .95rem;
  outline: none; transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.sv-input:focus { border-color: #FF6B35; box-shadow: 0 0 16px rgba(255,107,53,.15); }
.sv-quicks { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.sv-q {
  padding: 5px 12px; border-radius: 8px; font-size: .75rem; font-weight: 700;
  background: rgba(255,107,53,.1); border: 1px solid rgba(255,107,53,.2); color: #FF6B35;
  cursor: pointer; transition: .2s;
}
.sv-q:hover, .sv-q.active { background: rgba(255,107,53,.25); border-color: #FF6B35; }

/* Format options */
.sv-format-opts { display: flex; gap: 8px; margin-top: 2px; }
.sv-fmt {
  flex: 1; padding: 10px 8px; border-radius: 10px; font-size: .78rem; font-weight: 600;
  background: rgba(255,107,53,.06); border: 1px solid rgba(255,107,53,.15); color: var(--text-muted);
  cursor: pointer; text-align: center; transition: .2s;
}
.sv-fmt:hover { border-color: rgba(255,107,53,.4); color: #FF6B35; }
.sv-fmt-active { background: rgba(255,107,53,.18); border-color: #FF6B35; color: #FF6B35; }

/* Fee box */
.sv-fee-box {
  background: rgba(10,10,22,.5); border: 1px solid rgba(255,255,255,.06); border-radius: 12px;
  padding: 16px; margin: 18px 0 22px;
}
.sv-fee-row { display: flex; justify-content: space-between; font-size: .85rem; padding: 4px 0; }
.sv-fee-row:first-child { font-weight: 700; }
.sv-fee-row:last-child { font-weight: 700; border-top: 1px solid rgba(255,255,255,.08); padding-top: 8px; margin-top: 4px; }
.sv-fee-sm { font-size: .76rem; color: var(--text-muted); }

/* Mint button */
.sv-mint-btn {
  width: 100%; padding: 16px; border-radius: 14px; font-size: 1.05rem; font-weight: 800;
  background: linear-gradient(135deg, #FF6B35 0%, #E53E3E 100%);
  border: none; color: #fff; cursor: pointer;
  transition: transform .15s, box-shadow .15s, opacity .2s;
  box-shadow: 0 4px 24px rgba(255,107,53,.3);
  text-transform: uppercase; letter-spacing: .5px;
}
.sv-mint-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 36px rgba(255,107,53,.4); }
.sv-mint-btn:disabled { opacity: .45; cursor: not-allowed; }
.sv-btn-icon { margin-right: 6px; }

/* Flow steps animation */
.sv-flow { padding: 24px 0; }
.sv-fstep {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  font-size: .88rem; color: var(--text-muted);
  opacity: .35; transition: opacity .4s, color .4s;
}
.sv-fstep.sv-factive { opacity: 1; color: #FF6B35; }
.sv-fstep.sv-fdone { opacity: 1; color: var(--success); }
.sv-fdot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.15); transition: background .3s, box-shadow .3s;
}
.sv-fstep.sv-factive .sv-fdot {
  background: #FF6B35;
  box-shadow: 0 0 12px rgba(255,107,53,.5);
  animation: svDotPulse 1s ease-in-out infinite;
}
.sv-fstep.sv-fdone .sv-fdot { background: var(--success); box-shadow: 0 0 8px rgba(72,187,120,.4); }
@keyframes svDotPulse {
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.4); }
}

/* Result / Bearer card */
.sv-result { text-align: center; padding: 24px 0; }
.sv-result-head { margin-bottom: 24px; }
.sv-result-icon { font-size: 2.5rem; margin-bottom: 8px; }
.sv-result-head h4 { font-family: var(--font-serif); font-size: 1.2rem; color: #FF6B35; margin-bottom: 4px; }

.sv-bearer-card {
  max-width: 380px; margin: 0 auto 24px;
  background: linear-gradient(160deg, rgba(255,107,53,.12) 0%, rgba(229,62,62,.08) 50%, rgba(20,20,35,.9) 100%);
  border: 1.5px solid rgba(255,107,53,.3); border-radius: 18px;
  padding: 24px; text-align: center;
  box-shadow: 0 0 50px rgba(255,107,53,.08);
  animation: svCardEntrance .5s ease-out;
}
@keyframes svCardEntrance {
  from { opacity: 0; transform: scale(.92) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.sv-bearer-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.sv-bearer-logo { font-weight: 900; font-size: 1.1rem; color: #FF6B35; }
.sv-bearer-type { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }

.sv-bearer-qr {
  width: 180px; height: 180px; margin: 0 auto 16px;
  background: #fff; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.sv-bearer-qr canvas { display: block; }

.sv-bearer-amount { font-size: 1.8rem; font-weight: 900; color: #FF6B35; margin-bottom: 6px; }
.sv-bearer-hash {
  font-family: 'Courier New', monospace; font-size: .7rem; color: var(--text-muted);
  word-break: break-all; margin-bottom: 12px; padding: 0 12px;
}
.sv-bearer-footer { display: flex; justify-content: space-between; font-size: .68rem; color: var(--text-muted); }

/* Result actions */
.sv-result-actions { display: flex; gap: 10px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }
.sv-action-btn {
  padding: 10px 18px; border-radius: 10px; font-size: .8rem; font-weight: 700;
  background: rgba(255,107,53,.1); border: 1px solid rgba(255,107,53,.25); color: #FF6B35;
  cursor: pointer; transition: .2s;
}
.sv-action-btn:hover { background: rgba(255,107,53,.2); border-color: #FF6B35; }

.sv-mint-another {
  padding: 10px 24px; border-radius: 10px; font-size: .85rem; font-weight: 700;
  background: transparent; border: 1px dashed rgba(255,107,53,.3); color: #FF6B35;
  cursor: pointer; transition: .2s;
}
.sv-mint-another:hover { border-color: #FF6B35; background: rgba(255,107,53,.06); }

/* Stats */
.sv-stats {
  display: flex; justify-content: center; gap: 40px; margin-bottom: 40px;
  flex-wrap: wrap; text-align: center;
}
.sv-stat-val { display: block; font-size: 1.6rem; font-weight: 900; color: #FF6B35; }
.sv-stat-lbl { display: block; font-size: .72rem; color: var(--text-muted); margin-top: 2px; }

/* Mesh diagram */
.sv-mesh {
  background: rgba(20,20,35,.5); border: 1px solid rgba(255,107,53,.1);
  border-radius: 18px; padding: 32px; margin-bottom: 40px;
}
.sv-mesh h3 { font-family: var(--font-serif); text-align: center; font-size: 1.1rem; color: #FF6B35; margin-bottom: 8px; }
.sv-mesh-visual {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  flex-wrap: wrap; margin-top: 12px;
}
.sv-mesh-node {
  width: 64px; text-align: center; font-size: .68rem; color: var(--text-muted);
}
.sv-mesh-node span { display: block; font-size: 1.8rem; margin-bottom: 2px; }
.sv-mesh-phone span { color: #6d9fff; }
.sv-mesh-gateway span { color: #FF6B35; }
.sv-mesh-sat span { color: #a78bfa; }
.sv-mesh-solana span { color: #14F195; }
.sv-mesh-link { font-size: .68rem; color: rgba(255,255,255,.25); white-space: nowrap; }

/* Why cards */
.sv-why { text-align: center; margin-bottom: 40px; }
.sv-why h4 { font-family: var(--font-serif); font-size: 1.1rem; color: #FF6B35; margin-bottom: 20px; }
.sv-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sv-why-card {
  background: rgba(20,20,35,.55); border: 1px solid rgba(255,107,53,.1);
  border-radius: 14px; padding: 24px; text-align: center;
  transition: border-color .25s, transform .25s;
}
.sv-why-card:hover { border-color: rgba(255,107,53,.3); transform: translateY(-2px); }
.sv-why-icon { font-size: 2rem; margin-bottom: 10px; }
.sv-why-card strong { display: block; margin-bottom: 6px; font-size: .92rem; color: #FF6B35; }
.sv-why-card p { font-size: .78rem; color: var(--text-muted); line-height: 1.5; margin: 0; }

/* Footer note */
.sv-note {
  text-align: center; font-size: .72rem; color: var(--text-muted); opacity: .7;
  max-width: 650px; margin: 0 auto; line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
  .sv-pillars { grid-template-columns: 1fr; }
  .sv-mint-row { flex-direction: column; }
  .sv-why-grid { grid-template-columns: 1fr; }
  .sv-stats { gap: 20px; }
  .sv-mesh-visual { flex-direction: column; gap: 8px; }
  .sv-mesh-link { transform: rotate(90deg); }
  .sv-bearer-footer { flex-direction: column; gap: 4px; }
  .sv-result-actions { flex-direction: column; align-items: center; }
}

/* ================================================================== */
/* QUANTUM REALM — Pre-Quantum Currency                                */
/* ================================================================== */

.qr-section {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,229,255,.04) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 100%, rgba(167,139,250,.04) 0%, transparent 50%);
}

.qr-particle-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}

/* Hero */
.qr-hero { text-align: center; margin-bottom: 56px; }
.qr-badge {
  display: inline-block; padding: 6px 18px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #00e5ff;
  background: rgba(0,229,255,.08);
  border: 1px solid rgba(0,229,255,.2);
  margin-bottom: 20px;
}
.qr-title { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.qr-gradient-text {
  background: linear-gradient(135deg, #00e5ff, #a78bfa, #00e5ff);
  background-size: 200% 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: qrGradientShift 4s ease infinite;
}
@keyframes qrGradientShift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
.qr-subtitle { max-width: 700px; margin: 0 auto; color: var(--text-muted); font-size: 1.05rem; line-height: 1.7; }

/* Pillars Grid */
.qr-pillars {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  margin-bottom: 56px;
}

/* Cards */
.qr-card {
  position: relative;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(0,229,255,.12);
  border-radius: 18px;
  padding: 32px 24px;
  overflow: hidden;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.qr-card:hover {
  border-color: rgba(0,229,255,.35);
  transform: translateY(-4px);
  box-shadow: 0 0 40px rgba(0,229,255,.08);
}
.qr-card-glow {
  position: absolute; top: -60px; right: -60px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,255,.08), transparent 70%);
  pointer-events: none;
}
.qr-card-icon {
  font-size: 2.2rem; margin-bottom: 12px;
  filter: drop-shadow(0 0 8px rgba(0,229,255,.3));
}
.qr-card-title {
  font-family: var(--font-serif); font-size: 1.2rem; margin-bottom: 10px;
  color: #fff;
}
.qr-card-desc {
  font-size: .88rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px;
}
.qr-card-detail { margin-top: 12px; }

/* Feature list */
.qr-feature-list {
  list-style: none; padding: 0; margin: 16px 0 0;
}
.qr-feature-list li {
  font-size: .78rem; color: var(--text-muted); padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.qr-feature-list li:last-child { border-bottom: none; }

/* Signature Visual (Card 1) */
.qr-sig-visual {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  padding: 16px; border-radius: 12px;
  background: rgba(0,229,255,.03); border: 1px solid rgba(0,229,255,.08);
}
.qr-sig-layer { text-align: center; flex: 1; }
.qr-sig-label {
  display: block; font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: #00e5ff; margin-bottom: 8px;
}
.qr-hash-chain {
  display: flex; gap: 3px; justify-content: center; flex-wrap: wrap;
}
.qr-hash-block {
  width: 10px; height: 10px; border-radius: 2px;
  background: rgba(0,229,255,.25);
  transition: background .3s, box-shadow .3s;
}
.qr-hash-block.active {
  background: #00e5ff;
  box-shadow: 0 0 6px rgba(0,229,255,.5);
}
.qr-sig-divider {
  font-size: 1.2rem; color: rgba(0,229,255,.3); font-weight: 700;
}
.qr-lattice-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 3px;
  max-width: 60px; margin: 0 auto;
}
.qr-lattice-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(167,139,250,.2);
  transition: background .3s, box-shadow .3s;
}
.qr-lattice-dot.active {
  background: #a78bfa;
  box-shadow: 0 0 6px rgba(167,139,250,.5);
}

/* Entangle Visual (Card 2) */
.qr-entangle-visual {
  display: flex; align-items: center; justify-content: center; gap: 0;
  padding: 20px 12px; border-radius: 12px;
  background: rgba(0,229,255,.03); border: 1px solid rgba(0,229,255,.08);
  margin-bottom: 12px;
}
.qr-wallet {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 80px;
}
.qr-wallet-icon { font-size: 1.6rem; }
.qr-wallet-label { font-size: .7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
.qr-wallet-state { font-size: .68rem; color: rgba(0,229,255,.6); }
.qr-wallet-state.entangled { color: #a78bfa; font-weight: 600; }

.qr-entangle-link {
  flex: 1; height: 3px; position: relative;
  background: rgba(0,229,255,.1);
  min-width: 80px; margin: 0 8px;
  border-radius: 999px;
  overflow: visible;
}
.qr-entangle-link.active { background: rgba(167,139,250,.3); }
.qr-photon {
  position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%;
  background: #00e5ff; transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(0,229,255,.6);
  animation: qrPhotonTravel 2s ease-in-out infinite;
  opacity: 0;
}
.qr-photon-2 { animation-delay: .66s; background: #7c6cf0; box-shadow: 0 0 8px rgba(167,139,250,.6); }
.qr-photon-3 { animation-delay: 1.33s; }

@keyframes qrPhotonTravel {
  0%   { left: 0;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.qr-entangle-btn, .qr-collapse-btn {
  width: 100%; margin-top: 8px; font-size: .82rem; padding: 10px;
  background: linear-gradient(135deg, rgba(0,229,255,.12), rgba(167,139,250,.12));
  border: 1px solid rgba(0,229,255,.2);
  color: #00e5ff; border-radius: 10px; cursor: pointer;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.qr-entangle-btn:hover, .qr-collapse-btn:hover {
  background: linear-gradient(135deg, rgba(0,229,255,.2), rgba(167,139,250,.2));
  border-color: rgba(0,229,255,.4);
  box-shadow: 0 0 20px rgba(0,229,255,.1);
}

/* Superposition Visual (Card 3) */
.qr-superposition {
  padding: 20px 12px; border-radius: 12px;
  background: rgba(167,139,250,.03); border: 1px solid rgba(167,139,250,.08);
  margin-bottom: 12px; text-align: center;
}
.qr-state-visual { margin-bottom: 16px; }
.qr-qubit {
  width: 80px; height: 80px; margin: 0 auto 12px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0,229,255,.15), rgba(167,139,250,.15), rgba(0,229,255,.15));
  display: flex; align-items: center; justify-content: center;
  animation: qrQubitSpin 6s linear infinite;
  position: relative;
}
.qr-qubit::before {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--bg);
}
.qr-qubit-inner {
  position: relative; z-index: 1;
}
.qr-ket {
  font-size: 1.4rem; font-weight: 700;
  background: linear-gradient(135deg, #00e5ff, #a78bfa);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
@keyframes qrQubitSpin {
  to { transform: rotate(360deg); }
}
.qr-qubit.collapsed {
  animation: none;
  background: rgba(0,229,255,.3);
}
.qr-state-eq {
  font-size: .82rem; color: var(--text-muted); font-family: 'Courier New', monospace;
}
.qr-alpha { color: #00e5ff; font-weight: 700; }
.qr-beta  { color: #a78bfa; font-weight: 700; }

.qr-yield-bar {
  height: 8px; border-radius: 999px; background: rgba(255,255,255,.06);
  position: relative; overflow: hidden; margin-top: 12px;
}
.qr-yield-fill {
  height: 100%; border-radius: 999px; width: 0%;
  background: linear-gradient(90deg, #00e5ff, #a78bfa);
  transition: width 1s ease;
}
.qr-yield-label {
  display: block; text-align: center; font-size: .7rem; color: var(--text-muted);
  margin-top: 6px;
}

/* Stats Row */
.qr-stats {
  display: flex; justify-content: center; gap: 40px; flex-wrap: wrap;
  margin-bottom: 48px; padding: 24px 0;
  border-top: 1px solid rgba(0,229,255,.08);
  border-bottom: 1px solid rgba(0,229,255,.08);
}
.qr-stat { text-align: center; }
.qr-stat-value {
  display: block; font-size: 1.6rem; font-weight: 700;
  background: linear-gradient(135deg, #00e5ff, #a78bfa);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.qr-stat-label { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }

/* CTA */
.qr-cta { text-align: center; margin-bottom: 32px; }
.qr-cta-text { color: var(--text-muted); font-size: .95rem; line-height: 1.7; margin-bottom: 20px; }
.qr-enter-btn {
  padding: 14px 36px; font-size: 1rem; font-weight: 600;
  background: linear-gradient(135deg, #00e5ff, #7c6cf0);
  color: #fff; border: none; border-radius: 12px; cursor: pointer;
  box-shadow: 0 0 30px rgba(0,229,255,.15);
  transition: transform .2s, box-shadow .3s;
}
.qr-enter-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 50px rgba(0,229,255,.25);
}

/* Note */
.qr-note {
  text-align: center; font-size: .72rem; color: var(--text-muted); opacity: .7;
  max-width: 700px; margin: 0 auto; line-height: 1.5;
}

/* Responsive */
@media (max-width: 900px) {
  .qr-pillars { grid-template-columns: 1fr; }
  .qr-stats { gap: 24px; }
}
@media (max-width: 600px) {
  .qr-entangle-visual { flex-direction: column; }
  .qr-entangle-link { width: 3px; height: 40px; min-width: unset; margin: 8px 0; }
  .qr-photon { animation-name: qrPhotonTravelV; }
  @keyframes qrPhotonTravelV {
    0%   { top: 0;   left: 50%; opacity: 0; transform: translate(-50%, -50%); }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { top: 100%; left: 50%; opacity: 0; transform: translate(-50%, -50%); }
  }
  .qr-sig-visual { flex-direction: column; }
}

/* ================================================================== */
/* v46 — VISUAL OVERHAUL: Depth, Motion, Game Mechanics              */
/* ================================================================== */

/* --- Section dividers with gradient fade --- */
.section::after {
  content: ''; display: block; width: 60%; max-width: 600px;
  height: 1px; margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  pointer-events: none;
}
.section:last-of-type::after { display: none; }

/* --- Parallax depth layers --- */
.parallax-slow { will-change: transform; transition: transform .1s linear; }
.parallax-medium { will-change: transform; transition: transform .05s linear; }

/* --- Enhanced glow card with animated border --- */
.glow-card-animated {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}
.glow-card-animated::before {
  content: ''; position: absolute; inset: 0;
  border-radius: var(--radius);
  padding: 1px;
  background: conic-gradient(from var(--glow-angle, 0deg), transparent 40%, var(--accent) 50%, transparent 60%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s;
  animation: glowRotate 4s linear infinite;
}
.glow-card-animated:hover::before { opacity: 1; }
@keyframes glowRotate {
  to { --glow-angle: 360deg; }
}
@property --glow-angle {
  syntax: '<angle>'; initial-value: 0deg; inherits: false;
}

/* --- SpaceX Enhanced Fullscreen Toggle --- */
.sj-expand-btn {
  position: absolute; top: 12px; right: 12px; z-index: 20;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.15);
  color: #fff; padding: 8px 12px; border-radius: 8px; font-size: .75rem;
  cursor: pointer; transition: all .3s; backdrop-filter: blur(8px);
}
.sj-expand-btn:hover { background: rgba(109,159,255,.3); border-color: var(--accent); }

/* --- SpaceX Cinematic Bars --- */
.sj-letterbox-top, .sj-letterbox-bot {
  position: absolute; left: 0; right: 0; z-index: 15;
  background: var(--bg); pointer-events: none;
  height: 0; transition: height .6s cubic-bezier(.16,1,.3,1);
}
.sj-letterbox-top { top: 0; }
.sj-letterbox-bot { bottom: 0; }
.space-journey-3d.cinematic .sj-letterbox-top,
.space-journey-3d.cinematic .sj-letterbox-bot { height: 40px; }

/* --- SpaceX HUD Enhancement --- */
.sj-hud {
  text-shadow: 0 0 8px rgba(16,185,129,.4);
}
.sj-hud-val {
  font-variant-numeric: tabular-nums;
  transition: color .3s;
}
.sj-hud-val.warning { color: #f59e0b; }
.sj-hud-val.critical { color: #ef4444; animation: hudFlash .5s infinite; }
@keyframes hudFlash { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* --- SpaceX Phase Transition Overlay --- */
.sj-phase-overlay {
  position: absolute; inset: 0; z-index: 25;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,8,15,.9);
  opacity: 0; pointer-events: none;
  transition: opacity .4s;
}
.sj-phase-overlay.active { opacity: 1; }
.sj-phase-overlay-text {
  font-family: var(--font-serif); font-size: clamp(1.2rem, 3vw, 2rem);
  color: #fff; text-transform: uppercase; letter-spacing: .15em;
  animation: phaseTextPulse 1.5s ease;
}
@keyframes phaseTextPulse {
  0% { opacity: 0; transform: scale(0.8); filter: blur(10px); }
  50% { opacity: 1; transform: scale(1.05); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); }
}

/* --- Rocket Timeline Enhanced --- */
.rt-station {
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.rt-station-icon {
  transition: transform .3s, filter .3s;
}
.rt-station:hover .rt-station-icon {
  transform: scale(1.2);
  filter: drop-shadow(0 0 12px var(--accent));
}
.rt-station-active .rt-station-ring {
  animation: stationRingPulse 2s infinite;
}
@keyframes stationRingPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(109,159,255,.3); }
  50% { box-shadow: 0 0 0 12px rgba(109,159,255,0); }
}

/* --- XP Bar + Achievement Toast --- */
.ost-xp-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
  height: 4px; background: rgba(255,255,255,.03);
  pointer-events: none;
  opacity: 0; transition: opacity .5s;
}
.ost-xp-bar.visible { opacity: 1; }
.ost-xp-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--warm));
  background-size: 200% 100%;
  animation: xpShimmer 2s linear infinite;
  transition: width .8s cubic-bezier(.16,1,.3,1);
  border-radius: 0 2px 2px 0;
}
@keyframes xpShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: 0 0; }
}
.ost-xp-tooltip {
  position: fixed; bottom: 8px; left: 16px; z-index: 1000;
  font-size: .68rem; color: var(--text-muted);
  background: var(--surface); padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--border);
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.ost-xp-tooltip.visible { opacity: 1; }

.achievement-toast {
  position: fixed; top: 80px; right: 20px; z-index: 1001;
  background: linear-gradient(135deg, var(--surface), var(--surface2));
  border: 1px solid rgba(245,196,104,.3);
  border-radius: 14px; padding: 16px 20px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.4), 0 0 30px rgba(245,196,104,.1);
  animation: achievePop .6s cubic-bezier(.16,1,.3,1);
  max-width: 320px;
}
@keyframes achievePop {
  0% { opacity: 0; transform: translateX(100px) scale(0.8); }
  60% { transform: translateX(-10px) scale(1.02); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
.achievement-icon { font-size: 1.8rem; flex-shrink: 0; }
.achievement-body h4 { font-size: .85rem; color: var(--warm); margin-bottom: 2px; }
.achievement-body p { font-size: .72rem; color: var(--text-muted); margin: 0; line-height: 1.4; }
.achievement-xp { font-size: .65rem; color: var(--accent); font-weight: 600; margin-top: 3px; }

/* --- Cursor glow (desktop) --- */
.cursor-glow {
  position: fixed; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(109,159,255,.04) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
  transform: translate(-50%, -50%);
  transition: opacity .3s;
  will-change: left, top;
}

/* --- Smooth section entrance (parallax bg shift) --- */
.section-space {
  background-image:
    radial-gradient(ellipse at 10% 20%, rgba(109,159,255,.03) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 80%, rgba(167,139,250,.03) 0%, transparent 40%);
  background-attachment: fixed;
}

/* --- Interactive particle canvas: cursor attraction --- */
.particle-canvas { transition: opacity .5s; }
.particle-canvas.active { opacity: 1; }

/* --- v46: btn-rippling class (JS-triggered ripple) --- */
.btn-rippling::after { opacity: 1; transition: opacity 0s; }
@keyframes btnRippleWave {
  0% { transform: scale(0); opacity: .6; }
  100% { transform: scale(4); opacity: 0; }
}

/* --- v46: achievement-toast active state --- */
.achievement-toast {
  opacity: 0; transform: translateX(100px);
  transition: opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
}
.achievement-toast.active {
  opacity: 1; transform: translateX(0);
}

/* --- v46: SpaceX cinematic mode container --- */
.space-journey-3d.cinematic {
  position: fixed !important;
  top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 999; border-radius: 0;
}
.space-journey-3d.cinematic canvas { width: 100% !important; height: 100% !important; }
.space-journey-3d.cinematic .sj-expand-btn {
  position: fixed; top: 20px; right: 20px; z-index: 1000;
}

/* --- v46: HUD warning flash --- */
.sj-hud.hud-warning {
  border-color: rgba(245,196,104,.5);
  box-shadow: 0 0 30px rgba(245,196,104,.15);
}
.sj-hud.hud-warning::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(245,196,104,.03);
  border-radius: inherit;
  animation: hudFlash .6s ease-out;
}

/* ================================================================== */
/* v47: WELCOME OVERLAY — Language & Currency Selector                */
/* ================================================================== */
.welcome-overlay {
  position: fixed; inset: 0; z-index: 1000500;
  background: rgba(6,8,15,.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px 14px;
  animation: welFadeIn .4s ease;
  color: var(--text, #edf2ff);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.welcome-overlay.hidden,
.welcome-overlay[aria-hidden="true"] { display: none !important; }
@keyframes welFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Welcome skip "X" — always visible escape hatch so users are never trapped. */
.welcome-modal { position: relative; }
.wel-skip-x {
  position: absolute; top: 10px; right: 12px;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #edf2ff;
  font-size: 22px; line-height: 1; cursor: pointer;
  z-index: 5;
  transition: background .15s ease, transform .15s ease;
}
.wel-skip-x:hover, .wel-skip-x:focus-visible {
  background: rgba(255,255,255,.18);
  transform: scale(1.05);
  outline: none;
}

.welcome-modal {
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(7, 12, 24, 0.98));
  border: 1px solid var(--border, rgba(148, 163, 184, 0.22));
  border-radius: 20px;
  padding: 36px 32px;
  max-width: 560px; width: 90%;
  max-height: min(85vh, calc(100dvh - 28px)); overflow-y: auto;
  box-shadow: 0 40px 80px rgba(0,0,0,.5), 0 0 60px rgba(109,159,255,.08);
  color: var(--text, #edf2ff);
  outline: none;
  scrollbar-width: thin;
}
.welcome-header { text-align: center; margin-bottom: 28px; }
.welcome-header .welcome-logo { font-size: 1.4rem; font-weight: 700; color: var(--accent, #6d9fff); }
.welcome-header h1,
.welcome-header h2 { font-size: 1.3rem; margin: 12px 0 6px; color: #fff; line-height: 1.3; font-weight: 700; }
.welcome-header p { color: var(--text-muted, #aeb7c8); font-size: .88rem; }

.welcome-step h2,
.welcome-step h3 { font-size: 1rem; margin-bottom: 14px; color: #fff; font-weight: 600; }

.welcome-lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.wel-lang-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 10px;
  background: var(--surface2, rgba(255,255,255,.06)); border: 1.5px solid rgba(255,255,255,.08);
  color: var(--text-muted, #aeb7c8); font-size: .85rem; cursor: pointer;
  transition: all .2s;
  min-height: 48px;
  text-align: left;
}
.wel-lang-btn:hover,
.wel-lang-btn:focus-visible { border-color: var(--border, rgba(148,163,184,.32)); color: #fff; outline: none; }
.wel-lang-btn.wel-lang-active {
  border-color: var(--accent, #6d9fff); color: #fff;
  background: rgba(109,159,255,.08);
  box-shadow: 0 0 12px rgba(109,159,255,.15);
}
.wel-flag { font-size: 1.2rem; }

.welcome-currency-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }

/* ================================================================== */
/* v54 — PREMIUM SHELLS: demos, launchpad, SpaceX montage             */
/* ================================================================== */

.gc2-atlas,
.fuel2-command,
.sx-stage,
.lp-hero-shell {
  display: grid;
  gap: 22px;
  align-items: stretch;
}

.gc2-atlas { grid-template-columns: minmax(0, 1.6fr) minmax(280px, .9fr); margin-bottom: 26px; }
.fuel2-command { grid-template-columns: minmax(0, 1.55fr) minmax(280px, .95fr); margin-bottom: 24px; }
.sx-stage { grid-template-columns: minmax(0, 1fr) minmax(320px, .95fr); margin-bottom: 28px; }
.lp-hero-shell { grid-template-columns: minmax(0, 1.1fr) minmax(300px, .95fr); margin-bottom: 24px; }

.gc2-atlas-main,
.gc2-atlas-side > *,
.fuel2-command-copy,
.fuel2-command-side > *,
.sx-stage-copy,
.sx-montage,
.lp-hero-copy,
.lp-hero-side {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(155deg, rgba(255,255,255,.06), rgba(10,12,20,.88));
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}

.gc2-atlas-main::before,
.gc2-atlas-side > *::before,
.fuel2-command-copy::before,
.fuel2-command-side > *::before,
.sx-stage-copy::before,
.sx-montage::before,
.lp-hero-copy::before,
.lp-hero-side::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,.12), transparent 40%);
  pointer-events: none;
}

.gc2-atlas-main { padding: 26px; }
.gc2-atlas-side { display: grid; gap: 14px; }
.gc2-atlas .gc2-hero { text-align: left; margin-bottom: 0; }
.gc2-hero-actions,
.fuel2-hero-actions,
.sx-hero-actions,
.lp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.gc2-hero-btn,
.fuel2-hero-btn,
.sx-hero-btn,
.lp-hero-btn,
.sx-montage-link,
.sx-montage-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.gc2-hero-btn,
.lp-hero-btn {
  background: linear-gradient(135deg, #f2ff5a, #9cff5b);
  color: #08100f;
  box-shadow: 0 12px 26px rgba(156,255,91,.2);
}

.fuel2-hero-btn,
.sx-hero-btn,
.sx-montage-link {
  background: linear-gradient(135deg, #7ec8ff, #f6fbff);
  color: #08121d;
  box-shadow: 0 12px 26px rgba(126,200,255,.18);
}

.gc2-hero-btn:hover,
.fuel2-hero-btn:hover,
.sx-hero-btn:hover,
.lp-hero-btn:hover,
.sx-montage-link:hover,
.sx-montage-toggle:hover {
  transform: translateY(-2px);
}

.gc2-hero-btn-ghost,
.fuel2-hero-btn-ghost,
.sx-hero-btn-ghost,
.lp-hero-btn-ghost,
.sx-montage-toggle {
  background: rgba(255,255,255,.03);
  color: var(--text);
  border-color: rgba(255,255,255,.1);
  box-shadow: none;
}

.gc2-signal-grid,
.lp-hero-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.gc2-signal-card,
.lp-hero-card,
.sx-proof-card {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}

.gc2-signal-label,
.lp-hero-card span,
.sx-proof-card span,
.fuel2-market-kicker,
.lp-hero-kicker,
.sx-montage-tag {
  display: inline-block;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.gc2-signal-card strong,
.lp-hero-card strong,
.sx-proof-card strong {
  display: block;
  margin-top: 10px;
  font-size: 1.15rem;
  color: #fff;
}

.gc2-signal-card p,
.lp-hero-card p,
.fuel2-market-card h4,
.sx-montage-caption p,
.lp-hero-sub {
  margin: 8px 0 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.gc2-market-board,
.fuel2-market-card {
  padding: 20px;
}

.gc2-market-board-head {
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.gc2-market-board-list {
  display: grid;
  gap: 10px;
}

.gc2-market-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.05);
}

.gc2-market-row strong {
  color: #9cff5b;
  font-size: .95rem;
}

.gc2-market-foot {
  margin-top: 12px;
  font-size: .76rem;
  color: var(--text-muted);
}

.gc2-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px;
}

.gc2-trust-strip span {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(156,255,91,.08);
  border: 1px solid rgba(156,255,91,.16);
  color: #cfffaa;
  font-size: .74rem;
  font-weight: 700;
}

.fuel2-command-copy { padding: 24px; }
.fuel2-command-side { display: grid; gap: 14px; align-content: start; }
.fuel2-command .fuel2-hero { text-align: left; margin-bottom: 0; }
.fuel2-market-card { min-height: 0; }
.fuel2-market-card-secondary { background: linear-gradient(155deg, rgba(255,255,255,.04), rgba(4,12,30,.9)); }
.fuel2-market-card h4 { font-size: 1.05rem; color: #fff; }
.fuel2-market-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.fuel2-market-metrics div,
.fuel2-ops-item {
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}

.fuel2-market-metrics strong {
  display: block;
  font-size: 1.2rem;
  color: #fff;
}

.fuel2-market-metrics span {
  display: block;
  margin-top: 4px;
  font-size: .74rem;
  color: var(--text-muted);
}

.fuel2-ops-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.fuel2-ops-item {
  display: flex;
  gap: 12px;
  color: var(--text);
  line-height: 1.45;
  font-size: .84rem;
}

.fuel2-ops-item span {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(126,200,255,.12);
  color: #b8e6ff;
  font-weight: 800;
  flex-shrink: 0;
}

.sx-stage-copy { padding: 26px; }
.sx-proof-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.sx-montage {
  padding: 18px;
  display: grid;
  gap: 14px;
}

.sx-montage-frame-wrap {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #02050c;
  --sx-montage-poster: none;
}

.sx-montage-frame {
  width: 100%;
  height: 100%;
  border: 0;
}

.sx-montage-frame-wrap.is-local .sx-montage-frame,
.sx-montage-frame-wrap.is-lazy .sx-montage-frame {
  opacity: 0;
  pointer-events: none;
}

.sx-montage-fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border: 0;
  background-image: linear-gradient(180deg, rgba(4,8,18,.08), rgba(4,8,18,.72)), var(--sx-montage-poster);
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.sx-montage-frame-wrap.is-local .sx-montage-fallback,
.sx-montage-frame-wrap.is-lazy .sx-montage-fallback {
  display: flex;
}

/* Lazy mode: pill anchored bottom-left; play circle centred */
.sx-montage-frame-wrap.is-lazy .sx-montage-fallback {
  flex-direction: column;
  gap: 0;
}
.sx-montage-frame-wrap.is-lazy .sx-montage-fallback-pill {
  position: absolute;
  bottom: 18px;
  left: 18px;
}
.sx-montage-frame-wrap.is-lazy .sx-montage-fallback::before {
  content: '';
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(2,6,14,.82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/34px no-repeat;
  border: 2px solid rgba(255,255,255,.35);
  box-shadow: 0 4px 24px rgba(0,0,0,.5);
  transition: transform .15s, background-color .15s;
}
.sx-montage-frame-wrap.is-lazy .sx-montage-fallback:hover::before {
  transform: scale(1.08);
  background-color: rgba(255,60,0,.72);
}

.sx-montage-fallback-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(2,6,14,.72);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 12px 28px rgba(0,0,0,.32);
}

.sx-montage-fallback-pill::before {
  content: '▶';
  font-size: .8rem;
}

.sx-montage-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 18px 18px;
  background: linear-gradient(180deg, transparent, rgba(2,4,9,.92));
  z-index: 1;
}

.sx-montage-caption h3 {
  margin: 8px 0 0;
  font-size: 1.1rem;
  color: #fff;
}

.sx-montage-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sx-montage-btn {
  position: relative;
  min-height: 110px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: #fff;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.sx-montage-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(5,9,18,.15), rgba(5,9,18,.88)), var(--sx-shot);
  background-size: cover;
  background-position: center;
  opacity: .9;
}

.sx-montage-btn > * {
  position: relative;
  z-index: 1;
}

.sx-montage-btn span {
  display: block;
  font-size: .94rem;
  font-weight: 800;
}

.sx-montage-btn small {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,.72);
}

.sx-montage-btn:hover,
.sx-montage-btn.active {
  transform: translateY(-2px);
  border-color: rgba(126,200,255,.45);
  box-shadow: 0 16px 28px rgba(0,0,0,.28);
}

.sx-montage-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.lp-hero-copy,
.lp-hero-side {
  padding: 24px;
}

.lp-hero-kicker {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(156,255,91,.16);
  background: rgba(156,255,91,.07);
  color: #cfffaa;
}

.lp-hero-title {
  margin: 16px 0 10px;
  font-size: clamp(1.6rem, 3vw, 2.45rem);
  line-height: 1.08;
}

.lp-hero-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.lp-create-wrap {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .72fr);
  gap: 22px;
  margin: 0;
}

.lp-create-card,
.lp-curve-info {
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(155deg, rgba(255,255,255,.04), rgba(9,11,18,.92));
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}

.lp-curve-info {
  align-self: start;
  padding: 22px;
}

.gc2-brand-wheel-wrap,
.fuel2-brand-wheel-wrap,
.lp-ticker-wrap {
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}

@media (max-width: 1080px) {
  .gc2-atlas,
  .fuel2-command,
  .sx-stage,
  .lp-hero-shell,
  .lp-create-wrap {
    grid-template-columns: 1fr;
  }

  .gc2-signal-grid,
  .sx-proof-strip,
  .fuel2-market-metrics,
  .sx-montage-controls {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .gc2-atlas-main,
  .fuel2-command-copy,
  .sx-stage-copy,
  .sx-montage,
  .lp-hero-copy,
  .lp-hero-side { padding: 18px; }

  .gc2-signal-grid,
  .lp-hero-grid {
    grid-template-columns: 1fr;
  }

  .gc2-hero-actions,
  .fuel2-hero-actions,
  .sx-hero-actions,
  .lp-hero-actions,
  .sx-montage-links {
    flex-direction: column;
  }

  .sx-montage-btn { min-height: 90px; }
}
.wel-curr-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 10px; border-radius: 10px;
  background: var(--surface2, rgba(255,255,255,.06)); border: 1.5px solid rgba(255,255,255,.08);
  color: var(--text-muted, #aeb7c8); font-size: .82rem; cursor: pointer;
  transition: all .2s;
  min-height: 66px;
}
.wel-curr-btn:hover,
.wel-curr-btn:focus-visible { border-color: var(--border, rgba(148,163,184,.32)); color: #fff; outline: none; }
.wel-curr-btn.wel-curr-active {
  border-color: var(--accent, #6d9fff); color: #fff;
  background: rgba(109,159,255,.08);
  box-shadow: 0 0 12px rgba(109,159,255,.15);
}
.wel-curr-symbol { font-size: 1.3rem; font-weight: 700; color: var(--accent, #6d9fff); }
.wel-curr-name { font-size: .68rem; color: var(--text-muted, #aeb7c8); }

.wel-next-btn, .wel-go-btn, .wel-back-btn {
  padding: 12px 28px; border-radius: 10px; font-weight: 600; font-size: .9rem;
  cursor: pointer; border: none; margin-top: 18px; transition: all .2s;
  min-height: 48px;
}
.wel-next-btn, .wel-go-btn {
  background: linear-gradient(135deg, var(--accent, #6d9fff), var(--accent2, #7c5cff));
  color: #fff; width: 100%;
}
.wel-next-btn:hover, .wel-go-btn:hover,
.wel-next-btn:focus-visible, .wel-go-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(109,159,255,.3); outline: none; }
.wel-back-btn { background: var(--surface2, rgba(255,255,255,.06)); color: var(--text-muted, #aeb7c8); border: 1px solid rgba(255,255,255,.08); }
.wel-back-btn:hover,
.wel-back-btn:focus-visible { color: #fff; outline: none; border-color: rgba(255,255,255,.18); }
.wel-btn-row { display: flex; gap: 12px; margin-top: 18px; }
.wel-btn-row .wel-next-btn,
.wel-btn-row .wel-go-btn,
.wel-btn-row .wel-back-btn { margin-top: 0; }
.wel-btn-row .wel-back-btn { flex: 0 0 auto; }
.wel-btn-row .wel-go-btn { flex: 1; }
.wel-btn-row-single .wel-next-btn { flex: 1; }

@media (max-width: 640px) {
  .welcome-overlay {
    align-items: stretch;
    padding: 12px;
  }

  .welcome-modal {
    width: 100%;
    max-width: none;
    min-height: 0;
    max-height: calc(100dvh - 24px);
    padding: 24px 18px 18px;
    border-radius: 18px;
    overscroll-behavior: contain;
  }

  .welcome-header { margin-bottom: 20px; }
  .welcome-header h1,
  .welcome-header h2 { font-size: 1.16rem; }
  .welcome-lang-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .welcome-currency-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wel-lang-btn,
  .wel-curr-btn {
    min-height: 64px;
    padding: 10px 8px;
  }

  .wel-btn-row {
    position: sticky;
    bottom: -18px;
    margin: 16px -18px -18px;
    padding: 14px 18px 18px;
    background: linear-gradient(180deg, rgba(11,16,27,0), rgba(11,16,27,.92) 26%, rgba(11,16,27,.98) 100%);
    backdrop-filter: blur(10px);
  }

  .wel-btn-row .wel-back-btn,
  .wel-btn-row .wel-go-btn,
  .wel-next-btn {
    min-height: 48px;
  }
}

/* Market usability repair: keep prediction data visible and non-overlapping. */
.prediction-market-board,
.prediction-market-shell,
.prediction-market-main,
.prediction-market-card,
.prediction-trade-desk,
.prediction-market-stage,
.prediction-stage-chart-card,
.prediction-depth-card {
  min-width: 0;
}

.prediction-market-topline,
.prediction-market-meta-row,
.prediction-market-footer,
.prediction-market-actions,
.prediction-selected-topline,
.prediction-position-row-meta,
.prediction-stage-topline,
.prediction-stage-panel-head {
  flex-wrap: wrap;
}

.prediction-market-source,
.prediction-market-topic,
.prediction-market-contract,
.prediction-market-tag,
.prediction-pulse-meta span,
.prediction-tape-chip span,
.prediction-tape-chip em,
.prediction-market-metric strong,
.prediction-market-stat strong,
.prediction-trade-stat strong,
.prediction-position-row strong,
.prediction-position-row span,
.prediction-position-row a,
.prediction-selected-card h6,
.prediction-selected-card p,
.prediction-trade-status,
.prediction-market-load-card strong {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

.prediction-trade-desk {
  top: 92px;
  max-height: calc(100vh - 116px);
}

.prediction-market-card {
  min-height: 360px;
}

.prediction-market-card h5,
.prediction-market-card p,
.prediction-stage-copy h5,
.prediction-stage-copy p,
.prediction-pulse-card strong,
.prediction-pulse-card p {
  overflow-wrap: anywhere;
}

.prediction-market-price-grid,
.prediction-market-meta-row,
.prediction-trade-metrics,
.prediction-trade-breakdown,
.prediction-trade-receipt-grid,
.prediction-stage-stats,
.prediction-depth-columns {
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}

.prediction-stage-body {
  grid-template-columns: minmax(0, 1fr);
}

.prediction-depth-list {
  max-height: 310px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.prediction-market-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
}

@media (max-width: 720px) {
  .prediction-market-side-stack,
  .prediction-market-pulse-wrap,
  .prediction-depth-card,
  .prediction-market-card p,
  .prediction-market-tags,
  .prediction-market-price-grid,
  .prediction-market-meta-row,
  .prediction-market-footer {
    display: grid;
  }

  .prediction-market-card p,
  .prediction-market-hero-copy p,
  .prediction-stage-copy p,
  .prediction-trade-head p,
  .prediction-selected-card p {
    display: block;
    line-clamp: unset;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
    overflow: visible;
  }

  .prediction-market-actions,
  .prediction-stage-stats,
  .prediction-trade-metrics,
  .prediction-trade-breakdown,
  .prediction-trade-receipt-grid,
  .prediction-depth-columns {
    grid-template-columns: 1fr;
  }

  .prediction-market-card {
    min-height: 0;
  }
}

/* ================================================================== */
/* v48: STORE TAB NAVIGATION                                         */
/* ================================================================== */
.store-tabs {
  display: flex; gap: 4px; justify-content: center;
  flex-wrap: wrap;
  margin: 24px auto 32px;
  padding: 5px;
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--border);
  max-width: 600px;
}
.store-tab {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 12px; border: none;
  background: transparent; color: var(--text-muted);
  font-size: .86rem; font-weight: 600; cursor: pointer;
  transition: all .25s ease; position: relative;
  overflow: hidden;
}
.store-tab::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(109,159,255,.1), rgba(167,139,250,.06));
  opacity: 0; transition: opacity .25s; border-radius: inherit;
}
.store-tab:hover { color: #fff; }
.store-tab:hover::before { opacity: 1; }
.store-tab-icon { font-size: 1.1rem; line-height: 1; }
.store-tab-label { white-space: nowrap; }
.store-tab.store-tab-active {
  background: linear-gradient(135deg, rgba(109,159,255,.15), rgba(167,139,250,.1));
  color: #fff;
  box-shadow: 0 2px 16px rgba(109,159,255,.2), inset 0 1px 0 rgba(255,255,255,.06);
  border: 1px solid rgba(109,159,255,.2);
}
.store-tab.store-tab-active .store-tab-icon { filter: drop-shadow(0 0 4px rgba(109,159,255,.4)); }
.demos-panel { animation: storesPanelIn .35s ease; }
@keyframes storesPanelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ================================================================== */
/* v48: BRAND WHEEL (horizontal scrolling, same-size logos)          */
/* ================================================================== */
.gc2-brand-wheel-wrap {
  margin: 16px 0 24px;
  position: relative; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.gc2-brand-wheel {
  display: flex; gap: 10px;
  overflow-x: auto; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 10px 24px;
}
.gc2-brand-wheel::-webkit-scrollbar { display: none; }
.gc2-wheel-item {
  flex: 0 0 72px; width: 72px; height: 72px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: all .2s ease;
  padding: 6px;
}
.gc2-wheel-item:hover {
  border-color: var(--accent);
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 24px rgba(109,159,255,.15);
}
.gc2-wheel-item.active {
  border-color: var(--accent);
  background: rgba(109,159,255,.1);
  box-shadow: 0 0 0 2px rgba(109,159,255,.2);
}
.gc2-wheel-item img {
  width: 36px; height: 36px; border-radius: 8px;
  object-fit: contain; background: #fff; padding: 2px;
}
.gc2-wheel-item span {
  font-size: .58rem; color: var(--text-muted); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 64px;
}

/* ================================================================== */
/* v48: 3D GIFT CARD PREVIEW                                         */
/* ================================================================== */
.gc2-swap-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start;
}
.gc2-form-side { display: flex; flex-direction: column; gap: 16px; }
.gc2-preview-side {
  display: flex; flex-direction: column; align-items: center;
  position: sticky; top: 24px;
}
.gc2-card-3d-wrap {
  perspective: 1000px;
  width: 320px; height: 200px;
  margin: 0 auto;
}
.gc2-card-3d {
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
  cursor: pointer;
}
.gc2-card-3d-wrap:hover .gc2-card-3d { transform: rotateY(180deg); }
.gc2-card-front, .gc2-card-back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: 16px;
  overflow: hidden;
  padding: 24px;
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
}
.gc2-card-front {
  background: linear-gradient(135deg, #1a1f36, #0f1628);
  box-shadow: 0 12px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
}
.gc2-card-back {
  background: linear-gradient(135deg, #0f1628, #1a1f36);
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
  transform: rotateY(180deg);
  padding: 0;
}
.gc2-card-logo {
  width: 48px; height: 48px; border-radius: 10px;
  background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.gc2-card-logo img { width: 36px; height: 36px; object-fit: contain; }
.gc2-card-logo-placeholder { font-size: 1.6rem; }
.gc2-card-brand {
  font-size: .78rem; color: var(--text-muted); margin-top: 8px;
  font-weight: 600; letter-spacing: .5px;
}
.gc2-card-value {
  font-size: 1.4rem; font-weight: 700; color: #fff;
  margin-top: auto;
}
.gc2-card-chip {
  width: 36px; height: 26px; border-radius: 5px;
  background: linear-gradient(135deg, #d4a853, #c9975c);
  position: absolute; right: 24px; top: 24px;
}
.gc2-card-chip::after {
  content: ''; position: absolute; inset: 3px;
  border: 1px solid rgba(0,0,0,.2); border-radius: 3px;
}
.gc2-card-number {
  font-family: 'Courier New', monospace;
  font-size: .88rem; color: rgba(255,255,255,.6);
  letter-spacing: 2px; margin-top: 4px;
}

/* Card Back */
.gc2-card-stripe {
  width: 100%; height: 40px;
  background: #222; margin-top: 24px;
}
.gc2-card-cvv {
  padding: 16px 24px;
  display: flex; align-items: center; gap: 12px;
}
.gc2-card-cvv span { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; }
.gc2-card-cvv-box {
  background: #fff; color: #000; padding: 4px 16px;
  border-radius: 4px; font-family: 'Courier New', monospace;
  font-size: .88rem; letter-spacing: 2px;
}
.gc2-card-barcode {
  margin: auto 24px 16px;
  height: 30px;
  background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 4px, #fff 4px 5px, transparent 5px 8px);
  border-radius: 2px; opacity: .3;
}
.gc2-card-powered {
  text-align: center; font-size: .6rem; color: rgba(255,255,255,.3);
  padding-bottom: 12px;
}
.gc2-card-hint {
  font-size: .72rem; color: var(--text-muted);
  margin-top: 12px; text-align: center;
}

/* Card code input */
.gc2-code-input-wrap { position: relative; }
.gc2-inp-code {
  font-family: 'Courier New', monospace;
  letter-spacing: 2px; font-size: .94rem;
  padding-right: 40px !important;
}
.gc2-code-status {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 1rem; transition: all .2s;
}
.gc2-code-status.valid { color: var(--success); }
.gc2-code-status.invalid { color: #ef4444; }
.gc2-code-hint {
  font-size: .68rem; color: var(--text-muted); margin-top: 4px;
}

/* Live estimate in Step 1 */
.gc2-live-estimate {
  padding: 10px 16px; border-radius: 10px;
  background: rgba(109,159,255,.05);
  border: 1px solid rgba(109,159,255,.1);
}
.gc2-est-row { display: flex; justify-content: space-between; align-items: center; }
.gc2-est-row span:first-child { font-size: .78rem; color: var(--text-muted); }
.gc2-est-val { font-size: 1rem; font-weight: 700; color: var(--accent); }
.gc2-est-rate { font-size: .7rem; color: var(--text-muted); margin-top: 2px; text-align: right; }

/* Quick amount buttons */
.gc2-quicks {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 6px;
}
.gc2-q {
  padding: 6px 14px; border-radius: 8px;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text-muted); font-size: .76rem; font-weight: 600;
  cursor: pointer; transition: all .2s;
}
.gc2-q:hover, .gc2-q.active {
  border-color: var(--accent); color: #fff;
  background: rgba(109,159,255,.1);
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
  .gc2-swap-layout { grid-template-columns: 1fr; }
  .gc2-preview-side { order: -1; position: static; }
  .gc2-card-3d-wrap { width: 280px; height: 175px; }
  .store-tabs { max-width: 100%; }
  .store-tab { padding: 10px 16px; font-size: .8rem; }
}

/* ================================================================== */
/* v47: FUEL COUNTRY SELECTOR                                        */
/* ================================================================== */
.fuel2-country-row {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 0; justify-content: center;
}
.fuel2-country-label { font-size: .82rem; color: var(--text-muted); }
.fuel2-country-sel {
  padding: 8px 14px; border-radius: 8px;
  background: var(--surface2); border: 1px solid var(--border);
  color: #fff; font-size: .85rem; cursor: pointer;
}

/* ================================================================== */
/* v47: LAUNCHPAD SECTION DIVIDERS + BUY PRESETS                     */
/* ================================================================== */
.lp-section-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 14px;
  color: var(--text-muted); font-size: .78rem;
  text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600;
}
.lp-section-divider::before, .lp-section-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.lp-buy-presets {
  display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap;
}
.lp-buy-preset {
  padding: 6px 16px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface2); color: var(--text-muted);
  font-size: .78rem; font-weight: 600; cursor: pointer;
  transition: all .2s;
}
.lp-buy-preset:hover { border-color: var(--accent); color: var(--accent); }
.lp-buy-preset.active {
  border-color: var(--accent); color: #fff;
  background: rgba(109,159,255,.1);
}

/* ================================================================== */
/* v51: TRANSPARENCY SECTION                                          */
/* ================================================================== */
.transp-hero-badge, .rm-hero-badge, .cens-hero-badge, .about-hero-badge, .build-hero-badge, .ai-hero-badge {
  display: inline-block; padding: 4px 14px; border-radius: 50px;
  background: rgba(109,159,255,.1); border: 1px solid rgba(109,159,255,.25);
  color: var(--accent); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;
  text-align: center;
}
.cens-hero-badge { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.25); color: #ef4444; }
.about-hero-badge { background: rgba(167,139,250,.1); border-color: rgba(167,139,250,.25); color: var(--accent2); }
.build-hero-badge { background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.25); color: var(--success); }
.ai-hero-badge { background: rgba(167,139,250,.1); border-color: rgba(167,139,250,.25); color: var(--accent2); }

/* Transparency Stats Row */
.transp-stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin: 32px 0;
}
.transp-stat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 24px 16px; text-align: center;
  transition: all .3s;
}
.transp-stat-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(109,159,255,.1); }
.transp-stat-icon { font-size: 1.6rem; margin-bottom: 8px; }
.transp-stat-num { font-size: 1.3rem; font-weight: 800; color: #fff; }
.transp-stat-label { font-size: .75rem; color: var(--text-muted); margin-top: 4px; }

/* Transparency Manifesto */
.transp-manifesto {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 40px 32px; margin: 32px 0; overflow: hidden;
}
.transp-manifesto-glow {
  position: absolute; top: -60px; right: -60px; width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(109,159,255,.12), transparent 70%);
  pointer-events: none;
}
.transp-manifesto h3 { text-align: center; margin-bottom: 8px; font-size: 1.3rem; }
.transp-manifesto-lead { text-align: center; color: var(--text-muted); margin-bottom: 24px; font-size: .95rem; }
.transp-manifesto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.transp-pledge {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px; background: rgba(109,159,255,.03); border-radius: 12px;
  border: 1px solid rgba(109,159,255,.08);
}
.transp-pledge-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.transp-pledge strong { display: block; margin-bottom: 4px; font-size: .9rem; }
.transp-pledge p { font-size: .82rem; color: var(--text-muted); margin: 0; }

/* Transparency Verify Cards */
.transp-verify-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 40px 0;
}
.transp-verify-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; transition: all .3s;
}
.transp-verify-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(109,159,255,.1); }
.transp-verify-visual { overflow: hidden; }
.transp-verify-body { padding: 20px; }
.transp-verify-icon { font-size: 1.5rem; margin-bottom: 8px; }
.transp-verify-body h4 { font-size: 1rem; margin-bottom: 8px; }
.transp-verify-body p { font-size: .82rem; color: var(--text-muted); line-height: 1.5; }
.transp-verify-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.transp-verify-tags span {
  font-size: .65rem; padding: 2px 8px; border-radius: 20px;
  background: rgba(109,159,255,.08); border: 1px solid rgba(109,159,255,.15);
  color: var(--accent);
}

/* Transparency Audit Timeline */
.transp-audit-timeline {
  margin: 48px 0 32px; padding: 32px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 20px;
}
.transp-timeline-track { position: relative; padding-left: 32px; }
.transp-timeline-track::before {
  content: ''; position: absolute; left: 10px; top: 0; bottom: 0;
  width: 2px; background: linear-gradient(to bottom, var(--accent), var(--border));
}
.transp-tl-item { position: relative; margin-bottom: 24px; }
.transp-tl-item:last-child { margin-bottom: 0; }
.transp-tl-dot {
  position: absolute; left: -28px; top: 4px; width: 14px; height: 14px;
  border-radius: 50%; border: 2px solid var(--border); background: var(--bg);
}
.transp-tl-dot.done { border-color: var(--success); background: var(--success); box-shadow: 0 0 10px rgba(52,211,153,.3); }
.transp-tl-dot.pending { border-color: var(--accent); background: var(--bg); }
.transp-tl-content strong { display: block; margin-bottom: 2px; }
.transp-tl-content p { font-size: .82rem; color: var(--text-muted); margin: 0; }
.transp-tl-date { font-size: .7rem; color: var(--accent); font-weight: 600; }

/* Transparency Contracts */
.transp-contracts { margin: 32px 0; }
.transp-contract-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.transp-contract-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; text-align: center;
}
.transp-contract-label { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.transp-contract-addr {
  display: block; font-size: .72rem; color: var(--accent); word-break: break-all;
  background: rgba(109,159,255,.05); padding: 8px; border-radius: 8px; margin-bottom: 8px;
}
.transp-contract-net {
  font-size: .65rem; padding: 2px 8px; border-radius: 20px; display: inline-block;
  background: rgba(52,211,153,.1); color: var(--success); border: 1px solid rgba(52,211,153,.2);
}
.transp-closing {
  text-align: center; font-size: 1.1rem; font-weight: 600; margin-top: 40px;
  color: var(--text-muted);
}

/* ================================================================== */
/* v51: ROADMAP PHASE CARDS                                           */
/* ================================================================== */
.rm-phase-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 32px 0;
}
.rm-phase-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 24px 16px; position: relative; overflow: hidden; transition: all .3s;
}
.rm-phase-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(109,159,255,.08); }
.rm-phase-card.rm-done { border-color: rgba(52,211,153,.3); }
.rm-phase-card.rm-done:hover { border-color: var(--success); }
.rm-phase-card.rm-current { border-color: rgba(109,159,255,.4); box-shadow: 0 0 20px rgba(109,159,255,.08); }
.rm-phase-card.rm-current::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.rm-phase-num {
  font-size: .65rem; font-weight: 800; color: var(--text-muted); letter-spacing: 1px;
  margin-bottom: 4px;
}
.rm-phase-icon { font-size: 1.8rem; margin-bottom: 8px; }
.rm-phase-card h4 { font-size: .95rem; margin-bottom: 4px; }
.rm-phase-date { font-size: .72rem; color: var(--text-muted); }
.rm-phase-status { font-size: .68rem; padding: 3px 10px; border-radius: 20px; display: inline-block; margin: 8px 0 12px; font-weight: 600; }
.rm-status-done { background: rgba(52,211,153,.1); color: var(--success); border: 1px solid rgba(52,211,153,.2); }
.rm-status-current { background: rgba(109,159,255,.1); color: var(--accent); border: 1px solid rgba(109,159,255,.2); }
.rm-status-future { background: rgba(255,255,255,.05); color: var(--text-muted); border: 1px solid var(--border); }
.rm-phase-list { list-style: none; padding: 0; margin: 0; }
.rm-phase-list li {
  font-size: .78rem; color: var(--text-muted); padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.rm-phase-list li:last-child { border-bottom: none; }

/* ================================================================== */
/* v51: CENSORSHIP ENHANCEMENTS                                       */
/* ================================================================== */
.cens-severity-bar {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center;
  padding: 14px 24px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; margin-bottom: 24px;
}
.cens-sev-item { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-muted); }
.cens-sev-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cens-sev-stat { font-size: .78rem; color: var(--accent); font-weight: 600; }
.cens-case-img {
  width: 100%; height: 140px; object-fit: cover; border-radius: 12px 12px 0 0;
  opacity: .6; transition: opacity .3s;
}
.censorship-case:hover .cens-case-img { opacity: .85; }
.cens-case-sev {
  display: inline-block; font-size: .65rem; font-weight: 700; text-transform: uppercase;
  padding: 3px 10px; border-radius: 20px; margin: 12px 0 8px; letter-spacing: .5px;
}
.cens-sev-critical { background: rgba(239,68,68,.15); color: #ef4444; border: 1px solid rgba(239,68,68,.25); }
.cens-sev-high { background: rgba(245,158,11,.15); color: #f59e0b; border: 1px solid rgba(245,158,11,.25); }
.cens-sev-medium { background: rgba(234,179,8,.15); color: #eab308; border: 1px solid rgba(234,179,8,.25); }
.cens-answer-card {
  position: relative; margin-top: 32px; padding: 28px 32px;
  background: var(--surface); border: 1px solid rgba(109,159,255,.2);
  border-radius: 16px; text-align: center; overflow: hidden;
}
.cens-answer-glow {
  position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  width: 300px; height: 150px;
  background: radial-gradient(circle, rgba(109,159,255,.1), transparent 70%);
  pointer-events: none;
}
.cens-answer-card h4 { font-size: 1.1rem; margin-bottom: 8px; }
.cens-answer-card p { font-size: .9rem; color: var(--text-muted); }

/* ================================================================== */
/* v52: LEGACY MODE SECTION                                           */
/* ================================================================== */
.leg-hero-badge {
  display: inline-block; padding: 4px 14px; border-radius: 50px;
  background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.25);
  color: #f59e0b; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;
}

/* Logo Legacy Badge */
.logo-legacy-badge {
  font-size: .55rem; vertical-align: super; margin-left: 2px;
  opacity: .7; letter-spacing: -1px;
}

/* Problem Statement */
.leg-problem {
  position: relative; background: var(--surface); border: 1px solid rgba(239,68,68,.15);
  border-radius: 20px; padding: 36px 32px; margin: 32px 0; overflow: hidden;
}
.leg-problem-glow {
  position: absolute; top: -60px; right: -60px; width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(239,68,68,.08), transparent 70%);
  pointer-events: none;
}
.leg-problem h3 { text-align: center; margin-bottom: 12px; font-size: 1.2rem; }
.leg-problem > p { text-align: center; color: var(--text-muted); font-size: .9rem; line-height: 1.6; max-width: 800px; margin: 0 auto 24px; }
.leg-problem-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.leg-pstat {
  text-align: center; padding: 16px 8px; background: rgba(239,68,68,.04);
  border: 1px solid rgba(239,68,68,.1); border-radius: 12px;
}
.leg-pstat-num { display: block; font-size: 1.4rem; font-weight: 800; color: #ef4444; margin-bottom: 4px; }
.leg-pstat span:last-child { font-size: .72rem; color: var(--text-muted); }

/* Three Survival Layers */
.leg-layers { display: flex; flex-direction: column; gap: 32px; }
.leg-layer-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  overflow: hidden; transition: all .3s;
}
.leg-layer-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(109,159,255,.08); }
.leg-layer-img { width: 100%; height: 200px; object-fit: cover; opacity: .6; transition: opacity .3s; }
.leg-layer-card:hover .leg-layer-img { opacity: .8; }
.leg-layer-badge {
  display: inline-block; margin: -20px 0 0 20px; position: relative; z-index: 2;
  font-size: .68rem; font-weight: 700; padding: 4px 14px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .5px;
}
.leg-badge-short { background: rgba(52,211,153,.15); color: var(--success); border: 1px solid rgba(52,211,153,.25); }
.leg-badge-mid { background: rgba(167,139,250,.15); color: var(--accent2); border: 1px solid rgba(167,139,250,.25); }
.leg-badge-long { background: rgba(245,158,11,.15); color: #f59e0b; border: 1px solid rgba(245,158,11,.25); }
.leg-layer-body { padding: 20px 24px 28px; }
.leg-layer-body h4 { font-size: 1.15rem; margin-bottom: 8px; }
.leg-layer-body > p { color: var(--text-muted); font-size: .88rem; margin-bottom: 16px; line-height: 1.5; }
.leg-feature-list { list-style: none; padding: 0; margin: 0 0 16px; }
.leg-feature-list li {
  font-size: .84rem; color: var(--text-muted); padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.04); line-height: 1.5;
}
.leg-feature-list li:last-child { border-bottom: none; }
.leg-feature-list li strong { color: #fff; }
.leg-layer-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.leg-layer-tags span {
  font-size: .65rem; padding: 3px 10px; border-radius: 20px;
  background: rgba(109,159,255,.08); border: 1px solid rgba(109,159,255,.15); color: var(--accent);
}

/* Governance Vote */
.leg-governance {
  position: relative; margin: 48px 0 32px; padding: 36px 32px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  overflow: hidden;
}
.leg-gov-glow {
  position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  width: 400px; height: 200px;
  background: radial-gradient(circle, rgba(52,211,153,.08), transparent 70%);
  pointer-events: none;
}
.leg-governance h3 { text-align: center; margin-bottom: 8px; font-size: 1.2rem; }
.leg-governance > p { text-align: center; color: var(--text-muted); font-size: .9rem; margin-bottom: 24px; }
.leg-governance > p strong { color: var(--success); }
.leg-gov-vote { margin-bottom: 24px; }
.leg-vote-bar {
  height: 12px; background: rgba(255,255,255,.06); border-radius: 8px;
  overflow: hidden; margin-bottom: 8px;
}
.leg-vote-fill {
  height: 100%; border-radius: 8px;
  background: linear-gradient(90deg, var(--success), var(--accent));
}
.leg-vote-stats {
  display: flex; justify-content: space-between; font-size: .78rem; color: var(--text-muted);
}
.leg-gov-alloc {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.leg-alloc-item {
  text-align: center; padding: 14px 8px;
  background: rgba(52,211,153,.04); border: 1px solid rgba(52,211,153,.1);
  border-radius: 12px;
}
.leg-alloc-pct {
  display: block; font-size: 1.2rem; font-weight: 800;
  background: linear-gradient(135deg, var(--success), var(--accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 4px;
}
.leg-alloc-item span:last-child { font-size: .72rem; color: var(--text-muted); }

/* Legacy Symbol */
.leg-symbol {
  text-align: center; margin: 40px 0 24px; padding: 32px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
}
.leg-symbol-icon { font-size: 3rem; margin-bottom: 8px; letter-spacing: 8px; }
.leg-symbol-label { font-size: .82rem; font-weight: 700; color: var(--accent); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; }
.leg-symbol-desc { font-size: .85rem; color: var(--text-muted); max-width: 600px; margin: 0 auto; line-height: 1.5; }

/* Legacy Closing Quote */
.leg-closing {
  text-align: center; margin: 32px 0 24px; padding: 32px;
  background: linear-gradient(135deg, rgba(245,158,11,.04), rgba(167,139,250,.04));
  border: 1px solid rgba(245,158,11,.15); border-radius: 16px;
}
.leg-closing p {
  font-size: 1.05rem; font-style: italic; color: var(--text-muted); line-height: 1.6;
  max-width: 700px; margin: 0 auto;
}
.leg-note {
  font-size: .75rem; color: var(--text-muted); text-align: center; padding: 16px;
  opacity: .7;
}

/* Roadmap legacy phase accent */
.rm-phase-card.rm-legacy { border-color: rgba(245,158,11,.2); }
.rm-phase-card.rm-legacy:hover { border-color: rgba(245,158,11,.5); box-shadow: 0 12px 40px rgba(245,158,11,.08); }

/* ================================================================== */
/* v53: ANCIENT MODE + TRANSMIT TO SPACE                              */
/* ================================================================== */

/* Ancient Mode Toggle Button */
.ancient-toggle {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 50px;
  background: transparent; border: 1px solid rgba(245,158,11,.35);
  color: #f59e0b; font-size: .78rem; font-weight: 600;
  cursor: pointer; transition: all .3s; white-space: nowrap;
}
.ancient-toggle:hover {
  background: rgba(245,158,11,.1); border-color: #f59e0b;
  box-shadow: 0 0 20px rgba(245,158,11,.15);
}
.ancient-toggle.active {
  background: #f59e0b; color: #000; border-color: #f59e0b;
}

/* Ancient Mode — Global Hieroglyphic Override */
html.ancient-mode {
  --ancient-font: 'Noto Sans Egyptian Hieroglyphs', sans-serif;
}
html.ancient-mode h1,
html.ancient-mode h2,
html.ancient-mode h3,
html.ancient-mode h4 {
  font-family: var(--ancient-font) !important;
  letter-spacing: 4px;
}
html.ancient-mode .section-title {
  font-family: var(--ancient-font) !important;
  letter-spacing: 6px;
}
html.ancient-mode .logo {
  font-family: var(--ancient-font) !important;
  letter-spacing: 3px;
}
html.ancient-mode .hero-tag {
  font-family: var(--ancient-font) !important;
}

/* Transmit to Space — Hero Button */
.btn-transmit {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 50px;
  background: transparent; border: 2px solid #f59e0b;
  color: #f59e0b; font-size: .88rem; font-weight: 600;
  cursor: pointer; transition: all .3s; white-space: nowrap;
}
.btn-transmit:hover {
  background: #f59e0b; color: #000;
  box-shadow: 0 0 30px rgba(245,158,11,.3);
  transform: scale(1.03);
}

/* Transmit to Space — Large CTA in Legacy Section */
.leg-transmit { text-align: center; margin-top: 32px; }
.btn-transmit-lg {
  display: inline-block; padding: 18px 40px;
  font-size: 1.2rem; font-weight: 700; border-radius: 50px;
  background: transparent; border: 3px solid #f59e0b;
  color: #f59e0b; cursor: pointer; transition: all .3s;
  letter-spacing: .5px;
}
.btn-transmit-lg:hover {
  background: #f59e0b; color: #000;
  box-shadow: 0 0 40px rgba(245,158,11,.3), 0 0 80px rgba(245,158,11,.1);
  transform: scale(1.02);
}
.leg-transmit-sub {
  font-size: .82rem; color: var(--text-muted); margin-top: 12px; max-width: 600px;
  margin-left: auto; margin-right: auto;
}

/* Transmit Modal Overlay */
.transmit-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.92); backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: 28px 18px;
  opacity: 0; pointer-events: none; transition: opacity .4s;
  overflow-y: auto;
}
.transmit-overlay.active { opacity: 1; pointer-events: auto; }
.transmit-modal {
  background:
    radial-gradient(circle at top, rgba(245,158,11,.14), transparent 28%),
    linear-gradient(180deg, rgba(10,15,24,.98), rgba(7,11,19,.98));
  border: 1px solid rgba(245,158,11,.24);
  border-radius: 28px;
  padding: 34px;
  width: min(1120px, 96vw);
  max-height: min(94vh, 980px);
  position: relative;
  overflow: auto;
  box-shadow: 0 32px 120px rgba(0,0,0,.55);
}
.transmit-modal-glow {
  position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
  width: 420px; height: 240px;
  background: radial-gradient(circle, rgba(245,158,11,.18), transparent 70%);
  pointer-events: none;
}
.transmit-modal-header {
  position: relative;
  margin-bottom: 22px;
  max-width: 760px;
}
.transmit-kicker {
  margin: 0 0 8px;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: #f59e0b;
}
.transmit-title {
  margin: 0;
  font-size: clamp(1.45rem, 2vw, 2rem);
}
.transmit-sub {
  margin: 10px 0 0;
  font-size: .95rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.transmit-shell {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.transmit-compose,
.transmit-preview-card,
.transmit-result-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  padding: 18px;
}
.transmit-compose {
  display: grid;
  gap: 14px;
}
.transmit-monitor {
  display: grid;
  gap: 16px;
}
.transmit-field {
  display: grid;
  gap: 8px;
}
.transmit-field-label,
.transmit-block-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(255,255,255,.72);
}
.transmit-textarea {
  width: 100%;
  min-height: 112px;
  resize: vertical;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(3,8,17,.8);
  color: #f4f7fb;
  padding: 14px 15px;
  font: inherit;
  line-height: 1.5;
}
.transmit-textarea:focus {
  outline: none;
  border-color: rgba(245,158,11,.55);
  box-shadow: 0 0 0 3px rgba(245,158,11,.12);
}
.transmit-textarea-dna {
  font-family: 'IBM Plex Mono', 'Consolas', monospace;
  letter-spacing: .08em;
}
.transmit-dropzone {
  display: grid;
  gap: 6px;
  border: 1px dashed rgba(245,158,11,.42);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(245,158,11,.08), rgba(245,158,11,.03));
  padding: 18px;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.transmit-dropzone:hover {
  transform: translateY(-2px);
  border-color: rgba(245,158,11,.7);
  background: linear-gradient(180deg, rgba(245,158,11,.12), rgba(245,158,11,.05));
}
.transmit-file-input {
  display: none;
}
.transmit-drop-title {
  font-size: 1rem;
  font-weight: 700;
}
.transmit-drop-sub {
  font-size: .86rem;
  color: var(--text-muted);
}
.transmit-attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.transmit-attachment-pill,
.transmit-empty-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: .82rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
}
.transmit-empty-pill {
  color: var(--text-muted);
}
.btn-transmit-submit {
  width: 100%;
  justify-content: center;
  border-radius: 16px;
  border: 1px solid rgba(245,158,11,.4);
  background: linear-gradient(135deg, rgba(245,158,11,.24), rgba(109,159,255,.18));
  color: #fff5df;
  min-height: 52px;
  font-weight: 700;
}
.btn-transmit-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(245,158,11,.16);
}
.btn-transmit-submit:disabled {
  opacity: .7;
  cursor: progress;
}
.transmit-preview-card {
  display: grid;
  gap: 16px;
}
.transmit-preview-head,
.transmit-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.transmit-preview-state,
.transmit-manifest-id {
  font-size: .8rem;
  color: #ffd27b;
  white-space: nowrap;
}
.transmit-hieroglyphs {
  font-family: 'Noto Sans Egyptian Hieroglyphs', sans-serif;
  font-size: clamp(1.45rem, 2.4vw, 2.1rem);
  letter-spacing: 6px; color: #f59e0b;
  margin: 0; line-height: 1.75;
  min-height: 88px;
  animation: transmitPulse 2s ease-in-out infinite;
}
@keyframes transmitPulse {
  0%, 100% { opacity: .6; text-shadow: 0 0 10px rgba(245,158,11,.2); }
  50% { opacity: 1; text-shadow: 0 0 30px rgba(245,158,11,.5); }
}
.transmit-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 14px;
}
.transmit-preview-block {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 14px;
  display: grid;
  gap: 10px;
}
.transmit-binary {
  margin: 0;
  min-height: 112px;
  max-height: 220px;
  overflow: auto;
  padding: 12px;
  border-radius: 14px;
  background: rgba(3,8,17,.82);
  color: #d8efff;
  font-size: .78rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.transmit-quantum-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.transmit-quantum-card {
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(109,159,255,.12), rgba(167,139,250,.08));
  border: 1px solid rgba(109,159,255,.18);
  display: grid;
  gap: 4px;
}
.transmit-quantum-label {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.66);
}
.transmit-quantum-state {
  font-size: 1rem;
  font-weight: 700;
  color: #ecf4ff;
}
.transmit-quantum-detail,
.transmit-quantum-coherence {
  font-size: .78rem;
  color: rgba(255,255,255,.72);
}
.transmit-progress {
  height: 6px; background: rgba(255,255,255,.06); border-radius: 4px;
  overflow: hidden;
}
.transmit-progress-fill {
  height: 100%; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, #f59e0b, #6d9fff, #a78bfa);
  transition: width .45s ease;
}
.transmit-status {
  font-size: .86rem; color: var(--text-muted);
}
.transmit-result-card {
  display: grid;
  gap: 14px;
}
.transmit-summary,
.transmit-meta-grid {
  display: grid;
  gap: 10px;
}
.transmit-summary-line,
.transmit-meta-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  font-size: .9rem;
}
.transmit-summary-line span,
.transmit-meta-line span {
  color: var(--text-muted);
}
.transmit-summary-line strong,
.transmit-meta-line strong {
  text-align: right;
  color: #f6f8fb;
  word-break: break-word;
}
.transmit-attachment-preview {
  display: grid;
  gap: 10px;
}
.transmit-attachment-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.transmit-attachment-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}
.transmit-attachment-meta {
  display: grid;
  gap: 2px;
}
.transmit-attachment-meta strong {
  font-size: .92rem;
}
.transmit-attachment-meta span {
  font-size: .78rem;
  color: var(--text-muted);
  word-break: break-word;
}
.transmit-media-thumb {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(3,8,17,.88);
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.transmit-file-snippet {
  margin: 0;
  font-size: .8rem;
  line-height: 1.5;
  color: rgba(255,255,255,.82);
  word-break: break-word;
}
.transmit-close {
  position: absolute; top: 16px; right: 16px;
  background: none; border: none; color: var(--text-muted);
  font-size: 1.4rem; cursor: pointer;
}

/* ================================================================== */
/* v51+v52+v53: RESPONSIVE                                            */
/* ================================================================== */
@media (max-width: 768px) {
  .transp-stats-row { grid-template-columns: repeat(2, 1fr); }
  .transp-manifesto-grid { grid-template-columns: 1fr; }
  .transp-verify-grid { grid-template-columns: 1fr; }
  .transp-contract-grid { grid-template-columns: 1fr; }
  .rm-phase-strip { grid-template-columns: 1fr; }
  .cens-severity-bar { flex-direction: column; gap: 8px; }
  .leg-problem-stats { grid-template-columns: repeat(2, 1fr); }
  .leg-gov-alloc { grid-template-columns: repeat(2, 1fr); }
  .leg-vote-stats { flex-direction: column; gap: 4px; text-align: center; }
  .ancient-toggle span { font-size: .7rem; }
  .btn-transmit-lg { font-size: 1rem; padding: 14px 28px; }
  .transmit-modal { padding: 22px; width: min(100%, 96vw); }
  .transmit-shell { grid-template-columns: 1fr; }
  .transmit-preview-grid { grid-template-columns: 1fr; }
  .transmit-quantum-grid { grid-template-columns: 1fr; }
  .transmit-preview-head,
  .transmit-result-head,
  .transmit-summary-line,
  .transmit-meta-line { flex-direction: column; align-items: flex-start; }
  .transmit-hieroglyphs { letter-spacing: 3px; }
}

/* ================================================================== */
/* v54: NARRATIVE SECTION REFRESH                                     */
/* ================================================================== */
#about,
#story,
#censorship,
#legacy,
#transparency {
  position: relative;
  overflow: hidden;
}

#about .container,
#story .container,
#censorship .container,
#legacy .container,
#transparency .container {
  position: relative;
  z-index: 1;
}

#about::before,
#story::before,
#censorship::before,
#legacy::before,
#transparency::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#about::before {
  background:
    radial-gradient(circle at 10% 8%, rgba(109,159,255,.12), transparent 28%),
    radial-gradient(circle at 88% 10%, rgba(52,211,153,.10), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%);
}

#story::before {
  background:
    radial-gradient(circle at 18% 0%, rgba(109,159,255,.10), transparent 32%),
    radial-gradient(circle at 82% 14%, rgba(167,139,250,.11), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%);
}

#censorship::before {
  background:
    radial-gradient(circle at 86% 4%, rgba(239,68,68,.14), transparent 30%),
    radial-gradient(circle at 14% 14%, rgba(245,158,11,.10), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.015), transparent 24%);
}

#legacy::before {
  background:
    radial-gradient(circle at 12% 6%, rgba(245,158,11,.14), transparent 28%),
    radial-gradient(circle at 88% 10%, rgba(167,139,250,.10), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%);
}

#transparency::before {
  background:
    radial-gradient(circle at 15% 8%, rgba(109,159,255,.14), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(167,139,250,.10), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%);
}

#about .section-subtitle,
#story .section-subtitle,
#censorship .section-subtitle,
#legacy .section-subtitle,
#transparency .section-subtitle {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

/* About / mission */
#about .decentral-manifesto {
  position: relative;
  padding: 56px 36px;
  background: linear-gradient(180deg, rgba(10,14,26,.96), rgba(12,17,31,.9));
  border: 1px solid rgba(109,159,255,.16);
  box-shadow: 0 30px 120px rgba(7,10,20,.45), inset 0 1px 0 rgba(255,255,255,.03);
}

#about .decentral-manifesto::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 16% 18%, rgba(109,159,255,.13), transparent 28%),
    radial-gradient(circle at 88% 14%, rgba(52,211,153,.11), transparent 26%),
    linear-gradient(140deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  pointer-events: none;
}

#about .decentral-manifesto > * {
  position: relative;
  z-index: 1;
}

#about .decentral-icon-row {
  gap: 22px;
  margin-bottom: 28px;
}

#about .decentral-orb {
  width: 72px;
  height: 72px;
  border-color: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 36px rgba(0,0,0,.22);
}

#about .decentral-pillars {
  margin-top: 28px;
  gap: 18px;
}

#about .decentral-pillars .pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: linear-gradient(180deg, rgba(14,19,34,.95), rgba(8,12,24,.92)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.22);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

#about .decentral-pillars .pillar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 38%);
  pointer-events: none;
}

#about .decentral-pillars .pillar:hover {
  transform: translateY(-8px);
  border-color: rgba(109,159,255,.28) !important;
  box-shadow: 0 30px 65px rgba(0,0,0,.28), 0 0 0 1px rgba(109,159,255,.06);
}

#about .decentral-pillars .pillar > img {
  width: 100% !important;
  height: 168px !important;
  object-fit: cover !important;
  opacity: .72 !important;
  filter: saturate(1.05);
  transition: transform .45s ease, opacity .45s ease;
}

#about .decentral-pillars .pillar:hover > img {
  transform: scale(1.06);
  opacity: .9 !important;
}

#about .decentral-pillars .pillar > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 24px !important;
  position: relative;
  z-index: 1;
}

#about .decentral-pillars .pillar h4 {
  margin: 0 0 2px !important;
  font-size: 1.02rem !important;
}

#about .decentral-pillars .pillar p {
  margin: 0;
  color: var(--text-muted) !important;
  font-size: .87rem !important;
  line-height: 1.7 !important;
}

#about .decentral-pillars .pillar > div > div:last-child {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: auto !important;
}

#about .decentral-pillars .pillar > div > div:last-child span {
  padding: 5px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.04) !important;
  color: #fff !important;
  font-size: .68rem !important;
  letter-spacing: .02em;
}

#about .decentral-grid {
  gap: 24px;
  margin-bottom: 0;
}

#about .decentral-card {
  background: linear-gradient(180deg, rgba(12,17,31,.96), rgba(9,13,26,.94));
  border-radius: 26px;
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 24px 70px rgba(0,0,0,.2);
}

#about .decentral-card::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}

#about .decentral-img {
  height: 220px;
  opacity: .72;
  transition: transform .45s ease, opacity .45s ease;
}

#about .decentral-card:hover .decentral-img {
  transform: scale(1.05);
  opacity: .9;
}

#about .decentral-card:nth-child(1) .decentral-badge {
  border: 1px solid rgba(109,159,255,.22);
  background: rgba(109,159,255,.18);
  color: #dbe7ff;
}

#about .decentral-card:nth-child(2) .decentral-badge {
  border: 1px solid rgba(167,139,250,.22);
  background: rgba(167,139,250,.18);
  color: #efe6ff;
}

#about .decentral-card h3 {
  padding: 26px 26px 10px;
}

#about .decentral-lead {
  padding: 0 26px;
}

#about .decentral-timeline-mini {
  padding: 20px 26px;
}

#about .dt-step {
  border-left: 2px solid rgba(255,255,255,.08);
  border-radius: 0 14px 14px 0;
  background: rgba(255,255,255,.02);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

#about .dt-step:hover {
  transform: translateX(4px);
  border-color: var(--accent);
  background: rgba(109,159,255,.06);
}

#about .decentral-stats {
  gap: 12px;
  padding: 0 26px 18px;
}

#about .ds {
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
}

#about .decentral-quote {
  margin: 0 26px;
  padding: 18px 0 22px;
  border-top-color: rgba(255,255,255,.08);
}

/* Story */
#story .story-timeline {
  max-width: 1160px;
  padding: 28px 0 8px;
}

#story .timeline-line {
  width: 3px;
  background: linear-gradient(180deg, transparent, rgba(109,159,255,.9), rgba(167,139,250,.9), transparent);
  box-shadow: 0 0 24px rgba(109,159,255,.18);
}

#story .timeline-item {
  margin-bottom: 40px;
}

#story .timeline-left {
  padding-right: calc(50% + 32px);
}

#story .timeline-right {
  padding-left: calc(50% + 32px);
}

#story .timeline-card {
  position: relative;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  width: min(100%, 520px);
  border-radius: 24px;
  border-color: rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(12,17,31,.96), rgba(8,12,24,.95));
  box-shadow: 0 28px 72px rgba(0,0,0,.22);
}

#story .timeline-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(145deg, rgba(109,159,255,.09), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 30%);
  pointer-events: none;
}

#story .timeline-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 38px 90px rgba(0,0,0,.28);
}

#story .timeline-img {
  height: 100%;
  min-height: 100%;
  opacity: .78;
}

#story .timeline-content {
  padding: 24px 22px;
}

#story .timeline-content h3 {
  font-size: 1.24rem;
}

#story .timeline-content > p:not(.timeline-detail) {
  color: #d6def5;
}

#story .timeline-stats {
  gap: 10px;
  border-color: rgba(255,255,255,.07);
}

#story .tstat {
  padding: 10px 6px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
}

#story .tstat-num {
  font-size: 1.2rem;
}

#story .timeline-detail {
  color: rgba(227,233,248,.78) !important;
}

#story .timeline-item:nth-child(odd) .timeline-dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(109,159,255,.12), 0 0 22px rgba(109,159,255,.35);
}

#story .timeline-item:nth-child(even) .timeline-dot {
  background: var(--accent2);
  box-shadow: 0 0 0 4px rgba(167,139,250,.12), 0 0 22px rgba(167,139,250,.35);
}

#story .timeline-item:nth-child(even) .timeline-year {
  background: rgba(167,139,250,.12);
  color: #d7c9ff;
}

#story .manifesto {
  position: relative;
  overflow: hidden;
  max-width: 820px;
  margin-top: 42px !important;
  padding: 38px 30px;
  border: 1px solid rgba(109,159,255,.15);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(11,16,30,.9), rgba(8,12,24,.86));
  box-shadow: 0 28px 90px rgba(0,0,0,.22);
}

#story .manifesto::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(109,159,255,.12), transparent 30%),
    radial-gradient(circle at 80% 15%, rgba(52,211,153,.10), transparent 25%);
  pointer-events: none;
}

#story .manifesto p {
  position: relative;
  z-index: 1;
}

/* Censorship */
#censorship .cens-severity-bar {
  justify-content: space-between;
  gap: 16px 22px;
  padding: 18px 24px;
  border-radius: 20px;
  border-color: rgba(239,68,68,.16);
  background: linear-gradient(180deg, rgba(19,12,14,.92), rgba(22,15,17,.88));
  box-shadow: 0 22px 60px rgba(0,0,0,.18);
}

#censorship .cens-sev-item {
  font-size: .82rem;
}

#censorship .cens-sev-stat {
  margin-left: auto;
}

#censorship .censorship-live-feed {
  margin-top: 22px;
  padding: 22px 24px;
  border-radius: 24px;
  border: 1px solid rgba(239,68,68,.12);
  background: linear-gradient(180deg, rgba(17,11,12,.94), rgba(13,16,26,.88));
  box-shadow: 0 25px 70px rgba(0,0,0,.2);
}

#censorship .clf-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

#censorship .clf-header h4 {
  margin: 0;
  font-size: 1.05rem;
}

#censorship .clf-refresh {
  margin-left: auto;
  color: #fca5a5;
  font-size: .74rem;
}

#censorship .clf-ticker {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

#censorship .clf-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

#censorship .clf-item:hover {
  transform: translateX(4px);
  border-color: rgba(239,68,68,.22);
  background: rgba(239,68,68,.05);
}

#censorship .clf-time {
  color: #fca5a5;
  font-size: .74rem;
  font-weight: 700;
}

#censorship .clf-text {
  color: #e8edf7;
  font-size: .85rem;
  line-height: 1.55;
}

#censorship .clf-source {
  justify-self: end;
  color: var(--text-muted);
  font-size: .72rem;
}

#censorship .censorship-real {
  margin-top: 26px !important;
}

#censorship .censorship-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

#censorship .censorship-case {
  position: relative;
  overflow: hidden;
  padding: 0 20px 22px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(14,16,26,.96), rgba(10,13,22,.94));
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
}

#censorship .censorship-case::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 36%);
  pointer-events: none;
}

#censorship .cens-case-img {
  width: calc(100% + 40px);
  height: 160px;
  margin: 0 -20px;
  border-radius: 24px 24px 0 0;
}

#censorship .cc-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 12px 0 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  font-size: 1.2rem;
}

#censorship .censorship-case h4 {
  font-size: 1.02rem;
  line-height: 1.3;
  margin-bottom: 10px;
}

#censorship .censorship-case p {
  font-size: .86rem;
  line-height: 1.62;
}

#censorship .cc-source {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  color: var(--text-muted);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#censorship .cens-answer-card {
  padding: 30px 34px;
  margin-top: 28px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(9,17,31,.96), rgba(13,20,38,.92));
  box-shadow: 0 26px 70px rgba(0,0,0,.2);
}

#censorship .censorship-citizen-banner {
  position: relative;
  overflow: hidden;
  margin-top: 34px !important;
  padding: 40px 32px;
  border: 1px solid rgba(109,159,255,.16);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(13,19,35,.98), rgba(24,17,30,.94));
  box-shadow: 0 30px 90px rgba(0,0,0,.25);
}

#censorship .censorship-citizen-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 25%, rgba(109,159,255,.14), transparent 24%),
    radial-gradient(circle at 85% 15%, rgba(239,68,68,.12), transparent 24%);
  pointer-events: none;
}

#censorship .censorship-citizen-banner > * {
  position: relative;
  z-index: 1;
}

#censorship .ccb-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

#censorship .ccb-stat {
  padding: 18px 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  text-align: center;
}

#censorship .ccb-num {
  display: block;
  margin-bottom: 4px;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
}

/* Legacy */
#legacy .leg-problem {
  padding: 40px 34px;
  border-radius: 28px;
  border-color: rgba(245,158,11,.16);
  background: linear-gradient(135deg, rgba(24,13,12,.94), rgba(17,13,25,.92));
  box-shadow: 0 28px 80px rgba(0,0,0,.24);
}

#legacy .leg-problem::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(239,68,68,.10), transparent 28%),
    radial-gradient(circle at 85% 10%, rgba(245,158,11,.12), transparent 24%);
  pointer-events: none;
}

#legacy .leg-problem > * {
  position: relative;
  z-index: 1;
}

#legacy .leg-problem-stats {
  gap: 14px;
}

#legacy .leg-pstat {
  border-color: rgba(255,255,255,.07);
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

#legacy .leg-layers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

#legacy .leg-layer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  border-color: rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(11,16,30,.95), rgba(8,12,24,.94));
  box-shadow: 0 28px 70px rgba(0,0,0,.22);
}

#legacy .leg-layer-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 30%);
  pointer-events: none;
}

#legacy .leg-layer-img {
  height: 180px;
  opacity: .72;
}

#legacy .leg-layer-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 24px;
}

#legacy .leg-layer-body > p {
  margin: 0;
}

#legacy .leg-feature-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

#legacy .leg-feature-list li {
  padding: 10px 0;
  border-bottom-color: rgba(255,255,255,.06);
}

#legacy .leg-layer-tags {
  margin-top: auto;
}

#legacy .leg-layer-tags span {
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: #fff;
}

#legacy .leg-governance {
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(10,18,31,.96), rgba(11,14,26,.94));
  box-shadow: 0 30px 80px rgba(0,0,0,.22);
}

#legacy .leg-gov-alloc {
  gap: 14px;
}

#legacy .leg-alloc-item {
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}

#legacy .leg-symbol {
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(16,20,35,.95), rgba(8,12,24,.92));
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
}

#legacy .leg-symbol-icon {
  text-shadow: 0 0 24px rgba(245,158,11,.22);
}

#legacy .leg-closing {
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(167,139,250,.08));
  box-shadow: 0 22px 60px rgba(0,0,0,.18);
}

#legacy .btn-transmit-lg {
  background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(255,255,255,.02));
  border-color: rgba(245,158,11,.7);
  box-shadow: 0 18px 40px rgba(245,158,11,.12), inset 0 1px 0 rgba(255,255,255,.08);
}

#legacy .btn-transmit-lg:hover {
  transform: translateY(-3px) scale(1.01);
}

#legacy .leg-note {
  max-width: 780px;
  margin: 14px auto 0;
}

/* Transparency */
#transparency .transp-stats-row {
  gap: 18px;
  margin: 36px 0 28px;
}

#transparency .transp-stat-card {
  position: relative;
  overflow: hidden;
  padding: 26px 18px 20px;
  border-radius: 22px;
  border-color: rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(13,19,36,.96), rgba(9,13,25,.94));
  box-shadow: 0 22px 60px rgba(0,0,0,.18);
}

#transparency .transp-stat-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(109,159,255,.7), rgba(167,139,250,.7), transparent);
}

#transparency .transp-stat-num {
  margin-top: 8px;
  font-size: 1.55rem;
  background: linear-gradient(135deg, #fff, #c7d7ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#transparency .transp-manifesto {
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(10,18,31,.96), rgba(10,14,26,.94));
  box-shadow: 0 32px 90px rgba(0,0,0,.22);
}

#transparency .transp-manifesto-grid {
  gap: 14px;
}

#transparency .transp-pledge {
  border-color: rgba(255,255,255,.07);
  border-radius: 18px;
  background: rgba(255,255,255,.03);
}

#transparency .transp-verify-grid {
  gap: 20px;
}

#transparency .transp-verify-card {
  border-radius: 24px;
  border-color: rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(12,18,33,.96), rgba(8,12,24,.94));
  box-shadow: 0 25px 70px rgba(0,0,0,.18);
}

#transparency .transp-verify-visual img {
  opacity: .78 !important;
  transition: transform .45s ease, opacity .45s ease;
  transform: scale(1.02);
}

#transparency .transp-verify-card:hover .transp-verify-visual img {
  opacity: .92 !important;
  transform: scale(1.08);
}

#transparency .transp-verify-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 100%;
}

#transparency .transp-verify-body p {
  flex: 1;
}

#transparency .transp-verify-tags span {
  padding: 4px 10px;
  border-radius: 999px;
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: #fff;
}

#transparency .transp-audit-timeline {
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(11,17,31,.96), rgba(8,12,24,.94));
  box-shadow: 0 28px 80px rgba(0,0,0,.2);
}

#transparency .transp-timeline-track {
  padding-left: 38px;
}

#transparency .transp-timeline-track::before {
  left: 12px;
  width: 3px;
  box-shadow: 0 0 22px rgba(109,159,255,.24);
}

#transparency .transp-tl-item {
  padding: 2px 0 0 12px;
  margin-bottom: 20px;
}

#transparency .transp-tl-content {
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
}

#transparency .transp-contract-grid {
  gap: 18px;
}

#transparency .transp-contract-card {
  border-radius: 20px;
  border-color: rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(12,18,34,.96), rgba(8,12,24,.94));
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

#transparency .transp-contract-addr {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: #e7efff;
}

#transparency .transp-closing {
  margin-top: 36px;
  padding: 26px 24px;
  border: 1px solid rgba(109,159,255,.16);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(109,159,255,.08), rgba(167,139,250,.06));
  color: #d6def5;
}

/* Responsive overrides for refreshed narrative sections */
@media (max-width: 1180px) {
  #legacy .leg-layers {
    grid-template-columns: 1fr;
  }

  #censorship .censorship-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #story .timeline-card {
    width: min(100%, 480px);
    grid-template-columns: 180px minmax(0, 1fr);
  }
}

@media (max-width: 960px) {
  #story .story-timeline {
    max-width: 100%;
  }

  #story .timeline-left,
  #story .timeline-right {
    padding-left: 58px;
    padding-right: 0;
  }

  #story .timeline-line {
    left: 24px;
    transform: none;
  }

  #story .timeline-dot {
    left: 24px;
  }

  #story .timeline-card {
    width: 100%;
    grid-template-columns: 1fr;
  }

  #story .timeline-img {
    height: 190px;
    min-height: 190px;
  }

  #about .decentral-pillars {
    grid-template-columns: 1fr;
  }

  #censorship .cens-sev-stat {
    margin-left: 0;
  }

  #censorship .censorship-grid,
  #censorship .ccb-stats {
    grid-template-columns: 1fr;
  }

  #transparency .transp-stats-row,
  #transparency .transp-contract-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #about .decentral-manifesto,
  #story .manifesto,
  #censorship .censorship-live-feed,
  #censorship .censorship-citizen-banner,
  #legacy .leg-problem,
  #legacy .leg-governance,
  #legacy .leg-symbol,
  #transparency .transp-manifesto,
  #transparency .transp-audit-timeline,
  #transparency .transp-closing {
    padding: 24px 18px;
  }

  #about .decentral-icon-row {
    gap: 14px;
  }

  #about .decentral-orb {
    width: 56px;
    height: 56px;
    font-size: 1.2rem;
  }

  #censorship .clf-item {
    grid-template-columns: 1fr;
  }

  #censorship .clf-source {
    justify-self: start;
  }

  #legacy .leg-problem-stats,
  #legacy .leg-gov-alloc,
  #transparency .transp-stats-row,
  #transparency .transp-contract-grid {
    grid-template-columns: 1fr;
  }
}

/* v70: Mobile pressure relief for dense product sections. */
.prediction-market-board,
.prediction-market-shell,
.prediction-market-main,
.prediction-market-stage,
.prediction-market-head,
.prediction-market-card,
.prediction-stage-head,
.prediction-stage-body,
.prediction-stage-chart-card,
.prediction-depth-card {
  min-width: 0;
  max-width: 100%;
}

.prediction-market-copy h4,
.prediction-market-card h5,
.prediction-market-card p,
.prediction-stage-copy h5,
.prediction-stage-copy p,
#predictionHeroTitle,
#predictionStageTitle,
#predictionSelectedTitle {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal;
  overflow-wrap: anywhere;
  letter-spacing: 0;
}

@media (max-width: 720px) {
  .prediction-market-board {
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 14px !important;
    overflow: visible !important;
  }

  .prediction-market-head,
  .prediction-market-shell,
  .prediction-market-main,
  .prediction-market-stage,
  .prediction-stage-head,
  .prediction-stage-body {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .prediction-market-copy h4 {
    font-size: 1.08rem !important;
    line-height: 1.2 !important;
    margin-top: 0 !important;
  }

  .prediction-market-copy p,
  .prediction-market-hero-copy p,
  .prediction-stage-copy p,
  .prediction-selected-card p {
    font-size: .78rem !important;
    line-height: 1.42 !important;
    display: -webkit-box !important;
    line-clamp: 2 !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .prediction-market-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .prediction-market-card,
  .prediction-market-empty-card {
    min-height: 0 !important;
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 12px !important;
  }

  .prediction-market-card h5 {
    font-size: .88rem !important;
    line-height: 1.3 !important;
    line-clamp: 3 !important;
    -webkit-line-clamp: 3 !important;
  }

  .prediction-market-card p {
    font-size: .76rem !important;
    line-height: 1.38 !important;
    display: -webkit-box !important;
    line-clamp: 2 !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .prediction-market-summary,
  .prediction-market-hero-price-grid,
  .prediction-market-hero-metrics,
  .prediction-market-price-grid,
  .prediction-stage-stats,
  .prediction-trade-metrics,
  .prediction-trade-breakdown,
  .prediction-depth-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .prediction-market-stat,
  .prediction-market-hero-price,
  .prediction-market-hero-metric,
  .prediction-stage-stat,
  .prediction-market-price {
    min-height: 0 !important;
    padding: 8px !important;
    border-radius: 10px !important;
  }

  .prediction-market-stat span,
  .prediction-market-hero-price span,
  .prediction-market-hero-metric span,
  .prediction-market-price span,
  .prediction-stage-stat span {
    font-size: .62rem !important;
    line-height: 1.2 !important;
  }

  .prediction-market-stat strong,
  .prediction-market-hero-price strong,
  .prediction-market-hero-metric strong,
  .prediction-market-price strong,
  .prediction-stage-stat strong {
    font-size: .82rem !important;
    line-height: 1.2 !important;
  }

  .prediction-stage-copy h5,
  #predictionHeroTitle,
  #predictionStageTitle,
  #predictionSelectedTitle {
    font-size: 1rem !important;
    line-height: 1.25 !important;
    max-width: 100% !important;
  }

  .prediction-stage-chart-card,
  .prediction-depth-card,
  .prediction-trade-desk,
  .prediction-selected-card {
    padding: 10px !important;
    border-radius: 12px !important;
  }

  .prediction-stage-chart {
    min-height: 150px !important;
    max-height: 220px !important;
    border-radius: 12px !important;
  }

  .prediction-stage-panel-head,
  .prediction-stage-axis,
  .prediction-stage-links,
  .prediction-market-topline,
  .prediction-market-meta-row,
  .prediction-market-footer {
    gap: 6px !important;
  }

  .prediction-market-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .prediction-market-actions .prediction-market-api-link,
  .prediction-market-quick-btn,
  .prediction-market-open-btn,
  .prediction-stage-link,
  .prediction-trade-action {
    width: 100% !important;
    min-height: 34px !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    font-size: .72rem !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }
}

@media (max-width: 430px) {
  .prediction-market-board {
    padding: 10px !important;
  }

  .prediction-market-summary,
  .prediction-market-hero-price-grid,
  .prediction-market-hero-metrics,
  .prediction-market-price-grid,
  .prediction-stage-stats,
  .prediction-trade-metrics,
  .prediction-trade-breakdown,
  .prediction-depth-columns {
    grid-template-columns: 1fr 1fr !important;
  }

  .prediction-market-card h5 {
    font-size: .84rem !important;
  }

  .prediction-stage-axis {
    font-size: .62rem !important;
    letter-spacing: 0 !important;
  }
}

/* v71: Keep prediction market chips and labels horizontal on narrow cards. */
.prediction-market-source,
.prediction-market-topic,
.prediction-market-tag,
.prediction-market-live,
.prediction-market-spotlight,
.prediction-pulse-kicker,
.prediction-chip {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  flex: 0 0 auto;
  max-width: 100%;
}

.prediction-market-contract,
.prediction-market-metric span,
.prediction-market-price span,
.prediction-market-stat span,
.prediction-stage-stat span,
.prediction-trade-stat span,
.prediction-pulse-meta span,
.prediction-tape-chip span,
.prediction-tape-chip em {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  letter-spacing: 0 !important;
}

.prediction-market-topline,
.prediction-market-tags,
.prediction-market-footer,
.prediction-pulse-topline {
  align-items: center;
  min-width: 0;
}

.prediction-market-price-grid,
.prediction-market-meta-row,
.prediction-market-summary,
.prediction-stage-stats,
.prediction-trade-metrics,
.prediction-trade-breakdown,
.prediction-trade-receipt-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 118px), 1fr));
}

.prediction-market-price,
.prediction-market-metric,
.prediction-market-stat,
.prediction-stage-stat,
.prediction-trade-stat {
  min-width: min(100%, 104px);
}

@media (max-width: 430px) {
  .prediction-market-source,
  .prediction-market-topic,
  .prediction-market-tag,
  .prediction-market-live,
  .prediction-market-spotlight,
  .prediction-chip {
    padding-inline: 7px !important;
    font-size: .62rem !important;
  }

  .prediction-market-price-grid,
  .prediction-market-meta-row,
  .prediction-market-summary,
  .prediction-stage-stats,
  .prediction-trade-metrics,
  .prediction-trade-breakdown,
  .prediction-trade-receipt-grid {
    grid-template-columns: repeat(2, minmax(118px, 1fr)) !important;
  }
}

/* v72: Mobile prediction filters stay in one horizontal swipe rail. */
@media (max-width: 720px) {
  .prediction-market-controls {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 2px 2px 8px !important;
    scrollbar-width: none;
  }

  .prediction-market-controls::-webkit-scrollbar {
    display: none;
  }

  .prediction-market-controls > .prediction-market-source-toggle,
  .prediction-market-controls > .prediction-market-rank-toggle,
  .prediction-market-controls > .prediction-market-topic-toggle {
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
    scroll-snap-align: start;
    padding: 0 !important;
  }

  .prediction-market-controls .prediction-chip {
    min-height: 36px !important;
    white-space: nowrap !important;
  }

  .prediction-market-controls > .prediction-market-search-row {
    flex: 0 0 min(86vw, 390px) !important;
    width: min(86vw, 390px) !important;
    min-width: min(86vw, 390px) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 8px !important;
    scroll-snap-align: start;
  }

  .prediction-market-controls .prediction-market-search {
    min-width: 0 !important;
  }

  .prediction-market-controls .prediction-refresh-btn {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    white-space: nowrap !important;
  }
}


/* ============================================================
   OST modern icon system (icons.js)
   ============================================================ */
.ost-icon { display:inline-block; vertical-align:-0.18em; flex:none; }
.ost-icon-btn { display:inline-flex; align-items:center; gap:8px; }
.ost-icon-btn .ost-icon { width:1em; height:1em; }
button .ost-icon, a .ost-icon, .pill .ost-icon { vertical-align:-0.18em; }
.ost-icon-lead { display:inline-flex; align-items:center; justify-content:center; width:1.7em; height:1.7em; border-radius:8px; background:rgba(120,180,255,0.08); color:#bfdbfe; }


/* ============================================================
   Wallet panel redesign overlay (v73)
   Stronger glassmorphism, better tab affordance, dedicated
   Predict panel framing.
   ============================================================ */
.wallet-tabs {
  gap: 6px;
  padding: 6px;
  background: linear-gradient(135deg, rgba(13,18,32,.92), rgba(9,13,26,.85));
  border: 1px solid rgba(109,159,255,.16);
  border-radius: 14px;
  width: 100%;
  max-width: 720px;
  box-shadow: 0 12px 32px rgba(2,6,23,.42);
}
.wallet-tab-btn {
  flex: 1 1 110px;
  min-width: 0;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: .88rem;
  letter-spacing: .01em;
  color: #cbd5e1;
  background: transparent;
}
.wallet-tab-btn .ost-icon { width: 16px; height: 16px; opacity: .85; }
.wallet-tab-btn:hover { background: rgba(109,159,255,.08); color: #f8fafc; }
.wallet-tab-btn:hover .ost-icon { opacity: 1; }
.wallet-tab-btn.active {
  background: linear-gradient(135deg, #2b56d6 0%, #1e9876 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(43,86,214,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.wallet-tab-btn.active .ost-icon { opacity: 1; }

.wallet-portal-grid { gap: 14px; }
.wallet-portal-card {
  position: relative;
  padding: 20px 18px 22px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(20,26,42,.88), rgba(11,15,28,.94));
  border: 1px solid rgba(109,159,255,.12);
  overflow: hidden;
  isolation: isolate;
}
.wallet-portal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 0% 0%, rgba(109,159,255,.10), transparent 60%);
  pointer-events: none;
  z-index: -1;
}
.wallet-portal-card:hover {
  transform: translateY(-3px);
  border-color: rgba(109,159,255,.36);
  box-shadow: 0 18px 36px rgba(2,6,23,.38);
}
.wallet-portal-kicker {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(109,159,255,.14);
  color: #bfdbfe;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.wallet-portal-card h4 {
  margin: 12px 0 8px;
  font-size: 1.08rem;
  letter-spacing: -.01em;
}
.wallet-portal-meta {
  display: block;
  margin-top: 14px;
  font-size: .78rem;
  color: #93c5fd;
  letter-spacing: .02em;
}

/* Dedicated predict panel � gives the surface room and a header band */
#wallet-panel-predict {
  padding: 8px 0 0;
}
#wallet-panel-predict .prediction-market-board {
  margin: 0;
}

@media (max-width: 720px) {
  .wallet-tabs { gap: 4px; padding: 4px; border-radius: 12px; }
  .wallet-tab-btn { padding: 9px 10px; font-size: .82rem; flex-basis: 80px; }
  .wallet-tab-btn .ost-icon { width: 14px; height: 14px; }
  .wallet-portal-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   v74: Prediction filter chips strictly horizontal, smaller
   market pulse cards, and a tighter prediction control rail.
   ============================================================ */
.prediction-market-controls {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.prediction-market-source-toggle,
.prediction-market-rank-toggle,
.prediction-market-topic-toggle {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-bottom: 4px !important;
  scrollbar-width: thin;
}
.prediction-market-source-toggle .prediction-chip,
.prediction-market-rank-toggle .prediction-chip,
.prediction-market-topic-toggle .prediction-chip {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  letter-spacing: 0 !important;
  padding: 6px 10px !important;
  font-size: .76rem !important;
  line-height: 1.1 !important;
  height: auto !important;
  min-height: 30px !important;
  max-width: none !important;
}
/* Smaller, denser market pulse cards. */
.prediction-market-pulse {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 8px !important;
}
.prediction-pulse-card {
  padding: 10px 12px !important;
  gap: 6px !important;
  border-radius: 12px !important;
}
.prediction-pulse-card strong { font-size: .82rem !important; line-height: 1.3 !important; }
.prediction-pulse-card p { font-size: .72rem !important; line-height: 1.35 !important; }
.prediction-pulse-kicker { padding: 3px 7px !important; font-size: .58rem !important; }
.prediction-pulse-meta { gap: 4px 8px !important; }
.prediction-pulse-meta span { font-size: .66rem !important; }
.prediction-market-pulse-head { padding: 6px 0 !important; }
.prediction-market-pulse-head strong { font-size: .9rem !important; }
.prediction-market-pulse-head p { font-size: .72rem !important; line-height: 1.4 !important; margin-top: 2px !important; }

/* Closed/cashed-out position delete X button. */
.prediction-position-row { position: relative; }
.prediction-position-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(248,113,113,.25);
  background: rgba(248,113,113,.06);
  color: #f87171;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
}
.prediction-position-delete:hover {
  background: rgba(248,113,113,.18);
  color: #fff;
}

/* Trade ticket popout live chart */
.ost-tradepop__chart-wrap {
  margin: 8px 12px 4px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(5,8,14,.55);
}
.ost-tradepop__chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 11px;
  color: #9ba0c8;
}
.ost-tradepop__chart-toggle {
  display: inline-flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
}
.ost-tradepop__chart-toggle button {
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  background: transparent;
  color: #cbd5e1;
  border: 0;
  cursor: pointer;
}
.ost-tradepop__chart-toggle button.is-active.is-yes { background: linear-gradient(135deg,#7ce6a8,#4cc985); color: #0a0a0a; }
.ost-tradepop__chart-toggle button.is-active.is-no  { background: linear-gradient(135deg,#ff7c8a,#e85565); color: #fff; }
.ost-tradepop__chart-canvas {
  width: 100%;
  height: 110px;
  display: block;
  border-radius: 6px;
  background: rgba(0,0,0,.25);
}