/**
 * Cung Hoàng Đạo — Chiêm Tinh Zodiac Tool CSS
 * Color: Zodiac Blue #5a7eb8 (light #7a9ed8, dark #3a5e98)
 * Inherits KHUNG from tsh.css — only overrides ẢNH (color, icon, content)
 */

/* ═══════════════ CSS VARIABLES ═══════════════ */
.zd-cosmos {
  --zd: #5a7eb8;
  --zd-light: #7a9ed8;
  --zd-dark: #3a5e98;
  --zd-glow: rgba(90,126,184,0.35);
  --zd-bg: rgba(90,126,184,0.04);
  --zd-border: rgba(90,126,184,0.15);
  --zd-text: #e8e0d0;
  --zd-muted: rgba(232,224,208,0.5);
  /* Override .tsh-cosmos warm-brown background → cool blue-grey */
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(20,24,32,.7) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(16,20,28,.5) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 20% 60%, rgba(18,22,30,.4) 0%, transparent 60%),
    #0d0f12;
  border-left: 1px solid rgba(90,126,184,.07);
  border-right: 1px solid rgba(90,126,184,.07);
  box-shadow:
    0 0 80px rgba(90,126,184,.03),
    inset 0 0 120px rgba(0,0,0,.3);
}

/* ═══════════════ PROGRESS BAR ═══════════════ */
#zd-progress {
  position: fixed; top: 0; left: 0; width: 0; height: 3px;
  background: linear-gradient(90deg, var(--zd-dark), var(--zd), var(--zd-light));
  z-index: 9999; transition: width .15s;
}

/* ═══════════════ BACK TO TOP ═══════════════ */
.zd-btt {
  position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px;
  background: rgba(12,12,10,.85); border: 1px solid var(--zd-border);
  border-radius: 4px; color: var(--zd); cursor: pointer; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
}
.zd-btt.is-visible { opacity: 1; pointer-events: auto; }
.zd-btt:hover { border-color: var(--zd); transform: translateY(-2px); }

/* ═══════════════ BACKGROUND ORBS ═══════════════ */
.zd-orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(100px); opacity: .06;
}
.zd-orb-1 { width: 500px; height: 500px; top: -100px; left: -150px; background: var(--zd); }
.zd-orb-2 { width: 400px; height: 400px; top: 40%; right: -100px; background: var(--zd-light); }
.zd-orb-3 { width: 350px; height: 350px; bottom: -80px; left: 30%; background: var(--zd-dark); }

/* ═══════════════ FORM SECTION (inherits .tsh-form-section from tsh.css) ═══════════════ */

/* Vertical divider — blue instead of gold */
.zd-cosmos .tsh-pyth-divider {
  background: linear-gradient(to bottom, transparent 0%, rgba(90,126,184,.25) 15%, rgba(90,126,184,.4) 50%, rgba(90,126,184,.25) 85%, transparent 100%);
}
.zd-cosmos .tsh-pyth-divider::before { color: rgba(90,126,184,.5); }

/* Mandala background */
.zd-mandala {
  position: absolute; top: 50%; left: 50%; width: 400px; height: 400px;
  transform: translate(-50%, -50%); opacity: .5; pointer-events: none;
}
.zd-mandala-ring--outer { animation: zdSpin 60s linear infinite; transform-origin: 100px 100px; }
.zd-mandala-ring--mid { animation: zdSpin 90s linear infinite reverse; transform-origin: 100px 100px; }
.zd-mandala-center { animation: zdPulse 4s ease-in-out infinite; transform-origin: 100px 100px; }
.zd-mandala-orbit--1 { animation: zdOrbit1 20s linear infinite; transform-origin: 100px 100px; }
.zd-mandala-orbit--2 { animation: zdOrbit2 25s linear infinite reverse; transform-origin: 100px 100px; }

@keyframes zdSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes zdPulse { 0%,100% { opacity: .25; } 50% { opacity: .5; } }
@keyframes zdOrbit1 { from { transform: rotate(0deg) translateX(96px) rotate(0deg); } to { transform: rotate(360deg) translateX(96px) rotate(-360deg); } }
@keyframes zdOrbit2 { from { transform: rotate(0deg) translateX(96px) rotate(0deg); } to { transform: rotate(-360deg) translateX(96px) rotate(360deg); } }

/* Eyebrow */
.zd-eyebrow {
  text-align: center; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--zd); margin: 0 0 8px; font-weight: 500;
}

/* ═══ ACCENT OVERRIDES — Zodiac Blue on tsh.css shared KHUNG ═══ */

/* Portrait column accents */
.zd-pyth-accent .tsh-pyth-frame {
  border-color: rgba(90,126,184,.3);
  outline-color: rgba(90,126,184,.12);
}
.zd-pyth-accent .tsh-pyth-frame::before,
.zd-pyth-accent .tsh-pyth-frame::after {
  opacity: .7;
  filter: hue-rotate(200deg) saturate(.6) brightness(1.2);
}
/* ═══ FLOATING SVG PARTICLES — behind frame, very faded ═══ */
.zd-float-svg {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}
.zd-fs {
  position: absolute;
  color: var(--zd);
  opacity: 0;
  width: var(--fn-size, 20px);
  height: var(--fn-size, 20px);
  left: var(--fn-x, 10%);
  bottom: -30px;
  animation: zdFloatUp var(--fn-dur, 15s) var(--fn-delay, 0s) linear infinite;
  will-change: transform, opacity;
}
.zd-fs svg {
  width: 100%; height: 100%; display: block;
}
.zd-fs--dot svg { fill: currentColor; stroke: none; }

@keyframes zdFloatUp {
  0%   { opacity: 0; transform: translateY(0); }
  8%   { opacity: .1; }
  85%  { opacity: .1; }
  100% { opacity: 0; transform: translateY(-600px); }
}

@media (max-width: 820px) {
  .zd-fs { width: calc(var(--fn-size, 20px) * .65); height: calc(var(--fn-size, 20px) * .65); }
}

.zd-pyth-accent .tsh-pyth-name {
  color: var(--zd-light);
  text-shadow: 0 0 20px rgba(90,126,184,.3), 0 0 50px rgba(90,126,184,.12), 0 0 80px rgba(90,126,184,.06);
}
.zd-pyth-accent .tsh-pyth-dates {
  color: var(--zd-muted); letter-spacing: .15em;
}
.zd-pyth-accent .tsh-pyth-badge {
  border-color: rgba(90,126,184,.3); color: var(--zd);
  animation: zdBadgePulse 4s ease-in-out infinite;
}
@keyframes zdBadgePulse {
  0%, 100% { border-color: rgba(90,126,184,.25); box-shadow: none; }
  50%      { border-color: rgba(90,126,184,.55); box-shadow: 0 0 12px rgba(90,126,184,.08); }
}

/* L-Bracket — blue + enhanced dot */
.zd-pyth-accent .tsh-pyth-brk--tl { border-top-color: var(--zd); border-left-color: var(--zd); }
.zd-pyth-accent .tsh-pyth-brk--tr { border-top-color: var(--zd); border-right-color: var(--zd); }
.zd-pyth-accent .tsh-pyth-brk--bl { border-bottom-color: var(--zd); border-left-color: var(--zd); }
.zd-pyth-accent .tsh-pyth-brk--br { border-bottom-color: var(--zd); border-right-color: var(--zd); }
.zd-pyth-accent .tsh-pyth-brk::before {
  content: ''; position: absolute;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--zd); opacity: .5;
}
.zd-pyth-accent .tsh-pyth-brk--tl::before { top: 2px; left: 2px; }
.zd-pyth-accent .tsh-pyth-brk--tr::before { top: 2px; right: 2px; }
.zd-pyth-accent .tsh-pyth-brk--bl::before { bottom: 2px; left: 2px; }
.zd-pyth-accent .tsh-pyth-brk--br::before { bottom: 2px; right: 2px; }

/* Quote & proofs */
.zd-pyth-accent .tsh-pyth-quote { color: var(--zd-muted); border-left-color: rgba(90,126,184,.25); }
.zd-pyth-accent .tsh-pyth-quote .tsh-pyth-qm { color: var(--zd); }
.zd-pyth-accent .tsh-pyth-proof { color: var(--zd-muted); }

/* ═══ KV2: TITLE CROWN + MEANDER UNDERLINE ═══ */
.zd-title-crown { display: block; margin: 0 auto 6px; width: 60%; max-width: 140px; height: auto; }
.zd-name-underline { display: block; margin: 2px auto 8px; }

/* ═══ KV3: CELESTIAL BADGES — 4 items with SVG icons + unique accent colors ═══ */
.zd-badge-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.zd-badge { display: inline-flex; align-items: center; gap: 5px; }
.zd-badge svg { flex-shrink: 0; vertical-align: -1px; filter: drop-shadow(0 0 3px currentColor); }
.zd-badge-label { display: inline-flex; align-items: baseline; gap: 3px; font-size: inherit; }
.zd-badge-vi {
  font-size: .75rem; color: var(--zd-muted); font-weight: 400;
  opacity: .8; letter-spacing: 0; text-transform: none;
}
/* Unique accent border per badge */
.zd-badge--sun.tsh-pyth-badge { border-color: rgba(201,169,110,.35); color: #c9a96e; }
.zd-badge--moon.tsh-pyth-badge { border-color: rgba(184,200,224,.3); color: #b8c8e0; }
.zd-badge--rising.tsh-pyth-badge { border-color: rgba(200,160,216,.3); color: #c8a0d8; }
.zd-badge--decan.tsh-pyth-badge { border-color: rgba(122,158,216,.35); color: #7a9ed8; }

/* ═══ KV3: IMPERIAL SEAL SEPARATOR ═══ */
.zd-seal-sep { text-align: center; margin: 8px 0 6px; line-height: 0; }
.zd-seal-spin { animation: zdSealSpin 30s linear infinite; transform-origin: 50px 12px; }
@keyframes zdSealSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ═══ KV3: ENHANCED QUOTE — ornamental marks + attribution ═══ */
.zd-quote-enhanced {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border-left: none !important; padding-left: 0 !important; text-align: center;
}
.zd-qmark { flex-shrink: 0; display: inline-block; vertical-align: middle; }
.zd-qmark--open { align-self: flex-start; margin-bottom: -4px; }
.zd-qmark--close { align-self: flex-end; margin-top: -4px; }
.zd-quote-text {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: .82rem; color: var(--zd-muted); letter-spacing: .04em;
}
.zd-quote-vi {
  font-size: .78rem; color: rgba(122,158,216,.5);
  font-family: 'Be Vietnam Pro', sans-serif; font-style: normal;
  letter-spacing: .02em;
}
.zd-quote-cite {
  font-size: .75rem; color: rgba(122,158,216,.5);
  font-family: 'Lexend Deca', sans-serif; letter-spacing: .08em;
  font-style: normal; text-transform: uppercase; margin-top: 2px;
}

/* ═══ KV3: PROOF MINI-CARDS — icon + title + subtitle for elderly ═══ */
.zd-proofs { display: flex; flex-direction: column; gap: 6px; }
.zd-proof-card {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  border: 1px solid rgba(90,126,184,.15); border-radius: 4px;
  border-left: 2px solid rgba(90,126,184,.12);
  background: rgba(90,126,184,.02);
  transition: border-color .2s, background .2s;
}
.zd-proof-card:hover {
  border-color: rgba(90,126,184,.25);
  border-left-color: rgba(90,126,184,.2);
  background: rgba(90,126,184,.04);
}
.zd-proof-icon { flex-shrink: 0; opacity: .7; }
.zd-proof-title {
  font-size: .75rem; color: var(--zd-muted); font-weight: 500;
  line-height: 1.3;
}
.zd-proof-sub {
  display: block;
  font-size: .75rem; color: rgba(122,158,216,.5);
  line-height: 1.3; margin-left: auto;
}
/* Wrap on small screens for elderly readability */
@media (max-width: 768px) {
  .zd-proof-sub { margin-left: 0; }
  .zd-proof-card { flex-wrap: wrap; }
}

/* Frame glow — enhanced breathing */
.zd-pyth-accent .tsh-pyth-frame {
  animation: zdFrameGlow 6s ease-in-out infinite;
}
@keyframes zdFrameGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(90,126,184,.06), inset 0 0 0 1px rgba(90,126,184,.05); }
  50%      { box-shadow: 0 0 30px rgba(90,126,184,.15), 0 0 60px rgba(90,126,184,.04), inset 0 0 0 1px rgba(90,126,184,.12); }
}

/* ═══ ASTROLABE ANIMATIONS — Doctor Strange rotating rings ═══ */
.zd-ring-outer { animation: zdWheelSpin 100s linear infinite; transform-origin: 140px 175px; }
.zd-ring-degree { animation: zdWheelSpin 160s linear infinite reverse; transform-origin: 140px 175px; }
.zd-ring-rune { animation: zdWheelSpin 200s linear infinite; transform-origin: 140px 175px; }
.zd-eye-outer { animation: zdWheelSpin 30s linear infinite; transform-origin: 140px 175px; }
.zd-eye-hex { animation: zdWheelSpin 40s linear infinite; transform-origin: 140px 175px; }
.zd-eye-diamond { animation: zdWheelSpin 25s linear infinite reverse; transform-origin: 140px 175px; }
.zd-center-eye { animation: zdEyePulse 6s ease-in-out infinite; transform-origin: 140px 175px; }
/* Orbiting planet dots — Sun (slow) + Moon (reverse) */
.zd-orbit-sun { animation: zdWheelSpin 45s linear infinite; transform-origin: 140px 175px; }
.zd-orbit-moon { animation: zdWheelSpin 35s linear infinite reverse; transform-origin: 140px 175px; }

@keyframes zdWheelSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes zdEyePulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .85; } }

/* Star twinkling — 3 timing variants for natural feel */
.zd-star--a { animation: zdTwinkA 3.5s ease-in-out infinite; }
.zd-star--b { animation: zdTwinkB 4.5s ease-in-out 1s infinite; }
.zd-star--c { animation: zdTwinkC 5.5s ease-in-out 2s infinite; }
@keyframes zdTwinkA { 0%,100% { opacity: .12; } 50% { opacity: .38; } }
@keyframes zdTwinkB { 0%,100% { opacity: .1; } 50% { opacity: .32; } }
@keyframes zdTwinkC { 0%,100% { opacity: .08; } 50% { opacity: .25; } }

/* Divider — blue gradient override */
.zd-cosmos .tsh-pyth-divider {
  background: linear-gradient(to bottom, transparent 0%, rgba(90,126,184,.2) 15%, rgba(90,126,184,.35) 50%, rgba(90,126,184,.2) 85%, transparent 100%);
}
.zd-cosmos .tsh-pyth-divider::before {
  color: rgba(90,126,184,.5);
  background: #0d0f12;
}

/* Form intro — override min-height (zodiac title shorter than TSH) */
.zd-cosmos .tsh-form-intro { min-height: auto; }

/* Ornament divider — blue override */
.zd-cosmos .tsh-ornament::before,
.zd-cosmos .tsh-ornament::after {
  background:
    linear-gradient(90deg, transparent, rgba(90,126,184,.5), transparent),
    linear-gradient(90deg, transparent 20%, rgba(90,126,184,.15) 20%, rgba(90,126,184,.15) 80%, transparent 80%);
  background-size: 100% 1px, 100% 3px;
  background-position: center top, center center;
  background-repeat: no-repeat;
}
.zd-cosmos .tsh-ornament-icon {
  color: var(--zd); text-shadow: 0 0 8px rgba(90,126,184,.3);
}

/* Form title — solid blue + double glow (matches TSH gold glow pattern) */
.zd-cosmos .tsh-form-title {
  color: var(--zd);
  text-shadow: 0 0 30px rgba(90,126,184,.2), 0 0 60px rgba(90,126,184,.08);
}

