/* 家庭相册 ·「冷调纸质家庭相册」设计系统
   色板：冷灰蓝纸底 + 陶土橘点缀 + 冷墨灰蓝文字，低饱和胶片感。
   字体：全站统一系统黑体栈（--font-sans），无外部 Web Font 依赖。 */
:root {
  color-scheme: light;
  --paper: #eef1f6;          /* 冷灰蓝纸底 */
  --paper-card: #fafbfe;     /* 卡片纸面 */
  --frame: #ffffff;          /* 拍立得白框 */
  --ink: #3d4657;            /* 冷墨灰蓝正文 */
  --ink-soft: #7d8699;       /* 次级文字 */
  --accent: #c1683f;         /* 陶土橘 */
  --accent-deep: #b8552f;    /* 焦糖深橘 */
  --accent-soft: #f5e6d8;    /* 浅陶土底 */
  --heart: #e0245e;          /* 点赞红 */
  --heart-deep: #c4164c;     /* 点赞深红 */
  --heart-soft: #fce7ee;     /* 浅红心底 */
  --line: #dfe4ec;           /* 冷灰分隔线 */
  --tape: rgba(168, 184, 205, .45);  /* 纸胶带 */
  --shadow: 0 3px 14px rgba(58, 70, 95, .12);
  --shadow-lift: 0 10px 28px rgba(58, 70, 95, .18);
  --radius: 10px;
  --radius-card: 12px;       /* 首页卡片与封面统一圆角（照片流规范） */
  --tab-active: var(--accent-deep);  /* 频道标签条激活色（替代小红书红） */
  --font-serif: Georgia, "Times New Roman", "Songti SC", serif;
  --font-sans: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --on-accent: #fffdf8;      /* 强调色上的文字 */
  --input-bg: #fff;          /* 输入框底色 */
  --topbar-bg: rgba(255, 253, 248, .92);
  --topbar-shadow: 0 1px 8px rgba(58, 70, 95, .06);
  --grain: rgba(86, 104, 138, .03);        /* 纸纹颗粒 */
  --sticky-bg: rgba(238, 241, 246, .88);   /* 吸顶时间线组头 */
  --float-bg: rgba(255, 253, 248, .88);    /* 年份索引等浮层 */
  --nav-hover: rgba(223, 228, 236, .55);
  --well: #e3e8f1;           /* 凹陷纸槽（粒度切换） */
  --well-shadow: inset 0 1px 3px rgba(58, 70, 95, .10);
  --segment-shadow: 0 1px 4px rgba(58, 70, 95, .18);
  --drag-bg: #fbf1e6;        /* 拖放高亮底 */
  --record-bg: #fffaf3;      /* 成员记录卡 */
  --net-link: #d8d2c8;       /* 共现网连线 */
  --net-link-lit: #a89f91;
  --mark-ink: #b08d5e;       /* 人工编辑标记 */
  --mark-bg: #f7ecd9;
  --ok: #7d8c5c;             /* 成功状态 */
  --danger-line: #e0a48c;
  --released: #b16a3b;       /* 已发布人物卡描边 */
  --btn-shadow: 0 1px 3px rgba(58, 70, 95, .08);
  --danger-ink: #9b3e2d;     /* 错误/警示文字 */
  --ok-ink: #3d7a4e;         /* 批量操作成功结果文字 */
  --face-select: #d74b32;    /* 人脸框与候选选中红 */
  --pill-shadow: 0 4px 16px rgba(24, 30, 40, .3);   /* 浮动操作药丸投影 */
  --row-shadow: 0 3px 7px rgba(58, 70, 95, .10);    /* 审计表行投影（配合 drop-shadow） */
  --tabs-bg: rgba(255, 253, 248, .72);   /* 管理页签条底 */
  --tag-off-bg: #efe7d8;     /* 停用标签底 */
  --seal-off-bg: #e7e2d6;    /* 停用印章底 */
  --card-off-bg: #f2f4f8;    /* 停用成员卡片底 */
  --off-gradient: #b3bac8;   /* 停用头像渐变起 */
  --off-gradient-deep: #98a1b3;  /* 停用头像渐变止 */
}

