/* ==========================================================================
   AeroWeather - Premier Light Architectural Design System
   Homage: lite.ego.app & iris.fun Light Editorial Craft
   Core Directives:
   - Ivory Porcelain Canvas & Obsidian Ink Typography
   - Zero Nested Rounding (Strictly NO Box-in-a-Box Clutter)
   - Restrained Architectural Radii (10px cards, 6px buttons, 0px inner dividers)
   - Hairline Borders (#e4e4e7) & High-Precision Monospace Telemetry
   ========================================================================== */

:root {
  /* 调色体系：柔和陶瓷画布 + 纯黑墨色字 + 精细发丝边框 */
  --bg-canvas: transparent;
  --bg-surface: #ffffff;
  --bg-card: rgba(255, 255, 255, 0.72);
  /* 内凹/悬停底色：同样跟随主题（浅色下是浅灰白，深色下是微亮白） */
  --glass-inset-rgb: 255, 255, 255;
  --glass-inset-alpha: 0.34;
  --bg-subtle: rgba(var(--glass-inset-rgb), var(--glass-inset-alpha));
  --bg-subtle-hover: rgba(var(--glass-inset-rgb), calc(var(--glass-inset-alpha) * 1.5));

  /* ------------------------------------------------------------------
     毛玻璃核心系统 (Glassmorphism Core)
     以下变量全部由 js/weather-effects.js 在运行时按「时段 + 天气」注入，
     这里的值只是无 JS 时的兜底。任何组件都不应再硬编码玻璃参数。
     ------------------------------------------------------------------ */
  --glass-tint-rgb: 236, 242, 250;      /* 玻璃底色（跟随天空） */
  --glass-tint-alpha: 0.50;             /* 玻璃底色的不透明度 */
  --glass-card-rgb: 255, 255, 255;      /* 卡片底色 */
  --glass-card-alpha: 0.34;             /* 卡片不透明度 */
  --glass-blur-px: 16px;                /* 主模糊半径（随天气变化） */
  --glass-sat: 130%;                    /* 饱和度增强 */
  --glass-bright: 104%;                 /* 亮度增强 */
  --glass-sheen: 0.34;                  /* 表面光泽强度 */
  --glass-crisp: 1;                     /* 边缘清晰度（雨天降低） */

  --sheen-x: 50%;                       /* 高光方位，跟随太阳 */
  --sheen-y: 8%;
  --sheen-color: rgba(255, 248, 232, 0.42);

  --glass-card-bg: rgba(var(--glass-card-rgb), var(--glass-card-alpha));
  --glass-card-border: rgba(255, 255, 255, 0.55);
  --glass-subtle-bg: rgba(var(--glass-card-rgb), calc(var(--glass-card-alpha) * 0.78));
  --glass-subtle-border: rgba(255, 255, 255, 0.45);
  --glass-hairline: rgba(9, 9, 11, 0.08);
  --glass-shadow-strength: 0.12;

  --glass-text-primary: #0a0c10;
  --glass-text-secondary: #414a57;
  --glass-text-muted: #6b7480;
  --glass-text-dim: #9aa2ad;

  /* 兼容旧变量名 */
  --glass-blur: blur(var(--glass-blur-px)) saturate(var(--glass-sat));

  --border-subtle: #e4e4e7;
  --border-medium: #d4d4d8;
  --border-active: #71717a;

  --text-primary: #0a0c10;
  --text-secondary: #2f3742;
  /* muted / dim 用于次要信息，必须保证在明亮玻璃上依旧可读，
     因此比"教科书式浅灰"更深一档，避免与浅色玻璃融为一体。
     （与 js/weather-effects.js 运行时注入的浅色档保持一致） */
  --text-muted: #414954;
  --text-dim: #474f5b;

  /* ------------------------------------------------------------------
     分段开关 / 下拉当前项 的选中态
     它们都只是正文数值或列表的附属控件，选中态只做「轻微抬起」，
     不抢主内容的视觉层级，避免出现贴在正文旁边的白贴纸。
     全站只保留这一套选中态令牌，不再有第二套「实心反色」。
     ------------------------------------------------------------------ */
  --segment-track-bg: rgba(var(--glass-card-rgb), calc(var(--glass-card-alpha) * 1.06));
  --segment-on-bg: rgba(9, 11, 16, 0.09);
  --segment-on-fg: var(--text-primary);
  --segment-on-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.60);

  /* ------------------------------------------------------------------
     品牌字标 "Weather"（衬线斜体）的前景色
     它原本硬编码成 #1e293b，深色场景下等于深蓝压深蓝，几乎不可见。
     改为随主题反转的变量，浅色保持原来的墨蓝调，深色换成高位亮色。
     ------------------------------------------------------------------ */
  --brand-serif-fg: #1e293b;

  /* ------------------------------------------------------------------
     键盘聚焦环
     浏览器默认聚焦环是高饱和的系统蓝（Chrome 实测 rgb(0,95,204)），
     与本站「低饱和毛玻璃 + 单色墨黑」体系严重冲突，
     因此统一换成随主题反转的单色环。
     ------------------------------------------------------------------ */
  --focus-ring: #0a0c10;

  --accent-blue: #0284c7;
  --accent-emerald: #059669;
  --accent-amber: #d97706;
  --accent-rose: #e11d48;

  /* 国标 GB 3095-2012 / HJ 633-2012 颗粒物质量色彩
     excellent 同时用于徽标底色与表格数值字色，取深一档保证两端都够对比 */
  --color-excellent: #047857;
  --color-good: #0284c7;
  --color-moderate: #d97706;
  --color-unhealthy: #ea580c;
  --color-very-unhealthy: #db2777;
  --color-hazardous: #be123c;

  /* 字体栈：瑞士极简无衬线 + 意境斜体衬线 + 精密技术等宽 */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif;
  --font-serif: "Newsreader", "Apple Garamond", Georgia, serif;
  --font-mono: "DM Mono", "SF Mono", Menlo, Consolas, monospace;

  /* 统一克制的几何倒角（彻底杜绝怪异与层层嵌套） */
  --radius-card: 12px;
  --radius-btn: 8px;
  --radius-inner: 6px;

  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.03), 0 4px 16px -2px rgba(0, 0, 0, 0.02);
  --shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.04), 0 8px 24px -3px rgba(0, 0, 0, 0.04);
  --shadow-modal: 0 20px 48px -6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);

  --transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   键盘可达性：统一自定义聚焦环 (Unified Focus Ring)
   --------------------------------------------------------------------------
   鼠标点击不再残留描边；只有键盘 Tab 时才显示聚焦环。
   环色随主题反转（浅色玻璃→墨黑环 / 深色玻璃→亮白环），
   且统一外扩 2px 落在容器底色上，因此在任何背景上都保持可见，
   不会像系统默认蓝环那样在深色毛玻璃上"跳出来"。
   ========================================================================== */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* 容器内的分段项/菜单项：环贴着自身边界，避免顶到容器边缘 */
