/* Duel result screen */
.duel-result {
  text-align: center;
  padding: 32px 24px !important;
}
.duel-result-icon  { font-size: 56px; margin-bottom: 8px; }
.duel-result-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 24px; margin-bottom: 16px; }
.duel-result-scores {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 14px;
}
.duel-rs { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--text3); }
.duel-rs-val { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 32px; color: var(--text1); }
.duel-rs-val.g { color: var(--accent); }
.duel-vs-small { font-size: 14px; color: rgba(255,255,255,.2); font-weight: 800; }
.duel-xp-award {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  margin: 8px 0 6px;
}
.duel-lesson {
  font-size: 12px;
  color: var(--text2);
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  padding: 10px 14px;
  text-align: left;
  line-height: 1.5;
  margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — "Papel" (off-white + azul oscuro)
   Activa con: document.body.classList.add('light-mode')
═══════════════════════════════════════════════════════════ */
/* LIGHT MODE — Papel vintage, nunca blanco nuclear */
body.light-mode {
  --bg:      #f0ebe0;
  --bg2:     #e8e2d5;
  --surface: #ddd7c8;
  --surface2:#d2cab8;
  --border:  rgba(50,40,20,.12);
  --border2: rgba(50,40,20,.20);
  --text1:   #1a1e30;
  --text2:   #36405c;
  --text3:   #6b7590;
  --accent:  #0a7050;
  --accent2: #4535a0;
  --accent3: #b06020;
  --danger:  #922020;
  color-scheme: light;
}

/* ── Backgrounds ─────────────────────────────────────────── */
body.light-mode,
body.light-mode #app-root,
body.light-mode .screens-wrap { background: transparent; }
/* screens stay transparent — aurora bleeds through, cards add readability */

/* ── Navigation ──────────────────────────────────────────── */
body.light-mode .top-nav {
  background: rgba(240,235,224,.95) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border2) !important;
}
body.light-mode #bottom-nav {
  background: rgba(232,226,213,.97) !important;
  border-top: 1px solid var(--border2) !important;
  backdrop-filter: blur(14px);
}
body.light-mode .bn-item { color: var(--text3) !important; }
body.light-mode .bn-item.active { color: var(--accent) !important; }

/* ── Cards & surfaces ────────────────────────────────────── */
body.light-mode .card,
body.light-mode .home-stat-card,
body.light-mode .debt-card,
body.light-mode .port-card,
body.light-mode .stock-item,
body.light-mode .biz-card,
body.light-mode .life-event-card,
body.light-mode .achievement-card,
body.light-mode .module-card,
body.light-mode .rank-item,
body.light-mode .news-item {
  background: rgba(255,252,245,.88) !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 4px rgba(50,40,20,.07) !important;
}

/* ── Modals ──────────────────────────────────────────────── */
body.light-mode .modal-overlay {
  background: rgba(20,15,10,.45) !important;
}
body.light-mode .modal-box,
body.light-mode .modal,
body.light-mode .duel-box,
body.light-mode .ob-box {
  background: rgba(244,239,228,.99) !important;
  border-color: var(--border2) !important;
}

/* ── Text — force dark on ALL elements ───────────────────── */
body.light-mode *:not(.btn-primary):not(.badge):not(.tag-pill):not(
  .coach-bubble):not(.scenario-banner):not(.xp-pop):not(.money-pop) {
  color: inherit;
}
body.light-mode .h1, body.light-mode .h2, body.light-mode .h3,
body.light-mode h1,  body.light-mode h2,  body.light-mode h3,
body.light-mode .card-title, body.light-mode .module-title,
body.light-mode .stock-name, body.light-mode .biz-name,
body.light-mode .life-name,  body.light-mode .rank-name,
body.light-mode .career-opt-title, body.light-mode .jcb-label,
body.light-mode .form-label, body.light-mode .modal-title,
body.light-mode .step-title,body.light-mode .step-intro,
body.light-mode .lesson-body,body.light-mode .intro-text,
body.light-mode .opt-label { color: var(--text1) !important; }

body.light-mode p, body.light-mode li, body.light-mode span,
body.light-mode div, body.light-mode label, body.light-mode small {
  color: var(--text2);
}

/* ── Inputs ──────────────────────────────────────────────── */
body.light-mode input, body.light-mode textarea, body.light-mode select,
body.light-mode .form-input, body.light-mode .ob-input {
  background: rgba(255,252,245,.95) !important;
  border-color: var(--border2) !important;
  color: var(--text1) !important;
}
body.light-mode input::placeholder { color: var(--text3) !important; }

/* ── Buttons ─────────────────────────────────────────────── */
body.light-mode .btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
}
body.light-mode .btn-secondary {
  background: rgba(50,40,20,.1) !important;
  color: var(--text1) !important;
}
body.light-mode .btn-ghost { color: var(--text2) !important; }
body.light-mode .btn-ghost:hover { background: rgba(50,40,20,.08) !important; }

/* ── Bottom nav items ────────────────────────────────────── */
body.light-mode .nav-label { color: inherit; }

/* ── Module steps (white text on dark needs flip) ─────────── */
body.light-mode .step-card,
body.light-mode .content-step,
body.light-mode .quiz-step {
  background: rgba(255,252,245,.9) !important;
  color: var(--text1) !important;
}
body.light-mode .bullet-item { color: var(--text2) !important; }
body.light-mode .fact-box {
  background: rgba(10,112,80,.08) !important;
  border-color: rgba(10,112,80,.25) !important;
  color: var(--text2) !important;
}

/* ── Score, stats, numbers ───────────────────────────────── */
body.light-mode .stat-value, body.light-mode .big-number,
body.light-mode .patrimony-val, body.light-mode .cash-val {
  color: var(--text1) !important;
}

/* ── Coach bubble ────────────────────────────────────────── */
body.light-mode .coach-bubble {
  background: rgba(244,239,228,.98) !important;
  border-color: rgba(69,53,160,.3) !important;
  box-shadow: 0 8px 28px rgba(50,40,20,.18) !important;
}
body.light-mode .coach-text  { color: var(--text1) !important; }
body.light-mode .coach-label { color: var(--accent2) !important; }
body.light-mode .coach-q-btn {
  background: rgba(50,40,20,.07) !important;
  border-color: rgba(50,40,20,.15) !important;
  color: var(--text1) !important;
}
body.light-mode .coach-q-btn:hover {
  background: rgba(69,53,160,.12) !important;
}

/* ── Scenario & news banners ─────────────────────────────── */
body.light-mode .scenario-banner {
  background: rgba(232,226,213,.97) !important;
  border-top-color: rgba(69,53,160,.4) !important;
  color: var(--text1) !important;
}
body.light-mode .scenario-banner * { color: var(--text1) !important; }
body.light-mode .news-banner {
  background: rgba(232,226,213,.95) !important;
  color: var(--text1) !important;
}

/* ── Job choice buttons ──────────────────────────────────── */
body.light-mode .job-choice-btn {
  background: rgba(50,40,20,.06) !important;
  border-color: rgba(50,40,20,.14) !important;
}
body.light-mode .job-choice-btn:hover {
  background: rgba(69,53,160,.1) !important;
}
body.light-mode .jcb-desc { color: var(--text3) !important; }

/* ── Quiz options ────────────────────────────────────────── */
body.light-mode .quiz-opt {
  background: rgba(255,252,245,.9) !important;
  border-color: var(--border) !important;
  color: var(--text1) !important;
}
body.light-mode .quiz-opt:hover {
  background: rgba(10,112,80,.08) !important;
  border-color: var(--accent) !important;
}