/* 暗色主题：冷墨蓝黑夜色纸面，token 全覆盖；切换逻辑见 theme.js 与 base.html 内联脚本 */
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #14171d;
  --paper-card: #1d232d;
  --frame: #252c38;
  --ink: #dde3ee;
  --ink-soft: #98a2b6;
  --accent: #d47e50;
  --accent-deep: #e08d63;
  --accent-soft: rgba(212, 126, 80, .16);
  --heart: #f0507e;
  --heart-deep: #f26a93;
  --heart-soft: rgba(240, 80, 126, .16);
  --line: rgba(214, 224, 240, .12);
  --tape: rgba(150, 165, 195, .28);
  --shadow: 0 3px 14px rgba(0, 0, 0, .45);
  --shadow-lift: 0 10px 28px rgba(0, 0, 0, .55);
  --on-accent: #fff8f2;
  --input-bg: #141922;
  --topbar-bg: rgba(18, 21, 27, .88);
  --topbar-shadow: 0 1px 8px rgba(0, 0, 0, .4);
  --grain: rgba(255, 255, 255, .025);
  --sticky-bg: rgba(20, 23, 29, .88);
  --float-bg: rgba(29, 35, 45, .92);
  --nav-hover: rgba(214, 224, 240, .08);
  --well: #10141a;
  --well-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
  --segment-shadow: 0 1px 4px rgba(0, 0, 0, .4);
  --drag-bg: rgba(212, 126, 80, .12);
  --record-bg: #222834;
  --net-link: #3a4252;
  --net-link-lit: #5a6478;
  --mark-ink: #d8b384;
  --mark-bg: rgba(212, 166, 106, .16);
  --ok: #a5b87c;
  --danger-line: #7a4a38;
  --released: #d08a52;
  --btn-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  --danger-ink: #c05642;
  --ok-ink: #5a9e6c;
  --face-select: #e0644a;
  --pill-shadow: 0 4px 16px rgba(0, 0, 0, .5);
  --row-shadow: 0 3px 7px rgba(0, 0, 0, .4);
  --tabs-bg: rgba(29, 35, 45, .72);
  --tag-off-bg: #2a2e37;
  --seal-off-bg: #2a2e37;
  --card-off-bg: #171b22;
  --off-gradient: #4a5468;
  --off-gradient-deep: #3a4354;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-sans); background: var(--paper); color: var(--ink);
  padding-bottom: env(safe-area-inset-bottom);
  background-image: radial-gradient(var(--grain) 1px, transparent 1px);
  background-size: 22px 22px;  /* 极淡的纸纹颗粒 */
}
a { color: inherit; text-decoration: none; }
.muted { color: var(--ink-soft); font-size: 13px; }
.error { color: var(--accent-deep); margin: 8px 0; }
.ok { color: var(--ok); margin: 12px 0; }
.hidden { display: none !important; }
/* 透明 input 全尺寸覆盖视觉按钮，让真实控件承接用户点击。 */
.file-btn-wrap { position: relative; display: inline-block; }
input[type=file].file-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer; font-size: 0;
}
h1, h2 { font-family: var(--font-sans); font-weight: 700; letter-spacing: .02em; }
h2 { margin: 20px 0 14px; font-size: 22px; }
h2::before { content: "❧ "; color: var(--accent); font-weight: 400; }
code { background: var(--accent-soft); padding: 1px 6px; border-radius: 4px; font-size: 13px; }

/* 顶栏：纸条贴页首 */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--topbar-bg); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--topbar-shadow);
}
.nav { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.nav a {
  padding: 6px 13px; border-radius: 999px; font-size: 14px;
  min-height: 44px; display: inline-flex; align-items: center;
  transition: background .18s, color .18s, transform .12s;
}
.nav a:active { transform: scale(.97); }
.nav a.active { background: var(--accent); color: var(--on-accent); }
.nav a.muted { background: transparent; color: var(--ink-soft); }
.nav a:focus-visible, .nav-link-button:focus-visible {
  outline: 2px solid var(--ink); outline-offset: -3px;
}
.nav-icon { display: none; }
@media (min-width: 481px) {
  /* 桌面端：左侧纵向侧栏（仿小红书桌面导航），融在页面底色上 */
  :root { --topbar-h: 0px; }
  body { padding-left: 200px; }
  .topbar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 200px;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 18px 12px;
    background: none; backdrop-filter: none; border-bottom: 0; box-shadow: none;
  }
  .nav { flex: 1; flex-direction: column; gap: 6px; margin-left: 0; justify-content: flex-start; }
  .nav a, .nav .nav-link-button {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 10px 14px; min-height: 46px; border-radius: 12px;
    font-size: 15px; color: var(--ink);
  }
  .nav a:hover, .nav .nav-link-button:hover { background: var(--nav-hover); }
  .nav a.active { background: var(--line); color: var(--ink); font-weight: 700; }
  .nav-icon { display: block; width: 22px; height: 22px; flex: 0 0 auto; }
  .nav .nav-inline-form { margin-top: auto; }
  .nav .nav-link-button { color: var(--ink-soft); text-align: left; }
}
@media (max-width: 480px) {
  .topbar { min-width: 0; }
  .nav {
    width: 100%; max-width: 100%; min-width: 0; flex-wrap: nowrap;
    justify-content: flex-start; overflow-x: auto;
    overscroll-behavior-inline: contain; scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .nav a, .nav .nav-link-button {
    flex: 0 0 auto; min-height: 44px; padding: 6px 10px;
    font-size: 14px; white-space: nowrap;
  }
  .nav .nav-inline-form { flex: 0 0 auto; }
}
.container { max-width: 1200px; margin: 0 auto; padding: 16px; }

/* 按钮：陶土色 + 纸张边 */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--paper-card); color: var(--ink);
  border-radius: 999px; padding: 8px 18px; font-size: 14px; cursor: pointer;
  min-height: 40px; transition: transform .12s, box-shadow .18s, background .18s;
  box-shadow: var(--btn-shadow);
}
.btn:hover { box-shadow: var(--shadow); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-deep); }
.btn.small { padding: 4px 12px; font-size: 13px; min-height: 36px; }
.btn.block { width: 100%; }
.btn.danger { border-color: var(--danger-line); color: var(--accent-deep); }