.unit-opt:focus-visible,
.view-opt-btn:focus-visible,
.top-nav-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

body {
  font-family: var(--font-sans);
  color: var(--glass-text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  position: relative;
  letter-spacing: -0.015em;
  background-color: transparent;
  transition: color 0.9s ease;
}

/* ==========================================================================
   景深层：由后至前共 5 层，构成真正的"隔着一层毛玻璃看窗外"的物理结构
   ========================================================================== */

/* 1) 兜底天空渐变（JS 未就绪时的可见底色） */
.sky-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, #b8d4e8 0%, #dce8ed 54%, #ece8df 100%);
  transition: background 2.8s ease;
  pointer-events: none;
}

/* 2) 窗外世界：这是毛玻璃真正要模糊的内容层
      —— 没有它，backdrop-filter 只是在模糊一片纯色，玻璃必然显得"假" */
.scene-world {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: block;
}

/* 3) 玻璃外表面水滴：独立于卡片的前景层。背景雨丝仍在 scene-world，
      贴近玻璃的水珠浮在内容之上，才会像附着在窗面而不是卡片背后。 */
.scene-glass {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  display: block;
  opacity: var(--glass-weather-opacity, 0);
  transition: opacity 1.4s ease;
}

/* 雪天前景粒子：位于内容之上，避免被远景雾层吞没。 */
.scene-snow {
  position: fixed;
  inset: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
  opacity: 0;
  transition: opacity 0.8s ease;
}
body.weather-snow .scene-snow {
  opacity: 1;
}

/* 4) 玻璃微观颗粒与雾面质感
      两层噪声：细颗粒模拟玻璃表面的微观起伏，粗网格模拟浮法玻璃的细微纹理 */
.glass-frost-overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: soft-light;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.32'/></svg>"),
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.10) 0%, transparent 55%);
  background-size: 140px 140px, 100% 100%;
  transition: opacity 0.8s ease;
}

/* 5) 顶层环境漫射光（跟随太阳方位的径向光晕 + 缓慢呼吸）已整体移除：
      它那一圈一圈的色阶在大面积天空上会显出明显的同心环，
      且会随呼吸动画整体缩放推移，观感很吵。背景只保留天空本身。 */

.app-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 32px 24px 80px;
  width: 100%;
  position: relative;
  z-index: 10;
  background: transparent;
}

/* ==========================================================================
   头部导航 & 品牌标志
   ========================================================================== */
