/* ============================================================
 * uw-social-ts.css — 社交 / 仓库 / 个人中心 的 TS 版补充样式
 *
 * 只补原 Blazor 里没有的类（成就卡网格、赠送弹窗的强化石选择行、
 * 仓库道具卡的内部排布）。其余全部复用 universe-war.css / uw-theme.css
 * 里已有的 .uw-friends-* / .uw-trade-* / .uw-stone-* / .uw-journey-*，
 * 保证与 C# 版视觉一致，双主题自动跟随 --uw-* 变量。
 * ============================================================ */

/* ── 成就卡网格（社交中心 → 成就） ───────────────────────── */
.uw-ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.uw-ach-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--uw-color-bg-secondary);
  border: 1px solid var(--uw-color-border-dim);
  border-radius: var(--uw-r-md, 4px);
}
.uw-ach-card.done {
  border-color: var(--uw-color-success);
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--uw-color-success) 8%, var(--uw-color-bg-secondary)),
    var(--uw-color-bg-secondary)
  );
}
.uw-ach-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.uw-ach-head b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--uw-color-text-primary);
}
.uw-ach-cat {
  flex: none;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 10px;
  color: var(--uw-color-accent);
  background: var(--uw-color-accent-dim);
}
.uw-ach-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--uw-color-text-dim);
}
.uw-ach-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}
.uw-ach-progress-bar {
  flex: 1;
  min-width: 0;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--uw-color-bg-input, rgba(127, 127, 127, 0.2));
}
.uw-ach-progress-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--uw-color-accent);
  transition: width 0.25s ease;
}
.uw-ach-progress-text {
  flex: none;
  font-size: 11px;
  color: var(--uw-color-text-muted);
  font-variant-numeric: tabular-nums;
}
.uw-ach-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}
.uw-ach-reward {
  font-size: 12px;
  color: var(--uw-color-warning);
}
.uw-ach-claimed {
  font-size: 12px;
  color: var(--uw-color-success);
}
.uw-ach-locked {
  font-size: 12px;
  color: var(--uw-color-text-muted);
}

/* ── 赠送弹窗：强化石选择行 ───────────────────────────────── */
.uw-gift-stone-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}
.uw-gift-stone-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  border: 1px solid var(--uw-color-border-dim);
  border-radius: var(--uw-r-sm, 3px);
  background: var(--uw-color-bg-secondary);
  font-size: 12px;
}
.uw-gift-stone-row.active {
  border-color: var(--uw-color-accent);
  background: var(--uw-color-accent-dim);
}
.uw-gift-stone-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uw-gift-stone-value {
  flex: none;
  color: var(--uw-color-warning);
  font-variant-numeric: tabular-nums;
}

/* ── 仓库道具卡：立绘 + 两行文字 ──────────────────────────── */
.uw-vault-item-card {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.uw-vault-item-art {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--uw-color-accent);
  background: var(--uw-color-bg-input, rgba(127, 127, 127, 0.12));
  border-radius: var(--uw-r-sm, 3px);
}

/* 移动端：成就与道具卡单列，避免 minmax(260px) 在窄屏挤出横向滚动 */
@media (max-width: 640px) {
  .uw-ach-grid {
    grid-template-columns: 1fr;
  }
  .uw-vault-items {
    justify-content: space-between;
  }
  .uw-vault-item-card {
    width: calc(50% - 5px);
  }
}

/* ============================================================
 * Phase 7 全站横幅：断连提示 / 滚动公告 / 新手引导卡
 * ============================================================ */

/* ── 断连横幅（顶部红条，重连成功自动消失） ─────────────── */
.uw-conn-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 12px;
  color: #fff;
  background: var(--uw-color-danger);
  border-bottom: 1px solid var(--uw-color-danger-dim, rgba(0, 0, 0, 0.2));
}
.uw-conn-banner i {
  animation: uw-conn-pulse 1.4s ease-in-out infinite;
}
@keyframes uw-conn-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ── 滚动公告（跑马灯） ────────────────────────────────── */
.uw-announce-ticker {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  font-size: 12px;
  color: var(--uw-color-warning);
  background: var(--uw-color-bg-secondary);
  border-bottom: 1px solid var(--uw-color-border-dim);
  overflow: hidden;
}
.uw-announce-ticker > i {
  flex: none;
}
.uw-announce-track {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.uw-announce-text {
  display: inline-block;
  padding-left: 100%;
  animation: uw-announce-scroll 32s linear infinite;
}
.uw-announce-ticker:hover .uw-announce-text {
  animation-play-state: paused;
}
@keyframes uw-announce-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .uw-announce-text { animation: none; padding-left: 0; }
}

