:root {
  color-scheme: dark;
  --bg: #14051f;
  --bg-2: #25073b;
  --card: #fffbff;
  --card-2: #f8f2fb;
  --ink: #281735;
  --light: #fff8ff;
  --muted: #887895;
  --violet: #6a0dad;
  --violet-dark: #240637;
  --gold: #d4af37;
  --gold-soft: #f0dfaa;
  --line: rgba(212, 175, 55, 0.28);
  --shadow: 0 22px 50px rgba(6, 1, 13, 0.38);
  --sky-night-deep: #101a32;
  --sky-night: #172746;
  --sky-surface: #20375c;
  --sky-surface-soft: #29476f;
  --sky-blue: #709ed2;
  --sky-blue-light: #9cc7eb;
  --sky-blue-soft: #bedcf2;
  --sky-glow: rgba(126, 177, 224, 0.22);
  --sky-violet-blue: #536aa4;
  --sky-indigo-soft: #394d82;
  --sky-text: #eef4f8;
  --sky-muted: #adc0d5;
  --focus-ring: #b9dfff;
}

.day-perspectives { --western: #8fd1ff; --jyotish: #c9b5ff; --numerology: #6fe0d0; --shared: #f0cf72; margin-top: 14px; padding: 16px; border: 1px solid rgba(240,207,114,.22); border-radius: 18px; background: rgba(8,17,32,.72); }
.day-perspectives[hidden] { display: none; }
.day-perspectives-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.day-perspectives-context { color:var(--shared); font-size:11px; font-weight:750; text-align:right; }
.day-perspectives-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; margin-top:14px; padding:4px; border:1px solid rgba(255,255,255,.1); border-radius:13px; }
.day-perspectives-tabs button { min-width:0; min-height:44px; padding:7px 4px; border:1px solid transparent; border-radius:9px; color:#b8c5d2; background:transparent; font-size:12px; font-weight:800; cursor:pointer; overflow-wrap:anywhere; }
.day-perspectives-tabs button[data-day-perspective="western"] { color:var(--western); }
.day-perspectives-tabs button[data-day-perspective="jyotish"] { color:var(--jyotish); }
.day-perspectives-tabs button[data-day-perspective="numerology"] { color:var(--numerology); }
.day-perspectives-tabs button[data-day-perspective="compare"] { color:var(--shared); }
.day-perspectives-tabs button[aria-selected="true"] { border-color:currentColor; background:rgba(255,255,255,.08); }
.day-perspectives-panel { margin-top:12px; }
.day-perspective-card { padding:14px; border:1px solid rgba(255,255,255,.14); border-radius:14px; background:rgba(255,255,255,.035); }
.day-perspective-card[data-system="western"] { border-color:rgba(143,209,255,.34); background:rgba(143,209,255,.045); }
.day-perspective-card[data-system="jyotish"] { border-color:rgba(201,181,255,.34); background:rgba(201,181,255,.045); }
.day-perspective-card[data-system="numerology"] { border-color:rgba(111,224,208,.34); background:rgba(111,224,208,.045); }
.day-perspective-system,.day-perspective-scope { display:block; color:#b9c7d5; font-size:11px; font-weight:750; }
.day-perspective-scope { margin-top:3px; color:var(--jyotish); }
.day-perspective-card h3 { margin-top:7px; color:#f8f4ea; font-size:17px; }
.day-perspective-card > p { margin-top:10px; color:#dbe5ed; line-height:1.55; }
.day-perspective-cue { padding:10px; border-left:3px solid var(--shared); background:rgba(240,207,114,.06); }
.day-perspective-cue strong { display:block; color:var(--shared); font-size:11px; }
.day-perspective-partial { padding:8px; border:1px solid rgba(201,181,255,.3); border-radius:9px; color:#e7dcff !important; }
.day-perspective-card.is-unavailable { border-style:dashed; }
.day-perspective-details,.day-perspective-comparison details { margin-top:12px; border-top:1px solid rgba(255,255,255,.11); }
.day-perspective-details summary,.day-perspective-comparison summary { min-height:44px; padding:12px 0 6px; color:#9cc7eb; cursor:pointer; font-size:12px; font-weight:800; }
.day-perspective-details dl { display:grid; gap:7px; }
.day-perspective-details dl div { padding:8px; border-radius:8px; background:rgba(255,255,255,.04); overflow-wrap:anywhere; }
.day-perspective-details dt { color:#9aaabc; font-size:10px; text-transform:uppercase; }
.day-perspective-details dd { margin-top:3px; color:#e1e8ee; font-size:12px; }
.day-perspective-compare { display:grid; gap:9px; }
.day-perspective-comparison { padding:12px; border:1px solid rgba(240,207,114,.22); border-radius:13px; }
.day-perspective-comparison h3 { color:var(--shared); }
.day-perspective-comparison article { margin-top:9px; padding:9px; border-radius:9px; background:rgba(240,207,114,.045); }
@media (max-width:480px) { .day-perspectives { padding:14px; } .day-perspectives-head { display:grid; } .day-perspectives-context { text-align:left; } .day-perspectives-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); } }

* { box-sizing: border-box; }

html {
  scroll-padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 80% 8%, rgba(212, 175, 55, 0.16), transparent 26%),
    radial-gradient(circle at 15% 20%, rgba(106, 13, 173, 0.42), transparent 30%),
    linear-gradient(180deg, #10031a 0%, #1a0528 48%, #2b0842 100%);
  color: var(--light);
  font-family: "Segoe UI", Arial, sans-serif;
}

button, textarea, input, select { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }

button {
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}

button:active:not(:disabled) {
  transform: translateY(1px);
}

button:disabled,
button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .52;
  box-shadow: none;
}

button[aria-busy="true"] {
  cursor: progress;
  opacity: .72;
}

button:focus-visible,
textarea:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.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;
}

body.has-v2-navigation {
  background:
    radial-gradient(circle at 50% 8%, rgba(112, 158, 210, .18), transparent 34%),
    linear-gradient(180deg, var(--sky-night-deep) 0%, #17213f 46%, #25103b 100%);
}

.app-shell {
  width: min(760px, 100%);
  margin: 0 auto;
  padding-top: max(14px, env(safe-area-inset-top, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  padding-left: max(12px, env(safe-area-inset-left, 0px));
}

.hero {
  min-height: 315px;
  display: grid;
  align-content: space-between;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(160deg, rgba(42, 7, 65, 0.96), rgba(17, 4, 28, 0.96));
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(156, 199, 235, .08);
  border-radius: 14px;
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 26px;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 34%, rgba(212,175,55,.32) 35%, transparent 36%),
    repeating-conic-gradient(from 0deg, rgba(212,175,55,.35) 0 4deg, transparent 4deg 30deg);
  opacity: .7;
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.brand-wordmark {
  position: relative;
  color: #f7f3e9;
  font-family: Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .08em;
}

.brand-wordmark span {
  color: var(--gold);
  margin-left: .16em;
}

.hero-status {
  display: flex;
  align-items: center;
  gap: 7px;
  position: relative;
  z-index: 1;
  color: var(--sky-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}

.hero-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(228, 189, 75, .65);
}

.hero-status-separator { color: rgba(228, 189, 75, .58); }

.eyebrow {
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: 4px;
}

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0;
}

h1 { font-size: 31px; line-height: 1.08; }
h2 { font-size: 24px; line-height: 1.15; color: var(--violet-dark); }
h3 { font-size: 18px; color: var(--violet-dark); }

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 430px;
  color: #f6eafc;
  font-size: 17px;
}

.hero-purpose {
  position: relative;
  z-index: 1;
  max-width: 38ch;
  margin: 8px 0 0;
  color: #f2ead4;
  font-size: 14px;
  line-height: 1.5;
}

.hero-actions, .button-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.gold-button, .ghost-button {
  min-height: 46px;
  border-radius: 8px;
  padding: 0 15px;
  font-weight: 800;
}

.hero-onboarding {
  max-width: 42ch;
  margin: .55rem 0 0;
  color: var(--gold-soft);
  line-height: 1.45;
}

.private-review-view {
  min-height: 0;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

.private-review-page-header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1rem;
}

.private-review-page-header h2 { margin: 0; }
.private-review-back { min-height: 44px; white-space: nowrap; }

.private-jyotish-entry,
.natal-readiness {
  margin-top: .9rem;
  padding: .85rem;
  border: 1px solid rgba(214, 177, 85, .2);
  border-radius: 13px;
  background: rgba(255, 255, 255, .035);
}

.private-jyotish-entry h3,
.natal-readiness strong { display: block; margin: 0 0 .35rem; }
.private-jyotish-entry p { margin: .25rem 0 .7rem; }
.natal-readiness p { margin: 0; }

.private-jyotish-disclosure > summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--gold-soft);
  font-weight: 800;
}

.private-jyotish-disclosure[open] > summary { margin-bottom: .65rem; }

@media (max-width: 560px) {
  .private-review-page-header { align-items: start; }
  .private-review-page-header h2 { font-size: 1.35rem; }
  .private-jyotish-review-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .private-jyotish-review-tabs .ghost-button { padding-inline: 8px; min-width: 0; }
}

.private-jyotish-review {
  margin-top: 1rem;
  border: 1px solid rgba(214, 177, 85, .32);
  border-radius: 18px;
  padding: 1rem;
  background: rgba(25, 11, 45, .72);
}

.private-jyotish-review[hidden],
.private-jyotish-review-content[hidden] {
  display: none !important;
}

.private-jyotish-review.is-compact {
  padding: .8rem 1rem;
}

.private-jyotish-review.is-compact .private-jyotish-review-status {
  margin: 0 0 .65rem;
}

.private-jyotish-review-content {
  margin-top: 1rem;
  display: grid;
  gap: .85rem;
}

.private-jyotish-review-hero {
  display: grid;
  gap: .5rem;
  padding: .25rem 0 1rem;
}

.private-jyotish-review-hero h4 {
  margin: 0;
  font-size: clamp(1.25rem, 4vw, 1.65rem);
}

.private-jyotish-review-hero .gold-button {
  justify-self: start;
  margin-top: .35rem;
}

.private-jyotish-anchor-grid,
.private-jyotish-layer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
}

.private-jyotish-anchor {
  display: grid;
  gap: .2rem;
  padding: .7rem;
  border: 1px solid rgba(214, 177, 85, .22);
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
}

.private-jyotish-anchor span { color: var(--gold-soft); }
.private-jyotish-anchor small { color: var(--muted); }
.private-jyotish-mode-helper { margin: -.35rem 0 .8rem; }
.private-jyotish-layer-grid article { padding: .6rem; border-radius: 10px; background: rgba(255, 255, 255, .035); }
.private-jyotish-layer-grid p { margin: .3rem 0 0; }
.private-jyotish-term-help { margin-top: .8rem; }

.operator-tools {
  margin-top: 1rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  padding: .8rem 1rem;
}

.operator-tools > summary { cursor: pointer; color: var(--muted); font-weight: 700; }

.private-jyotish-review-header,
.private-jyotish-review-section {
  border-top: 1px solid rgba(214, 177, 85, .18);
  padding-top: .8rem;
}

.private-jyotish-main-insight-label {
  color: var(--gold, #e7c873);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: .35rem 0 .25rem;
}

.private-jyotish-reading-copy.is-primary {
  font-weight: 550;
}

.private-jyotish-reading-section h5,
.private-jyotish-reflection h5 {
  margin: 0 0 .45rem;
  color: var(--gold-soft);
  font-size: .95rem;
  font-weight: 650;
}

.private-jyotish-supporting,
.private-jyotish-evidence {
  margin-top: .65rem;
  border-top: 1px solid rgba(231, 200, 115, .2);
  padding-top: .45rem;
}

.private-jyotish-supporting summary,
.private-jyotish-evidence summary {
  cursor: pointer;
  color: var(--muted, #b8b4c9);
  font-size: .88rem;
}

.private-jyotish-reflection {
  color: var(--muted, #b8b4c9);
  font-style: italic;
  margin: 1rem 0 0;
}

.private-jyotish-review-header h4,
.private-jyotish-review-section h4 {
  margin: 0 0 .45rem;
}

.private-jyotish-review-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: .8rem;
}

.private-jyotish-review-tabs .is-active {
  border-color: var(--gold);
  color: var(--gold);
}

.private-jyotish-review-tabs [role="tab"]:focus-visible {
  outline: 3px solid rgba(156, 199, 235, .72);
  outline-offset: 3px;
}

.private-jyotish-reflection {
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-style: normal;
}

.private-jyotish-reflection ul,
.private-jyotish-evidence ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.private-jyotish-reflection li + li,
.private-jyotish-evidence li + li { margin-top: .4rem; }

.private-jyotish-technical { display: grid; gap: .55rem; margin: .4rem 0 .8rem; }
.private-jyotish-technical div { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(0, 1.2fr); gap: .7rem; }
.private-jyotish-technical dt { color: var(--muted); }
.private-jyotish-technical dd { margin: 0; overflow-wrap: anywhere; }

.private-jyotish-reading-section + .private-jyotish-reading-section {
  margin-top: .8rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: .8rem;
}

@media (max-width: 560px) {
  .private-jyotish-anchor-grid,
  .private-jyotish-layer-grid { grid-template-columns: 1fr; }
}

.gold-button {
  border: 0;
  background: var(--gold);
  color: #1c0926;
}

.ghost-button {
  border: 1px solid rgba(212, 175, 55, 0.48);
  background: rgba(255, 255, 255, 0.06);
  color: var(--gold-soft);
}

.nav-toggle {
  display: none;
  min-height: 44px;
  width: 100%;
  margin: 10px 0 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(20, 5, 31, 0.88);
  color: var(--gold-soft);
  font-weight: 900;
  position: sticky;
  top: max(0px, env(safe-area-inset-top, 0px));
  z-index: 6;
  backdrop-filter: blur(12px);
}

.nav-toggle span:first-child {
  display: inline-grid;
  place-items: center;
  width: 24px;
  margin-right: 6px;
}

.bottom-nav {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin: 10px 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(20, 5, 31, 0.82);
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(12px);
}

.nav-item {
  min-height: 42px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #cdb9db;
  font-size: 13px;
}

.nav-item.is-active {
  background: var(--gold);
  color: #1c0926;
  font-weight: 900;
}

.v2-bottom-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  margin: 10px 0;
  padding: 5px;
  border: 1px solid rgba(156, 199, 235, .18);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(32, 55, 92, .94), rgba(16, 26, 50, .98));
  position: sticky;
  top: 0;
  z-index: 7;
  box-shadow: 0 -10px 32px rgba(8, 16, 34, .3), inset 0 1px rgba(240, 223, 170, .08);
  backdrop-filter: blur(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

/* Calendar is a quick action into Path, not a fourth product area. */
body.has-v2-navigation .v2-bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.v2-bottom-nav::before {
  content: "";
  position: absolute;
  inset: 0 16px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(156, 199, 235, .5), rgba(212, 175, 55, .38), transparent);
  pointer-events: none;
}

.v2-bottom-nav[hidden] { display: none; }
#navToggle[hidden],
#mainNavigation[hidden],
#v2AdminEntry[hidden] { display: none !important; }

.v2-nav-item {
  position: relative;
  min-width: 0;
  min-height: 52px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  padding: 5px 2px 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--sky-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.v2-nav-item > span:first-child {
  min-height: 22px;
  color: var(--sky-blue-light);
  font-size: 18px;
  filter: saturate(.72);
}

.v2-nav-item::after {
  content: "";
  position: absolute;
  right: 35%;
  bottom: 3px;
  left: 35%;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--sky-blue-light), var(--gold-soft));
  box-shadow: 0 0 8px rgba(156, 199, 235, .34);
  opacity: 0;
}

.v2-nav-item.is-active {
  background: radial-gradient(circle at 50% 36%, rgba(156, 199, 235, .16), transparent 68%);
  color: #f7f3e9;
  box-shadow: none;
  font-weight: 900;
}

.v2-nav-item.is-active > span:first-child {
  color: var(--sky-blue-soft);
  filter: none;
  text-shadow: 0 0 12px rgba(156, 199, 235, .42);
}

.v2-nav-item.is-active::after {
  opacity: 1;
}

@media (hover: hover) {
  .v2-nav-item:hover:not(.is-active) {
    background: rgba(112, 158, 210, .08);
    color: var(--sky-text);
  }
}

.more-navigation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-active-section="more"] #moreView .more-navigation-grid .mini-card {
  min-height: 78px;
  border-color: rgba(156, 199, 235, .24);
  background: linear-gradient(145deg, rgba(41, 71, 111, .9), rgba(23, 39, 70, .96));
  color: var(--sky-text);
  box-shadow: 0 12px 28px rgba(8, 16, 34, .2);
}

body[data-active-section="more"] #moreView .more-navigation-grid .mini-card .mini-icon {
  color: var(--sky-blue-soft);
}

@media (hover: hover) {
  body[data-active-section="more"] #moreView .more-navigation-grid .mini-card:hover {
    border-color: rgba(156, 199, 235, .52);
    background: linear-gradient(145deg, rgba(49, 82, 126, .96), rgba(27, 47, 83, .98));
  }
}

body[data-active-section="more"] #moreView .more-navigation-grid .mini-card:active {
  border-color: rgba(212, 175, 55, .46);
  background: linear-gradient(145deg, var(--sky-surface), var(--sky-night));
}

.nav-toggle:focus-visible,
.nav-item:focus-visible {
  outline: 3px solid rgba(212, 175, 55, .58);
  outline-offset: 2px;
}

.view { display: none; }
.view.is-active {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  scroll-margin-top: calc(76px + env(safe-area-inset-top, 0px));
}

.view.is-active.is-route-entering {
  animation: routeViewEnter 220ms cubic-bezier(.22, .75, .24, 1) both;
}

.card, .mini-card, .level-card {
  border: 1px solid rgba(106, 13, 173, 0.14);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.card p { line-height: 1.45; }
.muted { color: var(--muted); line-height: 1.45; }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.progress-orb {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--violet-dark);
  font-weight: 900;
}

.progress-line {
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: #eee4f4;
}

.progress-line span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--violet), var(--gold));
  transition: width .35s ease;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.stats-grid div {
  min-height: 74px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 10px;
  border: 1px solid #eadff0;
  border-radius: 8px;
  background: var(--card-2);
}

.stats-grid strong { color: var(--violet-dark); font-size: 18px; }
.stats-grid span { color: var(--muted); font-size: 12px; }

.cosmic-rhythm-card {
  background:
    radial-gradient(circle at 92% 12%, rgba(212, 175, 55, .16), transparent 28%),
    linear-gradient(160deg, rgba(255, 251, 255, .98), rgba(248, 242, 251, .98));
}

.cosmic-score {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 1px solid rgba(212, 175, 55, .6);
  border-radius: 50%;
  color: var(--violet-dark);
  background:
    radial-gradient(circle, rgba(242, 193, 78, .28), transparent 56%),
    conic-gradient(from 30deg, rgba(75, 46, 131, .16), rgba(212, 175, 55, .34), rgba(75, 46, 131, .16));
  box-shadow: 0 10px 28px rgba(75, 46, 131, .16);
}

.cosmic-score span {
  font-weight: 900;
  font-size: 20px;
}

.cosmic-score small {
  margin-top: -14px;
  color: var(--muted);
  font-weight: 800;
}

.cosmic-stats strong {
  font-size: 17px;
}

.cosmic-bars {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.cosmic-bars div {
  display: grid;
  grid-template-columns: 78px 1fr 42px;
  align-items: center;
  gap: 8px;
  color: var(--violet-dark);
  font-size: 13px;
  font-weight: 800;
}

.cosmic-bars b {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(75, 46, 131, .12);
}

.cosmic-bars i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--violet), var(--gold));
  transition: width .35s ease;
}

.cosmic-bars em {
  color: var(--muted);
  font-style: normal;
  text-align: right;
}

