:root {
    /* Dark theme ~25% lighter than before (was near-black, felt too dark). */
    --bg: #1d1d22;
    --fg: #ededf2;
    /* Alias: several rules historically referenced var(--text), which was never
       defined and silently fell back to inherited colors. Keep both names live. */
    --text: var(--fg);
    --muted: #9a9aa3;
    --accent: #b8b8ff;
    /* Ink color for text ON the accent: the dark-theme accent is a LIGHT lilac,
       so white-on-accent was ~1.85:1 contrast (unreadable primary buttons). */
    --on-accent: #20202a;
    --border: #38383f;
    --bubble-user: #2a2a32;
    --bubble-agent: #232328;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --radius: 12px;
    /* Astral atelier: thin platinum linework + warm amber accents (Yin Metal + Fire). */
    --platinum: #c9ccd6;
    --platinum-dim: rgba(201,204,214,0.28);
    --platinum-line: rgba(201,204,214,0.16);
    --amber: #f0a843;
    --amber-soft: rgba(240,168,67,0.18);
    --amber-strong: #f7b955;
    --cta-ink: #2a1c08;
    --display-font: "Fraunces", "Charter", Georgia, serif;
    --hero-violet: #a855f7;
    --hero-violet-2: #c084fc;
    --hero-violet-3: #7c3aed;
    /* Translucent card fill — closer to the cosmic bg than the solid grey. */
    --card-glass: rgba(28, 22, 46, 0.55);

    /* === Aureate Canon: Fibonacci-on-8 series (design/AUREATE-CANON.md) ===
       Every spacing/radius/font-size below derives from this ladder, so the
       composition breathes in one ratio (each step ≈ × φ ≈ 1.618). */
    --phi-1:   8px;   /* hair gaps */
    --phi-2:  13px;   /* small padding, small font, pill radius */
    --phi-3:  21px;   /* card padding, body font */
    --phi-4:  34px;   /* section spacing, h2 */
    --phi-5:  55px;   /* hero spacing, h1 */
    --phi-6:  89px;
    --phi-7: 144px;
    --phi-8: 233px;
    --phi-9: 377px;

    /* Type scale on the same ladder (canon §7). 16/26 are sanctioned optical
       half-steps; everything in the app should resolve to one of these. */
    --fs-caption: 13px;
    --fs-body:    16px;
    --fs-lead:    21px;
    --fs-h2:      26px;
    --fs-h1:      34px;

    /* Semantic states — the cabinet used to hardcode #2e8b57/#c33/#26A5E4 etc. */
    --ok:          #22a06b;
    --ok-soft:     rgba(34,160,107,0.14);
    --danger:      #e0584f;
    --danger-soft: rgba(224,88,79,0.12);
    --info:        #5b8def;
    --info-soft:   rgba(91,141,239,0.14);
}

/* === Cabinet layout primitives — φ-spaced, replace ad-hoc inline styles =====
   AUREATE canon §2/§7: use these instead of inline flex/gap/margin so the
   cabinet breathes on the same Fibonacci ladder as the landing. */
.section-head { font-size: var(--fs-body); margin: var(--phi-4) 0 var(--phi-2); }
.hint { color: var(--muted); font-size: var(--fs-caption); margin: 0 0 var(--phi-2); }
.stack { display: flex; flex-direction: column; gap: var(--phi-2); }
.row-card { display: flex; align-items: center; gap: var(--phi-2);
            padding: var(--phi-2); border: 1px solid var(--border); border-radius: var(--phi-2); }
.row-card__aside { margin-left: auto; font-size: var(--fs-caption); color: var(--muted); }
.push-right { margin-left: auto; }
.form-row { display: flex; gap: var(--phi-2); align-items: center; }
.form-row select { padding: var(--phi-1) var(--phi-2); }
.form-narrow { max-width: 380px; }
.notice--row { display: flex; align-items: center; gap: var(--phi-2); flex-wrap: wrap; }
.notice--row > .grow { flex: 1; min-width: 200px; }
.m-0 { margin: 0; }

/* clients list */
.search-box { margin-bottom: var(--phi-3); }
.search-input { width: 100%; padding: var(--phi-2); background: var(--bubble-user);
                color: var(--fg); border: 1px solid var(--border);
                border-radius: var(--phi-2); font-size: var(--fs-body); }
.client-list { list-style: none; margin: 0; padding: 0; }
.client-row { display: flex; align-items: center; justify-content: space-between;
              gap: var(--phi-2); padding: var(--phi-2) 0;
              border-bottom: 1px solid var(--platinum-line); }
.client-row__link { text-decoration: none; display: block; flex: 1; min-width: 0; }
.client-row__name { display: flex; align-items: center; gap: var(--phi-1);
                    flex-wrap: wrap; font-size: var(--fs-body); color: var(--fg); }
.client-row__meta { margin-top: 3px; font-size: var(--fs-caption); color: var(--muted); }
.empty-state { text-align: center; padding: var(--phi-5) var(--phi-3); }
.empty-state__mark { width: 84px; height: 84px; margin-bottom: var(--phi-3);
                     color: var(--platinum); opacity: 0.85; }
.empty-state__title { font-size: var(--fs-lead); font-weight: 600; margin: 0 0 var(--phi-1); }
.empty-state__sub { margin: 0 0 var(--phi-3); color: var(--muted); }
.empty-state__cta { display: inline-block; padding: var(--phi-2) var(--phi-4); text-decoration: none; }

/* create form — radio rows, advanced settings, language toggle. Sized-control
   values (radio font, toggle padding) preserved 1:1; φ-fine-tune on staging. */
.radio-row { display: flex; gap: var(--phi-3); margin-top: 6px; }
.radio-opt { display: flex; align-items: center; gap: var(--phi-1);
             cursor: pointer; font-size: 14px; color: var(--fg); }
.adv-settings { margin-bottom: var(--phi-4); }
.adv-summary { cursor: pointer; font-size: var(--fs-caption); color: var(--muted);
               padding: var(--phi-1) 0; user-select: none; }
.adv-body { padding-top: var(--phi-3); }
.lang-toggle { display: flex; width: fit-content; overflow: hidden;
               border: 1px solid var(--border); border-radius: var(--phi-1); }
.lang-opt { display: flex; align-items: center; gap: 6px;
            padding: 8px 16px; cursor: pointer; font-size: var(--fs-caption); }
.lang-opt--right { border-left: 1px solid var(--border); }
.loading-msg { display: none; margin-top: var(--phi-2); font-size: var(--fs-caption); color: var(--muted); }

[data-theme="light"] {
    --bg: #f8f8fa;
    --fg: #1a1a1a;
    --muted: #666;
    --accent: #5b5bd6;
    --on-accent: #ffffff;
    --border: #e2e2e8;
    --ok:          #1d7d54;
    --ok-soft:     rgba(29,125,84,0.10);
    --danger:      #c0392b;
    --danger-soft: rgba(192,57,43,0.08);
    --info:        #3c6fd6;
    --info-soft:   rgba(60,111,214,0.10);
    --bubble-user: #eeeef4;
    --bubble-agent: #ffffff;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    /* Light theme carries Mars/Aries heat: warm metal + ember/red accents. */
    --platinum: #8a6f63;
    --platinum-dim: rgba(170,70,40,0.30);
    --platinum-line: rgba(170,70,40,0.18);
    --amber: #d4541e;
    --amber-soft: rgba(212,84,30,0.14);
    --amber-strong: #e2611f;
    --cta-ink: #fff7f0;
    --mars: #c0392b;
    --mars-soft: rgba(192,57,43,0.12);
    --hero-violet: #b3431f;
    --hero-violet-2: #d4541e;
    --hero-violet-3: #9e2f17;
    --card-glass: rgba(255, 252, 248, 0.62);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --bg: #f8f8fa;
        --fg: #1a1a1a;
        --muted: #666;
        --accent: #5b5bd6;
        --on-accent: #ffffff;
        --border: #e2e2e8;
        --ok:          #1d7d54;
        --ok-soft:     rgba(29,125,84,0.10);
        --danger:      #c0392b;
        --danger-soft: rgba(192,57,43,0.08);
        --info:        #3c6fd6;
        --info-soft:   rgba(60,111,214,0.10);
        --bubble-user: #eeeef4;
        --bubble-agent: #ffffff;
        --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
        --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
        --platinum: #8a6f63;
        --platinum-dim: rgba(170,70,40,0.30);
        --platinum-line: rgba(170,70,40,0.18);
        --amber: #d4541e;
        --amber-soft: rgba(212,84,30,0.14);
        --amber-strong: #e2611f;
        --cta-ink: #fff7f0;
        --mars: #c0392b;
        --mars-soft: rgba(192,57,43,0.12);
        --hero-violet: #b3431f;
        --hero-violet-2: #d4541e;
        --hero-violet-3: #9e2f17;
        --card-glass: rgba(255, 252, 248, 0.62);
    }
}

