/* ============================================================================
   Xi Notebook 设计语言库（ds = design system）
   ----------------------------------------------------------------------------
   为什么有这个文件：
   在这之前，server / xiskill / models / transfer / xipan 这几页各自发明了一套
   卡片、胶囊、开关、表格 —— .sv-card / .xk-card / .mm-card / .tf-card 是同一个
   东西的四份副本，改一处别处不跟。xipan 更是自建了一套 --bg/--card/--accent，
   还自己判深色，跟全站那套是两回事 —— 现在全站只有浅色，这些都没了。
   这个文件把那套东西收成一份。

   设计取向：中性灰白 + 近黑主按钮，颜色只在「状态」和「数据」上出现。
   参照的是 DeepSeek 开放平台那一类控制台的观感（它的前端并不开源，所以是照着
   规律自己实现的），中性色阶取值参考 Radix Colors 的 gray/slate 与 Vercel Geist
   —— 两者都是 MIT 的纯 CSS 变量方案，跟本站「无构建步骤」的约束正好合得上。

   层次只有三级，别再加第四级：
     页面 #fff（最外）→ 卡片 浅灰（中）→ 瓦片/输入/表格 白（内）

   ⚠ 这套里没有深色模式，也不要再加回来 —— 全站已经钉死浅色（2026-09-20，
     用户说"我从来不用黑暗模式"）。写新组件时不用配 [data-theme="dark"]。

   ⚠ 作用域是 body.ds —— 只有加了这个类的页面才吃这套。首页和还没迁的页面
     一点都不受影响，所以迁移可以一页一页来，不用一次性掀桌。
   ⚠ body.ds 里顺带把站点旧变量（--primary/--surface/…）也改成中性，
     这样 .topbar / .pill-btn / .nbh-*（说明弹窗）这些跨页共用组件不用重写
     就自动跟着变。
   ============================================================================ */

