/* ==========================================================================
   UGC 数据中枢 v2 · Data Components
   菜单 / 对话框 / 抽屉 / 复选框 / 筛选栏 / 数据表 / 卡片网格 / 图表 / 批量栏 / 登录页
   ========================================================================== */

/* ---------- Popover / Menu ---------- */
.popover-anchor { position: relative; display: inline-flex; }
.popover {
  position: fixed;
  z-index: var(--z-popover);
  min-width: 200px;
  max-width: calc(100vw - 24px);
  max-height: min(420px, 60vh);
  overflow: auto;
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  animation: pop-in var(--duration-fast) var(--ease-out);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  width: 100%;
  min-height: 32px;
  padding: 0 var(--space-2-5);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-align: left;
  white-space: nowrap;
}
.menu-item:hover:not(:disabled),
.menu-item.is-active { background: var(--surface-active); color: var(--text); }
.menu-item:disabled { opacity: 0.45; }
.menu-item--danger { color: var(--danger-fg); }
.menu-item__icon { flex: 0 0 auto; display: grid; place-items: center; width: 16px; color: var(--text-muted); }
.menu-item__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.menu-item__hint { flex: 0 0 auto; color: var(--text-subtle); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.menu-sep { height: 1px; margin: var(--space-1) 0; background: var(--border-subtle); }
.menu-label { padding: var(--space-1-5) var(--space-2-5) var(--space-1); font-size: var(--text-2xs); font-weight: var(--weight-medium); color: var(--text-subtle); }
.menu-search { padding: var(--space-1); position: sticky; top: calc(var(--space-1) * -1); background: var(--surface-raised); z-index: 1; }

/* ---------- Checkbox ---------- */
.checkbox {
  appearance: none;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.checkbox:hover { border-color: var(--text-subtle); }
.checkbox:checked,
.checkbox:indeterminate { background: var(--accent); border-color: var(--accent); }
.checkbox:checked::after {
  content: "";
  width: 8px;
  height: 4px;
  margin-top: -2px;
  border-left: 2px solid var(--accent-fg);
  border-bottom: 2px solid var(--accent-fg);
  transform: rotate(-45deg);
}
.checkbox:indeterminate::after { content: ""; width: 8px; height: 2px; background: var(--accent-fg); border-radius: 1px; }
.checkbox:focus-visible { box-shadow: var(--focus-ring); border-radius: 4px; }

/* ---------- Dialog ---------- */
.dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: var(--z-overlay);
  width: min(460px, calc(100vw - 24px));
  max-height: calc(100dvh - 48px);
  overflow: auto;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  animation: dialog-in var(--duration-base) var(--ease-out);
}
.dialog--wide { width: min(640px, calc(100vw - 24px)); }
@keyframes dialog-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(0.98); } }
.dialog__header { padding: var(--space-5) var(--space-5) 0; }
.dialog__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.dialog__desc { margin-top: var(--space-1-5); color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); white-space: pre-line; }
.dialog__body { padding: var(--space-4) var(--space-5); }
.dialog__footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding: 0 var(--space-5) var(--space-5); }
.field { display: flex; flex-direction: column; gap: var(--space-1-5); }
.field + .field { margin-top: var(--space-3); }
.field__label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-secondary); }
.field__hint { font-size: var(--text-2xs); color: var(--text-muted); }
.field__error { font-size: var(--text-xs); color: var(--danger-fg); }

/* ---------- Drawer（右侧详情面板；手机端全屏） ---------- */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  width: min(560px, 100vw);
  border-left: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: drawer-in var(--duration-slow) var(--ease-out);
}
.drawer--wide { width: min(720px, 100vw); }
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } }
.drawer__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--header-height);
  padding: 0 var(--space-3) 0 var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  flex: 0 0 auto;
}
.drawer__title { flex: 1 1 auto; min-width: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-5); }
.drawer__footer { flex: 0 0 auto; display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border-subtle); padding-bottom: max(var(--space-3), env(safe-area-inset-bottom)); }
.drawer-backdrop-light { position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: var(--backdrop); animation: fade-in var(--duration-base) var(--ease-out); }