* { box-sizing: border-box; }

/* ── Top bar: brand mark · nav links · actions, with a mobile drawer ─────────
   Sticky translucent panel sitting above the living-orrery background. φ-scaled
   spacing; colours come from the theme tokens so it reads on dark and light. */
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    margin-bottom: var(--phi-4);
    background: var(--card-glass);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    backdrop-filter: blur(12px) saturate(1.1);
    border-bottom: 1px solid var(--border);
}
.topbar__inner {
    display: flex;
    align-items: center;
    gap: var(--phi-3);
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--phi-2) var(--phi-3);
}
.brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--fg);
    line-height: 0;
}
.brand__mark { width: 30px; height: 30px; display: block; }

.topbar__links {
    display: flex;
    align-items: center;
    gap: var(--phi-1);
    margin-left: var(--phi-2);
}
.topbar__links a {
    color: var(--muted);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: var(--phi-2);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;          /* never break a label onto two lines */
    transition: color 0.15s, background 0.15s;
}
.topbar__links a:hover { color: var(--fg); background: var(--bubble-user); }

.topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--phi-1);
    margin-left: auto;
}
.topbar__link-strong {
    color: var(--fg);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: var(--phi-2);
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}
.topbar__link-strong:hover { color: var(--amber); }

.nav-btn-link {
    background: none;
    border: none;
    color: var(--accent);
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
    border-radius: var(--phi-2);
    transition: color 0.15s, background 0.15s;
}
.nav-btn-link:hover { color: var(--fg); background: var(--bubble-user); }

/* Toggles now live inline in the bar — neutralise their fixed-corner fallback. */
.topbar__actions .lang-toggle,
.topbar__actions .theme-toggle { position: static; top: auto; right: auto; }

.topbar__burger {
    display: none;
    background: none;
    border: none;
    color: var(--fg);
    cursor: pointer;
    padding: 6px;
    margin-left: var(--phi-1);
    border-radius: var(--phi-2);
}
.topbar__burger svg { width: 26px; height: 26px; display: block; }
.topbar__burger:hover { background: var(--bubble-user); }

/* ── Mobile drawer ──────────────────────────────────────────────────────── */
.mobile-menu { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; background: rgba(0,0,0,0.45); }
.mobile-menu[hidden] { display: none; }   /* author rule — beats the bare .mobile-menu display */
.mobile-menu__panel {
    width: min(86vw, 360px);
    height: 100%;
    overflow-y: auto;
    padding: var(--phi-3);
    background: var(--card-glass);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    backdrop-filter: blur(18px) saturate(1.1);
    border-left: 1px solid var(--border);
    animation: drawerIn 0.22s ease;
}
@keyframes drawerIn { from { transform: translateX(18px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--phi-3); }
.mobile-menu__close { background: none; border: none; color: var(--muted); cursor: pointer; padding: 6px; border-radius: var(--phi-2); }
.mobile-menu__close:hover { color: var(--fg); background: var(--bubble-user); }
.mobile-menu__close svg { width: 24px; height: 24px; display: block; }
.mobile-menu__links { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu__links a,
.mobile-menu__links .nav-btn-link {
    display: block;
    width: 100%;
    text-align: left;
    color: var(--fg);
    text-decoration: none;
    padding: 11px 12px;
    border-radius: var(--phi-2);
    font-size: 16px;
    font-weight: 600;
    transition: background 0.15s;
}
.mobile-menu__links a:hover,
.mobile-menu__links .nav-btn-link:hover { background: var(--bubble-user); }
.mobile-menu__sep { height: 1px; background: var(--border); margin: var(--phi-2) 0; }

/* Collapse to the burger below 1024px (the dense signed-in/admin nav needs the
   room); never show the drawer on desktop. The "Log in" CTA is conversion-
   critical — it stays visible down to phone width instead of hiding in the
   drawer with everything else. */
@media (max-width: 1024px) {
    .topbar__links { display: none; }
    .topbar__actions .nav-user,
    .topbar__actions form { display: none; }
    .topbar__burger { display: inline-flex; }
}
@media (max-width: 600px) {
    .topbar__actions .topbar__link-strong { display: none; }
}
@media (min-width: 1025px) { .mobile-menu { display: none !important; } }

/* Wide data tables (admin) scroll inside themselves on phones instead of
   stretching the whole page sideways. */
@media (max-width: 760px) {
    .container table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

body {
    background: var(--bg);
    color: var(--fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
    margin: 0;
    line-height: 1.65;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

.container {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    padding: 36px 24px;
    /* Liquid-glass: blurred backdrop between text and the animated hero bg */
    background: rgba(21, 16, 30, 0.48);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    border: 1px solid rgba(120, 60, 210, 0.12);
    border-radius: 20px;
}
/* Person / topic pages need the full width for the TOC + wide reading column. */
.container.container-wide {
    max-width: 1400px;
}

a { color: var(--fg); text-decoration: none; }
a:hover { text-decoration: underline; }

.field { margin-bottom: 16px; }

.field label {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 4px;
}

.field input[type=text],
.field input[type=date],
.field input[type=time],
.field select {
    width: 100%;
    padding: 11px 14px;
    background: var(--bubble-user);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: var(--shadow-sm);
}

.field input:focus,
.field select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(91,91,214,0.15);
}


.hint {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}

button {
    padding: 11px 22px;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: transform 0.1s, box-shadow 0.2s, opacity 0.15s;
    box-shadow: var(--shadow-sm);
}

/* Keyboard navigation: a single warm focus ring across the whole product.
   (The canon's "warmth only at the focal point" — focus IS the focal point.) */
:focus-visible {
    /* !important: several form controls reset `outline: none` with higher
       specificity — keyboard focus must always win over those. Mouse/touch
       focus (:focus without :focus-visible) keeps the clean look. */
    outline: 2px solid var(--amber) !important;
    outline-offset: 2px;
}

/* Vestibular safety: kill CSS animations/transitions for users who asked the
   OS for reduced motion. The canvases already honor this in JS (single static
   frame); this covers the drawer, spinners and landing keyframes. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
button:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
button:active { transform: translateY(0); }
button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

details summary::-webkit-details-marker { display: none; }
details summary::before { content: "▸ "; font-size: 11px; }
details[open] summary::before { content: "▾ "; }

.chat-area {
    min-height: 300px;
    max-height: calc(100vh - 240px);
    overflow-y: auto;
    padding: 8px 0 16px;
}

.message {
    padding: 14px 18px;
    border-radius: 16px;
    margin-bottom: 14px;
    max-width: 88%;
    font-size: 15px;
    line-height: 1.7;
    word-break: break-word;
    box-shadow: var(--shadow-sm);
    position: relative;
}
.message.user { white-space: pre-wrap; }
.message.assistant p:first-child { margin-top: 0; }
.message.assistant p:last-child { margin-bottom: 0; }
.message.assistant h1,
.message.assistant h2,
.message.assistant h3,
.message.assistant h4 { margin-top: 0.8em; margin-bottom: 0.4em; font-weight: 600; }
.message.assistant ul,
.message.assistant ol { margin: 0.4em 0; padding-left: 1.4em; }
.message.assistant code {
    background: var(--bubble-user);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.92em;
}
.message.assistant pre {
    background: var(--bubble-user);
    padding: 10px 12px;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 12px;
}
.message.assistant pre code { background: transparent; padding: 0; }
.message.assistant blockquote {
    border-left: 3px solid var(--border);
    margin: 0.6em 0;
    padding: 0 0 0 12px;
    color: var(--muted);
}
.message.assistant table {
    border-collapse: collapse;
    margin: 0.6em 0;
    font-size: 13px;
}
.message.assistant th,
.message.assistant td {
    border: 1px solid var(--border);
    padding: 6px 10px;
}

/* Highlighted 'person.md' link in client header */
.link-highlight {
    background: var(--accent);
    color: var(--on-accent) !important;
    padding: 5px 12px;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    transition: transform 0.1s, box-shadow 0.2s;
}
.link-highlight:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); text-decoration: none; }

/* Nav pills */
nav a {
    padding: 4px 0;
    transition: color 0.15s;
}
nav a:hover {
    color: var(--accent);
    text-decoration: none;
}

.message.user {
    background: var(--accent);
    color: #fff;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.message.assistant {
    background: rgba(35, 35, 40, 0.55);
    backdrop-filter: blur(12px) saturate(115%);
    -webkit-backdrop-filter: blur(12px) saturate(115%);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}
[data-theme="light"] .message.assistant {
    background: rgba(255, 255, 255, 0.55);
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .message.assistant {
        background: rgba(255, 255, 255, 0.55);
    }
}
.message.assistant::before {
    content: '✦';
    position: absolute;
    left: -28px;
    top: 14px;
    font-size: 14px;
    color: var(--accent);
    opacity: 0.6;
}

.slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.slider-row label {
    width: 140px;
    font-size: 13px;
    color: var(--muted);
    flex-shrink: 0;
}

.slider-row input[type=range] {
    flex: 1;
    accent-color: var(--fg);
}

.slider-row .value {
    width: 40px;
    text-align: right;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--fg);
}

/* Theme toggle */
.theme-toggle {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bubble-user);
    color: var(--fg);
    border: 1px solid var(--border);
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.theme-toggle:hover { opacity: 0.85; }

/* Language toggle — round flag button sitting just left of the theme toggle. */
.lang-toggle {
    position: fixed;
    top: 16px;
    right: 60px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bubble-user);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Text glyph (EN/RU), not a flag emoji: flags render differently per OS
       and a flag ≠ a language. */
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--fg);
    line-height: 1;
    text-decoration: none;
    z-index: 100;
}
.lang-toggle:hover { opacity: 0.85; }

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 24px;
}
.modal-overlay.open { display: flex; }
.modal {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.modal-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-header h3 { margin: 0; font-size: 15px; font-weight: 500; }
.modal-close {
    background: none;
    color: var(--muted);
    padding: 4px 8px;
    font-size: 20px;
    line-height: 1;
}
.modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.65;
    /* Liquid-glass layer inside modal so chart text reads clearly */
    background: rgba(21, 16, 30, 0.45);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
}
.modal-body pre {
    background: var(--bubble-user);
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 12px;
}
.modal-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.modal-body h1, .modal-body h2, .modal-body h3 { margin-top: 1.2em; }