body.ds {
  /* ---- 底：三级层次 ---- */
  --ds-bg: #ffffff;          /* 页面 */
  --ds-card: #f7f8fa;        /* 卡片：浅灰、不描边 */
  --ds-raise: #ffffff;       /* 卡片里的瓦片 / 输入框 / 表格区 */
  --ds-sunken: #eff1f4;      /* 再深一档：hover、进度槽、代码块 */

  /* ---- 线 ---- */
  --ds-line: #e9ebef;        /* 列表行之间：极淡，存在感要弱 */
  --ds-border: #e0e3e8;      /* 需要描边时才用 */

  /* ---- 字：三级 ---- */
  --ds-text: #1b1c1e;        /* 正文、数值 */
  --ds-text-2: #5f636b;      /* 次要：说明、单位 */
  --ds-text-3: #8a8f98;      /* 最弱：表头、时间戳 */

  /* ---- 交互 ---- */
  --ds-solid: #1b1c1e;       /* 主按钮底 */
  --ds-solid-hover: #35373b;
  --ds-on-solid: #ffffff;
  --ds-accent: #4d6bfe;      /* 链接、选中态。克制使用 */
  --ds-accent-weak: #eef1ff; /* 选中态的浅底 */

  /* ---- 状态：只有这三个色，别再发明 ---- */
  --ds-ok: #12a36b;
  --ds-ok-weak: #e6f6ef;
  --ds-warn: #c2710c;
  --ds-warn-weak: #fdf2e4;
  --ds-bad: #dc2626;
  --ds-bad-weak: #fdecec;

  /* ---- 数据图表：跟状态色分开，图表是「类别」不是「好坏」 ---- */
  --ds-data-1: #4d6bfe;
  --ds-data-2: #12a36b;
  --ds-data-3: #c2710c;
  --ds-data-4: #8b5cf6;

  /* ---- 形 ---- */
  --ds-r-card: 14px;
  --ds-r-box: 10px;          /* 瓦片、输入框、代码块 */
  --ds-r-sm: 8px;
  --ds-r-pill: 999px;

  /* ---- 把站点旧变量拉到同一套中性色上 ----
     .topbar / .pill-btn / .nbh-* / .seg 等共用组件读的是这些名字，
     在这儿一次性改掉，那些组件就不用逐个重写。 */
  --primary: #1b1c1e;
  --on-primary: #ffffff;
  --surface: #ffffff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f7f8fa;
  --surface-container: #f2f4f7;
  --surface-container-high: #eff1f4;
  --surface-container-highest: #e7eaee;
  --on-surface: #1b1c1e;
  --on-surface-variant: #5f636b;
  --outline: #8a8f98;
  --outline-variant: #e0e3e8;
  --error: #dc2626;

  background: var(--ds-bg);
  color: var(--ds-text);
  /* ⚠ style.css 是 `html, body { background: var(--surface) }`，而 html 读的是
     :root 上那份 --surface（淡紫），body.ds 里改写的那份够不着它 —— 内容不满一屏时
     页面下半截就会露出旧的淡紫底。这条让 body 自己铺满视口，把 html 盖住。 */
  min-height: 100vh;
}
/* 上面那条只是兜底。真正对症的是直接改 html 的底色，:has 不支持时不影响。 */
html:has(> body.ds) { background: #ffffff; }


/* ============================================================================
   1. 骨架
   ============================================================================ */

/* 两档宽度：读为主的页面用 narrow，表格多的用默认。 */
.ds-main { max-width: 1020px; margin: 0 auto; padding: 18px 16px 80px; display: flex; flex-direction: column; gap: 12px; }
.ds-main.narrow { max-width: 760px; }
.ds-main.wide { max-width: 1240px; }

/* ============================================================================
   2. 卡片
   卡片是浅灰底、不描边 —— 边框和底色二选一，两个都上就脏了。
   ============================================================================ */

.ds-card { background: var(--ds-card); border-radius: var(--ds-r-card); padding: 16px 18px; }
.ds-card.flush { padding: 0; overflow: hidden; }          /* 内容自己贴边（整表格） */
.ds-card.plain { background: transparent; padding: 0; }   /* 只借布局不要底 */

/* 卡头：标题 + 右侧操作。
   ⚠ 标题左边没有装饰竖条 —— 旧的 .sv-head h2::before / .xk-head h2::before 那个
     4px 色块是上一套设计的残留，迁过来时一律删掉。层级靠字重和留白表达。 */
.ds-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ds-card-head > h2 { margin: 0; font-size: 15px; font-weight: 650; color: var(--ds-text); display: flex; align-items: center; gap: 8px; min-width: 0; }
.ds-card-head > h2 .ic { color: var(--ds-text-2); flex: none; }
.ds-card-head .sp { flex: 1 1 auto; }
.ds-card.flush > .ds-card-head { padding: 16px 18px 0; margin-bottom: 12px; }

/* 卡内分组小标题 */
.ds-sub { font-size: 12px; font-weight: 600; color: var(--ds-text-3); margin: 16px 0 6px; display: flex; align-items: center; gap: 7px; }
.ds-sub:first-child { margin-top: 0; }

/* ============================================================================
   3. 按钮
   主按钮近黑、次按钮白底淡边，都是胶囊。一个卡里最多一个主按钮。
   ============================================================================ */

.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--ds-r-pill);
  border: 1px solid var(--ds-border); background: var(--ds-raise); color: var(--ds-text);
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1.3;
  cursor: pointer; white-space: nowrap;
  transition: background-color .16s, border-color .16s, color .16s, opacity .16s;
}
.ds-btn:hover { background: var(--ds-sunken); }
.ds-btn:disabled { opacity: .45; cursor: default; }
.ds-btn:disabled:hover { background: var(--ds-raise); }
.ds-btn .ic { flex: none; }

