/* 两页共用：设计变量、顶栏、页头、卡片、按钮、标签、表单 */
:root {
  --bg:#f5f6f8; --card:#fff; --line:#e7e9ee; --line-2:#f0f1f4;
  --text:#111827; --text-2:#374151; --muted:#6b7280; --faint:#9ca3af;
  --accent:#4f46e5; --accent-soft:#eef2ff; --accent-ink:#3730a3;
  --ok:#059669; --ok-soft:#ecfdf5; --warn:#b45309; --warn-soft:#fffbeb; --danger:#dc2626; --danger-soft:#fef2f2;
  --radius:12px; --shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.03);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:14px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); }

/* 顶栏 */
.topbar { position:sticky; top:0; z-index:10; background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--line); }
.topbar .in { max-width:1120px; margin:0 auto; padding:0 24px; height:56px; display:flex; align-items:center; gap:28px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:650; font-size:15px; color:var(--text); text-decoration:none; letter-spacing:.2px; }
.brand .mark { width:26px; height:26px; border-radius:7px; background:linear-gradient(135deg,#6366f1,#4338ca); color:#fff; display:grid; place-items:center; font-size:13px; font-weight:700; }
.tabs { display:flex; gap:4px; height:100%; }
.tabs a { display:flex; align-items:center; padding:0 12px; color:var(--muted); text-decoration:none; font-weight:500; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs a:hover { color:var(--text); }
.tabs a.on { color:var(--text); border-bottom-color:var(--accent); font-weight:600; }

/* 页面容器与页头 */
.wrap { max-width:1120px; margin:0 auto; padding:28px 24px 64px; }
.page-head { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.page-head h1 { margin:0; font-size:22px; font-weight:650; letter-spacing:.2px; }
.page-head .sub { color:var(--muted); margin-top:4px; }
.page-head .actions { margin-left:auto; display:flex; gap:8px; }

/* 卡片 */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px; margin-bottom:16px; }
.card-title { font-size:13px; font-weight:600; color:var(--muted); margin:0 0 12px; letter-spacing:.3px; }

/* 按钮 */
button, .btn { font:inherit; font-size:13px; font-weight:500; height:34px; padding:0 14px; border:1px solid var(--line); background:#fff; color:var(--text-2); border-radius:8px; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; transition:background .15s, border-color .15s, color .15s; }
button:hover, .btn:hover { border-color:#d1d5db; background:#f9fafb; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.primary:hover { background:#4338ca; border-color:#4338ca; }
button:disabled { opacity:.55; cursor:default; }
button.link { height:auto; border:none; background:none; padding:2px 6px; color:var(--accent); }
button.link:hover { background:var(--accent-soft); }
button.link.danger { color:var(--danger); } button.link.danger:hover { background:var(--danger-soft); }

/* 表单 */
textarea, input, select { width:100%; padding:8px 11px; border:1px solid var(--line); border-radius:8px; font:inherit; color:var(--text); background:#fff; transition:border-color .15s, box-shadow .15s; }
input, select { height:34px; padding-top:0; padding-bottom:0; }
textarea:focus, input:focus, select:focus { outline:none; border-color:#a5b4fc; box-shadow:0 0 0 3px rgba(99,102,241,.15); }

/* 筛选胶囊 */
.chip { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--text-2); cursor:pointer; user-select:none; font-size:13px; transition:all .15s; }
.chip:hover { border-color:#c7d2fe; }
.chip b { font-weight:600; color:var(--faint); font-size:12px; }
.chip.on { background:var(--text); border-color:var(--text); color:#fff; }
.chip.on b { color:rgba(255,255,255,.7); }

/* 标签 */
.tag { display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:6px; font-size:12px; font-weight:500; background:var(--accent-soft); color:var(--accent-ink); white-space:nowrap; }
.tag.ok { background:var(--ok-soft); color:var(--ok); }
.tag.warn { background:var(--warn-soft); color:var(--warn); }
.tag.danger { background:var(--danger-soft); color:var(--danger); }
.tag.gray { background:#f3f4f6; color:var(--muted); }

.sm { color:var(--muted); font-size:12px; }
.empty { color:var(--muted); text-align:center; padding:56px 0; }
@keyframes spin { to { transform:rotate(360deg); } }
.spin { display:inline-block; width:11px; height:11px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .8s linear infinite; opacity:.8; }

@media (max-width:720px) {
  .topbar .in { padding:0 16px; gap:16px; }
  .brand span:last-child { display:none; }
  .wrap { padding:20px 16px 48px; }
}