/* Shimmer sweep — blue version of .tsh-shimmer (added by decode JS after lock) */
.zd-cosmos .tsh-shimmer,
.zd-cosmos .zd-shimmer {
  background: linear-gradient(
    110deg,
    #5a7eb8 0%, #5a7eb8 30%,
    #8ab0e8 38%, #e8f0ff 42%, #8ab0e8 46%,
    #5a7eb8 54%, #5a7eb8 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: zdShimmer 6s ease-in-out infinite;
}
@keyframes zdShimmer {
  0%, 100% { background-position: 200% center; }
  50% { background-position: -100% center; }
}

/* Decode character states — blue versions */
.zd-cosmos .tsh-decode-scramble {
  color: rgba(90,126,184,.35);
  text-shadow: 0 0 8px rgba(90,126,184,.3);
}
.zd-cosmos .tsh-decode-locked {
  color: var(--zd);
  text-shadow: 0 0 12px rgba(90,126,184,.25);
}

/* Subtitle — italic Playfair + glow (matches TSH pattern exactly) */
.zd-cosmos .tsh-form-sub {
  color: rgba(122,158,216,.75);
  font-style: italic;
  font-family: 'Playfair Display', serif;
  letter-spacing: .025em;
  text-shadow: 0 0 28px rgba(90,126,184,.1);
  min-height: 1.65em;
}
.zd-cosmos .tsh-sub-cursor { color: var(--zd); }

/* Ornament divider — blue accent */
.zd-cosmos .tsh-ornament::before,
.zd-cosmos .tsh-ornament::after {
  background:
    linear-gradient(90deg, transparent, rgba(90,126,184,.5), transparent),
    linear-gradient(90deg, transparent 20%, rgba(90,126,184,.15) 20%, rgba(90,126,184,.15) 80%, transparent 80%);
  background-size: 100% 1px, 100% 3px;
  background-position: center top, center center;
  background-repeat: no-repeat;
}
.zd-cosmos .tsh-ornament-icon { color: var(--zd); text-shadow: 0 0 8px var(--zd-glow); }

/* Form box — blue border + breathing glow (combine entrance + glow to avoid replacing tshFadeUp) */
.zd-cosmos .tsh-form-box {
  border-color: rgba(90,126,184,.18);
  box-shadow:
    0 8px 40px rgba(0,0,0,.4),
    0 0 80px rgba(90,126,184,.04),
    inset 0 1px 0 rgba(255,255,255,.05);
  animation: tshFadeUp .8s var(--ease-cosmic) 1.7s forwards, zdFormBoxGlow 8s ease-in-out 2.5s infinite;
}
@keyframes zdFormBoxGlow {
  0%, 100% { box-shadow: 0 8px 40px rgba(0,0,0,.4), 0 0 60px rgba(90,126,184,.03), inset 0 1px 0 rgba(255,255,255,.05); }
  50%      { box-shadow: 0 8px 40px rgba(0,0,0,.4), 0 0 80px rgba(90,126,184,.08), inset 0 1px 0 rgba(255,255,255,.05); }
}
.zd-cosmos .tsh-form-box::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M4 32C4 22 10 16 18 16S22 10 22 6' fill='none' stroke='%235a7eb8' stroke-width='1.5' opacity='0.7'/%3E%3Cpath d='M8 28C8 20 13 16 18 16S20 12 20 10' fill='none' stroke='%235a7eb8' stroke-width='0.6' opacity='0.45'/%3E%3C/svg%3E");
}
.zd-cosmos .tsh-form-box::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M32 4C32 14 26 20 18 20S14 26 14 30' fill='none' stroke='%235a7eb8' stroke-width='1.5' opacity='0.7'/%3E%3C/svg%3E");
}
.zd-cosmos .tsh-form-corner {
  background: linear-gradient(90deg, transparent, rgba(90,126,184,.5), transparent);
}

/* Field labels — blue accent */
.zd-cosmos .tsh-field label {
  color: var(--zd);
  text-shadow: 0 0 12px rgba(90,126,184,.15);
}
.zd-cosmos .tsh-field label::before { color: var(--zd); }
.zd-cosmos .tsh-lbl-hint { color: rgba(90,126,184,.45); }

/* Input focus — blue glow instead of gold */
.zd-cosmos .tsh-field input:focus,
.zd-cosmos .tsh-field input:focus-visible {
  border-color: rgba(90,126,184,.5);
  background: linear-gradient(180deg, rgba(90,126,184,.04) 0%, rgba(255,255,255,.02) 100%);
  box-shadow: 0 0 20px rgba(90,126,184,.12), 0 0 40px rgba(90,126,184,.04), inset 0 1px 2px rgba(0,0,0,.1);
}
.zd-cosmos .zd-select:focus {
  box-shadow: 0 0 20px rgba(90,126,184,.12), 0 0 40px rgba(90,126,184,.04), inset 0 1px 2px rgba(0,0,0,.1);
}
.zd-cosmos .tsh-field.is-valid input {
  border-color: rgba(90,126,184,.35) !important;
  background: linear-gradient(180deg, rgba(90,126,184,.03) 0%, rgba(255,255,255,.02) 100%) !important;
  box-shadow: 0 0 12px rgba(90,126,184,.06), inset 0 1px 2px rgba(0,0,0,.1) !important;
}

/* Input placeholder — blue hint */
.zd-cosmos .tsh-field input::placeholder {
  color: rgba(90,126,184,.35);
  letter-spacing: .06em;
}

/* City select (standalone dropdown — dark theme) */
.zd-cosmos .zd-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px; padding: 16px 36px 16px 16px;
  color: var(--zd-text); font-family: 'Be Vietnam Pro', sans-serif;
  font-size: .92rem; cursor: pointer; outline: none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.15);
  transition: border-color .25s, box-shadow .25s, background .25s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235a7eb8' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.zd-cosmos .zd-select:focus {
  border-color: rgba(90,126,184,.5);
  background-color: rgba(90,126,184,.04);
  box-shadow: 0 0 16px rgba(90,126,184,.08), inset 0 1px 2px rgba(0,0,0,.1);
}
.zd-cosmos .zd-select option {
  background: #0c0c0a; color: #e8e0d0;
}
.zd-cosmos .tsh-field.is-valid .zd-select {
  border-color: rgba(90,126,184,.35);
  background-color: rgba(90,126,184,.03);
}
.zd-cosmos .tsh-field.is-error .zd-select {
  border-color: rgba(229,115,115,.5);
  box-shadow: 0 0 12px rgba(229,115,115,.08);
}

/* Timezone indicator */
.zd-tz-indicator {
  display: inline-block; margin-top: 6px; font-size: .75rem;
  color: var(--zd); letter-spacing: .05em; padding: 2px 8px;
  border: 1px solid var(--zd-border); border-radius: 4px;
  background: rgba(90,126,184,.04);
}

/* Time hint warning */
.zd-time-hint {
  display: block; margin-top: 8px; font-size: .78rem;
  color: rgba(224,168,88,.7); line-height: 1.4;
}

/* Checkbox — custom mystical toggle (hide native, styled pseudo) */
.zd-cosmos .tsh-field label.zd-checkbox-label {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: .82rem; color: var(--zd-muted); cursor: pointer;
  text-transform: none; letter-spacing: normal; font-weight: 400;
  position: relative; margin-bottom: 0;
}
.zd-checkbox {
  position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important;
  min-height: 0 !important; padding: 0 !important; pointer-events: none;
}
.zd-checkbox-text {
  user-select: none; display: flex; align-items: center; gap: 8px;
}
.zd-checkbox-text::before {
  content: ''; display: inline-block; flex-shrink: 0;
  width: 16px; height: 16px;
  border: 1.5px solid rgba(90,126,184,.4);
  border-radius: 2px;
  background: rgba(90,126,184,.05);
  transition: all .25s ease;
}
.zd-checkbox:checked + .zd-checkbox-text::before {
  background: rgba(90,126,184,.15);
  border-color: var(--zd);
  box-shadow: 0 0 8px rgba(90,126,184,.2);
}
.zd-checkbox-text::after {
  content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.5L4 8L8.5 2.5' fill='none' stroke='%235a7eb8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  transition: opacity .2s ease;
}
.zd-checkbox:checked + .zd-checkbox-text::after {
  opacity: 1;
}
.zd-checkbox:focus-visible + .zd-checkbox-text::before {
  box-shadow: 0 0 0 2px rgba(90,126,184,.3);
}

/* Energy connector — blue energy */
.zd-cosmos .tsh-connector.is-valid::before,
.zd-cosmos .tsh-connector.is-valid::after {
  background: linear-gradient(180deg, rgba(90,126,184,.4), rgba(90,126,184,.15));
  box-shadow: 0 0 6px rgba(90,126,184,.15);
}
.zd-cosmos .tsh-connector.is-valid .tsh-conn-dot {
  color: var(--zd);
  text-shadow: 0 0 8px var(--zd-glow);
}

/* Submit button — DARK mystical (idle: dark bg, hover: reveal blue gradient) */
.zd-cosmos .tsh-btn-submit {
  background: rgba(12,14,20,.9);
  border: 1px solid rgba(90,126,184,.35);
  color: var(--zd-light);
  box-shadow: 0 0 20px rgba(90,126,184,.06), inset 0 1px 0 rgba(255,255,255,.04);
  animation: zdBtnBreathe 3.5s ease-in-out infinite;
}
/* Top edge accent — blue hairline */
.zd-cosmos .tsh-btn-submit::before {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(90,126,184,.5), transparent);
  z-index: 1;
}
/* Shimmer sweep — blue tint */
.zd-cosmos .tsh-btn-submit::after {
  background: linear-gradient(90deg, transparent, rgba(90,126,184,.08), rgba(90,126,184,.15), rgba(90,126,184,.08), transparent);
  animation: zdBtnSweep 6s ease-in-out infinite;
}
.zd-cosmos .tsh-btn-submit:hover {
  background: linear-gradient(135deg, #3a5e98, #5a7eb8, #7a9ed8, #5a7eb8);
  border-color: rgba(90,126,184,.8);
  box-shadow: 0 0 40px rgba(90,126,184,.2), 0 8px 20px rgba(90,126,184,.12), inset 0 1px 0 rgba(255,255,255,.1);
  color: #fff;
  transform: translateY(-2px);
}
/* Breathing glow — BLUE */
@keyframes zdBtnBreathe {
  0%, 100% { box-shadow: 0 0 20px rgba(90,126,184,.06), inset 0 1px 0 rgba(255,255,255,.04); }
  50%      { box-shadow: 0 0 35px rgba(90,126,184,.15), inset 0 1px 0 rgba(255,255,255,.04); }
}
/* Shimmer sweep — BLUE */
@keyframes zdBtnSweep {
  0%, 75% { left: -100%; }
  100%    { left: 200%; }
}
/* Button ring — blue pulse */
.zd-cosmos .tsh-btn-ring {
  border-color: rgba(90,126,184,.3);
  animation: zdBtnRingPulse 3s ease-in-out infinite;
}
@keyframes zdBtnRingPulse {
  0%, 100% { opacity: .3; }
  50%      { opacity: .7; border-color: rgba(90,126,184,.6); }
}
.zd-cosmos .tsh-btn-submit .btn-border-glow {
  background: linear-gradient(135deg, var(--zd-dark), var(--zd), var(--zd-light));
}
/* Button text — blue shimmer on dark (matches zodiac theme) */
.zd-cosmos .tsh-btn-submit .btn-text {
  background: linear-gradient(90deg, #5a7eb8 0%, #7a9ed8 25%, #b8d0f0 30%, #7a9ed8 35%, #5a7eb8 60%) !important;
  background-size: 300% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #7a9ed8 !important;
  animation: zdBtnTextShimmer 5s ease-in-out infinite !important;
}
@keyframes zdBtnTextShimmer {
  to { background-position: -300% center; }
}
.zd-cosmos .tsh-btn-submit:hover .btn-text {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  animation: none !important;
}

/* Trust signal — blue accent + animated live dot */
.zd-cosmos .tsh-trust-signal { color: var(--zd-muted); }
.zd-cosmos .tsh-live-dot {
  background: var(--zd);
  box-shadow: 0 0 4px var(--zd-glow);
  animation: zdLivePulse 2s ease-in-out infinite;
}
@keyframes zdLivePulse {
  0%, 100% { opacity: .3; box-shadow: 0 0 0 0 rgba(90,126,184,.4); }
  50%      { opacity: 1; box-shadow: 0 0 0 4px rgba(90,126,184,0); }
}
.zd-cosmos .tsh-trust-stars { color: var(--zd); }

/* Autofill override */
.zd-cosmos .tsh-field input:-webkit-autofill,
.zd-cosmos .tsh-field input:-webkit-autofill:hover,
.zd-cosmos .tsh-field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0c0c0a inset !important;
  -webkit-text-fill-color: #e8e0d0 !important;
  caret-color: #e8e0d0 !important;
  border-color: rgba(90,126,184,.3) !important;
}

/* Wheel diagram */
.zd-wheel-diagram {
  display: flex; align-items: center; justify-content: center;
  padding: 24px 0; min-height: 200px;
}

/* ═══════════════ ENTRANCE ANIMATIONS ═══════════════ */
.zd-entrance {
  opacity: 0; transform: translateY(20px);
  animation: zdEnter .6s ease forwards;
}
.zd-entrance-1 { animation-delay: .1s; }
.zd-entrance-2 { animation-delay: .3s; }
.zd-entrance-3 { animation-delay: .5s; }
@keyframes zdEnter { to { opacity: 1; transform: translateY(0); } }

/* ═══════════════ RESULTS ═══════════════ */
.zd-results { padding: 0 20px 48px; }

/* Result header (Sun sign banner) */
.zd-result-header {
  text-align: center; padding: 32px 20px;
  border: 1px solid var(--zd-border); border-radius: 4px;
  background: rgba(10,12,18,.88);
  margin-bottom: 24px; position: relative; overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(90,126,184,.06),
    0 2px 24px rgba(0,0,0,.35),
    0 0 60px rgba(90,126,184,.06);
}
/* Double inner frame */
.zd-result-header::before {
  content: '';
  position: absolute; inset: 8px;
  border: 1px solid rgba(90,126,184,.07);
  border-radius: 3px;
  pointer-events: none; z-index: 0;
}
.zd-result-symbol { font-size: 3rem; margin-bottom: 8px; display: block; }
.zd-result-sign { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: var(--zd-light); margin: 0 0 4px; }
.zd-result-sign-en { font-size: .85rem; color: var(--zd-muted); letter-spacing: .1em; text-transform: uppercase; }
.zd-result-meta {
  display: flex; justify-content: center; gap: 16px; margin-top: 16px;
  flex-wrap: wrap;
}
.zd-result-meta-item {
  font-size: .78rem; color: var(--zd-muted);
  padding: 4px 12px; border: 1px solid var(--zd-border); border-radius: 4px;
  background: rgba(90,126,184,.04);
}
.zd-result-meta-label { color: var(--zd); font-weight: 600; }

/* Cusp warning */
.zd-cusp-warning {
  background: rgba(224,104,88,.08); border: 1px solid rgba(224,104,88,.2);
  border-radius: 4px; padding: 12px 16px; margin-top: 16px;
  font-size: .82rem; color: #e8c0b0; text-align: left;
}

/* Section card */
.zd-section {
  border: 1px solid var(--zd-border); border-radius: 4px;
  background: rgba(10,12,18,.88);
  margin-bottom: 20px; padding: 24px 20px;
  position: relative; overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(90,126,184,.05),
    0 2px 16px rgba(0,0,0,.30),
    0 0 40px rgba(90,126,184,.04);
}
/* TL corner bracket */
.zd-section::before {
  content: '';
  position: absolute; top: 6px; left: 6px;
  width: 20px; height: 20px;
  border-top: 1.5px solid var(--zd);
  border-left: 1.5px solid var(--zd);
  opacity: .35; pointer-events: none; z-index: 1;
}
/* BR corner bracket */
.zd-section::after {
  content: '';
  position: absolute; bottom: 6px; right: 6px;
  width: 20px; height: 20px;
  border-bottom: 1.5px solid var(--zd);
  border-right: 1.5px solid var(--zd);
  opacity: .35; pointer-events: none; z-index: 1;
}
/* Injected corner divs — all 4 variants */
.zd-sec-corner {
  position: absolute; width: 20px; height: 20px;
  opacity: .35; pointer-events: none; z-index: 1;
}
.zd-sec-corner--tl {
  top: 6px; left: 6px;
  border-top: 1.5px solid var(--zd);
  border-left: 1.5px solid var(--zd);
}
.zd-sec-corner--tr {
  top: 6px; right: 6px;
  border-top: 1.5px solid var(--zd);
  border-right: 1.5px solid var(--zd);
}
.zd-sec-corner--bl {
  bottom: 6px; left: 6px;
  border-bottom: 1.5px solid var(--zd);
  border-left: 1.5px solid var(--zd);
}
.zd-sec-corner--br {
  bottom: 6px; right: 6px;
  border-bottom: 1.5px solid var(--zd);
  border-right: 1.5px solid var(--zd);
}
.zd-section-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: none;
  position: relative;
}
/* Gradient underline on section header */
.zd-section-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, rgba(90,126,184,.3) 0%, transparent 70%);
}
.zd-section-icon { font-size: 1.4rem; }
.zd-section-title {
  font-family: 'Playfair Display', serif; font-size: 1.1rem;
  color: var(--zd-light); margin: 0;
}

/* Content lists */
.zd-list { list-style: none; padding: 0; margin: 0; }
.zd-list li {
  padding: 6px 0 6px 20px; position: relative;
  font-size: .88rem; color: var(--zd-text); line-height: 1.5;
}
.zd-list li::before {
  content: ''; position: absolute; left: 0; top: 14px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--zd); opacity: .4;
}

.zd-text { font-size: .88rem; color: var(--zd-text); line-height: 1.65; margin: 0 0 12px; }

/* Keywords row */
.zd-keywords {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px;
}
.zd-keyword {
  font-size: .75rem; padding: 3px 10px; border: 1px solid var(--zd-border);
  border-radius: 4px; color: var(--zd); background: rgba(90,126,184,.04);
}

