/* ═══════════════════════════════════════════════════════════════
   皮肤：flat（极简扁平）
   ─────────────────────────────────────────────────────────────
   暖白底 + 纯白卡片 + 1px 发丝边框：零阴影、零渐变、零纹理、零装饰层。
   唯一的色彩是天青（teal）点缀——选中态、主按钮、进度条，其余全部中性灰。
   层次感全靠排版（字重/字号/字距）和留白，不靠光影。
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 令牌 ─────────────────────────── */
[data-skin="flat"] {
  /* 底与面板：暖白底、纯白卡 */
  --bg: #f7f7f5;
  --panel: #ffffff;
  --panel-2: #f4f4f1;
  --panel-3: #ecece8;
  --ink: #18181b;
  --muted: #5b6068;
  --faint: #9aa0a8;
  --line: #e8e8e4;
  --line-2: #dcdcd6;

  /* 强调：天青。白字压 #0f766e 对比 ≈5.5:1；文字态用更深的 #115e59（≈7.6:1） */
  --accent: #0f766e;
  --accent-2: #115e59;
  --accent-soft: #e0f2ef;
  --on-accent: #ffffff;
  --accent-grad: linear-gradient(180deg, #0f766e 0%, #0f766e 100%); /* 扁平：假渐变 */

  /* 外壳：纯白，与内容区只差一道发丝边 */
  --shell-bg: #ffffff;
  --shell-2: #f4f4f1;
  --shell-ink: #18181b;
  --shell-muted: #5b6068;
  --shell-faint: #9aa0a8;

  /* 装饰令牌：封面色块也是纯平 */
  --cover-grad: linear-gradient(180deg, #e4e7ec 0%, #e4e7ec 100%);
  --cover-grad-2: linear-gradient(180deg, #efe4da 0%, #efe4da 100%);
  --track: #ededea;
  --row-hover: #f5f5f2;
  --scrollbar: #d4d4d0;
  --sec-title: var(--shell-ink);
  --sec-faint: var(--shell-faint);

  /* 语义 */
  --ok: #15803d;
  --danger: #dc2626;
  --danger-soft: #fbe9e7;

  /* 圆角：小且一致，不玩形状 */
  --r-xl: 14px;
  --r-lg: 12px;
  --r-md: 8px;
  --r-mark: 6px;
  --r-pill: 999px;

  /* 阴影：全部归零 —— 扁平的核心 */
  --shadow: none;
  --shadow-sm: none;
  --shadow-accent: none;
  --shadow-hover: none;

  /* 字体：标题不另用装饰体，靠字重分层 */
  --font-head: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;

  color-scheme: light;
}

/* 标注页（mark.css 把令牌挂在 body 上，0,1,1 > 0,0,1 压过去） */
[data-skin="flat"] body {
  --canvas: #f7f7f5;
  --panel: #ffffff;
  --paper: #ffffff;
  --ink: #18181b;
  --ink-soft: #5b6068;
  --line: #e8e8e4;
  --sel: #0f766e;
  --r-lg: 12px;
  --r-md: 8px;
  --shadow-sm: none;
  --shadow: none;
  --lv-alpha: .12;
}

/* ─────────────────── 全局小件 ─────────────────── */
[data-skin="flat"] { background-color: var(--bg); }
[data-skin="flat"] body { background: transparent; color: var(--ink); }
[data-skin="flat"] ::selection { background: var(--accent-soft); color: var(--accent-2); }
[data-skin="flat"] :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ─────────────────────────── 外壳 ─────────────────────────── */
/* 侧栏/顶栏纯白，用发丝边与内容区分界，不投影 */
[data-skin="flat"] .sidebar {
  background: var(--shell-bg);
  color: var(--shell-ink);
  box-shadow: none;
  border-right: 1px solid var(--line);
}
[data-skin="flat"] .topbar {
  background: var(--shell-bg);
  color: var(--shell-ink);
  box-shadow: none;
  border-bottom: 1px solid var(--line);
}

/* 品牌标：一颗素净的天青小圆角块，仅此而已 */
[data-skin="flat"] .brand { color: var(--shell-ink); }
[data-skin="flat"] .brand-mark {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--r-mark);
  box-shadow: none;
  font-weight: 700;
}
[data-skin="flat"] .brand-text strong { font-weight: 700; letter-spacing: -.01em; }
[data-skin="flat"] .brand-text em { color: var(--shell-faint); }

/* 导航：选中不是色块，是天青浅底 + 深色文字 —— 克制 */
[data-skin="flat"] .rail-item { color: var(--shell-muted); font-weight: 500; }
[data-skin="flat"] .rail-item:hover { background: var(--shell-2); color: var(--shell-ink); }
[data-skin="flat"] .rail-item.is-active {
  background: var(--accent-soft);
  color: var(--accent-2);
  font-weight: 600;
}
[data-skin="flat"] .rail-cta {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
[data-skin="flat"] .rail-cta:hover { background: var(--accent-2); }

[data-skin="flat"] .sidebar-foot {
  background: var(--shell-2);
  color: var(--shell-faint);
  border-radius: var(--r-md);
}

/* 侧栏公告 / 人设：压成浅灰块 */
[data-skin="flat"] .sidebar .notice-block { background: var(--shell-2); color: var(--shell-muted); }
[data-skin="flat"] .sidebar .notice-title,
[data-skin="flat"] .sidebar .notice-msg { color: var(--shell-ink); }
[data-skin="flat"] .sidebar .notice-title::before { background: var(--accent); }
[data-skin="flat"] .sidebar .notice-time { color: var(--shell-faint); }
[data-skin="flat"] .sidebar .notice-emoji { background: var(--panel); border: 1px solid var(--line); }
[data-skin="flat"] .sidebar .notice-emoji.is-mine { background: var(--accent-soft); border-color: var(--accent); }
[data-skin="flat"] .sidebar .persona-area,
[data-skin="flat"] .sidebar .persona-btn { background: var(--shell-2); color: var(--shell-ink); }

/* ─────────────────── 标题：纯排版，无装饰 ─────────────────── */
[data-skin="flat"] .topbar-title h1 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--shell-ink);
}
[data-skin="flat"] .topbar-title p { color: var(--shell-faint); }

[data-skin="flat"] .card-head h2,
[data-skin="flat"] .sec-head h2,
[data-skin="flat"] .q-title {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}
[data-skin="flat"] .sec-head .faint { color: var(--sec-faint); }
[data-skin="flat"] .sec-link { color: var(--accent-2); }
[data-skin="flat"] .card-head .count,
[data-skin="flat"] .sec-head .count { color: var(--faint); font-weight: 500; }

/* ─────────────────── 顶栏控件 ─────────────────── */
[data-skin="flat"] .search {
  background: var(--shell-2);
  color: var(--shell-faint);
  border: 1px solid transparent;
}
[data-skin="flat"] .search input { color: var(--shell-ink); }
[data-skin="flat"] .search:focus-within {
  background: var(--panel);
  border-color: var(--accent);
  box-shadow: none;
}
[data-skin="flat"] .user-chip { background: var(--shell-2); }
[data-skin="flat"] .user-chip .uname { color: var(--shell-ink); font-weight: 600; }
[data-skin="flat"] .coins { background: var(--shell-2); color: var(--accent-2); box-shadow: none; }
[data-skin="flat"] .icon-btn {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--shell-ink);
  box-shadow: none;
}
[data-skin="flat"] .icon-btn:hover { background: var(--shell-2); }
[data-skin="flat"] .logout { color: var(--shell-muted); }
[data-skin="flat"] .logout:hover { background: var(--shell-2); color: var(--shell-ink); }
[data-skin="flat"] .topbar .offline-chip {
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 600;
}

