@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&display=swap');

@layer reset, base, components, utilities;

/* ── RESET ─────────────────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body { min-height: 100vh; }
  img, svg, video { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; }
  button { cursor: pointer; border: none; background: none; }
  a { text-decoration: none; color: inherit; }
  ul, ol { list-style: none; }
}

/* ── VARIABLES & BASE ─────────────────────────── */
@layer base {
  :root {
    /* Palette — from tailwind.config.ts */
    --bg:        #0a0e14;
    --bg-card:   #11161e;
    --bg-elev:   #171d27;
    --ink:       #e6e8eb;
    --ink-muted: #8a93a1;
    --ink-dim:   #5a6371;
    --green:     #26d782;
    --red:       #ff4757;
    --amber:     #ffb454;
    --blue:      #5b8def;
    --line:      #252b36;
    --line-2:    #353c4a;

    /* Alpha variants */
    --green-dim:    rgba(38,215,130,.10);
    --green-border: rgba(38,215,130,.30);
    --red-dim:      rgba(255,71,87,.10);
    --red-border:   rgba(255,71,87,.30);
    --amber-dim:    rgba(255,180,84,.10);
    --amber-border: rgba(255,180,84,.30);
    --blue-dim:     rgba(91,141,239,.10);
    --blue-border:  rgba(91,141,239,.30);

    /* Typography */
    --font-sans:    'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:    'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
    --font-display: 'Space Grotesk', -apple-system, sans-serif;

    /* Type scale */
    --text-2xs:  0.625rem;
    --text-xs:   0.6875rem;
    --text-sm:   0.75rem;
    --text-base: 0.875rem;
    --text-md:   1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.375rem;
    --text-2xl:  1.75rem;
    --text-3xl:  2.25rem;
    --text-4xl:  3rem;
    --text-5xl:  3.75rem;

    /* Spacing */
    --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
    --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem;  --sp-10: 2.5rem;
    --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem;

    /* Radius */
    --r-sm: 3px; --r-md: 6px; --r-lg: 10px; --r-xl: 16px; --r-full: 9999px;
    /* radius aliases para compatibilidad */
    --radius-sm: var(--r-sm);
    --radius-md: var(--r-md);
    --radius-lg: var(--r-lg);
    --radius-xl: var(--r-xl);

    /* Shadows */
    --shadow-sm: 0 1px 4px rgba(0,0,0,.4);
    --shadow-md: 0 4px 16px rgba(0,0,0,.5);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.6);
    --glow-green: 0 0 20px rgba(38,215,130,.3);
    --glow-blue:  0 0 20px rgba(91,141,239,.3);

    /* Transitions */
    --t-fast: 100ms ease;
    --t-base: 200ms ease;
    --t-slow: 350ms ease;

    /* Layout */
    --ticker-h:  28px;
    --header-h:  56px;
    --max-w:     1200px;
    --module-w:  860px;
  }

  html { font-size: 16px; }

  body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }

  ::-webkit-scrollbar { width: 5px; height: 5px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-full); }
  ::-webkit-scrollbar-thumb:hover { background: var(--ink-dim); }
  * { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }

  ::selection { background: rgba(38,215,130,.25); color: var(--ink); }

  :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: var(--r-sm); }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
    letter-spacing: -.01em;
  }
}

/* ── ANIMATIONS ───────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.85); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
@keyframes priceFlashUp {
  0%   { background: transparent; }
  20%  { background: var(--green-dim); }
  100% { background: transparent; }
}
@keyframes priceFlashDown {
  0%   { background: transparent; }
  20%  { background: var(--red-dim); }
  100% { background: transparent; }
}
@keyframes drawPath {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}
@keyframes radarSweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes equityCurve {
  from { stroke-dashoffset: 2000; opacity: 0; }
  to   { stroke-dashoffset: 0;    opacity: 1; }
}

/* ── COMPONENTS ───────────────────────────────── */
@layer components {
  .card {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    transition: border-color var(--t-base);
  }
  .card-elev {
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
  }

  .btn {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: 8px 16px;
    font-size: var(--text-sm); font-weight: 500; font-family: var(--font-sans);
    border-radius: var(--r-md); border: 1px solid var(--line);
    background: var(--bg-card); color: var(--ink);
    cursor: pointer; white-space: nowrap; text-decoration: none;
    transition: all var(--t-base);
  }
  .btn:hover { background: var(--bg-elev); border-color: var(--line-2); }

  .btn-primary {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: 8px 16px;
    font-size: var(--text-sm); font-weight: 600; font-family: var(--font-sans);
    border-radius: var(--r-md); border: none;
    background: var(--green); color: var(--bg);
    cursor: pointer; white-space: nowrap; text-decoration: none;
    transition: opacity var(--t-base), transform var(--t-base), box-shadow var(--t-base);
  }
  .btn-primary:hover { opacity: .9; transform: translateY(-1px); box-shadow: var(--glow-green); }

  .label {
    display: inline-block;
    font-size: var(--text-xs); font-weight: 500;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink-muted); font-family: var(--font-sans);
  }
  .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

  .input {
    display: block; width: 100%;
    padding: 8px 12px;
    font-family: var(--font-mono); font-size: var(--text-sm);
    color: var(--ink); background: var(--bg);
    border: 1px solid var(--line); border-radius: var(--r-md);
    transition: border-color var(--t-base);
  }
  .input:focus { outline: none; border-color: var(--blue); }

  .badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    font-size: var(--text-xs); font-weight: 500; font-family: var(--font-mono);
    border-radius: var(--r-full); border: 1px solid; letter-spacing: .04em;
  }
  .badge-green { color: var(--green); border-color: var(--green-border); background: var(--green-dim); }
  .badge-red   { color: var(--red);   border-color: var(--red-border);   background: var(--red-dim); }
  .badge-amber { color: var(--amber); border-color: var(--amber-border); background: var(--amber-dim); }
  .badge-blue  { color: var(--blue);  border-color: var(--blue-border);  background: var(--blue-dim); }

  .dot {
    display: inline-block; width: 6px; height: 6px;
    border-radius: var(--r-full); background: currentColor;
    flex-shrink: 0;
  }
  .dot-pulse { animation: pulse 1.5s ease-in-out infinite; }
  .dot-blink { animation: blink 1s step-start infinite; }

  .sep { width: 100%; height: 1px; background: var(--line); }
}