.header {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 24px;
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-icon {
  width: 32px;
  height: 32px;
  background: rgba(var(--glass-card-rgb), calc(var(--glass-card-alpha) * 1.05));
  backdrop-filter: blur(var(--glass-blur-px));
  -webkit-backdrop-filter: blur(var(--glass-blur-px));
  border-radius: var(--radius-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--glass-card-border);
  box-shadow: 0 1px 3px rgba(3, 8, 18, calc(var(--glass-shadow-strength) * 0.5)), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  color: var(--text-primary);
}

/* 品牌图标：黑色描边 PNG 用 mask 承载，颜色由 currentColor 决定，
   因此在浅色玻璃上画深墨、在深色玻璃上自动翻成亮色，绝不会变成一块看不见的黑方块。 */
.brand-icon-img {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url('../icons/logo-weather.png') center / contain no-repeat;
  mask: url('../icons/logo-weather.png') center / contain no-repeat;
}

.brand-title-wrap {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--text-primary);
}

.brand-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--brand-serif-fg);
  font-size: 1.45rem;
  letter-spacing: normal;
}

.brand-subtag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-left: 2px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 统一轻盈平整的顶部操作按钮 (单层无嵌套结构，彻底消除矩形套矩形) */
.top-nav-btn {
  height: 34px;
  background: rgba(var(--glass-card-rgb), calc(var(--glass-card-alpha) * 1.08));
  backdrop-filter: blur(calc(var(--glass-blur-px) * 1.1)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur-px) * 1.1)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-card-border);
  color: var(--text-primary);
  border-radius: var(--radius-btn);
  padding: 0 12px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px -2px rgba(3, 8, 18, calc(var(--glass-shadow-strength) * 0.7)), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: var(--transition);
  white-space: nowrap;
}

.top-nav-btn:hover {
  background: rgba(var(--glass-card-rgb), calc(var(--glass-card-alpha) * 1.4));
  box-shadow: 0 5px 14px -3px rgba(3, 8, 18, calc(var(--glass-shadow-strength) * 1.0)), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.top-nav-btn:active {
  transform: translateY(1px);
}



/* ==========================================================================
   功能分组下拉 (View Switcher) —— 顶部右侧单个入口 + 可选列表
   ========================================================================== */
.view-control-wrap {
  position: relative;
}

.view-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 248px;
  background: rgba(var(--glass-card-rgb), calc(var(--glass-card-alpha) * 1.9 + 0.10));
  backdrop-filter: blur(calc(var(--glass-blur-px) * 2)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur-px) * 2)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-btn);
  box-shadow: 0 20px 46px -8px rgba(3, 8, 18, calc(var(--glass-shadow-strength) * 1.6)), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  padding: 6px;
  z-index: 120;
  display: none;
  animation: fadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.view-dropdown.active {
  display: block;
}

.view-opt-btn {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  font-size: 0.82rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-inner);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: background-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.view-opt-btn:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

/* 选中项与顶部 °C/°F 分段开关共用同一套「轻微抬起」语言：
   不用一整块实心白贴纸（它在下拉面板里亮度超过正文，非常跳），
   改为低透明度底 + 顶部内高光，把当前项轻轻托起来。 */
.view-opt-btn.active {
  background: var(--segment-on-bg);
  color: var(--segment-on-fg);
  box-shadow: var(--segment-on-shadow);
  font-weight: 600;
}

/* 悬停不能把选中项压回未选中态 */
.view-opt-btn.active:hover {
  background: var(--segment-on-bg);
  color: var(--segment-on-fg);
}

.view-opt-btn.active svg {
  stroke: currentColor;
  opacity: 1;
}

.view-opt-btn svg {
  flex-shrink: 0;
  opacity: 0.85;
}

.view-section {
  display: none;
  animation: fadeIn 0.22s ease;
}

.view-section.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   搜索栏与快捷地标
   ========================================================================== */
/* 搜索框与整体版面同宽，不再收窄居中，形成整齐的左右边线 */
.search-container {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
}

.search-box {
  display: flex;
  align-items: center;
  background: rgba(var(--glass-card-rgb), calc(var(--glass-card-alpha) * 1.12));
  backdrop-filter: blur(calc(var(--glass-blur-px) * 1.2)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur-px) * 1.2)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-card-border);
  border-radius: 10px;
  padding: 7px 14px;
  box-shadow: 0 2px 8px -1px rgba(3, 8, 18, calc(var(--glass-shadow-strength) * 0.8)), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: var(--transition);
}

.search-box:focus-within {
  border-color: var(--border-active);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.04);
}

