:root{--bg-top:#0b0f14;--bg-bottom:#111a22;--panel:rgba(11,18,24,.78);--panel-strong:rgba(8,13,19,.92);--ink:#f2ebda;--muted:#b1b0a9;--gold:#c8a96b;--gold-strong:#e0bf7f;--cyan:#3aa6a0;--line:hsla(40,46%,60%,.3);--wood:#4f8f5a;--fire:#c75b39;--earth:#a4875a;--metal:#b7b9bf;--water:#3c6e8f}*{box-sizing:border-box}body{background:radial-gradient(circle at 18% 8%,rgba(58,166,160,.18),transparent 35%),radial-gradient(circle at 82% 12%,hsla(40,46%,60%,.14),transparent 28%),linear-gradient(160deg,var(--bg-top) 0,var(--bg-bottom) 100%);color:var(--ink);font-family:Noto Sans TC,PingFang TC,sans-serif;margin:0;min-height:100vh}body:before{background-image:repeating-linear-gradient(135deg,hsla(40,46%,60%,.04) 0 2px,transparent 2px 14px);content:"";inset:0;opacity:.32;pointer-events:none;position:fixed}.page{margin:0 auto;max-width:1160px;padding:1rem 1rem 2rem;position:relative}.panel{background:linear-gradient(165deg,rgba(15,24,31,.94),var(--panel));border:1px solid var(--line);border-radius:20px;box-shadow:inset 0 1px #c8a96a38,0 24px 48px #00000059}.topbar{align-items:center;display:flex;gap:1rem;justify-content:space-between;padding:1.1rem 1.25rem}.eyebrow{color:var(--gold);font-size:.75rem;letter-spacing:.14em;margin:0;text-transform:uppercase}h1,h2,h3{font-family:"Noto Serif TC",Songti TC,serif}h1{color:#f5e8c9;font-size:clamp(1.4rem,2.6vw,2rem);margin:.2rem 0 0}.lang-switch{display:flex;gap:.45rem}.top-actions{align-items:center;display:flex;gap:.6rem}.grid-cell,.lang-btn,.submit{transition:.22s ease-out}.lang-btn{background:#0b1118d9;border:1px solid hsla(40,46%,60%,.45);border-radius:999px;color:#eadfbf;cursor:pointer;padding:.45rem .85rem}.lang-btn.active{background:linear-gradient(130deg,#c8a96a4d,#3aa6a04d);border-color:var(--gold-strong);color:#fff8e8}.about-link{background:#0b1118d9;border:1px solid hsla(40,46%,60%,.45);border-radius:999px;color:#eadfbf;font-size:.9rem;padding:.45rem .85rem;text-decoration:none}.about-link:hover{border-color:var(--cyan);box-shadow:0 0 12px #3aa6a047}.content-grid{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1rem}.form-panel{padding:1rem}fieldset,label{display:block;margin-bottom:.85rem}label>span,legend{color:var(--muted);font-size:.9rem;margin-bottom:.3rem}input[type=date],input[type=text],input[type=time],select{background:#0a1016e0;border:1px solid hsla(40,46%,60%,.35);border-radius:11px;color:var(--ink);font-size:1rem;padding:.62rem;width:100%}select{-webkit-appearance:none;-moz-appearance:none;appearance:none}input:disabled{opacity:.6}.inline-check,.mode-option{align-items:center;display:flex;gap:.5rem}fieldset{border:1px solid hsla(40,46%,60%,.25);border-radius:12px;padding:.75rem}.submit{background:linear-gradient(130deg,#c8a96a3d,#3aa6a040);border:1px solid hsla(40,46%,60%,.55);border-radius:999px;color:#fff4dc;cursor:pointer;font-size:1rem;padding:.62rem;width:100%}.submit:hover{border-color:#3aa6a0b3;box-shadow:0 0 16px #3aa6a066}.error{color:#ef8b77;margin:.6rem 0 0}.result-panel{background:linear-gradient(165deg,rgba(9,14,20,.95),var(--panel-strong));padding:1rem}.result-header{align-items:flex-end;display:flex;gap:.75rem;justify-content:space-between;margin-bottom:.8rem}.result-header h2{color:var(--gold-strong);font-size:clamp(1.2rem,2vw,1.6rem);margin:0}.rule{color:var(--muted);font-size:.88rem;margin:0}.bagua-stage{animation:stage-enter .52s ease-out .12s both;aspect-ratio:1/1;background:linear-gradient(160deg,#0a1017f2,#070c11d1),radial-gradient(circle at 50% 50%,rgba(58,166,160,.1),transparent 70%);border:1px solid hsla(40,46%,60%,.5);border-radius:22px;box-shadow:inset 0 0 32px #0000008c,0 0 30px #3aa6a014;margin:0 auto;padding:.6rem;position:relative;width:min(100%,540px)}.bagua-stage.has-result:after{border:1px solid hsla(40,46%,60%,.22);border-radius:18px;content:"";inset:.3rem;pointer-events:none;position:absolute}.bagua-frame{height:92%;inset:4%;position:absolute;width:92%}.frame-sector{fill:#ffffff03;stroke:#c8a96a29;stroke-width:.24;transition:.22s ease-out}.frame-sector.active{fill-opacity:calc(.05 + var(--strength, 0)*.2)}.frame-sector.dominant{stroke:#e0c080e0;stroke-width:.42}.frame-ring{fill:none;stroke:#c8a96ab8;stroke-width:.34}.frame-spoke{stroke:#c8a96a8c;stroke-width:.28}.bagua-stage.is-fresh:before{animation:aura-burst .62s ease-out;aspect-ratio:1/1;border:1px solid rgba(58,166,160,.6);border-radius:999px;content:"";left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:20%}.bagua-center,.bagua-sector{align-items:center;display:flex;flex-direction:column;gap:.14rem;justify-content:center;min-height:18%;padding:.22rem .15rem;position:absolute;text-align:center;width:23%}.bagua-center:before{background:radial-gradient(circle at 30% 25%,hsla(0,0%,100%,.03),transparent 55%);content:"";inset:0;pointer-events:none;position:absolute}.bagua-sector{color:#f5ead0;z-index:2}.bagua-center{background:linear-gradient(160deg,#a4875a33,#080c11d6);border:1px solid color-mix(in srgb,var(--earth) 60%,#f5e8c9 40%);border-radius:999px;left:50%;min-height:20%;top:50%;transform:translate(-50%,-50%);width:20%;z-index:3}.bagua-center:before{border-radius:999px}.bagua-sector.dominant{text-shadow:0 0 12px hsla(40,61%,69%,.38)}.element-name{font-size:.88rem;line-height:1.1}.center-total,.element-value{color:var(--gold-strong);font-family:SFMono-Regular,Menlo,monospace;font-size:1.05rem}.trigram-direction{color:#b1b1a9f2;font-size:.68rem}.trigram-symbol{color:#f0e2c2;font-size:1.2rem;line-height:1}.trigram-name{font-size:.8rem;letter-spacing:.08em;line-height:1}.center-title{color:#f5e7c7e6;font-size:.8rem;letter-spacing:.07em;margin:0}.center-total{margin:0}.sector-south{left:50%;top:8%;transform:translate(-50%)}.sector-southwest{right:17%;top:20%}.sector-west{right:9%;top:50%;transform:translateY(-50%)}.sector-northwest{bottom:20%;right:17%}.sector-north{bottom:8%;left:50%;transform:translate(-50%)}.sector-northeast{bottom:20%;left:17%}.sector-east{left:9%;top:50%;transform:translateY(-50%)}.sector-southeast{left:17%;top:20%}.element-wood{border-color:color-mix(in srgb,var(--wood) 72%,#f3e6cc 28%)}.element-fire{border-color:color-mix(in srgb,var(--fire) 72%,#f3e6cc 28%)}.element-earth{border-color:color-mix(in srgb,var(--earth) 72%,#f3e6cc 28%)}.element-metal{border-color:color-mix(in srgb,var(--metal) 72%,#f3e6cc 28%)}.element-water{border-color:color-mix(in srgb,var(--water) 72%,#f3e6cc 28%)}.frame-sector.element-wood{fill:color-mix(in srgb,var(--wood) 22%,transparent);stroke:color-mix(in srgb,var(--wood) 60%,hsla(40,62%,88%,.6))}.frame-sector.element-fire{fill:color-mix(in srgb,var(--fire) 22%,transparent);stroke:color-mix(in srgb,var(--fire) 60%,hsla(40,62%,88%,.6))}.frame-sector.element-earth{fill:color-mix(in srgb,var(--earth) 22%,transparent);stroke:color-mix(in srgb,var(--earth) 60%,hsla(40,62%,88%,.6))}.frame-sector.element-metal{fill:color-mix(in srgb,var(--metal) 22%,transparent);stroke:color-mix(in srgb,var(--metal) 60%,hsla(40,62%,88%,.6))}.frame-sector.element-water{fill:color-mix(in srgb,var(--water) 22%,transparent);stroke:color-mix(in srgb,var(--water) 60%,hsla(40,62%,88%,.6))}.pillars{display:grid;gap:.65rem;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1rem}.pillar-card{background:#090f15b3;border:1px solid hsla(40,46%,60%,.3);border-radius:12px;padding:.7rem}.pillar-card h3{color:var(--gold-strong);margin:0 0 .5rem}.pillar-card p{color:#dde0df;font-size:.92rem;margin:.18rem 0}.about-page{display:grid;gap:.9rem}.about-section{padding:1rem}.about-section h2{color:var(--gold-strong);margin-top:0}.about-section p{color:#e0dfda;line-height:1.6;margin:.45rem 0}:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}@keyframes stage-enter{0%{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes aura-burst{0%{opacity:.9;transform:translate(-50%,-50%) scale(.15)}to{opacity:0;transform:translate(-50%,-50%) scale(2.7)}}@media(min-width:960px){.content-grid{align-items:start;grid-template-columns:minmax(320px,.86fr) minmax(0,1.14fr)}.form-panel,.result-panel{min-height:100%}}@media(max-width:820px){.topbar{align-items:flex-start;flex-direction:column}.top-actions{flex-wrap:wrap;width:100%}.center-total,.element-value,.trigram-symbol{font-size:1.05rem}.bagua-center,.bagua-sector{min-height:18%;width:24%}.bagua-center{min-height:20%;width:20%}}@media(max-width:560px){.page{padding:.75rem .75rem 1.5rem}.result-header{align-items:flex-start;flex-direction:column}.bagua-stage{padding:.45rem;width:min(100%,400px)}.trigram-name{font-size:.75rem}.trigram-direction{font-size:.64rem}.element-name{font-size:.72rem}.center-total,.element-value{font-size:.95rem}.bagua-center,.bagua-sector{padding:.18rem .14rem}.bagua-sector{min-height:18%;width:25%}.bagua-center{min-height:21%;width:21%}.pillars{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*,:after,:before{animation:none!important;transition:none!important}}