/* ── UTILITIES ────────────────────────────────── */
@layer utilities {
  .text-green  { color: var(--green); }
  .text-red    { color: var(--red); }
  .text-amber  { color: var(--amber); }
  .text-blue   { color: var(--blue); }
  .text-muted  { color: var(--ink-muted); }
  .text-dim    { color: var(--ink-dim); }
  .font-mono   { font-family: var(--font-mono); }
  .font-disp   { font-family: var(--font-display); }
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
  }
}

/* ══ TICKER TAPE ══════════════════════════════════ */
.ticker-tape {
  height: var(--ticker-h);
  background: var(--bg-card);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  position: relative;
  user-select: none;
}
.ticker-tape::before,
.ticker-tape::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2;
  pointer-events: none;
}
.ticker-tape::before { left: 0;  background: linear-gradient(to right, var(--bg-card), transparent); }
.ticker-tape::after  { right: 0; background: linear-gradient(to left,  var(--bg-card), transparent); }

.ticker-content {
  display: flex; align-items: center; height: 100%;
  white-space: nowrap; width: max-content;
  animation: tickerScroll 55s linear infinite;
}
.ticker-tape:hover .ticker-content { animation-play-state: paused; }

.ticker-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 20px;
  font-size: var(--text-xs); font-family: var(--font-mono);
  border-right: 1px solid var(--line); height: 100%;
}
.ticker-sym { font-weight: 500; color: var(--ink-muted); letter-spacing: .04em; }
.ticker-px  { color: var(--ink); font-variant-numeric: tabular-nums; }
.ticker-chg {
  font-size: var(--text-2xs); padding: 1px 5px; border-radius: var(--r-sm);
}
.ticker-chg.up   { color: var(--green); background: var(--green-dim); }
.ticker-chg.down { color: var(--red);   background: var(--red-dim); }

/* ══ SITE HEADER ══════════════════════════════════ */
.site-header {
  height: var(--header-h);
  background: rgba(10,14,20,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
}
.header-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--sp-6); height: 100%;
  display: flex; align-items: center; gap: var(--sp-5);
}

/* Logo */
.logo {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; flex-shrink: 0;
}
.logo-text {
  font-family: var(--font-display);
  font-size: var(--text-lg); font-weight: 700;
  color: var(--ink); letter-spacing: -.02em;
}
.logo-accent { color: var(--green); }

/* Price chips */
.live-prices {
  display: flex; align-items: center; gap: var(--sp-2);
  flex: 1; overflow: hidden;
}
.price-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-family: var(--font-mono); font-size: var(--text-xs);
  white-space: nowrap; cursor: default;
  transition: border-color var(--t-fast);
}
.price-chip:hover { border-color: var(--line-2); }
.pc-sym  { font-weight: 500; color: var(--ink-muted); letter-spacing: .04em; }
.pc-val  {
  color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 500;
  border-radius: var(--r-sm); padding: 0 2px;
  transition: background var(--t-fast);
}
.pc-val.flash-up   { animation: priceFlashUp   .8s ease; }
.pc-val.flash-down { animation: priceFlashDown .8s ease; }
.pc-chg {
  font-size: var(--text-2xs); padding: 1px 5px; border-radius: var(--r-sm);
}
.pc-chg.up   { color: var(--green); background: var(--green-dim); }
.pc-chg.down { color: var(--red);   background: var(--red-dim); }

/* WS status badge */
.ws-status {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--text-xs); font-family: var(--font-mono);
  color: var(--ink-dim);
  padding: 4px 8px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--bg-card);
  transition: all var(--t-base); white-space: nowrap; flex-shrink: 0;
}
.ws-status .dot { color: var(--ink-dim); }
.ws-status.connected { color: var(--green); border-color: var(--green-border); background: var(--green-dim); }
.ws-status.connected .dot { color: var(--green); }
.ws-status.error { color: var(--red); border-color: var(--red-border); background: var(--red-dim); }

