: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);
}

* { box-sizing: border-box; }

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

.app-shell {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 14px 12px 28px;
}

.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::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-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  font-family: Georgia, serif;
  font-size: 17px;
}

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

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

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

.view { display: none; }
.view.is-active { display: grid; gap: 10px; }

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

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

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

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

.section-title {
  padding: 4px 2px;
}

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

.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: 1fr auto;
  gap: 8px;
}

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

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

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

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

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

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

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

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

.live-visual-stage {
  --root-aura: rgba(212, 175, 55, .18);
  --root-aura-soft: rgba(106, 13, 173, .42);
  --field-glow: .35;
  --aura-opacity: .46;
  --mandala-speed: 5.6s;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 430px;
  margin: -4px -4px 14px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(212, 175, 55, .35);
  background:
    radial-gradient(circle at 50% 44%, var(--root-aura), transparent 22%),
    radial-gradient(circle at 18% 18%, var(--root-aura-soft), transparent 34%),
    radial-gradient(circle at 82% 12%, rgba(212, 175, 55, .18), transparent 24%),
    linear-gradient(155deg, #12031d 0%, #25073b 48%, #08010f 100%);
  color: #fff8ff;
  box-shadow: inset 0 0 64px rgba(212, 175, 55, calc(.06 + var(--field-glow) * .12));
}

.live-visual-stage::before {
  content: "";
  position: absolute;
  inset: -22%;
  background:
    radial-gradient(circle at 50% 50%, var(--root-aura), transparent 35%),
    conic-gradient(from 0deg, transparent, var(--root-aura-soft), transparent, rgba(212, 175, 55, .16), transparent);
  opacity: var(--aura-opacity);
  animation: auraDrift 24s linear infinite;
  pointer-events: none;
}

.live-visual-stage.is-entering .star-field {
  animation: starDrift 18s linear infinite, ritualFade .7s ease-out both;
}

.live-visual-stage.is-entering .orbit {
  animation: orbitSpin var(--speed, 24s) linear infinite, ritualScale .9s ease-out both;
  animation-delay: var(--enter-delay, .45s), var(--enter-delay, .45s);
}

.live-visual-stage.is-entering .live-moon {
  animation: moonFloat 6.5s ease-in-out infinite, ritualFade .8s ease-out both;
  animation-delay: .75s, .75s;
}

.live-visual-stage.is-entering .live-mandala {
  animation: mandalaBreath 5.6s ease-in-out infinite, ritualScale .95s ease-out both;
  animation-delay: 1.05s, 1.05s;
}

.live-visual-stage.is-entering .live-index {
  animation: ritualRise .65s ease-out 1.65s both;
}

.live-visual-stage.is-entering .personal-ray {
  animation: personalRayPulse 7s ease-in-out infinite, ritualFade 1s ease-out 2.05s both;
}

.live-visual-stage.is-entering .live-symbol-row,
.live-visual-stage.is-entering .personal-chip,
.live-visual-stage.is-entering .moon-chip,
.live-visual-stage.is-entering .live-marker-row,
.live-visual-stage.is-entering .live-main-sense,
.live-visual-stage.is-entering #liveVisualDate {
  animation: ritualRise .65s ease-out var(--text-delay, 2.35s) both;
}

.live-visual-stage.is-entering .live-visual-content h2 { --text-delay: 1.40s; }
.live-visual-stage.is-entering #liveVisualDate { --text-delay: 1.88s; }
.live-visual-stage.is-entering .live-symbol-row { --text-delay: 2.35s; }
.live-visual-stage.is-entering .personal-chip { --text-delay: 2.55s; }
.live-visual-stage.is-entering .moon-chip { --text-delay: 2.72s; }
.live-visual-stage.is-entering .live-marker-row { --text-delay: 2.95s; }
.live-visual-stage.is-entering .live-main-sense { --text-delay: 2.12s; }

.star-field,
.star-field::before,
.star-field::after {
  position: absolute;
  inset: 0;
  content: "";
  background-image:
    radial-gradient(circle, rgba(255, 248, 220, .95) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(212, 175, 55, .70) 0 1px, transparent 1.8px);
  background-size: 58px 58px, 86px 86px;
  background-position: 0 0, 24px 18px;
  opacity: .35;
  opacity: var(--star-opacity, .35);
  animation: starDrift 18s linear infinite;
}

