/* Mihani Weather — design system
   ---------------------------------------------------------------------------
   The tokens below are the shared Mihani palette, unchanged from the sibling
   apps, so this window sits in the same family as the rest. The nine themes
   are the same nine, in the same order.

   Two rules worth stating because everything else follows from them:
   1. No JavaScript ever touches a colour. Every surface is a CSS variable, and
      accents are expressed with color-mix() against --primary, so switching
      theme recolours the whole app with no re-render. The animated sky is the
      one exception, and it is deliberately theme-independent — the weather
      does not change because the theme did.
   2. --wails-draggable:drag marks the frameless window's drag regions. Any
      interactive element inside one must opt out with `no-drag`.

   Every theme below declares the COMPLETE variable set — panels, borders,
   shadows and status colours included, not just the background and accent.
   Layout uses logical properties (inline-start, not left) throughout, so the
   Persian RTL layout is the same stylesheet. */

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Medium.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}

/* Full palette for the Mihani theme; the base tokens are declared once. */
:root,
[data-theme="mihani"] {
  --bg: #120406;
  --bg-2: #1c0708;
  --panel: rgba(28, 9, 11, 0.86);
  --panel-2: rgba(40, 12, 14, 0.94);
  --panel-3: rgba(58, 18, 21, 0.9);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.2);
  --text: #ffe9ea;
  --muted: #e79aa0;
  --dim: #b0777c;
  --primary: #e10a17;
  --primary-2: #ff3b46;
  --on-primary: #fff;
  --danger: #ff5f6d;
  --success: #47d18c;
  --warning: #ffa500;
  --scrim: rgba(8, 2, 3, 0.82);
  --field-bg: rgba(12, 3, 4, 0.6);
  --thumb-bg: rgba(0, 0, 0, 0.3);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  --soft-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 12px;
  color-scheme: dark;
}
[data-theme="dark"] {
  --bg: #0f1218; --bg-2: #151a23;
  --panel: rgba(21, 26, 35, 0.9); --panel-2: rgba(26, 32, 44, 0.96); --panel-3: rgba(37, 45, 61, 0.95);
  --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.2);
  --text: #edf2ff; --muted: #9aa7bd; --dim: #6f7d96;
  --primary: #6d7cff; --primary-2: #8d9bff; --on-primary: #fff;
  --danger: #ff5f6d; --success: #47d18c; --warning: #ffa500;
  --scrim: rgba(6, 8, 14, 0.8); --field-bg: rgba(12, 16, 24, 0.7); --thumb-bg: rgba(0, 0, 0, 0.35);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.5); --soft-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #eef2fb; --bg-2: #f7f9ff;
  --panel: rgba(255, 255, 255, 0.9); --panel-2: rgba(255, 255, 255, 0.97); --panel-3: rgba(241, 245, 253, 0.98);
  --border: rgba(17, 24, 39, 0.1); --border-strong: rgba(17, 24, 39, 0.2);
  --text: #101828; --muted: #667085; --dim: #98a2b3;
  --primary: #5663ff; --primary-2: #7380ff; --on-primary: #fff;
  --danger: #e75b66; --success: #22c55e; --warning: #f59e0b;
  --scrim: rgba(16, 24, 40, 0.45); --field-bg: rgba(255, 255, 255, 0.85); --thumb-bg: rgba(17, 24, 39, 0.08);
  --shadow: 0 24px 60px rgba(16, 24, 40, 0.16); --soft-shadow: 0 12px 28px rgba(16, 24, 40, 0.1);
  color-scheme: light;
}
[data-theme="purple"] {
  --bg: #1e132b; --bg-2: #261a35;
  --panel: rgba(30, 19, 43, 0.92); --panel-2: rgba(38, 26, 53, 0.96); --panel-3: rgba(52, 36, 72, 0.95);
  --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.2);
  --text: #f0e6ff; --muted: #c4b5fd; --dim: #9a86c9;
  --primary: #b57cec; --primary-2: #c9a4f5; --on-primary: #1a0f26;
  --danger: #ff6b8b; --success: #5cd89b; --warning: #ffa500;
  --scrim: rgba(10, 5, 16, 0.74); --field-bg: rgba(22, 13, 33, 0.7); --thumb-bg: rgba(0, 0, 0, 0.35);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.5); --soft-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}