/* Header nav */
.header-nav { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.nav-link {
  font-size: var(--text-sm); color: var(--ink-muted);
  padding: 4px 8px; transition: color var(--t-fast);
}
.nav-link:hover { color: var(--ink); }

/* ══ HERO ══════════════════════════════════════════ */
.hero {
  border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.hero-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(38,215,130,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38,215,130,.025) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 0%, transparent 100%);
  pointer-events: none;
}
.hero-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: var(--sp-20) var(--sp-6);
  position: relative; z-index: 1;
}
.hero-eyebrow {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: var(--sp-6);
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--ink-muted); letter-spacing: .05em; text-transform: uppercase;
}
.eyebrow-dot { color: var(--ink-dim); }

.hero-inner h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700; letter-spacing: -.025em; line-height: 1.1;
  margin-bottom: var(--sp-4);
}
.hero-desc {
  font-size: var(--text-lg); color: var(--ink-muted);
  max-width: 600px; line-height: 1.7;
  margin-bottom: var(--sp-8);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ══ PILLARS ══════════════════════════════════════ */
.pillars-section {
  border-bottom: 1px solid var(--line);
  padding: var(--sp-16) var(--sp-6);
}
.pillars-inner { max-width: var(--max-w); margin: 0 auto; }
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.pillar-card {
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-5);
  transition: border-color var(--t-base);
}
.pillar-card:hover { border-color: var(--green-border); }
.pillar-icon { color: var(--green); margin-bottom: var(--sp-3); }
.pillar-value {
  font-family: var(--font-display); font-size: var(--text-3xl);
  font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; margin: var(--sp-1) 0;
}
.pillar-desc { font-size: var(--text-xs); color: var(--ink-muted); }

/* ══ MODULES LIST ═════════════════════════════════ */
.modules-section { padding: var(--sp-16) var(--sp-6); }
.modules-inner { max-width: var(--max-w); margin: 0 auto; }
.modules-section h2 { font-size: var(--text-2xl); margin-bottom: var(--sp-2); }
.section-desc { font-size: var(--text-base); color: var(--ink-muted); margin-bottom: var(--sp-8); }
.modules-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.module-card {
  display: flex; align-items: center; gap: var(--sp-6);
  padding: var(--sp-5);
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none; color: inherit;
  transition: all var(--t-base); cursor: pointer;
}
.module-card:hover { border-color: rgba(38,215,130,.4); background: var(--bg-elev); }
.module-card:hover .mod-arrow { color: var(--green); transform: translateX(3px); }
.mod-num {
  font-family: var(--font-mono); font-size: var(--text-2xl);
  font-weight: 400; color: var(--ink-dim);
  width: 2.5rem; flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.mod-info { flex: 1; min-width: 0; }
.mod-title { font-size: var(--text-base); font-weight: 500; color: var(--ink); margin-bottom: 2px; font-family: var(--font-sans); }
.mod-sub   { font-size: var(--text-sm); color: var(--ink-muted); }
.mod-arrow { color: var(--ink-dim); transition: all var(--t-base); flex-shrink: 0; }

/* ══ DISCLAIMER ═══════════════════════════════════ */
.disclaimer-section {
  border-top: 1px solid var(--line);
  padding: var(--sp-10) var(--sp-6);
}
.disclaimer-inner { max-width: var(--max-w); margin: 0 auto; }
.disclaimer-inner p {
  font-size: var(--text-xs); color: var(--ink-dim);
  line-height: 1.7; max-width: 780px;
}
.disclaimer-inner strong { color: var(--ink-muted); }

/* ══ MODULE PAGES ═════════════════════════════════ */
.mod-topbar {
  height: var(--header-h);
  background: rgba(10,14,20,.9); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
}
.mod-topbar-inner {
  max-width: var(--module-w); margin: 0 auto;
  padding: 0 var(--sp-6); height: 100%;
  display: flex; align-items: center; gap: var(--sp-4);
}
.topbar-home { color: var(--ink-muted); display: flex; align-items: center; transition: color var(--t-fast); }
.topbar-home:hover { color: var(--ink); }
.topbar-div { width: 1px; height: 16px; background: var(--line); }
.topbar-progress {
  display: flex; align-items: center; gap: var(--sp-2); margin-left: auto;
}
.progress-track {
  width: 120px; height: 4px;
  background: var(--line); border-radius: var(--r-full); overflow: hidden;
}
.progress-fill {
  height: 100%; background: var(--green);
  border-radius: var(--r-full); transition: width .4s ease;
}

.mod-page-header { border-bottom: 1px solid var(--line); }
.mod-page-header-inner {
  max-width: var(--module-w); margin: 0 auto;
  padding: var(--sp-12) var(--sp-6);
}
.mod-slug-label {
  font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--green); margin-bottom: var(--sp-3);
}
.mod-page-header-inner h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700; margin-bottom: var(--sp-3); letter-spacing: -.02em;
}
.mod-page-header-inner .mod-subtitle { font-size: var(--text-lg); color: var(--ink-muted); }

