/* VideoNote 站点全局样式：左侧固定导航 + 右侧内容区
 * 配色统一走语义化 CSS 变量（见 :root / [data-theme="dark"]），
 * 页面内联样式与 JS 生成的 SVG 也必须引用这些变量，禁止再写死颜色。
 * 断点约定：1100px = 详情页转上下布局；900px = 平板（表单/网格降列）；
 *           768px = 移动端（侧边栏转抽屉 + 顶部导航条）。
 */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* 品牌色 */
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --primary-soft: #eff6ff;          /* 主色浅底：选中态/信息底 */
  --primary-soft-2: #e8efff;
  --primary-soft-border: #bfdbfe;
  /* 布局 */
  --sidebar-w: 230px;
  /* 背景与表面 */
  --bg: #f7f8fa;
  --content-bg: #f7f8fa;            /* 兼容旧引用 */
  --surface: #fff;                  /* 卡片/输入/侧边栏底色 */
  --surface-2: #f9fafb;             /* 次级面板底（代码块外的浅底、表格头） */
  --surface-3: #f3f4f6;             /* 悬停底 / 次级按钮底 */
  --inverse-bg: #111827;            /* 反色块（登录按钮） */
  --inverse-fg: #fff;
  /* 文本 */
  --text: #1f2937;
  --text-2: #6b7280;
  --text-3: #9ca3af;
  /* 描边 */
  --border: #e5e7eb;
  --border-strong: #d1d5db;
  /* 状态色 */
  --success-bg: #f0fdf4; --success-fg: #16a34a;
  --danger-bg: #fef2f2;  --danger-fg: #dc2626;
  --info-bg: #eff6ff;    --info-fg: #1d4ed8;
  --warning-bg: #fefce8; --warning-fg: #a16207;
  /* 代码 */
  --code-bg: #1e1e2e; --code-fg: #cdd6f4;
  --code-inline-bg: #f3f4f6; --code-inline-fg: #be123c;
  /* 其它 */
  --hover-bg: #f3f4f6;
  --row-hover: #f3f6fb;             /* 列表行悬停（偏蓝） */
  --mark-bg: #fef08a;               /* 搜索命中高亮 */
  --tip-bg: rgba(255,255,255,.94);  /* 浮动提示底 */
  --overlay: rgba(0,0,0,.4);
  --overlay-strong: rgba(0,0,0,.85);
  --shadow-color: rgba(0,0,0,.12);
  color-scheme: light;
}

/* 夜间模式：整体反相，保持品牌色略提亮以维持对比度 */
[data-theme="dark"] {
  --primary: #60a5fa;
  --primary-dark: #3b82f6;
  --primary-soft: #1b2942;
  --primary-soft-2: #1f2f4d;
  --primary-soft-border: #2f4a78;
  --bg: #0e1318;
  --content-bg: #0e1318;
  --surface: #161c23;
  --surface-2: #12171d;
  --surface-3: #232c36;
  --inverse-bg: #e6eaf0;
  --inverse-fg: #12171d;
  --text: #e6eaf0;
  --text-2: #9aa5b1;
  --text-3: #6b7683;
  --border: #2a333f;
  --border-strong: #3a4553;
  --success-bg: #10281b; --success-fg: #4ade80;
  --danger-bg: #2a1417;  --danger-fg: #f87171;
  --info-bg: #13233d;    --info-fg: #7cb3ff;
  --warning-bg: #2b2410; --warning-fg: #fbbf24;
  --code-bg: #10141a; --code-fg: #cdd6f4;
  --code-inline-bg: #232c36; --code-inline-fg: #fca5a5;
  --hover-bg: #232c36;
  --row-hover: #1b242e;
  --mark-bg: #6b5410;
  --tip-bg: rgba(22,28,35,.94);
  --overlay: rgba(0,0,0,.6);
  --overlay-strong: rgba(0,0,0,.9);
  --shadow-color: rgba(0,0,0,.5);
  color-scheme: dark;
}

body { font-family: "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--primary); text-decoration: none; }

/* 键盘可达性：统一焦点环（鼠标点击不出现，仅键盘导航时显示） */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px;
}

/* ---------- 侧边栏 ---------- */
.sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); background: var(--surface);
  border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 50; }
.sidebar .logo { display: flex; align-items: center; gap: 8px; padding: 18px 20px; font-size: 19px; font-weight: 700; color: var(--text); }
.sidebar .logo .logo-icon { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, #3b82f6, #06b6d4);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; }
.nav { flex: 1; padding: 6px 10px; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px;
  font-size: 14px; color: var(--text-2); margin-bottom: 2px; }
.nav-item .ni { width: 18px; text-align: center; }
.nav-item:hover { background: var(--surface-3); color: var(--text); }
.nav-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.sidebar-foot { padding: 12px 10px; border-top: 1px solid var(--border); }
.signin-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border-radius: 8px;
  background: var(--inverse-bg); color: var(--inverse-fg); font-size: 14px; border: none; cursor: pointer; }
.user-box { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.user-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.user-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-email { font-size: 11px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout-btn { margin-left: auto; border: none; background: none; color: var(--text-2); cursor: pointer; font-size: 12px; padding: 4px; }
.logout-btn:hover { color: var(--danger-fg); }
/* 侧边栏底部：主题切换（浅色/深色/跟随系统 三态循环） */
.theme-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin-top: 8px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: none; color: var(--text-2); font-size: 13px; font-family: inherit; cursor: pointer; }
.theme-toggle:hover { background: var(--surface-3); color: var(--text); }
.theme-toggle .tt-ico { width: 18px; text-align: center; }

/* ---------- 内容区 ---------- */
.main { margin-left: var(--sidebar-w); min-height: 100vh; padding: 32px 36px 60px; }
.page-head { max-width: 860px; margin: 0 auto 24px; text-align: center; }
.page-head h1 { font-size: 26px; font-weight: 700; }
.page-head .sub { font-size: 14px; color: var(--text-2); margin-top: 6px; }
.card { background: var(--surface); border-radius: 12px; padding: 24px; border: 1px solid var(--border); margin-bottom: 16px; }
/* 内容区直接子级卡片居中，与首页 hero 布局保持一致 */
.main > .card { margin-left: auto; margin-right: auto; }
/* 居中内容容器：用于结果区、列表区等非卡片块 */
.content-wrap { max-width: 860px; margin-left: auto; margin-right: auto; }
.card h3 { font-size: 16px; margin-bottom: 8px; }
.meta { font-size: 12px; color: var(--text-3); margin-top: 6px; }

/* Hero */
.hero { max-width: 860px; margin: 40px auto 0; text-align: center; }
.hero h1 { font-size: 40px; font-weight: 800; letter-spacing: -0.5px; }
.hero h1 .hl { color: var(--primary); }
.hero .slogan { font-size: 16px; color: var(--text-2); margin: 14px 0 30px; }
.hero-input { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 8px 8px 8px 20px;
  display: flex; gap: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.05); }
