/* =========================================================
   装备图鉴 (Item Codex) 样式
   列表区与站内 armory 一致 (浅色卡片); 详情弹框还原
   PSOBB 游戏内窗口风格 (半透明蓝色渐变 + 亮青蓝描边,
   参照游戏内商店/兑换终端窗口组件)
   ========================================================= */

.codex-wrapper {
    max-width: 1180px;
    margin: 2em auto 3em;
    padding: 0 15px;
}

.codex-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 4px;
    letter-spacing: 6px;
    color: #2c3e50;
}

.codex-subtitle {
    text-align: center;
    color: #97a3b0;
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.codex-admin-link { color: #3498db; text-decoration: none; }
.codex-admin-link:hover { text-decoration: underline; }

.codex-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    padding: 14px 16px;
    margin-bottom: 16px;
}

/* ---------- 页签 ---------- */
.codex-tabs, .codex-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.codex-subtabs { margin-top: 10px; }

.codex-tab {
    border: 1px solid #dfe6ec;
    background: #f6f8fa;
    color: #5a6b7c;
    border-radius: 18px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: all .15s;
}

.codex-tab:hover { border-color: #b8c6d4; color: #2c3e50; }

.codex-tab.active {
    background: #2c3e50;
    border-color: #2c3e50;
    color: #fff;
}

.codex-tab.sub { padding: 4px 11px; font-size: 12px; border-radius: 14px; }
.codex-tab.sub.active { background: #3498db; border-color: #3498db; }

/* ---------- 筛选行 ---------- */
.codex-filter-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    flex-wrap: wrap;
}

.codex-input {
    flex: 1;
    min-width: 220px;
    padding: 8px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
}
.codex-input:focus { border-color: #3498db; }

.codex-select {
    padding: 8px 10px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    outline: none;
}

.codex-count { color: #97a3b0; font-size: 12px; margin-left: auto; white-space: nowrap; }

/* ---------- 卡片网格 ---------- */
.codex-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 12px;
}

.codex-item {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    padding: 10px;
    cursor: pointer;
    text-align: center;
    transition: transform .12s, box-shadow .12s;
    border: 1px solid transparent;
}

.codex-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.10);
    border-color: #cfe3f3;
}

.codex-item-img {
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 透明棋盘格 (工作台缩略图同款配色, 浅色版): 处理版图标是透明底, 棋盘格能说明"这是透明区" */
    background: repeating-conic-gradient(#f7fafd 0% 25%, #edf3f9 0% 50%) 50% / 10px 10px;
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

.codex-item-img img {
    max-width: 88px;
    max-height: 88px;
    /* 图标/掉落箱都是 192~256 平滑图 ⇒ 平滑缩放; 玛古 64px 像素图单独保留 pixelated */
    image-rendering: auto;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
}
.codex-item-img.mag img { image-rendering: pixelated; }

/* 预览图 256 大图按格子缩到 88px 内 */
.codex-item-img img.w-big { max-width: 96px; max-height: 96px; }

.codex-item-none {
    color: #b9c4cf;
    font-size: 26px;
    line-height: 88px;
}

.codex-item-name {
    font-size: 13px;
    color: #2c3e50;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.codex-item-stars {
    color: #f5b301;
    font-size: 11px;
    letter-spacing: 1px;
    min-height: 15px;
    margin: 2px 0 3px;
}
/* 星级 = 数字 + ★ (数字稍大, 12 星也读得清) */
.codex-item-stars b { font-size: 13px; font-weight: 700; }
.codex-item-stars .dim { color: #dfe6ec; }

.codex-item-sub {
    color: #97a3b0;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 稀有度名字色 (与游戏内一致的金色系) */
.codex-item.r1 .codex-item-name { color: #9a7b0a; }
.codex-item.r2 .codex-item-name { color: #1170b5; }
.codex-item.r3 .codex-item-name { color: #8a2be2; }

.codex-more { text-align: center; margin: 18px 0; }
.codex-btn {
    background: #3498db;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 30px;
    font-size: 14px;
    cursor: pointer;
}
.codex-btn:hover { background: #2f88c5; }

/* =========================================================
   详情弹框 — 与 shop_redeem.php 物资兑换信息终端完全同款
   (.dialog-content/.dialog-header/.psu-* 的视觉, css/app.css:3918)
   深青绿底 + 白色2px外框 + 青色内衬线(outline -6px) + 橙色渐变标题条
   ========================================================= */
.codex-modal { position: fixed; inset: 0; z-index: 2000; }
.codex-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(2px);
}

/* 窗体 = .dialog-content */
.codex-info {
    /* ★ 整窗等比系数 (2026-10-20 用户："2K 看着字很小")：2K/4K 上 13px 的字太小，
       按视口宽度分档把**整个弹窗**等比放大；宽/高都除以系数，保证放大后仍装得下。 */
    --codex-fs: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(var(--codex-fs));
    transform-origin: 50% 50%;
    width: min(720px, calc((100vw - 32px) / var(--codex-fs)));
    max-height: calc((100vh - 40px) / var(--codex-fs));    /* 老浏览器（不认 dvh）的兜底 */
    max-height: calc((100dvh - 40px) / var(--codex-fs));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #052b2b;
    border: 2px solid #fff;
    outline: 2px solid #00ffff;
    outline-offset: -6px;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
    border-radius: 16px;
    padding: 0 0 12px;
    color: #e0ffff;
    font-size: 13px;
    line-height: 1.65;
}

.codex-info::-webkit-scrollbar { width: 12px; }
.codex-info::-webkit-scrollbar-track {
    border: 1px solid #00ffff;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}
.codex-info::-webkit-scrollbar-thumb {
    background: #ff8800;
    border: 1px solid #fff;
    border-radius: 10px;
}

/* 标题栏 = .dialog-header (橙色渐变 + 黑字 + 青色底线) */
.ci-terminal-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    min-height: 45px;
    padding: 0 20px;
    background: linear-gradient(90deg, #ff8800 0%, #cc7000 100%);
    border-bottom: 2px solid #00ffff;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 12px 12px 0 0;
}
.ci-terminal-bar .led {
    width: 10px; height: 10px;
    background: #000;
    transform: rotate(45deg);
    flex: 0 0 auto;
    opacity: .55;
}
.ci-terminal-bar .tt-main {
    font-size: 18px;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 900;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
    padding-top: 2px;
}
.ci-terminal-bar .tt-sub {
    margin-left: auto;
    /* 让开右上角的关闭钮 (.ci-close 宽 28 + right 12): 否则 "ITEM INFO" 被圆钮压掉两个字母 */
    margin-right: 30px;
    font-size: 10px;
    color: rgba(0, 0, 0, .65);
    font-weight: 700;
    letter-spacing: 3px;
}

/* 关闭钮 = .close-btn (黑圆形, hover 白底橙字旋转) */
.ci-close {
    position: absolute;
    right: 12px;
    top: 9px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #000;
    color: #000;
    width: 28px;
    height: 28px;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 50%;
}
.ci-close:hover {
    background: #fff;
    color: #ff8800;
    transform: rotate(90deg);
}

.ci-body { padding: 18px 22px 6px; }

.ci-head { display: flex; gap: 14px; align-items: flex-start; }

/* 图标框 —— 对齐工作台缩略图方案 (item_data_workbench 的 .uie-li-thumb / .uie-prev-img):
   透明棋盘格底 + object-fit:contain 等比缩放 + 圆角 + 轻投影。
   ★ 弹窗是深色主题, 棋盘格用暗青两色 (浅色棋盘在这里会像贴了张白纸)。
   ★ 玛古保留自己的全息屏底 (见下方 .ci-preview.mag, 那是用户点名的效果)。 */
.ci-preview {
    flex: 0 0 128px;
    width: 128px;
    height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-conic-gradient(rgba(0, 255, 255, .05) 0% 25%, rgba(0, 0, 0, .22) 0% 50%) 50% / 15px 15px;
    border: 1px solid rgba(0, 255, 255, .3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 7px rgba(0, 0, 0, .38);
    border-radius: 10px;
    overflow: hidden;
}
.ci-preview img {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 9px;                 /* 留边: 图标不贴棋盘格边线 */
    object-fit: contain;          /* 等比缩放, 不裁切也不拉扁 (工作台缩略图同款) */
    object-position: center;
    /* 图标源多为 192/256px 平滑图 (图标/掉落箱) ⇒ 缩放走平滑; 玛古是 64px 像素图, 单独保留 pixelated */
    image-rendering: auto;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}
/* 服务端处理版图标 (e.icon): 192px 图自带 7% 内边距 ⇒ 这里缩边距, 让武器占满格子 */
.ci-preview.ico img { padding: 4px; }
.ci-preview .ci-none { color: #6fb8b8; font-size: 12px; text-align: center; padding: 0 8px; }

/* 玛古预览图是透明底的蓝色全息图 (官方 ItemKTep4 同源):
   · 弹窗预览框 = 游戏内玛古菜单的全息屏风格 (暗青底 + 横向扫描线 + 青色双描边 + 辉光)
   · 网格卡片   = 浅色底 (在白底页面上更清晰) */
.codex-item-img.mag {
    background: radial-gradient(ellipse at 50% 42%, #ffffff 0%, #eef5fa 55%, #d7e6f2 100%);
    border-color: rgba(0, 200, 220, 0.65);
    box-shadow: inset 0 0 10px rgba(0, 200, 220, 0.28);
}
.ci-preview.mag {
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.42) 0 1px, rgba(0, 0, 0, 0) 1px 4px),
        radial-gradient(ellipse at 50% 44%, #1a7c8a 0%, #0d4b57 42%, #05262d 100%);
    border: 2px solid #6fe3f2;
    box-shadow:
        inset 0 0 0 3px #04222a,
        inset 0 0 22px rgba(111, 227, 242, 0.5),
        0 0 12px rgba(111, 227, 242, 0.3);
}
.ci-preview.mag img {
    filter: drop-shadow(0 0 6px rgba(111, 227, 242, 0.85)) brightness(1.06);
    image-rendering: pixelated;   /* 64×64 全息图放大, 保持像素锐利 */
}

.ci-headmain { flex: 1; min-width: 0; padding-right: 8px; }

.ci-kind {
    color: #7fd8d8;
    font-size: 11px;
    letter-spacing: 2px;
}

.ci-name {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
    margin: 2px 0 4px;
    word-break: break-all;
}
.ci-name.r1 { color: #ffe06e; }
.ci-name.r2 { color: #7ed4ff; }
.ci-name.r3 { color: #e0a6ff; }

.ci-alt { color: #7fd8d8; font-size: 11px; }

.ci-stars {
    color: #ffd23d;
    font-size: 14px;
    letter-spacing: 2px;
    margin: 4px 0 2px;
    text-shadow: 1px 1px 0 #000;
}
/* 星级 = 数字 + ★ (数字放大; 0 星走灰色) */
.ci-stars b { font-size: 18px; font-weight: 700; }
.ci-stars.zero { color: #6b7a86; text-shadow: none; }
.ci-stars .dim { color: #0e4d4d; }

.ci-code { color: #7fd8d8; font-size: 11px; letter-spacing: 1px; }
.ci-code code {
    color: #bfffff;
    font-family: Consolas, monospace;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 255, 255, 0.35);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 12px;
}

/* 数据行 */
.ci-sec {
    border-top: 1px solid rgba(0, 255, 255, 0.25);
    margin-top: 12px;
    padding-top: 10px;
}

.ci-sec-title {
    color: #00ffff;
    font-size: 11px;
    letter-spacing: 4px;
    margin-bottom: 6px;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.6);
    /* ★ 标题里的 .ci-3d-hint 是 float:right; 必须在标题内部就被"装住"(BFC),
       否则窄栏里放不下的那个 hint 会溢出到下一行, 把后面的职业片行挤窄 (flex 是新 BFC, 会让开浮层) */
    display: flow-root;
}
.ci-sec-title::before {
    content: 'CN';
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0;
    background: #ff8800;
    color: #000;
    border-radius: 3px;
    padding: 0 3px;
    margin-right: 7px;
    text-shadow: none;
    vertical-align: 1px;
}

.ci-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 0;
}
.ci-row .k { color: #8fd0d0; white-space: nowrap; }
.ci-row .v { color: #e0ffff; text-align: right; word-break: break-all; white-space: pre-line; }
.ci-row .v.good { color: #7dff9e; }
.ci-row .v.bad { color: #ff8d8d; }
.ci-row .v.strong { color: #ff8800; }

.ci-classes { display: flex; flex-wrap: wrap; gap: 5px; }
.ci-class-chip {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #00ffff;
    color: #e0ffff;
    border-radius: 20px;
    padding: 1px 9px;
    font-size: 11px;
}

/* 预览图原图区 (取代原「穿戴效果」的天幻示意图): 深色衬底 + 青边, 点图看原尺寸 */
.ci-shot {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(0, 255, 255, 0.22);
    border-radius: 10px;
    padding: 8px;
    overflow: hidden;   /* 客户端显示区框的"框外压暗"是巨大 box-shadow, 要裁在框内 */
}
.ci-shot-wrap { position: relative; display: inline-block; max-width: 100%; line-height: 0; transition: transform .15s; }
.ci-shot-wrap:hover { transform: scale(1.02); }
.ci-shot img {
    display: block;
    max-width: 100%;
    max-height: 340px;
    width: auto;
    height: auto;
    object-fit: contain;
    image-rendering: auto;   /* 预览原图是 256/自定义上传图, 平滑缩放 */
    cursor: zoom-in;
    border-radius: 6px;
}
/* ★ 客户端显示区 (与物品数据工作台同款): 武器原图 256×256, 客户端鉴定界面只画左上 160×128
   ⇒ 虚线框 62.5% × 50% + 框外压暗, 一眼看出玩家最终看到哪一块 */
.ci-shot-frame {
    position: absolute;
    left: 0;
    top: 0;
    width: 62.5%;
    height: 50%;
    border: 1px dashed rgba(90, 200, 255, .9);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .22);
    border-radius: 2px;
    pointer-events: none;
}
/* 玛古原图只有 64×64 (全息底) —— 2 倍整数放大, 保持像素锐利 */
.ci-shot.mag img { width: 128px; image-rendering: pixelated; }

.ci-note { color: #6fb8b8; font-size: 11px; margin-top: 12px; line-height: 17px; }
.ci-note b { font-weight: 600; }


/* 移动端适配 */
@media (max-width: 720px) {
    .codex-info {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 24px);    /* 老浏览器兜底 */
        max-height: calc(100dvh - 24px);
    }
    .ci-terminal-bar { min-height: 42px; padding: 0 12px; border-radius: 12px 12px 0 0; }
    .ci-terminal-bar .tt-main { font-size: 16px; letter-spacing: 1px; }
    .ci-terminal-bar .tt-sub { display: none; }
    .ci-close { right: 8px; top: 7px; width: 32px; height: 32px; font-size: 18px; }
    .ci-body { padding: 14px 14px 4px; }
    /* 头部竖排: 大图居中 + 文字居中 */
    .ci-head { flex-direction: column; align-items: center; }
    .ci-preview { flex: 0 0 auto; width: 168px; height: 168px; }
    .ci-headmain { padding-right: 0; text-align: center; width: 100%; }
    .ci-name { font-size: 18px; }
    .ci-stars { font-size: 12px; letter-spacing: 1px; }
    .ci-row { font-size: 12.5px; }
    .ci-row .k { white-space: normal; }
    .ci-shot img { max-width: calc(100vw - 80px); }
    .codex-count { margin-left: 0; }
}

/* 超窄屏 (手机竖屏) */
@media (max-width: 400px) {
    .ci-preview { width: 140px; height: 140px; }
    .ci-name { font-size: 16px; }
    .codex-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 7px; }
    .codex-item-img { height: 70px; }
    .codex-item-img img { max-width: 62px; max-height: 62px; }
}

/* ---------- 图片放大查看 (灯箱) ---------- */
#codex-zoom {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.88);
    cursor: zoom-out;
}
#codex-zoom img {
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);     /* 老浏览器兜底 */
    max-height: calc(100dvh - 48px);
    image-rendering: pixelated;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
}
.ci-preview img { cursor: zoom-in; transition: transform .15s; }
.ci-preview img:hover { transform: scale(1.04); }

.ci-drop-more {
    background: rgba(0, 0, 0, 0.45);
    border: 1px dashed rgba(0, 255, 255, 0.5);
    color: #00ffff;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 11px;
    cursor: pointer;
    align-self: center;
}
.ci-drop-more:hover { background: rgba(0, 255, 255, 0.12); }

/* ---------- 物品描述 (unitxt 原文) ---------- */
.ci-desc {
    color: #d8f7f7;
    font-size: 12.5px;
    line-height: 1.8;
    white-space: pre-line;
    word-break: break-word;
    padding: 2px 0;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
}

/* 掉落来源 两行式条目 (行高统一) */
.ci-drops { display: flex; flex-direction: column; gap: 4px; }
.ci-drop-row {
    background: rgba(0, 0, 0, 0.35);
    border-left: 2px solid rgba(0, 255, 255, 0.45);
    border-radius: 3px;
    padding: 3px 9px;
    font-size: 12px;
}
.ci-drop-row.is-box { border-left-color: rgba(255, 136, 0, 0.6); }
.ci-dr-l1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 20px;
    line-height: 20px;
}
.ci-dr-l2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 10px;
    height: 18px;
    line-height: 18px;
    overflow: hidden;
}
.ci-dr-name {
    color: #e0ffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 55%;
    font-size: 12px;
}
.ci-dr-info {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #8fd0d0;
    white-space: nowrap;
    flex-shrink: 0;
}
.ci-dr-info b { font-weight: 400; font-size: 11px; }
.ci-dr-info em { font-style: normal; color: #ffd23d; font-size: 11px; }
.ci-sec-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    color: #9fd8d8;
    white-space: nowrap;
}
.ci-drop-all { font-style: normal; font-size: 10.5px; color: #6fb8b8; }
.ci-drop-rest .ci-drop-row { opacity: .92; }


/* 掉落行 章节标记 */
.ci-dr-info b + b::before { content: '·'; margin: 0 3px 0 0; color: #4a8a8a; }

/* ---------- 本服功能 / 合成 ---------- */
.ci-feat { margin-bottom: 8px; }
.ci-feat b {
    display: block;
    color: #ffd76a;
    font-size: 12.5px;
    margin-bottom: 2px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
}
.ci-feat span {
    display: block;
    color: #d8f7f7;
    font-size: 12px;
    line-height: 1.7;
    white-space: pre-line;
    word-break: break-word;
}
.ci-combo-row {
    background: rgba(0, 0, 0, 0.35);
    border-left: 2px solid rgba(255, 136, 0, 0.55);
    border-radius: 3px;
    padding: 3px 9px;
    font-size: 12px;
    line-height: 20px;
    color: #d8f7f7;
    margin-bottom: 3px;
}
.ci-combo-row b { color: #ffe06e; font-weight: 600; }
.ci-combo-row.from { border-left-color: rgba(0, 255, 255, 0.45); }
.ci-combo-res { color: #7dff9e; }
.ci-combo-row i {
    font-style: normal;
    font-size: 10.5px;
    color: #8fd0d0;
    margin-left: 6px;
}

/* ---------- 3D 预览 ---------- */
.ci-3d { display: flex; align-items: center; gap: 12px; }
.i3d-btn {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid #00ffff;
    color: #00ffff;
    border-radius: 6px;
    padding: 5px 16px;
    font-size: 12.5px;
    cursor: pointer;
}
.i3d-btn:hover { background: rgba(0, 255, 255, 0.12); }
.i3d-hint { font-size: 10.5px; color: #6fb8b8; }
.ci-3d-stage {
    margin-top: 8px;
    min-height: 220px;   /* 空态保底：加载中/失败时区域不塌成一条线（有 canvas 后由 canvas 撑高） */
    border: 1px solid rgba(0, 255, 255, 0.35);
    border-radius: 8px;
    overflow: hidden;   /* 取图模式的"框外压暗"是巨大 box-shadow, 要裁在容器内 */
    background: radial-gradient(ellipse at 50% 42%, rgba(30, 60, 90, 0.45), rgba(0, 8, 16, 0.75) 78%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ci-3d-stage canvas { max-width: 100%; height: auto !important; display: block; }
/* 舞台 + 舞台工具条 (自转 / 复位视角; 照怪物图鉴的做法)。
   ★ 工具条必须在 .ci-3d-stage **外面**: Item3D.render 会清空舞台自己的 innerHTML。 */
.ci-3d-wrap { position: relative; }
.ci-3d-tools { position: absolute; top: 12px; left: 10px; display: flex; gap: 6px; z-index: 3; }
.ci-3d-tool {
    border: 1px solid rgba(0, 255, 255, .45); background: rgba(8, 20, 28, .72); color: #9fdede;
    border-radius: 6px; padding: 3px 10px; font-size: 12px; cursor: pointer;
}
.ci-3d-tool:hover { border-color: #00ffff; color: #eafcff; }
.ci-3d-tool.on { background: #00b3b3; border-color: #00ffff; color: #04191c; }
.i3d-loading, .i3d-none { color: #8fd0d0; font-size: 12.5px; padding: 40px 20px; }

/* 3D 预览视图页签 (主体/副件 + 双持镜像) —— 取图面板用 */
.i3d-tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.i3d-tabs .i3d-tab {
    padding: 3px 10px; font-size: 12.5px; cursor: pointer;
    background: rgba(20, 40, 56, .08); color: #2c3e50;
    border: 1px solid rgba(0, 255, 255, .35); border-radius: 4px;
    flex: 0 0 auto; white-space: nowrap;   /* 不被 flex 压扁 (曾压成小方块) */
}
.i3d-tabs input[type=number] { flex: 0 0 auto; }
.i3d-tabs .i3d-tab.active { background: #2b6f8f; color: #eaf6ff; border-color: #2b6f8f; }
.i3d-tabs .i3d-tab:disabled { opacity: .45; cursor: default; }
.i3d-tabs .i3d-dual { font-size: 12.5px; color: #2c3e50; display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.i3d-tabs .i3d-meta { font-size: 12px; color: #7a8896; margin-left: auto; }

/* 3D 视角控制行 (自动摆姿 / 数值角度 / 微调) */
.i3d-viewrow { border-top: 1px dashed rgba(120,220,255,.35); padding-top: 6px; margin-top: 2px; }
.i3d-viewrow .i3d-tab { background: rgba(43,111,143,.12); }
/* 玛古颜色行: 18 个色块 (ItemMagEdit 色表) */
.i3d-colorrow { gap: 4px; }
.i3d-tabs .i3d-tab.i3d-sw {
    width: 20px; height: 20px; padding: 0; border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, .45);
}
.i3d-tabs .i3d-tab.i3d-sw.active { border: 2px solid #fff; box-shadow: 0 0 0 2px #2b6f8f; }


/* =========================================================
   全站物品弹窗 (js/item_popup.js) —— 复用品鉴弹窗样式, 这里只补弹窗自己的小零件
   ========================================================= */
/* 可点击的物品名 (页面列表里的名字 / 弹窗内的关联物品名) */
.ipop-name, [data-item-code], [data-item-name], [data-item] { cursor: pointer; }
.ipop-name { border-bottom: 1px dashed rgba(43,111,143,.5); }
.ipop-name:hover, [data-item-code]:hover, [data-item-name]:hover { color: #2b6f8f; }
/* 弹窗内的关联物品名 (合成材料/产物): 保持原色, 只加虚线下划线提示可点 */
.ci-body .ipop-link { border-bottom: 1px dashed rgba(43,111,143,.55); cursor: pointer; }
.ci-body .ipop-link:hover { color: #2b6f8f; }
/* 弹窗内的提示文案 (加载中 / 未找到 / 匹配说明) */
.ipop-msg { padding: 26px 18px; color: #5a6b7c; font-size: 13.5px; text-align: center; line-height: 1.7; }
.ipop-msg code { background: #f0f4f8; border-radius: 3px; padding: 1px 5px; }
.ipop-match { color: #97a3b0; font-size: 11.5px; padding: 2px 14px 0; }
.ipop-more { padding: 6px 14px 14px; text-align: right; }
.ipop-more a { color: #3498db; font-size: 12px; text-decoration: none; }
.ipop-more a:hover { text-decoration: underline; }

/* 色点 (掉落来源的 SectionID 十色 / 玛古颜色): 只有 class 而一直没有样式 → 一直是隐形的, 补上 */
.ci-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 2px;
    margin-right: 4px; vertical-align: -1px;
}

/* ==== 可折叠区块 (掉落来源等): 点标题展开 ==== */
.ci-fold-head { cursor: pointer; user-select: none; }
.ci-fold-head:hover { color: #00ffff; }
.ci-fold-arrow { float: right; opacity: .75; font-size: 11px; }

/* 3D / 穿戴预览 标题旁的小字提示 */
.ci-3d-hint { float: right; font-size: 11px; color: #8fd0d0; opacity: .8; letter-spacing: 0; }
.ci-char-stage { min-height: 300px; }

/* 穿戴预览职业切换 chips */
.ci-cls-row { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 12px 2px; }
/* 职业片一律单行 (窄栏里等宽网格会把长名字挤成两行, 行高参差反而更乱) */
.ci-cls-chip { white-space: nowrap; }
.ci-cls-chip {
    background: rgba(43, 111, 143, .15); border: 1px solid rgba(120, 220, 255, .25);
    color: #9fd8e8; font-size: 11px; padding: 2px 7px; border-radius: 8px; cursor: pointer;
}
.ci-cls-chip:hover { border-color: #8fd0d0; color: #e0ffff; }
.ci-cls-chip.on { background: #2b6f8f; color: #fff; border-color: #8fd0d0; }

/* 动作片 (穿戴预览): 复用职业片样式 —— 客户端 .rlc 根运动, 待机/走/攻击… */
.ci-act-row { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 12px 2px; align-items: center; }
.ci-act-row::before { content: '动作'; color: #7f9aa6; font-size: 11px; margin-right: 4px; }
.ci-act-chip {
    background: #14202a; border: 1px solid #2c4a58; color: #9fc4cf;
    font-size: 11px; padding: 3px 8px; border-radius: 3px; cursor: pointer; line-height: 1.5;
}
.ci-act-chip:hover { border-color: #8fd0d0; color: #e0ffff; }
.ci-act-chip.on { background: #2b6f8f; color: #fff; border-color: #8fd0d0; }

/* =========================================================
   宽屏自适应分栏 (2026-10-20)
   ---------------------------------------------------------
   窄屏 (<1024px): 保持原来的单列竖排 (手机/平板)。
   宽屏: 三块「面板」并排 —— 资料(含物品抬头) / 3D 预览 / 穿戴预览;
   掉落来源与数据来源通栏。面板内部改用间距+小标题分隔 (去掉满屏横线),
   视觉上是"三张卡片", 不再是三条浮空的窄条 (卡片高度按内容, 不强行拉齐)。
   分栏结构由 js/item_info.js::html() 输出 (.ci-cols/.ci-col-*)。
   ========================================================= */
.ci-cols { display: block; }
.ci-col { min-width: 0; }

@media (min-width: 1024px) {
    .codex-info { width: min(1120px, calc((100vw - 48px) / var(--codex-fs))); }
    .ci-body { padding: 18px 24px 10px; }
    .ci-cols {
        display: grid;
        /* 右栏 300~420: 穿戴预览是 440×560 的竖版画布, 栏越宽画布越高 ⇒ 卡在 420 免得弹窗又被拉长 */
        grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
        column-gap: 20px;
        /* 中屏: 预览是「3D + 穿戴」上下叠在右栏, 左栏资料不许被拉到那么高 (否则卡片里一大片空白) */
        align-items: start;
    }
    /* 没有 3D/穿戴预览的物品 (纯道具等) 不留空栏 */
    .ci-cols.no-view { display: block; }

    /* ---- 三块面板 ---- */
    .ci-col-info,
    .ci-view-main,
    .ci-view-dress {
        background: rgba(0, 10, 14, .32);
        border: 1px solid rgba(0, 255, 255, .14);
        border-radius: 10px;
        padding: 12px 14px 14px;
        min-width: 0;
    }
    .ci-col-view { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

    /* 面板内部: 只留小标题, 不再画满屏横线 */
    .ci-col-info .ci-sec,
    .ci-view-main .ci-sec,
    .ci-view-dress .ci-sec { border-top: 0; margin-top: 16px; padding-top: 0; }
    .ci-col-info .ci-head { border-bottom: 1px solid rgba(0, 255, 255, .12); padding-bottom: 12px; margin-bottom: 12px; }
    .ci-col-info .ci-head + .ci-sec,
    .ci-view-main > :first-child,
    .ci-view-dress > :first-child { margin-top: 0; }
}

/* 宽屏 (≥1280): 弹窗再放宽, 且 3D 预览与穿戴预览并排 (资料 | 3D | 穿戴) —— 一屏看完, 不用滚。
   ★ 只有"3D + 穿戴预览"都在时才这么做 (.two-view): 否则单看 3D 会被拉得过大。 */
@media (min-width: 1280px) {
    .codex-info { width: min(1240px, calc((100vw - 80px) / var(--codex-fs))); }
    /* 资料「含物品抬头」占 1/3, 两个预览各 1/3。
       ★ 不做等高: 玛古这类资料只有 3 行的物品, 拉高会在资料卡里留一大片空白。 */
    .ci-cols.two-view { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
    .ci-col-view.two-view { flex-direction: row; column-gap: 20px; align-items: flex-start; }
    .ci-col-view.two-view > .ci-view-main,
    .ci-col-view.two-view > .ci-view-dress { flex: 1 1 0; min-width: 0; }
}

/* =========================================================
   高分辨率等比放大 (2026-10-20, 用户："2K 看着字很小")
   ---------------------------------------------------------
   弹窗字号是固定的 13px —— 在 2560/3840 宽的屏上物理尺寸太小。
   按视口宽度分档乘 --codex-fs（宽/高已在上面除以该系数，放大后仍居中且装得下）。
   ★ 全屏 3D 覆盖层 / 图片灯箱是 body 级节点，不受这个缩放影响。
   ========================================================= */
@media (min-width: 1600px) { .codex-info { --codex-fs: 1.06; } }
@media (min-width: 1900px) { .codex-info { --codex-fs: 1.16; } }
@media (min-width: 2300px) { .codex-info { --codex-fs: 1.32; } }
@media (min-width: 3100px) { .codex-info { --codex-fs: 1.55; } }