[data-theme="pink"] {
  --bg: #2b1321; --bg-2: #351a2a;
  --panel: rgba(43, 19, 33, 0.92); --panel-2: rgba(53, 26, 42, 0.96); --panel-3: rgba(74, 38, 60, 0.95);
  --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.2);
  --text: #ffe0f0; --muted: #f9a8d4; --dim: #c47fa5;
  --primary: #ff7eb3; --primary-2: #ff9bc9; --on-primary: #33101f;
  --danger: #ff5c77; --success: #5fd9a0; --warning: #ffa500;
  --scrim: rgba(16, 5, 12, 0.74); --field-bg: rgba(32, 13, 24, 0.7); --thumb-bg: rgba(0, 0, 0, 0.35);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.5); --soft-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}
[data-theme="black"] {
  --bg: #000; --bg-2: #0a0a0a;
  --panel: rgba(0, 0, 0, 0.94); --panel-2: rgba(20, 20, 20, 0.97); --panel-3: rgba(34, 34, 34, 0.97);
  --border: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.24);
  --text: #e5e7eb; --muted: #9ca3af; --dim: #6b7280;
  --primary: #9ca3af; --primary-2: #d1d5db; --on-primary: #0a0a0a;
  --danger: #f87171; --success: #4ade80; --warning: #f59e0b;
  --scrim: rgba(0, 0, 0, 0.82); --field-bg: rgba(14, 14, 14, 0.9); --thumb-bg: rgba(255, 255, 255, 0.05);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.8); --soft-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}
[data-theme="claude"] {
  --bg: #1c110a; --bg-2: #2a1a10;
  --panel: rgba(26, 17, 10, 0.92); --panel-2: rgba(40, 26, 16, 0.96); --panel-3: rgba(56, 38, 24, 0.95);
  --border: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.22);
  --text: #f5e6d3; --muted: #d4a373; --dim: #a67c52;
  --primary: #d65a00; --primary-2: #f07b3f; --on-primary: #fff;
  --danger: #f87171; --success: #4ade80; --warning: #ffa500;
  --scrim: rgba(14, 8, 4, 0.76); --field-bg: rgba(24, 15, 9, 0.7); --thumb-bg: rgba(0, 0, 0, 0.35);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.55); --soft-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
  color-scheme: dark;
}
[data-theme="ocean"] {
  --bg: #0a1f2e; --bg-2: #0f2b3d;
  --panel: rgba(10, 31, 46, 0.93); --panel-2: rgba(15, 43, 61, 0.96); --panel-3: rgba(22, 58, 80, 0.95);
  --border: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.22);
  --text: #d9f0ff; --muted: #7dd3fc; --dim: #5a9ec2;
  --primary: #38bdf8; --primary-2: #7dd3fc; --on-primary: #06222f;
  --danger: #fb7185; --success: #2dd4bf; --warning: #ffa500;
  --scrim: rgba(3, 14, 22, 0.76); --field-bg: rgba(8, 26, 38, 0.7); --thumb-bg: rgba(0, 0, 0, 0.35);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.5); --soft-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}
[data-theme="forest"] {
  --bg: #0f1f12; --bg-2: #162c1a;
  --panel: rgba(15, 31, 18, 0.93); --panel-2: rgba(22, 44, 26, 0.96); --panel-3: rgba(31, 60, 37, 0.95);
  --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.2);
  --text: #d8f3dc; --muted: #86efac; --dim: #5f9c72;
  --primary: #4ade80; --primary-2: #86efac; --on-primary: #08210f;
  --danger: #f87171; --success: #22c55e; --warning: #ffa500;
  --scrim: rgba(4, 12, 6, 0.76); --field-bg: rgba(11, 25, 14, 0.7); --thumb-bg: rgba(0, 0, 0, 0.35);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.5); --soft-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}

