/* ============================================================
   我的视频日记 · UI v3 五套主题系统
   克制留白 / 毛玻璃顶栏 / 分层阴影 / 5套主题 / 全端响应
   ============================================================ */

/* ---- 设计令牌 ---- */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  /* 设计常量 */
  --spring: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.25, .46, .45, .94);
  --tap: 44px;          /* 最小可点区域（HIG） */
  --tap-l: 48px;        /* 大按钮：卡片操作、列表按钮 */
  --field-h: 52px;      /* 手机端表单控件高度 */
  --btn-xl: 56px;       /* 主操作按钮（表单提交、空态） */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --topbar-h: 48px;

  /* 默认主题 t1 静谧深空 */
  --bg: #0f1117;
  --surface: #1b1f29;
  --surface-2: #2c313a;
  --border: rgba(255, 255, 255, .12);
  --border-strong: rgba(255, 255, 255, .22);
  --text: #e5e7eb;
  --text-2: #9ca3af;
  --muted: #8e8e93;
  --accent: #3b82f6;
  --accent-2: #5e6ad2;
  --on-accent: #ffffff;
  --danger: #ef4444;
  --warn: #fbbf24;
  --ok: #10b981;

  --r-s: 8px;  --r-m: 12px; --r-l: 16px; --r-xl: 22px;
  --shadow-s: 0 1px 4px rgba(0, 0, 0, 0.25);
  --shadow-m: 0 4px 14px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.35);
}

/* ---- 主题 t2 暖茶棕 ---- */
html[data-theme="t2"] {
  --bg: #27221f;
  --surface: #38322e;
  --surface-2: #4a433e;
  --border: rgba(255, 255, 255, .10);
  --border-strong: rgba(255, 255, 255, .20);
  --text: #f3e9e0;
  --text-2: #b8a99f;
  --muted: #a89a8f;
  --accent: #d97706;
  --accent-2: #b45309;
  --danger: #dc2626;
  --warn: #f59e0b;
  --ok: #65a30d;
  --shadow-s: 0 1px 4px rgba(0, 0, 0, 0.30);
  --shadow-m: 0 4px 14px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.38);
}

/* ---- 主题 t3 森屿绿 ---- */
html[data-theme="t3"] {
  --bg: #0f1c1a;
  --surface: #1a2e2b;
  --surface-2: #29423e;
  --border: rgba(255, 255, 255, .12);
  --border-strong: rgba(255, 255, 255, .21);
  --text: #e6f4f1;
  --text-2: #8fb8af;
  --muted: #789c96;
  --accent: #10b981;
  --accent-2: #059669;
  --danger: #f87171;
  --warn: #facc15;
  --ok: #84cc16;
  --shadow-s: 0 1px 4px rgba(0, 0, 0, 0.22);
  --shadow-m: 0 4px 14px rgba(0, 0, 0, 0.26);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.30);
}

/* ---- 主题 t4 薰衣紫 ---- */
html[data-theme="t4"] {
  --bg: #171420;
  --surface: #262137;
  --surface-2: #38304f;
  --border: rgba(255, 255, 255, .11);
  --border-strong: rgba(255, 255, 255, .20);
  --text: #ede9fe;
  --text-2: #c4b5fd;
  --muted: #a78bfa;
  --accent: #8b5cf6;
  --accent-2: #7c3aed;
  --danger: #f43f5e;
  --warn: #fbbf24;
  --ok: #22c55e;
  --shadow-s: 0 1px 4px rgba(0, 0, 0, 0.28);
  --shadow-m: 0 4px 14px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.36);
}

/* ---- 主题 t5 纸感米白 ---- */
html[data-theme="t5"] {
  --bg: #fafaf7;
  --surface: #ffffff;
  --surface-2: #f1efe9;
  --border: rgba(60, 60, 67, .10);
  --border-strong: rgba(60, 60, 67, .22);
  --text: #1c1917;
  --text-2: #78716c;
  --muted: #8e8e93;
  --accent: #0284c7;
  --accent-2: #0369a1;
  --danger: #dc2626;
  --warn: #f59e0b;
  --ok: #4d7c0f;
  --shadow-s: 0 1px 4px rgba(0, 0, 0, 0.07);
  --shadow-m: 0 4px 14px rgba(0, 0, 0, 0.11);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.15);
}

/* ---- 基础 ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* 移动端只允许单指平移/滚动：双指缩放与双击缩放都关闭（v1.61.10）。
   touch-action 只过滤浏览器手势，不拦 click，按钮和链接照常工作。 */
html, body { touch-action: pan-x pan-y; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}
/* 主题切换 250ms 柔和过渡，GPU 加速 */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition: background-color 250ms ease, border-color 250ms ease,
              color 250ms ease, box-shadow 250ms ease, fill 250ms ease,
              stroke 250ms ease, outline-color 250ms ease !important;
}
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

a { color: var(--accent); text-decoration: none; }
a:hover { opacity: .85; }
img, video { max-width: 100%; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }
button, input, select, textarea { accent-color: var(--accent); }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }

/* ---- 顶栏（v1.52.0）：左汉堡呼出抽屉 + 中间文字导航（日记/拍摄/主题）+ 右页计数 ---- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  height: var(--topbar-h);
  padding: 0 12px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
}
.topbar-left { display: flex; align-items: center; gap: 2px; min-width: 0; }
.topbar-right { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }

/* ---- 底部导航栏（v1.54.6，实体贴底栏）----
   全宽贴底（计入安全区），实体底色 var(--surface-2)，和页面背景 --bg 明确区分，
   顶部一条发丝描边收边；四个文字槽都是「上图标 + 10.5px 小字」，
   当前项 accent 高亮并带浅胶囊底；中央 68px 双色渐变圆钮压在栏沿上。 */
.tabbar {
  position: fixed; z-index: 55;
  left: 0; right: 0; bottom: 0;
  padding-bottom: var(--safe-b);
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 28px -24px rgba(0, 0, 0, .55);
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out);
}
.tabbar-inner {
  height: 58px;
  display: flex; align-items: stretch;
  padding-left: max(5px, var(--safe-l));
  padding-right: max(5px, var(--safe-r));
}
/* 文字槽（iOS 风）：上图标、下小字；当前页 accent + 浅色胶囊底 */
.tab-item {
  flex: 1; min-width: 0;
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  margin: 5px 2px;
  padding: 0; border: 0; border-radius: 15px;
  background: none; box-shadow: none;
  font-family: inherit; font-size: 10.5px; font-weight: 600; line-height: 1;
  letter-spacing: .02em;
  color: var(--text-2);
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  transition: color .18s var(--ease-out), background-color .18s var(--ease-out), transform .12s ease;
}
.tab-item .ico { width: 21px; height: 21px; }
.tab-item .tab-tx { display: block; }
.tab-item:hover { color: var(--text); opacity: 1; transform: none; }
.tab-item:active { transform: scale(.94); }
.tab-item.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}
/* 中央拍摄：68px 双色渐变圆钮；底边与底栏下沿对齐（沉入栏内，顶部凸出 10px） */
.tab-cam {
  position: relative;
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0;
  background: none; box-shadow: none;
  color: var(--on-accent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  transition: transform .16s cubic-bezier(.34, 1.56, .64, 1);
}
.tab-cam::before {
  content: "";
  position: absolute; left: 50%; top: 58px;
  width: 68px; height: 68px;
  transform: translate(-50%, -100%);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--accent) 6%, var(--accent-2) 94%);
  box-shadow:
    0 14px 30px -14px color-mix(in srgb, var(--accent) 90%, transparent),
    0 5px 14px -6px rgba(0, 0, 0, .5),
    inset 0 1px 0 color-mix(in srgb, var(--on-accent) 45%, transparent),
    inset 0 -2px 6px color-mix(in srgb, #000 16%, transparent);
  transition: filter .18s ease, box-shadow .2s ease;
}
/* 图标与圆钮同心（圆心在底栏内 24px 处） */
.tab-cam .ico {
  position: absolute; left: 50%; top: 24px;
  width: 28px; height: 28px;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.tab-cam:hover { opacity: 1; }
.tab-cam:hover::before { filter: brightness(1.08) saturate(1.05); }
.tab-cam:active { transform: scale(.94); }
/* 拍摄页：中央钮就是当前页（点了直接调摄像头），加一圈柔光环 */
.tab-cam.current::before {
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent),
    0 14px 30px -14px color-mix(in srgb, var(--accent) 90%, transparent),
    0 5px 14px -6px rgba(0, 0, 0, .5),
    inset 0 1px 0 color-mix(in srgb, var(--on-accent) 45%, transparent),
    inset 0 -2px 6px color-mix(in srgb, #000 16%, transparent);
}
/* 桌面/平板：栏体限宽居中贴底（顶角收圆），不横贯宽屏 */
@media (min-width: 769px) {
  .tabbar {
    left: 50%; right: auto;
    transform: translateX(-50%);
    width: min(520px, 100%);
    border: 1px solid var(--border); border-bottom: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -14px 34px -26px rgba(0, 0, 0, .55);
  }
}
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.brand > a { display: flex; align-items: center; gap: 9px; color: var(--text); min-width: 0; }
.brand .brand-name { font-size: 16.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.brand .mp4-count, .brand .mp4-page { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.brand .mp4-page { flex: none; white-space: nowrap; }
.brand .brand-logo { width: 28px; height: 28px; border-radius: 6px; }

/* ---- 管理员 · 用户管理 ---- */
.admin-users { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.admin-user-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--card, transparent); }
.admin-user-card.status-pending { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.admin-user-card.status-disabled, .admin-user-card.status-rejected { opacity: .65; }
.au-name { font-size: 15.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.au-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.au-stats { color: var(--text); font-weight: 600; }
.au-ops { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.au-pw-input { width: 9.5em; padding: 5px 8px; font-size: 13px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); }

/* ---- 管理员 · 查看某用户日记 ---- */
.admin-diary-list { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.admin-diary-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; }
.adr-title { font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none; }
.adr-title:hover { color: var(--accent); }
.adr-meta { font-size: 12.5px; color: var(--muted); }

/* ---- 品牌徽标 ---- */
.logo-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 17px;
  box-shadow: none;
  flex: none;
}
.logo-badge.sm { width: 32px; height: 32px; border-radius: 7px; font-size: 15px; }

/* 顶栏/登录页的红色日记本图标（favicon.ico），直接展示图片本身，不再套色块 */
.brand-logo { display: block; width: 32px; height: 32px; flex: none; border-radius: 7px; }
.brand-logo.lg { width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 22px; }

/* ---- 按钮 ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 13.5px; font-weight: 550;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  transition: background .18s, border-color .18s, transform .08s, box-shadow .18s, opacity .18s;
}
.btn:hover { border-color: var(--border-strong); background: color-mix(in srgb, var(--surface-2) 85%, var(--accent) 8%); opacity: 1; }
.btn:active { transform: translateY(1px) scale(.96); background: color-mix(in srgb, var(--surface-2) 78%, var(--accent) 14%); }
.btn.primary:active { filter: brightness(.92); box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary {
  border-color: color-mix(in srgb, var(--on-accent) 30%, transparent);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--accent) 45%, transparent);
}
.btn.primary:hover { background: var(--accent); filter: brightness(1.07); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 16%, transparent); }
.btn.small { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }

/* ---- 图标（v1.50.0）：内联 SVG sprite，stroke 继承 currentColor，随主题变色 ---- */
.ico {
  width: 16px; height: 16px; flex: none;
  display: inline-block; vertical-align: -2.5px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* 顶栏图标按钮：方形、无边框，hover 出底 */
.ico-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  padding: 0; border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--text-2);
  font-family: inherit; line-height: 1;
  cursor: pointer; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background .15s linear, color .15s linear, border-color .15s linear, transform .12s var(--spring);
}
.ico-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); opacity: 1; }
.ico-btn:active { transform: scale(.92); }
.ico-btn .ico { width: 18px; height: 18px; }
.ico-btn[aria-expanded="true"] { background: var(--surface-2); color: var(--text); border-color: var(--border); }

.inline { display: inline; }

/* t1 静谧深空：蓝色实心按钮，圆角10px，hover轻微上浮提亮 */
html[data-theme="t1"] .btn.primary { border-radius: 10px; }
html[data-theme="t1"] .btn.primary:hover { transform: translateY(-1px); filter: brightness(1.12); }

/* t2 暖茶棕：橙色实心按钮，圆角14px，hover微弱内发光 */
html[data-theme="t2"] .btn.primary { border-radius: 14px; }
html[data-theme="t2"] .btn.primary:hover { box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 24%, transparent), 0 6px 16px -10px color-mix(in srgb, var(--accent) 45%, transparent); }

/* t3 森屿绿：绿色描边按钮，圆角8px，hover填充主色 */
html[data-theme="t3"] .btn.primary { border-radius: 8px; background: transparent; color: var(--accent); border-color: var(--accent); box-shadow: none; }
html[data-theme="t3"] .btn.primary:hover { background: var(--accent); color: var(--on-accent); }

/* t4 薰衣紫：低饱和紫色渐变按钮，圆角16px，hover柔和放大 */
html[data-theme="t4"] .btn.primary { border-radius: 16px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; }
html[data-theme="t4"] .btn.primary:hover { transform: scale(1.02); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--accent) 40%, transparent); }

/* t5 纸感米白：浅色底深色文字按钮，圆角12px，hover增加柔和阴影 */
html[data-theme="t5"] .btn.primary { border-radius: 12px; background: var(--surface-2); color: var(--text); border-color: var(--border-strong); box-shadow: none; }
html[data-theme="t5"] .btn.primary:hover { box-shadow: var(--shadow-m); border-color: var(--accent); color: var(--accent); }

/* ---- 通用容器 ---- */
.mp4-wrap { max-width: 1120px; margin: 0 auto; padding: 26px 22px 72px; }
.edit-form { max-width: 960px; margin: 0 auto; padding: 28px 22px 72px; }

/* ---- 卡片网格（管理页）：WEB 端按分辨率自适应列数，左右铺满浏览器 ----
   720P 及以下 1 列 / 1080P 2 列 / 2K 3 列 / 4K 4 列 */
.mp4-wrap.wrap-wide { max-width: none; }
.mp4-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 1.3vw, 26px); }
@media (min-width: 1281px) { .mp4-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1921px) { .mp4-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 2561px) { .mp4-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mp4-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--shadow-s);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.mp4-card:hover { transform: translateY(-1px); border-color: var(--border-strong); box-shadow: var(--shadow-m); }

/* t1 静谧深空：纯色卡面，圆角16px，弱化白色细边框（内容优先） */
html[data-theme="t1"] .mp4-card {
  border-radius: 16px;
  border-color: rgba(255, 255, 255, .12);
  background: var(--surface);
}

/* t2 暖茶棕：茶色哑光卡面，圆角16px，弱边框 */
html[data-theme="t2"] .mp4-card {
  border-radius: 16px;
  border-color: rgba(255, 255, 255, .10);
  background: var(--surface);
}

/* t3 森屿绿：绿暗结构感卡片，圆角12px，边框清晰强调结构 */
html[data-theme="t3"] .mp4-card {
  border-radius: 12px;
  border-color: rgba(255, 255, 255, .12);
  border-width: 1.5px;
}

