* { margin:0; padding:0; box-sizing:border-box; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--brand); }
:root {
  --bg:#F7F8FA;
  --card:#FFFFFF;
  --border:#E8EAED;
  --text:#1D2530;
  --text-2:#5B6675;
  --text-3:#8A94A3;
  --brand:#0F6FC6;
  --brand-soft:#E8F2FB;
  --green:#1A9E5C;
  --red:#D64545;
  --radius:12px;
}
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; -webkit-font-smoothing:antialiased; }

/* ===== 布局（宽敞开放） ===== */
.layout { display:flex; min-height:100vh; }
.sidebar { width:230px; background:var(--card); border-right:1px solid var(--border); display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; }
.brand { padding:22px 20px 18px; font-size:15px; font-weight:700; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; color:var(--text); }
.brand::before { content:""; width:22px; height:22px; border-radius:6px; background:var(--brand); display:inline-block; }
.sidebar nav { padding:12px 12px; flex:1; overflow-y:auto; }
.sidebar nav a { display:flex; align-items:center; padding:9px 12px; color:var(--text-2); text-decoration:none; font-size:14px; border-radius:8px; margin:2px 0; transition:.15s; }
.sidebar nav a:hover { background:#F0F3F7; color:var(--text); }
.sidebar nav a.active { background:var(--brand-soft); color:var(--brand); font-weight:600; }
.sidebar-foot { padding:16px 20px; font-size:12px; color:var(--text-3); border-top:1px solid var(--border); }

.main { flex:1; margin-left:230px; display:flex; flex-direction:column; min-width:0; }
.topbar { height:60px; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 28px; position:sticky; top:0; z-index:10; }
.crumb { font-size:14px; color:var(--text-2); font-weight:500; }
.user { color:var(--text-2); font-size:14px; display:flex; gap:16px; align-items:center; }
.user a { color:var(--text-2); text-decoration:none; }
.user a:hover { color:var(--brand); }
.content { padding:28px; max-width:100%; }

/* ===== 标题（大留白） ===== */
h2 { font-size:20px; margin-bottom:20px; font-weight:700; }
h3 { font-size:15px; margin:24px 0 12px; color:var(--text); font-weight:600; }
.page-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:12px; }

/* ===== 卡片（白底大圆角轻阴影） ===== */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; width:100%; }
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; transition:.2s; }
.card:hover { box-shadow:0 6px 20px rgba(15,111,198,.08); transform:translateY(-2px); }
.card .num { font-size:30px; font-weight:700; color:var(--text); line-height:1.1; }
.card.accent .num { color:var(--green); }
.card .label { margin-top:6px; color:var(--text-2); font-size:13px; }
.placeholder-card { max-width:480px; }
.tip { margin-top:8px; color:var(--text-2); font-size:13px; line-height:1.8; }

