/* =========================================================
   角色图鉴 (Character Codex) 样式
   三块控制都照客户端的做法：
     外观 = 刻度行 + 「当前/总数」分数       (客户端创角 OptionTicks / FractionCounter)
     体型 = 方形比例盘 + 十字准星 + 预设点   (客户端创角 ProportionPad)
     数值 = 「状态」窗口的行版式「标签 : 值」 (客户端状态画面 / unitxt set11)
   配色与全站一致：浅色卡片 + #2f6fa8 主色
   ========================================================= */

.ccx-wrapper { max-width: 1180px; margin: 2em auto 3em; padding: 0 15px; }
.ccx-title { font-size: 24px; font-weight: bold; text-align: center; margin-bottom: 4px; letter-spacing: 6px; color: #2c3e50; }
.ccx-subtitle { text-align: center; color: #97a3b0; font-size: 12px; letter-spacing: 1px; margin-bottom: 20px; }
.ccx-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.06); padding: 16px 18px; margin-bottom: 16px; }
.ccx-err { color: #b04747; font-size: 13px; padding: 8px; }

/* ---------- 职业页签 ---------- */
.ccx-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
.ccx-tab {
    border: 1px solid #d8dee5; background: #f7f9fb; color: #40505f; border-radius: 9px;
    padding: 7px 10px; font-size: 13px; cursor: pointer; transition: all .15s; text-align: left; line-height: 1.35;
}
.ccx-tab b { display: block; color: #2c3e50; font-size: 13px; }
.ccx-tab .en { color: #93a1ad; font-size: 11px; letter-spacing: .5px; }
.ccx-tab:hover { border-color: #7fb3d5; }
.ccx-tab.active { background: #2f6fa8; border-color: #2f6fa8; }
.ccx-tab.active b, .ccx-tab.active .en { color: #fff; }
.ccx-hint { margin-top: 10px; font-size: 12px; color: #7b8894; }
.ccx-hint b { color: #2c3e50; }
.ccx-hint .dim { color: #a7b3bd; }

/* ---------- 主区: 3D + 面板 ---------- */
/* 舞台与画布同比例 (item3d 穿戴模式画布基准 440×560) ⇒ 卡片内没有空边;
   ★ 画布现在按**显示尺寸 × DPR** 渲染 (item3d 的 fitCanvasBuffer), 舞台多大画布就多清 */
.ccx-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.ccx-stage {
    position: relative; width: 100%; aspect-ratio: 440 / 560; min-height: 0;
    background: linear-gradient(160deg, #eef2f6 0%, #dfe6ec 100%);
    border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
/* 画布容器: 撑满舞台并在工具条/提示之下 (item3d 会清空它自己的容器, 所以它必须是内层元素) */
.ccx-canvashost { position: absolute; inset: 0; }
.ccx-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.ccx-stage .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #8b9aa8; font-size: 13px; pointer-events: none; }
.ccx-tools { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; max-width: calc(100% - 20px); z-index: 3; }
.ccx-tools button {
    border: 1px solid #cfd8e0; background: rgba(255,255,255,.92); color: #40505f; border-radius: 7px;
    padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.ccx-tools button.on { background: #2f6fa8; border-color: #2f6fa8; color: #fff; }
.ccx-stage-hint { position: absolute; left: 12px; bottom: 8px; font-size: 11px; color: #9aa7b4; }
.ccx-panel { background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.06); padding: 16px 18px; }

/* ---------- 分区 ---------- */
.ccx-sec { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px dashed #e9eef3; }
.ccx-sec:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.ccx-sec h4 {
    display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
    font-size: 13px; font-weight: bold; color: #2c3e50; letter-spacing: .5px;
}
.ccx-sec h4:before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: #2f6fa8; }
.ccx-sec h4 em { font-style: normal; font-weight: normal; font-size: 11px; color: #a7b3bd; letter-spacing: 0; }

/* ---------- 外观: 刻度行 + 分数 ---------- */
.ccx-opt { margin-bottom: 10px; }
.ccx-opt:last-child { margin-bottom: 0; }
.ccx-opt-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.ccx-opt-head .k { font-size: 12px; color: #40505f; }
.ccx-opt-head .frac { font-size: 11px; color: #93a1ad; font-variant-numeric: tabular-nums; }
.ccx-opt-head .frac b { color: #2f6fa8; font-size: 12px; }
.ccx-ticks { display: flex; flex-wrap: wrap; gap: 3px; }
.ccx-tick {
    width: 12px; height: 14px; padding: 0; border: 1px solid #d8dee5; border-radius: 3px;
    background: #f2f5f8; cursor: pointer; transition: background .12s, border-color .12s;
}
.ccx-tick:hover { border-color: #7fb3d5; }
.ccx-tick.on { background: #2f6fa8; border-color: #2f6fa8; box-shadow: 0 0 0 1px rgba(47,111,168,.22); }
/* ★ 带颜色的档位格 (服色 / 肤色 / 机器人机身色): 格子里就是该档的颜色 (客户端创角色板同款观感);
   选中态用**外圈**表示 —— 别把颜色盖掉, 否则看不出这档是什么色 */
.ccx-ticks-sw { gap: 4px; }
.ccx-ticks-sw .ccx-tick {
    width: 16px; height: 16px; border-radius: 4px; background: var(--sw, #f2f5f8);
    border-color: rgba(0,0,0,.25);
}
.ccx-ticks-sw .ccx-tick:hover { border-color: #2f6fa8; }
.ccx-ticks-sw .ccx-tick.on {
    background: var(--sw, #2f6fa8); border-color: #2f6fa8;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(47,111,168,.55);
}
.ccx-swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ccx-sw { width: 20px; height: 20px; border-radius: 5px; border: 1px solid #cbd5de; cursor: pointer; padding: 0; }
.ccx-sw.on { outline: 2px solid #2f6fa8; outline-offset: 1px; }
.ccx-swatches input[type=color] { width: 28px; height: 22px; padding: 0; border: 1px solid #cbd5de; border-radius: 5px; background: #fff; }
/* 颜色ID: 站内已有客户端徽章图 (character_viewer/resources/images/icon/sectionid) */
.ccx-sectrow { display: flex; flex-wrap: wrap; gap: 6px; }
.ccx-sectbadge {
    width: 30px; height: 30px; padding: 2px; border: 1px solid #e2e8ee; border-radius: 7px;
    background: #fff; cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.ccx-sectbadge:hover { border-color: #7fb3d5; }
.ccx-sectbadge.on { border-color: #2f6fa8; box-shadow: 0 0 0 1px rgba(47,111,168,.22); }
.ccx-sectimg { display: block; width: 100%; height: 100%; object-fit: contain; }
.ccx-dot { display: inline-block; width: 100%; height: 100%; border-radius: 50%; background: #cbd5de; }
.ccx-st-head .ccx-sectimg { width: 20px; height: 20px; }

/* ---------- 体型: 客户端比例盘 ---------- */
.ccx-padwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; padding-left: 12px; }
.ccx-pad {
    position: relative; width: 100%; max-width: 280px; aspect-ratio: 1 / 1;
    background: linear-gradient(160deg, #f6f9fc, #e8eef5); border: 1px solid #c3cfda; border-radius: 6px;
    cursor: crosshair; touch-action: none; outline: none; user-select: none;
}
.ccx-pad:focus-visible { box-shadow: 0 0 0 2px rgba(47,111,168,.35); }
/* 准星: 与客户端同几何 —— 线宽 4/150、越出盘面 (客户端 15/150，这里收到 8% 免得戳出卡片) */
.ccx-pad-v, .ccx-pad-h { position: absolute; background: rgba(47,111,168,.6); pointer-events: none; border-radius: 2px; }
.ccx-pad-v { top: -8%; height: 116%; width: 3px; margin-left: -1.5px; }
.ccx-pad-h { left: -8%; width: 116%; height: 3px; margin-top: -1.5px; }
.ccx-pad-dot {
    position: absolute; width: 9px; height: 9px; margin: -5px 0 0 -5px; padding: 0;
    border-radius: 50%; border: 1px solid #7d93a8; background: #fff; cursor: pointer;
}
.ccx-pad-dot:hover { background: #2f6fa8; border-color: #2f6fa8; }
.ccx-padinfo { display: flex; flex-direction: column; gap: 7px; padding-top: 2px; }
.ccx-padkv { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding-bottom: 5px; border-bottom: 1px solid #f0f3f7; }
.ccx-padkv .k { color: #7b8894; white-space: nowrap; }
.ccx-padkv .v { color: #2c3e50; font-variant-numeric: tabular-nums; text-align: right; }
.ccx-padkv .v small.dim { color: #a7b3bd; font-size: 10px; }
.ccx-padkv .dim { color: #93a1ad; }
.ccx-padtip { margin-top: 9px; font-size: 11px; color: #a7b3bd; line-height: 1.6; }

/* ---------- 数值: 客户端「状态」窗口 ---------- */
.ccx-lvrow { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ccx-lvrow .ccx-lvlab { flex: 0 0 auto; font-size: 12px; color: #7b8894; letter-spacing: 1px; }
.ccx-lvrow input[type=range] { flex: 1 1 auto; min-width: 60px; accent-color: #2f6fa8; }
.ccx-lvrow input[type=number] {
    flex: 0 0 72px; border: 1px solid #d8dee5; border-radius: 7px; padding: 4px 8px;
    font-size: 12px; color: #2c3e50; text-align: right;
}
.ccx-st { border: 1px solid #cfdae5; border-radius: 10px; overflow: hidden; background: #fbfdff; }
.ccx-st-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; font-size: 12px;
    background: linear-gradient(180deg, #eef4fa, #e3ecf5); border-bottom: 1px solid #dbe5ee; color: #40505f;
}
.ccx-st-head .ccx-st-lv { font-size: 13px; font-weight: bold; color: #1f3f66; letter-spacing: .5px; }
.ccx-st-head .ccx-st-cls { color: #5d6f80; }
.ccx-st-head .ccx-st-sect { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: #5d6f80; }
.ccx-st-head .dot { width: 9px; height: 9px; border-radius: 50%; background: #8fb6d9; display: inline-block; border: 1px solid rgba(0,0,0,.15); }
.ccx-st-head .dot.s0 { background: #6fbf73; } .ccx-st-head .dot.s1 { background: #4ec26a; }
.ccx-st-head .dot.s2 { background: #59b7e8; } .ccx-st-head .dot.s3 { background: #3f7fe0; }
.ccx-st-head .dot.s4 { background: #b07de0; } .ccx-st-head .dot.s5 { background: #ef7fbd; }
.ccx-st-head .dot.s6 { background: #e05f5f; } .ccx-st-head .dot.s7 { background: #ef9a44; }
.ccx-st-head .dot.s8 { background: #dcbf4a; } .ccx-st-head .dot.s9 { background: #e9edf2; }
.ccx-st-body { padding: 8px 12px 10px; }
/* 客户端版式: 标签列定宽 → 冒号 → 值右对齐撑满剩余 (照 pso-menu-char-line 的 9.85em/.5em/1fr) */
.ccx-q { display: grid; grid-template-columns: 7.6em .7em minmax(0, 1fr); align-items: baseline; font-size: 13px; line-height: 1.68; }
.ccx-q:before { content: ":"; grid-column: 2; grid-row: 1; color: #b3c2d1; text-align: center; }
.ccx-q .k { grid-column: 1; grid-row: 1; color: #5d6f80; white-space: nowrap; }
.ccx-q .v { grid-column: 3; grid-row: 1; text-align: right; color: #12314f; font-size: 15px; letter-spacing: .4px; font-variant-numeric: tabular-nums; }
.ccx-st-foot {
    display: flex; align-items: center; gap: 8px; padding: 6px 12px;
    border-top: 1px solid #e2ebf3; background: #f4f8fb; font-size: 11px; color: #8a9aa9;
}
.ccx-pg {
    border: 1px solid #cfdae5; background: #fff; color: #2f6fa8; border-radius: 5px;
    padding: 1px 8px; font-size: 11px; cursor: pointer; line-height: 1.5;
}
.ccx-pg:hover:not(:disabled) { background: #eef4fa; }
.ccx-pg:disabled { opacity: .35; cursor: default; }
.ccx-pg-num { font-variant-numeric: tabular-nums; }
.ccx-pg-tip { margin-left: auto; color: #a7b3bd; }

/* ---------- 数值 + 成长 (同一张卡两栏) ---------- */
.ccx-split { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: 22px; }
.ccx-split > .ccx-sec { min-width: 0; }
.ccx-split .ccx-sec { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.ccx-split .ccx-sec + .ccx-sec { border-left: 1px dashed #e9eef3; padding-left: 22px; }
/* 成长表比左边的状态窗口高得多 ⇒ 限高内滚 (表头 sticky), 免得卡片里留一大片空白 */
.ccx-split .ccx-tablewrap { max-height: 340px; overflow: auto; border: 1px solid #f0f3f7; border-radius: 8px; }
.ccx-split .ccx-table th { background: #fbfdff; }
.ccx-split .ccx-table td, .ccx-split .ccx-table th { padding: 4px 8px; }

/* ---------- 成长表 ---------- */
.ccx-tablewrap { overflow-x: auto; }
.ccx-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ccx-table th, .ccx-table td { padding: 5px 7px; text-align: right; border-bottom: 1px solid #eef1f5; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ccx-table th { color: #93a1ad; font-weight: normal; font-size: 11px; position: sticky; top: 0; background: #fff; }
.ccx-table td:first-child, .ccx-table th:first-child { text-align: left; }
.ccx-table tr.on td { background: #e7f1ff; }
.ccx-table .dim { color: #a7b3bd; }

/* ---------- 说明 ---------- */
.ccx-note { font-size: 11px; color: #6b7b8a; background: #f6f9fc; border: 1px solid #e8eef4; border-radius: 8px; padding: 10px 12px; line-height: 1.8; }
.ccx-note b { color: #2c3e50; }
.ccx-note code { background: #eaf0f6; border-radius: 3px; padding: 0 3px; }

/* ---------- 响应式 ---------- */
@media (max-width: 820px) {
    /* ★ 必须 minmax(0,1fr): 写成 1fr 时 auto 最小值会被"nowrap 的成长表"撑开 ⇒ 整页横向滚动 */
    .ccx-main { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .ccx-stage { max-width: 440px; margin: 0 auto; }
    .ccx-split { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .ccx-split .ccx-sec + .ccx-sec { border-left: 0; padding-left: 0; border-top: 1px dashed #e9eef3; padding-top: 14px; }
}
@media (max-width: 560px) {
    .ccx-wrapper { padding: 0 10px; }
    .ccx-title { font-size: 20px; letter-spacing: 3px; }
    .ccx-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .ccx-tab { padding: 6px 8px; }
    .ccx-tab b { font-size: 12px; }
    .ccx-stage { max-width: 440px; margin: 0 auto; }
    .ccx-padwrap { grid-template-columns: 1fr; gap: 10px; justify-items: start; }
    .ccx-pad { max-width: 220px; }
    .ccx-padinfo { width: 100%; }
    .ccx-q { grid-template-columns: 6.4em .7em minmax(0, 1fr); font-size: 12px; }
    .ccx-q .v { font-size: 14px; }
}

/* 老手机浏览器兼容（不认 aspect-ratio）：比例盒兜底 —— 说明见 npc_codex.css 末尾同款注释
   （两个舞台内部元素本就全是绝对定位，容器撑高即可） */
@supports not (aspect-ratio: 1 / 1) {
    .ccx-stage { height: 0; padding-top: 127.2727%; }   /* 440 / 560 */
    .ccx-pad { height: 0; padding-top: 100%; }
}