/* t4 薰衣紫：纯色卡面，圆角16px */
html[data-theme="t4"] .mp4-card {
  border-radius: 16px;
  background: var(--surface);
  border-color: rgba(255, 255, 255, .11);
}

/* t5 纸感米白：白色纸张感卡片，圆角16px，浅灰极细边框 */
html[data-theme="t5"] .mp4-card {
  border-radius: 16px;
  border-color: rgba(60, 60, 67, .10);
  background: #ffffff;
}

.mp4-player { position: relative; aspect-ratio: 16/9; background: #05070b; overflow: hidden; }
.mp4-player video { width: 100%; height: 100%; object-fit: contain; display: block; background: #05070b; }
/* 控件栏默认半透明，hover 时才实心，减少对视频本身的遮挡 */
.mp4-player video::-webkit-media-controls-panel { opacity: .55; transition: opacity .25s; }
.mp4-player:hover video::-webkit-media-controls-panel,
.mp4-player video::-webkit-media-controls-panel:hover { opacity: 1; }
/* 画质切换悬浮在预览区右上角 */
.mp4-player .qual-btn { position: absolute; top: 8px; right: 8px; z-index: 4; }
.mp4-player video.no-poster { background: linear-gradient(160deg, #1b2430, #0b1220); }
/* v1.56.0：多段日记的分段连播条（原片逐段播放，不融合） */
.mp-segs { display: flex; gap: 6px; padding: 8px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.mp-segs::-webkit-scrollbar { display: none; }
.mp-seg { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 4px 9px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text-2); font-size: 12px; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mp-seg b { font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; }
.mp-seg span { color: var(--muted); font-variant-numeric: tabular-nums; }
.mp-seg.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.mp-seg.active b, .mp-seg.active span { color: var(--accent); }
.mp-seg:hover { border-color: var(--border-strong); }
.parts-chip { font-size: 11px; padding: 1px 6px; opacity: .8; }
.mp4-player.no-poster::before {
  content: "▶"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%; z-index: 2; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .38); color: #fff; font-size: 19px;
  padding-left: 3px;
}
.mp4-player::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.16));
}
.mp4-body { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
/* 日记标题：卡片最上端、视频上方整行显示（全文，不省略；v1.52.4 起不加粗、字号 -3px） */
.mp4-title { font-size: 13px; font-weight: 400; color: var(--text); line-height: 1.4; word-break: break-word; }
.mp4-card > .mp4-title {
  padding: 10px 14px; line-height: 1.5;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
/* 标题行首的所属标签 chip：与序号之间留 6px */
.mp4-title .tag-chip { margin-right: 6px; vertical-align: 1px; }
/* 序号徽标：固定序号（最早=1），钉在标题前 */
.mp4-num {
  display: inline-block; min-width: 1.7em; margin-right: 8px; padding: 1px 7px;
  border-radius: 999px; text-align: center; vertical-align: 1px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent); font-size: 13px; font-weight: 700;
}
/* 元信息（v1.52.9 精简版 / v1.52.17 起加回拍摄地点）：日期 + 地点 + 天气 + 温度 + 分享角标 */
.mp4-meta1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
/* 拍摄地点：data-lat/data-lon 里带着导航坐标，点一下直接调起高德（app.js 委托 .nav-loc）。
   胶囊是 inline-flex，text-overflow 得落在内层的 .loc-tx 上才生效（长 POI 名单行省略号收尾，
   否则匿名文本 item 会撑破卡片） */
.mp4-meta1 .nav-loc {
  display: inline-flex; align-items: center; gap: 3px; min-width: 0; max-width: 100%;
  padding: 1px 8px; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent);
  transition: transform .14s var(--spring);
  -webkit-tap-highlight-color: transparent;
}
.mp4-meta1 .nav-loc .ico { width: 12px; height: 12px; flex: none; }
.mp4-meta1 .nav-loc .loc-tx { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 尾巴给罗盘：点一下直接导航，不展开列表 */
.mp4-meta1 .nav-loc::after { content: '🧭'; font-size: 11px; opacity: .75; flex: none; }
.mp4-meta1 .nav-loc:active { transform: scale(.96); }
.diary-card { margin: 8px 0 0; }
/* AI 字幕标题：可点，展开/收起转写正文 */
.diary-tag {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent); letter-spacing: .02em;
}
.diary-tag .ico { width: 14px; height: 14px; }
.diary-tag:hover { filter: brightness(1.12); }
.diary-caret { display: inline-flex; font-style: normal; line-height: 1; transition: transform .18s; }
.diary-caret .ico { width: 13px; height: 13px; }
.diary-tag[aria-expanded="true"] .diary-caret { transform: rotate(180deg); }
/* AI 转写正文：默认折叠（hidden），点标题展开 */
.mp4-remark {
  font-size: 14px; line-height: 1.75; color: var(--text-2);
  white-space: pre-wrap; word-break: break-word; margin-top: 6px;
}
/* 搜索命中高亮：只包可见文本节点（AI字幕/地点），随主题自适应 */
mark.sr-hit { background: var(--accent); color: var(--on-accent); border-radius: 3px; padding: 0 1px; }
.mp4-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 2px; }
/* ---- 卡片操作栏（v1.50.0 图标化）：右对齐一排小图标，语义描边配色 ---- */
.mp4-ops {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}
/* 卡片操作：图标 + 文字的圆角按钮（v1.52.5 起换掉纯图标） */
.icon-op {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 26px; padding: 0 10px; flex: none;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); color: var(--text-2);
  font-family: inherit; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap;
  cursor: pointer; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background .15s linear, border-color .15s linear, color .15s linear, transform .1s var(--spring);
}
.icon-op .ico { width: 14px; height: 14px; }
.icon-op:hover { border-color: var(--border-strong); }
.icon-op:active { transform: scale(.96); }
.icon-op:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.icon-op.op-edit:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.icon-op.op-share:hover { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 45%, var(--border)); }
.icon-op.op-dl:hover { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.icon-op.op-danger:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
/* 已分享状态：强调色底 + 边框，文字同步换成「已分享」（模板/JS） */
.icon-op.share-card-btn.on { color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 14%, transparent); border-color: color-mix(in srgb, var(--accent-2) 35%, transparent); }
/* 下载悬浮菜单：点「下载」向上弹出，列出原片 / 标清 / 原片素材 */
.dl-wrap { position: relative; display: inline-flex; }
.dl-menu {
  position: absolute; bottom: calc(100% + 8px); right: 0;
  min-width: 196px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px; z-index: 60;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: var(--shadow-lg);
  animation: fadeIn .14s ease;
}
.dl-menu[hidden] { display: none; }
.dl-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 8px; width: 100%;
  font-size: 13px; font-weight: 600; color: var(--text); text-align: left;
  background: transparent; border: 0; cursor: pointer; white-space: nowrap;
  text-decoration: none; transition: background .15s;
}
.dl-item:hover { background: var(--surface-2); }
.dl-sub { color: var(--muted); font-size: 11.5px; font-weight: 500; }
/* 手机端下载选项底部弹层（v1.54.2）：固定视口，避免被视频层或卡片 overflow 遮挡 */
.dl-sheet {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, .48);
  animation: fadeIn .14s ease;
}
.dl-sheet[hidden] { display: none; }
.dl-sheet-panel {
  width: 100%; max-width: 520px;
  padding: 6px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border: 1px solid var(--border); border-bottom: 0;
  border-radius: 18px 18px 0 0;
  box-shadow: var(--shadow-lg);
  animation: sheetUp .18s ease;
}
.dl-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 6px 10px; color: var(--text); font-size: 15px; font-weight: 700;
}
.dl-sheet-close {
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: var(--surface-2); color: var(--text-2);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.dl-sheet-list { display: flex; flex-direction: column; gap: 2px; }
.dl-sheet-list .dl-item { padding: 14px 12px; font-size: 14px; background: var(--surface-2); }
@keyframes sheetUp {
  from { transform: translateY(18px); opacity: .6; }
  to { transform: translateY(0); opacity: 1; }
}
.danger-text { color: var(--danger); }

/* ---- 日记图片缩略图（卡片）+ 灯箱 ---- */
.imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.img-th {
  position: relative; aspect-ratio: 1/1; overflow: hidden;
  border-radius: 7px; background: var(--surface-2);
  border: 1px solid var(--border);
  display: block; color: inherit; opacity: 1;
}
.img-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.img-th:hover img { transform: scale(1.06); }
.img-th:hover { border-color: var(--border-strong); }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 4vmin;
  background: rgba(4, 6, 12, .88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
  animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox img {
  max-width: 100%; max-height: 100%;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  background: var(--surface);
}
/* 多拍原片素材弹层：列出各段，逐段下载（零转码零打包） */
.parts-modal {
  position: fixed; inset: 0; z-index: 210;
  display: flex; align-items: center; justify-content: center;
  padding: 4vmin;
  background: rgba(4, 6, 12, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: fadeIn .2s ease;
  touch-action: manipulation; /* 压掉双击缩放：弹层里改标签时点按快了两下就会被放大 */
}
.parts-panel {
  width: min(540px, 100%);
  max-height: 74vh;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.parts-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.parts-title {
  font-size: 15px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.parts-close {
  flex: none; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface-2); color: var(--text-2);
  font-size: 14px; cursor: pointer;
}
.parts-list {
  overflow-y: auto;
  padding: 10px 14px;
  -webkit-overflow-scrolling: touch;
}
.parts-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0;
}
.parts-row + .parts-row { border-top: 1px dashed var(--border); }
.parts-dl { flex: none; min-width: 120px; text-align: center; }
.parts-meta {
  flex: 1; min-width: 0;
  color: var(--muted); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 用户管理：删除用户确认弹层（是否一并删除磁盘素材，默认不删） */
.del-body { padding: 14px 16px; font-size: 13px; line-height: 1.7; color: var(--text-2); }
.del-body p { margin: 0; }
.del-body b { color: var(--text); }
.del-check {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 12px 0 6px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); color: var(--text); cursor: pointer;
}
.del-check input { flex: none; margin-top: 2px; width: 16px; height: 16px; accent-color: var(--danger); }
.del-hint { color: var(--muted); font-size: 12px; }
.del-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--border);
}
/* iOS 风格关闭按钮（触摸端没有 hover/ESC，缺一个明确的关闭入口） */
.lb-close {
  position: absolute; top: max(14px, var(--safe-t)); right: max(14px, var(--safe-r));
  z-index: 2;
  width: var(--tap); height: var(--tap);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.28); border-radius: 50%;
  background: rgba(28, 32, 40, .62);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  color: #fff; font-size: 17px; line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .14s var(--spring), background .15s linear;
}
.lb-close:active { transform: scale(.88); background: rgba(28, 32, 40, .8); }

