:root {
  --surface: #151b31; --panel: #131a2d; --accent: #b9a0e5; --accent-soft: #b9a0e514;
  --action-bg: #e3c595; --action-ink: #241c20; --audio-accent: #90d4c9; --audio-ink: #102b2b;
  --media-ink: #fff; --media-panel: #0c1223; --input-bg: #0f1628; --shadow: 0 12px 34px #00000012;
  --control-line: #747f9f;
}
html[data-theme="light"] {
  color-scheme: light; --bg: #f6f2ea; --surface: #fffcf7; --panel: #fffcf7; --card: #fffcf7;
  --card-light: #eee7f4; --ink: #282238; --muted: #675e74; --gold: #865f22 !important;
  --lavender: #604276 !important; --accent: #604276; --accent-soft: #6042760c;
  --action-bg: #604276; --action-ink: #fffcf7; --audio-accent: #286e68; --audio-ink: #fff;
  --line: #28223824; --danger: #9c3344; --input-bg: #fffdf9; --shadow: 0 10px 32px #3d2d5110;
  --control-line: #8b7d99;
}
html, body { background-color: var(--bg); }
body { isolation: isolate; }
.sky { z-index: -2; }
html[data-theme="light"] .sky { background: radial-gradient(ellipse at 88% 0,#c9b6e236,transparent 50%),radial-gradient(ellipse at 0 64%,#eadac733,transparent 45%); }
#cosmic-background { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: .14; }
#cosmic-background svg { width: 100%; height: 100%; }
.cosmic-map { fill: none; stroke: var(--accent); stroke-width: .8; }
.cosmic-planet { fill: var(--gold); stroke: none; }
.cosmic-orbit { transform-origin: 500px 500px; animation: celestial-drift var(--orbit-duration,120s) linear infinite; animation-direction: var(--orbit-direction,normal); }
html[data-background-motion="off"] .cosmic-orbit { animation: none; }
html[data-theme="light"] #cosmic-background { opacity: .08; }
@keyframes celestial-drift { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cosmic-orbit { animation: none !important; } }

.card, .dialog, .profile-hero, .profile-section, .profile-danger, .community-shortcuts, .reading-preview,
.hero-card, .insight-card, .affirmation, .natal-review-status, .family-profile, .plan-card,
.ritual-hero, .medal-card, .service-card, .companion-benefits, .profile-inventory, .audio-library-item {
  background: var(--surface); border-color: var(--line); box-shadow: var(--shadow);
}
.hero-card, .reading-preview { background: radial-gradient(ellipse at 100% 0,var(--accent-soft),transparent 75%),var(--surface); }
html[data-theme][data-zodiac] .hero-card { background: radial-gradient(ellipse at 95% 0,var(--accent-soft),transparent 68%),var(--surface); }
.field input, .field select, .field textarea, .speech-rate select, .admin-profile-actions select,
.speech-scope, .reel-rate select, .language-control select { background-color: var(--input-bg); color: var(--ink); border-color: var(--line); }
.field input, .field select, .field textarea { border-color: var(--control-line); }
.field input::placeholder, .field textarea::placeholder, input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
.button { background: var(--action-bg); color: var(--action-ink); border: 1px solid transparent; border-radius: 14px; }
.button:hover { background: var(--action-bg); color: var(--action-ink); filter: brightness(1.05); }
.button-secondary, .button-quiet, .icon-button { background: var(--accent-soft); border: 1px solid var(--line); color: var(--ink); }
.button-secondary:hover, .button-quiet:hover { background: var(--accent-soft); color: var(--ink); }
.button-danger { color: var(--danger); background: color-mix(in srgb,var(--danger) 9%,var(--surface)); border-color: color-mix(in srgb,var(--danger) 35%,transparent); }
.button-danger:hover { color: var(--danger); background: color-mix(in srgb,var(--danger) 13%,var(--surface)); }
.text-button, .reading-jump, .footer-links button { color: var(--gold); }
.precision-note, .profile-precision, .profile-retention-note, pre, .hero-card .summary, .insight-card p,
.affirmation blockquote, .mood-label, .profile-action-copy span, .service-card p { color: var(--muted); }
.mood-ring-inner { background: var(--surface); }
.mood-ring { background: conic-gradient(var(--gold) calc(var(--score,3)*20%),var(--control-line) 0); }
.stars { color: var(--muted); }
.stars .filled { color: var(--gold); }
.hero-card .summary, .hero-card .summary p, .insight-card p, .affirmation blockquote { color: var(--ink); }
.hero-card .summary { max-width: 76ch; }
html[data-theme="light"] .storage-warning { color: #865f22 !important; }
html[data-theme="light"] .review-chartReviewed { color: var(--audio-accent); border-color: var(--audio-accent); }
.notice { color: var(--ink); background: color-mix(in srgb,var(--accent) 10%,var(--surface)); border-color: var(--line); }
.notice.warning { color: var(--ink); background: color-mix(in srgb,var(--gold) 9%,var(--surface)); }
.notice.error { color: var(--danger); background: color-mix(in srgb,var(--danger) 8%,var(--surface)); }

.period-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); max-width: 100%; gap: 5px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.period-tab { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 54px; border: 1px solid transparent; border-radius: 12px; padding: 10px 8px; font-size: 15px; line-height: 1.3; color: var(--muted); background: transparent; }
.period-tab svg { width: 19px; height: 19px; flex-shrink: 0; }
.period-tab[aria-selected="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); font-weight: 700; box-shadow: none; }
.space-nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 0; background: transparent; border: 0; }
.space-nav .space-link { min-height: 48px; min-width: 0; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: var(--muted); padding: 10px 12px; text-align: center; font-size: 14px; line-height: 1.35; }
.space-nav .space-link[aria-current="page"], .space-nav #nav-astral { color: var(--ink); background: var(--accent-soft); border-color: color-mix(in srgb,var(--accent) 50%,var(--line)); }
#theme-toggle svg { width: 20px; height: 20px; }
.appearance-settings > .field-hint { margin: 8px 0 16px; }
.theme-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 18px 0; }
.theme-choice { display: grid; position: relative; place-items: center; gap: 8px; min-height: 90px; min-width: 0; padding: 13px 5px; border: 1px solid var(--line); border-radius: 15px; background: var(--input-bg); color: var(--muted); font-size: 14px; }
.theme-choice > svg { width: 23px; height: 23px; }
.theme-choice[aria-pressed="true"] { color: var(--ink); border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.theme-check { position: absolute; top: 5px; right: 7px; color: var(--accent); visibility: hidden; }
.theme-choice[aria-pressed="true"] .theme-check { visibility: visible; }
.appearance-motion { display: flex; gap: 16px; justify-content: space-between; align-items: center; min-height: 48px; cursor: pointer; }
.appearance-motion input { width: 23px; height: 23px; flex-shrink: 0; }
#community-appearance > label { min-width: 0; }
#community-appearance select { display: block; min-width: 0; max-width: 100%; width: 100%; min-height: 52px; padding: 12px; border: 1px solid var(--control-line); border-radius: 12px; background: var(--input-bg); color: var(--ink); font-size: 16px; }
#family-form label:not(.checkbox-field) { display: grid; gap: 8px; min-width: 0; }
#family-form input:not([type="checkbox"]):not([type="radio"]), #family-form select {
  appearance: none; display: block; width: 100%; min-width: 0; min-inline-size: 0; max-width: 100%;
  min-height: 54px; padding: 13px 15px; border: 1px solid var(--control-line); border-radius: 13px;
  background: var(--input-bg); color: var(--ink); font-size: 17px; line-height: 1.4;
}
#family-form input::-webkit-date-and-time-value { text-align: left; }
#family-form select { appearance: auto; }
.speech-player { background: color-mix(in srgb,var(--audio-accent) 7%,var(--surface)); border: 1px solid color-mix(in srgb,var(--audio-accent) 25%,var(--line)); border-radius: 20px; padding: 22px; }
.speech-identity { display: flex; align-items: center; gap: 13px; min-width: 0; }
.speech-avatar { width: 48px; height: 48px; object-fit: cover; border-radius: 50%; border: 2px solid var(--surface); flex-shrink: 0; }
.speech-identity h3 { font-size: 18px; margin: 0 0 5px; }
.speech-player #speech-play { background: var(--audio-accent); color: var(--audio-ink); border-radius: 14px; min-width: 120px; }
.speech-scopes { padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.speech-scope { border: 1px solid transparent; border-radius: 9px; color: var(--muted); min-height: 42px; }
.speech-scope[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--line); color: var(--ink); }
.speech-player input[type="range"] { accent-color: var(--audio-accent); }
.speech-status { color: var(--muted); }
.brand-footer { background: var(--surface); border-color: var(--line); }
.footer-tagline, .footer-description, .footer-note, .footer-signature { color: var(--muted); }
.brand-footer .footer-note { color: var(--muted); }
html[data-theme="light"] .eleven-balance > span,
html[data-theme="light"] #eleven-status,
html[data-theme="light"] #eleven-checked-at,
html[data-theme="light"] .eleven-footnote > p,
html[data-theme="light"] .footer > span { color: var(--muted); }
html[data-theme="light"] .language-trigger, html[data-theme="light"] .language-options { background: var(--panel); border-color: var(--line); color: var(--ink); }
html[data-theme="light"] .language-options button { color: var(--ink); }
html[data-theme="light"] .language-options button[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
html[data-theme="light"] .language-options button:disabled { color: var(--muted); }
html[data-theme] #app-dialog.dialog[open] > .dialog-top,
html[data-theme] #install-dialog.dialog[open] > .dialog-top,
html[data-theme] #admin-dialog .dialog-top { background: var(--panel); border-color: var(--line); box-shadow: 0 -28px 0 var(--panel); }
html[data-theme] #app-dialog .astral-dock { background: var(--panel); border-color: var(--line); box-shadow: 0 28px 0 var(--panel); }
html[data-theme="light"] .dialog { background: var(--panel); border-color: var(--line); }
html[data-theme="light"] .profile-monogram, html[data-theme="light"] .profile-guest-badge,
html[data-theme="light"] .profile-action-icon, html[data-theme="light"] .saved-badge,
html[data-theme="light"] .pill, html[data-theme="light"] .category-icon { background: var(--accent-soft); border-color: var(--line); color: var(--accent); }
html[data-theme="light"] .profile-action, html[data-theme="light"] .profile-birth-facts > div,
html[data-theme="light"] .edit-limits, html[data-theme="light"] .morning-card,
html[data-theme="light"] .companion-hero, html[data-theme="light"] .plan-grid article,
html[data-theme="light"] .medal-card { background: var(--surface); border-color: var(--line); color: var(--ink); }
html[data-theme="light"] .morning-dialog, html[data-theme="light"] .morning-dialog p,
html[data-theme="light"] .profile-hero h3, html[data-theme="light"] .profile-section h3,
html[data-theme="light"] .profile-action-copy strong, html[data-theme="light"] .profile-birth-facts dd,
html[data-theme="light"] .profile-kicker, html[data-theme="light"] .profile-signs,
html[data-theme="light"] .community-dashboard button { color: var(--ink); }
html[data-theme="light"] .companion-hero .companion-intro,
html[data-theme="light"] .companion-trust dd,
html[data-theme="light"] .companion-bio .companion-ai-note,
html[data-theme="light"] .companion-bio .companion-photo-source { color: var(--muted); }
html[data-theme="light"] .companion-hero h3 { color: var(--ink); }
html[data-theme="light"] #companion-panel .service-card { background: var(--surface); border-color: var(--line); }
html[data-theme="light"] #companion-panel .service-description,
html[data-theme="light"] .service-price .service-currency,
html[data-theme="light"] .service-meta span,
html[data-theme="light"] .service-provenance summary,
html[data-theme="light"] .companion-process li { color: var(--muted); }
html[data-theme="light"] .companion-status { color: var(--accent); background: var(--accent-soft); border-color: var(--line); }
html[data-theme="light"] .companion-status[data-status="approved"],
html[data-theme="light"] .companion-status[data-status="completed"] { color: var(--audio-accent); }
html[data-theme="light"] .companion-status[data-status="cancelled"],
html[data-theme="light"] .companion-status[data-status="rejected"] { color: var(--danger); }
html[data-theme="light"] .booking-overview { background: var(--surface); border-color: var(--line); }
html[data-theme="light"] .install-steps { color: var(--ink); }
.quiet-panel { background: var(--surface); }
.quiet-caption { background: var(--surface); color: var(--ink); }
.quiet-caption .eyebrow { color: var(--gold); }
.quiet-caption p { color: var(--ink); }
html[data-theme="light"] .quiet-caption { background: var(--surface); color: var(--ink); }
html[data-theme] .brand-footer .footer-brand { color: var(--ink); }
html[data-theme] .brand-footer .footer-tagline { color: var(--ink); }
html[data-theme] .brand-footer .footer-constellation { opacity: .4; }
.astrologer-admin-list { display: grid; gap: 14px; margin-top: 20px; }
.astrologer-admin-card { padding: 18px; border: 1px solid var(--line); border-radius: 16px; overflow-wrap: anywhere; }
.astrologer-admin-card textarea { min-height: 140px; }
@media (max-width: 650px) {
  .space-nav { gap: 6px; }
  .space-nav .space-link { padding: 10px 6px; font-size: 13px; }
  .speech-player { padding: 17px; }
  .period-tab { gap: 5px; font-size: 14px; }
}
@media (max-width: 370px) {
  .period-tab { flex-direction: column; gap: 5px; font-size: 13px; min-height: 60px; }
  .header-actions { gap: 5px; }
  .topbar { gap: 8px; }
  .topbar .brand { gap: 7px; font-size: 12px; letter-spacing: .17em; }
  .topbar .brand img { width: 28px; height: 28px; }
  .theme-choice { font-size: 12px; }
}