/* reset + 排版 + 通用样式（组件样式见 ui 段）。 */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: var(--fs) / var(--lh) var(--font); color: var(--ink-90); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
input::placeholder { color: var(--ink-40); }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
code, pre, kbd { font-family: var(--mono); }
code { font-size: 13px; background: var(--ink-06); padding: 1px 6px; border-radius: var(--r-4); }
pre code { background: none; padding: 0; }
::selection { background: var(--brand-bg-2); }
[hidden] { display: none !important; }

/* 文本工具类 */
.t-90 { color: var(--ink-90); } .t-80 { color: var(--ink-80); } .t-60 { color: var(--ink-60); } .t-40 { color: var(--ink-40); } .t-24 { color: var(--ink-24); }
.fs-12 { font-size: var(--fs-12); line-height: 20px; } .fs-16 { font-size: var(--fs-16); line-height: 24px; } .fs-20 { font-size: var(--fs-20); line-height: 28px; } .fs-24 { font-size: var(--fs-24); line-height: 32px; }
.fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; }
.mono { font-family: var(--mono); }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.row { display: flex; align-items: center; } .gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; }
.grow { flex: 1 1 auto; min-width: 0; } .between { justify-content: space-between; } .wrap { flex-wrap: wrap; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }
.mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; } .mb-24 { margin-bottom: 24px; }

/* ---------- 通用组件（ui.js 里的组件用这些类） ---------- */
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; flex: none; }

/* 标签：百炼 New（红底白字）/ Prime（浅绿底绿字）/ 灰 */
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill); font-size: var(--fs-12); line-height: 20px; font-weight: 500; white-space: nowrap; }
.tag-red { background: var(--red); color: #fff; }
.tag-green { background: var(--green-bg); color: var(--green); }
.tag-gray { background: var(--ink-06); color: var(--ink-60); }
.tag-blue { background: var(--brand-bg); color: var(--brand); }
.tag-amber { background: var(--amber-bg); color: var(--amber); }
.tag-line { background: transparent; color: var(--ink-60); border: 1px solid var(--line); }

/* 按钮：黑胶囊（百炼「登录」「了解详情」）/ 线框胶囊 / 主色 / 幽灵 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); font-size: var(--fs); font-weight: 500; line-height: 1; white-space: nowrap; transition: background var(--t), color var(--t), border-color var(--t); border: 1px solid transparent; }
.btn-black { background: var(--ink); color: #fff; }
.btn-black:hover { background: #2A2B33; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); }
.btn-line { background: var(--bg); color: var(--ink-90); border-color: var(--line-2); }
.btn-line:hover { background: var(--ink-04); }
.btn-ghost { background: transparent; color: var(--ink-60); }
.btn-ghost:hover { background: var(--ink-06); color: var(--ink-90); }
.btn-soft { background: var(--ink-06); color: var(--ink-80); }
.btn-soft:hover { background: var(--ink-12); }
.btn-lg { height: 40px; padding: 0 20px; font-size: var(--fs-16); font-weight: 400; }
.btn-sm { height: 28px; padding: 0 10px; font-size: var(--fs-12); }
.btn:disabled, .btn.is-disabled { background: var(--ink-06); color: var(--ink-24); border-color: var(--line-3); cursor: not-allowed; }
.btn-circle { width: 36px; height: 36px; padding: 0; border-radius: 50%; }
.btn-circle-sm { width: 32px; height: 32px; padding: 0; border-radius: 50%; }

/* 圆形加号（卡片右上「+」）：浅蓝底、主色符号 */
.plus { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-bg); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; transition: background var(--t); }
.plus:hover { background: var(--brand-bg-2); }
.plus.is-on { background: var(--brand); color: #fff; }

/* 计数胶囊（「模型 181」） */
.count { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--ink-06); color: var(--ink-60); font-size: var(--fs-12); font-weight: 500; margin-left: 8px; vertical-align: 4px; }

