/* ============================================================
   EAU Weather Dashboard — 拍攝地天氣
   Wide, tool-style layout. Theme-token driven (light/dark),
   bilingual via [data-lang]. Every derived value / image has a
   stated source and an ⓘ popup explaining its basis.
   ============================================================ */

.weather-page {
    padding: var(--space-lg) 0 var(--space-3xl);
    --lvl-excellent: #4ade80;
    --lvl-good: #86c26a;
    --lvl-fair: var(--color-amber);
    --lvl-poor: #e07a5f;
    --lvl-bad: var(--color-rose);
}
/* Wide content area — this is a tool page, not an article. */
.wx-wrap { width: min(1560px, 94vw); margin: 0 auto; }

/* ── info button + source text ── */
.wx-info {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
    border: 1px solid var(--color-border); background: var(--color-surface-elevated);
    color: var(--color-text-muted); font-size: 0.62rem; font-weight: 700;
    font-style: italic; font-family: Georgia, serif; line-height: 1;
    vertical-align: middle; margin-left: 5px; transition: all var(--transition-fast);
}
.wx-info:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* ── Header ── */
.wx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); padding-top: var(--space-md); flex-wrap: wrap; }
.wx-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 0.66rem; font-weight: var(--font-weight-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 6px; }
.wx-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lvl-excellent); animation: wx-pulse 2s infinite; }
@keyframes wx-pulse { 0%{box-shadow:0 0 0 0 rgba(74,222,128,0.45);} 70%{box-shadow:0 0 0 6px rgba(74,222,128,0);} 100%{box-shadow:0 0 0 0 rgba(74,222,128,0);} }
.wx-head h1 { font-size: 1.6rem; font-weight: var(--font-weight-bold); letter-spacing: -0.02em; }
.wx-sub { color: var(--color-text-muted); font-size: 0.82rem; margin-top: 4px; }
.wx-head-right { display: flex; align-items: center; gap: var(--space-sm); }
.wx-refresh-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid var(--color-border); color: var(--color-text-secondary); background: var(--color-surface); font-family: var(--font-primary); font-size: 0.8rem; transition: all var(--transition-base); }
.wx-refresh-btn:hover { color: var(--color-text); border-color: var(--color-text-muted); }
.wx-refresh-btn svg { width: 15px; height: 15px; }
.wx-refresh-btn.loading svg { animation: wx-spin 0.8s linear infinite; }
@keyframes wx-spin { to { transform: rotate(360deg); } }
.wx-updated { font-size: 0.72rem; color: var(--color-text-muted); white-space: nowrap; }

/* ── Site selector ── */
.wx-site-select { display: flex; gap: 8px; margin: var(--space-lg) 0; flex-wrap: wrap; }
.wx-site-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); font-size: 0.82rem; font-family: var(--font-primary); transition: all var(--transition-base); }
.wx-site-btn svg { width: 13px; height: 13px; }
.wx-site-btn:hover { color: var(--color-text); border-color: var(--color-text-muted); }
.wx-site-btn.active { background: var(--color-accent); color: var(--color-accent-text); border-color: var(--color-accent); font-weight: var(--font-weight-medium); }

/* ── Error ── */
.wx-error { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-lg); padding: 12px 16px; border-radius: var(--radius-md); background: rgba(174,68,90,0.1); border: 1px solid rgba(174,68,90,0.25); color: #d4687a; font-size: 0.82rem; }
.wx-error svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Row 1: hero + stats 合併為一張容器（站點背景圖 + 統一 scrim）──
   整張容器為單一照片，覆蓋一層「均勻」的暗化 scrim（左→右平滑漸進，
   非左右不均色塊）；前景文字一律白色 + text-shadow 確保可讀。
   無照片時 fallback 到中性深色底。 */
.wx-toprow { position: relative; display: grid; grid-template-columns: 1fr 340px; margin-bottom: var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; color: #f4f2f8; background: #13111d; }
.wx-toprow-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; transition: opacity 0.35s ease; }
.wx-toprow-bg.is-swapping { opacity: 0.35; }
/* 切站時數值區塊淡出，讓使用者知道在更新（資料多半有快取，通常一閃而過） */
.wx-toprow.is-loading .wx-hero-main, .wx-toprow.is-loading .wx-right { opacity: 0.55; transition: opacity 0.2s ease; }
/* 半透明黑遮罩：左淺右深（右側資訊區可讀） */
.wx-toprow-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.4) 46%, rgba(0,0,0,0.74) 100%); }
.wx-toprow > .wx-hero, .wx-toprow > .wx-right { position: relative; z-index: 1; }

