/* =========================================================
   AURACAST — style.css
   Cyberpunk + Atmospheric Intelligence + Premium Glass UI
   ========================================================= */

/* ---------- 1. THEME VARIABLES ---------- */
:root{
  --void:#05070D;
  --obsidian:#0A0F18;
  --navy-glass:#101827;
  --cyan:#00E5FF;
  --violet:#8B5CF6;
  --green:#22C55E;
  --amber:#F59E0B;
  --red:#EF4444;
  --atmos-blue:#38BDF8;

  --accent: var(--cyan);
  --accent-2: var(--violet);

  --bg-1: var(--void);
  --bg-2: var(--obsidian);
  --bg-3: var(--navy-glass);

  --text-hi: #EAF2FF;
  --text-md: #9FB1CC;
  --text-lo: #64748B;

  --glass-alpha: 0.55;
  --blur: 18px;
  --bg-intensity: 0.55;
  --anim-scale: 1;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 9px;

  --border: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.16);

  --shadow-soft: 0 20px 50px -20px rgba(0,0,0,0.6);
  --glow-accent: 0 0 24px -4px color-mix(in srgb, var(--accent) 65%, transparent);

  --gap-unit: 20px;
  --pad-unit: 20px;

  --ff-display: 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ff-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ff-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

[data-density="compact"]{
  --gap-unit: 12px;
  --pad-unit: 14px;
}

/* Theme presets */
[data-theme="aurora"]{ --accent:#00E5FF; --accent-2:#22C55E; }
[data-theme="cyber-violet"]{ --accent:#8B5CF6; --accent-2:#00E5FF; }
[data-theme="arctic-blue"]{ --accent:#38BDF8; --accent-2:#8B5CF6; }
[data-theme="solar"]{ --accent:#F59E0B; --accent-2:#EF4444; }
[data-theme="midnight"]{ --accent:#8B5CF6; --accent-2:#38BDF8; }

@media (prefers-reduced-motion: reduce){
  :root{ --anim-scale: 0; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
[data-anim="off"] *{ animation: none !important; }

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--ff-body);
  color:var(--text-hi);
  background:var(--bg-1);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation;
}
button, input{ font-family:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; }
img,svg{ display:block; max-width:100%; }
h1,h2,h3,p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hidden{ display:none !important; }
.skip-link{
  position:absolute; left:8px; top:-48px; z-index:999;
  background:var(--accent); color:#00131a; padding:10px 16px; border-radius:8px; font-weight:700;
  transition: top .2s ease;
}
.skip-link:focus{ top:8px; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

/* ---------- 3. BACKGROUND ---------- */
#fxCanvas{
  position:fixed; inset:0; z-index:0; width:100%; height:100%;
  background:
    radial-gradient(1200px 800px at 15% -10%, color-mix(in srgb, var(--accent) calc(var(--bg-intensity)*22%), transparent), transparent 60%),
    radial-gradient(1000px 700px at 100% 10%, color-mix(in srgb, var(--accent-2) calc(var(--bg-intensity)*18%), transparent), transparent 60%),
    linear-gradient(180deg, var(--void), var(--obsidian) 60%, var(--void));
  pointer-events:none;
}

/* ---------- 4. APP SHELL ---------- */
.app-shell{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: 264px 1fr;
  min-height:100vh;
}
[data-sidebar="collapsed"] .app-shell{ grid-template-columns: 84px 1fr; }

/* ---------- 5. GLASS PANEL BASE ---------- */
.panel, .hero-card, .modal, .palette, .alerts-panel, .search-results, .toast, .widget-preview{
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-3) calc(var(--glass-alpha)*100%), transparent), color-mix(in srgb, var(--bg-2) calc(var(--glass-alpha)*100%), transparent));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow-soft);
}

/* ---------- 6. SIDEBAR ---------- */
.sidebar{
  position:relative; z-index:5;
  display:flex; flex-direction:column;
  padding:20px 16px;
  border-right:1px solid var(--border);
  background:linear-gradient(180deg, rgba(10,15,24,0.7), rgba(5,7,13,0.85));
  backdrop-filter:blur(20px);
  gap:18px;
  height:100vh;
  position:sticky; top:0;
}
.sidebar-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.brand{ display:flex; align-items:center; gap:10px; overflow:hidden; }
.brand-mark{ color:var(--accent); flex-shrink:0; filter:drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 60%, transparent)); }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; white-space:nowrap; }
.brand-name{ font-weight:800; font-size:15px; letter-spacing:2px; }
.brand-tag{ font-size:10px; color:var(--text-lo); letter-spacing:0.6px; }
[data-sidebar="collapsed"] .brand-text{ display:none; }