/* Decan card */
.zd-decan-card {
  border: 1px solid var(--zd-border); border-radius: 4px;
  padding: 16px; background: rgba(90,126,184,.07); margin-bottom: 12px;
}
.zd-decan-title {
  font-family: 'Playfair Display', serif; font-size: .95rem;
  color: var(--zd-light); margin: 0 0 4px;
}
.zd-decan-ruler { font-size: .78rem; color: var(--zd); margin-bottom: 8px; }
.zd-decan-desc { font-size: .85rem; color: var(--zd-text); line-height: 1.6; margin: 0; }
.zd-decan-card.is-active { border-color: var(--zd); box-shadow: 0 0 12px var(--zd-glow); }

/* Compatibility table */
.zd-compat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px; margin-top: 12px;
}
.zd-compat-item {
  border: 1px solid var(--zd-border); border-radius: 4px; padding: 10px;
  text-align: center; background: rgba(90,126,184,.06); transition: border-color .2s;
}
.zd-compat-item:hover { border-color: var(--zd); }
.zd-compat-symbol { font-size: 1.2rem; display: block; margin-bottom: 4px; }
.zd-compat-name { font-size: .75rem; color: var(--zd-muted); display: block; margin-bottom: 4px; }
.zd-compat-score {
  font-family: 'Lexend Deca', sans-serif; font-size: .9rem;
  color: var(--zd-light); font-weight: 700;
}
.zd-compat-label { font-size: .75rem; color: var(--zd-muted); display: block; }

/* Score colors */
.zd-score-9 { color: #72b890; }
.zd-score-8 { color: #7ec8d4; }
.zd-score-7 { color: var(--zd-light); }
.zd-score-6 { color: #c9a96e; }
.zd-score-4 { color: #e06858; }
.zd-score-3 { color: #e895b3; }

/* Lucky grid */
.zd-lucky-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.zd-lucky-item {
  border: 1px solid var(--zd-border); border-radius: 4px; padding: 12px;
  background: rgba(90,126,184,.06); text-align: center;
}
.zd-lucky-label { font-size: .75rem; color: var(--zd); text-transform: uppercase; letter-spacing: .08em; display: block; margin-bottom: 4px; }
.zd-lucky-value { font-size: .85rem; color: var(--zd-text); }

/* Famous people */
.zd-famous-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.zd-famous-item {
  border: 1px solid var(--zd-border); border-radius: 4px; padding: 10px 12px;
  background: rgba(90,126,184,.06);
}
.zd-famous-name { font-size: .85rem; color: var(--zd-light); font-weight: 600; }
.zd-famous-date { font-size: .75rem; color: var(--zd-muted); }
.zd-famous-note { font-size: .75rem; color: var(--zd-text); opacity: .7; }

/* Dignities table */
.zd-dignities-row {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.zd-dignity-card {
  flex: 1; min-width: 100px; border: 1px solid var(--zd-border); border-radius: 4px;
  padding: 10px; text-align: center; background: rgba(90,126,184,.06);
}
.zd-dignity-label { font-size: .75rem; color: var(--zd); text-transform: uppercase; letter-spacing: .08em; display: block; margin-bottom: 4px; }
.zd-dignity-value { font-size: .82rem; color: var(--zd-text); }

/* ═══════════════ BIG THREE CARDS ═══════════════ */
.zd-bigthree { text-align: center; }
.zd-bt-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-top: 8px;
}
.zd-bt-card {
  border: 1px solid var(--zd-border); border-radius: 4px;
  padding: 20px 12px; background: rgba(10,12,18,.9);
  text-align: center; transition: border-color .3s, box-shadow .3s;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(90,126,184,.04), 0 2px 12px rgba(0,0,0,.22);
}
.zd-bt-card:hover { border-color: var(--zd); box-shadow: 0 0 16px var(--zd-glow); }
.zd-bt-card--sun { border-top: 2px solid #c9a96e; }
.zd-bt-card--moon { border-top: 2px solid #b8c8e0; }
.zd-bt-card--rising { border-top: 2px solid #c8a0d8; }
.zd-bt-icon { font-size: 1.8rem; margin-bottom: 8px; }
.zd-bt-label {
  font-size: .75rem; color: var(--zd-muted); text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 8px;
}
.zd-bt-label small { text-transform: none; letter-spacing: 0; font-size: .9em; }
.zd-bt-sign {
  font-family: 'Playfair Display', serif; font-size: 1.15rem;
  color: var(--zd-light); margin-bottom: 6px;
}
.zd-bt-sign--na { color: var(--zd-muted); font-size: .88rem; font-family: 'Be Vietnam Pro', sans-serif; }
.zd-bt-desc { font-size: .75rem; color: var(--zd-muted); line-height: 1.4; }
.zd-bt-uncertain {
  color: #e0a858; font-size: .78rem; cursor: help;
}
.zd-bt-disclaimer {
  margin-top: 12px; padding: 10px 16px;
  background: rgba(224,168,88,.06); border: 1px solid rgba(224,168,88,.15);
  border-radius: 4px; font-size: .78rem; color: #e8c8a0; text-align: left;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .zd-bt-grid { grid-template-columns: 1fr; gap: 8px; }
  .zd-bt-card { padding: 16px 12px; }
}

/* ═══════════════ FAB + TOC ═══════════════ */
.zd-fab {
  position: fixed; bottom: 80px; right: 24px; width: 44px; height: 44px;
  background: rgba(12,12,10,.9); border: 1px solid var(--zd-border);
  border-radius: 4px; color: var(--zd); cursor: pointer; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s;
}
.zd-fab:hover { border-color: var(--zd); }

.zd-toc-panel {
  position: fixed; bottom: 130px; right: 24px; width: 220px;
  background: rgba(12,12,10,.95); border: 1px solid var(--zd-border);
  border-radius: 4px; z-index: 900; padding: 12px; max-height: 50vh; overflow-y: auto;
}
.zd-toc-header {
  font-size: .75rem; color: var(--zd); text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: 8px; font-weight: 600;
}
.zd-toc-nav a {
  display: block; padding: 6px 8px; font-size: .78rem; color: var(--zd-muted);
  text-decoration: none; border-radius: 2px; transition: color .2s, background .2s;
}
.zd-toc-nav a:hover,
.zd-toc-nav a.is-active { color: var(--zd-light); background: rgba(90,126,184,.08); }

/* ═══════════════ MEANDER DIVIDER (override color) ═══════════════ */
.zd-results .meander-divider { color: var(--zd); opacity: .2; }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 768px) {
  .zd-results { padding: 0 24px 48px; }
  .zd-result-meta { gap: 8px; }
  .zd-compat-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .zd-lucky-grid { grid-template-columns: repeat(2, 1fr); }
  .zd-famous-list { grid-template-columns: 1fr; }
  .zd-toc-panel { right: 16px; width: 200px; bottom: 120px; }
  .zd-fab, .zd-btt { right: 16px; }
  .zd-cosmos .tsh-csel-trigger { padding: 12px 8px; font-size: .9rem; }
  .zd-time-sep { width: 18px; font-size: 1rem; }
}

@media (max-width: 480px) {
  .zd-compat-grid { grid-template-columns: repeat(2, 1fr); }
  .zd-dignities-row { flex-direction: column; }
}

/* ═══════════════ CINEMATIC — Zodiac Blue Override ═══════════════ */
.zd-cosmos .tsh-cine {
  background: #08080a;
}
.zd-cosmos .tsh-cine-mdr-rect {
  stroke: rgba(90,126,184,.4) !important;
}
.zd-cosmos .tsh-cine-mdr-inner {
  stroke: rgba(90,126,184,.25) !important;
}
.zd-cosmos .tsh-cine-brk-tl,
.zd-cosmos .tsh-cine-brk-tr,
.zd-cosmos .tsh-cine-brk-bl,
.zd-cosmos .tsh-cine-brk-br {
  border-color: rgba(90,126,184,.5) !important;
}
.zd-cosmos .tsh-cine-ring {
  border-color: rgba(90,126,184,.25) !important;
}
.zd-cosmos .tsh-cine-ring-1 { border-color: rgba(90,126,184,.35) !important; }
.zd-cosmos .tsh-cine-ring-3 { border-color: rgba(90,126,184,.20) !important; }
.zd-cosmos .tsh-cine-ring-5 { border-color: rgba(90,126,184,.15) !important; }
.zd-cosmos .tsh-cine-spark {
  background: var(--zd) !important;
  box-shadow: 0 0 6px var(--zd-glow) !important;
}
.zd-cosmos .tsh-cine-text {
  color: var(--zd-light);
}
.zd-cosmos .tsh-cine-sub {
  color: var(--zd-muted);
}
.zd-cosmos .tsh-cine-flash {
  background: radial-gradient(circle, rgba(90,126,184,.6), transparent) !important;
}
/* Back button — zodiac blue accent on hover */
.zd-cosmos .tsh-back-btn:hover {
  color: var(--zd);
  border-color: var(--zd);
}
.zd-cosmos .tsh-back-btn:focus-visible {
  outline-color: var(--zd);
}

/* ═══════════════ VIEWPORT PAUSE ═══════════════ */
.zd-results:not(.is-in-view) * {
  animation-play-state: paused !important;
}

/* ═══════════════ DISCLAIMER ═══════════════ */
.zd-cosmos .tsh-form-disc {
  color: rgba(90,126,184,.45);
}


/* ═══════════════ LABEL SVG ICONS ═══════════════ */
.zd-label-icon {
  display: inline-block;
  vertical-align: -2px;
  color: var(--zd);
  flex-shrink: 0;
}
.zd-cosmos .tsh-field label::before { content: none; } /* Remove default ◈ — replaced by SVG */

/* Sun icon — slow celestial rotation */
.zd-label-sun { animation: zdSunSpin 30s linear infinite; }
@keyframes zdSunSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Moon icon — gentle breathing pulse */
.zd-label-moon { animation: zdMoonBreath 4s ease-in-out infinite; }
@keyframes zdMoonBreath { 0%,100% { opacity: .55; } 50% { opacity: .9; } }

/* Earth icon — no animation (static anchor) */
.zd-label-earth { opacity: .7; }

/* (field ruler removed — using dropdown selects now) */

/* ═══════════════ REQUIRED FIELD ACCENT ═══════════════ */
.zd-cosmos #zd-field-birth { position: relative; }

/* ═══════════════ FIELD VALID STATES — Celestial glow on label ═══════════════ */
.zd-cosmos #zd-field-birth.is-valid label,
.zd-cosmos #zd-field-time.is-valid label,
.zd-cosmos #zd-field-city.is-valid label {
  text-shadow: 0 0 20px rgba(90,126,184,.3);
}
.zd-cosmos #zd-field-birth.is-valid .tsh-date-row .tsh-csel-trigger,
.zd-cosmos #zd-field-time.is-valid .zd-time-row .tsh-csel-trigger {
  border-color: rgba(90,126,184,.35);
  background: linear-gradient(180deg, rgba(90,126,184,.03) 0%, rgba(255,255,255,.02) 100%);
  box-shadow: 0 0 12px rgba(90,126,184,.06);
}
.zd-cosmos #zd-field-city.is-valid .zd-select,
.zd-cosmos #zd-field-city.is-valid .tsh-csel-trigger {
  border-color: rgba(90,126,184,.35);
  background: linear-gradient(180deg, rgba(90,126,184,.03) 0%, rgba(255,255,255,.02) 100%);
  box-shadow: 0 0 12px rgba(90,126,184,.06);
}

/* ═══════════════ DISABLED INPUT (time field when checkbox checked) ═══════════════ */
.zd-cosmos #zd-field-time .tsh-csel.is-disabled .tsh-csel-trigger {
  opacity: .3;
  border-color: rgba(255,255,255,.04);
  background: rgba(255,255,255,.01);
  cursor: not-allowed;
}

/* ═══════════════ ENHANCED CHECKBOX — larger for elderly ═══════════════ */
.zd-cosmos .zd-checkbox-text::before {
  width: 20px; height: 20px;
  border-color: rgba(90,126,184,.35);
}
.zd-cosmos .zd-checkbox:checked + .zd-checkbox-text::before {
  background: rgba(90,126,184,.12);
  border-color: rgba(122,158,216,.6);
  box-shadow: 0 0 10px rgba(90,126,184,.2), 0 0 20px rgba(90,126,184,.06);
}
.zd-cosmos .zd-checkbox-text::after {
  width: 12px; height: 12px; left: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5L5 9.5L10 3.5' fill='none' stroke='%237a9ed8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ═══════════════ WARNING HINT UPGRADE — visual status diagram ═══════════════ */
.zd-cosmos .zd-time-hint[hidden] { display: none !important; } /* Respect hidden attr */
.zd-cosmos .zd-time-hint {
  color: rgba(224,180,100,.8);
  background: rgba(224,168,88,.04);
  border: 1px solid rgba(224,168,88,.10);
  border-radius: 4px;
  padding: 10px 12px;
  margin-top: 10px;
  line-height: 1.5;
}
.zd-cosmos .zd-hint-status {
  display: flex; gap: 12px; margin-top: 8px;
  flex-wrap: wrap;
}
.zd-cosmos .zd-hint-item {
  display: flex; align-items: center; gap: 4px;
  font-size: .75rem; line-height: 1;
}
.zd-cosmos .zd-hint-item svg { flex-shrink: 0; }
.zd-cosmos .zd-hint-ok { color: rgba(114,184,144,.7); }
.zd-cosmos .zd-hint-warn { color: rgba(224,168,88,.7); }
.zd-cosmos .zd-hint-hidden { color: rgba(232,224,208,.3); }

/* Unlock badge — motivational text */
.zd-cosmos .zd-unlock-badge {
  display: flex; align-items: center; gap: 4px;
  margin-top: 6px;
  font-size: .75rem;
  color: rgba(122,158,216,.45);
  letter-spacing: .04em;
}
.zd-cosmos .zd-unlock-badge svg { flex-shrink: 0; }
/* Hide unlock badge when checkbox is checked (hint takes over) */
.zd-cosmos .zd-time-hint[hidden] ~ .zd-unlock-badge { display: flex; }
.zd-cosmos .zd-time-hint:not([hidden]) ~ .zd-unlock-badge { display: none; }

/* ═══════════════ DROPDOWN ENHANCEMENTS — compass rose arrow ═══════════════ */
.zd-cosmos .zd-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 2l2 5h-4z' fill='%235a7eb8' opacity='.5'/%3E%3Cpath d='M8 14l-2-5h4z' fill='%237a9ed8' opacity='.4'/%3E%3Ccircle cx='8' cy='8' r='1' fill='%235a7eb8' opacity='.4'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-size: 16px 16px;
}

/* Timezone indicator — compass badge */
.zd-cosmos .zd-tz-indicator[hidden] { display: none !important; } /* Respect hidden attr */
.zd-cosmos .zd-tz-indicator {
  display: inline-flex; align-items: center; gap: 4px;
  color: rgba(122,158,216,.7);
}
.zd-cosmos .zd-tz-indicator svg { flex-shrink: 0; color: var(--zd); }

/* ═══════════════ BUTTON STARFIELD OVERLAY ═══════════════ */
.zd-cosmos .zd-btn-stars {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: .4; overflow: hidden;
  transition: opacity .3s;
}
.zd-cosmos .tsh-btn-submit:hover .zd-btn-stars { opacity: .8; }

/* All-valid state — intensified glow when all fields are complete */
.zd-cosmos .tsh-btn-submit.zd-all-valid {
  border-color: rgba(122,158,216,.5);
  box-shadow: 0 0 30px rgba(90,126,184,.12), 0 0 60px rgba(90,126,184,.04), inset 0 1px 0 rgba(255,255,255,.06);
}
.zd-cosmos .tsh-btn-submit.zd-all-valid .tsh-btn-ring {
  border-color: rgba(122,158,216,.5);
  animation: zdBtnRingPulse 2s ease-in-out infinite;
}

/* Button focus-visible — zodiac blue outline */
.zd-cosmos .tsh-btn-submit:focus-visible {
  outline: 2px solid var(--zd);
  outline-offset: 2px;
}

/* ═══════════════ TRUST SIGNAL UPGRADE ═══════════════ */
.zd-cosmos .tsh-trust-signal {
  position: relative;
  padding-top: 14px;
}
/* Celestial separator line above trust signal */
.zd-cosmos .tsh-trust-signal::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(90,126,184,.2), rgba(122,158,216,.3), rgba(90,126,184,.2), transparent);
}
/* Scope icon */
.zd-cosmos .zd-trust-scope { vertical-align: -1px; margin-right: 2px; }
/* Counter — luxury font */
.zd-cosmos #zd-counter {
  font-family: 'Lexend Deca', sans-serif;
  color: var(--zd-light);
  font-weight: 700;
}
/* SVG stars — inline display */
.zd-cosmos .tsh-trust-stars {
  display: inline-flex; gap: 1px;
  vertical-align: -1px;
}
.zd-cosmos .tsh-trust-stars svg { flex-shrink: 0; }
/* Quote emphasis */
.zd-cosmos .tsh-trust-signal em { color: rgba(122,158,216,.55); }
/* Live dot — slightly larger */
.zd-cosmos .tsh-live-dot {
  width: 7px; height: 7px;
}

