/* ============================================================
   星旅 · Phase 2：内容页的「星空皮肤」
   —— 让栏目页也活在同一片夜空里（不再从夜空滚回米白纸面）
   —— 用法：给 section 加 class="sky-skin" + data-sky-skin，
      并在页内放一个 <div class="sky-field">（星尘由 js/sky.js 注入）
   —— 首批：相爱时光（#counter）、关于这份回忆录（#story）
   ============================================================ */

.sky-skin {
  color: #fdf6ef;
  background:
    radial-gradient(ellipse 70% 40% at 50% 112%, rgba(255, 150, 110, 0.10) 0%, rgba(255, 150, 110, 0) 62%),
    radial-gradient(ellipse 84% 50% at 50% -10%, rgba(74, 56, 104, 0.42) 0%, rgba(74, 56, 104, 0) 70%),
    linear-gradient(180deg, #07050a 0%, #100a15 46%, #1a1020 78%, #231328 100%);
}
.sky-skin .sky-field { position: absolute; inset: 0; pointer-events: none; }
.sky-skin .sky-field i {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: #fff6ea;
  opacity: 0.5;
}
.sky-skin .sky-field i.tw { animation: sky-twinkle var(--tw, 5s) ease-in-out var(--td, 0s) infinite; }

/* —— 文字 —— */
.sky-skin .section-title .zh,
.sky-skin h2 { color: #fdf6ef; }
.sky-skin .section-title .en { color: rgba(255, 214, 224, 0.55); }
.sky-skin .eyebrow { color: rgba(255, 214, 224, 0.62); }
.sky-skin p { color: rgba(253, 246, 239, 0.66); }
.sky-skin .hairline { background: linear-gradient(to right, transparent, rgba(255, 214, 224, 0.22) 18%, rgba(255, 214, 224, 0.22) 82%, transparent); }

/* —— 章节标题卡（原来是浅色玻璃，夜色下要改成深玻璃） —— */
.sky-skin .section-title {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.022));
  border-color: rgba(255, 214, 224, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 44px -30px rgba(0, 0, 0, 0.75);
}
.sky-skin .section-title .en {
  color: rgba(255, 214, 224, 0.6);
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 214, 224, 0.14);
}

