/* Twelve-theme palette and visual themes */

.reflecta-theme-palette {
    position: fixed;
    z-index: 10000;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 40px));
    justify-items: center;
    align-items: center;
    gap: 8px;
    min-width: max-content;
    padding: 8px;
    border: 1px solid var(--line-strong, rgba(255,255,255,.16));
    border-radius: 999px;
    background: color-mix(in oklab, var(--surface-solid, #1d1c20) 94%, transparent);
    box-shadow: var(--shadow-sm, 0 18px 48px rgba(0,0,0,.28)), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(24px) saturate(125%);
    -webkit-backdrop-filter: blur(24px) saturate(125%);
    animation: reflecta-theme-palette-in .2s cubic-bezier(.16, 1, .3, 1) both;
}

.reflecta-theme-palette[hidden] {
    display: none !important;
}

.reflecta-theme-palette[data-placement="right"] {
    transform-origin: left center;
}

.reflecta-theme-palette[data-placement="below"] {
    transform-origin: right top;
}

.reflecta-theme-palette[data-placement="above"] {
    transform-origin: right bottom;
}

.reflecta-theme-option {
    position: relative;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.34);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
    -webkit-tap-highlight-color: transparent;
}

.reflecta-theme-option svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.reflecta-theme-option:hover,
.reflecta-theme-option:focus-visible {
    outline: none;
    transform: translateY(-2px) scale(1.04);
    filter: brightness(1.03);
}

