/* ============================================================
   ASTERIRIS — FINAL UNIFIED LIGHT / DARK THEME
   Loaded last on every page. This file is the single source of
   truth for color, contrast, surfaces, controls and dialogs.
   ============================================================ */

:root {
  color-scheme: light;

  --ui-page: #f5eff8;
  --ui-page-glow-1: rgba(194, 158, 218, .34);
  --ui-page-glow-2: rgba(237, 204, 160, .28);
  --ui-shell: #fffafd;
  --ui-surface: #ffffff;
  --ui-surface-2: #f7f1fa;
  --ui-surface-3: #f0e7f5;
  --ui-input: #ffffff;
  --ui-overlay: rgba(31, 20, 43, .72);

  --ui-text: #241b35;
  --ui-text-2: #4f435d;
  --ui-text-3: #6f627a;
  --ui-text-4: #887b92;

  --ui-border: #dfd3e6;
  --ui-border-strong: #cbb8d7;
  --ui-divider: #e8dfed;

  --ui-accent: #6f4b8d;
  --ui-accent-strong: #56336f;
  --ui-accent-soft: #eee3f5;
  --ui-accent-glow: rgba(111, 75, 141, .18);

  --ui-success: #276a4b;
  --ui-success-bg: #edf8f2;
  --ui-success-border: #a9dabb;
  --ui-warning: #8a5b08;
  --ui-warning-bg: #fff7e7;
  --ui-warning-border: #e6c47d;
  --ui-danger: #963c49;
  --ui-danger-bg: #fff0f2;
  --ui-danger-border: #e3aeb7;
  --ui-info: #315f8a;
  --ui-info-bg: #edf5fc;
  --ui-info-border: #b9d3ea;

  --ui-shadow: 0 16px 38px rgba(52, 32, 69, .10);
  --ui-shadow-dialog: 0 28px 80px rgba(39, 22, 51, .24);
  --ui-focus: 0 0 0 3px rgba(111, 75, 141, .24);

  --ui-radius-sm: 10px;
  --ui-radius: 16px;
  --ui-radius-lg: 22px;

  /* Existing-code aliases */
  --bg-page: radial-gradient(circle at 15% 12%, var(--ui-page-glow-1), transparent 34rem),
             radial-gradient(circle at 90% 16%, var(--ui-page-glow-2), transparent 28rem),
             var(--ui-page);
  --bg-app: var(--ui-shell);
  --bg-panel: var(--ui-surface);
  --bg-panel-alt: var(--ui-surface-2);
  --bg-elevated: var(--ui-surface);
  --bg-row-alt: var(--ui-surface-2);
  --bg-input: var(--ui-input);
  --bg-tab-bar: rgba(255, 250, 253, .97);
  --bg-modal-overlay: var(--ui-overlay);

  --text-primary: var(--ui-text);
  --text-secondary: var(--ui-text-2);
  --text-muted: var(--ui-text-3);
  --text-soft: var(--ui-text-4);

  --border: var(--ui-border);
  --border-strong: var(--ui-border-strong);
  --border-input: var(--ui-border-strong);

  --accent: var(--ui-accent);
  --accent-strong: var(--ui-accent-strong);
  --accent-soft: var(--ui-accent-soft);
  --success: var(--ui-success);
  --warning: var(--ui-warning);
  --danger: var(--ui-danger);
  --gold: #aa7621;

  --ink: var(--ui-text);
  --ink-soft: var(--ui-text-2);
  --muted: var(--ui-text-3);
  --paper: var(--ui-surface);
  --paper-soft: var(--ui-surface-2);
  --line: var(--ui-border);
  --lavender: var(--ui-accent-soft);
  --violet: var(--ui-accent);
  --violet-dark: var(--ui-accent);
  --violet-light: var(--ui-border-strong);
  --surface-panel: var(--ui-surface);
  --surface-panel-accent: var(--ui-surface-2);
  --surface-input: var(--ui-input);
  --surface-row-alt: var(--ui-surface-2);
  --panel-border: var(--ui-border);
  --shadow-soft: var(--ui-shadow);
  --shadow: var(--ui-shadow);
  --focus-ring: var(--ui-focus);
}