.mod-body {
  max-width: var(--module-w); margin: 0 auto;
  padding: var(--sp-12) var(--sp-6);
}
.mod-body p { line-height: 1.75; }
.mod-body p + p { margin-top: var(--sp-4); }
.mod-body strong { color: var(--ink); }
.mod-body em { color: var(--ink-muted); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3); margin: var(--sp-8) 0;
}
.stat-card {
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-4);
}
.stat-value {
  font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: 700; font-variant-numeric: tabular-nums;
  margin-top: var(--sp-1);
}

.mod-body h2 {
  font-size: var(--text-2xl); font-weight: 600;
  margin-top: var(--sp-12); margin-bottom: var(--sp-4);
}

.num-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.num-item { display: flex; gap: var(--sp-3); font-size: var(--text-base); }
.ni-num { font-family: var(--font-mono); color: var(--green); font-size: var(--text-sm); flex-shrink: 0; min-width: 2em; }

.arrow-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.arrow-item { display: flex; gap: var(--sp-3); font-size: var(--text-base); line-height: 1.65; }
.ai-arrow { font-family: var(--font-mono); color: var(--green); flex-shrink: 0; }

.callout {
  padding: var(--sp-5); border-radius: 0 var(--r-lg) var(--r-lg) 0;
  border-left: 2px solid; background: var(--bg-elev);
  font-size: var(--text-sm); line-height: 1.7; color: var(--ink-muted);
}
.callout-blue   { border-color: var(--blue); }
.callout-green  { border-color: var(--green); }
.callout-amber  { border-color: var(--amber); }
.callout strong { color: var(--ink); }

.mod-footer { border-top: 1px solid var(--line); margin-top: var(--sp-12); }
.mod-footer-inner {
  max-width: var(--module-w); margin: 0 auto;
  padding: var(--sp-8) var(--sp-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}

/* ══ INTERACTIVE COMPONENTS ═══════════════════════ */
/* Sliders */
.slider-group { display: flex; flex-direction: column; gap: var(--sp-4); }
.slider-row   { display: flex; flex-direction: column; gap: var(--sp-2); }
.slider-label-row { display: flex; justify-content: space-between; align-items: center; }
.slider-lbl { font-size: var(--text-sm); color: var(--ink-muted); }
.slider-val { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); font-weight: 500; }

input[type="range"] {
  width: 100%; height: 4px;
  -webkit-appearance: none; appearance: none;
  background: var(--line); border-radius: var(--r-full); cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px;
  border-radius: 50%; background: var(--green);
  border: 2px solid var(--bg); box-shadow: 0 0 6px rgba(38,215,130,.4);
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--green); border: 2px solid var(--bg);
  box-shadow: 0 0 6px rgba(38,215,130,.4);
}

/* Result grid */
.result-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3); margin-top: var(--sp-6);
}
.result-box {
  padding: var(--sp-4); background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.result-box .label { margin-bottom: var(--sp-1); }
.result-box .r-val {
  font-family: var(--font-mono); font-size: var(--text-lg);
  font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink);
}

/* Alert */
.alert {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-3); border-radius: var(--r-md);
  font-size: var(--text-sm); border: 1px solid;
}
.alert-green { background: var(--green-dim); border-color: var(--green-border); color: var(--green); }
.alert-red   { background: var(--red-dim);   border-color: var(--red-border);   color: var(--red); }
.alert-icon  { flex-shrink: 0; }

/* Regime detector output */
.regime-result {
  margin-top: var(--sp-6); padding: var(--sp-5);
  border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--line);
}
.regime-name {
  font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: 700; margin-bottom: var(--sp-3);
}
.regime-name.alcista_fuerte,
.regime-name.alcista_debil { color: var(--green); }
.regime-name.rango          { color: var(--amber); }
.regime-name.bajista        { color: var(--red); }
.regime-name.transicion     { color: var(--ink-muted); }

.regime-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.regime-tag {
  padding: 3px 10px; background: var(--bg-elev);
  border: 1px solid var(--line); border-radius: var(--r-full);
  font-size: var(--text-xs); font-family: var(--font-mono); color: var(--ink-muted);
}

/* Strategy cards */
.strategy-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-3); margin-bottom: var(--sp-8); }
.strategy-btn {
  padding: var(--sp-4); text-align: left;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-lg); cursor: pointer; transition: all var(--t-base);
  font-family: var(--font-sans);
}
.strategy-btn:hover { border-color: var(--line-2); background: var(--bg-elev); }
.strategy-btn.active { border-color: rgba(38,215,130,.6); background: var(--bg-elev); }
.strat-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.strat-name { font-weight: 600; font-size: var(--text-base); color: var(--ink); }
.strat-regime-tag {
  font-size: 10px; padding: 2px 7px;
  border-radius: var(--r-full); border: 1px solid; flex-shrink: 0;
}
.strat-regime-tag.alcista   { color: var(--green); border-color: var(--green-border); background: var(--green-dim); }
.strat-regime-tag.bajista   { color: var(--red);   border-color: var(--red-border);   background: var(--red-dim); }
.strat-regime-tag.rango     { color: var(--amber); border-color: var(--amber-border); background: var(--amber-dim); }
.strat-regime-tag.reversion { color: var(--blue);  border-color: var(--blue-border);  background: var(--blue-dim); }
.strat-diff { display: flex; gap: var(--sp-1); font-size: var(--text-xs); color: var(--ink-muted); align-items: center; }