/* —— 相爱时光：数字卡改成夜色玻璃 —— */
.sky-skin .counter-card {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  border-color: rgba(255, 214, 224, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 44px -26px rgba(0, 0, 0, 0.7);
}
.sky-skin .counter-card:hover { border-color: rgba(255, 214, 224, 0.3); }
.sky-skin .counter-card .num { color: #fdf6ef; }
.sky-skin .counter-card .num::after,
.sky-skin .counter-card .lbl { color: rgba(255, 214, 224, 0.5); }
.sky-skin .counter-quote { color: rgba(253, 246, 239, 0.5); }

/* —— 关于这份回忆录：同一套 —— */
.sky-skin .story-card {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border-color: rgba(255, 214, 224, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 44px -26px rgba(0, 0, 0, 0.7);
}
.sky-skin .story-card .story-icon { color: rgba(255, 214, 224, 0.72); }
.sky-skin .story-card .card-line { color: rgba(253, 246, 239, 0.72); }

/* ============================================================
   ★ 时间轴 ＝ 星轨
   —— 竖线变成一条会发光的星轨，每个节点是一颗星
   ============================================================ */
.sky-skin.timeline .timeline-list::before,
.sky-skin.timeline .timeline-line {
  background: linear-gradient(to bottom,
    rgba(255, 214, 224, 0) 0%,
    rgba(255, 214, 224, 0.42) 12%,
    rgba(255, 190, 170, 0.5) 55%,
    rgba(255, 214, 224, 0.3) 88%,
    rgba(255, 214, 224, 0) 100%) !important;
  box-shadow: 0 0 18px rgba(255, 190, 170, 0.22);
}
.sky-skin.timeline .timeline-item::before,
.sky-skin.timeline .timeline-item::after {
  background: #ffe9d2 !important;
  box-shadow: 0 0 10px 2px rgba(255, 214, 170, 0.55);
}
.sky-skin.timeline .t-date { color: rgba(255, 214, 224, 0.72) !important; }
.sky-skin.timeline .t-title,
.sky-skin.timeline .t-title * { color: #fdf6ef !important; }
.sky-skin.timeline .t-text,
.sky-skin.timeline .t-text * { color: rgba(253, 246, 239, 0.64) !important; }
.sky-skin.timeline .t-media img,
.sky-skin.timeline .t-media video {
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 214, 224, 0.12);
}
.sky-skin.timeline .btn-ghost {
  color: rgba(253, 246, 239, 0.8);
  border-color: rgba(255, 214, 224, 0.28);
}
.sky-skin.timeline .btn-ghost:hover { color: #fdf6ef; border-color: rgba(255, 214, 224, 0.6); }

/* ============================================================
   ★ 系统性换肤：重定义站点的设计令牌（各组件都吃这套变量）
   —— 比逐个组件覆写更省、更不容易漏
   ============================================================ */
.sky-skin {
  --ink: #fdf6ef;
  --ink-soft: rgba(253, 246, 239, 0.68);
  --ink-mute: rgba(253, 246, 239, 0.46);
  --surface: rgba(255, 255, 255, 0.062);
  --surface-strong: rgba(255, 255, 255, 0.09);
  --surface-line: rgba(255, 214, 224, 0.16);
  --surface-line-soft: rgba(255, 214, 224, 0.1);
  --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.5);
  --shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 64px -16px rgba(0, 0, 0, 0.7);
}
/* 按钮 / 过滤件 / 表单件在夜色下的形态 */
.sky-skin .btn-ghost,
.sky-skin .filter-btn,
.sky-skin .sig-clear,
.sky-skin .sig-save,
.sky-skin .season-picker button {
  color: rgba(253, 246, 239, 0.8) !important;
  border-color: rgba(255, 214, 224, 0.26) !important;
}
.sky-skin .btn-ghost:hover,
.sky-skin .filter-btn:hover { color: #fdf6ef !important; border-color: rgba(255, 214, 224, 0.6) !important; }
.sky-skin .filter-btn.active { color: #fdf6ef !important; border-color: rgba(255, 214, 224, 0.7) !important; }
.sky-skin input,
.sky-skin textarea,
.sky-skin select {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #fdf6ef !important;
  border-color: rgba(255, 214, 224, 0.2) !important;
}
.sky-skin input::placeholder,
.sky-skin textarea::placeholder { color: rgba(253, 246, 239, 0.35) !important; }
/* 空态卡 / 虚线卡 */
.sky-skin .gallery-drop,
.sky-skin .video-add-card {
  color: rgba(253, 246, 239, 0.6) !important;
  border-color: rgba(255, 214, 224, 0.28) !important;
}
.sky-skin .gallery-drop:hover,
.sky-skin .video-add-card:hover { color: #fdf6ef !important; border-color: rgba(255, 214, 224, 0.6) !important; }
/* 地图（D3）：图例与控件 */
.sky-skin .map-controls,
.sky-skin .map-legend {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 214, 224, 0.16) !important;
  color: rgba(253, 246, 239, 0.75) !important;
}

/* ============================================================
   ★ 相册 ＝ 星云光尘
   —— 照片悬在星云里：暖色星云底 + 照片像一片片发光的光尘
   ============================================================ */
#gallery.sky-skin::before {
  content: "";
  position: absolute;
  inset: -8% -6% 0;                         /* 下缘不外溢：避免装饰层把页撑出可滚动区 */
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 38% 30% at 22% 26%, rgba(255, 150, 110, 0.15), rgba(255, 150, 110, 0) 70%),
    radial-gradient(ellipse 34% 26% at 78% 62%, rgba(150, 120, 210, 0.13), rgba(150, 120, 210, 0) 72%),
    radial-gradient(ellipse 26% 22% at 58% 10%, rgba(255, 214, 224, 0.10), rgba(255, 214, 224, 0) 70%);
  filter: blur(7px);
}
#gallery.sky-skin .section-title,
#gallery.sky-skin .filter-toolbar,
#gallery.sky-skin .gallery-grid { position: relative; z-index: 1; }
#gallery.sky-skin .gallery-card {
  box-shadow:
    0 26px 60px -30px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(255, 214, 224, 0.10),
    0 0 36px -14px rgba(255, 180, 140, 0.38);
}
#gallery.sky-skin .gallery-card:hover {
  box-shadow:
    0 30px 70px -28px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 214, 224, 0.22),
    0 0 52px -12px rgba(255, 190, 150, 0.5);
}