[data-theme="dark"] {
  color-scheme: dark;

  --ui-page: #080611;
  --ui-page-glow-1: rgba(102, 63, 149, .34);
  --ui-page-glow-2: rgba(55, 82, 130, .20);
  --ui-shell: #100c19;
  --ui-surface: #1a1427;
  --ui-surface-2: #241a35;
  --ui-surface-3: #302244;
  --ui-input: #151020;
  --ui-overlay: rgba(8, 6, 14, .86);

  --ui-text: #f7f1fa;
  --ui-text-2: #ded2e6;
  --ui-text-3: #bfaecb;
  --ui-text-4: #9f90aa;

  --ui-border: #48375e;
  --ui-border-strong: #73578e;
  --ui-divider: #382946;

  --ui-accent: #d9b9f5;
  --ui-accent-strong: #ebd7ff;
  --ui-accent-soft: #35234c;
  --ui-accent-glow: rgba(217, 185, 245, .18);

  --ui-success: #7bd5a2;
  --ui-success-bg: #173327;
  --ui-success-border: #346d50;
  --ui-warning: #f0c978;
  --ui-warning-bg: #3a2c18;
  --ui-warning-border: #755a2b;
  --ui-danger: #f19aa5;
  --ui-danger-bg: #3b2027;
  --ui-danger-border: #77404a;
  --ui-info: #8fc2ee;
  --ui-info-bg: #1b2d3e;
  --ui-info-border: #365b78;

  --ui-shadow: 0 18px 46px rgba(0, 0, 0, .36);
  --ui-shadow-dialog: 0 32px 90px rgba(0, 0, 0, .62);
  --ui-focus: 0 0 0 3px rgba(217, 185, 245, .28);

  --bg-page: radial-gradient(circle at 14% 10%, var(--ui-page-glow-1), transparent 36%),
             radial-gradient(circle at 86% 84%, var(--ui-page-glow-2), transparent 38%),
             var(--ui-page);
  --bg-tab-bar: rgba(14, 10, 22, .97);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { background: var(--bg-page) !important; color: var(--ui-text); }

:where(button, a, input, select, textarea):focus-visible {
  outline: 0;
  box-shadow: var(--ui-focus) !important;
}

/* ---------- Global text hierarchy ---------- */
.app-page .label,
.app-page .form-label,
.app-page .trip-input-label,
.app-page .pack-list-title,
.app-page .lib-count {
  color: var(--ui-accent) !important;
  opacity: 1 !important;
}

.app-page :is(p, .helper-text, .theme-helper, .theme-muted, .conn-note,
  .crystal-props, .rec-props, .day-date, .day-moon, .pack-days) {
  color: var(--ui-text-3);
}

.app-page :is(.theme-title, .modal-name, .crystal-name, .rec-name,
  .day-name, .day-color-name, .day-crystal-name, .pack-name) {
  color: var(--ui-text) !important;
}

/* ---------- Main app shell ---------- */
.app-page .app {
  background: var(--ui-shell) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow);
}

.app-page .content { color: var(--ui-text); }
.app-page .section,
.app-page .theme-panel,
.app-page .theme-card,
.app-page .connections-box,
.app-page #top-card,
.app-page .day-card,
.app-page .crystal-card,
.app-page .rec-card,
.app-page .empty-state,
.app-page .stash-group {
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow);
}

.app-page .theme-panel-accent,
.app-page #chart-summary,
.app-page .pack-list {
  color: var(--ui-text) !important;
  background: var(--ui-surface-2) !important;
  border-color: var(--ui-border-strong) !important;
  box-shadow: var(--ui-shadow);
}

.app-page .empty-state {
  border-style: dashed !important;
  color: var(--ui-text-3) !important;
}

.app-page .crystal-card.owned { background: var(--ui-surface-2) !important; }
.app-page .crystal-card:hover,
.app-page .day-card:hover { border-color: var(--ui-border-strong) !important; }

/* ---------- Navigation ---------- */
.app-page .tab-bar { background: var(--bg-tab-bar) !important; border-color: var(--ui-border) !important; }
.app-page .tab { color: var(--ui-text-3) !important; opacity: 1 !important; }
.app-page .tab:hover { color: var(--ui-text) !important; }
.app-page .tab.active {
  color: var(--ui-accent-strong) !important;
  background: var(--ui-accent-soft) !important;
  border-color: var(--ui-accent) !important;
}
/* Chart app: restore readable tab colors on the dark purple header.
   The .app-page rules above target light-surface landing pages.
   The chart header uses a dark gradient where tabs need white text. */
