* { margin:0; padding:0; box-sizing:border-box; }

:root {
  --primary:#4f46e5; --primary-hover:#4338ca; --primary-soft:#eef2ff;
  --danger:#ef4444; --danger-soft:#fef2f2;
  --success:#10b981; --success-soft:#ecfdf5;
  --warning:#f59e0b; --warning-soft:#fffbeb;
  --text:#1e293b; --text-2:#64748b; --text-3:#94a3b8;
  --border:#e2e8f0; --bg:#f5f7fa; --card:#fff;
  --sidebar:#1e293b; --sidebar-hover:#334155;
  --radius:12px; --shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-lg:0 10px 25px rgba(0,0,0,.08);
}

body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--text); font-size:14px; line-height:1.6;
}

/* ============ 登录页 ============ */
.login-wrap {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  padding:20px;
}
.login-card {
  width:100%; max-width:400px; background:var(--card);
  border-radius:16px; padding:40px; box-shadow:var(--shadow-lg);
}
.login-logo { text-align:center; margin-bottom:28px; }
.login-logo h1 { font-size:24px; font-weight:700; color:var(--text); letter-spacing:-.5px; }
.login-logo p { color:var(--text-3); font-size:13px; margin-top:6px; }

/* ============ 布局 ============ */
.layout { display:flex; min-height:100vh; }
.sidebar {
  width:220px; background:var(--sidebar); color:#cbd5e1;
  display:flex; flex-direction:column; position:fixed; height:100vh; z-index:100;
}
.sidebar-brand {
  padding:20px; font-size:17px; font-weight:700; color:#fff;
  border-bottom:1px solid #334155; display:flex; align-items:center; gap:10px;
}
.sidebar-brand .dot {
  width:8px; height:8px; background:var(--primary); border-radius:50%;
}
.sidebar-nav { flex:1; overflow-y:auto; padding:12px 0; }
.nav-group-title {
  padding:10px 20px 6px; font-size:11px; color:#64748b;
  text-transform:uppercase; letter-spacing:.5px; font-weight:600;
}
.nav-item {
  padding:10px 20px; cursor:pointer; display:flex; align-items:center; gap:10px;
  font-size:14px; transition:all .15s; border-left:3px solid transparent;
}
.nav-item:hover { background:var(--sidebar-hover); color:#fff; }
.nav-item.active {
  background:var(--primary); color:#fff; border-left-color:#818cf8; font-weight:500;
}
.nav-item .icon { width:18px; text-align:center; font-size:15px; }

.main { flex:1; margin-left:220px; display:flex; flex-direction:column; }
.topbar {
  height:60px; background:var(--card); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; position:sticky; top:0; z-index:50;
}
.topbar h2 { font-size:17px; font-weight:600; }
.user-box { display:flex; align-items:center; gap:12px; }
.user-box .name { font-size:13px; color:var(--text-2); }
.user-box .role {
  font-size:11px; background:var(--primary-soft); color:var(--primary);
  padding:2px 8px; border-radius:10px; font-weight:500;
}
.content { padding:24px; flex:1; }

/* ============ 组件 ============ */
.card {
  background:var(--card); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px; margin-bottom:20px;
}
.card-title {
  font-size:15px; font-weight:600; margin-bottom:16px;
  display:flex; align-items:center; justify-content:space-between;
}

.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:20px; }
.stat {
  background:var(--card); border-radius:var(--radius); padding:20px;
  box-shadow:var(--shadow); border-left:4px solid var(--primary);
}
.stat.success { border-left-color:var(--success); }
.stat.warning { border-left-color:var(--warning); }
.stat.danger  { border-left-color:var(--danger); }
.stat .label { font-size:12px; color:var(--text-2); margin-bottom:6px; }
.stat .value { font-size:26px; font-weight:700; letter-spacing:-1px; }
.stat .sub { font-size:11px; color:var(--text-3); margin-top:4px; }