/* 下拉选择：与输入框同规格的纸质控件，陶土橘箭头 */
select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line); background-color: var(--paper-card); color: var(--ink);
  border-radius: 8px; padding: 8px 34px 8px 12px; font-size: 14px; font-family: inherit;
  min-height: 40px; max-width: 100%; cursor: pointer;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23b8552f" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat: no-repeat; background-position: right 12px center; background-size: 13px;
  transition: border-color .18s, box-shadow .18s;
}
select:hover { border-color: var(--accent); }
select:focus-visible { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

/* 登录/找回/重置：桌面中央的纸质卡片 + 纸胶带 */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card {
  position: relative;
  background: var(--paper-card); border-radius: 6px; padding: 44px 34px 36px; width: 330px;
  box-shadow: var(--shadow-lift); text-align: center;
  border: 1px solid var(--line);
}
.login-card::before {  /* 顶部纸胶带 */
  content: ""; position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 110px; height: 28px; background: var(--tape);
  border-left: 1px dashed rgba(150, 110, 60, .3); border-right: 1px dashed rgba(150, 110, 60, .3);
}
.login-card h1 { font-size: 26px; margin-bottom: 8px; color: var(--accent-deep); }
.login-card form { margin-top: 20px; }
.login-card input {
  width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 16px; margin-bottom: 14px; background: var(--input-bg); color: var(--ink);
  min-height: 44px;
}
.login-card input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.login-card a { color: var(--accent); }
.remember-row {
  display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft);
  margin-bottom: 14px; min-height: 44px; cursor: pointer;
}
.remember-row input { width: 20px; height: 20px; accent-color: var(--accent); }