.wx-hero { display: flex; align-items: center; padding: var(--space-2xl) var(--space-xl); color: inherit; text-shadow: 0 1px 6px rgba(0,0,0,0.55); }
.wx-right { display: flex; flex-direction: column; gap: var(--space-md); justify-content: center; padding: var(--space-lg); text-shadow: 0 1px 4px rgba(0,0,0,0.55); }
.wx-hero-main { position: relative; z-index: 1; }
.wx-hero-loc { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; color: rgba(255,255,255,0.72); margin-bottom: var(--space-sm); }
.wx-hero-loc svg { width: 15px; height: 15px; color: var(--color-amber); }
.wx-hero-elev { font-size: 0.66rem; padding: 2px 8px; border-radius: var(--radius-full); background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.62); }
.wx-hero-temprow { display: flex; align-items: center; gap: var(--space-lg); }
.wx-hero-temp { font-size: 3.6rem; font-weight: var(--font-weight-bold); line-height: 0.95; font-variant-numeric: tabular-nums; display: flex; align-items: flex-start; }
.wx-deg { font-size: 1.3rem; font-weight: var(--font-weight-medium); margin-top: 6px; color: rgba(255,255,255,0.6); }
.wx-hero-icon { color: var(--color-amber); }
.wx-hero-glyph { width: 54px; height: 54px; }
.wx-hero-condrow { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; }
.wx-hero-cond { font-size: 1.05rem; font-weight: var(--font-weight-medium); }
.wx-hero-feels { font-size: 0.8rem; color: rgba(255,255,255,0.55); }

.wx-verdict { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 2px 10px; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-lg); background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.18); min-width: 0; }
.wx-verdict-dot { grid-row: 1/3; width: 12px; height: 12px; border-radius: 50%; }
.wx-verdict-label { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.55); display: inline-flex; align-items: center; }
.wx-verdict-label .wx-info { border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); }
.wx-verdict-level { font-size: 1.2rem; font-weight: var(--font-weight-bold); grid-column: 2; }
.wx-verdict-score { grid-row: 1/3; grid-column: 3; font-size: 1.7rem; font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; opacity: 0.9; }
.wx-verdict.lvl-excellent{--v:var(--lvl-excellent);} .wx-verdict.lvl-good{--v:var(--lvl-good);} .wx-verdict.lvl-fair{--v:var(--lvl-fair);} .wx-verdict.lvl-poor{--v:var(--lvl-poor);} .wx-verdict.lvl-bad{--v:var(--lvl-bad);}
.wx-verdict .wx-verdict-dot { background: var(--v); box-shadow: 0 0 12px var(--v); }
.wx-verdict .wx-verdict-level, .wx-verdict .wx-verdict-score { color: var(--v); }