.hero-input input { flex: 1; border: none; outline: none; font-size: 15px; padding: 10px 0;
  background: transparent; color: var(--text); }
.hero-input button { padding: 10px 22px; border-radius: 10px; border: none; background: var(--primary); color: #fff;
  font-size: 15px; cursor: pointer; white-space: nowrap; }
.hero-input button:hover { background: var(--primary-dark); }
.chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; font-size: 13px; color: var(--text); }
.chip:hover { border-color: var(--primary); color: var(--primary); }

/* 站点链接卡片（首页 chips 下方，/api/config/site-links 驱动，NoteGPT 风格） */
.site-links { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 18px; }
.slc-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.site-link-card {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  font-size: 13px; font-weight: 500; color: var(--text-2); text-decoration: none;
  transition: all .15s;
}
.site-link-card:hover { border-color: var(--border-strong); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.06); transform: translateY(-1px); }
.slc-icon { font-size: 18px; line-height: 1; }
.slc-ext { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.slc-stars { color: #f59e0b; font-size: 11px; letter-spacing: 2px; line-height: 1; }

/* 插件下载横幅：主色描边 + 蓝色徽章 + 价值说明 + 强 CTA
   —— 目的是让用户一眼看出「装了插件能干什么」，而不是只看到一个下载链接 */
.slc-banner {
  display: flex; align-items: center; gap: 14px;
  width: 100%; max-width: 600px; padding: 14px 16px;
  background: linear-gradient(135deg, var(--primary-soft) 0%, var(--surface) 62%);
  border: 1px solid var(--primary); border-radius: 16px;
  text-decoration: none; color: var(--text);
  box-shadow: 0 4px 16px rgba(59,130,246,.14);
  transition: box-shadow .22s, transform .22s, border-color .22s;
}
.slc-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(59,130,246,.26);
  border-color: var(--primary-dark);
}
.slc-badge {
  flex: none; width: 44px; height: 44px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; box-shadow: 0 4px 12px rgba(59,130,246,.38);
}
.slc-badge svg { width: 22px; height: 22px; }
.slc-banner-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.slc-banner-title {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.35;
}
.slc-ver {
  font-style: normal; font-size: 11px; font-weight: 600; padding: 1px 7px;
  border-radius: 999px; color: var(--primary-dark); background: var(--primary-soft);
  border: 1px solid rgba(59,130,246,.28); letter-spacing: .2px;
}
.slc-banner-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
/* 安装提示行：告诉用户「这是 Chrome 插件 + 怎么装」，避免下到 zip 后不知道下一步 */
.slc-banner-install { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.slc-chrome-tag {
  flex: none; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  color: #1a73e8; background: rgba(26,115,232,.1); border: 1px solid rgba(26,115,232,.3);
  letter-spacing: .3px; text-transform: uppercase;
}
.slc-install-tip { font-size: 12px; color: var(--text-3); line-height: 1.5; }
.slc-install-tip code {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 11px; padding: 1px 6px; border-radius: 5px;
  background: var(--surface-2, rgba(0,0,0,.05)); color: var(--text);
  border: 1px solid var(--border);
}
.slc-banner-cta {
  flex: none; padding: 9px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 4px 12px rgba(59,130,246,.34);
  transition: box-shadow .2s;
}
.slc-banner:hover .slc-banner-cta { box-shadow: 0 6px 16px rgba(59,130,246,.48); }
@media (max-width: 560px) {
  .slc-banner { gap: 11px; padding: 12px; border-radius: 14px; }
  .slc-badge { width: 38px; height: 38px; border-radius: 11px; }
  .slc-badge svg { width: 19px; height: 19px; }
  .slc-banner-title { font-size: 13.5px; }
  .slc-banner-desc { font-size: 11.5px; }
  .slc-chrome-tag { font-size: 10px; padding: 2px 7px; }
  .slc-install-tip { font-size: 11px; }
  .slc-install-tip code { font-size: 10.5px; padding: 1px 5px; }
  .slc-banner-cta { padding: 8px 13px; font-size: 12px; }
}
.features { max-width: 860px; margin: 56px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.feature { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.feature .fi { font-size: 22px; }
.feature h3 { font-size: 15px; margin: 10px 0 6px; }
.feature p { font-size: 13px; color: var(--text-2); line-height: 1.6; }

/* 表单与控件 */
input[type=text], input[type=email], input[type=password] { width: 100%; padding: 11px 14px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 14px; outline: none; background: var(--surface); color: var(--text); }
input:focus { border-color: var(--primary); }
select { padding: 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px;
  background: var(--surface); color: var(--text); }
button { padding: 10px 20px; border-radius: 8px; border: none; font-size: 14px; cursor: pointer; background: var(--primary); color: #fff; }
button:hover { background: var(--primary-dark); }
button:disabled { background: var(--text-3); cursor: not-allowed; }
button.secondary { background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border); }
button.secondary:hover { background: var(--border); }
.row { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.status { font-size: 14px; margin-top: 14px; padding: 10px 14px; border-radius: 8px; }
.status.info { background: var(--info-bg); color: var(--info-fg); }
.status.error { background: var(--danger-bg); color: var(--danger-fg); }
.status.success { background: var(--success-bg); color: var(--success-fg); }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border-strong);
  border-top-color: var(--primary); border-radius: 50%; animation: spin .6s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
/* 加载 / 空态提示：各页面统一用这两个类，避免各自写死颜色 */
.loading-line { color: var(--text-2); font-size: 13.5px; padding: 8px 0; }
.empty-line { color: var(--text-3); font-size: 13.5px; padding: 12px 0; text-align: center; }

/* 结果展示 */
pre.subtitle-text { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px;
  padding: 16px; font-size: 13px; white-space: pre-wrap; word-break: break-all; max-height: 460px; overflow: auto; margin-top: 12px; }
.md-block { font-size: 14px; line-height: 1.9; margin-top: 12px; }
.md-block h1, .md-block h2, .md-block h3, .md-block h4 { margin: 14px 0 8px; }
.md-block h5, .md-block h6 { margin: 12px 0 6px; font-size: 14px; color: var(--text); }
.md-block pre { background: var(--code-bg); color: var(--code-fg); padding: 12px; border-radius: 8px; font-size: 13px; overflow: auto; }
.md-block ul { margin-left: 20px; }
.md-block img { max-width: 100%; max-height: 420px; border-radius: 8px; margin: 8px 0; cursor: zoom-in; }
/* 内嵌视频（图片语法指向视频文件时的渲染结果） */
.md-block video { max-width: 100%; max-height: 420px; border-radius: 8px; margin: 8px 0;
  display: block; background: #000; }
/* B 站 / YouTube 页面地址的内嵌播放器：16:9 自适应 */
.md-video-embed { position: relative; width: 100%; padding-top: 56.25%; margin: 8px 0;
  border-radius: 8px; overflow: hidden; background: #000; }
.md-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.md-block a { color: var(--primary); text-decoration: underline; }
/* 行内代码（pre 内的 code 不套该样式） */
.md-block code { background: var(--code-inline-bg); color: var(--code-inline-fg); padding: 1px 5px; border-radius: 4px;
  font-size: 12.5px; font-family: Consolas, Monaco, monospace; }
.md-block pre code { background: transparent; color: inherit; padding: 0; font-size: inherit; }
.md-block blockquote { margin: 8px 0; padding: 6px 12px; border-left: 3px solid var(--primary);
  background: var(--surface-2); color: var(--text-2); border-radius: 0 6px 6px 0; }
.md-block hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.md-block del { color: var(--text-3); }
.md-block table { border-collapse: collapse; margin: 10px 0; font-size: 13px; width: 100%; }
.md-block th, .md-block td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.md-block th { background: var(--surface-2); }
/* 代码块：语言标签（高亮配色由 atom-one-dark 主题提供） */
.md-block .code-block { position: relative; margin: 10px 0; }
.md-block .code-block pre { margin: 0; }
.md-block .code-lang { position: absolute; top: 6px; right: 10px; font-size: 11px; color: #7dd3fc;
  user-select: none; font-family: Consolas, Monaco, monospace; z-index: 1; }

/* 聊天气泡内图片同样限高 + 可点击放大 */
.chat-msg img { max-width: 100%; max-height: 320px; border-radius: 8px; margin: 6px 0; cursor: zoom-in; }

/* 图片灯箱：点击 .md-block/.chat-msg 内图片全屏放大，点空白或 Esc 关闭，多图支持前后切换 */
.img-lightbox { position: fixed; inset: 0; background: var(--overlay-strong); display: none;
  align-items: center; justify-content: center; z-index: 500; cursor: zoom-out; }
.img-lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,.5); cursor: default; }
.img-lightbox .ilb-nav { position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.15); color: #fff; font-size: 26px; line-height: 1; }
.img-lightbox .ilb-nav:hover { background: rgba(255,255,255,.3); }
.img-lightbox .ilb-prev { left: 20px; }
.img-lightbox .ilb-next { right: 20px; }
.img-lightbox .ilb-counter { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.85); font-size: 13px; background: rgba(0,0,0,.4);
  padding: 3px 12px; border-radius: 12px; user-select: none; }

/* Markdown 编辑器（笔记详情页编辑态） */
.md-editor { margin-top: 10px; }
.md-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px 8px 0 0; }
.md-tb { padding: 4px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); cursor: pointer; }
.md-tb:hover { background: var(--primary-soft); border-color: var(--primary-soft-border); color: var(--primary); }
.md-tb:disabled { background: var(--surface-3); color: var(--text-3); cursor: not-allowed; }
.md-tb-sep { width: 1px; height: 18px; background: var(--border); margin: 0 2px; flex-shrink: 0; }
.md-tb-status { font-size: 12px; color: var(--text-2); margin-left: auto; }
/* 代码语言自动补全下拉框（挂在 body 下，按光标页面坐标定位） */
.md-lang-suggest { position: absolute; z-index: 300; min-width: 190px; max-height: 240px; overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px var(--shadow-color); padding: 4px; }
.mls-item { padding: 6px 10px; font-size: 13px; border-radius: 6px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: Consolas, Monaco, monospace; }
.mls-item:hover { background: var(--surface-3); }
.mls-item.active { background: var(--primary-soft); color: var(--primary); }
.mls-alias { color: var(--text-3); font-size: 12px; font-family: inherit; }
.md-editor-body { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border);
  border-top: none; border-radius: 0 0 8px 8px; overflow: hidden; }
