:root {
  color-scheme: dark;
  --bg: #06101d;
  --panel: rgba(13, 28, 45, 0.84);
  --panel-strong: rgba(17, 38, 61, 0.94);
  --line: rgba(151, 209, 255, 0.18);
  --text: #eaf6ff;
  --muted: #9ab5c8;
  --accent: #9bddff;
  --danger: #ff8fa3;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top, rgba(47, 110, 153, 0.32), transparent 34rem), var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select {
  font: inherit;
}

button {
  min-height: 42px;
  border: 1px solid rgba(155, 221, 255, 0.28);
  border-radius: 8px;
  background: rgba(104, 188, 231, 0.18);
  color: var(--text);
  cursor: pointer;
}

button:hover {
  background: rgba(104, 188, 231, 0.28);
}

button.ghost {
  background: transparent;
}

button.danger {
  border-color: rgba(255, 143, 163, 0.32);
  color: var(--danger);
}

button.restore {
  color: var(--accent);
}

input,
select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(155, 221, 255, 0.22);
  border-radius: 8px;
  background: rgba(2, 10, 20, 0.56);
  color: var(--text);
  padding: 0 12px;
  outline: none;
}

label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.admin-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 28px 18px 44px;
}

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

.admin-header h1 {
  margin: 0;
  font-size: clamp(26px, 6vw, 40px);
  letter-spacing: 0;
}

.admin-kicker,
.admin-status {
  margin: 0 0 6px;
  color: var(--muted);
}

.admin-panel,
.admin-list-wrap {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  backdrop-filter: blur(14px);
  padding: 16px;
  margin-bottom: 14px;
}

.admin-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.admin-token-panel {
  grid-template-columns: minmax(0, 1fr) auto;
}

.admin-user-panel {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr) auto;
}

.admin-user-panel h2,
.admin-user-panel p {
  margin: 0;
}

.admin-panel-kicker {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 5px;
}

.admin-actions {
  display: flex;
  gap: 8px;
}

.admin-filters {
  grid-template-columns: 140px 170px minmax(0, 1.4fr) 100px auto;
}

.admin-advanced {
  border: 1px solid rgba(151, 209, 255, 0.12);
  border-radius: 10px;
  background: rgba(13, 28, 45, 0.46);
  color: var(--muted);
  margin: -4px 0 14px;
}

.admin-advanced summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  cursor: pointer;
  color: var(--accent);
}

.admin-advanced-body {
  display: grid;
  gap: 10px;
  padding: 0 16px 16px;
}

.admin-advanced-body p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.admin-advanced .admin-nested {
  border: 0;
  background: transparent;
  margin: 0;
  padding: 0 16px 16px;
  backdrop-filter: none;
}

.admin-search-actions {
  align-self: end;
}

.admin-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  color: var(--muted);
}

.admin-list-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
}

.admin-list {
  display: grid;
  gap: 10px;
}

.comment-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  padding: 14px;
  display: grid;
  gap: 10px;
}

.comment-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
}

.comment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.comment-name {
  color: var(--text);
  font-weight: 700;
}

.comment-content {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.65;
}

.comment-content mark {
  border-radius: 4px;
  background: rgba(155, 221, 255, 0.2);
  color: var(--text);
  padding: 0 2px;
}

.comment-sub {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
}

.comment-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  justify-self: end;
  margin-top: 2px;
}

.comment-actions button {
  min-height: 30px;
  min-width: 72px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 13px;
}

.empty-state {
  padding: 28px;
  text-align: center;
  color: var(--muted);
}

.hidden {
  display: none !important;
}

@media (max-width: 760px) {
  .admin-header,
  .admin-panel,
  .admin-filters,
  .admin-token-panel,
  .admin-user-panel,
  .comment-top {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .admin-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .comment-actions {
    justify-self: end;
  }
}

/* ===== 顶栏改版：页签切换（评论/弹幕）+ 右侧小齿轮，去掉大标题 ===== */
.admin-header--bar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.admin-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(13, 28, 45, 0.6);
}

.admin-tab {
  min-height: 34px;
  padding: 5px 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
}

.admin-tab.is-active {
  background: rgba(104, 188, 231, 0.24);
  color: var(--text);
}