.cosmic-history {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.cosmic-history span {
  padding: 7px 9px;
  border: 1px solid rgba(212, 175, 55, .32);
  border-radius: 999px;
  background: rgba(255, 250, 240, .78);
  color: var(--violet-dark);
  font-size: 12px;
  font-weight: 800;
}

.discovery-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(212, 175, 55, .34);
  background:
    radial-gradient(circle at 92% 10%, rgba(212, 175, 55, .18), transparent 34%),
    linear-gradient(145deg, rgba(255, 252, 244, .98), rgba(247, 239, 251, .96));
}

.discovery-card::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  right: -58px;
  bottom: -66px;
  border: 1px solid rgba(75, 46, 131, .12);
  border-radius: 50%;
  pointer-events: none;
}

.discovery-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.discovery-card-head h2 {
  margin-top: 3px;
}

.focus-reaction {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(156, 199, 235, .18);
}

.focus-reaction > p { margin: 0; }
.focus-reaction > p:first-child { color: rgba(247, 248, 255, .78); font-size: .88rem; font-weight: 700; }
.focus-reaction-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.focus-reaction-actions button {
  min-height: 44px;
  padding: 7px;
  border: 1px solid rgba(156, 199, 235, .28);
  border-radius: 12px;
  background: rgba(156, 199, 235, .07);
  color: rgba(247, 248, 255, .82);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
}

.focus-reaction-actions button.is-selected {
  border-color: rgba(228, 189, 75, .75);
  background: rgba(228, 189, 75, .16);
  color: var(--gold-soft);
}

.focus-reaction-actions button:disabled { opacity: .58; }
.focus-reaction-status { min-height: 1.2em; color: rgba(247, 248, 255, .62); font-size: .78rem; }

.orbis-memory {
  border-top: 1px solid rgba(156, 199, 235, .16);
  padding-top: 12px;
}
.orbis-memory[hidden] { display: none; }
.orbis-memory summary {
  display: flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}
.orbis-memory summary::-webkit-details-marker { display: none; }
.orbis-memory summary > span:last-child { display: grid; gap: 2px; }
.orbis-memory summary strong { color: var(--ink); }
.orbis-memory summary small { color: var(--muted); line-height: 1.35; }
.orbis-memory-body {
  display: grid;
  gap: 7px;
  margin: 12px 0 0 28px;
  padding: 11px 12px;
  border-radius: 10px;
  background: rgba(156, 199, 235, .06);
}
.orbis-memory-body p { margin: 0; }
.orbis-memory-body time { color: var(--muted); font-size: .78rem; }

.discovery-symbol,
.journey-score {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  border: 1px solid rgba(212, 175, 55, .5);
  border-radius: 50%;
  background: var(--violet-dark);
  color: var(--gold);
  font-weight: 900;
}

.discovery-lead {
  margin: 4px 0 0;
  color: var(--ink);
  line-height: 1.58;
}

.focus-step {
  display: grid;
  gap: 5px;
  margin-top: 4px;
  padding: 12px 14px;
  border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
  background: rgba(255, 255, 255, .62);
}

.focus-step span {
  color: var(--violet-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.focus-step p {
  margin: 0;
  line-height: 1.5;
}

.daily-answer-card {
  display: grid;
  gap: 12px;
}

.daily-answer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.daily-answer-head h2 { margin-bottom: 0; }

.daily-answer-symbol {
  color: var(--gold, #d4af37);
  font-size: 1.35rem;
  line-height: 1;
}

.daily-answer-hint,
.daily-answer-after {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.daily-answer-label {
  color: var(--violet-dark);
  font-size: .82rem;
  font-weight: 800;
}

.daily-answer-after {
  font-size: .8rem;
}

.daily-focus-status {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}

.daily-focus-status.is-complete {
  color: #557c43;
}

.daily-completion-note {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--gold, #d4af37);
  background: rgba(212, 175, 55, .1);
  color: var(--violet-dark);
  font-size: .86rem;
  line-height: 1.5;
}

.daily-completion-note p { margin: 0; }

.technical-disclosure {
  border-top: 1px solid rgba(156, 199, 235, .2);
  border-bottom: 1px solid rgba(156, 199, 235, .2);
}

.technical-disclosure + .technical-disclosure {
  border-top: 0;
}

.technical-disclosure summary {
  cursor: pointer;
  padding: 11px 2px;
  color: var(--sky-blue-light, #9cc7eb);
  font-size: .86rem;
  font-weight: 800;
  list-style-position: inside;
}

.technical-disclosure[open] summary {
  color: var(--gold-soft, #f0cf66);
}

.technical-disclosure > div {
  padding: 0 0 10px;
}

.discovery-actions,
.journey-action {
  position: relative;
  z-index: 1;
}

.journey-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin: 5px 0;
}

.journey-explainer {
  margin: -2px 0 4px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.45;
}

.journey-day {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid rgba(75, 46, 131, .16);
  border-radius: 50%;
  background: rgba(255, 255, 255, .65);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.journey-day.is-complete {
  border-color: rgba(212, 175, 55, .8);
  background: linear-gradient(145deg, var(--violet-dark), var(--violet));
  color: #fff8e5;
  box-shadow: 0 6px 14px rgba(47, 20, 73, .16);
}

.journey-day.is-current {
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .2);
  color: var(--violet-dark);
}

.weekly-story-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 4px 0 2px;
}

.weekly-story-meta span {
  padding: 6px 9px;
  border: 1px solid rgba(75, 46, 131, .13);
  border-radius: 999px;
  background: rgba(255, 255, 255, .68);
  color: var(--violet-dark);
  font-size: 12px;
  font-weight: 800;
}

.quick-grid, .level-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.daily-cycle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.daily-cycle article {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #eadff0;
  border-radius: 8px;
  background: var(--card-2);
}

.morning-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(156, 199, 235, .2);
  border-radius: 12px;
  background: rgba(156, 199, 235, .06);
}

.morning-mode-tabs button {
  min-height: 38px;
  padding: 7px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .82rem;
  font-weight: 750;
  cursor: pointer;
}

.morning-mode-tabs button[aria-selected="true"] {
  background: rgba(179, 136, 255, .2);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(198, 166, 255, .24);
}

.response-tone-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 14px;
  padding: 4px;
  border: 1px solid rgba(156, 199, 235, .2);
  border-radius: 12px;
  background: rgba(156, 199, 235, .06);
}

.response-tone-tabs button {
  min-height: 40px;
  padding: 7px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .82rem;
  font-weight: 750;
  cursor: pointer;
}

.response-tone-tabs button[aria-selected="true"] {
  background: rgba(179, 136, 255, .2);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(198, 166, 255, .24);
}

.morning-mode-hint { margin: 0; font-size: .86rem; }
.morning-mode-saved { color: var(--muted); line-height: 1.4; }
.morning-free-field { display: none; }
.morning-ritual[data-morning-mode="quick"] .morning-deep-only { display: none; }
.morning-ritual[data-morning-mode="free"] .morning-structured-field { display: none; }
.morning-ritual[data-morning-mode="free"] .morning-free-field { display: grid; }

@media (max-width: 420px) {
  .morning-mode-tabs, .response-tone-tabs { grid-template-columns: 1fr; }
}

.mini-card, .level-card {
  min-height: 96px;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 14px;
  text-align: left;
  color: var(--ink);
}

.mini-card { font-size: 16px; }

.mini-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(212, 175, 55, .55);
  border-radius: 50%;
  color: var(--gold);
  background: var(--violet-dark);
  font-size: 18px;
}

.admin-entry {
  grid-column: 1 / -1;
  min-height: 78px;
  border-color: rgba(212, 175, 55, .42);
  background: linear-gradient(135deg, #fffaf0, #f8f2fb);
}

.mini-card span, .level-card span {
  font-size: 14px;
  font-weight: 800;
}

.identity-card {
  gap: 16px;
}

.natal-timezone-confirmation {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(212, 175, 55, .52);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 250, 240, .96), rgba(248, 242, 251, .94));
  color: var(--violet-dark);
}

.natal-timezone-confirmation h3,
.natal-timezone-confirmation p { margin: 0; }
.natal-timezone-value { font-weight: 800; font-size: 18px; }
.natal-timezone-feedback { min-height: 1.2em; font-weight: 700; }

.identity-progress,
.identity-flow {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(212, 175, 55, .32);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 250, 240, .9), rgba(248, 242, 251, .9));
  color: var(--violet-dark);
}

.identity-progress strong,
.identity-flow h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0;
}

.identity-progress-bar {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(47, 20, 73, .12);
}

.identity-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--violet), var(--gold));
}

.identity-progress ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.identity-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.identity-field-button {
  min-height: 42px;
  border: 1px solid rgba(47, 20, 73, .16);
  border-radius: 10px;
  background: rgba(255, 255, 255, .72);
  color: var(--violet-dark);
  font-weight: 800;
}

.identity-field-button.is-active {
  border-color: rgba(212, 175, 55, .85);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .14);
}

.identity-flow input {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  border: 1px solid rgba(47, 20, 73, .18);
  border-radius: 10px;
  padding: 0 12px;
  background: rgba(255, 255, 255, .86);
  color: var(--violet-dark);
  font: inherit;
}

.location-settings-card {
  display: grid;
  gap: 14px;
  color: var(--ink);
}

.location-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.location-settings-head #mySkyTitle {
  max-width: 52%;
  color: var(--violet-dark);
  font-size: .95rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-align: right;
}

.location-settings-card #locationStatus,
.location-access-note {
  margin: 0;
  line-height: 1.5;
}

.location-settings-editor {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(47, 20, 73, .14);
}

.location-settings-editor[hidden],
.location-access-note[hidden] {
  display: none;
}

.location-editor-label {
  margin: 0;
  color: var(--violet-dark);
  font-size: .82rem;
  font-weight: 800;
}

.sky-context-bar {
  display: grid;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid rgba(156, 199, 235, .2);
  border-bottom: 1px solid rgba(156, 199, 235, .2);
}

.sky-location-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--sky-text);
  text-align: left;
}

.sky-location-indicator:hover #skyLocationIndicatorLabel,
.sky-location-indicator:focus-visible #skyLocationIndicatorLabel {
  color: #fff;
}

#skyLocationIndicatorLabel {
  min-width: 0;
  color: var(--sky-text);
  font-size: .98rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#skyLocationIndicatorMeta {
  min-width: 0;
  color: var(--sky-muted);
  font-size: .82rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#skyLocationIndicatorMeta[hidden],
.sky-location-action[hidden] {
  display: none;
}

.sky-location-action {
  margin-left: auto;
  color: var(--gold-soft);
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}

.location-mode-label {
  margin: 0;
  color: var(--gold-soft);
  font-size: .82rem;
  font-weight: 800;
}

.sky-scope-section {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(156, 199, 235, .16);
}

.sky-scope-section[hidden] {
  display: none;
}

.sky-scope-help {
  min-height: 2.7em;
  margin: 0;
  color: var(--sky-muted);
  font-size: .88rem;
  line-height: 1.45;
}

.my-sky-entry[hidden] {
  display: none;
}

.sky-scope-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sky-scope-toggle .identity-field-button {
  min-height: 44px;
  border-color: rgba(112, 158, 210, .25);
  background: rgba(32, 55, 92, .42);
  color: var(--sky-text);
  line-height: 1.25;
  white-space: normal;
}

.sky-scope-toggle .identity-field-button.is-active,
.sky-scope-toggle .identity-field-button[aria-pressed="true"] {
  border-color: rgba(212, 175, 55, .5);
  background: linear-gradient(145deg, rgba(190, 220, 242, .96), rgba(156, 199, 235, .9));
  color: var(--sky-night-deep);
  box-shadow: inset 0 -2px rgba(212, 175, 55, .5), 0 6px 18px rgba(112, 158, 210, .18);
}

.my-sky-summary {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 10px;
  padding: 10px;
  border-radius: 8px;
  background: var(--card-2);
  color: var(--ink);
  font-size: .94rem;
}

.my-sky-summary:empty {
  display: none;
}

.my-sky-summary span {
  color: var(--muted);
}

.my-sky-summary b {
  min-width: 0;
  overflow-wrap: anywhere;
}

.location-input-row {
  display: grid;
  gap: 6px;
}

.location-input-row span {
  color: var(--muted);
  font-size: .9rem;
}

.location-input-row input {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid rgba(47, 20, 73, .18);
  border-radius: 8px;
  background: #fff;
  color: var(--violet-dark);
}

.location-attribution {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .78rem;
}

.location-attribution a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.location-candidate-list {
  display: grid;
  gap: 8px;
}

.location-candidate-button {
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
}

.location-candidate-button:focus-visible,
.location-candidate-button:hover {
  border-color: rgba(212, 175, 55, .86);
}

.location-settings-card .gold-button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.message-box.sky-human-story {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid rgba(156, 199, 235, .3);
  border-radius: 8px;
  background: rgba(16, 26, 50, .72);
  color: var(--sky-text-strong, #f7f8ff);
  text-align: left;
}

.message-box.sky-human-story[hidden] { display: none; }

.sky-human-story .eyebrow { margin: 0; color: var(--gold-soft); }

.sky-human-essence {
  display: grid;
  gap: 4px;
}

.sky-human-essence > span,
.sky-human-resonance > strong,
.sky-human-action > strong {
  color: var(--sky-blue-light, #9cc7eb);
  font-size: .78rem;
  line-height: 1.3;
}

.sky-human-essence h3 {
  margin: 0;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sky-human-resonance,
.sky-human-action {
  display: grid;
  gap: 5px;
}

.sky-human-resonance p,
.sky-human-action p,
.sky-human-why p { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }

.sky-human-action {
  padding: 11px 12px;
  border-left: 3px solid var(--gold, #d4af37);
  background: rgba(212, 175, 55, .08);
}

.sky-human-question {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  border-left: 3px solid var(--sky-blue-light, #9cc7eb);
  background: rgba(156, 199, 235, .08);
}

.sky-human-question strong {
  color: #9cc7eb;
  font-size: .78rem;
  line-height: 1.3;
}

.sky-human-question p { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }

.sky-human-action > strong { color: var(--gold-soft); }

.sky-human-why,
.cosmogram-detail-disclosure,
.cosmogram-method-note {
  border-top: 1px solid rgba(156, 199, 235, .2);
}

.sky-human-why summary,
.cosmogram-detail-disclosure summary,
.cosmogram-method-note summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--sky-blue-light, #9cc7eb);
  font-weight: 800;
  cursor: pointer;
}

.sky-human-why summary:focus-visible,
.cosmogram-detail-disclosure summary:focus-visible,
.cosmogram-method-note summary:focus-visible {
  outline: 3px solid var(--sky-focus, #f2c14e);
  outline-offset: 3px;
}

.sky-human-why[open],
.cosmogram-detail-disclosure[open],
.cosmogram-method-note[open] { padding-bottom: 4px; }

.sky-human-why p + p,
.cosmogram-detail-disclosure p + p { margin-top: 7px; }

.sky-human-method { color: var(--sky-text-muted, rgba(247, 248, 255, .68)); font-size: .84rem; }

.identity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.identity-layer-card {
  display: grid;
  gap: 8px;
  padding: 13px;
  border: 1px solid rgba(212, 175, 55, .36);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 250, 240, .94), rgba(248, 242, 251, .94));
  color: var(--violet-dark);
}

.identity-layer-card h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0;
}

.identity-layer-card p {
  margin: 0;
  color: var(--ink);
  line-height: 1.45;
}

.identity-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.identity-meta span {
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(47, 20, 73, .08);
  color: var(--violet-dark);
  font-size: 11px;
  font-weight: 800;
}

.level-card.is-complete {
  border-color: rgba(212, 175, 55, .8);
}

.section-title {
  position: relative;
  padding: 10px 4px 12px;
}

.section-title h2 {
  color: var(--light);
}

body.has-v2-navigation .section-title::before {
  content: "";
  position: absolute;
  top: -14px;
  left: -30px;
  width: 190px;
  height: 82px;
  background: radial-gradient(circle, var(--sky-glow), transparent 70%);
  pointer-events: none;
}

body.has-v2-navigation .section-title > * {
  position: relative;
}

body.has-v2-navigation .section-title h2 {
  color: var(--sky-text);
  text-shadow: 0 0 24px rgba(156, 199, 235, .16);
}

.level-detail .anchor, .message-box {
  padding: 12px;
  border: 1px solid rgba(212, 175, 55, 0.42);
  border-radius: 8px;
  background: #fff9e8;
  color: var(--violet-dark);
  white-space: pre-wrap;
}

.rich-text {
  max-height: 360px;
  overflow: auto;
  line-height: 1.55;
  font-size: 16px;
}

.rich-text b {
  display: block;
  margin: 8px 0 4px;
  color: var(--violet-dark);
}

textarea, input, select {
  width: 100%;
  border: 1px solid #e1d3ea;
  border-radius: 8px;
  padding: 11px;
  background: white;
  color: var(--ink);
  line-height: 1.42;
}

textarea { resize: vertical; }

label {
  display: grid;
  gap: 6px;
}

label span {
  color: var(--violet-dark);
  font-weight: 800;
  font-size: 13px;
}

.question-card h2 {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 22px;
}

.search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.search-row input { min-width: 0; }

.journal-list {
  display: grid;
  gap: 10px;
}

.journal-item {
  display: grid;
  gap: 8px;
  padding: 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
}

.journal-item time {
  color: var(--muted);
  font-size: 12px;
}

body[data-active-section="path"] #journalView .search-row input {
  border-color: rgba(156, 199, 235, .28);
  background: rgba(238, 244, 248, .96);
}

body[data-active-section="path"] #journalView .journal-item {
  border-color: rgba(156, 199, 235, .24);
  background: linear-gradient(145deg, rgba(41, 71, 111, .94), rgba(23, 39, 70, .98));
  color: var(--sky-text);
  box-shadow: 0 14px 30px rgba(8, 16, 34, .22);
}

body[data-active-section="path"] #journalView .journal-item time {
  color: var(--sky-blue-light);
}

body[data-active-section="path"] #journalView .journal-item h3 {
  color: #f6f1e7;
}

body[data-active-section="path"] #journalView .journal-item p {
  color: #dce7f0;
  line-height: 1.55;
}

body[data-active-section="path"] #journalView .journal-item strong {
  color: var(--gold-soft);
}

body[data-active-section="path"] #journalView .journal-item.is-deep-linked {
  border-color: var(--gold-soft);
  box-shadow: 0 0 0 2px rgba(221, 188, 111, .3), 0 18px 38px rgba(8, 16, 34, .3);
}

.manifest-grid {
  display: grid;
  gap: 10px;
}

.manifest-output {
  min-height: 120px;
  margin: 0;
  padding: 12px;
  overflow: auto;
  border-radius: 8px;
  background: #180524;
  color: #fff8ff;
  white-space: pre-wrap;
  font-family: "Segoe UI", Arial, sans-serif;
  line-height: 1.45;
}

.visual-card {
  text-align: center;
}

.visual-card {
  background: linear-gradient(180deg, rgba(255, 251, 255, .98), rgba(248, 242, 251, .96));
}

body[data-active-section="today"] #visualView .visual-card {
  border-color: rgba(156, 199, 235, .28);
  box-shadow: 0 20px 48px rgba(8, 16, 34, .3), inset 0 1px rgba(190, 220, 242, .16);
}

body[data-active-section="today"] #visualView .visual-card {
  display: grid;
}

body[data-active-section="today"] #numerologyToday { order: 1; }
body[data-active-section="today"] .day-reading { order: 2; display: grid; }
body[data-active-section="today"] #livingDayMoonPrimary { order: 3; }
body[data-active-section="today"] #skyHumanStory { order: 4; }
body[data-active-section="today"] .today-local-tabs { order: 5; }
body[data-active-section="today"] #livingDayExplore { order: 6; }
body[data-active-section="today"] #dayPassport { order: 7; }
body[data-active-section="today"] #skyContextBar { order: 8; }
body[data-active-section="today"] .lunar-state-context { order: 9; }
body[data-active-section="today"] #cosmogramModePanel,
body[data-active-section="today"] #explanationModePanel { order: 10; }
body[data-active-section="today"]:not(.living-day-depth-open) #explanationModePanel { display: none !important; }
body[data-active-section="today"]:not(.living-day-depth-open) #skyContextBar,
body[data-active-section="today"]:not(.living-day-depth-open) .lunar-state-context { display: none !important; }