/* 搜索胶囊：工具栏 200×40 / hero 448×46 */
.search { display: inline-flex; align-items: center; gap: 8px; height: 40px; width: 200px; padding: 0 20px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--bg); color: var(--ink-40); transition: border-color var(--t); }
.search:focus-within { border-color: var(--ink-24); }
.search input { border: 0; outline: 0; background: transparent; width: 100%; font-size: var(--fs); color: var(--ink); }
.search-hero { width: 448px; height: 46px; padding: 0 16px; border-color: var(--line); gap: 10px; }
.search-hero input { font-size: var(--fs-16); }
.search-hero .ic { font-size: 18px; color: var(--ink-60); }

/* 分段开关（网格 / 列表） */
.seg { display: inline-flex; align-items: center; height: 40px; padding: 4px; border-radius: var(--r-pill); background: var(--bg-3); gap: 2px; }
.seg button { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-40); font-size: 16px; }
.seg button.is-on { background: var(--bg); color: var(--ink-90); box-shadow: var(--shadow-seg); }

/* 筛选胶囊（「全部 / 外卖 / 跑腿」这种 chip） */
.chip { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--bg); color: var(--ink-80); font-size: var(--fs); transition: all var(--t); }
.chip:hover { background: var(--ink-04); }
.chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* 卡片：368×395、圆角 20、内边距 20、1px #E9E9ED 边 */
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-20); padding: var(--card-pad); display: flex; flex-direction: column; gap: 12px; transition: border-color var(--t), box-shadow var(--t); }
.card:hover { border-color: var(--ink-24); box-shadow: 0 8px 24px rgba(20, 21, 28, .06); }
.card-fixed { height: var(--card-h); }
.divider { height: 1px; background: var(--line-2); margin: 0; }

/* 大数字（卡片底部「1M 上下文长度」） */
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-v { font-size: var(--fs-20); font-weight: 600; line-height: 24px; color: var(--ink); }
.stat-v small { font-size: var(--fs-12); font-weight: 400; color: var(--ink-40); margin-left: 2px; }
.stat-k { font-size: var(--fs-12); line-height: 16px; color: var(--ink-40); }

/* 表格（控制台） */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs); }
.tbl th { text-align: left; font-weight: 500; font-size: var(--fs-12); color: var(--ink-60); background: var(--bg-2); padding: 0 16px; height: 44px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.tbl th:first-child { border-top-left-radius: var(--r-12); } .tbl th:last-child { border-top-right-radius: var(--r-12); }
.tbl td { padding: 0 16px; height: 54px; border-bottom: 1px solid var(--line-2); color: var(--ink-80); vertical-align: middle; }
.tbl tbody tr:hover td { background: var(--ink-04); }
.tbl td.mono, .tbl th.mono { font-family: var(--mono); font-size: 13px; }
.tbl-wrap { border: 1px solid var(--line); border-radius: var(--r-12); overflow: auto; background: var(--bg); }

/* 键值表 */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; font-size: var(--fs); }
.kv dt { color: var(--ink-40); } .kv dd { margin: 0; color: var(--ink-80); word-break: break-all; }