/* ===== 表格 ===== */
.table { width:100%; background:var(--card); border:1px solid var(--border); border-collapse:separate; border-radius:var(--radius); overflow-x:auto; }
.table th, .table td { padding:13px 18px; text-align:left; border-bottom:1px solid var(--border); font-size:14px; white-space:nowrap; max-width:320px; overflow:hidden; text-overflow:ellipsis; }
.table th { background:#F8F9FB; color:var(--text-2); font-weight:600; font-size:13px; }
.table td.ops, .table th.ops, .table td:last-child, .table th:last-child { max-width:none; white-space:nowrap; }
.table tr:last-child td { border-bottom:none; }
.table tbody tr { transition:.12s; }
.table tbody tr:hover { background:#F8FAFD; }
.empty { text-align:center; color:var(--text-3); padding:36px !important; }

/* ===== 操作区 ===== */
.ops { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.inline-form { display:inline-flex; align-items:center; gap:10px; }
.pager, .pagination { margin-top:20px; display:flex; gap:8px; }
.pager a, .pagination a, .pagination .current { padding:8px 14px; background:var(--card); border:1px solid var(--border); border-radius:8px; text-decoration:none; color:var(--text-2); font-size:13px; }
.pager a.active, .pagination .current { background:var(--brand); color:#fff; border-color:var(--brand); }

/* ===== 表单 ===== */
.form { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:24px; max-width:720px; }
.form label { display:block; margin:14px 0 6px; font-weight:600; color:var(--text); font-size:14px; }
.form input[type=text], .form input[type=password], .form select,
.inline-form select, .inline-form input[type=date], .inline-form input[type=text] {
  width:100%; height:38px; padding:8px 14px; border:1px solid var(--border); border-radius:8px; font-size:14px; font-family:inherit; background:#fff; color:var(--text);
}
.form textarea { width:100%; padding:8px 14px; border:1px solid var(--border); border-radius:8px; font-size:14px; font-family:inherit; background:#fff; color:var(--text); min-height:80px; }
.form input:focus, .form select:focus, .form textarea:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.form textarea { resize:vertical; }
.form-actions { margin-top:20px; display:flex; gap:12px; }

/* ===== 按钮 ===== */
.btn, .btn-primary, .btn-link { display:inline-flex; align-items:center; justify-content:center; height:38px; padding:0 18px; border-radius:8px; border:1px solid var(--border); background:#fff; color:var(--text); text-decoration:none; font-size:14px; cursor:pointer; transition:.15s; font-family:inherit; white-space:nowrap; line-height:1; vertical-align:middle; }
button { font-family:inherit; line-height:1; }
.btn:hover { background:#F5F7FA; }
.btn-primary { background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-primary:hover { background:#0E61B0; }
.btn-link { padding:0; border:none; background:none; color:var(--brand); font-size:14px; }
.btn-link.danger { color:var(--red); }

/* ===== 提示 ===== */
.alert { background:#FDECEC; border:1px solid #F5C6C6; color:#B02A2A; padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:14px; }

/* ===== 登录页 ===== */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--bg); }
.login-card { background:#fff; padding:40px; border-radius:16px; width:380px; border:1px solid var(--border); box-shadow:0 20px 60px rgba(0,0,0,.08); }
.login-card h1 { font-size:22px; margin-bottom:4px; }
.login-card .sub { color:var(--text-3); margin-bottom:24px; font-size:14px; }
.login-card label { display:block; margin:12px 0 6px; font-size:14px; color:var(--text-2); }
.login-card input { width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:8px; }
.login-card .btn-primary { width:100%; margin-top:20px; }

/* ===== 其他 ===== */
.form-item { margin-bottom:4px; }
.form label.inline { display:inline; font-weight:normal; margin-left:8px; }
.tag-ok { color:var(--green); font-weight:600; }
.tag-no { color:var(--text-3); }
.answer-box { white-space:pre-wrap; word-break:break-word; background:#F8F9FB; border:1px solid var(--border); border-radius:10px; padding:18px; line-height:1.8; font-size:14px; max-height:520px; overflow:auto; color:var(--text-2); }
.code-tip { background:#F5F7FA; border:1px solid var(--border); border-radius:8px; padding:10px 14px; font-size:14px; color:var(--text-2); }
.muted { color:var(--text-3); }

/* 术语解释 */
.glossary{cursor:help;position:relative;}
.glossary::after{content:"ⓘ";font-size:10px;color:var(--brand);margin-left:2px;}
.glossary .tip{display:none;position:absolute;bottom:130%;left:50%;transform:translateX(-50%);background:#1D2530;color:#fff;padding:12px 14px;border-radius:10px;font-size:12px;line-height:1.6;width:250px;z-index:9999;box-shadow:0 10px 30px rgba(0,0,0,.2);font-weight:normal;}
.glossary .tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#1D2530;}
.glossary:hover .tip{display:block;}


/* ===== 移动端响应式适配 ===== */
.mobile-menu-btn { display:none; background:none; border:none; font-size:20px; cursor:pointer; color:var(--text); padding:4px 8px; }
.sidebar-mask { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:99; }
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

@media (max-width: 1024px) {
  .content { padding:20px; }
  .cards { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
}

@media (max-width: 768px) {
  .mobile-menu-btn { display:inline-block; }
  .sidebar { transform:translateX(-100%); transition:transform .25s ease; z-index:100; width:240px; }
  .sidebar.open { transform:translateX(0); }
  .sidebar-mask.show { display:block; }
  .main { margin-left:0; }
  .topbar { padding:0 16px; height:52px; }
  .content { padding:16px; }
  h2 { font-size:18px; margin-bottom:14px; }
  .page-head { flex-direction:column; align-items:flex-start; }
  .form { padding:18px; max-width:100%; }
  .table th, .table td { padding:10px 12px; font-size:13px; }
  .cards { grid-template-columns:repeat(2,1fr); gap:10px; }
  .card { padding:14px; }
  .card .num { font-size:24px; }
  .login-card { width:92%; padding:28px 22px; }
  .user { gap:10px; font-size:13px; }
  .user a { font-size:13px; }
  .crumb { font-size:13px; }
  .pager a, .pagination a, .pagination .current { padding:6px 10px; font-size:12px; }
  .ops { gap:8px; }
  .sidebar nav a { padding:10px 14px; font-size:14px; }
}

@media (max-width: 480px) {
  .cards { grid-template-columns:1fr; }
  .content { padding:12px; }
  .table th, .table td { padding:8px 10px; font-size:12px; }
}