/* 李辰 ♡ 豆豆 — 柔情版（备选B）：珊瑚粉主导，甜而不腻
   配色依据：Coral Pink #F95F42 + Salmon #F5917B + Rose #D66574 + Ivory 底 */
:root {
  --bg: #FFF9F5;        /* 暖白 */
  --bg-2: #FFF3EC;      /* 浅珊瑚 */
  --bg-3: #FFE9DE;      /* 珊瑚浅 */
  --card: #FFFFFF;
  --line: #F5E3DB;
  --line-2: #EBCDBF;
  --ink: #33241F;       /* 暖炭 */
  --ink-2: #8A6F63;
  --ink-3: #B39A8D;
  --hot: #E2556B;       /* 玫瑰红（主色） */
  --hot-2: #EA6C80;
  --coral: #F5917B;     /* 鲑粉珊瑚 */
  --coral-2: #F8838E;
  --coral-soft: #FFE9E2;
  --sun: #F5A623;       /* 暖金 */
  --pink: #D66574;
  --radius: 3px;
  --display: "Arial Black", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 柔和暖光晕 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(760px circle at 10% -8%, rgba(216, 17, 42, 0.10), transparent 60%),
    radial-gradient(680px circle at 95% 4%, rgba(255, 107, 69, 0.14), transparent 58%),
    radial-gradient(560px circle at 62% 102%, rgba(255, 176, 32, 0.10), transparent 60%);
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

/* ============ 顶部导航 ============ */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 252, 249, 0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  max-width: 1180px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { font-family: var(--display); font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.brand b { color: var(--hot); }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
  font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
  padding: 7px 13px; border: 1px solid transparent; transition: 0.18s;
}
.nav a:hover { color: var(--hot); border-color: var(--line-2); }
.nav a.on { color: #fff; background: var(--hot); border-color: var(--hot); }

/* ============ 登录门 ============ */
.gate {
  position: fixed; inset: 0; z-index: 500; background: var(--bg);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.gate-in { width: 100%; max-width: 380px; text-align: center; }
.gate-kicker { font-size: 11px; letter-spacing: 0.42em; color: var(--hot); text-transform: uppercase; margin-bottom: 18px; }
.gate-title {
  font-family: var(--display); font-size: clamp(34px, 9vw, 54px); font-weight: 900;
  line-height: 0.95; letter-spacing: -0.03em; margin: 0 0 10px; color: var(--ink);
}
.gate-sub { color: var(--ink-2); font-size: 14px; margin-bottom: 30px; }
.gate input {
  width: 100%; background: transparent; border: none; border-bottom: 2px solid var(--line-2);
  color: var(--ink); font-size: 20px; text-align: center; letter-spacing: 0.3em;
  padding: 12px 4px; outline: none; font-family: var(--sans);
}
.gate input:focus { border-bottom-color: var(--hot); }
.gate button {
  margin-top: 26px; width: 100%; background: var(--hot); color: #fff; border: none; padding: 15px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  cursor: pointer; transition: 0.18s; font-family: var(--sans);
}
.gate button:hover { background: var(--hot-2); }
.gate button:disabled { opacity: 0.5; cursor: wait; }
.gate-err { color: var(--hot); font-size: 13px; margin-top: 14px; min-height: 20px; }
.gate-hint { color: var(--ink-3); font-size: 12px; margin-top: 22px; line-height: 1.7; }

/* ============ HERO 倒计时大屏 ============ */
.hero { padding: 62px 0 34px; }
.hero-kicker { font-size: 11px; letter-spacing: 0.4em; color: var(--hot); text-transform: uppercase; margin-bottom: 14px; }
.hero-count {
  font-family: var(--display); font-weight: 900; font-size: clamp(76px, 21vw, 210px);
  line-height: 0.82; letter-spacing: -0.05em; color: var(--hot);
  display: flex; align-items: baseline; gap: 12px;
}
.hero-count .unit {
  font-size: clamp(15px, 2.4vw, 26px); letter-spacing: 0.06em; color: var(--coral);
  font-family: var(--sans); font-weight: 700;
}
.hero-label {
  font-family: var(--display); font-size: clamp(20px, 4vw, 38px); font-weight: 900;
  letter-spacing: -0.01em; margin-top: 6px; color: var(--ink);
}
.hero-label em { font-style: normal; color: var(--hot); }
.hero-meta { color: var(--ink-2); font-size: 13.5px; margin-top: 10px; letter-spacing: 0.04em; }

/* 里程碑 */
.miles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 34px 0 8px;
}
.mile { background: #fff; padding: 18px 16px; }
.mile-emo { font-size: 17px; }
.mile-title { font-size: 12px; letter-spacing: 0.16em; color: var(--ink-2); text-transform: uppercase; margin: 8px 0 4px; }
.mile-num { font-family: var(--display); font-size: 27px; font-weight: 900; letter-spacing: -0.02em; color: var(--ink); }
.mile-num small { font-size: 12px; color: var(--ink-3); font-family: var(--sans); font-weight: 400; margin-left: 4px; }
.mile-date { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.mile.soon .mile-num { color: var(--sun); }
.mile.soon { background: #FFF9EC; }

/* ============ 区块标题 ============ */
.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin: 54px 0 22px;
}
.sec-head h2 {
  font-family: var(--display); font-size: clamp(24px, 4.4vw, 40px); font-weight: 900;
  letter-spacing: -0.02em; margin: 0; text-transform: uppercase; color: var(--ink);
}
.sec-head .side { font-size: 12px; color: var(--ink-3); letter-spacing: 0.14em; text-transform: uppercase; }

/* ============ 月历照片墙 ============ */
.cal-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.cal-month { font-family: var(--display); font-size: clamp(22px, 4vw, 34px); font-weight: 900; letter-spacing: -0.01em; color: var(--ink); }
.cal-month span { color: var(--hot); }
.cal-nav { display: flex; gap: 6px; align-items: center; }
.cal-nav button {
  background: #fff; border: 1px solid var(--line-2); color: var(--ink-2);
  width: 34px; height: 34px; cursor: pointer; font-size: 15px; transition: 0.18s;
}
.cal-nav button:hover { border-color: var(--hot); color: var(--hot); }
.cal-nav .today { width: auto; padding: 0 14px; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow { text-align: center; font-size: 10.5px; letter-spacing: 0.18em; color: var(--ink-3); padding: 8px 0; text-transform: uppercase; }
.cal-cell {
  position: relative; aspect-ratio: 1 / 1; background: var(--bg-2);
  border: 1px solid var(--line); overflow: hidden; cursor: default;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
}
.cal-cell.empty { background: transparent; border-color: transparent; }
.cal-cell .d {
  position: absolute; top: 6px; left: 8px; font-size: 12px; font-weight: 700;
  color: var(--ink-2); z-index: 2; font-variant-numeric: tabular-nums;
}
/* 有记录（无论有没有照片）都要看得出来 */
.cal-cell.has { cursor: pointer; border-color: var(--line-2); background: var(--coral-soft); }
.cal-cell.has .d { color: var(--hot); font-weight: 800; }
.cal-cell.has:hover { border-color: var(--hot); }
.cal-cell .dot {
  position: absolute; right: 6px; bottom: 6px; z-index: 3;
  width: 7px; height: 7px; border-radius: 50%; background: var(--hot);
}
.cal-cell.with-photo { background: var(--bg-2); }
.cal-cell.with-photo .d { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.75); }
.cal-cell.with-photo .dot { background: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.5); }
.cal-cell.has img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; border-radius: 8px; }
.cal-cell .n {
  position: absolute; right: 5px; top: 5px; z-index: 3; background: var(--hot);
  color: #fff; font-size: 9px; padding: 0 5px; font-weight: 700; border-radius: 8px;
}
/* 没照片的日子：格子里显示日记标题（最多 2 行，超出省略），避免空荡荡 */
.cal-cell .cal-txt {
  position: absolute; left: 7px; right: 20px; top: 23px; z-index: 2;
  font-size: 10.5px; line-height: 1.28; font-weight: 600;
  color: var(--ink-1); opacity: 0.82;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  word-break: break-word; pointer-events: none;
}
/* 有标题撑起内容后，右下角的圆点就不再需要（心情挂件已足够标识） */
.cal-cell.no-photo .dot { display: none; }
.cal-cell.today { border-color: var(--hot); border-width: 2px; }

/* ---- 动态心情挂件：放大 + 柔和上下浮动动画（生动） ---- */
.cal-cell .cal-em {
  position: absolute; right: 3px; bottom: 3px; z-index: 4;
  font-size: 17px; line-height: 1; display: inline-block;
  transform-origin: bottom center;
  animation: moodFloat 2.6s ease-in-out infinite;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
  pointer-events: none;
}
.cal-cell.with-photo .cal-em {
  background: rgba(255,255,255,0.88); border-radius: 8px;
  padding: 2px 4px; filter: none; right: 3px; bottom: 3px;
}
/* 让挂件动画带一点节奏感 */
.cal-cell:nth-child(7n) .cal-em { animation-duration: 3.1s; animation-delay: -0.6s; }
.cal-cell:nth-child(7n+3) .cal-em { animation-duration: 2.3s; animation-delay: -1.1s; }
.cal-cell:nth-child(7n+5) .cal-em { animation-duration: 2.8s; animation-delay: -0.3s; }
@keyframes moodFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-3px) scale(1.08); }
  70% { transform: translateY(0) scale(0.98); }
}
/* ============ 爱情主题日历卡片（圆角 + 主题渐变描边） ============ */
.cal-cell { border-radius: 10px; }
.cal-grid { gap: 3px; }
/* 无照片的主题格：同色柔和渐变底 + 渐变描边 + 顶部主题小光带，营造浪漫卡片感 */
.cal-cell.has:not(.with-photo) {
  border: 1.5px solid transparent; background-clip: padding-box;
}
.cal-cell.has.theme-date:not(.with-photo) {
  background:
    linear-gradient(180deg, #FFF1F0 0%, #FFE4E0 100%) padding-box,
    linear-gradient(135deg, #FF9EAA, #E2556B) border-box;
}
.cal-cell.has.theme-love:not(.with-photo) {
  background:
    linear-gradient(180deg, #FFF3EC 0%, #FFE4DB 100%) padding-box,
    linear-gradient(135deg, #FFB3A0, #F5917B) border-box;
}
.cal-cell.has.theme-call:not(.with-photo) {
  background:
    linear-gradient(180deg, #F6EEF7 0%, #EEDEEF 100%) padding-box,
    linear-gradient(135deg, #DDA9C9, #C77DA0) border-box;
}
.cal-cell.has.theme-future:not(.with-photo) {
  background:
    linear-gradient(180deg, #EFF6F0 0%, #DFEEE2 100%) padding-box,
    linear-gradient(135deg, #A5C8AE, #6FA287) border-box;
}
.cal-cell.has.theme-issue:not(.with-photo) {
  background:
    linear-gradient(180deg, #EEF3F7 0%, #DEE9F1 100%) padding-box,
    linear-gradient(135deg, #A6BED0, #7C9EB2) border-box;
}
.cal-cell.has.theme-fight:not(.with-photo) {
  background:
    linear-gradient(180deg, #FDF0EB 0%, #F7DCD3 100%) padding-box,
    linear-gradient(135deg, #E5A08E, #D9776A) border-box;
}
.cal-cell.has.theme-sleep:not(.with-photo) {
  background:
    linear-gradient(180deg, #F0EBF5 0%, #E2D9EE 100%) padding-box,
    linear-gradient(135deg, #AF9CC4, #8A6FA0) border-box;
}
.cal-cell.has.theme-other:not(.with-photo) {
  background:
    linear-gradient(180deg, #FBF3E4 0%, #F6E7C8 100%) padding-box,
    linear-gradient(135deg, #E0BC72, #D4A95C) border-box;
}
/* 有照片的主题格：保留照片，加主题色细描边 + 柔和阴影，突出而不遮盖 */
.cal-cell.has.theme-date.with-photo   { box-shadow: inset 0 0 0 2px #E2556B, 0 1px 4px rgba(226,85,107,.25); }
.cal-cell.has.theme-love.with-photo   { box-shadow: inset 0 0 0 2px #F5917B, 0 1px 4px rgba(245,145,123,.25); }
.cal-cell.has.theme-call.with-photo   { box-shadow: inset 0 0 0 2px #C77DA0, 0 1px 4px rgba(199,125,160,.25); }
.cal-cell.has.theme-future.with-photo { box-shadow: inset 0 0 0 2px #6FA287, 0 1px 4px rgba(111,162,135,.25); }
.cal-cell.has.theme-issue.with-photo  { box-shadow: inset 0 0 0 2px #7C9EB2, 0 1px 4px rgba(124,158,178,.25); }
.cal-cell.has.theme-fight.with-photo  { box-shadow: inset 0 0 0 2px #D9776A, 0 1px 4px rgba(217,119,106,.25); }
.cal-cell.has.theme-sleep.with-photo  { box-shadow: inset 0 0 0 2px #8A6FA0, 0 1px 4px rgba(138,111,160,.25); }
.cal-cell.has.theme-other.with-photo  { box-shadow: inset 0 0 0 2px #D4A95C, 0 1px 4px rgba(212,169,92,.25); }
/* 无照片主题格的日期数字也用主题色加深 */
.cal-cell.has.theme-date:not(.with-photo) .d   { color: #E2556B; }
.cal-cell.has.theme-love:not(.with-photo) .d   { color: #F0735A; }
.cal-cell.has.theme-call:not(.with-photo) .d   { color: #B26A93; }
.cal-cell.has.theme-future:not(.with-photo) .d { color: #578970; }
.cal-cell.has.theme-issue:not(.with-photo) .d  { color: #6B8DA5; }
.cal-cell.has.theme-fight:not(.with-photo) .d  { color: #C76952; }
.cal-cell.has.theme-sleep:not(.with-photo) .d  { color: #7B5F92; }
.cal-cell.has.theme-other:not(.with-photo) .d  { color: #B08A38; }

/* ============ 弹窗 ============ */
.modal {
  position: fixed; inset: 0; z-index: 300; background: rgba(255, 252, 249, 0.98);
  /* 注意：此处不能加 backdrop-filter/filter/transform，否则会让 .modal-close 的 fixed 相对本容器定位而失效（内容滚动时关闭按钮会被带跑）。 */
  display: none; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.modal.show {
  display: block;
  animation: modalFade 0.22s ease-out;
}
@keyframes modalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal-in { max-width: 940px; margin: 0 auto; padding: 30px 24px 90px; }
.modal-close {
  position: fixed; top: 18px; right: 20px; z-index: 320; width: 46px; height: 46px;
  border-radius: 50%; border: 1px solid var(--line-2); background: #fff;
  color: var(--ink); font-size: 20px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.modal-close:hover { border-color: var(--hot); color: var(--hot); }
.modal-date {
  font-family: var(--display); font-size: clamp(56px, 15vw, 130px); font-weight: 900;
  line-height: 0.85; letter-spacing: -0.05em; color: var(--hot);
}
.modal-ym { font-size: 12px; letter-spacing: 0.3em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 22px; }

.mpost { border-top: 1px solid var(--line); padding: 26px 0 34px; }
.mpost h3 { font-family: var(--display); font-size: clamp(20px, 3.4vw, 30px); font-weight: 900; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--ink); }
.mpost .meta { font-size: 12px; color: var(--ink-3); letter-spacing: 0.08em; margin-bottom: 14px; display: flex; gap: 12px; flex-wrap: wrap; }
.mpost .meta .who { color: var(--hot); font-weight: 600; }
.mpost .body { white-space: pre-wrap; color: var(--ink-2); font-size: 15.5px; line-height: 1.9; }
/* 正文内子标题（合并文章的每篇原标题） */
.mpost-sub {
  font-family: var(--display); font-weight: 800; font-size: 16.5px; line-height: 1.4;
  color: var(--hot); letter-spacing: 0.02em; margin: 22px 0 4px; padding-left: 10px;
  border-left: 3px solid var(--hot);
}
.mpost .body > .mpost-sub:first-child { margin-top: 0; }
.article .body .mpost-sub { color: var(--hot); border-left-color: var(--hot); }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px; margin: 16px 0; }
.mgrid img { width: 100%; height: 200px; object-fit: cover; cursor: zoom-in; }
.mgrid.one img { height: 380px; }
.music-btn {
  display: inline-flex; align-items: center; gap: 8px; background: #fff;
  border: 1px solid var(--line-2); color: var(--ink-2); padding: 7px 15px; font-size: 12.5px;
  cursor: pointer; margin-top: 12px; transition: 0.18s; font-family: var(--sans);
}
.music-btn:hover { border-color: var(--hot); color: var(--hot); }
.music-btn.playing { background: var(--hot); border-color: var(--hot); color: #fff; }

.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.tags span { font-size: 11px; letter-spacing: 0.1em; color: var(--ink-2); border: 1px solid var(--line); background: #fff; padding: 2px 9px; }

/* ============ 播放器（音符圆盘） ============ */
/* 全域漂浮音乐按钮：固定在右上角（有顶栏时自动下移到顶栏下方），
   所有页面（首页/年度回顾/单篇/写日记/后台）都可见可控。
   z-index 200：高于顶栏(60)，低于全屏弹窗(300)——弹窗内自带音乐控制。 */
.music-disc {
  position: fixed; top: 14px; right: 16px; z-index: 200;
  width: 42px; height: 42px; flex: none;
  border: 1px solid var(--line-2); background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 3px 14px rgba(0,0,0,0.10);
  cursor: pointer; padding: 0;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.music-disc:hover { border-color: var(--hot); box-shadow: 0 5px 18px rgba(226,85,107,.24); }
.music-disc.playing { border-color: var(--hot); }
/* 无顶栏页面（后台/写日记）：顶部条右侧留出空间，避免被漂浮音乐按钮盖住 */
.admin-bar, .compose-bar { padding-right: 56px; }
@media (max-width: 640px) {
  .music-disc { width: 38px; height: 38px; right: 12px; }
  .music-disc .md-note { font-size: 19px; }
  .admin-bar, .compose-bar { padding-right: 48px; }
}
.music-disc .md-note {
  font-size: 22px; line-height: 1; color: var(--hot);
  transition: transform 0.2s;
}
.music-disc .md-wave {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  border: 2px solid var(--hot); border-radius: 50%;
  animation: mdSpin 6s linear infinite;
}
.music-disc .md-wave i {
  position: absolute; width: 4px; border-radius: 2px; background: var(--hot);
  left: 50%; transform-origin: 50% 100%;
}
.music-disc .md-wave i:nth-child(1){ height: 7px; transform: translateX(-2px) rotate(210deg); bottom: 50%; }
.music-disc .md-wave i:nth-child(2){ height: 11px; transform: translateX(-2px) rotate(180deg); bottom: 50%; }
.music-disc .md-wave i:nth-child(3){ height: 14px; transform: translateX(-2px) rotate(150deg); bottom: 50%; }
.music-disc.playing .md-note { animation: mdNoteFloat 2.2s ease-in-out infinite; }
.music-disc.playing .md-wave { display: flex; }
@keyframes mdSpin { to { transform: rotate(360deg); } }
@keyframes mdNoteFloat {
  0%,100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-2px) rotate(-8deg); }
}
/* 音符常驻：默认不显示，有歌才开始播时显示，但这里保持始终可见以便点击启动 */
.music-disc { opacity: 0.92; }
.music-disc:hover { opacity: 1; transform: scale(1.06); }

/* 旧横条播放器样式保留（兼容 post/review 等页面，若无匹配 DOM 则无副作用） */
.player {
  position: fixed; left: 16px; bottom: 16px; z-index: 200;
  background: #fff; border: 1px solid var(--line-2);
  box-shadow: 0 8px 30px rgba(180, 120, 100, 0.16);
  padding: 10px 14px; display: none; align-items: center; gap: 12px; max-width: calc(100vw - 32px);
}
.player.show { display: flex; }
.player .btn-p {
  width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--hot);
  color: #fff; cursor: pointer; font-size: 13px; flex: none;
}
.player .info { min-width: 0; }
.player .nm { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; color: var(--ink); }
.player .sub { font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; }
.player .bar { width: 120px; height: 3px; background: var(--line); position: relative; cursor: pointer; }
.player .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--hot); width: 0; }
.player .xp { background: transparent; border: none; color: var(--ink-3); cursor: pointer; font-size: 15px; padding: 0 2px; }
.player .xp:hover { color: var(--hot); }

/* ============ 年度回顾 ============ */
.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.stat { background: #fff; padding: 24px 18px; }
.stat .n { font-family: var(--display); font-size: clamp(30px, 6vw, 52px); font-weight: 900; letter-spacing: -0.03em; color: var(--hot); }
.stat .l { font-size: 11.5px; letter-spacing: 0.16em; color: var(--ink-3); text-transform: uppercase; margin-top: 4px; }

.bars { display: flex; align-items: flex-end; gap: 6px; height: 170px; margin-top: 10px; }
.bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bar { width: 100%; background: linear-gradient(180deg, var(--coral), var(--hot)); min-height: 2px; }
.bar-l { font-size: 10px; color: var(--ink-3); }
.bar-v { font-size: 10.5px; color: var(--ink-2); }

.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; }
.wall img { width: 100%; height: 170px; object-fit: cover; cursor: zoom-in; transition: 0.3s; }
.wall img:hover { transform: scale(1.03); }

/* ============ 文章页 ============ */
.article { max-width: 760px; margin: 0 auto; padding: 40px 0 60px; }
.article .date { font-family: var(--display); font-size: 13px; letter-spacing: 0.3em; color: var(--hot); }
.article h1 { font-family: var(--display); font-size: clamp(28px, 6vw, 52px); font-weight: 900; letter-spacing: -0.02em; margin: 8px 0 14px; line-height: 1.05; color: var(--ink); }
.article .meta { font-size: 12.5px; color: var(--ink-3); display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.article .body { white-space: pre-wrap; font-size: 16.5px; line-height: 2; color: var(--ink-2); }
.article .ph { margin: 22px 0; display: grid; gap: 4px; }
.article .ph img { width: 100%; cursor: zoom-in; }

/* ============ 后台 ============ */
.admin-wrap { max-width: 960px; margin: 0 auto; padding: 26px 24px 100px; }
.admin-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.admin-bar h1 { font-family: var(--display); font-size: 21px; font-weight: 900; letter-spacing: 0.04em; margin: 0; text-transform: uppercase; color: var(--ink); }
.tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.tab {
  border: none; background: transparent; color: var(--ink-3); padding: 11px 16px;
  font-size: 13px; cursor: pointer; font-family: var(--sans); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab.active { color: var(--hot); border-bottom-color: var(--hot); }
.panel { display: none; }
.panel.active { display: block; }

.card { background: var(--card); border: 1px solid var(--line); padding: 22px; margin-bottom: 16px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 11.5px; letter-spacing: 0.14em; color: var(--ink-2); margin-bottom: 6px; text-transform: uppercase; }
.field input, .field textarea, .field select {
  width: 100%; background: #fff; border: 1px solid var(--line-2); color: var(--ink);
  padding: 11px 13px; font-size: 15px; font-family: var(--sans); outline: none; border-radius: var(--radius);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--hot); }
.field textarea { min-height: 150px; resize: vertical; line-height: 1.8; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > .field { flex: 1 1 170px; }

.btn {
  border: none; padding: 12px 26px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; cursor: pointer; background: var(--hot); color: #fff; font-family: var(--sans); transition: 0.18s;
}
.btn:hover { background: var(--hot-2); }
.btn:disabled { opacity: 0.5; cursor: wait; }
.btn.ghost { background: #fff; border: 1px solid var(--line-2); color: var(--ink-2); }
.btn.ghost:hover { border-color: var(--hot); color: var(--hot); }
.btn.small { padding: 7px 15px; font-size: 11.5px; }
.btn.danger { background: #fff; border: 1px solid #F0C4BC; color: #C0303F; }

.post-row { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); padding: 12px 14px; margin-bottom: 8px; }
.post-row .thumb { width: 56px; height: 56px; object-fit: cover; flex: none; background: var(--bg-2); }
.post-row .main { flex: 1; min-width: 0; }
.post-row .t { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.post-row .m { font-size: 12px; color: var(--ink-3); }
.badge { font-size: 10.5px; padding: 1px 8px; margin-left: 6px; }
.badge.draft { background: #FFF2D6; color: #96601A; }
.badge.pub { background: #E3F5E6; color: #2F7A3E; }

.upload-zone {
  border: 1px dashed var(--line-2); padding: 22px; text-align: center; color: var(--ink-3);
  cursor: pointer; font-size: 13.5px; transition: 0.18s; background: #fff;
}
.upload-zone:hover, .upload-zone.drag { border-color: var(--hot); color: var(--hot); background: #FFF7F5; }
/* 移动端上传：file input 透明铺满上传框，原生点击直接选文件（兼容微信/App 内置浏览器） */
.upload-zone.zfile { position: relative; overflow: hidden; }
.upload-zone.zfile > input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; font-size: 0;
}
/* 三类上传框颜色区分：照片=品牌粉，视频=青绿，音乐=紫（后台同用） */
.upload-zone.zphoto { border-color: #E8A3AB; color: #C0303F; background: #FFF7F5; }
.upload-zone.zvideo { border-color: #8CC3B0; color: #2F7D6B; background: #F3FAF7; }
.upload-zone.zmusic { border-color: #B4A6E3; color: #6C58B8; background: #F8F6FE; }
.upload-zone.zphoto:hover, .upload-zone.zphoto.drag { border-color: #C0303F; background: #FFEFEA; }
.upload-zone.zvideo:hover, .upload-zone.zvideo.drag { border-color: #2F7D6B; background: #E8F5F0; }
.upload-zone.zmusic:hover, .upload-zone.zmusic.drag { border-color: #6C58B8; background: #F1EDFC; }
.thumb-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.thumb-item { position: relative; width: 88px; height: 88px; border: 1px solid var(--line); overflow: hidden; }
.thumb-item img { width: 100%; height: 100%; object-fit: cover; }
.thumb-item .del {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(43, 32, 28, 0.75); color: #fff; border: none; cursor: pointer; font-size: 13px; line-height: 18px; padding: 0;
}
.thumb-item .cover { position: absolute; bottom: 0; left: 0; right: 0; background: var(--hot); color: #fff; font-size: 10.5px; border: none; cursor: pointer; padding: 2px 0; }
.music-item {
  display: flex; align-items: center; gap: 10px; background: var(--bg-2);
  border: 1px solid var(--line-2); padding: 10px 12px; margin-top: 10px; font-size: 13.5px; color: var(--ink);
}
.music-item .x { margin-left: auto; background: transparent; border: none; color: var(--ink-3); cursor: pointer; font-size: 15px; }
.music-item .x:hover { color: var(--hot); }

.mile-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.mile-row input { background: #fff; border: 1px solid var(--line-2); color: var(--ink); padding: 9px 11px; font-family: var(--sans); }
.mile-row .i-t { flex: 2 1 120px; }
.mile-row .i-d { flex: 1.4 1 130px; }
.mile-row .i-e { flex: 0 0 52px; text-align: center; }

.login-box {
  max-width: 380px; margin: 10vh auto; background: #fff;
  border: 1px solid var(--line); padding: 32px 28px;
}
.login-box h1 { font-family: var(--display); font-size: 20px; font-weight: 900; letter-spacing: 0.04em; margin: 0 0 6px; text-align: center; color: var(--ink); }
.login-box p.tip { text-align: center; color: var(--ink-3); font-size: 13px; margin: 0 0 22px; }
.section-title {
  font-family: var(--display); font-size: 15px; font-weight: 900; letter-spacing: 0.08em;
  text-transform: uppercase; margin: 0 0 12px; color: var(--ink);
}

.toast {
  position: fixed; left: 50%; bottom: 42px; transform: translateX(-50%) translateY(18px);
  background: var(--ink); color: #fff; padding: 11px 24px; font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.06em; opacity: 0; pointer-events: none; transition: 0.25s; z-index: 900;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.lightbox {
  position: fixed; inset: 0; background: rgba(43, 32, 28, 0.94); display: none;
  align-items: center; justify-content: center; z-index: 800; cursor: zoom-out; padding: 20px;
}
.lightbox.show { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; }

.hint { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; line-height: 1.7; }
.state { text-align: center; color: var(--ink-3); padding: 60px 20px; font-size: 14px; }
.spinner { width: 24px; height: 24px; border: 2px solid var(--line-2); border-top-color: var(--hot); border-radius: 50%; margin: 0 auto 14px; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.site-footer { text-align: center; color: var(--ink-3); font-size: 12px; padding: 50px 20px 40px; letter-spacing: 0.06em; }
.site-footer a { color: var(--ink-3); }

@media (max-width: 640px) {
  .topbar-in { padding: 10px 14px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .nav { width: 100%; }
  .nav a { padding: 9px 12px; font-size: 12px; }
  .wrap { padding: 0 14px; }
  .hero { padding: 30px 0 20px; }
  .hero-count { font-size: clamp(60px, 23vw, 110px); }
  .miles { grid-template-columns: repeat(2, 1fr); }
  .sec-head { margin: 36px 0 16px; }
  .mgrid img { height: 140px; }
  .mgrid.one img { height: 240px; }
  .player { left: 10px; right: 10px; bottom: 10px; }
  .player .bar { width: 70px; }
  .cal-cell .d { font-size: 11px; top: 4px; left: 5px; }
  .cal-cell .n { font-size: 9px; padding: 1px 5px; }
  /* 手机月历格子更小：标题再缩小、收紧边距，保证两行可读 */
  .cal-cell .cal-txt { font-size: 9.5px; line-height: 1.25; left: 5px; right: 18px; top: 20px; -webkit-line-clamp: 2; }
  .modal-in { padding: 24px 16px 80px; }
  /* 手机后台：防止 iOS 聚焦缩放、加大触控 */
  .admin-wrap { padding: 16px 14px 90px; }
  .card { padding: 16px; }
  .field input, .field textarea, .field select { font-size: 16px; padding: 12px; }
  .btn { padding: 13px 22px; }
  .btn.small { padding: 10px 14px; }
  .post-row { flex-wrap: wrap; }
  .post-row .btn.small { padding: 9px 14px; }
  .mile-row input { font-size: 16px; padding: 11px; }
  .upload-zone { padding: 18px; }
  /* ===== 后台手机美化专项 ===== */
  .admin-bar { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 14px; }
  .admin-bar h1 { font-size: 19px; letter-spacing: 0.05em; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 16px; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; padding: 10px 13px; font-size: 12px; white-space: nowrap; }
  .card { padding: 16px 14px; }
  .card .row { gap: 10px; }
  .field { margin-bottom: 14px; }
  .field label { font-size: 11px; letter-spacing: 0.08em; margin-bottom: 5px; }
  .post-row { gap: 10px; padding: 12px 0; }
  .post-row .thumb { width: 46px; height: 46px; }
  .post-row .t { font-size: 14px; line-height: 1.35; }
  .mile-row { gap: 8px; padding: 8px 0; }
  .mile-row .i-t, .mile-row .i-d { flex-basis: 100%; }
  .save-row, .admin-bar .grow { width: 100%; }
  /* 缩略图墙在手机上 */
  .thumb-item { width: 74px; height: 74px; }
  .mgrid { gap: 3px; }
}

/* ============ 上传进度条 ============ */
.up-progress {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 500;
  background: #fff; border: 1px solid var(--line-2); border-radius: 12px;
  padding: 12px 18px; display: none; align-items: center; gap: 14px;
  box-shadow: 0 8px 30px rgba(180, 120, 100, 0.18); max-width: min(88vw, 420px);
  width: auto;
}
.up-progress-in {
  flex: 1; height: 8px; min-width: 200px; background: var(--line);
  border-radius: 4px; overflow: hidden;
}
.up-progress-fill {
  height: 100%; width: 0; background: linear-gradient(90deg, var(--coral), var(--hot));
  border-radius: 4px; transition: width 0.2s ease;
}
.up-progress-txt { font-size: 12px; color: var(--ink-2); white-space: nowrap; }

/* ============ 后台心情选择器 ============ */
.mood-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.mood-opt {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px;
  border: 1.5px solid var(--line-2); border-radius: 999px; background: #fff;
  cursor: pointer; font-family: var(--sans); font-size: 12.5px; color: var(--ink-2);
  transition: 0.15s; line-height: 1;
}
.mood-opt:hover { border-color: var(--hot); color: var(--hot); }
.mood-opt.on { border-color: var(--hot); color: var(--hot); background: var(--coral-soft); }
.mood-opt .mo-emoji { font-size: 15px; }
.mood-opt .mo-name { font-weight: 600; }
/* 无心情时可有个默认占位提示 */
.mood-picker-empty { font-size: 12px; color: var(--ink-3); }
/* 后台心情管理行 */
.mood-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mood-row .m-name { flex: 1; }
.mood-row input.m-emo { font-size: 15px; padding: 6px; }
.mood-row input.m-color { width: 40px; height: 32px; padding: 2px; border: 1px solid var(--line-2); border-radius: 6px; background: #fff; cursor: pointer; }
@media (max-width: 640px) {
  .mood-row { flex-wrap: wrap; }
}

/* ============================================================
   全站 · 生动化升级（层次材质 / 字体排版 / 动效微交互）
   —— 仅追加 override，不破坏原有暖色品牌与布局
   ============================================================ */
:root {
  --radius: 12px;                 /* 3px -> 12px 更柔和 */
  --shadow-s: 0 2px 10px rgba(190,120,100,.08);
  --shadow-m: 0 8px 26px rgba(190,120,100,.14);
  --shadow-l: 0 18px 44px rgba(200,110,95,.18);
  --grad-hot: linear-gradient(120deg, #F5917B 0%, #E2556B 55%, #D66574 100%);
}

/* ---------- A. 层次与材质 ---------- */
.card { border-radius: var(--radius); box-shadow: var(--shadow-s); border-color: var(--line); transition: box-shadow .25s, transform .25s; }
.card:hover { box-shadow: var(--shadow-m); }

.mile, .stat { border-radius: 10px; }
.miles, .stat-row { border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-s); }

.thumb-item, .cal-cell.has, .mgrid img, .ph img, .modal-in { border-radius: 10px; }
.cal-cell.has { box-shadow: inset 0 0 0 1px rgba(226,85,107,.10); }
.mgrid img { transition: transform .35s ease, box-shadow .35s; }
.mgrid img:hover { transform: scale(1.015); box-shadow: var(--shadow-m); z-index: 2; position: relative; }
.mgrid.one img { border-radius: 14px; }

/* 渐变大标题（珊瑚→玫瑰） */
.hero-count, .modal-date, .mile-num, .stat .n, .article h1, .mpost h3, .gate-title {
  background: var(--grad-hot); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-count .unit, .mile-num small { -webkit-text-fill-color: currentColor; color: var(--coral); }
.mile.soon .mile-num { background: none; -webkit-text-fill-color: var(--sun); color: var(--sun); }
.stat .n { -webkit-text-fill-color: transparent; }

/* 渐变主按钮 + 胶囊 */
.btn { border-radius: 999px; background-image: var(--grad-hot); box-shadow: 0 6px 18px rgba(226,85,107,.30); transition: transform .18s, box-shadow .18s, filter .18s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(226,85,107,.36); filter: brightness(1.03); }
.btn.ghost { background-image: none; background: transparent; box-shadow: none; color: var(--hot); }
.btn.small { border-radius: 999px; }
.gate button, .nav a.on { background-image: var(--grad-hot); border-radius: 999px; }
.music-btn, .tags span { border-radius: 999px; }

/* topbar 毛玻璃更通透 */
.topbar { background: rgba(255,252,249,.78); box-shadow: 0 1px 0 rgba(235,205,191,.35); }

/* 日期徽章 / 分隔 */
.mpost .meta span { background: rgba(245,143,123,.10); padding: 2px 9px; border-radius: 999px; }

/* ---------- B. 字体排版精修 ---------- */
.sec-head { border-bottom-color: var(--line-2); }
.sec-head h2 { font-size: clamp(22px,4vw,34px); letter-spacing:.02em; margin:0; }
.article .body p, .mpost .body { letter-spacing:.01em; }
.article h1, .mpost h3 { margin-bottom: 10px; }

/* 区块标题加个小暖点装饰（在标题文字前） */
.sec-head h2::before {
  content: "✦"; color: var(--coral); font-size: .8em; margin-right: 8px;
  animation: sparkle 3s ease-in-out infinite; display:inline-block;
}
@keyframes sparkle { 0%,100%{opacity:.45;transform:scale(.9) rotate(0)} 50%{opacity:1;transform:scale(1.12) rotate(20deg)} }

/* ---------- C. 动效与微交互 ---------- */
/* 进场渐入上浮 */
@keyframes fadeUp { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
.hero, .gate-in { animation: fadeUp .7s ease both; }
.sec-head { animation: fadeUp .6s ease both; }
.miles, .cal, .stat-row, .wall, .bars { animation: fadeUp .7s ease both; }
.mpost { animation: fadeUp .5s ease both; }

/* 里程碑数字轻轻呼吸 */
.mile-num { animation: numBreath 3.4s ease-in-out infinite; }
@keyframes numBreath { 0%,100%{ transform:translateY(0)} 50%{ transform:translateY(-3px)} }

/* 图片延迟交错(相册墙) */
.wall img { border-radius: 10px; }

/* 心形小点缀在 body 背景右侧(仅装饰,弱化不影响阅读) */
@media (min-width: 900px) {
  body::after {
    content:"❀"; position:fixed; right:26px; bottom:20px; font-size:26px;
    color:rgba(226,85,107,.25); z-index:0; pointer-events:none;
    animation: floaty 5s ease-in-out infinite;
  }
}
@keyframes floaty { 0%,100%{ transform:translateY(0) rotate(0)} 50%{ transform:translateY(-8px) rotate(8deg)} }

/* 减少动态偏好：关闭动画 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
}

/* ============ 登录门 · 大胆深情版 + 粉泡泡 ============ */
.gate { background:
  radial-gradient(120% 90% at 15% 0%, #FFE7F1 0%, transparent 55%),
  radial-gradient(120% 100% at 100% 10%, #FFE4D6 0%, transparent 55%),
  linear-gradient(160deg, #FFF5FB 0%, #FFF0F6 40%, #FFE9E9 100%); }
.gate-in { position: relative; }
.gate-title { line-height: 1.02; }
.gate-title .amp {
  font-size: .72em; vertical-align: .06em; color: var(--hot);
  -webkit-text-fill-color: var(--hot);
}
.gate-tagline {
  margin: 6px 0 26px; font-size: 14.5px; line-height: 1.9; letter-spacing:.03em;
  color: var(--ink-2);
}
.gate-hint { color: var(--ink-3); }

/* 粉色泡泡/爱心漂浮 */
.gate-hearts { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.gate-in { position: relative; z-index: 1; }
.gate-hearts span {
  position: absolute; bottom: -50px; line-height: 1;
  animation: bubUp linear infinite;
}
@keyframes bubUp {
  0% { transform: translateY(0) scale(1); opacity:0; }
  8% { opacity:.55; }
  100% { transform: translateY(-110vh) scale(1.15); opacity:0; }
}

/* ============ 前台发布/编辑入口 ============ */
.nav .nav-pub {
  background-image: linear-gradient(120deg,#F5917B,#E2556B); color:#fff; border-radius:999px;
  padding:8px 15px; font-weight:700; letter-spacing:.06em; border:none;
}
.nav .nav-pub:hover { filter:brightness(1.06); color:#fff; box-shadow:0 4px 14px rgba(226,85,107,.35); }
.nav .nav-admin { color:var(--ink-3); font-size:11.5px; }

/* 弹窗内：修改这一天 */
.mpost-ops { margin-top:16px; text-align:right; }
.mpost-edit {
  display:inline-block; font-size:12px; letter-spacing:.08em; color:var(--hot);
  border:1px solid var(--hot); border-radius:999px; padding:6px 15px;
  transition:.18s; opacity:.9;
}
.mpost-edit:hover { background:var(--hot); color:#fff; opacity:1; }
@media (max-width:640px){ .mpost-ops{ text-align:left; } }

/* ============ 独立写作页 compose.html 顶部 + 手机适配 ============ */
/* 全部按钮文字单行（避免 "返回首页" 等被拆成两行） */
.btn, .btn.ghost, .btn.ghost.small, .mpost-edit, .nav .nav-pub { white-space: nowrap; }

/* 顶部条：宽屏单行三列，窄屏改为两行（左右行 + 中间标题占满居中） */
.compose-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px 14px;
  margin: 4px 2px 18px;
}
.compose-bar-left { display: flex; gap: 8px; align-items: center; }
.compose-bar-center {
  text-align: center;
  min-width: 0; /* 关键：让子元素的 nowrap+ellipsis 生效 */
}
.compose-title {
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-image: var(--grad-hot);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.compose-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0;
  text-transform: none;
}
.compose-bar-right { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: nowrap; }
.compose-only-edit { display: none; }
body.is-editing .compose-only-edit { display: inline-flex; }

/* 表单底部操作条：窄屏纵向堆叠 + 占满宽度 */
.compose-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .compose-bar {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "left   right"
      "center center";
    gap: 10px;
  }
  .compose-bar-left { grid-area: left; }
  .compose-bar-right { grid-area: right; }
  .compose-bar-center { grid-area: center; text-align: center; }
  .compose-title { font-size: 18px; }
  .compose-actions { flex-direction: column; align-items: stretch; }
  .compose-actions .btn { width: 100%; }
  /* 让内嵌的 row 在窄屏不强行把日期栏与标题栏并列堆得难看 */
  .card .row { flex-wrap: wrap; }
  .card .row > .field { min-width: 0; }
}

/* ============ 音乐库选择（复用服务器已有音频） ============ */
.music-choose { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.music-choose .upload-zone { flex: 1 1 220px; margin: 0; }
.music-choose .btn { flex: 0 0 auto; align-self: center; white-space: nowrap; }

/* 音乐库弹窗列表 */
.ml-list { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; }
.ml-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--bg-2); transition: border-color .18s, background .18s;
}
.ml-item:hover { border-color: var(--hot); background: var(--coral-soft); }
.ml-play {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line-2); background: #fff; color: var(--hot);
  font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ml-play:hover { background: var(--hot); color: #fff; border-color: var(--hot); }
.ml-main { flex: 1 1 auto; min-width: 0; }
.ml-name {
  font-size: 14px; font-weight: 600; color: var(--ink-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ml-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.ml-used { color: var(--ink-2); }
.ml-used.none { color: var(--ink-3); opacity: .7; }
.ml-use {
  flex: 0 0 auto; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--hot);
  background: transparent; color: var(--hot); font-size: 12px; cursor: pointer; white-space: nowrap;
}
.ml-use:hover { background: var(--hot); color: #fff; }
.ml-tip { margin-top: 14px; font-size: 12px; color: var(--ink-3); text-align: center; }

@media (max-width: 640px) {
  .music-choose { flex-direction: column; }
  /* 纵向排列后 flex-basis 会作用到"高度"上，220px 会把上传框撑高，改为自然高度 */
  .music-choose .upload-zone { flex: 0 0 auto; }
  .music-choose .btn { width: 100%; }
  .ml-list { max-height: 46vh; }
  .ml-name { font-size: 13px; }
}

/* ============ 视频展示（封面懒加载，点开才下载，省流量） ============ */
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 14px 0; }
.vcard {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: #000; cursor: pointer; aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
}
.vcard:hover { border-color: var(--hot); }
.vcard .vposter { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; }
.vcard .vposter.none { display: flex; align-items: center; justify-content: center; font-size: 30px; background: var(--bg-2); }
.vcard .vplay {
  position: absolute; inset: 0; margin: auto; width: 52px; height: 52px;
  border-radius: 50%; background: rgba(0,0,0,.45); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  backdrop-filter: blur(2px); transition: transform .18s, background .18s;
}
.vcard:hover .vplay { background: var(--hot); transform: scale(1.08); }
.vcard .vname {
  position: absolute; left: 8px; bottom: 8px; right: 8px;
  font-size: 11.5px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vcard.playing { cursor: default; }
.vcard .vplayer { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
@media (max-width: 640px) {
  .vgrid { grid-template-columns: 1fr; }
  .vcard .vplay { width: 46px; height: 46px; font-size: 16px; }
}

/* 写日记页：已选视频列表 */
.vid-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.vid-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2);
}
.vid-item img { width: 84px; height: 48px; object-fit: cover; border-radius: 6px; flex: none; }
.vid-item .vid-noimg {
  width: 84px; height: 48px; border-radius: 6px; flex: none; background: var(--bg-2);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.vid-item .vid-name { flex: 1 1 auto; font-size: 13px; color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vid-item .del {
  flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2);
  background: #fff; color: var(--ink-2); cursor: pointer; font-size: 15px; line-height: 1;
}
.vid-item .del:hover { background: var(--hot); color: #fff; border-color: var(--hot); }

/* ============ 移动端点击高亮全局修复（去掉蓝色方块反馈） ============ */
/* 1) 全站去掉 WebKit 触摸高亮（iOS Safari / 微信内置浏览器点按钮时的蓝色方块） */
*,
*::before,
*::after { -webkit-tap-highlight-color: transparent !important; }

/* 2) 所有可点击元素：去掉默认高亮 + 长按系统菜单（不影响输入框正常操作） */
a, button, input, select, textarea, label,
.btn, .tab, .cal-cell, .cal-nav button, .upload-zone,
.mood-opt, .thumb-item, .music-btn, .mpost-edit, .nav a,
.modal-close, .mile, .post-row, .gate-title, .compose-bar a, .compose-bar button {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 3) 输入框/文本域仍允许正常选中复制（只禁高亮，不禁选择） */
input, textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* 4) 去掉聚焦时的默认描边（移动端点击后残留的蓝框），但保留键盘 Tab 导航的可见焦点 */
a:focus, button:focus, input:focus, select:focus, textarea:focus,
.btn:focus, .tab:focus, .cal-cell:focus { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible,
.btn:focus-visible, .tab:focus-visible {
  outline: 2px solid var(--hot);
  outline-offset: 2px;
}

/* 5) 用我们自己的按压反馈替代系统蓝块：轻微缩放 + 透明度（仅按钮/链接类）。
      注意：不给 .cal-cell / .upload-zone / .mile 加 transform，避免 iOS 上
      :active 卡住导致弹窗打开后残留缩放（此前月历"残影"就是同类问题）。 */
.btn:active, .tab:active, .cal-nav button:active,
.mood-opt:active, .mpost-edit:active, .nav a:active,
.modal-close:active, .compose-bar a:active, .compose-bar button:active,
.music-btn:active {
  transform: scale(0.97);
  opacity: 0.88;
}

/* 6) 触摸设备（手机/平板）下禁用 hover 态：避免 iOS Safari 点过的元素
      hover 样式"粘住"不恢复（表现为点完一直高亮/位移） */
@media (hover: none) {
  .btn:hover, .tab:hover, .nav a:hover, .mpost-edit:hover,
  .modal-close:hover, .music-btn:hover, .mood-opt:hover,
  .compose-bar a:hover, .compose-bar button:hover,
  .nav .nav-pub:hover { transform: none; box-shadow: none; filter: none; }
  /* 卡片类 hover 位移在手机上同样禁用 */
  .card:hover, .mile:hover, .post-row:hover, .cal-cell:hover { transform: none; }
}

/* ---------- 访客记录表（隐藏页面 /visits.html） ---------- */
.vst-err { min-height: 18px; margin-top: 8px; font-size: 12.5px; color: #C0303F; }
.vst-tip { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }
.vst-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.vst-stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 14px; text-align: center; }
.vst-stat .vst-num { font-size: 26px; font-weight: 500; color: var(--hot); line-height: 1.2; }
.vst-stat .vst-num.small { font-size: 17px; }
.vst-stat .vst-lab { margin-top: 6px; font-size: 11.5px; color: var(--ink-3); letter-spacing: .08em; }
.vst-stat.hot { border-color: var(--hot); background: linear-gradient(180deg, #FFF4F2 0%, #FFE9E6 100%); }
.vst-dev .vst-dev-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vst-name-input { flex: 1 1 160px; min-width: 140px; padding: 7px 10px; font-size: 14px;
  border: 1px dashed var(--line-2); border-radius: 6px; background: transparent; color: var(--ink-1); }
.vst-name-input:focus { border-color: var(--hot); border-style: solid; }
.vst-badge { font-size: 11.5px; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 10px; }
.vst-dev-meta { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); line-height: 1.9; }
.vst-code { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; color: var(--ink-2); background: var(--bg, #FAF6F0); border-radius: 4px; padding: 1px 6px; }
.vst-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vst-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.vst-table th { text-align: left; font-weight: 500; font-size: 11.5px; letter-spacing: .12em;
  color: var(--ink-3); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.vst-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.vst-table tr:last-child td { border-bottom: none; }
.vst-table .vst-t { display: block; color: var(--ink-1); white-space: nowrap; }
.vst-table .vst-ago { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-3); }
.vst-table .vst-sub { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-3); }
.vst-table .vst-ip { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.vst-del { background: transparent; border: none; color: var(--ink-3); cursor: pointer; font-size: 14px; padding: 2px 6px; }
.vst-del:hover { color: #C0303F; }
/* 设备筛选条 + 可点设备卡片 */
.vst-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.vst-chip { border: 1px solid var(--line-2); background: var(--card); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.vst-chip.on { background: var(--hot); border-color: var(--hot); color: #fff; }
.vst-dev { cursor: pointer; }
.vst-dev.filtered { border-color: var(--hot); box-shadow: 0 0 0 1px var(--hot) inset; }
.vst-note { font-size: 12px; color: var(--ink-3); margin-bottom: 8px; }
@media (max-width: 720px) {
  .vst-stats { grid-template-columns: repeat(2, 1fr); }
  .vst-table th, .vst-table td { padding: 10px 10px; }
}