/* ===================================================================
   后台看板样式
   =================================================================== */
.shell.wide { max-width: 1180px; }

.admin-head {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 26px;
}

.admin-title h1 {
  font-family: Georgia, "Songti SC", serif;
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 600;
  letter-spacing: .06em;
  background: linear-gradient(180deg, #fff8ea, var(--gold) 70%, #b98f4e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.admin-title .sub {
  margin-top: 6px;
  font-size: 10.5px;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

.head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.head-actions .btn {
  padding: 9px 16px;
  font-size: 13px;
  text-decoration: none;
}

/* ---------------- 统计卡 ---------------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.stat {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(160deg, var(--panel), var(--panel-2));
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}

.stat .label {
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: .12em;
}

.stat .value {
  margin-top: 4px;
  font-family: Georgia, serif;
  font-size: 28px;
  line-height: 1.2;
  color: var(--gold-soft);
  font-variant-numeric: tabular-nums;
}

.stat .value small {
  margin-left: 4px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .04em;
}

.stat .value.text {
  font-family: inherit;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------- 面板 ---------------- */
/* 一道题一张卡片，三列自动降级（1180 容器下正好三列两行）；
   同一行的卡片由 grid 拉到等高，矮的那张底部留白即可 */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

/* style.css 里 `.card + .card { margin-top:16px }` 本来是给竖向堆叠用的，
   进 grid 后会把第二列起整排往下推 16px，第一张卡就比同排的高出一截，这里清掉 */
.grid-2 > .panel { margin-top: 0; }

.panel { padding: 18px 20px 20px; }

.panel h3 {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .1em;
  color: rgba(246, 220, 174, .9);
  margin-bottom: 14px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panel-head h3 { margin-bottom: 0; }

.divider {
  height: 1px;
  margin: 14px 0;
  background: linear-gradient(90deg, transparent, rgba(227, 189, 124, .2), transparent);
}

.muted { color: var(--muted); font-size: 12px; }

/* ---------------- 条形图 ---------------- */
.bars {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.bar-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 74px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.bar-row .name {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-track {
  height: 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .055);
  overflow: hidden;
}

.bar-track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, #7c5cff, #e3bd7c);
  transition: width .6s cubic-bezier(.22, .8, .3, 1);
}

.bar-row .count {
  text-align: right;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bar-row.hot .bar-track i { background: linear-gradient(90deg, #ff6b5e, #ffb36b); }
.bar-row.hot .count { color: #ffab8f; }

/* 末行合计：人数基准 + 100%，给每道题一个明确的「分母」 */
.bar-row.total {
  margin-top: 3px;
  padding-top: 9px;
  border-top: 1px solid rgba(227, 189, 124, .16);
}

.bar-row.total .name { color: rgba(246, 220, 174, .7); letter-spacing: .06em; }
.bar-row.total .bar-track { visibility: hidden; }
.bar-row.total .count { color: var(--gold-soft, #e3bd7c); font-weight: 600; }

.bars-empty { color: var(--muted); font-size: 12.5px; padding: 4px 0; }

/* ---------------- 表格 ---------------- */
.table-panel { padding: 18px 0 6px; }

.table-panel .panel-head { padding: 0 20px; margin-bottom: 14px; }

.table-wrap {
  overflow-x: auto;
  border-top: 1px solid rgba(227, 189, 124, .12);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}

th, td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

th {
  position: sticky;
  top: 0;
  background: rgba(18, 13, 31, .98);
  color: rgba(246, 220, 174, .75);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .08em;
}

td { color: #d7d1e6; }

tbody tr:hover td { background: rgba(227, 189, 124, .05); }

td.id { color: var(--gold); font-variant-numeric: tabular-nums; }
td.nick { color: #fff; font-weight: 600; }

.pill {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 20px;
  border: 1px solid rgba(139, 111, 251, .38);
  background: rgba(139, 111, 251, .14);
  color: #c3b6ff;
  font-size: 11.5px;
}

.empty {
  padding: 26px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 560px) {
  .bar-row { grid-template-columns: 78px minmax(0, 1fr) 66px; font-size: 12.5px; }
  .stat .value { font-size: 24px; }
  .head-actions { width: 100%; }
  .head-actions .btn { flex: 1; }
}