/* Date / time / place inline rows (was declared twice — merged) */
.date-row, .time-row, .place-row { display: flex; gap: 8px; align-items: center; }
.date-row select, .place-row select, .time-row select {
    padding: 10px 12px;
    background: var(--bubble-user);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
}
.date-row select:nth-child(1) { flex: 0 0 70px; }
.date-row select:nth-child(2) { flex: 1; }
.date-row select:nth-child(3) { flex: 0 0 90px; }
.time-row select { flex: 0 0 80px; }
.time-row span { color: var(--muted); font-size: 18px; }
.place-row select { flex: 0 0 180px; }
.place-row input[type=text]:disabled { opacity: 0.5; cursor: not-allowed; }

/* City autocomplete */
.city-autocomplete {
    position: relative;
}
/* The input must fill the wrapper, else the full-width suggestions dropdown
   overhangs the narrower input and reads as "off to the side". */
.city-autocomplete input[type=text] {
    width: 100%;
    box-sizing: border-box;
}
.city-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-top: 4px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 50;
    display: none;
}
.city-suggestions.open { display: block; }
.city-suggestion {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}
.city-suggestion:last-child { border-bottom: none; }
.city-suggestion:hover, .city-suggestion.active { background: var(--bubble-user); }
.city-suggestion .country { color: var(--muted); font-size: 11px; margin-left: 6px; }
.field input.invalid { border-color: #c44; }

/* Inline validation message under a field (replaces alert()). */
.field-error {
    margin-top: 6px;
    font-size: 12.5px;
    color: #e0584f;
}

/* Visually hidden but keyboard/screen-reader reachable (vs display:none). */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Mobile: stack the country select + city input full-width so both are easy to
   tap, and use 16px inputs so iOS Safari doesn't zoom on focus. The 16px rule
   covers EVERY text control, not only the create-form selects — the chat
   composer and sky inputs zoomed too. */
@media (max-width: 760px) {
    .place-row { flex-wrap: wrap; }
    .place-row select,
    .place-row .city-autocomplete { flex: 1 1 100%; }
    input[type=text], input[type=email], input[type=password],
    textarea, select { font-size: 16px; }
}

/* Loading overlay */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    z-index: 500;
}
[data-theme="light"] .loading-overlay { background: rgba(255,255,255,0.85); }
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .loading-overlay { background: rgba(255,255,255,0.85); }
}
.loading-overlay.open { display: flex; }
.spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border);
    border-top-color: var(--fg);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-phase {
    font-size: 15px;
    color: var(--fg);
    text-align: center;
    max-width: 320px;
    line-height: 1.5;
}
.loading-phase .small { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.loading-progress {
    width: 280px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}
.loading-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--fg);
    transition: width 0.4s ease-out;
}
/* Generation steps */
.gen-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 8px;
    background: var(--bubble-user);
    border: 1px solid var(--border);
    transition: all 0.3s;
}
.gen-step.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(91,91,214,0.15);
}
.gen-step.done { opacity: 0.7; }
.gen-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.gen-title { font-size: 14px; font-weight: 600; }
.gen-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.loading-timer {
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* ===== Animated background — now on every page ===== */
body {
    background: #15101e;
}
/* Content sits above the fixed backdrop. */
.hero-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    /* Canon §3: the focal point of a circular composition sits at the φ-point
       (0.382·H), not dead center — the page "breathes" upward. */
    background: radial-gradient(ellipse at 50% 38.2%, #2e1550 0%, #1a1228 50%, #15101e 100%);
    overflow: hidden;
    color: var(--platinum);  /* SVG strokes use currentColor — theme-aware */
}
/* Background = living "Map of Three Worlds" canvas (orrery.js). Full-bleed,
   sits over the cosmic gradient which stays as a no-JS / reduced-motion floor. */
.hero-bg__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Glass card for form */
.form-glass {
    position: relative;
    z-index: 1;
    background: rgba(8,3,18,0.74);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(120,60,210,0.22);
    border-radius: 18px;
    padding: 32px 28px;
    margin: 40px 0;
}
.send-btn {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-weight: 700;
    transition: transform 0.1s, opacity 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 8px rgba(91,91,214,0.3);
}
.send-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(91,91,214,0.45); }
.send-btn:active:not(:disabled) { transform: translateY(0); }
.send-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; }

/* === Person page (HTML render of person.md with TOC) === */
.person-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.person-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.person-title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 600;
}
.person-meta {
    font-size: 13px;
    color: var(--muted);
}
.person-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 13px;
}
.action-link {
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px dotted transparent;
    transition: border-color 0.15s;
    white-space: nowrap;
}
.action-link:hover { border-bottom-color: var(--accent); }
.action-link.muted { color: var(--muted); }