/* 过滤条 */
.filters { margin-bottom: 16px; }
.filter-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.filter-label {
  min-height: 32px; display: inline-flex; align-items: center; flex: 0 0 auto;
  font-size: 13px; color: var(--ink-soft); font-family: var(--font-sans);
}
.filter-options {
  display: flex; align-items: center; flex: 1 1 auto; flex-wrap: wrap;
  min-width: 0; gap: 8px;
}
.filter-row.is-collapsed .filter-options {
  flex-wrap: nowrap; overflow: hidden;
}
.filter-row.is-expanded .filter-options { flex-wrap: wrap; }
.filter-row.is-expanded .filter-options .chip {
  max-width: 100%; white-space: normal;
}
.filter-row.is-expanded .chip-label {
  overflow: visible; text-overflow: clip; white-space: normal;
  overflow-wrap: anywhere;
}
.filter-row.is-compact { gap: 3px; }
.filter-row.is-compact .filter-label { font-size: 10px; }
.filter-row.is-compact .filter-options { gap: 3px; }
.filter-row.is-compact .filter-options .chip {
  min-height: 30px; padding: 4px 3px; font-size: 10px;
}
.filter-row.is-minimal { gap: 0; }
.filter-row.is-minimal .filter-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.filter-options [hidden] { display: none !important; }
.chip {
  padding: 4px 13px; border-radius: 999px; background: var(--paper-card);
  border: 1px solid var(--line); font-size: 13px;
  min-width: 0; min-height: 32px; display: inline-flex; align-items: center;
  transition: background .18s, color .18s, transform .12s;
}
.filter-options .chip { flex: 0 0 auto; white-space: nowrap; }
.chip-label {
  display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.filter-toggle {
  appearance: none; color: var(--accent-deep); cursor: pointer;
  font-family: var(--font-sans);
}
.filter-toggle:hover { border-color: var(--accent); }
.filter-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip:active { transform: scale(.97); }
.chip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* 首页浏览视图与时间线 */
.view-switch {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  gap: 8px; margin: -2px 0 22px;
}
/* 频道标签条：视图级频道（精选/时间线/视频，规范 §5.3）；窄口左对齐横滑 */
.channel-tabs {
  display: flex; align-items: center; justify-content: center; gap: 32px;
  min-height: 44px; margin: 2px 0 14px;
}
.channel-tab {
  position: relative; padding: 10px 2px; font-size: 16px; color: var(--ink-soft);
  transition: color .15s;
}
.channel-tab:hover { color: var(--accent-deep); }
.channel-tab.on { color: var(--tab-active); font-weight: 700; }
.channel-tab.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px;
  height: 2px; border-radius: 2px; background: var(--tab-active);
}
@media (max-width: 480px) {
  .channel-tabs {
    justify-content: flex-start; gap: 24px; overflow-x: auto;
    margin: 2px -10px 12px; padding: 0 10px;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
  }
  .channel-tabs::-webkit-scrollbar { display: none; }
  .channel-tab { flex: 0 0 auto; }
}
/* 置顶区块：筛选之下、浏览切换之上，两视图共用 */
.pinned-section { margin-bottom: 18px; }
.pinned-title {
  font-family: var(--font-sans); font-size: 18px; color: var(--accent-deep);
  border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 14px;
}
/* 粒度切换：凹陷纸槽里嵌凸起纸签（激活项），与 chip 区分层级 */
.segmented {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  background: var(--well); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--well-shadow);
}
.segmented .segment {
  padding: 3px 14px; border-radius: 999px; font-size: 13px; line-height: 1.6;
  min-height: 30px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft); white-space: nowrap;
  transition: background .18s, color .18s, box-shadow .18s, transform .12s;
}
.segmented .segment:hover { color: var(--accent-deep); }
.segmented .segment:active { transform: scale(.96); }
.segmented .segment:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.segmented .segment.on {
  background: var(--paper-card); color: var(--accent-deep); font-weight: 600;
  box-shadow: var(--segment-shadow);
}
/* 时间线分组（日/周/月/季/年单层）：组头吸顶在顶栏之下 */
.timeline-feed { scroll-margin-top: var(--topbar-h, 65px); }
.timeline-group { margin-bottom: 26px; }
.timeline-group-title {
  position: sticky; top: var(--topbar-h, 65px); z-index: 30;
  margin: 0 0 12px; padding: 7px 2px 6px;
  font-family: var(--font-sans); font-size: 17px; font-weight: 600; letter-spacing: .02em;
  color: var(--ink);
  background: var(--sticky-bg); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.timeline-group-title::before { content: none; }  /* 组头密集，去掉 h2 的 ❧ 饰 */
/* 年份索引：右侧书口式悬浮条，点击定位到该年倒序时间线的开头 */
.year-index {
  position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 40;
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 5px; border-radius: 999px;
  background: var(--float-bg); backdrop-filter: blur(5px);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.year-index a {
  font-family: var(--font-serif); font-size: 12px; letter-spacing: .03em;
  color: var(--ink-soft); padding: 3px 7px; border-radius: 8px; text-align: center;
  transition: color .15s, background .15s;
}
.year-index a:hover { color: var(--accent-deep); background: var(--accent-soft); }

/* 专辑详情页沿用 CSS 多列旧拍立得；首页网格在 home-grid.css。 */
.waterfall { column-count: 4; column-gap: 16px; }
@media (max-width: 1000px) { .waterfall { column-count: 3; } }
@media (max-width: 480px) { .waterfall { column-count: 2; column-gap: 10px; } }
.card {
  --tilt: 0deg;
  break-inside: avoid;
  margin-bottom: 16px; background: var(--frame);
  border-radius: 4px; padding: 8px 8px 6px;   /* 白框，下边框经 meta 区视觉加宽 */
  box-shadow: var(--shadow); position: relative;
  transform: rotate(var(--tilt));
  transition: transform .18s ease, box-shadow .18s ease;
  /* 入场动画只回填 delay 前的 from 帧（backwards）；不能用 forwards/both——
     填充值会在动画结束后持续压制 :hover 的 transform，导致 hover 瞬间跳帧闪烁 */
  animation: fadeUp .45s ease backwards;
}
.waterfall .card:nth-child(4n+1) { --tilt: -.7deg; }
.waterfall .card:nth-child(4n+2) { --tilt: .6deg; }
.waterfall .card:nth-child(4n+3) { --tilt: -.4deg; }
.waterfall .card:nth-child(4n)   { --tilt: .8deg; }
.card:hover { transform: rotate(0deg) translateY(-4px); box-shadow: var(--shadow-lift); }
@keyframes fadeUp {
  from { opacity: 0; transform: rotate(var(--tilt)) translateY(14px); }
  to { opacity: 1; transform: rotate(var(--tilt)) translateY(0); }
}
/* 错落渐入：按列内位置错开延迟 */
.card:nth-child(6n+2) { animation-delay: .04s; }
.card:nth-child(6n+3) { animation-delay: .08s; }
.card:nth-child(6n+4) { animation-delay: .12s; }
.card:nth-child(6n+5) { animation-delay: .16s; }
.card:nth-child(6n)   { animation-delay: .2s; }
.card a { display: block; position: relative; }
.card img {
  width: 100%; display: block; border-radius: 2px;
}
.waterfall[data-can-reorder="1"] .card { user-select: none; }
.waterfall[data-can-reorder="1"] .card a,
.waterfall[data-can-reorder="1"] .card img { -webkit-user-drag: none; }
.video-badge {
  position: absolute; right: 6px; top: 6px; background: rgba(42, 50, 66, .6); color: #fffdf8;
  border-radius: 999px; padding: 2px 9px; font-size: 12px;
}
/* 卡片点赞/评论按钮：日期右侧的小药丸，已赞时红心红 */
.card-action {
  border: 1px solid var(--line); background: var(--paper-card); color: var(--ink-soft);
  border-radius: 999px; padding: 1px 9px; font-size: 12px; line-height: 1.6;
  cursor: pointer; font-family: inherit;
  transition: color .15s, border-color .15s, background .15s;
}
.card-action:hover { border-color: var(--accent); color: var(--accent-deep); }
.card-action.liked { color: var(--heart-deep); border-color: var(--heart); background: var(--heart-soft); }
/* 卡片内联评论区：💬 就地展开；展开时归正卡片倾斜（复用 .card 的 transform 过渡） */
.card.comments-open { --tilt: 0deg; }
.card-comments .comments { margin-top: 10px; padding-top: 10px; }
.card-comments .js-comment-list { max-height: 40vh; overflow-y: auto; }
/* 排序模式卡片整体禁选文本，评论区恢复可选（输入框编辑/复制粘贴不受影响） */
.waterfall[data-can-reorder="1"] .card-comments { user-select: text; }
/* 详情页点赞按钮：沿用 .btn 药丸，已赞时红心红高亮 */
.like-btn.liked {
  color: var(--heart-deep); border-color: var(--heart); background: var(--heart-soft);
}
.card-meta { padding: 8px 4px 8px; }
/* 专辑瀑布流卡片描述：两行截断 + max-height 兜底，line-clamp 失效时也不溢出压到下方按钮 */
.caption {
  display: -webkit-box;
  max-height: 45px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 15px; line-height: 1.5; margin-bottom: 6px;
}
.caption a:hover { color: var(--accent-deep); }
.meta-row { display: flex; justify-content: space-between; align-items: center; }
.date-info { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; }
/* ❤/💬 药丸容器：场景标签移除后排在 meta-row 右端（space-between 就位） */
.card-actions { display: inline-flex; align-items: center; gap: 5px; }

.date { font-size: 12px; color: var(--ink-soft); }
.date-source {
  font-size: 10px; line-height: 1.5; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px;
}
.tag {
  font-size: 11px; color: var(--accent-deep); background: var(--accent-soft);
  padding: 2px 8px; border-radius: 999px;
}
.empty { text-align: center; padding: 80px 0; color: var(--ink-soft); font-family: var(--font-sans); }
.empty a { color: var(--accent); }

/* 卡片删除按钮 */
.card-del {
  position: absolute; left: 12px; top: 12px; z-index: 2; width: 28px; height: 28px;
  border: none; border-radius: 50%; background: rgba(42, 50, 66, .55); color: #fffdf8;
  font-size: 16px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s;
}
.card:hover .card-del { opacity: 1; }
@media (hover: none) { .card-del { opacity: .8; } }

/* 无限滚动哨兵 */
.sentinel { text-align: center; padding: 18px 0 30px; font-family: var(--font-sans); }

/* 上传页 */
.compress-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.compress-row .chip { cursor: pointer; }
.compress-row input { vertical-align: -2px; accent-color: var(--accent); }
.dropzone {
  border: 2px dashed var(--line); border-radius: var(--radius-card); background: var(--paper-card);
  padding: 60px 20px; text-align: center; color: var(--ink-soft);
  transition: border-color .18s, background .18s;
}
.dropzone.drag { border-color: var(--accent); background: var(--drag-bg); }
.dropzone .file-btn-wrap { margin-top: 14px; }
.picker-compat { margin-top: 16px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.picker-compat summary { cursor: pointer; }
.picker-compat label { display: block; margin: 12px 0 6px; }
.picker-compat select, .picker-compat input[type=file] {
  display: block; box-sizing: border-box; width: 100%; max-width: 420px; min-width: 0;
  min-height: 44px; font: inherit;
}
.picker-compat input[type=file] { overflow: hidden; }
.picker-compat .muted { overflow-wrap: anywhere; }
.upload-status { margin-top: 16px; }
.upload-status .item { padding: 6px 0; font-size: 14px; }
.upload-status .item.err { color: var(--accent-deep); }
.upload-status .item.ok { color: var(--ok); }
.upload-status .item.info { color: var(--ink-soft); }

/* 共现网标签页：成员编辑网格与共现关系图 */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 12px; }
.cooccurrence-section { margin-bottom: 24px; }
.person-card {
  background: var(--paper-card); border-radius: var(--radius); padding: 16px;
  box-shadow: var(--shadow); border: 1px solid var(--line);
}
/* 已命名成员卡片：入场错落浮现 + 悬停轻抬，与 hh-card/album-card 同一节奏 */
.person-group-card {
  transition: transform .18s, box-shadow .18s;
  animation: hh-rise .45s ease both;
  animation-delay: min(calc(var(--i, 0) * 45ms), 450ms);
}
.person-group-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
/* 动作层级：看照片为唯一强调钮，其余操作降为幽灵钮，hover 才显形 */
.person-actions > .btn.small:not(.primary) {
  background: none; border-color: transparent; box-shadow: none; color: var(--ink-soft);
}
.person-actions > .btn.small:not(.primary):hover {
  color: var(--accent-deep); background: var(--accent-soft); box-shadow: none;
}
.unnamed-person-card { scroll-margin-top: 88px; }
.person-card.released-person {
  border-color: var(--released);
  animation: released-person-pulse 1.6s ease-out 1;
}
@keyframes released-person-pulse {
  0% { box-shadow: 0 0 0 5px rgba(177, 106, 59, .28); }
  100% { box-shadow: var(--shadow); }
}
.person-name { font-family: var(--font-sans); font-size: 18px; font-weight: 700; margin-bottom: 2px; }
.person-title { min-width: 0; }
.person-meta { font-size: 13px; line-height: 1.5; }
.person-actions { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.person-actions .inline-form { grid-column: 1 / -1; }
.group-actions { margin-top: 8px; }
.person-records {
  border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.person-record { background: var(--record-bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.person-record-head { display: flex; align-items: flex-start; gap: 8px; }
.person-record-line { font-size: 13px; line-height: 1.5; }
.person-record-actions { margin-top: 8px; }
.face-sample { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; box-shadow: var(--shadow); }
.person-group-card .face-sample {
  margin-bottom: 0; flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--paper-card), var(--shadow);
}
.delete-person {
  grid-column: 1 / -1; justify-self: end; background: none; border: none;
  padding: 2px 4px; font-size: 12px; color: var(--accent-deep); cursor: pointer;
}
.inline-form { display: flex; gap: 6px; }
.inline-form input {
  flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--input-bg); color: var(--ink);
}

/* 共现网 */
.net-canvas {
  display: block; width: 100%; height: min(72vh, 720px); background: var(--paper-card);
  border-radius: var(--radius); box-shadow: var(--shadow);
  border: 1px solid var(--line); touch-action: none;
}
.net-link { stroke: var(--net-link); transition: opacity .15s; }
.net-link.lit { stroke: var(--net-link-lit); }
.net-link.dim { opacity: .1; }
.net-node { cursor: pointer; transition: opacity .15s; }
.net-node.dim { opacity: .15; }
.net-node-bg { fill: var(--accent); }
.net-node-ring { fill: none; stroke: var(--paper-card); stroke-width: 2; }
.net-initial { fill: var(--on-accent); font-weight: 700; font-size: 15px; pointer-events: none; }
.net-label { fill: var(--ink); font-size: 13px; font-weight: 600; pointer-events: none; }
.net-count { fill: var(--ink-soft); font-size: 11px; pointer-events: none; }

.avatar-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px; max-height: 50vh; overflow-y: auto; margin: 12px 0;
}
.avatar-option {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px;
  cursor: pointer; border: 2px solid transparent;
}
.avatar-option:hover { border-color: var(--accent); }
.avatar-option.current { border-color: var(--accent); }

/* 用户头像：自定义图片或字母色块共用圆形；尺寸由使用处场景类给定 */
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fffdf8; font-style: normal; flex: 0 0 auto; }
img.avatar { object-fit: cover; }
.comment-head .avatar, .detail-line .avatar { width: 20px; height: 20px; font-size: 11px; }
.user-item > .avatar { width: 28px; height: 28px; font-size: 13px; }
img.hh-avatar { object-fit: cover; background: var(--accent-soft); }
.account-avatar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.account-avatar { width: 64px; height: 64px; font-size: 28px; }
.avatar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 详情页 */
.detail-wrap { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 768px) { .detail-wrap { grid-template-columns: 1fr; } }
.detail-media {
  background: var(--frame); border-radius: 4px; padding: 12px;
  box-shadow: var(--shadow-lift); transform: rotate(-.3deg);
}
.detail-media img, .detail-media video { width: 100%; border-radius: 2px; display: block; }
.detail-info {
  background: var(--paper-card); border-radius: var(--radius); padding: 18px;
  box-shadow: var(--shadow); border: 1px solid var(--line);
}
.detail-caption { font-size: 17px; line-height: 1.7; margin-bottom: 10px; }
.detail-line { margin: 10px 0; font-size: 14px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tag-x { border: none; background: none; color: var(--ink-soft); cursor: pointer; font-size: 14px; padding: 0 2px; }
.tag-x:hover { color: var(--accent-deep); }
.detail-actions { margin-top: 16px; display: flex; gap: 10px; }

/* 评论区 */
.comments { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.comments h3 { margin: 0 0 6px; font-size: 16px; }
.comment { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.comment:last-child { border-bottom: none; }
.comment-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.comment-author { font-weight: 600; font-size: 14px; }
.comment-head .muted { font-size: 11px; }
.comment-del { margin-left: auto; font-size: 11px; padding: 2px 8px; min-height: 26px; }
.comment-body { margin: 4px 0 0; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.comment-img {
  margin-top: 6px; max-width: 160px; max-height: 160px;
  border-radius: 4px; border: 1px solid var(--line); display: block;
}
.comment-form { margin-top: 12px; }
.comment-form textarea {
  width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 15px; font-family: var(--font-sans); background: var(--input-bg); color: var(--ink);
  resize: vertical;
}
.comment-form-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
/* 回复：两层扁平结构，第二层缩进；「回复」按钮与删除按钮同为弱视觉权重 */
.comment-reply { margin-left: 28px; padding: 6px 0; border-bottom: none; }
.comment-reply-btn { font-size: 11px; padding: 2px 8px; min-height: 26px; }
.comment-head .comment-reply-btn:last-child { margin-left: auto; }
/* 回复框：挂到顶级评论末尾，与回复同样缩进 */
.reply-form-wrap { margin: 6px 0 4px 28px; }
.reply-form textarea {
  width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 14px; font-family: var(--font-sans); background: var(--input-bg); color: var(--ink);
  resize: vertical;
}
/* 评论附图入口：透明原生 input 覆盖描边小按钮（复用 .file-overlay 直点模式），
   视觉权重低于「发表」主按钮；悬停态落在包裹层上，因为 input 盖在视觉按钮之上 */
.comment-file-btn { flex-shrink: 0; }
.comment-file-label { gap: 6px; color: var(--ink-soft); }
.comment-file-btn:hover .comment-file-label {
  color: var(--accent-deep); border-color: var(--accent); box-shadow: var(--shadow);
}
/* 已选图片预览行：独占一行，夹在文本框与按钮行之间 */
.comment-preview {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  max-width: 320px; padding: 6px 10px 6px 6px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-card);
}
.comment-preview-thumb {
  width: 40px; height: 40px; object-fit: cover; flex-shrink: 0;
  border-radius: 4px; border: 1px solid var(--line); background: var(--frame); padding: 2px;
}
.comment-preview-name {
  flex: 1; min-width: 0; font-size: 12px; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.comment-preview-x {
  flex-shrink: 0; border: none; background: none; padding: 2px 4px;
  color: var(--ink-soft); font-size: 15px; line-height: 1; cursor: pointer;
}
.comment-preview-x:hover { color: var(--accent-deep); }
#commentMore { margin-top: 10px; }

/* 详情页元信息行：小字号药丸单行排列；尺寸文本作弹性收缩位（省略号兜底），
   其余子项原子不折行，避免「修改日期 / 场景标签」被挤成两行 */
.detail-info .meta-row { flex-wrap: nowrap; gap: 4px; }
.detail-info .meta-row > * { flex-shrink: 0; white-space: nowrap; }
.detail-info .meta-row .date { font-size: 11px; }
.detail-info .meta-row .btn.small { font-size: 11px; padding: 3px 8px; min-height: 28px; }
.detail-info .meta-row .tag { padding: 2px 8px; }
.detail-info .meta-row .muted {
  font-size: 10px; flex-shrink: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}

/* Lightbox：暖黑幕布 + 淡入 */
.lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(24, 30, 40, .92);
  display: flex; align-items: center; justify-content: center;
  animation: lbFade .18s ease;
}
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
.lightbox-body { max-width: 92vw; max-height: 90vh; }
.lightbox-body img, .lightbox-body video {
  max-width: 92vw; max-height: 90vh; border-radius: 3px;
  box-shadow: 0 12px 50px rgba(0, 0, 0, .5);
  background: var(--frame); padding: 6px;
}
.lightbox-close {
  position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 24px;
  color: #fffdf8; font-size: 36px; cursor: pointer; z-index: 120;
}
.lightbox-comments {
  position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); right: 24px;
  z-index: 120; padding: 6px 16px; border: none; border-radius: 999px;
  background: rgba(255, 253, 248, .16); color: #fffdf8;
  font-size: 14px; font-family: inherit; text-decoration: none;
  cursor: pointer; transition: background .15s;
}
.lightbox-comments:hover { background: rgba(255, 253, 248, .3); }
/* lightbox 点赞按钮：与「评论」入口左右对称的玻璃药丸，已赞时红心红 */
.lightbox-like {
  position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); left: 24px;
  z-index: 120; padding: 6px 16px; border: none; border-radius: 999px;
  background: rgba(255, 253, 248, .16); color: #fffdf8;
  font-size: 14px; cursor: pointer; transition: background .15s;
}
.lightbox-like:hover { background: rgba(255, 253, 248, .3); }
.lightbox-like.liked { background: var(--heart); }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 110;
  width: 52px; height: 52px; border: none; border-radius: 50%;
  background: rgba(255, 253, 248, .16); color: #fffdf8; font-size: 30px; line-height: 1;
  cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; touch-action: manipulation;
}
.lightbox-nav.prev { left: 14px; }
.lightbox-nav.next { right: 14px; }
.lightbox:hover .lightbox-nav { opacity: 1; }
.lightbox-nav:hover { background: rgba(255, 253, 248, .3); }
@media (hover: none), (max-width: 768px) {
  .lightbox-nav { opacity: .75; width: 44px; height: 44px; font-size: 24px; }
  .lightbox-nav.prev { left: 8px; }
  .lightbox-nav.next { right: 8px; }
}

/* lightbox 评论面板：桌面端右侧 360px 挤出式侧栏（照片在剩余空间重新居中），
   移动端底部 75vh 抽屉；面板打开时 #lightbox 带 .comments-open */
.lightbox-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 360px; z-index: 115;
  background: var(--paper-card); color: var(--ink);
  padding: 20px 18px; overflow-y: auto; overscroll-behavior: contain;
  box-shadow: -10px 0 34px rgba(0, 0, 0, .4);
  animation: lbPanelIn .18s ease;
}
@keyframes lbPanelIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.lightbox.comments-open { padding-right: 360px; }
.lightbox.comments-open .lightbox-body,
.lightbox.comments-open .lightbox-body img,
.lightbox.comments-open .lightbox-body video { max-width: calc(92vw - 360px); }
.lightbox.comments-open .lightbox-comments { right: 384px; }
.lightbox.comments-open .lightbox-nav.next { right: 374px; }
.lightbox-panel .comments { margin-top: 0; border-top: none; padding-top: 0; }
.lightbox-panel .js-comment-empty { margin: 4px 0 10px; }
.lightbox-panel-grip { display: none; }
@media (max-width: 768px) {
  .lightbox-panel {
    top: auto; left: 0; width: auto; height: 75vh;
    padding: 4px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius: 14px 14px 0 0; box-shadow: 0 -10px 34px rgba(0, 0, 0, .4);
    animation: lbDrawerIn .18s ease;
  }
  @keyframes lbDrawerIn { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  .lightbox.comments-open { padding-right: 0; padding-bottom: 75vh; }
  .lightbox.comments-open .lightbox-body,
  .lightbox.comments-open .lightbox-body img,
  .lightbox.comments-open .lightbox-body video { max-width: 92vw; max-height: 22vh; }
  .lightbox.comments-open .lightbox-comments { right: 24px; bottom: calc(75vh + 12px); }
  .lightbox.comments-open .lightbox-like { bottom: calc(75vh + 12px); }
  .lightbox.comments-open .lightbox-nav.next { right: 8px; }
  .lightbox-panel-grip { display: block; height: 20px; position: relative; touch-action: none; }
  .lightbox-panel-grip::before {
    content: ''; position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 999px; background: var(--line);
  }
}

/* 移动端细节 */
@media (max-width: 480px) {
  .container { padding: 10px; }
  .login-card { width: calc(100vw - 40px); padding: 36px 22px 30px; }
  .filters .chip { font-size: 12px; padding: 4px 10px; }
  .view-switch { justify-content: flex-start; margin-bottom: 18px; }
  .segmented .segment { padding: 3px 10px; font-size: 12px; min-height: 28px; }
  .timeline-group { margin-bottom: 20px; }
  .timeline-group-title { font-size: 15px; }
  .year-index { right: 5px; padding: 5px 3px; }
  .year-index a { font-size: 10px; padding: 2px 5px; }
}

/* 尊重减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .card, .lightbox, .lightbox-panel { animation: none; }
  .card, .btn, .chip, .nav a, .segmented .segment,
  .year-index a { transition: none; }
}

/* 共现网成员记录合并 */
.person-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.merge-check { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }

/* 描述人工编辑标记与编辑器 */
.manual-mark {
  font-size: 11px; color: var(--mark-ink); background: var(--mark-bg);
  padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 2px;
}
.caption-edit textarea {
  width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 15px; font-family: var(--font-sans); background: var(--input-bg); color: var(--ink);
  resize: vertical;
}
.caption-edit-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.caption-view .btn { margin-top: 6px; }

/* 导航待确认角标 */
.nav-badge {
  background: var(--accent); color: #fffdf8; border-radius: 999px;
  font-size: 11px; padding: 1px 7px; margin-left: 3px; vertical-align: 2px;
}

/* 主题切换按钮：日/月图标随主题互换（SVG 内 <g> 分组显隐，.nav-icon 恒可见） */
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: inline; }

/* 使用手册页（/help）：章节卡片 + 目录胶囊 + 拍立得截图；公开页，未登录也可访问 */
.help-hero { text-align: center; margin: 6px 0 14px; }
.help-hero h1 { margin: 0 0 6px; font-size: 26px; }
.help-hero .muted { margin: 0; }
.help-toc {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 12px 0 20px;
}
.help-toc .chip { text-decoration: none; }
.help-chapter {
  background: var(--paper-card); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow);
  padding: 18px 20px; margin-bottom: 18px;
}
.help-chapter h2 {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 10px; font-size: 19px;
}
.help-no {
  font-family: var(--font-serif); color: var(--accent);
  font-size: 14px; letter-spacing: .1em; flex-shrink: 0;
}
.help-chapter ul { margin: 0; padding-left: 1.25em; }
.help-chapter li { margin: 6px 0; font-size: 14.5px; line-height: 1.75; }
.help-chapter li::marker { color: var(--accent); }
.help-chapter p { margin: 8px 0; }
.help-chapter b { color: var(--accent-deep); }
.help-shot {
  margin: 14px auto 2px; max-width: 300px;
  background: var(--frame); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 10px 8px; box-shadow: var(--shadow-lift);
}
.help-shot img { display: block; width: 100%; height: auto; border-radius: 3px; }
.help-shot figcaption {
  color: var(--ink-soft); font-size: 12px; text-align: center; padding-top: 6px;
}