/* Strategy detail */
.detail-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-3); margin: var(--sp-6) 0; }
.detail-box { padding: var(--sp-3); border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line); }
.detail-box .label { margin-bottom: var(--sp-1); }
.detail-box .d-val { font-size: var(--text-sm); color: var(--ink); }

/* Quiz */
.quiz-option {
  width: 100%; text-align: left;
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3); border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--bg);
  font-size: var(--text-sm); font-family: var(--font-sans);
  cursor: pointer; transition: all var(--t-base); color: var(--ink);
}
.quiz-option:hover:not(:disabled) { border-color: var(--line-2); background: var(--bg-elev); }
.quiz-option:disabled { cursor: default; }
.quiz-option.correct { border-color: var(--green-border); background: var(--green-dim); color: var(--green); }
.quiz-option.wrong   { border-color: var(--red-border);   background: var(--red-dim);   color: var(--red); }
.quiz-option.dimmed  { border-color: rgba(37,43,54,.5); background: var(--bg); color: var(--ink-dim); opacity: .6; }
.opt-letter { font-family: var(--font-mono); font-size: var(--text-xs); margin-top: 2px; flex-shrink: 0; }
.opt-icon   { flex-shrink: 0; }

/* TradingView embed */
.tv-container {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-card);
}
.tv-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line);
  gap: var(--sp-3);
}
.tv-sym-select {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--ink); font-family: var(--font-mono); font-size: var(--text-sm);
  padding: 4px 8px; cursor: pointer;
}
.tv-sym-select:focus { outline: none; border-color: var(--blue); }

/* SVG Chart */
.svg-chart-wrap {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.svg-chart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line);
}
.svg-chart-status {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-dim);
}

/* Equity curve chart */
.equity-svg { width: 100%; height: 200px; }

/* ══ RESPONSIVE ═══════════════════════════════════ */
@media (max-width: 900px) {
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .strategy-grid { grid-template-columns: 1fr; }
  .result-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  :root { --header-h: 52px; }
  .live-prices { display: none; }
  .header-nav .nav-link { display: none; }
  .hero-inner, .pillars-section, .modules-section, .disclaimer-section {
    padding-left: var(--sp-4); padding-right: var(--sp-4);
  }
  .mod-body, .mod-topbar-inner, .mod-page-header-inner, .mod-footer-inner { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .progress-track { width: 80px; }
}
@media (max-width: 480px) {
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid   { grid-template-columns: repeat(2, 1fr); }
  .result-grid  { grid-template-columns: repeat(2, 1fr); }
  .mod-num { font-size: var(--text-xl); }
}

/* ═══ PAGE TRANSITIONS ═══════════════════════════════════ */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
body { animation: pageFadeIn 220ms ease both; }
body.page-exit { opacity: 0 !important; transition: opacity 160ms ease !important; animation: none !important; }

/* ═══ TOPBAR — BACK LABEL ════════════════════════════════ */
.topbar-back-lbl {
  font-size: var(--text-xs); font-weight: 500; color: var(--ink-muted);
  margin-left: 5px; font-family: var(--font-sans);
  transition: color var(--t-fast);
}
.topbar-home:hover .topbar-back-lbl { color: var(--ink); }

/* ═══ MODULE FOOTER NAV ══════════════════════════════════ */
.modnav-btn {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 10px 16px; min-width: 160px;
  height: auto;
}
.modnav-info { display: flex; flex-direction: column; gap: 2px; }
.modnav-info-r { text-align: right; }
.modnav-hint {
  font-size: var(--text-2xs); text-transform: uppercase;
  letter-spacing: .07em; font-family: var(--font-mono);
  color: var(--ink-dim); line-height: 1;
}
.modnav-name { font-size: var(--text-xs); font-weight: 500; color: var(--ink); line-height: 1.3; }
.btn-primary .modnav-hint { color: rgba(10,14,20,.55); }
.btn-primary .modnav-name { color: var(--bg); }
.modnav-kbd-hint {
  font-size: var(--text-xs); font-family: var(--font-mono); color: var(--ink-dim);
  padding: 3px 10px; border: 1px solid var(--line); border-radius: var(--r-md);
  white-space: nowrap; flex-shrink: 0;
}

/* ═══ MODULE JUMP PANEL ══════════════════════════════════ */
.modj-panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 290px; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); z-index: 500;
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity var(--t-base), transform var(--t-base);
  overflow: hidden;
}
.modj-panel.modj-open { opacity: 1; pointer-events: all; transform: translateY(0); }
.modj-head {
  padding: var(--sp-2) var(--sp-4); font-family: var(--font-mono);
  font-size: var(--text-2xs); color: var(--ink-dim);
  text-transform: uppercase; letter-spacing: .1em;
  border-bottom: 1px solid var(--line);
}
.modj-list { max-height: 370px; overflow-y: auto; padding: var(--sp-1) 0; }
.modj-item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 7px var(--sp-4); text-decoration: none;
  transition: background var(--t-fast); color: var(--ink-muted);
  font-size: var(--text-xs);
}
.modj-item:hover:not(.modj-locked) { background: var(--bg-elev); color: var(--ink); }
.modj-item.modj-current { background: var(--bg-elev); color: var(--ink); font-weight: 600; }
.modj-item.modj-locked  { opacity: .38; cursor: default; }
.modj-num  { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-dim); width: 28px; flex-shrink: 0; }
.modj-name { flex: 1; }
.modj-tag  {
  font-family: var(--font-mono); font-size: 9px; padding: 1px 5px;
  border-radius: 3px; background: var(--bg-elev); border: 1px solid var(--line);
  color: var(--ink-dim); flex-shrink: 0;
}
.modj-dot  { color: var(--green); font-size: 8px; flex-shrink: 0; }