/* ---------- Detail ---------- */
.detail-hero { display: flex; gap: var(--space-4); align-items: flex-start; }
.detail-hero__cover {
  flex: 0 0 auto;
  width: 112px;
  height: 112px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
}
.detail-hero__title { font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: 1.25; word-break: break-word; }
.detail-hero__meta { margin-top: var(--space-1-5); color: var(--text-muted); font-size: var(--text-sm); }
.detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  margin-top: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
/* 分隔线用外阴影画在右/下侧，最外圈被 overflow 裁掉，避免末行留灰块 */
.stat { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); min-width: 0; box-shadow: 1px 1px 0 var(--border-subtle); }
.stat__label { font-size: var(--text-2xs); color: var(--text-muted); }
.stat__value { font-size: var(--text-md); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-section { margin-top: var(--space-6); }
.detail-section__title { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-muted); }
.prose { font-size: var(--text-sm); line-height: 1.7; color: var(--text-secondary); white-space: pre-line; word-break: break-word; }
.timeline { display: flex; flex-direction: column; gap: var(--space-3); border-left: 2px solid var(--border-subtle); padding-left: var(--space-4); }
.timeline__item { position: relative; }
.timeline__item::before { content: ""; position: absolute; left: calc(var(--space-4) * -1 - 6px); top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--surface); }
.timeline__date { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }

/* ---------- Filter Bar ---------- */
.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.toolbar__search { flex: 1 1 220px; max-width: 320px; min-width: 160px; }
.toolbar__spacer { flex: 1 1 auto; }
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  height: 32px;
  padding: 0 var(--space-2-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.filter-btn:hover { background: var(--surface-hover); color: var(--text); }
.filter-btn.is-active { border-style: solid; border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-soft-fg); }
.filter-btn__count { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--accent-fg); font-size: 10px; line-height: 16px; text-align: center; }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border-subtle); background: var(--bg-subtle); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 4px 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.chip b { color: var(--text); font-weight: var(--weight-semibold); }
.chip button { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: var(--text-subtle); }
.chip button:hover { background: var(--surface-active); color: var(--text); }
.chip--toggle { padding: 0 10px; cursor: pointer; }
.chip--toggle[aria-pressed="true"] { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-soft-fg); }
.chip__count { color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}
.notice--info { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-soft-fg); }
.notice--warning { border-color: color-mix(in srgb, var(--warning) 35%, transparent); background: var(--warning-soft); color: var(--warning-fg); }
.notice svg { flex: 0 0 auto; margin-top: 1px; }

/* ---------- Batch Bar ---------- */
.batch-bar {
  position: sticky;
  bottom: var(--space-4);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) auto 0;
  width: fit-content;
  max-width: calc(100% - 16px);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  box-shadow: var(--shadow-lg);
  animation: batch-in var(--duration-base) var(--ease-out);
  font-size: var(--text-sm);
}
.batch-bar .btn { --btn-bg: transparent; --btn-fg: var(--text-inverse); --btn-border: color-mix(in srgb, var(--text-inverse) 22%, transparent); --btn-bg-hover: color-mix(in srgb, var(--text-inverse) 12%, transparent); box-shadow: none; }
.batch-bar .popover { color: var(--text); }
@keyframes batch-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Data Table（虚拟滚动） ---------- */
.dt { position: relative; }
.dt__scroll { position: relative; overflow: auto; max-height: max(420px, calc(100dvh - 260px)); overscroll-behavior: contain; }
.dt__scroll:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 0; }
.dt table { width: 100%; table-layout: fixed; font-size: var(--text-xs); }
.dt th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 36px;
  padding: 0 var(--space-3);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}