.icon-btn{
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-md); border:1px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.icon-btn:hover{ background:rgba(255,255,255,0.06); color:var(--text-hi); border-color:var(--border); }
.icon-btn:active{ transform:scale(0.94); }
.icon-btn[aria-pressed="true"]{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 50%, transparent); box-shadow:var(--glow-accent); }
[data-sidebar="collapsed"] .sidebar-collapse svg{ transform:rotate(180deg); }

.sidebar-location{
  display:flex; align-items:center; gap:8px; padding:9px 12px;
  border:1px solid var(--border); border-radius:12px; color:var(--text-md); font-size:12.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sidebar-location svg{ color:var(--accent); flex-shrink:0; }
[data-sidebar="collapsed"] .sidebar-location span{ display:none; }

.sidebar-nav{ display:flex; flex-direction:column; gap:4px; flex:1; }
.nav-item{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px;
  color:var(--text-md); font-size:13.5px; font-weight:600; white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.nav-item svg{ flex-shrink:0; }
.nav-item:hover{ background:rgba(255,255,255,0.05); color:var(--text-hi); }
.nav-item.is-active{ background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent); color:var(--accent); }
[data-sidebar="collapsed"] .nav-item span{ display:none; }
[data-sidebar="collapsed"] .nav-item{ justify-content:center; }

.sidebar-bottom{ margin-top:auto; }
.mode-pill{
  display:flex; align-items:center; gap:8px; padding:9px 12px; width:100%;
  border:1px solid var(--border); border-radius:12px; font-size:11px; font-weight:700; letter-spacing:0.8px;
  color:var(--text-md);
}
.mode-dot{ width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 8px var(--amber); }
[data-live="true"] .mode-dot{ background:var(--green); box-shadow:0 0 8px var(--green); }
[data-sidebar="collapsed"] .mode-pill span:last-child{ display:none; }

.sidebar-scrim{ display:none; }

/* ---------- 7. TOPBAR ---------- */
.main-col{ min-width:0; display:flex; flex-direction:column; }
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:12px;
  padding:14px 24px;
  background:linear-gradient(180deg, rgba(10,15,24,0.75), rgba(10,15,24,0.4));
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.only-mobile{ display:none; }

.search-wrap{ position:relative; flex:1; max-width:420px; }
.search-icon{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-lo); pointer-events:none; }
.search-input{
  width:100%; padding:10px 36px 10px 36px; border-radius:12px;
  background:rgba(255,255,255,0.04); border:1px solid var(--border); color:var(--text-hi); font-size:13.5px;
  transition:border-color .15s ease, background .15s ease;
}
.search-input::placeholder{ color:var(--text-lo); }
.search-input:focus{ border-color:color-mix(in srgb, var(--accent) 60%, transparent); background:rgba(255,255,255,0.06); }
.search-clear{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:28px; height:28px; }
.search-results{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:20;
  border-radius:14px; overflow:hidden; max-height:320px; overflow-y:auto;
}
.search-result-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; font-size:13px; color:var(--text-md); cursor:pointer;
  border-bottom:1px solid var(--border);
}
.search-result-item:last-child{ border-bottom:none; }
.search-result-item:hover, .search-result-item.is-focused{ background:rgba(255,255,255,0.06); color:var(--text-hi); }
.search-empty{ padding:16px; text-align:center; color:var(--text-lo); font-size:13px; }