/* ── base ────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Some rules set display on elements the markup hides (the window frame in
   web mode, inactive pages). Without this the display wins and hidden
   things show through. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  font-family: "Vazirmatn", "Segoe UI", Inter, system-ui, sans-serif;
  font-size: 14.5px;
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }

svg.ni { width: 18px; height: 18px; flex: none; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--thumb-bg); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
::-webkit-scrollbar-corner { background: transparent; }

/* ── frameless window caption ────────────────────────────────────────────── */

.winframe {
  position: fixed; inset: 0 0 auto 0; height: 38px;
  display: flex; align-items: center;
  z-index: 60;
}
.winframe-drag { flex: 1; height: 100%; --wails-draggable: drag; }
.winframe-btns {
  display: flex; height: 100%;
  --wails-draggable: no-drag;
}
.wfbtn {
  width: 46px; height: 100%;
  display: grid; place-items: center;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
}
.wfbtn:hover { background: var(--panel-3); color: var(--text); }
.wfbtn-close:hover { background: var(--danger); color: #fff; }

/* ── frame ───────────────────────────────────────────────────────────────── */

#app {
  position: fixed; inset: 0;
  display: grid;
  grid-template-columns: 232px 1fr;
  padding-top: 38px; /* the caption lives above us */
}

/* The animated sky sits behind everything, full bleed. */
#scene {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}
/* A theme-tinted veil keeps the glass panels and the topbar legible over a
   bright sky without ever recolouring the sky itself. */
.sky-scrim {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, var(--scrim) 0%, transparent 110px),
    linear-gradient(180deg, transparent 0%, transparent 55%, var(--scrim) 130%);
  opacity: 0.55;
  pointer-events: none;
}

/* ── sidebar ─────────────────────────────────────────────────────────────── */

.sidebar {
  position: relative; z-index: 5;
  display: flex; flex-direction: column; gap: 18px;
  padding: 14px 14px 16px;
  background: var(--panel);
  border-inline-end: 1px solid var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow-y: auto;
}

.brand { display: flex; align-items: center; gap: 11px; padding: 6px 6px 2px; }
.brand-mark { width: 40px; height: 40px; border-radius: 10px; box-shadow: var(--soft-shadow); }
.brand h1 { font-size: 16.5px; font-weight: 700; letter-spacing: 0.1px; }
.brand p { font-size: 11.5px; color: var(--muted); margin-top: 1px; }

.nav-group { display: flex; flex-direction: column; gap: 3px; }
.nav {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-weight: 500;
  text-align: start;
  transition: background 0.15s, color 0.15s;
}
.nav:hover { background: var(--panel-2); color: var(--text); }
.nav.active {
  background: color-mix(in srgb, var(--primary) 24%, transparent);
  color: var(--text);
}
.nav.active .ni { color: var(--primary-2); }

/* Saved-city quick switch */
.city-switch {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.city-switch-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--dim);
  padding: 0 12px 4px;
}
.cs-city {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 13.5px;
  text-align: start;
  transition: background 0.15s, color 0.15s;
}
.cs-city:hover { background: var(--panel-2); color: var(--text); }
.cs-city.active { background: var(--panel-2); color: var(--text); font-weight: 600; }
.cs-city .cs-temp { margin-inline-start: auto; font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.cs-city .cs-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); opacity: 0.5; flex: none; }
.cs-city.active .cs-dot { background: var(--primary-2); opacity: 1; }
.cs-city .cs-temp.rainy { color: var(--primary-2); }

/* ── main column ─────────────────────────────────────────────────────────── */

