/* ===== 复古恋爱记录 · 揉皱纸感风格 ===== */

:root {
  /* 板栗色阶：全站的边框 / 按键 / 强调色 */
  --chest-50:  #fbf4ef;
  --chest-100: #f5e7db;
  --chest-200: #ebd2bf;
  --chest-300: #dab498;
  --chest-400: #c48c68;
  --chest-500: #a8683f;
  --chest-600: #7f4526;
  --ink:      #3a2b20;
  --ink-soft: #7d6654;
  --white:    #ffffff;

  /* 米黄纸底 */
  --paper-tint: #f0e5c4;
  --beige-50:  #faf6ee;
  --beige-100: #f3ebdc;
  --beige-200: #e8dbc4;
  --beige-300: #d9c7a6;

  /* 揉皱纸纹：feTurbulence 生成凹凸，feDiffuseLighting 打光成褶皱明暗 */
  --paper-img:
    linear-gradient(rgba(245, 237, 211, 0.32), rgba(245, 237, 211, 0.32)),
    radial-gradient(58% 44% at 16% 8%, rgba(255, 253, 242, 0.5), rgba(255, 253, 242, 0) 68%),
    radial-gradient(54% 40% at 84% 86%, rgba(146, 110, 62, 0.16), rgba(146, 110, 62, 0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='p' filterUnits='userSpaceOnUse' x='0' y='0' width='640' height='640'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.007' numOctaves='6' seed='9' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23fffaf0' surfaceScale='4.2' diffuseConstant='1.1'%3E%3CfeDistantLight azimuth='235' elevation='45'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23p)'/%3E%3C/svg%3E");
  --paper-size: 100% 100%, 100% 100%, 100% 100%, 640px 640px;
  --paper-repeat: no-repeat, no-repeat, no-repeat, repeat;

  --radius: 28px;
  --shadow: 0 18px 45px rgba(122, 62, 32, 0.16);
  --shadow-sm: 0 6px 18px rgba(122, 62, 32, 0.13);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px calc(24px + env(safe-area-inset-bottom));
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
  color: var(--ink);
  background-color: var(--paper-tint);
  background-image: var(--paper-img);
  background-size: var(--paper-size);
  background-repeat: var(--paper-repeat);
  overflow-x: hidden;
}

/* ===== 背景光斑 ===== */
.bg-blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

.blob-1 {
  width: 300px;
  height: 300px;
  top: -90px;
  left: -80px;
  background: var(--beige-300);
  animation: float 14s ease-in-out infinite;
}

.blob-2 {
  width: 260px;
  height: 260px;
  bottom: -100px;
  right: -70px;
  background: var(--beige-200);
  animation: float 18s ease-in-out infinite reverse;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(18px, -22px) scale(1.08); }
}

/* ===== 卡片 ===== */
.card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  padding: 40px 26px 28px;
  text-align: center;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--chest-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  animation: rise 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

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

.eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--chest-500);
  font-weight: 600;
}

.title {
  margin: 0 0 26px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink);
}

/* ===== 天数主体 ===== */
.days-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  line-height: 1;
}

.days {
  display: inline-block;
  font-size: clamp(64px, 22vw, 92px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--chest-600);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 10px 26px rgba(168, 104, 63, 0.28);
}

.unit {
  font-size: 20px;
  font-weight: 600;
  color: var(--chest-500);
}

.breakdown {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  min-height: 24px;
}

.breakdown b {
  color: var(--chest-600);
  font-weight: 600;
}

/* 心跳动画（天数变化时触发） */
.days.pop {
  animation: pop 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}

/* ===== 日期设置 ===== */
.setter {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px dashed var(--chest-200);
}

.label {
  display: block;
  margin-bottom: 10px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.date-input {
  width: 100%;
  padding: 13px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  text-align: center;
  background: var(--chest-50);
  border: 1px solid var(--chest-200);
  border-radius: 14px;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
  -webkit-appearance: none;
  appearance: none;
}

.date-input:focus {
  background: var(--white);
  border-color: var(--chest-400);
  box-shadow: 0 0 0 4px rgba(198, 143, 108, 0.22);
}

.hint {
  margin: 10px 0 0;
  min-height: 18px;
  font-size: 12px;
  color: var(--chest-500);
}

.hint.warn {
  color: #e2795f;
}

/* ===== 页脚 ===== */
.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 26px;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  opacity: 0.85;
}