/* ── Career options ──────────────────────────────────────── */
body.light-mode .career-option {
  background: rgba(255,252,245,.85) !important;
  border-color: var(--border) !important;
}
body.light-mode .career-option:hover:not(.locked):not(.current) {
  background: rgba(69,53,160,.08) !important;
}

/* ── Progress bars ───────────────────────────────────────── */
body.light-mode .progress-track {
  background: rgba(50,40,20,.1) !important;
}

/* ── Scrollbars ──────────────────────────────────────────── */
body.light-mode ::-webkit-scrollbar-track { background: var(--bg2); }
body.light-mode ::-webkit-scrollbar-thumb { background: rgba(50,40,20,.2); }

/* ── Money popups ────────────────────────────────────────── */
body.light-mode .money-pop {
  font-weight: 800;
  text-shadow: 0 1px 5px rgba(50,40,20,.3);
}

/* ── FAB ─────────────────────────────────────────────────── */
body.light-mode #finai-fab {
  background: var(--accent) !important;
  box-shadow: 0 4px 18px rgba(10,112,80,.35) !important;
}

/* ── Mute button ─────────────────────────────────────────── */
body.light-mode .mute-btn, body.light-mode #mute-all-btn,
body.light-mode .speed-btn { color: var(--text2) !important; }

/* ── Theme toggle ────────────────────────────────────────── */
#theme-toggle-btn { transition: color .2s; }
body.light-mode #theme-toggle-btn { color: #c08010 !important; }

/* ── Top nav logo & buttons ──────────────────────────────── */
body.light-mode .logo { color: var(--text1) !important; }
body.light-mode .top-nav .btn-ghost { color: var(--text2) !important; }

/* ── HUD overlay ─────────────────────────────────────────── */
body.light-mode .sc-hud {
  background: rgba(240,235,224,.96) !important;
  border-color: var(--border2) !important;
}
body.light-mode .sc-hud-label,
body.light-mode .sc-hud-value,
body.light-mode .sc-hud-time,
body.light-mode .sc-hud-obj  { color: var(--text1) !important; }

/* ── Duel box ────────────────────────────────────────────── */
body.light-mode .duel-opt {
  background: rgba(255,252,245,.9) !important;
  border-color: var(--border) !important;
  color: var(--text1) !important;
}

/* ═══════════════════════════════════════════════════════════
   FINAI FAB — Botón flotante tipo WhatsApp
═══════════════════════════════════════════════════════════ */
#finai-fab {
  position: fixed;
  bottom: 86px;
  right: 16px;
  z-index: 4000;
  display: none; /* shown via JS */
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #5b45e0, #7c3aed);
  border: none;
  border-radius: 28px;
  padding: 10px 16px 10px 12px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(110,86,255,.45),
              0 2px 6px rgba(0,0,0,.2);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1),
              box-shadow .2s ease;
  color: #fff;
}
#finai-fab:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 8px 28px rgba(110,86,255,.55);
}
#finai-fab:active { transform: scale(0.96); }

/* Pulse ring animation */
#finai-fab::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(110,86,255,.6), rgba(124,58,237,.4));
  animation: fab-ring 2.5s ease-in-out infinite;
  z-index: -1;
}
@keyframes fab-ring {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 0;   transform: scale(1.12); }
}

.fab-icon  { font-size: 18px; line-height: 1; }
.fab-label {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .02em;
}

/* ═══════════════════════════════════════════════════════════
   JOB OFFER MODAL
═══════════════════════════════════════════════════════════ */
.job-offer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.job-offer-icon {
  font-size: 40px;
  line-height: 1;
}
.job-offer-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #f0b429;
  background: rgba(240,180,41,.1);
  border: 1px solid rgba(240,180,41,.25);
  border-radius: 20px;
  padding: 4px 10px;
}
.job-choice-btn {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  transition: all .15s;
}
.job-choice-btn:hover {
  background: rgba(110,86,255,.15);
  border-color: rgba(110,86,255,.4);
  transform: translateX(2px);
}
.jcb-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text1);
  margin-bottom: 3px;
}
.jcb-desc {
  font-size: 11px;
  color: var(--text3);
}

/* ═══════════════════════════════════════════════════════════
   CAREER CARDS — 8 niveles con escala visual
═══════════════════════════════════════════════════════════ */
.career-level-bar {
  display: flex;
  gap: 4px;
  margin: 8px 0;
}
.career-level-dot {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background: rgba(255,255,255,.1);
  transition: background .3s;
}
.career-level-dot.filled { background: var(--accent); }
.career-level-dot.current { background: #f0b429; }

/* ═══════════════════════════════════════════════════════════
   CAREER OPTIONS MODAL — 8 niveles escalados
═══════════════════════════════════════════════════════════ */
.career-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  transition: all .15s;
}
.career-option:hover:not(.locked):not(.current) {
  background: rgba(110,86,255,.1);
  border-color: rgba(110,86,255,.35);
  transform: translateX(3px);
}
.career-option.current {
  background: rgba(0,229,160,.07);
  border-color: rgba(0,229,160,.25);
}
.career-option.locked {
  opacity: 0.55;
}
.career-option.next-up {
  border-color: rgba(240,180,41,.3);
  background: rgba(240,180,41,.05);
}
.career-opt-left { flex-shrink: 0; }
.career-opt-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.career-opt-body { flex: 1; min-width: 0; }
.career-opt-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.career-opt-sub  { font-size: 10px; color: var(--text3); margin-bottom: 2px; }
.career-opt-salary { font-size: 11px; font-weight: 700; }
.career-opt-right { flex-shrink: 0; text-align: center; }
.career-next-badge {
  font-size: 9px;
  background: rgba(240,180,41,.2);
  color: #f0b429;
  border: 1px solid rgba(240,180,41,.35);
  border-radius: 10px;
  padding: 2px 7px;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   AMBIENT PARTICLES — Flotadores financieros de fondo
═══════════════════════════════════════════════════════════ */
#ambient-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.38;
  transition: opacity .4s;
}
body.light-mode #ambient-canvas { opacity: 0.18; }

/* ═══════════════════════════════════════════════════════════
   PREMIUM AMBIENT LAYERS — Aurora · Vignette · Scanlines
   100% CSS, pointer-events:none, zero JS impact.
═══════════════════════════════════════════════════════════ */

/* ── 1. Aurora boreal — 4 blobs, toda la app ── */
#aurora-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.aurora-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Blob A — verde-esmeralda · arriba-izquierda · protagonista */
.aurora-blob-a {
  width: 80vw;
  height: 70vw;
  top: -30vw;
  left: -25vw;
  background: radial-gradient(ellipse at 40% 40%,
    rgba(0,229,160,0.18) 0%,
    rgba(0,200,140,0.10) 30%,
    rgba(0,180,120,0.04) 60%,
    transparent 80%);
  filter: blur(70px);
  mix-blend-mode: screen;
  animation: aurora-a 20s ease-in-out infinite alternate;
}

/* Blob B — violeta-índigo · abajo-derecha */
.aurora-blob-b {
  width: 75vw;
  height: 65vw;
  bottom: -25vw;
  right: -20vw;
  background: radial-gradient(ellipse at 60% 60%,
    rgba(139,92,246,0.16) 0%,
    rgba(100,60,220,0.09) 35%,
    rgba(80,40,180,0.04) 60%,
    transparent 80%);
  filter: blur(80px);
  mix-blend-mode: screen;
  animation: aurora-b 25s ease-in-out infinite alternate;
}