/* ============================================================
   ★ 愿望 ＝ 许愿星（达成的那条亮起来）
   ============================================================ */
#wishes.sky-skin .wish-item {
  border-color: rgba(255, 214, 224, 0.16) !important;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.02)) !important;
}
#wishes.sky-skin .wish-text { color: rgba(253, 246, 239, 0.88) !important; }
#wishes.sky-skin .wish-check { border-color: rgba(255, 214, 224, 0.38) !important; }
#wishes.sky-skin .wish-item.done,
#wishes.sky-skin .wish-item.checked,
#wishes.sky-skin .wish-item.is-done {
  border-color: rgba(255, 216, 170, 0.45) !important;
  box-shadow: 0 0 28px -8px rgba(255, 210, 160, 0.6);
}
#wishes.sky-skin .wish-item.done .wish-text,
#wishes.sky-skin .wish-item.checked .wish-text,
#wishes.sky-skin .wish-item.is-done .wish-text { color: rgba(255, 236, 214, 0.95) !important; }

/* ============================================================
   ★ 时间胶囊 ＝ 黑洞前的最后一颗星
   ============================================================ */
#capsule.sky-skin::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 15%;
  width: 5px; height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: #fff3e2;
  box-shadow: 0 0 14px 4px rgba(255, 224, 180, 0.55), 0 0 48px 18px rgba(255, 190, 140, 0.15);
  animation: capsule-star 4.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes capsule-star {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50%      { opacity: 1;    transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) { #capsule.sky-skin::before { animation: none; } }

/* ============================================================
   ★ 足迹 ＝ 世界星图（D3 地图在夜色下必须整体换色，否则是一块亮奶油色）
   ============================================================ */
#map.sky-skin .world-map,
#map.sky-skin .map-wrap,
#map.sky-skin #map-svg { background: transparent !important; }
#map.sky-skin #map-svg rect { fill: transparent !important; }
#map.sky-skin #map-svg path {
  fill: rgba(255, 255, 255, 0.045) !important;
  stroke: rgba(255, 214, 224, 0.30) !important;
}
#map.sky-skin #map-svg path.sphere,
#map.sky-skin #map-svg path.graticule { fill: none !important; stroke: rgba(255, 214, 224, 0.14) !important; }
#map.sky-skin #map-svg circle {
  fill: #ffd9a8 !important;
  stroke: rgba(255, 214, 224, 0.55) !important;
}
#map.sky-skin #map-svg text { fill: rgba(253, 246, 239, 0.72) !important; }
#map.sky-skin #map-svg line,
#map.sky-skin #map-svg .route { stroke: rgba(255, 214, 224, 0.5) !important; }

/* ============================================================
   ★ 爱你的理由 ＝ 流星雨
   —— 用 ::after 放两道流星（拖尾=运动方向），循环落下；
      #reasons 的 ::before 已用于章节眉标，故不动它
   ============================================================ */