.search-icon {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.search-input {
  flex: 1;
  /* input 默认有 20 字符的固有最小宽度，窄屏上会把「定位」按钮挤到换行。
     置 0 后允许它自由收缩，空间不足时优先压缩输入框而不是挤爆按钮。 */
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 0.88rem;
  outline: none;
  font-family: inherit;
}

.search-input::placeholder {
  color: var(--text-dim);
}

/* 内联操作按钮 (扁平无边框，杜绝嵌套胶囊) */
.locate-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-family: var(--font-sans);
  font-weight: 500;
  /* 极窄屏（320px）下输入框会挤压这个按钮，必须禁止换行，
     否则「定位」两字会被拆成上下两行，撑高整个搜索框。 */
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--transition);
}

.locate-btn:hover {
  color: var(--text-primary);
  background: var(--bg-subtle);
}

.search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  background: rgba(var(--glass-card-rgb), calc(var(--glass-card-alpha) * 1.5));
  backdrop-filter: blur(calc(var(--glass-blur-px) * 1.6)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur-px) * 1.6)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-btn);
  overflow: hidden;
  box-shadow: 0 20px 46px -8px rgba(3, 8, 18, calc(var(--glass-shadow-strength) * 1.6)), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  z-index: 100;
  display: none;
}

.search-dropdown.active {
  display: block;
}

.search-item {
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.12s ease;
}

.search-item:last-child {
  border-bottom: none;
}

.search-item:hover {
  background: var(--bg-subtle);
}

.search-item-name {
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--text-primary);
}

.search-item-region {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* ==========================================================================
   卡片体系：真·毛玻璃 (True Frosted Glass)
   构造顺序：背景色(Tint) → 背板模糊(Backdrop Blur) → 表面光泽(Sheen) → 边缘高光
   要点：毛玻璃的"通透"来自「背后有内容 + 背板模糊 + 表面反射」三者叠加，
        单纯给一个半透明白色是玻璃感缺失的主因。
   ========================================================================== */
.card {
  position: relative;
  isolation: isolate;
  background: rgba(var(--glass-card-rgb), var(--glass-card-alpha));
  backdrop-filter: blur(var(--glass-blur-px)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  -webkit-backdrop-filter: blur(var(--glass-blur-px)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-card);
  padding: 22px;
  box-shadow:
    0 12px 34px -6px rgba(3, 8, 18, calc(var(--glass-shadow-strength) * 1.0)),
    0 3px 10px -2px rgba(3, 8, 18, calc(var(--glass-shadow-strength) * 0.55)),
    inset 0 1px 0 rgba(255, 255, 255, calc(0.55 * var(--glass-crisp)));
  transition: background 1.8s ease, border-color 1.8s ease,
              backdrop-filter 1.8s ease, box-shadow 0.5s ease, transform 0.25s ease;
}

/* 表面光泽：来自光源方向的一块大范围斜向反光，是玻璃"有厚度"的关键 */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: var(--glass-sheen);
  background:
    linear-gradient(158deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.045) 18%,
      rgba(255, 255, 255, 0.00) 42%,
      rgba(255, 255, 255, 0.00) 66%,
      rgba(255, 255, 255, 0.025) 88%,
      rgba(255, 255, 255, 0.07) 100%),
    radial-gradient(120% 90% at var(--sheen-x) var(--sheen-y),
      var(--sheen-color) 0%, rgba(255, 255, 255, 0) 58%);
  transition: background 1.2s linear, opacity 0.9s ease;
}

/* 边缘高光：玻璃切边的菲涅尔亮线，上缘最亮、下缘略暗，制造厚度 */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background: linear-gradient(160deg,
    rgba(255, 255, 255, calc(0.75 * var(--glass-crisp))) 0%,
    rgba(255, 255, 255, calc(0.16 * var(--glass-crisp))) 30%,
    rgba(255, 255, 255, 0) 52%,
    rgba(255, 255, 255, calc(0.10 * var(--glass-crisp))) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.card:hover {
  box-shadow:
    0 18px 44px -8px rgba(3, 8, 18, calc(var(--glass-shadow-strength) * 1.25)),
    0 5px 14px -3px rgba(3, 8, 18, calc(var(--glass-shadow-strength) * 0.7)),
    inset 0 1px 0 rgba(255, 255, 255, calc(0.68 * var(--glass-crisp)));
  transform: translateY(-1px);
}

.card-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  letter-spacing: 0.06em;
}

.card-title svg {
  color: var(--text-muted);
}

/* 主栅格 */
.main-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 900px) {
  .main-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Hero 卡片：实时温度与天候
   ========================================================================== */
.hero-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
}

.hero-location-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.hero-city {
  font-size: 2.1rem;
  font-weight: 750;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text-primary);
}

.hero-region {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 5px;
  font-family: var(--font-mono);
}