.header .tabs .tab { color: rgba(255,255,255,.78) !important; }
.header .tabs .tab:hover { color: #fff !important; background: rgba(255,255,255,.1) !important; }
.header .tabs .tab.active {
  color: #56336f !important;
  background: #fff !important;
  border-color: #fff !important;
}

/* ---------- Forms ---------- */
.app-page :is(.date-input, .form-select, .form-textarea, .search-input,
  input[type="text"], input[type="email"], input[type="date"], textarea, select) {
  color: var(--ui-text) !important;
  background-color: var(--ui-input) !important;
  border-color: var(--ui-border-strong) !important;
  opacity: 1 !important;
}

.app-page :is(input, textarea)::placeholder { color: var(--ui-text-4) !important; opacity: 1; }
.app-page select option { color: var(--ui-text); background: var(--ui-input); }
.app-page :is(input, textarea, select):focus { border-color: var(--ui-accent) !important; box-shadow: var(--ui-focus); }

.app-page .filter-btn,
.app-page .btn-secondary,
.app-page .toggle-btn,
.app-page .badge,
.app-page .crystal-form-badge {
  color: var(--ui-accent-strong) !important;
  background: var(--ui-accent-soft) !important;
  border-color: var(--ui-border-strong) !important;
}
.app-page .filter-btn.active,
.app-page .btn-primary,
.app-page .plan-btn { color: #fff !important; }

/* ---------- My Chart ---------- */
.app-page #tab-chart > div[style*="background:linear-gradient"],
.app-page #tab-chart > div[style*="background: linear-gradient"] {
  background: var(--ui-surface-2) !important;
  border-color: var(--ui-border-strong) !important;
  color: var(--ui-text) !important;
}
.app-page #tab-chart .theme-panel { background: var(--ui-surface) !important; }
.app-page #chart-summary { padding: 24px; margin-bottom: 20px; border: 1px solid var(--ui-border-strong); border-radius: 22px; }
.app-page #chart-summary-content > div {
  border-bottom-color: var(--ui-divider) !important;
  color: var(--ui-text) !important;
  opacity: 1 !important;
}
.app-page #chart-summary-content span { opacity: 1 !important; }
.app-page #chart-summary-content [style*="color"] { color: var(--ui-text-2) !important; }
.app-page #chart-summary-content [style*="font-weight:700"],
.app-page #chart-summary-content [style*="font-weight: 700"] { color: var(--ui-text) !important; }

/* ---------- Stash ---------- */
.app-page .stash-local-banner {
  color: var(--ui-warning) !important;
  background: var(--ui-warning-bg) !important;
  border-color: var(--ui-warning-border) !important;
}
.app-page .stash-banner-title,
.app-page .stash-banner-text { color: inherit !important; opacity: 1 !important; }
.app-page .stash-piece-row { border-color: var(--ui-divider) !important; }
.app-page .stash-piece-row-alt { background: var(--ui-surface-2) !important; }

/* ---------- Chakra badges ---------- */
.app-page .chakra-badge,
.app-page .chakra-tag {
  font-weight: 700 !important;
  border-width: 1px !important;
  opacity: 1 !important;
  filter: saturate(1.08);
}
[data-theme="dark"] .app-page .chakra-badge,
[data-theme="dark"] .app-page .chakra-tag {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

/* ---------- Standard modal / popup system ---------- */
.app-page :is(
  #modal-overlay, #add-modal-overlay, #setup-modal-overlay, #profile-modal-overlay,
  #upgrade-modal-overlay, #feedback-modal-overlay, #custom-crystal-overlay,
  #privacy-modal, #terms-modal, #disclaimer-modal
) {
  background: var(--ui-overlay) !important;
  color: var(--ui-text);
}

.app-page :is(
  #modal-content, #add-modal-content,
  #setup-modal-overlay > div > div,
  #profile-modal-overlay > div > div,
  #upgrade-modal-overlay > div > div,
  #feedback-modal-overlay > div > div,
  #custom-crystal-overlay > div > div,
  #privacy-modal > div > div,
  #terms-modal > div > div,
  #disclaimer-modal > div > div
) {
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border-strong) !important;
  box-shadow: var(--ui-shadow-dialog) !important;
}

