/* ================================================================
   Chinese Zodiac Calculator — page-specific styles
   Uses common.css variables. Anything visual that isn't unique to
   this tool stays in common.css (buttons, .wrap, .section, .chip).
   ================================================================ */

/* ===== Date-picker tool block ===== */
.z-tool{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:26px;
  margin:30px auto 0;
  max-width:640px;
  text-align:left;
}
.z-tool label{
  display:block;
  font-family:-apple-system,"Segoe UI",sans-serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
  text-align:center;
}
.z-date-row{
  display:grid;
  grid-template-columns:1.2fr 1.6fr 1fr;
  gap:10px;
  margin-bottom:14px;
}
.z-date-row select{
  padding:14px 12px;
  font-size:15px;
  border:2px solid var(--line);
  background:var(--paper);
  border-radius:12px;
  font-family:-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  outline:none;
  transition:.2s;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b6157' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:32px;
}
.z-date-row select:focus{border-color:var(--red);background-color:#fff}
.z-tool .z-actions{display:flex;justify-content:center}
.z-tool .btn{min-width:260px}
.z-tool-hint{
  font-family:-apple-system,"Segoe UI",sans-serif;
  font-size:12.5px;
  color:var(--muted);
  text-align:center;
  margin-top:12px;
}

/* ===== Result card ===== */
#zResult{margin-top:24px}
.z-error{
  max-width:640px;margin:0 auto;
  background:#fbeaec;border:1px solid #f1c9d0;color:var(--red2);
  border-radius:12px;padding:14px 18px;text-align:center;
  font-family:-apple-system,"Segoe UI",sans-serif;font-size:14px;
}

.z-result-card{
  --z-accent:#c8102e;
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow);overflow:hidden;
  animation:zPop .35s ease;
}
@keyframes zPop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.z-result-head{
  display:grid;grid-template-columns:auto 1fr;gap:22px;
  align-items:center;
  padding:26px 26px 22px;
  background:linear-gradient(135deg,#fffdf8,#faefe0);
  border-bottom:1px solid var(--line);
}
.z-seal-big{
  width:110px;height:110px;border-radius:20px;
  background:var(--z-accent);color:#fff;
  display:grid;place-items:center;
  font-family:"Songti SC","Kaiti SC",serif;
  font-size:70px;font-weight:700;line-height:1;
  box-shadow:0 12px 28px rgba(200,16,46,.22);
  flex-shrink:0;
}
.z-head-body h2{font-size:32px;line-height:1.15;margin-bottom:4px;color:var(--ink)}
.z-kicker{
  display:inline-flex;
  font-family:-apple-system,"Segoe UI",sans-serif;
  font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--z-accent);
  margin-bottom:6px;
}
.z-full-name{
  font-family:-apple-system,"Segoe UI",sans-serif;
  font-size:14px;color:var(--muted);margin-bottom:8px;
}
.z-full-name b{color:var(--ink)}
.z-traits{
  font-family:-apple-system,"Segoe UI",sans-serif;
  font-size:15px;color:var(--ink);line-height:1.5;
}

/* ===== Year outlook note ===== */
.z-year-note{
  margin:20px 24px 0;
  padding:16px 18px;
  background:var(--paper);
  border:1px solid var(--line);
  border-left:4px solid var(--z-accent);
  border-radius:10px;
}
.z-year-note.is-benming{
  background:#fbeaec;border-color:#f1c9d0;border-left-color:var(--red);
}
.z-year-label{
  font-family:-apple-system,"Segoe UI",sans-serif;
  font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted);
}
.z-year-note.is-benming .z-year-label{color:var(--red)}
.z-year-note p{
  margin-top:4px;
  font-family:-apple-system,"Segoe UI",sans-serif;
  font-size:14.5px;color:var(--ink);line-height:1.55;
}