.md-editor-body textarea { min-height: 460px; padding: 12px; border: none; outline: none; resize: vertical;
  font-size: 14px; line-height: 1.7; font-family: inherit; border-right: 1px solid var(--border);
  background: var(--surface); color: var(--text); }
.md-preview { min-height: 460px; max-height: 70vh; overflow: auto; padding: 12px; margin-top: 0; background: var(--surface); }
@media (max-width: 900px) { .md-editor-body { grid-template-columns: 1fr; } .md-preview { display: none; } }
.dl-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.dl-btn { padding: 6px 12px; font-size: 12px; border-radius: 6px; background: var(--primary-soft); color: var(--primary);
  border: 1px solid var(--primary-soft-border); cursor: pointer; }
.dl-btn:hover { background: var(--primary-soft-border); }
.dl-btn:disabled { background: var(--surface-3); color: var(--text-3); cursor: not-allowed; }
.divider { border-top: 1px dashed var(--border); margin: 14px 0; }

/* 弹窗 */
.modal-overlay { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal { background: var(--surface); border-radius: 12px; padding: 28px; max-width: 460px; width: 90%; }
.modal h3 { font-size: 17px; margin-bottom: 12px; }
.modal p { font-size: 14px; color: var(--text-2); margin-bottom: 20px; line-height: 1.6; }
.modal .actions { display: flex; gap: 12px; justify-content: flex-end; }

/* 分享弹窗（公开链接 + 指定成员，均只读）；note_detail / history 共用 */
.share-sec { border-top: 1px solid var(--border); padding-top: 12px; }
.share-sec:first-of-type { border-top: none; padding-top: 0; }
.share-switch-row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; cursor: pointer; }
.share-link-row { display: flex; gap: 8px; }
.share-link-row input { flex: 1; min-width: 0; font-size: 13px; padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-2); color: var(--text-1); }
/* 全局 button 规则是主色底+白字，这里必须显式改回浅色底+深色字，否则按钮文字不可见 */
.share-link-row button { font-size: 13px; padding: 6px 14px; border-radius: 8px; cursor: pointer; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-1); white-space: nowrap; }
.share-link-row button:hover { background: var(--surface-3); color: var(--text-1); }
.share-hint { color: var(--text-3); font-size: 12px; margin-top: 6px; line-height: 1.5; }
.link-btn { background: none; border: none; color: var(--primary); cursor: pointer; font-size: 12px; padding: 4px 0; text-decoration: underline; }
.link-btn:hover { background: none; color: var(--primary-dark); }
.link-btn.danger { color: var(--danger-fg); }
.share-member-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; margin-top: 6px; font-size: 13px; }
.share-member-item .sm-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* PPT 模板 */
.tpl-grid { display: flex; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.tpl-card { width: 200px; border: 2px solid var(--border); border-radius: 10px; padding: 10px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s; background: var(--surface); }
.tpl-card:hover { border-color: var(--primary-soft-border); }
.tpl-card.active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.tpl-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); display: block; background: var(--surface-2); }
.tpl-card .tpl-name { font-size: 14px; font-weight: 600; margin-top: 8px; }
.tpl-card .tpl-desc { font-size: 12px; color: var(--text-2); margin-top: 2px; line-height: 1.4; }

