/* ============================================================
   BiliSummary 管理后台共用设计层
   ------------------------------------------------------------
   在每个管理页面「最先」加载，页面自身的 <style> 只保留该页独有的规则，
   靠层叠顺序覆盖这里的默认值。

   作用域：
   · 独立管理页  <body class="admin-view">
   · index.html  切到管理视图时由 setAdminView() 给 body 加上同名 class
   ============================================================ */

:root {
  --admin-bg: #f4f6f9;
  --admin-surface: #fff;
  --admin-surface-soft: #fafbfd;
  --admin-surface-sunken: #f5f7fa;
  --admin-border: #e5e8ef;
  --admin-border-soft: #eef0f5;
  --admin-border-strong: #d5dae3;
  --admin-text: #191b21;
  --admin-muted: #646b78;
  --admin-soft: #8b919d;
  --admin-brand: #7c5cff;
  --admin-brand-ink: #5b45c4;
  --admin-brand-soft: #f1edff;
  --admin-brand-gradient: linear-gradient(135deg, #7c5cff, #b564e8 52%, #ee84cb);
  --admin-ok: #157a52;
  --admin-ok-bg: #e8f7f0;
  --admin-warn: #9c5f16;
  --admin-warn-bg: #fdf3e3;
  --admin-bad: #b93b52;
  --admin-bad-bg: #fdeef1;
  --admin-info: #2f5fd0;
  --admin-info-bg: #eef3fe;
  --admin-r-lg: 12px;
  --admin-r: 9px;
  --admin-r-sm: 7px;
  --admin-shadow: 0 1px 2px rgba(23, 26, 38, .04), 0 6px 18px rgba(23, 26, 38, .045);
  --admin-ring: 0 0 0 3px rgba(124, 92, 255, .14);
  --admin-page-w: 1260px;
  --admin-font: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.premium-username {
  color: #a66f12 !important;
  background: linear-gradient(112deg, #704307 0%, #b77b13 28%, #f0d17a 50%, #b3750d 72%, #744607 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.42), 0 2px 8px rgba(177,116,17,.16);
}

/* ---------- 页面底座 ---------- */

body.admin-view {
  margin: 0;
  background: var(--admin-bg);
  background-image: none;
  color: var(--admin-text);
  font: 14px/1.5 var(--admin-font);
  -webkit-font-smoothing: antialiased;
}

/* 两条全局重置用 :where() 压到零特异度：它们只是兜底，任何页面规则（哪怕是
   单类选择器）都该赢过它们。否则 `font: inherit` 会反过来吃掉按钮的字号字重，
   顶栏导航胶囊和各页小按钮都会被打回 14px/400。 */
:where(body.admin-view) * { box-sizing: border-box; }
:where(body.admin-view) :where(button, input, select, textarea) { font: inherit; }

body.admin-view .page,
body.admin-view .container {
  width: 100%;
  max-width: var(--admin-page-w);
  margin: 0 auto;
  padding: 22px 22px 44px;
}

/* 页头：标题 + 说明 + 右侧操作 */
body.admin-view .page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

body.admin-view h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
}

body.admin-view .subtitle {
  margin-top: 5px;
  color: var(--admin-muted);
  font-size: 13px;
  line-height: 1.6;
}

body.admin-view .muted,
body.admin-view .hint { color: var(--admin-muted); }
body.admin-view .hint { font-size: 12px; line-height: 1.6; }

/* ---------- 卡片 ---------- */

body.admin-view .card {
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-r-lg);
  background: var(--admin-surface);
  box-shadow: var(--admin-shadow);
}

body.admin-view .card > :last-child { margin-bottom: 0; }

/* 卡片标题行：标题在左、说明或操作在右 */
body.admin-view .section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
  flex-wrap: wrap;
}

body.admin-view .card h2,
body.admin-view .card h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
}

body.admin-view .card h4 { margin: 0 0 6px; font-size: 13px; font-weight: 800; }

/* 卡片内的分区块（浅底小卡） */
body.admin-view .subcard {
  padding: 13px 14px;
  border: 1px solid var(--admin-border-soft);
  border-radius: var(--admin-r);
  background: var(--admin-surface-soft);
}

/* ---------- 指标磁贴 ---------- */

body.admin-view .metric-grid {
  display: grid;
  grid-template-columns: repeat(var(--metric-cols, 4), minmax(0, 1fr));
  gap: 10px;
}