/* 账户菜单：头像+显示名按钮（侧栏底部/顶栏最右）与锚点弹出菜单 */
.account-menu { position: relative; flex-shrink: 0; margin-left: 8px; }
.account-menu-btn {
  display: flex; align-items: center; justify-content: center;
  position: relative; padding: 6px; min-height: 0;
  border: none; border-radius: 999px;
  background: none; color: var(--ink);
  font-family: var(--font-sans); font-size: 14px; cursor: pointer;
  list-style: none; user-select: none;
  transition: background .18s, box-shadow .18s;
}
.account-menu-btn::-webkit-details-marker { display: none; }
.account-menu-btn:hover { background: var(--nav-hover); }
.account-menu-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.account-menu.active .account-menu-btn { box-shadow: 0 0 0 2px var(--accent); }
.account-avatar-sm { width: 28px; height: 28px; font-size: 13px; }
.account-theme-icon { width: 16px; height: 16px; flex-shrink: 0; }
.account-dot {
  position: absolute; top: -3px; right: -3px; width: 10px; height: 10px;
  background: var(--accent); border: 2px solid var(--paper); border-radius: 50%;
}
.account-menu-list {
  display: none;
  position: absolute; z-index: 90; min-width: 176px; padding: 6px;
  flex-direction: column; gap: 2px;
  background: var(--paper-card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lift);
}
.account-menu[open] .account-menu-list { display: flex; }
.account-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 12px; border: none; border-radius: 8px; background: none;
  color: var(--ink); font-family: var(--font-sans); font-size: 14px;
  text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.account-item:hover { background: var(--nav-hover); }
.account-item.current { color: var(--accent-deep); font-weight: 600; }
.account-item-form { margin: 0; }
@media (min-width: 481px) {
  /* 桌面侧栏：裸头像左对齐于侧栏底部（头像圆与导航图标列左缘对齐），菜单向上弹出并锚定按钮左缘 */
  .account-menu { align-self: flex-start; margin: 10px 0 0 8px; }
  .account-menu-list {
    left: 0; right: auto; bottom: calc(100% + 8px);
    transform: none;
  }
}
@media (max-width: 480px) {
  /* 移动顶栏：钉在最右不参与 .nav 横滚，菜单向下弹出并收窄到内容宽 */
  .account-menu-list {
    top: calc(100% + 6px); right: 0;
    min-width: 0; width: max-content;
  }
}