.toc-toggle {
    display: none;
    margin-top: 12px;
    padding: 6px 12px;
    font-size: 13px;
    background: var(--bubble-user);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
}

.person-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 40px;
    max-width: 1340px;
    margin: 0 auto;
}
.toc {
    position: sticky;
    top: 24px;
    align-self: start;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    font-size: 13px;
    padding-right: 8px;
}
.toc-title {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.toc-item { padding: 0; margin: 0; }
.toc-l1 { font-weight: 700; margin-top: 4px; }
.toc-l2 { font-weight: 600; margin-top: 6px; }
.toc-l3 { padding-left: 14px; font-weight: 400; color: var(--muted); }
.toc-link {
    display: block;
    padding: 3px 0;
    color: inherit;
    text-decoration: none;
    line-height: 1.4;
    border-left: 2px solid transparent;
    padding-left: 8px;
    margin-left: -10px;
    transition: color 0.15s, border-color 0.15s;
}
.toc-link:hover { color: var(--accent); }
.toc-link.active {
    color: var(--accent);
    border-left-color: var(--accent);
    font-weight: 600;
}

.person-content {
    max-width: 1040px;
    font-family: "Charter", "Georgia", "Times New Roman", serif;
    font-size: 18px;
    line-height: 1.7;
    color: var(--text);
    /* Liquid-glass blur layer between the animated hero bg and reading text */
    background: rgba(21, 16, 30, 0.52);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    border: 1px solid rgba(120, 60, 210, 0.1);
    border-radius: 18px;
    padding: 28px 36px;
}
.person-content h1 {
    font-size: 28px;
    margin: 0 0 24px;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 700;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
}
.person-content h2 {
    font-size: 24px;
    margin: 40px 0 16px;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
    scroll-margin-top: 24px;
}
.person-content h3 {
    font-size: 19px;
    margin: 28px 0 12px;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
    scroll-margin-top: 24px;
}
.person-content p { margin: 0 0 16px; }
.person-content ul, .person-content ol { padding-left: 24px; margin: 0 0 16px; }
.person-content li { margin-bottom: 6px; }
.person-content strong { font-weight: 700; }
.person-content em { font-style: italic; }
/* Callout box: '💡 Что делать' advice + pull-quotes both come through as
   markdown blockquotes. Style them as a soft accented box instead of a plain
   muted quote, so the actionable advice visually pops. */
.person-content blockquote {
    border-left: 4px solid var(--accent);
    background: var(--bubble-user);
    padding: 14px 18px;
    margin: 18px 0;
    border-radius: 8px;
    color: var(--text);
}
.person-content blockquote p { margin: 0; }
.person-content blockquote p + p { margin-top: 8px; }
.person-content code {
    background: var(--bubble-user);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.person-content table {
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 14px;
    width: 100%;
}
.person-content th, .person-content td {
    border: 1px solid var(--border);
    padding: 8px 12px;
    text-align: left;
}
.person-content th { background: var(--bubble-user); font-weight: 600; }

@media (max-width: 900px) {
    .person-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .toc {
        position: static;
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
        order: -1;
    }
    .toc-toggle { display: inline-block; }
    .toc-list { display: none; }
    .toc-list.open { display: block; }
    .person-content { font-size: 16px; }
}

/* Print: clean text on white, everywhere — not only person pages. Chrome,
   animated backgrounds and glass panels have no business on paper. */
@media print {
    .toc, .toc-toggle, .person-actions { display: none !important; }
    .person-layout { grid-template-columns: 1fr; max-width: none; }
    .person-content { max-width: none; font-size: 12pt; }
    .topbar, .hero-bg, .mobile-menu, .loading-overlay, .modal-overlay,
    .lang-toggle, .theme-toggle, .topbar__burger { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .container, .form-glass, .person-content, .modal-body {
        background: #fff !important;
        border: none !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

/* === Generation progress (when person.md does not yet exist) === */
.person-empty {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 0;
}
.gen-progress { margin-top: 20px; }
.gen-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 16px;
}
.gen-block {
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.gen-block-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--bubble-user);
    font-size: 13px;
}
.sx-status { font-size: 12px; color: var(--muted); }

/* === Life topic pills (love / money / health / purpose) === */
.person-topics {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.person-topics-label {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 4px;
}
.topic-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
    background: var(--bg);
    transition: border-color 0.15s, color 0.15s, transform 0.05s;
}
.topic-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.topic-pill:active { transform: translateY(1px); }

/* Topic generation states */
.topic-pill.ready { cursor: pointer; }
.topic-pill.pending {
    cursor: default;
    opacity: 0.75;
    border-style: dashed;
}
.topic-pill.pending:hover { border-color: var(--border); color: var(--text); }
.topic-status {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
}
.topic-pill.ready .topic-status { color: #22a06b; }

/* ===== Light theme: replace dark hero + glass with soft pastel ===== */
/* Applies when [data-theme="light"] is set OR system prefers light and no
   explicit theme was chosen. Hand-picked palette: warm cream → lavender
   gradient, deeper purple glyph borders, white glass form card. */
[data-theme="light"] body {
    background: #ece1cf;
}
[data-theme="light"] .hero-bg {
    background:
        radial-gradient(ellipse at 26% 16%, #f6c79e 0%, transparent 50%),
        radial-gradient(ellipse at 74% 84%, #ccb6ef 0%, transparent 52%),
        radial-gradient(ellipse at 50% 46%, #f1e6d3 0%, #e8dac3 66%, #e1d2b9 100%);
}
[data-theme="light"] .form-glass {
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(120,60,210,0.18);
    box-shadow: 0 8px 28px rgba(80,40,160,0.08);
}
/* Liquid-glass for .container on light theme */
[data-theme="light"] .container {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(91, 91, 214, 0.14);
    box-shadow: 0 8px 28px rgba(80, 40, 160, 0.06);
}
[data-theme="light"] .person-content {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(91, 91, 214, 0.12);
}
[data-theme="light"] .modal-body {
    background: rgba(255, 255, 255, 0.6);
}
[data-theme="light"] .orbit         { border-color: rgba(124,58,237,0.30); }
[data-theme="light"] .orbit .planet {
    background: #7c3aed;
    box-shadow: 0 0 8px 2px rgba(124,58,237,0.45);
}

/* Same overrides when the user has NOT toggled a theme but system says light. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) body { background: #ece1cf; }
    :root:not([data-theme]) .hero-bg {
        background:
            radial-gradient(ellipse at 26% 16%, #f6c79e 0%, transparent 50%),
            radial-gradient(ellipse at 74% 84%, #ccb6ef 0%, transparent 52%),
            radial-gradient(ellipse at 50% 46%, #f1e6d3 0%, #e8dac3 66%, #e1d2b9 100%);
    }
    :root:not([data-theme]) .form-glass {
        background: rgba(255,255,255,0.82);
        border: 1px solid rgba(120,60,210,0.18);
        box-shadow: 0 8px 28px rgba(80,40,160,0.08);
    }
    :root:not([data-theme]) .container {
        background: rgba(255, 255, 255, 0.55);
        border-color: rgba(91, 91, 214, 0.14);
        box-shadow: 0 8px 28px rgba(80, 40, 160, 0.06);
    }
    :root:not([data-theme]) .person-content {
        background: rgba(255, 255, 255, 0.6);
        border-color: rgba(91, 91, 214, 0.12);
    }
    :root:not([data-theme]) .modal-body {
        background: rgba(255, 255, 255, 0.6);
    }
    :root:not([data-theme]) .glyph-1 { opacity: 0.22; }
    :root:not([data-theme]) .glyph-2 { opacity: 0.18; }
    :root:not([data-theme]) .glyph-3 { opacity: 0.18; }
    :root:not([data-theme]) .glyph-1 .part-1 { border-color: #7c3aed; }
    :root:not([data-theme]) .glyph-1 .part-2 { border-color: #9333ea; }
    :root:not([data-theme]) .glyph-1 .part-3 { background:    #7c3aed; }
    :root:not([data-theme]) .glyph-2 .part-1 { border-color: #6d28d9; }
    :root:not([data-theme]) .glyph-2 .part-2 { border-color: #7c3aed; }
    :root:not([data-theme]) .glyph-3 .part-1 { border-color: #6d28d9; }
    :root:not([data-theme]) .glyph-3 .part-2 { border-color: #9333ea; }
    :root:not([data-theme]) .glyph-3 .part-3 { border-color: #7c3aed; }
    :root:not([data-theme]) .orrery-field::after {
        background: #d4541e;
        box-shadow: 0 0 22px 7px rgba(212,84,30,0.42);
    }
    :root:not([data-theme]) .orbit         { border-color: rgba(124,58,237,0.30); }
    :root:not([data-theme]) .orbit-1       { border-color: rgba(124,58,237,0.42); }
    :root:not([data-theme]) .orbit-4       { border-color: rgba(124,58,237,0.16); }
    :root:not([data-theme]) .orbit .planet {
        background: #7c3aed;
        box-shadow: 0 0 8px 2px rgba(124,58,237,0.45);
    }
    :root:not([data-theme]) .orbit-1 .planet {
        box-shadow: 0 0 12px 3px rgba(147,51,234,0.55);
    }
    :root:not([data-theme]) .orbit-3::before {
        background:
            repeating-conic-gradient(rgba(124,58,237,0.55) 0deg 0.6deg, transparent 0.6deg 30deg),
            repeating-conic-gradient(rgba(124,58,237,0.30) 0deg 0.4deg, transparent 0.4deg 6deg);
    }
}

/* ===== Visual dashboard (test surface v1) ===== */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}
.dash-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px 24px;
    background: var(--bubble-agent);
}
.dash-card-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 14px;
}
.dash-type { grid-column: 1 / -1; }
.dash-type-name { font-size: 30px; font-weight: 700; margin-bottom: 12px; }
.dash-type-meta {
    display: flex; flex-wrap: wrap; gap: 8px 22px;
    font-size: 14px; color: var(--muted); margin-bottom: 16px;
}
.dash-type-meta b { color: var(--text); font-weight: 600; }
.dash-type-stats {
    display: flex; gap: 28px; flex-wrap: wrap;
    border-top: 1px solid var(--border); padding-top: 14px; font-size: 13px; color: var(--muted);
}
.dash-stat-num { font-size: 22px; font-weight: 700; color: var(--accent); margin-right: 4px; }

/* Elements donut */
.dash-donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.dash-donut {
    width: 150px; height: 150px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.dash-donut-hole {
    width: 92px; height: 92px; border-radius: 50%;
    background: var(--bubble-agent);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.dash-dm-stem { font-size: 28px; font-weight: 700; line-height: 1; }
.dash-dm-el { font-size: 12px; color: var(--muted); margin-top: 4px; }
.dash-legend { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.dash-legend li { margin-bottom: 7px; display: flex; align-items: center; gap: 8px; }
.dash-swatch { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
.dash-dm-line { margin-top: 16px; font-size: 13px; color: var(--muted); }

/* Centers strip */
.dash-centers-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.dash-center {
    text-align: center; padding: 12px 6px; border-radius: 10px;
    font-size: 13px; font-weight: 600; border: 1px solid var(--border);
}
.dash-center.on { background: #2e8b57; color: #fff; border-color: #2e8b57; }
.dash-center.off { background: transparent; color: var(--muted); border-style: dashed; }
.dash-centers-legend {
    display: flex; gap: 18px; margin-top: 14px; font-size: 12px; color: var(--muted);
}
.dash-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; vertical-align: middle; margin-right: 4px; }
.dash-dot.on { background: #2e8b57; }
.dash-dot.off { border: 1px dashed var(--muted); }

/* Circuits bars */
.dash-bars { display: flex; flex-direction: column; gap: 9px; }
.dash-bar-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.dash-bar-name { flex: 0 0 175px; }
.dash-bar { flex: 1; height: 10px; background: var(--bubble-user); border-radius: 5px; overflow: hidden; }
.dash-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 5px; min-width: 4px; }
.dash-bar-num { flex: 0 0 18px; text-align: right; font-weight: 600; }
.dash-natures { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.dash-nature-pill { font-size: 12px; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; }

/* Planets grid */
.dash-planets { grid-column: 1 / -1; }
.dash-planet-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
}
.dash-planet {
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
}
.dash-planet-name { font-size: 12px; color: var(--muted); }
.dash-planet-sign { font-size: 16px; font-weight: 600; }
.dash-planet-house { font-size: 12px; }
.dash-retro { color: #e0584f; font-size: 11px; font-weight: 700; }

@media (max-width: 760px) {
    .dash-grid { grid-template-columns: 1fr; }
}

/* Dashboard entry button on the client page */
.dash-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 16px; font-size: 13px; font-weight: 600;
    border: 1px solid var(--accent); border-radius: 999px;
    color: var(--accent); text-decoration: none; background: var(--bubble-agent);
    transition: background 0.15s, color 0.15s;
}
.dash-cta:hover { background: var(--accent); color: var(--on-accent); }

/* ===== Dashboard: chart buttons panel + extra cards ===== */
.dash-chart-buttons { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.dash-cta.active { background: var(--accent); color: var(--on-accent); }
.dash-chart-panel {
    margin-top: 16px; padding: 18px; border: 1px solid var(--border);
    border-radius: 14px; background: var(--bubble-agent);
}
.dash-chart-body svg { width: 100%; height: auto; max-width: 460px; margin: 0 auto; }
.dash-chart-body { display: flex; justify-content: center; }

.dash-aspects { grid-column: 1 / -1; }
.dash-aspect-list {
    list-style: none; padding: 0; margin: 0; font-size: 14px;
    columns: 2; column-gap: 32px;
}
.dash-aspect-list li { margin-bottom: 6px; break-inside: avoid; }

.dash-channels { grid-column: 1 / -1; }
.dash-channel-list {
    list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px;
}
.dash-channel-list li {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; font-size: 13px;
}
.dash-channel-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-tag { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--bubble-user); }

.dash-gates { grid-column: 1 / -1; }
.dash-gates-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dash-gates-side { font-size: 12px; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.04em; }
.dash-gate-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-gate-chip {
    font-size: 12px; padding: 4px 9px; border: 1px solid var(--border);
    border-radius: 8px; background: var(--bubble-user);
}
.dash-gate-chip b { color: var(--accent); }

/* HD activation table: planet → gate.line, Design (red) / Personality (blue). */
.dash-act-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.dash-act-table th { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 8px; font-weight: 600; }
.dash-act-table td { padding: 3px 8px; }
.dash-act-table .dash-act-d { color: #e0564a; text-align: right; font-weight: 700; }
.dash-act-table .dash-act-p { color: #5b8def; text-align: left; font-weight: 700; }
.dash-act-table .dash-act-planet { text-align: center; color: var(--muted); white-space: nowrap; }
@media (max-width: 760px) {
    .dash-aspect-list { columns: 1; }
    .dash-gates-cols { grid-template-columns: 1fr; }
}

/* ===== Admin panel ===== */
.stat-card {
    flex: 1; min-width: 130px; padding: 20px 24px;
    background: var(--bubble-user); border: 1px solid var(--border);
    border-radius: var(--radius); text-align: center;
}
.stat-num { font-size: 30px; font-weight: 700; line-height: 1; }
.stat-label { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* Small table-action buttons. `button.` prefix + late position beat the global
   `:root:not([data-theme]) button { color:#fff }` rule, so the label stays
   readable on the light button background. */
button.btn-sm {
    padding: 4px 11px; font-size: 12px; font-weight: 500; border-radius: 6px;
    background: var(--bubble-user); color: var(--fg); border: 1px solid var(--border);
    cursor: pointer; box-shadow: none;
}
button.btn-sm:hover { border-color: var(--accent); transform: none; box-shadow: none; }
button.btn-danger { color: #ff6b6b; border-color: rgba(204,51,51,0.5); }
button.btn-danger:hover { background: rgba(204,51,51,0.12); border-color: #c33; }

/* Nav: clearer current-user label + admin badge */
.nav-user { color: var(--fg); font-size: 14px; padding: 6px 8px; opacity: 0.85; }
.nav-badge {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    background: var(--accent); color: var(--on-accent); padding: 1px 6px; border-radius: 6px; vertical-align: middle;
}

/* ============================================================
   LANDING PAGE  (astral atelier — see landing.html)
   ============================================================ */

/* Display font for landing headings (Yin Metal precision). Body stays system. */
.landing-page h1, .landing-page h2, .landing-page h3,
.landing-hero__title, .landing-section__title, .exp__heading {
    font-family: var(--display-font);
    font-optical-sizing: auto;
    letter-spacing: -0.015em;
    font-weight: 500;
}

/* Full-bleed: opt out of the narrow translucent .container. */
.container.landing-container {
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
}

.landing-section {
    max-width: 980px;
    margin: 0 auto;
    padding: 88px 24px;
    position: relative;
    z-index: 1;
    text-align: center;
}
/* Type & rhythm on the φ-scale: 21 / 34 / 55 — no in-between sizes. */
.landing-section__title { font-size: var(--phi-4); margin: 0 0 var(--phi-4); color: var(--fg); }

/* Hero */
.landing-hero { padding-top: var(--phi-7); padding-bottom: var(--phi-6); }
.landing-hero__title {
    /* φ-range: 34 (mobile) → 55 (desktop). Stops at the canonical phi-5 step. */
    font-size: clamp(var(--phi-4), 6vw, var(--phi-5));
    line-height: 1.05;
    margin: 0 0 var(--phi-3);
    color: var(--fg);
}
.landing-hero__subhead {
    /* Body type 21 with a small responsive floor of 18 for mobile readability */
    font-size: clamp(18px, 2.5vw, var(--phi-3));
    line-height: 1.55;
    color: var(--muted);
    /* max-width 521 px = 144 + 377 — golden tracking for line length */
    max-width: calc(var(--phi-7) + var(--phi-9));
    margin: 0 auto var(--phi-4);
    text-wrap: balance;
}

/* Primary CTA */
.cta-primary {
    display: inline-block;
    /* Padding φ-pair 21/34 (= φ) — vertical breath × horizontal length */
    padding: var(--phi-3) var(--phi-4);
    font-size: var(--phi-3);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--cta-ink);
    background: linear-gradient(135deg, var(--amber-strong), var(--amber));
    border: 1px solid transparent;
    border-radius: var(--phi-2);
    text-decoration: none;
    box-shadow: 0 var(--phi-1) calc(var(--phi-4) - 4px) var(--amber-soft), var(--shadow-md);
    transition: transform 0.12s, box-shadow 0.2s, filter 0.2s;
}
.cta-primary:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 var(--phi-2) var(--phi-4) var(--amber-soft), var(--shadow-md); }
.cta-primary:active { transform: translateY(0); }

/* How it works */
.landing-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--phi-3); }
.landing-step {
    text-align: left;
    padding: 28px 24px;
    border: 1px solid var(--platinum-line);
    border-radius: 16px;
    background: var(--bubble-agent);
}
.landing-step__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--amber);
    color: var(--amber); font-weight: 600; font-size: 15px;
    margin-bottom: 16px;
}
.landing-step__title { font-size: 20px; margin: 0 0 8px; color: var(--fg); }
.landing-step__desc { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0; }

/* Three systems */
.landing-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.landing-card {
    padding: 32px 24px;
    border: 1px solid var(--platinum-line);
    border-radius: 16px;
    background: var(--bubble-agent);
    text-align: center;
}
.landing-card__title { font-size: 21px; margin: 18px 0 8px; color: var(--fg); }
.landing-card__desc { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0; }
.landing-card__glyph {
    height: 96px; display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--phi-2);
}
/* Three-system mini-maps — same visual language as covers + hero-bg + exp. */
.sys-icon { width: auto; height: 100%; color: var(--platinum); display: block; }

/* Deliver list */
.landing-deliver__list {
    list-style: none; padding: 0; margin: 0 auto; max-width: 560px;
    display: grid; gap: 14px; text-align: left;
}
.landing-deliver__list li {
    position: relative; padding: 16px 18px 16px 46px;
    border: 1px solid var(--platinum-line); border-radius: 12px;
    background: var(--bubble-agent); color: var(--fg);
    font-size: 17px; line-height: 1.5;
}
.landing-deliver__list li::before {
    content: "◆"; position: absolute; left: 18px; top: 16px;
    color: var(--amber); font-size: 13px;
}

/* Experience — Map of Three Worlds: zodiac + planets + BaZi pentagram + core.
   Same visual language as the Lava product covers. SVG markup lives in landing.html. */
.exp__heading { font-size: clamp(var(--phi-3), 4vw, var(--phi-4)); margin: 0 0 var(--phi-5); color: var(--fg); }
.exp__stage   { position: relative; width: min(var(--phi-9) + var(--phi-6), 86vw);
                aspect-ratio: 1 / 1; margin: 0 auto var(--phi-5); }
.exp__canvas  { display: block; width: 100%; height: 100%; }
.exp__arc { max-width: 620px; margin: 0 auto; display: grid; gap: 20px; }
.exp__line { font-size: clamp(19px, 2.7vw, 25px); line-height: 1.5; color: var(--fg); margin: 0; }
.exp__line--read { color: var(--muted); font-style: italic; }

/* Final CTA band */
.landing-cta-band { border-top: 1px solid var(--platinum-line); border-bottom: 1px solid var(--platinum-line); }
.landing-cta-band__sub { font-size: 19px; color: var(--muted); margin: 0 0 30px; }

/* Footer */
.landing-footer {
    position: relative; z-index: 1;
    text-align: center; padding: 40px 24px 60px;
    color: var(--muted); font-size: 14px; line-height: 1.6;
    max-width: 620px; margin: 0 auto;
}

/* Landing hero-bg evolution: faint platinum rings + amber accent planet. */
body.landing-page .hero-bg::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
    background:
        radial-gradient(circle at 50% 42%, transparent 27.6%, var(--platinum-line) 28%, transparent 28.4%),
        radial-gradient(circle at 50% 42%, transparent 43.6%, var(--platinum-line) 44%, transparent 44.4%);
}

/* Home atmosphere: soft vignette focuses the centre, faint film grain adds
   depth — over the living orrery, never stealing focus. */
body.landing-page .hero-bg {
    box-shadow: inset 0 0 240px 90px rgba(8, 3, 20, 0.55);
}
body.landing-page .hero-bg::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 140px 140px;
    opacity: 0.05;
    mix-blend-mode: overlay;
}
[data-theme="light"] body.landing-page .hero-bg {
    box-shadow: inset 0 0 240px 90px rgba(120, 80, 30, 0.16);
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) body.landing-page .hero-bg {
        box-shadow: inset 0 0 240px 90px rgba(120, 80, 30, 0.16);
    }
}

/* Motion — π-convergence. Three systems (the three rings) breathe inward and
   meet at one point: the moment you recognise yourself. The whole rhythm is π —
   a 6.28s (2π) breath, each ring sweeping a 180° half-turn (= π radians) as it
   collapses onto the core, which flares the instant the three converge. */
@media (prefers-reduced-motion: no-preference) {
    .exp__orbit { transform-origin: 50% 50%; will-change: transform; }
    .exp__orbit--1 { animation: exp-converge     6.28s ease-in-out infinite alternate; }
    .exp__orbit--2 { animation: exp-converge-rev 6.28s ease-in-out infinite alternate; }
    .exp__orbit--3 { animation: exp-converge     6.28s ease-in-out infinite alternate; }
    .exp__node { animation: hero-pulse 4s ease-in-out infinite; }
    .exp__core { animation: exp-core-flare 6.28s ease-in-out infinite alternate; }
    .exp__line { opacity: 0; transform: translateY(14px); animation: exp-rise 0.8s ease forwards; }
    .exp__line--orbits { animation-delay: 0.10s; }
    .exp__line--mirror { animation-delay: 0.45s; }
    .exp__line--read   { animation-delay: 0.80s; }

    /* Progressive enhancement: where the browser supports scroll-driven
       animation (Chrome/Edge/Firefox), the convergence tracks the section
       crossing the viewport — you pull the three systems into one as you
       scroll. Safari/iOS has no animation-timeline → keeps the timed breath. */
    @supports (animation-timeline: view()) {
        .exp__stage {
            view-timeline-name: --exp-scroll;
            view-timeline-axis: block;
        }
        .exp__orbit--1, .exp__orbit--2, .exp__orbit--3, .exp__core {
            animation-timeline: --exp-scroll;
            animation-range: entry 12% cover 52%;
            animation-direction: normal;
            animation-iteration-count: 1;
            animation-fill-mode: both;
            animation-timing-function: ease-in-out;
        }
        .exp__core { animation-range: entry 12% cover 58%; }
    }
}
/* A ring sweeps half a turn (π rad) while collapsing onto the core. */
@keyframes exp-converge {
    from { transform: rotate(0deg)    scale(1);   opacity: .9; }
    to   { transform: rotate(180deg)  scale(.06); opacity: .4; }
}
@keyframes exp-converge-rev {
    from { transform: rotate(0deg)    scale(1);   opacity: .9; }
    to   { transform: rotate(-180deg) scale(.06); opacity: .4; }
}
/* Core is dim when the rings are spread, flares as they meet at the centre. */
@keyframes exp-core-flare {
    from { transform: scale(1);   box-shadow: 0 0 20px 6px var(--amber-soft); opacity: .8; }
    to   { transform: scale(1.7); box-shadow: 0 0 48px 16px var(--amber);     opacity: 1; }
}
@keyframes exp-rise { to { opacity: 1; transform: translateY(0); } }

/* Responsive */
@media (max-width: 760px) {
    .landing-steps, .landing-cards { grid-template-columns: 1fr; }
    .landing-section { padding: 56px 20px; }
    .landing-hero { padding-top: 80px; }
    /* Keep centred headings clear of the fixed top-right lang/theme chips. */
    .landing-section__title, .exp__heading { padding-left: 54px; padding-right: 54px; }
}

/* Text cards: translucent fill tinted toward the background (not solid grey),
   with a soft blur so the cosmic bg shows through. */
.landing-step, .landing-card, .landing-deliver__list li {
    background: var(--card-glass);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

/* === Billing: teaser lock panel + pricing витрина (Aureate Canon φ/π) === */
/* Inline visuals on the client/teaser page — natal wheel + bodygraph (free hook) */
.person-visuals {
    max-width: var(--phi-10, 987px);
    margin: var(--phi-4) auto 0;
}
.person-visuals__title {
    text-align: center;
    font-size: var(--fs-body);
    color: var(--muted);
    margin: 0 0 var(--phi-3);
}
.person-visuals__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--phi-3);
    align-items: start;
}
.pv-fig { margin: 0; }
.pv-fig figcaption {
    text-align: center;
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 8px;
}
.pv-svg svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }
@media (max-width: 640px) {
    .person-visuals__grid { grid-template-columns: 1fr; }
}

.lock-panel {
    margin: var(--phi-4) auto 0;
    /* 760 ≈ 144 + 377 + 233 — все из φ-серии; визуально шире «золотого» max-width */
    max-width: calc(var(--phi-9) + var(--phi-8) + var(--phi-7));
    padding: var(--phi-4) var(--phi-3);
    text-align: center;
    border: 1px solid var(--border);
    border-radius: var(--phi-2);
    background: var(--card-glass);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
.lock-panel__title { font-size: var(--phi-4); font-weight: 600; margin: 0 0 var(--phi-1); line-height: 1.2; }
.lock-panel__sub   { color: var(--muted); font-size: var(--phi-3); margin: 0 auto var(--phi-4);
                     max-width: calc(var(--phi-9) + var(--phi-7)); /* ≈521 px */
                     line-height: 1.55; }
.lock-panel__cta   { display: inline-block; margin-top: var(--phi-2); }

.pricing      { max-width: calc(var(--phi-9) + var(--phi-9) + var(--phi-6)); /* 989 ≈ 1080/φ²×… */
                margin: 0 auto; padding: var(--phi-4) 0 var(--phi-5); text-align: center; }
.pricing__title { font-size: var(--phi-5); font-weight: 600; margin: 0 0 var(--phi-1); line-height: 1.1; }
.pricing__sub   { color: var(--muted); margin: 0 0 var(--phi-5); font-size: var(--phi-3); }
.pricing__note  { font-size: var(--phi-2); margin-top: var(--phi-4); }

.lock-cards, .pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--phi-3);
    align-items: stretch;
    margin-top: var(--phi-4);
}
.lock-card, .pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--phi-1);
    /* Padding pair 34/21 = φ — card breathes in canon */
    padding: var(--phi-4) var(--phi-3);
    border: 1px solid var(--border);
    border-radius: var(--phi-2);
    background: var(--card-glass);
    text-decoration: none;
    color: inherit;
    text-align: center;
    transition: transform .15s ease, border-color .15s ease;
}
.lock-card:hover, .pricing-card:hover { transform: translateY(-3px); border-color: var(--amber); }
.lock-card--featured, .pricing-card--featured {
    border-color: var(--amber);
    /* Shadow distance + blur from φ-series */
    box-shadow: 0 var(--phi-2) var(--phi-4) var(--amber-soft);
}
.lock-card__badge, .pricing-card__badge {
    position: absolute; top: calc(var(--phi-2) * -1); left: 50%; transform: translateX(-50%);
    background: var(--amber); color: var(--cta-ink, #2a1c08);
    font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    padding: 3px var(--phi-2); border-radius: 999px; white-space: nowrap;
}
.lock-card__name, .pricing-card__name  { font-size: var(--phi-3); font-weight: 600; margin: 0; line-height: 1.25; }
.lock-card__price, .pricing-card__price { font-size: var(--phi-4); font-weight: 700; line-height: 1.1; }
.lock-card__per, .pricing-card__per    { font-size: var(--phi-2); font-weight: 500; color: var(--muted); margin-left: 2px; }
.lock-card__desc, .pricing-card__desc  { font-size: var(--phi-2); color: var(--muted); line-height: 1.55; margin: 0; }
/* The CTA sits inside a <form>; make that form fill the leftover height and
   pin the button to the bottom, so cards with shorter descriptions still align. */
.pricing-card form { display: flex; flex-direction: column; flex: 1 1 auto; justify-content: flex-end; }
.pricing-card__cta { margin-top: auto; }
.pricing-card__cta[disabled] { opacity: .55; cursor: not-allowed; }

.topic-pill.locked { opacity: .82; }

@media (max-width: 680px) {
    .lock-cards, .pricing-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   FREE INTERACTIVE SKY  (/sky — "Твоё небо")
   ============================================================ */
.sky-page .hero-bg { display: none; }            /* the interactive canvas IS the orrery */
.sky-page main.container { max-width: none; padding-left: var(--phi-3); padding-right: var(--phi-3); }

.sky-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--phi-4);
    align-items: stretch;
    max-width: 1180px;
    margin: 0 auto;
    padding-bottom: var(--phi-5);
}
.sky-stage {
    position: relative;
    flex: 1 1 480px;
    min-width: 300px;
    height: min(72vh, 660px);
    border: 1px solid var(--border);
    border-radius: var(--phi-3);
    overflow: hidden;
    background: radial-gradient(120% 120% at 50% 45%,
        color-mix(in srgb, var(--bg) 70%, transparent), var(--bg));
}
.sky-canvas { display: block; width: 100%; height: 100%; }