@media (max-width: 600px) {
  .modnav-btn  { min-width: 110px; padding: 9px 12px; }
  .modnav-kbd-hint { display: none; }
  .modnav-name { font-size: var(--text-2xs); }
}

/* ════ PREMIUM VARIABLES ════════════════════════════════════ */
:root {
  --gold:        #FFB454;
  --gold-deep:   #E8943A;
  --gold-dim:    rgba(255,180,84,.10);
  --gold-border: rgba(255,180,84,.32);
  --gold-glow:   0 0 24px rgba(255,180,84,.35);
}

/* ════ GRADIENT UTILITIES ═══════════════════════════════════ */
.grad-green {
  background: linear-gradient(135deg, #26d782 0%, #5b8def 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.grad-gold {
  background: linear-gradient(135deg, #FFB454 0%, #FF8C42 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ════ MODULE READABILITY (crítico — texto 12px → 15px) ═════ */
.mod-body { --text-sm: 0.9375rem; --text-base: 1rem; }
.mod-body h2 { margin-top: var(--sp-14, 3.5rem); }

/* ════ CTA PULSE ANIMATION ══════════════════════════════════ */
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(38,215,130,.45); }
  60%       { box-shadow: 0 0 0 10px rgba(38,215,130,0); }
}
.cta-pulse { animation: ctaPulse 2.8s ease-in-out infinite; }

/* ════ PROOF BAR ════════════════════════════════════════════ */
.proof-bar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-card);
  padding: var(--sp-6) var(--sp-6);
}
.proof-bar-inner {
  max-width: 960px; margin: 0 auto;
  display: flex; align-items: center;
  justify-content: space-around; gap: var(--sp-4);
  flex-wrap: wrap;
}
.proof-stat { text-align: center; padding: var(--sp-2) var(--sp-3); }
.proof-stat-n {
  font-family: var(--font-display); font-size: var(--text-3xl);
  font-weight: 700; line-height: 1; color: var(--ink);
}
.proof-stat-l {
  font-size: var(--text-xs); color: var(--ink-dim);
  font-family: var(--font-mono); margin-top: 5px;
  text-transform: uppercase; letter-spacing: .05em;
}
.proof-sep { width: 1px; height: 40px; background: var(--line); flex-shrink: 0; }
@media (max-width: 680px) { .proof-sep { display: none; } }

/* ════ SECTION BACKGROUNDS ══════════════════════════════════ */
.sec-alt { background: #0c1018; }
.sec-dark { background: #080b10; }

/* ════ INSTRUCTOR CARD ══════════════════════════════════════ */
.instructor-card {
  max-width: 800px; margin: 0 auto;
  display: flex; gap: var(--sp-8); align-items: flex-start;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: var(--sp-8);
  flex-wrap: wrap;
  transition: border-color var(--t-base);
}
.instructor-card:hover { border-color: var(--line-2); }
.instructor-avatar-wrap {
  width: 96px; height: 96px; flex-shrink: 0;
  border-radius: 50%; border: 2px solid rgba(38,215,130,.35);
  overflow: hidden; background: var(--bg-elev);
  display: flex; align-items: center; justify-content: center;
}
.instructor-info { flex: 1; min-width: 220px; }
.instructor-name  { font-size: var(--text-xl); font-weight: 700; margin-bottom: 2px; }
.instructor-role  { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--green); margin-bottom: var(--sp-4); }
.instructor-bio   { font-size: var(--text-sm); color: var(--ink-muted); line-height: 1.72; margin-bottom: var(--sp-5); }
.instructor-creds { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.instructor-cred  {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); color: var(--ink-muted);
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: 4px 12px;
}
.instructor-cred svg { color: var(--green); flex-shrink: 0; }

/* ════ PRO PLAN GOLD ════════════════════════════════════════ */
.plan-pro { border-color: var(--gold-border) !important; }
.plan-pro .plan-badge-pro {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: #1a0800; font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  padding: 3px 14px; border-radius: var(--r-full); white-space: nowrap;
}
.plan-cta-gold {
  display: block; width: 100%; padding: 11px;
  border-radius: var(--r-md); font-weight: 700; font-size: var(--text-sm);
  text-align: center; text-decoration: none; cursor: pointer;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: #1a0800; border: none;
  transition: all var(--t-base);
}
.plan-cta-gold:hover { opacity: .92; transform: translateY(-1px); box-shadow: var(--gold-glow); }

/* ════ READING TIME BADGE ═══════════════════════════════════ */
.reading-time-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--ink-dim); margin-top: var(--sp-2);
}

