/* css/style.css — 冥書儀象 design system */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bl-deep:  #1452cd;
  --bl-core:  #3075ee;
  --bl-light: #93bafb;
  --bl-pale:  rgba(147,186,251,.2);
  --bl-xl:    rgba(10,18,50,.55);
  --bg:       #05070e;
  --gold:     #c6a244;
  --gold-lt:  #e1c778;
  --white:    rgba(248,244,228,.92);
  --ink:      rgba(248,244,228,.92);
  --ink2:     rgba(200,220,255,.65);
  --ink3:     rgba(140,165,215,.5);
  --shadow:   rgba(0,0,0,.7);
  --red:      #e94560;
  --font-zh:  'Noto Serif SC', 'SimSun', serif;
  --font-jura:'Jura', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
  --font-it:  'Crimson Pro', serif;
}

html, body {
  min-height: 100vh;
  font-family: var(--font-zh);
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}

/* ── 深空背景 — 星云光晕 ── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 60% 55% at 80% 45%, rgba(20,82,205,.09) 0%, transparent 60%),
    radial-gradient(ellipse 35% 45% at 18% 80%, rgba(15,50,140,.07) 0%, transparent 60%);
  pointer-events: none;
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 40% 30% at 95% 8%,  rgba(48,117,238,.06) 0%, transparent 55%),
    radial-gradient(ellipse 25% 35% at 5%  10%,  rgba(20,60,150,.05)  0%, transparent 60%);
  pointer-events: none;
}

/* ── Layout ── */
.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px;
  position: relative;
  z-index: 1;
}

/* Single-column page wrapper (max 560px, centered) */
.page {
  max-width: 560px;
  margin: 0 auto;
  padding: 28px 16px 60px;
  position: relative;
  z-index: 1;
}

/* ── Nav bar ── */
.nav-bar {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-bottom: 28px;
}
.nav-bar a {
  padding: 6px 16px;
  border-radius: 3px;
  color: var(--ink3);
  text-decoration: none;
  font-family: var(--font-jura);
  font-size: .78rem;
  letter-spacing: 1.5px;
  border: 1px solid transparent;
  transition: all .2s;
}
.nav-bar a:hover { color: var(--ink2); background: rgba(147,186,251,.06); }
.nav-bar a.active {
  color: rgba(248,244,228,.88);
  background: rgba(198,162,68,.07);
  border-color: rgba(198,162,68,.28);
}

/* ── Header ── */
header { text-align: center; margin-bottom: 28px; }
header h1 {
  font-size: 1.9rem;
  font-weight: 300;
  letter-spacing: 8px;
  text-indent: 8px;
  color: var(--ink);
  margin-bottom: 6px;
}
.subtitle {
  color: var(--ink3);
  margin-top: 6px;
  font-size: .88rem;
  letter-spacing: 1px;
}
.back-link {
  color: rgba(147,186,251,.6);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--font-jura);
  font-size: .8rem;
  letter-spacing: 1px;
  transition: color .2s;
}
.back-link:hover { color: rgba(198,162,68,.8); }

/* ── Icon wrap ── */
.icon-wrap {
  width: 54px; height: 54px; flex-shrink: 0;
  border: 1px solid rgba(198,162,68,.28);
  border-radius: 8px;
  background: rgba(8,16,50,.9);
  box-shadow: 0 0 16px rgba(20,82,205,.2), inset 0 1px 0 rgba(198,162,68,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  color: var(--ink2);
  margin: 0 auto 10px;
}

/* ── Gold rule ── */
.gold-rule {
  height: 1px;
  width: 180px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 10px auto 14px;
  position: relative;
}

/* ── Section head (label + line) ── */
.section-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.section-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(198,162,68,.55);
  flex-shrink: 0;
}
.section-head span {
  font-family: var(--font-jura);
  font-size: .7rem;
  letter-spacing: 3.5px;
  color: rgba(198,162,68,.7);
}
.section-head::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(198,162,68,.15), transparent);
}

/* ── Card / form-card (dark glass) ── */
.card, .form-card {
  background: rgba(8,12,34,.72);
  border: 1px solid rgba(147,186,251,.1);
  border-radius: 14px;
  padding: 0;
  margin-bottom: 18px;
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  overflow: hidden;
}
.card h2 {
  color: rgba(200,225,255,.85);
  font-size: 1rem;
  letter-spacing: 3px;
  font-weight: 400;
  margin-bottom: 14px;
}
.card-premium { border-color: rgba(198,162,68,.2); }
.card-warning  { border-color: rgba(233,69,96,.25); }

/* Top accent bar */
.form-top-bar {
  height: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, rgba(198,162,68,.2) 60%, transparent 100%);
  flex-shrink: 0;
}

/* Card body padding */
.card-body, .form-body {
  padding: 22px 22px 20px;
}

/* Card inner wrapper */
.card-inner {
  padding: 20px 22px;
}

