/* =========================================================================
小创 PPT · 设计系统 (Design System)
规格说明见项目根目录 DESIGN.md。
规则：所有页面的颜色 / 间距 / 圆角 / 阴影 / 组件都从下方令牌取用；
新增功能请复用已有组件类，不要在页面里写行内样式或另起一套样式。
目录
1. 设计令牌 (tokens)
2. 基础 (base)
3. 顶部导航 (header / nav)
4. 页面骨架 (main / page-head / card)
5. 按钮 (btn)
6. 表单 (form)
7. 状态与标签 (pill / badge / status)
8. 表格 (table)
9. 空状态 / 提示 (empty / hint / toast)
10. 日志面板 (log)
11. 模板库 (gallery)
12. 上传 (upload) / 开关 (switch)
13. 模型选择器 (model picker)
14. 提供商列表 (provider)
15. 弹窗 (modal)
16. 通用工具类与响应式
========================================================================= */
/* ---------- 1. 设计令牌 ---------- */
:root{
color-scheme:light;
/* 品牌色 */
--brand:#4f46e5;
--brand-hover:#4338ca;
--brand-ink:#3730a3;
--brand-soft:#eef2ff;
--brand-soft-2:#e0e7ff;
--brand-line:#c7d2fe;
--brand-grad:linear-gradient(135deg,#4f46e5,#7c3aed);
/* 中性色 */
--bg:#f5f7fb;
--surface:#ffffff;
--surface-2:#f8fafc;
--surface-3:#f1f4f9;
--line:#e8ecf3;
--line-2:#f0f3f8;
--line-hover:#d6dbe6;
--dash:#cfd6e4;
--off:#cbd2e0;
--ink:#0f172a;
--ink-2:#334155;
--mut:#5b6b80;
--mut-2:#6a7688;
--header-bg:rgba(255,255,255,.86);
--sb-thumb:#dbe1ec;
--sb-thumb-hover:#c6cfe0;
--arrow:url("data:image/svg+xml;utf8,");
/* 语义色（前景 / 背景 / 描边 / 深字） */
--ok:#16a34a; --ok-bg:#ecfdf3; --ok-line:#bbf7d0; --ok-ink:#15803d;
--warn:#d97706; --warn-bg:#fffbeb; --warn-line:#fde68a; --warn-ink:#b45309;
--err:#dc2626; --err-bg:#fef2f2; --err-line:#fecaca; --err-ink:#b91c1c; --err-hover:#fde7e7;
--info:#2563eb; --info-bg:#eff6ff; --info-line:#bfdbfe; --info-ink:#1d4ed8;
/* 间距（8px 基准） */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px;
/* 圆角 */
--r-xs:6px; --r-sm:8px; --r:10px; --r-md:12px; --r-lg:16px; --r-pill:999px;
/* 阴影 */
--sh-xs:0 1px 2px rgba(16,24,40,.05);
--sh-sm:0 1px 2px rgba(16,24,40,.05),0 2px 6px rgba(16,24,40,.05);
--sh:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
--sh-lg:0 12px 40px rgba(16,24,40,.14);
/* 字体 */
--font:"Segoe UI","Microsoft YaHei",system-ui,-apple-system,sans-serif;
--mono:Consolas,ui-monospace,"SFMono-Regular",Menlo,monospace;
--fs-xs:11.5px; --fs-sm:12.5px; --fs-md:13.5px; --fs-lg:15px; --fs-xl:18px; --fs-2xl:22px;
/* 布局 */
--wrap:1180px;
--ring:0 0 0 3px rgba(79,70,229,.28);
/* 层级 */
--z-sticky:30; --z-modal:50; --z-toast:9999;
/* 兼容旧变量名 */
--card:var(--surface); --r-base:var(--r-md);
}
/* 深色主题：同一套令牌换个取值，组件无需改动 */
html[data-theme=dark]{
color-scheme:dark;
--brand:#818cf8;
--brand-hover:#a5b4fc;
--brand-ink:#c7d2fe;
--brand-soft:#1d2138;
--brand-soft-2:#292e4e;
--brand-line:#3a406b;
--brand-grad:linear-gradient(135deg,#6366f1,#8b5cf6);
--bg:#0b0f1a;
--surface:#121826;
--surface-2:#161d2d;
--surface-3:#1c2436;
--line:#242d42;
--line-2:#1b2233;
--line-hover:#33405a;
--dash:#33405a;
--off:#3a4760;
--ink:#e9eef8;
--ink-2:#c3cddc;
--mut:#9aa7ba;
--mut-2:#7c889b;
--header-bg:rgba(18,24,38,.82);
--sb-thumb:#2b344a;
--sb-thumb-hover:#3a465e;
--arrow:url("data:image/svg+xml;utf8,");
--ok:#34d399; --ok-bg:#10281e; --ok-line:#1f4a38; --ok-ink:#6ee7b7;
--warn:#fbbf24; --warn-bg:#2a2210; --warn-line:#4a3a16; --warn-ink:#fcd34d;
--err:#f87171; --err-bg:#2a1518; --err-line:#4d2528; --err-ink:#fca5a5; --err-hover:#3a1c20;
--info:#60a5fa; --info-bg:#0f2036; --info-line:#1f3a5f; --info-ink:#93c5fd;
--sh-xs:0 1px 2px rgba(0,0,0,.45);
--sh-sm:0 1px 2px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.4);
--sh:0 1px 2px rgba(0,0,0,.45),0 8px 24px rgba(0,0,0,.5);
--sh-lg:0 16px 48px rgba(0,0,0,.65);
--ring:0 0 0 3px rgba(129,140,248,.4);
}
/* ---------- 2. 基础 ---------- */
*{box-sizing:border-box}
html,body{margin:0}
body{
background:var(--bg); color:var(--ink);
font:var(--fs-lg)/1.6 var(--font);
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0}
::selection{background:var(--brand-soft-2)}
code{background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-xs);padding:1px 6px;font:var(--fs-sm)/1.5 var(--mono)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-hover);background-clip:content-box}
/* ---------- 3. 顶部导航 ---------- */
header{position:sticky;top:0;z-index:var(--z-sticky);background:var(--header-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hwrap{max-width:var(--wrap);margin:0 auto;padding:11px 22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand:hover{text-decoration:none}
.logo{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto}
.logo img{width:100%;height:100%;object-fit:contain;display:block}
.htitle{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.hsub{font-size:12px;color:var(--mut)}
.nav{display:flex;gap:2px;margin-left:14px;flex-wrap:wrap}
.nav a{font-size:var(--fs-md);color:var(--mut);text-decoration:none;padding:7px 13px;border-radius:var(--r-sm);font-weight:600;transition:.15s}
.nav a:hover{background:var(--surface-3);color:var(--ink);text-decoration:none}
.nav a.active{background:var(--brand-soft);color:var(--brand-ink)}
.nav .badge{display:inline-block;min-width:17px;text-align:center;font-size:11px;line-height:17px;background:var(--brand);color:#fff;border-radius:var(--r-pill);padding:0 5px;margin-left:5px;vertical-align:1px}
.nav .badge:empty{display:none}
.hspacer{flex:1}
.chip{font-size:var(--fs-sm);color:var(--mut);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 12px;box-shadow:var(--sh-xs);white-space:nowrap}
.chip b{color:var(--ink-2);font-weight:600}
.chip.clickable{cursor:pointer;transition:.15s}
.chip.clickable:hover{border-color:var(--brand-line);color:var(--brand)}
.chip.clickable:hover b{color:var(--brand)}
/* ---------- 4. 页面骨架 ---------- */
main{max-width:var(--wrap);margin:26px auto 72px;padding:0 22px;display:flex;flex-direction:column;gap:18px}
.page-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:4px}
.page-head .ph-main{min-width:0}
.page-head .ph-actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.page-title{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.015em;margin:0}
.page-sub{color:var(--mut);font-size:var(--fs-md);margin-top:3px}
.crumb{font-size:var(--fs-sm);color:var(--mut-2);margin-bottom:5px;display:flex;align-items:center;gap:7px}
.crumb a{color:var(--mut);text-decoration:none}
.crumb a:hover{color:var(--brand);text-decoration:none}
.crumb .sid{font-family:var(--mono);color:var(--mut)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden}
.card-h{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.card-h .n{width:24px;height:24px;border-radius:var(--r-sm);background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:12px;font-weight:700;flex:0 0 auto}
.card-h h1{font-size:var(--fs-xl);margin:0;font-weight:700}
.card-h h2{font-size:var(--fs-md);margin:0;font-weight:700}
.card-h .desc{font-size:var(--fs-sm);color:var(--mut-2)}
.card-h .selinfo{margin-left:auto;font-size:var(--fs-sm);color:var(--mut);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 12px}
.card-b{padding:20px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* ---------- 5. 按钮 ---------- */
.go{display:flex;justify-content:flex-end;gap:10px;align-items:center;flex-wrap:wrap}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:var(--fs-md);font-weight:600;line-height:1;padding:9px 15px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,box-shadow .15s,color .15s;background:var(--surface);color:var(--ink-2)}
.btn:hover{text-decoration:none}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 3px 10px rgba(79,70,229,.24)}
.btn-primary:hover:not(:disabled){background:var(--brand-hover);border-color:var(--brand-hover)}
.btn-ghost{border-color:var(--line);background:var(--surface)}
.btn-ghost:hover:not(:disabled){background:var(--surface-2);border-color:var(--line-hover)}
.btn-danger{color:var(--err-ink);border-color:var(--err-line);background:var(--err-bg)}
.btn-danger:hover:not(:disabled){background:var(--err-hover)}
.btn-ok{background:var(--ok);color:#fff;border-color:var(--ok);box-shadow:0 3px 10px rgba(22,163,74,.24)}
.btn-ok:hover:not(:disabled){background:var(--ok-ink)}
.btn-sm{font-size:var(--fs-sm);padding:6px 11px;border-radius:var(--r-sm)}
.btn-lg{font-size:var(--fs-lg);padding:11px 22px;border-radius:var(--r-md)}
.btn-icon{padding:7px 9px}
.btn-link-danger{color:var(--err-ink);background:transparent;border-color:transparent;padding:6px 9px}
.btn-link-danger:hover:not(:disabled){background:var(--err-bg)}
.btn-add{width:100%;justify-content:center;border:1px dashed var(--dash);background:var(--surface);color:var(--mut);padding:15px;border-radius:var(--r-md);font-weight:600}
.btn-add:hover:not(:disabled){border-color:var(--brand-line);color:var(--brand);background:var(--brand-soft)}
/* ---------- 6. 表单 ---------- */
label.f{display:block;font-size:var(--fs-sm);color:var(--mut);margin:0 0 6px;font-weight:600}
input[type=text],input:not([type]),input[type=password],input[type=search],input[type=number],select,textarea{
width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);font:inherit;
font-size:var(--fs-md);background:var(--surface);color:var(--ink);transition:border-color .15s,box-shadow .15s;
}
input:hover,select:hover,textarea:hover{border-color:var(--line-hover)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
textarea{resize:vertical;min-height:64px}
select{appearance:none;background-image:var(--arrow);background-repeat:no-repeat;background-position:right 11px center;padding-right:32px}
.fields{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fields .span2{grid-column:span 2}
.fields .span4{grid-column:span 4}
.sect-t{font-size:var(--fs-md);font-weight:700;color:var(--ink);margin:0 0 12px;display:flex;align-items:center;gap:8px}
.sect-t .tag{font-size:11px;font-weight:600;color:var(--mut-2);background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 9px}
hr.sep{border:0;border-top:1px solid var(--line-2);margin:20px 0}
.hint{font-size:var(--fs-sm);color:var(--mut-2);margin-top:6px;line-height:1.55}
.hint.warn{color:var(--warn-ink)}
/* ---------- 7. 状态 / 标签 ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 9px;border-radius:var(--r-pill);font-size:var(--fs-sm);line-height:1;font-weight:600;border:1px solid transparent;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.succeeded{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-line)}
.pill.running{background:var(--info-bg);color:var(--info-ink);border-color:var(--info-line)}
.pill.running::before{animation:pulse 1.2s ease-in-out infinite}
.pill.queued{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line)}
.pill.failed{background:var(--err-bg);color:var(--err-ink);border-color:var(--err-line)}
.pill.cancelled{background:var(--surface-3);color:var(--mut);border-color:var(--line)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:600;border-radius:var(--r-xs);padding:2px 8px;background:var(--surface-3);border:1px solid var(--line);color:var(--mut)}
.badge.on{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)}
.badge.off{background:var(--surface-3);color:var(--mut-2)}
.tag-custom{font-size:11px;border:1px solid var(--line);border-radius:var(--r-xs);padding:2px 8px;color:var(--mut);background:var(--surface-2)}
.doton{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block;flex:0 0 auto}
.doton.off{background:var(--off)}
.muted{color:var(--mut-2);font-size:var(--fs-sm)}
.summary{display:flex;flex-wrap:wrap;gap:8px}
.chipsel{font-size:var(--fs-sm);background:var(--brand-soft);color:var(--brand-ink);border:1px solid var(--brand-line);border-radius:var(--r-pill);padding:4px 12px}
.chipsel b{font-weight:700}
/* 状态大徽标（详情页） */
.stbig{display:inline-flex;align-items:center;gap:11px;font-size:var(--fs-xl);font-weight:700}
.stbig .ic{width:38px;height:38px;border-radius:var(--r-md);display:grid;place-items:center;font-size:20px;flex:0 0 auto}
.stbig.succeeded .ic{background:var(--ok-bg);color:var(--ok-ink);border:1px solid var(--ok-line)}
.stbig.running .ic{background:var(--info-bg);color:var(--info-ink);border:1px solid var(--info-line)}
.stbig.queued .ic{background:var(--warn-bg);color:var(--warn-ink);border:1px solid var(--warn-line)}
.stbig.failed .ic{background:var(--err-bg);color:var(--err-ink);border:1px solid var(--err-line)}
.stbig.cancelled .ic{background:var(--surface-3);color:var(--mut);border:1px solid var(--line)}
.stbig.succeeded{color:var(--ok-ink)}
.stbig.running{color:var(--info-ink)}
.stbig.queued{color:var(--warn-ink)}
.stbig.failed{color:var(--err-ink)}
.stbig.cancelled{color:var(--ink-2)}
.spin{display:inline-block;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.progress{height:6px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden;margin-top:14px}
.progress>i{display:block;height:100%;width:38%;border-radius:inherit;background:var(--brand-grad);animation:slide 1.4s ease-in-out infinite}
@keyframes slide{0%{margin-left:-40%}100%{margin-left:100%}}
/* 键值信息网格 */
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px 24px}
.kv .item{min-width:0}
.kv .k{font-size:var(--fs-xs);color:var(--mut-2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;font-weight:600}
.kv .v{font-size:var(--fs-md);color:var(--ink);word-break:break-word}
.kv .v.mono{font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink-2)}
/* ---------- 8. 表格 ---------- */
.tablewrap{overflow-x:auto;border-radius:var(--r-md)}
table{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
thead th{position:sticky;top:0;z-index:1;background:var(--surface-2);color:var(--mut);font-weight:600;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;padding:11px 16px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
tbody td{padding:13px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--surface-2)}
tbody tr.clickable{cursor:pointer}
.rc-title{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:520px}
.rc-title a{font-weight:600;color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-title a:hover{color:var(--brand)}
.rc-id{font:var(--fs-xs)/1.4 var(--mono);color:var(--mut-2)}
.rc-time{font-size:var(--fs-sm);color:var(--mut);white-space:nowrap;line-height:1.35}
.rc-time b{display:block;font-weight:600;color:var(--ink-2)}
.row-actions{display:flex;gap:8px;justify-content:flex-end}
.fchips{display:flex;gap:6px;flex-wrap:wrap}
.fchip{font-size:var(--fs-sm);font-weight:600;color:var(--mut);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 13px;cursor:pointer;transition:.15s}
.fchip:hover{border-color:var(--brand-line);color:var(--brand)}
.fchip.on{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-ink)}
.fchip .c{color:var(--mut-2);font-weight:500;margin-left:3px}
.fchip.on .c{color:var(--brand)}
/* 分页器 */
.pager{display:flex;align-items:center;gap:6px;padding:12px 16px;border-top:1px solid var(--line-2);flex-wrap:wrap}
.pager[hidden]{display:none}
.pager .pinfo{font-size:var(--fs-sm);color:var(--mut);margin-right:auto}
.pager .ellipsis{color:var(--mut-2);padding:0 3px}
.pgnum{min-width:32px;height:30px;display:inline-flex;align-items:center;justify-content:center;padding:0 9px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.pgnum:hover:not(:disabled){border-color:var(--brand-line);color:var(--brand);background:var(--surface-2)}
.pgnum.on{background:var(--brand);border-color:var(--brand);color:#fff;cursor:default}
.pgnum:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
html[data-theme=dark] .pgnum.on{color:#0b0f1a}
/* ---------- 9. 空状态 / 提示 / toast ---------- */
.empty{padding:46px 20px;text-align:center;color:var(--mut-2)}
.empty .ic{font-size:30px;opacity:.45;display:block;margin-bottom:10px}
.empty b{display:block;color:var(--ink-2);font-size:var(--fs-lg);font-weight:600;margin-bottom:4px}
.status{font-size:var(--fs-md);padding:12px 15px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line);white-space:pre-wrap;word-break:break-word}
.status.queued{background:var(--warn-bg);border-color:var(--warn-line)}
.status.running{background:var(--info-bg);border-color:var(--info-line)}
.status.succeeded{background:var(--ok-bg);border-color:var(--ok-line)}
.status.failed{background:var(--err-bg);border-color:var(--err-line)}
.status.cancelled{background:var(--surface-2);border-color:var(--line)}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);background:#1f2430;color:#fff;padding:11px 17px;border-radius:var(--r);font-size:var(--fs-md);box-shadow:var(--sh-lg);opacity:0;pointer-events:none;z-index:var(--z-toast);max-width:78vw;transition:opacity .18s ease,transform .18s ease}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.ok{background:var(--ok-ink)}
.toast.err{background:var(--err-ink)}
/* ---------- 10. 日志面板 ---------- */
.logbox{border:1px solid #1e293b;border-radius:var(--r-md);overflow:hidden;background:#0b1220}
.logbar{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 14px;background:#111a2e;border-bottom:1px solid #1e293b}
.logbar .t{font-size:var(--fs-sm);color:#93a4c0;font-weight:600}
.logbar .sp{flex:1}
.logbar button{font:inherit;font-size:var(--fs-sm);color:#c9d4e6;background:#1c2740;border:1px solid #2b3a58;border-radius:var(--r-sm);padding:4px 10px;cursor:pointer;transition:.15s}
.logbar button:hover{background:#25324f}
pre.log{margin:0;background:#0b1220;color:#c9d4e6;font:var(--fs-sm)/1.6 var(--mono);padding:14px 16px;max-height:460px;overflow:auto;white-space:pre-wrap;word-break:break-word}
pre.log.nowrap{white-space:pre;word-break:normal}
.logbox.collapsed pre.log{display:none}
/* ---------- 11. 模板库 ---------- */
.gallery{display:flex;flex-direction:column;gap:22px}
.grp-title{display:flex;align-items:baseline;gap:10px;margin:0 0 4px;cursor:pointer;user-select:none}
.grp-title h3{margin:0;font-size:var(--fs-md);font-weight:700}
.grp-title .en{font-size:var(--fs-sm);color:var(--mut-2)}
.grp-title .gnote{font-size:11.5px;color:var(--mut-2);background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 9px}
.grp-title .cnt{font-size:11.5px;color:var(--mut-2);margin-left:auto}
.grp-title .caret{font-size:10px;color:var(--mut-2);transition:.15s}
.grp.collapsed .rail{display:none}
.grp.collapsed .caret{transform:rotate(-90deg)}
.grp-empty{font-size:var(--fs-sm);color:var(--mut-2);padding:8px 2px 14px}
.rail{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x proximity}
.rail::-webkit-scrollbar{height:8px}
.tpl{flex:0 0 198px;scroll-snap-align:start;border:1.5px solid var(--line);background:var(--surface);border-radius:var(--r-md);padding:0;cursor:pointer;text-align:left;position:relative;transition:.15s;overflow:hidden}
.tpl:hover{transform:translateY(-2px);box-shadow:var(--sh);border-color:var(--line-hover)}
.tpl.sel{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft-2)}
.tpl-img{display:block;aspect-ratio:16/9;background:var(--surface-3);overflow:hidden}
.tpl-img img{width:100%;height:100%;object-fit:cover;display:block}
.tpl-meta{display:block;padding:9px 11px 11px}
.tpl-meta b{display:block;font-size:var(--fs-sm);font-weight:600}
.tpl-meta i{display:block;font-style:normal;font-size:11px;color:var(--mut-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tick{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;display:none;place-items:center;font-size:12px;font-weight:700;box-shadow:0 2px 6px rgba(79,70,229,.5)}
.tpl.sel .tick{display:grid}
.tplhint{font-size:var(--fs-sm);color:var(--mut);margin-top:4px;padding:11px 14px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line-2)}
.tplhint.warn{color:var(--warn-ink);background:var(--warn-bg);border-color:var(--warn-line)}
.tplhint.ok{color:var(--ok-ink);background:var(--ok-bg);border-color:var(--ok-line)}
.libbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.libbar input[type=search]{max-width:320px}
/* ---------- 12. 上传 / 开关 ---------- */
.drop{border:1.5px dashed var(--dash);border-radius:var(--r-md);padding:26px;text-align:center;color:var(--mut);background:var(--surface-2);cursor:pointer;transition:.15s}
.drop:hover{border-color:var(--brand-line);background:var(--brand-soft)}
.drop.hot{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.drop b{color:var(--ink)}
.files{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.fle{font-size:var(--fs-sm);background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 10px;display:flex;gap:8px;align-items:center}
.fle s{text-decoration:none;color:var(--mut-2);cursor:pointer}
.fle s:hover{color:var(--err)}
.toggle{display:flex;align-items:center;gap:10px}
.toggle.inline{display:inline-flex;gap:8px}
.w-auto{width:auto !important}
.switch{position:relative;width:42px;height:24px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:var(--off);border-radius:var(--r-pill);transition:.2s;cursor:pointer}
.slider:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:var(--sh-xs)}
.switch input:checked + .slider{background:var(--brand)}
.switch input:checked + .slider:before{transform:translateX(18px)}
.switch input:disabled + .slider{opacity:.5;cursor:not-allowed}
/* ---------- 13. 模型选择器 ---------- */
.mpick{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.mpick-head{display:flex;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.mpick-head input[type=search]{flex:1;min-width:180px}
.curmodel{font-size:var(--fs-sm);color:var(--mut)}
.curmodel b{color:var(--brand)}
.mprov{display:flex;gap:6px;flex-wrap:wrap;padding:9px 12px;border-bottom:1px solid var(--line-2)}
.pchip{font-size:var(--fs-sm);border:1px solid var(--line);background:var(--surface);color:var(--mut);border-radius:var(--r-pill);padding:3px 11px;cursor:pointer;transition:.15s}
.pchip:hover{border-color:var(--brand-line)}
.pchip.on{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-ink);font-weight:600}
.pchip .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:5px;vertical-align:1px}
.pchip .dot.off{background:var(--off)}
.mlist{max-height:390px;overflow:auto}
.mg-h{position:sticky;top:0;z-index:1;background:var(--surface-2);border-bottom:1px solid var(--line-2);font-size:var(--fs-xs);color:var(--mut-2);padding:6px 12px;font-weight:600}
.mrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--surface);border:0;border-bottom:1px solid var(--line-2);padding:9px 12px;cursor:pointer;font:inherit}
.mrow:hover{background:var(--surface-2)}
.mrow.sel{background:var(--brand-soft)}
.mrow-name{font-size:var(--fs-md);font-weight:600;color:var(--ink);white-space:nowrap}
.mrow-id{font-size:11.5px;color:var(--mut-2);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow-badges{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.mbadge{font-size:11px;color:var(--mut);background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-xs);padding:1px 7px;white-space:nowrap}
.mbadge.var{background:var(--info-bg);border-color:var(--info-line);color:var(--info-ink)}
.mrow-check{color:var(--brand);display:none;font-weight:700}
.mrow.sel .mrow-check{display:inline}
.model-modal{width:min(720px,100%)}
.model-modal .mbody{padding:0;gap:0;border-top:0}
.model-modal .mpick{border:0;border-radius:0}
.model-modal .mlist{max-height:min(60vh,460px)}
/* template picker modal (opened from the generate page, so the form is kept) */
.tpl-modal{width:min(1080px,100%)}
.tpl-modal .mbody{padding:16px;gap:0;border-top:0;overflow:auto;max-height:min(72vh,640px)}
.tpl-modal .libbar{margin-bottom:14px}
.tpl-modal .tplhint{margin-top:14px}
.tpl-modal .mfoot{justify-content:space-between}
.tpl-modal .mfoot .tpsel{font-size:var(--fs-sm);color:var(--mut)}
.defrow{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--r-md);padding:12px 16px;background:var(--surface-2);margin-bottom:12px}
.defrow-k{flex:1;display:flex;flex-direction:column;gap:2px;font-size:var(--fs-md);font-weight:600;color:var(--ink)}
.defrow-k .muted{font-weight:400}
.defrow-v{font-size:var(--fs-md);font-family:var(--mono);color:var(--brand);max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---------- 14. 提供商列表 ---------- */
.prov-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.prow{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--r-md);padding:9px 14px;background:var(--surface);transition:.15s}
.prow:hover{border-color:var(--line-hover);box-shadow:var(--sh-xs)}
.prow-name{font-size:var(--fs-md);font-weight:600;color:var(--ink)}
.prow-id{font-size:var(--fs-sm);color:var(--mut-2);font-family:var(--mono)}
.prow .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block;box-shadow:0 0 0 3px var(--ok-bg)}
.prow .dot.off{background:var(--off);box-shadow:0 0 0 3px var(--surface-3)}
.prow-actions{margin-left:auto;display:flex;gap:6px;align-items:center}
/* ---------- 15. 弹窗 ---------- */
.modal-mask{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);padding:20px}
.modal-mask[hidden]{display:none}
.modal{background:var(--surface);border-radius:var(--r-lg);width:min(560px,100%);max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--sh-lg);overflow:hidden}
.mtabs{display:flex;gap:6px;padding:14px 16px 0}
.mtab{font:inherit;font-size:var(--fs-md);font-weight:600;color:var(--mut);background:var(--surface-3);border:1px solid transparent;border-bottom:0;border-radius:var(--r) var(--r) 0 0;padding:9px 14px;cursor:pointer}
.mtab.on{color:var(--ink);background:var(--surface);border-color:var(--line);margin-bottom:-1px}
.mbody{padding:16px;overflow:auto;display:flex;flex-direction:column;gap:13px;border-top:1px solid var(--line)}
.mbody[hidden]{display:none}
.msub{font-size:var(--fs-sm);color:var(--mut);line-height:1.55}
.mbody label.f{display:block;font-size:var(--fs-sm);color:var(--mut);margin-bottom:5px}
.mbody input,.mbody select{width:100%}
.mbody input:disabled{background:var(--surface-3);color:var(--mut-2)}
.mbody>.btn{align-self:flex-start}
.fld{display:block}
.fhint{font-size:var(--fs-sm);color:var(--mut-2);margin-top:5px;line-height:1.5}
.adv{border-top:1px solid var(--line-2);padding-top:10px}
.adv summary{cursor:pointer;font-size:var(--fs-md);font-weight:600;color:var(--mut);list-style:none;margin-bottom:11px}
.adv summary::-webkit-details-marker{display:none}
.adv summary::before{content:'▾ '}
.adv:not([open]) summary::before{content:'▸ '}
.mcat-h{display:flex;align-items:center;justify-content:space-between;margin:14px 0 6px;font-size:var(--fs-sm);color:var(--mut)}
.mcat-h .links a{color:var(--brand);cursor:pointer;margin-left:14px}
.mcat-state{font-size:var(--fs-sm);color:var(--ink);margin-bottom:7px}
.mcat-default{border:1px dashed var(--line);border-radius:var(--r);padding:16px;text-align:center;color:var(--mut-2);font-size:var(--fs-sm);background:var(--surface-2)}
.mcat-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:9px}
.mcat-row{display:flex;gap:8px;align-items:center}
.mcat-row input{flex:1}
.mcat-row .mc-arrows{color:var(--mut-2)}
.mcat-err{color:var(--err-ink);min-height:16px;font-size:var(--fs-sm);margin-top:7px}
.mfoot{display:flex;justify-content:flex-end;gap:10px;padding:14px 16px;border-top:1px solid var(--line-2);background:var(--surface)}
/* ---------- 16. 工具类 / 响应式 ---------- */
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;align-items:center;gap:10px}
.row.wrap{flex-wrap:wrap;gap:16px}
.row.gap-lg{gap:16px}
.nowrap{white-space:nowrap}
.ml-auto{margin-left:auto}
.mt-1{margin-top:6px} .mt-2{margin-top:10px} .mt-3{margin-top:14px} .mt-4{margin-top:16px}
.go.left{justify-content:flex-start}
.card-b.tight{padding:8px 8px 0}
.rendwrap{width:240px;margin-left:auto}
@media(max-width:900px){
.fields{grid-template-columns:1fr 1fr}
.fields .span2,.fields .span4{grid-column:span 2}
.grid2{grid-template-columns:1fr}
.nav{margin-left:0}
.hide-sm{display:none}
}
@media(max-width:640px){
.fields{grid-template-columns:1fr}
.fields .span2,.fields .span4{grid-column:span 1}
.hwrap{padding:10px 16px}
main{padding:0 14px;margin-top:18px}
.page-title{font-size:var(--fs-xl)}
.card-b{padding:16px}
}
/* =========================================================================
17. 主题切换 / 无障碍 / 动效 / 图标
========================================================================= */
/* 17.1 明暗主题切换按钮 */
.themebtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--mut);cursor:pointer;transition:background .15s,color .15s,border-color .15s;flex:0 0 auto}
.themebtn:hover{background:var(--surface-2);color:var(--ink);border-color:var(--line-hover)}
.themebtn svg{width:18px;height:18px;display:block}
.themebtn .icon-sun{display:none}
html[data-theme=dark] .themebtn .icon-sun{display:block}
html[data-theme=dark] .themebtn .icon-moon{display:none}
/* 17.2 内联 SVG 图标（替代 emoji，统一尺寸与基线） */
svg.i{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.16em;flex:0 0 auto;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke:currentColor}
.empty .ic{display:flex;justify-content:center;color:var(--mut-2)}
.empty .ic svg{width:36px;height:36px;stroke-width:1.5}
.stbig .ic svg{width:22px;height:22px}
.logbar .t svg{width:8px;height:8px;fill:currentColor;stroke:none;vertical-align:.02em}
/* 17.3 键盘焦点可见（鼠标点击不显示轮廓） */
.fchip:focus-visible,.tpl:focus-visible,.pchip:focus-visible,.mrow:focus-visible,
.chip.clickable:focus-visible,.themebtn:focus-visible,.grp-title:focus-visible,
.fle s:focus-visible,.drop:focus-visible,.switch input:focus-visible + .slider,
summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)}
.nav a:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:var(--r-sm)}
.fle s{padding:0 2px}
/* 17.4 动效：克制的过渡 + 尊重系统「减少动态效果」 */
.tpl{will-change:transform}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}
/* 17.5 骨架屏 */
.skeleton{position:relative;overflow:hidden;background:var(--surface-3);border-radius:var(--r-sm)}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,var(--surface-2),transparent);animation:shimmer 1.3s ease-in-out infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.sk-row{height:34px;margin:8px 12px}
.sk-tpl{flex:0 0 198px;height:126px;border-radius:var(--r-md)}
/* 17.6 提示条带图标 */
.toast{display:inline-flex;align-items:center;gap:8px}
.toast svg{width:15px;height:15px;flex:0 0 auto}
/* 17.7 深色下的少量组件微调（重点：填充按钮/提示条的文字对比度） */
html[data-theme=dark] .btn-primary{background:var(--brand);border-color:var(--brand);color:#0b0f1a;box-shadow:0 3px 12px rgba(99,102,241,.4)}
html[data-theme=dark] .btn-primary:hover:not(:disabled){background:var(--brand-hover);border-color:var(--brand-hover)}
html[data-theme=dark] .btn-ok{background:var(--ok);border-color:var(--ok);color:#06251a}
html[data-theme=dark] .btn-ok:hover:not(:disabled){background:var(--ok-ink)}
html[data-theme=dark] .tick{color:#0b0f1a}
html[data-theme=dark] .logo{background:rgba(255,255,255,.07);border-radius:12px}
html[data-theme=dark] .logo img{filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
html[data-theme=dark] .toast{background:#1c2436;color:var(--ink)}
html[data-theme=dark] .toast.ok{background:#123524;color:#d1fae5}
html[data-theme=dark] .toast.err{background:#3a1c20;color:#fecaca}
html[data-theme=dark] pre.log{background:#0a0e18}
html[data-theme=dark] .logbox{background:#0a0e18;border-color:#243049}
html[data-theme=dark] .logbar{background:#101728;border-color:#243049}
/* 17.8 触控与窄屏 */
@media(max-width:820px){ .hsub{display:none} }
@media(max-width:640px){
.hide-xs{display:none !important}
.hwrap{gap:8px}
.chip{font-size:11.5px;padding:4px 10px}
.nav{gap:0}
.nav a{padding:6px 10px}
}