.brand { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: .95rem; font-weight: 750; text-decoration: none; }
.brand__icon { width: 28px; height: 28px; }
.favorites-bar { display: flex; gap: 5px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.favorites-bar::-webkit-scrollbar { display: none; }
.favorite-chip { display: inline-flex; flex: 0 0 auto; gap: 5px; align-items: center; max-width: 160px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: .8rem; }
.favorite-chip:hover, .favorite-chip[aria-current="true"] { background: var(--surface-hover); color: var(--text); }
.favorite-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-button, .unit-button, .language-select select { display: grid; place-items: center; min-width: 34px; height: 34px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); }
.icon-button:hover, .unit-button:hover, .language-select select:hover { border-color: var(--border); background: var(--surface-soft); }
.icon-button svg { width: 17px; height: 17px; }
.icon-button--surface { border-color: var(--border); background: var(--surface-soft); }
.unit-button { font-weight: 700; }
.language-select select { appearance: none; padding: 0 9px; text-align: center; font-size: .8rem; font-weight: 800; }
.search { position: relative; min-width: 0; }
.search input { width: 100%; height: 36px; padding: 0 36px; border: 1px solid var(--border); border-radius: 9px; outline: 0; background: var(--surface-soft); color: var(--text); }
.search input::placeholder { color: var(--faint); }
.search input:focus { border-color: var(--blue); background: var(--surface); box-shadow: var(--focus); }
.search__icon { position: absolute; z-index: 2; top: 9px; left: 11px; width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.search__spinner { display: none; position: absolute; top: 11px; right: 12px; width: 14px; height: 14px; border: 2px solid var(--border-strong); border-top-color: var(--blue); border-radius: 50%; animation: spin .7s linear infinite; }
.search.is-loading .search__spinner { display: block; }
.search-results { position: absolute; z-index: 120; top: calc(100% + 8px); right: 0; left: 0; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 13px; background: var(--surface-solid); box-shadow: var(--shadow); }
.search-result { display: block; width: 100%; padding: 8px 10px; background: transparent; color: var(--text); text-align: left; }
.search-result:hover, .search-result.is-active { background: var(--surface-hover); }
.search-result strong, .search-result small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result small { margin-top: 2px; color: var(--muted); }
.secondary-button, .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 11px; border-radius: 8px; font-size: .84rem; font-weight: 700; }
.secondary-button { border: 1px solid var(--border); background: var(--surface-soft); color: var(--text); }
.secondary-button:hover { background: var(--surface-hover); }
.secondary-button svg { width: 15px; height: 15px; }
.secondary-button.is-active svg { fill: var(--accent); color: var(--accent); }
.primary-button { background: var(--accent); color: var(--accent-ink); }
.primary-button:hover { background: var(--accent-strong); }
.current-card { min-height: 274px; padding: clamp(15px, 2vw, 21px); overflow: hidden; background: linear-gradient(125deg, color-mix(in srgb, var(--surface-raised) 92%, transparent), var(--surface)); }
.current-card__topline { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: .86rem; }
.freshness { align-self: start; padding: 3px 7px; border-radius: 999px; background: var(--surface-soft); font-size: .74rem; }
.current-card__hero { display: grid; grid-template-columns: auto auto minmax(180px, 1fr); gap: clamp(8px, 1.4vw, 18px); align-items: center; min-height: 122px; }
.weather-icon--hero { width: clamp(70px, 7vw, 96px); height: clamp(70px, 7vw, 96px); filter: drop-shadow(0 10px 12px rgba(4, 14, 28, .22)); }
.current-card__temperature { display: flex; align-items: start; font-size: clamp(3.5rem, 5.2vw, 5.25rem); font-weight: 280; letter-spacing: -.08em; line-height: 1; }
.current-card__temperature sup { margin: .16em 0 0 .08em; font-size: .31em; font-weight: 600; letter-spacing: 0; }
.current-card__summary h2 { font-size: clamp(1.12rem, 1.5vw, 1.45rem); }
.current-card__summary p { margin-top: 3px; color: var(--muted); font-size: .86rem; }
.current-card__day-summary { max-width: 38rem; }
.metrics-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; margin-top: 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--border); overflow: hidden; }
.metrics-grid > div { min-width: 0; padding: 8px 9px; background: color-mix(in srgb, var(--surface-solid) 88%, transparent); }
.metrics-grid dt { overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.metrics-grid dd { margin-top: 1px; font-size: .86rem; font-weight: 650; white-space: nowrap; }
.sun-card { display: flex; flex-direction: column; min-height: 274px; padding: 18px; }
.sun-card__daylight { color: var(--muted); font-size: .85rem; }
.sun-arc { position: relative; height: 80px; margin: 19px 5px 7px; overflow: hidden; }
.sun-arc__track, .sun-arc__progress { position: absolute; inset: 10px 4px auto; height: 110px; border: 6px solid var(--border-strong); border-bottom-color: transparent; border-left-color: var(--border-strong); border-radius: 50%; }
.sun-arc__progress { border-color: var(--accent) var(--blue) transparent var(--accent); opacity: .78; clip-path: inset(0 50% 50% 0); }
.sun-arc::after { content: ""; position: absolute; right: 2px; bottom: 1px; left: 2px; height: 1px; background: var(--border-strong); }
.sun-arc__orb { position: absolute; z-index: 2; bottom: 7px; left: 0; width: 15px; height: 15px; border: 3px solid var(--surface-solid); border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px rgba(255, 201, 40, .5); transform: translateX(-50%); }
.sun-times { display: flex; justify-content: space-between; gap: 20px; }
.sun-times div { display: flex; flex-direction: column; }
.sun-times span { color: var(--muted); font-size: .78rem; }
.sun-times strong { margin-top: 1px; font-size: 1.12rem; }
.sun-card__note { margin-top: auto; padding-top: 9px; color: var(--muted); font-size: .76rem; }
.daily-card { position: relative; min-width: 0; min-height: 140px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); text-align: left; box-shadow: 0 6px 18px rgba(0,0,0,.09); transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.daily-card:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.daily-card[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: linear-gradient(155deg, var(--surface-raised), var(--surface)); }
.daily-card__top { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.daily-card__day { display: block; font-size: .86rem; font-weight: 750; }
.daily-card__date { color: var(--muted); font-size: .68rem; }
.daily-card__precip { color: var(--blue); font-size: .68rem; }
.daily-card .weather-icon { width: 48px; height: 48px; margin: 7px auto 3px; }
.daily-card__temps { display: flex; justify-content: center; gap: 8px; font-size: .95rem; }
.daily-card__temps strong:last-child { color: var(--muted); font-weight: 500; }
.hourly-section { padding: clamp(14px, 1.7vw, 19px); }
.metric-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.metric-tabs button { min-height: 30px; padding: 0 10px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: .78rem; }
.metric-tabs button:hover { background: var(--surface-hover); color: var(--text); }
.metric-tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 750; }
.hourly-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(72px, 1fr); gap: 1px; margin-top: 12px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--border); scroll-snap-type: x proximity; }
.hourly-item { min-height: 135px; padding: 10px 7px; background: color-mix(in srgb, var(--surface-solid) 94%, transparent); text-align: center; scroll-snap-align: start; }
.hourly-item.is-now { background: var(--surface-raised); }
.hourly-item__time { color: var(--muted); font-size: .82rem; }
.hourly-item.is-now .hourly-item__time { color: var(--accent); font-weight: 750; }
.hourly-item .weather-icon { width: 38px; height: 38px; margin: 7px auto 2px; }
.hourly-item__temperature { display: block; font-size: 1rem; }
.hourly-item__detail { display: block; min-height: 1.4em; margin-top: 4px; color: var(--blue); font-size: .68rem; }
.highlight-card { padding: 13px 15px; }
.highlight-card > span { color: var(--muted); font-size: .82rem; }
.highlight-card > strong { display: block; margin-top: 4px; font-size: clamp(1.15rem, 1.8vw, 1.5rem); }
.meter { height: 5px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); }
.meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--success), var(--accent)); transition: width .5s ease; }
.meter--blue span { background: linear-gradient(90deg, var(--blue), var(--blue-strong)); }
.temperature-range { position: relative; height: 5px; margin-top: 10px; border-radius: 999px; background: linear-gradient(90deg, #6bc8ff, #ffc928, #ff8c46); }
.temperature-range span { position: absolute; top: 50%; left: 58%; width: 11px; height: 11px; border: 2px solid var(--surface-solid); border-radius: 50%; background: var(--text); transform: translate(-50%, -50%); }
.air-quality__value { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.air-quality__value strong { font-size: clamp(1.15rem, 1.8vw, 1.5rem); }
.aqi-badge { padding: 2px 7px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: .68rem; font-weight: 750; }
.highlight-card--air[data-aqi="good"] .aqi-badge { background: rgba(44, 180, 122, .18); color: #73e0b5; }
.highlight-card--air[data-aqi="fair"] .aqi-badge { background: rgba(173, 194, 62, .18); color: #d4e56d; }
.highlight-card--air[data-aqi="moderate"] .aqi-badge { background: rgba(255, 183, 45, .18); color: #ffd069; }
.highlight-card--air[data-aqi="poor"], .highlight-card--air[data-aqi="very-poor"], .highlight-card--air[data-aqi="extreme"] { border-color: rgba(255, 124, 130, .28); }
.highlight-card--air[data-aqi="poor"] .aqi-badge, .highlight-card--air[data-aqi="very-poor"] .aqi-badge, .highlight-card--air[data-aqi="extreme"] .aqi-badge { background: rgba(255, 92, 103, .16); color: #ff9da3; }
.air-quality__details { display: flex; gap: 9px; margin-top: 9px; color: var(--muted); font-size: .66rem; }
.air-quality__details b { color: var(--text); font-weight: 650; }
.trend-section { padding: clamp(14px, 1.7vw, 19px); overflow: hidden; }
.chart-legend { display: flex; gap: 15px; color: var(--muted); font-size: .72rem; }
.chart-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; }
.chart-legend__temperature { background: var(--accent); }
.chart-legend__rain { background: var(--blue); }
.trend-chart-wrap { margin-top: 8px; overflow-x: auto; }
.trend-chart { width: 100%; min-width: 660px; height: 168px; overflow: visible; }
.trend-chart .chart-grid { stroke: var(--border); stroke-width: 1; }
.trend-chart .chart-area { fill: color-mix(in srgb, var(--accent) 13%, transparent); }
.trend-chart .chart-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.trend-chart .chart-point { fill: var(--accent); stroke: var(--surface-solid); stroke-width: 2; }
.trend-chart .chart-rain-bar { fill: color-mix(in srgb, var(--blue) 34%, transparent); }
.trend-chart .chart-label { fill: var(--muted); font: 19px "Segoe UI", sans-serif; }
.trend-chart .chart-value { fill: var(--text); font: 600 18px "Segoe UI", sans-serif; }
.network-banner { position: sticky; z-index: 90; top: var(--topbar-height); padding: 8px 20px; background: #8a5e17; color: #fff7df; text-align: center; font-size: .86rem; }
.status-panel { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 11px 13px; border: 1px solid rgba(255,124,130,.35); border-radius: var(--radius-lg); background: rgba(132,41,50,.26); }
.status-panel p { margin-top: 4px; color: var(--muted); }
.toast { position: fixed; z-index: 300; right: 20px; bottom: 20px; max-width: min(380px, calc(100vw - 40px)); padding: 12px 16px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface-solid); box-shadow: var(--shadow); }
.noscript { position: fixed; z-index: 1000; right: 20px; bottom: 20px; left: 20px; padding: 15px; border-radius: 12px; background: #782b33; color: white; text-align: center; }
@keyframes spin { to { transform: rotate(360deg); } }