/* ═══════════════ CONNECTOR UPGRADE — brighter meridians ═══════════════ */
.zd-cosmos .tsh-connector::before,
.zd-cosmos .tsh-connector::after {
  background: linear-gradient(180deg, rgba(90,126,184,.08), rgba(90,126,184,.12), rgba(90,126,184,.08));
}
.zd-cosmos .tsh-conn-dot {
  color: rgba(90,126,184,.3);
}
.zd-cosmos .tsh-conn-dot svg { display: block; }
.zd-cosmos .tsh-connector.is-valid .tsh-conn-dot {
  color: var(--zd-light);
  filter: drop-shadow(0 0 6px rgba(90,126,184,.4));
}

/* ═══════════════ DATE ROW — 3 column dropdown (Day / Month / Year) ═══════════════ */
.zd-cosmos .tsh-date-row { display: flex; align-items: stretch; gap: 0; }
.zd-cosmos .tsh-date-col { flex: 1; display: flex; flex-direction: column; }
.zd-cosmos .tsh-date-col--year { flex: 1.5; }

/* Date sub-hint — enlarged for elderly readability */
.zd-date-sub {
  font-size: .78rem; color: rgba(122,158,216,.5); margin: 2px 0 10px;
  line-height: 1.5; letter-spacing: .02em;
}

/* Badge-style hints in label — enlarged for elderly */
.zd-badge-required {
  display: inline-block; padding: 2px 10px; border-radius: 4px;
  background: rgba(90,126,184,.12); color: rgba(122,158,216,.75) !important;
  font-size: .75rem; font-weight: 600; letter-spacing: .06em; vertical-align: 1px;
  margin-left: 6px;
}
.zd-badge-important {
  display: inline-block; padding: 2px 10px; border-radius: 4px;
  background: rgba(90,126,184,.08); color: rgba(122,158,216,.6) !important;
  font-size: .75rem; font-weight: 500; letter-spacing: .06em; vertical-align: 1px;
  margin-left: 6px;
}

/* Custom select trigger — zodiac blue override */
.zd-cosmos .tsh-csel-trigger {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.08);
  padding: 14px 10px; cursor: pointer;
  font-family: 'Be Vietnam Pro', sans-serif; font-size: .95rem;
  color: #e8e0d0; transition: border-color .25s, box-shadow .25s, background .25s;
  outline: none;
}
.zd-cosmos .tsh-csel-val { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.zd-cosmos .tsh-csel-val--ph { color: rgba(122,158,216,.38); font-style: italic; }
.zd-cosmos .tsh-csel-arr { flex-shrink: 0; margin-left: 6px; line-height: 0; transition: transform .2s; }
.zd-cosmos .tsh-csel.is-open .tsh-csel-arr { transform: rotate(180deg); }

/* First/Last column border radius */
.zd-cosmos .tsh-date-col:first-child .tsh-csel-trigger {
  border-radius: 4px 0 0 4px;
  border-right: 1px solid rgba(255,255,255,.05);
}
.zd-cosmos .tsh-date-col:nth-child(2) .tsh-csel-trigger { border-right: 1px solid rgba(255,255,255,.05); }
.zd-cosmos .tsh-date-col:last-child .tsh-csel-trigger { border-radius: 0 4px 4px 0; }

/* Focus/open — zodiac blue glow */
.zd-cosmos .tsh-csel-trigger:focus,
.zd-cosmos .tsh-csel.is-open .tsh-csel-trigger {
  border-color: rgba(90,126,184,.5);
  background: linear-gradient(180deg, rgba(90,126,184,.04) 0%, rgba(255,255,255,.02) 100%);
  box-shadow: 0 0 16px rgba(90,126,184,.08), inset 0 1px 2px rgba(0,0,0,.1);
}

/* Valid/Error states for custom selects */
.zd-cosmos .tsh-field.is-valid .tsh-csel-trigger {
  border-color: rgba(90,126,184,.35) !important;
  background: linear-gradient(180deg, rgba(90,126,184,.03) 0%, rgba(255,255,255,.02) 100%) !important;
}
.zd-cosmos .tsh-field.is-error .tsh-csel-trigger {
  border-color: rgba(229,115,115,.35) !important;
  box-shadow: 0 0 8px rgba(229,115,115,.06), inset 0 1px 2px rgba(0,0,0,.15) !important;
}
.zd-cosmos .tsh-field.is-error .tsh-date-row {
  animation: tshShake .4s ease;
}
@keyframes tshShake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-4px); }
  40%     { transform: translateX(4px); }
  60%     { transform: translateX(-3px); }
  80%     { transform: translateX(3px); }
}

/* Disabled state */
.zd-cosmos .tsh-csel.is-disabled .tsh-csel-trigger {
  opacity: .3; cursor: not-allowed;
  border-color: rgba(255,255,255,.04);
  background: rgba(255,255,255,.01);
}

/* Dropdown panel — zodiac blue */
.zd-csel-panel {
  position: fixed;
  background: linear-gradient(180deg, rgba(14,16,22,.99) 0%, #0a0c10 100%);
  border: 1px solid rgba(90,126,184,.38);
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 60px rgba(90,126,184,.06);
  z-index: 9999; overflow-y: auto;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(4px);
  transition: opacity .2s, visibility .2s, transform .2s;
}
.zd-csel-panel::-webkit-scrollbar { width: 3px; }
.zd-csel-panel::-webkit-scrollbar-track { background: transparent; }
.zd-csel-panel::-webkit-scrollbar-thumb { background: rgba(90,126,184,.25); border-radius: 2px; }
.zd-csel-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }

/* Panel options */
.zd-csel-panel .tsh-csel-opt {
  padding: 9px 14px; text-align: center;
  font-family: 'Be Vietnam Pro', sans-serif; font-size: .95rem;
  color: rgba(232,224,208,.7); cursor: pointer;
  transition: background .15s, color .15s;
}
.zd-csel-panel .tsh-csel-opt:hover { background: rgba(90,126,184,.09); color: #7a9ed8; }
.zd-csel-panel .tsh-csel-opt--sel { color: #7a9ed8; background: rgba(90,126,184,.07); font-weight: 600; }
.zd-csel-panel .tsh-csel-opt--ph {
  color: rgba(232,224,208,.32); font-style: italic;
  border-bottom: 1px solid rgba(90,126,184,.12); padding: 8px 14px;
}

/* ═══════════════ CITY CUSTOM SELECT — optgroup headers + search ═══════════════ */
/* City trigger — full border-radius + taller padding */
.zd-cosmos #zd-field-city .tsh-csel-trigger {
  border-radius: 4px;
  padding: 16px 14px;
}

/* Optgroup header */
.zd-csel-panel .tsh-csel-group {
  padding: 10px 14px 5px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--zd);
  border-top: 1px solid rgba(90,126,184,.10);
  pointer-events: none;
  text-shadow: 0 0 12px rgba(90,126,184,.2);
}
.zd-csel-panel .zd-csel-search + .tsh-csel-opt--ph + .tsh-csel-group,
.zd-csel-panel .zd-csel-search + .tsh-csel-group {
  border-top: none;
}

/* City panel options — left-aligned (panel with optgroup headers) */
.zd-csel-panel:has(.tsh-csel-group) .tsh-csel-opt:not(.tsh-csel-opt--ph) {
  text-align: left;
  padding-left: 20px;
}
/* Hide placeholder when search bar exists */
.zd-csel-panel:has(.zd-csel-search) .tsh-csel-opt--ph { display: none; }

/* Search bar — sticky top */
.zd-csel-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(90,126,184,.15);
  position: sticky;
  top: 0;
  background: rgba(14,16,22,.99);
  z-index: 1;
}
.zd-csel-sinp {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #e8e0d0;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: .88rem;
  padding: 2px 0;
  min-width: 0;
}
.zd-csel-sinp::placeholder {
  color: rgba(122,158,216,.35);
  font-style: italic;
  transition: opacity .15s;
}
.zd-csel-sinp:focus::placeholder {
  opacity: 0;
}
/* Search focus glow on parent */
.zd-csel-search:focus-within {
  border-bottom-color: rgba(90,126,184,.3);
  background: rgba(90,126,184,.03);
}

/* ═══════════════ INTERNATIONAL TOGGLE — "Sinh ở nước ngoài" ═══════════════ */
.zd-cosmos .tsh-field label.zd-intl-toggle {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 10px 14px;
  background: transparent;
  border: 1px dashed rgba(90,126,184,.18);
  border-radius: 4px; cursor: pointer; user-select: none;
  transition: border-color .25s, background .25s, color .25s;
  width: 100%; min-height: 44px;
  font-size: .82rem; color: var(--zd-muted);
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.zd-intl-native {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.zd-intl-toggle-box {
  flex-shrink: 0; width: 20px; height: 20px;
  border: 1.5px solid rgba(90,126,184,.35);
  border-radius: 2px; display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.zd-intl-toggle-check {
  opacity: 0; transform: scale(.5); transition: opacity .15s, transform .15s; color: #fff;
}
.zd-intl-toggle:hover {
  border-color: rgba(90,126,184,.35);
  background: rgba(90,126,184,.04);
}
.zd-intl-toggle.is-active {
  border-style: solid; border-color: rgba(90,126,184,.3);
  background: rgba(90,126,184,.06); color: var(--zd-light);
}
.zd-intl-toggle.is-active .zd-intl-toggle-box {
  background: var(--zd); border-color: var(--zd-light);
  box-shadow: 0 0 8px rgba(90,126,184,.3);
}
.zd-intl-toggle.is-active .zd-intl-toggle-check { opacity: 1; transform: scale(1); }
.zd-intl-toggle-ico { flex-shrink: 0; opacity: .5; transition: opacity .2s; }
.zd-intl-toggle:hover .zd-intl-toggle-ico,
.zd-intl-toggle.is-active .zd-intl-toggle-ico { opacity: .9; }
.zd-intl-toggle-text { flex: 1; text-align: left; }

/* ═══════════════ INTERNATIONAL COORD PANEL ═══════════════ */
.zd-intl-group {
  margin-top: 0; padding: 16px;
  border: 1px solid rgba(90,126,184,.12);
  border-radius: 4px;
  background: rgba(90,126,184,.02);
  animation: zdIntlSlide .3s ease;
}
@keyframes zdIntlSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.zd-intl-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; margin-bottom: 14px;
  background: rgba(90,126,184,.04);
  border: 1px solid rgba(90,126,184,.08); border-radius: 4px;
  font-size: .82rem; color: var(--zd-muted); line-height: 1.4;
}
.zd-intl-row {
  display: flex; gap: 10px;
}
.zd-intl-col { flex: 1; display: flex; flex-direction: column; }
.zd-intl-label {
  display: flex; align-items: center; gap: 4px;
  font-size: .75rem; font-weight: 600; color: var(--zd);
  letter-spacing: .04em; margin-bottom: 2px;
  text-shadow: 0 0 10px rgba(90,126,184,.15);
}
.zd-intl-seal { flex-shrink: 0; }
.zd-intl-hint {
  font-size: .75rem; color: rgba(122,158,216,.4);
  margin-bottom: 6px; letter-spacing: .02em;
}
.zd-intl-input {
  width: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px; padding: 12px 10px;
  color: #e8e0d0; font-family: 'Be Vietnam Pro', sans-serif;
  font-size: .92rem; outline: none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.15);
  transition: border-color .25s, box-shadow .25s;
  -moz-appearance: textfield;
}
.zd-intl-input::-webkit-inner-spin-button,
.zd-intl-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.zd-intl-input::placeholder { color: rgba(122,158,216,.3); }
.zd-intl-input:focus {
  border-color: rgba(90,126,184,.5);
  box-shadow: 0 0 16px rgba(90,126,184,.08), inset 0 1px 2px rgba(0,0,0,.1);
}
.zd-intl-help {
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px; font-size: .75rem;
  color: var(--zd-muted); opacity: .7;
}
.zd-intl-help a {
  color: var(--zd-light);
  text-decoration: underline; text-underline-offset: 2px;
}
.zd-intl-help a:hover { color: #fff; }

@media (max-width: 768px) {
  .zd-intl-row { flex-direction: column; gap: 12px; }
}

/* ═══════════════ TIME ROW — 2 column (Hour : Minute) ═══════════════ */
.zd-time-row {
  display: flex; align-items: stretch; gap: 0;
}
.zd-time-col { flex: 1; display: flex; flex-direction: column; }

/* Colon separator */
.zd-time-sep {
  display: flex; align-items: center; justify-content: center;
  width: 24px; flex-shrink: 0;
  font-size: 1.2rem; font-weight: 700; color: rgba(90,126,184,.4);
  letter-spacing: 0;
}

/* Time col custom select border rounding */
.zd-time-col:first-child .tsh-csel-trigger {
  border-radius: 4px 0 0 4px;
  border-right: none;
}
.zd-time-col:last-child .tsh-csel-trigger {
  border-radius: 0 4px 4px 0;
  border-left: none;
}

/* Hide native selects (custom select replaces them) */
.zd-cosmos .tsh-csel select { display: none !important; }
/* FOUC guard: block native dropdown opening pre-JS — .tsh-csel-trigger handles clicks post-JS. */
.zd-cosmos .tsh-date-col select,
/* FIX 10/08/2026 — LỖI CHÍ MẠNG "bấm không nhận" (cùng bệnh với cung-mệnh):
   luật cũ khoá bấm select NGAY từ lúc CSS tải, nhưng ô bấm được chỉ do JS dựng
   → ô nhìn thấy mà bấm chết suốt thời gian tải JS (mobile đo được ~13s).
   Sửa: chỉ khoá select gốc SAU khi JS đã bọc nó vào wrapper. */
.zd-cosmos .tsh-csel > select { pointer-events: none; }

/* ═══════════════ REDUCED MOTION ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  /* Decorative elements — hide */
  .zd-mandala-ring--outer, .zd-mandala-ring--mid, .zd-mandala-center,
  .zd-mandala-orbit--1, .zd-mandala-orbit--2,
  .zd-ring-outer, .zd-ring-degree, .zd-ring-rune,
  .zd-eye-hex, .zd-eye-diamond, .zd-center-eye, .zd-eye-outer,
  .zd-star--a, .zd-star--b, .zd-star--c,
  .zd-seal-spin,
  .zd-orbit-sun, .zd-orbit-moon,
  .zd-fs { animation: none !important; opacity: .06; transform: none; }
  /* Interactive elements — kill animation, keep visible */
  .zd-entrance { animation: none !important; opacity: 1 !important; transform: none; }
  .zd-cosmos .tsh-btn-submit,
  .zd-cosmos .tsh-btn-ring,
  .zd-cosmos .tsh-live-dot,
  .zd-cosmos .tsh-form-box,
  .zd-label-sun, .zd-label-moon { animation: none !important; transform: none; }
  .zd-pa-r1, .zd-pa-r2, .zd-pa-r3, .zd-pa-glyph, .zd-pa-orbit { animation: none !important; }
  .zd-procl-name { animation: none !important; background: none !important; -webkit-text-fill-color: var(--zd-light); color: var(--zd-light); }
}

/* ═══════════════ OPENING PROCLAMATION — GRAND CELESTIAL CARD ═══════════════ */
.zd-proclamation {
  text-align: center;
  padding: 32px 28px 28px;
  border: 1px solid rgba(90,126,184,.18); border-radius: 4px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(20,28,48,.6) 0%, transparent 70%),
    rgba(8,10,18,.92);
  margin-bottom: 24px; position: relative; overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(90,126,184,.06),
    0 4px 40px rgba(0,0,0,.5),
    0 0 80px rgba(90,126,184,.1),
    0 0 160px rgba(90,126,184,.04);
}
/* Outer double frame */
.zd-proclamation::before {
  content: '';
  position: absolute; inset: 8px;
  border: 1px solid rgba(90,126,184,.1);
  border-radius: 3px;
  pointer-events: none; z-index: 0;
}
/* Subtle star-field texture */
.zd-proclamation::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 15% 25%, rgba(90,126,184,.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 18%, rgba(201,169,110,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 75%, rgba(90,126,184,.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 60%, rgba(201,169,110,.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 40%, rgba(90,126,184,.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 85%, rgba(201,169,110,.15) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 90%, rgba(90,126,184,.15) 0%, transparent 100%);
  pointer-events: none; z-index: 0;
}
/* Grand Astrolabe — 4-layer mandala */
.zd-procl-astrolabe {
  position: relative; width: 180px; height: 180px;
  margin: 0 auto 4px;
  filter: drop-shadow(0 0 18px rgba(90,126,184,.18));
}
.zd-pa-svg { width: 180px; height: 180px; display: block; }
/* Layer 1: Outer zodiac tick ring — counter-rotating, very slow */
.zd-pa-r1 {
  animation: zdWheelSpin 120s linear infinite reverse;
  transform-origin: 90px 90px;
}
/* Layer 2: Bát Quái ring — rotating CW, medium */
.zd-pa-r2 {
  animation: zdWheelSpin 180s linear infinite;
  transform-origin: 90px 90px;
}
/* Layer 3: Inner dashed ring — counter-rotating, fast */
.zd-pa-r3 {
  animation: zdWheelSpin 70s linear infinite reverse;
  transform-origin: 90px 90px;
}
/* Center glyph — gentle pulse */
.zd-pa-glyph {
  animation: zdGlyphPulse 5s ease-in-out infinite;
  transform-origin: 90px 90px;
}
@keyframes zdGlyphPulse {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.06); }
}
/* Orbiting dot — circles the center */
.zd-pa-orbit {
  animation: zdWheelSpin 22s linear infinite;
  transform-origin: 90px 90px;
}
/* Eyebrow — small context label above divider */
.zd-procl-eyebrow {
  font-family: 'Lexend Deca', sans-serif;
  font-size: .75rem; letter-spacing: .25em; text-transform: uppercase;
  color: rgba(90,126,184,.65); margin: 0 0 4px;
}

/* Meander divider — full width */
.zd-procl-divider { margin: 2px auto 10px; max-width: 340px; line-height: 0; }
.zd-procl-divider-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Sign identity block */
.zd-procl-identity { margin-bottom: 10px; }

/* Accessibility label — clear context for elderly */
.zd-procl-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(90,126,184,.5); margin: 0 0 6px; font-weight: 500;
}