/* ---- 编辑页：图片多选上传 ---- */
.imgs-edit {
  display: flex; flex-wrap: wrap; gap: 10px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-l);
  padding: 14px;
  background: color-mix(in srgb, var(--accent) 3%, transparent);
  transition: border-color .2s, background .2s;
}
.img-list { display: contents; }
.img-item {
  position: relative; width: 88px; height: 88px;
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.img-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-del {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.28); border-radius: 50%;
  background: rgba(8, 11, 18, .72);
  color: #fff; font-size: 12px; line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.img-del:hover { background: rgba(220, 60, 70, .9); }
.img-add {
  position: relative;
  width: 88px; height: 88px;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--border-strong);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  text-align: center;
  transition: border-color .18s, background .18s, color .18s;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.img-add input[type=file] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 0; border: 0;
  opacity: 0;
  cursor: pointer;
}
.img-add:hover, .img-add.dragover, .img-add:focus-within { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.img-add.busy { pointer-events: none; opacity: .7; }
.img-add-icon { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 22px; font-weight: 600; line-height: 1; }
.img-add-icon .ico { width: 22px; height: 22px; stroke-width: 1.7; }
.img-add-icon small { font-size: 11px; font-weight: 500; letter-spacing: .02em; }

/* ---- 收藏链接（编辑页 + 卡片）---- */
.link-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.link-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); font-size: 13.5px;
}
.link-item a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); text-decoration: none; }
.link-del {
  border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer;
  font-size: 13px; padding: 2px 4px; border-radius: 6px;
}
.link-del:hover { color: #dc3c46; background: color-mix(in srgb, #dc3c46 12%, transparent); }
.link-add { display: flex; gap: 8px; }
.link-add input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; }
.link-src {
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  padding: 1.5px 6px; border-radius: 5px; white-space: nowrap;
  color: #fff; background: var(--muted);
}
.link-src.src-weixin, .link-thumb.src-weixin { background: #07c160; }
.link-src.src-video, .link-thumb.src-video { background: #576b95; }
.link-src.src-bili, .link-thumb.src-bili { background: #fb7299; }
.link-src.src-xhs, .link-thumb.src-xhs { background: #ff2442; }
.link-src.src-douyin, .link-thumb.src-douyin { background: #fe2c55; }
.link-src.src-taobao, .link-thumb.src-taobao { background: #ff5000; }
.link-src.src-weibo, .link-thumb.src-weibo { background: #e6162d; }
.link-src.src-zhihu, .link-thumb.src-zhihu { background: #1772f6; }
.link-src.src-kuaishou, .link-thumb.src-kuaishou { background: #ff6600; }
.link-src.src-other, .link-thumb.src-other { background: var(--muted); }
.link-thumb {
  width: 34px; height: 34px; flex: none;
  display: block; object-fit: cover;
  border-radius: 7px; background: var(--surface);
}
.link-thumb.sm { width: 24px; height: 24px; border-radius: 6px; }
.link-thumb.ph {
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 700; line-height: 1;
}
.link-thumb.sm.ph { font-size: 11px; }
.links-card { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.link-chip {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  font-size: 13px; color: var(--text-2); text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 3px 10px 3px 4px; border-radius: 999px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.link-chip:hover { color: var(--accent); border-color: var(--accent); }
.share-links { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-top: 14px; }

/* ---- 徽章 / chips ---- */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 500;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
/* chip 化的链接（播放统计入口）：保证 ≥44pt 触控高度 */
.chip-link {
  color: var(--text-2); text-decoration: none; opacity: 1;
  min-height: 30px; padding: 4px 11px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background .15s linear, color .15s, transform .12s var(--spring);
}
/* 不改视觉尺寸，用透明外扩把触控区撑到 46pt（不侵入相邻 chip 的 7px 间隙） */
.chip-link { position: relative; }
.chip-link::after { content: ""; position: absolute; inset: -8px -2px; border-radius: 7px; }
.chip-link:hover { opacity: 1; }
.chip-link:active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.chip-link:active::after { background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* ---- 日记分组 ---- */
.grp { margin-bottom: 28px; }
.grp-label {
  display: flex; align-items: center; gap: 10px;
  margin: 2px 0 13px;
  font-size: 13px; font-weight: 700;
  letter-spacing: .14em;
  color: var(--muted);
  text-transform: uppercase;
}
.grp-label::before { content: ""; width: 3px; height: 14px; border-radius: 4px; background: var(--accent); }
.grp-count {
  font-size: 11.5px; font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 1px 8px; border-radius: 999px;
  text-transform: none; letter-spacing: 0;
}

/* ---- 日记信息行 ---- */
.diary-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* 分享页地点胶囊同样独占一行，长 POI 名不与日期天气挤 */
.diary-line .nav-loc { flex-basis: 100%; }
.dl {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
}
.dl b, .dl i { font-style: normal; font-weight: 650; color: var(--accent); }

/* ---- 点地点调起导航 ---- */
/* .dl 原本只有 2px 内边距，不够点；地点单独撑到 44px 高，其余胶囊保持原样不跑版 */
.dl.nav-loc {
  min-height: var(--tap);
  padding: 0 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s var(--spring), border-color .15s linear, background .15s linear;
}
/* 点一下直接调起高德导航，不再展开列表，所以尾巴给罗盘而不是箭头 */
.dl.nav-loc::after { content: ' 🧭'; opacity: .7; }
.dl.nav-loc:active { transform: scale(.96); border-color: var(--border-strong); }
a.trash-nav { color: var(--accent); text-decoration: none; }
a.trash-nav:active { opacity: .6; }

.nav-sheet {
  position: fixed; inset: 0; z-index: 240;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(4, 6, 12, .58);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: fadeIn .16s ease;
}
.nav-sheet-bd {
  width: 100%; max-width: 520px;
  padding: 16px 16px calc(16px + var(--safe-b));
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  box-shadow: var(--shadow-lg);
  animation: navSheetUp .22s var(--spring);
}
@keyframes navSheetUp { from { transform: translateY(14px); opacity: .4; } to { transform: none; opacity: 1; } }
.nav-sheet-hd { display: flex; align-items: center; gap: 8px; }
.nav-sheet-hd b { font-size: 14px; color: var(--muted); font-weight: 600; flex: none; }
.nav-sheet-name {
  flex: 1; min-width: 0;
  font-size: 15.5px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-sheet-x {
  flex: none;
  width: 32px; height: 32px; margin: -6px -4px -6px 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface-2); color: var(--text-2);
  font-size: 14px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-sheet-st { margin: 6px 0 10px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.nav-sheet-btns { display: flex; flex-direction: column; gap: 8px; }
.nav-btn {
  display: flex; align-items: center; gap: 11px;
  min-height: var(--tap); padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 13px;
  background: var(--surface-2); color: var(--text);
  font-size: 14px; font-family: inherit; text-align: left; text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s var(--spring), border-color .15s linear;
}
.nav-btn:active { transform: scale(.98); border-color: var(--border-strong); }
.nav-btn[disabled] { opacity: .5; cursor: default; }
.nav-btn-ico { flex: none; width: 26px; display: flex; align-items: center; justify-content: center; color: var(--text-2); line-height: 1; }
.nav-btn-ico .ico { width: 18px; height: 18px; }
.nav-btn-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nav-btn-tx b { font-weight: 650; font-size: 14.5px; }
.nav-btn-tx i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.nav-arrow { flex: none; color: var(--muted); font-size: 19px; }

/* ---- 左侧抽屉菜单（v1.52.0）：顶栏汉堡呼出，从左滑入 ----
     全站低频操作一站式入口：内容导航 + 账户 + 管理员区 + 退出。 */
.drawer-veil {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .28s var(--ease-out);
}
.drawer-veil.show { opacity: 1; }
.drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 195;
  width: min(74vw, 281px);
  display: flex; flex-direction: column;
  padding: calc(12px + var(--safe-t)) 14px calc(16px + var(--safe-b)) max(14px, var(--safe-l));
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transform: translateX(-102%);
  transition: transform .32s var(--spring);
  will-change: transform;
}
.drawer.show { transform: none; }
body.drawer-lock { overflow: hidden; }
.drawer-hd { display: flex; align-items: center; gap: 10px; padding: 2px 2px 8px; }
.drawer-hd .brand-logo { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.drawer-id { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.drawer-id b { font-size: 15.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-id small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-x {
  flex: none; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface-2); color: var(--text-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s var(--spring);
}
.drawer-x:active { transform: scale(.9); }
.drawer-x .ico { width: 14px; height: 14px; stroke-width: 2.2; }
.drawer-nav { display: flex; flex-direction: column; padding-bottom: 4px; flex: 1; }
/* 底部版本行：菜单内容不足一屏时也贴底显示 */
.drawer-foot {
  margin-top: 18px; padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  font-size: 12px; color: var(--muted); text-align: center;
}
/* 分组卡片：圆角容器 + 行间发丝分隔线 */
.drawer .me-grp, .drawer .me-logout {
  margin: 10px 0 0;
  display: flex; flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 15px;
  overflow: hidden;
}
.drawer .me-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: var(--tap); padding: 7px 14px;
  border: 0; background: transparent; color: var(--text);
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  text-align: left; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .14s linear;
}
.drawer .me-row + .me-row { border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.drawer .me-row:active { background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* 图标底色块：中性灰底，主题行给强调色 */
.drawer .me-ico {
  flex: none; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--text-2) 12%, transparent);
  color: var(--text-2);
}
.drawer .me-ico .ico { width: 17px; height: 17px; }
.drawer .me-tx { flex: 1; min-width: 0; }
/* 主题行：右侧显示当前主题名（v1.52.11 回归），图标底色块用强调色 */
.drawer .me-val { flex: none; font-size: 13px; font-weight: 500; color: var(--muted); }
.drawer .me-ico-accent { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.drawer .me-arrow { flex: none; display: inline-flex; color: var(--muted); opacity: .8; }
.drawer .me-arrow .ico { width: 15px; height: 15px; }
/* 退出登录：整行红色，图标底色也红 */
.drawer .me-danger .me-tx, .drawer .me-danger .me-arrow { color: var(--danger); }
.drawer .me-danger .me-ico { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }

/* ---- 「选择地点」：微信发送位置风格的底部面板（独立于 .nav-sheet）---- */
.place-sheet {
  position: fixed; inset: 0; z-index: 250;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(4, 6, 12, .58);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: fadeIn .16s ease;
}
.place-sheet-bd {
  width: 100%; max-width: 520px;
  max-height: 72vh;
  display: flex; flex-direction: column;
  padding: 10px 16px calc(14px + var(--safe-b));
  background: var(--surface);
  border: 1px solid var(--border); border-bottom: 0;
  border-radius: 20px 20px 0 0;
  box-shadow: var(--shadow-lg);
  animation: navSheetUp .22s var(--spring);
}
/* 顶部的拖拽条，微信发送位置同款 */
.place-sheet-bd::before {
  content: '';
  align-self: center;
  width: 36px; height: 4px; margin: 2px 0 10px;
  border-radius: 3px;
  background: var(--border-strong);
  opacity: .55;
}
.place-hd { display: flex; align-items: center; gap: 10px; padding-bottom: 2px; }
.place-hd-ico {
  flex: none; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.place-hd-ico .ico { width: 18px; height: 18px; }
.place-hd-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.place-hd-tx b { font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.2; }
.place-cur {
  min-width: 0;
  font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.place-bar { display: flex; gap: 8px; margin-top: 12px; }
/* 字号必须 ≥16px：iOS Safari 对更小字号的输入框聚焦时会整页缩放 */
.place-search {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  min-height: var(--tap); padding: 0 8px 0 12px;
  border: 1px solid var(--border); border-radius: 13px;
  background: var(--surface-2);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.place-search:focus-within {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.place-search > .ico { flex: none; width: 16px; height: 16px; color: var(--muted); }
.place-bar input {
  flex: 1; width: auto; min-width: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; color: var(--text);
  font-size: 16px; min-height: 0; outline: none; box-shadow: none;
}
.place-bar input:focus { border: 0; box-shadow: none; background: transparent; }
.place-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.place-clear {
  flex: none; width: 24px; height: 24px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--text-2) 12%, transparent);
  color: var(--text-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s var(--spring);
}
.place-clear:active { transform: scale(.9); }
.place-clear[hidden] { display: none; }
.place-clear .ico { width: 11px; height: 11px; stroke-width: 2.4; }
.place-bt {
  flex: none; min-height: var(--tap); padding: 0 16px;
  border: 1px solid var(--border); border-radius: 13px;
  background: var(--surface-2); color: var(--text-2);
  font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s var(--spring), filter .14s linear;
}
.place-bt:active { transform: scale(.97); }
.place-do {
  border-color: color-mix(in srgb, var(--accent) 80%, transparent);
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 5px 14px -8px color-mix(in srgb, var(--accent) 55%, transparent);
}
.place-do:active { filter: brightness(.94); }
.place-tools {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 10px;
}
/* 距离范围：胶囊开关，默认 1 公里内，关闭后不限距离 */
.place-scope {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 32px; padding: 0 10px 0 7px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.place-scope input {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.place-switch {
  position: relative; flex: none;
  width: 30px; height: 18px; border-radius: 999px;
  background: color-mix(in srgb, var(--text-2) 26%, transparent);
  transition: background .18s;
}
.place-switch::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .18s var(--spring);
}
.place-scope input:checked + .place-switch { background: var(--accent); }
.place-scope input:checked + .place-switch::after { transform: translateX(12px); }
.place-scope input:focus-visible + .place-switch {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
}
.place-scope-tx {
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  white-space: nowrap;
}
.place-loc {
  flex: none;
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 32px; padding: 0 8px;
  border: 0; border-radius: 9px;
  background: transparent; color: var(--accent);
  font-size: 12.5px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .14s linear;
}
.place-loc:active { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.place-loc .ico { width: 14px; height: 14px; }
.place-st {
  margin: 10px 2px 2px; min-height: 16px;
  font-size: 11.5px; color: var(--muted); line-height: 1.5;
}
/* 列表比导航按钮多：可能有 25 条，所以内部自己滚动，面板高度封顶 */
.near-list {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 7px;
  margin-top: 8px; padding-right: 2px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.near-list::-webkit-scrollbar { width: 6px; }
.near-list::-webkit-scrollbar-track { background: transparent; }
.near-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-2) 28%, transparent);
}
body.place-lock { overflow: hidden; }
.near-tip { margin: 0; font-size: 12px; color: var(--muted); }
.near-item {
  display: flex; align-items: center; gap: 11px;
  min-height: 64px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface-2); color: var(--text);
  font-family: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s var(--spring), border-color .15s linear, background .15s linear;
}
.near-item:active {
  transform: scale(.985); border-color: var(--border-strong);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-2));
}
.near-item:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 1px;
}
.near-ico {
  flex: none; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-size: 16px;
}
.near-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.near-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.near-nm {
  flex: 1; min-width: 0;
  font-size: 14.5px; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.near-meta {
  font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.near-coord {
  font-size: 10px; color: var(--muted); opacity: .65;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.near-dist {
  flex: none; padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-size: 10.5px; font-weight: 650; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.near-go { flex: none; display: flex; color: var(--muted); opacity: .7; }
.near-go .ico { width: 14px; height: 14px; }
/* 加载骨架：查附近/搜索时先占位，面板不会突然空白 */
.near-skel {
  display: flex; align-items: center; gap: 11px;
  min-height: 64px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface-2);
}
.near-skel-ico {
  flex: none; width: 32px; height: 32px; border-radius: 10px;
  background: color-mix(in srgb, var(--text-2) 12%, transparent);
  animation: placePulse 1.2s ease-in-out infinite;
}
.near-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.near-skel-lines i {
  display: block; height: 9px; border-radius: 5px;
  background: color-mix(in srgb, var(--text-2) 12%, transparent);
  animation: placePulse 1.2s ease-in-out infinite;
}
.near-skel-lines i:last-child { width: 58%; }
@keyframes placePulse { 0%, 100% { opacity: .45; } 50% { opacity: .95; } }
@media (prefers-reduced-motion: reduce) {
  .near-skel-ico, .near-skel-lines i { animation: none; opacity: .7; }
}
/* 空结果：给一个明确的下一步，不留白 */
.near-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 5px; padding: 30px 16px 34px; text-align: center;
}
.near-empty-ico {
  width: 44px; height: 44px; margin-bottom: 3px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: var(--surface-2); color: var(--muted);
}
.near-empty-ico .ico { width: 20px; height: 20px; }
.near-empty b { font-size: 14px; font-weight: 650; color: var(--text); }
.near-empty > span:last-child { font-size: 12px; color: var(--muted); line-height: 1.6; }
/* 深色模式复用 .near-item 的现有变量（surface-2 / border），无需额外覆写 */

/* ---- 信息条（保留 .stat 供搜索提示复用）---- */
.stat { display: inline-flex; align-items: center; gap: 6px; }
.stat b { color: var(--text); font-weight: 650; }
.trash-link { color: var(--accent); font-weight: 600; }

/* ---- 保存成功绿条 ---- */
.saved-toast {
  position: sticky; top: 12px; z-index: 60;
  margin-bottom: 14px; padding: 12px 16px;
  display: flex; align-items: center; gap: 8px;
  background: #16a34a;
  color: #fff; font-weight: 600; font-size: 14px;
  border-radius: 9px;
  box-shadow: 0 6px 18px -8px rgba(21, 128, 61, .5);
  opacity: 0; transform: translateY(-8px);
  transition: opacity .4s, transform .4s;
}
.saved-toast.show { opacity: 1; transform: none; }

/* ---- 空状态 ---- */
.empty { text-align: center; padding: 72px 0; color: var(--muted); }
.empty .empty-icon {
  width: 86px; height: 86px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; color: var(--muted);
  border-radius: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-s);
}
.empty .empty-icon .ico { width: 38px; height: 38px; stroke-width: 1.5; }
.empty p { margin: 4px 0; font-size: 15px; }
.empty .btn { margin-top: 14px; }

/* ---- 表单 ---- */
input, select, textarea {
  width: 100%;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  padding: 10px 13px;
  font-size: 14px; font-family: inherit;
  outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
textarea { resize: vertical; min-height: 74px; }
textarea.diary-box { min-height: 300px; line-height: 1.8; font-size: 15px; }
input[type=password] { letter-spacing: 1px; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field > span, .field > label:first-child {
  font-size: 12.5px; font-weight: 600; color: var(--text-2); letter-spacing: .02em;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* 日期时间 · 按视频日期回填：勾选后日期/时间灰白不可选，由原片拍摄时间自动填入 */
.dt-auto {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--text-2);
  cursor: pointer; user-select: none;
}
.dt-auto input[type=checkbox] {
  width: 15px; height: 15px; flex: none;
  margin: 0; padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
input.dt-locked {
  background: var(--surface-2);
  color: var(--muted);
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
/* ---- 标签 ---- */
.tag-picker { display: flex; flex-wrap: wrap; gap: 5px; }
.tag-toggle {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 6px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 12px; color: var(--text-2);
  cursor: pointer; user-select: none;
  transition: background .15s, border-color .15s, color .15s;
}
.tag-toggle input[type=checkbox] {
  position: absolute; width: 0; height: 0; margin: 0; padding: 0;
  opacity: 0; pointer-events: none;
}
.tag-toggle input:checked + span { color: var(--accent); font-weight: 600; }
.tag-toggle:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}
.tag-toggle:focus-within { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
/* 卡片上的标签 */
/* 日记所属标签：只读 chip（v1.52.4 起展示在卡片标题行首） */
.tag-chip {
  font-size: 11px; line-height: 1;
  padding: 3px 7px; border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--accent); text-decoration: none;
}
.tag-chip:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
/* 首页标签筛选条：与拍摄页标签选择器（.tag-toggle）同规格，两处视觉一致 */
.tag-filter { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 4px; }
.tag-filter-item {
  font-size: 12px; padding: 4px 6px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-2); text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.tag-filter-item:hover { border-color: var(--accent); color: var(--accent); }
.tag-filter-item.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent); font-weight: 600;
}
.tag-filter-item .ico { width: 13px; height: 13px; }
/* 日记列表检索栏：关键词即时过滤 + 右侧日期区间（服务端按拍摄日期筛选） */
.diary-filter { margin: 10px 0 8px; }
.diary-searchbar { display: flex; align-items: stretch; gap: 8px; }
.diary-search-field {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.diary-search-field:focus-within {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.diary-search-field > .ico { flex: none; width: 16px; height: 16px; color: var(--muted); }
.diary-search-field input {
  flex: 1; width: auto; min-width: 0; min-height: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; color: var(--text);
  font-size: 16px; outline: none; box-shadow: none;
}
.diary-search-field input:focus { border: 0; box-shadow: none; background: transparent; }
.diary-search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.diary-date-btn {
  flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 38px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); color: var(--text-2);
  font-size: 12.5px; font-weight: 600; font-family: inherit;
  white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s var(--spring), border-color .15s, background .15s, color .15s;
}
.diary-date-btn:active { transform: scale(.97); }
.diary-date-btn .ico { width: 14px; height: 14px; }
.diary-date-btn .ico:last-child { width: 12px; height: 12px; opacity: .65; transition: transform .18s; }
.diary-date-btn[aria-expanded="true"] .ico:last-child { transform: rotate(180deg); }
.diary-date-btn.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.diary-date-panel {
  margin-top: 8px; padding: 12px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-2);
}
.diary-date-fields {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 8px; align-items: end;
}
.diary-date-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.diary-date-field span { font-size: 11px; color: var(--muted); }
.diary-date-field input {
  width: 100%; min-height: 36px; padding: 0 9px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
  font-size: 14px;
}
.diary-date-field input:focus { border-color: var(--accent); }
.diary-date-sep { padding-bottom: 9px; color: var(--muted); font-size: 13px; }
.diary-date-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.diary-date-presets button {
  min-height: 28px; padding: 0 9px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-2);
  font-size: 12px; font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.diary-date-presets button:hover { border-color: var(--accent); color: var(--accent); }
.diary-date-err { margin: 8px 0 0; font-size: 12px; color: var(--danger); }
.diary-date-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.diary-date-hint { flex: 1; font-size: 11.5px; color: var(--muted); text-align: center; }
@media (max-width: 520px) {
  .diary-date-field input { font-size: 16px; }
}
/* 编辑页「＋ 新标签」：虚线描边，风格与勾选项一致 */
.tag-add-btn { border-style: dashed; color: var(--muted); }
.tag-add-btn .ico { width: 13px; height: 13px; }
/* 首页标签管理入口 + 管理弹层行：与拍摄页「＋ 新标签」同款虚线按钮 */
.tag-filter-manage { cursor: pointer; border-style: dashed; font-family: inherit; color: var(--muted); }
.tag-filter-manage:hover { border-color: var(--accent); color: var(--accent); }
.tag-mng-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; }
.tag-mng-row + .tag-mng-row { border-top: 1px dashed var(--border); }
.tag-mng-name {
  flex: 1; min-width: 0; height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); color: var(--text);
  /* 16px 是硬要求：低于 16px 时 iOS/部分安卓浏览器聚焦输入框会强制放大整个页面，
     与手机媒体查询无关，所有视口尺寸都必须保持 16px */
  font-size: 16px;
  touch-action: manipulation;
}
.tag-mng-name:focus { border-color: var(--accent); outline: none; }
.tag-mng-row .btn { flex: none; }
.tag-mng-add { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); }
.tag-mng-add input {
  flex: 1; min-width: 0; height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); color: var(--text);
  font-size: 16px; /* 同 .tag-mng-name：低于 16px 会被 iOS 聚焦放大 */
  touch-action: manipulation;
}
.tag-mng-add input:focus { border-color: var(--accent); outline: none; }
.tag-mng-add .btn { flex: none; }
.tag-mng-empty { padding: 10px 2px; color: var(--muted); font-size: 13px; }

/* ---- AI 记忆卡 / 历史对话弹层（v1.63.0）---- */
.ai-mem-empty { padding: 18px 2px; color: var(--muted); font-size: 13px; text-align: center; }
.ai-mem-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.ai-mem-row { display: flex; align-items: flex-start; gap: 8px; padding: 9px 0; }
.ai-mem-row + .ai-mem-row { border-top: 1px dashed var(--border); }
.ai-mem-main { flex: 1; min-width: 0; }
.ai-mem-fact { font-size: 13px; color: var(--text); word-break: break-word; }
.ai-mem-meta { margin-top: 2px; font-size: 11px; color: var(--muted); }
.ai-mem-meta .ai-mem-pending { color: var(--warn); }
.ai-mem-row .btn { flex: none; }
.ai-hist-row { display: flex; align-items: center; gap: 8px; padding: 10px 0; }
.ai-hist-row + .ai-hist-row { border-top: 1px dashed var(--border); }
.ai-hist-main { flex: 1; min-width: 0; cursor: pointer; }
.ai-hist-t { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-hist-m { margin-top: 2px; font-size: 11px; color: var(--muted); }
.ai-hist-row .btn { flex: none; }
.loc-row { display: flex; gap: 8px; }
.loc-row input { flex: 1; min-width: 0; }
.loc-row .btn { height: 42px; flex: none; }
/* 天气行：下拉 + 气温小输入框 */
.wx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wx-row select, .wx-row .wx-temp { width: 100%; min-width: 0; }
.geo-hint { display: block; margin-top: 5px; font-size: 12px; }

/* ---- 编辑页 · 对外分享 ---- */
.share-box { display: flex; gap: 8px; }
.share-box input {
  flex: 1; min-width: 0; height: 42px;
  font-size: 13px; color: var(--text-2);
  background: var(--surface-2);
}
.share-box .btn { height: 42px; flex: none; }
.share-box input[readonly] { cursor: text; }

.edit-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; margin-bottom: 6px; }
.edit-main, .edit-side {
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-s);
}
.mp4-cur { font-size: 13px; color: var(--muted); margin: 0; word-break: break-all; }
.mp4-cur a { color: var(--accent); }
.pending-note {
  font-size: 13.5px; color: var(--accent); font-weight: 600;
  margin: 0 0 8px;
  display: flex; align-items: center; gap: 8px;
}
.pending-note::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); flex: none; }
.pending-dl {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  color: var(--accent); font-size: 13px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.pending-dl .ico { width: 14px; height: 14px; }
.pending-dl-wrap { margin: 8px 0 0; }

/* ---- 上传区 ---- */
.dropzone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-l);
  padding: 44px 22px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  background: color-mix(in srgb, var(--accent) 3%, transparent);
}
.dropzone:hover, .dropzone.dragover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.dropzone.err { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent); background: color-mix(in srgb, var(--danger) 5%, transparent); }
.dropzone.busy { pointer-events: none; opacity: .9; }
.dropzone > p { margin: 6px 0 0; font-size: 14px; font-weight: 550; }
.dropzone .muted { font-size: 12.5px; }
.dropzone .dz-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--text-2); transition: color .18s; }
.dropzone .dz-btn .ico { width: 22px; height: 22px; }
.dropzone:hover .dz-btn, .dropzone.dragover .dz-btn { color: var(--accent); }
.dropzone input[type=file] { display: none; }
.dropzone .dz-icon {
  width: 54px; height: 54px; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 7px;
}
.upbar {
  width: 100%; max-width: 380px; height: 8px;
  border-radius: 999px; overflow: hidden;
  background: var(--surface-2);
  margin-top: 14px;
}
.upbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .2s; border-radius: 999px; }

/* 上传指标：进度/速率/剩余 各占一栏，数字等宽且列宽固定 —— 数值变化只改字符，
   不会推挤相邻栏，也不会让整行左右抽动。 */
.up-metrics {
  width: 100%; max-width: 380px;
  display: flex; align-items: stretch; gap: 6px;
  margin-top: 10px;
}
.up-metric {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  background: var(--surface-2);
}
.up-metric small { font-size: 10.5px; line-height: 1.2; color: var(--muted); }
.up-metric b {
  font-size: 15px; line-height: 1.25; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
/* 状态行独占一行：只在暂停/恢复/完成等状态切换时写文本，平时留空但保留高度，
   避免文字出现或消失时卡片整体高度跳动。 */
/* line-height 与 min-height 必须一致：正文继承的是 1.55，若 min-height 给小了，
   状态行从空变有字时面板仍会高出 2px。 */
.upinfo { width: 100%; max-width: 380px; line-height: 1.55; min-height: 1.55em; font-size: 12.5px; color: var(--muted); }
.capture-upload {
  position: fixed; left: 50%; bottom: 30px; z-index: 90;
  width: min(calc(100% - 28px), 420px);
  transform: translateX(-50%);
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-l);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  overscroll-behavior: none;            /* 贴底浮层，别在回弹时把滚动传给整页 */
  box-shadow: var(--shadow-m);
}
.capture-upload .upbar { max-width: none; margin-top: 0; }
.capture-upload .up-metrics { max-width: none; margin-top: 12px; }
.capture-upload .up-metric { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.capture-upload .upinfo { max-width: none; margin: 8px 0 0; color: var(--text-2); text-align: center; }
.preview { margin-top: 12px; width: 100%; max-width: 380px; }
.preview video { width: 100%; border-radius: var(--r-m); background: #05070b; max-height: 300px; }

.form-foot {
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  margin-top: 20px;
}
.form-foot .btn { margin-left: 0; }

/* ---- 告警 ---- */
.alert {
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
  color: var(--danger);
  padding: 10px 14px; border-radius: var(--r-m);
  font-size: 14px;
}
.alert.success {
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  border-color: color-mix(in srgb, var(--ok) 50%, var(--border));
  color: var(--ok);
}

/* ---- 主题切换（只用图标，5套循环：🌌 静谧深空 / 🍂 暖茶棕 / 🌿 森屿绿 / 💜 薰衣紫 / 📄 纸感米白）---- */
.speed-btn { min-width: 80px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---- 播放器补充 ---- */
/* 画质切换按钮在卡片操作行（编辑/回收 后面），不再浮在画面上 */
.qual-btn { color: var(--text-2); }
.qual-btn.on {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.restart-btn {
  position: absolute; left: 10px; bottom: 10px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(8,11,18,.6);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background .18s, transform .12s var(--spring);
}
.restart-btn .ico { width: 16px; height: 16px; }
.restart-btn:hover { background: rgba(8,11,18,.82); }
.restart-btn:active { transform: scale(.92); }

/* ---- 回收站 ---- */
.trash-note {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--muted);
  padding: 13px 16px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-m);
}
.trash-note-txt { flex: 1; min-width: 220px; }
.trash-note-txt b { color: var(--danger); font-weight: 650; }
.trash-purge { flex: none; }
.trash-done {
  font-size: 13.5px; color: var(--text);
  padding: 12px 16px; margin-bottom: 16px;
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
  border-radius: var(--r-m);
}
/* ---- 列表自动分页（日记 / 回收站 / 日志 三处共用）---- */
.mp4-groups { display: contents; }    /* 只是分页追加的容器，不改变卡片网格排布 */
.page-more { display: flex; justify-content: center; margin: 8px 0 4px; }
.page-more-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 208px; padding: 12px 26px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.3;
  text-decoration: none; cursor: pointer; box-shadow: var(--shadow-s);
  transition: background .15s linear, transform .12s var(--spring), border-color .15s, opacity .15s;
}
.page-more-btn:hover { background: var(--surface-2); }
.page-more-btn:active { transform: scale(.97); }
.page-more-btn.loading { opacity: .55; pointer-events: none; }
.page-more-btn .pmb-n { font-size: 12px; font-weight: 500; color: var(--muted); }
/* 结束提示也是 .page-more 的 flex 子项，跟着一起居中，不会撑满整行 */
.page-more-end {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px; border-radius: 999px;
  font-size: 13px; color: var(--muted);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}
.page-more .load-fail { color: var(--danger, #e06a6a); }

.trash-list { display: grid; gap: 10px; }
.trash-item {
  display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-s);
  transition: border-color .18s;
}
.trash-item:hover { border-color: var(--border-strong); }
.trash-item .trash-icon {
  width: 38px; height: 38px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, var(--surface-2));
}
.trash-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.trash-title { font-weight: 650; color: var(--text); word-break: break-all; }
.trash-meta { font-size: 12.5px; color: var(--muted); }
.trash-item form { flex: none; }

/* ---- 播放统计 ---- */
.stats-head {
  padding: 20px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-l); box-shadow: var(--shadow-s);
  margin-bottom: 20px;
}
.stats-head .mp4-title { font-size: 19px; font-weight: 700; margin: 0 0 12px; }
.stats-head .mp4-meta { margin-top: 0; }
.stats-wrap {
  padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-l); box-shadow: var(--shadow-s);
}
.stats-wrap .grp-label { margin: 4px 0 14px; }
.stats-table-wrap { overflow-x: auto; }
.stats-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.stats-table th {
  text-align: left; padding: 9px 12px;
  font-size: 12px; font-weight: 650; letter-spacing: .06em;
  color: var(--muted); text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.stats-table td {
  padding: 11px 12px;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.stats-table tbody tr:last-child td { border-bottom: none; }
.stats-table tbody tr:hover td { background: var(--surface-2); }
.stats-table td.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text); }
.stats-table td.nowrap { white-space: nowrap; }

/* ---- 日志列表：桌面端六列网格，手机端改为「日期分组 + 卡片」 ---- */
.log-list { display: grid; gap: 2px; }
.log-day {
  display: flex; align-items: center; gap: 9px;
  margin: 20px 0 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--muted); text-transform: uppercase;
}
.log-day:first-of-type { margin-top: 2px; }
.log-day::before { content: ""; width: 3px; height: 13px; border-radius: 4px; background: var(--accent); }
.log-day b { font-weight: 700; }
.log-day i {
  font-style: normal; font-size: 12px; font-weight: 600;
  color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border); padding: 1px 9px; border-radius: 999px;
  letter-spacing: 0; text-transform: none;
}
.log-row {
  display: grid;
  grid-template-columns: 78px 86px 104px minmax(0, 1fr) 128px 176px;
  align-items: center; gap: 12px;
  padding: 9px 12px;
  font-size: 13.5px;
  border-radius: 7px;
  box-shadow: inset 2px 0 0 transparent;
  transition: background .16s linear;
}
.log-row:hover { background: var(--surface-2); }
.log-row-head {
  font-size: 12px; font-weight: 650; letter-spacing: .06em;
  color: var(--muted); text-transform: uppercase;
  border-radius: 0; border-bottom: 1px solid var(--border);
  margin-bottom: 2px; padding-bottom: 8px;
}
.lg-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.lg-act { font-weight: 600; color: var(--text); }
.lg-detail { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-detail:empty { display: none; }
/* 宽屏把 IP/设备摊成两列；窄屏再收回同一列（见平板断点） */
.lg-meta { display: contents; }
.lg-ip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lg-ua { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-ua .ico { width: 13px; height: 13px; }
.log-row.lv-warn { box-shadow: inset 2px 0 0 var(--warn); }
.log-row.lv-bad { box-shadow: inset 2px 0 0 var(--danger); }
.log-row.lv-bad .lg-act { color: var(--danger); }

/* ---- toast ---- */
.toast-box {
  position: fixed; left: 50%; bottom: calc(72px + var(--safe-b));
  transform: translateX(-50%);
  z-index: 999;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.toast {
  max-width: 84vw;
  background: rgba(13,17,26,.92);
  color: #f2f5fb;
  font-size: 14px; font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: var(--shadow-m);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: opacity .3s, transform .3s;
}
.toast.hide { opacity: 0; transform: translateY(10px); }

/* ============================================================
   顶栏主题入口 & 登录页主题按钮
   ============================================================ */
/* 登录/注册/重置页顶角的主题按钮 */
.m-theme-btn {
  color: var(--text-2);
}
.m-theme-btn:hover { color: var(--accent); }
/* 登录/注册页顶角的方块主题按钮 */
.login-theme { border: 1px solid var(--border); border-radius: 8px; }
.login-theme:hover { background: var(--surface-2); border-color: var(--border-strong); }

/* ---- 登录页 ---- */
.login-wrap {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(24px + var(--safe-t)) calc(18px + var(--safe-r)) calc(24px + var(--safe-b)) calc(18px + var(--safe-l));
  overflow: hidden;
  background:
    radial-gradient(120% 85% at 50% -15%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 58%),
    var(--bg);
}
.glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .22; pointer-events: none; }
.glow-a { width: 46vmax; height: 46vmax; left: -18vmax; top: -14vmax; background: var(--accent); animation: floaty 10s ease-in-out infinite; }
.glow-b { width: 36vmax; height: 36vmax; right: -14vmax; bottom: -12vmax; background: var(--accent-2); animation: floaty 13s ease-in-out infinite reverse; }
@keyframes floaty {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(4vmax, -3vmax); }
}
.login-theme { position: absolute; top: 10px; right: 10px; z-index: 5; }
.login-card {
  position: relative; z-index: 2;
  width: 100%; max-width: 402px;
  background: color-mix(in srgb, var(--surface) 93%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 36px 32px 26px;
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  text-align: center;
  animation: popIn .5s cubic-bezier(.2,.8,.3,1.05) both;
}
@keyframes popIn {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.login-brand { margin-bottom: 24px; }
.logo-badge.lg {
  width: 76px; height: 76px; margin: 0 auto 16px;
  border-radius: 22px;
  box-shadow: 0 14px 32px -16px color-mix(in srgb, var(--accent) 50%, transparent);
}
.logo-badge .ico { width: 60%; height: 60%; stroke-width: 1.7; }
.logo-badge.lg span { transform: rotate(-6deg); }
.login-card h1 { margin: 0 0 6px; font-size: 22px; font-weight: 750; letter-spacing: .02em; }
.slogan { margin: 0; font-size: 13.5px; color: var(--muted); }
.login-form { display: flex; flex-direction: column; gap: 15px; text-align: left; }
.pwd-label { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.pwd-label input[type=password] { padding: 12px 14px; font-size: 16px; border-radius: var(--r-m); }
.login-submit {
  width: 100%; height: var(--field-h);
  font-size: 15px; font-weight: 650; letter-spacing: .12em;
  border-radius: var(--r-m);
  border: 1px solid var(--accent);
}
.login-alert { margin: 0 0 4px; border-radius: var(--r-m); font-size: 13px; animation: shakeX .35s ease; }
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.login-foot { margin: 24px 0 0; font-size: 12px; color: var(--muted); }

/* ============================================================
   触摸设备：彻底关掉 hover 效果
   （iOS Safari 点按后 :hover 会粘住，导致卡片长期浮起、按钮长期高亮）
   ============================================================ */
@media (hover: none) {
  a:hover { opacity: 1; }
  .btn:hover { border-color: var(--border); background: var(--surface-2); opacity: 1; }
  .btn.ghost:hover { background: transparent; }
  .btn.primary:hover { background: var(--accent); filter: none; }
  .btn.danger:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); }
  .mp4-card:hover { transform: none; border-color: var(--border); box-shadow: var(--shadow-s); }
  .img-th:hover { border-color: var(--border); }
  .img-th:hover img { transform: none; }
  .img-del:hover { background: rgba(8, 11, 18, .72); }
  .img-add:hover { border-color: var(--border-strong); color: var(--muted); background: none; }
  .dropzone:hover { border-color: var(--border-strong); background: color-mix(in srgb, var(--accent) 3%, transparent); }
  .restart-btn:hover { background: rgba(8, 11, 18, .6); }
  .trash-item:hover { border-color: var(--border); }
  .stats-table tbody tr:hover td { background: transparent; }

  /* 用 :active 补回触摸反馈 */
  .mp4-card:active { transform: scale(.988); transition-duration: .1s; }
  .img-th:active img { transform: scale(1.05); transition-duration: .12s; }
  .trash-item:active, .stats-table tbody tr:active td { background: var(--surface-2); }
  .dropzone:active, .img-add:active { border-color: var(--accent); }
}

/* 触摸设备继续兜底：手机横屏 / 平板 / 桌面模式的视口宽度会超过 768px，
   这些设备聚焦小于 16px 的输入框同样会被强制放大页面。
   凡是类选择器把字号压到 16px 以下的输入框，在触摸设备上一律压回 16px。 */
@media (hover: none) {
  .au-pw-input, .link-add input, .mp-diary input, .share-box input, .tag-mng-name, .tag-mng-add input { font-size: 16px; }
}

/* ---- 响应式：平板 ---- */
@media (max-width: 980px) {
  .edit-grid { grid-template-columns: 1fr; }
}

/* 平板/窄桌面：IP 与 设备 收进同一列，把宽度让给详情 */
@media (min-width: 769px) and (max-width: 1080px) {
  .log-row, .log-row-head { grid-template-columns: 76px 84px 100px minmax(0, 1fr) minmax(0, 1.05fr); }
  .log-row-head { display: none; }
  .lg-meta { display: flex; flex-direction: column; gap: 1px; grid-column: 5; min-width: 0; }
}

/* ============================================================
   响应式：手机（iOS 设计语言）
   ============================================================ */
@media (max-width: 768px) {
  /* --- 顶栏（应用页已改底栏 v1.52.16，这里只剩分享页）--- */
  .topbar {
    gap: 4px;
    height: auto; min-height: 50px;
    padding: calc(4px + var(--safe-t)) max(8px, var(--safe-r)) 4px max(8px, var(--safe-l));
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    overscroll-behavior: none;          /* 顶部粘性栏同样不参与回弹链 */
  }
  .topbar .ico-btn { width: 40px; height: 40px; }
  .topbar .ico-btn .ico { width: 20px; height: 20px; }
  /* --- 页面留白（底部栏 58px + 14px 呼吸空间）--- */
  .mp4-wrap { padding: calc(12px + var(--safe-t)) max(14px, var(--safe-r)) calc(72px + var(--safe-b)) max(14px, var(--safe-l)); }
  .edit-form { padding: calc(12px + var(--safe-t)) max(14px, var(--safe-r)) calc(72px + var(--safe-b)) max(14px, var(--safe-l)); }

  /* --- 卡片：iOS 分组卡片（无描边 + 柔和投影 + 大圆角）--- */
  .mp4-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .mp4-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .07), 0 12px 32px -18px rgba(0, 0, 0, .38);
  }
  .mp4-player { aspect-ratio: 16/9; }
  .mp4-body { padding: 16px; gap: 8px; }
  .mp4-title { font-size: 14px; font-weight: 400; line-height: 1.4; }
  .mp4-card > .mp4-title { padding: 13px 16px; }
  .mp4-num { font-size: 12.5px; }
  .mp4-meta1 { font-size: 14px; }
  .mp4-remark { font-size: 16px; line-height: 1.78; }
  .diary-card { margin-top: 8px; }
  .chip, .dl { font-size: 12.5px; }
  .imgs { gap: 5px; margin-top: 10px; }
  .img-th { border-radius: 8px; }

  /* 卡片操作：底部一行四枚文字按钮，随卡片宽度自适应 */
  .mp4-ops {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px;
    margin-top: auto; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  }
  .mp4-ops .icon-op { width: 100%; height: 36px; padding: 0 6px; gap: 4px; font-size: 12.5px; border-radius: 10px; }

  /* --- 列表自动分页：手机上整行大按钮 --- */
  .page-more { margin: 4px 0 0; }
  .page-more-btn { width: 100%; min-width: 0; height: var(--field-h); flex-direction: row; gap: 8px; font-size: 16px; border-radius: 12px; }
  .page-more-end { width: 100%; text-align: center; padding: 12px; border-radius: 9px; }

  /* --- 保存提示 --- */
  .stat { font-size: 12.5px; gap: 5px; }
  .stat b { font-weight: 700; }
  .saved-toast { position: static; transform: none; padding: 11px 14px; font-size: 14px; }
  .saved-toast.show { transform: none; }

  /* --- 日志列表：手机端收起列头，六项重排为卡片（不再横向滚动）--- */
  .log-list { gap: 8px; }
  .log-row-head { display: none; }
  .log-day { margin: 16px 0 2px; font-size: 12px; }
  .log-day:first-of-type { margin-top: 0; }
  .log-row {
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas:
      "time cat"
      "act  act"
      "det  det"
      "meta meta";
    gap: 4px 10px;
    padding: 11px 13px 12px;
    font-size: 14px;
    border-radius: 7px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .07), 0 10px 26px -18px rgba(0, 0, 0, .35);
  }
  .log-row:hover { background: var(--surface); }
  .log-row:active { background: var(--surface-2); }
  .lg-time { grid-area: time; font-size: 13.5px; }
  .lg-cat { grid-area: cat; justify-self: end; align-self: center; }
  .lg-act { grid-area: act; font-size: 15.5px; line-height: 1.35; }
  /* 详情改可换行，手机上看全内容而非省略号；无详情时不占行 */
  .lg-detail { grid-area: det; white-space: normal; overflow: visible; color: var(--text-2); line-height: 1.5; }
  .lg-detail:empty { display: none; }
  /* IP 与 设备 同一行左右分列，两侧各自省略而不换行 */
  .lg-meta {
    grid-area: meta;
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    min-width: 0; font-size: 12.5px; color: var(--muted);
  }
  .lg-ip { min-width: 0; }
  .lg-ua { text-align: right; min-width: 0; }
  .log-row.lv-warn, .log-row.lv-bad { box-shadow: inset 3px 0 0 var(--warn), 0 1px 2px rgba(0, 0, 0, .07), 0 10px 26px -18px rgba(0, 0, 0, .35); }
  .log-row.lv-bad { box-shadow: inset 3px 0 0 var(--danger), 0 1px 2px rgba(0, 0, 0, .07), 0 10px 26px -18px rgba(0, 0, 0, .35); }

  /* --- 日志/统计表格（播放统计页）：手机端收起低价值列 --- */
  .stats-table th, .stats-table td { padding: 10px 9px; white-space: nowrap; }
  /* 统计页：只留 时间/设备，IP 收起 */
  .stats-logs-table thead th:nth-child(3), .stats-logs-table tbody td:nth-child(3) { display: none; }

  /* --- 表单：44pt 触控目标 + iOS 控件 --- */
  input, select, textarea { font-size: 16px; min-height: var(--field-h); }  /* 16px 防 iOS 聚焦缩放 */
  textarea.diary-box { font-size: 16px; line-height: 1.75; }             /* 覆盖基础 15px，同上 */
  /* 类选择器的 font-size 会盖掉上面这条（标签弹层、链接输入等），手机上聚焦仍会被 iOS 放大，这里统一补回 */
  .au-pw-input, .link-add input, .mp-diary input, .share-box input, .tag-mng-name, .tag-mng-add input { font-size: 16px; }
  select {
    -webkit-appearance: none; appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%238b95a8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
  }
  input[type=date], input[type=time] { -webkit-appearance: none; appearance: none; min-height: var(--field-h); }
  .field { gap: 8px; }
  .field > span, .field > label:first-child { font-size: 13px; color: var(--muted); }
  .edit-main, .edit-side { padding: 16px 15px; border-radius: 18px; gap: 18px; }
  .edit-side { border: 0; box-shadow: 0 1px 2px rgba(0,0,0,.07), 0 12px 32px -18px rgba(0,0,0,.38); }
  .dropzone { padding: 30px 16px; border-radius: 18px; }
  .dropzone .dz-icon { width: 60px; height: 60px; font-size: 28px; border-radius: 18px; }
  .imgs-edit { gap: 8px; }
  .img-item, .img-add { width: 92px; height: 92px; border-radius: 9px; }
  .img-del { width: 28px; height: 28px; font-size: 13px; top: 2px; right: 2px; }
  .loc-row { flex-wrap: wrap; }
  .loc-row input { flex: 1 1 100%; }
  .loc-row .btn { height: var(--field-h); padding: 0 15px; font-size: 16px; font-weight: 600; flex: 1; border-radius: 13px; }
  /* 吸底悬浮：做成浮动卡片，停在底部栏上方（68px = 栏顶 58 + 10px 间隙） */
  .form-foot { position: sticky; bottom: calc(68px + var(--safe-b)); z-index: 5; gap: 10px; padding: 10px; margin-top: 16px; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: var(--shadow-m); }
  /* 拍摄页：取消/发布不吸底，作为页面最底部的普通元素（v1.52.2） */
  .form-foot.form-foot-bottom { position: static; z-index: auto; padding: 0; margin-top: 16px; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .form-foot .btn { flex: 1; height: var(--btn-xl); font-size: 17px; font-weight: 600; border-radius: 14px; }
  /* toast 已由基础样式抬到胶囊与拍摄圆钮上方，无需再覆盖 */

  /* --- 回收站 / 空状态 / 统计 --- */
  .trash-note { padding: 13px; border-radius: 7px; }
  .trash-note-txt { min-width: 0; }
  .trash-purge { width: 100%; }
  .trash-purge .btn { width: 100%; height: var(--field-h); font-size: 16px; }
  .trash-item { padding: 13px; gap: 12px; border-radius: 7px; border: 0; box-shadow: 0 1px 2px rgba(0,0,0,.07), 0 10px 26px -18px rgba(0,0,0,.35); }
  .trash-item form { width: 100%; }
  .trash-item form .btn { width: 100%; height: var(--tap-l); font-size: 16px; border-radius: 12px; }
  .empty { padding: 48px 0; }
  .empty .empty-icon { width: 76px; height: 76px; font-size: 34px; border-radius: 26px; }
  .empty .btn { height: var(--btn-xl); padding: 0 26px; font-size: 17px; border-radius: 14px; }
  .stats-wrap, .stats-head { padding: 15px 13px; border-radius: 18px; border: 0; box-shadow: 0 1px 2px rgba(0,0,0,.07), 0 10px 26px -18px rgba(0,0,0,.35); }
  .stats-head .mp4-title { font-size: 18px; }
  .stats-table-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .stats-table { font-size: 14px; }
  .stats-table th, .stats-table td { padding: 12px 11px; }

  /* --- 灯箱：加 iOS 关闭按钮 --- */
  .lightbox { padding: 16px; }
  .lightbox img { border-radius: 7px; }
}

/* ---- 响应式：小屏手机（iPhone SE / mini）---- */
@media (max-width: 420px) {
  .login-card { padding: 28px 20px 22px; }
  .mp4-wrap { padding-left: max(12px, var(--safe-l)); padding-right: max(12px, var(--safe-r)); }
  .img-item, .img-add { width: 84px; height: 84px; }
}

/* ---- 键盘弹出时收起浮动面板，避免遮挡输入框 ---- */
@media (max-width: 768px) and (max-height: 460px) {
  .capture-upload, .rec-panel, .clip-tray { transform: translate(-50%, 100%); transition: transform .25s var(--ease-out); }
}

/* ---- 无障碍动效 ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .drawer-veil.show { opacity: 1; }
  .drawer.show { transform: none; }
}

/* ============================================================
   对外分享页（/mp4/s/<token>）：免登录单篇展示，不带任何站点内部导航
   ============================================================ */
.share-wrap { max-width: 760px; margin: 0 auto; padding: 26px 22px 70px; }
.share-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-m);
  padding: 20px 18px 18px;
}
.share-head { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 8px; }
.share-title {
  margin: 0; font-size: 21px; line-height: 1.35; font-weight: 650;
  color: var(--text); word-break: break-word; flex: 1;
}
.share-player { margin-top: 14px; border-radius: var(--r-l); overflow: hidden; }
.share-segs { border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--r-l) var(--r-l); }
.share-parts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.share-parts-cap { font-size: 12.5px; color: var(--muted); }
.share-parts-list { display: flex; flex-wrap: wrap; gap: 8px; }
.share-ops { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.share-ops .btn { flex: none; }
.share-imgs { margin-top: 14px; }
.share-text {
  margin-top: 14px; padding: 15px 16px;
  border-radius: var(--r-l);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 15.5px; line-height: 1.85;
  white-space: pre-wrap; word-break: break-word;
}
.share-foot {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px dashed var(--border);
  text-align: center;
  font-size: 12px; color: var(--muted);
}
.share-missing { text-align: center; padding: 76px 0; color: var(--muted); }
.share-missing p { margin: 6px 0; font-size: 15px; }
.share-missing .empty-icon { width: 96px; height: 96px; }
.share-missing .empty-icon .ico { width: 44px; height: 44px; }

@media (max-width: 420px) {
  .share-wrap { padding-left: max(12px, var(--safe-l)); padding-right: max(12px, var(--safe-r)); }
  .share-card { padding: 16px 14px 14px; border-radius: 18px; }
  .share-title { font-size: 19px; }
  .share-ops .btn { height: var(--tap); }
  .share-box { flex-wrap: wrap; }
  .share-box input { flex: 1 0 100%; }
}

/* ---- 站内长录面板：分段录制 + 服务端拼接 ----
   手机相机 App 单段 9~10 分钟到顶，站内改用 MediaRecorder 自己录，
   锁屏自动收段、回前台续上，最后服务端 ffmpeg concat 拼成一条。
   面板固定在底部、盖住标签栏；预览用 object-fit: cover 铺满，录制时看画面更实在。 */
.rec-panel {
  position: fixed; left: 50%; bottom: 0; z-index: 95;
  width: min(100%, 460px);
  transform: translateX(-50%);
  padding: 12px 14px calc(14px + var(--safe-b));
  border: 1px solid var(--border-strong); border-bottom: none;
  border-radius: 20px 20px 0 0;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: var(--shadow-m);
  overscroll-behavior: contain;            /* 浮层内滚动别传给整页 */
}
.rec-stage {
  position: relative; overflow: hidden;
  border-radius: 9px; background: #05070b;
  aspect-ratio: 16 / 10;
}
.rec-stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rec-hud {
  position: absolute; left: 10px; top: 10px; right: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  pointer-events: none;
}
.rec-hud b {
  font-size: 19px; font-weight: 700; letter-spacing: .5px;
  font-variant-numeric: tabular-nums; color: #fff;
  padding: 3px 9px; border-radius: 8px;
  background: rgba(0, 0, 0, .48);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.rec-state {
  font-size: 12.5px; color: #fff; padding: 3px 9px; border-radius: 8px;
  background: rgba(0, 0, 0, .48); white-space: nowrap;
}
.rec-state.rec-on { color: #fff; background: rgba(229, 62, 62, .82); }
.rec-sub {
  position: absolute; left: 10px; bottom: 10px;
  font-size: 12.5px; color: #fff; padding: 3px 9px; border-radius: 8px;
  background: rgba(0, 0, 0, .48); font-variant-numeric: tabular-nums;
}
.rec-btns { display: flex; gap: 10px; margin-top: 12px; }
.rec-btns .btn { flex: 1; height: var(--tap); margin-left: 0; }
.rec-tip {
  margin: 10px 0 0; min-height: 17px;
  font-size: 12.5px; line-height: 1.6; color: var(--text-2); text-align: center;
}
.rec-up { margin-top: 12px; }
.rec-up .upbar { max-width: none; margin-top: 0; }
.rec-up .up-metrics { max-width: none; margin-top: 10px; }
.rec-up .up-metric { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.rec-up .upinfo { max-width: none; margin: 8px 0 0; color: var(--text-2); text-align: center; }

/* ---- 多段实拍素材夹 ----
   手机端一个场景常要分几次拍，所以「现拍」不再拍完就传，而是先攒进素材夹，
   最后一次合成。浮层与长录面板同规格（固定底部、同一套 rec-up 进度条）。 */
.clip-tray {
  position: fixed; left: 50%; bottom: 0; z-index: 94;
  width: min(100%, 460px);
  transform: translateX(-50%);
  padding: 12px 14px calc(14px + var(--safe-b));
  border: 1px solid var(--border-strong); border-bottom: none;
  border-radius: 20px 20px 0 0;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: var(--shadow-m);
  overscroll-behavior: contain;
}
.clip-hd {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.clip-title { font-size: 14px; font-weight: 600; }
.clip-title b { color: var(--accent); font-variant-numeric: tabular-nums; }
.clip-sum {
  font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.clip-list {
  list-style: none; margin: 10px 0 0; padding: 0;
  max-height: 38vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: 8px;
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}
.clip-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px 7px 10px;
  border-bottom: 1px solid var(--border);
}
.clip-item:last-child { border-bottom: none; }
/* 段落上传状态（v1.14.0 边录边传）：编号牌与小字随状态变色，
   不用动 DOM 结构，只换 class，深色模式靠变量自动跟着走。 */
.clip-item.busy { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.clip-item.busy .clip-idx { background: var(--accent); animation: clipPulse 1.1s ease-in-out infinite; }
.clip-item.busy .clip-meta small { color: var(--accent); }
.clip-item.ok .clip-idx { background: color-mix(in srgb, var(--text-muted, var(--muted)) 70%, var(--accent)); }
.clip-item.err { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.clip-item.err .clip-idx { background: var(--danger); }
.clip-item.err .clip-meta small { color: var(--danger); }
.clip-sum.err { color: var(--danger); }
@keyframes clipPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.clip-idx {
  flex: 0 0 auto;
  width: 21px; height: 21px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; color: #fff;
  background: var(--accent);
  font-variant-numeric: tabular-nums;
}
.clip-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.clip-meta b {
  font-size: 13px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.clip-meta small { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.clip-ops { flex: 0 0 auto; display: flex; gap: 5px; }
/* 44px 高（HIG 最小可点区域）；三个键 132px + 间距在 358px 宽的行里放得下 */
.clip-op {
  width: var(--tap); height: var(--tap); margin: 0; padding: 0;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text-2);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.clip-op:active:not(:disabled) { background: var(--surface-2); }
.clip-op:disabled { opacity: .35; cursor: default; }
.clip-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* 手指头点按：按钮高度跟长录面板的 --tap 一致。
   「继续录一段」「清空」一行，「合成视频」独占一行当主按钮。 */
.clip-btns .btn { flex: 1 1 30%; height: var(--tap); margin-left: 0; }
.clip-btns #clipMerge { flex: 1 0 100%; }
.clip-tray .rec-btns { flex-wrap: wrap; }
.clip-tray .rec-up .upbar,
.clip-tray .rec-up .up-metrics,
.clip-tray .rec-up .upinfo { max-width: none; }

@media (max-width: 420px) {
  .rec-panel { width: 100%; }
  .rec-stage { aspect-ratio: 4 / 3; }
  .rec-btns { flex-wrap: wrap; }
  .rec-btns .btn { flex: 1 0 30%; }

  .clip-tray { width: 100%; }
  .clip-list { max-height: 32vh; }
}

/* ---- 分享管理页（/mp4/shares）----
   链接原样摊开给人看：token 是 22 位随机串，没人能凭记忆重写出来，
   所以必须有一个「所有发出去的链接都在这」的页面。
   样式全部走 CSS 变量，深浅色自动跟着 html[data-theme] 走。 */
.share-list { display: flex; flex-direction: column; gap: 10px; }

.share-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 9px;
}
/* 视频在回收站里：分享页只认 status=1，这条链接现在打开就是 404，整行压暗 */
.share-row.dead { opacity: .6; }

.share-thumb {
  flex: 0 0 92px; width: 92px; aspect-ratio: 16 / 10;
  border-radius: 7px; overflow: hidden; background: var(--surface-2);
}
.share-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.share-main { flex: 1 1 auto; min-width: 0; }
.share-top { display: flex; align-items: center; gap: 8px; }
.share-title {
  font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.share-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* 链接给一个只读输入框而不是 <a>：手机上要能长按选中自己复制 */
.share-url { display: flex; gap: 6px; margin-top: 8px; }
.share-link {
  flex: 1 1 auto; min-width: 0; padding: 7px 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
}

.share-ops { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }

.chip-dead { color: #e8a33d; border-color: rgba(232, 163, 61, .42); }

/* 卡片/列表标题旁的分享角标：只在真的开过分享时出现，指去 /mp4/shares */
.share-badge {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; text-decoration: none; line-height: 1;
  padding: 2px 4px; border-radius: 6px; opacity: .8;
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 14%, transparent);
}
.share-badge .ico { width: 13px; height: 13px; }
.share-badge:hover { opacity: 1; }

@media (max-width: 768px) {
  .share-row { flex-wrap: wrap; }
  .share-ops { flex-direction: row; width: 100%; }
  .share-ops .btn { flex: 1 1 0; }
}


/* ---- 多拍面板 ---- */
.multi-veil { position: fixed; inset: 0; z-index: 180; background: rgba(0,0,0,.45); }
.multi-panel {
  position: fixed; z-index: 185; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(100%, 460px);
  background: var(--surface); border: 1px solid var(--border); border-bottom: 0;
  border-radius: 18px 18px 0 0;
  padding: 14px 16px calc(16px + var(--safe-b));
  box-shadow: var(--shadow-lg);
}
.mp-hd { display: flex; align-items: baseline; gap: 8px; }
.mp-hd b { font-size: 17px; font-weight: 650; }
.mp-sub { flex: 1; font-size: 12px; color: var(--muted); }
#multiClose { background: none; border: 1px solid var(--border); color: var(--muted); font-size: 16px; cursor: pointer; padding: 4px 8px; }
/* fieldset 默认 min-inline-size:min-content 会被超长文件名撑破父容器，导致手机页面左右溢出 */
.multi-clip-field { min-width: 0; }
.multi-clip-field .mp-list { min-width: 0; }
.mp-sortbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.mp-sortbar .muted { font-size: 12px; }
.mp-sortbar .btn { flex: none; }
/* v1.55.1：「AI 转写字幕」「融合压缩480P」同一行，窄屏自动换行 */
.mp-opt-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mp-opt-row .dt-auto { white-space: nowrap; }
.mp-list { margin: 12px 0; max-height: 38vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.mp-empty { text-align: center; color: var(--muted); padding: 26px 0; font-size: 13px; }
.mp-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface-2); border-radius: 10px; }
.mp-item video { width: 64px; aspect-ratio: 16/9; border-radius: 6px; background: #000; object-fit: cover; flex: none; }
.mp-item .mp-name { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-del { background: none; border: 1px solid var(--border); color: var(--muted); font-size: 14px; cursor: pointer; padding: 6px; }
.mp-add { display: flex; gap: 10px; margin-bottom: 12px; }
/* “随手拍 / 上传”两个核心入口（v1.54.10）：水晶质感玻璃按钮，尺寸较旧版缩小 20% */
.mp-act {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  min-height: 96px;
  padding: 13px 8px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 15px;
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .48),
    inset 0 -8px 14px rgba(0, 0, 0, .06),
    0 6px 14px -10px rgba(0, 0, 0, .40);
  transition: transform .18s var(--spring), box-shadow .18s var(--ease-out), border-color .18s, filter .18s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
/* 水晶高光：左上柔光 + 斜向镜面反光 + 底边反射光 */
.mp-act::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(130% 90% at 18% 0%, rgba(255, 255, 255, .58) 0%, rgba(255, 255, 255, .12) 38%, transparent 62%),
    linear-gradient(115deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, .06) 28%, transparent 46%, transparent 72%, rgba(255, 255, 255, .14) 100%);
  opacity: .85;
  pointer-events: none;
  transition: opacity .18s var(--ease-out);
}
.mp-act::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(0deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .06) 9%, transparent 22%);
  opacity: .7;
  pointer-events: none;
}
.mp-act > * { position: relative; z-index: 1; }
.mp-act .mp-act-ico { display: flex; line-height: 1; color: var(--accent); transition: transform .18s var(--spring); }
.mp-act .mp-act-ico .ico { width: 27px; height: 27px; stroke-width: 1.7; }
.mp-act b { font-size: 14px; font-weight: 650; letter-spacing: .02em; }
.mp-act:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .52); }
.mp-act:hover::before { opacity: 1; }
.mp-act:hover .mp-act-ico { transform: scale(1.08); }
.mp-act:active { transform: translateY(0) scale(.975); filter: brightness(.96); }
.mp-act:active .mp-act-ico { transform: scale(.95); }
.mp-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 随手拍：半透明水晶渐变 + 通透高光 */
.mp-act-snap {
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--accent) 80%, #fff) 0%,
    var(--accent) 44%,
    color-mix(in srgb, var(--accent-2) 86%, #000) 100%);
  border-color: rgba(255, 255, 255, .42);
  color: var(--on-accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .70),
    inset 0 -10px 16px color-mix(in srgb, var(--accent) 55%, transparent),
    0 8px 18px -10px color-mix(in srgb, var(--accent) 70%, transparent),
    0 2px 4px rgba(0, 0, 0, .14);
}
.mp-act-snap .mp-act-ico { color: var(--on-accent); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18)); }
.mp-act-snap:hover {
  filter: brightness(1.05);
  border-color: rgba(255, 255, 255, .62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .78),
    inset 0 -10px 16px color-mix(in srgb, var(--accent) 55%, transparent),
    0 12px 24px -12px color-mix(in srgb, var(--accent) 75%, transparent),
    0 2px 4px rgba(0, 0, 0, .14);
}
/* 上传：磨砂水晶 + accent 描边 */
.mp-act-pick {
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--surface) 55%, #fff) 0%,
    color-mix(in srgb, var(--surface-2) 78%, var(--accent)) 100%);
  border-color: color-mix(in srgb, var(--accent) 28%, rgba(255, 255, 255, .50));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .62),
    inset 0 -8px 14px color-mix(in srgb, var(--accent) 12%, transparent),
    0 6px 14px -10px rgba(0, 0, 0, .35);
}
.mp-act-pick:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, rgba(255, 255, 255, .62));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -8px 14px color-mix(in srgb, var(--accent) 12%, transparent),
    0 12px 22px -12px rgba(0, 0, 0, .42);
}
.mp-diary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; padding: 8px 10px; background: var(--surface-2); border-radius: 10px; }
.mp-diary-cap { font-size: 13px; color: var(--muted); flex: none; }
.mp-diary input { flex: 1; min-width: 118px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: inherit; font-size: 14px; }
.mp-diary-hint { flex-basis: 100%; font-size: 11px; color: var(--muted); line-height: 1.4; }
.mp-go { width: 100%; height: 44px; }
.mp-progress { margin-bottom: 10px; }
.mp-bar { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.mp-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.mp-progress .up-metrics { max-width: none; margin-top: 8px; }
.mp-meta { margin-top: 6px; font-size: 12px; color: var(--muted); }
/* 上传悬浮层：上传时锁屏、只展示进度与数据；传完提示等待后台融合，点「确定」返回系统 */
.upload-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  background: rgba(4, 6, 12, .82);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  animation: fadeIn .2s ease;
}
.upload-overlay[hidden] { display: none; }
.upload-panel {
  width: min(430px, 100%);
  display: flex; flex-direction: column; align-items: center; gap: 11px;
  padding: 26px 22px 20px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 18px; box-shadow: var(--shadow-lg); text-align: center;
}
.up-spinner {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  border-top-color: var(--accent);
  animation: up-spin .8s linear infinite;
}
.up-spinner[hidden] { display: none; }
@keyframes up-spin { to { transform: rotate(360deg); } }
.up-title { font-size: 17px; font-weight: 700; color: var(--text); }
.up-sub { font-size: 12.5px; color: var(--muted); }
.up-barwrap { width: 100%; height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.up-barwrap i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px; transition: width .25s ease;
}
.upload-panel .up-metrics {
  max-width: none; margin-top: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.up-meta { font-size: 12.5px; color: var(--text-2); line-height: 1.55; min-height: 1.55em; }
.upload-panel .up-ok { min-width: 148px; height: 42px; margin-top: 4px; }
.upload-panel .up-ok[hidden] { display: none; }
/* 上次未完成/已融合的多拍作业提示条（页面重登后可见，可继续） */
.multi-resume {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 8px 0; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
}
.multi-resume .mr-info { flex: 1; min-width: 180px; font-size: 13px; color: var(--text); }
.multi-resume .mr-acts { display: flex; gap: 8px; }
.multi-resume .btn.small { padding: 6px 12px; }


/* ============================================================
   AI 助理（v1.58.0）
   右下面板 + 消息气泡 + 来源卡片 + 录音态
   只使用五套主题的既有变量，不新增颜色令牌
   ============================================================ */
/* ========== AI 助理（v1.61.9，跟随五套主题） ========== */
.ai-scrim {
  position: fixed; inset: 0; z-index: 219;
  background: rgba(0,0,0,.42);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: fadeIn .2s ease;
}
.ai-scrim[hidden] { display: none; }

.ai-panel {
  position: fixed; z-index: 220;
  left: 0; right: 0; bottom: 0;
  height: min(100dvh, 850px);
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 56% at 50% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 72%),
    var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: aiPanelIn .28s cubic-bezier(.2,.8,.2,1);
  overscroll-behavior: contain;
}
@media (min-width: 768px) {
  .ai-panel {
    left: auto;
    right: max(16px, var(--safe-r));
    bottom: max(16px, var(--safe-b));
    width: min(440px, calc(100vw - 32px));
    height: min(720px, calc(100dvh - 60px));
    border-bottom: 1px solid var(--border);
    border-radius: 20px;
  }
}
.ai-panel[hidden] { display: none; }
@keyframes aiPanelIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: none; }
}