.heart {
  color: var(--chest-400);
  font-size: 13px;
  animation: beat 1.8s ease-in-out infinite;
}

@keyframes beat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}

/* ===== 小屏微调 ===== */
@media (max-width: 360px) {
  .card { padding: 32px 20px 24px; }
  .title { font-size: 18px; }
}

/* 尊重「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== 页面容器（多张卡片纵向排列） ===== */
.page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ===== 恋爱日记 ===== */
.title-sm {
  font-size: 18px;
  margin-bottom: 8px;
}

.diary-count {
  margin: 0 0 24px;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.diary-form {
  text-align: left;
}

/* --- 心情选择 --- */
.mood-row {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}

.mood {
  position: relative;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.mood input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.mood span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 0;
  font-size: 21px;
  line-height: 1;
  background: var(--chest-50);
  border: 1px solid var(--chest-200);
  border-radius: 14px;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.mood input:checked + span {
  background: var(--chest-100);
  border-color: var(--chest-400);
  box-shadow: 0 0 0 3px rgba(198, 143, 108, 0.22);
}

.mood input:focus-visible + span {
  border-color: var(--chest-500);
  box-shadow: 0 0 0 3px rgba(168, 104, 63, 0.3);
}

/* --- 输入区 --- */
.diary-form .date-input {
  margin-bottom: 18px;
}

.diary-text {
  display: block;
  width: 100%;
  min-height: 100px;
  padding: 13px 14px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--chest-50);
  border: 1px solid var(--chest-200);
  border-radius: 14px;
  outline: none;
  resize: vertical;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}

.diary-text::placeholder {
  color: #9db8ae;
}

.diary-text:focus {
  background: var(--white);
  border-color: var(--chest-400);
  box-shadow: 0 0 0 4px rgba(198, 143, 108, 0.22);
}

.diary-save {
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--white);
  background: linear-gradient(135deg, var(--chest-400), var(--chest-600));
  border: none;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: filter 0.25s, transform 0.15s;
}

.diary-save:hover {
  filter: brightness(1.05);
}

.diary-save:active {
  transform: scale(0.98);
}

/* --- 日记列表 --- */
.diary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.entry {
  padding: 16px 0;
  border-top: 1px dashed var(--chest-200);
}

.diary-list .entry:first-child {
  margin-top: 24px;
}

.entry-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.entry-mood {
  font-size: 17px;
  line-height: 1;
}

.entry-date {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--chest-600);
}

.entry-week {
  font-size: 11.5px;
  color: var(--ink-soft);
  opacity: 0.8;
}

.entry-del {
  margin-left: auto;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--chest-200);
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.entry-del:hover,
.entry-del.armed {
  color: #e2795f;
  border-color: #f2c4b6;
  background: #fdf3f0;
}