.topbar-right{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.datetime{ font-size:12.5px; color:var(--text-md); white-space:nowrap; display:flex; gap:6px; align-items:center; margin-right:4px; }
.dt-dot{ color:var(--text-lo); }
.unit-switch{ display:flex; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.unit-opt{ padding:8px 12px; font-size:12px; font-weight:700; color:var(--text-md); }
.unit-opt.is-active{ background:color-mix(in srgb, var(--accent) 22%, transparent); color:var(--accent); }
.badge{
  position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px; border-radius:8px;
  background:var(--red); color:#fff; font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.icon-btn{ position:relative; }

/* ---------- 8. ALERTS PANEL ---------- */
.alerts-panel{
  position:absolute; right:24px; top:66px; z-index:15; width:340px; max-width:calc(100vw - 32px);
  border-radius:16px; padding:14px;
}
.alerts-panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-weight:700; font-size:13px; }
.text-btn{ color:var(--accent); font-size:12px; font-weight:700; }
.alerts-list{ display:flex; flex-direction:column; gap:8px; max-height:320px; overflow-y:auto; }
.alert-item{
  border-radius:12px; padding:11px 12px; border:1px solid var(--border); font-size:12.5px;
  display:flex; gap:10px; align-items:flex-start;
  border-left:3px solid var(--sev-color, var(--amber));
}
.alert-item .alert-title{ font-weight:700; margin-bottom:2px; }
.alert-item .alert-desc{ color:var(--text-md); font-size:11.5px; }
.alert-dismiss{ margin-left:auto; color:var(--text-lo); flex-shrink:0; }
.alerts-empty{ text-align:center; color:var(--text-lo); font-size:12.5px; padding:20px 0; }

/* ---------- 9. DASHBOARD LAYOUT ---------- */
.dashboard{ padding:24px; display:flex; flex-direction:column; gap:var(--gap-unit); max-width:1240px; width:100%; margin:0 auto; }
.view{ display:none; flex-direction:column; gap:var(--gap-unit); animation: fadeUp .35s ease; }
.view.is-active{ display:flex; }
.view-title{ font-size:20px; font-weight:800; letter-spacing:0.3px; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-unit); }

.panel{ padding:var(--pad-unit); }
.panel-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; gap:8px; flex-wrap:wrap; }
.panel-head h2{ font-size:15.5px; font-weight:800; }
.panel-sub{ font-size:11.5px; color:var(--text-lo); }

/* ---------- 10. HERO CARD ---------- */
.hero-card{ position:relative; min-height:280px; overflow:hidden; padding:0; }
.hero-fx{ position:absolute; inset:0; width:100%; height:100%; }
.hero-content{ position:relative; z-index:2; padding:28px; display:flex; flex-direction:column; gap:18px; min-height:280px; justify-content:center; }
.hero-top-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.hero-place{ display:flex; flex-direction:column; gap:2px; }
.hero-city{ font-size:19px; font-weight:800; }
.hero-country{ font-size:12px; color:var(--text-md); }
.hero-updated{ font-size:11px; color:var(--text-lo); text-align:right; }
.hero-main{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.hero-icon{ width:84px; height:84px; flex-shrink:0; filter:drop-shadow(0 0 20px color-mix(in srgb, var(--accent) 45%, transparent)); }
.hero-temp{ font-size:64px; font-weight:200; letter-spacing:-2px; line-height:1; font-family:var(--ff-display); }
.hero-temp sup{ font-size:28px; font-weight:300; }
.hero-cond{ font-size:15px; font-weight:700; color:var(--text-hi); }
.hero-feels{ font-size:12.5px; color:var(--text-md); }
.hero-hilo{ font-size:12.5px; color:var(--text-md); }
.hero-stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:6px; }
.hero-stat{ display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,0.04); border:1px solid var(--border); }
.hero-stat .hs-label{ font-size:10px; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-lo); }
.hero-stat .hs-value{ font-size:14px; font-weight:700; }

.hero-skel{ width:100%; height:230px; margin:auto; }

/* ---------- 11. SKELETON / SHIMMER ---------- */
.skeleton-block{
  border-radius:14px;
  background:linear-gradient(100deg, rgba(255,255,255,0.03) 30%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.03) 70%);
  background-size:200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer{ 0%{background-position:180% 0;} 100%{background-position:-20% 0;} }

