:root {
  color-scheme:dark light;
  --bg:#050505;
  --bg-soft:rgba(10,12,16,0.75);
  --panel:rgba(18,22,30,0.82);
  --panel-strong:rgba(24,30,40,0.95);
  --line:rgba(110,128,160,0.22);
  --muted:#9aa3b1;
  --text:#f3f6fb;
  --accent:#2d6cdf;
  --accent-soft:rgba(45,108,223,0.26);
  --glow:rgba(45,108,223,0.4);
  --shadow:0 20px 40px rgba(0,0,0,0.45)
}

[data-theme="light"] {
  color-scheme:light;
  --bg:#f5f2ec;
  --bg-soft:rgba(248,246,242,0.9);
  --panel:rgba(255,255,255,0.88);
  --panel-strong:rgba(255,255,255,0.98);
  --line:rgba(58,72,95,0.18);
  --muted:#3f4652;
  --text:#10141b;
  --accent:#2d6cdf;
  --accent-soft:rgba(45,108,223,0.2);
  --glow:rgba(45,108,223,0.25);
  --shadow:0 20px 40px rgba(33,36,42,0.12)
}

[data-theme="light"] body::before {
  background:radial-gradient(circle at 15% 20%,rgba(103,142,201,0.35),transparent 45%),radial-gradient(circle at 80% 10%,rgba(230,186,137,0.35),transparent 55%),linear-gradient(135deg,#fdfbf8 10%,#f3f0ea 55%,#eef1f7 100%)
}

[data-theme="light"] body::after {
  background:radial-gradient(circle at 30% 60%,rgba(217,208,196,0.45),transparent 60%)
}

* {
  box-sizing:border-box
}

[x-cloak] {
  display:none !important
}

body {
  margin:0;
  min-height:100vh;
  font-family:"Be Vietnam Pro",system-ui,sans-serif;
  color:var(--text);
  background:var(--bg)
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  background:radial-gradient(circle at 15% 20%,rgba(32,86,140,0.45),transparent 45%),radial-gradient(circle at 80% 10%,rgba(20,30,90,0.4),transparent 55%),linear-gradient(135deg,#040505 10%,#0a0f1a 55%,#0a0d14 100%);
  z-index:-2
}

body::after {
  content:"";
  position:fixed;
  inset:0;
  background:radial-gradient(circle at 30% 60%,rgba(8,20,40,0.55),transparent 60%);
  opacity:0.8;
  z-index:-1
}

.page {
  max-width:1200px;
  margin:0 auto;
  padding:40px 24px 80px
}

header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:24px
}

header h1 {
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(2.2rem,3vw,3.4rem);
  font-weight:700;
  margin:0;
  letter-spacing:0.02em
}

header p {
  margin:8px 0 0;
  color:var(--muted);
  max-width:480px
}

.theme-toggle {
  position:relative;
  display:inline-flex;
  align-items:center
}

.theme-menu {
  display:inline-flex;
  gap:6px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px;
  box-shadow:var(--shadow);
  z-index:10
}

.theme-menu button {
  border:none;
  background:transparent;
  color:var(--text);
  padding:8px 16px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer
}

.theme-menu svg {
  width:18px;
  height:18px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}

.theme-menu button.active svg {
  stroke:white
}

.theme-menu button.active {
  background:var(--accent);
  color:white
}

[data-theme="light"] .theme-menu button.active {
  background:var(--accent);
  color:white
}

.toolbar {
  background:var(--panel-strong);
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px;
  box-shadow:var(--shadow);
  margin-bottom:30px
}

form {
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  align-items:end
}

form > div {
  min-width:0
}

label {
  display:block;
  font-size:0.85rem;
  color:var(--muted);
  margin-bottom:6px
}

input,select,button {
  font-family:inherit;
  font-size:0.95rem
}

input,select {
  width:100%;
  min-width:0;
  max-width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(145,165,200,0.2);
  background:rgba(7,11,19,0.9);
  color:var(--text)
}

input[type="datetime-local"] {
  max-width:100%
}

.datetime-split {
  display:grid;
  gap:10px
}

.datetime-split > div {
  min-width:0
}

.datetime-split input {
  width:100%
}

input[type="date"],
input[type="time"] {
  display:block;
  width:100%;
  max-width:100%;
  -webkit-appearance:none;
  appearance:none
}

.input-wrap {
  position:relative
}

.input-wrap::after {
  content:attr(data-placeholder);
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  opacity:0.6;
  pointer-events:none;
  font-size:0.9rem
}

.input-wrap.filled::after {
  content:""
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter:invert(1);
  opacity:0.7;
  outline:none;
  border:none;
  box-shadow:none
}

[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter:none;
  opacity:0.85;
  outline:none;
  border:none;
  box-shadow:none
}

[data-theme="light"] input,[data-theme="light"] select {
  background:rgba(255,255,255,0.92);
  color:#1c222b;
  border-color:rgba(58,72,95,0.22)
}

[data-theme="light"] input::placeholder {
  color:rgba(28,34,43,0.45)
}

input:focus,select:focus {
  outline:2px solid var(--accent-soft);
  border-color:var(--accent)
}

.segmented {
  display:inline-flex;
  background:rgba(7,11,19,0.9);
  border-radius:10px;
  border:1px solid rgba(145,165,200,0.2);
  overflow:hidden
}

.segmented button {
  background:transparent;
  color:var(--text);
  border:none;
  padding:8px 14px;
  cursor:pointer;
  font-weight:600
}

.segmented button.active {
  background:var(--accent);
  color:white
}

[data-theme="light"] .segmented {
  background:rgba(246,247,250,0.95);
  border-color:rgba(58,72,95,0.2)
}

[data-theme="light"] .segmented button {
  color:#2a313c
}

[data-theme="light"] .segmented button.active {
  color:white
}

.cta {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--accent);
  border:none;
  border-radius:10px;
  color:white;
  padding:12px 16px;
  font-weight:600;
  font-size:0.95rem;
  line-height:1;
  min-height:44px;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 12px 25px var(--glow);
  transition:transform 0.2s ease,box-shadow 0.2s ease
}