/* ─────────────────── 卡片 / 面板：发丝边框代替阴影 ─────────────────── */
[data-skin="flat"] .card,
[data-skin="flat"] .hero,
[data-skin="flat"] .panel,
[data-skin="flat"] .login-card,
[data-skin="flat"] .filter-card,
[data-skin="flat"] .paper,
[data-skin="flat"] .paper-aside,
[data-skin="flat"] .sheet,
[data-skin="flat"] .compose,
[data-skin="flat"] .run,
[data-skin="flat"] .gpu,
[data-skin="flat"] .modal,
[data-skin="flat"] .queue,
[data-skin="flat"] .dialog-card,
[data-skin="flat"] .quirk-card,
[data-skin="flat"] .offline-bar,
[data-skin="flat"] .dev-note,
[data-skin="flat"] .conv,
[data-skin="flat"] .hero-tile,
[data-skin="flat"] .admin-table-wrap,
[data-skin="flat"] .chat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: none;
}
[data-skin="flat"] .paper .col,
[data-skin="flat"] .paper-aside .col {
  background: transparent;
  border-color: var(--line);
  box-shadow: none;
}
[data-skin="flat"] .queue .card { border-left: 3px solid var(--accent); }
[data-skin="flat"] .modal-mask { background: rgba(24, 24, 27, .45); }

/* 次要底（队列空态、详情条） */
[data-skin="flat"] .queue-empty,
[data-skin="flat"] .detail {
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* ─────────────────────────── 按钮 ─────────────────────────── */
/* 主按钮：纯色天青，悬停加深一档，没有别的花活 */
[data-skin="flat"] .primary-btn,
[data-skin="flat"] .run-btn,
[data-skin="flat"] .upload-btn,
[data-skin="flat"] .send-btn,
[data-skin="flat"] .ask-go,
[data-skin="flat"] .cm-send,
[data-skin="flat"] .persona-save,
[data-skin="flat"] .sbtn.primary {
  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--r-md);
  box-shadow: none;
  font-weight: 600;
}
[data-skin="flat"] .primary-btn:hover,
[data-skin="flat"] .run-btn:hover,
[data-skin="flat"] .upload-btn:hover,
[data-skin="flat"] .send-btn:hover { background: var(--accent-2); }