.entry-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.diary-empty {
  margin: 24px 0 0;
  padding-top: 22px;
  border-top: 1px dashed var(--chest-200);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.diary-empty[hidden] {
  display: 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;
}

/* ===== 相册 ===== */
.album-count {
  margin: 0 0 24px;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.album-upload {
  position: relative;
  display: block;
  padding: 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--chest-600);
  background: var(--chest-50);
  border: 1px dashed var(--chest-300);
  border-radius: 16px;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.album-upload:hover,
.album-upload:focus-within {
  background: var(--chest-100);
  border-color: var(--chest-400);
  box-shadow: 0 0 0 4px rgba(198, 143, 108, 0.22);
}

.album-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 18px;
}

.album-grid:empty {
  display: none;
}

.tile {
  padding: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--chest-100);
  border: 1px solid var(--chest-200);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.tile:hover {
  border-color: var(--chest-400);
  box-shadow: var(--shadow-sm);
}

.tile:active {
  transform: scale(0.97);
}

.tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.album-empty {
  margin: 24px 0 0;
  padding-top: 22px;
  border-top: 1px dashed var(--chest-200);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.album-empty[hidden] {
  display: none;
}

/* ===== 大图查看 ===== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px 18px calc(24px + env(safe-area-inset-bottom));
  background: rgba(45, 29, 18, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade 0.25s ease both;
}

.lightbox[hidden] {
  display: none;
}

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lightbox-img {
  max-width: 100%;
  max-height: 72vh;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.lightbox-bar {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lightbox-date {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.75);
}

.lightbox-close,
.lightbox-del {
  font-family: inherit;
  color: var(--white);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.lightbox-close {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  right: 16px;
  width: 38px;
  height: 38px;
  font-size: 20px;
  line-height: 1;
  border-radius: 50%;
}

.lightbox-del {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 12px;
}

.lightbox-close:hover,
.lightbox-del:hover,
.lightbox-del.armed {
  background: rgba(242, 140, 110, 0.35);
  border-color: rgba(242, 140, 110, 0.6);
}

/* ===== 登录门禁 ===== */
/* 未登录：藏起主页，露出门禁；已登录：反过来 */
html:not(.is-logged-in) .page {
  display: none;
}

html.is-logged-in .login-gate {
  display: none;
}

.login-gate {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  padding: 24px 18px calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
  background-color: var(--paper-tint);
  background-image: var(--paper-img);
  background-size: var(--paper-size);
  background-repeat: var(--paper-repeat);
}

.gate-card {
  flex: none;
  margin: auto;                 /* 配合 overflow，内容超高时不会被裁掉顶部 */
}

.gate-sub {
  margin: 0 0 22px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* --- 身份二选一 --- */
.role-row {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.role {
  position: relative;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.role input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.role span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 16px 8px;
  background: var(--chest-50);
  border: 1px solid var(--chest-200);
  border-radius: 18px;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.role input:checked + span {
  background: var(--chest-100);
  border-color: var(--chest-400);
  box-shadow: 0 0 0 3px rgba(198, 143, 108, 0.22);
}

.role input:focus-visible + span {
  border-color: var(--chest-500);
  box-shadow: 0 0 0 3px rgba(168, 104, 63, 0.3);
}

.role-emoji,
.role-name {
  font-style: normal;          /* 抵消 em 标签的斜体 */
  line-height: 1;
}

.role-emoji {
  font-size: 26px;
}

.role-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--chest-600);
}

.nickname-input {
  margin-bottom: 4px;
}

.gate-submit {
  margin-top: 14px;
}

/* ===== 顶部身份栏 ===== */
.user-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--chest-200);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.user-emoji {
  font-size: 18px;
  line-height: 1;
}

.user-text {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.user-text b {
  flex: none;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--chest-600);
  background: var(--chest-100);
  border-radius: 8px;
}

.user-text i {
  font-style: normal;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logout-btn {
  flex: none;
  padding: 7px 13px;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--chest-200);
  border-radius: 12px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.logout-btn:hover,
.logout-btn.armed {
  color: #e2795f;
  border-color: #f2c4b6;
  background: #fdf3f0;
}

/* ===== 日记里的作者标签 ===== */
.entry-head {
  flex-wrap: wrap;             /* 窄屏兜底，避免作者标签把行挤爆 */
}

.entry-author {
  min-width: 0;
  flex-shrink: 1;
  max-width: 96px;
  padding: 2px 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--chest-600);
  background: var(--chest-100);
  border-radius: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== 日记表单里的「以谁的身份记录」 ===== */
.diary-author {
  margin: 14px 0 0;
  padding: 9px 12px;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  text-align: center;
  background: var(--chest-50);
  border: 1px dashed var(--chest-300);
  border-radius: 12px;
}

.diary-author b {
  color: var(--chest-600);
  font-weight: 600;
}

.diary-author[hidden] {
  display: none;
}

/* 提示条出现后，保存按钮的上间距收一点 */
.diary-author:not([hidden]) + .diary-save {
  margin-top: 12px;
}

/* ===== 首页：复古 CD 机 ===== */
.home {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.cd-stage {
  margin: 0;
  padding: 0 8px;              /* 留一点边，避免阴影贴边被裁 */
  animation: rise 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.cd-img {
  display: block;
  width: 100%;
  aspect-ratio: 920 / 590;  /* 与 ccd.svg 的 viewBox 一致，不留白边 */
  object-fit: contain;
}

/* ===== 三个磨砂插件 ===== */
.plugin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.plugin {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 20px 6px;
  font-family: inherit;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 22px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(150, 120, 80, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: transform 0.2s, box-shadow 0.25s, background 0.25s;
}

.plugin:hover,
.plugin:focus-visible {
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 12px 30px rgba(150, 120, 80, 0.18),
              inset 0 1px 0 rgba(255, 255, 255, 0.9);
  outline: none;
}

.plugin:active {
  transform: scale(0.96);
}

.plugin-icon {
  font-size: 26px;
  line-height: 1;
}

.plugin-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ===== 模块页（点插件后展开） ===== */
.sheet {
  display: none;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

/* 打开任意模块时，首页让位 */
html[data-view="days"] .home,
html[data-view="diary"] .home,
html[data-view="album"] .home {
  display: none;
}

html[data-view="days"] #sheetDays,
html[data-view="diary"] #sheetDiary,
html[data-view="album"] #sheetAlbum {
  display: flex;
}

.sheet-back {
  align-self: flex-start;
  padding: 8px 15px;
  font-family: inherit;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(150, 120, 80, 0.1);
  transition: background 0.25s, color 0.2s;
}

.sheet-back:hover {
  background: rgba(255, 255, 255, 0.64);
  color: var(--ink);
}

/* ===== 登录页：挑选头像 ===== */
.avatar-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 18px 0 11px;
  text-align: left;
}

.avatar-preview {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  font-size: 23px;
  line-height: 1;
  overflow: hidden;
  background: var(--chest-50);
  border: 1px solid var(--chest-200);
  border-radius: 50%;
}

.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-title {
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-bottom: 13px;
}

.avatar-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  font-family: inherit;
  font-size: 19px;
  line-height: 1;
  overflow: hidden;
  background: var(--chest-50);
  border: 1px solid var(--chest-200);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

/* 颜文字占两格，字号收一点才放得下 */
.avatar-opt.kao {
  grid-column: span 2;
  font-size: 11px;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.avatar-opt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-opt.on {
  background: var(--chest-100);
  border-color: var(--chest-400);
  box-shadow: 0 0 0 3px rgba(198, 143, 108, 0.22);
}

.avatar-opt:focus-visible {
  outline: none;
  border-color: var(--chest-500);
  box-shadow: 0 0 0 3px rgba(168, 104, 63, 0.3);
}

.avatar-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  padding: 11px 14px;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--chest-600);
  background: var(--chest-50);
  border: 1px dashed var(--chest-300);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
}

.avatar-upload:hover {
  background: var(--chest-100);
  border-color: var(--chest-400);
}

.avatar-upload input {
  display: none;
}

/* ===== 顶部身份栏：头像可以是图片 ===== */
.user-emoji {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 18px;
  overflow: hidden;
  background: var(--chest-50);
  border: 1px solid var(--chest-200);
  border-radius: 50%;
}

.user-emoji img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== 日记里的作者头像 ===== */
.entry-author {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 132px;
}

.entry-avatar,
.chip-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 12px;
  line-height: 1;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
}

.entry-avatar img,
.chip-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chip-avatar {
  margin-right: 5px;
  vertical-align: -4px;
}

/* ===== 心情选择：排成 6 列，颜文字单独放宽 ===== */
.mood-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.mood {
  flex: 0 0 auto;
  width: calc((100% - 30px) / 6);
  min-width: 0;
}

.mood.ko {
  width: auto;
}

.mood span {
  overflow: hidden;
}

.mood span.ko {
  padding: 9px 10px;
  font-size: 12px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* ===== 首页插件：多了「我的」，排成四格 ===== */
.plugin-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.plugin {
  padding: 18px 4px;
}

.plugin-icon {
  font-size: 24px;
}

.plugin-name {
  font-size: 11.5px;
  letter-spacing: 0.02em;
}

/* ===== 「我的」资料页 ===== */
html[data-view="profile"] .home {
  display: none;
}

html[data-view="profile"] #sheetProfile {
  display: flex;
}

.profile-who {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 26px;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

.profile-who b {
  color: var(--chest-600);
  font-weight: 600;
}

.who-face {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 14px;
  line-height: 1;
  overflow: hidden;
  background: var(--chest-50);
  border: 1px solid var(--chest-200);
  border-radius: 50%;
}

.who-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-form {
  text-align: left;
}

.profile-form .label {
  margin: 0 0 10px;
}

.profile-form .date-input {
  margin-bottom: 20px;
}

.profile-form .date-input.bday {
  margin-bottom: 8px;
}

.profile-age {
  margin: 0 0 20px;
  min-height: 16px;
  font-size: 12px;
  text-align: center;
  color: var(--chest-500);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.chip {
  position: relative;
  cursor: pointer;
}

.chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.chip span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: 9px 15px;
  font-size: 13px;
  line-height: 1;
  background: var(--chest-50);
  border: 1px solid var(--chest-200);
  border-radius: 14px;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.chip input:checked + span {
  background: var(--chest-100);
  border-color: var(--chest-400);
  box-shadow: 0 0 0 3px rgba(198, 143, 108, 0.22);
}

.chip input:focus-visible + span {
  border-color: var(--chest-500);
  box-shadow: 0 0 0 3px rgba(168, 104, 63, 0.3);
}

/* MBTI 16 型：排成四列标签 */
.chip-row.grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.chip-row.grid4 .chip span {
  width: 100%;
  min-width: 0;
  padding: 10px 4px;
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

/* ===== 首页插件：五格了，改成三列居中排两行 ===== */
.plugin-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.plugin {
  flex: 0 0 calc((100% - 20px) / 3);
  padding: 18px 6px;
}

.plugin-icon {
  font-size: 26px;
}

.plugin-name {
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* ===== 日历 ===== */
html[data-view="calendar"] .home {
  display: none;
}

html[data-view="calendar"] #sheetCalendar {
  display: flex;
}

.calendar {
  padding-left: 18px;
  padding-right: 18px;
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 18px;
}

.cal-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--chest-600);
}

.cal-nav {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  color: var(--chest-600);
  background: var(--chest-50);
  border: 1px solid var(--chest-200);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.cal-nav:hover {
  background: var(--chest-100);
  border-color: var(--chest-400);
}

.cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}

.cal-week span {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--ink-soft);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  aspect-ratio: 1 / 1;
  padding: 0;
  font-family: inherit;
  color: var(--ink);
  background: var(--chest-50);
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.cal-day:hover {
  background: var(--chest-100);
}

.cal-day.today {
  border-color: var(--chest-300);
}

.cal-day.on {
  background: var(--chest-100);
  border-color: var(--chest-400);
  box-shadow: 0 0 0 3px rgba(198, 143, 108, 0.22);
}

.cal-num {
  font-size: 12.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cal-day.today .cal-num {
  font-weight: 700;
  color: var(--chest-600);
}

.cal-dots {
  display: flex;
  gap: 3px;
  height: 4px;
}

.cal-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--chest-500);
}

.cal-dots i.done {
  background: var(--chest-200);
}

.cal-today {
  display: block;
  margin: 16px auto 0;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--chest-200);
  border-radius: 12px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.cal-today:hover {
  color: var(--chest-600);
  background: var(--chest-50);
  border-color: var(--chest-400);
}

/* --- 选中那天的安排 --- */
.cal-detail {
  margin-top: 22px;
  padding-top: 20px;
  text-align: left;
  border-top: 1px dashed var(--chest-200);
}

.cal-date {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--chest-600);
}

.cal-tasks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.cal-task {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  background: var(--chest-50);
  border: 1px solid var(--chest-200);
  border-radius: 14px;
}

.cal-check {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  color: var(--white);
  background: transparent;
  border: 1px solid var(--chest-300);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.cal-check:hover {
  border-color: var(--chest-500);
}

.cal-task.done .cal-check {
  background: var(--chest-400);
  border-color: var(--chest-400);
}

.cal-task-text {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
  word-break: break-word;
}

.cal-task.done .cal-task-text {
  color: var(--ink-soft);
  text-decoration: line-through;
}

.cal-del {
  flex: none;
  padding: 4px 9px;
  font-family: inherit;
  font-size: 11px;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--chest-200);
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.cal-del:hover,
.cal-del.armed {
  color: #e2795f;
  border-color: #f2c4b6;
  background: #fdf3f0;
}

.cal-empty {
  margin: 0 0 14px;
  font-size: 12.5px;
  text-align: center;
  color: var(--ink-soft);
}

.cal-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cal-input {
  flex: 1;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 11px 13px;
  font-size: 13.5px;
  text-align: left;
}

.cal-add {
  flex: none;
  width: 42px;
  height: 42px;
  padding: 0;
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  color: var(--white);
  background: var(--chest-400);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.cal-add:hover {
  background: var(--chest-500);
}

.cal-add:active {
  transform: scale(0.94);
}

/* ===== 相恋天数：红棕色复古书，进场翻开封面 ===== */
.book {
  position: relative;
  width: 100%;
  perspective: 1600px;         /* 有了透视，翻页才有厚度感 */
}

/* 中缝：摊开后两页交界处的书脊阴影，让书看起来是一整本 */
.book::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 24px;
  margin-left: -12px;
  z-index: 1;                  /* 与两页同级但排在最后，压在页面上 */
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(122, 62, 32, 0) 0%,
    rgba(122, 62, 32, 0.14) 44%,
    rgba(122, 62, 32, 0.26) 50%,
    rgba(122, 62, 32, 0.14) 56%,
    rgba(122, 62, 32, 0) 100%);
}

/* 左页：封面翻开后留在左边的那一面（书封的内侧），与右页等宽 */
.book-left {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  overflow: hidden;
  border: 1px solid var(--chest-300);
  border-right: none;                              /* 书脊一侧不留边线，靠中缝阴影表现 */
  border-radius: var(--radius) 0 0 var(--radius);   /* 外侧圆角，书脊一侧压平 */
  background:
    linear-gradient(270deg, rgba(122, 62, 32, 0.17), rgba(122, 62, 32, 0) 26px),
    linear-gradient(90deg, var(--beige-100), var(--beige-50) 24px);
  box-shadow: var(--shadow);
  transform-origin: right center;   /* 以书脊为轴摊平 */
}

/* 左页外侧露出的纸叠 */
.book-left::after {
  content: '';
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 4px;
  border-radius: 5px 0 0 5px;
  background: linear-gradient(270deg, var(--beige-200), var(--beige-300));
}

.book-left-emblem {
  font-size: 18px;
  line-height: 1;
  color: var(--chest-400);
}

.book-left-title {
  writing-mode: vertical-rl;       /* 竖排，更像个书页 */
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.34em;
  color: var(--chest-600);
}

/* 右页：内容页，和左页一样大的另一半，拼成一本书 */
.book-inner {
  position: relative;
  z-index: 1;
  width: 50%;
  margin-left: 50%;
  padding: 26px 14px 20px;
  border-color: var(--chest-300);
  border-left: none;                               /* 书脊一侧不留边线，靠中缝阴影表现 */
  border-radius: 0 var(--radius) var(--radius) 0;   /* 外侧圆角，书脊一侧压平 */
  background:
    linear-gradient(90deg, rgba(122, 62, 32, 0.17), rgba(122, 62, 32, 0) 26px),
    linear-gradient(270deg, var(--beige-100), var(--beige-50) 24px);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: none;             /* 顶掉 .card 自带的 rise，改用下面的书页动画 */
}

/* 右页只有半本书宽，内容整体缩小一号才装得下 */
.book-inner .eyebrow {
  margin-bottom: 6px;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
}

.book-inner .title {
  margin-bottom: 16px;
  font-size: 15px;
  letter-spacing: 0.06em;
}

.book-inner .days-wrap {
  gap: 4px;
}

.book-inner .days {
  font-size: clamp(36px, 11vw, 52px);
  text-shadow: 0 5px 14px rgba(168, 104, 63, 0.24);
}

.book-inner .unit {
  font-size: 13px;
}

.book-inner .breakdown {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.6;
}

.book-inner .setter {
  margin-top: 18px;
  padding-top: 15px;
}

.book-inner .label {
  margin-bottom: 7px;
  font-size: 11px;
}

.book-inner .date-input {
  padding: 9px 6px;
  font-size: 12px;
  border-radius: 11px;
}

.book-inner .date-input:focus {
  box-shadow: 0 0 0 3px rgba(198, 143, 108, 0.22);
}

.book-inner .hint {
  margin-top: 8px;
  font-size: 10.5px;
}

.book-inner .footer {
  gap: 5px;
  margin-top: 18px;
  font-size: 10.5px;
}

.book-inner .heart {
  font-size: 11px;
}

/* 右缘露出的纸叠 */
.book-inner::after {
  content: '';
  position: absolute;
  top: 16px;
  bottom: 16px;
  right: -4px;
  width: 4px;
  border-radius: 0 5px 5px 0;
  background: linear-gradient(90deg, var(--beige-200), var(--beige-300));
}

/* 书封：只有一页宽，盖在右页上，翻开时绕中缝转到左边 */
.book-cover {
  position: absolute;
  left: 50%;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  overflow: hidden;
  border-radius: 0 var(--radius) var(--radius) 0;   /* 书脊一侧压平，与内页对齐 */
  background: linear-gradient(135deg, #8d4029 0%, #7a3122 46%, #5d2316 100%);
  box-shadow: var(--shadow);
  transform-origin: left center;   /* 以中缝为轴翻 */
  transform: rotateY(-180deg);
  opacity: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 书脊的暗部 */
.book-cover::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 18px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0));
}

/* 烫金内框 */
.book-cover::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(214, 174, 118, 0.42);
  border-radius: calc(var(--radius) - 10px);
}

