:root{--primary:#1565c0;--primary-dark:#0d47a1;--primary-light:#1976d2;--teal:#00897b;--teal-dark:#00695c;--green:#2e7d32;--amber:#f57c00;--amber-light:#fef3c7;--amber-dark:#92400e;--charcoal:#1a1a2e;--surface:#f5f7fa;--card:#fff;--border:#e2e8f0;--text:#1a1a2e;--text-muted:#64748b;--grad:linear-gradient(135deg, var(--primary) 0%, var(--teal) 100%);--font:"Inter", "DM Sans", system-ui, sans-serif;--radius-card:12px;--radius-btn:8px;--shadow-card:0 4px 12px #1565c01a;--shadow-hover:0 8px 24px #1565c02e}*{box-sizing:border-box}body{font-family:var(--font);color:var(--text);margin:0}.app{background:var(--surface);flex-direction:column;min-height:100vh;display:flex}.app-header{background:var(--grad);justify-content:space-between;align-items:center;gap:1rem;height:68px;padding:0 2rem;display:flex}.app-logo{flex-shrink:0;width:auto;height:46px}.nav-tabs{border-radius:var(--radius-btn);background:#ffffff26;gap:4px;padding:4px;display:flex}.nav-tab{color:#ffffffd9;cursor:pointer;font-size:.9rem;font-weight:600;font-family:var(--font);white-space:nowrap;background:0 0;border:none;border-radius:6px;padding:.45rem 1.1rem;transition:all .2s}.nav-tab:hover:not(.active){color:#fff;background:#fff3}.nav-tab.active{color:var(--primary);background:#fff}.app-nav{flex-shrink:0;align-items:center;gap:.75rem;display:flex}.nav-btn{color:var(--primary);border-radius:var(--radius-btn);cursor:pointer;font-size:.95rem;font-weight:600;font-family:var(--font);background:#fff;border:none;padding:.6rem 1.2rem;transition:all .2s;box-shadow:0 2px 8px #0000001f}.nav-btn:hover{background:#f0f4ff;transform:translateY(-1px);box-shadow:0 4px 12px #00000029}.nav-btn.nav-logout{color:#fff;background:#ffffff2e}.nav-btn.nav-logout:hover{background:#ffffff47}.app-main{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:2rem}.search-section{background:var(--card);border-radius:var(--radius-card);box-shadow:var(--shadow-card);border:1px solid var(--border);margin-bottom:2rem;padding:1.5rem}.search-section label{color:var(--charcoal);margin-bottom:.5rem;font-weight:600;display:block}.city-select{border:2px solid var(--border);border-radius:var(--radius-btn);width:100%;color:var(--text);cursor:pointer;font-size:1rem;font-family:var(--font);background-color:#fff;padding:.75rem;transition:all .2s}.city-select:hover,.city-select:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #1565c01a}.city-select:disabled{opacity:.6;cursor:not-allowed}.location-form{align-items:flex-end;gap:.5rem;display:flex}.form-group{flex-direction:column;flex:1;width:100%;min-width:0;display:flex;position:relative}.form-group label{color:var(--charcoal);margin-bottom:.5rem;font-weight:600;display:block}.location-input{border:2px solid var(--border);border-radius:var(--radius-btn);width:100%;font-size:1rem;font-family:var(--font);color:var(--text);padding:.75rem;transition:all .2s}.location-input:hover{border-color:var(--primary-light)}.location-input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #1565c01a}.location-info{border-left:4px solid var(--primary);color:var(--charcoal);background:#eef4ff;border-radius:4px;margin-top:1rem;padding:1rem}.location-info p{margin:0;font-weight:500}.prices-section{background:var(--card);border-radius:var(--radius-card);box-shadow:var(--shadow-card);border:1px solid var(--border);margin-bottom:2rem;padding:2rem}.prices-section h2{color:var(--charcoal);margin-bottom:1rem;font-size:1.5rem}.fuel-types{grid-template-columns:repeat(5,1fr);gap:.75rem;display:grid}.fuel-type-btn{border:2px solid var(--border);border-radius:var(--radius-btn);cursor:pointer;min-width:0;font-family:var(--font);background:#fff;flex-direction:column;align-items:center;gap:.3rem;padding:.75rem .5rem;transition:all .2s;display:flex}.fuel-type-btn:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 12px #1565c026}.fuel-type-btn.active{background:var(--grad);color:#fff;border-color:#0000}.fuel-type-btn.unavailable{opacity:.45;cursor:not-allowed;background-color:var(--surface)}.fuel-name{white-space:nowrap;font-size:.8rem;font-weight:600}.fuel-price{font-size:1.1rem;font-weight:700}.fuel-type-btn.active .fuel-price{font-size:1.3rem}.stations-section{margin-bottom:2rem}.stations-section h2{color:var(--charcoal);margin-bottom:1.5rem;font-size:1.5rem}.stations-grid{grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:1.5rem;margin-bottom:2rem;display:grid}.station-card{background:var(--card);border-radius:var(--radius-card);box-shadow:var(--shadow-card);border:1px solid var(--border);transition:all .2s;overflow:hidden}.station-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-3px)}.station-header{background:var(--grad);color:#fff;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.25rem 1.5rem;display:flex}.station-header h3{flex:1;margin:0;font-size:1.05rem}.station-brand{white-space:nowrap;background:#ffffff40;border-radius:20px;padding:.35rem .75rem;font-size:.78rem;font-weight:600}.distance-badge{background:var(--amber-light);color:var(--amber-dark);text-align:center;border-left:4px solid var(--amber);border-radius:6px;margin:0 1.5rem 1rem;padding:.75rem 1rem;font-weight:600}.station-details{border-bottom:1px solid var(--border);color:var(--text-muted);padding:1rem;font-size:.92rem}.station-details p{margin:.75rem 0}.station-details p:first-child{margin-top:0}.station-details p:last-child{margin-bottom:0}.selected-fuel-price{background:var(--surface);border-top:1px solid var(--border);color:var(--primary);text-align:center;padding:1rem 1.5rem;font-weight:600}.price-display{flex-direction:column;align-items:center;display:flex}.current-price{color:var(--primary);flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;font-size:1.1rem;font-weight:600;line-height:1.4;display:flex;margin:0!important}.current-price strong{color:var(--teal);font-size:1.2rem;line-height:1.4}.price-range{color:var(--text-muted);white-space:nowrap;font-size:.75rem;font-weight:400}.selected-fuel-price p{margin:.5rem 0;font-size:.95rem}.selected-fuel-price p:first-child{margin-top:0;font-size:1.1rem}.full-tank-cost{color:var(--teal)!important;font-size:.9rem!important;font-weight:500!important}.drive-cost{color:var(--text-muted)!important;font-size:.85rem!important;font-weight:500!important}.error-message{color:#c53030;border-radius:var(--radius-btn);background:#fff5f5;border-left:4px solid #fc8181;margin-bottom:1.5rem;padding:1rem}.success-message{color:var(--green);border-radius:var(--radius-btn);background:#f0fff4;border-left:4px solid #68d391;margin-bottom:1.5rem;padding:1rem}.loading{background:var(--card);border-radius:var(--radius-card);text-align:center;color:var(--primary);border:1px solid var(--border);padding:2rem;font-size:1.1rem;font-weight:600}.no-results{background:var(--card);border-radius:var(--radius-card);text-align:center;color:var(--text-muted);border:1px solid var(--border);padding:2rem}.info{color:#fff;border-radius:var(--radius-btn);text-align:center;background:#ffffff1f;margin-top:2rem;padding:1.5rem}.info p{margin:0}.account-page{flex:1;width:100%;max-width:900px;margin:0 auto;padding:2rem}.auth-container{background:var(--card);border-radius:var(--radius-card);box-shadow:var(--shadow-card);border:1px solid var(--border);max-width:400px;margin:0 auto;padding:2rem}.auth-container h2{color:var(--charcoal);text-align:center;margin-bottom:1.5rem;font-size:1.8rem}.auth-container h3{color:var(--primary);margin-top:1.5rem;margin-bottom:.75rem;font-size:1.3rem}.auth-container ul{margin:1rem 0;padding-left:1.5rem}.auth-container li{margin:.5rem 0}.auth-form{flex-direction:column;gap:1.5rem;margin-bottom:1.5rem;display:flex}.auth-form button{background:var(--grad);color:#fff;border-radius:var(--radius-btn);cursor:pointer;font-size:1rem;font-weight:600;font-family:var(--font);border:none;padding:.75rem;transition:all .2s}.auth-form button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #1565c059}.auth-toggle{text-align:center;color:var(--text-muted);margin-top:1rem}.auth-toggle button{color:var(--primary);cursor:pointer;font-weight:600;font-family:var(--font);background:0 0;border:none;margin-left:.25rem;padding:0;text-decoration:underline}.auth-toggle button:hover{color:var(--teal)}.profile-container{background:var(--card);border-radius:var(--radius-card);box-shadow:var(--shadow-card);border:1px solid var(--border);padding:2rem}.profile-container h2{color:var(--charcoal);margin-bottom:1.5rem;font-size:1.8rem}.preferences-section h3{color:var(--charcoal);border-bottom:2px solid var(--border);margin-bottom:1.5rem;padding-bottom:1rem;font-size:1.3rem}.account-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-bottom:2rem;display:grid}.account-col{flex-direction:column;gap:1rem;display:flex}.account-col label{color:var(--charcoal);margin-top:.5rem;font-weight:600}.account-col input,.account-col select{border:2px solid var(--border);border-radius:var(--radius-btn);font-size:1rem;font-family:var(--font);color:var(--text);padding:.75rem;transition:all .2s}.account-col input:focus,.account-col select:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #1565c01a}.btn-row{flex-wrap:wrap;gap:.5rem;display:flex}.btn-row button{background:var(--primary);color:#fff;border-radius:var(--radius-btn);cursor:pointer;min-width:100px;font-size:.9rem;font-weight:600;font-family:var(--font);border:none;flex:1;padding:.6rem 1rem;transition:all .2s}.btn-row button:hover{background:var(--teal);transform:translateY(-1px)}.account-actions{gap:1rem;margin-top:2rem;display:flex}.account-actions button{background:var(--grad);color:#fff;border-radius:var(--radius-btn);cursor:pointer;font-size:1rem;font-weight:600;font-family:var(--font);border:none;flex:1;padding:.75rem 1.5rem;transition:all .2s}.account-actions button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #1565c059}.distant-stations{margin-top:3rem}.distant-stations h2{opacity:.7;font-size:1.5rem}.station-card.distant{opacity:.55}.station-card.distant:hover{opacity:.75}.suggestions-dropdown{background:var(--card);border:2px solid var(--primary);border-radius:0 0 var(--radius-btn) var(--radius-btn);z-index:10000;border-top:none;max-height:300px;margin-top:-2px;position:absolute;top:100%;left:0;right:0;overflow-y:auto;box-shadow:0 8px 20px #1565c026}.suggestion-item{text-align:left;background:var(--card);cursor:pointer;width:100%;color:var(--text);font-size:.95rem;font-family:var(--font);border:none;flex-direction:row;align-items:center;gap:.5rem;padding:.75rem 1rem;transition:background-color .15s;display:flex}.suggestion-item:hover,.suggestion-item--selected{color:var(--primary);background-color:#eef4ff}.suggestion-item:active{background-color:var(--surface)}.suggestion-secondary{color:var(--text-muted);flex-shrink:0;margin-left:auto;font-size:.8rem;font-weight:400}@media (width<=768px){.app-header{flex-wrap:wrap;gap:.75rem;height:auto;padding:.75rem 1rem}.app-logo{height:36px}.nav-tabs{order:3;justify-content:center;width:100%}.app-nav{order:2}.nav-btn{padding:.5rem .9rem;font-size:.85rem}.app-main{padding:1rem}.stations-grid{grid-template-columns:1fr}.fuel-types{grid-template-columns:repeat(3,1fr);gap:.5rem}.fuel-type-btn{padding:.6rem .4rem}.fuel-name{font-size:.7rem}.fuel-price{font-size:1rem}.station-header{flex-direction:column;gap:.5rem}.station-brand{align-self:flex-start}.location-form{flex-direction:column;align-items:stretch}.form-group{min-width:unset}}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}#root{min-height:100vh}