/* nav.52ta.top 优化版样式
   目标：首屏无阻塞、对比度全部 ≥ AA、触控目标 ≥ 44px、键盘完全可达、尊重 prefers-reduced-motion
   主题：data-theme 五套配色（墨金/青瓷/黛蓝/豆沙/素描）× data-mode 深浅，localStorage 持久化 */

/* ═══════════════ 主题 token：浅色 ═══════════════ */
:root,
:root[data-theme="ink-gold"] {
  color-scheme: light dark;

  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --ink: #1b1f24;          /* 对白 16.1:1 */
  --ink-2: #55606d;        /* 对白 5.9:1 */
  --ink-3: #6b7684;        /* 对白 4.6:1 */
  --line: #dfe3e8;
  --accent: #8a6a2f;       /* 对白 5.0:1 */
  --accent-soft: #f3ead9;
  --brand-a: #c9a96e;      /* 品牌渐变（纯装饰） */
  --brand-b: #a8853f;
  --focus: #1a56db;
  --err: #b3261e;
  --radius: 10px;
  --tap: 44px;             /* WCAG 2.2 AA 2.5.8 最小触控目标 */
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
  --pattern-o: .75;
}

:root[data-theme="celadon"] {
  --bg: #f3f7f5;
  --surface: #ffffff;
  --surface-2: #ecf2ef;
  --ink: #1c2420;
  --ink-2: #52605a;
  --ink-3: #66756e;
  --line: #dde5e1;
  --accent: #2e6b58;
  --accent-soft: #e0efe8;
  --brand-a: #6fae9a;
  --brand-b: #3d7a68;
  --focus: #0f7a5c;
}

:root[data-theme="indigo"] {
  --bg: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #ebf0f6;
  --ink: #1b2129;
  --ink-2: #505c6b;
  --ink-3: #657181;
  --line: #dce2ea;
  --accent: #2b5a8c;
  --accent-soft: #e2ebf5;
  --brand-a: #5f88bb;
  --brand-b: #2b5a8c;
  --focus: #1a56db;
}

:root[data-theme="rouge"] {
  --bg: #faf6f4;
  --surface: #ffffff;
  --surface-2: #f4ebe8;
  --ink: #251d1b;
  --ink-2: #5f514d;
  --ink-3: #74655f;
  --line: #e9deda;
  --accent: #96453f;
  --accent-soft: #f5e4e1;
  --brand-a: #cf8b83;
  --brand-b: #96453f;
  --focus: #a8322a;
}

:root[data-theme="sketch"] {
  --bg: #f6f5f1;
  --surface: #fcfbf8;
  --surface-2: #efece4;
  --ink: #262420;
  --ink-2: #565248;
  --ink-3: #6b665a;
  --line: #e2ded2;
  --accent: #55503f;
  --accent-soft: #ece8da;
  --brand-a: #857f6d;
  --brand-b: #55503f;
  --focus: #7a6a30;
  --pattern-o: 1;          /* 素描主题纹理更明显 */
}

/* 「无」：不套任何色调，纯中性灰阶 */
:root[data-theme="none"] {
  --bg: #f7f7f8;
  --surface: #ffffff;
  --surface-2: #f1f1f3;
  --ink: #1c1c1e;          /* 对白 16.5:1 */
  --ink-2: #57575c;
  --ink-3: #6e6e73;
  --line: #e3e3e6;
  --accent: #4a4a52;       /* 对白 8.6:1 */
  --accent-soft: #ececef;
  --brand-a: #a3a3ab;
  --brand-b: #6c6c74;
  --focus: #1a56db;
  --pattern-o: .45;
}

/* ═══════════════ 主题 token：深色（共享中性色 + 各主题点缀色） ═══════════════ */
:root[data-mode="dark"] {
  color-scheme: dark;
  --bg: #14161a;
  --surface: #1c1f25;
  --surface-2: #23272e;
  --ink: #e9ebee;
  --ink-2: #a9b2bd;
  --ink-3: #8b95a1;
  --line: #2c313a;
  --focus: #7aa5ff;
  --err: #ff8a80;
  --shadow: none;
  --pattern-o: .6;
}