.cta:hover {
  transform:translateY(-1px);
  box-shadow:0 18px 32px var(--glow)
}

.cta:disabled {
  background:rgba(88,98,118,0.7);
  cursor:not-allowed;
  box-shadow:none
}

.section-title {
  display:flex;
  align-items:center;
  gap:12px;
  margin:32px 0 16px;
  font-family:"Cormorant Garamond",serif;
  font-size:1.6rem;
  font-weight:700
}

.section-title::after {
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(to right,rgba(68,83,109,0.6),transparent)
}

.pillar-grid {
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))
}

.pillar-card {
  background:var(--panel);
  border-radius:16px;
  border:1px solid var(--line);
  padding:16px;
  box-shadow:var(--shadow);
  display:grid;
  gap:12px;
  animation:fadeUp 0.45s ease forwards;
  opacity:0;
  transform:translateY(12px)
}

.pillar-card.highlight {
  border-color:rgba(248,214,133,0.65);
  box-shadow:0 20px 40px rgba(248,214,133,0.22);
  background:linear-gradient(145deg,rgba(248,214,133,0.14),var(--panel))
}

[data-theme="light"] .pillar-card.highlight {
  border-color:rgba(201,156,46,0.6);
  box-shadow:0 20px 40px rgba(201,156,46,0.18);
  background:linear-gradient(145deg,rgba(245,225,170,0.45),rgba(255,255,255,0.96))
}

.pillar-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:0.9rem;
  color:var(--muted)
}

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

.glyph {
  background:rgba(12,16,24,0.85);
  border:1px solid rgba(100,120,150,0.15);
  border-radius:12px;
  padding:10px;
  display:grid;
  justify-items:center;
  gap:6px;
  min-height:120px
}

[data-theme="light"] .glyph,[data-theme="light"] .luck-card {
  background:rgba(246,246,250,0.95);
  border-color:rgba(90,110,130,0.15)
}

.glyph .han {
  font-family:"Noto Serif SC",serif;
  font-size:2.2rem;
  font-weight:600
}

.glyph .name {
  font-size:0.9rem;
  color:var(--muted)
}

.pillar-footer {
  display:grid;
  gap:6px;
  font-size:0.85rem;
  justify-items:center
}

.gan-zhi-name {
  font-size:1.1rem;
  font-weight:600;
  letter-spacing:0.01em
}

.pillar-footer .gan-zhi-name {
  text-align:center
}

.pillar-life-cycle {
  font-size:1rem;
  font-weight:600;
  text-align:center
}

.pillar-ten-god {
  font-size:0.95rem;
  text-align:center
}

.pillar-hidden-stems {
  font-size:0.9rem;
  text-align:center;
  display:grid;
  gap:6px
}

.hidden-stems-row {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:4px
}

.hidden-stem-name {
  font-weight:600
}

.hidden-stem-ten-god {
  color:var(--muted);
  font-size:0.82rem
}

.pillar-extra {
  font-size:0.95rem;
  text-align:center
}

.star-chip {
  display:inline-flex;
  align-items:center;
  background:rgba(12,16,24,0.85);
  border:1px solid rgba(110,128,160,0.25);
  border-radius:999px;
  padding:0 12px;
  font-size:0.78rem;
  color:var(--text);
  line-height:1;
  height:28px;
  box-sizing:border-box;
  white-space:nowrap
}

[data-theme="light"] .star-chip {
  background:rgba(230,234,242,0.9);
  color:#2c3542;
  border-color:rgba(70,84,104,0.25)
}

.stars-pillar-grid {
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))
}

.stars-pillar-card {
  background:var(--panel);
  border-radius:14px;
  border:1px solid var(--line);
  padding:14px 16px;
  box-shadow:var(--shadow);
  display:grid;
  gap:10px;
  align-items:start;
  animation:fadeUp 0.45s ease forwards;
  opacity:0;
  transform:translateY(10px)
}

.stars-pillar-title {
  font-weight:600;
  color:var(--text)
}