.main {
  position: relative; z-index: 4;
  display: flex; flex-direction: column;
  min-width: 0;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 22px 8px;
  --wails-draggable: drag;
}
.topbar h2 { font-size: 17px; font-weight: 700; }
.topbar-right { display: flex; align-items: center; gap: 10px; --wails-draggable: no-drag; }
.updated { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.iconbtn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 9px;
  color: var(--muted);
  border: 1px solid var(--border);
  background: var(--panel);
  transition: background 0.15s, color 0.15s, transform 0.3s;
}
.iconbtn:hover { background: var(--panel-2); color: var(--text); }
.iconbtn.spin svg { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.pages { flex: 1; overflow: hidden; position: relative; }
/* The explicit rule matters: .page sets display:flex, which would otherwise
   override the UA's [hidden] { display:none } and stack every page on top of
   the others. */
.page[hidden] { display: none !important; }
.page {
  position: absolute; inset: 0;
  overflow-y: auto;
  padding: 8px 22px 26px;
  display: flex; flex-direction: column; gap: 14px;
  animation: pageIn 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ── glass panels ────────────────────────────────────────────────────────── */

.glass {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ── now page ────────────────────────────────────────────────────────────── */

/* The hero is a *light* frost, deliberately more transparent than the glass
   panels: the animated clouds must read through it, not hide behind it. */
.hero {
  position: relative;
  display: flex; align-items: stretch; justify-content: space-between; gap: 20px;
  padding: 26px 30px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 42%, transparent);
  backdrop-filter: blur(7px) saturate(1.12);
  -webkit-backdrop-filter: blur(7px) saturate(1.12);
  box-shadow: var(--soft-shadow);
}
.hero-city { font-size: 15px; color: var(--muted); font-weight: 500; }
.hero-temp-row { display: flex; align-items: center; gap: 18px; margin-top: 2px; }
.hero-temp {
  font-size: 76px; font-weight: 700; line-height: 1;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}
.hero-cond-icon { color: var(--primary-2); filter: drop-shadow(0 4px 14px rgba(0,0,0,0.25)); flex: none; }
.hero-cond { font-size: 19px; font-weight: 600; margin-top: 6px; }
.hero-feels { color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.hero-rain {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  font-size: 13.5px;
  width: fit-content;
}
.hero-rain.dry {
  background: var(--panel-2);
  border-color: var(--border);
  color: var(--muted);
}
.hero-rain svg { width: 15px; height: 15px; flex: none; }

/* sunrise → sunset arc */
.hero-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 190px; }
.sun-arc { width: 180px; height: 90px; }
.sun-times { display: flex; gap: 22px; }
.sun-times span {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums;
}
.sun-times svg { width: 15px; height: 15px; color: var(--warning); }
.sun-times b { color: var(--text); font-weight: 600; }
.sun-times small { font-size: 10.5px; color: var(--dim); letter-spacing: 0.4px; }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 10px;
}
.tile {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 13px 15px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform 0.18s, border-color 0.18s;
}
.tile:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.tile-label {
  display: flex; align-items: center; gap: 7px;
  color: var(--dim); font-size: 12px; font-weight: 500;
}
.tile-label svg { width: 14px; height: 14px; }
.tile-value { font-size: 21px; font-weight: 700; margin-top: 7px; font-variant-numeric: tabular-nums; }
.tile-sub { font-size: 12px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.tile-value small { font-size: 13px; font-weight: 500; color: var(--muted); margin-inline-start: 4px; }

/* AQI colour chips */
.aqi-chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; margin-top: 6px;
  color: #08130b;
}
.aqi-1 { background: #47d18c; } .aqi-2 { background: #e5e344; }
.aqi-3 { background: #f5a341; } .aqi-4 { background: #ff6b6b; color: #fff; }
.aqi-5 { background: #b45cd8; color: #fff; } .aqi-6 { background: #8d3a3a; color: #fff; }

/* ── hourly page ─────────────────────────────────────────────────────────── */

.rain-answer {
  padding: 18px 24px;
  display: flex; align-items: center; gap: 16px;
}
.rain-answer .ra-icon {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary) 20%, transparent);
  color: var(--primary-2);
}
.rain-answer .ra-icon svg { width: 26px; height: 26px; }
.rain-answer.dry .ra-icon { background: var(--panel-2); color: var(--muted); }
.ra-title { font-size: 16.5px; font-weight: 700; }
.ra-body { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.ra-when { font-weight: 700; color: var(--text); }
.ra-windows { display: flex; gap: 8px; margin-inline-start: auto; flex-wrap: wrap; justify-content: flex-end; }
.ra-window {
  padding: 7px 12px; border-radius: var(--radius-sm);
  background: var(--panel-2);
  border: 1px solid var(--border);
  font-size: 12.5px;
  text-align: center;
  min-width: 108px;
}
.ra-window .rw-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.ra-window .rw-meta { color: var(--muted); margin-top: 1px; font-variant-numeric: tabular-nums; }

.chart-card { padding: 16px 18px 8px; }
#hourly-chart { width: 100%; height: 190px; display: block; }

.hours {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scroll-snap-type: x proximity;
}
.hour {
  flex: none; width: 68px;
  scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 11px 6px 10px;
  border-radius: var(--radius-md);
  background: var(--panel);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform 0.15s, border-color 0.15s;
}
.hour:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.hour.now { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--panel)); }
.h-time { font-size: 11.5px; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hour.now .h-time { color: var(--primary-2); font-weight: 700; }
.h-icon { width: 24px; height: 24px; color: var(--text); }
.h-temp { font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.h-pop {
  display: flex; align-items: center; gap: 3px;
  font-size: 10.5px; color: var(--muted); min-height: 14px;
  font-variant-numeric: tabular-nums;
}
.h-pop svg { width: 9px; height: 9px; color: var(--primary-2); }
.h-pop.wet { color: var(--primary-2); font-weight: 700; }
/* Day boundary: a labelled pill that sits between hour groups like a
   section header, not bare text floating among cards. */
.h-day {
  flex: none;
  align-self: center;
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.4px;
  margin: 0 4px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ── daily page ──────────────────────────────────────────────────────────── */

.days { padding: 8px 6px; }
.day-row {
  display: grid;
  grid-template-columns: 128px 34px 1fr auto;
  align-items: center; gap: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  transition: background 0.15s;
}
.day-row:hover { background: var(--panel-2); }
.day-row.today { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.d-name { font-weight: 600; }
.d-name small { display: block; color: var(--dim); font-weight: 400; font-size: 11px; margin-top: 1px; }
.d-icon { width: 26px; height: 26px; color: var(--text); }
.d-range { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.d-range .lo { color: var(--dim); width: 34px; text-align: end; font-size: 13px; }
.d-range .hi { color: var(--text); width: 34px; font-size: 13px; font-weight: 700; }
.d-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--panel-3); position: relative; }
.d-bar .fill {
  position: absolute; top: 0; bottom: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #6fb6f1, var(--warning));
}
.d-meta { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.d-meta svg { width: 13px; height: 13px; }
.d-meta .wet { color: var(--primary-2); font-weight: 600; }

/* ── cities page ─────────────────────────────────────────────────────────── */

.search-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 16px;
  border-radius: var(--radius-md);
}
.search-wrap input {
  flex: 1; border: 0; outline: 0; background: none;
  padding: 11px 0; font-size: 14.5px;
  color: var(--text);
}
.search-wrap input::placeholder { color: var(--dim); }
.search-icon { color: var(--dim); flex: none; }
.search-clear {
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 7px; color: var(--muted);
}
.search-clear:hover { background: var(--panel-2); color: var(--text); }

.locate-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary-2);
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s;
}
.locate-btn:hover { background: color-mix(in srgb, var(--primary) 24%, transparent); }
.locate-btn:disabled { opacity: 0.55; cursor: default; }
.locate-btn.busy svg { animation: spin 0.9s linear infinite; }

.search-results { margin-top: -6px; padding: 6px; display: flex; flex-direction: column; }
.sr-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  text-align: start;
  transition: background 0.12s;
}
.sr-row:hover { background: var(--panel-2); }
.sr-row svg.sr-icon { width: 16px; height: 16px; color: var(--dim); flex: none; }
.sr-name { font-weight: 600; }
.sr-sub { color: var(--dim); font-size: 12.5px; }
.sr-add {
  margin-inline-start: auto;
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 8px;
  color: var(--primary-2);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
}
.sr-empty, .sr-note { padding: 12px; color: var(--dim); font-size: 13px; }

.city-list { display: flex; flex-direction: column; gap: 9px; }
.city-card {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color 0.15s, transform 0.15s;
}
.city-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.city-card.default { border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
.cc-main { min-width: 0; }
.cc-name { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.cc-name svg { width: 14px; height: 14px; color: var(--primary-2); }
.cc-sub { color: var(--dim); font-size: 12.5px; margin-top: 2px; }
.cc-temp {
  margin-inline-start: auto; text-align: end;
  font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cc-cond { color: var(--muted); font-size: 12.5px; text-align: end; }
.cc-actions { display: flex; gap: 6px; margin-inline-start: 6px; }
.cc-btn {
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 9px; color: var(--muted);
  border: 1px solid var(--border);
  transition: background 0.15s, color 0.15s;
}
.cc-btn:hover { background: var(--panel-2); color: var(--text); }
.cc-btn.danger:hover { background: color-mix(in srgb, var(--danger) 22%, transparent); color: var(--danger); }
.cc-btn svg { width: 15px; height: 15px; }
.cc-loading { width: 15px; height: 15px; border: 2px solid var(--border-strong); border-top-color: var(--primary-2); border-radius: 50%; animation: spin 0.8s linear infinite; }

/* ── settings & about ────────────────────────────────────────────────────── */

.settings, .about { padding: 10px 8px 14px; }
.set-group { padding: 10px 12px 14px; }
.set-group + .set-group { border-top: 1px solid var(--border); }
.set-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--dim);
  padding: 6px 4px 8px;
}
.set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 9px 4px;
}
.set-row .set-label { font-weight: 500; }
.set-row .set-hint { color: var(--dim); font-size: 12.5px; margin-top: 1px; }

.seg { display: flex; gap: 3px; background: var(--field-bg); padding: 3px; border-radius: 10px; border: 1px solid var(--border); }
.seg button {
  padding: 6px 14px; border-radius: 8px;
  color: var(--muted); font-size: 13px; font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--primary); color: var(--on-primary); }

