@charset "UTF-8";
/* ==========================================================================
   glass.css · 玻璃材质体系（全站核心质感）+ 按钮 / 胶囊 / 标签 / 头像 / 骨架
   --------------------------------------------------------------------------
   真正的「液态玻璃」由 6 层叠加而成，缺一层都会塌成「加了个 blur」：
     ① 基底    半透明底色 + 上下渐次透明的线性渐变（光自上方入射）
     ② 折射    backdrop-filter: blur + saturate(180%) + brightness(1.06)
     ③ 棱线    上缘 1px 高光 + 下缘 1px 暗边（模拟玻璃棱线折射）
     ④ 内发光  inset 0 0 40px 柔和粉光（玻璃内部的漫射）
     ⑤ 外阴影  多层柔和阴影（大范围低透明度 + 近距离紧阴影），绝不用单层硬阴影
     ⑥ 流光    ::before 斜向静态高光带 + ::after 极缓折射扫光
   令牌一律引用 tokens.css；本文件内定义的 --glass-* 局部变量仅为本文件私有，
   不属于契约令牌，不与他人冲突。
   ========================================================================== */

/* ==========================================================================
   1. 玻璃基类
   ========================================================================== */

.glass {
  /* ------------------------------------------------------------------------
     局部材质变量（本文件私有，不属契约令牌，不与他人冲突）
     命名约定：
       *-hi / *-lo        棱线的高光与暗边
       *-sheen / *-sheen-alt  折射高光带与扫光的两个色相
       --sheen-rgb        极缓扫光的 RGB 三元组（供 rgba() 组合不同 alpha）
     ------------------------------------------------------------------------ */
  --glass-hi: rgba(255, 255, 255, 0.68);
  --glass-lo: rgba(74, 44, 58, 0.07);
  --glass-sheen: rgba(255, 255, 255, 0.46);
  --glass-sheen-alt: rgba(255, 214, 235, 0.3);
  --glass-sheen-dur: 16s;
  --glass-sheen-delay: 0s;

  position: relative;
  isolation: isolate;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  background-color: var(--glass-bg);
  background-image: var(--grad-glass);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(180%) brightness(1.06);
  backdrop-filter: blur(var(--blur-lg)) saturate(180%) brightness(1.06);
  box-shadow:
    /* ③ 棱线：上缘高光 + 下缘暗边 */
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 var(--glass-lo),
    /* ④ 内发光：柔和粉光漫射 */
    inset 0 0 40px 0 var(--glass-inner-glow),
    /* ⑤ 外阴影：紧阴影定形 + 中程过渡 + 大范围氛围 */
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 1px 2px rgba(90, 45, 66, 0.06),
    0 8px 20px rgba(196, 104, 141, 0.1),
    0 24px 56px rgba(196, 104, 141, 0.13);
  /* 内容可能含全出血媒体，圆角需要裁切以保证玻璃形状完整。
     若某处需要子元素溢出玻璃（如悬浮 tooltip），请用 .glass--overflow 覆盖。 */
  overflow: hidden;
  transition: background-color var(--dur-base) var(--ease-out-soft),
    border-color var(--dur-base) var(--ease-out-soft),
    box-shadow var(--dur-base) var(--ease-out-soft);
}

/* ⑥-1 静态斜向高光带 + 顶部入射光（不参与动画，恒定质感） */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    linear-gradient(
      118deg,
      rgba(255, 255, 255, 0) 14%,
      var(--glass-sheen) 30%,
      rgba(255, 255, 255, 0.06) 40%,
      rgba(255, 255, 255, 0) 54%
    ),
    radial-gradient(
      128% 68% at 50% -14%,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.12) 44%,
      rgba(255, 255, 255, 0) 72%
    );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* ⑥-2 极缓折射扫光：只动 transform/opacity，保证合成层 60fps */
.glass::after {
  content: "";
  position: absolute;
  inset: -30% -50%;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background-image: linear-gradient(
    102deg,
    rgba(255, 255, 255, 0) 44%,
    var(--glass-sheen) 50%,
    var(--glass-sheen-alt) 54%,
    rgba(255, 255, 255, 0) 62%
  );
  background-repeat: no-repeat;
  transform: translate3d(-72%, 0, 0);
  animation: glass-sheen var(--glass-sheen-dur) var(--ease-in-out-soft) infinite;
  animation-delay: var(--glass-sheen-delay);
  will-change: transform, opacity;
}