/* ── 新手引导卡片（右下浮动；移动端全宽贴底） ──────────── */
.uw-guide-card {
  position: fixed;
  right: 16px;
  bottom: calc(var(--uw-footer-height, 26px) + 76px);
  z-index: 60;
  width: 300px;
  padding: 10px 12px;
  background: var(--uw-color-bg-secondary);
  border: 1px solid var(--uw-color-accent);
  border-radius: var(--uw-r-md, 6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
.uw-guide-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--uw-color-accent);
}
.uw-guide-card-step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}
.uw-guide-card-progress {
  height: 4px;
  margin: 7px 0 8px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--uw-color-bg-input, rgba(127, 127, 127, 0.2));
}
.uw-guide-card-progress > span {
  display: block;
  height: 100%;
  background: var(--uw-color-accent);
  transition: width 0.3s ease;
}
.uw-guide-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--uw-color-text-primary);
  margin-bottom: 4px;
}
.uw-guide-card-desc {
  font-size: 12px;
  line-height: 1.6;
  color: var(--uw-color-text-dim);
}
.uw-guide-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 9px;
}

@media (max-width: 640px) {
  .uw-guide-card {
    left: 10px;
    right: 10px;
    width: auto;
    bottom: calc(var(--uw-footer-height, 26px) + 66px);
  }
}

/* ============================================================
 * Phase 7 全站横幅：断连提示 / 滚动公告 / 新手引导卡
 * ============================================================ */

/* ── 断连横幅（顶部红条，重连成功自动消失） ─────────────── */
.uw-conn-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 12px;
  color: #fff;
  background: var(--uw-color-danger);
  border-bottom: 1px solid var(--uw-color-danger-dim, rgba(0, 0, 0, 0.2));
}
.uw-conn-banner i {
  animation: uw-conn-pulse 1.4s ease-in-out infinite;
}
@keyframes uw-conn-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ── 滚动公告（跑马灯） ────────────────────────────────── */
.uw-announce-ticker {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  font-size: 12px;
  color: var(--uw-color-warning);
  background: var(--uw-color-bg-secondary);
  border-bottom: 1px solid var(--uw-color-border-dim);
  overflow: hidden;
}
.uw-announce-ticker > i {
  flex: none;
}
.uw-announce-track {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.uw-announce-text {
  display: inline-block;
  padding-left: 100%;
  animation: uw-announce-scroll 32s linear infinite;
}
.uw-announce-ticker:hover .uw-announce-text {
  animation-play-state: paused;
}
@keyframes uw-announce-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .uw-announce-text { animation: none; padding-left: 0; }
}

/* ── 新手引导卡片（右下浮动；移动端全宽贴底） ──────────── */
.uw-guide-card {
  position: fixed;
  right: 16px;
  bottom: calc(var(--uw-footer-height, 26px) + 76px);
  z-index: 60;
  width: 300px;
  padding: 10px 12px;
  background: var(--uw-color-bg-secondary);
  border: 1px solid var(--uw-color-accent);
  border-radius: var(--uw-r-md, 6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
.uw-guide-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--uw-color-accent);
}
.uw-guide-card-step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}
.uw-guide-card-progress {
  height: 4px;
  margin: 7px 0 8px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--uw-color-bg-input, rgba(127, 127, 127, 0.2));
}
.uw-guide-card-progress > span {
  display: block;
  height: 100%;
  background: var(--uw-color-accent);
  transition: width 0.3s ease;
}
.uw-guide-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--uw-color-text-primary);
  margin-bottom: 4px;
}
.uw-guide-card-desc {
  font-size: 12px;
  line-height: 1.6;
  color: var(--uw-color-text-dim);
}
.uw-guide-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 9px;
}

@media (max-width: 640px) {
  .uw-guide-card {
    left: 10px;
    right: 10px;
    width: auto;
    bottom: calc(var(--uw-footer-height, 26px) + 66px);
  }
}

/* ============================================================
 * 世界 Boss 竞技场 / 收集工厂 / 装饰（原 Blazor 用内联样式与
 * WinBox 宽度，TS 版统一到页面宽度，这里补齐缺失的面板样式）
 * ============================================================ */

/* ── Boss 主卡 ─────────────────────────────────────────── */
.uw-boss-card {
  padding: 12px 14px;
  background: var(--uw-color-bg-secondary);
  border: 1px solid var(--uw-color-danger-dim, var(--uw-color-border-dim));
  border-radius: var(--uw-r-md, 4px);
  margin-bottom: 12px;
}
.uw-boss-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.uw-boss-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--uw-color-text-primary);
}
.uw-boss-phase {
  font-size: 12px;
  color: var(--uw-color-text-dim);
}
.uw-boss-hp {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.uw-boss-hp-bar {
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--uw-color-bg-input, rgba(127, 127, 127, 0.2));
  border: 1px solid var(--uw-color-border-dim);
}
.uw-boss-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--uw-color-danger), var(--uw-color-warning));
  transition: width 0.4s ease;
}
.uw-boss-hp-text {
  font-size: 12px;
  color: var(--uw-color-text-dim);
  font-variant-numeric: tabular-nums;
}
.uw-boss-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--uw-color-text-dim);
}

