:root{--bg-primary:#0a0f1e;--bg-secondary:#0f1729;--bg-card:#141e35;--bg-card-hover:#1a2540;--bg-overlay:#0a0f1ef2;--accent-green:#00d4aa;--accent-green-dim:#00d4aa26;--accent-green-border:#00d4aa4d;--accent-blue:#4facfe;--accent-blue-dim:#4facfe1f;--accent-amber:#ff6b35;--accent-amber-dim:#ff6b351f;--accent-purple:#7c3aed;--text-primary:#f0f4ff;--text-secondary:#8b9abe;--text-muted:#4a5a7a;--border-subtle:#ffffff0f;--border-accent:#00d4aa33;--shadow-card:0 4px 24px #0006;--shadow-glow-green:0 0 30px #00d4aa33;--shadow-glow-blue:0 0 30px #4facfe33;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--font-sans:"Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"DM Mono", "Courier New", monospace;--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.4s cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;line-height:1.6;overflow-x:hidden}#root{flex-direction:column;min-height:100vh;display:flex}h1,h2,h3,h4{letter-spacing:-.02em;font-weight:700;line-height:1.2}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--accent-green);border-radius:var(--radius-full)}::selection{background:var(--accent-green-dim);color:var(--accent-green)}input[type=range]{appearance:none;background:var(--bg-card-hover);border-radius:var(--radius-full);cursor:pointer;outline:none;width:100%;height:6px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent-green);cursor:pointer;width:20px;height:20px;transition:transform var(--transition-fast), box-shadow var(--transition-fast);border-radius:50%;box-shadow:0 0 10px #00d4aa80}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 16px #00d4aab3}input[type=range]::-moz-range-thumb{background:var(--accent-green);cursor:pointer;border:none;border-radius:50%;width:20px;height:20px;box-shadow:0 0 10px #00d4aa80}input[type=number]{font-family:var(--font-mono);background:var(--bg-card-hover);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);width:100%;transition:border-color var(--transition-fast), box-shadow var(--transition-fast);-moz-appearance:textfield;outline:none;padding:6px 10px;font-size:14px}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input[type=number]:focus{border-color:var(--accent-green);box-shadow:0 0 0 3px var(--accent-green-dim)}select{font-family:var(--font-sans);background:var(--bg-card-hover);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);cursor:pointer;width:100%;transition:border-color var(--transition-fast);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238B9ABE' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;outline:none;padding:8px 32px 8px 12px;font-size:14px}select:focus{border-color:var(--accent-green)}.text-green{color:var(--accent-green)}.text-blue{color:var(--accent-blue)}.text-amber{color:var(--accent-amber)}.text-muted{color:var(--text-secondary)}.mono{font-family:var(--font-mono)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes pulse-green{0%,to{box-shadow:0 0 #00d4aa66}50%{box-shadow:0 0 0 8px #00d4aa00}}@keyframes countUp{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}.animate-fade-in-up{animation:.5s both fadeInUp}.animate-fade-in{animation:.3s both fadeIn}.input-panel{gap:var(--space-lg);padding:var(--space-md);flex-direction:column;width:100%;max-width:480px;margin:0 auto;display:flex}.steps-indicator{padding:var(--space-md) 0;justify-content:space-between;align-items:center;display:flex;position:relative}.steps-line{background:var(--border-subtle);z-index:0;height:2px;position:absolute;top:50%;left:20px;right:20px;transform:translateY(-50%)}.steps-line-fill{background:linear-gradient(90deg, var(--accent-green), var(--accent-blue));height:100%;transition:width var(--transition-slow);border-radius:var(--radius-full)}.step-item{cursor:default;z-index:1;flex-direction:column;align-items:center;gap:6px;display:flex}.step-item.done{cursor:pointer}.step-circle{border:2px solid var(--border-subtle);background:var(--bg-card);width:32px;height:32px;color:var(--text-muted);transition:all var(--transition-base);border-radius:50%;justify-content:center;align-items:center;font-size:13px;font-weight:600;display:flex}.step-item.active .step-circle{border-color:var(--accent-green);background:var(--accent-green-dim);color:var(--accent-green);animation:2s infinite pulse-green;box-shadow:0 0 0 4px #00d4aa1a}.step-item.done .step-circle{border-color:var(--accent-green);background:var(--accent-green);color:var(--bg-primary)}.step-label{color:var(--text-muted);white-space:nowrap;font-size:11px;font-weight:500}.step-item.active .step-label{color:var(--accent-green)}.step-item.done .step-label{color:var(--text-secondary)}.step-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-lg);gap:var(--space-lg);flex-direction:column;display:flex}.step-card-header{align-items:center;gap:var(--space-md);padding-bottom:var(--space-md);border-bottom:1px solid var(--border-subtle);display:flex}.step-icon{filter:drop-shadow(0 0 8px #00d4aa4d);font-size:32px}.step-card-header h2{color:var(--text-primary);margin-bottom:2px;font-size:18px}.step-card-header p{color:var(--text-secondary);font-size:13px}.field-group{gap:var(--space-sm);flex-direction:column;display:flex}.field-header{justify-content:space-between;align-items:center;display:flex}.field-label{color:var(--text-secondary);font-size:14px;font-weight:500}.field-value-box{background:var(--bg-card-hover);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);align-items:center;gap:4px;padding:2px 6px 2px 2px;display:flex}.field-value-box input[type=number]{text-align:right;width:70px;color:var(--accent-green);box-shadow:none;background:0 0;border:none;padding:4px 6px;font-size:15px;font-weight:700}.field-value-box input[type=number]:focus{box-shadow:none;border:none}.field-unit{color:var(--text-muted);white-space:nowrap;font-size:12px}.field-hint{color:var(--text-muted);margin-top:2px;padding-left:2px;font-size:12px}.slider-track-wrapper{position:relative}.slider-fill{background:linear-gradient(90deg, var(--accent-green), var(--accent-blue));border-radius:var(--radius-full);pointer-events:none;z-index:1;height:6px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.slider-track-wrapper input[type=range]{z-index:2;background:0 0;position:relative}.toggle-group{gap:var(--space-sm);background:var(--bg-card-hover);border-radius:var(--radius-md);padding:4px;display:flex}.toggle-btn{border-radius:var(--radius-sm);color:var(--text-secondary);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-base);white-space:nowrap;background:0 0;border:none;flex:1;padding:8px 12px;font-size:13px;font-weight:500}.toggle-btn.active{background:var(--accent-green);color:var(--bg-primary);font-weight:700;box-shadow:0 2px 8px #00d4aa4d}.nav-buttons{gap:var(--space-md);display:flex}.btn-secondary{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-secondary);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-base);flex:none;padding:14px 20px;font-size:15px;font-weight:500}.btn-secondary:hover{background:var(--bg-card-hover);border-color:var(--text-muted);color:var(--text-primary)}.btn-primary{border-radius:var(--radius-md);background:linear-gradient(135deg, var(--accent-blue), var(--accent-green));color:var(--bg-primary);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-base);letter-spacing:.02em;border:none;flex:1;padding:14px 24px;font-size:16px;font-weight:700}.btn-primary:hover{box-shadow:var(--shadow-glow-green);transform:translateY(-1px)}.btn-calculate{border-radius:var(--radius-lg);color:#0a0f1e;font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-base);letter-spacing:.02em;background:linear-gradient(135deg,#00d4aa,#4facfe);border:none;flex:1;justify-content:center;align-items:center;gap:8px;padding:16px 24px;font-size:17px;font-weight:900;animation:2s infinite pulse-green;display:flex}.btn-calculate:hover{animation:none;transform:translateY(-2px);box-shadow:0 8px 30px #00d4aa66}.btn-calculate-icon{font-size:20px}.result-wrapper{gap:var(--space-md);width:100%;max-width:480px;padding:var(--space-md);flex-direction:column;margin:0 auto;display:flex}.result-dashboard{gap:var(--space-md);background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-lg);flex-direction:column;display:flex;position:relative;overflow:hidden}.result-dashboard:before{content:"";background:linear-gradient(90deg, var(--accent-green), var(--accent-blue), var(--accent-purple));height:2px;position:absolute;top:0;left:0;right:0}.watermark{text-align:center;color:var(--text-muted);opacity:.5;letter-spacing:.05em;font-size:10px}.verdict-banner{border-radius:var(--radius-md);align-items:center;gap:8px;padding:10px 16px;font-size:14px;font-weight:600;display:flex}.verdict-green{background:var(--accent-green-dim);border:1px solid var(--accent-green-border);color:var(--accent-green)}.verdict-blue{background:var(--accent-blue-dim);color:var(--accent-blue);border:1px solid #4facfe4d}.verdict-amber{background:var(--accent-amber-dim);color:var(--accent-amber);border:1px solid #ff6b354d}.verdict-icon{font-size:18px}.verdict-sub{opacity:.8;font-weight:400}.hero-section{text-align:center;padding:var(--space-md) 0;animation:.6s cubic-bezier(.34,1.56,.64,1) both countUp}.hero-label{color:var(--text-secondary);letter-spacing:.05em;margin-bottom:8px;font-size:13px}.hero-number{font-family:var(--font-mono);letter-spacing:-.03em;margin-bottom:12px;font-size:56px;font-weight:900;line-height:1}.hero-green{color:var(--accent-green);text-shadow:0 0 40px #00d4aa66}.hero-blue{color:var(--accent-blue);text-shadow:0 0 40px #4facfe66}.hero-amber{color:var(--accent-amber);text-shadow:0 0 40px #ff6b354d}.hero-sub{color:var(--text-secondary);justify-content:center;align-items:center;gap:6px;font-size:14px;display:flex}.hero-saving{font-family:var(--font-mono);color:var(--accent-green);font-size:18px;font-weight:700}.stat-cards{gap:var(--space-sm);grid-template-columns:repeat(3,1fr);display:grid}.stat-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-md) var(--space-sm);text-align:center}.stat-card-featured{background:var(--accent-green-dim);border-color:var(--accent-green-border);transform:scale(1.03)}.stat-card-label{color:var(--text-muted);margin-bottom:4px;font-size:12px}.stat-card-value{font-family:var(--font-mono);margin-bottom:2px;font-size:18px;font-weight:700;line-height:1.1}.stat-card-sub{color:var(--text-muted);font-size:10px}.chart-section{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-md) var(--space-sm) var(--space-sm)}.chart-title{color:var(--text-secondary);margin-bottom:var(--space-sm);padding:0 var(--space-sm);justify-content:space-between;align-items:center;font-size:13px;font-weight:600;display:flex}.chart-breakeven-badge{color:gold;border-radius:var(--radius-full);background:#ffd70026;border:1px solid #ffd7004d;padding:2px 8px;font-size:11px}.energy-compare{align-items:center;gap:var(--space-sm);background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-md);display:flex}.energy-item{flex:1;align-items:center;gap:8px;display:flex}.energy-icon{font-size:24px}.energy-label{color:var(--text-muted);font-size:11px}.energy-value{font-family:var(--font-mono);color:var(--text-primary);font-size:16px;font-weight:700}.energy-item.fuel .energy-value{color:var(--accent-amber)}.energy-arrow{color:var(--text-muted);flex-shrink:0;font-size:16px}.energy-saving{text-align:center;background:var(--accent-green-dim);border:1px solid var(--accent-green-border);border-radius:var(--radius-sm);flex-shrink:0;padding:6px 10px}.energy-saving-label{color:var(--accent-green);font-size:10px}.energy-saving-val{font-family:var(--font-mono);color:var(--accent-green);font-size:14px;font-weight:700}.detail-section{border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden}.detail-title{padding:var(--space-md);color:var(--text-secondary);cursor:pointer;background:var(--bg-card);-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;display:flex}.detail-toggle{transition:transform var(--transition-base);color:var(--text-muted)}.detail-section.open .detail-toggle{transform:rotate(180deg)}.detail-body{padding:var(--space-sm) var(--space-md) var(--space-md);background:var(--bg-card);border-top:1px solid var(--border-subtle);display:none}.detail-section.open .detail-body{display:block}.detail-row{border-bottom:1px solid var(--border-subtle);color:var(--text-secondary);justify-content:space-between;align-items:center;padding:8px 0;font-size:13px;display:flex}.detail-row:last-child{border-bottom:none}.result-actions{gap:var(--space-sm);grid-template-columns:1fr 1fr 1fr;display:grid}.action-btn{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-secondary);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-base);flex-direction:column;align-items:center;gap:4px;padding:12px 8px;font-size:12px;display:flex}.action-btn span{font-size:20px}.action-screenshot:hover{color:var(--accent-blue);background:#4facfe1a;border-color:#4facfe4d}.action-share:hover{background:var(--accent-green-dim);border-color:var(--accent-green-border);color:var(--accent-green)}.action-recalculate:hover{background:var(--accent-amber-dim);color:var(--accent-amber);border-color:#ff6b354d}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;background:#000000b3;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.modal-sheet{background:var(--bg-secondary);border-radius:var(--radius-xl) var(--radius-xl) 0 0;border:1px solid var(--border-subtle);width:100%;max-width:480px;padding:var(--space-md) var(--space-lg) var(--space-xl);gap:var(--space-md);border-bottom:none;flex-direction:column;display:flex;position:relative}.modal-sheet:before{content:"";border-radius:var(--radius-xl) var(--radius-xl) 0 0;background:linear-gradient(90deg,#946ce6,#ff6b35);height:2px;position:absolute;top:0;left:0;right:0}.modal-handle{background:var(--border-subtle);border-radius:var(--radius-full);width:36px;height:4px;margin:0 auto var(--space-sm)}.modal-header{text-align:center;position:relative}.modal-close-btn{background:var(--bg-card);border:1px solid var(--border-subtle);width:28px;height:28px;color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);border-radius:50%;justify-content:center;align-items:center;font-size:12px;display:flex;position:absolute;top:0;right:0}.modal-close-btn:hover{background:var(--bg-card-hover);color:var(--text-primary)}.modal-header h3{color:var(--text-primary);margin-bottom:6px;font-size:18px}.modal-header p{color:var(--text-secondary);font-size:14px}.price-display{padding:var(--space-md) 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);justify-content:center;align-items:baseline;gap:4px;display:flex}.price-currency{color:#946ce6;font-size:24px;font-weight:700}.price-amount{font-family:var(--font-mono);color:#946ce6;text-shadow:0 0 20px #946ce64d;font-size:56px;font-weight:900;line-height:1}.price-desc{color:var(--text-secondary);font-size:16px}.value-props{flex-direction:column;gap:6px;display:flex}.value-prop{color:var(--text-secondary);background:var(--bg-card);border-radius:var(--radius-sm);padding:6px 12px;font-size:13px}.afdian-steps{background:var(--bg-card-hover);padding:var(--space-md);border-radius:var(--radius-md);flex-direction:column;gap:12px;display:flex}.afdian-step{color:var(--text-primary);align-items:center;gap:10px;font-size:13px;display:flex}.afdian-step-num{color:#fff;background:#946ce6;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;font-size:12px;font-weight:700;display:flex}.btn-afdian{border-radius:var(--radius-lg);color:#fff;width:100%;font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-base);background:#946ce6;border:none;padding:16px;font-size:16px;font-weight:700;box-shadow:0 4px 12px #946ce64d}.btn-afdian:hover{transform:translateY(-2px);box-shadow:0 6px 16px #946ce666}.btn-already-paid{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);width:100%;color:var(--text-secondary);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-fast);background:0 0;padding:14px;font-size:14px}.btn-already-paid:hover{background:var(--bg-card);color:var(--text-primary)}.btn-pay{border-radius:var(--radius-lg);background:linear-gradient(135deg, var(--accent-green), var(--accent-blue));width:100%;color:var(--bg-primary);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-base);border:none;padding:16px;font-size:16px;font-weight:700}.btn-pay:hover{transform:translateY(-2px);box-shadow:0 8px 30px #00d4aa66}.verify-guide{background:var(--bg-card);padding:var(--space-md);border-radius:var(--radius-md);margin-bottom:var(--space-sm);flex-direction:column;gap:8px;display:flex}.verify-guide-item{color:var(--text-secondary);align-items:flex-start;gap:8px;font-size:13px;display:flex}.verify-guide-icon{font-size:16px}.order-input-group{flex-direction:column;gap:8px;display:flex}.order-input{background:var(--bg-card-hover);border:1px solid var(--border-subtle);border-radius:var(--radius-md);width:100%;color:var(--text-primary);font-family:var(--font-mono);transition:all var(--transition-fast);outline:none;padding:14px;font-size:14px}.order-input:focus{border-color:#946ce6;box-shadow:0 0 0 2px #946ce633}.error-msg{color:var(--accent-amber);font-size:12px}.payment-polling{align-items:center;gap:var(--space-sm);padding:var(--space-xl) 0;color:var(--text-secondary);flex-direction:column;font-size:15px;display:flex}.polling-spinner{border:3px solid var(--border-subtle);border-top-color:#946ce6;border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}.payment-success{align-items:center;gap:var(--space-sm);padding:var(--space-xl) 0;color:var(--accent-green);flex-direction:column;font-size:16px;font-weight:600;display:flex}.success-icon{font-size:56px}.payment-note{color:var(--text-muted);font-size:13px;font-weight:400}.payment-disclaimer{text-align:center;color:var(--text-muted);padding-top:var(--space-sm);border-top:1px solid var(--border-subtle);font-size:11px}.app{background:var(--bg-primary);background-image:radial-gradient(at 20%,#00d4aa0a 0%,#0000 60%),radial-gradient(at 80% 10%,#4facfe0a 0%,#0000 60%);flex-direction:column;min-height:100vh;display:flex}.app-header{z-index:50;-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle);background:#0a0f1ed9;position:sticky;top:0}.header-inner{max-width:480px;padding:14px var(--space-md);justify-content:space-between;align-items:center;margin:0 auto;display:flex}.header-logo{align-items:center;gap:8px;display:flex}.logo-icon{filter:drop-shadow(0 0 8px #00d4aa80);font-size:22px}.logo-text{color:var(--text-primary);letter-spacing:-.02em;font-size:16px;font-weight:700}.header-btn{border:1px solid var(--accent-green-border);border-radius:var(--radius-full);background:var(--accent-green-dim);color:var(--accent-green);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-base);padding:6px 14px;font-size:13px;font-weight:600}.header-btn:hover{background:var(--accent-green);color:var(--bg-primary)}.header-right{align-items:center;gap:var(--space-sm);display:flex}.member-badge{color:gold;border-radius:var(--radius-full);white-space:nowrap;background:#ffd7001a;border:1px solid #ffd70040;padding:4px 10px;font-size:12px;font-weight:600}.hero-tagline{text-align:center;padding:var(--space-xl) var(--space-md) var(--space-md);max-width:480px;margin:0 auto}.hero-tagline h1{color:var(--text-primary);letter-spacing:-.03em;margin-bottom:8px;font-size:26px;font-weight:900;line-height:1.2}.hero-tagline p{color:var(--text-secondary);margin-bottom:var(--space-md);font-size:15px}.free-badge{border:1px solid var(--accent-green-border);border-radius:var(--radius-full);color:var(--accent-green);background:linear-gradient(135deg,#00d4aa26,#4facfe26);padding:6px 16px;font-size:13px;font-weight:600;animation:2.5s infinite pulse-green;display:inline-block}.app-main{padding-bottom:var(--space-xl);flex:1}.app-footer{text-align:center;padding:var(--space-md);color:var(--text-muted);border-top:1px solid var(--border-subtle);font-size:11px}