/* ============================================================
   时念 · 样式层
   约定：本文件不硬编码天空颜色——所有随时间变化的量都是 CSS 变量，
   由 sky.js 每分钟写入 :root。本文件只消费变量。
   ============================================================ */

:root {
  /* ---- 天空引擎输出接口（默认值 = 深夜，sky.js 会覆盖） ---- */
  --sky-top: #04101c;
  --sky-bottom: #0a3050;
  --sky-glow: rgba(109, 161, 212, .30);
  --stars-o: 1;              /* 星星层透明度：白天为 0 */
  --recipe: dark;            /* dark | light，玻璃与文字配方 */

  /* ---- 玻璃配方（暗 · 常态）——“更薄更透”版 ---- */
  --glass-bg: rgba(205, 232, 250, .055);
  --glass-bg-strong: rgba(205, 232, 250, .085);
  --glass-border: rgba(150, 210, 255, .15);
  --glass-shadow: 0 16px 40px rgba(2, 10, 18, .35);
  --hairline: rgba(150, 210, 255, .12);
  --text: #dfeaf2;
  --text-dim: #9db4c4;
  --text-faint: #6f8ba1;

  /* ---- 结构令牌 ---- */
  --accent: #6da1d4;
  --accent-soft: rgba(109, 161, 212, .18);
  --danger: #c78882;
  --radius: 20px;
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-sky: 700ms;      /* 天空与玻璃配方切换：放慢，才像「流动」而不是「跳变」 */

  /* 弹簧回弹曲线：linear() 采样点模拟阻尼弹簧（Chrome113+/Safari17.2+/Firefox112+）
     按下 90ms 快收，松开时用它回弹 —— 无需任何动画库 */
  --spring: linear(0, .38 6.5%, .78 12.5%, 1.18 19%, 1.28 22.5%,
                  1.06 30%, .94 36%, 1.02 46%, .99 56%, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --maxw: 430px;
}

/* 亮配方（白天的玻璃与文字），由 sky.js 切到 --recipe: light 时启用 */
:root[data-recipe="light"] {
  --glass-bg: rgba(255, 255, 255, .34);
  --glass-bg-strong: rgba(255, 255, 255, .5);
  --glass-border: rgba(255, 255, 255, .45);
  --glass-shadow: 0 16px 40px rgba(40, 70, 95, .18);
  --hairline: rgba(255, 255, 255, .4);
  --text: #0d2b3e;
  --text-dim: #3d6076;
  --text-faint: #5a7d92;
  --accent: #0b6a93;
  --accent-soft: rgba(11, 106, 147, .12);
  --danger: #a8503f;
}

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

html {
  height: 100%;
  /* 阻止 iOS 横屏时自动放大文字，保住排版 */
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  font-family: 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  color: var(--text);
  background: linear-gradient(178deg, var(--sky-top) 0%, var(--sky-bottom) 100%) fixed;
  transition: background var(--dur-sky) var(--ease-out);
  -webkit-font-smoothing: antialiased;
  /* 移动端：去掉点击时的默认蓝色高亮块；禁止下拉触发浏览器刷新 */
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

/* 左右/底部安全区：让内容避开刘海、灵动岛与底部手势条 */
main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: 0;
  padding-right: 18px;
  padding-bottom: 40px;
  padding-left: 18px;
  padding-right: max(18px, env(safe-area-inset-right, 0px));
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  padding-left: max(18px, env(safe-area-inset-left, 0px));
}

/* ---- 天空舞台（背景装饰层） ---- */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* 光晕：transform 由 sky.js 按时刻设定（模拟太阳轨迹），
   translate 是独立的缓慢漂浮，两者叠加 → 天空「活着」 */
.orb { position: absolute; border-radius: 50%; filter: blur(50px);
       background: radial-gradient(circle, var(--sky-glow), transparent 70%);
       opacity: .8; transition: opacity 1.2s;
       transform: translate3d(var(--orb-x, 0px), var(--orb-y, 0px), 0);
       animation: orbFloat 26s ease-in-out infinite; }
@keyframes orbFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 16px -12px; }
}
.orb-a { width: 340px; height: 340px; top: -80px; left: -90px; }
.orb-b { width: 420px; height: 420px; bottom: -120px; right: -120px; opacity: .5;
         animation-duration: 34s; animation-direction: reverse; }

