/* =====================================================================
   后台管理样式 - 庄重清晰 / 移动端适配
   ===================================================================== */
:root {
  --red:#8c1f28; --red-dark:#6e161e; --gold:#c9a86a;
  --ink:#2b2b2b; --ink2:#666; --bg:#f4f2ec; --card:#fff; --line:#e4dfd5;
  --ok:#1b7a3d; --warn:#b26a00; --err:#a02020;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:"PingFang SC","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--ink); min-height:100dvh; }
a { color:var(--red); text-decoration:none; }

/* ---------- 顶栏 ---------- */
.topbar { background:var(--red); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 16px; height:54px; position:sticky; top:0; z-index:50; }
.topbar .brand { font-family:"Songti SC",SimSun,serif; font-size:16px; letter-spacing:1px; display:flex; align-items:center; gap:8px; }
.topbar .brand .dot { width:26px;height:26px;border:1.5px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--gold); }
.topbar .user { font-size:13px; color:rgba(255,255,255,.9); }
.topbar .user a { color:#ffe9c9; margin-left:10px; }

/* ---------- 布局 ---------- */
.layout { display:flex; min-height:calc(100dvh - 54px); }
.sidenav { width:190px; background:#332e29; padding:14px 0; flex-shrink:0; }
.sidenav a { display:block; color:#cfc8bd; padding:11px 20px; font-size:14px; border-left:3px solid transparent; }
.sidenav a.on, .sidenav a:hover { color:#fff; background:rgba(255,255,255,.06); border-left-color:var(--gold); }
.main { flex:1; padding:20px 16px 40px; min-width:0; }

/* ---------- 组件 ---------- */
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:18px; margin-bottom:16px; }
.card h2 { font-size:16px; color:var(--red); margin-bottom:14px; font-family:"Songti SC",SimSun,serif; letter-spacing:1px; }
.page-title { font-size:17px; margin:2px 0 16px; font-family:"Songti SC",SimSun,serif; color:var(--ink); }
.page-title small { font-size:12px; color:var(--ink2); font-family:"PingFang SC","Microsoft YaHei",sans-serif; margin-left:8px; }

.stat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px; }
.stat .num { font-size:26px; font-weight:700; }
.stat .lbl { font-size:12.5px; color:var(--ink2); margin-top:2px; }
.stat.active .num { color:var(--ok); }
.stat.expiring .num { color:var(--warn); }
.stat.expired .num { color:#9e9e9e; }
.stat.revoked .num { color:var(--err); }

table.grid { width:100%; border-collapse:collapse; font-size:13.5px; }
table.grid th, table.grid td { padding:9px 10px; border-bottom:1px solid var(--line); text-align:left; word-break:break-all; }
table.grid th { background:#faf8f3; color:var(--ink2); font-weight:600; white-space:nowrap; }
table.grid tr:hover td { background:#fbfaf6; }
.badge { display:inline-block; padding:2px 9px; border-radius:3px; font-size:12px; color:#fff; white-space:nowrap; }
.st-active{background:var(--ok);} .st-expiring{background:var(--warn);} .st-expired{background:#9e9e9e;}
.st-revoked{background:var(--err);} .st-pending{background:var(--gold);color:#4a3a10;}

.filter-bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.filter-bar input, .filter-bar select, .filter-bar button {
  padding:8px 10px; border:1px solid var(--line); border-radius:5px; font-size:13.5px; background:#fff;
}
.filter-bar input:focus, .filter-bar select:focus { outline:none; border-color:var(--red); }
.filter-bar button, .btn { background:var(--red); color:#fff; border:0; cursor:pointer; padding:8px 16px; border-radius:5px; font-size:13.5px; }
.btn.ghost { background:#fff; color:var(--red); border:1px solid var(--red); }
.btn.small { padding:4px 10px; font-size:12.5px; }
.btn.danger { background:#fff; color:var(--err); border:1px solid var(--err); }
.op-btns .btn { margin:2px 2px; }

/* ---------- 表单 ---------- */
.form-grid { display:grid; grid-template-columns:1fr; gap:0 28px; }
.form-item { margin-bottom:14px; }
.form-item label { display:block; font-size:13.5px; color:var(--ink2); margin-bottom:5px; }
.form-item label .req { color:var(--err); margin-left:2px; }
.form-item input[type=text], .form-item input[type=password], .form-item input[type=email],
.form-item input[type=date], .form-item select, .form-item textarea {
  width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:5px; font-size:14px; background:#fff;
}
.form-item input:focus, .form-item select:focus, .form-item textarea:focus { outline:none; border-color:var(--red); }
.form-item .hint { font-size:12px; color:#999; margin-top:3px; }
.form-actions { margin-top:18px; display:flex; gap:10px; }

.flash { padding:10px 14px; border-radius:6px; font-size:13.5px; margin-bottom:14px; }
.flash.ok { background:#e8f5e9; color:#1b5e20; border:1px solid #c3e6cb; }
.flash.err { background:#fdecea; color:#a02020; border:1px solid #f2b8b5; }

.pager { display:flex; gap:6px; margin-top:14px; flex-wrap:wrap; }
.pager a, .pager .cur { padding:5px 12px; border:1px solid var(--line); border-radius:4px; font-size:13px; color:var(--red); background:#fff; }
.pager .cur { background:var(--red); color:#fff; border-color:var(--red); }

/* ---------- 登录页 ---------- */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100dvh; background:linear-gradient(160deg,#6e161e,#8c1f28 55%,#5d1119); padding:16px; }
.login-box { background:#fff; border-radius:10px; padding:34px 28px; width:100%; max-width:400px; box-shadow:0 12px 40px rgba(0,0,0,.3); }
.login-box h1 { text-align:center; font-family:"Songti SC",SimSun,serif; font-size:19px; color:var(--red); letter-spacing:2px; margin-bottom:4px; }
.login-box .sub { text-align:center; font-size:12px; color:#999; margin-bottom:22px; }
.login-box .form-item input { font-size:15px; }
.login-box button[type=submit] { width:100%; padding:11px; background:var(--red); color:#fff; border:0; border-radius:5px; font-size:15px; cursor:pointer; margin-top:6px; }
.login-box .lock-tip { text-align:center; font-size:12px; color:#b26a00; margin-top:12px; }

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
  .layout { flex-direction:column; }
  .sidenav { width:100%; display:flex; overflow-x:auto; padding:0; position:sticky; top:54px; z-index:40; }
  .sidenav a { border-left:0; border-bottom:3px solid transparent; white-space:nowrap; padding:11px 14px; }
  .sidenav a.on, .sidenav a:hover { border-bottom-color:var(--gold); border-left:0; }
  .stat-grid { grid-template-columns:repeat(2,1fr); }
  table.grid { display:block; overflow-x:auto; }
  .main { padding:14px 12px 40px; }
}
@media (min-width: 860px) {
  .stat-grid { grid-template-columns:repeat(4,1fr); }
  .form-grid { grid-template-columns:1fr 1fr; }
}