.book-cover-emblem {
  font-size: 20px;
  line-height: 1;
  color: #d9a86c;
}

.book-cover-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: #eccda6;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.book-cover-sub {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: rgba(236, 205, 166, 0.64);
}

/* 打开「相恋天数」时才播动画；元素从 display:none 变可见，动画会重新开始 */
html[data-view="days"] .book-cover {
  animation: bookOpen 1s cubic-bezier(0.5, 0, 0.2, 1) 0.1s both;
}

/* 中缝跟着左页一起淡入，免得封皮还没翻开就先露出一道阴影 */
html[data-view="days"] .book::after {
  animation: bookSeam 0.65s ease-out 0.45s both;
}

/* 封面转到侧面时，左页跟着摊平接上 */
html[data-view="days"] .book-left {
  animation: bookLeft 0.65s ease-out 0.45s both;
}

html[data-view="days"] .book-inner {
  animation: bookPage 0.7s ease-out 0.55s both;
}

@keyframes bookOpen {
  0%   { transform: rotateY(0deg);    opacity: 1; }
  72%  { opacity: 1; }
  100% { transform: rotateY(-180deg); opacity: 0; }
}

@keyframes bookLeft {
  from { opacity: 0; transform: rotateY(52deg); }
  to   { opacity: 1; transform: rotateY(0deg); }
}

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