.living-day-focus { text-align: left; }
.living-day-focus .sky-human-essence { display: grid; gap: 5px; }
.living-day-personal-day { margin: 0; color: var(--gold-soft); font-size: 18px; font-weight: 800; }
.living-day-personal-day strong { font-size: 30px; line-height: 1; }
.living-day-signal { margin: 0; color: #fff8ff; font-weight: 700; }
.living-day-fact { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 248, 255, .1); }
.living-day-fact strong { color: #d8c8ff; font-size: 11px; }
.living-day-fact p { margin: 4px 0 0; color: rgba(255, 248, 255, .76); font-size: 12px; }
.living-day-explore { display: grid; gap: 10px; margin-top: 14px; padding: 14px; border: 1px solid rgba(156, 199, 235, .2); border-radius: 16px; background: rgba(156, 199, 235, .05); text-align: left; }
.living-day-section-head h2 { margin: 2px 0 0; color: #fff8ff; font-size: 17px; }
.living-day-explore-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.living-day-explore-grid .ghost-button { min-height: 44px; }
.living-day-moon-primary { display: grid; gap: 12px; margin-top: 14px; padding: 16px; border: 1px solid rgba(226, 196, 108, .28); border-radius: 18px; background: linear-gradient(145deg, rgba(40, 24, 72, .9), rgba(17, 12, 39, .95)); text-align: left; }
#livingDayMoonPrimary[hidden] { display: none !important; }
.living-day-moon-grid { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; }
.living-day-moon-visual { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 50%; color: #fff6d1; background: radial-gradient(circle at 35% 30%, #fffdf2, #d8c99a 52%, #746743 100%); box-shadow: 0 0 22px rgba(239, 211, 128, .35); font-size: 36px; }
.living-day-moon-visual.is-new { color: #978ba8; background: radial-gradient(circle, #1d172b 55%, #a08db4 100%); }
.living-day-moon-visual.is-waning span { transform: rotate(180deg); }
.living-day-moon-facts dl { margin: 0; }
.living-day-moon-symbol, .living-day-moon-practice { padding-top: 10px; border-top: 1px solid rgba(255, 248, 255, .1); }
.living-day-moon-symbol p, .living-day-moon-practice p { margin: 4px 0 0; }
.living-day-moon-symbol strong { color: var(--gold-soft); }
.living-day-moon-question { color: #d8c8ff; }
@media (max-width: 420px) { .living-day-moon-grid { grid-template-columns: 58px minmax(0, 1fr); gap: 10px; } .living-day-moon-visual { width: 54px; height: 54px; font-size: 28px; } }

body[data-active-section="today"][data-today-mode="cosmogram"] #skyHumanStory,
body[data-active-section="today"][data-today-mode="cosmogram"] #livingDayMoonPrimary,
body[data-active-section="today"][data-today-mode="cosmogram"] #jyotishPublicAccent,
body[data-active-section="today"][data-today-mode="cosmogram"] #dayPassport,
body[data-active-section="today"][data-today-mode="cosmogram"] .day-reading,
body[data-active-section="today"][data-today-mode="cosmogram"] #skyContextBar,
body[data-active-section="today"][data-today-mode="cosmogram"] .lunar-state-context,
body[data-active-section="today"][data-today-mode="cosmogram"] #livingDayExplore,
body[data-active-section="today"][data-today-mode="data"] #skyHumanStory,
body[data-active-section="today"][data-today-mode="data"] #jyotishPublicAccent,
body[data-active-section="today"][data-today-mode="data"] .day-reading,
body[data-active-section="today"][data-today-mode="data"] #skyContextBar,
body[data-active-section="today"][data-today-mode="data"] .lunar-state-context,
body[data-active-section="today"][data-today-mode="data"] #cosmogramModePanel,
body[data-active-section="today"][data-today-mode="data"] #explanationModePanel {
  display: none !important;
}

body.has-v2-navigation .hero {
  min-height: 190px;
}

.today-local-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2px;
}

.path-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(156, 199, 235, .2);
  border-radius: 12px;
  background: rgba(16, 26, 50, .78);
}

.path-mode-tab {
  min-height: 44px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--sky-muted);
  font-weight: 800;
}

.path-mode-tab.is-active {
  background: rgba(156, 199, 235, .16);
  color: var(--sky-text);
  box-shadow: inset 0 0 0 1px rgba(156, 199, 235, .22);
}

.path-weekly-card {
  display: grid;
  gap: 13px;
  margin-bottom: 14px;
  padding: 17px;
  border: 1px solid rgba(156, 199, 235, .23);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(179, 136, 255, .12), transparent 34%),
    linear-gradient(145deg, rgba(25, 43, 74, .9), rgba(12, 23, 45, .97));
}

.path-weekly-card h3,
.path-weekly-card h4,
.path-weekly-card p { margin: 0; }
.path-weekly-card h3 { color: var(--sky-text); font-size: 1.18rem; }
.path-weekly-card h4 { color: var(--sky-blue-soft); font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; }
.path-weekly-summary { display: grid; gap: 7px; color: var(--sky-text); line-height: 1.55; }
.path-weekly-themes { display: flex; flex-wrap: wrap; gap: 7px; }
.path-weekly-themes:empty { display: none; }
.path-weekly-themes span { padding: 6px 9px; border: 1px solid rgba(156, 199, 235, .22); border-radius: 999px; background: rgba(156, 199, 235, .1); color: var(--sky-blue-soft); font-size: .78rem; font-weight: 750; }
.path-weekly-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.path-weekly-grid section { min-width: 0; padding: 11px; border: 1px solid rgba(156, 199, 235, .13); border-radius: 12px; background: rgba(5, 14, 29, .25); }
.path-weekly-grid ul { display: grid; gap: 6px; margin: 8px 0 0; padding-left: 17px; color: var(--sky-text); font-size: .86rem; line-height: 1.45; }
.path-weekly-grid li.is-empty { color: var(--sky-muted); font-style: italic; }
.path-weekly-alignment { padding-top: 10px; border-top: 1px solid rgba(156, 199, 235, .14); color: var(--sky-muted); font-size: .84rem; line-height: 1.5; }
.path-weekly-alignment::before { content: "Ранок ↔ вечір · "; color: var(--sky-blue-soft); font-weight: 800; }
.path-weekly-card.is-empty .path-weekly-grid { display: none; }

.journal-category-filters {
  display: flex;
  gap: 6px;
  margin: 10px 0 13px;
  padding-bottom: 3px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.journal-category-filters button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(156, 199, 235, .17);
  border-radius: 999px;
  background: rgba(5, 14, 29, .2);
  color: var(--sky-muted);
  font: inherit;
  font-size: .78rem;
  font-weight: 750;
  cursor: pointer;
}

.journal-category-filters button.is-active {
  border-color: rgba(156, 199, 235, .45);
  background: rgba(156, 199, 235, .14);
  color: var(--sky-text);
}

@media (max-width: 720px) {
  .path-weekly-grid { grid-template-columns: 1fr; }
}

#journalTimelinePanel[hidden],
.journal-calendar-panel[hidden] { display: none; }

.journal-calendar-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(156, 199, 235, .2);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(32, 55, 92, .88), rgba(16, 26, 50, .96));
}

.journal-calendar-toolbar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.journal-calendar-toolbar h3 { margin: 0; color: var(--sky-text); text-align: center; }
.journal-calendar-toolbar .ghost-button { min-height: 40px; padding: 0; }
.journal-calendar-toolbar-actions { display: flex; align-items: center; gap: 6px; }
.journal-calendar-toolbar-actions .calendar-today-button { padding: 0 10px; font-size: 11px; }
.journal-calendar-weekdays,
.journal-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.journal-calendar-weekdays span { color: var(--sky-muted); font-size: 10px; font-weight: 800; text-align: center; }

.journal-calendar-day {
  position: relative;
  min-height: 40px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--sky-muted);
  font-size: 12px;
}

button.journal-calendar-day { width: 100%; border: 0; background: transparent; cursor: pointer; font: inherit; }
button.journal-calendar-day:hover, button.journal-calendar-day:focus-visible { background: rgba(156, 199, 235, .16); color: var(--sky-text); }
.journal-calendar-day.is-selected { outline: 2px solid var(--gold-soft); outline-offset: -2px; color: var(--sky-text); }
.journal-calendar-day.is-weekend { background: rgba(35, 22, 66, .22); }
.journal-calendar-day.is-today:not(.is-selected) { outline: 1px solid rgba(244, 202, 85, .55); outline-offset: -1px; color: var(--sky-text); }
.journal-calendar-day small { position: absolute; left: 5px; bottom: 3px; color: var(--sky-blue-soft); font-size: 9px; font-weight: 800; line-height: 1; }
.journal-calendar-day.tone-supportive { box-shadow: inset 0 -3px rgba(112, 193, 166, .82); }
.journal-calendar-day.tone-demanding { box-shadow: inset 0 -3px rgba(218, 166, 102, .9); }

.journal-calendar-day.has-entries {
  background: rgba(156, 199, 235, .13);
  color: var(--sky-text);
  box-shadow: inset 0 0 0 1px rgba(156, 199, 235, .2);
}

.journal-calendar-day i {
  position: absolute;
  right: 3px;
  bottom: 3px;
  min-width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  background: var(--gold);
  color: #1c0926;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
}

