:root{--bg-deep:#1a1530;--bg-card:#231d3d;--bg-card-hover:#2d2649;--primary:#a78bfa;--primary-light:#c4b5fd;--primary-dim:#7c3aed;--gold:#c9a84c;--gold-light:#e8d48b;--gold-dim:#8a7235;--text:#f0eef6;--text-dim:#b8b4c8;--text-muted:#7b7890;--accent-purple:#a78bfa;--accent-teal:#5ec2c2;--border:#3a3355;--font-display:"Cormorant Garamond", Georgia, serif;--font-body:"Inter", -apple-system, sans-serif}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg-deep);color:var(--text);font-family:var(--font-body);font-weight:300;line-height:1.6;overflow-x:hidden}#cloud-overlay{z-index:9999;background:var(--bg-deep);flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0;overflow:hidden}.cloud{filter:blur(40px);opacity:0;background:radial-gradient(#a78bfa26 0%,#0000 60%);width:200%;height:120%;animation:4s ease-out forwards cloudDrift;position:absolute}.c1{animation-delay:0s;top:-30%;left:-50%}.c2{animation-delay:.3s;top:-20%;left:0%}.c3{animation-delay:.6s;top:-30%;left:30%}.c4{animation-delay:.9s;top:-10%;left:60%}.c5{animation-delay:1.2s;top:10%;left:-30%}.c6{animation-delay:1.5s;top:20%;left:20%}.c7{animation-delay:1.8s;top:5%;left:50%}.c8{animation-delay:2.1s;top:-5%;left:80%}@keyframes cloudDrift{0%{opacity:0;transform:scale(1.2)}30%{opacity:1}to{opacity:0;transform:scale(.8)translate(40%)}}.cloud-title{font-family:var(--font-display);color:var(--primary-light);opacity:0;text-shadow:0 0 60px #a78bfa80;font-size:4rem;animation:2s ease-out 2.5s forwards cloudTitleReveal}.cloud-sub{font-family:var(--font-display);color:var(--text-dim);opacity:0;font-size:1.2rem;font-style:italic;animation:2s ease-out 3s forwards cloudTitleReveal}@keyframes cloudTitleReveal{to{opacity:1}}#cloud-overlay.fade-out{pointer-events:none;animation:1.5s ease-out forwards cloudFadeOut}@keyframes cloudFadeOut{to{opacity:0;visibility:hidden}}#particles{z-index:0;pointer-events:none;position:fixed;inset:0}.particle{background:var(--primary);opacity:0;border-radius:50%;width:3px;height:3px;animation:8s infinite particleFloat;position:absolute}@keyframes particleFloat{0%{opacity:0;transform:translateY(0)scale(0)}10%{opacity:.5}90%{opacity:0}to{opacity:0;transform:translateY(-100vh)scale(1)}}.section{z-index:1;max-width:900px;margin:0 auto;padding:4rem 2rem;position:relative}.hero{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:80vh;padding:4rem 2rem;display:flex}.hero h1{font-family:var(--font-display);color:var(--primary-light);letter-spacing:.05em;text-shadow:0 0 40px #a78bfa4d;margin-bottom:.5rem;font-size:clamp(3rem,8vw,5rem)}.hero-sub{font-family:var(--font-display);color:var(--primary);letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem;font-size:1.3rem}.hero-desc{color:var(--text-dim);max-width:560px;margin-bottom:1.5rem;font-size:1rem;line-height:1.8}.hero-when{font-family:var(--font-display);color:var(--primary);text-align:center;margin-bottom:.75rem;font-size:1.1rem}.hero-scenarios{text-align:left;max-width:520px;margin:0 auto 1.5rem;padding:0;list-style:none}.hero-scenarios li{color:var(--text-dim);padding:.3rem 0 .3rem 1.5rem;font-size:.95rem;line-height:1.7;position:relative}.hero-scenarios li:before{content:"•";color:var(--primary);font-weight:700;position:absolute;left:0}.hero-desc-last{color:var(--text-muted);margin-bottom:2.5rem;font-style:italic}.btn-hero{background:linear-gradient(135deg, var(--primary), var(--primary-dim));color:#fff;font-family:var(--font-display);letter-spacing:.05em;cursor:pointer;border:none;border-radius:8px;padding:1rem 3rem;font-size:1.2rem;font-weight:600;transition:all .3s;box-shadow:0 4px 30px #a78bfa4d}.btn-hero:hover{transform:translateY(-2px);box-shadow:0 8px 40px #a78bfa80}.section h2{font-family:var(--font-display);color:var(--primary-light);text-align:center;margin-bottom:.5rem;font-size:2rem}.section-desc{text-align:center;color:var(--text-dim);margin-bottom:2rem;font-size:.95rem}.input-group{justify-content:center;gap:1rem;margin-bottom:1.5rem;display:flex}.input-wrapper{text-align:center;flex:1;max-width:130px}.input-wrapper label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem;font-size:.75rem;display:block}.input-wrapper input{background:var(--bg-card);border:1px solid var(--border);width:100%;color:var(--primary-light);font-family:var(--font-display);text-align:center;border-radius:8px;outline:none;padding:.8rem;font-size:1.5rem;transition:border-color .3s,box-shadow .3s}.input-wrapper input:focus{border-color:var(--primary);box-shadow:0 0 20px #a78bfa26}.input-wrapper input::placeholder{color:var(--text-muted);font-size:1rem}.question-wrapper{text-align:center;margin-bottom:2rem}.question-wrapper label{color:var(--text-dim);margin-bottom:.5rem;font-size:.85rem;display:block}.question-wrapper textarea{background:var(--bg-card);border:1px solid var(--border);width:100%;color:var(--text);font-family:var(--font-body);resize:vertical;border-radius:8px;outline:none;padding:1rem;font-size:1rem;transition:border-color .3s,box-shadow .3s}.question-wrapper textarea:focus{border-color:var(--primary);box-shadow:0 0 20px #a78bfa26}.question-wrapper textarea::placeholder{color:var(--text-muted)}.btn-divine{background:linear-gradient(135deg, var(--primary), var(--primary-dim));color:#fff;width:100%;max-width:400px;font-family:var(--font-display);cursor:pointer;border:none;border-radius:8px;margin:0 auto;padding:1rem;font-size:1.2rem;font-weight:600;transition:all .3s;display:block}.btn-divine:hover{transform:translateY(-1px);box-shadow:0 4px 30px #a78bfa66}.btn-divine:disabled{opacity:.6;cursor:not-allowed;transform:none}.result-section{animation:.8s ease-out resultFadeIn}@keyframes resultFadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.result-card{background:var(--bg-card);border:1px solid var(--border);text-align:center;border-radius:16px;margin-bottom:1.5rem;padding:2.5rem 2rem}.hexagram-symbol{color:var(--primary-light);margin-bottom:.5rem;font-size:3.5rem;line-height:1.2}.hexagram-name{font-family:var(--font-display);color:var(--primary);margin-bottom:.3rem;font-size:1.8rem}.hexagram-subtitle{color:var(--text-dim);margin-bottom:.75rem;font-size:.9rem;font-style:italic}.ti-yong-badge{background:var(--bg-card-hover);border:1px solid var(--border);color:var(--accent-teal);border-radius:20px;padding:.4rem 1.2rem;font-size:.8rem;display:inline-block}.answer-card{border:1px solid var(--primary-dim);text-align:center;background:linear-gradient(135deg,#a78bfa26,#7c3aed1a);border-radius:16px;margin-bottom:1.5rem;padding:2rem}.answer-label{font-family:var(--font-display);color:var(--primary-light);letter-spacing:.15em;text-transform:uppercase;margin-bottom:1rem;font-size:1rem}.answer-text{font-family:var(--font-display);color:var(--text);font-size:1.6rem;font-weight:700;line-height:1.6}.detail-grid{flex-direction:column;gap:1rem;margin-bottom:1.5rem;display:flex}.detail-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:1.5rem}.detail-card h4{font-family:var(--font-display);color:var(--primary);margin-bottom:.75rem;font-size:1rem}.detail-card p{color:var(--text-dim);font-size:1.05rem;line-height:1.8}.gua-tags{flex-wrap:wrap;justify-content:center;gap:.75rem;margin-bottom:2rem;display:flex}.gua-tag{background:var(--bg-card-hover);border:1px solid var(--border);color:var(--accent-teal);border-radius:20px;padding:.4rem 1.2rem;font-size:.8rem;display:inline-block}.btn-again{border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-body);cursor:pointer;background:0 0;border-radius:8px;margin:0 auto;padding:.8rem 2rem;font-size:.95rem;transition:all .3s;display:block}.btn-again:hover{border-color:var(--primary);color:var(--primary)}.error-toast{color:#fff;font-family:var(--font-body);z-index:1000;background:#dc2626;border-radius:8px;padding:.75rem 1.5rem;font-size:.9rem;animation:.3s toastIn;position:fixed;bottom:2rem;left:50%;transform:translate(-50%)}@keyframes toastIn{0%{opacity:0;transform:translate(-50%)translateY(10px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.crystal-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;max-width:700px;margin:0 auto;display:grid}.crystal-card{background:var(--bg-card);border:1px solid var(--border);text-align:center;cursor:pointer;border-radius:12px;padding:1.5rem;transition:all .3s}.crystal-card:hover{border-color:var(--primary-dim);transform:translateY(-4px)}.crystal-icon{margin-bottom:.5rem;font-size:2.5rem}.crystal-card h3{font-family:var(--font-display);color:var(--text);margin-bottom:.25rem;font-size:1.1rem}.crystal-card p{color:var(--text-dim);font-size:.8rem}.modal{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background:var(--bg-card);border:1px solid var(--border);text-align:center;border-radius:16px;width:90%;max-width:600px;padding:2.5rem;position:relative}.modal-close{color:var(--text-dim);cursor:pointer;background:0 0;border:none;font-size:1.5rem;position:absolute;top:1rem;right:1.5rem}.modal-content h2{font-family:var(--font-display);color:var(--primary-light);margin-bottom:1.5rem}.btn-test-bypass{border:1px dashed var(--border);color:var(--text-muted);font-family:var(--font-body);cursor:pointer;background:0 0;border-radius:8px;margin:1.5rem auto 0;padding:.5rem 1.5rem;font-size:.8rem;transition:all .2s;display:block}.btn-test-bypass:hover{border-color:var(--accent-teal);color:var(--accent-teal)}footer{text-align:center;border-top:1px solid var(--border);color:var(--text-muted);padding:3rem 2rem;font-size:.85rem}.footer-note{margin-top:.5rem;font-size:.75rem}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-deep)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--primary-dim)}#history-page{max-width:700px;margin:0 auto;padding:5rem 2rem 3rem}.history-header{align-items:center;gap:1rem;margin-bottom:2rem;display:flex}.history-header h2{font-family:var(--font-display);color:var(--primary-light);font-size:1.5rem}.history-empty{text-align:center;color:var(--text-muted);padding:3rem 0;font-size:.95rem}.history-record{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;margin-bottom:1rem;padding:1.2rem}.history-meta{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.history-date{color:var(--text-muted);font-size:.75rem}.history-hexagram{color:var(--primary);font-family:var(--font-display);font-size:.9rem}.history-question{color:var(--text-dim);margin-bottom:.5rem;font-size:.9rem;font-style:italic}.history-answer{color:var(--text);margin-bottom:.75rem;font-size:.95rem;line-height:1.6}.history-detail-btn{border:1px solid var(--border);color:var(--primary);cursor:pointer;font-size:.8rem;font-family:var(--font-body);background:0 0;border-radius:6px;padding:.3rem .8rem;transition:all .2s}.history-detail-btn:hover{background:var(--bg-card-hover);border-color:var(--primary)}.nav-history{color:var(--accent-teal)}@media (width<=600px){.detail-grid{flex-direction:column}.input-group{flex-direction:column;align-items:center;gap:.75rem}.input-wrapper{max-width:200px}.input-wrapper input{padding:1rem;font-size:1.6rem}.wallet-dropdown{width:calc(100% - 2rem);right:1rem}#payment-modal .btn-hero{width:100%}}#top-nav{z-index:100;background:linear-gradient(#1a1530f2,#1a1530b3,#0000);justify-content:flex-end;align-items:center;gap:.5rem;padding:.75rem 1.5rem;display:flex;position:fixed;top:0;left:0;right:0}.nav-btn{background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;font-family:var(--font-body);-webkit-user-select:none;user-select:none;border-radius:8px;padding:.4rem 1rem;font-size:.8rem;transition:all .2s}.nav-btn:hover{background:var(--bg-card-hover);color:var(--text)}.nav-wallet{color:var(--gold-light)}.nav-credits{cursor:pointer;color:#c4b5fd;font-size:.9em}#auth-modal .modal-content{max-width:380px}#auth-modal .modal-content h2{font-family:var(--font-display);color:var(--primary-light);text-align:center;margin-bottom:1.5rem;font-size:1.4rem}#auth-modal .modal-content input{background:var(--bg-deep);border:1px solid var(--border);width:100%;color:var(--text);font-family:var(--font-body);border-radius:8px;margin-bottom:.75rem;padding:.7rem;font-size:.9rem}#auth-modal .modal-content input:focus{border-color:var(--primary);outline:none}.btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary-dim));color:#fff;width:100%;font-family:var(--font-body);cursor:pointer;border:none;border-radius:8px;padding:.7rem;font-size:.95rem;transition:all .2s}.btn-primary:hover{box-shadow:0 4px 20px #a78bfa66}.auth-switch{text-align:center;color:var(--text-dim);margin-top:1rem;font-size:.8rem}.auth-switch a{color:var(--primary);cursor:pointer;text-decoration:underline}.wallet-dropdown{background:var(--bg-card);border:1px solid var(--border);z-index:150;border-radius:12px;width:300px;padding:1.2rem;position:fixed;top:3.2rem;right:1.5rem;box-shadow:0 8px 40px #00000080}.wallet-header{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.wallet-header h3{font-family:var(--font-display);color:var(--primary-light);font-size:1.1rem}.wallet-balance{color:var(--gold-light);font-size:1.2rem;font-weight:600;font-family:var(--font-display)}.wallet-actions{gap:.5rem;margin-bottom:.75rem;display:flex}.btn-secondary{background:var(--bg-card-hover);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;font-family:var(--font-body);text-align:center;border-radius:6px;flex:1;padding:.4rem .6rem;font-size:.75rem;transition:all .2s}.btn-secondary:hover{color:var(--primary);border-color:var(--primary)}.crystal-coming-soon{opacity:.7;position:relative}.crystal-coming-soon:hover{border-color:var(--border);transform:none}.coming-soon-badge{background:var(--primary-dim);color:var(--text);text-transform:uppercase;letter-spacing:.05em;border-radius:4px;padding:.2rem .5rem;font-size:.65rem;position:absolute;top:.5rem;right:.5rem}.nav-lang{padding:.3rem .6rem;font-size:1rem;line-height:1}.hidden{display:none!important}#credits-display{color:#c4b5fd;font-size:.9em}#earn-credits-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#7c3aed,#a78bfa);border:none;border-radius:6px;padding:8px 20px;font-size:.95em;transition:opacity .2s}#earn-credits-btn:hover{opacity:.85}#watch-ad-btn:disabled{opacity:.5;cursor:not-allowed;background:#4a4a6a}