.dt th.is-sortable { cursor: pointer; }
.dt th.is-sortable:hover { color: var(--text); }
.dt th.is-sorted { color: var(--text); }
.dt th .sort-ind { display: inline-flex; vertical-align: -2px; margin-left: 2px; color: var(--accent); }
.dt td {
  height: var(--dt-row-h, 48px);
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.dt .num { text-align: right; }
.dt .center { text-align: center; }
.dt tbody tr { cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.dt tbody tr:hover { background: var(--surface-hover); }
.dt tbody tr.is-selected { background: var(--accent-soft); }
.dt tbody tr.is-active { box-shadow: inset 2px 0 0 var(--accent); background: var(--surface-active); }
.dt tbody tr.dt__spacer,
.dt tbody tr.dt__spacer:hover { cursor: default; background: transparent; }
.dt tbody tr.dt__spacer td { padding: 0; border: 0; height: auto; }
.dt .col-check { width: 40px; padding-right: 0; }
.dt .sticky-col { position: sticky; left: 0; z-index: 1; background: inherit; }
.dt thead .sticky-col { z-index: 3; background: var(--bg-subtle); }
.dt tbody tr .sticky-col { background: var(--surface); }
.dt tbody tr:hover .sticky-col { background: var(--surface-hover); }
.dt tbody tr.is-selected .sticky-col { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.dt__footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: var(--text-xs);
}
.dt__sentinel { height: 1px; }
.cell-item { display: flex; align-items: center; gap: var(--space-2-5); min-width: 0; }
.cell-item__text { min-width: 0; }
.cell-item__title { display: block; color: var(--text); font-weight: var(--weight-medium); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-item__sub { display: block; color: var(--text-muted); font-size: var(--text-2xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-tags { display: flex; gap: 4px; overflow: hidden; }
.mark-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mc, var(--text-subtle)); flex: 0 0 auto; }

/* ---------- 移动端卡片列表（替代表格） ---------- */
.mlist { display: flex; flex-direction: column; }
.mcard {
  display: grid;
  grid-template-columns: auto 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.mcard:active { background: var(--surface-active); }
.mcard.is-selected { background: var(--accent-soft); }
.mcard__thumb { width: 48px; height: 48px; border-radius: var(--radius-md); object-fit: cover; background: var(--bg-subtle); border: 1px solid var(--border-subtle); }
.mcard__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard__meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: 3px; color: var(--text-muted); font-size: var(--text-2xs); }
.mcard__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* ---------- Card Grid（卡片视图） ---------- */
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); padding: var(--space-4); }
.gcard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.gcard:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
.gcard.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.gcard__cover { position: relative; aspect-ratio: 16 / 10; background: var(--bg-subtle); overflow: hidden; }
.gcard__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.gcard:hover .gcard__cover img { transform: scale(1.03); }
.gcard__rank { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: var(--radius-full); background: rgba(12, 13, 16, 0.72); color: #fff; font-size: var(--text-2xs); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; backdrop-filter: blur(6px); }
.gcard__check { position: absolute; top: 8px; right: 8px; }
.gcard__body { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3); }
.gcard__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcard__author { font-size: var(--text-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcard__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-1-5); font-size: var(--text-xs); }
.img-fallback { display: grid; place-items: center; width: 100%; height: 100%; color: var(--text-subtle); }

/* ---------- Charts ---------- */
.chart { position: relative; width: 100%; user-select: none; }
.chart svg { display: block; overflow: visible; }
.chart__grid { stroke: var(--chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart__axis { fill: var(--chart-axis); font-size: 10.5px; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__area { opacity: 0.08; }
.chart__cursor { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.chart__dot { stroke: var(--surface); stroke-width: 2; }
.chart__tooltip {
  position: absolute;
  top: 0;
  z-index: var(--z-popover);
  min-width: 120px;
  padding: var(--space-2) var(--space-2-5);
  border-radius: var(--radius-md);
  background: var(--chart-tooltip-bg);
  color: var(--chart-tooltip-fg);
  font-size: var(--text-2xs);
  line-height: 1.6;
  pointer-events: none;
  box-shadow: var(--shadow-md);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chart__tooltip-title { font-weight: var(--weight-semibold); margin-bottom: 2px; }
.chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-1-5) var(--space-3); margin-bottom: var(--space-2); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: var(--text-xs); }
.legend-item[aria-pressed="false"] { opacity: 0.45; }
.legend-item__swatch { width: 10px; height: 3px; border-radius: 2px; background: var(--c); }

.barlist { display: flex; flex-direction: column; gap: 2px; }
.barlist__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 30px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  text-align: left;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}
.barlist__row:hover { background: var(--surface-hover); }
.barlist__row.is-active { box-shadow: inset 0 0 0 1px var(--accent); }
.barlist__bar { position: absolute; inset: 3px auto 3px 0; z-index: -1; border-radius: var(--radius-sm); background: var(--bc, var(--accent)); opacity: 0.14; transition: width var(--duration-slow) var(--ease-out); }
.barlist__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: var(--weight-medium); }
.barlist__sub { flex: 0 0 auto; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.barlist__value { flex: 0 0 auto; min-width: 48px; text-align: right; color: var(--text); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }

.quadrant__label { fill: var(--text-subtle); font-size: 11px; font-weight: var(--weight-semibold); }
.quadrant__point { cursor: pointer; transition: r var(--duration-fast) var(--ease-out); stroke: var(--surface); stroke-width: 1.5; }
.quadrant__point:hover, .quadrant__point.is-active { stroke: var(--text); stroke-width: 2; }
.quadrant__threshold { stroke: var(--border-strong); stroke-dasharray: 4 4; }

/* ---------- Segment 徽标（S/A/B） ---------- */
.seg-badge { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-sm); font-size: var(--text-2xs); font-weight: var(--weight-bold); }
.seg-badge--S { background: var(--danger-soft); color: var(--danger-fg); }
.seg-badge--A { background: var(--warning-soft); color: var(--warning-fg); }
.seg-badge--B { background: var(--info-soft); color: var(--info-fg); }

/* ---------- Mover List（跃升榜） ---------- */
.mover {
  display: grid;
  grid-template-columns: 22px 36px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 52px;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.mover:last-child { border-bottom: 0; }
.mover:hover { background: var(--surface-hover); }
.mover__rank { font-size: var(--text-2xs); color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ---------- Login ---------- */
.auth-page {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: var(--space-6) var(--space-4);
  background:
    radial-gradient(800px 400px at 15% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    radial-gradient(700px 360px at 100% 110%, color-mix(in srgb, var(--violet-500) 12%, transparent), transparent 60%),
    var(--bg);
}
.auth-card { width: min(400px, 100%); padding: var(--space-8) var(--space-6) var(--space-6); }
.auth-card__brand { display: flex; align-items: center; gap: var(--space-2-5); margin-bottom: var(--space-6); font-weight: var(--weight-semibold); }
.auth-card h1 { font-size: var(--text-xl); }
.auth-card p { margin-top: var(--space-1-5); color: var(--text-muted); font-size: var(--text-sm); }
.auth-card form { margin-top: var(--space-6); }
.auth-card .input { height: 40px; font-size: var(--text-md); letter-spacing: 0.04em; }
.auth-foot { margin-top: var(--space-5); display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.auth-foot a { color: var(--accent); }

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
  .toolbar { padding: var(--space-2-5) var(--space-3); }
  .toolbar__search { max-width: none; flex-basis: 100%; order: -1; }
  .active-filters { padding: var(--space-2) var(--space-3); }
  .dt__scroll { max-height: none; overflow: visible; }
  .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-3); }
  .gcard__body { padding: var(--space-2) var(--space-2-5); }
  .drawer, .drawer--wide { width: 100vw; border-left: 0; }
  .drawer__body { padding: var(--space-4); }
  .detail-hero__cover { width: 80px; height: 80px; }
  .detail-hero__title { font-size: var(--text-lg); }
  .batch-bar { position: fixed; left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); width: auto; max-width: none; margin: 0; justify-content: center; border-radius: var(--radius-lg); }
  .mover { grid-template-columns: 22px 36px minmax(0, 1fr) auto; padding: var(--space-2) var(--space-3); }
  .mover .spark { display: none; }
  .dialog__footer { flex-direction: column-reverse; }
  .dialog__footer .btn { width: 100%; height: 40px; }
  .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .show-mobile { display: none !important; }
}

/* ---------- 登录页：组织署名与维护人 ---------- */
.auth-brand-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.auth-brand-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.auth-brand-sub { font-size: var(--text-2xs); font-weight: var(--weight-medium); color: var(--text-subtle); letter-spacing: 0.02em; }
.auth-legal {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-subtle);
  font-size: var(--text-2xs);
  line-height: 1.6;
}
.auth-card .auth-legal p { margin-top: 0; color: var(--text-subtle); font-size: var(--text-2xs); }
.auth-card .auth-legal p + p { margin-top: 2px; }
.auth-card .auth-legal__contact { color: var(--text-secondary); font-size: var(--text-xs); }
.auth-legal__contact strong { color: var(--text); font-weight: var(--weight-semibold); }

/* ---------- 访问流水：按天分组的分隔行 ---------- */
.log-day td {
  padding: 7px 12px;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  position: sticky;
  top: 0;
  z-index: 1;
}
.log-day td > * + * { margin-left: 10px; }
.log-day strong { color: var(--text); font-weight: var(--weight-semibold); font-size: var(--text-xs); }
.log-day .truncate { display: inline-block; max-width: 60%; vertical-align: bottom; }

/* ---------- 更新日志（时间轴式列表） ---------- */
.log-list { display: flex; flex-direction: column; gap: var(--space-4); }
.log-item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.log-item__side {
  display: flex; flex-direction: column; gap: 2px; padding-top: 14px;
  text-align: right; color: var(--text-subtle); font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
}
.log-item__date { color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.log-item__ver { color: var(--text-subtle); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
/* 同一天的第二条起：左侧不再重复日期，用一条细线把同日的版本连起来 */
.log-item--cont .log-item__side { padding-top: 2px; border-left: 1px dashed var(--border-subtle); }
.log-item__week { color: var(--text-subtle); }
.log-item__title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.log-item__summary { margin: 6px 0 0; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.65; }
.log-item__items { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.log-item__items li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--text-sm); line-height: 1.6; color: var(--text-secondary); }
.log-item__items li > .badge { flex: 0 0 auto; margin-top: 2px; }
.log-item__items li > span { min-width: 0; }
@media (max-width: 640px) {
  .log-item { grid-template-columns: 1fr; gap: 6px; }
  .log-item__side { flex-direction: row; align-items: baseline; gap: 8px; padding-top: 0; text-align: left; }
}

/* ---------- 总览：热门 Top10（单列 10 条） ---------- */

/* 名次变化徽标：涨红跌绿（国内习惯） */
.rank-move {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rank-move--up { color: var(--danger-fg); }
.rank-move--down { color: var(--success-fg); }
.rank-move--flat { color: var(--text-subtle); }

/* 未登录：列表底部的登录引导 */
.locked-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px var(--space-4);
  border: 0;
  border-top: 1px dashed var(--border);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  cursor: pointer;
}
.locked-cta:hover { background: var(--surface-hover); }
.locked-cta__arrow { margin-left: auto; display: inline-flex; color: var(--text-subtle); }

/* ---------- 首页：新近发布（右栏竖排） ---------- */
.rel-list { display: flex; flex-direction: column; flex: 1 1 auto; height: 100%; }
.rel-row {
  display: flex; align-items: center; gap: var(--space-3);
  flex: 1 1 0; min-height: 72px; padding: 8px var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.rel-row:last-child { border-bottom: 0; }
.rel-row:hover { background: var(--surface-hover); }
.rel-row__img { flex: 0 0 auto; width: 116px; height: 66px; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-subtle); }
.rel-row__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.rel-row__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.rel-row__meta { font-size: var(--text-2xs); color: var(--text-muted); }
.rel-pill {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: color-mix(in srgb, var(--accent) 82%, var(--text));
  font-size: var(--text-2xs); font-weight: var(--weight-semibold); white-space: nowrap;
}
.rel-row--locked { filter: blur(4px); opacity: 0.45; pointer-events: none; }
@media (max-width: 720px) {
  .rel-row { flex: 0 0 auto; }
  .rel-row__img { width: 88px; height: 50px; }
}

/* 热门：前三左 1/3（放大），4–10 中 1/3；两栏共用固定宽度的条形列，长度可横向直接比 */
.hot-3col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}
.hot-top3-col { display: flex; flex-direction: column; height: 100%; }
.hot-big {
  display: flex; align-items: center; gap: var(--space-3);
  flex: 1 1 0; min-height: 104px;
  padding: 8px; border: 0; border-bottom: 1px solid var(--border-subtle);
  border-radius: 0; background: transparent; text-align: left; min-width: 0;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.hot-big:last-child { border-bottom: 0; }
.hot-big:hover { background: var(--surface-hover); }
.hot-big--1 {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 75%);
}
.hot-big__media { position: relative; flex: 0 0 auto; }
.hot-big__img { display: block; width: 88px; height: 88px; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-subtle); }
.hot-big__rank {
  position: absolute; left: -5px; top: -5px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 6px;
  background: var(--text); color: var(--surface);
  font-size: var(--text-2xs); font-weight: var(--weight-bold);
}
.hot-big--1 .hot-big__rank { background: var(--accent); color: #fff; }
.hot-big__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.hot-big__head { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hot-big__title { font-size: var(--text-md); font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: var(--tracking-tight); }
.hot-big__rank-label { font-size: var(--text-2xs); color: var(--text-subtle); white-space: nowrap; }
.hot-big__author { font-size: var(--text-2xs); color: var(--text-muted); }
.hot-big__extra { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--text-2xs); color: var(--text-subtle); }
.hot-big__score { color: var(--warning-fg, #b7791f); font-weight: var(--weight-semibold); }

/* 条形列：两栏都是 100px 定宽，右对齐 → 长度可直接横着比 */
.hot-stat {
  flex: 0 0 auto; width: 100px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
}
.hot-stat__row { display: flex; align-items: center; gap: 5px; }
.hot-bar {
  display: block; width: 100%; height: 5px; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
  overflow: hidden;
}
.hot-bar > span { display: block; height: 100%; border-radius: 999px; opacity: 0.9; }
.hot-rest-col { border-left: 1px solid var(--border-subtle); padding-left: var(--space-2); }
.hot-rest-col .list__item { min-height: 57px; }

@media (max-width: 1100px) {
  .hot-3col { grid-template-columns: 1fr; }
  .hot-rest-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-subtle); padding-top: var(--space-2); }
  .hot-big { flex: 0 0 auto; }
}
@media (max-width: 720px) {
  .hot-big__img { width: 56px; height: 56px; }
  .hot-stat { width: 84px; }
  .hot-big { gap: var(--space-2); padding: 8px 4px; }
}
/* grid 子项默认 min-width:auto，内容撑不开就会把整页撑出横向滚动条（375px 实测溢出 11px） */
.hot-3col > *, .hot-top3-col > .hot-big, .hot-big__body { min-width: 0; }
.hot-big { overflow: hidden; }

/* 卡片高度自适应（不跟随同行卡片拉伸；新近发布只有 2–5 条时会留白） */
.card--self-start { align-self: start; }

/* 封面右下角的平台图标：新近发布、双轨雷达、排名异动共用 */
.thumb-wrap { position: relative; flex: 0 0 auto; display: block; }
.thumb-plat {
  position: absolute; right: -5px; bottom: -5px;
  width: 24px; height: 24px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
}
.thumb-plat .pmark { width: 15px; height: 15px; }
.thumb-plat--sm { width: 16px; height: 16px; right: -5px; bottom: -5px; }
.thumb-plat--sm .pmark { width: 10px; height: 10px; }

/* 列表可滚动时底部渐隐，避免最后一行被硬切 */
.scroll-fade {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%);
}

