/* ============================================================
   LingFlow Brand Theme — 专业翻译平台视觉层
   加载于 app.css 之后，通过 CSS 变量与类覆盖统一品牌观感。
   原则：不动布局结构，只升级视觉；深浅色同步覆盖。
   ============================================================ */

/* ---------- 1. 品牌变量系统 ---------- */
:root {
  /* 品牌蓝 */
  --lf-primary: #2B5CE6;
  --lf-primary-hover: #1E4AC9;
  --lf-primary-active: #173FB0;
  --lf-primary-light: #EEF3FF;
  --lf-primary-lighter: #F5F8FF;
  /* accent 青（AI/知识库类功能）*/
  --lf-accent: #0EA5E9;
  --lf-accent-light: #E6F7FD;
  /* 语义色 */
  --lf-success: #16A34A;
  --lf-success-light: #EAF7F0;
  --lf-warning: #D97706;
  --lf-warning-light: #FBF1E3;
  --lf-danger: #DC2626;
  --lf-danger-light: #FBEBEB;
  /* 中性灰蓝体系 */
  --lf-bg: #F6F8FB;
  --lf-card: #FFFFFF;
  --lf-text: #1E2A3B;
  --lf-text-2: #47546A;
  --lf-text-3: #8A94A6;
  --lf-border: #E3E9F0;
  --lf-border-strong: #C9D4E0;
  /* 圆角/阴影 */
  --lf-radius: 8px;
  --lf-radius-lg: 12px;
  --lf-shadow-sm: 0 1px 2px rgba(17, 32, 61, 0.06), 0 1px 3px rgba(17, 32, 61, 0.05);
  --lf-shadow-md: 0 4px 12px rgba(17, 32, 61, 0.08), 0 2px 4px rgba(17, 32, 61, 0.05);
  --lf-shadow-lg: 0 12px 32px rgba(17, 32, 61, 0.12), 0 4px 8px rgba(17, 32, 61, 0.06);

  /* 覆盖旧变量（app.css 使用处自动生效） */
  --primary: var(--lf-primary);
  --primary-light: var(--lf-primary-light);
  --primary-dark: var(--lf-primary-hover);
  --bg: var(--lf-bg);
  --card-bg: var(--lf-card);
  --text: var(--lf-text);
  --text-secondary: var(--lf-text-2);
  --border: var(--lf-border);
}

[data-theme="dark"] {
  --lf-primary: #5B8CFF;
  --lf-primary-hover: #7AA3FF;
  --lf-primary-active: #4A79E8;
  --lf-primary-light: #1A2A4D;
  --lf-primary-lighter: #16213A;
  --lf-accent: #38BDF8;
  --lf-accent-light: #0F2E40;
  --lf-success: #4ADE80;
  --lf-success-light: #12301F;
  --lf-warning: #FBBF24;
  --lf-warning-light: #33270F;
  --lf-danger: #F87171;
  --lf-danger-light: #331515;
  --lf-bg: #0B1220;
  --lf-card: #141E31;
  --lf-text: #E6ECF5;
  --lf-text-2: #A8B4C6;
  --lf-text-3: #6C7A90;
  --lf-border: #243248;
  --lf-border-strong: #35455F;
  --lf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --lf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --lf-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);

  --primary: var(--lf-primary);
  --primary-light: var(--lf-primary-light);
  --primary-dark: var(--lf-primary-hover);
  --bg: var(--lf-bg);
  --card-bg: var(--lf-card);
  --text: var(--lf-text);
  --text-secondary: var(--lf-text-2);
  --border: var(--lf-border);
}

/* ---------- 2. Element Plus 主题变量同步 ---------- */
:root {
  --el-color-primary: var(--lf-primary);
  --el-color-primary-light-3: #5B82EE;
  --el-color-primary-light-5: #8CA6F3;
  --el-color-primary-light-7: #BDCCF9;
  --el-color-primary-light-8: #D5DEFB;
  --el-color-primary-light-9: var(--lf-primary-light);
  --el-color-primary-dark-2: var(--lf-primary-hover);
  --el-color-success: var(--lf-success);
  --el-color-warning: var(--lf-warning);
  --el-color-danger: var(--lf-danger);
  --el-border-radius-base: 8px;
  --el-border-radius-small: 6px;
  --el-border-radius-round: 999px;
  --el-border-color: var(--lf-border);
  --el-border-color-light: var(--lf-border);
  --el-border-color-lighter: var(--lf-border);
  --el-border-color-extra-light: var(--lf-border);
  --el-text-color-primary: var(--lf-text);
  --el-text-color-regular: var(--lf-text-2);
  --el-text-color-secondary: var(--lf-text-3);
  --el-bg-color: var(--lf-card);
  --el-bg-color-page: var(--lf-bg);
  --el-fill-color-light: var(--lf-primary-lighter);
  --el-fill-color-lighter: var(--lf-bg);
  --el-box-shadow-light: var(--lf-shadow-md);
  --el-font-size-base: 14px;
}

[data-theme="dark"] {
  --el-color-primary-light-3: #7AA3FF;
  --el-color-primary-light-5: #9DB9FF;
  --el-color-primary-light-7: #32508C;
  --el-color-primary-light-8: #233A66;
  --el-color-primary-light-9: var(--lf-primary-light);
}

/* ---------- 3. 基础排版 ---------- */
body {
  font-feature-settings: 'tnum';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { letter-spacing: -0.01em; }
::selection { background: var(--lf-primary-light); color: var(--lf-primary-active); }

/* ---------- 4. 原生按钮统一（三态 + 悬停层次） ---------- */
.native-btn {
  border: 1px solid var(--lf-border-strong);
  background: var(--lf-card);
  color: var(--lf-text);
  border-radius: var(--lf-radius);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.16s ease;
  box-shadow: var(--lf-shadow-sm);
}
.native-btn:hover {
  border-color: var(--lf-primary);
  color: var(--lf-primary);
  background: var(--lf-primary-lighter);
  box-shadow: var(--lf-shadow-md);
}
.native-btn:active {
  transform: translateY(1px);
  box-shadow: var(--lf-shadow-sm);
}
.native-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.native-btn[style*="background:#16324f"], .native-btn[style*="background: #16324f"] {
  background: var(--lf-primary) !important;
  border-color: var(--lf-primary) !important;
  color: #fff !important;
}
.native-btn[style*="background:#16324f"]:hover {
  background: var(--lf-primary-hover) !important;
}
/* 深色实底按钮（主按钮）统一为品牌蓝 */
button.native-btn[style*="#16324f"] { background: var(--lf-primary) !important; }

/* ---------- 5. 表单输入 ---------- */
.native-input, .native-select, input[type="text"], input[type="password"], input[type="email"], textarea {
  border-radius: var(--lf-radius);
  border: 1px solid var(--lf-border-strong);
  background: var(--lf-card);
  color: var(--lf-text);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.native-input:focus, .native-select:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus {
  border-color: var(--lf-primary);
  box-shadow: 0 0 0 3px rgba(43, 92, 230, 0.14);
  outline: none;
}

/* ---------- 6. 卡片 / 面板 ---------- */
.card, .panel, [class*="-panel"], [style*="border-radius:10px"], [style*="border-radius: 10px"] {
  border-radius: var(--lf-radius-lg) !important;
}

/* ---------- 7. 表格统一（行 hover + 表头） ---------- */
table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--lf-radius-lg);
  overflow: hidden;
}
thead th { background: var(--lf-primary-lighter) !important; color: var(--lf-text-2) !important; font-weight: 600; }
tbody tr { transition: background 0.12s ease; }
tbody tr:hover { background: var(--lf-primary-lighter); }

/* ---------- 8. Tab 指示条 ---------- */
.tab-btn {
  font-size: 14px;
  padding: 13px 24px;
  letter-spacing: 0.01em;
}
.tab-btn.active {
  color: var(--lf-primary) !important;
  border-bottom-color: var(--lf-primary) !important;
  font-weight: 600;
}

/* ---------- 9. 滚动条 ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--lf-border-strong); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--lf-text-3); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 10. 链接 ---------- */
a { color: var(--lf-primary); }
a:hover { color: var(--lf-primary-hover); }

