/* ============================================================
         TOKENS EXTRA PARA EL FUNNEL
      ============================================================ */
      :root {
        --screen-transition: 0.55s cubic-bezier(0.22, 1, 0.36, 1);
        --danger-red: #ff4444;
        --danger-glow: rgba(255, 68, 68, 0.35);
      }

      /* ============================================================
         LAYOUT BASE
      ============================================================ */
      /* La escena WebGL se carga una única vez. En el recorrido normal actúa
         como fondo; en el Acto II pasa a ser la escena interactiva principal. */
      #solar-stage {
        position: fixed;
        inset: 0;
        z-index: 1;
        overflow: hidden;
        pointer-events: none;
        background: transparent;
      }

      #solar-canvas {
        position: absolute;
        inset: 0;
        z-index: 1;
      }

      .solar-fallback {
        position: absolute;
        inset: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 32px;
        box-sizing: border-box;
        text-align: center;
        font-size: 1rem;
        line-height: 1.6;
        color: #b9c4d6;
        background: radial-gradient(circle at 50% 40%, rgba(10, 12, 40, 0.85), rgba(3, 3, 16, 0.92));
      }

      /* Evitamos la doble capa pesada de estrellas CSS fijas en lectura-cosmica,
         dejando que Three.js renderice el starfield 3D interactivo */
      .stars-bg::before,
      .stars-bg::after {
        display: none;
      }

      #solar-labels {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
      }

      body.act2-open #solar-stage {
        z-index: 200;
        pointer-events: auto;
      }

      body.act2-open .screen-container,
      body.act2-open .progress-bar-wrap,
      body.act2-open .progress-steps {
        visibility: hidden;
        pointer-events: none;
      }

      .screen-container {
        position: relative;
        z-index: 2;
        width: 100%;
        min-height: 100dvh;
        overflow: hidden;
      }

      .screen[hidden],
      #act2-container[hidden] {
        display: none;
      }

      .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;
      }

      .skip-link {
        position: absolute;
        top: -9999px;
        left: -9999px;
        z-index: 9999;
        padding: 10px 18px;
        border-radius: var(--r-sm);
        background: var(--gold-light);
        color: #06051a;
        font-weight: 700;
        font-size: 14px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.75);
        text-decoration: none;
      }

      .skip-link:focus-visible {
        position: fixed;
        top: 16px;
        left: 16px;
      }

      .screen {
        position: absolute;
        inset: 0;
        width: 100%;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 20px 16px 0;
        opacity: 0;
        pointer-events: none;
        transform: translateY(30px);
        transition: opacity var(--screen-transition), transform var(--screen-transition);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }

      .screen.active {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        position: relative;
      }

      .screen.exit-up {
        opacity: 0;
        transform: translateY(-40px);
        pointer-events: none;
        position: absolute;
      }

      /* ============================================================
         PROGRESS BAR
      ============================================================ */
      .progress-bar-wrap {
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 100;
        height: 4px;
        background: rgba(212, 175, 55, 0.15);
      }

      .progress-bar-fill {
        width: 0;
        height: 100%;
        background: linear-gradient(90deg, var(--purple), var(--gold-light));
        transition: width 0.5s ease;
        box-shadow: 0 0 12px rgba(254, 240, 138, 0.6);
      }

      .progress-steps {
        position: fixed;
        top: 12px; right: 16px;
        z-index: 100;
        font-family: var(--font-h);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.15em;
        color: var(--gold-light);
        background: rgba(6, 5, 26, 0.85);
        padding: 4px 10px;
        border-radius: 999px;
        border: 1px solid rgba(212, 175, 55, 0.3);
        backdrop-filter: blur(8px);
        transition: opacity 0.3s;
      }

      /* ============================================================
         COMMON SCREEN ELEMENTS & STICKY FOOTER
      ============================================================ */
      .screen-inner {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        min-height: calc(100dvh - 28px);
      }

      .screen-content {
        display: flex;
        flex-direction: column;
        gap: 22px;
        padding-top: 12px;
        padding-bottom: 24px;
      }

      .screen-actions {
        position: sticky;
        bottom: 0;
        margin-top: auto;
        width: 100%;
        padding: 12px 0 calc(14px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(180deg, rgba(6, 5, 26, 0) 0%, rgba(6, 5, 26, 0.92) 28%, rgba(6, 5, 26, 0.98) 100%);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        z-index: 50;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .step-status-msg {
        font-size: 14.5px;
        font-weight: 600;
        line-height: 1.55;
        color: #fca5a5;
        background: rgba(239, 68, 68, 0.16);
        border: 1.5px solid rgba(248, 113, 113, 0.5);
        border-radius: var(--r-sm);
        padding: 12px 16px;
        display: none;
        margin-top: 6px;
        text-align: left;
        animation: error-pop 0.3s ease-out;
      }

      .step-status-msg:not(:empty) {
        display: block;
      }

      @keyframes error-shake {
        0%, 100% { transform: translateX(0); }
        20%, 60% { transform: translateX(-7px); }
        40%, 80% { transform: translateX(7px); }
      }

      @keyframes error-pop {
        from { opacity: 0; transform: translateY(-4px); }
        to { opacity: 1; transform: translateY(0); }
      }

      .has-error {
        animation: error-shake 0.4s ease-in-out !important;
        border-color: rgba(248, 113, 113, 0.85) !important;
        box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.3) !important;
      }

      .screen-eyebrow {
        text-align: center;
        font-family: var(--font-h);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--gold-light);
        margin-bottom: 6px;
      }

      .screen-title {
        font-family: var(--font-h);
        font-size: clamp(26px, 6vw, 36px);
        font-weight: 700;
        text-align: center;
        background: linear-gradient(135deg, #ffffff 0%, var(--gold-light) 40%, var(--gold) 80%, #ca8a04 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        line-height: 1.25;
      }

      .screen-body {
        font-size: 16px;
        color: var(--text-secondary);
        text-align: center;
        line-height: 1.7;
        font-weight: 400;
        max-width: 500px;
        margin: 0 auto;
      }

      /* Forbidden Hook / Warning box */
      .danger-box {
        background: rgba(24, 15, 45, 0.9);
        border: 1.5px solid rgba(248, 113, 113, 0.35);
        border-radius: var(--r-md);
        padding: 18px 20px;
        position: relative;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
      }

      .danger-box-icon {
        font-size: 28px;
        display: block;
        text-align: center;
        margin-bottom: 6px;
        animation: pulse-danger 2.5s ease-in-out infinite;
      }

      @keyframes pulse-danger {
        0%, 100% { filter: drop-shadow(0 0 6px var(--danger-glow)); }
        50% { filter: drop-shadow(0 0 20px var(--danger-glow)); }
      }

      .danger-box-title {
        font-family: var(--font-h);
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #ff8888;
        text-align: center;
        margin-bottom: 8px;
      }

      .danger-box-text {
        font-size: 15px;
        color: var(--text-secondary);
        line-height: 1.7;
        text-align: center;
        font-weight: 400;
      }

      .danger-box-text strong,
      .text-emphasis,
      .text-warning {
        color: #ffffff;
        font-weight: 600;
      }

      /* CTA buttons */
      .btn-cta {
        width: 100%;
        min-height: 54px;
        padding: 15px 24px;
        background: linear-gradient(135deg, var(--purple) 0%, var(--indigo) 60%, #6d28d9 100%);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: var(--r-md);
        color: #ffffff;
        font-family: var(--font-h);
        font-size: 15.5px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        cursor: pointer;
        transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
        box-shadow: 0 4px 20px rgba(124, 58, 237, 0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
      }

      .btn-cta:active { transform: scale(0.98); }

      @media (hover: hover) {
        .btn-cta:hover {
          box-shadow: 0 6px 32px rgba(124, 58, 237, 0.65);
          transform: translateY(-2px);
        }
      }

      .btn-cta.gold-variant {
        background: linear-gradient(135deg, #ca8a04 0%, #eab308 50%, #fef08a 100%);
        color: #06051a;
        border: 1px solid rgba(254, 240, 138, 0.4);
        box-shadow: 0 4px 24px rgba(234, 179, 8, 0.4);
      }

      .btn-back {
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 14px;
        font-family: var(--font-h);
        font-weight: 600;
        letter-spacing: 0.06em;
        cursor: pointer;
        padding: 6px 12px;
        text-align: center;
        transition: color 0.2s;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .btn-back:hover { color: #ffffff; }

      .btn-skip {
        width: 100%;
        min-height: 46px;
        padding: 11px 16px;
        border: 1px solid rgba(200, 195, 224, 0.25);
        border-radius: var(--r-md);
        background: rgba(255, 255, 255, 0.035);
        color: #dedbf0;
        font-family: var(--font-h);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.06em;
        cursor: pointer;
        transition: color 0.2s, border-color 0.2s, background 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
      }

      .btn-skip:hover {
        border-color: rgba(234, 179, 8, 0.4);
        background: rgba(234, 179, 8, 0.08);
        color: #ffffff;
      }

      /* Ornament */
      .ornament {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .ornament::before, .ornament::after {
        content: "";
        flex: 1;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(212,175,55,0.3), transparent);
      }

      .ornament span {
        color: var(--gold);
        font-size: 11px;
        letter-spacing: 0.22em;
        font-family: var(--font-h);
      }

      /* ============================================================
         SCREEN 0 — HERO
      ============================================================ */
      #screen-0 { justify-content: flex-start; min-height: 100dvh; }

      .hero-stars {
        font-size: clamp(36px, 10vw, 64px);
        text-align: center;
        line-height: 1;
        display: block;
        animation: float 6s ease-in-out infinite;
        filter: drop-shadow(0 0 20px rgba(254, 240, 138, 0.6));
        margin-bottom: 4px;
      }

      .hero-title {
        font-family: var(--font-h);
        font-size: clamp(26px, 7.5vw, 44px);
        font-weight: 700;
        text-align: center;
        background: linear-gradient(135deg, #ffffff 0%, var(--gold-light) 40%, var(--gold) 80%, #ca8a04 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        line-height: 1.18;
      }

      .hero-subtitle {
        font-size: clamp(14px, 3.5vw, 16px);
        color: var(--text-secondary);
        text-align: center;
        line-height: 1.65;
        max-width: 440px;
        margin: 0 auto;
        font-weight: 400;
      }

      .hero-teaser {
        background: var(--card);
        border: 1px solid var(--border-strong);
        border-radius: var(--r-md);
        padding: 16px 18px;
        backdrop-filter: blur(12px);
      }

      .hero-teaser-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }

      .hero-teaser-list li {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 14px;
        color: var(--text);
        font-weight: 400;
        line-height: 1.5;
      }

      .hero-teaser-list li span:first-child { font-size: 19px; flex-shrink: 0; }

      .hero-disclaimer {
        font-size: 12px;
        color: var(--text-muted);
        text-align: center;
        font-style: italic;
        margin-top: 4px;
      }

      .identity-card {
        background: rgba(14, 12, 40, 0.96);
        border: 1.5px solid var(--border-strong);
        border-radius: var(--r-md);
        padding: 20px;
        backdrop-filter: blur(14px);
        transition: border-color 0.2s, box-shadow 0.2s;
      }

      .identity-label {
        display: block;
        margin-bottom: 8px;
        color: var(--gold-light);
        font-family: var(--font-h);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .identity-input {
        width: 100%;
        border: 1.5px solid var(--border-strong);
        border-radius: var(--r-sm);
        padding: 14px 16px;
        background: rgba(6, 5, 26, 0.9);
        color: #ffffff;
        font-size: 16px;
        font-family: var(--font-b);
        transition: border-color 0.2s, box-shadow 0.2s;
      }

      .identity-input:focus {
        border-color: var(--gold-light);
        box-shadow: 0 0 0 3px rgba(254, 240, 138, 0.25);
        outline: none;
      }

      .identity-hint { margin-top: 8px; color: var(--text-muted); font-size: 13px; line-height: 1.55; font-weight: 400; }
      .identity-declaration { margin-top: 14px; color: #dedbf0; font-family: var(--font-h); font-size: 13.5px; line-height: 1.65; font-weight: 500; }
      .identity-declaration strong { color: var(--gold-light); }
      .privacy-local { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--card-border); color: var(--text-muted); font-size: 13px; line-height: 1.55; font-weight: 400; }
      .privacy-local strong { color: var(--success); }

      .app-home-link {
        width: fit-content;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        padding: 8px 14px;
        border: 1px solid rgba(212,175,55,0.25);
        border-radius: var(--r-sm);
        background: rgba(212,175,55,0.05);
        color: var(--text-secondary);
        font-family: var(--font-h);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-decoration: none;
        text-transform: uppercase;
        transition: color 0.2s, border-color 0.2s, background 0.2s;
      }

      .app-home-link:hover { border-color: var(--gold-light); color: #ffffff; background: rgba(212,175,55,0.12); }

      /* ============================================================
         ACTO II — CONTROLES Y HUD
      ============================================================ */
      .act2-topbar {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        background: rgba(6,5,26,0.9);
        border-bottom: 1px solid var(--card-border);
        backdrop-filter: blur(12px);
        z-index: 2;
        pointer-events: auto;
        min-height: 64px;
      }

      .act2-topbar-title { flex: 1; min-width: 0; text-align: center; font-size: 13px; font-weight: 600; font-family: var(--font-h); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
      .act2-topbar-date { flex: 0 0 auto; font-size: 11px; color: var(--text-muted); font-family: monospace; }

      .act2-back-btn {
        background: rgba(212,175,55,0.07);
        border: 1px solid rgba(212,175,55,0.2);
        border-radius: var(--r-sm);
        padding: 8px 14px;
        color: var(--gold);
        font-family: var(--font-h);
        font-size: 11px;
        letter-spacing: 0.08em;
        cursor: pointer;
        transition: background 0.2s;
        min-width: 44px;
        min-height: 44px;
      }

      .act2-back-btn:hover { background: rgba(212,175,55,0.14); }

      .act2-labels-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-width: 44px;
        min-height: 44px;
        padding: 8px 12px;
        border: 1px solid rgba(125,211,252,0.26);
        border-radius: var(--r-sm);
        background: rgba(125,211,252,0.055);
        color: #bae6fd;
        font-family: var(--font-h);
        font-size: 10px;
        letter-spacing: 0.06em;
        cursor: pointer;
        transition: background 0.2s, border-color 0.2s, color 0.2s;
      }

      .act2-labels-btn:hover,
      .act2-labels-btn[aria-pressed="true"] {
        border-color: rgba(125,211,252,0.54);
        background: rgba(125,211,252,0.14);
        color: #e0f2fe;
      }

      .act2-labels-icon { font-size: 15px; line-height: 1; }

      .act2-picker-overlay {
        position: absolute;
        bottom: 24px;
        left: 24px;
        width: 380px;
        max-height: calc(100vh - 104px);
        max-height: calc(100dvh - 104px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(212,175,55,0.35) transparent;
        background: rgba(6, 5, 26, 0.86);
        border: 1px solid rgba(212, 175, 55, 0.32);
        border-radius: var(--r-lg);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 18px 60px rgba(0, 0, 0, 0.58), 0 0 35px rgba(212,175,55,0.05);
        z-index: 2;
        pointer-events: auto;
      }

      .act2-sheet-content {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 14px;
      }

      .act2-mobile-toggle {
        display: none;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border: 0;
        border-radius: var(--r-md);
        padding: 12px 14px;
        color: var(--text);
        background: transparent;
        text-align: left;
        cursor: pointer;
        min-height: 52px;
      }

      .act2-mobile-toggle-label {
        font-family: var(--font-h);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--gold-light);
      }

      .act2-mobile-toggle-meta { color: var(--text-muted); font-size: 11px; }
      .act2-mobile-toggle-icon { color: var(--gold); font-size: 16px; transition: transform 0.2s ease; }
      .act2-picker-overlay.is-expanded .act2-mobile-toggle-icon { transform: rotate(180deg); }
      .act2-title-short { display: none; }
      
      .act2-alignments-hud {
        border: 1px solid rgba(125,211,252,0.2);
        border-radius: var(--r-md);
        padding: 14px;
        background:
          linear-gradient(135deg, rgba(125,211,252,0.075), transparent 52%),
          rgba(8,8,30,0.72);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
      }
      .act2-alignments-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--text);
        margin-bottom: 2px;
      }
      .act2-alignments-count {
        display: inline-grid;
        place-items: center;
        min-width: 30px;
        height: 30px;
        padding: 0 8px;
        border: 1px solid rgba(212,175,55,0.35);
        border-radius: 999px;
        background: rgba(212,175,55,0.1);
        color: var(--gold-light);
        font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
        font-size: 12px;
      }
      .act2-alignments-subtitle { margin-bottom: 10px; color: var(--text-muted); font-size: 10px; line-height: 1.5; }
      .act2-alignments-list {
        display: flex;
        flex-direction: column;
        gap: 5px;
        font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
        font-size: 11px;
        color: var(--text-muted);
      }
      .act2-alignment-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        min-height: 34px;
        padding: 6px 8px;
        border-left: 2px solid rgba(212,175,55,0.38);
        border-radius: 0 8px 8px 0;
        background: rgba(255,255,255,0.022);
      }
      .act2-alignment-item.strong { border-left-color: #7dd3fc; background: rgba(125,211,252,0.05); }
      .act2-alignment-item.supreme { border-left-color: #a5f3fc; background: rgba(165,243,252,0.08); }
      .act2-alignment-name { min-width: 0; color: var(--text); line-height: 1.35; }
      .act2-alignment-name.is-moon { color: var(--text-muted); padding-left: 9px; font-size: 10px; }
      .act2-alignment-level { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; background: rgba(212,175,55,0.08); font-size: 9px; text-transform: uppercase; color: var(--gold-light); }
      .act2-alignment-level.strong { color: #7dd3fc; background: rgba(125,211,252,0.09); }
      .act2-alignment-level.supreme { color: #a5f3fc; background: rgba(165,243,252,0.11); font-weight: 800; }
      .act2-empty-state { padding: 12px; border-radius: 8px; background: rgba(255,255,255,0.02); color: #817aa0; font-style: italic; text-align: center; }

      .act2-date-controls {
        padding: 11px 10px 5px;
        border: 1px solid rgba(212,175,55,0.13);
        border-radius: var(--r-md);
        background: rgba(8,7,28,0.5);
      }

      .act2-date-heading {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 0 4px 10px;
      }

      .act2-date-heading-icon { color: var(--gold); font-size: 20px; }
      .act2-date-heading strong { display: block; color: var(--text); font-family: var(--font-h); font-size: 9px; letter-spacing: 0.11em; text-transform: uppercase; }
      .act2-date-heading small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 9px; }

      .act2-picker-overlay .date-picker { padding: 34px 4px; }
      .act2-picker-overlay .picker-selection-bar { right: 4px; left: 4px; }
      .act2-picker-overlay .picker-fade-top,
      .act2-picker-overlay .picker-fade-bottom { height: 44px; }
      .act2-picker-overlay .wheel-col li { font-size: 16px; }

      @media (min-width: 761px) and (max-height: 760px) {
        .act2-picker-overlay {
          bottom: 12px;
          max-height: calc(100vh - 88px);
          max-height: calc(100dvh - 88px);
        }

        .act2-sheet-content {
          gap: 8px;
          padding: 10px;
        }

        .act2-alignments-hud { padding: 10px; }
        .act2-alignments-count {
          min-width: 26px;
          height: 26px;
        }
        .act2-alignments-subtitle {
          margin-bottom: 6px;
          line-height: 1.3;
        }
        .act2-alignments-list { gap: 3px; }
        .act2-alignment-item {
          min-height: 28px;
          padding: 3px 8px;
        }

        .act2-date-controls { padding: 8px 10px 2px; }
        .act2-date-heading { padding-bottom: 4px; }
        .act2-date-heading-icon { font-size: 18px; }
        .act2-picker-overlay .date-picker { padding: 25px 4px; }
      }
      
      @media (max-width: 760px) {
        .act2-topbar {
          min-height: 56px;
          padding: max(8px, env(safe-area-inset-top)) 12px 8px;
          gap: 8px;
        }

        .act2-topbar-title {
          font-size: 10px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .act2-title-full { display: none; }
        .act2-title-short { display: inline; }
        .act2-topbar-date {
          font-size: 9px;
          white-space: nowrap;
        }
        .act2-back-btn { padding: 8px 10px; font-size: 10px; white-space: nowrap; }
        .act2-labels-btn { width: 44px; padding: 8px; }
        .act2-labels-text { display: none; }

        .act2-picker-overlay {
          right: 10px;
          bottom: max(10px, env(safe-area-inset-bottom));
          left: 10px;
          width: auto;
          max-height: calc(100dvh - 78px);
          overflow: auto;
        }

        .act2-mobile-toggle { display: flex; }
        .act2-picker-overlay:not(.is-expanded) .act2-sheet-content { display: none; }
        .act2-picker-overlay.is-expanded .act2-mobile-toggle { border-bottom: 1px solid rgba(212,175,55,0.16); }
        .act2-sheet-content { padding: 12px; }
        .act2-picker-overlay .date-picker { padding: 36px 4px; }
        .act2-alignments-hud { padding: 12px; }
      }
      
      .act2-picker-overlay .picker-col-labels {
        padding: 0;
      }

      .act2-actions-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
        align-items: center;
        width: 100%;
      }

      .act2-btn-go {
        width: 100%;
        padding: 12px;
        border-radius: var(--r-md);
        background: rgba(212, 175, 55, 0.22);
        border: 1px solid rgba(212, 175, 55, 0.55);
        color: var(--gold-light);
        font-family: var(--font-h);
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        cursor: pointer;
        transition: background 0.2s, border-color 0.2s, transform 0.15s;
        min-height: 48px;
        box-shadow: 0 0 15px rgba(212, 175, 55, 0.15);
      }
      .act2-btn-go:hover {
        background: rgba(212, 175, 55, 0.38);
        border-color: rgba(212, 175, 55, 0.85);
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.25);
      }
      .act2-btn-go:active {
        transform: scale(0.98);
      }

      .act2-btn-today {
        padding: 12px 16px;
        border-radius: var(--r-md);
        background: rgba(212, 175, 55, 0.08);
        border: 1px solid rgba(212, 175, 55, 0.25);
        color: var(--gold-light);
        font-family: var(--font-h);
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        cursor: pointer;
        transition: background 0.2s, border-color 0.2s;
        min-height: 48px;
        white-space: nowrap;
      }
      .act2-btn-today:hover {
        background: rgba(212, 175, 55, 0.2);
        border-color: rgba(212, 175, 55, 0.5);
      }

      /* ============================================================
         SCREEN 2 — GENDER
      ============================================================ */
      .gender-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        border-radius: var(--r-md);
        transition: border-color 0.2s, box-shadow 0.2s;
      }

      .gender-btn {
        background: var(--card);
        border: 2px solid var(--border-strong);
        border-radius: var(--r-lg);
        padding: 24px 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s;
        color: var(--text);
        font-family: inherit;
      }

      .gender-btn:active { transform: scale(0.96); }

      @media (hover: hover) {
        .gender-btn:hover {
          border-color: var(--gold-light);
          background: rgba(212,175,55,0.08);
          box-shadow: 0 0 24px rgba(212,175,55,0.22);
        }
      }

      .gender-btn.selected {
        border-color: var(--gold-light);
        background: rgba(124,58,237,0.22);
        box-shadow: 0 0 28px rgba(234,179,8,0.3), inset 0 0 16px rgba(234,179,8,0.1);
      }

      .gender-icon { font-size: 40px; line-height: 1; filter: drop-shadow(0 0 14px rgba(254,240,138,0.5)); color: var(--gold-light); }
      .gender-label { font-family: var(--font-h); font-size: 15px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #ffffff; }
      .gender-desc { font-size: 13px; color: #c8c3e0; text-align: center; line-height: 1.5; font-weight: 400; }

      /* ============================================================
         SCREENS 3 & 4 — GLOBE
      ============================================================ */
      .globe-wrapper {
        background: var(--card);
        border: 1px solid var(--border-strong);
        border-radius: var(--r-lg);
        overflow: hidden;
        position: relative;
        height: 200px;
        touch-action: pan-y;
        backdrop-filter: blur(12px);
        transition: border-color 0.2s, box-shadow 0.2s;
      }

      @media (min-width: 600px) { .globe-wrapper { height: 300px; } }

      #globe-svg-birth, #globe-svg-residence {
        width: 100%; height: 100%;
        display: block;
      }

      .globe-hint {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(6,5,26,0.9);
        border: 1px solid rgba(212,175,55,0.3);
        border-radius: 20px;
        padding: 5px 12px;
        font-size: 12px;
        font-weight: 500;
        color: var(--gold-light);
        white-space: nowrap;
        pointer-events: none;
        backdrop-filter: blur(8px);
      }

      .country-search-wrap {
        position: relative;
        border-radius: var(--r-md);
        transition: border-color 0.2s, box-shadow 0.2s;
      }

      .country-search-input {
        width: 100%;
        padding: 14px 16px 14px 44px;
        background: rgba(14, 12, 40, 0.95);
        border: 1.5px solid var(--border-strong);
        border-radius: var(--r-md);
        color: #ffffff;
        font-family: var(--font-b);
        font-size: 16px;
        transition: border-color 0.2s, box-shadow 0.2s;
        backdrop-filter: blur(12px);
      }

      .country-search-input:focus {
        border-color: var(--gold-light);
        box-shadow: 0 0 0 3px rgba(254,240,138,0.25);
        outline: none;
      }

      .country-search-input::placeholder { color: var(--text-muted); opacity: 0.8; }

      .country-search-icon {
        position: absolute;
        left: 16px; top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        color: var(--gold-light);
        pointer-events: none;
      }

      .country-results {
        position: absolute;
        top: calc(100% + 6px);
        left: 0; right: 0;
        background: rgba(14, 12, 40, 0.98);
        border: 1.5px solid var(--border-strong);
        border-radius: var(--r-md);
        max-height: 220px;
        overflow-y: auto;
        z-index: 60;
        display: none;
        box-shadow: 0 12px 40px rgba(0,0,0,0.8);
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .country-results.visible { display: block; }

      .country-result-item {
        width: 100%;
        padding: 12px 16px;
        border: 0;
        border-bottom: 1px solid rgba(212,175,55,0.12);
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        color: var(--text);
        text-align: left;
        transition: background 0.15s;
      }

      .country-results li:last-child .country-result-item { border-bottom: none; }
      .country-result-item:hover { background: rgba(212,175,55,0.12); color: #ffffff; }
      .country-result-flag { font-size: 22px; }

      .country-selected-display {
        background: rgba(212,175,55,0.1);
        border: 1.5px solid rgba(212,175,55,0.4);
        border-radius: var(--r-md);
        padding: 14px 18px;
        align-items: center;
        gap: 14px;
        font-size: 15px;
        color: #ffffff;
        display: none;
      }

      .country-selected-display.visible { display: flex; }
      .country-selected-flag { font-size: 26px; }
      .country-selected-name { font-weight: 600; color: var(--gold-light); }
      .country-selected-change {
        margin-left: auto;
        font-size: 12px;
        color: var(--gold-light);
        font-family: var(--font-h);
        font-weight: 700;
        cursor: pointer;
        background: rgba(212,175,55,0.15);
        border: 1px solid rgba(212,175,55,0.3);
        border-radius: var(--r-sm);
        padding: 6px 12px;
        letter-spacing: 0.08em;
        transition: background 0.2s;
      }
      .country-selected-change:hover { background: rgba(212,175,55,0.3); color: #ffffff; }

      /* ============================================================
         SCREEN 5 — DATE PICKER
      ============================================================ */
      .card {
        background: var(--card);
        border: 1.5px solid var(--border-strong);
        border-radius: var(--r-lg);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: var(--shadow-card);
        overflow: hidden;
        transition: border-color 0.2s, box-shadow 0.2s;
      }

      .card-header { padding: 20px 20px 0; text-align: center; }

      .card-label {
        font-family: var(--font-h);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--gold-light);
      }

      .picker-col-labels { display: flex; padding: 12px 20px 0; }

      .picker-col-label {
        flex: 1;
        text-align: center;
        font-size: 12px;
        font-family: var(--font-h);
        font-weight: 700;
        letter-spacing: 0.18em;
        color: var(--text-muted);
        text-transform: uppercase;
      }

      .date-picker { display: flex; padding: 50px 20px; overflow: hidden; position: relative; }

      .picker-fade-top, .picker-fade-bottom {
        position: absolute; left: 0; right: 0; height: 58px;
        pointer-events: none; z-index: 2;
      }

      .picker-fade-top { top: 0; background: linear-gradient(to bottom, var(--surface) 10%, transparent 100%); }
      .picker-fade-bottom { bottom: 0; background: linear-gradient(to top, var(--surface) 10%, transparent 100%); }

      .picker-selection-bar {
        position: absolute;
        left: 20px; right: 20px;
        top: 50%;
        transform: translateY(-50%);
        height: 50px;
        pointer-events: none;
        z-index: 3;
        border-top: 1px solid rgba(212,175,55,0.45);
        border-bottom: 1px solid rgba(212,175,55,0.45);
        background: rgba(212,175,55,0.04);
        border-radius: 4px;
      }

      .wheel-col {
        flex: 1;
        position: relative;
        height: 50px;
        margin: 0 4px;
        cursor: grab;
        touch-action: none;
      }

      .wheel-col:active { cursor: grabbing; }
      .wheel-col ul { list-style: none; will-change: transform; }

      .wheel-col li {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 50px;
        font-size: 18px;
        font-weight: 400;
        color: var(--text);
        -webkit-user-select: none;
        user-select: none;
      }

      .selected-date-label {
        text-align: center;
        padding: 6px 20px 18px;
        font-family: var(--font-h);
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0.06em;
        color: var(--gold-light);
        min-height: 38px;
      }

      /* ============================================================
         SCREEN 6 — RESULTS
      ============================================================ */
      #screen-results .screen-inner { max-width: 1080px; gap: 30px; }

      .primary-results-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        align-items: stretch;
      }

      @media (min-width: 860px) {
        .primary-results-grid { grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); }
      }

      .result-hero {
        background: var(--card);
        border: 1.5px solid var(--border-strong);
        border-radius: var(--r-xl);
        padding: 32px 24px;
        text-align: center;
        position: relative;
        overflow: hidden;
        backdrop-filter: blur(12px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 100%;
      }

      .result-hero::before {
        content: "";
        position: absolute;
        top: -40px; left: 50%;
        transform: translateX(-50%);
        width: 200px; height: 200px;
        background: radial-gradient(circle, rgba(254,240,138,0.18) 0%, transparent 70%);
        pointer-events: none;
      }

      .result-hero-label { font-family: var(--font-h); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-light); font-weight: 700; margin-bottom: 8px; }
      .result-hero-sign { font-family: var(--font-h); font-size: clamp(28px, 6vw, 44px); font-weight: 700; background: linear-gradient(135deg, #ffffff 0%, var(--gold-light) 40%, var(--gold) 80%, #ca8a04 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.2; margin-bottom: 6px; }
      .result-hero-emoji { font-size: 56px; display: block; margin-bottom: 14px; filter: drop-shadow(0 0 20px rgba(254,240,138,0.6)); animation: float 5s ease-in-out infinite; }
      .result-hero-meta { font-size: 14px; color: var(--text-secondary); font-style: italic; margin-bottom: 12px; font-weight: 400; }
      .result-hero-traits { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
      .result-hero-trait { font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 20px; font-family: var(--font-h); letter-spacing: 0.06em; }
      .result-hero-trait.pos { background: rgba(134,239,172,0.12); border: 1px solid rgba(134,239,172,0.4); color: #86efac; }
      .result-hero-trait.neg { background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.4); color: #fca5a5; }

      .user-profile-summary {
        background: rgba(212,175,55,0.08);
        border: 1px solid rgba(212,175,55,0.3);
        border-radius: var(--r-md);
        padding: 14px 18px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
      }

      .ups-item { display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.06); font-size: 13px; font-weight: 500; color: #dedbf0; border: 1px solid rgba(212,175,55,0.15); }
      .ups-item span:first-child { font-size: 16px; }

      .ai-reading-section { display: flex; flex-direction: column; gap: 14px; }
      .ai-reading {
        background: var(--card);
        border: 1.5px solid var(--border-strong);
        border-radius: var(--r-xl);
        padding: 28px 24px;
        position: relative;
        overflow: hidden;
      }
      .ai-reading::before {
        content: "";
        position: absolute;
        top: -50px; left: 50%;
        transform: translateX(-50%);
        width: 260px; height: 260px;
        background: radial-gradient(circle, rgba(124,58,237,0.14) 0%, transparent 68%);
        pointer-events: none;
      }
      .ai-reading p { position: relative; color: var(--text-secondary); font-size: 15px; line-height: 1.75; margin: 0 0 14px; font-weight: 400; }
      .ai-reading p:last-child { margin-bottom: 0; }
      .ai-reading-h2 { position: relative; font-family: var(--font-h); font-size: 22px; font-weight: 700; color: var(--gold-light); margin: 24px 0 10px; }
      .ai-reading-h3 { position: relative; font-family: var(--font-h); font-size: 17px; font-weight: 600; color: #ffffff; letter-spacing: 0.04em; margin: 20px 0 8px; }
      .ai-reading-h2:first-child, .ai-reading-h3:first-child { margin-top: 0; }
      .ai-reading-list { position: relative; margin: 0 0 14px; padding-left: 20px; }
      .ai-reading-list li { color: var(--text-secondary); font-size: 14.5px; line-height: 1.7; margin-bottom: 6px; font-weight: 400; }
      .ai-reading strong { color: #ffffff; font-weight: 600; }
      .ai-reading em { color: var(--gold-light); font-style: italic; }
      .ai-reading-state { color: var(--text-secondary); font-size: 14px; font-weight: 500; text-align: center; padding: 20px 0; animation: ai-reading-pulse 1.6s ease-in-out infinite; }
      .ai-reading-error { color: var(--error); animation: none; }
      @keyframes ai-reading-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

      .zodiac-results-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }

      @media (min-width: 580px) { .zodiac-results-grid { grid-template-columns: 1fr 1fr; } }

      .zodiac-result-card {
        background: var(--card);
        border: 1px solid var(--border-strong);
        border-radius: var(--r-md);
        padding: 18px;
        position: relative;
        overflow: hidden;
        animation: slideUp 0.45s cubic-bezier(0.22,1,0.36,1) backwards;
      }

      .zodiac-result-card::before {
        content: "";
        position: absolute;
        top: 0; left: 0;
        width: 4px; height: 100%;
        border-radius: 4px 0 0 4px;
      }

      .zodiac-result-card.tropical::before { background: var(--c-tropical); }
      .zodiac-result-card.vedic::before { background: var(--c-vedic); }
      .zodiac-result-card.egyptian::before { background: var(--c-egyptian); }
      .zodiac-result-card.american::before { background: var(--c-american); }
      .zodiac-result-card.celtic::before { background: var(--c-celtic); }
      .zodiac-result-card.chinese::before { background: var(--c-chinese); }
      .zodiac-result-card.maya::before { background: var(--c-maya); }
      .zodiac-result-card.azteca::before { background: var(--c-azteca); }
      .zodiac-result-card:nth-child(1) { animation-delay: 0.04s; }
      .zodiac-result-card:nth-child(2) { animation-delay: 0.09s; }
      .zodiac-result-card:nth-child(3) { animation-delay: 0.14s; }
      .zodiac-result-card:nth-child(4) { animation-delay: 0.19s; }
      .zodiac-result-card:nth-child(5) { animation-delay: 0.24s; }
      .zodiac-result-card:nth-child(6) { animation-delay: 0.29s; }
      .zodiac-result-card:nth-child(7) { animation-delay: 0.34s; }
      .zodiac-result-card:nth-child(8) { animation-delay: 0.39s; }

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

      .zrc-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
      .zrc-emoji { font-size: 26px; flex-shrink: 0; }
      .zrc-tradition { font-family: var(--font-h); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 2px; }
      .zrc-sign { font-size: 15px; font-weight: 700; color: #ffffff; line-height: 1.3; }
      .zrc-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; font-weight: 400; }
      .zrc-positive { font-size: 12.5px; color: #86efac; font-weight: 500; line-height: 1.6; margin-bottom: 4px; }
      .zrc-negative { font-size: 12.5px; color: #fca5a5; font-weight: 500; line-height: 1.6; }

      .section-divider { display: flex; align-items: center; gap: 12px; }
      .section-divider::before, .section-divider::after { content: ""; flex: 1; height: 1px; background: rgba(212,175,55,0.25); }
      .section-divider span { font-size: 12px; font-family: var(--font-h); font-weight: 700; letter-spacing: 0.16em; color: var(--gold-light); text-transform: uppercase; }
      .zodiac-section-divider { margin-bottom: 14px; }
      .result-change-date { margin-top: 8px; }
      .text-emphasis { color: #ffffff; }
      .text-warning { color: #ff8888; }

      .act2-cta-box {
        background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(79,70,229,0.12));
        border: 1.5px solid rgba(124,58,237,0.4);
        border-radius: var(--r-xl);
        padding: 28px 24px;
        text-align: center;
        position: relative;
        overflow: hidden;
      }

      .act2-cta-box::before {
        content: "";
        position: absolute;
        top: -60px; left: 50%;
        transform: translateX(-50%);
        width: 300px; height: 300px;
        background: radial-gradient(circle, rgba(124,58,237,0.16) 0%, transparent 65%);
        pointer-events: none;
      }

      .act2-icon { font-size: 48px; display: block; margin-bottom: 12px; filter: drop-shadow(0 0 16px rgba(124,58,237,0.5)); animation: float 5s ease-in-out infinite; }
      .act2-title { font-family: var(--font-h); font-size: 20px; font-weight: 700; color: var(--gold-light); margin-bottom: 8px; letter-spacing: 0.05em; }
      .act2-desc { font-size: 14.5px; color: var(--text-secondary); line-height: 1.65; margin-bottom: 20px; max-width: 420px; margin-left: auto; margin-right: auto; font-weight: 400; }

      .result-note { text-align: center; font-size: 12.5px; color: var(--text-muted); font-style: italic; padding: 4px 0 8px; }

      .numerology-block { display: flex; flex-direction: column; gap: 14px; }

      .numerology-notice {
        padding: 14px 16px;
        border: 1px solid rgba(232,121,249,0.3);
        border-radius: var(--r-md);
        background: rgba(232,121,249,0.06);
        color: var(--text-secondary);
        font-size: 13px;
        line-height: 1.65;
        text-align: center;
        font-weight: 400;
      }

      .numerology-omission {
        margin-bottom: 12px;
        padding: 14px 16px;
        border: 1px solid rgba(212,175,55,0.3);
        border-radius: var(--r-md);
        background: rgba(212,175,55,0.06);
        color: var(--text-secondary);
        font-size: 13px;
        line-height: 1.65;
        font-weight: 400;
      }

      .numerology-omission strong { color: var(--gold-light); }

      .numerology-primary {
        min-width: 0;
        padding: 28px 22px;
        border: 1.5px solid rgba(232,121,249,0.35);
        border-radius: var(--r-xl);
        background: linear-gradient(145deg, rgba(232,121,249,0.1), var(--card));
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
        position: relative;
      }

      .numerology-primary::before {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(232,121,249,0.15), transparent 68%);
        pointer-events: none;
      }

      .numerology-kicker { color: #f0abfc; font-family: var(--font-h); font-size: 11px; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; }
      .numerology-value { margin: 6px 0; color: var(--gold-light); font-family: var(--font-h); font-size: clamp(42px, 10vw, 64px); line-height: 1; }
      .numerology-title { color: #ffffff; font-family: var(--font-h); font-size: 20px; font-weight: 700; }
      .numerology-description { max-width: 440px; margin: 10px auto 0; color: var(--text-secondary); font-size: 14px; line-height: 1.65; font-weight: 400; }

      .numerology-selector {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
        gap: 10px;
      }

      .numerology-tab {
        min-width: 0;
        min-height: 78px;
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        padding: 12px;
        border: 1px solid var(--border-strong);
        border-radius: var(--r-md);
        background: var(--card);
        color: inherit;
        cursor: pointer;
        text-align: left;
        transition: border-color 0.2s, background 0.2s, transform 0.2s;
      }

      .numerology-tab:hover { border-color: var(--gold-light); transform: translateY(-2px); }
      .numerology-tab[aria-selected="true"] { border-color: var(--gold-light); background: rgba(232,121,249,0.12); box-shadow: 0 0 22px rgba(232,121,249,0.15); }
      .numerology-tab-number { color: var(--gold-light); font-family: var(--font-h); font-size: 24px; font-weight: 700; text-align: center; white-space: nowrap; }
      .numerology-tab-label { display: block; color: var(--text-muted); font-family: var(--font-h); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
      .numerology-tab-title { display: block; margin-top: 3px; color: #ffffff; font-size: 13px; font-weight: 600; line-height: 1.3; }

      @media (max-width: 600px) {
        .numerology-tab:last-child { grid-column: 1 / -1; }
      }

      .numerology-reading {
        margin-top: 12px;
        border: 1.5px solid rgba(232,121,249,0.35);
        border-radius: var(--r-lg);
        background: var(--card);
        overflow: hidden;
      }

      .numerology-reading-header {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 20px;
        border-bottom: 1px solid var(--card-border);
        background: linear-gradient(120deg, rgba(232,121,249,0.1), transparent 45%);
      }

      .numerology-reading-number { min-width: 64px; color: var(--gold-light); font-family: var(--font-h); font-size: 42px; font-weight: 700; line-height: 1; text-align: center; }
      .numerology-reading-type { color: #f0abfc; font-family: var(--font-h); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
      .numerology-reading-title { margin-top: 3px; color: #ffffff; font-family: var(--font-h); font-size: 20px; font-weight: 700; }
      .numerology-calculation { margin: 16px 20px 0; padding: 11px 13px; border-radius: var(--r-sm); background: rgba(6,5,26,0.85); color: var(--gold-light); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }

      .numerology-reading-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px 20px 20px;
      }

      @media (min-width: 720px) {
        .numerology-reading-grid { grid-template-columns: 1fr 1fr; }
      }

      .numerology-reading-section { padding: 16px; border: 1px solid rgba(212,175,55,0.15); border-radius: var(--r-sm); background: rgba(255,255,255,0.025); }
      .numerology-reading-section h4 { margin-bottom: 7px; color: var(--gold-light); font-family: var(--font-h); font-size: 11px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; }
      .numerology-reading-section p, .numerology-reading-section li { color: var(--text-secondary); font-size: 13.5px; line-height: 1.65; font-weight: 400; }
      .numerology-reading-section ul { padding-left: 17px; }
      .numerology-reading-section.interpretation { grid-column: 1 / -1; }
      .numerology-meta { margin: 0 20px 20px; padding-top: 12px; border-top: 1px solid var(--card-border); color: var(--text-muted); font-size: 12px; font-style: italic; }

      /* ============================================================
         ACCESO TEMPORAL RESTRINGIDO
      ============================================================ */
      body.future-gate-open,
      body.data-skip-open { overflow: hidden; }

      .future-gate {
        position: fixed;
        inset: 0;
        z-index: 400;
        display: grid;
        place-items: center;
        padding: 18px;
        overflow-y: auto;
      }

      .future-gate[hidden] { display: none; }

      .future-gate-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(2, 2, 12, 0.88);
        backdrop-filter: blur(12px);
      }

      .future-gate-panel {
        position: relative;
        width: min(100%, 520px);
        border: 1px solid rgba(232,121,249,0.38);
        border-radius: var(--r-xl);
        padding: clamp(24px, 6vw, 38px);
        background:
          linear-gradient(145deg, rgba(124,58,237,0.12), transparent 40%),
          rgba(8, 7, 28, 0.98);
        box-shadow: 0 30px 100px rgba(0,0,0,0.75), 0 0 50px rgba(124,58,237,0.18);
        text-align: center;
        overflow: hidden;
      }

      .future-gate-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0.16;
        background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(232,121,249,0.08) 5px);
      }

      .data-skip-panel {
        width: min(100%, 500px);
        border-color: rgba(212,175,55,0.38);
        background:
          radial-gradient(circle at 50% 0%, rgba(212,175,55,0.11), transparent 42%),
          rgba(8,7,28,0.98);
      }

      .data-skip-icon {
        display: block;
        margin-bottom: 10px;
        font-size: 40px;
        filter: drop-shadow(0 0 16px rgba(212,175,55,0.3));
      }

      .data-skip-consequence {
        margin: 18px 0;
        padding: 14px;
        border: 1px solid rgba(212,175,55,0.18);
        border-radius: var(--r-md);
        background: rgba(212,175,55,0.045);
        color: var(--text);
        font-size: 13px;
        line-height: 1.7;
        text-align: left;
      }

      .data-skip-actions {
        display: grid;
        gap: 8px;
      }

      .data-skip-actions .btn-back {
        min-height: 44px;
        margin-top: 0;
      }

      .future-gate-close {
        position: absolute;
        z-index: 1;
        top: 12px;
        right: 12px;
        width: 44px;
        height: 44px;
        border: 1px solid var(--card-border);
        border-radius: 50%;
        background: rgba(255,255,255,0.03);
        color: var(--text-muted);
        cursor: pointer;
      }

      .future-gate-content { position: relative; z-index: 1; }
      .future-gate-icon { display: block; margin-bottom: 12px; font-size: 44px; filter: drop-shadow(0 0 18px rgba(232,121,249,0.5)); }
      .future-gate-eyebrow { color: #f0abfc; font-family: var(--font-h); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
      .future-gate-title { margin: 8px 0; color: var(--gold-light); font-family: var(--font-h); font-size: clamp(22px, 7vw, 32px); line-height: 1.2; text-transform: uppercase; font-weight: 700; }
      .future-gate-copy { color: var(--text-secondary); font-size: 13.5px; line-height: 1.75; }

      .future-file {
        margin: 18px 0;
        padding: 12px;
        border: 1px solid rgba(232,121,249,0.2);
        border-radius: var(--r-sm);
        background: rgba(232,121,249,0.04);
        font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
        text-align: left;
      }

      .future-file-row { display: flex; justify-content: space-between; gap: 12px; color: var(--text-secondary); font-size: 12px; line-height: 1.8; }
      .future-file-row strong { color: var(--gold-light); font-weight: 600; text-align: right; }
      .future-passphrase-label { display: block; margin-bottom: 7px; color: var(--text); font-family: var(--font-h); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-align: left; text-transform: uppercase; }
      .future-passphrase { width: 100%; padding: 13px 14px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: rgba(2,2,12,0.8); color: var(--text); letter-spacing: 0.14em; font-size: 16px; }
      .identity-input[aria-invalid="true"],
      .future-passphrase[aria-invalid="true"] { border-color: var(--error); }
      .future-access-status { min-height: 21px; margin: 7px 0; color: var(--error); font-size: 13px; text-align: left; font-weight: 500; }
      .future-privacy { margin-top: 13px; color: var(--text-muted); font-size: 12px; }

      .future-denied {
        margin-top: 18px;
        padding: 18px 15px;
        border: 1px solid rgba(248,113,113,0.4);
        border-radius: var(--r-md);
        background: rgba(248,113,113,0.06);
      }

      .future-denied[hidden] { display: none; }
      .future-denied-code { color: var(--error); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; letter-spacing: 0.15em; font-weight: 700; }
      .future-denied-title { margin: 7px 0 10px; color: var(--error); font-family: var(--font-h); font-size: 19px; text-transform: uppercase; font-weight: 700; }
      .future-denied-text { color: var(--text-secondary); font-size: 13.5px; line-height: 1.7; }
      .future-denied-actions { display: grid; gap: 9px; margin-top: 16px; }
      .date-status { min-height: 22px; color: var(--error); font-size: 13px; text-align: center; font-weight: 500; }

      /* ============================================================
         ACTO II — SOLAR SYSTEM OVERLAY
      ============================================================ */
      #act2-container {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 210;
        pointer-events: none;
      }

      #act2-container.visible { display: block; }

      /* ============================================================
         GLOBE D3 STYLES — MYSTICAL
      ============================================================ */
      .fill-europe { fill: rgba(212,175,55,0.3); }
      .fill-americas { fill: rgba(124,58,237,0.3); }
      .fill-asia { fill: rgba(79,70,229,0.32); }
      .fill-africa { fill: rgba(212,175,55,0.22); }
      .fill-oceania { fill: rgba(6,182,212,0.3); }
      .fill-generic { fill: rgba(139,133,170,0.25); }

      .country-path {
        stroke: rgba(212,175,55,0.2);
        stroke-width: 0.5;
        cursor: pointer;
        transition: fill 0.2s;
      }

      .country-path:hover { fill: rgba(212,175,55,0.52); }
      .country-path.selected { fill: rgba(212,175,55,0.72); stroke: var(--gold); stroke-width: 1.2; }

      /* ============================================================
         RESPONSIVE
      ============================================================ */
      @media (min-width: 600px) { .screen { padding: 32px 28px 48px; } }
      @media (min-width: 860px) { .screen { padding: 40px 40px 56px; } }

      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
      }

      @media (forced-colors: active) {
        .hero-title,
        .screen-title {
          background: none;
          color: CanvasText;
          -webkit-text-fill-color: CanvasText;
        }

        .btn-cta,
        .btn-skip,
        .gender-btn,
        .country-search-input,
        .country-result-item,
        .future-gate-panel,
        .act2-picker-overlay {
          border: 1px solid CanvasText;
          background: Canvas;
          color: CanvasText;
          forced-color-adjust: auto;
        }

        .stars-bg,
        .danger-box::before,
        .future-gate-panel::before {
          display: none;
        }
      }