.ds-btn.primary { background: var(--ds-solid); border-color: var(--ds-solid); color: var(--ds-on-solid); }
.ds-btn.primary:hover { background: var(--ds-solid-hover); border-color: var(--ds-solid-hover); }
.ds-btn.primary:disabled:hover { background: var(--ds-solid); }

/* 幽灵：连边框都没有，用于列表行里的次要动作 */
.ds-btn.ghost { background: transparent; border-color: transparent; color: var(--ds-text-2); font-weight: 500; }
.ds-btn.ghost:hover { background: var(--ds-sunken); color: var(--ds-text); }

.ds-btn.danger { color: var(--ds-bad); }
.ds-btn.danger:hover { background: var(--ds-bad-weak); border-color: var(--ds-bad); }

.ds-btn.sm { padding: 4px 10px; font-size: 12px; }
.ds-btn.lg { padding: 11px 20px; font-size: 14.5px; }
.ds-btn.block { width: 100%; }

/* 只有图标的圆钮（列表行尾的「清除」那类） */
.ds-icon-btn {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: none; border-radius: 50%; background: transparent; color: var(--ds-text-3);
  cursor: pointer; transition: background-color .16s, color .16s;
}
.ds-icon-btn:hover { background: var(--ds-sunken); color: var(--ds-text); }
.ds-icon-btn:disabled { opacity: .4; cursor: default; }
.ds-icon-btn:disabled:hover { background: transparent; color: var(--ds-text-3); }

/* 一排按钮 */
.ds-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ============================================================================
   4. 下拉
   取代原来那种「几个按钮挤一个胶囊、选中的滑块」分段控件：选项一多就挤，
   文字长度不一还会跳。下拉是原生 <select>，键盘和手机原生轮盘都白拿。
   结构：<label class="ds-select"><span>时间</span><select>…</select></label>
   ============================================================================ */

.ds-select {
  display: inline-flex; align-items: center; gap: 0;
  background: var(--ds-raise); border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-pill); padding: 0 2px 0 0;
  font-size: 13px; cursor: pointer; overflow: hidden;
  transition: border-color .16s;
}
.ds-select:hover { border-color: var(--ds-text-3); }
.ds-select:focus-within { border-color: var(--ds-accent); }
/* 左边那截标签：灰字 + 一道竖分隔，没有标签时整截不占位 */
.ds-select > span {
  flex: none; padding: 0 10px 0 13px; color: var(--ds-text-3);
  font-size: 12.5px; white-space: nowrap; align-self: stretch;
  display: flex; align-items: center; border-right: 1px solid var(--ds-line);
}
.ds-select > select {
  appearance: none; -webkit-appearance: none;
  border: none; background: transparent; color: var(--ds-text);
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 28px 7px 12px; cursor: pointer; outline: none;
  /* 箭头自己画，用 currentColor 才能跟着深浅主题走 */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 13px center, right 9px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.ds-select > select option { background: var(--ds-raise); color: var(--ds-text); }
.ds-select.sm > select { padding: 4px 26px 4px 10px; font-size: 12.5px; }
.ds-select.sm > span { padding: 0 8px 0 11px; font-size: 12px; }

/* ============================================================================
   5. 输入
   ============================================================================ */

.ds-input, .ds-textarea {
  width: 100%; padding: 8px 12px; border-radius: var(--ds-r-box);
  border: 1px solid var(--ds-border); background: var(--ds-raise); color: var(--ds-text);
  font: inherit; font-size: 13px; transition: border-color .16s;
}
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--ds-text-3); }
.ds-input:focus, .ds-textarea:focus { outline: none; border-color: var(--ds-accent); }
.ds-input:disabled, .ds-input[readonly] { background: var(--ds-sunken); color: var(--ds-text-2); }
.ds-textarea { resize: vertical; min-height: 72px; line-height: 1.6; }
.ds-input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }

/* 标签 + 控件两列。窄屏塌成一列。 */
.ds-form { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 10px 12px; }
.ds-form > label { font-size: 12.5px; color: var(--ds-text-2); white-space: nowrap; }
.ds-form > .full { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .ds-form { grid-template-columns: 1fr; gap: 5px; }
  .ds-form > label { margin-top: 6px; }
}

/* ============================================================================
   6. 开关
   ============================================================================ */

.ds-switch {
  position: relative; flex: none; width: 40px; height: 23px; padding: 0;
  border: none; border-radius: var(--ds-r-pill); background: var(--ds-sunken);
  cursor: pointer; transition: background-color .18s;
}
.ds-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.22);
  transition: transform .18s;
}
.ds-switch[aria-pressed="true"] { background: var(--ds-ok); }
.ds-switch[aria-pressed="true"]::after { transform: translateX(17px); }
.ds-switch:disabled { opacity: .45; cursor: default; }

/* ============================================================================
   7. 徽标 / 状态点
   ============================================================================ */

.ds-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: var(--ds-r-pill);
  background: var(--ds-sunken); color: var(--ds-text-2);
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ds-tag.ok { background: var(--ds-ok-weak); color: var(--ds-ok); }
.ds-tag.warn { background: var(--ds-warn-weak); color: var(--ds-warn); }
.ds-tag.bad { background: var(--ds-bad-weak); color: var(--ds-bad); }
.ds-tag.accent { background: var(--ds-accent-weak); color: var(--ds-accent); }

/* 「● 运行中」里那个点。DeepSeek 账单页那种，比整块底色更轻。 */
.ds-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-text-3); flex: none; }
.ds-dot.ok { background: var(--ds-ok); }
.ds-dot.warn { background: var(--ds-warn); }
.ds-dot.bad { background: var(--ds-bad); }

/* ============================================================================
   8. 列表行
   行之间只有一道极淡的线，首行不画。列表是本站出现最多的结构。
   ============================================================================ */