.planner-day-panel { display: grid; gap: 10px; margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(156, 199, 235, .16); text-align: left; }
.planner-task-filter { display: inline-flex; gap: 4px; width: fit-content; padding: 3px; border: 1px solid rgba(156, 199, 235, .16); border-radius: 999px; background: rgba(5, 14, 29, .2); }
.planner-task-filter button { border: 0; border-radius: 999px; padding: 5px 10px; background: transparent; color: var(--sky-muted); font-size: 11px; cursor: pointer; }
.planner-task-filter button.is-active { background: rgba(156, 199, 235, .2); color: var(--sky-text); }
.planner-day-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.planner-day-head h3 { margin: 0; color: var(--sky-text); }
.planner-tone { color: var(--sky-muted); font-size: 11px; text-align: right; }
.planner-tone[data-tone="supportive"] { color: #8bd5ba; }
.planner-tone[data-tone="demanding"] { color: #e7b47c; }
.planner-tone[data-tone="deep"] { color: #e7b47c; }
.planner-lunar { margin: 4px 0 0; color: var(--sky-blue-soft); font-size: 11px; line-height: 1.4; }
.planner-quality-card { display: grid; gap: 9px; padding: 12px; border: 1px solid rgba(156, 199, 235, .2); border-radius: 12px; background: rgba(5, 14, 29, .28); }
.planner-quality-card[hidden] { display: none; }
.planner-quality-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.planner-quality-badge { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 5px 9px; border-radius: 999px; background: rgba(156, 199, 235, .16); color: var(--sky-text); font-size: 13px; font-weight: 900; }
.planner-quality-badge[data-classification="supportive"] { background: rgba(112, 193, 166, .18); color: #b8f0d8; }
.planner-quality-badge[data-classification="deep"] { background: rgba(218, 166, 102, .18); color: #f2c38f; }
.planner-special-marker { color: var(--gold); font-size: 11px; font-weight: 800; }
.planner-quality-summary { margin: 0; color: var(--sky-text); font-size: 14px; line-height: 1.5; }
.planner-quality-reasons { display: grid; gap: 7px; }
.planner-quality-reason { display: grid; gap: 2px; padding-left: 9px; border-left: 2px solid rgba(156, 199, 235, .35); }
.planner-quality-reason-label { color: var(--sky-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.planner-quality-reason strong { color: var(--sky-text); font-size: 12px; font-weight: 600; line-height: 1.4; }
.planner-quality-confidence { margin: 0; color: var(--sky-muted); font-size: 11px; line-height: 1.4; }
.planner-quality-details { color: var(--sky-muted); font-size: 11px; }
.planner-quality-details summary { cursor: pointer; color: var(--sky-blue-soft); font-weight: 800; }
.planner-quality-details div { display: grid; gap: 4px; margin-top: 7px; }
.lunar-calendar-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--sky-muted); font-size: 10px; }
.lunar-calendar-legend span { display: inline-flex; align-items: center; gap: 5px; }
.lunar-legend-moon { color: var(--sky-blue-soft); font-style: normal; font-size: 14px; }
.lunar-legend-tone { width: 12px; height: 3px; border-radius: 99px; background: var(--gold-soft); }
.lunar-legend-holiday { color: #f4ca55; font-style: normal; }
.planner-holiday-mark { position: absolute; top: 4px; right: 5px; color: #f4ca55; font-size: 10px; font-style: normal; }
.planner-task-mark { position: absolute; top: 5px; left: 5px; width: 6px; height: 6px; border-radius: 50%; background: #8bd5ba; box-shadow: 0 0 0 2px rgba(139, 213, 186, .12); }
.planner-task-mark.is-done { background: var(--sky-muted); opacity: .7; }
.planner-day-signals { position: absolute; top: 2px; left: 50%; display: flex; gap: 2px; transform: translateX(-50%); color: var(--sky-blue-soft); font-size: 8px; line-height: 1; }
.planner-day-signals span { display: inline; }
.journal-calendar-day { position: relative; }
.journal-calendar-day.has-holiday { box-shadow: inset 0 0 0 1px rgba(244, 202, 85, .25); }
.planner-task-list { display: grid; gap: 6px; }
.planner-task-row { display: grid; grid-template-columns: minmax(0, 1fr) 32px 32px; gap: 4px; align-items: stretch; }
.planner-task-row.has-move { grid-template-columns: minmax(0, 1fr) 32px 32px 32px; }
.planner-task { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 7px; align-items: center; min-height: 38px; padding: 7px 9px; border: 1px solid rgba(156, 199, 235, .16); border-radius: 9px; background: rgba(5, 14, 29, .28); color: var(--sky-text); text-align: left; }
.planner-task-delete { min-height: 38px; border: 1px solid rgba(231, 180, 124, .2); border-radius: 9px; background: transparent; color: var(--sky-muted); font-size: 20px; cursor: pointer; }
.planner-task-edit { min-height: 38px; border: 1px solid rgba(156, 199, 235, .2); border-radius: 9px; background: transparent; color: var(--sky-muted); font-size: 17px; cursor: pointer; }
.planner-task-move { min-height: 38px; border: 1px solid rgba(139, 213, 186, .24); border-radius: 9px; background: rgba(139, 213, 186, .07); color: #8bd5ba; font-size: 17px; cursor: pointer; }
.planner-task-move:hover, .planner-task-move:focus-visible { border-color: rgba(139, 213, 186, .58); background: rgba(139, 213, 186, .13); }
.planner-task-edit:hover, .planner-task-edit:focus-visible { color: var(--sky-blue-soft); border-color: rgba(156, 199, 235, .55); }
.planner-task-delete:hover, .planner-task-delete:focus-visible { color: #e7b47c; border-color: rgba(231, 180, 124, .55); }
.planner-task.is-done { color: var(--sky-muted); text-decoration: line-through; }
.planner-task-form { display: grid; grid-template-columns: minmax(0, 1fr) 100px auto; gap: 6px; }
.planner-task-form input { min-width: 0; min-height: 42px; }
.planner-task-form .gold-button { min-height: 42px; padding-inline: 12px; }

.journal-calendar-summary { margin: 0; text-align: center; }

.visual-card.is-cosmogram-shell,
.visual-card:has(.cosmogram-mode-panel:not([hidden])),
.visual-card:has(.explanation-mode-panel:not([hidden])) {
  border-color: rgba(212, 175, 55, .5);
  background:
    radial-gradient(circle at 86% 0%, rgba(212, 175, 55, .1), transparent 32%),
    linear-gradient(160deg, rgba(25, 4, 39, .96), rgba(9, 1, 16, .98));
  box-shadow: inset 0 0 0 1px rgba(240, 223, 170, .08), var(--shadow);
}

.visual-card .ghost-button {
  border-color: rgba(106, 13, 173, .28);
  background: rgba(255, 255, 255, .92);
  color: var(--violet-dark);
  box-shadow: 0 8px 18px rgba(36, 6, 55, .08);
}

.visual-card .ghost-button:hover,
.visual-card .ghost-button:focus-visible {
  border-color: rgba(212, 175, 55, .52);
  background: #fff8dc;
  color: #1c0926;
}

.visual-card .gold-button {
  color: #1c0926;
}

.lunar-state-context {
  display: grid;
  gap: 6px;
  margin: 8px 0 12px;
  padding: 10px;
  border: 1px solid rgba(212, 175, 55, .28);
  border-radius: 8px;
  background: rgba(255, 250, 240, .58);
}

.lunar-state-label {
  color: var(--violet-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@keyframes routeViewEnter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes softRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.admin-list {
  display: grid;
  gap: 8px;
}

.admin-order {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid #eadff0;
  border-radius: 8px;
  background: var(--card-2);
}

.admin-order span {
  color: var(--muted);
  font-size: 12px;
}

.contact-link {
  display: grid;
  place-items: center;
  min-height: 46px;
  border-radius: 8px;
  background: var(--violet-dark);
  color: var(--gold-soft);
  text-decoration: none;
  font-weight: 800;
}

.toast {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 16px;
  display: none;
  max-width: 520px;
  margin: 0 auto;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--gold);
  color: #1c0926;
  text-align: center;
  box-shadow: var(--shadow);
  font-weight: 800;
  z-index: 20;
}

.toast.is-visible { display: block; }

@media (max-width: 620px) {
  .app-shell {
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    padding-left: max(10px, env(safe-area-inset-left, 0px));
  }
  .nav-toggle { display: block; }
  .bottom-nav {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: static;
    margin-top: 6px;
  }
  .bottom-nav.is-open { display: grid; }
  .nav-item { min-height: 44px; font-size: 12px; padding: 0 2px; }
  body.has-v2-navigation .app-shell {
    padding-bottom: calc(116px + env(safe-area-inset-bottom, 0px));
  }
  .v2-bottom-nav {
    position: fixed;
    right: max(8px, env(safe-area-inset-right, 0px));
    bottom: 0;
    left: max(8px, env(safe-area-inset-left, 0px));
    top: auto;
    margin: 0;
    padding-bottom: max(7px, env(safe-area-inset-bottom, 0px));
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .v2-nav-item { min-height: 52px; }
  .quick-grid, .level-grid, .stats-grid, .daily-cycle, .identity-grid { grid-template-columns: 1fr; }
  .hero { min-height: 285px; }
  .sky-grid { grid-template-columns: 1fr; }
  .lunar-state-toolbar { grid-template-columns: 1fr 1fr; }
  .lunar-refresh-button { grid-column: 1 / -1; }
  .lunar-state-panel dl { grid-template-columns: 1fr; }
  h1 { font-size: 27px; }
}

/* Cosmogram Lab Phase 2: static, dependency-free SVG inside visualView. */
.visual-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
  padding: 4px;
  border: 1px solid rgba(112, 158, 210, .22);
  border-radius: 12px;
  background: rgba(32, 55, 92, .07);
}

.visual-mode-tab {
  min-width: 0;
  min-height: 44px;
  padding: 8px 6px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #5e4b69;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
}

.visual-mode-tab.is-active,
.visual-mode-tab[aria-selected="true"] {
  border-color: rgba(156, 199, 235, .44);
  background: linear-gradient(145deg, var(--sky-surface), var(--sky-night-deep));
  color: var(--sky-blue-soft);
  box-shadow: inset 0 -2px rgba(212, 175, 55, .38), 0 8px 20px rgba(16, 26, 50, .2);
}

.visual-mode-tab:focus-visible,
.cosmogram-toolbar select:focus-visible,
.cosmogram-detail-head button:focus-visible {
  outline: 3px solid rgba(212, 175, 55, .58);
  outline-offset: 2px;
}

.visual-mode-panel[hidden] { display: none; }
.visual-card,
.visual-mode-tabs,
.visual-mode-panel {
  scroll-margin-top: calc(76px + env(safe-area-inset-top, 0px));
}

.lunar-state-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 6px;
  margin: 0 0 12px;
  align-items: center;
}

.lunar-state-toolbar,
.lunar-state-tab,
.lunar-refresh-button,
.lunar-state-panel {
  animation: none !important;
}

.lunar-state-tab {
  min-height: 42px;
  border: 1px solid rgba(106, 13, 173, .22);
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  color: var(--violet-dark);
  font-weight: 800;
}

.lunar-state-tab.is-active {
  border-color: rgba(212, 175, 55, .55);
  background: var(--gold);
  color: #1c0926;
}

.lunar-refresh-button {
  min-height: 42px;
}

.lunar-state-panel {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid rgba(212, 175, 55, .34);
  border-radius: 8px;
  background: rgba(255, 250, 240, .88);
  color: var(--violet-dark);
  text-align: left;
}

.lunar-state-panel:empty {
  display: none;
}

.lunar-state-panel strong {
  font-size: 15px;
}

.lunar-state-panel dl {
  display: grid;
  grid-template-columns: minmax(104px, .7fr) 1fr;
  gap: 5px 10px;
  margin: 0;
}

.lunar-state-panel dt {
  color: var(--muted);
}

.lunar-state-panel dd {
  margin: 0;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.cosmogram-mode-panel,
.explanation-mode-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(212, 175, 55, .46);
  border-radius: 12px;
  background:
    radial-gradient(circle at 88% 0%, rgba(212, 175, 55, .14), transparent 30%),
    radial-gradient(circle at 10% 20%, rgba(111, 39, 171, .34), transparent 42%),
    linear-gradient(155deg, rgba(20, 3, 31, .98) 0%, rgba(42, 7, 65, .96) 52%, rgba(10, 2, 19, .98) 100%);
  color: #fff8ff;
  text-align: left;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(240, 223, 170, .08), 0 18px 42px rgba(5, 1, 11, .32);
}

.cosmogram-heading {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.cosmogram-heading h2,
.cosmogram-heading h3 { color: #fff8ff; }

.cosmogram-heading > p {
  color: rgba(255, 248, 255, .7);
  font-size: 14px;
  line-height: 1.45;
}

.day-passport {
  margin: 0 0 16px;
  padding: 15px;
  border: 1px solid rgba(230, 200, 102, .3);
  border-radius: 16px;
  background: rgba(255, 248, 255, .045);
}
.visual-loading-skeleton { display: grid; gap: 14px; margin: 0 0 16px; }
.visual-loading-skeleton[hidden] { display: none; }
.visual-skeleton-card { display: grid; gap: 11px; padding: 18px; border: 1px solid rgba(230, 200, 102, .2); border-radius: 16px; background: linear-gradient(145deg, rgba(32, 30, 56, .82), rgba(13, 22, 40, .94)); overflow: hidden; }
.visual-skeleton-card span { display: block; height: 12px; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 248, 255, .07), rgba(255, 248, 255, .2), rgba(255, 248, 255, .07)); background-size: 200% 100%; animation: day-passport-shimmer 1.4s ease-in-out infinite; }
.visual-skeleton-passport { min-height: 190px; }
.visual-skeleton-passport span:first-child { width: 42%; height: 22px; }
.visual-skeleton-passport span:nth-child(2) { width: 78%; height: 18px; }
.visual-skeleton-passport span:nth-child(3) { width: 92%; }
.visual-skeleton-passport span:nth-child(4) { width: 64%; }
.visual-skeleton-picture { min-height: 190px; place-content: center; justify-items: center; }
.visual-skeleton-picture span:first-child { width: 110px; height: 110px; border-radius: 50%; }
.visual-skeleton-picture span:last-child { width: 58%; }
.visual-skeleton-map { min-height: 260px; }
.visual-skeleton-map span:first-child { width: 48%; height: 18px; }
.visual-skeleton-map span:nth-child(2) { width: 100%; height: 180px; border-radius: 50%; }
.visual-skeleton-map span:last-child { width: 70%; }
.visual-loading-skeleton[data-state="error"] { min-height: 180px; place-content: center; color: var(--gold-soft); line-height: 1.5; }
.visual-loading-skeleton[data-state="error"] span { height: auto; background: none; animation: none; color: rgba(255, 248, 255, .72); }
.day-passport-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.day-passport-actions { display: flex; align-items: center; gap: 10px; }
.day-passport-refresh { min-width: 86px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.day-passport-refresh[disabled] { opacity: .72; cursor: wait; }
.day-passport-refresh.is-loading > span:first-child { display: inline-block; animation: orbis-spin .8s linear infinite; }
.day-passport-updated { color: rgba(255, 248, 255, .62); font-size: 12px; }
.day-passport-refresh-message { min-height: 17px; margin: 5px 0 0; color: var(--gold-soft); font-size: 12px; line-height: 1.35; }
.day-passport-refresh-message:empty { display: none; }
.day-passport-technical { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 248, 255, .08); }
.day-passport-technical summary { min-height: 32px; color: var(--gold-soft); cursor: pointer; font-size: 12px; font-weight: 800; }
.day-passport-layer { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 248, 255, .08); }
.day-passport-layer:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.day-passport-layer > strong { color: var(--gold-soft); font-size: 12px; }
.day-passport-layer.is-symbolic > strong { color: #d8c8ff; }
.day-passport-layer.is-reflection > strong { color: #9cc7eb; }
.day-passport-layer p { margin: 7px 0 0; color: rgba(255, 248, 255, .72); font-size: 12px; line-height: 1.45; }
.day-passport-head h2 { margin: 3px 0 0; color: #fff8ff; font-size: 20px; }
.day-passport-status { color: var(--gold-soft); font-size: 11px; text-align: right; }
.day-passport-status.is-verified { color: #8ed7bd; }
.day-passport-summary { margin-top: 12px; color: rgba(255, 248, 255, .8); font-size: 13px; line-height: 1.45; }
.day-passport-summary p { margin: 4px 0; }
.day-passport-skeleton { display: grid; gap: 9px; padding: 4px 0; }
.day-passport-skeleton span { display: block; height: 12px; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 248, 255, .08), rgba(255, 248, 255, .2), rgba(255, 248, 255, .08)); background-size: 200% 100%; animation: day-passport-shimmer 1.4s ease-in-out infinite; }
.day-passport-skeleton span:nth-child(1) { width: 72%; height: 16px; }
.day-passport-skeleton span:nth-child(2) { width: 94%; }
.day-passport-skeleton span:nth-child(3) { width: 58%; }
.day-passport-summary .day-passport-primary { color: #fff8ff; font-size: 15px; font-weight: 800; }
.numerology-today { margin-top: 14px; padding: 15px; border: 1px solid rgba(216, 200, 255, .24); border-radius: 15px; background: linear-gradient(145deg, rgba(72, 45, 105, .34), rgba(18, 29, 52, .54)); }
.numerology-today[hidden] { display: none; }
.numerology-today-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.numerology-today-head h3 { margin: 2px 0 0; color: #fff8ff; font-size: 18px; }
.numerology-today-value { display: grid; place-items: center; flex: 0 0 58px; width: 58px; height: 58px; border: 1px solid rgba(230, 200, 102, .62); border-radius: 50%; background: rgba(9, 16, 32, .64); color: var(--gold-soft); font-size: 30px; line-height: 1; box-shadow: 0 0 24px rgba(216, 200, 255, .14); }
.numerology-today-subtitle { margin: 10px 0 0; color: #fff8ff; font-size: 15px; font-weight: 800; }
.numerology-today-keywords { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.numerology-today-keywords span { padding: 5px 8px; border: 1px solid rgba(216, 200, 255, .2); border-radius: 999px; color: rgba(255, 248, 255, .76); font-size: 11px; }
.primary-numeric-rhythm { display: grid; gap: 7px; text-align: left; }
.primary-numeric-rhythm h2 { margin: 0; color: #fff8ff; font-size: 18px; }
.primary-numeric-rhythm .eyebrow { margin: 0; }
.primary-numeric-line { margin: 0; color: #fff8ff; font-size: 15px; font-weight: 800; line-height: 1.4; }
.primary-numeric-resonance { color: var(--gold-soft); font-size: 14px; line-height: 1.4; }
.primary-numeric-summary { margin: 0; color: rgba(255, 248, 255, .74); font-size: 12px; line-height: 1.45; }
.numerology-disclosure { margin-top: 11px; border-top: 1px solid rgba(255, 248, 255, .1); }
.numerology-disclosure summary { display: flex; align-items: center; min-height: 44px; color: var(--gold-soft); cursor: pointer; font-size: 12px; font-weight: 800; }
.numerology-steps { display: grid; gap: 7px; margin: 4px 0 0; padding-left: 21px; }
.numerology-steps li { color: rgba(255, 248, 255, .72); font-size: 12px; line-height: 1.45; }
.numerology-steps code { color: #fff8ff; white-space: normal; }
.numerology-master-note { color: #d8c8ff; font-size: 11px; line-height: 1.45; }
.numerology-layer { margin-top: 8px; }
.numerology-layer strong { color: #d8c8ff; font-size: 11px; }
.numerology-layer.is-practical strong { display: block; margin-top: 10px; color: #9cc7eb; }
.numerology-layer p { margin: 5px 0 0; color: rgba(255, 248, 255, .74); font-size: 12px; line-height: 1.5; }
.numerology-group { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 248, 255, .1); }
.numerology-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.numerology-group > strong { color: #fff8ff; font-size: 13px; }
.numerology-group > p { margin: 5px 0 0; color: rgba(255, 248, 255, .62); font-size: 11px; line-height: 1.45; }
.day-passport-details { display: grid; gap: 8px; margin-top: 13px; }
.day-passport-details details { border-top: 1px solid rgba(255, 248, 255, .11); padding-top: 9px; }
.day-passport-details summary { min-height: 44px; display: flex; align-items: center; color: var(--gold-soft); cursor: pointer; font-size: 13px; font-weight: 800; }
.day-passport-details [data-day-passport-summary-value] { margin-left: auto; padding-left: 12px; color: rgba(255, 248, 255, .62); font-size: 11px; font-weight: 600; text-align: right; }
.day-passport-details dl { display: grid; gap: 8px; margin: 10px 0 0; }
.day-passport-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: 10px; }
.day-passport-row dt { color: rgba(255, 248, 255, .53); font-size: 11px; }
.day-passport-row dd { margin: 0; color: rgba(255, 248, 255, .82); font-size: 12px; overflow-wrap: anywhere; }
.day-passport-note { margin: 10px 0 0; color: rgba(255, 248, 255, .62); font-size: 12px; line-height: 1.45; }
.day-picture { display: grid; gap: 12px; margin: 16px 0 8px; padding: 16px; border: 1px solid rgba(228, 189, 75, .28); border-radius: 18px; background: linear-gradient(145deg, rgba(21, 36, 63, .95), rgba(11, 20, 37, .98)); }
.day-picture[hidden] { display: none !important; }
.day-picture-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.day-picture-head h2 { margin: 3px 0 0; color: #fff8ff; font-size: 20px; }
.day-picture-status { color: var(--gold-soft); font-size: 11px; text-align: right; }
.day-picture-visual { --picture-hue: 210; --picture-rotation: 0deg; --picture-density: 4; position: relative; display: grid; place-items: center; width: 100%; min-height: 0; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 16px; background: radial-gradient(circle at 50% 50%, rgba(240,207,114,.2), transparent 28%), radial-gradient(circle at 24% 32%, rgba(143,209,255,.16), transparent 32%), radial-gradient(circle at 76% 68%, rgba(201,181,255,.15), transparent 34%), linear-gradient(135deg, rgba(111,224,208,.08), #081122 64%); }
.day-picture-visual::before { content: ""; position: absolute; inset: 13%; border: 1px solid hsla(var(--picture-hue), 72%, 76%, .32); border-radius: 50%; transform: rotate(var(--picture-rotation)); }
.day-picture-rays { position: absolute; width: 76%; height: 76%; background: repeating-conic-gradient(from var(--picture-rotation), hsla(var(--picture-hue), 80%, 80%, .18) 0 2deg, transparent 2deg calc(360deg / var(--picture-density))); mask-image: radial-gradient(circle, transparent 0 37%, #000 38% 48%, transparent 49%); }
.day-picture-orbit { position: absolute; border: 1px solid hsla(var(--picture-hue), 72%, 76%, .3); border-radius: 50%; transform: rotate(var(--picture-rotation)); }
.day-picture-orbit-a { width: 58%; height: 58%; }
.day-picture-orbit-b { width: 88%; height: 34%; transform: rotate(calc(var(--picture-rotation) + 42deg)); }
.day-picture-core { z-index: 2; display: grid; place-items: center; width: 74px; height: 74px; border: 1px solid rgba(255, 248, 255, .48); border-radius: 50%; background: radial-gradient(circle, hsla(var(--picture-hue), 65%, 75%, .38), rgba(7, 16, 31, .9)); color: #fff8ff; font-size: 36px; box-shadow: 0 0 32px hsla(var(--picture-hue), 80%, 70%, .28); }
.day-picture-core.is-crystal { position: relative; border: 0; border-radius: 0; clip-path: polygon(50% 0, 88% 28%, 72% 84%, 50% 100%, 28% 84%, 12% 28%); transform: rotate(-8deg); background: linear-gradient(125deg, rgba(255, 248, 255, .88) 0 28%, rgba(180, 157, 224, .82) 29% 50%, rgba(255, 248, 255, .62) 51% 68%, rgba(106, 83, 151, .8) 69%); }
.day-picture-core.is-crystal::after { content: ""; position: absolute; inset: 12px 25px; border-left: 1px solid rgba(255, 255, 255, .72); border-right: 1px solid rgba(67, 47, 108, .72); transform: skewX(-16deg); }
.day-picture-moon { position: absolute; top: 18%; right: 18%; z-index: 1; width: 34px; height: 34px; border: 1px solid rgba(255, 248, 255, .62); border-radius: 50%; background: rgba(255, 248, 255, .78); box-shadow: 0 0 18px rgba(255, 248, 255, .25); }
.day-picture-moon[data-phase="new"] { background: #091225; }
.day-picture-moon[data-phase="full"] { background: #fff8df; }
.day-picture-moon[data-phase="waning"] { background: linear-gradient(90deg, #091225 0 52%, rgba(255, 248, 255, .78) 53%); }
.day-picture-moon[data-phase="waxing"] { background: linear-gradient(90deg, rgba(255, 248, 255, .78) 0 47%, #091225 48%); }
.day-picture-moon[data-phase="unknown"] { border-style: dashed; background: rgba(255,255,255,.08); box-shadow: none; }
.day-picture-sign { position: absolute; top: 20%; left: 18%; z-index: 1; color: hsla(var(--picture-hue), 78%, 82%, .84); font-size: 25px; text-shadow: 0 0 14px hsla(var(--picture-hue), 80%, 75%, .5); }
.day-picture-number { position: absolute; right: 20%; bottom: 19%; z-index: 1; color: var(--gold-soft); font-size: 14px; font-weight: 800; }
.day-picture-aspect { position: absolute; left: 20%; bottom: 20%; z-index: 1; color: rgba(255, 248, 255, .6); font-size: 18px; }
.day-picture-sign,.day-picture-number,.day-picture-aspect { display: none; }
.day-picture-caption { margin: 0; color: #fff8ff; font-size: 16px; font-weight: 800; }
.day-picture-details { border-top: 1px solid rgba(255, 248, 255, .12); padding-top: 10px; }
.day-picture-details summary { min-height: 34px; color: var(--gold-soft); cursor: pointer; font-weight: 800; }
.day-picture-details summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; }
.day-picture-details p { margin: 9px 0 0; color: rgba(255, 248, 255, .74); font-size: 12px; line-height: 1.5; }
.day-picture-details strong { color: #fff8ff; }
.day-picture-symbolic strong { color: var(--gold-soft); }
.day-picture-source strong { color: #d8c8ff; }
.day-picture-personal strong { color: #9cc7eb; }
.day-picture-note { color: rgba(255, 248, 255, .72) !important; }
.day-picture-technical { overflow-wrap: anywhere; color: rgba(255,248,255,.58) !important; font-size: 10px !important; }
.day-picture-rays { animation: none !important; }
.day-picture-personal-row { display:grid; grid-template-columns: minmax(72px, .34fr) minmax(0, 1fr); gap:12px; align-items:center; padding:10px 12px; border:1px solid rgba(111,224,208,.5); border-radius:13px; background:linear-gradient(100deg,rgba(111,224,208,.055),rgba(143,209,255,.035),rgba(201,181,255,.04)); }
.day-picture-personal-row[hidden],.day-picture-personal-number[hidden],.day-picture-focus[hidden] { display:none !important; }
.day-picture-personal-number { display:grid; justify-items:center; gap:3px; min-width:0; }
.day-picture-number-motif { position:relative; display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(111,224,208,.64); border-radius:50%; color:#6fe0d0; background:rgba(111,224,208,.09); }
.day-picture-number-motif::before { content:""; position:absolute; inset:7px; border:1px solid rgba(111,224,208,.35); border-radius:50%; }
.day-picture-number-motif span { position:absolute; top:2px; left:calc(50% - 1px); width:2px; height:7px; border-radius:2px; background:#6fe0d0; transform-origin:1px 19px; transform:rotate(var(--ray-angle)); }
.day-picture-number-value { position:absolute; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#081a1c; background:#6fe0d0; font-size:13px; font-weight:900; }
.day-picture-number-label,.day-picture-focus-label { color:#9adbd3; font-size:10px; font-weight:800; line-height:1.3; text-align:center; }
.day-picture-focus { display:grid; gap:4px; min-width:0; padding-left:12px; border-left:1px solid rgba(240,207,114,.5); }
.day-picture-focus-label { color:var(--gold-soft); text-align:left; }
.day-picture-focus-title { color:#fff8ff; font-size:13px; font-weight:750; line-height:1.4; overflow-wrap:anywhere; }

/* One readable bridge between the symbolic picture and the live sky map. */
.day-reading {
  display: grid;
  gap: 10px;
  margin: 16px 0 8px;
}

.day-reading-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--sky-blue-light);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.day-reading-intro i {
  color: var(--gold-soft);
  font-size: 15px;
  font-style: normal;
}

.day-reading .day-picture,
.day-reading .sky-human-story { margin: 0; }

@media (min-width: 680px) {
  .day-reading {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .day-reading-intro { grid-column: 1 / -1; }
  .day-reading .day-picture { min-width: 0; }
  .day-reading .day-picture-visual { min-height: 0; }
  .day-reading .sky-human-story { min-width: 0; align-content: start; }
}
@media (max-width:380px) { .day-picture-personal-row { grid-template-columns: 64px minmax(0,1fr); gap:8px; padding-inline:8px; } .day-picture-focus { padding-left:8px; } }
@keyframes orbis-spin { to { transform: rotate(360deg); } }
@keyframes day-passport-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .day-passport-refresh.is-loading > span:first-child { animation: none; } }
@media (max-width: 767px) {
  .day-passport-head h2 { white-space: nowrap; font-size: 19px; }
  .day-passport-actions { min-width: 44px; flex-direction: column; gap: 4px; }
  .day-passport-status { position: absolute; top: 0; right: 0; max-width: 110px; transform: translateY(-1px); }
  .day-passport-refresh { margin-top: 22px; }
}
@media (max-width: 360px) {
  .day-passport { padding: 13px; }
  .day-passport-row { grid-template-columns: 1fr; gap: 2px; }
}

.cosmogram-unavailable {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 34px 18px;
  border: 1px solid rgba(212, 175, 55, .25);
  border-radius: 12px;
  background: rgba(8, 1, 15, .38);
  text-align: center;
}

.cosmogram-unavailable[hidden] { display: none; }
.cosmogram-unavailable > span { color: var(--gold-soft); font-size: 38px; }
.cosmogram-unavailable h3 { color: var(--gold-soft); }
.cosmogram-unavailable p { max-width: 390px; color: rgba(255, 248, 255, .72); line-height: 1.5; }

.cosmogram-ready[hidden] { display: none; }

.cosmogram-passport {
  margin: 18px 0 22px;
  padding: 16px;
  border: 1px solid rgba(230, 200, 102, .24);
  border-radius: 16px;
  background: rgba(255, 248, 255, .035);
}
.cosmogram-passport-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; cursor: pointer; list-style: none; }
.cosmogram-passport-head::-webkit-details-marker { display: none; }
.cosmogram-passport-head::after { content: "+"; color: var(--gold-soft); font-size: 18px; line-height: 1; }
.cosmogram-passport[open] > .cosmogram-passport-head::after { content: "−"; }
.cosmogram-passport-head h3 { margin: 2px 0 0; color: #fff8ff; font-size: 17px; }
.cosmogram-passport-status { color: var(--gold-soft); font-size: 12px; white-space: nowrap; }
.cosmogram-passport-status.is-verified { color: #8ed7bd; }
.cosmogram-passport-body { padding-top: 2px; }
.cosmogram-passport-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; }
.cosmogram-passport-grid div { min-width: 0; }
.cosmogram-passport-grid dt { color: rgba(255, 248, 255, .52); font-size: 11px; }
.cosmogram-passport-grid dd { margin: 3px 0 0; color: #fff8ff; font-size: 13px; overflow-wrap: anywhere; }
.cosmogram-passport-method { margin-top: 14px; border-top: 1px solid rgba(255, 248, 255, .1); padding-top: 12px; }
.cosmogram-passport-method summary { color: var(--gold-soft); cursor: pointer; font-size: 12px; }
.cosmogram-passport-method p { margin: 8px 0 0; color: rgba(255, 248, 255, .68); font-size: 12px; line-height: 1.5; }
.cosmogram-method-technical { margin-top: 9px; }
.cosmogram-method-technical summary { color: rgba(255, 248, 255, .62); font-size: 11px; }
.cosmogram-method-technical small { display: block; margin-top: 7px; color: rgba(255, 248, 255, .58); line-height: 1.5; }
@media (max-width: 480px) {
  .cosmogram-passport-grid { grid-template-columns: 1fr; gap: 10px; }
}

.cosmogram-reading-disclosure,
.cosmogram-technical-disclosure {
  margin: 14px 0 8px;
  border: 1px solid rgba(156, 199, 235, .18);
  border-radius: 12px;
  background: rgba(7, 16, 31, .24);
}
.cosmogram-reading-disclosure > summary,
.cosmogram-technical-disclosure > summary {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
  color: rgba(255, 248, 255, .78);
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
  list-style: none;
}
.cosmogram-reading-disclosure > summary::-webkit-details-marker,
.cosmogram-technical-disclosure > summary::-webkit-details-marker { display: none; }
.cosmogram-reading-disclosure > summary::after,
.cosmogram-technical-disclosure > summary::after { content: "+"; color: var(--gold-soft); font-size: 18px; }
.cosmogram-reading-disclosure[open] > summary::after,
.cosmogram-technical-disclosure[open] > summary::after { content: "−"; }
.cosmogram-layers { display: grid; gap: 12px; margin: 0; padding: 4px 12px 12px; }
.cosmogram-layers-head { padding: 0 2px 2px; }
.cosmogram-layers-head h3 { margin: 3px 0 0; color: #fff8ff; font-size: 18px; }
.cosmogram-layer { padding: 15px; border: 1px solid rgba(255, 248, 255, .12); border-radius: 16px; background: rgba(255, 248, 255, .025); }
.cosmogram-layer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cosmogram-layer-head h4 { margin: 3px 0 0; color: #fff8ff; font-size: 16px; }
.cosmogram-layer-badge { color: var(--gold-soft); font-size: 11px; text-align: right; white-space: nowrap; }
.cosmogram-layer-items { display: grid; gap: 8px; margin-top: 13px; }
.cosmogram-layer-item, .cosmogram-layer-detail { border-top: 1px solid rgba(255, 248, 255, .1); padding-top: 9px; }
.cosmogram-layer-item summary, .cosmogram-layer-detail summary { color: #fff8ff; cursor: pointer; font-size: 13px; line-height: 1.4; }
.cosmogram-layer-copy { margin-top: 10px; }
.cosmogram-layer-copy strong { display: block; color: rgba(255, 248, 255, .58); font-size: 11px; font-weight: 600; }
.cosmogram-layer-copy p, .cosmogram-layer-empty { margin: 4px 0 0; color: rgba(255, 248, 255, .76); font-size: 13px; line-height: 1.48; }
.cosmogram-layer-copy.is-symbolic { padding-top: 10px; border-top: 1px solid rgba(230, 200, 102, .15); }
.cosmogram-layer-copy.is-symbolic strong { color: var(--gold-soft); }
.cosmogram-layer-copy.is-reflection strong { color: #8ed7bd; }
.cosmogram-layer-copy.is-caution strong { color: #e6a675; }
.cosmogram-layer button { margin-top: 14px; }

.cosmogram-ready[data-map-mode="clean"] .cosmogram-reading-disclosure,
.cosmogram-ready:not([data-map-mode="research"]) .cosmogram-technical-disclosure,
.cosmogram-ready:not([data-map-mode="research"]) #cosmogramContextualReading,
.cosmogram-mode-panel:not([data-map-mode="research"]) > .cosmogram-passport { display: none; }
.cosmogram-technical-disclosure .cosmogram-legend { margin: 0 12px 10px; }
.cosmogram-technical-disclosure .cosmogram-coordinate-note { margin: 0 12px 13px; }

.birth-location-picker { margin: 12px 0; }
.birth-location-map { position: relative; display: grid; place-items: center; gap: 6px; width: 100%; min-height: 180px; border: 1px solid var(--line-soft); border-radius: 14px; color: var(--text); background: linear-gradient(135deg, rgba(198,166,92,.16), rgba(36,49,66,.5)), repeating-linear-gradient(0deg, transparent 0 29px, rgba(255,255,255,.08) 30px), repeating-linear-gradient(90deg, transparent 0 29px, rgba(255,255,255,.08) 30px); cursor: crosshair; }
.birth-location-map-crosshair { font-size: 30px; color: var(--gold-soft); }

.cosmogram-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.cosmogram-toolbar label {
  color: rgba(255, 248, 255, .72);
  font-size: 13px;
  font-weight: 700;
}

.cosmogram-toolbar select {
  min-height: 44px;
  max-width: 190px;
  border: 1px solid rgba(212, 175, 55, .42);
  border-radius: 9px;
  background: #1c0729;
  color: #fff8ff;
}

.cosmogram-map-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 10px;
}

.cosmogram-map-menu {
  margin: 0 0 10px;
  border: 1px solid rgba(156, 199, 235, .2);
  border-radius: 11px;
  background: rgba(7, 16, 31, .3);
}

.cosmogram-map-menu > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  color: var(--sky-blue-soft);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  list-style: none;
}

.cosmogram-map-menu > summary::-webkit-details-marker { display: none; }
.cosmogram-map-menu > summary::after { content: "+"; color: var(--gold-soft); font-size: 18px; }
.cosmogram-map-menu[open] > summary::after { content: "−"; }
.cosmogram-map-menu[open] > .cosmogram-map-modes { padding: 0 10px 10px; }

.cosmogram-map-modes button {
  min-height: 44px;
  border: 1px solid rgba(212, 175, 55, .28);
  border-radius: 8px;
  background: rgba(255, 248, 255, .06);
  color: rgba(255, 248, 255, .76);
  font-size: 12px;
  font-weight: 800;
}

.cosmogram-map-modes button.is-active {
  border-color: rgba(242, 193, 78, .74);
  background: rgba(242, 193, 78, .18);
  color: #fff8ff;
}

.cosmogram-mode-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -2px 0 10px;
}

.cosmogram-mode-hints[hidden] { display: none; }

.cosmogram-mode-hints span {
  border: 1px solid rgba(156, 199, 235, .28);
  border-radius: 999px;
  padding: 4px 8px;
  color: rgba(255, 248, 255, .72);
  font-size: 11px;
  font-weight: 800;
}

.cosmogram-guide {
  display: grid;
  margin: 0 0 10px;
}

.cosmogram-guide[hidden],
.cosmogram-guide-panel[hidden] { display: none; }

.cosmogram-guide-toggle {
  justify-self: start;
  min-height: 40px;
  border: 1px solid rgba(156, 199, 235, .34);
  border-radius: 8px;
  padding: 8px 11px;
  background: rgba(38, 105, 122, .16);
  color: #fff8ff;
  font-size: 13px;
  font-weight: 800;
}

.cosmogram-guide-toggle:focus-visible,
.cosmogram-guide-head button:focus-visible {
  outline: 3px solid rgba(242, 193, 78, .58);
  outline-offset: 2px;
}

.cosmogram-guide-panel {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  border: 1px solid rgba(156, 199, 235, .28);
  border-radius: 8px;
  padding: 12px;
  background: rgba(8, 24, 35, .72);
}

.cosmogram-guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cosmogram-guide-head h3 { color: #fff8ff; font-size: 16px; }

.cosmogram-guide-head button {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(212, 175, 55, .32);
  border-radius: 50%;
  background: transparent;
  color: #fff8ff;
  font-size: 24px;
}

.cosmogram-guide-panel ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
}

.cosmogram-guide-panel li {
  color: rgba(255, 248, 255, .76);
  line-height: 1.45;
}

.cosmogram-guide-panel li strong { color: #fff8ff; }

.cosmogram-house-status {
  border-top: 1px solid rgba(156, 199, 235, .2);
  padding-top: 10px;
  color: rgba(255, 248, 255, .68);
  font-size: 12px;
  line-height: 1.45;
}

.cosmogram-house-status[data-house-status="approximate"] { color: #f2c14e; }
.cosmogram-house-status[data-house-status="available"] { color: #9ee0c2; }

.cosmogram-wheel {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(222, 199, 124, .34);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 45%, rgba(113, 79, 169, .19), transparent 48%),
    linear-gradient(145deg, rgba(17, 11, 31, .99), rgba(5, 5, 12, .99));
  box-shadow:
    inset 0 0 54px rgba(166, 126, 209, .1),
    0 18px 46px rgba(0, 0, 0, .28);
}

body[data-active-section="sky"] .cosmogram-wheel {
  border-color: rgba(156, 199, 235, .42);
  background:
    radial-gradient(circle at 50% 50%, rgba(112, 158, 210, .2), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(26, 39, 72, .98), rgba(8, 12, 29, .99) 74%);
  box-shadow:
    inset 0 0 42px rgba(112, 158, 210, .12),
    0 0 30px rgba(83, 106, 164, .17);
}

.cosmogram-svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
  font-family: "Segoe UI Symbol", "Segoe UI", Arial, sans-serif;
  animation: none !important;
  transition: none !important;
}

.cosmogram-svg *,
.cosmogram-svg *::before,
.cosmogram-svg *::after {
  animation: none !important;
  transition: none !important;
}

.cosmogram-outer {
  fill: url(#cosmogramBackground);
  stroke: url(#cosmogramGoldStroke);
  stroke-width: 1.25;
}

.cosmogram-zodiac-ring,
.cosmogram-aspect-ring,
.cosmogram-orbit-ring {
  fill: none;
  stroke: rgba(222, 199, 124, .18);
  stroke-width: .8;
}

.cosmogram-zodiac-band {
  fill: none;
  stroke: rgba(224, 202, 135, .035);
  stroke-width: 20;
}

.cosmogram-aspect-ring { stroke-dasharray: 1.5 6; }
.cosmogram-orbit-ring { stroke: rgba(147, 111, 190, .15); }
.cosmogram-sector { stroke: rgba(222, 199, 124, .16); stroke-width: .7; }
.cosmogram-tick { stroke: rgba(240, 223, 170, .36); stroke-width: .7; }

.cosmogram-zodiac {
  fill: #eadba8;
  font-size: 14px;
  font-weight: 700;
  opacity: .94;
}

.cosmogram-map-label {
  display: none;
}

.cosmogram-svg[data-map-mode="research"] .cosmogram-map-label {
  fill: rgba(240, 223, 170, .74);
}

.cosmogram-aspect {
  cursor: pointer;
  opacity: .48;
  outline: none;
}

.cosmogram-aspect line,
.cosmogram-aspect circle {
  fill: none;
  stroke-width: 1.05;
  vector-effect: non-scaling-stroke;
}

.cosmogram-aspect:focus line,
.cosmogram-aspect:focus circle,
.cosmogram-aspect:hover line,
.cosmogram-aspect:hover circle {
  stroke-width: 2.8;
  opacity: 1;
}

.cosmogram-svg[data-focus-active="true"] .cosmogram-aspect[data-focus-state="background"] {
  opacity: .18;
}

.cosmogram-svg[data-focus-active="true"] .cosmogram-aspect[data-focus-state="related"] {
  opacity: .96;
}

.cosmogram-svg[data-focus-active="true"] .cosmogram-aspect[data-focus-state="related"] line,
.cosmogram-svg[data-focus-active="true"] .cosmogram-aspect[data-focus-state="related"] circle {
  stroke-width: 2.45;
}

.aspect-conjunction circle { stroke: #e6c866; }
.aspect-opposition line { stroke: #c36a78; }
.aspect-trine line { stroke: #73c4cd; }
.aspect-square line { stroke: #bd6ca6; }
.aspect-sextile line { stroke: #78bfae; }

.cosmogram-leader {
  stroke: rgba(235, 218, 165, .3);
  stroke-width: .7;
  stroke-dasharray: 1.5 2.5;
}

.cosmogram-exact-marker {
  fill: #eadba8;
  stroke: #251732;
  stroke-width: 1;
}

.cosmogram-planet {
  cursor: pointer;
  outline: none;
}

.cosmogram-planet .planet-shell {
  fill: #180523;
  stroke: #d9bd76;
  stroke-width: .95;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .46));
}

.cosmogram-planet text {
  fill: #fff8dc;
  font-size: 11px;
  font-weight: 800;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

.cosmogram-planet:hover .planet-shell,
.cosmogram-planet:focus .planet-shell {
  stroke: #fff0aa;
  stroke-width: 2.2;
}

.cosmogram-planet:focus {
  filter: drop-shadow(0 0 4px rgba(240, 223, 170, .86));
}

.cosmogram-svg[data-focus-active="true"] .cosmogram-planet[data-focus-state="background"],
.cosmogram-svg[data-focus-active="true"] .cosmogram-exact-marker[data-focus-state="background"],
.cosmogram-svg[data-focus-active="true"] .cosmogram-leader[data-focus-state="background"] {
  opacity: .28;
}

.cosmogram-svg[data-focus-active="true"] .cosmogram-planet[data-focus-state="related"],
.cosmogram-svg[data-focus-active="true"] .cosmogram-exact-marker[data-focus-state="related"],
.cosmogram-svg[data-focus-active="true"] .cosmogram-leader[data-focus-state="related"] {
  opacity: .82;
}

.cosmogram-svg[data-focus-active="true"] .cosmogram-planet[data-focus-state="active"] {
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(242, 193, 78, .86));
}

.cosmogram-svg[data-focus-active="true"] .cosmogram-planet[data-focus-state="active"] .planet-shell {
  stroke: #f2c14e;
  stroke-width: 2.7;
}

.cosmogram-svg[data-focus-active="true"] .cosmogram-exact-marker[data-focus-state="active"] {
  fill: #f2c14e;
  stroke: #fff6c8;
  stroke-width: 1.8;
}

.planet-sun .planet-shell {
  fill: url(#planetGradientSun);
  stroke: #fff0a6;
  stroke-width: 1.25;
  filter: drop-shadow(0 0 5px rgba(255, 174, 42, .72));
}

.planet-sun-glow {
  fill: rgba(255, 167, 35, .26);
  filter: url(#planetSunGlow);
  pointer-events: none;
}

.planet-sun-ray {
  stroke: #ffc34f;
  stroke-width: 1.25;
  stroke-linecap: round;
  opacity: .92;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.planet-sun-core {
  fill: rgba(255, 252, 200, .86);
  stroke: rgba(255, 255, 235, .76);
  stroke-width: .55;
  pointer-events: none;
}

.planet-sun-granule {
  fill: rgba(194, 86, 8, .62);
  pointer-events: none;
}

.planet-moon .planet-shell { fill: #242631; stroke: none; }
.planet-moon-lit { fill: url(#planetGradientMoon); pointer-events: none; }
.planet-moon-outline {
  fill: none;
  stroke: #f4f0da;
  stroke-width: 1.05;
  filter: drop-shadow(0 0 2px rgba(229, 230, 218, .42));
  pointer-events: none;
}
.planet-mercury .planet-shell { fill: url(#planetGradientMercury); stroke: #d8d6d0; }
.planet-venus .planet-shell { fill: url(#planetGradientVenus); stroke: #ffe4a2; }
.planet-mars .planet-shell { fill: url(#planetGradientMars); stroke: #ffb06e; }
.planet-jupiter .planet-shell { fill: url(#planetGradientJupiter); stroke: #ffd17b; }
.planet-saturn .planet-shell { fill: url(#planetGradientSaturn); stroke: #f2d58d; }
.planet-uranus .planet-shell { fill: url(#planetGradientUranus); stroke: #9deee7; }
.planet-neptune .planet-shell { fill: url(#planetGradientNeptune); stroke: #8ab7ff; }
.planet-pluto .planet-shell { fill: url(#planetGradientPluto); stroke: #c19a78; }

.planet-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  opacity: .82;
  vector-effect: non-scaling-stroke;
}

.planet-band {
  fill: none;
  stroke: rgba(62, 31, 19, .55);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.planet-jupiter-storm {
  fill: rgba(131, 47, 27, .72);
  stroke: rgba(255, 205, 150, .42);
  stroke-width: .35;
  pointer-events: none;
}

.planet-saturn,
.planet-venus { color: #f2d58d; }

.planet-uranus { color: #9deee7; }

.cosmogram-center-halo {
  fill: url(#cosmogramCenterGlow);
  filter: url(#cosmogramSoftGlow);
}

.cosmogram-center circle:nth-child(2) {
  fill: rgba(106, 13, 173, .22);
  stroke: rgba(212, 175, 55, .36);
}

.cosmogram-center circle:nth-child(3) {
  fill: rgba(9, 7, 16, .94);
  stroke: url(#cosmogramGoldStroke);
  stroke-width: 1.1;
}

.cosmogram-center text {
  fill: #f0dfaa;
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
}

.cosmogram-center text:last-child { font-size: 5.8px; fill: rgba(255, 248, 255, .62); letter-spacing: .16em; }

.cosmogram-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px 12px;
  margin: 12px 0 6px;
  color: rgba(255, 248, 255, .76);
  font-size: 12px;
}

.cosmogram-legend span::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 2px;
  margin-right: 5px;
  vertical-align: middle;
  border-radius: 99px;
  background: currentColor;
}

.legend-conjunction { color: #e6c866; }
.legend-opposition { color: #c36a78; }
.legend-trine { color: #73c4cd; }
.legend-square { color: #bd6ca6; }
.legend-sextile { color: #78bfae; }

.cosmogram-coordinate-note {
  color: rgba(255, 248, 255, .56);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

.cosmogram-detail {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(212, 175, 55, .35);
  border-radius: 12px;
  background: rgba(8, 1, 15, .72);
}

.cosmogram-detail[hidden] { display: none; }

.cosmogram-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cosmogram-detail-head h3 { color: #fff8ff; overflow-wrap: anywhere; }

.cosmogram-detail-head button {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(212, 175, 55, .32);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: #fff8ff;
  font-size: 24px;
}

.perspective-chip {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(111, 191, 200, .16);
  color: #a9e1e6;
  font-size: 11px;
  font-weight: 800;
}

.cosmogram-detail dl {
  display: grid;
  grid-template-columns: minmax(110px, .8fr) 1fr;
  gap: 7px 12px;
  margin: 0;
}

.cosmogram-detail dt { color: rgba(255, 248, 255, .62); }
.cosmogram-detail dd { margin: 0; color: #fff8ff; font-weight: 700; overflow-wrap: anywhere; }
.cosmogram-detail > p { color: rgba(255, 248, 255, .7); line-height: 1.45; }

.cosmogram-main-story {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  border-color: rgba(156, 199, 235, .28);
  background: rgba(9, 20, 42, .82);
  color: #fff8ff;
  white-space: normal;
}

.cosmogram-main-story[hidden] { display: none; }

.cosmogram-main-story-eyebrow {
  margin: 0;
  color: #a9e1e6;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.cosmogram-main-story h3 {
  margin: 0;
  color: #fff8ff;
  font-size: 1.1rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.cosmogram-main-story-summary,
.cosmogram-main-story-polarity,
.cosmogram-main-story-support,
.cosmogram-main-story-question {
  margin: 0;
  color: rgba(255, 248, 255, .86);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.cosmogram-main-story-support,
.cosmogram-main-story-question {
  padding: 9px 10px;
  border-left: 3px solid #d4af37;
  background: rgba(212, 175, 55, .08);
}

.cosmogram-main-story-reason {
  color: rgba(255, 248, 255, .62);
  line-height: 1.4;
}

.cosmogram-main-story-actions {
  display: grid;
  gap: 8px;
}

.cosmogram-main-story-actions button {
  min-height: 44px;
  justify-self: start;
  white-space: normal;
}

.planet-meaning-block {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(156, 199, 235, .22);
  border-radius: 8px;
  background: rgba(15, 27, 55, .62);
  color: #fff8ff;
}

.planet-meaning-essence,
.planet-meaning-context,
.planet-meaning-support,
.planet-meaning-question,
.planet-meaning-list {
  margin: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.planet-meaning-essence {
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
}

.planet-meaning-context {
  color: rgba(255, 248, 255, .86);
}

.planet-meaning-list {
  display: grid;
  gap: 6px;
  padding-left: 18px;
  color: rgba(255, 248, 255, .82);
}

.planet-meaning-support {
  color: rgba(255, 248, 255, .82);
}

.planet-meaning-question {
  padding: 10px 11px;
  border-left: 3px solid #73c4cd;
  background: rgba(115, 196, 205, .08);
  color: #fff8ff;
  font-weight: 800;
}

.planet-meaning-trust,
.cosmogram-detail-note {
  color: rgba(255, 248, 255, .62);
  font-size: .82rem;
  line-height: 1.42;
}

.aspect-detail-essence,
.aspect-detail-attention {
  display: grid;
  gap: 5px;
}

.aspect-detail-essence strong { color: #fff8ff; font-size: 13px; }
.aspect-detail-essence p { color: #fff; font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }

.aspect-detail-attention {
  padding: 10px 11px;
  border-left: 3px solid #73c4cd;
  background: rgba(115, 196, 205, .08);
}

.aspect-detail-attention strong { color: #a9e1e6; font-size: 13px; }
.aspect-detail-attention p { color: rgba(255, 248, 255, .84); line-height: 1.45; overflow-wrap: anywhere; }

.cosmogram-detail-disclosure {
  color: rgba(255, 248, 255, .76);
}

.cosmogram-detail-disclosure dl { padding: 4px 0 7px; }
.cosmogram-detail-disclosure p { color: rgba(255, 248, 255, .7); line-height: 1.45; overflow-wrap: anywhere; }
.cosmogram-methodology p:last-child { font-size: .82rem; color: rgba(255, 248, 255, .58); }

.cosmogram-interpretation {
  display: grid;
  gap: 6px;
  padding: 11px;
  border-left: 3px solid #d4af37;
  border-radius: 0 8px 8px 0;
  background: rgba(212, 175, 55, .08);
}

.cosmogram-interpretation[hidden] { display: none; }
.cosmogram-interpretation strong { color: #f0dfaa; }
.cosmogram-interpretation p { line-height: 1.45; }
.cosmogram-interpretation small { color: rgba(255, 248, 255, .6); line-height: 1.4; }

.cosmogram-explanations {
  display: grid;
  gap: 10px;
}

.cosmogram-explanations:empty { display: none; }

.cosmogram-explanation-card {
  display: grid;
  gap: 7px;
  padding: 13px;
  border: 1px solid rgba(212, 175, 55, .22);
  border-radius: 11px;
  background: rgba(8, 1, 15, .5);
}

.cosmogram-explanation-card strong { color: var(--gold-soft); font-size: 13px; }
.cosmogram-explanation-card p { color: #fff8ff; line-height: 1.48; overflow-wrap: anywhere; }
.cosmogram-explanation-card small { color: rgba(255, 248, 255, .58); line-height: 1.4; }
.cosmogram-explanation-card[data-perspective="astronomical"] { border-left: 3px solid #73c4cd; }
.cosmogram-explanation-card[data-perspective="traditional_astrological"] { border-left: 3px solid #d4af37; }
.cosmogram-explanation-card[data-perspective="symbolic_orbis"] { border-left: 3px solid #a77ad2; }
.cosmogram-explanation-card[data-perspective="reflective_practice"] { border-left: 3px solid #78bfae; }

.cosmogram-method-note {
  color: rgba(255, 248, 255, .68);
  font-size: .84rem;
}

.cosmogram-method-note p { margin: 0; padding-bottom: 8px; line-height: 1.45; }

body[data-active-section="influences"] .cosmogram-explanation-card[data-perspective="astronomical"] {
  background: linear-gradient(145deg, rgba(32, 63, 91, .78), rgba(12, 27, 48, .86));
}

body[data-active-section="influences"] .cosmogram-explanation-card[data-perspective="traditional_astrological"] {
  background: linear-gradient(145deg, rgba(73, 57, 63, .7), rgba(26, 25, 44, .88));
}

body[data-active-section="influences"] .cosmogram-explanation-card[data-perspective="symbolic_orbis"] {
  background: linear-gradient(145deg, rgba(57, 48, 105, .72), rgba(24, 25, 55, .9));
}

body[data-active-section="influences"] .cosmogram-explanation-card[data-perspective="reflective_practice"] {
  background: linear-gradient(145deg, rgba(42, 75, 91, .72), rgba(18, 38, 55, .9));
}

.personal-rhythm-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(212, 175, 55, .26);
  border-radius: 8px;
  background: rgba(8, 1, 15, .48);
}

.personal-rhythm-card > * {
  min-width: 0;
}

.personal-rhythm-card[hidden] { display: none; }

.personal-rhythm-head {
  display: grid;
  gap: 10px;
}

.personal-rhythm-head h3 {
  margin: 0;
  color: #fff8ff;
  font-size: 20px;
}

.personal-rhythm-head p {
  margin: 3px 0 0;
  color: rgba(255, 248, 255, .68);
}

.checkin-consent-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: #fff8ff;
  font-size: 13px;
}

.checkin-consent-toggle input {
  width: 18px;
  height: 18px;
  accent-color: #d4af37;
}

.checkin-consent-toggle span,
.personal-rhythm-note span {
  color: rgba(255, 248, 255, .82);
}

.personal-rhythm-overview,
.personal-rhythm-areas,
.personal-rhythm-influences,
.personal-rhythm-actions,
.personal-rhythm-reactions {
  display: grid;
  gap: 8px;
}

.personal-rhythm-overview p,
.personal-rhythm-area p,
.personal-rhythm-influence p {
  margin: 0;
  color: rgba(255, 248, 255, .8);
  line-height: 1.48;
  overflow-wrap: anywhere;
}

.personal-rhythm-overview strong,
.personal-rhythm-area strong,
.personal-rhythm-influence strong {
  color: var(--gold-soft);
}

.personal-rhythm-area,
.personal-rhythm-influence {
  display: grid;
  gap: 6px;
  padding: 11px;
  border: 1px solid rgba(255, 248, 255, .12);
  border-radius: 8px;
  background: rgba(255, 248, 255, .045);
}

.personal-rhythm-area.is-selected {
  border-color: rgba(212, 175, 55, .45);
}

.personal-rhythm-section-label {
  color: rgba(255, 248, 255, .58);
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.personal-rhythm-area-action {
  color: rgba(158, 224, 194, .82) !important;
  font-size: 13px;
}

.personal-rhythm-all-influences,
.cosmogram-secondary-disclosure {
  border-top: 1px solid rgba(255, 248, 255, .12);
  padding-top: 9px;
}

.personal-rhythm-all-influences > summary,
.cosmogram-secondary-disclosure > summary {
  cursor: pointer;
  color: var(--gold-soft);
  font-weight: 700;
  min-height: 38px;
}

.personal-rhythm-all-influences > .muted {
  margin: 8px 0;
}

.personal-rhythm-influence summary {
  cursor: pointer;
  color: #fff8ff;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.personal-rhythm-influence-group {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.personal-rhythm-influence-group h4,
.personal-rhythm-influence h5 {
  margin: 0;
  color: var(--gold-soft);
  line-height: 1.35;
}

.personal-rhythm-influence h5 {
  font-size: 15px;
}

.personal-rhythm-influence-meta {
  color: rgba(255, 248, 255, .58) !important;
  font-size: 12px;
}

.personal-rhythm-influence > details {
  margin-top: 4px;
}

.personal-rhythm-influence-compact {
  display: grid;
  gap: 4px;
  margin-top: 7px;
}

.personal-rhythm-influence-compact span {
  color: rgba(255, 248, 255, .58);
  font-size: 12px;
}

.personal-rhythm-influence dl {
  display: grid;
  gap: 5px;
  margin: 7px 0 0;
}

.personal-rhythm-influence dt {
  color: rgba(255, 248, 255, .56);
  font-size: 12px;
}

.personal-rhythm-influence dd {
  margin: 0 0 5px;
  color: rgba(255, 248, 255, .86);
  line-height: 1.42;
}

.personal-rhythm-actions,
.personal-rhythm-reactions {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.personal-rhythm-question-panel {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(115, 196, 205, .26);
  border-radius: 8px;
  background: rgba(115, 196, 205, .07);
}

.personal-rhythm-question-panel[hidden] { display: none; }

.personal-rhythm-question-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
}

.personal-rhythm-question-head h4 {
  margin: 0;
  color: #fff8ff;
  font-size: 16px;
}

.personal-rhythm-field {
  display: grid;
  gap: 6px;
  color: rgba(255, 248, 255, .82);
  font-size: 13px;
}

.personal-rhythm-field select,
.personal-rhythm-field textarea {
  width: 100%;
}

.personal-rhythm-question-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.personal-rhythm-question-answer {
  display: grid;
  gap: 8px;
}

.personal-rhythm-question-answer article {
  display: grid;
  gap: 4px;
}

.personal-rhythm-question-answer strong {
  color: var(--gold-soft);
}

.personal-rhythm-question-answer p,
.personal-rhythm-question-answer small {
  margin: 0;
  color: rgba(255, 248, 255, .82);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.error-text {
  color: #ffb3bd !important;
}

.personal-rhythm-reactions button {
  min-height: 38px;
}

.personal-rhythm-actions button,
.personal-rhythm-reactions button,
.personal-rhythm-question-actions button {
  min-width: 0;
  overflow-wrap: anywhere;
}

.checkin-consent-toggle:focus-within,
.personal-rhythm-influence summary:focus-visible,
.personal-rhythm-actions button:focus-visible,
.personal-rhythm-reactions button:focus-visible,
.personal-rhythm-note textarea:focus-visible,
.personal-rhythm-field select:focus-visible,
.personal-rhythm-field textarea:focus-visible,
.personal-rhythm-question-actions button:focus-visible,
.personal-rhythm-question-head button:focus-visible {
  outline: 3px solid rgba(212, 175, 55, .58);
  outline-offset: 2px;
}

.personal-rhythm-note {
  display: grid;
  gap: 6px;
  color: rgba(255, 248, 255, .7);
}

.personal-rhythm-note textarea {
  width: 100%;
  min-height: 82px;
}

@media (max-width: 430px) {
  .planner-day-head { align-items: flex-start; flex-direction: column; }
  .planner-tone { text-align: left; }
  .planner-quality-card { padding: 11px; }
  .planner-quality-head { align-items: flex-start; flex-direction: column; }
  .planner-quality-summary { font-size: 13px; }
  .planner-quality-reason strong { font-size: 11px; }
  .journal-calendar-summary { font-size: 12px; line-height: 1.45; }
  .location-settings-head { align-items: stretch; flex-direction: column; }
  .location-settings-head #mySkyTitle { max-width: none; text-align: left; }
  .location-settings-editor .button-row { display: grid; grid-template-columns: 1fr; }
  .sky-location-indicator { align-items: flex-start; flex-wrap: wrap; }
  .sky-location-action { margin-left: 0; }
  .sky-scope-toggle { gap: 6px; }
  .sky-scope-toggle .identity-field-button { padding-inline: 8px; font-size: .86rem; }
  .sky-human-story { padding: 12px; }
  .sky-human-essence h3 { font-size: 1.08rem; }
  .cosmogram-mode-panel,
  .explanation-mode-panel { padding: 10px; }
  .visual-mode-tab { padding-inline: 3px; font-size: 12px; }
  .cosmogram-toolbar { align-items: stretch; flex-direction: column; }
  .cosmogram-toolbar select { width: 100%; max-width: none; }
  .cosmogram-map-modes { gap: 5px; }
  .cosmogram-map-modes button { font-size: 11px; padding-inline: 4px; }
  .cosmogram-guide-toggle { width: 100%; justify-self: stretch; }
  .cosmogram-main-story { padding: 11px; }
  .cosmogram-main-story-actions button { width: 100%; justify-self: stretch; }
  .cosmogram-detail { padding: 11px; gap: 9px; }
  .planet-meaning-block { padding: 10px; }
  .planet-meaning-essence { font-size: .98rem; }
  .cosmogram-detail dl { grid-template-columns: 1fr; gap: 3px; }
  .cosmogram-detail dd { margin-bottom: 6px; }
  .personal-rhythm-actions,
  .personal-rhythm-reactions,
  .personal-rhythm-question-actions,
  .personal-rhythm-question-head { grid-template-columns: 1fr; }
}

@media (max-width: 340px) {
  .cosmogram-map-modes {
    grid-template-columns: minmax(44px, 3fr) minmax(44px, 4fr) minmax(44px, 5fr);
    gap: 4px;
  }
  .cosmogram-map-modes button { padding-inline: 2px; }
}

@media (min-width: 700px) {
  .cosmogram-heading { grid-template-columns: minmax(220px, .8fr) 1fr; align-items: end; }
  .cosmogram-explanations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cosmogram-explanation-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .personal-rhythm-head { grid-template-columns: 1fr minmax(220px, auto); align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .view.is-active.is-route-entering {
    animation: none;
  }

  button:active:not(:disabled) {
    transform: none;
  }
}

/* ORBIS visual refresh v1: calmer night surfaces and clearer hierarchy. */
:root {
  --bg: #08111f;
  --bg-2: #111d35;
  --card: rgba(18, 29, 52, .94);
  --card-2: rgba(28, 43, 72, .72);
  --ink: #edf3f7;
  --light: #f7f3ea;
  --muted: #a9b9ca;
  --violet: #8065c5;
  --violet-dark: #f0e9ff;
  --gold: #e4bd4b;
  --gold-soft: #f4df9c;
  --line: rgba(228, 189, 75, .26);
  --shadow: 0 22px 50px rgba(2, 8, 20, .38);
}

body {
  background:
    radial-gradient(circle at 82% 4%, rgba(228, 189, 75, .11), transparent 24%),
    radial-gradient(circle at 12% 18%, rgba(91, 70, 151, .24), transparent 32%),
    linear-gradient(180deg, #08111f 0%, #101b31 56%, #17132d 100%);
}

.app-shell { padding-top: max(18px, env(safe-area-inset-top, 0px)); }

.hero {
  min-height: 292px;
  padding: 22px;
  border-radius: 20px;
  border-color: rgba(228, 189, 75, .34);
  background:
    radial-gradient(circle at 88% 12%, rgba(228, 189, 75, .15), transparent 24%),
    linear-gradient(145deg, rgba(20, 36, 64, .98), rgba(9, 17, 32, .98));
}

.hero::after { opacity: .48; }
.brand-mark { border-color: var(--gold); }
.hero-copy { color: #dbe6f0; line-height: 1.5; }

h1, h2, h3 { letter-spacing: -.015em; }
h2 { color: var(--violet-dark); }

.gold-button, .ghost-button { border-radius: 12px; }
.gold-button { background: var(--gold); box-shadow: 0 8px 20px rgba(228, 189, 75, .16); }
.ghost-button { border-color: rgba(228, 189, 75, .38); color: var(--gold-soft); }

.card, .mini-card, .level-card {
  border-color: rgba(151, 178, 213, .16);
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 16px 36px rgba(2, 8, 20, .24), inset 0 1px rgba(255, 255, 255, .035);
}

.card { padding: 20px; }
.card h2, .card h3, .stats-grid strong, label span { color: var(--violet-dark); }
.muted { color: var(--muted); }

.stats-grid div, .daily-cycle article {
  border-color: rgba(151, 178, 213, .14);
  border-radius: 12px;
  background: var(--card-2);
}

.progress-line { background: rgba(169, 185, 202, .18); }

textarea, input, select {
  border-color: rgba(151, 178, 213, .22);
  border-radius: 11px;
  background: rgba(7, 16, 31, .58);
  color: var(--ink);
}

textarea::placeholder, input::placeholder { color: rgba(169, 185, 202, .72); }

.mini-card { color: var(--ink); }
.mini-card:hover, .mini-card:focus-visible, .level-card:hover, .level-card:focus-visible {
  border-color: rgba(228, 189, 75, .5);
  background: rgba(28, 43, 72, .9);
}

.visual-card {
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(18, 29, 52, .96), rgba(11, 20, 37, .98));
}

.visual-card .ghost-button {
  border-color: rgba(151, 178, 213, .24);
  background: rgba(255, 255, 255, .045);
  color: var(--sky-blue-soft);
  box-shadow: none;
}

.visual-card .ghost-button:hover,
.visual-card .ghost-button:focus-visible {
  border-color: rgba(228, 189, 75, .55);
  background: rgba(228, 189, 75, .12);
  color: var(--gold-soft);
}

.visual-mode-tabs { border-radius: 14px; background: rgba(255, 255, 255, .035); }
.cosmogram-mode-panel, .explanation-mode-panel { border-radius: 16px; }

/* Keep intentionally light utility surfaces readable within the dark theme. */
.message-box,
.level-detail .anchor,
.identity-progress,
.identity-flow,
.identity-field-button,
.identity-flow input {
  color: #281735;
}

.message-box strong,
.identity-progress strong,
.identity-flow h3,
.identity-field-button {
  color: #281735;
}

.cosmic-rhythm-card {
  background:
    radial-gradient(circle at 92% 12%, rgba(228, 189, 75, .14), transparent 28%),
    linear-gradient(160deg, rgba(20, 36, 64, .98), rgba(11, 20, 37, .98));
  color: var(--ink);
}

.cosmic-rhythm-card h2,
.cosmic-rhythm-card .cosmic-bars div,
.cosmic-rhythm-card .cosmic-score {
  color: var(--violet-dark);
}

.cosmic-rhythm-card .stats-grid div {
  border-color: rgba(151, 178, 213, .14);
  background: rgba(28, 43, 72, .72);
}

.admin-entry {
  border-color: rgba(228, 189, 75, .36);
  background: rgba(28, 43, 72, .72);
  color: var(--ink);
}

.journal-empty-state {
  display: grid;
  gap: 10px;
  padding: 22px 18px;
  border: 1px solid rgba(156, 199, 235, .24);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(25, 42, 72, .9), rgba(16, 26, 50, .88));
  box-shadow: 0 18px 42px rgba(2, 8, 20, .2);
}

.journal-empty-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(228, 189, 75, .56);
  border-radius: 50%;
  color: var(--gold-soft);
  font-size: 22px;
}

.journal-empty-state h3,
.journal-empty-state p { margin: 0; }

.journal-empty-state h3 { color: #fff8ff; }
.journal-empty-state > p:not(.eyebrow) { color: rgba(247, 248, 255, .72); line-height: 1.5; }
.journal-empty-action { width: 100%; margin-top: 4px; }

.onboarding-identity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.onboarding-intro {
  margin: -4px 0 2px;
  color: rgba(255, 248, 255, .76);
  line-height: 1.5;
}

.onboarding-note {
  margin: -2px 0 2px;
  color: rgba(255, 248, 255, .66);
  font-size: .82rem;
  line-height: 1.4;
}

.onboarding-card small { color: inherit; opacity: .7; font-weight: 600; }

.onboarding-advanced,
.daily-cycle-details {
  border: 1px solid rgba(156, 199, 235, .24);
  border-radius: 14px;
  background: rgba(156, 199, 235, .06);
}

.onboarding-advanced > summary,
.daily-cycle-details > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  color: rgba(247, 248, 255, .82);
  cursor: pointer;
  font-weight: 700;
}

.onboarding-advanced[open],
.daily-cycle-details[open] { padding-bottom: 12px; }

.onboarding-advanced[open] > summary,
.daily-cycle-details[open] > summary { margin-bottom: 10px; }

.onboarding-advanced > label,
.onboarding-advanced > .onboarding-identity-grid,
.daily-cycle-details > .daily-cycle,
.daily-cycle-details > .message-box { margin-inline: 12px; }

.identity-readiness-card {
  display: grid;
  gap: 9px;
  margin: 14px 0 2px;
  padding: 13px;
  border: 1px solid rgba(156, 199, 235, .24);
  border-radius: 14px;
  background: rgba(156, 199, 235, .07);
}

.identity-readiness-card[hidden] { display: none; }
.identity-readiness-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.identity-readiness-head h3 { margin: 0; color: #fff8ff; font-size: 1rem; }
.identity-readiness-head .eyebrow { margin: 0 0 2px; }
.identity-readiness-head > strong { color: var(--gold-soft); font-size: 1.1rem; }
.identity-readiness-card p:not(.eyebrow) { margin: 0; color: rgba(247, 248, 255, .72); line-height: 1.45; font-size: .88rem; }
.identity-readiness-card .ghost-button { width: 100%; min-height: 42px; }

.cosmogram-preview-points {
  display: grid;
  gap: 7px;
  margin: 4px 0 2px;
  color: rgba(247, 248, 255, .78);
  font-size: .9rem;
}

.cosmogram-preview-points span { display: flex; align-items: center; gap: 8px; }
.cosmogram-preview-points strong {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(228, 189, 75, .18);
  color: var(--gold-soft);
  font-size: .78rem;
}

@media (max-width: 420px) {
  .onboarding-identity-grid { grid-template-columns: 1fr; gap: 0; }
}

/* Start-screen hierarchy: one human summary, one primary next step. */
.message-box.sky-human-story {
  gap: 14px;
  padding: 20px;
  border-color: rgba(228, 189, 75, .3);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 0%, rgba(228, 189, 75, .13), transparent 32%),
    linear-gradient(145deg, rgba(25, 42, 72, .94), rgba(11, 20, 37, .98));
  box-shadow: 0 18px 42px rgba(2, 8, 20, .25), inset 0 1px rgba(255, 255, 255, .05);
}

.sky-human-essence h3 {
  max-width: 25ch;
  font-size: clamp(1.35rem, 5vw, 1.75rem);
  line-height: 1.18;
}

.sky-human-resonance { color: #dce7f0; }
.sky-human-action { border-radius: 0 12px 12px 0; }

.message-box.sky-human-story .sky-human-resonance > strong {
  color: var(--sky-blue-light);
}

.message-box.sky-human-story .sky-human-action > strong {
  color: var(--gold-soft);
}

.message-box.sky-human-story .sky-human-question > strong {
  color: #9cc7eb;
}

.sky-primary-action {
  width: 100%;
  min-height: 50px;
  margin-top: 2px;
}

.sky-human-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sky-human-actions .sky-focus-action {
  grid-column: 1 / -1;
  min-height: 50px;
}

.sky-human-actions .sky-simple-action { grid-column: 1 / -1; }
.sky-human-simple {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(156, 199, 235, .22);
  border-radius: 12px;
  background: rgba(156, 199, 235, .06);
}
.sky-human-simple[hidden] { display: none; }
.sky-human-simple p { margin: 0; }

.sky-human-actions .sky-primary-action,
.sky-human-actions .sky-share-action {
  width: 100%;
  min-height: 46px;
  margin-top: 0;
}

body[data-active-section="influences"] .sky-primary-action { display: none; }

/* The cosmogram tab should open directly on the map, without repeating the Today story. */
body[data-active-section="influences"] #skyHumanStory { display: none; }

.visual-mode-tab { color: var(--sky-muted); }

body.has-v2-navigation .hero {
  min-height: 148px;
  align-content: center;
  gap: 12px;
  padding: 16px 18px;
  position: relative;
  top: auto;
  z-index: 1;
  box-shadow: 0 18px 38px rgba(2, 8, 20, .26), inset 0 1px rgba(255, 255, 255, .05);
}

body.has-v2-navigation .hero-actions { display: none; }
body.has-v2-navigation .hero-copy,
body.has-v2-navigation .hero-purpose { display: none; }
body.has-v2-navigation .hero-copy { max-width: 34ch; font-size: 15px; }
body.has-v2-navigation .hero-purpose { max-width: 34ch; font-size: 13px; }
body.has-v2-navigation .hero-status { font-size: 10px; }
body.has-v2-navigation .brand-mark { width: 48px; height: 48px; font-size: 15px; }
body.has-v2-navigation .hero::before { inset: 8px; border-radius: 12px; }
body.has-v2-navigation .hero::after {
  top: 20px;
  right: 20px;
  width: 74px;
  height: 74px;
  opacity: .32;
}

.hero-meta-row {
  display: grid;
  grid-template-columns: minmax(110px, .7fr) minmax(0, 1.3fr);
  gap: 12px;
  position: relative;
  z-index: 1;
}

.hero-profile {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 5px;
  min-width: 0;
}

.hero-day-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 3px 6px;
  min-width: 0;
  text-align: right;
}

.hero-meta-label {
  color: var(--gold-soft);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.hero-profile strong {
  overflow: hidden;
  color: var(--sky-text);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-meta-separator { color: var(--sky-muted); }
.hero-day-date { color: var(--sky-blue-soft); font-size: 12px; font-weight: 800; }
.hero-day-data {
  max-width: 100%;
  color: var(--sky-muted);
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.home-landing-view { max-width: 760px; margin-inline: auto; }
.home-welcome-card { padding: clamp(22px, 5vw, 36px); }
.home-welcome-card h2 { margin-bottom: 6px; font-size: clamp(28px, 6vw, 42px); }
.home-context-line { display: flex; flex-wrap: wrap; gap: 6px; color: var(--sky-muted); font-size: 13px; }
.home-cycle-progress { display: grid; grid-template-columns: auto minmax(20px, 1fr) auto minmax(20px, 1fr) auto; align-items: center; gap: 8px; margin-top: 20px; color: var(--sky-muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.home-cycle-progress i { height: 1px; background: rgba(156, 199, 235, .22); }
.home-cycle-progress span.is-complete { color: var(--gold-soft); }
.home-cycle-progress span.is-current { color: var(--sky-text); }
.home-cycle-progress span.is-complete + i { background: rgba(228, 189, 75, .62); }
.home-day-theme { display: grid; gap: 7px; margin: 24px 0 20px; padding: 18px; border: 1px solid rgba(228, 189, 75, .25); border-radius: 16px; background: rgba(228, 189, 75, .055); }
.home-day-theme > span { color: var(--gold-soft); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.home-day-theme strong { color: var(--sky-text); font-size: 20px; line-height: 1.25; }
.home-day-theme p { margin: 0; color: var(--sky-muted); line-height: 1.55; }
.home-compass-item { display: grid; gap: 4px; margin-top: 9px; padding-top: 13px; border-top: 1px solid rgba(156, 199, 235, .12); }
.home-compass-item small { color: var(--sky-blue-light); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.home-compass-item.is-boundary small { color: #d8b6a5; }
.home-compass-item.is-evening small { color: var(--gold-soft); }
.home-primary-action { width: 100%; min-height: 52px; }
.home-secondary-action { width: 100%; margin-top: 9px; }
.home-focus-status { min-height: 20px; margin: 9px 0 0; color: var(--gold-soft); font-size: 12px; text-align: center; }
.home-focus-status:empty { display: none; }
.home-data-state:empty { display: none; }
.home-destination-list { display: grid; gap: 10px; margin-top: 14px; }
.home-destination { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 17px; border: 1px solid rgba(156, 199, 235, .18); border-radius: 15px; background: rgba(10, 24, 46, .7); color: var(--sky-text); text-align: left; }
.home-destination > span:first-child { display: grid; gap: 4px; }
.home-destination strong { font-size: 15px; }
.home-destination small { color: var(--sky-muted); font-size: 12px; }
.home-destination:hover, .home-destination:focus-visible { border-color: rgba(228, 189, 75, .55); background: rgba(228, 189, 75, .08); }

/* Optional evening atmosphere: warmer, slower and still quiet enough for reading. */
body.has-v2-navigation.evening-mode {
  background:
    radial-gradient(circle at 78% 10%, rgba(210, 118, 92, .2), transparent 28%),
    radial-gradient(circle at 18% 24%, rgba(111, 31, 72, .34), transparent 34%),
    linear-gradient(180deg, #1d0c1c 0%, #281126 48%, #35152e 100%);
}

body.has-v2-navigation.evening-mode .hero,
body.has-v2-navigation.evening-mode .visual-card {
  border-color: rgba(227, 169, 112, .34);
  background:
    radial-gradient(circle at 88% 5%, rgba(227, 169, 112, .14), transparent 27%),
    linear-gradient(145deg, rgba(67, 24, 50, .98), rgba(29, 13, 30, .98));
}

body.has-v2-navigation.evening-mode .day-picture,
body.has-v2-navigation.evening-mode .message-box.sky-human-story {
  border-color: rgba(227, 169, 112, .34);
  background: linear-gradient(145deg, rgba(67, 24, 50, .94), rgba(29, 13, 30, .98));
}

body.has-v2-navigation.evening-mode .day-picture-visual {
  background: radial-gradient(circle at 50% 50%, rgba(227, 169, 112, .2), transparent 32%), linear-gradient(135deg, #4a1b36, #1b0c1f);
}

body.has-v2-navigation.evening-mode .evening-mode-toggle {
  border-color: rgba(227, 169, 112, .62);
  background: rgba(227, 169, 112, .12);
  color: #f3d2a5;
}

.evening-mode-toggle {
  min-height: 38px;
  border-color: rgba(212, 175, 55, .3);
  color: var(--sky-blue-light);
  font-size: 11px;
}

body.has-v2-navigation .sky-context-bar .evening-mode-toggle {
  width: 100%;
  margin-top: 8px;
}

.wellbeing-note {
  margin-top: 8px;
  color: var(--sky-muted);
  font-size: 11px;
  line-height: 1.45;
  text-align: left;
}

.wellbeing-note summary {
  min-height: 34px;
  display: flex;
  align-items: center;
  color: var(--sky-blue-light);
  cursor: pointer;
  font-weight: 800;
}

.wellbeing-note p { margin: 0 0 4px; }

/* Reading order: first the image and plain-language reflection, then the data layers. */
body[data-active-section="sky"] #visualView .visual-loading-skeleton { order: 0; }
body[data-active-section="sky"] #visualView .day-reading { order: 1; }
body[data-active-section="sky"] #visualView .day-passport { order: 2; }
body[data-active-section="sky"] #visualView .sky-context-bar { order: 3; }
body[data-active-section="sky"] #visualView .visual-mode-tabs { order: 4; }
body[data-active-section="sky"] #visualView .lunar-state-context { order: 5; }
body[data-active-section="sky"] #visualView .cosmogram-mode-panel,
body[data-active-section="sky"] #visualView .explanation-mode-panel { order: 6; }

.evening-mode-prompt[hidden] { display: none; }
.evening-mode-prompt {
  position: relative;
  z-index: 1;
  max-width: 34ch;
  padding: 10px 12px;
  border-left: 3px solid #dca16f;
  color: #f0cfa7;
  font-size: 13px;
  font-style: italic;
  line-height: 1.45;
}

body.has-v2-navigation.evening-mode .hero::after,
body.has-v2-navigation.evening-mode .day-picture-rays {
  animation: eveningBreath 8s ease-in-out infinite;
}

@keyframes eveningBreath {
  0%, 100% { opacity: .22; transform: scale(.98); }
  50% { opacity: .52; transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  body.has-v2-navigation.evening-mode .hero::after,
  body.has-v2-navigation.evening-mode .day-picture-rays { animation: none; }
}

details.lunar-state-context {
  display: block;
  margin: 4px 0 12px;
  padding: 0 12px;
  border-color: rgba(151, 178, 213, .16);
  border-radius: 12px;
  background: rgba(7, 16, 31, .32);
}

details.lunar-state-context > summary {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--sky-muted);
  cursor: pointer;
  list-style: none;
}

details.lunar-state-context > summary::-webkit-details-marker { display: none; }

details.lunar-state-context > summary::after {
  content: "+";
  color: var(--gold-soft);
  font-size: 18px;
}

details.lunar-state-context[open] > summary::after { content: "−"; }

details.lunar-state-context[open] > .lunar-state-toolbar { margin-top: 4px; }
details.lunar-state-context[open] > .lunar-state-panel { margin-bottom: 12px; }

.lunar-state-tab,
.lunar-refresh-button { min-height: 44px; }

.sky-location-indicator { min-height: 44px; }

details > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
}

@media (max-width: 620px) {
  .app-shell { padding-top: max(12px, env(safe-area-inset-top, 0px)); }
  .hero { min-height: 250px; padding: 18px; border-radius: 18px; }
  body.has-v2-navigation .hero { min-height: 136px; padding: 14px 16px; border-radius: 16px; }
  body.has-v2-navigation .hero-copy { font-size: 14px; }
  body.has-v2-navigation .hero-purpose { font-size: 13px; margin-top: 6px; }
  .card { padding: 16px; }
  .hero-meta-row { grid-template-columns: minmax(92px, .65fr) minmax(0, 1.35fr); gap: 8px; }
}

/* Lunar rhythm: make the daily state feel like a clear, calm focal card. */
body.has-v2-navigation .lunar-state-context {
  border-color: rgba(156, 199, 235, .2);
  border-radius: 14px;
  background:
    radial-gradient(circle at 92% 8%, rgba(228, 189, 75, .14), transparent 26%),
    linear-gradient(145deg, rgba(28, 47, 78, .92), rgba(10, 20, 39, .96));
  box-shadow: 0 14px 30px rgba(2, 8, 20, .22), inset 0 1px rgba(255, 255, 255, .05);
}

body.has-v2-navigation .lunar-state-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--sky-text);
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: none;
}

body.has-v2-navigation .lunar-state-label::before {
  content: "☾";
  display: inline-grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(228, 189, 75, .42);
  border-radius: 50%;
  color: var(--gold-soft);
  font-size: 16px;
  box-shadow: 0 0 14px rgba(228, 189, 75, .16);
}

body.has-v2-navigation .lunar-state-panel {
  margin: 0 0 2px;
  padding: 14px;
  border-color: rgba(228, 189, 75, .28);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(18, 31, 56, .96), rgba(8, 17, 33, .98));
  color: var(--sky-text);
  box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}

body.has-v2-navigation .lunar-state-title {
  display: block;
  color: var(--gold-soft);
  font-size: 17px;
  line-height: 1.3;
}

body.has-v2-navigation .lunar-state-summary {
  margin: 6px 0 0;
  color: var(--sky-muted);
  font-size: 12px;
  line-height: 1.45;
}

body.has-v2-navigation .lunar-technical-details {
  margin-top: 10px;
  border-top: 1px solid rgba(156, 199, 235, .14);
  padding-top: 2px;
}

body.has-v2-navigation .lunar-technical-details > summary {
  min-height: 40px;
  color: var(--sky-blue-soft);
  font-size: 12px;
}

body.has-v2-navigation .lunar-state-panel dt { color: var(--sky-muted); }
body.has-v2-navigation .lunar-state-panel dd { color: var(--sky-text); }

/* Personal identity: a distinct, high-contrast profile layer. */
body.has-v2-navigation .identity-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(156, 199, 235, .2);
  background:
    radial-gradient(circle at 94% 2%, rgba(228, 189, 75, .13), transparent 24%),
    linear-gradient(145deg, rgba(24, 42, 72, .96), rgba(9, 18, 35, .98));
  box-shadow: 0 18px 40px rgba(2, 8, 20, .28), inset 0 1px rgba(255, 255, 255, .05);
}

body.has-v2-navigation .identity-card::before {
  content: "369";
  position: absolute;
  top: 16px;
  right: 18px;
  color: rgba(228, 189, 75, .12);
  font-family: Georgia, serif;
  font-size: 42px;
  letter-spacing: -.08em;
  pointer-events: none;
}

body.has-v2-navigation .identity-card > * { position: relative; z-index: 1; }
body.has-v2-navigation .identity-card > .eyebrow { color: var(--gold-soft); }
body.has-v2-navigation .identity-card > h2 { color: var(--sky-text); }
body.has-v2-navigation .identity-card > #identitySummary {
  max-width: 42ch;
  color: var(--sky-muted);
  line-height: 1.5;
}

body.has-v2-navigation .identity-progress,
body.has-v2-navigation .identity-flow {
  border-color: rgba(156, 199, 235, .2);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(31, 56, 91, .78), rgba(12, 25, 47, .9));
  color: var(--sky-text);
  box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}

body.has-v2-navigation .identity-progress strong,
body.has-v2-navigation .identity-flow h3 {
  color: var(--gold-soft);
}

body.has-v2-navigation .identity-progress-bar {
  height: 9px;
  background: rgba(169, 185, 202, .18);
}

body.has-v2-navigation .identity-progress-bar span {
  background: linear-gradient(90deg, var(--sky-blue-light), var(--gold));
  box-shadow: 0 0 12px rgba(228, 189, 75, .28);
}

body.has-v2-navigation .identity-progress ul { color: var(--sky-muted); }

body.has-v2-navigation .identity-layer-card {
  border-color: rgba(156, 199, 235, .18);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(28, 50, 82, .82), rgba(12, 24, 45, .9));
  color: var(--sky-text);
  box-shadow: inset 0 1px rgba(255, 255, 255, .035);
}

body.has-v2-navigation .identity-layer-card h3 { color: var(--sky-text); }
body.has-v2-navigation .identity-layer-card p { color: var(--sky-muted); }
body.has-v2-navigation .identity-meta span {
  background: rgba(156, 199, 235, .1);
  color: var(--sky-blue-soft);
}

body.has-v2-navigation .identity-card #identityNext {
  border-color: rgba(228, 189, 75, .24);
  border-radius: 12px;
  background: rgba(228, 189, 75, .08);
  color: var(--sky-muted);
}

body.has-v2-navigation .identity-card #identityNext strong { color: var(--gold-soft); }
body.has-v2-navigation .identity-card #identitySafeNote { color: rgba(169, 185, 202, .72); }

/* Self: one calm settings hub instead of a long collection of unrelated cards. */
body.has-v2-navigation #identityView > .section-title { margin-bottom: 14px; }
body.has-v2-navigation #identityView > .section-title .muted { margin: 5px 0 0; max-width: 38ch; }

.self-settings-list { display: grid; gap: 10px; }
.self-settings-section {
  overflow: hidden;
  border: 1px solid rgba(156, 199, 235, .17);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(20, 37, 64, .94), rgba(8, 17, 33, .98));
  box-shadow: 0 12px 30px rgba(2, 8, 20, .2), inset 0 1px rgba(255, 255, 255, .04);
}

.self-settings-section > summary {
  min-height: 70px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 18px;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  color: var(--sky-text);
  cursor: pointer;
  list-style: none;
}

.self-settings-section > summary::-webkit-details-marker { display: none; }
.self-settings-section > summary::after { content: "+"; color: var(--gold-soft); font-size: 20px; text-align: center; }
.self-settings-section[open] > summary::after { content: "−"; }
.self-settings-section > summary strong,
.self-settings-section > summary small { display: block; }
.self-settings-section > summary strong { font-size: 15px; line-height: 1.3; }
.self-settings-section > summary small { margin-top: 3px; color: var(--sky-muted); font-size: 12px; line-height: 1.3; }
.self-settings-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(228, 189, 75, .34);
  border-radius: 50%;
  color: var(--gold-soft);
  background: rgba(228, 189, 75, .07);
}

.self-settings-body { padding: 0 10px 10px; }
.self-settings-body > .card { margin: 0; border-radius: 12px; box-shadow: none; }
.settings-control-row { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.settings-control-row h3 { margin: 0 0 4px; }
.settings-control-row p { margin: 0; }
.settings-status { margin: 12px 0 0; min-height: 1.4em; }

.settings-switch { position: relative; flex: 0 0 auto; width: 50px; height: 30px; cursor: pointer; }
.settings-switch input { position: absolute; opacity: 0; pointer-events: none; }
.settings-switch span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(156, 199, 235, .28);
  border-radius: 999px;
  background: rgba(169, 185, 202, .16);
  transition: background .18s ease, border-color .18s ease;
}
.settings-switch span::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sky-muted);
  transition: transform .18s ease, background .18s ease;
}
.settings-switch input:checked + span { border-color: rgba(228, 189, 75, .55); background: rgba(228, 189, 75, .22); }
.settings-switch input:checked + span::after { transform: translateX(20px); background: var(--gold-soft); }
.settings-switch input:focus-visible + span { outline: 2px solid var(--sky-blue-light); outline-offset: 3px; }
.settings-switch input:disabled + span { opacity: .45; cursor: not-allowed; }

.privacy-points { display: grid; gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.privacy-points li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; color: var(--sky-muted); line-height: 1.45; }
.privacy-points li > span:first-child { color: var(--gold-soft); }

@media (max-width: 620px) {
  .self-settings-section > summary { min-height: 68px; }
  .self-settings-body { padding-inline: 8px; padding-bottom: 8px; }
}
.legal-page { min-height: 100vh; margin: 0; background: radial-gradient(circle at 15% 0%, rgba(65, 102, 156, .28), transparent 42%), linear-gradient(160deg, #101a32 0%, #1c1436 100%); color: var(--sky-text, #e8eef8); }
.legal-shell { width: min(780px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 64px; }
.legal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.legal-brand { color: #f5f7fb; font-size: 18px; font-weight: 800; text-decoration: none; letter-spacing: .04em; }
.legal-brand span { color: #f4ca55; }
.legal-back { color: #b8d6f3; font-size: 13px; text-decoration: none; }
.legal-back:hover, .legal-back:focus-visible { color: #f4ca55; }
.legal-card { padding: clamp(24px, 5vw, 48px); border: 1px solid rgba(156, 199, 235, .2); border-radius: 18px; background: rgba(11, 24, 49, .8); box-shadow: 0 18px 50px rgba(0, 0, 0, .2); }
.legal-card h1 { margin: 0 0 8px; font-size: clamp(28px, 5vw, 42px); line-height: 1.1; }
.legal-card h2 { margin: 30px 0 10px; color: #f4ca55; font-size: 19px; }
.legal-card p, .legal-card li { color: #c7d5e8; font-size: 15px; line-height: 1.7; }
.legal-card ul { padding-left: 22px; }
.legal-card a { color: #9cc7eb; }
.legal-card code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; padding: 3px 6px; border-radius: 5px; background: rgba(0, 0, 0, .22); color: #d9e7f7; font-size: 13px; }
.legal-updated { margin: 0 0 24px; color: #9aaeca !important; font-size: 13px !important; }
@media (max-width: 520px) { .legal-shell { width: min(100% - 20px, 780px); padding-top: 18px; } .legal-header { align-items: flex-start; flex-direction: column; gap: 8px; } .legal-card { padding: 22px 18px; } .legal-card p, .legal-card li { font-size: 14px; } }
.jyotish-public-accent { margin: 1rem 0; padding: 1rem; border: 1px solid rgba(226, 196, 108, .22); border-radius: var(--radius-card, 16px); background: linear-gradient(145deg, rgba(34, 24, 61, .82), rgba(18, 15, 37, .9)); text-align: left; }
.jyotish-public-accent h2 { margin: .25rem 0 .5rem; color: #fff8ff; }
.jyotish-public-accent p:last-child { margin-bottom: 0; }
.jyotish-public-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 12px 0; }
.jyotish-public-facts div { padding: 9px; border-radius: 10px; background: rgba(255,255,255,.045); }
.jyotish-public-facts dt { color: rgba(255,248,255,.62); font-size: 11px; }
.jyotish-public-facts dd { margin: 3px 0 0; color: var(--gold-soft); font-weight: 700; }
.jyotish-personal-accent { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,248,255,.1); }
.jyotish-personal-accent h3 { margin: 0 0 6px; font-size: 16px; }
.jyotish-personal-accent p { margin: 6px 0; }
.jyotish-public-disclaimer { margin-top: 12px; font-size: 11px; }
.jyotish-confidence { margin: -4px 0 12px; font-size: 11px; }
@media (max-width: 420px) { .jyotish-public-facts { grid-template-columns: 1fr; } }

/* Locally integrated Living Picture v3. Selectors are isolated under .living-picture-v3. */
.living-picture-v3 { min-width: 0; margin: 0; color: #f7f2ff; }
.living-picture-v3[hidden] { display: none !important; }
.lpv3-head, .lpv3-toolbar, .lpv3-caption, .lpv3-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lpv3-head { margin-bottom: 12px; }
.lpv3-head .eyebrow, .lpv3-dialog-head .eyebrow { margin: 0 0 3px; color: #c5b5eb; font-size: 11px; }
.lpv3-head h2, .lpv3-dialog-head h2 { margin: 0; color: #fff8ff; font-size: clamp(18px, 3vw, 22px); }
.lpv3-status { flex: 0 0 auto; padding: 5px 9px; border: 1px solid rgba(240,207,123,.28); border-radius: 999px; color: #f3dfae; font-size: 11px; }
.lpv3-toolbar { margin: 0 0 11px; flex-wrap: wrap; }
.lpv3-modes { display: inline-flex; min-height: 42px; padding: 3px; border: 1px solid rgba(239,231,255,.13); border-radius: 12px; background: rgba(9,13,35,.48); }
.lpv3-modes button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 9px; color: rgba(247,242,255,.72); background: transparent; font: inherit; font-size: 12px; cursor: pointer; }
.lpv3-modes button[aria-pressed="true"] { color: #171629; background: linear-gradient(120deg,#f0cf7b,#d4c3ef); font-weight: 750; }
.lpv3-modes button:focus-visible, .lpv3-motion input:focus-visible + span, .lpv3-caption button:focus-visible, .lpv3-dialog button:focus-visible { outline: 3px solid #7de1d2; outline-offset: 3px; }
.lpv3-motion { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; color: rgba(247,242,255,.77); font-size: 12px; cursor: pointer; }
.lpv3-motion input { width: 17px; height: 17px; accent-color: #72d2c6; }
.lpv3-frame { --lpv3-hue: 252; position: relative; margin: 0; overflow: hidden; isolation: isolate; aspect-ratio: 760 / 620; border: 1px solid rgba(255,245,218,.17); border-radius: 20px; background: #11183f; box-shadow: 0 18px 50px rgba(3,5,18,.25); }
.lpv3-art { position: absolute; inset: 0 0 52px; }
.lpv3-landscape { display: block; width: 100%; height: 100%; }
.lpv3-picture-copy { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: clamp(12px,2.7vw,24px); color: #fff7df; pointer-events: none; }
.lpv3-date { max-width: min(75%,420px); margin: 0; padding: 7px 11px; border: 1px solid rgba(255,245,218,.17); border-radius: 999px; color: #fff7df; background: rgba(13,20,52,.74); font-size: clamp(11px,1.7vw,14px); line-height: 1.3; font-weight: 720; overflow-wrap: anywhere; }
.lpv3-copy-spacer { flex: 1; }
.lpv3-picture-footer { width: min(100%,520px); margin-top: auto; padding: 10px 13px 12px; border: 1px solid rgba(255,245,218,.2); border-radius: 14px; background: linear-gradient(100deg,rgba(13,20,52,.84),rgba(25,31,65,.57)); }
.lpv3-number { margin: 0 0 3px; color: #f5d98f; font-size: 12px; font-weight: 750; }
.lpv3-theme { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; color: #fff9e7; font-size: clamp(17px,2.8vw,24px); font-weight: 820; line-height: 1.16; letter-spacing: -.02em; overflow-wrap: anywhere; }
.lpv3-caption { position: absolute; z-index: 1; inset: auto 0 0; box-sizing: border-box; height: 52px; padding: 6px 12px; color: rgba(247,242,255,.85); background: rgba(17,24,63,.96); font-size: 12px; line-height: 1.45; }
.lpv3-caption > span { min-width: 0; }
.lpv3-caption button { flex: 0 0 auto; min-height: 40px; padding: 0 12px; border: 1px solid rgba(240,207,123,.4); border-radius: 10px; color: #fff0c4; background: rgba(105,85,127,.28); font: inherit; font-weight: 720; cursor: pointer; }
.lpv3-caption button[hidden] { display: none; }
.lpv3-unavailable { margin: 10px 0 0; padding: 12px; border: 1px solid rgba(240,207,123,.25); border-radius: 12px; color: #f3dfae; background: rgba(240,207,123,.07); line-height: 1.5; }
.lpv3-theme-details { margin: 11px 0 0; padding: 13px 15px; border: 1px solid rgba(255,245,218,.14); border-radius: 13px; background: rgba(25,29,60,.72); }
.lpv3-theme-details h3 { margin: 0 0 5px; color: #f0cf7b; font-size: 14px; }
.lpv3-theme-details p { margin: 0; color: #e8e3f4; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.lpv3-theme-details p + p { margin-top: 6px; color: rgba(247,242,255,.67); }
.lpv3-explanation, .lpv3-technical { margin-top: 10px; border: 1px solid rgba(255,245,218,.13); border-radius: 13px; background: rgba(12,16,39,.34); }
.lpv3-explanation > summary, .lpv3-technical > summary { padding: 12px 14px; color: #f6e4ae; font-size: 13px; font-weight: 740; cursor: pointer; }
.lpv3-explanation-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; padding: 0 12px 12px; }
.lpv3-explanation-grid article { min-width: 0; padding: 11px; border: 1px solid rgba(255,245,218,.1); border-radius: 10px; }
.lpv3-explanation-grid h3 { margin: 0 0 5px; color: #f0cf7b; font-size: 12px; }
.lpv3-explanation-grid p, .lpv3-technical > p { margin: 0; color: rgba(247,242,255,.76); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.lpv3-technical { margin: 0 12px 12px; padding: 0 11px; }
.lpv3-technical > summary { padding: 10px 1px; }
.lpv3-technical > p { padding: 0 0 9px; }
.lpv3-technical > p + p { color: rgba(247,242,255,.66); }
.lpv3-dialog { width: min(700px,calc(100% - 24px)); max-width: none; max-height: min(92vh,940px); overflow: auto; padding: 18px; border: 1px solid rgba(255,245,218,.18); border-radius: 20px; color: #f7f2ff; background: linear-gradient(150deg,#1f2247,#141730); box-shadow: 0 18px 55px rgba(3,5,18,.45); }
.lpv3-dialog[hidden] { display: none; }
.lpv3-dialog::backdrop { background: rgba(5,8,23,.78); backdrop-filter: blur(8px); }
.living-picture-v3[data-lpv3-modal-open="true"]::before { position: fixed; inset: 0; z-index: 1001; background: rgba(5,8,23,.78); content: ""; }
.living-picture-v3[data-lpv3-modal-open="true"] .lpv3-dialog:not([hidden]) { position: fixed; top: 50%; left: 50%; z-index: 1002; display: block; transform: translate(-50%,-50%); }
.lpv3-dialog-head h2 { font-size: 21px; }
.lpv3-dialog-head button { flex: 0 0 auto; width: 42px; height: 42px; border: 1px solid rgba(255,245,218,.2); border-radius: 50%; color: #fff8ff; background: rgba(255,255,255,.06); font-size: 26px; cursor: pointer; }
.lpv3-dialog [data-lpv3-dialog-context] { color: rgba(247,242,255,.73); font-size: 12px; line-height: 1.5; }
.lpv3-chart-full { display: block; width: min(100%,430px); height: auto; margin: 0 auto; overflow: visible; }
.lpv3-ring { fill: rgba(17,22,51,.72); stroke: rgba(205,191,245,.67); stroke-width: 1.5; }
.lpv3-inner-ring { fill: none; stroke: rgba(114,210,198,.43); stroke-width: 1; }
.lpv3-division { stroke: rgba(228,215,255,.31); stroke-width: 1; }
.lpv3-zodiac { fill: #e5def8; font: 14px "Segoe UI Symbol","Noto Sans Symbols 2",serif; font-variant-emoji: text; }
.lpv3-aspect { fill: none; stroke-width: 1.5; stroke-opacity: .7; }
.lpv3-aspect[data-type="trine"], .lpv3-aspect[data-type="sextile"] { stroke: #77ded0; }
.lpv3-aspect[data-type="square"], .lpv3-aspect[data-type="opposition"] { stroke: #e6a4c0; stroke-dasharray: 4 5; }
.lpv3-aspect[data-type="conjunction"] { stroke: #f2d383; }
.lpv3-leader { stroke: rgba(239,231,255,.52); stroke-width: 1; }
.lpv3-marker { fill: #fff1c2; stroke: #272146; stroke-width: 2; }
.lpv3-planet { fill: #fff9e7; font: 14px system-ui,sans-serif; paint-order: stroke; stroke: rgba(19,23,55,.9); stroke-width: 3px; stroke-linejoin: round; }
.lpv3-planet-key { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; color: rgba(247,242,255,.75); font-size: 11px; text-align: center; }
.lpv3-planet-key span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lpv3-planet-key strong { color: #f0cf7b; }
.lpv3-aspect-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.lpv3-aspect-list li { min-width: 0; padding: 9px; border: 1px solid rgba(255,245,218,.13); border-radius: 9px; color: rgba(247,242,255,.8); font-size: 11px; line-height: 1.4; }
.lpv3-frame .lpv3-integrated-chart { opacity: 0; }
.living-picture-v3[data-lpv3-mode="combined"] .lpv3-integrated-chart { opacity: 1; }
.living-picture-v3[data-lpv3-mode="combined"] .lpv3-day-symbol { transform: translateY(15px) scale(.82); transform-origin: 380px 341px; }
.lpv3-day-symbol { fill: url(#lpv3-crystal); stroke: rgba(255,241,193,.9); stroke-width: 2; }
.lpv3-symbol-facet { fill: rgba(177,158,221,.72); stroke: none; }
.lpv3-symbol-label { fill: #fff7df; font: 12px system-ui,sans-serif; paint-order: stroke; stroke: rgba(16,20,48,.86); stroke-width: 3px; }
.lpv3-environment-detail { fill: none; stroke: #b2eee4; stroke-opacity: .32; stroke-width: 2; }
.lpv3-personal-rays { fill: none; stroke: #f2cf79; stroke-opacity: .63; stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; }
.lpv3-motion-on .lpv3-day-symbol { animation: lpv3-glow-breathe 5.6s ease-in-out infinite alternate; }
.lpv3-motion-on .lpv3-integrated-chart { transition: opacity .4s ease; }
.lpv3-motion-on .lpv3-day-symbol { transition: transform .4s ease; }
.lpv3-motion-on .lpv3-stars circle:nth-child(4n + 1) { animation: lpv3-twinkle 3.6s ease-in-out infinite alternate; }
.lpv3-motion-on .lpv3-stars circle:nth-child(8n + 1) { animation-delay: -1.8s; }
.lpv3-motion-on .lpv3-nebula { animation: lpv3-drift 9.6s ease-in-out infinite alternate; transform-origin: center; }
.lpv3-motion-on .lpv3-nebula-alt { animation-duration: 12s; animation-direction: alternate-reverse; }
.lpv3-motion-on .lpv3-orbits { animation: lpv3-orbit 72s linear infinite; transform-origin: 380px 305px; }
@keyframes lpv3-glow-breathe {
  from { filter: drop-shadow(0 0 3px rgba(255,241,193,.16)); }
  to { filter: drop-shadow(0 0 11px rgba(255,241,193,.42)); }
}
@keyframes lpv3-twinkle { from { opacity: .4; } to { opacity: .96; } }
@keyframes lpv3-drift { from { opacity: .52; transform: scale(.985); } to { opacity: .98; transform: scale(1.025); } }
@keyframes lpv3-orbit { to { transform: rotate(360deg); } }
@media (max-width: 700px) { .lpv3-explanation-grid { grid-template-columns: 1fr; } .lpv3-dialog { padding: 14px 11px; } .lpv3-chart-full { width: min(100%,390px); } .lpv3-frame { aspect-ratio: 760 / 840; } .lpv3-picture-copy { padding: 10px; } .lpv3-date { max-width: 77%; padding: 6px 8px; font-size: 11px; } .lpv3-picture-footer { padding: 9px 10px; } .lpv3-theme { font-size: clamp(17px,5vw,21px); } .lpv3-art { inset: 0 0 96px; } .lpv3-caption { height: 96px; flex-direction: column; align-items: stretch; justify-content: center; gap: 5px; padding: 7px 12px; } .lpv3-caption > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .lpv3-caption button { align-self: flex-start; padding: 0 9px; font-size: 11px; } .lpv3-modes { flex: 1 1 100%; } .lpv3-modes button { flex: 1; padding: 0 7px; font-size: 11px; } .lpv3-planet-key { grid-template-columns: repeat(5,minmax(0,1fr)); font-size: 9px; } .lpv3-aspect-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .living-picture-v3 *, .living-picture-v3 *::before, .living-picture-v3 *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Explicit scene treatment for canonical Moon-sign symbol IDs: moon-sign.aquarius -> Хвиля. */
.lpv3-water-skyline { fill: #252e59; }
.lpv3-water-plane-back { fill: #287d91; fill-opacity: .84; }
.lpv3-water-plane-mid { fill: #216d86; fill-opacity: .9; }
.lpv3-water-plane-front { fill: #192e57; fill-opacity: .96; }
.lpv3-water-reflections { fill: none; stroke: #b9f5ed; stroke-width: 2; stroke-linecap: round; stroke-opacity: .34; }
.lpv3-water-reflections path:nth-child(2) { stroke: url(#lpv3-gold-glint); stroke-width: 3; stroke-opacity: .55; }
.lpv3-horizon-glow { fill: none; stroke: #f1d798; stroke-width: 2; stroke-opacity: .56; }
.lpv3-shoreline { fill: #172646; fill-opacity: .9; }
.lpv3-water-environment .lpv3-water-plane-mid { fill: #237d92; }
.lpv3-wave-shadow { fill: url(#lpv3-wave-depth); opacity: .78; transform: translateY(8px) scale(.98); transform-origin: 380px 310px; }
.lpv3-wave-deep { fill: url(#lpv3-wave-depth); stroke: rgba(189,172,232,.62); stroke-width: 2; }
.lpv3-wave-body { fill: url(#lpv3-wave-water); stroke: rgba(158,255,242,.75); stroke-width: 1.5; }
.lpv3-wave-foam { fill: url(#lpv3-foam); opacity: .96; }
.lpv3-wave-highlight { fill: none; stroke: rgba(255,241,193,.92); stroke-width: 2.4; stroke-linecap: round; }
.lpv3-wave-glint { fill: none; stroke: url(#lpv3-gold-glint); stroke-width: 3; stroke-linecap: round; opacity: .9; }
.lpv3-wave-shadow, .lpv3-wave-deep, .lpv3-wave-body, .lpv3-wave-foam, .lpv3-wave-highlight, .lpv3-wave-glint { vector-effect: non-scaling-stroke; }
.lpv3-motion-on .lpv3-water-reflections { animation: lpv3-water-shimmer 8s ease-in-out infinite alternate; }
@keyframes lpv3-water-shimmer {
  from { opacity: .62; transform: translateY(0); }
  to { opacity: 1; transform: translateY(3px); }
}