body.admin-view .metric {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid var(--admin-border-soft);
  border-radius: var(--admin-r);
  background: var(--admin-surface-soft);
}

body.admin-view .metric span {
  display: block;
  color: var(--admin-muted);
  font-size: 12px;
}

body.admin-view .metric strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

/* ---------- 表格 ---------- */

body.admin-view .table-wrap {
  overflow: auto;
  border: 1px solid var(--admin-border-soft);
  border-radius: var(--admin-r);
  background: var(--admin-surface);
}

body.admin-view table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

body.admin-view th,
body.admin-view td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--admin-border-soft);
  text-align: left;
  vertical-align: middle;
}

body.admin-view th {
  color: var(--admin-muted);
  background: var(--admin-surface-sunken);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

body.admin-view tbody tr:last-child td { border-bottom: 0; }
body.admin-view tbody tr:hover td { background: #fafbfe; }

body.admin-view .compact-table th,
body.admin-view .compact-table td { padding: 7px 10px; font-size: 12px; }

body.admin-view .empty {
  padding: 30px 16px;
  color: var(--admin-muted);
  text-align: center;
  font-size: 13px;
}

/* 行内操作按钮组 */
body.admin-view .row-actions,
body.admin-view .split-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ---------- 表单 ---------- */

body.admin-view .field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

body.admin-view .field label,
body.admin-view .form-group label {
  color: #4b515c;
  font-size: 12px;
  font-weight: 700;
}

body.admin-view input:not([type='checkbox']):not([type='radio']):not([type='file']),
body.admin-view select,
body.admin-view textarea {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--admin-border-strong);
  border-radius: var(--admin-r-sm);
  color: var(--admin-text);
  background: var(--admin-surface);
  font-size: 13px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}

body.admin-view textarea { min-height: 84px; line-height: 1.6; resize: vertical; }

body.admin-view input:focus,
body.admin-view select:focus,
body.admin-view textarea:focus {
  border-color: #a897f0;
  box-shadow: var(--admin-ring);
}

body.admin-view input::placeholder,
body.admin-view textarea::placeholder { color: #a8adb8; }

body.admin-view .field small,
body.admin-view .form-group small {
  color: var(--admin-muted);
  font-size: 11px;
  line-height: 1.55;
}

/* ---------- 按钮 ---------- */

body.admin-view .primary,
body.admin-view .secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: var(--admin-r-sm);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .18s, border-color .18s, background .18s, color .18s;
}

body.admin-view .primary {
  border: 0;
  color: #fff;
  background: var(--admin-brand-gradient);
  box-shadow: 0 4px 12px rgba(124, 92, 255, .2);
}

body.admin-view .primary:hover { filter: brightness(1.05); }

body.admin-view .secondary {
  border: 1px solid var(--admin-border-strong);
  color: #4b515c;
  background: var(--admin-surface);
}

body.admin-view .secondary:hover {
  border-color: #b3a4ef;
  color: var(--admin-brand-ink);
  background: var(--admin-brand-soft);
}

body.admin-view .primary:disabled,
body.admin-view .secondary:disabled { opacity: .5; cursor: not-allowed; filter: none; }

/* 表格行内 / 密集区域的小号按钮 */
body.admin-view .row-actions button,
body.admin-view .btn-xs {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--admin-border-strong);
  border-radius: var(--admin-r-sm);
  color: #4b515c;
  background: var(--admin-surface);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}

body.admin-view .row-actions button:hover,
body.admin-view .btn-xs:hover {
  border-color: #b3a4ef;
  color: var(--admin-brand-ink);
  background: var(--admin-brand-soft);
}