/* ─────────────────── 芯片 / 标签 / 进度条 ─────────────────── */
[data-skin="flat"] .chip,
[data-skin="flat"] .pill,
[data-skin="flat"] .book-tag,
[data-skin="flat"] .model-chip,
[data-skin="flat"] .src-human,
[data-skin="flat"] .src-aigc,
[data-skin="flat"] .col-series,
[data-skin="flat"] .me-rank,
[data-skin="flat"] .ask-badge,
[data-skin="flat"] .cm-badge {
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  font-weight: 500;
  box-shadow: none;
}
[data-skin="flat"] .chip { color: var(--muted); background: var(--panel); }
[data-skin="flat"] .chip:hover { border-color: var(--accent); color: var(--accent-2); }
[data-skin="flat"] .chip.is-on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-2);
  font-weight: 600;
}
[data-skin="flat"] .chip-tick { background: var(--panel); border: 1px solid var(--line-2); color: var(--faint); }
[data-skin="flat"] .chip.is-on .chip-tick { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
[data-skin="flat"] .model-chip { background: var(--panel); color: var(--muted); }
[data-skin="flat"] .model-chip.is-on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-2);
}
[data-skin="flat"] .model-chip.is-on .mc-name { color: var(--accent-2); }

[data-skin="flat"] .prog { background: var(--track); }
[data-skin="flat"] .prog i { background: var(--accent); }
[data-skin="flat"] .gpu-bar i { background: var(--accent); }

/* ─────────────────── 头像 / 杂项 ─────────────────── */
[data-skin="flat"] .avatar { box-shadow: none; }
[data-skin="flat"] .toast {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--r-md);
  box-shadow: none;
}
[data-skin="flat"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-skin="flat"] ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 5px; }
[data-skin="flat"] ::-webkit-scrollbar-track { background: transparent; }

/* ════════════════════ 各页面微调 ════════════════════ */

/* 书库：封面纯平色块（人类灰蓝 / AIGC 暖灰），来源标签淡色 */
[data-skin="flat"] .book-cover { background: var(--cover-grad); color: var(--muted); }
[data-skin="flat"] .book-cover.is-aigc { background: var(--cover-grad-2); }
[data-skin="flat"] .src-human { background: #e8eef9; color: #33507e; border-color: #d5e0f2; }
[data-skin="flat"] .src-aigc { background: #f7ece4; color: #8a5a33; border-color: #eeddcc; }
[data-skin="flat"] .anth-badge { background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }

/* 数据筛选 */
[data-skin="flat"] .q-title .q-total { color: var(--faint); font-weight: 500; }

/* 评测场：分栏头 / 句子底色（淡色平铺） */
[data-skin="flat"] .col-head { background: var(--panel-2); border-bottom-color: var(--line); }
[data-skin="flat"] .sent { color: var(--ink); }
[data-skin="flat"] .sent.tone-good { background: #e8f3ee; }
[data-skin="flat"] .sent.tone-bad { background: #f9e9e7; }
[data-skin="flat"] .vd-tag { background: var(--accent); color: var(--on-accent); }

/* 小灰总评：白底细边胶囊 */
[data-skin="flat"] .verdict:has(.vd-row) {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 7px 11px;
}

/* 个人中心：格子用浅灰底，主格纯天青 */
[data-skin="flat"] .tile { background: var(--panel-2); border: 1px solid var(--line); }
[data-skin="flat"] .tile.is-hero,
[data-skin="flat"] .hero-tile {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
[data-skin="flat"] .coin-pill { background: var(--accent-soft); color: var(--accent-2); font-weight: 600; }

/* 小灰聊天：你的气泡天青白字，小灰浅灰 */
[data-skin="flat"] .msg-user .bubble { background: var(--accent); color: var(--on-accent); }
[data-skin="flat"] .msg-assistant .bubble { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); }
[data-skin="flat"] .offline-bar {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-2);
}

/* 标注页：当前句淡青底；目录选中淡青 */
[data-skin="flat"] .sline.cur { background: var(--accent-soft); }
[data-skin="flat"] .toc a.cur,
[data-skin="flat"] .toc-cat a.cur { background: var(--accent-soft); color: var(--accent-2); }
[data-skin="flat"] .seg,
[data-skin="flat"] .stat { background: var(--panel-2); border: 1px solid var(--line); }
[data-skin="flat"] .sheet .sheet-title { color: var(--ink); }

/* 皮肤弹窗里的主题色点对我们没意义（flat 没有明暗变体），藏起来 */
[data-skin="flat"] .sheet .themeSwatches { display: none; }