/* BaZi tool surface: calm light premium UI, separate from the engine code. */
.hs-bazi-page { --hs-bazi-ink:#242038; --hs-bazi-muted:#6d6878; --hs-bazi-line:rgba(72,54,104,.16); --hs-bazi-gold:#a9762b; }
.hs-bazi-hero { padding:clamp(104px,13vw,158px) 0 64px; border-bottom:1px solid var(--hs-bazi-line); background:linear-gradient(135deg,rgba(255,250,244,.98),rgba(246,239,250,.92)); }
.hs-bazi-hero__grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:48px; align-items:center; }
.hs-bazi-hero h1 { max-width:780px; margin:0; color:var(--hs-bazi-ink); font-family:var(--font-display); font-size:clamp(2.6rem,5.8vw,5rem); line-height:.98; font-weight:550; }
.hs-bazi-hero p { max-width:720px; margin:22px 0 0; color:var(--hs-bazi-muted); font-size:1.05rem; line-height:1.7; }
.hs-bazi-tool-nav { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.hs-bazi-tool-nav__link { display:inline-flex; align-items:center; min-height:42px; padding:0 16px; border:1px solid var(--hs-bazi-line); border-radius:999px; color:var(--hs-bazi-ink); background:rgba(255,255,255,.72); text-decoration:none; font-size:.82rem; font-weight:700; }
.hs-bazi-tool-nav__link:hover, .hs-bazi-tool-nav__link.is-current { border-color:var(--hs-bazi-gold); color:var(--hs-bazi-gold); background:#fff; }
.hs-bazi-hero__mark { position:relative; width:260px; aspect-ratio:1; display:grid; place-items:center; margin-inline:auto; border-radius:50%; color:var(--hs-bazi-gold); background:radial-gradient(circle,rgba(255,255,255,.95) 0 28%,rgba(255,255,255,.4) 29% 100%); }
.hs-bazi-hero__ring { position:absolute; border:1px solid rgba(169,118,43,.42); border-radius:50%; transform:rotate(18deg); }
.hs-bazi-hero__ring--outer { inset:3%; }
.hs-bazi-hero__ring--inner { inset:17%; border-style:dashed; transform:rotate(-24deg); }
.hs-bazi-hero__mark strong { position:relative; font-size:2.2rem; font-weight:500; letter-spacing:.12em; }
.hs-bazi-hero__mark small { position:absolute; bottom:30%; color:var(--hs-bazi-muted); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; }
.hs-bazi-tool-section { padding-top:58px; }
.hs-bazi-engine-status { display:flex; gap:13px; align-items:flex-start; max-width:900px; margin:0 auto 22px; padding:17px 19px; border:1px solid rgba(169,118,43,.28); border-radius:18px; background:rgba(255,250,239,.86); color:var(--hs-bazi-muted); }
.hs-bazi-engine-status[hidden] { display:none; }
.hs-bazi-engine-status__icon { flex:0 0 auto; color:var(--hs-bazi-gold); font-size:1.3rem; }
.hs-bazi-engine-status p { margin:2px 0 0; line-height:1.55; }
.hs-bazi-form { display:grid; gap:18px; max-width:980px; margin:0 auto; }
.hs-bazi-person-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.hs-bazi-person, .hs-bazi-settings { min-width:0; margin:0; padding:22px; border:1px solid var(--hs-bazi-line); border-radius:20px; background:rgba(255,255,255,.78); box-shadow:0 15px 44px rgba(72,54,104,.055); }
.hs-bazi-person legend, .hs-bazi-settings legend { padding:0 8px; color:var(--hs-bazi-ink); font-family:var(--font-display); font-size:1.3rem; font-weight:600; }
.hs-bazi-person legend span { display:inline-grid; place-items:center; width:28px; height:28px; margin-inline-end:8px; border-radius:50%; background:rgba(169,118,43,.12); color:var(--hs-bazi-gold); font:700 .74rem/1 var(--font-body); }
.hs-bazi-person label, .hs-bazi-settings label { display:grid; gap:7px; margin-top:15px; color:var(--hs-bazi-muted); font-size:.78rem; font-weight:700; letter-spacing:.02em; }
.hs-bazi-person input, .hs-bazi-person select, .hs-bazi-settings select { width:100%; min-height:46px; box-sizing:border-box; border:1px solid var(--hs-bazi-line); border-radius:11px; background:#fff; color:var(--hs-bazi-ink); padding:0 12px; }
.hs-bazi-person input:focus, .hs-bazi-person select:focus, .hs-bazi-settings select:focus { outline:3px solid rgba(169,118,43,.18); border-color:var(--hs-bazi-gold); }
.hs-bazi-inline-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.hs-bazi-settings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 18px; }
.hs-bazi-settings legend { grid-column:1/-1; }
.hs-bazi-submit { justify-self:start; display:inline-flex; align-items:center; gap:14px; min-height:50px; padding:0 22px; border:0; border-radius:999px; background:var(--hs-bazi-ink); color:#fff; cursor:pointer; font-weight:800; }
.hs-bazi-submit:hover { background:#463967; }
.hs-bazi-submit:disabled { opacity:.55; cursor:wait; }
.hs-bazi-form.is-engine-pending .hs-bazi-submit { opacity:.74; }
.hs-bazi-result { max-width:980px; min-height:120px; margin:30px auto 0; }
.hs-bazi-result__empty, .hs-bazi-result__message { display:grid; place-items:center; min-height:120px; padding:24px; border:1px dashed var(--hs-bazi-line); border-radius:18px; color:var(--hs-bazi-muted); text-align:center; }
.hs-bazi-result__empty span { color:var(--hs-bazi-gold); font-size:1.7rem; }
.hs-bazi-result__empty p, .hs-bazi-result__message { margin:0; }
.hs-bazi-result__message--notice { border-style:solid; background:#fffaf0; }
.hs-bazi-result__message--error { border-color:rgba(156,54,54,.35); color:#8d3b3b; background:#fff8f8; }
.hs-bazi-result__inner { display:grid; gap:18px; padding:24px; border:1px solid var(--hs-bazi-line); border-radius:20px; background:rgba(255,255,255,.8); }
.hs-bazi-result__inner h2, .hs-bazi-chart h3, .hs-bazi-result__section h3 { margin:0; color:var(--hs-bazi-ink); font-family:var(--font-display); }
.hs-bazi-chart { min-width:0; }
.hs-bazi-chart__master { margin:8px 0 12px; color:var(--hs-bazi-muted); }
.hs-bazi-pillar-table { width:100%; border-collapse:collapse; font-size:.87rem; }
.hs-bazi-pillar-table th, .hs-bazi-pillar-table td { padding:11px 10px; border-bottom:1px solid var(--hs-bazi-line); text-align:start; }
.hs-bazi-pillar-table th { color:var(--hs-bazi-muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }
.hs-bazi-pillar-table__hanzi { color:var(--hs-bazi-gold); font-size:1.08rem; font-weight:700; }
.hs-bazi-chart__counts, .hs-bazi-result__method { margin:12px 0 0; color:var(--hs-bazi-muted); font-size:.8rem; }
.hs-bazi-result__section { padding-top:5px; }
.hs-bazi-result__section p { color:var(--hs-bazi-muted); line-height:1.6; }
.hs-bazi-interactions { display:grid; gap:7px; margin:12px 0 0; padding:0; list-style:none; color:var(--hs-bazi-muted); }
.hs-bazi-interactions li { padding:10px 12px; border-radius:10px; background:rgba(169,118,43,.08); }
.hs-bazi-method { border-top:1px solid var(--hs-bazi-line); }
.hs-bazi-method__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.hs-bazi-info-card { padding:26px; border:1px solid var(--hs-bazi-line); border-radius:20px; background:rgba(255,255,255,.68); }
.hs-bazi-info-card h2 { margin:8px 0 12px; color:var(--hs-bazi-ink); font-family:var(--font-display); }
.hs-bazi-info-card p, .hs-bazi-info-card small { color:var(--hs-bazi-muted); line-height:1.65; }
.hs-bazi-info-card small { display:block; margin-top:14px; }
html[dir="rtl"] .hs-bazi-hero__mark { transform:scaleX(-1); }
html[dir="rtl"] .hs-bazi-hero__mark strong, html[dir="rtl"] .hs-bazi-hero__mark small { transform:scaleX(-1); }
@media (max-width:860px) {
    .hs-bazi-hero__grid { grid-template-columns:1fr; }
    .hs-bazi-hero__mark { width:min(230px,60vw); }
    .hs-bazi-person-grid, .hs-bazi-method__grid { grid-template-columns:1fr; }
}
@media (max-width:600px) {
    .hs-bazi-hero { padding-top:102px; }
    .hs-bazi-hero h1 { font-size:clamp(2.25rem,12vw,3.5rem); }
    .hs-bazi-person, .hs-bazi-settings, .hs-bazi-result__inner, .hs-bazi-info-card { padding:18px; }
    .hs-bazi-settings { grid-template-columns:1fr; }
    .hs-bazi-settings legend { grid-column:auto; }
    .hs-bazi-inline-fields { grid-template-columns:1fr; }
    .hs-bazi-pillar-table { font-size:.78rem; }
    .hs-bazi-pillar-table th, .hs-bazi-pillar-table td { padding:9px 6px; }
}