.ai-head {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-top, 0px));
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--border);
}
.ai-title {
  flex: 1; min-width: 0;
  font-size: 16px; font-weight: 600; color: var(--text);
  letter-spacing: .01em;
}
/* 单篇对话的归属条：明确告诉用户现在只聊这一篇日记 */
.ai-scope {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border-bottom: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-2);
}
.ai-scope[hidden] { display: none; }
.ai-scope .ico { width: 14px; height: 14px; color: var(--accent); }
.ai-scope-ico { flex: none; display: flex; }
.ai-scope-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text);
}
.ai-scope-exit {
  flex: none;
  border: none; background: none; padding: 2px 0;
  color: var(--accent); font-family: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.ai-scope-exit:hover { text-decoration: underline; }
.ai-head-btn {
  flex: none; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: var(--surface-2); color: var(--text-2);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.ai-head-btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  color: var(--accent);
}
.ai-head-btn:active { transform: scale(.94); }
.ai-head-btn .ico { width: 16px; height: 16px; }

/* 主动提醒卡（v1.65.0）：快过期 / 快到期 / 该保养 / 要过生日。
   数据来自 GET /api/ai/reminders，规则在服务端算，这里只管样式。 */
.ai-remind {
  flex: none;
  margin: 0;
  padding: 10px 12px 8px;
  background: color-mix(in srgb, var(--warn) 8%, var(--surface));
  border-bottom: 1px solid var(--border);
}
.ai-remind[hidden] { display: none; }
.ai-remind-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
}
.ai-remind-ico { display: flex; color: var(--warn); }
.ai-remind-ico .ico { width: 14px; height: 14px; }
.ai-remind-title { flex: none; color: var(--text); }
.ai-remind-count { flex: 1; min-width: 0; color: var(--muted); font-weight: 500; }
.ai-remind-more {
  flex: none;
  border: none; background: none; padding: 2px 0;
  color: var(--accent); font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.ai-remind-more[hidden] { display: none; }
.ai-remind-more:hover { text-decoration: underline; }
.ai-remind-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 8px;
}
.ai-remind-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 9px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.ai-remind-item.urgent { border-color: color-mix(in srgb, var(--danger) 36%, var(--border)); }
.ai-remind-dot {
  flex: none; width: 7px; height: 7px; margin-top: 5px;
  border-radius: 50%;
  background: var(--warn);
}
.ai-remind-item.urgent .ai-remind-dot { background: var(--danger); }
.ai-remind-main { flex: 1; min-width: 0; }
.ai-remind-t {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; line-height: 1.35; color: var(--text);
}
.ai-remind-kind {
  flex: none;
  padding: 1px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--warn) 16%, var(--surface-2));
  color: var(--text-2);
  font-size: 11px; font-weight: 600;
}
.ai-remind-item.urgent .ai-remind-kind {
  background: color-mix(in srgb, var(--danger) 16%, var(--surface-2));
  color: var(--danger);
}
.ai-remind-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.ai-remind-sub {
  margin-top: 2px;
  font-size: 11.5px; line-height: 1.4; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ai-remind-acts { flex: none; display: flex; align-items: center; gap: 4px; }
.ai-remind-act {
  border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text-2);
  border-radius: 8px; padding: 3px 8px;
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ai-remind-act:hover { color: var(--accent); border-color: var(--accent); }
.ai-remind-act.primary {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-strong));
  color: var(--accent);
}
.ai-remind-act.ghost {
  border-color: transparent; background: none; color: var(--muted);
  padding: 3px 5px;
}
.ai-remind-act.ghost:hover { color: var(--danger); border-color: transparent; }
@media (max-width: 420px) {
  /* 窄屏：按钮换到下一行，标题不挤成一条缝 */
  .ai-remind-item { flex-wrap: wrap; }
  .ai-remind-acts { width: 100%; justify-content: flex-end; }
}