/* 聊天 */
.chat-box { display: flex; flex-direction: column; height: 460px; border: 1px solid var(--border);
  border-radius: 8px; margin-top: 12px; background: var(--surface-2); overflow: hidden; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
/* 聊天行：AI 头像在左，用户头像在右 */
.chat-row { display: flex; align-items: flex-start; gap: 8px; }
.chat-row.me { justify-content: flex-end; }
.chat-avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex;
  align-items: center; justify-content: center; font-size: 14px; user-select: none; }
.chat-avatar.ai { background: var(--primary-soft); }
.chat-avatar.me { background: var(--primary); color: #fff; font-size: 12px; font-weight: 600; }
.chat-msg { max-width: 82%; padding: 10px 14px; border-radius: 10px; font-size: 14px; line-height: 1.7;
  word-break: break-word; }
.chat-msg.user { background: var(--primary); color: #fff; border-bottom-right-radius: 2px; }
.chat-msg.ai { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 2px; }
.chat-msg.ai p { margin: 0 0 8px; } .chat-msg.ai p:last-child { margin-bottom: 0; }
.chat-msg.ai pre { background: var(--surface-2); padding: 8px; border-radius: 6px; overflow-x: auto; font-size: 12.5px; }
.chat-msg.ai code { background: var(--surface-2); padding: 1px 4px; border-radius: 4px; font-size: 12.5px; }
.chat-msg.ai pre code { background: none; padding: 0; }
.chat-msg.ai ul, .chat-msg.ai ol { margin: 4px 0; padding-left: 20px; }
.chat-input-row { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); background: var(--surface); }
.chat-input-row input { flex: 1; }

/* 选项卡 */
.tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs button { background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border); }
.tabs button.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* 历史列表 */
.task-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; }
.task-item .ti-icon { font-size: 20px; }
.task-item .ti-body { flex: 1; min-width: 0; }
.task-item .ti-title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-item .ti-meta { font-size: 12px; color: var(--text-2); margin-top: 3px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; }
.badge.success { background: var(--success-bg); color: var(--success-fg); }
.badge.failed { background: var(--danger-bg); color: var(--danger-fg); }
.badge.running { background: var(--info-bg); color: var(--info-fg); }
.badge.expired { background: var(--surface-3); color: var(--text-2); }

/* 认证页 */
.auth-wrap { max-width: 400px; margin: 60px auto; }
.auth-wrap .card { padding: 32px; }
.auth-wrap h1 { font-size: 22px; text-align: center; margin-bottom: 6px; }
.auth-wrap .sub2 { font-size: 13px; color: var(--text-2); text-align: center; margin-bottom: 24px; }
.form-item { margin-bottom: 14px; }
.form-item label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
/* 密码输入框 + 显示/隐藏按钮 */
.pwd-wrap { position: relative; }
.pwd-wrap input { padding-right: 44px; }
.pwd-toggle { position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  padding: 0; background: transparent; border: none; border-radius: 50%; cursor: pointer;
  color: var(--text-3); line-height: 1; transition: color .15s, background-color .15s; }
.pwd-toggle:hover { background: var(--surface-3); color: var(--text-2); }
.pwd-toggle svg { display: block; }
.auth-switch { text-align: center; font-size: 13px; color: var(--text-2); margin-top: 16px; }
.auth-divider { display: flex; align-items: center; text-align: center; margin: 18px 0; color: var(--text-3); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--border); }
.auth-divider span { padding: 0 12px; }
.oauth-buttons { display: flex; flex-direction: column; gap: 8px; }
#google-btn { display: flex; justify-content: center; }
.btn-wechat { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px; border: 1px solid #07c160; border-radius: 8px; background: #07c160; color: #fff;
  font-size: 14px; cursor: pointer; transition: background .15s; }
.btn-wechat:hover { background: #06ad56; }

/* 页脚（SEO 文本） */
.site-footer { max-width: 860px; margin: 60px auto 0; padding-top: 24px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-3); line-height: 2; }