:root[data-theme="ink-gold"][data-mode="dark"] { --accent: #e8c88a; --accent-soft: #2c2718; --brand-a: #e8c88a; --brand-b: #a8853f; }
:root[data-theme="celadon"][data-mode="dark"]  { --accent: #8fd0bb; --accent-soft: #17271f; --brand-a: #8fd0bb; --brand-b: #3d7a68; }
:root[data-theme="indigo"][data-mode="dark"]   { --accent: #9cc3f0; --accent-soft: #182334; --brand-a: #9cc3f0; --brand-b: #2b5a8c; }
:root[data-theme="rouge"][data-mode="dark"]    { --accent: #e8a8a1; --accent-soft: #2b1a18; --brand-a: #e8a8a1; --brand-b: #96453f; }
:root[data-theme="sketch"][data-mode="dark"]   { --accent: #cdc7b6; --accent-soft: #26241e; --brand-a: #cdc7b6; --brand-b: #6b665a; }
:root[data-theme="none"][data-mode="dark"]     { --accent: #d7d7dc; --accent-soft: #26262a; --brand-a: #b9b9c0; --brand-b: #7c7c85; }

/* 深浅模式跟随系统时补一个 dark 默认（未手动切换 data-mode 之前） */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode]):not([data-theme]) {
    --bg: #14161a; --surface: #1c1f25; --surface-2: #23272e;
    --ink: #e9ebee; --ink-2: #a9b2bd; --ink-3: #8b95a1; --line: #2c313a;
    --accent: #e8c88a; --accent-soft: #2c2718; --focus: #7aa5ff; --err: #ff8a80;
    --shadow: none; --pattern-o: .6;
  }
}

/* ═══════════════ 动态田园背景（fixed 装饰层，不参与交互） ═══════════════
   思路来自 meijiecao.com 的 ambient 场景：太阳呼吸、云朵飘移、飞鸟掠过、草地摆动、
   稻草人晃、风车匀速旋转。全部纯 CSS 绘制 —— 无图片、无网络请求、不依赖 JS。
   颜色一律由主题 --brand-a / --brand-b 派生，所以五套配色各成一景，深浅模式自动适配。 */
:root {
  --amb-o: .88;                                       /* 场景整体透明度 */
  --amb-sun-warm: #e8bd5e;                            /* 太阳本色（各主题各写一行） */
  --amb-sun-core: color-mix(in srgb, #fff 34%, var(--amb-sun-warm));
  --amb-sun-mid: color-mix(in srgb, transparent 4%, var(--amb-sun-warm));
  --amb-sun-edge: color-mix(in srgb, transparent 42%, var(--amb-sun-warm));
  --amb-sun-halo: color-mix(in srgb, transparent 68%, var(--amb-sun-warm));
  --amb-cloud: color-mix(in srgb, #ffffff 34%, var(--brand-a));
  --amb-cloud-sh: color-mix(in srgb, transparent 62%, var(--brand-b));
  --amb-bird: color-mix(in srgb, transparent 34%, var(--brand-b));
  --amb-grass-a: color-mix(in srgb, transparent 56%, var(--brand-a));
  --amb-grass-b: color-mix(in srgb, transparent 66%, var(--brand-b));
  --amb-grass-c: color-mix(in srgb, transparent 76%, var(--brand-b));
  --amb-ground-a: color-mix(in srgb, transparent 62%, var(--brand-a));
  --amb-ground-b: color-mix(in srgb, transparent 76%, var(--brand-b));
  --amb-cloth-a: color-mix(in srgb, transparent 12%, var(--brand-a));
  --amb-cloth-b: color-mix(in srgb, transparent 30%, var(--brand-b));
  /* 降水色给一套通用默认值：春季细雨、冬季飞雪各自再覆盖；
     天气联动时任何季节都可能下雨或下雪，缺了默认值图案会整个消失 */
  --amb-rain: color-mix(in srgb, var(--brand-b) 34%, #7fb0d4);
  --amb-snow: color-mix(in srgb, #ffffff 30%, #7f9cbe);
  /* 雪花形状：六角枝晶描边做成 mask，用 background 上色 —— 雪花随主题/明暗变色，0 图片 0 请求 */
  --snowflake: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2012L12%201.8M12%208L9.55%206.35M12%208L14.45%206.35M12%205.1L10.22%203.9M12%205.1L13.78%203.9M12%2012L20.83%206.9M15.46%2010L15.67%207.06M15.46%2010L18.12%2011.29M17.98%208.55L18.13%206.41M17.98%208.55L19.91%209.49M12%2012L20.83%2017.1M15.46%2014L18.12%2012.71M15.46%2014L15.67%2016.94M17.98%2015.45L19.91%2014.51M17.98%2015.45L18.13%2017.59M12%2012L12%2022.2M12%2016L14.45%2017.65M12%2016L9.55%2017.65M12%2018.9L13.78%2020.1M12%2018.9L10.22%2020.1M12%2012L3.17%2017.1M8.54%2014L8.33%2016.94M8.54%2014L5.88%2012.71M6.02%2015.45L5.87%2017.59M6.02%2015.45L4.09%2014.51M12%2012L3.17%206.9M8.54%2010L5.88%2011.29M8.54%2010L8.33%207.06M6.02%208.55L4.09%209.49M6.02%208.55L5.87%206.41%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221.45%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  --amb-wood-1: #8c6848;
  --amb-wood-2: #a2794f;
  --amb-wood-3: #6f5136;
  /* 降水强度（data-wx-level）派生的两个量：落得多快、显示多少。
     缺省取中雨/中雪档，保证没写 data-wx-level 时也不会只剩几滴。 */
  --spd: 1;                 /* 时长倍率：档位越高落得越快 */
  --dens: .68;              /* 可见粒子占比提示（给地面效果的浓淡用） */
}
/* 各配色的太阳：墨金＝暖金秋阳、青瓷＝青玉日、黛蓝＝冷白月、豆沙＝夕照、素描＝铅灰 */
:root[data-theme="celadon"] { --amb-o: .84; --amb-sun-warm: #cfe8d0; }
:root[data-theme="indigo"]  { --amb-sun-warm: #c3d6f0; }
:root[data-theme="rouge"]   { --amb-sun-warm: #f0b78c; }
:root[data-theme="sketch"]  { --amb-o: .64; --amb-sun-warm: #c9c2ad; }  /* 素描底色本就灰，场景稍淡一点 */
:root[data-theme="none"]    { --amb-o: .72; --amb-sun-warm: #cfcfd6; }  /* 无色调：太阳也去色 */

:root[data-mode="dark"] {
  --amb-o: .64;
  --amb-sun-warm: var(--brand-a);                     /* 深色下各主题的亮色 accent 当月亮用 */
  --amb-sun-core: color-mix(in srgb, transparent 8%, var(--brand-a));
  --amb-sun-mid: color-mix(in srgb, transparent 30%, var(--brand-a));
  --amb-sun-edge: color-mix(in srgb, transparent 60%, var(--brand-a));
  --amb-sun-halo: color-mix(in srgb, transparent 82%, var(--brand-a));
  --amb-cloud: color-mix(in srgb, var(--brand-a) 30%, transparent);
  --amb-cloud-sh: color-mix(in srgb, transparent 86%, var(--brand-b));
  --amb-bird: color-mix(in srgb, var(--brand-a) 62%, transparent);
  --amb-wood-1: #6b5238; --amb-wood-2: #7c5f42; --amb-wood-3: #523d2b;
}

/* ═══════════════ 四季款式（data-season 切换） ═══════════════
   春·细雨花瓣 / 夏·蜻蜓浓荫 / 秋·落叶雁阵 / 冬·飞雪素裹。
   季节色统一与主题品牌色混合（约四成品牌色），所以五套配色换过去，
   四季仍各带各的微差；深浅模式由既有的 --amb-o 与 dark 规则统一压低。 */
:root:not([data-season]), :root[data-season="summer"] {   /* 夏＝原田园场景，也是无 JS 时的兜底 */
  --amb-sun-warm: #f3c948;
  --amb-grass-a: color-mix(in srgb, transparent 56%, color-mix(in srgb, var(--brand-a) 42%, #46a05a));
  --amb-grass-b: color-mix(in srgb, transparent 66%, color-mix(in srgb, var(--brand-b) 34%, #2a7a44));
  --amb-grass-c: color-mix(in srgb, transparent 76%, color-mix(in srgb, var(--brand-b) 28%, #1f6538));
  --amb-ground-a: color-mix(in srgb, transparent 62%, color-mix(in srgb, var(--brand-a) 38%, #3d8f52));
  --amb-ground-b: color-mix(in srgb, transparent 76%, color-mix(in srgb, var(--brand-b) 30%, #1d6437));
  --amb-dragon: color-mix(in srgb, var(--brand-b) 40%, #3f93a8);
}
:root[data-season="spring"] {                             /* 春：嫩绿新芽、细雨如丝、花瓣轻扬 */
  --amb-sun-warm: #efd98f;
  --amb-grass-a: color-mix(in srgb, transparent 54%, color-mix(in srgb, var(--brand-a) 38%, #7cc050));
  --amb-grass-b: color-mix(in srgb, transparent 64%, color-mix(in srgb, var(--brand-b) 30%, #4f9c3d));
  --amb-grass-c: color-mix(in srgb, transparent 74%, color-mix(in srgb, var(--brand-b) 24%, #3d8535));
  --amb-ground-a: color-mix(in srgb, transparent 60%, color-mix(in srgb, var(--brand-a) 34%, #6cb348));
  --amb-ground-b: color-mix(in srgb, transparent 74%, color-mix(in srgb, var(--brand-b) 26%, #428a3a));
  --amb-cloud: color-mix(in srgb, #ffffff 46%, var(--brand-a));
  --amb-rain: color-mix(in srgb, var(--brand-b) 40%, #8fc6dc);
  --amb-petal-a: #f9cfe0; --amb-petal-b: #e88bb0;
  --amb-cloth-a: color-mix(in srgb, transparent 10%, color-mix(in srgb, var(--brand-a) 36%, #8fcf6a));
  --amb-cloth-b: color-mix(in srgb, transparent 28%, color-mix(in srgb, var(--brand-b) 30%, #4f9c3d));
}
:root[data-season="autumn"] {                             /* 秋：金黄草场、落叶纷飞、雁阵南去 */
  --amb-sun-warm: #ef9440;
  --amb-grass-a: color-mix(in srgb, transparent 54%, color-mix(in srgb, var(--brand-a) 36%, #d9a63f));
  --amb-grass-b: color-mix(in srgb, transparent 64%, color-mix(in srgb, var(--brand-b) 30%, #b4731f));
  --amb-grass-c: color-mix(in srgb, transparent 74%, color-mix(in srgb, var(--brand-b) 24%, #8f5a16));
  --amb-ground-a: color-mix(in srgb, transparent 60%, color-mix(in srgb, var(--brand-a) 32%, #c8912f));
  --amb-ground-b: color-mix(in srgb, transparent 74%, color-mix(in srgb, var(--brand-b) 26%, #94581a));
  --amb-cloud: color-mix(in srgb, #ffffff 30%, color-mix(in srgb, var(--brand-a) 55%, #e8c48a));
  --amb-leaf-a: #e8b445; --amb-leaf-b: #b8551c; --amb-leaf-c: #d98b28;
  --amb-cloth-a: color-mix(in srgb, transparent 10%, color-mix(in srgb, var(--brand-a) 34%, #e0b053));
  --amb-cloth-b: color-mix(in srgb, transparent 28%, color-mix(in srgb, var(--brand-b) 28%, #a8661d));
}
:root[data-season="winter"] {                             /* 冬：素裹银装、飞雪缓落 */
  --amb-sun-warm: #c9dcee;
  --amb-grass-a: color-mix(in srgb, transparent 58%, color-mix(in srgb, var(--brand-a) 24%, #d3dfea));
  --amb-grass-b: color-mix(in srgb, transparent 68%, color-mix(in srgb, var(--brand-b) 20%, #a8b9c9));
  --amb-grass-c: color-mix(in srgb, transparent 78%, color-mix(in srgb, var(--brand-b) 16%, #8ea0b3));
  --amb-ground-a: color-mix(in srgb, transparent 54%, color-mix(in srgb, var(--brand-a) 18%, #eef4f9));
  --amb-ground-b: color-mix(in srgb, transparent 70%, color-mix(in srgb, var(--brand-b) 16%, #b9c8d6));
  --amb-cloud: color-mix(in srgb, #ffffff 58%, var(--brand-a));
  --amb-snow: color-mix(in srgb, #ffffff 30%, #7f9cbe);   /* 浅色底上纯白会隐形，掺一点冷调 */
  --amb-cloth-a: color-mix(in srgb, transparent 10%, color-mix(in srgb, var(--brand-a) 22%, #e6eef5));
  --amb-cloth-b: color-mix(in srgb, transparent 26%, color-mix(in srgb, var(--brand-b) 18%, #b3c3d2));
}
/* 深色模式下太阳/月亮统一回到品牌亮色（夜景不按季节变色）；雪花回到纯白并微微发光 */
:root[data-mode="dark"][data-season] { --amb-sun-warm: var(--brand-a); }
:root[data-mode="dark"] .ambient-snow i {
  background: #ffffff;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, .55));
}

/* 场景本体：负层，永远在正文与页头之下，只在页面空白处透出来 */
.ambient-scene {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  opacity: var(--amb-o);
  contain: layout paint;            /* 把动画重绘圈定在自身内部 */
  transition: opacity .3s ease;
}
:root[data-ambient="off"] .ambient-scene { display: none; }

/* 太阳：呼吸式起伏。单独成层（不在 .ambient-scene 里），
   宽屏时浮到页头之上 —— 否则会被半透明页头底纹糊住；
   窄屏内容区两侧没有留白，太阳退回装饰层之下，免得压住卡片文字。 */
.ambient-sun {
  position: fixed; top: 21vh;
  right: max(6px, calc((100vw - 1180px) / 2 - 122px));
  width: 104px; height: 104px; border-radius: 50%;
  z-index: -1;
  opacity: var(--amb-o);
  pointer-events: none;
  background: radial-gradient(circle at 36% 34%,
    var(--amb-sun-core) 0 9%, var(--amb-sun-mid) 38%, var(--amb-sun-edge) 72%);
  box-shadow: 0 0 0 22px var(--amb-sun-halo), 0 0 82px 20px var(--amb-sun-halo);
  animation: ambient-sun-breathe 8s ease-in-out infinite;
  transition: opacity .3s ease;
}
:root[data-ambient="off"] .ambient-sun { display: none; }
@media (min-width: 1440px) {
  .ambient-sun { z-index: 22; }   /* 高于页头 20，低于状态栏 25 / 欢迎条 26 */
}

/* 云：三个 pill + 两个圆头堆出来。三朵分别停靠在左右两侧空白 */
.ambient-cloud {
  position: absolute; width: 104px; height: 23px; border-radius: 999px;
  background: var(--amb-cloud);
  box-shadow: 0 10px 28px -16px var(--amb-cloud-sh);
}
.ambient-cloud::before, .ambient-cloud::after {
  content: ""; position: absolute; bottom: 4px; border-radius: 50%;
  background: inherit;
}
.ambient-cloud::before { left: 20px; width: 38px; height: 38px; }
.ambient-cloud::after { right: 17px; width: 51px; height: 51px; }
.ambient-cloud-one {          /* 左上：贴屏幕左缘，避开宽屏下的左侧悬浮菜单 */
  top: 22vh; left: 14px;
  transform: scale(.92);
  animation: ambient-cloud-drift 16s ease-in-out -4s infinite alternate;
}
.ambient-cloud-two {          /* 左下 */
  top: 68vh; left: 22px;
  opacity: .78;
  transform: scale(.66);
  animation: ambient-cloud-drift 22s ease-in-out -10s infinite alternate-reverse;
}
.ambient-cloud-three {        /* 右侧、太阳下方 */
  top: 48vh; right: 22px;
  opacity: .9;
  transform: scale(.8);
  animation: ambient-cloud-drift 19s ease-in-out -7s infinite alternate;
}

/* 飞鸟：一只领头、两只跟随，整体横掠视口 */
.ambient-birds {
  position: absolute; top: 33vh; left: -160px;
  width: 132px; height: 54px;
  color: var(--amb-bird);
  animation: ambient-birds-fly 28s linear -9s infinite;
}
.ambient-bird {
  position: absolute; width: 27px; height: 12px;
  animation: ambient-bird-bob 1.6s ease-in-out infinite alternate;
}
.ambient-bird::before, .ambient-bird::after {
  content: ""; position: absolute; top: 2px;
  width: 15px; height: 8px;
  border-top: 2.4px solid currentcolor; border-radius: 50%;
}
.ambient-bird::before { right: 50%; transform: rotate(12deg); }
.ambient-bird::after { left: 50%; transform: rotate(-12deg); }
.ambient-bird-one { top: 6px; left: 0; }
.ambient-bird-two { top: 26px; left: 50px; transform: scale(.8); animation-delay: -.6s; }
.ambient-bird-three { top: 10px; left: 96px; transform: scale(.64); animation-delay: -1.1s; }

/* 草地：两组斜向重复渐变叠出草叶，顶端用 mask 渐隐 */
.ambient-grass {
  position: absolute; left: -3%; bottom: 0; width: 106%; height: 94px;
  transform-origin: center bottom;
  background:
    repeating-linear-gradient(76deg, transparent 0 13px,
      var(--amb-grass-b) 14px 16px, transparent 17px 30px),
    repeating-linear-gradient(104deg, transparent 0 18px,
      var(--amb-grass-c) 19px 21px, transparent 22px 35px),
    linear-gradient(to top, var(--amb-grass-a), var(--amb-grass-c) 48%, transparent 76%);
  -webkit-mask-image: linear-gradient(to top, #000 0 56%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0 56%, transparent 100%);
}
.ambient-grass-back {
  bottom: 11px; height: 80px; opacity: .62;
  animation: ambient-grass-sway 9s ease-in-out infinite;
}
.ambient-grass-front {
  animation: ambient-grass-sway 6.5s ease-in-out -2s infinite reverse;
}

/* 地面：视口底部的浅浅弧面 */
.ambient-ground {
  position: absolute; right: -5%; bottom: -22px; left: -5%; height: 56px;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(to bottom, var(--amb-ground-a), var(--amb-ground-b));
  filter: blur(1px);
}

/* 雨 · 地面的积水：一摊摊带高光的浅水洼，中心有扩散的涟漪；档位越高水洼越多越大。
   这是"落下的水"落到地上的落点 —— 雨滴本身在 .ambient-rain 里下到底部，水洼接住它。
   水色走「天空倒影」而不是深水：比湿地面更亮更冷，否则在绿草地上根本看不清。 */
.ambient-puddles {
  position: absolute; left: 0; right: 0; bottom: 2px; height: 62px;
  display: none;
}
:root:not([data-wxmode="manual"])[data-precip="rain"] .ambient-puddles { display: block; }
.ambient-puddles i {
  position: absolute;
  left: calc(var(--x) * 1.02% - 2%);
  bottom: var(--y);
  width: var(--w); height: var(--h);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 34% 24%,
      rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 58%),
    linear-gradient(to bottom,
      color-mix(in srgb, #eef6ff 72%, var(--amb-rain)),
      color-mix(in srgb, #9fbcd8 58%, #4f6a86));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .85),
    0 1px 3px rgba(38, 58, 82, .3);
  opacity: .9;
}
/* 涟漪：一圈从水洼中心荡开的浅色细环 */
.ambient-puddles i::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 46%; height: 46%; margin: -23% 0 0 -23%;
  border-radius: 50%;
  border: 1.2px solid rgba(255, 255, 255, .9);
  animation: ambient-ripple 2.6s ease-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes ambient-ripple {
  0%   { transform: scale(.24); opacity: .95; }
  100% { transform: scale(1.85); opacity: 0; }
}
/* 档位：小雨只有零星几洼，大雨才满地积水 */
:root[data-wx-level="1"] .ambient-puddles { opacity: .62; }
:root[data-wx-level="2"] .ambient-puddles { opacity: .82; }
:root[data-wx-level="1"] .ambient-puddles i:nth-child(n+5) { display: none; }
:root[data-wx-level="2"] .ambient-puddles i:nth-child(n+8) { display: none; }
/* 春 · 细雨：虽然不算"真实降水"，但地上也是湿的，给前几洼浅水。
   真的下雨/下雪时这两条被 :not() 排除，交给上面的 [data-precip] 规则。 */
:root[data-season="spring"]:not([data-precip="rain"]):not([data-precip="snow"]) .ambient-puddles {
  display: block; opacity: .5;
}
:root[data-season="spring"]:not([data-precip="rain"]):not([data-precip="snow"]) .ambient-puddles i:nth-child(n+5) {
  display: none;
}

/* 雪 · 地面的积雪：一条边缘柔和的雪被，厚度随档位变（小雨小雪薄、大雨大雪厚）。
   雪被盖在地面弧与草根之上，所以它"落在草地上"而不是飘在天上。 */
.ambient-snowpack {
  position: absolute; left: -3%; right: -3%; bottom: 0; height: 22px;
  border-radius: 50% 50% 0 0 / 32px 32px 0 0;
  background: linear-gradient(to bottom, #ffffff, #e6f0fa 58%, #d3e2f1);
  filter: blur(.7px);
  transition: height .8s ease;
  display: none;
}
:root:not([data-wxmode="manual"])[data-precip="snow"] .ambient-snowpack { display: block; }
:root:not([data-wxmode="manual"])[data-wx-level="1"][data-precip="snow"] .ambient-snowpack { height: 12px; }
:root:not([data-wxmode="manual"])[data-wx-level="3"][data-precip="snow"] .ambient-snowpack { height: 40px; }

/* 稻草人：摆在内容区左侧的空白里（宽屏侧栏出现时贴屏幕最左） */
.ambient-scarecrow {
  position: absolute;
  left: max(6px, calc((100vw - 1180px) / 2 - 96px));
  bottom: 13px; width: 104px; height: 132px;
  opacity: .84; transform-origin: 52px 128px;
  animation: ambient-scarecrow-sway 5.5s ease-in-out infinite;
}
.scarecrow-pole {
  position: absolute; top: 42px; left: 50px; width: 4px; height: 90px;
  border-radius: 3px; background: var(--amb-wood-1);
}
.scarecrow-arm {
  position: absolute; top: 61px; left: 13px; width: 78px; height: 5px;
  border-radius: 5px; background: var(--amb-wood-2);
  transform: rotate(-4deg);
}
.scarecrow-arm::before, .scarecrow-arm::after {
  content: ""; position: absolute; top: -5px; width: 13px; height: 14px;
  border-top: 2px solid var(--amb-wood-2);
  border-bottom: 2px solid var(--amb-wood-2);
}
.scarecrow-arm::before { left: -7px; transform: rotate(-18deg); }
.scarecrow-arm::after { right: -7px; transform: rotate(18deg); }
.scarecrow-body {
  position: absolute; top: 54px; left: 32px; width: 40px; height: 53px;
  border-radius: 8px 8px 13px 13px;
  background: linear-gradient(145deg, var(--amb-cloth-a), var(--amb-cloth-b));
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
}
.scarecrow-head {
  position: absolute; top: 25px; left: 38px; width: 29px; height: 31px;
  border-radius: 46% 54% 50% 48%;
  background: #d7aa70;
  box-shadow: inset -4px -3px 0 rgba(117, 79, 43, .08);
}
.scarecrow-head::before {
  content: ""; position: absolute; top: 12px; left: 7px;
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(75, 55, 39, .72);
  box-shadow: 12px 1px 0 rgba(75, 55, 39, .72);
}
.scarecrow-head::after {
  content: ""; position: absolute; left: 9px; bottom: 7px;
  width: 11px; height: 4px; border-radius: 50%;
  border-bottom: 1.5px solid rgba(75, 55, 39, .55);
}
.scarecrow-hat {
  position: absolute; top: 20px; left: 27px; width: 52px; height: 7px;
  border-radius: 50%; background: var(--amb-wood-3);
  transform: rotate(-5deg);
}
.scarecrow-hat::before {
  content: ""; position: absolute; left: 13px; bottom: 3px;
  width: 28px; height: 19px; border-radius: 5px 5px 2px 2px;
  background: linear-gradient(145deg, var(--amb-wood-2), var(--amb-wood-3));
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
}

/* 风车：三叶片绕轴匀速旋转，摆在内容区右侧空白 */
.ambient-windmill {
  position: absolute;
  right: max(6px, calc((100vw - 1180px) / 2 - 104px));
  bottom: -9px; width: 96px; height: 146px; opacity: .9;
}
.ambient-windmill > * { position: absolute; box-sizing: border-box; }
.windmill-stick {
  left: 50%; top: 42px; width: 20px; height: 102px; margin-left: -10px; z-index: 0;
  background: linear-gradient(90deg, #d2dbd5 0%, #fdfefd 42%, #ffffff 55%, #c8d3cc 100%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  box-shadow: 3px 0 6px -4px rgba(60, 84, 75, .25);
}
.windmill-nacelle {
  top: 40px; left: 50%; width: 17px; height: 9px; margin-left: -8.5px; z-index: 1;
  border-radius: 60% 45% 45% 60% / 50%;
  background: linear-gradient(180deg, #ffffff, #dbe4de);
  border: 1px solid rgba(150, 168, 159, .55);
  box-shadow: 0 1px 3px rgba(60, 84, 75, .2);
}
.windmill-head {
  top: -2px; left: 50%; width: 92px; height: 92px; margin-left: -46px; z-index: 2;
  transform-origin: 50% 50%; will-change: transform;
  animation: windmill-spin 7s linear infinite;
}
.windmill-blade {
  position: absolute;   /* 漏了这句：<i> 是行内元素，不定位则 width/height 失效，扇叶画不出来 */
  left: 50%; top: 2px; width: 9px; height: 44px; margin-left: -4.5px;
  border-radius: 50% 50% 45% 45% / 78% 78% 18% 18%;
  /* 两端 + 描边都加深：原先近乎纯白，铺在浅色背景上根本看不见扇叶 */
  background: linear-gradient(90deg, #7d968b 0%, #c6d5cd 34%, #eef4f1 58%, #6d887c 100%);
  transform-origin: 50% 100%;
  box-shadow: inset -1px 0 1px rgba(44, 68, 57, .62), inset 0 0 0 1px rgba(88, 112, 101, .3), 0 0 3px rgba(255, 255, 255, .8);
}
.blade-a { transform: rotate(0deg); }
.blade-b { transform: rotate(120deg); }
.blade-c { transform: rotate(240deg); }
.windmill-hub {
  position: absolute;   /* 同上：轴心也漏了定位 */
  top: 50%; left: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #d4ddd7 75%);
  border: 1.5px solid #aebbb3;
  box-shadow: 0 1px 2px rgba(60, 84, 75, .28);
}
.windmill-grass {
  left: 50%; bottom: 4px; z-index: 1;
  width: 30px; height: 11px; margin-left: -15px;
}
.windmill-grass i {
  position: absolute; bottom: 0; left: 50%;
  width: 4px; height: 8px;
  border-radius: 70% 70% 0 0 / 100% 100% 0 0;
  background: linear-gradient(to top, var(--amb-grass-b), var(--amb-grass-a));
  transform-origin: 50% 100%;
}
.windmill-grass i:nth-child(1) { margin-left: -9px; transform: rotate(-15deg); }
.windmill-grass i:nth-child(2) { margin-left: -2px; height: 11px; }
.windmill-grass i:nth-child(3) { margin-left: 5px; height: 7px; transform: rotate(14deg); }

@keyframes windmill-spin { to { transform: rotate(360deg); } }
@keyframes ambient-sun-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.04); }
}
@keyframes ambient-grass-sway {
  0%, 100% { transform: skewX(-.7deg) translateX(0); }
  50%      { transform: skewX(.9deg) translateX(3px); }
}
@keyframes ambient-cloud-drift {
  0%   { translate: -16px 0; }
  100% { translate: 24px 4px; }
}
@keyframes ambient-birds-fly {
  0%   { transform: translateX(0) translateY(8px); }
  45%  { transform: translateX(calc(50vw + 120px)) translateY(-9px); }
  100% { transform: translateX(calc(100vw + 260px)) translateY(4px); }
}
@keyframes ambient-bird-bob {
  0%   { translate: 0 0; }
  100% { translate: 0 3px; }
}
@keyframes ambient-scarecrow-sway {
  0%, 100% { transform: rotate(-1.5deg); }
  50%      { transform: rotate(1.8deg); }
}

/* ═══════════ 四季专属元素（常驻 DOM，按 data-season 显隐） ═══════════
   全部是 <i> 造的小粒子，用独立 translate/rotate 做位移，
   transform 留给 scale，两者互不覆盖；0 图片、0 请求。 */
.ambient-rain, .ambient-drizzle, .ambient-petals, .ambient-dragonflies, .ambient-leaves,
.ambient-snow, .ambient-lightning { display: none; }
:root:not([data-season]) .ambient-dragonflies,
:root[data-season="summer"] .ambient-dragonflies,
:root[data-season="spring"] .ambient-drizzle,
:root[data-season="spring"] .ambient-petals,
:root[data-season="autumn"] .ambient-leaves,
:root[data-season="winter"] .ambient-snow { display: block; }

/* ── 天气联动（「跟随天气」为开＝未标 manual 时生效）：降水类型改由实时温度决定 ——
     0 ℃ 及以下落雪、0 ℃ 以上落雨；夏季遇降水再加雷电。优先级高于季节默认。 ── */
:root:not([data-wxmode="manual"])[data-precip="snow"] .ambient-snow,
:root:not([data-wxmode="manual"])[data-precip="rain"] .ambient-rain,
:root[data-thunder="on"] .ambient-lightning { display: block; }
/* 只有「真实正在下」的那一种降水会顶掉另一种；此刻无降水（data-precip="none"）
   不回退、也不抹掉季节默认降水 —— 否则冬季的「听雪」在下雪天之外会一片雪都没有。
   rain 本身只在 [data-precip="rain"] 下才显示，所以 none 无需再补一条隐藏。 */
:root:not([data-wxmode="manual"])[data-precip="snow"] .ambient-rain,
:root:not([data-wxmode="manual"])[data-precip="rain"] .ambient-snow,
:root:not([data-wxmode="manual"])[data-precip="rain"] .ambient-drizzle,
:root:not([data-wxmode="manual"])[data-precip="snow"] .ambient-drizzle { display: none; }

/* ── 降水强度分级：小雨/小雪、中雨/中雪、大雨/大雪 ──
   粒子是按「上限」生成的（雨 48 / 雪 42），档位只决定显示到第几个：
   nth-child(n+K) 砍掉尾号。位置是黄金比低差异序列，所以砍完依然均匀撒满整幅。
   顺带把「落多快」和「多明显」也交给档位 —— 大雨又密又快，小雨稀疏飘忽。
   窄屏另有固定上限（见文件末尾的 @media），所以这套分级只在 ≥961px 生效，避免特异度打架。 */
:root[data-wx-level="1"] { --spd: 1.28; --dens: .34; }
:root[data-wx-level="2"] { --spd: 1;    --dens: .68; }
:root[data-wx-level="3"] { --spd: .78;  --dens: 1;   }
@media (min-width: 961px) {
  /* 1/3 档（小雨/小雪）：雨 64→21、雪 54→18 */
  :root[data-wx-level="1"] .ambient-rain i:nth-child(n+22),
  :root[data-wx-level="1"] .ambient-snow i:nth-child(n+19) { display: none; }
  /* 2/3 档（中雨/中雪）：雨 64→42、雪 54→36 */
  :root[data-wx-level="2"] .ambient-rain i:nth-child(n+43),
  :root[data-wx-level="2"] .ambient-snow i:nth-child(n+37) { display: none; }
}
/* 档位越高，雨越实、雪越亮 */
:root[data-wx-level="1"][data-precip="rain"] .ambient-rain { opacity: .52; }
:root[data-wx-level="2"][data-precip="rain"] .ambient-rain { opacity: .74; }
:root[data-wx-level="3"][data-precip="rain"] .ambient-rain { opacity: .92; }
:root[data-wx-level="1"][data-precip="snow"] .ambient-snow { opacity: .72; }
:root[data-wx-level="2"][data-precip="snow"] .ambient-snow { opacity: .88; }
:root[data-wx-level="3"][data-precip="snow"] .ambient-snow { opacity: 1; }

/* 雷电：整屏柔光闪烁 + 一道劈落的闪电。
   位置要落在「欢迎条 + 状态栏 + 页头」三条吸顶带之下、内容区右侧留白里，
   否则会被那三条不透明底完全盖住。窄屏没有侧边留白，直接不画。 */
.ambient-lightning { position: absolute; inset: 0; pointer-events: none; }
.ambient-lightning::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 48% at 82% 30%,
    rgba(255, 255, 255, .92), rgba(255, 252, 226, .34) 46%, transparent 72%);
  opacity: 0;
  animation: ambient-flash 9s linear infinite;
}
.ambient-lightning::after {
  content: ""; position: absolute; top: 37vh; left: 84%;
  width: 27px; height: 92px;
  background: linear-gradient(180deg, #fffdf2 0%, #ffe680 52%, #ffd54a 100%);
  clip-path: polygon(56% 0, 100% 0, 63% 40%, 92% 40%, 26% 100%, 44% 55%, 12% 55%);
  filter: drop-shadow(0 0 12px rgba(255, 226, 120, .95));
  opacity: 0;
  animation: ambient-bolt 9s linear infinite;
}
@media (max-width: 1440px) {
  .ambient-lightning::after { display: none; }
}
@keyframes ambient-flash {
  0%, 72.5%, 100% { opacity: 0; }
  73%   { opacity: .95; }
  74.2% { opacity: .12; }
  75.4% { opacity: .8; }
  77%   { opacity: .06; }
  79%   { opacity: .5; }
  81%   { opacity: 0; }
}
@keyframes ambient-bolt {
  0%, 72.5%, 100% { opacity: 0; transform: scaleY(.6); }
  73%   { opacity: 1; transform: scaleY(1); }
  74.2% { opacity: .2; }
  75.4% { opacity: 1; }
  77%   { opacity: .1; }
  79%   { opacity: .85; }
  80.5% { opacity: 0; transform: scaleY(1.04); }
}

/* 降水 · 真实雨滴：细长带锥度的水滴（上端透明、下端实色），快速近垂直落下。
   天气联动下雨时任何季节都可能出现，所以单独成型，不再是春天专属的斜纹。
   位置由 --x、相位/时长由 --d 给出（两个互不相关的低差异序列），
   所以「按强度隐藏尾号粒子」不会让雨只落在左半边，也不会连成一条斜带。 */
.ambient-rain { position: absolute; inset: 0; opacity: .72; }
.ambient-rain i {
  position: absolute; top: -16vh; width: 2.2px; height: 30px;
  border-radius: 999px;
  left: calc(var(--x) * 1.02% - 2%);
  background: linear-gradient(to bottom,
    transparent 0, color-mix(in srgb, var(--amb-rain) 40%, transparent) 30%,
    var(--amb-rain) 100%);
  animation: ambient-rain-fall calc((.62s + var(--d) * .004s) * var(--spd, 1)) linear infinite;
  animation-delay: calc(var(--d) * -.014s);
}
.ambient-rain i:nth-child(3n)   { height: 39px; width: 2.6px; opacity: .82; }
.ambient-rain i:nth-child(4n+1) { height: 22px; opacity: .55; }
.ambient-rain i:nth-child(5n)   { height: 33px; opacity: .72; }
@keyframes ambient-rain-fall {
  0%   { translate: 0 -16vh; }
  100% { translate: -15px 118vh; }
}

/* 春 · 蒙蒙细雨：更细、更密、更轻、更缓 —— 像雾一样的斜丝，落得慢、几乎无声 */
.ambient-drizzle { position: absolute; inset: 0; opacity: .46; }
.ambient-drizzle::before {           /* 一点雨雾，让春雨"蒙蒙"而不是零星几根线 */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--amb-rain) 18%, transparent), transparent 62%);
}
.ambient-drizzle i {
  position: absolute; top: -12vh; width: 1.3px; height: 17px;
  border-radius: 999px;
  left: calc(var(--i) * 2.3% - 2%);
  background: linear-gradient(to bottom,
    transparent 0, color-mix(in srgb, var(--amb-rain) 62%, transparent) 34%,
    var(--amb-rain) 100%);
  animation: ambient-drizzle-fall calc(1.55s + var(--i) * .035s) linear infinite;
  animation-delay: calc(var(--i) * -.08s);
}
.ambient-drizzle i:nth-child(4n)   { height: 11px; opacity: .6; }
.ambient-drizzle i:nth-child(3n+1) { height: 22px; }
@keyframes ambient-drizzle-fall {
  0%   { translate: 0 -12vh; }
  100% { translate: -10px 118vh; }
}

/* 春 · 花瓣：位置 / 时长 / 相位全由内联 --i 推导 —— 加片数只改 build.py，CSS 不动 */
.ambient-petals { position: absolute; inset: 0; z-index: 2; }
.ambient-petals i {
  position: absolute; top: -8vh; width: 10px; height: 8px;
  left: calc(var(--i) * 9.6% - 4%);
  border-radius: 62% 38% 55% 45% / 58% 62% 38% 42%;
  background: linear-gradient(135deg, var(--amb-petal-a), var(--amb-petal-b));
  opacity: .85;
  animation: ambient-petal-fall calc(10s + var(--i) * .8s) linear infinite;
  animation-delay: calc(var(--i) * -1.9s);
}
.ambient-petals i:nth-child(3n)   { transform: scale(.76); }
.ambient-petals i:nth-child(3n+1) { transform: scale(1.1); }
@keyframes ambient-petal-fall {
  0%   { translate: 0 -10vh;   rotate: 0deg; }
  50%  { translate: 30px 46vh; rotate: 190deg; }
  100% { translate: -18px 112vh; rotate: 360deg; }
}

/* 夏 · 蜻蜓：整体横掠视口，翅膀高频扇动 */
.ambient-dragonflies {
  position: absolute; top: 41vh; left: -130px;
  width: 140px; height: 54px;
  color: var(--amb-dragon);
  animation: ambient-birds-fly 46s linear -14s infinite;
}
.ambient-dragonflies i {
  position: absolute; width: 36px; height: 4px; border-radius: 999px;
  background: currentcolor;
  animation: ambient-bird-bob 1.3s ease-in-out infinite alternate;
}
.ambient-dragonflies i::before, .ambient-dragonflies i::after {
  content: ""; position: absolute; top: -6px; left: 5px;
  width: 16px; height: 11px; border-radius: 46% 54% 40% 60%;
  background: color-mix(in srgb, currentcolor 42%, transparent);
  transform-origin: 10% 100%;
  animation: ambient-wing .24s ease-in-out infinite alternate;
}
.ambient-dragonflies i::after { left: 16px; animation-delay: -.09s; }
.ambient-dragonflies i:nth-child(1) { top: 8px;  left: 4px; }
.ambient-dragonflies i:nth-child(2) { top: 30px; left: 60px; scale: .8;  animation-delay: -.55s; }
.ambient-dragonflies i:nth-child(3) { top: 20px; left: 100px; scale: .66; animation-delay: -1.05s; }
@keyframes ambient-wing {
  from { transform: scaleY(.3) rotate(-8deg); }
  to   { transform: scaleY(1)  rotate(6deg); }
}

/* 秋 · 落叶 */
.ambient-leaves { position: absolute; inset: 0; z-index: 2; }
.ambient-leaves i {
  position: absolute; top: -8vh; width: 13px; height: 10px;
  left: calc(var(--i) * 6.2% - 4%);
  border-radius: 62% 12% 62% 14%;
  background: linear-gradient(135deg, var(--amb-leaf-a), var(--amb-leaf-b));
  opacity: .9;
  animation: ambient-leaf-fall calc(11s + var(--i) * .55s) linear infinite;
  animation-delay: calc(var(--i) * -2.3s);
}
.ambient-leaves i:nth-child(even) { background: linear-gradient(135deg, var(--amb-leaf-c), var(--amb-leaf-b)); }
.ambient-leaves i:nth-child(3n)   { transform: scale(.78); }
@keyframes ambient-leaf-fall {
  0%   { translate: 0 -10vh;    rotate: -40deg; }
  35%  { translate: 38px 34vh;  rotate: 150deg; }
  70%  { translate: -26px 72vh; rotate: 300deg; }
  100% { translate: 20px 112vh; rotate: 430deg; }
}

/* 冬 · 飞雪：真实六角雪花形状（mask 上色），缓落并轻微自转 */
.ambient-snow { position: absolute; inset: 0; z-index: 2; }
.ambient-snow i {
  position: absolute; top: -8vh; width: 16px; height: 16px;
  left: calc(var(--x) * 1.02% - 2%);
  background: var(--amb-snow); opacity: .92;
  -webkit-mask: var(--snowflake) center / contain no-repeat;
  mask: var(--snowflake) center / contain no-repeat;
  /* 浅色底上雪花会隐形：一圈冷色描边（drop-shadow 跟随 mask 轮廓），把雪片"托"出来 */
  filter: drop-shadow(0 0 1px rgba(72, 104, 146, .9))
          drop-shadow(0 1px 2px rgba(110, 142, 180, .45));
  animation: ambient-snow-fall calc((11s + var(--d) * .06s) * var(--spd, 1)) ease-in-out infinite;
  animation-delay: calc(var(--d) * -.18s);
}
.ambient-snow i:nth-child(3n)   { width: 11px; height: 11px; opacity: .7; }
.ambient-snow i:nth-child(4n+1) { width: 21px; height: 21px; opacity: 1; }
.ambient-snow i:nth-child(5n+2) { width: 14px; height: 14px; opacity: .85; }
@keyframes ambient-snow-fall {
  0%   { translate: 0 -10vh;   rotate: 0deg; }
  50%  { translate: 30px 50vh; rotate: 155deg; }
  100% { translate: -22px 114vh; rotate: 340deg; }
}

/* 夏·浓荫 / 秋·雁阵 / 冬·银装：季节对既有骨架的额外修饰 */
:root[data-season="summer"] .ambient-grass { filter: saturate(1.12); }
:root[data-season="autumn"] .ambient-bird-one   { top: 0;    left: 44px; transform: scale(1.05); }
:root[data-season="autumn"] .ambient-bird-two   { top: 22px; left: 74px; transform: scale(.84); }
:root[data-season="autumn"] .ambient-bird-three { top: 22px; left: 14px; transform: scale(.84); }
:root[data-season="winter"] .ambient-grass { filter: saturate(.28) brightness(1.07); }
:root[data-season="winter"] .ambient-ground {
  background: linear-gradient(to bottom, #fbfdff, #cddced); filter: blur(1.6px);
}
:root[data-season="winter"] .scarecrow-hat,
:root[data-season="winter"] .scarecrow-hat::before {
  background: linear-gradient(145deg, #fbfdff, #c9d6e2);
}

/* 降水对地面的修饰（与季节无关，任何季节真实下雨/下雪都会生效，优先级高于季节修饰）：
   雨 → 草叶压暗提饱和（湿）、地面转湿；雪 → 草叶褪色发白（覆霜）、地面转雪色 */
:root:not([data-wxmode="manual"])[data-precip="rain"] .ambient-grass {
  filter: saturate(1.35) brightness(.9);
}
:root:not([data-wxmode="manual"])[data-precip="rain"] .ambient-ground {
  /* 湿地面：整体压暗提饱和，上缘抹一道天光反光 —— 湿的地会泛亮 */
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .36), rgba(255, 255, 255, 0) 46%),
    linear-gradient(to bottom, var(--amb-ground-a), var(--amb-ground-b));
  filter: blur(1px) saturate(1.25) brightness(.78);
}
:root:not([data-wxmode="manual"])[data-precip="snow"] .ambient-grass {
  filter: saturate(.42) brightness(1.08);
}
:root:not([data-wxmode="manual"])[data-precip="snow"] .ambient-ground {
  background: linear-gradient(to bottom, #fbfdff, #cddced);
  filter: blur(1.6px);
}

/* 性能：常驻无限动画统一提到合成层，避免每帧重新光栅化 */
.ambient-sun, .ambient-grass, .ambient-scarecrow {
  will-change: transform;
}
/* 标签页切到后台时暂停全部装饰动画（site.js 用 visibilitychange 切换） */
:root.app-idle .ambient-scene *,
:root.app-idle .ambient-sun { animation-play-state: paused !important; }

/* 窄屏：稻草人与风车不再整个收起，改成「小一号 + 贴边 + 站在页脚外的草地上」。
   为什么不直接放在页脚后面：页脚是 48% 白玻璃 + blur(8px)，草地那种大片饱和绿还能透出来，
   稻草人这点浅色细笔画会被糊成一团，等于看不见（宽屏靠的是内容区两侧的空白，手机没有）。
   所以窄屏改成在页脚之后补一条 104px 的留白 —— 滚到页底时，这一条正是固定草地层所在的位置，
   稻草人 / 风车完整落在草地上，没有玻璃挡着，和宽屏是同一幅景。
   缩放必须写进 keyframes：稻草人的 transform 被摇摆动画占着，写进基础规则会被动画覆盖
   （reduced-motion 关掉动画时，再退回基础规则里的静态 scale）。 */
@media (max-width: 960px) {
  .ambient-scarecrow { left: 4px; bottom: 6px; opacity: .84; transform: scale(.7); }
  .ambient-windmill {
    right: 2px; bottom: -6px; opacity: .9;
    transform: scale(.72); transform-origin: 100% 100%;
  }
  @keyframes ambient-scarecrow-sway {
    0%, 100% { transform: scale(.7) rotate(-1.5deg); }
    50%      { transform: scale(.7) rotate(1.8deg); }
  }
  /* 页脚之后补一条等高留白：滚到页底时，这一条正好落在固定草地层上，且没有玻璃盖着。
     用 body::after 而不是给页脚加 margin-bottom —— 后者会和 body 的底边做外边距合并，
     文档高度不一定跟着长，实测只多出 68px，位置不可控。 */
  body::after { content: ""; display: block; height: 104px; }
  /* 手机少画几片：雪 / 落叶 / 花瓣 / 雨 / 水洼各留一半以内。
     这里是「固定上限」，与 ≥961px 的强度分级互不打扰 —— 强度分级整段包在 min-width 里，
     所以手机上不会出现「大雨 48 滴全下」的重负载。 */
  .ambient-snow i:nth-child(n+15),
  .ambient-leaves i:nth-child(n+9),
  .ambient-petals i:nth-child(n+6),
  .ambient-rain i:nth-child(n+17),
  .ambient-drizzle i:nth-child(n+18),
  .ambient-puddles i:nth-child(n+6) { display: none; }
}
/* 横屏手机（视口很矮）不铺这条草地：104px 要吃掉近三成屏高，
   宁可退回「装饰层被玻璃盖住」的默认状态，也不占正文的地方。 */
@media (max-width: 960px) and (max-height: 520px) {
  body::after { height: 0; }
}
@media (max-width: 620px) {
  .ambient-birds { display: none; }
  .ambient-sun { width: 62px; height: 62px; top: 34vh; right: 8vw; }
  /* 手机：草地 / 地面按窄屏整体收一档，并用 clamp 跟着屏宽走 —— 小屏（320）到
     大屏手机（430）之间自然缩放，不会在短视口底部压出厚厚一条盖住内容。
     桌面那套 94 / 80 / 56px 原样保留（本段只在 ≤620px 生效，桌面不受影响）。 */
  .ambient-grass { height: clamp(60px, 19vw, 74px); }
  .ambient-grass-back { height: clamp(50px, 16vw, 62px); bottom: 9px; }
  .ambient-ground { height: clamp(38px, 12vw, 46px); bottom: -18px; }
}
/* 宽屏出现左侧悬浮菜单时，稻草人让位贴屏幕最左 */
@media (min-width: 1600px) {
  .ambient-scarecrow { left: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-scene *, .ambient-sun { animation: none !important; }
}
@media print {
  .ambient-scene, .ambient-sun { display: none; }
}

/* ═══════════════ 素描纹理底稿（fixed 装饰层，不参与交互） ═══════════════ */
:root {
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='none' stroke='rgba(64,58,40,0.055)' stroke-width='1'%3E%3Cpath d='M-24 48 L72 -48 M-24 128 L152 -48 M8 180 L180 8 M68 180 L180 68 M128 180 L180 128'/%3E%3C/g%3E%3Cg fill='rgba(64,58,40,0.05)'%3E%3Ccircle cx='34' cy='132' r='1.3'/%3E%3Ccircle cx='142' cy='74' r='1.3'/%3E%3Ccircle cx='92' cy='20' r='1'/%3E%3Ccircle cx='160' cy='158' r='1'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-mode="dark"] {
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='1'%3E%3Cpath d='M-24 48 L72 -48 M-24 128 L152 -48 M8 180 L180 8 M68 180 L180 68 M128 180 L180 128'/%3E%3C/g%3E%3Cg fill='rgba(255,255,255,0.035)'%3E%3Ccircle cx='34' cy='132' r='1.3'/%3E%3Ccircle cx='142' cy='74' r='1.3'/%3E%3Ccircle cx='92' cy='20' r='1'/%3E%3Ccircle cx='160' cy='158' r='1'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode]):not([data-theme]) {
    --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='1'%3E%3Cpath d='M-24 48 L72 -48 M-24 128 L152 -48 M8 180 L180 8 M68 180 L180 68 M128 180 L180 128'/%3E%3C/g%3E%3Cg fill='rgba(255,255,255,0.035)'%3E%3Ccircle cx='34' cy='132' r='1.3'/%3E%3Ccircle cx='142' cy='74' r='1.3'/%3E%3Ccircle cx='92' cy='20' r='1'/%3E%3Ccircle cx='160' cy='158' r='1'/%3E%3C/g%3E%3C/svg%3E");
  }
}

/* ═══════════════ 全局图案：每套配色一种淡雅纹理（换配色即换图案） ═══════════════
   墨金=斜向排线 / 青瓷=冰裂细网格 / 黛蓝=细点阵 / 豆沙=菱格锦纹 / 素描=交叉铅笔排线
   图案随 data-theme 与 data-mode 自动切换，铺设于 body、状态栏、页头与悬浮菜单。 */
:root { --pattern-size: 180px 180px; }

/* 青瓷 · 冰裂细网格 */
:root[data-theme="celadon"] {
  --pattern-size: 26px 26px;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cg fill='none' stroke='rgba(34,78,64,0.07)' stroke-width='1'%3E%3Cpath d='M0 0H26M0 0V26'/%3E%3C/g%3E%3Cg fill='rgba(34,78,64,0.055)'%3E%3Ccircle cx='13' cy='13' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
}

/* 黛蓝 · 错位细点阵 */
:root[data-theme="indigo"] {
  --pattern-size: 20px 20px;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cg fill='rgba(36,60,96,0.075)'%3E%3Ccircle cx='4' cy='4' r='1.2'/%3E%3Ccircle cx='14' cy='14' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
}

/* 豆沙 · 菱格锦纹 */
:root[data-theme="rouge"] {
  --pattern-size: 28px 28px;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cg fill='none' stroke='rgba(104,52,46,0.06)' stroke-width='1'%3E%3Cpath d='M14 0L28 14L14 28L0 14Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* 素描 · 交叉铅笔排线 + 纸感噪点 */
:root[data-theme="sketch"] {
  --pattern-size: 170px 170px;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cg fill='none' stroke='rgba(74,68,52,0.085)' stroke-width='1'%3E%3Cpath d='M-20 30L50 -40M-20 90L120 -40M-20 150L170 -20M20 190L170 40M80 190L170 100M140 190L170 160'/%3E%3C/g%3E%3Cg fill='none' stroke='rgba(74,68,52,0.055)' stroke-width='1'%3E%3Cpath d='M-20 140L120 0M-20 80L60 0M30 170L170 30M90 170L170 90M150 170L170 150'/%3E%3C/g%3E%3Cg fill='rgba(74,68,52,0.07)'%3E%3Ccircle cx='40' cy='40' r='1.2'/%3E%3Ccircle cx='120' cy='110' r='1.2'/%3E%3Ccircle cx='20' cy='112' r='1'/%3E%3Ccircle cx='138' cy='30' r='1'/%3E%3C/g%3E%3C/svg%3E");
}

/* 深色模式：形状不变，描边换成浅色并保留各配色色相 */
:root[data-theme="ink-gold"][data-mode="dark"] {
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='none' stroke='rgba(232,200,138,0.05)' stroke-width='1'%3E%3Cpath d='M-24 48L72 -48M-24 128L152 -48M8 180L180 8M68 180L180 68M128 180L180 128'/%3E%3C/g%3E%3Cg fill='rgba(232,200,138,0.045)'%3E%3Ccircle cx='34' cy='132' r='1.3'/%3E%3Ccircle cx='142' cy='74' r='1.3'/%3E%3Ccircle cx='92' cy='20' r='1'/%3E%3Ccircle cx='160' cy='158' r='1'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-theme="celadon"][data-mode="dark"] {
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cg fill='none' stroke='rgba(143,208,187,0.07)' stroke-width='1'%3E%3Cpath d='M0 0H26M0 0V26'/%3E%3C/g%3E%3Cg fill='rgba(143,208,187,0.055)'%3E%3Ccircle cx='13' cy='13' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-theme="indigo"][data-mode="dark"] {
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cg fill='rgba(156,195,240,0.08)'%3E%3Ccircle cx='4' cy='4' r='1.2'/%3E%3Ccircle cx='14' cy='14' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-theme="rouge"][data-mode="dark"] {
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cg fill='none' stroke='rgba(232,168,161,0.07)' stroke-width='1'%3E%3Cpath d='M14 0L28 14L14 28L0 14Z'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-theme="sketch"][data-mode="dark"] {
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cg fill='none' stroke='rgba(205,199,182,0.075)' stroke-width='1'%3E%3Cpath d='M-20 30L50 -40M-20 90L120 -40M-20 150L170 -20M20 190L170 40M80 190L170 100M140 190L170 160'/%3E%3C/g%3E%3Cg fill='none' stroke='rgba(205,199,182,0.05)' stroke-width='1'%3E%3Cpath d='M-20 140L120 0M-20 80L60 0M30 170L170 30M90 170L170 90M150 170L170 150'/%3E%3C/g%3E%3Cg fill='rgba(205,199,182,0.06)'%3E%3Ccircle cx='40' cy='40' r='1.2'/%3E%3Ccircle cx='120' cy='110' r='1.2'/%3E%3Ccircle cx='20' cy='112' r='1'/%3E%3Ccircle cx='138' cy='30' r='1'/%3E%3C/g%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--sticky-h, 0px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 素描纹理层：整站极淡的斜线排线 + 纸感噪点 */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background-image: var(--pattern);
  background-size: var(--pattern-size);
  opacity: var(--pattern-o, .75);
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

/* ── 焦点样式：只在键盘操作时出现，且对比度足够 ── */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── 跳转到主内容（键盘用户第一个可聚焦元素） ── */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--focus);
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; }

/* 统一图标尺寸 */
.ic { width: 20px; height: 20px; fill: currentColor; flex: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* hidden 属性在任何 display 值下都生效（口令表单解锁后要靠它收起） */
[hidden] { display: none !important; }

/* ── 顶部装饰欢迎条：最外层，随主题换色；右侧放主题配色 + 明暗切换 ── */
.welcomebar {
  position: sticky; top: 0; z-index: 26;    /* 欢迎条也吸附顶部，状态栏贴在它下沿 */
  padding: 11px 20px 12px;
  color: var(--ink);
  background-color: var(--accent-soft);
  background-image:
    linear-gradient(90deg,
      color-mix(in srgb, var(--brand-a) 34%, transparent),
      transparent 26%, transparent 74%,
      color-mix(in srgb, var(--brand-b) 34%, transparent)),
    var(--pattern);
  background-size: auto, var(--pattern-size);
  border-bottom: 1px solid var(--line);
}
/* 顶部一道主题渐变装饰线 */
.welcomebar::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg,
    var(--brand-a), var(--brand-b), var(--brand-a));
  opacity: .85;
}
/* 文案左对齐 | 右侧一条向右渐隐的装饰横线占满空档 | 主题控件贴右 */
.wb-inner {
  position: relative;
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
}
.wb-inner .pref { flex: none; }
/* 只留文案右侧那一条：从文字一侧实色，向右渐隐到控件前 */
.wb-line {
  flex: 1 1 auto; height: 1px; min-width: 20px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 55%, transparent), transparent);
}
.wb-line:first-child { display: none; }   /* 左对齐后不需要前置装饰线 */
.wb-mid { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.wb-ico { flex: none; color: var(--accent); line-height: 0; opacity: .9; }
.wb-ico svg { display: block; }
.wb-text {
  font-size: clamp(14px, 2.6vw, 16.5px);
  font-weight: 500; letter-spacing: .06em; line-height: 1.5;
}
.wb-text b {
  font-weight: 700; color: var(--accent);
  font-size: 1.1em; letter-spacing: .04em;
  padding: 0 2px;
}
/* 欢迎条里的控件收小一号（带文字后靠内边距和字号控制宽度），不把条撑高 */
.welcomebar .theme-pop summary,
.welcomebar .amb-pop summary,
.welcomebar #amb-toggle,
.welcomebar #mode-toggle { min-height: 40px; padding: 0 12px; gap: 6px; font-size: 13.5px; }
.welcomebar .theme-pop summary .ic,
.welcomebar .amb-pop summary .ic,
.welcomebar #amb-toggle .ic,
.welcomebar #mode-toggle .ic { width: 18px; height: 18px; }

/* 窄屏：去掉装饰线，文案仍靠左，控件放不下时自动换到第二行右侧 */
@media (max-width: 860px) {
  .wb-inner { flex-wrap: wrap; gap: 10px 12px; }
  .wb-line { display: none; }
  .wb-mid { flex: 1 1 auto; }
  .wb-inner .pref { margin-left: auto; }
}
@media (max-width: 560px) {
  .welcomebar { padding: 10px 14px 11px; }
  .wb-ico { display: none; }
  .wb-text { font-size: 14px; letter-spacing: .02em; }
  .welcomebar .theme-pop summary,
  .welcomebar .amb-pop summary,
  .welcomebar #amb-toggle,
  .welcomebar #mode-toggle { min-height: 36px; padding: 0 10px; gap: 5px; font-size: 12.5px; }
  .welcomebar .theme-pop summary .ic,
  .welcomebar .amb-pop summary .ic,
  .welcomebar #amb-toggle .ic,
  .welcomebar #mode-toggle .ic { width: 16px; height: 16px; }
}
/* 尊重减少动效偏好（本条约零动效，仅裁掉装饰闪烁可能） */
@media (prefers-reduced-motion: reduce) {
  .welcomebar::before { opacity: 1; }
}

/* ── 顶部实时状态栏：北京时间 / 农历 / 天气 / 今日限行 ── */
.statusbar {
  position: sticky; top: var(--wb-h, 0px); z-index: 25;   /* 贴欢迎条下沿（页头再贴它下沿） */
  background-color: var(--surface);
  background-image: var(--pattern);          /* 与全站同一张图案，不做纯色补丁 */
  background-size: var(--pattern-size);
  border-bottom: 1px solid var(--line);
}
/* 窄屏（手机 / 小平板）：只让搜索页头吸顶。
   实测 390×780：欢迎条 91 + 状态栏 483 + 页头 195 = 769px，几乎等于整屏——三块一起吸顶会把
   内容区挤到只剩十几像素，分类菜单永远露不出来。改为这两块随页面滚走（position 用 relative
   而非 static，`::before` 装饰线要靠它定位；`top` 一并复位，免得 relative 又按变量下移）。
   页头仍吸顶，JS 量到它们不是 sticky 就会把 --wb-h / --sb-h 记 0。
   这里是「无 JS 兜底」；矮窗口（宽屏但窗口矮）由 JS 打 html.is-thin-head 走同一套复位。 */
@media (max-width: 1100px) {
  .welcomebar, .statusbar { position: relative; top: auto; }
}
html.is-thin-head .welcomebar,
html.is-thin-head .statusbar { position: relative; top: auto; }
.status-inner {
  max-width: 1180px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; gap: 20px;
}
/* logo 位于状态栏最左侧，与统计区之间加一道分隔线 */
.statusbar .brand { flex: none; padding-right: 20px; border-right: 1px solid var(--line); }
/* 中间三栏统计 */
.status-stats {
  flex: 1 1 auto; min-width: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  align-items: start;   /* 限行列文案较长时，不让时间/天气列被拉伸出大片空白 */
}

.stat { padding: 2px 22px; min-width: 0; }
.stat:first-child { padding-left: 0; }
.stat:last-child { padding-right: 0; }
.stat + .stat { border-left: 1px solid var(--line); }

.stat-label {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--ink-3); letter-spacing: .04em;
}
.stat-city {
  appearance: none; -webkit-appearance: none;
  border: 0; background: transparent; color: var(--accent);
  font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 0 2px; cursor: pointer; border-radius: 4px;
}
.stat-city:hover { background: var(--accent-soft); }

.stat-main {
  display: block; margin-top: 2px;
  font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; line-height: 1.2;
  color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.stat-unit { font-size: 18px; font-weight: 600; color: var(--ink-2); margin-left: 3px; }
.stat-sub { display: block; margin-top: 3px; font-size: 14.5px; color: var(--ink-2); }
.stat-sub a { color: var(--accent); }

/* 未收录城市给的「最近已收录」入口：行内文字链，不跟主信息抢注意力 */
.limit-pick {
  border: 0; background: none; padding: 0; margin: 0;
  font: inherit; color: var(--accent); cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.limit-pick:hover { border-bottom-color: var(--accent); }
.limit-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* 在线兜底数据（内置表未收录的城市）加一枚小圆点，与公告表数据区分开 */
.stat-sub.is-online::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px;
  border-radius: 50%; background: var(--accent); vertical-align: 1px;
}

/* 限行用强调色，一眼看见 */
.stat-limit .stat-main { color: var(--accent); }

/* ── 天气：当前实况（温度 + 体感）一行，其下未来三天 ── */
.stat-weather { min-width: 254px; }
.wx-now { display: flex; align-items: baseline; gap: 7px; margin-top: 1px; }
.wx-now-ico { width: 22px; height: 22px; flex: none; align-self: center; }
.wx-now-temp {
  font-size: 22px; font-weight: 700; line-height: 1.15; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.wx-now-feel { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.wx-now-feel b {
  font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
/* 体感与气温差 ≥3° 时点亮，提示「该多穿一件」 */
.wx-now-feel.is-diff { color: var(--accent); }
.wx-now-feel.is-diff b { color: var(--accent); }
.wx-days { display: flex; align-items: stretch; margin-top: 3px; }
.wx-day {
  flex: 1 1 0; min-width: 0;
  display: grid; justify-items: center; gap: 1px;
  padding: 3px 2px; border-radius: 9px;
}
.wx-day + .wx-day { box-shadow: inset 1px 0 0 var(--line); }
.wx-name { font-size: 12.5px; color: var(--ink-3); letter-spacing: .06em; }
.wx-temp {
  font-size: 14.5px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: .01em;
}
.wx-ico { width: 24px; height: 24px; display: block; line-height: 0; }
.wx-ico svg { display: block; width: 100%; height: 100%; }
/* 第一天（今天）底色略提，方便一眼定位 */
.wx-day:first-child { background: var(--surface-2); }

/* 中等宽度：logo 一行，三栏统计换到下一行整行铺开 */
@media (max-width: 1100px) {
  .status-inner {
    flex-wrap: wrap; gap: 12px 18px; padding: 12px 20px;
    align-items: center;
  }
  .statusbar .brand { order: 1; padding-right: 0; border-right: 0; }
  .status-stats { order: 2; flex-basis: 100%; }
}
@media (max-width: 860px) {
  .status-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 12px;
  }
  .stat { padding: 0 18px; }
  .stat:first-child { padding-left: 0; }
  .stat:nth-child(odd) { padding-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--line); }
  .stat:nth-child(3) { border-left: 0; }
}
@media (max-width: 560px) {
  .status-stats { grid-template-columns: 1fr; row-gap: 10px; }
  .status-inner { padding: 12px 14px; }
  .stat, .stat:nth-child(even) { padding: 0; border-left: 0; }
  .stat + .stat { border-top: 1px solid var(--line); padding-top: 10px; }
  .stat-main { font-size: 28px; }
  .stat-weather { min-width: 0; }
  .wx-now-temp { font-size: 20px; }
  .wx-now-feel { font-size: 12.5px; }
  .wx-now-ico { width: 20px; height: 20px; }
  .wx-day { padding: 3px 0; }
  .wx-name { font-size: 12px; }
  .wx-temp { font-size: 13.5px; }

  /* 手机端：logo 与「北京时间」同行 —— logo 居左、时间块居右，填掉 logo 右侧大片空白 */
  .status-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px; row-gap: 12px;
    align-items: center;
  }
  .status-stats { display: contents; }   /* 让三块统计成为 .status-inner 的网格子项 */
  .brand { justify-self: start; }
  .stat-time {
    grid-column: 2; grid-row: 1;
    justify-self: end; text-align: right;
    padding-left: 0; padding-right: 0; border-left: 0;
    min-width: 0;
  }
  .stat-weather { grid-column: 1 / -1; grid-row: 2; }
  .stat-limit  { grid-column: 1 / -1; grid-row: 3; }
}
  .header-inner { padding: 16px 14px; }
  .engine { padding: 6px 12px; font-size: 14px; }
}

/* ── 页头 ── */
.site-header {
  /* 叠在「欢迎条 + 状态栏」之下，三块吸顶元素自上而下依次排列 */
  position: sticky; top: calc(var(--wb-h, 0px) + var(--sb-h, 0px)); z-index: 20;
  background-color: color-mix(in srgb, var(--surface) 88%, transparent);
  background-image: var(--pattern);          /* 图案同样覆盖页头 */
  background-size: var(--pattern-size);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background-color: var(--surface); }
}

.header-inner {
  max-width: 1180px; margin: 0 auto; padding: 18px 20px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}

.brand {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 58px;
  font-weight: 700; font-size: 23px; color: var(--ink); text-decoration: none;
  letter-spacing: .2px; white-space: nowrap;
}
/* 品牌标记「指北」：墨底罗盘，指针色跟随主题；形状与配色都在 SVG 里，这里只负责尺寸 */
.brand-mark { flex: none; display: block; width: 46px; height: 46px; }
.brand-mark svg { display: block; width: 100%; height: 100%; }
.brand-logo { transition: transform .35s cubic-bezier(.22, .68, .36, 1); }
.brand:hover .brand-logo { transform: rotate(22deg); }

/* ── 搜索（原生表单，无 JS 也能用） ── */
.search { flex: 1 1 440px; min-width: 280px; }
.search form { display: flex; gap: 10px; align-items: center; }
.search input {
  flex: 1; min-height: 58px;
  padding: 15px 24px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2); color: var(--ink);
  font-size: 17px; /* < 16px 会触发 iOS 自动放大 */
}
.search input::placeholder { color: var(--ink-3); }
.search button {
  min-height: 58px; min-width: 58px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.search button .ic { width: 23px; height: 23px; }
.search button:hover { background: var(--accent-soft); color: var(--accent); }

/* ── 多引擎切换 chips ── */
.engines {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding: 0 2px;
}
.engine {
  min-height: 38px; padding: 6px 17px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: 14.5px; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.engine:hover { background: var(--surface-2); color: var(--ink); }
.engine.is-active {
  background: var(--accent-soft); color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  font-weight: 600;
}

/* ── 页头折叠：页面下滚后搜索区收成细条（只留输入框，收起引擎切换） ──
   --engines-h 由 JS 量出引擎条的当前高度（含换行），height:auto 无法过渡，故用 max-height */
.engines {
  max-height: var(--engines-h, 220px);
  overflow: hidden;
}
.header-inner, .search input, .search button, .engines {
  transition: padding .3s cubic-bezier(.22, .68, .36, 1),
              padding-block .3s cubic-bezier(.22, .68, .36, 1),
              min-height .3s cubic-bezier(.22, .68, .36, 1),
              max-height .3s cubic-bezier(.22, .68, .36, 1),
              margin-top .3s cubic-bezier(.22, .68, .36, 1),
              opacity .2s ease, visibility 0s linear 0s;
}
html.is-headfold .header-inner { padding-block: 10px; }
html.is-headfold .search input { min-height: 44px; padding: 8px 20px; }
html.is-headfold .search button { min-height: 44px; min-width: 44px; }
html.is-headfold .search button .ic { width: 20px; height: 20px; }
html.is-headfold .engines {
  max-height: 0; margin-top: 0; opacity: 0; visibility: hidden;
  pointer-events: none;
  transition: padding .3s cubic-bezier(.22, .68, .36, 1),
              padding-block .3s cubic-bezier(.22, .68, .36, 1),
              min-height .3s cubic-bezier(.22, .68, .36, 1),
              max-height .3s cubic-bezier(.22, .68, .36, 1),
              margin-top .3s cubic-bezier(.22, .68, .36, 1),
              opacity .16s ease, visibility 0s linear .3s;
}
/* 折叠后页头变矮会让文档高度跟着少一截，浏览器滚动锚定会把 scrollY 往回带等量
   距离——内容视觉位置不动（页头收起，视口多露出内容），这正是要的效果，所以这里
   不做 margin 补偿（补了反而会顶住文档高度，让视口露不出更多内容）。
   只要求折叠阈值大于这个回退量，见 site.js 的 foldThreshold()。 */

/* ── 主题偏好（动态背景面板 + 配色面板 + 深浅切换） ── */
.pref { display: flex; align-items: center; gap: 10px; }
.theme-pop, .amb-pop { position: relative; }
/* ── 主题偏好（背景开关 + 背景款式 + 配色 + 明暗，四颗「图标＋文字」胶囊） ── */
.pref { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.theme-pop, .amb-pop { position: relative; }
.theme-pop summary, .amb-pop summary,
#amb-toggle, #mode-toggle {
  list-style: none;
  min-height: 44px; padding: 0 15px;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-2); cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap;
}
.theme-pop summary .ic, .amb-pop summary .ic,
#amb-toggle .ic, #mode-toggle .ic { width: 20px; height: 20px; flex: none; }
.theme-pop summary::-webkit-details-marker,
.amb-pop summary::-webkit-details-marker { display: none; }
.theme-pop summary:hover, .amb-pop summary:hover,
#amb-toggle:hover, #mode-toggle:hover { background: var(--accent-soft); color: var(--accent); }
/* 动态背景开关（顶层独立按钮）：开＝主题色 + 淡底，一眼看出背景在跑；
   关＝与背景一起灰掉。和「背景款式」面板是两个各管一摊的控件。 */
#amb-toggle {
  color: var(--accent); background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
}
:root[data-ambient="off"] #amb-toggle {
  color: var(--ink-3); background: var(--surface); border-color: var(--line);
}
:root[data-ambient="off"] #amb-toggle .ic { opacity: .45; }
:root[data-ambient="off"] #amb-toggle:hover { background: var(--accent-soft); color: var(--accent); }
.theme-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  min-width: 176px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 8px 28px rgba(16, 24, 40, .14);
}
.theme-menu button {
  width: 100%; display: flex; align-items: center; gap: 9px;
  min-height: 40px; padding: 8px 12px;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--ink); font: inherit; font-size: 14.5px; cursor: pointer;
  text-align: left;
}
.theme-menu button:hover { background: var(--surface-2); }
.theme-menu button[aria-pressed="true"] {
  background: var(--accent-soft); color: var(--accent); font-weight: 600;
}
.sw { width: 15px; height: 15px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.12); }
.sw-gold    { background: linear-gradient(135deg, #c9a96e, #8a6a2f); }
.sw-celadon { background: linear-gradient(135deg, #6fae9a, #2e6b58); }
.sw-indigo  { background: linear-gradient(135deg, #5f88bb, #2b5a8c); }
.sw-rouge   { background: linear-gradient(135deg, #cf8b83, #96453f); }
.sw-sketch  { background: linear-gradient(135deg, #b5af9d, #55503f); }
.sw-none    { background: linear-gradient(135deg, #f4f4f6 0 46%, #7a7a82 47% 100%); }
.sw-auto    { background: linear-gradient(135deg, #bfe3ff 0 36%, #8fd0a0 37% 68%, #f5c65a 69% 100%); }
.sw-spring  { background: linear-gradient(135deg, #a8dd7c, #4f9c3d); }
.sw-summer  { background: linear-gradient(135deg, #63c072, #1f6538); }
.sw-autumn  { background: linear-gradient(135deg, #f0c65a, #b8551c); }
.sw-winter  { background: linear-gradient(135deg, #f2f8fd, #7d9ab5); }

/* 动态背景 / 跟随天气：两枚并排的胶囊按钮（开＝主题色描边 + 实色圆点，关＝灰化压暗） */
.theme-menu .switch-row { display: flex; gap: 6px; margin: 2px; }
.theme-menu .switch-row button {
  width: auto; flex: 1; min-height: 38px; padding: 6px 8px;
  justify-content: center; gap: 6px; font-size: 13.5px;
  border: 1px solid var(--line); border-radius: 999px;
}
.theme-menu .switch-row button .sw { width: 12px; height: 12px; }
.theme-menu .switch-row button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
}
.theme-menu .switch-row button[aria-pressed="false"] { color: var(--ink-3); }
.theme-menu .switch-row button[aria-pressed="false"] .sw { filter: grayscale(1); opacity: .5; }

/* 四季款式：竖排列表，雅名在左、季节字淡显在右 */
.theme-menu .season-list { list-style: none; margin: 2px; padding: 0; }
.theme-menu .season-list button { gap: 9px; }
.theme-menu .season-hint {
  margin-left: auto; font-size: 12px; font-weight: 400;
  color: var(--ink-3); letter-spacing: .04em;
}
.theme-menu .season-list button[aria-pressed="true"] .season-hint { color: var(--accent); }

/* 主题菜单里的开关行不再用旧的行式样式 */
.theme-sep { display: block; height: 1px; margin: 6px 4px; background: var(--line); }
.theme-menu.amb-menu { min-width: 208px; }

#mode-toggle .sun { display: none; }
#mode-toggle .moon { display: block; }
:root[data-mode="dark"] #mode-toggle .sun { display: block; }
:root[data-mode="dark"] #mode-toggle .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-mode]):not([data-theme]) #mode-toggle .sun { display: block; }
  :root:not([data-mode]):not([data-theme]) #mode-toggle .moon { display: none; }
}

/* ── 分类菜单栏：宫格卡片（位于吸顶头之下，随页面滚动） ── */
.cat-nav { padding: 4px 0 10px; }
.cat-grid-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 20px;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
.cat-tile {
  display: flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow);
  color: inherit; text-decoration: none; min-width: 0;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.cat-tile:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface));
}
.cat-tile .tile-icon {
  color: var(--accent); line-height: 0; flex: none;
  display: grid; place-items: center;
}
.cat-tile .tile-icon .ic { width: 22px; height: 22px; }
.cat-tile .tile-name {
  font-weight: 600; font-size: 15px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat-tile > .ic { color: var(--ink-3); flex: none; }

/* ── 宽屏：菜单栏移到左侧空白区，悬浮玻璃面板（竖排单列） ── */
@media (min-width: 1600px) {
  .cat-nav {
    position: fixed;
    /* 顶边贴 logo 区域下沿，不越到顶栏之上；有 JS 时按实际 header 高度动态校正 */
    top: var(--rail-top, 300px);
    left: calc((100vw - 1180px) / 2 - 196px);
    width: 180px;
    /* 底边由 JS 逐帧写 max-height：既不越视口底，也不越页脚上沿 */
    max-height: var(--rail-max-h, calc(100vh - 316px));
    overflow-y: auto;
    z-index: 15;
    padding: 10px;
    background-color: color-mix(in srgb, var(--surface) 88%, transparent);
    background-image: var(--pattern);        /* 悬浮面板同样铺全局图案 */
    background-size: var(--pattern-size);
    backdrop-filter: saturate(180%) blur(12px);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .06), 0 10px 30px rgba(16, 24, 40, .06);
    /* 淡出程度由 JS 逐帧写（0~1）：越贴近页脚越透，滚回上方自然回实。
       max-height 也是逐帧写的，两者都不加 transition —— 加了反而跟不上滚动。 */
    opacity: var(--rail-fade, 1);
  }
  @supports not (backdrop-filter: blur(1px)) {
    .cat-nav { background-color: var(--surface); }
  }
  /* 淡到几乎不可见时关掉命中（JS 同时置 inert），免得点到看不见的链接 */
  .cat-nav.rail-hidden { pointer-events: none; }

  .cat-nav .cat-grid-inner {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 6px;
  }
  .cat-nav .cat-tile {
    min-height: 48px; padding: 8px 12px;
    box-shadow: none; border-color: transparent;
  }
  .cat-nav .cat-tile:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  }
  .cat-nav .cat-tile .tile-icon .ic { width: 20px; height: 20px; }
  .cat-nav .cat-tile .tile-name { font-size: 14.5px; }
  /* 悬浮面板不参与打印与滚动锚点偏移冲突 */
  .cat { scroll-margin-top: 100px; }
}

/* ── 主体 ── */
.wrap { max-width: 1180px; margin: 0 auto; padding: 24px 20px 72px; }

/* 顶部极简标题行：替代原来的大段介绍 */
.topline { margin: 0 0 24px; }
.topline h1 {
  margin: 0; font-size: clamp(26px, 4vw, 34px); line-height: 1.25;
  letter-spacing: -.3px;
}
.topline-meta {
  margin: 8px 0 0; color: var(--ink-3); font-size: 14.5px;
}
.topline-meta b { color: var(--ink); font-variant-numeric: tabular-nums; }

.intro { margin: 0 0 28px; }
.intro h1 {
  margin: 0 0 8px; font-size: clamp(26px, 4vw, 34px); line-height: 1.3;
  letter-spacing: -.3px;
  display: flex; align-items: center; gap: 10px;
}
.intro p { margin: 0; color: var(--ink-2); max-width: 68ch; }

.stats {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin: 18px 0 0; padding: 0; list-style: none;
  font-size: 14.5px; color: var(--ink-3);
}
.stats b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── 分类区块 ── */
.cat { margin: 0 0 36px; scroll-margin-top: 92px; }
.cat-head {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.cat-head h2 { margin: 0; font-size: 20px; letter-spacing: -.1px; }
.cat-head h2 a { color: var(--ink); text-decoration: none; }
.cat-head h2 a:hover { color: var(--accent); text-decoration: underline; }
.cat-head .count {
  color: var(--ink-3); font-size: 14px;
  display: inline-flex; align-items: center; gap: 5px;
}
.cat-locked .count { color: var(--accent); }

.grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  list-style: none; margin: 0; padding: 0;
}

/* ── 站点卡片：只保留图标 + 名称，垂直居中 ── */
.site-card {
  display: flex; align-items: center; gap: 13px;
  min-height: 68px; padding: 13px 16px;
  /* 半透明玻璃卡片：滚动时把身后的田园场景透出来（底部草地一带最明显） */
  background-color: color-mix(in srgb, var(--surface) 40%, transparent);
  backdrop-filter: saturate(165%) blur(6px);
  -webkit-backdrop-filter: saturate(165%) blur(6px);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: var(--radius); box-shadow: var(--shadow);
  color: inherit; text-decoration: none;
  transition: transform .14s ease, border-color .14s ease, background-color .14s ease;
}
/* 不支持毛玻璃时退回近乎不透明，保证可读性 */
@supports not (backdrop-filter: blur(1px)) {
  .site-card { background-color: color-mix(in srgb, var(--surface) 84%, transparent); }
}
.site-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background-color: color-mix(in srgb, var(--accent-soft) 55%, transparent);
}
.site-card .logo {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px; overflow: hidden;
  background: var(--surface-2); color: var(--ink-2); font-weight: 700; font-size: 16px;
}
.site-card .logo img { width: 100%; height: 100%; object-fit: contain; }
.site-card .logo svg { display: block; fill: currentColor; }
.logo-fallback { line-height: 1; }

.site-meta { min-width: 0; flex: 1; }
.site-name {
  display: block; font-weight: 600; font-size: 16px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 简介保留为屏幕阅读器文本（搜索索引与 SEO 用），视觉上不展示 */

/* ── 加密分类解锁面板 ── */
.vault-panel { max-width: 520px; }
/* 首页内联解锁：与分类区块同宽，卡片式容器，口令表单下方就地展开站点 */
.vault-panel.vault-inline {
  max-width: none;
  padding: 18px 20px 16px;
  /* 与站点卡片同一套玻璃配方，让加密分类也透出背后的场景 */
  background: color-mix(in srgb, var(--surface) 46%, transparent);
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
@supports not (backdrop-filter: blur(1px)) {
  .vault-panel.vault-inline { background: color-mix(in srgb, var(--surface) 86%, transparent); }
}
.vault-inline .field { margin-bottom: 0; }
.vault-row { display: flex; gap: 10px; flex-wrap: wrap; }
.vault-row input {
  flex: 1; min-width: 200px; min-height: var(--tap);
  padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2); color: var(--ink);
  font: inherit; font-size: 16px; letter-spacing: .1em;
}
.vault-msg { margin: 10px 0 0; font-size: 14.5px; color: var(--accent); min-height: 1.4em; }
.vault-msg:empty { min-height: 0; margin: 0; }
/* 解锁后就地渲染的站点表格 */
.vault-out { margin-top: 4px; }
.vault-out .cat { margin: 0; }
.vault-out .cat-head { margin-bottom: 12px; }
.vault-out .cat-head h2 { font-size: 18px; color: var(--ink); }

/* ── 表格视图（全站索引，SEO/GEO 友好） ── */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.index { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--surface); }
table.index caption { text-align: left; padding: 14px 16px; color: var(--ink-2); font-size: 14.5px; }
table.index th, table.index td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.index thead th { background: var(--surface-2); position: sticky; top: 0; font-size: 14px; }
table.index tbody tr:last-child td { border-bottom: 0; }
table.index td:first-child { white-space: nowrap; }

/* ── 说明块 ── */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px; margin: 0 0 20px;
}
.panel h2 { margin: 0 0 10px; font-size: 18px; }
.panel h3 { margin: 20px 0 8px; font-size: 16px; }
.panel p, .panel li { color: var(--ink-2); font-size: 15px; }
.panel ul { padding-left: 20px; }
.panel :last-child { margin-bottom: 0; }

.faq dt { font-weight: 600; margin-top: 14px; color: var(--ink); font-size: 15.5px; }
.faq dd { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; }

/* ── 表单 ── */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.field .hint { display: block; font-weight: 400; color: var(--ink-3); font-size: 13.5px; margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%; padding: 11px 13px; min-height: var(--tap);
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2); color: var(--ink);
  font: inherit; font-size: 16px;
}
.field textarea { min-height: 130px; resize: vertical; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 11px 22px;
  border: 1px solid transparent; border-radius: 8px;
  background: var(--accent); color: var(--bg);
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn-note { margin-top: 12px; font-size: 13.5px; color: var(--ink-3); }

/* ── 页脚 ── */
.site-footer {
  border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  /* 玻璃页脚：与站点卡片同一套配方，滚到底时草地仍从页脚后透出来 */
  background-color: color-mix(in srgb, var(--surface) 48%, transparent);
  background-image: var(--pattern);
  background-size: var(--pattern-size);
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  padding: 30px 20px; margin-top: 40px;
}
@supports not (backdrop-filter: blur(1px)) {
  .site-footer { background-color: color-mix(in srgb, var(--surface) 86%, transparent); }
}
.footer-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between;
  font-size: 14.5px; color: var(--ink-2);
}
.footer-inner h2 { font-size: 15px; margin: 0 0 8px; color: var(--ink); }
.footer-inner ul { list-style: none; margin: 0; padding: 0; }
.footer-inner li { margin: 4px 0; }
.footer-inner a { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; }

/* 最底部：备案号 + 版权（视觉上与上方分栏隔开） */
.footer-bottom {
  max-width: 1180px; margin: 24px auto 0;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
  text-align: center;
}
.beian-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px 20px; margin: 0;
}
.beian {
  flex: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--ink-3) !important; text-decoration: none;
  transition: color .16s ease;
}
.beian:hover { color: var(--accent) !important; }
.beian-badge { flex: none; display: block; width: 16px; height: 16px; }
.copyright {
  margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); text-align: center;
}
.copyright a { display: inline; color: var(--ink-2) !important; text-decoration: none; }
.copyright a:hover { color: var(--accent) !important; }

/* 吾爱音乐 推荐卡：图标 + 一句话介绍，整卡可点，跳转 music.52ta.top */
.promo-card {
  display: flex; align-items: center; gap: 12px;
  max-width: 330px; padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  backdrop-filter: saturate(150%) blur(6px);
  -webkit-backdrop-filter: saturate(150%) blur(6px);
  text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@supports not (backdrop-filter: blur(1px)) {
  .promo-card { background: color-mix(in srgb, var(--surface) 90%, transparent); }
}
.promo-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
  box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--accent) 80%, transparent);
}
/* 吾爱音乐官方 logo（紫色光晕圆盘 + 白色音符），自带透明软边，不额外加底色 */
.promo-logo {
  flex: none; display: block;
  width: 48px; height: 48px;
}
.promo-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; min-width: 0; }
.promo-text b { font-size: 15px; color: var(--ink); }
.promo-text > span { font-size: 12.5px; color: var(--ink-3); }
.promo-go {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--accent) !important; font-weight: 600;
}

/* 进群：QQ 群卡片（二维码整卡可点，落地 qm.qq.com 加群页） */
.join-group { margin-top: 0; }
.join-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  backdrop-filter: saturate(150%) blur(6px);
  -webkit-backdrop-filter: saturate(150%) blur(6px);
  text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@supports not (backdrop-filter: blur(1px)) {
  .join-card { background: color-mix(in srgb, var(--surface) 90%, transparent); }
}
.join-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
  box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--accent) 80%, transparent);
}
.join-qr {
  flex: none; width: 108px; height: 108px; box-sizing: border-box;
  padding: 4px; border-radius: 10px; background: #fff;
  box-shadow: 0 3px 12px -8px rgba(16, 24, 40, .5);
}
.join-meta { display: flex; flex-direction: column; gap: 3px; line-height: 1.4; min-width: 0; }
.join-meta b { font-size: 14.5px; color: var(--ink); }
.join-meta > span { font-size: 12.5px; color: var(--ink-3); }
.join-hint { color: var(--accent) !important; font-weight: 500; }

/* ── 响应式 ── */
@media (max-width: 720px) {
  .header-inner { gap: 12px; padding: 14px 20px; }
  .search { min-width: 0; }
  .search input { min-height: 52px; padding: 13px 20px; }
  .search button { min-height: 52px; min-width: 52px; }
  .brand { font-size: 19px; gap: 10px; }
  .brand-mark { width: 42px; height: 42px; }
  .cat-grid-inner { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .grid { grid-template-columns: 1fr; }
  /* 窄屏下二维码与说明改上下排，读起来更舒展 */
  .join-card { flex-direction: column; align-items: flex-start; }
  .join-qr { width: 132px; height: 132px; }
  .topline h1 { font-size: 24px; }
  .intro h1 { font-size: 24px; }

  /* ── 底栏（页脚）适配手机 ──
     逐段纵排后，桌面那套 30px 上下留白 + 40px 列间距在手机上会把页脚撑到近一整屏。
     这里只收间距、不删内容：外距从 40 收到 28，内距从 30/20 收到 22/16；
     「关于」三条链接由纵列改成可换行的行内排，省掉两行空白；底部备案条同步收紧。 */
  .site-footer { padding: 22px 16px 18px; margin-top: 28px; }
  .footer-inner { gap: 18px 16px; }
  .footer-inner > div:first-child ul {
    display: flex; flex-wrap: wrap; gap: 0 20px;
  }
  .footer-inner > div:first-child li { margin: 0; }
  .footer-bottom { margin-top: 18px; padding-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .site-card:hover { transform: none; }
}

@media print {
  .site-header, .cat-nav, .search, .btn, .pref, .engines, .statusbar, .welcomebar { display: none; }
  body::before { display: none; }
  .site-card { break-inside: avoid; box-shadow: none; }
}