:root {
  --paper: #f3ead6;
  --paper-deep: #e7d9b8;
  --ink: #1a1612;
  --ink-soft: #3b342c;
  --ink-faint: rgba(26, 22, 18, 0.55);
  --ink-line: rgba(26, 22, 18, 0.16);
  --cinnabar: #9c2b1e;
  --cinnabar-soft: #c45c4a;
  --gold: #b08d4f;
  --wash: rgba(26, 22, 18, 0.06);
  --card: rgba(255, 250, 238, 0.78);
  --shadow: 0 10px 30px rgba(40, 28, 12, 0.08);
  --radius: 18px;
  --nav-h: 68px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font-serif: "Noto Serif TC", "Noto Serif SC", "Noto Serif", "Songti TC", "Songti SC", serif;
  --font-brush: "Ma Shan Zheng", "Noto Serif TC", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--paper); }
body {
  font-family: var(--font-serif);
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(176, 141, 79, 0.12), transparent 50%),
    radial-gradient(900px 500px at 110% 10%, rgba(156, 43, 30, 0.06), transparent 46%),
    var(--paper);
  min-height: 100dvh;
  letter-spacing: 0.02em;
  font-size: 18px;
  line-height: 1.55;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  z-index: 0;
}

.app { position: relative; z-index: 1; min-height: 100dvh; padding-bottom: calc(var(--nav-h) + var(--safe-b) + 16px); }

.ink-mountains {
  position: fixed;
  left: 0; right: 0; bottom: calc(var(--nav-h) + var(--safe-b));
  height: 180px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.28;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 220' preserveAspectRatio='none'%3E%3Cpath d='M0 220 L0 160 C80 150 140 90 230 110 C320 130 360 70 450 90 C560 116 620 40 730 78 C840 116 900 60 1020 100 C1100 126 1160 90 1200 110 L1200 220 Z' fill='%231a1612' opacity='.55'/%3E%3Cpath d='M0 220 L0 180 C120 170 180 130 280 150 C390 172 470 120 580 146 C690 172 780 118 900 150 C1000 174 1100 140 1200 160 L1200 220 Z' fill='%231a1612' opacity='.7'/%3E%3Cpath d='M0 220 L0 198 C160 190 240 170 360 184 C500 200 620 168 760 186 C900 204 1040 176 1200 192 L1200 220 Z' fill='%231a1612'/%3E%3C/svg%3E") bottom / 100% 180px no-repeat;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 8px;
  gap: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.seal {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: #f4ecda;
  display: grid;
  place-items: center;
  font-family: var(--font-brush);
  font-size: 22px;
  box-shadow: inset 0 0 0 2px var(--gold);
}
.brand-text h1 {
  margin: 0;
  font-family: var(--font-brush);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
}
.brand-text p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ink-faint);
}
.lang-switch {
  display: flex;
  background: var(--card);
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  overflow: hidden;
}
.lang-switch button {
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font: inherit;
  font-size: 12px;
  padding: 8px 10px;
  cursor: pointer;
}
.lang-switch button.active {
  background: var(--ink);
  color: #f4ecda;
}

.wrap { width: min(920px, calc(100% - 24px)); margin: 0 auto; max-width: 100%; overflow-x: hidden; }

.page { display: none; animation: fade .35s ease; }
.page.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.hero-date {
  text-align: center;
  padding: 8px 0 18px;
}
.hero-date .solar {
  font-size: 13px;
  color: var(--ink-faint);
}
.hero-date .num {
  font-size: clamp(56px, 16vw, 84px);
  line-height: .9;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.hero-date .lunar {
  margin-top: 6px;
  font-size: 18px;
}
.pillars {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.pillar {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  border: 1px solid var(--ink-line);
  padding: 10px 8px;
  border-radius: 8px;
  background: var(--card);
  min-height: 92px;
  letter-spacing: 0.18em;
}
.pillar small { display: block; color: var(--ink-faint); letter-spacing: 0.08em; margin-bottom: 6px; font-size: 11px; }

.card {
  background: var(--card);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 16px;
  margin: 12px 0;
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.card h2, .card h3 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card h2::before, .section-label::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--cinnabar);
  border-radius: 1px;
  transform: rotate(45deg);
}

.hint { font-size: 15px; color: var(--ink-faint); line-height: 1.7; }

.color-grid { display: grid; gap: 12px; }
.color-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.35);
}
.color-row .label { font-size: 17px; font-weight: 600; color: var(--ink); }
.color-row.tone-best { background: rgba(29, 79, 145, 0.08); }
.color-row.tone-good { background: rgba(176, 141, 79, 0.12); }
.color-row.tone-avoid { background: rgba(156, 43, 30, 0.08); }
.swatches { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.swatch {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  flex: 0 0 36px;
}
.swatch-name { font-size: 18px; color: var(--ink); font-weight: 600; }

.yi-ji { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.yi-box, .ji-box { min-height: 80px; }
.yi-box h3 { color: var(--cinnabar); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 15px;
  padding: 6px 10px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: rgba(255,255,255,.4);
}
.ji-box .chip { border-color: rgba(156,43,30,.25); color: var(--cinnabar); }

.meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  font-size: 16px;
}
.meta-grid dt { color: var(--ink-faint); font-size: 14px; }
.meta-grid dd { margin: 2px 0 8px; }

.toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 8px 0 4px;
}
.btn, select, input[type="date"], input[type="text"] {
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  padding: 8px 14px;
}
.btn { cursor: pointer; }
.btn.primary {
  background: var(--ink);
  color: #f4ecda;
  border-color: var(--ink);
}
.btn:active { transform: scale(.98); }
input[type="text"] { width: 100%; border-radius: 14px; }

.cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  max-width: 100%;
}
.cal .dow {
  text-align: center;
  font-size: 13px;
  color: var(--ink-faint);
  padding: 6px 0;
  min-width: 0;
}
.cal .cell {
  min-width: 0;
  width: 100%;
  aspect-ratio: auto;
  min-height: 52px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 1px;
  overflow: hidden;
}
.cal .cell.empty { cursor: default; }
.cal .cell .g { font-size: 16px; font-weight: 700; line-height: 1.1; }
.cal .cell .l {
  font-size: 11px;
  color: var(--ink-faint);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal .cell.today { box-shadow: inset 0 0 0 1px var(--ink); }
.cal .cell.selected { background: var(--ink); color: #f4ecda; }
.cal .cell.selected .l { color: rgba(244,236,218,.75); }
.cal .cell .mark {
  font-size: 10px;
  color: var(--cinnabar);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}

.hours { display: grid; gap: 6px; }
.hour-row {
  display: grid;
  grid-template-columns: 76px 70px 1fr;
  gap: 8px;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--ink-line);
}
.hour-row.now { background: rgba(176,141,79,.12); border-radius: 8px; padding: 6px 8px; }
.luck-ji { color: var(--cinnabar); }
.luck-aus { color: #2c5a3a; }

.palace-ring {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 8px;
  max-width: 320px;
  margin: 8px auto 16px;
}
.palace {
  border: 1px solid var(--ink-line);
  border-radius: 14px;
  padding: 10px 6px;
  text-align: center;
  background: rgba(255,255,255,.35);
  font-size: 13px;
}
.palace strong { display: block; font-size: 16px; }
.palace.active {
  background: var(--ink);
  color: #f4ecda;
  box-shadow: var(--shadow);
}
.palace.month { outline: 1px dashed var(--gold); }
.palace.day { outline: 1px dashed var(--cinnabar-soft); }
.p-daan { grid-column: 1; grid-row: 2; }
.p-liulian { grid-column: 1; grid-row: 1; }
.p-suxi { grid-column: 2; grid-row: 1; }
.p-chikou { grid-column: 3; grid-row: 1; }
.p-xiaoji { grid-column: 3; grid-row: 2; }
.p-kongwang { grid-column: 2; grid-row: 2; }
.palm-center {
  grid-column: 2;
  grid-row: 3;
  text-align: center;
  font-size: 12px;
  color: var(--ink-faint);
  align-self: center;
}

.result-seal {
  text-align: center;
  padding: 8px 0 4px;
}
.result-seal .name {
  font-family: var(--font-brush);
  font-size: 48px;
  line-height: 1;
}
.result-seal .luck {
  display: inline-block;
  margin-top: 6px;
  border: 1px solid currentColor;
  padding: 2px 10px;
  letter-spacing: .3em;
}
.result-seal .auspicious { color: #2c5a3a; }
.result-seal .inauspicious { color: var(--cinnabar); }

.topics { display: grid; gap: 8px; }
.topic {
  padding: 8px 0;
  border-bottom: 1px dashed var(--ink-line);
}
.topic b { display: block; font-size: 13px; margin-bottom: 2px; }

.form-grid { display: grid; gap: 10px; }
.form-grid label { font-size: 12px; color: var(--ink-faint); display: block; margin-bottom: 4px; }

.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--nav-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(243, 234, 214, 0.92);
  border-top: 1px solid var(--ink-line);
  backdrop-filter: blur(16px);
  z-index: 20;
}
.bottom-nav button {
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--ink-faint);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
}
.bottom-nav button svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.bottom-nav button.active { color: var(--ink); }
.bottom-nav button span { font-size: 13px; }

.desktop-nav { display: none; }

.about p { line-height: 1.8; }
.stamp {
  display: inline-block;
  border: 2px solid var(--cinnabar);
  color: var(--cinnabar);
  padding: 2px 6px;
  transform: rotate(-8deg);
  font-size: 12px;
  margin-left: 8px;
}

@media (min-width: 860px) {
  .app { padding-bottom: 32px; }
  .bottom-nav { display: none; }
  .desktop-nav {
    display: flex;
    gap: 6px;
  }
  .desktop-nav button {
    border: 1px solid transparent;
    background: transparent;
    font: inherit;
    color: var(--ink-faint);
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
  }
  .desktop-nav button.active {
    color: var(--ink);
    border-color: var(--ink-line);
    background: var(--card);
  }
  .ink-mountains { bottom: 0; opacity: .2; }
  .yi-ji, .meta-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .color-row { grid-template-columns: 1fr; }
  .hour-row { grid-template-columns: 1fr; gap: 2px; }
  .yi-ji, .meta-grid { grid-template-columns: 1fr; }
  .cal .cell { min-height: 48px; border-radius: 8px; }
  .toolbar { width: 100%; }
  .toolbar .btn, .toolbar input, .toolbar select { font-size: 15px; }
}