:root{color:#172033;font-synthesis:none;text-rendering:optimizelegibility;background:#f4f7ff;font-family:Inter,Segoe UI,Arial,sans-serif}*{box-sizing:border-box}html{min-width:320px;min-height:100%}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}:root{--navy:#101828;--text:#1d2939;--muted:#667085;--purple:#6c5ce7;--purple-dark:#5647d8;--blue:#2f80ed;--cyan:#00bcd4;--green:#12b76a;--orange:#f79009;--pink:#e64980;--border:#e8ebf4;--card:#fffffff0;--shadow:0 16px 45px #37417014}body{background:radial-gradient(circle at 10% 5%,#6c5ce71a,#0000 27%),radial-gradient(circle at 92% 20%,#00bcd417,#0000 25%),linear-gradient(135deg,#f7f8ff,#f5fbff 55%,#fff8fc)}.app-shell{min-height:100vh}.topbar{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:100;background:#ffffffc2;border-bottom:1px solid #e0e4f0cc;justify-content:space-between;align-items:center;min-height:78px;padding:0 max(4%,20px);display:flex;position:sticky;top:0}.brand{align-items:center;gap:12px;display:flex}.brand-mark{color:#fff;background:linear-gradient(135deg, var(--purple), var(--cyan));border-radius:14px;place-items:center;width:45px;height:45px;font-weight:800;display:grid;box-shadow:0 9px 22px #6c5ce740}.brand h1{color:var(--navy);margin:0;font-size:19px}.brand span{color:var(--muted);font-size:11px}.header-status{color:#067647;background:#ecfdf3;border:1px solid #d9f3e5;border-radius:30px;align-items:center;gap:8px;padding:9px 13px;font-size:12px;font-weight:700;display:flex}.live-dot{background:var(--green);border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 4px #12b76a1f}.dashboard{width:min(1240px,92%);margin:38px auto 60px}.search-panel{justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:20px;display:flex}.section-label{color:var(--purple);letter-spacing:1.4px;margin:0 0 7px;font-size:11px;font-weight:800}.search-panel h2{color:var(--navy);margin:0 0 7px;font-size:clamp(28px,4vw,40px)}.search-panel h2 span{color:var(--purple)}.section-description{color:var(--muted);margin:0}.city-search{border:1px solid var(--border);min-width:360px;box-shadow:var(--shadow);background:#fff;border-radius:13px;gap:9px;padding:7px;display:flex}.city-search input{min-width:0;color:var(--text);background:0 0;border:none;outline:none;flex:1;padding:10px}.city-search button{color:#fff;background:linear-gradient(135deg, var(--purple), #8e6cf6);border:none;border-radius:9px;padding:10px 16px;font-weight:700}.quick-cities{flex-wrap:wrap;gap:9px;margin-bottom:25px;display:flex}.quick-cities button{border:1px solid var(--border);color:var(--muted);background:#fff;border-radius:30px;padding:8px 13px;font-size:12px;font-weight:700}.quick-cities button:hover,.quick-cities button.active{color:var(--purple);background:#efedff;border-color:#6c5ce738}.weather-overview{grid-template-columns:minmax(340px,1fr) minmax(420px,1.15fr);gap:20px;margin-bottom:24px;display:grid}.current-weather{color:#fff;background:linear-gradient(135deg,#5547dc,#7556e8 50%,#2da7dc);border-radius:23px;min-height:260px;position:relative;overflow:hidden;box-shadow:0 20px 40px #5048cd33}.weather-decoration{background:#ffffff14;border-radius:50%;position:absolute}.weather-decoration.one{width:220px;height:220px;top:-90px;right:-55px}.weather-decoration.two{width:160px;height:160px;bottom:-80px;left:80px}.weather-content{z-index:1;flex-direction:column;justify-content:space-between;min-height:260px;padding:30px;display:flex;position:relative}.weather-label{color:#ffffffb8;letter-spacing:1.3px;margin:0;font-size:11px;font-weight:800}.weather-content h2{margin:6px 0 0;font-size:34px}.weather-date{color:#ffffffba;margin:4px 0}.current-temperature{align-items:center;gap:20px;display:flex}.weather-symbol{font-size:55px}.current-temperature strong{font-size:52px;line-height:1;display:block}.current-temperature span{color:#ffffffc7;margin-top:6px;display:block}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;display:grid}.stat-card{border:1px solid var(--border);background:var(--card);min-height:120px;box-shadow:var(--shadow);border-radius:18px;align-items:center;gap:17px;padding:20px;display:flex}.stat-icon{border-radius:14px;flex-shrink:0;place-items:center;width:48px;height:48px;font-size:21px;display:grid}.stat-card p{color:var(--muted);margin:0 0 4px;font-size:12px;font-weight:600}.stat-card h3{color:var(--navy);margin:0;font-size:24px}.stat-card h3 span{color:var(--muted);font-size:12px;font-weight:600}.stat-card.purple .stat-icon{color:var(--purple);background:#efedff}.stat-card.blue .stat-icon{color:var(--blue);background:#eaf3ff}.stat-card.green .stat-icon{color:var(--green);background:#e9fbf2}.stat-card.orange .stat-icon{color:var(--orange);background:#fff5e6}.content-card,.placeholder-card{border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow);border-radius:20px;padding:25px}.card-heading{justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px;display:flex}.card-heading h2,.placeholder-card h2{color:var(--navy);margin:0;font-size:20px}.location-pill{color:var(--purple);background:#efedff;border-radius:30px;padding:7px 11px;font-size:11px;font-weight:700}.forecast-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;display:grid}.forecast-card{text-align:center;background:linear-gradient(#fff,#fafbff);border:1px solid #eef0f6;border-radius:14px;padding:16px 10px}.forecast-card p{color:var(--muted);margin:0;font-size:12px;font-weight:700}.forecast-icon{margin:15px 0;font-size:27px}.forecast-temp{justify-content:center;gap:7px;display:flex}.forecast-temp strong{color:var(--navy)}.forecast-temp span{color:#98a2b3}.analytics-placeholder{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px;display:grid}.fake-chart{align-items:flex-end;gap:10px;height:150px;margin-top:25px;display:flex}.fake-chart span{background:linear-gradient(#6c5ce7b3,#6c5ce71f);border-radius:8px 8px 0 0;flex:1}.fake-chart span:first-child{height:35%}.fake-chart span:nth-child(2){height:50%}.fake-chart span:nth-child(3){height:65%}.fake-chart span:nth-child(4){height:48%}.fake-chart span:nth-child(5){height:78%}.fake-chart span:nth-child(6){height:62%}.fake-bars{align-items:flex-end;gap:16px;height:150px;margin-top:25px;display:flex}.fake-bars span{background:linear-gradient(#00bcd4,#00bcd426);border-radius:8px 8px 0 0;width:15%}.fake-bars span:first-child{height:30%}.fake-bars span:nth-child(2){height:65%}.fake-bars span:nth-child(3){height:45%}.fake-bars span:nth-child(4){height:80%}.fake-bars span:nth-child(5){height:55%}.placeholder-message{color:var(--muted);margin-bottom:0;font-size:12px}@media (width<=1000px){.weather-overview{grid-template-columns:1fr}.forecast-grid{grid-template-columns:repeat(4,1fr)}}@media (width<=760px){.search-panel{flex-direction:column;align-items:stretch}.city-search{width:100%;min-width:0}.analytics-placeholder{grid-template-columns:1fr}.forecast-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=520px){.topbar{min-height:70px}.header-status{display:none}.dashboard{width:94%;margin-top:25px}.city-search{flex-direction:column}.stats-grid,.forecast-grid{grid-template-columns:1fr}.weather-content{padding:23px}.current-temperature strong{font-size:44px}}.state-card{border:1px solid var(--border);min-height:180px;box-shadow:var(--shadow);background:#fffffff0;border-radius:20px;align-items:center;gap:20px;margin-top:25px;padding:28px;display:flex}.state-card h3{color:var(--navy);margin:0 0 5px}.state-card p{color:var(--muted);margin:0}.loader{border:4px solid #e9e7ff;border-top-color:var(--purple);border-radius:50%;flex-shrink:0;width:45px;height:45px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error-state{background:#fff7f8;border-color:#fecdd3}.state-icon{color:#fff;background:#e11d48;border-radius:50%;flex-shrink:0;place-items:center;width:45px;height:45px;font-weight:800;display:grid}.error-state button{color:#fff;cursor:pointer;background:#e11d48;border:none;border-radius:8px;margin-top:12px;padding:9px 14px;font-weight:700}.rain-chance{color:#2f80ed;margin-top:11px;font-size:11px;font-weight:700;display:block}.analytics-section{margin-top:24px}.analytics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;display:grid}.analytics-card{border:1px solid var(--border);min-width:0;box-shadow:var(--shadow);background:#fffffff0;border-radius:20px;padding:25px}.analytics-heading{justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:25px;display:flex}.analytics-heading h2{color:var(--navy);margin:0;font-size:20px}.chart-tag{text-align:center;border-radius:30px;min-width:43px;padding:7px 10px;font-size:11px;font-weight:800}.purple-tag{color:var(--purple);background:#efedff}.blue-tag{color:#087ca7;background:#e5f9fd}.orange-tag{color:#c76b00;background:#fff4df}.chart-wrapper{width:100%;height:300px;position:relative}.weekly-chart-card{margin-top:20px}.weekly-chart-card .chart-wrapper{height:320px}@media (width<=850px){.analytics-grid{grid-template-columns:1fr}}@media (width<=520px){.analytics-card{padding:18px}.analytics-heading{flex-direction:column}.chart-wrapper,.weekly-chart-card .chart-wrapper{height:260px}}.location-actions{justify-content:flex-end;margin:-8px 0 16px;display:flex}.location-button{color:var(--purple);cursor:pointer;background:#f2f0ff;border:1px solid #6c5ce72e;border-radius:10px;padding:9px 14px;font-weight:700}.location-button:hover{background:#eae7ff}.location-button:disabled{opacity:.55;cursor:not-allowed}.location-actions{flex-wrap:wrap;gap:10px}.favorite-button{color:#b76e00;cursor:pointer;background:#fffaf0;border:1px solid #f6d58b;border-radius:10px;padding:9px 14px;font-weight:700}.favorite-button.active{color:#fff;background:linear-gradient(135deg,#f59e0b,#f97316);border-color:#f59e0b}.favorites-panel{background:#fffaf0db;border:1px solid #f8dfae;border-radius:13px;align-items:center;gap:15px;margin:-7px 0 24px;padding:14px 16px;display:flex}.favorites-panel>div:first-child{color:#b76e00;font-size:12px;font-weight:800}.favorite-cities{flex-wrap:wrap;gap:8px;display:flex}.favorite-cities button{color:#9a5d00;cursor:pointer;background:#ffefd0;border:none;border-radius:20px;padding:7px 11px;font-weight:700}.search-area{min-width:360px}.search-error{color:#d92d20;margin:7px 4px 0;font-size:12px;font-weight:600}.city-search button:disabled{opacity:.65;cursor:not-allowed}.recents-panel{background:#ffffffb3;border:1px solid #e6e8f0;border-radius:12px;align-items:center;gap:12px;margin:-8px 0 20px;padding:12px 14px;display:flex}.panel-title{color:var(--muted);text-transform:uppercase;font-size:11px;font-weight:800}.recent-cities{flex-wrap:wrap;flex:1;gap:7px;display:flex}.recent-cities button{color:#475467;cursor:pointer;background:#fff;border:1px solid #e8eaf2;border-radius:20px;padding:6px 10px;font-size:11px;font-weight:700}.clear-recents{color:#d92d20;cursor:pointer;background:0 0;border:none;padding:6px;font-size:11px;font-weight:700}.header-tools{align-items:center;gap:12px;display:flex}.unit-toggle{border:1px solid var(--border);background:#fff;border-radius:10px;padding:4px;display:flex}.unit-toggle button{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:7px;padding:7px 10px;font-size:12px;font-weight:800}.unit-toggle button.active{color:#fff;background:linear-gradient(135deg, var(--purple), #8e6cf6)}.sun-card{border:1px solid var(--border);box-shadow:var(--shadow);background:linear-gradient(135deg,#fff7e6e6,#fff0f6d9);border-radius:18px;grid-template-columns:1fr auto 1fr;align-items:center;gap:25px;margin-bottom:24px;padding:20px 25px;display:grid}.sun-card>div:not(.sun-divider){align-items:center;gap:15px;display:flex}.sun-card>div:last-child{justify-content:flex-end}.sun-icon{background:#f59e0b26;border-radius:13px;place-items:center;width:45px;height:45px;font-size:22px;display:grid}.sun-icon.sunset{background:#ec48991f}.sun-card p{color:var(--muted);margin:0 0 3px;font-size:11px;font-weight:700}.sun-card strong{color:var(--navy);font-size:18px}.sun-divider{background:#98a2b340;width:1px;height:45px}@media (width<=760px){.search-area{width:100%;min-width:0}.recents-panel,.favorites-panel{flex-direction:column;align-items:flex-start}.location-actions{justify-content:flex-start}}@media (width<=520px){.header-tools{gap:7px}.unit-toggle button{padding:6px 8px}.sun-card{grid-template-columns:1fr;gap:15px}.sun-divider{width:100%;height:1px}.sun-card>div:last-child{justify-content:flex-start}}