/* Any old pale sub-panels inside popups become the standard elevated surface. */
.app-page :is(
  #setup-modal-overlay, #profile-modal-overlay, #upgrade-modal-overlay,
  #feedback-modal-overlay, #custom-crystal-overlay,
  #privacy-modal, #terms-modal, #disclaimer-modal
) :is(
  [style*="background:#fff"], [style*="background: #fff"],
  [style*="background:#f8f4fc"], [style*="background: #f8f4fc"],
  [style*="background:#f4ebf8"], [style*="background: #f4ebf8"],
  [style*="background:#f0ece8"], [style*="background: #f0ece8"],
  [style*="background:#ece1f5"], [style*="background: #ece1f5"],
  [style*="background:#f0f8ff"], [style*="background: #f0f8ff"],
  [style*="background:#f8f4fa"], [style*="background: #f8f4fa"],
  [style*="background:rgba(107,63,160,.1)"],
  [style*="background:rgba(248,244,252"]
) {
  background: var(--ui-surface-2) !important;
  border-color: var(--ui-border) !important;
}

/* Modal text — explicit mapping of old hard-coded palette to current theme. */
.app-page :is(
  #setup-modal-overlay, #profile-modal-overlay, #upgrade-modal-overlay,
  #feedback-modal-overlay, #custom-crystal-overlay,
  #privacy-modal, #terms-modal, #disclaimer-modal
) :is(
  [style*="color:#30203f"], [style*="color: #30203f"],
  [style*="color:#241b35"], [style*="color: #241b35"],
  [style*="color:#3e2857"], [style*="color: #3e2857"]
) { color: var(--ui-text) !important; }

.app-page :is(
  #setup-modal-overlay, #profile-modal-overlay, #upgrade-modal-overlay,
  #feedback-modal-overlay, #custom-crystal-overlay,
  #privacy-modal, #terms-modal, #disclaimer-modal
) :is(
  [style*="color:#3d3450"], [style*="color: #3d3450"],
  [style*="color:#554b67"], [style*="color: #554b67"],
  [style*="color:#62566e"], [style*="color: #62566e"],
  [style*="color:#756c83"], [style*="color: #756c83"],
  [style*="color:#82738f"], [style*="color: #82738f"],
  [style*="color:#a090b0"], [style*="color: #a090b0"],
  [style*="color:#c0b0d0"], [style*="color: #c0b0d0"]
) { color: var(--ui-text-3) !important; }

.app-page :is(
  #setup-modal-overlay, #profile-modal-overlay, #upgrade-modal-overlay,
  #feedback-modal-overlay, #custom-crystal-overlay,
  #privacy-modal, #terms-modal, #disclaimer-modal
) :is(input, textarea, select) {
  color: var(--ui-text) !important;
  background: var(--ui-input) !important;
  border-color: var(--ui-border-strong) !important;
}

/* Modal headings / close controls */
.app-page :is(#privacy-modal, #terms-modal, #disclaimer-modal) > div > div > div:first-child > div:first-child {
  color: var(--ui-text) !important;
}
.app-page :is(#privacy-modal, #terms-modal, #disclaimer-modal) button[onclick*="style.display='none'"] {
  color: var(--ui-text) !important;
  background: var(--ui-surface-3) !important;
  border: 1px solid var(--ui-border) !important;
}
.app-page .modal-close {
  color: var(--ui-accent-strong) !important;
  background: var(--ui-accent-soft) !important;
  border-color: var(--ui-border-strong) !important;
}