.star-field::before {
  background-size: 110px 110px;
  opacity: .22;
  animation-duration: 28s;
  animation-direction: reverse;
}

.star-field::after {
  background-size: 160px 160px;
  opacity: .18;
  filter: blur(.4px);
  animation-duration: 36s;
}

.orbit {
  position: absolute;
  width: min(360px, 88vw);
  aspect-ratio: 1;
  border: 1px solid rgba(212, 175, 55, .30);
  border-radius: 50%;
  transform: rotate(var(--tilt, 0deg));
  animation: orbitSpin var(--speed, 24s) linear infinite;
}

.orbit::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -4px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 18px rgba(240, 223, 170, .9);
}

.orbit-one { --tilt: 18deg; --speed: 28s; }
.orbit-two {
  width: min(300px, 74vw);
  --tilt: -34deg;
  --speed: 34s;
  --enter-delay: .58s;
  border-color: rgba(240, 223, 170, .24);
}
.orbit-three {
  width: min(230px, 58vw);
  --tilt: 74deg;
  --speed: 42s;
  --enter-delay: .72s;
  border-style: dashed;
  border-color: rgba(212, 175, 55, .22);
}

.live-mandala {
  position: absolute;
  width: min(245px, 62vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  animation: mandalaBreath var(--mandala-speed) ease-in-out infinite;
}

.live-moon {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 54px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 36%, rgba(255, 248, 220, .96), rgba(240, 223, 170, .82) 45%, rgba(212, 175, 55, .46) 72%, rgba(255, 248, 220, .18));
  box-shadow: 0 0 24px rgba(240, 223, 170, .54);
  opacity: .92;
  overflow: hidden;
  animation: moonFloat 6.5s ease-in-out infinite;
}

.live-moon::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: #12031d;
  transform: translateX(var(--moon-shadow, 72%));
  opacity: var(--moon-opacity, .82);
  filter: blur(.5px);
}

.personal-ray {
  position: absolute;
  inset: 8%;
  opacity: var(--personal-opacity, 0);
  background:
    conic-gradient(from 18deg, transparent 0deg, rgba(240, 223, 170, .38) 18deg, transparent 44deg, transparent 360deg),
    radial-gradient(circle at center, transparent 0 28%, rgba(212, 175, 55, .10) 29% 44%, transparent 45%);
  filter: blur(.2px);
  transform: rotate(var(--personal-angle, 36deg));
  animation: personalRayPulse 7s ease-in-out infinite;
  pointer-events: none;
}

.mandala-ring,
.mandala-core,
.mandala-shape {
  position: absolute;
  display: block;
}

.mandala-ring,
.mandala-core {
  border-radius: 50%;
}

.ring-a {
  inset: 0;
  border: 1px solid rgba(212, 175, 55, .60);
  background:
    repeating-conic-gradient(from 0deg, rgba(212, 175, 55, .38) 0 2deg, transparent 2deg 30deg),
    radial-gradient(circle, transparent 0 44%, rgba(106, 13, 173, .18) 45% 54%, transparent 55%);
}

.ring-b {
  inset: 18%;
  border: 1px solid rgba(240, 223, 170, .50);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  border-radius: 0;
  animation: softRotate 18s linear infinite reverse;
}

.mandala-shape {
  width: 52%;
  aspect-ratio: 1;
  border: 1px solid rgba(240, 223, 170, .62);
  box-shadow: 0 0 18px rgba(212, 175, 55, .22);
  opacity: .72;
  animation: softRotate 26s linear infinite;
}

.live-visual-stage[data-geometry="point"] .mandala-shape {
  width: 9%;
  border-radius: 50%;
  background: rgba(240, 223, 170, .45);
}

.live-visual-stage[data-geometry="line"] .mandala-shape {
  width: 62%;
  height: 1px;
  aspect-ratio: auto;
  border-radius: 999px;
  background: rgba(240, 223, 170, .7);
}

.live-visual-stage[data-geometry="triangle"] .mandala-shape {
  clip-path: polygon(50% 0, 100% 88%, 0 88%);
}