/* ---------- 运营看板（admin.html，仅管理员） ---------- */
.admin-wrap { max-width: 1080px; margin-left: auto; margin-right: auto; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.stat-card .l { font-size: 13px; color: var(--text-2); }
.stat-card .v { font-size: 22px; font-weight: 700; color: var(--text); margin-top: 3px; }
.stat-card .s { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chart-grid .card { margin-bottom: 0; }
/* ---------- 运营看板：分类标签页 ---------- */
.admin-tabs { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.admin-tab { border: none; background: none; padding: 9px 16px; font-size: 14px; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; }
.admin-tab:hover { color: var(--text); }
.admin-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.admin-panel > .admin-section-title:first-child { margin-top: 0; }
.admin-section-title { font-size: 17px; margin: 24px 0 10px; }
.chart-box svg { width: 100%; height: auto; display: block; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th, .admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.admin-table th { color: var(--text-2); font-weight: 600; }
.admin-table tr:last-child td { border-bottom: none; }
.ratio-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--surface-3); margin: 10px 0 8px; }
.ratio-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--text-2); }
.ratio-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }
.feature-hl { font-size: 14px; margin-bottom: 12px; color: var(--text-2); }

/* ---------- 运营看板：字幕来源（饼图 + 明细） ---------- */
.subtitle-src-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.subtitle-src-head h3 { margin: 0; }
.subtitle-pie-layout { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.subtitle-pie-box { flex: 0 1 340px; max-width: 340px; }
.subtitle-detail { flex: 1 1 360px; min-width: 260px; }
.subtitle-detail-head { font-size: 13px; color: var(--text-2); margin-bottom: 6px; }

@media (max-width: 900px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .chart-grid { grid-template-columns: 1fr; }
}

/* ---------- 我的笔记：分类侧栏 + 多列卡片网格（NoteGPT 式） ---------- */
.notes-content { max-width: 1100px !important; }  /* 限制笔记区宽度，整体居中展示，不铺满全屏 */
.notes-layout { display: flex; gap: 18px; align-items: flex-start; }
.notes-cats { width: 180px; flex-shrink: 0; position: sticky; top: 16px; }
.new-cat-btn { width: 100%; padding: 7px 10px; border: 1px dashed var(--border); background: none;
  border-radius: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; margin-bottom: 10px; }
.new-cat-btn:hover { border-color: var(--primary); color: var(--primary); }
.cat-item { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px;
  font-size: 13px; cursor: pointer; color: var(--text); margin-bottom: 1px; }
.cat-item:hover { background: var(--surface-3); }
.cat-item.active { background: var(--primary-soft-2); color: var(--primary-dark); font-weight: 600; }
.cat-item .cat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-item .cnt { margin-left: auto; color: var(--text-3); font-size: 12px; font-weight: 400; }
.cat-item .cat-side { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.cat-item .cat-side .cnt { margin-left: 0; }
.cat-del { visibility: hidden; width: 18px; height: 18px; line-height: 16px; padding: 0; border: none;
  border-radius: 50%; background: var(--surface-3); color: var(--text-2); font-size: 13px; cursor: pointer; flex-shrink: 0; }
.cat-item:hover .cat-del { visibility: visible; }
.cat-del:hover { background: var(--danger-bg); color: var(--danger-fg); }

.notes-main { flex: 1; min-width: 0; }
.notes-toolbar { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.notes-toolbar input[type="search"] { flex: 1; min-width: 160px; max-width: 260px; padding: 7px 12px;
  border: 1px solid var(--border); border-radius: 8px; font-size: 13px; outline: none; background: var(--surface); color: var(--text); }
.notes-toolbar input[type="search"]:focus { border-color: var(--primary); }

/* 搜索输入框清除按钮（统一：history / square / admin） */
.search-wrap { position: relative; display: inline-flex; flex: 1; min-width: 160px; max-width: 260px; }
.search-wrap input[type="search"] { flex: 1; }
.search-wrap .clear-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border: none; border-radius: 50%;
  background: var(--surface-3); color: var(--text-3); cursor: pointer;
  display: none; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; padding: 0; opacity: .7;
}
.search-wrap .clear-btn:hover { background: var(--danger-fg); color: #fff; opacity: 1; }
.search-wrap.has-content .clear-btn { display: inline-flex; }
/* 隐藏浏览器原生 cancel 按钮，用我们自绘的 */
.search-wrap input[type="search"]::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.notes-toolbar select { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; background: var(--surface); color: var(--text); cursor: pointer; outline: none; }

/* 卡片网格：最小 210px，gap 缩小到 12px，宽屏自动铺满 4-6 列 */
.notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.note-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  cursor: pointer; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; }
.note-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.07); transform: translateY(-2px); }
.note-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--surface-3);
  display: flex; align-items: center; justify-content: center; }
.note-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plat-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.65); color: #fff;
  font-size: 10.5px; padding: 1px 7px; border-radius: 5px; }