.hero-time {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  background: var(--bg-subtle);
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
}

.hero-weather-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0;
  flex-wrap: wrap;
  gap: 16px;
}

/* 温度与单位切换作为一组紧邻排布 */
.temp-group {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.temp-large {
  font-size: 5.2rem;
  font-weight: 300;
  letter-spacing: -0.06em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.temp-degree {
  font-size: 2.1rem;
  font-weight: 200;
  vertical-align: top;
  color: var(--text-muted);
}

/* 摄氏度 / 华氏度分段开关：贴在温度右下角 */
.unit-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  margin-bottom: 10px;
  background: var(--segment-track-bg);
  backdrop-filter: blur(calc(var(--glass-blur-px) * 1.1)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur-px) * 1.1)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-btn);
  box-shadow: 0 2px 8px -2px rgba(3, 8, 18, calc(var(--glass-shadow-strength) * 0.7)), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.unit-opt {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 9px;
  border-radius: var(--radius-inner);
  cursor: pointer;
  /* 不用 transition: all —— 它会把 outline 一并补间，
     导致 Tab 聚焦时聚焦环从 currentColor 渐变、边缘发虚。 */
  transition: background-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.unit-opt:hover {
  color: var(--text-primary);
  background: var(--bg-subtle);
}

/* 选中态：只做"轻微抬起 + 字色提亮"，
   不再用整块实底贴纸抢走主温度数值的视觉焦点。 */
.unit-opt.active {
  background: var(--segment-on-bg);
  color: var(--segment-on-fg);
  box-shadow: var(--segment-on-shadow);
}

.unit-opt.active:hover {
  color: var(--segment-on-fg);
  background: var(--segment-on-bg);
}

.hero-weather-desc {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero-icon {
  width: 60px;
  height: 60px;
}

.hero-weather-text {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.hero-high-low {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.hero-footer-stats {
  display: flex;
  gap: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.82rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
}

.stat-value {
  color: var(--text-primary);
  font-weight: 600;
}

/* ==========================================================================
   PM2.5 核心看板 (纯净实验室仪表盘 · 彻底消除嵌套框)
   ========================================================================== */
.aqi-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.aqi-header-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.aqi-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.76rem;
  /* 等级底色由 JS 按 PM2.5 逐级注入（琥珀/紫等浅色同样要看得清），
     前景色由 JS 依据背景亮度挑选，默认回退白色。 */
  color: var(--badge-fg, #ffffff);
  background: var(--color-excellent);
  letter-spacing: 0.04em;
}

.aqi-badge::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--badge-fg, #ffffff);
}

/* 发丝中线分割的明朗双列，杜绝盒内有盒 */
.aqi-spotlight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 16px 0;
  padding: 14px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.spotlight-box {
  background: transparent;
  border: none;
  padding: 0;
}

.spotlight-box:first-child {
  border-right: 1px solid var(--border-subtle);
  padding-right: 20px;
}

.spotlight-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  display: flex;
  justify-content: space-between;
}

.spotlight-val {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  margin-top: 4px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  color: var(--text-primary);
}

.spotlight-unit {
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--text-dim);
  margin-left: 3px;
}

/* 标尺轨道 */
.pm25-scale-wrapper {
  margin: 10px 0;
}

.pm25-scale-header {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.pm25-scale-bar {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    #059669 0%,
    #0284c7 20%,
    #d97706 40%,
    #ea580c 60%,
    #db2777 80%,
    #be123c 100%
  );
  position: relative;
}

.scale-pin {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: var(--pin-fill, #ffffff);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(3, 8, 18, 0.3);
  border: 2px solid var(--pin-ring, #0a0c10);
  transition: left 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.aqi-advice {
  background: transparent;
  border: none;
  padding-top: 10px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

/* ==========================================================================
   24小时逐时预报 (无边框连续刻度线)
   ========================================================================== */
.hourly-card {
  margin-bottom: 16px;
}

.hourly-list {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 4px 0 8px;
  scrollbar-width: thin;
  scrollbar-color: #d4d4d8 transparent;
}

.hourly-list::-webkit-scrollbar {
  height: 4px;
}

.hourly-list::-webkit-scrollbar-thumb {
  background: var(--glass-hairline);
  border-radius: 2px;
}

.hourly-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 62px;
  padding: 8px 4px;
  background: transparent;
  border: none;
  border-radius: 6px;
}

.hourly-time {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.hourly-icon {
  width: 26px;
  height: 26px;
}

.hourly-temp {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-primary);
}

.hourly-pop {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--accent-blue);
  display: flex;
  align-items: center;
  gap: 2px;
}

/* ==========================================================================
   7天预报 + 4格微件卡片
   ========================================================================== */
.secondary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 850px) {
  .secondary-grid {
    grid-template-columns: 1fr;
  }
}

.daily-list {
  display: flex;
  flex-direction: column;
}

.daily-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
  border-radius: 0;
}

.daily-row:last-child {
  border-bottom: none;
}

.daily-day {
  width: 55px;
  font-size: 0.86rem;
  font-weight: 500;
}

.daily-weather {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 105px;
}

.daily-icon {
  width: 22px;
  height: 22px;
}

.daily-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.daily-range {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  max-width: 170px;
}

.temp-min {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-dim);
  width: 28px;
  text-align: right;
}

