body[data-page="birth-chart"] { --bc-night:#080d19; --bc-surface:#101a2b; --bc-ivory:#f4ebd7; --bc-muted:#d1c19f; --bc-gold:#b8914a; --bc-bright:#e0bd70; --bc-teal:#155461; min-height:100vh; color:var(--bc-ivory); background:radial-gradient(circle at 50% 16%,rgba(25,72,91,.38),transparent 28rem),radial-gradient(circle at 10% 32%,rgba(184,145,74,.12),transparent 20rem),var(--bc-night); }
body[data-page="birth-chart"]::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.42; background-image:radial-gradient(circle at 8% 10%,#f4ebd7 0 1px,transparent 1.5px),radial-gradient(circle at 87% 22%,#d6b56c 0 1px,transparent 1.5px),radial-gradient(circle at 72% 75%,#f4ebd7 0 1px,transparent 1.5px); background-size:230px 190px,280px 220px,330px 270px; }
body[data-page="birth-chart"] .site-nav { position:relative; z-index:2; min-height:66px; color:var(--bc-ivory); border-color:rgba(184,145,74,.58); background:rgba(5,9,17,.94); }
body[data-page="birth-chart"] .site-nav a { color:var(--bc-ivory)!important; text-decoration:none; } body[data-page="birth-chart"] .site-nav .logo { color:var(--bc-bright)!important; font-family:Georgia,"Songti SC",serif; } body[data-page="birth-chart"] .site-nav .nav-links a:hover,body[data-page="birth-chart"] .site-nav .nav-links a.active { color:var(--bc-bright)!important; border-bottom:1px solid var(--bc-gold); }
.birth-chart-page { position:relative; z-index:1; padding:44px 20px 90px; }.birth-chart-container { width:min(1100px,100%); margin:auto; }.birth-chart-hero { text-align:center; max-width:760px; margin:0 auto 28px; }.birth-chart-hero h1 { margin:0; color:var(--bc-ivory); font-family:"Songti SC","STSong",Georgia,serif; font-size:clamp(2.5rem,5vw,4.4rem); line-height:1.1; letter-spacing:.12em; }.birth-chart-hero p { margin:16px 0 0; color:var(--bc-muted); font-family:"Songti SC",serif; font-size:1.05rem; letter-spacing:.07em; }.chart-title-rule { display:flex; justify-content:center; align-items:center; width:min(310px,70%); margin:18px auto 0; color:var(--bc-bright); }.chart-title-rule::before,.chart-title-rule::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--bc-gold)); }.chart-title-rule::after { transform:scaleX(-1); }.chart-title-rule span::before { content:"✦"; padding:0 12px; }
.birth-form-shell,.chart-result,.chart-loading { border:1px solid rgba(184,145,74,.75); background:rgba(9,16,29,.88); box-shadow:0 24px 60px rgba(0,0,0,.35),inset 0 0 0 1px rgba(224,189,112,.09); }.birth-form-shell { max-width:820px; margin:auto; padding:clamp(24px,5vw,48px); }.birth-form-shell h2 { margin:0 0 24px; color:var(--bc-ivory); font-family:"Songti SC",serif; text-align:center; font-size:1.55rem; letter-spacing:.1em; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.chart-field { min-width:0; position:relative; }.city-field { grid-column:1/-1; }.chart-field label { display:block; margin-bottom:8px; color:var(--bc-ivory); font-family:"Songti SC",serif; }.chart-field label span,.field-hint { color:rgba(244,235,215,.64); font-size:.86rem; }.chart-field b { color:#eb9da5; }.chart-field input,.chart-field select { box-sizing:border-box; width:100%; min-height:46px; padding:10px 12px; color:var(--bc-ivory); border:1px solid rgba(217,201,166,.6); border-radius:2px; background:#09111f; color-scheme:dark; font:inherit; }.chart-field input:focus,.chart-field select:focus,.birth-chart-page button:focus-visible { outline:2px solid var(--bc-bright); outline-offset:3px; border-color:var(--bc-bright); }.chart-field.is-muted { opacity:.52; }.field-hint { margin:6px 0 0; line-height:1.45; }.city-options { position:absolute; z-index:4; top:75px; width:100%; max-height:210px; overflow:auto; border:1px solid var(--bc-gold); background:#0b1220; box-shadow:0 18px 38px rgba(0,0,0,.45); }.city-options button { display:block; width:100%; min-height:42px; padding:9px 12px; color:var(--bc-ivory); border:0; border-bottom:1px solid rgba(217,201,166,.17); background:transparent; text-align:left; }.city-options button:hover { background:rgba(184,145,74,.17); }.privacy-note,.dst-choice { margin:24px 0 0; padding:14px 16px; border-left:2px solid var(--bc-gold); color:var(--bc-muted); background:rgba(184,145,74,.08); font-size:.91rem; line-height:1.65; }.privacy-note strong { color:var(--bc-ivory); }.privacy-note p { margin:4px 0 0; }.dst-choice label { display:block; margin-top:8px; }.chart-error { margin:18px 0 0; padding:10px 12px; color:#f7d8d5; border:1px solid #a44d57; background:rgba(118,44,56,.35); }.chart-primary-button { display:block; width:min(360px,100%); min-height:50px; margin:26px auto 0; color:#fff; border:1px solid var(--bc-bright); border-radius:2px; background:linear-gradient(180deg,#246b76,#123c49); box-shadow:inset 0 0 0 3px rgba(255,229,173,.11),0 9px 28px rgba(0,0,0,.34); font:600 1rem "Microsoft YaHei",sans-serif; letter-spacing:.1em; }.chart-primary-button:hover:not(:disabled) { transform:translateY(-2px); background:linear-gradient(180deg,#2d7a83,#15505d); }.chart-primary-button:disabled { opacity:.65; }.chart-loading { display:grid; justify-items:center; gap:10px; max-width:820px; margin:20px auto; padding:36px; color:var(--bc-muted); }.chart-loading p { margin:0; }.chart-spinner { width:32px; height:32px; border:3px solid rgba(224,189,112,.25); border-top-color:var(--bc-bright); border-radius:50%; animation:bc-spin .8s linear infinite; }
body[data-page="birth-chart"] .chart-loading[hidden],body[data-page="birth-chart"] .chart-result[hidden] { display:none !important; }
.chart-result { margin-top:28px; padding:clamp(20px,4vw,42px); color:#182031; background:var(--bc-ivory); }.result-heading { padding-bottom:18px; border-bottom:1px solid rgba(118,44,56,.3); }.result-heading p { margin:0; color:#766953; letter-spacing:.12em; }.result-heading h2 { margin:7px 0; color:#17213a; font-family:"Songti SC",serif; font-size:clamp(2rem,4vw,3rem); }.result-heading span { color:#625641; font-size:.9rem; }.chart-layout { display:grid; grid-template-columns:minmax(280px,.95fr) minmax(0,1.05fr); gap:32px; align-items:center; margin:28px 0; }.chart-wheel { width:min(100%,520px); aspect-ratio:1; margin:auto; display:grid; place-items:center; border:1px solid rgba(184,145,74,.65); background:#101a2b; }.chart-wheel img { max-width:100%; max-height:100%; }.chart-wheel-empty { color:var(--bc-bright); text-align:center; }.chart-wheel-empty span { font-size:3rem; }.chart-wheel-empty p { margin:4px; color:var(--bc-muted); }.core-cards { display:grid; gap:10px; }.core-cards article { display:grid; grid-template-columns:66px 1fr; gap:2px 14px; padding:15px; border-left:3px solid var(--bc-gold); background:#fff; box-shadow:0 4px 14px rgba(23,32,49,.08); }.core-cards span { grid-row:span 2; color:#766953; font-family:"Songti SC",serif; }.core-cards strong { color:#17213a; font-family:"Songti SC",serif; font-size:1.2rem; }.core-cards small { color:#625641; }.chart-warning { margin-top:14px; padding:11px 13px; color:#625641; border:1px solid rgba(184,145,74,.48); background:#fffaf0; font-size:.9rem; }.chart-warning p { margin:0 0 5px; }.chart-warning p:last-child { margin-bottom:0; }.chart-data-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:24px; }.chart-result h3 { margin:0 0 13px; color:#762c38; font-family:"Songti SC",serif; font-size:1.45rem; }.table-wrap { overflow:auto; border:1px solid rgba(118,44,56,.22); }.chart-result table { width:100%; min-width:360px; border-collapse:collapse; }.chart-result th,.chart-result td { padding:10px 12px; border-bottom:1px solid rgba(118,44,56,.14); text-align:left; }.chart-result th { color:#762c38; background:#fffaf3; }.distribution { display:grid; gap:12px; }.distribution ul { margin:0; padding:0; list-style:none; border:1px solid rgba(118,44,56,.22); }.distribution li { display:flex; justify-content:space-between; padding:10px 12px; border-bottom:1px solid rgba(118,44,56,.14); }.distribution li:last-child { border-bottom:0; }.interpretation { margin-top:28px; padding:22px; border:1px solid rgba(118,44,56,.28); background:#fffaf3; }.interpretation p { color:#625641; line-height:1.65; }.ai-consent { display:block; margin:14px 0; color:#403727; }.chart-secondary-button,.chart-actions button { min-height:44px; padding:8px 15px; color:#f4ebd7; border:1px solid #292318; border-radius:2px; background:#24221f; font:inherit; }.chart-secondary-button:hover,.chart-actions button:hover { background:#762c38; }.interpretation-text { min-height:0; margin-top:16px; white-space:pre-wrap; color:#28211b; line-height:1.8; }.chart-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; margin-top:22px; }.chart-actions button:last-child { border-color:#762c38; background:#762c38; }
@keyframes bc-spin { to { transform:rotate(360deg); } } @media (max-width:720px) { .birth-chart-page { padding:32px 14px 60px; }.birth-chart-hero h1 { font-size:clamp(2.3rem,11vw,3.3rem); letter-spacing:.07em; }.birth-chart-hero p { font-size:.95rem; line-height:1.65; }.birth-form-shell { padding:24px 18px; }.form-grid,.chart-layout,.chart-data-grid { grid-template-columns:1fr; }.city-field { grid-column:auto; }.chart-layout { gap:22px; }.chart-result { padding:22px 15px; }.chart-actions { display:grid; grid-template-columns:1fr 1fr; }.chart-actions button { width:100%; }.chart-wheel { max-width:420px; } } @media (prefers-reduced-motion:reduce) { .chart-spinner { animation:none; } body[data-page="birth-chart"] * { scroll-behavior:auto!important; transition-duration:.01ms!important; } }
body[data-page="birth-chart"] .chart-field input,body[data-page="birth-chart"] .chart-field select { background:#09111f !important; color:var(--bc-ivory) !important; border-color:rgba(217,201,166,.6) !important; }
.ai-location-consent { margin-top:10px; color:var(--bc-muted) !important; font-family:"Microsoft YaHei",sans-serif !important; font-size:.83rem; line-height:1.5; }.ai-location-consent input { width:auto !important; min-height:0 !important; margin-right:6px; }.chart-field .chart-secondary-button { width:100%; margin-top:10px; color:var(--bc-ivory) !important; border-color:#292318 !important; background:#24221f !important; }.chart-field .chart-secondary-button:hover:not(:disabled) { background:#762c38 !important; }.chart-field .chart-secondary-button:disabled { cursor:wait; opacity:.62; }
.interpretation-text { white-space:normal; }
.interpretation-text > :first-child { margin-top:0; }.interpretation-text > :last-child { margin-bottom:0; }.interpretation-text h1,.interpretation-text h2,.interpretation-text h3,.interpretation-text h4,.interpretation-text h5,.interpretation-text h6 { margin:1.35em 0 .55em; color:#762c38; font-family:"Songti SC",serif; line-height:1.35; }.interpretation-text ul,.interpretation-text ol { margin:.6em 0 1em; padding-left:1.6em; }.interpretation-text li { margin:.35em 0; }.interpretation-text blockquote { margin:1em 0; padding:.55em 1em; border-left:3px solid var(--bc-gold); color:#625641; background:#fffaf0; }.interpretation-text code { padding:.12em .35em; color:#762c38; background:#f2e7d2; }.interpretation-text pre { overflow:auto; padding:12px 14px; color:#f4ebd7; background:#17213a; }.interpretation-text a { color:#155461; }