.stars { position: absolute; inset: 0; opacity: var(--stars-o); transition: opacity 2s; }

/* 星空随页面滚动轻微上移，制造纵深（仅支持滚动驱动动画的浏览器启用） */
@supports (animation-timeline: scroll()) {
  .stars {
    animation: starsDrift linear both;
    animation-timeline: scroll(root);
    animation-range: 0 120vh;
  }
  @keyframes starsDrift { to { transform: translateY(-72px); } }
}
.stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%;
           background: #dcecf8; animation: twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .25; } }

/* ---- 玻璃 ---- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background var(--dur-sky) var(--ease-out),
              border-color var(--dur-sky) var(--ease-out);
}

.card { padding: 20px 18px; }

/* ---- 时钟卡 ---- */
/* 顶部安全区：刘海/灵动岛机型自动多留出空间，无刘海机型保持 76px 不变 */
.hero {
  padding-top: 76px;
  padding-top: max(76px, calc(env(safe-area-inset-top, 0px) + 28px));
  padding-bottom: 24px;
}

/* ---- 城市选择器 ---- */
.city-bar { position: relative; margin: 0 0 14px; }
.city-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;                 /* 触控目标 ≥44px */
  padding: 8px 15px; border: 1px solid var(--hairline);
  border-radius: 24px; background: var(--glass-bg-strong);
  color: var(--text-dim); font: 13px/1 inherit;
  font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.city-btn:hover, .city-btn:focus { border-color: var(--accent); color: var(--text); outline: none; }
.city-btn:active { background: var(--accent-soft); color: var(--text); }
.city-pin { font-size: 13px; line-height: 1; }
.city-label { font-weight: 500; }
.city-chev { font-size: 10px; margin-left: 2px; transition: transform var(--dur-fast); }
.city-bar.open .city-chev { transform: rotate(180deg); }

/* 刷新与设置：触控区 44×44（手指友好），视觉仍是 32px 的小圆 */
.refresh-btn,
.settings-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: none; background: none;
  color: var(--text-dim); font-size: 15px; cursor: pointer;
  vertical-align: middle; margin-left: 0;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-fast);
}
.refresh-btn::before,
.settings-btn::before {
  content: '';
  position: absolute; left: 50%; top: 50%; margin: -16px 0 0 -16px;
  width: 32px; height: 32px;
  border: 1px solid var(--hairline);
  border-radius: 50%; background: var(--glass-bg-strong);
  transition: border-color var(--dur-fast);
}
.refresh-btn:hover, .refresh-btn:focus,
.settings-btn:hover, .settings-btn:focus { color: var(--accent); outline: none; }
.refresh-btn:hover::before, .refresh-btn:focus::before,
.settings-btn:hover::before, .settings-btn:focus::before { border-color: var(--accent); }
.refresh-btn:active, .settings-btn:active { opacity: .55; }
.settings-btn { font-size: 16px; }

/* ---- 设置与数据面板 ---- */
.settings-drop {
  position: absolute; top: 100%; left: 0; right: 0;
  margin-top: 6px; padding: 14px;
  border: 1px solid var(--glass-border); border-radius: 16px;
  background: var(--glass-bg-strong);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  z-index: 12;
  max-height: min(420px, 62vh); overflow-y: auto; overscroll-behavior: contain;
}
/* 需显式声明，否则会盖过 hidden 属性的 display:none */
.settings-drop[hidden] { display: none; }

.set-block + .set-block { margin-top: 14px; padding-top: 14px;
                         border-top: 1px solid var(--hairline); }
.set-label { font-size: 12px; letter-spacing: .12em; color: var(--text-faint); margin-bottom: 10px; }

