/* ===== 摄影计划工作台 v2.0 样式 ===== */
/* v0.3.7: macOS 蓝金风格 — 白灰置底 / 磨砂玻璃材质 / 蓝主色 + 金点缀, 窗口排列沿用 Craft 布局 */
:root {
  --pdrgb: 40,96,201; --prgb: 52,120,246; --grgb: 217,154,6;
  --primary: #3478f6;          /* macOS 系统蓝 */
  --primary-light: #e8f1fe;
  --primary-dark: #2a63d8;
  --gold: #d99a06;             /* 金点缀 — 已拍摄状态 / 重点强调 */
  --gold-dark: #a87705;
  --gold-light: #fdf4dc;
  --bg: #f5f6f8;               /* 浅冷灰置底 */
  --bg-deep: #eceff4;
  --card: #ffffff;
  /* v0.8.9 方案B「蓝金玻璃 2.0」材质 token（原变量名全部保留，取值收敛） */
  --glass: linear-gradient(150deg, rgba(255,255,255,.8), rgba(255,255,255,.54));       /* 磨砂玻璃面(渐变) */
  --glass-strong: linear-gradient(150deg, rgba(255,255,255,.92), rgba(255,255,255,.7)); /* 弹窗级玻璃(渐变) */
  --glass-border: rgba(20,30,60,.08);   /* 深色发丝线 — 消除白边观感 */
  --hair: rgba(20,30,60,.08);           /* 全站替代白色描边的发丝线 */
  --hi: inset 0 1px 0 rgba(255,255,255,.5);   /* 玻璃边缘内高光（仅用于玻璃卡片，禁止用在主按钮） */
  --blur: saturate(140%) blur(20px);
  --border: rgba(20,30,60,.08);
  --on-grad: #fff;              /* 主题色块上的文字：A 组 4 套 = 白字；B 组 serif 由 body.theme-plain[data-ui="serif"] 覆盖为 var(--text)；其余 B 组主题仍白字（与 task-19/24 手机端同名同语义） */
  --text: #1d2530;             /* 近黑偏蓝 */
  --text-sub: #5d6877;         /* v0.8.9: 对比度 3.45 → 5.0 (AA 达标) */
  --text-light: #5d6877;       /* v0.8.9: 此前被 16 处引用却从未定义（声明全部失效）→ 补为 AA 达标次要色 */
  --danger: #b02a2e;
  --danger-bg: #fdecec;
  --warn: #96690c;
  --warn-bg: #fdf6e3;
  --ok: #2b8a3e;
  --ok-bg: #e9f7ec;
  --info: #2a63d8;             /* 信息蓝与主色统一 */
  --info-bg: var(--primary-light);
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 14px rgba(16, 24, 40, .07);
  --shadow-float: 0 4px 12px rgba(16, 24, 40, .1), 0 28px 64px rgba(16, 24, 40, .2);

  /* ===== v0.8.9（方案B）增量 token — 取值见 docs/UI全面审计_20261002/06_实施方案_v0.8.9.md ===== */
  /* 字阶 8 档 */
  --fs-1: 11px; --fs-2: 12px; --fs-3: 13px; --fs-4: 14px; --fs-5: 16px; --fs-6: 18px; --fs-7: 20px; --fs-8: 24px;
  /* 间距 4/8 网格 —— 预留：本版已定义但未全站落地（改用会动数百处 padding，超出本版范围） */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  /* 圆角 5 档（V1-09：补 --r-xs=8px，全站主力档位） */
  --r-xs: 8px; --r-s: 10px; --r-m: 14px; --r-l: 20px; --r-full: 999px;
  /* 阴影 3 档 */
  --sh-1: 0 1px 2px rgba(16,24,40,.06), 0 4px 14px rgba(16,24,40,.07);
  --sh-2: 0 2px 6px rgba(16,24,40,.08), 0 14px 36px rgba(16,24,40,.13);
  --sh-3: 0 4px 12px rgba(16,24,40,.1), 0 28px 64px rgba(16,24,40,.2);
  /* 层级 6 档 —— 全部落地（v1-10 收口：三档预留改为对齐生产的真实取值并实际引用）：
     生产既有层（原文保留在各规则的注释里）：.msg-fab 900 / .login-mask 999 / .modal-mask 1000 /
     .modal 1001 / .coach-spot 3001 / .win-ctrls 9000 / .theme-sheet-mask 9998 /
     .toast-container 9999（v0.8.9.8/UI-01 由 2000 上调，须压过主题弹层遮罩 9998）/ .ach-tip 99999。
     历史教训：直接套 200/300/400 会把浮动消息球、窗口控制键、主题弹层压到弹窗之下 —— 故取值一律对齐生产实况。
     仍未纳入本档的高层（.win-ctrls 9000 / .theme-sheet-mask 9998 / .ach-tip 99999 / 悬浮窗 26000 / #qtip 30000）
     属 V1-12「层级体系重构」范围，风险高，单独批次逐屏验证后再动。 */
  --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-popover: 900; --z-modal: 1000; --z-toast: 9999;
  /* P2-4 补齐：此前被引用但未定义（声明静默失效 / 主题不跟随）→ 按原回退值补为真实 token */
  --bg-soft: #f6f7fb;
  --bg2: #f5f6f8;
  --primary-deep: #2860c9;
  --gold-deep: #8a5f05;         /* AA 达标的深金 —— 只用于文字（对比白底 5.6:1） */
  /* 主题渐变（--grad-primary / -hover / -active）见下方 body 规则：
     var() 在「声明处」即解析，放 :root 会被锁死为默认蓝，换主题不跟随；放 body 才能随 7 套主题重算。 */

  /* v0.5.2: 全局动画变量 — 苹果式缓动曲线 + 统一时长 */
  --ease-out: cubic-bezier(.22, .61, .36, 1);          /* 标准减速曲线 (苹果 ease) */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);         /* 平滑进出 */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);      /* 弹性 (小幅过冲) */
  --ease-soft: cubic-bezier(.4, 0, .2, 1);             /* Material 标准 — 通用过渡 */
  --dur-fast: .18s;            /* 微交互: 红点 / 悬浮提示 */
  --dur-base: .26s;            /* 常规: 弹窗淡入 / 卡片过渡 */
  --dur-modal: .32s;           /* 重要: 弹窗弹性入场 */
  --dur-slow: .5s;             /* 长动画: 天气骨架淡入 */
}

/* ===== v0.8.5: 界面主题系统 — body[data-ui] 色板覆盖 (料色+控件圆角性格) ===== */
/* 经典蓝金 = :root 基线, 不覆盖; 青灰素银色彩维持现状仅定圆角档 */
body[data-ui="he_qing"] { --pdrgb:31,110,100; --prgb:43,138,126; --grgb:242,118,27; --info:#2b8a7e; --info-bg:#e2f2ee;
  --primary: #2b8a7e; --primary-dark: #1f6e64; --primary-light: #e2f2ee;
  --gold: #f2761b; --gold-dark: #c95c0b; --gold-light: #fdebd9;
  --bg: #f5f8f7; --bg-deep: #ebf1ef; --border: #dfe8e5;
  --r-btn: 10px; --r-card: 11px;
}
body[data-ui="zhusha"] { --pdrgb:110,31,19; --prgb:156,47,31; --grgb:184,134,59; --info:#9c2f1f; --info-bg:#f7e9e6;
  --primary: #9c2f1f; --primary-dark: #6e1f13; --primary-light: #f7e9e6;
  --gold: #b8863b; --gold-dark: #8a652c; --gold-light: #f6ecd8;
  --bg: #f7f5f2; --bg-deep: #efece6; --border: #e8e2d8;
  --r-btn: 4px; --r-card: 8px;
}
body[data-ui="xingguang"] { --pdrgb:34,119,138; --prgb:47,151,166; --grgb:34,119,138; --info:#2f97a6; --info-bg:#e2f2f4;
  --primary: #2f97a6; --primary-dark: #22778a; --primary-light: #e2f2f4;
  --gold: #22778a; --gold-dark: #1b5f6e; --gold-light: #e2f2f4;
  --bg: #f4f8f9; --bg-deep: #e9f1f2; --border: #dfeaec;
  --r-btn: 8px; --r-card: 9px;
}
body[data-ui="qinghua"] { --pdrgb:23,57,92; --prgb:36,74,120; --grgb:176,128,58; --info:#244a78; --info-bg:#e6edf5;
  --primary: #244a78; --primary-dark: #17395c; --primary-light: #e6edf5;
  --gold: #b0803a; --gold-dark: #8a652c; --gold-light: #f4ecdd;
  --bg: #f5f7f9; --bg-deep: #eaedf1; --border: #e0e5ec;
  --r-btn: 6px; --r-card: 11px;
}
body[data-ui="difanni"] { --pdrgb:51,115,109; --prgb:67,144,138; --grgb:51,115,109; --info:#43908a; --info-bg:#e4f0ed;
  --primary: #43908a; --primary-dark: #33736d; --primary-light: #e4f0ed;
  --gold: #33736d; --gold-dark: #265752; --gold-light: #e4f0ed;
  --bg: #f5f8f7; --bg-deep: #eaf1ef; --border: #dfe9e6;
  --r-btn: 12px; --r-card: 12px;
}
body[data-ui="serif"] {
  --pdrgb: 94, 117, 116; --prgb: 123, 146, 144; --grgb: 176, 167, 130;
  --info: #7b9290; --info-bg: #e6eded;
  --primary: #7b9290; --primary-dark: #5e7674; --primary-light: #e6eded;
  --gold: #b0a882; --gold-dark: #8a7f52; --gold-light: #f5f1e4;
  --bg: #f5f7f7; --bg-deep: #ecf0f0; --card: #fbfcfc;
  --glass: rgba(251, 252, 252, .97); --glass-strong: rgba(255, 255, 255, .99); --glass-border: rgba(20,30,60,.08);
  --blur: none;
  --border: #dde1e1;
  --text: #2a2f30; --text-sub: #5d6877;
  --danger: #8f5f5f; --danger-bg: #f6eeee;
  --warn: #8a7f52; --warn-bg: #f5f1e4;
  --ok: #6d8b74; --ok-bg: #eef3ef;
  --radius: 8px;
  --r-btn: 8px; --r-card: 12px;
  --shadow: 0 1px 0 rgba(42, 47, 48, .03), 0 3px 10px rgba(42, 47, 48, .04);
  --shadow-float: 0 8px 28px rgba(42, 47, 48, .12);
  --serif: "Source Han Serif SC", "Noto Serif SC", "SimSun", "STSong", serif;
}

/* v0.8.9（方案B）主题渐变 token — 必须声明在 body 层：
   自定义属性里的 var() 在其「声明元素」上即完成替换，若写在 :root，会被锁死为默认蓝金，
   body[data-ui] 换主题时不会重算。声明在 body 上则可随 7 套主题的 --primary 实时生效。 */
body {
  /* v0.8.9.1（老板 2026-10-03 裁定）主题分两组：
     A 组（蓝金玻璃 / 荷青柿橘 / 星光水蓝 / 蒂芙尼青）= **饱和渐变** primary → primary-dark，配白字；
     B 组（青灰素银 / 朱砂正红 / 青花钴蓝）由 body.theme-plain 覆盖为**纯色 var(--primary)**（不再发灰）。
     旧的 42/68 浅渐变已被老板否决（发灰发丑），此处不再使用。 */
  /* v0.8.9.6（老板：「渐变方向反了，要左深右浅、从左上到右下」）：交换色标 ——
     左上 = 深端(86% primary + 灰蓝 #8892a4)、右下 = 浅端(58% primary + 白)。
     对照实验实测：本版渲染为「左上暗 / 右下亮」，上一版为「左上亮 / 右下暗」。 */
  --grad-primary: linear-gradient(135deg, color-mix(in srgb, var(--primary) 86%, #8892a4), color-mix(in srgb, var(--primary) 58%, #fff));
  --grad-primary-hover: linear-gradient(135deg, color-mix(in srgb, var(--primary) 78%, #8892a4), color-mix(in srgb, var(--primary) 50%, #fff));
  --grad-primary-active: var(--primary);
  /* v0.8.9 R-3：主色「文字专用」加深色 —— 78% 主色 + 22% 黑，随 7 套主题重算（同 task-19 手机端取值）。
     用于 11–13px 主色小字（登录模式链接 / 签到 / 各类主色标签），避免亮蓝小字 2.7–4.0:1 不达标。 */
  --primary-ink: color-mix(in srgb, var(--primary) 72%, #000);
  /* v0.8.9 Lead 补：状态色「文字专用」加深色 —— 与 task-19 手机端同口径。
     Lead 独立复算：桌面 .badge.green / .flow-step.done / .slot .st.done（3.34–3.95）、
     .fc-table .has / .save-dot（3.66–4.26）、.fc-table .partial / .exec-shot .es-l（3.91–4.74）不达标；serif 最差 3.34。 */
  --ok-ink: color-mix(in srgb, var(--ok) 78%, #000);
  --warn-ink: color-mix(in srgb, var(--warn) 78%, #000);
  --danger-ink: color-mix(in srgb, var(--danger) 78%, #000);
  --purple-ink: color-mix(in srgb, var(--purple, #7c5cff) 78%, #000);
  --gold-ink: color-mix(in srgb, var(--gold) 68%, #000);
  --info-ink: color-mix(in srgb, var(--info) 72%, #000);
  /* v0.8.9.2: 以下 4 个是「运行时由 JS 写入」的自定义属性，此处只声明兜底默认值，**不是真值** ——
     --dx/--dy 真值由 js/app.js 逐粒内联 setProperty 覆盖（签到弹窗火花飞散方向），
     本处仅用于「元素非 JS 生成」时退化，避免 achSparkFly 位移恒为 0。
     --seg-gap/--seg-n 是分段滑块(.view-seg/.idea-seg/.seg)的项间距与项数；全仓现无 JS 写入，
     故 3 项以上的滑块宽度仍按 2 项算（JS 侧待修，非本次 CSS 范围）。 */
  --dx: 0px; --dy: -20px;
  --seg-gap: 2px; --seg-n: 2;
}

/* v0.5.2: 偏好降级 — 系统设置「减少动态效果」时, 所有动画退化为瞬时 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: var(--fs-4); color: var(--text);
  /* 白灰置底 + 极淡蓝金角落光晕 (供磨砂玻璃取景) */
  background:
    radial-gradient(1100px 600px at 88% -8%, rgba(var(--prgb), .07), transparent 62%),
    radial-gradient(900px 520px at -6% 104%, rgba(var(--grgb), .06), transparent 60%),
    linear-gradient(180deg, #f7f8fa, #eef1f5);
  background-attachment: fixed;
}
button { font-family: inherit; }
/* v0.5.2: 输入框聚焦/失焦走苹果式平滑过渡，加入悬停高亮 */
input, select, textarea {
  font-family: inherit; font-size: var(--fs-4); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-xs); padding: 6px 10px;
  background: #fff; outline: none; width: 100%;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
input:hover, select:hover, textarea:hover { border-color: #c4cbd6; }
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--prgb), .12);
}
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
textarea { resize: vertical; min-height: 56px; }
label { display: block; font-size: var(--fs-3); color: var(--text-sub); margin-bottom: 4px; font-weight: 600; }
.field { margin-bottom: 10px; }
.row { display: flex; gap: 10px; } .row > * { flex: 1; }

.app-shell { display: flex; height: 100vh; overflow: hidden; }

/* ---- 侧边栏 (v0.3.7: macOS 磨砂玻璃侧栏 + 蓝色胶囊选中 / v0.5.2: 苹果式激活过渡) ---- */
.sidebar {
  width: 220px; flex-shrink: 0; background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
  color: #5b6472;
  display: flex; flex-direction: column;
  border-right: 1px solid rgba(20, 30, 60, .08);
  transition: width var(--dur-base) var(--ease-spring);
}
.sidebar-header {
  display: flex; align-items: center; gap: 10px; padding: 18px 16px;
  font-weight: 700; font-size: var(--fs-5); color: #1d2530; border-bottom: 1px solid rgba(20, 30, 60, .07);
}
.logo-icon { font-size: calc(var(--fs-8) * 11 / 12); color: var(--primary); display: flex; }
.logo-icon svg { width: 24px; height: 24px; }
.sidebar-nav { flex: 1; padding: 10px 8px; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--r-xs); color: #5b6472; text-decoration: none; margin-bottom: 2px;
  /* v0.5.2: 苹果式激活过渡 — 背景缓动 + 颜色 + 微缩放 */
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out);
  position: relative;
}
.nav-item:hover { background: rgba(var(--prgb), .10); color: #1d2530; }
.nav-item:active { transform: scale(.97); }
.nav-item.active {
  background: var(--primary); color: #fff;
  box-shadow: 0 4px 14px rgba(var(--prgb), .38), 0 1px 3px rgba(var(--prgb), .22);
  /* v0.5.2: 激活时轻微弹入（小幅过冲） */
  animation: navActivate var(--dur-base) var(--ease-spring);
}
@keyframes navActivate {
  from { transform: scale(.94); opacity: .7; }
  to { transform: scale(1); opacity: 1; }
}
/* v0.5.2: 激活项的图标在切换时弹一下 — 强化"被选中"的反馈感 */
.nav-item.active .nav-icon { animation: iconPop var(--dur-base) var(--ease-spring); }
@keyframes iconPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.nav-icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-icon svg { width: 19px; height: 19px; }
.sidebar-footer { padding: 12px 16px; margin-bottom: 8px; font-size: var(--fs-2); color: #636c7a; border-top: 1px solid rgba(20, 30, 60, .07); }
.sidebar-footer > .side-user-card { margin-bottom: 10px; }
#network-status { color: #2f9e44; }

/* v0.5.5: ICP 备案信息 */
.icp-footer { margin-top: 8px; font-size: var(--fs-1); line-height: 1.6; text-align: center; }
.icp-footer a { color: #636c7a; text-decoration: none; transition: color .2s; }
.icp-footer a:hover { color: var(--primary); }
.icp-sep { margin: 0 6px; color: #d0d5dd; }
.icp-police { display: inline-flex; align-items: center; gap: 4px; }
.icp-icon { width: 14px; height: 14px; vertical-align: middle; }
.app-shell.nav-folded .icp-footer { display: none; }

/* ---- 主区 ---- */
/* v0.8.9.2 修（audit round4 · M12 新发现 #1）：
   `.main-area` 纵向 flex 容器**缺 `min-height:0`** → flex 默认 `min-height:auto`，
   子项 `aside.pl-side{flex:1 1 0%}` 撑不回去 → **左栏被纵向裁掉 111px**（与老板截图那次同源，只是发生在父层）。
   这正是 fe-home 修 `.profile-layout` 时漏掉的上一层；`min-width:0` 早有、`min-height:0` 一直缺。 */
.main-area { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar {
  height: 56px; background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: space-between; padding: 0 22px; flex-shrink: 0;
}
.topbar-title { font-size: var(--fs-6); font-weight: 700; }
.content-scroll { flex: 1; overflow-y: auto; overflow-x: auto; padding: 20px 22px; }

/* ===== v0.8.1: 固定框体模式 — 模块向首页玻璃卡基准看齐，头固定、体内滚、页面不整页下滑 ===== */
.content-scroll.hfixed { overflow: hidden; display: flex; flex-direction: column; }
.mfx {
  flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--hair); border-radius: var(--radius); box-shadow: var(--shadow);
}
.mfx-head {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  /* v0.8.9 修正：原先默认 nowrap + .mfx-tools flex-shrink:0，窄屏（≤430px）工具条整体溢出，
     靠右对齐会把**左侧档位推出视口**（390 宽下「🖥 大屏」x=-115，点不到）。
     改法：允许折行（仅溢出时才生效，宽屏布局零变化），row-gap 只管两行之间的间距。零媒体查询。 */
  flex-wrap: wrap; row-gap: 6px;
  padding: 11px 16px; border-bottom: 1px solid var(--border); background: rgba(255, 255, 255, .45);
  border-radius: var(--radius) var(--radius) 0 0;
}
.mfx-title { font-size: var(--fs-4); font-weight: 700; display: flex; align-items: center; gap: 8px; min-width: 0; }
/* v0.8.9 修正：flex-shrink 由 0 放开为可收缩 + min-width:0，否则窄屏下工具条拒绝收缩、把档位顶出屏幕 */
.mfx-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 1; min-width: 0; flex-wrap: wrap; }
.mfx-body { flex: 1; min-height: 0; overflow-y: auto; }
/* 固定框体内表格：表头吸顶（器材库/地点库等清单） */
.mfx-body .tbl thead th { position: sticky; top: 0; z-index: 2; background: #f7f9fc; box-shadow: 0 1px 0 var(--border); }
/* 固定底部操作栏（详情页状态推进等） */
.mfx-foot {
  flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 11px 16px; border-top: 1px solid var(--border); background: rgba(255, 255, 255, .45);
  border-radius: 0 0 var(--radius) var(--radius);
}
/* v0.8.1: mfx-head 内搜索框自动撑满 */
.mfx-head input.grow, .mfx-tools input.grow { flex: 1; min-width: 180px; width: auto; }
/* v0.8.1: 看板固定模式 — 列头固定、卡片列内滚动（.kanban-col-body 为 v0.8.1 新增结构） */
.content-scroll.hfixed .kanban { height: 100%; align-items: stretch; }
.content-scroll.hfixed .kanban-col { display: flex; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }
.content-scroll.hfixed .kanban-col-head { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--border); background: rgba(255, 255, 255, .5); flex-shrink: 0; border-radius: var(--radius) var(--radius) 0 0; }
.kanban-col-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; }

/* v0.4.5.1: 模块切换内容区淡入动画 / v0.5.2: 升级为苹果式弹性位移 + 加大位移幅度 */
@keyframes contentFadeIn {
  from { opacity: 0; transform: translateY(14px) scale(.992); }
  60% { opacity: 1; }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ⚠️ v0.8.9.1 已删除 `.content-switch-anim`（原：animation: contentFadeIn var(--dur-modal) var(--ease-spring)）。
   根因：switchModule 同时给 #content 挂了 .page-in 与 .content-switch-anim 两个类，两条 animation 声明
   互相顶替 —— .page-in（后声明）先播；700ms 后它被摘掉，`.content-switch-anim` 立刻接管、再播一次
   contentFadeIn 弹性位移 → 实测 animationstart 落在切换后 755ms，表现为"动画结束后所有窗口又弹一次"。
   现全站模块切换只保留 .page-in 一条入场动画（见文件末第 7 节 + app.js switchModule）。
   contentFadeIn 关键帧本身仍被天气骨架/重要提示气泡（:1527 / :1830）使用，不得删。 */
/* v0.5.2: 顶栏标题切换时淡入 — 与内容区联动，强化模块切换反馈 */
.topbar-title { transition: opacity var(--dur-base) var(--ease-out); }
.topbar-title.switching { opacity: 0; transform: translateY(-4px); }
.topbar-title.switching.enter {
  animation: titleIn var(--dur-base) var(--ease-spring);
}
@keyframes titleIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ---- 按钮 (v0.5.2: 苹果式按压反馈 + 统一过渡曲线) ---- */
.btn {
  border: 1px solid var(--border); background: #fff; color: var(--text);
  border-radius: var(--r-s); padding: 6px 13px; font-size: var(--fs-3); cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-spring);
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.btn:hover { border-color: var(--primary); color: var(--primary); }
.btn:active { transform: scale(.96); }
.btn-primary { border: 0; background-origin: border-box; background: var(--grad-primary); color: var(--on-grad); }
.btn-primary:hover { background: var(--grad-primary-hover); color: var(--on-grad); }
.btn-primary:active { transform: scale(.95); }
.btn-danger { color: var(--danger); }
.btn-danger:hover { border-color: var(--danger); background: var(--danger-bg); }
.btn-sm { padding: 4px 10px; font-size: var(--fs-3); border-radius: var(--r-xs); }
.btn-link {
  border: none; background: none; color: var(--primary); cursor: pointer; padding: 2px 4px; font-size: var(--fs-3);
  transition: color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.btn-link:hover { text-decoration: underline; }
.btn-link:active { transform: scale(.95); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ---- 卡片 (v0.3.7: 磨砂玻璃卡) ---- */
.card {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--hair); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-pad { padding: 16px 18px; }
.card-title { font-size: var(--fs-5); font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }

/* ---- 统计卡 (磨砂玻璃) ---- */
.stats-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 16px; }
.stat-card {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--hair); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
  cursor: pointer; position: relative;
  transition: transform var(--dur-base) var(--ease-spring), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.stat-card:hover { transform: translateY(-3px); border-color: rgba(var(--prgb), .35); box-shadow: 0 8px 24px rgba(20, 30, 60, .12); }
.stat-card::after {
  content: '→'; position: absolute; right: 10px; top: 8px; font-size: var(--fs-2); color: var(--text-sub); opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.stat-card:hover::after { opacity: 1; }
.stat-num { font-size: calc(var(--fs-8) * 13 / 12); font-weight: 800; margin: 2px 0; }
.stat-label { font-size: var(--fs-3); color: var(--text-sub); }
.stat-card.c1 .stat-num { color: var(--primary); }
.stat-card.c2 .stat-num { color: var(--danger); }
.stat-card.c3 .stat-num { color: var(--gold-dark); }
.stat-card.c4 .stat-num { color: #087f8c; }
.stat-card.c5 .stat-num { color: var(--ok); }

/* ---- 首页布局 ---- */
.home-grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.home-left { min-width: 0; }

/* ---- 月历 ---- */
.cal-card { margin-bottom: 16px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-title { font-size: var(--fs-5); font-weight: 700; }
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-nav select { width: auto; padding: 5px 8px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-week { text-align: center; font-size: var(--fs-2); color: var(--text-sub); padding: 5px 0; font-weight: 700; }
.cal-day {
  min-height: 52px; border: 1px solid var(--hair); border-radius: var(--r-xs); padding: 5px 7px;
  cursor: pointer; background: rgba(255,255,255,.82); transition: all .12s; position: relative;
}
.cal-day:hover { border-color: var(--primary); background: var(--primary-light); }
.cal-day.empty { background: transparent; border-color: transparent; cursor: default; }
.cal-day.today { border-color: var(--primary); border-width: 2px; }
.cal-day .d-num { font-size: var(--fs-3); font-weight: 700; }
.cal-day.has-plan { background: var(--primary-light); }
.cal-day .d-plans { font-size: var(--fs-1); color: var(--primary-dark); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-day .d-badge {
  position: absolute; top: 4px; right: 5px; background: var(--primary-dark); color: #fff;
  border-radius: var(--r-xs); font-size: var(--fs-1); padding: 0 5px; line-height: 15px;
}
/* v0.3.4.1: 月历按状态着色 (v0.3.7: 已拍摄=金色) */
.cal-day.status-draft { border-left: 3px solid #adb5bd; }
.cal-day.status-wait { border-left: 3px solid var(--primary); }
.cal-day.status-shot { border-left: 3px solid var(--gold); }
.cal-day.status-upload { border-left: 3px solid var(--ok); }
.cal-day.status-done { border-left: 3px solid #1a5c2a; }
.cal-day.status-draft .d-num { color: #868e96; }
.cal-day.status-wait .d-num { color: var(--primary); }
.cal-day.status-shot .d-num { color: var(--gold-deep); }
.cal-day.status-upload .d-num { color: var(--ok); }
.cal-day.status-done .d-num { color: #1a5c2a; }
/* v0.3.4.1: 月历状态图例 */
.cal-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: var(--fs-2); color: var(--text-sub); }
.cal-legend .lg { display: inline-flex; align-items: center; gap: 4px; }
.cal-legend .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* ---- 选项卡 (v0.5.2: iOS Segmented Control 风格 — 胶囊激活 + 弹性过渡) ---- */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 14px; flex-wrap: wrap; position: relative; }
.tab {
  padding: 8px 14px; cursor: pointer; font-size: var(--fs-4); color: var(--text-sub);
  border-bottom: 2px solid transparent; margin-bottom: -2px; border-radius: var(--r-xs) var(--r-xs) 0 0; user-select: none;
  /* v0.5.2: 过渡曲线换苹果式 + 加入背景过渡 */
  transition: color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              border-bottom-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-spring);
}
.tab:hover { color: var(--primary); background: var(--primary-light); }
.tab:active { transform: scale(.96); }
.tab.active {
  color: var(--primary); border-bottom-color: var(--primary); font-weight: 700;
  /* v0.5.2: 激活时弹入反馈 */
  animation: tabActivate var(--dur-base) var(--ease-spring);
}
@keyframes tabActivate {
  from { transform: translateY(2px) scale(.96); opacity: .6; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.tab .cnt { background: var(--primary-light); color: var(--primary); border-radius: var(--r-xs); font-size: var(--fs-1); padding: 1px 6px; margin-left: 5px; transition: all var(--dur-base) var(--ease-out); }
.tab.active .cnt { background: var(--primary-dark); color: #fff; }

/* v0.5.0: 设置页 Tab 面板 — v0.5.2: 升级弹性过渡 */
.st-panel { display: none; }
.st-panel.active { display: block; animation: stPanelIn var(--dur-base) var(--ease-spring); }
/* v0.8.7 修复「新布局版本日志显示异常」: 该面板内是 iframe，需要确定高度才能铺满。
   原先 .st-panel 高度由内容决定 → 内部 height:100% 解析不到父高 → iframe 退化为
   HTML 默认 150px，日志内容只剩一条缝。这里让它走 flex 撑满 .mfx-body。 */
.st-panel[data-panel="changelog"].active {
  display: flex; flex-direction: column; height: 100%; min-height: 0;
}
.st-panel[data-panel="changelog"].active > .card-title { flex-shrink: 0; }
.st-panel[data-panel="changelog"].active > #st-changelog-body { flex: 1; min-height: 0; }
@keyframes stPanelIn {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to { opacity: 1; transform: none; }
}

/* ---- 计划清单(首页) (v0.5.2: 升级过渡曲线 + 入场动画) ---- */
.mini-plan {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--hair);
  border-radius: var(--r-xs); margin-bottom: 8px; cursor: pointer; background: rgba(255,255,255,.82);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-spring);
  animation: rowIn var(--dur-base) var(--ease-out) backwards;
}
.mini-plan:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-1px); }
.mini-plan:active { transform: scale(.985); }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mini-plan .mp-date { font-size: var(--fs-2); color: var(--text-sub); width: 78px; flex-shrink: 0; }
.mini-plan .mp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mini-plan .mp-tags { display: flex; gap: 4px; flex-shrink: 0; }

/* ---- 徽章 ---- */
/* v0.8.9.7（老板：标签胶囊风格与更新后的 UI 不一致，但语义色要保留）：
   语义底色/文字色一律不动（黄=等待、绿=完成、红=警示…），只把材质细节升级到新语言 ——
   统一深色发丝描边 + 柔和投影 + 胶囊圆角（原 10px 圆角与全站 --r-full 胶囊不一致）。 */
.badge {
  display: inline-block; font-size: var(--fs-2); padding: 2px 9px; border-radius: var(--r-full);
  font-weight: 600; white-space: nowrap;
  border: 1px solid var(--hair); box-shadow: var(--sh-1);
}
.badge.gray { background: linear-gradient(135deg, #f2f5f9, #e6eaf1); color: #5b6478; }
.badge.blue { background: linear-gradient(135deg, color-mix(in srgb, var(--info) 8%, #fff), color-mix(in srgb, var(--info) 18%, #fff)); color: var(--info-ink); }   /* v0.8.9.8(UI-05): 生色 → --info-ink（serif 3.05→≥5.4） */
.badge.red { background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 8%, #fff), color-mix(in srgb, var(--danger) 18%, #fff)); color: var(--danger); }
.badge.orange { background: linear-gradient(135deg, color-mix(in srgb, var(--warn) 8%, #fff), color-mix(in srgb, var(--warn) 20%, #fff)); color: var(--warn); }
.badge.green { background: linear-gradient(135deg, color-mix(in srgb, var(--ok) 8%, #fff), color-mix(in srgb, var(--ok) 18%, #fff)); color: var(--ok-ink); }   /* v0.8.9.8(UI-05): 生色 → --ok-ink */
.badge.purple { background: linear-gradient(135deg, #f7f2fe, #eee2fc); color: #6d3fb8; }
.badge.teal { background: linear-gradient(135deg, #e8f7f8, #d8f0f2); color: #087f8c; }
.badge.tag { background: var(--primary-light); color: var(--primary-ink); }   /* v0.8.9.8(UI-05): 生色 → --primary-ink（serif 2.78→≥4.9） */

/* ---- 提醒面板 ---- */
.alert-item {
  display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--r-xs); margin-bottom: 8px;
  font-size: var(--fs-3); line-height: 1.5; cursor: pointer; border: 1px solid transparent;
}
.alert-item:hover { filter: brightness(.97); }
.alert-item.danger { background: var(--danger-bg); color: var(--danger); border-color: #f5c2c8; }
.alert-item.warn { background: var(--warn-bg); color: var(--warn); border-color: #f0e0b0; }
.alert-item.info { background: var(--info-bg); color: var(--primary-dark); border-color: #ccd8f5; }
.alert-item .a-icon { flex-shrink: 0; }
.empty-tip { color: var(--text-sub); text-align: center; padding: 26px 0; font-size: var(--fs-3); }

/* ---- 看板 (v0.3.7: 磨砂玻璃列 + 已拍摄列金色顶条) ---- */
/* v0.8.10: 由固定三列改为自适应 —— 「已取消」列加入后共四列，窄屏自动降列 */
.kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; align-items: start; }
.kanban-col {
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-radius: var(--radius); padding: 12px; min-height: 300px;
  border: 1px solid var(--hair);
}
.kanban-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding: 0 4px; }
.kanban-col-title { font-size: var(--fs-4); font-weight: 700; }
.kanban-col-cnt { background: rgba(255, 255, 255, .9); border-radius: var(--r-s); font-size: var(--fs-2); padding: 1px 8px; color: var(--text-sub); }
.plan-card {
  background: rgba(255, 255, 255, .88); border: 1px solid var(--hair); border-radius: var(--r-xs); padding: 11px 12px;
  margin-bottom: 10px; cursor: pointer; transition: all .12s; box-shadow: 0 1px 2px rgba(20, 30, 60, .05);
  display: flex; flex-direction: column; min-height: 132px;
}
.plan-card:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow); }
.pc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 6px; padding-right: 4px; }
.pc-name { font-weight: 700; font-size: var(--fs-4); line-height: 1.45; }
.pc-meta { font-size: var(--fs-2); color: var(--text-sub); margin-bottom: 7px; line-height: 1.6; }
/* v0.3.5: 看板卡片倒计时 / 外地徽章 */
.badge.cd-today { background: var(--primary-dark); color: #fff; font-weight: 700; }
.badge.cd-soon { background: linear-gradient(135deg, #fef8ee, #fbeed8); color: #8a5a12; border: 1px solid color-mix(in srgb, var(--gold) 30%, #fff); font-weight: 700; }
.badge.cd-far { background: #f0ede4; color: #6b6455; border: 1px solid #d8d2c2; }
.badge.cd-overdue { background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 8%, #fff), color-mix(in srgb, var(--danger) 20%, #fff)); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 28%, #fff); font-weight: 700; }
.badge.away { background: linear-gradient(135deg, color-mix(in srgb, var(--info) 7%, #fff), color-mix(in srgb, var(--info) 16%, #fff)); color: var(--info); border: 1px solid color-mix(in srgb, var(--info) 24%, #fff); }
.pc-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; padding-right: 4px; }
.pc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-right: 4px; }
.pc-tags-empty { font-size: var(--fs-2); color: var(--text-sub); }
.pc-people { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(20,30,60,.08); }
.pc-person { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-2); color: var(--text-sub); background: rgba(var(--prgb),.06); padding: 2px 8px; border-radius: var(--r-full); border: 1px solid var(--hair); box-shadow: var(--sh-1); }   /* v0.8.9.7 */
.pc-person-av { font-size: var(--fs-4); line-height: 1; }
.pc-person-role { color: var(--primary-ink); font-weight: 600; font-size: var(--fs-1); margin-left: 2px; }   /* v0.8.9.8(UI-05): 生色 → --primary-ink */
.pc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: var(--fs-2); color: var(--text-sub); }
/* v0.3.4: 编辑计划菜单 */
.edit-menu { display: flex; flex-direction: column; gap: 10px; }
.edit-menu-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-align: left; border: 1px solid var(--border); }
.edit-menu-item:hover { border-color: var(--primary); background: var(--primary-light); }
.edit-menu-item .em-ic { font-size: calc(var(--fs-8) * 11 / 12); }
.edit-menu-item .em-t { font-size: var(--fs-4); font-weight: 700; }
.edit-menu-item .em-d { font-size: var(--fs-2); color: var(--text-sub); margin-top: 2px; }
/* v0.3.4: 云盘链接弹窗 */
.cl-cost { font-size: var(--fs-6); font-weight: 800; color: var(--primary-dark); }
.cl-link-out { color: var(--primary); word-break: break-all; }
.exp-path code { display: block; margin-top: 6px; background: #f3f5f9; padding: 8px 10px; border-radius: var(--r-xs); font-size: var(--fs-2); word-break: break-all; }
/* v0.3.4: 联网/离线 切换 */
.net-row { display: flex; align-items: center; gap: 6px; }
.net-toggle { padding: 1px 6px; font-size: var(--fs-2); }
/* v0.3.4: 地图选点 / 查看 */
.mp-wrap { display: flex; flex-direction: column; gap: 8px; }
.mappick-bar { display: flex; align-items: center; gap: 10px; }
.mappick-bar input { flex: 1; }
.mp-hint { font-size: var(--fs-2); color: var(--text-sub); white-space: nowrap; }
.mp-map { width: 100%; height: 380px; border-radius: var(--r-s); border: 1px solid var(--border); overflow: hidden; z-index: 0; }
.mp-result { display: flex; flex-direction: column; gap: 6px; }
.mp-coord { font-size: var(--fs-3); font-weight: 700; color: var(--primary-dark); }
.mp-addr-row label { display: block; font-size: var(--fs-2); color: var(--text-sub); margin-bottom: 4px; }
.modal-mask { z-index: var(--z-modal); }
.modal { z-index: 1001; }
.leaflet-container { z-index: 0 !important; }
.lf-map-row { display: flex; align-items: center; gap: 8px; }
.lf-map-row .lf-addr-in { flex: 1; }
.lf-geo-row { display: flex; align-items: center; gap: 8px; }
.lf-geo-row input { flex: 1; }
.wz-loc-row { display: flex; align-items: center; gap: 8px; }
.wz-loc-row #wz-loc { flex: 1; }
/* v0.5.7.2: 消息中心发送内容弹窗 — 居中置顶, 高于消息面板(9999) */
.modal-mask.msg-picker-mask {
  z-index: 100000;
  align-items: center;
  justify-content: center;
}

/* v0.3.5: 模特视图 (简化版页面, 默认隐藏摄影参数) */
.mv-head { position: relative; padding-right: 130px; margin-bottom: 10px; }
.mv-plan-name { font-size: var(--fs-6); font-weight: 800; color: var(--text); line-height: 1.4; }
.mv-meta { font-size: var(--fs-3); color: var(--text-sub); margin-top: 4px; line-height: 1.7; }
#mv-tech-toggle { position: absolute; right: 0; top: 2px; white-space: nowrap; }
.mv-notes { background: var(--gold-light); border: 1px solid #eddcae; border-left: 4px solid var(--gold); border-radius: var(--r-xs); padding: 12px 14px; margin-bottom: 14px; font-size: var(--fs-4); line-height: 1.8; color: #6b5a20; }
.mv-notes-title { font-weight: 800; color: var(--gold-deep); margin-bottom: 6px; }
.mv-section { font-weight: 800; font-size: var(--fs-4); margin: 14px 0 10px; color: var(--text); }
.mv-card { display: flex; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-s); padding: 12px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(30,40,70,.05); }
.mv-img { flex: 0 0 200px; align-self: flex-start; }
.mv-img img { width: 200px; max-height: 260px; object-fit: cover; border-radius: var(--r-xs); border: 1px solid var(--border); display: block; }
.mv-txt { flex: 1; min-width: 0; }
.mv-title { font-weight: 800; font-size: var(--fs-4); margin-bottom: 8px; }
.mv-row { font-size: var(--fs-4); line-height: 1.75; margin-bottom: 4px; }
.mv-label { color: var(--primary); font-weight: 700; margin-right: 2px; }
.mv-tech { display: none; margin-top: 8px; background: #f3f5f9; border-radius: var(--r-xs); padding: 8px 10px; }
.mv-tech.show { display: block; }
.mv-tech-t { font-size: var(--fs-2); font-weight: 800; color: var(--text-sub); margin-bottom: 4px; }
.mv-tech-items { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.mv-tech-item { font-size: var(--fs-3); color: var(--text-sub); }
.mv-tech-item b { color: var(--text); font-weight: 700; }
.mv-foot { margin-top: 12px; font-size: var(--fs-2); color: var(--text-sub); text-align: center; }

/* ---- 表格 ---- */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-3); }
.tbl th {
  text-align: left; padding: 9px 10px; background: #f3f5f9; color: var(--text-sub);
  font-size: var(--fs-3); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.tbl td { padding: 9px 10px; border-bottom: 1px solid #eceff5; vertical-align: middle; }
.tbl tr:hover td { background: #f4f6fa; }
.tbl .ops { white-space: nowrap; }

/* ---- 工具条 ---- */
.toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.toolbar input, .toolbar select { width: auto; }
.toolbar .grow { flex: 1; }
.toolbar input.grow { min-width: 180px; }

/* ---- 模态框 (v0.3.7: 磨砂玻璃弹窗 / v0.5.2: 开关动画) ---- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(15,22,35,.38);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: maskIn var(--dur-base) var(--ease-out);
}
.modal-mask.closing { animation: maskOut .22s ease-in forwards; }
/* v0.8.9(P2-5): 旧 maskFadeIn/maskFadeOut 已删除（与 maskIn/maskOut 完全同构的重复动效，避免同名动画两份定义）。
   maskIn/maskOut 定义见文件末 v0.8.9 层。 */
.modal {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--hair);
  border-radius: var(--r-m); width: 640px; max-width: 96vw; max-height: 92vh;
  display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(20, 28, 45, .28);
  animation: modalIn var(--dur-modal) var(--ease-spring);
  will-change: transform, opacity;
}
.modal-mask.closing .modal { animation: modalOut .2s ease-in forwards; }
/* v0.8.9(P2-5): 旧的 modalIn / modalOut 定义已删除 —— 统一由文件末 v0.8.9 层的
   弹簧 + blur 版生效（同名 keyframes 只保留后者，避免死代码与「哪份生效」歧义）。 */
/* 保留旧名兼容外部引用 */
@keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* v0.5.2: 通用悬浮提示入场 (弹性小幅过冲) */
@keyframes popIn {
  from { transform: scale(.94) translateY(4px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.modal-head { padding: 12px 18px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-title { font-size: var(--fs-5); font-weight: 700; }
.modal-close { border: none; background: none; font-size: var(--fs-6); cursor: pointer; color: var(--text-sub); line-height: 1; transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.modal-close:hover { color: var(--danger); transform: scale(1.1); }
.modal-body { padding: 16px 18px; overflow-y: auto; flex: 1; }
.modal-foot { padding: 13px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }

/* ---- 表单杂项 (v0.5.2: chip 弹性切换 + 按压反馈) ---- */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  border: 1px solid var(--border); border-radius: var(--r-l); padding: 5px 12px; font-size: var(--fs-3);
  cursor: pointer; user-select: none; background: #fff;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out);
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip:active { transform: scale(.94); }
.chip.on {
  background: var(--grad-primary); background-origin: border-box; border-color: transparent; color: var(--on-grad);
  animation: chipOn var(--dur-base) var(--ease-spring);
  box-shadow: 0 2px 8px rgba(var(--prgb),.28);
}
@keyframes chipOn {
  from { transform: scale(.88); }
  to { transform: scale(1); }
}
/* v0.5.5: 协作人 chip — 角色可直接下拉修改 */
.chip-member { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 12px; cursor: default; }
.chip-member .cm-name { font-weight: 600; white-space: nowrap; }
.chip-member .cm-role { font-size: var(--fs-2); border: 1px solid var(--border); border-radius: var(--r-s); padding: 2px 6px; background: var(--bg); color: var(--text-sub); cursor: pointer; outline: none; }
.chip-member .cm-role:hover { border-color: var(--primary); color: var(--primary); }
.chip-member .cm-role:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--prgb),.15); }
.chip-member .x { cursor: pointer; color: var(--text-sub); font-size: var(--fs-3); padding: 0 2px; }
.chip-member .x:hover { color: var(--danger); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.hint { font-size: var(--fs-2); color: var(--text-sub); line-height: 1.6; }
.divider { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.section-title { font-size: var(--fs-3); font-weight: 700; margin: 2px 0 8px; display: flex; justify-content: space-between; align-items: center; }

/* ---- v0.5.1: 胶囊可见性开关 ---- */
.capsule-toggle {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none; font-size: var(--fs-3); padding: 4px 0;
}
.capsule-track {
  width: 56px; height: 26px; border-radius: var(--r-full); background: #ccc;
  position: relative; transition: background .25s; flex-shrink: 0;
}
.capsule-toggle.on .capsule-track { background: var(--primary); }
.capsule-ball {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; transition: left .25s;
  box-shadow: 0 1px 3px rgba(16, 24, 40,.2);
}
.capsule-toggle.on .capsule-ball { left: 33px; }
.capsule-label-left { color: var(--text-sub); }
.capsule-label-right { color: var(--text-sub); }
.capsule-toggle.on .capsule-label-left { opacity: .4; }
.capsule-toggle:not(.on) .capsule-label-right { opacity: .4; }

/* ---- 经费 ---- */
.budget-table { width: 100%; border-collapse: collapse; font-size: var(--fs-3); margin-bottom: 10px; }
.budget-table th { background: #f3f5f9; padding: 7px 8px; font-size: var(--fs-2); color: var(--text-sub); text-align: left; border-bottom: 1px solid var(--border); }
.budget-table td { padding: 5px 8px; border-bottom: 1px solid #eceff5; }
.budget-table input, .budget-table select { padding: 5px 8px; font-size: var(--fs-3); }
.budget-total { text-align: right; font-size: var(--fs-4); font-weight: 700; color: var(--primary); }

/* ---- 分镜(闪电分镜风格) (v0.5.2: 升级过渡曲线) ---- */
.shot-card {
  border: 1px solid var(--border); border-radius: var(--r-s); padding: 12px 14px; margin-bottom: 12px; background: #fff;
  position: relative;
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
  animation: rowIn var(--dur-base) var(--ease-out) backwards;
}
.shot-card:hover { border-color: #d4d9e3; }
.shot-no {
  position: absolute; left: -1px; top: -1px; background: var(--primary-dark); color: #fff;
  font-size: var(--fs-2); font-weight: 800; border-radius: var(--r-s) 0 var(--r-s) 0; padding: 3px 10px; z-index: var(--z-base);
}
.shot-type-switch { position: absolute; right: 10px; top: 8px; display: flex; gap: 5px; }
.shot-head { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; padding-left: 34px; }
.shot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; }
.shot-grid .span3 { grid-column: span 3; }
.shot-grid .span2 { grid-column: span 2; }
/* v0.3.6: 分镜卡折叠 — 已保存的默认收起，只留标题行 */
.shot-card.folded .shot-body { display: none; }
.shot-card.folded .shot-head { margin-bottom: 0; }
.shot-card.folded { background: #f7f9fc; }
.shot-card.folded:hover { background: #fff; }

/* ---- 器材推荐 ---- */
.rec-plan-block { margin-bottom: 18px; }
.rec-groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.rec-group { background: #f4f6fa; border: 1px solid var(--border); border-radius: var(--r-xs); padding: 10px 12px; }
.rec-group-title { font-size: var(--fs-3); font-weight: 700; color: var(--text-sub); margin-bottom: 7px; }
.rec-item { font-size: var(--fs-3); padding: 4px 0; border-bottom: 1px dashed #e2e6ee; line-height: 1.4; }
.rec-item:last-child { border-bottom: none; }
.rec-item .ri-why { color: var(--text-sub); font-size: var(--fs-2); }
.checklist { margin-top: 10px; background: var(--ok-bg); border-radius: var(--r-xs); padding: 10px 14px; }
.checklist li { font-size: var(--fs-3); color: #1e5c2c; margin: 4px 0 4px 18px; }

/* ---- Toast (v0.3.7: 深色磨砂胶囊 / v0.5.2: 弹性入场 + 渐退出场) ---- */
/* v0.8.9.8(UI-01): z-index 2000 → 9999 —— 点锁定主题的反馈 toast 原被 .theme-sheet-mask(9998) 盖住，
   用户零可见反馈；提到遮罩之上、.ach-tip(99999) 之下。 */
.toast-container { position: fixed; top: 18px; right: 18px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: rgba(29, 37, 48, .88); color: #fff; border-radius: var(--r-l); padding: 11px 16px; font-size: var(--fs-4);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--hair);
  box-shadow: var(--hi), var(--sh-3);
  animation: toastIn var(--dur-base) var(--ease-spring);
  max-width: 360px;
  will-change: transform, opacity;
}
.toast.ok { background: rgba(31, 122, 56, .90); } .toast.err { background: rgba(209, 52, 56, .92); }
.toast.warn { background: rgba(var(--grgb), .92); }
.toast.closing { animation: toastOut var(--dur-base) var(--ease-in-out) forwards; }
/* v0.8.9(P2-5): 旧 toastIn 定义已删除 —— 弹簧版定义见文件末 v0.8.9 层。 */
@keyframes toastOut {
  from { transform: translateX(0) scale(1); opacity: 1; }
  to { transform: translateX(24px) scale(.96); opacity: 0; }
}
/* v0.8.9(P2-5): 死代码 slidein 关键帧已删除（全站 0 引用；勿再命名同名 keyframes） */

/* ---- v0.3.5: 排单时间检测提示条 (向导日期字段下方) ---- */
.day-check-tip { display: none; }
.day-check-tip.info, .day-check-tip.warn { display: block; margin-top: 8px; border-radius: var(--r-xs); padding: 9px 12px; font-size: var(--fs-3); line-height: 1.8; }
.day-check-tip.info { background: var(--info-bg); border: 1px solid #c4d8f8; color: #2a508c; }
.day-check-tip.warn { background: #fdf3e3; border: 1px solid #edcf9a; color: #8a5a12; }
.day-check-tip .dc-title { font-weight: 700; margin-bottom: 2px; }
.day-check-tip .dc-row { }

/* ---- 设置 ---- */
.settings-block { margin-bottom: 18px; }
.settings-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #eceff5; }
.settings-item .si-desc { font-size: var(--fs-3); color: var(--text-sub); margin-top: 3px; }
/* v0.4.3: 软件更新弹窗步骤 */
.up-step { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px dashed #e2e6ee; font-size: var(--fs-3); }
.up-step:last-of-type { border-bottom: none; }
/* v0.8.1: 弹窗统一四档 — S=440 / M=640(默认, 含旧 size:'mid') / L=880 / XL=1100; lib 特例并入 L 档 */
.modal.small { width: 440px; }
.modal.mid { width: 640px; }   /* v0.8.1: 旧调用点大量 size:'mid' 但此前无规则裸奔落默认，现显式归档 */

/* 状态流 */
.flow-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0 14px; }
.flow-step { font-size: var(--fs-2); padding: 4px 10px; border-radius: var(--r-m); background: #eceff5; color: var(--text-sub); }
.flow-step.cur { background: var(--primary-dark); color: #fff; font-weight: 700; }
.flow-step.done { background: var(--ok-bg); color: var(--ok); }
.flow-arrow { color: var(--text-sub); font-size: var(--fs-2); }

@media (max-width: 1100px) {
  .stats-row { grid-template-columns: repeat(3, 1fr); }
  .home-grid { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: 1fr; }
  .rec-groups { grid-template-columns: 1fr 1fr; }
}

/* ===== v2.1 分镜编辑器 ===== */
.st-check { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.st-check label { display: flex; align-items: center; gap: 4px; font-size: var(--fs-3); font-weight: 600; color: var(--text); cursor: pointer; margin: 0; white-space: nowrap; }
.st-check input { width: auto; }
.dist-row { display: flex; gap: 8px; }
.dist-row input { flex: 1; min-width: 0; }
.dist-row select { width: 76px; flex-shrink: 0; }
.field.req > label::after { content: ' *'; color: var(--danger); font-weight: 700; }
.shot-tags-bar { display: flex; flex-wrap: wrap; gap: 5px; margin: 26px 0 8px 4px; }
.shot-tags-bar:empty { display: none; }

.light-block { border: 1px dashed var(--border); border-radius: var(--r-xs); padding: 12px; background: #f7f9fc; }
.light-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.light-head > label { margin: 0; font-weight: 700; color: var(--text-sub); font-size: var(--fs-3); }
.light-head select { width: auto; }
.light-row { display: grid; grid-template-columns: 1.1fr 0.9fr 1.6fr 1.6fr 34px; gap: 8px; align-items: end; padding: 9px; border: 1px solid var(--border); border-radius: var(--r-xs); margin-bottom: 8px; background: #fff; }
.light-row .btn { margin-bottom: 1px; }
.light-row label { font-size: var(--fs-2); margin-bottom: 3px; }

.ref-block { border: 1px dashed var(--border); border-radius: var(--r-xs); padding: 12px; background: #f7f9fc; }
.ref-block > label { font-weight: 700; color: var(--text-sub); font-size: var(--fs-3); margin-bottom: 8px; }
.ref-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ref-thumbs:empty { margin-bottom: 0; }
.ref-thumb { position: relative; width: 66px; height: 66px; border: 1px solid var(--border); border-radius: var(--r-xs); overflow: hidden; background: #fff; }
.ref-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.ref-thumb .rt-del { position: absolute; top: 1px; right: 1px; background: rgba(35,47,78,.75); color: #fff; border: none; border-radius: var(--r-xs); font-size: var(--fs-1); width: 17px; height: 17px; line-height: 15px; cursor: pointer; padding: 0; }
.ref-thumb .rt-name { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(35,47,78,.72); color: #fff; font-size: var(--fs-1); padding: 1px 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v0.8.8.2(老板 2026-10-02): .ref-ops（占位框内两个常驻蓝色按钮）已删除 ——
   老板投诉的"背景阴影"就是它们。新交互改为点占位框中部弹窗，见 .ref-arrow / .ref-idx。 */

.result-block { border: 1px dashed var(--border); border-radius: var(--r-xs); padding: 12px; background: #f7f9fc; }
.result-block > label { font-weight: 700; color: var(--text-sub); font-size: var(--fs-3); margin-bottom: 8px; }
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 12px; }
.result-grid .field { margin-bottom: 0; }

#img-hover-preview { position: fixed; z-index: 3000; display: none; background: #fff; border: 1px solid var(--border); border-radius: var(--r-xs); box-shadow: 0 12px 40px rgba(10,20,50,.3); padding: 5px; pointer-events: none; }
#img-hover-preview img { max-width: 420px; max-height: 420px; display: block; border-radius: var(--r-xs); }

/* ===== v2.1 详情页分镜表格 ===== */
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-xs); background: #fff; }
.shot-table th { white-space: nowrap; }
.shot-table td { font-size: var(--fs-3); vertical-align: top; }
.shot-table .cell-title { font-weight: 600; white-space: nowrap; }
.ref-pager { display: flex; align-items: center; gap: 5px; }
.rp-btn { border: 1px solid var(--border); background: #fff; border-radius: var(--r-xs); width: 22px; height: 22px; cursor: pointer; font-size: var(--fs-3); line-height: 1; color: var(--text-sub); padding: 0; }
.rp-btn:hover { border-color: var(--primary); color: var(--primary); }
.rp-img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-xs); border: 1px solid var(--border); cursor: zoom-in; }
.rp-cnt { font-size: var(--fs-1); color: var(--text-sub); white-space: nowrap; }
.s-tag-chips .chip { padding: 3px 10px; font-size: var(--fs-2); }

/* ===== v2.2 时间滚轮选择器 (v0.3.5 样式统一迁移至下方 v0.3.3 区块, 此处仅保留非滚轮规则) ===== */
.st-check label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; font-weight: 600; }
.st-check input[type="radio"], .st-check input[type="checkbox"] { width: auto; }
.db-autosave-tip { font-size: var(--fs-2); color: var(--text-sub); }
.db-autosave-tip.saved { color: var(--ok); }

/* ===== v3.0 登录遮罩 (v0.3.7: macOS 蓝金 + 磨砂玻璃登录卡) ===== */
.login-mask { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1000px 560px at 80% -6%, rgba(var(--prgb), .10), transparent 60%),
    radial-gradient(820px 480px at 12% 108%, rgba(var(--grgb), .10), transparent 58%),
    linear-gradient(180deg, #f7f8fa, #eef1f5);
  background-color: #f5f6f8; }
.login-box { background: var(--glass-strong);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  border-radius: var(--r-l); padding: 34px 38px 24px; width: 390px; box-shadow: 0 16px 48px rgba(20, 30, 60, .16);
  border: 1px solid var(--hair);
  /* v0.5.2: 登录卡入场动画 */
  animation: loginCardIn var(--dur-modal) var(--ease-spring);
  will-change: transform, opacity;
}
@keyframes loginCardIn {
  from { opacity: 0; transform: scale(.94) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.login-logo { font-size: calc(var(--fs-8) * 11 / 6); text-align: center; color: var(--primary); }
.login-logo svg { width: 52px; height: 52px; }
.login-title { font-size: calc(var(--fs-8) * 11 / 12); font-weight: 800; text-align: center; margin: 8px 0 4px; color: var(--text); }
.login-sub { font-size: var(--fs-3); color: var(--text-sub); text-align: center; margin-bottom: 20px; }
.login-btn { width: 100%; margin-top: 6px; }
.user-chip { cursor: pointer; font-size: var(--fs-2); background: rgba(var(--prgb),.10); color: var(--primary-dark); border-radius: var(--r-xs);
  padding: 4px 8px; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip:hover { background: rgba(var(--prgb),.20); }

/* ===== v3.0 协作动态 ===== */
.collab-msg { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.collab-msg:last-child { border-bottom: none; }
.collab-avatar { width: 36px; height: 36px; border-radius: 50%; background: #dce8ff; color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.collab-who { font-size: var(--fs-3); font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.collab-when { color: var(--text-sub); font-size: var(--fs-1); font-weight: 400; }
.collab-body { font-size: var(--fs-4); margin-top: 3px; line-height: 1.6; white-space: pre-wrap; }
.collab-mats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.collab-mat { width: 130px; text-align: center; }
.collab-mat img { width: 130px; height: 130px; object-fit: cover; border-radius: var(--r-s); border: 1px solid var(--border); }
.collab-mat-empty { width: 130px; height: 130px; background: #f0f3f8; border-radius: var(--r-s); display: flex;
  align-items: center; justify-content: center; color: var(--text-sub); }
.collab-mat-cap { font-size: var(--fs-2); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collab-mat-by { font-size: var(--fs-1); color: var(--primary); }

/* ===== v3.0 素材库瀑布流 + 小红书式弹窗 ===== */
.masonry { columns: 5 216px; column-gap: 14px; }
.mcard { position: relative; break-inside: avoid; margin-bottom: 14px; background: #fff; border-radius: var(--r-m); overflow: hidden;
  cursor: pointer; border: 1px solid var(--border); transition: transform .15s, box-shadow .15s; }
.mcard:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(20,40,80,.14); }
/* v0.8.9.8（老板：素材库显示图片还是没有加载动画）：
   根因二连 —— ①.mcard img 只有 width:100% 无预留高度，而 .masonry 是 CSS 多列瀑布流，
   每张图加载完就撑开卡片、整列重排（逐行刷新）；②上一版把流光动画删掉后只剩静态底色，看不到"加载中"。
   修法：图片区预留固定高度（object-fit: contain 不裁切，保持素材完整）+ 加载中流光占位。 */
.mcard img {
  width: 100%; display: block;
  /* v0.8.9.8: 由 JS 预加载测量后内联 aspect-ratio（保留原始比例）；此处的 4/3 仅为测量失败时的兜底 */
  aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg-deep);
  transition: opacity .30s var(--ease-out);
}
/* 预加载测量期间的整页骨架 */
.mat-preload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 54px 0; }
.mat-preload-spin {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(var(--prgb), .18); border-top-color: var(--primary);
  animation: matSpin .8s linear infinite;
}
.mat-preload-t { font-size: var(--fs-3); color: var(--text-sub); }
.mat-preload-hint { font-size: var(--fs-1); color: var(--text-light); margin-top: -6px; }
@keyframes matSpin { to { transform: rotate(360deg); } }
/* 加载中：图片区流光占位。v0.8.9.8 修正 —— 图片区高度改由每张图的 aspect-ratio 决定后，
   原先写死的 height:62% 对不上真实高度，流光只盖住卡片一部分。改为给图片单独包一层 .mcard-img，
   流光用 inset:0 精确贴合图片区（不再依赖任何猜出来的百分比/像素）。 */
.mcard-img { position: relative; }
.mcard-img:has(img.is-imgloading)::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(127, 137, 160, .06) 30%, rgba(127, 137, 160, .16) 50%, rgba(127, 137, 160, .06) 70%);
  background-size: 220% 100%;
  animation: matCardShimmer 1.25s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mcard-img:has(img.is-imgloading)::after { animation: none; }
}
@keyframes matCardShimmer {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mcard img { transition: none; }
}
.mcard .mnoimg { height: 96px; display: flex; align-items: center; justify-content: center;
  color: var(--text-sub); background: #f3f5f9; font-size: calc(var(--fs-8) * 13 / 12); }
.mcard .mcap { padding: 8px 10px; }
.mcard .mname { font-size: var(--fs-3); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.mcard .mtags { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }
.mcard .mtags .badge { font-size: var(--fs-1); padding: 0 6px; }
.mview-mask { position: fixed; inset: 0; background: rgba(10,16,28,.82); z-index: 900;
  display: flex; align-items: center; justify-content: center;
  animation: wlMaskIn var(--dur-modal, 320ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)); }
.mview { display: flex; background: var(--glass-strong);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--hair);
  border-radius: var(--r-l); overflow: hidden; max-width: 94vw; max-height: 88vh;
  box-shadow: var(--hi), var(--sh-3);
  animation: wlBoxIn 420ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
  transform-origin: center; will-change: transform, opacity; }
.mview-left { background: #101826; display: flex; align-items: center; justify-content: center; min-width: 42%; position: relative; }
.mview-left img { max-height: 88vh; max-width: 100%; display: block; }
.mview-left .mview-empty { color: #6b7a90; font-size: var(--fs-5); padding: 60px 40px; }
.mview-right { width: 400px; max-width: 46vw; padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.mview-right h3 { font-size: var(--fs-6); color: var(--text); }
.mview-close { position: absolute; top: 10px; right: 12px; background: rgba(0,0,0,.45); color: #fff; border: none;
  border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: var(--fs-4); z-index: 2; }
.mview-row { font-size: var(--fs-3); line-height: 1.7; color: var(--text); }
.mview-row .lbl { color: var(--text-sub); margin-right: 6px; }
.mview-acts { margin-top: auto; display: flex; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }

/* ===== v3.1 新增样式 ===== */

/* ---- 表单密度优化(需求10): 减少滚动, 宽屏 4 列 ---- */
@media (min-width: 1280px) {
  .shot-grid { grid-template-columns: repeat(4, 1fr); gap: 8px 12px; }
  .shot-grid .span3 { grid-column: span 4; }
}
.shot-card .field { margin-bottom: 4px; }
.shot-card .field label { margin-bottom: 3px; font-size: var(--fs-2); }
.form-grid .field { margin-bottom: 6px; }
/* v0.8.9.35: `.span2` 原先只对 .shot-grid / .wl-form-grid 生效 → 通用表单里写了 span2 也不跨列
   （新增器材的「器材选择/标签/备注/可见性」都受影响）。补上通用规则。 */
.form-grid .field.span2, .form-grid > .span2 { grid-column: 1 / -1; }
.modal.wide { width: min(1100px, 94vw); }
.modal { max-height: 92vh; }
.modal .modal-body { overflow-y: auto; }

/* ---- v3.1 选择器弹窗(地点/素材) ---- */
.pick-list { max-height: 56vh; overflow-y: auto; }
.pick-row {
  display: flex; gap: 10px; align-items: center; border: 1px solid var(--border);
  border-radius: var(--r-xs); padding: 9px 12px; margin-bottom: 8px; cursor: pointer; background: #fff;
}
.pick-row:hover { border-color: var(--primary); background: var(--primary-light); }
.pick-row.pick-selected { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 0 0 2px rgba(var(--prgb),.15); }
.pick-main { flex: 1; min-width: 0; }
.pick-title { font-weight: 700; font-size: var(--fs-4); }
.pick-sub { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.pick-note { margin-top: 4px; font-size: var(--fs-2); color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-check { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.pick-masonry { columns: 4 170px; column-gap: 12px; }
.pick-masonry .pick-mat { cursor: pointer; }
.pick-masonry .pick-mat.pick-selected { outline: 3px solid var(--primary); outline-offset: -3px; border-radius: var(--r-m); }

/* ---- v3.1 登录选计划 ---- */
.login-plan-list { max-height: 150px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-xs); padding: 8px 12px; background: #fff; }
.login-plan-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: var(--fs-4); cursor: pointer; }
.login-plan-item input { width: auto; }

/* ---- v3.1 设置页用户信息卡 ---- */
.user-info-grid { display: flex; gap: 18px; align-items: flex-start; }
.user-avatar-box { text-align: center; flex-shrink: 0; }
.user-avatar-big {
  width: 74px; height: 74px; border-radius: 50%; background: var(--primary-light);
  display: flex; align-items: center; justify-content: center; font-size: calc(var(--fs-8) * 3 / 2); margin: 0 auto 8px;
}
.avatar-choices { display: flex; flex-wrap: wrap; gap: 4px; max-width: 120px; justify-content: center; }
.avatar-opt { width: 28px; height: 28px; border-radius: var(--r-xs); display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: var(--fs-5); border: 1px solid transparent; }
.avatar-opt:hover { background: var(--primary-light); }
.avatar-opt.on { border-color: var(--primary); background: var(--primary-light); }

/* ---- v3.1 器材批量编辑表格 ---- */
.gear-batch-tbl input, .gear-batch-tbl select { padding: 4px 6px; font-size: var(--fs-3); }
.gear-batch-tbl td { padding: 4px 4px; }
.gear-batch-tbl .gb-check { width: 15px; height: 15px; }

/* ---- v3.1 权限相关 ---- */
.perm-req-table td { font-size: var(--fs-3); }

/* ===== v3.1 器材推荐 · 配套建议 ===== */
.rec-support{margin-top:10px;padding:10px 12px;border:1px dashed var(--border,#d0d5dd);border-radius:var(--r-s);background:var(--bg-soft,#f6f7fb)}
.rec-item-plain{padding:4px 0}

/* ================= v0.3.2 ================= */
/* ---- 侧栏缩略模式 ---- */
/* ---- 侧栏缩略模式 ---- */
.app-shell.nav-folded .sidebar { width: 62px; }
.app-shell.nav-folded .sidebar-header { padding: 14px 8px; justify-content: center; }
.app-shell.nav-folded .sidebar-title { display: none; }
.app-shell.nav-folded .nav-item { justify-content: center; padding: 11px 8px; }
.app-shell.nav-folded .nav-label {
  position: absolute; left: 66px; top: 50%; transform: translateY(-50%);
  background: #1d2530; color: #fff; padding: 4px 10px; border-radius: var(--r-xs);
  white-space: nowrap; font-size: var(--fs-3); display: none; z-index: 60;
  box-shadow: 0 4px 14px rgba(16, 24, 40,.35); pointer-events: none;
}
.app-shell.nav-folded .nav-item { position: relative; }
.app-shell.nav-folded .nav-item:hover .nav-label { display: block; }
.app-shell.nav-folded .sidebar-footer { padding: 10px 6px 6px; text-align: center; font-size: var(--fs-1); }
.app-shell.nav-folded .sidebar-footer > .side-user-card { margin-bottom: 12px; }
/* v0.5.0: 折叠侧栏禁止横向滚动条，底部按钮纵向紧凑排列 */
.app-shell.nav-folded .sidebar-nav,
.app-shell.nav-folded .sidebar-footer { overflow-x: hidden; }
.app-shell.nav-folded .side-btn-row { flex-direction: column; gap: 6px; align-items: center; }
.app-shell.nav-folded .side-ibtn { width: 30px; height: 30px; }
.app-shell.nav-folded #ver-tag { display: none; }
/* v0.3.13: 折叠态不再隐藏版本号; user-chip 按钮随折叠隐藏 (见 v0.3.13 段) */

/* ---- 权限管理 ---- */
.perm-role-chips .chip { padding: 3px 10px; font-size: var(--fs-2); }
.perm-role-chips .chip-full { font-weight: 700; }
.perm-user-tbl td, .perm-member-tbl td { vertical-align: middle; }
.perm-scope-card { border-left: 3px solid var(--primary); }
#login-role .chip { padding: 5px 14px; font-size: var(--fs-3); }

/* ---- 分享弹窗手机预览 ---- */
.phone-preview { display: flex; gap: 18px; align-items: flex-start; margin-top: 12px; }
.phone-frame {
  width: 300px; flex-shrink: 0; border-radius: var(--r-l); padding: 10px;
  background: linear-gradient(160deg, #2b3550, #161d33);
  box-shadow: 0 10px 30px rgba(10,20,50,.3);
}
.phone-notch {
  width: 90px; height: 16px; border-radius: var(--r-s); background: #10162a;
  margin: 0 auto 6px;
}
.phone-screen {
  width: 100%; height: 520px; border: none; border-radius: var(--r-l); background: #fff;
  display: block;
}
.phone-preview .pp-side { flex: 1; min-width: 0; }

/* ---- 手机端响应式 (≤768px) ---- */
@media (max-width: 768px) {
  .app-shell .sidebar { width: 62px; }
  .app-shell .sidebar-title, .app-shell .nav-label { display: none; }
  .app-shell .sidebar-header { justify-content: center; padding: 14px 8px; }
  .app-shell .nav-item { justify-content: center; padding: 11px 8px; }
  .app-shell #nav-fold { display: none; }
  .app-shell .sidebar-footer { padding: 10px 6px; font-size: var(--fs-1); text-align: center; }
  .main-area { padding: 10px !important; }
  .row { flex-direction: column; }
  .form-grid { grid-template-columns: 1fr !important; }
  .modal-mask { padding: 0; align-items: stretch; }
  .modal { width: 100% !important; max-width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; }
  .phone-preview { flex-direction: column; align-items: center; }
  .phone-frame { width: 280px; }
  .table { display: block; overflow-x: auto; white-space: nowrap; }
  .toolbar { flex-wrap: wrap; gap: 6px; }
  .shot-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════ v0.3.3 改版样式 ══════════════════ */

/* ---- 时间滚轮 v0.3.5: 字样入框 + 每格输入框右侧加大上下按钮, 支持长按连调 ---- */
.tspin-group { display: inline-flex; gap: 6px; align-items: center; }
.tspin { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--r-xs); overflow: hidden; background: #fff; height: 34px; }
.tspin .ts-label { font-size: var(--fs-2); color: var(--text-sub); padding: 0 4px 0 9px; background: #fff; white-space: nowrap; display: inline-flex; align-items: center; }
.tspin .ts-input { width: 36px; text-align: center; font-weight: 700; font-size: var(--fs-4); padding: 0 2px; border: none; border-radius: 0; box-shadow: none; }
.tspin .ts-input:focus { outline: none; background: #eaf1fe; }
.tspin .ts-btns { display: inline-flex; flex-direction: column; border-left: 1px solid var(--border); flex-shrink: 0; }
.tspin .ts-btn { border: none; background: #edf0f6; color: var(--text-sub); font-size: var(--fs-1); line-height: 1; width: 26px; height: 17px;
  padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; user-select: none; }
.tspin .ts-btn:first-child { border-bottom: 1px solid var(--border); }
.tspin .ts-btn:hover { background: #dcebfe; color: var(--primary); }
.tspin .ts-btn:active { background: var(--primary); color: #fff; }

/* ---- 金额滚轮 v0.3.5: ¥前缀 + 输入框 + 右侧上下按钮(与时间滚轮同风格), 点按+长按连调 ---- */
.money-spin { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--r-xs); overflow: hidden; background: #fff; height: 30px; width: 100%; min-width: 110px; max-width: 150px; }
.money-spin::before { content: '¥'; font-size: var(--fs-2); font-weight: 700; color: var(--text-sub); display: inline-flex; align-items: center; padding: 0 0 0 8px; background: #fff; }
.money-spin input { flex: 1; min-width: 0; text-align: left; font-weight: 700; font-size: var(--fs-3); padding: 0 2px; border: none; border-radius: 0; box-shadow: none; }
.money-spin input:focus { outline: none; background: #eaf1fe; }
.money-spin .ms-btns { display: inline-flex; flex-direction: column; border-left: 1px solid var(--border); flex-shrink: 0; }
.money-spin .ms-btn { border: none; background: #edf0f6; color: var(--text-sub); font-size: var(--fs-1); line-height: 1; width: 22px; height: 14.5px;
  padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; user-select: none; }
.money-spin .ms-btn:first-child { border-bottom: 1px solid var(--border); }
.money-spin .ms-btn:hover { background: #dcebfe; color: var(--primary); }
.money-spin .ms-btn:active { background: var(--primary); color: #fff; }
.money-spin input::-webkit-outer-spin-button, .money-spin input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ---- 计划卡右上角长方形圆角状态角标 ---- */
.plan-card { position: relative; }
/* v0.8.10: 已取消的计划肉眼可辨（置灰 + 虚线边框），右侧给「恢复计划」 */
.plan-card.is-cancelled { opacity: .72; border-style: dashed; box-shadow: none; }
.plan-card.is-cancelled:hover { transform: none; border-color: var(--border); }
.plan-card .pc-restore { margin-top: 10px; text-align: right; }
/* v0.8.9.8(UI-04): 原「白字压 62% 状态色浅端渐变」11px 小字四色全不达 4.5（teal 最高仅 3.33），
   且 serif 哑色（--ok #6d8b74 等）白字全梯度无解 → 改「深字压浅底」，与 .badge/--*-ink 口径一致。 */
.pc-corner { position: absolute; top: 0; right: 0; font-size: var(--fs-1); padding: 3px 10px 3px 12px; border-radius: 0 var(--r-xs) 0 var(--r-s); color: #fff; font-weight: 600; letter-spacing: .5px; box-shadow: var(--sh-1); }   /* v0.8.9.7: 补柔和投影，贴合新材质语言 */
.pc-corner.blue { background: linear-gradient(135deg, color-mix(in srgb, var(--info) 16%, #fff), color-mix(in srgb, var(--info) 28%, #fff)); color: var(--info-ink); }
.pc-corner.green { background: linear-gradient(135deg, color-mix(in srgb, var(--ok) 16%, #fff), color-mix(in srgb, var(--ok) 28%, #fff)); color: var(--ok-ink); }
/* v0.8.9.7（老板：等待拍摄的角标与胶囊颜色不同）：原角标用 --gold-deep、胶囊用 --warn，两个 token。
   现统一到 --warn，并做成同语义色渐变。 */
.pc-corner.orange, .pc-corner.warn { background: linear-gradient(135deg, color-mix(in srgb, var(--warn) 16%, #fff), color-mix(in srgb, var(--warn) 28%, #fff)); color: var(--warn-ink); }
.pc-corner.red, .pc-corner.danger { background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 16%, #fff), color-mix(in srgb, var(--danger) 28%, #fff)); color: var(--danger-ink); }
.pc-corner.gray { background: linear-gradient(135deg, #6b7280, #475569); }   /* 中性灰：同色系渐变，保持中性语义（白字 4.88:1 达标，不动） */
.pc-corner.teal { background: linear-gradient(135deg, #d9f0ee, #c2e6e3); color: #0b5d57; }   /* 青色语义保持；深字压浅底 5.7:1 */

/* ---- 首页: 整体不滚动, 栏内滚动, 各栏随窗口缩放 ---- */
.home-noscroll { display: flex; flex-direction: column; gap: 12px; min-height: 0; height: 100%; min-width: 1020px; }
#content { min-height: 0; }
.scroll-y { overflow-y: auto; min-height: 0; }
.scroll-y::-webkit-scrollbar { width: 6px; }
.scroll-y::-webkit-scrollbar-thumb { background: #ccd5e3; border-radius: 4px; }

/* v0.4.2: 第二行 焦点栏 + 近期计划 双栏
   v0.4.3.1+3: 恢复为无背景容器, 与青灰素银保持一致; 近期计划卡本身改为透明行, 避免三张玻璃卡拼成白色大框 */
.home-focus-row {
  display: grid;
  grid-template-columns: 2.5fr 1fr;
  gap: 14px;
  align-items: stretch;
  height: 150px;
  min-height: 0;
  flex-shrink: 0;
}
.home-hero-side { min-width: 0; display: flex; flex-direction: column; }
.home-hero-side .hero-card { flex: 1; }
.home-recent-side { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
/* v0.4.3.1+6: 去掉 overflow-y:auto — 滚动裁剪容器会截断子元素 backdrop-filter 的
   模糊基准(backdrop 只剩容器内空白), 磨砂渲染成死灰块, 与页面背景色彩断层。
   3 张卡 flex:1 固定填满 150px, 不需要滚动; 小屏媒体查询内同样不滚 */
.home-recent-box { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
/* v0.4.3.1+5: 近期计划 3 卡片与 hero-card/天气卡完全同款材质
   (var(--glass) 渐变玻璃 + var(--blur) 磨砂 + 同边框同阴影), 颜色全站一致; hover 走 --glass-strong */
.home-recent-box .mini-plan {
  display: grid;
  grid-template-columns: 72px 110px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 14px;
  border-radius: var(--radius, var(--r-m));
  cursor: pointer;
  font-size: var(--fs-3);
  background: var(--glass, rgba(255,255,255,.72));
  -webkit-backdrop-filter: var(--blur, blur(22px)); backdrop-filter: var(--blur, blur(22px));
  border: 1px solid var(--hair); /* v0.8.9.48: 原多一个右括号 → 整条 border 声明无效，边框一直不渲染 */
  box-shadow: var(--shadow);
  white-space: nowrap;
  margin-bottom: 0;
  flex: 1 1 0;
  min-height: 0;
}
.home-recent-box .mini-plan:hover { background: var(--glass-strong, rgba(255,255,255,.88)); }
.home-recent-box .mini-plan.empty {
  justify-content: center;
  grid-template-columns: 1fr;
  color: var(--text-sub);
}
.home-recent-box .mini-plan.empty:hover { color: var(--primary); }
.home-recent-box .mini-plan .mp-cd { font-size: var(--fs-3); font-weight: 700; color: var(--primary-dark); }
.home-recent-box .mini-plan .mp-model { font-size: var(--fs-3); color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.home-recent-box .mini-plan .mp-theme { font-size: var(--fs-3); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.home-list-empty { padding: 14px; text-align: center; color: var(--text-sub); font-size: var(--fs-3); }
.hero-empty { display: flex; align-items: center; justify-content: center; min-height: 100px; }
.hero-empty-txt { color: var(--text-sub); font-size: var(--fs-4); }

/* ---- 统计一行: 格内横向居中 ---- */
.stats-row { margin-bottom: 0; flex-shrink: 0; }
.stat-card { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 8px; }
.stat-card .stat-label { font-size: var(--fs-3); }
.stat-card .stat-num { font-size: calc(var(--fs-8) * 11 / 12); }

/* ---- 天气 / 时段信息条 (v0.3.4: 三栏式, 手机桌面 widget 风格) ---- */
.weather-strip { display: flex; gap: 10px; align-items: stretch; height: 150px; padding: 0; background: transparent; border: none; box-shadow: none; flex-shrink: 0; box-sizing: border-box; }
.ws-datebar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ws-today { font-size: var(--fs-4); font-weight: 700; }
.ws-link { color: var(--primary); font-size: var(--fs-3); cursor: pointer; }
.ws-link:hover { text-decoration: underline; }
.ws-offline-tip { color: var(--warn); font-size: var(--fs-3); }
/* 天气栏: 两个天气块并排 */
.ws-main { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 10px; }
.wsmb { display: flex; flex-direction: column; gap: 6px; background: linear-gradient(135deg, #f8fbff, #eef4ff); border: 1px solid var(--border); border-radius: var(--r-m); padding: 10px 14px; }
.wsmb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wsmb-city { font-size: var(--fs-4); }
.ws-date { font-size: var(--fs-2); color: var(--text-sub); }
.wsmb-body { display: flex; align-items: center; gap: 12px; }
.wsmb-icon { font-size: calc(var(--fs-8) * 19 / 12); line-height: 1; }
.wsmb-temp { font-size: calc(var(--fs-8) * 19 / 12); font-weight: 800; color: var(--primary-dark); }
.wsmb-text { display: flex; flex-direction: column; gap: 2px; }
.wsmb-wt { font-size: var(--fs-5); font-weight: 700; }
.wsmb-sub { font-size: var(--fs-2); color: var(--text-sub); }
/* 其余信息栏: 黄金/蓝调/日落 横排 */
.ws-extra { display: flex; flex-direction: column; gap: 4px; }
.wsex-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 2px; border-top: 1px dashed #e2e6ee; }
.wsex-row:first-child { border-top: none; }
.wsex-item { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-3); color: var(--text-sub); }
.wsex-item i { font-style: normal; margin: 0 1px; }
.wsex-item b { color: var(--text); font-weight: 600; }
.ws-loading { color: var(--text-sub); font-size: var(--fs-3); padding: 6px 0; }

/* ---- 首页左月历 / 右重要提示 同高双栏, 随窗口伸缩 ---- */
.home-duo { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; align-items: stretch; min-height: 320px; flex: 1.3; flex-shrink: 0; }
.home-cal-side { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.home-cal-side .cal-card { margin-bottom: 0; flex: 1; display: flex; flex-direction: column; }
.home-cal-side .cal-grid { flex: 1; grid-auto-rows: 1fr; min-height: 0; }
.home-cal-side .cal-day { min-height: 48px; }
/* v0.3.6: 右栏 height:0 + min-height:100% — 不参与行高计算(行高由月历决定), 拉伸到与月历等高, 内容超出栏内滚动 */
.home-alert-side { display: flex; flex-direction: column; height: 0; min-height: 100%; overflow: hidden; }
.home-alert-side .scroll-y { flex: 1; min-height: 0; }
.alert-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 8px; border-radius: var(--r-s); font-size: var(--fs-3); line-height: 1.5; border: 1px solid var(--hair); box-shadow: var(--hi), var(--sh-1)}
.alert-item + .alert-item { border-top: 1px dashed #e2e6ee; }
.alert-item.clickable { cursor: pointer; }
.alert-item.clickable:hover { background: var(--primary-light); }
.alert-item .a-icon { flex-shrink: 0; }
.alert-item .a-body { flex: 1; min-width: 0; }
.alert-item .a-name { font-size: var(--fs-4); font-weight: 700; color: var(--text); }
.alert-item .a-text { font-size: var(--fs-3); color: var(--text-sub); margin-top: 1px; }
.alert-item.danger .a-name { color: var(--danger); }
.alert-item.warn .a-name { color: var(--warn); }

/* ---- 近期计划 选项卡条 ---- */
#home-list-card { display: flex; flex-direction: column; min-height: 140px; flex: 1; flex-shrink: 0; }
.card-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; flex-shrink: 0; }
.card-title-row .card-title { margin-bottom: 0; }
.home-list-box { flex: 1; min-height: 0; margin-top: 8px; }
/* v0.4.2: 新建计划 日期+起止时间 */
.wz-datetime-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wz-datetime-row .wz-date-in { width: auto; flex-shrink: 0; }
.wz-time-group { display: inline-flex; align-items: center; gap: 8px; }
.wz-time-group input[type="time"] { width: 110px; }
.wz-time-group span { color: var(--text-sub); font-size: var(--fs-3); }
.mini-plan { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-s); cursor: pointer; font-size: var(--fs-3); border: 1px solid var(--hair); box-shadow: var(--hi), var(--sh-1)}
.mini-plan:hover { background: var(--primary-light); }
.mini-plan .mp-date { color: var(--text-sub); font-size: var(--fs-2); white-space: nowrap; }
.mini-plan .mp-name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-plan .mp-tags { display: flex; gap: 4px; flex-shrink: 0; }
.home-more { text-align: center; color: var(--primary); font-size: var(--fs-3); padding: 8px 0 2px; cursor: pointer; }
.home-more:hover { text-decoration: underline; }

/* v0.3.5: 模特须知 — 模板按钮 + 固定事项 chips */
.mn-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
/* v0.3.6: 模特须知占位符提醒 (X月X日 / XX:XX 未替换时黄条) */
.mn-warn { display: none; margin-top: 6px; background: #fdf3e3; border: 1px solid #edcf9a; color: #8a5a12;
  border-radius: var(--r-xs); padding: 8px 12px; font-size: var(--fs-3); line-height: 1.7; }
.mn-chip { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: var(--r-m); font-size: var(--fs-2);
  border: 1px solid var(--border); background: #f7f9fc; color: var(--text-sub); cursor: pointer; user-select: none; }
.mn-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

/* ---- 设备规划页 ---- */
.gp-planbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.gp-planbar-l { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gp-plan-select { width: auto; max-width: 320px; font-weight: 600; }
.gp-gaps { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--warn, #f59e0b); border-radius: var(--r-s); background: #fffaf0; font-size: var(--fs-3); }
.gp-subtitle { font-size: var(--fs-4); font-weight: 700; margin: 12px 0 8px; }
.gp-stats { display: flex; flex-direction: column; gap: 6px; }
.gp-stat { display: flex; align-items: center; gap: 10px; font-size: var(--fs-3); }
.gp-stat-name { width: 260px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }
.gp-stat-bar { flex: 1; height: 8px; background: #eceff5; border-radius: var(--r-xs); overflow: hidden; }
.gp-stat-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), #7ca9ff); border-radius: var(--r-xs); }
.gp-stat-n { color: var(--text-sub); font-size: var(--fs-2); white-space: nowrap; }
.gp-similar { padding: 8px 10px; border-radius: var(--r-xs); background: #f4f6fa; margin-bottom: 6px; font-size: var(--fs-3); display: flex; flex-direction: column; gap: 3px; }
.gp-search-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed #e2e6ee; flex-wrap: wrap; }
.gp-search-row:last-child { border-bottom: none; }
.gp-kw { font-size: var(--fs-3); font-weight: 600; min-width: 240px; }
.gp-links { display: flex; gap: 6px; }

/* ---- 素材联网搜索弹窗 ---- */
.ws-platforms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ws-pf { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 14px 8px; }
.ws-pf b { font-size: var(--fs-5); }
.websearch-frame { height: 66vh; border-radius: var(--r-s); overflow: hidden; border: 1px solid var(--border); background: #fff; }
.websearch-frame iframe { width: 100%; height: 100%; border: none; display: block; }


/* ══════════════════ v0.3.3.1 开发署名 ══════════════════ */
/* v0.8.9.7（老板：登录按钮下方有"不明白色框体"）：原 14px 外边距 + 12px 内边距 + 1px 虚线边框，
   把署名区框成了一块"空白白框"，且文字 opacity .85 偏淡、看不出内容。
   改为：去掉虚线框、收紧留白、文字不透明 → 回到"一行清晰署名"的本意。 */
.login-credits { margin-top: 8px; padding-top: 0; border-top: none;
  font-size: var(--fs-1); color: var(--text-sub); text-align: center; line-height: 1.7; opacity: 1; }

/* ══════════════════ v0.3.4.2 摄影风格改版 ══════════════════ */

/* ---- 1. 问号悬浮提示 (表单括号说明迁移; v0.3.6 图标换 ⓘ) ---- */
.qmark { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px;
  margin-left: 5px; border-radius: 50%; border: 1px solid #a8c4f5; color: var(--primary-dark); background: #eaf1fe;
  font-size: var(--fs-2); font-weight: 400; line-height: 1; cursor: help; vertical-align: middle;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
  user-select: none; flex-shrink: 0; }
.qmark:hover, .qmark:focus { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; outline: none; }
#qtip { position: fixed; z-index: 30000; display: none; max-width: 320px; padding: 8px 12px;
  background: #1d2530; color: #f5f4f1; font-size: var(--fs-3); line-height: 1.65; border-radius: var(--r-xs);
  box-shadow: 0 8px 24px rgba(16, 24, 40,.28); pointer-events: none; }
#qtip.show { display: block; animation: popIn var(--dur-fast) var(--ease-spring); }
#qtip::before { content: ""; position: absolute; left: 18px; top: -4px; width: 8px; height: 8px;
  background: #1d2530; transform: rotate(45deg); }

/* ---- 2. 首页小窗口布局重构: 自然文档流 + 栏内限高滚动 ---- */
/* v0.3.5: 右侧「重要提示」与月历等高 — stretch 拉伸, 提示列表填满卡片, 不再截断留白 */
.home-noscroll { height: auto; min-height: 0; min-width: 0; }
.home-duo { flex: none; min-height: 0; align-items: stretch; }
.home-cal-side .cal-card { flex: none; }
.home-cal-side .cal-grid { flex: none; min-height: 0; }
.home-alert-side { height: 0; min-height: 100%; overflow: hidden; }
.home-alert-side .scroll-y { flex: 1; min-height: 0; max-height: none; }
#home-list-card { flex: none; min-height: 0; }
.home-list-box { flex: none; min-height: 0; max-height: clamp(200px, 34vh, 430px); overflow-y: auto; }
/* 窄窗口: 焦点区与近期计划/月历与提示上下堆叠, 统计自动换行 */
@media (max-width: 1100px) {
  .home-focus-row { grid-template-columns: 1fr; }
  .home-recent-box { max-height: 220px; }
  .home-duo { grid-template-columns: 1fr; }
  .home-alert-side { height: auto; min-height: 0; }
  .home-alert-side .scroll-y { max-height: 200px; }
}
@media (max-width: 760px) {
  .home-noscroll .stats-row { grid-template-columns: repeat(2, 1fr); }
  .ws-main { grid-template-columns: 1fr; }
}

/* ---- 3. 色彩统一 (v0.3.7: 蓝金冷灰调; 看板列背景交由磨砂玻璃规则接管) ---- */
.shot-card:hover { border-color: #d4dbe9; }
.tspin .ts-btn:hover { background: #dcebfe; }
.collab-avatar { background: var(--primary-light); }
.mview-left { background: #18202f; }
.scroll-y::-webkit-scrollbar-thumb { background: #cdd3e0; }
.wsmb { background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(232,241,254,.65)); border-color: var(--hair); }
.gp-stat-bar span { background: linear-gradient(90deg, var(--primary), var(--gold)); }
.wsex-row { border-top: 1px dashed #e2e6ee; }
.gp-search-row { border-bottom: 1px dashed #e2e6ee; }
.kanban-col-cnt { background: rgba(255,255,255,.9); }
.gp-similar { background: rgba(255,255,255,.72); }

/* ---- 4. 重点内容突出 (v0.3.7: 蓝金 accent, 已拍摄列=金) ---- */
.topbar { border-bottom: 1px solid var(--hair); }
.topbar-title { position: relative; padding-left: 11px; }
.topbar-title::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 16px; border-radius: 2px; background: linear-gradient(180deg, var(--primary), var(--gold)); }
.stat-card { transition: border-color .15s, box-shadow .15s; }
.stat-card:hover { border-color: rgba(var(--prgb), .35); box-shadow: 0 4px 16px rgba(20, 30, 60, .10); }
.stat-card .stat-num { color: var(--primary-dark); }
.tabs { border-bottom-color: #e2e6ee; }
.kanban-col { border-top: 3px solid #dfe3ec; }
.kanban-col:nth-child(1) { border-top-color: #98a1b3; }
.kanban-col:nth-child(2) { border-top-color: var(--gold); }
.kanban-col:nth-child(3) { border-top-color: #4a9e5f; }
.kanban-col-title { letter-spacing: .5px; }

/* ---- 5. 卡片 / 按钮 / 输入 细节质感 (v0.5.2: 统一缓动曲线) ---- */
.card { transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.btn { /* 上方 .btn 已升级完整过渡 */ }
.btn-primary { box-shadow: 0 2px 6px rgba(var(--prgb),.25); }
.btn-primary:active { box-shadow: 0 1px 2px rgba(var(--prgb),.2); transform: scale(.95); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(var(--prgb),.12); }
.wz-datetime-row .wz-date-in:focus,
.wz-time-group input[type="time"]:focus { box-shadow: 0 0 0 3px rgba(var(--prgb),.12); }
.mini-plan:hover { background: #eef2f9; }
.alert-item.clickable:hover { background: #eef2f9; }
.home-more { font-weight: 600; }

/* ---- 6. 登录页蓝金光晕 ---- */
.login-mask::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 420px at 50% 118%, rgba(var(--prgb),.08), transparent 60%),
              radial-gradient(600px 300px at 108% 6%, rgba(var(--grgb),.07), transparent 58%); }
.login-box { position: relative; z-index: var(--z-base); }
.login-title { letter-spacing: 1px; }

/* ══════════════════ v0.3.8 无边框窗口 + 通透玻璃改版 ══════════════════ */
/* 定稿参数 (预览 10+ 轮确认): 背景增白去灰+白带加宽柔过渡 / 侧栏白度.90 /
   卡片白玻璃 .38→.18 同向渐变 / 蓝玻璃按钮&选中框 .85 / 次级元素 .30 */

/* ---- 1. 背景增白去灰 (蓝金晕结构不变, 置底亮度抬一档, 中间白带加宽柔过渡) ---- */
body {
  background:
    radial-gradient(1100px 600px at 88% -8%, rgba(var(--prgb), .16), transparent 62%),
    radial-gradient(900px 520px at -6% 104%, rgba(var(--grgb), .12), transparent 60%),
    linear-gradient(160deg,
      #eaf1fa 0%, #eff3f9 16%, #f3f4f1 32%,
      #f5f5f2 42%, #f5f5f3 50%, #f4f4f1 58%,
      #f1f2ef 68%, #edeef3 84%, #e9ecf3 100%);
  background-attachment: fixed;
}
/* v0.8.9: 此处原有第二次 :root 覆写（--glass/--glass-border/--blur/--shadow）已合并进文件顶部基线，
   重复定义全部消除；--glass 升级为方案B 渐变玻璃，--blur 收敛为 saturate(140%) blur(20px)。 */

/* ---- 2. 侧栏: 白度 .90 实玻璃, 右缘发丝线过渡（v0.8.9: 白色描边/白光晕 → --hair + 深色阴影） ---- */
.sidebar {
  background: rgba(255, 255, 255, .90);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-right: 1px solid var(--hair);
  box-shadow:
    0 1px 2px rgba(16, 24, 40, .05),
    8px 0 32px rgba(16, 24, 40, .06);
}
.nav-item.active {
  border: 0; background-origin: border-box; background: var(--grad-primary);
  /* v0.8.9.5（老板：A 类选中项左侧忽然多一条极深的边框线）：原此处有 backdrop-filter: var(--blur)。
     该元素背景是**不透明渐变**，backdrop-filter 完全被自身背景遮住、零视觉作用，
     却会在边缘产生采样伪影 —— 左侧正值渐变最亮端、与侧栏近白底反差最大，遂显现为一条极深边线。
     移除后既无副作用，也消除该伪影（.btn-primary 本就没有此属性，故主按钮一直正常）。 */
  /* v0.8.9.1：去掉 1px 主题色 inset 定边（老板：导航栏选中框有深色边框 → 去除），
     改为纯投影分层，靠渐变底 + 阴影表达"被选中"。 */
  box-shadow: 0 6px 20px rgba(var(--prgb), .30);
  color: var(--on-grad); font-weight: 700;   /* A 组白字；B 组 serif 由更具体规则覆盖为深字 */
}
/* 用户信息: 去外框仅文字 */
.user-chip { background: none; color: var(--primary-dark); padding: 4px 0; }
.user-chip:hover { background: none; color: var(--primary); }

/* ---- 3. 顶栏: 融入背景 (无边框窗口, 拖拽区由 pywebview-drag-region 接管) ---- */
.topbar {
  background: none; border-bottom: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding-right: 198px;   /* v0.4.5.1: 给右上角 4 个窗口控制键让位（含云同步按钮） */
}
.pywebview-drag-region { cursor: default; }

/* ---- 4. 主题渐变按钮（v0.8.9: 纯色 → var(--primary)，禁白边/白内描边/顶白高光；
   v0.8.9.1: 同时禁 1px 主题色 inset 定边 —— 老板实测该定边在浅渐变底上呈"深色边框"；
   审计 P1-4 裁定：浅渐变底 + 深字 #fff 以满足 AA，去掉 text-shadow） ---- */
.btn-primary {
  border: 0; background-origin: border-box; background: var(--grad-primary);
  box-shadow: 0 6px 20px rgba(var(--prgb), .30);
  color: var(--on-grad); font-weight: 600;
}
.btn-primary:hover {
  background: var(--grad-primary-hover); color: var(--on-grad);
  box-shadow: 0 6px 20px rgba(var(--prgb), .30);
}
.btn-primary:active {
  background: var(--grad-primary-active); color: var(--on-grad);
  box-shadow: inset 0 2px 5px rgba(16, 24, 40, .18);
}

/* ---- 5. 次级元素: 白玻璃 .30 (月历格 / 近期计划行 / 天气块 / 看板列) ---- */
.cal-day { background: rgba(255, 255, 255, .30); }
.cal-day:hover { background: rgba(255, 255, 255, .50); }
.mini-plan { background: rgba(255, 255, 255, .30); border: 1px solid var(--hair); box-shadow: var(--hi), var(--sh-1)}
.mini-plan:hover { background: rgba(255, 255, 255, .50); }
.wsmb { background: rgba(255, 255, 255, .30); }
.kanban-col { background: var(--glass); }

/* ---- 6. 登录页背景同步增白 ---- */
.login-mask {
  background:
    radial-gradient(1000px 560px at 80% -6%, rgba(var(--prgb), .16), transparent 60%),
    radial-gradient(820px 480px at 12% 108%, rgba(var(--grgb), .12), transparent 58%),
    linear-gradient(160deg,
      #eaf1fa 0%, #eff3f9 16%, #f3f4f1 32%,
      #f5f5f2 42%, #f5f5f3 50%, #f4f4f1 58%,
      #f1f2ef 68%, #edeef3 84%, #e9ecf3 100%);
}

/* ---- 7. 无边框窗口控制键 + 右下角缩放手柄 ---- */
.win-ctrls { position: fixed; top: 0; right: 0; z-index: 9000; display: flex; height: 40px; }
.win-ctrl {
  min-width: 46px; border: none; background: transparent; color: #5b6472;
  font-size: var(--fs-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; user-select: none;
}
.win-ctrl:hover { background: rgba(29, 37, 48, .08); color: #1d2530; }
.win-ctrl.win-close:hover { background: var(--danger); color: #fff; }
/* v0.4.5.1: 云同步按钮在窗口控制键最左侧 */
.win-ctrl.win-sync { color: var(--primary); font-weight: 700; position: relative; }
.win-ctrl.win-sync:hover { background: rgba(var(--prgb), .10); }
.win-ctrl.win-sync .dot-sync { position: absolute; top: 10px; right: 10px; }
.win-resize-grip {
  position: fixed; right: 0; bottom: 0; width: 18px; height: 18px; z-index: 9000; display: none;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, rgba(29, 37, 48, .22) 50%);
}
.win-resize-grip:hover { background: linear-gradient(135deg, transparent 50%, rgba(var(--prgb), .45) 50%); }
/* Toast 下移, 避开右上角窗口控制键 */
.toast-container { top: 48px; }


/* ══════════════════ v0.3.9 图标统一 / 天气栏重构 / 月历胶囊 / 提示突出 ══════════════════ */

/* ---- 1. 侧栏底部: 用户/联网统一线性图标按钮 (与天气刷新同风格) ---- */
.side-btn-row { display: flex; align-items: center; gap: 8px; }
.side-ibtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 30px; border-radius: var(--r-xs); border: 1px solid transparent;
  background: transparent; color: #6b7688; cursor: pointer; transition: all .12s; padding: 0;
}
.side-ibtn svg { width: 18px; height: 18px; }
.side-ibtn:hover { background: rgba(var(--prgb),.10); color: var(--primary); }
/* v0.4.4: 旧 .net-dot 联网徽标规则已删, 由 .dot-sync 云同步状态点取代 */
.app-shell.nav-folded .side-btn-row { justify-content: center; }

/* ---- 2. 天气栏 v0.3.9: 上排日期+操作按钮 / 下排左时段右天气块, 整体压缩 ---- */
.ws-compact { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; }
.ws-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ws-today { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-4); font-weight: 700; color: var(--text); }
.ws-today svg { width: 17px; height: 17px; color: var(--primary); }
.ws-act-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-xs);
  border: 1px solid var(--hair); background: rgba(255,255,255,.72);
  color: var(--text-sub); font-size: var(--fs-3); font-weight: 600; cursor: pointer; transition: all .12s;
}
.ws-act-btn svg { width: 14px; height: 14px; }
.ws-act-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.ws-act-btn.icon-only { padding: 4px 7px; }
.ws-act-btn:disabled { opacity: .55; cursor: default; }
.ws-act-btn.spinning svg { animation: ws-spin .9s linear infinite; }
@keyframes ws-spin { to { transform: rotate(360deg); } }
.ws-offline-tip { display: inline-flex; align-items: center; gap: 5px; color: var(--warn); font-size: var(--fs-3); }
.ws-offline-tip svg { width: 14px; height: 14px; flex-shrink: 0; }
/* v0.3.12: 旧 .ws-bottom/.ws-times/.ws-blocks 容器规则随两栏切分(.ws-cols)删除 */
.wsmb { padding: 8px 12px; gap: 4px; border-radius: var(--r-s); }
.wsmb-head { gap: 6px; }
.wsmb-city { font-size: var(--fs-3); }
.wsmb-body { gap: 9px; }
.wsmb-icon { font-size: inherit; line-height: 1; display: inline-flex; }
.wsmb-icon svg { width: 27px; height: 27px; color: var(--primary); }
.wsmb-temp { font-size: calc(var(--fs-8) * 25 / 24); font-weight: 800; color: var(--primary-dark); }
.wsmb-wt { font-size: var(--fs-4); }
.ws-loading { display: flex; align-items: center; gap: 8px; color: var(--text-sub); font-size: var(--fs-3); padding: 4px 0; }
.ws-loading svg { width: 17px; height: 17px; color: var(--primary); }
/* v0.5.2: 加载态图标呼吸动画 — 缓解空白突兀感 */
.ws-loading svg { animation: wsBreath 1.6s ease-in-out infinite; transform-origin: center; }
@keyframes wsBreath {
  0%, 100% { transform: scale(1); opacity: .55; }
  50% { transform: scale(1.12); opacity: 1; }
}
.ws-cache-tip { color: var(--text-sub); font-size: var(--fs-2); }

/* v0.5.2: 天气骨架屏 — 加载时占位，避免内容到位后突兀跳出 */
.ws-skeleton {
  display: flex; flex-direction: column; gap: 10px; padding: 4px 0;
  animation: contentFadeIn var(--dur-slow) var(--ease-out);
}
.ws-skeleton .sk-group {
  background: var(--glass, rgba(255,255,255,.72));
  border: 1px solid var(--hair); /* v0.8.9.48: 原多一个右括号 → 整条 border 声明无效，边框一直不渲染 */
  border-radius: var(--radius, var(--r-m));
  padding: 12px 18px; min-height: 92px;
  display: flex; flex-direction: column; gap: 8px;
}
.ws-skeleton .sk-line {
  height: 12px; border-radius: var(--r-xs);
  background: linear-gradient(90deg,
    rgba(180, 190, 205, .22) 0%,
    rgba(180, 190, 205, .42) 50%,
    rgba(180, 190, 205, .22) 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.4s linear infinite;
}
.ws-skeleton .sk-line.w70 { width: 70%; }
.ws-skeleton .sk-line.w50 { width: 50%; }
.ws-skeleton .sk-line.w40 { width: 40%; }
.ws-skeleton .sk-line.w90 { width: 90%; }
.ws-skeleton .sk-row { display: flex; align-items: center; gap: 12px; }
.ws-skeleton .sk-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(90deg,
    rgba(var(--prgb),.10) 0%,
    rgba(var(--prgb),.22) 50%,
    rgba(var(--prgb),.10) 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.4s linear infinite;
}
.ws-skeleton .sk-temp {
  width: 48px; height: 22px; border-radius: var(--r-xs);
  background: linear-gradient(90deg,
    rgba(var(--prgb),.10) 0%,
    rgba(var(--prgb),.22) 50%,
    rgba(var(--prgb),.10) 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.4s linear infinite;
}
@keyframes skShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* v0.5.2: 天气内容到位时柔顺淡入 */
.ws-duo, .ws-group { animation: wsFadeIn var(--dur-slow) var(--ease-out); }
@keyframes wsFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ---- v0.4.3.1: 两主题统一天气双卡 — 蓝金玻璃默认规则 ----
   结构与青灰素银完全一致 (ws-serif 顶行 + ws-duo 双卡 + ws-group 单卡三行);
   材质跟随主题 token: 蓝金=磨砂玻璃(与焦点栏 hero-card 同款), 青灰由 body.theme-plain
   覆盖为纸面平涂。旧 ws-cols/wsmb/wsex 蓝金分支规则保留但已无 DOM 引用。 */
.ws-serif { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.ws-serif .ws-top { padding: 0 2px; }
.ws-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; min-height: 0; }
.ws-duo.single { grid-template-columns: 1fr; }
.ws-group {
  background: var(--glass, rgba(255,255,255,.72));
  backdrop-filter: var(--blur, saturate(170%) blur(22px));
  -webkit-backdrop-filter: var(--blur, saturate(170%) blur(22px));
  border: 1px solid var(--hair); /* v0.8.9.48: 原多一个右括号 → 整条 border 声明无效，边框一直不渲染 */
  border-radius: var(--radius, var(--r-m));
  padding: 12px 18px; box-shadow: var(--shadow, 0 1px 2px rgba(20,30,60,.04));
  min-height: 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.ws-group .ws-head { display: flex; align-items: baseline; gap: 8px; }
.ws-group .ws-city { font-size: var(--fs-4); font-weight: 700; }
.ws-group .ws-badge { font-size: var(--fs-1); color: var(--text-sub); letter-spacing: .05em; }
.ws-group .ws-badge.plan { color: var(--gold-deep); font-weight: 600; }
.ws-group .ws-gbody { display: flex; align-items: center; gap: 12px; }
.ws-group .ws-gicon { width: 28px; height: 28px; color: var(--primary); flex-shrink: 0; display: inline-flex; }
.ws-group .ws-gicon svg { width: 28px; height: 28px; }
.ws-group .ws-gtemp { font-size: calc(var(--fs-8) * 13 / 12); font-weight: 800; line-height: 1; }
.ws-group .ws-gwt { font-size: var(--fs-3); line-height: 1.35; }
.ws-group .ws-gwt small { display: block; font-size: var(--fs-1); color: var(--text-sub); font-weight: 400; }
.ws-group .ws-gtimes { display: flex; gap: 18px; font-size: var(--fs-3); color: var(--text-sub); flex-wrap: wrap; }
.ws-group .ws-gtimes span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ws-group .ws-gtimes svg { width: 13px; height: 13px; }
.ws-group .ws-gtimes b { color: var(--text); font-weight: 400; font-variant-numeric: tabular-nums; }
.ws-group .ws-gtimes .t-gold { color: var(--gold-deep); }
.ws-group .ws-gtimes .t-blue { color: var(--primary); }

/* v0.4.5.2: 天气栏右侧图标按钮列 + 日落时间轻量标签 */
.weather-strip .ws-actions { width: 44px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.weather-strip .ws-act-btn {
  flex: 1; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hair); /* v0.8.9.48: 原多一个右括号 → 整条 border 声明无效，边框一直不渲染 */
  background: var(--glass, rgba(255,255,255,.72));
  -webkit-backdrop-filter: var(--blur, saturate(170%) blur(22px));
  backdrop-filter: var(--blur, saturate(170%) blur(22px));
  border-radius: var(--radius, var(--r-m));
  color: var(--text-sub, #69748a); cursor: pointer; transition: all .12s;
  box-shadow: var(--shadow, 0 1px 2px rgba(20,30,60,.04));
}
.weather-strip .ws-act-btn svg { width: 18px; height: 18px; }
.weather-strip .ws-act-btn:hover {
  border-color: var(--primary); color: var(--primary); background: var(--primary-light);
  transform: translateY(-2px); box-shadow: 0 6px 20px rgba(20,30,60,.10);
}
.weather-strip .ws-act-btn:disabled { opacity: .55; cursor: default; }
.weather-strip .ws-act-btn.spinning svg { animation: ws-spin .9s linear infinite; }
.ws-sunset { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-2); color: var(--text-sub, #69748a); }
.ws-sunset svg { width: 12px; height: 12px; }

/* ---- 3. 卡片标题线性图标 ---- */
.card-title { display: flex; align-items: center; gap: 7px; justify-content: flex-start; }
.ct-ic { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--primary); flex-shrink: 0; }
.ct-ic svg { width: 17px; height: 17px; }
.cal-title { display: flex; align-items: center; gap: 7px; }

/* ---- 4. 月历 v0.3.9: 格子统一尺寸 + 状态胶囊 (具体信息悬浮窗查看) ---- */
.cal-day { min-height: 50px; height: 50px; overflow: hidden; padding: 4px 6px; display: flex; flex-direction: column; }
.home-cal-side .cal-day { min-height: 50px; height: auto; }
.d-pills { display: flex; align-items: center; gap: 3px; margin-top: auto; flex-wrap: nowrap; overflow: hidden; }
.dpill { width: 9px; height: 9px; border-radius: var(--r-xs); flex-shrink: 0; display: inline-block; }
.dpill.st-draft { background: #adb5bd; }
.dpill.st-wait { background: var(--primary); }
.dpill.st-shot { background: var(--gold); }
.dpill.st-upload { background: var(--ok); }
.dpill.st-done { background: #1a5c2a; }
.dpill-more { font-size: var(--fs-1); color: var(--text-sub); font-weight: 700; line-height: 1; flex-shrink: 0; }
/* 悬浮窗: body 级单例, 不受容器裁剪 */
.cal-pop {
  position: fixed; z-index: 26000; display: none; min-width: 230px; max-width: 320px;
  background: rgba(255,255,255,.97); border: 1px solid var(--hair);
  border-radius: var(--r-m); box-shadow: 0 12px 34px rgba(20,30,60,.18); padding: 10px 12px;
  backdrop-filter: blur(14px) saturate(160%);
}
/* v0.5.2: 悬浮提示统一弹性淡入 */
.cal-pop.show { display: block; animation: popIn var(--dur-fast) var(--ease-spring); }
.cal-pop .cp-head { font-size: var(--fs-3); font-weight: 700; color: var(--primary-dark); margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px dashed #e2e6ee; }
.cal-pop .cp-row { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: var(--fs-3); cursor: pointer; border-radius: var(--r-xs); }
.cal-pop .cp-row:hover { background: var(--primary-light); }
.cal-pop .cp-time { color: var(--text-sub); font-weight: 600; flex-shrink: 0; }
.cal-pop .cp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

/* ---- 5. 重要提示 v0.3.9: 单行突出重点 (计划标题挪悬浮) ---- */
.alert-item .a-icon { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin-top: 1px; }
.alert-item .a-icon svg { width: 15px; height: 15px; }
.alert-item .a-text { font-size: var(--fs-3); font-weight: 600; color: var(--text); line-height: 1.55; }
.alert-item.danger .a-icon { color: var(--danger); }
.alert-item.warn .a-icon { color: var(--warn); }
.alert-item.info .a-icon { color: var(--info, var(--primary-dark)); }

/* ---- 6. 新建计划: datetime-local 单框 ---- */
.wz-dt-in { width: auto; font-variant-numeric: tabular-nums; }


/* ══════════════════ v0.3.9.1 首页信息层级统一 / 月历单键 / 器材地点库调整 ══════════════════ */

/* ---- 1. v0.3.12 天气两栏切分: 左栏=所在地(天气块+时段行) 右栏=计划地(天气块+时段行) ---- */
/* 删除「所在地/计划地」胶囊; 由每栏头部 城市名+日期标签(今日/拍摄日) 自明。
   grid 定宽两列替代旧 flex-wrap 四段直排 —— 修复最大化窗口下块位置漂移错位 */
.ws-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-items: stretch; height: 100%; }
.ws-cols.single { grid-template-columns: 1fr; }
.ws-col { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ws-cols .wsmb {
  flex: 1;
  min-height: 0;
  justify-content: center;
  background: var(--glass, rgba(255,255,255,.72));
  border: 1px solid var(--hair); /* v0.8.9.48: 原多一个右括号 → 整条 border 声明无效，边框一直不渲染 */
  border-radius: var(--radius, var(--r-m));
  box-shadow: var(--shadow, 0 1px 2px rgba(20,30,60,.04));
  padding: 8px 12px;
}
.ws-cols .wsmb-head { gap: 6px; }
.ws-cols .wsmb-city { font-size: var(--fs-4); font-weight: 700; color: #111; }
.ws-cols .wsmb-body { gap: 10px; }
.ws-cols .wsmb-icon svg { width: 28px; height: 28px; }
.ws-cols .wsmb-temp { font-size: calc(var(--fs-8) * 13 / 12); font-weight: 800; }
.ws-cols .wsmb-wt { font-size: var(--fs-3); font-weight: 400; color: #111; }
.ws-cols .wsex { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 0; padding: 4px 0; }
.ws-cols .wsex-row { padding: 2px 0; border-top: none; }
/* ② 时段时间不加粗 */
.ws-cols .wsex-item b { color: #111; font-weight: 400; }

/* ---- 2. 月历导航单键: 弹层选年月 + 回今天 ---- */
.cal-nav-one { position: relative; }
.cal-one-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: var(--r-s);
  border: 1px solid var(--hair); background: rgba(255,255,255,.75);
  font-size: var(--fs-4); font-weight: 600; color: var(--text); cursor: pointer;
  box-shadow: 0 1px 2px rgba(20,30,60,.04), 0 3px 10px rgba(20,30,60,.05);
  transition: all .12s;
}
.cal-one-btn svg { width: 15px; height: 15px; color: var(--primary); }
.cal-one-btn .caret { color: var(--text-sub); font-size: var(--fs-1); }
.cal-one-btn:hover { border-color: var(--primary); color: var(--primary); }
/* v0.5.0: 月份文字与标题融合 — 无边框/背景/阴影，仅文字 + 下箭头 */
.cal-one-btn.cal-one-text {
  border: none; background: transparent; box-shadow: none; padding: 2px 4px;
  font-size: var(--fs-5); font-weight: 700; color: var(--primary-dark);
}
.cal-one-btn.cal-one-text:hover { color: var(--text); }
.cal-one-btn.cal-one-text .caret { font-size: var(--fs-1); color: var(--text-sub); }
.cal-one-pop {
  display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 500;
  width: 232px; background: rgba(255,255,255,.97); border: 1px solid var(--hair);
  border-radius: var(--r-m); box-shadow: 0 12px 34px rgba(20,30,60,.18); padding: 12px;
  backdrop-filter: blur(14px) saturate(160%);
}
.cal-one-pop.show { display: block; animation: popIn var(--dur-fast) var(--ease-spring); }
.cop-years { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.cop-years select { flex: 1; min-width: 0; }
.cop-ybtn {
  width: 26px; height: 28px; border-radius: var(--r-xs); border: 1px solid var(--border);
  background: rgba(255,255,255,.8); color: var(--text-sub); cursor: pointer; font-size: var(--fs-4); line-height: 1;
}
.cop-ybtn:hover { border-color: var(--primary); color: var(--primary); }
.cop-months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.cop-m {
  padding: 5px 0; border-radius: var(--r-xs); border: 1px solid transparent; background: rgba(255,255,255,.6);
  font-size: var(--fs-3); color: var(--text); cursor: pointer; transition: all .1s;
}
.cop-m:hover { border-color: var(--primary); color: var(--primary); }
.cop-m.on { background: var(--primary-dark); color: #fff; font-weight: 600; }
.cop-today {
  width: 100%; margin-top: 10px; padding: 6px 0; border-radius: var(--r-xs); border: none;
  background: var(--primary-light); color: var(--primary-dark); font-size: var(--fs-3);
  font-weight: 600; cursor: pointer;
}
.cop-today:hover { background: var(--primary); color: #fff; }

/* ---- 3. 月历悬浮窗: 标题黑加粗 / 时间加粗 / 名称常规 (信息不重复) ---- */
.cal-pop .cp-head { font-size: var(--fs-3); font-weight: 700; color: #111; }
.cal-pop .cp-time { color: #111; font-weight: 700; }
.cal-pop .cp-name { font-weight: 400; color: #111; }

/* ---- 4. 重要提示: 图标放大 / 文字去粗按状态着色 / 4:3 悬浮窗 ---- */
.alert-item .a-icon { width: 20px; height: 20px; }
.alert-item .a-icon svg { width: 20px; height: 20px; }
.alert-item .a-text { font-size: var(--fs-3); font-weight: 400; line-height: 1.55; }
.alert-item.danger .a-text { color: var(--danger); }
.alert-item.warn .a-text { color: var(--warn); }
.alert-item.info .a-text { color: var(--info, var(--primary-dark)); }
.alert-pop {
  position: fixed; z-index: 26000; display: none; width: 280px; height: 210px;
  background: var(--glass-strong); border: 1px solid var(--hair);
  border-radius: var(--r-l); box-shadow: var(--hi), var(--sh-3); padding: 16px 18px;
  display: none; flex-direction: column; backdrop-filter: blur(14px) saturate(160%);
}
.alert-pop.show { display: flex; animation: popIn var(--dur-fast) var(--ease-spring); }
.alert-pop .ap-row { padding: 8px 0; border-bottom: 1px dashed #e2e6ee; }
.alert-pop .ap-row:last-of-type { border-bottom: none; }
.alert-pop .ap-h { font-size: var(--fs-3); font-weight: 700; color: #111; margin-bottom: 2px; }
.alert-pop .ap-v { font-size: var(--fs-3); font-weight: 400; color: #111; line-height: 1.5; }
.alert-pop .ap-v small { color: #666; font-weight: 400; margin-left: 6px; font-size: var(--fs-2); }
.alert-pop .ap-go {
  margin-top: auto; align-self: flex-end; font-size: var(--fs-2); color: var(--primary);
  font-weight: 600; cursor: pointer;
}
.alert-pop .ap-go:hover { text-decoration: underline; }

/* ---- 5. 近期计划: 时间加粗突出 / 名称常规 (字体层级统一) ---- */
.mini-plan .mp-date { color: #111; font-size: var(--fs-3); font-weight: 700; width: auto; }
.mini-plan .mp-name { font-weight: 400; color: #111; }

/* ---- 6. 地点库: 名称列一行显示完整 ---- */
.loc-name-cell { white-space: nowrap; font-weight: 600; }

/* ---- 7. 器材库: 列序 品牌型号→类别, 表格观感清爽 ---- */
.gear-tbl .gb-model-cell { font-weight: 600; white-space: nowrap; }

/* ---- 8. v0.3.9.1 hotfix: 时段行容器已改两栏切分(ws-cols), 图标尺寸选择器同步 ---- */
/* 旧规则 .ws-times .wsex-item svg 随 .ws-times 容器删除而失配, 时段图标失去
   尺寸约束按 SVG 默认尺寸撑开渲染 (黄金/蓝调/日落图标巨大变形的根因);
   v0.3.12 容器再改 .ws-cols, 选择器同步更新 */
.ws-cols .wsex-item svg { width: 14px; height: 14px; color: var(--text-sub); flex-shrink: 0; }

/* ---- v0.3.9.1 追加: 计划卡片详情换行清晰罗列 ---- */
.pc-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-2); color: var(--text-sub); margin-bottom: 7px; line-height: 1.6; }
.pc-meta-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pc-meta-icon { font-size: var(--fs-3); line-height: 1; }

/* ---- v0.3.9.1 追加: 重要提示合并重复项 + 悬浮窗罗列计划 ---- */
.alert-item .a-count { display: inline-block; font-size: var(--fs-1); font-weight: 600; padding: 1px 5px; border-radius: var(--r-xs); background: var(--text-sub); color: #fff; margin-left: 4px; vertical-align: middle; }
.alert-item.danger .a-count { background: var(--danger); }
.alert-item.warn .a-count { background: var(--warn); }
.alert-item.info .a-count { background: var(--info); }
.alert-pop { height: auto; min-height: 210px; max-height: 380px; }
.alert-pop .ap-list { flex: 1; overflow-y: auto; margin: 8px 0; }
/* v0.3.12: 多计划悬浮窗 — 逐计划完整详情块 (日期/拍摄地/主题模特), 点击直达 */
.alert-pop .ap-block { padding: 8px 4px; border-bottom: 1px dashed #e2e6ee; cursor: pointer; border-radius: var(--r-xs); transition: background .1s; }
.alert-pop .ap-block:last-child { border-bottom: none; }
.alert-pop .ap-block:hover { background: rgba(var(--prgb),.06); }
.alert-pop .ap-block .ap-row { padding: 4px 0; }
.alert-pop .ap-header { font-size: var(--fs-3); font-weight: 700; color: #111; padding-bottom: 6px; border-bottom: 1px solid var(--border); }

/* v0.4.5.1: 重要提示多计划选项卡 */
.alert-pop .ap-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 10px; padding-bottom: 6px; overflow-x: auto; }
.alert-pop .ap-tab {
  flex-shrink: 0; padding: 5px 10px; border-radius: var(--r-xs); border: 1px solid transparent; background: rgba(255,255,255,.6);
  font-size: var(--fs-2); color: var(--text-sub); cursor: pointer; transition: all .12s; max-width: 120px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.alert-pop .ap-tab:hover { border-color: var(--primary); color: var(--primary); }
.alert-pop .ap-tab.active { background: var(--primary-dark); color: #fff; border-color: var(--primary-dark); font-weight: 600; }
.alert-pop .ap-body { animation: contentFadeIn .18s ease; }

/* ---- v0.3.9.1 追加: 网络图标随状态变色 + 折叠按钮改图标 ---- */
#net-toggle[data-st="on"] { color: #2f9e44; }
#net-toggle[data-st="off"] { color: #adb5bd; }
#net-toggle[data-st="offline"] { color: var(--primary); }

/* ---- v0.3.9.1 追加: 头像弹窗选择 ---- */
.avatar-choices { display: none; }
.user-avatar-box { position: relative; }
.avatar-pop {
  position: absolute; z-index: var(--z-sticky); top: calc(100% + 6px); left: -12px;
  background: rgba(255,255,255,.97); border: 1px solid var(--hair);
  border-radius: var(--r-m); box-shadow: 0 8px 24px rgba(20,30,60,.14);
  padding: 10px; display: none; flex-wrap: wrap; gap: 6px; width: 180px;
}
.avatar-pop.show { display: flex; animation: popIn var(--dur-fast) var(--ease-spring); }
.avatar-pop .avatar-opt { width: 32px; height: 32px; border-radius: var(--r-xs); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: var(--fs-6); border: 1px solid transparent; transition: all .12s; }
.avatar-pop .avatar-opt:hover { background: var(--primary-light); }
.avatar-pop .avatar-opt.on { border-color: var(--primary); background: var(--primary-light); }
.user-avatar-big { cursor: pointer; transition: all .12s; }
.user-avatar-big:hover { transform: scale(1.05); box-shadow: 0 0 0 3px rgba(var(--prgb),.15); }

/* ═══════════════════════════════════════════════════════════════════
   v0.3.11 / v0.8.9「素雅方案」= B 组主题共用（青灰素银 serif / 朱砂正红 zhusha / 青花钴蓝 qinghua）
   由 body.theme-plain 类激活（app.js / m.html 挂载）
   —— 布局/功能与默认主题完全一致, 仅视觉换肤:
   平涂纸面 + 去磨砂 + hairline 细线边框 + 直角左线选中态 + 衬线标题与数字
   字体栈: 本地离线优先 (思源宋体→Noto Serif SC→宋体), 无网络依赖
   ⚠️ 本块只放「结构性/材质性」token；颜色一律由各主题自己的 body[data-ui="…"] 色板提供
      （serif 的色板见文件顶部 body[data-ui="serif"]），否则 3 套主题会互相覆盖成同一色。
   ═══════════════════════════════════════════════════════════════════ */
body.theme-plain {
  --glass: rgba(251, 252, 252, .97);   /* 玻璃面改为近似不透明的纸面 */
  --glass-strong: rgba(255, 255, 255, .99);
  --glass-border: rgba(20,30,60,.08);
  --blur: none;                  /* 去磨砂 */
  --radius: 8px;
  --shadow: 0 1px 0 rgba(42, 47, 48, .03), 0 3px 10px rgba(42, 47, 48, .04);
  --shadow-float: 0 8px 28px rgba(42, 47, 48, .12);
  /* B 组主色块：纯色 var(--primary)（不渐变），与 A 组饱和渐变区分 */
  --grad-primary: var(--primary);
  --grad-primary-hover: var(--primary-dark);
  --grad-primary-active: var(--primary);
  background: var(--bg);         /* 平涂底, 去角落光晕（各主题用自己的 --bg） */
  background-attachment: fixed;
}
/* 与手机端口径一致（task-19/24）：素银主色偏亮 → 主题色块用深字；--on-grad-shadow 仅深字场景使用。
   ⚠️ 实测校准：手机端口径的 var(--text)(#2a2f30) on 素银主色 #7b9290 只有 **4.11:1**（<4.5，
   正是审计 R-2 记录的那个值）；改用更深的 #0b1524 得 **5.54:1**，达成 Lead 要求的「~5.5」。
   若要严格两端同名同值，把下面 #0b1524 换回 var(--text) 即可（落到 4.11）。 */
body.theme-plain[data-ui="serif"] { --on-grad: #0b1524; --on-grad-shadow: 0 1px 0 rgba(255,255,255,.35); }
/* 衬线字体: 标题 / 数字 (内容正文仍无衬线, 保证长文本可读性) */
body.theme-plain {
  --serif: "Source Han Serif SC", "Noto Serif SC", "SimSun", "STSong", serif;
}
body.theme-plain .topbar-title,
body.theme-plain .card-title,
body.theme-plain .sidebar-title,
body.theme-plain .login-title,
body.theme-plain .modal-title,
body.theme-plain .kanban-col-title,
body.theme-plain .stat-num,
body.theme-plain .wsmb-temp,
body.theme-plain .wsmb-city,
body.theme-plain .cal-day .d,
body.theme-plain .mini-plan .mp-date,
body.theme-plain .panel-sub,
body.theme-plain .hero-title,
body.theme-plain .hero-date-big { font-family: var(--serif); }

/* ---- 侧栏: 平涂纸面 + 左侧细线选中态 (替代蓝色胶囊) ---- */
body.theme-plain .sidebar {
  background: var(--card);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-right: 1px solid var(--border);
}
body.theme-plain .sidebar-header { border-bottom: 1px solid var(--border); }
body.theme-plain .logo-icon { color: var(--primary); }
/* v0.8.9.5（老板：导航栏所有按钮左侧有明显竖线）：原素银方案的「直角左线选中态」
   （border-left 2px + border-radius 0 6px 6px 0）在 hover/active 填色后左边缘会显现为一条竖线，
   .active 更直接是 border-left-color: var(--primary) 的彩色竖线。老板要求去除
   → 统一改回四角圆角、不再预留左边框（与 A 组口径一致）。 */
body.theme-plain .nav-item { color: var(--text-sub); border-radius: var(--r-xs); }
body.theme-plain .nav-item:hover { background: #dde5e5; color: var(--text); }
body.theme-plain .nav-item.active {
  background: var(--primary-light); color: var(--text); font-weight: 600;
  box-shadow: none;
}
body.theme-plain .sidebar-footer { border-top: 1px solid var(--border); }
body.theme-plain #network-status { color: var(--ok); }
/* 侧栏折叠态：原「选中左线」已按老板要求整体移除，仅保留圆角 */
body.theme-plain .nav-folded .nav-item.active { border-radius: var(--r-xs); }

/* ---- 顶栏 / 弹窗: 平涂 ---- */
body.theme-plain .topbar {
  background: rgba(245, 247, 247, .92);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid var(--border);
}
/* H-P2-3：遮罩规格全站统一（原 serif 特例 .28+无模糊=第 3 套规格） */
body.theme-plain .modal-mask { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); background: rgba(15,22,35,.38); }
body.theme-plain .modal {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: #fff; border: 1px solid var(--border);
}

/* ---- 按钮: hairline 描边风 ---- */
body.theme-plain .btn { border-color: #c5cacb; background: var(--card); }
body.theme-plain .btn:hover { border-color: var(--text); color: var(--text); }
/* v0.8.9 R-2 修复（阻断项）：此处原为实色 background/border-color:#7b9290，特异性 (0,2,0) 且晚于
   v0.8.9 层的 .btn-primary{background:var(--primary)}，导致 serif 主题主按钮完全不走浅渐变、
   深字实色对比仅 4.11:1。现改回主题渐变（serif 的 --primary:#7b9290 已在 color-mix 内）+ 浅渐变专用深字。 */
body.theme-plain .btn-primary { background: var(--primary); border-color: transparent; color: var(--on-grad); }
body.theme-plain .btn-primary:hover { background: var(--primary-dark); border-color: transparent; color: var(--on-grad); }
body.theme-plain .btn-danger:hover { border-color: var(--danger); background: var(--danger-bg); }
body.theme-plain .chip.on { background: var(--text); border-color: var(--text); }
body.theme-plain input:focus, body.theme-plain select:focus, body.theme-plain textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(123, 146, 144, .14);
}

/* ---- 首页统计: 数字颜色沿用现行版本语义色 (蓝/红/金/青/绿), 仅 c1 需钉死 ---- */
body.theme-plain .stat-card.c1 .stat-num { color: var(--primary); }
body.theme-plain .stat-card.c2 .stat-num { color: var(--danger); }
body.theme-plain .stat-card.c3 .stat-num { color: var(--gold-dark); }
body.theme-plain .stat-card.c4 .stat-num { color: #087f8c; }
body.theme-plain .stat-card.c5 .stat-num { color: var(--ok); }
body.theme-plain .stat-card:hover { border-color: #c5cacb; box-shadow: 0 3px 10px rgba(42, 47, 48, .06); }

/* ---- 天气条: 天气块去渐变改平涂纸面 ---- */
body.theme-plain .wsmb { background: #f8f9f9; border-color: var(--border); }
body.theme-plain .wsmb-temp { color: var(--text); }
body.theme-plain .wsex-row { border-top-color: #eceff0; }

/* ---- 月历: 今天 = 墨色实心圆 (替代蓝色) ---- */
body.theme-plain .cal-day.today .d, body.theme-plain .cal-day.today { background: transparent; }
body.theme-plain .cal-day.today .d {
  background: var(--text); color: #fff; font-weight: 700;
}
body.theme-plain .cal-one-btn { background: var(--card); border-color: #c5cacb; }
body.theme-plain .cal-one-btn:hover { border-color: var(--primary); color: var(--primary-dark); }
body.theme-plain .cal-one-btn.cal-one-text { background: transparent; border-color: transparent; color: var(--text); }
body.theme-plain .cal-one-btn.cal-one-text:hover { color: var(--primary-dark); }

/* ---- 看板: 列顶线改青灰 hairline ---- */
body.theme-plain .kanban-col { border-top-color: var(--border); }
body.theme-plain .kanban-col:nth-child(1) { border-top-color: var(--gold); }
body.theme-plain .kanban-col:nth-child(2) { border-top-color: var(--primary); }
body.theme-plain .kanban-col:nth-child(3) { border-top-color: var(--ok); }

/* ---- Toast: 浅色纸面 ---- */
body.theme-plain .toast {
  background: rgba(251, 252, 252, .97); color: var(--text);
  border: 1px solid var(--border); box-shadow: 0 6px 20px rgba(42, 47, 48, .12);
}
/* v0.8.9.8(UI-03): B 组三主题 toast 补语义色 —— 原上一条无差别覆盖 .ok/.err/.warn，
   三者同为白卡黑字（错误无红色警示）。改语义浅底 + 「文字专用加深色」--*-ink，对比度 ≥4.5。 */
body.theme-plain .toast.ok { background: var(--ok-bg); color: var(--ok-ink); border-color: color-mix(in srgb, var(--ok) 35%, #fff); }
body.theme-plain .toast.err { background: var(--danger-bg); color: var(--danger-ink); border-color: color-mix(in srgb, var(--danger) 35%, #fff); }
body.theme-plain .toast.warn { background: var(--warn-bg); color: var(--warn-ink); border-color: color-mix(in srgb, var(--warn) 35%, #fff); }

/* ---- 登录卡: 平涂 ---- */
body.theme-plain .login-mask { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
body.theme-plain .login-box {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: var(--card); border: 1px solid var(--border);
}

/* ═══════════ 首页焦点区(hero) — v0.3.14.1: 双主题通用基础样式 ═══════════ */
/* 默认蓝金主题用玻璃磨砂 + 蓝金渐变; 主题二在下方 body.theme-plain 覆盖 */
.hero-card {
  background: var(--glass, rgba(255,255,255,.72)); backdrop-filter: var(--blur, blur(22px));
  -webkit-backdrop-filter: var(--blur, blur(22px)); border: 1px solid var(--hair); /* v0.8.9.48: 原多一个右括号 → 整条 border 声明无效，边框一直不渲染 */
  border-radius: var(--radius, var(--r-m)); padding: 14px 26px; box-shadow: var(--shadow);
  min-height: 100px; display: flex; align-items: center; gap: 26px; flex-shrink: 0;
}
.hero-date { text-align: center; padding-right: 26px; border-right: 1px solid var(--border, #e0e0e0); min-width: 110px; flex-shrink: 0; }
.hero-date-big { font-size: calc(var(--fs-8) * 7 / 4); font-weight: 900; line-height: 1; color: var(--primary, var(--primary)); }
.hero-date-rest { font-size: var(--fs-1); color: var(--text-sub, #888); margin-top: 5px; letter-spacing: .05em; line-height: 1.6; }
.hero-main { flex: 1; min-width: 0; }
.hero-label { font-size: var(--fs-1); color: var(--gold-deep); letter-spacing: .16em; font-weight: 600; margin-bottom: 5px; }
.hero-title { font-size: var(--fs-7); font-weight: 700; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.hero-title:hover { color: var(--primary, var(--primary)); }
.hero-meta { display: flex; gap: 18px; margin-top: 7px; color: var(--text-sub, #888); font-size: var(--fs-2); flex-wrap: wrap; }
.hero-meta b { color: var(--text, #333); font-weight: 600; }
.hero-countdown { text-align: center; padding-left: 26px; border-left: 1px solid var(--border, #e0e0e0); min-width: 86px; flex-shrink: 0; }
.hero-countdown .num { font-size: calc(var(--fs-8) * 3 / 2); font-weight: 900; color: var(--gold-ink, var(--gold-ink)); line-height: 1; }   /* v0.8.9.8(UI-07): 生金 #d99a06 压近白底仅 2.30 → --gold-ink（token 已有，68% 金 + 黑） */
.hero-countdown .unit { font-size: var(--fs-1); color: var(--text-sub, #888); margin-top: 5px; letter-spacing: .06em; }

/* ═══════════ 主题二专属首页布局: 焦点区(hero) + 天气双卡 ═══════════
   仅 body.theme-plain 下覆盖上方基础样式 */
/* 焦点区: 下一场拍摄 (大衬线日期 + 计划名 + 倒计时) */
body.theme-plain .hero-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 26px; box-shadow: var(--shadow); min-height: 100px;
  display: flex; align-items: center; gap: 26px; flex-shrink: 0;
}
body.theme-plain .hero-date { text-align: center; padding-right: 26px; border-right: 1px solid var(--border); min-width: 110px; flex-shrink: 0; }
body.theme-plain .hero-date-big { font-size: calc(var(--fs-8) * 7 / 4); font-weight: 900; line-height: 1; }
body.theme-plain .hero-date-rest { font-size: var(--fs-1); color: var(--text-sub); margin-top: 5px; letter-spacing: .05em; line-height: 1.6; }
body.theme-plain .hero-main { flex: 1; min-width: 0; }
body.theme-plain .hero-label { font-size: var(--fs-1); color: #8a6a6a; letter-spacing: .16em; font-weight: 600; margin-bottom: 5px; }
body.theme-plain .hero-title { font-size: var(--fs-7); font-weight: 700; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
body.theme-plain .hero-title:hover { color: var(--primary-dark); }
body.theme-plain .hero-meta { display: flex; gap: 18px; margin-top: 7px; color: var(--text-sub); font-size: var(--fs-2); flex-wrap: wrap; }
body.theme-plain .hero-meta b { color: var(--text); font-weight: 600; }
body.theme-plain .hero-countdown { text-align: center; padding-left: 26px; border-left: 1px solid var(--border); min-width: 86px; flex-shrink: 0; }
body.theme-plain .hero-countdown .num { font-family: var(--serif); font-size: calc(var(--fs-8) * 3 / 2); font-weight: 900; color: var(--danger); line-height: 1; }
body.theme-plain .hero-countdown .unit { font-size: var(--fs-1); color: var(--text-sub); margin-top: 5px; letter-spacing: .06em; }

/* 天气双卡: 左右等大 (仅主题二渲染此结构) */
body.theme-plain .ws-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex-shrink: 0; }
body.theme-plain .ws-duo.single { grid-template-columns: 1fr; }
body.theme-plain .ws-group {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 12px 18px; box-shadow: var(--shadow); min-height: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0;
}
body.theme-plain .ws-group .ws-head { display: flex; align-items: baseline; gap: 8px; }
body.theme-plain .ws-group .ws-city { font-family: var(--serif); font-size: var(--fs-4); font-weight: 700; }
body.theme-plain .ws-group .ws-badge { font-size: var(--fs-1); color: var(--text-sub); letter-spacing: .05em; }
body.theme-plain .ws-group .ws-badge.plan { color: var(--gold-deep); font-weight: 600; }
body.theme-plain .ws-group .ws-gbody { display: flex; align-items: center; gap: 12px; }
body.theme-plain .ws-group .ws-gicon { width: 28px; height: 28px; color: var(--primary); flex-shrink: 0; display: inline-flex; }
body.theme-plain .ws-group .ws-gicon svg { width: 28px; height: 28px; }
body.theme-plain .ws-group .ws-gtemp { font-family: var(--serif); font-size: calc(var(--fs-8) * 13 / 12); font-weight: 800; line-height: 1; }
body.theme-plain .ws-group .ws-gwt { font-size: var(--fs-3); line-height: 1.35; }
body.theme-plain .ws-group .ws-gwt small { display: block; font-size: var(--fs-1); color: var(--text-sub); font-weight: 400; }
body.theme-plain .ws-group .ws-gtimes { display: flex; gap: 18px; font-size: var(--fs-3); color: var(--text-sub); flex-wrap: wrap; }
body.theme-plain .ws-group .ws-gtimes span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
body.theme-plain .ws-group .ws-gtimes svg { width: 13px; height: 13px; }
body.theme-plain .ws-group .ws-gtimes b { color: var(--text); font-weight: 400; font-variant-numeric: tabular-nums; }
body.theme-plain .ws-group .ws-gtimes .t-gold { color: var(--gold-dark); }
body.theme-plain .ws-group .ws-gtimes .t-blue { color: #7a94a8; }
/* 容器透明化 — 主题二天气区由 ws-group 双卡自承载, 外框/内边距归零 */
body.theme-plain .weather-strip { background: transparent; border: none; box-shadow: none; padding: 0; }
body.theme-plain .ws-serif { display: flex; flex-direction: column; gap: 10px; }
body.theme-plain .ws-serif .ws-top { padding: 0 2px; }
body.theme-plain .weather-strip .ws-act-btn { background: var(--card); border-color: var(--border); color: var(--text-sub); backdrop-filter: none; -webkit-backdrop-filter: none; }
body.theme-plain .weather-strip .ws-act-btn:hover { border-color: #7a94a8; color: var(--primary-dark); background: var(--primary-light); }
body.theme-plain .ws-sunset { color: var(--text-sub); }

/* 近期计划: 状态徽标改 hairline 胶囊 (主题二) */
body.theme-plain .mini-plan:hover { background: var(--primary-light); }
body.theme-plain .home-more { color: var(--primary-dark); }

/* ══════════════════ v0.3.12 综合修复 ══════════════════ */

/* ---- 1. 侧栏折叠按钮居右 ---- */
.side-btn-row #nav-fold { margin-left: auto; }
.app-shell.nav-folded .side-btn-row #nav-fold { margin-left: 0; }

/* ---- 2. 版本日志窗口铺满内容区 (消除下方空余) ---- */
.clg-card { padding: 0; overflow: hidden; height: calc(100vh - 97px); display: flex; }
.clg-frame { flex: 1; width: 100%; border: none; display: block; }

/* ---- 3. 设置页条目行距统一 (关于/备份等块同节奏, 末行去分隔线) ---- */
.settings-block .settings-item { padding: 14px 0; line-height: 1.7; }
.settings-block .settings-item:last-child { border-bottom: none; }

/* ═══ v0.7.3: 设置页三页签合并 — 功能框体分割 ═══ */
.st-frame {
  border: 1px solid var(--border, #e2e6ee); border-radius: var(--r-m);
  padding: 14px 16px 6px; margin-bottom: 14px; background: #fff;
}
.st-frame > .card-title {
  font-size: var(--fs-4); margin-bottom: 4px; padding-bottom: 8px;
  border-bottom: 1px dashed var(--border, #e2e6ee);
}
.st-frame > .field { margin-bottom: 10px; }
body.theme-plain .st-frame { background: rgba(255,255,255,.55); }

/* ═══ v0.7.3: 器材型号分页下拉（每页≤5条，翻页/滚轮滑动） ═══ */
.gpk-wrap { position: relative; }
.gpk-box {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  background: #fff; border: 1px solid var(--border, #e2e6ee); border-radius: var(--r-s);
  box-shadow: var(--shadow-float, 0 8px 24px rgba(20,30,60,.14)); overflow: hidden;
}
.gpk-item {
  padding: 8px 12px; font-size: var(--fs-3); cursor: pointer;
  border-bottom: 1px solid #f0f2f6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gpk-item:hover, .gpk-item.hl { background: var(--primary-light, var(--primary-light)); }
.gpk-empty { padding: 10px 12px; font-size: var(--fs-2); color: var(--text-light, #9aa3b2); }
.gpk-pager {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 8px; background: #f7f8fa; border-top: 1px solid var(--border, #e2e6ee);
}
.gpk-pg {
  border: 1px solid var(--border, #e2e6ee); background: #fff; border-radius: var(--r-xs);
  font-size: var(--fs-2); padding: 2px 10px; cursor: pointer; color: var(--text-sub, #7c8593);
}
.gpk-pg:disabled { opacity: .45; cursor: default; }
.gpk-pg:not(:disabled):hover { border-color: var(--primary, #1e6fdb); color: var(--primary, #1e6fdb); }
.gpk-info { font-size: var(--fs-1); color: var(--text-light, #9aa3b2); }

/* ---- 4. 地点库: 新增按钮独立按钮行 (搜索工具栏下方) ---- */
.loc-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }

/* ---- 5. 设备规划: 历史经验左右两栏 (左=常用设备排行 右=相似计划参考) ---- */
.gp-two-col { display: grid; grid-template-columns: 1fr 2fr; gap: 6px 24px; align-items: start; }
.gp-two-col .gp-stat-name { width: 128px; }
.gp-two-col .gp-col-r { min-width: 0; }
/* v0.3.14.1: 相似计划双列网格 — 节约垂直空间 */
.gp-sim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gp-sim-grid .gp-similar { margin-bottom: 0; }
@media (max-width: 1180px) {
  .gp-two-col { grid-template-columns: 1fr; }
  .gp-two-col .gp-stat-name { width: 220px; }
  .gp-sim-grid { grid-template-columns: 1fr; }
}

/* ---- 手机版流转页 (v0.3.14.1) ---- */
.mb-card { max-width: 780px; margin: 0 auto; }
.mb-head { margin-bottom: 14px; }
.mb-title { font-size: var(--fs-5); font-weight: 700; color: var(--text); margin: 0 0 4px; }
.mb-sub { font-size: var(--fs-3); color: var(--text-sub); line-height: 1.7; }
.mb-grid { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; }
.mb-qr-box { text-align: center; }
.mb-qr {
  display: inline-flex; padding: 12px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-s); box-shadow: 0 2px 10px rgba(16, 24, 40, .05);
}
.mb-qr svg { display: block; width: 200px; height: 200px; }
.mb-qr-tip { margin-top: 8px; font-size: var(--fs-2); color: var(--text-sub); }
.mb-link-box { min-width: 0; }
.mb-link-label { font-size: var(--fs-3); font-weight: 700; color: var(--text); margin-bottom: 6px; }
.mb-link-row { display: flex; gap: 8px; margin-bottom: 10px; }
.mb-link {
  flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-xs);
  background: var(--bg-soft, #f5f6f8); color: var(--text); font-size: var(--fs-3); font-family: monospace;
}
.mb-link-row .btn { flex-shrink: 0; }
.mb-remark { font-size: var(--fs-2); color: var(--text-sub); line-height: 1.9; }
.mb-remark strong { color: var(--text); font-weight: 600; }
@media (max-width: 620px) {
  .mb-grid { grid-template-columns: 1fr; }
}

/* ---- v0.3.14.2: 手机版页签 v2 — 防火墙状态 / 多网卡 IP 选择 / 自诊断 ---- */
.mb-fw { display: flex; align-items: center; gap: 12px; background: rgba(43, 138, 62, .07); border: 1px solid rgba(43, 138, 62, .25); border-radius: var(--r-m); padding: 12px 14px; margin-bottom: 12px; }
.mb-fw.warn { background: rgba(150, 105, 12, .07); border-color: rgba(150, 105, 12, .3); }
.mb-fw .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.mb-fw.warn .dot { background: var(--warn); }
.mb-fw .tx { flex: 1; min-width: 0; }
.mb-fw .tx b { font-size: var(--fs-3); display: block; }
.mb-fw .tx span { font-size: var(--fs-2); color: var(--text-sub); line-height: 1.6; display: block; margin-top: 2px; }
.mb-fw .btn { flex-shrink: 0; border: none; background: var(--primary-dark); color: #fff; font-size: var(--fs-2); font-weight: 600; padding: 8px 15px; border-radius: var(--r-xs); cursor: pointer; font-family: inherit; }
.mb-fw.ok .btn { background: rgba(43, 138, 62, .14); color: var(--ok); cursor: default; }
.mb-fw .btn:disabled { opacity: .6; cursor: wait; }
.mb-sec-t { font-size: var(--fs-3); font-weight: 700; margin: 16px 0 9px; display: flex; align-items: center; gap: 6px; }
.mb-sec-t .n { width: 19px; height: 19px; border-radius: var(--r-xs); background: linear-gradient(135deg, var(--primary), var(--primary-deep, #2860c9)); color: #fff; font-size: var(--fs-1); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mb-ipcard { display: flex; align-items: center; gap: 11px; border: 1.5px solid var(--border); border-radius: 11px; padding: 10px 13px; margin-bottom: 8px; cursor: pointer; transition: .15s; background: var(--bg-soft, #f7f8fa); }
.mb-ipcard.sel { border-color: var(--primary); background: rgba(var(--prgb), .06); box-shadow: 0 0 0 3px rgba(var(--prgb), .10); }
.mb-ipcard .ic { width: 32px; height: 32px; border-radius: var(--r-s); background: rgba(var(--prgb), .10); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mb-ipcard.wifi .ic { background: rgba(var(--grgb), .12); color: var(--gold-deep, #a87705); }
.mb-ipcard .m { flex: 1; min-width: 0; }
.mb-ipcard .m b { font-size: var(--fs-3); display: flex; align-items: center; gap: 6px; }
.mb-ipcard .m b .ok { font-size: var(--fs-1); color: var(--ok); font-weight: 600; background: rgba(43, 138, 62, .10); padding: 1px 7px; border-radius: var(--r-full); }
.mb-ipcard .m span { font-size: var(--fs-2); color: var(--text-sub); display: block; margin-top: 2px; font-family: monospace; letter-spacing: .02em; }
.mb-ipcard .radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; position: relative; }
.mb-ipcard.sel .radio { border-color: var(--primary); }
.mb-ipcard.sel .radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--primary); }
.mb-ipcard .ic svg { width: 16px; height: 16px; }
.mb-diag { background: rgba(var(--prgb), .05); border: 1px dashed rgba(var(--prgb), .3); border-radius: var(--r-m); padding: 12px 14px; font-size: var(--fs-2); color: var(--text-sub); line-height: 2; }
.mb-diag b { color: var(--text); }
.mb-diag .ok { color: var(--ok); font-weight: 600; }
.mb-diag .bad { color: var(--danger); font-weight: 600; }
.mb-hint { font-size: var(--fs-2); color: var(--text-sub); line-height: 1.8; margin-top: 10px; }
.mb-hint b { color: var(--text); }
.mb-hint .hl { color: var(--gold-deep, #a87705); font-weight: 600; }

/* ---- 6. 设备规划: 线性图标替换 emoji (图标一致性) ---- */
.gp-tic { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; vertical-align: -3px; margin-right: 5px; }
.gp-tic svg { width: 16px; height: 16px; }
.ri-ic { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; color: var(--text-sub); flex-shrink: 0; vertical-align: -2px; margin-right: 5px; }
.ri-ic svg { width: 14px; height: 14px; }
.gp-inline-ic { display: inline-flex; align-items: center; width: 14px; height: 14px; color: var(--text-sub); vertical-align: -2px; margin-right: 3px; }
.gp-inline-ic svg { width: 13px; height: 13px; }

/* ---- 7. 设备规划: 各栏卡片间距 (修复栏间贴边重叠) ---- */
.gp-card { margin-bottom: 16px; }
.gp-card:last-child { margin-bottom: 0; }

/* ══════════════════ v0.3.13 细节修复 ══════════════════ */

/* ---- 1. 折叠态侧栏底部: 头像居中在上, 主题/消息/展开按钮垂直居中在下 ---- */
.app-shell.nav-folded .side-btn-row { flex-direction: column; align-items: center; gap: 8px; margin-top: 4px; }
.app-shell.nav-folded .side-btn-row .side-ibtn:not(#nav-fold) { display: none; }

/* ---- 2. 登录卡右上角主题切换按钮 (未登录可切换, 与侧栏图标同风格) ---- */
.login-box .login-theme-toggle { position: absolute; top: 12px; right: 12px; z-index: 2; }
.login-box .login-theme-toggle svg { width: 17px; height: 17px; }

/* ---- 3. 青灰素银登录界面 (衬线编辑风: 平涂纸面+发丝线描边+内嵌画框+方角墨色胶囊) ---- */
body.theme-plain .login-mask {
  background:
    radial-gradient(900px 520px at 85% -8%, rgba(123, 146, 144, .10), transparent 60%),
    radial-gradient(700px 420px at 10% 110%, rgba(138, 127, 82, .08), transparent 55%),
    linear-gradient(180deg, #f7f8f8, #f0f2f2);
}
body.theme-plain .login-box {
  border-radius: var(--r-xs);
  box-shadow: 0 10px 34px rgba(42, 47, 48, .10), inset 0 0 0 4px var(--card), inset 0 0 0 5px var(--primary-light);
}
body.theme-plain .login-logo { color: var(--primary); }
body.theme-plain .login-title { font-weight: 700; letter-spacing: .35em; text-indent: .35em; }
body.theme-plain .login-sub { color: var(--text-sub); letter-spacing: .04em; }
body.theme-plain .login-box input { border-radius: 4px; }
body.theme-plain .login-box .login-btn {
  font-family: var(--serif); font-weight: 700;
  letter-spacing: .45em; text-indent: .45em;
  background: var(--card); color: var(--text); border: 1px solid var(--primary); box-shadow: none;
}
body.theme-plain .login-box .login-btn:hover { background: var(--primary-light); border-color: var(--primary-dark); color: var(--text); }
body.theme-plain .login-box .chip { border-radius: 0; border: 1px solid #d5dada; background: var(--card); color: var(--text); }
body.theme-plain .login-box .chip.on { background: var(--text); border-color: var(--text); color: var(--card); }
body.theme-plain .login-box .login-theme-toggle { color: var(--text-sub); }
body.theme-plain .login-box .login-theme-toggle:hover { background: var(--primary-light); color: var(--primary-dark); }
body.theme-plain .login-credits { border-top: none; color: var(--text-sub); }

/* ══════════════════ v0.4.0 同步中心 (设置页) ══════════════════ */
.sync-input { width: 235px; max-width: 55%; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--r-xs); font-size: var(--fs-3); background: #fff; color: var(--text); }
.sync-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--prgb), .15); }
/* 开关 */
.sw { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.sw input { opacity: 0; width: 0; height: 0; }
.sw .slider { position: absolute; inset: 0; background: #c6cdd6; border-radius: var(--r-full); transition: .2s; cursor: pointer; }
.sw .slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(16, 24, 40,.25); }
.sw input:checked + .slider { background: var(--primary); }
.sw input:checked + .slider::before { transform: translateX(20px); }
/* 状态徽标 */
.sync-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-3); color: var(--text-sub); }
.sync-state .dot { width: 8px; height: 8px; border-radius: 50%; background: #c6cdd6; display: inline-block; flex-shrink: 0; }
.sync-state.ok .dot { background: var(--ok); }
.sync-state.err .dot { background: var(--danger); }
.sync-state.warn .dot { background: var(--warn); }
/* 日志 (终端风格) */
.sync-log { margin-top: 12px; background: #101828; color: #9fd7c3; border-radius: var(--r-s); padding: 10px 12px; font-family: Consolas, Menlo, monospace; font-size: var(--fs-2); line-height: 1.9; white-space: pre-wrap; word-break: break-all; max-height: 176px; overflow-y: auto; }
.sync-log .lg-err { color: #ff8a80; }
.sync-log .lg-ok { color: #8be9a8; }
.sync-log .lg-dim { color: #6b7a90; }

/* v0.8.11: 被服务器拒收的变更明细（云同步面板；这些改动只在本机，必须让用户看见） */
.settings-item.rj-block { display: block; }
.rj-head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-3); font-weight: 600; color: var(--danger); }
.rj-tag { background: var(--danger-bg); color: var(--danger); border-radius: var(--r-full); padding: 1px 9px; font-size: var(--fs-2); font-weight: 600; }
.rj-details { margin-top: 6px; }
.rj-details > summary { cursor: pointer; font-size: var(--fs-3); color: var(--primary); user-select: none; }
.rj-list { margin-top: 6px; border: 1px solid var(--border); border-radius: var(--r-xs); overflow: hidden; background: #fbfcfe; }
.rj-row { display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; font-size: var(--fs-3); border-bottom: 1px solid #eef1f6; }
.rj-row:last-child { border-bottom: none; }
.rj-tbl { color: var(--text-sub); min-width: 68px; flex-shrink: 0; }
.rj-id { font-family: Consolas, Menlo, monospace; color: var(--text-sub); min-width: 76px; flex-shrink: 0; }
.rj-why { color: var(--danger); }
.rj-more { padding: 7px 10px; font-size: var(--fs-2); color: var(--text-sub); background: #f6f8fb; border-top: 1px solid #eef1f6; }

/* ══════════════════ v0.4.2 计划关联账号 ══════════════════ */
.assoc-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.assoc-item { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-l); font-size: var(--fs-3); cursor: pointer; user-select: none; }
.assoc-item:hover { background: var(--primary-light); border-color: var(--primary); }
.assoc-item input { width: auto; margin: 0; }
.assoc-item .hint { color: var(--text-sub); font-size: var(--fs-2); }
#wz-associated-wrap { grid-column: 1 / -1; }

/* v0.4.5: 协作人搜索下拉多选 */
.member-picker { border: 1px solid var(--border); border-radius: var(--r-s); background: #fff; padding: 8px; }
.mp-input-wrap { min-height: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 6px; border-bottom: 1px solid var(--bg-deep); }
.mp-input-wrap .hint { color: var(--text-sub); font-size: var(--fs-2); }
.mp-search { width: 100%; border: none; outline: none; padding: 6px 4px; font-size: var(--fs-3); }
.mp-list { max-height: 300px; overflow-y: auto; overflow-x: hidden; margin-top: 4px; }
.mp-empty { padding: 8px; text-align: center; color: var(--text-sub); font-size: var(--fs-2); }
.mp-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-xs); font-size: var(--fs-3); flex-wrap: wrap; }
.mp-row:hover { background: var(--bg); }
/* v0.5.5: 协作人选择器 — 用户名占满一行，角色+按钮折行到下方，防横向溢出 */
.mp-row .mp-name { flex: 1 1 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; margin-bottom: 2px; }
.mp-row .mp-name .hint { font-weight: 400; font-size: var(--fs-1); }
.mp-row .role-sel { flex: 1; min-width: 100px; font-size: var(--fs-2); border: 1px solid var(--border); border-radius: var(--r-xs); padding: 4px 6px; background: var(--bg); }
.mp-row button { font-size: var(--fs-2); padding: 4px 14px; flex-shrink: 0; }
.share-link-row code.k { cursor: pointer; }

/* ══════════════════ v0.4.4 侧栏重构 / 主题胶囊 / 消息中心 / 个人信息面板 ══════════════════ */

/* ---- 1. 导航行间距增大 ---- */
.sidebar-nav .nav-item { padding: 11px 12px; margin-bottom: 8px; }

/* ---- 2. 主题切换胶囊 (单独一行置底栏顶, 左蓝金玻璃 / 右青灰素银) ---- */
.theme-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; cursor: pointer; user-select: none; }
.theme-cap {
  position: relative; width: 50px; height: 26px; border-radius: var(--r-full); flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--gold));
  box-shadow: inset 0 1px 3px rgba(20, 30, 60, .28); transition: background .25s;
}
.theme-cap-ball {
  position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(20, 30, 60, .35);
  transition: transform .25s cubic-bezier(.4, 1.4, .6, 1);
}
.theme-cap.on { background: linear-gradient(135deg, #7b9290, #b3bfbd); }
.theme-cap.on .theme-cap-ball { transform: translateX(24px); }
.theme-lab { font-size: var(--fs-2); color: var(--text-sub); font-weight: 600; white-space: nowrap; }
.theme-row:hover .theme-lab { color: var(--primary); }

/* 折叠态: 胶囊收缩为单圆球 (球居中, 渐变色仍区分两套主题) */
.app-shell.nav-folded .theme-row { justify-content: center; margin-bottom: 8px; }
.app-shell.nav-folded .theme-lab { display: none; }
.app-shell.nav-folded .theme-cap { width: 26px; border-radius: 50%; overflow: hidden; }
.app-shell.nav-folded .theme-cap .theme-cap-ball { transform: none; }
.app-shell.nav-folded .side-btn-row { margin-top: 2px; }

/* ---- 3. 侧栏按钮: 消息红点 / 云同步状态点 / 用户头像 emoji ---- */
.side-ibtn { flex-shrink: 0; }
#user-chip { font-size: var(--fs-6); line-height: 1; }
.dot-red {
  display: none; position: absolute; top: 0; right: -1px; min-width: 15px; height: 15px;
  padding: 0 4px; border-radius: var(--r-xs); background: var(--danger); color: #fff;
  font-size: var(--fs-1); font-weight: 700; line-height: 15px; text-align: center;
  border: 1.5px solid var(--hair); box-shadow: 0 1px 3px rgba(16, 24, 40, .22);
}
.dot-red.show { display: inline-block; animation: dotPop var(--dur-fast) var(--ease-spring); }
@keyframes dotPop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.dot-sync {
  position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid var(--hair); box-shadow: 0 0 0 1px var(--hair);
  background: #adb5bd;
}
.dot-sync[data-st="on"] { background: var(--ok); }
.dot-sync[data-st="err"] { background: var(--danger); }
.dot-sync[data-st="off"] { background: #adb5bd; }

/* ---- 4. 个人信息面板 (头像 / 资料编辑; admin 内嵌开发者选项) ---- */
.up-profile { display: flex; gap: 18px; align-items: flex-start; }
.up-avatar {
  width: 84px; height: 84px; border-radius: var(--r-l); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: calc(var(--fs-8) * 5 / 3);
  background: var(--primary-light); border: 1px solid var(--border);
  cursor: pointer; transition: all .15s;
}
.up-avatar:hover { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--prgb), .12); }
.up-emoji-row { display: flex; flex-wrap: wrap; gap: 6px; }
.up-emoji {
  width: 38px; height: 38px; border-radius: var(--r-s); display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-7); line-height: 1; cursor: pointer; border: 1.5px solid var(--border); background: #fff; transition: all .12s;
  user-select: none; text-align: center;
}
.up-emoji:hover { border-color: var(--primary); background: var(--primary-light); }
.up-emoji.on { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 0 0 2px rgba(var(--prgb), .15); }
.up-admin { margin-top: 16px; border-top: 1px dashed var(--border); padding-top: 12px; }
.up-admin-title { font-weight: 700; font-size: var(--fs-4); margin-bottom: 8px; color: var(--gold-deep); }

/* ---- 5. 消息中心 (v0.5.1 悬浮框常驻模式) ---- */
/* 悬浮框面板 */
.msg-float-panel {
  position: fixed; right: 20px; bottom: 20px; width: 560px; max-width: 92vw;
  height: 560px; min-height: 400px; max-height: 85vh; z-index: 9999;
  /* v0.8.9.8：玻璃材质 + token 阴影（原为纯黑 rgba(0,0,0,.18)，与全站 rgba(20,30,60,*) 体系不一致） */
  background: var(--glass-strong); backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--hair); border-radius: var(--r-l);
  box-shadow: var(--hi), var(--sh-3);
  display: flex; flex-direction: column; overflow: hidden;
  animation: msgFloatIn var(--dur-modal) var(--ease-spring);
  transform-origin: bottom right;
  will-change: transform, opacity;
}
/* v0.5.3: 整体尺寸调整手柄 */
.msg-resize-grip {
  position: absolute; right: 0; bottom: 0; width: 18px; height: 18px;
  cursor: nwse-resize; z-index: var(--z-raised);
  background: linear-gradient(135deg, transparent 0 45%, rgba(0,0,0,.18) 45% 55%, transparent 55% 70%, rgba(0,0,0,.18) 70% 80%, transparent 80%);
  border-bottom-right-radius: 14px;
}
.msg-resize-grip:hover { background: linear-gradient(135deg, transparent 0 45%, rgba(var(--prgb),.5) 45% 55%, transparent 55% 70%, rgba(var(--prgb),.5) 70% 80%, transparent 80%); }
/* v0.5.3: 左右分栏拖拽分隔条 */
.msg-splitter {
  width: 5px; flex-shrink: 0; cursor: col-resize; background: transparent;
  position: relative; z-index: 5; transition: background .15s;
}
.msg-splitter::after {
  content: ''; position: absolute; left: 1px; top: 0; bottom: 0; width: 3px;
  background: transparent; transition: background .15s; border-radius: 2px;
}
.msg-splitter:hover::after, .msg-splitter:active::after { background: var(--primary); opacity: .5; }
.msg-float-panel.closing { animation: msgFloatOut var(--dur-base) var(--ease-in-out) forwards; }
@keyframes msgFloatIn {
  from { opacity: 0; transform: scale(.92) translateY(14px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes msgFloatOut {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to { opacity: 0; transform: scale(.94) translateY(10px); }
}
.msg-float-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; cursor: move; user-select: none; flex-shrink: 0;
  border-bottom: 1px solid var(--border); font-weight: 600; font-size: var(--fs-4);
  background: var(--primary-dark); color: #fff;
}
.msg-float-btn {
  background: none; border: none; color: #fff; cursor: pointer;
  font-size: var(--fs-4); padding: 2px 6px; border-radius: 4px; opacity: .8;
}
.msg-float-btn:hover { opacity: 1; background: rgba(255,255,255,.2); }
.msg-float-body { flex: 1; overflow: hidden; display: flex; }
.msg-float-body .msg-layout { flex: 1; height: 100%; max-height: none; }
.msg-input-actions { display: flex; gap: 4px; align-items: center; }

.msg-layout {
  display: flex; border: 1px solid var(--hair); border-radius: var(--r-m); overflow: hidden;
  height: 60vh; min-height: 380px; max-height: 640px; background: var(--glass); box-shadow: var(--hi), var(--sh-1);
}
.msg-side { width: 230px; flex-shrink: 0; border-right: 1px solid var(--hair); overflow-y: auto; background: var(--glass); }
.msg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.msg-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--hair); font-weight: 700; background: var(--glass-strong);
}
.msg-head-av { font-size: var(--fs-7); line-height: 1; }
.msg-list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.msg-b { max-width: 72%; align-self: flex-start; }
.msg-b.mine { align-self: flex-end; }
.msg-b.other { align-self: flex-start; }
.msg-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.msg-avatar { font-size: var(--fs-6); line-height: 1; }
.msg-b.mine .msg-meta { justify-content: flex-end; }
.msg-bub {
  padding: 8px 12px; border-radius: var(--r-m); border-bottom-left-radius: 4px;
  background: var(--bg-deep); font-size: var(--fs-4); line-height: 1.6;
  word-break: break-word; white-space: pre-wrap;
}
.msg-b.mine .msg-bub { background: var(--primary-dark); color: #fff; border-bottom-left-radius: 12px; border-bottom-right-radius: 4px; }
.msg-time { font-size: var(--fs-1); color: var(--text-sub); margin-top: 3px; }
.msg-b.mine .msg-time { text-align: right; }
.msg-sender { font-size: var(--fs-2); color: var(--gold-deep); font-weight: 600; }
.msg-sender-role { font-size: var(--fs-1); }

/* v0.5.8: 群聊成员折叠栏 */
.msg-group-members { border-bottom: 1px solid var(--hair); background: var(--glass); }
.msg-gm-toggle { font-size: var(--fs-2); color: var(--text-sub); padding: 6px 12px; cursor: pointer; user-select: none; font-weight: 600; }
.msg-gm-toggle:hover { color: var(--primary); }
.msg-gm-list { padding: 6px 10px; max-height: 240px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.msg-gm-item { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--r-s); background: var(--glass); border: 1px solid var(--hair); box-shadow: var(--sh-1); }
.msg-gm-av-wrap { position: relative; width: 28px; height: 28px; flex-shrink: 0; }
.msg-gm-av { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary-light, #eaf2ff); font-size: var(--fs-5); }
.msg-gm-cc { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; min-width: 14px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--hair); box-shadow: 0 1px 3px rgba(16, 24, 40,.2); z-index: 2; font-size: var(--fs-1); line-height: 1; }
.msg-gm-mid { flex: 1; min-width: 0; overflow: hidden; }
.msg-gm-name { font-size: var(--fs-2); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-gm-owner { font-size: var(--fs-1); padding: 0 3px; border-radius: 3px; background: var(--gold, #c8961e); color: #fff; margin-left: 3px; }
.msg-gm-meta { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.msg-gm-role { font-size: var(--fs-1); color: var(--text-sub); background: var(--primary-light, #eaf2ff); padding: 0 4px; border-radius: 3px; }
.msg-gm-lv { font-size: var(--fs-1) !important; padding: 0 4px !important; border-radius: 3px !important; }
.msg-del-group {
  background: none; border: none; cursor: pointer; font-size: var(--fs-5);
  padding: 2px 6px; margin-left: auto; border-radius: 4px; opacity: .6;
}
.msg-del-group:hover { opacity: 1; background: rgba(220,53,69,.15); color: #dc3545; }
/* v0.5.7: 群聊跳转计划按钮 */
.msg-jump-plan {
  background: var(--primary-light); border: 1px solid color-mix(in srgb, var(--primary) 38%, #fff); color: var(--primary);
  cursor: pointer; font-size: var(--fs-1); padding: 3px 10px; margin-left: auto;
  border-radius: var(--r-full); transition: all .15s; white-space: nowrap; box-shadow: var(--sh-1); }
.msg-jump-plan:hover { background: var(--primary); color: #fff; }
/* v0.8.11.5（老板：打完字消息栏异常）：全局 `textarea{min-height:56px}`(见 line 200) 会把这一行的
   输入框撑成 56px，而本行 align-items:flex-end → 发送按钮沉到底部，形成「输入框左上、按钮右下」的对角错位。
   这里显式 min-height:0 收回高度（rows=1 即单行），并按内容自动长高（≤ max-height 再出现滚动）。 */
.msg-input-row { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--hair); align-items: flex-end; }
.msg-input-row textarea { flex: 1; resize: none; min-height: 0; max-height: 88px; overflow-y: auto;
  font-size: var(--fs-4); line-height: 1.5; padding: 8px 10px; }
.msg-empty { text-align: center; color: var(--text-sub); font-size: var(--fs-3); padding: 40px 0; align-self: center; width: 100%; }
/* 会话列表行 */
.msg-c { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; transition: background .12s; border-bottom: 1px solid rgba(20, 30, 60, .04); }
.msg-c:hover { background: rgba(var(--prgb), .07); }
.msg-c.on { background: var(--primary-light); }
.msg-c-av {
  width: 36px; height: 36px; border-radius: 50%; background: var(--glass); border: 1px solid var(--hair);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-7); flex-shrink: 0;
}
.msg-c-mid { flex: 1; min-width: 0; }
.msg-c-name { font-size: var(--fs-3); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-c-last { font-size: var(--fs-2); color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.msg-c-unread {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-xs); background: var(--danger); color: #fff;
  font-size: var(--fs-1); font-weight: 700; line-height: 18px; text-align: center; flex-shrink: 0;
}
/* v0.5.0: 置顶会话左侧金线标记 */
.msg-c[data-peer="ai_assistant"], .msg-c[data-peer="broadcast"] { border-left: 3px solid var(--gold); }

/* ---- 6. 弹窗尺寸补位 (large 档, 个人信息 / 消息中心 / 开发者区块共用) ---- */
.modal.large { width: min(880px, 94vw); }

/* 手机端窄屏: 消息中心收窄会话列表, 主题胶囊折叠居中 */
@media (max-width: 768px) {
  .msg-layout { height: 70vh; }
  .msg-side { width: 170px; }
  .msg-b { max-width: 86%; }
  .theme-row { justify-content: center; }
  .theme-lab { display: none; }
  .theme-cap { width: 26px; border-radius: 50%; overflow: hidden; }
  .theme-cap .theme-cap-ball { transform: none; }
  .theme-cap.on .theme-cap-ball { transform: none; }
}

/* ---- 7. B 组「素雅方案」变体 (theme-plain：青灰素银 / 朱砂正红 / 青花钴蓝共用) ---- */
body.theme-plain .up-avatar { background: var(--primary-light); border-color: #d5dada; }
body.theme-plain .up-avatar:hover { border-color: var(--primary); box-shadow: none; }
body.theme-plain .up-emoji { border-radius: 4px; }
body.theme-plain .up-emoji.on { background: var(--primary-light); border-color: var(--text); box-shadow: none; }
body.theme-plain .up-admin-title { color: var(--primary-dark); }
body.theme-plain .msg-layout { border-radius: 4px; }
body.theme-plain .msg-side { background: var(--primary-light); }
body.theme-plain .msg-c.on { background: var(--primary-light); }
body.theme-plain .msg-c:hover { background: var(--primary-light); }
body.theme-plain .msg-bub { background: var(--primary-light); border-radius: 4px; }
body.theme-plain .msg-b.mine .msg-bub { background: var(--text); border-radius: 4px; }
body.theme-plain .msg-sender { color: var(--primary-dark); }body.theme-plain .theme-lab:hover { color: var(--primary-dark); }

/* v0.4.4.4: 同步面板一键连接主按钮 */
.btn-lg { padding: 12px 28px; font-size: var(--fs-5); font-weight: 600; border-radius: var(--r-s); }
.dev-sync-cta { padding: 14px 16px; margin: 12px -2px 8px; background: linear-gradient(135deg, rgba(var(--prgb),.06), rgba(var(--grgb),.05)); border: 1px solid var(--border); border-radius: var(--r-m); }
body.theme-plain .dev-sync-cta { background: linear-gradient(135deg, rgba(123,146,144,.08), rgba(179,191,189,.06)); }
.btn-ghost { background: transparent !important; border: 1px solid var(--border) !important; color: var(--text-sub); }
.btn-ghost:hover { background: rgba(0,0,0,.04) !important; }
.btn-ghost:disabled { opacity: .45; cursor: not-allowed; }

/* ══════════════════ v0.4.5 响应式与窗口自适应增强 ══════════════════ */

/* 基准：大屏幕内容居中，避免两侧空荡 */
@media (min-width: 1680px) {
  .content-scroll { padding: 24px 32px; }
  .home-layout { max-width: 1560px; margin: 0 auto; }
}

/* 中等屏幕：保持现行版式，仅微调 */
@media (max-width: 1366px) {
  .content-scroll { padding: 16px 18px; }
  .stat-card { padding: 12px 14px; }
  .stat-num { font-size: calc(var(--fs-8) * 11 / 12); }
}

/* 小屏幕/笔记本：侧栏收窄为图标，卡片更紧凑 */
@media (max-width: 1280px) {
  .app-shell .sidebar { width: 62px; }
  .app-shell .sidebar-title, .app-shell .nav-label { display: none; }
  .app-shell .sidebar-header { padding: 14px 8px; justify-content: center; }
  .app-shell .nav-item { justify-content: center; padding: 11px 8px; }
  .content-scroll { padding: 12px 14px; }
  .stats-row { gap: 10px; margin-bottom: 12px; }
  .stat-card { padding: 10px 12px; }
  .stat-num { font-size: var(--fs-7); }
  .home-list-box { max-height: clamp(160px, 26vh, 300px); }
  /* v0.4.5.1: 窄侧栏底部工具纵向收纳，防止 4 个图标横向溢出 */
  .app-shell .sidebar-footer { padding: 8px 4px; display: flex; flex-direction: column; align-items: center; }
  .app-shell .theme-row { justify-content: center; margin-bottom: 6px; gap: 0; }
  .app-shell .theme-lab { display: none; }
  .app-shell .theme-cap { width: 26px; border-radius: 50%; overflow: hidden; }
  .app-shell .theme-cap .theme-cap-ball,
  .app-shell .theme-cap.on .theme-cap-ball { transform: none; }
  .app-shell .side-btn-row { flex-direction: column; align-items: center; gap: 3px; margin-top: 0; }
  .app-shell .side-btn-row .side-ibtn { width: 28px; height: 28px; }
  .app-shell .side-btn-row .side-ibtn svg { width: 16px; height: 16px; }
  .app-shell .sidebar-footer #ver-tag { display: none; }
}

/* 矮屏：重点保证首页一屏完整，压缩纵向空间 */
@media (max-height: 800px) {
  .topbar { height: 48px; }
  .content-scroll { padding: 12px 14px; }
  .section-title { margin: 12px 0 8px; }
  .stat-card { padding: 10px 12px; }
  .stat-num { font-size: var(--fs-7); }
  .home-list-box { max-height: 22vh; }
}

/* 弹窗在小屏下自动贴边、内部紧凑 */
@media (max-width: 1100px) {
  .modal-mask .modal { max-width: calc(100vw - 28px) !important; margin: 10px; }
  .modal .body { padding: 14px; }
}

/* ══════════════════ v0.5.2 全局交互反馈动画 (苹果风格统一) ══════════════════ */

/* ---- 1. 按钮保存 loading spinner ---- */
.btn.loading { pointer-events: none; position: relative; color: transparent !important; }
.btn.loading::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border: 2px solid rgba(0,0,0,.22); border-top-color: rgba(0,0,0,.6);
  border-radius: 50%; animation: btnSpin var(--dur-fast) linear infinite;
}
.btn:not(.btn-primary):not(.btn-danger).loading::after {
  border-color: rgba(var(--prgb),.3) rgba(var(--prgb),.3) rgba(var(--prgb),.3) var(--primary);
}
@keyframes btnSpin { to { transform: rotate(360deg); } }
/* 保存成功后的按钮脉冲反馈 */
.btn.saved { animation: btnSavePulse var(--dur-base) var(--ease-spring); }
@keyframes btnSavePulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* ---- 2. 行项删除/坍塌动画 (计划/器材/消息会话/分镜卡等通用) ---- */
.row-removing {
  animation: rowOut var(--dur-base) var(--ease-in-out) forwards !important;
  pointer-events: none;
}
@keyframes rowOut {
  from { opacity: 1; transform: translateX(0); max-height: 200px; margin-top: 0; margin-bottom: 8px; padding-top: 9px; padding-bottom: 9px; }
  to { opacity: 0; transform: translateX(-24px); max-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
}

/* ---- 3. 刷新按钮旋转 (沿用 ws-spin 但提为通用类) ---- */
.btn-refresh.loading svg, .icon-btn.loading svg, .spinning svg {
  animation: ws-spin .9s linear infinite;
}

/* ---- 4. 徽章/状态切换颜色过渡 ---- */
.badge {
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

/* ---- 5. 列表批量入场动画 (错峰淡入，避免突兀) ---- */
.stagger-in > * { animation: rowIn var(--dur-base) var(--ease-out) backwards; }
.stagger-in > *:nth-child(1) { animation-delay: 0ms; }
.stagger-in > *:nth-child(2) { animation-delay: 30ms; }
.stagger-in > *:nth-child(3) { animation-delay: 60ms; }
.stagger-in > *:nth-child(4) { animation-delay: 90ms; }
.stagger-in > *:nth-child(5) { animation-delay: 120ms; }
.stagger-in > *:nth-child(6) { animation-delay: 150ms; }
.stagger-in > *:nth-child(7) { animation-delay: 180ms; }
.stagger-in > *:nth-child(8) { animation-delay: 210ms; }
.stagger-in > *:nth-child(n+9) { animation-delay: 240ms; }

/* ---- 6. checkbox / radio 苹果式焦点环 ---- */
.st-check input[type="checkbox"], .st-check input[type="radio"],
input[type="checkbox"], input[type="radio"] {
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
input[type="checkbox"]:hover, input[type="radio"]:hover { transform: scale(1.1); }
input[type="checkbox"]:checked, input[type="radio"]:checked {
  box-shadow: 0 0 0 3px rgba(var(--prgb),.18);
}

/* ---- 7. select 下拉箭头过渡 ---- */
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c8593' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
  padding-right: 28px; appearance: none;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
select:hover { border-color: #c4cbd6; }

/* ---- 8. 输入框成功/失败状态反馈 ---- */
.input-success { border-color: var(--ok) !important; box-shadow: 0 0 0 3px rgba(43,138,62,.14) !important; }
.input-error { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(209,52,56,.14) !important; animation: inputShake var(--dur-base) var(--ease-in-out); }
@keyframes inputShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ---- 9. 链接 / btn-link hover 下划线展开 ---- */
.btn-link { position: relative; }
.btn-link::after {
  content: ''; position: absolute; left: 4px; right: 4px; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-spring);
}
.btn-link:hover::after { transform: scaleX(1); }
.btn-link:hover { text-decoration: none; }

/* ══════════════════ v0.5.3 欢迎界面（首次登录设置+新手教学）══════════════════ */

.welcome-mask {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(10, 20, 50, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  animation: wlMaskIn var(--dur-modal, 320ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
@keyframes wlMaskIn { from { opacity: 0; } to { opacity: 1; } }

/* v0.5.7: 弹窗改为纯色卡片 + 80% 窗口尺寸，不再用磨砂玻璃（阅读困难） */
.welcome-box {
  position: relative; width: 80vw; max-width: 80vw; height: 80vh; max-height: 80vh;
  background: var(--glass-strong);
  border: 1px solid var(--hair); border-radius: var(--r-l);
  box-shadow: 0 16px 60px rgba(16, 24, 40,.25), 0 4px 16px rgba(16, 24, 40,.1);
  display: flex; flex-direction: column; overflow: hidden;
  animation: wlBoxIn 480ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
  transform-origin: center;
  will-change: transform, opacity;
}
@keyframes wlBoxIn {
  from { opacity: 0; transform: scale(.92) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.welcome-box.closing { animation: wlBoxOut 320ms var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1)) forwards; }
@keyframes wlBoxOut {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to { opacity: 0; transform: scale(.94) translateY(12px); }
}

.welcome-progress {
  position: absolute; top: 0; left: 0; height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--gold));
  width: 25%; border-radius: 0 4px 4px 0;
  transition: width var(--dur-base, 200ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}

.welcome-skip {
  position: absolute; top: 16px; right: 18px; z-index: 2;
  background: rgba(255,255,255,.4); border: 1px solid var(--border);
  color: var(--text-sub); padding: 4px 14px; font-size: var(--fs-2);
  border-radius: var(--r-full); cursor: pointer; transition: all .2s;
}
.welcome-skip:hover { background: var(--bg-deep); color: var(--text); }

.welcome-content {
  flex: 1; overflow-y: auto; padding: 50px 40px 30px;
  text-align: center;
}
.welcome-content.switching .welcome-step-icon,
.welcome-content.switching .welcome-step-title,
.welcome-content.switching .welcome-step-subtitle,
.welcome-content.switching .welcome-step-body {
  opacity: 0;
}
.welcome-content.enter .welcome-step-icon { animation: wlItemIn 400ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) both; }
.welcome-content.enter .welcome-step-title { animation: wlItemIn 400ms 60ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) both; }
.welcome-content.enter .welcome-step-subtitle { animation: wlItemIn 400ms 100ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) both; }
.welcome-content.enter .welcome-step-body { animation: wlItemIn 400ms 140ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) both; }
@keyframes wlItemIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.welcome-step-icon {
  font-size: calc(var(--fs-8) * 5 / 2); line-height: 1; margin-bottom: 16px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.1));
}
.welcome-step-title {
  font-size: calc(var(--fs-8) * 11 / 12); font-weight: 800; margin: 0 0 8px;
  color: var(--text);
}
.welcome-step-subtitle {
  font-size: var(--fs-3); color: var(--text-sub); margin: 0 0 24px;
}

.wl-feature-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-top: 20px;
}
.wl-feature {
  background: var(--bg, rgba(255,255,255,.6));
  border: 1px solid var(--border); border-radius: var(--r-m);
  padding: 16px 12px; transition: all .2s;
}
.wl-feature:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16, 24, 40,.06); border-color: var(--primary); }
.wl-feature-icon { font-size: calc(var(--fs-8) * 7 / 6); margin-bottom: 6px; }
.wl-feature-name { font-size: var(--fs-3); font-weight: 700; color: var(--text); margin-bottom: 4px; }
.wl-feature-desc { font-size: var(--fs-1); color: var(--text-sub); line-height: 1.4; }

.wl-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left;
}
.wl-form-grid .field.span2 { grid-column: 1 / -1; }
.wl-form-grid .field label {
  display: block; font-size: var(--fs-2); font-weight: 700; color: var(--text-sub); margin-bottom: 6px;
}
.wl-form-grid .field input {
  width: 100%; padding: 8px 12px; font-size: var(--fs-3);
  border: 1px solid var(--border); border-radius: var(--r-xs); background: #fff;
}
.wl-emoji-row { display: flex; gap: 6px; flex-wrap: wrap; }
.wl-emoji-btn {
  width: 36px; height: 36px; font-size: var(--fs-6); cursor: pointer;
  border: 1px solid var(--border); border-radius: 50%; background: #fff;
  transition: all .2s;
}
.wl-emoji-btn:hover { border-color: var(--primary); transform: scale(1.1); }
.wl-emoji-btn.on { border-color: var(--primary); background: var(--primary-light); transform: scale(1.05); }
.wl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.wl-chip {
  padding: 5px 12px; font-size: var(--fs-2); cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-full); background: #fff;
  transition: all .15s;
}
.wl-chip:hover { border-color: var(--primary); }
.wl-chip.on { background: var(--primary-dark); color: #fff; border-color: var(--primary-dark); }

.wl-theme-row { display: flex; gap: 16px; justify-content: center; margin-top: 20px; }
.wl-theme-card {
  width: 180px; padding: 12px; border: 2px solid var(--border); border-radius: var(--r-m);
  cursor: pointer; background: #fff; transition: all .2s;
}
.wl-theme-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(16, 24, 40,.08); }
.wl-theme-card.on { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-light); }
.wl-theme-preview { height: 90px; border-radius: var(--r-xs); margin-bottom: 8px; position: relative; }
.wl-theme-preview-blue { background: linear-gradient(135deg, var(--primary-dark), var(--primary) 55%, #4f8ef7); }
.wl-theme-preview-serif { background: linear-gradient(135deg, #7b9290, #b3bfbd 55%, #d5dada); }
.wl-theme-bar { position: absolute; top: 10px; left: 10px; right: 10px; height: 14px; background: rgba(255,255,255,.7); border-radius: 4px; }
.wl-theme-dot { position: absolute; bottom: 10px; left: 10px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.85); }
.wl-theme-name { font-size: var(--fs-3); font-weight: 700; margin-bottom: 2px; }
.wl-theme-desc { font-size: var(--fs-1); color: var(--text-sub); }

.wl-guide-steps { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; text-align: left; }
.wl-guide-step {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; background: var(--bg, rgba(255,255,255,.6));
  border: 1px solid var(--border); border-radius: var(--r-s);
}
.wl-guide-num {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
  background: var(--primary-dark); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-5);
}
.wl-guide-title { font-size: var(--fs-4); font-weight: 700; margin-bottom: 2px; }
.wl-guide-desc { font-size: var(--fs-2); color: var(--text-sub); line-height: 1.5; }

.welcome-actions {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 30px 18px; border-top: 1px solid var(--border);
  background: rgba(255,255,255,.5);
}
.welcome-dots { display: flex; gap: 6px; }
.welcome-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(0,0,0,.15); transition: all .2s;
}
.welcome-dot.on { background: var(--primary); width: 22px; border-radius: 4px; }

@media (max-width: 600px) {
  .wl-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .wl-form-grid { grid-template-columns: 1fr; }
  .wl-theme-row { flex-direction: column; align-items: center; }
  .welcome-content { padding: 40px 22px 24px; }
  .welcome-actions { padding: 12px 18px 16px; }
}

/* ══════════════════ v0.5.3 版本更新提示弹窗 ═══════════════════ */
.version-changelog-mask {
  position: fixed; inset: 0; z-index: 950; /* v0.8: 950 < .modal-mask(1000), 不压住后续业务弹窗 */
  background: rgba(10, 20, 50, .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  animation: wlMaskIn var(--dur-modal, 320ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
/* v0.5.7: 更新日志弹窗改为纯色卡片 + 80% 尺寸，不做色彩分块 */
.version-changelog-box {
  width: 80vw; max-width: 80vw; height: 80vh; max-height: 80vh;
  background: var(--glass-strong);
  border: 1px solid var(--hair); border-radius: var(--r-l);
  box-shadow: 0 16px 50px rgba(16, 24, 40,.22);
  display: flex; flex-direction: column; overflow: hidden;
  animation: wlBoxIn 420ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
.version-changelog-head {
  padding: 22px 26px 16px; text-align: center;
  background: var(--glass-strong);
  border-bottom: 1px solid var(--border);
}
/* v0.5.7: 青灰主题也用纯色 */
body.theme-plain .version-changelog-head {
  background: var(--glass-strong);
}
body.theme-plain .welcome-box,
body.theme-plain .version-changelog-box {
  background: var(--glass-strong);
}
.version-changelog-head .vc-logo { font-size: calc(var(--fs-8) * 3 / 2); margin-bottom: 6px; }
.version-changelog-head h2 { font-size: var(--fs-6); font-weight: 800; margin: 0; color: var(--text); }
.version-changelog-head .vc-version { font-size: var(--fs-2); color: var(--text-sub); margin-top: 4px; }
.version-changelog-body {
  flex: 1; overflow-y: auto; padding: 20px 26px;
  font-size: var(--fs-4); line-height: 1.7; color: var(--text);
}
.version-changelog-body ul { margin: 0; padding-left: 20px; }
.version-changelog-body li {
  margin-bottom: 8px;
  overflow-wrap: break-word;
  word-break: break-word;
  text-align: left;
}
.version-changelog-actions {
  padding: 14px 26px 18px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; justify-content: flex-end;
  background: var(--glass-strong);
}
.version-changelog-actions .vc-skip { font-size: var(--fs-2); color: var(--text-sub); cursor: pointer; }
.version-changelog-box.closing { animation: wlBoxOut 280ms var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1)) forwards; }

/* v0.5.7: 功能对比弹窗 — 与更新日志同款纯色卡片 */
.feature-compare-mask {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(10, 20, 50, .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  animation: wlMaskIn var(--dur-modal, 320ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.feature-compare-box {
  width: 80vw; max-width: 80vw; height: 80vh; max-height: 80vh;
  /* v0.8.10.7（老板：三端功能对比页面也不对）——原来是半透明玻璃面 + 遮罩模糊，
     背后的应用界面会透进表格里（看着像排版坏了）。对比表要读数字，改成**不透明卡面**。 */
  background: var(--card, #fff); border: 1px solid var(--hair); border-radius: var(--r-l);
  box-shadow: 0 16px 50px rgba(16, 24, 40,.22);
  display: flex; flex-direction: column; overflow: hidden;
  animation: wlBoxIn 420ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
.feature-compare-head {
  padding: 20px 26px 14px; text-align: center; background: var(--card, #fff);
  border-bottom: 1px solid var(--border);
}
.feature-compare-head .fc-logo { font-size: calc(var(--fs-8) * 4 / 3); margin-bottom: 4px; }
.feature-compare-head h2 { font-size: var(--fs-6); font-weight: 800; margin: 0; color: var(--text); }
.feature-compare-head .fc-sub { font-size: var(--fs-2); color: var(--text-sub); margin-top: 4px; }
.feature-compare-body {
  flex: 1; overflow-y: auto; padding: 16px 26px;
}
.fc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-3); }
.fc-table th, .fc-table td { border: 1px solid var(--hair); padding: 8px 12px; text-align: center; }
.fc-table th { background: #f5f6f8; font-size: var(--fs-2); color: var(--text-sub); }
.fc-table td.fn { text-align: left; }
/* v0.8.10.7: 长表可读性 —— 表头吸顶 + 隔行浅底 + 备注列左对齐 */
.fc-table thead th { position: sticky; top: 0; z-index: 1; background: #f2f4f8; }
.fc-table tbody tr:nth-child(even) { background: #fafbfd; }
.fc-table td:last-child { text-align: left; color: var(--text-sub); font-size: var(--fs-2); }
.fc-table .has { color: var(--ok); font-weight: 600; }
.fc-table .no { color: var(--danger); font-size: var(--fs-1); }
.fc-table .partial { color: var(--warn); font-weight: 600; }
.feature-compare-actions {
  padding: 12px 26px 16px; border-top: 1px solid var(--border);
  display: flex; justify-content: center; gap: 12px; background: var(--card, #fff);
}
.feature-compare-box.closing { animation: wlBoxOut 280ms var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1)) forwards; }

/* v0.5.7: 手机二维码悬浮窗 */
.qr-popover {
  position: absolute; bottom: 60px; left: 50px; z-index: var(--z-sticky);
  background: var(--glass-strong); border: 1px solid var(--hair); border-radius: var(--r-m);
  padding: 14px; box-shadow: var(--shadow-float); width: 200px;
  display: none;
}
.qr-popover.on { display: block; animation: wlMaskIn .2s ease; }
.qr-popover .qr-title { font-size: var(--fs-2); color: var(--text-sub); text-align: center; margin-bottom: 8px; font-weight: 600; }
.qr-popover .qr-box { width: 140px; height: 140px; margin: 0 auto; background: #f5f5f5; border: 1px solid var(--border); border-radius: var(--r-xs); display: flex; align-items: center; justify-content: center; }
.qr-popover .qr-box svg { width: 130px; height: 130px; }
.qr-popover .qr-tip { font-size: var(--fs-1); color: var(--text-light); text-align: center; margin-top: 8px; word-break: break-all; }

/* ═══ v0.5.8 v12预览: 导航栏 user-chip 卡片化 ═══ */
.side-user-card {
  display: flex; align-items: center; gap: 8px;
  padding: 10px; border-radius: var(--r-m);
  background: rgba(245,247,250,.6);
  border: none;   /* v0.8.9.1: 去深色描边 → 靠底色 + 轻投影分层 */
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  cursor: pointer; position: relative;
  flex-shrink: 0; overflow: hidden;
  transition: all .18s var(--ease-out, cubic-bezier(.22,.61,.36,1));
}
.side-user-card:hover { background: rgba(30,111,219,.06); box-shadow: 0 2px 8px rgba(16,24,40,.07); }
.side-user-card .suc-left {
  display: flex; align-items: center;
  flex-shrink: 0;
}
.side-user-card .suc-avatar-wrap {
  position: relative; width: 34px; height: 34px; flex-shrink: 0;
}
.side-user-card .suc-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #eaf2ff, #c8d8f0);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-6); line-height: 1; text-align: center;
  box-shadow: inset 0 0 0 1px rgba(30,111,219,.08);
}
/* 头像右下角共创者徽章角标 */
.side-user-card .suc-cc-dot {
  position: absolute; right: -2px; bottom: -2px;
  width: 15px; height: 15px; border-radius: 4px;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(16, 24, 40,.15);
  border: 1px solid var(--hair);
}
.side-user-card .suc-cc-dot .star { font-size: var(--fs-1); }
.side-user-card .suc-right {
  flex: 1; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 4px;
}
.side-user-card .suc-row1 {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  min-height: 20px;
}
.side-user-card .suc-name {
  font-size: var(--fs-3); font-weight: 800; color: var(--text, #1a2233);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0; line-height: 1.2;
}
.side-user-card .suc-row2 {
  display: flex; gap: 6px; align-items: center;
  overflow: hidden; min-height: 20px;
}
.side-user-card .suc-chip { font-size: var(--fs-1) !important; padding: 2px 6px !important; border-radius: var(--r-xs) !important; white-space: nowrap; flex-shrink: 0; line-height: 1.4 !important; }
/* v0.5.8: 积分预留6位+宽度, 防截断 */
.side-user-card .suc-pt-mini { min-width: 55px; text-align: center; font-variant-numeric: tabular-nums; }
/* v0.7.3: 第二行身份标签 */
.side-user-card .suc-role {
  font-size: var(--fs-1); color: var(--text-sub, #7c8593); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1;
}
/* v0.7.3.2: 行2 小号等级徽章(身份优先截断,徽章永远完整) */
.side-user-card .suc-lv-mini {
  font-size: var(--fs-1) !important; padding: 1px 4px !important; border-radius: 4px !important;
  flex-shrink: 0; line-height: 1.3 !important;
}
/* v0.5.8: 青灰主题徽章/等级色跟随 (导航栏选项卡) */
body.theme-plain .side-user-card .lv-badge[class*="serif-lv-"] { /* serif-lv-X 类自带青灰色,无需覆盖 */ }
body.theme-plain .side-user-card .suc-cc-dot[class*="serif-cc-"] { /* serif-cc-X 类自带青灰色 */ }
body.theme-plain .side-user-card .pt-chip { background: linear-gradient(135deg, #b3bfbd, var(--primary)); color: var(--text); border-color: #5e706e; }
/* v0.8.1: 小屏 icon 态 —— 用户卡自动折叠为头像图标；导航不出现上下滚动 */
@media (max-width: 1280px) {
  .app-shell .sidebar-nav { overflow: visible; padding: 6px 4px; }
  .app-shell .nav-item { padding: 7px 0; margin-bottom: 0; }
  .app-shell .side-user-card { flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; background: transparent; border-color: transparent; box-shadow: none; }
  .app-shell .side-user-card .suc-right,
  .app-shell .side-user-card .suc-sign-btn { display: none !important; }
  .app-shell .side-user-card .suc-avatar-wrap { margin: 0; }
}
@media (max-width: 768px) {
  .app-shell .sidebar-nav { overflow: visible; padding: 6px 4px; }
  .app-shell .nav-item { padding: 7px 0; margin-bottom: 0; }
}
/* 手动折叠态与上一致 */
.app-shell.nav-folded .sidebar-nav { overflow: visible; padding: 6px 4px; }
.app-shell.nav-folded .nav-item { padding: 7px 0; margin-bottom: 0; }
.app-shell.nav-folded .side-user-card { flex-direction: column; align-items: center; gap: 4px; padding: 4px 0; background: transparent; border-color: transparent; box-shadow: none; }
.app-shell.nav-folded .side-user-card .suc-right,
.app-shell.nav-folded .side-user-card .suc-sign-btn { display: none !important; }
/* v0.8.9.2/S7: 此处原有 `body.theme-plain .side-user-card .suc-sign-btn { border-color: var(--primary); color: var(--primary); }`
   —— 与文件后段同一条重复（同选择器、同特异性、同声明，后者恒胜）→ 已删除，只保留后段一条并加 `:not(.signed)`。 */
/* 签到按钮 — v0.7.3: 卡片右侧竖排（图标上文字下）; v0.7.3.1: 收窄避免挤压用户名 */
.side-user-card .suc-sign-btn {
  width: auto; min-width: 38px; min-height: 40px; padding: 5px 6px; border-radius: var(--r-xs);
  /* v0.8.9.1: 原 1.5px 主色描边在导航栏里呈"深色边框" → 改主题色浅底 + 深字 */
  background: rgba(var(--prgb), .10); border: none;
  color: var(--primary-ink);   /* v0.8.9.8(UI-06): 生色 → --primary-ink（11px/800 小字 serif 2.91→≥4.6） */
  font-size: var(--fs-1); font-weight: 800; line-height: 1.2;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  cursor: pointer; flex-shrink: 0; align-self: center; position: relative;
  transition: all .18s var(--ease-out, cubic-bezier(.22,.61,.36,1));
}
.side-user-card .suc-sign-btn:hover { background: rgba(30,111,219,.16); transform: scale(1.04); }
.side-user-card .suc-sign-btn.signed {
  /* v0.8.9.2/S7: 原 --ok(#2b8a3e) 压 12% 同色浅底仅 3.68:1 → 改用规范里的「文字专用加深色」--ok-ink */
  color: var(--ok-ink);
  background: rgba(46,158,84,.12);
}
.side-user-card .suc-sign-btn svg { width: 13px; height: 13px; }
.side-user-card .suc-sign-btn .dot-gold {
  position: absolute; top: 2px; right: 2px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold, #c8961e); display: none;
}
.side-user-card .suc-sign-btn .dot-gold.show {
  display: block; animation: signDotPulse 2s infinite;
}
/* 折叠态: user-chip 退化为纯头像 */
.app-shell.nav-folded .side-user-card {
  padding: 0; border: none; background: transparent;
  justify-content: center; width: 34px; height: auto;
  flex-direction: column; gap: 0;
  margin: 0 auto;
}
.app-shell.nav-folded .side-user-card .suc-left { display: flex; justify-content: center; }
.app-shell.nav-folded .side-user-card .suc-avatar-wrap { margin: 0 auto; }
.app-shell.nav-folded .side-user-card .suc-cc-dot { display: none !important; }
.app-shell.nav-folded .side-user-card .suc-right { display: none; }
.app-shell.nav-folded .side-user-card .suc-sign-btn { display: none; }
body.theme-plain .side-user-card { background: rgba(179,191,189,.12); border-color: var(--border); }
body.theme-plain .side-user-card:hover { background: rgba(123,146,144,.12); border-color: rgba(123,146,144,.3); }
/* v0.8.9.2/S7: 加 `:not(.signed)` —— 原写法同权重覆盖了上方 `.signed` 的 `--ok-ink`（serif 下实测仅 2.66:1）。
   未签到态行为不变（仍主色描边+主色字）。 */
body.theme-plain .side-user-card .suc-sign-btn:not(.signed) { border-color: var(--primary); color: var(--primary-ink); }   /* v0.8.9.8(UI-06): 生色 → --primary-ink，与主规则同口径 */

/* v0.5.8 v12预览: XP 条阴影 + 悬浮加粗 + 填充条发光 */
.xp-bar { box-shadow: inset 0 1px 3px rgba(20,30,60,.10); transition: height .2s ease, box-shadow .2s ease; }
.xp-bar:hover { height: 14px; box-shadow: inset 0 1px 3px rgba(20,30,60,.10), 0 0 12px rgba(30,111,219,.25); }
.xp-bar .xp-bar-fill { box-shadow: 0 0 8px rgba(30,111,219,.3); }
body.theme-plain .xp-bar:hover { box-shadow: inset 0 1px 3px rgba(20,30,60,.10), 0 0 12px rgba(123,146,144,.25); }
body.theme-plain .xp-bar .xp-bar-fill { box-shadow: 0 0 8px rgba(123,146,144,.3); }

/* v0.5.8 修复: 二维码悬浮窗向图标右侧展开 */
.qr-popover.qr-popover-new { position: fixed; }

/* v0.5.8 v12预览: 成长路径弹窗 grid */
.lv-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.lv-cell { text-align: center; padding: 8px 4px; border-radius: var(--r-s); border: 1px solid var(--hair); background: #f8fafc; font-size: var(--fs-1); box-shadow: var(--hi), var(--sh-1)}
.lv-cell .th { font-size: var(--fs-2); font-weight: 800; margin-bottom: 2px; }
.lv-cell.lv-1 { background: color-mix(in srgb, var(--primary) 15%, #fff); color: color-mix(in srgb, var(--primary) 72%, #000); border: 1px solid color-mix(in srgb, var(--primary) 32%, #fff); }
.lv-cell.lv-2 { background: color-mix(in srgb, var(--primary) 22%, #fff); color: color-mix(in srgb, var(--primary) 72%, #000); border: 1px solid color-mix(in srgb, var(--primary) 40%, #fff); }
.lv-cell.lv-3 { background: color-mix(in srgb, var(--primary) 29%, #fff); color: color-mix(in srgb, var(--primary) 72%, #000); border: 1px solid color-mix(in srgb, var(--primary) 48%, #fff); }
.lv-cell.lv-4 { background: color-mix(in srgb, var(--primary) 36%, #fff); color: color-mix(in srgb, var(--primary) 72%, #000); border: 1px solid color-mix(in srgb, var(--primary) 56%, #fff); }
.lv-cell.lv-5 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 66%, #fff), color-mix(in srgb, var(--primary) 78%, #000)); color: #fff; }
.lv-cell.lv-6 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 62%, #fff), color-mix(in srgb, var(--primary) 81%, #000)); color: #fff; }
.lv-cell.lv-7 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 58%, #fff), color-mix(in srgb, var(--primary) 84%, #000)); color: #fff; }
.lv-cell.lv-8 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 54%, #fff), color-mix(in srgb, var(--primary) 87%, #000)); color: #fff; }
.lv-cell.lv-9 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 50%, #fff), color-mix(in srgb, var(--primary) 90%, #000)); color: #fff; }
.lv-cell.lv-10 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 46%, #fff), color-mix(in srgb, var(--primary) 93%, #000)); color: #fff; }
.lv-cell.lv-11 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 42%, #fff), color-mix(in srgb, var(--primary) 96%, #000)); color: #fff; }
.lv-cell.lv-12 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 38%, #fff), color-mix(in srgb, var(--primary) 99%, #000)); color: #fff; }
.lv-cell.lv-13 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 88%, var(--gold))); color: #fff; }
.lv-cell.lv-14 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 76%, var(--gold))); color: #fff; }
.lv-cell.lv-15 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 64%, var(--gold))); color: #fff; }
.lv-cell.lv-16 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 52%, var(--gold))); color: #fff; }
.lv-cell.lv-17 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 40%, var(--gold))); color: #fff; }
.lv-cell.lv-18 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 28%, var(--gold))); color: #fff; }
.lv-cell.lv-19 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 16%, var(--gold))); color: #fff; }
.lv-cell.lv-20 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 4%, var(--gold))); color: #fff; }
.lv-cell.lv-21 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 50%, var(--gold)), var(--gold)); color: #fff; border: 1px solid color-mix(in srgb, var(--gold) 70%, #fff); }
.lv-cell.lv-22 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 40%, var(--gold)), var(--gold)); color: #fff; border: 1px solid color-mix(in srgb, var(--gold) 70%, #fff); }
.lv-cell.lv-23 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 30%, var(--gold)), var(--gold)); color: #fff; border: 1px solid color-mix(in srgb, var(--gold) 70%, #fff); }
.lv-cell.lv-24 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 20%, var(--gold)), var(--gold)); color: #fff; border: 1px solid color-mix(in srgb, var(--gold) 70%, #fff); }
.lv-cell.lv-25 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, var(--gold)), var(--gold)); color: #fff; border: 1px solid color-mix(in srgb, var(--gold) 70%, #fff); }
.lv-cell.lv-26 { background: linear-gradient(135deg, var(--gold), var(--primary), var(--gold)); color: #fff; border: 1px solid color-mix(in srgb, var(--gold) 60%, #fff); box-shadow: 0 0 3px color-mix(in srgb, var(--gold) 35%, transparent); }
.lv-cell.lv-27 { background: linear-gradient(135deg, var(--gold), var(--primary), var(--gold)); color: #fff; border: 1px solid color-mix(in srgb, var(--gold) 60%, #fff); box-shadow: 0 0 6px color-mix(in srgb, var(--gold) 35%, transparent); }
.lv-cell.lv-28 { background: linear-gradient(135deg, var(--gold), var(--primary), var(--gold)); color: #fff; border: 1px solid color-mix(in srgb, var(--gold) 60%, #fff); box-shadow: 0 0 9px color-mix(in srgb, var(--gold) 35%, transparent); }
.lv-cell.lv-29 { background: linear-gradient(135deg, var(--gold), var(--primary), var(--gold)); color: #fff; border: 1px solid color-mix(in srgb, var(--gold) 60%, #fff); box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 35%, transparent); }
.lv-cell.lv-30 { background: linear-gradient(135deg, var(--gold), var(--primary), var(--gold)); color: #fff; border: 1px solid color-mix(in srgb, var(--gold) 60%, #fff); box-shadow: 0 0 15px color-mix(in srgb, var(--gold) 35%, transparent); }
/* v0.5.8: 青灰主题 lv-cell 独立色 (不共用蓝金) */
.lv-cell.serif-lv-1 { background: color-mix(in srgb, var(--primary) 18%, #fff); color: color-mix(in srgb, var(--primary) 72%, #000); border:1px solid var(--border); }
.lv-cell.serif-lv-2 { background: color-mix(in srgb, var(--primary) 18%, #fff); color: color-mix(in srgb, var(--primary) 72%, #000); border:1px solid var(--border); }
.lv-cell.serif-lv-3 { background: color-mix(in srgb, var(--primary) 18%, #fff); color: color-mix(in srgb, var(--primary) 72%, #000); border:1px solid var(--border); }
.lv-cell.serif-lv-4 { background: color-mix(in srgb, var(--primary) 18%, #fff); color: color-mix(in srgb, var(--primary) 72%, #000); border:1px solid var(--border); }
.lv-cell.serif-lv-5 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, #fff), #989ca2); color:color-mix(in srgb, var(--primary) 72%, #000); }
.lv-cell.serif-lv-6 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, #fff), #888c96); color:color-mix(in srgb, var(--primary) 72%, #000); }
.lv-cell.serif-lv-7 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, #fff), #787c88); color:#fff; }
.lv-cell.serif-lv-8 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, #fff), #686c7a); color:#fff; }
.lv-cell.serif-lv-9 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, #fff), #585c70); color:#fff; }
.lv-cell.serif-lv-10 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, #fff), #4a5268); color:#fff; }
.lv-cell.serif-lv-11 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, #fff), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; }
.lv-cell.serif-lv-12 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, #fff), #3e5654); color:#fff; }
.lv-cell.serif-lv-13 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, #fff), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; }
.lv-cell.serif-lv-14 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; }
.lv-cell.serif-lv-15 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; }
.lv-cell.serif-lv-16 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, #fff), color-mix(in srgb, var(--primary) 72%, #fff)); color:#fff; }
.lv-cell.serif-lv-17 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; }
.lv-cell.serif-lv-18 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, #fff), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; }
.lv-cell.serif-lv-19 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; }
.lv-cell.serif-lv-20 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, #fff), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; border:1px solid var(--primary); }
.lv-cell.serif-lv-21 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 72%, #fff)); color:#fff; border:1px solid color-mix(in srgb, var(--primary) 72%, #fff); box-shadow: 0 0 4px rgba(123,146,144,.2); }
.lv-cell.serif-lv-22 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, #fff), var(--primary), color-mix(in srgb, var(--primary) 72%, #fff)); color:#fff; border:1px solid color-mix(in srgb, var(--primary) 72%, #fff); box-shadow: 0 0 6px rgba(123,146,144,.22); }
.lv-cell.serif-lv-23 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 72%, #fff), color-mix(in srgb, var(--primary) 72%, #fff)); color:#fff; border:1px solid color-mix(in srgb, var(--primary) 72%, #fff); box-shadow: 0 0 8px rgba(123,146,144,.25); }
.lv-cell.serif-lv-24 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, #fff), var(--primary), color-mix(in srgb, var(--primary) 72%, #fff), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; border:1px solid color-mix(in srgb, var(--primary) 72%, #fff); box-shadow: 0 0 10px rgba(123,146,144,.28); }
.lv-cell.serif-lv-25 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, #fff), var(--primary), color-mix(in srgb, var(--primary) 72%, #fff), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; border:1px solid var(--border); box-shadow: 0 0 6px rgba(123,146,144,.2); }
.lv-cell.serif-lv-26 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 72%, #fff), color-mix(in srgb, var(--primary) 72%, #fff)); color:#fff; border:1px solid var(--border); box-shadow: 0 0 8px rgba(123,146,144,.22); }
.lv-cell.serif-lv-27 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, #fff), var(--primary), color-mix(in srgb, var(--primary) 72%, #fff), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; border:1px solid var(--border); box-shadow: 0 0 10px rgba(123,146,144,.25); }
.lv-cell.serif-lv-28 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, #fff), var(--primary), color-mix(in srgb, var(--primary) 72%, #fff), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; border:2px solid var(--border); box-shadow: 0 0 12px rgba(123,146,144,.28); }
.lv-cell.serif-lv-29 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, #fff), color-mix(in srgb, var(--primary) 72%, #fff), var(--primary), color-mix(in srgb, var(--primary) 45%, #000), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; border:2px solid var(--border); box-shadow: 0 0 14px rgba(123,146,144,.32); }
.lv-cell.serif-lv-30 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, #fff), var(--primary), color-mix(in srgb, var(--primary) 72%, #fff), color-mix(in srgb, var(--primary) 45%, #000), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; border:2px solid var(--border); box-shadow: 0 0 16px rgba(123,146,144,.35), 0 0 20px rgba(123,146,144,.15); }
.cc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cc-cell { text-align: center; padding: 10px 4px; border-radius: var(--r-xs); border: 1px solid var(--border, #e4e7ee); background: #f8fafc; }

/* v0.5.8: 成长路径悬浮 popover */
.growth-popover {
  width: 620px; max-height: calc(100vh - 24px); overflow-y: auto; /* v0.8.4-fix: 原max-height:360+overflow:visible导致30级内容溢出卡片外 */
  background: #fff; border: 1px solid var(--border, #e4e7ee);
  border-radius: var(--r-m); box-shadow: 0 8px 28px rgba(20,30,60,.14);
  padding: 14px; z-index: 10000;
  animation: gpFadeIn .2s ease;
  scrollbar-width: thin;
}
@keyframes gpFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.growth-popover .gp-title { font-size: var(--fs-3); font-weight: 800; color: var(--text, #1a2233); margin-bottom: 10px; }
.growth-popover .gp-cols { display: flex; gap: 20px; position: relative; z-index: var(--z-base); }
.growth-popover .gp-col-left { flex: 1.4; min-width: 0; position: relative; z-index: 0; }
.growth-popover .gp-col-right { flex: 1; min-width: 200px; position: relative; z-index: var(--z-base); background: #fff; border: 1px solid var(--border, #e4e7ee); border-radius: var(--r-xs); padding: 10px; }
.growth-popover .gp-col-right h4 { font-size: var(--fs-2); font-weight: 700; margin: 0 0 8px; color: var(--text-sub, #5a6478); }
.growth-popover .gp-col-right table { width: 100%; border-collapse: collapse; font-size: var(--fs-1); }
.growth-popover .gp-col-right th, .growth-popover .gp-col-right td { border: 1px solid var(--border, #e4e7ee); padding: 5px 7px; text-align: left; }
.growth-popover .gp-col-right th { background: #f0f4fb; font-size: var(--fs-1); }
.growth-popover .gp-col-right .plus { color: var(--ok, #2e9e54); font-weight: 700; }
.growth-popover .gp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.growth-popover .gp-cc { gap: 6px; }
.growth-popover .cc-score { margin-top: 4px; font-size: var(--fs-1); color: var(--text-sub, #5a6478); }
/* 修复：成长路径弹窗内禁用 lv-cell 的 ::before 大纹路，避免覆盖异常 */
.growth-popover .lv-cell::before { display: none !important; }
body.theme-plain .growth-popover .lv-cell[class*="serif-lv-"] { position: relative; z-index: var(--z-base); }

/* v0.5.8: 积分 popover (fixed 悬浮, 非 modal) */
.pt-popover-fixed { position: fixed; width: 360px; max-height: 380px; overflow-y: auto; background:#fff; border:1px solid var(--border, #e4e7ee); border-radius:var(--r-m); box-shadow: 0 8px 28px rgba(20,30,60,.14); padding:16px; z-index: 10000; animation: gpFadeIn .2s ease; }
.pt-popover-fixed .pt-exchange-btn { display:inline-flex; align-items:center; gap:4px; padding:5px 12px; border-radius:var(--r-xs); background:linear-gradient(135deg,var(--gold, #c8961e),var(--gold-dark, #8a6510)); color:#fff; font-size:var(--fs-2); font-weight:600; border:none; cursor:pointer; }

/* ════════════════════════════════════════════════════════════════
   v0.5.8: 蓝金玻璃主题 + 青灰素银主题 等级/徽章/XP/签到 全套
   ════════════════════════════════════════════════════════════════ */

/* ── 蓝金主题: 用户等级 30 级 (矩形胶囊 6px, 蓝金渐进色相) ── */
.lv-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:var(--r-xs); font-size:var(--fs-1); font-weight:800; position:relative; overflow:hidden; }
.lv-1 { background: color-mix(in srgb, var(--primary) 15%, #fff); color: color-mix(in srgb, var(--primary) 72%, #000); border: 1px solid color-mix(in srgb, var(--primary) 32%, #fff); }
.lv-2 { background: color-mix(in srgb, var(--primary) 22%, #fff); color: color-mix(in srgb, var(--primary) 72%, #000); border: 1px solid color-mix(in srgb, var(--primary) 40%, #fff); }
.lv-3 { background: color-mix(in srgb, var(--primary) 29%, #fff); color: color-mix(in srgb, var(--primary) 72%, #000); border: 1px solid color-mix(in srgb, var(--primary) 48%, #fff); }
.lv-4 { background: color-mix(in srgb, var(--primary) 36%, #fff); color: color-mix(in srgb, var(--primary) 72%, #000); border: 1px solid color-mix(in srgb, var(--primary) 56%, #fff); }
.lv-5 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 66%, #fff), color-mix(in srgb, var(--primary) 78%, #000)); color:#fff; }
.lv-6 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 62%, #fff), color-mix(in srgb, var(--primary) 81%, #000)); color:#fff; }
.lv-7 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 58%, #fff), color-mix(in srgb, var(--primary) 84%, #000)); color:#fff; }
.lv-8 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 54%, #fff), color-mix(in srgb, var(--primary) 87%, #000)); color:#fff; }
.lv-9 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 50%, #fff), color-mix(in srgb, var(--primary) 90%, #000)); color:#fff; }
.lv-10 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 46%, #fff), color-mix(in srgb, var(--primary) 93%, #000)); color:#fff; }
.lv-11 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 42%, #fff), color-mix(in srgb, var(--primary) 96%, #000)); color:#fff; }
.lv-12 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 38%, #fff), color-mix(in srgb, var(--primary) 99%, #000)); color:#fff; }
.lv-13 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 88%, var(--gold))); color:#fff; }
.lv-14 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 76%, var(--gold))); color:#fff; }
.lv-15 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 64%, var(--gold))); color:#fff; }
.lv-16 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 52%, var(--gold))); color:#fff; }
.lv-17 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 40%, var(--gold))); color:#fff; }
.lv-18 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 28%, var(--gold))); color:#fff; }
.lv-19 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 16%, var(--gold))); color:#fff; }
.lv-20 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 4%, var(--gold))); color:#fff; }
.lv-21 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 50%, var(--gold)), var(--gold)); color:#fff; border:1px solid color-mix(in srgb, var(--gold) 70%, #fff); }
.lv-22 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 40%, var(--gold)), var(--gold)); color:#fff; border:1px solid color-mix(in srgb, var(--gold) 70%, #fff); }
.lv-23 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 30%, var(--gold)), var(--gold)); color:#fff; border:1px solid color-mix(in srgb, var(--gold) 70%, #fff); }
.lv-24 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 20%, var(--gold)), var(--gold)); color:#fff; border:1px solid color-mix(in srgb, var(--gold) 70%, #fff); }
.lv-25 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, var(--gold)), var(--gold)); color:#fff; border:1px solid color-mix(in srgb, var(--gold) 70%, #fff); }
.lv-26 { background: linear-gradient(135deg, var(--gold), var(--primary), var(--gold)); color:#fff; border:1px solid color-mix(in srgb, var(--gold) 60%, #fff); box-shadow: 0 0 3px color-mix(in srgb, var(--gold) 35%, transparent); }
.lv-27 { background: linear-gradient(135deg, var(--gold), var(--primary), var(--gold)); color:#fff; border:1px solid color-mix(in srgb, var(--gold) 60%, #fff); box-shadow: 0 0 6px color-mix(in srgb, var(--gold) 35%, transparent); }
.lv-28 { background: linear-gradient(135deg, var(--gold), var(--primary), var(--gold)); color:#fff; border:1px solid color-mix(in srgb, var(--gold) 60%, #fff); box-shadow: 0 0 9px color-mix(in srgb, var(--gold) 35%, transparent); }
.lv-29 { background: linear-gradient(135deg, var(--gold), var(--primary), var(--gold)); color:#fff; border:1px solid color-mix(in srgb, var(--gold) 60%, #fff); box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 35%, transparent); }
.lv-30 { background: linear-gradient(135deg, var(--gold), var(--primary), var(--gold)); color:#fff; border:1px solid color-mix(in srgb, var(--gold) 60%, #fff); box-shadow: 0 0 15px color-mix(in srgb, var(--gold) 35%, transparent); }

/* ── 蓝金主题: 共创者徽章 10 级 (圆胶囊 999px + ✦, 金色尊贵) ── */
.cc-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px 3px 5px; border-radius:var(--r-full); font-size:var(--fs-1); font-weight:700; position:relative; overflow:hidden; }
.cc-badge .star { font-size:var(--fs-1); }
.cc-1 { background: #f0ece4; color: #6e624d; border:1px solid #d8d0c0; }
.cc-2 { background: #e8dcc8; color: #665943; border:1px solid #c8b898; }
.cc-3 { background: #d8c8a8; color: #5a4c36; border:1px solid #b8a878; }
.cc-4 { background: linear-gradient(135deg, #d4a040, #c8961e); color:#fff; border:1px solid #b07c10; }
.cc-5 { background: linear-gradient(135deg, #c8961e, #b08410); color:#fff; border:1px solid #987208; }
.cc-6 { background: linear-gradient(135deg, #b08410, #987208); color:#fff; border:1px solid #806000; }
.cc-7 { background: linear-gradient(135deg, #c8961e, #1e6fdb, #d4a040); color:#fff; border:1px solid #c8961e; }
.cc-8 { background: linear-gradient(135deg, #1e6fdb, #c8961e, #d4a040); color:#fff; border:1px solid #ffd966; }
.cc-9 { background: linear-gradient(135deg, #c8961e, #1e6fdb, #d4a040, #ffd966); color:#fff; border:1px solid #ffd966; box-shadow: 0 0 6px rgba(200,150,30,.2); }
.cc-10 { background: linear-gradient(135deg, #ffd966, #c8961e, #1e6fdb, #d4a040); color:#fff; border:2px solid #ffd966; box-shadow: 0 0 10px rgba(200,150,30,.3), 0 0 16px rgba(30,111,219,.15); }

/* ── XP 进度条 ── */
.xp-bar-wrap { margin: 10px 0 6px; }
.xp-bar-head { display:flex; justify-content:space-between; font-size: var(--fs-1); color: var(--text-sub); margin-bottom:4px; }
.xp-bar { height: 10px; background:#eef1f6; border-radius:var(--r-xs); overflow:hidden; position:relative; }
.xp-bar-fill { height:100%; border-radius:var(--r-xs); transition: width .4s var(--ease-out, cubic-bezier(.22,.61,.36,1)); }
.xp-bar-tip { font-size: var(--fs-1); color: var(--text-light); margin-top:4px; }
.xp-bar.lv-1-fill .xp-bar-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 45%, #fff), color-mix(in srgb, var(--primary) 88%, #000)); }
.xp-bar.lv-2-fill .xp-bar-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 45%, #fff), color-mix(in srgb, var(--primary) 88%, #000)); }
.xp-bar.lv-3-fill .xp-bar-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 45%, #fff), color-mix(in srgb, var(--primary) 88%, #000)); }
.xp-bar.lv-4-fill .xp-bar-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 45%, #fff), color-mix(in srgb, var(--primary) 88%, #000)); }
.xp-bar.lv-5-fill .xp-bar-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 45%, #fff), color-mix(in srgb, var(--primary) 88%, #000)); }
.xp-bar.lv-6-fill .xp-bar-fill { background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #fff)); }
.xp-bar.lv-7-fill .xp-bar-fill { background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #fff)); }
.xp-bar.lv-8-fill .xp-bar-fill { background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #fff)); }
.xp-bar.lv-9-fill .xp-bar-fill { background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #fff)); }
.xp-bar.lv-10-fill .xp-bar-fill { background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #fff)); }
.xp-bar.lv-11-fill .xp-bar-fill { background: linear-gradient(90deg, var(--primary), var(--gold)); }
.xp-bar.lv-12-fill .xp-bar-fill { background: linear-gradient(90deg, var(--primary), var(--gold)); }
.xp-bar.lv-13-fill .xp-bar-fill { background: linear-gradient(90deg, var(--primary), var(--gold)); }
.xp-bar.lv-14-fill .xp-bar-fill { background: linear-gradient(90deg, var(--primary), var(--gold)); }
.xp-bar.lv-15-fill .xp-bar-fill { background: linear-gradient(90deg, var(--primary), var(--gold)); }
.xp-bar.lv-16-fill .xp-bar-fill { background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 65%, #000)); }
.xp-bar.lv-17-fill .xp-bar-fill { background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 65%, #000)); }
.xp-bar.lv-18-fill .xp-bar-fill { background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 65%, #000)); }
.xp-bar.lv-19-fill .xp-bar-fill { background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 65%, #000)); }
.xp-bar.lv-20-fill .xp-bar-fill { background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 65%, #000)); }
.xp-bar.lv-21-fill .xp-bar-fill { background: linear-gradient(90deg, var(--primary), var(--gold)); }
.xp-bar.lv-22-fill .xp-bar-fill { background: linear-gradient(90deg, var(--primary), var(--gold)); }
.xp-bar.lv-23-fill .xp-bar-fill { background: linear-gradient(90deg, var(--primary), var(--gold)); }
.xp-bar.lv-24-fill .xp-bar-fill { background: linear-gradient(90deg, var(--primary), var(--gold)); }
.xp-bar.lv-25-fill .xp-bar-fill { background: linear-gradient(90deg, var(--primary), var(--gold)); }
.xp-bar.lv-26-fill .xp-bar-fill { background: linear-gradient(90deg, var(--gold), var(--primary)); }
.xp-bar.lv-27-fill .xp-bar-fill { background: linear-gradient(90deg, var(--gold), var(--primary)); }
.xp-bar.lv-28-fill .xp-bar-fill { background: linear-gradient(90deg, var(--gold), var(--primary)); }
.xp-bar.lv-29-fill .xp-bar-fill { background: linear-gradient(90deg, var(--gold), var(--primary)); }
.xp-bar.lv-30-fill .xp-bar-fill { background: linear-gradient(90deg, var(--gold), var(--primary)); }

/* ── 青灰素银主题: 用户等级 30 级 (青绿色系 #7b9290 + 中国风大纹路) ── */
.serif-lv-1 { background: color-mix(in srgb, var(--primary) 18%, #fff); color: color-mix(in srgb, var(--primary) 72%, #000); border:1px solid var(--border); }
.serif-lv-2 { background: color-mix(in srgb, var(--primary) 18%, #fff); color: color-mix(in srgb, var(--primary) 72%, #000); border:1px solid var(--border); }
.serif-lv-3 { background: color-mix(in srgb, var(--primary) 18%, #fff); color: color-mix(in srgb, var(--primary) 72%, #000); border:1px solid var(--border); }
.serif-lv-4 { background: color-mix(in srgb, var(--primary) 18%, #fff); color: color-mix(in srgb, var(--primary) 72%, #000); border:1px solid var(--border); }
.serif-lv-5 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, #fff), #989ca2); color:color-mix(in srgb, var(--primary) 72%, #000); }
.serif-lv-6 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, #fff), #888c96); color:color-mix(in srgb, var(--primary) 72%, #000); }
.serif-lv-7 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, #fff), #787c88); color:#fff; }
.serif-lv-8 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, #fff), #686c7a); color:#fff; }
.serif-lv-9 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, #fff), #585c70); color:#fff; }
.serif-lv-10 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, #fff), #4a5268); color:#fff; }
.serif-lv-11 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, #fff), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; }
.serif-lv-12 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, #fff), #3e5654); color:#fff; }
.serif-lv-13 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, #fff), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; }
.serif-lv-14 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; }
.serif-lv-15 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; }
.serif-lv-16 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, #fff), color-mix(in srgb, var(--primary) 72%, #fff)); color:#fff; }
.serif-lv-17 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; }
.serif-lv-18 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, #fff), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; }
.serif-lv-19 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; }
.serif-lv-20 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, #fff), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; border:1px solid var(--primary); }
.serif-lv-21 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 72%, #fff)); color:#fff; border:1px solid color-mix(in srgb, var(--primary) 72%, #fff); box-shadow: 0 0 4px rgba(123,146,144,.2); }
.serif-lv-22 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, #fff), var(--primary), color-mix(in srgb, var(--primary) 72%, #fff)); color:#fff; border:1px solid color-mix(in srgb, var(--primary) 72%, #fff); box-shadow: 0 0 6px rgba(123,146,144,.22); }
.serif-lv-23 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 72%, #fff), color-mix(in srgb, var(--primary) 72%, #fff)); color:#fff; border:1px solid color-mix(in srgb, var(--primary) 72%, #fff); box-shadow: 0 0 8px rgba(123,146,144,.25); }
.serif-lv-24 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, #fff), var(--primary), color-mix(in srgb, var(--primary) 72%, #fff), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; border:1px solid color-mix(in srgb, var(--primary) 72%, #fff); box-shadow: 0 0 10px rgba(123,146,144,.28); }
.serif-lv-25 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, #fff), var(--primary), color-mix(in srgb, var(--primary) 72%, #fff), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; border:1px solid var(--border); box-shadow: 0 0 6px rgba(123,146,144,.2); }
.serif-lv-26 { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 72%, #fff), color-mix(in srgb, var(--primary) 72%, #fff)); color:#fff; border:1px solid var(--border); box-shadow: 0 0 8px rgba(123,146,144,.22); }
.serif-lv-27 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, #fff), var(--primary), color-mix(in srgb, var(--primary) 72%, #fff), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; border:1px solid var(--border); box-shadow: 0 0 10px rgba(123,146,144,.25); }
.serif-lv-28 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, #fff), var(--primary), color-mix(in srgb, var(--primary) 72%, #fff), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; border:2px solid var(--border); box-shadow: 0 0 12px rgba(123,146,144,.28); }
.serif-lv-29 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, #fff), color-mix(in srgb, var(--primary) 72%, #fff), var(--primary), color-mix(in srgb, var(--primary) 45%, #000), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; border:2px solid var(--border); box-shadow: 0 0 14px rgba(123,146,144,.32); }
.serif-lv-30 { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 72%, #fff), var(--primary), color-mix(in srgb, var(--primary) 72%, #fff), color-mix(in srgb, var(--primary) 45%, #000), color-mix(in srgb, var(--primary) 45%, #000)); color:#fff; border:2px solid var(--border); box-shadow: 0 0 16px rgba(123,146,144,.35), 0 0 20px rgba(123,146,144,.15); }

/* ── 青灰素银: 共创者徽章 10 级 (银青色系) ── */
.serif-cc-1 { background: #e8eae8; color: #5e645e; border:1px solid #d0d2d0; }
.serif-cc-2 { background: #dce0dc; color: #5a605a; border:1px solid #c0c4c0; }
.serif-cc-3 { background: #d0d4d2; color: #4a504a; border:1px solid #b0b4b2; }
.serif-cc-4 { background: linear-gradient(135deg, #b3bfbd, #98a4a2); color:#2a302a; border:1px solid #8a9694; }
.serif-cc-5 { background: linear-gradient(135deg, #98a4a2, #7b8c8a); color:#1a201a; border:1px solid #6a7c7a; }
.serif-cc-6 { background: linear-gradient(135deg, #7b8c8a, #5e706e); color:#fff; border:1px solid #4a5c5a; }
.serif-cc-7 { background: linear-gradient(135deg, #5e706e, #7b9290); color:#fff; border:1px solid #4a5c5a; }
.serif-cc-8 { background: linear-gradient(135deg, #7b9290, #5e7674, #b3bfbd); color:#fff; border:1px solid #7b9290; }
.serif-cc-9 { background: linear-gradient(135deg, #7b9290, #b3bfbd, #8aa8a4); color:#fff; border:1px solid #b3bfbd; box-shadow: 0 0 6px rgba(123,146,144,.2); }
.serif-cc-10 { background: linear-gradient(135deg, #b3bfbd, #7b9290, #8aa8a4, #e0e8e6); color:#3a403a; border:2px solid #e0e8e6; box-shadow: 0 0 10px rgba(123,146,144,.3), 0 0 16px rgba(123,146,144,.15); }

/* ── 青灰素银 XP 条 ── */
.xp-bar.serif-fill .xp-bar-fill { background: linear-gradient(90deg, #7b9290, #b3bfbd); }

/* ── 青灰素银 ::before 大纹路 (5-30级满铺胶囊) ── */
.serif-lv-5::before, .serif-lv-6::before, .serif-lv-7::before, .serif-lv-8::before,
.serif-lv-9::before, .serif-lv-10::before, .serif-lv-11::before, .serif-lv-12::before,
.serif-lv-13::before, .serif-lv-14::before, .serif-lv-15::before, .serif-lv-16::before,
.serif-lv-17::before, .serif-lv-18::before, .serif-lv-19::before, .serif-lv-20::before,
.serif-lv-21::before, .serif-lv-22::before, .serif-lv-23::before, .serif-lv-24::before,
.serif-lv-25::before, .serif-lv-26::before, .serif-lv-27::before, .serif-lv-28::before,
.serif-lv-29::before, .serif-lv-30::before,
.serif-cc-5::before, .serif-cc-6::before, .serif-cc-7::before, .serif-cc-8::before,
.serif-cc-9::before, .serif-cc-10::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none; z-index: 0; border-radius: inherit; overflow: hidden;
}
.serif-lv-5::before, .serif-lv-6::before, .serif-lv-7::before, .serif-lv-8::before,
.serif-cc-5::before, .serif-cc-6::before {
  background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,.12) 40%, rgba(255,255,255,.12) 50%, transparent 50%, transparent 65%, rgba(255,255,255,.08) 65%, rgba(255,255,255,.08) 75%, transparent 75%);
}
.serif-lv-9::before, .serif-lv-10::before, .serif-lv-11::before, .serif-lv-12::before,
.serif-cc-7::before {
  background: radial-gradient(ellipse 80% 60% at 30% 50%, rgba(255,255,255,.1), transparent),
              radial-gradient(ellipse 80% 60% at 70% 50%, rgba(255,255,255,.08), transparent);
}
.serif-lv-13::before, .serif-lv-14::before, .serif-lv-15::before, .serif-lv-16::before,
.serif-cc-8::before {
  background: radial-gradient(circle at 25% 30%, rgba(255,255,255,.12) 8%, transparent 9%),
              radial-gradient(circle at 75% 70%, rgba(255,255,255,.1) 8%, transparent 9%),
              radial-gradient(circle at 50% 50%, rgba(255,255,255,.06) 12%, transparent 13%);
}
.serif-lv-17::before, .serif-lv-18::before, .serif-lv-19::before, .serif-lv-20::before,
.serif-cc-9::before {
  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(255,255,255,.1) 22deg, transparent 45deg, rgba(255,255,255,.1) 67deg, transparent 90deg, rgba(255,255,255,.1) 112deg, transparent 135deg, rgba(255,255,255,.1) 157deg, transparent 180deg, rgba(255,255,255,.1) 202deg, transparent 225deg, rgba(255,255,255,.1) 247deg, transparent 270deg, rgba(255,255,255,.1) 292deg, transparent 315deg, rgba(255,255,255,.1) 337deg, transparent 360deg);
}
.serif-lv-21::before, .serif-lv-22::before, .serif-lv-23::before, .serif-lv-24::before,
.serif-lv-25::before, .serif-lv-26::before, .serif-lv-27::before, .serif-lv-28::before,
.serif-lv-29::before, .serif-lv-30::before,
.serif-cc-10::before {
  background: linear-gradient(0deg, rgba(255,255,255,.15) 1px, transparent 1px) 0 0 / 100% 100%,
              linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px) 0 0 / 100% 100%,
              linear-gradient(0deg, rgba(255,255,255,.1) 1px, transparent 1px) 25% 25% / 50% 50%,
              linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px) 25% 25% / 50% 50%,
              radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), transparent 70%);
}
.lv-badge, .cc-badge { position: relative; }
.lv-badge > *, .cc-badge > * { position: relative; z-index: var(--z-base); }

/* ── 积分 chip ── */
.pt-chip { display:inline-flex; align-items:center; padding:2px 8px; border-radius:var(--r-full); font-size:var(--fs-1); font-weight:700; background:linear-gradient(135deg,#fff7e6,#ffe9a8); color:#8a6510; border:1px solid #f0d878; }
body.theme-plain .pt-chip { background:linear-gradient(135deg,#b3bfbd,var(--primary)); color:var(--text); border:1px solid #5e706e; }

/* ── 签到按钮 (导航栏用户选项卡右上角) ── */
.sign-btn-mini { width:32px; height:32px; border-radius:50%; background:transparent; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color: var(--primary); position:relative; transition: all .18s var(--ease-out, cubic-bezier(.22,.61,.36,1)); }
.sign-btn-mini:hover { background: rgba(30,111,219,.10); transform: scale(1.08); }
.sign-btn-mini.signed { color: var(--text-light); }
body.theme-plain .sign-btn-mini { color: var(--primary); }
body.theme-plain .sign-btn-mini:hover { background: rgba(123,146,144,.12); }
.sign-btn-mini .dot-gold { position:absolute; top:2px; right:2px; width:8px; height:8px; border-radius:50%; background: var(--gold, #c8961e); display:none; }
.sign-btn-mini .dot-gold.show { display:block; animation: signDotPulse 2s infinite; }
@keyframes signDotPulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }

/* ── XP 条增加动画 ── */
@keyframes xp-flash { 0% { box-shadow: 0 0 0 rgba(46,158,84,0); } 30% { box-shadow: 0 0 16px rgba(46,158,84,.6); } 100% { box-shadow: 0 0 0 rgba(46,158,84,0); } }
.xp-bar.xp-gained { animation: xp-flash 1.2s ease-out; }
@keyframes xp-num-pop { 0% { transform: scale(1); } 50% { transform: scale(1.15); color: var(--ok, #2e9e54); } 100% { transform: scale(1); } }
.xp-num-anim { animation: xp-num-pop 0.8s ease-out; display:inline-block; }
@keyframes xp-fly { 0% { opacity:0; transform: translateY(0) scale(0.8); } 20% { opacity:1; transform: translateY(-10px) scale(1.1); } 80% { opacity:1; transform: translateY(-30px) scale(1); } 100% { opacity:0; transform: translateY(-50px) scale(0.8); } }
.xp-fly-text { position:absolute; font-size:var(--fs-4); font-weight:800; color:var(--ok, #2e9e54); pointer-events:none; animation: xp-fly 1.8s ease-out forwards; z-index: 99; }

/* ── 等级升级动画 ── */
@keyframes level-up-burst { 0% { transform: scale(1); } 30% { transform: scale(1.3); filter: brightness(1.5); } 60% { transform: scale(1.1); } 100% { transform: scale(1); filter: brightness(1); } }
.lv-badge.leveling-up { animation: level-up-burst 1.5s ease-out; }
@keyframes level-up-ring { 0% { opacity:0; transform: scale(0.5); } 50% { opacity:1; transform: scale(1.5); } 100% { opacity:0; transform: scale(2.5); } }
.level-up-ring { position:absolute; top:50%; left:50%; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%; border:3px solid var(--gold, #c8961e); pointer-events:none; animation: level-up-ring 1.5s ease-out forwards; }
@keyframes star-burst { 0% { opacity:0; transform: scale(0) rotate(0deg); } 50% { opacity:1; transform: scale(1.2) rotate(180deg); } 100% { opacity:0; transform: scale(0.5) rotate(360deg); } }
.star-burst { position:absolute; font-size:var(--fs-8); pointer-events:none; animation: star-burst 1.2s ease-out forwards; }

/* ── 签到弹窗动画 ── */
@keyframes sign-pop-in { 0% { opacity:0; transform: scale(0.7) translateY(20px); } 60% { opacity:1; transform: scale(1.05) translateY(0); } 100% { transform: scale(1); } }
.sign-pop-anim { animation: sign-pop-in 0.5s cubic-bezier(.34,1.56,.64,1); }
@keyframes confetti-fall { 0% { opacity:0; transform: translateY(-20px) rotate(0deg); } 20% { opacity:1; } 100% { opacity:0; transform: translateY(60px) rotate(360deg); } }
.confetti { position:absolute; width:8px; height:8px; border-radius:2px; pointer-events:none; animation: confetti-fall 1.5s ease-out forwards; }
@keyframes reward-count { 0% { opacity:0; transform: scale(0.5); } 50% { opacity:1; transform: scale(1.2); } 100% { transform: scale(1); } }
.reward-anim { animation: reward-count 0.8s ease-out 0.3s both; }

/* ── 个人信息面板 3 行布局 ── */
.up-profile { display:flex; gap:14px; align-items:flex-start; }
.up-avatar { width:54px; height:54px; border-radius:50%; background:linear-gradient(135deg,#eaf2ff,#c8d8f0); display:flex; align-items:center; justify-content:center; font-size: calc(var(--fs-8) * 13 / 12); flex-shrink:0; }
.up-info { flex:1; min-width:0; }
.up-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ── 统计卡删除右上角箭头 (v0.5.8 B) ── */
.stat-card::after { display: none !important; content: none !important; }

/* ── 焦点栏日期时间加全角空格 (v0.5.8 B2) ── */
.hero-card .hero-datetime { letter-spacing: 0.02em; }

/* ── 二维码悬浮窗左右列示 (v0.5.8 A) ── */
.qr-popover-new { background: var(--glass, rgba(255,255,255,.72)); backdrop-filter: var(--blur, blur(16px)); border:1px solid var(--hair); /* v0.8.9.48: 原多一个右括号 → 整条 border 声明无效，边框一直不渲染 */ border-radius: var(--r-m); box-shadow: var(--shadow, 0 6px 24px rgba(20,30,60,.12)); padding: 18px; }
.qr-popover-new .qr-title { font-size:var(--fs-4); font-weight:700; color: var(--text, #1a2233); margin-bottom: 12px; }
.qr-popover-new .qr-cols { display:flex; gap:16px; }
.qr-popover-new .qr-col { flex:1; text-align:center; padding:14px 10px 12px; border-radius:var(--r-s); border:1px solid var(--border, #e4e7ee); background:rgba(255,255,255,.55); }
.qr-popover-new .qr-col-icon { color: var(--text-sub, #5a6478); margin-bottom:6px; display:flex; justify-content:center; }
.qr-popover-new .qr-col-icon svg { width: 26px; height: 26px; }
.qr-popover-new .qr-col-name { font-size:var(--fs-3); font-weight:700; color: var(--text, #1a2233); margin:6px 0 4px; }
.qr-popover-new .qr-box { width:130px; height:130px; margin:8px auto; background:#f5f5f5; border:1px solid var(--border, #e4e7ee); border-radius:var(--r-xs); display:flex; align-items:center; justify-content:center; }
.qr-popover-new .qr-box svg { width:118px; height:118px; }
.qr-popover-new .qr-tip { font-size:var(--fs-1); color: var(--text-light, #98a2b3); margin-top: 6px; }
/* v0.8.9.7（老板：二维码弹窗里两个下载按钮没跟着按钮的颜色一起）：
   原用 --primary-dark 纯色 + 白字，与全站主按钮（--grad-primary 渐变 + --on-grad）不是一套。
   改为与 .btn-primary 同款渐变底，并同规则补齐 border:0 + background-origin:border-box（避免边缘端点色异常线）。 */
.qr-popover-new .dl-btn { display:inline-block; padding:8px 18px; border-radius:var(--r-xs); background:var(--grad-primary); background-origin:border-box; border:0; color:var(--on-grad); font-size:var(--fs-3); font-weight:600; cursor:pointer; text-decoration:none; margin-top: 4px; }
.qr-popover-new .dl-btn:hover { background: var(--grad-primary-hover); filter: none; }

/* ── 积分明细悬浮遮罩 ── */
.pt-popover { background:#fff; border:1px solid var(--border, #e4e7ee); border-radius:var(--r-s); box-shadow: 0 8px 28px rgba(20,30,60,.10); padding:14px; max-width:380px; }
.pt-popover .pt-head { display:flex; justify-content:space-between; align-items:center; padding-bottom:10px; border-bottom:1px solid var(--border, #e4e7ee); margin-bottom:8px; }
.pt-popover .pt-total { font-size: calc(var(--fs-8) * 11 / 12); font-weight:800; color: var(--gold-dark, #8a6510); }
.pt-popover .pt-list { max-height:280px; overflow-y:auto; }
.pt-popover .pt-item { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px dashed var(--border, #e4e7ee); }
.pt-popover .pt-item:last-child { border-bottom:none; }
.pt-popover .pt-reason { font-size:var(--fs-3); color: var(--text, #1a2233); }
.pt-popover .pt-time { font-size:var(--fs-1); color: var(--text-light, #98a2b3); margin-top:2px; }
.pt-popover .pt-delta { font-size:var(--fs-4); font-weight:800; }
.pt-popover .pt-delta.plus { color: var(--ok, #2e9e54); }
.pt-popover .pt-delta.minus { color: var(--danger, #e5484d); }

/* ── 共创者名单 tab 行 ── */
.co-creator-row { display:flex; align-items:center; gap:12px; padding:12px; border-bottom:1px solid var(--border, #e4e7ee); }
.co-creator-row:last-child { border-bottom:none; }
.co-creator-av { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#ffd980,#c8961e); display:flex; align-items:center; justify-content:center; font-size:var(--fs-6); font-weight:700; color:#fff; flex-shrink:0; }
.co-creator-info { flex:1; min-width:0; }
.co-creator-name { font-size:var(--fs-4); font-weight:700; color: var(--text, #1a2233); }
.co-creator-meta { font-size:var(--fs-1); color: var(--text-sub, #5a6478); margin-top:2px; }
.co-creator-score { font-size:var(--fs-3); font-weight:700; color: var(--gold-deep); margin-right:8px; }

/* ============================================================
   v0.6.1 成就完成弹窗（屏幕下方中央）
   ============================================================ */
.ach-popup {
  pointer-events: auto;
  display: flex; align-items: center; gap: 14px;
  min-width: 340px; max-width: 480px;
  padding: 14px 22px 14px 14px;
  border: 1.5px solid var(--gold);
  border-radius: var(--r-l);
  box-shadow: 0 12px 40px rgba(var(--grgb),.32), 0 2px 8px rgba(31,39,51,.1), 0 0 0 1px rgba(var(--grgb),.15) inset;
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  position: relative; overflow: hidden;
  animation: achPopIn var(--dur-modal, .32s) var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
  will-change: transform, opacity;
  --ach-color: var(--gold-deep); --ach-light: var(--gold-light); --ach-glow: #ffd97a; --ach-rgba: 217,154,6;
  background: linear-gradient(135deg, #fff 0%, #fffdf7 100%);
}
.ach-popup.rarity-b { --ach-color:#b07c4a; --ach-light:#f7efe6; --ach-glow:#d4a070; --ach-rgba:176,124,74; background:linear-gradient(135deg,#fff 0%,#faf3eb 100%); }
.ach-popup.rarity-s { --ach-color:#8b97a8; --ach-light:#eef1f5; --ach-glow:#b8c2d0; --ach-rgba:139,151,168; background:linear-gradient(135deg,#fff 0%,#f4f6f9 100%); }
.ach-popup.rarity-g { --ach-color: var(--gold-deep); --ach-light:var(--gold-light); --ach-glow:#ffd97a; --ach-rgba:217,154,6; background:linear-gradient(135deg,#fff 0%,#fffdf7 100%); }
.ach-popup.rarity-d { --ach-color:#7c5cff; --ach-light:#f8f6ff; --ach-glow:#b89aff; --ach-rgba:124,92,255; background:linear-gradient(135deg,#fff 0%,#faf8ff 100%); }
.ach-popup::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--ach-color),var(--ach-glow),var(--ach-color)); border-radius:2px 0 0 2px; }
.ach-popup::after { content:""; position:absolute; top:-40%; right:-20%; width:140px; height:140px; border-radius:50%; background:radial-gradient(circle,rgba(var(--ach-rgba),.20),transparent 65%); pointer-events:none; }
.ach-popup.closing { animation: achPopOut var(--dur-base,.26s) var(--ease-in-out,cubic-bezier(.65,0,.35,1)) forwards; }
.ach-popup .icon-wrap { width:48px; height:48px; flex:none; border-radius:var(--r-m); background:linear-gradient(135deg,var(--ach-light),#fef9ec); border:1.5px solid var(--ach-color); display:flex; align-items:center; justify-content:center; font-size: calc(var(--fs-8) * 13 / 12); animation: achIconSpin .5s var(--ease-spring,cubic-bezier(.34,1.56,.64,1)) .08s both; }
.ach-popup .body { flex:1; min-width:0; }
.ach-popup .tag { font-size:var(--fs-1); font-weight:800; letter-spacing:1.5px; color:var(--ach-color); text-transform:uppercase; display:flex; align-items:center; gap:4px; }
.ach-popup .tag::before { content:"🏆"; font-size:var(--fs-2); }
.ach-popup .title { font-size:var(--fs-5); font-weight:800; color:var(--text,#1f2733); margin-top:2px; display:flex; align-items:center; gap:6px; }
.ach-popup .title .rarity { font-size:var(--fs-1); padding:1px 7px; border-radius:var(--r-full); font-weight:800; }
.ach-popup .title .rarity.b { background:#f3e7d8; color:#b07c4a; }
.ach-popup .title .rarity.s { background:#eef1f5; color:#8b97a8; }
.ach-popup .title .rarity.g { background:var(--gold-light,var(--gold-light)); color: var(--gold-deep); }
.ach-popup .title .rarity.d { background:#efeaff; color:#7c5cff; }
.ach-popup .desc { font-size:var(--fs-2); color:var(--text-sub,#6b7686); margin-top:3px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.ach-popup .reward { display:flex; align-items:center; gap:8px; margin-top:4px; }
.ach-popup .reward .pts { font-size:var(--fs-4); font-weight:800; color:var(--ach-color); }
.ach-popup .reward .pts-label { font-size:var(--fs-1); color:var(--text-sub,#6b7686); }
.ach-popup .reward .badge-mark { font-size:var(--fs-1); font-weight:800; color:var(--ach-color); background:var(--ach-light); border:1px solid var(--ach-glow); border-radius:var(--r-full); padding:1px 8px; }
.ach-popup .close-x { position:absolute; top:8px; right:10px; font-size:var(--fs-4); color:var(--text-sub,#6b7686); cursor:pointer; opacity:.6; transition:opacity .18s; }
.ach-popup .close-x:hover { opacity:1; }
.ach-popup .progress { position:absolute; bottom:0; left:0; height:2px; background:var(--ach-color); animation: achProgress 4s linear forwards; }
.ach-spark { position:absolute; width:6px; height:6px; border-radius:50%; pointer-events:none; animation: achSparkFly 1s var(--ease-out,cubic-bezier(.22,.61,.36,1)) forwards; }
@keyframes achPopIn { 0%{transform:translateY(40px) scale(.85);opacity:0} 60%{transform:translateY(-4px) scale(1.02);opacity:1} 100%{transform:translateY(0) scale(1);opacity:1} }
@keyframes achPopOut { from{transform:translateY(0) scale(1);opacity:1} to{transform:translateY(20px) scale(.9);opacity:0} }
@keyframes achIconSpin { 0%{transform:rotate(-180deg) scale(0)} 60%{transform:rotate(20deg) scale(1.15)} 100%{transform:rotate(0) scale(1)} }
@keyframes achProgress { from{width:100%} to{width:0%} }
@keyframes achSparkFly { 0%{transform:translate(0,0) scale(1);opacity:1} 100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0} }
@media(max-width:560px){ .ach-popup{min-width:280px;max-width:92vw;padding:12px 16px 12px 12px} .ach-popup .icon-wrap{width:40px;height:40px;font-size: calc(var(--fs-8) * 11 / 12)} .ach-popup .title{font-size:var(--fs-4)} }

/* ===== v0.6.1: 用户详情卡（消息中心私聊点头像） ===== */
.user-detail-pop{position:fixed;background:#fff;border:1px solid var(--border);border-radius:var(--r-l);
  box-shadow:0 20px 50px rgba(31,39,51,.18),0 4px 12px rgba(31,39,51,.08);padding:20px;width:320px;z-index:26000;
  max-height:calc(100vh - 16px);overflow-y:auto;
  animation:udPopIn .32s cubic-bezier(.34,1.56,.64,1)}
@keyframes udPopIn{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:none}}
.user-detail-pop .ud-close{position:absolute;top:12px;right:14px;font-size:var(--fs-5);color:var(--text-light);cursor:pointer;opacity:.6}
.user-detail-pop .ud-close:hover{opacity:1}
.user-detail-pop .ud-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.user-detail-pop .ud-av{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size: calc(var(--fs-8) * 11 / 12);font-weight:800;flex:none}
.user-detail-pop .ud-name{font-size:var(--fs-5);font-weight:800}
.user-detail-pop .ud-role{font-size:var(--fs-1);color:var(--text-sub);margin-top:2px}
.user-detail-pop .ud-role-tag{display:inline-block;background:var(--primary-light);color: var(--primary);
  padding:1px 6px;border-radius:4px;margin-right:4px;font-size:var(--fs-1)}
.user-detail-pop .ud-stats{display:flex;justify-content:space-around;text-align:center;padding:14px 0;border-bottom:1px solid var(--border)}
.user-detail-pop .ud-stat b{display:block;font-size:var(--fs-7);font-weight:800}
.user-detail-pop .ud-stat:nth-child(1) b{color: var(--primary)}
.user-detail-pop .ud-stat:nth-child(2) b{color:var(--gold-dark)}
.user-detail-pop .ud-stat:nth-child(3) b{color:#7c5cff}
.user-detail-pop .ud-stat span{font-size:var(--fs-1);color:var(--text-sub)}
.user-detail-pop .ud-section{padding:14px 0;border-bottom:1px solid var(--border)}
.user-detail-pop .ud-section:last-child{border-bottom:none}
.user-detail-pop .ud-section h4{font-size:var(--fs-2);margin-bottom:8px;color:var(--text-sub);display:flex;justify-content:space-between}
.user-detail-pop .ud-section h4 span{color: var(--gold-deep);font-weight:800}
.user-detail-pop .ud-badge-grid{display:flex;gap:8px;flex-wrap:wrap}
.user-detail-pop .ud-badge{width:38px;height:38px;border-radius:var(--r-s);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-6);border:1.5px solid var(--border);background:#fff;position:relative;cursor:default}
.user-detail-pop .ud-badge.lit{border-color: var(--gold);background:var(--gold-light)}
.user-detail-pop .ud-badge.dim{opacity:.3;filter:grayscale(1)}
.user-detail-pop .ud-badge.pinned{border-color:#7c5cff;background:#f8f6ff}
.user-detail-pop .ud-pin{position:absolute;top:-6px;right:-6px;font-size:var(--fs-1);background:var(--primary-dark);color:#fff;
  border-radius:var(--r-full);padding:0 4px;font-weight:800}
.user-detail-pop .ud-ach-bar{height:6px;border-radius:var(--r-full);background:var(--bg-deep);overflow:hidden;margin-bottom:8px}
.user-detail-pop .ud-ach-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#ffd97a);border-radius:99px}
.user-detail-pop .ud-ach-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.user-detail-pop .ud-ach-cell{aspect-ratio:1;border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;font-size:var(--fs-3)}
.user-detail-pop .ud-ach-cell.lit{background:rgba(var(--grgb),.15);border:1px solid rgba(var(--grgb),.3)}
.user-detail-pop .ud-ach-cell.dia{background:rgba(124,92,255,.12);border:1px solid rgba(124,92,255,.3)}
.user-detail-pop .ud-ach-cell.dim{background:var(--bg-deep);opacity:.3}
@media(max-width:560px){.user-detail-pop{width:280px}}

/* ===== v0.6.1: 成就收藏柜样式（补全 grid/list 双视图） ===== */
#ach-root{padding:16px 18px 24px;max-width:1100px;margin:0 auto}
.ach-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.view-switch{display:inline-flex;background:var(--bg-deep);border-radius:var(--r-xs);padding:3px;gap:2px}
.view-switch button{border:none;background:transparent;padding:5px 12px;border-radius:var(--r-xs);font-size:var(--fs-2);color:var(--text-sub);cursor:pointer;font-weight:700}
.view-switch button.on{background:var(--card);color: var(--primary);box-shadow:0 1px 3px rgba(20,30,60,.08)}
.filter-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--r-full);background:var(--bg-deep);color:var(--text-sub);font-size:var(--fs-2);cursor:pointer;transition:all .15s}
.filter-chip.on{background:var(--primary-light);color:var(--primary-ink);font-weight:700}   /* v0.8.9.8(UI-05): 生色 → --primary-ink */
.filter-chip:hover{background:var(--primary-light)}
.stats-line{margin-left:auto;font-size:var(--fs-2);color:var(--text-sub);white-space:nowrap}
.stats-line b{color:var(--text);font-weight:800}
.cat-filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;padding-bottom:4px}
/* grid 模式 (v0.7.2.2: 格体缩小, hover 悬浮窗展示详情; 分类整组框体) */
.cabinet{display:flex;flex-direction:column;gap:20px}
.ach-frames{display:flex;flex-direction:column;gap:14px}
/* H-P2-6（人眼复核 11 号）：原为纯色 var(--card) 平涂、无 backdrop-filter → 与卡片同源玻璃 */
.ach-frame{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--hair);border-radius:var(--r-m);padding:14px 14px 16px;box-shadow:var(--hi),var(--sh-1)}
.cab-title{display:flex;align-items:center;gap:8px;font-size:var(--fs-4);font-weight:800;color:var(--text);margin-bottom:8px}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.slot{position:relative;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--hair);border-radius:var(--r-s);padding:8px 6px 7px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;box-shadow:var(--hi),var(--sh-1);transition:transform .12s,box-shadow .12s,border-color .12s;min-height:82px;cursor:pointer}
.slot:hover{transform:translateY(-1px);box-shadow:var(--hi),var(--sh-2);border-color:var(--primary)}
.slot:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.slot.dim{opacity:.5;background:var(--bg);filter:grayscale(.3)}
.slot .trophy{font-size:var(--fs-7);line-height:1;pointer-events:none}
.slot .sname{font-size:var(--fs-1);font-weight:700;color:var(--text);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;pointer-events:none}
.slot .slot-pts{font-size:var(--fs-1);font-weight:800;color: var(--gold-deep);pointer-events:none}
.slot .st.done{position:absolute;top:4px;right:4px;font-size:var(--fs-1);background:var(--ok-bg);color: var(--ok);padding:0 4px;border-radius:4px;font-weight:800}
/* v0.8.1: 最近完成点击定位后的高亮闪烁 */
.slot.ach-flash{border-color:var(--gold,var(--gold));animation:achFlash 1.5s var(--ease-out,cubic-bezier(.22,.61,.36,1))}
@keyframes achFlash{0%{box-shadow:0 0 0 0 rgba(var(--grgb),.45)}45%{box-shadow:0 0 0 5px rgba(var(--grgb),.28)}100%{box-shadow:0 0 0 0 rgba(var(--grgb),0)}}
/* 成就悬浮窗 */
.ach-tip{position:fixed;z-index:99999;background:rgba(24,30,42,.97);border:1px solid rgba(0,0,0,.28);border-radius:var(--r-m);padding:12px 14px;color:#e8ecf4;box-shadow:0 12px 34px rgba(10,15,30,.35);backdrop-filter:blur(10px);font-size:var(--fs-3);overflow-y:auto;pointer-events:none}
.ach-tip .tip-head{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.ach-tip .tip-ic{width:40px;height:40px;flex:none;border-radius:var(--r-s);background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:var(--fs-7)}
.ach-tip .tip-hd{flex:1;min-width:0}
.ach-tip .tip-name{font-size:var(--fs-4);font-weight:800;color:#fff;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ach-tip .tip-name em{font-style:normal;font-size:var(--fs-1);font-weight:800;padding:1px 7px;border-radius:99px}
.ach-tip .tip-name em.rarity-b{background:rgba(217,150,6,.2);color:#ffd97a}
.ach-tip .tip-name em.rarity-s{background:rgba(140,150,170,.25);color:#cdd6e2}
.ach-tip .tip-name em.rarity-g{background:rgba(var(--prgb),.22);color:#7fb1ff}
.ach-tip .tip-name em.rarity-d{background:rgba(124,92,255,.28);color:#c4a9ff}
.ach-tip .tip-cat{font-size:var(--fs-1);color:#9aa6b6;margin-top:3px}
.ach-tip .tip-sec{margin-bottom:8px}
.ach-tip .tip-lbl{font-size:var(--fs-1);font-weight:800;color:#7f8ca0;letter-spacing:.5px;margin-bottom:2px;text-transform:uppercase}
.ach-tip .tip-desc{font-size:var(--fs-3);color:#dbe2ec;line-height:1.55;word-break:break-word}
.ach-tip .tip-foot{font-size:var(--fs-2);font-weight:700;padding-top:8px;border-top:1px solid rgba(0,0,0,.22);margin-top:4px}
.ach-tip .tip-foot.done{color:#4cd08a}
.ach-tip .tip-foot.lock{color:#a7b1c1}
/* list 模式 */
.list-view{display:flex;flex-direction:column;gap:14px}
.lv-cat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.lv-cat-head{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;font-weight:800;font-size:var(--fs-4);color:var(--text);background:var(--bg-deep)}
.lv-cat-head .arrow{margin-left:auto;transition:transform .2s;font-size:var(--fs-1);color:var(--text-sub)}
.lv-cat-head.open .arrow{transform:rotate(90deg)}
.lv-items{display:none;flex-direction:column}
.lv-items.open{display:flex}
.lv-item{display:grid;grid-template-columns:34px 1fr auto auto auto;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border)}
.lv-item:last-child{border-bottom:none}
.lv-item .ic{width:30px;height:30px;border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;font-size:var(--fs-6);background:var(--bg-deep)}
.lv-item .ic.lit{background:var(--gold-light)}
.lv-item .ic.dia{background:#efeaff}
.lv-item .ic.dim{opacity:.4;filter:grayscale(1)}
.lv-item .nm{font-size:var(--fs-3);font-weight:700;color:var(--text)}
.lv-item .cd,.lv-item .eg{font-size:var(--fs-1);color:var(--text-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-item .eg{font-style:italic;opacity:.8}
.lv-item .rt{font-size:var(--fs-1);font-weight:800;padding:2px 7px;border-radius:var(--r-full);white-space:nowrap}
.lv-item .rt.b{background:#f3e7d8;color:#a06b3c}
.lv-item .rt.s{background:#eef1f5;color:#6d798a}
.lv-item .rt.g{background:var(--gold-light);color: var(--gold-deep)}
.lv-item .rt.d{background:#efeaff;color:#7c5cff}
.lv-item .pt{font-size:var(--fs-2);font-weight:800;color: var(--gold-deep);white-space:nowrap}
.lv-item .st{font-size:var(--fs-1);padding:2px 6px;border-radius:4px;white-space:nowrap}
.lv-item .st.done{background:var(--ok-bg);color: var(--ok)}
.lv-item .st.lock{background:var(--bg-deep);color:var(--text-sub)}
/* ===== v0.6.2 成就统计面板 + 徽章陈列 + 双栏清单 + 详情弹窗 ===== */
.cab-title .cnt{margin-left:auto;background:var(--bg-deep);color:var(--text-sub);border-radius:var(--r-full);padding:1px 10px;font-size:var(--fs-2);font-weight:700}
.ach-summary{display:grid;grid-template-columns:1fr 1.2fr;gap:16px;margin-bottom:18px}
.ach-sum-left,.ach-sum-right{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.ach-sum-title{font-size:var(--fs-3);font-weight:800;color:var(--text);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.ach-badge-cnt{font-size:var(--fs-1);color: var(--gold-deep);background:var(--gold-light);border-radius:var(--r-full);padding:1px 8px;font-weight:800}
.ach-sum-count b{font-size: calc(var(--fs-8) * 4 / 3);font-weight:800;color: var(--primary)}
.ach-sum-count span{font-size:var(--fs-4);color:var(--text-sub);margin-left:4px}
.ach-sum-count em{font-size:var(--fs-3);color: var(--gold-deep);margin-left:10px;font-style:normal;font-weight:800}
.ach-sum-bar{height:8px;border-radius:var(--r-full);background:var(--bg-deep);overflow:hidden;margin:10px 0 6px}
.ach-sum-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--gold));border-radius:var(--r-full);transition:width .3s}
.ach-sum-tip{font-size:var(--fs-1);color:var(--text-light)}
.ach-badge-grid{display:flex;flex-wrap:wrap;gap:10px}
.ach-badge{position:relative;width:44px;height:44px;border-radius:var(--r-m);display:flex;align-items:center;justify-content:center;font-size: calc(var(--fs-8) * 11 / 12);border:1.5px solid var(--border);background:var(--bg);cursor:pointer;transition:transform .12s,box-shadow .12s}
.ach-badge.lit{border-color: var(--gold);background:var(--gold-light);box-shadow:0 2px 6px rgba(var(--grgb),.18)}
.ach-badge.lit:hover{transform:translateY(-2px)}
.ach-badge.dim{opacity:.35;filter:grayscale(1);cursor:not-allowed}
.ach-badge.pinned{border-color:#7c5cff;background:#f8f6ff;box-shadow:0 0 0 2px rgba(124,92,255,.18)}
.ach-badge-pin{position:absolute;top:-6px;right:-6px;font-size:var(--fs-1);font-weight:800;background:#7c5cff;color:#fff;border-radius:var(--r-full);padding:1px 5px;line-height:1.2}
/* v0.6.3 最近完成 */
.ach-recent{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);margin-bottom:14px}
.ach-recent-title{font-size:var(--fs-3);font-weight:800;color:var(--text);margin-bottom:10px}
.ach-recent-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ach-recent-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);cursor:pointer;transition:transform .12s,box-shadow .12s}
.ach-recent-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-float);border-color: var(--gold)}
.ach-recent-ic{width:38px;height:38px;flex:none;border-radius:var(--r-s);background:var(--gold-light);display:flex;align-items:center;justify-content:center;font-size:var(--fs-7)}
.ach-recent-info{flex:1;min-width:0}
.ach-recent-name{font-size:var(--fs-3);font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ach-recent-time{font-size:var(--fs-1);color:var(--text-light);margin-top:2px}
/* v0.6.3 个人信息面板成就概览 */
.up-ach-sec{margin-top:10px;background:var(--bg-deep);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px}
.up-ach-head{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-3);font-weight:800;color:var(--text);margin-bottom:8px}
.up-ach-cnt{font-size:var(--fs-1);color: var(--gold-deep);background:var(--gold-light);border-radius:var(--r-full);padding:1px 8px;font-weight:800}
.up-ach-bar{height:6px;border-radius:var(--r-full);background:var(--card);overflow:hidden;margin-bottom:8px}
.up-ach-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--gold));border-radius:99px}
.up-ach-recents{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.up-ach-recent{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-xs);cursor:pointer;transition:border-color .12s}
.up-ach-recent:hover{border-color: var(--gold)}
.up-ach-ic{width:26px;height:26px;flex:none;border-radius:var(--r-xs);background:var(--gold-light);display:flex;align-items:center;justify-content:center;font-size:var(--fs-4)}
.up-ach-nm{font-size:var(--fs-2);font-weight:700;color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-ach-time{font-size:var(--fs-1);color:var(--text-light);white-space:nowrap}
.up-ach-pts{font-size:var(--fs-1);font-weight:800;color: var(--gold-deep);white-space:nowrap}
.up-ach-empty{font-size:var(--fs-2);color:var(--text-light);padding:4px 0 6px}
.up-ach-more{font-size:var(--fs-1);color: var(--primary);cursor:pointer;text-align:center;font-weight:700}
.up-ach-more:hover{text-decoration:underline}
.slot-pts{font-size:var(--fs-1);font-weight:800;color: var(--gold-deep)}
.ach-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.ach-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;cursor:pointer;box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s}
.ach-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-float)}
.ach-card.dim{opacity:.6;background:var(--bg)}
.ach-card .ac-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ach-card .ac-ic{font-size:var(--fs-6);flex:none}
.ach-card .ac-nm{font-size:var(--fs-4);font-weight:700;color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ach-card .ac-rt{font-size:var(--fs-1);font-weight:800;padding:2px 7px;border-radius:var(--r-full);white-space:nowrap}
.ach-card .ac-rt.b{background:#f3e7d8;color:#a06b3c}
.ach-card .ac-rt.s{background:#eef1f5;color:#6d798a}
.ach-card .ac-rt.g{background:var(--gold-light);color: var(--gold-deep)}
.ach-card .ac-rt.d{background:#efeaff;color:#7c5cff}
.ach-card .ac-pts{font-size:var(--fs-2);font-weight:800;color: var(--gold-deep);white-space:nowrap}
.ach-card .ac-desc{font-size:var(--fs-2);color:var(--text-sub);line-height:1.5;margin-bottom:6px}
.ach-card .ac-eg{font-size:var(--fs-1);color:var(--text-light);font-style:italic;margin-bottom:6px;padding:4px 8px;background:var(--bg-deep);border-radius:6px}
.ach-card .ac-foot{display:flex;align-items:center;gap:8px}
.ach-card .ac-st{font-size:var(--fs-1);padding:1px 7px;border-radius:4px;font-weight:700}
.ach-card .ac-st.done{background:var(--ok-bg);color: var(--ok)}
.ach-card .ac-st.lock{background:var(--bg-deep);color:var(--text-sub)}
.ach-card .ac-badge-tag{font-size:var(--fs-1);color:#7c5cff;background:#efeaff;padding:1px 7px;border-radius:4px;font-weight:700}
/* 成就详情弹窗 */
.ach-detail .ad-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ach-detail .ad-icon{width:52px;height:52px;flex:none;border-radius:var(--r-m);background:var(--bg-deep);display:flex;align-items:center;justify-content:center;font-size:28px}
.ach-detail .ad-title-wrap{flex:1;min-width:0}
.ach-detail .ad-name{font-size:var(--fs-5);font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px}
.ach-detail .ad-rarity{font-size:var(--fs-1);font-weight:800;padding:2px 8px;border-radius:99px}
.ach-detail .ad-rarity.b{background:#f3e7d8;color:#a06b3c}
.ach-detail .ad-rarity.s{background:#eef1f5;color:#6d798a}
.ach-detail .ad-rarity.g{background:var(--gold-light);color: var(--gold-deep)}
.ach-detail .ad-rarity.d{background:#efeaff;color:#7c5cff}
.ach-detail .ad-cat{font-size:var(--fs-2);color:var(--text-sub);margin-top:3px}
.ach-detail .ad-pts{font-size:var(--fs-7);font-weight:800;color:var(--gold-dark);text-align:center;flex:none}
.ach-detail .ad-pts span{display:block;font-size:var(--fs-1);color:var(--text-sub);font-weight:500}
.ach-detail .ad-section{margin-bottom:12px}
.ach-detail .ad-label{font-size:var(--fs-1);color:var(--text-sub);font-weight:700;margin-bottom:4px}
.ach-detail .ad-desc{font-size:var(--fs-3);color:var(--text);line-height:1.6}
.ach-detail .ad-eg{font-size:var(--fs-3);color:var(--text-sub);font-style:italic;padding:8px 10px;background:var(--bg-deep);border-radius:var(--r-xs);line-height:1.5}
.ach-detail .ad-eg.lock{color:var(--text-light);font-style:normal}
.ach-detail .ad-badge-link{font-size:var(--fs-3);color:#7c5cff;font-weight:700}
.ach-detail .ad-status{font-size:var(--fs-3);font-weight:700}
.ach-detail .ad-status.done{color: var(--ok)}
.ach-detail .ad-status.lock{color:var(--text-sub)}
/* 个人信息面板成就 chip */
.ach-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:var(--r-full);font-size:var(--fs-1);font-weight:700;background:linear-gradient(135deg,#eef4ff,#e0e9ff);color:#2563eb;border:1px solid #c7d8fe}
body.theme-plain .ach-chip{background:linear-gradient(135deg,#b3bfbd,var(--primary));color:var(--text);border:1px solid #5e706e}
@media(max-width:640px){
  .shelf{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
  .slot{min-height:76px;padding:6px 5px 6px}
  .slot .trophy{font-size:var(--fs-7)}
  .slot .sname{font-size:var(--fs-1)}
  .lv-item{grid-template-columns:30px 1fr auto;gap:8px}
  .lv-item .cd,.lv-item .eg{display:none}
  .ach-summary{grid-template-columns:1fr}
  .ach-card-grid{grid-template-columns:1fr}
  .ach-recent-grid{grid-template-columns:1fr}
}

/* ================= v0.7.2 视觉统一 & 资料库/个人页组件 ================= */
/* 统一「做悬浮的悬浮、做框体的框体」：所有页面级主卡统一玻璃+阴影 */
.content-scroll > .card,
.card-pad,
.profile-main,
.profile-side,
.recruit-card,
.settings-block {
  border-radius: var(--radius, var(--r-m));
}
/* 表内/弹窗内轻量卡：统一 hover 阴影 (仅可点击项) */
.mcard,
.recruit-card,
.ach-card,
.ach-recent-card,
.pf-item,
.mini-plan {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.mcard:hover,
.recruit-card:hover,
.ach-recent-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(20, 40, 80, .12);
}

/* 资料库宿主页（浏览器选项卡风格） */
.lib-wrap{background:var(--card,#fff);border:1px solid var(--border);border-radius:var(--r-m);overflow:hidden;box-shadow:var(--shadow)}
.lib-tabs{display:flex;gap:2px;background:var(--bg-deep,#eef1f5);padding:8px 8px 0 8px;border-bottom:1px solid var(--border);align-items:flex-end}
.lib-seg-btn{
  background:transparent;border:1px solid transparent;border-bottom:none;
  padding:9px 18px;border-radius:var(--r-xs) var(--r-xs) 0 0;font-size:var(--fs-4);font-weight:500;
  color:var(--text-sub);cursor:pointer;transition:.15s;display:flex;align-items:center;gap:6px;line-height:1;position:relative;top:1px;
}
.lib-seg-btn:hover{color:var(--primary);background:rgba(var(--prgb),.06)}
.lib-seg-btn.on{background:var(--card,#fff);color:var(--primary);font-weight:700;border-color:var(--border);box-shadow:0 -2px 4px rgba(20,40,80,.04)}
body.theme-plain .lib-seg-btn.on{background:var(--glass,#f5f5f2);color:var(--primary-dark)}
.lib-pane{padding:14px;min-height:240px}
.lib-tip{padding:8px 14px;font-size:var(--fs-2);color:var(--text-light);border-top:1px solid var(--border);background:var(--bg-deep,#f5f6f8)}
/* v0.8.1: 资料库页签移入 mfx-head — 段落按钮风格，页签固定 */
.mfx-head .lib-tabs{display:flex;gap:4px;align-items:center;background:transparent;padding:0;border-bottom:none;height:100%}
.mfx-head .lib-seg-btn{border-radius:var(--r-xs);border:1px solid transparent;padding:7px 16px;top:0;font-size:var(--fs-3)}
.mfx-head .lib-seg-btn.on{background:var(--primary-light);border-color:rgba(var(--prgb),.25);color:var(--primary);box-shadow:none}

/* ===== v0.8.1: 新手教学 coach mark — 遮罩打孔高亮真实界面 + 气泡解说 ===== */
.coach-spot {
  position: fixed; z-index: 3001; border-radius: var(--r-s); pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(15, 22, 38, .55), 0 0 0 3px var(--primary), 0 0 24px rgba(var(--prgb), .8);
  transition: all .35s var(--ease-spring);
}
.coach-bubble {
  position: fixed; z-index: 3002; width: 320px;
  background: var(--glass-strong); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--hair); border-radius: var(--r-m);
  box-shadow: 0 16px 48px rgba(10, 20, 50, .35); padding: 14px 16px;
  animation: coachBubbleIn .3s var(--ease-spring);
}
@keyframes coachBubbleIn { from { transform: scale(.94) translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.coach-bubble .cb-step { font-size: var(--fs-1); font-weight: 800; color: var(--primary); letter-spacing: 1px; }
.coach-bubble .cb-title { font-size: var(--fs-4); font-weight: 800; margin: 3px 0 5px; }
.coach-bubble .cb-desc { font-size: var(--fs-3); color: var(--text); line-height: 1.65; }
.coach-bubble .cb-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.coach-bubble .cb-dots { display: flex; gap: 5px; }
.coach-bubble .cb-dots i { width: 6px; height: 6px; border-radius: 50%; background: #d6dce6; transition: all .2s var(--ease-out); }
.coach-bubble .cb-dots i.on { background: var(--primary); width: 16px; border-radius: 4px; }
.coach-bubble .cb-btns { display: flex; gap: 8px; }

/* 约拍/邀约 弹窗：v0.8.1 特例档并入 L 档（原 min(960px,50vw) 收敛为 880 标准档） */
.modal.lib{width:min(880px, 94vw);max-width:96vw;max-height:92vh}
.recruit-modal-list{padding:6px 4px}
.recruit-h-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:calc(90vh - 180px);overflow-y:auto;padding:6px 4px}
.recruit-h-card{position:relative;background:var(--card,#fff);border:1px solid var(--border);border-radius:var(--r-s);padding:12px 14px;cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:6px}
.recruit-h-card:hover{border-color:var(--primary);box-shadow:0 4px 14px rgba(var(--prgb),.18);transform:translateY(-1px)}
.recruit-h-tags{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.recruit-h-title{font-weight:600;font-size:var(--fs-4);color:var(--text);line-height:1.4;word-break:break-all}
.recruit-h-meta{font-size:var(--fs-2);color:var(--text-sub);line-height:1.6}
.recruit-h-acts{display:flex;gap:6px;margin-top:6px;padding-top:6px;border-top:1px dashed var(--border)}
.recruit-h-acts.muted{font-size:var(--fs-2);color:var(--text-sub);font-weight:600}

/* 素材库批量模式勾选框 */
.mcard.batchable{cursor:pointer;position:relative}
.mcard.batchable .mat-check{
  position:absolute;top:8px;left:8px;z-index:5;width:24px;height:24px;border-radius:var(--r-xs);
  background:rgba(255,255,255,.92);border:2px solid #c3cbd8;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-3);color:transparent;transition:.12s;
}
.mcard.batchable.sel{border:2px solid var(--primary,var(--primary));box-shadow:0 6px 18px rgba(var(--prgb),.25)}
.mcard.batchable.sel .mat-check{background:var(--primary,var(--primary));border-color:var(--primary,var(--primary));color:#fff}
.mcard.batchable.readonly{opacity:.55;cursor:not-allowed}
.mcard.batchable.readonly .mat-check{background:#eceff5;border-color:#d5dae3;color:#636c7a}
.mat-select-all{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-3);color:var(--text-sub);padding:4px 8px;border:1px solid var(--border);border-radius:var(--r-xs);background:var(--card,#fff);cursor:pointer;user-select:none}
.mat-select-all input{margin:0}

/* 约拍：列表卡在弹窗内保持布局 */
#recruit-modal-body .recruit-grid{max-height:62vh;overflow-y:auto;padding-right:4px}



/* ===== v0.8.1 阅读舒适度：详情/弹窗/表单字号与间距放大（置于文件尾覆盖早前规则） ===== */
body { line-height: 1.62; }
.modal-body { font-size: var(--fs-4); line-height: 1.72; }
.modal-body label { font-size: var(--fs-3); }
.modal-body input,
.modal-body select,
.modal-body textarea { font-size: var(--fs-4); }
.modal-body .field { margin-bottom: 13px; }
.modal-body .hint { line-height: 1.7; }
.pc-meta, .pc-desc, .pd-detail, .detail-text { font-size: var(--fs-4); line-height: 1.8; }
.content-scroll { font-size: var(--fs-4); }
.label-row, .si-desc { font-size: var(--fs-3); line-height: 1.7; }

/* ===== v0.8.1 二轮（老板截图反馈）：紧凑化 + 工具栏固定 ===== */
/* ① 计划详情概览整合卡（视觉重点：信息卡大号加粗值） */
.pd-overview{background:rgba(255,255,255,.6);border:1px solid var(--border);border-radius:var(--r-s);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.pd-ov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:9px}
.pd-ov-item{background:rgba(255,255,255,.78);border:1px solid var(--hair);border-radius:var(--r-xs);padding:8px 12px;display:flex;flex-direction:column;gap:3px;min-width:0;box-shadow:0 1px 2px rgba(20,30,60,.04)}
.pd-ov-item .btn-link{flex-shrink:0}
.pd-ov-item b{font-size:var(--fs-5);font-weight:800;color:var(--text);line-height:1.4;word-break:break-all;display:flex;align-items:center;gap:6px}
.pd-ov-row{display:flex;flex-wrap:wrap;gap:6px 24px;align-items:center;font-size:var(--fs-3)}
.pd-ov-k{color:var(--text-sub);font-size:var(--fs-2);flex-shrink:0}
.pd-ov-collab{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:var(--fs-3);border-top:1px dashed var(--border);padding-top:8px}
/* v0.8.9.36（老板：按钮统一在最右对齐，中间留足协作者名片范围）——
   名片区吃满中间剩余宽度（允许换行、不被压缩到放不下），按钮区整体贴右且不参与拉伸。 */
.pd-ov-collab .pd-collab-chips{display:grid;grid-template-columns:repeat(auto-fill,150px);gap:8px;
  align-items:center;flex:1 1 320px;min-width:0}
.pd-ov-collab .pd-collab-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-left:auto;flex:0 0 auto}
/* v0.8.9.37（老板：每个缩略名片应该一样大才对）——
   固定 150px 列宽 + 单行截断 → 所有名片**等宽等高**，内容长短不再影响尺寸。 */
.pd-ov-collab .pd-collab-chips > .v92-mini{width:100%;max-width:none;min-width:0;box-sizing:border-box}
.pd-ov-collab .v92-mini{padding:6px 8px;gap:8px;height:52px}
.pd-ov-collab .v92-mini-av{width:32px;height:32px;flex-basis:32px;font-size:var(--fs-4)}
.pd-ov-collab .v92-mini-mid{overflow:hidden}
.pd-ov-collab .v92-mini-name{font-size:var(--fs-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.pd-ov-collab .v92-mini-name .v92-mini-owner{margin-left:4px}
.pd-ov-collab .v92-mini-meta{margin-top:2px;flex-wrap:nowrap;overflow:hidden}
.pd-ov-collab .v92-mini-role{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:inline-block}
/* 编辑模式概览卡：与展示页同位，仅查看变编辑 */
.pd-ov-grid.ed{grid-template-columns:repeat(12,1fr)}
.pd-ov-grid.ed .c3{grid-column:span 3}
.pd-ov-grid.ed .c4{grid-column:span 4}
.pd-ov-grid.ed .c12{grid-column:span 12}
/* 计划名称在标题位（自动生成可改） */
.mfx-head .pd-title-in{
  flex:1;min-width:0;font-size:var(--fs-5);font-weight:800;color:var(--text);
  background:transparent;border:none;border-bottom:1.5px dashed rgba(var(--prgb),.35);
  border-radius:0;padding:2px 6px;
}
.mfx-head .pd-title-in::placeholder{font-weight:600;color:var(--text-sub)}
.mfx-head .pd-title-in:hover{border-bottom-color:var(--primary)}
.mfx-head .pd-title-in:focus{background:#fff;border-bottom:1.5px solid var(--primary);border-radius:var(--r-xs) var(--r-xs) 0 0;box-shadow:none}
.pd-ov-item.pd-ed{gap:5px}
.pd-ov-item.pd-ed input,.pd-ov-item.pd-ed select,.pd-ov-item.pd-ed textarea{margin:0;width:100%}
.pd-ov-item.pd-ed textarea{min-height:0;resize:vertical}
.pd-ov-item.pd-ed .pd-ed-row{display:flex;gap:6px;align-items:center}
.pd-ov-item.pd-ed .pd-ed-row input{flex:1;min-width:0}
.pd-ov-item.pd-ed .wz-datetime-row,.pd-ov-item.pd-ed .wz-time-group{display:flex;gap:5px;align-items:center}
.pd-ov-item.pd-ed .chip-picker,.pd-ov-item.pd-ed .chips{display:flex;flex-wrap:wrap}
.pd-more{border-top:1px dashed var(--border);padding-top:8px;font-size:var(--fs-3)}
.pd-more summary{
  cursor:pointer;user-select:none;list-style:none;display:flex;align-items:center;gap:10px;
  font-size:var(--fs-4);font-weight:800;color:var(--text);
  background:rgba(var(--prgb),.07);border:1px solid rgba(var(--prgb),.22);border-radius:var(--r-xs);padding:9px 12px;
  transition:background var(--dur-base) var(--ease-out);
}
.pd-more summary::-webkit-details-marker{display:none}
.pd-more summary:hover{background:rgba(var(--prgb),.13)}
.pd-more[open] summary{background:rgba(var(--prgb),.13)}
.pd-more .pd-more-hint{font-size:var(--fs-2);font-weight:600;color:var(--primary-dark)}
.pd-more .pd-more-arrow{margin-left:auto;font-size:var(--fs-2);font-weight:700;color: var(--primary)}
.pd-more[open] .pd-more-arrow::after{content:''}
.pd-more-body{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;padding:10px 2px 0}
.pd-more-body .field{margin-bottom:6px}
/* ② 约拍广场 / 资料库：原工具栏进固定头，保持原生观感 */
.mfx-head .toolbar{flex:1;margin-bottom:0}
.mfx-head .toolbar input.grow{min-width:150px}
/* ③ 资料库工具栏固定槽 */
.lib-toolbar-slot{flex-shrink:0;padding:10px 14px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.45)}
.lib-toolbar-slot .toolbar{margin-bottom:0}
/* ④ 看板：卡片列可滚动但不显示滚动条 */
.kanban-col-body{scrollbar-width:none;-ms-overflow-style:none}
.kanban-col-body::-webkit-scrollbar{display:none;width:0;height:0}
/* ⑤ 成就顶部固定区压缩（约 1/3 高） */
.ach-top{padding:10px 16px 0}
.ach-top .ach-summary{grid-template-columns:minmax(220px,300px) 1fr;gap:10px;margin-bottom:8px}
.ach-top .ach-sum-left,.ach-top .ach-sum-right{padding:9px 12px;box-shadow:none}
.ach-top .ach-sum-count{margin:0 0 4px}
.ach-top .ach-sum-count b{font-size: calc(var(--fs-8) * 11 / 12)}
.ach-top .ach-sum-bar{margin-bottom:0}
.ach-top .ach-badge-grid{gap:6px}
.ach-top .ach-summary .ach-sum-title{margin-bottom:5px;font-size:var(--fs-2)}
.ach-recent-strip{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;margin-bottom:2px;padding:2px 0;scrollbar-width:none}
.ach-recent-strip::-webkit-scrollbar{display:none}
.ach-recent-chip{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:var(--fs-2);color:var(--text);background:var(--card);border:1px solid var(--border);border-radius:var(--r-full);padding:4px 11px;cursor:pointer;flex-shrink:0;transition:border-color .15s,transform .12s}
.ach-recent-chip:hover{border-color: var(--gold);transform:translateY(-1px)}
.ach-recent-chip i{font-style:normal;color: var(--gold-deep);font-weight:700}
/* ⑥ 个人页：恢复同高底齐（v0.8.2 铁律）— 卡片拉伸填满整列，内容垂直居中避免卡内底部大空白 */
/* v0.8.9.2 修（老板：「**没内容的时候卡片大小也变了**」，配图 0 作品 0 口碑）：
   原 `flex:1 1 0!important` 把左栏每张卡**拉伸填满列高**，再配 `justify-content:safe center`
   把内容在拉高的盒子里**垂直居中** → 内容少时上下各留一大片空（空态提示悬在中间）。
   改为 `flex:0 0 auto`（**贴内容**）并去掉居中 → **余量留在列尾，不进卡片内部**。 */
.pl-side>.card{flex:0 0 auto!important;overflow-y:auto!important;overflow-x:hidden!important;display:flex!important;flex-direction:column!important}
.pl-main>.pf-rep-card{flex:0 0 auto!important;min-height:0}
.pl-main>.pf-rep-card .pf-rep-body{overflow-y:auto;scrollbar-width:thin}
.pl-main>.pf-rep-card .pf-rep-body>.hint:only-child{display:flex;align-items:center;justify-content:center;flex:1}

/* v0.8.1: 资料库滚动区去顶 padding — 吸顶表头与搜索栏无缝贴合（padding 会把 sticky 表头顶下来一条缝） */
.lib-pane{padding:0 14px 14px}
.lib-pane>.card{margin-top:0}
.lib-pane>.toolbar{margin:0}

/* ==================== v0.8.3 UI 密度重构（2026-09-08 老板终审落地） ==================== */
/* ① 详情页顶栏 筹备/执行 切换 */
.view-seg{display:inline-flex;background:var(--bg-deep);border:1px solid var(--border);border-radius:var(--r-full);padding:2px;gap:2px}
.view-seg button{border:none;background:transparent;border-radius:var(--r-full);padding:4px 14px;font-size:var(--fs-3);color:var(--text-sub);cursor:pointer;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast)}
.view-seg button.on{background:var(--grad-primary);background-origin:border-box;color:var(--on-grad);box-shadow:0 2px 8px rgba(var(--prgb),.35)}
/* ⑨⑫ 概览放大为页面主信息（ov-hero，筹备/执行共用） */
.pd-overview.ov-hero{padding:18px 20px;gap:14px;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--hair);box-shadow:var(--shadow)}
.pd-overview.ov-hero .pd-ov-item{padding:12px 16px;gap:5px}
.pd-overview.ov-hero .pd-ov-item b{font-size:var(--fs-6)}
.pd-overview.ov-hero .pd-ov-k{font-size:var(--fs-3)}
.pd-overview.ov-hero .pd-ov-row{font-size:var(--fs-4);line-height:1.7}
.ov-cd{display:inline-flex;align-items:center;background:var(--gold-light);color: var(--gold-deep);border:1px solid #f0e2bb;border-radius:var(--r-full);padding:2px 11px;font-size:var(--fs-2);font-weight:700}
/* ② 分镜编辑器五分区标题 */
.sgroup-head{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:var(--fs-3);font-weight:700;color:var(--text);margin:10px 0 2px;padding-top:10px;border-top:1px dashed var(--border)}
.sgroup-head:first-child{border-top:none;padding-top:0;margin-top:0}
.sgroup-head .sg-sub{font-size:var(--fs-2);font-weight:400;color:var(--text-sub)}
/* ③ 视频参数折叠条 */
.shot-video-fold{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin-top:10px;padding:9px 12px;border:1px dashed var(--border);border-radius:var(--r-xs);background:#f8f8f5;color:var(--text-sub);font-size:var(--fs-3);cursor:pointer;width:100%;text-align:left;transition:border-color var(--dur-fast),color var(--dur-fast)}
.shot-video-fold:hover{border-color:var(--primary);color:var(--primary)}
.shot-video-fold.open{border-style:solid;border-color:var(--primary);color: var(--primary)}
/* ④ 拖拽手柄 / 自动保存状态点 */
.shot-drag{cursor:grab;color:#b6bdc9;font-size:var(--fs-5);padding:0 2px;user-select:none;align-self:center;flex-shrink:0}
.shot-drag:hover{color:var(--primary)}
.shot-card.dragging{opacity:.45}
.shot-card.drag-over{border-color:var(--primary);box-shadow:0 0 0 2px rgba(var(--prgb),.25)}
.save-dot{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-1);color: var(--ok);flex-shrink:0;white-space:nowrap}
.save-dot i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block}
.save-dot.saving{color: var(--warn)}
.save-dot.saving i{background:var(--warn);animation:savePulse 1s infinite}
.save-dot.dirty{color:var(--text-sub)}
.save-dot.dirty i{background:var(--text-sub)}
@keyframes savePulse{0%,100%{opacity:1}50%{opacity:.35}}
/* ⑩ 分镜折叠态收成辅助信息行 */
.shot-card.shot-mini{display:flex;align-items:center;gap:10px;padding:7px 12px;margin-bottom:6px;background:rgba(255,255,255,.55);box-shadow:none;border-radius:9px}
.shot-mini .sm-no{font-size:var(--fs-1);color:var(--text-sub);font-weight:700;flex-shrink:0}
.shot-mini .sm-name{font-size:var(--fs-3);font-weight:600;white-space:nowrap;flex-shrink:0;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.shot-mini .sm-meta{font-size:var(--fs-2);color:var(--text-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.shot-mini .sm-ops{flex-shrink:0;display:flex;gap:4px;align-items:center}
.shot-mini .sm-ops .btn{padding:2px 8px;font-size:var(--fs-2)}
/* ⑬ 详情页不整页滚：分镜列表内部细滚 */
.detail-body-noscroll{overflow:hidden;display:flex;flex-direction:column}
.detail-body-noscroll .shots-zone{flex:1;min-height:0;display:flex;flex-direction:column;margin-top:16px}
.detail-body-noscroll .shots-zone-head{margin:0 0 10px;flex-shrink:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.detail-body-noscroll .shots-list{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin}
.detail-body-noscroll .shots-list::-webkit-scrollbar{width:6px}
.detail-body-noscroll .shots-list::-webkit-scrollbar-thumb{background:rgba(20,30,60,.16);border-radius:3px}
.detail-body-noscroll .shots-list::-webkit-scrollbar-track{background:transparent}
/* ⑫ 执行视图分镜卡 */
.exec-shot{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:var(--r-s);padding:10px 12px;margin-bottom:8px;box-shadow:var(--shadow);cursor:pointer;transition:border-color var(--dur-fast)}
.exec-shot:hover{border-color:var(--primary)}
.exec-ref{width:86px;height:64px;border-radius:var(--r-xs);background:linear-gradient(135deg,#dfe6f0,#c9d4e4);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#8a94a5;font-size:var(--fs-1);overflow:hidden}

/* ══════════ v0.8.9.40：固定尺寸图片帧的优先级修正 ══════════
   老板实拍截图：执行视图「分镜方案」的参考图被撑成整行巨图（覆盖页面）。
   根因：`v0892_ratio.css`（**在 style.css 之后加载**）的
        `.v92-frame{ width: var(--v92-frame-w, 100%); aspect-ratio: var(--ar, 3/2) }`
        与下面这些「固定像素尺寸」的业务类**同优先级**（都只有 1 个类）→ 后加载者胜，
        帧于是变成「整行宽 + 3:2」，里面的图按全宽铺开。
   修法：固定尺寸帧用 `.v92-frame.xxx`（2 个类）压过去，并显式 aspect-ratio:auto 关掉比例撑高。 */
.v92-frame.exec-ref { width: 86px; height: 64px; flex: 0 0 86px; aspect-ratio: auto; }
.v92-frame.shot-ref { width: 96px; height: 66px; flex: 0 0 96px; aspect-ratio: auto; }
/* 参考位保持自己的 4:3（原 .ref-slot{aspect-ratio:4/3} 同样被 .v92-frame 的 3:2 覆盖） */
.v92-frame.ref-slot { aspect-ratio: 4 / 3; }
.exec-ref img{width:100%;height:100%;object-fit:cover}
.exec-shot .es-t{font-weight:700;font-size:var(--fs-4)}
.exec-shot .es-m{font-size:var(--fs-2);color:var(--text-sub);margin-top:2px}
.exec-shot .es-l{font-size:var(--fs-2);color: var(--warn);margin-top:2px}
.exec-cta{display:flex;gap:10px;margin-top:12px}
/* ⑪ 看板卡片等高同构：槽位固定，缺信息淡显占位 */
.pc-meta-item{min-height:20px}
.dim{opacity:.38}
.pc-badges{min-height:24px}
.pc-tags{min-height:22px}
.pc-people{min-height:28px}
/* ⑥ 首页「近期档期」卡：14 天窗口 */
.heat14{display:flex;gap:4px}
.heat14 .h-cell{flex:1;border-radius:var(--r-xs);padding:6px 2px;text-align:center;background:var(--bg-deep);border:1px solid var(--border);font-size:var(--fs-1);color:var(--text-sub);cursor:pointer;transition:border-color var(--dur-fast)}
.heat14 .h-cell:hover{border-color:var(--primary)}
.heat14 .h-cell .h-d{font-weight:700;font-size:var(--fs-3);color:var(--text)}
.heat14 .h-cell.busy{background:var(--primary-light);border-color:#c4d9fb}
.heat14 .h-cell.today{outline:2px solid var(--primary);outline-offset:-2px}
.heat14 .h-pip{display:inline-block;width:6px;height:6px;border-radius:50%;margin:2px 1px 0}
/* v0.8.3: 编辑器分镜卡折叠态 → 辅助行（复用 sm-* 样式） */
.shot-card .sm-row{display:none}
.shot-card.folded{display:flex;align-items:center;gap:10px;padding:7px 12px}
.shot-card.folded .shot-no,.shot-card.folded .shot-tags-bar,.shot-card.folded .shot-head,.shot-card.folded .shot-body{display:none}
.shot-card.folded .sm-row{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.sm-row .sm-no{font-size:var(--fs-1);color:var(--text-sub);font-weight:700;flex-shrink:0}
.sm-row .sm-name{font-size:var(--fs-3);font-weight:600;white-space:nowrap;flex-shrink:0;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.sm-row .sm-meta{font-size:var(--fs-2);color:var(--text-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.sm-row .sm-ops{flex-shrink:0;display:flex;gap:4px;align-items:center}
.sm-row .sm-ops .btn{padding:2px 8px;font-size:var(--fs-2)}
/* v0.8.3: 概览行模特须知换行 */
.pd-ov-row span{min-width:0}
/* v0.8.3: 看板 meta 槽位 2×2 grid — 恒两行，卡片等高（长值省略号截断） */
.plan-card .pc-meta{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px}
.pc-meta-item{overflow:hidden}
/* v0.8.3: 器材库勾选批量操作条（滚动区吸底） */
.gear-batchbar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:10px;background:var(--glass-strong);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--hair);border-radius:var(--r-s);padding:8px 14px;margin-top:10px;box-shadow:var(--shadow-float);font-size:var(--fs-3)}
/* v0.8.3: 资料库页签 — 浏览器式左中右整宽三段，抬高、无分割、激活页与内容相连 */
.mfx-head .lib-tabs{display:flex;gap:0;align-items:stretch;background:transparent;padding:0;border-bottom:none;height:100%;flex:1}
.mfx-head .lib-seg-btn{flex:1;max-width:260px;border-radius:var(--r-s) var(--r-s) 0 0;border:1px solid transparent;border-bottom:none;padding:10px 16px;font-size:var(--fs-4);display:inline-flex;align-items:center;justify-content:center;gap:6px;color:var(--text-sub);background:transparent;margin-bottom:-1px;position:relative;top:1px;transition:background var(--dur-fast),color var(--dur-fast)}
.mfx-head .lib-seg-btn:hover{color:var(--primary);background:rgba(var(--prgb),.05)}
.mfx-head .lib-seg-btn.on{background:var(--card,#fff);color:var(--primary);font-weight:700;border-color:var(--border);border-bottom-color:transparent;box-shadow:0 -2px 6px rgba(20,40,80,.05)}
body.theme-plain .mfx-head .lib-seg-btn.on{background:var(--glass,#f5f5f2);color:var(--primary-dark);border-bottom-color:transparent}
.mfx-head .lib-seg-btn{padding:12px 16px}
/* v0.8.3: 成就页宽屏自适应 — 取消 1100px 上限满幅铺开；最近完成胶囊整行显示并允许换行不截断 */
#ach-root{max-width:none;padding:14px 18px 22px}
.ach-top .ach-recent-strip{grid-column:1/-1;flex-wrap:wrap;overflow-x:visible;overflow-y:auto;max-height:66px}
.ach-top .ach-recent-chip{white-space:normal;line-height:1.5;max-width:100%}
/* v0.8.3 修复: 看板 meta 改整行四行制 — 倒计时徽章不再被半列宽截断，卡片仍等高 */
.plan-card .pc-meta{display:flex;flex-direction:column;gap:3px}
.pc-meta-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* v0.8.3 调整: 看板 meta 时间/地点占整行，角色+模特左右分栏同一行 → 卡片压短，一列可现 3 张卡 */
.plan-card .pc-meta{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px}
.plan-card .pc-meta-item:first-child,.plan-card .pc-meta-item:nth-child(2){grid-column:1/-1}
/* v0.8.3 调整续: 看板卡内距收紧 — 800px 高窗口一列可见 3 张卡 */
.plan-card{padding:10px 12px}
.plan-card .pc-badges{margin-bottom:4px}
.plan-card .pc-tags{min-height:20px}
.plan-card .pc-people{margin-top:4px;padding-top:4px;min-height:24px}
.plan-card .pc-meta{gap:2px 10px}
.plan-card .pc-meta-item{min-height:18px}
/* v0.8.3 调整三档: 再收 12px — 800px 高窗口稳定 3 张 */
.plan-card{padding:9px 12px}
.plan-card .pc-meta{gap:2px 10px}
.plan-card .pc-meta-item{min-height:17px}
.plan-card .pc-badges{margin-bottom:3px;min-height:20px}
.plan-card .pc-tags{min-height:18px}
.plan-card .pc-people{margin-top:3px;padding-top:3px;min-height:22px}
/* v0.8.3 调整四档: 段间 margin 收紧（pc-top 6→4 / pc-meta 7→4 / 行距 1.4 / 人员胶囊瘦一圈） */
.plan-card .pc-top{margin-bottom:4px}
.plan-card .pc-meta{margin-bottom:4px;line-height:1.4}
.plan-card .pc-person{padding:1px 6px}
/* v0.8.3 调整五档: 行距回放宽 — 目标卡高 ~220px */
.plan-card{padding:10px 12px}
.plan-card .pc-top{margin-bottom:5px}
.plan-card .pc-meta{gap:5px 10px;margin-bottom:5px;line-height:1.5}
.plan-card .pc-meta-item{min-height:20px}
.plan-card .pc-badges{margin-bottom:5px;min-height:23px}
.plan-card .pc-tags{min-height:21px}
.plan-card .pc-people{margin-top:5px;padding-top:5px;min-height:27px}
.plan-card .pc-person{padding:2px 7px}
/* v0.8.3 调整六档: 微调至 ~220px */
.plan-card .pc-meta{gap:6px 12px}
.plan-card .pc-meta-item{min-height:22px}
.plan-card .pc-badges{min-height:24px}
.plan-card .pc-people{min-height:28px}
.plan-card .pc-meta-item{min-height:24px}
/* v0.8.3 调整七档: 220px 总高不变，行距重新分配 — 四行信息行加高加大字，装饰行收紧 */
.plan-card .pc-meta{font-size:var(--fs-3);line-height:1.55;gap:7px 12px}
.plan-card .pc-meta-item{min-height:28px}
.plan-card .pc-badges{min-height:20px;margin-bottom:4px}
.plan-card .pc-tags{min-height:18px}
.plan-card .pc-people{min-height:24px;margin-top:4px;padding-top:4px}
.plan-card .pc-person{padding:1px 6px;font-size:var(--fs-1)}
.plan-card .pc-meta-item{min-height:27px}

/* ===== v0.9 现场拍摄 scene ===== */
.sc-progress{margin-bottom:12px}
.sc-progress .progress{height:6px;border-radius:4px;background:var(--bg-deep);overflow:hidden}
.sc-progress .progress i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),#6ea1ff);border-radius:4px}
.shot-card .sc-mark{display:flex;gap:8px;align-items:center;margin-top:6px}
.sc-mark .okng{display:flex;gap:5px;flex-shrink:0}
.sc-mark .okng span{font-size:var(--fs-1);padding:3px 10px;border-radius:var(--r-m);border:1px solid var(--border);color:var(--text-sub);cursor:pointer;user-select:none}
.sc-mark .okng .okng-ok.k{background:var(--ok-bg);color: var(--ok);border-color:transparent;font-weight:700}
.sc-mark .okng .okng-ng.n{background:var(--danger-bg);color: var(--danger);border-color:transparent;font-weight:700}
.sc-mark .okng .okng-ok:not(.k):hover{border-color: var(--ok);color: var(--ok)}
.sc-mark .okng .okng-ng:not(.n):hover{border-color: var(--danger);color: var(--danger)}
.sc-mark .sc-note{flex:1;min-width:0;font-size:var(--fs-2);padding:5px 9px;border:1px solid var(--border);border-radius:var(--r-xs);background:#fff;color:var(--text)}
.kv{display:flex;gap:8px;flex-wrap:wrap;font-size:var(--fs-2);margin-bottom:10px}
.kv div{background:#fff;border:1px solid var(--border);border-radius:var(--r-xs);padding:5px 10px}
.kv b{font-weight:600}
.kv span{color:var(--text-sub);font-size:var(--fs-1);display:block}
/* ===== v0.8.8 大屏 tv 模式 — 高度链逐级锁死，图永远整图完整可见 ===== */
.scene-tv-body{background:#0d1117 !important}
.scene-tv-body .sc-progress span{color:var(--imm-text-sub)}
.scene-tv-body .sc-progress .progress{background:var(--imm-panel-2)}
.scene-tv-body .sc-progress b{color:#6ea1ff !important}
/* 旧版：.mfx-body 是可滚容器 → .tv 无高度 → .tv-body 缺 flex → .tv-ref 写死 min-height，
   竖图按原始比例往上长、撑出屏幕。改后逐级 flex:1 + min-height:0，图只受 max-* 约束。 */
.mfx-body.scene-tv-body{overflow:hidden;display:flex;flex-direction:column;padding:12px 14px;gap:10px}
.mfx-body.scene-tv-body>.sc-progress{flex-shrink:0;margin-bottom:0}
.mfx-body.scene-tv-body>.tv{flex:1;min-height:0}
.tv{display:flex;flex-direction:column;min-height:0;overflow:hidden;background:var(--imm-bg);color:var(--imm-text);border-radius:var(--r-m);border:1px solid var(--imm-line)}
.tv-head{display:flex;justify-content:space-between;align-items:center;padding:9px 18px;font-size:var(--fs-3);color:var(--imm-text-sub);gap:8px;flex-wrap:wrap;flex-shrink:0}
.tv-head>span:first-child{min-width:0;overflow-wrap:anywhere}
.tv-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tv-date{font-size:var(--fs-2);opacity:.85}
.tv-readtag{font-style:normal;color:#6ea1ff;font-size:var(--fs-2)}
.tv-tbtn{font-family:inherit;font-size:var(--fs-2);padding:4px 11px;border-radius:var(--r-xs);cursor:pointer;background:var(--imm-panel);border:1px solid var(--imm-line);color:var(--imm-text-mid);transition:border-color .16s,color .16s,background .16s}
.tv-tbtn:hover{border-color:#58a6ff;color:#58a6ff}
.tv-tbtn.on{background:var(--imm-accent);border-color:var(--imm-accent);color:#fff}
.tv-body{flex:1;min-height:0;display:flex;gap:16px;padding:0 18px 8px;align-items:stretch}
.tv-stage{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:8px}
.tv-ref{position:relative;flex:1;min-height:0;border-radius:var(--r-s);background:linear-gradient(135deg,#1c2733,#243244);display:flex;align-items:center;justify-content:center;font-size: calc(var(--fs-8) * 19 / 12);color:#3d4d63;overflow:hidden}
.tv-ref.zoomable{cursor:zoom-in}
.tv-ref img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.tv-ref.cover img{width:100%;height:100%;object-fit:cover}
.tv-ref.noimg::after{content:'🖼 图片加载失败';font-size:var(--fs-3);color:#64748b}
.tv-cnt{position:absolute;top:8px;left:10px;background:var(--imm-overlay);border:1px solid var(--imm-line);border-radius:var(--r-l);padding:1px 10px;font-size:var(--fs-1);color:var(--imm-text-mid)}
.tv-arw{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:58px;border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;font-size:var(--fs-6);cursor:pointer;background:var(--imm-overlay-soft);border:1px solid var(--imm-line);color:var(--imm-text);opacity:.3;transition:opacity .16s}
.tv-ref:hover .tv-arw{opacity:1}
.tv-arw:hover{background:rgba(31,111,235,.75);border-color:var(--imm-accent)}
.tv-arw.l{left:8px}
.tv-arw.r{right:8px}
.tv-thumbs{display:flex;gap:6px;justify-content:center;flex-shrink:0;flex-wrap:wrap}
.tv-thumbs .tt{width:58px;height:39px;padding:0;border-radius:var(--r-xs);overflow:hidden;border:2px solid var(--imm-line);background:var(--imm-panel);cursor:pointer;opacity:.6;transition:opacity .16s,border-color .16s}
.tv-thumbs .tt:hover{opacity:.9}
.tv-thumbs .tt.on{border-color:var(--imm-accent);opacity:1}
.tv-thumbs .tt img{width:100%;height:100%;object-fit:cover;display:block}
.tv-info{flex:0 0 248px;min-width:0;display:flex;flex-direction:column;gap:10px;font-size:var(--fs-4);overflow:hidden;overflow-wrap:anywhere}
.tv-info>b{font-size:var(--fs-6)}
.tv-kv{color:var(--imm-text-sub);font-size:var(--fs-3);line-height:1.7}
.tv-kv b{color:var(--imm-text);font-size:var(--fs-4)}
.tv-ok{color:var(--imm-ok) !important}
.tv-ng{color:var(--imm-danger) !important}
.tv-nav{display:flex;justify-content:space-between;align-items:center;padding:6px 18px 12px;color:var(--imm-text-sub);font-size:var(--fs-3);flex-shrink:0}
.tv-pill{border:1px solid var(--imm-line);border-radius:var(--r-l);padding:4px 14px;cursor:pointer;user-select:none}
.tv-pill.cur{background:var(--imm-accent);border-color:var(--imm-accent);color:#fff}
.tv-pill:not(.cur){cursor:default;opacity:.5}
.tv-foot{padding:0 18px 16px;flex-shrink:0}
.tv .sc-mark .okng span{border-color:var(--imm-line);color:var(--imm-text-sub);font-size:var(--fs-3);padding:6px 16px}
.tv .sc-mark .okng .okng-ok.k{background:var(--imm-ok-bg);color:var(--imm-ok)}
.tv .sc-mark .okng .okng-ng.n{background:var(--imm-danger-bg);color:var(--imm-danger)}
.tv .sc-mark .okng .okng-ok:not(.k):hover{border-color:var(--imm-ok);color:var(--imm-ok)}
.tv .sc-mark .okng .okng-ng:not(.n):hover{border-color:var(--imm-danger);color:var(--imm-danger)}
.tv .sc-mark .sc-note{background:var(--imm-panel);border-color:var(--imm-line);color:var(--imm-text)}
/* 窄屏 / 平板竖屏：自动改"上图下信息条"，不左右挤压图片 */
.tv.narrow .tv-body{flex-direction:column}
.tv.narrow .tv-info{flex:0 0 auto;flex-direction:row;gap:14px;overflow-x:auto;font-size:var(--fs-3)}
.tv.narrow .tv-info>b{font-size:var(--fs-4);flex-shrink:0;white-space:nowrap}
/* v0.8.8.4(老板 2026-10-02 报障): 窄屏文字被挤成"一字一行"（竖排）——
   根因是 .tv-info 的 flex 子项默认可收缩(flex-shrink:1)，390 宽下被压到 14~19px，
   实测「类型 照片」宽 56px 占 12 行。修法：折叠态子项不收缩 + 不换行（横向 chip 条，可横滑）；
   展开态(.tv-info-open) 改竖向列表、每项整宽，可读且无需横滑。 */
.tv.narrow .tv-info>*{flex:0 0 auto;white-space:nowrap}
.tv.narrow .tv-info.tv-info-open{flex-direction:column;overflow-x:hidden;overflow-y:auto;max-height:320px;gap:6px}
.tv.narrow .tv-info.tv-info-open>*{white-space:normal;width:100%;box-sizing:border-box}
/* v0.8.8.4(老板 2026-10-02): 大屏「文字信息」可隐藏（含沉浸模式）——
   开关在 .tv-head 右侧（沉浸/阅读态这一行都保留，所以三态都点得到）；
   隐藏后图片区实测 +30%（桌面/沉浸）。打卡条与翻镜在 .tv-foot/.tv-nav，不受影响。 */
.tv.info-hidden .tv-info{display:none !important}
.tv-info-tg{border:1px solid var(--imm-line);background:var(--imm-panel);color:var(--imm-text-mid);border-radius:var(--r-l);
  padding:3px 12px;font-size:var(--fs-2);cursor:pointer;font-family:inherit;white-space:nowrap}
.tv-info-tg:hover{border-color:var(--imm-accent);color:#fff}
.scene-read .tv-info-tg{background:#fff;color:#333;border-color:#ddd}
/* v0.8.8.8(老板 2026-10-03): 标题栏「📄 文字详情」按钮 —— 全模式统一的文字信息开关（开=高亮，关=常态） */
.tv-info-tg.on{border-color:var(--primary);color:#fff;background:rgba(31,111,235,.85)}
.tv-info-tg.on:hover{background:var(--primary)}
.scene-read .tv-info-tg.on{background:var(--grad-primary);background-origin:border-box;color:var(--on-grad);border-color:transparent}
@media (max-width:720px){
  .tv-body{flex-direction:column}
  .tv-info{flex:0 0 auto;flex-direction:row;flex-wrap:wrap;gap:8px 14px;font-size:var(--fs-3)}
  .tv-ref{min-height:120px;font-size: calc(var(--fs-8) * 7 / 6)}
  .tv-head{padding:8px 12px}
  .tv-body{padding:0 12px 8px}
  .tv-nav{padding:4px 12px 10px}
}
/* ---------- v0.8.8 📖 阅读：只读浏览态（单栏大图，跨浏览器可读） ---------- */
.tv.read .tv-body{flex-direction:column}
.tv.read .tv-ref{background:#0b0f14}
.tv.read .tv-info{flex:0 0 auto;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:6px 18px;overflow:visible;
  font-size:var(--fs-3);border-top:1px solid var(--imm-panel-2);padding-top:9px}
.tv.read .tv-info>b{font-size:var(--fs-5)}
.tv.read .tv-foot{display:none}
.tv.read .tv-nav{padding-bottom:8px}
.scene-read .sc-progress{display:none !important}
.scene-read .mfx-foot{display:none !important}
/* ---------- v0.8.8 沉浸：收起应用框体，黑底铺满 ---------- */
.scene-immersive .sidebar,
.scene-immersive .topbar,
.scene-immersive .msg-fab,
.scene-immersive .mfx-foot{display:none !important}
.scene-immersive .content-scroll{padding:0}
.scene-immersive .mfx{border:0;border-radius:0;box-shadow:none;background:var(--imm-bg);-webkit-backdrop-filter:none;backdrop-filter:none}
/* v0.8.9 修正：沉浸态**不再隐藏 .mfx-head**。原先连它一起藏，等于把「退出沉浸」和档位切换一起抹掉 —— 进了大屏沉浸就出不来、也切不回常规/手机。
   改成一条黑底极简控制条：隐藏标题与返回，只留档位 + 常驻键；鼠标静止 3 秒淡出（动一下即回）。 */
.scene-immersive .mfx-head{
  display:flex !important; justify-content:flex-end; gap:8px;
  padding:calc(8px + env(safe-area-inset-top,0px)) calc(14px + env(safe-area-inset-right,0px)) 8px;
  border:0; border-radius:0; background:var(--imm-bg);
  transition:opacity .35s var(--ease-out);
}
.scene-immersive .mfx-head .mfx-title{display:none}
.scene-immersive .mfx-body.scene-tv-body{padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);gap:0}
.scene-immersive .scene-tv-body>.tv{border:0;border-radius:0}
/* ---------- v0.8.8 原图查看器（同一镜多图左右翻） ---------- */
.sc-lb{position:fixed;inset:0;z-index:4200;display:none;align-items:center;justify-content:center;background:var(--imm-scrim)}
.sc-lb img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:var(--r-xs);box-shadow:0 24px 70px rgba(16, 24, 40,.6)}
.sc-lb-x{position:absolute;top:16px;right:20px;font-size:var(--fs-7);color:var(--imm-text-mid);cursor:pointer;line-height:1}
.sc-lb-x:hover{color:#fff}
.sc-lb-arw{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:84px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-8);cursor:pointer;background:rgba(22,27,34,.72);border:1px solid var(--imm-line);color:var(--imm-text)}
.sc-lb-arw:hover{background:rgba(31,111,235,.8);border-color:var(--imm-accent)}
.sc-lb-arw.l{left:22px}
.sc-lb-arw.r{right:22px}
.sc-lb-cnt{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-size:var(--fs-3);color:var(--imm-text-mid);background:rgba(13,17,23,.8);border:1px solid var(--imm-line);border-radius:var(--r-l);padding:4px 14px}
/* ---------- v0.8.8 跨浏览器适配（夸克/微信内置/iOS Safari/老版 Edge 等） ---------- */
.mfx-body.scene-tv-body,.tv,.tv *{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.tv-head,.tv-info,.tv-kv{overflow-wrap:anywhere;word-break:break-word}
.sc-mob,.shot-card{overflow-wrap:anywhere}
/* 常规/手机模式的分镜缩略图（原先无样式，长边会被原图撑破） */
.shot-ref{position:relative;flex:0 0 auto;width:96px;height:66px;border-radius:var(--r-xs);overflow:hidden;background:var(--bg-deep);display:flex;align-items:center;justify-content:center;font-size: calc(var(--fs-8) * 11 / 12);color:var(--text-light)}
.shot-ref img{width:100%;height:100%;object-fit:cover;display:block}
.shot-ref .ref-n{position:absolute;right:3px;bottom:3px;background:rgba(13,17,23,.72);color:#fff;font-size:var(--fs-1);line-height:1;padding:2px 5px;border-radius:8px}
/* v0.8.8.4(老板 2026-10-02): 现场拍摄「手机模式」一镜多图要能看到**所有**图的缩略图，
   而不是只显示封面图。可横向滑动，当前图高亮；点缩略图即切主图（点主图仍是看大图）。 */
.sc-mob-thumbs{display:flex;gap:6px;overflow-x:auto;padding:7px 0 2px;margin-top:2px;
  -webkit-overflow-scrolling:touch}
.sc-mob-thumbs .mt{flex:0 0 auto;width:52px;height:52px;padding:0;border-radius:var(--r-xs);overflow:hidden;
  border:2px solid var(--border);background:var(--bg-deep);cursor:pointer;opacity:.72;
  transition:opacity .16s,border-color .16s}
.sc-mob-thumbs .mt:hover{opacity:.92}
.sc-mob-thumbs .mt.on{border-color:var(--primary);opacity:1}
.sc-mob-thumbs .mt img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- v0.8.9 现场拍摄：控制键常驻顶栏（档位条在哪儿它就在哪儿，三档通用） ---------- */
.sc-tools{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.sc-tbtn{
  border:1px solid var(--border);background:#fff;border-radius:var(--r-xs);padding:5px 11px;
  font:inherit;font-size:var(--fs-3);line-height:1.5;cursor:pointer;color:var(--text);white-space:nowrap;
  transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.sc-tbtn:hover{border-color:var(--primary);color:var(--primary)}
.sc-tbtn.on{background:var(--grad-primary);background-origin:border-box;border-color:transparent;color:var(--on-grad);box-shadow:0 2px 8px rgba(var(--prgb),.3)}
/* 沉浸态下的控制条配色（黑底） */
.scene-immersive .view-seg{background:var(--imm-panel);border-color:var(--imm-line)}
.scene-immersive .view-seg button{color:var(--imm-text-sub)}
.scene-immersive .view-seg button.on{background:var(--imm-accent);color:#fff;box-shadow:none}
.scene-immersive .sc-tbtn{background:var(--imm-panel);border-color:var(--imm-line);color:var(--imm-text-mid)}
.scene-immersive .sc-tbtn:hover{border-color:var(--imm-accent);color:var(--imm-accent-soft)}
.scene-immersive .sc-tbtn.on{background:var(--imm-accent);border-color:var(--imm-accent);color:#fff;box-shadow:none}
/* 沉浸态静止 3 秒淡出控制条（动一下回来） */
.scene-immersive.sc-idle .mfx-head{opacity:0}
.scene-immersive.sc-idle .mfx-head:hover{opacity:1}
@media (max-width:720px){
  .sc-tbtn{padding:4px 9px;font-size:var(--fs-2)}
  .mfx-head .view-seg button{padding:4px 10px;font-size:var(--fs-2)}
}
/* v0.8.9 修正（A 案）：窄屏（≤560px）顶栏标题压成**一行** + 尾部省略号。
   起因：非沉浸态（手动「退出沉浸」后）手机上标题「🎥 现场拍摄 — 2026年9月25日 西派国际B区」折 5~9 行，
   顶栏飙到 270~352px，把竖图挤成 84px 的一条。零 JS 改动，≥768 宽完全不受影响。
   必须带 `:not(.scene-immersive)` —— 否则本条 #id 特异性高于 `.scene-immersive .mfx-head .mfx-title{display:none}`，
   会把沉浸态里本该隐藏的标题重新显示出来，把 82px 的控制条顶回 116px。 */
@media (max-width:560px){
  #app:not(.scene-immersive) .mfx-head .mfx-title{
    display:block; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  }
  #app:not(.scene-immersive) .mfx-head .mfx-title .btn{vertical-align:middle}
}
/* v0.8.9: 现场拍摄「常规/手机」档分镜卡 —— 原先复用分镜表的 .shot-card（非 flex），缩略图与文字上下堆叠、每卡高约 200px */
.sc-list{display:flex;flex-direction:column;gap:12px}
.sc-list .shot-card{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;margin-bottom:0}
.sc-list .shot-t{font-size:var(--fs-4);font-weight:700;color:var(--text);line-height:1.5}
.sc-list .shot-m{font-size:var(--fs-3);color:var(--text-sub);margin:2px 0 8px}

/* ══════════════════════════════════════════════════════════════════
   v0.8.8.6(老板 2026-10-02) 现场拍摄阅读模式：信息栏默认隐藏，按标题栏按钮以「悬浮面板」显示
   v0.8.8.8(老板 2026-10-03) 右侧悬浮小箭头删除 —— 全模式统一用标题栏那颗「📄 文字详情」按钮开关。
   —— 阅读态是单栏大图（跨浏览器只读浏览），悬浮面板盖在图上、不改变图片尺寸。
   ══════════════════════════════════════════════════════════════════ */
.tv{position:relative}   /* 悬浮面板的定位基准 */
.scene-read .tv-info{display:none}
.scene-read .tv.tv-float .tv-info{
  display:flex !important;position:absolute;right:14px;top:8px;bottom:auto;
  width:min(360px,78vw);max-height:min(calc(100% - 16px),calc(100vh - 24px));
  margin:0;padding:14px 16px;overflow-y:auto;
  background:#fff;color:#333;border:1px solid #e3e8f0;border-radius:var(--r-m);
  box-shadow:0 10px 34px rgba(15,30,60,.18);z-index:6;flex-direction:column;gap:8px}
.scene-read .tv.tv-float .tv-info::-webkit-scrollbar{width:6px}
.scene-read .tv.tv-float .tv-info-more{display:none}
/* 阅读态直接打印 / 存 PDF 干净 */
@media print{
  .scene-read .sidebar,.scene-read .topbar,.scene-read .mfx-head,.scene-read .mfx-foot,
  .scene-read .msg-fab,.scene-read .tv-thumbs,.scene-read .tv-arw,.scene-read .tv-tbtn,
  .scene-read .tv-nav,.scene-read .mini-card,.scene-read .tv-info-tg{display:none !important}
  /* v0.8.8.8: 阅读态若已展开文字详情，打印时按普通块排在图上（别悬空遮字） */
  .scene-read .tv.tv-float .tv-info{position:static !important;width:auto !important;max-height:none !important;
    box-shadow:none !important;border:0 !important;padding:0 !important;margin-top:10px}
  .scene-read,.scene-read .mfx,.scene-read .tv{background:#fff !important;color:#111 !important;border:0 !important;box-shadow:none !important}
  .scene-read .tv-info,.scene-read .tv-kv,.scene-read .tv-kv b,.scene-read .tv-head{color:#333 !important}
  .scene-read .tv-info{border-top-color:#ddd !important}
  .scene-read .tv-ref{background:#f2f2f2 !important}
}

/* ===== v0.8.5: 主题按钮 + 选择条 ===== */
/* v0.8.9.1: 去掉 1px 深色发丝描边（老板：导航栏按钮有深色边框 → 去除），改「无边框 + 轻投影」 */
.theme-btn { display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px; border:none;
  border-radius:var(--r-xs); background:var(--glass, rgba(255,255,255,.72)); cursor:pointer; color:var(--text);
  box-shadow:0 1px 2px rgba(16,24,40,.05); transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.theme-btn:hover { background:var(--primary-light); color:var(--primary); box-shadow:0 2px 6px rgba(16,24,40,.08); }
.theme-btn .tb-dot { width:14px; height:14px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--gold)); flex:none; }
.theme-btn .tb-name { font-size:var(--fs-2); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.theme-btn .tb-ic { margin-left:auto; display:flex; opacity:.55; }
.app-shell.nav-folded .theme-btn .tb-name, .app-shell.nav-folded .theme-btn .tb-ic { display:none; }
.app-shell.nav-folded .theme-btn { justify-content:center; padding:8px; }
.theme-sheet-mask { position:fixed; inset:0; z-index:9998; background:rgba(15,22,35,.38);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center; animation:maskIn var(--dur-base) var(--ease-out); }
.theme-sheet { width:min(560px,92vw); max-height:80vh; overflow:auto; background:var(--glass-strong,#fff);
  backdrop-filter:var(--blur); border:1px solid var(--hair); border-radius: var(--r-l); padding:18px;
  box-shadow: var(--hi), var(--sh-3); }
.theme-sheet h3 { font-size:var(--fs-5); margin-bottom:12px; display:flex; align-items:center; gap:8px; color:var(--text); }
.theme-sheet h3::before { content:""; width:4px; height:14px; border-radius:2px;
  background:linear-gradient(180deg,var(--primary),var(--gold)); }
.theme-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.theme-card { border: 1px solid var(--hair); border-radius: var(--r-s); padding:10px 12px; cursor:pointer;
  background:#fff; transition:all .15s var(--ease-out); position:relative; box-shadow: var(--hi), var(--sh-1)}
.theme-card:hover { border-color:var(--primary); transform:translateY(-1px); }
.theme-card.cur { border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-light); }
.theme-card .tc-sw { display:flex; gap:5px; margin-bottom:7px; }
.theme-card .tc-sw i { width:16px; height:16px; border-radius:var(--r-xs); border:1px solid rgba(0,0,0,.08); }
.theme-card .tc-name { font-size:var(--fs-3); font-weight:600; color:var(--text); }
.theme-card .tc-state { font-size:var(--fs-1); margin-top:3px; color:var(--text-sub); line-height:1.5; }
.theme-card.locked { opacity:.6; }
.theme-card.locked:hover { border-color:var(--border); transform:none; }
.theme-card .tc-lock { position:absolute; top:9px; right:9px; font-size:var(--fs-2); }
.theme-card .tc-cur { position:absolute; top:9px; right:9px; font-size:var(--fs-1); color: var(--primary);
  background:var(--primary-light); padding:1px 7px; border-radius:var(--r-full); font-weight:600; }

/* ===== v0.8.6: 等级徽章随主题色相旋转（蓝基准 217°） ===== */

/* ============================================================
   ===== v0.8.6: 新版侧栏布局 · 老版同时保留 · 主题页切换 =====
   ============================================================ */

/* 经典版不显示新版独占元素；新版不显示经典版独占元素 */
.app-shell.layout-classic .nav-new-only,
.app-shell:not(.layout-new) .nav-new-only { display:none !important; }
.app-shell.layout-new .nav-classic-only { display:none !important; }

/* 新版：侧栏 7 元素 — 首页按钮在纵向正中间，上下各挂 3 项 */
.app-shell.layout-new .sidebar { width:200px; padding:0; position:relative;
  display:flex; flex-direction:column; }
.app-shell.layout-new .sidebar .sidebar-nav { flex:1; padding:0 8px; width:100%; display:flex; flex-direction:column;
  justify-content:center; align-items:stretch; gap:14px; }
.app-shell.layout-new .sidebar .nav-item { margin-bottom:0; padding:11px 12px; }
.app-shell.layout-new .nav-new-top { flex:none; display:flex; flex-direction:column; align-items:stretch; gap:14px; }
.app-shell.layout-new .nav-new-bottom { flex:none; display:flex; flex-direction:column; align-items:stretch; gap:14px; }
.app-shell.layout-new .home-hub { display:flex; align-items:center; gap:10px; flex:none;
  margin:0 8px; padding:11px 12px; width:calc(100% - 16px); cursor:pointer;
  border-bottom:none; border-radius:var(--r-xs); background:transparent;
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out); }
.app-shell.layout-new .home-hub:hover { background:rgba(var(--prgb),.10); }
.app-shell.layout-new .home-hub:active { transform:scale(.97); }
.app-shell.layout-new .home-hub.active {
  border:0; background-origin:border-box; background:var(--grad-primary);
  /* v0.8.9.5：移除 backdrop-filter —— 背景已是不透明渐变，滤镜零作用却会在边缘产生采样伪影
     （与 .nav-item.active 同因，老板实测选中项左侧出现极深边线）。 */
  /* v0.8.9.1：同上，去掉主题色定边 */
  box-shadow:0 6px 20px rgba(var(--prgb), .30);
  color:var(--on-grad); font-weight:700; }
.app-shell.layout-new .home-hub.active .logo-icon { color:var(--on-grad); }

/* 新版折叠把手：贴侧栏右外侧、淡弧状梯形、悬停显示 */
.app-shell.layout-new .fold-tab {
  position:absolute; right:-18px; top:50%; transform:translateY(-50%);
  width:18px; height:52px; border:none;   /* v0.8.9.1: 去深色发丝描边 */
  background:rgba(255,255,255,.45); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-radius:0 var(--r-l) var(--r-l) 0 / 0 50% 50% 0;
  box-shadow:0 1px 3px rgba(16,24,40,.06);
  color:#8a93a3; cursor:pointer; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity var(--dur-base) var(--ease-out), color .15s, background .15s;
  z-index:20; padding:0; }
.app-shell.layout-new .fold-tab svg { width:11px; height:11px; transition:transform var(--dur-base) var(--ease-out); }
.app-shell.layout-new .sidebar:hover .fold-tab { opacity:1; pointer-events:auto; }
.app-shell.layout-new .fold-tab:hover { color:var(--primary); background:rgba(255,255,255,.72); }
.app-shell.layout-new.nav-folded .fold-tab svg { transform:rotate(180deg); }

/* 折叠态修正：新版侧栏仍折叠为 62px；首页按钮缩小 */
.app-shell.layout-new.nav-folded .sidebar { width:62px; }
.app-shell.layout-new.nav-folded .home-hub { padding:11px 4px; margin:0 4px; width:calc(100% - 8px); justify-content:center; }
.app-shell.layout-new.nav-folded .nav-new-top { gap:14px; }
.app-shell.layout-new.nav-folded .nav-new-bottom { gap:14px; }

/* 新版消息悬浮球 */
.msg-fab { position:fixed; right:26px; bottom:26px; z-index:var(--z-popover); width:54px; height:54px; border-radius:50%; cursor:pointer; color:var(--on-grad); display:flex; align-items:center; justify-content:center;   /* P1-4 裁定：浅渐变底 + 深字 */
  border:0; background-origin:border-box; background:var(--grad-primary);
  /* v0.8.9.5：移除 backdrop-filter（同 .nav-item.active：不透明渐变下零作用 + 边缘采样伪影） */
  box-shadow:0 6px 20px rgba(var(--prgb), .30);
  transition:transform var(--dur-base) var(--ease-spring); }
.msg-fab:hover { transform:scale(1.08); }
.msg-fab:active { transform:scale(.96); }
.msg-fab svg { width:24px; height:24px; }
.msg-fab .fab-n { position:absolute; top:-3px; right:-3px; min-width:19px; height:19px; border-radius:var(--r-s);
  background:var(--danger); color:#fff; font-size:var(--fs-1); font-weight:700;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--hair); }

/* 新版悬浮球悬停个人卡片 */
.mini-card { position:fixed; right:26px; bottom:94px; z-index:899; width:248px; border-radius:var(--radius);
  background:var(--glass-strong); -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--hair); box-shadow:0 24px 70px rgba(20,28,45,.22); padding:14px;
  opacity:0; pointer-events:none; transform:translateY(8px) scale(.97);
  transition:all var(--dur-base) var(--ease-spring); }
.mini-card.show { opacity:1; pointer-events:auto; transform:none; }
.mini-card-top { display:flex; gap:10px; align-items:center; margin-bottom:10px; }
.mini-card-ava { width:42px; height:42px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-5); font-weight:800; color:#fff; background:linear-gradient(135deg, var(--gold), var(--gold-dark)); }
.mini-card-name { font-size:var(--fs-4); font-weight:700; color:var(--text); }
.mini-card-role { font-size:var(--fs-1); color: var(--primary); background:var(--primary-light); padding:2px 8px; border-radius:var(--r-xs); display:inline-block; margin-top:3px; }
.mini-card-exp { height:7px; border-radius:var(--r-xs); background:var(--bg-deep); overflow:hidden; margin-top:8px; }
.mini-card-exp i { display:block; height:100%; background:linear-gradient(90deg, var(--primary), var(--gold)); width:0; }
.mini-card-lbl { font-size:var(--fs-1); color:var(--text-sub); display:flex; justify-content:space-between; margin-top:4px; }
.mini-card-chips { display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; }
.mini-card-chips span { font-size:var(--fs-1); padding:3px 10px; border-radius:var(--r-full); background:var(--glass); border:1px solid var(--hair); color:var(--text-sub); box-shadow:var(--sh-1); }   /* v0.8.9.7: 胶囊化 + 发丝边 + 投影 */
.mini-card-chips .lvv { color: var(--gold-deep); border-color:rgba(var(--grgb),.4); font-weight:700; background:var(--gold-light); }
.mini-card-chips .co { color: var(--ok); border-color:rgba(43,138,62,.4); }
.mini-card-foot { display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding-top:9px; border-top:1px solid var(--border); }
.mini-card-foot small { font-size:var(--fs-1); color:var(--text-sub); }

/* 新版二维码悬浮窗 */
.qr-popover { position:fixed; right:26px; bottom:94px; z-index:902; width:230px; border-radius:var(--radius); padding:16px; text-align:center;
  background:var(--glass-strong); -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--hair); box-shadow:0 24px 70px rgba(20,28,45,.28); }
.qr-popover-x { position:absolute; top:8px; right:10px; cursor:pointer; color:var(--text-sub); font-size:var(--fs-4); }
.qr-popover b { font-size:var(--fs-3); color:var(--text); }
.qr-popover p { font-size:var(--fs-1); color:var(--text-sub); margin-top:4px; }
.qr-popover-code { width:150px; height:150px; margin:10px auto; border-radius:var(--r-m);
  background:repeating-conic-gradient(#1d2530 0 25%, #fff 0 50%); background-size:18px 18px; border:1px solid var(--border); }

/* v0.8.6: 带操作按钮的 Toast（新布局切换提示） */
.toast-with-action { display:flex; align-items:center; gap:12px; padding:10px 12px 10px 16px; }
.toast-with-action span { flex:1; }
.toast-with-action button { white-space:nowrap; }

/* 响应式兜底：窗口过窄时新版侧边栏仍折叠 */
@media (max-width: 820px) {
  .app-shell.layout-new:not(.nav-folded) .sidebar { width:62px; }
  .app-shell.layout-new:not(.nav-folded) .nav-label { display:none; }
}

/* ══════════════════ v0.8.6: 灵感计划新建两步分区 ══════════════════ */
.sp-wiz-section-title {
  grid-column: 1 / -1;
  font-size: var(--fs-3); font-weight: 700; color: var(--primary);
  margin: 10px 0 4px; padding: 8px 10px; border-radius: var(--r-xs);
  background: rgba(var(--prgb), .06); border-left: 3px solid var(--primary);
}
.sp-wiz-section-title:first-child { margin-top: 0; }

/* ══════════════════ v0.8.11d 窄屏「现场拍摄 · 常规」挤压修复 ══════════════════ */
/* 根因（Playwright + getBoundingClientRect 实测）：@media(max-width:720px) 下
   .mfx-tools 换 3 行吃 100px、.mfx-foot 换行膨胀（360 宽实测 234.1px，正常 99.8px），
   两头夹击把 #sc-body 压到 297px；再叠加 .tv-info 不可压（199.8px） →
   .tv-stage 被压成 0，而 .tv-ref 有 min-height:120px 且父级 overflow:visible，
   于是溢出父框盖住 .tv-info / .sc-mark（360x780 实测：溢 120px、压 104px）。
   仅在 ≤600px 生效，桌面(1280)与平板(820)外观不动。 */
/* 折叠提示默认隐藏——桌面/平板是左右分栏，露出「展开 ⌄」是多余文案 */
.tv-info-more { display: none; }
@media (max-width: 600px) {
  /* ① 顶栏工具条：改一行横向滚动，100px → 32px */
  .mfx-tools { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; align-items: center;
    max-height: 46px; min-height: 0; }
  .mfx-tools > * { flex: 0 0 auto; margin-top: 0; margin-bottom: 0; }
  .mfx-tools .view-seg, .mfx-tools .sc-tools { display: inline-flex; flex-wrap: nowrap; align-items: center; }
  .mfx-tools button { height: 26px; line-height: 1; font-size: var(--fs-1); padding: 2px 8px; }

  /* ② 底栏：改一行横向滚动，234px → 35px（这条是关键，回收 ~200px） */
  .mfx-foot { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; align-items: center;
    max-height: 54px; min-height: 0; padding-top: 4px; padding-bottom: 4px; }
  .mfx-foot > * { flex: 0 0 auto; margin-top: 0; margin-bottom: 0; }

  /* ③ 图区防溢出兜底：硬 min-height 交还父框，杜绝子元素盖住兄弟 */
  .tv-body { overflow: hidden; }
  .tv-stage { min-height: 0; overflow: hidden; }
  .tv-ref { min-height: 0; }

  /* ④ 信息面板：默认收成一行，点击展开（.tv-info-open 由 plans.js 切换） */
  .tv-info { position: relative; flex: 0 0 auto; min-height: 0; overflow: hidden; }
  .tv-info:not(.tv-info-open) { height: 34px; flex-wrap: nowrap; overflow-x: hidden; padding-right: 70px; }
  .tv-info.tv-info-open { max-height: 62%; overflow-y: auto; }
  /* v0.8.8.4: 同上——子项不许被压扁；展开态改竖向列表逐行可读 */
  .tv-info>* { flex: 0 0 auto; }
  .tv-info:not(.tv-info-open)>* { white-space: nowrap; }
  .tv-info.tv-info-open { flex-direction: column; overflow-x: hidden; gap: 5px; }
  .tv-info.tv-info-open>* { white-space: normal; width: 100%; box-sizing: border-box; }
  .tv-info:not(.tv-info-open) .tv-info-more {
    display: flex; align-items: center; position: absolute; right: 0; top: 0; bottom: 0;
    padding: 0 12px; font-size: var(--fs-2); cursor: pointer;
    color: var(--primary, var(--imm-accent));
    background: linear-gradient(90deg, rgba(13,17,23,0), rgba(13,17,23,.92) 30%);
  }
  .tv-info.tv-info-open .tv-info-more {
    display: block; text-align: right; font-size: var(--fs-2); padding-bottom: 2px;
    color: var(--text-sub, var(--imm-text-sub));
  }
}

/* v0.8.7: 详情/编辑页底部操作栏右侧让出消息悬浮球（54px + 边距），否则主「保存」被悬浮球压住 */
.mfx-foot.pd-foot { padding-right: 92px; }

/* ══════════════════════════════════════════════════════════════════
   v0.8.7(老板 2026-10-02 整体重整) · 计划详情 & 编辑页版式
   ──────────────────────────────────────────────────────────────────
   基准：**概览区块**（平铺、浅底、细边框、圆角 10）。
   规则：① 分镜区块与概览**完全同款**，不再用 .mfx 玻璃浮层；
        ② 区块之间 14px，中间不留空白；
        ③ 整页只有 .pd-cols 一个滚动条，分镜不被塞进小框内部滚，
           卡片信息完整、随页面一起滚（解决「要下滑很难受」）。
   ══════════════════════════════════════════════════════════════════ */
.pd-cols {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px;
  padding: 12px 16px 16px; overflow-y: auto; overflow-x: hidden;
}
/* 状态流程条：本身就是一条通栏，不再套区块壳 */
.pd-flow-wrap { flex: none; }

/* 同款区块：底/边框/圆角/内边距与概览保持一致 */
.pd-sec {
  flex: none; background: rgba(255, 255, 255, .6);
  border: 1px solid var(--border); border-radius: var(--r-s); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.pd-sec-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 30px; }
.pd-sec-title { font-size: var(--fs-4); font-weight: 700; color: var(--text); }
.pd-sec-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* 区块里的概览/编辑表单不再重复画框（外框已由 .pd-sec 提供） */
#detail-body > .pd-overview,
#detail-body > .pd-overview.ov-hero,
#pde-info-form > .pd-overview {
  background: transparent; border: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 0; gap: 12px;
}
/* 旧的 .mfx 式左右栏规则已废弃（v0.8.7 整体重整后不再使用） */
.pd-col-left, .pd-col-right { all: unset; display: block; }

/* v0.8.7(老板 2026-10-02): 分镜卡不再有独立「保存」按钮，状态点只留一个小圆点（文字挂 title） */
.save-dot .s-dot-t { display: none; }
.s-fold.s-fold-arrow { min-width: 30px; padding: 4px 6px; font-size: var(--fs-2); line-height: 1; }
/* 收起 / 展开两个总控按钮缩略为「－ / ＋」，不占宽度 */
.shot-fold-all { min-width: 32px; padding: 6px 10px; font-size: var(--fs-4); line-height: 1; font-weight: 700; }

/* v0.8.7(老板 2026-10-02): 分镜卡（头部 + 缩略行）的「收起箭头 / 删除」都不带按钮外框，只留图标 */
.shot-mini .sm-ops .btn,
.shot-head .s-fold.s-fold-arrow,
.shot-head .s-del {
  border: none; background: transparent; box-shadow: none;
  padding: 2px 6px; font-size: var(--fs-4); color: var(--text-sub); min-width: 0;
}
.shot-mini .sm-ops .btn:hover,
.shot-head .s-fold.s-fold-arrow:hover { background: rgba(var(--prgb), .08); color: var(--primary); }
.shot-mini .sm-ops .btn.btn-danger,
.shot-head .s-del { color: var(--danger); }
.shot-mini .sm-ops .btn.btn-danger:hover,
.shot-head .s-del:hover { background: var(--danger-bg); color: var(--danger); }

/* v0.8.7(老板 2026-10-02): 原卡片头部整行并入右侧简略信息
   —— 顶部小工具条（拖拽/镜号/状态点/收起/删除）+ 两行可编辑字段（名称、类型）
   v0.8.8.3(老板 2026-10-02): .sb-bar 已移出手风琴、常显在右侧信息区卡头 → 选择器改为
   `.shot-split-right > .sb-bar`（原 `.shot-brief .sb-bar` 会失效）。 */
.shot-split-right > .sb-bar {
  display: flex; align-items: center; gap: 4px; margin: -2px 0 8px;
  padding-bottom: 6px; border-bottom: 1px dashed var(--border);
}
.shot-split-right > .sb-bar .s-order { width: 46px; height: 24px; padding: 0 4px; text-align: center; font-size: var(--fs-3); }
.shot-split-right > .sb-bar .shot-drag { cursor: grab; color: var(--text-sub); font-size: var(--fs-3); }
.shot-split-right > .sb-bar .s-fold.s-fold-arrow,
.shot-split-right > .sb-bar .s-del {
  border: none; background: transparent; box-shadow: none;
  padding: 2px 5px; font-size: var(--fs-3); min-width: 0; color: var(--text-sub);
}
.shot-split-right > .sb-bar .s-fold.s-fold-arrow:hover { background: rgba(var(--prgb), .08); color: var(--primary); }
.shot-split-right > .sb-bar .s-del { color: var(--danger); margin-left: auto; }
.shot-split-right > .sb-bar .s-del:hover { background: var(--danger-bg); }
.shot-brief .sb-row > .s-scene { flex: 1; min-width: 0; height: 24px; padding: 0 6px; font-size: var(--fs-3); font-weight: 600; }
.shot-brief .st-check { display: inline-flex; gap: 8px; align-items: center; font-size: var(--fs-3); }
.shot-brief .st-check label { display: inline-flex; align-items: center; gap: 3px; }

/* ══════════════════════════════════════════════════════════════════
   v0.8.7(老板 2026-10-02) · 编辑计划页「计划信息」表单紧凑化
   目标：整洁有序、少占纵向高度 —— 缩内边距/缩字号/缩输入框高/缩栅格间距
   ══════════════════════════════════════════════════════════════════ */
.pd-overview .pd-ov-grid.ed { grid-template-columns: repeat(12, 1fr); gap: 8px; }
.pd-overview .pd-ov-item.pd-ed { padding: 7px 10px; gap: 3px; border-radius: var(--r-xs); box-shadow: none; }
.pd-overview .pd-ov-item.pd-ed .pd-ov-k { font-size: var(--fs-2); line-height: 1.5; }
.pd-overview .pd-ov-item.pd-ed input:not([type=hidden]),
.pd-overview .pd-ov-item.pd-ed select {
  height: 30px; padding: 4px 8px; font-size: var(--fs-3); line-height: 1.2;
}
.pd-overview .pd-ov-item.pd-ed .pd-ed-row { gap: 6px; }
.pd-overview .pd-ov-item.pd-ed .pd-ed-row .btn { height: 30px; padding: 0 10px; font-size: var(--fs-3); }
.pd-overview .pd-ov-item.pd-ed .chip-picker,
.pd-overview .pd-ov-item.pd-ed .chips { gap: 4px; }
.pd-overview .pd-ov-item.pd-ed .chip { padding: 2px 8px; font-size: var(--fs-2); }
.pd-overview .pd-ov-item.pd-ed .day-check-tip:empty { display: none; }
/* 提醒关键词整行：chips 占满，更多设置按钮贴右 */
.pd-remind-row { flex-direction: row !important; align-items: flex-start; gap: 10px; }
.pd-remind-row .pd-ov-k { flex: 0 0 auto; padding-top: 3px; }
.pd-remind-body { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px; }
.pd-remind-chips { flex: 1; min-width: 0; }

/* 更多设置就地浮层（DOM 留在表单 scope 内，视觉上 fixed 弹出） */
.pd-more-panel { position: fixed; inset: 0; z-index: 1250; display: flex; align-items: center; justify-content: center; }
/* ══════════ v0.8.10.2：弹窗内的「更多设置」不得盖住整个视口 ══════════
   老板报障（新增计划改弹窗后暴露）：① 显示异常 ② 协作人无法添加。
   根因：这个就地浮层是 `position:fixed; inset:0; z-index:1250`（整页时代的写法），
        放进弹窗后一举盖住视口 → 表单只剩左侧一条、`＋ 添加协作人` 被遮罩压住点不到。
   修法：在弹窗内把包含块改为该弹窗（absolute），卡片尺寸随弹窗收缩；整页形态保持原样。 */
.modal { position: relative; }
.modal .pd-more-panel { position: absolute; inset: 0; z-index: 5; border-radius: inherit; }
.modal .pd-more-panel-card { width: min(680px, calc(100% - 24px)); max-height: calc(100% - 24px); }
.modal .pd-more-panel-mask { border-radius: inherit; }
.pd-more-panel[hidden] { display: none; }
.pd-more-panel-mask { position: absolute; inset: 0; background: rgba(14, 20, 32, .42); }
.pd-more-panel-card {
  position: relative; width: min(760px, 92vw); max-height: 86vh; display: flex; flex-direction: column;
  background: var(--card, #fff); border: 1px solid var(--border); border-radius: var(--r-m);
  box-shadow: 0 30px 80px rgba(10, 16, 28, .35); overflow: hidden;
}
.pd-more-panel-head {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border); background: rgba(255, 255, 255, .6);
}
.pd-more-panel-head b { font-size: var(--fs-4); }
.pd-more-panel-head .hint { flex: 1; }
.pd-more-x {
  border: none; background: transparent; font-size: var(--fs-5); cursor: pointer;
  color: var(--text-sub); padding: 2px 6px; border-radius: var(--r-xs);
}
.pd-more-x:hover { background: var(--bg); color: var(--text); }
.pd-more-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.pd-more-panel-foot { flex-shrink: 0; display: flex; justify-content: flex-end; padding: 10px 16px; border-top: 1px solid var(--border); }

/* ══════════════════════════════════════════════════════════════════
   v0.8.7 · 需求1/2/5/6/14 —— 素材库
   ══════════════════════════════════════════════════════════════════ */

/* 需求2：参考类型多选筛选条（替代原 select 单选） */
.mat-filter-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 12px; border-radius: var(--r-s);
  background: var(--glass); border: 1px solid var(--hair);
}
.mat-filter-bar .mfb-label { font-size: var(--fs-2); color: var(--text-sub); font-weight: 700; flex: none; }
.mat-filter-bar .chip { cursor: pointer; }
.mat-filter-bar .hint { font-size: var(--fs-1); }

/* 需求1：卡片缩略图下方显示名称 */
.mcard .mname {
  font-size: var(--fs-3); font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-bottom: 4px;
}
.mcard .mtags { margin-top: 0; }

/* 需求5/6 + 老板 2026-10-02 二次定案：
   弹窗尺寸**只**随浏览器窗口按比例变化，不设像素上限、更不受图片固有尺寸影响；
   图片一律 contain 在左栏内，永不撑大弹窗。 */
.mview {
  display: flex; background: var(--glass-strong);
  border: 1px solid var(--hair); border-radius: var(--r-m); overflow: hidden;
  width: 92vw; height: 88vh;
  max-width: none; max-height: none;
  box-shadow: 0 30px 90px rgba(10, 16, 28, .45);
}
.mview-left { flex: 0 0 58%; min-width: 0; position: relative;
  display: flex; align-items: center; justify-content: center; }
.mview-left img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* ══════════ v0.8.9.39：执行视图看图器（.sdv-*）结构样式 ══════════
   老板报障：计划执行页里点参考图看大图，图片直接占满/覆盖整页。
   根因：`.sdv-*` 这一族类此前**没有任何 CSS** →
        `.mview-left`（flex 行）里的 `.sdv-stage` 高度为 auto，
        `.sdv-main` 的 `max-height:100%` 对 auto 高度父级等于不限制 → 竖图按原始高度铺开。
   这里补竖排结构，并把图片严格 contain 在 stage 内（永不超过看图器高度）。 */
.sdv-left { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0; overflow: hidden; }
.sdv-stage { position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; display: flex;
  align-items: center; justify-content: center; overflow: hidden; }
.sdv-stage img, .sdv-stage .sdv-main { max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; display: block; margin: auto; }
.sdv-arw { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 60px; border: 0;
  border-radius: var(--r-s, 10px); background: rgba(10, 16, 28, .45); color: #fff; font-size: 22px;
  line-height: 1; cursor: pointer; opacity: .85; }
.sdv-arw:hover { opacity: 1; background: rgba(10, 16, 28, .7); }
.sdv-arw.l { left: 10px; }
.sdv-arw.r { right: 10px; }
.sdv-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: rgba(10, 16, 28, .35); color: #dfe7f3; font-size: var(--fs-2); overflow-x: auto; }
.sdv-idx { white-space: nowrap; opacity: .85; }
.sdv-thumbs { display: flex; gap: 6px; }
.sdv-th { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 6px; overflow: hidden;
  border: 2px solid transparent; cursor: pointer; }
.sdv-th.on { border-color: var(--primary); }
.sdv-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mview-left .mview-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 16px;
  font-size: var(--fs-3); color: #e9eef7; background: linear-gradient(0deg, rgba(6,10,20,.92), rgba(6,10,20,0));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mview-right { flex: 1 1 42%; min-width: 0; display: flex; flex-direction: column; }
.mview-right-head { flex: none; padding: 16px 20px 10px; border-bottom: 1px solid var(--border); }
.mview-right-head b { font-size: var(--fs-5); color: var(--text); }
.mview-right-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 20px; display: flex;
  flex-direction: column; gap: 14px; }
.mv-sec { border: 1px solid var(--border); border-radius: var(--r-s); padding: 10px 12px; background: rgba(127,127,127,.04); }
.mv-sec-t { font-size: var(--fs-3); font-weight: 800; color: var(--primary); margin-bottom: 6px; }
.mv-use-list { display: flex; flex-wrap: wrap; gap: 6px; }
.mview-use { cursor: pointer; transition: transform .12s var(--ease-out); }
.mview-use:hover { transform: translateY(-1px); filter: brightness(1.08); }
.mview-acts { flex: none; margin-top: 0; padding: 12px 20px; border-top: 1px solid var(--border);
  display: flex; gap: 10px; }
@media (max-width: 900px) {
  .mview { flex-direction: column; width: 96vw; height: 92vh; }
  .mview-left { flex: 0 0 46%; }
  .mview-right { flex: 1 1 54%; }
}

/* 素材表单分区标题 */
.mf-sec-title {
  font-size: var(--fs-3); font-weight: 700; color: var(--primary);
  margin: 12px 0 8px; padding: 7px 10px; border-radius: var(--r-xs);
  background: rgba(var(--prgb), .06); border-left: 3px solid var(--primary);
}
.mf-sec-title:first-child { margin-top: 0; }

/* ══════════════════════════════════════════════════════════════════
   v0.8.7 · 需求3/4 —— 分镜以参考图为主的左右分栏卡片
   ══════════════════════════════════════════════════════════════════ */

.shot-split { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
/* v0.8.8.4(老板 2026-10-02): 参考图 : 右侧信息 = **6 : 4**（老板原话"图片和信息栏左右改为6：4的比例"）。
   上一版 7:3 时右栏在 1440 下只有 288px，「相机参数」的下拉/灯位被挤成单列；6:4 后右栏约 413px。
   仍不设右栏最小宽兜底；≤900px 媒体查询照旧改成上下堆叠。 */
.shot-split-left { flex: 1 1 60%; min-width: 0; max-width: 60%; }
.shot-split-right { flex: 1 1 40%; min-width: 0; }

/* 左侧：待上传素材占位（点击弹窗选择上传 / 素材库；框内无常驻按钮） */
/* v0.8.8.3(老板 2026-10-02 口径修正): **桌面端占位框 = 4:3**（老板原话"说错了，应该是 4:3，
   跟预览 D 基本一致"）；手机端 `.esmat-main` 仍为 3:4（见 m.html）。
   历史：原本写的就是 4:3，但被 `max-height:420px` 截成了 16:9 扁平条 —— 本次保留"去掉 max-height"，
   让 4:3 真正生效（实测 704×528）。 */
.ref-slot {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  border: 2px dashed var(--border); border-radius: var(--r-m); overflow: hidden; cursor: pointer;
  background: repeating-linear-gradient(45deg, rgba(127,127,127,.045) 0 12px, transparent 12px 24px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 16px;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.ref-slot:hover { border-color: var(--primary); background: rgba(var(--prgb), .05); }
.ref-slot-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ref-slot-inner img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ref-slot .ref-slot-empty {
  position: relative; z-index: var(--z-base); display: flex; flex-direction: column; align-items: center;
  gap: 4px; color: var(--text-sub); font-size: var(--fs-3); pointer-events: none; text-align: center;
}
.ref-slot .ref-slot-empty .rs-ic { font-size: calc(var(--fs-8) * 17 / 12); opacity: .55; }
.ref-slot .ref-slot-empty .rs-main { font-size: var(--fs-5); font-weight: 700; color: var(--text); }
.ref-slot .ref-slot-empty .rs-sub { font-size: var(--fs-1); opacity: .8; }

/* v0.8.8.2(老板 2026-10-02): 删掉框内两个常驻蓝色按钮（.ref-ops，老板投诉的"背景阴影"）。
   有图＝主图 + 左右两侧垂直居中的 ‹ ›（绝对定位 span，框内零 button）+ 角落 i/n·图名。 */
.ref-slot.has-img .ref-slot-empty { display: none; }
.ref-slot .ref-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(16, 24, 38, .42); color: #fff; font-size: var(--fs-7); line-height: 1;
  cursor: pointer; user-select: none; opacity: .85;
  transition: background var(--dur-fast), opacity var(--dur-fast);
}
.ref-slot .ref-arrow:hover { background: rgba(16, 24, 38, .72); opacity: 1; }
.ref-slot .ref-arrow[hidden] { display: none; }
.ref-slot .s-ref-prev { left: 8px; }
.ref-slot .s-ref-next { right: 8px; }
.ref-slot .ref-idx {
  position: absolute; right: 8px; bottom: 8px; z-index: 3; max-width: 72%;
  background: rgba(16, 24, 38, .55); color: #fff; font-size: var(--fs-2); padding: 2px 8px;
  border-radius: var(--r-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ref-slot .ref-slot-noimg { color: var(--text-sub); font-size: var(--fs-3); text-align: center; }
.shot-split-left .ref-thumbs { margin-top: 8px; }
.ref-thumb.on { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--prgb), .28); }

/* 右侧：简略信息 */
.shot-brief { border: 1px solid var(--border); border-radius: var(--r-s); padding: 12px 14px; background: rgba(127,127,127,.04); }
.shot-brief .sb-title { font-size: var(--fs-3); font-weight: 800; color: var(--primary); margin-bottom: 8px; }
.shot-brief .sb-row { display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-3); line-height: 1.9; }
.shot-brief .sb-l { flex: 0 1 84px; min-width: 58px; color: var(--text-sub); font-size: var(--fs-2); }
.shot-brief .sb-row b { font-weight: 700; color: var(--text); word-break: break-all; }
.sb-tip { margin-top: 10px; font-size: var(--fs-2); }

/* 折叠块（摄影补充信息 / 拍摄参数） */
.shot-more-fold {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer;
  margin-top: 10px; padding: 9px 12px; border: 1px dashed var(--border); border-radius: var(--r-xs);
  background: #f8f8f5; color: var(--text-sub); font-size: var(--fs-3);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.shot-more-fold:hover { border-color: var(--primary); color: var(--primary); }
.shot-more-fold.open { border-style: solid; border-color: var(--primary); color: var(--primary); }
.shot-more-fold .mf-arrow { margin-left: auto; white-space: nowrap; }
.shot-more { margin-top: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-s); background: rgba(127,127,127,.03); }

/* ══════════════════════════════════════════════════════════════════
   v0.8.8.3(老板 2026-10-02) · 右侧信息区「三栏手风琴」
   概览 → 相机参数 → 补充信息；同一时刻只展开一栏（再点已展开的收起，允许全收起）。
   .sb-bar（拖拽/镜号/保存点/折叠/🗑）在卡头常显，不属于手风琴。
   ══════════════════════════════════════════════════════════════════ */
.acc { margin-top: 2px; }
.acc-head {
  display: flex; align-items: center; gap: 6px 8px; width: 100%; text-align: left; cursor: pointer;
  flex-wrap: wrap;   /* v0.8.8.3: 右栏仅 ~300px —— 标签+徽标+箭头一行，说明文字自动换到第二行 */
  margin-top: 8px; padding: 9px 12px; border: 1px dashed var(--border); border-radius: var(--r-xs);
  background: #f8f8f5; color: var(--text-sub); font-size: var(--fs-3); font-weight: 700;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.acc-head:hover { border-color: var(--primary); color: var(--primary); }
.acc-head.open {
  border-style: solid; border-color: var(--primary); color: var(--primary); background: #fff;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.acc-head .acc-label { font-size: var(--fs-3); white-space: nowrap; flex: 0 0 auto; }
.acc-head .mat-editing { flex: 0 0 auto; }
.acc-head .acc-arrow { margin-left: auto; white-space: nowrap; }
.acc-head .sg-sub { flex: 1 1 100%; order: 9; font-weight: 400; font-size: var(--fs-1); line-height: 1.45; }
/* v0.8.9.8（老板截图：分镜编辑中间一大片空白）：原用 display:grid + grid-template-rows:0fr 折叠，
   但 .acc-body 内有多个直接子元素（.shot-grid/.video-only/.result-grid…），
   grid-template-rows 只管第一行、其余按 grid-auto-rows 撑开 → opacity:0 之下留下占位空白、把下方输入区顶走。
   改用 max-height 测量式折叠（JS 依 scrollHeight 驱动），对多子元素可靠。 */
.acc-body {
  margin-top: 0; padding: 0 12px; border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--r-s) var(--r-s); background: rgba(127,127,127,.03);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .30s var(--ease-out), opacity .24s var(--ease-out), padding .30s var(--ease-out);
}
/* v0.8.10.16（老板：概览自己弹开又缩回去了）——
   JS 是「测量式折叠」：内联 max-height 驱动动画，动画结束后把内联清空交回 CSS。
   但这里 .open 只给了 opacity/padding，没有解除 max-height:0 ——
   于是展开 340ms 后内联一清空，又被 .acc-body 的 max-height:0 收回去（弹开→缩回）。
   .open 必须显式 max-height:none，内联动画期间仍由内联值覆盖。 */
.acc-body.open { max-height: none; opacity: 1; padding: 10px 12px; }
/* 右栏仅约 320px 宽：手风琴面板内部一律单列，避免输入框被压扁 */
.acc-body > .shot-grid,
.acc-body .video-only .shot-grid { grid-template-columns: 1fr; }
.acc-body .shot-grid .span3 { grid-column: auto; }
.acc-body .result-grid { grid-template-columns: 1fr; }
.acc-body .light-row { grid-template-columns: 1fr; }
.acc-body .light-row .l-del { justify-self: end; width: 34px; }
.acc-body .shot-brief { border: none; padding: 0; background: transparent; }
.acc-body .sb-tip { margin-top: 8px; }
.acc-body .sgroup-head { margin-top: 4px; }

/* v0.8.8.2(老板 2026-10-02): 「📷 摄影信息 / 📝 补充信息」按当前参考图编辑 —— 头部常显「正在编辑：<图名>」，
   0 张图时整块禁用并提示「先添加参考图」；块内分镜级字段用 .sb-level-head 分隔标注。 */
.shot-more-fold .mat-editing {
  font-size: var(--fs-2); font-weight: 400; color: var(--primary); white-space: nowrap;
  background: rgba(var(--prgb), .10); border-radius: var(--r-xs); padding: 1px 8px;
}
.mat-empty-tip {
  margin-bottom: 10px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: var(--r-xs);
  font-size: var(--fs-2); color: var(--text-sub); background: #f8f8f5;
}
.sb-level-head {
  font-size: var(--fs-2); font-weight: 700; color: var(--text-sub); margin: 4px 0 0;
  padding-top: 8px; border-top: 1px dashed var(--border);
}
.mat-field:disabled { background: #f2f2ef; color: var(--text-sub); cursor: not-allowed; }

/* 占位点击后的二选一弹窗 */
.ref-choice { display: flex; flex-direction: column; gap: 12px; }
/* v0.8.7(老板 2026-10-02): 「＋ 新增」的两个选项左右并排 */
.ref-choice.ref-choice-row { flex-direction: row; gap: 14px; }
.ref-choice.ref-choice-row .ref-choice-btn { flex: 1 1 0; min-width: 0; }
.ref-choice-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; cursor: pointer;
  padding: 14px 16px; border-radius: var(--r-m); border: 1px solid var(--hair); background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  text-align: left; transition: border-color var(--dur-fast), transform var(--dur-fast);
  box-shadow: none;   /* v0.8.8.2: 明确无阴影（老板投诉"背景阴影"后统一清掉）—— H-P2-6 只并轨玻璃材质，不恢复阴影 */
}
.ref-choice-btn:hover { border-color: var(--primary); transform: translateY(-1px); }
.ref-choice-btn .rc-ic { font-size: calc(var(--fs-8) * 11 / 12); }
.ref-choice-btn b { font-size: var(--fs-4); color: var(--text); }
.ref-choice-btn .rc-sub { font-size: var(--fs-2); color: var(--text-sub); }

@media (max-width: 900px) {
  .shot-split { flex-direction: column; }
  .shot-split-left, .shot-split-right { flex: 1 1 auto; min-width: 0; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   v0.8.7 · 需求8/11/16 —— 导航悬浮窗 / 摄影计划·灵感 tab / 更多设置按钮
   ══════════════════════════════════════════════════════════════════ */

/* 需求8：折叠态导航标题悬浮窗 —— 改由 body 级 fixed 元素承载（JS 定位，永不出窗口）
   旧的容器内 absolute 提示同时在 hover 时被抑制，避免出现两个悬浮窗。 */
#nav-tip {
  position: fixed; left: 0; top: 0; z-index: 4000; display: none;
  background: #1d2530; color: #fff; padding: 5px 11px; border-radius: var(--r-xs);
  white-space: nowrap; font-size: var(--fs-3); line-height: 1.5; pointer-events: none;
  box-shadow: 0 6px 18px rgba(16, 24, 40, .38);
}
.app-shell.nav-folded .nav-item:hover .nav-label { display: none; }

/* 需求11：经典版把「灵感广场」并进「摄影计划」，页内 tab 切换 */
.idea-seg {
  display: inline-flex; flex: none; gap: 3px; padding: 3px; margin-right: 10px;
  background: var(--bg-deep, var(--bg)); border: 1px solid var(--border); border-radius: var(--r-s);
}
.idea-seg button {
  border: none; background: none; cursor: pointer; padding: 7px 14px; border-radius: var(--r-xs);
  font-size: var(--fs-3); color: var(--text-sub); white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.idea-seg button:hover { color: var(--primary); }
.idea-seg button.on { background: var(--grad-primary); background-origin: border-box; color: var(--on-grad); font-weight: 700;
  box-shadow: 0 1px 4px rgba(16, 24, 40, .08); }

/* 需求16：更多设置按钮的小红点定位 */
.pd-more-btn { position: relative; }
.pd-more-btn .dot-red { top: -3px; right: -3px; }

/* 需求13：计划详情内的分镜瀑布流卡片 */
.shot-masonry .mcard { cursor: pointer; }
.shot-masonry .mcard:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20, 30, 60, .13); }

/* ═══════════════════════════════════════════════════════════════════════════════
   v0.8.9 · 方案B「蓝金玻璃 2.0」统一材质 + 全量动效层
   依据：docs/UI全面审计_20261002/06_实施方案_v0.8.9.md 第二 / 三节
   视觉基准：docs/UI全面审计_20261002/preview/方案B_蓝金玻璃2.0_改后预览.html
   原则：本层只「新增 + 覆盖」，不删除任何既有选择器（JS/内联有 class 依赖）；
        同时补齐 app.js(v0.8.9) 已就位的 CSS 钩子：.pressable / .page-in / .login-mask.on / .login-mask.closing
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ---------- 0. 按压反馈：覆盖率 100% ----------
   静态元素由 index.html 直接写 .pressable；动态元素由 app.js 的 markPressable() 自动补类。
   此外对 CSS 里声明 cursor:pointer 的全部组件逐个补 :active（见下方 §0.2），双保险。 */
.pressable {
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.pressable:active { transform: scale(.96); }
/* 用 transform 做定位/居中的元素：按压时必须保留原位移，只叠加缩放 */
.app-shell.layout-new .fold-tab.pressable:active,
.tv-arw.pressable:active,
.sc-lb-arw.pressable:active,
.ref-slot .ref-arrow.pressable:active { transform: translateY(-50%) scale(.96); }
.msg-fab.pressable:active { transform: scale(.94); }

/* §0.2 CSS 声明为可点的组件（非 button/a，markPressable 覆盖不到）统一按压反馈 */
.acc-head:active, .ach-badge:active, .ach-card:active, .ach-popup .close-x:active,
.ach-recent-card:active, .ach-recent-chip:active, .alert-item:active, .alert-item.clickable:active,
.alert-pop .ap-block:active, .alert-pop .ap-go:active, .alert-pop .ap-tab:active,
.app-shell.layout-new .home-hub:active, .assoc-item:active, .avatar-opt:active,
.avatar-pop .avatar-opt:active, .btn:active, .btn-link:active, .cal-day:active,
.cal-one-btn:active, .cal-pop .cp-row:active, .capsule-toggle:active, .chip:active,
.chip-member .cm-role:active, .chip-member .x:active, .cop-m:active, .cop-today:active,
.cop-ybtn:active, .exec-shot:active, .filter-chip:active, .gpk-item:active, .gpk-pg:active,
.heat14 .h-cell:active, .hero-title:active, .home-more:active,
.home-recent-box .mini-plan:active, .idea-seg button:active, .lib-seg-btn:active,
.login-plan-item:active, .lv-cat-head:active, .mat-filter-bar .chip:active, .mat-select-all:active,
.mb-fw .btn:active, .mb-ipcard:active, .mcard:active, .mcard.batchable:active,
.mini-plan:active, .mn-chip:active, .modal-close:active, .money-spin .ms-btn:active,
.msg-c:active, .msg-del-group:active, .msg-float-btn:active, .msg-gm-toggle:active,
.msg-jump-plan:active, .mview-close:active, .mview-use:active, .pd-more summary:active,
.pd-more-x:active, .pick-masonry .pick-mat:active, .pick-row:active, .plan-card:active,
.pt-popover-fixed .pt-exchange-btn:active, .qr-popover-new .dl-btn:active, .qr-popover-x:active,
.recruit-h-card:active, .ref-choice-btn:active, .ref-slot:active, .ref-thumb .rt-del:active,
.rj-details > summary:active, .rp-btn:active, .sc-lb-x:active, .sc-mark .okng span:active,
.sc-mob-thumbs .mt:active, .sc-tbtn:active, .share-link-row code.k:active,
.shot-masonry .mcard:active, .shot-more-fold:active, .shot-video-fold:active, .side-ibtn:active,
.side-user-card:active, .side-user-card .suc-sign-btn:active, .sign-btn-mini:active, .slot:active,
.stat-card:active, .st-check label:active, .sw .slider:active, .tab:active, .theme-btn:active,
.theme-card:active, .theme-row:active, .tspin .ts-btn:active,
.tv-info:not(.tv-info-open) .tv-info-more:active, .tv-info-tg:active, .tv-pill:active,
.tv-tbtn:active, .tv-thumbs .tt:active, .up-ach-more:active, .up-ach-recent:active,
.up-avatar:active, .up-emoji:active, .user-avatar-big:active, .user-chip:active,
.user-detail-pop .ud-close:active, .version-changelog-actions .vc-skip:active,
.view-seg button:active, .view-switch button:active, .weather-strip .ws-act-btn:active,
.welcome-skip:active, .win-ctrl:active, .wl-chip:active, .wl-emoji-btn:active,
.wl-theme-card:active, .ws-act-btn:active, .ws-link:active { transform: scale(.96); }
/* 需要保留原 transform 的可点元素（同 §0 说明） */
.tv-arw:active, .sc-lb-arw:active, .ref-slot .ref-arrow:active { transform: translateY(-50%) scale(.96); }
.app-shell.layout-new .fold-tab:active { transform: translateY(-50%) scale(.96); }
.msg-fab:active { transform: scale(.94); }
.btn:disabled:active, .btn[disabled]:active { transform: none; }
/* 原生勾选控件（.st-check / 表单内 checkbox·radio）同样给按压反馈，补齐 100% 覆盖 */
input[type="checkbox"]:active, input[type="radio"]:active,
.st-check input[type="checkbox"]:active, .st-check input[type="radio"]:active { transform: scale(.94); }

/* ---------- 1. 卡片材质统一：玻璃面 + backdrop-filter + 发丝线 + 内高光 + sh-1 ---------- */
.card, .content-scroll > .card, .card-pad, .profile-main, .profile-side,
.stat-card, .dbox, .lib-wrap, .recruit-card, .settings-block, .ach-card,
.ach-recent-card, .pd-overview, .user-detail-pop, .growth-popover, .pt-popover,
.theme-sheet, .qr-popover, .qr-popover-new, .ach-popup, .welcome-box,
/* v0.8.10.7（老板：三端功能对比页面也不对）——这条玻璃面规则在文件后段，**后加载覆盖**了
   .feature-compare-box 自己的不透明卡面，导致对比表整张透底（背后界面透进表格里）。
   对比表是要读数字的，从玻璃面组里摘出去；更新日志等仍保持玻璃观感。 */
.version-changelog-box, .msg-float-panel, .mini-card {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--hair);
  border-radius: var(--r-l);
  box-shadow: var(--hi), var(--sh-1);
}
/* 看板列：只覆盖材质，保留 .kanban-col:nth-child(n) 的 3px 主题顶条（故不写 border 简写） */
.kanban-col {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-radius: var(--r-m);
  box-shadow: var(--hi), var(--sh-1);
}
/* 列表 / 小卡：中等圆角（与预览 .plan-card / .mcard 一致） */
.plan-card, .mcard, .shot-row, .shot-card, .recruit-h-card, .mini-plan,
.home-recent-box .mini-plan, .mat-select-all, .theme-card, .pd-ov-item {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--hair);
  border-radius: var(--r-m);
  box-shadow: var(--hi), var(--sh-1);
}

/* ---------- 2. 按钮：主按钮主题渐变（禁白边/白内描边/顶白高光），次按钮白玻璃无边框 ---------- */
.btn:not(.btn-primary):not(.btn-danger) {
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.32));
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: none; color: var(--text);
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 3px 10px rgba(16,24,40,.06);
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.btn:not(.btn-primary):not(.btn-danger):hover {
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.5));
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(16,24,40,.08), 0 6px 16px rgba(var(--prgb),.13);
}
.btn:not(.btn-primary):not(.btn-danger):active { transform: translateY(0) scale(.96); }
/* H-P1-①（人眼复核）：主按钮"发飘"→ 边界方案（v0.8.9 曾用 1px 主题色 inset 定边）。
   ⚠️ v0.8.9.1 推翻该定边：老板实测「导航栏选中框及按钮有深色边框」——
   `color-mix(..., 100%, #fff)` 实际等于 --primary 纯色，浅渐变底上就是一圈深蓝描边（观感 = 加了个深色相框）。
   现改为**纯投影分层**（下方 .btn-primary 三态 / .nav-item.active / .home-hub.active / .msg-fab），
   不再在任何浅渐变主题色块上画 1px 定边。 */
/* ===== v0.8.9 主按钮裁定（Lead，2026-10-03；复审 10 号报告 R-2/③ 收口）=====
   v0.8.9.1（老板实测：经典蓝金配色变丑、手机端尤甚）→ **颜色整体回退到改造前**：
   主按钮恢复「纯色 var(--primary) + 白字」，原「浅渐变 + 深字」方案作废
   （观感褪色发灰，且实测按钮填充 vs 页底仅 1.59–2.38:1）。
   代价：白字对比 4.07:1 < AA 4.5 —— 老板以观感优先；如需兼得，把底色改 --primary-dark 即可（≈5.2:1）。 */
.btn-primary {
  border: 0; background-origin: border-box; background: var(--grad-primary); color: var(--on-grad);
  box-shadow: 0 6px 20px rgba(var(--prgb), .30);
}
.btn-primary:hover {
  background: var(--grad-primary-hover); color: var(--on-grad); transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(var(--prgb), .30);
}
.btn-primary:active {
  background: var(--grad-primary-active); color: var(--on-grad); transform: translateY(0) scale(.96);
  box-shadow: inset 0 2px 5px rgba(16, 24, 40,.18);
}
/* 同一条裁定：其它「浅渐变底」的主题色块（导航选中项 / 首页枢纽 / 消息悬浮球）同步改深字 */
.nav-item.active { color: var(--on-grad); text-shadow: var(--on-grad-shadow, none); }
.app-shell.layout-new .home-hub.active { color: var(--on-grad); text-shadow: var(--on-grad-shadow, none); }
.msg-fab { color: var(--on-grad); }
.msg-fab svg { color: var(--on-grad); }

/* ---------- 11. v0.8.9 复审（10 号报告 §4）收口 ---------- */
/* R-3（阻断）：登录模式链接「选中态」小字。app.js `_setLoginMode` 会写 inline
   `color:var(--primary)` + `background:rgba(30,111,219,.12)`（亮蓝压浅蓝底 = 2.72–3.50:1），
   inline 声明只能被 !important 覆盖 → 改用主色专用加深色 --primary-ink + 近白底，7 主题均 ≥4.5:1。
   v0.8.9.8(UI-06) 修正：注释声称已用 --primary-ink 但实现仍是 var(--primary)（default 4.07/serif 3.30 不达标）→ 落实。 */
.login-mode-link.on {
  color: var(--primary-ink) !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--prgb),.45);
  font-weight: 700;
}
/* R-1（桌面侧阻断）：.plan-card.pressable 的按压反馈被同特异性规则/入场动画掩盖 →
   用 (0,3,0) 专用规则兜底；!important 用于压过 .kanban-col-body > .plan-card 的入场动画填充。 */
.plan-card.pressable:active { transform: scale(.96) !important; }
/* R-10（P3）：.side-ibtn::after 的 44px 热区底部原被相邻 .sidebar-footer 吃掉 →
   给按钮自身层级（其 position:relative 已就位），让外扩热区参与命中测试。 */
.side-ibtn { z-index: var(--z-base); }
/* 幽灵按钮：覆盖既有 !important 的透明/带边框声明 → 白玻璃无边框 */
.btn-ghost {
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.32)) !important;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: none !important; color: var(--text);
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 3px 10px rgba(16,24,40,.06);
}
.btn-ghost:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.5)) !important;
  color: var(--primary) !important;
  box-shadow: 0 2px 6px rgba(16,24,40,.08), 0 6px 16px rgba(var(--prgb),.13);
}
/* 图标圆钮：圆形 + 玻璃 + 发丝线 + 无白高光 */
.qr-popover-x, .user-detail-pop .ud-close, .ach-popup .close-x, .mview-close {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-radius: var(--r-full); box-shadow: none;
}

/* ---------- 3. 输入框：半透明白 + 发丝线，focus 主题色 + 3px 主题色光圈 ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--hair);
  border-radius: var(--r-s);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover, select:hover, textarea:hover {
  border-color: rgba(93,104,119,.4);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 3px rgba(var(--prgb),.15);
}

/* ---------- 4. 开关/分段控件：统一 .26s 玻璃 → 填充过渡 ---------- */
.chip, .capsule-toggle .capsule-track, .lib-seg-btn, .view-switch button, .view-seg button,
.filter-chip, .idea-seg button, .theme-card, .wl-chip, .wl-theme-card, .cop-m,
.alert-pop .ap-tab, .mat-select-all, .tv-tbtn, .sc-tbtn, .tv-pill, .tv-info-tg, .seg button {
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-spring);
}
/* 主题切换全局过渡（7 套主题色板切换不再硬跳） */
body {
  transition: background var(--dur-slow) var(--ease-soft), color var(--dur-slow) var(--ease-soft);
}

/* ---------- 5. 弹层：弹簧入场 / 下滑退场（必须用 animation —— display:none→flex 会跳过 transition） ---------- */
@keyframes maskIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes maskOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes sheetIn {
  0%   { opacity: 0; transform: translateY(64px) scale(.8); filter: blur(10px); }
  55%  { opacity: 1; transform: translateY(-8px) scale(1.03); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sheetOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(24px) scale(.94); } }
@keyframes loginIn {
  0%   { opacity: 0; transform: translateY(52px) scale(.85); filter: blur(10px); }
  60%  { opacity: 1; transform: translateY(-5px) scale(1.02); filter: blur(0); }
  100% { opacity: 1; transform: none; }
}
@keyframes loginOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(20px) scale(.94); } }
/* 覆盖旧 modalIn（原为 scale(.92) 无过冲无模糊），统一为弹簧 + 模糊开场 */
@keyframes modalIn {
  0%   { opacity: 0; transform: translateY(56px) scale(.82); filter: blur(10px); }
  55%  { opacity: 1; transform: translateY(-6px) scale(1.02); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes modalOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(20px) scale(.95); } }
@keyframes pageIn { from { opacity: 0; transform: translateY(16px) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes shim { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* 遮罩 + 通用模态（.closing 由 app.js _animateCloseMask 添加，退场 ≤ 400ms 兜底） */
.modal-mask {
  background: rgba(15,22,35,.38);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: maskIn var(--dur-base) var(--ease-out);
}
.modal-mask.closing { animation: maskOut .22s ease-in forwards; }
.modal {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--hair);
  border-radius: var(--r-l);
  box-shadow: var(--hi), var(--sh-3);
  animation: modalIn var(--dur-modal) var(--ease-spring);
}
.modal-mask.closing .modal { animation: modalOut .2s ease-in forwards; }

/* 登录遮罩（app.js v0.8.9: openLoginGate 加 .on / closeLoginGate 加 .closing，display 兜底保持不变） */
.login-mask.on { display: flex; animation: maskIn var(--dur-base) var(--ease-out); }
.login-mask.on .login-box { animation: loginIn var(--dur-modal) var(--ease-spring); }
.login-mask.closing { animation: maskOut .22s ease-in forwards; }
.login-mask.closing .login-box { animation: loginOut .2s ease-in forwards; }
/* 注册附加区：只允许「展开态」写上限，禁止 display:none / max-height:0 !important（会压掉 JS 展开过渡）。
   注意 JS 会写 inline max-height=scrollHeight，优先级高于本行，本行仅作无 JS 时的兜底。 */
.login-extra.show { max-height: 230px; opacity: 1; margin-bottom: 12px; }
.login-box {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--hair);
  border-radius: var(--r-l);
  box-shadow: var(--hi), var(--sh-3);
}
/* 主题选择弹层 / 二维码弹层 / 用户详情弹层：display:none→block|flex，必须 animation */
.theme-sheet-mask { animation: maskIn var(--dur-base) var(--ease-out); }
.theme-sheet { animation: sheetIn var(--dur-modal) var(--ease-spring); box-shadow: var(--hi), var(--sh-3); }
.qr-popover.on { animation: sheetIn var(--dur-modal) var(--ease-spring); }
.user-detail-pop { animation: sheetIn var(--dur-modal) var(--ease-spring); }
/* v0.8.9 审计 P1-2 修复：桌面主题弹层等此前**只有入场没有退场**（JS 直接 remove → 瞬间消失）。
   现补 .closing 退场动画，与 .modal-mask 完全同构；JS 侧（task-16）加 .closing 后延时 ~200ms 再摘 DOM。 */
.theme-sheet-mask.closing { animation: maskOut .22s ease-in forwards; }
.theme-sheet-mask.closing .theme-sheet { animation: sheetOut .2s ease-in forwards; }
.qr-popover.closing { animation: sheetOut .2s ease-in forwards; }
.user-detail-pop.closing { animation: sheetOut .2s ease-in forwards; }

/* ---------- 5b. 点击热区 ≥44px（审计 P2-7）：视觉尺寸保持，热区用 ::after 向外扩 ---------- */
.side-ibtn { min-width: 34px; min-height: 34px; }                 /* 原 34×30 → 视觉高度补到 34 */
.qr-popover-x, .user-detail-pop .ud-close, .ach-popup .close-x, .mview-close {
  min-width: 34px; min-height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
}
.side-ibtn::after, .qr-popover-x::after, .user-detail-pop .ud-close::after,
.ach-popup .close-x::after, .mview-close::after {
  content: ''; position: absolute; inset: -5px; border-radius: inherit;
}

/* ---------- 6. 悬停：卡片上浮 3px + 阴影加深；导航图标 scale(1.18) ---------- */
.card.hoverable:hover, .stat-card:hover, .plan-card:hover, .mcard:hover,
.shot-masonry .mcard:hover, .shot-row:hover, .recruit-h-card:hover, .ach-card:hover,
.ach-recent-card:hover, .mini-plan:hover {
  transform: translateY(-3px);
  box-shadow: var(--hi), var(--sh-2);
}
.nav-item .nav-icon, .nav-item .nav-icon svg, .side-ibtn svg, .home-hub .logo-icon {
  transition: transform var(--dur-fast) var(--ease-spring);
}
.nav-item:hover .nav-icon { transform: scale(1.18); }
.side-ibtn:hover svg { transform: scale(1.18); }
.app-shell.layout-new .home-hub:hover .logo-icon { transform: scale(1.18); }


/* ══════════════ v0.8.9.8：分段控件「滑块」切换动画 ══════════════
   老板：胶囊滑条类别的切换也没有动画。
   根因：选中态用 background: var(--grad-primary)，而 CSS 无法对 linear-gradient 做过渡 →
        切换只能是瞬间跳变，没有滑动感。
   方案：容器内用 ::before 画一块独立滑块，靠 transform 位移（可动画）在选项间滑动；
        位置由 :has(button:nth-child(N).on) 纯 CSS 驱动，无需改 JS。
   适用：.view-seg / .idea-seg / .seg（等宽选项的胶囊分段控件）。 */
.view-seg, .idea-seg, .seg, .recruit-seg, #pub-seg { position: relative; }
/* v0.8.10.17（老板：胶囊异常）——原先把 `#pub-seg > button` 也纳入「分段控件透明底」，
   而发布灵感顶部是**圆角胶囊**（.capsule，靠 .on 的蓝底表示选中）→
   这条 !important 直接压掉蓝底 → 白字透明底 = 看不见（截图里"公开广场"消失）。
   分段控件（带滑动指示条）才需要透明底，胶囊不在此列 → 移除 #pub-seg。 */
.view-seg > button, .idea-seg > button, .seg > button, .recruit-seg > button { position: relative; z-index: 1; background: transparent !important; }
.view-seg::before, .idea-seg::before, .seg::before {
  content: ''; position: absolute; z-index: 0; top: 2px; bottom: 2px; left: 2px;
  width: calc((100% - 4px - var(--seg-gap, 2px)) / var(--seg-n, 2));
  border-radius: var(--r-full);
  background: var(--grad-primary); background-origin: border-box;
  box-shadow: 0 2px 8px rgba(var(--prgb), .35);
  transition: transform .28s var(--ease-spring), width .2s var(--ease-out), opacity .18s linear;
  opacity: 0; pointer-events: none;
}
/* 选中项存在时才显示滑块 */
.view-seg:has(> button.on)::before, .idea-seg:has(> button.on)::before, .seg:has(> button.on)::before, .recruit-seg:has(> button.on)::before, #pub-seg:has(> button.on)::before { opacity: 1; }
/* 第 2 / 3 / 4 项：按 (100% + gap) 步进 */
.view-seg:has(> button:nth-child(2).on)::before, .idea-seg:has(> button:nth-child(2).on)::before, .seg:has(> button:nth-child(2).on)::before, .recruit-seg:has(> button:nth-child(2).on)::before, #pub-seg:has(> button:nth-child(2).on)::before { transform: translateX(calc(100% + var(--seg-gap, 2px))); }
.view-seg:has(> button:nth-child(3).on)::before, .idea-seg:has(> button:nth-child(3).on)::before, .seg:has(> button:nth-child(3).on)::before, .recruit-seg:has(> button:nth-child(3).on)::before, #pub-seg:has(> button:nth-child(3).on)::before { transform: translateX(calc(200% + var(--seg-gap, 2px) * 2)); }
.view-seg:has(> button:nth-child(4).on)::before, .idea-seg:has(> button:nth-child(4).on)::before, .seg:has(> button:nth-child(4).on)::before, .recruit-seg:has(> button:nth-child(4).on)::before, #pub-seg:has(> button:nth-child(4).on)::before { transform: translateX(calc(300% + var(--seg-gap, 2px) * 3)); }
/* 选中项文字改白（滑块上是浅渐变底，深字看不清）
   ⚠ v0.8.9.19（老板截图：编辑档案里「摄影」选中后字看不见）——
   `.recruit-seg` **不在上面 ::before 滑块组里**（它自己用白底胶囊 + 主题色字，见 recruit.js 注入样式），
   却被这条白字规则命中 → 白底白字。故从本组剔除，交回它自己的对比度方案。 */
.view-seg > button.on, .idea-seg > button.on, .seg > button.on, #pub-seg > button.on { color: var(--on-grad) !important; }
/* 编辑档案「摄影 / 模特 / 其他人员」：选中 = 白底胶囊 + 加深的主题色字（对比度达标）
   ⚠ 上面第 5310 行的 `background: transparent !important` 会连它自己的白胶囊一起干掉，
   这里用更高特异性 + !important 把选中态背景补回来，否则选中项根本没有底。 */
.recruit-seg > button.on { background: #fff !important; color: var(--primary-ink) !important;
  box-shadow: 0 1px 4px rgba(16, 24, 40, .12); }
/* 沉浸场景（深色底）滑块改深色，避免浅渐变突兀 */
.scene-immersive .view-seg::before { background: var(--imm-accent); box-shadow: none; }

/* ---------- 7. 页面/模块切换 + 子项 stagger（app.js 给 #content 加 .page-in，700ms 后移除） ---------- */
/* H-P2-1（人眼复核）：三处主操作入口原仅 27–30px 高 → 统一提到 34px 视觉下限（不动宽度/排版） */
#plan-new, #st-theme-sheet, #pd-edit-shots { min-height: 34px; }
.page-in { animation: pageIn var(--dur-base) var(--ease-out) backwards; }
.page-in > * { animation: pageIn var(--dur-base) var(--ease-out) backwards; }
.page-in > *:nth-child(2) { animation-delay: .05s; }
.page-in > *:nth-child(3) { animation-delay: .1s; }
.page-in > *:nth-child(4) { animation-delay: .15s; }
.page-in > *:nth-child(5) { animation-delay: .2s; }
.page-in > *:nth-child(6) { animation-delay: .25s; }
/* 列表/卡片 30ms 错峰入场（.stagger-in 既有规则保留；此处补齐常用列表容器） */
.kanban-col-body > .plan-card, .kanban-col > .plan-card, .shot-row, .mcard {
  animation: rowIn var(--dur-base) var(--ease-out) backwards;
}
.kanban-col-body > .plan-card:nth-child(2), .shot-row:nth-child(2), .mcard:nth-child(2) { animation-delay: 30ms; }
.kanban-col-body > .plan-card:nth-child(3), .shot-row:nth-child(3), .mcard:nth-child(3) { animation-delay: 60ms; }
.kanban-col-body > .plan-card:nth-child(4), .shot-row:nth-child(4), .mcard:nth-child(4) { animation-delay: 90ms; }
.kanban-col-body > .plan-card:nth-child(5), .shot-row:nth-child(5), .mcard:nth-child(5) { animation-delay: 120ms; }
.kanban-col-body > .plan-card:nth-child(n+6), .shot-row:nth-child(n+6), .mcard:nth-child(n+6) { animation-delay: 150ms; }

/* ---------- 8. Toast：弹簧滑入（退场沿用 .closing） ---------- */
.toast {
  border-radius: var(--r-m);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--hi), var(--sh-2);
  animation: toastIn var(--dur-base) var(--ease-spring);
}
@keyframes toastIn {
  0%   { opacity: 0; transform: translateX(28px) scale(.9); }
  60%  { opacity: 1; transform: translateX(-4px) scale(1.02); }
  100% { opacity: 1; transform: none; }
}


/* ══════════════ v0.8.9.8：图片批次加载态 ══════════════
   老板：分镜方案加载图片时还是逐行刷新。
   上一版按容器类绑定（.shot-grid 等）漏掉了分镜参考图容器（.exec-ref 96×64 / .shot-ref 86×64），
   且单图容器只能逐张淡入。现改为「按批次聚合」：一次渲染插入的图片算一组，组内全部就绪后一起显示。
   占位由容器自带底色承担（.exec-ref 渐变灰 / .shot-ref --bg-deep / 卡片底色），无需另造骨架。 */
img { transition: opacity .30s var(--ease-out); }
img.is-imgloading { opacity: 0; }
@media (prefers-reduced-motion: reduce) { img { transition: none; } }


/* ══════════════ v0.8.9.8：首页日历折叠展开过渡 ══════════════
   老板：首页的日历折叠展开还是没动画。根因 home.js 用 display 直切（不可过渡）。
   现由 display 管显隐、max-height 管动画（JS 依 scrollHeight 精确驱动，不猜高度）。 */
#cal-heat, #cal-full {
  overflow: hidden; opacity: 0;
  transition: max-height .34s var(--ease-out), opacity .26s var(--ease-out);
}
#cal-heat.open, #cal-full.open { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #cal-heat, #cal-full { transition: none; }
}

/* ══════════════ v0.8.9.8：图片容器通用流光占位 ══════════════
   老板：分镜方案加载还是没有动画。此前流光只挂在素材库 .mcard:has(img.is-imgloading) 上，
   分镜参考图容器（.exec-ref 86×64 / .shot-ref 96×66）虽有底色，但加载期间只是静态灰底、没有动效。
   现由 app.js 批次逻辑给图片父容器统一打 .is-imgloading-box，本规则对任意位置的图片容器生效。 */
.is-imgloading-box { position: relative; }
.is-imgloading-box::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(100deg,
    rgba(127, 137, 160, .06) 30%, rgba(127, 137, 160, .18) 50%, rgba(127, 137, 160, .06) 70%);
  background-size: 220% 100%;
  animation: imgBoxShimmer 1.25s linear infinite;
}
@keyframes imgBoxShimmer {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .is-imgloading-box::after { animation: none; }
}


/* ══════════════ v0.8.9.8：计划状态切换动画 ══════════════
   老板：切换计划状态的时候没有动画。原实现状态更新后整块重渲染，新 DOM 即终态、无过渡。
   现由 _playStatusChange() 在重渲染后补播：状态胶囊弹跳 + 光圈扩散；详情区轻微上浮淡入。 */
@keyframes statusPop {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(var(--prgb), .30); }
  38%  { transform: scale(1.16); box-shadow: 0 0 0 7px rgba(var(--prgb), .16); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(var(--prgb), 0); }
}
.status-pop { animation: statusPop .74s var(--ease-spring); will-change: transform; }
@keyframes statusRefresh {
  from { opacity: .45; transform: translateY(6px); }
  to   { opacity: 1;   transform: none; }
}
.status-refresh { animation: statusRefresh .42s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .status-pop, .status-refresh { animation: none; }
}


/* v0.8.9.8（老板：沉浸模式的参考图占位背景比较突兀）：
   通用流光是为浅色界面调的 rgba(127,137,160,*)，在 #0d1117 上过亮；
   沉浸/阅读/大图灯箱内一律改用暗色流光与深色占位，与面板同族。 */
.scene-immersive .is-imgloading-box::after,
.scene-read .is-imgloading-box::after,
.tv .is-imgloading-box::after,
.sc-lb .is-imgloading-box::after {
  background: var(--imm-shimmer);
}
.tv-ref { background: var(--imm-ref-placeholder); }
/* v0.8.9.42（老板：现场模式阅读状态背景变白）——
   上面那句「沉浸/阅读/灯箱一律暗色占位」才是本意，但紧接着这条把**阅读态**又刷回浅灰 #f2f2f2，
   且写在 @media print **之外** → 屏幕上也生效，深色沉浸界面里被顶出一大块白。
   浅底对打印才有意义（省墨、对比清楚），故收进 @media print。 */
@media print { .scene-read .tv-ref { background: #f2f2f2 !important; } }

/* ---------- 9. 骨架屏 shimmer（补齐到异步区域；JS 需给加载中的容器加 .is-loading） ---------- */
.skel, .skeleton, .sk-block, .sk-bar, .sk-card {
  background-image: linear-gradient(90deg, rgba(255,255,255,.3) 25%, rgba(var(--prgb),.18) 50%, rgba(255,255,255,.3) 75%);
  background-size: 200% 100%;
  animation: shim 1.2s linear infinite;
}
.lib-pane.is-loading, .kanban-col-body.is-loading, .content-scroll.is-loading, .mcard.is-loading {
  background-image: linear-gradient(90deg, rgba(255,255,255,.3) 25%, rgba(var(--prgb),.18) 50%, rgba(255,255,255,.3) 75%);
  background-size: 200% 100%;
  animation: shim 1.2s linear infinite;
}

/* ---------- 10. 降级：prefers-reduced-motion 覆盖本层全部新动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .pressable, .pressable:active,
  .btn:not(.btn-primary):not(.btn-danger), .btn-primary, .btn-ghost,
  .modal, .modal-mask, .login-mask, .login-box, .theme-sheet, .theme-sheet-mask,
  .qr-popover.on, .user-detail-pop, .toast, .page-in, .page-in > *,
  .kanban-col-body > .plan-card, .kanban-col > .plan-card, .shot-row, .mcard,
  .skel, .skeleton, .sk-block, .sk-bar, .sk-card,
  .lib-pane.is-loading, .kanban-col-body.is-loading, .content-scroll.is-loading, .mcard.is-loading {
    animation: none !important;
    transition-duration: .001ms !important;
    filter: none !important;
    transform: none !important;
  }
}

/* v0.8.9.8(V1-16 补测)：上面这条降级块的选择器是单类（0,1,0），而退场动画全挂在
   `.xxx.closing` 双类（0,2,0）上 —— 特异性更高，降级块压不住。实测 reduce 档点开/关
   主题面板仍跑满 200ms（theme-sheet-mask closing / theme-sheet）。这里单独兜底：
   保留 forwards 填充（元素立即落到终态），只把时长压到 0。 */
@media (prefers-reduced-motion: reduce) {
  .modal-mask.closing, .modal-mask.closing .modal,
  .login-mask.closing, .login-mask.closing .login-box,
  .theme-sheet-mask.closing, .theme-sheet-mask.closing .theme-sheet,
  .toast.closing, .msg-float-panel.closing, .welcome-box.closing,
  .version-changelog-box.closing, .feature-compare-box.closing,
  .ach-popup.closing, .qr-popover.closing, .user-detail-pop.closing {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* v0.8.9.8（V1-11）：应用内「动效精简」开关 —— 与上面 @media (prefers-reduced-motion) 同口径。
   app.js 按 localStorage.wb_reduce_motion 给 <html>/<body> 挂 .reduce-motion。
   注意：`.xxx.closing`（0,2,0）比通配规则（0,1,1）更具体，必须单独再压一次，否则退场仍跑满。 */
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}
html.reduce-motion .modal-mask.closing, html.reduce-motion .modal-mask.closing .modal,
html.reduce-motion .login-mask.closing, html.reduce-motion .login-mask.closing .login-box,
html.reduce-motion .theme-sheet-mask.closing, html.reduce-motion .theme-sheet-mask.closing .theme-sheet,
html.reduce-motion .toast.closing, html.reduce-motion .msg-float-panel.closing,
html.reduce-motion .welcome-box.closing, html.reduce-motion .version-changelog-box.closing,
html.reduce-motion .feature-compare-box.closing, html.reduce-motion .ach-popup.closing,
html.reduce-motion .qr-popover.closing, html.reduce-motion .user-detail-pop.closing {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
}


/* ══════════════ v0.8.9.8：沉浸模式（现场拍摄 / 看图器）设计 token ══════════════
   老板：现场拍摄相关界面也升级，但参考图占位背景较突兀。
   原实现把 #0d1117 / #161b22 / #30363d 等深色值硬编码 60+ 处，既难统一调色，
   也让为浅色界面调的占位/流光混进深色环境显得刺眼。现集中为语义 token。 */
.scene-immersive, .tv, .sc-lb, .scene-read {
  --imm-bg: #0d1117;
  --imm-panel: #161b22;
  --imm-panel-2: #21262d;
  --imm-line: #30363d;
  --imm-text: #e6edf3;
  --imm-text-mid: #c9d1d9;
  --imm-text-sub: #8b949e;
  --imm-accent: #1f6feb;
  --imm-accent-soft: #79b8ff;
  --imm-ok: #3fb950;
  --imm-ok-bg: #1a4731;
  --imm-danger: #f85149;
  --imm-danger-bg: #5c2320;
  --imm-overlay: rgba(13, 17, 23, .74);
  --imm-overlay-soft: rgba(13, 17, 23, .55);
  --imm-scrim: rgba(6, 9, 13, .94);
  --imm-ref-placeholder: linear-gradient(135deg, #1c2733, #141b24);
  --imm-shimmer: linear-gradient(100deg,
    rgba(255, 255, 255, .025) 30%, rgba(255, 255, 255, .075) 50%, rgba(255, 255, 255, .025) 70%);
}

/* ============================================================
   v0.8.12 微信适配（桌面端）—— 契约 docs/v0812_wx_contract.md 第四节
   仅新增类，不改动既有规则（避免影响其它页面）
   ============================================================ */
:root { --wx:#07c160; --wx-dark:#06ad56; }

/* 微信登录按钮（登录框用）
   ⚠ 必须 !important：既有 .btn:not(.btn-primary):not(.btn-danger)（(0,3,0) 特异性）会给
   非主按钮套白玻璃渐变 + border:none，压过单类 .btn-wx 的微信绿 → 静默失效。同段 .btn-ghost 也是用 !important 兜底。 */
.btn-wx { background: var(--wx) !important; border: 1px solid var(--wx) !important; color: #fff !important; }
.btn-wx:hover { background: var(--wx-dark) !important; border-color: var(--wx-dark) !important; color: #fff !important; }

/* 登录框「或 / 微信扫码登录」入口 */
.wx-login-entry { margin-top: 14px; }
.wx-login-sep { display: flex; align-items: center; gap: 10px; color: var(--text-light); font-size: var(--fs-2); margin-bottom: var(--sp-3); }
.wx-login-sep::before, .wx-login-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.wx-login-btn { width: 100%; justify-content: center; text-align: center; font-weight: 600; }
.wx-login-sub { font-size: var(--fs-1); color: var(--text-light); text-align: center; margin-top: 6px; line-height: 1.5; }

/* v0.8.12 修正（老板：扫码应当**替换**账号密码输入，而不是在下面多展开一块）：
   进入微信模式后，把「登录/注册切换 + 用户名 + 密码 + 注册附加区 + 提示 + 登录按钮 + 微信入口」
   整块收掉，只留 logo / 标题 / 副标题 / 二维码面板 / 底部署名。 */
.login-box.wx-mode .login-mode-bar,
.login-box.wx-mode .field,
.login-box.wx-mode #login-extra,
.login-box.wx-mode #login-hint,
.login-box.wx-mode #login-go,
.login-box.wx-mode #wx-login-entry { display: none !important; }

/* 登录框内的扫码面板 */
.wx-login-panel { margin-top: 10px; text-align: center; }
.wx-login-qr {
  width: 168px; height: 168px; margin: 0 auto; padding: var(--sp-2); background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
}
.wx-login-qr img { width: 100%; height: 100%; object-fit: contain; }
.wx-login-ph { font-size: var(--fs-2); color: var(--text-light); line-height: 1.6; }
.wx-login-tip { font-size: var(--fs-3); color: var(--text-sub); margin-top: 10px; line-height: 1.6; }
.wx-login-cd { font-size: var(--fs-1); color: var(--text-light); margin-top: var(--sp-1); min-height: 16px; }
.wx-login-acts { display: flex; gap: var(--sp-2); justify-content: center; margin-top: 10px; }

/* 二维码弹窗：小程序码占位 */
.qr-box-empty {
  border-style: dashed !important; background: var(--bg-deep, #f4f6fb) !important;
  display: flex; align-items: center; justify-content: center;
}
.qr-empty-txt { font-size: var(--fs-1); color: var(--text-light); line-height: 1.6; text-align: center; }

/* 通用分享弹窗（window.WBShare） */
.wb-share { display: flex; gap: var(--sp-4); align-items: flex-start; }
.wb-share-left { text-align: center; flex: 0 0 auto; }
.wb-qr-lg {
  width: 140px; height: 140px; padding: var(--sp-2); background: #fff;
  border: 1px solid var(--border); border-radius: var(--r-s);
  display: flex; align-items: center; justify-content: center;
}
.wb-qr-lg img { width: 100%; height: 100%; object-fit: contain; }
.wb-share-qrhint { font-size: var(--fs-1); color: var(--text-light); margin-top: 5px; }
.wb-share-right { flex: 1; min-width: 0; }
.wb-share-lab { font-size: var(--fs-2); color: var(--text-sub); margin-bottom: 5px; }
.wb-share-link {
  font-size: var(--fs-2); word-break: break-all; background: var(--bg-deep, #f4f6fb);
  border: 1px solid var(--border); border-radius: var(--r-xs); padding: 7px 9px;
  max-height: 76px; overflow: auto; color: var(--text-sub);
}
.wb-share-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); }
.wb-share-wx { margin-top: 14px; padding-top: var(--sp-3); border-top: 1px dashed var(--border); }
.wb-share-wxrow { display: flex; gap: 10px; align-items: center; }
.wb-share-wxqr {
  width: 76px; height: 76px; object-fit: contain; border: 1px solid var(--border);
  border-radius: var(--r-xs); background: #fff; flex: 0 0 auto;
}
.wb-share-wxinfo { font-size: var(--fs-3); min-width: 0; }
.wb-share-wxempty { font-size: var(--fs-2); color: var(--text-sub); line-height: 1.6; }
.wb-share-note { font-size: var(--fs-1); color: var(--text-light); line-height: 1.6; margin-top: var(--sp-3); }

/* 邀请链接行内的「分享微信」按钮 */
.share-wx-btn { flex: 0 0 auto; }

/* 私聊头部的微信按钮 —— 与同头部 .msg-jump-plan 同规格（11px 胶囊），加微信按钮保留微信绿 */
.msg-wx-bar { display: inline-flex; gap: 6px; margin-left: var(--sp-2); }
.msg-wx-bar .btn { font-size: var(--fs-1); padding: 3px 10px; border-radius: var(--r-full); }

/* 名片里的微信行 */
.v92-card-wx {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: 7px 10px; margin-top: var(--sp-2); background: rgba(7, 193, 96, .07);
  border: 1px solid rgba(7, 193, 96, .25); border-radius: var(--r-xs); font-size: var(--fs-3);
}
.v92-card-wx b { color: var(--wx-dark); }

/* 个人设置里的微信区块（卡片与个人页其它卡同规格：.card + 12px 16px 内边距） */
.pf-wx-card { padding: 12px 16px; }
.wb-wx-block { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.wb-wx-col { text-align: center; }
.wb-wx-col img {
  width: 110px; height: 110px; object-fit: contain; background: #fff;
  border: 1px solid var(--border); border-radius: var(--r-s); display: block;
}
.wb-wx-ph {
  width: 110px; height: 110px; border: 1px dashed var(--border); border-radius: var(--r-s);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: var(--fs-1); color: var(--text-light); line-height: 1.5; background: var(--bg-deep, #f4f6fb);
}
.wb-wx-col .wb-wx-cap { font-size: var(--fs-1); color: var(--text-sub); margin-bottom: 6px; }
.wb-wx-hint { flex: 1; min-width: 200px; font-size: var(--fs-2); color: var(--text-sub); line-height: 1.7; }
.wb-wx-bind { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-3); margin-top: 10px; }
.wb-wx-badge { display: inline-flex; align-items: center; gap: var(--sp-1); background: rgba(7, 193, 96, .12); color: var(--wx-dark); border: 1px solid rgba(7, 193, 96, .3); border-radius: var(--r-full); padding: 1px 9px; font-size: var(--fs-1); font-weight: 600; }

/* 微信内置浏览器提示条（桌面/手机通用） */
.wb-wx-topbar {
  display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  background: rgba(7, 193, 96, .1); border-bottom: 1px solid rgba(7, 193, 96, .25);
  font-size: var(--fs-3); color: var(--text);
}
.wb-wx-topbar .wb-wx-topbar-x { margin-left: auto; cursor: pointer; color: var(--text-light); }