.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 4px; }
.theme-card {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--field-bg);
  transition: border-color 0.15s, transform 0.15s;
  text-align: start;
}
.theme-card:hover { transform: translateY(-1px); }
.theme-card.on { border-color: var(--primary); }
.theme-swatch { width: 22px; height: 22px; border-radius: 7px; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
.theme-name { font-size: 13px; font-weight: 600; }

.switch {
  position: relative; width: 44px; height: 25px; flex: none;
  border-radius: 999px;
  background: var(--field-bg);
  border: 1px solid var(--border-strong);
  transition: background 0.2s;
}
.switch::after {
  content: ""; position: absolute; top: 2px; inset-inline-start: 2px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--muted);
  transition: transform 0.2s, background 0.2s;
}
.switch.on { background: var(--primary); border-color: var(--primary); }
.switch.on::after { transform: translateX(19px); background: var(--on-primary); }
[dir="rtl"] .switch.on::after { transform: translateX(-19px); }

.about-body { max-width: 640px; }
.about h3 { font-size: 18px; margin-bottom: 4px; }
.about .ver { color: var(--dim); font-size: 13px; margin-bottom: 14px; }
.about p { color: var(--muted); line-height: 1.65; margin-bottom: 10px; font-size: 13.5px; }
.about a { color: var(--primary-2); text-decoration: none; font-weight: 600; }
.about a:hover { text-decoration: underline; }
.about .credits { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; font-size: 12.5px; color: var(--dim); }

