/* ============================================================
程序自己的样式（登录 / 编辑 / 历史 / 差异 / 图片 …）
------------------------------------------------------------
style.css 是从旧 wiki 原样搬过来的，管的是「外观」：
三套主题、顶栏、正文排版、表格、盒子、名册、计算器。
这个文件只管旧 wiki 没有的、程序特有的部分。
颜色统一走 style.css 里的主题变量（--bg/--card/--text/--accent…）。
============================================================ */
/* ---------------- 差异对比用的颜色 ----------------
旧 wiki 没有「历史差异」这个功能，所以这四个变量在这里补。 */
:root, html[data-theme="dark"] {
--add: #4ade80; --add-bg: rgba(74, 222, 128, .14);
--del: #ff8a8a; --del-bg: rgba(255, 138, 138, .14);
}
html[data-theme="light"] {
--add: #1a7f37; --add-bg: #e6f6ea;
--del: #b42318; --del-bg: #fdeceb;
}
/* ---------------- 顶栏右侧的操作区 ---------------- */
.topbar-actions {
display: flex; align-items: center; gap: 8px; margin-left: 10px;
flex-shrink: 0;
}
.topbar-actions .who {
font-size: 12.5px; color: var(--text-dim); white-space: nowrap;
padding-left: 4px;
}
.topbar-actions .who b { color: var(--text); }
.topbar-actions .who .who-role {
font-style: normal; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
font-size: 11px; font-weight: 700;
color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.topbar-actions .sep {
width: 1px; height: 22px; background: var(--border); margin: 0 2px;
}
/* ---------------- 账号与权限页 ---------------- */
/* 一行里：左边账号 + 权限下拉，右边改密码，再往右（靠最右）是删除账号 —— 中间留空好点 */
table.t.acct td { vertical-align: top; }
table.t.acct .ua-col { width: 52%; }
.uacts {
display: flex; align-items: center; justify-content: space-between; gap: 18px;
flex-wrap: wrap;
}
.uacts .inline { margin: 0; }
.uacts input[type="password"] { width: 130px; }
.roleform { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.roleform select {
padding: 5px 9px; font-size: 13px; font-family: inherit;
color: var(--text); background: var(--bg-2);
border: 1px solid var(--border); border-radius: 8px;
}
.tag.self {
display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
font-size: 11px; font-weight: 700; color: var(--accent);
background: color-mix(in srgb, var(--accent) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.rolebox {
margin: 16px 0 8px; padding: 12px 14px; border-radius: 12px;
border: 1px solid var(--border); background: var(--bg-2);
display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--text-dim);
}
.rolebox b { color: var(--text); margin-right: 8px; }
/* ---------------- 按钮 ---------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: 36px; padding: 0 14px;
border: 1px solid var(--border); border-radius: 9px;
background: var(--card); color: var(--text);
font-family: inherit; font-size: 13.5px; font-weight: 600;
text-decoration: none; white-space: nowrap; cursor: pointer;
transition: all .15s;
}
.btn:hover { background: var(--card-hover); border-color: var(--accent); box-shadow: var(--glow); color: var(--text); }
.btn.small { height: 32px; padding: 0 11px; font-size: 13px; }
.btn.tiny { height: 27px; padding: 0 9px; font-size: 12.5px; border-radius: 7px; }
.btn.primary {
background: var(--grad); border-color: transparent; color: #fff;
}
.btn.primary:hover { opacity: .9; color: #fff; box-shadow: var(--shadow-lg); }
.btn.ghost { background: transparent; }
.btn.danger { color: #ff8a8a; border-color: rgba(255, 138, 138, .35); }
.btn.danger:hover { background: rgba(255, 138, 138, .12); border-color: rgba(255, 138, 138, .55); color: #ff8a8a; }
html[data-theme="light"] .btn.danger { color: #b42318; border-color: rgba(180, 35, 24, .35); }
html[data-theme="light"] .btn.danger:hover { background: rgba(180, 35, 24, .08); color: #b42318; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* ---------------- 小字/工具类 ---------------- */
.dim { color: var(--text-dim); }
.right { text-align: right; }
.small { font-size: 13px; }
.spacer, .grow { flex: 1; }
/* ---------------- 内容容器（md.js 生成的那几种） ---------------- */
/* 名册的筛选：点按钮隐藏不符合的卡片（网格/筛选栏的样子在 style.css 里，这里只补两点） */
.roster-grid .char-card.hide { display: none; }
.roster-empty {
grid-column: 1 / -1; padding: 26px; text-align: center;
color: var(--text-dim); font-size: 14px;
}
.filter-row .fbtn { cursor: pointer; }
/* 计算器表：涨价的利润 / 普通利润 */
.calc-t td.profit-good { color: #6ee7a0; font-weight: 700; }
.calc-t td.profit-bad { color: #ff8a8a; font-weight: 700; }
.calc-t td.flat { color: var(--text-dim); }
html[data-theme="light"] .calc-t td.profit-good { color: #0f8a4b; }
html[data-theme="light"] .calc-t td.profit-bad { color: #c0392b; }
.calc-t td.buy { text-align: center; }
/* 列表里嵌套的子列表 */
.li-sub { margin: 4px 0 4px 6px; padding-left: 10px; border-left: 1px solid var(--border-soft); }
/* ---------------- 表单 ---------------- */
.panel {
display: block;
margin: 18px 0; padding: 18px 20px;
background: var(--card); border: 1px solid var(--border);
border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.panel > *:first-child { margin-top: 0; }
.panel > *:last-child { margin-bottom: 0; }
/* ⚠️ input:not([type]) 这一条必须有：HTML 里 不写 type 就默认是文本框，
而 input[type="text"] 这种选择器**匹配不到"没写 type"的** —— 登录页的用户名框
以前就是这种，结果它没吃到下面的宽度，跟密码框比例对不上。 */
.content input:not([type]),
.content input[type="text"],
.content input[type="password"],
.content input[type="search"],
.content input[type="number"],
.content input[type="file"],
.content select,
.content textarea {
width: 100%; padding: 9px 13px;
border: 1px solid var(--border); border-radius: 9px;
background: var(--bg-2); color: var(--text);
font-family: inherit; font-size: 14px;
transition: all .15s;
}
.content input:not([type]) { color: var(--text); }
.content form.inline input:not([type]) { width: auto; min-width: 110px; }
/* 编辑页底部那条栏是横着一排的（备注框 + 保存按钮），不能让它独占一行 */
.content .editbar input:not([type]) { width: auto; min-width: 0; flex: 1 1 200px; }
.content input[type="file"] { padding: 7px 13px; }
.content input:focus, .content select:focus, .content textarea:focus {
outline: none; border-color: var(--accent); box-shadow: var(--glow); background: var(--card);
}
.content input[readonly] { color: var(--text-dim); background: var(--bg-2); }
.content label {
display: block; margin: 0 0 14px;
font-size: 13.5px; color: var(--text-dim);
}
.content label > input, .content label > select, .content label > textarea { margin-top: 6px; color: var(--text); }
.content form.inline {
display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
margin: 0; padding: 0; border: none; background: none;
}
.content form.inline input[type="text"],
.content form.inline input[type="password"] { width: auto; min-width: 110px; }
.content form.inline td, .content td form.inline { white-space: nowrap; }
/* ---------------- 提示条 ---------------- */
.flash {
margin: 0 0 20px; padding: 12px 16px;
background: var(--grad-soft); border: 1px solid var(--border);
border-left: 4px solid var(--accent-2); border-radius: var(--radius);
font-size: 14px;
}
.flash:empty { display: none; }
.err { color: #ff8a8a; font-weight: 600; }
html[data-theme="light"] .err { color: #b42318; }
/* ---------------- 正文页脚的小字 ---------------- */
.page-foot {
margin-top: 46px; padding-top: 14px;
border-top: 1px solid var(--border-soft);
font-size: 12.5px; color: var(--text-faint);
}
.page-foot code { font-size: 12.5px; }
/* ---------------- 计算器：物品库里的搜索框 + 对比用的只读标记 ---------------- */
/* 物品库那一行：标题 + 提示 + 搜索框。.calc-sub 本身是 flex，直接排就行 */
.calc-lib-search {
flex: 0 1 260px; min-width: 130px; height: 27px; padding: 0 10px;
font-size: 12.5px; border-radius: 7px;
}
.calc-lib-count {
font-size: 11.5px; color: var(--text-faint); white-space: nowrap; margin-left: 6px;
}
/* 对比表里「用哪个价」那一列的小标记 */
.calc-ro-badge {
display: inline-block; padding: 1px 7px; border-radius: 20px;
font-size: 11.5px; line-height: 1.6; white-space: nowrap;
background: var(--bg-2); color: var(--text-dim); border: 1px solid var(--border-soft);
}
.calc-ro-badge.up {
background: var(--accent-soft); color: var(--accent-2); border-color: var(--accent-soft);
}
/* 填了涨价后售价才让勾 */
.calc-cmp-upbox[data-noup] { opacity: .35; }
/* 库里的「涨价」列窄一点，别把名称挤没了 */
.calc-lib-t th.calc-cmp-up-col, .calc-lib-t td.calc-cmp-up-col { width: 46px; }
/* ---------------- 背景图（每次刷新随机一张） ----------------
.bg-layer 是贴在 里的第一层：
z-index: 0 → 在 body 底色之上；顶栏/正文在 style.css 里是 z-index: 1，所以在它之上
filter: blur() → 默认毛玻璃；inset 往外撑一点 + scale，盖住模糊后边缘的透明边
html.bg-sharp → 点「🖼」切成清晰（按钮的选择记在浏览器里，刷新不丢）
::after 那层半透明底色是给文字垫背的（模糊时压重、清晰时压轻） */
.bg-layer {
position: fixed; inset: -5%; z-index: 0; pointer-events: none;
background-size: cover; background-position: center; background-repeat: no-repeat;
filter: blur(var(--bg-blur, 18px)) saturate(1.06);
transform: scale(1.06);
transition: filter .35s ease, transform .35s ease;
}
.bg-layer::after {
content: ''; position: absolute; inset: 0;
background: var(--bg); opacity: var(--bg-scrim, .62);
transition: opacity .35s ease;
}
html.bg-sharp .bg-layer {
filter: none; transform: none;
inset: 0; /* 模糊时才需要往外撑，清晰的图要正好铺满，拖动才好算 */
pointer-events: auto; /* 要能拖它 */
cursor: grab;
touch-action: none; /* 手机上手指拖动 = 移动图片，不是滚动页面 */
user-select: none;
}
html.bg-sharp .bg-layer.dragging { cursor: grabbing; }
html.bg-sharp .bg-layer::after { opacity: var(--bg-scrim-sharp, 0); }
/* 有背景图的时候就不显示那层星星了（叠一起太花） */
html.has-bg body::before { display: none; }
/* ---- 「看背景图」模式：把正文藏起来，好整张图看全 ----
用 opacity 而不是 display:none —— 这样版面还在，滚动位置不会跳，
切回来的时候你还在原来那一行的位置。
顶栏留着（不然没法点回来）；滚动条也收掉，看着更干净。
图比屏幕大（cover 会裁掉多出来的部分）→ 这个模式下可以用
拖动 / 滚轮 / 方向键把图挪开看，位置由 wiki.js 算（background-position）。 */
.layout { transition: opacity .3s ease; }
html.bg-sharp { overflow: hidden; }
html.bg-sharp .layout { opacity: 0; pointer-events: none; }
/* 底部那句小提示（进去时显示几秒自己消失） */
.bg-hint {
position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
z-index: 140; pointer-events: none;
padding: 9px 16px; border-radius: 999px;
background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
border: 1px solid var(--border); color: var(--text);
font-size: 13px; font-weight: 600; white-space: nowrap;
box-shadow: var(--shadow-lg), 0 0 20px var(--accent-glow);
backdrop-filter: blur(10px);
animation: bgHintIn .3s ease;
}
@keyframes bgHintIn {
from { opacity: 0; transform: translateX(-50%) translateY(10px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* 顶栏那个「看背景图 / 返回」按钮，切换后点亮 */
#bgToggle.active {
border-color: var(--accent); background: var(--accent-soft); color: var(--accent-2);
}
@media (max-width: 900px) { .bg-hint { font-size: 12px; padding: 8px 12px; bottom: 18px; } }
/* ---------------- 角色页（md 里的 :::角色 资料卡） ----------------
排法：
左边一大张立绘 —— **整张显示，不裁**：图自己决定框多高（右栏卡片跟着拉到一样高）
框的宽度：铺满左栏，但最多放到原图的 2 倍（`--art-nw` 由服务端给出，
游戏里那些 170×210 的半身像硬拉宽会糊），窄了就居中
右边资料卡：宽度**跟着文字长短自己定**（列宽 max-content），高度跟左栏对齐
卡片里：其它立绘（半身像等）摆在原来小头像那个位置 + 名字/星级/台词
→ 元素/职业/阵营…一行一行（多出来的高度摊到各行上，不会留一大片空）
简介放在下面占一整行（整段文字塞进窄卡片里不好看）
标签结构在 lib/md.js 的 renderChar() 里拼，这里只管长相。 */
/* ⚠️⚠️ 旧 wiki 的 style.css 里有两条「正文图片」的规则会打到角色页的图：
.content img → margin: 20px auto + 边框 + 圆角 + 阴影
.content img[alt*="立绘"] → 右浮动 + 宽高卡在 290×560（那是给正文里内嵌立绘用的）
我们的立绘 alt 里就带「立绘」两个字，所以会被那条浮动的规则抓走：
立绘跑到右边、宽度只剩 290px，而且浮动元素不占高度 → 左边那个框就空一大块、还很矮。
下面这几条把它们压回去（选择器比旧的那条更具体，顺序无关，稳的）。 */
.content .char-page img {
float: none; margin: 0; border: 0; border-radius: 0; box-shadow: none;
max-width: none; max-height: none;
}
/* 立绘：按框等比例缩放，**整张都留着，不裁**（比例和框不一样时四周留点白，居中放）。
框的高度 = 三栏里最高的那一栏，所以这里用 contain 把图缩进去。 */
.content .char-page .char-art-main img {
display: block; width: 100%; height: 100%;
object-fit: contain; object-position: center center;
}
.content .char-page .cp-arts img {
display: block; width: 84px; height: 84px;
object-fit: cover; object-position: center top;
border-radius: 14px; border: 1px solid var(--border);
}
.content .char-page .char-star img { width: auto; height: 22px; }
.content .char-page .fbtn-ic { width: auto; }
/* 浅色模式下的图标反色：外面 style.css 那套只管筛选栏和头像角标，
角色页里还有同一批"白底单色图"——职业 / 阵营徽标、属性名前面的小图标。
元素徽标是彩色的、稀有度星星是彩色的、技能图标是彩绘，这三类一律不动。 */
html[data-theme="light"].invert-icons .content .char-page .cp-badge.cp-j .fbtn-ic,
html[data-theme="light"].invert-icons .content .char-page .cp-badge.cp-f .fbtn-ic,
html[data-theme="light"].invert-icons .content .stats-panel .st-ic {
filter: invert(1) hue-rotate(180deg);
}
/* 同样被旧 wiki 的"正文元素"规则打到的还有：表格和链接
.content table/th/td → 每格四边都描边 + 偶数行自动加底色 + 表格自带底色
.content a / a:hover → 链接默认色 + 悬停时底下多一条横线（立绘外面那圈会多出这道线）
卡片里的资料表要的是"一行一条下边线"，所以这里把旧的压回去。 */
.content .char-page .char-kv { background: transparent; }
.content .char-page .char-kv th,
.content .char-page .char-kv td {
border: 0; border-bottom: 1px solid var(--border-soft);
}
.content .char-page .char-kv tr:last-child th,
.content .char-page .char-kv tr:last-child td { border-bottom: 0; }
.content .char-page .char-kv tbody tr { background: none; }
.content .char-page a { border-bottom: 0; }
.char-page {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px; align-items: stretch; margin: 4px 0 20px; /* 三栏各 1/3，高度拉齐 */
}
.char-art {
display: flex; /* 让里面那张图撑满整个框 */
justify-self: center; /* 图比栏窄时居中 */
width: min(100%, calc(var(--art-nw, 9999) * 2px)); /* 最多放大到原图的 2 倍 */
min-height: 240px;
border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elev) 90%, transparent), var(--bg-2));
box-shadow: var(--shadow-lg);
}
.char-art-main { flex: 1 1 auto; display: block; min-height: 0; }
.char-art-none {
flex: 1 1 auto;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; min-height: 300px; padding: 24px; text-align: center; color: var(--text-dim);
}
.char-art-none span { font-size: 42px; opacity: .3; line-height: 1; }
.char-art-none p { margin: 0; font-size: 13px; line-height: 2; }
.char-art-none code { font-size: 12px; }
/* 属性面板（第一行第三栏）：等级拖动条 + 竖着一列数值 */
.stats-panel {
display: flex; flex-direction: column; /* 高度跟另外两栏拉齐后，数值摊开 */
border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
background: color-mix(in srgb, var(--bg-elev) 86%, transparent);
box-shadow: var(--shadow-lg);
}
.stats-panel.empty { padding: 16px; }
.st-top {
flex: 0 0 auto;
display: flex; align-items: center; gap: 12px;
padding: 13px 15px; border-bottom: 1px solid var(--border-soft);
background: linear-gradient(135deg, var(--accent-soft), transparent 72%);
}
.st-lv { font-size: 13px; color: var(--text-dim); white-space: nowrap; }
.st-lv b { margin-left: 2px; font-size: 19px; color: var(--text); font-variant-numeric: tabular-nums; }
.st-range {
flex: 1 1 auto; min-width: 60px; height: 22px; cursor: pointer;
-webkit-appearance: none; appearance: none; background: transparent;
}
.st-range::-webkit-slider-runnable-track {
height: 6px; border-radius: 999px; border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-2) 75%, transparent);
}
.st-range::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
background: var(--accent-2); border: 2px solid var(--bg-elev);
box-shadow: 0 0 10px var(--accent-glow);
}
.st-range::-moz-range-track {
height: 6px; border-radius: 999px; border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-2) 75%, transparent);
}
.st-range::-moz-range-thumb {
width: 14px; height: 14px; border-radius: 50%;
background: var(--accent-2); border: 2px solid var(--bg-elev);
}
/* MORE 大面板头部那条等级拖动条（和页面上那条联动；样式沿用 .st-range 那一套） */
.m-modal .m-range {
-webkit-appearance: none; appearance: none;
width: 148px; height: 22px; margin: 0 4px 0 12px; cursor: pointer;
flex: 0 1 auto; background: transparent;
}
.m-modal .m-range::-webkit-slider-runnable-track {
height: 6px; border-radius: 999px; border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-2) 75%, transparent);
}
.m-modal .m-range::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
background: var(--accent-2); border: 2px solid var(--bg-elev);
box-shadow: 0 0 10px var(--accent-glow);
}
.m-modal .m-range::-moz-range-track {
height: 6px; border-radius: 999px; border: 1px solid var(--border);
background: color-mix(in srgb, var(--bg-2) 75%, transparent);
}
.m-modal .m-range::-moz-range-thumb {
width: 14px; height: 14px; border-radius: 50%;
background: var(--accent-2); border: 2px solid var(--bg-elev);
}
/* 窄屏：头部那几个元素允许换行，别把拖动条挤没了 */
@media (max-width: 720px) {
.m-modal .m-head { flex-wrap: wrap; }
.m-modal .m-range { width: 100%; margin: 6px 0 0; }
}
.st-list { flex: 1 1 auto; display: flex; flex-direction: column; padding: 3px 0; }
.st-row {
flex: 1 1 auto;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 9px 15px; border-bottom: 1px solid var(--border-soft);
}
.st-row:last-child { border-bottom: 0; }
.st-k { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-dim); }
/* 属性名前面那个小图标（图片\图标\生命.png 这种，有就显示、没有就只有文字） */
.content .stats-panel img { float: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.st-ic { width: 20px; height: 20px; object-fit: contain; display: block; flex: 0 0 auto; opacity: .95; }
.st-v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* ---- 属性太多时：底下一个「▾」小箭头 ----
上面 9 项常显，第 10 项只露一条缝（若隐若现）；
箭头只有周围一小圈是朦胧的，其它地方照常显示。
点开时：第 10 项往后整块往下"盖"出来（盖住下面的框），
上面的行一点不动、面板高度也不变 —— 靠的是固定高度的 .st-slot + 绝对定位的 .st-rest。 */
.stats-panel { position: relative; overflow: visible; }
.stats-panel > :first-child:not(.sec-title) { border-radius: 13px 13px 0 0; }
.st-slot { position: relative; flex: 0 0 auto; height: 20px; }
.st-rest {
position: absolute; left: 0; right: 0; top: 0;
max-height: 20px; overflow: hidden; /* 收起：第 10 项露一条缝 */
padding: 0;
}
.stats-panel.open .st-rest {
max-height: 62vh; overflow-y: auto;
padding: 4px 0 8px;
border: 1px solid var(--border); border-top: 0;
border-radius: 0 0 14px 14px;
background: var(--bg-elev);
box-shadow: var(--shadow-lg), 0 18px 40px rgba(0, 0, 0, .45);
z-index: 44;
}
.st-foot {
position: absolute; left: 0; right: 0; top: 0; height: 20px; z-index: 45;
display: flex; align-items: center; justify-content: center;
pointer-events: none; /* 只有箭头能点 */
}
.st-more {
pointer-events: auto; position: relative;
width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; color: var(--accent-2); cursor: pointer;
}
/* 只有箭头周围一小圈朦胧：一个圆形径向渐变 + 模糊 */
.st-more::before {
content: ''; position: absolute; inset: -13px; border-radius: 50%;
background: radial-gradient(closest-side,
color-mix(in srgb, var(--bg-elev) 94%, transparent) 42%, transparent 100%);
filter: blur(3px);
}
.st-more .arw {
position: relative; display: block; width: 0; height: 0;
border-left: 5px solid transparent; border-right: 5px solid transparent;
border-top: 6px solid currentColor;
}
.stats-panel.open .st-more .arw { border-top: 0; border-bottom: 6px solid currentColor; }
.st-more:hover { color: var(--text); }
.char-info {
display: flex; flex-direction: column; /* 高度跟另外两栏拉齐后，表格摊开占满 */
border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
background: color-mix(in srgb, var(--bg-elev) 86%, transparent);
box-shadow: var(--shadow-lg);
min-width: 0; /* 宽度就是那一栏的 1/3 */
}
.char-head {
flex: 0 0 auto;
display: flex; align-items: center; gap: 14px;
padding: 14px 16px 13px; border-bottom: 1px solid var(--border-soft);
background: linear-gradient(135deg, var(--accent-soft), transparent 72%);
}
/* 其它立绘（半身像等）：就摆在原来小头像那个位置
（尺寸/圆角在上面那条 .content .char-page .cp-arts img 里，这里只管排版） */
.cp-arts { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
.cp-arts img { background: var(--bg-2); }
.cp-arts a:hover img { border-color: var(--accent); }
.char-headtext { min-width: 0; }
.char-en { font-size: 12px; letter-spacing: .16em; font-weight: 700; color: var(--text-dim); }
.char-nm { display: flex; align-items: center; gap: 9px; font-size: 24px; font-weight: 800; line-height: 1.5; }
.char-star { display: inline-flex; align-items: center; }
.char-star img { height: 22px; width: auto; }
.char-quote { margin-top: 4px; font-size: 13.5px; color: var(--text-dim); }
.char-kv { width: 100%; border-collapse: collapse; flex: 1 1 auto; } /* 撑满卡片剩下的高度 */
.char-kv th {
width: 84px; padding: 9px 14px; text-align: left; white-space: nowrap;
font-size: 13px; font-weight: 600; color: var(--text-dim);
background: color-mix(in srgb, var(--bg-2) 65%, transparent);
border-bottom: 1px solid var(--border-soft);
}
.char-kv td { padding: 9px 14px; font-size: 14px; border-bottom: 1px solid var(--border-soft); }
.char-kv tr:last-child th, .char-kv tr:last-child td { border-bottom: 0; }
.ci-none { color: var(--text-dim); opacity: .45; }
/* 元素 / 职业：直接套筛选栏那套 .fbtn + .fbtn-ic（图标高度、圆角、字号、
内边距全是同一套变量），看着和筛选界面一模一样；只是不能点 */
.char-kv .fbtn.cp-badge {
margin: 1px 5px 1px 0; cursor: default; font-size: 13.5px;
}
.char-kv .fbtn.cp-badge:hover {
border-color: var(--border); background: var(--bg-2); color: var(--text-dim);
box-shadow: none;
}
.char-intro {
margin: 0 0 22px; padding: 14px 18px; font-size: 14px; line-height: 1.95;
border: 1px solid var(--border); border-radius: 14px;
background: color-mix(in srgb, var(--bg-elev) 82%, transparent);
}
/* 名册卡片（角色一览那面头像墙）：
悬停浮起来 / 边框发亮 / 手型光标 都是 style.css 里 .char-card:hover 本来就有的，别动它。
这里只补两件事：
① 给「还没建页面」那张卡片右下角的 ＋ 角标一个定位基准
② 那种卡片加个虚线边框（管理员点一下就是按模板建页） */
.roster-grid .char-card { position: relative; }
.roster-grid .char-card.no-page { border-style: dashed; }
.roster-grid .char-card.no-page:hover { border-color: var(--accent); }
.char-card .char-new {
position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
border-radius: 999px; font-size: 15px; font-weight: 700;
color: var(--accent-2); background: var(--accent-soft); border: 1px solid var(--accent);
}
/* 页面顶部按钮行里的表单（比如「🪄 给 N 个角色建页」）不占额外一格 */
.inline-form { display: contents; }
/* 中等屏幕：三栏放不下就变成两栏，属性面板挪到第二行占满 */
@media (max-width: 1100px) {
.char-page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats-panel { grid-column: 1 / -1; }
}
/* 手机 / 窄窗口：全部竖着排（立绘这时候不用再裁，整张按宽度缩） */
@media (max-width: 760px) {
.char-page { grid-template-columns: 1fr; gap: 14px; }
.stats-panel { grid-column: auto; }
.char-art { width: 100%; min-height: 0; }
.char-art-main { min-height: 0; }
.content .char-page .char-art-main img {
height: auto; object-fit: contain; object-position: center;
}
.char-art-none { min-height: 240px; }
.char-nm { font-size: 22px; }
}
/* 技能面板（一个技能一块：图标切换 + 等级拖动条 + 倍率一列）
标签结构在 lib/md.js 的 renderSkills() 里，拖动条/切换在 公开\wiki.js 第 10 段。
拖动条和等级那行直接复用属性面板的 .st-top / .st-range / .st-lv。 */
.skills-panel {
border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
background: color-mix(in srgb, var(--bg-elev) 86%, transparent);
box-shadow: var(--shadow-lg);
margin: 4px 0 26px;
}
.skills-panel.empty { padding: 16px; }
.sk-tabs {
display: flex; flex-wrap: wrap; gap: 16px 14px; align-items: flex-start;
padding: 14px 14px 10px; border-bottom: 1px solid var(--border-soft);
background: color-mix(in srgb, var(--bg) 45%, transparent);
}
/* 技能按钮 = 一个圆（图标铺满）+ 圆下面压着一点的名字胶囊
胶囊是深色半透明的，所以图标不管什么颜色，字都看得清 */
.sk-tab {
position: relative;
display: inline-flex; flex-direction: column; align-items: center;
padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
color: var(--text-dim); font: inherit;
-webkit-tap-highlight-color: transparent;
}
/* 圆：有图标就是那张图，没图标就是个空圆（::before 只在没图标时生成，
不然有图标的按钮会多出一个空圆叠在上面） */
.content .skills-panel .sk-tab img,
.sk-tab.no-icon::before {
content: '';
width: 70px; height: 70px; border-radius: 50%;
display: block; object-fit: cover;
border: 2px solid var(--border);
background: var(--bg-2);
box-shadow: var(--shadow);
transition: border-color .15s, box-shadow .15s, transform .15s;
}
/* 名字胶囊：往上压 13px，盖住圆的下沿 */
.sk-tab span {
position: relative; z-index: 2; margin-top: -13px;
padding: 3px 11px; border-radius: 999px; white-space: nowrap;
font-size: 12.5px; font-weight: 700; line-height: 1.5;
background: rgba(9, 13, 24, .78); color: #fff;
border: 1px solid rgba(255, 255, 255, .14);
backdrop-filter: blur(3px);
box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
/* 没图标的：胶囊用普通底色就行 */
.sk-tab.no-icon span {
background: var(--bg-2); color: var(--text-dim);
border-color: var(--border); box-shadow: none; text-shadow: none;
}
.content .skills-panel .sk-tab:hover img,
.sk-tab.no-icon:hover::before { border-color: var(--accent); transform: translateY(-2px); }
.sk-tab:hover { color: var(--text); }
.content .skills-panel .sk-tab.active img,
.sk-tab.no-icon.active::before {
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 18px var(--accent-glow);
}
.sk-tab.active span { background: var(--grad); color: #fff; border-color: transparent; }
.sk-tab.no-icon.active span { background: var(--grad); color: #fff; border-color: transparent; }
/* 旧 wiki 的 .content img 会给每张图加外边距/边框，技能图标要挡住 */
.content .skills-panel img {
float: none; margin: 0; border: 0; border-radius: 0; box-shadow: none;
max-width: none; max-height: none;
}
.sk-pane { display: none; }
.sk-pane.active { display: block; }
/* 「直接满级」的技能（星赐那种，写 等级上限 | MAX）：藏掉拖动条，只留一个 MAX */
.skills-panel.flat .sk-range { display: none; }
.skills-panel.flat .st-lv b { letter-spacing: 1px; color: var(--accent-2); }
.sk-head {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
padding: 13px 15px; border-bottom: 1px solid var(--border-soft);
}
.sk-name { font-size: 17px; font-weight: 800; }
.sk-type {
padding: 1px 10px; border-radius: 999px; font-size: 12.5px;
border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-2);
}
.sk-meta { font-size: 13px; color: var(--text-dim); }
.sk-meta b { color: var(--text); font-weight: 700; }
/* 「加成预览」「星脉密语」那种小标题 + 后面一条长横线（那一段没内容时整块不出现） */
.sk-note { display: flex; align-items: center; gap: 10px; padding: 13px 15px 0; }
.sk-note::after {
content: ''; flex: 1 1 auto; height: 1px; min-width: 20px;
background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, var(--border)), transparent);
}
.sk-note-t { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; letter-spacing: .5px; color: var(--accent-2); }
.sk-desc { padding: 10px 15px 13px; border-bottom: 1px solid var(--border-soft); font-size: 14px; line-height: 1.9; }
/* 描述里那些「跟着等级变的倍率」（{0} {1}）—— 让它一眼看出来是个数值 */
.sk-desc .sk-v {
display: inline-block; padding: 0 5px; border-radius: 6px;
font-size: 14.5px; font-weight: 800; color: var(--accent-2);
background: color-mix(in srgb, var(--accent) 14%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
font-variant-numeric: tabular-nums;
}
.sk-desc .sk-v.dim { color: var(--text-dim); font-weight: 400; background: none; border-bottom: 0; opacity: .55; }
.sk-desc p { margin: 0 0 8px; }
.sk-desc p:last-child { margin-bottom: 0; }
/* 描述里的属性字（风属性/雷属性）用的是对应图标的主色，这里让它粗一点更醒目 */
.sk-desc .el { font-weight: 800; }
.sk-rows { padding: 3px 0; }
.sk-row {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 9px 15px; border-bottom: 1px solid var(--border-soft);
}
.sk-row:last-child { border-bottom: 0; }
.sk-k { font-size: 13px; color: var(--text-dim); }
.sk-v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sk-v.dim { font-weight: 400; opacity: .45; }
/* 「各等级倍率」：点按钮在同一个框里往下展开一张全等级表 */
.sk-more { border-top: 1px solid var(--border-soft); padding: 10px 15px 13px; }
.sk-more-btn {
display: inline-flex; align-items: center; gap: 7px;
padding: 5px 13px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--border); background: var(--bg-2); color: var(--text-dim);
font-size: 12.5px; font-family: inherit;
transition: color .14s, border-color .14s, background .14s;
}
.sk-more-btn:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.sk-more-btn b { font-weight: 700; }
.sk-table-wrap { display: none; margin-top: 11px; overflow-x: auto; }
.sk-pane.expanded .sk-table-wrap { display: block; }
.content .skills-panel .sk-table {
width: 100%; border-collapse: collapse; background: transparent;
font-size: 13px; font-variant-numeric: tabular-nums;
}
.content .skills-panel .sk-table th,
.content .skills-panel .sk-table td {
border: 0; border-bottom: 1px solid var(--border-soft);
padding: 6px 9px; text-align: center; white-space: nowrap;
}
.content .skills-panel .sk-table thead th {
position: sticky; top: 0; background: color-mix(in srgb, var(--bg-2) 92%, transparent);
color: var(--text-dim); font-size: 12.5px;
}
/* 「详细属性」那张表：整张表的字都居中（包括左边那列属性名，跟数字对齐着看更整齐） */
.content .skills-panel .sk-table tbody th,
.content .skills-panel .sk-table .sk-th-name {
text-align: center; color: var(--text-dim); font-weight: 600;
background: color-mix(in srgb, var(--bg-2) 45%, transparent);
}
.content .skills-panel .sk-table tbody tr:last-child th,
.content .skills-panel .sk-table tbody tr:last-child td { border-bottom: 0; }
.content .skills-panel .sk-table th.on {
color: var(--accent-2); font-weight: 800;
background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.content .skills-panel .sk-table td.on { background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 700; }
/* ---- 段标题图（属性 / 技能 / 星赐 / 定弦 / 装备 / 资料 / 语音 …）----
图片都是"假透明"的棋盘格底，服务端已经清理成真透明并裁好了（图片\标题\_清理\）。
标题图骑在框的上边缘：一半在框外、一半压在框上。 */
.sec-title {
display: flex; align-items: center; justify-content: center;
margin: 0; padding: 0; border: 0; border-image: none; background: none;
}
.sec-title::before, .sec-title::after { content: none; }
.sec-title img { display: block; height: 46px; width: auto; max-width: 100%; }
/* 面板（属性 / 技能）：标题骑在上边缘，面板得让 overflow 可见，角落自己补圆角 */
.stats-panel.has-title, .skills-panel.has-title { position: relative; overflow: visible; margin-top: 36px; }
.stats-panel.has-title > .sec-title,
.skills-panel.has-title > .sec-title {
position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
z-index: 3; padding: 0 12px;
}
.stats-panel.has-title > :first-child:not(.sec-title),
.skills-panel.has-title > :first-child:not(.sec-title) { border-radius: 13px 13px 0 0; }
/* ## 小节：整节包一个框，标题骑在框的上边缘 */
.sec-box {
position: relative; margin: 40px 0 20px; padding: 30px 16px 14px;
border: 1px solid var(--border); border-radius: 14px;
background: color-mix(in srgb, var(--bg-elev) 55%, transparent);
box-shadow: var(--shadow);
}
.sec-box > h2.sec-title { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 0 12px; }
.sec-box > h2.sec-title + * { margin-top: 0; }
@media (max-width: 760px) {
.sec-title img { height: 34px; }
.sec-box { padding: 24px 12px 12px; }
}
/* ---------------- 评论区（每页各存各的） ---------------- */
.comments {
margin-top: 46px; padding-top: 22px;
border-top: 1px solid var(--border);
}
.comments h2 {
margin: 0 0 16px; padding: 0; font-size: 19px;
border: none; color: var(--text);
}
.comments h2::before { content: none; } /* 不要正文标题下面那条渐变短线 */
.cm-form textarea {
width: 100%; min-height: 84px; resize: vertical;
font-family: inherit; font-size: 14px; line-height: 1.7;
}
.cm-bar { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.cm-bar .grow { flex: 1; }
.cm-list { margin-top: 22px; }
.cm-item {
padding: 13px 15px; margin-bottom: 10px;
background: var(--card); border: 1px solid var(--border-soft);
border-radius: var(--radius);
}
.cm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cm-name { color: var(--accent-2); font-size: 14px; }
.cm-time { font-size: 12px; color: var(--text-faint); }
.cm-del { margin-left: auto; padding: 0; border: none; background: none; }
.cm-text {
font-size: 14.5px; line-height: 1.8; color: var(--text);
word-break: break-word; white-space: pre-wrap;
}
.cm-text + .cm-text { margin-top: 6px; }
/* ---------------- 「内容有更新，点这里刷新」左下角小条 ---------------- */
.update-tip {
position: fixed; left: 16px; bottom: 16px; z-index: 140;
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 14px; border-radius: 999px;
border: 1px solid var(--accent); background: var(--bg-elev); color: var(--text);
font-family: inherit; font-size: 13px; font-weight: 600;
box-shadow: var(--shadow-lg), 0 0 20px var(--accent-glow);
cursor: pointer; animation: updateTipIn .22s ease;
}
.update-tip:hover { background: var(--accent-soft); }
.update-tip span { font-size: 14px; }
@keyframes updateTipIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------------- 计算器：物品库的保存状态提示 ---------------- */
.calc-save-state { font-size: 12px; color: var(--text-faint); margin-left: 10px; white-space: nowrap; }
.calc-save-state.busy { color: var(--text-dim); }
.calc-save-state.ok { color: #6ee7a0; }
.calc-save-state.bad { color: #ff8a8a; font-weight: 600; }
html[data-theme="light"] .calc-save-state.ok { color: #0f8a4b; }
html[data-theme="light"] .calc-save-state.bad { color: #b42318; }
/* ---------------- 页面上的操作条（编辑 / 历史 …） ---------------- */
.page-actions {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin: 0 0 22px; padding: 9px 12px;
background: color-mix(in srgb, var(--card) 65%, transparent);
border: 1px solid var(--border-soft); border-radius: var(--radius);
}
.page-actions .grow { flex: 1; }
.page-actions .muted { font-size: 12.5px; color: var(--text-faint); }
/* ---------------- 编辑器 ---------------- */
.editform { margin: 0; }
.editform textarea {
min-height: 60vh; line-height: 1.75;
font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
font-size: 14px; resize: vertical;
}
.editform .bar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin: 14px 0 0;
}
.editform .bar .grow { flex: 1; }
.editbar {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin: 0 0 12px; font-size: 12.5px; color: var(--text-dim);
}
/* ---------------- 搜索结果 ---------------- */
.hit {
margin: 0 0 10px; padding: 12px 15px;
background: var(--card); border: 1px solid var(--border-soft);
border-radius: var(--radius);
transition: all .13s;
}
.hit:hover { border-color: var(--accent); background: var(--card-hover); }
.hit a { font-size: 15px; }
.hit .snip { margin-top: 5px; font-size: 13px; color: var(--text-dim); line-height: 1.7; }
/* ---------------- 最近改动 ---------------- */
.recent { list-style: none; margin: 18px 0; padding: 0; }
.recent li {
display: flex; align-items: baseline; gap: 10px;
padding: 10px 13px; margin-bottom: 6px;
background: var(--card); border: 1px solid var(--border-soft);
border-radius: var(--radius);
}
.recent li:hover { border-color: var(--accent); }
.recent .rc-name { font-weight: 600; }
.recent .rc-face { margin-left: auto; font-size: 12.5px; color: var(--text-faint); white-space: nowrap; }
/* ---------------- 图片页 ---------------- */
.thumb {
margin: 0; padding: 10px;
background: var(--card); border: 1px solid var(--border-soft);
border-radius: var(--radius); text-align: center;
}
.thumb img {
max-width: 100%; height: 120px; object-fit: contain;
border: none; border-radius: 6px; box-shadow: none; margin: 0 0 8px;
}
.thumb figcaption { font-size: 11.5px; color: var(--text-dim); line-height: 1.6; word-break: break-all; }
.thumb figcaption a { font-size: 11.5px; }
/* ---------------- 差异对比 ---------------- */
.diff { margin: 18px 0; }
.diff-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.diff-head { font-size: 13px; font-weight: 700; color: var(--text-dim); margin: 0 0 7px; }
.diff-t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.diff-t td { border: none; padding: 1px 6px; vertical-align: top; }
.diff-t .ln {
width: 44px; text-align: right; color: var(--text-faint);
user-select: none; font-size: 12px;
}
.diff-t td.add { background: var(--add-bg); color: var(--add); }
.diff-t td.del { background: var(--del-bg); color: var(--del); }
.diff-t td.same { color: var(--text-dim); }
.diff-t .fold { color: var(--text-faint); font-style: normal; }
.diff-stat .add-t { color: var(--add); font-weight: 700; }
.diff-stat .del-t { color: var(--del); font-weight: 700; }
/* ============================================================
:::克制 —— 属性克制表（行 = 受击方、列 = 攻击方）
125% 绿、100% 平常、75% 红；受击方两个属性时叠加（:::克制 双）
============================================================ */
.el-counter-wrap { margin: 18px 0; overflow-x: auto; }
.el-counter { --ec-buff: #3ecf8e; --ec-debuff: #f0676a; }
html[data-theme="light"] .el-counter { --ec-buff: #1c9a60; --ec-debuff: #cc3a3d; }
.content .el-counter {
width: 100%; border-collapse: collapse; background: transparent;
font-size: 13px; font-variant-numeric: tabular-nums;
}
.content .el-counter th,
.content .el-counter td {
border: 0; border-bottom: 1px solid var(--border-soft);
padding: 5px 8px; text-align: center; white-space: nowrap;
}
.content .el-counter thead th {
background: color-mix(in srgb, var(--bg-2) 88%, transparent);
color: var(--text); font-size: 12.5px;
}
.content .el-counter:not(.el-counter2) thead th { position: sticky; top: 0; }
.content .el-counter tbody th { background: color-mix(in srgb, var(--bg-2) 55%, transparent); font-weight: 700; }
.content .el-counter td.ec-b {
background: color-mix(in srgb, var(--ec-buff) 15%, transparent);
color: color-mix(in srgb, var(--ec-buff) 78%, var(--text)); font-weight: 700;
}
.content .el-counter td.ec-b2 {
background: color-mix(in srgb, var(--ec-buff) 34%, transparent);
color: color-mix(in srgb, var(--ec-buff) 88%, var(--text)); font-weight: 800;
}
.content .el-counter td.ec-d {
background: color-mix(in srgb, var(--ec-debuff) 15%, transparent);
color: color-mix(in srgb, var(--ec-debuff) 78%, var(--text)); font-weight: 700;
}
.content .el-counter td.ec-d2 {
background: color-mix(in srgb, var(--ec-debuff) 34%, transparent);
color: color-mix(in srgb, var(--ec-debuff) 88%, var(--text)); font-weight: 800;
}
.content .el-counter td.ec-n { color: var(--text-faint); }
.content .el-counter img.ec-ic {
width: 24px; height: 24px; object-fit: contain; display: block;
margin: 0 auto 2px; border: 0; border-radius: 0; box-shadow: none; float: none;
}
.content .el-counter .ec-nm { font-size: 12px; }
/* 左上角那格：一条对角斜线，右上角写「攻击」、左下角写「受击」 */
.content .el-counter th.ec-corner {
position: relative; min-width: 64px;
background-image: linear-gradient(to top right,
transparent calc(50% - .5px), var(--border) calc(50% - .5px),
var(--border) calc(50% + .5px), transparent calc(50% + .5px));
}
.content .el-counter th.ec-corner b,
.content .el-counter th.ec-corner i {
position: absolute; font-style: normal; font-weight: 700;
font-size: 11.5px; color: var(--text-dim); line-height: 1.2;
}
.content .el-counter th.ec-corner b { top: 3px; right: 4px; }
.content .el-counter th.ec-corner i { bottom: 3px; left: 4px; }
.content .el-counter2 th.ec-corner,
.content .el-counter2 tbody th:nth-child(2) { border-right: 1px solid var(--border); }
.ec-note { margin: 8px 2px 0; font-size: 12.5px; color: var(--text-dim); }
/* ---------------- :::折叠 标题（点一下展开，默认收起） ---------------- */
.wfold {
margin: 16px 0; border: 1px solid var(--border); border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-elev) 82%, transparent); overflow: hidden;
}
.wfold > summary {
cursor: pointer; list-style: none; padding: 11px 15px;
font-weight: 700; font-size: 14px; color: var(--text);
display: flex; align-items: center; gap: 8px;
}
.wfold > summary::-webkit-details-marker { display: none; }
.wfold > summary::before {
content: "▸"; color: var(--accent-2); font-size: 12px;
transition: transform .16s; display: inline-block;
}
.wfold[open] > summary::before { transform: rotate(90deg); }
.wfold > summary:hover { background: var(--accent-soft); }
.wfold[open] > summary { border-bottom: 1px solid var(--border-soft); }
.wfold-b { padding: 4px 15px 14px; }
/* ============================================================
★ 稀有度配色：5 星金色、4 星紫色
------------------------------------------------------------
跟着资料卡里写的 `稀有度` 走（角色页读 :::角色 的稀有度，
「角色一览」读名册那一行第 2 格）。两个地方都会变：
· 角色页：立绘框 / 资料卡 / 属性面板 三栏镶同色的边 + 一圈柔光，
名字上色，5 星的立绘框上还有一道慢慢扫过的光
· 角色一览：头像卡片镶边、头像里一圈内描边、名字上色
颜色就是下面那几组十六进制，想换风格直接改；想再加一档（比如 6 星）
就照着抄一组，把选择器里的 5 / 4 换成那个数字。
============================================================ */
.char-page, .roster-grid .char-card {
/* 没写稀有度（或者写了别的档位）就用这套中性蓝灰，不至于没效果也不至于乱来 */
--rar: #8fa6c4; --rar-2: #cfdcea;
--rar-g1: rgba(143, 166, 196, .22); --rar-g2: rgba(143, 166, 196, .08);
}
.char-page[data-rarity^="5"], .roster-grid .char-card[data-r^="5"] {
--rar: #efc257; --rar-2: #ffe9ab;
--rar-g1: rgba(239, 194, 87, .34); --rar-g2: rgba(239, 194, 87, .10);
}
.char-page[data-rarity^="4"], .roster-grid .char-card[data-r^="4"] {
--rar: #a97bf0; --rar-2: #dcc7ff;
--rar-g1: rgba(169, 123, 240, .34); --rar-g2: rgba(169, 123, 240, .10);
}
/* 浅色主题：金/紫都压深一点，不然糊在白底上看着脏 */
html[data-theme="light"] .char-page[data-rarity^="5"],
html[data-theme="light"] .roster-grid .char-card[data-r^="5"] {
--rar: #bf8a12; --rar-2: #e8b73c;
--rar-g1: rgba(191, 138, 18, .24); --rar-g2: rgba(191, 138, 18, .08);
}
html[data-theme="light"] .char-page[data-rarity^="4"],
html[data-theme="light"] .roster-grid .char-card[data-r^="4"] {
--rar: #7b4ec6; --rar-2: #a97bf0;
--rar-g1: rgba(123, 78, 198, .24); --rar-g2: rgba(123, 78, 198, .08);
}
/* ---- 角色页：三栏一起镶边 ---- */
.char-page[data-rarity] .char-art,
.char-page[data-rarity] .char-info,
.char-page[data-rarity] .stats-panel {
border-color: color-mix(in srgb, var(--rar) 58%, var(--border));
box-shadow: var(--shadow-lg),
0 0 20px -6px var(--rar-g1),
0 0 60px -30px var(--rar-g2),
inset 0 1px 0 color-mix(in srgb, var(--rar-2) 20%, transparent);
}
.char-page[data-rarity] .char-nm {
color: color-mix(in srgb, var(--rar) 70%, var(--text));
text-shadow: 0 0 20px var(--rar-g1);
}
.char-page[data-rarity] .char-star img { filter: drop-shadow(0 0 5px var(--rar-g1)); }
.char-page[data-rarity] .cp-arts img { border-color: color-mix(in srgb, var(--rar) 45%, var(--border)); }
/* 5 星立绘框上那道慢慢扫过的光（不想要就删掉下面这一小段） */
.char-page[data-rarity^="5"] .char-art { position: relative; }
.char-page[data-rarity^="5"] .char-art::after {
content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: linear-gradient(112deg, transparent 40%,
color-mix(in srgb, var(--rar-2) 28%, transparent) 50%, transparent 60%);
background-size: 250% 100%; background-repeat: no-repeat;
animation: rar-shine 6.5s ease-in-out infinite;
}
@keyframes rar-shine {
0% { background-position: 135% 0; }
45%, 100% { background-position: -60% 0; }
}
/* ---- 角色一览：头像卡片 ---- */
.roster-grid .char-card[data-r^="5"],
.roster-grid .char-card[data-r^="4"] {
border-color: color-mix(in srgb, var(--rar) 50%, var(--border));
background: linear-gradient(180deg,
color-mix(in srgb, var(--rar) 9%, var(--card)), var(--card) 62%);
box-shadow: var(--shadow), 0 0 16px -8px var(--rar-g1);
}
.roster-grid .char-card[data-r^="5"]:hover,
.roster-grid .char-card[data-r^="4"]:hover {
border-color: var(--rar);
box-shadow: var(--shadow-lg), 0 0 24px -6px var(--rar-g1), 0 0 46px -20px var(--rar-g2);
}
.roster-grid .char-card[data-r^="5"] .char-face::after,
.roster-grid .char-card[data-r^="4"] .char-face::after {
content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rar) 55%, transparent),
inset 0 -34px 34px -26px var(--rar-g1);
}
.roster-grid .char-card[data-r^="5"] .char-name,
.roster-grid .char-card[data-r^="4"] .char-name {
color: color-mix(in srgb, var(--rar) 72%, var(--text));
border-top-color: color-mix(in srgb, var(--rar) 34%, var(--border-soft));
}
/* 系统里关了动画就老老实实不动 */
@media (prefers-reduced-motion: reduce) {
.char-page[data-rarity^="5"] .char-art::after { animation: none; }
}
/* ---------------- 图片：拖动摆位置 + 左/中/右对齐 ---------------- */
/* 图片位置：就是「🖼 调整图片位置」拖出来的偏移量（存在 数据\图片位置.json）。
用 transform 平移，不动排版；没拖过的图这两个值是 0，等于什么都没变。 */
.content img[data-imgn] {
transform: translate(var(--img-dx, 0px), var(--img-dy, 0px)) scale(var(--img-z, 1));
}
/* 「角色一览」的头像有自己的缩放/位移（--ox/--oy/--oz，写在名册那一行里），
网页上拖出来的偏移/缩放（--img-dx/--img-dy/--img-z）跟它叠加，两套互不打架 */
.roster-grid .char-card .char-face > img {
transform: translate(calc(var(--ox, 0px) + var(--img-dx, 0px)), calc(var(--oy, 0px) + var(--img-dy, 0px)))
scale(calc(var(--oz, var(--face-zoom, 1.28)) * var(--img-z, 1)));
}
body.img-drag .content img[data-imgn],
body.img-drag .content img[data-avatar] {
cursor: grab; position: relative; z-index: 3;
outline: 1px dashed color-mix(in srgb, var(--accent) 70%, transparent);
outline-offset: 3px;
}
body.img-drag .content img[data-imgn]:hover,
body.img-drag .content img[data-avatar]:hover { outline-color: var(--accent-2); outline-style: solid; }
body.img-drag .content img[data-imgn].dragging,
body.img-drag .content img[data-avatar].dragging {
cursor: grabbing; opacity: .92; outline: 2px solid var(--accent-2);
}
/* 调整模式下，图片外面的链接不跳转（免得拖动时把原图点开 / 跳进角色页） */
body.img-drag .content a:has(> img) { cursor: grab; }
.img-drag-tip {
position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(8px);
padding: 8px 16px; border-radius: 999px; font-size: 13px; white-space: nowrap;
background: color-mix(in srgb, var(--bg-elev) 94%, transparent);
border: 1px solid var(--border); color: var(--text);
box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none;
transition: opacity .16s, transform .16s; z-index: 999;
}
.img-drag-tip.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#imgDragBtn.active { border-color: var(--accent-2); color: var(--accent-2); background: var(--accent-soft); }
/* 图片对齐： —— left / right / center 都认（不写＝居中一块） */
.content img.img-l { float: left; display: block; margin: 4px 20px 14px 0; max-width: 46%; }
.content img.img-r { float: right; display: block; margin: 4px 0 14px 20px; max-width: 46%; }
.content img.img-c { float: none; display: block; margin: 18px auto; }
/* ---------------- 编辑页的「立绘 / 头像链接」小工具 ----------------
只在角色页的 ✏️ 编辑 界面出现（服务端渲染，见 server.js 的 artHelper）。
挑一张图 → 填进框 → 点「写入代码」→ 那行写进下面的 md，最后自己点保存。 */
.art-helper {
margin: 14px 0 16px; padding: 12px 14px;
border: 1px solid var(--border); border-radius: var(--radius);
background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
}
.art-helper .ah-title { font-weight: 700; font-size: 13.5px; margin-bottom: 9px; }
.art-helper .ah-row { display: flex; align-items: center; gap: 9px; margin-top: 7px; flex-wrap: wrap; }
.art-helper .ah-lb { flex: 0 0 46px; font-size: 13px; color: var(--text-dim); }
.art-helper .ah-val, .art-helper .ah-pick {
flex: 1 1 auto; min-width: 220px;
padding: 6px 10px; font-size: 13px; font-family: inherit;
color: var(--text); background: var(--bg-2);
border: 1px solid var(--border); border-radius: 8px;
}
.art-helper .ah-val:focus, .art-helper .ah-pick:focus { outline: none; border-color: var(--accent); }
.art-helper .ah-tip { margin-top: 9px; line-height: 1.8; }
/* ============================================================
🎮 角色页「游戏风」外壳（照游戏里角色详情做的，server.js 的 CHAR_STYLE = '游戏'）
------------------------------------------------------------
结构：.gp
├ .gp-rail 左边那一竖排角色头像（点一下换角色）
├ .gp-tabs 底部标签栏（详情 / 星赐 / 定弦 / 装备 / 资料 / 语音）
└ .gp-panes 每个标签一屏（详情 ＝ 原来的立绘/资料/属性三栏）
深色半透明面板 + 毛玻璃 + 细描边，跟游戏里一个味道；两套主题下都用深色面板。
============================================================ */
.gp {
--gp-bg: rgba(22, 27, 40, .58);
--gp-bg-2: rgba(30, 36, 52, .72);
--gp-line: rgba(255, 255, 255, .14);
--gp-line-2: rgba(255, 255, 255, .08);
--gp-tx: #f2f5fb;
--gp-dim: rgba(235, 241, 252, .62);
--gp-acc: #9fd0ff;
position: relative;
margin: 6px 0 10px;
padding-left: 104px; /* 给左边那条头像栏让位 */
min-height: 520px;
color: var(--gp-tx);
border-radius: 18px;
background:
linear-gradient(180deg, rgba(10,14,24,.18), rgba(10,14,24,.34));
}
/* ---- 左边：角色头像竖排 ---- */
.gp-rail {
position: absolute; left: 0; top: 0; bottom: 54px; width: 104px;
display: flex; flex-direction: column; align-items: center; gap: 10px;
padding: 12px 0 14px; overflow-y: auto; scrollbar-width: none;
}
.gp-rail::-webkit-scrollbar { width: 0; }
.gp-ava {
position: relative; flex: 0 0 auto;
width: 62px; height: 62px; border-radius: 16px; overflow: hidden;
border: 1px solid var(--gp-line); background: rgba(255,255,255,.06);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 10px rgba(0,0,0,.28);
transition: transform .14s, border-color .14s, box-shadow .14s;
}
.gp-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-ava:hover { transform: translateY(-2px); border-color: var(--gp-acc); }
.gp-ava.on {
border-color: var(--gp-acc);
box-shadow: 0 0 0 2px rgba(159,208,255,.55), 0 0 18px rgba(159,208,255,.45);
}
.gp-ava.none { opacity: .55; border-style: dashed; }
.gp-ava .gp-plus { font-size: 22px; color: var(--gp-dim); }
/* ---- 内容区 ---- */
.gp-panes { padding: 14px 16px 8px; }
.gp-pane { display: none; }
.gp-pane.on { display: block; }
/* ---- 底部标签栏 ---- */
.gp-tabs {
position: sticky; bottom: 0; z-index: 5;
display: flex; justify-content: center; flex-wrap: wrap; gap: 2px;
padding: 8px 10px; margin-top: 8px;
background: linear-gradient(180deg, rgba(12,16,26,.32), rgba(12,16,26,.72));
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
border-top: 1px solid var(--gp-line-2);
}
.gp-tab {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 18px; border: 0; border-radius: 999px; cursor: pointer;
font-family: inherit; font-size: 13.5px; color: var(--gp-dim);
background: transparent; transition: color .14s, background .14s;
}
.gp-tab i { font-style: normal; font-size: 9px; opacity: .5; }
.gp-tab:hover { color: var(--gp-tx); background: rgba(255,255,255,.07); }
.gp-tab.on { color: #fff; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px var(--gp-line); }
.gp-tab.on i { opacity: 1; color: var(--gp-acc); }
/* ---- 详情那一屏：把原来的三栏按游戏的样子排 ---- */
.gp .char-page {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: 16px;
margin-top: 0;
}
.gp .char-page > .char-info { grid-column: 2; }
.gp .char-page > .stats-panel { grid-column: 2; }
.gp .char-page > .char-art { grid-column: 1; grid-row: 1 / span 2; }
.gp .char-art,
.gp .char-info,
.gp .stats-panel {
border: 1px solid var(--gp-line);
border-radius: 16px;
background: var(--gp-bg) !important;
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
box-shadow: 0 6px 26px rgba(0,0,0,.22) !important;
}
.gp .char-art { background: linear-gradient(180deg, rgba(28,34,50,.42), rgba(18,22,34,.62)) !important; }
.gp .char-nm { color: #fff !important; text-shadow: 0 0 18px rgba(159,208,255,.35) !important; }
.gp .char-en, .gp .char-quote { color: var(--gp-dim) !important; }
.gp .char-kv th, .gp .char-kv td { color: var(--gp-tx); border-bottom-color: var(--gp-line-2) !important; }
.gp .char-kv th { color: var(--gp-dim); font-weight: 500; }
.gp .char-intro { color: var(--gp-dim); }
/* 属性面板：行 + 小方图标 + 右对齐数字（跟游戏里那张表一样）
⚠️ 这里**不能** overflow:hidden —— 属性展开是「绝对定位往下盖出来」的，
剪了 overflow 就等于点了箭头什么都不显示（之前就是这个 bug）。 */
.gp .stats-panel { }
.gp .stats-panel > :first-child:not(.sec-title) { border-radius: 15px 15px 0 0; }
.gp .st-top {
background: linear-gradient(135deg, rgba(255,255,255,.10), transparent 70%) !important;
border-bottom: 1px solid var(--gp-line-2) !important;
}
.gp .st-lv, .gp .st-v { color: var(--gp-tx); }
.gp .st-row { border-bottom: 1px solid var(--gp-line-2) !important; }
.gp .st-k { color: var(--gp-dim); }
.gp .st-ic { border-radius: 5px; background: rgba(255,255,255,.10); padding: 2px; }
.gp .st-more { border-top: 1px solid var(--gp-line-2) !important; }
.gp .sk-more-btn {
border-color: var(--gp-line) !important; color: var(--gp-tx) !important;
background: rgba(255,255,255,.08) !important;
}
/* 技能：左边描述/倍率，右边留一块「技能演示」位（md 里写 `演示 | 图片/技能/xxx.gif` 就显示） */
.sk-body { display: flex; gap: 14px; align-items: flex-start; }
.sk-main { flex: 1 1 auto; min-width: 0; }
.sk-demo {
display: none;
flex: 0 0 38%; min-width: 190px; min-height: 140px; max-height: 340px;
align-items: center; justify-content: center; overflow: hidden;
border-radius: 12px; border: 1px dashed var(--border);
background: color-mix(in srgb, var(--bg-2) 45%, transparent);
}
.sk-demo:has(img) { display: flex; } /* 有演示图就显示（经典风里也一样） */
.gp .sk-demo { display: flex; border-color: var(--gp-line); background: rgba(255,255,255,.04); }
.sk-demo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sk-demo-hint { font-size: 12px; line-height: 1.9; color: var(--text-dim); text-align: center; padding: 0 12px; }
.sk-demo-hint code { font-size: 11.5px; }
@media (max-width: 900px) { .sk-body { display: block; } .sk-demo { margin-top: 10px; min-height: 160px; } }
/* 技能：一排圆形图标（游戏里 BATTLE SKILL 那种） */
.gp .sk-tabs { gap: 10px; }
.gp .sk-tab {
width: 58px; height: 58px; border-radius: 50% !important;
border: 1px solid var(--gp-line) !important; background: rgba(255,255,255,.06) !important;
overflow: visible;
}
.gp .sk-tab img { border-radius: 50%; }
.gp .sk-tab.on, .gp .sk-tab.active { box-shadow: 0 0 0 2px var(--gp-acc), 0 0 16px rgba(159,208,255,.5); }
.gp .skills-panel, .gp .skills-pane {
background: var(--gp-bg) !important; border: 1px solid var(--gp-line) !important;
border-radius: 16px !important; color: var(--gp-tx);
}
.gp .sk-desc, .gp .sk-row, .gp .sk-table { color: var(--gp-tx); }
.gp .sk-k { color: var(--gp-dim); }
/* 小节（星赐/定弦/装备/资料/语音…）也做成游戏面板 */
.gp .gp-pane > h2, .gp .gp-pane > .sec-title { color: #fff; }
.gp .gp-pane table {
background: var(--gp-bg) !important; color: var(--gp-tx);
border-radius: 14px; overflow: hidden;
border: 1px solid var(--gp-line);
}
.gp .gp-pane th, .gp .gp-pane td { border-color: var(--gp-line-2) !important; color: var(--gp-tx); }
.gp .gp-pane th { background: rgba(255,255,255,.06) !important; color: var(--gp-dim) !important; }
.gp .gp-pane a { color: var(--gp-acc); }
@media (max-width: 1150px) {
.gp { padding-left: 0; }
.gp-rail {
position: static; width: auto; height: auto; bottom: auto;
flex-direction: row; padding: 10px; overflow-x: auto;
border-bottom: 1px solid var(--gp-line-2);
}
.gp .char-page { grid-template-columns: minmax(0, 1fr); }
.gp .char-page > .char-art, .gp .char-page > .char-info, .gp .char-page > .stats-panel {
grid-column: 1 !important; grid-row: auto !important;
}
}
/* ---- 属性面板底下的「MORE ▸」按钮 + 点开的大面板（照游戏里那块） ---- */
.gp .stats-panel .m-foot {
display: flex; justify-content: flex-end;
padding: 8px 14px 11px; border-top: 1px solid var(--gp-line-2);
}
.m-more {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 18px; border-radius: 999px; cursor: pointer;
font-family: inherit; font-size: 12.5px; letter-spacing: .08em; font-weight: 700;
color: var(--gp-tx, var(--text));
background: rgba(255, 255, 255, .10);
border: 1px solid var(--gp-line, var(--border));
transition: background .14s, border-color .14s;
}
.m-more:hover { background: rgba(255, 255, 255, .2); border-color: var(--gp-acc, var(--accent)); }
.m-more i { font-style: normal; font-size: 11px; }
/* ---- MORE 大面板 ----
⚠️ 这个弹窗打开时会被前端挪到 底下（面板上的 backdrop-filter 会让
position:fixed 失效），所以它**不能依赖 .gp 里的变量** —— 下面凡是用到
gp 变量的地方都写了兜底值，颜色也按"深色玻璃"写死，浅色主题下同样是这个观感。 */
.m-modal {
position: fixed; inset: 0; z-index: 60;
display: flex; align-items: center; justify-content: center; padding: 24px;
background: rgba(6, 9, 16, .62);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.m-modal[hidden] { display: none; }
.m-box {
position: relative; width: min(880px, 100%); max-height: 86vh; overflow: auto;
border-radius: 20px; border: 1px solid rgba(255, 255, 255, .14);
background:
radial-gradient(120% 100% at 0% 0%, rgba(96, 148, 255, .16), transparent 55%),
linear-gradient(180deg, rgba(28, 34, 48, .98), rgba(16, 20, 30, .98));
box-shadow: 0 26px 70px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07);
color: #fff;
}
/* 头部：粘在顶部，滚内容时不动 */
.m-head {
position: sticky; top: 0; z-index: 3;
display: flex; align-items: center; gap: 10px;
padding: 14px 16px 13px;
background: linear-gradient(180deg, rgba(24, 30, 44, .99), rgba(24, 30, 44, .88));
border-bottom: 1px solid rgba(255, 255, 255, .10);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.m-badge {
padding: 3px 12px; border-radius: 999px;
font-size: 12.5px; font-weight: 800; letter-spacing: .12em;
color: #0d1424; background: linear-gradient(180deg, #eaf4ff, #b6d6ff);
box-shadow: 0 2px 10px rgba(120, 170, 255, .35);
}
.m-who { font-size: 14px; font-weight: 700; color: #fff; }
.m-who::before { content: '·'; margin-right: 8px; color: rgba(255, 255, 255, .35); }
.m-who:empty { display: none; }
.m-spacer { flex: 1 1 auto; }
.m-lv {
font-size: 12.5px; letter-spacing: .06em; color: rgba(255, 255, 255, .62);
padding-right: 34px; /* 给右上角那颗 ✕ 让位 */
}
.m-lv b { font-size: 15px; color: #cfe4ff; font-variant-numeric: tabular-nums; }
.m-close {
position: absolute; right: 14px; top: 13px; z-index: 4;
width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
border: 1px solid rgba(255, 255, 255, .18);
background: rgba(255, 255, 255, .08); color: #fff; font-size: 13px; line-height: 1;
transition: background .14s, border-color .14s, transform .14s;
}
.m-close:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .4); transform: rotate(90deg); }
/* 内容 */
.m-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; }
.m-panel { display: flex; flex-direction: column; gap: 12px; }
.m-card {
border-radius: 14px; border: 1px solid rgba(255, 255, 255, .09);
background: rgba(255, 255, 255, .045);
overflow: hidden;
}
.m-card-h {
display: flex; align-items: center; gap: 9px;
padding: 9px 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
color: #dbe8ff;
background: linear-gradient(90deg, rgba(120, 170, 255, .18), rgba(120, 170, 255, .02));
border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.m-card-h i {
width: 3px; height: 13px; border-radius: 999px;
background: linear-gradient(180deg, #9fd0ff, #5a8dff);
box-shadow: 0 0 10px rgba(120, 170, 255, .7);
}
.m-rows { display: grid; gap: 0 22px; padding: 4px 10px 8px; }
.m-rows.one { grid-template-columns: minmax(0, 1fr); }
.m-rows.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-rows .st-row {
padding: 7px 4px; border-bottom: 1px dashed rgba(255, 255, 255, .07);
transition: background .12s;
}
.m-rows .st-row:last-child { border-bottom: 0; }
.m-rows .st-row:hover { background: rgba(255, 255, 255, .05); border-radius: 8px; }
.m-rows .st-k { color: rgba(255, 255, 255, .72); font-size: 13px; }
.m-rows .st-v {
font-size: 14px; font-weight: 700; color: #eaf3ff;
font-variant-numeric: tabular-nums;
}
.m-rows .st-ic { width: 18px; height: 18px; }
@media (max-width: 620px) {
.m-modal { padding: 12px; }
.m-box { max-height: 92vh; }
.m-rows.two { grid-template-columns: minmax(0, 1fr); }
}
/* 编辑页的「属性数值」小工具 */
.av-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 8px 12px; margin-top: 10px;
}
.av-grid label {
display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim);
}
.av-grid .av-val {
flex: 1 1 auto; min-width: 0;
padding: 5px 9px; font-size: 13px; font-family: inherit;
color: var(--text); background: var(--bg-2);
border: 1px solid var(--border); border-radius: 8px;
}
.av-grid .av-val:focus { outline: none; border-color: var(--accent); }
.av-level, .av-newlevel {
padding: 5px 9px; font-size: 13px; font-family: inherit;
color: var(--text); background: var(--bg-2);
border: 1px solid var(--border); border-radius: 8px;
}
.av-newlevel { width: 150px; }
/* （.m-panel h3 / .m-group 那几条是旧版弹窗用的，样式已经换成上面的卡片式，删掉了） */
body.m-open { overflow: hidden; }
@media (max-width: 900px) {
.m-cols { grid-template-columns: minmax(0, 1fr); }
.m-modal { padding: 12px; }
.m-box { max-height: 92vh; }
}
/* ---------------- 窄屏 ---------------- */
@media (max-width: 900px) {
.topbar { flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 8px; }
.topnav { order: 3; width: 100%; overflow-x: auto; }
.topnav-menu { flex-wrap: nowrap; }
.search-wrap { max-width: none; order: 2; }
.topbar-actions { margin-left: 0; }
.topbar-actions .who { display: none; }
.content { padding: 20px 16px 70px; }
.diff-col { grid-template-columns: 1fr; }
.thumb img { height: 90px; }
}
/* ============================================================
普通页面的统一美化
------------------------------------------------------------
说明：
· 全部加在 .content:not(:has(.gp)) 里 —— 角色页那套游戏风外壳（.gp）**完全不动**，
只有普通页面（登录/注册/账号/最近/图片/历史/编辑/名册…）会变。
· 颜色一律用变量（--card / --border / --accent…），所以深色和浅色主题都自动跟着走。
· 只加不删：这里都是后写的覆盖规则，删掉整段就能回到原样。
============================================================ */
/* ---- 内容区：一张玻璃卡片 ---- */
.content:not(:has(.gp)) {
padding: 26px 30px 34px;
border-radius: 18px;
border: 1px solid var(--border-soft);
background: linear-gradient(180deg,
color-mix(in srgb, var(--card) 86%, transparent),
color-mix(in srgb, var(--card) 70%, transparent));
box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .04);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
}
/* ---- 标题：右边拖一条渐变细线 ---- */
.content:not(:has(.gp)) h1 {
font-size: 25px; margin: 2px 0 20px;
display: flex; align-items: center; gap: 12px;
}
.content:not(:has(.gp)) h1::after {
content: ''; flex: 1 1 auto; height: 2px; border-radius: 2px;
background: linear-gradient(90deg, var(--accent), transparent 72%);
opacity: .5;
}
.content:not(:has(.gp)) h2 {
font-size: 18px; margin: 28px 0 12px; padding-left: 11px;
border-left: 3px solid var(--accent); border-radius: 2px;
}
.content:not(:has(.gp)) h2::before { display: none; }
/* ---- 表格：圆角 + 表头 + 悬停 ---- */
.content:not(:has(.gp)) table.t {
width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px;
border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
background: color-mix(in srgb, var(--bg-2) 55%, transparent);
box-shadow: var(--shadow);
}
.content:not(:has(.gp)) table.t th {
padding: 11px 14px; text-align: left; white-space: nowrap;
font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
color: var(--table-head-text); background: var(--table-head);
border-bottom: 1px solid var(--border);
}
.content:not(:has(.gp)) table.t td {
padding: 12px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle;
}
.content:not(:has(.gp)) table.t tbody tr:last-child td { border-bottom: 0; }
.content:not(:has(.gp)) table.t tbody tr { transition: background .12s; }
.content:not(:has(.gp)) table.t tbody tr:hover { background: var(--accent-soft); }
/* ---- 表单：面板、输入框、按钮 ---- */
.content:not(:has(.gp)) .panel {
padding: 20px 22px; border-radius: 16px;
border-color: var(--border-soft);
background: color-mix(in srgb, var(--card) 78%, transparent);
box-shadow: var(--shadow);
}
.content:not(:has(.gp)) input[type="text"],
.content:not(:has(.gp)) input[type="password"],
.content:not(:has(.gp)) input[type="search"],
.content:not(:has(.gp)) input[type="number"],
.content:not(:has(.gp)) select,
.content:not(:has(.gp)) textarea {
border-radius: 10px; border-color: var(--border);
transition: border-color .14s, box-shadow .14s, background .14s;
}
.content:not(:has(.gp)) input:focus,
.content:not(:has(.gp)) select:focus,
.content:not(:has(.gp)) textarea:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.content:not(:has(.gp)) label { font-size: 13.5px; }
.btn.primary {
background: var(--grad); color: #fff; border: 0;
box-shadow: 0 6px 18px rgba(77, 159, 255, .26);
}
.btn.primary:hover { filter: brightness(1.07); box-shadow: 0 8px 22px rgba(77, 159, 255, .34); }
.btn { border-radius: 10px; transition: background .14s, border-color .14s, box-shadow .14s, transform .1s, filter .14s; }
.btn:active { transform: translateY(1px); }
/* ---- 提示条（保存成功 / 出错）---- */
.flash {
padding: 11px 16px; margin-bottom: 18px; border-radius: 12px;
border-left: 3px solid var(--accent);
background: color-mix(in srgb, var(--accent) 13%, transparent);
box-shadow: var(--shadow);
}
/* ---- 评论 ---- */
.cm-item { border-radius: 14px; border-color: var(--border-soft); background: color-mix(in srgb, var(--card) 70%, transparent); }
/* ============================================================
登录 / 注册 / 安装：居中的卡片 + 顶上那个 wiki 图标
============================================================ */
.authwrap { display: flex; justify-content: center; padding: 18px 0 6px; }
.authcard {
width: 100%; max-width: 440px; padding: 30px 30px 26px;
border-radius: 20px; border: 1px solid var(--border-soft);
background: linear-gradient(180deg,
color-mix(in srgb, var(--card) 92%, transparent),
color-mix(in srgb, var(--bg-2) 86%, transparent));
box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .05);
text-align: center;
}
.authlogo {
display: block; width: 78px; height: 78px; margin: 0 auto 14px;
border-radius: 50%;
box-shadow: 0 10px 26px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .07);
}
.authtitle { justify-content: center; font-size: 22px; margin: 0 0 8px; }
.authtitle::after { display: none; }
.authsub {
margin: 0 0 20px; font-size: 13px; line-height: 1.75; color: var(--text-dim);
}
.authcard .panel {
margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none;
}
.authcard .panel label { text-align: left; }
/* 卡片里的输入框统一成一模一样的：同样高度、同样内边距、都是满宽。
用户名那个框 HTML 里没写 type，所以这里按"除了勾选框/单选框以外的所有 input"来选中，
不管有没有 type 都不会再出现"一个宽一个窄"。 */
.authcard input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]) {
width: 100%; height: 44px; padding: 0 14px;
font-size: 14.5px; border-radius: 10px; box-sizing: border-box;
}
.authcard select { height: 44px; }
.authcard .btn.primary { width: 100%; height: 44px; font-size: 14.5px; margin-top: 8px; }
.authcard .btn:not(.primary) { margin-top: 6px; }
.authcard .sep { display: none; }
.authcard .err { margin: 0 0 14px; font-size: 13.5px; }
/* ============================================================
账号与权限页：角色徽标
============================================================ */
.role-badge {
display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px;
font-size: 11.5px; font-weight: 700; vertical-align: middle;
}
.role-badge.owner { color: #ffcf6b; background: rgba(255, 196, 64, .14); border: 1px solid rgba(255, 196, 64, .38); }
.role-badge.admin { color: #86bdff; background: rgba(77, 159, 255, .14); border: 1px solid rgba(77, 159, 255, .38); }
.role-badge.reader { color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 12%, transparent); border: 1px solid var(--border); }
html[data-theme="light"] .role-badge.owner { color: #8a5a00; background: rgba(255, 196, 64, .22); border-color: rgba(190, 130, 0, .5); }
html[data-theme="light"] .role-badge.admin { color: #1657a8; background: rgba(77, 159, 255, .18); border-color: rgba(30, 100, 200, .42); }
/* 账号页的操作列：小屏时改密码和删除竖着排，别挤成一团 */
@media (max-width: 760px) {
.uacts { flex-direction: column; align-items: stretch; gap: 10px; }
table.t.acct .ua-col { width: auto; }
.content:not(:has(.gp)) { padding: 18px 16px 24px; }
}
/* ============================================================
价格计算器：照角色页那套"玻璃面板"重做皮肤
------------------------------------------------------------
· **纯 CSS**：一个 JS / 一个 HTML 都不动 —— 计算器的功能一点不受影响。
· 全部选择器都挂在 .calc-root 下面（原样式在 style.css 里是老写法），
两个类名叠起来的优先级更高，覆盖得住。
· 颜色还是走变量，深浅主题都跟着变；面板质感参照角色页的 .gp（圆角 + 描边 +
内高光 + 背景模糊），数值/标题用强调色。
============================================================ */
.calc-root {
--c-acc: var(--accent);
--c-acc2: var(--accent-2);
--c-line: color-mix(in srgb, var(--border) 85%, transparent);
--c-line-soft: color-mix(in srgb, var(--border) 55%, transparent);
--c-glass: color-mix(in srgb, var(--card) 80%, transparent);
--c-glass-2: color-mix(in srgb, var(--bg-2) 72%, transparent);
display: block;
margin: 20px 0 26px;
padding: 16px 18px 18px;
border-radius: 18px;
border: 1px solid var(--c-line);
background:
radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c-acc) 12%, transparent), transparent 55%),
linear-gradient(180deg, var(--c-glass), var(--c-glass-2));
box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .04);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
}
/* ---- 顶部那条：图标 + 标题 + 保存状态 ---- */
.calc-root .calc-head {
display: flex; align-items: center; gap: 10px;
margin: 0 -18px 14px; padding: 12px 18px 12px;
border-bottom: 1px solid var(--c-line-soft);
background: linear-gradient(180deg, color-mix(in srgb, var(--c-acc) 10%, transparent), transparent);
border-radius: 17px 17px 0 0;
}
.calc-root .calc-ico { font-size: 17px; filter: drop-shadow(0 0 8px var(--accent-glow)); }
.calc-root .calc-title {
position: relative; padding-left: 11px;
font-size: 15.5px; font-weight: 800; letter-spacing: .04em; color: var(--text);
}
.calc-root .calc-title::before {
content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 3px; height: 15px; border-radius: 999px;
background: linear-gradient(180deg, var(--c-acc2), var(--c-acc));
box-shadow: 0 0 10px var(--accent-glow);
}
.calc-root .calc-spacer { flex: 1 1 auto; }
.calc-root .calc-editing {
padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
color: var(--c-acc); background: var(--accent-soft); border: 1px solid var(--c-line);
}
/* ⚠️ 这里千万别写 color：这条权重比上面 769/770 的 .calc-save-state.ok/.bad 高，
会把「✅ 已保存」（绿）和「❌ 保存失败」（红）全压成灰色 ——
默认主题正好是深色，而浅色那两条（771/772）权重够高没被压，所以只有深色下看不出状态。
颜色统一交给 767-772 那一组管。 */
.calc-root .calc-save-state { font-size: 12px; }
/* ---- 面板（物品库 / 用料 / 结果）---- */
.calc-root .calc-pick,
.calc-root .calc-lib,
.calc-root .calc-row {
border-radius: 14px; border: 1px solid var(--c-line-soft);
background: color-mix(in srgb, var(--card) 55%, transparent);
box-shadow: var(--shadow);
}
.calc-root .calc-sub {
font-size: 12.5px; font-weight: 700; letter-spacing: .08em; color: var(--text-dim);
padding-bottom: 6px; border-bottom: 1px dashed var(--c-line-soft); margin-bottom: 8px;
}
.calc-root .calc-lib-tip, .calc-root .calc-tip { font-size: 12.5px; color: var(--text-dim); }
.calc-root .calc-none, .calc-root .calc-miss, .calc-root .calc-nomat {
display: block; padding: 10px 12px; border-radius: 12px;
font-size: 13px; color: var(--text-dim);
background: color-mix(in srgb, var(--bg-2) 60%, transparent);
border: 1px dashed var(--c-line-soft);
}
/* ⚠️ 这条原来加在包住整个「成本·用料」面板的容器上：font-weight:800 会被里面
所有 td 继承，整张用料表都变粗，连 `小计` 都不突出了；
而"成本合计"那行是 tfoot 的直接规则（style.css 里 font-weight:700），
反而比表体更细。现在只作用到该突出的数字上。 */
.calc-root .calc-cost tfoot td { font-weight: 800; color: var(--c-acc2); font-variant-numeric: tabular-nums; }
/* ---- 输入框 / 下拉 / 搜索 ---- */
.calc-root input.calc-in,
.calc-root input.calc-search,
.calc-root select.calc-select {
width: auto; padding: 7px 11px; border-radius: 10px;
border: 1px solid var(--c-line); background: var(--c-glass-2); color: var(--text);
font-family: inherit; font-size: 13.5px;
transition: border-color .14s, box-shadow .14s, background .14s;
}
.calc-root input.calc-in { width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.calc-root input.calc-search { width: 100%; }
.calc-root input.calc-in:focus,
.calc-root input.calc-search:focus,
.calc-root select.calc-select:focus {
outline: none; border-color: var(--c-acc);
box-shadow: 0 0 0 3px var(--accent-soft); background: var(--card);
}
/* ---- 按钮：胶囊 + 主按钮渐变（和角色页的按钮一个手感）---- */
.calc-root .calc-btn,
.calc-root .calc-addnew,
.calc-root .calc-x {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: 32px; padding: 0 14px; border-radius: 999px; cursor: pointer;
font-family: inherit; font-size: 13px; font-weight: 700;
color: var(--text); background: color-mix(in srgb, var(--card) 70%, transparent);
border: 1px solid var(--c-line);
transition: background .14s, border-color .14s, box-shadow .14s, transform .1s, filter .14s;
}
.calc-root .calc-btn:hover, .calc-root .calc-addnew:hover {
border-color: var(--c-acc); background: var(--card-hover);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.calc-root .calc-btn.primary {
color: #fff; border: 0;
background: linear-gradient(135deg, var(--c-acc), var(--c-acc2));
box-shadow: 0 6px 18px var(--accent-glow);
}
.calc-root .calc-btn.primary:hover { filter: brightness(1.07); }
.calc-root .calc-btn:active, .calc-root .calc-addnew:active { transform: translateY(1px); }
.calc-root .calc-x {
width: 28px; height: 28px; padding: 0; border-radius: 50%;
font-size: 13px; color: var(--text-dim);
}
.calc-root .calc-x:hover { color: #ff8a8a; border-color: rgba(255, 138, 138, .5); background: rgba(255, 138, 138, .1); }
.calc-root .calc-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 10px; }
/* ---- 表格：跟角色页的技能表一个样（半透明表头 + 虚线分隔 + 悬停）---- */
.calc-root table.calc-t,
.calc-root table.calc-mat,
.calc-root table.calc-lib-t {
width: 100%; border-collapse: separate; border-spacing: 0;
font-size: 13.5px; border-radius: 12px; overflow: hidden;
}
.calc-root table.calc-t th,
.calc-root table.calc-mat th,
.calc-root table.calc-lib-t th {
padding: 9px 11px; text-align: left; white-space: nowrap;
font-size: 12px; font-weight: 700; letter-spacing: .06em;
color: var(--table-head-text);
background: color-mix(in srgb, var(--c-acc) 14%, transparent);
border-bottom: 1px solid var(--c-line);
}
.calc-root table.calc-t td,
.calc-root table.calc-mat td,
.calc-root table.calc-lib-t td {
padding: 9px 11px; border-bottom: 1px dashed var(--c-line-soft);
color: var(--text);
}
.calc-root table.calc-t tbody tr:hover td,
.calc-root table.calc-mat tbody tr:hover td,
.calc-root table.calc-lib-t tbody tr:hover td { background: var(--accent-soft); }
.calc-root table.calc-t tbody tr:last-child td,
.calc-root table.calc-mat tbody tr:last-child td { border-bottom: 0; }
/* ---- 小标签（自产/外购、裁剪、只读…）---- */
.calc-root .calc-rowbuy-tag,
.calc-root .calc-crop-tag,
.calc-root .calc-ro-badge {
display: inline-block; padding: 1px 9px; border-radius: 999px;
font-size: 11.5px; font-weight: 700;
color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 12%, transparent);
border: 1px solid var(--c-line-soft);
}
.calc-root .calc-rowbuy-tag.buy { color: #ffcf6b; background: rgba(255, 196, 64, .14); border-color: rgba(255, 196, 64, .38); }
.calc-root .calc-rowbuy-tag.self { color: var(--c-acc); background: var(--accent-soft); border-color: var(--c-line); }
html[data-theme="light"] .calc-root .calc-rowbuy-tag.buy { color: #8a5a00; }
/* ---- 搜索命中列表 / 对比弹窗 ---- */
.calc-root .calc-hit {
display: block; width: 100%; text-align: left; cursor: pointer;
padding: 8px 12px; border-radius: 10px; border: 0;
background: transparent; color: var(--text); font-family: inherit; font-size: 13.5px;
}
.calc-root .calc-hit:hover { background: var(--accent-soft); }
.calc-root .calc-hits {
border-radius: 12px; overflow: hidden;
border: 1px solid var(--c-line-soft); background: var(--c-glass-2);
}
.calc-root .calc-cmp, .calc-root .calc-cmp-upbox {
border-radius: 14px; border: 1px solid var(--c-line);
background: var(--c-glass); box-shadow: var(--shadow-lg);
}
.calc-root table.calc-cmp-t th { color: var(--table-head-text); background: color-mix(in srgb, var(--c-acc) 14%, transparent); }
/* ---- 面板里的滚动条细一点（别抢戏）---- */
.calc-root * { scrollbar-width: thin; scrollbar-color: var(--c-line) transparent; }
.calc-root *::-webkit-scrollbar { width: 8px; height: 8px; }
.calc-root *::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--text-faint) 45%, transparent); border-radius: 999px;
}
.calc-root *::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 760px) {
.calc-root { padding: 12px 12px 14px; }
.calc-root .calc-head { margin: 0 -12px 12px; padding: 10px 12px; }
.calc-root input.calc-in { width: 74px; }
}
/* ============================================================
计算器 · 利润排名表：奖牌和名次不能断行 + 别让「物品」列把宽度全吃掉
------------------------------------------------------------
问题：
· 排名格原来只写了 width:58px，表格是自动布局、格子能被压得比这更窄，
所以「🥇1」里的奖牌和数字被折成了两行（看着像竖着放）。
· 「物品」那一列没有宽度上限，剩下的空间全归它 → 名字离右边的数字很远，
中间一大片空。
做法：名次格 nowrap（奖牌+数字变成不可断的一整块，列宽自动贴合它），
物品列给个上限、其它列 nowrap，多余宽度就会平摊到各列上。
============================================================ */
.calc-root .calc-cmp-t td.calc-rank,
.calc-root .calc-cmp-t th:first-child {
width: 1%; white-space: nowrap; text-align: center;
}
.calc-root .calc-cmp-t td.calc-rank span {
display: inline-flex; align-items: center; justify-content: center; gap: 3px;
min-width: 36px; padding: 2px 9px;
white-space: nowrap; /* ★ 关键：奖牌和数字必须在同一行 */
}
.calc-root .calc-cmp-t td.calc-cmp-name { width: 34%; }
.calc-root .calc-cmp-t th.calc-cmp-up-col,
.calc-root .calc-cmp-t td.calc-cmp-up-col { width: 1%; }
.calc-root .calc-cmp-t th, .calc-root .calc-cmp-t td { padding-left: 10px; padding-right: 10px; }
/* 利润的正负给点颜色（原来的样式里没给），右侧看着更有信息量 */
.calc-root .calc-cmp-t td.good b { color: #6ee7a8; }
.calc-root .calc-cmp-t td.bad b { color: #ff9a9a; }
.calc-root .calc-cmp-t td.flat b { color: var(--text-dim); }
html[data-theme="light"] .calc-root .calc-cmp-t td.good b { color: #177a4a; }
html[data-theme="light"] .calc-root .calc-cmp-t td.bad b { color: #b42318; }
@media (max-width: 900px) {
.calc-root .calc-cmp-t td.calc-cmp-name { width: auto; }
}
/* ============================================================
计算器 · 修补（写在美化那段后面，用来覆盖它）
------------------------------------------------------------
① 去掉 .calc-root 上的 backdrop-filter：它会让元素成为 fixed 定位子元素的
包含块，里面的浮层容易跑到错地方（之前角色页那个 MORE 弹窗就栽在这上面）。
视觉上换来换去差别很小，去掉更稳。
② 「＋ 添加物品」按钮：原来是个两行的块状按钮，我在美化时把它压成了 32px 高的
胶囊 —— 两行文字直接溢出到按钮外面，又丑又点不准（"添加不了"就是这么来的）。
现在改成紧凑的单行小按钮。
③ 搜不到那一行：左边一句说明、右边小按钮，同一横行（对应 calc.js 的 .calc-miss-row）。
④ 物品库往下滚的时候，标题吸在顶栏下面（顶栏 60px）。
⑤ 计算器别拉太宽，窄屏自动收。
============================================================ */
/* ① */
.calc-root {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* ⑤ 宽度收一收，居中 */
.calc-root { max-width: 1160px; margin-left: auto; margin-right: auto; }
/* ② 「＋ 添加物品」：单行紧凑按钮 */
.calc-root .calc-addnew {
display: inline-flex; align-items: center; justify-content: center;
height: 30px; padding: 0 13px; border-radius: 8px; cursor: pointer;
white-space: nowrap; font-family: inherit; font-size: 12.5px; font-weight: 700;
color: var(--c-acc); background: var(--accent-soft);
border: 1px dashed var(--c-acc);
transition: background .14s, border-color .14s, transform .1s;
}
.calc-root .calc-addnew:hover { background: color-mix(in srgb, var(--c-acc) 24%, transparent); }
.calc-root .calc-addnew:active { transform: translateY(1px); }
/* ③ 搜不到：一横行 —— 左边说明、右边按钮 */
.calc-root .calc-miss-row {
flex: 1 1 100%; /* .calc-hits 是 flex-wrap 容器，这一行要独占一行 */
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 8px 12px; border-radius: 10px;
border: 1px dashed var(--c-line);
background: color-mix(in srgb, var(--bg-2) 55%, transparent);
}
.calc-root .calc-miss-row .calc-none { flex: 1 1 auto; }
/* 命中列表不要裁剪（之前加的 overflow:hidden 会把聚焦光圈切掉） */
.calc-root .calc-hits { overflow: visible; padding: 2px; }
/* ④ 物品库标题吸顶 */
.calc-root .calc-lib .calc-sub {
position: sticky; top: 60px; z-index: 5;
margin: 0 0 10px; padding: 8px 12px; border-radius: 10px;
border: 1px solid var(--c-line-soft);
background: color-mix(in srgb, var(--card) 95%, transparent);
box-shadow: var(--shadow);
}
/* 窄屏：用料表那些数字别挤，按钮换行 */
@media (max-width: 900px) {
.calc-root { padding: 12px 12px 14px; }
.calc-root .calc-miss-row { flex-wrap: wrap; }
.calc-root .calc-lib .calc-sub { top: 56px; }
}
/* ---- 表单报错：红底醒目条（注册/登录用，之前只是一行红字，很容易看漏）---- */
.err-big {
display: block; margin: 0 0 14px; padding: 10px 14px;
border-radius: 12px; border-left: 3px solid #ff6b6b;
background: rgba(255, 107, 107, .13); color: #ffb3b3;
font-weight: 700; font-size: 13.5px; line-height: 1.6;
}
.err-big::before { content: '⚠️ '; }
html[data-theme="light"] .err-big { color: #b42318; background: rgba(255, 107, 107, .12); }