/* 消息区 + 「回到最新」悬浮按钮 */
.ai-body {
  position: relative;
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}
.ai-msgs {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 18px 14px 16px;
  display: flex; flex-direction: column; gap: 14px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.ai-msgs::-webkit-scrollbar { width: 6px; }
.ai-msgs::-webkit-scrollbar-track { background: transparent; }
.ai-msgs::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
}
.ai-jump {
  position: absolute; right: 14px; bottom: 12px; z-index: 3;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--text-2);
  box-shadow: var(--shadow-m);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.ai-jump[hidden] { display: none; }
.ai-jump:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.ai-jump .ico { width: 18px; height: 18px; }

.ai-empty {
  margin: auto;
  text-align: center;
  color: var(--text-2);
  font-size: 14px; line-height: 1.7;
  padding: 24px 16px;
}
.ai-empty .ai-empty-ico {
  width: 58px; height: 58px;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 18px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 16%, var(--surface)),
    color-mix(in srgb, var(--accent-2) 14%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  color: var(--accent);
}
.ai-empty .ai-empty-ico .ico { width: 28px; height: 28px; }
.ai-empty b {
  display: block; color: var(--text);
  font-size: 17px; font-weight: 600; margin-bottom: 8px;
}
.ai-empty p { margin: 0; font-size: 13px; color: var(--text-2); }

