*{margin:0;padding:0;box-sizing:border-box}body{font-family:PingFang SC,Microsoft YaHei,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;min-height:100vh;overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#1a1a2e,#16213e);z-index:-1}.bagua-bg{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:80vmin;height:80vmin;background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><defs><style>.bagua-line{stroke:%2322c55e;stroke-width:4;stroke-linecap:round;}.bagua-circle{fill:none;stroke:%2322c55e;stroke-width:3;}<\/style></defs><circle class="bagua-circle" cx="200" cy="200" r="180" opacity="0.3"/><circle class="bagua-circle" cx="200" cy="200" r="150" opacity="0.4"/><g opacity="0.6"><path class="bagua-line" d="M200,30 L200,50 M200,55 L200,75"/><path class="bagua-line" d="M200,325 L200,345 M200,350 L200,370"/><path class="bagua-line" d="M30,200 L50,200 M55,200 L75,200"/><path class="bagua-line" d="M325,200 L345,200 M350,200 L370,200"/><path class="bagua-line" d="M70,70 L85,85 M90,90 L105,105"/><path class="bagua-line" d="M295,295 L310,310 M315,315 L330,330"/><path class="bagua-line" d="M330,70 L315,85 M310,90 L295,105"/><path class="bagua-line" d="M105,295 L90,310 M85,315 L70,330"/></g><g opacity="0.7"><path class="bagua-line" d="M200,60 L200,80 M200,85 L200,105 M200,110 L200,130"/><path class="bagua-line" d="M270,270 L285,285 M290,290 L305,305 M310,310 L325,325"/><path class="bagua-line" d="M340,200 L360,200"/><path class="bagua-line" d="M130,130 L145,145 M150,150 L165,165"/><path class="bagua-line" d="M200,270 L200,290 M200,295 L200,315 M200,320 L200,340"/><path class="bagua-line" d="M130,270 L145,255 M150,250 L165,235"/><path class="bagua-line" d="M60,200 L80,200"/><path class="bagua-line" d="M270,130 L285,115 M290,110 L305,95"/></g><circle cx="200" cy="200" r="40" fill="%2322c55e" opacity="0.15"/><path d="M200,160 Q220,180 200,200 Q180,180 200,160 Z" fill="%2322c55e" opacity="0.2"/><path d="M200,240 Q180,220 200,200 Q220,220 200,240 Z" fill="%23000" opacity="0.3"/></svg>');background-size:contain;background-repeat:no-repeat;background-position:center;opacity:.4;z-index:0;animation:rotate-slow 60s linear infinite;pointer-events:none}.bagua-bg.rotating{animation:rotate-fast 2s linear infinite}@keyframes rotate-slow{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes rotate-fast{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:9999}.loading-content{text-align:center}.bagua-loader{width:80px;height:80px;margin:0 auto 20px;border:4px solid rgba(255,215,0,.3);border-top-color:gold;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.container{position:relative;z-index:1;max-width:600px;margin:0 auto;padding:20px;min-height:100vh}.header{text-align:center;padding:40px 0}.title{font-size:2.5rem;background:linear-gradient(135deg,gold,#ffed4e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:10px;text-shadow:0 0 30px rgba(255,215,0,.3)}.subtitle{font-size:1rem;color:#aaa;letter-spacing:4px}.question-input{margin:30px 0}.question-input label{display:block;margin-bottom:15px;color:gold;font-size:1.1rem;text-align:center}.question-tips{padding:20px;background:#ffd7000d;border:2px dashed rgba(255,215,0,.3);border-radius:10px;text-align:center}.question-tips p{margin:8px 0;color:#ccc;font-size:.95rem;line-height:1.6}.question-tips p:first-child{color:gold;font-weight:700;margin-bottom:12px}.question-input textarea{width:100%;padding:15px;background:#ffffff0d;border:2px solid rgba(255,215,0,.3);border-radius:10px;color:#fff;font-size:1rem;resize:none;transition:all .3s}.question-input textarea:focus{outline:none;border-color:gold;background:#ffffff14}.method-selection{margin:40px 0}.method-selection h3{text-align:center;margin-bottom:20px;color:gold}.methods{display:grid;grid-template-columns:1fr 1fr;gap:15px}.method-btn{background:#ffffff0d;border:2px solid rgba(255,215,0,.3);border-radius:15px;padding:25px 15px;color:#fff;cursor:pointer;transition:all .3s;display:flex;flex-direction:column;align-items:center;gap:8px}.method-btn:hover{background:#ffd7001a;border-color:gold;transform:translateY(-3px)}.method-btn .icon{font-size:2rem}.method-btn span:nth-child(2){font-size:1.1rem;font-weight:700}.method-btn small{font-size:.8rem;color:#aaa}.tips{margin:40px 0;padding:20px;background:#ffd7000d;border-left:4px solid #ffd700;border-radius:8px}.tips h4{color:gold;margin-bottom:15px}.tips ul{list-style:none}.tips li{padding:8px 0;color:#ccc;font-size:.9rem}.tips li:before{content:"• ";color:gold;margin-right:8px}.back-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:10px 20px;border-radius:8px;cursor:pointer;margin-bottom:20px;transition:all .3s}.back-btn:hover{background:#ffffff26}.page-title{text-align:center;font-size:1.8rem;color:gold;margin-bottom:10px}.instruction{text-align:center;color:#aaa;margin-bottom:40px}.random-display{margin:40px 0}.numbers{display:flex;justify-content:center;gap:20px}.number-box{width:80px;height:100px;background:#ffffff0d;border:3px solid rgba(255,215,0,.3);border-radius:15px;display:flex;align-items:center;justify-content:center}.number-box span{font-size:3rem;font-weight:700;color:gold;transition:all .3s}.number-box span.fixed{color:#4ade80;text-shadow:0 0 20px rgba(74,222,128,.5)}.divination-btn{display:block;width:100%;max-width:300px;margin:30px auto;padding:20px;background:linear-gradient(135deg,gold,#ffed4e);border:none;border-radius:50px;color:#1a1a2e;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s;box-shadow:0 10px 30px #ffd7004d}.divination-btn:active{transform:scale(.95)}.divination-btn:disabled{opacity:.5;cursor:not-allowed}.calculate-btn{display:block;width:100%;max-width:300px;margin:30px auto;padding:20px;background:linear-gradient(135deg,#4ade80,#22c55e);border:none;border-radius:50px;color:#fff;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s;box-shadow:0 10px 30px #4ade804d}.calculate-btn:hover{transform:translateY(-2px);box-shadow:0 15px 40px #4ade8066}.time-display{margin:40px 0}.current-time{text-align:center;margin-bottom:30px}.current-time h3{color:gold;margin-bottom:15px}.current-time .time{font-size:2rem;margin-bottom:10px}.current-time .lunar{color:#aaa;font-size:1rem}.time-numbers{display:flex;justify-content:center;gap:20px}.time-item{text-align:center;padding:20px;background:#ffffff0d;border:2px solid rgba(255,215,0,.3);border-radius:15px;min-width:100px}.time-item label{display:block;color:#aaa;font-size:.9rem;margin-bottom:10px}.time-item span{font-size:2rem;color:gold;font-weight:700}.result-view{padding-bottom:60px}.calculating-view{text-align:center}.hand-container{margin:40px auto;max-width:500px}.hand-image{position:relative;width:100%;max-width:400px;margin:0 auto}.hand-bg{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 30px rgba(0,0,0,.3))}.position-markers{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.position-dot{position:absolute;width:12px;height:12px;background:#ffd7004d;border:2px solid rgba(255,215,0,.5);border-radius:50%;transform:translate(-50%,-50%)}.moving-marker{position:absolute;width:24px;height:24px;background:#4ade80;border:3px solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 20px #4ade80cc,0 0 40px #4ade8066;transition:top .4s ease-in-out,left .4s ease-in-out;animation:pulse-glow 1s ease-in-out infinite;z-index:10}@keyframes pulse-glow{0%,to{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 20px #4ade80cc,0 0 40px #4ade8066}50%{transform:translate(-50%,-50%) scale(1.2);box-shadow:0 0 30px #4ade80,0 0 60px #4ade8099}}.position-marker{position:absolute;width:20px;height:20px;background:#4ade80;border-radius:50%;opacity:0;transition:opacity .3s,transform .3s;box-shadow:0 0 20px #4ade80cc}.position-marker.active{opacity:1;animation:pulse-marker .6s ease-in-out infinite}@keyframes pulse-marker{0%,to{transform:scale(1)}50%{transform:scale(1.3)}}.marker-daan,.label-daan{top:53.3%;left:42.3%}.marker-liulian,.label-liulian{top:24.6%;left:43.3%}.marker-suxi,.label-suxi{top:20.6%;left:57.7%}.marker-chikou,.label-chikou{top:23.1%;left:75.7%}.marker-xiaoji,.label-xiaoji{top:52.2%;left:74.7%}.marker-kongwang,.label-kongwang{top:52%;left:59%}.hand-image svg{width:100%;height:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.3))}.position-marker{transition:opacity .3s,r .3s}.position-marker.active{opacity:1!important;animation:pulse .6s ease-in-out}@keyframes pulse{0%,to{r:8;opacity:1}50%{r:12;opacity:.6}}.hand-image ellipse{transition:all .5s ease-in-out}.liushen-labels{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.liushen-labels .label{position:absolute;color:gold;font-size:.95rem;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.8),0 0 10px rgba(255,215,0,.5);transform:translate(-50%,-50%);white-space:nowrap;background:#00000080;padding:4px 10px;border-radius:15px;border:1px solid rgba(255,215,0,.4);pointer-events:none}.label-daan{top:53.3%;left:42.3%}.label-liulian{top:24.6%;left:43.3%}.label-suxi{top:20.6%;left:57.7%}.label-chikou{top:23.1%;left:75.7%}.label-xiaoji{top:52.2%;left:74.7%}.label-kongwang{top:52%;left:59%}.calculating-info{margin-top:40px}.step-info{padding:20px;background:#ffd7001a;border-radius:15px;border:2px solid rgba(255,215,0,.3);margin-bottom:20px}.step-info p{font-size:1.1rem;line-height:1.8;margin:0}.step-info strong{color:gold;font-size:1.3rem}.result-preview{margin-top:20px}.mini-result{display:flex;flex-direction:column;gap:10px;padding:15px;background:#ffffff0d;border-radius:10px}.mini-result span{padding:10px;background:#4ade801a;border-radius:8px;border:1px solid rgba(74,222,128,.3);animation:fadeInUp .5s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.question-display{margin:20px 0;padding:15px;background:#ffffff0d;border-radius:10px}.question-display label{color:gold;font-size:.9rem}.question-display p{margin-top:8px;color:#fff;line-height:1.6}.hexagram-result{margin-top:30px}.hexagram-positions{display:flex;flex-direction:column;gap:20px;margin-bottom:30px}.position{position:relative}.position-label{text-align:center;color:gold;font-size:.9rem;margin-bottom:10px}.gua-card{padding:20px;border-radius:15px;text-align:center;border:2px solid;transition:all .3s}.gua-card.auspicious{background:#4ade801a;border-color:#4ade80}.gua-card.inauspicious{background:#ef44441a;border-color:#ef4444}.gua-card h3{font-size:1.5rem;margin-bottom:10px}.gua-card .gua-type{color:#aaa;margin-bottom:15px}.gua-card .gua-attrs{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}.gua-card .gua-attrs span{padding:5px 12px;background:#ffffff1a;border-radius:20px;font-size:.85rem}.interpretation{margin-top:30px;padding:25px;background:#ffd7000d;border-radius:15px;border:2px solid rgba(255,215,0,.3)}.interpretation h3{color:gold;margin-bottom:20px;text-align:center}.interp-content p{margin-bottom:15px;line-height:1.8;color:#ddd}.interp-content strong{color:gold}.fade-enter-active,.fade-leave-active{transition:opacity .5s}.fade-enter-from,.fade-leave-to{opacity:0}.slide-fade-enter-active{transition:all .4s ease-out}.slide-fade-leave-active{transition:all .3s ease-in}.slide-fade-enter-from{transform:translate(30px);opacity:0}.slide-fade-leave-to{transform:translate(-30px);opacity:0}@media (max-width: 768px){.container{padding:15px}.title{font-size:2rem}.methods{grid-template-columns:1fr}.numbers{gap:10px}.number-box{width:70px;height:90px}.number-box span{font-size:2.5rem}.time-numbers{flex-direction:column;align-items:center}.time-item{width:100%;max-width:200px}}