.sky-tip {
    position: absolute; left: 50%; bottom: var(--phi-2); transform: translateX(-50%);
    padding: 6px 14px; border-radius: 999px;
    background: var(--card-glass); border: 1px solid var(--border);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font-size: 13px; color: var(--muted); white-space: nowrap; pointer-events: none;
    max-width: calc(100% - var(--phi-4)); overflow: hidden; text-overflow: ellipsis;
}

/* Click-to-read popover anchored to a glyph inside the stage */
.sky-pop {
    position: absolute; z-index: 6; max-width: min(290px, 82%);
    padding: var(--phi-2); border-radius: var(--phi-2);
    background: var(--card-glass); border: 1px solid var(--border);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.30);
    color: var(--fg); font-size: 14px; line-height: 1.5;
    animation: skyPopIn 0.16s ease-out;
}
.sky-pop__title { font-family: var(--display-font); font-size: 17px; color: var(--fg); margin: 0 18px 6px 0; }
.sky-pop__meaning { color: var(--amber); font-size: 13px; margin-bottom: 6px; }
.sky-pop__essence { color: var(--muted); }
.sky-pop__here {
    margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border);
    font-size: 17px; letter-spacing: 3px; color: var(--fg);
}
.sky-pop__close {
    position: absolute; top: 5px; right: 9px; padding: 0; cursor: pointer;
    background: none; border: none; color: var(--muted); font-size: 19px; line-height: 1;
}
.sky-pop__close:hover { color: var(--fg); }
@keyframes skyPopIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.sky-controls { position: absolute; left: var(--phi-2); bottom: var(--phi-2); display: flex; gap: var(--phi-1); }
.sky-ctl {
    padding: 6px 13px; border-radius: 999px; font-size: 12px; cursor: pointer;
    background: var(--card-glass); color: var(--fg); border: 1px solid var(--border);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sky-ctl:hover { border-color: var(--amber); }

.sky-panel { flex: 0 1 340px; min-width: 280px; display: flex; flex-direction: column; gap: var(--phi-2); }
.sky-h1 { font-family: var(--display-font); font-size: var(--phi-5); line-height: 1.05; margin: 0; color: var(--fg); }
.sky-sub { color: var(--muted); font-size: var(--phi-3); margin: 0 0 var(--phi-2); }

.sky-form { display: flex; flex-direction: column; gap: var(--phi-2); }
.sky-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.sky-field em { font-style: normal; opacity: 0.7; }
.sky-field input {
    padding: 10px 12px; border-radius: var(--phi-2);
    background: var(--bubble-user); color: var(--fg); border: 1px solid var(--border);
    font-size: 15px; font-family: inherit;
}
.sky-field input:focus { outline: none; border-color: var(--amber); }
.sky-submit {
    margin-top: var(--phi-1); padding: 11px; border-radius: var(--phi-2);
    background: var(--amber); color: var(--cta-ink); border: 1px solid var(--amber);
    font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity 0.15s;
}
.sky-submit:hover { opacity: 0.9; }
.sky-status { font-size: 13px; color: var(--muted); }

/* Full-width result: the orrery + form stay above; the read breathes here. */
.sky-result { max-width: 1000px; margin: var(--phi-4) auto 0; padding: 0 var(--phi-3) var(--phi-5); }
.sky-readout__head {
    font-family: var(--display-font); font-size: var(--phi-5); line-height: 1.1;
    margin: 0 0 var(--phi-3); color: var(--fg); text-align: center;
}
/* Big-Three + HD cards in a responsive row */
.sky-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--phi-2); }
.sky-tcard {
    padding: var(--phi-2); border: 1px solid var(--border); border-radius: var(--phi-2);
    background: var(--card-glass);
}
.sky-tcard__label { font-weight: 600; color: var(--fg); font-size: 15px; }
.sky-tcard__text { color: var(--muted); font-size: 14px; line-height: 1.5; margin-top: 4px; }
/* Deep synthesized read — comfortable reading column */
.sky-read { max-width: 720px; margin: var(--phi-4) auto 0; line-height: 1.65; font-size: 16px; color: var(--fg); }
.sky-read h2 { font-family: var(--display-font); font-size: var(--phi-3); margin: var(--phi-4) 0 8px; }
.sky-read h2:first-child { margin-top: 0; }
.sky-read p { margin: 0 0 var(--phi-2); }
.sky-read strong { color: var(--fg); }
.sky-read ul, .sky-read ol { margin: 0 0 var(--phi-2); padding-left: 22px; }
.sky-read blockquote { margin: var(--phi-2) 0; padding-left: var(--phi-2); border-left: 2px solid var(--amber); color: var(--fg); }
.sky-read__loading { color: var(--muted); font-size: 14px; }
.sky-read__err { color: var(--danger); font-size: 14px; }
.sky-cta {
    display: block; width: max-content; max-width: 100%; margin: var(--phi-4) auto 0;
    text-align: center; padding: 12px var(--phi-4); border-radius: var(--phi-2);
    text-decoration: none; font-weight: 600;
    color: var(--cta-ink); background: var(--amber); border: 1px solid var(--amber);
}
.sky-cta:hover { opacity: 0.9; }
.sky-hint { font-size: 12px; color: var(--muted); opacity: 0.8; margin: var(--phi-1) 0 0; }