/* Semantic popup panels */
.app-page .feature-box,
.app-page .modal-subpanel,
.app-page .beta-pricing-card,
.app-page .modal-info-card {
  color: var(--ui-text);
  background: var(--ui-surface-2) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px;
}
.app-page .feature-box-success { background: var(--ui-success-bg) !important; border-color: var(--ui-success-border) !important; }
.app-page .feature-box-success .feature-heading,
.app-page .feature-box-success .feature-check { color: var(--ui-success) !important; }
.app-page .feature-box-success .feature-text { color: var(--ui-text-2) !important; }
.app-page .feature-box-development .feature-heading { color: var(--ui-accent) !important; }
.app-page .feature-box-development .feature-dot { color: var(--ui-text-4) !important; }
.app-page .feature-box-development .feature-text { color: var(--ui-text-3) !important; }
.app-page .beta-pricing-card { background: var(--ui-surface-2) !important; border-color: var(--ui-border-strong) !important; }
.app-page .beta-pricing-card .beta-price { color: var(--ui-text) !important; }
.app-page .beta-callout { color: var(--ui-text-2) !important; background: var(--ui-surface-3) !important; border-color: var(--ui-border) !important; }
.app-page .modal-info-card { background: var(--ui-info-bg) !important; border-color: var(--ui-info-border) !important; }
.app-page .modal-info-card .modal-info-title { color: var(--ui-info) !important; }

/* Keep semantic alerts visible. */
.app-page [style*="color:#26734d"],
.app-page [style*="color: #26734d"],
.app-page [style*="color:#1a4a2a"],
.app-page [style*="color: #1a4a2a"] { color: var(--ui-success) !important; }
.app-page [style*="color:#a45c00"],
.app-page [style*="color: #a45c00"],
.app-page [style*="color:#7a5a00"],
.app-page [style*="color: #7a5a00"] { color: var(--ui-warning) !important; }
.app-page [style*="color:#8a3030"],
.app-page [style*="color: #8a3030"] { color: var(--ui-danger) !important; }

/* Share modal deliberately remains a dark presentation surface in both modes. */
.app-page #share-modal { background: rgba(8, 6, 14, .93) !important; color: #fff; }

/* ---------- Home / FAQ ---------- */
.home-page, .faq-page { color: var(--ui-text); }
[data-theme="dark"] .home-page {
  --card-bg: rgba(255,255,255,.07);
  --card-border: rgba(255,255,255,.15);
  --text-soft: rgba(255,255,255,.82);
  --text-muted: rgba(255,255,255,.67);
  --text-faint: rgba(255,255,255,.48);
  --pillar-bg: rgba(255,255,255,.06);
  --pillar-border: rgba(255,255,255,.12);
  --link-color: rgba(255,255,255,.68);
  --footer-color: rgba(255,255,255,.54);
  --cta-note: rgba(255,255,255,.68);
  --trust-text: rgba(255,255,255,.66);
  --stash-note: rgba(255,255,255,.68);
  --preview-intro: rgba(255,255,255,.72);
  --lib-desc: rgba(255,255,255,.67);
}
[data-theme="light"] .home-page {
  --text-soft: rgba(36,27,53,.84);
  --text-muted: rgba(36,27,53,.68);
  --text-faint: rgba(36,27,53,.50);
  --link-color: rgba(36,27,53,.68);
  --footer-color: rgba(36,27,53,.56);
  --cta-note: rgba(36,27,53,.66);
  --trust-text: rgba(36,27,53,.64);
  --stash-note: rgba(36,27,53,.68);
  --preview-intro: rgba(36,27,53,.70);
  --lib-desc: rgba(36,27,53,.66);
}
.faq-page .intro, .faq-page .faq-a { color: var(--ui-text-3) !important; }
.faq-page footer, .faq-page footer a { color: var(--ui-text-3) !important; }

/* ---------- Footer ---------- */
.app-page .app-footer {
  color: var(--ui-text-3);
  background: color-mix(in srgb, var(--ui-shell) 92%, transparent);
  border-top-color: var(--ui-border);
}
.app-page .app-footer a,
.app-page .app-footer button { color: var(--ui-text-3) !important; }
.app-page .app-footer a:hover,
.app-page .app-footer button:hover { color: var(--ui-accent) !important; }
/* Remove all box styling from footer nav links */
.app-page .app-footer-links a,
.app-page .app-footer-links button {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  padding: 3px 6px !important;
  border-radius: 0 !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .app-page .modal,
  .app-page :is(
    #setup-modal-overlay > div > div,
    #profile-modal-overlay > div > div,
    #upgrade-modal-overlay > div > div,
    #feedback-modal-overlay > div > div,
    #custom-crystal-overlay > div > div,
    #privacy-modal > div > div,
    #terms-modal > div > div,
    #disclaimer-modal > div > div
  ) { border-radius: 18px !important; }
}