.ai-msg {
  display: flex; flex-direction: column; max-width: 100%;
  animation: aiMsgIn .22s var(--ease-out);
}
@keyframes aiMsgIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
.ai-msg-user { align-items: flex-end; }
.ai-msg-bot { align-items: flex-start; flex-direction: row; gap: 10px; }

.ai-avatar {
  flex: none; width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  color: var(--on-accent);
  box-shadow: 0 5px 14px -9px color-mix(in srgb, var(--accent) 80%, transparent);
}
.ai-avatar .ico { width: 16px; height: 16px; }

.ai-bubble {
  max-width: 87%;
  padding: 11px 15px;
  border-radius: 18px;
  font-size: 15px; line-height: 1.6;
  color: var(--text);
  overflow-wrap: anywhere;
}
.ai-msg-user .ai-bubble {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  border-bottom-right-radius: 5px;
  box-shadow: 0 8px 20px -16px color-mix(in srgb, var(--accent) 90%, transparent);
}
.ai-msg-bot .ai-bubble {
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-left-radius: 5px;
  box-shadow: var(--shadow-s);
}

.ai-answer p { margin: 0 0 8px; }
.ai-answer p:last-child { margin-bottom: 0; }
.ai-answer strong { font-weight: 600; }

.ai-cite {
  display: inline-flex; align-items: center;
  margin: 0 2px; padding: 1px 7px;
  border: none; border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  font: inherit; font-size: 12px; line-height: 1.6;
  cursor: pointer; vertical-align: baseline;
}
.ai-cite:hover { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); }