/* ── 终极一击 ─────────────────────────────────────────── */
.uw-boss-ultimate {
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--uw-color-bg-tertiary, var(--uw-color-bg-secondary));
  border: 1px solid var(--uw-color-border-dim);
  border-radius: var(--uw-r-md, 4px);
}
.uw-boss-ultimate-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  flex-wrap: wrap;
}

/* ── 掉落池 ───────────────────────────────────────────── */
.uw-boss-loot-pool {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--uw-color-border-dim);
}
.uw-boss-loot-pool-head {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--uw-color-accent);
}
.uw-boss-loot-row {
  display: grid;
  grid-template-columns: 1fr auto 68px;
  gap: 8px;
  align-items: center;
  padding: 3px 0;
  font-size: 12px;
}
.uw-boss-loot-chance {
  text-align: right;
  color: var(--uw-color-warning);
  font-variant-numeric: tabular-nums;
}

/* ── 收集工厂（2026-11-07 对齐 Blazor CollectorsPanel：按星系分组 + 星图定位 + 状态色） ── */
.uw-collectors-galaxy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.uw-collectors-galaxy-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--uw-color-border-dim);
}
.uw-collectors-locate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--uw-color-accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
}
.uw-collectors-locate:hover {
  background: var(--uw-color-bg-hover, rgba(128, 128, 128, .15));
}
.uw-collectors-locate .fa-external-link {
  font-size: 11px;
  opacity: .7;
}
.uw-collectors-galaxy-meta {
  font-size: 12px;
  color: var(--uw-color-text-dim);
}
.uw-collectors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.uw-collector-card {
  padding: 10px 12px;
  background: var(--uw-color-bg-secondary);
  border: 1px solid var(--uw-color-border-dim);
  border-radius: var(--uw-r-md, 4px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.uw-collector-card.upgrading {
  border-color: var(--uw-color-accent);
}
.uw-collector-card.damaged {
  border-color: var(--uw-color-danger);
}
.uw-collector-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.uw-collector-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.uw-collector-planet {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--uw-color-text-primary);
}
.uw-collector-level {
  font-size: 11px;
  font-weight: 600;
  color: var(--uw-color-text-muted);
  border: 1px solid currentColor;
  border-radius: 6px;
  padding: 0 5px;
  line-height: 16px;
  white-space: nowrap;
}
.uw-collector-state {
  font-size: 11px;
  white-space: nowrap;
  text-align: right;
}
.uw-collector-ok { color: var(--uw-color-success, #3fb950); }
.uw-collector-bad { color: var(--uw-color-danger); }
.uw-collector-progress { color: var(--uw-color-accent); }
.uw-collector-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--uw-color-text-dim);
}
.uw-collector-hp {
  display: flex;
  align-items: center;
  gap: 8px;
}
.uw-collector-ops {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

/* ── 装饰：皮肤预览占位（真实图集只有商城皮肤才带 -prev.webp） ── */
.uw-skin-prev {
  background:
    radial-gradient(circle at 50% 45%, var(--uw-color-accent) 0%, transparent 62%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.45) 0%, #0b1020 78%);
}
.uw-skin-prev--member {
  background:
    radial-gradient(circle at 50% 45%, #d9c07a 0%, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4) 0%, #0b1020 80%);
}

/* ── 榜单/事件卡在分区里铺满（原来靠 WinBox 宽度撑开） ── */
.uw-shipyard-section .uw-leaderboard-table {
  width: 100%;
  margin-top: 8px;
}
.uw-event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.uw-event-card {
  padding: 10px 12px;
  background: var(--uw-color-bg-secondary);
  border: 1px solid var(--uw-color-border-dim);
  border-radius: var(--uw-r-md, 4px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.uw-event-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
.uw-event-desc {
  font-size: 12px;
  line-height: 1.55;
  color: var(--uw-color-text-dim);
}
.uw-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11.5px;
  color: var(--uw-color-text-muted);
}

@media (max-width: 640px) {
  .uw-collectors-grid,
  .uw-event-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
 * 世界 Boss 竞技场 / 收集工厂 / 装饰（原 Blazor 用内联样式与
 * WinBox 宽度，TS 版统一到页面宽度，这里补齐缺失的面板样式）
 * ============================================================ */

/* ── Boss 主卡 ─────────────────────────────────────────── */
.uw-boss-card {
  padding: 12px 14px;
  background: var(--uw-color-bg-secondary);
  border: 1px solid var(--uw-color-danger-dim, var(--uw-color-border-dim));
  border-radius: var(--uw-r-md, 4px);
  margin-bottom: 12px;
}
.uw-boss-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.uw-boss-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--uw-color-text-primary);
}
.uw-boss-phase {
  font-size: 12px;
  color: var(--uw-color-text-dim);
}
.uw-boss-hp {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.uw-boss-hp-bar {
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--uw-color-bg-input, rgba(127, 127, 127, 0.2));
  border: 1px solid var(--uw-color-border-dim);
}
.uw-boss-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--uw-color-danger), var(--uw-color-warning));
  transition: width 0.4s ease;
}
.uw-boss-hp-text {
  font-size: 12px;
  color: var(--uw-color-text-dim);
  font-variant-numeric: tabular-nums;
}
.uw-boss-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--uw-color-text-dim);
}