/* ── misc ────────────────────────────────────────────────────────────────── */

/* City-loading veil: the content dims, a card names the city being fetched. */
.page-loading {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 45%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.pl-card {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 26px 42px;
}
.pl-spinner {
  width: 26px; height: 26px;
  border: 3px solid var(--border-strong);
  border-top-color: var(--primary-2);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.pl-name { font-size: 16px; font-weight: 700; }
.pl-text { font-size: 12.5px; color: var(--dim); }

/* ── dropdown selects (theme picker) — the family pattern ─────────────────
   Same flat-swatch dropdown the sibling apps use: one rounded swatch in the
   theme's accent, the name beside it, a tick on the active row. */
.select { position: relative; min-width: 168px; flex-shrink: 0; --wails-draggable: no-drag; }
.select-btn {
  width: 100%; display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 9px 13px; border-radius: 12px; font-weight: 600; font-size: 13px;
  background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid var(--border);
  color: var(--text); cursor: pointer;
  transition: border-color .16s, background .16s;
}
.select-btn:hover { border-color: var(--border-strong); background: color-mix(in srgb, var(--text) 9%, transparent); }
.select.open .select-btn { border-color: var(--primary-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
.select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.select-caret { width: 14px; height: 14px; flex-shrink: 0; color: var(--muted); transition: transform .22s; }
.select.open .select-caret { transform: rotate(180deg); color: var(--primary-2); }
.select-swatch { width: 15px; height: 15px; border-radius: 5px; border: 1px solid var(--border-strong); flex-shrink: 0; }
.select-menu {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 10040;
  min-width: 100%; max-height: 340px; overflow-y: auto; padding: 6px;
  border: 1px solid var(--border-strong); border-radius: 14px;
  background: var(--panel-2); box-shadow: var(--shadow); backdrop-filter: blur(20px);
  display: none;
}
.select.open .select-menu { display: block; animation: selectPop .18s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes selectPop {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.select-option {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: start;
  padding: 9px 11px; border: 0; border-radius: 10px; font-size: 13px; font-weight: 600;
  color: var(--muted); background: transparent; cursor: pointer;
  transition: background .14s, color .14s;
}
.select-option:hover { background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); }
.select-option.on { background: color-mix(in srgb, var(--primary) 22%, transparent); color: var(--text); }
.select-option .check { width: 14px; height: 14px; margin-inline-start: auto; color: var(--primary-2); opacity: 0; flex-shrink: 0; }
.select-option.on .check { opacity: 1; }

.empty {
  padding: 40px 20px;
  text-align: center; color: var(--dim);
}
.empty h3 { color: var(--muted); margin-bottom: 6px; }

.toast {
  position: fixed; bottom: 26px; inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 100;
  font-size: 13.5px;
  animation: toastIn 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
  backdrop-filter: blur(14px);
}
[dir="rtl"] .toast { transform: translateX(50%); }
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
[dir="rtl"] .toast { animation-name: toastInRtl; }
@keyframes toastInRtl {
  from { opacity: 0; transform: translate(50%, 10px); }
  to { opacity: 1; transform: translate(50%, 0); }
}

.banner {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 15px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--warning) 16%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
  font-size: 13px;
}
.banner svg { width: 15px; height: 15px; color: var(--warning); flex: none; }
.banner.danger { background: color-mix(in srgb, var(--danger) 14%, var(--panel)); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.banner.danger svg { color: var(--danger); }

.skeleton { color: var(--dim); padding: 30px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Narrow window: sidebar collapses to icons. */
@media (max-width: 900px) {
  #app { grid-template-columns: 68px 1fr; }
  .brand div, .nav span, .city-switch-label, .cs-city span:not(.cs-dot), .cs-city .cs-temp { display: none; }
  .brand { justify-content: center; }
  .nav { justify-content: center; padding: 11px 0; }
  .cs-city { justify-content: center; }
  .hero { flex-direction: column; }
  .hero-side { display: none; }
  .day-row { grid-template-columns: 96px 30px 1fr auto; gap: 8px; }
}