.note-body { padding: 9px 11px 9px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.note-title { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.note-meta { font-size: 11.5px; color: var(--text-3); display: flex; justify-content: space-between; gap: 8px; margin-top: auto; }
.note-actions { display: flex; align-items: center; justify-content: space-between; position: relative; }
.note-link { font-size: 12px; color: var(--primary); text-decoration: none; }
.note-link:hover { text-decoration: underline; }
.note-more { border: none; background: none; font-size: 15px; line-height: 1; color: var(--text-2);
  cursor: pointer; padding: 2px 8px; border-radius: 6px; }
.note-more:hover { background: var(--surface-3); }
.note-menu { position: absolute; right: 0; bottom: 26px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px var(--shadow-color); padding: 4px; z-index: 30; min-width: 112px; }
.note-menu button { display: block; width: 100%; padding: 7px 10px; font-size: 13px; border-radius: 6px;
  background: none; border: none; cursor: pointer; text-align: left; color: var(--text); }
.note-menu button:hover { background: var(--surface-3); }
.note-menu button.danger { color: var(--danger-fg); }

@media (max-width: 900px) {
  .notes-layout { flex-direction: column; }
  .notes-cats { width: 100%; position: static; }
}

/* ---------- 游标分页控件 ---------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 22px; padding: 10px 0; }
.pager-btn { padding: 6px 16px; border: 1px solid var(--border); background: var(--surface);
  border-radius: 8px; font-size: 13px; cursor: pointer; color: var(--text);
  transition: background .15s, border-color .15s; }
.pager-btn:hover:not(:disabled) { background: var(--surface-3); border-color: var(--primary); }
.pager-btn:disabled { opacity: .45; cursor: not-allowed; }
.pager-info { font-size: 12.5px; color: var(--text-2); min-width: 80px; text-align: center; }

/* ---------- 详情页：左右两栏布局（NoteGPT 风格） ---------- */
.detail-layout { display: flex; gap: 24px; align-items: flex-start; }
.detail-left { width: 400px; flex-shrink: 0; position: sticky; top: 24px; }
.detail-right { flex: 1; min-width: 0; }

/* 左栏视频 iframe 容器 */
.detail-video { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden; }
.detail-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.detail-video-placeholder { width: 100%; height: 100%; background: #111; color: #d1d5db;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 13px; }
.detail-video-placeholder a { background: var(--primary); color: #fff; padding: 7px 16px; border-radius: 8px;
  text-decoration: none; font-size: 13px; }

/* 播放器容器：右上角叠加「全屏」按钮（跨域 iframe 内按钮无法外包控制，仅做站内全屏） */
.video-stage { position: relative; }
.video-stage .detail-video { display: block; }
.video-ctrl { position: absolute; top: 8px; right: 8px; z-index: 6; display: flex; gap: 6px; }
.video-ctrl .vc-btn { border: 0; cursor: pointer; font-size: 12px; line-height: 1;
  padding: 6px 10px; border-radius: 8px; color: #fff; background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px); transition: background .15s; }
.video-ctrl .vc-btn:hover { background: rgba(0,0,0,.78); }
/* 原生全屏：容器铺满屏幕、黑底，视频区域填满 */
.video-stage:fullscreen { background: #000; }
.video-stage:fullscreen .detail-video { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
/* B站跳转后提示条（跨域 iframe 无法静音自动播放，需用户在播放器内点一次播放） */
.bili-seek-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 7;
  max-width: 90%; padding: 7px 14px; border-radius: 8px; font-size: 12.5px; color: #fff;
  background: rgba(0,0,0,.72); white-space: nowrap; pointer-events: none;
  animation: bili-hint-in .2s ease-out; }
@keyframes bili-hint-in { from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); } }

.detail-title { font-size: 15px; font-weight: 700; margin-top: 12px; line-height: 1.5; }
.detail-meta { font-size: 11.5px; color: var(--text-3); margin-top: 6px; line-height: 1.7; }

/* 字幕面板：Tab + 列表 */
.subtitle-panel { margin-top: 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; }
.subtitle-panel .sp-tabs { display: flex; align-items: center; gap: 4px;
  padding: 0 8px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.subtitle-panel .sp-tab { padding: 9px 10px; border: none; background: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subtitle-panel .sp-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.subtitle-panel .sp-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.subtitle-panel .sp-right label { font-size: 12px; color: var(--text-2); cursor: pointer; display: flex;
  align-items: center; gap: 4px; user-select: none; }
.subtitle-panel .sp-right input[type="checkbox"] { margin: 0; cursor: pointer; }
.subtitle-panel .sp-right .sp-hint { font-size: 12px; color: var(--text-3); cursor: help; white-space: nowrap; }
.subtitle-panel .sp-search { padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 12px; outline: none; width: 100px; background: var(--surface); color: var(--text); }
.subtitle-panel .sp-search:focus { border-color: var(--primary); }

/* 字幕列表滚动区 */
.sub-list-wrap { max-height: 420px; overflow-y: auto; }
.sub-entry { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px;
  border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.55;
  transition: background .12s; cursor: pointer; }
.sub-entry:hover { background: var(--row-hover); }
.sub-entry.active { background: var(--primary-soft); }
.sub-entry.hidden { display: none; }
.sub-entry .ts { flex-shrink: 0; color: var(--text-2); font-weight: 600; font-size: 12px;
  cursor: pointer; padding: 1px 4px; border-radius: 4px; min-width: 52px; text-align: center; }
.sub-entry .ts:hover { background: var(--primary-soft-border); color: var(--primary-dark); }
.sub-entry .text { flex: 1; color: var(--text); }
.sub-entry .match-hit { background: var(--mark-bg); border-radius: 2px; }
.sub-entry .row-actions { flex-shrink: 0; display: none; gap: 4px; }
.sub-entry:hover .row-actions { display: flex; }
.sub-entry .row-actions button { border: none; background: none; color: var(--text-3); cursor: pointer;
  padding: 2px 4px; font-size: 13px; line-height: 1; border-radius: 4px; }
.sub-entry .row-actions button:hover { color: var(--primary); background: var(--primary-soft); }

/* Transcript 段落 */
.trans-entry { padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.trans-entry:hover { background: var(--row-hover); }
.trans-entry.active { background: var(--primary-soft); }
.trans-entry .trans-head { display: flex; align-items: center; }
.trans-entry .trans-head .row-actions { margin-left: auto; display: none; gap: 4px; }
.trans-entry:hover .trans-head .row-actions { display: flex; }
.trans-entry .row-actions button { border: none; background: none; color: var(--text-3); cursor: pointer;
  padding: 2px 4px; font-size: 13px; line-height: 1; border-radius: 4px; }
.trans-entry .row-actions button:hover { color: var(--primary); background: var(--primary-soft); }
.trans-entry .row-actions button:disabled { opacity: .5; cursor: wait; }
.trans-entry .ts { color: var(--text-2); font-size: 12px; font-weight: 600; }
.trans-entry .ts:hover { color: var(--primary); }
.trans-entry .text { font-size: 13px; line-height: 1.65; margin-top: 4px; color: var(--text); }
/* Transcript 段落译文：可选中复制，点击不触发行跳转 */
.para-translation { margin-top: 6px; padding: 8px 10px; background: var(--success-bg); border-left: 3px solid var(--success-fg);
  border-radius: 6px; font-size: 12.5px; line-height: 1.65; color: var(--success-fg); white-space: pre-wrap;
  word-break: break-word; cursor: text; }
.para-translation .pt-lang { display: inline-block; font-size: 11px; font-weight: 600; color: var(--success-fg);
  background: var(--success-bg); border-radius: 4px; padding: 1px 6px; margin-right: 6px; }

/* 条目整行可点跳转 + 复制反馈 */
.sub-entry.clickable:hover, .trans-entry.clickable:hover { background: var(--primary-soft); }
.row-actions button.flash-ok { color: var(--success-fg); font-weight: 700; }
.row-actions button.flash-err { color: var(--danger-fg); font-weight: 700; }

/* Transcript 单段翻译：语言选择弹出菜单 */
.para-lang-menu { position: fixed; z-index: 60; min-width: 130px; max-height: 260px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px var(--shadow-color); padding: 4px; }
.para-lang-menu button { display: block; width: 100%; text-align: left; padding: 6px 10px;
  border: none; background: none; font-size: 12.5px; color: var(--text); cursor: pointer;
  border-radius: 5px; }
.para-lang-menu button:hover { background: var(--primary-soft); color: var(--primary); }

/* 笔记详情页内生成结果卡片（思维导图 / AI PPT） */
.gen-card { margin-top: 14px; }
.gen-card .dl-row { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.gen-card h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; }
.gen-lang { font-size: 12px; font-weight: 500; color: var(--primary); background: var(--primary-soft); border-radius: 10px; padding: 2px 10px; }
.gen-loading { border: 1.5px dashed var(--primary-soft-border); background: var(--primary-soft); }
.dl-btn.ghost { background: var(--surface); border: 1px solid var(--border); color: var(--text-2); }
.dl-btn.ghost:hover { border-color: var(--primary); color: var(--primary); }
.xmind-editor { margin-top: 10px; }
.xmind-editor .hint { margin: 6px 0 0; font-size: 12px; color: var(--text-3); }
.xmind-editor textarea {
  width: 100%; min-height: 260px; box-sizing: border-box; font-family: var(--font-mono, Consolas, monospace);
  font-size: 12px; line-height: 1.55; border: 1px solid var(--border); border-radius: 8px;
  padding: 10px; resize: vertical; background: var(--surface-2); color: var(--text);
}
.xmind-editor textarea:focus { outline: none; border-color: var(--primary); }

/* 树形图形化大纲编辑器 */
.me-tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.me-tabs button {
  border: 1px solid var(--border); background: var(--surface); border-radius: 6px; padding: 3px 10px;
  font-size: 12px; cursor: pointer; color: var(--text-2);
}
.me-tabs button.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.me-tip { font-size: 11.5px; color: var(--text-3); margin-left: 4px; }
.me-root { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; padding: 4px 0 8px; }
.me-tree, .me-tree ul { list-style: none; margin: 0; padding-left: 16px; }
.me-tree > li { padding-left: 0; }
.me-tree ul { border-left: 1.5px dashed var(--border-strong); margin-left: 9px; }
.me-node { margin: 2px 0; }
.me-row { display: flex; align-items: center; gap: 4px; padding: 1px 0; }
.me-toggle { width: 16px; text-align: center; font-size: 10px; color: var(--text-3); cursor: pointer;
  flex: none; user-select: none; }
.me-row input {
  flex: 1; min-width: 0; border: 1px solid transparent; background: transparent; border-radius: 5px;
  padding: 3px 6px; font-size: 13px; color: var(--text);
}
.me-row input:hover { border-color: var(--border); }
.me-row input:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.me-ops { display: flex; gap: 2px; flex: none; opacity: 0; transition: opacity .12s; }
.me-row:hover .me-ops { opacity: 1; }
.me-ops button {
  border: none; background: none; cursor: pointer; font-size: 12px; padding: 2px 4px;
  border-radius: 4px; color: var(--text-2);
}
.me-ops button:hover { background: var(--primary-soft); color: var(--primary); }

/* ---------- 思维导图图形化预览（markmap） ---------- */
/* 内联预览容器：相对定位承载左下角标签与右下角工具组 */
.mm-box { position: relative; margin-top: 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); overflow: hidden; cursor: zoom-in; }
.mm-box:hover { border-color: var(--primary); }
.mm-box svg { display: block; width: 100%; height: 380px; }
/* 悬停放大镜提示徽标：居中浮现，pointer-events:none 不挡点击，工具区/标签不受影响 */
.mm-box::after { content: '🔍 点击放大查看'; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.88); padding: 9px 18px; border-radius: 999px;
  background: var(--tip-bg); border: 1px solid var(--primary); color: var(--primary);
  font-size: 13.5px; font-weight: 500; box-shadow: 0 6px 20px rgba(37,99,235,.18);
  opacity: 0; transition: opacity .15s ease, transform .15s ease; pointer-events: none; }
.mm-box:hover::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.mm-tag { position: absolute; left: 12px; bottom: 12px; background: var(--surface-3); color: var(--text-2);
  font-size: 12px; padding: 4px 14px; border-radius: 999px; pointer-events: none; }
.mm-tools { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 4px; }
.mm-tools button { width: 32px; height: 32px; border: 1px solid var(--border); background: var(--surface);
  border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1; color: var(--text-2);
  display: flex; align-items: center; justify-content: center; padding: 0; }
.mm-tools button:hover { background: var(--surface-3); color: var(--text); }

/* 全屏查看层：白底铺满视口，工具条顶部居中悬浮，关闭按钮固定右上角 */
.mm-fullscreen { position: fixed; inset: 0; background: var(--surface); z-index: 200; }
.mm-fullscreen > svg { display: block; width: 100%; height: 100%; }
.mm-fs-toolbar { position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; padding: 5px 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.10); z-index: 2; }
.mm-fs-toolbar button { min-width: 32px; height: 32px; padding: 0 8px; border: none; background: none;
  border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--text-2);
  display: flex; align-items: center; justify-content: center; gap: 4px; }
.mm-fs-toolbar button:hover { background: var(--surface-3); color: var(--text); }
.mm-fs-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.mm-fs-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px;
  border-radius: 50%; border: none; background: var(--surface-3); color: var(--text-2);
  font-size: 15px; cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center; line-height: 1; }
.mm-fs-close:hover { background: var(--border); color: var(--text); }

/* 笔记最大化：z-index 需低于语言弹层(60)/确认弹窗(100)/思维导图全屏(200)，保证上层交互可用 */
.note-max { position: fixed !important; inset: 0; z-index: 50; margin: 0 !important;
  border-radius: 0 !important; max-width: none !important; background: var(--surface); }
body.note-max-open { overflow: hidden; }
/* 查看态：整卡纵向滚动，功能条吸顶（负 margin 抵消 card padding，滚动时背景遮盖上方内容） */
.detail-right > .card.note-max { overflow-y: auto; }
.detail-right > .card.note-max .right-toolbar { position: sticky; top: -24px; z-index: 5;
  margin: -24px -24px 14px; padding: 24px 24px 10px; background: var(--surface); }
/* 编辑态：编辑器撑满视口，编辑/预览分栏各自内部滚动 */
.editor-card.note-max { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.editor-card.note-max .md-editor { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.editor-card.note-max .md-editor-body { flex: 1; min-height: 0; }
.editor-card.note-max .md-editor-body textarea,
.editor-card.note-max .md-preview { height: 100%; max-height: none; min-height: 0; resize: none; }

/* 简介视图（视频简介 Tab） */
.desc-entry { padding: 12px; font-size: 12.5px; line-height: 1.75; white-space: pre-wrap;
  word-break: break-word; color: var(--text); }
.desc-entry a { color: var(--primary); word-break: break-all; }

/* 工具栏：批量下载 */
.sp-toolbar { display: flex; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--border);
  background: var(--surface-2); }
.sp-toolbar button { padding: 5px 10px; font-size: 12px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; color: var(--text-2); }
.sp-toolbar button:hover { color: var(--primary); border-color: var(--primary); }

/* 视频简介 / 字幕原文（保留给无视频平台兜底场景） */
.detail-sources { margin-top: 14px; }
.detail-sources .src-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.detail-sources .src-tab { padding: 7px 12px; border: none; background: none; cursor: pointer; font-size: 13px;
  font-weight: 600; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.detail-sources .src-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.detail-sources pre { white-space: pre-wrap; word-break: break-word; font-size: 12.5px; line-height: 1.7;
  background: var(--surface-2); color: var(--text); padding: 12px; border-radius: 0 0 10px 10px; max-height: 360px; overflow: auto; margin: 0; }

/* 右栏功能条（NoteGPT 风格） */
.right-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 14px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px; }
.tb-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--surface);
  color: var(--text); font-size: 13px; cursor: pointer; text-decoration: none;
  transition: all .15s; }
