:root{--bg-color:transparent;--card-bg:#fff;--card-border:#e2e8f0;--text-primary:#0f172a;--text-secondary:#64748b;--accent-blue:#3b82f6;--accent-purple:#8b5cf6;--accent-gradient:linear-gradient(135deg,var(--accent-blue),var(--accent-purple));--surface-hover:#f8fafc;--radius-xl:24px;--radius-lg:16px;--radius-md:10px;--transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}*{box-sizing:border-box;margin:0;padding:0}body{align-items:center;background:transparent;color:var(--text-primary);display:flex;font-family:Outfit,-apple-system,sans-serif;justify-content:center;min-height:100vh;padding:2rem}.app-container{display:flex;flex-direction:column;gap:2.5rem;margin:0 auto;max-width:1100px;width:100%}header{text-align:center}header h1{font-size:2.5rem;font-weight:700;letter-spacing:-.5px;margin-bottom:.5rem}header p{color:var(--text-secondary);font-size:1.1rem}.text-gradient{background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.glass-panel{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);box-shadow:0 10px 25px rgba(0,0,0,.05)}.dashboard{align-items:start;display:grid;gap:2rem;grid-template-columns:350px 1fr}.controls-panel{padding:2rem}.controls-panel h2{font-size:1.25rem;font-weight:600;margin-bottom:2rem}.input-group{margin-bottom:2rem}.input-group label{color:var(--text-secondary);display:block;font-size:.95rem;font-weight:500;margin-bottom:.75rem}.input-wrapper{align-items:center;display:flex;position:relative}.input-wrapper input{background:#f1f5f9;border:1px solid var(--card-border);border-radius:var(--radius-md);color:var(--text-primary);font-family:inherit;font-size:1.1rem;padding:1rem 1rem 1rem 1.25rem;transition:var(--transition);width:100%}.input-wrapper input:focus{background:#fff;border-color:var(--accent-blue);box-shadow:0 0 0 3px rgba(59,130,246,.15);outline:none}.input-wrapper .currency{color:var(--text-secondary);font-size:1.1rem;pointer-events:none;position:absolute;right:1.25rem}.toggle-label{align-items:center;cursor:pointer;display:flex!important;justify-content:space-between;margin-bottom:0!important}.toggle-text{display:flex;flex-direction:column}.main-label{color:var(--text-primary);font-weight:500}.sub-label{color:var(--text-secondary);font-size:.8rem;margin-top:.25rem}.toggle-switch{height:28px;position:relative;width:52px}.toggle-switch input{height:0;opacity:0;width:0}.slider.round{background-color:#cbd5e1;border:1px solid transparent;border-radius:34px;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.4s}.slider.round:before{background-color:#fff;border-radius:50%;bottom:4px;box-shadow:0 2px 4px rgba(0,0,0,.1);content:"";height:20px;left:3px;position:absolute;transition:.4s;width:20px}input:checked+.slider.round{background:var(--accent-gradient);border-color:transparent}input:checked+.slider.round:before{transform:translateX(24px)}.highlight-text{background:#f1f5f9;border:1px solid var(--card-border);border-radius:6px;color:var(--text-primary);font-weight:600;padding:.2rem .6rem}.range-slider{-webkit-appearance:none;background:#e2e8f0;border-radius:6px;height:8px;margin:1rem 0;outline:none;width:100%}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;border:2px solid var(--accent-blue);border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.1);cursor:pointer;height:20px;transition:transform .1s;width:20px}.range-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.range-labels{color:var(--text-secondary);display:flex;font-size:.8rem;justify-content:space-between}.usage-breakdown{display:flex;gap:1rem;margin-top:1rem}.usage-pill{background:#f8fafc;border:1px solid var(--card-border);border-radius:var(--radius-md);color:var(--text-primary);display:flex;flex:1;font-size:.85rem;font-weight:500;justify-content:space-between;padding:.6rem 1rem}.usage-pill.perso{background:#faf5ff;border-color:#e9d5ff;color:var(--accent-purple)}.cards-wrapper{display:grid;gap:1.5rem;grid-template-columns:1fr 1fr;margin-bottom:1.5rem}.result-card{overflow:hidden;padding:2rem;position:relative;transition:var(--transition)}.result-card:hover{background:var(--surface-hover);box-shadow:0 15px 35px rgba(0,0,0,.08);transform:translateY(-4px)}.highlight-border{border:2px solid rgba(59,130,246,.3)}.card-glow{background:radial-gradient(400px circle at top right,rgba(59,130,246,.04),transparent 60%);bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.card-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:2rem}.card-header h3{font-size:1.25rem;font-weight:600}.badge{background:#f1f5f9;border:1px solid var(--card-border);border-radius:20px;color:var(--text-secondary);font-size:.75rem;font-weight:600;letter-spacing:.5px;padding:.3rem .8rem;text-transform:uppercase}.badge.premium{background:var(--accent-gradient);border:none;color:#fff}.data-row{align-items:center;display:flex;justify-content:space-between;margin-bottom:1.25rem}.data-row:last-child{margin-bottom:0}.data-label{color:var(--text-secondary);font-size:.95rem}.light-text{font-size:.8rem;opacity:.8}.amount{font-size:1.1rem;font-weight:600;white-space:nowrap}.main-data{margin-bottom:2rem}.main-data .amount{font-size:1.8rem;font-weight:700;letter-spacing:-.5px}.sub-amount{font-size:1.1rem}.divider{background:var(--card-border);height:1px;margin:1.5rem 0}.savings-panel{align-items:center;background:#faf5ff;border:1px solid #c4b5fd;display:flex;justify-content:space-between;overflow:hidden;padding:2rem 3rem;position:relative}.savings-panel:before{background:linear-gradient(90deg,rgba(59,130,246,.02),rgba(139,92,246,.08));bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.savings-content h3{color:var(--text-primary);font-size:1.5rem;margin-bottom:.5rem}.savings-content p{color:var(--text-secondary);font-size:1rem}.savings-amount{align-items:baseline;display:flex;gap:.5rem;text-align:right}.huge-amount{color:#16a34a;font-size:3rem;font-weight:800;letter-spacing:-1px;text-shadow:0 4px 10px rgba(22,163,74,.15);white-space:nowrap}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.dashboard>*{animation:fadeIn .6s ease-out forwards}.dashboard>:nth-child(2){animation-delay:.1s}@media (max-width:900px){.cards-wrapper,.dashboard{grid-template-columns:1fr}.savings-panel{flex-direction:column;gap:1.5rem;text-align:center}}