/* Sign name — large shimmer, responsive fluid size */
.zd-procl-name {
  font-family: 'Lexend Deca', sans-serif;
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  line-height: 1.15; margin: 0 0 6px; letter-spacing: .05em;
  background: linear-gradient(
    110deg,
    var(--zd) 0%, var(--zd) 25%,
    var(--zd-light) 35%, #dde8ff 40%, var(--zd-light) 45%,
    var(--zd) 55%, var(--zd) 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: zdShimmer 8s ease-in-out infinite;
}

/* Hán tự — Traditional Chinese sign name */
.zd-procl-hantu {
  font-family: 'Lexend Deca', sans-serif;
  font-size: .82rem; letter-spacing: .35em;
  color: rgba(201,169,110,.5); margin: 0 0 12px;
  text-shadow: 0 0 12px rgba(201,169,110,.2);
}

/* Archetype block — labeled for elderly clarity */
.zd-procl-archetype {
  display: flex; align-items: center; justify-content: center;
  gap: 7px; margin-bottom: 10px; flex-wrap: wrap;
}
.zd-procl-archetype-label {
  font-family: 'Lexend Deca', sans-serif;
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(201,169,110,.55); font-weight: 400;
}
.zd-procl-archetype-sep { color: rgba(90,126,184,.35); font-size: .75rem; }
.zd-procl-archetype-text {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-size: .98rem;
  color: var(--zd-muted); letter-spacing: .02em;
}

/* Ornamental quote block */
.zd-procl-quote-wrap {
  display: flex; align-items: flex-start; justify-content: center;
  gap: 6px; max-width: 420px; margin: 0 auto 16px; padding: 0 8px;
}
.zd-procl-qmark { flex-shrink: 0; margin-top: 1px; }
.zd-procl-qmark--close { margin-top: auto; padding-bottom: 1px; }
.zd-procl-quote-text {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-size: .88rem;
  color: rgba(232,224,208,.55); line-height: 1.7;
  flex: 1; text-align: center; letter-spacing: .025em;
  margin: 0;
}

/* Birth/location pills — SVG icon + text */
.zd-procl-meta {
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.zd-procl-meta-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: .75rem; color: var(--zd-muted);
  padding: 5px 12px;
  border: 1px solid rgba(90,126,184,.15); border-radius: 4px;
  background: rgba(90,126,184,.04);
  transition: border-color .2s, background .2s;
}
.zd-procl-meta-item:hover {
  border-color: rgba(90,126,184,.28);
  background: rgba(90,126,184,.07);
}
.zd-procl-meta-icon {
  flex-shrink: 0; color: var(--zd); opacity: .75;
  vertical-align: middle;
}

/* Mobile overrides */
@media (max-width: 480px) {
  .zd-proclamation { padding: 24px 16px 22px; }
  .zd-procl-astrolabe { width: 150px; height: 150px; }
  .zd-pa-svg { width: 150px; height: 150px; }
  .zd-pa-r1, .zd-pa-r2, .zd-pa-r3, .zd-pa-glyph, .zd-pa-orbit { transform-origin: 75px 75px; }
  .zd-procl-name { font-size: clamp(1.4rem, 8vw, 1.9rem); }
  .zd-procl-quote-wrap { gap: 4px; }
  .zd-procl-meta { gap: 8px; }
  .zd-procl-meta-item { font-size: .75rem; padding: 4px 10px; }
}

/* ═══════════════ CLOSING SEAL ═══════════════ */
.zd-seal {
  border: 1px solid var(--zd-border); border-radius: 4px;
  background: rgba(10,12,18,.88);
  margin-top: 24px; padding: 24px 20px;
  position: relative; overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(90,126,184,.05),
    0 2px 16px rgba(0,0,0,.30),
    0 0 40px rgba(90,126,184,.04);
}
/* TL corner bracket */
.zd-seal::before {
  content: '';
  position: absolute; top: 6px; left: 6px;
  width: 20px; height: 20px;
  border-top: 1.5px solid var(--zd);
  border-left: 1.5px solid var(--zd);
  opacity: .35; pointer-events: none; z-index: 1;
}
/* BR corner bracket */
.zd-seal::after {
  content: '';
  position: absolute; bottom: 6px; right: 6px;
  width: 20px; height: 20px;
  border-bottom: 1.5px solid var(--zd);
  border-right: 1.5px solid var(--zd);
  opacity: .35; pointer-events: none; z-index: 1;
}
/* Head row */
.zd-seal-head {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(90,126,184,.10);
}
.zd-seal-symbol { font-size: 2rem; flex-shrink: 0; color: var(--zd-light); }
.zd-seal-head-text { flex: 1; }
.zd-seal-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem; color: var(--zd-light); margin-bottom: 2px;
}
.zd-seal-sub { font-size: .78rem; color: var(--zd-muted); letter-spacing: .05em; }
/* Seal keywords — margin override */
.zd-seal-kw { margin-top: 0; margin-bottom: 16px; }
/* Disclaimer — amber tint */
.zd-seal-disc {
  background: rgba(224,168,88,.06);
  border: 1px solid rgba(224,168,88,.15);
  border-radius: 4px; padding: 12px 16px;
  font-size: .82rem; color: rgba(232,224,208,.7);
  margin-bottom: 16px; line-height: 1.6;
}
/* CTA row */
.zd-cta-row {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.zd-cta-btn {
  flex: 1; min-width: 160px;
  display: inline-block; padding: 10px 16px;
  background: rgba(10,12,18,.6);
  border: 1px solid rgba(90,126,184,.25); border-radius: 4px;
  color: var(--zd-light); font-size: .85rem;
  text-align: center; text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
}
.zd-cta-btn:hover {
  background: linear-gradient(135deg, rgba(58,94,152,.3), rgba(90,126,184,.2));
  border-color: rgba(90,126,184,.5);
  color: #d0e8ff; text-decoration: none;
}
/* Timestamp */
.zd-seal-ts {
  text-align: center; font-size: .75rem;
  color: var(--zd-muted); margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════
   CINEMATIC LOADING — CELESTIAL ORRERY (REDESIGN 2026-03-29)
   ═══════════════════════════════════════════════════════ */

/* ── Override shared gold L-brackets → zodiac blue ── */
#zd-loading .tsh-cine-brk-tl,
#zd-loading .tsh-cine-brk-tr,
#zd-loading .tsh-cine-brk-bl,
#zd-loading .tsh-cine-brk-br { border-color: rgba(90,126,184,.55) !important; }

/* Override cine text color */
#zd-loading.tsh-cine .tsh-cine-text { color: rgba(142,178,236,.92); }

/* ── Deep-space nebula ── */
.zd-cine-nebula {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 65% 42% at 12% 18%, rgba(58,94,152,.22) 0%, transparent 65%),
    radial-gradient(ellipse 55% 38% at 88% 78%, rgba(90,126,184,.14) 0%, transparent 60%),
    radial-gradient(ellipse 45% 55% at 52% 52%, rgba(28,38,68,.30) 0%, transparent 70%);
  opacity: 0; transition: opacity 2.5s;
}
.tsh-cine.phase-1 .zd-cine-nebula { opacity: 1; }

/* ── Star field (3 layers: dim / medium / bright-gold) ── */
.zd-cine-stars-sm,
.zd-cine-stars-md,
.zd-cine-stars-lg {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px; pointer-events: none;
  opacity: 0; transition: opacity 2s .5s;
}
.tsh-cine.phase-1 .zd-cine-stars-sm,
.tsh-cine.phase-1 .zd-cine-stars-md,
.tsh-cine.phase-1 .zd-cine-stars-lg { opacity: 1; }

.zd-cine-stars-sm {
  box-shadow:
    5vw 8vh 0 0 rgba(200,215,255,.28),    12vw 23vh 0 0 rgba(185,205,248,.22),
    19vw 14vh 0 0 rgba(205,218,255,.26),  28vw 6vh 0 0 rgba(190,208,250,.2),
    37vw 19vh 0 0 rgba(200,215,255,.24),  45vw 11vh 0 0 rgba(188,204,248,.28),
    54vw 26vh 0 0 rgba(205,218,255,.2),   63vw 8vh 0 0 rgba(195,210,252,.26),
    71vw 17vh 0 0 rgba(200,215,255,.22),  80vw 22vh 0 0 rgba(185,205,248,.28),
    88vw 7vh 0 0 rgba(205,218,255,.24),   94vw 29vh 0 0 rgba(190,208,250,.2),
    3vw 42vh 0 0 rgba(200,215,255,.26),   11vw 55vh 0 0 rgba(188,204,248,.22),
    22vw 38vh 0 0 rgba(205,218,255,.28),  31vw 61vh 0 0 rgba(195,210,252,.2),
    40vw 48vh 0 0 rgba(200,215,255,.24),  50vw 44vh 0 0 rgba(185,205,248,.26),
    59vw 57vh 0 0 rgba(205,218,255,.22),  68vw 36vh 0 0 rgba(190,208,250,.28),
    77vw 63vh 0 0 rgba(200,215,255,.2),   85vw 47vh 0 0 rgba(188,204,248,.26),
    93vw 52vh 0 0 rgba(205,218,255,.24),  97vw 41vh 0 0 rgba(195,210,252,.22),
    8vw 73vh 0 0 rgba(200,215,255,.26),   17vw 86vh 0 0 rgba(185,205,248,.2),
    25vw 71vh 0 0 rgba(205,218,255,.28),  34vw 92vh 0 0 rgba(190,208,250,.22),
    42vw 78vh 0 0 rgba(200,215,255,.24),  51vw 68vh 0 0 rgba(188,204,248,.26),
    60vw 84vh 0 0 rgba(205,218,255,.2),   69vw 75vh 0 0 rgba(195,210,252,.28),
    78vw 91vh 0 0 rgba(200,215,255,.22),  87vw 82vh 0 0 rgba(185,205,248,.26),
    96vw 77vh 0 0 rgba(205,218,255,.24);
  animation: zdStarsTwinkle1 5.5s ease-in-out infinite alternate;
}
.zd-cine-stars-md {
  box-shadow:
    9vw 16vh 1px 0 rgba(205,218,255,.42),  23vw 41vh 1px 0 rgba(190,210,252,.38),
    36vw 7vh 1px 0 rgba(215,228,255,.48),  48vw 33vh 1px 0 rgba(198,214,255,.4),
    61vw 52vh 1px 0 rgba(205,218,255,.42), 74vw 14vh 1px 0 rgba(192,210,252,.48),
    83vw 68vh 1px 0 rgba(205,218,255,.38), 95vw 35vh 1px 0 rgba(190,208,250,.44),
    6vw 58vh 1px 0 rgba(215,228,255,.38),  18vw 79vh 1px 0 rgba(198,214,255,.48),
    30vw 24vh 1px 0 rgba(205,218,255,.38), 42vw 71vh 1px 0 rgba(192,210,252,.44),
    55vw 90vh 1px 0 rgba(205,218,255,.38), 67vw 45vh 1px 0 rgba(190,208,250,.48),
    79vw 26vh 1px 0 rgba(215,228,255,.38), 89vw 63vh 1px 0 rgba(198,214,255,.44),
    15vw 48vh 1px 0 rgba(205,218,255,.38), 56vw 13vh 1px 0 rgba(192,210,252,.48);
  animation: zdStarsTwinkle2 7.5s ease-in-out infinite alternate;
}
.zd-cine-stars-lg {
  box-shadow:
    21vw 31vh 2px 0 rgba(248,230,185,.52), 44vw 19vh 2px 0 rgba(235,220,195,.48),
    57vw 72vh 2px 0 rgba(255,245,215,.58), 72vw 43vh 2px 0 rgba(242,228,188,.5),
    86vw 16vh 2px 0 rgba(248,232,192,.54), 33vw 84vh 2px 0 rgba(238,222,192,.48),
    8vw 55vh 2px 0 rgba(252,238,202,.58);
  animation: zdStarsTwinkle3 9s ease-in-out infinite alternate;
}
@keyframes zdStarsTwinkle1 { 0% { opacity: .62; } 100% { opacity: 1; } }
@keyframes zdStarsTwinkle2 { 0% { opacity: .52; } 100% { opacity: 1; } }
@keyframes zdStarsTwinkle3 { 0% { opacity: .42; } 100% { opacity: .92; } }

/* ── Shooting Meteors ── */
.zd-cine-meteor {
  position: absolute;
  width: 130px; height: 1.5px; border-radius: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(175,202,255,.65) 38%, rgba(245,228,178,.78) 62%, transparent 100%);
  top: calc(8vh + var(--mi) * 20vh);
  left: -140px;
  transform: rotate(-20deg);
  transform-origin: left center;
  opacity: 0;
  animation: zdMeteorFly calc(2.8s + var(--mi) * 1.6s) ease-in-out infinite;
  animation-delay: calc(var(--mi) * 2.4s + .8s);
  pointer-events: none;
}
@keyframes zdMeteorFly {
  0%   { opacity: 0; transform: rotate(-20deg) translateX(0); }
  8%   { opacity: .88; }
  85%  { opacity: .12; }
  100% { opacity: 0; transform: rotate(-20deg) translateX(120vw); }
}