/* Blob C — azul-cian · centro-derecha · sutil */
.aurora-blob-c {
  width: 55vw;
  height: 50vw;
  top: 20vh;
  right: -15vw;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(56,189,248,0.10) 0%,
    rgba(14,165,233,0.05) 45%,
    transparent 75%);
  filter: blur(90px);
  mix-blend-mode: screen;
  animation: aurora-c 32s ease-in-out infinite alternate;
}

/* Blob D — verde-lima · centro-izquierda · intermitente */
.aurora-blob-d {
  width: 50vw;
  height: 45vw;
  top: 40vh;
  left: -10vw;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(52,211,153,0.09) 0%,
    rgba(16,185,129,0.04) 50%,
    transparent 75%);
  filter: blur(100px);
  mix-blend-mode: screen;
  animation: aurora-d 28s ease-in-out infinite alternate;
}

@keyframes aurora-a {
  0%   { transform: translate(0,0) scale(1) rotate(0deg);      opacity: 0.75; }
  20%  { transform: translate(5vw,4vw) scale(1.1) rotate(5deg);  opacity: 1; }
  40%  { transform: translate(-3vw,8vw) scale(0.95) rotate(-4deg); opacity: 0.85; }
  60%  { transform: translate(8vw,2vw) scale(1.08) rotate(7deg);   opacity: 0.95; }
  80%  { transform: translate(2vw,10vw) scale(0.98) rotate(-2deg);  opacity: 0.8; }
  100% { transform: translate(6vw,-3vw) scale(1.06) rotate(4deg);  opacity: 0.9; }
}
@keyframes aurora-b {
  0%   { transform: translate(0,0) scale(1) rotate(0deg);       opacity: 0.65; }
  25%  { transform: translate(-6vw,-5vw) scale(1.12) rotate(-6deg); opacity: 0.95; }
  50%  { transform: translate(4vw,-9vw) scale(0.93) rotate(5deg);   opacity: 0.75; }
  75%  { transform: translate(-8vw,-2vw) scale(1.07) rotate(-4deg); opacity: 0.9; }
  100% { transform: translate(-5vw,3vw) scale(1.04) rotate(-7deg);  opacity: 1; }
}
@keyframes aurora-c {
  0%   { transform: translate(0,0) scale(1);       opacity: 0.5; }
  30%  { transform: translate(-4vw,6vw) scale(1.15); opacity: 0.85; }
  60%  { transform: translate(5vw,-4vw) scale(0.9);  opacity: 0.6; }
  100% { transform: translate(-2vw,8vw) scale(1.1);  opacity: 0.75; }
}
@keyframes aurora-d {
  0%   { transform: translate(0,0) scale(1);        opacity: 0.4; }
  35%  { transform: translate(7vw,-3vw) scale(1.2);  opacity: 0.7; }
  70%  { transform: translate(-5vw,5vw) scale(0.88); opacity: 0.5; }
  100% { transform: translate(3vw,-6vw) scale(1.05); opacity: 0.65; }
}

/* ── 2. Scanlines: líneas horizontales 1px ultra sutiles ── */
#scanlines-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.018) 3px,
    rgba(0,0,0,0.018) 4px
  );
  animation: scanlines-drift 18s linear infinite;
}
@keyframes scanlines-drift {
  0%   { background-position: 0 0; }
  100% { background-position: 0 80px; }
}