@media (max-width: 840px) {
    .sky-stage { height: min(60vh, 460px); flex-basis: 100%; }
    .sky-panel { flex-basis: 100%; }
}

/* ============================================================
   CABINET (canon pass): shared classes replacing the inline-style
   second world in create/clients/profile/settings/admin/tg.
   ============================================================ */

/* Page header: title row with a hairline, used by every cabinet page. */
.page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--phi-2);
    margin-bottom: var(--phi-4);
    padding-bottom: var(--phi-2);
    border-bottom: 1px solid var(--platinum-line);
}
.page-head__title {
    margin: 0;
    font-size: var(--fs-lead);
    font-weight: 500;
    letter-spacing: 0.01em;
}
.page-head__aside { font-size: var(--fs-caption); color: var(--muted); }

/* Data tables (admin). One voice instead of per-page inline styles. */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-caption);
}
.data-table th {
    text-align: left;
    padding: 8px 10px;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
    border-bottom: 1px solid var(--border);
}
.data-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--platinum-line);
    vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Status badges (chart list, admin). */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    border: 1px solid transparent;
}
.badge--ok     { color: var(--ok);     background: var(--ok-soft);     border-color: var(--ok); }
.badge--warn   { color: var(--amber);  background: var(--amber-soft);  border-color: var(--amber); }
.badge--info   { color: var(--info);   background: var(--info-soft);   border-color: var(--info); }
.badge--muted  { color: var(--muted);  background: var(--bubble-user); border-color: var(--border); }