@media (max-width: 520px) {
  .app-page .theme-panel,
  .app-page #chart-summary { padding: 18px !important; }
  .app-page .plan-pack-panel { padding: 14px; }
  .app-page .app-footer { padding-bottom: 88px; }
}

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

/* Final detail surfaces that are generated dynamically. */
.app-page .care-box {
  color: var(--ui-text-2) !important;
  background: var(--ui-surface-2) !important;
  border-color: var(--ui-border) !important;
}
.app-page .care-text { color: var(--ui-text-2) !important; }
.app-page .prop-tag {
  color: var(--ui-text-2) !important;
  background: var(--ui-surface-3) !important;
  border-color: var(--ui-border) !important;
}
.app-page #import-result,
.app-page #sm-import-result,
.app-page #ob-import-result,
.app-page #import-data-msg,
.app-page #feedback-result,
.app-page #upgrade-msg {
  opacity: 1 !important;
}

/* FAQ and home controls use the same tokens as the app. */
.faq-page #theme-toggle-faq,
.home-page .theme-toggle {
  color: var(--ui-text-2) !important;
  background: var(--ui-surface-2) !important;
  border-color: var(--ui-border-strong) !important;
  box-shadow: 0 6px 18px rgba(32, 20, 44, .12);
}
.faq-page .faq-item { border-color: var(--ui-border) !important; }
.faq-page .faq-q { color: var(--ui-text) !important; }
.faq-page .faq-q:hover { color: var(--ui-accent) !important; }
.faq-page .faq-icon,
.faq-page .section-label { color: var(--ui-accent) !important; }
.faq-page .faq-a strong { color: var(--ui-text) !important; }
.faq-page .faq-a a,
.faq-page a { color: var(--ui-accent) !important; }
.faq-page .note {
  color: var(--ui-text-3) !important;
  background: var(--ui-surface-2) !important;
  border-color: var(--ui-border) !important;
}
.faq-page .note strong { color: var(--ui-accent) !important; }
.faq-page .back { color: var(--ui-text-3) !important; }

/* Semantic inline remnants mapped to the shared palette. */
.app-page [style*="background:#fff0f0"],
.app-page [style*="background: #fff0f0"] {
  background: var(--ui-danger-bg) !important;
  border-color: var(--ui-danger-border) !important;
}
.app-page [style*="background:#f0fbf4"],
.app-page [style*="background: #f0fbf4"] {
  background: var(--ui-success-bg) !important;
  border-color: var(--ui-success-border) !important;
}
.app-page [style*="background:#fff8ee"],
.app-page [style*="background: #fff8ee"] {
  background: var(--ui-warning-bg) !important;
  border-color: var(--ui-warning-border) !important;
}
.app-page [style*="background:#f0f8ff"],
.app-page [style*="background: #f0f8ff"] {
  background: var(--ui-info-bg) !important;
  border-color: var(--ui-info-border) !important;
}

html { background: var(--ui-page) !important; }

/* ══════════════════════════════════════════════════════
   CURRENT BETA CLEANUP — Plan Ahead removed from production
   ══════════════════════════════════════════════════════ */
.app-page .tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.app-page .theme-input::placeholder { color: var(--ui-text-4); opacity: 1; }
.app-page .modal-close-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; border-radius:9px;
  color:var(--ui-text); background:var(--ui-surface-3);
  border:1px solid var(--ui-border); cursor:pointer; font-size:16px;
}
.app-page .modal-close-btn:hover { border-color:var(--ui-border-strong); color:var(--ui-accent-strong); }
@media (max-width: 600px) {
  .app-page .tabs { grid-template-columns: repeat(4, minmax(82px, 1fr)); overflow-x:auto; }
}