.temp-bar-bg {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--glass-hairline);
  overflow: hidden;
  position: relative;
}

.temp-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(to right, var(--accent-blue), var(--accent-amber));
}

.temp-max {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  width: 28px;
}

/* 4格指标微件 */
.metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.metric-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;
  /* 继承 .card 的毛玻璃，此处只让玻璃更薄一点以便透出窗外层次 */
  background: rgba(var(--glass-card-rgb), calc(var(--glass-card-alpha) * 0.86));
}

.metric-header {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 气压图标：用 PNG 的 alpha 当遮罩而不是当图片贴上去，
   这样它和旁边那些 stroke="currentColor" 的线稿图标一样跟随主题深浅，
   深色玻璃下不会变成一块看不见的黑方块。 */
.metric-icon-img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url('../icons/pressure.png') center / contain no-repeat;
  mask: url('../icons/pressure.png') center / contain no-repeat;
}

.metric-val {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 700;
  margin: 5px 0;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.metric-sub {
  font-size: 0.74rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

/* ==========================================================================
   全国地市天气导航矩阵 (Regional Matrix)
   ========================================================================== */
.regional-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.region-group {
  background: transparent;
  border: none;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.region-group:last-child {
  border-bottom: none;
}

.region-title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-weight: 600;
}

.region-cities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

.nav-city-btn {
  background: rgba(var(--glass-card-rgb), calc(var(--glass-card-alpha) * 0.92));
  backdrop-filter: blur(calc(var(--glass-blur-px) * 0.85));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur-px) * 0.85));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-btn);
  padding: 8px 12px;
  text-align: left;
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 1px 4px -1px rgba(3, 8, 18, calc(var(--glass-shadow-strength) * 0.6)), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.nav-city-btn:hover {
  background: rgba(var(--glass-card-rgb), calc(var(--glass-card-alpha) * 1.3));
  transform: translateY(-1px);
}

.nav-city-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.nav-city-province {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
}

/* ==========================================================================
   跨城出行天气导航 (Route Planner · 彻底消除多重盒子)
   ========================================================================== */
.route-card {
  padding: 24px;
}

.route-form-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.route-select-group {
  flex: 1;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.route-label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.route-select {
  background: rgba(var(--glass-card-rgb), calc(var(--glass-card-alpha) * 1.12));
  backdrop-filter: blur(calc(var(--glass-blur-px) * 1.1));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur-px) * 1.1));
  border: 1px solid var(--glass-card-border);
  color: var(--text-primary);
  padding: 9px 12px;
  border-radius: var(--radius-btn);
  font-size: 0.88rem;
  outline: none;
  font-family: inherit;
  transition: var(--transition);
}

.route-select:focus {
  border-color: var(--border-active);
}

/* 主行动按钮：半透明深色玻璃，而非不透明黑块 —— 避免在玻璃体系里出现"实心补丁" */
.route-action-btn {
  background: rgba(16, 22, 36, 0.78);
  backdrop-filter: blur(calc(var(--glass-blur-px) * 1.2)) saturate(140%);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur-px) * 1.2)) saturate(140%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 10px 20px;
  border-radius: var(--radius-btn);
  font-weight: 500;
  font-size: 0.86rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  box-shadow: 0 4px 14px -3px rgba(3, 8, 18, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: var(--transition);
}

.route-action-btn:hover {
  background: rgba(30, 40, 60, 0.88);
  transform: translateY(-1px);
}

.route-result-box {
  background: transparent;
  border-radius: 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--border-subtle);
}

.route-comparison-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 650px) {
  .route-comparison-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.route-city-pane {
  background: transparent;
  padding: 0;
  border: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.route-arrow-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-dim);
}

.route-tips {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  padding: 14px 18px;
  border-radius: var(--radius-btn);
  font-size: 0.84rem;
  line-height: 1.6;
}