#reasons.sky-skin::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-image:
    /* 流星 A：细长拖尾 + 头部亮点 */
    linear-gradient(200deg, rgba(255, 245, 228, 0.85) 0%, rgba(255, 236, 210, 0.35) 42%, rgba(255, 236, 210, 0) 100%),
    /* 流星 B */
    linear-gradient(200deg, rgba(255, 240, 220, 0.7) 0%, rgba(255, 236, 210, 0.25) 40%, rgba(255, 236, 210, 0) 100%);
  background-size: 2px 130px, 1.5px 92px;
  background-position: 82% -12%, 46% -18%;
  animation: wish-meteor 11s linear infinite;
}
@keyframes wish-meteor {
  0%   { background-position: 82% -12%, 46% -18%; opacity: 0; }
  5%   { opacity: 1; }
  34%  { opacity: 1; }
  46%  { opacity: 0; background-position: 18% 92%, -6% 74%; }
  100% { opacity: 0; background-position: 18% 92%, -6% 74%; }
}
@media (prefers-reduced-motion: reduce) {
  #reasons.sky-skin::after { animation: none; opacity: 0; }
}

/* ============================================================
   ★ 情书 ＝ 许愿星（信纸像一颗颗静着发光的星）
   ============================================================ */
#letters.sky-skin .letter-card,
#letters.sky-skin .letters-stack > * {
  border-color: rgba(255, 214, 224, 0.16) !important;
  box-shadow: 0 26px 60px -34px rgba(0, 0, 0, 0.85), 0 0 30px -16px rgba(255, 200, 150, 0.45);
}
#letters.sky-skin .letter-card:hover,
#letters.sky-skin .letters-stack > *:hover {
  box-shadow: 0 30px 66px -32px rgba(0, 0, 0, 0.9), 0 0 46px -14px rgba(255, 205, 155, 0.6);
}

/* ============================================================
   ★ 相册 ＝ 入口（相册本体迁往独立页面 album.html，后续精做）
   ============================================================ */