/* stats card */
.wx-stats { background: transparent; border: none; padding: 0; }
.wx-stats-head { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: var(--font-weight-semibold); color: rgba(255,255,255,0.72); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--space-md); }
.wx-stats-head .wx-info { border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); }
.wx-stats-src { margin-left: auto; font-size: 0.66rem; font-weight: var(--font-weight-normal); letter-spacing: 0; text-transform: none; color: rgba(255,255,255,0.5); }
/* 6 項數值直接排在照片上，無卡片塊；靠細分隔線與間距形成結構 */
.wx-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.wx-stat { background: transparent; border: none; padding: 10px 14px; }
.wx-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.12); padding-left: 0; }
.wx-stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.12); padding-top: 0; }
.wx-stat-top { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.wx-stat-ico { width: 24px; height: 24px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wx-stat-ico svg { width: 14px; height: 14px; }
.i-humid{background:rgba(96,165,250,0.12);color:#60a5fa;} .i-wind{background:rgba(129,199,132,0.12);color:#86c26a;} .i-press{background:rgba(232,188,185,0.12);color:var(--color-blush);} .i-cloud{background:rgba(148,157,178,0.14);color:var(--color-text-secondary);} .i-rain{background:rgba(96,165,250,0.12);color:#60a5fa;} .i-vis{background:rgba(243,159,90,0.12);color:var(--color-amber);}
.wx-stat-name { font-size: 0.72rem; color: rgba(255,255,255,0.6); }
.wx-stat-val { font-size: 1.3rem; font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; line-height: 1.1; color: #eae8f0; }
.wx-stat-val i { font-size: 0.7rem; font-weight: var(--font-weight-normal); color: rgba(255,255,255,0.5); font-style: normal; margin-left: 2px; }
.wx-stat-sub { font-size: 0.66rem; color: rgba(255,255,255,0.55); margin-top: 4px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.wx-wind-arrow { width: 11px; height: 11px; color: var(--color-text-secondary); display: inline-block; }

/* ── Cards ── */
.wx-card { min-width: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-lg); margin-bottom: var(--space-lg); }
.wx-card-title { font-size: 0.72rem; font-weight: var(--font-weight-semibold); color: var(--color-text-muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--space-md); }
.wx-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); flex-wrap: wrap; }
.wx-card-title-row .wx-card-title { margin-bottom: 0; }

.wx-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); }
.wx-grid-2 > *, .wx-toprow > *, .wx-grid-half > * { min-width: 0; }
.wx-grid-2 > .wx-card { margin-bottom: var(--space-lg); }
/* 未來七日 + 7Timer 並排：兩卡等高，七日撐滿卡片高度 */
.wx-grid-half > .wx-card { margin-bottom: var(--space-lg); display: flex; flex-direction: column; }
.wx-grid-half .wx-forecast { gap: 4px; flex: 1; align-items: stretch; }
.wx-grid-half .wx-fc-card { height: 100%; justify-content: space-between; }
.wx-grid-half .wx-7timer-wrap { flex: 1; display: flex; align-items: center; justify-content: center; }

/* ── Observation panel ── */
.wx-obs-score { display: flex; align-items: center; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.wx-obs-score-ring { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0; background: var(--color-surface-elevated); border: 1px solid var(--color-border); }
.wx-obs-score-num { font-size: 1.9rem; font-weight: var(--font-weight-bold); line-height: 1; font-variant-numeric: tabular-nums; }
.wx-obs-score-max { font-size: 0.66rem; color: var(--color-text-muted); }
.wx-obs-score-meter { flex: 1; }
.wx-obs-meter-label { font-size: 0.78rem; color: var(--color-text-secondary); margin-bottom: 8px; display: flex; align-items: center; }
.wx-meter { height: 8px; background: var(--color-surface-elevated); border-radius: var(--radius-full); overflow: hidden; }
.wx-meter-fill { height: 100%; border-radius: var(--radius-full); transition: width var(--transition-slow); }
.wx-obs-nightcloud { font-size: 0.72rem; color: var(--color-text-muted); margin-top: 8px; }
.lvl-excellent{color:var(--lvl-excellent);} .lvl-good{color:var(--lvl-good);} .lvl-fair{color:var(--lvl-fair);} .lvl-poor{color:var(--lvl-poor);} .lvl-bad{color:var(--lvl-bad);}
.wx-meter-fill.lvl-excellent{background:var(--lvl-excellent);} .wx-meter-fill.lvl-good{background:var(--lvl-good);} .wx-meter-fill.lvl-fair{background:var(--lvl-fair);} .wx-meter-fill.lvl-poor{background:var(--lvl-poor);} .wx-meter-fill.lvl-bad{background:var(--lvl-bad);}

/* 評分明細（2×2） */
.wx-obs-breakdown { padding: var(--space-md) 0; border-top: 1px solid var(--color-border-subtle); }
.wx-bd-head { font-size: 0.7rem; font-weight: var(--font-weight-semibold); color: var(--color-text-muted); letter-spacing: 0.04em; margin-bottom: 8px; }
.wx-bd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.wx-bd-row { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; font-size: 0.75rem; }
.wx-bd-name { color: var(--color-text-secondary); white-space: nowrap; }
.wx-bd-val { color: var(--color-text-muted); font-size: 0.7rem; font-variant-numeric: tabular-nums; }
.wx-bd-deduct { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--color-text-muted); font-weight: var(--font-weight-medium); }
.wx-bd-row.has .wx-bd-deduct { color: var(--color-rose); }
.wx-bd-row.has .wx-bd-name { color: var(--color-text); }
.wx-bd-total { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-border-subtle); font-size: 0.82rem; font-weight: var(--font-weight-semibold); }
.wx-bd-total span:last-child { font-size: 1.05rem; font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }

.wx-obs-subtitle { font-size: 0.74rem; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); margin-bottom: 10px; display: flex; align-items: center; }
.wx-obs-clouds { padding: var(--space-md) 0; border-top: 1px solid var(--color-border-subtle); }
.wx-layer { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.wx-layer:last-child { margin-bottom: 0; }
.wx-layer-name { width: 42px; font-size: 0.74rem; color: var(--color-text-muted); flex-shrink: 0; }
.wx-layer-track { flex: 1; height: 6px; background: var(--color-surface-elevated); border-radius: var(--radius-full); overflow: hidden; }
.wx-layer-fill { height: 100%; width: 0; border-radius: var(--radius-full); transition: width var(--transition-slow); }
.l-high{background:#60a5fa;} .l-mid{background:var(--color-blush);} .l-low{background:var(--color-text-secondary);}
.wx-layer-val { width: 38px; text-align: right; font-size: 0.74rem; font-variant-numeric: tabular-nums; color: var(--color-text-secondary); flex-shrink: 0; }

.wx-obs-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); padding: var(--space-md) 0; border-top: 1px solid var(--color-border-subtle); }
.wx-fact-label { font-size: 0.7rem; color: var(--color-text-muted); margin-bottom: 3px; display: flex; align-items: center; }
.wx-fact-val { font-size: 0.92rem; font-weight: var(--font-weight-semibold); display: flex; align-items: center; gap: 6px; }
.wx-moon { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; }
.wx-moon-disc { width: 20px; height: 20px; flex-shrink: 0; display: inline-flex; }
.wx-moon-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 3px rgba(242,238,219,0.25)); }