@keyframes glass-sheen {
  0% {
    transform: translate3d(-72%, 0, 0);
    opacity: 0;
  }
  7% {
    opacity: 0.85;
  }
  46% {
    opacity: 0;
  }
  100% {
    transform: translate3d(72%, 0, 0);
    opacity: 0;
  }
}

/* 内容层：抬到伪元素之上，保证文字/图片永远压得住流光 */
:where(.glass) > :where(*) {
  position: relative;
  z-index: 1;
}

/* 允许子元素溢出玻璃形状（慎用：会露出扫光，需自行 overflow: clip 包裹） */
.glass--overflow {
  overflow: visible;
}

/* ==========================================================================
   2. 强度变体
   ========================================================================== */

/* 强玻璃：更实、更亮、更厚，用于主标题卡 / 计时器 / 灯箱工具栏 */
.glass--strong {
  --glass-hi: rgba(255, 255, 255, 0.82);
  --glass-sheen: rgba(255, 255, 255, 0.56);
  --glass-sheen-alt: rgba(255, 214, 235, 0.36);
  --glass-sheen-dur: 19s;

  background-color: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(190%) brightness(1.08);
  backdrop-filter: blur(var(--blur-xl)) saturate(190%) brightness(1.08);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 var(--glass-lo),
    inset 0 0 52px 0 var(--glass-inner-glow),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 2px 4px rgba(90, 45, 66, 0.07),
    0 12px 28px rgba(196, 104, 141, 0.12),
    0 34px 72px rgba(196, 104, 141, 0.16);
}

/* 软玻璃：轻、透、克制，用于次要卡片 / 标签栏 / 页脚 */
.glass--soft {
  --glass-hi: rgba(255, 255, 255, 0.56);
  --glass-lo: rgba(74, 44, 58, 0.05);
  --glass-sheen: rgba(255, 255, 255, 0.32);
  --glass-sheen-alt: rgba(255, 214, 235, 0.2);
  --glass-sheen-dur: 22s;

  border-color: rgba(255, 255, 255, 0.52);
  background-color: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(170%) brightness(1.05);
  backdrop-filter: blur(var(--blur-md)) saturate(170%) brightness(1.05);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 0 32px 0 var(--glass-inner-glow),
    0 1px 2px rgba(90, 45, 66, 0.05),
    0 10px 24px rgba(196, 104, 141, 0.08);
}

/* 让相邻卡片的扫光错峰，避免整屏同步呼吸（「液态」的关键） */
:where(.tl-item, .tl-group, .glass-item):nth-child(2n) .glass {
  --glass-sheen-delay: 5.5s;
}

:where(.tl-item, .tl-group, .glass-item):nth-child(3n) .glass {
  --glass-sheen-delay: 9.5s;
}

/* ==========================================================================
   3. 降级：不支持 backdrop-filter 时改用不透明度补偿，保证可读性
   ========================================================================== */

@supports not ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
  .glass {
    background-color: rgba(255, 255, 255, 0.9);
  }

  .glass--strong {
    background-color: rgba(255, 255, 255, 0.96);
  }

  .glass--soft {
    background-color: rgba(255, 255, 255, 0.82);
    border-color: rgba(255, 255, 255, 0.7);
  }

  .btn,
  .chip,
  .badge,
  .avatar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .btn {
    background-color: rgba(255, 255, 255, 0.94);
  }

  .chip {
    background-color: rgba(255, 255, 255, 0.9);
  }

  html[data-theme="dark"] .glass {
    background-color: rgba(48, 29, 41, 0.94);
  }

  html[data-theme="dark"] .glass--strong {
    background-color: rgba(56, 34, 48, 0.97);
  }

  html[data-theme="dark"] .glass--soft {
    background-color: rgba(44, 26, 38, 0.86);
  }

  html[data-theme="dark"] .btn {
    background-color: rgba(60, 36, 50, 0.95);
  }

  html[data-theme="dark"] .chip {
    background-color: rgba(56, 34, 48, 0.92);
  }
}