/* ==========================================================================
   气象雷达与工具导航 (Radar & Tools Directory)
   ========================================================================== */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.tool-card {
  background: rgba(var(--glass-card-rgb), calc(var(--glass-card-alpha) * 0.92));
  backdrop-filter: blur(var(--glass-blur-px)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  -webkit-backdrop-filter: blur(var(--glass-blur-px)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 8px 24px -5px rgba(3, 8, 18, calc(var(--glass-shadow-strength) * 0.8)), inset 0 1px 0 rgba(255, 255, 255, calc(0.45 * var(--glass-crisp)));
  transition: var(--transition);
}

.tool-card:hover {
  box-shadow: 0 14px 34px -6px rgba(3, 8, 18, calc(var(--glass-shadow-strength) * 1.1)), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform: translateY(-1px);
}

.tool-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.tool-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}



.tool-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tool-name {
  font-size: 0.96rem;
  font-weight: 650;
  color: var(--text-primary);
  line-height: 1.25;
}

.tool-domain {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
}

.tool-desc {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.tool-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: var(--radius-btn);
  background: rgba(var(--glass-card-rgb), calc(var(--glass-card-alpha) * 1.05));
  border: 1px solid var(--glass-card-border);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  transition: var(--transition);
}

.tool-link-btn:hover {
  background: rgba(16, 22, 36, 0.78);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* ==========================================================================
   iOS Bark 每日天气推送卡片（位于工具视图底部）
   ========================================================================== */
.bark-push-card {
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: var(--radius-card);
  background: rgba(var(--glass-card-rgb), calc(var(--glass-card-alpha) * 0.92));
  backdrop-filter: blur(var(--glass-blur-px)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  -webkit-backdrop-filter: blur(var(--glass-blur-px)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  border: 1px solid var(--glass-card-border);
  box-shadow: 0 8px 24px -5px rgba(3, 8, 18, calc(var(--glass-shadow-strength) * 0.8)), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.bark-push-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-size: 0.92rem;
}

.bark-push-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 8px 0 12px;
}

.bark-push-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.bark-push-input {
  flex: 1;
  min-width: 200px;
  background: rgba(var(--glass-card-rgb), calc(var(--glass-card-alpha) * 1.15));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-btn);
  color: var(--text-primary);
  padding: 10px 12px;
  font-size: 0.82rem;
  font-family: var(--font-mono);
  outline: none;
  transition: var(--transition);
}

.bark-push-input:focus {
  border-color: var(--border-active);
}

.bark-push-input::placeholder {
  color: var(--text-dim);
}

.bark-push-row .route-action-btn {
  margin-top: 0;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .bark-push-row .route-action-btn {
    width: 100%;
    justify-content: center;
  }
}
















/* 规范化表格样式 (彻底杜绝折行与拥挤) */














/* ==========================================================================
   加载与提示框
   ========================================================================== */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--glass-card-rgb), 0.72);
  backdrop-filter: blur(calc(var(--glass-blur-px) * 1.6)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur-px) * 1.6)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-primary);
}

