* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--mono); }
.text-muted { color: var(--text-2); }
.text-danger { color: var(--tone-danger); }
.text-success { color: var(--tone-success); }

/* ===== 应用骨架 ===== */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: #0f172a; color: #cbd5e1;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.sidebar__brand {
  height: var(--topbar-h); display: flex; align-items: center; gap: 8px;
  padding: 0 18px; font-weight: 700; color: #fff; font-size: 16px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar__brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.sidebar__menu { flex: 1; overflow-y: auto; padding: 8px 0; }
.menu-group__title {
  font-size: 11px; color: #64748b; padding: 14px 18px 6px; text-transform: uppercase; letter-spacing: .04em;
}
.menu-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 18px; color: #cbd5e1;
  cursor: pointer; border-left: 3px solid transparent; font-size: 14px;
}
.menu-item:hover { background: rgba(255,255,255,.05); color: #fff; text-decoration: none; }
.menu-item.is-active { background: rgba(37,99,235,.18); color: #fff; border-left-color: var(--brand); }
.sidebar__foot { padding: 12px 18px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; color: #64748b; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 20px; position: sticky; top: 0; z-index: 20;
}
.topbar__title { font-weight: 600; font-size: 16px; }
.topbar__right { display: flex; align-items: center; gap: 14px; }
.topbar__user { font-size: 13px; color: var(--text-2); }
.content { padding: 20px; flex: 1; }

/* ===== 登录卡片 ===== */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1e3a8a, #2563eb); }
.login-card { width: 360px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 32px; }
.login-card h1 { font-size: 20px; text-align: center; margin: 0 0 4px; }
.login-card .sub { text-align: center; color: var(--text-2); margin-bottom: 22px; }
.login-banner { background: var(--tone-danger-bg); color: var(--tone-danger); padding: 8px 12px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: 13px; }

/* ===== 面包屑 ===== */
.crumbs { color: var(--text-2); font-size: 13px; margin-bottom: 14px; }
.crumbs a { color: var(--text-2); }

/* ===== 卡片 ===== */
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 16px; }
.card__head { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
.card__body { padding: 18px; }
.card--log { border: 1px solid var(--border); }
.card--log.is-open .card--log__body { display: block; }
.card--log__body { display: none; padding: 0 16px 16px; }

/* ===== 指标卡 ===== */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.stat-card { background: var(--surface); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.stat-card .label { color: var(--text-2); font-size: 13px; }
.stat-card .num { font-size: 26px; font-weight: 700; margin-top: 6px; }
.stat-card .num small { font-size: 13px; color: var(--text-2); font-weight: 400; }

/* ===== 工具栏 / 筛选 ===== */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filter-bar { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 14px; display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.filter-bar .field { display: flex; flex-direction: column; gap: 4px; }
.filter-bar .field label { font-size: 12px; color: var(--text-2); }
.filter-bar .field input, .filter-bar .field select { min-width: 150px; }

/* ===== 表单 ===== */
.form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.form-group { margin-bottom: 16px; max-width: 560px; }
.form-group > label { display: block; font-size: 13px; color: var(--text); margin-bottom: 6px; font-weight: 500; }
.form-group > label .req { color: var(--tone-danger); margin-left: 2px; }
.form-hint { font-size: 12px; color: var(--text-2); margin-top: 4px; }
.input-group { display: flex; gap: 8px; }
.input-group input { flex: 1; min-width: 0; }
.section-title { font-size: 15px; font-weight: 600; color: var(--text); margin: 18px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-2); }
input[type=text], input[type=password], input[type=number], input[type=email], input[type=tel], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit; color: var(--text); background: var(--surface); transition: border-color .15s;
}
textarea { resize: vertical; min-height: 80px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.field-error { color: var(--tone-danger); font-size: 12px; margin-top: 4px; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--tone-danger); }
input[readonly], input:disabled, textarea[readonly], select:disabled { background: var(--surface-2); color: var(--text-2); cursor: not-allowed; }

/* 横向配置行（参考微信开放平台配置页） */
.cfg-row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.cfg-row > label { width: 160px; flex-shrink: 0; text-align: right; font-size: 14px; color: var(--text); font-weight: 500; }
.cfg-row > label .req { color: var(--tone-danger); margin-left: 2px; }
.cfg-row > .input-group { flex: 1; min-width: 0; }
.cfg-row .form-hint { margin: 4px 0 0 176px; }
.cfg-row .input-group button { white-space: nowrap; }
@media (max-width: 768px) {
  .cfg-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .cfg-row > label { width: auto; text-align: left; }
  .cfg-row .form-hint { margin-left: 0; }
}

/* 开关 */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: var(--border-2); border-radius: 24px; transition: .2s; cursor: pointer; }
.switch .slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + .slider { background: var(--tone-success); }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* 标签输入框（数组） */
.tag-input { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); min-height: 40px; align-items: center; }
.tag-input input { border: none; flex: 1; min-width: 120px; padding: 4px; }
.tag-input input:focus { box-shadow: none; }
.tag-chip { background: var(--brand-50); color: var(--brand-600); padding: 2px 8px; border-radius: 12px; font-size: 12px; display: flex; align-items: center; gap: 4px; }
.tag-chip .x { cursor: pointer; color: var(--brand-600); }