/* ════ PRICE PER DAY ════════════════════════════════════════ */
.price-per-day {
  font-size: var(--text-2xs); color: var(--ink-dim);
  font-family: var(--font-mono); margin-top: 4px;
}
.price-per-day strong { color: var(--green); }

/* ════ SOCIAL PROOF TICKER ══════════════════════════════════ */
.social-proof-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: 5px 14px;
  font-size: var(--text-xs); color: var(--ink-muted);
  font-family: var(--font-mono);
}
.social-proof-pill .dot { color: var(--green); }

/* ════ STARTER CTA — ORANGE (purchase action) ══════════════ */
.plan-cta-orange {
  display: block; width: 100%; padding: 11px;
  border-radius: var(--r-md); font-weight: 700; font-size: var(--text-sm);
  text-align: center; text-decoration: none; cursor: pointer;
  background: linear-gradient(135deg, #FF7B42 0%, #FF5225 100%);
  color: #fff; border: none;
  transition: all var(--t-base);
}
.plan-cta-orange:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 0 22px rgba(255,90,40,.42); }

/* ════ FORWHOM responsive ═══════════════════════════════════ */
@media (max-width: 680px) {
  .forwhom-grid { grid-template-columns: 1fr; }
  .instructor-card { padding: var(--sp-5); }
  .proof-bar-inner { gap: var(--sp-3); }
  .proof-stat-n { font-size: var(--text-2xl); }
}

/* ═══ STICKY BOTTOM CTA (landing) ═══════════════════════ */
.sca-sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
  background: rgba(10,14,20,.97); border-top: 1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transform: translateY(100%); transition: transform var(--t-slow);
  padding: 10px var(--sp-6);
}
.sca-sticky-cta.sca-sticky-visible { transform: translateY(0); }
.sca-sticky-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap;
}
.sca-sticky-copy { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.sca-sticky-label {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--amber); background: rgba(255,180,84,.1);
  border: 1px solid rgba(255,180,84,.25); border-radius: var(--r-full);
  padding: 2px 8px; white-space: nowrap;
}
.sca-sticky-text { font-size: var(--text-sm); color: var(--ink-muted); }
.sca-sticky-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.sca-sticky-btn {
  display: inline-flex; align-items: center;
  padding: 8px 20px; background: var(--green); color: var(--bg);
  border-radius: var(--r-md); font-weight: 700; font-size: var(--text-sm);
  text-decoration: none; white-space: nowrap;
  transition: opacity var(--t-base), transform var(--t-base);
}
.sca-sticky-btn:hover { opacity: .9; transform: translateY(-1px); }
.sca-sticky-close {
  background: none; border: none; color: var(--ink-dim);
  font-size: 20px; cursor: pointer; padding: 4px 8px; line-height: 1;
  transition: color var(--t-fast);
}
.sca-sticky-close:hover { color: var(--ink); }

/* ═══ PROGRESS DOTS (curso.html) ════════════════════════ */
.mod-done-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); flex-shrink: 0;
  box-shadow: 0 0 5px rgba(38,215,130,.5);
}

/* ═══ CONTINUE BANNER (curso.html) ══════════════════════ */
.continue-banner {
  background: rgba(38,215,130,.05); border: 1px solid rgba(38,215,130,.2);
  border-radius: var(--r-xl); padding: var(--sp-4) var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: var(--sp-6); flex-wrap: wrap;
}
.continue-banner-icon { color: var(--green); flex-shrink: 0; }
.continue-banner-info { flex: 1; min-width: 160px; }
.continue-banner-label {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--green); text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 3px;
}
.continue-banner-name { font-size: var(--text-sm); font-weight: 600; }

/* ═══ FOR WHOM SECTION (landing) ════════════════════════ */
.forwhom-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
  max-width: 860px; margin: 0 auto;
}
.forwhom-col { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--sp-6); }
.forwhom-col.yes { border-color: rgba(38,215,130,.2); }
.forwhom-col.no  { border-color: rgba(255,71,87,.12); }
.forwhom-header {
  display: flex; align-items: center; gap: var(--sp-2);
  font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--sp-4);
}
.forwhom-item {
  display: flex; gap: var(--sp-2); font-size: var(--text-xs);
  color: var(--ink-muted); margin-bottom: var(--sp-3); line-height: 1.55; align-items: flex-start;
}
.forwhom-check { flex-shrink: 0; font-weight: 700; margin-top: 1px; }
.forwhom-check.y { color: var(--green); }
.forwhom-check.n { color: var(--red); }
@media (max-width: 680px) { .forwhom-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════
   COURSE SIDEBAR (slide-in drawer — todos los módulos)
   ═══════════════════════════════════════════════════════ */
.msb-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.58); backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); z-index: 200;
  animation: msb-fade-in .18s ease;
}
.msb-overlay.open { display: block; }
@keyframes msb-fade-in { from { opacity: 0 } to { opacity: 1 } }

.mod-sidebar {
  position: fixed; top: 0; left: 0;
  width: 292px; max-width: 88vw; height: 100vh;
  background: var(--surface); border-right: 1px solid var(--line);
  z-index: 201;
  transform: translateX(-100%);
  transition: transform .24s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; overflow: hidden;
}
.mod-sidebar.open { transform: translateX(0); }