.live-visual-stage[data-geometry="square"] .mandala-shape {
  border-radius: 4px;
}

.live-visual-stage[data-geometry="pentagon"] .mandala-shape {
  clip-path: polygon(50% 0, 98% 36%, 80% 100%, 20% 100%, 2% 36%);
}

.live-visual-stage[data-geometry="hexagon"] .mandala-shape {
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}

.live-visual-stage[data-geometry="spiral"] .mandala-shape {
  border-radius: 50%;
  border-style: dashed;
  transform: scale(.9) rotate(12deg);
}

.live-visual-stage[data-geometry="octagon"] .mandala-shape {
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

.live-visual-stage[data-geometry="circle"] .mandala-shape {
  border-radius: 50%;
}

.mandala-core {
  width: 24%;
  aspect-ratio: 1;
  background:
    radial-gradient(circle, rgba(255, 248, 220, .95), rgba(212, 175, 55, .78) 38%, rgba(106, 13, 173, .34) 72%, transparent 73%);
  box-shadow: 0 0 30px rgba(240, 223, 170, .65);
}

.live-visual-content {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(330px, 88%);
  padding: 24px 18px;
  text-shadow: 0 2px 18px rgba(8, 1, 15, .8);
}

.live-visual-content .eyebrow,
.live-visual-content h2,
#liveVisualDate {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.live-visual-content h2 {
  font-size: 28px;
  color: #fff8ff;
}

.live-marker-row {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.live-marker-row span,
.live-main-sense {
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(212, 175, 55, .34);
  border-radius: 999px;
  background: rgba(18, 3, 29, .58);
  color: #fff8ff;
  backdrop-filter: blur(8px);
}

.live-marker-row span {
  min-width: 44px;
  font-size: 15px;
  font-weight: 800;
}

.live-main-sense {
  max-width: 290px;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 1.25;
  color: var(--gold-soft);
}

.live-index {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  color: var(--gold-soft);
  font-weight: 900;
}

.live-index span {
  min-width: 98px;
  font-size: 52px;
  line-height: 1;
  letter-spacing: 0;
}

.live-index small {
  color: rgba(255, 248, 255, .72);
  font-size: 16px;
}

.live-symbol-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.live-symbol-row span,
.moon-chip,
.personal-chip {
  display: inline-grid;
  place-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(212, 175, 55, .34);
  border-radius: 999px;
  background: rgba(18, 3, 29, .52);
  color: #fff8ff;
  backdrop-filter: blur(8px);
}

.live-symbol-row span {
  min-width: 48px;
  min-height: 48px;
  font-size: 26px;
  border-radius: 50%;
}

.personal-chip {
  display: none;
  border-color: rgba(240, 223, 170, .46);
  font-weight: 900;
}

.personal-chip.is-visible {
  display: inline-grid;
}

.moon-chip {
  max-width: 100%;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
}

.live-meaning {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(212, 175, 55, .28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 0%, rgba(212, 175, 55, .14), transparent 34%),
    linear-gradient(155deg, rgba(36, 6, 55, .96), rgba(18, 3, 29, .96));
  color: #fff8ff;
  text-align: left;
  box-shadow: inset 0 0 30px rgba(212, 175, 55, .08);
}

.live-meaning[hidden] {
  display: none;
}

.live-meaning h3 {
  color: var(--gold-soft);
  font-size: 17px;
}

.live-meaning p {
  color: rgba(255, 248, 255, .90);
  line-height: 1.48;
}

.live-simple-panel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(36, 6, 55, .16);
  border-radius: 8px;
  background: var(--card-2);
  color: var(--ink);
  text-align: left;
}

.live-simple-panel[hidden] {
  display: none;
}

.live-simple-panel h3 {
  color: var(--violet-dark);
  font-size: 17px;
}

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

.simple-grid span {
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.25;
}

.live-visual-stage.is-simple .star-field,
.live-visual-stage.is-simple .orbit,
.live-visual-stage.is-simple .live-mandala,
.live-visual-stage.is-simple .live-moon,
.live-visual-stage.is-simple .personal-ray {
  animation-play-state: paused;
}