/* ===== Lucky grid ===== */
.z-lucky-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  padding:20px 24px 0;
}
.z-lucky-cell{
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:14px;
}
.z-lucky-title{
  font-family:-apple-system,"Segoe UI",sans-serif;
  font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;
}
.z-chips{display:flex;flex-wrap:wrap;gap:6px}
.z-chip{
  display:inline-flex;align-items:center;
  font-family:-apple-system,"Segoe UI",sans-serif;
  font-size:13px;font-weight:600;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:5px 11px;color:var(--ink);
}
.z-chip.z-num{font-family:Georgia,serif;font-weight:800;color:var(--red2);min-width:34px;justify-content:center}
/* Color swatch chips */
.z-chip.z-color-red    { background:#c8102e;color:#fff;border-color:#c8102e }
.z-chip.z-color-blue   { background:#2558a6;color:#fff;border-color:#2558a6 }
.z-chip.z-color-gold   { background:#b8893a;color:#fff;border-color:#b8893a }
.z-chip.z-color-green  { background:#1d8650;color:#fff;border-color:#1d8650 }
.z-chip.z-color-yellow { background:#e8b93a;color:#3a2a10;border-color:#e8b93a }
.z-chip.z-color-purple { background:#6b3fa0;color:#fff;border-color:#6b3fa0 }
.z-chip.z-color-pink   { background:#e5799a;color:#fff;border-color:#e5799a }
.z-chip.z-color-orange { background:#e07a3c;color:#fff;border-color:#e07a3c }
.z-chip.z-color-white  { background:#fff;color:var(--ink);border-color:#ccc }
.z-chip.z-color-black  { background:#1a1410;color:#fff;border-color:#1a1410 }
.z-chip.z-color-grey   { background:#8a8f96;color:#fff;border-color:#8a8f96 }
.z-chip.z-color-hoary  { background:#d1c8b8;color:#3a2a10;border-color:#c3bba8 }
.z-chip.z-color-brown  { background:#8a5a2b;color:#fff;border-color:#8a5a2b }
.z-chip.z-color-silver { background:#c4cbd3;color:#3a2a10;border-color:#b3bac2 }

/* ===== Match cards (best / partner / clash) ===== */
.z-match-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  padding:16px 24px 0;
}
.z-match-card{
  display:block;text-decoration:none;color:inherit;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:14px;text-align:center;transition:.15s;
}
.z-match-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(40,25,10,.1)}
.z-match-label{
  font-family:-apple-system,"Segoe UI",sans-serif;
  font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  color:var(--muted);
}
.z-match-animal{
  font-family:-apple-system,"Segoe UI",sans-serif;
  font-size:17px;font-weight:800;color:var(--ink);
  margin:6px 0 4px;
}
.z-match-cn{
  font-family:"Kaiti SC","Songti SC",serif;
  font-size:22px;color:var(--z-accent);margin-right:4px;
}
.z-match-sub{
  font-family:-apple-system,"Segoe UI",sans-serif;
  font-size:11px;color:var(--muted);letter-spacing:.3px;
}
.z-match-card.z-lvl-best  { border-color:#bfe1cb;background:#f4faf6 }
.z-match-card.z-lvl-best .z-match-cn{color:var(--green)}
.z-match-card.z-lvl-good  { border-color:#e6d3a5;background:#fff8ea }
.z-match-card.z-lvl-good .z-match-cn{color:var(--gold)}
.z-match-card.z-lvl-worst { border-color:#f1c9d0;background:#fbeaec }
.z-match-card.z-lvl-worst .z-match-cn{color:var(--red)}

/* ===== CTA strip (waitlist) ===== */
.z-cta-strip{
  margin:22px 24px 0;
  padding:18px 20px;
  background:linear-gradient(135deg,#1a1410,#3a1520);
  border-radius:14px;color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;
}
.z-cta-text{
  flex:1;min-width:220px;
  font-family:-apple-system,"Segoe UI",sans-serif;
  font-size:14.5px;line-height:1.5;
}
.z-cta-text b{color:var(--gold-light)}
.z-cta-text small{color:#c4b89c;font-size:12.5px}
.z-cta-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--gold);color:#1a1410;
  font-family:-apple-system,"Segoe UI",sans-serif;
  font-weight:800;font-size:14px;
  padding:12px 20px;border-radius:10px;
  text-decoration:none;transition:.15s;white-space:nowrap;
}
.z-cta-btn:hover{background:var(--gold-light);transform:translateY(-1px)}

/* ===== Cross-links to other tools ===== */
.z-cross-links{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  padding:18px 24px 24px;
}
.z-cross-card{
  display:flex;align-items:center;gap:12px;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;text-decoration:none;color:var(--ink);
  transition:.15s;
}
.z-cross-card:hover{border-color:var(--red);background:#fff8f1;transform:translateY(-1px)}
.z-cross-icon{
  width:40px;height:40px;border-radius:10px;
  background:var(--red);color:#fff;display:grid;place-items:center;
  font-family:"Songti SC",serif;font-size:22px;font-weight:700;flex-shrink:0;
}
.z-cross-card b{
  display:block;font-family:-apple-system,"Segoe UI",sans-serif;
  font-size:14px;font-weight:700;line-height:1.35;
}
.z-cross-card span{
  display:block;font-family:-apple-system,"Segoe UI",sans-serif;
  font-size:12.5px;color:var(--muted);margin-top:2px;
}

/* ===== 12-animal grid ===== */
.z-animal-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:10px;
  margin-top:20px;
}
.z-animal-tile{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px 6px 12px;text-align:center;text-decoration:none;color:var(--ink);
  transition:.18s;
}
.z-animal-tile:hover{
  border-color:var(--red);background:#fff8f1;
  transform:translateY(-3px);box-shadow:0 10px 24px rgba(200,16,46,.14);
}
.z-animal-cn{
  font-family:"Kaiti SC","Songti SC",serif;
  font-size:38px;color:var(--red2);line-height:1;
}
.z-animal-tile:hover .z-animal-cn{color:var(--red)}
.z-animal-en{
  font-family:-apple-system,"Segoe UI",sans-serif;
  font-size:13.5px;font-weight:700;margin-top:6px;
}
.z-animal-el{
  font-family:-apple-system,"Segoe UI",sans-serif;
  font-size:11px;color:var(--muted);letter-spacing:.4px;
  text-transform:uppercase;margin-top:2px;
}

/* ===== 12x12 compatibility matrix ===== */
.z-cm-wrap{
  overflow-x:auto;
  margin-top:22px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
}
.z-cm{
  display:grid;
  grid-template-columns:repeat(13,minmax(34px,1fr));
  gap:2px;
  min-width:520px;
}
.z-cm-cell{
  aspect-ratio:1;
  display:grid;place-items:center;
  font-family:-apple-system,"Segoe UI",sans-serif;
  font-size:15px;font-weight:700;
  border-radius:6px;
  background:var(--paper);color:var(--ink);
}
.z-cm-corner{background:transparent}
.z-cm-head{
  font-family:"Kaiti SC","Songti SC",serif;
  font-size:20px;color:var(--red2);
  background:transparent;
}
.z-cm-lvl-best  { background:#1d8650;color:#fff }
.z-cm-lvl-good  { background:#e8f3ec;color:#155f3a }
.z-cm-lvl-neutral{background:var(--paper);color:var(--muted)}
.z-cm-lvl-bad   { background:#fff2db;color:#7a4d00 }
.z-cm-lvl-worst { background:#c8102e;color:#fff }
.z-cm-lvl-self  { background:#1a1410;color:#d4b06a }

.z-cm-legend{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin-top:14px;
  font-family:-apple-system,"Segoe UI",sans-serif;
  font-size:12.5px;color:var(--muted);
}
.z-cm-legend span{display:inline-flex;align-items:center;gap:6px}
.z-cm-legend i{
  display:inline-block;width:14px;height:14px;border-radius:3px;font-style:normal;
}
.z-cm-legend .lg-best   { background:#1d8650 }
.z-cm-legend .lg-good   { background:#e8f3ec;border:1px solid #bfe1cb }
.z-cm-legend .lg-neutral{ background:var(--paper);border:1px solid var(--line) }
.z-cm-legend .lg-bad    { background:#fff2db;border:1px solid #f0d99a }
.z-cm-legend .lg-worst  { background:#c8102e }

/* ===== Per-animal detail cards (12 anchors) ===== */
.z-animal-details{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  margin-top:8px;
}
.z-animal-detail{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;scroll-margin-top:90px;
}
.z-animal-detail h3{
  font-size:22px;margin-bottom:4px;
  display:flex;align-items:center;gap:10px;
}
.z-animal-detail h3 .z-han{
  font-family:"Kaiti SC","Songti SC",serif;color:var(--red2);font-size:36px;line-height:1;
}
.z-animal-detail .z-meta{
  font-family:-apple-system,"Segoe UI",sans-serif;
  font-size:12.5px;color:var(--muted);letter-spacing:.4px;
  text-transform:uppercase;margin-bottom:10px;
}
.z-animal-detail p{
  font-family:-apple-system,"Segoe UI",sans-serif;
  font-size:14.5px;color:var(--ink);line-height:1.55;
}
.z-animal-detail .z-detail-row{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;
  font-family:-apple-system,"Segoe UI",sans-serif;font-size:12.5px;
}
.z-animal-detail .z-detail-row b{color:var(--ink);font-weight:700;margin-right:4px}
.z-animal-detail .z-detail-row span{
  background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:3px 10px;color:var(--muted);
}

/* ===== Waitlist section (bottom) ===== */
.z-waitlist{
  background:linear-gradient(160deg,#1a1410 0%,#3a1520 40%,#8b0d22 100%);
  color:#fff;border-radius:22px;
  padding:40px 32px;
  box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.z-waitlist::before{
  content:"";position:absolute;top:-60px;right:-60px;
  width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(184,137,58,.18),transparent 70%);
  pointer-events:none;
}
.z-waitlist-inner{position:relative;z-index:1;max-width:720px;margin:0 auto;text-align:center}
.z-waitlist .z-w-kicker{
  display:inline-flex;font-family:-apple-system,"Segoe UI",sans-serif;
  font-size:11px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--gold-light);background:rgba(184,137,58,.15);
  border:1px solid rgba(184,137,58,.3);border-radius:999px;
  padding:5px 13px;margin-bottom:14px;
}
.z-waitlist h2{color:#fff;font-size:28px;margin-bottom:10px}
.z-waitlist h2 .em{color:var(--gold-light)}
.z-waitlist p{
  font-family:-apple-system,"Segoe UI",sans-serif;
  color:#c4b89c;font-size:15px;line-height:1.6;margin-bottom:22px;
}
.z-w-features{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin-bottom:22px;
}
.z-w-features span{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:999px;padding:5px 12px;
  font-family:-apple-system,"Segoe UI",sans-serif;font-size:12.5px;color:#fff;
}
.z-w-form{
  display:flex;gap:10px;max-width:460px;margin:0 auto;
}
.z-w-form input{
  flex:1;min-width:0;
  border:2px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.25);color:#fff;
  padding:13px 15px;border-radius:12px;
  font-family:-apple-system,"Segoe UI",sans-serif;font-size:15px;
}
.z-w-form input::placeholder{color:rgba(255,255,255,.4)}
.z-w-form input:focus{border-color:var(--gold);background:rgba(0,0,0,.4)}
.z-w-form button{
  border:none;cursor:pointer;
  background:var(--gold);color:#1a1410;
  font-family:-apple-system,"Segoe UI",sans-serif;
  font-weight:800;font-size:15px;padding:13px 22px;border-radius:12px;
  white-space:nowrap;box-shadow:0 4px 14px rgba(184,137,58,.3);transition:.15s;
}
.z-w-form button:hover{background:var(--gold-light)}
.z-wait-msg{
  margin-top:14px;
  font-family:-apple-system,"Segoe UI",sans-serif;font-size:13.5px;
  min-height:20px;
}
.z-wait-msg.ok{color:#bfe1cb}
.z-wait-msg.error{color:#f1c9d0}
.z-w-price{
  margin-top:16px;
  font-family:-apple-system,"Segoe UI",sans-serif;font-size:12.5px;color:#a89e8b;
}
.z-w-price b{color:#fff}

/* ===== Responsive ===== */
@media(max-width:780px){
  .z-tool{padding:20px;border-radius:16px}
  .z-date-row{grid-template-columns:1fr;gap:10px}
  .z-tool .btn{width:100%}

  .z-result-head{grid-template-columns:1fr;text-align:center;padding:22px 18px 18px;gap:14px}
  .z-seal-big{width:90px;height:90px;font-size:58px;margin:0 auto;border-radius:16px}
  .z-head-body h2{font-size:26px}
  .z-lucky-grid{grid-template-columns:1fr;padding:16px 18px 0}
  .z-match-grid{grid-template-columns:1fr;padding:14px 18px 0}
  .z-year-note{margin:16px 18px 0}
  .z-cta-strip{margin:18px 18px 0;flex-direction:column;text-align:center}
  .z-cta-btn{width:100%;justify-content:center}
  .z-cross-links{grid-template-columns:1fr;padding:16px 18px 20px}

  .z-animal-grid{grid-template-columns:repeat(3,1fr)}
  .z-animal-cn{font-size:32px}

  .z-animal-details{grid-template-columns:1fr}

  .z-waitlist{padding:32px 22px;border-radius:16px}
  .z-waitlist h2{font-size:23px}
  .z-w-form{flex-direction:column}
  .z-w-form button{width:100%;min-height:46px}
}

@media(max-width:420px){
  .z-animal-grid{grid-template-columns:repeat(2,1fr)}
  .z-seal-big{width:80px;height:80px;font-size:50px}
  .z-head-body h2{font-size:22px}
}