.ds-list { display: flex; flex-direction: column; }
.ds-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--ds-line); min-width: 0;
}
.ds-item:first-child { border-top: none; }
.ds-item > .ic { flex: none; color: var(--ds-text-3); }
.ds-item .main { flex: 1 1 auto; min-width: 0; }
.ds-item .t1 { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-item .t2 { font-size: 11.5px; color: var(--ds-text-3); margin-top: 3px; font-variant-numeric: tabular-nums; }
.ds-item .num { font-size: 12.5px; color: var(--ds-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; flex: none; }
.ds-item.off .main { opacity: .5; }
/* 可点的行 */
.ds-item.click { cursor: pointer; margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: var(--ds-r-sm); }
.ds-item.click:hover { background: var(--ds-sunken); border-top-color: transparent; }

/* ============================================================================
   9. 数据瓦片 / 大数字 / 进度条
   ============================================================================ */

.ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ds-tile { background: var(--ds-raise); border-radius: var(--ds-r-box); padding: 10px 12px; min-width: 0; }
.ds-tile .k { font-size: 12px; color: var(--ds-text-3); }
.ds-tile .v { font-size: 17px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-tile .ds-bar { margin-top: 8px; }

/* 大数字：值很大、单位很小很淡，跟在后面。DeepSeek「¥18.81 CNY」那个排法。 */
.ds-big { display: flex; align-items: baseline; gap: 5px; }
.ds-big b { font-size: 32px; font-weight: 700; line-height: 1.1; color: var(--ds-text); font-variant-numeric: tabular-nums; }
.ds-big span { font-size: 12.5px; color: var(--ds-text-3); }

.ds-bar { height: 6px; border-radius: 3px; background: var(--ds-sunken); overflow: hidden; }
.ds-bar > i { display: block; height: 100%; border-radius: 3px; background: var(--ds-accent); transition: width .5s cubic-bezier(.22,1,.36,1); }
.ds-bar > i.ok { background: var(--ds-ok); }
.ds-bar > i.warn { background: var(--ds-warn); }
.ds-bar > i.bad { background: var(--ds-bad); }

/* ============================================================================
   10. 表格
   无竖线、表头一行浅灰、行线极淡。窄屏横向滚动（.ds-scroll 包一层）。
   ============================================================================ */

.ds-scroll { overflow-x: auto; }
.ds-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ds-table th, .ds-table td { padding: 9px 10px; text-align: left; vertical-align: middle; }
.ds-table thead th {
  font-size: 11.5px; font-weight: 600; color: var(--ds-text-3); white-space: nowrap;
  background: var(--ds-raise);
}
.ds-table thead th:first-child { border-radius: var(--ds-r-sm) 0 0 var(--ds-r-sm); }
.ds-table thead th:last-child { border-radius: 0 var(--ds-r-sm) var(--ds-r-sm) 0; }
.ds-table tbody td { color: var(--ds-text); border-top: 1px solid var(--ds-line); }
.ds-table tbody tr:first-child td { border-top: none; }
.ds-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-table .sub { display: block; font-size: 11px; color: var(--ds-text-3); margin-top: 2px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ============================================================================
   11. 代码 / 等宽
   ============================================================================ */

.ds-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.ds-code {
  display: block; padding: 9px 11px; border-radius: var(--ds-r-box);
  background: var(--ds-sunken); color: var(--ds-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px;
  overflow-x: auto; white-space: nowrap;
}

/* ============================================================================
   12. 空态 / 结果行
   ⚠ 铁律二：页面上只放「数据」和「只在异常时出现的极简提示」。
     .ds-out 是动态结果（允许），.ds-note 是用户自己写的备注（允许）。
     解释性小字一律收进说明弹窗，这里**故意没有**对应的类。
   ============================================================================ */

.ds-empty { padding: 14px 0 4px; font-size: 13px; color: var(--ds-text-3); }
.ds-out, .ds-note { margin: 0; font-size: 12px; line-height: 1.65; color: var(--ds-text-2); }
.ds-out b, .ds-note b { color: var(--ds-text); }
.ds-out.ok { color: var(--ds-ok); }
.ds-out.err { color: var(--ds-bad); }

/* ============================================================================
   13. 共用组件在 ds 页面下的收口
   .topbar / .pill-btn / .nbh-*（说明弹窗）住在 style.css，靠上面改写的旧变量
   已经自动变中性了，这里只补几处形状上的差异。
   ============================================================================ */

/* 云盘页（.drive-*）住在 style.css 里、读的就是上面改写过的那批变量，所以挂个
   ds 类配色就跟上了，30 条规则一条都不用动。只有排序那个原生 select 要单独收一下，
   否则它还是系统默认的 ∨ 箭头，跟 .ds-select 画的三角对不上。 */
body.ds .drive-sort select {
  appearance: none; -webkit-appearance: none;
  border-radius: var(--ds-r-pill); border-color: var(--ds-border);
  background-color: var(--ds-raise);
  padding: 6px 26px 6px 12px; font-weight: 600;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 12px center, right 8px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

body.ds .topbar { padding: 16px 20px; max-width: 1240px; }
body.ds .pill-btn { padding: 7px 14px; font-size: 13px; border-color: var(--ds-border); background: var(--ds-raise); }
body.ds .pill-btn:hover { background: var(--ds-sunken); }
body.ds .pill-primary { background: var(--ds-solid); border-color: var(--ds-solid); color: var(--ds-on-solid); }
body.ds .pill-primary:hover { background: var(--ds-solid-hover); filter: none; }
body.ds .drive-title { color: var(--ds-text); }

@media (max-width: 640px) {
  body.ds .topbar { padding: 12px 14px; }
  .ds-main { padding: 12px 14px 72px; }
  .ds-card { padding: 14px; border-radius: 12px; }
  .ds-big b { font-size: 27px; }
}