/* ==========================================================================
   4. 深色主题 · 夜色玫瑰材质
   ========================================================================== */

html[data-theme="dark"] .glass {
  --glass-hi: rgba(255, 214, 235, 0.26);
  --glass-lo: rgba(10, 4, 10, 0.5);
  --glass-sheen: rgba(255, 214, 235, 0.2);
  --glass-sheen-alt: rgba(var(--glow-rgb), 0.16);

  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 var(--glass-lo),
    inset 0 0 44px 0 var(--glass-inner-glow),
    inset 0 0 0 1px rgba(255, 214, 235, 0.06),
    0 2px 4px rgba(8, 3, 8, 0.4),
    0 12px 28px rgba(8, 3, 8, 0.46),
    0 30px 66px rgba(8, 3, 8, 0.55);
}

html[data-theme="dark"] .glass--strong {
  --glass-hi: rgba(255, 220, 240, 0.34);
  --glass-sheen: rgba(255, 214, 235, 0.26);
}

html[data-theme="dark"] .glass--soft {
  --glass-hi: rgba(255, 214, 235, 0.2);
  --glass-sheen: rgba(255, 214, 235, 0.14);

  border-color: rgba(255, 198, 226, 0.18);
  background-color: rgba(64, 36, 52, 0.4);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 0 34px 0 var(--glass-inner-glow),
    0 1px 2px rgba(8, 3, 8, 0.35),
    0 10px 24px rgba(8, 3, 8, 0.4);
}

/* ==========================================================================
   5. 按钮体系
   ========================================================================== */

.btn {
  /* 主按钮渐变取更深的玫瑰段，配深梅色文字 → 对比度全段 ≥ 4.5:1 */
  --btn-grad-primary: linear-gradient(150deg, #ff8bb8 0%, #ff6fa5 44%, #e8518a 100%);
  --btn-ink-primary: #3b1226;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0 var(--sp-5);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-full);
  color: var(--c-ink-900);
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background-color: var(--glass-bg-strong);
  background-image: var(--grad-glass);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(170%) brightness(1.05);
  backdrop-filter: blur(var(--blur-md)) saturate(170%) brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(74, 44, 58, 0.06),
    0 1px 2px rgba(90, 45, 66, 0.07),
    0 8px 18px rgba(196, 104, 141, 0.12);
  transform: translate3d(0, 0, 0);
  transition: transform var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-out-soft),
    background-color var(--dur-base) var(--ease-out-soft),
    border-color var(--dur-base) var(--ease-out-soft),
    color var(--dur-fast) var(--ease-out-soft);
}

/* 按压高光：从指尖位置泛起的柔光（按钮内部，不参与布局） */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background-image: radial-gradient(
    90% 120% at 50% 118%,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(255, 255, 255, 0) 66%
  );
  transition: opacity var(--dur-fast) var(--ease-out-soft);
}