/* Inline notices (telegram link, profile messages). */
.notice {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    border: 1px solid var(--border);
    background: var(--bubble-user);
    margin: var(--phi-2) 0;
}
.notice--ok     { border-color: var(--ok);     background: var(--ok-soft); }
.notice--danger { border-color: var(--danger); background: var(--danger-soft); }
.notice--info   { border-color: var(--info);   background: var(--info-soft); }

/* Buttons: secondary/danger voices for the cabinet. */
.btn-secondary {
    background: var(--bubble-user);
    color: var(--fg);
    border: 1px solid var(--border);
    box-shadow: none;
}
.btn-danger {
    background: none;
    color: var(--danger);
    border: 1px solid var(--danger);
    box-shadow: none;
}
.btn-danger:hover { background: var(--danger-soft); }

/* Inline SVG glyph helper (replaces OS-dependent emoji iconography). */
.glyph {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.18em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}
.glyph--ok   { color: var(--ok); }
.glyph--warn { color: var(--amber); }
.glyph--spin { color: var(--muted); animation: glyph-spin 1.1s linear infinite; }
@keyframes glyph-spin { to { transform: rotate(360deg); } }

/* Custom confirm dialog (replaces window.confirm). */
.confirm-box {
    max-width: 360px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: var(--phi-3);
    box-shadow: var(--shadow-md);
}
.confirm-box p { margin: 0 0 var(--phi-3); font-size: 15px; }
.confirm-box__row { display: flex; gap: 10px; justify-content: flex-end; }