/* V24 Clean — ajustes da camada de componentes posterior à V12 e hero claro. */
    .site-nav,
    .hero {
      --text: #0d131b;
      --muted: #55606f;
      --muted-2: #66717f;
      --surface: #ffffff;
      --bg: #f2f4f7;
      --bg-deep: #e7eaef;
      --line: rgba(12,20,32,.13);
      --line-strong: rgba(12,20,32,.24);
      --line-input: rgba(12,20,32,.46);
      --wash-1: rgba(12,20,32,.035);
      --wash-2: rgba(12,20,32,.055);
      --wash-3: rgba(12,20,32,.085);
      --cyan-ink: #005a9c;
      --lime-ink: #2f7300;
      --coral-ink: #b3111d;
      --amber-ink: #7a4a00;
      --shadow: 0 18px 44px -22px rgba(12,20,32,.3), 0 2px 6px -3px rgba(12,20,32,.1);
      color: var(--text);
    }

    .site-nav {
      border-bottom-color: var(--line);
      background: linear-gradient(to bottom, rgba(255,255,255,.94), rgba(255,255,255,.7) 70%, transparent);
    }

    .hero { background: var(--bg); }
    .hero-media img { filter: saturate(.92) contrast(1.02) brightness(1.02); }
    .hero-media::after {
      background:
        linear-gradient(90deg, rgba(242,244,247,.99) 0%, rgba(242,244,247,.94) 20%, rgba(242,244,247,.72) 43%, rgba(242,244,247,.06) 76%),
        linear-gradient(0deg, rgba(242,244,247,.88) 0, transparent 27%, rgba(242,244,247,.08) 74%, rgba(242,244,247,.45) 100%);
    }
    .hero-scan { opacity: .06; background: repeating-linear-gradient(to bottom, transparent 0, transparent 4px, rgba(12,20,32,.16) 5px); }
    .hero h1 .signal-line { color: var(--lime-ink); }
    .hero-copy { color: #465260; }
    .hero-proof::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 42%, transparent); }
    .hero-telemetry {
      border-color: color-mix(in srgb, var(--cyan-ink) 22%, transparent);
      background: rgba(255,255,255,.78);
      box-shadow: var(--shadow);
    }
    .telemetry-wave i { box-shadow: 0 2px 8px -3px color-mix(in srgb, var(--cyan-ink) 56%, transparent); }
    .market-strip {
      border-top-color: var(--line);
      background: rgba(255,255,255,.84);
      color: var(--text);
    }
    .ticker-up { color: var(--lime-ink); }
    .ticker-down { color: var(--coral-ink); }
    .ticker-local { color: var(--cyan-ink); }

    .theme-switch { background: rgba(12,20,32,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
    .theme-switch button[aria-pressed="true"] { color: var(--on-accent); }

    .personal-ticker .tick-value.up { color: var(--lime-ink); }
    .personal-ticker .tick-value.down { color: var(--coral-ink); }
    .personal-ticker .tick-value.info { color: var(--cyan-ink); }
    .local-badge,
    .operator-tag { color: var(--cyan-ink); }
    .rank-badge { border-color: color-mix(in srgb, var(--lime-ink) 15%, transparent); box-shadow: var(--shadow); }
    .rank-badge-bar,
    .level-hero-bar { background: var(--wash-3); }
    .rank-badge-bar i { background: linear-gradient(90deg, var(--cyan-ink), var(--lime-ink)); box-shadow: var(--ring-cyan); }
    .rank-badge-user { background: color-mix(in srgb, var(--surface) 92%, transparent); }
    .app-topbar { background: color-mix(in srgb, var(--bg) 88%, transparent); }
    .topbar-copy strong .top-greeting-context { color: var(--lime-ink); }
    .app-nav-btn:hover,
    .app-nav-btn.active { background: var(--wash-2); }
    .app-nav-btn.active span:first-child { color: var(--on-accent); }

    .notice-cyan { border-color: color-mix(in srgb, var(--cyan-ink) 17%, transparent); color: var(--cyan-ink); background: color-mix(in srgb, var(--cyan) 6%, transparent); }
    .notice-amber { border-color: color-mix(in srgb, var(--amber-ink) 18%, transparent); color: var(--amber-ink); background: color-mix(in srgb, var(--amber) 6%, transparent); }
    .rhythm-live,
    .result-row.result-total span,
    .result-row.result-total strong { color: var(--lime-ink); }
    .result-row.result-achievement span,
    .result-row.result-achievement strong,
    .recommendation-code,
    .level-strip-help { color: var(--cyan-ink); }
    .result-row.result-total { background: color-mix(in srgb, var(--lime) 7%, transparent); }
    .result-row.result-achievement { border-color: color-mix(in srgb, var(--cyan-ink) 17%, transparent); color: var(--cyan-ink); background: color-mix(in srgb, var(--cyan) 7%, transparent); }
    .stepper .rhythm-step:hover:not(:disabled) { color: var(--lime-ink); border-color: var(--lime-ink); background: color-mix(in srgb, var(--lime) 8%, transparent); }

    .session-stage[data-phase="inhale"] { --stage-tint: var(--lime-ink); --phase-color: var(--lime-ink); }
    .session-stage[data-phase="holdFull"] { --stage-tint: var(--cyan-ink); --phase-color: var(--cyan-ink); }
    .session-stage[data-phase="exhale"] { --stage-tint: var(--coral-ink); --phase-color: var(--coral-ink); }
    .session-stage[data-phase="holdEmpty"] { --stage-tint: var(--amber-ink); --phase-color: var(--amber-ink); }
    .session-stage[data-phase="recovery"] { --stage-tint: var(--cyan-ink); }
    .session-stage::after {
      height: 1px;
      box-shadow: 0 0 28px color-mix(in srgb, var(--cyan-ink) 24%, transparent);
    }
    .session-countdown {
      color: var(--text);
      background: color-mix(in srgb, var(--surface) 94%, transparent);
      backdrop-filter: blur(4px);
    }
    .session-countdown .countdown-kicker { color: var(--muted); }
    .session-countdown .countdown-label { color: var(--text); }
    .session-countdown .countdown-digit { color: var(--lime-ink); }
    .breath-column i { background: var(--wash-1); }
    .breath-column i::after { border-color: var(--wash-3); }
    .session-options-panel { background: color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: var(--shadow); }
    .session-options-title { color: var(--amber-ink); }

    .state-row[data-direction="up"] .state-delta,
    .level-dial-face strong,
    .level-hero-rank { color: var(--cyan-ink); }
    .state-row[data-direction="down"] .state-delta { color: var(--coral-ink); }
    .state-bar::after { background: var(--line-strong); }
    .level-hero { background: radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 46%), var(--surface); }
    .level-dial { background: conic-gradient(var(--cyan-ink) calc(var(--progress, 0) * 1%), var(--wash-3) 0); }
    .level-dial-face { box-shadow: inset 0 0 22px color-mix(in srgb, var(--cyan) 14%, transparent); }

    .toast {
      top: auto;
      bottom: calc(20px + env(safe-area-inset-bottom, 0px));
      pointer-events: none;
      transform: translateY(150%);
    }

    @media (max-width: 820px) {
      .hero-media img { opacity: 1; }
      .hero-media::after {
        background:
          linear-gradient(90deg, rgba(242,244,247,.98) 0%, rgba(242,244,247,.87) 55%, rgba(242,244,247,.48) 100%),
          linear-gradient(0deg, rgba(242,244,247,.88) 0, transparent 38%, rgba(242,244,247,.36) 100%);
      }
    }

    @media (max-width: 1100px) {
      .hero-telemetry.hero-telemetry-inline {
        width: 290px;
        height: 166px;
      }
    }