@import "https://fonts.googleapis.com/css2?family=Ubuntu&display=swap";*{box-sizing:border-box;margin:0;padding:0;font-family:Ubuntu,Arial,Helvetica,sans-serif}html,body{overflow-x:hidden}:root{--bg-primary:#0f1117;--bg-secondary:#1e2130;--bg-card:#252836;--accent:#6c63ff;--text-primary:#fff;--text-secondary:#a0aec0;--border:#2d3148}body.light{--bg-primary:#f0f4f8;--bg-secondary:#fff;--bg-card:#e2e8f0;--text-primary:#1a202c;--text-secondary:#4a5568;--border:#cbd5e0}body{background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;padding:2rem}h1,h2,h3{color:var(--text-primary);margin-bottom:1rem;font-weight:700}.app{max-width:1200px;margin:0 auto;padding:1rem}.top-bar{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.header{justify-content:flex-start;align-items:center;gap:1rem;margin-bottom:2rem;display:flex}nav{gap:1.5rem;margin-bottom:1rem;display:flex}nav a{color:var(--text-secondary);border-bottom:2px solid #0000;padding:.5rem 0;font-size:1rem;text-decoration:none;transition:all .3s}nav a:hover{color:var(--accent);border-bottom:2px solid var(--accent)}.hero-text{text-align:center;color:var(--text-primary);margin:2rem 0;font-size:2.5rem;font-weight:700}.search-bar{gap:1rem;max-width:600px;margin-bottom:2rem;display:flex}.header .search-bar{flex:1;max-width:500px;margin-bottom:0}.search-bar input{border:1px solid var(--border);background-color:var(--bg-secondary);min-width:0;color:var(--text-primary);border-radius:8px;flex:1;padding:1rem;font-size:1rem}.search-bar button{background-color:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:1rem 1.5rem;font-size:1rem;transition:background-color .3s}.search-bar button:hover{background-color:#5a52e0}.unit-toggle{background-color:var(--accent);color:#fff;cursor:pointer;white-space:nowrap;border:none;border-radius:8px;margin-left:auto;padding:1rem 1.5rem;font-size:1rem;transition:background-color .3s}.unit-toggle:hover{background-color:#5a52e0}.theme-toggle{background-color:var(--bg-card);width:42px;height:42px;color:var(--text-primary);cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:1.2rem;transition:background-color .3s,transform .2s;display:flex}.theme-toggle:hover{background-color:var(--accent);transform:rotate(20deg)}.add-favourite-btn{border:1px solid var(--accent);color:var(--accent);cursor:pointer;background-color:#0000;border-radius:8px;margin:1rem auto;padding:.6rem 1.2rem;font-size:.9rem;transition:all .3s;display:block}.add-favourite-btn:hover{background-color:var(--accent);color:#fff}.weather-content{gap:2rem;display:grid}.current-weather{text-align:center;border-radius:16px;grid-column:1/-1;padding:1.5rem;transition:background .8s;position:relative;overflow:hidden}.current-weather:before{content:"";pointer-events:none;background:radial-gradient(circle,#ffffff08 0%,#0000 60%);width:200%;height:200%;position:absolute;top:-50%;left:-50%}.current-weather h2{margin-bottom:.5rem;font-size:2rem}.current-weather .temperature{margin:1rem 0;font-size:4rem;font-weight:700;display:block}.current-weather .description{color:var(--text-secondary);margin-bottom:1rem;font-size:1.2rem}.current-weather .weather-meta{color:var(--text-secondary);justify-content:center;gap:1.5rem;display:flex}.weather-main{flex-direction:column;align-items:center;gap:.5rem;display:flex}.daily-forecast{background-color:var(--bg-secondary);border-radius:8px;grid-column:1/-1;padding:1.5rem}.forecast-grid{grid-template-columns:repeat(7,1fr);gap:1rem;display:grid}.forecast-card{background-color:var(--bg-primary);text-align:center;border-left:4px solid var(--accent);border-radius:8px;padding:1rem}.forecast-date{margin-bottom:.5rem;font-size:1.1rem;font-weight:700}.forecast-temp-max{color:#ff6b6b;font-weight:600}.forecast-temp-min{color:#48dbfb;font-weight:600}.hourly-forecast-container{background-color:var(--bg-secondary);border-radius:8px;grid-column:1/-1;padding:1.5rem}.hourly-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.hourly-forecast-container select{background-color:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border);border-radius:5px;padding:.5rem}.hourly-grid{flex-direction:column;gap:.5rem;display:flex}.hourly-card{background-color:var(--bg-primary);color:var(--text-primary);border-radius:5px;grid-template-columns:1.5fr 2fr .5fr 1fr;align-items:center;padding:.75rem;display:grid}.forecast-time{font-weight:700}.forecast-code{font-size:.9rem}.forecast-actual-temp{text-align:right;color:var(--accent);font-weight:700}.weather-details{background-color:var(--bg-secondary);border-radius:8px;grid-column:1/-1;padding:1.5rem}.details-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;display:grid}.detail-card{background-color:var(--bg-primary);border-radius:8px;padding:1rem}.detail-label{color:var(--text-secondary);margin-bottom:.5rem;font-size:.9rem}.detail-value{font-size:1.2rem;font-weight:700}.favourites{background-color:var(--bg-secondary);border-radius:8px;margin-top:2rem;padding:1.5rem}.favourites h2{margin-bottom:1rem}.favourite-item{background-color:var(--bg-primary);border-left:3px solid var(--accent);border-radius:8px;justify-content:space-between;align-items:center;margin-bottom:.5rem;padding:.75rem 1rem;display:flex}.favourite-city-btn{color:var(--text-primary);cursor:pointer;background:0 0;border:none;font-size:1rem;font-weight:600}.favourite-city-btn:hover{color:var(--accent)}.favourite-remove-btn{color:#ff6b6b;cursor:pointer;background:0 0;border:1px solid #ff6b6b;border-radius:6px;padding:.3rem .75rem;font-size:.85rem;transition:all .3s}.favourite-remove-btn:hover{color:#fff;background-color:#ff6b6b}.clear-all-btn{border:1px solid var(--text-secondary);color:var(--text-secondary);cursor:pointer;background:0 0;border-radius:6px;margin-bottom:1rem;padding:.4rem 1rem;font-size:.85rem;transition:all .3s}.clear-all-btn:hover{color:#ff6b6b;border-color:#ff6b6b}.loading,.error{text-align:center;padding:2rem;font-size:1.2rem}.error{color:#ff6b6b}.gradient-clear{background:linear-gradient(135deg,#f7971e,#ffd200,#56ccf2)}.gradient-cloudy{background:linear-gradient(135deg,#bdc3c7,#6c7a89)}.gradient-fog{background:linear-gradient(135deg,#d3cce3,#e9e4f0)}.gradient-drizzle{background:linear-gradient(135deg,#076585,#fff)}.gradient-rain{background:linear-gradient(135deg,#1c3f6e,#0a1628)}.gradient-snow{background:linear-gradient(135deg,#e0eafc,#cfdef3)}.gradient-showers{background:linear-gradient(135deg,#2980b9,#2c3e50)}.gradient-thunderstorm{background:linear-gradient(135deg,#200122,#6f0000)}.gradient-overcast{background:linear-gradient(135deg,#3d3d3d,#1a1a1a)}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton{background:linear-gradient(90deg, var(--bg-card) 25%, var(--bg-secondary) 50%, var(--bg-card) 75%);background-size:200% 100%;border-radius:8px;animation:1.5s infinite shimmer}@media (width>=768px){.weather-content{grid-template-columns:1fr 1fr}}@media (width<=768px){body{padding:1rem}.hero-text{margin:1rem 0;font-size:1.2rem}.header{flex-direction:column;align-items:stretch;gap:.5rem}.header .search-bar{width:100%;max-width:100%}.search-bar{width:100%;max-width:100%;margin-bottom:0}.unit-toggle{width:100%;margin-left:0}.forecast-grid{grid-template-columns:repeat(2,1fr)}.hourly-card{grid-template-rows:auto auto;grid-template-columns:1fr 1fr;gap:.25rem}.forecast-actual-temp{text-align:left}.details-grid{grid-template-columns:repeat(2,1fr)}.current-weather .temperature{font-size:3rem}}@media (width<=480px){h1{font-size:1.5rem}.forecast-grid{grid-template-columns:repeat(2,1fr)}}