/* ---------- 邀请领取页 ---------- */
.invite-note {
  margin-top: var(--space-3);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: var(--text-xs);
}
.invite-code {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-4);
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}
.invite-code code {
  flex: 1 1 auto;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  word-break: break-all;
}

/* ---------- 管理页：邀请链接 ---------- */
.invite-bar {
  display: flex; align-items: flex-end; gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.invite-bar .field { margin: 0; }
.invite-created {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-3) var(--space-4) 0;
  padding: 10px 12px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.invite-created__url {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--text-xs);
  word-break: break-all;
  color: var(--text-secondary);
}
.invite-claims { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.invite-claims__row {
  display: grid; grid-template-columns: minmax(0, 1.2fr) 88px 110px; gap: 8px;
  font-size: var(--text-2xs);
  padding: 3px 0;
  border-top: 1px dashed var(--border-subtle);
}

/* 领取成功后的访问码：默认密文，字符等宽不跳动 */
.invite-code code.is-masked { letter-spacing: 0.18em; color: var(--text-muted); }

/* 并排的两个列表（双轨雷达 / 今日排名异动）：行高必须一致，
   否则一侧 53px、另一侧 57px，越往下行首偏差越大，看起来"作品没对齐"。 */
.list--uniform .list__item { flex: 0 0 56px; height: 56px; }
/* 注意 flex 容器里只写 height 会被 flex-shrink 压扁（8×56 装进 420px → 每行 52.5px），必须给 flex-basis */
.list--uniform .list__item > * { min-width: 0; }

/* ---------- 作者名 + 建联标记 ---------- */
.author-link__wrap { color: inherit; text-decoration: none; }
.author-link__wrap:hover .author-link__name { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.author-link { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.author-link__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.author-link__dot {
  flex: 0 0 auto; width: 6px; height: 6px; border-radius: 999px;
  background: var(--link-dot);                        /* 已建联：浅绿 */
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--link-dot) 25%, transparent);
}
.author-link__dot--reachable {
  background: var(--link-dot-pending);                 /* 可联系：黄 */
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--link-dot-pending) 25%, transparent);
}
.author-link__dot--signed {
  background: var(--link-dot-strong);                 /* 已签约：深绿 */
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--link-dot-strong) 25%, transparent);
}