/* ── 3. Viñeta: oscurece los bordes, foco en el centro ── */
#vignette-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse 80% 80% at 50% 50%,
    transparent 55%,
    rgba(0,0,0,0.22) 100%
  );
  animation: vignette-breathe 8s ease-in-out infinite;
}
@keyframes vignette-breathe {
  0%,100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* Light mode: reducir opacidades */
body.light-mode .aurora-blob-a { background: radial-gradient(ellipse at 40% 40%, rgba(0,130,80,0.07) 0%, transparent 70%); mix-blend-mode: multiply; }
body.light-mode .aurora-blob-b { background: radial-gradient(ellipse at 60% 60%, rgba(80,40,180,0.05) 0%, transparent 70%); mix-blend-mode: multiply; }
body.light-mode .aurora-blob-c { background: radial-gradient(ellipse at 50% 50%, rgba(0,120,200,0.05) 0%, transparent 75%); mix-blend-mode: multiply; }
body.light-mode .aurora-blob-d { background: radial-gradient(ellipse at 50% 50%, rgba(0,150,100,0.04) 0%, transparent 75%); mix-blend-mode: multiply; }
body.light-mode #scanlines-layer { opacity: 0.3; }
body.light-mode #vignette-layer  { opacity: 0.3; }

/* All screens sit above the canvas */
#app-root > *,
.top-nav,
.money-pop, .xp-pop {
  position: relative;
  z-index: 1;
}
/* .screen, #bottom-nav, #finai-fab, .coach-bubble, .modal-overlay usan position propia */

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — Fixes adicionales
═══════════════════════════════════════════════════════════ */

/* Coach bubble en light mode */
body.light-mode .coach-bubble {
  background: linear-gradient(135deg, rgba(245,240,232,.98), rgba(240,234,225,.98));
  border-color: rgba(13,122,88,.25);
  box-shadow: 0 8px 32px rgba(60,50,30,.12);
  color: var(--text1);
}
body.light-mode .coach-bubble-text { color: var(--text2); }
body.light-mode .coach-bubble-ask  {
  background: rgba(13,122,88,.1);
  color: var(--accent);
  border-color: rgba(13,122,88,.2);
}

/* Modal boxes en light mode */
body.light-mode .modal-box {
  background: #faf6f0;
  border-color: rgba(60,50,30,.15);
  box-shadow: 0 20px 60px rgba(60,50,30,.15);
}
body.light-mode .modal-overlay {
  background: rgba(30,25,20,.5) !important;
}

/* Cards de módulo */
body.light-mode .mod-card {
  background: rgba(255,252,246,.9);
  border-color: rgba(60,50,30,.1);
}
body.light-mode .mod-card:hover {
  border-color: rgba(13,122,88,.3);
  box-shadow: 0 4px 20px rgba(60,50,30,.1);
}
body.light-mode .mod-title { color: var(--text1); }
body.light-mode .mod-desc  { color: var(--text2); }
body.light-mode .mod-tag   { opacity: .85; }

/* Stat cards en home */
body.light-mode .stat-card,
body.light-mode .home-stat {
  background: rgba(255,252,246,.9);
  border-color: rgba(60,50,30,.1);
}
body.light-mode .stat-val   { color: var(--text1); }
body.light-mode .stat-label { color: var(--text3); }

/* Nav items */
body.light-mode .nav-item        { color: var(--text3); }
body.light-mode .nav-item.active { color: var(--accent); }

/* Botones secundarios */
body.light-mode .btn-sec {
  background: rgba(60,50,30,.07);
  color: var(--text1);
  border: 1px solid rgba(60,50,30,.15);
}
body.light-mode .btn-sec:hover {
  background: rgba(60,50,30,.12);
}

/* Step content en módulos */
body.light-mode .step-intro    { color: var(--text2); }
body.light-mode .step-bullet   { color: var(--text2); }
body.light-mode .step-fact-box {
  background: rgba(13,122,88,.07);
  border-color: rgba(13,122,88,.2);
  color: var(--text2);
}

/* Quiz options */
body.light-mode .quiz-opt {
  background: rgba(255,252,246,.9);
  border-color: rgba(60,50,30,.12);
  color: var(--text1);
}
body.light-mode .quiz-opt:hover {
  border-color: rgba(13,122,88,.4);
  background: rgba(13,122,88,.05);
}

/* Score / XP chips */
body.light-mode .xp-chip {
  background: rgba(13,122,88,.1);
  color: var(--accent);
}

/* Ticker en home */
body.light-mode .ticker-item { color: var(--text2); }
body.light-mode .ticker-up   { color: #0a7050; }
body.light-mode .ticker-down { color: var(--danger); }

/* Profit/loss colors */
body.light-mode .txt-up    { color: #0a7050 !important; }
body.light-mode .txt-down  { color: #922020 !important; }

/* Section headers */
body.light-mode .sec-title,
body.light-mode .sec-head,
body.light-mode .h1,
body.light-mode .h2,
body.light-mode .h3 { color: var(--text1); }
body.light-mode .text-muted { color: var(--text3) !important; }

/* Debt tracker */
body.light-mode .debt-card  {
  background: rgba(255,252,246,.9);
  border-color: rgba(60,50,30,.1);
}
body.light-mode .debt-name  { color: var(--text1); }
body.light-mode .debt-rate  { color: var(--danger); }

/* Portfolio table */
body.light-mode .port-row   { border-color: rgba(60,50,30,.07); }
body.light-mode .port-name  { color: var(--text1); }
body.light-mode .port-price { color: var(--text2); }

/* Achievements */
body.light-mode .ach-card {
  background: rgba(255,252,246,.9);
  border-color: rgba(60,50,30,.1);
}
body.light-mode .ach-card.locked { opacity: .5; filter: grayscale(.6); }

/* Coach CTA button */
body.light-mode .coach-cta-btn {
  background: rgba(13,122,88,.1);
  border-color: rgba(13,122,88,.25);
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════
   AMBIENT FINANCIAL ANIMATION — burbujas flotantes suaves
═══════════════════════════════════════════════════════════ */
#fin-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.fin-bubble {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: finFloat linear infinite;
  will-change: transform, opacity;
}
@keyframes finFloat {
  0%   { transform: translateY(0) scale(1);      opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: .7; }
  100% { transform: translateY(-105vh) scale(1.1); opacity: 0; }
}
.fin-ticker-float {
  position: absolute;
  font-size: 11px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  opacity: 0;
  letter-spacing: .04em;
  pointer-events: none;
  animation: finTickerFloat linear infinite;
  will-change: transform, opacity;
}
@keyframes finTickerFloat {
  0%   { transform: translateY(20px); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: .6; }
  100% { transform: translateY(-80px); opacity: 0; }
}
/* Dimmed in light mode */
body.light-mode #fin-ambient { opacity: .45; }

/* ══════════════════════════════════════════════════
   FIXES — scroll, FAB, coach, responsive
══════════════════════════════════════════════════ */

/* Scrollbar visible en pantalla activa */
.screen.active {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.screen.active::-webkit-scrollbar { width: 5px; }
.screen.active::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18);
  border-radius: 10px;
}

/* FAB FinAI — círculo tipo WhatsApp */
#finai-fab {
  position: fixed !important;
  bottom: 86px !important;
  right: 16px !important;
  left: auto !important;
  top: auto !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  gap: 0 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  background: #5b21b6 !important;
  box-shadow: 0 4px 20px rgba(91,33,182,.55), 0 2px 8px rgba(0,0,0,.3) !important;
  z-index: 4000 !important;
  transition: bottom .3s cubic-bezier(.4,0,.2,1), transform .2s, box-shadow .2s !important;
  animation: fab-idle 3s ease-in-out infinite !important;
}
#finai-fab:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 6px 28px rgba(91,33,182,.7), 0 2px 8px rgba(0,0,0,.3) !important;
  animation: none !important;
}
#finai-fab:active { transform: scale(0.93) !important; }
@keyframes fab-idle {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 4px 20px rgba(91,33,182,.55), 0 2px 8px rgba(0,0,0,.3); }
  50%       { transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 28px rgba(91,33,182,.7), 0 2px 8px rgba(0,0,0,.3); }
}
/* Subir FAB cuando el banner de escenario está activo */
body.scenario-active #finai-fab {
  bottom: 136px !important;
}
#finai-fab::before { display: none !important; }
#finai-fab .fab-label { display: none !important; }
#finai-fab .fab-icon {
  font-size: 24px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Coach bubble — posición correcta */
.coach-bubble {
  position: fixed !important;
  bottom: 86px !important;
  left: auto !important;
  right: 76px !important;
  width: 260px !important;
  max-width: calc(100vw - 100px) !important;
  z-index: 3800 !important;
}

/* Donut de cartera — oculto hasta que haya posiciones */
#donut-wrap { display: none; }

/* Top-nav responsive */
@media (max-width: 480px) {
  #game-speed-btn, #music-control { display: none !important; }
  #mute-all-btn { display: flex !important; }
  .logo { font-size: 16px !important; }
}

/* ── Escenarios: modal más sutil ── */
#m-scenarios.modal-overlay {
  background: rgba(0,0,0,.55) !important;
  backdrop-filter: blur(6px);
}
#m-scenarios .modal-box {
  animation: scModalIn .28s cubic-bezier(.4,0,.2,1);
}
@keyframes scModalIn {
  from { opacity:0; transform: translateY(16px) scale(.97); }
  to   { opacity:1; transform: none; }
}

/* ── HUD escenario: botón minimizar ── */
.sc-hud-toggle {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.6);
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s;
  line-height: 1;
}
.sc-hud-toggle:hover { background: rgba(255,255,255,.15); }

/* HUD colapsado: solo muestra icono + % + botones */
.scenario-banner.sc-collapsed {
  padding: 7px 14px !important;
}
.scenario-banner.sc-collapsed .sc-hud-center,
.scenario-banner.sc-collapsed .sc-hud-obj {
  display: none;
}
.scenario-banner.sc-collapsed .sc-hud-name {
  font-size: 11px;
}

/* ── Shadow Investors en el ranking ── */
.rank-row.shadow-investor {
  border-left: 2px solid rgba(168,85,247,.4);
  background: rgba(168,85,247,.04);
  cursor: help;
}
.rank-row.shadow-investor:hover {
  background: rgba(168,85,247,.08);
}
.shadow-badge {
  display: inline-block;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 20px;
  background: rgba(168,85,247,.15);
  border: 1px solid rgba(168,85,247,.3);
  color: #c4b5fd;
  margin-left: 5px;
  vertical-align: middle;
  white-space: nowrap;
}
/* Bogle-Bot — verde */
.rank-row.shadow-investor:has([title*="VUSA"]),
.rank-row[title*="índice"] { border-left-color: rgba(0,229,160,.4); }
/* Cripto-Bro — amarillo */
.rank-row[title*="crypto"] { border-left-color: rgba(245,158,11,.4); }

/* ══════════════════════════════════════════════════════════════════
   MISIONES SEMANALES v2
══════════════════════════════════════════════════════════════════ */
.missions-card {
  background: var(--surface2);
  border: 1.5px solid rgba(99,102,241,.3);
  border-radius: 18px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.missions-card-complete {
  border-color: rgba(0,229,160,.45);
  box-shadow: 0 0 18px rgba(0,229,160,.07);
}
.missions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  gap: 10px;
}
.missions-header:hover { background: rgba(255,255,255,.018); }
.missions-header-left  { display: flex; align-items: center; gap: 10px; }
.missions-title-icon   { font-size: 22px; flex-shrink: 0; }
.missions-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--text1);
  margin-bottom: 2px;
}
.missions-subtitle { font-size: 11px; color: var(--text3); }
.missions-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.missions-xp-badge {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  transition: background .3s, color .3s;
}
.missions-chevron { font-size: 14px; color: var(--text3); }
.missions-body {
  border-top: 1px solid var(--border);
  padding: 10px 14px 6px;
  animation: msFadeIn .2s ease;
}
@keyframes msFadeIn {
  from { opacity:0; transform:translateY(-5px); }
  to   { opacity:1; transform:translateY(0);    }
}