table { width:100%; border-collapse:collapse; }
th {
  text-align:left; padding:11px 12px; font-size:12px; font-weight:600;
  color:var(--text-2); border-bottom:1px solid var(--border); background:#fafbfc;
}
td { padding:11px 12px; border-bottom:1px solid #f1f5f9; font-size:13px; }
tbody tr:hover { background:#fafbfc; }
tbody tr:last-child td { border-bottom:none; }

.btn {
  padding:7px 16px; border-radius:8px; border:1px solid var(--border);
  background:var(--card); color:var(--text); cursor:pointer;
  font-size:13px; transition:all .15s; white-space:nowrap;
}
.btn:hover { border-color:var(--primary); color:var(--primary); }
.btn-primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-hover); color:#fff; }
.btn-danger { color:var(--danger); border-color:#fecaca; }
.btn-danger:hover { background:var(--danger-soft); border-color:var(--danger); }
.btn-sm { padding:4px 10px; font-size:12px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

.form-group { margin-bottom:16px; }
.form-group label {
  display:block; margin-bottom:6px; font-size:13px; font-weight:500; color:var(--text);
}
.form-group .hint { font-size:11px; color:var(--text-3); margin-top:4px; }
input[type=text], input[type=password], input[type=number], input[type=date], select, textarea {
  width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:8px;
  font-size:13px; font-family:inherit; transition:border-color .15s; background:var(--card);
}
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft);
}
textarea { resize:vertical; min-height:70px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.tag {
  display:inline-block; padding:2px 9px; border-radius:10px;
  font-size:11px; font-weight:500;
}
.tag-success { background:var(--success-soft); color:var(--success); }
.tag-danger  { background:var(--danger-soft);  color:var(--danger); }
.tag-warning { background:var(--warning-soft); color:var(--warning); }
.tag-default { background:#f1f5f9; color:var(--text-2); }

.toolbar { display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.toolbar input, .toolbar select { width:auto; min-width:150px; }
.toolbar .spacer { flex:1; }

/* Tabs */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:20px; flex-wrap:wrap; }
.tab {
  padding:9px 18px; cursor:pointer; font-size:13px; color:var(--text-2);
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .15s;
}
.tab:hover { color:var(--primary); }
.tab.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }

/* Modal */
.modal-mask {
  position:fixed; inset:0; background:rgba(15,23,42,.5);
  display:flex; align-items:center; justify-content:center; z-index:200; padding:20px;
}
.modal {
  background:var(--card); border-radius:var(--radius); width:100%; max-width:600px;
  max-height:86vh; overflow-y:auto; box-shadow:var(--shadow-lg);
}
.modal-header {
  padding:18px 22px; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; background:var(--card);
}
.modal-header h3 { font-size:16px; font-weight:600; }
.modal-body { padding:22px; }
.modal-footer {
  padding:16px 22px; border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:10px;
  position:sticky; bottom:0; background:var(--card);
}
.close-x { cursor:pointer; font-size:22px; color:var(--text-3); line-height:1; }
.close-x:hover { color:var(--text); }

/* 复选组 */
.check-group { display:flex; flex-wrap:wrap; gap:10px; }
.check-item {
  display:flex; align-items:center; gap:6px; padding:6px 12px;
  border:1px solid var(--border); border-radius:8px; cursor:pointer; font-size:13px;
}
.check-item:hover { border-color:var(--primary); }
.check-item input { width:auto; }

.empty { text-align:center; padding:40px; color:var(--text-3); font-size:13px; }
.loading { text-align:center; padding:40px; color:var(--text-3); }
.alert {
  padding:11px 16px; border-radius:8px; margin-bottom:16px; font-size:13px;
}
.alert-error { background:var(--danger-soft); color:var(--danger); border:1px solid #fecaca; }
.alert-success { background:var(--success-soft); color:var(--success); border:1px solid #a7f3d0; }

.pager { display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:16px; }
.pager .info { font-size:12px; color:var(--text-3); margin-right:auto; }

@media (max-width:768px) {
  .sidebar { width:60px; }
  .sidebar .nav-group-title, .sidebar .nav-item span:not(.icon) { display:none; }
  .main { margin-left:60px; }
  .form-row { grid-template-columns:1fr; }
}