.gallery-legacy[hidden] { display: none !important; }
.album-entry {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: min(560px, 100%);
  margin: clamp(8px, 2.2vh, 24px) auto clamp(4px, 1.2vh, 12px);
  padding: clamp(24px, 4.2vh, 42px) 28px clamp(20px, 3.6vh, 34px);
  text-align: center;
  text-decoration: none;
  color: inherit;
  background: rgba(253, 246, 239, 0.045);
  border: 1px solid rgba(255, 214, 224, 0.22);
  border-radius: 12px;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9), 0 0 44px -18px rgba(255, 180, 140, 0.35);
  transition: transform 420ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 420ms cubic-bezier(0.23, 1, 0.32, 1), border-color 420ms cubic-bezier(0.23, 1, 0.32, 1);
}
.album-entry:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 214, 224, 0.46);
  box-shadow: 0 36px 84px -42px rgba(0, 0, 0, 0.95), 0 0 64px -16px rgba(255, 180, 140, 0.5);
}
.album-entry:active { transform: translateY(-1px) scale(0.985); transition-duration: 140ms; }
.al-entry-visual { position: relative; width: 90px; height: 64px; margin-bottom: 3px; }
.al-entry-visual .al-photo {
  position: absolute;
  width: 48px; height: 60px;
  padding: 4px 4px 14px;
  background: #fdf6ef;
  border-radius: 2px;
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.8);
  transition: transform 420ms cubic-bezier(0.23, 1, 0.32, 1);
}
.al-entry-visual .al-photo::after {
  content: "";
  display: block;
  width: 100%; height: 100%;
  border-radius: 1px;
  background: linear-gradient(165deg, #6b5a78 0%, #342b44 55%, #1d1726 100%);
}
.al-entry-visual .al-photo:first-child { left: 4px; top: 3px; transform: rotate(-8deg); }
.al-entry-visual .al-photo:last-child { right: 4px; top: 0; transform: rotate(6deg); }
.album-entry:hover .al-entry-visual .al-photo:first-child { transform: rotate(-11deg) translateY(-2px); }
.album-entry:hover .al-entry-visual .al-photo:last-child { transform: rotate(9deg) translateY(-2px); }
.al-entry-title { font-family: var(--font-display); font-size: clamp(1.2rem, 2.6vw, 1.55rem); letter-spacing: 0.06em; color: #fdf6ef; }
.al-entry-go {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.22em;
  color: #fdf6ef; opacity: 0.92;
  transition: letter-spacing 420ms cubic-bezier(0.23, 1, 0.32, 1);
}
.album-entry:hover .al-entry-go { letter-spacing: 0.3em; }
.al-entry-go i { font-style: normal; transition: transform 420ms cubic-bezier(0.23, 1, 0.32, 1); }
.album-entry:hover .al-entry-go i { transform: translateX(5px); }
@media (max-width: 860px) {
  .album-entry { padding: 22px 18px 18px; }
}

/* ============================================================
   ★ 收成一屏：收紧栏目页的纵向节奏（一页一景的前提）
   —— 只动节奏（留白/字号/行高/图高），不动内容结构
   ============================================================ */
.sky-skin .section-title { margin-bottom: clamp(12px, 2.2vh, 26px); padding: clamp(16px, 2vh, 22px) clamp(18px, 2.4vw, 30px) clamp(12px, 1.6vh, 18px); }
.sky-skin .section-title .zh { font-size: clamp(1.55rem, 3.6vw, 2.35rem); }
.sky-skin .section-title .en { font-size: var(--text-2xs); }
.sky-skin .section-sub { margin-top: 2px; margin-bottom: clamp(14px, 1.9vh, 20px); }
.sky-skin h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
.sky-skin p { line-height: 1.62; }
.sky-skin .counter-card { padding: clamp(12px, 1.9vh, 22px) clamp(16px, 2.2vw, 26px); }
/* 计数器页：底距微收半档（配合去掉了小字，恰好一屏） */
#counter.sky-skin { padding-bottom: clamp(44px, 6.4vh, 60px); }
.sky-skin .counter-card .num { font-size: clamp(2.3rem, 5.6vw, 3.5rem); line-height: 1.02; }
.sky-skin .counter-quote { margin-top: clamp(10px, 1.8vh, 20px); font-size: var(--text-sm); }
.sky-skin .reason-tag,
.sky-skin .wish-item,
.sky-skin .diary-item,
.sky-skin .letter-card { padding: clamp(10px, 1.5vh, 16px) clamp(12px, 1.7vw, 18px); }
.sky-skin .timeline-item { margin-bottom: clamp(16px, 2.8vh, 32px); }
.sky-skin .t-media img,
.sky-skin .t-media video { max-height: 32vh; object-fit: cover; }
.sky-skin .gallery-card { margin-bottom: 0; }
.sky-skin .gallery-drop { margin: clamp(20px, 2.5vw, 34px) auto; }
.sky-skin .page-outro { margin-top: clamp(18px, 3.4vh, 36px); }
.sky-skin .capsule-grid { gap: clamp(10px, 1.6vh, 18px); }

/* 无 JS 时不做分页也不注入星尘——保持可读 */
@media (prefers-reduced-motion: reduce) {
  .sky-skin .sky-field i.tw { animation: none; }
}

/* ============================================================
   ★ 相爱时光 · 时间与空间（2026-10-10）
   用户反馈：「不要这种信封一样的样式感觉」——五块带边框的圆角矩形叠起来
   就是一摞信封。全部拆掉盒子，改用三个意象：
     ① 星轨弧   —— 长曝光的夜空：星星被地球自转拉成同心圆弧，
                   这一张图本身就是「时间刻在空间里」。
     ② 时间轨   —— 一条从上到下由暗转亮的细光，把四段时间串起来；
                   上端是「远 / 过去」，下端是「近 / 此刻」。
     ③ 此刻     —— 秒是唯一还在长的数字：它的节点每秒轻轻跳一下。
   全部只改样式，不动 HTML 结构。
   ============================================================ */
#counter.sky-skin { --rail: clamp(26px, 4vw, 44px); }

/* ① 星轨弧：圆心压在页面下方，几圈极淡的弧扫过整个宽度（长曝光下的星轨） */
#counter.sky-skin .sky-field::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 128% 60% at 50% 156%, transparent 0 96.4%, rgba(255, 214, 224, 0.042) 96.4% 97.1%, transparent 97.1%),
    radial-gradient(ellipse 166% 80% at 50% 156%, transparent 0 97.0%, rgba(255, 206, 214, 0.032) 97.0% 97.6%, transparent 97.6%),
    radial-gradient(ellipse 208% 101% at 50% 156%, transparent 0 97.4%, rgba(255, 200, 210, 0.024) 97.4% 97.9%, transparent 97.9%);
}

/* ② 标题：拆掉信封框，让它直接浮在夜空里 */
#counter.sky-skin .section-title {
  background: none;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0;
  margin-left: auto;      /* 标题盒 max-width:720 且 margin:0 —— 不居中就与下面的时间轨错开 */
  margin-right: auto;
  margin-bottom: clamp(26px, 4.8vh, 56px);
  text-align: center;
}