.ai-answer-ops {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px;
}
.ai-speak {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border: none; border-radius: 999px;
  background: var(--surface-2); color: var(--text-2);
  font: inherit; font-size: 12px; cursor: pointer;
}
.ai-speak .ico { width: 13px; height: 13px; }
.ai-speak:hover,
.ai-speak.on {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
}

.ai-sources { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ai-src {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2);
  color: inherit; text-decoration: none;
}
.ai-src:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-2));
}
.ai-src-t { font-size: 13px; font-weight: 500; color: var(--text); }
.ai-src-m { font-size: 11px; color: var(--muted); }
.ai-src-x {
  font-size: 12px; color: var(--text-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* AI 写入确认卡片（v1.59.0）：模型只提案，确认后才落库 */
.ai-writes { display: flex; flex-direction: column; gap: 8px; }
.ai-write {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.ai-write-head { font-size: 13px; font-weight: 600; color: var(--accent); }
.ai-write-title { margin-top: 2px; font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.ai-write-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ai-write-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; font-size: 12px; line-height: 1.5; }
.ai-write-k { flex: none; color: var(--muted); }
.ai-write-o { color: var(--muted); text-decoration: line-through; overflow-wrap: anywhere; }
.ai-write-arrow { color: var(--border-strong); }
.ai-write-n { color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.ai-write-append { white-space: pre-wrap; max-height: 10em; overflow: auto; }
.ai-write-note { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); line-height: 1.55; }
.ai-write-why { margin-top: 6px; font-size: 12px; color: var(--text-2); line-height: 1.55; }
.ai-write-status { margin-top: 8px; font-size: 12px; color: var(--accent); line-height: 1.55; }
.ai-write-status:empty { display: none; }
.ai-write-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ai-write-btn {
  padding: 5px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text-2);
  font: inherit; font-size: 12px; cursor: pointer;
}
.ai-write-btn:hover { border-color: var(--border-strong); color: var(--text); }
.ai-write-btn.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.ai-write-btn:disabled { opacity: .55; cursor: default; }
.ai-write.done {
  border-color: color-mix(in srgb, var(--ok) 42%, var(--border));
  background: color-mix(in srgb, var(--ok) 9%, var(--surface));
}
.ai-write.done .ai-write-head,
.ai-write.done .ai-write-status { color: var(--ok); }
.ai-write.cancelled { opacity: .72; }
.ai-write.failed,
.ai-write-error {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}
.ai-write.failed .ai-write-status,
.ai-write-error .ai-write-head { color: var(--danger); }
.ai-write-msg { margin: 6px 0 0; font-size: 12px; color: var(--danger); line-height: 1.55; }
.ai-write-link { font-size: 12px; color: var(--accent); text-decoration: none; }
.ai-write-link:hover { text-decoration: underline; }

.ai-typing .ai-bubble { display: inline-flex; align-items: center; gap: 4px; padding: 14px 16px; }
.ai-typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted);
  animation: aiDot 1.2s infinite ease-in-out;
}
.ai-typing i:nth-child(2) { animation-delay: .2s; }
.ai-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes aiDot {
  0%, 80%, 100% { transform: translateY(0); opacity: .4; }
  40% { transform: translateY(-5px); opacity: 1; }
}

.ai-error .ai-bubble {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 28%, var(--border));
}

/* 快捷问题 - 空状态显示 */
.ai-suggest {
  flex: none;
  padding: 0 16px 12px;
}
.ai-suggest[hidden] { display: none; }
.ai-suggest-inner {
  background: var(--surface);
  border-radius: 14px;
  padding: 14px;
  border: 1px solid var(--border);
}
.ai-suggest-title {
  font-size: 13px; font-weight: 500; color: var(--muted);
}
/* 标题行 + 换一批按钮（v1.62.1） */
.ai-suggest-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 10px;
}
.ai-suggest-next {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--muted);
  font: inherit; font-size: 12px; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
  touch-action: manipulation;
}
.ai-suggest-next:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
}
.ai-suggest-next .ico { width: 13px; height: 13px; }
.ai-suggest-next.spin .ico { animation: ai-suggest-spin .5s ease; }
@keyframes ai-suggest-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.ai-suggest-grid {
  display: grid;
  grid-template-columns: 1fr; /* v1.62.2 起一行一条 */
  gap: 6px;
}
.ai-chip {
  padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); color: var(--text);
  font: inherit; font-size: 13px; cursor: pointer;
  text-align: left; line-height: 1.6;
  /* 一题一行，超长省略，保证 6 行高度稳定 */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.ai-chip:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
}