.reflecta-theme-option[aria-checked="true"],
.reflecta-theme-option.is-active {
    border-color: var(--accent, #89c7f4);
    box-shadow: 0 0 0 2px var(--surface-solid, #1d1c20), 0 0 0 4px var(--accent, #89c7f4), 0 8px 18px rgba(0,0,0,.18);
}

.reflecta-theme-option--cream {
    color: #6d5b47;
    border-color: rgba(87,68,49,.22);
    background: linear-gradient(145deg, #fffdf9 0%, #f3eadc 55%, #e6d8c5 100%);
}

.reflecta-theme-option--premium {
    color: #e4c681;
    border-color: rgba(228,198,129,.32);
    background: radial-gradient(circle at 32% 22%, #3b373c, #1e1c20 55%, #0c0b0d 100%);
}

.reflecta-theme-option--iphone {
    color: #75bdff;
    border-color: rgba(10,132,255,.42);
    background: linear-gradient(145deg, #363638, #1c1c1e 58%, #09090a);
}

.reflecta-theme-option--silver {
    color: #4e5965;
    border-color: rgba(79,91,103,.28);
    background: linear-gradient(135deg, #ffffff 0%, #c8cdd3 35%, #f4f6f8 61%, #aeb5bd 100%);
}

.reflecta-theme-option__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

@keyframes reflecta-theme-palette-in {
    from { opacity: 0; transform: translateX(-7px) scale(.96); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@media (max-width: 480px) {
    .reflecta-theme-palette {
        grid-template-columns: repeat(4, minmax(0, 38px));
        gap: 7px;
        padding: 7px;
    }

    .reflecta-theme-option {
        width: 38px;
        height: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reflecta-theme-palette,
    .reflecta-theme-option {
        animation: none;
        transition: none;
    }
}

.legal-theme-toggle {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--muted);
    background: color-mix(in srgb, var(--surface-solid) 88%, transparent);
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}

.legal-theme-toggle:hover {
    color: var(--text);
    border-color: var(--line-strong);
    background: var(--surface-solid);
}

.legal-theme-toggle svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

:root[data-visual-theme="cream"] {
    color-scheme: light;
    --bg: #f4efe7;
    --bg-deep: #ebe3d7;
    --bg-elevated: #faf7f1;
    --bg-soft: #eee7dd;
    --surface: rgba(255, 253, 249, .94);
    --surface-solid: #fffdf9;
    --surface-strong: #fffdf9;
    --surface-2: #faf6ef;
    --surface-3: #eee7dd;
    --surface-hover: #e9e1d7;
    --text: #2a2521;
    --text-soft: #4a433d;
    --muted: #746a60;
    --subtle: #94887c;
    --line: rgba(70, 58, 48, .12);
    --line-strong: rgba(70, 58, 48, .22);
    --accent: #655a73;
    --accent-soft: #746780;
    --accent-strong: #51465f;
    --accent-2: #51465f;
    --gold: #96784f;
    --accent-ink: #fffdf9;
    --success: #4f7463;
    --warning: #8a6d3b;
    --danger: #a45152;
    --border: var(--line);
    --border-strong: var(--line-strong);
    --surface-elevated: var(--surface-2);
    --shadow-xs: 0 1px 0 rgba(255,255,255,.92), 0 6px 18px rgba(52,42,34,.05);
    --shadow-sm: 0 1px 0 rgba(255,255,255,.94), 0 10px 28px rgba(52,42,34,.07);
    --shadow: 0 1px 0 rgba(255,255,255,.96), 0 22px 54px rgba(52,42,34,.11);
    --shadow-focus: 0 0 0 4px rgba(101,90,115,.12);
}

:root[data-visual-theme="premium"] {
    color-scheme: dark;
    --bg: #121113;
    --bg-deep: #0b0a0c;
    --bg-elevated: #19181b;
    --bg-soft: #19181b;
    --surface: rgba(29, 28, 32, .86);
    --surface-solid: #1d1c20;
    --surface-strong: rgba(35,33,38,.95);
    --surface-2: rgba(35, 33, 38, .94);
    --surface-3: rgba(48, 45, 51, .86);
    --surface-hover: rgba(58, 54, 61, .82);
    --text: #f4f1ea;
    --text-soft: #ddd7ce;
    --muted: #aaa198;
    --subtle: #7d766f;
    --line: rgba(238, 221, 190, .12);
    --line-strong: rgba(238, 221, 190, .22);
    --accent: #d2b579;
    --accent-soft: #eed7a6;
    --accent-strong: #8faec1;
    --accent-2: #8faec1;
    --gold: #d6b66f;
    --accent-ink: #1a140b;
    --success: #7fb69c;
    --warning: #d0a65e;
    --danger: #d9878d;
    --border: var(--line);
    --border-strong: var(--line-strong);
    --surface-elevated: var(--surface-2);
    --shadow-xs: 0 1px 0 rgba(255,255,255,.025), 0 10px 24px rgba(0,0,0,.14);
    --shadow-sm: 0 1px 0 rgba(255,255,255,.03), 0 20px 54px rgba(0,0,0,.26);
    --shadow: 0 1px 0 rgba(255,255,255,.032), 0 42px 116px rgba(0,0,0,.43);
    --shadow-focus: 0 0 0 4px rgba(210,181,121,.13), 0 16px 34px rgba(210,181,121,.09);
}

:root[data-visual-theme="iphone"] {
    color-scheme: dark;
    --bg: #101012;
    --bg-deep: #08080a;
    --bg-elevated: #1c1c1e;
    --bg-soft: #1c1c1e;
    --surface: rgba(28,28,30,.9);
    --surface-solid: #1c1c1e;
    --surface-strong: rgba(36,36,38,.97);
    --surface-2: rgba(36,36,38,.96);
    --surface-3: rgba(44,44,46,.92);
    --surface-hover: rgba(52,52,56,.94);
    --text: #f5f5f7;
    --text-soft: #e5e5ea;
    --muted: #a1a1aa;
    --subtle: #787880;
    --line: rgba(255,255,255,.085);
    --line-strong: rgba(255,255,255,.16);
    --accent: #0a84ff;
    --accent-soft: #64d2ff;
    --accent-strong: #bf5af2;
    --accent-2: #bf5af2;
    --gold: #d9b15f;
    --accent-ink: #ffffff;
    --success: #30d158;
    --warning: #e3bd45;
    --danger: #ff6961;
    --border: var(--line);
    --border-strong: var(--line-strong);
    --surface-elevated: var(--surface-2);
    --shadow-xs: 0 1px 0 rgba(255,255,255,.025);
    --shadow-sm: 0 8px 24px rgba(0,0,0,.16);
    --shadow: 0 20px 56px rgba(0,0,0,.28);
    --shadow-focus: 0 0 0 4px rgba(10,132,255,.17);
    --radius: 18px;
    --radius-lg: 24px;
}

:root[data-visual-theme="silver"] {
    color-scheme: light;
    --bg: #e8ebef;
    --bg-deep: #d9dee4;
    --bg-elevated: #f5f6f8;
    --bg-soft: #dde2e8;
    --surface: rgba(249,250,252,.92);
    --surface-solid: #f9fafb;
    --surface-strong: #fbfcfd;
    --surface-2: #f1f3f6;
    --surface-3: #dfe4ea;
    --surface-hover: #d7dde4;
    --text: #252a31;
    --text-soft: #404852;
    --muted: #697581;
    --subtle: #89939d;
    --line: rgba(50,61,72,.14);
    --line-strong: rgba(50,61,72,.25);
    --accent: #566778;
    --accent-soft: #718497;
    --accent-strong: #465665;
    --accent-2: #7d8793;
    --gold: #8d806c;
    --accent-ink: #ffffff;
    --success: #4f7463;
    --warning: #806b45;
    --danger: #9b4f58;
    --border: var(--line);
    --border-strong: var(--line-strong);
    --surface-elevated: var(--surface-2);
    --shadow-xs: 0 1px 0 rgba(255,255,255,.94), 0 7px 18px rgba(48,59,70,.06);
    --shadow-sm: 0 1px 0 rgba(255,255,255,.96), 0 13px 34px rgba(48,59,70,.09);
    --shadow: 0 1px 0 rgba(255,255,255,.98), 0 26px 64px rgba(48,59,70,.14);
    --shadow-focus: 0 0 0 4px rgba(86,103,120,.13);
}

:root[data-visual-theme] body {
    color: var(--text);
    background: var(--bg);
}

:root[data-visual-theme] :where(.brand, .mobile-brand, .public-brand, .legal-brand) {
    --display-font: "Iowan Old Style", "Baskerville", "Times New Roman", ui-serif, serif;
    --display: "Iowan Old Style", "Baskerville", "Times New Roman", ui-serif, serif;
}

/* Cream */
:root[data-visual-theme="cream"] .ambient,
:root[data-visual-theme="cream"] .site-ambient {
    background: linear-gradient(180deg, #faf7f1 0%, #f4efe7 48%, #ebe3d7 100%);
}

:root[data-visual-theme="cream"] :where(.ambient__orb, .ambient__grid, .ambient__grain, .site-grid, .site-grain) {
    opacity: .08;
}

:root[data-visual-theme="cream"] :where(.side-nav, .details-panel, .top-bar, .bottom-nav) {
    border-color: var(--line);
    background: rgba(250,247,241,.94);
    box-shadow: none;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

:root[data-visual-theme="cream"] :where(.card, .metric, .modal, .details-card, .quick-launcher, .quick-story-card, .home-guest-hero, .home-value-card, .home-consultants-promo, .home-consultant-workspace, .settings-export-card) {
    border-color: var(--line);
    background: #fffdf9;
    box-shadow: 0 8px 26px rgba(52,42,34,.055);
}

:root[data-visual-theme="cream"] :where(.card, .metric, .modal, .details-card)::before {
    opacity: 0;
}

:root[data-visual-theme="cream"] :where(.input, .select, .textarea, .compact-select, .text-input) {
    border-color: var(--line);
    color: var(--text);
    background: #faf6ef;
    box-shadow: none;
}

:root[data-visual-theme="cream"] :where(.input, .select, .textarea, .compact-select, .text-input):focus {
    border-color: rgba(101,90,115,.48);
    background: #fffdf9;
    box-shadow: 0 0 0 3px rgba(101,90,115,.1);
}

:root[data-visual-theme="cream"] :where(.primary-button, .button-primary) {
    border-color: #5a5066;
    color: #fffdf9;
    background: #655a73;
    box-shadow: none;
}

:root[data-visual-theme="cream"] :where(.primary-button, .button-primary):hover {
    border-color: #51465f;
    color: #fffdf9;
    background: #584d65;
    filter: none;
    box-shadow: none;
}

:root[data-visual-theme="cream"] :where(.secondary-button, .button-secondary, .ghost-button, .icon-button, .panel-control, .edge-toggle, .chip-button, .side-utility-button) {
    border-color: var(--line);
    color: var(--text-soft);
    background: #eee7dd;
    box-shadow: none;
}

:root[data-visual-theme="cream"] :where(.secondary-button, .button-secondary, .ghost-button, .icon-button, .panel-control, .edge-toggle, .chip-button, .side-utility-button):hover {
    border-color: var(--line-strong);
    color: var(--text);
    background: #e3d9cd;
    box-shadow: none;
}

:root[data-visual-theme="cream"] .header {
    border-color: var(--line);
    background: rgba(249,245,238,.94);
    box-shadow: 0 1px 0 rgba(70,58,48,.04);
}

:root[data-visual-theme="cream"] :where(.system-card, .scenario-card, .situation-preview, .product-window, .product-main, .product-sidebar, .reading-preview, .preview-card, .cta, .principles-panel, .consultant-promo, .split-feature) {
    border-color: var(--line);
    background: #fffdf9;
    box-shadow: 0 8px 28px rgba(52,42,34,.055);
}

/* Premium */
:root[data-visual-theme="premium"] .ambient {
    background: radial-gradient(ellipse 86% 65% at 50% -18%, rgba(210,181,121,.075), transparent 62%), linear-gradient(180deg, #0b0a0c 0%, #121113 46%, #0d0c0f 100%);
}

:root[data-visual-theme="premium"] .ambient__orb--one { background: radial-gradient(circle, rgba(143,174,193,.12), rgba(143,174,193,.02) 54%, transparent 71%); }
:root[data-visual-theme="premium"] .ambient__orb--two { background: radial-gradient(circle, rgba(214,182,111,.1), rgba(214,182,111,.018) 52%, transparent 71%); }
:root[data-visual-theme="premium"] .ambient__orb--three { background: radial-gradient(circle, rgba(138,116,151,.08), transparent 68%); }

:root[data-visual-theme="premium"] .site-ambient {
    background: radial-gradient(ellipse 90% 64% at 50% -20%, rgba(210,181,121,.07), transparent 62%), linear-gradient(180deg, #0b0a0c, #121113 48%, #0d0c0f);
}

:root[data-visual-theme="premium"] :where(.side-nav, .details-panel, .top-bar, .bottom-nav) {
    background: linear-gradient(180deg, rgba(31,29,33,.91), rgba(18,17,19,.94));
    border-color: rgba(238,221,190,.1);
}

:root[data-visual-theme="premium"] :where(.card, .metric, .modal, .details-card, .quick-launcher, .quick-story-card) {
    border-color: rgba(238,221,190,.11);
    background: radial-gradient(circle at 100% 0, rgba(210,181,121,.055), transparent 38%), linear-gradient(150deg, rgba(34,32,36,.96), rgba(25,24,27,.96));
    box-shadow: 0 1px 0 rgba(255,255,255,.025), 0 20px 52px rgba(0,0,0,.22);
}

:root[data-visual-theme="premium"] :where(.nav-link.is-active, .system-tab.is-selected, .tab.is-selected) {
    border-color: rgba(210,181,121,.22);
    background: linear-gradient(110deg, rgba(210,181,121,.12), rgba(143,174,193,.055));
}

:root[data-visual-theme="premium"] :where(.input, .select, .textarea, .compact-select, .text-input) {
    border-color: rgba(238,221,190,.11);
    background: rgba(20,19,22,.9);
}

:root[data-visual-theme="premium"] :where(.input, .select, .textarea, .compact-select, .text-input):focus {
    border-color: rgba(210,181,121,.42);
    box-shadow: 0 0 0 4px rgba(210,181,121,.08);
}

:root[data-visual-theme="premium"] :where(.primary-button, .button-primary) {
    color: #1a140b;
    border-color: transparent;
    background: linear-gradient(135deg, #f0ddb3 0%, #d5b46e 68%, #c2c8c7 128%);
    box-shadow: 0 14px 32px rgba(164,126,63,.2), inset 0 1px 0 rgba(255,255,255,.48);
}

:root[data-visual-theme="premium"] :where(.primary-button, .button-primary):hover {
    filter: brightness(1.025) saturate(1.02);
    box-shadow: 0 17px 38px rgba(164,126,63,.26), inset 0 1px 0 rgba(255,255,255,.5);
}

:root[data-visual-theme="premium"] :where(.hero-card, .reading-canvas) {
    background: radial-gradient(circle at 70% 0, rgba(210,181,121,.09), transparent 45%), linear-gradient(150deg, #211f23, #121113);
}

/* iPhone */
:root[data-visual-theme="iphone"] .ambient {
    background: radial-gradient(ellipse 68% 45% at 50% -18%, rgba(10,132,255,.07), transparent 65%), #101012;
}

:root[data-visual-theme="iphone"] .ambient__orb { opacity: .34; filter: blur(22px); }
:root[data-visual-theme="iphone"] .ambient__orb--one { background: radial-gradient(circle, rgba(10,132,255,.11), transparent 70%); }
:root[data-visual-theme="iphone"] .ambient__orb--two { background: radial-gradient(circle, rgba(100,210,255,.055), transparent 70%); }
:root[data-visual-theme="iphone"] .ambient__orb--three { background: radial-gradient(circle, rgba(191,90,242,.05), transparent 68%); }
:root[data-visual-theme="iphone"] .ambient__grid { opacity: .07; }

:root[data-visual-theme="iphone"] .site-ambient {
    background: radial-gradient(ellipse 72% 48% at 50% -18%, rgba(10,132,255,.065), transparent 65%), #101012;
}

:root[data-visual-theme="iphone"] :where(.side-nav, .details-panel, .top-bar, .bottom-nav) {
    border-color: rgba(255,255,255,.075);
    background: rgba(28,28,30,.9);
    box-shadow: none;
    backdrop-filter: blur(28px) saturate(115%);
    -webkit-backdrop-filter: blur(28px) saturate(115%);
}

:root[data-visual-theme="iphone"] :where(.card, .metric, .modal, .details-card, .quick-launcher, .quick-story-card, .home-guest-hero, .home-value-card, .home-consultants-promo, .home-consultant-workspace, .settings-export-card) {
    border-color: rgba(255,255,255,.085);
    border-radius: 18px;
    background: #1c1c1e;
    box-shadow: none;
}

:root[data-visual-theme="iphone"] :where(.card, .metric, .modal, .details-card)::before { display: none; }
:root[data-visual-theme="iphone"] .nav-link { border-radius: 12px; }
:root[data-visual-theme="iphone"] .nav-link:hover { background: rgba(255,255,255,.055); }

:root[data-visual-theme="iphone"] :where(.nav-link.is-active, .system-tab.is-selected, .tab.is-selected) {
    border-color: rgba(10,132,255,.22);
    background: rgba(10,132,255,.16);
    box-shadow: none;
}

:root[data-visual-theme="iphone"] .nav-link.is-active::before { background: #0a84ff; box-shadow: none; }

:root[data-visual-theme="iphone"] :where(.input, .select, .textarea, .compact-select, .text-input) {
    border-color: rgba(255,255,255,.1);
    border-radius: 12px;
    background: #1c1c1e;
    box-shadow: none;
}

:root[data-visual-theme="iphone"] :where(.input, .select, .textarea, .compact-select, .text-input):focus {
    border-color: rgba(10,132,255,.72);
    background: #1c1c1e;
    box-shadow: 0 0 0 4px rgba(10,132,255,.14);
}

:root[data-visual-theme="iphone"] :where(.primary-button, .button-primary) {
    color: #fff;
    border-color: transparent;
    background: #0071e3;
    box-shadow: none;
}

:root[data-visual-theme="iphone"] :where(.primary-button, .button-primary):hover {
    color: #fff;
    background: #0a73dd;
    filter: none;
    box-shadow: none;
}

:root[data-visual-theme="iphone"] :where(.secondary-button, .button-secondary, .ghost-button, .icon-button, .panel-control, .edge-toggle, .chip-button, .side-utility-button) {
    border-color: rgba(255,255,255,.085);
    background: #2c2c2e;
    box-shadow: none;
}

:root[data-visual-theme="iphone"] :where(.page-title, .section-title, .card h2, .hero-card h2, .metric-value, .modal-header h2, .hero h1, .section-heading h2, .legal-hero h1, .legal-document__header h2, .legal-section h3) {
    font-family: Inter, "SF Pro Display", "Avenir Next", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 680;
    letter-spacing: -.035em;
}

:root[data-visual-theme="iphone"] :where(.hero-card, .reading-canvas) { background: #1c1c1e; }

/* Silver */
:root[data-visual-theme="silver"] .ambient,
:root[data-visual-theme="silver"] .site-ambient {
    background:
        radial-gradient(ellipse 72% 52% at 50% -18%, rgba(255,255,255,.78), transparent 62%),
        linear-gradient(165deg, #f6f7f9 0%, #e8ebef 46%, #d8dde3 100%);
}

:root[data-visual-theme="silver"] .ambient__orb--one,
:root[data-visual-theme="silver"] .site-ambient::before {
    background: radial-gradient(circle, rgba(122,145,166,.13), transparent 70%);
}

:root[data-visual-theme="silver"] .ambient__orb--two,
:root[data-visual-theme="silver"] .site-ambient::after {
    background: radial-gradient(circle, rgba(255,255,255,.72), transparent 68%);
}

:root[data-visual-theme="silver"] .ambient__orb--three { background: radial-gradient(circle, rgba(121,128,144,.09), transparent 68%); }
:root[data-visual-theme="silver"] :where(.ambient__grid, .site-grid) { opacity: .1; }
:root[data-visual-theme="silver"] :where(.ambient__grain, .site-grain) { opacity: .018; }

:root[data-visual-theme="silver"] :where(.side-nav, .details-panel, .top-bar, .bottom-nav) {
    border-color: rgba(50,61,72,.12);
    background: rgba(245,246,248,.9);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
    backdrop-filter: blur(24px) saturate(108%);
    -webkit-backdrop-filter: blur(24px) saturate(108%);
}

:root[data-visual-theme="silver"] :where(.card, .metric, .modal, .details-card, .quick-launcher, .quick-story-card, .home-guest-hero, .home-value-card, .home-consultants-promo, .home-consultant-workspace, .settings-export-card) {
    border-color: rgba(50,61,72,.13) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(237,240,244,.94)) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.94), 0 14px 34px rgba(48,59,70,.085) !important;
}

:root[data-visual-theme="silver"] :where(.card, .metric, .modal, .details-card)::before {
    background: linear-gradient(115deg, rgba(255,255,255,.42), transparent 38%);
    opacity: .55;
}

:root[data-visual-theme="silver"] :where(.input, .select, .textarea, .compact-select, .text-input) {
    border-color: rgba(50,61,72,.15) !important;
    color: var(--text) !important;
    background: rgba(250,251,252,.88) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.88) !important;
}

:root[data-visual-theme="silver"] :where(.input, .select, .textarea, .compact-select, .text-input):focus {
    border-color: rgba(86,103,120,.5) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(86,103,120,.1) !important;
}

:root[data-visual-theme="silver"] :where(.primary-button, .button-primary) {
    border-color: #4e5e6d !important;
    color: #fff !important;
    background: linear-gradient(145deg, #6d7d8d, #4e5e6d) !important;
    box-shadow: 0 8px 20px rgba(58,72,85,.16), inset 0 1px 0 rgba(255,255,255,.24) !important;
}

:root[data-visual-theme="silver"] :where(.primary-button, .button-primary):hover {
    border-color: #455462 !important;
    color: #fff !important;
    background: linear-gradient(145deg, #627383, #455462) !important;
    filter: none !important;
}

:root[data-visual-theme="silver"] :where(.secondary-button, .button-secondary, .ghost-button, .icon-button, .panel-control, .edge-toggle, .chip-button, .side-utility-button) {
    border-color: rgba(50,61,72,.14) !important;
    color: var(--text-soft) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(218,223,229,.9)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86) !important;
}

:root[data-visual-theme="silver"] :where(.secondary-button, .button-secondary, .ghost-button, .icon-button, .panel-control, .edge-toggle, .chip-button, .side-utility-button):hover {
    border-color: var(--line-strong) !important;
    color: var(--text) !important;
    background: linear-gradient(145deg, #fff, #d5dbe2) !important;
}

:root[data-visual-theme="silver"] .header {
    border-color: var(--line);
    background: rgba(244,246,248,.9);
    box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 8px 24px rgba(48,59,70,.055);
}

:root[data-visual-theme="silver"] :where(.system-card, .scenario-card, .situation-preview, .product-window, .product-main, .product-sidebar, .reading-preview, .preview-card, .cta, .principles-panel, .consultant-promo, .split-feature) {
    border-color: rgba(50,61,72,.13) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(235,238,242,.94)) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.95), 0 14px 34px rgba(48,59,70,.08) !important;
}

/* Public pages */
:root[data-visual-theme="premium"] .public-page::before { background: radial-gradient(circle, rgba(143,174,193,.11), transparent 69%); }
:root[data-visual-theme="premium"] .public-page::after { background: radial-gradient(circle, rgba(214,182,111,.085), transparent 70%); }
:root[data-visual-theme="premium"] :where(.public-header, .public-content > .card, .public-node, .public-result, .public-reading-item) {
    border-color: rgba(238,221,190,.11);
    background: radial-gradient(circle at 100% 0, rgba(210,181,121,.05), transparent 38%), linear-gradient(150deg, rgba(34,32,36,.96), rgba(25,24,27,.96));
}

:root[data-visual-theme="iphone"] .public-page::before { background: radial-gradient(circle, rgba(10,132,255,.075), transparent 69%); }
:root[data-visual-theme="iphone"] .public-page::after { background: radial-gradient(circle, rgba(191,90,242,.04), transparent 70%); }
:root[data-visual-theme="iphone"] :where(.public-header, .public-content > .card, .public-node, .public-result, .public-reading-item) {
    border-color: rgba(255,255,255,.085);
    border-radius: 18px;
    background: #1c1c1e;
    box-shadow: none;
}
:root[data-visual-theme="iphone"] :where(.public-content > .card::before, .public-node::before, .public-result::before) { display: none; }

:root[data-visual-theme="silver"] body.public-page { background: var(--bg) !important; }
:root[data-visual-theme="silver"] .public-page::before { background: radial-gradient(circle, rgba(116,137,157,.11), transparent 69%) !important; }
:root[data-visual-theme="silver"] .public-page::after { background: radial-gradient(circle, rgba(255,255,255,.74), transparent 70%) !important; }
:root[data-visual-theme="silver"] .public-header {
    border-color: var(--line) !important;
    background: rgba(246,247,249,.92) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.94), 0 10px 28px rgba(48,59,70,.07) !important;
}
:root[data-visual-theme="silver"] :where(.public-content > .card, .public-node, .public-result, .public-reading-item) {
    border-color: rgba(50,61,72,.13) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(235,238,242,.94)) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.96), 0 13px 32px rgba(48,59,70,.08) !important;
}
:root[data-visual-theme="silver"] :where(.public-content > .card::before, .public-node::before, .public-result::before) {
    display: block !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent) !important;
}

/* Legal center */
:root[data-visual-theme="cream"] .legal-ambient { display: none; }
:root[data-visual-theme="cream"] .legal-header { background: rgba(249,245,238,.94); box-shadow: 0 1px 0 rgba(70,58,48,.03); }
:root[data-visual-theme="cream"] :where(.legal-meta-card, .legal-state) { border-color: var(--line); background: #faf6ef; box-shadow: none; }
:root[data-visual-theme="cream"] .legal-document { border-color: var(--line); background: #fffdf9; box-shadow: 0 8px 28px rgba(52,42,34,.055); }
:root[data-visual-theme="cream"] .legal-document__header { background: #f8f3eb; }
:root[data-visual-theme="cream"] :where(.legal-language, .legal-app-link, .legal-support-link) { border-color: var(--line); background: #eee7dd; box-shadow: none; }

:root[data-visual-theme="premium"] .legal-ambient span:nth-child(1) { background: radial-gradient(circle, rgba(143,174,193,.11), transparent 68%); }
:root[data-visual-theme="premium"] .legal-ambient span:nth-child(2) { background: radial-gradient(circle, rgba(214,182,111,.085), transparent 69%); }
:root[data-visual-theme="premium"] .legal-ambient span:nth-child(3) { background: radial-gradient(circle, rgba(138,116,151,.07), transparent 68%); }
:root[data-visual-theme="premium"] .legal-header { background: rgba(18,17,19,.84); }
:root[data-visual-theme="premium"] :where(.legal-meta-card, .legal-document) {
    border-color: rgba(238,221,190,.11);
    background: radial-gradient(circle at 100% 0, rgba(210,181,121,.05), transparent 38%), linear-gradient(150deg, rgba(34,32,36,.97), rgba(25,24,27,.97));
}

:root[data-visual-theme="iphone"] .legal-ambient { opacity: .48; }
:root[data-visual-theme="iphone"] .legal-ambient span:nth-child(1) { background: radial-gradient(circle, rgba(10,132,255,.075), transparent 68%); }
:root[data-visual-theme="iphone"] .legal-ambient span:nth-child(2) { background: radial-gradient(circle, rgba(100,210,255,.04), transparent 69%); }
:root[data-visual-theme="iphone"] .legal-ambient span:nth-child(3) { background: radial-gradient(circle, rgba(191,90,242,.035), transparent 68%); }
:root[data-visual-theme="iphone"] .legal-header { border-bottom-color: rgba(255,255,255,.075); background: rgba(16,16,18,.86); box-shadow: none; }
:root[data-visual-theme="iphone"] :where(.legal-meta-card, .legal-document) { border-color: rgba(255,255,255,.085); border-radius: 18px; background: #1c1c1e; box-shadow: none; }
:root[data-visual-theme="iphone"] .legal-document__header { background: radial-gradient(circle at 0 0, rgba(10,132,255,.07), transparent 38%); }

:root[data-visual-theme="silver"] .legal-ambient {
    background-image: linear-gradient(rgba(76,93,108,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(76,93,108,.025) 1px, transparent 1px);
}
:root[data-visual-theme="silver"] .legal-ambient span:nth-child(1) { background: radial-gradient(circle, rgba(116,137,157,.12), transparent 68%); }
:root[data-visual-theme="silver"] .legal-ambient span:nth-child(2) { background: radial-gradient(circle, rgba(255,255,255,.72), transparent 69%); }
:root[data-visual-theme="silver"] .legal-ambient span:nth-child(3) { background: radial-gradient(circle, rgba(124,133,147,.08), transparent 68%); }
:root[data-visual-theme="silver"] .legal-header { border-color: var(--line); background: rgba(244,246,248,.91); box-shadow: 0 1px 0 rgba(255,255,255,.86); }
:root[data-visual-theme="silver"] :where(.legal-meta-card, .legal-state, .legal-document) {
    border-color: rgba(50,61,72,.13);
    background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(235,238,242,.95));
    box-shadow: 0 1px 0 rgba(255,255,255,.95), 0 14px 34px rgba(48,59,70,.08);
}
:root[data-visual-theme="silver"] .legal-document__header { background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(224,228,233,.84)); }
:root[data-visual-theme="silver"] :where(.legal-language, .legal-app-link, .legal-support-link) { border-color: var(--line); background: linear-gradient(145deg, rgba(255,255,255,.76), rgba(218,223,229,.9)); box-shadow: inset 0 1px 0 rgba(255,255,255,.88); }

@media (prefers-reduced-motion: reduce) {
    .legal-theme-toggle {
        transition: none !important;
    }
}

@media print {
    .reflecta-theme-palette,
    .legal-theme-toggle {
        display: none !important;
    }
}

.reflecta-theme-option--lilac {
    color: #f0d7ff;
    border-color: rgba(214,162,255,.4);
    background: linear-gradient(145deg, #4a2b65 0%, #2b203d 54%, #8b2950 100%);
}

.reflecta-theme-option--amethyst {
    color: #e8d7ff;
    border-color: rgba(184,149,255,.42);
    background: linear-gradient(145deg, #3d2359 0%, #21162d 56%, #6a49a7 100%);
}

.reflecta-theme-option--aurora {
    color: #b7fbff;
    border-color: rgba(117,221,255,.4);
    background: linear-gradient(145deg, #173149 0%, #101823 50%, #283d6f 100%);
}

.reflecta-theme-option--rose {
    color: #ffd5e3;
    border-color: rgba(255,151,188,.42);
    background: linear-gradient(145deg, #5a2037 0%, #241521 54%, #7c3147 100%);
}

:root[data-visual-theme="lilac"] {
    color-scheme: dark;
    --bg: #16131e;
    --bg-deep: #100d17;
    --bg-elevated: #1b1625;
    --surface: rgba(34, 27, 47, .86);
    --surface-solid: #1d1828;
    --surface-2: rgba(41, 31, 57, .92);
    --surface-3: rgba(56, 39, 74, .84);
    --surface-hover: rgba(68, 48, 89, .86);
    --text: #f8f3ff;
    --text-soft: #ede3ff;
    --muted: #c8b7e9;
    --subtle: #9c88bf;
    --line: rgba(213, 186, 255, .12);
    --line-strong: rgba(213, 186, 255, .22);
    --accent: #cda7ff;
    --accent-soft: #eed9ff;
    --accent-strong: #ff5d87;
    --gold: #f0b5ff;
    --accent-ink: #140f1d;
    --success: #88d5bf;
    --warning: #f0b57a;
    --danger: #ff8aa3;
    --theme-orb-1: rgba(201, 142, 255, .13);
    --theme-orb-2: rgba(255, 91, 131, .09);
    --theme-orb-3: rgba(152, 111, 255, .08);
    --theme-panel-bg: linear-gradient(150deg, rgba(31,24,43,.95), rgba(23,19,33,.94));
    --theme-card-bg: radial-gradient(circle at 100% 0, rgba(216,177,255,.06), transparent 36%), linear-gradient(150deg, rgba(37,28,52,.97), rgba(24,20,34,.96));
    --theme-primary-bg: linear-gradient(145deg, #e0b9ff 0%, #b78dff 52%, #ff6b8d 100%);
    --theme-primary-bg-hover: linear-gradient(145deg, #e7c6ff 0%, #c39cff 52%, #ff7a98 100%);
    --theme-secondary-bg: linear-gradient(145deg, rgba(52,40,72,.94), rgba(31,24,43,.96));
    --theme-public-1: rgba(201,142,255,.11);
    --theme-public-2: rgba(255,91,131,.07);
    --theme-symbol-image: url("/shared/theme-patterns/lilac-flower-of-life.svg");
    --theme-symbol-size: clamp(660px, 80vw, 1080px);
    --theme-symbol-position: 50% 44%;
    --theme-symbol-landing-position: 68% 47%;
    --theme-symbol-landing-size: clamp(620px, 72vw, 980px);
}

:root[data-visual-theme="amethyst"] {
    color-scheme: dark;
    --bg: #18111f;
    --bg-deep: #110b17;
    --bg-elevated: #20172a;
    --surface: rgba(35, 24, 48, .86);
    --surface-solid: #20172a;
    --surface-2: rgba(43, 29, 58, .92);
    --surface-3: rgba(59, 41, 79, .84);
    --surface-hover: rgba(71, 49, 96, .85);
    --text: #f8f3ff;
    --text-soft: #e8ddfb;
    --muted: #bdaed9;
    --subtle: #9281af;
    --line: rgba(201, 177, 240, .12);
    --line-strong: rgba(201, 177, 240, .22);
    --accent: #b895ff;
    --accent-soft: #e6dcff;
    --accent-strong: #8f6dff;
    --gold: #d4b06a;
    --accent-ink: #130f19;
    --success: #7dd0a5;
    --warning: #d7b26d;
    --danger: #e28ead;
    --theme-orb-1: rgba(184,149,255,.12);
    --theme-orb-2: rgba(212,176,106,.09);
    --theme-orb-3: rgba(143,109,255,.08);
    --theme-panel-bg: linear-gradient(150deg, rgba(31,23,42,.95), rgba(24,18,32,.95));
    --theme-card-bg: radial-gradient(circle at 100% 0, rgba(184,149,255,.05), transparent 36%), linear-gradient(150deg, rgba(39,28,52,.97), rgba(24,18,32,.97));
    --theme-primary-bg: linear-gradient(145deg, #d8b9ff 0%, #b895ff 48%, #8f6dff 100%);
    --theme-primary-bg-hover: linear-gradient(145deg, #dfc6ff 0%, #c5a9ff 48%, #9d7fff 100%);
    --theme-secondary-bg: linear-gradient(145deg, rgba(49,34,67,.94), rgba(31,23,42,.96));
    --theme-public-1: rgba(184,149,255,.1);
    --theme-public-2: rgba(212,176,106,.07);
    --theme-symbol-image: url("/shared/theme-patterns/amethyst-lotus-mandala.svg");
    --theme-symbol-size: clamp(660px, 78vw, 1040px);
    --theme-symbol-position: 50% 48%;
    --theme-symbol-landing-position: 70% 48%;
    --theme-symbol-landing-size: clamp(620px, 70vw, 960px);
}

:root[data-visual-theme="aurora"] {
    color-scheme: dark;
    --bg: #101823;
    --bg-deep: #0b121b;
    --bg-elevated: #15202d;
    --surface: rgba(21, 32, 45, .86);
    --surface-solid: #15202d;
    --surface-2: rgba(27, 41, 58, .92);
    --surface-3: rgba(34, 55, 76, .84);
    --surface-hover: rgba(42, 66, 91, .86);
    --text: #eff8ff;
    --text-soft: #dcedfb;
    --muted: #a6c0d8;
    --subtle: #7391aa;
    --line: rgba(152, 213, 255, .12);
    --line-strong: rgba(152, 213, 255, .22);
    --accent: #7fd9ff;
    --accent-soft: #cdf4ff;
    --accent-strong: #82e8d1;
    --gold: #9b85ff;
    --accent-ink: #0c141d;
    --success: #84dfc6;
    --warning: #d4bf78;
    --danger: #ff98ac;
    --theme-orb-1: rgba(127,217,255,.12);
    --theme-orb-2: rgba(130,232,209,.09);
    --theme-orb-3: rgba(155,133,255,.08);
    --theme-panel-bg: linear-gradient(150deg, rgba(18,28,39,.95), rgba(12,20,29,.95));
    --theme-card-bg: radial-gradient(circle at 100% 0, rgba(127,217,255,.05), transparent 36%), linear-gradient(150deg, rgba(22,34,48,.97), rgba(12,20,29,.97));
    --theme-primary-bg: linear-gradient(145deg, #bceeff 0%, #7fd9ff 46%, #76d9c5 100%);
    --theme-primary-bg-hover: linear-gradient(145deg, #d2f4ff 0%, #97e1ff 46%, #8be1cf 100%);
    --theme-secondary-bg: linear-gradient(145deg, rgba(31,47,65,.94), rgba(17,27,39,.96));
    --theme-public-1: rgba(127,217,255,.11);
    --theme-public-2: rgba(130,232,209,.08);
    --theme-symbol-image: url("/shared/theme-patterns/aurora-sacred-geometry.svg");
    --theme-symbol-size: clamp(680px, 80vw, 1080px);
    --theme-symbol-position: 50% 45%;
    --theme-symbol-landing-position: 68% 46%;
    --theme-symbol-landing-size: clamp(640px, 72vw, 990px);
}

:root[data-visual-theme="rose"] {
    color-scheme: dark;
    --bg: #21131a;
    --bg-deep: #170d13;
    --bg-elevated: #2a1822;
    --surface: rgba(45, 25, 37, .86);
    --surface-solid: #2a1822;
    --surface-2: rgba(54, 30, 44, .92);
    --surface-3: rgba(72, 41, 58, .84);
    --surface-hover: rgba(88, 50, 69, .86);
    --text: #fff3f8;
    --text-soft: #f5dde7;
    --muted: #ddb1c4;
    --subtle: #b57e99;
    --line: rgba(255, 182, 207, .12);
    --line-strong: rgba(255, 182, 207, .22);
    --accent: #ff98b6;
    --accent-soft: #ffd6e2;
    --accent-strong: #ff6f91;
    --gold: #f2a38f;
    --accent-ink: #170d13;
    --success: #89d2b2;
    --warning: #f0b07e;
    --danger: #ff889f;
    --theme-orb-1: rgba(255,152,182,.12);
    --theme-orb-2: rgba(255,111,145,.09);
    --theme-orb-3: rgba(242,163,143,.08);
    --theme-panel-bg: linear-gradient(150deg, rgba(40,23,33,.95), rgba(25,15,22,.95));
    --theme-card-bg: radial-gradient(circle at 100% 0, rgba(255,152,182,.05), transparent 36%), linear-gradient(150deg, rgba(49,28,40,.97), rgba(25,15,22,.97));
    --theme-primary-bg: linear-gradient(145deg, #ffd0de 0%, #ff98b6 50%, #ff6f91 100%);
    --theme-primary-bg-hover: linear-gradient(145deg, #ffdbe5 0%, #ffacc4 50%, #ff80a0 100%);
    --theme-secondary-bg: linear-gradient(145deg, rgba(62,36,49,.94), rgba(39,23,33,.96));
    --theme-public-1: rgba(255,152,182,.11);
    --theme-public-2: rgba(255,111,145,.08);
    --theme-symbol-image: url("/shared/theme-patterns/rose-lotus.svg");
    --theme-symbol-size: clamp(680px, 82vw, 1120px);
    --theme-symbol-position: 50% 50%;
    --theme-symbol-landing-position: 72% 52%;
    --theme-symbol-landing-size: clamp(640px, 74vw, 1020px);
}

:root[data-visual-theme="lilac"] .ambient,
:root[data-visual-theme="amethyst"] .ambient,
:root[data-visual-theme="aurora"] .ambient,
:root[data-visual-theme="rose"] .ambient,
:root[data-visual-theme="lilac"] .site-ambient,
:root[data-visual-theme="amethyst"] .site-ambient,
:root[data-visual-theme="aurora"] .site-ambient,
:root[data-visual-theme="rose"] .site-ambient {
    background-color: var(--bg) !important;
    background-image: var(--theme-symbol-image), linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 56%, var(--bg-deep) 100%) !important;
    background-position: var(--theme-symbol-position), center !important;
    background-repeat: no-repeat, no-repeat !important;
    background-size: var(--theme-symbol-size) var(--theme-symbol-size), 100% 100% !important;
}

:root[data-visual-theme="lilac"] :where(.ambient__orb--one, .site-ambient::before),
:root[data-visual-theme="amethyst"] :where(.ambient__orb--one, .site-ambient::before),
:root[data-visual-theme="aurora"] :where(.ambient__orb--one, .site-ambient::before),
:root[data-visual-theme="rose"] :where(.ambient__orb--one, .site-ambient::before) {
    background: radial-gradient(circle, var(--theme-orb-1), transparent 70%);
}

:root[data-visual-theme="lilac"] :where(.ambient__orb--two, .site-ambient::after),
:root[data-visual-theme="amethyst"] :where(.ambient__orb--two, .site-ambient::after),
:root[data-visual-theme="aurora"] :where(.ambient__orb--two, .site-ambient::after),
:root[data-visual-theme="rose"] :where(.ambient__orb--two, .site-ambient::after) {
    background: radial-gradient(circle, var(--theme-orb-2), transparent 70%);
}

:root[data-visual-theme="lilac"] .ambient__orb--three,
:root[data-visual-theme="amethyst"] .ambient__orb--three,
:root[data-visual-theme="aurora"] .ambient__orb--three,
:root[data-visual-theme="rose"] .ambient__orb--three {
    background: radial-gradient(circle, var(--theme-orb-3), transparent 68%);
}

:root[data-visual-theme="lilac"] :where(.ambient__grid, .site-grid),
:root[data-visual-theme="amethyst"] :where(.ambient__grid, .site-grid),
:root[data-visual-theme="aurora"] :where(.ambient__grid, .site-grid),
:root[data-visual-theme="rose"] :where(.ambient__grid, .site-grid) { opacity: .07; }

:root[data-visual-theme="lilac"] .legal-ambient,
:root[data-visual-theme="amethyst"] .legal-ambient,
:root[data-visual-theme="aurora"] .legal-ambient,
:root[data-visual-theme="rose"] .legal-ambient {
    background-image: var(--theme-symbol-image), linear-gradient(rgba(210, 190, 238, .018) 1px, transparent 1px), linear-gradient(90deg, rgba(210, 190, 238, .018) 1px, transparent 1px);
    background-position: var(--theme-symbol-position), 0 0, 0 0;
    background-repeat: no-repeat, repeat, repeat;
    background-size: var(--theme-symbol-size) var(--theme-symbol-size), 72px 72px, 72px 72px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.96), rgba(0,0,0,.68) 76%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.96), rgba(0,0,0,.68) 76%, transparent 100%);
}


:root[data-visual-theme="lilac"] :where(body.landing-personal, body.landing-consultants),
:root[data-visual-theme="amethyst"] :where(body.landing-personal, body.landing-consultants),
:root[data-visual-theme="aurora"] :where(body.landing-personal, body.landing-consultants),
:root[data-visual-theme="rose"] :where(body.landing-personal, body.landing-consultants) {
    background-color: var(--bg) !important;
    background-image: linear-gradient(90deg, var(--bg) 0%, color-mix(in oklab, var(--bg) 92%, transparent) 30%, color-mix(in oklab, var(--bg) 58%, transparent) 49%, transparent 70%), var(--theme-symbol-image), linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 56%, var(--bg-deep) 100%) !important;
    background-position: center, var(--theme-symbol-landing-position), center top !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-size: 100% 100%, var(--theme-symbol-landing-size) var(--theme-symbol-landing-size), 100% 100% !important;
    background-attachment: fixed, fixed, scroll !important;
}

@media (max-width: 720px) {
    :root[data-visual-theme="lilac"] :where(body.landing-personal, body.landing-consultants),
    :root[data-visual-theme="amethyst"] :where(body.landing-personal, body.landing-consultants),
    :root[data-visual-theme="aurora"] :where(body.landing-personal, body.landing-consultants),
    :root[data-visual-theme="rose"] :where(body.landing-personal, body.landing-consultants) {
        background-image: linear-gradient(color-mix(in oklab, var(--bg) 84%, transparent), color-mix(in oklab, var(--bg) 84%, transparent)), var(--theme-symbol-image), linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 56%, var(--bg-deep) 100%) !important;
        background-position: center, 50% 150px, center top !important;
        background-size: 100% 100%, 720px 720px, 100% 100% !important;
        background-attachment: scroll, scroll, scroll !important;
    }
}


:root[data-visual-theme="lilac"] body.public-page,
:root[data-visual-theme="amethyst"] body.public-page,
:root[data-visual-theme="aurora"] body.public-page,
:root[data-visual-theme="rose"] body.public-page {
    background-color: var(--bg) !important;
    background-image: var(--theme-symbol-image), linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 56%, var(--bg-deep) 100%) !important;
    background-position: var(--theme-symbol-position), center !important;
    background-repeat: no-repeat, no-repeat !important;
    background-size: var(--theme-symbol-size) var(--theme-symbol-size), 100% 100% !important;
}

:root[data-visual-theme="lilac"] :where(.side-nav, .details-panel, .top-bar, .bottom-nav),
:root[data-visual-theme="amethyst"] :where(.side-nav, .details-panel, .top-bar, .bottom-nav),
:root[data-visual-theme="aurora"] :where(.side-nav, .details-panel, .top-bar, .bottom-nav),
:root[data-visual-theme="rose"] :where(.side-nav, .details-panel, .top-bar, .bottom-nav) {
    border-color: var(--line) !important;
    background: var(--theme-panel-bg) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.24) !important;
}

:root[data-visual-theme="lilac"] :where(.card, .metric, .modal, .details-card, .quick-launcher, .quick-story-card, .home-guest-hero, .home-value-card, .home-consultants-promo, .home-consultant-workspace, .settings-export-card, .system-card, .scenario-card, .situation-preview, .product-window, .product-main, .product-sidebar, .reading-preview, .preview-card, .cta, .principles-panel, .consultant-promo, .split-feature, .hero-card, .reading-canvas),
:root[data-visual-theme="amethyst"] :where(.card, .metric, .modal, .details-card, .quick-launcher, .quick-story-card, .home-guest-hero, .home-value-card, .home-consultants-promo, .home-consultant-workspace, .settings-export-card, .system-card, .scenario-card, .situation-preview, .product-window, .product-main, .product-sidebar, .reading-preview, .preview-card, .cta, .principles-panel, .consultant-promo, .split-feature, .hero-card, .reading-canvas),
:root[data-visual-theme="aurora"] :where(.card, .metric, .modal, .details-card, .quick-launcher, .quick-story-card, .home-guest-hero, .home-value-card, .home-consultants-promo, .home-consultant-workspace, .settings-export-card, .system-card, .scenario-card, .situation-preview, .product-window, .product-main, .product-sidebar, .reading-preview, .preview-card, .cta, .principles-panel, .consultant-promo, .split-feature, .hero-card, .reading-canvas),
:root[data-visual-theme="rose"] :where(.card, .metric, .modal, .details-card, .quick-launcher, .quick-story-card, .home-guest-hero, .home-value-card, .home-consultants-promo, .home-consultant-workspace, .settings-export-card, .system-card, .scenario-card, .situation-preview, .product-window, .product-main, .product-sidebar, .reading-preview, .preview-card, .cta, .principles-panel, .consultant-promo, .split-feature, .hero-card, .reading-canvas) {
    border-color: var(--line) !important;
    background: var(--theme-card-bg) !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.2) !important;
}

:root[data-visual-theme="lilac"] :where(.nav-link.is-active, .system-tab.is-selected, .tab.is-selected),
:root[data-visual-theme="amethyst"] :where(.nav-link.is-active, .system-tab.is-selected, .tab.is-selected),
:root[data-visual-theme="aurora"] :where(.nav-link.is-active, .system-tab.is-selected, .tab.is-selected),
:root[data-visual-theme="rose"] :where(.nav-link.is-active, .system-tab.is-selected, .tab.is-selected) {
    border-color: var(--line-strong) !important;
    background: color-mix(in oklab, var(--surface-3) 76%, transparent) !important;
}

:root[data-visual-theme="lilac"] :where(.input, .select, .textarea, .compact-select, .text-input),
:root[data-visual-theme="amethyst"] :where(.input, .select, .textarea, .compact-select, .text-input),
:root[data-visual-theme="aurora"] :where(.input, .select, .textarea, .compact-select, .text-input),
:root[data-visual-theme="rose"] :where(.input, .select, .textarea, .compact-select, .text-input) {
    border-color: var(--line) !important;
    color: var(--text) !important;
    background: color-mix(in oklab, var(--surface-2) 85%, transparent) !important;
}

:root[data-visual-theme="lilac"] :where(.input, .select, .textarea, .compact-select, .text-input):focus,
:root[data-visual-theme="amethyst"] :where(.input, .select, .textarea, .compact-select, .text-input):focus,
:root[data-visual-theme="aurora"] :where(.input, .select, .textarea, .compact-select, .text-input):focus,
:root[data-visual-theme="rose"] :where(.input, .select, .textarea, .compact-select, .text-input):focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 12%, transparent) !important;
}

:root[data-visual-theme="lilac"] :where(.primary-button, .button-primary),
:root[data-visual-theme="amethyst"] :where(.primary-button, .button-primary),
:root[data-visual-theme="aurora"] :where(.primary-button, .button-primary),
:root[data-visual-theme="rose"] :where(.primary-button, .button-primary) {
    border-color: transparent !important;
    color: var(--accent-ink) !important;
    background: var(--theme-primary-bg) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

:root[data-visual-theme="lilac"] :where(.primary-button, .button-primary):hover,
:root[data-visual-theme="amethyst"] :where(.primary-button, .button-primary):hover,
:root[data-visual-theme="aurora"] :where(.primary-button, .button-primary):hover,
:root[data-visual-theme="rose"] :where(.primary-button, .button-primary):hover {
    color: var(--accent-ink) !important;
    background: var(--theme-primary-bg-hover) !important;
}

:root[data-visual-theme="lilac"] :where(.secondary-button, .button-secondary, .ghost-button, .icon-button, .panel-control, .edge-toggle, .chip-button, .side-utility-button),
:root[data-visual-theme="amethyst"] :where(.secondary-button, .button-secondary, .ghost-button, .icon-button, .panel-control, .edge-toggle, .chip-button, .side-utility-button),
:root[data-visual-theme="aurora"] :where(.secondary-button, .button-secondary, .ghost-button, .icon-button, .panel-control, .edge-toggle, .chip-button, .side-utility-button),
:root[data-visual-theme="rose"] :where(.secondary-button, .button-secondary, .ghost-button, .icon-button, .panel-control, .edge-toggle, .chip-button, .side-utility-button) {
    border-color: var(--line) !important;
    color: var(--text-soft) !important;
    background: var(--theme-secondary-bg) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

:root[data-visual-theme="lilac"] .header,
:root[data-visual-theme="amethyst"] .header,
:root[data-visual-theme="aurora"] .header,
:root[data-visual-theme="rose"] .header {
    border-color: var(--line) !important;
    background: color-mix(in oklab, var(--bg-deep) 86%, transparent) !important;
}

:root[data-visual-theme="lilac"] .public-page::before,
:root[data-visual-theme="amethyst"] .public-page::before,
:root[data-visual-theme="aurora"] .public-page::before,
:root[data-visual-theme="rose"] .public-page::before {
    background: radial-gradient(circle, var(--theme-public-1), transparent 69%) !important;
}

:root[data-visual-theme="lilac"] .public-page::after,
:root[data-visual-theme="amethyst"] .public-page::after,
:root[data-visual-theme="aurora"] .public-page::after,
:root[data-visual-theme="rose"] .public-page::after {
    background: radial-gradient(circle, var(--theme-public-2), transparent 70%) !important;
}

:root[data-visual-theme="lilac"] :where(.public-header, .public-content > .card, .public-node, .public-result, .public-reading-item),
:root[data-visual-theme="amethyst"] :where(.public-header, .public-content > .card, .public-node, .public-result, .public-reading-item),
:root[data-visual-theme="aurora"] :where(.public-header, .public-content > .card, .public-node, .public-result, .public-reading-item),
:root[data-visual-theme="rose"] :where(.public-header, .public-content > .card, .public-node, .public-result, .public-reading-item) {
    border-color: var(--line) !important;
    background: var(--theme-card-bg) !important;
}

:root[data-visual-theme="lilac"] .legal-ambient span:nth-child(1),
:root[data-visual-theme="amethyst"] .legal-ambient span:nth-child(1),
:root[data-visual-theme="aurora"] .legal-ambient span:nth-child(1),
:root[data-visual-theme="rose"] .legal-ambient span:nth-child(1) {
    background: radial-gradient(circle, var(--theme-orb-1), transparent 68%);
}

:root[data-visual-theme="lilac"] .legal-ambient span:nth-child(2),
:root[data-visual-theme="amethyst"] .legal-ambient span:nth-child(2),
:root[data-visual-theme="aurora"] .legal-ambient span:nth-child(2),
:root[data-visual-theme="rose"] .legal-ambient span:nth-child(2) {
    background: radial-gradient(circle, var(--theme-orb-2), transparent 69%);
}

:root[data-visual-theme="lilac"] .legal-ambient span:nth-child(3),
:root[data-visual-theme="amethyst"] .legal-ambient span:nth-child(3),
:root[data-visual-theme="aurora"] .legal-ambient span:nth-child(3),
:root[data-visual-theme="rose"] .legal-ambient span:nth-child(3) {
    background: radial-gradient(circle, var(--theme-orb-3), transparent 68%);
}

:root[data-visual-theme="lilac"] .legal-header,
:root[data-visual-theme="amethyst"] .legal-header,
:root[data-visual-theme="aurora"] .legal-header,
:root[data-visual-theme="rose"] .legal-header {
    border-bottom-color: var(--line) !important;
    background: color-mix(in oklab, var(--bg-deep) 84%, transparent) !important;
}

:root[data-visual-theme="lilac"] :where(.legal-meta-card, .legal-state, .legal-document),
:root[data-visual-theme="amethyst"] :where(.legal-meta-card, .legal-state, .legal-document),
:root[data-visual-theme="aurora"] :where(.legal-meta-card, .legal-state, .legal-document),
:root[data-visual-theme="rose"] :where(.legal-meta-card, .legal-state, .legal-document) {
    border-color: var(--line) !important;
    background: var(--theme-card-bg) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.16) !important;
}

:root[data-visual-theme="lilac"] .legal-document__header,
:root[data-visual-theme="amethyst"] .legal-document__header,
:root[data-visual-theme="aurora"] .legal-document__header,
:root[data-visual-theme="rose"] .legal-document__header {
    background: radial-gradient(circle at 0 0, color-mix(in oklab, var(--accent) 10%, transparent), transparent 38%) !important;
}
/* Reflecta 12-theme expansion: four airy celestial themes. */
.reflecta-theme-option--sky {
    color: #4f61c5;
    border-color: rgba(90,109,219,.34);
    background: linear-gradient(145deg, #ffffff 0%, #e6f3ff 48%, #eee8ff 76%, #ffece2 100%);
}

.reflecta-theme-option--pearl {
    color: #526176;
    border-color: rgba(82,105,184,.28);
    background: linear-gradient(135deg, #ffffff 0%, #dfe5ed 34%, #fafbfc 60%, #cbd2dd 100%);
}

.reflecta-theme-option--pastel {
    color: #6b61cd;
    border-color: rgba(118,103,216,.34);
    background: linear-gradient(145deg, #e4f4ff 0%, #eee7ff 38%, #ffeaf3 70%, #fff0e7 100%);
}

.reflecta-theme-option--night {
    color: #bce8ff;
    border-color: rgba(168,221,255,.38);
    background: radial-gradient(circle at 28% 22%, #315778 0%, #193a59 42%, #102238 72%, #091827 100%);
}

:root[data-visual-theme="sky"] {
    color-scheme: light;
    --bg: #f7faff;
    --bg-deep: #e7f2ff;
    --bg-elevated: #fbfdff;
    --bg-soft: #edf4fd;
    --surface: rgba(255,255,255,.91);
    --surface-solid: #ffffff;
    --surface-strong: #ffffff;
    --surface-2: #f4f7fc;
    --surface-3: #e9f0fa;
    --surface-hover: #e3ecf8;
    --text: #243247;
    --text-soft: #40516a;
    --muted: #66768c;
    --subtle: #8998aa;
    --line: rgba(55,85,125,.13);
    --line-strong: rgba(55,85,125,.23);
    --accent: #5a6ddb;
    --accent-soft: #6879d7;
    --accent-strong: #7a5fd8;
    --accent-2: #7a5fd8;
    --gold: #c98967;
    --accent-ink: #ffffff;
    --success: #3c806e;
    --warning: #95682f;
    --danger: #b85667;
    --border: var(--line);
    --border-strong: var(--line-strong);
    --surface-elevated: var(--surface-2);
    --shadow-xs: 0 1px 0 rgba(255,255,255,.96), 0 7px 18px rgba(66,89,126,.055);
    --shadow-sm: 0 1px 0 rgba(255,255,255,.98), 0 15px 38px rgba(66,89,126,.09);
    --shadow: 0 1px 0 rgba(255,255,255,.98), 0 30px 76px rgba(66,89,126,.14);
    --shadow-focus: 0 0 0 4px rgba(90,109,219,.14);
    --theme-orb-1: rgba(105,190,239,.18);
    --theme-orb-2: rgba(151,123,226,.13);
    --theme-orb-3: rgba(230,154,124,.11);
    --theme-grid-opacity: .075;
    --theme-symbol-image: url("/shared/theme-patterns/sky-celestial-orbits.svg");
    --theme-symbol-size: clamp(700px, 82vw, 1120px);
    --theme-symbol-position: 58% 42%;
    --theme-symbol-landing-position: 75% 46%;
    --theme-symbol-landing-size: clamp(680px, 76vw, 1060px);
    --theme-panel-bg: linear-gradient(150deg, rgba(255,255,255,.92), rgba(242,247,255,.88));
    --theme-card-bg: radial-gradient(circle at 100% 0, rgba(122,95,216,.055), transparent 36%), linear-gradient(150deg, rgba(255,255,255,.98), rgba(247,250,255,.97));
    --theme-card-hover-bg: linear-gradient(150deg, #ffffff, #edf4fd);
    --theme-primary-bg: linear-gradient(135deg, #5a6ddb 0%, #6d6edc 48%, #7a5fd8 100%);
    --theme-primary-bg-hover: linear-gradient(135deg, #6578e2 0%, #7879e3 48%, #896de0 100%);
    --theme-secondary-bg: linear-gradient(145deg, rgba(244,248,254,.98), rgba(232,240,250,.96));
    --theme-feature-bg: linear-gradient(145deg, #f2efff, #edf7ff 54%, #fff4ed);
    --theme-practice-bg: linear-gradient(150deg, #ffffff, #f2f6fc);
    --theme-ai-bg: linear-gradient(145deg, #f3efff, #eef4ff);
    --theme-warning-bg: #fff5e9;
    --theme-reading-bg: radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.94), rgba(220,239,255,.56) 34%, transparent 68%), radial-gradient(circle at 18% 16%, rgba(232,223,255,.62), transparent 38%), linear-gradient(150deg, #edf5ff 0%, #e4effb 52%, #f6f1ff 100%);
    --theme-reading-stage-bg: radial-gradient(circle at 10% 0, rgba(105,190,239,.18), transparent 30%), linear-gradient(150deg, rgba(255,255,255,.98), rgba(238,245,255,.98));
    --theme-reading-details-bg: linear-gradient(145deg, rgba(255,255,255,.98), rgba(239,246,255,.98));
    --theme-reading-details-text: #2c3c53;
    --theme-reading-details-muted: #66768c;
    --theme-card-back-bg: radial-gradient(circle at 50% 42%, rgba(142,201,240,.22), transparent 31%), radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(221,185,112,.12) 34.3% 34.8%, transparent 35.1%), repeating-conic-gradient(from 45deg at 50% 50%, rgba(205,232,250,.035) 0 4deg, transparent 4deg 16deg), linear-gradient(145deg, #244763 0%, #17324e 52%, #102740 100%);
    --theme-card-back-color: #e5f5ff;
    --theme-tarot: #705acb;
    --theme-runes: #3c82ae;
    --theme-mac: #b96d55;
}

:root[data-visual-theme="pearl"] {
    color-scheme: light;
    --bg: #f1f4f8;
    --bg-deep: #e2e8ef;
    --bg-elevated: #fafbfd;
    --bg-soft: #e9edf4;
    --surface: rgba(251,252,254,.92);
    --surface-solid: #fbfcfe;
    --surface-strong: #ffffff;
    --surface-2: #f4f6f9;
    --surface-3: #e3e8ef;
    --surface-hover: #dce3ec;
    --text: #293342;
    --text-soft: #465363;
    --muted: #6b7786;
    --subtle: #8d98a5;
    --line: rgba(56,70,88,.13);
    --line-strong: rgba(56,70,88,.23);
    --accent: #5269b8;
    --accent-soft: #6175b9;
    --accent-strong: #7164c7;
    --accent-2: #7164c7;
    --gold: #8b7a66;
    --accent-ink: #ffffff;
    --success: #4e7868;
    --warning: #856b42;
    --danger: #a85663;
    --border: var(--line);
    --border-strong: var(--line-strong);
    --surface-elevated: var(--surface-2);
    --shadow-xs: 0 1px 0 rgba(255,255,255,.97), 0 8px 20px rgba(61,75,94,.05);
    --shadow-sm: 0 1px 0 rgba(255,255,255,.98), 0 16px 40px rgba(61,75,94,.08);
    --shadow: 0 1px 0 rgba(255,255,255,.99), 0 32px 78px rgba(61,75,94,.13);
    --shadow-focus: 0 0 0 4px rgba(82,105,184,.13);
    --theme-orb-1: rgba(121,145,174,.14);
    --theme-orb-2: rgba(137,121,178,.10);
    --theme-orb-3: rgba(255,255,255,.72);
    --theme-grid-opacity: .09;
    --theme-symbol-image: url("/shared/theme-patterns/pearl-cosmos.svg");
    --theme-symbol-size: clamp(700px, 80vw, 1080px);
    --theme-symbol-position: 58% 46%;
    --theme-symbol-landing-position: 76% 48%;
    --theme-symbol-landing-size: clamp(680px, 74vw, 1020px);
    --theme-panel-bg: linear-gradient(145deg, rgba(255,255,255,.9), rgba(235,239,245,.9));
    --theme-card-bg: radial-gradient(circle at 100% 0, rgba(113,100,199,.035), transparent 38%), linear-gradient(145deg, rgba(255,255,255,.96), rgba(239,242,247,.97));
    --theme-card-hover-bg: linear-gradient(145deg, #ffffff, #e8edf3);
    --theme-primary-bg: linear-gradient(135deg, #5269b8 0%, #6370bd 50%, #7164c7 100%);
    --theme-primary-bg-hover: linear-gradient(135deg, #6076c5 0%, #707ec8 50%, #8072d1 100%);
    --theme-secondary-bg: linear-gradient(145deg, rgba(251,252,254,.98), rgba(226,231,238,.96));
    --theme-feature-bg: linear-gradient(145deg, #f8fafc, #e6ebf2 62%, #f3f0f7);
    --theme-practice-bg: linear-gradient(150deg, #ffffff, #edf1f6);
    --theme-ai-bg: linear-gradient(145deg, #f1eff8, #edf1f8);
    --theme-warning-bg: #f7f0e6;
    --theme-reading-bg: radial-gradient(ellipse at 50% 43%, rgba(255,255,255,.88), rgba(218,226,237,.54) 36%, transparent 70%), radial-gradient(circle at 18% 18%, rgba(230,226,242,.5), transparent 39%), linear-gradient(150deg, #e8edf4 0%, #dfe6ef 52%, #f3f5f8 100%);
    --theme-reading-stage-bg: radial-gradient(circle at 10% 0, rgba(121,145,174,.14), transparent 31%), linear-gradient(150deg, rgba(255,255,255,.97), rgba(232,237,244,.98));
    --theme-reading-details-bg: linear-gradient(145deg, rgba(255,255,255,.98), rgba(235,239,246,.98));
    --theme-reading-details-text: #303a48;
    --theme-reading-details-muted: #6b7786;
    --theme-card-back-bg: radial-gradient(circle at 50% 42%, rgba(180,205,225,.19), transparent 31%), radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(205,188,157,.12) 34.3% 34.8%, transparent 35.1%), repeating-conic-gradient(from 45deg at 50% 50%, rgba(221,234,245,.03) 0 4deg, transparent 4deg 16deg), linear-gradient(145deg, #445e76 0%, #314c68 52%, #233d58 100%);
    --theme-card-back-color: #edf6fc;
    --theme-tarot: #6a5fac;
    --theme-runes: #57758f;
    --theme-mac: #967367;
}

:root[data-visual-theme="pastel"] {
    color-scheme: light;
    --bg: #faf9ff;
    --bg-deep: #efeffb;
    --bg-elevated: #fffefe;
    --bg-soft: #f3f0fb;
    --surface: rgba(255,255,255,.91);
    --surface-solid: #ffffff;
    --surface-strong: #ffffff;
    --surface-2: #f8f5fc;
    --surface-3: #eee9f8;
    --surface-hover: #e9e3f5;
    --text: #303047;
    --text-soft: #504f6a;
    --muted: #73718d;
    --subtle: #9693aa;
    --line: rgba(74,68,118,.12);
    --line-strong: rgba(74,68,118,.22);
    --accent: #6567d8;
    --accent-soft: #7475d5;
    --accent-strong: #a957a2;
    --accent-2: #a957a2;
    --gold: #d38976;
    --accent-ink: #ffffff;
    --success: #438172;
    --warning: #9a6a3c;
    --danger: #b85570;
    --border: var(--line);
    --border-strong: var(--line-strong);
    --surface-elevated: var(--surface-2);
    --shadow-xs: 0 1px 0 rgba(255,255,255,.97), 0 8px 20px rgba(83,70,126,.05);
    --shadow-sm: 0 1px 0 rgba(255,255,255,.98), 0 16px 42px rgba(83,70,126,.085);
    --shadow: 0 1px 0 rgba(255,255,255,.99), 0 32px 82px rgba(83,70,126,.14);
    --shadow-focus: 0 0 0 4px rgba(101,103,216,.14);
    --theme-orb-1: rgba(109,190,232,.17);
    --theme-orb-2: rgba(157,119,220,.14);
    --theme-orb-3: rgba(229,140,159,.12);
    --theme-grid-opacity: .065;
    --theme-symbol-image: url("/shared/theme-patterns/soft-aurora-ribbons.svg");
    --theme-symbol-size: clamp(720px, 84vw, 1160px);
    --theme-symbol-position: 58% 43%;
    --theme-symbol-landing-position: 75% 46%;
    --theme-symbol-landing-size: clamp(700px, 78vw, 1100px);
    --theme-panel-bg: linear-gradient(150deg, rgba(255,255,255,.91), rgba(245,240,252,.89));
    --theme-card-bg: radial-gradient(circle at 100% 0, rgba(169,87,162,.05), transparent 36%), linear-gradient(150deg, rgba(255,255,255,.98), rgba(250,247,255,.97));
    --theme-card-hover-bg: linear-gradient(150deg, #ffffff, #f2edfb);
    --theme-primary-bg: linear-gradient(135deg, #6567d8 0%, #7d65d6 48%, #a957a2 100%);
    --theme-primary-bg-hover: linear-gradient(135deg, #7274e0 0%, #8b73de 48%, #b565ae 100%);
    --theme-secondary-bg: linear-gradient(145deg, rgba(253,251,255,.98), rgba(239,233,249,.96));
    --theme-feature-bg: linear-gradient(145deg, #eaf6ff, #f0eaff 48%, #ffedf4 75%, #fff3ea);
    --theme-practice-bg: linear-gradient(150deg, #ffffff, #f7f2fb);
    --theme-ai-bg: linear-gradient(145deg, #f1ebff, #fceff8);
    --theme-warning-bg: #fff3e8;
    --theme-reading-bg: radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.92), rgba(225,237,255,.48) 34%, transparent 68%), radial-gradient(circle at 20% 16%, rgba(238,220,255,.56), transparent 38%), radial-gradient(circle at 86% 80%, rgba(255,221,233,.44), transparent 34%), linear-gradient(150deg, #edf6ff 0%, #eee9fb 52%, #fff0f6 100%);
    --theme-reading-stage-bg: radial-gradient(circle at 10% 0, rgba(109,190,232,.16), transparent 30%), radial-gradient(circle at 90% 100%, rgba(229,140,159,.11), transparent 28%), linear-gradient(150deg, rgba(255,255,255,.98), rgba(246,241,253,.98));
    --theme-reading-details-bg: linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,239,253,.98));
    --theme-reading-details-text: #3b3953;
    --theme-reading-details-muted: #73718d;
    --theme-card-back-bg: radial-gradient(circle at 50% 42%, rgba(151,188,239,.22), transparent 31%), radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(235,172,158,.13) 34.3% 34.8%, transparent 35.1%), repeating-conic-gradient(from 45deg at 50% 50%, rgba(221,221,251,.035) 0 4deg, transparent 4deg 16deg), linear-gradient(145deg, #46537b 0%, #313b68 50%, #382f60 100%);
    --theme-card-back-color: #f2f3ff;
    --theme-tarot: #7b58c8;
    --theme-runes: #4c91bb;
    --theme-mac: #c47278;
}

:root[data-visual-theme="night"] {
    color-scheme: dark;
    --bg: #102238;
    --bg-deep: #0b192b;
    --bg-elevated: #162e48;
    --bg-soft: #162e48;
    --surface: rgba(26,55,82,.88);
    --surface-solid: #1a3854;
    --surface-strong: rgba(32,66,96,.97);
    --surface-2: rgba(33,67,98,.94);
    --surface-3: rgba(43,82,116,.9);
    --surface-hover: rgba(52,94,129,.92);
    --text: #f4f8fc;
    --text-soft: #dce8f2;
    --muted: #b8c7d6;
    --subtle: #88a1b8;
    --line: rgba(184,222,247,.12);
    --line-strong: rgba(184,222,247,.23);
    --accent: #a8ddff;
    --accent-soft: #c5ebff;
    --accent-strong: #c5b8ff;
    --accent-2: #c5b8ff;
    --gold: #d7bf82;
    --accent-ink: #13243a;
    --success: #8fddc5;
    --warning: #dfc17b;
    --danger: #ff9cae;
    --border: var(--line);
    --border-strong: var(--line-strong);
    --surface-elevated: var(--surface-2);
    --shadow-xs: 0 1px 0 rgba(255,255,255,.03), 0 10px 24px rgba(3,12,22,.15);
    --shadow-sm: 0 1px 0 rgba(255,255,255,.035), 0 22px 56px rgba(3,12,22,.28);
    --shadow: 0 1px 0 rgba(255,255,255,.04), 0 44px 118px rgba(3,12,22,.44);
    --shadow-focus: 0 0 0 4px rgba(168,221,255,.14);
    --theme-orb-1: rgba(106,196,246,.15);
    --theme-orb-2: rgba(155,132,238,.11);
    --theme-orb-3: rgba(104,227,213,.08);
    --theme-grid-opacity: .08;
    --theme-symbol-image: url("/shared/theme-patterns/clear-night-constellations.svg");
    --theme-symbol-size: clamp(700px, 82vw, 1120px);
    --theme-symbol-position: 56% 44%;
    --theme-symbol-landing-position: 72% 46%;
    --theme-symbol-landing-size: clamp(680px, 76vw, 1060px);
    --theme-panel-bg: linear-gradient(150deg, rgba(24,51,76,.96), rgba(15,35,56,.95));
    --theme-card-bg: radial-gradient(circle at 100% 0, rgba(168,221,255,.055), transparent 36%), linear-gradient(150deg, rgba(29,61,90,.97), rgba(18,42,66,.97));
    --theme-card-hover-bg: linear-gradient(150deg, rgba(38,75,107,.98), rgba(23,51,77,.98));
    --theme-primary-bg: linear-gradient(135deg, #c5ebff 0%, #a8ddff 48%, #c5b8ff 100%);
    --theme-primary-bg-hover: linear-gradient(135deg, #d8f2ff 0%, #bce6ff 48%, #d3c9ff 100%);
    --theme-secondary-bg: linear-gradient(145deg, rgba(39,76,107,.94), rgba(21,47,72,.97));
    --theme-feature-bg: linear-gradient(145deg, rgba(35,75,106,.96), rgba(45,58,105,.92));
    --theme-practice-bg: linear-gradient(150deg, rgba(31,66,97,.98), rgba(20,47,73,.98));
    --theme-ai-bg: linear-gradient(145deg, rgba(49,55,106,.96), rgba(27,51,84,.98));
    --theme-warning-bg: rgba(92,72,39,.48);
    --theme-reading-bg: radial-gradient(ellipse at 50% 42%, rgba(105,190,238,.12), transparent 48%), radial-gradient(circle at 18% 16%, rgba(160,139,240,.09), transparent 38%), linear-gradient(150deg, #173653 0%, #112b46 52%, #0e243c 100%);
    --theme-reading-stage-bg: radial-gradient(circle at 10% 0, rgba(106,196,246,.11), transparent 30%), linear-gradient(150deg, rgba(24,53,80,.98), rgba(13,34,56,.98));
    --theme-reading-details-bg: linear-gradient(145deg, rgba(29,64,94,.98), rgba(17,44,69,.98));
    --theme-reading-details-text: #f4f8fc;
    --theme-reading-details-muted: #b8c7d6;
    --theme-card-back-bg: radial-gradient(circle at 50% 42%, rgba(144,211,248,.2), transparent 31%), radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(221,193,127,.1) 34.3% 34.8%, transparent 35.1%), repeating-conic-gradient(from 45deg at 50% 50%, rgba(206,235,252,.03) 0 4deg, transparent 4deg 16deg), linear-gradient(145deg, #1d4566 0%, #123451 50%, #0d2740 100%);
    --theme-card-back-color: #e2f4ff;
    --theme-tarot: #c5b8ff;
    --theme-runes: #a8ddff;
    --theme-mac: #f1b9ae;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) body {
    color: var(--text);
    background: var(--bg);
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) :where(.ambient, .site-ambient) {
    background-color: var(--bg) !important;
    background-image:
        var(--theme-symbol-image),
        radial-gradient(circle at 8% 2%, var(--theme-orb-1), transparent 35%),
        radial-gradient(circle at 94% 18%, var(--theme-orb-2), transparent 34%),
        radial-gradient(circle at 54% 104%, var(--theme-orb-3), transparent 32%),
        linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 56%, var(--bg-deep) 100%) !important;
    background-position: var(--theme-symbol-position), center, center, center, center !important;
    background-repeat: no-repeat !important;
    background-size: var(--theme-symbol-size) var(--theme-symbol-size), 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) :where(.ambient__orb--one, .site-ambient::before) {
    background: radial-gradient(circle, var(--theme-orb-1), transparent 70%) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) :where(.ambient__orb--two, .site-ambient::after) {
    background: radial-gradient(circle, var(--theme-orb-2), transparent 70%) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .ambient__orb--three {
    background: radial-gradient(circle, var(--theme-orb-3), transparent 68%) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) :where(.ambient__grid, .site-grid) {
    opacity: var(--theme-grid-opacity) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"]) :where(.ambient__grain, .site-grain) {
    opacity: .015 !important;
}

:root[data-visual-theme="night"] :where(.ambient__grain, .site-grain) {
    opacity: .025 !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) :where(body.landing-personal, body.landing-consultants) {
    background-color: var(--bg) !important;
    background-image:
        linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 95%, transparent) 31%, color-mix(in srgb, var(--bg) 62%, transparent) 52%, transparent 72%),
        var(--theme-symbol-image),
        radial-gradient(circle at 8% 2%, var(--theme-orb-1), transparent 35%),
        radial-gradient(circle at 94% 18%, var(--theme-orb-2), transparent 34%),
        linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 56%, var(--bg-deep) 100%) !important;
    background-position: center, var(--theme-symbol-landing-position), center, center, center top !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100%, var(--theme-symbol-landing-size) var(--theme-symbol-landing-size), 100% 100%, 100% 100%, 100% 100% !important;
    background-attachment: fixed, fixed, fixed, fixed, scroll !important;
}

@media (max-width: 720px) {
    :root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) :where(body.landing-personal, body.landing-consultants) {
        background-image:
            linear-gradient(color-mix(in srgb, var(--bg) 88%, transparent), color-mix(in srgb, var(--bg) 88%, transparent)),
            var(--theme-symbol-image),
            radial-gradient(circle at 8% 2%, var(--theme-orb-1), transparent 35%),
            linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 56%, var(--bg-deep) 100%) !important;
        background-position: center, 50% 150px, center, center top !important;
        background-size: 100% 100%, 760px 760px, 100% 100%, 100% 100% !important;
        background-attachment: scroll !important;
    }
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) body.public-page {
    background-color: var(--bg) !important;
    background-image:
        var(--theme-symbol-image),
        radial-gradient(circle at 8% 2%, var(--theme-orb-1), transparent 35%),
        radial-gradient(circle at 94% 18%, var(--theme-orb-2), transparent 34%),
        linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 56%, var(--bg-deep) 100%) !important;
    background-position: var(--theme-symbol-position), center, center, center !important;
    background-repeat: no-repeat !important;
    background-size: var(--theme-symbol-size) var(--theme-symbol-size), 100% 100%, 100% 100%, 100% 100% !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) :where(.side-nav, .details-panel, .top-bar, .bottom-nav, .header, .legal-header, .public-header) {
    border-color: var(--line) !important;
    background: var(--theme-panel-bg) !important;
    box-shadow: var(--shadow-sm) !important;
    backdrop-filter: blur(24px) saturate(118%);
    -webkit-backdrop-filter: blur(24px) saturate(118%);
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) :where(
    .card,
    .metric,
    .mini-metric,
    .modal,
    .details-card,
    .quick-launcher,
    .quick-story-card,
    .home-guest-hero,
    .home-value-card,
    .home-consultants-promo,
    .home-consultant-workspace,
    .settings-export-card,
    .system-card,
    .scenario-card,
    .situation-preview,
    .product-window,
    .product-main,
    .product-sidebar,
    .reading-preview,
    .preview-card,
    .cta,
    .principles-panel,
    .consultant-promo,
    .split-feature,
    .about-summary-card,
    .continuity-panel,
    .consultant-preview,
    .data-panel,
    .practice-card,
    .spread-card,
    .task-card,
    .submission-card,
    .share-card,
    .profile-card,
    .market-section,
    .market-list-card,
    .market-service-card,
    .admin-info-card,
    .admin-list-card,
    .admin-overview-section,
    .admin-distribution-card,
    .public-content > .card,
    .public-node,
    .public-result,
    .public-reading-item,
    .legal-meta-card,
    .legal-state,
    .legal-document
) {
    border-color: var(--line) !important;
    background: var(--theme-card-bg) !important;
    box-shadow: var(--shadow-sm) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) :where(.card, .metric, .modal, .details-card, .quick-story-card, .home-guest-hero, .home-value-card)::before {
    opacity: .42;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) :where(.card.is-clickable, .list-row.is-clickable, .item-row.is-clickable, .spread-card, .scenario-card, .market-list-card, .admin-list-card):hover {
    border-color: var(--line-strong) !important;
    background: var(--theme-card-hover-bg) !important;
    box-shadow: var(--shadow-sm) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) :where(.input, .select, .textarea, .compact-select, .text-input) {
    border-color: var(--line) !important;
    color: var(--text) !important;
    background: color-mix(in srgb, var(--surface-solid) 88%, var(--bg-soft)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) :where(.input, .select, .textarea, .compact-select, .text-input):focus {
    border-color: var(--accent) !important;
    box-shadow: var(--shadow-focus) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) :where(.primary-button, .button-primary) {
    border-color: transparent !important;
    color: var(--accent-ink) !important;
    background: var(--theme-primary-bg) !important;
    box-shadow: 0 11px 28px color-mix(in srgb, var(--accent) 20%, transparent), inset 0 1px 0 rgba(255,255,255,.3) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) :where(.primary-button, .button-primary):hover:not(:disabled) {
    color: var(--accent-ink) !important;
    background: var(--theme-primary-bg-hover) !important;
    box-shadow: 0 14px 32px color-mix(in srgb, var(--accent) 25%, transparent), inset 0 1px 0 rgba(255,255,255,.36) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) :where(.secondary-button, .button-secondary, .ghost-button, .icon-button, .panel-control, .edge-toggle, .chip-button, .side-utility-button, .calendar-nav-button, .action-button, .feedback-button, .reading-fullscreen-button, .reading-reveal-all-button) {
    border-color: var(--line) !important;
    color: var(--text-soft) !important;
    background: var(--theme-secondary-bg) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) :where(.secondary-button, .button-secondary, .ghost-button, .icon-button, .panel-control, .edge-toggle, .chip-button, .side-utility-button, .calendar-nav-button, .action-button, .feedback-button, .reading-fullscreen-button, .reading-reveal-all-button):hover:not(:disabled) {
    border-color: var(--line-strong) !important;
    color: var(--text) !important;
    filter: brightness(1.015);
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) :where(.nav-link.is-active, .system-tab.is-selected, .system-tab.is-active, .tab.is-selected, .tab.is-active, .chip-button.is-active, .feedback-button.is-active) {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line)) !important;
    color: var(--text) !important;
    background: color-mix(in srgb, var(--accent) 10%, var(--surface-solid)) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) :where(.badge, .safety-indicator, .status-chip, .chip, .admin-badge) {
    border-color: var(--line) !important;
    color: var(--text-soft) !important;
    background: color-mix(in srgb, var(--surface-3) 78%, transparent) !important;
    box-shadow: none !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) :where(.status-panel, .quick-limit-panel, .ai-usage-panel, .quick-browser-warning, .market-guest-notice, .market-trust-card, .quick-ai-transparency) {
    border-color: color-mix(in srgb, var(--accent) 24%, var(--line)) !important;
    background: color-mix(in srgb, var(--accent) 7%, var(--surface-solid)) !important;
    box-shadow: none !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) :where(.status-panel.is-warning, .quick-limit-panel.is-blocked, .quick-browser-warning) {
    border-color: color-mix(in srgb, var(--warning) 28%, var(--line)) !important;
    background: var(--theme-warning-bg) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .home-value-card {
    border-color: color-mix(in srgb, var(--accent) 20%, var(--line)) !important;
    background: var(--theme-feature-bg) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) :where(.home-how-grid, .home-how-step) {
    border-color: var(--line) !important;
    background: color-mix(in srgb, var(--surface-solid) 90%, var(--bg-soft)) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .home-how-step:nth-child(even) {
    background: color-mix(in srgb, var(--surface-2) 82%, var(--bg-soft)) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .home-how-step__number {
    border-color: color-mix(in srgb, var(--accent) 24%, var(--line)) !important;
    color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 10%, var(--surface-solid)) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) :where(.practice-card, .spread-card, .quick-spread-card, .quick-suggestion-item) {
    border-color: var(--line) !important;
    color: var(--text) !important;
    background: var(--theme-practice-bg) !important;
    box-shadow: none !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) :where(.practice-card, .spread-card, .quick-spread-card, .quick-suggestion-item):hover:not(:disabled) {
    border-color: var(--line-strong) !important;
    background: var(--theme-card-hover-bg) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) :where(.quick-story-card--ai-request, .quick-story-card--ai-result, .quick-story-card--ai-suggestions, .ai-result-card) {
    border-color: color-mix(in srgb, var(--accent-strong) 22%, var(--line)) !important;
    background: var(--theme-ai-bg) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .quick-story-progress {
    border-color: var(--line) !important;
    background: color-mix(in srgb, var(--surface-solid) 90%, transparent) !important;
    box-shadow: none !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .quick-story-progress__track {
    background: color-mix(in srgb, var(--surface-3) 84%, transparent) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .quick-system-card {
    --quick-system-color: var(--accent);
    border-color: color-mix(in srgb, var(--quick-system-color) 20%, var(--line)) !important;
    color: var(--text) !important;
    background: color-mix(in srgb, var(--quick-system-color) 7%, var(--surface-solid)) !important;
    box-shadow: none !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .quick-system-card[data-system="TAROT"] { --quick-system-color: var(--theme-tarot); }
:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .quick-system-card[data-system="RUNES"] { --quick-system-color: var(--theme-runes); }
:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .quick-system-card[data-system="MAC"] { --quick-system-color: var(--theme-mac); }

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .quick-system-card:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--quick-system-color) 36%, var(--line)) !important;
    background: color-mix(in srgb, var(--quick-system-color) 11%, var(--surface-solid)) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .quick-system-card.is-active {
    border-color: color-mix(in srgb, var(--quick-system-color) 48%, var(--line)) !important;
    background: color-mix(in srgb, var(--quick-system-color) 16%, var(--surface-solid)) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--quick-system-color) 8%, transparent) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .quick-system-card__symbol {
    border-color: color-mix(in srgb, var(--quick-system-color) 28%, var(--line)) !important;
    color: var(--quick-system-color) !important;
    background: color-mix(in srgb, var(--quick-system-color) 10%, var(--surface-solid)) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .quick-system-card.is-active .quick-system-card__check {
    border-color: var(--quick-system-color) !important;
    color: var(--surface-solid) !important;
    background: var(--quick-system-color) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .scenario-card {
    --scenario-color: var(--accent);
    border-color: color-mix(in srgb, var(--scenario-color) 20%, var(--line)) !important;
    background: color-mix(in srgb, var(--scenario-color) 7%, var(--surface-solid)) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .scenario-card:nth-child(1) { --scenario-color: var(--theme-tarot); }
:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .scenario-card:nth-child(2) { --scenario-color: var(--theme-runes); }
:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .scenario-card:nth-child(3) { --scenario-color: var(--theme-mac); }

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .scenario-card > span {
    color: var(--scenario-color) !important;
    background: color-mix(in srgb, var(--scenario-color) 10%, var(--surface-solid)) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .reading-panel {
    background: var(--theme-card-bg) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .reading-stage,
:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .reading-stage.is-expanded,
:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .reading-stage:fullscreen,
:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .reading-stage:-webkit-full-screen {
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line)) !important;
    background: var(--theme-reading-stage-bg) !important;
    box-shadow: var(--shadow-sm) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .reading-stage::before {
    opacity: .58 !important;
    background: radial-gradient(circle at 88% 92%, var(--theme-orb-3), transparent 28%), linear-gradient(118deg, transparent 8%, rgba(255,255,255,.18) 36%, transparent 60%) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .reading-canvas,
:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .reading-stage.is-expanded .reading-canvas,
:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .reading-stage:fullscreen .reading-canvas,
:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .reading-stage:-webkit-full-screen .reading-canvas {
    border-color: color-mix(in srgb, var(--accent) 20%, var(--line)) !important;
    background: var(--theme-reading-bg) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -36px 110px color-mix(in srgb, var(--bg-deep) 18%, transparent), 0 20px 54px color-mix(in srgb, var(--bg-deep) 28%, transparent) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"]) .reading-canvas::before,
:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"]) .reading-stage.is-expanded .reading-canvas::before,
:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"]) .reading-stage:fullscreen .reading-canvas::before,
:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"]) .reading-stage:-webkit-full-screen .reading-canvas::before {
    opacity: .78 !important;
    background: radial-gradient(ellipse 390px 250px at var(--spotlight-1-x) var(--spotlight-1-y), rgba(255,255,255,.62), color-mix(in srgb, var(--accent) 12%, transparent) 35%, transparent 72%), radial-gradient(ellipse 300px 420px at var(--spotlight-2-x) var(--spotlight-2-y), rgba(244,248,255,.42), color-mix(in srgb, var(--accent-strong) 9%, transparent) 39%, transparent 74%), radial-gradient(ellipse 460px 220px at var(--spotlight-3-x) var(--spotlight-3-y), rgba(255,255,255,.38), color-mix(in srgb, var(--gold) 8%, transparent) 40%, transparent 73%) !important;
    mix-blend-mode: screen;
}

:root[data-visual-theme="night"] .reading-canvas::before,
:root[data-visual-theme="night"] .reading-stage.is-expanded .reading-canvas::before,
:root[data-visual-theme="night"] .reading-stage:fullscreen .reading-canvas::before,
:root[data-visual-theme="night"] .reading-stage:-webkit-full-screen .reading-canvas::before {
    opacity: .72 !important;
    background: radial-gradient(ellipse 390px 250px at var(--spotlight-1-x) var(--spotlight-1-y), rgba(191,232,255,.18), rgba(89,176,226,.08) 35%, transparent 72%), radial-gradient(ellipse 300px 420px at var(--spotlight-2-x) var(--spotlight-2-y), rgba(207,198,255,.14), rgba(151,124,231,.06) 39%, transparent 74%), radial-gradient(ellipse 460px 220px at var(--spotlight-3-x) var(--spotlight-3-y), rgba(255,239,205,.1), rgba(198,173,111,.04) 40%, transparent 73%) !important;
    mix-blend-mode: screen;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .reading-canvas::after {
    opacity: .42 !important;
    background-image: radial-gradient(circle at center, transparent 0 44.6%, color-mix(in srgb, var(--accent) 9%, transparent) 44.8% 45.05%, transparent 45.25%), linear-gradient(color-mix(in srgb, var(--accent) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 4%, transparent) 1px, transparent 1px) !important;
    background-size: auto, 58px 58px, 58px 58px !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .reading-card-face {
    border-color: color-mix(in srgb, var(--accent-soft) 30%, transparent) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .reading-card-back {
    color: var(--theme-card-back-color) !important;
    background: var(--theme-card-back-bg) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .reading-card-back::before {
    border-color: color-mix(in srgb, var(--accent-soft) 30%, transparent) !important;
    box-shadow: inset 0 0 0 3px rgba(7,20,32,.34), inset 0 0 26px color-mix(in srgb, var(--accent) 9%, transparent) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .reading-card-back::after {
    border-color: color-mix(in srgb, var(--gold) 32%, transparent) !important;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent), transparent 57%), linear-gradient(135deg, rgba(255,255,255,.045), transparent 54%) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .reading-card-details {
    border-color: color-mix(in srgb, var(--accent) 20%, var(--line)) !important;
    background: var(--theme-reading-details-bg) !important;
    box-shadow: var(--shadow-xs) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) :where(.reading-card-details__title, .reading-card-details__description) {
    color: var(--theme-reading-details-text) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) :where(.reading-card-details__eyebrow, .reading-card-details__meta) {
    color: var(--theme-reading-details-muted) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .legal-ambient {
    background-image: var(--theme-symbol-image), linear-gradient(color-mix(in srgb, var(--accent) 3%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 3%, transparent) 1px, transparent 1px) !important;
    background-position: var(--theme-symbol-position), 0 0, 0 0 !important;
    background-repeat: no-repeat, repeat, repeat !important;
    background-size: var(--theme-symbol-size) var(--theme-symbol-size), 72px 72px, 72px 72px !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .legal-ambient span:nth-child(1) { background: radial-gradient(circle, var(--theme-orb-1), transparent 68%) !important; }
:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .legal-ambient span:nth-child(2) { background: radial-gradient(circle, var(--theme-orb-2), transparent 69%) !important; }
:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .legal-ambient span:nth-child(3) { background: radial-gradient(circle, var(--theme-orb-3), transparent 68%) !important; }

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .legal-document__header {
    background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--accent) 10%, transparent), transparent 40%) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .public-page::before {
    background: radial-gradient(circle, var(--theme-orb-1), transparent 69%) !important;
}

:root:is([data-visual-theme="sky"], [data-visual-theme="pearl"], [data-visual-theme="pastel"], [data-visual-theme="night"]) .public-page::after {
    background: radial-gradient(circle, var(--theme-orb-2), transparent 70%) !important;
}