:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-card: rgba(30, 30, 45, .6);--glass-border: rgba(255, 255, 255, .08);--primary: #00D9A0;--primary-glow: rgba(0, 217, 160, .3);--accent: #00D9A0;--text-main: #ffffff;--text-muted: #a0a0b0;--gradient-main: linear-gradient(135deg, #00D9A0 0%, #00C08E 100%);--radius-lg: 16px;--radius-md: 12px}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-primary);color:var(--text-main);background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.03) 1px,transparent 0);background-size:40px 40px;background-position:0 0;min-height:100vh}*{box-sizing:border-box}.glass{background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);box-shadow:0 8px 32px #0003}.text-gradient{background:var(--gradient-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.app-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:2rem}.app-container.embedded{min-height:0;align-items:flex-start;padding:0}.dashboard{width:100%;max-width:1200px;border-radius:var(--radius-lg);padding:3rem;color:var(--text-main);background:radial-gradient(circle at top right,rgba(255,255,255,.03),transparent)}.header-centered{text-align:center;margin-bottom:4rem;position:relative}.header-centered:before{content:"";position:absolute;top:-20px;left:50%;transform:translate(-50%);width:400px;height:120px;background-image:linear-gradient(90deg,rgba(0,217,160,.1) 1px,transparent 1px),linear-gradient(rgba(0,217,160,.1) 1px,transparent 1px);background-size:20px 20px;opacity:.3;pointer-events:none;z-index:0}.header-centered .badge{display:inline-block;background:linear-gradient(135deg,#00d9a026,#6366f126);padding:6px 16px;border-radius:20px;font-size:.75rem;letter-spacing:1.5px;text-transform:uppercase;border:2px solid transparent;background-clip:padding-box;margin-bottom:1.5rem;position:relative;z-index:1}.header-centered .badge:before{content:"";position:absolute;inset:0;border-radius:20px;padding:2px;background:linear-gradient(135deg,#00d9a0,#6366f1,#00d9a0);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:gradientRotate 3s linear infinite;background-size:200% 200%}@keyframes gradientRotate{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.title-section{display:flex;align-items:center;justify-content:center;gap:1rem}.title-section h1{font-size:2.5rem;font-weight:700;letter-spacing:-.02em;margin:0;background:linear-gradient(135deg,#00d9a0,#6366f1,#00d9a0);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 3s ease-in-out infinite;text-shadow:0 0 30px rgba(0,217,160,.5),0 0 60px rgba(99,102,241,.3);filter:drop-shadow(0 0 20px rgba(0,217,160,.4));position:relative;z-index:1}@keyframes shimmer{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.icon-box{background:linear-gradient(135deg,var(--primary),#6366f1);padding:12px;border-radius:12px;display:flex;box-shadow:0 0 30px var(--primary-glow),0 0 60px #6366f14d;animation:pulse 2s ease-in-out infinite;position:relative;z-index:1}@keyframes pulse{0%,to{box-shadow:0 0 30px var(--primary-glow),0 0 60px #6366f14d;transform:scale(1)}50%{box-shadow:0 0 40px var(--primary-glow),0 0 80px #6366f180;transform:scale(1.05)}}.main-content{display:flex;flex-direction:column;gap:2rem}.row-split{display:grid;grid-template-columns:1fr 1fr;gap:2rem}@media(max-width:768px){.row-split{grid-template-columns:1fr}}.row-full{width:100%}.panel{background:#ffffff05;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);padding:2rem}.panel h2{font-size:1.3rem;color:var(--text-main);font-weight:600;margin:0 0 1.5rem;letter-spacing:-.01em}.volume-panel,.comparison-panel{height:100%}.inputs-container{display:flex;flex-direction:column;gap:1.5rem}.input-group{margin-bottom:0}.label-row{display:flex;justify-content:space-between;margin-bottom:.8rem;align-items:center}.label-row label{font-size:.95rem;color:var(--text-main)}.value-input{background:#6366f126;border:1px solid rgba(99,102,241,.3);color:#818cf8;padding:4px 12px;border-radius:6px;font-weight:600;font-size:.9rem;width:80px;text-align:center;outline:none;transition:all .2s}.value-input:focus{background:#6366f140;border-color:#6366f180;box-shadow:0 0 0 2px #6366f11a}.value-input::-webkit-inner-spin-button,.value-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.value-input[type=number]{-moz-appearance:textfield;appearance:textfield}.slider{width:100%;-webkit-appearance:none;appearance:none;background:#ffffff1a;height:6px;border-radius:4px;outline:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:var(--accent);border-radius:50%;cursor:pointer;box-shadow:0 0 12px #00d9a099;transition:transform .1s}.slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.slider::-moz-range-thumb{width:20px;height:20px;background:var(--accent);border-radius:50%;cursor:pointer;box-shadow:0 0 12px #00d9a099;border:none}.comparison-card{height:100%;display:flex;flex-direction:column}.comparison-card h3{margin:0 0 2rem;color:var(--text-main);font-size:1.3rem;font-weight:600;letter-spacing:-.01em}.comparison-grid{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex:1}.comparison-item{flex:1;text-align:center;padding:1.5rem;border-radius:16px;background:transparent;border:1px solid rgba(255,255,255,.1);transition:all .3s ease}.comparison-item:hover{border-color:#fff3;background:#ffffff05}.comparison-label{display:block;font-size:.85rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:1rem}.comparison-value{font-size:2rem;font-weight:800;letter-spacing:-.02em}.comparison-value.old{color:#94a3b8}.comparison-value.ai{color:var(--accent);text-shadow:0 0 20px rgba(0,217,160,.4)}.comparison-divider{display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:1rem;font-weight:600}.savings-card-full{padding:3rem;border-radius:var(--radius-md);background:linear-gradient(135deg,#00d9a014,#00c08e14);border:1px solid rgba(0,217,160,.15)}.savings-header{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:2rem}.savings-header h2{margin:0;font-size:2rem;font-weight:700;color:var(--text-main)}.savings-icon{color:var(--accent)}.savings-content{display:flex;align-items:center;justify-content:center;gap:3rem;margin-bottom:2rem}.savings-box{text-align:center}.savings-period{display:block;font-size:.85rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:.8rem}.savings-amount{font-size:3.5rem;font-weight:800;color:#fff;letter-spacing:-.02em;text-shadow:0 0 30px rgba(0,217,160,.5)}.savings-amount.highlight{color:var(--accent);text-shadow:0 0 40px rgba(0,217,160,.6)}.savings-separator{display:flex;align-items:center}.separator-line{width:2px;height:80px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.2),transparent)}.savings-badge{text-align:center}.percentage-badge{display:inline-block;background:#10b981;color:#064e3b;font-weight:700;padding:8px 20px;border-radius:24px;font-size:1.1rem;box-shadow:0 4px 12px #10b9814d}.settings-panel{padding:0;overflow:hidden;background:#ffffff05;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);transition:all .3s ease}.settings-header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:2rem;background:transparent;border:none;color:var(--text-main);cursor:pointer;transition:background .2s}.settings-header:hover{background:#ffffff05}.settings-title{display:flex;align-items:center;gap:.8rem}.settings-title h3{margin:0;font-size:1.3rem;font-weight:600}.settings-content{padding:0 2rem 2rem}.method-selector{margin-bottom:2rem}.settings-label{display:block;font-size:.9rem;color:var(--text-muted);margin-bottom:1rem;text-transform:uppercase;letter-spacing:1px}.pill-group{display:flex;gap:.8rem;flex-wrap:wrap}.pill-group button{background:transparent;border:1px solid rgba(255,255,255,.2);padding:10px 20px;border-radius:24px;color:var(--text-muted);cursor:pointer;transition:all .2s;font-size:.95rem}.pill-group button:hover{border-color:var(--primary);color:#fff}.pill-group button.active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 0 15px var(--primary-glow)}.rate-editor{background:#0000004d;padding:1.5rem;border-radius:12px}.rate-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}.rate-row{display:flex;flex-direction:column;gap:.5rem}.rate-row label{font-size:.9rem;color:var(--text-main)}.rate-row input{width:100%;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#fff;padding:10px 12px;border-radius:8px;font-size:1rem;outline:none;transition:all .2s}.rate-row input:focus{background:#ffffff14;border-color:var(--primary);box-shadow:0 0 0 2px #6366f11a}@media(max-width:768px){.dashboard{padding:2rem}.title-section h1{font-size:1.8rem}.savings-content{flex-direction:column;gap:2rem}.separator-line{width:80px;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent)}.savings-amount{font-size:2.5rem}.comparison-grid{flex-direction:column;gap:1rem}.comparison-divider{transform:rotate(90deg)}.rate-grid{grid-template-columns:1fr}}