.tb-btn:hover { color: var(--primary); border-color: var(--primary); }
.tb-btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.tb-btn.primary:hover { background: var(--primary-dark); color: #fff; }
.tb-btn.danger { color: var(--danger-fg); }
.tb-btn.danger:hover { background: var(--danger-bg); border-color: var(--danger-fg); color: var(--danger-fg); }
.tb-btn:disabled { opacity: .45; cursor: not-allowed; color: var(--text-2); }
.tb-select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 7px;
  font-size: 13px; background: var(--surface); color: var(--text); outline: none; }
.tb-select:focus { border-color: var(--primary); }
.tb-divider { width: 1px; height: 18px; background: var(--border); margin: 0 2px; }

/* 译文区 */
.translated-header { display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--text); }

@media (max-width: 1100px) {
  .detail-layout { flex-direction: column; }
  .detail-left { width: 100%; position: static; }
}

/* ---------- 侧边栏显隐切换（桌面端） ----------
 * 折叠按钮固定在侧边栏右上角；折叠后侧边栏滑出视口，
 * 视口左上角显示悬浮展开按钮。状态由 common.js 持久化到 localStorage。 */
.sidebar { transition: transform .2s ease; }
.sidebar-toggle {
  position: absolute; top: 14px; right: 10px;
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-2); font-size: 16px; line-height: 1;
  z-index: 60; padding: 0;
}
.sidebar-toggle:hover { background: var(--surface-3); color: var(--text); }