.stars-pillar-list {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-start;
  align-content:flex-start;
  width:100%;
  min-height:62px
}

.stars-pillar-empty {
  color:var(--muted)
}

.pillar-footer hr {
  width:100%;
  border:none;
  height:1px;
  background:rgba(110,128,160,0.25);
  margin:4px 0
}

[data-theme="light"] .pillar-footer hr {
  background:rgba(70,84,104,0.2)
}

.muted-line {
  color:var(--muted);
  opacity:0.7
}

.tag {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(15,22,32,0.85);
  border-radius:999px;
  padding:4px 10px;
  font-size:0.75rem;
  color:var(--muted);
  border:1px solid rgba(110,128,160,0.2)
}

[data-theme="light"] .tag {
  background:rgba(230,234,242,0.9);
  color:#3b4453;
  border-color:rgba(70,84,104,0.2)
}

.luck-grid {
  display:grid;
  gap:14px;
  grid-template-columns:repeat(4,minmax(230px,1fr))
}

.annual-grid {
  display:grid;
  gap:12px
}

.annual-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
  font-size:0.9rem;
  color:var(--muted)
}

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

.annual-card {
  background:rgba(12,16,24,0.85);
  border:1px solid rgba(110,128,160,0.22);
  border-radius:12px;
  padding:8px 6px;
  display:grid;
  gap:6px;
  min-height:96px;
  box-shadow:var(--shadow);
  animation:fadeUp 0.45s ease forwards;
  opacity:0;
  transform:translateY(10px);
  text-align:center
}

.annual-card.active {
  border-color:rgba(248,214,133,0.65);
  box-shadow:0 20px 40px rgba(248,214,133,0.22);
  background:linear-gradient(145deg,rgba(248,214,133,0.14),var(--panel))
}

[data-theme="light"] .annual-card {
  background:rgba(246,246,250,0.95);
  border-color:rgba(90,110,130,0.15)
}

[data-theme="light"] .annual-card.active {
  border-color:rgba(201,156,46,0.6);
  box-shadow:0 20px 40px rgba(201,156,46,0.18);
  background:linear-gradient(145deg,rgba(245,225,170,0.45),rgba(255,255,255,0.96))
}

.annual-stem {
  font-weight:600;
  font-size:0.98rem;
  font-family:"Be Vietnam Pro",system-ui,sans-serif
}

.annual-branch {
  font-weight:600;
  font-size:0.98rem;
  font-family:"Be Vietnam Pro",system-ui,sans-serif
}

.annual-year {
  margin-top:4px;
  font-size:0.85rem;
  color:var(--muted)
}

.annual-age {
  font-size:0.75rem;
  color:var(--muted);
  opacity:0.7
}

.annual-gan-zhi {
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:0.72rem;
  color:var(--muted);
  line-height:1.2;
  min-height:2.4em
}

.luck-card {
  background:rgba(12,16,24,0.85);
  border:1px solid rgba(110,128,160,0.22);
  border-radius:14px;
  padding:18px;
  display:grid;
  gap:8px;
  min-height:210px;
  box-shadow:var(--shadow);
  animation:fadeUp 0.45s ease forwards;
  opacity:0;
  transform:translateY(12px)
}

.luck-card.active {
  border-color:rgba(248,214,133,0.65);
  box-shadow:0 20px 40px rgba(248,214,133,0.22);
  background:linear-gradient(145deg,rgba(248,214,133,0.14),var(--panel))
}

[data-theme="light"] .luck-card.active {
  border-color:rgba(201,156,46,0.6);
  box-shadow:0 20px 40px rgba(201,156,46,0.18);
  background:linear-gradient(145deg,rgba(245,225,170,0.45),rgba(255,255,255,0.96))
}

.luck-card .han {
  font-family:"Noto Serif SC",serif;
  font-size:1.8rem;
  font-weight:600
}

.luck-meta {
  display:grid;
  gap:2px;
  font-size:0.78rem;
  color:var(--muted)
}

.luck-meta .gan-zhi-name {
  text-align:center
}

.luck-ten-god {
  text-align:center;
  font-weight:600;
  color:var(--text)
}

.luck-meta hr {
  width:100%;
  border:none;
  height:1px;
  background:rgba(110,128,160,0.25);
  margin:6px 0
}

[data-theme="light"] .luck-meta hr {
  background:rgba(70,84,104,0.2)
}

.error {
  margin-top:16px;
  background:rgba(255,92,92,0.12);
  border:1px solid rgba(255,92,92,0.4);
  color:#ffdede;
  padding:14px 16px;
  border-radius:12px
}

.empty {
  color:var(--muted);
  font-size:0.95rem;
  padding:20px 0
}

@keyframes fadeUp {
  to {
    opacity:1;
    transform:translateY(0)
  }
}

@media (max-width:768px) {
  header {
    flex-direction:column
  }

  .theme-toggle {
    align-self:flex-end
  }

  form {
    grid-template-columns:1fr
  }

  .luck-grid {
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr))
  }

  .annual-row {
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr))
  }
}