/* ==========================================================================
   管理后台 · 独立样式（不依赖前台 app.css）
   ========================================================================== */
:root{
  --ink:#0b1220; --ink2:#243049; --muted:#6b7a92; --muted2:#8b98ad;
  --line:#e3e9f2; --line2:#eef2f8; --bg:#f4f6fa; --card:#fff;
  --brand:#5b5bf6; --brand-d:#4338ca; --ok:#0f9d63; --warn:#b45309; --bad:#dc2626;
  --side:#0c1322; --side2:#131c30;
  --r:12px; --sh:0 1px 2px rgba(11,18,32,.04), 0 6px 18px -8px rgba(11,18,32,.10);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body.admin{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink); font-size:14.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
  display:flex; min-height:100vh;
}
a{color:var(--brand-d); text-decoration:none}
h1,h2,h3,h4{margin:0; font-weight:750; letter-spacing:-.02em; line-height:1.35}
p{margin:0 0 10px}
p:last-child{margin-bottom:0}
code{font-family:var(--mono); font-size:12.5px; background:#eef2fa; padding:2px 6px; border-radius:5px}

/* ---------- 侧栏 ---------- */
.side{
  width:232px; flex:0 0 232px; background:var(--side); color:#c2cde2;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
  border-right:1px solid rgba(255,255,255,.06);
}
.side-brand{
  display:flex; align-items:center; gap:11px; padding:20px 18px 18px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.brand-mark{
  width:34px; height:34px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center;
  background:linear-gradient(135deg,#5b5bf6,#12b8e6); color:#fff; font-size:15px; font-weight:800;
  box-shadow:0 6px 16px -6px rgba(91,91,246,.8), inset 0 1px 0 rgba(255,255,255,.3);
}
.brand-mark svg{display:block}
.side-brand b{display:block; font-size:14.5px; color:#f2f5ff; letter-spacing:-.01em}
.side-brand small{display:block; font-size:11.5px; color:#7d8bab; margin-top:1px; letter-spacing:.02em}

.side-nav{padding:14px 12px; display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto}
.side-link{
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px;
  color:#a8b5cd; font-size:13.8px; font-weight:550; transition:.15s; position:relative;
}
.side-link svg{width:17px; height:17px; flex:0 0 auto; opacity:.75}
.side-link:hover{background:rgba(255,255,255,.06); color:#e7ecf9; text-decoration:none}
.side-link:hover svg{opacity:1}
.side-link.active{background:rgba(91,91,246,.16); color:#fff; font-weight:650}
.side-link.active svg{opacity:1; color:#a8a4ff}
.side-link.active:before{
  content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:0 3px 3px 0; background:linear-gradient(180deg,#5b5bf6,#12b8e6);
}
.side-foot{padding:12px; border-top:1px solid rgba(255,255,255,.07); display:flex; flex-direction:column; gap:2px}
.side-foot a{
  display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:8px;
  color:#8b98b4; font-size:13.2px; transition:.15s;
}
.side-foot a svg{width:16px; height:16px; flex:0 0 auto; opacity:.7}
.side-foot a:hover{background:rgba(255,255,255,.06); color:#dfe6f5; text-decoration:none}
.side-foot a:hover svg{opacity:1}

/* ---------- 主区 ---------- */
.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{
  position:sticky; top:0; z-index:20; background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding:16px 28px; display:flex; align-items:center; gap:16px;
}
.topbar h1{font-size:19px; letter-spacing:-.025em}
.topbar .sub{font-size:12.5px; color:var(--muted); margin:3px 0 0}
.topbar-r{margin-left:auto; display:flex; align-items:center; gap:12px}
.who{font-size:12.5px; color:var(--muted); font-family:var(--mono)}
.content{padding:24px 28px 48px; max-width:1320px; width:100%}

/* ---------- 卡片 / 栅格 ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh)}
.card-pad{padding:20px}
.card-hd{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.card-t{font-size:14.5px; font-weight:700; letter-spacing:-.015em; margin:0}
.card-sub{font-size:12.5px; color:var(--muted); margin:3px 0 0}
.grid{display:grid; gap:14px}
.grid > *{min-width:0}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.mb{margin-bottom:16px}

/* ---------- 统计卡 ---------- */
.stat{padding:16px 18px}
.stat .label{font-size:12.5px; color:var(--muted); font-weight:550; margin-bottom:6px}
.stat .value{font-size:24px; font-weight:800; letter-spacing:-.03em; line-height:1.15}
.stat .value small{font-size:12.5px; font-weight:600; color:var(--muted); margin-left:3px; letter-spacing:0}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 15px; border-radius:9px; border:1px solid transparent;
  font-size:13.5px; font-weight:650; font-family:inherit; cursor:pointer;
  transition:.15s; white-space:nowrap; line-height:1.3;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn:active{transform:none}
.btn-primary{background:linear-gradient(135deg,#5b5bf6,#7c6cff 45%,#12b8e6); color:#fff; box-shadow:0 8px 18px -9px rgba(91,91,246,.8)}
.btn-ghost{background:#fff; color:var(--ink2); border-color:var(--line)}
.btn-ghost:hover{border-color:#cdd7e8; background:#fbfcff}
.btn-sm{padding:6px 11px; font-size:12.5px; border-radius:7px}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}
.spacer{margin-left:auto}

/* ---------- 表格 ---------- */
.tbl{width:100%; border-collapse:collapse; font-size:13.5px}
.tbl th{
  text-align:left; padding:11px 14px; font-size:12px; font-weight:700; color:var(--ink2);
  background:#f8fafd; border-bottom:1px solid var(--line); white-space:nowrap;
}
.tbl td{padding:11px 14px; border-bottom:1px solid var(--line2); vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:#fafcff}
.mono{font-family:var(--mono); font-size:12px}

/* ---------- 表单 ---------- */
.field{margin-bottom:14px}
.field label{display:block; font-size:12.5px; font-weight:650; color:var(--ink2); margin-bottom:6px}
.input{
  width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:8px;
  font-size:13.8px; font-family:inherit; background:#fff; color:var(--ink); transition:.15s;
}
.input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(91,91,246,.14)}
.row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

/* ---------- 提示 ---------- */
.alert{
  position:relative; padding:11px 14px 11px 38px; border-radius:9px;
  font-size:13.2px; border:1px solid transparent; line-height:1.6;
}
.alert:before{position:absolute; left:13px; top:10px; font-weight:800; font-size:13px}
.alert-info{background:#eef4ff; color:#1e3a8a; border-color:#dbe6fe}
.alert-info:before{content:"i"; font-style:italic; font-family:Georgia,serif}
.alert-warn{background:#fff5e5; color:#92400e; border-color:#fbe3bd}
.alert-warn:before{content:"!"}

.status-pill{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  font-size:11.5px; font-weight:700;
}
.status-pill:before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor}
.pill-ok{background:#e6f8ef; color:#0b7a4d}
.pill-bad{background:#feecec; color:#b91c1c}
.pill-warn{background:#fff5e5; color:var(--warn)}

.empty{padding:36px 16px; text-align:center; color:var(--muted); font-size:13.2px}
.kv{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:13.2px}
.kv:last-child{border-bottom:none}
.kv span:first-child{color:var(--muted)}
.kv span:last-child{font-weight:600; text-align:right}

.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(14px);
  background:rgba(11,18,32,.96); color:#fff; padding:11px 20px; border-radius:10px;
  font-size:13.5px; opacity:0; pointer-events:none; transition:.22s; z-index:99;
  box-shadow:0 20px 44px -16px rgba(0,0,0,.55); max-width:80vw; text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

.hide{display:none !important}

/* ---------- 响应式 ---------- */
@media(max-width:1080px){
  .g4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  body.admin{display:block}
  .side{
    width:auto; height:auto; position:sticky; top:0; z-index:30;
    flex-direction:row; align-items:center; padding:0 10px; gap:8px;
    overflow-x:auto; border-right:none; border-bottom:1px solid rgba(255,255,255,.08);
  }
  .side-brand{padding:10px 8px; border-bottom:none; flex:0 0 auto}
  .side-brand small{display:none}
  .side-nav{flex-direction:row; padding:8px 0; gap:4px; overflow:visible; flex:1}
  .side-link{padding:7px 11px; white-space:nowrap; font-size:13px}
  .side-link.active:before{display:none}
  .side-link svg{display:none}
  .side-foot{flex-direction:row; padding:8px 0; border-top:none; flex:0 0 auto;
    position:sticky; right:0; background:var(--side); box-shadow:-10px 0 14px -6px rgba(12,19,34,.95)}
  .side-foot a{padding:7px 9px; font-size:12.5px}
  .topbar{position:static; padding:14px 18px}
  .content{padding:18px}
  .g2{grid-template-columns:1fr}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .stat{padding:13px 14px}
  .stat .value{font-size:20px}
}