.live-visual-stage.is-simple .orbit,
.live-visual-stage.is-simple .personal-ray {
  opacity: .22;
}

.live-visual-stage.is-simple .live-marker-row {
  transform: translateY(0);
}

.celestial-disc {
  position: absolute;
  z-index: 1;
  width: min(276px, 68vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 248, 220, .18), transparent 10%),
    radial-gradient(circle at 50% 50%, rgba(240, 223, 170, .16), transparent 38%),
    conic-gradient(from 210deg, rgba(212, 175, 55, .10), rgba(106, 13, 173, .24), rgba(240, 223, 170, .20), rgba(106, 13, 173, .10), rgba(212, 175, 55, .10));
  box-shadow:
    0 0 34px rgba(240, 223, 170, .26),
    inset 0 0 42px rgba(212, 175, 55, .10);
  animation: celestialBirth 7.6s ease-in-out infinite;
}

.celestial-disc::before,
.celestial-disc::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.celestial-disc::before {
  inset: 8%;
  border: 1px solid rgba(240, 223, 170, .18);
  background:
    repeating-conic-gradient(from 0deg, rgba(240, 223, 170, .20) 0 1deg, transparent 1deg 15deg),
    radial-gradient(circle, transparent 0 62%, rgba(212, 175, 55, .12) 63% 64%, transparent 65%);
  animation: softRotate 46s linear infinite;
}

.celestial-disc::after {
  inset: -10%;
  border: 1px solid rgba(212, 175, 55, .18);
  filter: blur(.2px);
}

.live-visual-stage[data-light="night"] .celestial-disc {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 248, 220, .14), transparent 10%),
    radial-gradient(circle at 50% 50%, rgba(160, 120, 230, .20), transparent 42%),
    conic-gradient(from 210deg, rgba(40, 12, 80, .36), rgba(106, 13, 173, .28), rgba(240, 223, 170, .14), rgba(40, 12, 80, .34));
}

.sun-sector {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 240deg, transparent 0 58%, rgba(242, 193, 78, .30) 66%, rgba(242, 193, 78, .08) 77%, transparent 84% 100%);
  animation: softRotate 60s linear infinite;
}

.horizon-line {
  position: absolute;
  width: 74%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 223, 170, .40), transparent);
  transform: translateY(32px);
}

.disc-moon {
  position: absolute;
  width: 62px;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(72px, -58px);
  background:
    radial-gradient(circle at 38% 36%, rgba(255, 248, 220, .96), rgba(240, 223, 170, .82) 45%, rgba(212, 175, 55, .46) 72%, rgba(255, 248, 220, .18));
  box-shadow: 0 0 24px rgba(240, 223, 170, .54);
  overflow: hidden;
  animation: discMoonFloat 6.5s ease-in-out infinite;
}

.disc-moon::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: #12031d;
  transform: translateX(var(--moon-shadow, 72%));
  opacity: var(--moon-opacity, .82);
  filter: blur(.5px);
}

.disc-core {
  width: 12px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 24px rgba(240, 223, 170, .75);
}

.live-visual-stage .live-mandala {
  width: min(330px, 80vw);
  opacity: .56;
}

.live-visual-stage .live-index {
  display: none;
}

.live-marker-row {
  inset: 0;
  bottom: auto;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
}

.live-marker-row span,
.live-symbol-row span,
.moon-chip,
.personal-chip {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--gold-soft);
  text-shadow: 0 0 16px rgba(240, 223, 170, .72), 0 0 28px rgba(106, 13, 173, .48);
  backdrop-filter: none;
  font-size: 27px;
  line-height: 1;
}

#liveMarkerIndex { left: 10%; top: 22%; }
#liveMarkerGeometry { right: 10%; top: 22%; }
#liveMarkerMoon { right: 12%; bottom: 22%; }