/* 代码块（带复制） */
.codeblock { position: relative; background: #1B1D25; color: #E6E8EF; border-radius: var(--r-12); padding: 16px 20px; font-family: var(--mono); font-size: 13px; line-height: 20px; overflow: auto; }
.codeblock pre { margin: 0; white-space: pre; }
.codeblock .copy { position: absolute; top: 10px; right: 10px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: rgba(255,255,255,.1); color: #fff; font-size: var(--fs-12); }
.codeblock .copy:hover { background: rgba(255,255,255,.2); }
.codeblock-light { background: var(--bg-2); color: var(--ink-80); border: 1px solid var(--line-2); }
.codeblock-light .copy { background: var(--ink-06); color: var(--ink-60); }

/* 抽屉（右侧 560） */
.drawer-mask { position: fixed; inset: 0; background: rgba(20, 21, 28, .45); z-index: 40; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 560px; max-width: 100vw; background: var(--bg); z-index: 41; box-shadow: -8px 0 32px rgba(20, 21, 28, .12); display: flex; flex-direction: column; }
.drawer-hd { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line-2); }
.drawer-bd { padding: 24px; overflow: auto; flex: 1; }
.drawer-ft { padding: 16px 24px; border-top: 1px solid var(--line-2); display: flex; gap: 12px; justify-content: flex-end; }

/* 页签 */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-2); }
.tabs button { height: 40px; padding: 0 14px; color: var(--ink-60); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button.is-on { color: var(--ink); border-bottom-color: var(--ink); }
.tabs-pill { border: 0; gap: 8px; }
.tabs-pill button { height: 32px; border: 1px solid var(--line-2); border-radius: var(--r-pill); margin: 0; }
.tabs-pill button.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* 状态点 */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--ink-24); }
.dot-ok { background: var(--green); } .dot-bad { background: var(--red); } .dot-warn { background: var(--amber); } .dot-run { background: var(--brand); }

/* 空态 / 提示 */
.empty { padding: 48px; text-align: center; color: var(--ink-40); }
.note { padding: 12px 16px; border-radius: var(--r-12); background: var(--bg-2); color: var(--ink-60); font-size: var(--fs); }
.note-warn { background: var(--amber-bg); color: #8A5300; }
.note-danger { background: var(--red-bg); color: #A82323; }
.note-info { background: var(--brand-bg); color: #1D4FC2; }

/* toast */
.toast { position: fixed; left: 50%; top: 88px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 8px 16px; border-radius: var(--r-pill); font-size: var(--fs); z-index: 60; box-shadow: var(--shadow-pop); }

/* markdown 渲染 */
.md { color: var(--ink-80); font-size: var(--fs); line-height: 24px; }
.md h1 { font-size: var(--fs-24); line-height: 32px; margin: 32px 0 12px; color: var(--ink); }
.md h2 { font-size: var(--fs-20); line-height: 28px; margin: 32px 0 12px; color: var(--ink); }
.md h3 { font-size: var(--fs-16); line-height: 24px; margin: 24px 0 8px; color: var(--ink); }
.md p { margin: 0 0 12px; } .md ul, .md ol { margin: 0 0 12px 20px; list-style: revert; }
.md li { margin: 4px 0; }
.md table { border-collapse: collapse; margin: 12px 0; width: 100%; font-size: 13px; }
.md th, .md td { border: 1px solid var(--line-2); padding: 8px 12px; text-align: left; vertical-align: top; }
.md th { background: var(--bg-2); font-weight: 500; }
.md pre { background: #1B1D25; color: #E6E8EF; padding: 16px 20px; border-radius: var(--r-12); overflow: auto; font-size: 13px; line-height: 20px; }
.md blockquote { margin: 12px 0; padding: 8px 16px; border-left: 3px solid var(--line-3); color: var(--ink-60); }
.md hr { border: 0; border-top: 1px solid var(--line-2); margin: 24px 0; }
.md a { text-decoration: underline; }

/* 页面骨架 */
.page { padding: 32px var(--content-pad) 64px; max-width: calc(var(--content-w) + var(--content-pad) * 2); margin: 0 auto; }
.page-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.page-title { font-size: var(--fs-24); line-height: 32px; font-weight: 600; color: var(--ink); }
.page-sub { color: var(--ink-60); margin-top: 4px; }
.section-title { font-size: var(--fs-20); line-height: 28px; font-weight: 600; color: var(--ink); }
.panel { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-20); padding: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, var(--grid-col)); gap: var(--grid-gap); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
@media (max-width: 1240px) { .grid-3 { grid-template-columns: repeat(2, var(--grid-col)); } }
@media (max-width: 860px) { .grid-3 { grid-template-columns: var(--grid-col); } .grid-4 { grid-template-columns: repeat(2, 1fr); } }