/* 音转本地版 · 设计令牌与通用组件
   ==========================================================================
   主题：**固定深色**（不跟随 prefers-color-scheme，不随系统切换）。
   配色逐条取自 lingpu.cn 线上 DOM：页面底 #111318 / 更深层 #0a0b10 /
   正文 #f1f0eb / 主色 #707bb9（深色态 #535e8f）/ 强调链接 #a9b4e8 /
   分隔线 white 10%；标题宋体栈，正文苹方·雅黑·思源黑。
   令牌表与组件清单见 docs/design-tokens.md。
   ========================================================================== */

:root,
html.dark:root {
  /* ---------------------------------------------------------- 底色与层次 */
  --lp-bg: #111318;
  --lp-fg: #f1f0eb;
  --lp-card: #181a20;          /* 比底色略亮，卡片才分得出来 */
  --lp-card-2: #1f2229;
  --lp-primary: #707bb9;
  --lp-primary-dark: #535e8f;  /* 只用于填充 / 悬停底色，不要拿来当文字色 */
  --lp-primary-soft: rgba(112, 123, 185, .18);
  --lp-secondary: #22252d;
  --lp-muted: #24272f;
  --lp-muted-fg: #9aa0ab;      /* 深底上次级文字：#111318 上 7.2:1 */
  --lp-border: rgba(255, 255, 255, .10);
  --lp-danger: #e05a4a;
  --lp-ok: #4caf7d;
  --lp-warn: #d9a441;

  /* ---------------------------------------------------------- 半径与阴影 */
  --lp-radius: 10px;
  --lp-radius-sm: 6px;
  --lp-shadow: 0 1px 2px rgba(0, 0, 0, .40), 0 8px 24px rgba(0, 0, 0, .40);
  --lp-shadow-lg: 0 12px 48px rgba(0, 0, 0, .55);

  /* ---------------------------------------------------------- 字体栈 */
  --lp-font: "PingFang SC", "Microsoft YaHei", "Noto Sans SC",
             "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --lp-serif: "Songti SC", "STSong", "Noto Serif SC", "SimSun", Georgia, serif;
  --lp-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --lp-header-h: 56px;

  /* --------------------------------------------- 深色新增（可选用，勿改名现有令牌）
     --lp-link / --lp-primary-text：深底上的主色文字（#111318 上 9.3:1）
     --lp-hover*：白色叠加的悬停层；--lp-*-soft / --lp-*-fg：状态色配对 */
  --lp-link: #a9b4e8;
  --lp-primary-text: #a9b4e8;
  --lp-line-strong: rgba(255, 255, 255, .16);
  --lp-hover: rgba(255, 255, 255, .06);
  --lp-hover-soft: rgba(255, 255, 255, .03);
  --lp-ok-soft: rgba(76, 175, 125, .16);
  --lp-warn-soft: rgba(217, 164, 65, .16);
  --lp-danger-soft: rgba(224, 90, 74, .16);
  --lp-ok-fg: #7fd2a3;
  --lp-warn-fg: #e8bf6e;
  --lp-danger-fg: #ff9b8d;

  /* 原生控件（滚动条、下拉、日期面板、复选框）跟着走深色 */
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--lp-bg);
  color: var(--lp-fg);
  font-family: var(--lp-font);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html { scrollbar-color: rgba(255, 255, 255, .18) transparent; }

