@import url('https://fonts.googleapis.com/css2?family=Marcellus+SC&family=Inter:wght@300;400;600&display=swap');

        :root { --sidebar-w: 0px; --font-display: 'Marcellus SC', serif; }
        @media (min-width: 1024px) {
            :root { --sidebar-w: 104px; } /* sidebar: left:16px + width:72px + 16px gap */
        }
        *, *::before, *::after { box-sizing: border-box; }
        html, body { width: 100%; height: 100%; }
        body { margin: 0; overflow: hidden; background-color: #020204; font-family: 'Inter', sans-serif; display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 100dvh; width: 100%; }
        #app-shell {
            display: flex; flex-direction: row; height: 100vh; height: 100dvh; min-height: 100dvh; width: 100%; overflow: hidden; position: relative; flex: 1; min-height: 0;
        }
        #app-sidebar {
            width: 0; flex-shrink: 0; position: relative; overflow: visible;
        }
        #app-main {
            flex: 1; position: relative; min-width: 0; overflow: hidden;
        }
        /* Chart Stage — invisible full-bleed host for the 3D sky and wheel. */
        .chart-stage {
            position: absolute; inset: 0;
            background: transparent;
            border: 0;
            border-radius: 0;
            box-shadow: none;
            overflow: visible;
        }
        /* Keep the Foundational Pattern ⓘ flyout free of stage clipping when open. */
        .chart-stage:has(.chart-viz-title-wrap.chart-nos-tooltip-open) {
            overflow: visible;
        }
        
        /* Keep WebGL + CSS2D labels in a lower plane than the Foundational Pattern title/tooltip. */
        #canvas-container {
            width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: display 0s;
            z-index: 2;
            border-radius: 0;
            overflow: visible;
        }
        /* Chart: soft edge vignette — same deep ink as the auth overlay
           (--hop-overlay-backdrop, rgba(2,4,8)) so login and wheel read as one
           continuous space. z3: above canvas + CSS2D labels (z2), below HUD
           (z20) and section title (z52). */
        .chart-stage::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 3;
            pointer-events: none;
            background: radial-gradient(ellipse at center, transparent 58%, rgba(2, 4, 8, 0.55) 100%);
        }

        /* Chart: load scrim — prevents "half-render" flashes during fetch/build */
        #chart-load-scrim {
            position: absolute;
            inset: 0;
            z-index: 12; /* above canvas, below HUD/modals */
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            opacity: 0;
            /* Slow, eased-both-ends lift — a covering veil should rise gently
               from rest and settle, never jump or blink. */
            transition: opacity 1100ms cubic-bezier(0.4, 0, 0.2, 1);
            background: rgba(2, 2, 4, 0.92);
            backdrop-filter: blur(6px);
        }
        #chart-load-scrim.visible { opacity: 1; pointer-events: auto; }
        #chart-load-scrim .scrim-msg {
            font-family: var(--font-display);
            letter-spacing: 3px;
            text-transform: uppercase;
            font-size: 12px;
            color: rgba(226, 232, 240, 0.62);
            text-shadow: 0 2px 18px rgba(0,0,0,0.75);
        }

        /* UI: Profile Screen (Overlay) */
        #profile-screen {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: var(--hop-overlay-backdrop);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            z-index: 100;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            transition: opacity 0.5s ease;
        }
        #profile-screen.hidden { opacity: 0; pointer-events: none; }

        .glass-panel {
            background: var(--hop-surface-card-bg);
            border: 1px solid var(--hop-surface-card-border-accent);
            border-radius: var(--hop-radius-card);
            padding: 32px;
            width: 90%; max-width: 420px;
            box-shadow: var(--hop-shadow-surface-card);
            backdrop-filter: blur(var(--hop-surface-blur-panel));
            -webkit-backdrop-filter: blur(var(--hop-surface-blur-panel));
        }

        .input-group { margin-bottom: 16px; }
        .input-label {
            display: block;
            color: var(--chart-text-meta);
            font-size: var(--hop-type-label-size);
            text-transform: uppercase;
            letter-spacing: var(--hop-type-label-tracking);
            margin-bottom: 6px;
        }
        .input-field {
            width: 100%; box-sizing: border-box; background: var(--hop-surface-input-bg); border: 1px solid var(--hop-surface-input-border);
            color: #fff; padding: 10px; border-radius: 8px; font-size: 16px; outline: none;
            transition: border-color 0.2s; -webkit-appearance: none; appearance: none;
        }
        .input-field[type="number"] { -moz-appearance: textfield; }
        .input-field[type="number"]::-webkit-inner-spin-button,
        .input-field[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        .input-field[type="date"]::-webkit-date-and-time-value { text-align: left; }
        .input-field[type="time"]::-webkit-date-and-time-value { text-align: left; }
        .input-field:is([type="date"], [type="time"])::-webkit-calendar-picker-indicator {
            filter: invert(1);
            opacity: 0.72;
            cursor: pointer;
        }
        .input-field:focus { border-color: rgba(251,191,36,0.42); box-shadow: 0 0 0 3px rgba(217,119,6,0.14); }
        .input-field:-webkit-autofill,
        .input-field:-webkit-autofill:hover,
        .input-field:-webkit-autofill:focus {
            -webkit-box-shadow: 0 0 0 1000px rgba(10, 15, 30, 0.95) inset;
            -webkit-text-fill-color: #fff;
            caret-color: #fff;
            border-color: rgba(255,255,255,0.15);
            transition: background-color 9999s ease-in-out 0s;
        }
        
        .btn-primary {
            flex: none;
            width: 100%;
            min-height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--hop-action-primary-bg);
            color: var(--hop-action-primary-text);
            font-size: var(--hop-type-control-size);
            font-weight: var(--hop-type-control-weight);
            text-transform: uppercase;
            letter-spacing: var(--hop-type-control-tracking);
            padding: 12px 14px;
            border-radius: 12px;
            border: 1px solid rgba(251, 191, 36, 0.20);
            cursor: pointer;
            transition: var(--hop-control-transition);
            margin-top: 10px;
            position: relative;
            overflow: hidden;
        }
        .btn-primary:hover {
            transform: translateY(var(--hop-motion-lift-y));
            background: var(--hop-action-primary-bg-hover);
            box-shadow: 0 12px 28px rgba(217, 119, 6, 0.22);
        }
        .btn-primary:active { transform: translateY(0); }
        .btn-primary:disabled {
            background: rgba(51, 65, 85, 0.76);
            border-color: rgba(148, 163, 184, 0.16);
            color: rgba(148, 163, 184, 0.82);
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        .btn-primary.btn-secondary {
            background: var(--hop-action-secondary-bg);
            border-color: var(--hop-action-secondary-border);
            color: var(--hop-action-secondary-text);
            box-shadow: none;
        }
        .btn-primary.btn-secondary:hover {
            background: rgba(255, 255, 255, 0.075);
            border-color: rgba(226, 232, 240, 0.22);
            box-shadow: none;
        }
        .btn-primary.btn-destructive {
            background: var(--hop-action-destructive-bg);
            border-color: var(--hop-action-destructive-border);
            color: var(--hop-action-destructive-text);
            box-shadow: none;
        }
        .btn-primary.btn-destructive:hover {
            background: rgba(127, 29, 29, 0.42);
            border-color: rgba(248, 113, 113, 0.36);
            box-shadow: none;
        }
        /* Continue with Google — dark glass, thin border (no white pill).
           Plain anchor: redirect flow works in WhatsApp/Instagram in-app webviews
           where Google's popup widget fails silently. */
        .btn-google {
            width: 100%;
            min-height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: rgba(255, 255, 255, 0.04);
            color: rgba(226, 232, 240, 0.92);
            font-family: 'Inter', sans-serif;
            font-size: var(--hop-type-control-size);
            font-weight: 600;
            letter-spacing: 0.01em;
            padding: 12px 14px;
            border-radius: 12px;
            border: 1px solid rgba(226, 232, 240, 0.16);
            cursor: pointer;
            text-decoration: none;
            transition: var(--hop-control-transition);
        }
        .btn-google:hover {
            background: rgba(255, 255, 255, 0.075);
            border-color: rgba(226, 232, 240, 0.28);
            transform: translateY(var(--hop-motion-lift-y));
        }
        .btn-google svg { width: 18px; height: 18px; flex: none; }
        .auth-or {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 14px 0;
            color: rgba(148, 163, 184, 0.6);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.12em;
        }
        .auth-or::before, .auth-or::after {
            content: "";
            flex: 1;
            height: 1px;
            background: rgba(148, 163, 184, 0.18);
        }
        .modal-action-row {
            display: flex;
            gap: 8px;
        }
        .modal-action-row .btn-primary {
            flex: 1 1 0;
            width: auto;
            margin-top: 0;
        }
        /* Stacked variant: the two actions are NOT peers -- one continues an account
           that already exists, the other destroys it irreversibly. Side-by-side equal
           widths renders them as equivalent choices, which is the lie. Stacking keeps
           the exit fully legible and hittable (DPDP s6(1) consent must be free, s6(4)
           withdrawal available "at any time") while the danger-ghost treatment matches
           how delete already looks in the Privacy tab -- same action, same face.
           The flex override is required: `flex: 1 1 0` grows on the CROSS axis in a
           column, which would stretch the buttons to fill the modal's height. */
        .modal-action-row--stacked {
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
        }
        .modal-action-row--stacked .btn-primary,
        .modal-action-row--stacked .btn-danger-ghost {
            flex: 0 0 auto;
            width: 100%;
        }
        #profile-screen-close-btn {
            min-height: 34px;
            color: var(--hop-action-secondary-text) !important;
            border-color: var(--hop-action-secondary-border) !important;
            border-radius: 10px !important;
            font-size: var(--hop-type-control-size) !important;
            font-weight: var(--hop-type-control-weight);
            letter-spacing: var(--hop-type-control-tracking);
            transition: var(--hop-control-transition);
        }
        #profile-screen-close-btn:hover {
            color: var(--hop-control-text-hover) !important;
            border-color: rgba(226, 232, 240, 0.22) !important;
            background: rgba(255,255,255,0.055) !important;
        }

        /* UI: Chart layer controls — quiet glass chips in the wheel-centered top stack */
        #hud-layer {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 7px;
            margin-top: 1px;
            z-index: 20;
            opacity: 0;
            pointer-events: none;
            transition: opacity var(--hop-motion-reveal);
        }
        #hud-layer.visible { opacity: 1; pointer-events: auto; }
        .hud-control-row {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            max-width: 100%;
        }
        body.chart-actions-open #hud-layer {
            opacity: 0;
            pointer-events: none;
        }

        .hud-buttons {
            padding: 5px;
            border-radius: 9999px;
            pointer-events: auto;
        }

        .hud-subtitle {
            font-size: var(--hop-type-control-size);
            font-weight: 500;
            letter-spacing: var(--hop-type-meta-tracking);
            color: rgba(203, 213, 225, 0.74);
            text-align: center;
            line-height: 1.35;
            max-width: min(560px, calc(100vw - 28px));
            padding: 0 8px;
            pointer-events: none;
        }
        .hud-subtitle[hidden] { display: none !important; }

        .hud-btn.hop-glass-chip {
            text-transform: uppercase;
        }

        /* Chart actions backdrop (below panel, above chart / chart-chat) */
        #chart-actions-backdrop {
            position: fixed;
            inset: 0;
            z-index: 32;
            background: var(--hop-overlay-backdrop-soft);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease;
        }
        body.chart-actions-open #chart-actions-backdrop {
            opacity: 1;
            pointer-events: auto;
        }

        /* ── Account + settings: single monogram entry point, top-right ── */
        #account {
            position: fixed;
            top: var(--chart-actions-top);
            right: var(--chart-actions-right);
            left: auto;
            bottom: auto;
            z-index: 41;
        }
        /* Monogram: transparent circle, faint ring, amber initials. Ring + initials
           go full amber on hover/open (amber as activation, not decoration). */
        #account-btn {
            width: 44px;
            height: 44px;
            border-radius: 9999px;
            background: transparent;
            border: 1px solid var(--hop-surface-control-border);
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 0;
            backdrop-filter: blur(var(--hop-surface-blur-control));
            -webkit-backdrop-filter: blur(var(--hop-surface-blur-control));
            transition: var(--hop-control-transition);
        }
        #account-btn.visible { display: inline-flex; }
        #account-btn:hover {
            border-color: rgba(251, 191, 36, 0.45);
            background: rgba(251, 191, 36, 0.06);
            transform: translateY(var(--hop-motion-lift-y));
        }
        #account-btn:active { transform: translateY(0); }
        #account-btn[aria-expanded="true"] {
            border-color: rgba(251, 191, 36, 0.28);
            background: rgba(255, 255, 255, 0.035);
            transform: none;
        }
        #account-btn:focus-visible {
            outline: var(--hop-focus-outline);
            outline-offset: var(--hop-focus-outline-offset);
        }
        .account-monogram {
            font-family: var(--font-display);
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 0.04em;
            line-height: 1;
            color: var(--seize-accent, rgba(251, 191, 36, 0.78));
            text-transform: uppercase;
            user-select: none;
            transition: color var(--hop-motion-standard);
        }
        #account-btn:hover .account-monogram { color: var(--chart-accent-glow); }
        #account-btn[aria-expanded="true"] .account-monogram { color: rgba(251, 191, 36, 0.58); }

        /* Menu: popover under the monogram on >=768; bottom sheet on mobile (below). */
        #account-menu {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            width: 264px;
            max-height: min(72vh, calc(100dvh - 100px));
            overflow-y: auto;
            padding: 10px;
            border-radius: var(--hop-radius-panel);
            background: var(--hop-surface-panel-bg);
            border: 1px solid var(--hop-surface-panel-border);
            box-shadow: var(--hop-shadow-surface-panel);
            backdrop-filter: blur(var(--hop-surface-blur-panel));
            -webkit-backdrop-filter: blur(var(--hop-surface-blur-panel));
            display: none;
            z-index: 40;
        }
        #account-menu.open { display: block; }
        .account-sheet-handle { display: none; }

        /* Identity header */
        .account-identity {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 6px 6px 10px;
        }
        .account-identity .account-monogram--lg {
            width: 36px;
            height: 36px;
            flex-shrink: 0;
            border-radius: 9999px;
            border: 1px solid rgba(251, 191, 36, 0.30);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            color: var(--chart-accent-glow);
        }
        .account-identity-text { flex: 1; min-width: 0; }
        .account-identity-name {
            font-size: var(--hop-type-label-size);
            font-weight: 600;
            color: var(--chart-text-primary);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .account-identity-name:empty { display: none; }
        .account-identity-email {
            font-size: var(--hop-type-helper-size);
            color: var(--chart-text-meta);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .account-identity-email:empty { display: none; }
        .account-identity-chevron {
            flex-shrink: 0;
            line-height: 0;
            color: rgba(148, 163, 184, 0.54);
            transition: var(--hop-control-transition);
        }
        .account-identity-chevron svg { width: 16px; height: 16px; display: block; }
        .account-identity:hover .account-identity-chevron { color: var(--chart-accent-glow); }

        /* Action rows: labeled, >=44px touch targets */
        .account-row {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            min-height: 44px;
            padding: 8px;
            border: none;
            border-radius: 12px;
            background: transparent;
            color: var(--chart-text-muted);
            font-size: var(--hop-type-label-size);
            font-weight: 500;
            text-align: left;
            text-decoration: none;
            cursor: pointer;
            box-sizing: border-box;
            transition: var(--hop-control-transition);
        }
        #account-foundational-actions[hidden],
        .account-row[hidden] {
            display: none !important;
        }
        .account-row:hover { background: rgba(255, 255, 255, 0.05); color: var(--chart-text-primary); }
        .account-row:active { background: rgba(255, 255, 255, 0.08); }
        .account-row:focus-visible {
            outline: var(--hop-focus-outline);
            outline-offset: -2px;
        }
        .account-row-icon { display: inline-flex; flex-shrink: 0; line-height: 0; color: inherit; }
        .account-row-icon svg { width: 18px; height: 18px; display: block; }
        .account-row-label { flex: 1; min-width: 0; }
        .account-row-text {
            display: flex;
            flex: 1;
            min-width: 0;
            flex-direction: column;
            gap: 1px;
        }
        .account-row-text .account-row-label { flex: none; }
        .account-row-meta {
            font-size: var(--hop-type-helper-size);
            color: var(--chart-text-meta);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .account-row-meta:empty { display: none; }
        /* Profile (needs a chart) and Admin (admins only) are gated by .visible. */
        #profile-birth-btn:not(.visible),
        #admin-dashboard-link:not(.visible) { display: none; }
        /* Danger: muted at rest; red only on hover. Red is reserved for the irreversible. */
        .account-row--quiet { color: rgba(148, 163, 184, 0.68); }
        .account-row--quiet:hover { color: rgba(226, 232, 240, 0.88); }
        .account-row--danger { color: rgba(148, 163, 184, 0.72); }
        .account-row--danger:hover { background: rgba(127, 29, 29, 0.16); color: rgba(254, 202, 202, 0.92); }
        @media (prefers-reduced-motion: reduce) {
            #account-btn, #account-menu, .account-row { transition: none; }
        }
        .tool-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 4px; }
        .tool-label {
            font-size: var(--hop-type-label-size);
            color: var(--chart-text-muted);
        }
        .tool-help { font-size: var(--hop-type-helper-size); color: var(--chart-text-meta); margin-top: -2px; }
        .tool-divider { height: 1px; background: rgba(148,163,184,0.10); margin: 8px 0; border: none; }
        #account-menu .tool-section-title {
            font-size: var(--hop-type-helper-size);
            letter-spacing: var(--hop-type-label-tracking);
            text-transform: uppercase;
            color: var(--chart-text-muted);
            margin: 6px 4px 4px 4px;
        }
        #account-menu .tool-section-title:first-child { margin-top: 0; }
        /* Modal Card */
        #info-modal {
            position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9);
            width: min(560px, calc(100vw - 24px));
            max-height: calc(100dvh - 40px);
            overflow-y: auto;
            background: rgba(8, 13, 22, 0.72);
            border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--hop-radius-modal); padding: 24px 24px 20px;
            z-index: 50; opacity: 0; pointer-events: none;
            transition: opacity 0.24s ease, transform 0.24s ease;
            box-shadow: var(--hop-shadow-surface-modal);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            isolation: isolate;
        }
        /* Gradient hairline edge — same recipe as the Living Dialogue composer shell. */
        #info-modal::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.10), rgba(255, 255, 255, 0.02));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }
        #info-modal.open { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }

        /* Demoted to a quiet Sanskrit fact — the force below is the hero. */
        .modal-title { text-align: center; font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(148, 163, 184, 0.70); line-height: 1.2; }
        .modal-subtitle { text-align: center; font-size: 12px; color: rgba(203, 213, 225, 0.78); text-transform: none; letter-spacing: var(--hop-type-meta-tracking); }
        .modal-close {
            position: absolute;
            top: 14px;
            right: 14px;
            z-index: 1;
            width: 32px;
            height: 32px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: rgba(148, 163, 184, 0.72);
            border: 1px solid transparent;
            border-radius: 9999px;
            background: transparent;
            transition: var(--hop-control-transition);
        }
        .modal-close:hover {
            color: var(--hop-control-text-hover);
            border-color: rgba(255,255,255,0.12);
            background: rgba(255,255,255,0.06);
        }
        .modal-close:focus-visible {
            outline: var(--hop-focus-outline);
            outline-offset: 2px;
        }

        /* Hero — the force. The dominant element on the card. Planet color. */
        .modal-force {
            text-align: center;
            margin-top: 8px;
            font-family: var(--font-display);
            font-size: 32px;
            line-height: 1.1;
            letter-spacing: 0.012em;
            color: var(--planet-color, #fbbf24);
            overflow-wrap: break-word;
        }
        /* The reading as one sentence: "in the House of Work, it refines." */
        .modal-line {
            text-align: center;
            margin: 16px 0 0;
            font-size: 15px;
            line-height: 1.55;
            color: rgba(203, 213, 225, 0.68);
            overflow-wrap: break-word;
        }
        .modal-arena {
            color: rgba(233, 240, 252, 0.94);
            border-bottom: 1.5px solid var(--house-accent, rgba(251, 191, 36, 0.35));
            padding-bottom: 1px;
        }
        .modal-verb {
            color: rgba(233, 240, 252, 0.94);
            font-style: italic;
        }
        
        .modal-kw-item {
            font-size: 12px;
            color: rgba(226, 232, 240, 0.90);
            line-height: 1.5;
        }
        .modal-phala {
            margin-top: 14px;
            padding-top: 12px;
            border-top: 1px solid rgba(255, 255, 255, 0.07);
            font-size: 13px;
            line-height: 1.65;
            color: rgba(226, 232, 240, 0.80);
        }
        .modal-dialogue {
            margin-top: 28px;
        }
        /* The door into the planet's chamber is the composer itself: you type
           here and your words travel with you. Styling is the chamber's own
           .planet-chat-composer-shell (planet-chat.css) so the two surfaces
           cannot drift apart — only the accent is rebound, from the chamber's
           slate default to this planet's colour, as an outline rather than the
           filled slab this replaced. */
        .modal-dialogue .planet-chat-composer-shell {
            --pc-accent: var(--planet-color, #8A9BC4);
            --pc-accent-soft: var(--planet-color-soft, rgba(138, 155, 196, 0.45));
            --pc-accent-atmo: var(--planet-color-atmo, rgba(138, 155, 196, 0.12));
        }
        @media (max-width: 430px) {
            .modal-force { font-size: 28px; }
        }

        
        .legend-line { width: 20px; height: 1px; }

        /* 3D Labels — shared rendering base */
        .zodiac-label,
        .house-numeral,
        .house-ruler-text {
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
            backface-visibility: hidden;
            position: relative;
            transform: translateZ(0);
            pointer-events: none;
            user-select: none;
            transition: opacity 0.5s;
        }

        /* A) Zodiac sign labels — muted small-caps feel */
        .zodiac-label {
            font-family: var(--font-display);
            font-size: clamp(9px, 0.7vw, 12px);
            text-transform: uppercase;
            letter-spacing: 1.3px;
            color: rgba(226, 232, 240, 0.82);
            /* Engraved: depth + subtle accent separation (accent set per-sign via CSS var) */
            text-shadow:
                0 2px 14px rgba(0,0,0,0.72),
                0 0 12px rgba(160, 190, 235, 0.10);
            -webkit-text-stroke: 0.30px rgba(0, 0, 0, 0.55);
        }
        
        /* B) Planet labels — prominent warm-white with chip */
        
        /* No accent dot before the name — the face beside the label already
           carries the planet's colour and identity; the dot was duplicate signal. */

        /* C) House numerals — quiet structural */
        .house-numeral {
            font-family: var(--font-display);
            font-size: clamp(12px, 1.1vw, 16px);
            color: rgba(233, 240, 252, 0.56);
            /* Engraved: depth + subtle halo to separate from lines/space */
            text-shadow:
                0 2px 10px rgba(0,0,0,0.70),
                0 0 12px rgba(160, 190, 235, 0.14);
            /* iOS/retina helps prevent washout on busy backgrounds */
            -webkit-text-stroke: 0.35px rgba(0, 0, 0, 0.55);
        }
        /* D) House ruler text — subtle helper */
        .house-ruler-text {
            font-family: 'Inter', sans-serif;
            font-size: clamp(9px, 0.7vw, 11px);
            font-weight: 500;
            color: rgba(206, 224, 246, 0.70);
            text-transform: uppercase;
            letter-spacing: 1px;
            text-shadow:
                0 2px 8px rgba(0,0,0,0.78),
                0 0 10px rgba(160, 190, 235, 0.10);
            transition: opacity 0.5s, color 0.5s;
        }

        /* Chart label tuning on small screens (Identity Layer does not use these classes) */
        @media (max-width: 767px) {
            .zodiac-label { letter-spacing: 1px; }
            
            .house-ruler-text { display: none; }
        }

        @keyframes bounce {
            0%, 80%, 100% { transform: scale(0); }
            40% { transform: scale(1); }
        }

        /* Left Sidebar — floating icon rail (desktop/tablet), drawer on mobile */
        #threshold-menu {
            position: fixed;
            inset: 0;
            z-index: 38;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 28px;
            opacity: 0;
            pointer-events: none;
            transition: opacity var(--hop-motion-reveal);
        }
        #threshold-menu.open {
            opacity: 1;
            pointer-events: auto;
        }
        .threshold-option {
            background: none;
            border: none;
            cursor: pointer;
            font-family: var(--font-display);
            font-size: clamp(20px, 4vw, 30px);
            letter-spacing: 0.04em;
            color: var(--chart-text-meta);
            opacity: 0.45;
            transition: opacity var(--hop-motion-fast), color var(--hop-motion-fast);
        }
        .threshold-option:hover { opacity: 0.8; }
        .threshold-option:focus-visible {
            outline: var(--hop-focus-outline);
            outline-offset: var(--hop-focus-outline-offset);
        }
        .threshold-option.active {
            color: var(--chart-text-primary);
            opacity: 1;
        }
        .sidebar-backdrop {
            position: fixed;
            inset: 0;
            background: var(--hop-overlay-backdrop-soft);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            z-index: 28;
            opacity: 0;
            pointer-events: none;
            transition: opacity var(--hop-motion-standard);
        }
        .sidebar-backdrop.visible {
            opacity: 1;
            pointer-events: auto;
        }
        #hamburger-btn {
            display: none;
            position: fixed;
            left: var(--chart-actions-left);
            top: var(--chart-actions-top);
            z-index: 40;
            width: 44px;
            height: 44px;
            border-radius: 14px;
            background: transparent;
            border: none;
            color: var(--seize-accent, var(--chart-accent-text));
            cursor: pointer;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            transition: var(--hop-control-transition);
        }
        #hamburger-btn.visible { display: flex; }
        #hamburger-btn:hover { background: rgba(251, 191, 36, 0.12); }
        #hamburger-btn:focus-visible {
            outline: var(--hop-focus-outline);
            outline-offset: var(--hop-focus-outline-offset);
        }
        .hamburger-bar {
            width: 22px;
            height: 2px;
            border-radius: 2px;
            background: currentColor;
            transition: transform var(--hop-motion-standard), opacity var(--hop-motion-fast), background var(--hop-motion-standard);
        }
        /* Hamburger morphs to X when the menu is open.
           translateY 7px = bar gap (5px) + bar height (2px): collapses the outer
           bars onto the button's center line. Keep them in sync if either changes.
           scaleX(1.414) = 1/cos45°: makes each rotated arm span the original bar
           width, so the ✕ keeps the ☰ footprint. Middle bar collapses to a point
           (scaleX 0) so no rounded end-caps peek past the crossing. */
        #hamburger-btn.open .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg) scaleX(1.414); }
        #hamburger-btn.open .hamburger-bar:nth-child(2) { transform: scaleX(0); opacity: 0; }
        #hamburger-btn.open .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg) scaleX(1.414); }

        /* Desktop / tablet: in-flow titles only; mobile bar toggled via [hidden]. */
        .mobile-section-header {
            display: none;
        }

        @media (max-width: 1023px) {
            /* Monogram aligns with the hamburger row on mobile. */
            #account {
                top: var(--mobile-header-content-top);
                right: max(10px, env(safe-area-inset-right));
            }
            /* Menu becomes a bottom sheet: full-width, slides up from the bottom.
               dvh (not vh) so mobile browser chrome doesn't clip it; safe-area pad
               keeps the last row (Delete) clear of the home bar. */
            #account-menu {
                position: fixed;
                top: auto;
                right: 0;
                left: 0;
                bottom: 0;
                width: auto;
                max-height: 85dvh;
                border-radius: 20px 20px 0 0;
                padding: 8px 14px calc(14px + env(safe-area-inset-bottom));
                display: block;
                transform: translateY(100%);
                transition: transform var(--hop-motion-standard);
                will-change: transform;
                /* Own the vertical pan so the swipe scrolls the sheet (not the chart
                   behind it); keep momentum scroll and don't chain to the body. */
                overflow-y: auto;
                touch-action: pan-y;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
            }
            #account-menu.open { transform: translateY(0); }
            /* Full-width tappable strip; the visible bar is the ::before. Tap = dismiss. */
            .account-sheet-handle {
                display: block;
                width: 100%;
                padding: 6px 0 12px;
                cursor: pointer;
                /* Own the touch on the handle so the drag-to-dismiss gesture isn't
                   stolen by the sheet's pan-y scroll. */
                touch-action: none;
            }
            .account-sheet-handle::before {
                content: '';
                display: block;
                width: 36px;
                height: 4px;
                border-radius: 9999px;
                background: rgba(255, 255, 255, 0.18);
                margin: 0 auto;
            }
            .account-row { min-height: 48px; }
            /* Feedback button: align with gear on mobile (same right edge, directly below). */
            #feedback-tool {
                top: calc(var(--mobile-header-content-top) + 52px);
                right: max(10px, env(safe-area-inset-right)) !important;
            }
            #feedback-tool .tool-btn {
                background: transparent !important;
                border: none !important;
                box-shadow: none !important;
                backdrop-filter: none !important;
                animation: feedback-ring-ghost 3.6s ease-in-out infinite;
            }
            #feedback-tool .tool-btn:hover {
                background: rgba(251, 191, 36, 0.12) !important;
                border: none !important;
                transform: none;
            }
            @keyframes feedback-ring-ghost {
                0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
                50%       { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18); }
            }

            /* Fixed section title between hamburger (44px) and gear (44px). */
            .mobile-section-header:not([hidden]) {
                display: block;
                position: fixed;
                left: 0;
                right: 0;
                top: 0;
                z-index: 38;
                padding-top: var(--mobile-header-content-top);
                pointer-events: none;
            }
            .mobile-section-header__track {
                min-height: 44px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 4px;
                padding-left: calc(max(12px, env(safe-area-inset-left)) + 44px + 10px);
                padding-right: calc(max(10px, env(safe-area-inset-right)) + 44px + 10px);
                pointer-events: none;
            }
            .mobile-section-header__title {
                font-family: var(--font-display);
                font-size: 12px;
                font-weight: 400;
                letter-spacing: 0.04em;
                color: var(--chart-text-eyebrow);
                text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 100%;
                pointer-events: none;
            }
            .mobile-section-header__info:not([hidden]) {
                pointer-events: auto;
                flex-shrink: 0;
            }
            /* Mobile header ⓘ: align with title row (in-flow, not superscript offset). */
            #mobile-section-info-btn.mobile-section-header__info {
                position: relative;
                top: 0;
                margin-left: 4px;
                vertical-align: middle;
            }

            /* Identity Layer is a long scrolling list, so the otherwise-transparent
               fixed title bar must mask content sliding beneath it. Other views
               (the wheel) keep the bar transparent. Frosted glass (not an opaque
               slab): blur hides content under the title while the starfield reads
               through, so at rest it's chrome, not a black bar. Full-bleed → no
               side seam; the mask fades the glass at its base so it isn't a hard box. */
            body:has(#identity-layer-view.visible) .mobile-section-header:not([hidden]) {
                padding-bottom: 22px;
                background: linear-gradient(180deg,
                    rgba(6, 10, 18, 0.48) 0%,
                    rgba(6, 10, 18, 0.40) 58%,
                    rgba(6, 10, 18, 0) 100%);
                backdrop-filter: blur(14px);
                -webkit-backdrop-filter: blur(14px);
                -webkit-mask-image: linear-gradient(180deg,
                    #000 0%, #000 78%, transparent 100%);
                mask-image: linear-gradient(180deg,
                    #000 0%, #000 78%, transparent 100%);
            }

            /* Tablet/mobile use the shared floating section header; keep the desktop
               title wrapper only as the fixed tooltip/HUD anchor. */
            

            .chart-stage {
                inset: 0;
                background: transparent;
                border: 0;
                border-radius: 0;
                box-shadow: none;
                overflow: visible;
            }

            #hud-layer {
                position: fixed;
                left: 50%;
                top: calc(var(--mobile-content-top-offset) + 3px);
                transform: translateX(-50%);
                width: max-content;
                max-width: calc(100vw - 22px);
                margin-top: 0;
                z-index: 20;
            }

            #hud-layer .hud-buttons {
                flex-wrap: nowrap;
                max-width: 100%;
                overflow-x: auto;
                scrollbar-width: none;
            }

            #hud-layer .hud-buttons::-webkit-scrollbar {
                display: none;
            }

            .hud-subtitle {
                display: none !important;
            }

            /* Shared toolkit flyouts: NOS (inside .chart-stage), Identity, Chart Dialogue. */
            .section-toolkit-flyout {
                position: fixed;
                left: 50%;
                transform: translateX(-50%);
                top: calc(var(--mobile-content-top-offset) + 2px);
                width: min(340px, calc(100vw - 24px));
                max-height: min(72vh, calc(100dvh - 120px));
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                z-index: 60;
                padding: 14px 16px;
                background: var(--hop-surface-popover-bg);
                border: 1px solid var(--hop-surface-panel-border);
                border-radius: var(--hop-radius-panel);
                box-shadow: var(--hop-shadow-surface-panel);
                backdrop-filter: blur(var(--hop-surface-blur-panel));
                -webkit-backdrop-filter: blur(var(--hop-surface-blur-panel));
            }

            /* Hide in-flow section titles; tooltips use fixed position when open. */
            #chart-viz-title-wrap .chart-viz-title-text,
            #chart-viz-title-wrap .chart-nos-info-btn {
                position: absolute;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                white-space: nowrap;
                border: 0;
            }

            #il-header-title-wrap h2,
            #il-header-title-wrap .il-arch-info-btn {
                position: absolute;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                white-space: nowrap;
                border: 0;
            }

            #chart-chat-title-wrap .chart-chat-page-title,
            #chart-chat-title-wrap #chart-chat-info-btn {
                position: absolute;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                white-space: nowrap;
                border: 0;
            }


        }

        /* Chart-only: first-run hint toast */
        #chart-hint {
            position: absolute;
            left: 50%;
            bottom: 64px;
            transform: translateX(-50%);
            z-index: 24;
            background: var(--hop-surface-popover-bg);
            border: 1px solid var(--hop-surface-panel-border);
            box-shadow: var(--hop-shadow-surface-panel);
            backdrop-filter: blur(var(--hop-surface-blur-panel));
            -webkit-backdrop-filter: blur(var(--hop-surface-blur-panel));
            padding: 10px 12px;
            border-radius: var(--hop-radius-panel);
            max-width: min(520px, calc(100vw - 20px));
            display: none;
            gap: 10px;
            align-items: center;
        }
        #chart-hint.show { display: flex; }
        #chart-hint .hint-text { font-size: 12px; color: rgba(226,232,240,0.92); line-height: 1.35; }
        #chart-hint .hint-sub { font-size: 10px; color: rgba(148,163,184,0.78); margin-top: 1px; }
        #chart-hint .hint-close {
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.10);
            color: rgba(226,232,240,0.85);
            border-radius: 12px;
            padding: 8px 10px;
            font-size: var(--hop-type-control-size);
            font-weight: var(--hop-type-control-weight);
            letter-spacing: var(--hop-type-control-tracking);
            cursor: pointer;
            flex-shrink: 0;
            transition: var(--hop-control-transition);
        }
        #chart-hint .hint-close:hover {
            border-color: rgba(251,191,36,0.22);
            background: rgba(251,191,36,0.10);
            transform: translateY(var(--hop-motion-lift-y));
        }
        #chart-hint .hint-close:active { transform: translateY(0); }

        /* ============================================================ */
        /* #1 — Identity Layer View: Cosmic Layered Background          */
        /* ============================================================ */
        
        #identity-layer-view.visible {
            display: block;
        }
        @media (max-width: 1023px) {
            
        }

        
        /* Quiet atmospheric lift behind the Identity content column */
        

        .il-header {
            text-align: center;
            margin-bottom: 12px;
            /* Pinned heading: stays put while the view scrolls beneath it.
               padding-top owns the old view top offset. Frosted glass (not an
               opaque slab): blur smears any text sliding under it into
               illegibility while the starfield still reads through, so at rest
               it never looks like a black bar. The mask fades the glass — blur
               included — at its base so it isn't a hard box. */
            position: sticky;
            top: 0;
            z-index: 2;
            padding-top: calc(var(--chart-actions-top) + 11px);
            /* Clears the fine-print out of the mask's bottom 22px fade band
               (26 > 22) so the Terms/Refunds line renders at full opacity. */
            padding-bottom: 26px;
            background: linear-gradient(180deg,
                rgba(7, 11, 20, 0.45) 0%,
                rgba(7, 11, 20, 0.38) calc(100% - 22px),
                rgba(7, 11, 20, 0) 100%);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            -webkit-mask-image: linear-gradient(180deg,
                #000 0%, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(180deg,
                #000 0%, #000 calc(100% - 22px), transparent 100%);
        }
        /* Full-bleed the frosted band on desktop. The header lives inside the
           1280-capped .il-container; left to itself the frost only spans the
           column and leaves bare starfield shoulders on wide viewports. Break
           out to viewport width so it reads as real top chrome, edge to edge.
           Centered text stays centered; #identity-layer-view has overflow-x:
           hidden so 100vw can't spawn a scrollbar. */
        @media (min-width: 1024px) {
            .il-header {
                margin-left: calc(50% - 50vw);
                margin-right: calc(50% - 50vw);
            }
        }
        .il-header-title-inner {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0 4px;
            position: relative;
            margin: 0;
            font-size: clamp(13px, 2.1vw, 17px);
            pointer-events: auto;
        }
        .il-header h2 {
            font-family: var(--font-display);
            font-size: 1em;
            font-weight: 400;
            letter-spacing: var(--hop-type-section-title-tracking);
            color: var(--chart-text-eyebrow);
            text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
            margin: 0;
        }
        .il-arch-info-btn {
            flex-shrink: 0;
            box-sizing: border-box;
            width: 1.35em;
            height: 1.35em;
            min-width: 20px;
            min-height: 20px;
            margin: 0;
            padding: 0;
            border: 1px solid var(--hop-surface-control-border);
            border-radius: 9999px;
            background: var(--hop-surface-control-bg);
            color: var(--chart-text-eyebrow);
            font-size: 0.52em;
            line-height: 1;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
            position: relative;
            top: auto;
            margin-left: 0.08em;
            transition: border-color 0.2s ease, background 0.2s ease;
        }
        .il-arch-info-btn:hover,
        .il-arch-info-btn:focus-visible {
            border-color: var(--hop-surface-control-border-hover);
            background: var(--hop-surface-control-hover-bg);
            outline: none;
        }
        .il-arch-tooltip {
            position: absolute;
            left: 50%;
            top: calc(100% + 12px);
            transform: translateX(-50%);
            width: min(340px, calc(100vw - 40px));
            padding: 14px 16px;
            background: var(--hop-surface-popover-bg);
            border: 1px solid var(--hop-surface-panel-border);
            border-radius: var(--hop-radius-panel);
            box-shadow: var(--hop-shadow-surface-panel);
            backdrop-filter: blur(var(--hop-surface-blur-panel));
            -webkit-backdrop-filter: blur(var(--hop-surface-blur-panel));
            text-align: left;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.2s ease, visibility 0.2s ease;
            z-index: 25;
        }
        .il-arch-tooltip p {
            margin: 0 0 10px 0;
            font-size: 12px;
            line-height: 1.55;
            color: var(--chart-text-muted);
        }
        .il-arch-tooltip p:last-child { margin-bottom: 0; }
        /* Tooltip only for ⓘ hover/focus or click-open; not for title text. Bridge hover onto panel via :has. */
        .il-header-title-inner:has(.il-arch-info-btn:hover) .il-arch-tooltip,
        .il-header-title-inner:has(.il-arch-info-btn:focus-visible) .il-arch-tooltip,
        .il-header-title-inner:has(.il-arch-tooltip:hover) .il-arch-tooltip,
        .il-header-title-inner.il-arch-tooltip-open .il-arch-tooltip {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        .il-header p {
            font-size: 12px;
            color: rgba(175, 196, 220, 0.75);
            margin: 0;
            /* Re-enable clicks: ancestor .hop-section-heading sets
               pointer-events:none (chart-app-theme.css) and only the
               title-row opts back in — so the Terms/Refunds anchors here
               would otherwise be dead. */
            pointer-events: auto;
        }

        /* ============================================================ */
        /* #2 — Identity Cards: restrained psychological panels          */
        /* ============================================================ */
        .il-section {
            margin-bottom: 20px;
            overflow: hidden;
            border-radius: 20px;
        }
        
        /* Barely-there top light, matching the shared surface hierarchy without becoming glass chrome. */
        .energy-panel::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 50%;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0%, transparent 100%);
            border-radius: var(--hop-radius-card) var(--hop-radius-card) 0 0;
            pointer-events: none;
            z-index: 1;
        }
        
        .energy-panel:focus-visible {
            outline: var(--hop-focus-outline);
            outline-offset: var(--hop-focus-outline-offset);
        }
        
        
        .energy-panel:hover::after {
            opacity: 0.18;
        }
        .energy-panel.expanded::after {
            opacity: 0.38;
        }
        /* Starfield reveal: expanded card dissolves its glass (600ms, after the expand
           starts) so the identity-layer starfield canvas (fixed, z-0, directly behind the
           content column) shows through at ~83%. Registered properties make the gradient
           alphas animatable; unsupporting browsers snap between the same two states. */
        @property --il-g1 { syntax: '<number>'; inherits: false; initial-value: 0.60; }
        @property --il-g2 { syntax: '<number>'; inherits: false; initial-value: 0.64; }
        @property --il-g3 { syntax: '<number>'; inherits: false; initial-value: 0.62; }
        #identity-layer-view .energy-panel {
            background:
                linear-gradient(180deg, rgba(15, 26, 46, var(--il-g1, 0.60)), rgba(8, 13, 22, var(--il-g2, 0.64))),
                rgba(15, 23, 42, var(--il-g3, 0.62));
            transition: var(--hop-control-transition), opacity 400ms ease,
                --il-g1 600ms ease 180ms, --il-g2 600ms ease 180ms, --il-g3 600ms ease 180ms;
        }
        #identity-layer-view .energy-panel.expanded {
            --il-g1: 0.10;
            --il-g2: 0.14;
            --il-g3: 0.06;
        }
        /* Observatory focus: with a card open, siblings and header recede so the
           aperture is the bright thing on screen. */
        #identity-layer-view:has(.energy-panel.expanded) .energy-panel:not(.expanded),
        #identity-layer-view:has(.energy-panel.expanded) .il-header {
            opacity: 0.55;
        }
        #identity-layer-view .il-header {
            transition: opacity 400ms ease;
        }
        @media (prefers-reduced-motion: reduce) {
            #identity-layer-view .energy-panel,
            #identity-layer-view .il-header {
                transition: var(--hop-control-transition);
            }
        }

        .il-section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0;
            user-select: none;
            position: relative;
            z-index: 3;
        }
        .il-section-toggle {
            appearance: none;
            flex: 1 1 auto;
            width: auto;
            min-width: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            padding: 16px 20px;
            border: 0;
            background: transparent;
            color: inherit;
            font: inherit;
            text-align: left;
            cursor: pointer;
            border-radius: 20px;
            transition: var(--hop-control-transition);
        }
        .il-section-toggle:hover {
            background: rgba(255,255,255,0.025);
            border-radius: 20px;
        }
        .il-section-toggle:focus-visible {
            outline: var(--hop-focus-outline);
            outline-offset: var(--hop-focus-outline-offset);
            border-radius: 20px;
        }
        .il-section-info {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .il-title-row {
            display: flex;
            align-items: center;
        }

        /* ============================================================ */
        /* #4 — Section Energy Icons                                    */
        /* ============================================================ */
        .section-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            margin-right: 10px;
            flex-shrink: 0;
        }
        

        /* ============================================================ */
        /* #5 — Typography Hierarchy                                    */
        /* ============================================================ */
        .title-serif-gold {
            font-family: var(--font-display) !important;
            font-size: var(--hop-type-card-title-size) !important;
            letter-spacing: var(--hop-type-card-title-tracking);
            color: rgba(255, 244, 214, 0.88);
        }
        .il-section-title {
            font-family: var(--font-display);
            font-size: var(--hop-type-card-title-size);
            color: rgba(255, 244, 214, 0.88);
            letter-spacing: var(--hop-type-card-title-tracking);
        }
        .subtext-muted {
            color: rgba(175, 196, 220, 0.70) !important;
            font-size: 11px;
            line-height: 1.6;
        }
        

        /* ============================================================ */
        /* #3 — Planet Glyph Toggle Indicator                           */
        /* ============================================================ */
        
        .planet-glyph::before {
            content: '';
            position: absolute;
            width: 3px; height: 3px;
            background: var(--il-orbit-dot);
            border-radius: 50%;
            top: 50%; left: 50%;
            margin: -1.5px 0 0 -1.5px;
            transform: rotate(0deg) translateY(calc(var(--il-orbit-radius) * -1));
            box-shadow: 0 0 3px var(--il-orbit-dot-shadow);
            animation: il-glyph-orbit var(--il-orbit-duration) linear infinite;
        }
        
        
        .energy-panel.expanded .planet-glyph::before {
            box-shadow: 0 0 4px var(--il-orbit-dot-shadow);
        }
        @keyframes il-glyph-orbit {
            0% { transform: rotate(0deg) translateY(calc(var(--il-orbit-radius) * -1)); }
            100% { transform: rotate(360deg) translateY(calc(var(--il-orbit-radius) * -1)); }
        }
        @media (prefers-reduced-motion: reduce) {
            .planet-glyph::before {
                animation: none;
                transform: rotate(36deg) translateY(calc(var(--il-orbit-radius) * -1));
            }
        }

        /* ============================================================ */
        /* #6 — Panel Body Expand/Collapse + Cosmic Scroll Reveal       */
        /* ============================================================ */
        
        
        .il-section-content {
            padding: 0 20px 20px 20px;
            opacity: 0;
            filter: blur(2px);
            transform: translateY(4px);
            transition: opacity 220ms ease-in, filter 220ms ease-in, transform 220ms ease-in;
            overflow-wrap: break-word;
        }
        .energy-panel.expanded .il-section-content {
            opacity: 1;
            filter: blur(0px);
            transform: translateY(0);
            transition: opacity var(--hop-motion-reveal) 60ms,
                        filter var(--hop-motion-reveal) 60ms,
                        transform var(--hop-motion-reveal) 60ms;
        }
        
        .il-section-content p:last-child {
            margin-bottom: 0;
        }
        
        /* Entity-level label headers (**Mercury:**, **Core Arc:**, etc.) get amber accent */
        
        /* Overview table for strongest_planets / strongest_houses */
        .il-section-content table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 18px;
            font-size: 12px;
        }
        
        
        /* Admin-only regenerate button on IL section headers */
        .il-regen-btn {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px 6px;
            color: rgba(251, 191, 36, 0.35);
            font-size: 15px;
            line-height: 1;
            border-radius: 8px;
            transition: var(--hop-control-transition);
            flex-shrink: 0;
            align-self: center;
            margin: 0 14px 0 4px;
        }
        .il-regen-btn:hover {
            color: #d97706;
            background: rgba(217, 119, 6, 0.12);
        }
        .il-regen-btn:focus-visible {
            outline: var(--hop-focus-outline);
            outline-offset: 2px;
        }
        .il-regen-btn.admin-visible {
            display: flex;
            align-items: center;
        }

        /* Identity Layer Loading Spinner */
        
        .il-spinner {
            width: 22px;
            height: 22px;
            border: 2px solid rgba(217, 119, 6, 0.2);
            border-top: 2px solid #d97706;
            border-radius: 50%;
            animation: il-spin 1s linear infinite;
        }
        @keyframes il-spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .il-error {
            color: #ef4444;
            font-size: 12px;
            text-align: center;
            padding: 16px 0;
        }
        .il-error button {
            background: rgba(217, 119, 6, 0.2);
            border: 1px solid rgba(217, 119, 6, 0.3);
            color: #d97706;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 11px;
            margin-top: 8px;
            cursor: pointer;
        }
        .il-error button:hover {
            background: rgba(217, 119, 6, 0.3);
        }
        .il-elements {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid rgba(255,255,255,0.06);
        }
        
        .il-elements-list {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }
        .il-element-tag {
            display: inline-block;
            background: rgba(139, 92, 246, 0.15);
            border: 1px solid rgba(139, 92, 246, 0.2);
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 10px;
            color: #a78bfa;
        }

        #il-karmic-journey.expanded .il-section-body,
        #il-karmic-lesson.expanded .il-section-body {
            max-height: 3600px;
        }

        /* Identity Layer collapsed-state preview (offer card). Pilot: Karmic Journey. */
        .il-preview {
            position: relative;
            z-index: 3;
            padding: 0 20px 20px;
            max-height: 800px;
            overflow: hidden;
            transition: max-height 360ms ease, opacity 220ms ease, padding 360ms ease;
        }
        .energy-panel.expanded .il-preview {
            max-height: 0;
            padding-bottom: 0;
            opacity: 0;
            visibility: hidden;
            transition: max-height 360ms ease, opacity 180ms ease, padding 360ms ease, visibility 0s 360ms;
        }
        .il-preview-divider {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 2px 0 16px;
        }
        
        
        .il-preview-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px 18px;
            margin-bottom: 20px;
        }
        /* Strongest Planets preview variant: centered primary headline + per-planet trio */
        .il-preview-primary {
            text-align: center;
            margin-bottom: 18px;
        }
        .il-preview-primary .il-preview-item-head {
            justify-content: center;
            margin-bottom: 6px;
        }
        .il-preview-primary .il-preview-item-label {
            font-size: 12px;
            letter-spacing: 0.14em;
        }
        .il-preview-primary .il-preview-item-detail {
            max-width: 520px;
            margin: 0 auto;
            font-size: 12.5px;
        }
        .il-preview-kicker {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 0 0 14px;
        }
        
        .il-preview-kicker span {
            font-family: var(--font-display);
            font-size: 8.5px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(255, 244, 214, 0.45);
        }
        .il-preview-trio {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 14px 18px;
            margin-bottom: 20px;
        }
        .il-preview-item-head {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 5px;
        }
        
        .il-preview-item-label {
            font-family: var(--font-display);
            font-size: 10px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(255, 244, 214, 0.88);
        }
        .il-preview-item-detail {
            font-size: 12px;
            line-height: 1.6;
            color: rgba(175, 196, 220, 0.70);
            margin: 0;
        }
        .il-preview-offer { text-align: center; }
        
        .il-preview-note {
            font-size: 11px;
            color: rgba(175, 196, 220, 0.70);
            margin-bottom: 14px;
        }
        
        
        .il-preview-btn:focus-visible {
            outline: var(--hop-focus-outline);
            outline-offset: var(--hop-focus-outline-offset);
        }
        .il-preview-footnote {
            margin-top: 12px;
            font-family: var(--font-display);
            font-size: 8px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.30);
        }
        .identity-visual {
            display: grid;
            gap: 16px;
            color: var(--chart-text-primary);
        }
        .iv-core,
        .iv-detail,
        .iv-full-reading {
            background: var(--hop-surface-card-bg);
            border: 1px solid var(--hop-surface-card-border-accent);
            border-radius: 16px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
            backdrop-filter: blur(var(--hop-surface-blur-panel));
            -webkit-backdrop-filter: blur(var(--hop-surface-blur-panel));
        }
        .iv-core {
            padding: 16px 18px;
        }
        .iv-kicker,
        .iv-divider span,
        .iv-axis__label,
        .iv-detail__label {
            font-family: var(--font-display);
            font-size: 10px;
            line-height: 1.2;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }
        .iv-kicker {
            color: var(--chart-accent-text);
            margin-bottom: 8px;
        }
        .iv-core__text {
            margin: 0;
            color: var(--chart-text-primary);
            font-size: 15px;
            line-height: 1.55;
            font-weight: 500;
        }
        .iv-divider {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--chart-text-eyebrow);
            opacity: 0.9;
        }
        .iv-divider::before,
        .iv-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--chart-border-accent-strong), transparent);
        }
        .iv-map {
            display: grid;
            gap: 14px;
        }
        .iv-axis {
            display: grid;
            gap: 10px;
            padding: 12px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            background: rgba(8, 13, 22, 0.34);
        }
        .iv-axis__title {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
        }
        .iv-axis__label {
            color: var(--chart-text-meta);
            font-size: 9px;
        }
        .iv-axis__title strong {
            color: var(--chart-text-muted);
            font-size: 12px;
            line-height: 1.35;
            text-align: right;
        }
        .iv-axis__rail {
            display: grid;
            grid-template-columns: minmax(100px, 1fr) minmax(48px, 120px) minmax(100px, 1fr);
            align-items: center;
            gap: 10px;
        }
        .iv-axis__line {
            display: block;
            height: 1px;
            background: linear-gradient(90deg, var(--chart-border-accent), var(--chart-border-accent-strong), var(--chart-border-accent));
        }
        .iv-node {
            min-height: 42px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            padding: 8px 10px;
            border: 1px solid var(--hop-surface-control-border);
            border-radius: 12px;
            background: rgba(8, 13, 22, 0.52);
            color: var(--chart-text-muted);
            font-size: 12px;
            line-height: 1.25;
            text-align: left;
            cursor: pointer;
            transition: var(--hop-control-transition);
        }
        .iv-node--right {
            justify-content: flex-end;
            text-align: right;
        }
        .iv-node:hover,
        .iv-node[aria-pressed="true"] {
            border-color: var(--hop-control-active-border);
            background: var(--hop-control-active-bg);
            color: var(--hop-control-active-text);
            transform: translateY(var(--hop-motion-lift-y));
        }
        .iv-node__dot {
            width: 9px;
            height: 9px;
            flex: 0 0 auto;
            border-radius: 9999px;
            border: 1px solid var(--chart-border-accent-strong);
            box-shadow: 0 0 10px rgba(251, 191, 36, 0.14);
        }
        .iv-node[aria-pressed="true"] .iv-node__dot {
            background: rgba(217, 119, 6, 0.92);
            border-color: rgba(251, 191, 36, 0.86);
        }
        .iv-detail {
            padding: 16px 18px;
            border-color: var(--chart-border-accent-strong);
            background:
                linear-gradient(135deg, rgba(251, 191, 36, 0.08), transparent 46%),
                var(--hop-surface-card-bg);
        }
        .iv-detail__label {
            color: var(--chart-text-meta);
            margin-bottom: 8px;
        }
        .iv-detail__title {
            margin: 0 0 8px 0;
            font-family: var(--font-display);
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0.07em;
            color: var(--chart-text-eyebrow);
        }
        .iv-detail__body,
        .iv-detail__synthesis,
        .iv-path-card p {
            margin: 0;
            color: var(--chart-text-muted);
            font-size: 13px;
            line-height: 1.62;
        }
        .iv-detail__synthesis {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            color: var(--chart-text-muted);
        }
        .iv-path {
            display: grid;
            gap: 12px;
        }
        .iv-path__grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }
        
        
        .iv-knot__svgwrap {
            margin: 0 -2px;
        }
        .iv-knot__svgwrap svg {
            display: block;
            width: 100%;
            height: auto;
        }
        .iv-knot__svgwrap path {
            fill: none;
            stroke-linecap: round;
        }
        .iv-knot__over {
            stroke-width: 3.5;
        }
        .iv-knot__mask {
            stroke: #0b1020;
            stroke-width: 9;
        }
        .iv-knot__grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
        }
        .iv-knot-stage {
            text-align: center;
            padding: 0 6px;
        }
        .iv-knot-stage__name {
            font-family: var(--font-display);
            font-size: 11px;
            line-height: 1.3;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--chart-accent-text);
            margin-bottom: 6px;
        }
        .iv-knot-stage__tag {
            font-size: 9px;
            line-height: 1.2;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--chart-text-meta);
            margin-bottom: 8px;
        }
        .iv-knot-stage p {
            margin: 0;
            color: var(--chart-text-muted);
            font-size: 12.5px;
            line-height: 1.6;
        }
        .iv-core--thread {
            text-align: center;
        }
        .iv-evidence {
            display: grid;
            gap: 8px;
            padding-top: 2px;
        }
        
        .iv-evidence__list {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        
        .iv-full-reading {
            padding: 0;
            overflow: hidden;
        }
        .iv-full-reading summary {
            padding: 12px 14px;
            color: var(--chart-text-eyebrow);
            font-family: var(--font-display);
            font-size: 10px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            cursor: pointer;
        }
        .iv-full-reading .chart-chat-markdown,
        .iv-full-reading > p {
            padding: 0 14px 14px 14px;
        }

        /* Strongest Planets constellation */
        .sp-constellation {
            display: grid;
            gap: 14px;
        }
        
        
        .sp-planet__body {
            display: block;
        }
        .sp-planet--rank1 .sp-planet__body { animation: sp-drift-a 9s ease-in-out infinite alternate; }
        .sp-planet--rank2 .sp-planet__body { animation: sp-drift-b 10.5s ease-in-out infinite alternate; }
        .sp-planet--rank3 .sp-planet__body { animation: sp-drift-c 12s ease-in-out infinite alternate; }
        
        /* Disc size + ring intentionally uniform across ranks — see base block below.
           Rank reads through opacity only (no rank1 size bump, no glow ring). */
        
        
        
        
        
        /* Hopicon face variant: art carries its own sphere — no chrome around it. */
        .sp-planet__disc--face {
            border: 0;
            background: none;
        }
        .sp-planet__disc--face svg {
            display: block;
            width: 100%;
            height: 100%;
        }
        /* Faces self-shade; size alone carries rank hierarchy. Heavy dimming buries the art. */
        .sp-planet--rank2 .sp-planet__disc--face { opacity: 0.92; }
        .sp-planet--rank3 .sp-planet__disc--face { opacity: 0.85; }
        
        .sp-planet--dimmed { opacity: 0.42; }
        
        .sp-detail {
            display: grid;
            gap: 16px;
            padding: 4px 2px 2px;
        }
        
        
        
        
        .sp-detail__section p {
            margin: 0;
            font-size: 14px;
            line-height: 1.62;
            color: var(--chart-text-muted);
        }
        .sp-invite {
            display: inline-block;
            justify-self: center;
            padding: 2px 1px 5px;
            background: none;
            border: 0;
            border-bottom: 1px solid rgba(251, 191, 36, 0.35);
            font-family: var(--font-display);
            font-size: 11px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: rgba(232, 195, 110, 0.88);
            cursor: pointer;
            transition: color var(--hop-motion-standard), border-color var(--hop-motion-standard), text-shadow var(--hop-motion-standard);
        }
        .sp-invite:hover,
        .sp-invite:active {
            color: rgba(244, 214, 140, 1);
            border-bottom-color: rgba(232, 195, 110, 0.7);
            text-shadow: 0 0 14px rgba(251, 191, 36, 0.45);
        }
        .sp-invite__note {
            margin-top: 6px;
            font-size: 11px;
            font-style: italic;
            color: var(--chart-text-meta);
            text-align: center;
        }
        .sp-reveal {
            animation: sp-materialize 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        @keyframes sp-drift-a {
            from { transform: translate(0, -4px); }
            to { transform: translate(0, 4px); }
        }
        @keyframes sp-drift-b {
            from { transform: translate(-4px, 3px); }
            to { transform: translate(4px, -3px); }
        }
        @keyframes sp-drift-c {
            from { transform: translate(4px, 0); }
            to { transform: translate(-4px, 0); }
        }
        @keyframes sp-glow-pulse {
            0%, 100% { box-shadow: 0 0 14px rgba(251, 191, 36, 0.18); }
            50% { box-shadow: 0 0 26px rgba(251, 191, 36, 0.32); }
        }
        @keyframes sp-materialize {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @media (prefers-reduced-motion: reduce) {
            .sp-planet__body {
                animation: none !important;
            }
            .sp-reveal {
                animation-duration: 1ms !important;
                animation-delay: 0ms !important;
            }
        }
        @media (max-width: 640px) {
            /* rank1 size override removed — uniform mobile size handled in base block */
        }

        /* Auth Screen */
        #auth-screen {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: var(--hop-overlay-backdrop);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            z-index: 110;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            transition: opacity 0.5s ease;
        }
        #auth-screen::before {
            content: '';
            position: absolute;
            width: 600px; height: 600px;
            background: radial-gradient(ellipse, rgba(217,119,6,0.14) 0%, transparent 70%);
            border-radius: 50%;
            z-index: 0;
            pointer-events: none;
        }
        #auth-screen > * { position: relative; z-index: 1; }
        #auth-screen.hidden { opacity: 0; pointer-events: none; }

        @keyframes panelEnter {
            from { opacity: 0; transform: translateY(18px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        #auth-main-panel {
            animation: panelEnter 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
        }

        .planet-wave {
            display: flex; justify-content: center; align-items: center;
            gap: 10px; margin-bottom: 20px; margin-top: -4px;
        }
        .planet-pip {
            opacity: 0.32; transform: scale(1);
            animation: pip-pulse 4.2s ease-in-out infinite;
            overflow: visible;
        }
        .planet-pip:nth-child(1) { animation-delay: 0s; }
        .planet-pip:nth-child(2) { animation-delay: 0.35s; }
        .planet-pip:nth-child(3) { animation-delay: 0.70s; }
        .planet-pip:nth-child(4) { animation-delay: 1.05s; }
        .planet-pip:nth-child(5) { animation-delay: 1.40s; }
        .planet-pip:nth-child(6) { animation-delay: 1.75s; }
        .planet-pip:nth-child(7) { animation-delay: 2.10s; }
        @keyframes pip-pulse {
            0%, 100% { opacity: 0.32; transform: scale(1); }
            14%      { opacity: 0.75; transform: scale(1.14); }
            28%      { opacity: 0.32; transform: scale(1); }
        }

        #auth-main-panel {
            transition: opacity 0.45s ease, transform 0.45s ease;
        }
        #auth-main-panel.auth-panel-hidden {
            opacity: 0;
            pointer-events: none;
            transform: translateY(10px);
        }
        #auth-subtitle {
            transition: opacity 0.3s ease;
        }
        #auth-subtitle.auth-subtitle-gone {
            opacity: 0;
            pointer-events: none;
        }

        .auth-toggle-link {
            appearance: none;
            background: transparent;
            border: 0;
            padding: 0;
            font-family: inherit;
            color: var(--chart-accent-text);
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            text-decoration: none;
            text-underline-offset: 4px;
            transition: color var(--hop-motion-standard), text-decoration-color var(--hop-motion-standard);
        }
        .auth-toggle-link:hover {
            color: var(--chart-accent-glow);
            text-decoration: underline;
            text-decoration-thickness: 1px;
        }

        .pw-match-msg {
            font-size: 10px; margin-top: 4px; min-height: 14px;
            transition: color 0.2s ease;
        }
        .pw-match-msg.match    { color: #22c55e; }
        .pw-match-msg.mismatch { color: #ef4444; }
        .input-field.pw-field-match    { border-color: rgba(34,197,94,0.5); }
        .input-field.pw-field-mismatch { border-color: rgba(239,68,68,0.5); }

        /* (Old top-right action cluster removed — these IDs now live as .account-row
           inside #account-menu; see the monogram/menu block earlier in this file.) */

        /* Autocomplete List */
        #city-results {
            position: absolute; width: 100%; max-height: 150px; overflow-y: auto;
            background: var(--hop-surface-popover-bg); border: 1px solid var(--hop-surface-panel-border); border-radius: 0 0 10px 10px;
            box-shadow: var(--hop-shadow-surface-panel);
            backdrop-filter: blur(var(--hop-surface-blur-panel));
            -webkit-backdrop-filter: blur(var(--hop-surface-blur-panel));
            z-index: 10; margin-top: -10px; display: none;
        }
        .city-item { padding: 10px; cursor: pointer; font-size: 12px; color: var(--chart-text-muted); border-bottom: 1px solid rgba(255,255,255,0.08); transition: background var(--hop-motion-standard), color var(--hop-motion-standard); }
        .city-item:hover { background: rgba(251,191,36,0.08); color: white; }

        /* --- Password toggle & strength indicator --- */
        .pw-wrapper { position: relative; }
        .pw-wrapper .input-field { padding-right: 42px; }
        .pw-toggle {
            position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
            background: none; border: none; color: var(--chart-text-meta); cursor: pointer; font-size: 13px;
            padding: 2px 4px; line-height: 1;
            transition: color var(--hop-motion-standard);
        }
        .pw-toggle:hover { color: var(--chart-accent-text); }

        #pw-strength { margin-top: 6px; display: none; }
        #pw-strength .pw-bar { height: 4px; border-radius: 2px; transition: width 0.3s, background 0.3s; }
        #pw-strength .pw-text { font-size: 10px; margin-top: 2px; }

        /* --- City selection indicator --- */
        .city-status { font-size: 10px; margin-top: 4px; min-height: 16px; }
        .city-status.selected { color: #22c55e; }
        .city-status.required { color: #f87171; }

        /* --- Forgot password panel --- */
        #forgot-pw-panel { margin-top: 12px; }
        .dev-note { background: rgba(217,119,6,0.12); border: 1px solid rgba(217,119,6,0.25); border-radius: 8px; padding: 8px 10px; font-size: 10px; color: #fbbf24; margin-top: 8px; }

        /* --- Foundational Pattern wheel-centered top stack (title, metadata, layer controls) --- */
        
        .chart-viz-title-wrap[hidden] { display: none !important; }
        .chart-viz-title-inner {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0 4px;
            pointer-events: auto;
            position: relative;
            font-size: clamp(13px, 2.1vw, 17px);
        }
        .chart-viz-title-text {
            font-family: var(--font-display);
            font-size: 1em;
            letter-spacing: var(--hop-type-section-title-tracking);
            color: var(--chart-text-eyebrow);
            text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
        }
        .chart-nos-info-btn {
            flex-shrink: 0;
            box-sizing: border-box;
            width: 1.35em;
            height: 1.35em;
            min-width: 20px;
            min-height: 20px;
            margin: 0;
            padding: 0;
            border: 1px solid var(--hop-surface-control-border);
            border-radius: 9999px;
            background: var(--hop-surface-control-bg);
            color: var(--chart-text-eyebrow);
            font-size: 0.52em;
            line-height: 1;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
            position: relative;
            top: auto;
            margin-left: 0.08em;
            transition: border-color 0.2s ease, background 0.2s ease;
        }
        .chart-nos-info-btn:hover,
        .chart-nos-info-btn:focus-visible {
            border-color: var(--hop-surface-control-border-hover);
            background: var(--hop-surface-control-hover-bg);
            outline: none;
        }
        .chart-nos-tooltip {
            position: absolute;
            left: 50%;
            top: calc(100% + 12px);
            transform: translateX(-50%);
            width: min(340px, calc(100vw - 40px));
            padding: 14px 16px;
            background: var(--hop-surface-popover-bg);
            border: 1px solid var(--hop-surface-panel-border);
            border-radius: var(--hop-radius-panel);
            box-shadow: var(--hop-shadow-surface-panel);
            backdrop-filter: blur(var(--hop-surface-blur-panel));
            -webkit-backdrop-filter: blur(var(--hop-surface-blur-panel));
            text-align: left;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.2s ease, visibility 0.2s ease;
            z-index: 56;
        }
        .chart-nos-tooltip p {
            margin: 0 0 10px 0;
            font-size: 12px;
            line-height: 1.55;
            color: var(--chart-text-muted);
        }
        .chart-nos-tooltip p:last-child { margin-bottom: 0; }
        /* Tooltip only for ⓘ hover/focus or click-open; not for title text. */
        .chart-viz-title-inner:has(.chart-nos-info-btn:hover) .chart-nos-tooltip,
        .chart-viz-title-inner:has(.chart-nos-info-btn:focus-visible) .chart-nos-tooltip,
        .chart-viz-title-inner:has(.chart-nos-tooltip:hover) .chart-nos-tooltip,
        .chart-viz-title-wrap.chart-nos-tooltip-open .chart-nos-tooltip {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        /* Chart Dialogue: ⓘ tooltip (click + hover), mirrors Native OS / Identity pattern */
        #chart-chat-title-wrap:has(#chart-chat-info-btn:hover) #chart-chat-tooltip,
        #chart-chat-title-wrap:has(#chart-chat-info-btn:focus-visible) #chart-chat-tooltip,
        #chart-chat-title-wrap:has(#chart-chat-tooltip:hover) #chart-chat-tooltip,
        #chart-chat-title-wrap.chart-chat-tooltip-open #chart-chat-tooltip {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        /* Reassert fixed viewport anchoring: later .chart-nos-tooltip / .il-arch-tooltip override .section-toolkit-flyout position. */
        @media (max-width: 1023px) {
            .chart-nos-tooltip.section-toolkit-flyout,
            .il-arch-tooltip.section-toolkit-flyout {
                position: fixed;
                left: 50%;
                transform: translateX(-50%);
                top: calc(var(--mobile-content-top-offset) + 2px);
                width: min(340px, calc(100vw - 24px));
                max-height: min(72vh, calc(100dvh - 120px));
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                z-index: 60;
            }
        }

        /* --- Threshold option gating (locked state) --- */
        .threshold-option.locked {
            opacity: 0.2; pointer-events: none; cursor: not-allowed;
        }

        /* --- Account modals --- */
        #delete-account-modal,
        #feedback-modal,
        #reconsent-modal {
            display: none; position: fixed; inset: 0; z-index: 200;
            background: var(--hop-overlay-backdrop-strong);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            justify-content: center; align-items: center;
        }
        #delete-account-modal.show,
        #feedback-modal.show,
        #reconsent-modal.show { display: flex; }
        /* Delete confirm sits above the re-consent gate: it is opened FROM that gate
           ("Decline and delete"), and equal z-index would let the gate (later in source)
           paint over it. Cancelling delete then reveals the gate again -- no state flag. */
        #delete-account-modal { z-index: 210; }

        /* --- Profile modal (consolidated account surface). z-index 150 sits BELOW
               the z-200 confirm modals so delete/withdraw always stack on top. --- */
        #profile-modal {
            display: none; position: fixed; inset: 0; z-index: 150;
            background: var(--hop-overlay-backdrop-strong);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            justify-content: center; align-items: center;
        }
        #profile-modal.show { display: flex; }
        .profile-modal-box {
            display: flex; flex-direction: column;
            width: 92%; max-width: 640px;
            height: min(720px, calc(100dvh - 48px));
            max-height: calc(100dvh - 48px);
            overflow: hidden;
            background: var(--hop-surface-modal-bg); border: 1px solid var(--hop-surface-modal-border);
            border-radius: var(--hop-radius-modal);
            box-shadow: var(--hop-shadow-surface-modal);
            backdrop-filter: blur(var(--hop-surface-blur-modal));
            -webkit-backdrop-filter: blur(var(--hop-surface-blur-modal));
        }
        .profile-modal-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 20px 24px 16px; border-bottom: 1px solid rgba(255,255,255,0.07);
        }
        .profile-modal-title {
            font-family: var(--font-display); font-size: 17px; font-weight: 600;
            color: var(--chart-text-primary); margin: 0;
        }
        .profile-modal-close {
            display: inline-flex; background: none; border: 0; padding: 6px;
            border-radius: 8px; line-height: 0; cursor: pointer; color: rgba(148,163,184,0.75);
        }
        .profile-modal-close:hover { color: var(--chart-text-primary); background: rgba(255,255,255,0.05); }
        .profile-modal-body {
            display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden;
            gap: 24px; padding: 20px 24px;
        }
        .profile-tab-rail { display: flex; flex-direction: column; gap: 4px; flex: 0 0 160px; min-width: 0; }
        .profile-tab {
            display: block; width: 100%; text-align: left; background: none; border: 0;
            cursor: pointer; font: inherit; font-size: 14px; color: var(--chart-text-meta);
            padding: 9px 12px; border-radius: 9px;
        }
        .profile-tab:hover { background: rgba(255,255,255,0.04); color: var(--chart-text-primary); }
        .profile-tab.is-active { background: rgba(251,191,36,0.10); color: var(--chart-accent-glow); }
        /* .profile-tab sets display:block, an author rule that beats the UA's
           [hidden]{display:none} -- so the attribute alone does NOT hide a tab. */
        .profile-tab[hidden] { display: none; }
        .profile-tab-panels { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; }
        .profile-panel { display: none; }
        .profile-panel.is-active { display: block; }
        .profile-panel.privacy-panel.is-active {
            display: flex; flex-direction: column; gap: 16px;
        }
        .profile-section { margin-bottom: 22px; }
        .profile-section:last-child { margin-bottom: 0; }
        .profile-section-title {
            font-family: 'Marcellus SC', serif; font-size: 11px; letter-spacing: 0.14em;
            text-transform: uppercase; color: rgba(148,163,184,0.72); margin: 0 0 10px;
        }
        .profile-inline-status { font-size: 12px; color: #22c55e; align-self: center; margin-right: auto; }
        /* Birth details as an instrument readout — the one truly personal block in
           the modal, so it reads like coordinates on a panel, not a form field. */
        .birth-card {
            display: flex; flex-direction: column; gap: 6px;
            padding: 16px 18px; margin: 0 0 16px;
            border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
            background: rgba(255,255,255,0.02);
        }
        .birth-card-primary {
            display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
        }
        .birth-fld-date {
            font-family: 'Marcellus SC', serif; font-size: 20px; letter-spacing: 0.01em;
            color: var(--chart-text-primary); line-height: 1.15;
        }
        .birth-fld-time {
            font-size: 13px; letter-spacing: 0.08em;
            color: var(--chart-accent-glow); font-variant-numeric: tabular-nums;
        }
        .birth-fld-place {
            font-size: 13px; color: rgba(232,238,247,0.82); line-height: 1.4;
        }
        .birth-fld-coords {
            font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
            color: rgba(148,163,184,0.62); font-variant-numeric: tabular-nums;
        }
        .birth-card.hidden,
        .birth-fld-time.hidden, .birth-fld-place.hidden, .birth-fld-coords.hidden { display: none; }
        .profile-birth-empty {
            font-size: 13px; color: rgba(148,163,184,0.72); line-height: 1.5; margin: 0 0 16px;
        }
        /* In-modal birth editor (Approach 1): #birth-editor-fields is relocated into
           #birth-edit-host on edit. Hide the tab rail so the edit is a focused view. */
        #profile-modal.birth-editing .profile-tab-rail { display: none; }
        .birth-edit-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
        .birth-edit-head .profile-section-title { margin: 0; }
        .birth-edit-back {
            display: inline-flex; align-items: center; gap: 3px;
            margin-left: -6px; padding: 4px 6px; border: 0; border-radius: 8px;
            background: none; color: rgba(148,163,184,0.85); font: inherit; font-size: 13px;
            cursor: pointer;
        }
        .birth-edit-back:hover { color: var(--chart-text-primary); background: rgba(255,255,255,0.05); }
        #birth-edit-host .input-group:first-child { margin-top: 0; }
        #profile-birth-edit-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
        .profile-danger { border-top: 1px solid rgba(255,255,255,0.07); padding-top: 18px; }
        .profile-section-divided { border-top: 1px solid rgba(255,255,255,0.07); padding-top: 18px; }
        .btn-danger-ghost {
            background: none; border: 1px solid rgba(248,113,113,0.30); cursor: pointer;
            color: #f87171; font: inherit; font-size: 13px; font-weight: 500;
            padding: 9px 16px; border-radius: 10px;
        }
        .btn-danger-ghost:hover { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.5); }
        .profile-modal-footer {
            display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
            padding: 14px 24px; border-top: 1px solid rgba(255,255,255,0.07);
            font-size: 12px; color: rgba(148,163,184,0.55);
        }
        .profile-modal-footer a { color: rgba(148,163,184,0.75); text-decoration: none; }
        .profile-modal-footer a:hover { color: var(--chart-accent-glow); text-decoration: underline; }

        /* Identity header is a <button> (opens Profile modal); reset native button
           chrome — the .account-identity* layout rules above/below carry over. */
        button.account-identity {
            background: none; border: 0; font: inherit; color: inherit;
            text-align: left; width: 100%; cursor: pointer;
        }
        button.account-identity:hover { background: rgba(255,255,255,0.04); border-radius: 10px; }

        /* Profile modal on phones: tab rail becomes a segmented top bar. */
        @media (max-width: 767px) {
            .profile-modal-body { flex-direction: column; gap: 16px; padding: 16px; }
            .profile-tab-rail {
                flex-direction: row; flex: 0 0 auto; gap: 4px;
                background: rgba(255,255,255,0.03); border-radius: 10px; padding: 4px;
            }
            .profile-tab { flex: 1 1 0; text-align: center; }
            .profile-modal-header { padding: 16px 16px 12px; }
            .profile-modal-footer { padding: 12px 16px; }
        }

        /* --- Consent (Privacy & data) — rows live in the Profile modal's Privacy
               tab; the ~460px reading width is provided by the tab panel column
               (modal box 640px minus the 160px rail). --- */
        .consent-subhead {
            font-family: 'Marcellus SC', serif; font-size: 11px; letter-spacing: 0.14em;
            text-transform: uppercase; color: rgba(148,163,184,0.72);
            margin: 18px 0 2px;
        }
        .consent-row {
            display: flex; align-items: center; justify-content: space-between; gap: 14px;
            padding: 13px 0; border-top: 1px solid rgba(255,255,255,0.07);
        }
        .consent-row:first-of-type { border-top: none; }
        .consent-row .consent-name { font-size: 13px; color: rgba(232,238,247,0.92); }
        .consent-name-link {
            color: inherit;
            text-decoration: none;
            border-radius: 2px;
        }
        .consent-name-link:hover,
        .consent-name-link:focus-visible {
            text-decoration: underline;
            text-underline-offset: 3px;
        }
        .consent-row .consent-name small {
            display: block; color: rgba(148,163,184,0.62); font-size: 11px;
            margin-top: 3px; font-weight: 300;
        }
        .consent-lock { color: rgba(148,163,184,0.6); flex: 0 0 auto; }
        .consent-locknote {
            font-size: 11px; color: rgba(148,163,184,0.62); line-height: 1.55;
            margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.07);
        }
        .privacy-panel .profile-section { margin-bottom: 0; }
        .privacy-section { margin: 0; }
        .privacy-export-section {
            display: flex; align-items: flex-start; justify-content: space-between;
            flex-direction: column; gap: 12px;
        }
        .privacy-section-copy { min-width: 0; }
        .privacy-helper {
            color: rgba(148,163,184,0.72); font-size: 12px; line-height: 1.45;
            margin: 0; max-width: 330px;
        }
        .privacy-required-section,
        .nominee-disclosure,
        .privacy-danger {
            border-top: 1px solid rgba(255,255,255,0.07); padding-top: 14px;
        }
        /* .privacy-helper is margin:0 by default; the danger section stacks it above
           the button instead of beside it, so it has to supply its own gap. */
        .privacy-danger .privacy-helper { margin-bottom: 10px; }
        .privacy-required-section .profile-section-title { margin-bottom: 2px; }
        .privacy-required-row {
            justify-content: flex-start; gap: 0; padding: 10px 0;
        }
        .privacy-required-row .consent-name { line-height: 1.35; }
        .privacy-required-note {
            margin: 4px 0 0; padding-top: 0; border-top: 0;
        }
        .nominee-toggle {
            display: flex; align-items: center; justify-content: space-between; gap: 14px;
            width: 100%; padding: 2px 0; border: 0; background: none; color: inherit;
            text-align: left; cursor: pointer; font: inherit;
        }
        .nominee-toggle:hover .nominee-title,
        .nominee-toggle:focus-visible .nominee-title { color: var(--chart-text-primary); }
        .nominee-toggle:focus-visible {
            outline: 2px solid rgba(251,191,36,0.36); outline-offset: 4px; border-radius: 6px;
        }
        .nominee-toggle-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
        .nominee-title {
            font-family: 'Marcellus SC', serif; font-size: 11px; letter-spacing: 0;
            text-transform: uppercase; color: rgba(148,163,184,0.72);
        }
        .nominee-summary {
            color: rgba(232,238,247,0.86); font-size: 13px; line-height: 1.35;
            overflow-wrap: anywhere;
        }
        .nominee-chevron {
            width: 8px; height: 8px; border-right: 1.5px solid rgba(148,163,184,0.8);
            border-bottom: 1.5px solid rgba(148,163,184,0.8); flex: 0 0 auto;
            transform: rotate(45deg); transition: transform 160ms ease, border-color 160ms ease;
        }
        .nominee-toggle:hover .nominee-chevron,
        .nominee-toggle:focus-visible .nominee-chevron { border-color: var(--chart-text-primary); }
        .nominee-toggle[aria-expanded="true"] .nominee-chevron { transform: rotate(225deg); }
        .nominee-form { padding-top: 14px; }
        .nominee-form .input-group { margin-bottom: 12px; }
        .privacy-danger { margin-top: 0; }
        .privacy-export-section .btn-primary { margin-top: 0; }
        @media (max-width: 767px) {
            .privacy-export-section { flex-direction: column; align-items: stretch; }
            .privacy-export-section .btn-primary { align-self: flex-start; }
        }
        .consent-policy-note { font-size: 10px; color: rgba(148,163,184,0.5); margin-top: 10px; }
        /* AI disclaimer. This is a NOTICE, not consent: stated in our voice, never
           ticked, never recorded. It is deliberately OUTSIDE #consent-birth-group and
           outside the gate's consent box -- bundling a non-consent statement into a
           DPDP notice dilutes the s6(3) "specific and unambiguous" consent next to it.
           It previously sat at pl-6, optically inside the checkbox label's text column,
           where it read as a second clause of the thing being consented to.
           The binding disclaimer is tos.html (informational-only + no professional
           advice); this line is the pointer to it. Do not move it back up. */
        .consent-ai-note {
            font-size: 11px; line-height: 1.5; text-align: center;
            color: rgba(148,163,184,0.55); margin: 12px 0 0;
        }
        .change-password-modal-box {
            background: var(--hop-surface-modal-bg); border: 1px solid var(--hop-surface-modal-border);
            border-radius: var(--hop-radius-modal); padding: 28px; max-width: 420px; width: 90%;
            box-shadow: var(--hop-shadow-surface-modal);
            backdrop-filter: blur(var(--hop-surface-blur-modal));
            -webkit-backdrop-filter: blur(var(--hop-surface-blur-modal));
        }
        .delete-modal-box {
            background: var(--hop-surface-modal-bg); border: 1px solid rgba(248, 113, 113, 0.26);
            border-radius: var(--hop-radius-modal); padding: 28px; max-width: 380px; width: 90%;
            box-shadow: var(--hop-shadow-surface-modal);
            backdrop-filter: blur(var(--hop-surface-blur-modal));
            -webkit-backdrop-filter: blur(var(--hop-surface-blur-modal));
        }

        /* --- Feedback button (always-visible, below gear icon) --- */
        #feedback-tool {
            position: fixed;
            top: calc(var(--chart-actions-top) + var(--chart-action-gap));
            right: var(--chart-actions-right);
            left: auto;
            bottom: auto;
            z-index: 32;
            transition: opacity 0.22s ease;
        }
        #feedback-tool .tool-btn {
            width: 44px;
            height: 44px;
            border-radius: 16px;
            background: var(--hop-surface-control-bg);
            border: 1px solid var(--hop-surface-control-border);
            color: var(--chart-accent-text);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(var(--hop-surface-blur-control));
            -webkit-backdrop-filter: blur(var(--hop-surface-blur-control));
            box-shadow: var(--hop-shadow-surface-control);
            transition: var(--hop-control-transition);
            animation: feedback-ring 2.8s ease-in-out infinite;
        }
        #feedback-tool .tool-btn.feedback-seen {
            animation: none;
        }
        #feedback-tool .tool-btn:hover {
            background: rgba(251, 191, 36, 0.14);
            border-color: var(--hop-surface-control-border-hover);
            transform: translateY(var(--hop-motion-lift-y));
            animation: none;
        }
        #feedback-tool .tool-btn:active { transform: translateY(0); }
        #feedback-tool .tool-btn:focus-visible {
            outline: var(--hop-focus-outline);
            outline-offset: var(--hop-focus-outline-offset);
        }
        @keyframes feedback-ring {
            0%, 100% { box-shadow: var(--hop-shadow-surface-control), 0 0 0 0 rgba(245, 158, 11, 0); }
            50%       { box-shadow: var(--hop-shadow-surface-control), 0 0 0 5px rgba(245, 158, 11, 0.30); }
        }
        /* Hide feedback button while action cluster is fanned open (cluster slot 1 lands at the same position). */
        body.chart-actions-open #feedback-tool {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.22s ease;
        }

        @media (max-width: 767px) {
            :root {
                /* Unified mobile command deck anchor (near bottom, above safe area). */
                --mobile-deck-bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px));
            }
            #auth-screen,
            #profile-screen {
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                padding:
                    max(14px, env(safe-area-inset-top))
                    max(12px, env(safe-area-inset-right))
                    max(14px, env(safe-area-inset-bottom))
                    max(12px, env(safe-area-inset-left));
            }
            #auth-screen {
                justify-content: center;
                align-items: center;
            }
            #profile-screen {
                justify-content: flex-start;
                align-items: center;
            }
            #auth-screen h1,
            #profile-screen h1 {
                margin-top: 8px;
                font-size: 1.5rem;
            }
            .glass-panel {
                width: 100%;
                max-width: 100%;
                padding: 18px;
            }
            #forgot-pw-panel {
                margin-top: 10px !important;
            }
            /* Title row uses #mobile-section-header; keep wrap off-screen for tooltip anchors only. */
            
            .chart-viz-title-inner {
                font-size: 12px;
            }
            .chart-viz-title-text {
                letter-spacing: 0.04em;
            }
            #hud-layer {
                top: calc(var(--mobile-content-top-offset) + 2px);
                max-width: calc(100vw - 14px);
            }
            .hud-btn.hop-glass-chip {
                padding: 8px 12px;
                font-size: 11px;
            }
            
            .chart-stage {
                inset: 0;
                overflow: visible;
                border: none;
                border-radius: 0;
                box-shadow: none;
                background: transparent;
            }
            
            #canvas-container {
                border-radius: 0;
                overflow: visible;
            }
            
            .il-header { margin-bottom: 12px; }
            .il-header-title-inner { font-size: 18px; min-height: 0; margin-bottom: 4px; }
            .il-header h2 { letter-spacing: var(--hop-type-section-title-tracking); }
            .il-header p { font-size: 11px; }
            
            .il-section {
                border-radius: 16px;
            }
            .energy-panel::before {
                border-radius: 16px 16px 0 0;
            }
            .il-section-toggle:hover {
                border-radius: 16px;
            }
            .il-section-toggle { padding: 13px 14px; border-radius: 16px; }
            .il-section-content { padding: 0 14px 14px 14px; }
            
            .il-preview { padding: 0 14px 14px; }
            .il-preview-grid { gap: 12px 14px; }
            .il-preview-trio { grid-template-columns: 1fr; gap: 12px 14px; }
            .identity-visual { gap: 13px; }
            .iv-core,
            .iv-detail { padding: 14px; }
            .iv-axis { padding: 10px; }
            .iv-axis__title {
                align-items: flex-start;
                flex-direction: column;
                gap: 4px;
            }
            .iv-axis__title strong { text-align: left; }
            .iv-axis__rail {
                grid-template-columns: 1fr;
                gap: 8px;
            }
            .iv-axis__line {
                width: 1px;
                height: 16px;
                justify-self: center;
                background: linear-gradient(180deg, var(--chart-border-accent), var(--chart-border-accent-strong), var(--chart-border-accent));
            }
            .iv-node,
            .iv-node--right {
                justify-content: flex-start;
                text-align: left;
            }
            .iv-path__grid {
                grid-template-columns: 1fr;
            }
            .iv-knot__grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }
            .iv-knot-stage {
                text-align: left;
                padding: 0;
            }
            .iv-knot__over {
                stroke-width: 6;
            }
            .iv-knot__mask {
                stroke-width: 13;
            }
            #info-modal {
                width: min(360px, calc(100vw - 24px));
                max-height: calc(100dvh - 24px);
                padding: 18px;
            }
            .delete-modal-box {
                width: calc(100vw - 20px);
                max-width: 420px;
                padding: 18px;
            }
        }

        @media (max-width: 430px) {
            .chart-stage {
                inset: 0;
                border-radius: 0;
            }
            
            #canvas-container { border-radius: 0; }
            /* Reserve room for the absolutely-positioned secondary HUD cluster
               so it can't clip off the right edge at narrow mobile widths.
               The layer is centered (left:50%; translateX(-50%)), so the
               reservation splits per side: 2 × (8px offset + 66px cluster). */
            #hud-layer { width: auto; max-width: calc(100vw - 148px); }
            .il-preview-grid { grid-template-columns: 1fr; }
        }

        /* === PHASE 7 RESPONSIVE PATCH === */

        /* Touch targets: ensure all buttons meet 44×44px minimum on touch devices */
        @media (pointer: coarse) {
            /* .tool-switch (44x24 pill) and .hud-btn excluded: forcing min-height:44px
               deformed the toggle into a circle and bloated the HUD chips on mobile.
               Their tap targets come from their own padding/intrinsic size. */
            .tool-btn,
            .sidebar-tab,
            .hint-close {
                min-width: 44px;
                min-height: 44px;
            }
            /* Prevent ghost-click / 300ms delay on chart canvas interaction area */
            #canvas-container {
                touch-action: none;
            }
        }

        /* Very small screens (320px) — prevent overflow on auth panel */
        @media (max-width: 360px) {
            .glass-panel {
                padding: 16px 12px;
            }
            .auth-panel {
                max-width: 100%;
                border-radius: 12px;
            }
        }

        /* Ensure profile screen is scrollable on short viewports */
        @media (max-height: 700px) {
            #profile-screen {
                overflow-y: auto;
                max-height: 100dvh;
                padding-bottom: 24px;
            }
        }

        /* Modal overflow protection on small screens */
        @media (max-width: 430px) {
            .change-password-modal-box,
            .delete-modal-box {
                max-height: 90dvh;
                overflow-y: auto;
            }
        }

        /* Skip-to-content link */
        .skip-link {
            position: absolute;
            top: -100%;
            left: 8px;
            z-index: 9999;
            background: #fbbf24;
            color: #020204;
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            transition: top 0.1s;
        }
        .skip-link:focus {
            top: 8px;
        }

        /* === END PHASE 7 RESPONSIVE PATCH === */

        /* === PAYWALL OVERLAY === */
        
        .il-paywall-overlay {
            position: absolute;
            inset: 0;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(8, 4, 24, 0.88);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            border-radius: 8px;
        }
        .il-paywall-inner {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 24px 20px;
            text-align: center;
        }
        .il-paywall-lock { font-size: 28px; }
        .il-paywall-name {
            font-family: var(--font-display);
            font-size: 13px;
            letter-spacing: 0.08em;
            color: #c9a84c;
            text-transform: uppercase;
        }
        .il-paywall-desc {
            font-size: 12px;
            color: rgba(255,255,255,0.55);
        }
        .il-paywall-btn {
            margin-top: 4px;
            padding: 9px 20px;
            background: #4a0e8f;
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 13px;
            font-family: var(--font-display);
            letter-spacing: 0.05em;
            cursor: pointer;
            transition: background 0.2s;
        }
        .il-paywall-btn:hover { background: #6a1abf; }
        .il-preview-btn.is-checking {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: wait;
            opacity: 0.82;
        }
        .il-preview-btn.is-checking::before {
            content: '';
            width: 12px;
            height: 12px;
            border: 1.5px solid rgba(251, 191, 36, 0.28);
            border-top-color: currentColor;
            border-radius: 50%;
            animation: il-spin 0.8s linear infinite;
        }
        .il-preview-btn:disabled { transform: none; }
        /* When the overlay is the only expanded content, keep its controls readable. */
        
        /* === END PAYWALL OVERLAY === */


/* ====== Identity Layer styles — migrated verbatim from inline <style> ====== */

        .chart-stage::before {
            content: '';
            position: absolute; inset: 0;
            background:
                radial-gradient(ellipse at 50% 52%, rgba(255, 180, 70, 0.018) 0%, transparent 52%),
                linear-gradient(180deg, rgba(2, 2, 4, 0.28) 0%, transparent 18%, transparent 76%, rgba(2, 2, 4, 0.20) 100%);
            pointer-events: none;
            z-index: 3;
            border-radius: 0;
        }

        .modal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2px; }

        /* Modal Title Card (Planet title + two columns: House / Sign) */
        .modal-topline {
            margin-top: 8px;
            font-size: 12px;
            color: rgba(226, 232, 240, 0.88);
            line-height: 1.35;
        }
        .modal-grid {
            margin-top: 12px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
            position: relative;
        }
        .modal-grid::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 6px;
            bottom: 6px;
            width: 1px;
            background: rgba(255, 255, 255, 0.08);
            transform: translateX(-0.5px);
            pointer-events: none;
        }
        .modal-col { display: grid; gap: 6px; padding: 2px 10px; position: relative; }
        /* Element accents (set via CSS vars on #info-modal at open time) */
        .modal-col::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: -2px;
            height: 2px;
            border-radius: 9999px;
            background: var(--col-accent, rgba(255, 180, 70, 0.35));
            opacity: 0.9;
            pointer-events: none;
        }
        .modal-col.house { padding-left: 2px; padding-right: 14px; --col-accent: var(--house-accent, rgba(255, 180, 70, 0.35)); }
        .modal-col.sign { padding-left: 14px; padding-right: 2px; --col-accent: var(--sign-accent, rgba(255, 180, 70, 0.35)); }
        .modal-k {
            font-size: var(--hop-type-label-size);
            letter-spacing: var(--hop-type-label-tracking);
            text-transform: uppercase;
            color: rgba(148, 163, 184, 0.88);
        }
        .modal-v {
            font-family: var(--font-display);
            font-size: 16px;
            line-height: 1.2;
            color: rgba(233, 240, 252, 0.92);
            overflow-wrap: break-word;
        }
        .modal-kw {
            font-size: 12px;
            color: rgba(226, 232, 240, 0.90);
            line-height: 1.35;
            overflow-wrap: break-word;
        }
        @media (max-width: 430px) {
            .modal-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
            .modal-grid::before { display: block; }
            .modal-col { padding: 2px 10px; }
            .modal-v { font-size: 15px; }
}

        .legend-item { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; font-size: 9px; color: #cbd5e1; }

        /* 3D Labels — shared rendering base */
        .zodiac-label,
        .planet-label-text,
        .house-numeral,
        .house-ruler-text {
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
            backface-visibility: hidden;
            position: relative;
            transform: translateZ(0);
            pointer-events: none;
            user-select: none;
            transition: opacity 0.5s;
        }
        .zodiac-label::after {
            content: '';
            display: block;
            height: 1px;
            width: 62%;
            margin: 3px auto 0;
            background: var(--sign-accent, rgba(255, 180, 70, 0.32));
            box-shadow: 0 0 10px rgba(0,0,0,0.35);
            border-radius: 9999px;
        }

        /* B) Planet labels — bare engraved text, no chip. The face beside the
           label carries the planet's colour and identity; a boxed chip out-weighs
           the planet it names. Sign-label treatment, one step brighter. */
        .planet-label-text {
            font-family: var(--font-display);
            font-size: clamp(10px, 0.8vw, 13px);
            font-weight: 600;
            text-transform: uppercase;
            color: rgba(244, 240, 232, 0.92);
            letter-spacing: 1.6px;
            text-shadow: 0 2px 10px rgba(0,0,0,0.90), 0 0 14px rgba(0,0,0,0.60);
            /* Flat, authentic per-planet accent (set via inline CSS var) */
            --planet-accent: rgba(255, 180, 70, 0.85);
        }

        /* Chart label tuning on small screens (Identity Layer does not use these classes) */
        @media (max-width: 767px) {
            .planet-label-text { letter-spacing: 1.2px; }
}
        .sidebar-rail-divider {
            flex-shrink: 0;
            height: 1px;
            width: 60%;
            background: rgba(255, 180, 70, 0.15);
            margin: 2px 0;
            border: none;
        }
        .sidebar-tooltip {
            position: absolute;
            left: calc(100% + 10px);
            top: 50%;
            transform: translateY(-50%);
            background: var(--hop-surface-popover-bg);
            border: 1px solid var(--hop-surface-panel-border);
            padding: 6px 10px;
            border-radius: 8px;
            box-shadow: var(--hop-shadow-surface-panel);
            backdrop-filter: blur(var(--hop-surface-blur-panel));
            -webkit-backdrop-filter: blur(var(--hop-surface-blur-panel));
            font-size: var(--hop-type-label-size);
            color: #e2e8f0;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            transition: opacity var(--hop-motion-fast);
        }

        @media (max-width: 1023px) {
            .sidebar-tooltip { left: calc(100% + 8px); }
}
        @media (max-width: 1023px) {
            #hamburger-btn:active {
                background: rgba(255, 180, 70, 0.18);
            }

            /* Tablet/mobile use the shared floating section header; keep the desktop
               title wrapper only as the fixed tooltip/HUD anchor. */
            .chart-viz-title-wrap {
                left: -9999px !important;
                top: 0 !important;
                width: 1px;
                height: 1px;
                max-width: none !important;
                transform: none !important;
                overflow: visible;
                pointer-events: none;
            }
}

        /* ============================================================ */
        /* #1 — Identity Layer View: Cosmic Layered Background          */
        /* ============================================================ */
        #identity-layer-view {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                radial-gradient(ellipse at 30% 20%, rgba(15, 25, 60, 0.3) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 80%, rgba(20, 20, 40, 0.25) 0%, transparent 60%),
                radial-gradient(ellipse at center, #0F1A2E 0%, #05080F 100%);
            z-index: 15;
            display: none;
            overflow-y: auto;
            overflow-x: hidden;
            /* Top offset moved onto the sticky .il-header so the header's own
               background covers the top zone as content scrolls beneath it. */
            padding: 0 20px 60px;
        }
        @media (max-width: 1023px) {
            /* Mobile shows the section title in the fixed top bar already, so the
               in-flow .il-header (promise/pricing) just scrolls away — no sticky
               band needed. Offset lives back on the view so the starfield shows. */
            .il-header {
                position: static;
                padding-top: 0;
                background: none;
            }
}

        .il-container {
            width: min(1280px, 100%);
            max-width: none;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }
        /* Quiet atmospheric lift behind the Identity content column */
        .center-glow::before {
            content: '';
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 132%; height: 72%;
            background: radial-gradient(ellipse at center, rgba(255, 170, 60, 0.08) 0%, rgba(255, 170, 60, 0.035) 42%, transparent 72%);
            pointer-events: none;
            z-index: -1;
            filter: blur(72px);
        }
        /* The single trust line, said once with authority instead of echoed in
           every card footnote. */
        .il-header-promise {
            max-width: 30em;
            margin: 8px auto 0;
            line-height: 1.5;
        }
        .energy-panel {
            background:
                linear-gradient(180deg, rgba(15, 26, 46, 0.60), rgba(8, 13, 22, 0.64)),
                var(--hop-surface-card-bg);
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: var(--hop-radius-card);
            box-shadow:
                inset 0 0 0 1px rgba(255, 180, 70, 0.035),
                var(--hop-shadow-surface-card);
            position: relative;
            isolation: isolate;
            transition: var(--hop-control-transition);
        }
        .energy-panel:hover {
            transform: none;
            border-color: rgba(255, 180, 70, 0.18);
            box-shadow:
                inset 0 0 0 1px rgba(255, 180, 70, 0.055),
                var(--hop-shadow-surface-card);
        }
        .energy-panel.expanded {
            background:
                linear-gradient(180deg, rgba(15, 26, 46, 0.68), rgba(8, 13, 22, 0.70)),
                var(--hop-surface-card-bg);
            border-color: rgba(255, 180, 70, 0.30);
            box-shadow:
                inset 3px 0 0 rgba(255, 180, 70, 0.22),
                inset 0 0 0 1px rgba(255, 180, 70, 0.07),
                var(--hop-shadow-surface-card);
        }
        .energy-panel::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(255, 180, 70, 0.12), transparent 34%);
            border-radius: inherit;
            pointer-events: none;
            z-index: 2;
            opacity: 0;
            transition: opacity var(--hop-motion-standard);
        }
        /* One light source (resting): with nothing expanded, the free report cards
           stay lit and the rest recede; attention (hover/focus) lifts one card.
           When a card expands, the aperture rule above takes over instead. */
        #identity-layer-view:not(:has(.energy-panel.expanded)) .il-grid > .energy-panel {
            opacity: 0.82;
            transition: opacity 300ms ease;
        }
        #identity-layer-view:not(:has(.energy-panel.expanded)) #il-strongest-planets,
        #identity-layer-view:not(:has(.energy-panel.expanded)) #il-strongest-houses,
        #identity-layer-view:not(:has(.energy-panel.expanded)) #il-karmic-journey,
        #identity-layer-view:not(:has(.energy-panel.expanded)) .il-grid > .energy-panel:hover,
        #identity-layer-view:not(:has(.energy-panel.expanded)) .il-grid > .energy-panel:focus-within {
            opacity: 1;
        }
        /* Single-column "spine": the layer reads top→bottom as one arc. Group
           titles divide the four movements
           instead of heading three columns. Narrow centered column = a reading,
           not a catalog. */
        .il-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 14px;
            width: min(680px, 100%);
            margin: 0 auto;
        }
        .il-grid > .il-section {
            width: 100%;
            min-width: 0;
            margin-bottom: 0;
            display: flex;
            flex-direction: column;
        }
        .il-grid .il-preview,
        .il-grid .il-preview * {
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
            overflow-wrap: anywhere;
        }
        .il-grid .il-preview-trio {
            grid-template-columns: 1fr;
        }
        .il-grid .il-preview-btn {
            white-space: normal;
        }
        .il-col-title {
            margin: 0;
            text-align: center;
            font-family: var(--font-display);
            font-size: 11px;
            line-height: 1.3;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--chart-accent-text);
        }
        /* Later movements get a hairline + breath above to mark the
           transition between groups. The first sits at the top, no divider. */
        .il-col-title--2,
        .il-col-title--3,
        .il-col-title--4 {
            margin-top: 12px;
            padding-top: 22px;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
        }
        /* Spine order: title1 -> strongest planets, strongest houses -> title2
           -> journey, lesson -> title3 -> care -> title4 -> hidden undeniables. */
        .il-col-title--1 { grid-row: 1; }
        .il-cell--c1r2 { grid-row: 2; }
        .il-cell--c1r3 { grid-row: 3; }
        .il-col-title--2 { grid-row: 4; }
        .il-cell--c2r2 { grid-row: 5; }
        .il-cell--c2r3 { grid-row: 6; }
        .il-col-title--3 { grid-row: 7; }
        .il-cell--c3r2 { grid-row: 8; }
        .il-col-title--4 { grid-row: 9; }
        .il-cell--c4r2 { grid-row: 10; }
        .il-grid > .energy-panel { min-width: 0; }

        /* Remediation RW2: one reusable center-stage report dialog. */
        html.il-report-scroll-lock,
        body.il-report-scroll-lock {
            overflow: hidden !important;
        }
        #identity-layer-view.il-report-open {
            overflow: hidden;
        }
        /* With the center-stage report open, the frosted band's only job —
           smearing scroll-by text under the sticky header — is done. The report
           overlay (z-index 5) paints above the header but its backdrop is only
           72% opaque, so the bright frosted bar bleeds through as a ghost band.
           Fade it out entirely; the reading owns the screen. */
        #identity-layer-view.il-report-open .il-header {
            opacity: 0;
            pointer-events: none;
        }
        .il-report-overlay[hidden] {
            display: none;
        }
        .il-report-overlay {
            position: fixed;
            inset: 0;
            z-index: 5;
            display: grid;
            place-items: center;
            padding:
                calc(var(--chart-actions-top) + 11px)
                max(20px, env(safe-area-inset-right))
                max(24px, env(safe-area-inset-bottom))
                max(20px, env(safe-area-inset-left));
            pointer-events: auto;
        }
        .il-report-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(2, 5, 12, 0.72);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .il-report-shell {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            width: min(720px, 100%);
            max-height: calc(100dvh - var(--chart-actions-top) - 54px);
            overflow: hidden;
            border: 1px solid rgba(255, 180, 70, 0.30);
            border-radius: var(--hop-radius-panel);
            background:
                linear-gradient(180deg, rgba(15, 26, 46, 0.94), rgba(5, 8, 15, 0.96)),
                var(--hop-surface-panel-bg);
            box-shadow:
                inset 0 0 0 1px rgba(255, 180, 70, 0.055),
                0 26px 90px rgba(0, 0, 0, 0.62);
            backdrop-filter: blur(var(--hop-surface-blur-panel));
            -webkit-backdrop-filter: blur(var(--hop-surface-blur-panel));
        }
        .il-report-shell:focus {
            outline: none;
        }
        .il-report-header {
            flex: 0 0 auto;
            display: grid;
            grid-template-columns: 36px minmax(0, 1fr) 36px;
            align-items: center;
            gap: 10px;
            min-height: 64px;
            padding: 10px 14px;
            border-bottom: 1px solid rgba(255, 180, 70, 0.14);
            background: rgba(5, 8, 15, 0.52);
        }
        .il-report-heading {
            grid-column: 2;
            min-width: 0;
            text-align: center;
        }
        .il-report-title {
            margin: 0;
            font-family: var(--font-display);
            font-size: 14px;
            line-height: 1.3;
            letter-spacing: var(--hop-type-section-title-tracking);
            color: rgba(255, 244, 214, 0.92);
        }
        .il-report-subtitle {
            margin-top: 4px;
            font-family: var(--font-display);
            font-size: 9px;
            line-height: 1.35;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--chart-text-subtle);
        }
        .il-report-close {
            grid-column: 3;
            width: 36px;
            height: 36px;
            padding: 0;
            border: 1px solid var(--hop-surface-control-border);
            border-radius: 999px;
            background: var(--hop-surface-control-bg);
            color: var(--chart-text-primary);
            font-size: 18px;
            line-height: 1;
            cursor: pointer;
            transition: var(--hop-control-transition);
        }
        .il-report-close:hover {
            border-color: var(--hop-surface-control-border-hover);
            background: var(--hop-surface-control-hover-bg);
        }
        .il-report-close:focus-visible {
            outline: var(--hop-focus-outline);
            outline-offset: var(--hop-focus-outline-offset);
        }
        .il-report-body {
            flex: 1 1 auto;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
            overscroll-behavior: contain;
            scrollbar-gutter: stable;
            /* Minimal scrollbar — thumb stays invisible until hover/scroll. */
            scrollbar-width: thin;
            scrollbar-color: transparent transparent;
        }
        .il-report-body:hover,
        .il-report-body:focus-within {
            scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
        }
        .il-report-body::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        .il-report-body::-webkit-scrollbar-track { background: transparent; }
        .il-report-body::-webkit-scrollbar-thumb {
            background: transparent;
            border-radius: 9999px;
            transition: background var(--hop-motion-standard);
        }
        .il-report-body:hover::-webkit-scrollbar-thumb,
        .il-report-body:active::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.16);
        }
        .il-report-body > .il-section-content {
            padding: 20px;
            opacity: 1;
            filter: none;
            transform: none;
            overflow: visible;
        }
        .il-report-body[aria-busy="true"] {
            min-height: 180px;
        }
        @media (max-width: 1023px) {
            body.il-report-scroll-lock #feedback-tool,
            body.il-report-scroll-lock #profile-birth-btn,
            body.il-report-scroll-lock #change-password-btn,
            body.il-report-scroll-lock #logout-btn,
            body.il-report-scroll-lock #admin-dashboard-link,
            body.il-report-scroll-lock #delete-account-btn {
                opacity: 0;
                pointer-events: none;
                visibility: hidden;
            }
            .il-report-overlay {
                align-items: start;
                padding:
                    calc(var(--mobile-content-top-offset) + 4px)
                    max(10px, env(safe-area-inset-right))
                    max(12px, env(safe-area-inset-bottom))
                    max(10px, env(safe-area-inset-left));
            }
            .il-report-shell {
                width: min(720px, 100%);
                max-height: calc(100dvh - var(--mobile-content-top-offset) - 16px);
                border-radius: 16px;
            }
            .il-report-header {
                min-height: 56px;
                padding: 8px 10px;
            }
            .il-report-body > .il-section-content {
                padding: 14px;
            }
}
        .section-icon svg {
            width: 100%;
            height: 100%;
            stroke: rgba(255, 180, 70, 0.72);
            stroke-width: 1.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            fill: none;
            filter: drop-shadow(0 0 2px rgba(255, 180, 70, 0.16));
        }
        .il-section-subtitle {
            font-size: 11px;
            color: #64748b;
        }
        /* ============================================================ */
        /* #3 — Planet Glyph Toggle Indicator                           */
        /* ============================================================ */
        .planet-glyph {
            display: inline-block;
            width: 20px;
            height: 20px;
            --il-orbit-duration: 22s;
            --il-orbit-radius: 10px;
            --il-orbit-dot: rgba(255, 180, 70, 0.64);
            --il-orbit-dot-shadow: rgba(255, 180, 70, 0.18);
            border: 1px solid rgba(255, 180, 70, 0.28);
            border-radius: 50%;
            position: relative;
            flex-shrink: 0;
            opacity: 0.82;
            transition: border-color var(--hop-motion-standard), box-shadow var(--hop-motion-standard), opacity var(--hop-motion-standard), transform var(--hop-motion-standard);
        }
        .planet-glyph::after {
            content: '';
            position: absolute;
            width: 8px; height: 8px;
            border: 1px solid rgba(255, 180, 70, 0.3);
            border-radius: 50%;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
        }
        .energy-panel.expanded .planet-glyph,
        .il-section.is-considering .planet-glyph {
            --il-orbit-duration: 18s;
            --il-orbit-dot: rgba(255, 200, 100, 0.78);
            --il-orbit-dot-shadow: rgba(255, 200, 100, 0.24);
            border-color: rgba(255, 180, 70, 0.52);
            box-shadow: 0 0 0 1px rgba(255, 180, 70, 0.055);
            opacity: 1;
        }
        .energy-panel.expanded .planet-glyph::before,
        .il-section.is-considering .planet-glyph::before {
            box-shadow: 0 0 4px var(--il-orbit-dot-shadow);
        }

        /* ============================================================ */
        /* #6 — Panel Body Expand/Collapse + Cosmic Scroll Reveal       */
        /* ============================================================ */
        .il-section-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height 360ms ease;
            position: relative;
            z-index: 3;
        }
        .energy-panel.expanded .il-section-body {
            max-height: 2000px;
        }
        .il-section-content p {
            font-size: 13px;
            color: #cbd5e1;
            line-height: 1.7;
            margin: 0 0 12px 0;
            overflow-wrap: break-word;
        }
        .il-section-content strong {
            color: #e2e8f0;
        }
        /* Entity-level label headers (**Mercury:**, **Core Arc:**, etc.). Amber is an
           activation signal, not decoration — entity headers read as bright, not gold. */
        #identity-layer-view .il-section-content p > strong:first-child {
            color: #e2e8f0;
        }
        .il-section-content th {
            text-align: left;
            padding: 6px 10px;
            background: rgba(255, 180, 70, 0.055);
            color: rgba(255, 248, 235, 0.85);
            font-weight: 600;
            border-bottom: 1px solid rgba(255, 180, 70, 0.14);
        }
        .il-section-content td {
            padding: 6px 10px;
            color: #cbd5e1;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            vertical-align: top;
        }

        /* Identity Layer Loading Spinner */
        .il-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 24px 0;
            color: #64748b;
            font-size: 11px;
        }
        .il-elements-label {
            font-size: var(--hop-type-helper-size);
            color: #475569;
            text-transform: uppercase;
            letter-spacing: var(--hop-type-label-tracking);
            margin-bottom: 6px;
        }
        .il-preview--aligned-offer {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 434px;
            box-sizing: border-box;
        }
        .il-preview--aligned-offer .il-preview-offer {
            margin-top: auto;
        }
        .energy-panel.expanded .il-preview--aligned-offer {
            min-height: 0;
        }
        /* Phase 3: paid sections rest as a quiet title (header only); their
           offer brochure reveals only on engagement (.is-considering). The free
           reports, Strongest Planets, Strongest Houses, and Karmic Journey,
           always show their offers.
           Server-side access to the actual reading (il-section-content) remains
           authoritative; this only governs the marketing brochure's visibility. */
        .il-grid .il-section .il-preview { display: none; }
        .il-grid #il-strongest-planets .il-preview,
        .il-grid #il-strongest-houses .il-preview,
        .il-grid #il-karmic-journey .il-preview,
        .il-grid .il-section.is-considering .il-preview { display: flex; }
        .il-preview-divider::before,
        .il-preview-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(255, 180, 70, 0.18);
        }
        .il-preview-divider span {
            font-family: var(--font-display);
            font-size: 9px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: rgba(255, 180, 70, 0.62);
        }
        .il-preview-kicker::before,
        .il-preview-kicker::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(255, 180, 70, 0.12);
        }
        /* Decorative glyphs (◈ ⟡ ✦ ◎) carry no meaning — hidden. Markup removed
           when the preview brochure is reworked (Phase 3). */
        .il-preview-glyph { display: none; }
        .il-preview-price {
            font-family: var(--font-display);
            font-size: 15px;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: rgba(255, 244, 214, 0.92);
            margin-bottom: 14px;
        }
        .il-preview-btn {
            appearance: none;
            padding: 10px 32px;
            background: transparent;
            border: 1px solid rgba(255, 180, 70, 0.34);
            border-radius: 8px;
            color: #fbbf24;
            font-family: var(--font-display);
            font-size: 11px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            cursor: pointer;
            transition: var(--hop-control-transition);
        }
        .il-preview-btn:hover {
            background: rgba(255, 180, 70, 0.12);
            border-color: rgba(255, 180, 70, 0.55);
        }
        /* Refresh affordance — a single quiet gold line under a stale/legacy
           reading offering the current visual. No box, no border: white space
           is the structure. The verb carries the meaning. */
        .il-refresh-link {
            appearance: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 2px 0 26px;
            padding: 0;
            background: none;
            border: 0;
            color: #fbbf24;
            font-family: var(--font-display);
            font-size: 11px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            cursor: pointer;
            opacity: 0.78;
            transition: var(--hop-control-transition);
        }
        .il-refresh-link::after {
            content: '→';
            font-family: 'Inter', sans-serif;
            letter-spacing: 0;
            transform: translateX(0);
            transition: transform var(--hop-control-transition);
        }
        .il-refresh-link:hover {
            opacity: 1;
        }
        .il-refresh-link:hover::after {
            transform: translateX(3px);
        }
        .iv-core,
        .iv-spectrum,
        .iv-path-card,
        .iv-full-reading {
            background: var(--hop-surface-card-bg);
            border: 1px solid var(--hop-surface-card-border-accent);
            border-radius: 16px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
            backdrop-filter: blur(var(--hop-surface-blur-panel));
            -webkit-backdrop-filter: blur(var(--hop-surface-blur-panel));
        }
        .iv-spectrum__title,
        .iv-spectrum-detail__label,
        .iv-path-card__title,
        .iv-evidence__label {
            font-family: 'Inter', sans-serif;
            font-size: 10px;
            line-height: 1.2;
            letter-spacing: 0.04em;
            text-transform: none;
        }
        .iv-kicker,
        .iv-path-card__title {
            color: var(--chart-accent-text);
            margin-bottom: 8px;
        }
        .iv-spectrum {
            display: grid;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            background: rgba(8, 13, 22, 0.34);
            transition: border-color var(--hop-motion-standard),
                        background var(--hop-motion-standard);
        }
        .iv-spectrum:has(.iv-spectrum__trigger[aria-expanded="true"]) {
            border-color: var(--chart-border-accent-strong);
            background:
                linear-gradient(135deg, rgba(255, 180, 70, 0.055), transparent 48%),
                rgba(8, 13, 22, 0.46);
        }
        .iv-spectrum__trigger {
            display: grid;
            gap: 12px;
            width: 100%;
            padding: 14px 16px;
            border: 0;
            background: transparent;
            color: inherit;
            text-align: left;
            cursor: pointer;
        }
        .iv-spectrum__trigger:hover {
            background: rgba(255, 255, 255, 0.018);
        }
        .iv-spectrum__trigger:focus-visible {
            outline: var(--hop-focus-outline);
            outline-offset: calc(-1 * var(--hop-focus-outline-offset));
            border-radius: 13px;
        }
        .iv-spectrum__title {
            color: var(--chart-text-subtle);
            font-family: 'Inter', sans-serif;
            font-size: 10px;
            letter-spacing: 0.06em;
        }
        .iv-spectrum__poles {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        .iv-spectrum__pole {
            color: var(--chart-text-muted);
            font-size: 12px;
            font-weight: 600;
            line-height: 1.35;
        }
        .iv-spectrum__pole--right {
            text-align: right;
        }
        .iv-spectrum__rail {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
            border: 1px solid var(--hop-surface-control-border);
            border-radius: 999px;
            height: 18px;
            padding: 0 7px;
            background: rgba(8, 13, 22, 0.62);
        }
        .iv-spectrum__line {
            width: 100%;
            height: 3px;
            border-radius: 999px;
            background:
                linear-gradient(
                    90deg,
                    rgba(91, 116, 150, 0.78) 0%,
                    rgba(135, 148, 166, 0.72) 38%,
                    rgba(251, 191, 36, 0.92) 50%,
                    rgba(135, 148, 166, 0.72) 62%,
                    rgba(91, 116, 150, 0.78) 100%
                );
        }
        .iv-spectrum__rail::before,
        .iv-spectrum__rail::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 9px;
            height: 9px;
            transform: translateY(-50%);
            border-radius: 9999px;
            border: 1px solid rgba(164, 182, 205, 0.76);
            background: rgba(91, 116, 150, 0.96);
        }
        .iv-spectrum__rail::before { left: 6px; }
        .iv-spectrum__rail::after { right: 6px; }
        .iv-spectrum__center {
            position: absolute;
            top: -3px;
            bottom: -3px;
            left: 50%;
            width: 2px;
            transform: translateX(-50%);
            background: var(--chart-accent-text);
            box-shadow: 0 0 8px rgba(251, 191, 36, 0.26);
        }
        .iv-spectrum__reveal {
            padding: 0 16px 16px;
        }
        .iv-spectrum__reveal[hidden] {
            display: none;
        }
        .iv-spectrum__details {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr);
            gap: 0;
            padding-top: 14px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }
        .iv-spectrum-detail {
            min-width: 0;
            padding: 0 14px;
        }
        .iv-spectrum-detail:first-child {
            padding-left: 0;
        }
        .iv-spectrum-detail:last-child {
            padding-right: 0;
        }
        .iv-spectrum-detail + .iv-spectrum-detail {
            border-left: 1px solid rgba(255, 255, 255, 0.08);
        }
        .iv-spectrum-detail__label {
            display: block;
            color: var(--chart-text-subtle);
            font-family: 'Inter', sans-serif;
            margin-bottom: 7px;
            overflow-wrap: anywhere;
        }
        .iv-spectrum-detail--balance .iv-spectrum-detail__label {
            color: var(--chart-accent-text);
        }
        .iv-spectrum-detail__text,
        .iv-path-card p {
            margin: 0;
            color: var(--chart-text-muted);
            font-size: 13px;
            line-height: 1.62;
        }
        .iv-spectrum-detail--balance .iv-spectrum-detail__text {
            color: var(--chart-text-context);
        }
        .iv-path-card {
            padding: 14px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .iv-path-card__title {
            font-family: 'Inter', sans-serif;
            text-transform: none;
        }
        /* O5: path cards are click-to-reveal (mirrors the lesson-arc pattern). */
        .iv-path-card__trigger {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            width: 100%;
            background: none;
            border: 0;
            padding: 0;
            cursor: pointer;
            text-align: left;
        }
        .iv-path-card__cue {
            display: inline-block;
            color: rgba(201, 168, 76, 0.56);
            font-size: 13px;
            line-height: 1;
            transition: transform var(--hop-motion-standard), opacity var(--hop-motion-standard);
            opacity: 0.7;
        }
        .iv-path-card__trigger[aria-expanded="true"] .iv-path-card__cue {
            transform: rotate(45deg);
            opacity: 1;
        }
        .iv-path-card__reveal {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 260ms ease, opacity 220ms ease;
        }
        .iv-path-card__trigger[aria-expanded="true"] + .iv-path-card__reveal {
            opacity: 1;
        }
        .iv-path-card__reveal p { margin: 8px 0 0; }
        @media (prefers-reduced-motion: reduce) {
            .iv-path-card__reveal,
            .iv-path-card__cue { transition: none; }
}
        .iv-knot {
            display: grid;
            gap: 12px;
        }
        /* R9.1: three stage columns on one continuous baseline (gap:0). Each column
           = model label, a clickable woven-knot motif, and its OWN reveal below — so
           all three descriptions can stay open side by side (the full journey). */
        /* Phase labels sit above the one continuous thread. */
        .iv-knot__labels {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            margin-bottom: 4px;
        }
        .iv-knot__label {
            font-family: 'Inter', sans-serif;
            font-size: 11px;
            line-height: 1.3;
            letter-spacing: 0.06em;
            text-transform: none;
            color: var(--chart-accent-text);
            text-align: center;
            padding: 0 6px 6px;
        }
        /* One continuous thread spanning all three phases (loose knot → tighter
           knot → loosening), drawn as a single SVG; transparent triggers overlay
           each third as the click targets. */
        .iv-knot__row { position: relative; }
        .iv-knot__line {
            display: block;
            width: 100%;
            height: auto;
        }
        .iv-knot__line path {
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .iv-knot__thread { stroke-width: 3.2; opacity: 0.92; }
        .iv-knot__triggers {
            position: absolute;
            inset: 0;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .iv-knot__trigger {
            background: none;
            border: 0;
            margin: 0;
            padding: 0;
            cursor: pointer;
            border-radius: 12px;
            -webkit-tap-highlight-color: transparent;
            transition: background var(--hop-motion-standard);
        }
        .iv-knot__trigger:hover { background: rgba(255, 255, 255, 0.03); }
        .iv-knot__trigger:focus-visible {
            outline: var(--hop-focus-outline);
            outline-offset: -4px;
        }
        .iv-knot__trigger[aria-expanded="true"] {
            background: rgba(201, 168, 76, 0.035);
            box-shadow: inset 0 -2px 0 rgba(201, 168, 76, 0.5);
        }
        /* Per-phase reveal opens below its column; cumulative (each toggles itself). */
        .iv-knot__reveals {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            align-items: start;
        }
        .iv-knot__reveal {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            text-align: center;
            padding: 0 8px;
            transition: max-height 280ms ease, opacity 220ms ease;
        }
        .iv-knot__reveal.is-open { opacity: 1; }
        .iv-knot__reveal-title {
            font-family: var(--font-display);
            font-size: 11px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--chart-accent-text);
            margin: 8px 0 6px;
        }
        .iv-knot__reveal-text {
            margin: 0;
            color: var(--chart-text-muted);
            font-size: 12px;
            line-height: 1.55;
        }
        /* R1/R9: primary-lesson click-to-reveal trigger (core tile). */
        .iv-core__trigger {
            display: block;
            width: 100%;
            background: none;
            border: 0;
            padding: 0;
            cursor: pointer;
            text-align: center;
        }
        .iv-knot-stage__cue {
            display: inline-block;
            color: rgba(201, 168, 76, 0.56);
            font-size: 11px;
            line-height: 1;
            transition: transform var(--hop-motion-standard), opacity var(--hop-motion-standard);
            opacity: 0.7;
        }
        .iv-core__trigger[aria-expanded="true"] .iv-knot-stage__cue {
            transform: rotate(45deg);
            opacity: 1;
        }
        .iv-core__reveal {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 260ms ease, opacity 220ms ease;
        }
        .iv-core__trigger[aria-expanded="true"] + .iv-core__reveal {
            opacity: 1;
        }
        .iv-core__heading {
            font-family: var(--font-display);
            font-size: 12px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--chart-accent-text);
            margin-top: 10px;
        }
        .iv-core__reveal .iv-core__text { margin-top: 6px; }
        @media (prefers-reduced-motion: reduce) {
            .iv-knot__reveal,
            .iv-knot__trigger,
            .iv-core__reveal,
            .iv-knot-stage__cue { transition: none; }
}
        .iv-evidence__label {
            color: var(--chart-text-subtle);
            font-family: 'Inter', sans-serif;
            text-transform: none;
            letter-spacing: 0.04em;
        }
        .iv-evidence__tag {
            padding: 5px 8px;
            border-radius: 9999px;
            border: 1px solid var(--chart-border-accent);
            background: rgba(255, 180, 70, 0.055);
            color: var(--chart-text-context);
            font-size: 10px;
            line-height: 1.2;
        }
        /* v2 chart-evidence: collapsible hopicon tile, bottom-right above the
           Living Dialogue pill. Glass panel, thin border, restrained gold. */
        .iv-voice-user { font-style: italic; }
        /* O6: full-width horizontal evidence tile (was a narrow right-rail chip).
           Shared by all six identity reports. */
        .iv-evidence-tile {
            width: 100%;
            max-width: 100%;
            margin-top: 6px;
            padding: 9px 13px;
            border: 1px solid var(--chart-border-accent);
            border-radius: 12px;
            background: rgba(255, 180, 70, 0.04);
        }
        .iv-evidence-tile__summary {
            display: block;
            color: var(--chart-text-subtle);
            font-size: 10px;
            letter-spacing: 0.02em;
        }
        .iv-evidence-tile__list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 18px;
            padding-top: 11px;
        }
        /* O6: planets lay out as a horizontal row of disc + name/placement, so the
           tile reads left-to-right across the full width. */
        .iv-evidence-tile__planet {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
        }
        .iv-evidence-tile__meta {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }
        .iv-evidence-tile__tag {
            font-size: 9px;
            line-height: 1.2;
            letter-spacing: 0.02em;
            color: var(--chart-text-context);
        }
        .iv-evidence-tile__relation {
            font-size: 8.5px;
            line-height: 1.2;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: rgba(201, 168, 76, 0.78);
        }
        .iv-evidence-tile__disc {
            width: 26px;
            height: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: 1px solid var(--chart-border-accent);
            background: rgba(255, 180, 70, 0.06);
            color: var(--chart-text-context);
            font-size: 14px;
            line-height: 1;
            overflow: hidden;
        }
        .iv-evidence-tile__disc svg { display: block; width: 100%; height: 100%; }
        .iv-evidence-tile__name {
            font-size: 11px;
            line-height: 1.1;
            color: var(--chart-text-context);
        }
        /* O7: Interactive | Reading toggle — small iOS-style segmented control,
           centered at the bottom of the report. Shared by all six reports. */
        .il-view {
            display: grid;
            gap: 14px;
        }
        .il-view__toggle {
            display: inline-flex;
            justify-self: center;
            margin-top: 4px;
            gap: 1px;
            padding: 2px;
            border-radius: 9999px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        .il-view__seg {
            border: 0;
            background: none;
            cursor: pointer;
            padding: 3px 11px;
            border-radius: 9999px;
            color: var(--chart-text-subtle);
            font-family: 'Inter', sans-serif;
            font-size: 10px;
            letter-spacing: 0.02em;
            transition: background var(--hop-motion-standard), color var(--hop-motion-standard);
        }
        .il-view__seg[aria-selected="true"] {
            background: rgba(255, 255, 255, 0.14);
            color: var(--chart-text-eyebrow);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }
        @media (prefers-reduced-motion: reduce) {
            .il-view__seg { transition: none; }
}
        .sp-stage {
            position: relative;
            height: clamp(240px, 32vw, 300px);
            display: flex;
            align-items: center;
            justify-content: space-evenly;
        }
        .sp-planet {
            flex: 1 1 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            min-width: 44px;
            min-height: 44px;
            padding: 6px;
            background: none;
            border: 0;
            cursor: pointer;
            transition: opacity var(--hop-motion-standard);
        }
        .sp-planet__disc {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: 1px solid rgba(201, 168, 76, 0.35);
            background: radial-gradient(circle at 38% 32%, rgba(232, 210, 150, 0.28), rgba(201, 168, 76, 0.12) 58%, rgba(201, 168, 76, 0.04));
            color: rgba(232, 210, 150, 0.9);
            font-family: var(--font-display);
            transition: border-color var(--hop-motion-standard), box-shadow var(--hop-motion-standard), opacity var(--hop-motion-standard);
        }
        /* Uniform disc size across ranks — rank reads through opacity only (no rank1 glow ring). */
        .sp-planet__disc { width: 156px; height: 156px; font-size: 60px; }
        .sp-planet--rank2 .sp-planet__disc { opacity: 0.82; }
        .sp-planet--rank3 .sp-planet__disc { opacity: 0.68; }
        /* Faces carry their own sphere — strip disc chrome. Must follow the base
           border rule above to win (equal specificity → source order decides). */
        .sp-planet__disc--face { border: 0; background: none; }
        .sp-planet__label {
            font-family: 'Inter', sans-serif;
            font-size: 10px;
            letter-spacing: 0.18em;
            color: rgba(201, 168, 76, 0.62);
            white-space: nowrap;
        }
        .sp-planet--rank1 .sp-planet__label { font-size: 11px; color: rgba(201, 168, 76, 0.78); }
        .sp-planet--ignited .sp-planet__disc {
            border-color: rgba(232, 210, 150, 0.8);
            box-shadow: 0 0 24px rgba(201, 168, 76, 0.35);
        }
        /* Constellation bodies fill the disc; Saturn ring / Sun rays spill past it. */
        .sp-planet .sp-planet__disc--face svg { overflow: visible; }
        .sp-planet--ignited .sp-planet__disc--face {
            border: 0;
            filter: drop-shadow(0 0 12px rgba(201, 168, 76, 0.5));
        }
        .sp-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.3), transparent);
        }
        .sp-detail__empty {
            margin: 0;
            font-size: 13px;
            font-style: italic;
            color: var(--chart-text-subtle);
            text-align: center;
        }
        .sp-detail__name {
            font-family: 'Inter', sans-serif;
            font-size: 11px;
            letter-spacing: 0.2em;
            color: rgba(201, 168, 76, 0.7);
            text-align: center;
        }
        .sp-detail__pattern {
            margin: 0;
            font-size: clamp(19px, 2.4vw, 23px);
            font-weight: 300;
            line-height: 1.45;
            letter-spacing: 0.01em;
            color: rgba(244, 239, 228, 0.92);
            text-align: center;
        }
        .sp-detail__overline {
            font-family: var(--font-display);
            font-size: 10px;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: rgba(201, 168, 76, 0.7);
            margin-bottom: 6px;
        }
        @media (prefers-reduced-motion: reduce) {
            .sp-planet__body,
            .sp-planet__disc {
                animation: none !important;
            }
}
        @media (max-width: 640px) {
            .sp-stage { height: clamp(150px, 40vw, 200px); }
            .sp-planet__disc { width: 68px; height: 68px; font-size: 26px; }
            .sp-detail__pattern { font-size: 19px; }
}

        /* Strongest Houses doorways — only the emphasized houses, as lit thresholds.
           Restrained: thin gold edge + a low floor-glow; activation tightens the
           edge and adds a modest halo (no orange wash, no theatrical glow). */
        .sh-doorways {
            display: grid;
            gap: 14px;
        }
        .sh-stage {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            gap: clamp(16px, 5vw, 32px);
            min-height: clamp(150px, 20vw, 190px);
            padding: 14px 0 6px;
        }
        .sh-door {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 6px;
            background: none;
            border: 0;
            cursor: pointer;
            transition: transform var(--hop-motion-standard), opacity var(--hop-motion-standard);
        }
        .sh-door:hover { transform: translateY(-2px); }
        .sh-arch {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(201, 168, 76, 0.35);
            border-radius: 6px 6px 2px 2px;
            /* Inset panel line — recessed door panel inside the frame. */
            outline: 1px solid rgba(201, 168, 76, 0.2);
            outline-offset: -7px;
            background: linear-gradient(180deg, rgba(201, 168, 76, 0.03), rgba(201, 168, 76, 0.10));
            overflow: hidden;
            transition: border-color var(--hop-motion-standard), box-shadow var(--hop-motion-standard), opacity var(--hop-motion-standard);
        }
        /* Doorknob: handle near the leading edge, mid-height, so the panel reads as a door. */
        .sh-arch::after {
            content: '';
            position: absolute;
            right: 13px;
            top: 52%;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: rgba(232, 210, 150, 0.85);
            box-shadow: 0 0 4px rgba(201, 168, 76, 0.5);
            transform: translateY(-50%);
            pointer-events: none;
        }
        /* Floor light: a soft pool rising from the threshold, not a glow wash. */
        .sh-arch::before {
            content: '';
            position: absolute;
            left: 50%;
            bottom: -18%;
            width: 118%;
            height: 52%;
            transform: translateX(-50%);
            background: radial-gradient(closest-side, rgba(232, 210, 150, 0.16), transparent 72%);
            opacity: 0.7;
            pointer-events: none;
        }
        /* Uniform door — identical size and opacity for all three; rank reads from order. */
        .sh-door .sh-arch { width: 92px; height: 152px; }
        .sh-arch__num {
            position: relative;
            z-index: 1;
            font-family: var(--font-display);
            line-height: 1;
            font-size: 30px;
            color: rgba(244, 239, 228, 0.92);
        }
        /* "House" label sits above the number to read as "House 7". */
        .sh-arch__ord {
            position: relative;
            z-index: 1;
            margin-bottom: 6px;
            font-family: var(--font-display);
            font-size: 9px;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: rgba(201, 168, 76, 0.7);
        }
        .sh-door--selected .sh-arch {
            border-color: rgba(232, 210, 150, 0.8);
            box-shadow: 0 0 22px rgba(201, 168, 76, 0.32);
        }
        .sh-door--selected .sh-arch::before { opacity: 1; }
        .sh-door--dimmed { opacity: 0.42; }
        @media (max-width: 640px) {
            .sh-stage { min-height: clamp(132px, 34vw, 162px); }
            .sh-door .sh-arch { width: 78px; height: 126px; }
            .sh-arch__num { font-size: 25px; }
}

        /* Planets Requiring Care — planet → reveal. The paid report names the
           planets up front; their default behavior and care mechanics stay
           inside the shared detail surface. Planet selectors intentionally
           reuse Strongest Planets sizing and interaction classes. */
        .prc-cards {
            display: grid;
            gap: 12px;
        }
        .prc-instruction {
            margin: 0;
            text-align: center;
            font-size: 12px;
            font-style: italic;
            letter-spacing: 0.04em;
            color: var(--chart-text-subtle);
        }
        .prc-detail {
            display: grid;
            gap: 16px;
            padding: 4px 2px 2px;
        }
        .prc-planet-selector:focus-visible {
            outline: none;
        }
        .prc-planet-selector:focus-visible .sp-planet__disc,
        .prc-facet:focus-visible,
        .il-dialogue__send:focus-visible {
            outline: 2px solid rgba(232, 210, 150, 0.85);
            outline-offset: 3px;
        }
        .prc-default,
        .prc-care {
            display: flex;
            align-items: baseline;
            gap: 10px;
        }
        .prc-default {
            margin: 0;
            padding-top: 16px;
        }
        .prc-default__mark,
        .prc-care__mark {
            width: 16px;
            flex: 0 0 16px;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            color: rgba(255, 180, 70, 0.9);
        }
        .prc-default__label {
            font-family: 'Inter', sans-serif;
            font-size: 9px;
            letter-spacing: 0.16em;
            color: rgba(201, 168, 76, 0.70);
            margin-bottom: 3px;
        }
        .prc-default__text {
            margin: 0;
            font-size: 15px;
            line-height: 1.55;
            color: rgba(226, 232, 240, 0.92);
        }
        .prc-care {
            margin-top: 16px;
        }
        .prc-care__mark {
            color: rgba(150, 196, 160, 0.90);
            font-size: 14px;
        }
        .prc-care__label {
            font-family: 'Inter', sans-serif;
            font-size: 9px;
            letter-spacing: 0.16em;
            color: rgba(150, 196, 160, 0.82);
            margin-bottom: 3px;
        }
        .prc-care__text {
            margin: 0;
            font-size: 14px;
            line-height: 1.55;
            color: rgba(200, 224, 206, 0.92);
        }
        .prc-facets {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 18px;
            padding-top: 16px;
            border-top: 1px solid rgba(255, 255, 255, 0.07);
        }
        /* Facets render as always-visible static prose (shared by PRC/SP/SH). */
        .prc-facet {
            display: block;
            width: 100%;
            padding: 12px 14px;
            border-radius: 8px;
            background: rgba(8, 13, 22, 0.40);
            color: inherit;
            text-align: left;
        }
        .prc-facet__head {
            display: block;
            font-family: 'Inter', sans-serif;
            font-size: 9px;
            font-weight: 500;
            letter-spacing: 0.16em;
            color: rgba(203, 213, 225, 0.62);
        }
        .prc-facet__body {
            display: block;
            margin-top: 8px;
            font-size: 12px;
            line-height: 1.55;
            color: rgba(203, 213, 225, 0.82);
        }
        /* Identity-layer dialogue prompt — shared, reusable across sections.
           Styled to match the Living Dialogue composer pill exactly. */
        .il-dialogue {
            margin-top: 20px;
            padding-top: 16px;
            border-top: 1px solid rgba(255, 255, 255, 0.07);
        }
        .il-dialogue__row {
            position: relative;
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 10px 14px;
            background: rgba(8, 13, 22, 0.84);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 28px;
            box-shadow: 0 22px 80px rgba(0, 0, 0, 0.34);
            backdrop-filter: blur(18px);
        }
        .il-dialogue__row::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(135deg, rgba(255, 180, 70, 0.24), rgba(255, 255, 255, 0.04));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }
        .il-dialogue__text {
            flex: 1;
            min-width: 0;
            padding: 4px 0;
            border: 0;
            outline: 0;
            resize: none;
            overflow: hidden;
            background: transparent;
            color: rgba(226, 232, 240, 0.92);
            font-family: 'Inter', sans-serif;
            font-size: 16px;
            font-style: italic;
            line-height: 1.45;
            min-height: calc(1lh + 8px);
            box-sizing: border-box;
        }
        .il-dialogue__text:focus {
            font-style: normal;
        }
        /* Send button matches the Living Dialogue composer: rounded inset square. */
        .il-dialogue__send {
            flex: 0 0 44px;
            width: 44px;
            height: 44px;
            padding: 0;
            border: 0;
            border-radius: 18px;
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
            box-shadow: 0 10px 28px rgba(217, 119, 6, 0.25);
            color: rgba(255, 255, 255, 0.92);
            font-size: 16px;
            text-shadow: 0 0 18px rgba(251, 191, 36, 0.55);
            display: grid;
            place-items: center;
            cursor: pointer;
            transition: transform var(--hop-motion-standard), box-shadow var(--hop-motion-standard);
        }
        .il-dialogue__send:hover {
            transform: translateY(-1px);
            box-shadow: 0 14px 30px rgba(217, 119, 6, 0.32);
        }
        @media (prefers-reduced-motion: reduce) {
            .il-dialogue__send {
                transition: none !important;
            }
}
        @media (max-width: 560px) {
            .prc-facets {
                grid-template-columns: 1fr;
            }
            .il-preview--aligned-offer {
                display: block;
                min-height: 0;
            }
}

        /* Hidden Undeniables — Negative Space. The surface complaint (foreground)
           reads as faint noise; flipping reveals the strength beneath in gold.
           Figure→ground = "your pattern, made visible". */
        .hu-negspace {
            display: grid;
            gap: 14px;
        }
        /* R5: centered caps title above the tiles. */
        .hu-title {
            margin: 0;
            text-align: center;
            font-family: var(--font-display);
            font-size: 13px;
            line-height: 1.3;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--chart-accent-text);
        }
        .hu-intro {
            margin: 0;
            text-align: center;
            font-size: 12px;
            font-style: italic;
            letter-spacing: 0.04em;
            color: var(--chart-text-subtle);
        }
        /* R5: tiles laid horizontally (one row of N on desktop), stack on mobile. */
        .hu-stage {
            display: grid;
            gap: 12px;
            align-items: stretch;
        }
        .hu-stage--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .hu-stage--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .hu-stage > .hu-card { min-width: 0; }
        @media (max-width: 600px) {
            .hu-stage--2,
            .hu-stage--3 { grid-template-columns: 1fr; }
}
        .hu-card {
            overflow: hidden;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: linear-gradient(180deg, rgba(15, 26, 46, 0.55), rgba(8, 13, 22, 0.62));
            transition: border-color var(--hop-motion-standard), box-shadow var(--hop-motion-standard), background var(--hop-motion-standard);
        }
        .hu-card:hover {
            border-color: rgba(255, 255, 255, 0.18);
        }
        /* PRC parity: the card is itself the selector tile button. */
        .hu-card__default {
            display: block;
            width: 100%;
            padding: 16px 18px;
            border: 0;
            background: none;
            text-align: left;
            color: inherit;
            cursor: pointer;
        }
        .hu-card.hu-card__default {
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: linear-gradient(180deg, rgba(15, 26, 46, 0.55), rgba(8, 13, 22, 0.62));
        }
        .hu-card__default:focus-visible {
            outline: 2px solid rgba(201, 168, 76, 0.6);
            outline-offset: 2px;
        }
        /* Selected lights, others dim — one shared full-width detail below. */
        .hu-card--selected {
            border-color: rgba(232, 210, 150, 0.7);
            box-shadow: 0 0 22px rgba(201, 168, 76, 0.18);
            background: linear-gradient(180deg, rgba(20, 32, 54, 0.7), rgba(10, 16, 27, 0.72));
        }
        .hu-card--dimmed { opacity: 0.42; }
        .hu-card__kicker {
            font-family: 'Inter', sans-serif;
            font-size: 9px;
            letter-spacing: 0.18em;
            color: var(--chart-text-subtle);
            margin-bottom: 6px;
        }
        .hu-card__strength {
            margin: 0;
            font-family: 'Inter', sans-serif;
            font-size: 19px;
            line-height: 1.3;
            color: rgba(232, 210, 150, 0.95);
        }
        /* One full-width shared reveal below the tiles (mirrors .prc-detail). */
        .hu-detail {
            display: grid;
            gap: 16px;
            padding: 4px 2px 2px;
        }
        .hu-card__overline {
            font-family: 'Inter', sans-serif;
            font-size: 9px;
            letter-spacing: 0.16em;
            color: var(--chart-text-subtle);
            margin-bottom: 3px;
        }
        /* The fixation, demoted into the reveal — muted, the noise beneath the strength. */
        .hu-fixation { margin-top: 4px; }
        .hu-fixation p {
            margin: 0;
            font-size: 15px;
            line-height: 1.5;
            color: rgba(244, 239, 228, 0.7);
        }
        /* Static detail facets — always-visible prose. */
        .hu-facets {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 18px;
            padding-top: 16px;
            border-top: 1px solid rgba(255, 255, 255, 0.07);
        }
        .hu-facet {
            display: block;
            width: 100%;
        }
        .hu-facet__head {
            font-family: 'Inter', sans-serif;
            font-size: 9px;
            font-weight: 500;
            letter-spacing: 0.16em;
            color: rgba(203, 213, 225, 0.62);
        }
        .hu-facet__body {
            display: block;
            max-height: none;
            opacity: 1;
            margin-top: 6px;
            font-size: 12px;
            line-height: 1.55;
            color: rgba(203, 213, 225, 0.82);
        }
        @media (prefers-reduced-motion: reduce) {
            .hu-card { transition: none; }
}
        @media (max-width: 640px) {
            .hu-card__strength { font-size: 17px; }
            .hu-facets { grid-template-columns: 1fr; }
}
        /* Fan-out offsets (translateX desktop / translateY mobile) set inline by layoutChartActionSlots(); hidden Admin leaves no gap. */
        body.chart-actions-open #profile-birth-btn.visible,
        body.chart-actions-open #change-password-btn.visible,
        body.chart-actions-open #logout-btn.visible,
        body.chart-actions-open #admin-dashboard-link.visible,
        body.chart-actions-open #delete-account-btn.visible {
            opacity: 1;
            pointer-events: auto;
        }
        .action-icon { line-height: 0; }
        .action-icon svg { width: 18px; height: 18px; display: block; }

        /* --- Foundational Pattern wheel-centered top stack (title, metadata, layer controls) --- */
        .chart-viz-title-wrap {
            position: absolute;
            /* Align chart title top with Identity Layer / Living Dialogue title top. */
            top: calc(var(--chart-actions-top) + 11px);
            left: 50%;
            transform: translateX(-50%);
            z-index: 52;
            isolation: isolate;
            text-align: center;
            max-width: min(520px, calc(100% - 120px));
            pointer-events: none;
            transition: opacity var(--hop-motion-standard);
        }
        /* Threshold menu is a focus overlay: the chart title sits above the blur
           backdrop (z52 > z28), so it would otherwise poke through while the
           Identity / Living Dialogue views (z15) recede behind it. Fade it out so
           all three sections behave the same when the menu is open. */
        body.threshold-open .chart-viz-title-wrap {
            opacity: 0;
            pointer-events: none;
        }

        @media (max-width: 767px) {
            /* Title row uses #mobile-section-header; keep wrap off-screen for tooltip anchors only. */
            .chart-viz-title-wrap {
                left: -9999px !important;
                top: 0 !important;
                width: 1px;
                height: 1px;
                max-width: none !important;
                transform: none !important;
                overflow: visible;
                pointer-events: none;
            }
            #identity-layer-view {
                padding:
                    calc(var(--mobile-content-top-offset) + 2px)
                    10px
                    max(70px, env(safe-area-inset-bottom))
                    10px;
            }
            .chart-stage::before {
                border-radius: 0;
            }
            .il-container { max-width: none; }
            .center-glow::before { opacity: 0.55; }
            .il-section,
            .energy-panel {
                border-radius: 16px;
            }
            .il-section-content p { font-size: 12px; line-height: 1.6; }
            .iv-spectrum__trigger { padding: 13px 14px; }
            .iv-spectrum__reveal { padding: 0 14px 14px; }
            .iv-spectrum__details {
                grid-template-columns: 1fr;
                gap: 12px;
            }
            .iv-spectrum-detail,
            .iv-spectrum-detail:first-child,
            .iv-spectrum-detail:last-child {
                padding: 0;
            }
            .iv-spectrum-detail + .iv-spectrum-detail {
                padding-top: 12px;
                border-top: 1px solid rgba(255, 255, 255, 0.08);
                border-left: 0;
            }
            /* The continuous thread + its three labels/triggers stay horizontal
               (the line scales down). Reveals stack to full width so the text is
               readable; cumulative-open panels list below the line in order. */
            .iv-knot__label {
                font-size: 10px;
                padding-bottom: 4px;
            }
            .iv-knot__reveals {
                grid-template-columns: 1fr;
                gap: 4px;
            }
}

        @media (max-width: 430px) {
            .chart-stage::before { border-radius: 0; }
}