@keyframes bookSeam {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 小屏：半本书更窄，右页再收一点，保证日期框不溢出 */
@media (max-width: 380px) {
  .book-inner {
    padding: 22px 11px 18px;
  }

  .book-inner .days {
    font-size: clamp(30px, 10vw, 42px);
  }

  .book-inner .date-input {
    padding: 8px 4px;
    font-size: 11px;
  }

  .book-left-title {
    font-size: 14px;
    letter-spacing: 0.26em;
  }
}

/* 天数下面那行说明默认不显示了，空着的时候别占位置 */
.breakdown:empty {
  display: none;
}

/* ===== 登录页：情侣密钥 ===== */
.couple-key-input {
  margin-bottom: 6px;
}

.gate-key-hint {
  margin: 0 0 18px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  opacity: 0.72;
}

/* ===== 相册：改成胶卷形式 ===== */
/* 一条深色胶片带，上下两排齿孔，照片一格一格横向排开，左右滑动查看 */
.album-grid {
  display: flex;
  gap: 14px;
  margin-top: 18px;
  padding: 26px 12px;              /* 上下留出齿孔和照片之间的间距 */
  overflow-x: auto;
  overflow-y: hidden;
  background-color: #2b241f;        /* 胶片底色 */
  background-image:
    repeating-linear-gradient(to right,
      transparent 0 9px, #efe6da 9px 20px, transparent 20px 29px),
    repeating-linear-gradient(to right,
      transparent 0 9px, #efe6da 9px 20px, transparent 20px 29px);
  background-size: 100% 9px, 100% 9px;
  background-position: 0 8px, 0 calc(100% - 8px);
  background-repeat: repeat-x, repeat-x;
  background-attachment: local, local;   /* 齿孔跟着胶卷一起滑 */
  border-radius: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.album-grid::-webkit-scrollbar {
  display: none;
}

.tile {
  flex: 0 0 auto;
  width: min(210px, 62vw);
  aspect-ratio: 3 / 2;              /* 胶片画幅 */
  padding: 0;
  overflow: hidden;
  background: #14100d;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 3px;
  scroll-snap-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.tile:hover {
  border-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(198, 143, 108, 0.5);
}

.tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== 主页背景音乐按钮 ===== */
/* 固定右下角的小圆钮，全站可见，切到日记/相册也能随手暂停 */
.bgm-btn {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 15;                     /* 低于大图查看（20），高于登录门禁（10） */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  font-size: 19px;
  line-height: 1;
  color: var(--chest-600);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--chest-200);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s,
              background 0.2s, color 0.2s;
}

.bgm-btn:hover {
  border-color: var(--chest-400);
  box-shadow: 0 0 0 4px rgba(198, 143, 108, 0.18);
}

.bgm-btn:active {
  transform: scale(0.94);
}

/* 播放中：填色 + 图标慢慢转，像唱机在转 */
.bgm-btn.on {
  color: var(--white);
  background: var(--chest-500);
  border-color: var(--chest-500);
}

.bgm-btn.on .bgm-icon {
  display: inline-block;
  animation: bgmSpin 3.6s linear infinite;
}

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

/* 出错时在按钮上方冒个小气泡 */
.bgm-btn.tip::after {
  content: attr(data-tip);
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  padding: 6px 10px;
  white-space: nowrap;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--white);
  background: rgba(43, 36, 31, 0.92);
  border-radius: 8px;
}

/* 没登录时不显示，免得挡在登录页上 */
html:not(.is-logged-in) .bgm-btn {
  display: none;
}

/* ===== 首页相机取景框（点一下换照片） ===== */
.cd-frame {
  position: relative;
  width: 100%;
}

/* 取景框：盖在 ccd.svg 屏幕那一块上，坐标按 viewBox 920×590 的比例算 */
.cd-screen {
  position: absolute;
  left: 20.1%;
  top: 24.9544%;
  width: 51.5869%;
  height: 51.5366%;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cd-screen-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* 屏幕在画面里是斜的，照片跟着切成同一条平行四边形 */
  clip-path: polygon(0% 6.91%, 100% 0%, 100% 93.09%, 0% 100%);
}

.cd-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);   /* 稍微放大，免得切角处露出底色 */
}

/* 屏幕玻璃上的反光 */
.cd-glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg,
              rgba(255, 255, 255, 0.22) 0%,
              rgba(255, 255, 255, 0.05) 34%,
              rgba(255, 255, 255, 0) 58%);
}