.loading-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--border-subtle);
  border-top-color: var(--text-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: rgba(12, 17, 28, 0.86);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 8px 14px;
  border-radius: var(--radius-btn);
  box-shadow: 0 10px 30px -6px rgba(3, 8, 18, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font-size: 0.8rem;
  font-family: var(--font-mono);
  z-index: 1000;
  transform: translateY(30px);
  opacity: 0;
  transition: var(--transition);
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* 页脚 */
.footer {
  text-align: center;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.8;
}

.footer a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ------------------------------------------------------------------
   直接坐在"窗外世界"上的小字（不位于任何卡片内）
   背景亮度不可控，除色阶外再补一层与主题同向的柔光描边，
   保证晨昏、雨雾等中间调场景下字符轮廓依然清晰。
   ------------------------------------------------------------------ */
.brand-subtag,
.footer {
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.65), 0 0 8px rgba(255, 255, 255, 0.45);
}

body.glass-dark-mode .brand-subtag,
body.glass-dark-mode .footer {
  text-shadow: 0 1px 3px rgba(4, 8, 16, 0.6), 0 0 8px rgba(4, 8, 16, 0.4);
}

/* ==========================================================================
   移动端与小屏深度适配 (Mobile & Small Screen Comprehensive Optimizations)
   ========================================================================== */
@media (max-width: 768px) {
  .app-container {
    padding: 16px 14px 64px;
  }

  .header {
    gap: 14px;
    margin-bottom: 18px;
  }

  .header-top {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-bottom: 14px;
  }

  /* 手机端头部：logo 一行（标题紧跟图标靠左），分组下拉单独一行靠右。
     分组下拉用 right:0 锚在容器右侧，展开时向左伸展，天然不会溢出视口。 */
  .brand {
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
  }

  .header-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
  }

  /* 分组下拉在窄屏上贴右边缘，避免溢出视口 */
  .view-dropdown {
    min-width: 0;
    width: max(220px, calc(100vw - 64px));
    max-width: calc(100vw - 48px);
  }

  .view-opt-btn {
    font-size: 0.8rem;
  }

  .top-nav-btn {
    height: 36px;
    padding: 0 10px;
    font-size: 0.78rem;
  }




  .search-container {
    margin-bottom: 14px;
  }

  .search-input {
    font-size: 16px; /* 防止 iOS Safari 自动放大页面 */
  }

  .main-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 12px;
  }

  .card {
    padding: 18px 16px;
    border-radius: 8px;
  }

  .hero-city {
    font-size: 1.85rem;
  }

  .hero-weather-body {
    margin: 14px 0;
    gap: 12px;
  }

  .temp-large {
    font-size: 4.2rem;
  }

  .hero-weather-desc {
    gap: 10px;
  }

  .hero-icon {
    width: 48px;
    height: 48px;
  }

  .hero-weather-text {
    font-size: 1.2rem;
  }

  .hero-footer-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 12px;
  }

  .stat-item {
    font-size: 0.78rem;
  }

  /* AQI 卡片手机适配 */
  .aqi-spotlight {
    gap: 12px;
    margin: 12px 0;
    padding: 12px 0;
  }

  .spotlight-box:first-child {
    padding-right: 12px;
  }

  .spotlight-val {
    font-size: 1.7rem;
  }

  .secondary-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .metrics-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .metric-card {
    padding: 14px;
    min-height: 105px;
  }

  .metric-val {
    font-size: 1.5rem;
  }

  /* 全国地市矩阵手机适配 */
  .region-cities-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .nav-city-btn {
    padding: 7px 10px;
  }

  .nav-city-name {
    font-size: 0.85rem;
  }

  /* 跨城路线手机适配 */
  .route-card {
    padding: 18px 16px;
  }

  .route-form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 16px;
  }

  .route-arrow-icon {
    display: none;
  }

  .route-action-btn {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
  }

  .route-comparison-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 12px;
  }

  .route-comparison-grid .route-arrow-icon {
    display: flex;
    transform: rotate(90deg);
    margin: 4px 0;
  }

  /* 工具导航网格手机适配 */
  .tools-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .tool-card {
    padding: 16px;
    gap: 12px;
  }

  .tool-link-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
  }

  /* 模态框手机适配 */


}

@media (max-width: 420px) {
  .temp-large {
    font-size: 3.6rem;
  }

  .hero-city {
    font-size: 1.65rem;
  }

  .spotlight-val {
    font-size: 1.45rem;
  }

  .metric-val {
    font-size: 1.35rem;
  }

  .top-nav-btn {
    padding: 0 8px;
    font-size: 0.74rem;
  }
}

/* ==========================================================================
   下拉列表通用元素（功能分组等）
   ========================================================================== */
.dropdown-header {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  padding: 6px 10px 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dropdown-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 4px 0;
}

/* ==========================================================================
   夜间 / 暮色深色毛玻璃微调 (Obsidian Frosted Glass)
   --------------------------------------------------------------------------
   说明：绝大多数颜色已由运行时变量 (--glass-card-rgb / --text-* / --border-*)
   自动跟随天色变化，此处只处理「无法用变量表达」的少数反向对比情形：
   深色玻璃上需要一个"更亮"的选中态，才能形成正确的前后关系。
   ========================================================================== */
/* 深色玻璃下所有「选中态」统一为亮色轻微抬起，
   底色与字色始终一深一浅，不会出现白字压浅底的隐形文字。 */
body.glass-dark-mode {
  /* 深色玻璃上分段开关同样只做轻微抬起：亮白微提 + 纯白字，
     避免一块实心白贴纸跳到主温度旁边。 */
  --segment-on-bg: rgba(255, 255, 255, 0.17);
  --segment-on-fg: #ffffff;
  --segment-on-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);

  /* 深色玻璃上聚焦环反转为亮色，否则墨黑环会沉进背景 */
  --focus-ring: #ffffff;

  /* 品牌字标 "Weather"：原来的墨蓝 #1e293b 在深色场景下等于隐形，
     这里换成高亮冷白，保留衬线斜体的气质但不牺牲可读性 */
  --brand-serif-fg: #eef4fb;

  /* 深色玻璃上弱化文字同样需要抬亮，避免沉进底色 */
  --text-muted: #aab8cb;
  --text-dim: #9aa9bd;
}

/* 深色环境下玻璃表面的光泽需要收敛，避免出现"塑料反光" */
body.glass-dark-mode .card::before {
  opacity: calc(var(--glass-sheen) * 0.6);
}

body.glass-dark-mode .glass-frost-overlay {
  opacity: 0.32;
}