/* 输入区域 */
.ai-form {
  flex: none;
  padding: 8px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 88%, var(--surface));
  border-top: 1px solid var(--border);
}
.ai-input-wrap {
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--surface);
  border-radius: 24px;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--border);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ai-input-wrap:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.ai-form textarea {
  flex: 1; min-width: 0;
  min-height: 38px; max-height: 100px;
  padding: 8px 0;
  border: none; background: transparent;
  color: var(--text);
  font: inherit; font-size: 15px; line-height: 1.45;
  resize: none;
  outline: none;
}
.ai-form textarea::placeholder { color: var(--muted); }
.ai-input-tip {
  display: none;
  margin: 6px 8px 0;
  font-size: 11px; color: var(--muted); text-align: center;
}
@media (pointer: fine) and (min-width: 641px) {
  .ai-input-tip { display: block; }
}

.ai-mic, .ai-send {
  flex: none; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, filter .15s ease, transform .12s ease;
}
.ai-mic:active, .ai-send:active { transform: scale(.94); }
.ai-mic {
  background: var(--surface-2); color: var(--text-2);
}
.ai-mic:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  color: var(--accent);
}
.ai-send {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  box-shadow: 0 6px 16px -12px color-mix(in srgb, var(--accent) 90%, transparent);
}
.ai-send:hover { filter: brightness(1.08); }
.ai-send:disabled { opacity: .5; }
.ai-mic .ico, .ai-send .ico { width: 18px; height: 18px; }

/* 录音态（v1.61.7）：盖住面板，中央悬浮一个大圆形结束按钮 */
.ai-rec {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  padding: 24px;
  background: rgba(15,17,25,.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ai-rec[hidden] { display: none; }
.ai-rec-hint {
  color: #fff; font-size: 14.5px; font-weight: 600;
  letter-spacing: .02em; text-align: center;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.ai-rec-btn {
  position: relative;
  width: 108px; height: 108px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff7167, #e53935 58%, #c62828);
  box-shadow: 0 14px 36px -10px rgba(229,57,53,.7), 0 4px 14px rgba(0,0,0,.25);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .12s var(--spring), filter .15s ease;
}
.ai-rec-btn:hover { filter: brightness(1.06); }
.ai-rec-btn:active { transform: scale(.94); }
.ai-rec-btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.ai-rec-btn::after {
  content: '';
  position: absolute; inset: -10px;
  border: 2px solid rgba(255,255,255,.55);
  border-radius: 50%;
  animation: aiRecRing 1.6s ease-out infinite;
  pointer-events: none;
}
.ai-rec-square {
  width: 32px; height: 32px;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
@keyframes aiRecRing {
  0% { transform: scale(.92); opacity: .75; }
  70% { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}
.ai-rec-tx {
  color: rgba(255,255,255,.92);
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.ai-rec-cancel {
  margin-top: 6px;
  padding: 8px 20px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font: inherit; font-size: 13px; cursor: pointer;
}
.ai-rec-cancel:hover { background: rgba(255,255,255,.18); }

.ai-foot {
  flex: none;
  padding: 0 16px 10px;
  font-size: 11px; color: var(--muted); text-align: center;
}

/* 键盘 / 触屏可达性 */
.ai-head-btn:focus-visible,
.ai-scope-exit:focus-visible,
.ai-chip:focus-visible,
.ai-send:focus-visible,
.ai-mic:focus-visible,
.ai-write-btn:focus-visible,
.ai-jump:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .ai-panel {
    right: 0; left: 0; bottom: 0;
    width: 100%;
    height: calc(100dvh - var(--safe-t));
    max-height: none;
    border-radius: 22px 22px 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
  }
  .ai-msgs { padding: 14px 12px; gap: 12px; }
  .ai-bubble { font-size: 14.5px; }
  .ai-suggest { padding: 0 12px 10px; }
  .ai-suggest-inner { padding: 12px; }
  .ai-chip { padding: 8px 10px; font-size: 12.5px; }
  .ai-suggest-next { padding: 2px 8px; font-size: 11.5px; }
  .ai-form { padding-left: 12px; padding-right: 12px; }
  /* 16px 防止 iOS 聚焦输入框时自动放大页面 */
  .ai-form textarea { font-size: 16px; }
  .ai-admin-stats { grid-template-columns: repeat(2, 1fr); }
  .ai-field-row { flex-direction: column; }
}

/* 管理页 */
.ai-admin { display: flex; flex-direction: column; gap: 16px; padding-top: 10px; padding-bottom: 84px; }
.ai-admin-notice {
  padding: 10px 13px; border: 1px solid var(--border); border-radius: 12px;
  background: color-mix(in srgb, var(--ok) 10%, var(--surface));
  color: var(--text); font-size: 13px; line-height: 1.6;
}
.ai-admin-notice.err {
  background: color-mix(in srgb, var(--danger) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
  color: var(--danger);
}
.ai-admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ai-stat {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface);
}
.ai-stat span { font-size: 12px; color: var(--muted); }
.ai-stat b { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.2; }
.ai-stat small { font-size: 11px; color: var(--text-2); }
.ai-admin-sec {
  padding: 16px;
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface);
}
.ai-admin-h2 {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--text);
}
.ai-admin-h2 .ico { width: 17px; height: 17px; color: var(--accent); }
.ai-admin-form { display: flex; flex-direction: column; gap: 12px; }
.ai-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.ai-field-lb { font-size: 12.5px; color: var(--text-2); }
.ai-field-lb small { color: var(--muted); font-size: 11.5px; }
.ai-field input, .ai-field select {
  height: 44px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface-2); color: var(--text);
  font: inherit; font-size: 13.5px; outline: none;
}
.ai-field input:focus, .ai-field select:focus { border-color: var(--accent); }
.ai-field-row { display: flex; gap: 10px; }
.ai-check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); }
.ai-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.ai-admin-hint { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.65; }
.ai-lights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.ai-light {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface-2);
  min-width: 0;
}
.ai-light-dot {
  flex: none; width: 12px; height: 12px; margin-top: 4px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--muted) 15%, transparent);
}
.ai-light-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ai-light-tx b { font-size: 13px; color: var(--text); line-height: 1.4; }
.ai-light-tx span { font-size: 12px; color: var(--text-2); line-height: 1.55; overflow-wrap: anywhere; }
.ai-light-tx small { font-size: 10.5px; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.ai-light-ok {
  border-color: color-mix(in srgb, var(--ok) 42%, var(--border));
  background: color-mix(in srgb, var(--ok) 7%, var(--surface-2));
}
.ai-light-ok .ai-light-dot {
  background: var(--ok);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent);
}
.ai-light-stale {
  border-color: color-mix(in srgb, var(--warn) 42%, var(--border));
  background: color-mix(in srgb, var(--warn) 7%, var(--surface-2));
}
.ai-light-stale .ai-light-dot {
  background: var(--warn);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 18%, transparent);
}
.ai-light-fail {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  background: color-mix(in srgb, var(--danger) 7%, var(--surface-2));
}
.ai-light-fail .ai-light-dot {
  background: var(--danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent);
}
.ai-light-off .ai-light-dot {
  background: var(--muted);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--muted) 15%, transparent);
}
.ai-admin-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ai-admin-actions form { margin: 0; }
.ai-admin-actions .btn .ico { width: 14px; height: 14px; }
.ai-user-list { display: flex; flex-direction: column; }
.ai-user-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0;
}
.ai-user-row + .ai-user-row { border-top: 1px dashed var(--border); }
.ai-user-id { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 2px; }
.ai-user-id b { font-size: 13.5px; color: var(--text); }
.ai-user-id small { font-size: 11.5px; color: var(--muted); }
.ai-user-sw { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.ai-user-sw input { width: 16px; height: 16px; accent-color: var(--accent); }
.ai-write-log { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ai-write-log-row {
  padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-2);
}
.ai-write-log-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ai-write-log-head b { font-size: 13px; color: var(--text); }
.ai-write-log-head span { font-size: 12px; color: var(--text-2); }
.ai-write-log-head small { margin-left: auto; font-size: 10.5px; color: var(--muted); }
.ai-write-log-row p { margin: 5px 0 0; font-size: 12px; color: var(--text-2); line-height: 1.6; overflow-wrap: anywhere; }
.ai-write-log-row small { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); line-height: 1.55; }
.ai-recent-imgs { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.ai-recent-img {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px; border: 1px solid var(--border); border-radius: 12px;
}
.ai-recent-th {
  flex: none; width: 68px; height: 68px; border-radius: 9px; overflow: hidden;
  background: var(--surface-2); display: block;
}
.ai-recent-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-recent-meta { flex: 1; min-width: 0; font-size: 12px; color: var(--text-2); }
.ai-recent-meta p { margin: 4px 0 0; line-height: 1.55; }
.ai-recent-meta small { display: block; margin-top: 4px; color: var(--muted); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-recent-ocr { color: var(--text); }
.ai-recent-err { color: var(--danger); }
.ai-state {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; border: 1px solid var(--border);
}
.ai-state-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); }
.ai-state-pending { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
.ai-state-error { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }

/* AI 面板的若干状态修饰（v1.58.0） */
body.ai-open { overflow: hidden; }
.ai-answer.streaming { white-space: pre-wrap; }
.ai-typing-tx { margin-left: 5px; font-size: 11.5px; color: var(--muted); }
.ai-hit {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 14px;
  transition: outline-color .2s ease;
}

.op-ai { color: var(--accent); }
@media (max-width: 768px) {
  .mp4-ops.ops-5 { grid-template-columns: repeat(5, 1fr); }
}

/* ===== 语音日记（v1.66.0） =====
   拍摄页模式切换 + 录音面板；列表/分享/编辑页的音频播放器与封面。 */

/* 拍摄/语音日记页（v1.66.1）：这一页没有顶栏，内容不能直接贴屏幕上沿 */
.edit-form.multi-form { padding-top: 44px; }
.mp-head { margin: 0 0 18px; }
.mp-head h1 {
  margin: 0 0 5px; font-size: 22px; font-weight: 700;
  letter-spacing: .01em; color: var(--text); line-height: 1.3;
}
.mp-head p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
@media (max-width: 768px) {
  .edit-form.multi-form { padding-top: calc(30px + var(--safe-t)); }
  .mp-head { margin-bottom: 16px; }
  .mp-head h1 { font-size: 20px; }
}

.mp-mode {
  display: flex; gap: 8px;
  margin: 0 0 18px;
}
.mp-mode-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text-2); text-decoration: none;
  font-size: 14px; -webkit-tap-highlight-color: transparent;
}
.mp-mode-btn .ico { width: 17px; height: 17px; }
.mp-mode-btn:hover { border-color: var(--border-strong); color: var(--text); }
.mp-mode-btn.active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent); font-weight: 600;
}

.voice-field { position: relative; }
.voice-box {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 26px 18px 20px; border: 1px solid var(--border); border-radius: 16px;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    var(--surface-2);
}
.voice-stage {
  display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%;
}
.voice-mic {
  width: 68px; height: 68px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  color: var(--accent);
}
.voice-mic .ico { width: 30px; height: 30px; }
.voice-box.recording .voice-mic {
  background: color-mix(in srgb, var(--danger) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  color: var(--danger);
  animation: voice-mic-pulse 1.6s ease-in-out infinite;
}
@keyframes voice-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 28%, transparent); }
  50% { box-shadow: 0 0 0 12px transparent; }
}
.voice-bars {
  display: flex; align-items: flex-end; justify-content: center; gap: 4px;
  width: min(100%, 420px); height: 74px; overflow: hidden;
}
.voice-bars span {
  flex: 1 1 0; max-width: 8px; min-height: 8%; border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 62%, var(--muted));
  opacity: .55; transition: height .12s linear, opacity .2s;
}
.voice-box.recording .voice-bars span {
  opacity: .95; animation: voice-bar-bounce .85s ease-in-out infinite alternate;
}
.voice-box.paused .voice-bars span { animation-play-state: paused; opacity: .45; }
@keyframes voice-bar-bounce {
  from { transform: scaleY(.55); }
  to { transform: scaleY(1.12); }
}
.voice-timer {
  font-size: 30px; font-weight: 700; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.voice-hint { font-size: 13px; color: var(--muted); text-align: center; line-height: 1.5; }
.voice-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.voice-tip { margin: 8px 2px 0; font-size: 12px; line-height: 1.55; }
.voice-box.recording .voice-timer { color: var(--danger); }
.voice-box audio { width: min(100%, 460px); margin-top: 4px; }

/* 卡片 / 分享页 / 编辑页：封面当背景，原生音频控件压在最下方 */
.voice-player { background: #0b0e16; }
.voice-poster {
  position: absolute; inset: 0;
  background-color: #0b0e16; background-size: cover; background-position: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.voice-poster::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .02) 35%, rgba(0, 0, 0, .58));
}
/* 有服务端封面时不再叠麦克风图标（封面本身就有麦克风），说明文字缩成左上角小胶囊 */
.voice-poster.has-img { justify-content: flex-start; align-items: flex-start; padding: 10px 12px; }
.voice-poster.has-img .voice-poster-cap {
  padding: 3px 9px; border-radius: 999px;
  background: rgba(8, 11, 18, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.voice-poster-mic {
  position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(2px);
}
.voice-poster-mic .ico { width: 23px; height: 23px; }
.voice-poster-cap {
  position: relative; z-index: 1; color: rgba(255, 255, 255, .84);
  font-size: 12.5px; letter-spacing: .05em;
}
.voice-audio {
  position: absolute; left: 8px; right: 8px; bottom: 6px; z-index: 2;
  width: calc(100% - 16px); height: 40px; color-scheme: dark;
}
.voice-audio::-webkit-media-controls-panel {
  background: rgba(12, 16, 24, .62);
  border-radius: 10px;
}
.voice-chip { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.voice-chip .ico { width: 12px; height: 12px; margin-right: 2px; vertical-align: -1px; }
.voice-edit-preview { margin: 8px 0 4px; }
.voice-edit-preview.voice-player { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: 12px; }
.empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.empty-actions .btn { margin-top: 14px; }

@media (max-width: 640px) {
  .voice-box { padding: 20px 12px 16px; }
  .voice-timer { font-size: 26px; }
  .voice-bars { height: 60px; }
}

/* 诊断面板（批次 12）：error/warn 按 rid 聚合，原生 <details> 展开 */
.diag-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 14px; padding: 6px 8px; }
.diag-head { padding: 6px 8px; color: var(--muted); font-size: 12px; }
.diag-item { border-top: 1px solid var(--border); }
.diag-item:first-child { border-top: 0; }
.diag-item summary { cursor: pointer; padding: 9px 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--text-2); -webkit-tap-highlight-color: transparent; }
.diag-item summary::-webkit-details-marker { display: none; }
.diag-item[open] summary { color: var(--text); }
.diag-error summary .chip { background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger); }
.diag-warn summary .chip { background: color-mix(in srgb, var(--warn) 16%, transparent); border-color: color-mix(in srgb, var(--warn) 40%, transparent); color: var(--warn); }
.diag-body { padding: 2px 12px 10px; font-size: 12px; }
.diag-line { padding: 5px 0; border-top: 1px dashed var(--border); word-break: break-all; }
.diag-line code { color: var(--muted); font-size: 11px; margin-right: 6px; }
.diag-line b { color: var(--text); }
.diag-dim { color: var(--muted); }