/* ============================================================
   组件库 Components · 只引用 tokens.css 里的令牌，不写死数值
   ------------------------------------------------------------
   依赖：tokens.css（必须先加载）
   本层负责「统一样式」，不改任何结构、不改任何逻辑。
   每个组件都按 默认 / 悬停 / 焦点 / 禁用 状态给出规范。
   ============================================================ */

/* ---------- 侧栏：深色 → 亮色（选中态改成浅蓝药丸） ---------- */
.side{
  background:var(--panel);
  border-right:1px solid var(--border);
  border-radius:0;
  box-shadow:var(--sh-1);
  color:var(--text);
  padding:20px 14px;
  gap:3px;
}
.side-logo{color:var(--text);font-weight:var(--fw-black);letter-spacing:-.01em}
.nav{
  color:var(--muted); font-weight:var(--fw-md); font-size:var(--fs-md);
  border-radius:var(--a-r-sm); padding:10px 12px; transition:background .16s,color .16s;
}
.nav:hover{background:var(--a-soft);color:var(--text);transform:none}
.nav.active{
  background:var(--pri-soft); color:var(--c-brand-strong); font-weight:var(--fw-bold);
  box-shadow:none; border-color:transparent; transform:none;
}
.side-foot{border-top:1px solid var(--border);padding-top:16px}
.side-foot #adminIdentity,.identity{color:var(--muted)}

/* ---------- 顶栏 ---------- */
.topbar{
  background:linear-gradient(180deg,var(--c-surface),var(--c-topbar-2));
  border-bottom:1px solid var(--border); padding:15px 22px;
}
#pageTitle{font-weight:var(--fw-black);letter-spacing:-.015em}
.search-box{
  background:var(--a-soft); border:1px solid var(--border); border-radius:var(--a-r-sm);
}
.search-box input{background:transparent;border:0;color:var(--text)}
.search-box input::placeholder{color:var(--a-tx3)}

/* ---------- 面板 / 卡片 / KPI ---------- */
.panel,.card,.stat-card{
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--a-r); box-shadow:var(--a-shadow);
}
.panel-head{
  background:linear-gradient(180deg,var(--c-surface),var(--c-topbar-2));
  border-bottom:1px solid var(--border); font-weight:var(--fw-bold); padding:14px 18px;
}
.cards{gap:14px}
.stat-card{padding:14px 16px}
.stat-num{font-size:23px;font-weight:var(--fw-black);letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
.stat-label{font-size:11.5px;font-weight:var(--fw-bold);letter-spacing:.02em;color:var(--a-tx3)}

/* ---------- 表格（弱化表头 + 加厚行高） ---------- */
.table{font-size:var(--fs-base);border-collapse:separate;border-spacing:0}
.table th{
  background:var(--a-head); color:var(--a-tx3); font-size:var(--fs-sm); font-weight:var(--fw-bold);
  letter-spacing:.02em; padding:11px 14px; border-bottom:1px solid var(--border);
}
.table td{padding:14px;border-bottom:1px solid var(--border-soft);color:var(--text);vertical-align:middle}
.table tbody tr{transition:background .15s ease}
.table tbody tr:hover{background:var(--a-row-hover)}
.table tbody tr:last-child td{border-bottom:0}
.merchant-row td{background:transparent}
.merchant-row:hover td{background:var(--a-row-hover)}
.emp-row td{background:var(--c-row-alt)}
.emp-row:hover td{background:var(--c-row-hover-2)}
.emp-orphan td{background:var(--c-warn-fill)}
.table-wrap,.table-scroll{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--a-r);
}
.table-scroll::-webkit-scrollbar-thumb{background:var(--c-scrollbar);border-radius:var(--r-pill)}
.table-scroll::-webkit-scrollbar{width:8px;height:8px}

/* ---------- 按钮（次要操作降噪） ---------- */
.btn{
  border:1px solid var(--border); background:var(--panel); color:var(--text);
  border-radius:var(--a-r-sm); padding:9px 14px; font-size:var(--fs-base); font-weight:var(--fw-md);
  box-shadow:var(--a-shadow-sm); transition:background .16s,border-color .16s;
}
.btn:hover{background:var(--a-soft);border-color:var(--c-border-hover);transform:none;box-shadow:var(--a-shadow-sm)}
.btn.primary{background:var(--pri);border-color:transparent;color:var(--c-surface);box-shadow:0 6px 16px var(--c-brand-ring)}
.btn.primary:hover{background:var(--pri2);filter:none}
.btn.ghost{background:transparent;border-color:var(--border);color:var(--muted);box-shadow:none}
.btn.ghost:hover{background:var(--pri-soft);border-color:var(--c-brand-line-mid);color:var(--c-brand-strong)}
.btn.danger{background:var(--c-danger-bg);border-color:var(--c-danger-line-mid);color:var(--danger);box-shadow:none}
.btn.danger:hover{background:var(--c-danger-fill);border-color:var(--c-danger-line-strong)}
.mini-btn{background:var(--a-soft);border:1px solid var(--border);color:var(--muted);border-radius:8px}
.mini-btn:hover{background:var(--c-mini-hover);color:var(--text)}
.row-actions .btn{font-size:var(--fs-sm);padding:6px 10px}