/* ── Filas de misión ─────────────────────────────────────────── */
.mission-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.mission-row:last-of-type { border-bottom: none; }
.mission-done { opacity: .68; }
.mission-icon-wrap {
  width: 36px; height: 36px;
  flex-shrink: 0;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  transition: background .3s, border-color .3s;
}
.mission-icon-done {
  background: rgba(0,229,160,.12);
  border-color: rgba(0,229,160,.35);
}
.mission-content   { flex: 1; min-width: 0; }
.mission-top-row   { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; margin-bottom: 2px; }
.mission-title     { font-weight: 700; font-size: 13px; color: var(--text1); }
.mission-xp        { font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.mission-desc      { font-size: 11px; color: var(--text2); margin-bottom: 7px; line-height: 1.4; }
.mission-progress-row { display: flex; align-items: center; gap: 7px; }
.mission-pbar      { flex:1; height:5px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; }
.mission-pbar-fill { height:100%; border-radius:99px; transition:width .5s cubic-bezier(.4,0,.2,1); }
.mission-progress-txt { font-family:'DM Mono',monospace; font-size:10px; color:var(--text3); min-width:24px; text-align:right; }
.mission-diff-badge {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  border: 1px solid; border-radius: 20px;
  padding: 1px 6px; flex-shrink: 0;
}

/* ── Fila bloqueada ──────────────────────────────────────────── */
.missions-locked-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  font-size: 12px;
  color: var(--text3);
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.missions-lock-icon { font-size: 16px; }

/* ── Footer ──────────────────────────────────────────────────── */
.missions-footer { padding: 8px 0 4px; }
.missions-complete-banner {
  text-align: center; font-size: 12px; font-weight: 700;
  color: #00e5a0;
  background: rgba(0,229,160,.08);
  border: 1px solid rgba(0,229,160,.22);
  border-radius: 10px; padding: 8px 12px;
}
.missions-reset-note { text-align: center; font-size: 10px; color: var(--text3); }

/* ── Popup de misión completada ──────────────────────────────── */
#mission-popup {
  position: fixed; top: 72px; left: 50%;
  transform: translateX(-50%);
  z-index: 9999; pointer-events: none;
}
.mp-show { animation: mpIn .45s cubic-bezier(.34,1.56,.64,1) forwards; }
.mp-hide { animation: mpOut .3s ease forwards; }
@keyframes mpIn  {
  from { opacity:0; transform:translateX(-50%) translateY(-18px) scale(.9); }
  to   { opacity:1; transform:translateX(-50%) translateY(0)     scale(1);  }
}
@keyframes mpOut {
  from { opacity:1; transform:translateX(-50%) translateY(0); }
  to   { opacity:0; transform:translateX(-50%) translateY(-12px); }
}
.mp-inner {
  background: linear-gradient(135deg,rgba(20,22,40,.97),rgba(12,14,28,.97));
  border: 1.5px solid rgba(99,102,241,.5);
  border-radius: 20px;
  padding: 14px 22px 12px;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; min-width: 200px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.mp-eyebrow { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:.12em; color:#818cf8; text-transform:uppercase; }
.mp-icon    { font-size: 32px; }
.mp-title   { font-family:'Syne',sans-serif; font-weight:800; font-size:15px; color:var(--text1); text-align:center; }
.mp-xp      { font-family:'DM Mono',monospace; font-size:14px; font-weight:700; color:#00e5a0; }

/* ══════════════════════════════════════════════════════════════════
   ACCIÓN DIARIA (DCA CARD)
══════════════════════════════════════════════════════════════════ */
.dca-card {
  background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(0,229,160,.06));
  border: 1.5px solid rgba(99,102,241,.35);
  border-radius: 16px;
  padding: 16px;
}
.dca-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.dca-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #818cf8;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.dca-streak-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
  background: rgba(255,255,255,.06);
  border-radius: 20px;
  padding: 3px 10px;
}
.dca-q-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--text1);
  margin-bottom: 12px;
  line-height: 1.45;
}
.dca-q-text {
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 10px;
  line-height: 1.5;
}
.dca-opts { display: flex; flex-direction: column; gap: 7px; }
.dca-opt {
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text1);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.dca-opt:hover:not([disabled]) {
  background: rgba(99,102,241,.15);
  border-color: rgba(99,102,241,.4);
}
.dca-opt.correct {
  background: rgba(0,229,160,.15);
  border-color: rgba(0,229,160,.5);
  color: #00e5a0;
}
.dca-opt.wrong {
  background: rgba(255,75,92,.1);
  border-color: rgba(255,75,92,.4);
  color: #ff4b5c;
}
.dca-done-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
}
.dca-done-icon  { font-size: 28px; }
.dca-done-title { font-weight: 700; font-size: 14px; color: #00e5a0; }
.dca-done-sub   { font-size: 12px; color: var(--text3); }

/* ══════════════════════════════════════════════════════════════════
   MISIONES SEMANALES
══════════════════════════════════════════════════════════════════ */
.missions-card {
  background: var(--surface2);
  border: 1.5px solid rgba(99,102,241,.3);
  border-radius: 18px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.missions-card-complete {
  border-color: rgba(0,229,160,.45);
  box-shadow: 0 0 18px rgba(0,229,160,.07);
}
.missions-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; cursor: pointer; user-select: none; gap: 10px;
}
.missions-header:hover { background: rgba(255,255,255,.018); }
.missions-header-left  { display: flex; align-items: center; gap: 10px; }
.missions-title-icon   { font-size: 22px; flex-shrink: 0; }
.missions-title { font-family:'Syne',sans-serif; font-weight:700; font-size:14px; color:var(--text1); margin-bottom:2px; }
.missions-subtitle { font-size: 11px; color: var(--text3); }
.missions-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.missions-xp-badge { font-family:'DM Mono',monospace; font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; transition:background .3s,color .3s; }
.missions-chevron { font-size:14px; color:var(--text3); }
.missions-body { border-top:1px solid var(--border); padding:10px 14px 6px; animation:msFadeIn .2s ease; }
@keyframes msFadeIn { from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:translateY(0)} }

.mission-row { display:flex; align-items:flex-start; gap:11px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.04); }
.mission-row:last-of-type { border-bottom:none; }
.mission-done { opacity:.68; }
.mission-icon-wrap { width:36px;height:36px;flex-shrink:0;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;transition:background .3s,border-color .3s; }
.mission-icon-done { background:rgba(0,229,160,.12);border-color:rgba(0,229,160,.35); }
.mission-content { flex:1;min-width:0; }
.mission-top-row { display:flex;justify-content:space-between;align-items:flex-start;gap:6px;margin-bottom:2px; }
.mission-title { font-weight:700;font-size:13px;color:var(--text1); }
.mission-xp { font-family:'DM Mono',monospace;font-size:11px;font-weight:700;flex-shrink:0; }
.mission-desc { font-size:11px;color:var(--text2);margin-bottom:7px;line-height:1.4; }
.mission-progress-row { display:flex;align-items:center;gap:7px; }
.mission-pbar { flex:1;height:5px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden; }
.mission-pbar-fill { height:100%;border-radius:99px;transition:width .5s cubic-bezier(.4,0,.2,1); }
.mission-progress-txt { font-family:'DM Mono',monospace;font-size:10px;color:var(--text3);min-width:24px;text-align:right; }
.mission-diff-badge { font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border:1px solid;border-radius:20px;padding:1px 6px;flex-shrink:0; }