.btn:hover {
  border-color: rgba(255, 255, 255, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(74, 44, 58, 0.06),
    0 2px 4px rgba(90, 45, 66, 0.08),
    0 12px 26px rgba(196, 104, 141, 0.17);
}

.btn:active {
  transform: scale(0.955);
  transition-duration: calc(90ms * var(--motion-scale));
  box-shadow:
    inset 0 2px 6px rgba(74, 44, 58, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 6px rgba(90, 45, 66, 0.1);
}

.btn:active::after {
  opacity: 1;
  transition-duration: calc(60ms * var(--motion-scale));
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* 主按钮 */
.btn--primary {
  border-color: rgba(255, 255, 255, 0.52);
  color: var(--btn-ink-primary);
  background-color: transparent;
  background-image: var(--btn-grad-primary);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -1px 0 rgba(120, 30, 66, 0.24),
    0 2px 4px rgba(150, 60, 100, 0.16),
    0 10px 24px rgba(232, 81, 138, 0.28),
    0 18px 46px rgba(232, 81, 138, 0.18);
}

.btn--primary:hover {
  border-color: rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(120, 30, 66, 0.24),
    0 3px 6px rgba(150, 60, 100, 0.18),
    0 14px 30px rgba(232, 81, 138, 0.34),
    0 22px 56px rgba(232, 81, 138, 0.22);
}

.btn--primary:active {
  box-shadow:
    inset 0 3px 8px rgba(120, 30, 66, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 6px rgba(150, 60, 100, 0.2);
}

html[data-theme="dark"] .btn--primary {
  --btn-grad-primary: linear-gradient(150deg, #ffc2de 0%, #ff9fca 46%, #d2689c 100%);
  --btn-ink-primary: #3a1122;

  border-color: rgba(255, 214, 235, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 250, 0.5),
    inset 0 -1px 0 rgba(60, 12, 34, 0.3),
    0 2px 6px rgba(8, 3, 8, 0.4),
    0 12px 30px rgba(var(--glow-rgb), 0.24),
    0 22px 54px rgba(var(--glow-rgb), 0.16);
}

/* 幽灵按钮：只有描边与弱底，用于次要动作 / 关闭 */
.btn--ghost {
  color: var(--c-ink-700);
  background-color: rgba(255, 255, 255, 0.24);
  background-image: none;
  border-color: var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 1px 2px rgba(90, 45, 66, 0.05);
}

.btn--ghost:hover {
  color: var(--c-ink-900);
  background-color: rgba(255, 255, 255, 0.42);
  border-color: var(--c-rose-300);
}

.btn--ghost:active {
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 2px 6px rgba(74, 44, 58, 0.12);
}

html[data-theme="dark"] .btn--ghost {
  color: var(--c-ink-700);
  background-color: rgba(255, 214, 235, 0.08);
}

html[data-theme="dark"] .btn--ghost:hover {
  color: var(--c-ink-900);
  background-color: rgba(255, 214, 235, 0.16);
  border-color: rgba(var(--glow-rgb), 0.4);
}

/* 图标按钮：正方形热区，永远 ≥ --tap-min */
.btn--icon {
  width: var(--tap-min);
  min-width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border-radius: var(--r-full);
  font-size: var(--fs-lg);
}

/* 尺寸修饰 */
.btn--sm {
  min-height: var(--tap-min);
  padding: 0 var(--sp-4);
  font-size: var(--fs-xs);
}

.btn--lg {
  min-height: 52px;
  padding: 0 var(--sp-7);
  font-size: var(--fs-md);
}

.btn--block {
  display: flex;
  width: 100%;
}

/* ==========================================================================
   6. 胶囊筛选 / 标签 / 徽章
   ========================================================================== */

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0 var(--sp-4);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-full);
  color: var(--c-ink-700);
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background-color: rgba(255, 255, 255, 0.44);
  background-image: var(--grad-glass);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(160%) brightness(1.04);
  backdrop-filter: blur(var(--blur-sm)) saturate(160%) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 1px 2px rgba(90, 45, 66, 0.05),
    0 6px 14px rgba(196, 104, 141, 0.08);
  transform: translate3d(0, 0, 0);
  transition: transform var(--dur-fast) var(--ease-spring),
    color var(--dur-fast) var(--ease-out-soft),
    background-color var(--dur-base) var(--ease-out-soft),
    border-color var(--dur-base) var(--ease-out-soft),
    box-shadow var(--dur-base) var(--ease-out-soft);
}

.chip:hover {
  color: var(--c-ink-900);
  border-color: var(--c-rose-300);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 2px 4px rgba(90, 45, 66, 0.06),
    0 10px 22px rgba(196, 104, 141, 0.14);
}

.chip:active {
  transform: scale(0.96);
  transition-duration: calc(90ms * var(--motion-scale));
}

.chip.is-active,
.chip[aria-pressed="true"],
.chip[aria-selected="true"] {
  border-color: rgba(255, 255, 255, 0.56);
  color: var(--btn-ink-primary, #3b1226);
  font-weight: 600;
  background-color: transparent;
  background-image: linear-gradient(150deg, #ffa3c6 0%, #ff7cb0 48%, #ee5c95 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.66),
    inset 0 -1px 0 rgba(120, 30, 66, 0.22),
    0 2px 4px rgba(150, 60, 100, 0.16),
    0 10px 22px rgba(232, 81, 138, 0.26),
    0 0 0 4px rgba(var(--glow-rgb), 0.14);
}

html[data-theme="dark"] .chip {
  color: var(--c-ink-700);
  background-color: rgba(255, 214, 235, 0.08);
}

html[data-theme="dark"] .chip:hover {
  color: var(--c-ink-900);
  background-color: rgba(255, 214, 235, 0.14);
  border-color: rgba(var(--glow-rgb), 0.38);
}

html[data-theme="dark"] .chip.is-active,
html[data-theme="dark"] .chip[aria-pressed="true"],
html[data-theme="dark"] .chip[aria-selected="true"] {
  color: #3a1122;
  background-image: linear-gradient(150deg, #ffc2de 0%, #ff9fca 50%, #dd7cab 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 250, 0.5),
    inset 0 -1px 0 rgba(60, 12, 34, 0.26),
    0 2px 6px rgba(8, 3, 8, 0.4),
    0 10px 26px rgba(var(--glow-rgb), 0.2),
    0 0 0 4px rgba(var(--glow-rgb), 0.1);
}

/* 标签（非交互，用于 #日常 之类） */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 28px;
  padding: 0 var(--sp-3);
  border: 1px solid rgba(255, 172, 203, 0.45);
  border-radius: var(--r-full);
  color: var(--c-ink-700);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  background-color: rgba(255, 228, 238, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: color var(--dur-fast) var(--ease-out-soft),
    background-color var(--dur-fast) var(--ease-out-soft),
    border-color var(--dur-fast) var(--ease-out-soft);
}

a.tag,
button.tag {
  min-height: var(--tap-min);
  cursor: pointer;
}

a.tag:hover,
button.tag:hover {
  color: var(--c-ink-900);
  background-color: rgba(255, 201, 219, 0.6);
  border-color: var(--c-rose-400);
}

html[data-theme="dark"] .tag {
  color: var(--c-ink-700);
  border-color: rgba(var(--glow-rgb), 0.28);
  background-color: rgba(var(--glow-rgb), 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 214, 235, 0.12);
}

/* 徽章：卡片上的「纪念日 / 起点」小标记 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 26px;
  padding: 0 var(--sp-3);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--r-full);
  color: var(--btn-ink-primary, #3b1226);
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
  background-color: transparent;
  background-image: linear-gradient(140deg, #ffd3e2 0%, #ffb3d0 52%, #f4a7c4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 3px rgba(150, 60, 100, 0.14),
    0 4px 12px rgba(232, 81, 138, 0.18);
}

.badge--gold {
  background-image: linear-gradient(140deg, #f7dccd 0%, #e8b4a0 60%, #d69a83 100%);
  color: #4a2418;
}

.badge--lilac {
  background-image: linear-gradient(140deg, #ece5ff 0%, #d6c6fb 60%, #c0a8f2 100%);
  color: #3a2a5c;
}

.badge--ghost {
  color: var(--c-ink-700);
  background-image: none;
  background-color: rgba(255, 255, 255, 0.4);
  border-color: var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] .badge {
  color: #3a1122;
  border-color: rgba(255, 214, 235, 0.34);
}

html[data-theme="dark"] .badge--gold {
  color: #3a2118;
}

html[data-theme="dark"] .badge--lilac {
  color: #2c2145;
}

html[data-theme="dark"] .badge--ghost {
  color: var(--c-ink-700);
  background-color: rgba(255, 214, 235, 0.1);
  border-color: rgba(255, 198, 226, 0.2);
}

/* ==========================================================================
   7. 头像（粉金渐变描边环 + 外发光）
   ========================================================================== */

.avatar {
  --avatar-size: 76px;
  --avatar-ring: linear-gradient(150deg, #ffd3e2 0%, #ff8bb8 38%, #e8b4a0 74%, #f3ccb6 100%);

  width: var(--avatar-size);
  height: var(--avatar-size);
  /* padding + 渐变背景 = 干净的渐变描边环（img 无法用伪元素做内发光，故用外发光代替） */
  padding: 3px;
  border: 0;
  border-radius: var(--r-full);
  object-fit: cover;
  object-position: center 28%;
  background-color: var(--c-cream-100);
  background-image: var(--avatar-ring);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.7),
    0 0 0 4px rgba(232, 180, 160, 0.3),
    0 6px 16px rgba(150, 60, 100, 0.18),
    0 0 26px rgba(var(--glow-rgb), 0.34),
    0 0 46px rgba(var(--glow-rgb), 0.18);
  transition: transform var(--dur-base) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-out-soft);
}

.avatar--her {
  --avatar-ring: linear-gradient(150deg, #ffe4ee 0%, #ff8bb8 42%, #ff6fa5 70%, #f3ccb6 100%);
}

.avatar--him {
  --avatar-ring: linear-gradient(150deg, #fdf1e8 0%, #e8b4a0 40%, #d6c6fb 76%, #c0a8f2 100%);
}

.avatar--sm {
  --avatar-size: 40px;
}

.avatar--lg {
  --avatar-size: 104px;
}

.avatar:hover {
  transform: translate3d(0, -2px, 0) scale(1.03);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.8),
    0 0 0 4px rgba(232, 180, 160, 0.38),
    0 10px 22px rgba(150, 60, 100, 0.22),
    0 0 32px rgba(var(--glow-rgb), 0.44),
    0 0 58px rgba(var(--glow-rgb), 0.24);
}

html[data-theme="dark"] .avatar {
  background-color: var(--c-cream-100);
  box-shadow:
    0 0 0 1px rgba(255, 214, 235, 0.28),
    0 0 0 4px rgba(232, 180, 160, 0.22),
    0 8px 20px rgba(8, 3, 8, 0.46),
    0 0 30px rgba(var(--glow-rgb), 0.28),
    0 0 54px rgba(var(--glow-rgb), 0.14);
}

/* ==========================================================================
   8. 心跳爱心（.heart）
   --------------------------------------------------------------------------
   供 t8「头像间粉线 + 心跳红爱心」使用，是设计系统的通用装饰件。
   为什么放在这里：颜色令牌若不配任何消费者就是死代码（我们刚清掉过 --glass-bloom
   这类死变量），所以这里一并提供带心跳动画的实现，让 --c-heart / --c-heart-rgb
   有真实用途，engineer-ui 直接套类名即可，无需自己写红色。
   用 SVG mask 画心形（无图片请求、任意缩放不失真、可任意上色）。
   可访问性：它通常是装饰，请配合 aria-hidden="true" 使用。
   ========================================================================== */

.heart {
  display: inline-block;
  width: var(--heart-size, 22px);
  height: var(--heart-size, 22px);
  flex: 0 0 auto;
  background-color: var(--c-heart);
  /* 心形轮廓：SVG data-URI 作为 mask，实际颜色由 background-color 决定 */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.7-9.6-9.2C.7 8.3 2.6 4.6 6.1 4c2.2-.4 4.3.7 5.9 2.6C13.6 4.7 15.7 3.6 17.9 4c3.5.6 5.4 4.3 3.7 7.8C19.5 16.3 12 21 12 21z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.7-9.6-9.2C.7 8.3 2.6 4.6 6.1 4c2.2-.4 4.3.7 5.9 2.6C13.6 4.7 15.7 3.6 17.9 4c3.5.6 5.4 4.3 3.7 7.8C19.5 16.3 12 21 12 21z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  /* 心跳：只动 transform / opacity / 光晕，走合成层，稳定 60fps */
  transform-origin: 50% 55%;
  filter: drop-shadow(0 0 6px rgba(var(--c-heart-rgb), 0.5));
  animation: heart-beat 1.6s var(--ease-in-out-soft) infinite;
  will-change: transform;
}

/* 心跳节奏：两下「咚·咚」再停一拍，像真实心跳而非匀速呼吸 */
@keyframes heart-beat {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 5px rgba(var(--c-heart-rgb), 0.42));
  }
  12% {
    transform: scale(1.22);
    filter: drop-shadow(0 0 12px rgba(var(--c-heart-rgb), 0.7));
  }
  24% {
    transform: scale(0.98);
    filter: drop-shadow(0 0 5px rgba(var(--c-heart-rgb), 0.4));
  }
  36% {
    transform: scale(1.14);
    filter: drop-shadow(0 0 9px rgba(var(--c-heart-rgb), 0.6));
  }
  52% {
    transform: scale(1);
    filter: drop-shadow(0 0 5px rgba(var(--c-heart-rgb), 0.42));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 5px rgba(var(--c-heart-rgb), 0.42));
  }
}

/* 尺寸修饰（头像之间用 --sm 即可，不抢主体） */
.heart--sm {
  --heart-size: 14px;
}

.heart--lg {
  --heart-size: 30px;
}

/* 静音版：不需要跳动的场景（如卡片角标） */
.heart--still {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .heart {
    animation: none;
    filter: drop-shadow(0 0 5px rgba(var(--c-heart-rgb), 0.42));
  }
}

/* ==========================================================================
   9. 头像间的粉色连线（.heart-line）
   --------------------------------------------------------------------------
   t8 要求「头像之间粉线 + 心跳爱心」。这里提供一条带渐变与流动高光的细线，
   由左侧头像指向右侧头像，中间可容纳 .heart。
   ========================================================================== */

.heart-line {
  --heart-line-w: 64px;
  position: relative;
  display: inline-block;
  width: var(--heart-line-w);
  height: 2px;
  flex: 0 0 auto;
  border-radius: var(--r-full);
  /* 两端淡出，中间稍实，像是两人之间的一段连结而非硬直线 */
  background-image: linear-gradient(
    90deg,
    rgba(var(--c-heart-rgb), 0) 0%,
    rgba(var(--c-heart-rgb), 0.45) 22%,
    rgba(var(--c-heart-rgb), 0.85) 50%,
    rgba(var(--c-heart-rgb), 0.45) 78%,
    rgba(var(--c-heart-rgb), 0) 100%
  );
  overflow: hidden;
}

/* 流动高光：暗示「我们之间一直在流动」 */
.heart-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0) 58%
  );
  transform: translate3d(-100%, 0, 0);
  animation: heart-line-flow 3.2s var(--ease-in-out-soft) infinite;
  will-change: transform;
}