/* ---------- 12. SUN / MOON CARDS ---------- */
.sun-card, .moon-card{ display:flex; flex-direction:column; gap:12px; padding:var(--pad-unit); }
.sm-head{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; }
.sm-head svg{ color:var(--accent); }
.sun-arc-wrap{ display:flex; justify-content:center; padding:6px 0; }
.sun-row{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--text-md); }
.sun-row b{ color:var(--text-hi); font-size:14px; display:block; }
.moon-visual{ display:flex; justify-content:center; padding:4px 0; }
.moon-info{ text-align:center; }
.moon-info .mi-phase{ font-weight:800; font-size:14px; }
.moon-info .mi-sub{ font-size:11.5px; color:var(--text-md); margin-top:2px; }

/* ---------- 13. HOURLY FORECAST ---------- */
.hourly-scroll{
  display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x proximity;
}
.hourly-scroll::-webkit-scrollbar{ height:6px; }
.hourly-scroll::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:10px; }
.hour-card{
  flex:0 0 auto; width:88px; padding:14px 10px; border-radius:14px; text-align:center;
  border:1px solid var(--border); background:rgba(255,255,255,0.03); scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:transform .15s ease, border-color .15s ease;
}
.hour-card:hover{ transform:translateY(-3px); border-color:var(--border-strong); }
.hour-card.is-now{ border-color:color-mix(in srgb, var(--accent) 60%, transparent); box-shadow:var(--glow-accent); background:color-mix(in srgb, var(--accent) 8%, transparent); }
.hour-time{ font-size:11px; color:var(--text-lo); font-weight:700; }
.hour-icon{ width:30px; height:30px; }
.hour-temp{ font-size:15px; font-weight:800; }
.hour-rain{ font-size:10.5px; color:var(--atmos-blue); display:flex; align-items:center; gap:3px; }
.hour-wind{ font-size:9.5px; color:var(--text-lo); }

/* ---------- 14. 7-DAY FORECAST ---------- */
.forecast7-list{ display:flex; flex-direction:column; gap:2px; }
.day-row{
  display:grid; grid-template-columns:100px 32px 1fr auto 120px; align-items:center; gap:14px;
  padding:13px 10px; border-radius:12px; transition:background .15s ease;
}
.day-row:hover{ background:rgba(255,255,255,0.04); }
.day-name{ font-weight:700; font-size:13.5px; }
.day-icon{ width:26px; height:26px; }
.day-cond{ font-size:12.5px; color:var(--text-md); }
.day-rain{ font-size:11.5px; color:var(--atmos-blue); text-align:right; white-space:nowrap; }
.day-hilo{ display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.day-hi{ font-weight:800; font-size:13.5px; width:34px; text-align:right; }
.day-lo{ color:var(--text-lo); font-size:13.5px; width:34px; text-align:right; }
.day-bar{ width:56px; height:4px; border-radius:3px; background:rgba(255,255,255,0.08); overflow:hidden; }
.day-bar-fill{ height:100%; border-radius:3px; background:linear-gradient(90deg, var(--atmos-blue), var(--amber)); }

/* ---------- 15. METRIC GRID (atmosphere) ---------- */
.metric-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.metric-card{ padding:16px; border-radius:16px; border:1px solid var(--border); background:rgba(255,255,255,0.03); display:flex; flex-direction:column; gap:10px; }
.metric-top{ display:flex; justify-content:space-between; align-items:flex-start; }
.metric-name{ font-size:11.5px; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-lo); font-weight:700; }
.metric-value{ font-size:22px; font-weight:800; }
.metric-value span{ font-size:13px; font-weight:600; color:var(--text-md); }
.metric-status{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.metric-bar{ height:6px; border-radius:4px; background:rgba(255,255,255,0.08); overflow:hidden; }
.metric-bar-fill{ height:100%; border-radius:4px; }
.status-good{ background:color-mix(in srgb, var(--green) 22%, transparent); color:var(--green); }
.status-moderate{ background:color-mix(in srgb, var(--amber) 22%, transparent); color:var(--amber); }
.status-poor{ background:color-mix(in srgb, var(--red) 22%, transparent); color:var(--red); }

/* ---------- 16. AQI ---------- */
.aqi-hero{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--border); }
.aqi-ring-wrap{ position:relative; width:120px; height:120px; flex-shrink:0; }
.aqi-ring-num{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.aqi-ring-num b{ font-size:28px; }
.aqi-ring-num span{ font-size:10px; color:var(--text-lo); text-transform:uppercase; }
.aqi-status-text{ font-size:17px; font-weight:800; margin-bottom:4px; }
.aqi-desc{ font-size:13px; color:var(--text-md); max-width:480px; line-height:1.5; }
.aqi-sub-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.aqi-demo-note{ margin-top:16px; font-size:11.5px; color:var(--text-lo); display:flex; gap:6px; align-items:center; }

/* ---------- 17. ADVISOR LISTS ---------- */
.advisor-list{ display:flex; flex-direction:column; gap:10px; }
.advisor-item{ padding:13px 14px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,0.03); }
.advisor-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px; }
.advisor-name{ font-weight:700; font-size:13.5px; display:flex; align-items:center; gap:8px; }
.advisor-score{ font-weight:800; font-size:13.5px; }
.advisor-bar{ height:5px; border-radius:4px; background:rgba(255,255,255,0.08); overflow:hidden; margin-bottom:6px; }
.advisor-bar-fill{ height:100%; border-radius:4px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); }
.advisor-desc{ font-size:12px; color:var(--text-md); }
.advisor-window{ font-size:11px; color:var(--text-lo); margin-top:4px; }