/* 折叠态：侧边栏移出视口，内容区占满宽度 */
body.sb-collapsed .sidebar { transform: translateX(-100%); }
body.sb-collapsed .main { margin-left: 0; }

/* 折叠态下的悬浮展开按钮 */
.sb-show-btn {
  position: fixed; top: 14px; left: 14px;
  width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
  display: none; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text); font-size: 18px; line-height: 1;
  box-shadow: 0 2px 8px var(--shadow-color); z-index: 60; padding: 0;
}
.sb-show-btn:hover { background: var(--surface-3); }
body.sb-collapsed .sb-show-btn { display: flex; }

/* ---------- 触屏设备：让「悬停才出现」的操作常驻显示 ----------
 * 手机/平板没有 hover，row-actions / me-ops / cat-del 的悬停显隐会导致操作不可达。 */
@media (hover: none) {
  .sub-entry .row-actions, .trans-entry .trans-head .row-actions { display: flex; }
  .me-ops { opacity: 1; }
  .cat-del { visibility: visible; }
}

/* ---------- 移动端导航（<768px）：顶部条 + 抽屉式侧边栏 ----------
 * 侧边栏在移动端转为抽屉（默认移出视口），由顶部导航条的 ☰ 打开；
 * 登录/点数/退出（#auth-area）本就在侧边栏内，随抽屉一起可用。 */
.mobile-bar { display: none; }
.sb-backdrop { display: none; }
.mb-toggle { width: 36px; height: 36px; border: 1px solid var(--border); background: var(--surface);
  border-radius: 8px; font-size: 18px; line-height: 1; color: var(--text); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; flex: none; }
.mb-brand { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--text); }
.mb-brand .logo-icon { width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, #3b82f6, #06b6d4);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; }

@media (max-width: 768px) {
  .mobile-bar { position: fixed; top: 0; left: 0; right: 0; height: 54px; z-index: 70;
    display: flex; align-items: center; gap: 10px; padding: 0 12px;
    background: var(--surface); border-bottom: 1px solid var(--border); }
  /* 侧边栏改抽屉：保留 display:flex，改为位移动画 + 提高层级盖住顶栏 */
  .sidebar { display: flex; transform: translateX(-100%); z-index: 80; box-shadow: 0 0 30px rgba(0,0,0,.25); }
  body.sb-mobile-open .sidebar { transform: translateX(0); }
  .sb-backdrop { display: block; position: fixed; inset: 0; z-index: 75; background: var(--overlay);
    opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.sb-mobile-open .sb-backdrop { opacity: 1; pointer-events: auto; }
  body.sb-mobile-open { overflow: hidden; }
  /* 折叠按钮在移动端无意义（抽屉由顶栏控制） */
  .sidebar-toggle, .sb-show-btn { display: none !important; }
  .main { margin-left: 0; padding: 70px 16px 48px; }
  .hero { margin-top: 8px; }
  .hero h1 { font-size: 28px; }
  .page-head, .content-wrap, .hero, .features, .site-footer, .auth-wrap, .notes-content { max-width: 100% !important; }
}