.ec-calculator{--ec-surface:#ffffff0a;--ec-border:#ffffff0f;--ec-border-hover:#ffffff1f;--ec-text-primary:#f5f5f7;--ec-text-secondary:#a1a1a6;--ec-text-tertiary:#6e6e73;--ec-green:#34c759;--ec-amber:#fc0;--ec-orange:#f97316;--ec-red:#ff3b30;--ec-purple:#a855f7;--ec-cyan:#06b6d4;--ec-radius:20px;--ec-radius-sm:14px;--ec-ease:cubic-bezier(.4,0,.2,1);--ec-transition:cubic-bezier(.16,1,.3,1);background:#000;min-height:100vh;padding:60px 24px 100px;position:relative;overflow:hidden}.ec-calculator-inner{max-width:1200px;margin:0 auto}.ec-back-link{color:#2997ff;align-items:center;gap:8px;margin-bottom:40px;padding:8px 0;font-size:14px;font-weight:500;text-decoration:none;transition:gap .2s;display:inline-flex}.ec-back-link:hover{gap:12px}.ec-header{text-align:center;opacity:0;transition:opacity .8s var(--ec-ease),transform .8s var(--ec-ease);margin-bottom:64px;transform:translateY(30px)}.ec-header.ec-visible{opacity:1;transform:translateY(0)}.ec-header-label{text-transform:uppercase;letter-spacing:.15em;color:var(--ec-text-tertiary);margin-bottom:16px;font-size:13px;font-weight:600;display:inline-block}.ec-header-title{letter-spacing:-.03em;color:var(--ec-text-primary);margin:0 0 16px;font-size:clamp(28px,4.5vw,44px);font-weight:700;line-height:1.15}.ec-gradient-text{background:linear-gradient(135deg,#f97316,#fbbf24,#34c759);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.ec-header-subtitle{color:var(--ec-text-secondary);max-width:520px;margin:0 auto;font-size:17px;line-height:1.5}.ec-layout{opacity:0;transition:opacity .8s var(--ec-transition),transform .8s var(--ec-transition);grid-template-columns:1fr 380px;align-items:start;gap:32px;transition-delay:.2s;display:grid;transform:translateY(30px)}.ec-layout.ec-visible{opacity:1;transform:translateY(0)}.ec-panel-left{flex-direction:column;gap:24px;display:flex}.ec-panel-right{flex-direction:column;gap:16px;display:flex;position:sticky;top:100px}.ec-category{background:var(--ec-surface);border:1px solid var(--ec-border);border-radius:var(--ec-radius);transition:border-color .3s var(--ec-ease);padding:24px}.ec-category:hover{border-color:var(--ec-border-hover)}.ec-category-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.ec-category-header-left{align-items:center;gap:12px;display:flex}.ec-category-icon{border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.ec-icon-purple{color:#a855f7;background:#a855f726}.ec-icon-cyan{color:#06b6d4;background:#06b6d426}.ec-icon-green{color:#34c759;background:#34c75926}.ec-icon-orange{color:#f97316;background:#f9731626}.ec-category-label{color:var(--ec-text-primary);font-size:15px;font-weight:600}.ec-category-badge{color:#a855f7;background:#a855f71f;border-radius:20px;padding:4px 10px;font-size:12px;font-weight:600}.ec-mode-toggle{background:#ffffff0a;border-radius:10px;gap:4px;margin-bottom:16px;padding:3px;display:flex}.ec-mode-btn{color:var(--ec-text-tertiary);cursor:pointer;transition:all .2s var(--ec-ease);background:0 0;border:none;border-radius:8px;flex:1;padding:8px 16px;font-size:13px;font-weight:500}.ec-mode-btn.ec-active{color:var(--ec-text-primary);background:#ffffff14}.ec-presets-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.ec-preset-card{border:1px solid var(--ec-border);cursor:pointer;transition:all .2s var(--ec-ease);text-align:left;background:#ffffff05;border-radius:12px;padding:14px}.ec-preset-card:hover{border-color:var(--ec-border-hover);background:#ffffff0a}.ec-preset-card.ec-selected{background:#a855f714;border-color:#a855f766}.ec-preset-icon{margin-bottom:6px;font-size:20px}.ec-preset-label{color:var(--ec-text-primary);margin-bottom:2px;font-size:14px;font-weight:600}.ec-preset-desc{color:var(--ec-text-tertiary);margin-bottom:4px;font-size:12px}.ec-preset-watts{color:var(--ec-purple);font-size:12px;font-weight:600}.ec-select-group{margin-bottom:12px}.ec-select-group:last-child{margin-bottom:0}.ec-select-label{color:var(--ec-text-tertiary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;font-size:12px;font-weight:500;display:block}.ec-select{border:1px solid var(--ec-border);width:100%;color:var(--ec-text-primary);cursor:pointer;appearance:none;transition:border-color .2s var(--ec-ease);background:#ffffff08 url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") right 14px center no-repeat;border-radius:10px;outline:none;padding:10px 14px;font-size:14px;font-weight:500}.ec-select:focus{border-color:#a855f766}.ec-select option{color:var(--ec-text-primary);background:#1c1c1e}.ec-select optgroup{color:var(--ec-text-tertiary);font-style:normal;font-weight:600}.ec-pills{flex-wrap:wrap;gap:6px;display:flex}.ec-pill{border:1px solid var(--ec-border);color:var(--ec-text-secondary);cursor:pointer;transition:all .2s var(--ec-ease);white-space:nowrap;background:0 0;border-radius:10px;padding:8px 14px;font-size:13px;font-weight:500}.ec-pill:hover{border-color:var(--ec-border-hover);color:var(--ec-text-primary)}.ec-pill.ec-active{color:#06b6d4;background:#06b6d41a;border-color:#06b6d466}.ec-slider-group{margin-bottom:16px}.ec-slider-group:last-child{margin-bottom:0}.ec-slider-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.ec-slider-label{color:var(--ec-text-secondary);font-size:13px;font-weight:500}.ec-slider-value-input{border:1px solid var(--ec-border);width:60px;color:var(--ec-text-primary);text-align:center;-moz-appearance:textfield;transition:border-color .2s var(--ec-ease);background:#ffffff0a;border-radius:8px;outline:none;padding:4px 8px;font-size:14px;font-weight:600}.ec-slider-value-input:focus{border-color:#34c75966}.ec-slider-value-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ec-slider-value-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ec-slider{appearance:none;cursor:pointer;background:#ffffff14;border-radius:3px;outline:none;width:100%;height:6px}.ec-slider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;width:20px;height:20px;transition:transform .15s var(--ec-ease),box-shadow .15s var(--ec-ease);background:#34c759;border:2px solid #0000004d;border-radius:50%;box-shadow:0 2px 8px #34c7594d}.ec-slider::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 2px 12px #34c75980}.ec-slider::-moz-range-thumb{cursor:pointer;background:#34c759;border:2px solid #0000004d;border-radius:50%;width:20px;height:20px;box-shadow:0 2px 8px #34c7594d}.ec-slider.ec-slider-orange::-webkit-slider-thumb{background:#f97316;box-shadow:0 2px 8px #f973164d}.ec-slider.ec-slider-orange::-webkit-slider-thumb:hover{box-shadow:0 2px 12px #f9731680}.ec-slider.ec-slider-orange::-moz-range-thumb{background:#f97316;box-shadow:0 2px 8px #f973164d}.ec-timeline{background:#ffffff0a;border-radius:4px;height:8px;margin-top:16px;display:flex;overflow:hidden}.ec-timeline-gaming{transition:width .3s var(--ec-ease);background:linear-gradient(90deg,#a855f7,#c084fc)}.ec-timeline-idle{transition:width .3s var(--ec-ease);background:linear-gradient(90deg,#06b6d4,#22d3ee)}.ec-timeline-standby{transition:width .3s var(--ec-ease);background:#ffffff0f}.ec-timeline-labels{color:var(--ec-text-tertiary);justify-content:space-between;margin-top:6px;font-size:11px;display:flex}.ec-timeline-label{align-items:center;gap:4px;display:flex}.ec-timeline-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px}.ec-timeline-dot-gaming{background:#a855f7}.ec-timeline-dot-idle{background:#06b6d4}.ec-timeline-dot-standby{background:#ffffff26}.ec-monitor-row{border-top:1px solid var(--ec-border);justify-content:space-between;align-items:center;margin-top:16px;padding-top:16px;display:flex}.ec-monitor-left{color:var(--ec-text-secondary);align-items:center;gap:8px;font-size:13px;display:flex}.ec-monitor-watts{border:1px solid var(--ec-border);width:56px;color:var(--ec-text-primary);text-align:center;-moz-appearance:textfield;transition:border-color .2s var(--ec-ease);background:#ffffff0a;border-radius:8px;outline:none;padding:4px 8px;font-size:13px}.ec-monitor-watts:focus{border-color:#34c75966}.ec-monitor-watts::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ec-monitor-watts::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ec-toggle{cursor:pointer;width:44px;height:24px;transition:background .2s var(--ec-ease);background:#ffffff1a;border:none;border-radius:12px;flex-shrink:0;position:relative}.ec-toggle.ec-on{background:#34c759}.ec-toggle:after{content:"";width:18px;height:18px;transition:transform .2s var(--ec-ease);background:#fff;border-radius:50%;position:absolute;top:3px;left:3px}.ec-toggle.ec-on:after{transform:translate(20px)}.ec-tariff-pills{flex-wrap:wrap;gap:6px;margin-bottom:16px;display:flex}.ec-tariff-pill{border:1px solid var(--ec-border);color:var(--ec-text-secondary);cursor:pointer;transition:all .2s var(--ec-ease);background:0 0;border-radius:10px;padding:8px 14px;font-size:13px;font-weight:500}.ec-tariff-pill:hover{border-color:var(--ec-border-hover);color:var(--ec-text-primary)}.ec-tariff-pill.ec-active{color:#f97316;background:#f973161a;border-color:#f9731666}.ec-tariff-rate-display{text-align:center;margin-top:16px}.ec-tariff-rate-value{color:var(--ec-text-primary);letter-spacing:-.02em;font-size:36px;font-weight:700}.ec-tariff-rate-unit{color:var(--ec-text-tertiary);margin-left:4px;font-size:16px;font-weight:400}.ec-custom-toggle{border-top:1px solid var(--ec-border);justify-content:space-between;align-items:center;margin-top:16px;padding-top:16px;display:flex}.ec-custom-toggle-label{color:var(--ec-text-secondary);font-size:13px}.ec-custom-slider-wrap{margin-top:12px}.ec-result-card{background:var(--ec-surface);border:1px solid var(--ec-border);border-radius:var(--ec-radius);text-align:center;transition:border-color .3s var(--ec-ease);padding:28px 24px}.ec-result-card-title{text-transform:uppercase;letter-spacing:.1em;color:var(--ec-text-tertiary);margin:0 0 12px;font-size:12px;font-weight:600}.ec-cost-value{letter-spacing:-.03em;transition:color .3s var(--ec-ease);margin-bottom:6px;font-size:56px;font-weight:700;line-height:1}.ec-cost-value.ec-low{color:var(--ec-green)}.ec-cost-value.ec-moderate{color:var(--ec-amber)}.ec-cost-value.ec-high{color:var(--ec-orange)}.ec-cost-value.ec-very-high{color:var(--ec-red)}.ec-cost-unit{opacity:.6;font-size:18px;font-weight:400}.ec-cost-severity{margin-bottom:20px;font-size:13px;font-weight:500}.ec-cost-severity.ec-low{color:var(--ec-green)}.ec-cost-severity.ec-moderate{color:var(--ec-amber)}.ec-cost-severity.ec-high{color:var(--ec-orange)}.ec-cost-severity.ec-very-high{color:var(--ec-red)}.ec-cost-per-hour{border-top:1px solid var(--ec-border);justify-content:center;gap:12px;padding-top:16px;display:flex}.ec-cost-per-hour-item{text-align:center;flex:1}.ec-cost-per-hour-label{color:var(--ec-text-tertiary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;font-size:11px}.ec-cost-per-hour-value{color:var(--ec-text-primary);font-size:18px;font-weight:600}.ec-cost-summary{border-top:1px solid var(--ec-border);gap:12px;margin-top:16px;padding-top:16px;display:flex}.ec-cost-summary-item{text-align:center;flex:1}.ec-cost-summary-label{color:var(--ec-text-tertiary);margin-bottom:2px;font-size:11px}.ec-cost-summary-value{color:var(--ec-text-secondary);font-size:15px;font-weight:600}.ec-empty-state{text-align:center;padding:40px 24px}.ec-empty-icon{opacity:.3;margin-bottom:12px;font-size:40px}.ec-empty-title{color:var(--ec-text-primary);margin-bottom:6px;font-size:16px;font-weight:600}.ec-empty-desc{color:var(--ec-text-tertiary);font-size:13px;line-height:1.5}.ec-breakdown-card{background:var(--ec-surface);border:1px solid var(--ec-border);border-radius:var(--ec-radius);padding:20px 24px}.ec-breakdown-title{text-transform:uppercase;letter-spacing:.1em;color:var(--ec-text-tertiary);margin:0 0 16px;font-size:12px;font-weight:600}.ec-stacked-bar{background:#ffffff0a;border-radius:5px;height:10px;margin-bottom:16px;display:flex;overflow:hidden}.ec-stacked-gaming{transition:width .4s var(--ec-transition);background:linear-gradient(90deg,#a855f7,#c084fc)}.ec-stacked-idle{transition:width .4s var(--ec-transition);background:linear-gradient(90deg,#06b6d4,#22d3ee)}.ec-stacked-standby{transition:width .4s var(--ec-transition);background:#ffffff14}.ec-breakdown-rows{flex-direction:column;gap:10px;display:flex}.ec-breakdown-row{align-items:center;gap:10px;display:flex}.ec-breakdown-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.ec-breakdown-dot-gaming{background:#a855f7}.ec-breakdown-dot-idle{background:#06b6d4}.ec-breakdown-dot-standby{background:#fff3}.ec-breakdown-label{color:var(--ec-text-secondary);flex:1;font-size:13px}.ec-breakdown-kwh{color:var(--ec-text-primary);text-align:right;min-width:60px;font-size:13px;font-weight:600}.ec-breakdown-pln{color:var(--ec-text-tertiary);text-align:right;min-width:60px;font-size:13px}.ec-breakdown-total{border-top:1px solid var(--ec-border);color:var(--ec-text-primary);justify-content:space-between;margin-top:10px;padding-top:10px;font-size:13px;font-weight:600;display:flex}.ec-comparison-card{background:var(--ec-surface);border:1px solid var(--ec-border);border-radius:var(--ec-radius);text-align:center;padding:20px 24px}.ec-comparison-icon{margin-bottom:8px;font-size:24px}.ec-comparison-text{color:var(--ec-text-secondary);margin-bottom:4px;font-size:14px}.ec-comparison-value{color:var(--ec-text-primary);font-size:16px;font-weight:600}.ec-savings-card{border-radius:var(--ec-radius);background:#34c7590f;border:1px solid #34c75926;align-items:center;gap:12px;padding:16px 20px;display:flex}.ec-savings-icon{flex-shrink:0;font-size:20px}.ec-savings-text{color:var(--ec-text-secondary);font-size:13px;line-height:1.5}.ec-savings-amount{color:var(--ec-green);font-weight:600}.ec-co2-row{color:var(--ec-text-tertiary);justify-content:center;align-items:center;gap:6px;padding:12px;font-size:13px;display:flex}.ec-co2-icon{color:var(--ec-green)}.ec-info-note{border-radius:var(--ec-radius-sm);color:var(--ec-text-tertiary);background:#ffffff05;align-items:flex-start;gap:8px;padding:12px 16px;font-size:12px;line-height:1.5;display:flex}.ec-info-note svg{flex-shrink:0;margin-top:1px}.ec-reset-row{justify-content:center;display:flex}.ec-reset-btn{border:1px solid var(--ec-border);color:var(--ec-text-tertiary);cursor:pointer;transition:all .2s var(--ec-ease);background:0 0;border-radius:10px;align-items:center;gap:6px;padding:8px 16px;font-size:13px;display:inline-flex}.ec-reset-btn:hover{border-color:var(--ec-border-hover);color:var(--ec-text-secondary)}@media (prefers-reduced-motion:reduce){.ec-header,.ec-layout,.ec-content-section,.ec-cost-value,.ec-slider,.ec-toggle,.ec-toggle:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}@media (max-width:1024px){.ec-layout{grid-template-columns:1fr 340px;gap:24px}}@media (max-width:768px){.ec-calculator{padding:40px 16px 80px}.ec-layout{grid-template-columns:1fr}.ec-panel-right{position:static}.ec-presets-grid{grid-template-columns:1fr 1fr}.ec-cost-value{font-size:44px}.ec-tariff-rate-value{font-size:28px}.ec-content-section{margin-top:60px}.ec-guide-title{font-size:20px}.ec-guide-subtitle{font-size:16px}.ec-related-grid{grid-template-columns:1fr}.ec-cta-section{padding:28px 20px}.ec-cta-buttons{flex-direction:column;align-items:center}.ec-cta-btn{justify-content:center;width:100%}}@media (max-width:480px){.ec-presets-grid{grid-template-columns:1fr}.ec-pills{flex-direction:column}.ec-pill{text-align:center}.ec-cost-per-hour{flex-direction:column;gap:8px}}.ec-content-section{opacity:0;margin-top:80px;transform:translateY(30px)}.ec-content-section.ec-visible{opacity:1;transition:opacity .8s var(--ec-transition),transform .8s var(--ec-transition);transition-delay:.4s;transform:translateY(0)}.ec-guide{max-width:800px;margin:0 auto}.ec-guide-title{color:var(--ec-text-primary);letter-spacing:-.02em;margin:0 0 20px;font-size:24px;font-weight:700}.ec-guide-subtitle{color:var(--ec-text-primary);margin:32px 0 12px;font-size:18px;font-weight:600}.ec-guide-text{color:var(--ec-text-secondary);margin:0 0 16px;font-size:15px;line-height:1.7}.ec-guide-list{margin:0 0 16px;padding:0;list-style:none}.ec-guide-list li{color:var(--ec-text-secondary);margin-bottom:10px;padding-left:20px;font-size:15px;line-height:1.6;position:relative}.ec-guide-list li:before{content:"";background:linear-gradient(135deg,#f97316,#34c759);border-radius:50%;width:6px;height:6px;position:absolute;top:10px;left:0}.ec-guide-list li strong{color:var(--ec-text-primary)}.ec-cost-table-wrapper{border-radius:var(--ec-radius-sm);border:1px solid var(--ec-border);margin:16px 0 24px;overflow-x:auto}.ec-cost-table{border-collapse:collapse;width:100%;font-size:14px}.ec-cost-table th{color:var(--ec-text-primary);text-align:left;border-bottom:1px solid var(--ec-border);text-transform:uppercase;letter-spacing:.05em;background:#ffffff0f;padding:12px 16px;font-size:12px;font-weight:600}.ec-cost-table td{color:var(--ec-text-secondary);border-bottom:1px solid var(--ec-border);padding:10px 16px}.ec-cost-table tr:last-child td{border-bottom:none}.ec-cost-table tr:hover td{background:#ffffff05}.ec-faq{max-width:800px;margin:60px auto 0}.ec-faq-list{flex-direction:column;gap:8px;display:flex}.ec-faq-item{background:var(--ec-surface);border:1px solid var(--ec-border);border-radius:var(--ec-radius-sm);transition:border-color .2s var(--ec-ease);overflow:hidden}.ec-faq-item[open]{border-color:var(--ec-border-hover)}.ec-faq-question{color:var(--ec-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;padding:16px 20px;font-size:15px;font-weight:600;list-style:none;transition:color .2s;display:block}.ec-faq-question::-webkit-details-marker{display:none}.ec-faq-question::marker{content:"";display:none}.ec-faq-question:hover{color:#f97316}.ec-faq-answer{color:var(--ec-text-secondary);margin:0;padding:0 20px 16px;font-size:14px;line-height:1.7}.ec-cta-section{text-align:center;background:var(--ec-surface);border:1px solid var(--ec-border);border-radius:var(--ec-radius);max-width:800px;margin:60px auto 0;padding:40px}.ec-cta-section .ec-guide-title{text-align:center}.ec-cta-section .ec-guide-text{text-align:center;max-width:600px;margin:0 auto 24px}.ec-cta-buttons{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.ec-cta-btn{transition:all .2s var(--ec-ease);border-radius:12px;align-items:center;gap:8px;padding:14px 28px;font-size:15px;font-weight:600;text-decoration:none;display:inline-flex}.ec-cta-primary{color:#000;background:linear-gradient(135deg,#f97316,#fbbf24)}.ec-cta-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px #f973164d}.ec-cta-secondary{background:var(--ec-surface);border:1px solid var(--ec-border);color:var(--ec-text-primary)}.ec-cta-secondary:hover{border-color:var(--ec-border-hover);transform:translateY(-2px)}.ec-related{max-width:800px;margin:60px auto 0}.ec-related-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.ec-related-card{background:var(--ec-surface);border:1px solid var(--ec-border);border-radius:var(--ec-radius-sm);transition:all .2s var(--ec-ease);flex-direction:column;gap:4px;padding:20px;text-decoration:none;display:flex}.ec-related-card:hover{border-color:var(--ec-border-hover);transform:translateY(-2px)}.ec-related-card-title{color:var(--ec-text-primary);font-size:15px;font-weight:600}.ec-related-card-desc{color:var(--ec-text-tertiary);font-size:13px}.ec-update-info{text-align:center;max-width:800px;color:var(--ec-text-tertiary);letter-spacing:.02em;margin:40px auto 0;font-size:12px}.ec-next-tool{border-radius:var(--ec-radius-sm);color:var(--ec-text-primary);transition:border-color .3s var(--ec-ease),transform .3s var(--ec-ease),box-shadow .3s var(--ec-ease);background:linear-gradient(135deg,#06b6d414,#a855f714);border:1px solid #06b6d440;align-items:center;gap:12px;margin-top:12px;padding:14px 16px;text-decoration:none;display:flex}.ec-next-tool:hover{border-color:#06b6d48c;transform:translateY(-1px);box-shadow:0 6px 20px #06b6d41f}.ec-next-tool-chip{width:34px;height:34px;color:var(--ec-cyan);background:#06b6d426;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.ec-next-tool-text{flex-direction:column;gap:2px;font-size:13px;line-height:1.4;display:flex}.ec-next-tool-text strong{font-weight:600}.ec-next-tool-sub{color:var(--ec-text-tertiary);font-size:12.5px}.ec-next-tool-arrow{color:var(--ec-cyan);transition:transform .3s var(--ec-ease);flex-shrink:0;margin-left:auto;font-size:16px}.ec-next-tool:hover .ec-next-tool-arrow{transform:translate(3px)}