.zodiac-page { --z-ink:#172033; --z-muted:#66758a; --z-line:#d9e2ec; --z-soft:#f6f8fb; --z-green:#087f72; --z-green-soft:#e8f6f3; --z-red:#a43f3f; --z-red-soft:#fff0ef; --z-gold:#956813; --z-gold-soft:#fff8e6; color:var(--z-ink); }
.zodiac-page *, .zodiac-page *::before, .zodiac-page *::after { box-sizing:border-box; }
.zodiac-heading { margin:0 0 30px; }
.zodiac-heading .zodiac-eyebrow { margin:0 0 12px; color:var(--z-green); font-size:15px; font-weight:800; }
.zodiac-heading h1 { margin:0; color:#101827; font-size:52px; line-height:1.2; letter-spacing:0; }
.zodiac-heading > p:last-child { max-width:820px; margin:22px 0 0; color:var(--z-muted); font-size:20px; line-height:1.75; }
.zodiac-tool { overflow:hidden; border:1px solid var(--z-line); border-radius:8px; background:#fff; }
.zodiac-form-panel { padding:26px; border-bottom:1px solid var(--z-line); background:var(--z-soft); }
.zodiac-form-copy p, .zodiac-cycle header p, .zodiac-table-section > header p { margin:0 0 4px; color:var(--z-green); font-size:10px; font-weight:900; }
.zodiac-form-copy h2 { margin:0; color:var(--z-ink); font-size:25px; letter-spacing:0; }
.zodiac-form-copy > span { display:block; margin-top:7px; color:var(--z-muted); font-size:13px; }
#zodiacForm { margin-top:20px; }
#zodiacForm label { display:block; margin-bottom:8px; color:#34435a; font-size:13px; font-weight:800; }
.zodiac-input-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
.zodiac-input-row input { width:100%; height:54px; margin:0; padding:0 16px; border:1px solid #c9d5e2; border-radius:7px; background:#fff; color:var(--z-ink); font:inherit; font-size:20px; font-weight:800; box-shadow:none; }
.zodiac-input-row input:focus { border-color:var(--z-green); outline:2px solid rgba(8,127,114,.12); }
.zodiac-input-row button { min-height:54px; margin:0; padding:0 22px; border:1px solid var(--z-green); border-radius:7px; background:var(--z-green); color:#fff; font:inherit; font-size:15px; font-weight:900; line-height:1; box-shadow:none; }
.zodiac-error { min-height:20px; margin:6px 0 0; color:var(--z-red); font-size:12px; }
.zodiac-quick { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:12px; }
.zodiac-quick > span { margin-right:3px; color:var(--z-muted); font-size:12px; font-weight:800; }
.zodiac-quick button { min-height:34px; margin:0; padding:0 11px; border:1px solid #cfd9e4; border-radius:6px; background:#fff; color:#526176; font:inherit; font-size:12px; font-weight:800; line-height:1; box-shadow:none; }
.zodiac-result { display:grid; grid-template-columns:130px minmax(0,1fr); align-items:center; gap:24px; min-height:260px; padding:30px; background:#111a2a; color:#fff; }
.zodiac-animal-mark { position:relative; display:grid; width:128px; height:128px; place-items:center; border:2px solid #4aa99d; border-radius:50%; background:#173a3b; }
.zodiac-animal-mark > span { font-size:64px; line-height:1; }
.zodiac-animal-mark small { position:absolute; right:0; bottom:3px; display:grid; width:36px; height:36px; place-items:center; border:3px solid #111a2a; border-radius:50%; background:var(--z-green); color:#fff; font-size:16px; font-weight:900; }
.zodiac-result-main { min-width:0; }
.zodiac-result-main p { margin:0; color:#a9b8ca; font-size:13px; }
.zodiac-result-main h2 { margin:4px 0 6px; color:#fff; font-size:42px; letter-spacing:0; }
.zodiac-result-main > strong { display:block; color:#f2cc76; font-size:19px; }
.zodiac-result-main > span { display:block; margin-top:6px; color:#b8c4d4; font-size:13px; }
.zodiac-result-facts { grid-column:1 / 3; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; border:1px solid #344258; border-radius:7px; }
.zodiac-result-facts div { min-width:0; padding:14px; border-right:1px solid #344258; }
.zodiac-result-facts div:last-child { border-right:0; }
.zodiac-result-facts dt { color:#95a5b9; font-size:11px; }
.zodiac-result-facts dd { margin:5px 0 0; color:#fff; font-size:14px; font-weight:800; overflow-wrap:anywhere; }
.zodiac-cycle { border-top:1px solid var(--z-line); }
.zodiac-cycle > header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px 13px; }
.zodiac-cycle h2 { margin:0; color:var(--z-ink); font-size:21px; letter-spacing:0; }
.zodiac-cycle button { min-height:38px; margin:0; padding:0 13px; border:1px solid #c7d3df; border-radius:7px; background:#fff; color:#435269; font:inherit; font-size:12px; font-weight:800; line-height:1; box-shadow:none; }
.zodiac-year-chips { display:flex; flex-wrap:wrap; gap:8px; padding:0 24px 24px; }
.zodiac-year-chips span { padding:9px 12px; border:1px solid #d5dfe9; border-radius:6px; background:var(--z-soft); color:#4e5e73; font-size:13px; font-weight:800; }
.zodiac-year-chips span.is-current { border-color:var(--z-green); background:var(--z-green-soft); color:var(--z-green); }
.zodiac-twelve, .zodiac-table-section { margin-top:28px; overflow:hidden; border:1px solid var(--z-line); border-radius:8px; background:#fff; }
.zodiac-twelve > header { padding:24px; border-bottom:1px solid var(--z-line); }
.zodiac-twelve h2, .zodiac-table-section h2, .zodiac-explanation h2, .zodiac-guide h2 { margin:0; color:var(--z-ink); font-size:28px; letter-spacing:0; }
.zodiac-twelve > header p { margin:10px 0 0; color:var(--z-muted); font-size:14px; line-height:1.7; }
.zodiac-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.zodiac-card-grid article { display:grid; grid-template-columns:50px minmax(0,1fr); align-items:center; gap:13px; min-width:0; padding:18px 20px; border-right:1px solid var(--z-line); border-bottom:1px solid var(--z-line); }
.zodiac-card-grid article:nth-child(2n) { border-right:0; }
.zodiac-card-grid article:nth-last-child(-n+2) { border-bottom:0; }
.zodiac-card-grid article > span { display:grid; width:50px; height:50px; place-items:center; border-radius:7px; background:var(--z-soft); font-size:27px; }
.zodiac-card-grid strong { display:block; color:var(--z-ink); font-size:14px; }
.zodiac-card-grid p { margin:5px 0 0; color:var(--z-muted); font-size:12px; line-height:1.55; }
.zodiac-card-grid article.is-selected { background:var(--z-green-soft); box-shadow:inset 4px 0 0 var(--z-green); }
.zodiac-card-grid article.is-selected > span { background:#fff; }
.zodiac-explanation { margin-top:42px; padding:26px 28px; border-left:5px solid var(--z-gold); background:var(--z-gold-soft); }
.zodiac-explanation h2 { font-size:24px; }
.zodiac-explanation p { margin:14px 0 0; color:#4d596a; font-size:14px; line-height:1.85; }
.zodiac-table-section > header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px; border-bottom:1px solid var(--z-line); }
.zodiac-table-section > header span { padding:7px 10px; border-radius:6px; background:var(--z-soft); color:var(--z-muted); font-size:11px; font-weight:800; }
.zodiac-table-wrap { overflow-x:auto; }
.zodiac-table-section table { width:100%; min-width:520px; margin:0; border-collapse:collapse; }
.zodiac-table-section th { padding:13px 16px; border-bottom:1px solid #cbd7e3; background:#edf3f8; color:#35455b; font-size:13px; text-align:center; }
.zodiac-table-section td { padding:11px 16px; border-bottom:1px solid #e3e9ef; color:#4b5a6f; font-size:13px; text-align:center; }
.zodiac-table-section tbody tr:last-child td { border-bottom:0; }
.zodiac-table-section td:nth-child(odd) { background:#f8fafc; color:var(--z-ink); font-weight:800; }
.zodiac-table-section td.is-selected { background:var(--z-green) !important; color:#fff; }
.zodiac-table-section td.is-selected + td { background:var(--z-green-soft); color:var(--z-green); font-weight:900; }
.zodiac-guide { margin-top:50px; }
.zodiac-guide > header { max-width:820px; }
.zodiac-guide > header p { margin:12px 0 0; color:var(--z-muted); font-size:16px; line-height:1.75; }
.zodiac-guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 34px; margin-top:28px; }
.zodiac-guide-grid section { padding:22px 0; border-top:1px solid var(--z-line); }
.zodiac-guide-grid h3 { margin:0 0 9px; color:var(--z-ink); font-size:18px; letter-spacing:0; }
.zodiac-guide-grid p { margin:0; color:var(--z-muted); font-size:14px; line-height:1.8; }
.zodiac-note { margin:22px 0 0; padding:16px 18px; border-left:4px solid var(--z-red); background:var(--z-red-soft); color:#536074; font-size:14px; line-height:1.7; }
.zodiac-note strong { color:var(--z-red); }
@media screen and (max-width:980px) { .zodiac-heading > p:last-child { font-size:18px; } }
@media screen and (max-width:680px) {
  .zodiac-heading h1 { font-size:34px; } .zodiac-heading > p:last-child { margin-top:16px; font-size:17px; line-height:1.65; }
  .zodiac-form-panel { padding:20px 18px; } .zodiac-input-row { grid-template-columns:1fr; } .zodiac-input-row button { width:100%; }
  .zodiac-result { grid-template-columns:92px minmax(0,1fr); gap:17px; padding:24px 18px; } .zodiac-animal-mark { width:90px; height:90px; } .zodiac-animal-mark > span { font-size:46px; } .zodiac-animal-mark small { width:31px; height:31px; font-size:13px; } .zodiac-result-main h2 { font-size:34px; }
  .zodiac-result-facts { grid-template-columns:repeat(2,minmax(0,1fr)); } .zodiac-result-facts div:nth-child(2) { border-right:0; } .zodiac-result-facts div:nth-child(-n+2) { border-bottom:1px solid #344258; }
  .zodiac-cycle > header { align-items:flex-start; flex-direction:column; } .zodiac-year-chips { padding:0 18px 20px; }
  .zodiac-card-grid { grid-template-columns:1fr; } .zodiac-card-grid article { border-right:0; } .zodiac-card-grid article:nth-last-child(2) { border-bottom:1px solid var(--z-line); }
  .zodiac-twelve h2, .zodiac-table-section h2, .zodiac-guide h2 { font-size:25px; } .zodiac-explanation { padding:22px 20px; }
  .zodiac-guide-grid { grid-template-columns:1fr; }
}