.missions-locked-row { display:flex;align-items:center;gap:8px;padding:10px 4px;font-size:12px;color:var(--text3);border-top:1px solid var(--border);margin-top:4px; }
.missions-lock-icon { font-size:16px; }
.missions-footer { padding:8px 0 4px; }
.missions-complete-banner { text-align:center;font-size:12px;font-weight:700;color:#00e5a0;background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.22);border-radius:10px;padding:8px 12px; }
.missions-reset-note { text-align:center;font-size:10px;color:var(--text3); }

#mission-popup { position:fixed;top:72px;left:50%;transform:translateX(-50%);z-index:9999;pointer-events:none; }
.mp-show { animation:mpIn .45s cubic-bezier(.34,1.56,.64,1) forwards; }
.mp-hide { animation:mpOut .3s ease forwards; }
@keyframes mpIn  { from{opacity:0;transform:translateX(-50%) translateY(-18px) scale(.9)} to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} }
@keyframes mpOut { from{opacity:1;transform:translateX(-50%) translateY(0)} to{opacity:0;transform:translateX(-50%) translateY(-12px)} }
.mp-inner { background:linear-gradient(135deg,rgba(20,22,40,.97),rgba(12,14,28,.97));border:1.5px solid rgba(99,102,241,.5);border-radius:20px;padding:14px 22px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:200px;box-shadow:0 8px 32px rgba(0,0,0,.5); }
.mp-eyebrow { font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.12em;color:#818cf8;text-transform:uppercase; }
.mp-icon  { font-size:32px; }
.mp-title { font-family:'Syne',sans-serif;font-weight:800;font-size:15px;color:var(--text1);text-align:center; }
.mp-xp    { font-family:'DM Mono',monospace;font-size:14px;font-weight:700;color:#00e5a0; }

/* ══════════════════════════════════════════════════════════════════
   COMPARADOR DE ESTILOS DE VIDA
══════════════════════════════════════════════════════════════════ */
.lifestyle-inner { padding:16px 16px 100px;max-width:600px;margin:0 auto; }
.lsc-intro { text-align:center;margin-bottom:20px; }
.lsc-intro-title { font-family:'Syne',sans-serif;font-weight:800;font-size:20px;color:var(--text1);margin-bottom:6px; }
.lsc-intro-sub { font-size:13px;color:var(--text2);line-height:1.5; }
.lsc-loading { color:var(--text3);font-size:12px;text-align:center;padding:20px; }

.lsc-summary { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px; }
.lsc-card { background:var(--surface2);border:1.5px solid var(--border);border-radius:14px;padding:14px 10px;text-align:center;transition:border-color .2s,transform .15s; }
.lsc-card:hover { transform:translateY(-2px); }
.lsc-card-you  { border-color:rgba(99,102,241,.35); }
.lsc-card-con  { border-color:rgba(255,107,107,.35); }
.lsc-card-fire { border-color:rgba(240,180,41,.35); }
.lsc-card-emoji { font-size:24px;margin-bottom:4px; }
.lsc-card-label { font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.08em;color:var(--text3);text-transform:uppercase;margin-bottom:6px; }
.lsc-card-rate  { font-size:11px;font-weight:700;color:var(--text2);margin-bottom:4px; }
.lsc-card-fire  { font-size:11px;color:var(--text2);margin-bottom:8px;min-height:18px; }
.lsc-card-final { font-family:'Syne',sans-serif;font-weight:800;font-size:18px;line-height:1;margin-bottom:3px; }
.lsc-card-final-lab { font-size:10px;color:var(--text3); }

.lifestyle-table { width:100%;border-collapse:collapse;font-size:12px; }
.lifestyle-table th { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);padding:6px 8px;text-align:right;border-bottom:1px solid var(--border); }
.lifestyle-table th:first-child { text-align:left; }
.lifestyle-table td { padding:9px 8px;border-bottom:1px solid rgba(255,255,255,.04);font-family:'DM Mono',monospace;font-size:12px; }
.lst-year { text-align:left;font-family:var(--font-sans);font-weight:600;color:var(--text2); }
.lst-age  { font-size:10px;color:var(--text3); }

.lsc-whatif-head { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;flex-wrap:wrap;gap:4px; }
.lsc-whatif-row  { display:flex;align-items:center;gap:10px;margin-bottom:14px; }
.lsc-rate-val    { font-family:'DM Mono',monospace;font-size:16px;font-weight:700;color:var(--text1);min-width:38px;text-align:right; }
.lsc-slider-tier { display:flex;align-items:center;gap:8px;border:1.5px solid;border-radius:10px;padding:8px 12px;margin-bottom:12px;font-size:12px; }
.lsc-slider-nums { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.lsc-sn-box  { background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px 8px;text-align:center; }
.lsc-sn-main { border-color:rgba(0,229,160,.3); }
.lsc-sn-val  { font-family:'Syne',sans-serif;font-weight:800;font-size:15px;margin-bottom:3px; }
.lsc-sn-lab  { font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.04em; }

.lsc-decision { border-bottom:1px solid var(--border);padding:14px 0; }
.lsc-decision:last-child { border-bottom:none; }
.lsd-header { display:flex;align-items:center;gap:8px;margin-bottom:10px; }
.lsd-icon   { font-size:20px; }
.lsd-label  { font-family:'Syne',sans-serif;font-weight:700;font-size:14px;color:var(--text1); }
.lsd-profiles { display:flex;flex-direction:column;gap:5px;margin-bottom:8px; }
.lsd-row    { display:flex;align-items:flex-start;gap:8px; }
.lsd-badge  { font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;flex-shrink:0;margin-top:1px; }
.lsd-badge-you  { background:rgba(99,102,241,.18);color:#818cf8; }
.lsd-badge-fire { background:rgba(240,180,41,.18);color:#f0b429; }
.lsd-badge-con  { background:rgba(255,107,107,.18);color:#ff8080; }
.lsd-text   { font-size:12px;color:var(--text2);line-height:1.45; }
.lsd-lesson { font-size:11px;color:var(--text3);background:rgba(255,255,255,.03);border-left:2px solid rgba(99,102,241,.4);padding:6px 10px;border-radius:0 6px 6px 0;line-height:1.5; }

.lsc-lesson-card { display:flex;gap:14px;align-items:flex-start;background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(240,180,41,.06));border:1.5px solid rgba(99,102,241,.25);border-radius:16px;padding:18px 16px; }
.lsc-lesson-icon { font-size:28px;flex-shrink:0; }
.lsc-lesson-text { font-size:13px;color:var(--text2);line-height:1.65; }

/* Lifestyle CTA button on home */
.lifestyle-cta-btn { width:100%;display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(240,180,41,.08));border:1.5px solid rgba(99,102,241,.3);border-radius:16px;padding:14px 16px;cursor:pointer;text-align:left;margin-bottom:16px;transition:border-color .2s,transform .15s; }
.lifestyle-cta-btn:hover { border-color:rgba(99,102,241,.6);transform:translateY(-1px); }
.lifestyle-cta-icons { font-size:22px;flex-shrink:0;letter-spacing:-3px; }
.lifestyle-cta-text  { flex:1; }
.lifestyle-cta-title { font-family:'Syne',sans-serif;font-weight:700;font-size:14px;color:var(--text1);margin-bottom:2px; }
.lifestyle-cta-sub   { font-size:11px;color:var(--text2); }
.lifestyle-cta-arrow { font-size:18px;color:var(--text3);flex-shrink:0; }


/* ══════════════════════════════════════════════════════════════════
   FEATURE: STATS SCREEN (s-stats)
══════════════════════════════════════════════════════════════════ */

.stats-inner {
  padding: 16px;
  padding-bottom: 90px;
  max-width: 600px;
  margin: 0 auto;
}

/* 3×2 summary grid */
.stats-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.stat-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
  transition: border-color .2s;
}
.stat-card:hover { border-color: rgba(99,102,241,.35); }

.stat-card-fire { border-color: rgba(255,107,107,.25); }
.stat-card-fire:hover { border-color: rgba(255,107,107,.5); }

.stat-card-icon { font-size: 20px; margin-bottom: 5px; }
.stat-card-val  {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--text1);
  line-height: 1.1;
  margin-bottom: 4px;
}
.stat-card-lab  { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; }

/* Streak vs record bar */
.streak-compare-row    { display: flex; align-items: center; gap: 10px; }
.streak-compare-side   { text-align: center; min-width: 48px; }
.streak-compare-center { flex: 1; }
.streak-compare-right  { text-align: right; }
.sc-val       { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 24px; color: var(--accent); }
.sc-val-gold  { color: var(--gold) !important; }
.sc-lab       { font-size: 10px; color: var(--text3); margin-top: 2px; text-transform: uppercase; }
.sc-vs        { font-size: 10px; color: var(--text3); text-align: center; margin-top: 4px; letter-spacing: .08em; }
.streak-compare-bar {
  background: rgba(255,255,255,.07);
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
}
.streak-compare-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #f0b429);
  border-radius: 99px;
  transition: width .6s ease;
}