.admin-header--bar .admin-status {
  flex: 1 1 auto;
  margin: 0;
  text-align: right;
  font-size: 12px;
  opacity: 0.8;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-gear {
  flex: 0 0 auto;
  width: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 50%;
  font-size: 17px;
  line-height: 1;
}

/* 高级设置收进齿轮：面板本体保留，摘要行隐藏（只能由齿轮开合） */
#advancedBox > summary {
  display: none;
}

#advancedBox {
  margin-top: 0;
}

/* ===== 精致化第二轮：按钮全面收小、闭合的高级设置不占行、弹幕筛选一行、齿轮贴页签 ===== */
button {
  min-height: 34px;
  padding: 6px 14px;
  font-size: 13px;
}

input,
select {
  min-height: 36px;
  font-size: 13px;
}

/* 收起状态的高级设置完全不占空间（只能由齿轮打开） */
#advancedBox:not([open]) {
  display: none;
}

.admin-gear {
  width: 34px;
  min-height: 34px;
  font-size: 15px;
}

/* 弹幕筛选：作品ID + 数量 + 查询 一行放齐 */
.admin-panel.admin-filters--danmaku {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
}

.admin-filters--danmaku label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.admin-filters--danmaku .dmk-work {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-filters--danmaku .dmk-limit {
  flex: 0 0 76px;
}

.admin-filters--danmaku button {
  flex: 0 0 auto;
}

.admin-search-actions button {
  min-height: 32px;
  padding: 5px 16px;
}

/* 页签簇按内容收窄，不被弹性布局拉伸 */
.admin-tabs {
  flex: 0 0 auto;
  width: max-content;
}

/* ===== 评论卡片改版：与弹幕同版式；次要信息由「显示详情」开关控制（默认隐藏） ===== */
.comment-work-line {
  font-weight: 600;
}

.comment-secondary {
  display: none;
  font-size: 12px;
  color: var(--muted);
}

.admin-list.show-secondary .comment-secondary {
  display: block;
}

.admin-mini-toggle {
  min-height: 28px;
  padding: 3px 12px;
  font-size: 12px;
  margin-left: auto;
  margin-right: 10px;
}

/* ==================== 数据看板 ==================== */
.stats-toolbar {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.stats-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.stats-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

@media (max-width: 1080px) {
  .stats-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .stats-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.stats-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.stats-kpi-label {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  opacity: 0.6;
}

.stats-kpi-value {
  font-size: clamp(17px, 1.7vw, 24px);
  font-weight: 600;
  line-height: 1.2;
}

.stats-kpi-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 16px;
  font-size: 11.5px;
}

.stats-delta.up { color: #6ee7a8; }
.stats-delta.down { color: #ff8b84; }
.stats-delta.flat { opacity: 0.5; }
.stats-hint { opacity: 0.45; }

.stats-card {
  /* .admin-panel 是给筛选表单用的三列 grid，卡片要还原成上下堆叠 */
  display: block;
  margin-bottom: 14px;
}

.stats-card h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 15px;
}

.stats-sub {
  font-size: 11.5px;
  font-weight: 400;
  opacity: 0.5;
}

.stats-svg {
  width: 100%;
  height: 160px;
  display: block;
}

.stats-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.5;
}

.stats-empty {
  margin: 0;
  padding: 18px 0;
  text-align: center;
  font-size: 13px;
  opacity: 0.55;
}

/* 表格：宽内容自己横向滚，页面本身不横向滚 */
.stats-table-wrap { overflow-x: auto; }

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

.stats-table th,
.stats-table td {
  padding: 8px 10px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.stats-table th:first-child,
.stats-table td:first-child {
  text-align: left;
  white-space: normal;
}

.stats-table thead th {
  font-size: 11.5px;
  font-weight: 500;
  opacity: 0.6;
}

.stats-th { cursor: pointer; user-select: none; }
.stats-th:hover { opacity: 0.95; }

/* 作品名单元格：底层一条播放量占比横条（Plausible 式，比独立图表省空间） */
.stats-work {
  position: relative;
  min-width: 220px;
  max-width: 420px;
}

.stats-bar {
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  border-radius: 4px;
  background: rgba(74, 168, 255, 0.14);
  z-index: 0;
}

.stats-work-title,
.stats-work-cat {
  position: relative;
  z-index: 1;
}

.stats-work-title { display: block; }

.stats-work-cat {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  opacity: 0.45;
}

.stats-table td small {
  display: block;
  font-size: 10.5px;
  opacity: 0.42;
}

/* 完播率对比同板块均值：高于绿、低于红 —— 跨板块不可比，助眠类天然偏高 */
.stats-table td.good { color: #6ee7a8; }
.stats-table td.weak { color: #ffb28b; }

@media (max-width: 640px) {
  .stats-kpi-value { font-size: 20px; }
  .stats-work { min-width: 160px; }
}

/* ---- 工具条：压成一行，不再占整块面板 ---- */
.stats-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.stats-toolbar select {
  /* 全局 select 是 width:100%，这里必须显式收窄，否则每个占一整行 */
  width: auto;
  flex: 0 0 auto;
  min-width: 106px;
  height: 36px;
  padding: 0 10px;
  font-size: 13px;
  box-sizing: border-box;
}

.stats-toolbar button { flex: 0 0 auto; }

/* 刷新按钮：与下拉框等高，横向收窄并降低填充感——它有底色，同尺寸下视觉更重 */
.stats-refresh {
  margin-left: auto;   /* 吃掉中间空白，把刷新按钮顶到本行最右 */
  height: 36px;
  min-height: 36px;
  padding: 0 13px;
  font-size: 12.5px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.stats-refresh:hover { background: rgba(255, 255, 255, 0.1); }

/* 更新时间单独占第二行，靠右，上下留点间距 */
.stats-updated-row {
  margin: 6px 0 14px;
  text-align: right;
}

.stats-updated {
  font-size: 11.5px;
  opacity: 0.45;
  white-space: nowrap;
}

/* ---- 漏斗与时段并排；窄屏自动堆叠 ---- */
.stats-grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}

.funnel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}

.funnel-label {
  flex: 0 0 66px;
  font-size: 12px;
  opacity: 0.7;
}

.funnel-track {
  flex: 1 1 auto;
  height: 20px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.funnel-fill {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(74, 168, 255, 0.75), rgba(74, 168, 255, 0.4));
}

.funnel-value {
  flex: 0 0 72px;
  text-align: right;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.funnel-drop {
  margin-left: 5px;
  font-size: 10.5px;
  color: #ffb28b;
}

/* ---- 活跃时段 7×24 ---- */
.hours-grid {
  display: grid;
  grid-template-columns: 18px repeat(24, 1fr);
  gap: 2px;
  align-items: center;
}

.hours-day {
  font-size: 10.5px;
  opacity: 0.5;
  text-align: center;
}

.hours-cell {
  aspect-ratio: 1;
  min-height: 9px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.05);
}

/* 色阶拉大对比，低=深靛蓝、高=亮青，各档一眼能分清（看数据为主） */
.hours-cell.lv0 { background: rgba(255, 255, 255, 0.05); }
.hours-cell.lv1 { background: #1e4a7a; }
.hours-cell.lv2 { background: #2f7fd0; }
.hours-cell.lv3 { background: #4db3f0; }
.hours-cell.lv4 { background: #8fe3ff; }

/* 点/悬停某格：该小时整列高亮当竖轴，一眼认出这列是几点 */
.hours-cell.is-hl {
  outline: 1px solid #ffd479;
  outline-offset: -1px;
}

/* 列读数行：显示"周几 几点–几点 · 播放 N 次"；未点时是浅色引导文案 */
.hours-readout {
  margin: 6px 0 2px;
  min-height: 18px;
  font-size: 12px;
  color: rgba(230, 239, 255, 0.45);
}

.hours-readout.is-active {
  color: #ffd479;
}

.hours-axis {
  display: flex;
  justify-content: space-between;
  margin: 6px 0 0 20px;
  font-size: 10.5px;
  opacity: 0.4;
}

/* 颜色图例：少 ▢▢▢▢▢ 多 */
.hours-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 10px 0 0 20px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hours-legend .hours-cell {
  width: 15px;
  height: 15px;
  min-height: 0;
  aspect-ratio: auto;
  flex: 0 0 auto;
}

.hours-legend-cap {
  font-size: 11px;
  opacity: 0.55;
}
.hours-legend-cap:first-child { margin-right: 2px; }
.hours-legend-cap:last-child { margin-left: 4px; }

/* ---- 单作品下钻 ---- */
.stats-table tbody tr.is-clickable { cursor: pointer; }
.stats-table tbody tr.is-clickable:hover { background: rgba(255, 255, 255, 0.03); }

.stats-detail-row td { background: rgba(0, 0, 0, 0.16); }

.stats-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  padding: 4px 2px;
}

.mini-funnel {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
}

.mini-step { text-align: center; opacity: 0.75; }
.mini-step b { display: block; font-size: 14px; opacity: 1; }
.mini-arrow { opacity: 0.3; }

.mini-trend {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 30px;
}

.mini-trend-label {
  align-self: center;
  margin-right: 6px;
  font-size: 11px;
  opacity: 0.45;
}

.mini-bar {
  width: 6px;
  border-radius: 2px 2px 0 0;
  background: rgba(74, 168, 255, 0.6);
}

.mini-note {
  width: 100%;
  font-size: 11.5px;
  color: #ffb28b;
  opacity: 0.85;
}

/* ---- 趋势图游标：划过/滑动看每天明细 ---- */
.trend-wrap {
  position: relative;
  touch-action: pan-y;      /* 竖向仍可滚页面，横向手势归游标 */
  cursor: crosshair;
}

.trend-cursor-line {
  stroke: rgba(255, 255, 255, 0.32);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0;
  pointer-events: none;
}

.trend-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #4aa8ff;
  box-shadow: 0 0 0 3px rgba(74, 168, 255, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.trend-tip {
  position: absolute;
  top: -6px;
  transform: translate(-50%, -100%);
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(16, 26, 44, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  font-size: 14px;
  line-height: 1.55;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.trend-tip b {
  display: block;
  font-size: 12px;
  opacity: 0.65;
  font-weight: 500;
}

.trend-tip small {
  display: block;
  opacity: 0.6;
}

/* 活跃时段的时区下拉：小巧，挨在卡片标题右侧 */
.stats-tz {
  width: auto;
  min-width: 0;
  margin-left: 10px;
  height: 26px;
  padding: 0 6px;
  font-size: 12px;
  vertical-align: middle;
  border-radius: 7px;
}

/* ---- 板块多选下拉（details/summary 实现，点开是一列勾选）---- */
.stats-multi {
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
}

.stats-multi > summary {
  list-style: none;
  cursor: pointer;
  height: 36px;
  min-width: 96px;
  padding: 0 26px 0 10px;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
  white-space: nowrap;
  position: relative;
}

.stats-multi > summary::-webkit-details-marker { display: none; }

.stats-multi > summary::after {
  content: "▾";
  position: absolute;
  right: 9px;
  opacity: 0.55;
  font-size: 11px;
}

/* 活跃时段里那个小一号 */
.stats-multi--sm > summary {
  height: 26px;
  min-width: 84px;
  font-size: 12px;
}

.stats-multi-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  min-width: 150px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(12, 22, 38, 0.98);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(18px);
}

/* 活跃时段的菜单靠右对齐，避免超出卡片 */
.stats-multi--sm .stats-multi-menu { left: auto; right: 0; }

/* 板块菜单展开时，把所在的工具条/卡片抬到上层，否则会被下方卡片盖住 */
.stats-toolbar:has(.stats-multi[open]),
.stats-card:has(.stats-multi[open]) {
  position: relative;
  z-index: 60;
}

.stats-multi-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 7px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

/* 全局 input 是 width:100%;min-height:42px，会把勾选框撑成大方块，这里强制复位 */
.stats-multi-item input[type="checkbox"] {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--accent-strong);
}

.stats-multi-all {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 4px;
  padding-bottom: 8px;
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .stats-multi-item:hover { background: rgba(255, 255, 255, 0.06); }
}

/* ── 管理员行内回复框 ── */
.admin-reply-box {
  grid-column: 1 / -1;
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

.admin-reply-input {
  width: 100%;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid rgba(155, 221, 255, 0.22);
  border-radius: 8px;
  background: rgba(10, 22, 34, 0.6);
  color: inherit;
  font: inherit;
  font-size: 16px; /* <16px 会触发 iOS 聚焦整页放大，可打字控件一律 ≥16px */
  resize: vertical;
}

.admin-reply-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.admin-reply-actions button {
  min-height: 30px;
  min-width: 72px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 13px;
}

/* 「回复我的」卡片里引用自己原评论 */
.admin-my-quote {
  padding: 5px 9px;
  border-left: 2px solid rgba(245, 197, 24, 0.5);
  border-radius: 0 6px 6px 0;
  background: rgba(245, 197, 24, 0.06);
  color: rgba(230, 236, 255, 0.72);
  font-size: 12.5px;
  line-height: 1.5;
}

/* 铁律：所有可打字控件字号 ≥16px——iOS Safari 对 <16px 的输入框聚焦时会整页自动放大（2026-08-17 董事长拍板） */
input,
select,
textarea {
  font-size: 16px;
}

/* ── 顶栏页签收窄（2026-08-17）：四个 Tab 不再大内距撑宽，小屏上齿轮不许被挤到第二行 ── */
.admin-header--bar {
  flex-wrap: nowrap;
}

.admin-tab {
  padding: 5px 14px;
  white-space: nowrap;
}

@media (max-width: 430px) {
  .admin-tabs {
    gap: 2px;
    padding: 3px;
  }
  .admin-tab {
    padding: 5px 10px;
    font-size: 13px;
  }
}

/* ── 顶栏齿轮靠右 + 列表头两行制（2026-08-17）──
   标题独占一行；按钮固定靠左、计数固定靠右——切换开关时文字长短变化不再挤动按钮位置 */
.admin-header--bar .admin-status {
  order: 2;
}

.admin-header--bar .admin-gear {
  order: 3;
}

.admin-list-head {
  justify-content: flex-start;
  gap: 8px;
}

/* 「全部最新评论」标题无信息量，隐藏（2026-08-17 董事长拍板）：
   评论列表头只留一行——左边开关按钮、右边条数 */
#resultTitle {
  display: none;
}

#resultCount,
#danmakuCount,
#repliesCount {
  margin-left: auto;
  white-space: nowrap;
}

/* 列表头按钮紧挨着排：清掉 mini-toggle 的 auto 边距（两个按钮各带 auto 会把空间瓜分出大空隙），
   右侧空间统一交给条数的 margin-left:auto */
.admin-mini-toggle {
  margin-left: 0;
  margin-right: 0;
}

/* ── 显示设置弹窗 + 已回复标注 + 标题悬挂缩进（2026-08-17）── */
.display-prefs-wrap {
  position: relative;
}

.display-prefs-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 168px;
  padding: 10px 14px;
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-strong);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

.display-prefs-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
}

.display-prefs-panel input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
}

/* 详情行改为按勾选常显（旧的 show-secondary 开关机制废弃） */
#commentsList .comment-secondary {
  display: block;
}

/* 已回复过的评论：标题行小标注 */
.replied-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 8px;
  border: 1px solid rgba(155, 221, 255, 0.4);
  background: rgba(104, 188, 231, 0.14);
  color: var(--accent);
  font-size: 11px;
  font-weight: 400;
  vertical-align: 2px;
  white-space: nowrap;
}

/* 标题以【《（开头时悬挂缩进，视觉左缘对齐普通标题 */
.hang-bracket {
  text-indent: -0.6em;
}

/* 「已回复」展开的我的回复内容区 */
.my-replies-view {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

button.replied-badge {
  min-height: auto;
  cursor: pointer;
}

/* ── 已回复展开区：已读徽章 + 编辑（2026-08-18）── */
.admin-my-quote {
  display: block;
}

.admin-my-quote .my-reply-text {
  display: block;
  line-height: 1.6;
}

.my-reply-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 7px;
}

.admin-my-quote .my-reply-text.deleted {
  color: #7a8899;
  text-decoration: line-through;
}

/* 已读状态：纯文字淡色，不做胶囊（避免和按钮同排大小打架） */
.read-badge {
  flex: none;
  font-size: 12px;
  color: #7f93a8;
}

.read-badge.read {
  color: #5ed295;
}

/* 编辑按钮：跟评论卡按钮家族同款（7px 圆角），略小一号 */
.my-reply-edit {
  flex: none;
  min-height: 26px;
  min-width: 56px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 12px;
  background: rgba(17, 43, 70, 0.72);
  color: #cfe3f5;
  border: 1px solid rgba(136, 203, 247, 0.22);
  cursor: pointer;
}

.admin-my-quote .admin-reply-box {
  margin-top: 8px;
}

.comment-sub.has-replied-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.comment-sub.has-replied-badge .replied-badge {
  margin-left: 0;
  flex: none;
  white-space: nowrap;
}


/* ── 评论列表分页条（2026-08-18）── */
.admin-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 12px;
}

.pager-nums {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.admin-pager:empty {
  display: none;
}

.admin-pager button {
  min-height: 30px;
  min-width: 34px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 13px;
}

.admin-pager button.current {
  background: rgba(104, 188, 231, 0.22);
  border-color: rgba(155, 221, 255, 0.5);
  color: var(--accent);
  cursor: default;
}

.admin-pager button:disabled {
  opacity: 0.4;
  cursor: default;
}

.pager-dots {
  color: #7f93a8;
  padding: 0 2px;
}

/* ── 播放趋势柱状图（2026-08-18 推特式改版）── */
.stats-svg-bars {
  width: 100%;
  height: auto;
  display: block;
}

/* 防触摸长按进入文字选中态；保留纵向滚动 */
.trend-wrap {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;
}

.trend-band {
  opacity: 0;
  transition: opacity 0.12s ease;
}

.trend-bar {
  transition: opacity 0.12s ease;
}

.trend-metric {
  min-height: 24px;
  padding: 0 10px;
  margin-right: 6px;
  border-radius: 6px;
  font-size: 12px;
  background: rgba(17, 43, 70, 0.5);
  color: #8fa4b8;
  border: 1px solid rgba(136, 203, 247, 0.16);
  cursor: pointer;
}

.trend-metric.on {
  background: rgba(74, 168, 255, 0.18);
  border-color: rgba(74, 168, 255, 0.45);
  color: #9ed0ff;
  cursor: default;
}


/* 上新日图例与气泡上新行 */
.trend-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #ffc65c;
  margin-right: 5px;
  vertical-align: -1px;
}

.trend-tip .tip-debut {
  display: block;
  color: #ffc65c;
  margin-top: 2px;
  max-width: 220px;
  white-space: normal;
}

/* ── 评论页子页签 + 筛选弹窗 + 点赞聚合行（2026-08-19）── */
.admin-subtabs {
  display: flex;
  gap: 6px;
  margin: 0 0 12px;
  flex-wrap: wrap;
}

/* 小号胶囊：四个要在手机上排进同一行；选中态只变颜色亮度，尺寸/字重一律不变 */
.admin-subtab {
  min-height: 26px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(13, 28, 45, 0.6);
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.admin-subtab.is-active {
  background: rgba(104, 188, 231, 0.26);
  border-color: rgba(104, 188, 231, 0.55);
  color: var(--text);
}

.subtab-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  margin-left: 4px;
  padding: 0 3px;
  border-radius: 999px;
  background: #e5484d;
  color: #fff;
  font-size: 10px;
  line-height: 1;
}

@media (max-width: 380px) {
  .admin-subtabs {
    gap: 4px;
  }
  .admin-subtab {
    padding: 3px 8px;
  }
}

/* 筛选弹窗：沿用显示设置弹窗外壳，装表单字段要更宽 */
.filters-panel {
  min-width: 252px;
  max-width: calc(100vw - 40px);
}

.filters-panel label {
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
}

.filters-panel select,
.filters-panel input {
  width: 100%;
}

.filters-panel .admin-search-actions {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

.replies-likes-line {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(13, 28, 45, 0.5);
  color: var(--muted);
  font-size: 13px;
}

/* ── 返回顶部悬浮按钮（2026-08-19）：下滑超过一屏出现，贴右下角避开 iPhone 底条 ── */
.back-top-btn {
  position: fixed;
  right: 26px;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(13, 28, 45, 0.85);
  color: var(--text);
  font-size: 21px;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.back-top-btn:active {
  background: rgba(104, 188, 231, 0.26);
}

/* 作品排行时间维度胶囊（2026-08-25）：贴 h3 右侧 */
.works-range {
  display: inline-flex;
  margin-left: auto;
}

.works-range .trend-metric {
  margin-right: 0;
  margin-left: 6px;
}

/* 排行五档胶囊在窄屏挤不下时整组折行，不许横向溢出 */
.stats-card h3 {
  flex-wrap: wrap;
}

.works-range {
  flex-wrap: wrap;
  row-gap: 6px;
}

/* KPI 区可点切换昨日视图（2026-08-27） */
#statsKpis {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.kpi-day-tag {
  color: #9ed0ff;
  font-weight: 600;
}

/* KPI 卡=趋势图选择器（2026-08-31）：选中卡高亮 */
.stats-kpi.on {
  border-color: rgba(74, 168, 255, 0.55);
  background: rgba(74, 168, 255, 0.08);
}

.trend-legend-new i {
  background: #4aa8ff !important;
}

.trend-legend-dim i {
  background: rgba(74, 168, 255, 0.32) !important;
}

/* 「去评论区」返回定位高亮（2026-09-01） */
.return-flash {
  box-shadow: 0 0 0 2px rgba(74, 168, 255, 0.65);
  border-radius: 10px;
}