/* ---------- Build 86C: cohesive daily reading ---------- */
.app-page .daily-primary-summary {
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--reading-color) 46%, var(--ui-border));
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--reading-color) 24%, transparent), transparent 42%),
    linear-gradient(145deg, var(--ui-surface-2), var(--ui-surface));
  box-shadow: var(--ui-shadow);
}
.app-page .daily-summary-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.app-page .daily-summary-item {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  color: var(--ui-text);
  background: color-mix(in srgb, var(--ui-surface-3) 72%, transparent);
  text-align: left;
}
.app-page button.daily-summary-item {
  width: 100%;
  font: inherit;
  cursor: pointer;
}
.app-page button.daily-summary-item:hover { border-color: var(--ui-accent); }
.app-page .daily-summary-label,
.app-page .also-aligned-kind,
.app-page .daily-summary-why-title {
  margin-bottom: 8px;
  color: var(--ui-accent);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
}
.app-page .daily-summary-color-row,
.app-page .daily-summary-crystal-row,
.app-page .also-aligned-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.app-page .daily-summary-swatch {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border: 3px solid rgba(255,255,255,.78);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.app-page .daily-summary-stone,
.app-page .also-aligned-stone {
  width: 54px;
  height: 58px;
  flex: 0 0 54px;
  border: 1px solid color-mix(in srgb, var(--stone-color) 55%, white);
  border-radius: 46% 54% 50% 42% / 48% 44% 56% 52%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.45), transparent 24%),
    radial-gradient(circle at 48% 42%, var(--stone-color), color-mix(in srgb, var(--stone-color) 56%, #05050c) 76%);
  box-shadow: 0 5px 14px rgba(0,0,0,.28), inset 0 1px 6px rgba(255,255,255,.18);
}
.app-page .daily-summary-name { color: var(--ui-text); font-size: 22px; line-height: 1.08; }
.app-page .daily-summary-detail,
.app-page .also-aligned-detail { margin-top: 4px; color: var(--ui-text-3); font-size: 11px; line-height: 1.45; }
.app-page .daily-summary-why {
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--ui-surface-3);
  color: var(--ui-text-2);
  font-size: 12px;
  line-height: 1.6;
}
.app-page .also-aligned-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.app-page .also-aligned-item {
  min-width: 0;
  padding: 12px;
  color: var(--ui-text);
  background: var(--ui-surface-2);
  border: 1px solid var(--ui-border);
  border-radius: 13px;
  text-align: left;
}
.app-page button.also-aligned-item { width: 100%; font: inherit; cursor: pointer; }
.app-page button.also-aligned-item:hover { border-color: var(--ui-accent); }
.app-page .also-aligned-swatch { width: 38px; height: 38px; flex: 0 0 38px; border: 2px solid rgba(255,255,255,.68); border-radius: 50%; }
.app-page .also-aligned-stone { width: 38px; height: 42px; flex-basis: 38px; }
.app-page .also-aligned-name { color: var(--ui-text); font-size: 17px; line-height: 1.1; }