/* Chart containers */
.stats-chart-head { margin-bottom: 12px; }
.stats-chart-sub  { font-size: 11px; color: var(--text3); margin-top: 2px; }
.stats-chart-wrap { height: 180px; position: relative; }
.stats-empty-chart {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  font-size: 12px;
  color: var(--text3);
  text-align: center;
  padding: 20px;
}



/* ══════════════════════════════════════════════════════════════════
   FEATURE 10: STATS DASHBOARD — nuevos elementos SVG
══════════════════════════════════════════════════════════════════ */

/* Módulos progress */
.st-mods-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.st-mods-bar-bg {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,.06);
  border-radius: 99px;
  overflow: hidden;
}
.st-mods-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #a855f7);
  border-radius: 99px;
  transition: width .6s ease;
}
.st-mods-pct {
  font-size: 13px;
  font-weight: 700;
  color: #a855f7;
  min-width: 36px;
  text-align: right;
}
.st-mods-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.st-mod-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  transition: background .2s;
}
.st-mod-dot.done {
  background: rgba(99,102,241,.5);
  border-color: #6366f1;
}

/* SVG bar / line chart wrappers */
.st-svg-wrap {
  width: 100%;
  overflow: hidden;
}

/* Heatmap */
.st-heatmap-outer {
  width: 100%;
  overflow-x: auto;
}
.st-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  margin-top: 6px;
}
.st-hm-sq {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* Comparativa card */
.st-cmp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.st-cmp-row:last-child { border-bottom: none; }
.st-cmp-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.st-cmp-icon { font-size: 18px; }
.st-cmp-label { font-size: 13px; font-weight: 600; color: var(--text1); }
.st-cmp-avg   { font-size: 10px; color: var(--text3); margin-top: 1px; }
.st-cmp-right { text-align: right; min-width: 90px; }
.st-cmp-val   { font-size: 13px; font-weight: 700; }
.st-cmp-top   { font-size: 10px; font-weight: 700; margin-top: 1px; }
.st-cmp-bar-bg {
  height: 4px;
  background: rgba(255,255,255,.06);
  border-radius: 99px;
  margin-top: 4px;
  overflow: hidden;
}
.st-cmp-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .5s ease;
}

/* ══════════════════════════════════════════════════════════════════
   FEATURE: BREAKING NEWS MODAL (m-breaking-news)
══════════════════════════════════════════════════════════════════ */

#m-breaking-news.active { display: flex; }

.bn-modal { animation: slideUpModal .4s cubic-bezier(.34,1.56,.64,1); }

/* Top bar rojo tipo "en directo" */
.bn-top-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #b91c1c;
  padding: 10px 16px;
}
.bn-live-badge {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .06em;
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.45} }
.bn-source {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.8);
}

/* Icono grande */
.bn-icon-wrap { text-align: center; margin-bottom: 10px; }

/* Titular */
.bn-headline {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: var(--text1);
  line-height: 1.35;
  margin-bottom: 10px;
}
.bn-body-text {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.6;
  margin-bottom: 14px;
}