@keyframes heart-line-flow {
  0% {
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .heart-line::after {
    animation: none;
    opacity: 0;
  }
}

/* ==========================================================================
   10. 骨架屏（含 shimmer）
   ========================================================================== */

.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  background-color: var(--c-rose-100);
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.06) 20%,
    rgba(255, 255, 255, 0.5) 46%,
    rgba(255, 255, 255, 0.06) 72%
  );
  background-repeat: no-repeat;
  background-size: 220% 100%;
  background-position: -120% 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  animation: skeleton-shimmer 1.8s var(--ease-in-out-soft) infinite;
  will-change: background-position;
}

.skeleton--text {
  height: 1em;
  margin: 0.42em 0;
  border-radius: var(--r-full);
}

.skeleton--text:last-child {
  width: 62%;
}

.skeleton--media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
}

.skeleton--avatar {
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--r-full);
}

.skeleton--title {
  width: 46%;
  height: 1.4em;
  margin-bottom: var(--sp-3);
  border-radius: var(--r-sm);
}

@keyframes skeleton-shimmer {
  0% {
    background-position: -120% 0;
  }
  100% {
    background-position: 220% 0;
  }
}

html[data-theme="dark"] .skeleton {
  background-color: var(--c-rose-100);
  background-image: linear-gradient(
    100deg,
    rgba(255, 214, 235, 0.04) 20%,
    rgba(255, 214, 235, 0.16) 46%,
    rgba(255, 214, 235, 0.04) 72%
  );
  box-shadow: inset 0 1px 0 rgba(255, 214, 235, 0.1);
}

/* ==========================================================================
   9. 动效偏好：关闭流光、扫光、shimmer
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .glass::after,
  .skeleton {
    animation: none;
  }

  .glass::after {
    opacity: 0;
  }

  .skeleton {
    background-position: 0 0;
    will-change: auto;
  }

  .btn:active,
  .chip:active,
  .avatar:hover {
    transform: none;
  }
}