a { color: var(--lp-link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 600; letter-spacing: -.01em; }
h1 { font-family: var(--lp-serif); font-size: 30px; font-weight: 700; }
h2 { font-family: var(--lp-serif); font-size: 22px; }
h3 { font-size: 16px; }
p { margin: 0 0 1em; }
code, pre { font-family: var(--lp-mono); font-size: 12.5px; }

/* 选中态：主色 35% 透明底 */
::selection { background: rgba(112, 123, 185, .35); color: #fff; }

/* 键盘焦点：一圈主色描边，深底上才看得见 */
:focus-visible { outline: 2px solid var(--lp-primary); outline-offset: 2px; }

/* ---------------------------------------------------------------- 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .18);
  border: 2px solid transparent; border-radius: 999px;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, .30);
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-corner { background: transparent; }

/* ---------------------------------------------------------------- 布局外壳 */
.lp-app { min-height: 100vh; display: flex; flex-direction: column; }

.lp-header {
  height: var(--lp-header-h);
  display: flex; align-items: center; gap: 18px;
  padding: 0 20px;
  background: rgba(17, 19, 24, .86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  position: sticky; top: 0; z-index: 50;
}
.lp-brand {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--lp-serif); font-size: 19px; font-weight: 700;
  color: var(--lp-fg); cursor: pointer; user-select: none;
}
.lp-brand:hover { text-decoration: none; }
.lp-brand-mark {
  width: 24px; height: 24px; border-radius: 7px;
  background: linear-gradient(135deg, var(--lp-primary-dark), var(--lp-primary));
  display: grid; place-items: center; color: #fff; font-size: 13px; font-family: var(--lp-font);
}
.lp-nav { display: flex; align-items: center; gap: 4px; flex: 1; overflow-x: auto; }
.lp-nav::-webkit-scrollbar { display: none; }
.lp-nav a {
  padding: 6px 12px; border-radius: 999px; color: var(--lp-muted-fg);
  font-size: 13.5px; white-space: nowrap; transition: .15s;
}
.lp-nav a:hover {
  background: var(--lp-hover); color: var(--lp-fg); text-decoration: none;
}
/* 选中态：主色实底 + 白字 */
.lp-nav a.active {
  background: var(--lp-primary); color: #fff; font-weight: 500;
}
.lp-nav a.active:hover { background: var(--lp-primary-dark); color: #fff; }
.lp-header-right { display: flex; align-items: center; gap: 10px; }

.lp-main { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 26px 20px 64px; }
.lp-main--wide { max-width: none; padding: 0; }

.lp-footer {
  border-top: 1px solid rgba(255, 255, 255, .08); padding: 26px 20px 40px;
  color: var(--lp-muted-fg); font-size: 12.5px; text-align: center;
}
.lp-footer a { color: var(--lp-muted-fg); }
.lp-footer a:hover { color: var(--lp-fg); }

/* ---------------------------------------------------------------- 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--lp-border); background: var(--lp-secondary); color: var(--lp-fg);
  font: inherit; font-size: 13.5px; cursor: pointer; transition: .15s; white-space: nowrap;
}
.btn:hover { background: var(--lp-muted); border-color: var(--lp-line-strong); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; transform: none;
}
.btn-primary { background: var(--lp-primary); border-color: transparent; color: #fff; }
.btn-primary:hover { background: var(--lp-primary-dark); border-color: transparent; }
/* 想要 6.2:1 的白字实底按钮，用 .btn-primary.btn-solid 或直接吃 --lp-primary-dark */
.btn-solid { background: var(--lp-primary-dark); border-color: transparent; color: #fff; }
.btn-solid:hover { background: #4a5480; }
.btn-ghost { background: transparent; border-color: var(--lp-border); }
.btn-ghost:hover { background: var(--lp-hover); border-color: var(--lp-line-strong); }
.btn-danger {
  background: var(--lp-danger-soft); border-color: rgba(224, 90, 74, .32); color: var(--lp-danger-fg);
}
.btn-danger:hover { background: rgba(224, 90, 74, .24); border-color: rgba(224, 90, 74, .48); }
.btn-sm { height: 28px; padding: 0 11px; font-size: 12.5px; }
.btn-lg { height: 44px; padding: 0 24px; font-size: 15px; }
.btn-icon { width: 34px; height: 34px; padding: 0; border-radius: 50%; }

/* ---------------------------------------------------------------- 卡片 */
.card {
  background: var(--lp-card); border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius); padding: 18px;
  box-shadow: var(--lp-shadow);
}
.card-hover { transition: .18s; cursor: pointer; }
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--lp-shadow-lg);
  border-color: var(--lp-line-strong);
}

/* ---------------------------------------------------------------- 表单 */
.input, .select, .textarea {
  width: 100%; height: 36px; padding: 0 12px;
  border: 1px solid var(--lp-border); border-radius: var(--lp-radius-sm);
  background: var(--lp-card-2); color: var(--lp-fg); font: inherit; font-size: 13.5px;
  outline: none; transition: .15s;
}
.input::placeholder, .textarea::placeholder { color: var(--lp-muted-fg); opacity: 1; }
.textarea { height: auto; min-height: 84px; padding: 9px 12px; resize: vertical; line-height: 1.6; }
.select { appearance: auto; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--lp-line-strong); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--lp-primary);
  box-shadow: 0 0 0 3px var(--lp-primary-soft);
}
.input:disabled, .select:disabled, .textarea:disabled {
  opacity: .55; cursor: not-allowed; background: var(--lp-secondary);
}
.field { margin-bottom: 14px; }
.field > label { display: block; font-size: 12.5px; color: var(--lp-muted-fg); margin-bottom: 6px; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--lp-primary); }

/* ---------------------------------------------------------------- 标签 */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px; font-size: 11.5px;
  background: var(--lp-hover); color: var(--lp-muted-fg);
}
.tag-primary { background: var(--lp-primary-soft); color: var(--lp-primary-text); }
.tag-ok { background: var(--lp-ok-soft); color: var(--lp-ok-fg); }
.tag-warn { background: var(--lp-warn-soft); color: var(--lp-warn-fg); }
.tag-danger { background: var(--lp-danger-soft); color: var(--lp-danger-fg); }