/* Impacto meta row */
.bn-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.bn-meta-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
}
.bn-meta-lab { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.bn-meta-val { font-family: 'DM Mono', monospace; font-size: 15px; font-weight: 700; color: var(--text1); }

/* Dirección */
.bn-direction {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 6px;
}
.bn-dir-up   { color: #00e5a0; background: rgba(0,229,160,.10); }
.bn-dir-down { color: #ff6b6b; background: rgba(255,107,107,.10); }
.bn-duration { font-size: 11px; color: var(--text3); margin-bottom: 14px; }

/* FinAI tip dentro del modal */
.bn-finai-wrap {
  background: rgba(99,102,241,.07);
  border: 1.5px solid rgba(99,102,241,.25);
  border-radius: 12px;
  overflow: hidden;
}
.bn-finai-header {
  background: rgba(99,102,241,.12);
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  color: #818cf8;
  letter-spacing: .04em;
}
.bn-finai-tip {
  padding: 12px 14px;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.65;
}


/* FinAI floating alert (reutilizable, también para noticias) */
.finai-float-alert {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 420px;
  background: rgba(6,8,16,.97);
  border: 1.5px solid rgba(99,102,241,.45);
  border-radius: 16px;
  padding: 14px 16px;
  z-index: 9100;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
}
.ffa-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.ffa-avatar { font-size: 18px; }
.ffa-name   { font-family: 'Syne',sans-serif; font-weight: 700; font-size: 13px; color: var(--text1); flex:1; }
.ffa-badge  { font-size: 10px; color: #818cf8; background: rgba(99,102,241,.15); padding: 2px 8px; border-radius: 20px; font-weight: 700; }
.ffa-close  { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 14px; padding: 0; }
.ffa-body   { font-size: 12px; color: var(--text2); line-height: 1.65; }

/* ══════════════════════════════════════════════════════════════════
   CAL — Rich Calendar System — estilos v1
══════════════════════════════════════════════════════════════════ */

/* ── pill del reloj mejorada ─────────────────────────────────── */
#game-clock {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  white-space: nowrap;
  transition: opacity .15s;
  user-select: none;
}
#game-clock:hover { opacity: .80; }
.cal-season-icon { font-size: 12px; line-height: 1; }
.cal-date-text   { color: var(--text2); letter-spacing: .02em; }
.cal-year-text   { color: var(--accent); font-weight: 600; }

/* ── card "Próximo evento" ───────────────────────────────────── */
.nec-inner {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.nec-inner.nec-today  { border-color: rgba(0,229,160,.35);  background: rgba(0,229,160,.06);  }
.nec-inner.nec-urgent { border-color: rgba(240,180,41,.35); background: rgba(240,180,41,.06); }
.nec-inner.nec-soon   { border-color: rgba(99,102,241,.30); background: rgba(99,102,241,.05); }
.nec-left { flex: 1; min-width: 0; }
.nec-eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text3); margin-bottom: 3px;
}
.nec-label {
  font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nec-desc { font-size: 11px; color: var(--text2); line-height: 1.45; }
.nec-badge {
  flex-shrink: 0; font-size: 11px; font-weight: 700;
  padding: 4px 11px; border-radius: 100px;
  background: rgba(99,102,241,.18); color: var(--accent2);
  white-space: nowrap;
}
.nec-today  .nec-badge { background: rgba(0,229,160,.18);  color: var(--accent);   }
.nec-urgent .nec-badge { background: rgba(240,180,41,.18); color: #f0b429;          }

/* ── popover de calendario ───────────────────────────────────── */
.cal-popover {
  position: fixed;
  z-index: 9200;
  width: 308px;
  max-width: calc(100vw - 16px);
  background: var(--surface, #0e1120);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,.65);
  opacity: 0;
  transform: translateY(-10px) scale(.96);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.cal-popover--open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.cap-header {
  display: flex; justify-content: space-between;
  align-items: baseline; margin-bottom: 4px;
}
.cap-date   { font-size: 14px; font-weight: 700; color: var(--text); }
.cap-season { font-size: 12px; font-weight: 700; }
.cap-season-desc {
  font-size: 11px; color: var(--text2); line-height: 1.5; margin-bottom: 12px;
}
.cap-divider { height: 1px; background: rgba(255,255,255,.07); margin: 10px 0; }
.cap-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text3); margin-bottom: 8px;
}
.cap-events { display: flex; flex-direction: column; gap: 7px; }
.cpe {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 8px 10px; border-radius: 11px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.cpe-today  { border-color: rgba(0,229,160,.30);  background: rgba(0,229,160,.04);  }
.cpe-urgent { border-color: rgba(240,180,41,.28); background: rgba(240,180,41,.04); }
.cpe-soon   { border-color: rgba(99,102,241,.22); background: rgba(99,102,241,.04); }
.cpe-icon   { font-size: 17px; flex-shrink: 0; line-height: 1; margin-top: 1px; }
.cpe-info   { flex: 1; min-width: 0; }
.cpe-label  { font-size: 12px; font-weight: 600; color: var(--text); }
.cpe-desc   {
  font-size: 10px; color: var(--text2); line-height: 1.4; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cpe-days   { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--text3); align-self: center; }
.cpe-today  .cpe-days { color: var(--accent); }
.cpe-urgent .cpe-days { color: #f0b429; }
.cpe-soon   .cpe-days { color: var(--accent2); }
.cap-season-bonuses { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.csb-tag {
  font-size: 10px; font-weight: 700;
  padding: 3px 9px; border-radius: 100px;
  background: rgba(255,255,255,.07);
}

/* light-mode overrides */
body.light-mode .nec-inner         { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.10); }
body.light-mode .nec-inner.nec-urgent { background: rgba(240,180,41,.08); }
body.light-mode .cal-popover       { background: #fff; border-color: rgba(0,0,0,.12); box-shadow: 0 20px 50px rgba(0,0,0,.18); }
body.light-mode .cpe               { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.07); }
body.light-mode .cap-divider       { background: rgba(0,0,0,.08); }

/* ══════════════════════════════════════════════════════════════════
   MISIONES — blurred locked rows + live countdown — v2
══════════════════════════════════════════════════════════════════ */

/* Wrapper: posición relativa para poder superponer el candado */
.mw-locked-wrap {
  position: relative;
  pointer-events: none;
  user-select: none;
}
/* El contenido interno se desenfoca */
.mw-locked-inner {
  filter: blur(3.5px);
  opacity: 0.30;
  transition: filter .3s, opacity .3s;
}
/* Candado centrado encima, fuera del blur */
.mw-lock-pill {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
}

/* Fila de cuenta atrás */
.mission-next-unlock {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 4px 4px;
  font-size: 11px;
  color: var(--text3);
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.mnu-timer {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent2);
  letter-spacing: .04em;
  min-width: 52px;
  display: inline-block;
}

/* ══════════════════════════════════════════════════════════════════
   LOGROS — línea de recompensa en el popup
══════════════════════════════════════════════════════════════════ */
.ach-popup-reward-line {
  margin-top: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: #f0b429;
  letter-spacing: .03em;
}

/* ══════════════════════════════════════════════════════════════════
   LEDGER — Historial de movimientos
══════════════════════════════════════════════════════════════════ */
.ldg-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 8px;
}
.ldg-summary-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  flex-wrap: wrap;
}
.ldg-sum-in  { color: #00e5a0; font-weight: 700; }
.ldg-sum-out { color: #ef4444; font-weight: 700; }
.ldg-sum-sep { color: var(--text3); }
.ldg-sum-net { font-weight: 700; }
.ldg-filter {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  cursor: pointer;
}

/* ── Streak Shield ────────────────────────────────────────────── */
.shield-pill {
  background: rgba(99,179,237,0.12) !important;
  border: 1px solid rgba(99,179,237,0.35) !important;
  color: #63b3ed !important;
  font-weight: 800;
  animation: shield-pulse 2.5s ease-in-out infinite;
}
@keyframes shield-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(99,179,237,0); }
  50%      { box-shadow: 0 0 0 4px rgba(99,179,237,0.18); }
}

/* ── Camino de Inicio ─────────────────────────────────────────── */
#first-path-widget {
  background: var(--surface);
  border: 1px solid rgba(0,229,160,0.22);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  transition: opacity .3s, transform .3s;
}
.fp-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(0,229,160,0.07) 0%, transparent 60%);
}
.fp-arc { flex-shrink: 0; }
.fp-header-text { flex: 1; min-width: 0; }
.fp-title { font-size: 14px; font-weight: 800; font-family: 'Syne', sans-serif; }
.fp-sub   { font-size: 11px; color: var(--text2); margin-top: 2px; }
.fp-dismiss {
  background: none; border: none; color: var(--text3);
  font-size: 14px; cursor: pointer; padding: 4px; line-height: 1;
  flex-shrink: 0;
}
.fp-steps { padding: 6px 0 4px; }

.fp-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background .15s;
}
.fp-step:last-child { border-bottom: none; }
.fp-step-done   { opacity: 0.55; }
.fp-step-active { background: rgba(0,229,160,0.05); }
.fp-step-locked { opacity: 0.35; }

.fp-step-icon {
  font-size: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.fp-step-icon-locked { filter: grayscale(1); }
.fp-step-check {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,229,160,0.15);
  border: 2px solid #00e5a0;
  color: #00e5a0;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.fp-step-body  { flex: 1; min-width: 0; }
.fp-step-title { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.fp-step-desc  { font-size: 11px; color: var(--text2); line-height: 1.45; margin-bottom: 4px; }
.fp-step-meta  { font-size: 11px; }
.fp-step-reward { font-family: 'DM Mono', monospace; font-weight: 700; font-size: 11px; }

.fp-step-cta-wrap { display: flex; align-items: center; flex-shrink: 0; margin-top: 2px; }
.fp-step-cta {
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--accent);
  color: #000;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s, transform .1s;
}
.fp-step-cta:active { transform: scale(0.96); opacity: 0.85; }