/* ── Form elements ── */
.form-group { margin-bottom: 15px; }
.form-group label {
  display: block;
  color: var(--ink3);
  margin-bottom: 6px;
  font-size: .72rem;
  letter-spacing: 2px;
  font-family: var(--font-jura);
}
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }

input[type=number],
input[type=text],
select,
textarea {
  width: 100%;
  padding: 9px 12px;
  background: rgba(10,18,50,.55);
  border: 1px solid rgba(147,186,251,.18);
  border-radius: 5px;
  color: var(--ink);
  font-size: .9rem;
  font-family: var(--font-zh);
  transition: border-color .2s, background .2s, box-shadow .2s;
  -webkit-appearance: none;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(198,162,68,.5);
  background: rgba(15,25,65,.75);
  box-shadow: 0 0 0 2px rgba(198,162,68,.1);
}
input::placeholder { color: rgba(140,165,215,.3); }
select option { background: #0a1232; color: rgba(248,244,228,.9); }
textarea { resize: vertical; }

.label-hint {
  font-size: .64rem;
  letter-spacing: 1px;
  color: rgba(130,153,206,.38);
  font-weight: normal;
}
.error-msg { color: var(--red); font-size: .88rem; }

.radio-group { display: flex; gap: 20px; padding-top: 4px; flex-wrap: wrap; }
.radio-group label {
  display: flex; align-items: center; gap: 7px;
  color: var(--ink2); cursor: pointer; font-size: .88rem;
  letter-spacing: 1px; font-family: var(--font-zh);
}
.radio-group input[type=radio] {
  width: 14px; height: 14px;
  accent-color: var(--gold);
  flex-shrink: 0;
}

.checkbox-label {
  display: flex; align-items: center; gap: 8px;
  color: var(--ink2); cursor: pointer;
}
.checkbox-label input[type=checkbox] {
  width: 14px; height: 14px;
  accent-color: var(--gold);
}

/* ── Primary button ── */
.btn-primary {
  width: 100%;
  padding: 13px;
  background: rgba(20,82,205,.85);
  border: 1px solid rgba(20,82,205,.45);
  border-radius: 3px;
  color: rgba(248,244,228,.92);
  font-family: var(--font-zh);
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: 4px;
  cursor: pointer;
  margin-top: 8px;
  position: relative; overflow: hidden;
  box-shadow: 0 4px 20px rgba(20,82,205,.3);
  transition: all .25s;
}
.btn-primary::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.07) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform .5s ease;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(20,82,205,.42); background: rgba(20,82,205,.95); }
.btn-primary:hover::before { transform: translateX(100%); }
.btn-primary:active { transform: scale(.99); }

/* ── Calendar toggle ── */
.calendar-toggle {
  display: inline-flex;
  border: 1px solid rgba(147,186,251,.18);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 14px;
  background: rgba(10,18,50,.5);
}
.toggle-btn {
  padding: 6px 20px;
  cursor: pointer;
  color: var(--ink3);
  background: transparent;
  transition: all .2s;
  font-size: .85rem;
  letter-spacing: 2px;
  font-family: var(--font-zh);
}
.toggle-btn input[type=radio] { display: none; }
.toggle-btn.active {
  background: linear-gradient(135deg, rgba(20,82,205,.9), rgba(48,117,238,.75));
  color: rgba(248,244,228,.92);
  border-radius: 2px;
  margin: 2px;
  box-shadow: 0 2px 8px rgba(20,82,205,.35);
}

/* ── Geo hint ── */
.geo-hint { font-size: .7rem; letter-spacing: 1px; color: var(--ink3); margin-top: 4px; min-height: 15px; }
.geo-hint.ok  { color: rgba(198,162,68,.8); }
.geo-hint.err { color: var(--red); }

/* ── Birth info ── */
.birth-info {
  text-align: center;
  color: var(--ink2);
  font-size: .95rem;
  letter-spacing: 1px;
}

/* ── Four Pillars table ── */
.bazi-table { display: flex; justify-content: center; gap: 8px; }
.pillar {
  flex: 1; text-align: center;
  background: rgba(10,18,50,.65);
  border-radius: 8px;
  padding: 14px 4px;
  border: 1px solid rgba(147,186,251,.18);
}
.pillar-label {
  font-size: .72rem;
  color: var(--ink3);
  margin-bottom: 10px;
  font-family: var(--font-jura);
  letter-spacing: 1px;
}
.tiangan { font-size: 1.8rem; color: rgba(200,225,255,.92); font-weight: 400; }
.dizhi   { font-size: 1.8rem; color: var(--ink2); margin-top: 4px; }