/* ===== 按钮 ===== */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-2); background: var(--surface); color: var(--text); cursor: pointer; font-size: 14px; font-family: inherit; transition: .15s; }
.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.btn--danger { background: var(--tone-danger); border-color: var(--tone-danger); color: #fff; }
.btn--danger:hover { background: #b91c1c; color: #fff; }
.btn--ghost { background: transparent; border-color: transparent; color: var(--brand); }
.btn--sm { padding: 5px 10px; font-size: 13px; }
.btn .spinner { width: 14px; height: 14px; }

/* ===== 表格 ===== */
.table-wrap { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.tbl th { background: var(--surface-2); color: var(--text-2); font-weight: 600; white-space: nowrap; position: sticky; top: 0; }
.tbl tbody tr:hover { background: var(--brand-50); }
.tbl td .row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tbl .mono { font-size: 12px; }
.pagination { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding: 12px 16px; color: var(--text-2); font-size: 13px; }
.pagination input { width: 56px; padding: 4px 6px; }

/* ===== 标签 / 徽章 ===== */
.tag { display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: 12px; line-height: 1.7; white-space: nowrap; }
.tag--success { background: var(--tone-success-bg); color: var(--tone-success); }
.tag--info { background: var(--tone-info-bg); color: var(--tone-info); }
.tag--warn { background: var(--tone-warn-bg); color: var(--tone-warn); }
.tag--danger { background: var(--tone-danger-bg); color: var(--tone-danger); }
.tag--muted { background: var(--tone-muted-bg); color: var(--tone-muted); }
.tag--ops { background: var(--tone-ops-bg); color: var(--tone-ops); }
.tag--default { background: var(--tone-default-bg); color: var(--tone-default); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.dot--success { background: var(--tone-success); }
.dot--danger { background: var(--tone-danger); }
.dot--warn { background: var(--tone-warn); }
.dot--muted { background: var(--tone-muted); }

/* ===== 横幅 ===== */
.banner { padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: 13px; }
.banner--warn { background: var(--tone-warn-bg); color: var(--tone-warn); }
.banner--danger { background: var(--tone-danger-bg); color: var(--tone-danger); }
.banner--muted { background: var(--tone-muted-bg); color: var(--tone-muted); }
.banner--info { background: var(--tone-info-bg); color: var(--tone-info); }

/* ===== 弹窗 ===== */
.modal-mask { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal-mask.is-open { display: flex; }
.modal { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; max-width: 480px; max-height: 90vh; display: flex; flex-direction: column; }
.modal--lg { max-width: 720px; }
.modal--xl { max-width: 980px; }
.modal__head { padding: 16px 18px; border-bottom: 1px solid var(--border); font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.modal__body { padding: 18px; overflow-y: auto; }
.modal__foot { padding: 14px 18px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
.modal__close { cursor: pointer; color: var(--text-2); font-size: 20px; line-height: 1; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw; background: var(--surface); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .25s; z-index: 110; display: flex; flex-direction: column; }
.drawer.is-open { transform: translateX(0); }
.drawer__head { padding: 16px 18px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-weight: 600; }

/* ===== 步骤条 ===== */
.steps { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; }
.step__num { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border-2); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.step.is-active .step__num { background: var(--brand); color: #fff; border-color: var(--brand); }
.step.is-done .step__num { background: var(--tone-success); color: #fff; border-color: var(--tone-success); }
.step.is-active { color: var(--text); font-weight: 600; }
.step__arrow { color: var(--border-2); }

/* ===== 进度条 ===== */
.progress { height: 8px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.progress__bar { height: 100%; background: var(--brand); transition: width .3s; }

/* ===== tabs ===== */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tab { padding: 10px 14px; cursor: pointer; color: var(--text-2); border-bottom: 2px solid transparent; font-size: 14px; }
.tab.is-active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.tab.has-error { color: var(--tone-danger); }

/* ===== 空态 / loading ===== */
.empty { text-align: center; color: var(--text-2); padding: 40px; }
.spinner { width: 18px; height: 18px; border: 2px solid var(--border-2); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; vertical-align: middle; }
.spinner--lg { width: 36px; height: 36px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-box { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px; color: var(--text-2); }

/* ===== 网格工具 ===== */
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  .sidebar { position: fixed; z-index: 50; transform: translateX(-100%); transition: transform .2s; }
  .sidebar.is-open { transform: translateX(0); }
  .menu-toggle { display: inline-flex; }
}
.menu-toggle { display: none; background: none; border: none; font-size: 22px; cursor: pointer; }
.hidden { display: none !important; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; }
.mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mb-12 { margin-bottom: 12px; }
.toast-host { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: #111827; color: #fff; padding: 10px 16px; border-radius: 8px; box-shadow: var(--shadow-lg); font-size: 14px; animation: toastIn .2s; max-width: 80vw; }
.toast--success { background: #166534; }
.toast--error { background: #991b1b; }
.toast--warn { background: #92400e; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; } }

/* =========================================================
   补充类 + 视觉打磨（2026-08-12 优化）
   ========================================================= */

/* 卡片标题复位（页面常用 <h3> 置于 card__head，避免默认 margin 错位） */
.card__head h2, .card__head h3 { margin: 0; font-size: 15px; font-weight: 600; }

/* 卡片 / 指标卡微妙悬浮反馈 */
.card, .stat-card { transition: box-shadow .2s ease, transform .2s ease; }
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* 统计卡数值（此前 .stat-card__value 未定义，数字不显大） */
.stat-card__value { font-size: 24px; font-weight: 700; margin-top: 6px; line-height: 1.25; word-break: break-all; }

/* 文字色调工具（此前大量使用 .text--* 但未定义） */
.text--info { color: var(--tone-info); }
.text--success { color: var(--tone-success); }
.text--warn { color: var(--tone-warn); }
.text--danger { color: var(--tone-danger); }
.text--muted { color: var(--text-2); }
.text--default { color: var(--text); }

/* 加载态（此前 class="loading" 无样式）：自带旋转指示 */
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px; color: var(--text-2); }
.loading::before { content: ""; width: 18px; height: 18px; border: 2px solid var(--border-2); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; flex: 0 0 auto; }

/* 双列表单网格（此前 .form-grid 未定义，表单全竖向堆叠） */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
.form-grid .form-group { max-width: none; margin-bottom: 16px; }
@media (max-width: 768px) { .form-grid { grid-template-columns: 1fr; } }

/* 表单底部操作区 / 错误聚合区 */
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.form-errors:empty { display: none; }
.form-errors { margin-top: 12px; }

/* 代码块（Token 状态 / 回调地址等） */
.code-block { background: #0f172a; color: #e2e8f0; padding: 14px 16px; border-radius: var(--radius-sm); font-family: var(--mono); font-size: 12px; line-height: 1.6; overflow: auto; max-height: 52vh; white-space: pre-wrap; word-break: break-all; }

/* 待办列表（看板页） */
.todo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.todo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: 13px; }
.todo__tag { flex: 0 0 auto; font-size: 12px; color: var(--brand-600); background: var(--brand-50); padding: 1px 8px; border-radius: 10px; }

/* 详情键值网格（详情页通用） */
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.kv__item { display: flex; gap: 12px; padding: 12px 16px; background: var(--surface); }
.kv__k { flex: 0 0 116px; color: var(--text-2); font-size: 13px; }
.kv__v { flex: 1; min-width: 0; word-break: break-all; }
@media (max-width: 768px) { .kv { grid-template-columns: 1fr; } }

/* 标签更精致 */
.tag { font-weight: 500; }

/* 表格细斑马纹，提升可读性 */
.tbl tbody tr:nth-child(even) { background: var(--surface-2); }
.tbl tbody tr:hover { background: var(--brand-50); }

/* 按钮触觉反馈 + 键盘可见聚焦环 */
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
input:focus, select:focus, textarea:focus, .tag-input:focus-within { box-shadow: var(--ring); }

/* 弹窗入场动画 + 遮罩毛玻璃 */
.modal-mask { background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.modal { animation: modalIn .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* 空态更友好（带图标位） */
.empty { color: var(--text-3); }
.empty::before { content: "∅"; display: block; font-size: 28px; opacity: .5; margin-bottom: 6px; }

/* 滚动条美化 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; border: 2px solid var(--surface); }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
.sidebar__menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-color: transparent; }

/* 尊重「减少动态效果」无障碍偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ===== 动态行编辑（官网配置的业务板块 / 数据指标）===== */
.dyn-row { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 10px; }
.dyn-row__fields { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.dyn-row__fields > input, .dyn-row__fields > textarea { flex: 1; min-width: 160px; }
.dyn-row__fields > textarea { min-height: 64px; }
.dyn-row .dyn-del { flex: 0 0 auto; align-self: center; }

/* ===== 图片上传（官网配置 Logo / Favicon）===== */
.img-upload { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.img-upload__preview { width: 56px; height: 56px; border-radius: 10px; object-fit: contain; background: rgba(255, 255, 255, .04); border: 1px solid var(--border); flex: 0 0 auto; }
.img-upload__preview--sm { width: 40px; height: 40px; border-radius: 8px; }
.img-upload__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.img-upload__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.img-upload__actions .btn { cursor: pointer; }
.img-upload__actions .btn.is-disabled { opacity: .5; pointer-events: none; }

/* =========================================================
   科技感增强 + 菜单图标 / 折叠（2026-08-17）
   ========================================================= */

/* 内容区极淡光晕背景（克制科技感） */
body { background: var(--content-bg); }
.content { background: transparent; }

/* 侧边栏深色微渐变 + 顶部品牌发光分隔 */
.sidebar {
  background: var(--sidebar-bg);
  box-shadow: 4px 0 24px rgba(15, 23, 42, .18);
  transition: width .22s cubic-bezier(.2, .8, .2, 1), flex-basis .22s cubic-bezier(.2, .8, .2, 1);
}
.sidebar__brand {
  background: linear-gradient(180deg, rgba(56, 189, 248, .12), transparent);
  position: relative; gap: 10px;
}
.sidebar__brand .dot {
  background: var(--accent-grad);
  box-shadow: 0 0 10px rgba(56, 189, 248, .7);
  flex: 0 0 auto;
}
.sidebar__brand::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .55), transparent);
}
.sidebar__logo {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(56, 189, 248, .14); border: 1px solid rgba(56, 189, 248, .3);
}
.sidebar__name { white-space: nowrap; overflow: hidden; font-size: 15px; letter-spacing: .3px; }
.sidebar__foot { color: #475569; border-top-color: rgba(255, 255, 255, .08); white-space: nowrap; overflow: hidden; }

/* 折叠按钮 */
.sidebar__collapse {
  margin-left: auto; width: 28px; height: 28px; flex: 0 0 auto; cursor: pointer;
  border: none; background: rgba(255, 255, 255, .04); color: #94a3b8; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; transition: .15s;
}
.sidebar__collapse:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.sidebar__collapse svg { width: 18px; height: 18px; display: block; }

/* 菜单分组标题（更精致的弱对比） */
.menu-group__title { color: #475569; font-weight: 600; letter-spacing: .08em; }

/* 菜单项：图标 + 文字结构 */
.menu-item {
  gap: 12px; margin: 2px 10px; padding: 10px 12px; border-left: none; border-radius: 8px;
  color: #cbd5e1; transition: background .18s, color .18s;
}
.menu-item__icon { flex: 0 0 auto; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: #94a3b8; transition: color .18s; }
.menu-item__icon svg { width: 20px; height: 20px; display: block; }
.menu-item__text { white-space: nowrap; }
.menu-item:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.menu-item:hover .menu-item__icon { color: var(--accent); }
.menu-item.is-active {
  background: var(--sidebar-active); color: #fff;
  box-shadow: inset 3px 0 0 var(--accent);
}
.menu-item.is-active .menu-item__icon { color: var(--accent); filter: drop-shadow(0 0 6px rgba(56, 189, 248, .65)); }

/* 顶栏折叠按钮（与侧栏按钮等效，移动端主要入口） */
.topbar__toggle {
  width: 32px; height: 32px; margin-right: 12px; flex: 0 0 auto; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  border-radius: 8px; display: none; align-items: center; justify-content: center; transition: .15s;
}
.topbar__toggle:hover { color: var(--brand); border-color: var(--brand); }
.topbar__toggle svg { width: 18px; height: 18px; display: block; }
.topbar { justify-content: flex-start; }
.topbar__title { flex: 1; min-width: 0; }

/* 折叠态：仅显示图标 */
.sidebar.is-collapsed { width: var(--collapse-w); flex-basis: var(--collapse-w); }
.sidebar.is-collapsed .sidebar__brand { padding: 0; justify-content: center; }
.sidebar.is-collapsed .sidebar__name { display: none; }
.sidebar.is-collapsed .sidebar__logo { display: none; }
.sidebar.is-collapsed .sidebar__brand::after { display: none; }
.sidebar.is-collapsed .sidebar__collapse { transform: rotate(180deg); margin: 0 auto; }
.sidebar.is-collapsed .menu-group__title { text-align: center; font-size: 9px; padding: 14px 0 4px; overflow: hidden; }
.sidebar.is-collapsed .menu-group__title::after { content: ""; display: block; width: 22px; height: 1px; margin: 4px auto 0; background: rgba(148, 163, 184, .35); }
.sidebar.is-collapsed .menu-group__title > span { display: none; }
.sidebar.is-collapsed .menu-item { justify-content: center; margin: 2px 8px; padding: 11px 0; }
.sidebar.is-collapsed .menu-item__text { display: none; }
.sidebar.is-collapsed .sidebar__foot { display: none; }

/* 卡片科技感：边框高光 + 轻微毛玻璃 */
.card {
  border: var(--hairline);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card:hover { box-shadow: var(--shadow-md); }
.card__head h2, .card__head h3 { letter-spacing: .2px; }

/* 统计卡科技风：渐变底 + 角标图标 + 微发光 */
.stat-card {
  position: relative; overflow: hidden;
  background: var(--stat-grad);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  transition: box-shadow .2s ease, transform .2s ease;
}
.stat-card::before {
  content: ""; position: absolute; right: -24px; top: -24px; width: 96px; height: 96px;
  background: radial-gradient(circle, rgba(56, 189, 248, .22), transparent 70%);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-glow); }
.stat-card__icon {
  width: 38px; height: 38px; border-radius: 10px; margin-bottom: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-grad); color: #fff; box-shadow: var(--brand-glow);
}
.stat-card__icon svg { width: 20px; height: 20px; display: block; }
.stat-card__label { color: var(--text-2); font-size: 13px; }
.stat-card__value { font-size: 26px; font-weight: 700; margin-top: 6px; line-height: 1.25; word-break: break-all; }

/* 按钮主色渐变 + 发光 */
.btn--primary { background: var(--brand-grad); border: none; color: #fff; box-shadow: 0 4px 12px rgba(37, 99, 235, .25); }
.btn--primary:hover { filter: brightness(1.05); box-shadow: var(--brand-glow); color: #fff; }

/* 表格强化 */
.tbl th { letter-spacing: .3px; }
.tbl tbody tr { transition: background .15s; }
.tbl tbody tr:hover { background: var(--brand-50); }

/* 表单聚焦光环增强 */
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }

/* 移动端：顶栏折叠按钮变为抽屉开关；抽屉内忽略折叠态，保证文字可读 */
@media (max-width: 768px) {
  .topbar__toggle { display: inline-flex; }
  .sidebar { box-shadow: 8px 0 32px rgba(15, 23, 42, .35); }
  .sidebar.is-collapsed { width: var(--sidebar-w); flex-basis: var(--sidebar-w); }
  .sidebar.is-collapsed .sidebar__brand { padding: 0 18px; justify-content: flex-start; }
  .sidebar.is-collapsed .sidebar__name { display: inline; }
  .sidebar.is-collapsed .sidebar__logo { display: inline-flex; }
  .sidebar.is-collapsed .sidebar__collapse { transform: none; margin-left: auto; }
  .sidebar.is-collapsed .menu-group__title { text-align: left; font-size: 11px; padding: 14px 18px 6px; }
  .sidebar.is-collapsed .menu-group__title > span { display: inline; }
  .sidebar.is-collapsed .menu-group__title::after { display: none; }
  .sidebar.is-collapsed .menu-item { justify-content: flex-start; padding: 10px 12px; margin: 2px 10px; }
  .sidebar.is-collapsed .menu-item__text { display: inline; }
  .sidebar.is-collapsed .sidebar__foot { display: block; }
}

/* =========================================================
   精细化页面组件（服务商信息 / 进度看板 / 通用详情页，2026-08-17）
   ========================================================= */

/* ---- 页面头部身份卡（深色科技底 + 主操作）---- */
.hero {
  position: relative; overflow: hidden; margin-bottom: 16px;
  border-radius: var(--radius-xl); padding: 22px 24px; color: #e6edf7;
  background: linear-gradient(120deg, #0f172a 0%, #16224a 48%, #0d1a3a 100%);
  box-shadow: 0 12px 34px rgba(15, 23, 42, .22);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.hero::before {
  content: ""; position: absolute; right: -60px; top: -70px; width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(56, 189, 248, .3), transparent 65%); pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: linear-gradient(rgba(148, 197, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 197, 255, .06) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(100deg, transparent 35%, #000 100%);
  -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 100%);
}
.hero__avatar {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: #fff; letter-spacing: .5px;
  background: var(--accent-grad); box-shadow: 0 8px 20px rgba(56, 189, 248, .35);
}
.hero__avatar svg { width: 26px; height: 26px; }
.hero__main { position: relative; z-index: 1; flex: 1; min-width: 220px; }
.hero__title { font-size: 20px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; line-height: 1.35; }
.hero__meta { margin-top: 8px; display: flex; gap: 8px 20px; flex-wrap: wrap; font-size: 13px; color: #9fb3d1; }
.hero__meta b { color: #dbe7f7; font-weight: 500; }
.hero__actions { position: relative; z-index: 1; display: flex; gap: 10px; flex-wrap: wrap; }
.hero__actions .btn { border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: #eaf2ff; }
.hero__actions .btn:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.hero__actions .btn--primary { background: var(--brand-grad); border-color: transparent; color: #fff; }
.hero .tag--success { background: rgba(34, 197, 94, .18); color: #86efac; }
.hero .tag--danger { background: rgba(248, 113, 113, .18); color: #fca5a5; }

/* ---- 指标卡（带图标 / 副标 / 进度）---- */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 16px; }
.metric {
  position: relative; overflow: hidden; padding: 16px 18px;
  border-radius: var(--radius-lg); border: var(--hairline);
  background: linear-gradient(135deg, #ffffff 0%, #f7f9ff 100%);
  box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s;
}
.metric:hover { transform: translateY(-3px); box-shadow: var(--shadow-glow); }
.metric::after {
  content: ""; position: absolute; right: -28px; bottom: -34px; width: 110px; height: 110px;
  background: radial-gradient(circle, rgba(56, 189, 248, .16), transparent 68%);
}
.metric__top { display: flex; align-items: center; gap: 10px; }
.metric__ico {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-grad); color: #fff; box-shadow: 0 6px 16px rgba(37, 99, 235, .22);
}
.metric__ico svg { width: 18px; height: 18px; display: block; }
.metric__ico--cyan { background: var(--accent-grad); box-shadow: 0 6px 16px rgba(56, 189, 248, .26); }
.metric__ico--green { background: linear-gradient(135deg, #34d399, #10b981); box-shadow: 0 6px 16px rgba(16, 185, 129, .24); }
.metric__ico--amber { background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 6px 16px rgba(245, 158, 11, .24); }
.metric__ico--violet { background: linear-gradient(135deg, #a78bfa, #7c3aed); box-shadow: 0 6px 16px rgba(124, 58, 237, .24); }
.metric__label { font-size: 13px; color: var(--text-2); }
.metric__value { position: relative; z-index: 1; margin-top: 10px; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -.4px; word-break: break-all; }
.metric__value small { font-size: 13px; font-weight: 400; color: var(--text-2); margin-left: 4px; letter-spacing: 0; }
.metric__foot { position: relative; z-index: 1; margin-top: 10px; font-size: 12px; color: var(--text-3); }
.metric .progress { margin-top: 10px; position: relative; z-index: 1; }
.metric .progress__bar { background: var(--brand-grad); }
.metric .progress__bar--warn { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.metric .progress__bar--danger { background: linear-gradient(90deg, #fb7185, #e11d48); }

/* ---- 面板（分区卡片，带图标标题 + 右侧操作）---- */
.panel { background: var(--surface); border: var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow); margin-bottom: 16px; overflow: hidden; }
.panel__head {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--border); background: linear-gradient(180deg, rgba(239, 246, 255, .7), transparent);
}
.panel__ico { width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-50); color: var(--brand); }
.panel__ico svg { width: 15px; height: 15px; display: block; }
.panel__title { font-weight: 600; font-size: 14px; }
.panel__sub { font-size: 12px; color: var(--text-3); }
.panel__extra { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.panel__body { padding: 16px 18px; }
.panel__body--flush { padding: 0; }

/* ---- 信息行（比 .kv 更紧凑，用于分区卡内）---- */
.info-rows { display: flex; flex-direction: column; }
.info-row { display: flex; align-items: flex-start; gap: 14px; padding: 11px 2px; border-bottom: 1px dashed var(--border); font-size: 14px; }
.info-row:last-child { border-bottom: none; }
.info-row__k { flex: 0 0 132px; color: var(--text-2); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.info-row__v { flex: 1; min-width: 0; word-break: break-all; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.info-row__v .mono { font-family: var(--mono); font-size: 13px; }
@media (max-width: 640px) {
  .info-row { flex-direction: column; gap: 4px; }
  .info-row__k { flex: none; }
}

/* ---- 两栏自适应布局 ---- */
.cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.cols-2 > .panel { margin-bottom: 0; }

/* ---- 环形占比图（纯 SVG，看板用）---- */
.ring-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ring { position: relative; width: 148px; height: 148px; flex: 0 0 auto; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { stroke: var(--border); }
.ring__val { stroke: url(#ringGrad); stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.ring__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring__num { font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -.5px; }
.ring__cap { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.legend { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 8px; }
.legend__item { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.legend__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.legend__name { color: var(--text-2); }
.legend__num { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- 分布条（状态占比横条）---- */
.dist { display: flex; flex-direction: column; gap: 12px; }
.dist__row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.dist__name { flex: 0 0 96px; color: var(--text-2); }
.dist__bar { flex: 1; height: 8px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.dist__fill { height: 100%; border-radius: 6px; transition: width .5s ease; }
.dist__num { flex: 0 0 52px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- 空状态 / 骨架（更克制）---- */
.skeleton { height: 14px; border-radius: 6px; background: linear-gradient(90deg, #eef1f6 25%, #f7f9fc 37%, #eef1f6 63%); background-size: 400% 100%; animation: sk 1.2s ease infinite; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---- 待办条目（看板清单，可点击跳转）---- */
.todo { border: var(--hairline); background: linear-gradient(135deg, #ffffff, #fbfcff); transition: transform .16s, box-shadow .16s, background .16s; padding: 11px 14px; }
.todo:hover { transform: translateX(2px); box-shadow: var(--shadow); background: #fff; }
.todo__tag { font-weight: 500; }

/* =========================================================
   统一页面头部 + 精修打磨（2026-08-17 · 全站风格统一）
   —— 均为「新增 / 增强」，不影响既有规则；所有页面自动受益。
   ========================================================= */

/* ---- 统一页面头部（列表 / 表单 / 详情页通用）----
   用法：<header class="page-head"><div><h1 class="page-head__title">…</h1>
        <p class="page-head__sub">…</p></div><div class="page-head__actions">…按钮…</div></header> */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 16px; padding-bottom: 14px; position: relative;
  border-bottom: 1px solid var(--border);
}
.page-head::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 56px; height: 2px;
  border-radius: 2px; background: var(--brand-grad);
}
.page-head__title { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: .2px; line-height: 1.3; }
.page-head__sub { margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
.page-head__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---- 卡片标题图标芯片（与面板 panel__ico 对齐，可选）---- */
.card__head { gap: 10px; }
.card__head-ico {
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-50); color: var(--brand);
}
.card__head-ico svg { width: 15px; height: 15px; display: block; }

/* ---- 指标卡图标（装饰性，置于右上，兼容既有 .label/.num 结构）---- */
.stat-card { position: relative; overflow: hidden; }
.stat-card__icon {
  position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-grad); color: #fff; box-shadow: 0 6px 16px rgba(37, 99, 235, .22);
}
.stat-card__icon svg { width: 18px; height: 18px; display: block; }
.stat-card::before {
  content: ""; position: absolute; right: -26px; bottom: -30px; width: 96px; height: 96px;
  background: radial-gradient(circle, rgba(56, 189, 248, .14), transparent 68%); pointer-events: none;
}

/* ---- 工具栏 / 筛选条 圆角与间距精修 ---- */
.toolbar { padding: 2px; }
.filter-bar .field input, .filter-bar .field select { box-shadow: none; }
.filter-bar .field input:focus, .filter-bar .field select:focus { box-shadow: var(--ring); }

/* ---- 区块标题左侧科技色条 ---- */
.section-title { display: flex; align-items: center; gap: 8px; }
.section-title::before { content: ""; width: 4px; height: 15px; border-radius: 3px; background: var(--brand-grad); }

/* ---- Tabs 激活下划线滑动感 ---- */
.tabs { gap: 2px; }
.tab { position: relative; transition: color .15s; }
.tab::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--brand); transform: scaleX(0); transform-origin: center; transition: transform .2s ease;
}
.tab.is-active::after { transform: scaleX(1); }

/* ---- .table 别名对齐 .tbl（修复 sys-update / authorize 中 class="table" 未落样式的问题）---- */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.table th { background: var(--surface-2); color: var(--text-2); font-weight: 600; white-space: nowrap; }
.table tbody tr { transition: background .15s; }
.table tbody tr:hover { background: var(--brand-50); }
.table .row-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- 入场动画（克制；尊重 reduced-motion）---- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.reveal { animation: fadeUp .32s cubic-bezier(.2, .8, .2, 1) both; }
.hero, .page-head { animation: fadeUp .34s cubic-bezier(.2, .8, .2, 1) both; }

/* ---- 标签 / 徽章 过渡更顺滑 ---- */
.tag { transition: background .15s, color .15s; }

/* ---- 按钮 loading 态（btn.is-loading 禁用并显示 spinner）---- */
.btn.is-loading { pointer-events: none; opacity: .75; }
.btn.is-loading .spinner { width: 14px; height: 14px; }

/* ---- 输入框 hover 微反馈 ---- */
input[type=text]:hover, input[type=password]:hover, input[type=number]:hover, input[type=email]:hover, input[type=tel]:hover, select:hover, textarea:hover { border-color: var(--border-2); }
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, input[type=email]:focus, input[type=tel]:focus, select:focus, textarea:focus { border-color: var(--brand); }

/* ---- 二维码弹窗「支付成功」态（D.3.4 充值到账）---- */
.qr-paid { text-align: center; padding: 18px 0 8px; animation: fadeUp .35s ease both; }
.qr-paid__ring { width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; background: linear-gradient(135deg, var(--success), #13c08a); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(22,191,141,.32); }
.qr-paid__ring svg { width: 38px; height: 38px; }
.qr-paid__ring path { stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; fill: none; stroke-dasharray: 48; stroke-dashoffset: 48; animation: draw .5s .12s ease forwards; }
.qr-paid__title { font-size: 18px; font-weight: 700; color: var(--success); margin-top: 14px; }
.qr-paid__sub { margin-top: 6px; font-size: 13px; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ============================================================
   认证+备案 4 tab 弹窗（auth-icp）
   对应 public/provider/auth-icp.js 的 .aipt-* 结构
   ============================================================ */
.aipt { display: flex; flex-direction: column; gap: 12px; }
.aipt__tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.aipt__tab { padding: 9px 16px; color: var(--text-2); font-size: 14px; cursor: pointer; border-bottom: 2px solid transparent; transition: .15s; }
.aipt__tab:hover { color: var(--brand); }
.aipt__tab.is-active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.aipt__panels { min-height: 320px; max-height: 60vh; overflow-y: auto; padding: 4px 2px; }
.aipt__panel { display: none; }
.aipt__panel.is-active { display: block; }
.aipt__mats { margin-top: 14px; }
.aipt__mats h4 { margin: 0 0 8px; font-size: 13.5px; color: var(--text-2); font-weight: 600; }
.aipt__mat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.aipt__mat-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.aipt__mat { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 96px; }
.aipt__mat-t { font-size: 12.5px; color: var(--text); font-weight: 500; }
.aipt__req { color: var(--tone-danger); }
.aipt__up { display: flex; align-items: center; justify-content: center; min-height: 76px; border: 1.5px dashed var(--border-2); border-radius: var(--radius-sm); color: var(--text-2); cursor: pointer; font-size: 13px; transition: .15s; }
.aipt__up:hover { border-color: var(--brand); color: var(--brand); }
.aipt__up input[type=file] { display: none; }
.aipt__prev { position: relative; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: #fff; min-height: 76px; }
.aipt__prev img { display: block; width: 100%; height: auto; max-height: 96px; object-fit: contain; }
.aipt__del { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; line-height: 1; border: none; border-radius: 50%; background: var(--tone-danger); color: #fff; font-size: 13px; cursor: pointer; }
.aipt__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); min-height: 38px; align-items: center; }
.aipt__chip { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; color: var(--text); }
.aipt__pres { display: flex; flex-direction: column; gap: 8px; }
.tbl-mini { width: 100%; border-collapse: collapse; }
.tbl-mini th, .tbl-mini td { padding: 6px 8px; border: 1px solid var(--border); font-size: 12.5px; text-align: left; }
.tbl-mini th { background: var(--surface-2); color: var(--text-2); }
.aipt__tips { padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--text-2); }
.aipt__checks { display: flex; flex-wrap: wrap; gap: 6px; }
.aipt__ck { padding: 3px 9px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); }
.aipt__ck.is-ok { color: var(--success); border-color: var(--success); background: rgba(16,185,129,.08); }
.aipt__ck.is-no { color: var(--tone-danger); border-color: var(--tone-danger); background: rgba(220,38,38,.06); }

/* 微信小程序信息 Tab：服务内容类型/前置审批项/服务内容 描述 */
.aipt__sel { width: 100%; max-width: 360px; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; font-size: 13px; color: var(--text); }
.aipt__sel:focus { outline: none; border-color: var(--brand); }
.aipt__inp { width: 100%; height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; font-size: 13px; color: var(--text); }
.aipt__inp:focus { outline: none; border-color: var(--brand); }
.aipt__char { font-size: 12px; color: var(--text-2); margin-top: 4px; text-align: right; }
.aipt__btn-danger { padding: 4px 12px; background: var(--tone-danger); color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; }
.aipt__btn-danger:hover { opacity: .9; }
.aipt__btn-danger[disabled] { background: #cbd5e1; cursor: not-allowed; }
.aipt__pre-row--default td { color: var(--text-2); }
.aipt__pre-row td { vertical-align: middle; }
.aipt__pre-row .aipt__sel,
.aipt__pre-row .aipt__inp { width: 100%; }
.aipt__pre-row .aipt__up { width: 100%; }

/* 「+ 添加前置审批项」绿色按钮：覆盖 .btn--sm 默认主题色 */
.btn--success { background: var(--success, #10b981); color: #fff; border: 1px solid var(--success, #10b981); }
.btn--success:hover { background: #059669; border-color: #059669; }

/* 省/市/区级联选择器（自实现） */
.aipt__casc { position: relative; }
.aipt__casc-trigger { position: relative; display: flex; align-items: center; }
.aipt__casc-text { width: 100%; height: 36px; padding: 0 32px 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; font-size: 13px; color: var(--text); cursor: pointer; }
.aipt__casc-text:focus { outline: none; border-color: var(--brand); }
.aipt__casc-arrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text-2); pointer-events: none; }
.aipt__casc-pop { position: absolute; z-index: 60; top: 40px; left: 0; display: flex; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(15,23,42,.12); overflow: hidden; min-width: 360px; max-height: 260px; }
/* 关键：hidden 属性 + display:flex 时，HTML 规范 hidden 默认 display:none 会被 display:flex 覆盖；显式恢复 */
.aipt__casc-pop[hidden] { display: none; }
.aipt__casc-col { width: 140px; max-height: 260px; overflow-y: auto; border-right: 1px solid var(--border); }
.aipt__casc-col:last-child { border-right: none; }
.aipt__casc-opt { padding: 7px 10px; font-size: 13px; color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aipt__casc-opt:hover { background: var(--brand-50); }
.aipt__casc-opt.is-active { background: var(--brand-50); color: var(--brand); font-weight: 600; }
.aipt__casc-empty { padding: 7px 10px; font-size: 12px; color: var(--text-2); }

/* 身份证有效期：起/止日期 + 长期 */
.aipt__date { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aipt__date-in { height: 36px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; font-size: 13px; color: var(--text); }
.aipt__date-in:focus { outline: none; border-color: var(--brand); }
.aipt__date-in:disabled { background: var(--surface-2); color: var(--text-2); }
.aipt__date-sep { color: var(--text-2); font-size: 12px; }
.aipt__chk { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-2); }

/* 复用主体负责人 / 法定代表人板块 */
.aipt__reuse { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.aipt__legal { margin-top: 18px; border-top: 1px dashed var(--border); padding-top: 14px; }
.aipt__legal h4 { margin: 0 0 8px; font-size: 13.5px; color: var(--text-2); font-weight: 600; }

/* 添加按钮：不拉伸、宽度自适应（不要太长） */
.aipt__pre-add { align-self: flex-start; margin-top: 2px; }

/* 前置审批项表格（参考系统样式：表头灰底，单元格边框，列宽合理） */
.aipt__pres { display: flex; flex-direction: column; gap: 8px; }
.aipt__pres .tbl-mini { width: 100%; border-collapse: collapse; }
.aipt__pres .tbl-mini th, .aipt__pres .tbl-mini td { border: 1px solid var(--border); padding: 8px 10px; font-size: 13px; vertical-align: middle; }
.aipt__pres .tbl-mini th { background: var(--surface-2); font-weight: 600; color: var(--text); text-align: left; }
.aipt__pres .tbl-mini th:nth-child(3) { text-align: center; }
.aipt__pres .tbl-mini td:nth-child(3) { text-align: center; }
.aipt__pres .tbl-mini td:nth-child(4) { text-align: center; width: 90px; }
.aipt__pre-row--default td { color: var(--text-2); }
.aipt__pre-row .aipt__sel,
.aipt__pre-row .aipt__inp { width: 100%; }
.aipt__pre-row .aipt__up { width: 100%; }
.aipt__pre-row .aipt__inp--no { font-size: 13px; }
.aipt__pre-row .aipt__sel--type { font-size: 13px; }
/* 新增行的虚线 + 上传框（参考系统） */
.aipt__up-dashed { display: flex; align-items: center; justify-content: center; min-height: 80px; width: 110px; margin: 0 auto; border: 1.5px dashed var(--border); border-radius: 6px; color: var(--text-2); cursor: pointer; background: #fafbfc; position: relative; }
.aipt__up-dashed:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.aipt__up-dashed input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.aipt__up-dashed .aipt__up-plus { font-size: 28px; line-height: 1; color: var(--text-2); }
.aipt__up-dashed:hover .aipt__up-plus { color: var(--brand); }
/* 红色删除按钮（参考系统：默认行也可点，点击移除该行） */
.aipt__btn-danger-red { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; border-radius: 4px; padding: 4px 12px; font-size: 12px; cursor: pointer; }
.aipt__btn-danger-red:hover { background: #fee2e2; border-color: #fca5a5; }
.aipt__btn-danger-red:disabled { background: var(--surface-2); color: var(--text-2); border-color: var(--border); cursor: not-allowed; }

/* 服务内容类型：多选下拉（最多 5 项） */
.aipt__msvc { position: relative; }
.aipt__msvc-trigger { min-height: 36px; padding: 4px 32px 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; position: relative; }
.aipt__msvc-trigger:hover { border-color: var(--brand); }
.aipt__msvc-ph { color: var(--text-2); font-size: 13px; }
.aipt__msvc-arrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text-2); pointer-events: none; }
.aipt__msvc-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--brand-50); color: var(--brand); border: 1px solid #bfdbfe; border-radius: 4px; padding: 2px 6px; font-size: 12px; line-height: 1.4; }
.aipt__msvc-x { font-style: normal; cursor: pointer; color: var(--text-2); font-size: 13px; line-height: 1; }
.aipt__msvc-x:hover { color: #dc2626; }
.aipt__msvc-pop { position: absolute; z-index: 60; top: 42px; left: 0; width: 100%; min-width: 360px; max-height: 320px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(15,23,42,.12); overflow: hidden; }
.aipt__msvc-pop[hidden] { display: none; }
.aipt__msvc-search { padding: 8px; border-bottom: 1px solid var(--border); }
.aipt__msvc-search input { width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; }
.aipt__msvc-search input:focus { outline: none; border-color: var(--brand); }
.aipt__msvc-list { flex: 1; overflow-y: auto; max-height: 240px; }
.aipt__msvc-opt { display: flex; align-items: center; gap: 6px; padding: 7px 10px; font-size: 13px; color: var(--text); cursor: pointer; }
.aipt__msvc-opt:hover { background: var(--brand-50); }
.aipt__msvc-opt.is-on { background: var(--brand-50); color: var(--brand); }
.aipt__msvc-cb { width: 16px; height: 16px; border: 1px solid var(--border); border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.aipt__msvc-opt.is-on .aipt__msvc-cb { background: var(--brand); color: #fff; border-color: var(--brand); }
.aipt__msvc-empty { padding: 12px; text-align: center; color: var(--text-2); font-size: 13px; }
.aipt__msvc-hint { padding: 6px 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-2); text-align: right; }
@media (max-width: 720px) {
  .aipt__msvc-pop { min-width: 0; width: 100%; }
}

@media (max-width: 720px) {
  .aipt__mat-grid { grid-template-columns: 1fr 1fr; }
  .aipt__mat-list { grid-template-columns: 1fr; }
  .tbl-mini th, .tbl-mini td { font-size: 11.5px; padding: 4px 6px; }
  .aipt__casc-pop { min-width: 0; width: 100%; }
  .aipt__casc-col { width: 33.333%; }
  .aipt__date-in { flex: 1 1 40%; }
}

/* ============================================================
   备案进度时间线（icp-progress）
   对应 public/provider/icp-progress.js 的 .prog-* 结构
   ============================================================ */
.prog__head { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 14px; }
.prog__list { list-style: none; padding: 0; margin: 0; }
.prog__item { position: relative; padding-left: 28px; padding-bottom: 18px; min-height: 60px; }
.prog__line { position: absolute; left: 9px; top: 0; bottom: 0; width: 2px; }
.prog__line-top { height: 16px; background: var(--border); }
.prog__line-bot { position: absolute; left: 0; right: 0; top: 16px; bottom: 0; background: var(--border); }
.prog__line-top.is-first { background: transparent; }
.prog__line-bot.is-last { background: transparent; }
.prog__dot { position: absolute; left: 4px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--border); box-shadow: 0 0 0 2px var(--surface); }
.prog__dot.is-ok { background: var(--success); }
.prog__dot.is-fail { background: var(--tone-danger); }
.prog__dot.is-pending { background: var(--warn, #f59e0b); }
.prog__dot.is-neutral { background: var(--brand); }
.prog__box { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; }
.prog__name { font-size: 14px; font-weight: 600; color: var(--text); }
.prog__sub { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.prog__meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--text-2); }
.prog__appid b { color: var(--text); margin-left: 4px; }
.prog__serial { font-family: ui-monospace, Menlo, Consolas, monospace; }
.prog__time { font-size: 12px; color: var(--text-2); margin-top: 4px; }
.prog__detail { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.prog__drow { display: flex; gap: 12px; font-size: 12.5px; padding: 3px 0; }
.prog__dk { color: var(--text-2); min-width: 76px; }
.prog__dv { color: var(--text); flex: 1; word-break: break-all; }
.prog__dv a { color: var(--brand); }

/* ============================================================
   类目管理弹窗（cat-mgr / cat-cascader）— v2.5.0i
   对应 public/provider/category.js 的 .cat-* 结构
   对齐参考系统：双 tab + 3 级级联 + 敏感角标 + 待添加列表 + 批量提交
   ============================================================ */
.cat-mgr { display: flex; flex-direction: column; min-height: 460px; }
.cat-mgr__tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--border); padding: 0 4px; margin-bottom: 16px; }
.cat-mgr__tab { padding: 10px 0; color: var(--text-2); font-size: 14px; cursor: pointer; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.cat-mgr__tab:hover { color: var(--text); }
.cat-mgr__tab.is-active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 500; }
.cat-mgr__pane { flex: 1; min-height: 0; }
.cat-mgr__foot { display: flex; justify-content: flex-end; gap: 10px; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--border); }
.cat-exist { min-height: 200px; }

/* ===== 3 级级联 ===== */
.cat-cascader { position: relative; }
.cat-cascader__input { cursor: pointer; padding-right: 30px; }
.cat-cascader__arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-2); font-size: 12px; pointer-events: none; }
.cat-cascader__panel { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); z-index: 20; max-height: 320px; display: flex; min-width: 360px; max-width: 720px; }
.cat-cascader__col { flex: 1; min-width: 140px; max-height: 320px; overflow-y: auto; padding: 6px 0; }
.cat-cascader__col + .cat-cascader__col { border-left: 1px solid var(--border); }
.cat-cascader__opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; cursor: pointer; font-size: 13px; color: var(--text); transition: background .12s; }
.cat-cascader__opt:hover { background: var(--surface-2); }
.cat-cascader__opt.is-active { background: var(--brand-50); color: var(--brand); font-weight: 500; }
.cat-cascader__sens { background: var(--tone-danger-bg); color: var(--tone-danger); font-size: 11px; padding: 1px 6px; border-radius: 8px; flex-shrink: 0; }
.cat-cascader__empty { padding: 16px; text-align: center; color: var(--text-2); font-size: 12px; }

/* ===== 待添加列表 ===== */
.cat-add__row { margin-bottom: 14px; }
.cat-add__row .field { flex-direction: column; gap: 4px; }
.cat-add__row .field label { font-size: 13px; color: var(--text); margin-bottom: 4px; }
.cat-add__list { margin-top: 18px; min-height: 100px; }
.cat-add__head { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 10px; padding-left: 4px; }
.cat-add__empty { padding: 60px 20px; text-align: center; color: var(--text-2); font-size: 13px; background: var(--surface-2); border-radius: var(--radius-sm); }

/* ============================================================
   基础信息页面（basic-info）— v2.5.0i
   对应 public/provider/basic-info.js 的 .bi-* 结构
   风格对齐：卡片化 + 阴影 + 字段对齐
   ============================================================ */
.bi-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0; margin-bottom: 16px; }
.bi-card__head { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.bi-card__head h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); }
.bi-card__head .bi-card__sub { color: var(--text-2); font-size: 12px; font-weight: 400; }
.bi-card__body { padding: 18px 20px; }
.bi-field-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.bi-field { display: grid; grid-template-columns: 110px 1fr auto; gap: 16px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.bi-field:last-child { border-bottom: 0; }
.bi-field__k { color: var(--text-2); font-size: 13px; }
.bi-field__v { color: var(--text); font-size: 14px; }
.bi-field__v img { display: block; }
.bi-field__v--muted { color: var(--text-2); }
.bi-field__act { display: flex; gap: 6px; }
.bi-hint { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--text-2); font-size: 12.5px; }
.bi-image-uploader { display: flex; gap: 12px; align-items: center; }
.bi-image-uploader .bi-thumb { width: 80px; height: 80px; border-radius: 8px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border-2); display: flex; align-items: center; justify-content: center; }
.bi-image-uploader .bi-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bi-image-uploader .bi-upload-btn { padding: 8px 16px; background: var(--surface-2); border: 1px dashed var(--border-2); border-radius: var(--radius-sm); color: var(--text-2); font-size: 13px; cursor: pointer; transition: border-color .15s, color .15s; }
.bi-image-uploader .bi-upload-btn:hover { border-color: var(--brand); color: var(--brand); }

/* 多文件上传网格（资质/营业执照） */
.bi-uploader-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.bi-uploader-grid .bi-thumb { width: 100%; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border-2); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; transition: border-color .15s; }
.bi-uploader-grid .bi-thumb:hover { border-color: var(--brand); }
.bi-uploader-grid .bi-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bi-uploader-grid .bi-thumb .bi-thumb__x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(15,23,42,.6); color: #fff; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bi-uploader-grid .bi-thumb .bi-thumb__plus { font-size: 32px; color: var(--text-2); font-weight: 200; }

/* ============================================================
   类目敏感资料上传（cat-quali / cat-pend）— v2.5.0j
   对应 public/provider/category.js 的 .cat-quali / .cat-pend__* 结构
   对齐参考系统：每个敏感二级类目下方上传指定资料（类目资质 + 其他资质）
   ============================================================ */
.cat-pend__name { color: var(--text); font-size: 13.5px; font-weight: 500; }
.cat-pend__hint { margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.cat-pend__tip { color: var(--text-2); font-size: 12px; }
.cat-pend__row--miss > td { background: rgba(239, 68, 68, 0.05); }
.cat-pend__row--miss .cat-quali { border-color: var(--tone-danger); }

.cat-quali { display: flex; flex-direction: column; gap: 6px; padding: 6px; background: var(--surface-2); border-radius: var(--radius-sm); border: 1px solid transparent; min-width: 220px; max-width: 320px; }
.cat-quali__upload { padding: 6px 12px; background: var(--surface); border: 1px dashed var(--border-2); border-radius: var(--radius-sm); color: var(--brand); font-size: 12.5px; cursor: pointer; transition: border-color .15s, background .15s; text-align: center; }
.cat-quali__upload:hover { border-color: var(--brand); background: var(--brand-50); }
.cat-quali__upload:disabled { color: var(--text-2); cursor: not-allowed; opacity: 0.6; }
.cat-quali__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cat-quali__item { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12px; }
.cat-quali__name { color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-quali__name:hover { color: var(--brand); }
.cat-quali__del { width: 18px; height: 18px; border-radius: 50%; background: transparent; color: var(--text-2); font-size: 14px; line-height: 1; cursor: pointer; border: 0; flex-shrink: 0; padding: 0; }
.cat-quali__del:hover { background: var(--tone-danger-bg); color: var(--tone-danger); }

/* 待添加列表表格更紧凑（敏感类目行可能很宽） */
#cat-add-tbl th, #cat-add-tbl td { vertical-align: top; padding: 10px 12px; }
#cat-add-tbl th { background: var(--surface-2); }

/* ============================================================
   v2.5.0k：两级类目 + 左右两列面板（参考系统 UX）
   对应 public/provider/category.js 的 .cat-pane 结构
   ============================================================ */
.cat-pane { position: relative; }
.cat-pane__input { cursor: pointer; padding-right: 30px; }
.cat-pane__arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-2); font-size: 12px; pointer-events: none; }
.cat-pane__panel { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); z-index: 20; max-height: 360px; display: flex; min-width: 460px; }
.cat-pane__col { flex: 1; min-width: 220px; max-height: 360px; overflow-y: auto; padding: 6px 0; }
.cat-pane__col + .cat-pane__col { border-left: 1px solid var(--border); }
.cat-pane__opt { display: flex; align-items: center; gap: 8px; padding: 8px 14px; cursor: pointer; font-size: 13px; color: var(--text); transition: background .12s; line-height: 1.4; }
.cat-pane__opt:hover { background: var(--surface-2); }
.cat-pane__opt.is-active { background: var(--brand-50); color: var(--brand); font-weight: 500; }
.cat-pane__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-pane__chev { color: var(--text-2); font-size: 14px; flex-shrink: 0; }
.cat-pane__sens { background: var(--tone-danger-bg); color: var(--tone-danger); font-size: 11px; padding: 1px 6px; border-radius: 8px; flex-shrink: 0; line-height: 1.4; }
.cat-pane__qutip { color: var(--text-2); font-size: 11px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }
.cat-pane__empty { padding: 24px 16px; text-align: center; color: var(--text-2); font-size: 12px; }

/* v2.5.0k 资质槽缺失/错误状态（precheck 未上传时） */
.cat-quali--miss { border-color: var(--tone-danger); background: rgba(239, 68, 68, 0.04); }
.cat-quali__err { color: var(--tone-danger); font-size: 11.5px; line-height: 1.4; }

/* 资质名通用样式（类目列表 / 已存在类目列显示） */
.text-tip { color: var(--text-2); font-size: 12.5px; }

/* ============================================================
   v2.5.0zn：通用详情键值网格 .detail-grid 补齐
   —— 历史遗留：provider/app-detail.js、admin/provider-detail.js、
      admin/log.js、provider/profile.js、provider/wxpay-config.js 等
      均在用 .detail-grid/.detail-item，但此前 CSS 中完全没有定义，
      导致这些详情页退化为裸 div 竖排。此处统一补齐（纯新增）。
   ========================================================= */
.detail-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.detail-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; background: var(--surface); }
.detail-item__k { flex: 0 0 104px; color: var(--text-2); font-size: 13px; line-height: 1.6; }
.detail-item__v { flex: 1; min-width: 0; word-break: break-all; font-size: 14px; line-height: 1.6; }
.detail-item__v .tag { vertical-align: middle; }
@media (max-width: 640px) {
  .detail-grid { grid-template-columns: 1fr; }
  .detail-item { flex-direction: column; gap: 4px; }
  .detail-item__k { flex: none; }
}

/* ============================================================
   v2.5.0zn：小程序详情页（provider/app-detail.js）专属组件
   ========================================================= */

/* hero 头像支持图片（微信小程序头像） */
.hero__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; display: block; }
.hero__sub { position: relative; z-index: 1; margin-top: 6px; font-size: 13px; color: #9fb3d1; }
.hero__sub b { color: #dbe7f7; font-weight: 500; }

/* 复制小按钮（hero / 键值区通用） */
.btn-copy {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 6px;
  padding: 1px 8px; font-size: 11.5px; line-height: 1.7; cursor: pointer;
  color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px;
  transition: color .15s, border-color .15s, background .15s;
  vertical-align: middle; font-family: inherit;
}
.btn-copy:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-50); }
.hero .btn-copy { color: #b8c8de; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); }
.hero .btn-copy:hover { color: #fff; background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .38); }

/* 流程节点条：注册 → 授权 → 类目 → 认证 → 备案 */
.flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.flow__node {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px; font-size: 13px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
}
.flow__idx {
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; background: rgba(15, 23, 42, .06); color: var(--text-2);
}
.flow__sep { color: var(--border-2); font-size: 12px; user-select: none; }
.flow__node.is-done { border-color: rgba(22, 163, 74, .32); background: var(--tone-success-bg); color: var(--tone-success); }
.flow__node.is-done .flow__idx { background: var(--tone-success); color: #fff; }
.flow__node.is-running { border-color: rgba(217, 119, 6, .32); background: var(--tone-warn-bg); color: var(--tone-warn); }
.flow__node.is-running .flow__idx { background: var(--tone-warn); color: #fff; }
.flow__node.is-fail { border-color: rgba(220, 38, 38, .3); background: var(--tone-danger-bg); color: var(--tone-danger); }
.flow__node.is-fail .flow__idx { background: var(--tone-danger); color: #fff; }

/* 状态总览九宫格（比 .kv 更聚焦状态） */
.status-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.status-cell { background: var(--surface); padding: 13px 16px; display: flex; flex-direction: column; gap: 7px; }
.status-cell__k { font-size: 12px; color: var(--text-3); letter-spacing: .3px; }
.status-cell__v { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.status-cell__x { font-size: 12px; color: var(--text-3); }

/* 权限集标签墙 */
.perm-wall { display: flex; flex-wrap: wrap; gap: 6px; }
.perm-chip {
  font-size: 12px; padding: 2px 9px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
}

/* 二维码预览 */
.qr-mini { width: 96px; height: 96px; border-radius: var(--radius-sm); border: 1px solid var(--border); padding: 4px; background: #fff; }

/* 骨架屏（详情页首屏加载） */
.sk { background: linear-gradient(90deg, #eef1f6 25%, #f7f9fc 37%, #eef1f6 63%); background-size: 400% 100%; animation: sk-move 1.3s ease infinite; border-radius: var(--radius-sm); }
@keyframes sk-move { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.sk-hero { height: 100px; border-radius: var(--radius-xl); margin-bottom: 16px; }
.sk-panel { height: 220px; border-radius: var(--radius-lg); }
@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; }
  .hero, .page-head, .reveal { animation: none; }
}