/* ---------- 11. 头部导航精修 ---------- */
.app-header {
  background: linear-gradient(135deg, #1B3FBF 0%, #2B5CE6 55%, #3F74F3 100%);
  box-shadow: 0 2px 12px rgba(30, 60, 150, 0.22);
}
[data-theme="dark"] .app-header {
  background: linear-gradient(135deg, #101C36 0%, #16264B 55%, #1A2E5C 100%);
}

/* ---------- 12. 登录页精修 ---------- */
.auth-container {
  background:
    radial-gradient(ellipse 60% 80% at 20% 10%, rgba(255, 255, 255, 0.12), transparent 60%),
    radial-gradient(ellipse 50% 70% at 85% 90%, rgba(14, 165, 233, 0.25), transparent 55%),
    linear-gradient(135deg, #152C74 0%, #1E46C4 45%, #2B5CE6 100%);
}
.auth-card {
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(10, 25, 70, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.auth-card .auth-logo h1 { color: var(--lf-primary); }

/* ---------- 13. 工作台分段/结果行 ---------- */
.seg-row:hover, .result-row:hover { background: var(--lf-primary-lighter); }
.status-badge, [class*="badge"], [class*="tag"] {
  border-radius: 999px;
}

/* ---------- 14. 弹窗 ---------- */
.el-dialog {
  border-radius: var(--lf-radius-lg) !important;
  box-shadow: var(--lf-shadow-lg) !important;
}
.el-dialog__title { font-weight: 600; }

/* ---------- 15. 移动端适配微调 ---------- */
@media (max-width: 760px) {
  .native-btn { padding: 6px 12px; font-size: 12.5px; }
  .tab-btn { padding: 11px 14px; font-size: 13px; }
}

/* ---------- 16. Dark-mode hardening（审计 P0-4 兜底） ---------- */
[data-theme="dark"] .auth-card,
[data-theme="dark"] .upgrade-dialog,
[data-theme="dark"] .upgrade-option,
[data-theme="dark"] .el-dialog,
[data-theme="dark"] .el-dialog__body,
[data-theme="dark"] .el-dialog__header,
[data-theme="dark"] .el-card,
[data-theme="dark"] .native-btn,
[data-theme="dark"] .result-actions-sticky,
[data-theme="dark"] .minimap-area,
[data-theme="dark"] .chat-messages,
[data-theme="dark"] .chat-text,
[data-theme="dark"] table,
[data-theme="dark"] th,
[data-theme="dark"] td {
  background-color: var(--lf-card) !important;
  color: var(--lf-text) !important;
  border-color: var(--lf-border) !important;
}
[data-theme="dark"] thead th {
  background-color: var(--lf-primary-light) !important;
}
[data-theme="dark"] .auth-card input,
[data-theme="dark"] .native-input,
[data-theme="dark"] .native-select {
  background-color: var(--lf-bg) !important;
}
[data-theme="dark"] .el-button--primary {
  background-color: var(--lf-primary) !important;
  border-color: var(--lf-primary) !important;
  color: #fff !important;
}
[data-theme="dark"] .language-switcher select {
  background-color: var(--lf-card) !important;
  color: var(--lf-text) !important;
}
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fafafa"],
[data-theme="dark"] [style*="background: #fafafa"],
[data-theme="dark"] [style*="background:#f0f3f6"],
[data-theme="dark"] [style*="background:#f5f7fa"],
[data-theme="dark"] [style*="background:#fff7ed"],
[data-theme="dark"] [style*="background:#f0f8ff"],
[data-theme="dark"] [style*="background:#fff;"] {
  background-color: var(--lf-card) !important;
  color: var(--lf-text) !important;
}
[data-theme="dark"] [style*="background:#16324f"],
[data-theme="dark"] [style*="background: #16324f"] {
  background-color: var(--lf-primary) !important;
  color: #fff !important;
}


/* ============================================================
   附录 A（v4 增量）：设计令牌补全 + 护眼 sepia + 对比状态/匹配率/空状态/移动抽屉
   原则：全部叠加在现有品牌层之上，向后兼容；不改布局结构。
   ============================================================ */

/* ---------- A.1 扩展令牌（间距 / 层级 / 状态语义 / 匹配率） ---------- */
:root {
  --lf-space-1: 4px;
  --lf-space-2: 8px;
  --lf-space-3: 12px;
  --lf-space-4: 16px;
  --lf-space-6: 24px;
  --lf-space-8: 32px;
  --lf-z-nav: 100;
  --lf-z-scrim: 190;
  --lf-z-drawer: 200;
  --lf-z-toast: 300;
  --lf-z-modal: 400;

  /* 段落状态语义色（confirmed/edited/error/pending/tm） */
  --lf-status-confirmed: #16A34A;  --lf-status-confirmed-bg: #EAF7F0;
  --lf-status-edited: #B45309;     --lf-status-edited-bg: #FBF1E3;
  --lf-status-error: #DC2626;      --lf-status-error-bg: #FBEBEB;
  --lf-status-pending: #64748B;    --lf-status-pending-bg: #EEF1F6;
  --lf-status-tm: #2B5CE6;         --lf-status-tm-bg: #EEF3FF;

  /* 匹配率分级（高/中/低） */
  --lf-match-high: #16A34A;        --lf-match-high-bg: #EAF7F0;
  --lf-match-mid: #B45309;         --lf-match-mid-bg: #FBF1E3;
  --lf-match-low: #DC2626;         --lf-match-low-bg: #FBEBEB;
}

[data-theme="dark"] {
  --lf-status-confirmed: #4ADE80;  --lf-status-confirmed-bg: #0F2A1C;
  --lf-status-edited: #FBBF24;     --lf-status-edited-bg: #2E230B;
  --lf-status-error: #F87171;      --lf-status-error-bg: #2E1414;
  --lf-status-pending: #94A3B8;    --lf-status-pending-bg: #1B2536;
  --lf-status-tm: #7AA3FF;         --lf-status-tm-bg: #16264B;
  --lf-match-high: #4ADE80;        --lf-match-high-bg: #0F2A1C;
  --lf-match-mid: #FBBF24;         --lf-match-mid-bg: #2E230B;
  --lf-match-low: #F87171;         --lf-match-low-bg: #2E1414;
}

/* ---------- A.2 护眼 sepia 主题（暖纸色） ---------- */
[data-theme="sepia"] {
  --lf-primary: #9A6A2F;
  --lf-primary-hover: #B07E3F;
  --lf-primary-active: #7E5626;
  --lf-primary-light: #F3E9D8;
  --lf-primary-lighter: #FAF3E7;
  --lf-accent: #B5793B;
  --lf-accent-light: #F6EADB;
  --lf-success: #5E7B3A;
  --lf-success-light: #EDF1E2;
  --lf-warning: #B5793B;
  --lf-warning-light: #F6EADB;
  --lf-danger: #B5402F;
  --lf-danger-light: #F6E2DD;
  --lf-bg: #F4ECDD;
  --lf-card: #FBF6EC;
  --lf-text: #4A3B28;
  --lf-text-2: #6E5C42;
  --lf-text-3: #9A8767;
  --lf-border: #E2D4BC;
  --lf-border-strong: #D0BC99;
  --lf-shadow-sm: 0 1px 2px rgba(74,59,40,.08);
  --lf-shadow-md: 0 4px 12px rgba(74,59,40,.10);
  --lf-shadow-lg: 0 12px 32px rgba(74,59,40,.16);

  --primary: var(--lf-primary);
  --primary-light: var(--lf-primary-light);
  --primary-dark: var(--lf-primary-hover);
  --bg: var(--lf-bg);
  --card-bg: var(--lf-card);
  --text: var(--lf-text);
  --text-secondary: var(--lf-text-2);
  --border: var(--lf-border);

  --lf-status-confirmed: #5E7B3A;  --lf-status-confirmed-bg: #EDF1E2;
  --lf-status-edited: #B5793B;     --lf-status-edited-bg: #F6EADB;
  --lf-status-error: #B5402F;      --lf-status-error-bg: #F6E2DD;
  --lf-status-pending: #8A7656;    --lf-status-pending-bg: #EFE6D5;
  --lf-status-tm: #9A6A2F;         --lf-status-tm-bg: #F3E9D8;
  --lf-match-high: #5E7B3A;        --lf-match-high-bg: #EDF1E2;
  --lf-match-mid: #B5793B;         --lf-match-mid-bg: #F6EADB;
  --lf-match-low: #B5402F;         --lf-match-low-bg: #F6E2DD;
}
[data-theme="sepia"] {
  --el-color-primary: var(--lf-primary);
  --el-color-primary-light-3: #B07E3F;
  --el-color-primary-light-5: #C79355;
  --el-color-primary-light-7: #E0C9A6;
  --el-color-primary-light-8: #EBD9BE;
  --el-color-primary-light-9: var(--lf-primary-light);
  --el-color-primary-dark-2: var(--lf-primary-hover);
  --el-color-success: var(--lf-success);
  --el-color-warning: var(--lf-warning);
  --el-color-danger: var(--lf-danger);
  --el-border-color: var(--lf-border);
  --el-border-color-light: var(--lf-border);
  --el-border-color-lighter: var(--lf-border);
  --el-border-color-extra-light: var(--lf-border);
  --el-text-color-primary: var(--lf-text);
  --el-text-color-regular: var(--lf-text-2);
  --el-text-color-secondary: var(--lf-text-3);
  --el-bg-color: var(--lf-card);
  --el-bg-color-page: var(--lf-bg);
  --el-fill-color-light: var(--lf-primary-lighter);
  --el-fill-color-lighter: var(--lf-bg);
}
[data-theme="sepia"] .app-header {
  background: linear-gradient(135deg, #6E4E22 0%, #9A6A2F 55%, #B07E3F 100%);
  box-shadow: 0 2px 12px rgba(110, 78, 34, 0.25);
}
[data-theme="sepia"] .auth-container {
  background:
    radial-gradient(ellipse 60% 80% at 20% 10%, rgba(255,255,255,0.2), transparent 60%),
    linear-gradient(135deg, #7E5626 0%, #9A6A2F 45%, #B07E3F 100%);
}
[data-theme="sepia"] .auth-card { border-color: rgba(255,255,255,0.5); }
/* sepia 兜底：把内联白底元素收敛到暖纸色 */
[data-theme="sepia"] .auth-card,
[data-theme="sepia"] .upgrade-dialog,
[data-theme="sepia"] .el-dialog,
[data-theme="sepia"] .el-dialog__body,
[data-theme="sepia"] .el-dialog__header,
[data-theme="sepia"] .el-card,
[data-theme="sepia"] .native-btn,
[data-theme="sepia"] .result-actions-sticky,
[data-theme="sepia"] .minimap-area,
[data-theme="sepia"] .chat-messages,
[data-theme="sepia"] .chat-text,
[data-theme="sepia"] table,
[data-theme="sepia"] th,
[data-theme="sepia"] td {
  background-color: var(--lf-card) !important;
  color: var(--lf-text) !important;
  border-color: var(--lf-border) !important;
}
[data-theme="sepia"] thead th { background-color: var(--lf-primary-light) !important; }
[data-theme="sepia"] .auth-card input,
[data-theme="sepia"] .native-input,
[data-theme="sepia"] .native-select { background-color: var(--lf-bg) !important; }
[data-theme="sepia"] .el-button--primary { background-color: var(--lf-primary) !important; border-color: var(--lf-primary) !important; color: #fff !important; }
[data-theme="sepia"] [style*="background:#fff"],
[data-theme="sepia"] [style*="background: #fff"],
[data-theme="sepia"] [style*="background:#fafafa"],
[data-theme="sepia"] [style*="background: #fafafa"],
[data-theme="sepia"] [style*="background:#f0f3f6"],
[data-theme="sepia"] [style*="background:#f5f7fa"],
[data-theme="sepia"] [style*="background:#fff7ed"],
[data-theme="sepia"] [style*="background:#f0f8ff"],
[data-theme="sepia"] [style*="background:#fff;"] {
  background-color: var(--lf-card) !important;
  color: var(--lf-text) !important;
}

/* ---------- A.3 对比段落状态（强化语义对比 + 无障碍可读性） ---------- */
.status-badge.st-approved { background: var(--lf-status-confirmed-bg); color: var(--lf-status-confirmed); font-weight: 600; }
.status-badge.st-pending  { background: var(--lf-status-pending-bg);  color: var(--lf-status-pending);  font-weight: 600; }
.status-badge.st-failed   { background: var(--lf-status-error-bg);    color: var(--lf-status-error);    font-weight: 600; }
.status-badge.st-draft    { background: var(--lf-status-edited-bg);   color: var(--lf-status-edited);   font-weight: 600; }
.status-badge.st-kept     { background: var(--lf-status-tm-bg);       color: var(--lf-status-tm);       font-weight: 600; }

/* ---------- A.4 匹配率徽标（按质量分级着色） ---------- */
.status-badge.tm-hit.match-high,
.status-badge.tm-fuzzy.match-high { background: var(--lf-match-high-bg); color: var(--lf-match-high); font-weight: 600; }
.status-badge.tm-fuzzy.match-mid  { background: var(--lf-match-mid-bg);  color: var(--lf-match-mid);  font-weight: 600; }
.status-badge.tm-fuzzy.match-low  { background: var(--lf-match-low-bg);  color: var(--lf-match-low);  font-weight: 600; }
/* 匹配率徽标左侧加色条，扫读一眼区分等级 */
.status-badge.tm-hit, .status-badge.tm-fuzzy {
  border-left: 3px solid currentColor;
  padding-left: 8px;
}

/* ---------- A.5 空状态引导 ---------- */
.empty-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--lf-space-2);
  color: var(--lf-text-3);
  padding: var(--lf-space-8) var(--lf-space-4);
  text-align: center;
}
.empty-guide .emoji { font-size: 48px; opacity: 0.5; line-height: 1; }

/* ---------- A.6 移动端导航抽屉（窄屏 ≤760：Tab 条变为滑出抽屉） ---------- */
.nav-hamburger { display: none; }
.nav-scrim { display: none; }

@media (max-width: 760px) {
  .nav-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    margin-right: 10px;
    border: none; background: transparent;
    color: var(--lf-text); font-size: 20px; cursor: pointer;
  }
  .app-header { flex-wrap: wrap; }
  .app-tab-strip.nav-drawer {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 80%; max-width: 300px;
    z-index: var(--lf-z-drawer);
    flex-direction: column;
    overflow-y: auto;
    background: var(--lf-card);
    border-right: 1px solid var(--lf-border);
    border-bottom: none;
    transform: translateX(-100%);
    transition: transform .22s ease;
    padding-top: 56px;
    box-shadow: var(--lf-shadow-lg);
  }
  .app-tab-strip.nav-drawer.nav-open { transform: translateX(0); }
  .app-tab-strip.nav-drawer > div { flex-direction: column; min-width: 0; width: 100%; }
  .app-tab-strip.nav-drawer .tab-btn {
    width: 100%; text-align: left;
    border-bottom: 1px solid var(--lf-border);
    border-left: 3px solid transparent;
    border-bottom-color: var(--lf-border) !important;
  }
  .app-tab-strip.nav-drawer .tab-btn.active {
    color: var(--lf-primary) !important;
    border-left-color: var(--lf-primary);
    border-bottom-color: var(--lf-border) !important;
    background: var(--lf-primary-lighter);
  }
  .nav-scrim {
    display: block;
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: var(--lf-z-scrim);
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease;
  }
  .nav-scrim.show { opacity: 1; visibility: visible; }
}


/* ============================================================
   附录 B/C（v4）：分组侧边栏 IA + 快捷枢纽 + 引导 Tour + 帮助中心
   ============================================================ */

/* ---------- B.1 侧边栏布局（iaMode=sidebar 时启用） ---------- */
:root { --app-sidebar-w: 232px; --app-header-h: 60px; }
.app-sidebar { display: none; }
[data-ia="sidebar"] .app-tab-strip { display: none !important; }
[data-ia="sidebar"] .app-header { position: sticky; top: 0; z-index: var(--lf-z-nav); margin-left: calc(-1 * var(--app-sidebar-w)); width: calc(100% + var(--app-sidebar-w)); }
[data-ia="sidebar"] .app-sidebar {
  display: flex; flex-direction: column; gap: 2px;
  position: fixed; top: var(--app-header-h); left: 0; bottom: 0;
  width: var(--app-sidebar-w); padding: 12px 10px; overflow: hidden;
  background: var(--lf-card); border-right: 1px solid var(--lf-border);
  z-index: var(--lf-z-nav);
}
[data-ia="sidebar"] .main-app-shell { padding-left: var(--app-sidebar-w); }
[data-ia="sidebar"] .main-container { margin-left: 0; max-width: none; }
/* V4: .main 满宽（flex:1;min-width:0），覆盖 app.css 旧 1280px 居中截断 */
.main-container { max-width: none; }
.side-brand { display: flex; align-items: center; gap: 8px; padding: 6px 8px 12px; font-weight: 700; color: var(--lf-text); }
.side-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: var(--lf-primary); color: #fff; font-size: 15px; }
.side-nav-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.side-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.side-group-title { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--lf-text-3); padding: 8px 10px 4px; }
.side-nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: none; background: transparent; color: var(--lf-text-2);
  border-radius: var(--lf-radius); cursor: pointer; font-size: 14px; text-align: left;
  border-left: 3px solid transparent; transition: background .12s ease, color .12s ease;
}
.side-nav-item:hover { background: var(--lf-primary-lighter); color: var(--lf-primary); }
.side-nav-item.active { background: var(--lf-primary-light); color: var(--lf-primary); font-weight: 600; border-left-color: var(--lf-primary); }
.side-nav-icon { font-size: 16px; width: 20px; text-align: center; }
@media (max-width: 760px) {
  [data-ia="sidebar"] .app-sidebar {
    top: 0; height: 100vh; width: 80%; max-width: 300px; padding-top: 16px;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: var(--lf-shadow-lg); z-index: var(--lf-z-drawer);
  }
  [data-ia="sidebar"] .app-sidebar.nav-open { transform: translateX(0); }
  [data-ia="sidebar"] .main-app-shell { padding-left: 0; }
  [data-ia="sidebar"] .app-header { margin-left: 0; width: auto; }
  [data-ia="sidebar"] .main-container { margin-left: 0; }
}

/* ---------- B.2 快捷枢纽 ---------- */
.quick-hub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 640px; margin: 18px auto 6px; }
.quick-hub-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 12px; border: 1px solid var(--lf-border); border-radius: var(--lf-radius-lg);
  background: var(--lf-card); cursor: pointer; min-width: 0;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.quick-hub-card:hover { border-color: var(--lf-primary); box-shadow: var(--lf-shadow-md); }
.quick-hub-card:active { transform: translateY(1px); }
.qh-icon { font-size: 26px; }
.qh-label { font-size: 14px; font-weight: 600; color: var(--lf-text); }
.qh-desc { font-size: 12px; color: var(--lf-text-3); text-align: center; }
@media (max-width: 560px) { .quick-hub { grid-template-columns: 1fr; } }

/* ---------- C.1 新手引导 Tour ---------- */
.tour-mask { position: fixed; inset: 0; z-index: 1002; }
.tour-mask::before { content: ""; position: absolute; inset: 0; background: rgba(15, 23, 42, .5); z-index: 1; }
.tour-spot {
  position: absolute; z-index: 1; pointer-events: none;
  border: 2px solid var(--lf-primary); border-radius: var(--lf-radius-lg);
  box-shadow: 0 0 0 4px rgba(43, 92, 230, .25);
  transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease, opacity .18s ease;
}
.tour-card {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  width: min(420px, calc(100vw - 32px)); z-index: 2;
  background: var(--lf-card); color: var(--lf-text);
  border-radius: var(--lf-radius-lg); box-shadow: var(--lf-shadow-lg);
  padding: 16px 18px;
}
.tour-step-label { font-size: 12px; color: var(--lf-primary); font-weight: 600; margin-bottom: 4px; }
.tour-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.tour-body { font-size: 13px; color: var(--lf-text-2); line-height: 1.5; margin-bottom: 12px; }
.tour-actions { display: flex; align-items: center; gap: 8px; }
.tour-flex { flex: 1; }

/* ---------- C.2 帮助中心 ---------- */
.help-center {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 88vw);
  background: var(--lf-card); border-left: 1px solid var(--lf-border);
  box-shadow: var(--lf-shadow-lg); z-index: 1001;
  transform: translateX(100%); visibility: hidden;
  transition: transform .22s ease, visibility .22s ease;
  display: flex; flex-direction: column; padding: 18px; overflow-y: auto;
}
.help-center.open { transform: translateX(0); visibility: visible; }
.help-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.help-title { font-size: 18px; font-weight: 700; color: var(--lf-text); }
.help-subtitle { font-size: 12px; color: var(--lf-text-3); margin-top: 2px; }
.help-close { border: none; background: transparent; color: var(--lf-text-3); font-size: 16px; cursor: pointer; }
.help-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.help-faq-item { padding: 12px 0; border-top: 1px solid var(--lf-border); }
.help-faq-q { font-size: 14px; font-weight: 600; color: var(--lf-text); margin-bottom: 4px; }
.help-faq-a { font-size: 13px; color: var(--lf-text-2); line-height: 1.5; }


/* ============================================================
   附录 D·Phase 1 — 对齐 v4 设计系统令牌（补充层）
   目的：把 v4 设计稿使用的令牌词汇并入现有品牌层，使 v4 组件类（.btn/.card/.sec-title/.hero…）
         可直接引用，而不必改写生产既有 --lf-card/--lf-text-2/--lf-radius 等命名。
   原则：纯增量、不改现有令牌名；语义重叠处用现有值别名，确保主题切换一致。
   ============================================================ */

/* ---------- D1. 浅色令牌（v4 词汇，叠加到 :root） ---------- */
:root {
  /* 面 / 背景 / 边框（v4 命名） */
  --lf-surface: var(--lf-card);          /* #FFFFFF 卡片白 */
  --lf-surface-2: #F8FAFC;
  --lf-surface-3: #F1F5F9;
  --lf-border-strong: #CBD5E1;           /* 若已被定义则此处覆盖为 v4 值 */

  /* 中性灰阶（Tailwind 风格，补全 v4 缺的 300/600/700/900/25/50） */
  --lf-gray-25: #FCFDFE;
  --lf-gray-50: #F8FAFC;
  --lf-gray-100: #F1F5F9;
  --lf-gray-200: #E2E8F0;
  --lf-gray-300: #CBD5E1;
  --lf-gray-400: #94A3B8;
  --lf-gray-500: #64748B;
  --lf-gray-600: #475569;
  --lf-gray-700: #334155;
  --lf-gray-800: #1E293B;
  --lf-gray-900: #0F172A;

  /* 文字（补 text-4） */
  --lf-text-4: #94A3B8;

  /* 品牌主色阶（v4 精确蓝，用于 hover/active 与渐变） */
  --lf-primary-50: #EFF6FF;
  --lf-primary-100: #DBEAFE;
  --lf-primary-200: #BFD2FE;
  --lf-primary-500: #3B82F6;
  --lf-primary-600: #2563EB;            /* v4 规范主色 */
  --lf-primary-700: #1D4ED8;

  /* 语义色（补 info / purple + 浅底/边框） */
  --lf-info: #0891B2;           --lf-info-light: #ECFEFF;    --lf-info-border: #A5F3FC;
  --lf-purple: #7C3AED;         --lf-purple-light: #F5F3FF;  --lf-purple-border: #DDD6FE;

  /* 渐变（v4 签名） */
  --lf-brand-grad: linear-gradient(135deg, #1D4ED8 0%, #2563EB 55%, #3B82F6 100%);
  --lf-hero-grad: linear-gradient(120deg, #1E40AF 0%, #2563EB 45%, #3B82F6 100%);

  /* 外壳背景 */
  --lf-sidebar-bg: var(--lf-card);
  --lf-topbar-bg: rgba(255, 255, 255, .85);

  /* 字号阶梯 */
  --lf-fs-xs: 12px; --lf-fs-sm: 13px; --lf-fs-base: 14px;
  --lf-fs-lg: 16px; --lf-fs-xl: 18px; --lf-fs-2xl: 21px; --lf-fs-3xl: 27px;

  /* 间距标尺（v4：4/8/12/16/20/24/32/40） */
  --lf-sp-1: 4px;  --lf-sp-2: 8px;  --lf-sp-3: 12px; --lf-sp-4: 16px;
  --lf-sp-5: 20px; --lf-sp-6: 24px; --lf-sp-8: 32px; --lf-sp-10: 40px;

  /* 圆角（补全 v4 缺的 sm/md/xl/full；md 别名现有 --lf-radius） */
  --lf-radius-sm: 6px;
  --lf-radius-md: 8px;
  --lf-radius-xl: 16px;
  --lf-radius-full: 999px;

  /* 阴影（补 pop 级） */
  --lf-shadow-pop: 0 8px 24px rgba(15, 23, 42, .14);

  /* 动效 */
  --lf-ease: cubic-bezier(.4, 0, .2, 1);
  --lf-ease-out: cubic-bezier(.16, 1, .3, 1);
  --lf-dur: .18s;
}

/* ---------- D2. 深色令牌覆盖（v4 词汇） ---------- */
[data-theme="dark"] {
  --lf-surface: #111A2B;
  --lf-surface-2: #0F1828;
  --lf-surface-3: #1A2436;
  --lf-gray-25: #1A2332;
  --lf-gray-50: #121B2C;
  --lf-gray-100: #18233A;
  --lf-gray-200: #243044;
  --lf-gray-300: #33415A;
  --lf-gray-400: #475569;
  --lf-gray-500: #64748B;
  --lf-gray-600: #94A3B8;
  --lf-gray-700: #C2CEDF;
  --lf-gray-800: #E2E8F0;
  --lf-gray-900: #F8FAFC;
  --lf-text-4: #64748B;
  --lf-primary-50: #172554;
  --lf-primary-100: #1E3A8A;
  --lf-primary-200: #1E40AF;
  --lf-primary-500: #60A5FA;
  --lf-primary-600: #3B82F6;
  --lf-primary-700: #2563EB;
  --lf-info: #22D3EE;           --lf-info-light: #0C2A30;    --lf-info-border: #155E75;
  --lf-purple: #A78BFA;         --lf-purple-light: #221A3A;  --lf-purple-border: #5B21B6;
  --lf-sidebar-bg: #0E1626;
  --lf-topbar-bg: rgba(14, 22, 38, .85);
  --lf-shadow-pop: 0 8px 24px rgba(0, 0, 0, .5);
}

/* ---------- D3. 护眼 sepia 令牌覆盖（v4 词汇） ---------- */
[data-theme="sepia"] {
  --lf-surface: #FBF4E6;
  --lf-surface-2: #F4EAD4;
  --lf-surface-3: #ECDFc4;
  --lf-gray-25: #F7EFDD;
  --lf-gray-50: #F3EAD6;
  --lf-gray-100: #ECE0C6;
  --lf-gray-200: #E2D4B6;
  --lf-gray-300: #CDB88E;
  --lf-gray-400: #B09A6E;
  --lf-gray-500: #897749;
  --lf-gray-600: #6B5D3E;
  --lf-gray-700: #523F24;
  --lf-gray-800: #3A2E18;
  --lf-gray-900: #241B0D;
  --lf-text-4: #A8966F;
  --lf-primary-50: #F3E9D8;
  --lf-primary-100: #E8D8BC;
  --lf-primary-200: #D9C29A;
  --lf-primary-500: #B07E3F;
  --lf-primary-600: #9A6A2F;
  --lf-primary-700: #7E5626;
  --lf-info: #2C7A8C;           --lf-info-light: #E8F2F4;    --lf-info-border: #C2DDE2;
  --lf-purple: #8A5CC4;         --lf-purple-light: #F0E9F8;  --lf-purple-border: #D9C8EC;
  --lf-sidebar-bg: #FBF4E6;
  --lf-topbar-bg: rgba(251, 244, 230, .92);
  --lf-shadow-pop: 0 8px 24px rgba(67, 56, 31, .16);
}

/* ============================================================
   附录 D·Phase 2 — v4 组件设计系统 + Element Plus 换皮
   原则：
   (1) 新增组件一律以 lf- 前缀，零与 app.css 既有 .card/.btn/.stat/.row/.seg/.grid
       等类冲突；这些类供 Phase 4 逐页采用。
   (2) Element Plus 仅改外观（高度/圆角/字体/颜色/阴影/聚焦环），不动结构与事件，
       不影响模态键盘焦点与交互逻辑。
   (3) 既有生产类（.native-btn / table / thead / .status-badge）按 v4 观感收口。
   ============================================================ */

/* ---------- P2.0 聚焦环令牌（按主题） ---------- */
:root { --lf-ring: rgba(43, 92, 230, .14); }
[data-theme="dark"] { --lf-ring: rgba(91, 140, 255, .22); }
[data-theme="sepia"] { --lf-ring: rgba(154, 106, 47, .18); }

/* ---------- P2.1 动画关键帧（Phase 5 复用） ---------- */
@keyframes lf-pageIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes lf-fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes lf-popIn { from { opacity:0; transform:translateY(-4px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes lf-shimmer { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
@keyframes lf-pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }

/* ---------- P2.2 v4 组件类库（lf- 前缀，新类，无冲突） ---------- */
/* Button */
.lf-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:34px; padding:0 var(--lf-sp-4);
  border-radius:var(--lf-radius-md);
  font-size:var(--lf-fs-sm); font-weight:600;
  border:1px solid transparent; white-space:nowrap; cursor:pointer;
  transition:background var(--lf-dur),color var(--lf-dur),border-color var(--lf-dur),box-shadow var(--lf-dur),transform .12s var(--lf-ease);
}
.lf-btn:active { transform:scale(.97); }
.lf-btn:disabled, .lf-btn.is-disabled { opacity:.5; cursor:not-allowed; transform:none !important; }
.lf-btn-primary { background:var(--lf-primary); color:#fff; box-shadow:0 1px 2px rgba(37,99,235,.25); }
.lf-btn-primary:hover { background:var(--lf-primary-hover); box-shadow:0 2px 8px rgba(37,99,235,.3); }
.lf-btn-default { background:var(--lf-surface); border-color:var(--lf-border); color:var(--lf-text-2); }
.lf-btn-default:hover { border-color:var(--lf-border-strong); color:var(--lf-text); background:var(--lf-surface-2); }
.lf-btn-success { background:var(--lf-success); color:#fff; }
.lf-btn-success:hover { filter:brightness(1.07); }
.lf-btn-ghost { color:var(--lf-text-2); }
.lf-btn-ghost:hover { background:var(--lf-surface-3); color:var(--lf-text); }
.lf-btn-danger { background:var(--lf-danger-light); border-color:var(--lf-danger-border); color:var(--lf-danger); }
.lf-btn-sm { height:28px; padding:0 var(--lf-sp-3); font-size:var(--lf-fs-xs); }
.lf-btn-lg { height:40px; padding:0 var(--lf-sp-5); font-size:var(--lf-fs-base); }
.lf-btn-block { width:100%; }
.lf-btn-onhero { background:#fff; color:var(--lf-primary-700); }
.lf-btn-onhero:hover { background:var(--lf-primary-50); }
.lf-btn-onhero-ghost { background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.35); }
.lf-btn-onhero-ghost:hover { background:rgba(255,255,255,.25); }

/* Card */
.lf-card {
  background:var(--lf-surface); border:1px solid var(--lf-border);
  border-radius:var(--lf-radius-lg); box-shadow:var(--lf-shadow-sm);
  transition:border-color var(--lf-dur),box-shadow var(--lf-dur);
}
.lf-card-pad { padding:var(--lf-sp-5); }
.lf-card.interactive:hover { border-color:var(--lf-border-strong); box-shadow:var(--lf-shadow-md); }
.lf-card-head { display:flex; align-items:center; justify-content:space-between; gap:var(--lf-sp-3); padding:var(--lf-sp-4) var(--lf-sp-5); border-bottom:1px solid var(--lf-border); }
.lf-card-title { font-size:var(--lf-fs-base); font-weight:700; display:flex; align-items:center; gap:8px; }
.lf-card-title .sub { font-size:var(--lf-fs-xs); font-weight:500; color:var(--lf-text-3); }
.lf-card-link { font-size:var(--lf-fs-xs); color:var(--lf-primary); font-weight:600; }
.lf-card-link:hover { text-decoration:underline; }

/* Section title */
.lf-sec-title {
  font-size:var(--lf-fs-sm); font-weight:700; color:var(--lf-text-2);
  display:flex; align-items:center; gap:8px; margin:var(--lf-sp-6) 0 var(--lf-sp-3);
}
.lf-sec-title:first-child { margin-top:0; }
.lf-sec-title .line { flex:1 1 auto; height:1px; background:var(--lf-border); }
.lf-sec-title .more { font-size:var(--lf-fs-xs); color:var(--lf-primary); font-weight:600; }

/* Badge / Tag */
.lf-badge {
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:700; line-height:1;
  padding:4px 9px; border-radius:var(--lf-radius-full);
  border:1px solid transparent; white-space:nowrap;
}
.lf-badge-blue { background:var(--lf-primary-light); color:var(--lf-primary); border-color:var(--lf-primary-200); }
.lf-badge-green { background:var(--lf-success-light); color:var(--lf-success); border-color:var(--lf-success-border); }
.lf-badge-amber { background:var(--lf-warning-light); color:var(--lf-warning); border-color:var(--lf-warning-border); }
.lf-badge-red { background:var(--lf-danger-light); color:var(--lf-danger); border-color:var(--lf-danger-border); }
.lf-badge-gray { background:var(--lf-surface-3); color:var(--lf-text-3); border-color:var(--lf-border); }
.lf-badge-violet { background:var(--lf-purple-light); color:var(--lf-purple); border-color:var(--lf-purple-border); }
.lf-badge-dot::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.lf-tag { font-size:11px; font-weight:600; padding:2px 8px; border-radius:var(--lf-radius-sm); background:var(--lf-surface-3); color:var(--lf-text-2); }

/* Progress bar */
.lf-bar { height:6px; border-radius:var(--lf-radius-full); background:var(--lf-surface-3); overflow:hidden; }
.lf-bar > i { display:block; height:100%; border-radius:inherit; background:var(--lf-primary); transition:width .4s var(--lf-ease); }
.lf-bar > i.green { background:var(--lf-success); }
.lf-bar > i.amber { background:var(--lf-warning); }

/* Horizontal bar chart */
.lf-chart { display:flex; flex-direction:column; gap:var(--lf-sp-3); }
.lf-chart-row { display:grid; grid-template-columns:minmax(96px,auto) 1fr auto; align-items:center; gap:var(--lf-sp-3); }
.lf-chart-label { font-size:var(--lf-fs-xs); color:var(--lf-text-2); font-weight:500; }
.lf-chart-track { height:10px; border-radius:var(--lf-radius-full); background:var(--lf-surface-3); overflow:hidden; }
.lf-chart-bar { display:block; height:100%; border-radius:inherit; background:var(--lf-primary); transition:width .4s var(--lf-ease); }
.lf-chart-bar.green { background:var(--lf-success); }
.lf-chart-bar.amber { background:var(--lf-warning); }
.lf-chart-value { font-size:var(--lf-fs-sm); font-weight:700; color:var(--lf-text); font-variant-numeric:tabular-nums; text-align:right; min-width:2.5ch; }

/* Stat card */
.lf-stat {
  background:var(--lf-surface); border:1px solid var(--lf-border);
  border-radius:var(--lf-radius-lg); padding:var(--lf-sp-4) var(--lf-sp-5);
  box-shadow:var(--lf-shadow-sm); display:flex; flex-direction:column; gap:2px;
  transition:border-color var(--lf-dur),box-shadow var(--lf-dur),transform var(--lf-dur);
}
.lf-stat:hover { border-color:var(--lf-border-strong); box-shadow:var(--lf-shadow-md); transform:translateY(-1px); }
.lf-stat-top { display:flex; align-items:center; justify-content:space-between; }
.lf-stat-label { font-size:var(--lf-fs-xs); color:var(--lf-text-3); font-weight:500; }
.lf-stat-ico { width:30px; height:30px; border-radius:var(--lf-radius-md); display:grid; place-items:center; font-size:14px; }
.lf-stat-ico.blue { background:var(--lf-primary-light); color:var(--lf-primary); }
.lf-stat-ico.green { background:var(--lf-success-light); color:var(--lf-success); }
.lf-stat-ico.amber { background:var(--lf-warning-light); color:var(--lf-warning); }
.lf-stat-ico.violet { background:var(--lf-purple-light); color:var(--lf-purple); }
.lf-stat-ico.red { background:var(--lf-danger-light); color:var(--lf-danger); }
.lf-stat-value { font-size:var(--lf-fs-2xl); font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.lf-stat-value small { font-size:var(--lf-fs-sm); color:var(--lf-text-3); font-weight:600; }
.lf-stat-foot { font-size:11px; color:var(--lf-text-3); display:flex; align-items:center; gap:5px; }
.lf-trend-up { color:var(--lf-success); font-weight:700; }
.lf-trend-down { color:var(--lf-danger); font-weight:700; }

/* Table */
.lf-tbl-wrap { overflow-x:auto; }
.lf-tbl { width:100%; border-collapse:collapse; font-size:var(--lf-fs-sm); }
.lf-tbl th {
  text-align:left; font-size:var(--lf-fs-xs); font-weight:700;
  color:var(--lf-text-3); text-transform:uppercase; letter-spacing:.05em;
  padding:10px var(--lf-sp-4); background:var(--lf-surface-2);
  border-bottom:1px solid var(--lf-border); white-space:nowrap;
}
.lf-tbl td { padding:11px var(--lf-sp-4); border-bottom:1px solid var(--lf-border); vertical-align:middle; }
.lf-tbl tbody tr { transition:background var(--lf-dur); }
.lf-tbl tbody tr:hover { background:var(--lf-surface-2); }
.lf-tbl tbody tr:last-child td { border-bottom:none; }
.lf-tbl .num { font-variant-numeric:tabular-nums; text-align:right; }
.lf-cell-title { font-weight:600; color:var(--lf-text); }
.lf-cell-sub { font-size:var(--lf-fs-xs); color:var(--lf-text-3); margin-top:1px; }
.lf-mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; }

/* List rows */
.lf-rows { display:flex; flex-direction:column; }
.lf-row { display:flex; align-items:center; gap:var(--lf-sp-3); padding:var(--lf-sp-3) var(--lf-sp-5); border-bottom:1px solid var(--lf-border); transition:background var(--lf-dur); }
.lf-row:last-child { border-bottom:none; }
.lf-row:hover { background:var(--lf-surface-2); }
.lf-row-main { flex:1 1 auto; min-width:0; }
.lf-row-title { font-size:var(--lf-fs-sm); font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lf-row-sub { font-size:var(--lf-fs-xs); color:var(--lf-text-3); margin-top:2px; }
.lf-row-actions { display:flex; align-items:center; gap:var(--lf-sp-2); flex:0 0 auto; }
.lf-row-prio { width:4px; align-self:stretch; border-radius:var(--lf-radius-full); flex:0 0 4px; }
.lf-row-prio.high { background:var(--lf-danger); }
.lf-row-prio.mid { background:var(--lf-warning); }
.lf-row-prio.low { background:var(--lf-gray-300); }

/* Segmented control */
.lf-seg { display:inline-flex; padding:3px; gap:2px; background:var(--lf-surface-3); border-radius:var(--lf-radius-md); }
.lf-seg button { padding:4px 12px; border-radius:var(--lf-radius-sm); font-size:var(--lf-fs-xs); font-weight:600; color:var(--lf-text-3); transition:all var(--lf-dur); display:flex; align-items:center; gap:5px; background:transparent; border:none; cursor:pointer; }
.lf-seg button:hover { color:var(--lf-text); }
.lf-seg button.on { background:var(--lf-surface); color:var(--lf-text); box-shadow:var(--lf-shadow-sm); }

/* Filter pills */
.lf-pills { display:flex; gap:6px; flex-wrap:wrap; }
.lf-pill { padding:4px 11px; border-radius:var(--lf-radius-full); font-size:var(--lf-fs-xs); font-weight:600; border:1px solid var(--lf-border); background:var(--lf-surface); color:var(--lf-text-2); transition:all var(--lf-dur); cursor:pointer; }
.lf-pill:hover { border-color:var(--lf-primary-200); color:var(--lf-primary); }
.lf-pill.on { background:var(--lf-primary); border-color:var(--lf-primary); color:#fff; }
.lf-pill .n { opacity:.75; font-variant-numeric:tabular-nums; }

/* Input / field */
.lf-field { height:34px; padding:0 var(--lf-sp-3); border:1px solid var(--lf-border); border-radius:var(--lf-radius-md); background:var(--lf-surface); font-size:var(--lf-fs-sm); color:var(--lf-text); transition:border-color var(--lf-dur),box-shadow var(--lf-dur); outline:none; width:100%; }
.lf-field:focus { border-color:var(--lf-primary); box-shadow:0 0 0 3px var(--lf-ring); }
.lf-field::placeholder { color:var(--lf-text-4); }
select.lf-field { cursor:pointer; }
textarea.lf-field { height:auto; padding:var(--lf-sp-2) var(--lf-sp-3); resize:vertical; line-height:1.6; }
.lf-form-label { font-size:var(--lf-fs-xs); color:var(--lf-text-3); display:block; margin-bottom:4px; font-weight:600; }

/* Empty state */
.lf-empty { padding:var(--lf-sp-10) var(--lf-sp-5); display:flex; flex-direction:column; align-items:center; gap:var(--lf-sp-2); text-align:center; }
.lf-empty-art { width:84px; height:84px; border-radius:var(--lf-radius-xl); background:var(--lf-surface-3); display:grid; place-items:center; margin-bottom:var(--lf-sp-2); position:relative; overflow:hidden; }
.lf-empty-art::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%); background-size:200% 100%; animation:lf-shimmer 3.2s infinite linear; }
[data-theme="dark"] .lf-empty-art::after { background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.07) 50%,transparent 70%); background-size:200% 100%; }
.lf-empty-title { font-size:var(--lf-fs-base); font-weight:600; }
.lf-empty-desc { font-size:var(--lf-fs-sm); color:var(--lf-text-3); max-width:380px; line-height:1.7; }
.lf-empty .lf-btn { margin-top:var(--lf-sp-3); }

/* Avatar + user chip */
.lf-avatar { width:30px; height:30px; border-radius:var(--lf-radius-full); background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; font-size:12px; font-weight:700; display:grid; place-items:center; flex:0 0 30px; }
.lf-user-chip { display:flex; align-items:center; gap:var(--lf-sp-2); padding:var(--lf-sp-2); border-radius:var(--lf-radius-md); transition:background var(--lf-dur); }
.lf-user-chip:hover { background:var(--lf-surface-3); }
.lf-user-chip-meta { min-width:0; flex:1; }
.lf-user-chip-name { font-size:var(--lf-fs-sm); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lf-user-chip-plan { font-size:11px; color:var(--lf-text-3); }

/* Icon button */
.lf-icon-btn { width:34px; height:34px; border-radius:var(--lf-radius-md); display:grid; place-items:center; font-size:16px; color:var(--lf-text-2); position:relative; transition:background var(--lf-dur),color var(--lf-dur),transform .12s var(--lf-ease); flex:0 0 auto; background:transparent; border:none; cursor:pointer; }
.lf-icon-btn:hover { background:var(--lf-surface-3); color:var(--lf-text); }
.lf-icon-btn:active { transform:scale(.92); }
.lf-icon-btn .dot { position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%; background:var(--lf-danger); border:2px solid var(--lf-surface); }

/* Search box */
.lf-searchbox { flex:1 1 auto; max-width:520px; display:flex; align-items:center; gap:var(--lf-sp-2); height:34px; padding:0 var(--lf-sp-3); background:var(--lf-surface-3); border:1px solid transparent; border-radius:var(--lf-radius-md); color:var(--lf-text-3); font-size:var(--lf-fs-sm); transition:border-color var(--lf-dur),background var(--lf-dur),box-shadow var(--lf-dur); cursor:text; text-align:left; }
.lf-searchbox:hover { border-color:var(--lf-border-strong); }
.lf-searchbox:focus-within { border-color:var(--lf-primary); background:var(--lf-surface); box-shadow:0 0 0 3px var(--lf-ring); }
.lf-searchbox kbd { margin-left:auto; font-family:inherit; font-size:11px; background:var(--lf-surface); border:1px solid var(--lf-border); border-bottom-width:2px; border-radius:5px; padding:1px 6px; color:var(--lf-text-3); }

/* Popover */
.lf-pop { position:absolute; top:46px; right:0; background:var(--lf-surface); border:1px solid var(--lf-border); border-radius:var(--lf-radius-lg); box-shadow:var(--lf-shadow-pop); padding:6px; z-index:80; display:none; }
.lf-pop.show { display:block; animation:lf-popIn .16s var(--lf-ease-out); }
.lf-pop-user { display:flex; gap:10px; align-items:center; padding:10px; border-bottom:1px solid var(--lf-border); margin-bottom:6px; }
.lf-pop-item { display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px; border-radius:var(--lf-radius-md); font-size:var(--lf-fs-sm); color:var(--lf-text-2); text-align:left; transition:background var(--lf-dur),color var(--lf-dur); background:transparent; border:none; }
.lf-pop-item:hover { background:var(--lf-surface-3); color:var(--lf-text); }
.lf-pop-item .k { margin-left:auto; font-size:11px; color:var(--lf-text-4); }
.lf-pop-sep { height:1px; background:var(--lf-border); margin:5px 4px; }

/* Grid helpers */
.lf-grid { display:grid; gap:var(--lf-sp-4); }
.lf-grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.lf-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.lf-grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.lf-grid-main-side { grid-template-columns:minmax(0,1fr) 320px; }
@media (max-width:1200px){ .lf-grid-4{grid-template-columns:repeat(2,1fr);} .lf-grid-main-side{grid-template-columns:1fr;} }
@media (max-width:760px){ .lf-grid-4,.lf-grid-3,.lf-grid-2{grid-template-columns:1fr;} }

/* ---------- P2.3 Element Plus 换皮（仅外观，app-theme.css 最后加载故生效） ---------- */
/* Button */
.el-button {
  height:34px; padding:0 16px; font-size:var(--lf-fs-sm); font-weight:600;
  border-radius:var(--lf-radius-md);
  transition:background var(--lf-dur),color var(--lf-dur),border-color var(--lf-dur),box-shadow var(--lf-dur),transform .12s var(--lf-ease);
}
.el-button--small { height:28px; padding:0 12px; font-size:var(--lf-fs-xs); }
.el-button--large { height:40px; padding:0 20px; font-size:var(--lf-fs-base); }
.el-button--primary { box-shadow:0 1px 2px rgba(37,99,235,.25); }
.el-button--primary:hover { box-shadow:0 2px 8px rgba(37,99,235,.3); filter:brightness(1.04); }
.el-button--success { box-shadow:0 1px 2px rgba(22,163,74,.25); }
.el-button.is-disabled, .el-button.is-disabled:hover { opacity:.5; }
.el-button:not(.is-disabled):active { transform:scale(.97); }

/* Input / Textarea */
.el-input__wrapper, .el-textarea__inner {
  background-color:var(--lf-surface) !important;
  border-radius:var(--lf-radius-md) !important;
  box-shadow:0 0 0 1px var(--lf-border) inset !important;
}
.el-input__wrapper:hover { box-shadow:0 0 0 1px var(--lf-border-strong) inset !important; }
.el-input__wrapper.is-focus, .el-textarea__inner:focus {
  box-shadow:0 0 0 1px var(--lf-primary) inset, 0 0 0 3px var(--lf-ring) !important;
}

/* Dialog */
.el-dialog { border-radius:var(--lf-radius-lg) !important; box-shadow:var(--lf-shadow-lg) !important; }
.el-overlay-dialog .el-dialog { animation:lf-popIn .18s var(--lf-ease-out); }
.el-dialog__title { font-weight:600; }

/* Card */
.el-card { border-radius:var(--lf-radius-lg) !important; border-color:var(--lf-border) !important; }
.el-card__header { padding:var(--lf-sp-4) var(--lf-sp-5) !important; font-weight:600; }

/* Tag → v4 badge */
.el-tag { border-radius:var(--lf-radius-full) !important; font-size:11px; font-weight:700; height:auto; padding:2px 9px; line-height:1.4; }

/* Table → v4 tbl */
.el-table { --el-table-border-color:var(--lf-border); --el-table-header-bg-color:var(--lf-surface-2); }
.el-table th.el-table__cell { background:var(--lf-surface-2); color:var(--lf-text-3); font-size:var(--lf-fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.el-table td.el-table__cell { padding:11px 0; }
.el-table .el-table__row:hover > td.el-table__cell { background:var(--lf-surface-2) !important; }

/* Pagination */
.el-pagination { font-size:var(--lf-fs-sm); }

/* ---------- P2.4 既有生产类收口（对照 v4） ---------- */
/* 原生按钮：对齐 v4 .btn 高度/圆角/字重 */
.native-btn { height:34px; padding:0 14px; font-size:var(--lf-fs-sm); font-weight:600; border-radius:var(--lf-radius-md); }
.native-btn:hover { border-color:var(--lf-primary); color:var(--lf-primary); background:var(--lf-primary-lighter); box-shadow:var(--lf-shadow-md); }

/* 卡片：对齐 v4 card（边框/圆角/阴影/底） */
.card, .panel { border:1px solid var(--lf-border); border-radius:var(--lf-radius-lg); box-shadow:var(--lf-shadow-sm); background:var(--lf-surface); }

/* 手写表格：对齐 v4 tbl（覆盖 section 7 的 primary-lighter 表头，本块其后故生效） */
thead th {
  background:var(--lf-surface-2) !important; color:var(--lf-text-3) !important;
  font-size:var(--lf-fs-xs) !important; font-weight:700 !important;
  text-transform:uppercase; letter-spacing:.04em;
}
tbody tr:hover { background:var(--lf-surface-2); }

/* ============================================================
   附录 D·Phase 3 — 外壳打磨（侧边栏对齐 v4 + 侧栏底用量/用户）
   仅改视觉与外壳布局；iaMode 三态切换与主题切换保持不变。
   ============================================================ */

/* P3.1 侧栏品牌块：v4 渐变方块 + 投影 */
.side-brand-mark {
  background:var(--lf-brand-grad);
  box-shadow:0 2px 8px rgba(37, 99, 235, .35);
}

/* P3.2 分组标题 → v4 大写小字 + 字距 + text-4 */
.side-group-title {
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--lf-text-4);
}

/* P3.3 导航激活态：3px 主色竖条（v4 签名） */
.side-nav-item { border-left:3px solid transparent; }
.side-nav-item.active { border-left-color:var(--lf-primary); }

/* P3.4 侧栏底：用量卡 + 用户芯片（sidebar IA 时显示） */
.sidebar-foot {
  flex:0 0 auto;
  border-top:1px solid var(--lf-border);
  padding:var(--lf-sp-3); display:flex; flex-direction:column; gap:var(--lf-sp-2);
  background:var(--lf-sidebar-bg);
}
.quota-card { background:var(--lf-surface-3); border-radius:var(--lf-radius-md); padding:10px var(--lf-sp-3); }
.quota-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.quota-num { font-size:var(--lf-fs-base); font-weight:700; font-variant-numeric:tabular-nums; }
.quota-of { font-size:var(--lf-fs-xs); color:var(--lf-text-3); }
.quota-bar { height:6px; border-radius:var(--lf-radius-full); background:var(--lf-border); overflow:hidden; }
.quota-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--lf-primary-500),var(--lf-primary-600)); transition:width .4s var(--lf-ease); }
.quota-label { font-size:11px; color:var(--lf-text-3); margin-top:5px; display:flex; justify-content:space-between; }
.user-chip {
  display:flex; align-items:center; gap:var(--lf-sp-2);
  padding:var(--lf-sp-2); border-radius:var(--lf-radius-md); width:100%;
  background:transparent; border:none; cursor:pointer; text-align:left;
  transition:background var(--lf-dur);
}
.user-chip:hover { background:var(--lf-surface-3); }
.avatar {
  width:30px; height:30px; border-radius:var(--lf-radius-full);
  background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; font-size:12px; font-weight:700;
  display:grid; place-items:center; flex:0 0 30px;
}
.user-chip-meta { min-width:0; flex:1; }
.user-chip-name { font-size:var(--lf-fs-sm); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.user-chip-plan { font-size:11px; color:var(--lf-text-3); display:block; }

/* ============================================================
   附录 D·Phase 4 — 签名 Hero + 关键页面骨架
   仅视觉；不动业务逻辑/端点/工厂返回值。
   ============================================================ */

/* P4.1 v4 签名 Hero（蓝渐变 + 光晕 + 进度环 + 快捷导航） */
.hero {
  border-radius:var(--lf-radius-xl);
  background:var(--lf-hero-grad);
  color:#fff; padding:var(--lf-sp-6) var(--lf-sp-8);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:var(--lf-sp-8);
  box-shadow:var(--lf-shadow-lg);
  margin-bottom:var(--lf-sp-6);
}
.hero::after { content:""; position:absolute; right:-60px; top:-80px; width:320px; height:320px; border-radius:50%; background:rgba(255,255,255,.10); }
.hero::before { content:""; position:absolute; right:60px; bottom:-120px; width:240px; height:240px; border-radius:50%; background:rgba(255,255,255,.07); }
.hero-body { position:relative; z-index:1; flex:1 1 auto; min-width:0; }
.hero h2 { font-size:var(--lf-fs-2xl); font-weight:700; }
.hero p { font-size:var(--lf-fs-sm); opacity:.88; margin-top:6px; max-width:560px; }
.hero-actions { display:flex; gap:var(--lf-sp-2); margin-top:var(--lf-sp-5); position:relative; z-index:1; flex-wrap:wrap; }
.btn-onhero {
  background:#fff; color:var(--lf-primary-700); border:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:34px; padding:0 var(--lf-sp-4); border-radius:var(--lf-radius-md);
  font-size:var(--lf-fs-sm); font-weight:600;
  transition:background var(--lf-dur),transform .12s var(--lf-ease);
}
.btn-onhero:hover { background:var(--lf-primary-50); }
.btn-onhero:active { transform:scale(.97); }
.btn-onhero-ghost {
  background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.35); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:34px; padding:0 var(--lf-sp-4); border-radius:var(--lf-radius-md);
  font-size:var(--lf-fs-sm); font-weight:600;
  transition:background var(--lf-dur),transform .12s var(--lf-ease);
}
.btn-onhero-ghost:hover { background:rgba(255,255,255,.25); }
.btn-onhero-ghost:active { transform:scale(.97); }
.hero-ring { flex:0 0 auto; position:relative; z-index:1; width:132px; height:132px; }
.hero-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.hero-ring .ring-track { stroke:rgba(255,255,255,.22); }
.hero-ring .ring-fill { stroke:#fff; stroke-linecap:round; transition:stroke-dashoffset 1s var(--lf-ease-out); }
.hero-ring-label { position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.hero-ring-label b { font-size:22px; font-weight:800; display:block; line-height:1.1; }
.hero-ring-label span { font-size:11px; opacity:.85; }
@media (max-width:860px){ .hero{ flex-direction:column; align-items:flex-start; } .hero-ring{ align-self:center; } }

/* ============================================================
   附录 D·Phase 5 — 微交互与无障碍
   ============================================================ */

/* P5.1 键盘焦点环（a11y）：仅作用于按钮/链接/导航项/可点击角色，
        避开 Element Plus 输入框自带的 focus 环，避免双重描边 */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
.side-nav-item:focus-visible,
.lf-icon-btn:focus-visible {
  outline: 2px solid var(--lf-primary);
  outline-offset: 2px;
  border-radius: var(--lf-radius-sm);
}

/* P5.2 进入动效（复用 P2.1 已定义的关键帧） */
.hero { animation: lf-pageIn .32s var(--lf-ease-out); }
.quick-hub { animation: lf-fadeUp .4s var(--lf-ease-out) both; }

/* P5.3 降低动效偏好：关闭过渡与循环动画（无障碍） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Dashboard / Profile / Image 页面排版（对齐 V4 .page-head：h1 21px + 描述行） */
.page-head { margin-bottom: 24px; }
.page-head h1 { font-size: var(--lf-fs-2xl); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; margin: 0; }
.page-head .desc { font-size: var(--lf-fs-sm); color: var(--lf-text-3); margin: 4px 0 0; line-height: 1.6; }
.page-head .page-head-actions { display: flex; gap: var(--lf-sp-2); align-items: center; flex-wrap: wrap; }
.page-head .sec-sub { margin: 4px 0 0; }
.page-head .lf-sec-title { margin-bottom: 6px; }
.sec-sub { font-size: var(--lf-fs-sm); color: var(--lf-text-3); margin: 0; line-height: 1.6; }
.dashboard-page .lf-grid { margin-bottom: 4px; }

/* Shared utility header */
.app-header {
  box-sizing: border-box;
  height: 60px;
  padding: 0 24px;
  gap: 20px;
  background: var(--lf-card);
  color: var(--lf-text);
  border-bottom: 1px solid var(--lf-border);
  box-shadow: 0 1px 3px rgba(20, 35, 60, .06);
}
.app-header .logo { color: var(--lf-text); }
.app-header .logo svg rect { fill: var(--lf-primary); }
.header-context { min-width: 0; margin-right: auto; overflow: hidden; color: var(--lf-text-2); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.header-context { flex: 1 1 auto; }
.header-user { display: flex; align-items: center; min-width: 0; gap: 8px; margin: 0 0 0 auto; padding: 0; }
.header-identity { display: none; }
.header-plan-button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 0 10px;
  border: 1px solid var(--lf-border);
  border-radius: 6px;
  background: var(--lf-card);
  color: var(--lf-text-2);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
}
.header-plan-button:hover { border-color: var(--lf-primary-light); background: var(--lf-surface-2); color: var(--lf-primary); }
.header-plan-button:focus-visible { outline: 2px solid var(--lf-primary); outline-offset: 2px; }
.header-plan-button .el-icon { font-size: 15px; }
.header-plan-label { white-space: nowrap; }
.header-account-menu { position: relative; flex: 0 0 auto; }
.header-account-trigger {
  display: flex;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  padding: 3px 9px 3px 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--lf-text);
  cursor: pointer;
  list-style: none;
}
.header-account-trigger::-webkit-details-marker { display: none; }
.header-account-trigger:hover,
.header-account-menu[open] .header-account-trigger { border-color: var(--lf-border); background: var(--lf-surface-2); }
.header-account-trigger .avatar { display: grid; width: 28px; height: 28px; place-items: center; flex: 0 0 28px; border-radius: 50%; background: var(--lf-primary-light); color: var(--lf-primary); font-size: 12px; font-weight: 700; }
.header-account-name { max-width: 170px; overflow: hidden; color: var(--lf-text); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.header-account-chevron { width: 6px; height: 6px; margin: -3px 0 0 2px; border-right: 1.5px solid var(--lf-text-3); border-bottom: 1.5px solid var(--lf-text-3); transform: rotate(45deg); }
.header-account-menu[open] .header-account-chevron { margin-top: 3px; transform: rotate(225deg); }
.header-account-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 240;
  display: grid;
  width: 248px;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--lf-border);
  border-radius: 7px;
  background: var(--lf-card);
  box-shadow: var(--lf-shadow-lg);
}
.header-account-summary { display: grid; gap: 3px; padding: 8px 9px 10px; border-bottom: 1px solid var(--lf-border); }
.header-account-summary strong { overflow: hidden; color: var(--lf-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.header-account-plan { color: var(--lf-text-3); font-size: 11px; }
.header-menu-action { min-height: 36px; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; color: var(--lf-text-2); cursor: pointer; font: inherit; font-size: 13px; text-align: left; }
.header-menu-action:hover { background: var(--lf-surface-2); color: var(--lf-primary); }
.header-menu-action.header-upgrade-btn { border: 1px solid var(--lf-primary-light); color: var(--lf-primary); font-weight: 600; }
.header-menu-action.header-logout { color: var(--lf-danger); }
.app-header .theme-toggle,
.header-help-button {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  flex: 0 0 36px;
  padding: 0;
  border: 1px solid var(--lf-border);
  border-radius: 6px;
  background: var(--lf-card);
  color: var(--lf-text-2);
  cursor: pointer;
  font-size: 15px;
}
.app-header .presence-indicator {
  margin: 0;
  border: 1px solid var(--lf-border);
  background: var(--lf-surface-2);
  color: var(--lf-text-3);
}
.app-header .presence-count { color: var(--lf-text-2); }
.header-theme-menu { position: relative; flex: 0 0 auto; }
.header-theme-menu .theme-toggle { list-style: none; }
.header-theme-menu .theme-toggle::-webkit-details-marker { display: none; }
.header-theme-menu .theme-toggle { margin: 0; }
.header-theme-menu[open] .theme-toggle { border-color: var(--lf-primary-light); background: var(--lf-surface-2); color: var(--lf-primary); }
.header-theme-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 240;
  display: grid;
  width: 184px;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--lf-border);
  border-radius: 7px;
  background: var(--lf-card);
  box-shadow: var(--lf-shadow-lg);
}
.header-theme-option {
  display: flex;
  min-height: 36px;
  align-items: center;
  gap: 9px;
  padding: 0 9px;
  border-radius: 5px;
  color: var(--lf-text-2);
  cursor: pointer;
  font-size: 13px;
}
.header-theme-option:hover { background: var(--lf-surface-2); color: var(--lf-text); }
.header-theme-option:has(input:checked) { background: var(--lf-primary-light); color: var(--lf-primary); font-weight: 600; }
.header-theme-option input { width: 14px; height: 14px; margin: 0; accent-color: var(--lf-primary); }
.header-theme-option .el-icon { font-size: 15px; }
.app-header .theme-toggle:hover,
.header-help-button:hover { border-color: var(--lf-primary-light); background: var(--lf-surface-2); color: var(--lf-primary); }
.language-switcher {
  position: static;
  z-index: auto;
  gap: 7px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--lf-text-3);
  font-size: 12px;
  backdrop-filter: none;
}
.language-switcher select {
  min-width: 106px;
  height: 36px;
  padding: 0 9px;
  border-color: var(--lf-border);
  background: var(--lf-card);
  color: var(--lf-text);
  font-size: 13px;
}
.header-help-button:focus-visible,
.header-account-trigger:focus-visible,
.header-theme-menu .theme-toggle:focus-visible { outline: 2px solid var(--lf-primary); outline-offset: 2px; }
[data-theme="dark"] .header-theme-popover,
[data-theme="dark"] .header-account-popover { background: var(--lf-card); }
[data-theme="sepia"] .header-theme-popover,
[data-theme="sepia"] .header-account-popover { background: var(--lf-card); }
[data-theme="dark"] .app-header { background: var(--lf-card); color: var(--lf-text); border-color: var(--lf-border); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
[data-theme="sepia"] .app-header { background: var(--lf-card); color: var(--lf-text); border-color: var(--lf-border); }

.document-history-error { display: flex; min-height: 112px; align-items: center; justify-content: center; gap: 16px; padding: 24px; color: var(--lf-danger); text-align: left; }
.document-history-error > div { display: grid; gap: 4px; }
.document-history-error strong { color: var(--lf-text); font-size: 14px; }
.document-history-error span { color: var(--lf-text-3); font-size: 12px; }

@media (max-width: 760px) {
  .app-header { height: 56px; padding: 0 10px; gap: 6px; }
  .header-user { gap: 4px; }
  .header-plan-button { width: 32px; min-width: 32px; min-height: 32px; padding: 0; }
  .header-plan-label { display: none; }
  .header-account-name,
  .language-switcher > span { display: none; }
  .header-account-trigger { min-height: 34px; padding: 2px; }
  .app-header .theme-toggle,
  .header-help-button { width: 32px; height: 32px; flex-basis: 32px; }
  .language-switcher select { min-width: 88px; height: 32px; padding: 0 6px; font-size: 12px; }
  .header-account-popover { right: -42px; width: min(248px, calc(100vw - 24px)); }
  .header-theme-popover { width: 176px; }
  .app-header .presence-count { display: none; }
  .document-history-error { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  .header-context { display: none; }
  .app-header { padding-right: 8px; padding-left: 8px; }
  .language-switcher select { min-width: 76px; }
  .header-account-popover { right: -6px; }
}

.lf-unsaved-navigation-dialog { width: min(420px, calc(100vw - 32px)); }

.client-order-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

@media (max-width: 760px) {
  .client-order-fields { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .profile-page,
  .image-page,
  [data-testid="compare-page"] {
    box-sizing: border-box;
    padding-inline: 12px;
  }

  body:has(.main-app-shell.document-shell:not(.editor-shell)) .review-sidebar-root .review-sidebar-handle,
  body:has(.main-app-shell.document-shell:not(.editor-shell)) .aux-drawer-root .aux-drawer-handle {
    display: none !important;
  }
}