body.admin-view .row-actions .danger,
body.admin-view .btn-xs.danger { color: var(--admin-bad); border-color: #f0ccd4; }
body.admin-view .row-actions .danger:hover,
body.admin-view .btn-xs.danger:hover { border-color: #e2a3b0; color: var(--admin-bad); background: var(--admin-bad-bg); }

/* 分段筛选（今日 / 7 天 / 全部…） */
body.admin-view .periods,
body.admin-view .filters,
body.admin-view .row,
body.admin-view .pager {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body.admin-view .periods button,
body.admin-view .filters button[data-status] {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--admin-border-strong);
  border-radius: var(--admin-r-pill, 999px);
  color: var(--admin-muted);
  background: var(--admin-surface);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}

body.admin-view .periods button:hover,
body.admin-view .filters button[data-status]:hover { border-color: #b3a4ef; color: var(--admin-brand-ink); }

body.admin-view .periods button.active,
body.admin-view .filters button[data-status].active {
  border-color: transparent;
  color: #fff;
  background: var(--admin-brand-gradient);
}

body.admin-view .pager {
  justify-content: flex-end;
  margin-top: 10px;
  color: var(--admin-muted);
  font-size: 12px;
}

/* 统一后台列表分页：页码紧凑，超过 10 页才显示省略号 */
body.admin-view .admin-list-pager {
  justify-content: flex-end;
  gap: 3px;
  margin-top: 10px;
  color: var(--admin-muted);
  font-size: 12px;
}

body.admin-view .admin-list-pager .admin-pager-info {
  margin-right: 4px;
  white-space: nowrap;
}

body.admin-view .admin-list-pager button.admin-page-btn {
  min-width: 24px;
  min-height: 24px;
  height: 24px;
  padding: 0 5px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

body.admin-view .admin-list-pager button.admin-page-btn.active {
  color: #fff;
  border-color: var(--admin-brand);
  background: var(--admin-brand-gradient);
}

body.admin-view .admin-list-pager .admin-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 24px;
}

body.admin-view .admin-list-pager .admin-page-search {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
  white-space: nowrap;
}

body.admin-view .admin-list-pager .admin-page-search input {
  flex: 0 0 48px;
  width: 48px;
  min-width: 48px;
  height: 24px;
  box-sizing: border-box;
  padding: 0 5px;
  font-size: 11px;
}

/* ---------- 状态标签 ---------- */

body.admin-view .pill,
body.admin-view .status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 9px;
  color: var(--admin-brand-ink);
  background: var(--admin-brand-soft);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.7;
  white-space: nowrap;
}

body.admin-view .pill.ok,
body.admin-view .status.ok { color: var(--admin-ok); background: var(--admin-ok-bg); }
body.admin-view .pill.warn,
body.admin-view .status.warn { color: var(--admin-warn); background: var(--admin-warn-bg); }
body.admin-view .pill.bad,
body.admin-view .status.bad { color: var(--admin-bad); background: var(--admin-bad-bg); }
body.admin-view .pill.off,
body.admin-view .status.off { color: var(--admin-soft); background: #f1f2f5; }

/* ---------- 弹层 ---------- */

body.admin-view .modal-mask {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(22, 24, 32, .4);
}

body.admin-view .modal,
body.admin-view .modal-card {
  width: min(760px, 100%);
  max-height: min(760px, 90vh);
  overflow: auto;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-r-lg);
  background: var(--admin-surface);
  box-shadow: 0 20px 60px rgba(18, 20, 30, .22);
}

/* 只统一外观，不碰 position/top/padding/margin —— 各页弹层的吸顶偏移是配合
   自身内边距算好的，覆盖会让标题栏压住第一行内容。 */
body.admin-view .modal-head,
body.admin-view .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--admin-border-soft);
  background: var(--admin-surface);
}

body.admin-view .modal-head h2,
body.admin-view .modal-header h3 { margin: 0; font-size: 16px; font-weight: 800; }

body.admin-view .modal-close,
body.admin-view .modal-head > button:last-child {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--admin-r-sm);
  color: var(--admin-muted);
  background: var(--admin-surface-sunken);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

body.admin-view .modal-close:hover { background: #ebedf2; }
body.admin-view .modal-body { padding: 16px 18px; }

/* ---------- 提示条 ---------- */

body.admin-view .toast {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 90;
  max-width: min(440px, calc(100vw - 32px));
  padding: 11px 17px;
  border-radius: var(--admin-r);
  color: #fff;
  background: #23262f;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
  font-size: 13px;
  text-align: center;
  transform: translate(-50%, -50%);
}

body.admin-view .notice {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #e4dcff;
  border-radius: var(--admin-r);
  background: var(--admin-brand-soft);
  color: #4d417f;
  font-size: 13px;
  line-height: 1.65;
}

body.admin-view .hidden { display: none !important; }

/* ---------- 窄屏 ---------- */

@media (max-width: 900px) {
  body.admin-view .page,
  body.admin-view .container { padding: 16px 14px 32px; }
  body.admin-view .page-head { align-items: stretch; flex-direction: column; }
  body.admin-view .metric-grid { --metric-cols: 2; }
}

@media (max-width: 560px) {
  body.admin-view .metric-grid { --metric-cols: 1; }
}
