/* ============================================================
   钦柯一键下单 · 品牌外壳 v3
   沉稳蓝灰配色 | 顶部 Tab 导航 | 可折叠右侧工具条
   卡片列表 | 右侧抽屉弹窗 | 全新图标与文案
   本文件只负责 UI 渲染层：配色、布局、控件、列表、弹窗。
   业务脚本、接口地址、请求参数与流程保持原样。
   ============================================================ */

/* ---------- 1. 变量：深色兜底 ---------- */
:root {
  --qk-bg: #010308;
  --qk-bg-2: #040914;
  --qk-surface: #070e1e;
  --qk-surface-2: #0b1526;
  --qk-surface-3: #0d1a30;
  --qk-line: rgba(74, 152, 255, 0.16);
  --qk-line-2: rgba(34, 211, 238, 0.34);
  --qk-ink: #eaf4ff;
  --qk-ink-2: #9db4d8;
  --qk-ink-3: #58718f;
  --qk-primary: #22e0ff;
  --qk-primary-2: #3b82f6;
  --qk-primary-soft: rgba(34, 224, 255, 0.12);
  --qk-accent: #8b5cf6;
  --qk-success: #22e0a6;
  --qk-warning: #ffc24b;
  --qk-danger: #ff5d73;
  --qk-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --qk-shadow-2: 0 10px 30px rgba(0, 0, 0, 0.35);
  --qk-shadow-3: 0 22px 60px rgba(0, 0, 0, 0.45);
}

/* ---------- 2. 变量：白底蓝灰主方案（默认） ---------- */
html[data-theme="light"] {
  --qk-bg: #eef1f5;
  --qk-bg-2: #f4f6f9;
  --qk-surface: #ffffff;
  --qk-surface-2: #f7f9fb;
  --qk-surface-3: #eef2f7;
  --qk-line: #dce2ea;
  --qk-line-2: #c3ceda;
  --qk-ink: #1e2a38;
  --qk-ink-2: #47586c;
  --qk-ink-3: #7a8a9c;
  --qk-primary: #3d5a80;
  --qk-primary-2: #2b4560;
  --qk-primary-soft: #e8eef5;
  --qk-accent: #6d8fab;
  --qk-success: #3f7d5c;
  --qk-warning: #a9741f;
  --qk-danger: #b5443a;
  --qk-shadow-1: 0 1px 2px rgba(30, 42, 56, 0.05);
  --qk-shadow-2: 0 6px 20px rgba(30, 42, 56, 0.07);
  --qk-shadow-3: 0 18px 48px rgba(30, 42, 56, 0.14);

  /* 接管旧变量，让原有组件自动换成品牌色 */
  --bg-0: var(--qk-bg);
  --bg-1: var(--qk-bg-2);
  --bg-2: var(--qk-surface);
  --bg-3: var(--qk-surface-3);
  --panel: rgba(255, 255, 255, 0.94);
  --panel-2: #ffffff;
  --line: var(--qk-line);
  --line-strong: var(--qk-line-2);
  --text-1: var(--qk-ink);
  --text-2: var(--qk-ink-2);
  --text-3: var(--qk-ink-3);
  --cyan: var(--qk-primary);
  --blue: var(--qk-primary-2);
  --violet: var(--qk-accent);
  --green: var(--qk-success);
  --amber: var(--qk-warning);
  --red: var(--qk-danger);
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 9px;
}

