/* ═══════════════════════════════════════════════════════════
   SkyCast Pro — Premium Weather App Styles
   ═══════════════════════════════════════════════════════════ */

:root {
  --clr-bg-1: #0f1724;
  --clr-bg-2: #1a2540;
  --clr-glass: rgba(255,255,255,0.07);
  --clr-glass-border: rgba(255,255,255,0.12);
  --clr-glass-hover: rgba(255,255,255,0.11);
  --clr-text: #e8f0fe;
  --clr-text-muted: rgba(232,240,254,0.6);
  --clr-accent: #5b9cf6;
  --clr-accent-2: #a78bfa;
  --clr-accent-gold: #fbbf24;
  --clr-success: #34d399;
  --clr-danger: #f87171;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --shadow-glass: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.1);
  --shadow-glow: 0 0 40px rgba(91,156,246,0.15);
  --font-main: 'Inter', system-ui, sans-serif;
  --font-display: 'Orbitron', monospace;
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}

body.weather-sunny  { --clr-bg-1:#1a1f0f; --clr-bg-2:#2a3318; --clr-accent:#fbbf24; }
body.weather-cloudy { --clr-bg-1:#161c27; --clr-bg-2:#1e2535; --clr-accent:#94a3b8; }
body.weather-rainy  { --clr-bg-1:#0d1520; --clr-bg-2:#10243a; --clr-accent:#60a5fa; }
body.weather-stormy { --clr-bg-1:#0c0f18; --clr-bg-2:#141626; --clr-accent:#a78bfa; }
body.weather-snowy  { --clr-bg-1:#0f1a2e; --clr-bg-2:#1a2d44; --clr-accent:#bae6fd; }
body.weather-night  { --clr-bg-1:#05080f; --clr-bg-2:#0d1424; --clr-accent:#818cf8; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-main);
  background: linear-gradient(135deg, var(--clr-bg-1) 0%, var(--clr-bg-2) 100%);
  min-height: 100vh; color: var(--clr-text); overflow-x: hidden;
  transition: background var(--transition);
}
a { color: var(--clr-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input { font-family: inherit; }
ul { list-style: none; }

.bg-particles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.particle {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, var(--clr-accent), transparent 70%);
  animation: float-particle linear infinite; opacity: 0;
}
.particle:nth-child(1)  { width:300px;height:300px;left:10%;top:20%;animation-duration:25s;animation-delay:0s;opacity:.04; }
.particle:nth-child(2)  { width:200px;height:200px;left:80%;top:60%;animation-duration:30s;animation-delay:3s;opacity:.05; }
.particle:nth-child(3)  { width:150px;height:150px;left:50%;top:10%;animation-duration:20s;animation-delay:6s;opacity:.03; }
.particle:nth-child(4)  { width:250px;height:250px;left:5%;top:70%;animation-duration:35s;animation-delay:9s;opacity:.04; }
.particle:nth-child(5)  { width:180px;height:180px;left:60%;top:85%;animation-duration:28s;animation-delay:12s;opacity:.03; }
.particle:nth-child(6)  { width:120px;height:120px;left:30%;top:50%;animation-duration:22s;animation-delay:2s;opacity:.05; }
.particle:nth-child(7)  { width:350px;height:350px;left:70%;top:5%;animation-duration:40s;animation-delay:5s;opacity:.03; }
.particle:nth-child(8)  { width:90px;height:90px;left:20%;top:90%;animation-duration:18s;animation-delay:8s;opacity:.06; }
.particle:nth-child(9)  { width:220px;height:220px;left:90%;top:30%;animation-duration:32s;animation-delay:15s;opacity:.04; }
.particle:nth-child(10) { width:160px;height:160px;left:40%;top:75%;animation-duration:26s;animation-delay:1s;opacity:.05; }

@keyframes float-particle {
  0%   { transform:translateY(0) scale(1);opacity:.05; }
  50%  { transform:translateY(-60px) scale(1.1);opacity:.08; }
  100% { transform:translateY(0) scale(1);opacity:.05; }
}

.weather-animation { position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden; }
.raindrop { position:absolute;top:-20px;width:2px;background:linear-gradient(to bottom,transparent,rgba(147,197,253,.7));border-radius:2px;animation:fall linear infinite; }
.snowflake { position:absolute;top:-20px;color:rgba(255,255,255,.7);font-size:14px;animation:snow-fall linear infinite; }
.lightning { position:fixed;inset:0;background:rgba(167,139,250,.15);animation:lightning-flash 5s infinite;pointer-events:none;z-index:2; }
@keyframes fall { to { transform:translateY(110vh); } }
@keyframes snow-fall { to { transform:translateY(110vh) rotate(360deg); } }
@keyframes lightning-flash { 0%,89%,91%,100%{opacity:0;} 90%{opacity:1;} }

.glass-card {
  background: var(--clr-glass);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--clr-glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-glass);
  transition: var(--transition);
}
.glass-card:hover { background: var(--clr-glass-hover); }

.app-container {
  position:relative;z-index:2;max-width:1100px;margin:0 auto;
  padding:24px 20px 40px;min-height:100vh;
  display:flex;flex-direction:column;gap:20px;
}

.app-header { display:flex;align-items:center;justify-content:space-between;padding:12px 0; }
.logo { display:flex;align-items:center;gap:10px; }
.logo-icon { width:40px;height:40px;animation:spin-slow 12s linear infinite; }
@keyframes spin-slow { to { transform:rotate(360deg); } }
.logo-text { font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--clr-text);letter-spacing:1px; }
.logo-accent { color:var(--clr-accent); }
.header-controls { display:flex;align-items:center;gap:14px; }
.unit-toggle { display:flex;gap:2px;background:var(--clr-glass);border:1px solid var(--clr-glass-border);border-radius:50px;padding:3px; }
.unit-btn { padding:6px 16px;border-radius:50px;font-size:.85rem;font-weight:600;color:var(--clr-text-muted);transition:var(--transition); }
.unit-btn.active { background:var(--clr-accent);color:#fff;box-shadow:0 2px 8px rgba(91,156,246,.4); }
.header-time { font-family:var(--font-display);font-size:.8rem;color:var(--clr-text-muted);letter-spacing:1px; }

.search-section { position:relative; }
.search-wrapper { display:flex;gap:10px;align-items:center;position:relative; }
.search-bar { flex:1;display:flex;align-items:center;gap:10px;padding:0 16px;height:52px; }
.search-icon { width:20px;height:20px;color:var(--clr-text-muted);flex-shrink:0; }
.search-input { flex:1;background:none;border:none;outline:none;color:var(--clr-text);font-size:1rem; }
.search-input::placeholder { color:var(--clr-text-muted); }
.search-clear { color:var(--clr-text-muted);padding:4px;border-radius:4px;transition:var(--transition); }
.search-clear svg { width:18px;height:18px;display:block; }
.search-clear:hover { color:var(--clr-text); }
.search-dropdown { position:absolute;top:calc(100% + 8px);left:0;width:calc(100% - 62px);z-index:100;overflow:hidden;padding:6px; }
.search-dropdown li { padding:10px 14px;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:.9rem;transition:var(--transition); }
.search-dropdown li:hover, .search-dropdown li[aria-selected="true"] { background:rgba(91,156,246,.15); }
.geo-btn { width:52px;height:52px;border-radius:var(--radius-sm)!important;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--clr-accent);transition:var(--transition); }
.geo-btn svg { width:22px;height:22px; }
.geo-btn:hover { background:rgba(91,156,246,.15);transform:scale(1.05); }
.geo-btn.loading { animation:pulse 1.2s ease infinite; }

.loading-state, .error-state { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:60px 20px;text-align:center;color:var(--clr-text-muted); }
.spinner { width:48px;height:48px;border-radius:50%;border:3px solid var(--clr-glass-border);border-top-color:var(--clr-accent);animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.error-state svg { width:48px;height:48px;color:var(--clr-danger); }
.error-state p { font-size:1.05rem; }
.hidden { display:none!important; }

.btn-primary { background:linear-gradient(135deg,var(--clr-accent),var(--clr-accent-2));color:#fff;padding:10px 28px;border-radius:50px;font-weight:600;font-size:.9rem;transition:var(--transition);box-shadow:0 4px 16px rgba(91,156,246,.3); }
.btn-primary:hover { transform:translateY(-2px);box-shadow:0 6px 24px rgba(91,156,246,.45); }

.current-weather { display:flex;align-items:flex-start;justify-content:space-between;padding:32px;gap:20px;position:relative;overflow:hidden; }
.current-weather::before { content:'';position:absolute;top:-50%;right:-10%;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(91,156,246,.08),transparent 70%);pointer-events:none; }
.location-row { display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap; }
.location-pin { width:18px;height:18px;color:var(--clr-accent);flex-shrink:0; }
.city-name { font-size:1.8rem;font-weight:700;line-height:1.1; }
.country-badge { background:rgba(91,156,246,.2);border:1px solid rgba(91,156,246,.3);color:var(--clr-accent);font-size:.75rem;font-weight:600;padding:3px 10px;border-radius:20px;letter-spacing:.5px; }
.current-date { color:var(--clr-text-muted);font-size:.9rem;margin-bottom:12px; }
.temp-display { display:flex;align-items:flex-start;gap:4px;line-height:1;margin-bottom:8px; }
.temperature { font-family:var(--font-display);font-size:5rem;font-weight:900;background:linear-gradient(135deg,var(--clr-text),var(--clr-accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1; }
.temp-unit-label { font-family:var(--font-display);font-size:2rem;font-weight:400;color:var(--clr-text-muted);margin-top:10px; }
.weather-desc { font-size:1.05rem;text-transform:capitalize;color:var(--clr-text-muted);margin-bottom:10px; }
.feels-row { display:flex;gap:16px;font-size:.85rem;color:var(--clr-text-muted);flex-wrap:wrap; }
.feels-row strong { color:var(--clr-text); }
.current-right { display:flex;flex-direction:column;align-items:flex-end;gap:20px;flex-shrink:0; }
.weather-icon-large { font-size:6rem;line-height:1;filter:drop-shadow(0 0 20px rgba(255,200,0,.3));animation:icon-float 4s ease-in-out infinite; }
@keyframes icon-float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.sun-times { display:flex;gap:20px; }
.sun-item { display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--clr-text-muted); }
.sun-item svg { width:18px;height:18px;color:var(--clr-accent-gold);flex-shrink:0; }
.sun-label { display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px; }
.sun-time { display:block;font-weight:600;color:var(--clr-text);font-size:.85rem; }

.stats-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px; }
.stat-card { padding:18px 20px;display:flex;align-items:center;gap:14px;transition:var(--transition); }
.stat-card:hover { transform:translateY(-3px);box-shadow:var(--shadow-glass),var(--shadow-glow); }
.stat-icon { font-size:1.8rem;flex-shrink:0; }
.stat-label { display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;color:var(--clr-text-muted);margin-bottom:2px; }
.stat-value { font-size:1.4rem;font-weight:700;font-family:var(--font-display);display:block; }
.stat-sub { font-size:.75rem;color:var(--clr-text-muted); }
.stat-bar { height:4px;background:rgba(255,255,255,.1);border-radius:4px;margin-top:8px;overflow:hidden; }
.stat-bar-fill { height:100%;background:linear-gradient(90deg,var(--clr-accent),var(--clr-accent-2));border-radius:4px;transition:width 1s ease;width:0%; }

.section-title { font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--clr-text-muted);display:flex;align-items:center;gap:8px;margin-bottom:16px; }
.section-title svg { width:16px;height:16px; }

.hourly-section { padding:22px 22px 14px; }
.hourly-scroll { display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:var(--clr-glass-border) transparent; }
.hourly-scroll::-webkit-scrollbar { height:4px; }
.hourly-scroll::-webkit-scrollbar-track { background:transparent; }
.hourly-scroll::-webkit-scrollbar-thumb { background:var(--clr-glass-border);border-radius:4px; }
.hourly-item { flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 16px;border-radius:var(--radius-sm);background:rgba(255,255,255,.05);border:1px solid var(--clr-glass-border);transition:var(--transition);min-width:80px; }
.hourly-item:hover { background:rgba(91,156,246,.12);transform:translateY(-3px); }
.hourly-time { font-size:.72rem;color:var(--clr-text-muted);font-weight:500; }
.hourly-icon { font-size:1.6rem; }
.hourly-temp { font-size:.95rem;font-weight:700; }
.hourly-pop { font-size:.68rem;color:#60a5fa; }

.chart-section { padding:22px; }
.chart-wrapper { position:relative;height:200px; }

.daily-grid { display:grid;grid-template-columns:repeat(7,1fr);gap:10px; }
.daily-card { padding:18px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;border-radius:var(--radius-md);text-align:center;background:var(--clr-glass);border:1px solid var(--clr-glass-border);transition:var(--transition);cursor:default; }
.daily-card:hover { transform:translateY(-5px);background:var(--clr-glass-hover);box-shadow:var(--shadow-glass),var(--shadow-glow); }
.daily-card.today { border-color:var(--clr-accent);background:rgba(91,156,246,.1); }
.daily-day { font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;color:var(--clr-text-muted);font-weight:600; }
.daily-icon { font-size:2rem; }
.daily-high { font-size:1rem;font-weight:700; }
.daily-low { font-size:.8rem;color:var(--clr-text-muted); }
.daily-pop { font-size:.68rem;color:#60a5fa; }

.app-footer { text-align:center;font-size:.78rem;color:var(--clr-text-muted);padding-top:8px;display:flex;flex-direction:column;gap:4px; }
.last-updated { font-size:.72rem; }

@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.5;} }

@media (max-width:900px) { .daily-grid{grid-template-columns:repeat(4,1fr);} }
@media (max-width:700px) {
  .current-weather{flex-direction:column;}
  .current-right{align-items:flex-start;flex-direction:row;flex-wrap:wrap;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .daily-grid{grid-template-columns:repeat(4,1fr);}
  .temperature{font-size:4rem;}
  .city-name{font-size:1.4rem;}
}
@media (max-width:480px) {
  .app-container{padding:16px 14px 32px;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .daily-grid{grid-template-columns:repeat(2,1fr);}
  .logo-text{font-size:1.1rem;}
  .header-time{display:none;}
  .weather-icon-large{font-size:4.5rem;}
}