@import "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap";
:root{--bg-deep:#0a0a14;--bg-card:#12121e;--bg-glass:#12121ed9;--border:#b48c3c40;--gold:#c9a84c;--gold-light:#e8c97a;--gold-dim:#c9a84c26;--red-accent:#c23b3b;--text-primary:#f0e8d8;--text-muted:#8a7e6a;--text-dim:#4a4438;--wood:#4a9040;--fire:#c23b3b;--earth:#b8862a;--metal:#8a9aaa;--water:#2a5ea0;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--shadow-glow:0 0 40px #c9a84c1f;--shadow-card:0 8px 32px #00000080}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden}body{background-color:var(--bg-deep);color:var(--text-primary);min-height:100vh;font-family:Inter,Noto Serif SC,sans-serif;line-height:1.6;overflow-x:hidden}h1,h2,h3,h4{color:var(--gold-light);font-family:Noto Serif SC,serif;line-height:1.3}h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:700}h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:600}h3{font-size:1.25rem}p{color:var(--text-primary);opacity:.85}a{color:var(--gold);text-decoration:none;transition:color .2s}a:hover{color:var(--gold-light)}.container{max-width:1100px;margin:0 auto;padding:0 1.5rem}.page-wrapper{flex-direction:column;min-height:100vh;display:flex}.navbar{z-index:100;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);background:#0a0a14e6;padding:0 1.5rem;position:sticky;top:0}.navbar-inner{justify-content:space-between;align-items:center;max-width:1100px;height:60px;margin:0 auto;display:flex}.navbar-logo{color:var(--gold);align-items:center;gap:.5rem;font-family:Noto Serif SC,serif;font-size:1.3rem;font-weight:700;display:flex}.navbar-logo span{font-size:1.5rem}.navbar-links{align-items:center;gap:1.5rem;display:flex}.navbar-links a{color:var(--text-muted);border-radius:var(--radius-sm);padding:.25rem .5rem;font-size:.9rem;transition:color .2s,background .2s}.navbar-links a:hover{color:var(--gold);background:var(--gold-dim)}.btn{border-radius:var(--radius-sm);cursor:pointer;border:none;justify-content:center;align-items:center;gap:.5rem;padding:.65rem 1.5rem;font-size:.95rem;font-weight:500;text-decoration:none;transition:all .25s;display:inline-flex}.btn-primary{background:linear-gradient(135deg,var(--gold)0%,#a07830 100%);color:#0a0a14;font-weight:600;box-shadow:0 4px 20px #c9a84c59}.btn-primary:hover{color:#0a0a14;transform:translateY(-2px);box-shadow:0 8px 30px #c9a84c80}.btn-outline{border:1px solid var(--border);color:var(--gold);background:0 0}.btn-outline:hover{background:var(--gold-dim);border-color:var(--gold)}.btn-ghost{color:var(--text-muted);background:0 0}.btn-ghost:hover{color:var(--gold)}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:1.75rem;transition:border-color .3s,box-shadow .3s}.card:hover{box-shadow:var(--shadow-glow),var(--shadow-card);border-color:#c9a84c73}.card-glass{background:var(--bg-glass);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem}.form-group{flex-direction:column;gap:.4rem;display:flex}.form-label{color:var(--gold);letter-spacing:.05em;font-size:.85rem;font-weight:500}.form-input,.form-select{border:1px solid var(--border);color:var(--text-primary);border-radius:var(--radius-sm);background:#ffffff0a;width:100%;padding:.65rem .9rem;font-family:inherit;font-size:.95rem;transition:border-color .2s,box-shadow .2s}.form-input:focus,.form-select:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px #c9a84c1f}.form-select option{background:var(--bg-card);color:var(--text-primary)}.form-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;display:grid}.workspace-layout{align-items:start;gap:1.5rem;display:grid}.workspace-sidebar-overlay{display:none}@media (max-width:899px){body:has(.workspace-layout.has-result){width:100%;height:100%;position:fixed;overflow:hidden}.workspace-layout.has-result{background:var(--bg-deep);z-index:50;flex-direction:column;gap:0;width:100vw;height:calc(100dvh - 60px);margin:0;display:flex;position:fixed;inset:60px 0 0;overflow:hidden}.workspace-layout.has-result .workspace-sidebar{z-index:2000;background:var(--bg-card);width:80%;max-width:320px;height:100dvh;transition:left .3s cubic-bezier(.4,0,.2,1);position:fixed;top:0;left:-100%;box-shadow:10px 0 30px #00000080}.workspace-layout.has-result .workspace-sidebar.drawer-open{left:0}.workspace-layout.has-result .workspace-sidebar-overlay{z-index:1999;opacity:0;pointer-events:none;background:#00000080;width:100%;height:100dvh;transition:opacity .3s;display:block;position:fixed;top:0;left:0}.workspace-layout.has-result .workspace-sidebar-overlay.drawer-open{opacity:1;pointer-events:auto}.workspace-layout:not(.has-result){flex-direction:column;gap:1.5rem;display:flex}.workspace-layout:not(.has-result) .workspace-sidebar{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-card);order:2;max-height:500px;padding:1rem;overflow-y:auto}.workspace-layout:not(.has-result) .workspace-chat{order:1}.workspace-layout:not(.has-result) .workspace-sidebar-overlay{display:none}.workspace-layout.has-result .workspace-panel{z-index:10;border-bottom:1px solid var(--border);background:var(--bg-deep);border-radius:0;flex-direction:column;flex:none;order:1;width:100vw;max-height:45vh;display:flex;position:relative;overflow-y:auto}.workspace-layout.has-result .workspace-chat{flex-direction:column;flex:auto;order:2;width:100vw;display:flex;position:relative;overflow:hidden}.workspace-layout.has-result .chat-container{border:none;border-radius:0;height:100%}main.mobile-app-main{max-width:100%!important;padding:0!important}.mobile-history-btn{display:inline-block!important}.mobile-board-toggle{display:block!important}.mobile-chart-scale{zoom:.85}}.mobile-board-toggle{display:none}@media (min-width:900px){.workspace-layout{grid-template-columns:240px 1fr minmax(320px,400px)}.workspace-sidebar,.workspace-chat,.workspace-panel{scrollbar-width:none;height:calc(100vh - 100px);position:sticky;top:80px;overflow-y:auto}.workspace-sidebar::-webkit-scrollbar{display:none}.workspace-chat::-webkit-scrollbar{display:none}.workspace-panel::-webkit-scrollbar{display:none}}.hero{text-align:center;justify-content:center;align-items:center;min-height:90vh;padding:4rem 1.5rem;display:flex;position:relative;overflow:hidden}.hero-bg{pointer-events:none;background:radial-gradient(80% 60% at 50% 0,#c9a84c14 0%,#0000 70%),radial-gradient(60% 40% at 80% 80%,#c23b3b0f 0%,#0000 60%),radial-gradient(40% 50% at 20% 60%,#2a5ea00f 0%,#0000 60%);position:absolute;inset:0}.hero-particles{pointer-events:none;background-image:radial-gradient(1px 1px at 20% 30%,#c9a84c66 0%,#0000 100%),radial-gradient(1px 1px at 80% 20%,#c9a84c4d 0%,#0000 100%),radial-gradient(1px 1px at 50% 70%,#c9a84c4d 0%,#0000 100%),radial-gradient(1px 1px at 10% 80%,#c9a84c33 0%,#0000 100%),radial-gradient(1px 1px at 90% 60%,#c9a84c40 0%,#0000 100%);animation:4s ease-in-out infinite alternate twinkle;position:absolute;inset:0}@keyframes twinkle{0%{opacity:.7}to{opacity:1}}.hero-content{z-index:1;max-width:700px;position:relative}.hero-badge{background:var(--gold-dim);border:1px solid var(--border);color:var(--gold);letter-spacing:.1em;border-radius:100px;margin-bottom:1.5rem;padding:.3rem .9rem;font-size:.8rem;display:inline-block}.hero-title{background:linear-gradient(135deg,var(--gold-light)0%,#fff8e8 50%,var(--gold)100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:1.25rem;font-size:clamp(2.5rem,7vw,4.5rem);line-height:1.15}.hero-subtitle{color:var(--text-muted);margin-bottom:2.5rem;font-size:1.1rem;line-height:1.7}.hero-cta{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.features-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem;display:grid}.feature-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem;transition:all .3s;position:relative;overflow:hidden}.feature-card:before{content:"";background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;height:1px;transition:opacity .3s;position:absolute;top:0;left:0;right:0}.feature-card:hover{border-color:#c9a84c66;transform:translateY(-4px)}.feature-card:hover:before{opacity:1}.feature-icon{margin-bottom:1rem;font-size:2.5rem;display:block}.feature-title{color:var(--gold-light);margin-bottom:.5rem;font-size:1.1rem}.feature-desc{color:var(--text-muted);font-size:.9rem}.section{padding:5rem 0}.section-header{text-align:center;margin-bottom:3rem}.section-title{margin-bottom:.75rem}.section-subtitle{color:var(--text-muted);font-size:1rem}.divider{background:linear-gradient(90deg,transparent,var(--gold),transparent);width:60px;height:2px;margin:1rem auto}.bazi-grid{grid-template-columns:repeat(4,1fr);gap:.75rem;display:grid}.pillar-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);text-align:center;padding:1.25rem 1rem;transition:all .3s}.pillar-card:hover{border-color:var(--gold);box-shadow:0 0 20px #c9a84c26}.pillar-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.75rem;font-size:.7rem}.pillar-stem{margin-bottom:.25rem;font-family:Noto Serif SC,serif;font-size:2.5rem;font-weight:700;line-height:1}.pillar-branch{margin-bottom:.75rem;font-family:Noto Serif SC,serif;font-size:2rem;line-height:1}.pillar-element{border-radius:100px;padding:.2rem .6rem;font-size:.75rem;font-weight:600;display:inline-block}.pillar-ten-god{color:var(--text-muted);margin-top:.4rem;font-size:.7rem}.el-wood{color:var(--wood);background:#4a904026}.el-fire{color:var(--fire);background:#c23b3b26}.el-earth{color:var(--earth);background:#b8862a26}.el-metal{color:var(--metal);background:#8a9aaa26}.el-water{color:var(--water);background:#2a5ea026}.qimen-board{grid-template-columns:repeat(3,1fr);gap:.5rem;max-width:600px;margin:0 auto;display:grid}.palace-cell{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);text-align:center;flex-direction:column;justify-content:center;gap:.25rem;min-height:120px;padding:1rem;transition:all .3s;display:flex}.palace-cell.ju-palace{border-color:var(--gold);background:#c9a84c14;box-shadow:0 0 20px #c9a84c33}.palace-cell.center{background:#ffffff05}.palace-num{color:var(--text-dim);font-size:.65rem;font-weight:600}.palace-dir{color:var(--text-muted);font-size:.7rem}.palace-star{color:var(--gold-light);font-size:.85rem;font-weight:600}.palace-gate{color:var(--text-primary);font-size:.8rem}.palace-deity{color:var(--text-muted);font-size:.7rem}.chat-container{background:var(--bg-card);border:none;flex-direction:column;height:100%;min-height:400px;display:flex;overflow:hidden}.chat-messages{scrollbar-width:thin;scrollbar-color:var(--border)transparent;flex-direction:column;flex:1;gap:1rem;padding:1.25rem;display:flex;overflow-y:auto}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:var(--border)transparent}.custom-scrollbar::-webkit-scrollbar{width:6px;height:6px}.custom-scrollbar::-webkit-scrollbar-track{background:0 0}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:var(--border);border-radius:20px}.custom-scrollbar::-webkit-scrollbar-corner{background:0 0}.chat-message{align-items:flex-start;gap:.75rem;animation:.3s fadeUp;display:flex}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.chat-message.user{flex-direction:row-reverse}.chat-avatar{background:var(--gold-dim);border:1px solid var(--border);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:1.1rem;display:flex}.chat-bubble{border-radius:var(--radius-md);max-width:75%;padding:.75rem 1rem;font-size:.9rem;line-height:1.7}.chat-message.assistant .chat-bubble{border:1px solid var(--border);color:var(--text-primary);background:#ffffff0a}.chat-message.user .chat-bubble{color:var(--text-primary);background:linear-gradient(135deg,#c9a84c33,#a0783033);border:1px solid #c9a84c4d}.chat-input-area{border-top:1px solid var(--border);gap:.75rem;padding:1rem;display:flex}.chat-input{border:1px solid var(--border);color:var(--text-primary);box-sizing:border-box;background:#ffffff0a;border-radius:100px;flex:1;width:100%;padding:.65rem 1rem;font-family:inherit;font-size:16px;transition:border-color .2s}.chat-input:focus{border-color:var(--gold);outline:none}.chat-send{background:linear-gradient(135deg,var(--gold),#a07830);color:#0a0a14;cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:1rem;transition:all .2s;display:flex}.chat-send:hover{transform:scale(1.1);box-shadow:0 4px 15px #c9a84c66}.chat-send:disabled{opacity:.4;cursor:not-allowed;transform:none}.paywall-banner{border:1px solid var(--gold);border-radius:var(--radius-md);text-align:center;background:linear-gradient(135deg,#c9a84c1a,#c23b3b14);padding:1.25rem 1.5rem;animation:.4s fadeUp}.paywall-banner h3{margin-bottom:.5rem;font-size:1rem}.paywall-banner p{color:var(--text-muted);margin-bottom:1rem;font-size:.85rem}.dayun-timeline{scrollbar-width:thin;scrollbar-color:var(--border)transparent;gap:.5rem;padding-bottom:.5rem;display:flex;overflow-x:auto}.dayun-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);text-align:center;flex-shrink:0;min-width:80px;padding:.75rem 1rem;transition:all .2s}.dayun-item:hover{border-color:var(--gold)}.dayun-stem{font-family:Noto Serif SC,serif;font-size:1.2rem}.dayun-branch{font-family:Noto Serif SC,serif;font-size:1rem}.dayun-age{color:var(--text-muted);margin-top:.25rem;font-size:.65rem}.loading-spinner{border:2px solid var(--border);border-top-color:var(--gold);border-radius:50%;width:40px;height:40px;margin:2rem auto;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.skeleton{background:linear-gradient(90deg,var(--bg-card)25%,#ffffff0a 50%,var(--bg-card)75%);border-radius:var(--radius-sm);background-size:200%;animation:1.5s infinite shimmer}@keyframes shimmer{to{background-position:-200% 0}}.tabs{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);gap:.25rem;width:fit-content;padding:.25rem;display:flex}.tab-btn{border-radius:calc(var(--radius-sm) - 2px);cursor:pointer;color:var(--text-muted);background:0 0;border:none;padding:.5rem 1.25rem;font-family:inherit;font-size:.9rem;transition:all .2s}.tab-btn.active{background:linear-gradient(135deg,var(--gold),#a07830);color:#0a0a14;font-weight:600}.footer{border-top:1px solid var(--border);text-align:center;color:var(--text-dim);margin-top:auto;padding:2rem 1.5rem;font-size:.8rem}@media (max-width:768px){.bazi-grid{grid-template-columns:repeat(4,1fr);gap:.4rem}.pillar-card{padding:.75rem .25rem}.qimen-board{max-width:100%}.hero-cta{flex-direction:column;align-items:stretch}.navbar-links>a.hide-on-mobile{display:none}.result-grid{grid-template-columns:1fr!important}.chat-container{height:100%}.hide-on-mobile{display:none!important}}@media (max-width:480px){.bazi-grid{grid-template-columns:repeat(4,1fr)}.pillar-stem{font-size:2rem}.pillar-branch{font-size:1.5rem}}