/* 政务风格：沉稳深蓝 + 浅灰圆角卡片 + 大留白 */
:root {
  --primary:#1b3f74; --primary-dark:#132c52; --primary-light:#2c5b9e; --primary-pale:#e8eef7;
  --gold:#b08d57; --bg:#eef1f5; --card:#fff; --ink:#1f2a3d; --ink-2:#5b6676; --ink-3:#98a2b3;
  --line:#e3e8ef; --ok:#2e6da4; --warn:#c58a2a; --danger:#b4453c; --radius:12px;
  --shadow:0 1px 3px rgba(19,44,82,.06),0 6px 18px rgba(19,44,82,.05);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"Microsoft YaHei","PingFang SC",sans-serif; background:var(--bg); color:var(--ink); font-size:14px; line-height:1.6; }

/* 登录页 */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(1100px 500px at 85% -10%, rgba(44,91,158,.35), transparent 60%), linear-gradient(160deg,#132c52,#1b3f74 55%,#16355f); padding:24px; }
.login-card { width:400px; background:#fff; border-radius:16px; box-shadow:0 12px 40px rgba(19,44,82,.16); padding:40px 36px 32px; }
.login-logo { width:56px; height:56px; border-radius:14px; background:linear-gradient(150deg,var(--primary),var(--primary-dark)); color:#fff; font-size:26px; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px; box-shadow:0 8px 20px rgba(19,44,82,.35); }
.login-card h1 { font-size:18px; font-weight:700; text-align:center; letter-spacing:1px; }
.login-card .sub { text-align:center; color:var(--ink-2); font-size:12px; margin:6px 0 22px; }
.login-err { background:#f6e4e1; color:var(--danger); font-size:12.5px; padding:8px 12px; border-radius:8px; margin-bottom:12px; text-align:center; }
.login-meta { margin-top:20px; padding:12px; background:#f6f8fb; border-radius:8px; font-size:12px; color:var(--ink-2); text-align:center; }

/* 顶栏 */
.topbar { height:56px; background:linear-gradient(90deg,var(--primary-dark),var(--primary) 60%,#1e4479); color:#fff;
  display:flex; align-items:center; gap:20px; padding:0 22px; box-shadow:0 2px 8px rgba(19,44,82,.25); }
.brand { display:flex; align-items:center; gap:10px; }
.logo { width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-weight:700; }
.sysname { font-size:16px; font-weight:700; letter-spacing:1px; }
.syssub { font-size:10px; opacity:.6; letter-spacing:1.5px; }
.topnav { display:flex; gap:4px; margin-left:20px; }
.topnav a { color:rgba(255,255,255,.75); text-decoration:none; font-size:13px; padding:6px 14px; border-radius:999px; transition:all .15s; }
.topnav a:hover { color:#fff; background:rgba(255,255,255,.08); }
.topnav a.on { color:#fff; background:rgba(255,255,255,.14); font-weight:600; }
.userbox { margin-left:auto; display:flex; align-items:center; gap:10px; font-size:12.5px; }
.userbox .tag { background:rgba(255,255,255,.12); padding:3px 10px; border-radius:999px; font-size:11px; }
.logout { color:rgba(255,255,255,.8); text-decoration:none; font-size:12px; }
.logout:hover { color:#fff; }

.main { max-width:1100px; margin:0 auto; padding:28px 20px 40px; }
.page-head { margin-bottom:20px; }
.page-head h2 { font-size:21px; font-weight:700; }
.page-head p { color:var(--ink-2); font-size:13px; margin-top:4px; }

/* 卡片 */
.card { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 24px; border:1px solid rgba(227,232,239,.7); }
.card + .card { margin-top:16px; }
.card-title { font-size:15px; font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.card-title::before { content:''; width:4px; height:15px; border-radius:2px; background:linear-gradient(180deg,var(--primary-light),var(--primary)); }
.card-title .tail { margin-left:auto; font-size:12px; color:var(--ink-3); font-weight:400; display:flex; gap:6px; }

/* 统计 */
.grid { display:grid; gap:16px; }
.grid.c4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid.c4{grid-template-columns:repeat(2,1fr);} }
.stat { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px; border:1px solid rgba(227,232,239,.7); }
.stat .label { font-size:12.5px; color:var(--ink-2); }
.stat .value { font-size:28px; font-weight:700; color:var(--primary-dark); margin-top:2px; }

/* 表单 */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
.field label { display:block; font-size:12.5px; color:var(--ink-2); margin-bottom:5px; font-weight:600; }
.field label .req { color:var(--danger); margin-left:2px; }
.field input { width:100%; padding:9px 12px; border:1px solid #d6dde6; border-radius:8px; font-size:13px; font-family:inherit; background:#fbfcfe; outline:none; transition:border .15s, box-shadow .15s; }
.field input:focus { border-color:var(--primary-light); box-shadow:0 0 0 3px rgba(44,91,158,.12); background:#fff; }

/* 按钮 */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:13px; font-weight:600; cursor:pointer; border:none; padding:9px 20px; letter-spacing:1px; font-family:inherit; text-decoration:none; transition:all .15s; }
.btn:active { transform:translateY(1px); }
.btn-primary { background:linear-gradient(150deg,var(--primary-light),var(--primary)); color:#fff; clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); box-shadow:0 4px 12px rgba(27,63,116,.3); }
.btn-ghost { background:transparent; color:var(--primary); border:1.5px solid var(--primary-light); border-radius:999px; }
.btn-plain { background:#f0f3f7; color:var(--ink-2); border-radius:8px; }
.btn-sm { padding:5px 13px; font-size:12px; }

/* 表格 */
.tbl { width:100%; border-collapse:collapse; }
.tbl th { text-align:left; font-size:12.5px; color:var(--ink-2); font-weight:600; padding:10px 12px; background:#f6f8fb; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl th:first-child { border-radius:8px 0 0 8px; } .tbl th:last-child { border-radius:0 8px 8px 0; }
.tbl td { padding:11px 12px; border-bottom:1px solid #eef2f6; font-size:13px; }
.tbl tr:last-child td { border-bottom:none; }
.tbl .no { font-weight:600; color:var(--primary); }
.tbl .muted { color:var(--ink-3); font-size:12px; }
.empty { text-align:center; padding:36px 0; color:var(--ink-3); font-size:13px; }

/* 徽标 */
.tag { display:inline-flex; align-items:center; font-size:12px; padding:2px 10px; border-radius:999px; font-weight:600; white-space:nowrap; }
.tag.blue { background:var(--primary-pale); color:var(--primary); }
.tag.gold { background:#f3ecdf; color:var(--gold); }
.tag.gray { background:#eceff3; color:var(--ink-2); }
.tag.red { background:#f6e4e1; color:var(--danger); }
.tag.amber { background:#f7ecd9; color:#9a6b1c; }

/* 结果卡 */
.result-card.ok { border-left:4px solid var(--ok); }
.result-card.bad { border-left:4px solid var(--danger); }
.result-card.warn { border-left:4px solid var(--warn); }
.result-head { display:flex; align-items:center; gap:12px; }
.result-badge { font-size:15px; font-weight:700; padding:5px 16px; border-radius:999px; }
.result-badge.ok { background:var(--primary-pale); color:var(--primary); }
.result-badge.bad { background:#f6e4e1; color:var(--danger); }
.result-badge.warn { background:#f7ecd9; color:#9a6b1c; }

.kv { display:grid; grid-template-columns:90px 1fr; gap:7px 14px; font-size:13px; }
.kv dt { color:var(--ink-3); } .kv dd { color:var(--ink); font-weight:500; }

.footer { text-align:center; color:var(--ink-3); font-size:12px; padding:24px 0 34px; letter-spacing:1px; }

/* 提示 */
.toast-box { position:fixed; top:70px; right:24px; z-index:200; display:flex; flex-direction:column; gap:8px; }
.toast { background:#fff; border-radius:10px; box-shadow:0 12px 40px rgba(19,44,82,.16); padding:11px 16px; font-size:13px; border-left:4px solid var(--primary); animation:slideIn .25s ease; }
.toast.err { border-left-color:var(--danger); }
@keyframes slideIn { from { opacity:0; transform:translateX(20px);} to { opacity:1; transform:none;} }

/* ---------- 表单补充：下拉框 / 多行文本 ---------- */
.field select, .field textarea {
  width:100%; padding:9px 12px; border:1px solid #d6dde6; border-radius:8px;
  font-size:13px; font-family:inherit; color:var(--ink); background:#fbfcfe;
  outline:none; transition:border .15s, box-shadow .15s; resize:vertical;
}
.field select:focus, .field textarea:focus { border-color:var(--primary-light); box-shadow:0 0 0 3px rgba(44,91,158,.12); background:#fff; }

/* ---------- 按钮补充 ---------- */
.btn-danger-ghost { background:transparent; color:var(--danger); border:1.5px solid #d9a49e; border-radius:999px; }
.btn-danger-ghost:hover { background:#f6e4e1; }
.btn[disabled] { opacity:.45; cursor:not-allowed; pointer-events:none; }

/* ---------- 徽标补充 ---------- */
.tag.navy { background:#dbe6f5; color:var(--primary-dark); }

.empty { text-align:center; padding:44px 0; color:var(--ink-3); font-size:13px; }

/* ---------- 工具条 / 搜索框 ---------- */
.toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.toolbar .spacer { flex:1; }
.search { display:flex; align-items:center; gap:8px; background:#fbfcfe; border:1px solid #d6dde6; border-radius:999px; padding:7px 16px; min-width:260px; }
.search input { border:none; outline:none; background:transparent; font-size:13px; flex:1; font-family:inherit; }
.search svg { width:15px; height:15px; flex:0 0 15px; color:var(--ink-3); }

/* ---------- 可点选标签（单选/多选） ---------- */
.check-grid { display:flex; flex-wrap:wrap; gap:9px; }
.check-chip {
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none;
  border:1.5px solid #d6dde6; border-radius:999px; padding:6px 15px;
  font-size:12.5px; color:var(--ink-2); background:#fbfcfe; transition:all .13s;
}
.check-chip input { display:none; }
.check-chip .box { width:14px; height:14px; border-radius:4px; border:1.5px solid #b9c4d2; display:inline-flex; align-items:center; justify-content:center; background:#fff; }
.check-chip.on { border-color:var(--primary); background:var(--primary-pale); color:var(--primary); font-weight:600; }
.check-chip.on .box { background:var(--primary); border-color:var(--primary); }
.check-chip.on .box::after { content:''; width:7px; height:4px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translateY(-1px); }

/* ---------- 弹层 ---------- */
.mask { position:fixed; inset:0; background:rgba(19,34,56,.45); display:none; align-items:center; justify-content:center; z-index:100; padding:20px; }
.mask.on { display:flex; }
.modal { width:620px; max-width:94vw; max-height:88vh; overflow-y:auto; background:#fff; border-radius:16px; box-shadow:0 12px 40px rgba(19,44,82,.28); padding:24px 26px; animation:popIn .18s ease; }
.modal.wide { width:760px; }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.modal-head h3 { font-size:16px; font-weight:700; letter-spacing:.5px; }
.modal-head .x { width:30px; height:30px; border-radius:50%; border:none; background:#f0f3f7; color:var(--ink-2); cursor:pointer; font-size:14px; line-height:1; font-family:inherit; }
.modal-head .x:hover { background:#e4e9f0; }
.modal-foot { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
@keyframes popIn { from { opacity:0; transform:translateY(8px) scale(.99);} to { opacity:1; transform:none;} }