:root{--bg:#121212;--card-bg:#1e1e1e;--card-bg-alt:#2a2a2a;--text-primary:#f0f0f0;--text-secondary:#a0a0a0;--accent:#fff;--accent-hover:#ccc;--border:#2e2e2e;--shadow:none;--btn-bg:#fff;--btn-text:#121212;--btn-hover-bg:#e0e0e0;--input-bg:#2a2a2a;--error-bg:#f44;--error-text:#fff;--transition:all .3s ease}[data-theme=light]{--bg:#fff;--card-bg:#f5f5f5;--card-bg-alt:#ebebeb;--text-primary:#1a1a1a;--text-secondary:#6b6b6b;--accent:#1a1a1a;--accent-hover:#444;--border:#e0e0e0;--shadow:0 1px 3px #00000014;--btn-bg:#1a1a1a;--btn-text:#fff;--btn-hover-bg:#333;--input-bg:#ebebeb;--error-bg:#f44;--error-text:#fff}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg);color:var(--text-primary);min-height:100vh;transition:var(--transition);font-family:Poppins,sans-serif}.container{max-width:1200px;margin:0 auto;padding:20px}.header{z-index:100;background-color:var(--bg);border-bottom:1px solid var(--border);margin-bottom:30px;padding:20px 0;position:sticky;top:0}.header-content{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;display:flex}.header-content h1{color:var(--text-primary);letter-spacing:1px;font-size:2.5rem;font-weight:700}.header-controls{align-items:center;gap:20px;display:flex}.datetime{color:var(--text-secondary);font-size:1.1rem}.theme-toggle{background:var(--btn-bg);color:var(--btn-text);border:1px solid var(--border);cursor:pointer;width:46px;height:46px;transition:var(--transition);border-radius:50%;justify-content:center;align-items:center;font-size:1.2rem;display:flex}.theme-toggle:hover{background:var(--btn-hover-bg);transform:scale(1.05)}.search-container{justify-content:center;margin-bottom:30px;display:flex}.search-container form{display:flex}.search-container input{border:1px solid var(--border);background:var(--input-bg);width:300px;color:var(--text-primary);transition:var(--transition);border-right:none;border-radius:30px 0 0 30px;outline:none;padding:12px 24px;font-family:Poppins,sans-serif;font-size:1rem}.search-container input:focus{border-color:var(--text-secondary)}.search-container button{border:1px solid var(--border);background:var(--btn-bg);color:var(--btn-text);cursor:pointer;transition:var(--transition);border-left:none;border-radius:0 30px 30px 0;padding:12px 24px;font-family:Poppins,sans-serif;font-size:1rem;font-weight:600}.search-container button:hover{background:var(--btn-hover-bg)}.search-container button:disabled{opacity:.6;cursor:not-allowed}.error-message{background:var(--error-bg);color:var(--error-text);text-align:center;border-radius:8px;margin:15px 0;padding:14px;animation:.3s slideDown}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.weather-summary{background:var(--card-bg);border:1px solid var(--border);box-shadow:var(--shadow);transition:var(--transition);border-radius:10px;align-items:center;margin-bottom:30px;padding:20px;display:flex}.weather-summary i{color:var(--text-secondary);margin-right:20px;font-size:2.2rem}.summary-text{color:var(--text-secondary);font-size:1.05rem;line-height:1.6}.current-weather{grid-template-columns:1fr 1fr;gap:24px;margin-bottom:30px;display:grid}.weather-card{background:var(--card-bg);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:10px;padding:24px;transition:transform .3s,box-shadow .3s}.weather-card:hover,.forecast-card:hover,.day-card:hover,.sunrise-sunset:hover{transform:translateY(-4px);box-shadow:0 8px 16px #0003}[data-theme=light] .weather-card:hover,[data-theme=light] .forecast-card:hover,[data-theme=light] .day-card:hover,[data-theme=light] .sunrise-sunset:hover{box-shadow:0 8px 16px #00000014}.weather-card h2{color:var(--text-primary);margin-bottom:20px;font-size:1.4rem;font-weight:600}.current-main{text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.location{margin-bottom:4px;font-size:1.5rem;font-weight:600}.date{color:var(--text-secondary);margin-bottom:16px;font-size:.95rem}.temp-container{justify-content:center;align-items:center;gap:16px;margin:8px 0;display:flex}.temperature{color:var(--text-primary);text-shadow:0 0 20px #ffffff26;margin:0;font-size:4rem;font-weight:700;line-height:1}[data-theme=light] .temperature{text-shadow:0 0 20px #0000001a}.weather-desc{color:var(--text-secondary);margin-bottom:16px;font-size:1.2rem}#weatherIcon{color:var(--text-secondary);font-size:4rem}.feels-badge{text-transform:uppercase;letter-spacing:.8px;border:1px solid var(--border);border-radius:20px;margin-bottom:12px;padding:4px 14px;font-size:.78rem;font-weight:600;display:inline-block}.badge-freezing{color:#333;background:#e8e8e8}.badge-cold{color:#333;background:#d0d0d0}.badge-cool{color:#333;background:#b8b8b8}.badge-warm{color:#fff;background:#888}.badge-hot{color:#fff;background:#555}[data-theme=light] .badge-freezing{color:#333;background:#e0e7ff}[data-theme=light] .badge-cold{color:#333;background:#d0daf5}[data-theme=light] .badge-cool{color:#333;background:#c8d4e8}[data-theme=light] .badge-warm{color:#333;background:#d4d0c8}[data-theme=light] .badge-hot{color:#333;background:#c0b0a0}.air-conditions{grid-template-columns:repeat(2,1fr);gap:14px;display:grid}.condition-item{background:var(--card-bg-alt);border:1px solid var(--border);transition:var(--transition);border-radius:8px;align-items:center;padding:14px;display:flex}.condition-item:hover{background:var(--input-bg)}.condition-item i{color:var(--text-secondary);background:var(--input-bg);border-radius:50%;justify-content:center;align-items:center;min-width:48px;height:48px;margin-right:14px;font-size:1.4rem;display:flex}.condition-value{color:var(--text-primary);font-size:1.15rem;font-weight:600}.condition-name{color:var(--text-secondary);font-size:.85rem}.wind-direction{color:var(--text-secondary);align-items:center;margin-top:4px;font-size:.85rem;display:flex}.wind-direction i{margin-right:4px;font-size:.85rem;transition:transform .5s}.condition-content{flex:1;min-width:0}.progress-bar-container{margin-top:6px}.progress-bar-track{background:var(--border);border-radius:2px;width:100%;height:4px;overflow:hidden}.progress-bar-fill{background:var(--text-secondary);border-radius:2px;height:100%;transition:width .6s}.animated-number{font-variant-numeric:tabular-nums}.error-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:60px 20px;display:flex}.error-state-icon{width:120px;height:100px;color:var(--text-secondary);opacity:.5;margin-bottom:24px}.error-state-message{color:var(--text-primary);margin-bottom:8px;font-size:1.2rem;font-weight:600}.error-state-hint{color:var(--text-secondary);font-size:.9rem}.forecast-section{margin-bottom:30px}.forecast-section h2{color:var(--text-primary);margin-bottom:18px;font-size:1.6rem;font-weight:600}.today-forecast{grid-template-columns:repeat(3,1fr);gap:18px;display:grid}.forecast-card{background:var(--card-bg);text-align:center;border:1px solid var(--border);box-shadow:var(--shadow);transition:var(--transition);border-radius:10px;flex-direction:column;align-items:center;padding:20px;display:flex}.forecast-card:hover{transform:translateY(-3px);box-shadow:0 4px 12px #0000001a}.forecast-card i{color:var(--text-secondary);margin:10px 0;font-size:2.2rem;display:block}.forecast-time{margin-bottom:6px;font-size:1.1rem;font-weight:500}.forecast-temp{margin:8px 0;font-size:1.6rem;font-weight:600}.forecast-desc{color:var(--text-secondary);font-size:.85rem}.weekly-forecast{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;display:grid}.day-card{background:var(--card-bg);text-align:center;border:1px solid var(--border);box-shadow:var(--shadow);transition:var(--transition);border-radius:10px;flex-direction:column;align-items:center;padding:16px;display:flex}.day-card:hover{transform:translateY(-3px);box-shadow:0 4px 12px #0000001a}.day-name{color:var(--text-primary);margin-bottom:8px;font-size:1.05rem;font-weight:600}.day-card i{color:var(--text-secondary);margin:8px 0;font-size:1.8rem;display:block}.day-temp{margin:8px 0;font-size:1.35rem;font-weight:600}.day-condition{color:var(--text-secondary);margin:4px 0;font-size:.85rem}.day-details{color:var(--text-secondary);margin-top:6px;font-size:.78rem;line-height:1.5}.day-details div{margin:2px 0}.footer{text-align:center;color:var(--text-secondary);border-top:1px solid var(--border);margin-top:40px;padding:24px;font-size:.9rem}.loading{animation:.8s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.sunrise-sunset{background:var(--card-bg);border:1px solid var(--border);box-shadow:var(--shadow);transition:var(--transition);border-radius:10px;margin-bottom:30px;padding:24px}.sun-times{justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}.sun-time{align-items:center;gap:12px;display:flex}.sun-time i{color:var(--text-secondary);font-size:1.5rem}.sun-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:.8rem}.sun-value{color:var(--text-primary);font-size:1.15rem;font-weight:600}.sun-progress-track{background:var(--card-bg-alt);border-radius:3px;height:6px;position:relative;overflow:visible}.sun-progress-fill{background:var(--text-secondary);border-radius:3px;height:100%;transition:width .5s}.sun-indicator{transition:left .5s;position:absolute;top:50%;transform:translate(-50%,-50%)}.sun-indicator i{color:var(--text-primary);font-size:12px}.skeleton-card{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;margin-bottom:24px;padding:24px}.skeleton-summary{align-items:center;gap:20px;display:flex}.skeleton-main{flex-direction:column;align-items:center;gap:12px;display:flex}.skeleton-lines{flex-direction:column;flex:1;gap:10px;display:flex}.skeleton-line{background:var(--card-bg-alt);border-radius:6px;height:14px;animation:1.5s ease-in-out infinite shimmer}.skeleton-line-long{width:90%}.skeleton-line-medium{width:60%}.skeleton-line-short{width:40%}.skeleton-line-temp{width:30%;height:48px}.skeleton-circle{background:var(--card-bg-alt);border-radius:50%;flex-shrink:0;width:44px;height:44px;animation:1.5s ease-in-out infinite shimmer}.skeleton-circle-large{width:72px;height:72px}.skeleton-grid{grid-template-columns:1fr 1fr;gap:14px;margin-top:12px;display:grid}.skeleton-box{background:var(--card-bg-alt);border-radius:8px;height:64px;animation:1.5s ease-in-out infinite shimmer}@keyframes shimmer{0%,to{opacity:1}50%{opacity:.4}}@media (width<=992px){.current-weather{grid-template-columns:1fr}.today-forecast{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){.container{padding:16px}.header{margin-bottom:20px;padding:12px 0}.header-content{flex-wrap:nowrap}.datetime{display:none}.today-forecast,.air-conditions{grid-template-columns:1fr}.header-content h1{gap:8px;font-size:1.4rem}.forecast-section h2,.weather-card h2{font-size:1.3rem}.temperature{font-size:3.2rem}.search-container input{width:220px;padding:14px 16px}.search-container button{padding:14px 20px}.weather-summary{text-align:center;flex-direction:column;gap:12px}.weather-summary i{margin-right:0}.sun-times{flex-direction:column;align-items:flex-start;gap:16px}}@media (width<=480px){.container{padding:12px}.weekly-forecast{grid-template-columns:1fr}.temperature{font-size:2.8rem}.search-container{margin-bottom:20px}.search-container form{width:100%}.search-container input{border-radius:30px 0 0 30px;flex:1;width:auto;min-width:0}.search-container button{white-space:nowrap}.header-content h1{font-size:1.2rem}.header-content h1 i{font-size:1rem}.theme-toggle{width:38px;height:38px;font-size:1rem}.condition-item{padding:12px}.forecast-card,.day-card{padding:14px}}