*{margin:0;padding:0;box-sizing:border-box}:root{--mystic-50: #fdf8f6;--mystic-100: #f2e8e5;--mystic-200: #eaddd7;--mystic-300: #e0cec7;--mystic-400: #d2bab0;--mystic-500: #a09a95;--mystic-600: #8a837e;--mystic-700: #6d655f;--mystic-800: #48423d;--mystic-900: #221f1d;--gold-400: #fbbf24;--gold-500: #f59e0b;--gold-600: #d97706}body{font-family:Noto Sans SC,Microsoft YaHei,sans-serif;background:linear-gradient(180deg,var(--mystic-50) 0%,#fcfcfc 100%);min-height:100vh;color:var(--mystic-800)}.loading-container{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#fcfcfc;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999}.loading-symbol{width:60px;height:60px;border:2px solid var(--mystic-200);border-top-color:var(--gold-600);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:24px;position:relative}.loading-symbol:after{content:"";position:absolute;top:8px;right:8px;bottom:8px;left:8px;border:2px solid var(--mystic-200);border-bottom-color:var(--gold-600);border-radius:50%;animation:spin 2s linear infinite reverse}.loading-text{color:var(--mystic-800);font-size:1.25rem;font-weight:500;letter-spacing:.1em;animation:pulse 2s ease-in-out infinite}.loading-sub{margin-top:8px;color:var(--mystic-500);font-size:.875rem}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}.app{min-height:100vh;padding:20px;max-width:600px;margin:0 auto}.header{text-align:center;padding:40px 0}.header h1{font-size:2.5rem;font-weight:700;color:var(--mystic-900);margin-bottom:8px;letter-spacing:.1em}.subtitle{color:var(--mystic-500);font-size:.9rem;letter-spacing:.2em}.form{background:#fff;border-radius:16px;padding:24px;box-shadow:0 4px 20px #0000000d}.form-group{margin-bottom:20px}.form-group label{display:block;font-size:.9rem;color:var(--mystic-700);margin-bottom:8px;font-weight:500}.input,.textarea{width:100%;padding:14px 16px;border:1px solid var(--mystic-200);border-radius:10px;font-size:1rem;background:var(--mystic-50);color:var(--mystic-900);transition:all .2s}.input:focus,.textarea:focus{outline:none;border-color:var(--gold-500);box-shadow:0 0 0 3px #f59e0b1a}.textarea{resize:vertical;min-height:80px}.gender-select{display:flex;gap:12px}.gender-btn{flex:1;padding:12px;border:2px solid var(--mystic-200);border-radius:10px;background:var(--mystic-50);color:var(--mystic-600);font-size:1rem;cursor:pointer;transition:all .2s}.gender-btn.active{border-color:var(--gold-500);background:var(--gold-500);color:#fff}.submit-btn{width:100%;padding:16px;background:linear-gradient(135deg,var(--gold-500),var(--gold-600));color:#fff;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s;letter-spacing:.1em}.submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #d977064d}.submit-btn:disabled{opacity:.6;cursor:not-allowed}.error{color:#dc2626;font-size:.9rem;margin-bottom:16px;padding:12px;background:#fef2f2;border-radius:8px}.bazi-display{margin-top:24px;background:#fff;border-radius:16px;padding:24px;box-shadow:0 4px 20px #0000000d;text-align:center}.bazi-title{font-size:1.1rem;color:var(--mystic-700);margin-bottom:16px;font-weight:600}.bazi-grid{display:flex;justify-content:center;gap:8px;margin-bottom:16px}.bazi-char{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--mystic-100);border-radius:8px;font-size:1.2rem;font-weight:600;color:var(--mystic-800)}.bazi-detail{font-size:.9rem;color:var(--mystic-500)}.analysis-result{margin-top:24px;background:#fff;border-radius:16px;padding:24px;box-shadow:0 4px 20px #0000000d}.result-header{display:flex;align-items:center;justify-content:center;gap:8px;font-size:1.2rem;font-weight:600;color:var(--mystic-800);margin-bottom:20px}.result-header .icon{font-size:1.5rem}.result-content{line-height:1.8;color:var(--mystic-700)}.result-content p{margin-bottom:12px}.analysis-loading{margin-top:24px;background:#fff;border-radius:16px;padding:40px;box-shadow:0 4px 20px #0000000d;text-align:center}.loading-dots{display:flex;justify-content:center;gap:8px;margin-bottom:16px}.loading-dots span{width:10px;height:10px;background:var(--gold-500);border-radius:50%;animation:bounce 1.4s infinite ease-in-out both}.loading-dots span:nth-child(1){animation-delay:-.32s}.loading-dots span:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.footer{text-align:center;padding:40px 0 20px;color:var(--mystic-400);font-size:.8rem}@media(max-width:480px){.header h1{font-size:2rem}.form,.bazi-display,.analysis-result{padding:20px}}