/* 分段控件：跟随天空 / 亮 / 暗 */
.set-seg { display: flex; gap: 6px; }
.set-seg button {
  flex: 1; min-height: 44px;
  border: 1px solid var(--hairline); border-radius: 10px;
  background: transparent; color: var(--text-dim);
  font: 13px/1 inherit; font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.set-seg button.on {
  background: var(--accent-soft); color: var(--text); border-color: var(--accent);
}

/* 开关行 */
.set-row { display: flex; align-items: center; justify-content: space-between;
           min-height: 44px; font-size: 14px; color: var(--text-dim); cursor: pointer; }
.set-toggle {
  position: relative; width: 46px; height: 28px; flex-shrink: 0;
  border: 1px solid var(--hairline); border-radius: 999px;
  background: rgba(120,140,160,.18); cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.set-toggle::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--text-faint);
  transition: transform 240ms var(--spring), background var(--dur-fast);
}
.set-toggle.on { background: var(--accent-soft); border-color: var(--accent); }
.set-toggle.on::after { transform: translateX(18px); background: var(--accent); }

/* 数据操作 */
.set-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.set-btn {
  min-height: 44px; padding: 0 10px;
  border: 1px solid var(--hairline); border-radius: 10px;
  background: transparent; color: var(--text-dim);
  font: 13px/1 inherit; font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.set-btn:active { background: var(--accent-soft); color: var(--text); }
.set-btn.danger { color: var(--danger); }
.set-hint { margin-top: 10px; font-size: 12px; line-height: 1.6; color: var(--text-faint); }

/* 设置驱动：关闭天气装饰层 */
:root[data-no-decor] .weather-layer,
:root[data-no-decor] .rain-canvas,
:root[data-no-decor] .snow-canvas { display: none; }
:root[data-no-decor] .sky { filter: none !important; }

/* 设置驱动：关闭微交互（与系统「减弱动态」同等处理） */
:root[data-no-motion] *,
:root[data-no-motion] *::before,
:root[data-no-motion] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}
:root[data-no-motion] .stars i { animation: none; opacity: .6; }
:root[data-no-motion] .rain-drop,
:root[data-no-motion] .snow-flake { animation: none !important; }

.city-drop {
  position: absolute; top: 100%; left: 0; right: 0;
  margin-top: 6px; border: 1px solid var(--glass-border);
  border-radius: 14px; background: var(--glass-bg-strong);
  box-shadow: var(--glass-shadow); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); z-index: 10;
  /* 小屏/软键盘弹起时不至于顶出屏幕 */
  max-height: min(280px, 46vh);
  display: flex; flex-direction: column; overflow: hidden;
}
/* display:flex 会盖过 hidden 属性的默认 display:none，必须显式声明回来，
   否则城市下拉会永远展开 */