.live-symbol-row {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.live-symbol-row span:nth-child(1) {
  left: 12%;
  bottom: 22%;
}

.live-symbol-row span:nth-child(2) {
  right: 50%;
  bottom: 8%;
  transform: translateX(50%);
}

.moon-chip {
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
}

.personal-chip {
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
}

.personal-chip.is-visible {
  display: grid;
}

.live-main-sense {
  display: none;
  border: 0;
  background: transparent;
  padding: 0;
  min-height: 0;
  color: rgba(240, 223, 170, .74);
  font-size: 22px;
  text-shadow: 0 0 18px rgba(240, 223, 170, .58);
}

.sky-today-panel {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(212, 175, 55, .25);
  border-radius: 8px;
  background:
    radial-gradient(circle at 86% 0%, rgba(212, 175, 55, .12), transparent 30%),
    linear-gradient(155deg, rgba(18, 3, 29, .97), rgba(36, 6, 55, .94));
  color: #fff8ff;
  text-align: left;
}

.sky-today-panel[hidden] {
  display: none;
}

.sky-today-panel h3 {
  color: var(--gold-soft);
  font-size: 17px;
}

.sky-grid {
  display: grid;
  grid-template-columns: minmax(110px, .8fr) 1fr;
  gap: 8px 12px;
  align-items: center;
}

.sky-grid span {
  color: rgba(255, 248, 255, .68);
}

.sky-grid b {
  color: #fff8ff;
}

.visual-orb {
  width: min(260px, 74vw);
  aspect-ratio: 1;
  margin: 4px auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(212, 175, 55, .55);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(212, 175, 55, .95) 0 2%, transparent 3%),
    repeating-conic-gradient(from 0deg, rgba(212, 175, 55, .42) 0 1deg, transparent 1deg 30deg),
    radial-gradient(circle at center, transparent 0 35%, rgba(106, 13, 173, .11) 36% 56%, transparent 57%),
    linear-gradient(160deg, #2a0741, #13041f);
  box-shadow: inset 0 0 34px rgba(212, 175, 55, .18);
}

.visual-orb span {
  width: 58%;
  aspect-ratio: 1;
  border: 1px solid rgba(212, 175, 55, .72);
  clip-path: polygon(50% 0, 100% 86%, 0 86%);
}

@keyframes starDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-58px, 58px, 0); }
}

@keyframes orbitSpin {
  from { transform: rotate(var(--tilt, 0deg)) rotate(0deg); }
  to { transform: rotate(var(--tilt, 0deg)) rotate(360deg); }
}

@keyframes mandalaBreath {
  0%, 100% { transform: scale(.96); opacity: .86; }
  50% { transform: scale(1.04); opacity: 1; }
}

@keyframes moonFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

@keyframes discMoonFloat {
  0%, 100% { transform: translate(72px, -58px); }
  50% { transform: translate(72px, -51px); }
}

@keyframes celestialBirth {
  0%, 100% { transform: scale(.985); opacity: .92; }
  50% { transform: scale(1.025); opacity: 1; }
}

@keyframes personalRayPulse {
  0%, 100% { opacity: calc(var(--personal-opacity, 0) * .68); }
  50% { opacity: var(--personal-opacity, 0); }
}

@keyframes auraDrift {
  from { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
  to { transform: rotate(360deg) scale(1); }
}

@keyframes ritualFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ritualScale {
  from { opacity: 0; transform: scale(.88) rotate(var(--tilt, 0deg)); }
  to { opacity: 1; transform: scale(1) rotate(var(--tilt, 0deg)); }
}

@keyframes ritualRise {
  from { opacity: 0; transform: translateY(10px); }
  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: 10px 10px 22px; }
  .bottom-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav-item { font-size: 12px; padding: 0 2px; }
  .quick-grid, .level-grid, .stats-grid, .daily-cycle { grid-template-columns: 1fr; }
  .hero { min-height: 285px; }
  .live-visual-stage { min-height: 385px; }
  .celestial-disc { width: min(250px, 72vw); }
  .disc-moon { width: 52px; }
  .live-visual-content h2 { font-size: 24px; }
  .live-index span { min-width: 82px; font-size: 44px; }
  .simple-grid { grid-template-columns: 1fr; }
  .live-marker-row { inset: 0; gap: 0; }
  .live-marker-row span { width: 38px; height: 38px; padding: 0; font-size: 23px; }
  .live-symbol-row span, .moon-chip, .personal-chip { width: 38px; height: 38px; font-size: 23px; }
  .sky-grid { grid-template-columns: 1fr; }
  h1 { font-size: 27px; }
}