.msb-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.msb-hdr-title {
  font-weight: 700; font-size: var(--text-sm);
  display: flex; align-items: center; gap: var(--sp-2);
}
.msb-hdr-title span { color: var(--green); }
.msb-close {
  background: none; border: none; color: var(--ink-muted);
  cursor: pointer; font-size: 22px; line-height: 1;
  padding: 0 6px; border-radius: var(--r-sm);
  transition: color var(--t-fast);
}
.msb-close:hover { color: var(--ink); }

.msb-prog-row {
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.msb-prog-label {
  display: flex; justify-content: space-between;
  font-size: var(--text-2xs); font-family: var(--font-mono);
  color: var(--ink-dim); margin-bottom: var(--sp-2);
}
.msb-prog-track {
  height: 4px; background: var(--bg-elev);
  border-radius: var(--r-full); overflow: hidden;
}
.msb-prog-fill {
  height: 100%; background: var(--green);
  border-radius: var(--r-full); transition: width .5s ease;
}

.msb-nav {
  flex: 1; overflow-y: auto; padding: var(--sp-2) 0 var(--sp-8);
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.msb-phase {
  padding: var(--sp-3) var(--sp-5) var(--sp-1);
  font-size: 10px; font-family: var(--font-mono); color: var(--ink-dim);
  text-transform: uppercase; letter-spacing: .09em;
  margin-top: var(--sp-2);
}
.msb-phase:first-child { margin-top: 0; }

.msb-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 9px var(--sp-5); text-decoration: none;
  color: var(--ink-muted); font-size: var(--text-xs); line-height: 1.4;
  transition: background var(--t-fast), color var(--t-fast);
  border-left: 2px solid transparent;
}
.msb-item:hover:not(.msb-locked) { background: var(--bg-elev); color: var(--ink); }
.msb-item.msb-current {
  background: rgba(38,215,130,.07); color: var(--ink);
  border-left-color: var(--green);
  padding-left: calc(var(--sp-5) - 2px);
}
.msb-item.msb-locked { opacity: .3; cursor: default; pointer-events: none; }
.msb-icon { width: 16px; text-align: center; font-size: 11px; flex-shrink: 0; }
.msb-item-name { flex: 1; }

/* Toggle button & module name in topbar */
.msb-toggle {
  background: none; border: none; color: var(--ink-muted); cursor: pointer;
  display: flex; align-items: center; padding: 6px 8px;
  border-radius: var(--r-sm); flex-shrink: 0;
  transition: color var(--t-fast), background var(--t-fast);
}
.msb-toggle:hover { color: var(--ink); background: var(--bg-elev); }

.topbar-mod-name {
  font-size: var(--text-xs); font-weight: 500; color: var(--ink-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
@media (max-width: 540px) { .topbar-mod-name { display: none; } }

/* ── MARK AS COMPLETE ──────────────────────── */
.sca-mark-complete {
  display: flex; justify-content: center;
  padding: var(--sp-10) 0 var(--sp-6);
}
.sca-mc-btn {
  background: var(--green); color: var(--bg);
  border: none; border-radius: var(--r-full);
  padding: 14px 36px; font-size: var(--text-sm); font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  box-shadow: 0 4px 20px rgba(38,215,130,.35);
}
.sca-mc-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(38,215,130,.45); }
.sca-mc-btn:active { transform: translateY(0); }
.sca-mc-done {
  display: flex; align-items: center; gap: 10px;
  color: var(--green); font-size: var(--text-sm); font-weight: 600;
  padding: 14px 28px;
  background: rgba(38,215,130,.08); border: 1px solid rgba(38,215,130,.2);
  border-radius: var(--r-full);
}

/* ── NEXT MODULE PREVIEW ───────────────────── */
.mod-next-preview {
  margin: var(--sp-12) var(--sp-6) var(--sp-4);
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: var(--sp-5) var(--sp-6);
}
.mnp-inner { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.mnp-label {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--ink-dim); text-transform: uppercase; letter-spacing: .08em;
  flex: 0 0 100%; margin-bottom: var(--sp-1);
}
.mnp-name { font-size: var(--text-base); font-weight: 600; flex: 1; min-width: 140px; }
.mnp-btn { flex-shrink: 0; font-size: var(--text-sm); padding: 10px 22px; }
.mnp-locked {
  background: var(--bg-elev); color: var(--amber);
  border: 1px solid rgba(255,180,84,.3); text-decoration: none;
}
.mnp-locked:hover { background: rgba(255,180,84,.08); }

/* ── MOBILE TOUCH IMPROVEMENTS ─────────────── */
@media (max-width: 768px) {
  input[type=range] { height: 44px; cursor: pointer; }
  input[type=range]::-webkit-slider-thumb { width: 26px; height: 26px; }
  input[type=range]::-moz-range-thumb { width: 26px; height: 26px; }
}
@media (max-width: 480px) {
  .calc-grid { grid-template-columns: 1fr; }
  .calc-out  { grid-template-columns: 1fr; }
}