:root{--bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-tertiary:#334155;--bg-card:#1e293b;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--accent-primary:#3b82f6;--temp-cold:#3b82f6;--temp-cool:#22d3ee;--temp-moderate:#22c55e;--temp-warm:#facc15;--temp-hot:#f97316;--temp-scorching:#ef4444;--icon-sun:#fbbf24;--icon-cloud:#94a3b8;--icon-rain:#60a5fa;--icon-snow:#a5f3fc;--icon-thunder:#fbbf24;--icon-fog:#9ca3af;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:12px;--spacing-lg:16px;--radius-md:10px;--radius-xl:20px}#simple-weather-container,#weather-app{cursor:default}#simple-weather-container .filter-pill,#simple-weather-container .sort-btn,#simple-weather-container .weather-row,#simple-weather-container button,#weather-app .filter-pill,#weather-app .sort-btn,#weather-app .weather-row,#weather-app button{cursor:pointer!important}[data-theme=light]{--bg-primary:#f1f5f9;--bg-secondary:#e2e8f0;--bg-tertiary:#cbd5e1;--bg-card:#fff;--text-primary:#0f172a;--text-secondary:#475569}[data-theme=light] #displayModeToggle{background:#1e293b!important;background:var(--bg-secondary)!important;box-shadow:none!important;color:#f8fafc!important;color:var(--text-primary)!important}[data-theme=light] #displayModeToggle svg,[data-theme=light] .filter-pill{color:#f8fafc;color:var(--text-primary)}[data-theme=light] .filter-pill.active{background:#334155!important;background:var(--bg-tertiary)!important;border-color:#334155!important;border-color:var(--bg-tertiary)!important;color:#f8fafc!important;color:var(--text-primary)!important}[data-theme=light] .sort-btn,[data-theme=light] .sort-label{color:#f8fafc;color:var(--text-primary)}[data-theme=light] .sort-btn.active{background:#334155!important;background:var(--bg-tertiary)!important;border-color:#334155!important;border-color:var(--bg-tertiary)!important;color:#f8fafc!important;color:var(--text-primary)!important}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}#simple-weather-container{color:#f8fafc;color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,sans-serif;min-height:100vh}#simple-weather-container,.app-header{background:#0f172a;background:var(--bg-primary)}.app-header{padding:16px;padding:var(--spacing-lg);padding-bottom:12px;padding-bottom:var(--spacing-md);position:-webkit-sticky;position:sticky;top:0;z-index:100}.header-top{justify-content:space-between;margin-bottom:12px;margin-bottom:var(--spacing-md)}.app-title,.header-top{align-items:center;display:flex}.app-title{font-size:1.25rem;font-weight:700;gap:8px;gap:var(--spacing-sm)}.app-title svg{color:#3b82f6;color:var(--accent-primary);height:28px;width:28px}.filter-container{display:flex;gap:8px;gap:var(--spacing-sm);overflow-x:auto;padding-bottom:8px;padding-bottom:var(--spacing-sm)}.filter-pill{background:#1e293b;background:var(--bg-card);border:1px solid #334155;border:1px solid var(--bg-tertiary);border-radius:20px;border-radius:var(--radius-xl);color:#94a3b8;color:var(--text-secondary);cursor:pointer!important;flex-shrink:0;font-size:.875rem;font-weight:500;padding:8px 16px;padding:var(--spacing-sm) var(--spacing-lg);transition:all .15s ease;-webkit-user-select:none;user-select:none}.filter-pill:hover{background:#334155;background:var(--bg-tertiary)}.filter-pill.active,.filter-pill:hover{border-color:#3b82f6;border-color:var(--accent-primary);cursor:pointer!important}.filter-pill.active{background:#3b82f6;background:var(--accent-primary);color:#fff}.filter-pill.active:hover{background:#5b5fc7;background:var(--accent-secondary,#5b5fc7);cursor:pointer!important}.sort-bar{align-items:center;background:#1e293b;background:var(--bg-secondary);border-radius:10px;border-radius:var(--radius-md);display:flex;justify-content:space-between;margin:0 16px 12px;margin:0 var(--spacing-lg) var(--spacing-md);padding:12px 16px;padding:var(--spacing-md) var(--spacing-lg)}.sort-label{color:#f8fafc;color:var(--text-primary);font-size:.75rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.sort-buttons{display:flex;gap:8px;gap:var(--spacing-sm)}.sort-btn{align-items:center;background:#0f172a;background:var(--bg-primary);border:1px solid #334155;border:1px solid var(--bg-tertiary);border-radius:6px;color:#94a3b8;color:var(--text-secondary);cursor:pointer!important;display:flex;font-size:.8rem;font-weight:500;gap:4px;padding:6px 12px;padding:6px var(--spacing-md);transition:all .15s ease;-webkit-user-select:none;user-select:none}.sort-btn:hover{background:#334155;background:var(--bg-tertiary)}.sort-btn.active,.sort-btn:hover{border-color:#3b82f6;border-color:var(--accent-primary);cursor:pointer!important}.sort-btn.active{background:#3b82f6;background:var(--accent-primary);color:#fff}.sort-btn.active:after{content:" ↕";font-size:.7rem;opacity:.8}.sort-btn svg{height:16px;width:16px}.stats-bar{background:#1e293b;background:var(--bg-secondary);border-radius:10px;border-radius:var(--radius-md);display:flex;justify-content:space-around;margin:0 16px 12px;margin:0 var(--spacing-lg) var(--spacing-md);padding:12px 16px;padding:var(--spacing-md) var(--spacing-lg)}.stat-item{text-align:center}.stat-value{font-size:1.25rem;font-weight:700}.stat-label{color:#64748b;color:var(--text-muted);font-size:.7rem;text-transform:uppercase}.last-updated-top{color:#94a3b8;color:var(--text-secondary);font-size:.75rem;margin:0 0 8px;margin:0 0 var(--spacing-sm);padding:0 16px;padding:0 var(--spacing-lg);white-space:nowrap}.weather-list{grid-gap:8px;grid-gap:var(--spacing-sm);display:grid;gap:8px;gap:var(--spacing-sm);grid-template-columns:1fr 1fr;padding:8px 16px 80px;padding:var(--spacing-sm) var(--spacing-lg) 80px}.skeleton-container{display:flex;flex-direction:column;gap:8px;gap:var(--spacing-sm);grid-column:1/-1}.skeleton-row{animation:pulse 1.5s infinite;background:#1e293b;background:var(--bg-card);border-radius:10px;border-radius:var(--radius-md);height:72px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes spin{to{transform:rotate(1turn)}}.weather-row{background:#1e293b;background:var(--bg-card);border-radius:10px;border-radius:var(--radius-md);cursor:pointer!important;overflow:hidden;position:relative;-webkit-user-select:none;user-select:none}.weather-row.expanded{grid-column:1/-1}#refreshBtn.is-loading svg{animation:spin .9s linear infinite}.row-content{grid-gap:8px;grid-gap:var(--spacing-sm);display:grid;grid-template-columns:1fr auto;padding:8px 12px 34px;padding:var(--spacing-sm) var(--spacing-md) 34px;position:relative}.city-info,.row-content{gap:8px;gap:var(--spacing-sm)}.city-info,.country-flag{align-items:center;display:flex}.country-flag{border:1px solid #334155;border:1px solid var(--bg-tertiary);border-radius:4px;font-size:1rem;height:20px;justify-content:center;width:28px}.city-name{font-size:.85rem;font-weight:600}.city-country{color:#64748b;color:var(--text-muted);font-size:.65rem}.tz-abbr{color:#3b82f6;color:var(--accent-primary);font-weight:600;margin-left:4px}.city-time{color:#94a3b8;color:var(--text-secondary);font-size:.7rem;font-weight:500;margin-top:2px}.city-times-corner{bottom:3px;display:flex;flex-direction:column;font-family:Monaco,Courier New,monospace;gap:1px;left:12px;position:absolute}.city-time-row{color:#f8fafc;color:var(--text-primary);font-size:.7rem;font-weight:700;letter-spacing:.3px}.sun-times-row{display:flex;font-size:.55rem;font-weight:500;gap:8px}.sun-time-item{align-items:center;display:flex;gap:2px}.sun-time-icon{flex-shrink:0;height:12px;width:12px}.sun-time-icon.sunrise{color:#fbbf24}.sun-time-icon.sunset{color:#f97316}.sun-time-value{color:#94a3b8;color:var(--text-secondary);font-family:Azeret Mono,monospace;letter-spacing:.2px}.city-time-corner{bottom:4px;color:#f8fafc;color:var(--text-primary);font-family:Monaco,Courier New,monospace;font-size:.65rem;font-weight:600;left:12px;letter-spacing:.3px;position:absolute}.weather-row.sun-mode .row-content{padding-bottom:8px;padding-bottom:var(--spacing-sm)}.sun-mode-display{grid-column:1/-1;min-height:50px;position:relative}.sun-mode-stack{display:flex;flex-direction:column;gap:4px}.sun-mode-row{align-items:center;display:flex;gap:8px}.sun-mode-row .sun-time-icon{flex-shrink:0;height:22px;width:22px}.sun-mode-value{color:#f8fafc;color:var(--text-primary);font-family:Azeret Mono,monospace;font-size:1.1rem;font-weight:600;letter-spacing:.3px}.sun-mode-row.sunrise .sun-mode-value{color:#fbbf24}.sun-mode-row.sunset .sun-mode-value{color:#f97316}.sun-mode-local-time{bottom:0;color:#94a3b8;color:var(--text-secondary);font-family:Azeret Mono,monospace;font-size:.65rem;font-weight:500;position:absolute;right:0}.weather-main{align-items:center;display:flex;gap:4px;gap:var(--spacing-xs);grid-column:1/-1}.weather-icon-wrapper{align-items:center;display:flex;justify-content:center}.weather-icon,.weather-icon-wrapper{height:28px;width:28px}.weather-condition{color:#94a3b8;color:var(--text-secondary);font-size:.7rem;text-transform:capitalize}.temp-container{align-items:flex-end;display:flex;flex-direction:column;justify-content:center}.temp-badge{background:#334155;background:var(--bg-tertiary);border-radius:6px;font-size:1.1rem;font-weight:700;min-width:50px;padding:2px 8px;text-align:center}.temp-badge.cold{background:#3b82f633;color:#3b82f6;color:var(--temp-cold)}.temp-badge.cool{background:#22d3ee33;color:#22d3ee;color:var(--temp-cool)}.temp-badge.moderate{background:#22c55e33;color:#22c55e;color:var(--temp-moderate)}.temp-badge.warm{background:#facc1533;color:#facc15;color:var(--temp-warm)}.temp-badge.hot{background:#f9731633;color:#f97316;color:var(--temp-hot)}.temp-badge.scorching{background:#ef444433;color:#ef4444;color:var(--temp-scorching)}.wind-badge{align-items:center;color:#64748b;color:var(--text-muted);display:flex;font-size:.65rem;gap:2px;margin-top:2px}.wind-badge svg{height:10px;width:10px}.row-details{background:#1e293b;background:var(--bg-secondary);display:none;padding:8px;padding:var(--spacing-sm)}.weather-row.expanded .row-details{display:block}.details-compact{grid-gap:4px;grid-gap:var(--spacing-xs);display:grid;gap:4px;gap:var(--spacing-xs);grid-template-columns:repeat(4,1fr)}.detail-mini{background:#1e293b;background:var(--bg-card);border-radius:6px;padding:4px;padding:var(--spacing-xs);text-align:center}.detail-mini .detail-icon{height:20px;margin:0 auto 2px;width:20px}.detail-mini .detail-label{color:#64748b;color:var(--text-muted);font-size:.55rem;text-transform:uppercase}.detail-mini .detail-value{font-size:.75rem;font-weight:600}.forecast-section{margin:8px 0;margin:var(--spacing-sm) 0}.forecast-title{color:#64748b;color:var(--text-muted);font-size:.7rem;margin-bottom:4px;margin-bottom:var(--spacing-xs);text-transform:uppercase}.forecast-chart{align-items:flex-end;background:#1e293b;background:var(--bg-card);border-radius:8px;display:flex;gap:2px;height:80px;overflow-x:auto;padding:4px;padding:var(--spacing-xs)}.forecast-bar-container{align-items:center;display:flex;flex-direction:column;min-width:28px}.forecast-bar{border-radius:4px 4px 0 0;min-height:4px;width:16px}.forecast-bar.cold{background:#3b82f6;background:var(--temp-cold)}.forecast-bar.cool{background:#22d3ee;background:var(--temp-cool)}.forecast-bar.moderate{background:#22c55e;background:var(--temp-moderate)}.forecast-bar.warm{background:#facc15;background:var(--temp-warm)}.forecast-bar.hot{background:#f97316;background:var(--temp-hot)}.forecast-bar.scorching{background:#ef4444;background:var(--temp-scorching)}.forecast-time{color:#64748b;color:var(--text-muted);font-size:.55rem;margin-top:4px}.forecast-temp{font-size:.6rem;font-weight:600;margin-top:2px}.details-main{grid-gap:8px;grid-gap:var(--spacing-sm);display:grid;grid-template-columns:1fr 1fr;margin-bottom:8px;margin-bottom:var(--spacing-sm)}.detail-card,.details-main{gap:8px;gap:var(--spacing-sm)}.detail-card{align-items:center;background:#1e293b;background:var(--bg-card);border-radius:8px;display:flex;padding:8px;padding:var(--spacing-sm)}.detail-card .detail-icon{flex-shrink:0;height:24px;width:24px}.detail-card .detail-info{flex:1 1}.detail-card .detail-label{color:#64748b;color:var(--text-muted);font-size:.6rem;text-transform:uppercase}.detail-card .detail-value{font-size:.9rem;font-weight:600}.app-footer{align-items:center;background:#1e293b;background:var(--bg-secondary);border-top:1px solid #334155;border-top:1px solid var(--bg-tertiary);bottom:0;display:flex;justify-content:space-between;left:0;padding:8px 16px;padding:var(--spacing-sm) var(--spacing-lg);position:fixed;right:0;z-index:100}.last-updated{color:#64748b;color:var(--text-muted);font-size:.75rem}@media (min-width:768px){.app-header,.weather-list{margin:0 auto;max-width:900px}.weather-list{grid-template-columns:repeat(4,1fr)}.app-footer{border-left:1px solid #334155;border-left:1px solid var(--bg-tertiary);border-radius:10px 10px 0 0;border-radius:var(--radius-md) var(--radius-md) 0 0;border-right:1px solid #334155;border-right:1px solid var(--bg-tertiary);left:50%;margin:0 auto;max-width:900px;transform:translateX(-50%)}.details-compact{grid-template-columns:repeat(6,1fr)}}@media (max-width:768px){.city-time-corner{bottom:3px;font-size:.6rem;left:10px}.city-times-corner{bottom:2px;left:10px}.city-time-row{font-size:.65rem}.sun-times-row{font-size:.5rem;gap:6px}.sun-time-icon{height:10px;width:10px}.row-content{padding:8px 8px 32px;padding:var(--spacing-sm) var(--spacing-sm) 32px}.sun-mode-row .sun-time-icon{height:18px;width:18px}.sun-mode-value{font-size:1rem}.sun-mode-local-time{font-size:.6rem}}@media (max-width:480px){.city-time-corner{font-size:.55rem}.city-time-corner,.city-times-corner{bottom:2px;left:8px}.city-time-row{font-size:.6rem}.sun-times-row{font-size:.45rem;gap:5px}.sun-time-icon{height:9px;width:9px}.row-content{padding:4px 8px 30px;padding:var(--spacing-xs) var(--spacing-sm) 30px}.sun-mode-stack{gap:2px}.sun-mode-row{gap:5px}.sun-mode-row .sun-time-icon{height:16px;width:16px}.sun-mode-value{font-size:.9rem}.sun-mode-local-time{font-size:.55rem}}