/* ---------- Build 86C: authoritative dark surface layering ---------- */
[data-theme="dark"] .app-page .today-col-left > .section { background: #191225 !important; }
[data-theme="dark"] .app-page .today-col-right > .section { background: #211832 !important; }
[data-theme="dark"] .app-page #connections-section { background: #291d3c !important; }
[data-theme="dark"] .app-page #tab-chart .theme-panel:nth-of-type(even) { background: #211832 !important; }
[data-theme="dark"] .app-page #chart-summary { background: linear-gradient(145deg,#2b1f40,#1b1429) !important; }
[data-theme="dark"] .app-page .stash-group { background: #181222 !important; }
[data-theme="dark"] .app-page .stash-piece-row-alt { background: #241a35 !important; }
[data-theme="dark"] .app-page .crystal-card { background: linear-gradient(145deg,#1b1428,#241a35) !important; }
[data-theme="dark"] .app-page :is(#modal-content,#add-modal-content) { background: #211832 !important; }

@media (max-width: 520px) {
  .app-page .daily-summary-pair,
  .app-page .also-aligned-grid { grid-template-columns: 1fr; }
  .app-page .daily-primary-summary { padding: 14px; }
}

/* ---------- Build 86D: dark-mode contrast correction ---------- */
[data-theme="dark"] .app-page {
  --ui-page: #07050d;
  --ui-shell: #0f0a17;
  --ui-surface: #181120;
  --ui-surface-2: #22172f;
  --ui-surface-3: #2d1f3d;
  --ui-input: #120c1a;
  --ui-text: #f7f0f8;
  --ui-text-2: #e1d6e7;
  --ui-text-3: #c5b6ce;
  --ui-text-4: #a898b2;
  --ui-border: #463357;
  --ui-border-strong: #684b7f;
  --ui-divider: #352640;
  --ui-accent: #d9b9f5;
  --ui-accent-strong: #eddcff;
  --ui-accent-soft: #342247;
}

/* Date controls: keep the whole control group inside the dark surface system. */
[data-theme="dark"] .app-page .date-picker-row {
  background: linear-gradient(145deg,#191122,#22172f) !important;
  border-color: #4a365d !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.28) !important;
}
[data-theme="dark"] .app-page :is(.day-nav-btn,.today-btn) {
  color: #eadcff !important;
  background: #35234a !important;
  border-color: #6c5083 !important;
}
[data-theme="dark"] .app-page :is(.day-nav-btn,.today-btn):hover {
  color: #fff !important;
  background: #46305f !important;
  border-color: #9b78b5 !important;
}
[data-theme="dark"] .app-page .date-input {
  color: #f7f0f8 !important;
  background: #120c1a !important;
  border-color: #684b7f !important;
  color-scheme: dark;
}

/* Collective-reading invitation: dark lavender, never a white card in dark mode. */
[data-theme="dark"] .app-page #personalize-nudge {
  color: #f7f0f8 !important;
  background: linear-gradient(145deg,#28183a 0%,#1d1830 58%,#172033 100%) !important;
  border-color: #684b7f !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.32) !important;
}
[data-theme="dark"] .app-page #personalize-nudge > div:first-of-type {
  color: #e3c5ff !important;
}
[data-theme="dark"] .app-page #personalize-nudge p,
[data-theme="dark"] .app-page #personalize-nudge p strong,
[data-theme="dark"] .app-page #personalize-nudge > div:nth-of-type(2) > div,
[data-theme="dark"] .app-page #personalize-nudge > div:nth-of-type(2) > div > span:last-child {
  color: #ddd1e5 !important;
  opacity: 1 !important;
}
[data-theme="dark"] .app-page #personalize-nudge > div:nth-of-type(2) > div > span:first-child {
  color: #160d22 !important;
  background: #d9b9f5 !important;
}
[data-theme="dark"] .app-page #personalize-nudge > button {
  color: #c8b5d2 !important;
}
[data-theme="dark"] .app-page #personalize-nudge > div:last-of-type > button:last-child {
  color: #e3c5ff !important;
  background: rgba(217,185,245,.07) !important;
  border-color: #76558f !important;
}

/* Transit list: retain readable hierarchy without stark or washed-out rows. */
[data-theme="dark"] .app-page .transit-row {
  color: #f7f0f8 !important;
  background: #241832 !important;
  border-color: #523b68 !important;
}
[data-theme="dark"] .app-page .transit-planet { color: #ddd1e5 !important; }
[data-theme="dark"] .app-page .transit-sign { color: #f7f0f8 !important; }

/* Your Chart This Day: replace the white strips with layered violet rows. */
[data-theme="dark"] .app-page #connections-section {
  color: #f7f0f8 !important;
  background: #21152f !important;
  border-color: #4e3764 !important;
}
[data-theme="dark"] .app-page #connections-section .connections-box {
  padding: 0 !important;
  color: #f7f0f8 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
[data-theme="dark"] .app-page #connections-section .connection-row {
  color: #f7f0f8 !important;
  background: linear-gradient(145deg,#2a1d3a,#241831) !important;
  border-color: #5d4373 !important;
  box-shadow: 0 7px 18px rgba(0,0,0,.18) !important;
}
[data-theme="dark"] .app-page #connections-section .conn-planet {
  color: #e2d7e8 !important;
}
[data-theme="dark"] .app-page #connections-section .conn-sign {
  color: #d9b9f5 !important;
}
[data-theme="dark"] .app-page #connections-section .conn-note {
  color: #bfaecb !important;
}

/* Supporting dark notices and source disclosure. */
[data-theme="dark"] .app-page #accuracy-note {
  color: #e7d5ae !important;
  background: #2a2118 !important;
  border-color: #725b31 !important;
}
[data-theme="dark"] .app-page #reading-mode-banner {
  color: #e4d8ea !important;
  background: #20152e !important;
  border-color: #573d6e !important;
}