.wx-obs-dark { padding-top: var(--space-md); border-top: 1px solid var(--color-border-subtle); }
.wx-dark-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)); gap: var(--space-sm); }
.wx-dark-item { text-align: center; padding: var(--space-sm) 6px; border-radius: var(--radius-md); background: var(--color-surface-elevated); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.wx-dark-item svg { width: 17px; height: 17px; color: var(--color-text-muted); }
.wx-dark-item.hl { background: rgba(69,25,82,0.35); border: 1px solid rgba(232,188,185,0.2); }
.wx-dark-item.hl svg { color: var(--color-blush); }
.wx-dark-item.moon svg { color: #cdd3e0; }
.wx-dark-time { font-size: 1rem; font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.wx-dark-cap { font-size: 0.64rem; color: var(--color-text-muted); }

/* ── Map ── */
.wx-map-toggle { display: flex; gap: 4px; }
.wx-map-btn { padding: 5px 11px; border-radius: var(--radius-sm); font-size: 0.74rem; border: 1px solid var(--color-border); background: transparent; color: var(--color-text-secondary); font-family: var(--font-primary); transition: all var(--transition-fast); }
.wx-map-btn:hover { color: var(--color-text); }
.wx-map-btn.active { background: var(--color-accent); color: var(--color-accent-text); border-color: var(--color-accent); }
.wx-map { display: flex; flex-direction: column; }
.wx-map .wx-card-title-row { flex-shrink: 0; }
.wx-map-frame-wrap { flex: 1; min-height: 360px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); }
.wx-map-frame { width: 100%; height: 100%; display: block; border: 0; }
.wx-tile-src { font-size: 0.66rem; color: var(--color-text-muted); margin-top: 8px; flex-shrink: 0; }

/* ── Hourly ── */
.wx-legend { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--color-text-muted); }
.wx-legend-dot { width: 20px; height: 10px; border-radius: 3px; background: rgba(69,25,82,0.5); border: 1px solid var(--color-border); }
.wx-hourly-scroll { overflow-x: auto; margin: 0 calc(-1*var(--space-lg)); padding: 0 var(--space-lg); }
.wx-hourly { display: flex; gap: 6px; min-width: min-content; }
.wx-hour { flex: 0 0 auto; width: 60px; text-align: center; padding: 10px 4px; border-radius: var(--radius-md); background: var(--color-surface-elevated); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wx-hour.is-dark { background: rgba(69,25,82,0.4); border: 1px solid rgba(232,188,185,0.14); }
.wx-hour-time { font-size: 0.7rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.wx-hour-icon svg { width: 20px; height: 20px; color: var(--color-text-secondary); }
.wx-hour.is-dark .wx-hour-icon svg { color: var(--color-blush); }
.wx-hour-temp { font-size: 0.82rem; font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.wx-hour-cloudbar { width: 8px; height: 40px; background: var(--color-surface); border-radius: var(--radius-full); overflow: hidden; display: flex; align-items: flex-end; }
.wx-hour-cloudfill { width: 100%; background: linear-gradient(to top, var(--color-text-muted), var(--color-text-secondary)); border-radius: var(--radius-full); transition: height var(--transition-base); }
.wx-hour-cloudval { font-size: 0.66rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.wx-hour-pop { font-size: 0.64rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.wx-hour-pop.wet { color: #60a5fa; font-weight: var(--font-weight-semibold); }

/* ── 雲量曲線圖 ── */
.wx-cloudchart-card { width: 100%; }
.wx-cloud-legend { gap: 14px; flex-wrap: wrap; }
.wx-cloud-legend span { display: inline-flex; align-items: center; gap: 5px; }
.wx-cl-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.wx-cl-dot.wx-cl-msm { background: var(--color-amber); }
.wx-cl-dot.wx-cl-seamless { background: #60a5fa; }
.wx-cloudchart-wrap { width: 100%; }
.wx-cloudchart { width: 100%; height: 240px; display: block; }
.wx-cl-stripe { fill: var(--color-surface-elevated); opacity: 0.5; }
.wx-cl-grid { stroke: var(--color-border-subtle); stroke-width: 1; }
.wx-cl-axislabel { font-size: 11px; fill: var(--color-text-muted); font-family: var(--font-primary); }
/* X 軸日期標籤透過 foreignObject 插入的 HTML div（非 SVG text），用一般 CSS 排版 */
div.wx-cl-axislabel { font-size: 11px; color: var(--color-text-muted); line-height: 18px; white-space: nowrap; }
.wx-cl-line { stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wx-cl-line.wx-cl-msm { stroke: var(--color-amber); stroke-width: 2.6; }
.wx-cl-line.wx-cl-seamless { stroke: #60a5fa; }

/* ── Section head ── */
.wx-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin: var(--space-xl) 0 var(--space-md); flex-wrap: wrap; }
.wx-section-head h2 { font-size: 1.1rem; font-weight: var(--font-weight-bold); }
.wx-section-src { font-size: 0.7rem; color: var(--color-text-muted); }

/* ── CWA 圖資牆 ── */
.wx-imgwall { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); }
.wx-tile { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.wx-tile-cap { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--color-border-subtle); }
.wx-tile-name { font-size: 0.8rem; font-weight: var(--font-weight-semibold); }
.wx-tile-code { margin-left: auto; font-size: 0.62rem; color: var(--color-text-muted); font-family: ui-monospace, monospace; }
.wx-tile-media { position: relative; background: #0a0812; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; }
.wx-tile-media img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; display: block; }
.wx-tile-fail { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: 0.78rem; }
.wx-tile.is-fail .wx-tile-media img { display: none; }
.wx-tile.is-fail .wx-tile-fail { display: flex; }

/* ── 7Timer ── */
.wx-7timer-wrap { border-radius: var(--radius-md); overflow: auto; border: 1px solid var(--color-border); background: #0a0812; text-align: center; }
.wx-7timer-img { max-width: 100%; height: auto; cursor: zoom-in; display: inline-block; }

/* ── meteoblue ── meteogram 整寬加高；天氣圖 + 視寧度並排 */
.wx-mb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.wx-mb-tile { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: #0a0812; }
.wx-mb-cap { font-size: 0.7rem; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); padding: 8px 12px; background: var(--color-surface-elevated); }
.wx-mb-media { height: 540px; }
.wx-mb-media iframe { width: 100%; height: 100%; border: 0; display: block; }
.wx-mb-note { display: flex; align-items: center; gap: 8px; padding: var(--space-xl); color: var(--color-text-muted); font-size: 0.85rem; justify-content: center; background: var(--color-surface-elevated); border: 1px dashed var(--color-border); border-radius: var(--radius-md); }
.wx-mb-note svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── 7-day ── compact horizontal cards */
.wx-forecast { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-xs); }
.wx-fc-card { text-align: center; padding: 10px 6px; background: var(--color-surface-elevated); border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.wx-fc-day { font-size: 0.72rem; color: var(--color-text-secondary); font-weight: var(--font-weight-medium); }
.wx-fc-icon svg { width: 22px; height: 22px; color: var(--color-text-secondary); }
.wx-fc-cond { font-size: 0.62rem; color: var(--color-text-muted); min-height: 1.3em; }
.wx-fc-temp { font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.wx-fc-temp b { font-weight: var(--font-weight-semibold); }
.wx-fc-temp span { color: var(--color-text-muted); }
.wx-fc-meta { display: flex; flex-direction: column; gap: 2px; font-size: 0.64rem; color: var(--color-text-muted); }
.wx-fc-meta span { display: inline-flex; align-items: center; gap: 3px; justify-content: center; }
.wx-fc-meta svg { width: 11px; height: 11px; }
.wx-fc-rain.wet { color: #60a5fa; }
.wx-fc-score { margin-top: 5px; display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-surface); border: 1px solid var(--color-border-subtle); }
.wx-fc-score-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.wx-fc-score-lbl { color: var(--color-text-muted); font-weight: var(--font-weight-normal); font-size: 0.62rem; }

.wx-source-note { font-size: 0.7rem; color: var(--color-text-muted); margin-top: var(--space-md); line-height: 1.7; }

/* ── Modal popup ── */
.wx-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: var(--space-lg); background: rgba(0,0,0,0.55); backdrop-filter: blur(3px); }
.wx-modal.open { display: flex; }
.wx-modal-box { position: relative; width: min(560px, 100%); max-height: 82vh; overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-lg); }
.wx-modal-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); border: 1px solid var(--color-border); }
.wx-modal-close:hover { color: var(--color-text); }
.wx-modal-close svg { width: 15px; height: 15px; }
.wx-modal-title { font-size: 1rem; font-weight: var(--font-weight-bold); margin-bottom: var(--space-md); padding-right: 34px; }
.wx-modal-title small { font-size: 0.7rem; color: var(--color-text-muted); font-family: ui-monospace, monospace; font-weight: var(--font-weight-normal); }
.wx-modal-body { font-size: 0.85rem; color: var(--color-text-secondary); line-height: 1.75; }
.wx-modal-body code { font-family: ui-monospace, monospace; font-size: 0.82em; background: var(--color-surface-elevated); padding: 1px 5px; border-radius: 4px; color: var(--color-text); }
.wx-modal-body b { color: var(--color-text); }

/* ── 日食站按鈕 ── */
.wx-site-btn.is-eclipse svg { color: var(--color-amber); }
.wx-site-btn.is-eclipse.active svg { color: var(--color-accent-text); }
.wx-site-custom { border-style: dashed; }

/* ── 自訂地點 modal ── */
.wx-custom-box { width: min(860px, 100%); }
.wx-custom-body { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--space-md); margin-top: var(--space-md); align-items: stretch; }
.wx-custom-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wx-custom-search-row { display: flex; gap: 6px; min-width: 0; }
.wx-custom-search-row input { flex: 1; min-width: 0; width: 100%; padding: 8px 10px; font-family: var(--font-primary); font-size: 0.82rem; background: var(--color-surface-elevated); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.wx-custom-search-row button { flex-shrink: 0; width: 38px; display: flex; align-items: center; justify-content: center; background: var(--color-accent); color: var(--color-accent-text); border: none; border-radius: var(--radius-sm); }
.wx-custom-search-row button svg { width: 15px; height: 15px; }
.wx-custom-results { display: flex; flex-direction: column; gap: 3px; max-height: 148px; overflow-y: auto; }
.wx-custom-results:empty { display: none; }
.wx-cust-result { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 6px 9px; border-radius: var(--radius-sm); background: var(--color-surface-elevated); border: 1px solid var(--color-border); font-size: 0.8rem; color: var(--color-text); }
.wx-cust-result:hover { border-color: var(--color-accent); }
.wx-cust-result small { color: var(--color-text-muted); font-size: 0.68rem; margin-top: 1px; }
.wx-cust-hint { font-size: 0.75rem; color: var(--color-text-muted); padding: 6px 2px; }
.wx-custom-coords { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 0; }
.wx-cust-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 0.7rem; color: var(--color-text-secondary); }
.wx-cust-field.wx-cust-name { grid-column: 1 / -1; }
.wx-cust-field input { width: 100%; min-width: 0; padding: 7px 9px; font-family: var(--font-primary); font-size: 0.8rem; background: var(--color-surface-elevated); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.wx-cust-field input:focus, .wx-custom-search-row input:focus { outline: none; border-color: var(--color-accent); }
.wx-custom-err { font-size: 0.74rem; color: var(--color-rose); min-height: 1em; }
.wx-custom-apply { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px; border-radius: var(--radius-md); background: var(--color-accent); color: var(--color-accent-text); font-family: var(--font-primary); font-size: 0.85rem; font-weight: var(--font-weight-medium); }
.wx-custom-apply:hover { background: var(--color-accent-hover); }
.wx-custom-apply svg { width: 16px; height: 16px; }
.wx-custom-hint { font-size: 0.68rem; color: var(--color-text-muted); }

/* 儲存到帳號 */
.wx-custom-save { display: flex; align-items: flex-start; gap: 8px; font-size: 0.78rem; color: var(--color-text); cursor: pointer; }
.wx-custom-save input { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--color-accent); flex-shrink: 0; }
.wx-custom-save small { display: block; font-size: 0.68rem; color: var(--color-text-muted); margin-top: 1px; }
.wx-custom-saved { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: #3fb37f; }
.wx-custom-saved[hidden] { display: none; }
.wx-custom-saved svg { width: 14px; height: 14px; }
.wx-custom-login-note { display: flex; align-items: flex-start; gap: 7px; font-size: 0.72rem; color: var(--color-text-secondary); line-height: 1.5; }
.wx-custom-login-note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--color-accent); }
.wx-custom-login-note a { color: var(--color-accent); font-weight: var(--font-weight-semibold); }
.wx-custom-login-note a:hover { color: var(--color-accent-hover); }
.wx-custom-map { min-height: 360px; height: 100%; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); z-index: 0; }
.wx-custom-map .leaflet-container { height: 100%; background: var(--color-surface-elevated); }

/* ── Responsive ── */
@media (max-width: 760px) {
    .wx-custom-body { grid-template-columns: 1fr; }
    .wx-custom-map { min-height: 260px; }
}
@media (max-width: 1024px) {
    .wx-toprow { grid-template-columns: 1fr; }
    .wx-grid-2 { grid-template-columns: 1fr; }
    .wx-forecast { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px) {
    .wx-toprow { grid-template-columns: 1fr; }
    .wx-right { border-top: 1px solid rgba(255,255,255,0.12); }
    .wx-hero { padding: var(--space-xl); }
}
@media (max-width: 620px) {
    .wx-wrap { width: 92vw; }
    .wx-hero { flex-direction: column; align-items: stretch; }
    .wx-verdict { min-width: 0; }
    .wx-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .wx-forecast { grid-template-columns: repeat(3, 1fr); }
    .wx-hero-temp { font-size: 3rem; }
    .wx-obs-facts { grid-template-columns: 1fr; }
    .wx-mb-grid { grid-template-columns: 1fr; }
    .wx-imgwall { grid-template-columns: 1fr; }
}
.wx-layer-total { padding-bottom: 6px; margin-bottom: 10px; border-bottom: 1px dashed var(--color-border); }
.wx-layer-total .wx-layer-name { font-weight: 600; }
.wx-layer-note { flex: 1; font-size: 0.66rem; color: var(--color-text-muted); }
.wx-layer-total .wx-layer-val { font-weight: 700; }