/* tgdrive 设计系统 · 规范见 DESIGN.md
 * 所有颜色、间距、圆角都来自 :root 令牌；组件只引用令牌，不写裸色值。
 * 深色模式只覆盖令牌，不覆盖组件。 */

:root {
  /* 中性色：白色工作区 + 浅灰侧栏，靠细线而不是阴影分层 */
  --canvas: #ffffff;
  --surface: #ffffff;
  /* 图表分类色（固定顺序，已校验色觉差异与对比度）：只用于统计图，文件图标仍用中性色。 */
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; --series-6: #6250d6; --series-other: #a3a3ad;
  --surface-sunken: #f7f7f8;
  --surface-hover: #f1f1f3;
  --line: #e4e4e8;
  --line-soft: #ededf0;
  --line-strong: #d1d1d7;
  --ink: #17171c;
  --ink-2: #4a4a54;
  --ink-3: #6b6b76;
  --ink-inverse: #ffffff;
  /* 所有预览（文本、代码、PDF、图片、视频、音乐）共用同一个中性深色画布。 */
  --media-canvas: #111216;
  --image-canvas: var(--media-canvas);
  --media-ink: #ffffff;
  --media-overlay: rgba(16, 19, 32, .8);

  /* 主按钮用墨色；主色（青金蓝）只用于选中、焦点、链接与进度 */
  --primary: #17171c;
  --primary-hover: #33333b;
  --on-primary: #ffffff;
  --accent: #3550d4;
  --accent-hover: #2b45bd;
  --accent-soft: #eef0fd;
  --accent-ink: #2a40b0;
  --selection: rgba(53, 80, 212, .2);

  /* 公开使用琥珀色；风险提示另用橙色，避免混淆。 */
  --public: #c4760b;
  --public-soft: #fdf0da;
  --public-ink: #8f5506;

  --success: #187648;
  --success-soft: #e1f4ea;
  --warning: #a65416;
  --warning-soft: #fff0e4;
  --danger: #b63834;
  --danger-hover: #a93631;
  --danger-soft: #fbe8e6;

  --admin: #7048b8;
  --admin-soft: #efe9fb;
  --chart-out: #257e8b;

  /* 文字落在主色/危险色背景上 */
  --on-accent: #ffffff;

  /* 文件类型记号：统一用中性单色，类型靠记号形状与格式标签区分，不靠颜色（避免列表花哨）。
   * 各类型令牌保留给预览图标、下载任务等处引用，但取同一组值。 */
  --glyph-mark: #5f5f6b;
  --glyph-mark-bg: #f1f1f4;
  --tile-image: var(--glyph-mark);
  --tile-image-bg: var(--glyph-mark-bg);
  --tile-video: var(--glyph-mark);
  --tile-video-bg: var(--glyph-mark-bg);
  --tile-audio: var(--glyph-mark);
  --tile-audio-bg: var(--glyph-mark-bg);
  --tile-pdf: var(--glyph-mark);
  --tile-pdf-bg: var(--glyph-mark-bg);
  --tile-text: var(--glyph-mark);
  --tile-text-bg: var(--glyph-mark-bg);
  --tile-code: var(--glyph-mark);
  --tile-code-bg: var(--glyph-mark-bg);
  --tile-archive: var(--glyph-mark);
  --tile-archive-bg: var(--glyph-mark-bg);

  /* 代码高亮 */
  --syntax-string: #2c7a4b;
  --syntax-keyword: #7a3fb0;
  --syntax-property: #0b6a8a;
  --syntax-number: #b0581c;
  --syntax-variable: #a33d6a;
  --syntax-fn: #3c5fb8;


  /* 标志：与网页图标一致的暗灰底座 + 三块白色瓦片（透明度递减）+ 公开色纸飞机，浅色与深色模式相同 */
  --logo-bg: #0b0c13;
  --logo-tile: #ffffff;
  --logo-ring: transparent;
  --logo-plane: #f0a22e;
  --logo-fold: #c27a10;

  /* 文件类型图标：纸面与文件夹 */
  --glyph-paper: #ffffff;
  --glyph-edge: #c4c4cc;
  --folder-back: #7d90e6;
  --folder-front: #a9b7f3;

  /* 代码高亮：与文档站共用 */
  --syntax-type: #96640a;
  --syntax-tag: #b0364f;
  --syntax-meta: #7a829c;

  --focus: 0 0 0 3px rgba(53, 80, 212, .16);
  --focus-ring: color-mix(in srgb, var(--accent) 60%, transparent);
  --shadow-sm: 0 1px 2px rgba(16, 16, 24, .05);
  --shadow-md: 0 8px 24px rgba(16, 16, 24, .08), 0 2px 6px rgba(16, 16, 24, .04);
  --shadow-lg: 0 24px 64px rgba(16, 16, 24, .16), 0 4px 12px rgba(16, 16, 24, .06);
  --shadow-tray: 0 16px 48px -12px rgba(26, 32, 64, .18), 0 4px 12px -4px rgba(26, 32, 64, .1);
  --tray-highlight: rgba(255, 255, 255, .9);
  --shadow-media: 0 30px 80px -20px rgba(0, 0, 0, .55);

  /* 深色界面元素（媒体预览、播放器、登录页插画、深色菜单）在浅色与深色模式下都保持深色：
   * 前景与叠加只用这一组白色透明度阶梯（on-dark）与黑色阴影阶梯（shade），不写裸的 rgba。 */
  --on-dark: #ffffff;
  --black: #000000;
  --on-dark-90: rgba(255, 255, 255, .9);
  --on-dark-72: rgba(255, 255, 255, .72);
  --on-dark-56: rgba(255, 255, 255, .56);
  --on-dark-40: rgba(255, 255, 255, .4);
  --on-dark-24: rgba(255, 255, 255, .24);
  --on-dark-16: rgba(255, 255, 255, .16);
  --on-dark-12: rgba(255, 255, 255, .12);
  --on-dark-8: rgba(255, 255, 255, .08);
  --on-dark-4: rgba(255, 255, 255, .04);
  --on-dark-danger: #ffaba2;
  --shade-8: rgba(0, 0, 0, .08);
  --shade-16: rgba(0, 0, 0, .16);
  --shade-32: rgba(0, 0, 0, .32);
  --shade-48: rgba(0, 0, 0, .48);
  --shade-64: rgba(0, 0, 0, .64);
  --shade-80: rgba(0, 0, 0, .8);
  /* 深色表面：音乐播放器、唱片、深色菜单与登录页插画共用 */
  --dark-surface: #111216;
  --dark-surface-raised: #1a1a20;
  --dark-surface-deep: #0b0b10;
  /* 预览中的纸面（PDF 页、文本纸张）始终为浅色 */
  --paper-ink-3: #6b6f80;
  --radius-pill: 999px;
  --field-width: 560px;
  --field-width-wide: 720px;

  --radius-2xs: 2px; /* 细条装饰（进度刻度、当前项标记、光标）专用 */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;

  /* 窄屏浮层共用外侧留白，横屏时同时避开设备安全区域。 */
  --floating-gutter: 16px;
  --floating-top: max(var(--floating-gutter), env(safe-area-inset-top));
  --floating-right: max(var(--floating-gutter), env(safe-area-inset-right));
  --floating-bottom: max(var(--floating-gutter), env(safe-area-inset-bottom));
  --floating-left: max(var(--floating-gutter), env(safe-area-inset-left));

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  /* 品牌标语用系统自带的宋体，营造书卷气；不加载外部字体。 */
  --font-serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif;

  /* 字号阶梯：界面只用这几档，不写半像素或零散字号（文档站正文另有阅读字号）。 */
  --text-micro: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 22px;
  --text-display: 28px;
  /* 长文排版（文档站、Markdown 预览）专用：正文 15px、导语 17px、文档标题 32px。界面控件不要使用。 */
  --text-reading: 15px;
  --text-lead: 17px;
  --text-hero: 32px;

  /* 动效：悬停与颜色变化用 fast，展开、抽屉与浮层用 base，较大的面板与入场用 slow；统一使用 ease-out 曲线。 */
  --duration-fast: .12s;
  --duration-base: .2s;
  --duration-slow: .3s;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  /* 遮罩：弹窗、手机抽屉与文档目录共用。 */
  --scrim: rgba(12, 12, 16, .42);

  --sidebar-width: 232px;
  --content-width: 1200px;

  color-scheme: light;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--font);
  font-size: var(--text-md);
  line-height: 1.5;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* 深色主题：data-theme 由 theme.ts（及页面加载前的 theme-*.js）按用户偏好或系统外观设置。 */
:root[data-theme="dark"] {
  --canvas: #0e0e11;
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #9085e9; --series-other: #5c5c66;
  --surface: #0e0e11;
  --surface-sunken: #141418;
  --surface-hover: #1c1c21;
  --line: #26262d;
  --line-soft: #1e1e24;
  --line-strong: #3a3a43;
  --ink: #ededf0;
  --ink-2: #b4b4bd;
  --ink-3: #8e8e99;
  --ink-inverse: #0e0e11;
  --primary: #ededf0;
  --primary-hover: #ffffff;
  --on-primary: #0e0e11;
  --accent: #8b9cff;
  --accent-hover: #a3b1ff;
  --accent-soft: rgba(139, 156, 255, .13);
  --accent-ink: #b0bcff;
  --selection: rgba(139, 156, 255, .32);
  --public: #eca94c;
  --public-soft: rgba(236, 169, 76, .14);
  --public-ink: #f3c179;
  --success: #4cc08a;
  --success-soft: rgba(76, 192, 138, .14);
  --warning: #eba76f;
  --warning-soft: rgba(235, 167, 111, .14);
  --danger: #e0645b;
  --danger-hover: #ea7d75;
  --danger-soft: rgba(224, 100, 91, .14);
  --admin: #b79bf2;
  --admin-soft: rgba(183, 155, 242, .16);
  --chart-out: #77c8d4;
  --syntax-string: #8fd19e;
  --syntax-keyword: #c9a3f2;
  --syntax-property: #7cc8e0;
  --syntax-number: #f0b07a;
  --syntax-variable: #ee9ac0;
  --syntax-fn: #9db8f5;
  /* 深色背景上给暗灰底座加一圈细描边，保证轮廓可见 */
  --logo-ring: rgba(255, 255, 255, .16);
  --glyph-mark: #a3a3ae;
  --glyph-mark-bg: rgba(255, 255, 255, .06);
  --glyph-paper: #1b1b21;
  --glyph-edge: #4a4a55;
  --folder-back: #4c5db8;
  --folder-front: #6a7bd6;
  --syntax-type: #e0b55c;
  --syntax-tag: #f0828f;
  --syntax-meta: #8a97a5;
  --focus: 0 0 0 3px rgba(139, 156, 255, .2);
  --focus-ring: color-mix(in srgb, var(--accent) 65%, transparent);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .04);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .05);
  --shadow-tray: 0 20px 56px -12px rgba(0, 0, 0, .65), 0 4px 16px rgba(0, 0, 0, .3);
  --tray-highlight: rgba(255, 255, 255, .08);
  color-scheme: dark;
}

/* ---------- 基础 ---------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { min-width: 320px; margin: 0; background: var(--canvas); }
/* 界面操作不触发文字选择；输入、阅读与消息正文保留编辑和复制能力。 */
body { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable]:not([contenteditable="false"]), .doc, .md, .preview-doc, .preview-code-editor, .src-view, .ai-tool-detail { -webkit-user-select: text; user-select: text; }
body.has-modal { overflow: hidden; }
html:has(body.has-modal), body.has-modal { overscroll-behavior: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; }
h1, h2, h3, p { margin: 0; }
code, .mono { font-family: var(--font-mono); font-size: .92em; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
html[data-input="pointer"] :focus-visible:not(input, textarea, select) { outline: none; }
.modal:focus-visible, .main:focus-visible { outline: none; }
::selection { background: var(--selection); color: var(--ink); }
::placeholder { color: var(--ink-3); }
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

/* 私密空间沿用文件界面，快捷解锁复用系统通行密钥提示。 */
/* 锁定占位：只有锁形图标、状态与「解锁」按钮，解锁表单统一在弹窗里。 */
.private-gate { display: grid; max-width: 480px; justify-items: center; gap: 8px; margin: 48px auto; padding: 40px 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-align: center; }
.private-gate h2 { margin: 8px 0 0; font-size: var(--text-xl); }
.private-gate > p { margin: 0 0 12px; }
.private-unlock-form > p { margin: 0; line-height: 1.7; }
.private-unlock-form > .btn { align-self: stretch; }
.private-loading { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.transfer-notice { display: flex; align-items: flex-start; gap: 8px; max-width: 720px; margin: 0 auto 16px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); font-size: var(--text-sm); }
.transfer-notice > .icon, .transfer-notice > svg { flex: none; margin-top: 2px; color: var(--muted); }
.transfer-notice.is-error { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.transfer-notice.is-error > svg { color: var(--danger); }
.transfer-notice-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.transfer-notice-text strong { font-weight: 600; }
.private-space .transfer-notice { max-width: none; }
.private-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 16px; margin-bottom: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.private-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--text-sm); }
.private-status > .muted { font-size: var(--text-xs); }
.private-unlock-form > .private-passkey-hint, .private-passkey-hint { margin: 0; color: var(--ink-3); font-size: var(--text-xs); line-height: 1.7; }
.private-unlock-form > .private-passkey-hint { text-align: center; }
.private-unlock-divider { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: var(--text-xs); }
.private-unlock-divider::before, .private-unlock-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.login-passkey-hint { margin: 0; color: var(--ink-3); font-size: var(--text-xs); line-height: 1.7; text-align: center; }
@media (max-width: 640px) {
  .private-gate { margin: 24px auto; padding: 24px 20px; }
  .private-toolbar { align-items: flex-start; padding: 12px; }
  .private-toolbar .toolbar-actions { flex-wrap: wrap; }
}

/* 设置保留独立页面，具体账号操作复用弹窗。 */
/* 与其他页面同宽（由 .main-inner 的 --content-width 限定），页头、标签与右缘对齐。 */
.account-page { width: 100%; }
.account-profile { display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--surface-sunken); }
.account-avatar-button { position: relative; flex: none; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.account-avatar-button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.account-avatar-overlay { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: var(--shade-48); color: var(--on-dark); opacity: 0; transition: opacity var(--duration-fast); }
.account-avatar-button:hover:not(:disabled) .account-avatar-overlay, .account-avatar-button:focus-visible .account-avatar-overlay { opacity: 1; }
.account-profile-copy { display: grid; gap: 4px; flex: 1; min-width: 0; }
.account-profile-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.account-profile-name strong { overflow: hidden; color: var(--ink); font-size: var(--text-xl); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.account-profile-email { overflow: hidden; color: var(--ink-3); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.account-profile-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.account-section { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 36px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.account-section-heading { display: flex; align-items: flex-start; gap: 8px; }
.account-section-heading > svg { flex: none; margin-top: 1px; color: var(--ink-2); }
.account-section-heading h2 { font-size: var(--text-lg); font-weight: 600; }
.account-section-heading p { margin-top: 8px; color: var(--ink-3); font-size: var(--text-sm); line-height: 1.7; }
.account-section-content { min-width: 0; }
.account-section-content > .account-setting-summary + .account-setting-summary { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.account-setting-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.account-setting-summary > div { min-width: 0; }
.account-setting-summary strong { font-size: var(--text-md); font-weight: 500; }
.cache-location-name { display: inline-flex; min-width: 0; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.cache-location-name > svg { flex: none; color: var(--accent-ink); }
.cache-location-name > .muted { font-weight: 400; }
.account-setting-summary p { margin-top: 4px; color: var(--ink-3); font-size: var(--text-sm); line-height: 1.7; }
.account-action-dialog .input { height: 40px; }
.account-editor-note { margin: 0; color: var(--ink-3); font-size: var(--text-sm); line-height: 1.7; overflow-wrap: anywhere; }
.account-private-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.account-attachments { display: grid; margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.account-attachments li { display: grid; grid-template-columns: 15px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink-3); }
.account-attachments-title { display: grid; gap: 2px; min-width: 0; }
.account-attachments-title strong { overflow: hidden; color: var(--ink); font-size: var(--text-sm); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.account-attachments-title small { color: var(--ink-3); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.account-attachments-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; color: var(--ink-3); font-size: var(--text-xs); }
.account-attachments-note > span { flex: 1 1 200px; min-width: 0; }
.settings-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.account-feedback { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--success-soft); color: var(--success); font-size: var(--text-sm); line-height: 1.6; overflow-wrap: anywhere; }
.account-feedback > svg { flex: none; margin-top: 2px; }
.account-passkeys { display: grid; gap: 16px; }
.account-passkeys .account-feedback { margin-top: 0; }
.account-passkey-list { margin: 0; padding: 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); list-style: none; }
.account-passkey-list > li { display: flex; align-items: center; gap: 12px; padding: 16px 0; }
.account-passkey-list > li + li { border-top: 1px solid var(--line-soft); }
.account-passkey-menu-slot { display: flex; justify-content: flex-end; width: 40px; min-height: 34px; flex: none; }
.account-passkey-mark { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); }
.account-passkey-copy { display: grid; gap: 4px; flex: 1; min-width: 0; }
.account-passkey-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.account-passkey-name strong { overflow: hidden; font-size: var(--text-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.account-passkey-copy > span, .account-passkey-meta { color: var(--ink-3); font-size: var(--text-xs); }
.account-passkey-copy > .tone-warning { color: var(--warning); }
.account-passkey-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; min-width: 0; }
.account-passkey-domain { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-passkey-loading { display: flex; align-items: center; gap: 8px; min-height: 120px; color: var(--ink-3); font-size: var(--text-sm); }
.account-callout { display: flex; align-items: flex-start; gap: 8px; padding: 12px; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink-2); font-size: var(--text-sm); line-height: 1.7; }
.account-callout > svg { flex: none; margin-top: 4px; }
.account-callout > div { min-width: 0; }
.account-callout p { overflow-wrap: anywhere; }
.account-callout .btn, .account-callout .link { margin-top: 8px; }
.account-callout .link { display: inline-block; }
.account-callout.tone-danger { background: var(--danger-soft); color: var(--danger); }
.account-passkey-progress { padding: 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface); }
.account-passkey-progress ol { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.account-passkey-progress li { display: flex; align-items: center; gap: 8px; flex: 1; color: var(--ink-3); font-size: var(--text-xs); white-space: nowrap; }
.account-passkey-progress li:not(:last-child)::after { content: ""; height: 1px; flex: 1; margin-left: 4px; background: var(--line); }
.account-passkey-progress li:last-child { flex: none; }
.account-passkey-progress li > i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.account-passkey-progress li.is-current { color: var(--accent); }
.account-passkey-progress li.is-complete { color: var(--success); }
.account-passkey-progress li .spinner { width: 14px; height: 14px; }
.account-passkey-progress p { margin-top: 8px; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.7; }
.account-page-help { display: flex; align-items: flex-start; gap: 8px; margin: 24px 0; color: var(--ink-3); font-size: var(--text-sm); line-height: 1.8; }
.account-page-help > svg { flex: none; margin-top: 4px; }
.account-page-help .link { display: inline-block; margin-left: 8px; }
@media (max-width: 760px) {
  .account-section { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px 0; }
  .account-profile { align-items: flex-start; gap: 16px; padding: 16px; }
}
@media (max-width: 480px) {
  .account-setting-summary { flex-wrap: wrap; }
  .account-setting-summary > .btn { width: 100%; }
  .account-passkey-progress ol { gap: 8px; }
  .account-passkey-progress li { gap: 4px; }
  .account-passkey-progress li:not(:last-child)::after { margin-left: 0; }
  .account-page-help .link { display: block; margin: 4px 0 0; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 8px 16px; border-radius: var(--radius-sm); background: var(--ink); color: var(--ink-inverse); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.muted { color: var(--ink-3); }
.link { color: var(--accent); }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.tone-success { color: var(--success); }
.tone-warning { color: var(--warning); }
.tone-danger { color: var(--danger); }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
/* 设置页的一组开关：行之间用细线分开。 */
.switch-list { display: grid; }
.switch-list > .switch-row { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.switch-list > .switch-row:first-child { border-top: 0; padding-top: 4px; }
.panel-body > .key-value + .disclosure, .panel-body > .inline-note + .disclosure, .panel-body > .key-value + .inline-note, .panel-body > .inline-note + .inline-note { margin-top: 16px; }
.local-cache-options { display: grid; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.disclosure-list { display: grid; gap: 8px; }
.assistant-subnav { margin: -8px 0 20px; }
.resource-footnote { font-size: var(--text-xs); line-height: 1.7; }

.spinner { width: 15px; height: 15px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; opacity: .75; animation: spin .7s linear infinite; }
.spinner-lg { width: 24px; height: 24px; color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }
.full-loading { display: grid; min-height: 100vh; min-height: 100dvh; place-content: center; justify-items: center; gap: 16px; color: var(--ink-2); }

/* ---------- 品牌 ---------- */

.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.brand-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.brand-text { display: grid; gap: 8px; min-width: 0; }
.brand-tagline { overflow: hidden; color: var(--ink-3); font-family: var(--font-serif); font-size: var(--text-micro); letter-spacing: .28em; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.brand.has-tagline:hover .brand-tagline { color: var(--ink-2); }
.logo-bg { fill: var(--logo-bg); stroke: var(--logo-ring); }
.logo-tile { fill: var(--logo-tile); }
.logo-plane { fill: var(--logo-plane); stroke: var(--logo-plane); }
.logo-fold { fill: none; stroke: var(--logo-fold); }

/* ---------- 按钮 ---------- */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; transition: background-color var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast); }
.btn-sm { height: 28px; padding: 0 8px; font-size: var(--text-sm); }
.btn-md { height: 34px; padding: 0 12px; }
.btn-lg { height: 40px; padding: 0 16px; font-size: var(--text-md); }
.btn-block { width: 100%; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn-secondary { border-color: var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-secondary:hover:not(:disabled) { border-color: var(--line-strong); background: var(--surface-hover); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-hover); color: var(--ink); }
.btn-danger { background: var(--danger); color: var(--on-accent); }
.btn-danger:hover:not(:disabled) { background: var(--danger-hover); }
.btn:disabled { opacity: .5; }
.btn[aria-busy="true"] { opacity: .8; cursor: progress; }

.icon-btn { display: inline-grid; flex: none; place-items: center; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--ink-2); transition: background-color var(--duration-fast), color var(--duration-fast); }
.icon-btn-md { width: 34px; height: 34px; }
.icon-btn-sm { width: 28px; height: 28px; }
.icon-btn:hover:not(:disabled), .icon-btn.is-active { background: var(--surface-hover); color: var(--ink); }
.icon-btn.is-spinning svg { animation: spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .icon-btn.is-spinning svg { animation-duration: 2.4s; } }
.icon-btn-secondary { border-color: var(--line); background: var(--surface); }
.icon-btn:disabled { opacity: .4; }

/* ---------- 状态标签 ---------- */

.badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; flex: none; border-radius: var(--radius-xs); background: var(--surface-sunken); color: var(--ink-2); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line-soft); }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-success { background: var(--success-soft); color: var(--success); box-shadow: none; }
.badge-warning { background: var(--warning-soft); color: var(--warning); box-shadow: none; }
.badge-danger { background: var(--danger-soft); color: var(--danger); box-shadow: none; }
.badge-accent { background: var(--accent-soft); color: var(--accent-ink); box-shadow: none; }
.badge-public { background: var(--public-soft); color: var(--public-ink); box-shadow: none; }

/* ---------- 表单 ---------- */

.form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field-label { color: var(--ink); font-size: var(--text-sm); font-weight: 500; }
.field-hint { color: var(--ink-3); font-size: var(--text-sm); }
.field-error { color: var(--danger); font-size: var(--text-sm); }
.password-field > .field { grid-template-columns: minmax(0, 1fr) auto; column-gap: 0; }
.password-field .field-label, .password-field .field-hint, .password-field .field-error { grid-column: 1 / -1; }
.password-field .input { grid-column: 1 / -1; grid-row: 2; height: 40px; padding-right: 64px; }
.password-field-toggle { grid-column: 2; grid-row: 2; align-self: center; margin-right: 4px; }
.input { width: 100%; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.input:hover { border-color: var(--line-strong); }
.input:focus { border-color: var(--accent); outline: none; box-shadow: var(--focus); }
.input-lg { height: 40px; font-size: var(--text-md); }
.has-error .input { border-color: var(--danger); }
.input-affix { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.input-affix:focus-within { border-color: var(--accent); box-shadow: var(--focus); }
.input-affix .input { border: 0; box-shadow: none; background: transparent; }
.input-affix span { padding: 0 12px; color: var(--ink-3); font-size: var(--text-sm); }
.byte-size-input > input { flex: 1; min-width: 0; }
.byte-size-input > select.input { flex: none; width: 76px; border-left: 1px solid var(--line); border-top-left-radius: 0; border-bottom-left-radius: 0; color: var(--ink-2); }
.form-alert, .inline-note { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: var(--radius-sm); font-size: var(--text-sm); }
.form-alert svg, .inline-note svg { flex: none; margin-top: 2px; }
.notice-body { flex: 1; min-width: 0; }
.notice-body > .btn { margin-left: 8px; vertical-align: middle; }
.form-alert { background: var(--danger-soft); color: var(--danger); }
.inline-note { background: var(--surface-sunken); color: var(--ink-2); }
.inline-note.tone-warning { background: var(--warning-soft); color: var(--warning); }
.inline-note.tone-success { margin-bottom: 16px; background: var(--success-soft); color: var(--success); }
.inline-note.banner { margin-bottom: 16px; }
.inline-note.share-login-note { margin-bottom: 16px; flex-wrap: wrap; }
.share-login-note > span { flex: 1; min-width: 0; }

.switch-row { position: relative; display: flex; align-items: center; gap: 16px; cursor: pointer; }
.switch-row.is-disabled { cursor: progress; opacity: .7; }
.switch-copy { display: grid; flex: 1; gap: 2px; }
.switch-label { font-weight: 600; }
.switch-description { color: var(--ink-2); font-size: var(--text-sm); }
.switch-input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track { position: relative; width: 34px; height: 20px; flex: none; border-radius: var(--radius-pill); background: var(--line); transition: background-color var(--duration-base); }
.switch-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--on-accent); box-shadow: var(--shadow-sm); transition: transform var(--duration-base); }
.switch-input:checked + .switch-track { background: var(--accent); }
.switch-input:checked + .switch-track .switch-thumb { transform: translateX(14px); }
.switch-input:focus-visible + .switch-track { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
html[data-input="pointer"] .switch-input:focus-visible + .switch-track { outline: none; }

.checkbox { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }

.search-input { display: flex; align-items: center; gap: 8px; width: min(100%, 320px); height: 32px; padding: 0 8px 0 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-3); box-shadow: var(--shadow-sm); transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.search-input:hover { border-color: var(--line-strong); }
.search-input:focus-within { border-color: var(--accent); box-shadow: var(--focus); }
.search-input input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--ink); }
.search-clear { display: grid; width: 24px; height: 24px; place-items: center; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--ink-3); }
.search-clear:hover { background: var(--surface-hover); color: var(--ink); }

.segmented { display: inline-flex; flex: none; padding: 2px; gap: 2px; border-radius: var(--radius-sm); background: var(--surface-hover); }
.segmented button { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 26px; padding: 0 8px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--ink-3); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; transition: color var(--duration-fast), background-color var(--duration-fast); }
.segmented button:hover { color: var(--ink); }
.segmented button.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); }
/* 工具栏里单独的图标按钮（如刷新）与旁边的分段控件同高、同底色；窄屏下两者都放大到 40px。 */
.toolbar-actions > .icon-btn { width: 30px; height: 30px; border-color: transparent; background: var(--surface-hover); color: var(--ink-3); }
.toolbar-actions > .icon-btn:hover:not(:disabled) { color: var(--ink); }
.download-import-unlock { display: grid; gap: 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); }
.download-import-unlock-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.download-import-unlock-head > div { flex: 1; min-width: 0; }
.download-import-unlock-head p { margin: 2px 0 0; font-size: var(--text-xs); }
.file-filters { display: flex; align-items: center; gap: 8px; min-width: 0; margin: -4px 0 12px; overflow-x: auto; scrollbar-width: none; }
.file-filters::-webkit-scrollbar { display: none; }
.file-filters > .filter-chips { flex: none; margin: 0; overflow: visible; }
.file-filters-divider { flex: none; width: 1px; height: 16px; margin: 0 8px; background: var(--line-strong); }
.filter-chips { display: flex; gap: 8px; margin: -4px 0 12px; overflow-x: auto; scrollbar-width: none; }
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chip { flex: none; height: 28px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-2); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; transition: color var(--duration-fast), background-color var(--duration-fast), border-color var(--duration-fast); }
.filter-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.filter-chip.is-active { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.filter-chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.filter-chip.is-multi { display: inline-flex; align-items: center; gap: 4px; }
.filter-chip-clear { flex: none; height: 28px; padding: 0 8px; border: 0; background: transparent; color: var(--ink-3); font-size: var(--text-sm); cursor: pointer; }
.filter-chip-clear:hover { color: var(--ink); }
.filter-chip-clear:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }
.segmented-count { min-width: 18px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--line-soft); color: var(--ink-2); font-size: var(--text-micro); font-variant-numeric: tabular-nums; text-align: center; }

/* ---------- 浮层 ---------- */

/* 单列轨道限制为可用宽度：单行省略的长文件名等内容不能把弹窗撑出屏幕。 */
.modal-backdrop { position: fixed; inset: 0; z-index: calc(60 + var(--modal-depth, 0)); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 24px; background: var(--scrim); backdrop-filter: blur(2px); animation: fade var(--duration-fast) ease-out; }
.modal-backdrop:not(.is-minimized) { top: var(--modal-viewport-top, 0px); bottom: auto; height: var(--modal-viewport-height, 100dvh); overscroll-behavior: none; }
.modal { display: flex; width: 100%; min-width: 0; max-height: calc(var(--modal-viewport-height, 100dvh) - 48px); flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-lg); animation: rise var(--duration-base) var(--ease-out); }
.modal-sm { max-width: 420px; }
.modal-md { max-width: 540px; }
.modal-lg { max-width: 720px; }
.modal-xl { max-width: 1040px; }
.modal-header { display: flex; align-items: flex-start; gap: 16px; padding: 20px 20px 0 24px; }
.modal-window-actions { display: flex; flex: none; align-items: center; gap: 2px; }
.modal-backdrop.is-expanded { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); padding: 12px; }
.modal-backdrop.is-fullscreen, .modal-backdrop:fullscreen { padding: 0; background: var(--surface); }
.modal.is-expanded { width: 100%; height: 100%; min-height: 0; max-width: none; max-height: 100%; border-radius: var(--radius-md); }
.modal-backdrop.is-fullscreen .modal { border-radius: 0; }
.modal-backdrop.is-minimized { inset: auto auto 20px max(calc(min(380px, 100vw - 32px) / 2 + 16px), calc((100vw - var(--assistant-occupied, 0px)) / 2)); z-index: 55; display: block; width: min(380px, calc(100vw - 32px)); padding: 0; transform: translateX(-50%); background: transparent; backdrop-filter: none; animation: none; }
.modal.is-minimized { max-width: none; max-height: none; border-radius: var(--radius-lg); }
.modal.is-movable .modal-header { cursor: grab; }
.modal.is-movable .modal-header :is(button, a) { cursor: pointer; }
.modal.is-moving, .modal.is-moving * { cursor: grabbing !important; user-select: none; }
.modal.is-moving { transition: none; }
@media (max-width: 640px) { .modal.is-movable:not(.is-minimized) .modal-header { cursor: auto; } }
/* 四边与四角只提供透明命中区，以方向光标提示缩放；拖动时固定对侧，尺寸按名称记在本机。 */
.modal { position: relative; }
.modal.is-sized:not(.is-expanded) { width: min(var(--modal-width), 100%); max-width: none; height: var(--modal-height); }
.modal.is-sized .modal-body { flex: 1; min-height: 0; }
.modal-resize { position: absolute; z-index: 6; touch-action: none; }
.modal-resize-n, .modal-resize-s { left: 16px; right: 16px; height: 6px; cursor: ns-resize; }
.modal-resize-e, .modal-resize-w { top: 16px; bottom: 16px; width: 6px; cursor: ew-resize; }
.modal-resize-ne, .modal-resize-se, .modal-resize-sw, .modal-resize-nw { width: 16px; height: 16px; }
.modal-resize-n, .modal-resize-ne, .modal-resize-nw { top: 0; }
.modal-resize-s, .modal-resize-se, .modal-resize-sw { bottom: 0; }
.modal-resize-e, .modal-resize-ne, .modal-resize-se { right: 0; }
.modal-resize-w, .modal-resize-nw, .modal-resize-sw { left: 0; }
.modal-resize-nw, .modal-resize-se { cursor: nwse-resize; }
.modal-resize-ne, .modal-resize-sw { cursor: nesw-resize; }
.modal.is-resizing, .modal.is-resizing * { cursor: var(--modal-resize-cursor) !important; user-select: none; }
@media (max-width: 860px), (hover: none), (pointer: coarse) { .modal-resize { display: none; } }
.modal.is-minimized.is-movable .modal-header { touch-action: none; }
.modal.is-minimized .modal-header { padding: 8px 8px 8px 12px; gap: 8px; }
.modal.is-minimized .modal-heading h2 { overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.modal.is-minimized .modal-body, .modal.is-minimized .modal-footer, .modal.is-minimized .preview-meta-date, .modal.is-minimized .preview-meta-public { display: none; }
.modal-minimized-controls { border-top: 1px solid var(--line-soft); }
/* 托盘与最小化预览都在底部中间：有最小化预览时托盘叠在它上方。 */
/* 不同类型的预览可以同时打开：只有预览窗口展开时，小窗浮在展开预览的遮罩之上（画中画），一边看图一边控制音乐或视频；
   有其他对话框（确认、分享等）时小窗仍在遮罩下，不遮挡对话框的按钮。 */
body:has(.modal-backdrop:not(.is-minimized) > .preview-modal):not(:has(.modal-backdrop:not(.is-minimized) > .modal:not(.preview-modal))) .modal-backdrop.is-minimized { z-index: 65; }
/* 最小化的视频保留画面，卡片更高。 */
/* 1100px 以下助手抽屉占满屏幕，托盘与最小化预览回到视口中线。 */
@media (max-width: 1100px) { .modal-backdrop.is-minimized { left: 50%; } }
.modal.is-expanded .modal-body { flex: 1; min-height: 0; }
.modal-heading { flex: 1; min-width: 0; padding-top: 4px; }
.modal-heading h2 { font-size: var(--text-lg); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.modal-heading p { margin-top: 4px; color: var(--ink-2); font-size: var(--text-sm); overflow-wrap: anywhere; }
.modal-icon { display: grid; width: 34px; height: 34px; flex: none; place-items: center; border-radius: var(--radius-md); }
.modal-icon.tone-accent { background: var(--accent-soft); color: var(--accent); }
.modal-icon.tone-danger { background: var(--danger-soft); color: var(--danger); }
.modal-icon.tone-warning { background: var(--warning-soft); color: var(--warning); }
.modal-icon.tone-public { background: var(--public-soft); color: var(--public); }
.modal-body { display: grid; gap: 16px; min-width: 0; padding: 20px 24px; overflow-y: auto; overscroll-behavior: contain; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line-soft); background: var(--surface-sunken); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.modal-header + .modal-footer { margin-top: 20px; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.985); } }

.menu { position: fixed; z-index: 80; min-width: 188px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-md); animation: fade .1s ease-out; }
.menu-item { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 8px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--ink); font-size: var(--text-sm); text-align: left; }
.menu-item svg { color: var(--ink-3); }
.menu-item > span { flex: 1; }
.menu-heading { padding: 8px 8px 4px; color: var(--ink-3); font-size: var(--text-xs); font-weight: 500; }
.menu-heading.has-divider { position: relative; margin-top: 4px; }
.menu-heading.has-divider::before { position: absolute; top: -1px; right: -4px; left: -4px; border-top: 1px solid var(--line-soft); content: ""; }
.menu-item .menu-check { color: var(--accent); }
.menu-item .menu-shortcut { padding: 0 4px; border: 0; background: var(--surface-sunken); color: var(--ink-3); font-family: var(--font); font-size: var(--text-micro); line-height: 18px; }
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-hover); outline: none; }
.menu-item.is-danger, .menu-item.is-danger svg { color: var(--danger); }
.menu-item.is-danger:hover { background: var(--danger-soft); }
.menu-item.has-divider { position: relative; margin-top: 8px; }
/* 深色画布上的菜单（预览窗口的窗口选项等）。 */
.menu.is-dark { border-color: var(--on-dark-8); background: var(--shade-80); box-shadow: 0 18px 48px -12px var(--shade-64); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.menu.is-dark .menu-item { color: var(--on-dark-90); }
.menu.is-dark .menu-item svg, .menu.is-dark .menu-heading, .menu.is-dark .menu-item .menu-copy small { color: var(--on-dark-56); }
.menu.is-dark .menu-item:hover, .menu.is-dark .menu-item:focus-visible { background: var(--on-dark-8); }
.menu.is-dark .menu-item .menu-shortcut { background: var(--on-dark-8); color: var(--on-dark-56); }
.menu.is-dark .menu-item.has-divider::before, .menu.is-dark .menu-heading.has-divider::before { border-top-color: var(--on-dark-8); }
/* 播放器里的菜单：和播放器一样以模糊的封面（没有封面时为色调）铺底；伪元素向外延伸再按菜单圆角裁回，模糊边缘不会发灰。 */
.menu.has-media-surface { isolation: isolate; }
.menu.has-media-surface::before { position: absolute; inset: -40px; z-index: -1; border-radius: var(--radius-md); pointer-events: none; content: "";
  background: radial-gradient(60% 70% at 25% 20%, color-mix(in srgb, var(--preview-tint, var(--accent)) 45%, transparent), transparent 75%), var(--dark-surface);
  filter: blur(28px); clip-path: inset(40px round var(--radius-md)); }
.menu.has-media-surface.has-cover::before { background: var(--preview-cover) center / cover no-repeat, var(--dark-surface); filter: blur(32px) saturate(1.6) brightness(.42); }
.menu-item.has-divider::before { position: absolute; top: -5px; right: -4px; left: -4px; border-top: 1px solid var(--line-soft); content: ""; }

.toaster { position: fixed; bottom: 24px; left: 50%; z-index: 90; display: grid; width: min(420px, calc(100vw - 32px)); gap: 8px; pointer-events: none; transform: translateX(-50%); }
.toast { display: flex; align-items: flex-start; gap: 8px; padding: 12px 12px 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-md); pointer-events: auto; animation: slide-in var(--duration-base) var(--ease-out); }
.toast span { flex: 1; min-width: 0; padding-top: 1px; word-break: break-all; }
.toast > svg { flex: none; margin-top: 1px; }
.toast button { display: grid; flex: none; width: 22px; height: 22px; place-items: center; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--ink-3); }
.toast button:hover { background: var(--surface-hover); color: var(--ink); }
.toast-success > svg { color: var(--success); }
.toast-error { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.toast-error > svg { color: var(--danger); }
.toast-info > svg { color: var(--accent); }
@keyframes slide-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------- 页面结构 ---------- */

.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.page-header-main { min-width: 0; }
.page-header h1 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -.02em; line-height: 1.3; overflow-wrap: anywhere; }
.page-header-main > p { max-width: 68ch; margin-top: 4px; color: var(--ink-3); font-size: var(--text-sm); }
.page-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* 宽屏：操作按钮始终与标题同一行垂直居中（不随说明或面包屑的有无上下移动），面包屑在标题上方，说明在下方。 */
@media (min-width: 861px) {
  .page-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; }
  .page-header-main { display: contents; }
  .page-header-main > * { grid-column: 1 / -1; grid-row: 1; }
  .page-header-main > h1 { grid-column: 1; grid-row: 2; }
  .page-header-main > p { grid-column: 1; grid-row: 3; }
  .page-header-actions { grid-column: 2; grid-row: 2; }
}

.panel { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
/* 页面面板里的表单控件限制行长：单行输入不超过 --field-width，多行文本不超过 --field-width-wide；弹窗与工具栏不受影响。 */
.panel .field > :is(.input, .input-affix, .byte-size-input):not(textarea) { max-width: var(--field-width); }
.panel .field > textarea.input { max-width: var(--field-width-wide); }
.panel-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 16px; border-bottom: 1px solid var(--line-soft); }
.panel-header-main { min-width: 0; flex: 1 1 160px; }
.panel-header h2 { font-size: var(--text-md); font-weight: 600; }
.panel-header p { margin-top: 2px; color: var(--ink-3); font-size: var(--text-sm); }
.panel-actions { display: flex; flex: none; flex-wrap: wrap; align-items: center; max-width: 100%; gap: 8px; }
.panel-body { min-width: 0; padding: 16px; }
.panel-body.is-flush { padding: 0; }

.empty-state { display: grid; justify-items: center; gap: 8px; padding: 56px 24px; text-align: center; }
.empty-icon { display: grid; width: 40px; height: 40px; margin-bottom: 8px; place-items: center; border-radius: var(--radius-md); background: var(--surface); color: var(--ink-3); box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); }
.empty-state h3 { font-size: var(--text-md); font-weight: 600; }
.empty-state p { max-width: 42ch; color: var(--ink-3); font-size: var(--text-sm); }
.empty-action { margin-top: 12px; }
/* 紧凑空状态：面板、弹窗与设置分组内使用，图标在左、文字左对齐，虚线边框表示“这里可以放东西”。 */
.empty-state.is-compact { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: start; column-gap: 16px; row-gap: 4px; padding: 16px; border: 1px dashed var(--line); border-radius: var(--radius-lg); text-align: left; }
.empty-state.is-compact .empty-icon { grid-row: span 3; width: 36px; height: 36px; margin: 0; }
.empty-state.is-compact h3 { align-self: center; }
.empty-state.is-compact p { max-width: none; line-height: 1.7; }
.empty-state.is-compact .empty-action { margin-top: 8px; }
/* 折叠区：标题行是整行按钮，箭头旋转表示展开。 */
.disclosure { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.disclosure-toggle { display: flex; width: 100%; align-items: flex-start; gap: 8px; padding: 8px 12px; border: 0; border-radius: inherit; background: none; color: var(--ink); font-family: inherit; text-align: left; cursor: pointer; transition: background-color var(--duration-fast); }
.disclosure-toggle:hover { background: var(--surface-hover); }
.disclosure-toggle > svg { flex: none; margin-top: 4px; color: var(--ink-3); transition: transform var(--duration-base) var(--ease-out); }
.disclosure.is-open .disclosure-toggle > svg { transform: rotate(90deg); }
.disclosure-toggle > span { display: grid; gap: 2px; min-width: 0; }
.disclosure-toggle strong { font-size: var(--text-sm); font-weight: 600; }
.disclosure-toggle small { color: var(--ink-3); font-size: var(--text-xs); }
.disclosure-body { display: grid; gap: 16px; padding: 4px 16px 16px 32px; }
@media (prefers-reduced-motion: reduce) { .disclosure-toggle > svg { transition: none; } }
/* 页面级标签页：下划线样式，窄屏横向滚动。 */
.tabs { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; display: inline-flex; flex: none; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 0; background: none; color: var(--ink-3); font-family: inherit; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; cursor: pointer; transition: color var(--duration-fast); }
.tab > svg { color: var(--ink-3); }
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); font-weight: 600; }
.tab.is-active > svg { color: var(--accent); }
.tab.is-active::after { position: absolute; right: 8px; bottom: -1px; left: 8px; height: 2px; border-radius: var(--radius-2xs); background: var(--accent); content: ""; }
.tab:focus-visible { outline: none; box-shadow: inset var(--focus); border-radius: var(--radius-sm); }
.tab-count { display: inline-grid; min-width: 18px; height: 18px; padding: 0 4px; place-items: center; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-2); font-size: var(--text-micro); font-variant-numeric: tabular-nums; }

.skeleton-rows { display: grid; }
.skeleton-row { display: flex; align-items: center; gap: 16px; height: 44px; padding: 0 20px; border-bottom: 1px solid var(--line-soft); }
.skeleton-row:last-child { border-bottom: 0; }
.skeleton { display: block; border-radius: var(--radius-xs); background: linear-gradient(90deg, var(--surface-sunken) 0%, var(--line-soft) 50%, var(--surface-sunken) 100%); background-size: 200% 100%; animation: shimmer 1.3s ease-in-out infinite; }
.skeleton-icon { width: 22px; height: 24px; flex: none; border-radius: var(--radius-xs); }
.skeleton-line { height: 11px; }
.skeleton-short { width: 72px; margin-left: auto; }
@keyframes shimmer { to { background-position: -200% 0; } }

.progress { height: 4px; overflow: hidden; border-radius: var(--radius-pill); background: var(--line-soft); }
.progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--duration-base) ease-out; }
.progress-warning span { background: var(--warning); }
.progress-danger span { background: var(--danger); }
.progress-success span { background: var(--success); }
.progress-neutral span { background: var(--ink-3); }
.progress-public span { background: var(--public); }

.copy-field { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-sunken); }
.copy-field input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--ink); font-family: var(--font-mono); font-size: var(--text-xs); text-overflow: ellipsis; }

.key-value { display: grid; gap: 0; margin: 0; }
.key-value > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.key-value > div:first-child { padding-top: 0; }
.key-value > div:last-child { padding-bottom: 0; border-bottom: 0; }
.key-value dt { color: var(--ink-2); font-size: var(--text-sm); }
.key-value dd { min-width: 0; margin: 0; }

.avatar { display: grid; width: 32px; height: 32px; flex: none; place-items: center; border-radius: 50%; font-size: var(--text-sm); font-weight: 600; }
.avatar-accent { background: var(--accent-soft); color: var(--accent-ink); }
.avatar-admin { background: var(--admin-soft); color: var(--admin); }
.avatar-image { object-fit: cover; background: var(--surface-hover); }

/* ---------- 应用外壳 ---------- */

.shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; transition: grid-template-columns var(--duration-base) var(--ease-out); }
/* 侧栏：顶部一抹主色柔光向下淡入底色，右缘用细线与内容区分开。 */
.sidebar { position: sticky; top: 0; display: flex; height: 100vh; height: 100dvh; flex-direction: column; overflow: hidden; border-right: 1px solid var(--line); background:
  radial-gradient(120% 38% at 0% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
  linear-gradient(180deg, color-mix(in srgb, var(--surface) 55%, var(--surface-sunken)), var(--surface-sunken) 46%); }
.sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 68px; padding: 0 12px 0 24px; }
.sidebar-top .brand { min-width: 0; }
.sidebar-rail-toggle { color: var(--ink-3); }
.sidebar-close { display: none; }
.sidebar-nav { display: grid; align-content: start; flex: 1; gap: 16px; padding: 4px 12px 16px; overflow-y: auto; scrollbar-width: thin; }
.sidebar-action { padding: 0 12px 12px; }
/* 分组：标题是可点击的小字按钮，右侧箭头指示展开状态；列表用网格行高过渡收起，收起后不能被 Tab 到。 */
.nav-group { display: grid; gap: 2px; }
.nav-group-toggle { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-3); font-family: inherit; font-size: var(--text-xs); font-weight: 500; text-align: left; cursor: pointer; transition: color var(--duration-fast), background-color var(--duration-fast); }
.nav-group-toggle > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group-toggle > svg { flex: none; opacity: 0; transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-fast); }
.nav-group-toggle:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--ink-2); }
.nav-group-toggle:hover > svg, .nav-group-toggle:focus-visible > svg, .nav-group.is-collapsed .nav-group-toggle > svg { opacity: 1; }
.nav-group.is-collapsed .nav-group-toggle > svg { transform: rotate(-90deg); }
/* 收起的分组里有当前页时，标题旁一个小圆点（选择器带上父级，不被标题文字的 flex: 1 拉成长条）。 */
.nav-group-toggle > .nav-group-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--accent); }
.nav-group-items { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--duration-base) var(--ease-out); }
.nav-group.is-collapsed .nav-group-items { grid-template-rows: 0fr; }
.nav-group-list { display: grid; gap: 2px; min-height: 0; overflow: hidden; }
.nav-group.is-collapsed .nav-group-list { visibility: hidden; transition: visibility 0s var(--duration-base); }
@media (hover: none) { .nav-group-toggle > svg { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nav-group-items, .nav-group-toggle > svg, .nav-group.is-collapsed .nav-group-list { transition: none; } }
/* 当前项用主色区分，细标记与图标共同提示所在页面。 */
.nav-item { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; height: 36px; padding: 0 8px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-2); font-size: var(--text-sm); font-weight: 500; text-align: left; text-decoration: none; transition: background-color var(--duration-fast), color var(--duration-fast); }
.nav-item > svg { flex: none; color: var(--ink-3); transition: color var(--duration-fast); }
.nav-item:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.nav-item:hover > svg { color: var(--ink-2); }
.nav-item.is-active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.nav-item.is-active::before { position: absolute; top: 10px; bottom: 10px; left: 0; width: 2px; border-radius: var(--radius-pill); background: var(--accent); content: ""; }
.nav-item.is-active > svg { color: var(--accent); }
.nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-count { display: inline-grid; min-width: 20px; height: 20px; padding: 0 8px; place-items: center; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-2); font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; }
.nav-item.is-active .nav-count { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-ink); }
/* 侧栏收藏：可拖动排序，拖入文件夹即可固定；插入位置用 2px 强调色细线提示，已不存在的文件夹淡化。 */
.nav-favorites { display: grid; gap: 2px; min-height: 8px; border-radius: var(--radius-md); }
.nav-favorites.is-dropping:not(:has(.nav-favorite)) { outline: 1px dashed var(--accent); outline-offset: -1px; background: var(--accent-soft); }
.nav-favorite.is-missing { opacity: .5; }
.nav-favorite.is-dragging { opacity: .4; }
.nav-favorite.drop-before::after, .nav-favorite.drop-after::after { position: absolute; right: 4px; left: 4px; height: 2px; border-radius: var(--radius-pill); background: var(--accent); content: ""; }
.nav-favorite.drop-before::after { top: -2px; }
.nav-favorite.drop-after::after { bottom: -2px; }
.nav-favorite-lock { flex: none; color: var(--ink-3); }
.is-rail .nav-favorite-lock { display: none; }
/* 收藏图标选择：五列网格，图标在上、名称在下；当前图标用强调色边框。 */
.favorite-icon-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.favorite-icon-option { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--ink-2); font-size: var(--text-xs); cursor: pointer; transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast); }
.favorite-icon-option:hover { background: var(--surface-hover); color: var(--ink); }
.favorite-icon-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.favorite-icon-option.is-selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.nav-favorites-empty { margin: 0; padding: 4px 8px 8px; color: var(--ink-3); font-size: var(--text-xs); line-height: 1.5; }
.nav-favorites-empty.is-armed, .nav-favorites-drop { border: 1px dashed var(--line-strong); border-radius: var(--radius-md); color: var(--ink-2); }
.nav-favorites-empty.is-armed { padding: 8px; }
/* 拖动时出现在收藏末尾的放置区：指针移入时改为强调色。 */
.nav-favorites-drop { display: flex; align-items: center; justify-content: center; height: 36px; margin-top: 4px; font-size: var(--text-xs); }
.nav-favorites-drop.is-over, .nav-favorites.is-dropping .nav-favorites-empty { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.nav-external { color: var(--ink-3); }
.sidebar-bottom { display: grid; gap: 8px; padding: 8px 12px 12px; border-top: 1px solid var(--line); }
.sidebar-links { display: grid; }
.sidebar-link { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: var(--radius-md); color: var(--ink-3); font-size: var(--text-xs); font-weight: 500; text-decoration: none; transition: background-color var(--duration-fast), color var(--duration-fast); }
.sidebar-link > span { flex: 1; }
.sidebar-link:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.account-row { display: flex; align-items: center; gap: 8px; padding: 8px 2px 0 8px; border-top: 1px solid var(--line); }

/* ---------- 图标栏：桌面侧栏收起后只留图标、助手入口与头像；悬停显示名称（title）。窄屏抽屉不受影响。 ---------- */
@media (min-width: 861px) {
  .shell.is-rail { --sidebar-width: 68px; }
  .is-rail .sidebar-top { flex-direction: column; justify-content: center; gap: 8px; height: auto; padding: 16px 0 16px; }
  .is-rail .sidebar-top .brand-text, .is-rail .sidebar-top .brand-name { display: none; }
  .is-rail .workspace-switch { padding: 0 8px 12px; }
  .is-rail .workspace-switch .segmented { flex-direction: column; }
  .is-rail .workspace-switch .segmented button { position: relative; flex: none; justify-content: center; width: 100%; height: 34px; padding: 0; }
  .is-rail .workspace-switch .segmented button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .is-rail .sidebar-action { padding: 0 8px 12px; }
  .is-rail .sidebar-nav { gap: 0; padding: 4px 8px 12px; }
  .is-rail .nav-group + .nav-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
  .is-rail .nav-group-toggle { display: none; }
  .is-rail .nav-item { justify-content: center; height: 40px; padding: 0; }
  .is-rail .nav-item > .nav-label, .is-rail .nav-item > .nav-external { display: none; }
  .is-rail .nav-item.is-active::before { top: 12px; bottom: 12px; }
  .is-rail .nav-count { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; font-size: var(--text-micro); }
  .is-rail .sidebar-bottom { justify-items: center; padding: 8px 8px 12px; }
  .is-rail .sidebar-bottom .storage-meter { display: none; }
  .is-rail .system-chip { justify-content: center; padding: 8px 0; color: var(--warning); }
  .is-rail .system-chip > span { display: none; }
  .is-rail .sidebar-links { width: 100%; }
  .is-rail .sidebar-link { justify-content: center; height: 36px; padding: 0; }
  .is-rail .sidebar-link > span, .is-rail .sidebar-link > .nav-external { display: none; }
  .is-rail .account-row { justify-content: center; width: 100%; padding: 8px 0 0; }
  .account-rail-avatar.icon-btn { width: 40px; height: 40px; border-radius: 50%; }
}
@media (max-width: 860px) { .sidebar-rail-toggle { display: none; } }
.account-copy { display: grid; flex: 1; min-width: 0; }
.account-copy strong { overflow: hidden; font-size: var(--text-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.account-copy small { color: var(--ink-3); font-size: var(--text-xs); }

/* 存储卡片：已用容量是主数字，配额与百分比作为说明；有配额时显示进度条。 */
.storage-meter { display: grid; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.storage-meter-head { display: flex; align-items: baseline; justify-content: space-between; color: var(--ink-3); font-size: var(--text-xs); font-weight: 500; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font-family: inherit; }
.storage-meter-head > span { display: inline-flex; align-items: center; gap: 2px; }
.storage-meter-head > span svg { transition: transform var(--duration-fast) ease; }
.storage-meter.is-open .storage-meter-head > span svg { transform: rotate(180deg); }
.storage-meter-head:hover { color: var(--ink-2); }
.storage-meter-head:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-xs); }
.storage-meter-detail { display: grid; gap: 8px; margin: 2px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line); }
.storage-meter-loading { color: var(--ink-3); font-size: var(--text-xs); }
/* 用户数据与系统数据的占比条：两段按大小伸缩，颜色与分组标题前的圆点对应。 */
.storage-split { display: flex; gap: 2px; height: 4px; overflow: hidden; border-radius: var(--radius-xs); }
.storage-split > span { min-width: 2px; border-radius: var(--radius-xs); }
.storage-split > .is-user, .storage-dot.is-user { background: var(--accent); }
.storage-split > .is-system, .storage-dot.is-system { background: var(--ink-3); }
.storage-group { display: grid; gap: 4px; }
.storage-group h4 { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 0; color: var(--ink-2); font-size: var(--text-xs); font-weight: 600; }
.storage-dot { justify-self: center; width: 6px; height: 6px; border-radius: 50%; }
.storage-group ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.storage-meter-detail li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 8px; color: var(--ink-3); font-size: var(--text-xs); }
.storage-meter-detail li > svg { opacity: .8; }
.storage-meter-detail strong { color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.storage-meter-head strong { color: var(--ink-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.storage-meter p { color: var(--ink-3); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

/* 系统状态：正常时是一行带状态点的小字，锁定时是琥珀色提示条。 */
.system-chip { display: flex; text-decoration: none; align-items: center; gap: 8px; width: 100%; padding: 4px 8px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-2); text-align: left; }
.system-chip span { display: grid; }
.system-chip strong { font-size: var(--text-sm); font-weight: 500; }
.system-chip small { color: var(--ink-2); font-size: var(--text-xs); }
.system-chip:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.system-chip.is-locked { padding: 8px 8px; background: var(--warning-soft); color: var(--warning); }
.system-chip.is-locked:hover { background: color-mix(in srgb, var(--warning) 16%, transparent); }

.main { min-width: 0; outline: none; }
.main-inner { width: 100%; max-width: var(--content-width); margin: 0 auto; padding: 28px 36px 96px; }
.mobile-bar, .drawer-scrim { display: none; }

/* ---------- 登录与初始化 ---------- */

/* 瓦片墙在左、表单在右；DOM 里表单仍在前面，键盘和读屏先到达表单。 */
.auth { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, 1fr); min-height: 100vh; min-height: 100dvh; background: var(--surface); }
.auth-form-pane { order: 2; display: flex; flex-direction: column; padding: 32px 48px; }
.auth-form-wrap { width: 100%; max-width: 360px; margin: auto; padding: 48px 0; }
.auth-form-wrap h1 { font-family: var(--font-display); font-size: var(--text-display); font-weight: 600; letter-spacing: -.025em; }
.auth-description { margin: 8px 0 28px; color: var(--ink-3); }
.auth-footer { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--ink-3); font-size: var(--text-sm); }
.auth-footer a { color: var(--ink-2); }
.auth-footer a:hover { color: var(--accent); }

.auth-visual { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 56px 56px 52px; overflow: hidden; background: var(--logo-bg); color: var(--on-dark); isolation: isolate; }
.auth-visual::before { position: absolute; inset: -20% auto auto -10%; z-index: -1; width: 80%; aspect-ratio: 1; background: radial-gradient(closest-side, var(--on-dark-8), transparent); content: ""; }
.auth-admin .auth-visual { background: var(--dark-surface-deep); }
.auth-admin .auth-visual::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--admin) 30%, transparent), transparent); }
.mosaic { display: grid; grid-template-columns: repeat(16, 1fr); gap: 8px; width: 100%; max-width: 620px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 45% 35%, var(--black) 35%, transparent 78%); mask-image: radial-gradient(ellipse 70% 80% at 45% 35%, var(--black) 35%, transparent 78%); }
.mosaic i { aspect-ratio: 1; border-radius: 24%; background: transparent; box-shadow: inset 0 0 0 1px var(--on-dark-8); animation: tile-in .6s var(--ease-out) backwards; }
.mosaic .t2 { background: var(--on-dark-4); }
.mosaic .t3 { background: var(--on-dark-12); box-shadow: inset 0 0 0 1px var(--on-dark-16); }
.mosaic .t4 { background: var(--on-dark-24); box-shadow: none; }
.mosaic .t5 { background: var(--on-dark-56); box-shadow: none; }
.mosaic .plane { border-radius: 16%; background: var(--logo-plane); box-shadow: none; clip-path: polygon(0 0, 100% 0, 100% 100%); }
@keyframes tile-in { from { opacity: 0; transform: scale(.5); } }
.auth-visual-copy { display: grid; gap: 24px; max-width: 460px; }
.auth-visual-copy h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-display); font-weight: 600; letter-spacing: -.025em; line-height: 1.3; }
.auth-motto { display: grid; gap: 16px; }
.auth-motto h2 { font-family: var(--font-serif); font-weight: 600; letter-spacing: .14em; }
.auth-motto p { margin: 0; color: var(--on-dark-56); font-family: var(--font-serif); font-size: var(--text-md); letter-spacing: .04em; line-height: 1.9; }
.auth-points { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.auth-points li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; color: var(--on-dark-72); font-size: var(--text-sm); line-height: 1.6; }
.auth-points .icon-wrap { display: grid; width: 28px; height: 28px; place-items: center; border-radius: var(--radius-sm); background: var(--on-dark-4); box-shadow: inset 0 0 0 1px var(--on-dark-8); color: var(--on-dark-90); }

/* ---------- 文件 ---------- */

.file-tile { display: grid; flex: none; place-items: center; color: var(--glyph-mark); }
.file-glyph { display: block; overflow: visible; }
.glyph-paper { fill: var(--glyph-paper); stroke: var(--glyph-edge); stroke-width: 1; stroke-linejoin: round; }
.glyph-fold { fill: none; stroke: var(--glyph-edge); stroke-width: 1; stroke-linejoin: round; }
.glyph-fill { fill: currentColor; }
.glyph-stroke { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.glyph-label { fill: var(--glyph-paper); font-family: var(--font); font-size: 4.1px; font-weight: 700; letter-spacing: .02em; }
.folder-back { fill: var(--folder-back); }
.folder-front { fill: var(--folder-front); }
.tile-lg .glyph-paper, .tile-lg .glyph-fold { stroke-width: 1.15; }
.tile-xl .glyph-paper, .tile-xl .glyph-fold { stroke-width: 1.5; }
/* 缩略图：与类型图标同尺寸的圆角小图，细描边避免浅色图片与背景融在一起。 */
.file-visual { position: relative; overflow: hidden; border-radius: var(--radius-xs); background: var(--surface-sunken); }
.file-visual::after { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); content: ""; }
.file-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.file-visual.tile-md { width: 24px; height: 24px; }
.file-visual.tile-lg { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.file-visual.tile-xl { width: 56px; height: 56px; border-radius: var(--radius-lg); }

.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-bottom: 8px; color: var(--ink-3); font-size: var(--text-sm); }
.breadcrumbs > span { display: inline-flex; align-items: center; gap: 2px; }
.breadcrumbs button { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--ink-2); }
.breadcrumbs button:hover { background: var(--surface-hover); color: var(--ink); }
.breadcrumbs button[aria-current="page"], .crumb-current { color: var(--ink); font-weight: 500; }
.crumb-current { padding: 0 8px; }
.files-view .page-header-main { flex: 1; }
.files-view .page-header-actions { flex: none; }
.file-breadcrumbs { display: block; max-width: 100%; margin-bottom: 8px; padding: 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.file-breadcrumbs::-webkit-scrollbar { display: none; }
.file-breadcrumbs ol { display: flex; align-items: center; gap: 4px; width: max-content; min-width: 100%; margin: 0; padding: 0; list-style: none; }
.file-breadcrumbs li { display: inline-flex; flex: none; align-items: center; gap: 4px; }
.file-breadcrumbs li > svg { flex: none; color: var(--ink-3); }
.file-breadcrumbs button, .file-breadcrumbs .crumb-current { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: var(--radius-sm); color: var(--ink-3); white-space: nowrap; }
.file-breadcrumbs .crumb-label { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; }
.file-breadcrumbs button[aria-current="page"], .file-breadcrumbs .crumb-current { background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }
.file-breadcrumbs button[aria-current="page"] .crumb-label { max-width: 28ch; }
.file-breadcrumbs button:focus-visible { outline-offset: -2px; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin-bottom: 12px; }
.toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.selection-bar { padding: 4px 4px 4px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-md); }
.selection-count { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }

.file-surface { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.file-surface + .panel, .file-surface + .list-footer + .panel { margin-top: 20px; }
.file-surface.is-dragging { border-color: var(--accent); }
.drop-overlay { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 8px; border: 2px dashed var(--accent); border-radius: inherit; background: color-mix(in srgb, var(--accent-soft) 88%, transparent); color: var(--accent-ink); pointer-events: none; }

/* 数据表：每张表通过 --cols 定义列宽，行使用同一网格对齐。 */
.data-table { --cols: minmax(0, 1fr) 120px; display: grid; }
.table-scroll { position: relative; min-width: 0; overflow-x: auto; }
.data-row { display: grid; grid-template-columns: var(--cols); align-items: center; gap: 16px; min-height: 44px; padding: 8px 16px; border-bottom: 1px solid var(--line-soft); font-size: var(--text-sm); transition: background-color var(--duration-fast); }
.file-table .data-row { content-visibility: auto; contain-intrinsic-size: 44px; }
.data-row:last-child { border-bottom: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.data-head { min-height: 34px; padding-top: 0; padding-bottom: 0; border-bottom-color: var(--line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--surface-sunken); color: var(--ink-3); font-size: var(--text-xs); font-weight: 500; }
.data-row.is-clickable { cursor: pointer; }
.data-row:not(.data-head):hover { background: var(--surface-hover); }
.data-row.is-selected, .data-row.is-selected:hover { background: var(--accent-soft); }
.data-row > * { min-width: 0; }
.cell-check { display: flex; align-items: center; }
.cell-name, .cell-user { display: flex; align-items: center; gap: 8px; }
.cell-size, .cell-date { font-variant-numeric: tabular-nums; }
/* 数值列右对齐，位数对齐便于比较；排序箭头放在标题左侧，标题与数字右缘对齐。 */
.cell-size, .cell-count { text-align: right; white-space: nowrap; }
.cell-size > .sort-button, .cell-count > .sort-button { flex-direction: row-reverse; }
.cell-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
/* 预览头部的缓存按钮：完整缓存显示硬盘图标，手动实心、自动空心（同为中性色）；部分缓存显示进度。 */
.file-cache-button { display: inline-flex; flex: none; gap: 4px; width: auto; min-width: 28px; padding-inline: 8px; font-size: var(--text-micro); font-variant-numeric: tabular-nums; }
.file-cache-button.is-active { color: var(--accent); }
.file-cache-ring { width: 18px; height: 18px; fill: none; stroke-width: 2; transform: rotate(-90deg); }
/* 列表与网格的缓存状态：跟在文件名后，完整缓存只显示图标，进度与失败保留文字。 */
.file-cache-status { display: inline-flex; flex: none; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border: 0; border-radius: var(--radius-xs); background: var(--surface-sunken); color: var(--ink-3); font: inherit; font-size: var(--text-micro); font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; }
.file-cache-status:hover { color: var(--ink); }
.file-cache-status:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
/* 手动缓存用实心硬盘图标、自动缓存用空心图标，颜色相同，不靠颜色区分。 */
.file-cache-status.is-complete { justify-content: center; width: 24px; height: 24px; padding: 0; background: transparent; color: var(--ink-3); }
.file-cache-status.is-active { color: var(--accent); }
.file-cache-status.is-error { background: var(--danger-soft); color: var(--danger); }
.file-cache-status .file-cache-ring { width: 12px; height: 12px; stroke-width: 2.6; }
.grid-cache { position: absolute; right: 8px; bottom: 8px; box-shadow: 0 0 0 1px var(--line); background: var(--surface); }
.grid-cache.is-complete { background: var(--surface); }
.cell-strong { font-weight: 600; }
.cell-usage { display: grid; gap: 8px; max-width: 220px; }
.usage-text { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.name-stack { display: grid; min-width: 0; }
.name-stack strong, .name-stack small, .name-button { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.name-stack small { color: var(--ink-3); font-size: var(--text-xs); }
.name-stack strong .badge { margin-left: 8px; vertical-align: 1px; }
.data-row .name-stack strong, .data-row .name-stack .name-button { line-height: 1.4; }
.data-row .name-stack small { font-size: var(--text-xs); line-height: 1.35; }
.name-button { max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--ink); font-weight: 500; text-align: left; }
.name-button:hover { color: var(--accent); }
.name-button:focus-visible { border-radius: var(--radius-xs); outline-offset: 1px; }
.cell-name .name-button { flex: 0 1 auto; }
.file-mobile-meta, .mobile-file-sort { display: none; }
.mobile-file-sort { position: relative; align-items: center; min-width: 0; }
.mobile-file-sort.is-grid-sort { display: flex; }
.mobile-file-sort select { appearance: none; max-width: 130px; height: 34px; padding: 0 28px 0 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-2); font-size: var(--text-xs); }
.mobile-file-sort > svg { position: absolute; right: 8px; color: var(--ink-3); pointer-events: none; }
.file-table .cell-name .name-stack { flex: 0 1 auto; }
.row-quick { opacity: 0; transition: opacity var(--duration-fast); }
/* 名称下方的位置：小号三级色、带文件夹图标的面包屑，与文件名拉开主次。 */
.item-location { display: flex; min-width: 0; align-items: center; gap: 4px; color: var(--ink-3); font-size: var(--text-xs); }
.item-location > svg { flex: none; opacity: .8; }
.item-location > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-location-count { flex: none; }
.shared-table .item-location-count { display: none; }
.shared-table .cell-name .name-button { font-weight: 500; }
.cell-count { font-variant-numeric: tabular-nums; }
.data-row:hover .row-quick, .data-row:focus-within .row-quick { opacity: 1; }
.sort-button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: inherit; font-weight: inherit; }
.sort-button svg { opacity: 0; transition: transform var(--duration-fast), opacity var(--duration-fast); }
.sort-button:hover svg, .sort-button.is-active svg { opacity: 1; }
.sort-button.is-active { color: var(--ink); }
.is-flipped { transform: rotate(180deg); }

.file-table { --cols: 20px minmax(0, 1fr) 88px 96px 132px 76px; }
.shared-table { --cols: minmax(0, 1fr) 80px 88px 72px 104px 76px; }
.keys-table { --cols: minmax(120px, 1fr) minmax(0, 1.4fr) 90px 110px 76px; }
.users-table { --cols: minmax(160px, 1.2fr) minmax(160px, 1fr) 90px 110px 120px; }
.btn-ghost-danger { color: var(--danger); }
.btn-ghost-danger:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger); }
.cell-note { font-size: var(--text-xs); white-space: nowrap; }
.objects-table { --cols: minmax(0, 2fr) minmax(80px, .7fr) 88px 90px 110px 44px; }
.bots-table { --cols: minmax(160px, 1fr) minmax(150px, .8fr) 100px 100px 90px minmax(140px, 1fr) 76px; min-width: 990px; }
.bots-table .data-head > span, .bots-table .cell-size { white-space: nowrap; }
.channel-storage-note { margin: 8px 0 20px; color: var(--ink-3); font-size: var(--text-sm); }
.clients-table { --cols: minmax(160px, 1fr) 110px minmax(0, 1.4fr) 90px 56px; }

.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; padding: 16px; }
/* 网格视图不再套一层边框容器：文件夹是紧凑横条，文件才是卡片。 */
.file-surface.is-grid { border: 0; background: transparent; }
.file-surface.is-grid .file-grid { padding: 0; }
.grid-layout { display: grid; gap: 20px; }
.grid-section { display: grid; gap: 8px; }
.grid-section-title { color: var(--ink-3); font-size: var(--text-xs); font-weight: 500; }
.folder-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 8px; }
/* 文件夹卡片：左侧 48px 封面（内部图片拼成的预览或文件夹图标），名称最多两行，下面是公开状态与大小。 */
.folder-card { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; min-height: 72px; padding: 8px 4px 8px 8px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; transition: border-color var(--duration-fast), background-color var(--duration-fast), box-shadow var(--duration-fast); }
.folder-card:hover { border-color: var(--line-strong); background: var(--surface-hover); }
.folder-card.is-selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.folder-card.is-drop-target { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.folder-card-lead { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--surface-sunken); }
.folder-card-lead > .file-tile { background: transparent; }
.folder-cover { position: relative; display: grid; gap: 2px; width: 48px; height: 48px; overflow: hidden; border-radius: var(--radius-md); background: var(--line-soft); }
.folder-cover.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.folder-cover.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.folder-cover img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; background: var(--surface-sunken); }
.folder-cover-mark { position: absolute; right: 2px; bottom: 2px; display: grid; place-items: center; width: 20px; height: 18px; border-radius: var(--radius-xs); background: var(--surface); box-shadow: var(--shadow-sm); }
/* 勾选框浮在封面左上角：悬停或已选中时出现，不遮住封面，也不额外占位。 */
.folder-card-check { position: absolute; top: -6px; left: -6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); opacity: 0; transition: opacity var(--duration-fast); }
.folder-card:hover .folder-card-check, .folder-card.is-selected .folder-card-check, .folder-card-check:focus-within { opacity: 1; }
.folder-card-copy { display: grid; gap: 4px; min-width: 0; }
.folder-card-name { display: block; min-width: 0; max-height: 40px; overflow: hidden; font-size: var(--text-sm); font-weight: 500; line-height: 20px; text-align: left; }
.folder-card-name-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; white-space: normal; }
.folder-card-sub { display: flex; align-items: center; gap: 8px; overflow: hidden; color: var(--ink-3); font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.folder-card-public { display: inline-flex; align-items: center; gap: 4px; color: var(--public-ink); }
.folder-card .grid-menu { grid-row: auto; grid-column: auto; align-self: start; }
.grid-extension { position: absolute; bottom: 8px; right: 10px; color: var(--ink-3); font-size: var(--text-micro); font-weight: 600; letter-spacing: .04em; }
/* 键盘焦点所在项：只在键盘操作时显示，不干扰鼠标用户。 */
/* 触屏没有悬停：勾选框常驻，仍浮在封面角上。 */
@media (hover: none) {
  .folder-card-check { opacity: 1; }
}
:root[data-input="keyboard"] .data-row.is-cursor { box-shadow: inset 2px 0 0 var(--accent); background: var(--surface-hover); }
:root[data-input="keyboard"] .grid-card.is-cursor, :root[data-input="keyboard"] .folder-card.is-cursor { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.grid-card { position: relative; min-width: 0; display: grid; grid-template-rows: auto auto; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.grid-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.grid-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.grid-thumb { position: relative; width: 100%; aspect-ratio: 4 / 3; min-width: 0; min-height: 0; overflow: hidden; display: grid; place-items: center; border-bottom: 1px solid var(--line-soft); background: var(--surface-sunken); }
.grid-thumb img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.grid-check { position: absolute; top: 8px; left: 8px; display: grid; padding: 4px; border-radius: var(--radius-xs); background: var(--surface); opacity: 0; transition: opacity var(--duration-fast); }
.grid-card:hover .grid-check, .grid-card.is-selected .grid-check, .grid-check:focus-within { opacity: 1; }
.grid-public { position: absolute; top: 8px; right: 8px; }
.grid-meta { display: grid; min-width: 0; min-height: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: start; row-gap: 4px; padding: 8px 4px 8px 12px; }
.grid-name { display: block; width: 100%; min-width: 0; min-height: 0; overflow: hidden; appearance: none; -webkit-appearance: none; font-size: var(--text-sm); font-weight: 500; text-align: left; }
/* 文件名最多两行：同一批文件常有相同的前缀，只显示一行时难以区分。 */
.grid-name-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-width: 0; max-height: 40px; overflow: hidden; line-height: 20px; overflow-wrap: anywhere; white-space: normal; }
.grid-sub { grid-row: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: var(--text-xs); }
.grid-menu { grid-row: 1 / 3; grid-column: 2; }
.shared-grid-card { grid-template-rows: auto 86px; }
.grid-share-meta { grid-column: 1 / -1; overflow: hidden; color: var(--ink-3); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.grid-share-badges { display: grid; justify-items: end; gap: 4px; }

/* 拖放移动：文件夹行、网格卡片与面包屑在可放置时高亮 */
.data-row[draggable="true"], .grid-card[draggable="true"] { -webkit-user-drag: element; }
.data-row.is-drop-target, .data-row.is-drop-target:hover, .grid-card.is-drop-target { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.breadcrumbs button.is-drop-target { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1.5px var(--accent); }

/* 移动对话框 */
.move-browser { display: grid; gap: 12px; }
.move-scope-toggle { display: flex; align-items: center; gap: 8px; }
.move-scope-toggle button { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-2); font: inherit; cursor: pointer; }
.move-scope-toggle button.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.move-scope-toggle button:disabled { opacity: .5; cursor: not-allowed; }
.move-scope-toggle > span { font-size: var(--text-xs); }
.move-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.move-head .breadcrumbs { margin: 0; }
.move-list { display: grid; align-content: start; min-height: 132px; max-height: 280px; padding: 4px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); }
.move-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-3); text-align: left; }
.move-item:hover:not(:disabled) { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.move-item.is-disabled { cursor: not-allowed; opacity: .55; }
.move-name { flex: 1; min-width: 0; overflow: hidden; color: var(--ink); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.move-new { display: grid; gap: 12px; min-width: 0; padding: 12px; border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); }
.move-new > .field { min-width: 0; }
.move-new-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.destination-picker { min-width: 0; }
.destination-summary { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink-2); }
.destination-summary > div { display: grid; flex: 1; min-width: 0; gap: 4px; }
.destination-summary .field-label { color: var(--ink-3); font-size: var(--text-xs); }
.destination-summary strong { overflow: hidden; color: var(--ink); font-size: var(--text-sm); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.destination-browser { padding-top: 16px; }
/* 在线解压 */
.extract-form, .extract-progress { display: grid; gap: 16px; }
.extract-form .muted, .extract-progress .muted { margin: 0; font-size: var(--text-sm); }
.extract-destination { margin-top: -8px !important; overflow-wrap: anywhere; }
.extract-picker { max-height: 280px; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.extract-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.extract-failures summary { cursor: pointer; font-size: var(--text-sm); color: var(--ink-2); }
.extract-failures ul { display: grid; gap: 4px; max-height: 200px; margin: 8px 0 0; padding: 0; overflow: auto; list-style: none; font-size: var(--text-sm); }
.extract-failures li { display: grid; gap: 0; }
.extract-failures li strong { font-weight: 500; overflow-wrap: anywhere; }
.extract-failures li span { color: var(--danger); }
.settings-disclosure { min-width: 0; border-top: 1px solid var(--line-soft); }
.settings-disclosure > summary { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; list-style: none; font-weight: 500; }
.settings-disclosure > summary::-webkit-details-marker { display: none; }
.settings-disclosure > summary > svg:last-child { margin-left: auto; color: var(--ink-3); transition: transform var(--duration-fast); }
.settings-disclosure[open] > summary > svg:last-child { transform: rotate(180deg); }
.disclosure-meta { margin-left: auto; color: var(--ink-3); font-size: var(--text-xs); font-weight: 400; }
.settings-disclosure > summary .disclosure-meta + svg { margin-left: 0; }
/* 旧式 details 的内容通栏排列，只在自身范围内清除左右内边距。 */
.settings-disclosure > .disclosure-body { padding: 4px 0 16px; }
.share-save-status { margin-top: -8px; color: var(--ink-3); font-size: var(--text-xs); }
.preview-recovery { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.file-thumbnail { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; }
.file-thumbnail.thumbnail-loading img:not(.thumbnail-placeholder) { opacity: 0; }
/* 网格卡片：大图到达前先铺列表小图（轻微模糊掩盖放大），大图叠在上面淡入。 */
.file-thumbnail img.thumbnail-placeholder { filter: blur(6px); transform: scale(1.04); }
.thumbnail-loading { position: absolute; right: 10px; bottom: 10px; color: var(--ink-3); }
.thumbnail-badge { position: absolute; left: 8px; bottom: 8px; display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--shade-64); color: var(--on-dark); backdrop-filter: blur(4px); }
.file-thumbnail .btn { z-index: 1; }
.folder-thumbnail { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; }
.folder-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 4px; width: min(100%, 132px); aspect-ratio: 1; }
.folder-preview-cell { position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius-xs); background: var(--surface); }
.folder-preview-cell.is-empty { background: var(--surface-hover); }
.folder-preview-cell .file-tile { width: 100%; height: 100%; border-radius: 0; }
.folder-preview-cell img { object-fit: cover; }
.folder-preview-badge { position: absolute; left: 8px; bottom: 6px; display: grid; place-items: center; width: 28px; height: 26px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.move-empty { padding: 32px 16px; color: var(--ink-3); font-size: var(--text-sm); text-align: center; }
.move-error { padding: 8px 8px; }
.move-list .skeleton-row { padding: 0 8px; }
.move-conflict { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink-2); font-size: var(--text-sm); }

.list-footer-summary { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.list-footer-summary > .link-button { display: inline-flex; align-items: center; gap: 4px; }
.list-footer-end { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-left: auto; }
.link-button.shortcut-hint { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); font-size: var(--text-xs); text-decoration: none; }
.link-button.shortcut-hint:hover { color: var(--ink); }
.key-value kbd + kbd { margin-left: 2px; }
.shortcuts-dialog .segmented { display: flex; margin-bottom: 20px; }
.shortcuts-dialog .segmented button { flex: 1; justify-content: center; }
.shortcut-note { margin-top: 16px; line-height: 1.6; }
.list-sentinel { height: 1px; }
.list-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 8px 2px; color: var(--ink-3); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--ink-2); }
.pagination > span { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pagination-size { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.pagination-size .input { width: auto; min-width: 86px; min-height: 32px; padding: 4px 8px; font-size: var(--text-xs); }
.folder-destination { font-size: var(--text-sm); overflow-wrap: anywhere; }

/* 预览 */
.preview-modal { overflow: hidden; }
.preview-modal-text { max-width: 880px; }
.preview-modal-audio { max-width: 860px; }
.preview-modal-video { max-width: 1120px; }
.preview-modal .modal-header { align-items: center; gap: 12px; padding: 16px 16px 16px 20px; border-bottom: 1px solid var(--line-soft); }
.preview-modal .modal-body { padding: 0; }
.preview-modal .modal-heading { padding-top: 0; }
.preview-modal .modal-heading h2 { font-size: var(--text-md); }
.preview-modal .modal-heading p { margin-top: 2px; font-size: var(--text-xs); }
.preview-modal-text .modal-icon { color: var(--tile-text); background: var(--tile-text-bg); }
.preview-modal-code .modal-icon { color: var(--tile-code); background: var(--tile-code-bg); }
.preview-modal-audio .modal-icon { color: var(--tile-audio); background: var(--tile-audio-bg); }
.preview-modal-video .modal-icon { color: var(--tile-video); background: var(--tile-video-bg); }
.preview-modal .modal-heading h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.preview-meta { display: flex; align-items: center; min-width: 0; overflow: hidden; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.preview-meta > span { flex: none; }
/* 空间不够时先省略类型，大小始终完整显示。 */
.preview-meta > span:first-child { flex: 0 1 auto; min-width: 2em; overflow: hidden; text-overflow: ellipsis; }
.preview-meta > span + span::before { margin: 0 8px; color: var(--line-strong); content: "·"; }
.preview-meta .preview-meta-date { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.preview-meta-public { display: inline-flex; align-items: center; gap: 4px; color: var(--public-ink); }
.preview-meta-public svg { flex: none; }
.modal-actions-divider { width: 1px; height: 16px; margin: 0 4px; background: var(--line); }
/* 文件已完整缓存在本机：ArtPlayer 的「已加载」只跟随浏览器缓冲位置，改为显示全满（宽度由播放器内联写入，只能覆盖）。 */
.preview-stage.is-cached .art-progress-loaded { width: 100% !important; }
.preview-stage { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; min-height: 320px; overflow: hidden; background: var(--surface-sunken); }
.preview-modal-text .preview-stage, .preview-modal-code .preview-stage { min-height: 0; background: var(--surface); }
.preview-modal-audio .preview-stage { min-height: 0; background: var(--surface); }
.preview-modal-video .preview-stage { background: var(--media-canvas); }
/* 视频无法播放时显示说明卡片：换回浅色舞台，文字和按钮保持可读。 */
.preview-modal-video .preview-stage:has(> .preview-fallback) { background: var(--surface-sunken); }
.preview-media { display: grid; min-width: 0; width: 100%; place-items: center; padding: 24px; }
.preview-media img { max-width: 100%; max-height: calc(100vh - 300px); max-height: calc(100dvh - 300px); border-radius: var(--radius-sm); }
.preview-player { display: flex; flex-direction: column; min-width: 0; width: 100%; align-self: start; }
.preview-modal:not(.is-expanded):not(.is-minimized):not(.preview-modal-video) .modal-body:has(.preview-stage.has-playlist) { display: block; min-height: 0; }
.preview-stage.has-playlist { --preview-list-width: 300px; position: relative; display: grid; width: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: start; min-height: 0; max-height: var(--preview-content-height, none); }
.preview-stage.has-playlist > .preview-player { grid-column: 1; grid-row: 1; min-height: 0; max-height: var(--preview-player-height, none); }
.preview-modal-image .preview-stage > .preview-resource { grid-column: 1; grid-row: 1; min-height: 0; align-self: start; }
.preview-stage.has-playlist .preview-video-host { max-height: var(--preview-player-height, none); }
.preview-modal-video, .preview-modal-image { container: preview-window / inline-size; }
/* 视频按实际比例同时约束宽高；元信息就绪前用封面比例或 16:9。手动尺寸优先，双击拖动角恢复自适应。 */
.preview-modal-video:not(.is-expanded):not(.is-minimized):not(.is-sized) { --preview-window-width: min(1480px, var(--preview-width-limit, 88vw), calc(var(--preview-available-height, calc(100dvh - 48px)) * var(--preview-video-ratio, 1.777778))); width: max(min(320px, var(--preview-width-limit, 88vw)), var(--preview-window-width)); max-width: 100%; height: calc(var(--preview-window-width) / var(--preview-video-ratio, 1.777778)); }
.preview-modal-image:not(.is-expanded):not(.is-minimized):not(.is-sized) { max-width: min(1480px, 88vw); }
.preview-modal-video .preview-stage, .preview-modal-image .preview-stage { min-height: 0; }
/* 图片保持稳定画布，原图只影响画布内的等比显示。 */
.preview-modal-image .preview-loading { min-height: 0; }
@container preview-window (max-width: 580px) {
  .preview-modal:not(.is-minimized) .modal-header { flex-wrap: wrap; }
  .preview-modal:not(.is-minimized) .modal-window-actions { width: 100%; justify-content: flex-end; }
}
.preview-playlist-toggle { margin-left: auto; gap: 8px; }
.preview-playlist-toggle > span { display: inline-flex; align-items: center; gap: 8px; }
.preview-playlist-count { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.preview-playlist-toggle .spinner { width: 12px; height: 12px; }
.preview-playlist-error { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px 8px; color: var(--ink-3); font-size: var(--text-xs); }
.preview-playlist-error > span { min-width: 0; overflow-wrap: anywhere; }
/* 最小化：与完整播放器同一套深色磨砂外观。音乐保留封面与一行歌词，视频继续显示实时画面。 */
.preview-modal.is-minimized { --media-ink-2: var(--on-dark-72); --media-ink-3: var(--on-dark-56); --media-glass: var(--on-dark-8); --media-glass-strong: var(--on-dark-16); overflow: hidden; border: 1px solid var(--on-dark-8); background: var(--shade-80); color: var(--on-dark); box-shadow: 0 24px 60px var(--shade-32), 0 2px 8px var(--shade-16); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); animation: mini-in var(--duration-slow) var(--ease-out); }
.preview-modal.is-minimized .modal-header { align-items: center; gap: 8px; padding: 12px 8px 0 12px; border-bottom: 0; }
/* 没有底部控件时，标题栏独立成条，上下留白保持一致。 */
.preview-modal.is-minimized:not(:has(> .modal-minimized-controls)) .modal-header { padding-bottom: 12px; }
.preview-modal.is-minimized .modal-header > .file-tile { width: 40px; height: 40px; border-radius: var(--radius-md); box-shadow: 0 4px 14px var(--shade-32); transition: transform .4s var(--ease-out); }
.preview-modal.is-minimized .modal-header > .file-tile:not(.file-visual) { background: linear-gradient(135deg, var(--on-dark-16), var(--on-dark-4)); color: var(--on-dark-90); }
.preview-modal.is-minimized:has(.preview-mini-player.is-playing) .modal-header > .file-tile { transform: scale(1.04); }
.preview-modal.is-minimized .modal-heading { padding-top: 0; }
.preview-modal.is-minimized .modal-heading h2 { color: var(--on-dark); }
.preview-modal.is-minimized .modal-heading p { margin-top: 2px; color: var(--on-dark-56); font-size: var(--text-xs); }
.preview-modal.is-minimized .modal-heading p * { color: inherit; }
.preview-modal.is-minimized .modal-window-actions .icon-btn { color: var(--on-dark-72); }
.preview-modal.is-minimized .modal-window-actions .icon-btn:hover:not(:disabled), .preview-modal.is-minimized .modal-window-actions .icon-btn.is-active { background: var(--on-dark-8); color: var(--on-dark); }
.preview-modal.is-minimized .modal-minimized-controls { border-top: 0; }
.preview-mini-player { position: relative; padding: 8px 12px 12px; }
.preview-mini-line { display: flex; align-items: center; gap: 8px; height: 22px; min-width: 0; color: var(--on-dark-90); font-size: var(--text-sm); }
.preview-mini-player .preview-equalizer { flex: none; height: 12px; color: var(--on-dark); }
.preview-mini-player .preview-equalizer i { height: 12px; }
.preview-mini-lyric, .preview-mini-status { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.preview-mini-lyric { animation: mini-lyric .4s var(--ease-out); }
.preview-mini-status { color: var(--on-dark-56); font-size: var(--text-xs); }
.preview-mini-player.is-failed .preview-mini-status { color: var(--on-dark-danger); }
.preview-mini-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 8px; }
.preview-mini-controls .audio-button { width: 34px; height: 34px; }
.preview-mini-controls .audio-button svg { width: 18px; height: 18px; }
.preview-mini-transport { display: flex; align-items: center; gap: 8px; }
.preview-mini-play { display: grid; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 50%; background: var(--on-dark); color: var(--dark-surface); box-shadow: 0 6px 18px var(--shade-32); cursor: pointer; transition: transform var(--duration-base) var(--ease-out); }
.preview-mini-play:hover:not(:disabled) { transform: scale(1.06); }
.preview-mini-play:active:not(:disabled) { transform: scale(.94); }
.preview-mini-play:disabled { opacity: .4; cursor: default; }
.preview-mini-player.is-waiting .preview-mini-play { box-shadow: 0 0 0 3px var(--on-dark-16); animation: mini-wait 1.2s ease-in-out infinite; }
.preview-mini-time { justify-self: end; color: var(--on-dark-90); font-size: var(--text-micro); font-variant-numeric: tabular-nums; }
.preview-mini-time > span { color: var(--on-dark-40); }
/* 进度贴在卡片底边：平时 3px，悬停或拖动时加粗并露出滑块。 */
.preview-mini-progress { position: absolute; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: 12px; margin: 0; padding: 0; border: 0; background: transparent; appearance: none; cursor: pointer; }
.preview-mini-progress:disabled { cursor: default; }
.preview-mini-progress:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.preview-mini-progress::-webkit-slider-runnable-track { height: 3px; margin-top: 8px; background: linear-gradient(to right, var(--on-dark) var(--playback-progress), var(--on-dark-16) var(--playback-progress)); transition: height var(--duration-fast), margin var(--duration-fast); }
.preview-mini-progress::-webkit-slider-thumb { width: 0; height: 0; margin-top: -4px; border: 0; border-radius: 50%; background: var(--on-dark); appearance: none; transition: width var(--duration-fast), height var(--duration-fast); }
.preview-mini-progress:hover:not(:disabled)::-webkit-slider-runnable-track { height: 5px; margin-top: 8px; }
.preview-mini-progress:hover:not(:disabled)::-webkit-slider-thumb { width: 11px; height: 11px; margin-top: -4px; }
.preview-mini-progress::-moz-range-track { height: 3px; background: linear-gradient(to right, var(--on-dark) var(--playback-progress), var(--on-dark-16) var(--playback-progress)); }
.preview-mini-progress::-moz-range-thumb { width: 0; height: 0; border: 0; background: var(--on-dark); }
.preview-mini-progress:hover:not(:disabled)::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; }
.preview-mini-gallery { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 12px 12px; color: var(--on-dark-72); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.preview-mini-gallery .icon-btn { color: var(--on-dark-72); }
.preview-mini-gallery .icon-btn:hover { background: var(--on-dark-8); color: var(--on-dark); }
/* 视频最小化时保留画面：只显示视频本身，控制交给下方的迷你控制条。 */
.preview-modal-video.is-minimized .modal-body { display: block; margin: 12px 12px 0; overflow: hidden; border-radius: var(--radius-md); background: var(--black); }
.preview-modal-video.is-minimized .preview-stage { display: block; height: auto; }
.preview-modal-video.is-minimized .preview-playlist-panel { display: none; }
.preview-modal-video.is-minimized .preview-video-host { width: 100%; height: auto; max-height: none; aspect-ratio: 16 / 9; }
/* ArtPlayer 在控制条自动隐藏时把 art-mini-progress-bar 加在播放器根节点上，不能用它来选择要隐藏的元素。 */
.preview-modal-video.is-minimized :is(.art-bottom, .art-notice, .art-state, .art-settings, .art-contextmenus, .art-layers) { display: none !important; }
@keyframes mini-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes mini-lyric { from { opacity: 0; transform: translateY(6px); } }
@keyframes mini-wait { 50% { box-shadow: 0 0 0 6px var(--on-dark-8); } }
.preview-player-surface { position: relative; min-width: 0; }
.preview-player-video { isolation: isolate; }
.preview-video-host { width: min(100%, calc((100dvh - 260px) * var(--preview-video-ratio, 1.777778))); margin-inline: auto; aspect-ratio: var(--preview-video-ratio, 16 / 9); container: video-preview / inline-size; background: var(--media-canvas); }
.preview-modal-video:not(.is-minimized) .modal-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.preview-modal-video:not(.is-minimized) .preview-stage { flex: 1; height: 100%; align-items: stretch; }
.preview-modal-video:not(.is-minimized) .preview-player { height: 100%; align-self: stretch; }
.preview-modal-video:not(.is-minimized) .preview-player-surface { flex: 1; min-height: 0; }
.preview-modal-video:not(.is-minimized) .preview-video-host { width: 100%; height: 100%; min-height: 0; max-height: none; aspect-ratio: auto; }
.preview-video-host .art-video { object-fit: contain; }
/* 画面旋转：只转 <video>，四分之一圈时宽高互换后居中再转，控制条、字幕与封面不转。 */
/* 尺寸用 !important：播放器的「画面比例」等功能会在 <video> 上写内联宽高与外边距，不能让它们改变旋转后的尺寸。 */
.preview-video-host .art-video-player.is-rotated .art-video { inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; transform: rotate(var(--art-video-rotation, 0deg)); }
.preview-video-host .art-video-player.is-rotated-quarter .art-video { inset: auto !important; left: 50% !important; top: 50% !important; width: var(--art-frame-height, 100%) !important; height: var(--art-frame-width, 100%) !important; transform: translate(-50%, -50%) rotate(var(--art-video-rotation, 0deg)); }
.preview-video-host .art-poster { background-size: contain; }
.preview-video-host .art-bottom { padding-inline: 16px; }
.preview-video-host .art-controls { min-height: 44px; font-family: var(--font); }
.preview-video-host .art-control:focus-visible { outline: 2px solid var(--media-ink); outline-offset: -2px; border-radius: var(--radius-xs); }
.preview-video-host .art-control-thumbnail[aria-disabled="true"] { opacity: .45; cursor: default; }
.preview-video-host .art-control-thumbnail svg, .preview-video-host .art-setting-item-left-icon svg[fill="none"] { fill: none; }
.preview-video-host .art-control-thumbnail .spinner { width: 18px; height: 18px; color: var(--media-ink); }
.preview-video-host .art-subtitle { font-family: var(--font); }
@container video-preview (max-width: 480px) {
  .preview-video-host .art-control-pip, .preview-video-host .art-control-fullscreenWeb { display: none !important; }
  .preview-modal-video .preview-video-host .art-control-volume { display: none !important; }
  .preview-video-host .art-bottom { --preview-video-padding: 8px; }
}
@container video-preview (max-width: 400px) {
  .preview-modal-video .preview-video-host .art-control-time { display: none !important; }
}
@container video-preview (max-width: 280px) {
  .preview-video-host .art-control-volume, .preview-video-host .art-control-time { display: none !important; }
}
@media (max-height: 600px) {
  /* 横屏手机等低高度视口保留完整控制条，画面在舞台内等比居中。 */
  .preview-modal-video .preview-stage { min-height: 0; }
  .preview-video-host { width: 100%; height: max(120px, calc(100dvh - 180px)); aspect-ratio: auto; }
}
/* 播放失败：视频叠在画面上（深色），音频显示在歌词区（浅色）；只提供重试，下载在弹窗头部。 */
.preview-player-failure { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 28px 24px; text-align: center; }
.preview-player-failure strong { font-size: var(--text-lg); font-weight: 600; }
.preview-player-failure > span:not(.preview-failure-icon) { max-width: 34ch; margin-bottom: 8px; font-size: var(--text-sm); line-height: 1.6; }
.preview-failure-icon { display: grid; width: 40px; height: 40px; margin-bottom: 4px; place-items: center; border-radius: 50%; }
.preview-player-video .preview-player-failure { position: absolute; inset: 0; z-index: 200; padding: 16px 20px; background: var(--media-canvas); color: var(--media-ink); }
.preview-player-video .preview-player-failure > span:not(.preview-failure-icon) { color: var(--on-dark-72); }
.preview-player-video .preview-failure-icon { background: var(--on-dark-12); }
.preview-player-video .preview-player-failure .btn-secondary { border-color: var(--on-dark-16); background: var(--on-dark-8); color: var(--on-dark); box-shadow: none; }
.preview-player-video .preview-player-failure .btn-secondary:hover:not(:disabled) { background: var(--on-dark-16); }
.preview-player-audio .preview-player-failure { flex: 1; min-height: 240px; color: var(--ink); }
.preview-player-audio .preview-player-failure > span:not(.preview-failure-icon) { color: var(--ink-3); }
.preview-player-audio .preview-failure-icon { background: var(--danger-soft); color: var(--danger); }
.preview-player-slow { position: absolute; top: 12px; right: 12px; z-index: 35; display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 8px; border-radius: var(--radius-pill); font-size: var(--text-xs); }
.preview-player-slow:not(:has(button)) { padding-right: 8px; }
.preview-player-speed { font-variant-numeric: tabular-nums; }
.preview-player-slow .preview-player-speed + span::before { content: "·"; margin-right: 8px; opacity: .6; }
.preview-player-slow button { height: 22px; padding: 0 8px; border: 0; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 500; }
.preview-player-video .preview-player-slow { background: var(--media-overlay); color: var(--media-ink); }
.preview-player-video .preview-player-slow button { background: var(--on-dark-16); color: inherit; }
.preview-player-audio .preview-player-slow { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-sm); }
.preview-player-audio .preview-player-slow button { background: var(--surface-hover); color: var(--ink); }
/* ---------- 媒体预览：音乐、视频、图片共用深色画布 ----------
 * 头部浮在画布上（见下方「沉浸式预览」）；画布内统一白色文字、半透明玻璃按钮和细白线。动效都尊重“减少动画”偏好。 */
.preview-stage.is-media { --media-ink-2: var(--on-dark-72); --media-ink-3: var(--on-dark-56); --media-glass: var(--on-dark-8); --media-glass-strong: var(--on-dark-16); --media-line: var(--on-dark-8); background: var(--media-canvas); color: var(--media-ink); }
.preview-stage.is-media :focus-visible { outline: 2px solid var(--on-dark-90); outline-offset: 2px; }
.preview-equalizer { display: flex; align-items: center; gap: 4px; height: 16px; color: var(--accent); }
.preview-equalizer i { width: 3px; height: 16px; border-radius: var(--radius-2xs); background: currentColor; transform: scaleY(.25); }
:is(.preview-player-audio, .preview-mini-player).is-playing .preview-equalizer i { animation: audio-bars .95s ease-in-out infinite alternate; }
:is(.preview-player-audio, .preview-mini-player).is-playing .preview-equalizer i:nth-child(2) { animation-duration: 1.25s; animation-delay: -.45s; }
:is(.preview-player-audio, .preview-mini-player).is-playing .preview-equalizer i:nth-child(3) { animation-duration: .75s; animation-delay: -.2s; }
:is(.preview-player-audio, .preview-mini-player).is-playing .preview-equalizer i:nth-child(4) { animation-duration: 1.05s; animation-delay: -.65s; }
@keyframes audio-bars { 0% { transform: scaleY(.25); } 50% { transform: scaleY(1); } 100% { transform: scaleY(.45); } }

/* 音乐：模糊封面做背景，左侧唱片机（封面在唱片中心），右侧标题与歌词，底部一体化控制条。 */
.preview-player-audio { position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; overflow: clip; height: min(540px, var(--preview-player-height, calc(100dvh - 220px))); container: audio-player / inline-size; background: var(--dark-surface); color: var(--on-dark); }
.preview-player-audio::after { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, var(--shade-8), var(--shade-48)); content: ""; }
.audio-backdrop { position: absolute; inset: -20%; z-index: -2; background: radial-gradient(40% 50% at 22% 30%, color-mix(in srgb, var(--preview-tint, var(--accent)) 50%, transparent), transparent 70%), radial-gradient(45% 55% at 78% 72%, color-mix(in srgb, var(--preview-tint, var(--accent)) 26%, transparent), transparent 70%), var(--dark-surface); filter: blur(40px); animation: backdrop-drift 30s ease-in-out infinite alternate; animation-play-state: paused; }
.preview-player-audio.has-cover .audio-backdrop { background: var(--preview-cover) center / cover no-repeat; filter: blur(64px) saturate(1.6) brightness(.52); }
.preview-player-audio.is-active .audio-backdrop { animation-play-state: running; }
@keyframes backdrop-drift { from { transform: scale(1.04) translate(-2%, -1%) rotate(0deg); } to { transform: scale(1.18) translate(2%, 2%) rotate(8deg); } }
.audio-body { flex: 1; min-height: 0; overflow: hidden; overflow: clip; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 36px; padding: 36px 44px 8px; }
.audio-art { position: relative; justify-self: center; width: clamp(160px, calc(var(--preview-player-height, 540px) - 220px), 300px); aspect-ratio: 1; }
/* 唱片（网易云音乐式）：唱片占 86% 居中偏下，封面占唱片 66%，外圈是黑色刻纹；唱针支点在唱片上方偏右，播放时落到外圈，暂停时向右抬开。
 * 唱片由 Turntable 用 JS 转动（起转、停转有缓动），表面高光是不随唱片转动的独立层。 */
.audio-turntable { position: relative; width: 100%; height: 100%; }
/* 金属转盘：比唱片大一圈，拉丝金属（锥形渐变）加上沿受光、下沿暗边和落在背景上的投影，让唱片像放在唱机上。 */
.audio-platter { position: absolute; top: 11%; left: 4%; width: 92%; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 20deg, var(--on-dark-8), var(--on-dark-16) 8%, var(--on-dark-4) 18%, var(--on-dark-12) 32%, var(--on-dark-4) 47%, var(--on-dark-16) 58%, var(--on-dark-4) 70%, var(--on-dark-12) 84%, var(--on-dark-8)), var(--dark-surface-raised);
  box-shadow: 0 30px 50px -14px var(--shade-80), 0 0 0 1px var(--on-dark-8), inset 0 1px 1px var(--on-dark-24), inset 0 -3px 6px var(--shade-48); }
.audio-record { position: absolute; top: 14%; left: 7%; width: 86%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 6px 14px var(--shade-64), 0 1px 3px var(--shade-48); }
.audio-record-disc { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: repeating-radial-gradient(circle, var(--dark-surface-raised) 0 1px, var(--dark-surface-deep) 1.5px 3px);
  box-shadow: inset 0 0 0 1px var(--on-dark-16), inset 0 0 0 3px var(--dark-surface-deep); will-change: transform; }
.audio-record-disc::before { position: absolute; inset: 15.5%; border-radius: 50%; background: var(--dark-surface-deep); box-shadow: 0 0 0 1px var(--on-dark-8); content: ""; }
/* 标签：有封面时是封面，没有时是按文件名选的柔和色调（--preview-tint）加细同心纹与音符印记，边缘略微内凹。 */
.audio-record-label { position: relative; display: grid; width: 66%; aspect-ratio: 1; place-items: center; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 2px var(--shade-48); }
.audio-record-label.is-blank { background: repeating-radial-gradient(circle, transparent 0 7px, var(--shade-8) 7.5px 8px), radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--preview-tint, var(--series-other)) 45%, var(--on-dark)), color-mix(in srgb, var(--preview-tint, var(--series-other)) 70%, var(--dark-surface-deep)) 62%, color-mix(in srgb, var(--preview-tint, var(--series-other)) 40%, var(--dark-surface-deep))); color: var(--on-dark-72); }
.audio-record-label::after { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--on-dark-16), inset 0 -4px 10px var(--shade-48), inset 0 3px 8px var(--on-dark-8); content: ""; }
.audio-record-mark { position: absolute; top: 20%; left: calc(50% - 9px); opacity: .7; }
.audio-record-label img { width: 100%; height: 100%; object-fit: cover; }
.audio-record-sheen { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 6%, var(--on-dark-16) 12%, transparent 20% 56%, var(--on-dark-12) 62%, transparent 70%); pointer-events: none;
  -webkit-mask: radial-gradient(circle, transparent 0 66%, var(--black) 67%); mask: radial-gradient(circle, transparent 0 66%, var(--black) 67%); }
/* 不随唱片转动的光照：左上受光、右下背光，转动时高光与阴影留在原处，唱片看起来是有厚度的圆盘。 */
.audio-record-light { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(120% 120% at 26% 16%, var(--on-dark-12), transparent 40%), radial-gradient(90% 90% at 78% 88%, var(--shade-32), transparent 60%); pointer-events: none; }
.audio-record-spindle { position: absolute; top: calc(50% - 3%); left: calc(50% - 3%); width: 6%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--on-dark), var(--on-dark-56) 45%, var(--shade-64)); box-shadow: 0 1px 3px var(--shade-80), 0 0 0 2px var(--shade-32); }
.audio-tonearm { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 6px var(--shade-48)); transform: rotate(-32deg); transform-origin: 57% 4%; transition: transform .8s var(--ease-out); }
.preview-player-audio.is-active .audio-tonearm { transform: rotate(0deg); }
.audio-tonearm-base { stroke: var(--on-dark-24); stroke-width: .8; }
.audio-tonearm-ring { fill: var(--dark-surface-raised); stroke: var(--on-dark-16); stroke-width: .8; }
.audio-tonearm-weight { fill: var(--dark-surface-raised); stroke: var(--on-dark-40); stroke-width: .8; }
.audio-tonearm-pivot { fill: var(--dark-surface-raised); }
.audio-tonearm-arm { fill: none; stroke-width: 1.8; stroke-linecap: round; }
.audio-tonearm-head { stroke: var(--shade-32); stroke-width: .4; }
.audio-side { display: flex; flex-direction: column; justify-content: center; gap: 16px; min-width: 0; height: 100%; min-height: 0; }
.audio-body.has-lyrics .audio-side { justify-content: flex-start; padding-top: 4px; }
.audio-heading { display: grid; justify-items: start; gap: 8px; }
.audio-heading h3 { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; overflow-wrap: anywhere; }
.audio-heading p { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--media-ink-2); font-size: var(--text-xs); }
.audio-heading .preview-equalizer { height: 12px; color: var(--on-dark); }
.audio-heading .preview-equalizer i { width: 2.5px; height: 12px; }
/* 播放状态：标题、歌手之下单独一行，与歌手拉开距离；播放中是律动条，加载中是细圆环，暂停是图标，不再显示静止的小点。 */
.audio-heading .audio-status { margin-top: 8px; gap: 8px; height: 24px; padding: 0 8px 0 8px; border-radius: var(--radius-pill); background: var(--media-glass); color: var(--media-ink-2); font-size: var(--text-xs); font-weight: 500; }
.audio-status.is-playing { color: var(--on-dark); }
.audio-status.is-failed { color: var(--on-dark-danger); }
.audio-status-spinner { width: 12px; height: 12px; border: 1.5px solid var(--on-dark-24); border-top-color: var(--on-dark); border-radius: 50%; animation: spin .8s linear infinite; }
/* 歌词选择在控制条右侧（与音量、播放列表并列），有歌词时带小圆点。 */
.audio-lyrics-button.icon-btn { border-color: transparent; background: transparent; color: var(--media-ink-2); }
.audio-lyrics-button.icon-btn:hover:not(:disabled), .audio-lyrics-button.icon-btn[aria-expanded="true"] { background: var(--media-glass); color: var(--on-dark); }
.audio-lyrics-button.icon-btn.is-active { color: var(--on-dark); }
.audio-lyrics { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; mask-image: linear-gradient(transparent, var(--black) 22%, var(--black) 78%, transparent); }
.audio-lyrics::-webkit-scrollbar { display: none; }
/* 首尾留白用占位元素按歌词区自身高度计算：百分比内边距按宽度算且不能收缩，矮屏上会把歌词挤到控制条下面。 */
.audio-lyrics::before, .audio-lyrics::after { display: block; height: 42%; content: ""; }
.audio-lyric { display: block; width: 100%; padding: 8px 0; border: 0; background: transparent; color: var(--on-dark-40); font: inherit; font-size: var(--text-lg); font-weight: 600; line-height: 1.5; text-align: left; white-space: pre-line; cursor: pointer; transform-origin: left center; transition: color .4s, transform .4s var(--ease-out); }
.audio-lyric:hover { color: var(--on-dark-72); }
.audio-lyric.is-active { color: var(--on-dark); transform: scale(1.06); }
/* 歌词加载：几行长短不一的柔光占位条，与真实歌词同样左对齐；300 ms 后才出现，没有歌词的歌曲不会闪一下。 */
.audio-lyrics-skeleton { display: grid; justify-items: start; gap: 16px; padding: 8px 0; animation: lyrics-skeleton-in var(--duration-slow) .3s both; }
.audio-lyrics-skeleton i { width: 64%; height: 14px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--on-dark-8) 0 30%, var(--on-dark-16) 50%, var(--on-dark-8) 70% 100%) 0 0 / 300% 100%; animation: lyrics-shimmer 1.6s ease-in-out infinite; }
.audio-lyrics-skeleton i:nth-child(1) { width: 72%; height: 18px; }
.audio-lyrics-skeleton i:nth-child(2) { width: 48%; animation-delay: .1s; }
.audio-lyrics-skeleton i:nth-child(3) { width: 60%; animation-delay: .2s; opacity: .8; }
.audio-lyrics-skeleton i:nth-child(4) { width: 40%; animation-delay: .3s; opacity: .6; }
.audio-lyrics-skeleton i:nth-child(5) { width: 54%; animation-delay: .4s; opacity: .4; }
@keyframes lyrics-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes lyrics-skeleton-in { from { opacity: 0; transform: translateY(4px); } }
.audio-info { display: grid; justify-items: start; gap: 12px; }
.audio-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.audio-facts li { height: 24px; padding: 0 8px; border: 1px solid var(--on-dark-12); border-radius: var(--radius-pill); color: var(--media-ink-2); font-size: var(--text-xs); font-variant-numeric: tabular-nums; line-height: 22px; }
.audio-hint { margin: 0; color: var(--media-ink-3); font-size: var(--text-xs); line-height: 1.6; }
.audio-controls { flex: none; padding: 4px 32px 20px; }
.audio-timeline { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px; color: var(--media-ink-3); font-size: var(--text-micro); font-variant-numeric: tabular-nums; }
.audio-time:first-child { text-align: right; }
.audio-track { position: relative; display: flex; align-items: center; height: 22px; }
.audio-track::before, .audio-track::after { position: absolute; left: 0; height: 4px; border-radius: var(--radius-pill); pointer-events: none; transition: height var(--duration-fast); content: ""; }
.audio-track::before { right: 0; background: linear-gradient(to right, var(--on-dark-24) var(--loaded), var(--on-dark-12) var(--loaded)); }
.audio-track::after { width: var(--played); background: var(--on-dark); }
.audio-track:hover::before, .audio-track:hover::after { height: 6px; }
.audio-track input { position: relative; z-index: 1; width: 100%; height: 22px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.audio-track input:disabled { cursor: default; }
.audio-track input::-webkit-slider-runnable-track { height: 22px; background: transparent; }
.audio-track input::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: 4px; border: 0; border-radius: 50%; background: var(--on-dark); box-shadow: 0 2px 8px var(--shade-48); appearance: none; -webkit-appearance: none; transform: scale(0); transition: transform var(--duration-fast); }
.audio-track input::-moz-range-track { height: 22px; background: transparent; }
.audio-track input::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--on-dark); box-shadow: 0 2px 8px var(--shade-48); transform: scale(0); transition: transform var(--duration-fast); }
.audio-track:hover input:not(:disabled)::-webkit-slider-thumb, .audio-track input:focus-visible::-webkit-slider-thumb { transform: scale(1); }
.audio-track:hover input:not(:disabled)::-moz-range-thumb, .audio-track input:focus-visible::-moz-range-thumb { transform: scale(1); }
/* 进度条不画焦点框（深色画布的通用焦点规则 .preview-stage.is-media :focus-visible 更具体，需要同等优先级覆盖）：
 * 点过进度条再按方向键快进时不出现整条白框；键盘焦点改由放大的滑块加一圈柔和光晕表示。 */
.audio-track input:focus-visible, .preview-stage.is-media .audio-track input:focus-visible { outline: none; }
.audio-track input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--on-dark-24), 0 2px 8px var(--shade-48); }
.audio-track input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--on-dark-24), 0 2px 8px var(--shade-48); }
.audio-track-tip { position: absolute; bottom: 22px; padding: 2px 8px; border-radius: var(--radius-xs); background: var(--shade-64); color: var(--on-dark); font-size: var(--text-micro); pointer-events: none; white-space: nowrap; transform: translateX(-50%); }
.audio-buttons { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 4px; }
.audio-buttons-main { display: flex; align-items: center; gap: 16px; }
.audio-buttons-end { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.audio-button { position: relative; display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--media-ink-2); cursor: pointer; transition: background-color var(--duration-fast), color var(--duration-fast), transform var(--duration-fast); }
.audio-button:hover:not(:disabled) { background: var(--media-glass); color: var(--on-dark); }
.audio-button:active:not(:disabled) { transform: scale(.9); }
.audio-button:disabled { opacity: .3; cursor: default; }
.audio-button.is-active { color: var(--on-dark); }
.audio-button.is-active::after { position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; content: ""; }
.audio-play { position: relative; display: grid; width: 56px; height: 56px; place-items: center; border: 0; border-radius: 50%; background: var(--on-dark); color: var(--dark-surface); box-shadow: 0 10px 28px var(--shade-32); cursor: pointer; transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base); }
.audio-play:hover:not(:disabled) { transform: scale(1.06); box-shadow: 0 14px 34px var(--shade-48); }
.audio-play:active:not(:disabled) { transform: scale(.94); }
.audio-play:disabled { opacity: .5; cursor: default; }
.audio-play svg { fill: currentColor; stroke-width: 2.6; }
.audio-play svg path[d^="M7 4.8"] { transform: translateX(1px); }
.preview-player-audio.is-waiting .audio-play::after { position: absolute; inset: -5px; border: 2px solid var(--on-dark-90); border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; content: ""; }
.audio-volume { display: flex; align-items: center; }
.audio-volume input { width: 0; height: 22px; margin: 0; opacity: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; transition: width var(--duration-base) var(--ease-out), opacity var(--duration-base), margin var(--duration-base); }
.audio-volume:hover input, .audio-volume:focus-within input { width: 84px; margin: 0 8px 0 2px; opacity: 1; }
.audio-volume input::-webkit-slider-runnable-track { height: 4px; border-radius: var(--radius-pill); background: linear-gradient(to right, var(--on-dark) var(--volume), var(--on-dark-16) var(--volume)); }
.audio-volume input::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--on-dark); appearance: none; -webkit-appearance: none; }
.audio-volume input::-moz-range-track { height: 4px; border-radius: var(--radius-pill); background: linear-gradient(to right, var(--on-dark) var(--volume), var(--on-dark-16) var(--volume)); }
.audio-volume input::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--on-dark); }
/* 音量滑块同样不画焦点框，键盘焦点用滑块光晕表示。 */
.preview-stage.is-media .audio-volume input:focus-visible { outline: none; }
.audio-volume input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--on-dark-24); }
.audio-volume input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--on-dark-24); }
@media (hover: none) { .audio-volume input { width: 72px; margin: 0 8px 0 2px; opacity: 1; } }
.preview-player-audio .preview-player-failure { flex: 1; min-height: 0; padding: 12px 0; align-items: flex-start; text-align: left; color: var(--on-dark); }
.preview-player-audio .preview-player-failure > span:not(.preview-failure-icon) { color: var(--media-ink-2); }
.preview-player-audio .preview-failure-icon { background: var(--on-dark-12); color: var(--on-dark); }
.preview-player-audio .preview-player-failure .btn-secondary { border-color: var(--on-dark-16); background: var(--media-glass); color: var(--on-dark); box-shadow: none; }
.preview-player-audio .preview-player-slow { background: var(--shade-48); color: var(--on-dark); backdrop-filter: blur(10px); }
.preview-player-audio .preview-player-slow button { background: var(--media-glass-strong); color: var(--on-dark); }
@container audio-player (max-width: 600px) {
  .audio-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: start; gap: 16px; padding: 24px 20px 8px; }
  .audio-art { width: clamp(108px, min(42cqw, calc(var(--preview-player-height, 540px) * .32)), 200px); margin: 0 auto; }
  .audio-side { align-self: stretch; height: auto; align-items: center; justify-content: flex-start; gap: 8px; text-align: center; }
  /* 歌手与状态并排一行，给歌词多留一行空间。 */
  .audio-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 8px; }
  .audio-heading h3 { width: 100%; font-size: var(--text-lg); }
  .audio-heading .audio-status { margin-top: 0; }
  .audio-lyrics-skeleton { justify-items: center; align-self: stretch; }
  .audio-lyrics { align-self: stretch; }
  .audio-lyric { text-align: center; transform-origin: center; font-size: var(--text-md); }
  .audio-info { justify-items: center; }
  .audio-facts { justify-content: center; }
  .audio-controls { padding: 2px 16px 16px; }
  .audio-buttons-main { gap: 8px; }
  .audio-volume input { display: none; }
}
/* 手机宽度：音量交给系统按键，控制条右侧只留歌词与播放列表，不与「下一首」挤在一起。 */
@container audio-player (max-width: 420px) { .audio-volume { display: none; } }
/* 矮窗口：唱片缩小放在标题左侧，不再隐藏。 */
@media (max-height: 600px) {
  .audio-body { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: none; align-items: center; gap: 24px; }
  .audio-art { width: clamp(96px, calc(var(--preview-player-height, 400px) * .4), 168px); margin: 0; }
  .audio-side { align-self: center; align-items: flex-start; text-align: left; }
  .audio-heading { justify-content: flex-start; }
  .audio-lyric { text-align: left; transform-origin: left center; }
  .audio-lyrics-skeleton { justify-items: start; }
  .audio-info { justify-items: start; }
  .audio-facts { justify-content: flex-start; }
}


/* ---------- 沉浸式预览：音乐、视频、图片的头部浮在深色画布上 ----------
 * 不再有白色头部栏：头部透明，叠一层自上而下的暗色渐变；画布占满窗口，播放器用 --preview-header-height 给顶部内容留位置。
 * 视频与图片在鼠标静止后隐藏头部（.is-chrome-idle），音乐始终显示。缩略图只在最小化时出现在头部，避免与封面重复。 */
.preview-modal.is-dark-surface:not(.is-minimized) { position: relative; border: 0; background: var(--media-canvas); color: var(--media-ink); box-shadow: var(--shadow-media); }
.preview-modal.is-immersive:not(.is-minimized) .modal-header { position: absolute; inset: 0 0 auto 0; z-index: 4; padding: 12px 12px 32px 20px; border-bottom: 0; background: linear-gradient(to bottom, var(--shade-64), var(--shade-32) 58%, transparent); pointer-events: none; transition: opacity var(--duration-slow) ease, transform var(--duration-slow) ease; }
.preview-modal.is-immersive:not(.is-minimized) .modal-header > * { pointer-events: auto; }
/* 浮动头部在窄窗口也保持一行（标题省略），不在画面上叠两行。 */
.preview-modal.is-immersive:not(.is-minimized) .modal-header { flex-wrap: nowrap; }
.preview-modal.is-immersive:not(.is-minimized) .modal-window-actions { width: auto; }
@media (max-width: 640px) { .preview-modal.is-immersive:not(.is-minimized) .modal-header { padding: 8px 8px 24px 16px; } }
.preview-modal.is-immersive:not(.is-minimized) .modal-header > .file-tile { display: none; }
.preview-modal.is-dark-surface:not(.is-minimized) .modal-heading h2 { color: var(--on-dark); text-shadow: 0 1px 8px var(--shade-32); }
.preview-modal.is-dark-surface:not(.is-minimized) .modal-heading p, .preview-modal.is-dark-surface:not(.is-minimized) .modal-heading p * { color: var(--on-dark-56); }
.preview-modal.is-dark-surface:not(.is-minimized) .modal-window-actions .icon-btn { color: var(--on-dark-72); }
.preview-modal.is-dark-surface:not(.is-minimized) .modal-window-actions .icon-btn:hover:not(:disabled), .preview-modal.is-dark-surface:not(.is-minimized) .modal-window-actions .icon-btn.is-active { background: var(--on-dark-12); color: var(--on-dark); }
.preview-modal.is-dark-surface:not(.is-minimized) .modal-actions-divider { background: var(--on-dark-16); }
.preview-modal.is-dark-surface:not(.is-minimized) .modal-header :focus-visible { outline-color: var(--on-dark-90); }
/* 音乐：标题已在播放器里显示，头部只留格式、大小、日期，标题保留给读屏。 */
.preview-modal-audio.is-immersive:not(.is-minimized) .modal-heading h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.preview-modal-audio.is-immersive:not(.is-minimized) .modal-heading p { margin-top: 0; }
.preview-modal-audio.is-immersive:not(.is-minimized) .modal-header { background: linear-gradient(to bottom, var(--shade-32), transparent); }
/* 图片：画布从头部下方开始，适应窗口时整张图不被头部遮住；背景模糊层仍铺满整个窗口。 */
.preview-modal.is-immersive:not(.is-minimized) .image-canvas { margin-top: max(0px, calc(var(--preview-header-height, 56px) - 20px)); }
.preview-modal.is-immersive:not(.is-minimized) .audio-body { padding-top: calc(var(--preview-header-height, 56px) + 4px); }
/* 「加载较慢 · 重试」放在浮动头部下方，不与全屏、窗口选项、关闭按钮重叠。 */
.preview-modal.is-immersive:not(.is-minimized) .preview-player-slow { top: calc(var(--preview-header-height, 56px) + 6px); right: 16px; }
/* 视频的「加载较慢 · 重试」放在画面中央的加载圈正下方，和加载状态在一起，而不是挤在头部角落。 */
.preview-player-video .preview-player-slow, .preview-modal.is-immersive:not(.is-minimized) .preview-player-video .preview-player-slow { top: calc(50% + 44px); right: auto; left: 50%; transform: translateX(-50%); }
.preview-modal.is-chrome-idle:not(.is-minimized) .modal-header { opacity: 0; transform: translateY(-8px); }
.preview-modal.is-chrome-idle:not(.is-minimized) .modal-header > * { pointer-events: none; }
.preview-modal.is-chrome-idle:not(.is-minimized) .preview-stage { cursor: none; }
@media (prefers-reduced-motion: reduce) { .preview-modal.is-immersive .modal-header { transition: none; } }

/* 文本阅读（沉浸式）：深色画布与浮动头部；只有 Markdown 预览放在居中纸张上，纯文本、日志、代码与 Markdown 源码都用通栏深色编辑器。 */
:root {
  --code-canvas: var(--media-canvas); --code-ink: #e4e5ee; --code-ink-3: #6f7389; --code-line: rgba(255, 255, 255, .06); --code-panel: #1a1b21;
  --code-selection: rgba(124, 146, 255, .28);
  --code-string: #8fd19e; --code-keyword: #c9a3f2; --code-property: #7cc8e0; --code-number: #f0b07a; --code-variable: #ee9ac0; --code-fn: #9db8f5;
}
.preview-modal.is-reading { max-width: 1080px; container: preview-window / inline-size; }
/* 窄窗口：文件名独占一行，工具与窗口按钮保持同一行；次要操作由更多菜单提供。 */
@container preview-window (max-width: 580px) {
  .preview-modal.is-reading.is-immersive:not(.is-minimized) .modal-header { flex-wrap: wrap; row-gap: 8px; }
  .preview-modal.is-reading.is-immersive:not(.is-minimized) .modal-window-actions { width: 100%; min-width: 0; flex-wrap: nowrap; justify-content: flex-end; }
  .preview-modal.is-reading .preview-text-tools { margin-right: auto; }
}
.preview-modal.is-reading.is-chrome-idle:not(.is-minimized) .preview-stage { cursor: auto; }
.preview-modal.is-reading:not(.is-minimized) .preview-stage.is-reading { position: relative; display: block; height: min(var(--preview-content-height, 72vh), 860px); min-height: 280px; background: var(--media-canvas); }
.preview-modal.is-reading.is-sized:not(.is-minimized) .preview-stage.is-reading { height: var(--preview-content-height, 72vh); }
.preview-modal.is-reading.is-expanded:not(.is-minimized) .preview-stage.is-reading { height: auto; }
.preview-stage.is-reading .preview-text { position: absolute; inset: 0; display: block; }
/* 代码与 Markdown 源码靠纵向 flex 把编辑器限制在舞台高度内，由编辑器自己滚动；上一条的选择器优先级更高，必须在这里恢复 flex。 */
.preview-stage.is-reading .preview-text.is-code { display: flex; }
.preview-stage.is-reading .preview-engine-loading { position: absolute; inset: 0; z-index: 1; min-height: 0; color: var(--on-dark-72); }
/* 纸张：外层滚动，纸张宽度适合阅读；顶部给浮动头部留出空间，底部给状态胶囊留白。 */
.preview-text.is-paper { overflow-y: auto; overscroll-behavior: contain; background: transparent; padding: calc(var(--preview-header-height, 56px) + 16px) 24px 72px; scrollbar-color: var(--on-dark-24) transparent; }
/* 纸张至少铺满可见高度：短文档也像一整页，而不是悬在画布上的小卡片。 */
.preview-text.is-paper .preview-sheet { width: 100%; max-width: 780px; min-height: 100%; margin: 0 auto; overflow: hidden; border-radius: var(--radius-xl); background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 0 var(--on-dark-4) inset, 0 24px 60px -18px var(--shade-64), 0 0 0 1px var(--shade-32); animation: sheet-in .28s var(--ease-out); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(10px); } }
.preview-text.is-paper .preview-doc { max-width: none; max-height: none; padding: 48px 56px 56px; overflow: visible; }
.preview-text.is-paper .preview-doc :is(h1, h2, h3) { scroll-margin-top: calc(var(--preview-header-height, 56px) + 24px); }
.preview-text.is-paper .preview-code-editor { padding: 12px 0; }
.preview-text.is-paper .cm-editor { max-height: none !important; min-height: 0 !important; background: transparent !important; }
/* 纸张由外层滚动；无溢出的编辑器不能截断滚轮向外传递。源码模式仍由 CodeMirror 自己滚动。 */
.preview-text.is-paper .cm-scroller { overflow: visible; overscroll-behavior: auto; }
.preview-text.is-paper .cm-gutters { background: transparent !important; }
@media (max-width: 640px) {
  .preview-text.is-paper { padding: calc(var(--preview-header-height, 56px) + 4px) 8px 64px; }
  .preview-text.is-paper .preview-doc { padding: 28px 20px 36px; }
}
/* 代码：通栏深色编辑器，局部覆盖颜色令牌，浅色与深色界面下一致。 */
.preview-text.is-code { --surface: var(--code-canvas); --surface-sunken: var(--code-panel); --ink: var(--code-ink); --ink-3: var(--code-ink-3); --line-soft: var(--code-line); --line: var(--on-dark-8);
  --selection: var(--code-selection); --syntax-string: var(--code-string); --syntax-keyword: var(--code-keyword); --syntax-property: var(--code-property); --syntax-number: var(--code-number);
  --syntax-variable: var(--code-variable); --syntax-fn: var(--code-fn); display: flex; flex-direction: column; padding-top: var(--preview-header-height, 56px); background: var(--code-canvas); color: var(--code-ink); }
.preview-text.is-code .preview-sheet { display: flex; flex: 1; min-height: 0; flex-direction: column; border-top: 1px solid var(--code-line); }
.preview-text.is-code .preview-code-editor { display: flex; flex: 1; min-height: 0; }
.preview-text.is-code .cm-editor { flex: 1; height: 100%; max-height: none !important; min-height: 0 !important; }
.preview-text.is-code .cm-scroller { padding-bottom: 48px; }
/* 头部工具：与窗口按钮同一组，白色图标；分段控件改用半透明玻璃底。 */
.preview-header-tools { display: contents; }
.preview-text-tools { display: flex; align-items: center; gap: 2px; }
.preview-text-tools .segmented { margin-right: 8px; border-color: var(--on-dark-12); background: var(--on-dark-8); }
.preview-text-tools .segmented button { color: var(--on-dark-72); }
.preview-text-tools .segmented button.is-active { background: var(--on-dark-90); color: var(--dark-surface); }
.preview-text-tools .icon-btn { color: var(--on-dark-72); }
.preview-text-tools .icon-btn:hover:not(:disabled), .preview-text-tools .icon-btn.is-active { background: var(--on-dark-16); color: var(--on-dark); }
@media (max-width: 640px) { .preview-text-tools .segmented { margin-right: 2px; } }
/* 文本编辑：深色头部里的「退出编辑／保存」，保存是浅色实心按钮；编辑状态与编码显示在底部胶囊。 */
.preview-edit-actions { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; }
.preview-text-tools .btn-ghost { color: var(--on-dark-72); }
.preview-text-tools .btn-ghost:hover:not(:disabled) { background: var(--on-dark-16); color: var(--on-dark); }
.preview-text-tools .btn-primary { background: var(--on-dark-90); color: var(--dark-surface); }
.preview-text-tools .btn-primary:hover:not(:disabled) { background: var(--on-dark); }
.preview-text-tools .btn-primary:disabled { background: var(--on-dark-16); color: var(--on-dark-56); }
/* 编辑时光标已说明焦点位置，不再显示键盘导航用的焦点框。 */
html[data-input="keyboard"] .preview-text.is-editing .cm-editor.cm-focused { box-shadow: none; }
.preview-text.is-editing .cm-cursor { border-left-color: var(--code-ink); }
.preview-text.is-editing .cm-activeLine { background: transparent; }
.preview-edit-conflict { position: absolute; top: calc(var(--preview-header-height, 56px) + 12px); left: 50%; z-index: 3; display: flex; max-width: calc(100% - 32px); flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 8px 8px 12px; border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); border-radius: var(--radius-md); background: var(--shade-80); color: var(--on-dark);
  font-size: var(--text-sm); box-shadow: var(--shadow-md); transform: translateX(-50%); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.preview-edit-conflict > svg { flex: none; color: var(--on-dark-danger); }
.preview-edit-conflict .btn-ghost { color: var(--on-dark-72); }
.preview-edit-conflict .btn-ghost:hover:not(:disabled) { background: var(--on-dark-16); color: var(--on-dark); }
/* 底部状态胶囊：行数与截断提示浮在内容上，不占阅读空间。 */
.preview-text-capsule { position: absolute; bottom: 14px; left: 50%; z-index: 2; display: flex; max-width: calc(100% - 32px); align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--on-dark-8); border-radius: var(--radius-pill);
  background: var(--shade-80); color: var(--on-dark-72); font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; transform: translateX(-50%);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 12px 30px -10px var(--shade-48); }
.preview-text-capsule > span { overflow: hidden; text-overflow: ellipsis; }
.preview-text-capsule > span + span { padding-left: 8px; border-left: 1px solid var(--on-dark-16); }
.preview-text-capsule a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 2px; }
/* PDF 阅读：pdf.js 把页面画在 canvas 上，白色纸张纵向排列在深色画布里；工具放在浮动头部，样式与文本工具相同。 */
/* 阅读类预览（PDF 页面、Markdown／纯文本纸张）会滚到浮动头部下面，渐变头部在白底上发白：改为深色磨砂实底（仍浮动、静止后隐藏），内容从头部下方开始。 */
.preview-modal.is-reading.is-immersive:not(.is-minimized) .modal-header { padding-bottom: 12px; border-bottom: 1px solid var(--on-dark-8); background: color-mix(in srgb, var(--media-canvas) 88%, transparent);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); }
@media (max-width: 640px) { .preview-modal.is-reading.is-immersive:not(.is-minimized) .modal-header { padding-bottom: 8px; } }
.preview-stage.is-reading .preview-pdf { position: absolute; inset: 0; display: flex; flex-direction: column; }
.preview-pdf-scroller { position: relative; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; outline: none; }
.preview-pdf.is-immersive .preview-pdf-scroller { padding-top: var(--preview-header-height, 0px); }
.preview-pdf-pages { display: flex; flex-direction: column; align-items: center; gap: 16px; width: max-content; min-width: 100%; padding-inline: 24px; }
.preview-pdf-page-sheet { position: relative; flex: none; overflow: hidden; border-radius: var(--radius-xs); background: var(--on-dark); box-shadow: 0 1px 2px var(--shade-32), 0 12px 32px -12px var(--shade-48); }
.preview-pdf-page-sheet canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.preview-pdf-page-sheet.is-idle::after, .preview-pdf-page-sheet.is-drawing::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -8px 0 0 -8px; border: 2px solid var(--shade-8); border-top-color: var(--shade-48); border-radius: 50%; animation: spin .8s linear infinite; }
.preview-pdf-page-error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--paper-ink-3); font-size: var(--text-sm); }
/* 文字层：透明文字叠在画面上，只用于选择、复制与浏览器查找。规则取自 pdf.js 的 pdf_viewer.css（.textLayer），
 * pdf.js 给每个文字片段写入 --font-height、--scale-x 等变量，字号与位置都靠这里的 calc 换算。 */
.preview-pdf-text { --user-unit: 1; --total-scale-factor: calc(var(--scale-factor) * var(--user-unit)); --scale-round-x: 1px; --scale-round-y: 1px;
  --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size));
  position: absolute; inset: 0; z-index: 1; overflow: clip; color-scheme: only light; line-height: 1; letter-spacing: normal; word-spacing: normal; text-align: initial; text-size-adjust: none; -webkit-text-size-adjust: none;
  forced-color-adjust: none; transform-origin: 0 0; caret-color: CanvasText; }
.preview-pdf-text :is(span, br) { position: absolute; color: transparent; white-space: pre; cursor: text; transform-origin: 0% 0%; user-select: text; -webkit-user-select: text; }
.preview-pdf-text > :not(.markedContent), .preview-pdf-text .markedContent span:not(.markedContent) { --font-height: 0; --scale-x: 1; --rotate: 0deg; z-index: 1;
  font-size: calc(var(--text-scale-factor) * var(--font-height)); transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
.preview-pdf-text .markedContent { display: contents; }
.preview-pdf-text span[role="img"] { cursor: default; user-select: none; -webkit-user-select: none; }
.preview-pdf-text ::selection { background: var(--selection); color: transparent; }
.preview-pdf-text br::selection { background: transparent; }
.preview-pdf-text .endOfContent { position: absolute; inset: 100% 0 0; z-index: 0; display: block; cursor: default; user-select: none; -webkit-user-select: none; }
.preview-pdf-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--on-dark-72); font-size: var(--text-sm); }
.preview-pdf-spinner { width: 16px; height: 16px; border: 2px solid var(--on-dark-16); border-top-color: var(--on-dark); border-radius: 50%; animation: spin .8s linear infinite; }
.preview-pdf-tools { display: flex; align-items: center; gap: 2px; margin-right: auto; color: var(--on-dark-72); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.preview-pdf-tools .icon-btn { color: var(--on-dark-72); }
.preview-pdf-tools .icon-btn:hover:not(:disabled), .preview-pdf-tools .icon-btn.is-active { background: var(--on-dark-16); color: var(--on-dark); }
.preview-pdf-tools .icon-btn:disabled { opacity: .35; }
.preview-pdf-page { display: flex; align-items: center; gap: 4px; margin: 0 2px; white-space: nowrap; }
.preview-pdf-page input { box-sizing: content-box; height: 22px; padding: 0 8px; border: 1px solid var(--on-dark-16); border-radius: var(--radius-sm); background: var(--on-dark-8); color: var(--on-dark); font: inherit; text-align: center; }
.preview-pdf-page input:focus { border-color: var(--on-dark-40); outline: none; background: var(--on-dark-16); }
.preview-pdf-page span { color: var(--on-dark-56); }
.preview-pdf-divider { width: 1px; height: 16px; margin: 0 8px; background: var(--on-dark-16); }
.preview-pdf-zoom { min-width: 64px; height: 28px; padding: 0 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.preview-pdf-zoom:hover { background: var(--on-dark-16); color: var(--on-dark); }
.preview-pdf-bar { display: flex; justify-content: center; padding: 8px; border-bottom: 1px solid var(--on-dark-8); background: var(--media-canvas); }
.preview-pdf:not(.is-immersive) { position: relative; display: flex; flex-direction: column; height: min(78vh, 900px); background: var(--media-canvas); }
.preview-pdf:not(.is-immersive) .preview-outline-panel { top: 50px; }
/* 窄窗口：头部放不下全部工具，只留目录与页码（滚动翻页、页面适合宽度）。 */
@container preview-window (max-width: 580px) {
  .preview-pdf-tools > :is(.preview-pdf-divider, .preview-pdf-zoom, .preview-pdf-step) { display: none; }
}
@media (max-width: 640px) { .preview-pdf-pages { padding-inline: 8px; gap: 8px; } }
/* 目录抽屉：沿用播放列表的磨砂玻璃抽屉。 */
.preview-stage.is-reading .preview-outline-panel, .preview-pdf .preview-outline-panel { position: absolute; top: calc(var(--preview-header-height, 0px) + 6px); right: 12px; bottom: 12px; z-index: 3; display: flex; flex-direction: column;
  width: min(300px, calc(100% - 24px)); min-height: 0; overflow: hidden; border: 1px solid var(--on-dark-8); border-radius: var(--radius-lg); background: var(--shade-80); color: var(--on-dark);
  box-shadow: 0 24px 60px -12px var(--shade-64), inset 0 1px 0 var(--on-dark-4); backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5); animation: drawer-in var(--duration-slow) var(--ease-out); }
.preview-outline-item { display: block; width: 100%; min-height: 34px; padding: 8px 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--on-dark-90); font: inherit; font-size: var(--text-sm); line-height: 1.45; text-align: left; cursor: pointer; }
.preview-outline-item:hover { background: var(--on-dark-8); color: var(--on-dark); }
.preview-outline-item { position: relative; }
.preview-outline-item.is-active { background: var(--on-dark-8); color: var(--on-dark); }
.preview-outline-item.is-active::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 3px; width: 3px; border-radius: var(--radius-xs); background: currentColor; }
.preview-outline-item[data-level="0"] { font-weight: 600; }
.preview-outline-item[data-level="1"] { padding-left: 24px; color: var(--on-dark-72); }
.preview-outline-item[data-level="2"] { padding-left: 40px; color: var(--on-dark-56); font-size: var(--text-xs); }
@media (prefers-reduced-motion: reduce) { .preview-text.is-paper .preview-sheet, .preview-stage.is-reading .preview-outline-panel { animation: none; } }

/* 播放列表抽屉：浮在画面右侧的磨砂玻璃卡片，不挤压播放器；顶部过滤，当前项高亮并带律动条。 */
.preview-stage.is-media .preview-playlist-panel { position: absolute; top: calc(var(--preview-header-height, 0px) + 6px); right: 12px; bottom: 12px; z-index: 3; display: flex; flex-direction: column;
  width: min(340px, calc(100% - 24px)); min-height: 0; overflow: hidden; border: 1px solid var(--on-dark-8); border-radius: var(--radius-lg); background: var(--shade-80); color: var(--on-dark);
  box-shadow: 0 24px 60px -12px var(--shade-64), inset 0 1px 0 var(--on-dark-4); backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5); animation: drawer-in var(--duration-slow) var(--ease-out); }
@keyframes drawer-in { from { opacity: 0; transform: translateX(24px) scale(.98); } }
/* 播放器的播放列表与最小化小窗：和音乐播放器一样，用当前文件的封面模糊后铺底（没有封面时用按文件名选的色调）。
 * 伪元素在各自的层叠上下文里位于背景之上、内容之下。 */
.preview-modal.has-media-surface .preview-playlist-panel, .preview-modal.has-media-surface.is-minimized { isolation: isolate; }
.preview-modal.has-media-surface .preview-playlist-panel::before, .preview-modal.has-media-surface.is-minimized::before {
  position: absolute; inset: -48px; z-index: -1; background: radial-gradient(50% 60% at 25% 20%, color-mix(in srgb, var(--preview-tint, var(--accent)) 45%, transparent), transparent 72%), radial-gradient(55% 60% at 80% 85%, color-mix(in srgb, var(--preview-tint, var(--accent)) 22%, transparent), transparent 72%), var(--dark-surface);
  filter: blur(36px); pointer-events: none; content: ""; }
.preview-modal.has-cover .preview-playlist-panel::before, .preview-modal.has-cover.is-minimized::before { background: var(--preview-cover) center / cover no-repeat, var(--dark-surface); filter: blur(48px) saturate(1.6) brightness(.42); }
.preview-playlist-panel > header { display: flex; flex: none; align-items: center; gap: 8px; padding: 16px 8px 8px 16px; }
.preview-playlist-title { display: flex; flex: 1; align-items: baseline; gap: 8px; min-width: 0; }
.preview-playlist-title strong { font-size: var(--text-md); font-weight: 600; }
.preview-playlist-count { color: var(--on-dark-56); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.preview-playlist-panel .icon-btn { color: var(--on-dark-72); }
.preview-playlist-panel .icon-btn:hover:not(:disabled) { background: var(--on-dark-12); color: var(--on-dark); }
.preview-playlist-search { display: flex; flex: none; align-items: center; gap: 8px; height: 34px; margin: 0 12px 8px; padding: 0 8px 0 12px; border: 1px solid var(--on-dark-8); border-radius: var(--radius-md); background: var(--on-dark-8); color: var(--on-dark-56); transition: border-color var(--duration-fast), background var(--duration-fast); }
.preview-playlist-search:focus-within { border-color: var(--on-dark-24); background: var(--on-dark-8); color: var(--on-dark); }
.preview-playlist-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; color: var(--on-dark); font: inherit; font-size: var(--text-sm); }
.preview-stage.is-media .preview-playlist-search input:focus-visible { outline: none; }
/* 抽屉停在控制条上方，播放、音量和列表按钮始终可点。 */
.preview-modal-audio .preview-stage.is-media .preview-playlist-panel { bottom: 112px; }
.preview-modal-video .preview-stage.is-media .preview-playlist-panel { bottom: 64px; }
.preview-playlist-search input::placeholder { color: var(--on-dark-40); }
.preview-playlist-search input::-webkit-search-cancel-button { display: none; }
.preview-playlist-search button { display: grid; width: 20px; height: 20px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--on-dark-16); color: var(--on-dark); cursor: pointer; }
.preview-playlist-items { position: relative; flex: 1; min-height: 0; margin: 0; padding: 0 8px 8px; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; list-style: none; scrollbar-width: thin; scrollbar-color: var(--on-dark-16) transparent; }
.preview-track { position: relative; display: grid; grid-template-columns: 24px 40px minmax(0, 1fr) 16px; align-items: center; gap: 8px; width: 100%; min-height: 56px; padding: 8px 8px 8px 8px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--on-dark-90); text-align: left; cursor: pointer; transition: background-color var(--duration-fast), color var(--duration-fast); }
.preview-track:hover { background: var(--on-dark-8); color: var(--on-dark); }
.preview-track.is-current { background: linear-gradient(90deg, var(--on-dark-16), var(--on-dark-4)); color: var(--on-dark); }
.preview-track.is-current::before { position: absolute; top: 12px; bottom: 12px; left: 0; width: 3px; border-radius: var(--radius-2xs); background: var(--on-dark); content: ""; }
.preview-track-order { display: grid; place-items: center; color: var(--on-dark-40); font-size: var(--text-micro); font-variant-numeric: tabular-nums; }
.preview-track-order .preview-equalizer { height: 12px; gap: 2px; color: var(--on-dark); }
.preview-track-order .preview-equalizer i { width: 2.5px; height: 12px; }
.preview-playlist-panel.is-playing .preview-track-order .preview-equalizer i { animation: audio-bars .95s ease-in-out infinite alternate; }
.preview-playlist-panel.is-playing .preview-track-order .preview-equalizer i:nth-child(2) { animation-duration: 1.25s; animation-delay: -.45s; }
.preview-playlist-panel.is-playing .preview-track-order .preview-equalizer i:nth-child(3) { animation-duration: .75s; animation-delay: -.2s; }
.preview-playlist-panel.is-playing .preview-track-order .preview-equalizer i:nth-child(4) { animation-duration: 1.05s; animation-delay: -.65s; }
.preview-track-cover .file-tile { width: 40px; height: 40px; border-radius: var(--radius-sm); box-shadow: 0 4px 12px var(--shade-32); }
.preview-track-cover .file-tile:not(.file-visual) { background: var(--on-dark-8); color: var(--on-dark-72); }
.preview-track-description { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.preview-track-description strong { max-width: 100%; overflow: hidden; font-size: var(--text-sm); font-weight: 500; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.preview-track-description > span { color: var(--on-dark-40); font-size: var(--text-micro); line-height: 1.4; }
.preview-track.is-current .preview-track-description strong { font-weight: 600; }
.preview-track-play { color: var(--on-dark-72); opacity: 0; transition: opacity var(--duration-fast); }
.preview-track:hover .preview-track-play, .preview-track:focus-visible .preview-track-play { opacity: 1; }
@media (hover: none) { .preview-track-play { display: none; } }
.preview-playlist-empty { padding: 28px 12px; color: var(--on-dark-56); font-size: var(--text-xs); text-align: center; overflow-wrap: anywhere; }

/* 音乐播放器细节：歌手副标题、当前歌词的柔光。 */
.audio-heading h3 { font-size: var(--text-2xl); }
.audio-artist { margin: 0; color: var(--media-ink-2); font-size: var(--text-md); font-weight: 500; }
.audio-lyric.is-active { text-shadow: 0 0 22px var(--on-dark-40); }

/* 视频：ArtPlayer 换成白色主题、细进度条、底部渐变和磨砂玻璃的中央播放键与菜单。 */
.preview-video-host .art-video-player { --art-theme: var(--on-dark); --art-progress-height: 4px; --art-control-height: 44px; --art-control-icon-size: 34px; --art-bottom-gap: 6px; --art-padding: 12px; --art-hover-color: var(--on-dark-40); --art-loaded-color: var(--on-dark-24); --art-progress-color: var(--on-dark-16); --art-widget-background: var(--shade-80); --art-tip-background: var(--shade-80); --art-border-radius: var(--radius-lg); --art-control-opacity: .85; --art-indicator-size: 14px; --art-state-size: 72px; font-family: var(--font); }
.preview-video-host .art-video-player .art-bottom { padding: 0 var(--preview-video-padding, 16px) 8px; background-image: linear-gradient(to top, var(--shade-64), var(--shade-32) 55%, transparent) !important; }
.preview-video-host .art-progress:hover { --art-progress-height: 6px; }
.preview-video-host .art-control:hover { --art-control-opacity: 1; }
.preview-video-host .art-state, .preview-video-host .art-layer-state { display: grid; place-items: center; border-radius: 50%; background: var(--on-dark-16); box-shadow: 0 10px 32px var(--shade-32); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform var(--duration-base) var(--ease-out), background-color var(--duration-base); }
.preview-video-host .art-state:hover, .preview-video-host .art-layer-state:hover { background: var(--on-dark-24); transform: scale(1.06); }
.preview-video-host :is(.art-settings, .art-selector-list, .art-contextmenus) { backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 12px 36px var(--shade-32); }

/* 图片：深色画布、模糊背景、可缩放平移的原图，悬浮工具栏和底部缩略图条。 */
.preview-modal-image { --media-canvas: var(--image-canvas); }
.preview-modal-image .preview-stage { background: var(--media-canvas); }
.image-viewer { position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; overflow: clip; height: min(max(600px, 78dvh), var(--preview-player-height, calc(100dvh - 220px))); background: var(--image-canvas); color: var(--on-dark); user-select: none; -webkit-user-select: none; }
.image-backdrop { position: absolute; inset: -12%; z-index: -1; filter: blur(52px) saturate(1.4) brightness(.42); opacity: .8; transform: scale(1.1); }
.image-backdrop-layer { position: absolute; inset: 0; background-position: center; background-size: cover; }
.image-backdrop-layer:last-child { animation: image-fade var(--duration-base) ease-out; }
.image-canvas { position: relative; display: grid; flex: 1; min-height: 0; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; overflow: hidden; overflow: clip; touch-action: none; cursor: zoom-in; }
.image-viewer.is-zoomed .image-canvas { cursor: grab; }
.image-viewer.is-zoomed.is-dragging .image-canvas { cursor: grabbing; }
.image-canvas > img { grid-area: 1 / 1; max-width: calc(100% - 32px); max-height: calc(100% - 32px); border-radius: var(--radius-2xs); box-shadow: 0 24px 64px var(--shade-48); -webkit-user-drag: none; }
.image-viewer.is-zoomed .image-canvas > .image-full { max-width: none; max-height: none; }
/* 封面在算出显示尺寸前不出现：否则会先按自身大小画一帧、再缩放到适配位置。 */
.image-poster { filter: blur(1.5px); }
.image-poster:not(.is-sized) { visibility: hidden; }
.image-full { opacity: 0; transition: transform var(--duration-slow) var(--ease-out), opacity var(--duration-slow) ease; will-change: transform; }
.image-viewer.is-loaded .image-full { opacity: 1; animation: image-in .45s var(--ease-out); }
/* 有封面占位时原图与封面尺寸、位置一致，只做淡入，不再缩放入场；封面在淡入结束后才移除。 */
.image-viewer.has-poster.is-loaded .image-full { animation: image-fade .35s ease-out; }
.image-viewer.is-loaded .image-poster { filter: none; }
.image-viewer.is-warm.is-loaded .image-full, .preview-stage.is-cached .image-viewer.is-loaded .image-full { animation: none; }
.image-viewer.is-warm .image-full, .preview-stage.is-cached .image-full { transition: transform var(--duration-slow) var(--ease-out); }
.image-viewer.is-dragging .image-full { transition: opacity var(--duration-slow) ease; }
@keyframes image-in { from { opacity: 0; scale: .97; } }
@keyframes image-fade { from { opacity: 0; } }
.image-loading { position: absolute; bottom: 72px; left: 50%; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-pill); background: var(--shade-48); color: var(--media-ink-2); font-size: var(--text-xs); backdrop-filter: blur(10px); transform: translateX(-50%); }
.image-loading .spinner { width: 12px; height: 12px; border-color: var(--on-dark-24); border-top-color: var(--on-dark); }
.image-arrow { position: absolute; top: 50%; z-index: 3; display: grid; width: 44px; height: 44px; margin-top: -24px; place-items: center; border: 0; border-radius: 50%; background: var(--on-dark-12); color: var(--on-dark); cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: opacity var(--duration-slow), background-color var(--duration-fast), transform var(--duration-fast); }
.image-arrow.is-previous { left: 16px; }
.image-arrow.is-next { right: 16px; }
.image-arrow:hover { background: var(--on-dark-24); }
.image-arrow:active { transform: scale(.92); }
.image-viewer:has(.image-strip) .image-arrow { top: calc(50% - 40px); }
.image-toolbar { position: absolute; bottom: 16px; left: 50%; z-index: 3; display: flex; width: max-content; align-items: center; gap: 2px; padding: 4px; border-radius: var(--radius-pill); background: var(--shade-64); box-shadow: 0 10px 30px var(--shade-32), inset 0 0 0 1px var(--on-dark-8); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); transform: translateX(-50%); transition: opacity var(--duration-slow), transform var(--duration-slow) var(--ease-out); }
.image-viewer:has(.image-strip) .image-toolbar { bottom: 92px; }
.image-tool { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--on-dark-90); cursor: pointer; transition: background-color var(--duration-fast), color var(--duration-fast); }
.image-tool:hover:not(:disabled), .image-zoom-level:hover { background: var(--media-glass, var(--on-dark-8)); color: var(--on-dark); }
.image-tool:disabled { opacity: .35; cursor: default; }
.image-zoom-level { min-width: 54px; height: 34px; padding: 0 8px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--on-dark); font: inherit; font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; }
.image-tool-divider { width: 1px; height: 18px; margin: 0 4px; background: var(--on-dark-16); }
.image-counter { padding: 0 8px 0 4px; white-space: nowrap; color: var(--on-dark-72); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.image-viewer.is-idle .image-toolbar { opacity: 0; pointer-events: none; transform: translate(-50%, 8px); }
.image-viewer.is-idle .image-arrow { opacity: 0; pointer-events: none; }
.image-strip { display: flex; flex: none; justify-content: safe center; gap: 8px; margin: 0; padding: 8px 16px 12px; overflow-x: auto; list-style: none; scrollbar-width: none; background: linear-gradient(transparent, var(--shade-32)); }
.image-strip::-webkit-scrollbar { display: none; }
.image-strip button { display: grid; width: 56px; height: 56px; padding: 0; place-items: center; overflow: hidden; border: 0; border-radius: var(--radius-md); background: var(--on-dark-8); color: var(--on-dark-56); opacity: .5; cursor: pointer; transition: opacity var(--duration-base), transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base); }
.image-strip button:hover { opacity: .9; }
.image-strip button.is-current { opacity: 1; box-shadow: 0 0 0 2px var(--on-dark); transform: translateY(-2px); }
.image-strip img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none) { .image-arrow { display: none; } .image-toolbar { bottom: 12px; } .image-viewer:has(.image-strip) .image-toolbar { bottom: 84px; } }
.preview-modal.is-expanded :is(.image-viewer, .preview-player-audio) { height: 100%; }
/* 拖动调整过大小的窗口：图片画布占满窗口给出的高度。 */
.preview-modal.is-sized:not(.is-minimized) .image-viewer { height: var(--preview-player-height, 100%); }
.preview-modal.is-expanded .audio-art { width: clamp(160px, 34vh, 340px); }
.share-card .image-viewer { height: min(70dvh, 640px); }
@media (prefers-reduced-motion: reduce) {
  :is(.preview-player-audio, .preview-mini-player).is-playing .preview-equalizer i { animation: none; transform: scaleY(.65); }
  .audio-lyrics-skeleton i { animation: none; }
  .audio-status-spinner { animation-duration: 2.4s; }
  .audio-backdrop, .image-backdrop-layer, .image-viewer.is-loaded .image-full { animation: none; }
  .audio-tonearm, .audio-lyric, .image-full { transition: none; }
  .preview-modal.is-minimized, .preview-mini-lyric, .preview-mini-player.is-waiting .preview-mini-play { animation: none; }
}
.preview-engine-loading { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 240px; padding: 24px; color: var(--ink-2); }
.preview-code-editor { min-width: 0; width: 100%; }
.preview-code-editor .cm-search { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 36px 8px 16px; font-size: var(--text-xs); }
.preview-code-editor .cm-search label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.preview-code-editor .cm-search .cm-textfield { min-width: 100px; max-width: 100%; padding: 4px 8px; border-radius: var(--radius-xs); font: inherit; }
.preview-code-editor .cm-search .cm-button { padding: 4px 8px; border-radius: var(--radius-xs); font: inherit; }
.preview-code-editor .cm-search input[type="checkbox"] { accent-color: var(--accent); }
.preview-code-editor .cm-panels { border-color: var(--line-soft); }
/* 只读预览：点击选择文字时不加边框，只在键盘导航进入时用内描边提示焦点。 */
html[data-input="keyboard"] .preview-code-editor .cm-editor.cm-focused { box-shadow: inset 0 0 0 2px var(--focus-ring); }
.preview-frame { width: 100%; height: calc(100vh - 280px); height: calc(100dvh - 280px); min-height: 420px; border: 0; background: var(--surface); }
.preview-text { --preview-content-height: calc(100dvh - 290px); --preview-reading-height: calc(var(--preview-content-height) - var(--preview-notice-height, 0px)); display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--surface); }
.preview-text.is-compact { --preview-text-min-height: 160px; }
.preview-text.is-truncated { --preview-notice-height: 52px; }
.preview-text-status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 8px 16px; border-top: 1px solid var(--line-soft); color: var(--ink-3); font-size: var(--text-micro); font-variant-numeric: tabular-nums; }
.preview-loading { display: grid; place-content: center; justify-items: center; gap: 16px; min-height: 280px; padding: 24px; color: var(--ink-2); }
.preview-resource { position: relative; min-width: 0; width: 100%; min-height: 280px; }
/* 封面图占位：原图在后台加载，完成后淡入替换。 */
.preview-resource:not(.is-ready) .preview-media-full { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.preview-resource.is-ready .preview-media-full img { animation: fade var(--duration-base) ease-out; }
.preview-media-poster { position: relative; }
.preview-media-poster img { width: 100%; height: auto; max-height: calc(100vh - 300px); max-height: calc(100dvh - 300px); object-fit: contain; filter: saturate(.92); }
.preview-poster-status { position: absolute; right: 36px; bottom: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 8px; border-radius: var(--radius-sm); background: var(--media-overlay); color: var(--media-ink); font-size: var(--text-xs); }
.preview-poster-status .spinner { width: 13px; height: 13px; }
.preview-media-loader { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: var(--surface-sunken); }
.preview-fallback { display: grid; place-content: center; justify-items: center; gap: 8px; padding: 56px 24px; text-align: center; }
.preview-fallback h3 { margin-top: 8px; font-size: var(--text-lg); }
.preview-fallback p { margin-bottom: 16px; color: var(--ink-2); }

/* 分享状态卡：关闭时中性，开启时变为公开暖色 */
.share-status { padding: 16px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); transition: background-color var(--duration-base), border-color var(--duration-base); }
.share-status.is-public { border-color: var(--line); background: var(--surface-sunken); }
.share-status.is-public .switch-input:checked + .switch-track { background: var(--public); }

/* 上传 */
.upload-picker-trigger.icon-btn { display: inline-flex; justify-content: center; gap: 8px; width: auto; height: 34px; padding: 0 12px; background: var(--primary); color: var(--on-primary); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.upload-picker-trigger.icon-btn:hover, .upload-picker-trigger.icon-btn.is-active { background: var(--primary-hover); color: var(--on-primary); }
.upload-selection { display: grid; gap: 12px; min-width: 0; }
.upload-selection .search-input { width: 100%; }
.upload-type-filters { margin: 0; padding: 2px; }
.upload-tree-surface { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); }
.upload-selection-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--surface-sunken); font-size: var(--text-sm); }
.upload-selection-bar > label { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
.upload-selection-bar > .muted { font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.upload-tree-scroll { max-height: min(360px, 42dvh); overflow-y: auto; overscroll-behavior: contain; }
.upload-tree { margin: 0; padding: 4px 0; list-style: none; }
.upload-tree-row { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 42px; padding: 0 12px 0 calc(8px + var(--upload-depth) * 16px); font-size: var(--text-sm); }
.upload-tree-row:hover { background: var(--surface-hover); }
.upload-tree-check { display: flex; flex: none; align-items: center; justify-content: center; width: 28px; min-height: 40px; cursor: pointer; }
.upload-tree-name { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; min-height: 40px; padding: 0; border: 0; border-radius: var(--radius-xs); background: transparent; color: inherit; font: inherit; text-align: left; }
button.upload-tree-name { cursor: pointer; }
.upload-tree-name > :not(:last-child) { flex: none; }
.upload-tree-name > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-tree-spacer { width: 14px; }
.upload-tree-meta { flex: none; font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.upload-tree-row.is-folder .upload-tree-name { font-weight: 500; }
.upload-tree-row.is-excluded .upload-tree-name { color: var(--ink-3); }
.upload-selection-hint { margin: 0; font-size: var(--text-xs); line-height: 1.6; }
.upload-selection-empty { display: grid; justify-items: center; gap: 8px; padding: 32px 16px; color: var(--ink-3); font-size: var(--text-sm); }
@media (max-width: 860px) {
  .files-view .page-header-actions > .upload-picker-trigger { flex: 1 1 0; }
  .upload-picker-trigger.icon-btn { min-height: 40px; }
  .upload-type-filters .filter-chip { min-height: 36px; }
  .upload-tree-row { padding-right: 8px; padding-left: calc(4px + var(--upload-depth) * 12px); }
  .upload-tree-check { width: 40px; }
  .upload-dialog .search-input input { font-size: var(--text-lg); }
}

/* 文件缓存状态的小圆环（file-cache-ring）沿用这两条描边规则。 */
.tray-ring-track { stroke: var(--accent-soft); }
.tray-ring-value { stroke: currentColor; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--tray-progress)); stroke-linecap: round; transition: stroke-dashoffset .5s var(--ease-out), stroke var(--duration-slow); }

/* 代码块 */
.code-block { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); }
.code-block-bar { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink-3); font-family: var(--font-mono); font-size: var(--text-xs); }
.code-block-bar button { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--ink-2); font-family: var(--font); font-size: var(--text-xs); }
.code-block-bar button:hover { background: var(--surface-hover); color: var(--ink); }
.code-block pre { margin: 0; padding: 16px; overflow-x: auto; font-size: var(--text-xs); line-height: 1.65; }

/* ---------- 公开分享页 ---------- */

.share-page { display: flex; min-height: 100vh; min-height: 100dvh; flex-direction: column; background: var(--surface-sunken); }
.share-bar { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 28px; border-bottom: 1px solid var(--line); background: var(--surface); }
.share-bar-note { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--public-soft); color: var(--public-ink); font-size: var(--text-sm); font-weight: 500; }
.share-main { display: grid; align-content: start; gap: 16px; width: 100%; max-width: 960px; margin: 0 auto; padding: 40px 24px; }
.share-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-sm); }
.share-head { display: flex; align-items: center; gap: 16px; padding: 16px 20px; }
.share-title { flex: 1; min-width: 0; }
.share-title h1 { font-size: var(--text-xl); font-weight: 600; letter-spacing: -.015em; overflow-wrap: anywhere; }
.share-sharer { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--ink-3); font-size: var(--text-sm); }
.share-sharer strong { color: var(--ink-2); font-weight: 500; }
.share-title p { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 2px; color: var(--ink-3); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.share-actions { display: flex; gap: 8px; }
.share-preview { display: grid; min-height: 280px; border-top: 1px solid var(--line); background: var(--surface-sunken); }
.share-footnote { color: var(--ink-3); font-size: var(--text-sm); text-align: center; }

/* ---------- 文档 ---------- */

.docs { min-height: 100vh; min-height: 100dvh; background: var(--surface); }
.docs-bar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr minmax(0, 420px) 1fr; align-items: center; gap: 16px; height: 60px; padding: 0 24px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(10px); }
.docs-bar-left { display: flex; align-items: center; gap: 8px; }
.docs-bar-tag { padding-left: 8px; border-left: 1px solid var(--line); color: var(--ink-2); font-size: var(--text-md); font-weight: 500; }
.docs-menu-button { display: none; }
.docs-search-trigger { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink-3); text-align: left; }
.docs-search-trigger span { flex: 1; }
.docs-search-trigger:hover { border-color: var(--ink-3); color: var(--ink-2); }
kbd { padding: 1px 8px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--radius-xs); background: var(--surface); color: var(--ink-3); font-family: var(--font); font-size: var(--text-micro); }
.docs-bar-links { display: flex; justify-content: flex-end; }
.docs-bar-links a { padding: 8px 12px; border-radius: var(--radius-sm); color: var(--ink-2); font-weight: 500; }
.docs-bar-links a:hover { background: var(--surface-hover); color: var(--ink); }

.docs-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr) 220px; max-width: 1360px; margin: 0 auto; }
.docs-nav { position: sticky; top: 60px; display: grid; align-content: start; gap: 24px; height: calc(100vh - 60px); height: calc(100dvh - 60px); padding: 28px 16px 40px 24px; overflow-y: auto; border-right: 1px solid var(--line-soft); }
.docs-nav-group { display: grid; gap: 1px; }
.docs-nav-group p { padding: 0 8px 8px; color: var(--ink-3); font-size: var(--text-xs); font-weight: 600; }
.docs-nav-group a { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px; border-radius: var(--radius-sm); color: var(--ink-2); font-size: var(--text-md); }
.docs-nav-group a svg { color: var(--ink-3); }
.docs-nav-group a:hover { background: var(--surface-hover); color: var(--ink); }
.docs-nav-group a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.docs-nav-group a[aria-current="page"] svg { color: var(--accent); }
.docs-main { min-width: 0; padding: 40px 56px 96px; }
.docs-toc { position: sticky; top: 60px; display: grid; align-content: start; gap: 2px; height: calc(100vh - 60px); height: calc(100dvh - 60px); padding: 40px 24px 40px 0; overflow-y: auto; }
.docs-toc p { margin-bottom: 8px; color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.docs-toc a { padding: 4px 0 4px 12px; border-left: 2px solid var(--line-soft); color: var(--ink-3); font-size: var(--text-sm); line-height: 1.45; }
.docs-toc a.is-sub { padding-left: 24px; }
.docs-toc a:hover { color: var(--ink); }
.docs-toc a.is-active { border-left-color: var(--accent); color: var(--accent); }
.docs-scrim { display: none; }

/* 文档正文 */
.doc { max-width: 760px; color: var(--ink); font-size: var(--text-reading); line-height: 1.75; }
.doc-breadcrumb { margin-bottom: 8px; color: var(--accent); font-size: var(--text-sm); font-weight: 600; }
.doc h1 { font-size: var(--text-hero); font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.doc-lead { margin: 12px 0 28px; color: var(--ink-2); font-size: var(--text-lead); line-height: 1.65; }
.doc > p, .doc .endpoint-body > p { margin: 0 0 16px; }
.doc-h2, .doc-h3 { position: relative; scroll-margin-top: 84px; }
.doc-h2 { margin: 48px 0 16px; padding-top: 24px; border-top: 1px solid var(--line-soft); font-size: var(--text-2xl); font-weight: 700; letter-spacing: -.015em; line-height: 1.35; }
.doc-h3 { margin: 32px 0 8px; font-size: var(--text-lead); font-weight: 600; }
.doc-anchor { position: absolute; left: -22px; color: var(--ink-3); font-weight: 500; opacity: 0; transition: opacity var(--duration-fast); }
.doc-h2:hover .doc-anchor, .doc-h3:hover .doc-anchor, .doc-anchor:focus-visible { opacity: 1; }
.doc-inline { padding: 1px 8px; border-radius: var(--radius-xs); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line-soft); font-size: .86em; overflow-wrap: anywhere; }
.doc-link { color: var(--accent); font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 3px; }
.doc-link:hover { text-decoration-color: var(--accent); }
.doc-list { margin: 0 0 16px; padding-left: 24px; }
.doc-list li { margin: 8px 0; }
.doc-list li::marker { color: var(--ink-3); }
.doc .code-block { margin: 0 0 16px; }
.doc-no { color: var(--danger); font-weight: 500; }

.callout { display: flex; gap: 12px; margin: 0 0 16px; padding: 16px 16px; border: 1px solid; border-radius: var(--radius-md); font-size: var(--text-md); line-height: 1.65; }
.callout > svg { flex: none; margin-top: 4px; }
.callout strong { display: block; margin-bottom: 2px; }
.callout-info { border-color: color-mix(in srgb, var(--accent) 25%, transparent); background: var(--accent-soft); }
.callout-info > svg { color: var(--accent); }
.callout-tip { border-color: color-mix(in srgb, var(--success) 25%, transparent); background: var(--success-soft); }
.callout-tip > svg { color: var(--success); }
.callout-warning { border-color: color-mix(in srgb, var(--warning) 30%, transparent); background: var(--warning-soft); }
.callout-warning > svg { color: var(--warning); }
.callout-danger { border-color: color-mix(in srgb, var(--danger) 30%, transparent); background: var(--danger-soft); }
.callout-danger > svg { color: var(--danger); }

/* 步骤：真实的先后顺序，使用编号 */
.doc-steps { display: grid; gap: 0; margin: 0 0 20px; padding: 0; list-style: none; counter-reset: step; }
.doc-steps li { position: relative; padding: 0 0 20px 44px; counter-increment: step; }
.doc-steps li::before { position: absolute; top: 0; left: 0; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); content: counter(step); font-size: var(--text-sm); font-weight: 700; }
.doc-steps li:not(:last-child)::after { position: absolute; top: 32px; bottom: 4px; left: 13.5px; width: 1px; background: var(--line); content: ""; }
.doc-step-title { display: block; margin-bottom: 2px; padding-top: 2px; }

.doc-table-wrap { margin: 0 0 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.doc-table { width: 100%; border-collapse: collapse; font-size: var(--text-md); line-height: 1.6; }
.doc-table th, .doc-table td { padding: 8px 16px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.doc-table th { background: var(--surface-sunken); color: var(--ink-2); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table td:first-child { font-weight: 500; }
.doc-table.is-compact td { padding: 8px 16px; }

.doc-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px 0; margin: 8px 0 24px; }
.doc-flow-item { display: flex; flex: 1 1 180px; align-items: center; }
.doc-flow-arrow { padding: 0 8px; color: var(--ink-3); }
.doc-flow-node { display: grid; flex: 1; gap: 2px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); line-height: 1.45; }
.doc-flow-node svg { margin-bottom: 8px; color: var(--accent); }
.doc-flow-node span { color: var(--ink-2); font-size: var(--text-sm); }
.doc-flow-item:last-child .doc-flow-node { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-soft); }

.doc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; }
.doc-card { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); line-height: 1.5; transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.doc-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.doc-card-icon { display: grid; grid-row: 1 / 3; width: 36px; height: 36px; place-items: center; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); }
.doc-card > span:last-child { color: var(--ink-2); font-size: var(--text-md); }

/* 接口卡片 */
.endpoint { margin: 0 0 20px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); scroll-margin-top: 84px; }
.endpoint > header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); background: var(--surface-sunken); }
.endpoint-path { flex: 1; min-width: 0; font-size: var(--text-md); font-weight: 600; overflow-wrap: anywhere; }
.endpoint-auth { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); font-size: var(--text-xs); }
.endpoint-auth.auth-public { color: var(--public-ink); }
.endpoint-body { padding: 16px 16px 2px; }
.endpoint-summary { margin: 0 0 16px; color: var(--ink-2); font-size: var(--text-reading); }
.method { min-width: 52px; padding: 2px 8px; border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; text-align: center; }
.method-get, .method-head { background: var(--success-soft); color: var(--success); }
.method-post { background: var(--accent-soft); color: var(--accent-ink); }
.method-put { background: var(--warning-soft); color: var(--warning); }
.method-delete { background: var(--danger-soft); color: var(--danger); }
.doc-params { margin: 0 0 16px; }
.doc-params-title { margin-bottom: 8px; color: var(--ink-3); font-size: var(--text-sm); font-weight: 600; }
.doc-params dl { margin: 0; border-top: 1px solid var(--line-soft); }
.doc-params dl > div { display: grid; grid-template-columns: minmax(180px, auto) 1fr; gap: 4px 16px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.doc-params dt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.doc-params dt code { font-size: var(--text-sm); font-weight: 600; }
.doc-param-type { color: var(--ink-3); font-family: var(--font-mono); font-size: var(--text-xs); }
.doc-param-required { padding: 0 8px; border-radius: var(--radius-pill); background: var(--danger-soft); color: var(--danger); font-size: var(--text-micro); font-weight: 600; }
.doc-params dd { margin: 0; color: var(--ink-2); font-size: var(--text-md); }

/* 代码标签页与高亮 */
.code-tabs .code-block-bar { padding-left: 4px; }
.code-tabs [role="tablist"] { display: flex; gap: 2px; height: 100%; }
.code-tabs [role="tab"] { height: 100%; padding: 0 8px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-3); font-family: var(--font); font-size: var(--text-sm); font-weight: 500; }
.code-tabs [role="tab"].is-active { border-bottom-color: var(--accent); color: var(--ink); }
.tok-comment { color: var(--ink-3); font-style: italic; }
.tok-string { color: var(--syntax-string); }
.tok-keyword { color: var(--syntax-keyword); }
.tok-property { color: var(--syntax-property); }
.tok-number { color: var(--syntax-number); }
.tok-flag, .tok-variable { color: var(--syntax-variable); }
.tok-fn { color: var(--syntax-fn); }

.doc-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 760px; margin-top: 56px; }
.doc-pager-link { display: grid; gap: 2px; padding: 16px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); transition: border-color var(--duration-fast); }
.doc-pager-link:hover { border-color: var(--accent); }
.doc-pager-link small { color: var(--ink-3); font-size: var(--text-sm); }
.doc-pager-link strong { display: flex; align-items: center; gap: 8px; color: var(--accent); }
.doc-pager-link.is-next { text-align: right; }
.doc-pager-link.is-next strong { justify-content: flex-end; }

/* 搜索 */
.docs-search-backdrop { align-items: start; padding-top: 12vh; }
.docs-search { width: 100%; max-width: 580px; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); animation: rise var(--duration-base) var(--ease-out); }
.docs-search-input { display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink-3); }
.docs-search-input input { flex: 1; height: 54px; border: 0; outline: none; background: transparent; font-size: var(--text-lg); }
.docs-search-results { max-height: 420px; margin: 0; padding: 8px; overflow-y: auto; list-style: none; }
.docs-search-results button { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 8px 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-3); text-align: left; }
.docs-search-results button.is-selected { background: var(--accent-soft); color: var(--accent); }
.docs-search-results button > span { display: grid; gap: 2px; }
.docs-search-results strong { color: var(--ink); font-size: var(--text-md); }
.docs-search-results small { color: var(--ink-2); font-size: var(--text-sm); }
.docs-search-empty { padding: 28px; color: var(--ink-3); text-align: center; }

/* ---------- 管理端 ---------- */

.locked-gate { display: grid; justify-items: center; max-width: 460px; margin: 10vh auto 0; text-align: center; }
.locked-icon { display: grid; width: 60px; height: 60px; margin-bottom: 20px; place-items: center; border-radius: var(--radius-lg); background: var(--warning-soft); color: var(--warning); }
.locked-gate h1 { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -.02em; }
.locked-gate > p { margin: 8px 0 28px; color: var(--ink-2); }
.locked-gate .unlock-form { width: 100%; text-align: left; }
.unlock-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; max-width: 520px; }
.unlock-form .btn { height: 34px; }
.unlock-form .field-error ~ * { align-self: center; }

/* 列数随指标个数：自动排成一行均分，不留空列。 */
.stat-strip { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin-bottom: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.stat { display: grid; gap: 4px; padding: 16px 20px; border-left: 1px solid var(--line-soft); }
.overview-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; }
.overview-column { display: grid; gap: 16px; min-width: 0; }
.usage-chart, .traffic-chart { display: grid; gap: 16px; }
.usage-chart-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: var(--text-sm); }
.usage-chart-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-chart-row strong { min-width: 76px; text-align: right; font-size: var(--text-xs); font-weight: 600; }
.usage-chart-track { height: 8px; overflow: hidden; border-radius: var(--radius-pill); background: var(--line-soft); }
.usage-chart-track i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.traffic-legend { display: flex; flex-wrap: wrap; gap: 16px; color: var(--ink-2); font-size: var(--text-xs); }
.traffic-legend span { display: inline-flex; align-items: center; gap: 8px; }
.traffic-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.traffic-in { background: var(--accent); }
.traffic-out { background: var(--chart-out); }
.stat:first-child { border-left: 0; }
.stat-label { color: var(--ink-3); font-size: var(--text-sm); }
.stat-value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat-detail { color: var(--ink-3); font-size: var(--text-xs); }

.attention-list, .recent-list, .task-list, .plain-list { margin: 0; padding: 0; list-style: none; }
.attention-list li, .task-list li { display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.attention-list li:last-child, .task-list li:last-child { border-bottom: 0; }
.attention-icon { display: grid; width: 34px; height: 34px; flex: none; place-items: center; border-radius: var(--radius-sm); }
.attention-icon.tone-accent { background: var(--accent-soft); color: var(--accent); }
.attention-icon.tone-warning { background: var(--warning-soft); color: var(--warning); }
.attention-icon.tone-danger { background: var(--danger-soft); color: var(--danger); }
.attention-copy { display: grid; flex: 1; gap: 4px; min-width: 0; }
.attention-copy > small { color: var(--ink-2); font-size: var(--text-sm); }
.attention-copy .switch-row { margin-top: 8px; max-width: 420px; }
.recent-list li { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line-soft); }
.recent-list li:last-child { border-bottom: 0; }
.recent-copy { display: grid; flex: 1; min-width: 0; }
.recent-copy strong { overflow: hidden; font-size: var(--text-sm); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.recent-copy small { color: var(--ink-3); font-size: var(--text-xs); }
.recent-meta { width: 76px; flex: none; font-size: var(--text-sm); font-variant-numeric: tabular-nums; text-align: right; }

.channel-mark { display: grid; width: 32px; height: 32px; flex: none; place-items: center; border-radius: 50%; background: var(--surface-sunken); color: var(--ink-3); }
.channel-mark.is-active { background: var(--accent-soft); color: var(--accent); }
.grant-list { display: flex; flex-wrap: wrap; gap: 4px; }
.plain-list { display: grid; gap: 8px; color: var(--ink-2); }
.plain-list li { position: relative; padding-left: 16px; }
.plain-list li::before { position: absolute; top: .7em; left: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--line); content: ""; }
.key-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.key-panel > p { max-width: 60ch; color: var(--ink-2); }
.key-panel .unlock-form { flex: 1 1 360px; }
/* 设置表单：左侧标题与说明，右侧控件；行之间用细线分隔（参照 Linear / Vercel 设置页）。 */
.settings-form { gap: 0; }
.registration-code-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.registration-code-row > .input { flex: 1; min-width: 0; }
.registration-code-row > .btn { flex-shrink: 0; }
.registration-password .input { flex: 1; min-width: 0; }
.registration-password .affix-toggle { flex-shrink: 0; white-space: nowrap; }
.registration-switches { display: grid; gap: 20px; padding-bottom: 24px; }
.registration-section { padding: 24px 0 8px; }
.registration-section h3 { margin: 0 0 8px; font-size: var(--text-md); }
.registration-section p { margin: 0; color: var(--ink-3); font-size: var(--text-sm); line-height: 1.7; }
.invitations-table { --cols: minmax(220px, 1.4fr) minmax(90px, .6fr) minmax(160px, 1fr) 80px 148px; }
.registration-invite-toolbar { padding: 16px 20px; margin: 0; }
.registration-invite-toolbar > .input { width: auto; }
.registration-invite-footer { padding: 12px 20px; }
.settings-form > .registration-message { margin-top: 16px; }
.settings-form > .field { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: 40px; row-gap: 4px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.settings-form > .field:first-child { padding-top: 0; }
.settings-form > .field:last-of-type { padding-bottom: 0; border-bottom: 0; }
.settings-form > .field > .field-label { grid-column: 1; grid-row: 1; }
.settings-form > .field > .field-hint, .settings-form > .field > .field-error { grid-column: 1; grid-row: 2; }
.settings-form > .field > :not(.field-label, .field-hint, .field-error) { grid-column: 2; grid-row: 1 / span 2; }
.settings-form > .form-alert { margin-top: 16px; }
.settings-form .field-hint code { padding: 1px 4px; border-radius: var(--radius-xs); background: var(--surface-sunken); color: var(--ink-2); }
.settings-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--surface-sunken); animation: fade var(--duration-fast) ease-out; }
.settings-actions-note { margin-right: auto; color: var(--ink-2); font-size: var(--text-sm); }
.key-value code.mono { overflow-wrap: anywhere; }
.task-outcome { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--text-sm); }
.task-outcome .muted { font-size: var(--text-xs); }
.gc-failures { margin-top: 8px; font-size: var(--text-sm); }
.gc-failure-list { display: grid; gap: 8px; padding-top: 8px; }
.gc-failure { display: grid; gap: 4px; }
.gc-failure > small { color: var(--ink-2); line-height: 1.6; }

/* ---------- 响应式 ---------- */

@media (max-width: 1100px) {
  .docs-layout { grid-template-columns: 232px minmax(0, 1fr); }
  .docs-toc { display: none; }
  .docs-main { padding: 36px 40px 96px; }
  .stat-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: row; }
  .stat-strip > .stat { grid-column: span 2; }
  /* 四个指标排成两行两列。 */
  .stat-strip:has(> :nth-child(4):last-child) > .stat { grid-column: span 3; }
  .stat-strip:has(> :nth-child(4):last-child) > .stat:nth-child(3) { border-left: 0; border-top: 1px solid var(--line-soft); }
  .stat-strip:has(> :nth-child(4):last-child) > .stat:nth-child(4) { border-left: 1px solid var(--line-soft); }
  .stat-strip > .stat:nth-child(4) { border-left: 0; }
  .stat-strip > .stat:nth-child(n + 4) { grid-column: span 3; border-top: 1px solid var(--line-soft); }
  .overview-columns { grid-template-columns: minmax(0, 1fr); }
  .auth { position: relative; isolation: isolate; grid-template-columns: minmax(0, 1fr); }
  .auth-form-pane { position: relative; z-index: 1; }
  /* 窄屏将同一面瓦片墙缩成顶部背景，淡出后不干扰表单和键盘操作。 */
  .auth-visual { position: absolute; inset: 0 0 auto; display: block; height: clamp(180px, 36vh, 340px); height: clamp(180px, 36svh, 340px); padding: 0; background: transparent; pointer-events: none;
    -webkit-mask-image: linear-gradient(var(--ink) 45%, transparent); mask-image: linear-gradient(var(--ink) 45%, transparent); }
  .auth-admin .auth-visual { background: transparent; }
  .auth-visual::before { inset: -100px -80px auto auto; width: min(560px, 110%); background: radial-gradient(closest-side, color-mix(in srgb, var(--ink) 6%, transparent), transparent); }
  .auth-admin .auth-visual::before { inset: -100px -80px auto auto; background: radial-gradient(closest-side, var(--admin-soft), transparent); }
  .auth-visual-copy { display: none; }
  .auth-visual .mosaic { position: absolute; top: -50px; right: -14%; width: min(740px, 130%); max-width: none; gap: 8px; transform: rotate(12deg); }
  .auth-visual .mosaic i { box-shadow: inset 0 0 0 1px var(--line); }
  .auth-visual .mosaic .t2 { background: var(--surface-hover); }
  .auth-visual .mosaic .t3 { background: color-mix(in srgb, var(--ink) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); }
  .auth-visual .mosaic .t4 { background: color-mix(in srgb, var(--ink) 24%, transparent); box-shadow: none; }
  .auth-visual .mosaic .t5 { background: color-mix(in srgb, var(--ink) 72%, transparent); box-shadow: none; }
  .auth-visual .mosaic .plane { box-shadow: none; }
}

@media (max-width: 860px) {
  .settings-form > .field { grid-template-columns: minmax(0, 1fr); }
  .settings-form > .field > :not(.field-label, .field-hint, .field-error) { grid-column: 1; grid-row: 2; }
  .settings-form > .field > .field-hint, .settings-form > .field > .field-error { grid-row: 3; }
  /* 文件页：标题在上，按钮在下靠右并保留文字；触屏隐藏快捷键提示。 */
  /* 不能换行：多行的纵向 flex 每行按最宽内容计宽，长目录名的面包屑会把整页撑出屏幕。 */
  .files-view .page-header { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .files-view .page-header-main { flex: initial; }
  .files-view .page-header-actions { justify-content: flex-end; }
  .shortcut-hint { display: none; }
  .folder-strip { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .mobile-bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
  /* iOS Safari 的 100vh 包含被工具栏遮住的部分：抽屉用动态视口高度，并整体可滚动，底部状态与账号区始终够得着。 */
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 70; width: min(300px, 86vw); height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
    /* 收起时不留阴影并隐藏：阴影模糊半径会越过屏幕左缘，抽屉内的链接也不应能被 Tab 到。 */
    box-shadow: none; visibility: hidden; transform: translateX(-100%);
    transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base), visibility 0s var(--duration-base); }
  .sidebar-nav { flex: 1 0 auto; overflow-y: visible; }
  .nav-item { height: 40px; }
  .sidebar-top, .sidebar-bottom { flex: none; }
  .sidebar-close { display: inline-grid; }
  .drawer-open .sidebar { box-shadow: var(--shadow-lg); visibility: visible; transform: none; transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base); }
  .drawer-scrim { position: fixed; inset: 0; z-index: 65; display: block; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--duration-base); }
  .drawer-open .drawer-scrim { opacity: 1; pointer-events: auto; }
  .main-inner { padding: 20px 16px 96px; }
  /* 标题与操作放得下时同一行，放不下（标题长、有说明）时操作换到下一行。 */
  .page-header { flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
  .page-header-main { flex: 1 1 14em; }
  .page-header h1 { font-size: var(--text-xl); }
  .page-header-actions { justify-content: flex-start; }
  .panel-header.has-description { gap: 12px; }
  .panel-header.has-description .panel-header-main { flex-basis: 100%; }
  .search-input { width: 100%; }
  .toolbar-actions { width: 100%; justify-content: space-between; }
  .selection-bar .toolbar-actions { width: auto; }
  .row-quick { display: none; }
  /* 横向滚动时，每行最后一列（操作按钮）固定在右侧，保证随时点得到。 */
  .data-row > .cell-actions:last-child { position: sticky; right: 0; z-index: 1; padding-left: 8px; background: var(--surface); box-shadow: -10px 0 10px -10px var(--shade-16); }
  .data-row:not(.data-head):hover > .cell-actions:last-child { background: linear-gradient(var(--surface-hover), var(--surface-hover)), var(--surface); }
  .data-row.is-selected > .cell-actions:last-child { background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface); }
  /* 表格保留全部信息，通过横向滚动适配窄屏，避免把列静默隐藏。 */
  .file-surface { overflow-x: auto; }
  /* 文件列表由 .file-surface 横向滚动；表格自己不能再设 overflow，否则固定在右侧的操作列会以表格为滚动容器而失效。 */
  .file-surface > .data-table { min-width: 680px; }
  .table-scroll > .data-table { min-width: 680px; }
  .panel > .data-table { min-width: 680px; overflow-x: auto; }
  .file-table { --cols: 20px minmax(220px, 1fr) 88px 96px 132px 76px; }
  .shared-table { --cols: minmax(220px, 1fr) 80px 88px 72px 104px 76px; }
  .users-table { --cols: minmax(160px, 1.2fr) minmax(160px, 1fr) 90px 110px 120px; }
  .objects-table { --cols: minmax(220px, 2fr) minmax(100px, .7fr) 88px 90px 110px 44px; }
  .file-surface > .bots-table { --cols: minmax(180px, 1fr) minmax(150px, .8fr) 100px 100px 90px minmax(160px, 1fr) 76px; min-width: 1050px; }
  .clients-table { --cols: minmax(180px, 1fr) 110px minmax(160px, 1.4fr) 90px 56px; }
  .keys-table { --cols: minmax(140px, 1fr) minmax(160px, 1.4fr) 90px 110px 76px; }
  .file-surface.is-grid { overflow: visible; }
  .file-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding: 0; }
  .grid-card { grid-template-rows: auto 84px; border-color: var(--line); }
  .shared-grid-card { grid-template-rows: auto 108px; }
  .grid-thumb .tile-xl { width: 56px; height: 56px; border-radius: var(--radius-md); }
  .folder-preview-grid { width: min(100%, 100px); }
  .folder-preview-cell .file-tile { width: 100%; height: 100%; border-radius: 0; }
  .grid-meta { grid-template-columns: minmax(0, 1fr) 44px; grid-template-rows: 44px 18px; gap: 2px; }
  /* 多行截断作用于内部文本，原生按钮另设高度上限，避免文字溢出到元信息行。 */
  .grid-name { max-height: 36px; line-height: 18px; white-space: normal; }
  .grid-name-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 36px; line-height: 18px; white-space: normal; overflow-wrap: break-word; overflow-wrap: anywhere; }
  .grid-sub { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; padding-right: 8px; }
  .grid-kind { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .grid-size { flex: none; font-variant-numeric: tabular-nums; }
  .grid-menu { grid-row: 1; }
  .grid-check { opacity: 1; }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; }
  .stat-strip > .stat { grid-column: auto; border-left: 0; border-top: 1px solid var(--line-soft); }
  .stat-strip:has(> :nth-child(4):last-child) > .stat { grid-column: auto; }
  .stat-strip > .stat:nth-child(n + 4) { grid-column: auto; }
  .stat-strip > .stat:nth-child(even) { border-left: 1px solid var(--line-soft); }
  .stat-strip > .stat:nth-child(-n + 2) { border-top: 0; }
  .stat-strip > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; border-left: 0; }
  .form-row, .key-value > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .modal-backdrop { align-items: end; padding: var(--floating-top) var(--floating-right) var(--floating-bottom) var(--floating-left); }
  .modal { max-width: none; max-height: min(calc(var(--modal-viewport-height, 100dvh) * .92), calc(var(--modal-viewport-height, 100dvh) - var(--floating-top) - var(--floating-bottom))); border-radius: var(--radius-xl); }
  .modal-backdrop:has(> .preview-modal):not(.is-expanded):not(.is-minimized) { place-items: center; padding: max(24px, env(safe-area-inset-top)) var(--floating-right) max(32px, env(safe-area-inset-bottom)) var(--floating-left); }
  .preview-modal:not(.is-expanded):not(.is-minimized) { max-height: min(78dvh, calc(100dvh - 56px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); border-radius: var(--radius-xl); }
  .preview-modal-video { --preview-width-limit: calc(100vw - var(--floating-left) - var(--floating-right)); }
  .preview-stage { min-height: 240px; }
  .preview-modal:not(.is-minimized) .modal-header { flex-wrap: wrap; padding: 12px 12px 8px; gap: 8px; }
  .preview-modal:not(.is-minimized) .modal-window-actions { width: 100%; justify-content: flex-end; }
  .preview-playlist-toggle { font-size: var(--text-xs); padding: 0 4px; }
  .modal-backdrop.is-minimized { left: calc((100vw + var(--floating-left) - var(--floating-right)) / 2); bottom: var(--floating-bottom); width: min(380px, calc(100vw - var(--floating-left) - var(--floating-right))); }
  .preview-video-host .art-control-pip, .preview-video-host .art-control-fullscreenWeb { display: none !important; }
  .auth-form-pane { padding: 24px; }
  .share-bar { padding: 0 16px; }
  .share-bar .brand-tagline { display: none; }
  .share-main { padding: 24px 12px; }
  .share-head { flex-wrap: wrap; padding: 16px; }
  .share-actions { width: 100%; flex-wrap: wrap; }
  .share-actions > * { flex: 1 1 auto; }
  .docs-bar { grid-template-columns: 1fr auto; padding: 0 12px; }
  .docs-bar-links, .docs-search-trigger span, .docs-search-trigger kbd { display: none; }
  .docs-search-trigger { width: 36px; justify-content: center; padding: 0; }
  .docs-menu-button { display: inline-grid; }
  .docs-layout { grid-template-columns: minmax(0, 1fr); }
  .docs-nav { position: fixed; inset: 60px auto 0 0; z-index: 30; width: min(300px, 86vw); height: auto; background: var(--surface); box-shadow: var(--shadow-lg); transform: translateX(-102%); transition: transform var(--duration-base) var(--ease-out); }
  .docs-nav.is-open { transform: none; }
  .docs-scrim { position: fixed; inset: 60px 0 0; z-index: 25; display: block; background: var(--scrim); }
  .docs-main { padding: 24px 16px 80px; }
  .doc h1 { font-size: var(--text-display); }
  .doc-lead { font-size: var(--text-lg); }
  .doc-anchor { display: none; }
  .doc-cards, .doc-pager { grid-template-columns: minmax(0, 1fr); }
  .doc-params dl > div { grid-template-columns: minmax(0, 1fr); }
  .docs-search-backdrop { padding: 12px; }
  .unlock-form { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.field > .segmented { justify-self: start; }
.check-cell { display: grid; justify-items: start; gap: 2px; }
.check-cell small { max-width: 100%; overflow: hidden; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.audit-table { --cols: 128px minmax(110px, 1fr) minmax(96px, .8fr) minmax(140px, 2fr) 64px 44px; }
/* 每列都要能收在自己的宽度里：动作名允许换行，对象与详情单行省略（完整内容在 title），不能溢出到相邻列。 */
.audit-table .data-row > * { min-width: 0; }
.audit-action { overflow-wrap: anywhere; }
.audit-detail { min-width: 0; }
.audit-detail > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-target { overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.panel-more { display: flex; justify-content: center; padding: 12px; border-top: 1px solid var(--line-soft); }
.panel-more:empty { display: none; }
@media (max-width: 860px) { .audit-table { --cols: 128px 140px 112px minmax(200px, 1fr) 64px 44px; } }
.share-gate { display: grid; justify-items: center; gap: 8px; max-width: 420px; width: 100%; margin: 0 auto; padding: 36px 28px; text-align: center; }
.share-gate h1 { font-size: var(--text-lg); font-weight: 600; }
.share-gate > p { margin-bottom: 16px; color: var(--ink-2); }
.share-gate .form { width: 100%; text-align: left; }
.share-password-set, .share-password-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.share-password-form .input { flex: 1; min-width: 160px; }
.toast button.toast-action { width: auto; height: 24px; padding: 0 8px; white-space: nowrap; color: var(--accent); font-size: var(--text-sm); font-weight: 600; }
.toast button.toast-action:hover { background: var(--accent-soft); color: var(--accent-ink); }
.trash-table { --cols: minmax(0, 1fr) 90px 150px 124px; }
@media (max-width: 860px) { .trash-table { --cols: minmax(240px, 1fr) 90px 150px 124px; } }
.backups-table { --cols: minmax(0, 1fr) 90px 160px 80px; }
.thumbnail-jobs-table { --cols: 130px 70px 120px minmax(320px, 1fr); }
.panel-note { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 20px 16px; border-top: 1px solid var(--line-soft); color: var(--ink-2); font-size: var(--text-sm); }
.panel-note .code-block pre { padding: 8px 16px; }
.passphrase-form { max-width: 640px; }
.task-outcome .btn { margin-left: 4px; }
@media (max-width: 860px) { .backups-table { --cols: minmax(240px, 1fr) 90px 160px 80px; } }

/* ---------- 代码与 Markdown 预览（命名空间 src-* / hl-* / md，避免与文档站的 .code-block 冲突） ---------- */

.hl-comment { color: var(--ink-3); font-style: italic; }
.hl-string, .hl-inserted { color: var(--syntax-string); }
.hl-number, .hl-literal { color: var(--syntax-number); }
.hl-keyword { color: var(--syntax-keyword); }
.hl-type { color: var(--syntax-type); }
.hl-function { color: var(--syntax-fn); }
.hl-attr { color: var(--syntax-property); }
.hl-tag, .hl-variable, .hl-deleted { color: var(--syntax-tag); }
.hl-meta { color: var(--syntax-meta); }
.src-view { margin: 0; padding: 16px 24px; overflow: auto; color: var(--ink); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.7; tab-size: 4; white-space: pre-wrap; overflow-wrap: anywhere; counter-reset: line; }
.src-view code { font-size: inherit; }
.src-view.has-lines .src-line { position: relative; display: block; padding-left: 3.8em; counter-increment: line; }
.src-view.has-lines .src-line::before { content: counter(line); position: absolute; left: 0; width: 2.8em; color: var(--ink-3); opacity: .7; text-align: right; user-select: none; }
.preview-toolbar { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 44px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); background: var(--surface-sunken); }
.preview-readonly { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: var(--text-xs); white-space: nowrap; }
.preview-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: auto; }
.preview-toolbar-actions .btn { gap: 4px; padding: 0 8px; font-size: var(--text-xs); font-weight: 500; }
.preview-toolbar-actions .btn svg { width: 14px; height: 14px; }
.preview-toolbar .switch-row { min-height: 30px; gap: 8px; padding: 0 4px 0 8px; }
.preview-toolbar .switch-label { color: var(--ink-2); font-size: var(--text-xs); font-weight: 500; }
.preview-toolbar .switch-track { width: 28px; height: 16px; }
.preview-toolbar .switch-thumb { top: 2px; left: 2px; width: 12px; height: 12px; }
.preview-toolbar .switch-input:checked + .switch-track .switch-thumb { transform: translateX(12px); }
.preview-notice { padding: 8px 16px; border-top: 1px solid var(--line-soft); color: var(--ink-2); font-size: var(--text-xs); background: var(--warning-soft); }
.preview-notice a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.preview-doc { width: 100%; max-width: 820px; max-height: min(620px, var(--preview-reading-height)); margin: 0 auto; padding: 28px 32px 36px; overflow-y: auto; overscroll-behavior: contain; }
.src-fence { margin: 16px 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); }
.src-fence-bar { display: flex; user-select: none; -webkit-user-select: none; align-items: center; justify-content: space-between; padding: 4px 8px 4px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink-3); font-family: var(--font-mono); font-size: var(--text-xs); }
.src-fence-bar button { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--ink-2); font: inherit; }
.src-fence-bar button:hover { background: var(--surface-hover); color: var(--ink); }
.src-fence .src-view { max-height: 520px; padding: 12px 16px; }
.md { color: var(--ink); font-size: var(--text-reading); line-height: 1.8; overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { margin: 1.7em 0 .6em; font-weight: 600; line-height: 1.3; }
.md h1 { padding-bottom: .3em; border-bottom: 1px solid var(--line); font-size: 1.85em; }
.md h2 { padding-bottom: .3em; border-bottom: 1px solid var(--line-soft); font-size: 1.45em; }
.md h3 { font-size: 1.2em; }
.md h4 { font-size: 1.05em; }
.md h5, .md h6 { color: var(--ink-2); font-size: .95em; }
.md p { margin: 0 0 1em; }
.md a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.md ul, .md ol { margin: 0 0 1em; padding-left: 1.7em; }
.md li > ul, .md li > ol { margin: .25em 0 0; }
.md li + li { margin-top: .25em; }
.md li > p { margin-bottom: .5em; }
.md li.md-task { margin-left: -1.4em; list-style: none; }
.md li.md-task input { margin: 0 .5em 0 0; vertical-align: -1px; accent-color: var(--accent); }
.md blockquote { margin: 0 0 1em; padding: 2px 16px; border-left: 3px solid var(--accent-soft); color: var(--ink-2); }
.md hr { margin: 1.8em 0; border: 0; border-top: 1px solid var(--line); }
.md :not(pre) > code { padding: .15em .4em; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--ink) 8%, transparent); font-size: .88em; }
.md pre { margin: 0 0 1em; padding: 16px; overflow-x: auto; background: var(--surface-sunken); font-size: var(--text-sm); line-height: 1.7; }
.md .src-fence pre { margin: 0; }
.md img { max-width: 100%; height: auto; border-radius: var(--radius-sm); vertical-align: middle; }
/* README 常见的 HTML：align 属性按原意对齐；details 可展开；kbd 键帽。 */
.md [align="center"] { text-align: center; }
.md [align="right"] { text-align: right; }
.md details { margin: 0 0 1em; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.md summary { cursor: pointer; font-weight: 600; }
.md kbd { padding: 1px 8px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--radius-xs); background: var(--surface-sunken); font-family: var(--font-mono); font-size: .85em; }
/* 外部图片占位：点击后加载本文档的全部外部图片。 */
.md .md-remote-image { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 2px 0; padding: 4px 8px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink-2); font: inherit; font-size: var(--text-xs); vertical-align: middle; cursor: pointer; }
.md .md-remote-image span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md .md-remote-image small { color: var(--accent-ink); }
.md .md-remote-image:hover { border-color: var(--accent); }
.md .md-missing-image { color: var(--ink-3); font-size: var(--text-xs); }
.md-table-wrap { margin: 0 0 1em; overflow-x: auto; }
.md table { border-collapse: collapse; font-size: .95em; }
.md th, .md td { padding: 8px 12px; border: 1px solid var(--line); text-align: left; }
.md th { background: var(--surface-sunken); font-weight: 600; }
.md tbody tr:nth-child(even) { background: var(--surface-sunken); }
@media (max-width: 860px) {
  .preview-text { --preview-content-height: calc(100dvh - 320px); }
  .preview-text.is-markdown-source { --preview-content-height: calc(100dvh - 380px); }
  .preview-text.is-truncated { --preview-notice-height: 70px; }
  .preview-doc { padding: 20px 16px 28px; }
  .preview-toolbar { padding: 8px 8px; gap: 8px; }
  .preview-toolbar .switch-row { min-height: 34px; }
  .preview-readonly { font-size: var(--text-micro); gap: 4px; }
  .preview-modal .modal-header { padding: 8px 8px 8px 16px; }
  .preview-meta .preview-meta-date { display: none; }
  .preview-modal .file-tile svg { width: 28px; height: 28px; }
  .preview-modal .modal-header { gap: 8px; }
  .preview-modal .modal-window-actions { gap: 0; }
  .preview-modal .modal-window-actions .icon-btn { width: 34px; min-width: 34px; min-height: 36px; }
  .preview-modal .modal-actions-divider { display: none; }
}

/* 扩展预览占满可用画布，尺寸变化只影响布局，不重建阅读器或播放器。 */
.preview-modal.is-expanded .modal-header, .preview-modal.is-expanded .modal-footer { flex: none; }
.preview-modal.is-expanded .modal-body { display: flex; overflow: hidden; }
.preview-modal.is-expanded .preview-stage { flex: 1; min-height: 0; width: 100%; }
.preview-modal.is-expanded .preview-player { align-self: stretch; min-height: 0; height: 100%; }
.preview-modal.is-expanded .preview-player-surface { flex: none; }
.preview-modal.is-expanded .preview-player-video .preview-player-surface { flex: 1; min-height: 0; }
.preview-modal.is-expanded .preview-video-host { width: 100%; height: 100%; min-height: 0; max-height: none; aspect-ratio: auto; }
.preview-modal.is-expanded .preview-text { min-height: 0; height: 100%; }
.preview-modal.is-expanded .preview-toolbar, .preview-modal.is-expanded .preview-notice, .preview-modal.is-expanded .preview-text-status { flex: none; }
.preview-modal.is-expanded .preview-code-editor { flex: 1; min-height: 0; }
.preview-modal.is-expanded .cm-editor { height: 100%; min-height: 0; max-height: none; }
.preview-modal.is-expanded .preview-doc { flex: 1; min-height: 0; max-height: none; }
/* 扩展后舞台高度固定：网格行必须是 minmax(0, 1fr)，图片的百分比最大高度才有确定的参照，否则按原图高度撑开被裁切。 */
.preview-modal.is-expanded .preview-stage { grid-template-rows: minmax(0, 1fr); }
.preview-modal.is-expanded .preview-stage.has-playlist { grid-template-rows: minmax(0, 1fr); }
.preview-modal.is-expanded .preview-stage.has-playlist > .preview-player { height: 100%; }
.preview-modal.is-expanded .preview-resource { min-height: 0; height: 100%; }
.preview-modal.is-expanded .preview-media { height: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr); padding: 16px; }
.preview-modal.is-expanded .preview-media img { max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; }
.preview-modal.is-expanded .preview-frame { height: 100%; min-height: 0; }
@media (max-width: 860px) {
  .modal-backdrop.is-expanded:not(.is-fullscreen):not(:fullscreen) { padding: var(--floating-top) var(--floating-right) var(--floating-bottom) var(--floating-left); }
  .modal.is-expanded { border-radius: var(--radius-xl); }
  .preview-modal.is-expanded .modal-body { padding: 0; }
}

/* 手机预览使用完整可见视口；横屏触屏设备即使宽于 860px，也不能回到桌面浮窗尺寸。 */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  .modal-backdrop:has(> .preview-modal.is-immersive):not(.is-minimized) {
    place-items: stretch; grid-template-rows: minmax(0, 1fr);
    padding: var(--floating-top) var(--floating-right) var(--floating-bottom) var(--floating-left);
  }
  .modal.preview-modal.is-immersive:not(.is-minimized) { width: 100%; height: 100%; max-width: none; max-height: 100%; min-height: 0; border-radius: var(--radius-xl); }
  .preview-modal.is-immersive:not(.is-minimized) > .modal-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
  .preview-modal.is-immersive:not(.is-minimized) .preview-stage { flex: 1; min-height: 0; height: 100%; }
  .preview-modal-audio:not(.is-minimized) .preview-player-audio { height: 100%; }
  .preview-modal-image:not(.is-minimized) .image-viewer { height: 100%; max-height: none; }
  .preview-modal.is-immersive:not(.is-minimized) .modal-window-actions { flex: none; width: auto; }
  .preview-modal.is-immersive:not(.is-minimized) .modal-window-actions .icon-btn { width: 40px; min-width: 40px; min-height: 40px; }
  .preview-modal-video.is-immersive:not(.is-minimized) .modal-header { position: relative; inset: auto; flex: none; flex-wrap: nowrap; min-height: 64px; padding: 8px 12px; background: var(--media-canvas); opacity: 1; transform: none; }
  .preview-modal-video.is-immersive:not(.is-minimized) .modal-header > * { pointer-events: auto; }
  .preview-modal-video .preview-video-host .art-video-player { --art-control-icon-size: 36px; }
  .preview-video-host :is(.art-control-pip, .art-control-fullscreenWeb) { display: none !important; }
  .preview-stage.is-media .preview-playlist-panel > header { min-height: 56px; padding: 8px 12px 8px 16px; }
  .preview-stage.is-media .preview-playlist-panel > header .icon-btn { width: 40px; height: 40px; }
  .preview-playlist-search { height: 40px; }
  .preview-playlist-search input { font-size: var(--text-lg); }
  .preview-playlist-items { touch-action: pan-y pinch-zoom; }
  .preview-track { min-height: 68px; grid-template-columns: 20px 40px minmax(0, 1fr); gap: 8px; padding: 8px 8px; }
  .preview-track-description strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow-wrap: anywhere; }
  .preview-track-play { display: none; }
  .preview-modal-video:not(.is-minimized) .preview-stage.is-playlist-open { grid-template-rows: minmax(0, min(44%, calc(100cqw / var(--preview-video-ratio, 1.777778)))) minmax(0, 1fr); }
  .preview-modal-video .preview-stage.is-playlist-open > .preview-player { grid-row: 1; max-height: none; }
  .preview-modal-video .preview-stage.is-playlist-open > .preview-playlist-panel {
    position: relative; inset: auto; grid-column: 1; grid-row: 2; width: 100%; height: 100%; border: 0; border-top: 1px solid color-mix(in srgb, var(--media-ink) 12%, transparent);
    border-radius: 0; background: color-mix(in srgb, var(--media-canvas) 94%, var(--media-ink)); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    animation: preview-list-in var(--duration-base) var(--ease-out);
  }
  .modal-backdrop.is-fullscreen:has(> .preview-modal.is-immersive) { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .modal-backdrop.is-fullscreen .modal.preview-modal.is-immersive { border-radius: 0; }
}
@media (max-width: 860px) and (orientation: portrait), (hover: none) and (pointer: coarse) and (orientation: portrait) {
  /* 竖屏未展开列表时贴合视频，避免横向视频上下出现大块空白；展开后把空间留给完整列表。 */
  .modal.preview-modal-video.is-immersive:not(.is-minimized):not(.has-playlist-open):not(.is-expanded) {
    align-self: center; height: min(100%, calc((100vw - var(--floating-left) - var(--floating-right)) / var(--preview-video-ratio, 1.777778) + 64px));
  }
}
@media (max-width: 860px) and (orientation: landscape), (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .modal-backdrop:has(> .preview-modal.is-immersive):not(.is-minimized):not(.is-fullscreen) { padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .modal.preview-modal.is-immersive:not(.is-minimized) { border-radius: var(--radius-lg); }
  .preview-modal-video.is-immersive:not(.is-minimized) .modal-header { position: absolute; inset: 0 0 auto; min-height: 0; padding: 8px 8px 24px 16px; background: linear-gradient(to bottom, var(--media-overlay), transparent); }
  .preview-modal-video.is-chrome-idle:not(.has-playlist-open):not(.is-minimized) .modal-header { opacity: 0; transform: translateY(-8px); }
  .preview-modal-video.is-chrome-idle:not(.has-playlist-open):not(.is-minimized) .modal-header > * { pointer-events: none; }
  .preview-modal-video { --preview-mobile-list-width: clamp(240px, 34%, 360px); }
  .preview-modal-video.has-playlist-open:not(.is-minimized) .modal-header { right: var(--preview-mobile-list-width); }
  .preview-modal-video:not(.is-minimized) .preview-stage.is-playlist-open { grid-template-columns: minmax(0, 1fr) var(--preview-mobile-list-width); grid-template-rows: minmax(0, 1fr); }
  .preview-modal-video .preview-stage.is-playlist-open > .preview-playlist-panel { grid-column: 2; grid-row: 1; border-top: 0; border-left: 1px solid color-mix(in srgb, var(--media-ink) 12%, transparent); animation-name: drawer-in; }
}
@keyframes preview-list-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .preview-stage.is-media .preview-playlist-panel { animation: none; } }

/* ---------- 分享的文件夹（访客只读浏览） ---------- */

.share-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 8px 16px; border-top: 1px solid var(--line); background: var(--surface); color: var(--ink-3); font-size: var(--text-sm); }
.share-crumbs > span { display: inline-flex; align-items: center; gap: 2px; }
.share-crumbs button { height: 26px; padding: 0 8px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--ink-2); }
.share-crumbs button:hover { background: var(--surface-hover); color: var(--ink); }
.share-crumbs strong { padding: 0 8px; color: var(--ink); font-weight: 500; }
.share-folder-loading { padding: 12px 24px; }
.share-folder-filters { display: grid; gap: 12px; padding: 0 20px 12px; }
.share-folder-filters .filter-chips, .share-folder-filters .file-filters { margin: 0; }
.share-folder-search { display: flex; align-items: center; gap: 12px; min-width: 0; }
.share-folder-search .search-input { flex: 1; width: auto; min-width: 0; }
.share-folder-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line); font-size: var(--text-xs); }
.share-selection { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.share-select-all { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); cursor: pointer; }
.share-grid .grid-check { opacity: 1; }
.share-folder .share-grid { border-top: 1px solid var(--line); }
.public-folder-table { --cols: 20px minmax(0, 1fr) 88px 96px 132px 52px; }
.public-file-details { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.public-file-details .name-button { width: 100%; text-align: left; }
.public-file-meta { display: none; }
.share-folder .public-folder-table .data-row { padding-inline: 20px; }
.share-folder .public-folder-table .data-head { border-top: 1px solid var(--line); border-radius: 0; }
.share-folder .public-folder-table .data-row:last-child { border-radius: 0; }
.share-folder .empty-state { padding-block: 48px; }
.share-folder .public-folder-table .data-row > .cell-actions:last-child { position: static; padding-left: 0; background: transparent; box-shadow: none; }
@media (max-width: 860px) {
  .public-folder-table { --cols: 20px minmax(0, 1fr) 76px 80px 44px; }
  .public-folder-table .data-row > .cell-date { display: none; }
  .share-crumbs, .share-folder-toolbar, .share-folder-filters, .share-folder .public-folder-table .data-row { padding-inline: 16px; }
  .share-folder .share-grid { padding: 16px; }
}
@media (max-width: 600px) {
  .folder-strip { grid-template-columns: minmax(0, 1fr); }
  .public-folder-table { --cols: 20px minmax(0, 1fr) 44px; }
  .public-folder-table .data-row > .cell-type, .public-folder-table .data-row > .cell-size { display: none; }
  .public-folder-table .data-row:not(.data-head) { min-height: 64px; }
  .public-file-meta { display: block; margin-top: 4px; color: var(--ink-3); font-size: var(--text-micro); }
}

/* ---------- 登录页：保持登录、显示密码 ---------- */

.link-button { padding: 0; border: 0; background: transparent; color: var(--accent-ink); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.link-button:hover { color: var(--accent); }
.check-row { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.check-row .checkbox { margin-top: 4px; }
.check-row strong { display: block; font-size: var(--text-md); font-weight: 500; }
.check-row small { display: block; margin-top: 1px; color: var(--ink-3); font-size: var(--text-sm); }
.input-affix-lg .input-lg { flex: 1; min-width: 0; }
.affix-toggle { align-self: stretch; padding: 0 16px; border: 0; border-left: 1px solid var(--line-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: transparent; color: var(--ink-2); font-size: var(--text-sm); }
.affix-toggle:hover { background: var(--surface-hover); color: var(--ink); }

/* 手机文件条目保留名称、容量和操作，不需要横向滑动。管理表格仍在各自容器中滚动。 */
@media (max-width: 860px) {
  .btn-md, .icon-btn-md, .icon-btn-sm { min-height: 40px; }
  .icon-btn-md, .icon-btn-sm { min-width: 40px; }
  .btn-sm, .segmented button { min-height: 36px; }
  .menu-item { min-height: 40px; }
  .mobile-bar > .icon-btn { width: 44px; height: 44px; }
  .mobile-bar > .mobile-account { border-radius: 50%; }
  .search-input { height: 40px; }
  .breadcrumbs button { min-height: 36px; }
  .file-surface > .file-table { min-width: 0; --cols: 24px minmax(0, 1fr) 44px; }
  .file-table .data-row { gap: 8px; min-height: 76px; padding: 8px 12px; contain-intrinsic-size: 76px; }
  .file-table .data-head { min-height: 44px; padding-block: 0; }
  .file-table .cell-name { gap: 8px; }
  .file-table .name-stack { gap: 4px; }
  .file-table .cell-type, .file-table .cell-size, .file-table .cell-date, .file-table .cell-name > .badge, .file-table .cell-name > .cell-cache { display: none; }
  .file-table .cell-actions:last-child { position: static; padding-left: 0; box-shadow: none; background: transparent; }
  .file-mobile-meta { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink-3); font-size: var(--text-xs); }
  .file-mobile-meta > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .file-mobile-meta .badge { flex: none; font-size: var(--text-micro); padding: 1px 4px; }
  .mobile-file-sort { display: flex; }
  .mobile-file-sort select { height: 40px; }
  /* 文件页顶部分两行：面包屑与目录名占满整行（长目录名不再挤在窄栏里折成多行），按钮在下一行靠右并保留文字；
     工具栏第二行不换行，排序框占满剩余宽度，目录统计改用列表底部的链接。 */
  .files-view .page-header { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; }
  .files-view .page-header-main { flex: initial; }
  .files-view .page-header-main > .breadcrumbs { margin-bottom: 8px; }
  .files-view .page-header-actions { justify-content: stretch; flex-wrap: nowrap; }
  .files-view .page-header-actions > .btn { flex: 1 1 0; }
  /* 窄屏面包屑：每一项都限宽，当前位置也不会比屏幕宽，滚到末尾时能完整看到它的省略号。 */
  .file-breadcrumbs .crumb-label { max-width: 8em; }
  .file-breadcrumbs button[aria-current="page"] .crumb-label { max-width: min(16em, 52vw); }
  /* 根目录只留图标（名称仍在按钮的 title 与读屏文本中），常见的两三级路径不必横向滚动。 */
  .file-breadcrumbs li:first-child button:not([aria-current="page"]) .crumb-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .files-view .toolbar { gap: 8px; }
  .files-view .toolbar > .toolbar-actions { flex-wrap: nowrap; gap: 8px; }
  .files-view .toolbar .mobile-file-sort { flex: 1 1 auto; }
  .files-view .toolbar .mobile-file-sort select { width: 100%; max-width: none; }
  .files-view .toolbar .toolbar-stats { display: none; }
  .list-footer .shortcut-hint { display: none; }
  .selection-bar { align-items: flex-start; }
  .selection-bar .toolbar-actions { width: 100%; justify-content: flex-start; }
  .modal { max-height: calc(100dvh - var(--floating-top) - var(--floating-bottom)); }
  .modal-body { padding: 16px 20px; }
  .modal-footer { flex-wrap: wrap; padding: 16px 20px; }
  .modal-footer .btn { min-width: 76px; }
  .destination-summary { flex-wrap: wrap; gap: 8px; padding: 12px; }
  .destination-summary > div { min-width: 100px; }
  .move-head { flex-wrap: wrap; }
  .move-list { max-height: min(280px, 40dvh); }
  .move-new-actions .btn { min-height: 44px; }
  .copy-field { flex-wrap: wrap; }
  .copy-field input { flex-basis: 100px; min-height: 36px; }
  .disclosure-meta { font-size: var(--text-micro); }
  .toaster { bottom: 12px; }
  .toast button { min-width: 32px; min-height: 32px; }
}

@media (max-width: 600px) {
  .file-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.workspace-switch { padding: 0 12px 16px; }
.workspace-switch .segmented { display: flex; width: 100%; }
.workspace-switch .segmented button { flex: 1; justify-content: center; height: 30px; gap: 8px; }
.workspace-switch .segmented button svg { color: var(--ink-3); }
.workspace-switch .segmented button.is-active svg { color: var(--accent); }

.maintenance-section[hidden] { display: none; }

.traffic-readout { min-height: 20px; color: var(--ink-2); font-size: var(--text-xs); }
/* 用量与流量共用曲线：SVG 按容器拉伸（线宽不缩放），数据点与刻度按同一坐标定位。 */
.usage-curve { display: grid; gap: 8px; }
.usage-curve-body { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 8px; }
.usage-curve-axis { display: flex; flex-direction: column; justify-content: space-between; margin: -8px 0; color: var(--ink-3); font-size: var(--text-micro); font-variant-numeric: tabular-nums; }
.usage-curve-plot { position: relative; height: 180px; border-radius: var(--radius-xs); cursor: crosshair; touch-action: pan-y; }
.usage-curve-plot:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.usage-curve-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.usage-curve-grid { stroke: var(--line-soft); stroke-width: 1; }
.usage-curve-area { fill: color-mix(in srgb, currentColor 14%, transparent); }
.usage-curve-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.usage-curve-guide { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }
.usage-curve-dot { position: absolute; width: 10px; height: 10px; border: 2px solid var(--surface); border-radius: 50%; background: currentColor; box-shadow: 0 0 0 1px currentColor; transform: translate(-50%, -50%); pointer-events: none; }
.usage-curve-ticks { position: relative; height: 16px; margin-left: 64px; color: var(--ink-3); font-size: var(--text-micro); font-variant-numeric: tabular-nums; }
.usage-curve-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.usage-curve-ticks span:first-child { transform: none; }
.usage-curve-ticks span:last-child { transform: translateX(-100%); }
.usage-curve-ticks span:only-child { transform: translateX(-50%); }

/* 离线任务复用文件列表的行、缩略图和表格滚动容器。 */
.task-controls { display: grid; align-items: center; min-height: 44px; margin-bottom: 16px; }
.task-controls > .task-toolbar, .task-controls > .task-selection { grid-area: 1 / 1; margin: 0; }
.task-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.task-toolbar.is-selecting { visibility: hidden; }
.task-toolbar .segmented { max-width: 100%; overflow-x: auto; }
.task-toolbar-meta { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.task-search .search-input { width: min(100%, 520px); }
.task-footer { margin-top: 16px; }
.download-glyph { display: grid; place-items: center; width: 38px; height: 42px; border-radius: var(--radius-sm); color: var(--ink-2); background: var(--surface-sunken); flex: none; }
.download-glyph-video { color: var(--tile-video); background: var(--tile-video-bg); }
.download-glyph-audio { color: var(--tile-audio); background: var(--tile-audio-bg); }
.download-glyph-image { color: var(--tile-image); background: var(--tile-image-bg); }
button.task-location { cursor: pointer; }
button.task-location:hover { color: var(--accent); }
button.task-location:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-xs); }
.task-surface { overflow-x: auto; }
.task-table .data-head > .cell-actions { background: var(--surface-sunken); box-shadow: none; }
/* 列：选择 | 文件（名称与来源） | 进度 | 保存到 | 状态 | 操作。数字用等宽数字，进度条与说明同宽，行高随说明变化但不超过两行。 */
.task-surface > .task-table { --cols: 20px minmax(220px, 1.4fr) minmax(170px, .85fr) minmax(180px, 1.25fr) 92px 64px; min-width: 880px; }
.task-table .data-row:not(.data-head) { min-height: 60px; padding-block: 8px; }
/* 诊断弹窗（本机缓存与离线下载共用，见 user/diagnosis.tsx） */
.diagnosis { display: grid; gap: 16px; }
.diagnosis-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.diagnosis-metric { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface-sunken); min-width: 0; }
.diagnosis-metric-label { color: var(--ink-3); font-size: var(--text-xs); }
.diagnosis-metric-value { font-size: var(--text-lg); font-variant-numeric: tabular-nums; line-height: 1.3; overflow-wrap: anywhere; }
.diagnosis-metric small { color: var(--ink-3); font-size: var(--text-xs); }
.diagnosis-metric.is-warning { border-color: var(--warning); background: var(--warning-soft); }
.diagnosis-metric.is-danger { border-color: var(--danger); background: var(--danger-soft); }
.diagnosis-metric.is-success .diagnosis-metric-value { color: var(--success); }
.diagnosis-verdict .notice-body { display: grid; gap: 2px; }
.diagnosis-section { display: grid; gap: 8px; }
.diagnosis-section > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.diagnosis-section h3 { margin: 0; font-size: var(--text-sm); font-weight: 600; }
.diagnosis-section > header span { color: var(--ink-3); font-size: var(--text-xs); }
.diagnosis-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; max-height: 360px; overflow-y: auto; }
.diagnosis-row { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface); }
.diagnosis-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.diagnosis-row-title { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.diagnosis-row-bytes { margin-left: auto; color: var(--ink-2); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.diagnosis-bar { position: relative; height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--line-soft); }
.diagnosis-bar > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; transition: width var(--duration-base) ease-out; }
.diagnosis-bar-received { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.diagnosis-bar-stored { background: var(--accent); }
.diagnosis-bar.is-unknown .diagnosis-bar-received { opacity: .6; }
.diagnosis-row-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink-3); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.diagnosis-row-error { margin: 0; color: var(--danger); font-size: var(--text-xs); }
.diagnosis-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink-3); font-size: var(--text-xs); }
.diagnosis-legend i { display: inline-block; width: 12px; height: 6px; margin-right: 4px; border-radius: var(--radius-pill); vertical-align: middle; }
.diagnosis-legend .is-received { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.diagnosis-legend .is-stored { background: var(--accent); }
.task-table .cell-name { gap: 12px; }
.task-subline { overflow: hidden; color: var(--ink-3); text-overflow: ellipsis; white-space: nowrap; }
.task-progress { display: grid; gap: 4px; min-width: 0; font-variant-numeric: tabular-nums; }
.task-progress > small { overflow: hidden; color: var(--ink-3); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.task-progress.is-interrupted > small { color: var(--warning); }
.task-progress.is-done { gap: 1px; }
.task-figure { color: var(--ink-2); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.task-progress-bar { display: flex; align-items: center; gap: 8px; min-height: 16px; }
.task-progress-bar > .progress, .task-progress-bar > .task-unknown { flex: 1; min-width: 40px; }
.task-percent { flex: none; min-width: 32px; color: var(--ink-2); font-size: var(--text-xs); text-align: right; }
.task-unknown { position: relative; height: 4px; overflow: hidden; border-radius: var(--radius-xs); background: var(--line); }
/* 总大小未知时不画虚构的百分比，下载中用一段往复移动的高光表示仍在进行。 */
.task-unknown.is-running::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 30%; border-radius: inherit; background: var(--accent); animation: task-sweep 1.4s ease-in-out infinite alternate; }
@keyframes task-sweep { from { transform: translateX(0); } to { transform: translateX(233%); } }
@media (prefers-reduced-motion: reduce) { .task-unknown.is-running::after { animation: none; width: 100%; opacity: .35; } }
.task-failure { display: flex; align-items: flex-start; gap: 8px; max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--danger); font: inherit; font-size: var(--text-xs); line-height: 1.5; text-align: left; cursor: pointer; }
.task-failure > svg { flex: none; margin-top: 2px; }
.task-failure > span { display: -webkit-box; min-width: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.task-failure.is-expanded > span { display: block; }
.task-failure:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-xs); }
.task-state { display: flex; min-width: 0; }
.task-table .name-stack { flex: 1; gap: 2px; }
.task-name { font-weight: 500; }
/* 保留筛选工具栏的响应式占位，勾选后表头复选框不移动。 */
.task-selection { min-height: 44px; flex-wrap: nowrap; align-items: center; }
.task-selection .toolbar-actions { width: auto; flex-wrap: nowrap; }
.task-location { display: inline-flex; min-width: 0; max-width: 100%; align-items: flex-start; gap: 4px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; line-height: 1.5; text-align: left; }
.task-location > svg { flex: none; margin-top: 4px; }
/* 保存位置：目录名最多两行，上级路径一行省略；按任意字符折行，完整路径在悬停提示里。 */
.task-location-text { display: grid; min-width: 0; gap: 1px; }
.task-location-text > span { display: -webkit-box; overflow: hidden; color: var(--ink-2); overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.task-location-text > small { overflow: hidden; color: var(--ink-3); font-size: var(--text-micro); text-overflow: ellipsis; white-space: nowrap; }
button.task-location:hover .task-location-text > span { color: var(--accent); }
.task-pill { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.task-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.task-pill.is-active { color: var(--accent-ink); }
.task-pill.is-failed { color: var(--danger); }
.task-help { margin-top: 16px; color: var(--ink-3); font-size: var(--text-xs); line-height: 1.7; }
.task-help summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.task-help summary::-webkit-details-marker { display: none; }
.task-help summary:hover { color: var(--ink-2); }
.task-help[open] summary > svg:last-child { transform: rotate(180deg); }
.task-help p { max-width: 80ch; margin: 8px 0 0; }
.download-input { height: auto; min-height: 180px; padding: 12px; resize: vertical; line-height: 1.7; }
.download-cookie-options > .form { margin-top: 12px; }
.download-cookie-input { height: auto; min-height: 104px; padding: 8px 8px; resize: vertical; line-height: 1.6; }
.download-cookie-file { height: 40px; padding: 8px 8px; line-height: 26px; }
.download-cookie-file::file-selector-button { height: 26px; margin: 0 8px 0 0; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface-sunken); font: inherit; line-height: 24px; color: inherit; vertical-align: middle; cursor: pointer; }
.download-candidates { display: flex; flex-direction: column; gap: 8px; }
.download-candidate { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.download-candidate.is-selected { border-color: var(--accent); }
.download-candidate > .checkbox { margin-top: 28px; flex: none; }
.download-candidate-copy { flex: 1; min-width: 0; }
.download-candidate-copy p { font-size: var(--text-xs); margin: 8px 0 0; overflow-wrap: anywhere; }
.download-cover { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 8px; border: 1px dashed var(--line); border-radius: var(--radius-md); }
.download-cover > img, .download-cover-empty { flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-2); }
.download-cover-empty { display: grid; place-items: center; color: var(--ink-3); }
.download-cover-copy { flex: 1; min-width: 0; color: var(--ink-3); font-size: var(--text-xs); }
.download-candidate-copy summary { margin-top: 8px; color: var(--ink-2); font-size: var(--text-xs); cursor: pointer; }
/* 窄屏保留各列并在容器内横向滚动，行尾操作沿用表格的固定列。 */
@media (max-width: 860px) {
  .task-controls { min-height: 48px; }
  .task-surface > .task-table { --cols: 20px minmax(200px, 1.4fr) minmax(150px, .85fr) minmax(160px, 1.25fr) 92px 96px; }
}
@media (max-width: 640px) {
  .task-selection { padding-left: 8px; }
  .task-selection .toolbar-actions { gap: 4px; }
  .task-selection .selection-count { white-space: nowrap; }
  /* 四个按钮同时出现时宽度不够，窄屏只写「N 项」。 */
  .task-selection-prefix { display: none; }
  /* 手机上不横向滚动：每个任务排成三行——名称与操作、进度、保存位置与状态。 */
  .task-surface > .task-table { min-width: 0; }
  .task-table .data-head { grid-template-columns: 20px minmax(0, 1fr); }
  .task-table .data-head > :nth-child(n + 3) { display: none; }
  .task-table .task-item { grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "check name actions" ". progress progress" ". place state"; gap: 8px 12px; padding: 12px 16px; }
  .task-item > :nth-child(1) { grid-area: check; }
  .task-item > :nth-child(2) { grid-area: name; }
  .task-item > :nth-child(3) { grid-area: progress; }
  .task-item > :nth-child(4) { grid-area: place; align-self: center; }
  .task-item > :nth-child(5) { grid-area: state; justify-content: flex-end; }
  .task-table .task-item > .cell-actions { grid-area: actions; position: static; box-shadow: none; background: transparent; }
}
@media (max-width: 860px) {
}

/* ---------- 文件助手（docs/assistant-design.md §12） ---------- */

.toggle { display: inline-flex; position: relative; cursor: pointer; }
.toggle.is-disabled { cursor: not-allowed; opacity: .55; }
.cell-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.input-sm { height: 32px; padding: 0 28px 0 8px; font-size: var(--text-sm); }
.toolbar-actions > .input-sm { width: auto; min-width: 120px; max-width: 220px; }

/* 管理端 */
.assistant-master { display: flex; align-items: center; gap: 12px; }
.assistant-master .switch-row { gap: 8px; padding: 0; }
.assistant-master .switch-copy { display: none; }
.assistant-steps { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.assistant-steps li { display: flex; align-items: center; gap: 12px; min-height: 40px; color: var(--ink); font-size: var(--text-md); }
.assistant-steps li.is-done { color: var(--ink-3); text-decoration: line-through; }
.assistant-steps li .btn { margin-left: auto; }
.assistant-step-mark { display: grid; width: 24px; height: 24px; flex: none; place-items: center; border-radius: 50%; background: var(--surface-sunken); color: var(--ink-2); font-size: var(--text-xs); font-weight: 600; }
.assistant-steps li.is-done .assistant-step-mark { background: var(--success-soft); color: var(--success); }
.assistant-stats .stat-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xl); }
.overview-columns + .panel, .panel + .stat-strip { margin-top: 16px; }
.assistant-health-table { --cols: minmax(110px, 1fr) 70px 70px minmax(0, 1.4fr); }
.assistant-danger-zone { display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.assistant-channels { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: start; gap: 20px; }
.assistant-channel-list { margin: 0; padding: 4px; list-style: none; }
.assistant-channel-list button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 8px 12px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.assistant-channel-list button:hover { background: var(--surface-hover); }
.assistant-channel-list button.is-active { background: var(--accent-soft); }
.assistant-channel-list .name-stack { flex: 1; }
.assistant-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--line-strong); }
.assistant-dot.is-success { background: var(--success); }
.assistant-dot.is-danger { background: var(--danger); }
.assistant-channel-title { display: flex; min-width: 0; align-items: center; gap: 12px; }
.assistant-channel-meta { padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.assistant-channel-meta .key-value code { word-break: break-all; }
.assistant-model-toolbar { margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--line-soft); }
.assistant-models-table { --cols: 52px minmax(240px, 1fr) 72px 112px 120px; min-width: 640px; }
.assistant-models-table .name-stack strong .badge { margin-left: 8px; }
.assistant-tool-group + .assistant-tool-group { margin-top: 16px; }
.assistant-tool-list { margin: 0; padding: 0; list-style: none; }
.assistant-tool-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.assistant-tool-list li:last-child { border-bottom: 0; }
.assistant-tool-list li.is-off .assistant-tool-copy { opacity: .6; }
.assistant-tool-copy { display: grid; min-width: 0; flex: 1 1 320px; gap: 4px; overflow-wrap: anywhere; }
.assistant-tool-copy small { color: var(--ink-3); font-size: var(--text-xs); line-height: 1.5; }
.assistant-tool-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.assistant-tool-head code { color: var(--ink-3); font-size: var(--text-xs); }
.assistant-tool-warning { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); }
.assistant-tool-actions { display: grid; grid-template-columns: 40px 56px 56px; flex: none; align-items: center; gap: 8px; margin-left: auto; }
.assistant-tool-params { display: flex; align-items: center; justify-content: center; min-height: 40px; }
.assistant-tool-enable { display: flex; align-items: center; justify-content: flex-end; white-space: nowrap; }
.assistant-sticky-actions { position: sticky; bottom: 12px; z-index: 5; box-shadow: var(--shadow-md); }
.assistant-limits { display: grid; gap: 16px; }
.assistant-conversations-table { --cols: 110px minmax(120px, 1fr) minmax(100px, .8fr) 52px 52px 52px 70px 130px 96px; min-width: 900px; }
.assistant-runs-table { --cols: 130px 70px minmax(80px, 1fr) 70px 70px 70px; }
.assistant-detail { display: grid; gap: 16px; }
.assistant-detail h3 { margin-top: 8px; font-size: var(--text-md); font-weight: 600; }
.assistant-tool-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.assistant-call-stats { margin-bottom: 16px; }
.assistant-calls-table { --cols: 130px 52px minmax(140px, 1fr) minmax(100px, .8fr) 76px 64px 64px 110px; min-width: 860px; }
.assistant-call-detail { padding: 8px 16px 16px; border-bottom: 1px solid var(--line-soft); background: var(--surface-sunken); }
.assistant-call-detail code { word-break: break-all; }

/* 侧栏入口 */

/* 抽屉 */
.assistant-backdrop { display: none; }
.assistant-drawer { position: fixed; top: 16px; right: 16px; bottom: 16px; z-index: 50; display: flex; width: var(--assistant-width, 480px); min-width: min(480px, calc(100vw - 32px)); max-width: min(720px, calc(100vw - 32px)); flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-lg); transform: translateX(calc(100% + 32px)); visibility: hidden; transition: transform var(--duration-base) var(--ease-out), visibility 0s var(--duration-base); }
.assistant-drawer.is-open { transform: none; visibility: visible; transition: transform var(--duration-base) var(--ease-out); }
.assistant-drawer.is-resizing { user-select: none; }
.assistant-resize { position: absolute; z-index: 2; top: 24px; bottom: 24px; left: -6px; width: 12px; border-radius: var(--radius-xs); cursor: col-resize; touch-action: none; }
.assistant-resize::after { position: absolute; top: 50%; left: 4px; width: 4px; height: 40px; border-radius: var(--radius-xs); background: var(--line-strong); transform: translateY(-50%); content: ""; }
.assistant-resize:hover { background: var(--accent-soft); }
.assistant-resize:is(:hover, :focus-visible)::after, .assistant-drawer.is-resizing .assistant-resize::after { background: var(--accent); }
.assistant-header { display: flex; flex: none; min-height: 72px; align-items: center; gap: 4px; padding: 12px; border-bottom: 1px solid var(--line-soft); border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: linear-gradient(120deg, var(--accent-soft), var(--surface) 60%); }
.assistant-title { display: grid; min-width: 0; flex: 1; gap: 4px; padding: 0 8px; }
.assistant-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-md); }
.assistant-title small { overflow: hidden; color: var(--ink-3); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.assistant-thread { display: flex; min-height: 0; flex: 1; flex-direction: column; padding: 24px 20px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.assistant-pulse { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--accent); animation: assistant-pulse 1.2s ease-in-out infinite; }
@keyframes assistant-pulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
.assistant-unseen { position: absolute; bottom: 12px; left: 50%; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-md); color: var(--ink-2); font-size: var(--text-xs); transform: translateX(-50%); cursor: pointer; }
.assistant-composer { flex: none; padding: 12px 16px 16px; border-radius: 0 0 var(--radius-xl) var(--radius-xl); background: var(--surface); }
.assistant-input { display: block; width: 100%; min-height: 72px; max-height: 176px; padding: 8px 16px 8px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--text-md); line-height: 22px; resize: none; }
.assistant-input:focus { border-color: transparent; outline: none; box-shadow: none; }
.assistant-input:disabled { background: transparent; cursor: not-allowed; }
.assistant-controls { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 0 8px 8px; }
.assistant-controls > * { flex-shrink: 0; }
.assistant-controls > .assistant-model { display: inline-flex; width: auto; max-width: 240px; height: 30px; justify-content: flex-start; gap: 8px; padding: 0 8px; color: var(--ink-2); font-family: var(--font); font-size: var(--text-xs); }
.assistant-controls-spacer { flex: 1; }
.assistant-chip, .assistant-scope { display: flex; min-width: 0; max-width: calc(100% - 66px); padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; }
.assistant-chip:hover { background: var(--surface-hover); }
.assistant-model { max-width: 160px; padding-right: 8px; text-overflow: ellipsis; }
.assistant-scope { gap: 2px; padding-right: 2px; cursor: default; }
.assistant-scope-text { min-width: 0; max-width: none; overflow: hidden; color: var(--ink); font-family: var(--font-mono); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.assistant-scope .icon-btn { display: inline-flex; width: 100%; height: 30px; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 8px; border-radius: var(--radius-sm); }
.assistant-scope.has-hint { background: var(--warning-soft); }
.assistant-send { display: grid; width: 34px; height: 34px; flex: none; place-items: center; border: 0; border-radius: var(--radius-md); background: var(--primary); color: var(--on-primary); cursor: pointer; transition: background-color var(--duration-fast), transform var(--duration-fast); }
.assistant-send:hover:not(:disabled) { background: var(--primary-hover); }
.assistant-send:disabled { background: var(--line); color: var(--ink-3); cursor: not-allowed; }
.assistant-send.is-stop { background: var(--ink); color: var(--ink-inverse); }
.assistant-footnote { display: flex; justify-content: space-between; gap: 8px; margin: 8px 2px 0; color: var(--ink-3); font-size: var(--text-micro); }
.assistant-notice, .assistant-welcome { display: grid; justify-items: center; gap: 12px; margin: auto 0; padding: 24px 0; text-align: center; }
.assistant-notice p, .assistant-welcome p { max-width: 340px; margin: 0; color: var(--ink-3); font-size: var(--text-sm); line-height: 1.8; }
.assistant-notice h3, .assistant-welcome h3 { margin: 0; font-size: var(--text-xl); font-weight: 600; letter-spacing: -.03em; }
.assistant-notice-icon, .assistant-welcome-icon { position: relative; display: grid; width: 64px; height: 64px; margin-bottom: 8px; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line)); border-radius: var(--radius-xl); background: linear-gradient(145deg, var(--surface) 10%, var(--accent-soft)); color: var(--accent); box-shadow: var(--shadow-sm); }
.assistant-examples { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.assistant-examples button { padding: 8px 8px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-2); font-size: var(--text-xs); cursor: pointer; }
.assistant-examples button:hover { border-color: var(--accent); color: var(--accent-ink); }
.assistant-history { min-height: 0; flex: 1; padding: 12px; overflow-y: auto; }
.assistant-history h4 { margin: 8px 8px 4px; color: var(--ink-3); font-size: var(--text-xs); font-weight: 500; }
.assistant-history ul { margin: 0; padding: 0; list-style: none; }
.assistant-history li { display: flex; align-items: center; gap: 2px; border-radius: var(--radius-md); }
.assistant-history li:hover { background: var(--surface-hover); }
.assistant-history li.is-active { background: var(--accent-soft); }
.assistant-history-item { display: flex; min-width: 0; flex: 1; align-items: center; gap: 8px; padding: 8px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.assistant-history-item .name-stack { flex: 1; }
.assistant-capabilities { display: grid; gap: 16px; }
.assistant-capabilities h3 { margin-bottom: 8px; color: var(--ink-2); font-size: var(--text-sm); font-weight: 600; }
.assistant-capabilities ul { margin: 0; padding: 0; list-style: none; }
.assistant-capabilities li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.assistant-capabilities li .name-stack { flex: 1; }
.assistant-capabilities li .name-stack small { white-space: normal; }
.assistant-capabilities li.is-off { opacity: .55; }
.assistant-capabilities .assistant-examples { justify-content: flex-start; }

@media (max-width: 1100px) {
  .assistant-channels { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .assistant-backdrop { position: fixed; inset: 0; z-index: 49; display: block; background: var(--scrim); backdrop-filter: blur(2px); touch-action: none; }
  .assistant-drawer { top: calc(var(--assistant-viewport-top, 0px) + var(--floating-top)); right: auto; bottom: auto; left: calc(var(--assistant-viewport-left, 0px) + var(--floating-left)); width: calc(var(--assistant-viewport-width, 100%) - var(--floating-left) - var(--floating-right)); min-width: 0; max-width: none; height: calc(var(--assistant-viewport, 100dvh) - var(--floating-top) - var(--floating-bottom)); overflow: hidden; }
  :root.assistant-open { overflow: hidden; }
  .assistant-resize { display: none; }
  .assistant-master .badge { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .assistant-drawer, .assistant-drawer.is-open, .assistant-send, .assistant-starters button { transition: none; animation: none; }
  .assistant-pulse { animation: none; }
}

/* 文件助手 P2–P4：消息流容器、待确认操作卡片、页面快照附件、全页模式 */
/* 消息按内容高度参与滚动，避免 flex 收缩后溢出的末条消息挤掉底部留白。 */
.assistant-thread-inner { display: flex; min-height: 100%; flex-shrink: 0; flex-direction: column; gap: 20px; }
.assistant-attachment { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 8px 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); font-size: var(--text-sm); }
.assistant-attachment > svg { flex: none; color: var(--accent); }
.assistant-attachment .name-stack { flex: 1; }
.assistant-attachment.is-error { border-color: var(--danger); background: var(--danger-soft); }
.assistant-attachment.is-error > svg { color: var(--danger); }

.assistant-page { display: grid; grid-template-columns: 248px minmax(0, 1fr); height: calc(100dvh - 100px); min-height: 480px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.assistant-page-side { display: flex; min-height: 0; flex-direction: column; border-right: 1px solid var(--line-soft); background: var(--surface-sunken); }
.assistant-page-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 4px 16px; }
.assistant-page-main { display: flex; min-width: 0; min-height: 0; flex-direction: column; }
.assistant-page .assistant-thread-inner, .assistant-page .assistant-composer > * { width: 100%; max-width: 760px; margin-right: auto; margin-left: auto; }
.assistant-drawer .assistant-thread-inner, .assistant-drawer .assistant-composer > * { width: 100%; max-width: 760px; margin-inline: auto; }
.assistant-page .assistant-composer > .assistant-attachment { margin-bottom: 8px; }
@media (max-width: 900px) {
  .assistant-page { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 110px); min-height: 400px; }
  .assistant-page-side { display: none; }
}
.assistant-admin-stack { display: grid; gap: 16px; }
.assistant-usage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.assistant-usage-table { --cols: minmax(120px, 1fr) 80px 120px 60px; }
.assistant-usage-grid .key-value + .key-value { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
@media (max-width: 1100px) { .assistant-usage-grid { grid-template-columns: minmax(0, 1fr); } }

/* 带说明的选择菜单：名称、路径、选中状态各占固定位置，长目录不挤压名称。 */
.menu.has-descriptions { width: 256px; max-width: calc(100vw - 16px); max-height: min(480px, calc(100dvh - 32px)); overflow-y: auto; }
.menu-item > svg { flex: none; }
.menu-item .menu-copy { display: grid; min-width: 0; gap: 1px; line-height: 1.35; }
.menu-item .menu-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-item .menu-copy small { overflow: hidden; color: var(--ink-3); font-size: var(--text-micro); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.menu-item .menu-check { width: 16px; flex: none; }
.menu-item.has-description { height: auto; min-height: 42px; padding: 4px 8px; }
.menu-item.has-description[aria-checked="true"] { background: var(--accent-soft); }
.menu-item.has-description[aria-checked="true"] .menu-copy > span { color: var(--accent-ink); font-weight: 500; }
.assistant-brand-mark { display: grid; width: 32px; height: 32px; flex: none; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); }
.assistant-mobile-history { display: none; }
.assistant-resize:focus-visible { background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: 2px; }
.assistant-compose-box { min-width: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.assistant-compose-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.assistant-context-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 0; }
.assistant-scope-trigger > svg { flex: none; color: var(--ink-3); }
.assistant-scope-label { flex: none; color: var(--ink-3); font-size: var(--text-xs); }
.assistant-capability-button { display: inline-flex; height: 30px; flex: none; align-items: center; gap: 4px; padding: 0 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-3); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.assistant-capability-button:hover { background: var(--surface-hover); color: var(--ink); }
.assistant-model > svg { flex: none; }
.assistant-model > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assistant-enter-hint { margin-left: auto; flex: none; color: var(--ink-3); font-size: var(--text-micro); }
.assistant-send:active:not(:disabled) { transform: translateY(1px); }
.assistant-footnote > span { display: inline-flex; align-items: center; gap: 4px; }
.assistant-footnote > .assistant-footnote-meters { gap: 8px; }
.assistant-eyebrow { color: var(--accent-ink); font-size: var(--text-xs); font-weight: 500; letter-spacing: .08em; }
.assistant-starters { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.assistant-starters button { position: relative; display: grid; min-width: 0; gap: 8px; padding: 16px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); font-family: var(--font); text-align: left; cursor: pointer; transition: border-color var(--duration-fast), background-color var(--duration-fast), transform var(--duration-fast); }
.assistant-starters button > svg:first-child { margin-bottom: 4px; color: var(--ink-3); }
.assistant-starters button > svg:last-child { position: absolute; top: 16px; right: 12px; color: var(--ink-3); opacity: 0; }
.assistant-starters strong { font-size: var(--text-sm); font-weight: 500; }
.assistant-starters small { color: var(--ink-3); font-size: var(--text-xs); }
.assistant-starters button:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.assistant-starters button:hover > svg { color: var(--accent); opacity: 1; }
.assistant-welcome-scope { display: flex; max-width: 100%; align-items: center; gap: 4px; margin-top: 4px; color: var(--ink-3); font-size: var(--text-xs); }
.assistant-welcome-scope span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assistant-welcome-scope code { color: var(--ink-2); font-family: var(--font-mono); font-size: var(--text-xs); }
.assistant-history-filter { position: sticky; top: -12px; z-index: 1; margin: -12px -4px 12px; padding: 12px 4px 8px; background: var(--surface); }
.assistant-history-more { width: 100%; margin-top: 12px; }
.assistant-page .assistant-welcome { width: 100%; max-width: 500px; margin-right: auto; margin-left: auto; }
.assistant-page .assistant-page-side .assistant-history-filter { background: var(--surface-sunken); }
.assistant-page .assistant-page-main { position: relative; }
.assistant-page .assistant-thread { padding: 28px; }
.assistant-page .assistant-header { border-radius: 0; background: var(--surface); }
.assistant-channel-nav .panel-header { flex-wrap: nowrap; padding: 16px; }
.assistant-channel-nav .panel-header-main { flex-basis: 0; }
.assistant-channel-nav .panel-header p { font-size: var(--text-xs); }
.assistant-channel-nav .panel-actions { align-self: flex-start; }
.assistant-channel-title > span:not(.badge) { min-width: 0; }
.assistant-channel-title small { display: block; margin-top: 4px; color: var(--ink-3); font-size: var(--text-xs); font-weight: 400; }
.assistant-channel-symbol { display: grid; width: 40px; height: 40px; flex: none; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink-2); }
.assistant-channel-detail > .panel-header { gap: 16px; padding: 20px; }
.assistant-channel-detail .panel-actions { flex-wrap: wrap; }
.assistant-model-heading { padding: 20px 20px 0; }
.assistant-model-heading h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: var(--text-md); font-weight: 600; }
.assistant-model-heading h3 span { display: inline-flex; min-width: 22px; justify-content: center; padding: 0 8px; border-radius: var(--radius-xs); background: var(--surface-sunken); color: var(--ink-3); font-size: var(--text-xs); }
.assistant-model-heading p { margin: 0; color: var(--ink-3); font-size: var(--text-xs); }
.assistant-model-toolbar .search-input { max-width: 240px; }
.assistant-config-form .form-row { align-items: start; }
.assistant-config-form textarea.input, .assistant-notice-setting textarea.input { height: auto; min-height: 96px; padding: 8px 12px; resize: vertical; line-height: 1.6; }
.assistant-form-section { display: grid; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.assistant-form-section:not(:first-child) { margin-top: 8px; }
.assistant-form-section h3 { margin: 0; font-size: var(--text-sm); font-weight: 600; }
.assistant-form-section p { margin: 0; color: var(--ink-3); font-size: var(--text-xs); }
.assistant-advanced { padding-top: 0; }
.assistant-notice-setting { margin-top: 20px; }
@keyframes assistant-appear { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (max-width: 1250px) {
  .assistant-model-toolbar { align-items: stretch; flex-direction: column; gap: 12px; }
  .assistant-model-toolbar .search-input { width: 100%; max-width: none; }
  .assistant-model-toolbar .toolbar-actions { justify-content: space-between; }
}
@media (max-width: 960px) {
  .assistant-channel-detail > .panel-header { align-items: flex-start; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .assistant-mobile-history { display: inline-flex; }
  .assistant-page .assistant-header .assistant-brand-mark { display: none; }
  .assistant-thread, .assistant-page .assistant-thread { padding: 20px 16px; }
  .assistant-drawer .assistant-composer { padding-bottom: 12px; }
  .assistant-starters button { padding: 16px 12px; }
  .assistant-starters { gap: 8px; }
  .assistant-enter-hint { display: none; }
  .assistant-model { margin-right: auto; }
  .assistant-page { min-height: 0; }
  .assistant-model-toolbar .toolbar-actions { flex-wrap: wrap; }
}
@media (max-height: 720px) {
  .assistant-welcome { gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .assistant-welcome-icon { width: 44px; height: 44px; margin-bottom: 4px; }
  .assistant-starters { margin-top: 8px; }
  .assistant-starters button { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .assistant-starters button { transition: none; }
}

.assistant-scroll-area { position: relative; display: flex; min-height: 0; flex: 1; flex-direction: column; }


/* ---------- 文件助手 P5：对话层次、思考、过程时间线与卡片（docs/assistant-design.md §19.3–19.4） ---------- */
.assistant-thread { overflow-x: hidden; }
.assistant-thread-inner { gap: 28px; min-width: 0; }
.menu-item:disabled { color: var(--ink-3); cursor: not-allowed; }
.menu-item:disabled > svg { opacity: .5; }

/* 文件助手头像「瓦片智核」：静止时安静；思考时瓦片环绕，调用工具时瓦片依次咬合并扫描，回复时内核呼吸。 */
.assistant-mark { display: block; flex: none; overflow: visible; }
.assistant-mark-tile { fill: currentColor; transform-box: fill-box; transform-origin: center; }
.assistant-mark-tile.is-b { fill: var(--logo-plane); }
.assistant-mark-tile.is-c { fill-opacity: .32; }
.assistant-mark-tile.is-d { fill-opacity: .58; }
.assistant-mark-tiles { transform-box: view-box; transform-origin: 12px 12px; }
.assistant-mark-halo, .assistant-mark-core { transform-box: fill-box; transform-origin: center; }
.assistant-mark-halo { opacity: .7; }
.assistant-mark-core { fill: currentColor; }
.assistant-mark-spark { fill: var(--surface); opacity: .9; }
.assistant-mark-scan { fill: var(--logo-plane); opacity: 0; }
.assistant-mark.is-monochrome :is(.assistant-mark-tile.is-b, .assistant-mark-scan) { fill: currentColor; }
.assistant-mark.is-thinking .assistant-mark-tiles { animation: mark-orbit 3.2s cubic-bezier(.45, 0, .55, 1) infinite; }
.assistant-mark.is-thinking .assistant-mark-tile { animation: mark-tile-breathe 1.6s ease-in-out infinite; }
.assistant-mark.is-thinking .assistant-mark-halo, .assistant-mark.is-writing .assistant-mark-halo { animation: mark-halo 1.6s ease-in-out infinite; }
.assistant-mark.is-thinking .assistant-mark-core { animation: mark-core 1.6s ease-in-out infinite; }
.assistant-mark.is-writing .assistant-mark-halo { animation-duration: 2.4s; }
.assistant-mark.is-tool .assistant-mark-tile { animation: mark-snap 1.4s cubic-bezier(.3, 0, .2, 1) infinite; }
.assistant-mark.is-tool .assistant-mark-tile.is-a { --snap: translate(1.3px, 1.3px); }
.assistant-mark.is-tool .assistant-mark-tile.is-b { --snap: translate(-1.3px, 1.3px); animation-delay: .12s; }
.assistant-mark.is-tool .assistant-mark-tile.is-c { --snap: translate(-1.3px, -1.3px); animation-delay: .24s; }
.assistant-mark.is-tool .assistant-mark-tile.is-d { --snap: translate(1.3px, -1.3px); animation-delay: .36s; }
.assistant-mark.is-tool .assistant-mark-scan { animation: mark-scan 1.4s linear infinite; }
.assistant-mark.is-tool .assistant-mark-halo { animation: mark-halo .7s ease-in-out infinite; }
@keyframes mark-orbit { to { transform: rotate(360deg); } }
@keyframes mark-tile-breathe { 50% { transform: scale(.82); } }
@keyframes mark-halo { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes mark-core { 50% { transform: scale(1.18); } }
@keyframes mark-snap { 0%, 15%, 75%, 100% { transform: none; } 35%, 55% { transform: var(--snap); } }
@keyframes mark-scan { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 85% { opacity: .9; } 100% { opacity: 0; transform: translateY(20px); } }
.assistant-title small { display: flex; align-items: center; gap: 8px; }
.assistant-full-tag { display: inline-flex; flex: none; align-items: center; gap: 4px; padding: 0 8px; border-radius: var(--radius-xs); background: var(--warning-soft); color: var(--warning); font-size: var(--text-micro); font-weight: 500; line-height: 18px; }

/* 私密对话（§24.8）：与私密空间的锁形标记同色，和普通对话区分 */
.assistant-private-tag { display: inline-flex; flex: none; align-items: center; gap: 4px; margin-right: 8px; padding: 0 8px; border-radius: var(--radius-xs); background: var(--warning-soft); color: var(--warning); font-size: var(--text-micro); font-weight: 500; line-height: 18px; vertical-align: 2px; }
.assistant-drawer.is-private .assistant-header { background: linear-gradient(120deg, var(--warning-soft), var(--surface) 60%); }
.assistant-drawer.is-private .assistant-compose-box { border-color: color-mix(in srgb, var(--warning) 35%, var(--line)); }
.assistant-scope.is-private .assistant-scope-trigger { display: inline-flex; height: 30px; align-items: center; gap: 8px; padding: 0 8px; color: var(--warning); }
.assistant-scope.is-private .assistant-scope-label { color: var(--warning); }
.assistant-welcome.is-private .assistant-eyebrow { display: inline-flex; align-items: center; gap: 4px; color: var(--warning); }
.assistant-unlock-notice p { margin: 0; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.7; white-space: pre-line; }
.md-link-blocked { color: var(--ink-2); text-decoration: underline dotted var(--line-strong); text-underline-offset: 3px; cursor: help; word-break: break-all; }
.ai-cross-form { display: grid; gap: 8px; padding: 8px; border-radius: var(--radius-md); background: var(--surface-sunken); }
.ai-cross-label { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: var(--text-xs); }
.ai-cross-label strong { color: var(--ink); font-family: var(--font-mono); font-weight: 500; word-break: break-all; }
.ai-cross-picker .move-list { min-height: 96px; max-height: 180px; background: var(--surface); }
.ai-cross-form > small { color: var(--ink-3); font-size: var(--text-micro); line-height: 1.6; }
.ai-verify { display: flex; align-items: flex-end; gap: 8px; }
.ai-verify label { display: grid; flex: 1; min-width: 0; gap: 4px; color: var(--ink-2); font-size: var(--text-xs); }
.ai-verify .input { width: 100%; }
.assistant-tool-private { display: inline-flex; align-items: center; gap: 4px; }
.assistant-tool-copy .assistant-tool-private.is-never, .assistant-tool-copy .assistant-tool-private.is-na { color: var(--ink-3); }
.assistant-tool-copy .assistant-tool-private.is-limited, .assistant-tool-copy .assistant-tool-private.is-only { color: var(--warning); }
.assistant-tool-private-toggle { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; color: var(--ink-3); }

/* 输入区：模式按钮 */
.assistant-mode { display: inline-flex; width: auto; height: 30px; flex: none; align-items: center; gap: 4px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-2); font-family: var(--font); font-size: var(--text-xs); }
.assistant-mode:hover { background: var(--surface-hover); color: var(--ink); }
.assistant-mode.is-full { border-color: color-mix(in srgb, var(--warning) 45%, var(--line)); background: var(--warning-soft); color: var(--warning); }
.assistant-context-row .assistant-scope { flex: 1; max-width: none; }
.assistant-mode-points { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.assistant-mode-points li { display: flex; gap: 12px; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.7; }
.assistant-mode-points li > svg { flex: none; margin-top: 4px; color: var(--accent); }
.assistant-mode-points strong { display: block; color: var(--ink); font-weight: 600; }

/* 系统事件分隔线 */
.ai-divider { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: var(--text-xs); }
.ai-divider::before, .ai-divider::after { height: 1px; flex: 1; background: var(--line-soft); content: ""; }
.ai-divider > span { display: inline-flex; max-width: 80%; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--line-soft); border-radius: var(--radius-pill); background: var(--surface); overflow-wrap: anywhere; }

/* 一轮对话 */
/* 单列网格要写明 minmax(0, 1fr)：默认的 auto 列会被长内容撑到最大内容宽度，气泡的 86% 上限随之失效。 */
.ai-turn { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; animation: assistant-appear var(--duration-base) ease-out; }
.ai-user { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: end; gap: 8px; min-width: 0; }
.ai-bubble { max-width: 86%; padding: 8px 16px; border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg); background: var(--primary); color: var(--on-primary); font-size: var(--text-md); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: var(--shadow-sm); }
.ai-attachment { display: inline-flex; max-width: 86%; align-items: center; gap: 8px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink-2); font-size: var(--text-xs); }
.ai-attachment > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-user-meta { display: flex; gap: 8px; color: var(--ink-3); font-size: var(--text-micro); opacity: 0; transition: opacity var(--duration-fast); }
.ai-user:hover .ai-user-meta, .ai-user:focus-within .ai-user-meta { opacity: 1; }
.ai-user-meta button, .ai-reply-foot button, .ai-notice button, .ai-link, .ai-tool-output-head button, .ai-links button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--accent-ink); font: inherit; cursor: pointer; }

.ai-reply { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; min-width: 0; }
.ai-avatar { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); }
.ai-reply-body { display: grid; min-width: 0; gap: 12px; align-content: start; }
.ai-reply-head { display: flex; min-width: 0; min-height: 28px; align-items: center; gap: 8px; font-size: var(--text-sm); }
.ai-reply-head strong { flex: none; font-weight: 600; }
.ai-model { min-width: 0; overflow: hidden; padding: 1px 8px; border-radius: var(--radius-xs); background: var(--surface-sunken); color: var(--ink-3); font-size: var(--text-micro); text-overflow: ellipsis; white-space: nowrap; }
.ai-live { display: inline-flex; flex: none; align-items: center; gap: 8px; margin-left: auto; font-size: var(--text-xs); }
.ai-live > i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: assistant-pulse 1.2s ease-in-out infinite; }
.ai-shimmer { background: linear-gradient(90deg, var(--ink-3) 0%, var(--ink-3) 35%, var(--accent) 50%, var(--ink-3) 65%, var(--ink-3) 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ai-shimmer 1.8s linear infinite; }
.ai-answer { min-width: 0; overflow-wrap: anywhere; }
.ai-answer .md { font-size: var(--text-md); line-height: 1.8; }
.ai-answer .md :is(h1, h2) { padding: 0; border: 0; font-size: var(--text-lg); line-height: 1.6; }
.ai-answer .md :is(h3, h4, h5, h6) { font-size: var(--text-md); }
.ai-answer .md :is(p, ul, ol, .md-table-wrap) { margin-bottom: 12px; }
.ai-answer .md > :last-child { margin-bottom: 0; }
.ai-answer .md .md-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.ai-answer .md table { width: 100%; font-size: var(--text-xs); }
.ai-answer .md :is(th, td) { padding: 8px 12px; border: 0; border-bottom: 1px solid var(--line-soft); }
.ai-answer .md tbody tr:last-child td { border-bottom: 0; }
.ai-answer .md blockquote { padding: 8px 16px; border-left-color: var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface-sunken); font-size: var(--text-sm); }
.ai-answer .md :is(pre, .src-fence) { max-width: 100%; font-size: var(--text-xs); }
.ai-caret { display: inline-block; width: 7px; height: 15px; margin-left: 2px; vertical-align: -2px; border-radius: var(--radius-2xs); background: var(--accent); animation: ai-blink 1s steps(2) infinite; }
.ai-reply-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--ink-3); font-size: var(--text-micro); opacity: .75; transition: opacity var(--duration-fast); }
.ai-reply:hover .ai-reply-foot { opacity: 1; }
.ai-notice { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink-2); font-size: var(--text-xs); }
.ai-notice > span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.ai-notice.is-error { background: var(--danger-soft); color: var(--danger); }
.ai-notice.is-warning { background: var(--warning-soft); color: var(--warning); }

/* 过程时间线 */
/* 消息流里的单列网格统一限定列宽，长路径、长文件名只能在列内折行或省略，不能把列撑宽。新增单列网格时加到这里。 */
.ai-reply-body, .ai-process, .ai-process-steps, .ai-thinking-body, .ai-tool-body, .ai-tool-detail, .ai-kv, .ai-tool-output,
.ai-card, .ai-card-title, .ai-diff, .ai-list, .ai-links, .ai-choices, .ai-plan ol, .assistant-title { grid-template-columns: minmax(0, 1fr); }
.ai-process { display: grid; min-width: 0; }
.ai-process.is-collapsible { border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface-sunken); }
.ai-process-toggle { display: flex; width: 100%; min-width: 0; align-items: center; gap: 8px; padding: 8px 12px; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: var(--text-xs); text-align: left; cursor: pointer; }
.ai-process-toggle:hover { color: var(--ink); }
.ai-process-toggle > svg:last-child { margin-left: auto; color: var(--ink-3); transition: transform var(--duration-fast); }
.ai-process.is-open .ai-process-toggle > svg:last-child { transform: rotate(180deg); }
.ai-process-icons { display: inline-flex; gap: 2px; color: var(--accent); }
.ai-process-error { color: var(--danger); }
.ai-process-steps { display: grid; padding: 4px 12px 8px; border-top: 1px solid var(--line-soft); }
.ai-step { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; min-width: 0; padding: 4px 0; }
.ai-step::before { position: absolute; top: 26px; bottom: -4px; left: 10.5px; width: 1px; background: var(--line); content: ""; }
.ai-step:last-child::before { display: none; }
.ai-step-dot { position: relative; z-index: 1; display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink-3); }
.ai-tool.is-ok .ai-step-dot { color: var(--accent); }
.ai-tool.is-error .ai-step-dot { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); background: var(--danger-soft); color: var(--danger); }
.ai-thinking .ai-step-dot { color: var(--accent); }
.ai-thinking-body, .ai-tool-body { display: grid; min-width: 0; gap: 8px; }
.ai-thinking-head > strong { margin-right: auto; }
.ai-thinking.is-open .ai-thinking-head > svg, .ai-note.is-open .ai-thinking-head > svg { transform: rotate(180deg); }
.ai-thinking-time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ai-thinking-text { max-height: 320px; overscroll-behavior: contain; overflow-y: auto; color: var(--ink-2); font-size: var(--text-xs); line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-thinking-text[hidden] { display: none; }
.ai-thinking-text .md { font-size: inherit; line-height: inherit; white-space: normal; }
.ai-thinking-text .md > :last-child { margin-bottom: 0; }

.ai-tool-head { display: flex; width: 100%; min-width: 0; min-height: 22px; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: var(--text-xs); text-align: left; cursor: pointer; }
.ai-tool-head:disabled { cursor: default; }
.ai-tool-head strong { flex: none; color: var(--ink); font-weight: 500; }
.ai-tool-head code { min-width: 0; max-width: 45%; flex: none; overflow: hidden; padding: 1px 8px; border-radius: var(--radius-xs); background: var(--surface-sunken); color: var(--ink-2); font-family: var(--font-mono); font-size: var(--text-micro); text-overflow: ellipsis; white-space: nowrap; }
.ai-tool-result { min-width: 0; flex: 1; overflow: hidden; color: var(--ink-3); text-overflow: ellipsis; white-space: nowrap; }
.ai-tool.is-error .ai-tool-result { color: var(--danger); }
.ai-tool-time { flex: none; color: var(--ink-3); font-size: var(--text-micro); font-variant-numeric: tabular-nums; }
.ai-tool-head > svg { flex: none; color: var(--ink-3); transition: transform var(--duration-fast); }
.ai-tool.is-open .ai-tool-head > svg { transform: rotate(180deg); }
.ai-tool-detail { display: grid; min-width: 0; gap: 8px; padding: 8px; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface); }
.ai-kv { display: grid; gap: 4px; margin: 0; font-size: var(--text-xs); }
.ai-kv > div { display: grid; grid-template-columns: minmax(64px, auto) minmax(0, 1fr); gap: 8px; }
.ai-kv dt { color: var(--ink-3); font-family: var(--font-mono); }
.ai-kv dd { min-width: 0; margin: 0; color: var(--ink); font-family: var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-tool-output { display: grid; min-width: 0; gap: 4px; }
.ai-tool-output-head { display: flex; justify-content: space-between; color: var(--ink-3); font-size: var(--text-micro); }
.ai-tool-output pre { max-height: 280px; margin: 0; padding: 8px 8px; overflow-x: hidden; overflow-y: auto; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink-2); font-family: var(--font-mono); font-size: var(--text-micro); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-activity { display: inline-flex; width: 12px; height: 12px; flex: none; align-items: center; justify-content: space-between; color: var(--accent); }
.ai-activity > i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; animation: assistant-breathe 1.8s ease-in-out infinite both; }
.ai-activity > i:nth-child(2) { animation-delay: .2s; }
.ai-activity > i:nth-child(3) { animation-delay: .4s; }

/* 卡片 */
.ai-card { display: grid; min-width: 0; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); font-size: var(--text-sm); animation: assistant-appear var(--duration-base) ease-out; }
.ai-card-head { display: flex; min-width: 0; align-items: flex-start; gap: 8px; }
.ai-card-head > .badge { flex: none; margin-left: auto; }
.ai-card-icon { display: grid; width: 32px; height: 32px; flex: none; place-items: center; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); }
.ai-card-icon.tone-success { background: var(--success-soft); color: var(--success); }
.ai-card-icon.tone-warning { background: var(--warning-soft); color: var(--warning); }
.ai-card-icon.tone-danger { background: var(--danger-soft); color: var(--danger); }
.ai-card-icon.tone-public { background: var(--public-soft); color: var(--public); }
.ai-card-title { display: grid; min-width: 0; flex: 1; gap: 2px; }
.ai-card-title strong { font-size: var(--text-sm); font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.ai-card-title small { color: var(--ink-2); font-size: var(--text-xs); line-height: 1.6; overflow-wrap: anywhere; }
.ai-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 2px -16px -16px; padding: 8px 16px; border-top: 1px solid var(--line-soft); border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--surface-sunken); }
.ai-card-foot > span { min-width: 0; margin-right: auto; color: var(--ink-3); font-size: var(--text-xs); }
.ai-card-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 8px; border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--warning); font-size: var(--text-xs); line-height: 1.6; }
.ai-card-note > svg { flex: none; margin-top: 2px; }
.ai-http.is-pending { border-color: color-mix(in srgb, var(--warning) 45%, var(--line)); }
.ai-http-target { display: block; min-width: 0; padding: 8px 8px; border-radius: var(--radius-sm); background: var(--surface-sunken); overflow-wrap: anywhere; font: var(--text-xs)/1.6 var(--font-mono); }
.ai-http-details { min-width: 0; border: 1px solid var(--line-soft); border-radius: var(--radius-md); }
.ai-http-details > summary { padding: 8px 8px; color: var(--ink-2); cursor: pointer; font-size: var(--text-xs); }
.ai-http-details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.ai-http-preview { display: grid; min-width: 0; gap: 8px; padding: 0 8px 8px; }
.ai-http-preview h4 { margin: 0; font-size: var(--text-xs); font-weight: 600; }
.ai-http-preview pre { max-height: 200px; margin: 0; padding: 8px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink); font: var(--text-xs)/1.6 var(--font-mono); }
.ai-http-preview p, .ai-http-summary { margin: 0; color: var(--ink-3); font-size: var(--text-xs); line-height: 1.6; overflow-wrap: anywhere; }
.ai-http-details > .ai-tool-detail { margin: 0; padding: 0 8px 8px; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-chips > span { display: inline-flex; min-width: 0; max-width: 100%; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink-2); font-size: var(--text-xs); overflow-wrap: anywhere; }
.ai-diff, .ai-list, .ai-links { display: grid; gap: 2px; margin: 0; padding: 8px; border: 1px solid var(--line-soft); border-radius: var(--radius-md); list-style: none; font-size: var(--text-xs); }
.ai-diff-row, .ai-list li, .ai-links li { display: flex; min-width: 0; min-height: 26px; align-items: center; gap: 8px; padding: 0 4px; border-radius: var(--radius-xs); }
.ai-diff-row > svg, .ai-list li > svg, .ai-links li > svg { flex: none; color: var(--ink-3); }
.ai-list li.ai-list-more { color: var(--ink-3); font-size: var(--text-xs); }
.ai-thumbnail-progress { display: grid; gap: 8px; min-width: 0; }
.ai-thumbnail-progress p { margin: 0; color: var(--ink-3); font-size: var(--text-xs); }
.ai-diff-row del { min-width: 0; color: var(--ink-3); text-decoration-color: color-mix(in srgb, var(--danger) 60%, transparent); overflow-wrap: anywhere; }
.ai-diff-row ins { min-width: 0; padding: 0 4px; border-radius: var(--radius-xs); background: var(--success-soft); color: var(--success); text-decoration: none; overflow-wrap: anywhere; }
.ai-diff-row small { margin-left: auto; flex: none; color: var(--ink-3); }
.ai-diff.is-plain { max-height: 320px; overflow-y: auto; }
/* 条目路径：文件名完整换行在前，所在目录另起一行；共同目录在列表头只显示一次。 */
.ai-diff-row:has(> .ai-path) { align-items: flex-start; padding-block: 4px; }
.ai-diff-row:has(> .ai-path) > svg { margin-top: 2px; }
.ai-diff-row:has(> .ai-path) small { margin-top: 1px; }
.ai-path { display: grid; min-width: 0; flex: 1; gap: 1px; }
.ai-path-name { min-width: 0; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }
.ai-path-name > svg { margin: 0 4px; vertical-align: -2px; color: var(--ink-3); }
.ai-path-dir { min-width: 0; color: var(--ink-3); font-size: var(--text-micro); line-height: 1.5; overflow-wrap: anywhere; }
.ai-path-to { display: flex; min-width: 0; align-items: flex-start; gap: 4px; line-height: 1.5; }
.ai-path-to > svg { flex: none; margin-top: 4px; color: var(--ink-3); }
.ai-diff.is-clamped .ai-path-name, .ai-diff.is-clamped .ai-path-dir { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ai-diff-dir { display: flex; min-width: 0; align-items: flex-start; gap: 8px; padding: 2px 4px 8px; border-bottom: 1px solid var(--line-soft); margin-bottom: 2px; color: var(--ink-2); line-height: 1.5; overflow-wrap: anywhere; }
.ai-diff-dir > svg { flex: none; margin-top: 2px; color: var(--ink-3); }
.ai-diff-dir > span { min-width: 0; }
.ai-links li button { margin-left: auto; flex: none; }
.ai-links li .badge { flex: none; }
.ai-link { width: fit-content; font-size: var(--text-xs); }
.ai-action.is-pending { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-sm); }
.ai-action.is-pending.is-danger { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft), var(--shadow-sm); }
.ai-action:is(.is-rejected, .is-expired, .is-undone) { background: var(--surface-sunken); box-shadow: none; }
.ai-action:is(.is-rejected, .is-expired, .is-undone) .ai-card-icon { background: var(--surface); color: var(--ink-3); }
.ai-action.is-loading { min-height: 80px; }
.ai-action-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; color: var(--ink-3); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.ai-result { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; font-size: var(--text-xs); }
.ai-result > span { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.ai-result small { color: var(--ink-3); overflow-wrap: anywhere; }
.ai-ack { display: flex; align-items: center; gap: 8px; color: var(--danger); font-size: var(--text-sm); cursor: pointer; }
.ai-share-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; padding: 8px; border-radius: var(--radius-md); background: var(--surface-sunken); }
.ai-share-form label { display: grid; gap: 4px; color: var(--ink-2); font-size: var(--text-xs); }
.ai-share-form .input { width: 100%; }
.ai-share-form small { grid-column: 1 / -1; color: var(--ink-3); font-size: var(--text-micro); }
.ai-scope-path { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 8px; }
.ai-scope-path code { padding: 2px 8px; border-radius: var(--radius-xs); background: var(--surface-sunken); font-size: var(--text-xs); overflow-wrap: anywhere; }
.ai-scope.is-pending { border-color: color-mix(in srgb, var(--warning) 45%, var(--line)); }
.ai-plan ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ai-plan li { display: flex; align-items: flex-start; gap: 8px; min-height: 28px; padding-block: 4px; color: var(--ink-2); }
.ai-plan-dot { display: grid; width: 20px; height: 20px; flex: none; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-3); font-size: var(--text-micro); }
.ai-plan li > div { flex: 1; min-width: 0; }
.ai-plan li.is-completed { color: var(--ink-3); }
.ai-plan li.is-completed .ai-plan-dot { border-color: var(--success-soft); background: var(--success-soft); color: var(--success); }
.ai-plan li.is-in_progress { color: var(--ink); font-weight: 500; }
.ai-plan li.is-in_progress .ai-plan-dot { border-color: var(--accent); }
.ai-plan li.is-failed .ai-plan-dot { border-color: var(--danger); color: var(--danger); }
.ai-plan li.is-waiting_user .ai-plan-dot { border-color: var(--warning); color: var(--warning); }
.ai-plan-step { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; overflow-wrap: anywhere; }
.ai-plan-step small { flex: none; color: var(--ink-3); font-size: var(--text-micro); font-weight: 400; }
.ai-plan-unverified { margin-left: 8px; padding: 0 4px; border-radius: var(--radius-xs); background: var(--warning-soft); color: var(--warning); }
.ai-plan-detail, .ai-plan-reason { margin: 4px 0 0; color: var(--ink-3); font-size: var(--text-xs); font-weight: 400; overflow-wrap: anywhere; }
.ai-plan-notes { margin-top: 8px; padding: 8px 8px; border-radius: var(--radius-sm); background: var(--surface-sunken); font-size: var(--text-xs); }
.ai-plan-notes strong { display: block; margin-bottom: 2px; color: var(--ink-2); font-weight: 500; }
.ai-plan-notes p { margin: 0; color: var(--ink-3); line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.assistant-plan-bar { flex: none; min-width: 0; padding: 0 20px; border-bottom: 1px solid var(--line-soft); background: var(--surface); }
.assistant-plan-inner { min-width: 0; width: 100%; max-width: 760px; margin-inline: auto; }
.assistant-plan-row { display: flex; min-width: 0; align-items: center; gap: 8px; }
.assistant-plan-trigger { display: flex; min-width: 0; flex: 1; min-height: 50px; align-items: center; gap: 8px; padding: 8px 0; border: 0; background: transparent; color: var(--ink-2); font: inherit; text-align: left; cursor: pointer; }
.assistant-plan-trigger > svg { flex: none; color: var(--ink-3); transition: transform var(--duration-fast); }
.assistant-plan-trigger[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
.assistant-plan-icon { display: grid; width: 26px; height: 26px; flex: none; place-items: center; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); }
.assistant-plan-bar.is-completed .assistant-plan-icon { background: var(--success-soft); color: var(--success); }
.assistant-plan-bar:is(.is-failed, .is-cancelled) .assistant-plan-icon { background: var(--danger-soft); color: var(--danger); }
.assistant-plan-bar:is(.is-paused, .is-waiting_user) .assistant-plan-icon { background: var(--warning-soft); color: var(--warning); }
.assistant-plan-count { flex: none; color: var(--ink-3); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.assistant-plan-bar > .assistant-plan-inner > .ai-plan-meter { display: block; width: 100%; margin-bottom: 8px; }
.ai-plan-meter { position: relative; display: inline-block; height: 2px; overflow: hidden; border-radius: var(--radius-pill); background: var(--line-soft); }
.ai-plan-meter > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--accent); transition: inline-size var(--duration-slow) var(--ease-out); }
.ai-plan.is-completed .ai-plan-meter > i { background: var(--success); }
.ai-plan-line { display: grid; min-width: 0; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface); }
.ai-plan-line-head { display: flex; width: 100%; min-width: 0; min-height: 36px; align-items: center; gap: 8px; padding: 8px 12px; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: var(--text-xs); text-align: left; cursor: pointer; }
.ai-plan-line-head > svg { flex: none; color: var(--accent); }
.ai-plan-line-head > svg:last-child { color: var(--ink-3); transition: transform var(--duration-fast); }
.ai-plan-line.is-open .ai-plan-line-head > svg:last-child { transform: rotate(180deg); }
.ai-plan-line-head > strong { min-width: 0; overflow: hidden; color: var(--ink); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ai-plan-line-head > .ai-plan-meter { width: 64px; flex: none; margin-left: auto; height: 4px; }
.ai-plan-line-head > .badge { flex: none; }
.ai-plan-line-count { flex: none; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ai-plan-line-body { padding: 4px 12px 8px; border-top: 1px solid var(--line-soft); font-size: var(--text-sm); }
.assistant-plan-summary { display: grid; min-width: 0; flex: 1; gap: 4px; }
.assistant-plan-meta { display: flex; min-width: 0; align-items: center; gap: 8px; font-size: var(--text-xs); }
.assistant-plan-meta > strong { min-width: 0; flex: 1; overflow: hidden; color: var(--ink); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.assistant-plan-meta > span { flex: none; }
.assistant-plan-summary > small { overflow: hidden; color: var(--ink-3); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.assistant-plan-panel { max-height: min(32dvh, 280px); padding: 4px 4px 12px 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; font-size: var(--text-sm); }
.assistant-plan-actions { margin: 8px 0 0; color: var(--ink-3); font-size: var(--text-xs); }
.assistant-plan-trigger:focus-visible, .assistant-plan-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-xs); }
@media (max-width: 760px) {
  .assistant-plan-bar { padding-inline: 16px; }
  .assistant-plan-trigger { min-height: 48px; }
}
.ai-choices { display: grid; gap: 8px; }
.ai-choices button { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; transition: border-color var(--duration-fast), background-color var(--duration-fast); }
.ai-choices button:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.ai-choices button:disabled { cursor: default; }
.ai-choices button:disabled:not(.is-selected) { color: var(--ink-3); }
.ai-choices button.is-selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }
.ai-choice-key { display: grid; width: 22px; height: 22px; flex: none; place-items: center; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink-3); font-size: var(--text-micro); font-weight: 600; }
.ai-choices button.is-selected .ai-choice-key { background: var(--surface); color: var(--accent); }
.ai-question:not(.is-answered) { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ai-url { margin: 0; overflow: hidden; color: var(--ink-2); font-family: var(--font-mono); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.ai-copy-text { max-height: 200px; margin: 0; padding: 8px; overflow-x: hidden; overflow-y: auto; border-radius: var(--radius-sm); background: var(--surface-sunken); font-family: var(--font-mono); font-size: var(--text-xs); white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-items-section + .ai-items-section { margin-top: 16px; }
.ai-items-section h4 { margin: 0 0 8px; color: var(--ink-2); font-size: var(--text-sm); font-weight: 500; }
.ai-items-section .btn { margin-top: 8px; }

@keyframes assistant-breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes ai-shimmer { from { background-position: 110% 0; } to { background-position: -110% 0; } }
@keyframes ai-blink { 50% { opacity: 0; } }
@media (max-width: 760px) {
  .ai-reply { grid-template-columns: minmax(0, 1fr); }
  .ai-avatar { display: none; }
  .ai-share-form { grid-template-columns: minmax(0, 1fr); }
  .ai-bubble { max-width: 92%; }
}
/* ---------- 文件助手 P7：聊天框（目录树作用域、@ 引用、Markdown 气泡、氛围与动效） ---------- */
.assistant-thread { background:
  radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%),
  radial-gradient(90% 50% at 0% 100%, color-mix(in srgb, var(--logo-plane) 6%, transparent), transparent 60%); }
.ai-avatar, .assistant-brand-mark, .assistant-welcome-icon { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--accent-soft) 72%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent); }
.ai-reply.is-live .ai-avatar, .assistant-brand-mark.is-working { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent); transition: box-shadow var(--duration-slow); }
.ai-bubble { white-space: normal; }
.ai-bubble .md { color: inherit; font-size: inherit; line-height: inherit; }
.ai-bubble .md :is(p, ul, ol, pre, blockquote, .src-fence, .md-table-wrap) { margin: 0 0 8px; }
.ai-bubble .md > :last-child { margin-bottom: 0; }
.ai-bubble .md :is(h1, h2, h3, h4, h5, h6) { margin: 4px 0 8px; padding: 0; border: 0; color: inherit; font-size: var(--text-md); }
.ai-bubble .md a { color: inherit; }
.ai-bubble .md blockquote { border-left-color: color-mix(in srgb, var(--on-primary) 40%, transparent); color: inherit; opacity: .85; }
.ai-bubble .md :not(pre) > code { padding: 1px 4px; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--on-primary) 16%, transparent); color: inherit; }
.ai-bubble .md :is(pre, .src-fence) { border-color: transparent; background: color-mix(in srgb, var(--on-primary) 10%, transparent); color: inherit; }
.ai-bubble .md .src-fence * { color: inherit; }
.ai-mentions { display: flex; max-width: 86%; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.assistant-composer { position: relative; }
.assistant-mention-hint { display: flex; align-items: center; gap: 4px; margin: 0; padding: 8px 16px 0; color: var(--warning); font-size: var(--text-xs); }
/* 输入框（CodeMirror，composer-engine.ts）：Markdown 标记在光标离开片段后隐藏，引用与链接带图标，列表自动续写。 */
.assistant-editor { position: relative; }
.assistant-editor.is-ready .assistant-editor-host { display: block; }
.assistant-editor-host { display: none; }
.assistant-editor .cm-editor { max-height: 176px; background: transparent; color: var(--ink); font-size: var(--text-md); }
.assistant-editor .cm-editor.cm-focused { outline: none; }
.assistant-editor .cm-scroller { overflow: auto; font-family: inherit; line-height: 22px; overscroll-behavior: contain; }
.assistant-editor .cm-content { min-height: 72px; padding: 8px 16px 8px; caret-color: var(--ink); }
.assistant-editor .cm-line { padding: 0; }
.assistant-editor .cm-placeholder { color: var(--ink-3); }
.assistant-editor .cm-content[contenteditable="false"] { cursor: not-allowed; opacity: .55; }
.cx-mark { color: var(--ink-3); }
.cx-strong { font-weight: 600; }
.cx-em { font-style: italic; }
.cx-del { color: var(--ink-3); text-decoration: line-through; }
.cx-code { padding: 1px 4px; border-radius: var(--radius-xs); background: var(--surface-sunken); color: var(--accent-ink); font-family: var(--font-mono); font-size: .9em; }
.cx-link { color: var(--accent-ink); }
.cx-link-icon, .cx-chip { color: var(--accent-ink); }
.cx-link-icon > svg { display: inline-block; margin-right: 4px; vertical-align: -2px; }
/* 胶囊是行内元素：名称过长时在胶囊内折行（底色随行断开），不撑宽输入框产生横向滚动条。 */
.cx-chip { margin: 0 1px; padding: 1px 4px 1px 4px; border-radius: var(--radius-xs); font-weight: 500; overflow-wrap: anywhere; word-break: break-all; box-decoration-break: clone; -webkit-box-decoration-break: clone; cursor: default; }
.cx-chip > svg { display: inline-block; margin-right: 4px; vertical-align: -2px; }
.cx-chip:hover { background: var(--accent-soft); }
.cx-bullet { display: inline-block; width: .9em; color: var(--accent); font-weight: 700; text-align: center; }
.cx-ol-marker { color: var(--accent-ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.cx-heading-line { font-weight: 600; }
.cx-h1 { font-size: var(--text-lg); line-height: 28px; }
.cx-h2 { font-size: var(--text-md); }
.cx-quote-line { padding-left: 8px !important; border-left: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--ink-2); }
.cx-quote-mark { color: var(--ink-3); }
.cx-codeblock-line, .cx-fence-line { background: var(--surface-sunken); font-family: var(--font-mono); font-size: var(--text-sm); }
.cx-codeblock-line { padding: 0 8px !important; }
.cx-fence-line { padding: 0 8px !important; color: var(--ink-3); }
/* 消息里的 @ 引用胶囊（Markdown 渲染）。 */
.md-mention { margin: 0 1px; padding: 1px 8px 1px 4px; border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-ink); font-size: .92em; font-weight: 500; overflow-wrap: anywhere; word-break: break-all; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.md-mention > svg, .md-link-chip > svg { display: inline-block; margin-right: 4px; vertical-align: -2px; }
.md a.md-link-chip { word-break: break-all; }
.ai-bubble .md a.md-link-chip { text-decoration-color: color-mix(in srgb, var(--on-primary) 45%, transparent); text-underline-offset: 3px; }
.ai-bubble .md-mention { border-color: color-mix(in srgb, var(--on-primary) 26%, transparent); background: color-mix(in srgb, var(--on-primary) 16%, transparent); color: var(--on-primary); }
/* 深色气泡里的选区：保持文字为气泡前景色，否则全局选区把文字改成正文色后看不清。 */
.ai-bubble ::selection { background: color-mix(in srgb, var(--on-primary) 32%, transparent); color: var(--on-primary); }
.assistant-scope.is-following .assistant-scope-label { color: var(--accent-ink); }
@media (hover: none) { .ai-user-meta { opacity: 1; } }
.assistant-mention-menu { position: absolute; right: 16px; bottom: calc(100% - 6px); left: 16px; z-index: 5; display: grid; max-height: min(320px, 46vh); overflow-y: auto; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); animation: assistant-appear var(--duration-fast) ease-out; overscroll-behavior: contain; }
.assistant-mention-head { position: sticky; top: -4px; z-index: 1; display: flex; align-items: center; gap: 8px; margin: -4px -4px 2px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); background: var(--surface); color: var(--ink-3); font-size: var(--text-xs); }
.assistant-mention-head > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assistant-mention-head kbd { padding: 0 4px; border: 1px solid var(--line); border-radius: var(--radius-xs); font-family: var(--font); font-size: var(--text-micro); }
.assistant-mention-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; }
.assistant-mention-item.is-active { background: var(--surface-hover); }
.assistant-mention-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assistant-mention-path { max-width: 160px; overflow: hidden; color: var(--ink-3); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.assistant-mention-empty { margin: 0; padding: 16px 12px; color: var(--ink-3); font-size: var(--text-sm); }
.assistant-scope-dialog .modal-body { min-height: 320px; }
.assistant-compose-box { position: relative; }
.assistant-compose-box.is-running::before { position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), var(--logo-plane), transparent); background-size: 200% 100%; content: ""; animation: ai-shimmer 1.6s linear infinite; }
@media (max-width: 600px) {
  .assistant-mention-menu { right: 8px; left: 8px; }
  .assistant-mention-path { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-turn, .ai-card, .assistant-mention-menu, .assistant-compose-box.is-running::before { animation: none; }
  .ai-shimmer { animation: none; background: none; color: var(--ink-2); }
  .ai-thinking-head > svg { transition: none; }
  .assistant-mark *, .ai-activity > i, .ai-caret, .ai-live > i { animation: none !important; }
}

/* 文件助手管理端 P5：模型能力标记、选择模型、模型目录、设置行 */
.assistant-model-sub { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.assistant-model-sub code { min-width: 0; overflow: hidden; color: var(--ink-3); font-size: var(--text-micro); text-overflow: ellipsis; white-space: nowrap; }
.assistant-caps { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.assistant-cap { padding: 0 8px; border-radius: var(--radius-xs); background: var(--surface-sunken); color: var(--ink-2); font-size: var(--text-micro); line-height: 18px; white-space: nowrap; }
.assistant-cap.is-tools { background: var(--success-soft); color: var(--success); }
.assistant-cap.is-reasoning { background: var(--accent-soft); color: var(--accent-ink); }
.assistant-cap.is-off { color: var(--ink-3); }
.assistant-picker-toolbar { margin: 0 0 12px; }
.assistant-picker-toolbar .search-input { max-width: 320px; }
.assistant-picker { max-height: min(56dvh, 520px); overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.assistant-picker-table { --cols: 44px minmax(260px, 1fr) 80px 120px; min-width: 560px; }
.assistant-picker-table label.data-row { cursor: pointer; }
.assistant-picker-table .data-row.is-selected { background: var(--accent-soft); }
.assistant-picker-table .data-row.is-disabled { cursor: default; opacity: .6; }
.assistant-picker-table .data-row.is-disabled .cell-check svg { color: var(--success); }
.assistant-picker-table .data-head { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.assistant-picker-count { margin-right: auto; color: var(--ink-3); font-size: var(--text-sm); }
.assistant-catalog-table { --cols: minmax(260px, 1fr) 80px 80px 120px 96px 48px; min-width: 720px; }
.assistant-limit-form > .field > .input[type="number"] { max-width: 200px; text-align: right; font-variant-numeric: tabular-nums; }
.assistant-notice-reset { display: block; margin-top: 8px; text-align: left; }
.assistant-limit-form textarea.input { min-height: 96px; padding: 8px 12px; resize: vertical; line-height: 1.6; }

/* ---------- 文件助手输入区层次 ---------- */
/* 确认请求与消息分开布局；数量增加只改变队列计数，不挤占更多对话高度。 */
/* 确认坞（§31）：输入框上方一次处理一项，可收起成一行；左侧色条区分普通、网络与不可恢复的请求。 */
.assistant-review { --review-tone: var(--accent); --review-soft: var(--accent-soft); position: relative; margin-bottom: 8px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--review-tone) 35%, var(--line)); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 0 0 3px var(--review-soft), var(--shadow-md); animation: assistant-appear var(--duration-base) ease-out; }
.assistant-review::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--review-tone); content: ""; }
.assistant-review:is(.is-http, .is-scope) { --review-tone: var(--warning); --review-soft: var(--warning-soft); }
.assistant-review.is-danger { --review-tone: var(--danger); --review-soft: var(--danger-soft); }
.assistant-review:focus { outline: none; }
.assistant-review:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring), var(--shadow-md); }
.assistant-review-head { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px 4px 16px; color: var(--ink-2); font-size: var(--text-xs); }
.assistant-review:not(.is-collapsed) .assistant-review-head { border-bottom: 1px solid var(--line-soft); }
.assistant-review-icon { display: grid; width: 24px; height: 24px; flex: none; place-items: center; border-radius: var(--radius-sm); background: var(--review-soft); color: var(--review-tone); }
.assistant-review-title { display: flex; min-width: 0; flex: 1; align-items: baseline; gap: 8px; padding: 8px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.assistant-review-title strong { flex: none; color: var(--ink); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.assistant-review-headline { min-width: 0; overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.assistant-review-nav { display: flex; flex: none; align-items: center; gap: 2px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.assistant-review-nav > span { min-width: 36px; text-align: center; }
.assistant-review-nav .icon-btn, .assistant-review-toggle.icon-btn { width: 26px; height: 26px; }
.assistant-review-toggle svg { transition: transform var(--duration-fast); }
.assistant-review.is-collapsed .assistant-review-toggle svg { transform: rotate(180deg); }
.assistant-review-edit { flex: none; padding: 4px 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-2); font: inherit; cursor: pointer; }
.assistant-review-edit:hover { background: var(--surface-hover); color: var(--accent-ink); }
.assistant-review-body { max-height: min(34dvh, 320px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.assistant-review-body > .ai-card { gap: 8px; margin: 0; padding: 12px 16px 16px; border: 0; border-radius: 0; box-shadow: none; animation: none; }
.assistant-review-body > .ai-card .ai-card-icon { width: 28px; height: 28px; }
.assistant-review-body .ai-card-foot { position: sticky; z-index: 1; bottom: 0; margin-bottom: -16px; border-radius: 0; background: color-mix(in srgb, var(--surface-sunken) 92%, transparent); backdrop-filter: blur(6px); }
.assistant-review-body > .ai-card-note { margin: 8px 16px 0; }
/* 紧凑模式隐藏样例与详情；分享密码、不可恢复确认、跨区目标等必填项不受影响。确认坞标题已说明待确认，普通操作不重复状态徽标。 */
.assistant-review.is-compact .assistant-review-body :is(.ai-diff, .ai-chips, .ai-http-details, .ai-card > .ai-link) { display: none; }
.assistant-review-body .ai-card:not(.is-danger) > .ai-card-head > .badge { display: none; }
.assistant-review-question { display: grid; gap: 12px; padding: 12px 16px; }
.assistant-review-question h3 { margin: 0; color: var(--ink); font-size: var(--text-sm); font-weight: 600; line-height: 1.6; }
.assistant-review-input { display: grid; gap: 8px; min-width: 0; color: var(--ink-2); font-size: var(--text-xs); }
.assistant-review-input textarea { width: 100%; min-height: 64px; max-height: 160px; resize: vertical; font-size: var(--text-sm); line-height: 1.6; }
.assistant-review-feedback { padding: 8px 16px; font-size: var(--text-xs); }
.assistant-review-feedback form { display: grid; gap: 8px; }
.assistant-review-question footer, .assistant-review-feedback footer { position: sticky; bottom: 0; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 8px 0; background: var(--surface); }
.assistant-review-question footer > span, .assistant-review-feedback footer > span { flex: 1; color: var(--ink-3); font-size: var(--text-micro); line-height: 1.6; }
@media (max-height: 640px) { .assistant-review-body { max-height: 26dvh; } }
@media (max-width: 760px) {
  .assistant-review-head { gap: 4px; padding-left: 12px; }
  .assistant-review-edit { padding-inline: 8px; }
  .assistant-review-nav > span { min-width: 28px; }
  /* 展开时卡片标题已说明请求，窄屏把页眉留给操作按钮；收起时仍显示摘要。 */
  .assistant-review:not(.is-collapsed) .assistant-review-title strong { display: none; }
}
/* 时间线里的决定节点：一行显示请求与状态，等待中带「去处理」定位确认坞，展开查看冻结内容与结果。 */
.ai-decision-head { display: flex; min-width: 0; min-height: 22px; align-items: center; gap: 8px; }
.ai-decision-head > .ai-tool-head { min-width: 0; flex: 1; }
.ai-decision-head > .badge { flex: none; }
.ai-decision-target { min-width: 0; flex: 1; overflow: hidden; color: var(--ink-3); text-overflow: ellipsis; white-space: nowrap; }
.ai-decision.is-open .ai-tool-head > svg { transform: rotate(180deg); }
.ai-decision .ai-step-dot { color: var(--ink-2); }
.ai-decision.tone-success .ai-step-dot { border-color: color-mix(in srgb, var(--success) 35%, var(--line)); background: var(--success-soft); color: var(--success); }
.ai-decision.tone-danger .ai-step-dot { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); background: var(--danger-soft); color: var(--danger); }
.ai-decision.is-busy .ai-step-dot { border-color: var(--accent); color: var(--accent); }
.ai-decision.is-pending .ai-step-dot { border-color: var(--warning); background: var(--warning-soft); color: var(--warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 18%, transparent); animation: ai-decision-wait 2s ease-in-out infinite; }
.ai-decision-go { display: inline-flex; flex: none; align-items: center; gap: 2px; padding: 2px 8px; border: 0; border-radius: var(--radius-xs); background: var(--warning-soft); color: var(--warning); font: inherit; font-size: var(--text-micro); font-weight: 500; cursor: pointer; }
.ai-decision-go:hover { background: color-mix(in srgb, var(--warning) 22%, transparent); }
.ai-decision-go:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.ai-decision-detail { gap: 8px; font-size: var(--text-xs); }
.ai-decision-text { margin: 0; color: var(--ink-2); line-height: 1.6; overflow-wrap: anywhere; }
.ai-decision-options { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ai-decision-options li { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink-2); }
.ai-decision-answer { display: grid; gap: 2px; padding: 8px 8px; border-left: 2px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--accent-soft); }
.ai-decision-answer > span { color: var(--ink-3); font-size: var(--text-micro); }
.ai-decision-answer > p { margin: 0; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-decision-result { margin: 0; color: var(--ink-3); font-size: var(--text-micro); font-variant-numeric: tabular-nums; }
.ai-decision-result .tone-danger { color: var(--danger); }
.ai-decision .ai-action-progress { grid-template-columns: minmax(0, 1fr) auto auto; }
.ai-process-more { display: flex; width: fit-content; align-items: center; gap: 8px; margin: 0 0 4px 1px; padding: 4px 8px 4px 8px; border: 1px dashed var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-3); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.ai-process-more:hover { border-color: var(--accent); color: var(--accent-ink); }
.ai-marker { align-items: center; }
.ai-marker-text { color: var(--ink-3); font-size: var(--text-xs); line-height: 1.6; }
.ai-marker.tone-accent .ai-step-dot { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.ai-marker.tone-accent .ai-marker-text { color: var(--accent-ink); font-weight: 500; }
.ai-process-waiting { padding: 0 8px; border-radius: var(--radius-pill); background: var(--warning-soft); color: var(--warning); }
.ai-share-links { background: var(--surface); }
@keyframes ai-decision-wait { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--warning) 8%, transparent); } }
@media (prefers-reduced-motion: reduce) { .ai-decision.is-pending .ai-step-dot { animation: none; } }

/* 消息区底部渐隐，与输入区拉开层次；输入框是浮起的卡片，上下文与控制行退为安静的文字按钮，发送按钮是唯一的强调。 */
.assistant-scroll-area::after { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; height: 28px; background: linear-gradient(to bottom, transparent, var(--surface)); content: ""; pointer-events: none; }
.assistant-composer { container: assistant-composer / inline-size; padding: 4px 16px 12px; }
.assistant-compose-box { border-color: var(--line); border-radius: var(--radius-xl); box-shadow: 0 1px 2px var(--shade-8), 0 10px 28px -14px var(--shade-16); }
.assistant-compose-box:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 0 0 3px var(--accent-soft), 0 10px 28px -14px var(--shade-16); }
.assistant-context-row { gap: 8px; padding: 8px 8px 0; }
.assistant-scope .icon-btn, .assistant-mode { height: 26px; }
.assistant-scope .icon-btn { gap: 4px; padding: 0 8px; }
.assistant-scope-text { color: var(--ink-2); }
.assistant-mode { gap: 4px; padding: 0 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-3); }
.assistant-mode:hover { background: var(--surface-hover); color: var(--ink); }
.assistant-mode.is-full { border: 0; background: var(--warning-soft); color: var(--warning); }
.assistant-controls { gap: 4px; padding: 2px 8px 8px; }
.assistant-controls > .assistant-model, .assistant-capability-button { height: 28px; color: var(--ink-3); }
.assistant-controls > .assistant-model:hover, .assistant-capability-button:hover { color: var(--ink); }
.assistant-enter-hint { margin-right: 8px; opacity: .8; }
.assistant-send { width: 32px; height: 32px; border-radius: 50%; }
.assistant-footnote { margin: 8px 8px 0; opacity: .85; }
@container assistant-composer (max-width: 460px) { .assistant-enter-hint { display: none; } .assistant-send { margin-left: auto; } }
:root[data-theme="dark"] .assistant-compose-box { box-shadow: 0 10px 28px -14px var(--shade-64); }

/* ---------- 文件助手对话列表 ---------- */
.assistant-history { padding: 12px 8px; }
.assistant-history-filter { display: grid; gap: 8px; }
.assistant-history-search { display: flex; height: 32px; align-items: center; gap: 8px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink-3); }
.assistant-history-search:focus-within { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
.assistant-history-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--text-sm); }
.assistant-history-search input::-webkit-search-cancel-button { display: none; }
.assistant-history-filter .segmented { justify-self: start; }
.assistant-history-empty { margin: 24px 8px; color: var(--ink-3); font-size: var(--text-sm); text-align: center; }
.assistant-history h4 { margin: 16px 8px 4px; font-size: var(--text-micro); letter-spacing: .04em; }
.assistant-history ul { display: grid; gap: 2px; }
.assistant-history li { position: relative; gap: 0; padding-right: 4px; }
.assistant-history li.is-active { background: color-mix(in srgb, var(--accent-soft) 70%, transparent); }
.assistant-history li.is-active::before { position: absolute; top: 10px; bottom: 10px; left: 0; width: 3px; border-radius: 0 var(--radius-2xs) var(--radius-2xs) 0; background: var(--accent); content: ""; }
.assistant-history-item { gap: 8px; padding: 8px 8px 8px 8px; border-radius: var(--radius-md); }
.assistant-history-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.assistant-history-icon { position: relative; display: grid; width: 28px; height: 28px; flex: none; place-items: center; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink-3); }
.assistant-history li.is-active .assistant-history-icon { background: var(--surface); color: var(--accent); }
.assistant-history-icon .assistant-pulse { position: absolute; top: -2px; right: -2px; width: 7px; height: 7px; box-shadow: 0 0 0 2px var(--surface); }
/* 涉及私密空间的对话（§37）：锁形图标；锁定时标题隐藏，以次要文字显示。 */
.assistant-history-icon.is-private { background: var(--warning-soft); color: var(--warning); }
.assistant-history-locked { color: var(--ink-3); font-weight: 400; }
.assistant-history-item strong { font-weight: 500; }
.assistant-history-item small { display: flex; min-width: 0; gap: 0; }
.assistant-history-item small > span { flex: none; }
.assistant-history-item small > span + span::before { margin: 0 4px; color: var(--line-strong, var(--ink-3)); content: "·"; }
.assistant-history-item small > .assistant-history-scope { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.assistant-history li > .menu-trigger, .assistant-history li > button:last-child { opacity: 0; transition: opacity var(--duration-fast); }
.assistant-history li:hover > button:last-child, .assistant-history li:focus-within > button:last-child, .assistant-history li > button:last-child[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .assistant-history li > button:last-child { opacity: 1; } }

/* ---------- 文件助手手机布局 ---------- */
@media (max-width: 760px) {
  .assistant-input, .assistant-editor .cm-editor, .assistant-editor .cm-content, .assistant-history-search input, .assistant-review input:not([type="checkbox"]), .assistant-review textarea { font-size: var(--text-lg); }
  /* 手机上从右下角的浮动按钮放大展开、关闭时缩回按钮，不用桌面抽屉的侧滑。卡片四周让出浮动边距，按钮中心在卡片右下角向内 24px 处。 */
  .assistant-drawer { opacity: 0; transform: scale(.9); transform-origin: calc(100% - 24px) calc(100% - 24px);
    transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out), visibility 0s var(--duration-base); }
  .assistant-drawer.is-open { opacity: 1; transform: none; transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-fast) var(--ease-out); }
  .assistant-drawer .assistant-header { min-height: 52px; padding: 8px 8px; }
  .assistant-drawer .assistant-header .assistant-brand-mark { transform: scale(.85); }
  .assistant-drawer .assistant-header .assistant-keyboard-help { display: none; }
  .assistant-capability-button span { display: none; }
  .assistant-starters { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .assistant-starters button { grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 1px; align-items: center; padding: 8px 12px; }
  .assistant-starters button > svg:first-child { grid-row: span 2; margin: 0; }
  .assistant-starters button > svg:last-child { position: static; grid-row: 1 / span 2; grid-column: 3; opacity: 1; }
  .assistant-starters button:hover { transform: none; }
  .assistant-welcome { gap: 8px; padding-top: 12px; }
  .assistant-welcome-icon { width: 52px; height: 52px; margin-bottom: 4px; }
  .assistant-model { margin-right: 0; }
  .assistant-capability-button { margin-right: auto; }
  .assistant-composer { padding: 4px 8px 8px; }
  .assistant-model { min-width: 0; max-width: 46vw; }
  .assistant-history li > button:last-child { opacity: 1; }
}
@media (max-width: 380px) {
  .assistant-drawer .assistant-header .assistant-brand-mark { display: none; }
}

/* ---------- 配置指南（SetupGuide） ---------- */
.setup-guide { margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.setup-guide.is-open { border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 55%, var(--surface)), var(--surface) 96px); }
.setup-guide-toggle { display: flex; width: 100%; align-items: center; gap: 12px; padding: 12px 16px; border: 0; border-radius: inherit; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.setup-guide-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.setup-guide-icon { display: grid; width: 30px; height: 30px; flex: none; place-items: center; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); }
.setup-guide-heading { display: grid; min-width: 0; flex: 1; gap: 1px; }
.setup-guide-heading strong { font-size: var(--text-md); font-weight: 600; }
.setup-guide-heading small { color: var(--ink-3); font-size: var(--text-xs); }
.setup-guide-count { flex: none; color: var(--ink-3); font-size: var(--text-xs); }
.setup-guide-chevron { flex: none; color: var(--ink-3); transform: rotate(-90deg); transition: transform var(--duration-fast); }
.setup-guide.is-open .setup-guide-chevron { transform: none; }
.setup-guide-body { padding: 2px 16px 16px 20px; }
.setup-guide-steps { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.setup-guide-steps > li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 16px; padding: 0 0 16px; }
.setup-guide-steps > li:not(:last-child)::before { position: absolute; top: 24px; bottom: 2px; left: 11px; width: 1px; background: var(--line); content: ""; }
.setup-guide-number { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 50%; background: var(--surface); color: var(--accent); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.setup-guide-steps > li > div > strong { display: block; padding-top: 1px; font-size: var(--text-md); font-weight: 500; line-height: 20px; }
.setup-guide-text { margin-top: 4px; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.7; }
.setup-guide-text p { margin: 0; }
.setup-guide-text p + p, .setup-guide-text pre, .setup-guide-text ul { margin-top: 8px; }
.setup-guide-text ul { margin-bottom: 0; padding-left: 16px; }
.setup-guide-text code { padding: 1px 4px; border-radius: var(--radius-xs); background: var(--surface-sunken); color: var(--ink); font-family: var(--font-mono); font-size: var(--text-xs); }
.setup-guide-text pre { overflow-x: auto; margin-bottom: 0; padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface-sunken); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.6; }
.setup-guide-text pre code { padding: 0; background: transparent; }
.setup-guide-text table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: var(--text-xs); }
.setup-guide-text th, .setup-guide-text td { padding: 8px 8px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.setup-guide-text th { color: var(--ink-3); font-weight: 500; white-space: nowrap; }
.setup-guide-text td code { word-break: break-all; }
.setup-guide-doc { display: inline-flex; margin-left: 40px; align-items: center; gap: 4px; font-size: var(--text-sm); }
@media (max-width: 640px) {
  .setup-guide-toggle { padding: 12px; }
  .setup-guide-count { display: none; }
  .setup-guide-body { padding: 2px 12px 16px 16px; }
}

/* ---------- 文件助手附件（§22.5） ---------- */
.assistant-attach-button { display: inline-grid; width: 28px; height: 28px; flex: none; place-items: center; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-3); cursor: pointer; }
.assistant-attach-button:hover { background: var(--surface-hover); color: var(--ink); }
.assistant-attach-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.assistant-uploads { display: grid; gap: 8px; padding: 8px 8px 0; }
/* 附件卡片自动换行，超过两行在托盘内纵向滚动，不出现横向滚动条。 */
.assistant-uploads > ul { display: grid; max-height: 124px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0; padding: 0 0 2px; overflow-x: hidden; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.assistant-upload { position: relative; display: flex; min-width: 0; align-items: center; gap: 8px; padding: 8px 28px 8px 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); }
.assistant-upload.is-error { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); background: var(--danger-soft); }
.assistant-upload-media { position: relative; display: grid; width: 44px; height: 44px; flex: none; overflow: hidden; place-items: center; border-radius: var(--radius-sm); background: var(--surface); }
.assistant-upload-media > img { width: 100%; height: 100%; object-fit: cover; }
.assistant-upload-progress { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--surface) 55%, transparent); color: var(--accent); }
.assistant-upload-progress.is-error { background: color-mix(in srgb, var(--danger-soft) 70%, transparent); color: var(--danger); }
.assistant-upload-ring { width: 24px; height: 24px; transform: rotate(-90deg); }
.assistant-upload-ring circle { fill: none; stroke-width: 2.5; }
.assistant-upload-ring circle:first-child { stroke: color-mix(in srgb, var(--accent) 18%, transparent); }
.assistant-upload-ring circle:last-child { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset var(--duration-base); }
.assistant-upload-text { display: grid; min-width: 0; flex: 1; gap: 1px; }
.assistant-upload-text strong { overflow: hidden; color: var(--ink); font-size: var(--text-xs); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.assistant-upload-text small { overflow: hidden; color: var(--ink-3); font-size: var(--text-micro); text-overflow: ellipsis; white-space: nowrap; }
.assistant-upload.is-error .assistant-upload-text small { color: var(--danger); }
.assistant-upload-remove, .assistant-upload-action { position: absolute; display: grid; width: 20px; height: 20px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); cursor: pointer; }
.assistant-upload-remove { top: 4px; right: 4px; }
.assistant-upload-action { right: 4px; bottom: 4px; color: var(--danger); }
.assistant-upload-remove:hover, .assistant-upload-action:hover { background: var(--surface-hover); color: var(--ink); }
.assistant-upload-hint { display: flex; align-items: center; gap: 4px; margin: 0; color: var(--warning); font-size: var(--text-micro); }
.assistant-drop { position: absolute; inset: 8px; z-index: 6; display: grid; place-items: center; border: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--accent-soft) 82%, transparent); color: var(--accent-ink); pointer-events: none; }
.assistant-drop > span { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-md); font-weight: 600; }
.assistant-page-main { position: relative; }
/* 用户消息上方的附件：图片网格（最多 4 张，+N）与文件胶囊，右对齐贴着气泡。 */
.ai-files { display: grid; max-width: 86%; justify-items: end; gap: 8px; }
.ai-files-grid { display: grid; width: min(280px, 100%); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.ai-files-grid.is-1 { width: min(220px, 100%); grid-template-columns: minmax(0, 1fr); }
.ai-files-grid.is-3 > :first-child { grid-row: span 2; }
.ai-files-tile { position: relative; display: grid; min-width: 0; }
.ai-files-image { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); cursor: zoom-in; }
.ai-files-grid.is-1 .ai-files-image { aspect-ratio: 4 / 3; }
.ai-files-grid.is-3 .ai-files-tile:first-child .ai-files-image { height: 100%; aspect-ratio: auto; }
.ai-files-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ai-files-image:hover img { opacity: .92; }
.ai-files-more { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 55%, transparent); color: var(--on-primary); font-size: var(--text-lg); font-weight: 600; }
/* 图片右上角的 ⋯：悬停、聚焦或菜单打开时出现；触屏上始终显示。 */
.ai-files-tile > .ai-files-menu { position: absolute; top: 4px; right: 4px; background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: var(--shadow-sm); opacity: 0; transition: opacity var(--duration-fast) ease; }
.ai-files-tile:hover > .ai-files-menu, .ai-files-tile:focus-within > .ai-files-menu, .ai-files-tile > .ai-files-menu.is-active { opacity: 1; }
@media (hover: none) { .ai-files-tile > .ai-files-menu { opacity: 1; } }
.ai-files-files { display: flex; max-width: 100%; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.ai-files-file { display: inline-flex; max-width: 100%; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-2); font-size: var(--text-xs); }
.ai-files-file > button:first-child { display: inline-flex; min-width: 0; align-items: center; gap: 4px; padding: 4px 4px 4px 8px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.ai-files-file > button:first-child > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-files-file > button:first-child:hover { color: var(--accent-ink); }
.ai-files-file:hover { border-color: var(--accent); }
.ai-files-file > .ai-files-menu { width: 22px; height: 22px; margin-right: 1px; }
@media (max-width: 760px) {
  .assistant-capability-button:has(+ .assistant-attach-button) { margin-right: 0; }
  .assistant-capability-button + .assistant-attach-button { margin-right: auto; }
}

/* ---------- 目录统计 ---------- */

.folder-stats { display: grid; gap: 24px; }
.folder-stats-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.folder-stats-figures > div { display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); min-width: 0; }
.folder-stats-figures span { color: var(--ink-3); font-size: var(--text-xs); }
.folder-stats-figures strong { color: var(--ink); font-size: var(--text-xl); font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.folder-stats-figures small { color: var(--ink-3); font-size: var(--text-xs); overflow-wrap: anywhere; }
/* 目录统计里的本机缓存：一行浅色说明，不参与上方的空间统计。 */
.folder-stats-local { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink-2); font-size: var(--text-sm); }
.folder-stats-local > svg { flex: none; margin-top: 2px; color: var(--ink-3); }
.folder-stats-local > span { display: grid; gap: 2px; min-width: 0; }
.folder-stats-local strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.folder-stats-local small { color: var(--ink-3); font-size: var(--text-xs); }
.folder-stats-section { display: grid; gap: 8px; }
.folder-stats-section > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.folder-stats-section h3 { margin: 0; color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.folder-stats-measure { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-sm); background: var(--surface-sunken); }
.folder-stats-measure button { height: 24px; padding: 0 8px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--ink-3); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.folder-stats-measure button.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.folder-stats-measure button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
/* 一条横向堆叠条：段之间 2px 间隙，两端圆角；每段的提示给出数量、大小与占比，下表是同一数据的文字版。 */
.folder-stats-bar { display: flex; gap: 2px; height: 12px; overflow: hidden; border-radius: var(--radius-xs); }
.folder-stats-bar > span { min-width: 3px; border-radius: var(--radius-2xs); transition: flex-grow var(--duration-base) ease; }
.kind-image { --kind: var(--series-1); } .kind-video { --kind: var(--series-2); } .kind-audio { --kind: var(--series-3); }
.kind-document { --kind: var(--series-4); } .kind-text { --kind: var(--series-5); } .kind-archive { --kind: var(--series-6); } .kind-other { --kind: var(--series-other); }
.folder-stats-bar > span, .folder-stats-swatch { background: var(--kind); }
.folder-stats-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.folder-stats-table th, .folder-stats-table td { padding: 8px 0; border-bottom: 1px solid var(--line-soft); text-align: right; }
.folder-stats-table th:first-child { text-align: left; }
.folder-stats-table thead th { color: var(--ink-3); font-size: var(--text-xs); font-weight: 500; }
.folder-stats-table tbody th { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; }
.folder-stats-table td { width: 22%; color: var(--ink-2); }
.folder-stats-table tbody tr:last-child > * { border-bottom: 0; }
.folder-stats-swatch { width: 10px; height: 10px; border-radius: var(--radius-2xs); flex: none; }
.folder-stats-largest { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.folder-stats-largest li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 0; }
.folder-stats-largest .file-tile { transform: scale(.85); }
.folder-stats-name { display: grid; min-width: 0; }
.folder-stats-name strong { overflow: hidden; color: var(--ink); font-size: var(--text-sm); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.folder-stats-name small, .folder-stats-name .link-button { justify-self: start; max-width: 100%; overflow: hidden; color: var(--ink-3); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.folder-stats-size { color: var(--ink-2); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .folder-stats-figures { grid-template-columns: minmax(0, 1fr); }
  .folder-stats-figures > div { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
  .folder-stats-figures small { grid-column: 1 / -1; }
}
.thumbnail-backfill { display: grid; max-width: 520px; gap: 16px; margin: 16px 0 12px; }

/* 手动视频选图：候选画面与时间一一对应，确认前保留原缩略图。 */
.thumbnail-picker > .modal-header { padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.thumbnail-picker > .modal-footer { align-items: center; }
.thumbnail-picker-file { display: flex; min-width: 0; align-items: center; gap: 8px; color: var(--ink-3); }
.thumbnail-picker-file > svg { flex: none; }
.thumbnail-picker-file > strong { min-width: 0; overflow: hidden; color: var(--ink-2); font-size: var(--text-sm); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.thumbnail-picker-status { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: var(--text-sm); }
.thumbnail-picker-status > .spinner, .thumbnail-picker-status > svg { flex: none; color: var(--accent); }
.thumbnail-picker-status > small { flex: none; margin-left: auto; color: var(--ink-3); font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.thumbnail-picker-choice { min-width: 0; flex: 1; color: var(--ink-3); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.thumbnail-candidates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 12px; }
.thumbnail-candidate { position: relative; display: grid; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background-color var(--duration-fast); }
.thumbnail-candidate:not(.is-loading):hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.thumbnail-candidate.is-selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.thumbnail-candidate:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.thumbnail-candidate.is-loading { cursor: default; }
.thumbnail-candidate > input { position: absolute; z-index: 1; top: 10px; left: 10px; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: inherit; }
.thumbnail-candidate-image { display: grid; aspect-ratio: 16 / 10; place-items: center; min-width: 0; overflow: hidden; background: var(--surface-sunken); }
.thumbnail-candidate-image > img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.thumbnail-candidate-image > span { display: grid; justify-items: center; gap: 8px; color: var(--ink-3); font-size: var(--text-xs); }
.thumbnail-candidate-caption { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 4px; padding: 8px; border-top: 1px solid var(--line-soft); color: var(--ink-2); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.thumbnail-candidate-caption > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.thumbnail-candidate-caption > span:last-child { color: var(--accent); }
@media (max-width: 640px) {
  .modal-backdrop:has(> .thumbnail-picker) { align-items: end; padding: max(12px, env(safe-area-inset-top)) 0 0; }
  .thumbnail-picker { max-height: calc(100dvh - max(12px, env(safe-area-inset-top))); border: 0; border-top: 1px solid var(--line); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .thumbnail-picker > .modal-header { padding: 16px; gap: 8px; }
  .thumbnail-picker > .modal-body { padding: 16px; gap: 16px; }
  .thumbnail-picker > .modal-footer { padding: 12px 16px max(12px, env(safe-area-inset-bottom)); border-radius: 0; }
  .thumbnail-picker > .modal-footer .btn { padding-inline: 12px; }
  .thumbnail-candidates { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .thumbnail-candidate-caption { padding: 8px 8px; }
}
@media (prefers-reduced-motion: reduce) { .thumbnail-candidate { transition: none; } }

/* ---------- 本机缓存（设置） ---------- */

.local-cache-section { display: grid; gap: 16px; }
.local-cache-section > .switch-row { max-width: 560px; }
.local-cache-kinds { display: grid; gap: 8px; }
.local-cache-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; color: var(--ink-3); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.local-cache-legend li { display: inline-flex; align-items: center; gap: 8px; }
.local-cache-select { max-width: 220px; }
.local-cache-note { margin: 0; font-size: var(--text-sm); }
.local-cache-reset { padding-top: 16px; border-top: 1px solid var(--line); }
.kind-thumb { --kind: var(--series-6); }
@media (max-width: 720px) {
  .local-cache-figures { grid-template-columns: minmax(0, 1fr); }
}
/* 侧栏「本机缓存」：与上方计入配额的两组用分隔线隔开，不参与占比条。 */
.storage-local { padding-top: 8px; border-top: 1px dashed var(--line); }
.storage-local h4 > svg { justify-self: center; color: var(--ink-3); }
.storage-meter .storage-local-note { color: var(--ink-3); font-size: var(--text-xs); }
.storage-local-note .link-button { font-size: var(--text-xs); }

/* 手机上的普通预览窗口（PDF、不支持的类型）：头部保持一行——去掉文件图标、全屏按钮与分隔线，标题省略，操作按钮靠右。 */
@media (max-width: 560px) {
  .preview-modal:not(.is-immersive):not(.is-minimized) .modal-header { flex-wrap: nowrap; }
  .preview-modal:not(.is-immersive):not(.is-minimized) .modal-header > .file-tile,
  .preview-modal:not(.is-immersive):not(.is-minimized) .modal-window-actions > [aria-keyshortcuts="f"],
  .preview-modal:not(.is-immersive):not(.is-minimized) .modal-window-actions > .modal-actions-divider { display: none; }
  .preview-modal:not(.is-immersive):not(.is-minimized) .modal-heading { flex: 1; min-width: 0; }
  .preview-modal:not(.is-immersive):not(.is-minimized) .modal-window-actions { flex: none; width: auto; gap: 0; }
}
/* ---------- 文件助手入口：右下角圆形图标；处理中外圈光环旋转，悬停上浮放大，待确认显示暖色角标 ---------- */
.assistant-launcher { --launcher-size: 52px; position: fixed; right: max(24px, calc(env(safe-area-inset-right) + 16px)); bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px)); z-index: 45;
  display: grid; width: var(--launcher-size); height: var(--launcher-size); padding: 0; place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line)); border-radius: 50%; background: var(--surface); color: var(--accent-ink);
  box-shadow: 0 1px 2px var(--shade-8), 0 8px 24px -6px color-mix(in srgb, var(--accent) 28%, var(--shade-16)), inset 0 1px 0 var(--tray-highlight);
  animation: launcher-in var(--duration-slow) var(--ease-out) both;
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base), border-color var(--duration-fast); }
.assistant-launcher[hidden] { display: none; }
.assistant-launcher-orb { position: relative; z-index: 1; display: grid; width: calc(var(--launcher-size) - 8px); height: calc(var(--launcher-size) - 8px); place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--accent) 16%, var(--surface)) 0, var(--surface) 72%); transition: transform var(--duration-slow) var(--ease-out); }
/* 外圈光环：静止时透明；处理中是一段旋转的渐变弧线，待确认时为静止的暖色圆环。 */
.assistant-launcher-ring { position: absolute; inset: -4px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 40%, color-mix(in srgb, var(--accent) 25%, transparent) 60%, var(--accent) 88%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), var(--black) calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), var(--black) calc(100% - 2.5px));
  transition: opacity var(--duration-base); }
.assistant-launcher.is-working { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.assistant-launcher.is-working .assistant-launcher-ring { opacity: 1; animation: launcher-spin 1.2s linear infinite; }
.assistant-launcher.is-working .assistant-launcher-orb { animation: launcher-breathe 2.4s ease-in-out infinite; }
.assistant-launcher.has-pending { border-color: color-mix(in srgb, var(--warning) 55%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning) 14%, transparent), var(--shadow-lg); }
.assistant-launcher.has-pending .assistant-launcher-ring { opacity: 1; background: color-mix(in srgb, var(--warning) 55%, transparent); animation: none; }
.assistant-launcher-badge { position: absolute; top: -5px; right: -5px; z-index: 2; display: grid; min-width: 20px; height: 20px; padding: 0 4px; place-items: center; border: 2px solid var(--surface); border-radius: var(--radius-pill); background: var(--warning); color: var(--on-accent); font-size: var(--text-micro); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; animation: launcher-pop var(--duration-base) var(--ease-out); }
.assistant-launcher-lock { position: absolute; left: -2px; bottom: -2px; z-index: 2; display: grid; width: 18px; height: 18px; place-items: center; border: 2px solid var(--surface); border-radius: 50%; background: var(--ink); color: var(--surface); }
.assistant-launcher:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring), var(--shadow-lg); }
.assistant-launcher:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .assistant-launcher:hover { transform: translateY(-3px) scale(1.06); border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
    box-shadow: 0 2px 4px var(--shade-8), 0 16px 34px -8px color-mix(in srgb, var(--accent) 45%, var(--shade-16)), 0 0 0 6px color-mix(in srgb, var(--accent) 8%, transparent), inset 0 1px 0 var(--tray-highlight); }
  .assistant-launcher:hover .assistant-launcher-orb { transform: rotate(-12deg) scale(1.05); }
  .assistant-launcher:hover:active { transform: translateY(-1px) scale(.97); }
}
@keyframes launcher-spin { to { transform: rotate(360deg); } }
@keyframes launcher-breathe { 50% { transform: scale(.94); } }
@keyframes launcher-in { from { opacity: 0; transform: translateY(12px) scale(.9); } }
@keyframes launcher-pop { from { transform: scale(.4); } }
body.has-modal .assistant-launcher { visibility: hidden; pointer-events: none; }
body:has(.assistant-launcher:not([hidden])) .main { padding-bottom: 88px; }
@media (max-width: 760px) {
  .assistant-launcher { --launcher-size: 48px; right: var(--floating-right); bottom: var(--floating-bottom); }
  body:has(.assistant-launcher:not([hidden])) .toaster { bottom: calc(var(--floating-bottom) + 60px); }
  body:has(.assistant-launcher:not([hidden])) .modal-backdrop.is-minimized { left: calc((100vw + var(--floating-left) - var(--floating-right) - 60px) / 2); width: min(380px, calc(100vw - var(--floating-left) - var(--floating-right) - 60px)); }
}
@media (prefers-reduced-motion: reduce) {
  .assistant-launcher, .assistant-launcher * { animation: none !important; transition: none; }
  .assistant-launcher:hover, .assistant-launcher:active, .assistant-launcher:hover .assistant-launcher-orb { transform: none; }
}

/* ---------- 任务中心：上传任务、离线下载、本机缓存三个页面共用 ---------- */
.nav-count.is-live { background: var(--accent-soft); color: var(--accent-ink); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); animation: nav-live 2s ease-out infinite; }
@keyframes nav-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
.task-page > .tabs { margin-bottom: 16px; }
.task-page > .inline-note, .task-page > .form-alert { margin-bottom: 16px; }
.task-stats { margin-bottom: 16px; }
/* 列数等于卡片数，三张卡片时也铺满整行；四张及以上在中等宽度改为两列。 */
.task-stats-grid { display: grid; grid-template-columns: repeat(var(--stat-count, 4), minmax(0, 1fr)); gap: 12px; }
.task-stat { position: relative; display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 16px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: inherit; font: inherit; text-align: left;
  box-shadow: var(--shadow-sm); transition: border-color var(--duration-fast), background-color var(--duration-fast), transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base); }
button.task-stat { cursor: pointer; }
button.task-stat:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.task-stat.is-selected { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); }
.task-stat.is-danger.is-selected { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: color-mix(in srgb, var(--danger-soft) 60%, var(--surface)); }
.task-stat-icon { display: grid; flex: none; width: 36px; height: 36px; place-items: center; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink-3); }
.task-stat-icon.is-accent { background: var(--accent-soft); color: var(--accent-ink); }
.task-stat-icon.is-success { background: var(--success-soft); color: var(--success); }
.task-stat-icon.is-danger { background: var(--danger-soft); color: var(--danger); }
.task-stat-icon.is-warning { background: var(--warning-soft); color: var(--warning); }
.task-stat.is-warning.is-selected { border-color: color-mix(in srgb, var(--warning) 45%, var(--line)); background: color-mix(in srgb, var(--warning-soft) 60%, var(--surface)); }
/* 私密空间的缓存：锁形角标、暖色「私密」标签与左侧暖色细条，和普通文件一眼区分。 */
.cached-tile { position: relative; display: inline-flex; flex: none; }
.cached-tile-lock { position: absolute; right: -4px; bottom: -3px; display: grid; width: 16px; height: 16px; place-items: center; border: 2px solid var(--surface); border-radius: 50%; background: var(--warning); color: var(--on-accent); }
.cached-private-tag { display: inline-flex; flex: none; align-items: center; gap: 4px; padding: 0 8px; border-radius: var(--radius-xs); background: var(--warning-soft); color: var(--warning); font-size: var(--text-micro); font-weight: 500; line-height: 18px; }
.task-table .task-item.is-private { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--warning) 70%, transparent); background: color-mix(in srgb, var(--warning-soft) 28%, transparent); }
.task-table .task-item.is-private:hover { background: color-mix(in srgb, var(--warning-soft) 45%, var(--surface-hover)); }
.task-item.is-private .task-location > svg { color: var(--warning); }
.cached-private-notice .notice-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; width: 100%; }
.task-page > .cached-private-notice, .task-page .cached-private-notice { margin-bottom: 12px; }
.task-stat-icon.is-live { animation: task-live 1.8s ease-in-out infinite; }
@keyframes task-live { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent); } }
.task-stat-copy { display: grid; min-width: 0; gap: 2px; }
.task-stat-label { color: var(--ink-3); font-size: var(--text-xs); }
.task-stat-value { overflow: hidden; color: var(--ink); font-size: var(--text-xl); font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.task-stat.is-danger .task-stat-value { color: var(--danger); }
.task-stat-detail { overflow: hidden; color: var(--ink-3); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.task-stats-progress { position: relative; height: 3px; margin-top: 12px; overflow: hidden; border-radius: var(--radius-pill); background: var(--line-soft); }
.task-stats-progress > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--surface))); transition: width var(--duration-slow) var(--ease-out); }
.task-stats-progress.is-indeterminate > span { width: 30%; animation: task-sweep 1.4s ease-in-out infinite alternate; }
@media (hover: hover) and (pointer: fine) {
  button.task-stat:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); transform: translateY(-1px); box-shadow: var(--shadow-md); }
}
.task-search { flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; }
.task-search .search-input { width: min(100%, 520px); }
.task-name { display: flex; min-width: 0; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-name > svg { flex: none; color: var(--public, var(--accent)); }
.task-lock-tile { display: grid; flex: none; width: 32px; height: 36px; place-items: center; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink-3); }
.task-progress.is-stopped > small { white-space: normal; }
.task-item.is-done .task-figure { color: var(--ink); }
.task-item.is-canceled, .task-item.is-paused { color: var(--ink-2); }
.task-page .task-folder-notices { display: grid; gap: 8px; margin-bottom: 16px; }
.task-folder-notice { align-items: flex-start; padding: 8px 12px; }
.task-folder-notice > svg { margin-top: 4px; }
.task-folder-notice .notice-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.task-folder-notice-main { min-width: 0; font-size: var(--text-xs); }
.task-folder-notice p { margin: 2px 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.task-folder-notice .task-folder-notice-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-folder-notice-actions { display: flex; align-self: center; gap: 4px; }
@media (max-width: 1080px) { .task-stats-grid.is-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .task-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .task-stats-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .task-stat { gap: 8px; padding: 12px; }
  .task-stat-icon { width: 30px; height: 30px; }
  .task-stat-value { font-size: var(--text-lg); }
  .task-search .search-input { width: 100%; }
  .task-name { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-count.is-live, .task-stat-icon.is-live, .task-stats-progress.is-indeterminate > span { animation: none; }
  button.task-stat:hover { transform: none; }
}

/* ---------- 更新缩略图 ---------- */
.thumbnail-editor-body { display: grid; gap: 16px; }
.thumbnail-stage { position: relative; display: grid; aspect-ratio: 16 / 10; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background-color: var(--surface-sunken); background-image: linear-gradient(45deg, var(--line-soft) 25%, transparent 25%, transparent 75%, var(--line-soft) 75%), linear-gradient(45deg, var(--line-soft) 25%, transparent 25%, transparent 75%, var(--line-soft) 75%);
  background-position: 0 0, 8px 8px; background-size: 16px 16px; transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.thumbnail-stage.is-dragging { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
/* 绝对定位铺满：网格行会按图片原始高度撑开，大图因此溢出预览框。 */
.thumbnail-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: thumbnail-fade var(--duration-base) var(--ease-out); }
.thumbnail-stage-tag { position: absolute; left: 10px; bottom: 10px; padding: 4px 8px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent) 88%, black); color: var(--on-accent); font-size: var(--text-micro); font-variant-numeric: tabular-nums; }
.thumbnail-stage-tag.is-current { background: var(--shade-64); }
.thumbnail-stage-empty { display: grid; justify-items: center; gap: 8px; color: var(--ink-3); font-size: var(--text-sm); }
.thumbnail-drop { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 16px; border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: var(--radius-lg); background: var(--surface); color: var(--accent-ink); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--duration-fast), border-color var(--duration-fast); }
.thumbnail-drop > span { display: grid; gap: 2px; }
.thumbnail-drop strong { color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.thumbnail-drop small { color: var(--ink-3); font-size: var(--text-xs); }
.thumbnail-drop:hover, .thumbnail-drop.is-dragging { border-color: var(--accent); background: var(--accent-soft); }
.thumbnail-drop:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.thumbnail-url { display: flex; gap: 8px; }
.thumbnail-url > .input { flex: 1; min-width: 0; }
.thumbnail-auto { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); color: var(--ink-2); }
.thumbnail-auto > svg, .thumbnail-auto > .spinner { flex: none; margin-top: 1px; color: var(--accent); }
.thumbnail-auto.is-failed > svg { color: var(--danger); }
.thumbnail-auto > span { display: grid; gap: 4px; min-width: 0; }
.thumbnail-auto strong { color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.thumbnail-auto small { color: var(--ink-3); font-size: var(--text-xs); line-height: 1.6; overflow-wrap: anywhere; }
.thumbnail-auto-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.thumbnail-editor-hint { margin: 0; color: var(--ink-3); font-size: var(--text-xs); line-height: 1.6; }
@keyframes thumbnail-fade { from { opacity: 0; transform: scale(.98); } }
@media (prefers-reduced-motion: reduce) { .thumbnail-stage > img { animation: none; } }
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .assistant-drawer, .assistant-drawer.is-open { transform: none; transition: none; } }