/* ── Orrery Container ── */
.zd-cine-orrery {
  position: absolute; top: 46%; left: 50%;
  width: 460px; height: 460px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
@media (max-width: 480px) {
  .zd-cine-orrery { transform: translate(-50%, -50%) scale(.6); top: 43%; }
}
@media (min-width: 481px) and (max-width: 680px) {
  .zd-cine-orrery { transform: translate(-50%, -50%) scale(.78); }
}
@media (max-height: 480px) {
  .zd-cine-orrery { transform: translate(-50%, -50%) scale(.52); top: 40%; }
}

/* ── Outer Zodiac Rings ── */
.zd-cine-zodring,
.zd-cine-zodring-inner {
  position: absolute; top: 50%; left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0; transition: opacity .9s;
  will-change: transform;
}
.tsh-cine.phase-2 .zd-cine-zodring,
.tsh-cine.phase-2 .zd-cine-zodring-inner { opacity: 1; }

.zd-cine-zodring {
  width: 422px; height: 422px;
  border: 1px solid rgba(90,126,184,.35);
  box-shadow:
    0 0 0 3px rgba(90,126,184,.06),
    inset 0 0 0 3px rgba(90,126,184,.04),
    0 0 40px rgba(90,126,184,.08);
  animation: zdZodRingCCW 100s linear infinite;
}
.zd-cine-zodring-inner {
  width: 396px; height: 396px;
  border: .75px dashed rgba(90,126,184,.2);
  animation: zdZodRingCW 130s linear infinite;
}
@keyframes zdZodRingCCW { to { transform: translate(-50%,-50%) rotate(-360deg); } }
@keyframes zdZodRingCW  { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* ── Zodiac Sign Glyphs (static, upright) ── */
.zd-cine-signs-ring {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .7s;
}
.tsh-cine.phase-2 .zd-cine-signs-ring { opacity: 1; }

.zd-cine-sign {
  position: absolute; top: 50%; left: 50%;
  width: 36px; height: 36px; margin: -18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  color: rgba(122,158,216,.82);
  text-shadow: 0 0 8px rgba(90,126,184,.65), 0 0 22px rgba(90,126,184,.3);
  /* Positioned at radius 194px, counter-rotated to stay upright */
  transform: rotate(calc(var(--zi) * 30deg)) translateY(-194px) rotate(calc(var(--zi) * -30deg));
  opacity: 0; transition: opacity .5s;
  transition-delay: calc(var(--zi) * .07s);
  will-change: opacity;
}
.tsh-cine.phase-2 .zd-cine-sign { opacity: 1; }

/* ── Orbital Tracks ── */
.zd-cine-track {
  position: absolute; top: 50%; left: 50%;
  border-radius: 50%; transform: translate(-50%, -50%);
  opacity: 0; transition: opacity .5s;
  pointer-events: none;
}
.tsh-cine.phase-3 .zd-cine-track { opacity: 1; }
.zd-cine-track-1 { width: 116px; height: 116px; border: .75px dashed rgba(90,126,184,.28); }
.zd-cine-track-2 { width: 184px; height: 184px; border: .75px solid rgba(90,126,184,.2); }
.zd-cine-track-3 { width: 252px; height: 252px; border: .75px solid rgba(90,126,184,.15); }
.zd-cine-track-4 { width: 320px; height: 320px; border: .75px dotted rgba(90,126,184,.13); }

/* ── Orbiting Planets ── */
.zd-cine-orbit {
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0;
  opacity: 0; transition: opacity .4s;
}
.tsh-cine.phase-3 .zd-cine-orbit-1 { opacity: 1; transition-delay: 0s; }
.tsh-cine.phase-3 .zd-cine-orbit-2 { opacity: 1; transition-delay: .1s; }
.tsh-cine.phase-3 .zd-cine-orbit-3 { opacity: 1; transition-delay: .2s; }
.tsh-cine.phase-3 .zd-cine-orbit-4 { opacity: 1; transition-delay: .3s; }
.zd-cine-orbit-1 { animation: zdOrbit1 5s linear infinite; }
.zd-cine-orbit-2 { animation: zdOrbit2 9s linear infinite; }
.zd-cine-orbit-3 { animation: zdOrbit3 14s linear infinite; }
.zd-cine-orbit-4 { animation: zdOrbit4 22s linear infinite; }
@keyframes zdOrbit1 { to { transform: rotate(360deg); } }
@keyframes zdOrbit2 { to { transform: rotate(-360deg); } }
@keyframes zdOrbit3 { to { transform: rotate(360deg); } }
@keyframes zdOrbit4 { to { transform: rotate(-360deg); } }

.zd-cine-planet {
  position: absolute;
  width: 28px; height: 28px; margin: -14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: .95rem;
  background: rgba(8,10,16,.8);
  border: 1px solid rgba(90,126,184,.38);
  box-shadow: 0 0 8px rgba(90,126,184,.28);
}
/* Sun ☉ — gold, innermost, fastest */
.zd-cine-orbit-1 .zd-cine-planet {
  color: rgba(245,213,140,.95);
  border-color: rgba(245,213,140,.45);
  box-shadow: 0 0 12px rgba(245,213,140,.35);
  transform: translateY(-58px);
}
/* Moon ☽ — silver-blue */
.zd-cine-orbit-2 .zd-cine-planet {
  color: rgba(210,225,255,.88);
  border-color: rgba(180,200,240,.4);
  transform: translateY(-92px);
}
/* Mars ♂ — red-orange */
.zd-cine-orbit-3 .zd-cine-planet {
  color: rgba(225,100,78,.85);
  border-color: rgba(220,90,68,.35);
  box-shadow: 0 0 10px rgba(220,90,68,.25);
  transform: translateY(-126px);
}
/* Jupiter ♃ — pale blue */
.zd-cine-orbit-4 .zd-cine-planet {
  color: rgba(178,208,255,.82);
  border-color: rgba(168,200,248,.35);
  transform: translateY(-160px);
}

/* ── ASC / DSC / IC / MC Axis ── */
.zd-cine-axis {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; transition: opacity .6s;
  pointer-events: none;
}
.tsh-cine.phase-4 .zd-cine-axis { opacity: 1; }

/* ── Center Orb ── */
.zd-cine-orb {
  position: absolute; top: 50%; left: 50%;
  width: 60px; height: 60px; margin: -30px;
  opacity: 0; transition: opacity .7s;
}
.tsh-cine.phase-2 .zd-cine-orb { opacity: 1; }

.zd-cine-orb-halo {
  position: absolute; inset: -32px; border-radius: 50%;
  background: radial-gradient(circle, rgba(90,126,184,.38) 0%, rgba(90,126,184,.1) 42%, transparent 72%);
  animation: zdOrbHaloPulse 3.5s ease-in-out infinite;
  pointer-events: none;
}
.zd-cine-orb-spin {
  position: absolute; inset: -8px; border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: rgba(245,213,140,.72);
  border-right-color: rgba(90,126,184,.45);
  animation: zdOrbSpinAnim 2.8s linear infinite;
}
.zd-cine-orb-core {
  position: relative; z-index: 2;
  width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle at 44% 40%, rgba(90,126,184,.32) 0%, rgba(6,8,14,.96) 65%);
  border: 1.5px solid rgba(90,126,184,.55);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; color: rgba(245,213,140,.95);
  box-shadow:
    0 0 16px rgba(90,126,184,.5),
    0 0 40px rgba(90,126,184,.2),
    inset 0 0 16px rgba(90,126,184,.18);
  animation: zdOrbCorePulse 4s ease-in-out infinite;
}
@keyframes zdOrbHaloPulse {
  0%,100% { transform: scale(.88); opacity: .65; }
  50%      { transform: scale(1.12); opacity: 1; }
}
@keyframes zdOrbSpinAnim { to { transform: rotate(360deg); } }
@keyframes zdOrbCorePulse {
  0%,100% { box-shadow: 0 0 16px rgba(90,126,184,.5), 0 0 40px rgba(90,126,184,.2), inset 0 0 16px rgba(90,126,184,.18); }
  50%     { box-shadow: 0 0 28px rgba(90,126,184,.75), 0 0 65px rgba(90,126,184,.3), 0 0 80px rgba(122,158,216,.15), inset 0 0 24px rgba(90,126,184,.32); }
}

/* ── Big Three Label ── */
.zd-cine-big3 {
  position: absolute; bottom: 28%; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 10px; z-index: 10;
  font-family: 'Lexend Deca', sans-serif; font-size: .75rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(90,126,184,.65);
  opacity: 0; transition: opacity .5s;
  pointer-events: none;
}
.tsh-cine.phase-3 .zd-cine-big3 { opacity: 1; }
.zd-cine-big3-dot { color: rgba(245,213,140,.45); font-size: .75rem; }
@media (max-width: 480px) {
  .zd-cine-big3 { font-size: .75rem; bottom: 26%; gap: 6px; }
}

/* ── Phase 5: all orrery elements fade out ── */
.tsh-cine.phase-5 .zd-cine-zodring,
.tsh-cine.phase-5 .zd-cine-zodring-inner,
.tsh-cine.phase-5 .zd-cine-signs-ring,
.tsh-cine.phase-5 .zd-cine-track,
.tsh-cine.phase-5 .zd-cine-orbit,
.tsh-cine.phase-5 .zd-cine-axis,
.tsh-cine.phase-5 .zd-cine-big3,
.tsh-cine.phase-5 .zd-cine-nebula,
.tsh-cine.phase-5 .zd-cine-stars-sm,
.tsh-cine.phase-5 .zd-cine-stars-md,
.tsh-cine.phase-5 .zd-cine-stars-lg,
.tsh-cine.phase-5 .zd-cine-meteor { opacity: 0; transition: opacity .3s; }
.tsh-cine.phase-5 .zd-cine-orb {
  width: 180px; height: 180px; margin: -90px;
  opacity: 0;
  transition: width .5s ease-in, height .5s ease-in, margin .5s ease-in, opacity .4s;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE LAYOUT OVERRIDES — Cung Hoàng Đạo
   Fix: rối mắt trên điện thoại (portrait column + mandala + floats)
   ═══════════════════════════════════════════════════════════ */

/* Tablet + Mobile: ẩn floating particles (leak vào form area) */
@media (max-width: 820px) {
  .zd-float-svg { display: none; }

  /* Override shared tsh row layout → stack dọc cho zodiac */
  .zd-cosmos .tsh-pyth-col--portrait {
    flex-direction: column;
    align-items: center;
    padding-bottom: 0;
  }
  .zd-cosmos .tsh-pyth-frame {
    width: 180px;
    height: 180px;
    margin: 0 auto 16px;
    flex-shrink: 0;
  }
  .zd-cosmos .tsh-pyth-info {
    text-align: center;
    width: 100%;
    padding-left: 0;
  }
  .zd-cosmos .tsh-pyth-info .zd-title-block,
  .zd-cosmos .tsh-pyth-info .zd-badge-row,
  .zd-cosmos .tsh-pyth-info .zd-quote {
    text-align: center;
  }
  .zd-cosmos .zd-badge-row {
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Mandala: thu nhỏ trên tablet */
  .zd-mandala {
    width: 220px;
    height: 220px;
    opacity: .12;
  }
}

/* Mobile nhỏ */
@media (max-width: 480px) {
  .zd-cosmos .tsh-pyth-frame {
    width: 150px;
    height: 150px;
  }

  /* Ẩn hoàn toàn mandala trên mobile nhỏ */
  .zd-mandala { display: none; }

  /* Portrait section: giảm padding */
  .zd-cosmos .tsh-pyth-col--portrait {
    padding: 12px 12px 0;
  }

  /* Form section: giảm padding */
  .zd-cosmos .tsh-pyth-col--form {
    padding: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════
   PROCLAMATION SIDE AMBIENT PANELS
   Trái: ký hiệu cung khổng lồ + nebula · Phải: mini orrery
   ═══════════════════════════════════════════════════════════ */

/* Base panel — absolute, fills side space outside center content */
.zd-ps {
  position: absolute;
  top: 0; bottom: 0;
  width: calc(50% - 230px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.zd-ps--left  { left: 0; }
.zd-ps--right { right: 0; }

/* ── LEFT: Nebula glow + giant drifting glyph ── */
.zd-ps-nebula {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 55% 50%,
    rgba(90,126,184,.07) 0%, transparent 70%);
  animation: zdPsNebula 7s ease-in-out infinite alternate;
}
@keyframes zdPsNebula {
  from { opacity: .4; transform: scale(1); }
  to   { opacity: 1;  transform: scale(1.15); }
}

.zd-ps-glyph {
  position: relative;
  font-size: clamp(4rem, 10vw, 7.5rem);
  color: rgba(90,126,184,.065);
  line-height: 1;
  user-select: none;
  filter: blur(.4px) drop-shadow(0 0 28px rgba(90,126,184,.14));
  animation: zdPsGlyphDrift 10s ease-in-out infinite alternate;
}
@keyframes zdPsGlyphDrift {
  from { transform: translateY(-16px) rotate(-5deg); opacity: .04; }
  to   { transform: translateY(16px)  rotate( 5deg); opacity: .13; }
}

/* Star dots scattered on left panel */
.zd-ps-star {
  position: absolute;
  user-select: none;
  animation: zdPsStarBlink 3s ease-in-out infinite alternate;
}
.zd-ps-s1 { top: 22%; left: 28%; font-size: .75rem; color: rgba(201,169,110,.45); animation-delay: 0s; }
.zd-ps-s2 { top: 55%; left: 72%; font-size: 1.1rem; color: rgba(90,126,184,.5); animation-delay: 1.1s; }
.zd-ps-s3 { top: 78%; left: 38%; font-size: .75rem;  color: rgba(201,169,110,.4); animation-delay: 2.0s; }
.zd-ps-s4 { top: 35%; left: 62%; font-size: .9rem;  color: rgba(90,126,184,.35); animation-delay: 0.6s; }
@keyframes zdPsStarBlink {
  from { opacity: .15; transform: scale(.7); }
  to   { opacity: .95; transform: scale(1.3); }
}

/* ── RIGHT: Mini Orrery ── */
.zd-ps-orrery {
  position: relative;
  width: 140px; height: 140px;
}

/* Orbital tracks — circles rotating around center */
.zd-ps-track {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: .75px solid rgba(90,126,184,.13);
  transform: translate(-50%, -50%);
}
.zd-ps-t1 { width: 58px;  height: 58px;  animation: zdPsTrack 7s  linear infinite; }
.zd-ps-t2 { width: 96px;  height: 96px;  animation: zdPsTrack 13s linear infinite; }
.zd-ps-t3 { width: 134px; height: 134px; animation: zdPsTrack 21s linear infinite; }
@keyframes zdPsTrack { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Planet dots — counter-rotate to stay upright */
.zd-ps-planet {
  position: absolute;
  top: -9px; left: 50%;
  line-height: 1;
  font-size: .9rem;
}
.zd-ps-p1 {
  transform: translateX(-50%);
  color: rgba(201,169,110,.6);
  animation: zdPsCR 7s linear infinite;  /* ☉ Sun — gold */
}
.zd-ps-p2 {
  transform: translateX(-50%);
  color: rgba(200,215,255,.5);
  animation: zdPsCR 13s linear infinite; /* ☽ Moon — silver */
}
.zd-ps-p3 {
  transform: translateX(-50%);
  color: rgba(90,126,184,.55);
  animation: zdPsCR 21s linear infinite; /* ♃ Jupiter — blue */
}
@keyframes zdPsCR {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(-360deg); }
}

/* Center star */
.zd-ps-core {
  position: absolute;
  top: 50%; left: 50%;
  width: 7px; height: 7px;
  margin: -3.5px;
  border-radius: 50%;
  background: rgba(201,169,110,.45);
  box-shadow: 0 0 10px rgba(201,169,110,.35);
  animation: zdPsCorePulse 4s ease-in-out infinite alternate;
}
@keyframes zdPsCorePulse {
  from { box-shadow: 0 0 6px rgba(201,169,110,.3);  opacity: .55; }
  to   { box-shadow: 0 0 18px rgba(201,169,110,.65); opacity: 1; }
}

/* Hide side panels at narrow widths — no space for them */
@media (max-width: 960px) {
  .zd-ps { display: none; }
}

/* CHD finite UI/readability revision: preserve Zodiac blue/cream and original graphics. */
.zd-cosmos, .zd-csel-panel {
  --zd-reading: 1rem; --zd-secondary: .875rem; --zd-reading-line: 1.65;
  --zd-readable-muted: rgba(232,224,208,.85); --zd-readable-accent: #9dbcee;
  --zd-readable-error: #efd3b1;
  --zd-hover-dark: #172131; --zd-hover-mid: #24354f; --zd-hover-light: #314669;
}
.zd-cosmos .zd-date-sub, .zd-cosmos .zd-time-hint, .zd-cosmos .zd-unlock-badge,
.zd-cosmos .tsh-form-disc, .zd-cosmos .zd-bt-desc, .zd-cosmos .zd-bt-disclaimer,
.zd-cosmos .zd-text, .zd-cosmos .zd-decan-desc, .zd-cosmos .zd-section-subtitle,
.zd-cosmos .zd-section p, .zd-cosmos .zd-section li, .zd-cosmos .zd-famous-note,
.zd-cosmos .zd-procl-quote-text, .zd-cosmos .zd-procl-archetype-text, .zd-cosmos .zd-seal-note, .zd-cosmos .zd-intl-banner,
.zd-cosmos .zd-intl-help, .zd-cosmos .zd-intl-hint, .zd-cosmos .tsh-field-err,
.zd-cosmos .tsh-error, .zd-cosmos .tsh-trust-signal, .zd-cosmos .zd-cusp-warning {
  font-size: var(--zd-reading) !important; line-height: var(--zd-reading-line) !important;
  color: var(--zd-readable-muted) !important; opacity: 1 !important;
}
.zd-cosmos .tsh-field > label, .zd-cosmos label.zd-checkbox-label,
.zd-cosmos label.zd-intl-toggle, .zd-cosmos .zd-intl-label, .zd-cosmos .zd-procl-meta-item,
.zd-cosmos .tsh-csel-trigger, .zd-cosmos .tsh-csel-val, .zd-cosmos .zd-intl-input,
.zd-cosmos .zd-toc-nav a, .zd-csel-panel .tsh-csel-opt, .zd-csel-panel .zd-csel-sinp,
.zd-csel-panel .zd-csel-empty {
  font-size: var(--zd-reading) !important; line-height: 1.5 !important;
  color: var(--zd-text, #e8e0d0) !important;
}
.zd-cosmos .zd-bt-label, .zd-cosmos .zd-result-meta, .zd-cosmos .zd-result-sign-en,
.zd-cosmos .zd-compat-name, .zd-cosmos .zd-compat-label, .zd-cosmos .zd-lucky-label,
.zd-cosmos .zd-lucky-value, .zd-cosmos .zd-famous-date, .zd-cosmos .zd-dignity-label,
.zd-cosmos .zd-dignity-value, .zd-cosmos .zd-decan-ruler, .zd-cosmos .zd-tz-indicator,
.zd-cosmos .tsh-lbl-hint, .zd-cosmos .zd-badge-required, .zd-cosmos .zd-badge-important,
.zd-cosmos .zd-procl-eyebrow, .zd-cosmos .zd-procl-label, .zd-cosmos .zd-procl-archetype-label,
.zd-cosmos .zd-seal-ts, .zd-csel-panel .tsh-csel-group {
  font-size: var(--zd-secondary) !important; line-height: 1.5 !important;
  color: var(--zd-readable-muted) !important; opacity: 1 !important;
}
.zd-cosmos .zd-section-title, .zd-cosmos .zd-bt-sign, .zd-cosmos .zd-intl-label,
.zd-cosmos .zd-tz-indicator, .zd-cosmos .tsh-field > label { color: var(--zd-readable-accent) !important; }
.zd-cosmos .tsh-field-err, .zd-cosmos .tsh-error { color: var(--zd-readable-error) !important; animation: none !important; }
.zd-cosmos .tsh-csel-val--ph, .zd-csel-panel .zd-csel-sinp::placeholder,
.zd-cosmos .zd-intl-input::placeholder { color: var(--zd-readable-muted) !important; opacity: 1; }
.zd-cosmos .tsh-date-row, .zd-cosmos .zd-time-row { flex-wrap: wrap; gap: .5rem; max-width: 100%; }
.zd-cosmos .tsh-date-col { flex: 1 1 4.5rem; min-width: 0; }
.zd-cosmos .tsh-date-col--year { flex-basis: 6.5rem; }
.zd-cosmos .tsh-date-col { min-width: min-content; }
.zd-cosmos .tsh-date-col .tsh-csel-val { min-width: min-content; overflow-wrap: normal; }
.zd-cosmos .zd-time-col { flex: 1 1 5rem; min-width: 0; }
.zd-cosmos .tsh-csel-trigger { height: auto; min-height: 3.375rem; width: 100%; }
.zd-cosmos .tsh-csel-val { white-space: normal; text-overflow: clip; overflow: visible; overflow-wrap: anywhere; min-width: 0; }
.zd-cosmos .tsh-csel, .zd-cosmos .zd-intl-col { min-width: 0; max-width: 100%; }
.zd-cosmos .tsh-csel > select { display: none !important; }
.zd-cosmos .zd-procl-meta-item { max-width: 100%; min-width: 0; white-space: normal; }
.zd-cosmos .zd-procl-meta-item span { min-width: 0; overflow-wrap: anywhere; }
.zd-cosmos .zd-section, .zd-cosmos .zd-result-header, .zd-cosmos .zd-proclamation { overflow-wrap: anywhere; }
.zd-cosmos .zd-section, .zd-cosmos .zd-result-header, .zd-cosmos .zd-results { scroll-margin-top: 6rem; }
.zd-cosmos .tsh-btn-submit, .zd-cosmos .tsh-back-btn, .zd-cosmos .zd-cta-btn,
.zd-cosmos .zd-toc-nav a, .zd-cosmos label.zd-checkbox-label, .zd-cosmos label.zd-intl-toggle,
.zd-csel-panel .tsh-csel-opt, .zd-retry { min-height: 2.75rem; }
.zd-cosmos .tsh-btn-submit .btn-text { white-space: normal; font-size: var(--zd-reading); }
.zd-cosmos .tsh-btn-submit { height: auto; }
.zd-cosmos .tsh-btn-submit:hover { background: linear-gradient(135deg,var(--zd-hover-dark),var(--zd-hover-mid),var(--zd-hover-light),var(--zd-hover-mid)); }
.zd-cosmos #zd-time-hint[hidden], .zd-cosmos #zd-intl-group[hidden] { display: none !important; }
.zd-retry { display: inline-flex; align-items: center; justify-content: center; margin: .5rem .25rem 0 0; padding: .5rem .875rem; color: #e8e0d0; background: #172131; border: 1px solid #9dbcee; border-radius: 4px; font: inherit; cursor: pointer; }
.zd-retry:hover, .zd-csel-panel .zd-csel-active { background: #24354f; }
.zd-retry:active { background: #314669; }
.zd-cosmos button:focus-visible, .zd-cosmos a:focus-visible, .zd-cosmos input:focus-visible,
.zd-cosmos [role="combobox"]:focus-visible, .zd-csel-panel input:focus-visible,
.zd-cosmos label:has(input:focus-visible), .zd-retry:focus-visible {
  outline: 2px solid var(--zd-readable-accent, #9dbcee) !important; outline-offset: 3px !important;
}
.zd-cosmos #zd-loading { min-height: 10rem; height: auto; padding: 1.5rem 1rem; }
.zd-cosmos #zd-loading .tsh-cine-text, .zd-cosmos #zd-loading .tsh-cine-sub { font-size: var(--zd-reading); line-height: 1.5; color: var(--zd-text); }
.zd-cosmos .zd-toc-panel { max-width: calc(100vw - 2rem); }
.zd-cosmos .tsh-pyth-dates, .zd-cosmos .zd-badge-label, .zd-cosmos .zd-badge-vi,
.zd-cosmos .zd-quote-cite, .zd-cosmos .zd-proof-title, .zd-cosmos .zd-proof-sub,
.zd-cosmos .zd-eyebrow, .zd-cosmos .zd-bt-label small, .zd-cosmos .tc-caption {
  font-size: var(--zd-secondary) !important; line-height: 1.5 !important;
  color: var(--zd-readable-muted) !important; opacity: 1 !important;
}
.zd-cosmos .zd-quote-text, .zd-cosmos .zd-quote-vi, .zd-cosmos .tc-lead-inject,
.zd-cosmos .tc-prose, .zd-cosmos .tc-faq-item p,
.zd-cosmos .tc-faq-q-text, .zd-cosmos .tc-step-text,
.zd-cosmos .tc-example-title, .zd-cosmos .tc-example-body,
.zd-cosmos .tc-accordion li {
  font-size: var(--zd-reading) !important; line-height: var(--zd-reading-line) !important;
  color: var(--zd-readable-muted) !important; opacity: 1 !important;
}
.zd-cosmos .tc-table th, .zd-cosmos .tc-table td {
  font-size: var(--zd-secondary) !important; line-height: 1.5 !important;
}
.zd-cosmos .tc-faq-item summary { min-height: 2.75rem; }
.zd-cosmos .tc-faq-item summary:focus-visible { outline: 2px solid var(--zd-readable-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .zd-cosmos .zd-section, .zd-cosmos .zd-proclamation, .zd-cosmos .zd-result-header,
  .zd-cosmos .zd-seal { animation: none !important; transition: none !important; transform: none !important; }
  .zd-cosmos #zd-loading * { animation: none !important; transition: none !important; }
}


/* Owner architecture restoration: original top/left/right regions; native shared controls stay outside the page. */
.zd-cosmos { --zd-space:1rem; --zd-border-reading:rgba(157,188,238,.45); box-sizing:border-box; width:100%; max-width:var(--container-max); margin-inline:auto; contain:style !important; transform:none !important; filter:none !important; }
.zd-cosmos #zd-form-section { container:zd-entry / inline-size; }
.zd-cosmos #zd-form-section,.zd-cosmos #zd-results { box-sizing:border-box; width:100%; max-width:var(--container-max); margin-inline:auto; padding:2rem calc(var(--space-4) - 1px); }
.zd-cosmos #zd-results>.tsh-container { box-sizing:border-box; width:100%; max-width:none; padding-inline:0; }
.zd-cosmos .zd-tool-intro { max-width:72ch; margin:0 auto 2rem; text-align:center; }
.zd-cosmos .zd-tool-intro .zd-eyebrow,.zd-cosmos .zd-tool-intro .tsh-form-disc { position:static; margin:0; padding:0; }
.zd-cosmos .zd-tool-intro .zd-eyebrow { margin-bottom:.75rem; letter-spacing:.08em; color:var(--zd-readable-accent) !important; }
.zd-cosmos #zd-form-section .tsh-pyth-layout { display:grid; grid-template-columns:minmax(0,.36fr) 1px minmax(0,.64fr); align-items:start; gap:clamp(1rem,3vw,2.5rem); width:100%; max-width:none; margin-inline:0; }
.zd-cosmos #zd-form-section .tsh-pyth-col--portrait { display:flex; flex-direction:column; align-items:center; gap:1rem; width:100%; max-width:none; min-width:0; padding:.5rem 0; align-self:stretch; justify-content:center; }
.zd-cosmos #zd-form-section .tsh-pyth-col--form { width:100%; min-width:0; padding:0; }
.zd-cosmos #zd-form-section .tsh-pyth-divider { display:block; position:relative; width:1px; height:100%; align-self:stretch; opacity:.55; }
.zd-cosmos #zd-form-section .tsh-pyth-frame { box-sizing:border-box; width:min(100%,20rem); height:auto; aspect-ratio:280/373; margin:0; }
.zd-cosmos #zd-form-section .tsh-pyth-img-wrap,.zd-cosmos #zd-form-section .tsh-pyth-img { width:100%; height:100%; }
.zd-cosmos #zd-form-section .tsh-pyth-info { width:100%; min-width:0; padding:0; }
.zd-cosmos #zd-form-section .tsh-pyth-name,.zd-cosmos #zd-form-section .tsh-pyth-dates { color:var(--zd-readable-accent); }
.zd-cosmos .zd-astrolabe text { fill:#b4cef5; opacity:.9; }
.zd-cosmos .zd-astrolabe circle[stroke]:not([stroke="none"]),.zd-cosmos .zd-astrolabe line[stroke] { stroke:#739fdc; }
.zd-cosmos .zd-float-svg { display:none; } /* Main wheel remains; remove twelve drifting decorative glyphs from the form area. */
.zd-cosmos .tsh-entrance,.zd-cosmos .zd-entrance { opacity:1; transform:none; animation:none; }
.zd-cosmos .tsh-form-intro { width:100%; gap:.75rem; margin-bottom:1.5rem; }
.zd-cosmos #zd-form-section .tsh-form-intro .tsh-form-sub,.zd-cosmos #zd-form-section .tsh-form-intro .tsh-ornament { display:none; }
.zd-cosmos #zd-form-section #zd-headline { margin:0; }
.zd-cosmos #zd-headline { font-size:clamp(2rem,3.8vw,3.25rem); line-height:1.2; color:var(--zd-readable-accent); -webkit-text-fill-color:var(--zd-readable-accent); text-shadow:none; }
.zd-cosmos .tc-lead-inject { margin:0; max-width:55ch; text-align:center; }
.zd-cosmos .tsh-form-sub { min-height:1.5em; margin:0; color:var(--zd-readable-muted); }
.zd-cosmos .tsh-form-box { box-sizing:border-box; width:100%; max-width:none; padding:clamp(1rem,2vw,1.5rem); opacity:1; animation:none; }
.zd-cosmos #zd-form-section .tsh-connector { height:.5rem; margin:0; }
.zd-cosmos .tsh-field>label { letter-spacing:.04em; line-height:1.5; }
.zd-cosmos .tsh-btn-submit .btn-text { color:var(--zd-text); font-weight:600; }
.zd-cosmos .zd-text { max-width:70ch; }
.zd-cosmos .zd-procl-name,.zd-cosmos .zd-bt-sign,.zd-cosmos .zd-section-title { overflow-wrap:normal; word-break:normal; hyphens:none; }
.zd-cosmos .tc-section { box-sizing:border-box; width:100%; max-width:none; padding-inline:calc(var(--space-4) - 1px); }
.zd-cosmos .tc-section .tc-accordion { width:100%; max-width:none; }
.zd-cosmos .tc-faq-a p { max-width:70ch; }
body.page-template-template-tool-ct-zodiac .smh-section--inline { box-sizing:border-box; width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:var(--space-4); }
body.page-template-template-tool-ct-zodiac .smh-section--inline .smh-inner { width:100%; max-width:none; padding-inline:0; }
@media(min-width:700px) { .zd-cosmos #zd-field-birth .tsh-date-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1.4fr); align-items:stretch; } .zd-cosmos #zd-field-birth .tsh-date-col { min-width:0; } .zd-cosmos #zd-field-birth .tsh-date-col--year { grid-column:auto; } }
@container zd-entry (max-width:66rem) {
 .zd-cosmos #zd-form-section .tsh-pyth-layout { grid-template-columns:minmax(0,1fr); gap:1.5rem; }
 .zd-cosmos #zd-form-section .tsh-pyth-divider { display:none; }
 .zd-cosmos #zd-form-section .tsh-pyth-col--portrait { display:grid; grid-template-columns:6rem minmax(0,1fr); align-items:center; gap:1rem; padding:0; }
 .zd-cosmos #zd-form-section .tsh-pyth-frame { width:100%; height:auto; margin:0; }
 .zd-cosmos #zd-form-section .tsh-pyth-info { text-align:left; }
 .zd-cosmos #zd-form-section .tsh-pyth-name { font-size:var(--zd-secondary); letter-spacing:.04em; }
 .zd-cosmos .zd-title-crown,.zd-cosmos .zd-seal-sep,.zd-cosmos #zd-form-section .tsh-pyth-quote { display:none; }
 .zd-cosmos #zd-form-section .zd-badge-row { justify-content:flex-start; gap:.375rem; }
 .zd-cosmos #zd-form-section .zd-proofs { display:flex; flex-direction:column; gap:.375rem; margin-top:.5rem; }
 .zd-cosmos #zd-form-section .zd-proof-card { display:flex; flex-wrap:wrap; gap:.375rem; padding:0; border:0; background:none; box-shadow:none; }
 .zd-cosmos #zd-form-section .zd-proof-icon { flex-shrink:0; }
 .zd-cosmos #zd-form-section .zd-proof-title,.zd-cosmos #zd-form-section .zd-proof-sub { font-size:var(--zd-secondary); line-height:1.5; }
 .zd-cosmos #zd-form-section .zd-proof-sub { display:none; } /* Each visible proof title remains; the expanded guide retains the detailed explanation. */
 .zd-cosmos .zd-tool-intro { margin-bottom:1.25rem; }
 .zd-cosmos #zd-headline { font-size:clamp(1.75rem,5vw,2.5rem); }
 .zd-cosmos .tsh-form-intro { margin-bottom:1rem; }
}
@media(max-width:480px) {
 .zd-cosmos #zd-form-section .tsh-pyth-col--portrait { grid-template-columns:5rem minmax(0,1fr); gap:.75rem; }
 .zd-cosmos .zd-tool-intro .zd-eyebrow { font-size:.75rem !important; }
 .zd-cosmos #zd-form-section .zd-badge-row { gap:.25rem; }
 .zd-cosmos #zd-form-section .zd-badge { font-size:.75rem; }
 .zd-cosmos .tsh-form-box { padding:1rem; }
 .zd-cosmos .zd-birth-time-grid { grid-template-columns:minmax(0,1fr); }
}
/* Phase-1 is the actual pending state. Reveal the existing responsive orrery immediately; never wait for cinematic phases or a minimum delay. */
.zd-cosmos #zd-loading { --zd-loader-size:min(13rem,calc(100vw - 5rem)); position:fixed; inset:auto; top:50%; left:calc(var(--zd-shell-left,0px) + var(--zd-shell-width,100vw)*.5); transform:translate(-50%,-50%); box-sizing:border-box; width:min(34rem,calc(var(--zd-shell-width,100vw) - 2*var(--space-4))); height:auto; min-height:0; max-height:calc(100svh - 2rem); padding:1.5rem; gap:1rem; overflow:auto; background:radial-gradient(ellipse at 50% 20%,#18263c,#0d131e 75%); border:1px solid var(--zd-border-reading); border-radius:.5rem; box-shadow:0 1rem 3rem rgba(0,0,0,.35); }
.zd-cosmos #zd-loading .tsh-cine-meander { position:absolute; inset:.5rem; width:calc(100% - 1rem); height:calc(100% - 1rem); max-width:none; margin:0; }
.zd-cosmos #zd-loading .zd-cine-artbox { position:relative; flex:0 0 auto; width:var(--zd-loader-size); height:var(--zd-loader-size); }
.zd-cosmos #zd-loading .zd-cine-orrery { position:absolute; inset:0; width:100%; height:100%; transform:none; opacity:1; }
.zd-cosmos #zd-loading .zd-cine-zodring,.zd-cosmos #zd-loading .zd-cine-zodring-inner,.zd-cosmos #zd-loading .zd-cine-signs-ring,.zd-cosmos #zd-loading .zd-cine-sign,.zd-cosmos #zd-loading .zd-cine-track,.zd-cosmos #zd-loading .zd-cine-orbit,.zd-cosmos #zd-loading .zd-cine-axis,.zd-cosmos #zd-loading .zd-cine-orb,.zd-cosmos #zd-loading .zd-cine-big3 { opacity:1; transition:none; transition-delay:0s; will-change:auto; }
.zd-cosmos #zd-loading .zd-cine-zodring { width:91.74%; height:91.74%; border-color:#739fdc; animation:none; box-shadow:none; }
.zd-cosmos #zd-loading .zd-cine-zodring-inner { width:86.09%; height:86.09%; border-color:rgba(157,188,238,.6); animation:none; }
.zd-cosmos #zd-loading .zd-cine-sign { width:2rem; height:2rem; margin:-1rem; transform:rotate(calc(var(--zi)*30deg)) translateY(calc(var(--zd-loader-size)*-.42174)) rotate(calc(var(--zi)*-30deg)); color:#b4cef5; text-shadow:none; }
.zd-cosmos #zd-loading .zd-cine-track-1 { width:25.217%; height:25.217%; }
.zd-cosmos #zd-loading .zd-cine-track-2 { width:40%; height:40%; }
.zd-cosmos #zd-loading .zd-cine-track-3 { width:54.783%; height:54.783%; }
.zd-cosmos #zd-loading .zd-cine-track-4 { width:69.565%; height:69.565%; }
.zd-cosmos #zd-loading .zd-cine-orbit { animation:none; }
.zd-cosmos #zd-loading .zd-cine-orbit-1 { transform:rotate(0deg); }
.zd-cosmos #zd-loading .zd-cine-orbit-2 { transform:rotate(65deg); }
.zd-cosmos #zd-loading .zd-cine-orbit-3 { transform:rotate(160deg); }
.zd-cosmos #zd-loading .zd-cine-orbit-4 { transform:rotate(235deg); }
.zd-cosmos #zd-loading .zd-cine-planet { width:1.25rem; height:1.25rem; margin:-.625rem; font-size:.8rem; box-shadow:none; }
.zd-cosmos #zd-loading .zd-cine-orbit-1 .zd-cine-planet { transform:translateY(calc(var(--zd-loader-size)*-.12609)); }
.zd-cosmos #zd-loading .zd-cine-orbit-2 .zd-cine-planet { transform:translateY(calc(var(--zd-loader-size)*-.2)); }
.zd-cosmos #zd-loading .zd-cine-orbit-3 .zd-cine-planet { transform:translateY(calc(var(--zd-loader-size)*-.27391)); }
.zd-cosmos #zd-loading .zd-cine-orbit-4 .zd-cine-planet { transform:translateY(calc(var(--zd-loader-size)*-.34783)); }
.zd-cosmos #zd-loading .zd-cine-orb { width:13.043%; height:13.043%; margin:0; transform:translate(-50%,-50%); }
.zd-cosmos #zd-loading .zd-cine-orb-core { width:100%; height:100%; font-size:calc(var(--zd-loader-size)*.075); animation:none; box-shadow:0 0 1rem rgba(90,126,184,.2); }
.zd-cosmos #zd-loading .zd-cine-orb-halo { inset:-40%; animation:none; }
.zd-cosmos #zd-loading .zd-cine-orb-spin { inset:-12%; }
.zd-cosmos #zd-loading .zd-cine-big3 { position:relative; inset:auto; width:100%; margin:0; gap:.5rem; letter-spacing:.04em; color:var(--zd-readable-muted); flex-wrap:wrap; font-size:var(--zd-secondary); }
.zd-cosmos #zd-loading .tsh-cine-text,.zd-cosmos #zd-loading .tsh-cine-sub { position:relative; inset:auto; width:100%; margin:0; color:var(--zd-text); letter-spacing:normal; text-transform:none; text-wrap:balance; animation:none; }
.zd-cosmos #zd-loading .tsh-cine-sub { color:var(--zd-readable-muted); font-size:var(--zd-secondary); }
.zd-cosmos #zd-loading .zd-cine-nebula,.zd-cosmos #zd-loading .zd-cine-stars-sm,.zd-cosmos #zd-loading .zd-cine-stars-md,.zd-cosmos #zd-loading .zd-cine-stars-lg,.zd-cosmos #zd-loading .zd-cine-meteor,.zd-cosmos #zd-loading .tsh-cine-brk,.zd-cosmos #zd-loading .tsh-cine-flash { display:none; }
@media(max-height:480px) { .zd-cosmos #zd-loading { --zd-loader-size:min(7rem,22vh); padding:1rem; gap:.5rem; } }
@media(prefers-reduced-motion:reduce) {
 .zd-cosmos #zd-loading,.zd-cosmos #zd-loading * { animation:none !important; transition:none !important; }
 .zd-cosmos .zd-astrolabe .zd-ring-outer,.zd-cosmos .zd-astrolabe .zd-ring-degree,.zd-cosmos .zd-astrolabe .zd-ring-rune { opacity:1; }
 .zd-cosmos .tsh-entrance,.zd-cosmos .zd-entrance { opacity:1 !important; }
}
/* Shared cine-clean and mobile-perf overrides are restricted to this tool’s existing loader and art. */
.zd-cosmos #zd-loading { inset:auto !important; top:50% !important; left:calc(var(--zd-shell-left,0px) + var(--zd-shell-width,100vw)*.5) !important; width:min(34rem,calc(var(--zd-shell-width,100vw) - 2*var(--space-4))) !important; height:auto !important; max-width:34rem !important; max-height:calc(100svh - 2rem) !important; padding:1.5rem !important; transform:translate(-50%,-50%) !important; background:radial-gradient(ellipse at 50% 20%,#18263c,#0d131e 75%) !important; }
.zd-cosmos #zd-loading .zd-cine-orbit,.zd-cosmos #zd-loading .zd-cine-orb,.zd-cosmos #zd-loading .zd-cine-orb-core,.zd-cosmos #zd-loading .zd-cine-orb-halo,.zd-cosmos #zd-loading .zd-cine-orb-spin { opacity:1 !important; }
.zd-cosmos .zd-astrolabe circle[stroke],.zd-cosmos .zd-astrolabe line[stroke] { opacity:.55; }
@container zd-entry (max-width:66rem) {
 .zd-cosmos #zd-form-section .tsh-pyth-col--portrait>.tsh-pyth-frame { grid-column:1; grid-row:1; margin:0; }
 .zd-cosmos #zd-form-section .tsh-pyth-col--portrait>.tsh-pyth-info { grid-column:2; grid-row:1; text-align:left; }
 .zd-cosmos #zd-form-section .tsh-pyth-info .tsh-pyth-name { margin:0; line-height:1.5; text-shadow:none; }
 .zd-cosmos #zd-form-section .tsh-pyth-info .tsh-pyth-dates { margin:.25rem 0 .5rem; font-size:.75rem; letter-spacing:.025em; line-height:1.5; }
 .zd-cosmos #zd-form-section .tsh-pyth-info .zd-name-underline { display:none; }
 .zd-cosmos #zd-form-section .tsh-pyth-info .zd-badge-row { justify-content:flex-start; text-align:left; gap:.25rem; }
 .zd-cosmos #zd-form-section .tsh-pyth-info .zd-badge { border:0; background:none; padding:0; line-height:1.5; }
 .zd-cosmos #zd-form-section .tsh-pyth-info .zd-proofs { margin-top:.5rem; gap:.25rem; }
 .zd-cosmos #zd-form-section .tsh-pyth-info .zd-proof-title { font-size:.75rem; font-weight:400; }
}

/* Keep CHD's reader TOC above the actual native utility stack; no utility DOM reparenting. */
body.page-template-template-tool-ct-zodiac #zd-fab { right:12px; bottom:calc(154px + env(safe-area-inset-bottom,0px)); }
.zd-cosmos #zd-headline,.zd-cosmos #zd-headline * { text-shadow:none !important; -webkit-text-fill-color:var(--zd-readable-accent); }

/* One hierarchy: stable, sharp title; the astrolabe is the main art, not competing ornaments. */
.zd-cosmos #zd-headline,.zd-cosmos #zd-headline * { animation:none !important; filter:none !important; }
.zd-cosmos #zd-form-section .tsh-pyth-name,.zd-cosmos #zd-form-section .tsh-pyth-dates,.zd-cosmos #zd-form-section .zd-proof-title { text-shadow:none !important; }
.zd-cosmos .zd-title-crown,.zd-cosmos .zd-name-underline,.zd-cosmos .zd-seal-sep { display:none; }
.zd-cosmos #zd-form-section .tsh-pyth-frame { width:min(100%,20rem); animation:none; }
.zd-cosmos .zd-astrolabe,.zd-cosmos .zd-astrolabe * { animation:none !important; }
.zd-cosmos #zd-form-section .tsh-pyth-info { display:flex; flex-direction:column; gap:.75rem; width:min(100%,20rem); margin-inline:auto; text-align:center; }
.zd-cosmos #zd-form-section .tsh-pyth-info .zd-badge-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; gap:.5rem; }
.zd-cosmos #zd-form-section .tsh-pyth-info .zd-badge { justify-content:center; padding:.25rem .5rem; }
.zd-cosmos #zd-form-section .tsh-pyth-info .zd-badge-label { flex-direction:column; align-items:center; justify-content:center; gap:0; }
.zd-cosmos #zd-form-section .tsh-pyth-name { margin:0; font-size:var(--zd-secondary); letter-spacing:.08em; line-height:1.5; }
.zd-cosmos #zd-form-section .tsh-pyth-dates { margin:0; font-size:var(--zd-secondary); letter-spacing:.02em; line-height:1.5; }
.zd-cosmos #zd-form-section .zd-proofs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; margin:0; }
.zd-cosmos #zd-form-section .zd-proof-card { justify-content:center; }
.zd-cosmos #zd-form-section .zd-proof-card:last-child { grid-column:1/-1; }
.zd-cosmos #zd-form-section .zd-proof-card { padding:0; border:0; background:none; box-shadow:none; gap:.375rem; }
.zd-cosmos #zd-form-section .zd-proof-sub { display:none; }
.zd-cosmos .tsh-form-sub { display:grid; min-height:0; line-height:1.5; }
.zd-cosmos .tsh-form-sub::before { content:"Chưa biết giờ sinh vẫn có thể tra cứu."; visibility:hidden; grid-area:1 / 1; }
.zd-cosmos #zd-sub-tw { grid-area:1 / 1; }
.zd-cosmos .tsh-sub-cursor { display:none; }
.zd-cosmos .zd-tool-intro { margin-bottom:1.5rem; }
.zd-cosmos .zd-tool-intro .zd-eyebrow { font-size:var(--zd-secondary) !important; font-weight:500; letter-spacing:.025em; text-transform:none; }
.zd-cosmos .zd-tool-intro .tsh-form-disc { font-size:var(--zd-secondary); font-style:normal; line-height:1.6; }
@container zd-entry (max-width:66rem) {
 .zd-cosmos #zd-form-section .tsh-pyth-col--portrait { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; align-self:start; gap:.75rem 1rem; }
 .zd-cosmos #zd-form-section .tsh-pyth-col--portrait>.tsh-pyth-frame { flex:0 0 10rem; width:10rem; max-width:100%; margin:0; }
 .zd-cosmos #zd-form-section .tsh-pyth-col--portrait>.tsh-pyth-info { flex:1 1 10.5rem; width:auto; gap:.375rem; text-align:left; }
 .zd-cosmos #zd-form-section .tsh-pyth-info .tsh-pyth-dates { margin:0; }
 .zd-cosmos #zd-form-section .tsh-pyth-info .zd-badge-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.375rem; }
 .zd-cosmos #zd-form-section .tsh-pyth-info .zd-badge-label { flex-wrap:wrap; gap:0 .25rem; }
 .zd-cosmos #zd-form-section .tsh-pyth-info .zd-proofs { flex-direction:row; margin:0; gap:.25rem .75rem; }
 .zd-cosmos #zd-form-section .tsh-pyth-info .zd-proof-icon { display:none; }
 .zd-cosmos .zd-tool-intro { margin-bottom:1rem; }
 .zd-cosmos #zd-form-section .tsh-pyth-layout { gap:1.25rem; }
}



@media (max-width:767px) {
 body.page-template-template-tool-ct-zodiac #zd-toc-panel { right:max(16px,env(safe-area-inset-right,0px)); bottom:calc(16px + env(safe-area-inset-bottom,0px)); width:min(22rem,calc(100vw - 32px)); max-height:calc(70svh - env(safe-area-inset-bottom,0px)); box-sizing:border-box; }
}

/* Desktop keeps native utilities; place reader TOC above actual advisor bounds. */
@media(min-width:768px) {
 body.page-template-template-tool-ct-zodiac #zd-fab { bottom:calc(224px + env(safe-area-inset-bottom,0px)); }
}

/* Mobile entry: readable art and centered identity above the existing title/form. */
@media(max-width:767px) {
 .zd-cosmos .zd-tool-intro { display:none; }
 .zd-cosmos #zd-form-section .tsh-pyth-info .zd-badge-row,
 .zd-cosmos #zd-form-section .tsh-pyth-info .zd-proofs,
 .zd-cosmos .tsh-form-intro .tsh-form-sub,
 .zd-cosmos .tsh-form-intro .tsh-ornament { display:none; }
 .zd-cosmos #zd-form-section .tsh-pyth-col--portrait { flex-direction:column; flex-wrap:nowrap; gap:.25rem; }
 .zd-cosmos #zd-form-section .tsh-pyth-col--portrait>.tsh-pyth-frame { flex:0 0 auto; width:clamp(8.5rem,36vw,10rem); max-width:100%; aspect-ratio:1; height:clamp(8.5rem,36vw,10rem); margin-bottom:.5rem; }
 .zd-cosmos #zd-form-section .tsh-pyth-frame .tsh-pyth-img-wrap { position:relative; overflow:hidden; aspect-ratio:1; }
 .zd-cosmos #zd-form-section .tsh-pyth-frame .tsh-pyth-img { position:absolute; top:50%; left:0; height:auto; aspect-ratio:280/373; transform:translateY(-50%); }
 .zd-cosmos #zd-form-section .tsh-pyth-col--portrait>.tsh-pyth-info { flex:0 0 auto; width:100%; gap:.25rem; text-align:center; }
 .zd-cosmos #zd-form-section .tsh-pyth-name { font-size:.875rem; letter-spacing:.025em; }
 .zd-cosmos #zd-form-section .tsh-pyth-dates { font-size:.875rem; line-height:1.5; }
 .zd-cosmos #zd-form-section .tsh-pyth-layout { gap:.75rem; }
 .zd-cosmos .tsh-form-intro { gap:.5rem; margin-bottom:.75rem; }
 .zd-cosmos #zd-headline { font-size:clamp(1.75rem,5vw,2.25rem); line-height:1.2; margin:0; }
}

/* CHD-only clipboard failure: the ordinary share row stays unchanged. */
.zd-copy-feedback { position: relative; }
.zd-copy-status--sr {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.zd-copy-feedback[data-state="error"] {
  box-sizing: border-box; max-width: 100%; margin-block: .75rem;
  padding: 1rem; border: 1px solid rgba(122,158,216,.45);
  border-radius: .5rem; background: rgba(16,21,31,.85);
  color: #e8e3d9; font-size: 1rem; line-height: 1.5;
}
.zd-copy-feedback[data-state="error"] .zd-copy-status { margin: 0 0 .75rem; }
.zd-copy-fallback[hidden] { display: none; }
.zd-copy-fallback label { display: block; margin-bottom: .375rem; }
.zd-copy-value {
  box-sizing: border-box; display: block; width: 100%; min-width: 0;
  padding: .65rem .75rem; border: 1px solid #7a9ed8;
  border-radius: .25rem; background: #0c0c0a; color: inherit;
  font: inherit; line-height: 1.5;
}
.zd-copy-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .625rem; }
.zd-copy-actions button {
  box-sizing: border-box; max-width: 100%; min-height: 44px;
  padding: .5rem .75rem; border: 1px solid #7a9ed8;
  border-radius: .25rem; background: transparent; color: inherit;
  font: inherit; line-height: 1.35; white-space: normal; cursor: pointer;
}
.zd-copy-value:focus-visible, .zd-copy-actions button:focus-visible {
  outline: 2px solid #b7cdf0; outline-offset: 3px;
}

/* Owner-marked entry hierarchy, 2026-10-05. Entry only; result SVG remains intact. */
@media (min-width:768px) {
 .zd-cosmos #zd-form-section .tsh-pyth-layout { grid-template-columns:minmax(0,.36fr) 1px minmax(0,.64fr); align-items:start; row-gap:1rem; }
 .zd-cosmos #zd-form-section .tsh-pyth-col--form { display:contents; }
 .zd-cosmos #zd-form-section .tsh-form-intro { grid-column:1/-1; grid-row:1; margin:0; }
 .zd-cosmos #zd-form-section .tsh-pyth-col--portrait { grid-column:1; grid-row:2; align-self:start; justify-content:flex-start; display:flex; flex-direction:column; flex-wrap:nowrap; padding:14px 0 0; gap:1rem; }
 .zd-cosmos #zd-form-section .tsh-pyth-col--portrait>.tsh-pyth-frame { flex:0 0 auto; width:min(100%,20rem); max-width:100%; margin:0; }
 .zd-cosmos #zd-form-section .tsh-pyth-col--portrait>.tsh-pyth-info { flex:0 0 auto; width:100%; text-align:center; }
 .zd-cosmos #zd-form-section .tsh-pyth-divider { grid-column:2; grid-row:2; align-self:stretch; }
 .zd-cosmos #zd-form-section #zd-form { grid-column:3; grid-row:2; }
}
@media (max-width:767px) {
 .zd-cosmos #zd-form-section .tsh-pyth-col--portrait,
 .zd-cosmos #zd-form-section .tsh-pyth-divider { display:none; }
}

/* Latest owner followups: entry typography and CHD-only mobile utility side lane. */
.zd-cosmos #zd-form-section #zd-headline { width:100%; max-width:100%; height:auto; overflow:visible; line-height:1.15; margin:0; white-space:normal; }
.zd-cosmos #zd-form-section .zd-proofs { display:block; text-align:center; margin:0; line-height:1.5; }
.zd-cosmos #zd-form-section .zd-proof-card { display:inline; padding:0; margin:0; border:0; background:none; box-shadow:none; cursor:default; transition:none; white-space:nowrap; }
.zd-cosmos #zd-form-section .zd-proof-card:hover { background:none; border:0; box-shadow:none; }
.zd-cosmos #zd-form-section .zd-proof-card + .zd-proof-card::before { content:" \00b7 "; white-space:pre; }
.zd-cosmos #zd-form-section .zd-proof-icon { display:none; }