/* ============================================================
   合数方阵 · 管理后台 设计系统
   零依赖：系统字体 + 内联 SVG，本地/离线可用
   ============================================================ */

:root {
  --bg: #F4F3EF;
  --surface: #FFFFFF;
  --surface-2: #FAF9F6;
  --ink: #22253A;
  --ink-2: #4B4F66;
  --muted: #878A9C;
  --line: #E7E4DC;
  --line-2: #F0EEE8;

  --brand: #5B6BC0;
  --brand-2: #7C8AE0;
  --brand-dark: #3F4EA6;
  --brand-soft: #ECEEFB;

  --ok: #3FA372;
  --ok-soft: #E7F5EE;
  --bad: #D2605F;
  --bad-soft: #FBECEC;
  --warn: #D9A441;
  --warn-soft: #FBF3E2;

  --side: #262B47;
  --side-2: #343B66;

  --r-lg: 16px;
  --r: 12px;
  --r-sm: 9px;
  --sh: 0 1px 2px rgba(34, 37, 58, .05), 0 10px 30px -18px rgba(34, 37, 58, .35);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font: 14px/1.55 var(--font);
  color: var(--ink);
  background: var(--bg);
  display: flex;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { opacity: .85; }

.num { font-variant-numeric: tabular-nums; }
.mono { font-family: Consolas, "SF Mono", Menlo, monospace; font-size: 12px; }
.muted { color: var(--muted); font-size: 12px; }

/* ---------------- 侧边栏 ---------------- */
.side {
  width: 236px;
  flex-shrink: 0;
  background: linear-gradient(175deg, var(--side) 0%, var(--side-2) 100%);
  color: #C6CAE6;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px 14px 16px;
}
.brand { display: flex; gap: 11px; align-items: center; padding: 2px 8px 20px; }
.brand .tile {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, #7C8AE0, #5B6BC0);
  color: #fff; font-weight: 800; font-size: 20px;
  display: grid; place-items: center;
  box-shadow: 0 8px 18px -8px rgba(124, 138, 224, .85);
}
.brand .t1 { color: #fff; font-weight: 700; font-size: 15.5px; letter-spacing: .02em; line-height: 1.3; }
.brand .t2 { font-size: 10.5px; color: #8E93C2; letter-spacing: .08em; }

.nav-cap {
  font-size: 10.5px; color: #767BAE; letter-spacing: .16em;
  padding: 8px 11px 7px;
}
.nav {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px; border-radius: 10px;
  color: #C6CAE6; font-size: 14px; margin-bottom: 3px;
  position: relative; transition: background .15s, color .15s;
}
.nav svg { opacity: .72; flex-shrink: 0; }
.nav:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav:hover svg { opacity: 1; }
.nav.on {
  background: linear-gradient(90deg, rgba(124, 138, 224, .34), rgba(124, 138, 224, .12));
  color: #fff; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(160, 170, 255, .28);
}
.nav.on svg { opacity: 1; color: #AAB4FF; }

.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.who {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px; padding: 9px 11px;
}
.who .n { color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.who .s { font-size: 11px; color: #8E93C2; }
.logout {
  display: flex; gap: 9px; align-items: center; justify-content: center;
  width: 100%;
  background: rgba(210, 96, 95, .15);
  border: 1px solid rgba(210, 96, 95, .32);
  color: #E9A2A1; border-radius: 11px; padding: 10px;
  cursor: pointer; font-size: 13.5px; font-family: var(--font);
  transition: background .15s, color .15s;
}
.logout:hover { background: rgba(210, 96, 95, .3); color: #fff; }

/* ---------------- 主区 / 顶栏 ---------------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(244, 243, 239, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 15px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.top h1 { font-size: 19px; font-weight: 750; letter-spacing: .01em; }
.top .sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.chip {
  display: inline-flex; gap: 7px; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px;
  font-size: 12.5px; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.chip .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft);
}
.content { padding: 24px 28px 44px; }

/* ---------------- 提示条 ---------------- */
.flash {
  display: flex; gap: 9px; align-items: center;
  border-radius: 12px; padding: 11px 15px;
  font-size: 13.5px; margin-bottom: 16px; border: 1px solid;
}
.flash.err { background: var(--bad-soft); border-color: #F3D3D3; color: #A3403F; }
.flash.ok  { background: var(--ok-soft);  border-color: #CDE8DA; color: #2C7A55; }

/* ---------------- 统计卡 ---------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: 14px; margin-bottom: 22px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 17px;
  box-shadow: var(--sh);
  position: relative; overflow: hidden;
  background-image: radial-gradient(circle at 100% 0, rgba(91, 107, 192, .07), transparent 45%);
  transition: transform .15s, box-shadow .15s;
}
.stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(34, 37, 58, .05), 0 16px 34px -18px rgba(34, 37, 58, .4);
}
.stat .ic {
  width: 35px; height: 35px; border-radius: 11px;
  display: grid; place-items: center; margin-bottom: 12px; color: #fff;
}
.ic.b { background: linear-gradient(135deg, #7C8AE0, #5B6BC0); box-shadow: 0 6px 14px -7px var(--brand); }
.ic.p { background: linear-gradient(135deg, #B085DC, #9A6BB5); box-shadow: 0 6px 14px -7px #9A6BB5; }
.ic.a { background: linear-gradient(135deg, #EDBF5B, #D9A441); box-shadow: 0 6px 14px -7px #D9A441; }
.ic.c { background: linear-gradient(135deg, #5FC0DC, #3E93B8); box-shadow: 0 6px 14px -7px #3E93B8; }
.ic.r { background: linear-gradient(135deg, #E48483, #D2605F); box-shadow: 0 6px 14px -7px #D2605F; }
.ic.g { background: linear-gradient(135deg, #63C194, #3FA372); box-shadow: 0 6px 14px -7px #3FA372; }
.stat .v { font-size: 26px; font-weight: 780; letter-spacing: -.01em; line-height: 1.15; }
.stat .l { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.stat.warn .v { color: var(--bad); }

/* ---------------- 面板 ---------------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
  margin-bottom: 20px;
  overflow: hidden;
}
.panel-h {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  padding: 15px 18px; border-bottom: 1px solid var(--line-2);
}
.panel-h h2 { font-size: 15px; font-weight: 700; }
.panel-h .hint { font-size: 12px; color: var(--muted); font-weight: 400; }
.panel-b { padding: 8px 18px 16px; }
.panel-b.flush { padding: 0; }

/* ---------------- 表格 ---------------- */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th {
  font-size: 12px; color: var(--muted); font-weight: 600;
  text-align: left; padding: 11px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  white-space: nowrap;
}
.tbl td {
  padding: 10.5px 10px;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap; vertical-align: middle;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr:hover { background: #FAFAF7; }
.tbl .r { text-align: right; }
.tbl .strong { font-weight: 700; }
.row-bad td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.row-bad { background: rgba(210, 96, 95, .045); }

/* ---------------- 徽章 / 药丸 ---------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.badge.ok  { background: var(--ok-soft); color: #2E8A5E; }
.badge.bad { background: var(--bad-soft); color: #B84A49; }
.badge.mut { background: #EFEEE9; color: var(--muted); }
.badge.pri { background: var(--brand-soft); color: var(--brand-dark); }
.badge.war { background: var(--warn-soft); color: #A5762A; }

.tag {
  display: inline-block; font-size: 11px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--muted); border-radius: 6px; padding: 1px 6px;
  font-family: Consolas, monospace;
}

.pills { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; }
.pill {
  display: inline-flex; gap: 7px; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-2); border-radius: 999px;
  padding: 7px 15px; font-size: 13px; font-weight: 600;
  transition: .15s;
}
.pill:hover { border-color: #CFD4F2; color: var(--brand); opacity: 1; }
.pill.on {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 6px 14px -8px var(--brand);
}
.pill .c {
  font-size: 11.5px; background: rgba(0, 0, 0, .06);
  border-radius: 999px; padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}
.pill.on .c { background: rgba(255, 255, 255, .22); }

/* ---------------- 头像 / 奖牌 / 进度条 ---------------- */
.av {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.av.sm { width: 25px; height: 25px; font-size: 11px; }
.av.lg { width: 42px; height: 42px; font-size: 16px; }
.cell-user { display: flex; align-items: center; gap: 10px; }
.cell-user .un { font-weight: 650; line-height: 1.3; }
.cell-user .uo { font-size: 11px; color: var(--muted); }

.medal {
  width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 800; color: #fff; flex-shrink: 0;
  box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .18);
}
.m1 { background: linear-gradient(135deg, #F3CB5B, #E0A72E); }
.m2 { background: linear-gradient(135deg, #C9CFDA, #9BA3B5); }
.m3 { background: linear-gradient(135deg, #DDA577, #C08052); }
.rank-n {
  width: 27px; text-align: center; flex-shrink: 0;
  color: var(--muted); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bar { height: 7px; border-radius: 99px; background: var(--line-2); overflow: hidden; min-width: 60px; }
.bar i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--brand-2), var(--brand));
}

/* ---------------- 排行行 ---------------- */
.pod {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 2px; border-bottom: 1px solid var(--line-2);
}
.pod:last-child { border-bottom: 0; }
.pod .info { flex: 1; min-width: 0; }
.pod .nm { font-weight: 650; font-size: 14px; display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.pod .od { font-size: 11.5px; color: var(--muted); }
.pod .sc { font-size: 16.5px; font-weight: 800; color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.pod .barwrap { flex: 1.4; min-width: 90px; }

/* ---------------- 筛选 / 分页 ---------------- */
.pager {
  display: flex; gap: 14px; align-items: center;
  padding: 14px 2px 4px;
  font-size: 13px; color: var(--muted);
}
.pager a, .pager .cur {
  padding: 6px 14px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--surface);
  color: var(--ink-2); font-weight: 600;
}
.pager a:hover { border-color: var(--brand); color: var(--brand); opacity: 1; }

/* ---------------- 埋点 ---------------- */
.ev-row {
  display: grid; grid-template-columns: minmax(140px, 220px) 1fr 74px;
  gap: 16px; align-items: center;
  padding: 10px 2px; border-bottom: 1px dashed var(--line);
}
.ev-row:last-child { border-bottom: 0; }
.ev-row .en { font-family: Consolas, monospace; font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.ev-row .ec { text-align: right; font-weight: 750; font-variant-numeric: tabular-nums; }
pre.tail {
  background: #1E2135; color: #C9CEE8;
  border-radius: 12px; padding: 14px 16px;
  font-size: 12px; line-height: 1.65;
  overflow: auto; max-height: 320px;
  white-space: pre-wrap; word-break: break-all;
}

/* ---------------- 配置页 ---------------- */
.group-title {
  display: flex; gap: 9px; align-items: center;
  font-size: 13.5px; font-weight: 750; color: var(--ink-2);
  margin: 22px 0 2px; padding-bottom: 9px;
  border-bottom: 1px solid var(--line-2);
}
.group-title:first-child { margin-top: 6px; }
.group-title .gd { width: 9px; height: 9px; border-radius: 3px; }
.group-title .gn { font-size: 11.5px; color: var(--muted); font-weight: 500; }

.fld { padding: 14px 0; border-bottom: 1px dashed var(--line); }
.fld:last-child { border-bottom: 0; }
.fld .k {
  display: flex; gap: 9px; align-items: center;
  flex-wrap: wrap; margin-bottom: 7px;
}
.fld .key { font-family: Consolas, monospace; font-size: 13px; font-weight: 700; color: var(--ink); }
.fld .hint { font-size: 12px; color: var(--muted); margin-top: 6px; }

input[type=text] {
  width: 100%; border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px;
  font-size: 13.5px; font-family: Consolas, monospace;
  background: var(--surface-2); color: var(--ink);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input[type=text]:focus {
  outline: none; border-color: var(--brand);
  background: #fff; box-shadow: 0 0 0 3px rgba(91, 107, 192, .15);
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color: #fff; border: 0; border-radius: 11px;
  padding: 11px 26px; font-size: 14.5px; font-weight: 650;
  font-family: var(--font); cursor: pointer;
  box-shadow: 0 8px 18px -9px var(--brand);
  transition: transform .12s, box-shadow .12s, opacity .12s;
}
.btn:hover { opacity: .93; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.savebar {
  position: sticky; bottom: 16px; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 15px; padding: 13px 17px;
  box-shadow: var(--sh); margin-top: 24px;
}
.savebar .st { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.savebar .st b { color: var(--ink-2); }

.note {
  color: var(--muted); font-size: 12.5px;
  line-height: 1.75; margin-top: 14px;
}
.note b { color: var(--ink-2); }

.err {
  background: var(--bad-soft); color: #A3403F;
  border-radius: 12px; padding: 10px 15px;
  font-size: 13.5px; margin-bottom: 14px;
}

/* ---------------- 空状态 ---------------- */
.empty { padding: 40px 10px; text-align: center; color: var(--muted); font-size: 13.5px; }
.empty .ei {
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--surface-2); border: 1px dashed var(--line);
  display: grid; place-items: center;
  margin: 0 auto 12px; color: var(--muted);
}

/* ---------------- 登录页 ---------------- */
.login-body {
  display: grid; place-items: center; min-height: 100vh; width: 100%;
  padding: 24px;
  background:
    radial-gradient(1000px 520px at 82% -12%, rgba(124, 138, 224, .38), transparent 60%),
    radial-gradient(820px 500px at -12% 112%, rgba(233, 167, 86, .26), transparent 55%),
    linear-gradient(155deg, #262B47 0%, #363D6E 55%, #4A5493 100%);
}
.login-card {
  width: 392px; max-width: 100%;
  background: rgba(255, 255, 255, .98);
  border-radius: 22px; padding: 36px 34px 30px;
  box-shadow: 0 40px 80px -30px rgba(8, 12, 40, .65), 0 0 0 1px rgba(255, 255, 255, .5);
}
.login-card .lt {
  width: 54px; height: 54px; border-radius: 16px;
  background: linear-gradient(135deg, #7C8AE0, #5B6BC0);
  color: #fff; font-weight: 800; font-size: 26px;
  display: grid; place-items: center; margin-bottom: 16px;
  box-shadow: 0 12px 26px -10px rgba(91, 107, 192, .8);
}
.login-card h1 { font-size: 21px; font-weight: 780; letter-spacing: .01em; }
.login-card .lsub { color: var(--muted); font-size: 12.5px; margin: 3px 0 22px; letter-spacing: .04em; }
.login-card label { display: block; margin-bottom: 15px; font-size: 13px; font-weight: 650; }
.login-card label input {
  width: 100%; margin-top: 6px;
  border: 1px solid var(--line); border-radius: 11px;
  padding: 11px 13px; font-size: 14.5px;
  background: var(--surface-2); font-family: var(--font);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.login-card label input:focus {
  outline: none; border-color: var(--brand);
  background: #fff; box-shadow: 0 0 0 3px rgba(91, 107, 192, .15);
}
.login-card .lbtn {
  width: 100%; margin-top: 6px;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color: #fff; border: 0; border-radius: 12px;
  padding: 13px; font-size: 15.5px; font-weight: 700;
  cursor: pointer; font-family: var(--font);
  box-shadow: 0 12px 24px -10px var(--brand);
  transition: transform .12s, opacity .12s;
}
.login-card .lbtn:hover { opacity: .94; transform: translateY(-1px); }
.login-card .ltip {
  text-align: center; color: var(--muted);
  font-size: 12px; margin-top: 16px; line-height: 1.7;
}
.login-warn {
  background: var(--warn-soft); color: #8A6420;
  border: 1px solid #F0E0BC; border-radius: 11px;
  padding: 10px 13px; font-size: 12.5px; margin-bottom: 16px; line-height: 1.7;
}
.login-err {
  background: var(--bad-soft); color: #A3403F;
  border-radius: 11px; padding: 10px 13px;
  font-size: 13px; margin-bottom: 16px;
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 880px) {
  body { flex-direction: column; }
  .side {
    width: 100%; height: auto; position: static;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    padding: 12px 14px; gap: 4px;
  }
  .brand { padding: 0 12px 0 2px; }
  .nav-cap { display: none; }
  .nav { padding: 8px 12px; margin-bottom: 0; }
  .side-foot { margin-top: 0; margin-left: auto; flex-direction: row; align-items: center; }
  .who { padding: 6px 10px; }
  .logout { width: auto; padding: 8px 14px; }
  .top { padding: 13px 16px; }
  .content { padding: 16px 14px 36px; }
  .panel-b { padding: 6px 12px 12px; }
  .ev-row { grid-template-columns: minmax(100px, 150px) 1fr 60px; gap: 10px; }
}