html,body{width:100%;min-height:100vh;margin:0;padding:0}#app{width:100%;min-height:100vh}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);min-height:100vh}.app-container{min-height:100vh;padding:20px;display:flex;align-items:stretch;justify-content:center}.bg-animation{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}.bubble{position:absolute;border-radius:50%;background:linear-gradient(135deg,#2ed57314,#ffc10714);animation:float 20s infinite}.bubble:nth-child(1){width:100px;height:100px;left:10%;animation-delay:0s}.bubble:nth-child(2){width:150px;height:150px;left:50%;animation-delay:5s}.bubble:nth-child(3){width:80px;height:80px;left:80%;animation-delay:10s}@keyframes float{0%,to{transform:translateY(100vh);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(-100vh);opacity:0}}.calculator-card{position:relative;z-index:1;width:100%;max-width:1400px;background:#fffffff7;border-radius:20px;box-shadow:0 20px 40px #0000004d;overflow:hidden;display:flex;flex-direction:column}.header{background:linear-gradient(135deg,#2ed573,#1e90ff);padding:15px 20px;display:flex;align-items:center;gap:15px;color:#fff}.logo-icon{font-size:2rem;background:#fff3;padding:10px;border-radius:12px}.header-text h1{font-size:1.4rem;font-weight:700}.header-text p{font-size:.85rem;opacity:.9}.main-content{display:grid;grid-template-columns:1fr 1.2fr;gap:30px;padding:30px;flex:1;align-content:center}.left-column{display:flex;flex-direction:column;gap:20px;justify-content:center}.section-label{font-size:1rem;font-weight:600;color:#555;margin-bottom:10px;display:block}.region-section{background:#f8f9fa;padding:15px;border-radius:14px}.region-chips{display:flex;flex-wrap:wrap;gap:10px}.region-chip{padding:12px 20px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;font-size:1rem;font-weight:500;transition:all .2s}.region-chip:hover{border-color:#2ed573;transform:scale(1.02)}.region-chip.active{border-color:#2ed573;background:#2ed573;color:#fff}.prices-section{background:#f8f9fa;padding:15px;border-radius:14px}.prices-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.mode-toggle{padding:4px 10px;border:none;border-radius:15px;background:#e0e0e0;cursor:pointer;font-size:.9rem}.prices-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.price-input{display:flex;flex-direction:column;gap:4px}.price-label{font-size:.9rem;color:#666}.input-wrapper{display:flex;align-items:center;background:#fff;border:2px solid #e0e0e0;border-radius:10px;overflow:hidden}.currency{padding:12px;background:#f0f0f0;color:#666;font-size:1.1rem;font-weight:600}.input-wrapper input{flex:1;padding:12px;border:none;font-size:1.2rem;width:100%}.input-wrapper input:focus{outline:none}.input-wrapper input:disabled{background:#fafafa}.consumption-section{background:#f8f9fa;padding:10px 12px;border-radius:12px}.consumption-section summary{font-size:.8rem;color:#666;cursor:pointer;-webkit-user-select:none;user-select:none}.consumption-section summary::-webkit-details-marker{display:none}.consumption-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.mini-input{display:flex;flex-direction:column;gap:4px}.mini-input label{font-size:.75rem;color:#888}.mini-input input{padding:6px 8px;border:1px solid #ddd;border-radius:6px;font-size:.9rem}.right-column{display:flex;flex-direction:column;gap:15px;justify-content:center}.right-column.placeholder{justify-content:center;align-items:center}.placeholder-content{text-align:center;color:#999}.placeholder-icon{font-size:3rem;display:block;margin-bottom:10px}.ratio-section{background:#f8f9fa;padding:20px;border-radius:14px}.ratio-bar{height:32px;background:linear-gradient(90deg,#d4edda 0% 70%,#fff3cd 70% 100%);border-radius:16px;position:relative;overflow:hidden}.ratio-fill{height:100%;border-radius:12px;transition:width .5s ease-out}.ratio-fill.etanol{background:linear-gradient(90deg,#2ed573,#26de81)}.ratio-fill.gasolina{background:linear-gradient(90deg,#ffc107,#ff9800)}.ratio-marker{position:absolute;left:70%;top:0;height:100%;width:3px;background:#e74c3c;transform:translate(-50%)}.ratio-labels{display:flex;justify-content:space-between;font-size:.7rem;color:#888;margin-top:4px}.marker-text{color:#e74c3c;font-weight:700}.ratio-value{text-align:center;font-size:2.5rem;font-weight:700;color:#333;margin-top:8px}.result-card{display:flex;align-items:center;gap:15px;padding:20px;border-radius:14px}.result-card.etanol{background:linear-gradient(135deg,#2ed573,#26de81);color:#fff}.result-card.gasolina{background:linear-gradient(135deg,#ffc107,#ff9800);color:#333}.result-emoji{font-size:3.5rem}.result-content{display:flex;flex-direction:column}.result-content strong{font-size:1.8rem}.result-hint{font-size:1rem;opacity:.9}.economy-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.economy-card{padding:15px;border-radius:12px;text-align:center}.economy-card.gas{background:#fff3cd}.economy-card.eth{background:#d4edda}.eco-label{display:block;font-size:.9rem;margin-bottom:5px}.eco-value{font-size:1.5rem;font-weight:700}.economy-card.gas .eco-value{color:#856404}.economy-card.eth .eco-value{color:#155724}.savings-text{text-align:center;font-size:1rem;color:#555;padding:12px;background:#f0f0f0;border-radius:10px}.savings-text strong{color:#2ed573}.footer{padding:10px 20px;background:#f8f9fa;text-align:center}.info-tip{font-size:.8rem;color:#888}@media(max-width:700px){.main-content{grid-template-columns:1fr}.header{flex-direction:column;text-align:center}.region-chips{justify-content:center}}