:root{--carbon-black: #0a0a0f;--carbon-dark: #141419;--carbon-mid: #1e1e26;--carbon-light: #2a2a35;--electric-blue: #00d4ff;--electric-blue-glow: rgba(0, 212, 255, .3);--electric-cyan: #00fff2;--thermal-orange: #ff6b35;--thermal-orange-glow: rgba(255, 107, 53, .3);--chrome-silver: #c0c0c8;--chrome-bright: #e8e8ef;--chrome-dim: #8888a0;--success-green: #00e676;--warning-amber: #ffab00;--danger-red: #ff5252;--gradient-dark: linear-gradient(180deg, var(--carbon-dark) 0%, var(--carbon-black) 100%);--gradient-card: linear-gradient(145deg, var(--carbon-mid) 0%, var(--carbon-dark) 100%);--gradient-electric: linear-gradient(135deg, var(--electric-blue) 0%, var(--electric-cyan) 100%);--gradient-thermal: linear-gradient(135deg, var(--thermal-orange) 0%, #ff8a50 100%);--gradient-hybrid: linear-gradient(135deg, var(--warning-amber) 0%, #ffc107 100%);--gradient-chrome: linear-gradient(145deg, var(--chrome-bright) 0%, var(--chrome-silver) 100%);--glass-bg: rgba(30, 30, 38, .7);--glass-border: rgba(255, 255, 255, .08);--glass-blur: blur(20px);--font-primary: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: 6px;--radius-md: 12px;--radius-lg: 20px;--radius-xl: 28px;--radius-full: 50%;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 8px 24px rgba(0, 0, 0, .4);--shadow-lg: 0 16px 48px rgba(0, 0, 0, .5);--shadow-glow-blue: 0 0 40px var(--electric-blue-glow);--shadow-glow-orange: 0 0 40px var(--thermal-orange-glow);--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}*,*:before,*:after{box-sizing:border-box}body{font-family:var(--font-primary);background:var(--gradient-dark);color:var(--chrome-bright);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2;letter-spacing:-.02em}h1{font-size:2.5rem;margin-top:0}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.25rem}.container{max-width:1800px;margin:0 auto;padding:0 var(--spacing-lg)}.app{min-height:100vh;display:flex;flex-direction:column}.header{background:var(--carbon-dark);padding:var(--spacing-xs) 0;position:relative}.header-content{display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:var(--spacing-md)}.logo-img{height:50px;width:auto}.logo-icon{width:48px;height:48px;background:var(--gradient-electric);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.5rem;box-shadow:var(--shadow-glow-blue)}.logo-text{font-size:1.5rem;font-weight:700;background:var(--gradient-chrome);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.main{flex:1;padding:var(--spacing-xs) 0 var(--spacing-2xl) 0}.card{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-xl);transition:all var(--transition-normal)}.card:hover{border-color:#ffffff26;transform:translateY(-2px)}.card-electric{border-left:3px solid var(--electric-blue)}.card-thermal{border-left:3px solid var(--thermal-orange)}.card-hybrid{border-left:3px solid var(--warning-amber)}.card-title{font-size:1.125rem;font-weight:600;margin-bottom:var(--spacing-sm);display:flex;align-items:center;gap:var(--spacing-sm)}.card-electric .card-title{color:var(--electric-blue)}.card-thermal .card-title{color:var(--thermal-orange)}.card-hybrid .card-title{color:var(--warning-amber)}.form-group{margin-bottom:var(--spacing-sm)}.form-label{display:block;font-size:.875rem;color:var(--chrome-dim);margin-bottom:var(--spacing-xs);font-weight:500}.form-input{width:100%;padding:var(--spacing-xs) var(--spacing-md);background:var(--carbon-dark);border:1px solid var(--glass-border);border-radius:var(--radius-md);color:var(--chrome-bright);font-size:1rem;font-family:var(--font-mono);transition:all var(--transition-fast)}input[type=number]{-moz-appearance:textfield}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.card-thermal .form-input,.card-thermal .form-select,.card-thermal .toggle-group{border-color:#78828c66}.card-thermal .form-input:focus,.card-thermal .form-select:focus{outline:none;border-color:var(--thermal-orange);box-shadow:0 0 0 3px var(--thermal-orange-glow)}.card-thermal .info-btn:hover{color:var(--thermal-orange)}.card-hybrid .form-input,.card-hybrid .form-select,.card-hybrid .toggle-group{border-color:#78828c66}.card-hybrid .form-input:focus,.card-hybrid .form-select:focus{outline:none;border-color:var(--warning-amber);box-shadow:0 0 0 3px var(--warning-amber-glow)}.card-hybrid .info-btn:hover{color:var(--warning-amber)}.card-electric .form-input,.card-electric .form-select,.card-electric .toggle-group{border-color:#78828c66}.card-electric .form-input:focus,.card-electric .form-select:focus{outline:none;border-color:var(--electric-blue);box-shadow:0 0 0 3px var(--electric-blue-glow)}.card-electric .info-btn:hover{color:var(--electric-blue)}.form-input::placeholder{color:var(--chrome-dim);opacity:.5}.form-suffix{position:relative}.form-suffix .suffix{position:absolute;right:var(--spacing-md);top:50%;transform:translateY(-50%);color:var(--chrome-dim);font-size:.875rem}.form-suffix .form-input{padding-right:60px}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238888a0' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:40px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-xl);font-size:1rem;font-weight:600;font-family:var(--font-primary);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal)}.btn-primary{background:var(--gradient-electric);color:var(--carbon-black);box-shadow:var(--shadow-glow-blue)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 60px var(--electric-blue-glow)}.btn-secondary{background:var(--carbon-light);color:var(--chrome-bright);border:1px solid var(--glass-border)}.btn-secondary:hover{background:var(--carbon-mid);border-color:var(--chrome-dim)}.btn-large{padding:var(--spacing-lg) var(--spacing-2xl);font-size:1.125rem;border-radius:var(--radius-lg)}.toggle-group{display:flex;background:var(--carbon-dark);border-radius:var(--radius-lg);padding:4px;border:1px solid var(--glass-border)}.toggle-btn{flex:1;padding:var(--spacing-xs) var(--spacing-lg);background:transparent;border:none;border-radius:var(--radius-md);color:var(--chrome-dim);font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.toggle-btn.active{color:var(--carbon-black)}.card-thermal .toggle-btn.active{background:var(--gradient-thermal)}.card-hybrid .toggle-btn.active{background:var(--gradient-hybrid)}.card-electric .toggle-btn.active{background:var(--gradient-electric)}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-xl)}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-lg)}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-lg)}.comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-xl);margin-bottom:var(--spacing-2xl)}.results-section{margin-top:var(--spacing-2xl)}.result-hero{background:var(--gradient-card);border-radius:var(--radius-xl);padding:var(--spacing-2xl);text-align:center;margin-bottom:var(--spacing-2xl);border:1px solid var(--glass-border);position:relative;overflow:hidden}.result-hero:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 50% 0%,var(--electric-blue-glow) 0%,transparent 60%);pointer-events:none}.result-hero.winner-electric:before{background:radial-gradient(circle at 50% 0%,var(--electric-blue-glow) 0%,transparent 60%)}.result-hero.winner-thermal:before{background:radial-gradient(circle at 50% 0%,var(--thermal-orange-glow) 0%,transparent 60%)}.result-savings{font-size:3.5rem;font-weight:700;margin-bottom:var(--spacing-sm)}.savings-electric{color:var(--electric-blue)}.savings-thermal{color:var(--thermal-orange)}.result-subtitle{font-size:1.25rem;color:var(--chrome-dim)}.gauge{position:relative;width:200px;height:100px;margin:0 auto}.gauge-arc{fill:none;stroke:var(--carbon-light);stroke-width:12;stroke-linecap:round}.gauge-value{fill:none;stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset var(--transition-slow)}.gauge-electric .gauge-value{stroke:var(--electric-blue)}.gauge-thermal .gauge-value{stroke:var(--thermal-orange)}.gauge-label{position:absolute;bottom:0;left:50%;transform:translate(-50%);text-align:center}.gauge-number{font-size:1.5rem;font-weight:700;font-family:var(--font-mono)}.breakdown-list{list-style:none}.breakdown-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md) 0;border-bottom:1px solid var(--glass-border)}.breakdown-item:last-child{border-bottom:none}.breakdown-label{color:var(--chrome-dim);font-size:.9375rem}.breakdown-value{font-weight:600;font-family:var(--font-mono)}.breakdown-positive{color:var(--success-green)}.breakdown-negative{color:var(--danger-red)}.breakdown-total{font-size:1.5rem;font-weight:800;padding:var(--spacing-lg);margin-top:var(--spacing-md);border-top:3px solid var(--chrome-bright);border-bottom:3px solid var(--chrome-bright);background:linear-gradient(135deg,rgba(0,188,212,.15) 0%,rgba(0,255,136,.1) 100%);border-radius:var(--radius-sm);box-shadow:0 4px 12px #00bcd44d,inset 0 1px #ffffff1a;position:relative;animation:pulse-glow 2s ease-in-out infinite}@keyframes pulse-glow{0%,to{box-shadow:0 4px 12px #00bcd44d,inset 0 1px #ffffff1a}50%{box-shadow:0 4px 20px #00bcd480,inset 0 1px #fff3}}.breakdown-total .breakdown-label{color:var(--electric-cyan);text-transform:uppercase;letter-spacing:.05em;font-size:1rem}.breakdown-total .breakdown-value{color:var(--chrome-bright);font-size:1.8rem;text-shadow:0 0 10px rgba(0,255,136,.5)}.arguments-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)}.argument-card{background:var(--carbon-dark);border-radius:var(--radius-md);padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-sm)}.argument-title{font-weight:600;display:flex;align-items:center;gap:var(--spacing-sm)}.argument-rating{display:flex;gap:2px}.rating-dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--carbon-light)}.rating-dot.filled.electric{background:var(--electric-blue)}.rating-dot.filled.thermal{background:var(--thermal-orange)}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:var(--carbon-light);border-radius:3px;outline:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:var(--gradient-electric);border-radius:var(--radius-full);cursor:pointer;box-shadow:var(--shadow-glow-blue)}.slider::-moz-range-thumb{width:20px;height:20px;background:var(--gradient-electric);border-radius:var(--radius-full);cursor:pointer;border:none}@media (max-width: 1024px){.grid-3{grid-template-columns:repeat(2,1fr)}.comparison-grid{grid-template-columns:1fr}}@media (max-width: 768px){.grid-2,.grid-3,.arguments-grid{grid-template-columns:1fr}h1{font-size:1.75rem}.result-savings{font-size:2.5rem}html,body{overflow-x:hidden;max-width:100vw}.container{padding-left:var(--spacing-sm);padding-right:var(--spacing-sm);max-width:100%}.card{padding:var(--spacing-sm);max-width:100%;overflow-x:hidden;overflow-y:visible;word-wrap:break-word}.card-title{font-size:1rem;flex-wrap:wrap}.result-hero{padding:var(--spacing-md)}.form-suffix{flex-wrap:wrap}.form-input,.form-select{min-width:0;width:100%;max-width:100%;font-size:16px}.form-group{max-width:100%}.form-label{font-size:.8rem;word-wrap:break-word}.toggle-group,[style*="display: flex"],[style*="display:flex"]{flex-wrap:wrap}}.nav-text-short{display:none}@media (max-width: 480px){.nav-text-full{display:none}.nav-text-short{display:inline}:root{--spacing-xl: 1rem;--spacing-2xl: 1.5rem;--spacing-lg: .75rem}h1{font-size:1.3rem}.logo-text{font-size:1rem}.result-savings{font-size:1.5rem}.result-hero{padding:var(--spacing-sm)}.card{padding:var(--spacing-xs);border-radius:var(--radius-md)}.breakdown-item{flex-direction:column;align-items:flex-start;gap:var(--spacing-xs);padding:var(--spacing-xs) 0}.breakdown-value{align-self:flex-end}.breakdown-label{font-size:.8rem}.comparison-grid .card{border-left:3px solid var(--electric-blue)!important;border-right:none!important}.form-label,.suffix{font-size:.75rem}}.tco-sticky-box{position:sticky;bottom:0;margin-top:1.5rem;padding:.5rem 1rem;border-radius:var(--radius-md);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:10;display:flex;align-items:center;justify-content:center;gap:.5rem}@media (max-width: 768px){.tco-sticky-box{display:none}}.mobile-tco-bar{display:none}@media (max-width: 768px){.mobile-tco-bar{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--carbon-dark);border-top:1px solid var(--glass-border);padding:.5rem;z-index:1000;gap:.5rem;justify-content:space-around;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.mobile-tco-bar .tco-item{display:flex;flex-direction:column;align-items:center;gap:.15rem;flex:1;padding:.25rem;border-radius:var(--radius-sm)}.mobile-tco-bar .tco-item.electric{background:rgba(0,212,255,.1);border:1px solid var(--electric-blue)}.mobile-tco-bar .tco-item.thermal{background:rgba(255,107,53,.1);border:1px solid var(--thermal-orange)}.mobile-tco-bar .tco-item.hybrid{background:rgba(255,171,0,.1);border:1px solid var(--warning-amber)}.mobile-tco-bar .tco-label{font-size:.65rem;color:var(--chrome-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.mobile-tco-bar .tco-label:before{content:"💰 "}.mobile-tco-bar .tco-value{font-size:1rem;font-weight:700}.mobile-tco-bar .tco-value:before{content:"TCO: ";font-size:.7rem;font-weight:500;opacity:.8}.mobile-tco-bar .tco-item.electric .tco-value{color:var(--electric-blue)}.mobile-tco-bar .tco-item.thermal .tco-value{color:var(--thermal-orange)}.mobile-tco-bar .tco-item.hybrid .tco-value{color:var(--warning-amber)}.mobile-tco-bar .tco-duration{font-size:.65rem;color:var(--warning-amber);font-weight:600}.mobile-tco-bar .tco-projected-label{font-size:.6rem;color:var(--chrome-dim);font-weight:500;margin-top:.15rem;padding-top:.15rem;border-top:1px solid var(--glass-border)}.mobile-tco-bar .tco-projected-value{font-size:.85rem;color:var(--electric-blue);font-weight:700}.main{padding-bottom:5rem}}@keyframes pulse-glow{0%,to{box-shadow:0 0 20px var(--electric-blue-glow)}50%{box-shadow:0 0 40px var(--electric-blue-glow)}}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-slide-up{animation:slide-up .5s ease forwards}.animate-pulse{animation:pulse-glow 2s infinite}.loading{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);padding:var(--spacing-2xl);color:var(--chrome-dim)}.spinner{width:24px;height:24px;border:3px solid var(--carbon-light);border-top-color:var(--electric-blue);border-radius:var(--radius-full);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;animation:fadeIn .3s forwards}.modal-content{background:var(--carbon-mid);border:1px solid var(--glass-border);border-radius:var(--radius-lg);width:95%;max-width:1000px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);transform:translateY(20px);opacity:0;animation:slideUpFade .3s .1s forwards}.modal-header{padding:var(--spacing-lg);border-bottom:1px solid var(--glass-border);display:flex;justify-content:space-between;align-items:center}.modal-title{font-size:1.25rem;font-weight:600;color:var(--chrome-bright)}.modal-close{background:transparent;border:none;color:var(--chrome-dim);font-size:1.5rem;cursor:pointer;padding:var(--spacing-xs);line-height:1;transition:color var(--transition-fast)}.modal-close:hover{color:var(--chrome-bright)}.modal-body{padding:var(--spacing-lg);color:var(--chrome-dim);line-height:1.6}.modal-apply-btn{width:100%;margin-top:1.5rem;padding:.875rem 1.5rem;font-size:1rem;font-weight:600;font-family:var(--font-primary);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);display:inline-flex;align-items:center;justify-content:center;gap:.5rem}.modal-apply-btn:hover{transform:translateY(-2px);filter:brightness(1.1);box-shadow:0 4px 20px #0000004d}.modal-apply-btn:active{transform:translateY(0)}.modal-close-btn{width:100%;margin-top:.5rem;padding:.75rem 1.5rem;font-size:.9rem;font-weight:500;font-family:var(--font-primary);background:transparent;border:1px solid var(--glass-border);border-radius:var(--radius-md);color:var(--chrome-dim);cursor:pointer;transition:all var(--transition-normal);display:inline-flex;align-items:center;justify-content:center}.modal-close-btn:hover{background:var(--carbon-light);color:var(--chrome-bright);border-color:var(--chrome-dim)}@keyframes fadeIn{to{opacity:1}}@keyframes slideUpFade{to{opacity:1;transform:translateY(0)}}.info-btn{background:transparent;border:none;color:var(--chrome-dim);margin-left:var(--spacing-sm);cursor:pointer;font-size:1rem;transition:color var(--transition-fast);padding:0;display:inline-flex;align-items:center;justify-content:center}.info-btn:hover{color:var(--electric-blue);transform:scale(1.1)}.configurable-btn{color:var(--warning-amber)!important}.configurable-btn:hover{color:var(--electric-cyan)!important}.glossary-container{width:100%;max-width:100%}.glossary-container .card{width:100%}.glossary-content{word-break:break-word;overflow-wrap:break-word}.glossary-content a{word-break:break-all}@keyframes highlight-pulse-anim{0%,to{box-shadow:0 0 5px #ffab004d;border-color:var(--warning-amber)}50%{box-shadow:0 0 20px #ffab0099,0 0 30px #ffab0066;border-color:var(--warning-amber)}}.highlight-pulse{animation:highlight-pulse-anim 1s ease-in-out infinite;border-radius:var(--radius-sm)}.input-highlight-pulse{animation:highlight-pulse-anim 1s ease-in-out infinite;border:2px solid var(--warning-amber)!important}