/* ── 终极一击 ─────────────────────────────────────────── */
.uw-boss-ultimate {
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--uw-color-bg-tertiary, var(--uw-color-bg-secondary));
  border: 1px solid var(--uw-color-border-dim);
  border-radius: var(--uw-r-md, 4px);
}
.uw-boss-ultimate-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  flex-wrap: wrap;
}

/* ── 掉落池 ───────────────────────────────────────────── */
.uw-boss-loot-pool {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--uw-color-border-dim);
}
.uw-boss-loot-pool-head {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--uw-color-accent);
}
.uw-boss-loot-row {
  display: grid;
  grid-template-columns: 1fr auto 68px;
  gap: 8px;
  align-items: center;
  padding: 3px 0;
  font-size: 12px;
}
.uw-boss-loot-chance {
  text-align: right;
  color: var(--uw-color-warning);
  font-variant-numeric: tabular-nums;
}

/* ── 收集工厂（2026-11-07 对齐 Blazor CollectorsPanel：按星系分组 + 星图定位 + 状态色） ── */
.uw-collectors-galaxy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.uw-collectors-galaxy-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--uw-color-border-dim);
}
.uw-collectors-locate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--uw-color-accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
}
.uw-collectors-locate:hover {
  background: var(--uw-color-bg-hover, rgba(128, 128, 128, .15));
}
.uw-collectors-locate .fa-external-link {
  font-size: 11px;
  opacity: .7;
}
.uw-collectors-galaxy-meta {
  font-size: 12px;
  color: var(--uw-color-text-dim);
}
.uw-collectors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.uw-collector-card {
  padding: 10px 12px;
  background: var(--uw-color-bg-secondary);
  border: 1px solid var(--uw-color-border-dim);
  border-radius: var(--uw-r-md, 4px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.uw-collector-card.upgrading {
  border-color: var(--uw-color-accent);
}
.uw-collector-card.damaged {
  border-color: var(--uw-color-danger);
}
.uw-collector-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.uw-collector-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.uw-collector-planet {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--uw-color-text-primary);
}
.uw-collector-level {
  font-size: 11px;
  font-weight: 600;
  color: var(--uw-color-text-muted);
  border: 1px solid currentColor;
  border-radius: 6px;
  padding: 0 5px;
  line-height: 16px;
  white-space: nowrap;
}
.uw-collector-state {
  font-size: 11px;
  white-space: nowrap;
  text-align: right;
}
.uw-collector-ok { color: var(--uw-color-success, #3fb950); }
.uw-collector-bad { color: var(--uw-color-danger); }
.uw-collector-progress { color: var(--uw-color-accent); }
.uw-collector-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--uw-color-text-dim);
}
.uw-collector-hp {
  display: flex;
  align-items: center;
  gap: 8px;
}
.uw-collector-ops {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

/* ── 装饰：皮肤预览占位（真实图集只有商城皮肤才带 -prev.webp） ── */
.uw-skin-prev {
  background:
    radial-gradient(circle at 50% 45%, var(--uw-color-accent) 0%, transparent 62%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.45) 0%, #0b1020 78%);
}
.uw-skin-prev--member {
  background:
    radial-gradient(circle at 50% 45%, #d9c07a 0%, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4) 0%, #0b1020 80%);
}

/* ── 榜单/事件卡在分区里铺满（原来靠 WinBox 宽度撑开） ── */
.uw-shipyard-section .uw-leaderboard-table {
  width: 100%;
  margin-top: 8px;
}
.uw-event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.uw-event-card {
  padding: 10px 12px;
  background: var(--uw-color-bg-secondary);
  border: 1px solid var(--uw-color-border-dim);
  border-radius: var(--uw-r-md, 4px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.uw-event-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
.uw-event-desc {
  font-size: 12px;
  line-height: 1.55;
  color: var(--uw-color-text-dim);
}
.uw-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11.5px;
  color: var(--uw-color-text-muted);
}

@media (max-width: 640px) {
  .uw-collectors-grid,
  .uw-event-grid {
    grid-template-columns: 1fr;
  }
}