.app{min-height:100vh}.page-fade-enter-active{transition:opacity .3s ease,transform .3s ease}.page-fade-leave-active{transition:opacity .2s ease}.page-fade-enter-from{opacity:0;transform:translateY(10px)}.page-fade-leave-to{opacity:0}.page-slide-enter-active,.page-slide-leave-active{transition:transform .3s ease,opacity .3s ease}.page-slide-enter-from{transform:translate(20px);opacity:0}.page-slide-leave-to{transform:translate(-20px);opacity:0}:root{--bg-primary: #0f0f1a;--bg-secondary: #1a1a2e;--bg-card: #252542;--text-primary: #e8e8f0;--text-secondary: #a0a0b8;--accent: #c9a227;--accent-light: #e8c547;--accent-dark: #9a7a1a;--border: #3a3a5c;--error: #e85454;--success: #54e878;--font-serif: "Noto Serif SC", "Songti SC", serif;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--radius: 12px;--radius-sm: 8px;--shadow: 0 4px 24px rgba(0, 0, 0, .4);--shadow-glow: 0 0 20px rgba(201, 162, 39, .15);--card-glow: inset 0 1px 0 rgba(201, 162, 39, .1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 20% 10%,rgba(201,162,39,.08) 0%,transparent 40%),radial-gradient(ellipse at 80% 90%,rgba(201,162,39,.05) 0%,transparent 40%),repeating-linear-gradient(0deg,transparent,transparent 50px,rgba(201,162,39,.02) 50px,rgba(201,162,39,.02) 51px),repeating-linear-gradient(90deg,transparent,transparent 50px,rgba(201,162,39,.02) 50px,rgba(201,162,39,.02) 51px);pointer-events:none;z-index:-1}body:after{content:"";position:fixed;top:0;left:0;right:0;height:200px;background:linear-gradient(180deg,rgba(201,162,39,.03) 0%,transparent 100%);pointer-events:none;z-index:-1}.app{max-width:640px;margin:0 auto;padding:24px 16px;min-height:100vh;display:flex;flex-direction:column}.header{text-align:center;padding:32px 0}.title{font-family:var(--font-serif);font-size:2.5rem;font-weight:700;color:var(--accent);letter-spacing:.1em;text-shadow:0 2px 12px rgba(201,162,39,.3);margin-bottom:8px}.subtitle{font-size:1rem;color:var(--text-secondary);letter-spacing:.2em}.main{flex:1}.input-section{background:var(--bg-card);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}.input-label{display:block;font-size:.95rem;color:var(--text-secondary);margin-bottom:12px}.question-input{width:100%;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;font-size:1rem;color:var(--text-primary);resize:none;transition:border-color .2s}.question-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #c9a2271a,inset 0 0 20px #c9a22708}.question-input::placeholder{color:var(--text-secondary);opacity:.6}.char-count{text-align:right;font-size:.8rem;color:var(--text-secondary);margin-top:8px}.generate-btn{width:100%;margin-top:20px;padding:16px 24px;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-dark) 100%);border:none;border-radius:var(--radius-sm);font-size:1.1rem;font-weight:600;color:var(--bg-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .2s,box-shadow .2s}.generate-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #c9a22766}.generate-btn:disabled{opacity:.5;cursor:not-allowed}.btn-icon{font-size:1.2rem}.result-section{display:flex;flex-direction:column;gap:20px}.gua-card,.answer-card{background:var(--bg-card);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow),var(--card-glow);border:1px solid rgba(201,162,39,.08);position:relative;overflow:hidden}.gua-card:before,.answer-card:before{content:"";position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,rgba(201,162,39,.4),transparent)}.section-title{font-family:var(--font-serif);font-size:1.2rem;color:var(--accent);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}.question-display{font-size:.95rem;color:var(--text-secondary);margin-bottom:16px}.gua-info{display:flex;align-items:center;justify-content:center;gap:24px}.gua-item{text-align:center}.gua-label{display:block;font-size:.85rem;color:var(--text-secondary);margin-bottom:4px}.gua-name{font-family:var(--font-serif);font-size:1.5rem;font-weight:600;color:var(--accent-light)}.gua-divider{font-size:1.5rem;color:var(--text-secondary)}.loading{text-align:center;padding:40px 0}.loading-spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;margin:0 auto 16px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading p{color:var(--text-secondary)}.error{text-align:center;padding:24px;color:var(--error)}.retry-btn{margin-top:12px;padding:8px 24px;background:transparent;border:1px solid var(--error);border-radius:var(--radius-sm);color:var(--error);cursor:pointer;transition:background .2s}.retry-btn:hover{background:#e854541a}.answer-content{line-height:1.8}.markdown h2{font-family:var(--font-serif);font-size:1.1rem;color:var(--accent);margin:24px 0 12px}.markdown h3{font-family:var(--font-serif);font-size:1rem;color:var(--accent-light);margin:20px 0 10px}.markdown h4{font-size:.95rem;color:var(--text-primary);margin:16px 0 8px}.markdown p{margin-bottom:12px;color:var(--text-primary)}.markdown ul{margin:12px 0;padding-left:20px}.markdown li{margin-bottom:8px;color:var(--text-secondary)}.markdown strong{color:var(--accent-light)}.actions{display:flex;gap:12px}.action-btn{flex:1;padding:14px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.95rem;color:var(--text-primary);cursor:pointer;transition:border-color .2s,background .2s}.action-btn:hover{border-color:var(--accent);background:var(--bg-secondary)}.action-btn.primary{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-dark) 100%);border-color:transparent;color:var(--bg-primary);font-weight:600}.action-btn.primary:hover{box-shadow:0 4px 16px #c9a2274d}.footer{text-align:center;padding:24px 0;margin-top:32px}.footer p{font-size:.8rem;color:var(--text-secondary);opacity:.6}@media (max-width: 480px){.title{font-size:2rem}.gua-info{gap:16px}.gua-name{font-size:1.2rem}.actions{flex-direction:column}}.glow-gold{box-shadow:var(--shadow-glow)}@keyframes pulseGlow{0%,to{box-shadow:0 0 10px #c9a22733}50%{box-shadow:0 0 20px #c9a22766}}.pulse-glow{animation:pulseGlow 2s ease-in-out infinite}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in-up{animation:fadeInUp .5s ease-out}.hover-lift{transition:transform .3s ease,box-shadow .3s ease}.hover-lift:hover{transform:translateY(-4px);box-shadow:var(--shadow),0 8px 30px #0000004d}.border-glow{position:relative}.border-glow:after{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border-radius:inherit;background:linear-gradient(135deg,rgba(201,162,39,.3),transparent 50%,rgba(201,162,39,.1));z-index:-1;opacity:0;transition:opacity .3s}.border-glow:hover:after{opacity:1}.text-glow{text-shadow:0 0 20px rgba(201,162,39,.5)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--accent-dark)}::selection{background:#c9a2274d;color:var(--text-primary)}