/* 空屏时的提示 */
.cd-screen-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(226, 232, 238, 0.62);
  pointer-events: none;
}

.cd-screen.has-shot .cd-screen-hint {
  display: none;
}

.cd-screen:focus-visible {
  outline: none;
}

.cd-screen:focus-visible .cd-screen-clip {
  filter: drop-shadow(0 0 7px rgba(198, 143, 108, 0.9));
}

.cd-screen:active .cd-screen-clip {
  filter: brightness(0.92);
}

/* 照片右下角的日期水印 */
.cd-stamp {
  position: absolute;
  right: 5%;
  bottom: 7%;
  font-family: "Courier New", Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.09em;
  color: rgba(255, 246, 228, 0.9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
  pointer-events: none;
}

/* 按快门时的一下白闪 */
.cd-flash {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
}

.cd-flash.on {
  animation: ccdFlash 0.26s ease-out;
}

@keyframes ccdFlash {
  0%   { opacity: 0.92; }
  35%  { opacity: 0.46; }
  100% { opacity: 0; }
}

/* ===== 首页大图（换图只改 index.html 里的 src，这里不用动） ===== */
.hero-stage {
  margin: 0;
  padding: 0 8px;              /* 留一点边，避免阴影贴边被裁 */
  animation: rise 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.hero-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;         /* 跟照片比例接近，基本不裁 */
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* 图还没加载出来时的淡粉底，免得先闪一块白 */
  background: linear-gradient(160deg, #fdf3f5 0%, #f2e6ea 100%);
}

/* ===== 字体：全站换成「沐瑶软笔手写体」（开源、免费可商用） ===== */
@font-face {
  font-family: "Muyao Softbrush";
  src: url("https://cdn.jsdelivr.net/npm/@fontpkg/muyao-softbrush@1.0.0/Muyao-Softbrush.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  /* 字体还没下载完时先用系统字显示，不卡白屏；下载完自动换过来 */
  font-display: swap;
}

/* 只覆盖 body 这一处，其余元素都写着 font-family: inherit，会跟着一起变 */
body,
button,
input,
textarea,
select {
  font-family: "Muyao Softbrush", -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
}

/* ===== 首页五个入口：木质调线性图标 =====
   统一规范：24 格画布、1.6 描边、圆头圆角、共用下面这套木色
   .st  主描边（深胡桃）  .st2 次描边（浅木）  .sf 软木色块
   .sun 带描边的小圆      .af  木色点缀        */
.plugin-icon {
  display: block;
  width: 28px;
  height: 28px;
  font-size: 0;                /* 图标换成 SVG 后，这里不再需要字号 */
}

.plugin-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.plugin-icon .st {
  fill: none;
  stroke: var(--chest-600);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plugin-icon .st2 {
  fill: none;
  stroke: var(--chest-500);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plugin-icon .sf {
  fill: var(--chest-200);
}

.plugin-icon .sun {
  fill: var(--chest-200);
  stroke: var(--chest-500);
  stroke-width: 1.5;
}

.plugin-icon .af {
  fill: var(--chest-500);
}