/* ---------- 创作者档案 ---------- */
.crumb-back { font-size: var(--text-xs); color: var(--text-muted); text-decoration: none; margin-right: 4px; }
.crumb-back:hover { color: var(--accent); }
.creator-search { font-size: var(--text-2xs); }
.creator-search a { color: var(--text-muted); }
.ach-list { margin: 4px 0 0; padding-left: 16px; font-size: var(--text-xs); color: var(--text-secondary); }
.ach-list li { margin-bottom: 3px; }
.ach-edit { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ach-edit__row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 28px; gap: 6px; align-items: center; }
.ach-edit__row .input { height: 32px; font-size: var(--text-xs); }

/* ---------- 机会榜（双轨 + 异动 合并） ---------- */
.opp-bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
}
/* 卡宽后单列会拉得太长，两列并排更好扫；窄屏自动回落到一列 */
.opp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-4);
  padding: 0 var(--space-4);
}
.opp-grid .list__item { border-bottom: 1px solid var(--border-subtle); height: auto; min-height: 56px; }
@media (max-width: 1100px) {
  .opp-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* 机会榜：空降头部分层（新）与跨档跃升标记 */
.seg-badge--N { background: var(--accent-soft); color: var(--accent-soft-fg); }



/* 作者建联状态：统一用文字小标签（圆点容易被忽略/看错），未建联不显示任何东西 */
.author-link__tag {
  flex: 0 0 auto;
  height: 15px; padding: 0 4px; border-radius: 3px;
  font-size: 9px; font-weight: var(--weight-semibold); line-height: 15px; letter-spacing: 0;
  white-space: nowrap;
}
.author-link__tag--contacted { background: var(--link-tag-bg); color: var(--link-tag-fg); }
.author-link__tag--reachable { background: var(--link-tag-pending-bg); color: var(--link-tag-pending-fg); }
.author-link__tag--signed { background: var(--link-dot-strong); color: #fff; }

/* ---------- 创作者档案 ---------- */
.crumb-back { font-size: var(--text-xs); color: var(--text-muted); text-decoration: none; margin-right: 4px; }
.crumb-back:hover { color: var(--accent); }
.creator-search { font-size: var(--text-2xs); }
.creator-search a { color: var(--text-muted); }
.ach-list { margin: 4px 0 0; padding-left: 16px; font-size: var(--text-xs); color: var(--text-secondary); }
.ach-list li { margin-bottom: 3px; }
.ach-edit { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ach-edit__row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 28px; gap: 6px; align-items: center; }
.ach-edit__row .input { height: 32px; font-size: var(--text-xs); }

/* ---------- 机会榜（双轨 + 异动 合并） ---------- */
.opp-bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
}
/* 卡宽后单列会拉得太长，两列并排更好扫；窄屏自动回落到一列 */
.opp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-4);
  padding: 0 var(--space-4);
}
.opp-grid .list__item { border-bottom: 1px solid var(--border-subtle); height: auto; min-height: 56px; }
@media (max-width: 1100px) {
  .opp-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* 机会榜：空降头部分层（新）与跨档跃升标记 */
.seg-badge--N { background: var(--accent-soft); color: var(--accent-soft-fg); }



/* 已签约：不用深绿点（与已建联太接近），改用握手小徽标 */
.author-link__signed {
  flex: 0 0 auto;
  display: inline-grid; place-items: center;
  height: 14px; padding: 0 4px; border-radius: 3px;
  background: var(--link-dot-strong); color: #fff;
  font-size: 9px; font-weight: var(--weight-semibold); line-height: 14px; letter-spacing: 0;
}