/* 角色列表列宽下限（关键）：
       CSS2.1 规定 cell 的 min-width 在自动表格布局（table-layout:auto）下行为未定义，
       Chrome/WebView2 会无视 td/th 的 min-width 继续自适应压缩。
       因此改用「width + box-sizing:content-box」做列宽下限锚点：
       width 在 auto 布局里被当作该列的最小期望宽度（内容更宽则列自动放大，绝不会被压缩到下限以下）；
       content-box 保证 padding 不挤占内容区（否则 4em 的 width 扣掉 40px padding 只剩十几像素）。
       总宽超出可视区时 #tableScroll 出现横向滚动条。 */
    #dataTable th, #dataTable td { box-sizing: content-box; width: 4em; min-width: 4em; }
    #dataTable th:nth-child(4), #dataTable td:nth-child(4),
    #dataTable th:nth-child(5), #dataTable td:nth-child(5) { width: 8em; min-width: 8em; }
    #dataTable th:nth-child(13), #dataTable td:nth-child(13) { width: 10em; min-width: 10em; }
    #dataTable th:nth-child(14), #dataTable td:nth-child(14) { width: 8em; min-width: 8em; }
    /* 表格自身最小宽度 = 内容最宽（列只放大不压缩）：容器更窄时出现横向滚动，更宽时列等比例放大 */
    #dataTable { min-width: max-content; }
    /* 头像列：表头与表体同宽、内容区 50px、表头强制单行（white-space:nowrap 杜绝“头像”俩字竖排换行） */
    #dataTable th:first-child,
    #dataTable td:first-child { width: 50px; min-width: 50px; white-space: nowrap; }
    #dataTable th:first-child { padding-left: 2px; padding-right: 2px; }
    #dataTable td:first-child { padding-left: 0; padding-right: 0; }
    /* 所有表头统一单行不换行（表头都很短，避免列宽不够时“头像/宠骑”等竖排） */
    #dataTable th { white-space: nowrap; }
    .data-table .avatar {
      display: block; width: 50px; height: 50px;
      object-fit: cover; object-position: center top;
      border-radius: 4px; overflow: hidden;
      background: var(--surface-secondary, #eef1f5);
      font-size: 18px; line-height: 50px; text-align: center; color: var(--text-tertiary, #999);
    }
    /* 多值单元格（道行/属性/浮生明细）内换行显示；宠物坐骑列按行（.pet-line）适配宽度、行间换行行内不折 */
    .data-table td.raw { white-space: pre-line; }
    .data-table td.pet-mount { white-space: normal; min-width: 10em; max-width: none; padding-left: var(--space-3); }
    .data-table td.pet-mount .pet-line { display: block; white-space: nowrap; line-height: 1.6; }
    /* 商品列表：容器可上下左右滚动，表头冻结（Excel 式），前 5 列固定左侧 */
    #tableScroll { position: relative; overscroll-behavior: contain; }
    /* 表头统一吸顶：z-index 必须高于表体冻结列，否则滚动时表体把表头盖住 */
    #tableScroll thead th { position: sticky; top: 0; z-index: 7; background: var(--bg-secondary, #f3f5f7); box-shadow: 0 1px 0 var(--border-primary, #e5e8ec); }
    /* 前 5 列表头：吸顶 + 吸左（left 由 applyFrozenColumns 按宽度计算覆盖），角角落最高层 */
    #tableScroll thead th[data-frozen] { position: sticky; left: auto; z-index: 8; }
    /* 表体前 5 列：吸左固定，实心背景盖住横向滚过的内容 */
    #tableScroll tbody td[data-frozen] { position: sticky; left: auto; z-index: 6; background: var(--bg-tertiary, #fff); box-shadow: 1px 0 0 var(--border-primary, #e5e8ec); }
    /* 角色名：官网详情链接 */
    .data-table a.name { color: var(--accent, #2f6bff); text-decoration: none; }
    .data-table a.name:hover { text-decoration: underline; }
    /* 转生等级小图标 */
    .data-table .rebirth-icon { width: 16px; height: 16px; vertical-align: -2px; margin-right: 2px; }
    /* 4K 或更高分辨率：自适应放大。字号变大 → em 列最小宽度成比例变大；
       头像 50px 同步放大到 64px（!important 盖过 createRoleAvatar 的内联 50px）。 */
    @media (min-width: 3840px) {
      #dataTable .avatar-cell { width: 64px !important; min-width: 64px !important; }
      #dataTable .avatar { width: 64px !important; height: 64px !important; }
    }