/* ============================================================================
   工作台 · 排版精修（portal.html / workspace.html 共用）
   只做「节奏、对齐、密度」的调整，不改骨架、不加装饰。
   必须排在 portal.css / views-plus.css 之后加载。
   ========================================================================== */

/* ===== 1. 内容区韵律 ===================================================== */
/* 1420 → 1560：1920 屏下两侧不再空出一大条；下方留白补齐，页脚不压内容 */
.view {
  max-width: 1560px;
  padding-top: clamp(18px, 2.2vw, 30px);
  padding-bottom: 64px;
}

/* 面板之间的呼吸：16 → 18，分组关系更清楚 */
.swin + .swin { margin-top: 18px; }
.tbar { min-height: 46px; padding: 0 18px; }
.wbody { padding: 20px 18px; }

/* ===== 2. 视图头：收紧，右侧读数贴回基线 ================================= */
.vhead {
  position: relative;
  margin: 0 0 20px;
  padding: 0 0 15px;
}
.vhead-kicker { margin-bottom: 9px; }
.vhead h2 { font-size: clamp(25px, 2.9vw, 35px); letter-spacing: -.045em; }
.vhead p { margin-top: 9px; }

/* 860 以上：把 SECTOR / LIVE 从独占一行改成绝对定位到分隔线右端，
   标题区因此少一行高度，右侧也不再是另一半空白。 */
@media (min-width: 861px) {
  .vhead { padding-right: 186px; }
  .vhead-meta {
    position: absolute; right: 0; bottom: 16px;
    margin: 0; padding-top: 0; align-self: auto;
  }
}

/* 视图编号退到角落，压低描边，避免和读数、标题抢视线 */
.view::after {
  top: -14px; right: 0;
  font-size: clamp(86px, 10vw, 148px);
  -webkit-text-stroke-color: color-mix(in srgb, var(--ink) 7%, transparent);
}
[data-ui="light"] .view::after { -webkit-text-stroke-color: rgba(23, 33, 51, .08); }

/* ===== 3. 总览：两列卡片顶边对齐 ======================================== */
/* 原规则 `.ovgrid .swin + .swin` 把右卡推下 16px，两卡顶边错位 */
.ovgrid {
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
.ovgrid > .swin + .swin { margin-top: 0; }

/* kv 行：行高与字距重新配比重，值靠右不再贴边 */
.kv { padding: 8px 0; }
.kv .k { letter-spacing: .12em; }
.kv b { font-variant-numeric: tabular-nums; }

/* 积分读数：两个大数字收一点尺寸，给下面的指标行留位置 */
.bignums { gap: 10px; margin-bottom: 12px; }
.bignum { padding: 14px 16px 15px; }
.bignum b { margin-top: 9px; font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -.01em; }

.statgrid { gap: 10px; }
.stat { padding: 12px 14px; }
.stat span { font-size: 9px; letter-spacing: .14em; }
.stat b { margin-top: 7px; font-size: 17px; }

/* ===== 4. 表格：列宽与行距 ============================================== */
thead th { padding: 11px 14px; font-size: 9.5px; }
tbody td { padding: 11px 14px; }

/* 财富榜：定宽后「游戏昵称」不再独占所有剩余宽度，两列积分贴到右侧 */
#rk-wealth table { table-layout: fixed; }
#rk-wealth thead th:nth-child(1) { width: 76px; }
#rk-wealth thead th:nth-child(2) { width: 96px; }
#rk-wealth thead th:nth-child(4),
#rk-wealth thead th:nth-child(5) { width: 200px; }
#rk-wealth tbody td:nth-child(2) { color: var(--ink-3); }
#rk-wealth tbody td:nth-child(3) { overflow: hidden; text-overflow: ellipsis; }
#rk-wealth tbody tr.me-row td:nth-child(3) { color: var(--lime); }

/* 昵称区与积分区之间加一条细线，长表格更容易横向对齐着读 */
#rk-wealth thead th:nth-child(4),
#rk-wealth tbody td:nth-child(4) { border-left: 1px solid var(--line); }
#rk-wealth tbody td.num { font-size: 13px; }

/* 表头文字跟数字列一起靠右，否则「本期新增积分」和下面的数字错位 */
#rk-wealth thead th:nth-child(1),
#rk-wealth thead th:nth-child(4),
#rk-wealth thead th:nth-child(5) { text-align: right; }

/* ===== 5. 空态：给一块能认出来的区域，而不是一行灰字 ===================== */
#ann-list > .empty,
.wbody > .empty,
#grade-detail > .empty {
  padding: 40px 20px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--surface) 45%, transparent);
  color: var(--ink-2);
}
/* 公告页只有一条空态时，不要拉成整行宽的扁框 */
#ann-list > .empty {
  max-width: 560px;
  margin: 6px auto 0;
  padding: 54px 24px;
  line-height: 1.9;
}
#ann-list > .empty::before {
  content: "◌";
  display: block; margin-bottom: 12px;
  color: color-mix(in srgb, var(--lime) 72%, transparent);
  font: 400 24px/1 var(--mono);
  letter-spacing: 0;
}

/* 空的「还没数据」提示：中性空态框，不抢红字 */
.msg.hollow {
  margin-top: 0;
  padding: 28px 18px;
  text-align: center;
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--surface) 45%, transparent);
  color: var(--ink-2);
}

/* ===== 6. 并排卡片：底部对齐 ============================================ */
.wishgrid, .trgrid, .grade-charts { align-items: stretch; }

/* 翻译页：两边都在卡内撑满，底部按钮落在同一条基线上 */
.trgrid .swin { display: flex; flex-direction: column; }
.trgrid .swin > .tbar { flex: none; }
.trgrid .wbody { flex: 1; display: flex; flex-direction: column; }
.trgrid .tr-ta, .trgrid .tr-out { flex: 1; min-height: 200px; }
.tr-out.empty { display: flex; align-items: center; justify-content: center; }

/* 「换一条」是次操作：让出主色，别和「抽取运势」抢焦点 */
#shpick-btn {
  color: var(--ink); background: var(--surface-2);
  border-color: var(--line-2); clip-path: none;
}
#shpick-btn:hover { color: var(--lime); border-color: color-mix(in srgb, var(--lime) 52%, var(--line-2)); filter: none; }

/* ===== 7. 资产库：目录分批，收口处给一个明确的出口 ====================== */
/* 内容区变宽后 auto-fill 会挤成 5 列，卡片过窄、舰名压行；按 4 列重新定基准 */
.arsenal-ship-catalog { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 14px; }
.ars-more {
  display: flex; justify-content: center;
  padding: 16px 0 6px;
}
.ars-more .mini {
  min-width: 200px; min-height: 34px;
  letter-spacing: .1em; font-variant-numeric: tabular-nums;
}

/* ===== 8. 窄屏回落 ====================================================== */
@media (max-width: 1180px) {
  #rk-wealth thead th:nth-child(4),
  #rk-wealth thead th:nth-child(5) { width: 128px; }
}
@media (max-width: 980px) {
  .ovgrid { grid-template-columns: minmax(0, 1fr); }
  #rk-wealth thead th:nth-child(4),
  #rk-wealth thead th:nth-child(5) { width: 108px; }
}