/* ---------- 3. 基础 ---------- */
html[data-theme="light"] body {
  background: var(--qk-bg);
  color: var(--qk-ink);
}
html[data-theme="light"] .fx-aurora,
html[data-theme="light"] .fx-grid,
html[data-theme="light"] .fx-stars,
html[data-theme="light"] .fx-vignette,
html[data-theme="light"] .scanline { display: none; }
html[data-theme="light"] .fx-bg {
  background:
    radial-gradient(920px 420px at 88% -12%, #e6ecf3, transparent 62%),
    radial-gradient(680px 360px at -8% 108%, #eaedf2, transparent 60%),
    var(--qk-bg);
}
html[data-theme="light"] .main::-webkit-scrollbar-thumb,
html[data-theme="light"] .sidebar::-webkit-scrollbar-thumb,
html[data-theme="light"] .qk-rail-body::-webkit-scrollbar-thumb { background: #ccd5df; border-radius: 999px; }
html[data-theme="light"] .main::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] .qk-rail-body::-webkit-scrollbar-thumb:hover { background: #b7c3d0; }

/* ---------- 4. 顶栏 ---------- */
.topbar { height: 62px; gap: 14px; padding: 0 18px; }
html[data-theme="light"] .topbar {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--qk-line);
  box-shadow: 0 1px 0 rgba(30, 42, 56, 0.02);
}
html[data-theme="light"] .topbar::after { display: none; }
html[data-theme="light"] .brand { min-width: 208px; }
html[data-theme="light"] .brand-logo {
  width: 36px; height: 36px; border-radius: 12px;
  background: linear-gradient(150deg, var(--qk-primary), var(--qk-primary-2));
  color: #fff; box-shadow: 0 6px 16px rgba(61, 90, 128, 0.26);
  animation: none;
}
html[data-theme="light"] .brand-name {
  background: none; color: var(--qk-ink); filter: none;
  font-size: 17px; letter-spacing: 0.6px;
}
html[data-theme="light"] .brand-sub { color: var(--qk-ink-3); letter-spacing: 2.4px; }
html[data-theme="light"] .announce { display: none; }

/* 顶部搜索 */
.qk-search { position: relative; display: flex; align-items: center; flex: 0 1 330px; min-width: 150px; }
.qk-search input {
  width: 100%; height: 36px; padding: 0 12px 0 34px;
  border: 1px solid var(--qk-line); border-radius: 11px;
  background: var(--qk-surface); color: var(--qk-ink);
  font-family: inherit; font-size: 12.5px; outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.qk-search input::placeholder { color: var(--qk-ink-3); }
.qk-search input:focus { border-color: var(--qk-primary); box-shadow: 0 0 0 3px rgba(61, 90, 128, 0.13); }
.qk-search-ico { position: absolute; left: 12px; color: var(--qk-ink-3); font-size: 14px; pointer-events: none; }

/* 顶栏控件 */
html[data-theme="light"] .btn {
  height: 34px; padding: 0 14px; border-radius: 10px;
  background: var(--qk-surface); border: 1px solid var(--qk-line);
  color: var(--qk-ink-2); font-weight: 500; box-shadow: var(--qk-shadow-1);
}
html[data-theme="light"] .btn::after { display: none; }
html[data-theme="light"] .btn:hover {
  background: var(--qk-surface-2); border-color: var(--qk-line-2);
  color: var(--qk-primary-2); box-shadow: 0 3px 10px rgba(30, 42, 56, 0.09);
  transform: none;
}
html[data-theme="light"] .btn.primary {
  background: var(--qk-primary); border-color: var(--qk-primary);
  color: #fff; box-shadow: 0 3px 12px rgba(61, 90, 128, 0.26);
}
html[data-theme="light"] .btn.primary:hover { background: var(--qk-primary-2); color: #fff; filter: none; }
html[data-theme="light"] .btn.danger-outline { color: var(--qk-danger); border-color: rgba(181, 68, 58, 0.42); }
html[data-theme="light"] .icon-btn { width: 34px; height: 34px; border-radius: 10px; color: var(--qk-ink-3); background: transparent; }
html[data-theme="light"] .icon-btn:hover { color: var(--qk-primary-2); background: var(--qk-primary-soft); border-color: transparent; box-shadow: none; }
html[data-theme="light"] .icon-btn svg { width: 17px; height: 17px; }
html[data-theme="light"] .user-chip { background: var(--qk-surface); border-color: var(--qk-line); color: var(--qk-ink-2); }
html[data-theme="light"] .avatar { background: linear-gradient(140deg, var(--qk-primary), var(--qk-accent)); color: #fff; box-shadow: none; }
html[data-theme="light"] .notify-badge { background: var(--qk-danger); box-shadow: none; }

/* ---------- 5. 顶部 Tab 导航 ---------- */
:root { --qk-titlebar-h: 0px; }
html.qk-frameless { --qk-titlebar-h: 38px; }
/* B21（2026-09-26 主控实现）：外壳改回「左侧竖排侧边栏 + 右侧工作区」。
   原来是 `.layout` 纵向 + `.sidebar` 56px 横条，逼得各平台窗口自己注入 CSS 反着改回来（拼多多窗口做了一次）；
   现在外壳自己就是竖排，那些注入层可以撤。 */
.layout { display: flex; flex-direction: row; height: calc(100vh - 62px - var(--qk-titlebar-h)); }
.sidebar {
  width: 208px; min-width: 152px; height: auto; padding: 10px 10px 14px;
  flex-direction: column; align-items: stretch; gap: 2px;
  align-self: stretch; max-height: none;
  overflow-x: hidden; overflow-y: auto; border-right: 1px solid var(--line);
  border-bottom: 0;
}
.sidebar::-webkit-scrollbar { height: 0; }
/* qk-nav-fade: 顶部 Tab 超出时按方向渐隐，提示可以横向滚动 */
.sidebar { scroll-behavior: smooth; }
.sidebar.has-more-right { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 38px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 38px), transparent 100%); }
.sidebar.has-more-left { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38px); mask-image: linear-gradient(90deg, transparent 0, #000 38px); }
.sidebar.has-more-left.has-more-right { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38px, #000 calc(100% - 38px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 38px, #000 calc(100% - 38px), transparent 100%); }
/* 分组竖排：标题一行（可点击折叠），菜单项在下面 */
.sidebar .nav-group { display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; }
.sidebar .nav-group + .nav-group { margin: 8px 0 0; padding: 8px 0 0; border-left: 0; border-top: 1px solid var(--line); }
.sidebar .nav-group-title {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; margin: 0 0 2px;
  font-size: 11px; letter-spacing: .04em;
  color: var(--text-3, #8b93a5); cursor: pointer; user-select: none;
}
/* 折叠指示：展开 ▾ / 折叠 ▸（纯 CSS，不依赖图标字体） */
.sidebar .nav-group-title::after { content: "▾"; margin-left: auto; font-size: 10px; opacity: .75; }
.sidebar .nav-group.collapsed .nav-group-title::after { content: "▸"; }
/* 折叠态只藏该组的菜单项，标题保留（用户随时展开） */
.sidebar .nav-group.collapsed .nav-item { display: none; }
.sidebar .nav-group-title:hover { color: var(--text-2, #b9c1d1); }
.sidebar .nav-item {
  height: 38px; margin: 0; padding: 0 12px; gap: 7px;
  border-radius: 10px; border: 0; font-size: 12.5px; white-space: nowrap;
}
.sidebar .nav-item .n-icon { width: 16px; height: 16px; display: grid; place-items: center; }
.sidebar .nav-item .n-icon svg { width: 16px; height: 16px; }
.sidebar .nav-item.active::before { display: none; }
.sidebar .nav-badge { margin-left: 5px; height: 16px; min-width: 16px; font-size: 10px; box-shadow: none; }
.sidebar .sidebar-foot { display: none; }
html[data-theme="light"] .sidebar { background: rgba(255, 255, 255, 0.94); }
html[data-theme="light"] .sidebar .nav-item { color: var(--qk-ink-2); }
html[data-theme="light"] .sidebar .nav-item .n-icon { color: var(--qk-ink-3); text-shadow: none; }
html[data-theme="light"] .sidebar .nav-item:hover { background: var(--qk-surface-2); color: var(--qk-ink); }
html[data-theme="light"] .sidebar .nav-item.active { background: var(--qk-primary-soft); color: var(--qk-primary-2); box-shadow: none; }
html[data-theme="light"] .sidebar .nav-item.active .n-icon { color: var(--qk-primary); text-shadow: none; }
html[data-theme="light"] .sidebar .nav-badge { background: var(--qk-danger); }

/* ---------- 6. 工作区与右侧工具条 ---------- */
.qk-workspace { flex: 1; display: flex; min-width: 0; min-height: 0; }
.main { flex: 1; min-width: 0; padding: 20px 24px 18px; }
.qk-rail {
  width: 296px; flex: 0 0 296px; display: flex; flex-direction: column; min-height: 0;
  border-left: 1px solid var(--line);
  transition: flex-basis 0.2s ease, width 0.2s ease;
}
.qk-rail.collapsed { width: 54px; flex-basis: 54px; }
.qk-rail-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px; border-bottom: 1px solid var(--line); }
.qk-rail-title { font-size: 12.5px; font-weight: 600; color: var(--qk-ink-2); }
.qk-rail-toggle {
  width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center;
  border: 1px solid var(--qk-line); border-radius: 9px; background: var(--qk-surface);
  color: var(--qk-ink-2); cursor: pointer; font-family: inherit; font-size: 13px;
}
.qk-rail-toggle:hover { color: var(--qk-primary-2); border-color: var(--qk-line-2); }
.qk-rail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.qk-rail.collapsed .qk-rail-body, .qk-rail.collapsed .qk-rail-title { display: none; }
html[data-theme="light"] .qk-rail { background: rgba(255, 255, 255, 0.72); }

/* ---------- 7. 卡片与统计 ---------- */
html[data-theme="light"] .card {
  background: var(--qk-surface); border: 1px solid var(--qk-line);
  border-radius: 18px; box-shadow: var(--qk-shadow-1);
}
html[data-theme="light"] .card::before { display: none; }
html[data-theme="light"] .card-title { padding: 16px 18px 0; color: var(--qk-ink); }
html[data-theme="light"] .card-title .tick {
  width: 6px; height: 14px; border-radius: 3px;
  background: var(--qk-primary); box-shadow: none; transform: none;
}
html[data-theme="light"] .card-title .more { color: var(--qk-ink-3); }
html[data-theme="light"] .card-title .more:hover { color: var(--qk-primary); }
html[data-theme="light"] .stat-card {
  background: var(--qk-surface); border: 1px solid var(--qk-line);
  border-radius: 16px; box-shadow: var(--qk-shadow-1);
}
html[data-theme="light"] .stat-card .glow { display: none; }
html[data-theme="light"] .stat-card:hover {
  transform: translateY(-1px); border-color: var(--qk-line-2); box-shadow: var(--qk-shadow-2);
}
html[data-theme="light"] .stat-label { color: var(--qk-ink-3); }
html[data-theme="light"] .stat-value { font-size: 26px; color: var(--qk-ink); }
html[data-theme="light"] .list-card { padding: 14px 16px; }
html[data-theme="light"] .list-row { border-radius: 12px; }
html[data-theme="light"] .list-row:hover { background: var(--qk-surface-2); border-color: var(--qk-line); }
html[data-theme="light"] .list-row .icon { background: var(--qk-primary-soft); color: var(--qk-primary); }
html[data-theme="light"] .config-item { background: var(--qk-surface-2); border: 1px solid var(--qk-line); border-radius: 14px; }
html[data-theme="light"] .config-item:hover { border-color: var(--qk-line-2); }
html[data-theme="light"] .config-head .ico { background: var(--qk-primary-soft); border-color: transparent; color: var(--qk-primary); }

/* ---------- 8. 筛选与控件 ---------- */
html[data-theme="light"] .filter-grid { gap: 12px 20px; padding: 16px 18px 4px; }
html[data-theme="light"] .field label { color: var(--qk-ink-3); }
html[data-theme="light"] .control {
  height: 34px; padding: 0 12px; border-radius: 10px;
  background: var(--qk-surface); border: 1px solid var(--qk-line); color: var(--qk-ink);
}
html[data-theme="light"] .control:hover { border-color: var(--qk-line-2); }
html[data-theme="light"] .control:focus { border-color: var(--qk-primary); box-shadow: 0 0 0 3px rgba(61, 90, 128, 0.13); }
html[data-theme="light"] .control-suffix::after { border-color: var(--qk-ink-3); }
html[data-theme="light"] .hint { color: var(--qk-ink-3); }
html[data-theme="light"] .chip { background: var(--qk-surface); border: 1px solid var(--qk-line); color: var(--qk-ink-2); }
html[data-theme="light"] .chip:hover { color: var(--qk-primary-2); border-color: var(--qk-line-2); box-shadow: none; }
html[data-theme="light"] .chip.active { background: var(--qk-primary-soft); border-color: var(--qk-primary); color: var(--qk-primary-2); box-shadow: none; }
html[data-theme="light"] .chip.active b { color: var(--qk-primary-2); text-shadow: none; }
html[data-theme="light"] .switch { color: var(--qk-ink-3); }
html[data-theme="light"] .switch .track { background: #e3e8ef; border-color: #d3dae3; }
html[data-theme="light"] .switch.on { color: var(--qk-primary-2); }
html[data-theme="light"] .switch.on .track { background: var(--qk-primary); border-color: var(--qk-primary); box-shadow: none; }
html[data-theme="light"] .switch.on .track::after { box-shadow: none; }

/* ---------- 9. 列表：表格转独立卡片 ---------- */
.table-wrap { overflow: visible; }
html[data-theme="light"] .table-wrap table { display: block; width: 100%; min-width: 0 !important; }
.table-wrap thead { display: none; }
.table-wrap tbody { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px 18px; }
html[data-theme="light"] .table-wrap tbody tr {
  position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 22px; padding: 16px 54px 16px 18px;
  border: 1px solid var(--qk-line); border-radius: 16px; background: var(--qk-surface);
  box-shadow: var(--qk-shadow-1);
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
html[data-theme="light"] .table-wrap tbody tr:hover {
  border-color: var(--qk-line-2); box-shadow: var(--qk-shadow-2); transform: translateY(-1px);
}
.table-wrap tbody td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; }
.table-wrap tbody td::before {
  content: attr(data-label); display: block; margin-bottom: 4px;
  font-size: 11px; color: var(--qk-ink-3);
}
.table-wrap tbody td:not([data-label])::before,
.table-wrap tbody td[data-label=""]::before { display: none; }
.table-wrap tbody td.qk-select { position: absolute; top: 18px; right: 18px; }
/* qk-select-tip: 卡片右上角勾选位 */
.table-wrap tbody td.qk-select { display: flex; align-items: center; justify-content: flex-end; cursor: pointer; }
.table-wrap tbody tr:hover td.qk-select::after { content: "勾选"; margin-right: 6px; font-size: 11px; color: var(--qk-ink-3); }
.table-wrap tbody td.qk-select input { width: 16px; height: 16px; accent-color: var(--qk-primary); }
.table-wrap tbody td.qk-wide { grid-column: 1 / -1; }
.table-wrap tbody td.qk-actions { grid-column: 1 / -1; padding-top: 4px !important; border-top: 1px dashed var(--qk-line) !important; }
.table-wrap tbody tr.qk-empty { display: block; padding: 28px 18px; text-align: center; }
.qk-cards-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px 0; }
.qk-cards-count { font-size: 12px; color: var(--qk-ink-3); }
.qk-cards-all { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--qk-ink-2); cursor: pointer; }
.qk-cards-all input { width: 15px; height: 15px; accent-color: var(--qk-primary); }

/* ---------- 9·补. 卡片转化的**完整豁免**（B18-⑦ 配套，主控 2026-09-26） ----------
   背景：原来 `data-qk-no-cards="1"` 只豁免了 JS 转换（不插 data-label / .qk-cards-head），
   但**上面那套卡片 CSS 照旧生效**（`thead` 隐藏、`td` 变 block）→ 于是"本页要保持表格语义"的
   页面看着仍然是卡片，只能各自再写一层"反向还原"CSS（多来源打架）。
   现在约定：**属性打到 .table-wrap 或 table 上，渲染整条链路都走表格语义**。
   取值与原型自带表格样式一致（`thead th` 粘顶、`td` 11px/12px、行悬停高亮），避免两处样式互相覆盖。 */
.table-wrap[data-qk-no-cards="1"] table,
html[data-theme="light"] .table-wrap[data-qk-no-cards="1"] table {
  display: table; width: 100%; min-width: 1400px;
}
.table-wrap[data-qk-no-cards="1"] thead { display: table-header-group; }
.table-wrap[data-qk-no-cards="1"] tbody { display: table-row-group; flex-direction: row; gap: 0; padding: 0; }
.table-wrap[data-qk-no-cards="1"] tbody tr,
html[data-theme="light"] .table-wrap[data-qk-no-cards="1"] tbody tr {
  position: relative; display: table-row; grid-template-columns: none;
  gap: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none;
}
.table-wrap[data-qk-no-cards="1"] tbody tr:hover,
html[data-theme="light"] .table-wrap[data-qk-no-cards="1"] tbody tr:hover {
  border-color: transparent; box-shadow: none; transform: none;
}
.table-wrap[data-qk-no-cards="1"] tbody td {
  display: table-cell; padding: 11px 12px !important; border: 0 !important;
  border-bottom: 1px solid var(--line) !important; vertical-align: top; min-width: 0;
}
.table-wrap[data-qk-no-cards="1"] tbody td::before { content: none; display: none; }
.table-wrap[data-qk-no-cards="1"] tbody td.qk-select { position: static; display: table-cell; justify-content: flex-start; }
.table-wrap[data-qk-no-cards="1"] tbody tr:hover td.qk-select::after { content: none; }
.table-wrap[data-qk-no-cards="1"] tbody td.qk-wide,
.table-wrap[data-qk-no-cards="1"] tbody td.qk-actions {
  grid-column: auto; border-top: 0 !important; padding-top: 11px !important;
}
.table-wrap[data-qk-no-cards="1"] tbody tr.qk-empty { display: table-row; padding: 0; text-align: left; }

/* ---------- 10. 列表内的文字与标签 ---------- */
html[data-theme="light"] .primary-id { color: var(--qk-primary-2); }
html[data-theme="light"] .primary-id:hover { text-decoration: underline; }
html[data-theme="light"] .secondary-id { color: var(--qk-ink-3); }
html[data-theme="light"] .tag { background: var(--qk-surface-2); border: 1px solid var(--qk-line); color: var(--qk-ink-2); }
html[data-theme="light"] .tag.green { color: var(--qk-success); border-color: rgba(63, 125, 92, 0.3); }
html[data-theme="light"] .tag.blue { color: var(--qk-primary); border-color: rgba(61, 90, 128, 0.28); }
html[data-theme="light"] .tag.amber { color: var(--qk-warning); border-color: rgba(169, 116, 31, 0.3); }
html[data-theme="light"] .tag.red,
html[data-theme="light"] .tag.mask { color: var(--qk-danger); border-color: rgba(181, 68, 58, 0.3); }
html[data-theme="light"] .tag.violet { color: #6b5b95; border-color: rgba(107, 91, 149, 0.3); }
html[data-theme="light"] .action-link { color: var(--qk-primary); }
html[data-theme="light"] .action-link.violet { color: #6b5b95; }
html[data-theme="light"] .action-link.danger { color: var(--qk-danger); }
html[data-theme="light"] .shop-cell { color: var(--qk-ink-2); }
html[data-theme="light"] .goods-thumb { background: var(--qk-surface-3); border: 1px solid var(--qk-line); color: var(--qk-ink-3); }
html[data-theme="light"] .fin .profit { color: var(--qk-success); text-shadow: none; }
html[data-theme="light"] .fin .loss { color: var(--qk-danger); }
html[data-theme="light"] .table-foot { background: var(--qk-surface-2); border-top: 1px solid var(--qk-line); }
html[data-theme="light"] .account-pill { background: var(--qk-surface); border-color: var(--qk-line); color: var(--qk-ink-2); }
html[data-theme="light"] .pager button { background: var(--qk-surface); border-color: var(--qk-line); color: var(--qk-ink-2); }
html[data-theme="light"] .pager button:hover:not(:disabled) { color: var(--qk-primary-2); border-color: var(--qk-primary); box-shadow: none; }
html[data-theme="light"] .pager .current { background: var(--qk-primary); border-color: var(--qk-primary); color: #fff; box-shadow: none; }

/* ---------- 11. 弹窗 -> 右侧抽屉 ---------- */
/* 抽屉从自绘标题栏下方开始：否则标题会被标题栏盖住（浏览器预览里 --qk-titlebar-h 是 0，行为不变） */
.modal-mask { top: var(--qk-titlebar-h); }
.modal-mask.show { display: flex; align-items: stretch; justify-content: flex-end; padding: 0; }
.modal {
  width: min(620px, 94vw); height: 100%; max-height: none;
  border-radius: 20px 0 0 20px; transform: translateX(40px);
  transition: transform 0.26s cubic-bezier(0.32, 1, 0.32, 1);
}
.modal-mask.show .modal { transform: none; }
html[data-theme="light"] .modal-mask { background: rgba(28, 40, 56, 0.34); }
html[data-theme="light"] .modal {
  background: var(--qk-surface); border: 1px solid var(--qk-line); border-left: 0;
  box-shadow: -26px 0 60px rgba(30, 42, 56, 0.18);
}
html[data-theme="light"] .modal-head {
  padding: 20px 22px 12px; font-size: 16px; color: var(--qk-ink);
  border-bottom: 1px solid var(--qk-line);
}
html[data-theme="light"] .modal-head .close { color: var(--qk-ink-3); border-radius: 9px; }
html[data-theme="light"] .modal-head .close:hover { color: var(--qk-danger); background: rgba(181, 68, 58, 0.08); }
html[data-theme="light"] .modal-body { padding: 16px 22px 22px; }
html[data-theme="light"] .modal-actions { padding-top: 14px; border-top: 1px solid var(--qk-line); }
html[data-theme="light"] .kv { border-bottom-color: var(--qk-line); }
html[data-theme="light"] .kv .k { color: var(--qk-ink-3); }
html[data-theme="light"] #logBody {
  background: #f8fafc !important; border-color: var(--qk-line) !important;
  color: var(--qk-ink-2) !important; border-radius: 12px !important;
}

/* ---------- 12. 页头 / 空状态 / 提示 ---------- */
html[data-theme="light"] .page-title { font-size: 19px; color: var(--qk-ink); letter-spacing: 0.3px; }
html[data-theme="light"] .page-title .bar { background: var(--qk-primary); box-shadow: none; }
html[data-theme="light"] .page-sub { color: var(--qk-ink-3); }
html[data-theme="light"] .breadcrumb { color: var(--qk-ink-3); }
html[data-theme="light"] .breadcrumb b { color: var(--qk-primary-2); text-shadow: none; }
html[data-theme="light"] .empty { color: var(--qk-ink-3); }
html[data-theme="light"] .empty .big { opacity: 0.35; }
html[data-theme="light"] .toast-wrap { top: 74px; right: 20px; }
html[data-theme="light"] .toast {
  background: var(--qk-surface); border: 1px solid var(--qk-line);
  border-left: 3px solid var(--qk-primary); border-radius: 12px;
  color: var(--qk-ink); box-shadow: var(--qk-shadow-2);
}
html[data-theme="light"] .engine-badge {
  left: 20px; bottom: 12px; background: var(--qk-surface);
  border-color: var(--qk-line); color: var(--qk-ink-2); box-shadow: var(--qk-shadow-1);
}
html[data-theme="light"] .engine-badge .led { background: var(--qk-success); box-shadow: none; }

/* ---------- 13. 图表与进度 ---------- */
html[data-theme="light"] .progress { background: #e6ebf1; }
html[data-theme="light"] .bar-track { background: #e6ebf1; }
html[data-theme="light"] .bar-fill { background: linear-gradient(180deg, var(--qk-accent), var(--qk-primary)); box-shadow: none; }
html[data-theme="light"] .bar-label { color: var(--qk-ink-3); }

/* ---------- 14. 右侧工具条组件 ---------- */
.qk-widget { border: 1px solid var(--qk-line); border-radius: 14px; padding: 12px; background: var(--qk-surface); }
.qk-widget-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 9px; font-size: 12.5px; font-weight: 600; color: var(--qk-ink);
}
.qk-mini {
  border: 1px solid var(--qk-line); border-radius: 8px; background: var(--qk-surface-2);
  color: var(--qk-ink-2); font-family: inherit; font-size: 11px; padding: 3px 8px; cursor: pointer;
}
.qk-mini:hover { color: var(--qk-primary-2); border-color: var(--qk-line-2); }
.qk-log, .qk-pins { list-style: none; display: flex; flex-direction: column; gap: 7px; max-height: 210px; overflow-y: auto; }
.qk-log-item { display: flex; gap: 8px; font-size: 11.5px; line-height: 1.5; color: var(--qk-ink-2); }
.qk-log-time { flex: 0 0 auto; color: var(--qk-ink-3); }
.qk-log-empty { font-size: 11.5px; color: var(--qk-ink-3); }
.qk-pin {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--qk-ink-2);
  cursor: pointer; padding: 6px 8px; border-radius: 8px;
}
.qk-pin:hover { background: var(--qk-surface-2); color: var(--qk-primary-2); }
.qk-pin-remove { margin-left: auto; color: var(--qk-ink-3); font-size: 11px; }
.qk-tip { font-size: 11.5px; line-height: 1.65; color: var(--qk-ink-3); }

/* ---------- 15. 启动页 ---------- */
.qk-splash {
  position: fixed; inset: 0; z-index: 999; display: grid; place-items: center;
  background: var(--qk-surface); transition: opacity 0.42s ease;
}
.qk-splash.hide { opacity: 0; pointer-events: none; }
.qk-splash-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.qk-splash-logo {
  width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--qk-primary), var(--qk-primary-2));
  color: #fff; font-size: 32px; font-weight: 800;
  box-shadow: 0 14px 36px rgba(61, 90, 128, 0.26);
}
.qk-splash-name { font-size: 19px; font-weight: 700; color: var(--qk-ink); letter-spacing: 1px; }
.qk-splash-sub { font-size: 11px; letter-spacing: 2px; color: var(--qk-ink-3); }
.qk-splash-bar { width: 148px; height: 4px; border-radius: 999px; background: #e6ebf1; overflow: hidden; margin-top: 6px; }
.qk-splash-bar i { display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--qk-primary); animation: qkSplash 0.9s ease forwards; }
@keyframes qkSplash { from { width: 6%; } to { width: 100%; } }

/* ---------- 16. 关于抽屉 ---------- */
.qk-about-hero { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.qk-about-logo {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--qk-primary), var(--qk-primary-2));
  color: #fff; font-size: 22px; font-weight: 800;
}
.qk-about-name { font-size: 15px; font-weight: 700; color: var(--qk-ink); }
.qk-about-sub { font-size: 11.5px; color: var(--qk-ink-3); margin-top: 2px; }

/* qk-btn-icon: 按钮内的新线性图标 */
.qk-bi { display: inline-flex; align-items: center; justify-content: center; margin-right: 7px; vertical-align: -2px; opacity: 0.92; }
.qk-bi svg { width: 14px; height: 14px; }
.qk-bi.qk-bi-trail { margin-right: 0; margin-left: 7px; }

/* ---------- 17. 自绘窗口标题栏（仅桌面端启用） ---------- */
.qk-titlebar { display: none; }
html.qk-frameless .qk-titlebar {
  display: flex; align-items: center; gap: 10px;
  height: var(--qk-titlebar-h); padding: 0 6px 0 12px;
  background: var(--qk-surface); border-bottom: 1px solid var(--qk-line);
  position: relative; z-index: 1000;
  -webkit-app-region: drag; user-select: none;
}
.qk-tb-brand { display: flex; align-items: center; gap: 8px; }
.qk-tb-mark {
  width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--qk-primary), var(--qk-primary-2));
  color: #fff; font-size: 11px; box-shadow: 0 3px 8px rgba(61, 90, 128, 0.24);
}
.qk-tb-name { font-size: 12px; color: var(--qk-ink); letter-spacing: 0.5px; }
.qk-tb-tag {
  font-size: 10.5px; color: var(--qk-ink-3); border: 1px solid var(--qk-line);
  border-radius: 999px; padding: 1px 8px;
}
.qk-tb-drag { flex: 1; height: 100%; }
.qk-tb-actions { display: flex; align-items: center; gap: 2px; -webkit-app-region: no-drag; }
.qk-tb-btn {
  width: 38px; height: 28px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--qk-ink-2); cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.qk-tb-btn svg { width: 15px; height: 15px; }
.qk-tb-btn:hover { background: var(--qk-surface-2); color: var(--qk-primary-2); }
.qk-tb-btn.danger:hover { background: var(--qk-danger); color: #fff; }
.qk-tb-btn.restored { color: var(--qk-primary); }