:root{--primary: #00f2fe;--secondary: #4facfe;--accent: #f093fb;--danger: #ff4b2b;--bg-dark: #0f172a;--glass: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--text: #f8fafc;--text-muted: #94a3b8;--transition: all .3s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Outfit,sans-serif;background:radial-gradient(circle at top left,#1e293b,#0f172a);color:var(--text);min-height:100vh;display:flex;justify-content:center;align-items:center;overflow-x:hidden}.background-overlay{display:none}.container{width:100%;max-width:600px;padding:20px;animation:fadeIn .8s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.header{text-align:center;margin-bottom:30px}.title{font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 10px 20px rgba(0,0,0,.3)}.subtitle{color:var(--text-muted);font-weight:300;margin-top:5px}.glass{background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:24px;box-shadow:0 25px 50px -12px #00000080}.card{padding:30px;display:flex;flex-direction:column;gap:25px}.input-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.input-group{display:flex;flex-direction:column;gap:8px;position:relative}.input-group label{font-size:.85rem;font-weight:600;color:var(--text-muted);padding-left:5px}.input-group input{background:#ffffff0d;border:1px solid var(--glass-border);border-radius:12px;padding:12px 45px 12px 15px;color:#fff;font-size:1.1rem;font-family:inherit;transition:var(--transition);width:100%}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--secondary));border:none;border-radius:12px;padding:15px;color:var(--bg-dark);font-size:1.1rem;font-weight:700;cursor:pointer;transition:var(--transition);box-shadow:0 10px 20px #00f2fe33}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 15px 30px #00f2fe4d}.btn-primary:active{transform:translateY(0)}.input-group input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 15px #00f2fe4d;background:#ffffff14}.unit{position:absolute;right:12px;bottom:12px;color:var(--text-muted);font-size:.8rem;pointer-events:none}.visual-tank-container{padding:15px;background:#0003;border-radius:16px;display:flex;flex-direction:column;gap:10px}.tank-label{font-size:.8rem;font-weight:600;display:flex;justify-content:space-between}.tank-progress-bar{height:12px;background:#ffffff1a;border-radius:6px;overflow:hidden;position:relative}.tank-fill{height:100%;background:linear-gradient(90deg,var(--secondary),var(--primary));border-radius:6px;transition:width .6s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 0 20px #00f2fe80}.results{display:grid;grid-template-columns:1fr;gap:15px}.result-card{background:#0003;padding:20px;border-radius:16px;display:flex;justify-content:space-between;align-items:center;transition:var(--transition)}.result-card:hover{background:#ffffff08;transform:scale(1.02)}.result-label{font-size:.9rem;color:var(--text-muted);font-weight:400}.result-value{font-size:1.5rem;font-weight:700;color:var(--text)}.result-value small{font-size:.9rem;font-weight:400;color:var(--text-muted);margin-left:2px}.result-card.highlight{background:linear-gradient(135deg,#4facfe1a,#00f2fe1a);border:1px solid var(--glass-border)}.result-card.highlight .result-value{color:var(--primary)}.card-footer{text-align:center;padding-top:10px}.card-footer p{font-size:.75rem;color:var(--text-muted)}.tank-fill.blink{animation:blinker 1s linear infinite}@keyframes blinker{50%{opacity:.5}}@media (max-width: 480px){.container{padding:15px}.title{font-size:2rem}.input-grid{grid-template-columns:1fr}}