.city-drop[hidden] { display: none; }
.city-search {
  width: 100%; min-height: 46px; padding: 10px 14px;
  border: none; border-bottom: 1px solid var(--hairline);
  background: transparent; color: var(--text);
  font: 16px/1.4 inherit; font-family: inherit;   /* 16px：避免 iOS 聚焦时整页放大 */
  flex-shrink: 0;
  outline: none;
}
.city-search::placeholder { color: var(--text-faint); }
.city-list {
  list-style: none; flex: 1; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.city-list li {
  display: flex; align-items: center;
  min-height: 44px;                 /* 触控目标 ≥44px */
  padding: 11px 14px; cursor: pointer; font-size: 14px;
  color: var(--text-dim); transition: background var(--dur-fast), color var(--dur-fast);
  -webkit-tap-highlight-color: transparent;
}
.city-list li:hover, .city-list li:focus { background: var(--accent-soft); color: var(--text); outline: none; }
.city-list li:active { background: var(--accent-soft); color: var(--text); }
.city-list li.selected { color: var(--accent); font-weight: 500; }
/* 时钟卡进场 */
.clock-card { text-align: center; padding: 34px 18px 28px; animation: cardIn .6s var(--ease-out) both; }

.eyebrow {
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px; font-weight: 500;
}

.clock {
  font-size: clamp(64px, 20vw, 84px);
  font-weight: 200;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  color: var(--text);
}
.clock .colon { animation: breathe 2s ease-in-out infinite; }
.clock .sec {
  font-size: .32em; color: var(--text-dim);
  margin-left: .18em; vertical-align: .16em;
  font-variant-numeric: tabular-nums;
}
@keyframes breathe { 50% { opacity: .35; } }

.date-line { margin-top: 14px; font-size: 14px; color: var(--text-dim); letter-spacing: .06em; }

/* ---- 天气显示行 ---- */
.weather-line { margin-top: 8px; font-size: 14px; color: var(--text-dim); }
/* inline-block：让天气图标与温度能做缩放动画（inline 元素不支持 transform） */
.weather-icon { font-size: 16px; margin-right: 4px; vertical-align: middle; display: inline-block; }
.weather-temp { font-weight: 500; vertical-align: middle; display: inline-block; }

/* ---- 天气装饰层（全局天空叠加） ---- */
.weather-layer {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  overflow: hidden; opacity: 0; transition: opacity 1.2s;
}
:root[data-weather="cloudy"] .weather-layer,
:root[data-weather="partly-cloudy"] .weather-layer { opacity: 1; }

/* 阴天：饱和度降低 */
:root[data-weather="cloudy"] .sky {
  filter: saturate(0.7);
  transition: filter 1.2s;
}
:root[data-weather="partly-cloudy"] .sky {
  filter: saturate(0.85);
  transition: filter 1.2s;
}

/* 雾：底部乳白渐变 */
:root[data-weather="fog"] .weather-layer {
  opacity: 1;
  background: linear-gradient(to top, rgba(220,230,240,.25) 0%, transparent 60%);
}

/* 雨丝 */
.rain-canvas {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity .8s;
}
:root[data-weather="rain"] .rain-canvas,
:root[data-weather="drizzle"] .rain-canvas,
:root[data-weather="thunderstorm"] .rain-canvas { opacity: 1; }
.rain-drop {
  position: absolute; width: 1.5px; background: rgba(180,210,240,.18);
  animation: rainFall linear infinite;
}
/* +120px：确保雨滴落到屏幕外再循环，不会在半空消失 */
@keyframes rainFall { to { transform: translateY(calc(100vh + 120px)) translateX(-30px); } }

/* 雪花 */
.snow-canvas {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity .8s;
}
:root[data-weather="snow"] .snow-canvas { opacity: 1; }
.snow-flake {
  position: absolute; border-radius: 50%;
  background: rgba(240,245,255,.22);
  animation: snowFall linear infinite;
}
@keyframes snowFall { to { transform: translateY(calc(100vh + 120px)) rotate(360deg); } }

/* ---- 倒数日 ---- */
.countdown { padding: 8px 0 20px; }

.section-title {
  font-size: 15px; font-weight: 500; letter-spacing: .18em;
  color: var(--text-faint); text-align: center; margin: 20px 0 16px;
}

.form-card { display: grid; gap: 10px; margin-bottom: 14px; }

input[type="text"], input[type="date"] {
  width: 100%; min-height: 46px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: var(--glass-bg-strong);
  color: var(--text);
  font: 400 16px/1.4 inherit;   /* 16px：避免 iOS 聚焦时整页放大 */
  font-family: inherit;
  transition: border-color var(--dur-fast) var(--ease-out);
}
input::placeholder { color: var(--text-faint); }
input:focus { outline: none; border-color: var(--accent); }
input[type="date"] { color-scheme: dark; }
:root[data-recipe="light"] input[type="date"] { color-scheme: light; }

.btn {
  min-height: 46px;
  border: none; border-radius: 12px;
  background: var(--accent-soft);
  color: var(--text);
  font: 500 15px/1 inherit; font-family: inherit;
  letter-spacing: .06em;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(.97); background: var(--accent); color: #06121d; }
@media (hover: hover) {
  .btn:hover { background: var(--accent); color: #06121d; }
}

/* 倒数日列表 */
.cd-list { list-style: none; display: grid; gap: 10px; }

/* 倒数日条目：外层 .cd-item 是容器（承载滑动删除），
   内层 .cd-body 才是玻璃卡本身。进出场改由 JS 精确控制，
   这样新增的才是新增、移动的才是移动，不会整列表重播一遍 */
.cd-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  touch-action: pan-y;        /* 纵向留给页面滚动，横向留给滑动删除 */
}
.cd-body {
  position: relative;
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  transition: transform 340ms var(--spring),
              background var(--dur-sky) var(--ease-out),
              border-color var(--dur-sky) var(--ease-out);
}
/* 按压反馈：按下 90ms 快速收拢，松开交给弹簧回弹 */
.cd-body:active {
  transform: scale(.972);
  transition-duration: 90ms;
  transition-timing-function: ease-out;
}
/* 左滑时露出的删除底层 */
.cd-swipe {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 22px;
  background: rgba(199, 136, 130, .18);
  color: var(--danger);
  font-size: 13px; letter-spacing: .12em;
  opacity: 0; transition: opacity 160ms ease-out;
}
.cd-item.swiping .cd-swipe { opacity: 1; }

/* 卡片入场共用 */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cd-info { flex: 1; min-width: 0; }
.cd-name { font-size: 15.5px; font-weight: 500; overflow: hidden;
           text-overflow: ellipsis; white-space: nowrap; }
.cd-sub { font-size: 12.5px; color: var(--text-faint); margin-top: 3px; }

.cd-days { display: flex; align-items: baseline; justify-content: flex-end;
           gap: 5px; text-align: right; flex-shrink: 0; white-space: nowrap;
           perspective: 420px;   /* 让天数数字的翻转有立体感 */ }
.cd-days .n { font-size: 26px; font-weight: 300; line-height: 1;
              font-variant-numeric: tabular-nums; }
.cd-days .n:only-child { font-size: 17px; font-weight: 500; color: var(--accent); }
.cd-days .u { font-size: 11px; color: var(--text-dim); letter-spacing: .1em; }
.cd-item.is-today .n { color: var(--accent); font-weight: 500; }
.cd-item.is-past { opacity: .55; }

.cd-del {
  flex-shrink: 0; width: 44px; height: 44px;
  border: none; background: none; color: var(--text-faint);
  font-size: 17px; cursor: pointer; border-radius: 8px;
  transition: color var(--dur-fast), transform var(--dur-fast);
}
.cd-del:active { transform: scale(.9); color: var(--danger); }
@media (hover: hover) { .cd-del:hover { color: var(--danger); } }

.cd-edit {
  flex-shrink: 0; width: 44px; height: 44px;
  border: none; background: none; cursor: pointer; border-radius: 8px;
  position: relative;
  transition: opacity var(--dur-fast);
}
.cd-edit::after {
  content: '';
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 15px; height: 15px;
  background: var(--text-faint);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E");
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E");
}
.cd-edit:active { opacity: .6; }
@media (hover: hover) { .cd-edit:hover { opacity: .7; } }

.btn-cancel {
  min-height: 46px; padding: 0 18px;
  border: 1px solid var(--hairline); border-radius: 12px;
  background: transparent; color: var(--text-dim);
  font: 500 15px/1 inherit; font-family: inherit;
  letter-spacing: .06em; cursor: pointer;
  transition: color var(--dur-fast);
}
.btn-cancel:active { color: var(--text); }
@media (hover: hover) { .btn-cancel:hover { color: var(--text); } }

.form-actions { display: flex; gap: 8px; }

.empty { text-align: center; font-size: 13.5px; line-height: 1.8;
         color: var(--text-faint); padding: 26px 20px; }

.foot { text-align: center; font-size: 11.5px; color: var(--text-dim);
        letter-spacing: .08em; padding: 26px 0 10px; }

/* ============================================================
   机型适配：按屏幕尺寸切换排版
   ------------------------------------------------------------
   ① 超窄档 ≤340px  — 折叠屏外屏、iPhone SE1 等小屏
   ② 横屏档        — 手机横过来（高度 ≤600px）：左右分栏
   ③ 宽屏档        — 平板 / 折叠屏展开（≥680px 宽且够高）：左右双列
   注意：②③ 互不重叠（横屏高度不足 600px 时不会命中宽屏档）
   ============================================================ */

/* ① 超窄档：收缩内边距与字号，保证内容完整、不横向溢出 */
@media (max-width: 340px) {
  :root { --radius: 16px; }
  main {
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
  }
  .hero {
    padding-top: 64px;
    padding-top: max(64px, calc(env(safe-area-inset-top, 0px) + 24px));
    padding-bottom: 18px;
  }
  .clock-card { padding: 26px 14px 22px; }
  .clock { font-size: clamp(52px, 19vw, 66px); }
  .card { padding: 16px 14px; }
  /* 倒数日卡片改两行：名字独占一行，天数与按钮在第二行。
     这样既保住 44px 触控区，又不会把名字挤成一串省略号 */
  .cd-body { flex-wrap: wrap; gap: 8px; padding: 14px 12px; }
  .cd-info { flex: 1 0 100%; }
  .cd-days { margin-right: auto; }
  .cd-days .n { font-size: 23px; }
  .city-btn { padding: 8px 12px; }
  .section-title { margin: 16px 0 12px; }
  .empty { padding: 22px 16px; }
}

/* ②③ 共用：左右分栏骨架（.col-left 包住时钟与城市栏，保证二者始终相邻） */
@media (orientation: landscape) and (max-height: 600px),
       (min-width: 680px) and (min-height: 600px) {
  main {
    max-width: 880px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "left      countdown"
      "foot      foot";
    align-items: start;
    column-gap: 22px;
  }
  .col-left  { grid-area: left; min-width: 0; }
  .hero      { padding-bottom: 14px; }
  .city-bar  { margin-bottom: 0; }
  .countdown { grid-area: countdown; padding: 8px 0 12px; }
  .foot      { grid-area: foot; padding: 18px 0 4px; }
  .section-title { margin: 10px 0 14px; }
  .clock-card { padding: 26px 20px 24px; }
  .eyebrow { margin-bottom: 12px; }
}

/* ② 横屏档：高度吃紧，压缩纵向留白，时钟按屏高取字号 */
@media (orientation: landscape) and (max-height: 600px) {
  main { padding-top: 8px; }
  .hero {
    padding-top: 20px;
    padding-top: max(20px, calc(env(safe-area-inset-top, 0px) + 8px));
  }
  .clock { font-size: clamp(44px, 13vh, 72px); }
  .date-line { margin-top: 10px; }
}

/* ③ 宽屏档：空间充裕，时钟放大，天空光晕同步放大避免空旷 */
@media (min-width: 680px) and (min-height: 600px) {
  .clock { font-size: clamp(74px, 9vw, 100px); }
  .hero {
    padding-top: 88px;
    padding-top: max(88px, calc(env(safe-area-inset-top, 0px) + 32px));
  }
  .orb-a { width: 520px; height: 520px; top: -120px; left: -130px; }
  .orb-b { width: 640px; height: 640px; bottom: -180px; right: -180px; }
}

/* ---- 可访问性与降级 ---- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden;
           clip: rect(0 0 0 0); white-space: nowrap; }

/* 高清屏（2 倍及以上）：1px 边框实际会画成 2~3 个物理像素，偏粗。
   降到 .5px 后玻璃边框更纤细精致 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .glass,
  input[type="text"],
  input[type="date"] { border-width: .5px; }
}

/* 毛玻璃性能降级：低帧率设备自动关闭 backdrop-filter */
:root[data-low-perf] .glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .stars i { animation: none; opacity: .6; }
  .rain-drop, .snow-flake { animation: none !important; }
}