/* 设计令牌 + 通用组件（btn / input / badge / card / table） */
:root {
  --brand: #0b6efd; --brand-600: #0a5fd9; --brand-soft: #e8f0ff;
  --ink-1: #0b1220; --ink-2: #364153; --ink-3: #6b7280; --ink-4: #9aa3b2; --ink-5: #c2c8d1;
  --bg-2: #f7f8fa; --bg-3: #eef0f3;
  --line: #e6e8ec; --line-soft: #eef0f3; --line-strong: #cfd3da;
  --success: #10a37f; --success-soft: #e6f7f1;
  --warn: #d97706; --warn-soft: #fef3e2;
  --danger: #e5484d; --danger-soft: #fde8e9;
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px;
  --shadow-2: 0 4px 12px rgba(16,24,40,.06);
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--ink-1); background: #fff; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
.mono { font-family: var(--font-mono); }

/* 按钮 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: var(--r-md); font-size: 14px; font-weight: 500; border: 1px solid transparent; white-space: nowrap; transition: background .15s, border-color .15s; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-600); }
.btn-secondary { background: #fff; border-color: var(--line); color: var(--ink-1); }
.btn-secondary:hover { border-color: var(--line-strong); background: var(--bg-2); }
.btn-ghost { color: var(--ink-2); }
.btn-ghost:hover { background: var(--bg-2); }
.btn-danger { background: #fff; border-color: var(--danger-soft); color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-warn { background: var(--warn); color: #fff; }
.btn-warn:hover { background: #b26106; }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-lg { height: 44px; padding: 0 20px; font-size: 15px; }
.btn-full { width: 100%; height: 42px; font-size: 14px; font-weight: 500; }

/* 输入 */
.input { display: block; width: 100%; height: 40px; padding: 0 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); font-size: 14px; color: var(--ink-1); transition: border-color .15s, box-shadow .15s; }
.input::placeholder { color: var(--ink-5); }
.input:hover { border-color: var(--line-strong); }
.input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(11,110,253,.12); }

/* 徽章 */
.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; font-size: 11px; font-weight: 500; border-radius: 999px; background: var(--bg-3); color: var(--ink-2); }
.badge-brand { background: var(--brand-soft); color: var(--brand); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }

/* 卡片与表格 */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; padding: 10px 12px; font-weight: 500; color: var(--ink-3); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.table td { padding: 12px; border-bottom: 1px solid var(--line-soft); color: var(--ink-1); }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: var(--bg-2); }