:root{
  --primary:#2563eb;--primary-hover:#1d4ed8;--primary-50:#eff6ff;--primary-100:#dbeafe;
  --bg:#f1f5f9;--surface:#ffffff;--surface-2:#f8fafc;
  --text:#0f172a;--text-2:#475569;--text-3:#94a3b8;--border:#e2e8f0;
  --success:#16a34a;--warning:#d97706;--danger:#dc2626;
}
*{-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;background:var(--bg);color:var(--text);font-feature-settings:"tnum" 0}
.num{font-variant-numeric:tabular-nums}
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 16px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .18s ease;border:1px solid transparent;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover)}
.btn-outline{background:#fff;border-color:var(--border);color:var(--text-2)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-50)}
.btn-danger{background:#fff;border-color:#fecaca;color:var(--danger)}
.btn-danger:hover{background:#fef2f2}
.btn-ghost{background:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text)}
.btn-sm{height:30px;padding:0 12px;font-size:13px;border-radius:6px}
.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.input{width:100%;height:40px;padding:0 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;background:#fff;transition:border .15s,box-shadow .15s}
.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
textarea.input{height:auto;padding:10px 12px;resize:vertical}
.label{display:block;font-size:13px;font-weight:500;color:var(--text-2);margin-bottom:6px}
.badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:500}
.b-green{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}
.b-gray{background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0}
.b-amber{background:#fffbeb;color:#b45309;border:1px solid #fde68a}
.b-red{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.b-blue{background:var(--primary-50);color:var(--primary);border:1px solid var(--primary-100)}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font-size:14px;color:#475569;cursor:pointer;transition:all .15s;margin:2px 8px;user-select:none}
.nav-item:hover{background:#f1f5f9;color:var(--text)}
.nav-item.active{background:var(--primary-50);color:var(--primary);font-weight:600}
.nav-sub{padding-left:42px!important;font-size:13px}
.page{display:none;animation:fadeIn .25s ease}
.page.on{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
table.tb{width:100%;border-collapse:collapse;font-size:13.5px}
table.tb th{background:#f8fafc;color:#64748b;font-weight:500;text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
table.tb td{padding:12px 14px;border-bottom:1px solid #f1f5f9;color:var(--text-2);vertical-align:middle}
table.tb tr:hover td{background:#fafbfd}
.switch{position:relative;width:38px;height:22px;background:#cbd5e1;border-radius:999px;cursor:pointer;transition:.2s;flex-shrink:0}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch.on{background:var(--primary)}
.switch.on::after{left:18px}
.modal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(15,23,42,.5);backdrop-filter:blur(2px);padding:20px}
.modal.on{display:flex}
.modal-card{background:#fff;border-radius:16px;box-shadow:0 24px 64px rgba(15,23,42,.25);animation:pop .22s cubic-bezier(.34,1.4,.64,1);max-width:calc(100vw - 40px);max-height:calc(100vh - 40px);overflow:auto}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}}
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-80px);z-index:99;background:#0f172a;color:#fff;padding:10px 20px;border-radius:10px;font-size:14px;display:flex;align-items:center;gap:8px;box-shadow:0 12px 32px rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.34,1.3,.64,1);max-width:90vw}
.toast.on{transform:translateX(-50%) translateY(0)}
.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;flex-shrink:0}
.step-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;background:#e2e8f0;color:#94a3b8;flex-shrink:0}
.step-dot.cur{background:var(--primary);color:#fff}
.step-dot.done{background:var(--primary-100);color:var(--primary)}
.tpl{cursor:pointer;transition:all .18s;border:2px solid transparent;border-radius:12px;overflow:hidden;background:#fff}
.tpl:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,23,42,.12)}
.tpl.sel{border-color:var(--primary);box-shadow:0 0 0 4px rgba(37,99,235,.1)}
/* 字段配置页预览联动 */
.pv-field{transition:all .25s ease;border-radius:8px}
.pv-field.off{opacity:.18;filter:grayscale(1);position:relative}
.pv-field.hl{background:rgba(37,99,235,.08);box-shadow:inset 0 0 0 2px var(--primary)}
.f-row:hover{background:var(--primary-50)}
.lockchip{position:absolute;top:8px;right:8px;background:rgba(15,23,42,.55);color:#fff;font-size:11px;padding:3px 8px;border-radius:999px;display:flex;align-items:center;gap:4px;backdrop-filter:blur(4px)}
/* 字段配置页预览配色主题 */
.pf-preview{--pf1:#0f2b60;--pf2:#1e40af;--pftx:#fff}
.pf-preview.pf-t-gold{--pf1:#291b0c;--pf2:#78350f;--pftx:#fff}
.pf-preview.pf-t-dark{--pf1:#020617;--pf2:#1e293b;--pftx:#f1f5f9}
.pf-preview.pf-t-light{--pf1:#f8fafc;--pf2:#e2e8f0;--pftx:#0f172a}
.pf-preview.pf-t-light .pf-head .avatar{background:rgba(15,23,42,.08)!important;border:1px solid rgba(15,23,42,.12)}
.pf-preview.pf-t-light .lockchip{background:rgba(15,23,42,.06)}
.pf-preview .pf-head .lockchip{background:rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:1024px){#sidebar{position:fixed;left:-260px;z-index:50;transition:left .25s;height:100vh}#sidebar.open{left:0;box-shadow:0 0 60px rgba(0,0,0,.3)}}

/* ============================================================
 * 骨架与兼容（admin.html 专用 · 原型 01 CSS 原样移植）
 * v2.css 在前提供 modal/旧组件；此文件在后覆盖 body/#app 与关键类
 * ============================================================ */
body.adm-page{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
body.adm-page #root{min-height:100vh}
/* 主内容容器（原型 main flex-1 + px-8 py-7 由 DOM 承担） */
body.adm-page .page-wrap{display:none}
body.adm-page .page-wrap.on{display:block}
/* 旧 .tbl 映射到原型表格风格 */
body.adm-page table.tbl{width:100%;font-size:13.5px;border-collapse:collapse}
body.adm-page table.tbl thead th{text-align:left;padding:10px 12px;background:#f8fafc;color:#64748b;font-weight:500;font-size:12.5px;white-space:nowrap}
body.adm-page table.tbl tbody td{padding:11px 12px;border-top:1px solid #f1f5f9;color:#334155}
body.adm-page table.tbl tbody tr:hover td{background:#f8fafc}
/* 旧表单类（v2.css 提供基础，这里对齐原型输入框） */
body.adm-page .panel label,body.adm-page .card label{display:block;font-size:13px;color:#475569;margin-bottom:12px}
body.adm-page .panel label input,body.adm-page .panel label select,body.adm-page .panel label textarea,
body.adm-page .card label input,body.adm-page .card label select,body.adm-page .card label textarea{
  display:block;width:100%;margin-top:6px;border:1px solid #e2e8f0;border-radius:10px;padding:9px 12px;font-size:14px;font-family:inherit;color:#0f172a;background:#fff}
body.adm-page .panel label input:focus,body.adm-page .card label input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
/* 旧 mini/btn-main/btn-ghost 对齐原型 */
body.adm-page .mini{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--border);background:#fff;color:#475569;font-size:12.5px;font-family:inherit;cursor:pointer}
body.adm-page .mini:hover{border-color:var(--primary);color:var(--primary)}
body.adm-page .btn-main{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 18px;border-radius:8px;border:0;background:var(--primary);color:#fff;font-size:14px;font-weight:500;font-family:inherit;cursor:pointer}
body.adm-page .btn-main:hover{background:var(--primary-600)}
body.adm-page .btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 16px;border-radius:8px;border:1px solid var(--border);background:#fff;color:#475569;font-size:14px;font-family:inherit;cursor:pointer}
body.adm-page .err{color:var(--danger,#dc2626);font-size:12.5px;min-height:16px;margin:8px 0}
body.adm-page .hint{font-size:12px;color:#94a3b8;line-height:1.7;margin:6px 0 0}
body.adm-page .warn{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.7}
body.adm-page .muted{color:#94a3b8;font-size:12px}
body.adm-page .empty{text-align:center;color:#94a3b8;font-size:13px;padding:28px 0}
body.adm-page .link{color:var(--primary);text-decoration:none}
/* 表格里的姓名是链接，17px 高的纯文本点击区太小 → inline-block + 上下 padding（约 29px，兼顾表格密度） */
body.adm-page .tbl .link{display:inline-block;padding:5px 2px}
body.adm-page .link:hover{text-decoration:underline}
body.adm-page .badge.on{background:#ecfdf5;color:#059669}
body.adm-page .badge.off{background:#f1f5f9;color:#64748b}
/* toast（bottom:auto 必须显式写：v2.css 的 #toast{bottom:80px} 与这里 top 同时生效会把 fixed 元素拉满整屏） */
body.adm-page #toast{position:fixed;top:22px;bottom:auto;left:50%;transform:translateX(-50%) translateY(-80px);
  background:rgba(15,23,42,.9);color:#fff;padding:10px 20px;border-radius:10px;font-size:13.5px;z-index:99;
  transition:transform .3s cubic-bezier(.3,1.3,.5,1);white-space:nowrap}
body.adm-page #toast.on{transform:translateX(-50%) translateY(0)}
/* 登录页（原型 p-login 用 Tailwind 布局，此处只兜底） */
body.adm-page .lf-input{width:100%;height:44px;border:1px solid #e2e8f0;border-radius:10px;padding:0 13px;font-size:14.5px;font-family:inherit;color:#0f172a;background:#fff}
body.adm-page .lf-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}