/* ---------------------------------------------------------------- 表格 */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--lp-border); }
.table th {
  background: var(--lp-card-2); color: var(--lp-muted-fg);
  font-weight: 500; font-size: 12px;
}
.table tbody tr:hover td { background: rgba(255, 255, 255, .03); }
.table tbody tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------- 弹窗 / 提示 */
.modal-mask {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .60);
  display: grid; place-items: center; z-index: 200; padding: 20px;
}
.modal {
  background: var(--lp-card); border: 1px solid var(--lp-border);
  border-radius: 14px; box-shadow: var(--lp-shadow-lg);
  width: min(520px, 100%); max-height: 86vh; overflow: auto; padding: 22px;
}
.modal-title { font-family: var(--lp-serif); font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.toast-wrap {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 400;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.toast {
  background: #0a0b10; color: #f1f0eb; padding: 9px 18px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: 13px; box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
  animation: toast-in .22s ease;
}
.toast-error { background: #6f2318; border-color: rgba(224, 90, 74, .45); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------- 空态 / 加载 / 进度 */
.empty { text-align: center; padding: 52px 20px; color: var(--lp-muted-fg); }
.empty-title { font-family: var(--lp-serif); font-size: 17px; color: var(--lp-fg); margin-bottom: 6px; }

.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .14); border-top-color: var(--lp-primary);
  animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.progress { height: 6px; background: var(--lp-secondary); border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--lp-primary); transition: width .3s; }

/* ---------------------------------------------------------------- 工具类 */
.row { display: flex; gap: 10px; align-items: center; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.wrap { flex-wrap: wrap; }
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.muted { color: var(--lp-muted-fg); }
.small { font-size: 12px; }
.mono { font-family: var(--lp-mono); }
.center { text-align: center; }
.hidden { display: none !important; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.mb8 { margin-bottom: 8px; } .mb16 { margin-bottom: 16px; }

.hero { padding: 56px 0 40px; text-align: center; }
.hero h1 { font-size: 42px; line-height: 1.2; margin-bottom: 14px; }
.hero p {
  font-size: 16px; color: var(--lp-muted-fg);
  max-width: 620px; margin: 0 auto 26px;
}

.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-primary); display: inline-block; }

/* ==========================================================================
   深色兼容补丁（只针对 pages.css，**不改那个文件**）
   pages.css 里还留着浅色主题的硬编码（#cfcabf / #f6ecd4 / #f3e0dd / #dcefe3 /
   #f8f7fd …），在深底上会闪白块或看不见字。这里用 body 前缀抬高优先级覆盖，
   页面同学把它们内化成令牌后，这一段可以整段删掉。
   注意：editor.css 已经是自带 --ed-* 深色令牌的深色实现，这里不做任何覆盖。
   ========================================================================== */

/* —— 主色文字：--lp-primary-dark 在深色下是填充色，不能拿来写字 —— */
body .pg-note,
body .pg-reply,
body .pg-feat-icon,
body .pg-drop-icon,
body .pg-announce strong,
body .pg-invite-code,
body .pg-chip:hover,
body .pg-tab.on { color: var(--lp-primary-text); }

/* —— 提示块（浅黄 / 浅红 / 浅绿 → 半透明深色） —— */
body .pg-note-warn { background: var(--lp-warn-soft); color: var(--lp-warn-fg); }
body .pg-note-danger { background: var(--lp-danger-soft); color: var(--lp-danger-fg); }
body .pg-stage-chip.done { background: var(--lp-ok-soft); color: var(--lp-ok-fg); }

/* —— 浅色描边 / 悬停底 —— */
body .pg-feat:hover,
body .pg-mode:hover,
body .pg-msg:hover { border-color: var(--lp-line-strong); }
body .pg-drop:hover { background: rgba(112, 123, 185, .10); }
body .pg-nt-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); }

/* ---------------------------------------------------------------- 窄屏 */
@media (max-width: 720px) {
  :root, html.dark:root { --lp-header-h: 50px; }
  .hero h1 { font-size: 30px; }
  .lp-main { padding: 18px 14px 48px; }
  .lp-header { padding: 0 12px; gap: 10px; }
}

/* ---------------------------------------------------------------- 反馈悬浮球
   对齐参考产品：右下角 223×60 的胶囊，主色描边 + 半透明底 + hover 抬起 */
.lp-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--lp-card);
  border: 1px solid var(--lp-border);
  color: var(--lp-fg);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .28);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.lp-fab:hover {
  transform: translateY(-2px);
  border-color: var(--lp-primary);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .36);
}
.lp-fab:focus-visible { outline: 2px solid var(--lp-primary); outline-offset: 2px; }
.lp-fab-ico { color: var(--lp-primary); font-size: 15px; line-height: 1; }
.lp-fab-ed { right: 18px; bottom: 18px; }
@media (max-width: 760px) {
  .lp-fab { height: 40px; padding: 0 14px; font-size: 12.5px; right: 14px; bottom: 14px; }
  .lp-fab-txt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-fab, .lp-fab:hover { transition: none; transform: none; }
}