/* ── Wuxing bars ── */
.wuxing-bars { display: flex; flex-direction: column; gap: 10px; }
.wuxing-row  { display: flex; align-items: center; gap: 10px; }
.wuxing-name { width: 24px; text-align: center; font-size: .9rem; color: var(--ink2); }
.wuxing-bar-bg { flex: 1; background: rgba(15,25,60,.8); border-radius: 4px; height: 18px; overflow: hidden; }
.wuxing-bar  { height: 100%; border-radius: 4px; transition: width .6s ease; }
.wuxing-count { width: 20px; text-align: right; font-size: .85rem; color: var(--ink3); }
.wx-木 { background: #4caf50; }
.wx-火 { background: #f44336; }
.wx-土 { background: #ff9800; }
.wx-金 { background: #9e9e9e; }
.wx-水 { background: #2196f3; }

/* ── AI analysis text ── */
.analysis-text, .result-text {
  line-height: 2;
  color: var(--ink);
  white-space: pre-wrap;
  font-size: .95rem;
}
.price-desc { color: var(--ink3); margin-bottom: 12px; line-height: 1.7; }
.price { font-size: 2rem; color: var(--red); font-weight: bold; margin-bottom: 16px; }
.coming-soon { color: rgba(200,225,255,.8); font-size: 1.1rem; letter-spacing: 2px; margin-top: 8px; }

/* ── Dayun ── */
.dayun-meta { color: var(--ink3); font-size: .85rem; margin-bottom: 12px; }
.dayun-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.dayun-item {
  background: rgba(10,18,50,.65);
  border-radius: 6px;
  padding: 10px 8px;
  text-align: center;
  min-width: 60px;
  border: 1px solid rgba(147,186,251,.18);
}
.dayun-item.current {
  border-color: rgba(198,162,68,.5);
  background: rgba(198,162,68,.08);
}
.dayun-gz  { font-size: 1.2rem; color: rgba(200,225,255,.9); font-weight: 400; }
.dayun-age { font-size: .75rem; color: var(--ink3); margin-top: 4px; }
.dayun-year{ font-size: .72rem; color: var(--ink3); }

/* ── Special years ── */
.special-year-item  { margin-bottom: 12px; }
.special-year-tag {
  display: inline-block;
  background: rgba(233,69,96,.15);
  color: #e94560;
  border-radius: 3px;
  padding: 2px 8px;
  font-weight: bold;
  margin-bottom: 4px;
  margin-right: 6px;
}
.special-year-tag.current-year { background: rgba(233,69,96,.28); color: #ff6b80; }
.special-year-tag.past { background: rgba(130,153,206,.12); color: var(--ink3); }
.special-year-item.past { opacity: .55; }
.special-year-reason {
  display: block;
  color: var(--ink3);
  font-size: .88rem;
  line-height: 1.6;
  padding-left: 4px;
}

/* ── Pay card block ── */
.pay-card-block {
  margin-top: 1.4rem;
  padding: 1.4rem 1.2rem;
  background: rgba(8,12,34,.75);
  border: 1px solid rgba(147,186,251,.12);
  border-radius: 10px;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.pay-card-title {
  margin: 0 0 0.5rem;
  color: rgba(248,244,228,.9);
  font-size: 1.05rem;
  font-weight: 400;
  text-align: center;
  letter-spacing: 2px;
}
.pay-card-sub {
  margin: 0 0 1rem;
  color: var(--ink3);
  font-size: .82rem;
  text-align: center;
  line-height: 1.6;
}
.pay-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 12px;
  margin-bottom: 1.2rem;
  font-size: .81rem;
  color: var(--ink2);
}
.pay-features span { line-height: 1.6; }
.pay-features .span-full { grid-column: span 2; }

/* ── Method cards (divination) ── */
.method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.method-card {
  display: block;
  padding: 14px 12px;
  border-radius: 8px;
  border: 1px solid rgba(147,186,251,.18);
  background: rgba(10,18,50,.6);
  cursor: pointer;
  transition: all .2s;
  position: relative;
}
.method-card input[type=radio] { display: none; }
.method-card:hover { border-color: rgba(147,186,251,.38); background: rgba(15,25,65,.75); }
.method-card.active {
  border-color: rgba(198,162,68,.45);
  background: rgba(198,162,68,.06);
}
.method-name { color: rgba(200,225,255,.88); font-size: 1rem; font-weight: 400; margin-bottom: 6px; }
.method-desc { color: var(--ink3); font-size: .78rem; line-height: 1.5; }

/* ── Upload area ── */
.upload-area {
  border: 2px dashed rgba(147,186,251,.2);
  border-radius: 10px;
  padding: 22px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  background: rgba(10,18,50,.4);
}
.upload-area:hover, .upload-area.drag-over {
  border-color: rgba(198,162,68,.35);
  background: rgba(15,25,65,.65);
}
.upload-placeholder { color: var(--ink3); }
.upload-icon { font-size: 2rem; margin-bottom: 8px; }
.upload-hint { font-size: .78rem; color: var(--ink3); margin-top: 4px; }

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .page { padding: 20px 12px 48px; }
  header h1 { font-size: 1.6rem; letter-spacing: 6px; }
  .nav-bar a { padding: 5px 12px; font-size: .72rem; }
  .method-grid { grid-template-columns: 1fr; }
  .pay-features { grid-template-columns: 1fr; }
  .pay-features .span-full { grid-column: span 1; }
}