/* ③ 时间轨：竖着一条由暗到亮的光 */
#counter.sky-skin .counter-grid {
  position: relative;
  padding-left: var(--rail);
  width: fit-content;
  margin: 0 auto;
}
#counter.sky-skin .counter-grid::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  bottom: 0.6em;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(255, 214, 224, 0) 0%,
    rgba(255, 214, 224, 0.16) 18%,
    rgba(255, 200, 178, 0.42) 56%,
    rgba(255, 176, 146, 0.8) 100%);
  box-shadow: 0 0 12px 0 rgba(255, 186, 156, 0.22);
}

/* ④ 四个数字：不再有卡片，只有「数字 + 单位」并排站在轨上 */
#counter.sky-skin .counter-card {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: clamp(7px, 1.35vh, 15px) 0;
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 1.6vw, 18px);
  transform: none;
  transition: none;
}
#counter.sky-skin .counter-card:hover { transform: none; border-color: transparent; box-shadow: none; }
#counter.sky-skin .counter-card::after { content: none; }   /* 旧的悬浮横线退役 */

/* 轨上的节点：天数最暗，越靠近「此刻」越亮 */
#counter.sky-skin .counter-card::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--rail) - 2px);
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 0;
  border-radius: 50%;
  background: #ffdfd0;
  transform: none;
  box-shadow: 0 0 9px 2px rgba(255, 196, 170, 0.38);
  opacity: 0.5;
}
#counter.sky-skin .counter-card:nth-child(2)::before { opacity: 0.62; }
#counter.sky-skin .counter-card:nth-child(3)::before { opacity: 0.76; }
#counter.sky-skin .counter-card:nth-child(4)::before { opacity: 1; }

#counter.sky-skin .counter-card .num {
  font-size: clamp(3rem, 7.4vw, 4.4rem);
  line-height: 0.96;
  color: #fdf6ef;
  text-shadow: 0 0 30px rgba(255, 190, 150, 0.16);
}
#counter.sky-skin .counter-card .lbl {
  display: inline-block;
  margin-top: 0;
  font-size: clamp(11px, 1.25vw, 13px);
  letter-spacing: 0.34em;
  color: rgba(255, 214, 224, 0.52);
}

/* ⑤ 「此刻」：秒的节点每秒轻跳一下，数字带一点暖光 */
#counter.sky-skin .counter-card:last-child::before {
  animation: tick-beat 1s ease-out infinite;
}
@keyframes tick-beat {
  0%   { box-shadow: 0 0 0 0 rgba(255, 190, 160, 0.45), 0 0 9px 2px rgba(255, 196, 170, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 190, 160, 0), 0 0 9px 2px rgba(255, 196, 170, 0.34); }
  100% { box-shadow: 0 0 0 0 rgba(255, 190, 160, 0), 0 0 9px 2px rgba(255, 196, 170, 0.5); }
}
#counter.sky-skin .counter-card:last-child .num {
  color: #fff3e6;
  text-shadow: 0 0 26px rgba(255, 176, 140, 0.42), 0 0 60px rgba(255, 150, 110, 0.16);
}

@media (max-width: 768px) {
  #counter.sky-skin .counter-card { padding: clamp(6px, 1.1vh, 12px) 0; }
  #counter.sky-skin .counter-grid { padding-left: var(--rail); }
}
@media (prefers-reduced-motion: reduce) {
  #counter.sky-skin .counter-card:last-child::before { animation: none; }
}