.chip-grid{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{ display:flex; align-items:center; gap:7px; padding:9px 13px; border-radius:20px; border:1px solid var(--border); background:rgba(255,255,255,0.04); font-size:12.5px; font-weight:600; }
.chip svg{ color:var(--accent); }

/* ---------- 18. TIMELINE ---------- */
.timeline{ position:relative; padding-left:22px; display:flex; flex-direction:column; gap:18px; }
.timeline::before{ content:''; position:absolute; left:5px; top:4px; bottom:4px; width:2px; background:linear-gradient(var(--border-strong), transparent); }
.tl-item{ position:relative; }
.tl-item::before{ content:''; position:absolute; left:-22px; top:3px; width:11px; height:11px; border-radius:50%; background:var(--tl-color, var(--accent)); box-shadow:0 0 10px var(--tl-color, var(--accent)); }
.tl-time{ font-size:11px; color:var(--text-lo); font-weight:700; }
.tl-label{ font-size:13.5px; font-weight:700; }
.tl-desc{ font-size:12px; color:var(--text-md); }

/* ---------- 19. EXPORT PANEL ---------- */
.export-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{ display:flex; align-items:center; gap:8px; padding:11px 18px; border-radius:12px; font-weight:700; font-size:13px; border:1px solid var(--border); transition:transform .12s ease, box-shadow .15s ease, background .15s ease; }
.btn:active{ transform:scale(0.97); }
.btn-primary{ background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#04131a; border-color:transparent; box-shadow:var(--glow-accent); }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-ghost{ background:rgba(255,255,255,0.04); color:var(--text-hi); }
.btn-ghost:hover{ background:rgba(255,255,255,0.08); }
.btn-danger{ background:color-mix(in srgb, var(--red) 18%, transparent); color:var(--red); }

/* ---------- 20. FAVORITES ---------- */
.favorites-list{ display:flex; flex-wrap:wrap; gap:10px; }
.fav-chip{ display:flex; align-items:center; gap:8px; padding:9px 10px 9px 14px; border-radius:20px; border:1px solid var(--border); background:rgba(255,255,255,0.04); font-size:12.5px; font-weight:600; }
.fav-chip button{ width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text-lo); }
.fav-chip button:hover{ background:rgba(255,255,255,0.1); color:var(--red); }
.fav-add-btn{ display:flex; align-items:center; gap:6px; padding:9px 14px; border-radius:20px; border:1px dashed var(--border-strong); color:var(--text-md); font-size:12.5px; font-weight:600; }
.favorites-empty{ color:var(--text-lo); font-size:12.5px; }

/* ---------- 21. WIDGET STUDIO ---------- */
.widget-style-picker{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.widget-style-opt{ padding:10px 14px; border-radius:12px; border:1px solid var(--border); font-size:12.5px; font-weight:700; color:var(--text-md); background:rgba(255,255,255,0.03); }
.widget-style-opt.is-active{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 55%, transparent); box-shadow:var(--glow-accent); }
.widget-preview-wrap{ display:flex; justify-content:center; padding:24px 0; background:rgba(0,0,0,0.2); border-radius:16px; margin-bottom:16px; }
.widget-preview{ min-width:260px; }
.widget-embed-actions{ display:flex; gap:10px; margin-bottom:12px; }
.embed-code{ background:rgba(0,0,0,0.35); border:1px solid var(--border); border-radius:12px; padding:14px; font-family:var(--ff-mono); font-size:11.5px; color:var(--atmos-blue); overflow-x:auto; white-space:pre; max-height:220px; }

/* mini widget cards rendered inside preview */
.mini-widget{ width:230px; border-radius:16px; padding:16px; border:1px solid var(--border); background:rgba(255,255,255,0.05); text-align:center; }
.mini-widget.style-minimal{ text-align:left; }
.mini-widget.style-cyberhud{ border-color:color-mix(in srgb, var(--accent) 50%, transparent); box-shadow:var(--glow-accent); font-family:var(--ff-mono); }
.mini-widget .mw-temp{ font-size:30px; font-weight:800; }
.mini-widget .mw-city{ font-size:12px; color:var(--text-md); margin-bottom:6px; }
.mini-widget .mw-cond{ font-size:12px; color:var(--text-md); }
.mini-widget .mw-icon{ width:36px; height:36px; margin:6px auto; }

/* ---------- 22. MODALS ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:100; background:rgba(2,4,8,0.72); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px; animation:fadeIn .18s ease;
}
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
.modal{ width:100%; max-width:560px; max-height:86vh; display:flex; flex-direction:column; animation:popIn .22s cubic-bezier(.2,.9,.3,1.1); }
@keyframes popIn{ from{opacity:0; transform:translateY(14px) scale(0.98);} to{opacity:1; transform:none;} }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border); }
.modal-head h2{ font-size:16px; font-weight:800; }
.modal-body{ padding:20px; overflow-y:auto; display:flex; flex-direction:column; gap:22px; }
.settings-block h3{ font-size:12px; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-lo); margin-bottom:12px; font-weight:800; }
.settings-note{ font-size:12px; color:var(--text-md); margin-bottom:12px; line-height:1.5; }
.setting-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:8px 0; font-size:13px; }
.setting-row input[type="range"]{ width:150px; accent-color:var(--accent); }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; font-size:12.5px; color:var(--text-md); }
.field input{ padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,0.04); color:var(--text-hi); font-size:13px; }
.field input:focus{ border-color:color-mix(in srgb, var(--accent) 60%, transparent); }
.settings-actions{ display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }

.seg{ display:flex; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.seg-opt{ padding:7px 12px; font-size:11.5px; font-weight:700; color:var(--text-md); }
.seg-opt.is-active{ background:color-mix(in srgb, var(--accent) 22%, transparent); color:var(--accent); }

.switch{ width:42px; height:24px; border-radius:20px; background:rgba(255,255,255,0.12); position:relative; transition:background .2s ease; }
.switch-knob{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s ease; }
.switch[aria-checked="true"]{ background:var(--accent); }
.switch[aria-checked="true"] .switch-knob{ transform:translateX(18px); }

.theme-swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.theme-swatch{ width:44px; height:44px; border-radius:12px; border:2px solid transparent; position:relative; }
.theme-swatch.is-active{ border-color:#fff; }
.theme-swatch span{ position:absolute; bottom:-18px; left:50%; transform:translateX(-50%); font-size:9.5px; color:var(--text-lo); white-space:nowrap; }

/* ---------- 23. COMMAND PALETTE ---------- */
.palette{ width:100%; max-width:520px; border-radius:16px; overflow:hidden; animation:popIn .18s ease; }
.palette-input-wrap{ display:flex; align-items:center; gap:10px; padding:16px; border-bottom:1px solid var(--border); color:var(--text-lo); }
.palette-input-wrap input{ flex:1; background:none; border:none; color:var(--text-hi); font-size:15px; outline:none; }
.palette-input-wrap kbd{ font-size:10px; padding:3px 6px; border-radius:5px; border:1px solid var(--border); color:var(--text-lo); }
.palette-list{ max-height:340px; overflow-y:auto; padding:8px; }
.palette-item{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px; font-size:13.5px; color:var(--text-md); }
.palette-item svg{ color:var(--accent); flex-shrink:0; }
.palette-item:hover, .palette-item.is-focused{ background:rgba(255,255,255,0.06); color:var(--text-hi); }

/* ---------- 24. TOASTS ---------- */
.toast-container{ position:fixed; bottom:22px; right:22px; z-index:200; display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.toast{
  display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; font-size:13px; font-weight:600;
  animation: toastIn .25s cubic-bezier(.2,.9,.3,1.1);
  max-width:320px;
}
.toast.leaving{ animation: toastOut .2s ease forwards; }
@keyframes toastIn{ from{opacity:0; transform:translateX(16px);} to{opacity:1; transform:none;} }
@keyframes toastOut{ to{opacity:0; transform:translateX(16px);} }
.toast-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.toast.type-success .toast-dot{ background:var(--green); }
.toast.type-error .toast-dot{ background:var(--red); }
.toast.type-info .toast-dot{ background:var(--accent); }

/* ---------- 25. HUD MODE ---------- */
[data-hud="on"] .panel, [data-hud="on"] .hero-card{
  border-color:color-mix(in srgb, var(--accent) 35%, var(--border));
  background-image:
    linear-gradient(0deg, transparent 24px, rgba(0,229,255,0.045) 25px, transparent 26px),
    linear-gradient(90deg, transparent 24px, rgba(0,229,255,0.045) 25px, transparent 26px);
  background-size:26px 26px;
}
[data-hud="on"] .panel-head h2::before{ content:'// '; color:var(--accent); }
[data-hud="on"] .hero-city::after{ content:' [LOCKED]'; font-size:10px; color:var(--accent); font-weight:700; vertical-align:middle; }
[data-hud="on"] body{ font-family:var(--ff-mono); }
[data-hud="on"] .metric-name, [data-hud="on"] .hs-label{ font-family:var(--ff-mono); }
[data-hud="on"] .topbar{ border-bottom-color:color-mix(in srgb, var(--accent) 40%, transparent); }

/* ---------- 26. WEATHER FX ---------- */
.fx-ray{ position:absolute; }

/* ---------- 27. RESPONSIVE ---------- */
.visually-hidden-canvas{ position:absolute; left:-9999px; top:-9999px; }

@media (max-width: 1080px){
  .metric-grid{ grid-template-columns:repeat(2,1fr); }
  .aqi-sub-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 900px){
  .grid-2{ grid-template-columns:1fr; }
  .hero-stats{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 760px){
  .app-shell{ grid-template-columns:1fr; }
  .sidebar{
    position:fixed; left:0; top:0; bottom:0; z-index:60; width:264px;
    transform:translateX(-100%); transition:transform .25s ease; height:100dvh;
  }
  [data-sidebar-open="true"] .sidebar{ transform:translateX(0); }
  [data-sidebar="collapsed"] .app-shell{ grid-template-columns:1fr; }
  .sidebar-scrim{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:55;
  }
  [data-sidebar-open="true"] .sidebar-scrim{ display:block; }
  .only-mobile{ display:flex; }
  .sidebar-collapse{ display:none; }
  .topbar{ padding:12px 14px; flex-wrap:wrap; }
  .search-wrap{ order:3; max-width:100%; flex:1 1 100%; margin-top:8px; }
  .datetime{ display:none; }
  .dashboard{ padding:14px; }
  .hero-stats{ grid-template-columns:repeat(2,1fr); }
  .metric-grid{ grid-template-columns:1fr 1fr; }
  .aqi-sub-grid{ grid-template-columns:1fr; }
  .day-row{ grid-template-columns:80px 26px 1fr auto; }
  .day-rain{ display:none; }
  .alerts-panel{ right:10px; left:10px; width:auto; }
  .hero-temp{ font-size:48px; }
  .hero-icon{ width:64px; height:64px; }
}

@media (max-width: 420px){
  .hero-stats{ grid-template-columns:repeat(2,1fr); }
  .unit-switch{ display:none; }
}