:root{--black: #000000;--dark-grey: #333333;--grey: #666666;--light-grey: #CCCCCC;--white: #FFFFFF;--shadow-dark: rgba(0,0,0,.2);--shadow-light: rgba(255,255,255,.1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;width:100%;height:100vh;background-color:var(--light-grey);display:flex;justify-content:center;align-items:center;letter-spacing:.3px}.container{width:350px;background-color:var(--white);border-radius:15px;box-shadow:5px 5px 15px var(--shadow-dark);border:1px solid var(--grey);margin-bottom:2em}.upper-data{position:relative;width:100%;height:200px;border-top-left-radius:15px;border-top-right-radius:15px;overflow:hidden;display:flex;align-items:center;justify-content:center}.city-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;filter:grayscale(100%) contrast(.8) brightness(1.2);z-index:0;transition:opacity .3s ease}.city-bg:not([src]){background-color:var(--light-grey)}.city-bg[src=""]{opacity:0}.city-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(255,255,255,.8),rgba(255,255,255,.6));z-index:1}.lower-data{position:relative;width:100%;border-bottom-left-radius:15px;border-bottom-right-radius:15px;padding:1.2em;display:flex;flex-direction:column}.weather-desc{color:var(--dark-grey);font-size:1em;margin-top:.5em;font-weight:500;text-shadow:0 1px 2px rgba(255,255,255,.8);text-transform:capitalize}.weather-data{position:relative;z-index:2;text-align:center;padding:1.5em}.location{color:var(--black);font-size:1.2em;font-weight:700;margin-bottom:.8em;text-shadow:0 2px 4px rgba(255,255,255,.9);letter-spacing:.5px}.temperature{color:var(--black);font-size:4em;font-weight:900;margin:.3em 0;text-shadow:0 3px 6px rgba(255,255,255,.9);cursor:pointer;transition:transform .2s}.more-info-label{color:var(--black);font-weight:700;font-size:1em;margin-bottom:1em;text-align:center;padding-bottom:.5em;border-bottom:1px solid var(--light-grey)}.more-info-container{flex:1;background-color:var(--light-grey);border-bottom-left-radius:15px;border-bottom-right-radius:15px;margin-top:.6em;padding:.8em;display:flex;flex-direction:row;flex-wrap:wrap}.info-block{width:50%;display:flex;flex-direction:row;padding:.3em 0;min-height:40px}.info-block-label{width:50%;display:flex;flex-direction:column;justify-content:center;align-items:center}.icon{font-size:1.2em;margin-bottom:.1em;color:var(--dark-grey)}.info-block-label span{color:var(--dark-grey);font-size:.7em;font-weight:500;text-align:center}.info-block-value{width:50%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;color:var(--black);font-weight:600;font-size:.85em}.analogy{font-size:.75em;color:var(--grey);font-weight:500;font-style:italic;margin-top:2px}.search{margin-bottom:.8em;text-align:center}.search input{background-color:var(--white);outline:none;border:2px solid var(--grey);border-radius:15px;padding:.8em;color:var(--black);text-align:center;width:280px}.search input:focus{border-color:var(--dark-grey)}.search input::placeholder{color:var(--grey)}.recent-searches{margin-top:.5em;text-align:center}.recent-label{font-size:.8em;color:var(--grey);margin-right:.5em}.recent-btn{background:var(--light-grey);border:1px solid var(--grey);border-radius:10px;padding:.3em .6em;margin:0 .2em;font-size:.75em;color:var(--dark-grey);cursor:pointer;transition:all .2s}.recent-btn:hover{background:var(--grey);color:var(--white)}.loading{text-align:center;padding:2em;color:var(--dark-grey)}.spinner{width:40px;height:40px;border:4px solid var(--light-grey);border-top:4px solid var(--dark-grey);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1em}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error{text-align:center;padding:2em;color:var(--dark-grey);background:var(--white);border-radius:15px;border:2px solid #ff6b6b;margin:1em}.error-icon{font-size:2em;margin-bottom:.5em}.temperature{cursor:pointer;transition:transform .2s}.temperature:hover{transform:scale(1.05)}.alerts{background:#ff6b6b;color:var(--white);padding:.5em;border-radius:10px;margin-bottom:.5em;font-size:.8em}.tabs{display:flex;background:var(--light-grey);border-radius:10px;margin-bottom:.5em;overflow:hidden}.tab{flex:1;padding:.6em;background:transparent;border:none;color:var(--grey);cursor:pointer;font-size:.8em;transition:all .2s}.tab.active{background:var(--white);color:var(--black);font-weight:600}.forecast-container,.details-container{padding:1em;height:calc(100% - 60px);overflow-y:auto}.forecast-section{margin-bottom:1.5em}.forecast-section h3{color:var(--black);font-size:1em;margin-bottom:.8em;border-bottom:1px solid var(--light-grey);padding-bottom:.3em}.daily-forecast,.hourly-forecast{display:flex;gap:.5em;overflow-x:auto;padding-bottom:.5em}.forecast-item{min-width:80px;text-align:center;background:var(--light-grey);border-radius:10px;padding:.8em .5em;font-size:.75em}.forecast-date,.forecast-time{color:var(--grey);font-weight:500;margin-bottom:.3em}.forecast-icon{font-size:1.2em;margin:.3em 0}.forecast-temp{color:var(--black);font-weight:600}.forecast-temp-min{color:var(--grey);font-size:.9em}.forecast-rain{color:#4a90e2;font-size:.8em;margin-top:.2em}.detail-section{margin-bottom:1.5em;background:var(--light-grey);border-radius:10px;padding:1em}.detail-section h3{color:var(--black);font-size:1em;margin-bottom:.8em}.air-quality,.uv-index{text-align:center}.aqi-value,.uv-value{font-size:2em;font-weight:700;color:var(--black);margin-bottom:.3em}.aqi-level,.uv-level{color:var(--grey);font-weight:600;margin-bottom:.5em}.pollutants{display:flex;justify-content:space-around;font-size:.8em;color:var(--dark-grey)}.pollutants span{background:var(--white);padding:.3em .5em;border-radius:5px}.forecast-nav{display:flex;background:var(--light-grey);border-radius:10px;margin-bottom:1em;overflow:hidden}.nav-btn{flex:1;padding:.8em;background:transparent;border:none;color:var(--grey);cursor:pointer;transition:all .2s}.forecast-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1em}.arrow-btn{background:var(--light-grey);border:none;border-radius:50%;width:40px;height:40px;font-size:1.2em;cursor:pointer;transition:all .2s}.arrow-btn:hover:not(:disabled){background:var(--grey);color:var(--white)}.arrow-btn:disabled{opacity:.3;cursor:not-allowed}.forecast-card{background:var(--light-grey);border-radius:15px;padding:1.5em;text-align:center}.forecast-weather{font-size:1.5em;margin-bottom:.5em}.forecast-desc{color:var(--grey);margin-bottom:1em}.forecast-temps{margin-bottom:1em}.temp-high{font-size:2em;font-weight:700;color:var(--black);margin-right:.5em}.temp-low{font-size:1.5em;color:var(--grey)}.forecast-details{display:flex;justify-content:space-around;font-size:.9em}.hourly-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8em}.hour-item{background:var(--light-grey);border-radius:10px;padding:.8em;text-align:center;font-size:.8em}.hour-time{color:var(--grey);margin-bottom:.3em}.hour-weather{margin:.3em 0}.hour-temp{font-weight:600;color:var(--black)}.quality-display{margin-bottom:1em}.weather-icon{width:80px;height:80px;margin-bottom:1em;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.quality-info{flex:1}.quality-level{font-size:1.5em;font-weight:700;margin-bottom:.3em}.quality-desc{color:var(--grey);font-size:.9em}.quality-bar{height:10px;background:var(--light-grey);border-radius:5px;overflow:hidden}.bar-fill{height:100%;transition:width .3s ease}.weather-details{padding:1em;background:var(--light-grey);border-radius:15px;margin-top:.8em}.detail-row{display:flex;justify-content:space-between;margin-bottom:1em;gap:1em}.detail-row.primary{padding-bottom:1em;border-bottom:1px solid rgba(0,0,0,.1);margin-bottom:1.2em}.detail-item{flex:1;display:flex;align-items:center;background:var(--white);padding:.8em;border-radius:10px;box-shadow:0 2px 4px #0000000d}.detail-icon{width:24px;height:24px;margin-right:.8em;opacity:.8}.detail-content{flex:1;display:flex;flex-direction:column}.detail-label{font-size:.75em;color:var(--grey);font-weight:500;margin-bottom:.2em}.detail-value{font-size:.9em;color:var(--black);font-weight:600}.detail-desc{font-size:.7em;color:var(--grey);font-style:italic;margin-top:.1em}.quality-section{padding:1em;margin-top:1em}.quality-section h3{color:var(--black);font-size:1em;margin-bottom:1em;text-align:center}.quality-grid{display:flex;gap:1em}.quality-card{flex:1;background:var(--light-grey);border-radius:12px;padding:1em;display:flex;align-items:center;position:relative;overflow:hidden}.quality-icon{width:32px;height:32px;margin-right:.8em;opacity:.8}.quality-info{flex:1;display:flex;flex-direction:column}.quality-title{font-size:.75em;color:var(--grey);font-weight:500;margin-bottom:.3em}.quality-value{font-size:.9em;font-weight:700;margin-bottom:.2em}.quality-desc{font-size:.7em;color:var(--grey)}.quality-indicator{position:absolute;right:0;top:0;bottom:0;width:4px;opacity:.8}.forecast-section{padding:1em;margin-top:1em}.forecast-section h3{color:var(--black);font-size:1em;margin-bottom:1em;text-align:center}.forecast-nav{display:flex;background:var(--light-grey);border-radius:8px;margin-bottom:1em;overflow:hidden}.nav-btn{flex:1;padding:.6em;background:transparent;border:none;color:var(--grey);cursor:pointer;font-size:.8em;transition:all .2s}.nav-btn.active{background:var(--white);color:var(--black);font-weight:600}.forecast-grid{display:flex;flex-direction:column;gap:.8em}.forecast-card{background:var(--light-grey);border-radius:12px;padding:1em;display:flex;align-items:center;position:relative;overflow:hidden}.forecast-icon{width:32px;height:32px;margin-right:.8em;opacity:.8}.forecast-info{flex:1;display:flex;flex-direction:column}.forecast-title{font-size:.75em;color:var(--grey);font-weight:500;margin-bottom:.3em}.forecast-value{font-size:.9em;font-weight:700;margin-bottom:.2em;color:var(--black)}.forecast-desc{font-size:.7em;color:var(--grey)}.forecast-indicator{position:absolute;right:0;top:0;bottom:0;width:4px;opacity:.8}