/* ---------- 徽标 / 标签（统一胶囊） ---------- */
.badge,.tag,.pill,.edit-tag,.status{
  border-radius:var(--r-pill); padding:4px 9px; font-size:var(--fs-xs); font-weight:var(--fw-bold); border:1px solid transparent;
}
.badge{background:var(--pri-soft);color:var(--c-brand-strong);border-color:var(--c-brand-ring)}
.tag{background:var(--pri-soft);color:var(--c-brand-strong);border-color:var(--c-brand-ring)}
.tag.expired{background:var(--c-danger-soft);color:var(--danger);border-color:var(--c-danger-line)}
.tag.expiring{background:var(--c-warn-bg);color:var(--warn);border-color:var(--c-warn-line)}
.status.ok,.pill.ok,.badge.ok{background:var(--c-ok-bg);color:var(--c-ok-3);border-color:var(--c-ok-line)}
.status.warn,.pill.warn,.badge.warn{background:var(--c-warn-bg);color:var(--c-warn);border-color:var(--c-warn-line)}
.status.danger,.pill.danger,.badge.danger{background:var(--c-danger-soft);color:var(--c-danger-2);border-color:var(--c-danger-line)}
.status.expired{background:var(--c-danger-soft);color:var(--danger);border-color:var(--c-danger-line)}
.edit-tag{background:var(--c-fill);color:var(--muted);border-color:var(--border)}
.edit-tag.role{background:var(--c-brand-soft);color:var(--c-brand-strong);border-color:var(--c-brand-line-soft)}
.edit-tag.platform{background:var(--c-warn-bg);color:var(--c-warn);border-color:var(--c-warn-line)}
.edit-tag.byok{background:var(--c-ok-bg);color:var(--c-ok-3);border-color:var(--c-ok-line)}
.edit-tag.neutral{background:var(--c-fill);color:var(--muted);border-color:var(--border)}
.pos{color:var(--c-ok-2)}.neg{color:var(--c-danger-2)}

/* ---------- 表单 ---------- */
.field{background:var(--c-field);border:1px solid var(--border-soft);border-radius:var(--a-r-sm);padding:13px}
.field:focus-within{background:var(--c-surface);border-color:var(--c-brand-line);box-shadow:0 0 0 3px var(--glow-brand)}
.field-label{font-weight:var(--fw-bold);color:var(--c-text-strong)}
.field-hint{color:var(--a-tx3)}
.static-value{background:var(--a-soft);border:1px solid var(--border-soft);border-radius:var(--a-r-sm);color:var(--text)}
input,select,textarea,.input,.inline-input{
  background:var(--c-surface); border:1px solid var(--c-border-strong); border-radius:var(--a-r-sm); color:var(--text);
}
input:focus,select:focus,textarea:focus,.input:focus{border-color:var(--pri);box-shadow:0 0 0 3px var(--c-brand-soft);outline:0}
input::placeholder,textarea::placeholder{color:var(--c-text-4)}
.form-section{background:var(--c-surface);border:1px solid var(--border);border-radius:var(--a-r);box-shadow:var(--a-shadow)}
.section-head{background:linear-gradient(180deg,var(--c-surface),var(--c-topbar-2));border-bottom:1px solid var(--border);font-weight:var(--fw-black)}
.section-extra{background:var(--c-fill);border:1px solid var(--border);color:var(--muted);border-radius:var(--r-pill)}

/* ---------- 模块 / 套餐 / 授权卡 ---------- */
.module-card,.package-card,.api-mode-card,.checkbox-item{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--a-r-sm); color:var(--text);
  box-shadow:var(--a-shadow-sm);
}
.package-card:hover{background:var(--a-soft)}
.module-card.active,.package-card.active,.api-mode-card.active{
  border-color:var(--c-brand-line-strong); background:var(--pri-soft);
  box-shadow:0 0 0 3px var(--c-brand-halo);
}
.package-icon{background:var(--a-soft);border:1px solid var(--border);color:var(--text)}
.api-mode-card.active .package-icon{background:var(--c-brand-ghost);border-color:var(--c-brand-ghost-line)}
.package-short{background:var(--c-fill);border:1px solid var(--border);color:var(--muted)}
.auth-layout-side{background:var(--a-soft);border:1px solid var(--border);border-radius:var(--a-r)}
.edit-user-banner{background:linear-gradient(135deg,var(--c-brand-soft),var(--c-cyan-soft));border:1px solid var(--border);border-radius:var(--a-r)}

/* ---------- 弹窗 ---------- */
.modal{background:var(--c-overlay)}
.modal-card{border-radius:18px;border:1px solid var(--border);box-shadow:var(--a-shadow-pop)}
.modal-head{font-weight:var(--fw-black);border-bottom:1px solid var(--border);padding:15px 20px}
.modal-head .close,.close{background:var(--c-fill);color:var(--muted);border-radius:var(--r-xs)}
.modal-head .close:hover,.close:hover{background:var(--c-close-hover);color:var(--text)}
.modal-actions{background:linear-gradient(to top,var(--c-surface) 78%,var(--c-white-a00));border-top:1px solid var(--border)}
.confirm-icon{background:var(--c-warn-bg);border:1px solid var(--c-warn-line-soft)}
.confirm-danger{background:var(--c-danger-bg);border-color:var(--c-danger-line-mid);color:var(--danger)}

/* ---------- 空态 / 提示 ---------- */
.empty-state,.empty{color:var(--muted)}
.toast{border-radius:var(--r-md);box-shadow:var(--sh-toast)}

/* ---------- 样式预览（沿用功能，只换皮） ---------- */
.bs-preview-box{background:var(--a-soft);border:1px solid var(--border);border-radius:var(--a-r-sm)}
.bs-preview-title{color:var(--muted)}
.bs-thumb,.bs-ksthumb{border:1px solid var(--border)}
.link{color:var(--pri);font-weight:var(--fw-bold);text-decoration:none}
.link:hover{background:var(--c-brand-hover);color:var(--c-brand-strong);text-decoration:underline}
.link.danger{color:var(--danger)}
.link.danger:hover{background:var(--c-danger-bg);color:var(--c-danger-strong)}