/* 悠然MC 白名单平台：简洁、响应式，无外部资源 */
/* 令牌分三层：中性色（按浅色 / 深色）、语义色（成功 / 警告 / 危险等，不随主题变化）、主题色（由 themes.toml 生成，
按 × 浅色 / 深色；启动时接在本文件之后，一起作为 /site.css 输出，见 assets.py）。 为玩家选定的模式；不写时（跟随系统）按 prefers-color-scheme。
对比度（WCAG）：正文、次要文字、状态徽章与其底色 ≥ 4.5:1，白字与按钮底色 ≥ 4.5:1（tests/test_themes.py 检查）。
深色模式下的两块令牌必须一致（同上测试检查）。 */
:root, html[data-theme="light"] {
color-scheme: light;
--bg: #f2f4f3;
--card: #ffffff;
--soft: #f5f7f6;
--text: #1f2328;
--muted: #5d6570;
--border: #e2e6e5;
--input-border: #8a8f98;
--shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
--shadow-lg: 0 12px 32px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .06);
--scroll-shadow: rgba(15, 23, 42, .18);
--ok: #217a45; --ok-bg: #e6f4ec; --ok-border: #b7dcc3; --ok-fill: #217a45; --ok-fill-hover: #1b6639;
--warn: #8a5207; --warn-bg: #fdf1dc; --warn-border: #e4b15a;
--danger: #b42318; --danger-bg: #fdecea; --danger-border: #efc2c2; --danger-fill: #c0392b; --danger-fill-hover: #a93226;
--frozen: #1f5f9e; --frozen-bg: #e7f0fa; --frozen-border: #bcd4ee;
--neutral: #4b5563; --neutral-bg: #eef0f2;
}
html[data-theme="dark"] {
color-scheme: dark;
--bg: #111315;
--card: #1a1d21;
--soft: #20242a;
--text: #e7e9ec;
--muted: #9ea5af;
--border: #2b3036;
--input-border: #6b7280;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
--shadow-lg: 0 16px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04);
--scroll-shadow: rgba(0, 0, 0, .55);
--ok: #5fd08f; --ok-bg: rgba(76, 194, 122, .13); --ok-border: #2c5a3e; --ok-fill: #237344; --ok-fill-hover: #1d6239;
--warn: #f0b555; --warn-bg: rgba(240, 181, 85, .12); --warn-border: #7a5a22;
--danger: #f38b85; --danger-bg: rgba(240, 128, 121, .12); --danger-border: #6a3331; --danger-fill: #b23b37; --danger-fill-hover: #9e2f2b;
--frozen: #74b9f0; --frozen-bg: rgba(116, 185, 240, .12); --frozen-border: #2d4d6c;
--neutral: #b4bac3; --neutral-bg: rgba(180, 186, 195, .1);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) {
color-scheme: dark;
--bg: #111315;
--card: #1a1d21;
--soft: #20242a;
--text: #e7e9ec;
--muted: #9ea5af;
--border: #2b3036;
--input-border: #6b7280;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
--shadow-lg: 0 16px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04);
--scroll-shadow: rgba(0, 0, 0, .55);
--ok: #5fd08f; --ok-bg: rgba(76, 194, 122, .13); --ok-border: #2c5a3e; --ok-fill: #237344; --ok-fill-hover: #1d6239;
--warn: #f0b555; --warn-bg: rgba(240, 181, 85, .12); --warn-border: #7a5a22;
--danger: #f38b85; --danger-bg: rgba(240, 128, 121, .12); --danger-border: #6a3331; --danger-fill: #b23b37; --danger-fill-hover: #9e2f2b;
--frozen: #74b9f0; --frozen-bg: rgba(116, 185, 240, .12); --frozen-border: #2d4d6c;
--neutral: #b4bac3; --neutral-bg: rgba(180, 186, 195, .1);
}
}
:root {
--radius: 10px;
--radius-lg: 14px;
/* 系统界面字体在前：西文与数字直接命中；中文依次找苹方、微软雅黑，其余交给系统回退。
每个不存在的字体名都会让中文字符多一次查找（Linux / Android 上排版耗时随之成倍增加），只保留必要的几个 */
--font: system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
--ease: cubic-bezier(.2, .7, .3, 1);
accent-color: var(--accent);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font: 15px/1.6 var(--font);
/* 长邮箱、长单词在行内放不下时断开，不撑宽页面 */
overflow-wrap: break-word;
-webkit-tap-highlight-color: transparent;
}
p, li, dd, .alert { text-wrap: pretty; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1 { font-size: 1.45rem; font-weight: 700; line-height: 1.3; margin: 0 0 .8rem; letter-spacing: .01em; }
h2 { font-size: 1.1rem; font-weight: 650; line-height: 1.35; margin: 1.2rem 0 .6rem; }
h3 { font-size: .95rem; font-weight: 600; margin: 1rem 0 .4rem; color: var(--muted); }
h1:first-child, h2:first-child, h3:first-child { margin-top: 0; }
/* 左右留出安全区（viewport-fit=cover：横屏手机的刘海 / 圆角在两侧，宽度可能 ≥ 768px，所以不放在窄屏媒体查询里） */
.container { max-width: 1040px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
/* 图标（Lucide，app.py 的 icon()）：描边继承文字颜色；尺寸随所在组件设定 */
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round; }
/* ---- 顶栏（桌面 ≥ 768px：图标 + 文字；移动端只留站名与头像，主导航在底部标签栏） ---- */
.topbar { background: var(--card); border-bottom: 1px solid var(--border); padding-top: env(safe-area-inset-top); }
.topbar-inner { display: flex; align-items: center; gap: 8px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; color: var(--text);
white-space: nowrap; margin-right: 12px; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand-name { overflow: hidden; text-overflow: ellipsis; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; color: #fff;
background: radial-gradient(120% 120% at 100% 0%, var(--hero-glow), transparent 60%), linear-gradient(135deg, var(--hero-1), var(--hero-2)); }
.brand-mark .i { width: 19px; height: 19px; }
/* 自定义 Logo（[site] logo）：高度固定，宽度按图片比例（![]()
带 width / height，加载前即占位） */
.brand-logo { display: block; height: 34px; width: auto; flex: none; }
.brand picture, .auth-brand picture, .hero-brand picture { display: block; flex: none; }
/* 登录、注册页卡片顶部与未登录首页横幅中的站点标志 */
.auth-brand { display: flex; margin-bottom: 14px; }
.hero-brand { display: flex; justify-content: center; margin-bottom: 16px; }
.brand-mark.brand-lg { width: 48px; height: 48px; border-radius: 14px; }
.brand-mark.brand-lg .i { width: 26px; height: 26px; }
.brand-logo.brand-lg { height: 48px; }
.brand-mark.brand-xl { width: 64px; height: 64px; border-radius: 18px; background: rgba(255, 255, 255, .14);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.brand-mark.brand-xl .i { width: 34px; height: 34px; }
.brand-logo.brand-xl { height: 64px; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a, .nav-admin {
display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border-radius: var(--radius);
color: var(--text); font-weight: 500; white-space: nowrap;
}
@media (hover: hover) {
.nav a:hover, .nav-admin:hover { background: var(--soft); text-decoration: none; }
}
.nav a .i, .nav-admin .i { color: var(--muted); }
.nav a[aria-current], .nav-admin[aria-current] { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.nav a[aria-current] .i, .nav-admin[aria-current] .i { color: var(--accent); }
.topbar-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-anon { margin-left: auto; }
/* 未读数 / 待审核数：语义红底白字（小号文字的对比度 ≥ 4.5:1） */
.nav-count {
display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
background: var(--danger-fill); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1;
font-variant-numeric: tabular-nums;
}
/* 头像菜单： 无脚本也能展开；app.js 增强（点外部 / Esc 关闭、焦点移到第一项） */
/* 高度固定：解析中途（ 还没到）先画出来时不会是浏览器默认的“详情”一行，之后也不再变高 */
.usermenu { position: relative; height: 44px; }
.usermenu > summary { list-style: none; }
.usermenu > summary::-webkit-details-marker { display: none; }
.userbtn {
display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 6px; border-radius: 12px; cursor: pointer;
border: 1px solid var(--border); background: var(--card); color: var(--text); user-select: none;
}
@media (hover: hover) {
.userbtn:hover { background: var(--soft); }
}
.usermenu[open] > .userbtn { background: var(--soft); border-color: var(--input-border); }
/* 桌面端当前在帐号设置 / 外观 / 邮件通知设置等页（与导航选中项同一种标法；移动端由标签栏的“我的”标出） */
@media (min-width: 768px) {
.usermenu.is-current > .userbtn { background: var(--accent-soft); border-color: transparent; }
.usermenu.is-current .who b, .usermenu.is-current .chev { color: var(--accent); }
}
.userbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.who { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.who b, .who small, .menu-head b, .menu-head small, .mine-head b, .mine-head small {
max-width: 13em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who b { font-size: .88rem; font-weight: 650; }
.who small, .menu-head small, .mine-head small { color: var(--muted); font-size: .75rem; }
.userbtn .chev { width: 16px; height: 16px; color: var(--muted); }
.usermenu[open] .chev { transform: rotate(180deg); }
/* 网页帐号头像（界面改版 4.8.3）：底层为 Steve（背景图），Gravatar 或截取的皮肤（两层 img，按百分比裁出脸与帽子）盖在上面；
图片加载失败时露出 Steve（alt 为空的失败图片不显示破图标记） */
.avatar { position: relative; display: block; width: 32px; height: 32px; border-radius: 8px; flex: none; overflow: hidden;
image-rendering: pixelated; background: #b58468 url(/static/img/steve.png?v=ce8ec16fe749) center / 100% no-repeat;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.avatar-lg { width: 40px; height: 40px; border-radius: 10px; }
.menu {
position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 260px; padding: 6px;
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
transform-origin: top right; animation: menu-in .14s var(--ease);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.menu-head, .mine-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; min-width: 0; }
.menu-head > span, .mine-head > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.menu-head { border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.menu a, .menu-item, .mine-menu a {
display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px; border-radius: 8px;
color: var(--text); background: none; border: 0; font: inherit; font-weight: 500; text-align: left; cursor: pointer;
justify-content: flex-start; line-height: 1.4;
}
/* 触屏上点过之后不残留悬停底色 */
.menu a:hover, .menu-item:hover, .mine-menu a:hover { text-decoration: none; }
@media (hover: hover) {
.menu a:hover, .menu-item:hover, .mine-menu a:hover { background: var(--soft); }
button.danger-item:hover { background: var(--danger-bg); }
}
.menu a .i, .menu-item .i, .mine-menu .i { color: var(--muted); }
.menu a[aria-current] { color: var(--accent); font-weight: 650; }
.menu a[aria-current] .i { color: var(--accent); }
.menu-sep { border-top: 1px solid var(--border); margin: 4px 0 0; padding-top: 4px; }
button.menu-item:focus-visible { box-shadow: none; outline: 2px solid var(--accent); outline-offset: -2px; }
.danger-item, .menu .danger-item .i, .mine-menu .danger-item .i { color: var(--danger); }
main.container { padding-top: 24px; padding-bottom: 24px; }
/* 页面贴底：内容不满一屏时底部栏在视口底部，内容多时排布不变（管理后台的 body 是网格布局，另见 .admin-col） */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main.container { flex: 1 0 auto; width: 100%; }
body > .footer { width: 100%; }
/* ---- 页面底部栏（方案 D：多列分组 + 版权行，templates/_macros.html 的 site_footer，footer.py 整理配置） ----
左列为站点标志与联系方式，右侧按分组分列（列数 class fd-g0…fd-g4 由服务端给出）；友情链接单独一行等宽小格；最下一行版权与商标说明。
手机端：分组两两并排，品牌信息占满整行；已登录时 body.has-tabbar 已在底部留出标签栏与安全区的高度，底部栏排在其上 */
.footer { color: var(--muted); font-size: .85rem; padding-bottom: 24px; }
.fd .f-inner { border-top: 1px solid var(--border); padding-top: 28px; }
.fd ul { list-style: none; margin: 0; padding: 0; }
.fd-grid { display: grid; gap: 24px 32px; grid-template-columns: minmax(240px, 1.6fr) repeat(3, minmax(110px, 1fr)); }
.fd-g0 { grid-template-columns: 1fr; }
.fd-g1 { grid-template-columns: minmax(240px, 3fr) minmax(110px, 1fr); }
.fd-g2 { grid-template-columns: minmax(240px, 2fr) repeat(2, minmax(110px, 1fr)); }
.fd-g4 { grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(100px, 1fr)); }
.fd-brand { min-width: 0; }
.fd-name { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--text); font-weight: 700; font-size: 1rem; }
.fd-name .brand-mark { width: 30px; height: 30px; border-radius: 8px; }
.fd-name .brand-mark .i { width: 16px; height: 16px; }
.fd-name .brand-logo { height: 30px; }
.fd-contact { margin: 8px 0 0; max-width: 22em; }
.fd h2 { margin: 2px 0 8px; font-size: .78rem; font-weight: 650; letter-spacing: .06em; color: var(--text); }
.fd-col { min-width: 0; }
.fd-col li a { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 0; color: var(--muted); font-size: .88rem; }
.fd-col .fd-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd a:hover { color: var(--accent); }
.fd svg.fd-ic { width: 15px; height: 15px; opacity: .85; }
.fd svg.ext { width: 12px; height: 12px; opacity: .6; }
.fd-col a.is-here { color: var(--accent); font-weight: 600; }
.fd-here { flex: none; font-size: .68rem; font-weight: 600; padding: 0 5px; border-radius: 5px; line-height: 1.5; margin-left: 2px;
background: var(--accent-soft); color: var(--accent); }
.fd-friends { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.fd-friends ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 2px 16px; }
.fd-friends a { display: block; padding: 3px 0; color: var(--muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; margin-top: 22px; padding-top: 14px;
border-top: 1px solid var(--border); font-size: .78rem; }
@media (max-width: 767.98px) {
.fd .f-inner { padding-top: 20px; }
.fd-grid[class*="fd-g"] { grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.fd-grid.fd-g0 { grid-template-columns: 1fr; }
.fd-brand { grid-column: 1 / -1; }
/* 手机上加大点击区（上下各约 7px） */
.fd-col li a { padding: 7px 0; }
.fd-friends ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.fd-friends a { padding: 6px 0; }
.fd-bottom { flex-direction: column; margin-top: 16px; }
}
/* 底部标签栏（移动端，已登录） */
.tabbar { display: none; }
/* 帐号设置页顶部的“我的”菜单：只在移动端显示 */
.mine-menu { display: none; }
@media (max-width: 767.98px) {
.topbar-inner { min-height: 56px; }
.nav-main, .nav-admin, .who, .userbtn .chev { display: none; }
.usermenu, .userbtn { width: 46px; }
.userbtn { justify-content: center; padding: 0 6px; border-color: transparent; background: none; }
.nav-anon a { padding: 0 10px; height: 44px; }
.nav-anon a .i { display: none; }
main.container { padding-top: 16px; }
body.has-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.tabbar {
display: grid; grid-template-columns: repeat(5, 1fr); align-content: start; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
/* 高度固定（1px 边框 + 4px + 56px 标签 + 安全区）：标签还没解析到时也不会先画成一条窄边再撑高 */
height: calc(61px + env(safe-area-inset-bottom));
background: var(--card); border-top: 1px solid var(--border);
padding: 4px max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
}
/* 列数由服务端按标签数给出（tabbar-3 / 4 / 5），不随后到的标签改变；图标从顶部排起，不随文字到达而上下移动 */
.tabbar-4 { grid-template-columns: repeat(4, 1fr); }
.tabbar-3 { grid-template-columns: repeat(3, 1fr); }
.tabbar a {
display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; min-height: 56px; padding-top: 3px;
color: var(--muted); font-size: .72rem; font-weight: 600; text-decoration: none; position: relative;
}
.tab-ic { position: relative; display: grid; place-items: center; width: 56px; height: 30px; border-radius: 15px; }
/* 选中项：图标底下的胶囊（只动 opacity / transform） */
.tab-ic::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent-soft);
opacity: 0; transform: scaleX(.6); transition: opacity .18s var(--ease), transform .18s var(--ease); }
.tab-ic .i { position: relative; width: 22px; height: 22px; }
.tabbar a[aria-current] { color: var(--accent); }
.tabbar a[aria-current] .tab-ic::before { opacity: 1; transform: none; }
.tabbar a:active .tab-ic { transform: scale(.94); }
.tabbar .nav-count { position: absolute; top: -3px; left: 50%; margin-left: 4px; min-width: 18px; height: 18px; font-size: .66rem;
box-shadow: 0 0 0 2px var(--card); }
/* “我的”上的待审核提示（管理员）：小红点，数字在“我的”页的列表里 */
.tab-dot { position: absolute; top: 2px; left: 50%; margin-left: 7px; width: 9px; height: 9px; border-radius: 50%;
background: var(--danger-fill); box-shadow: 0 0 0 2px var(--card); }
.mine-menu { display: block; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
padding: 6px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.mine-head { border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.mine-menu a, .mine-menu .menu-item { min-height: 48px; }
.mine-menu .nav-count, .mine-menu a > .badge { margin-left: auto; }
.mine-menu form { margin: 0; border-top: 1px solid var(--border); padding-top: 4px; margin-top: 4px; }
}
@media (min-width: 768px) and (max-width: 979.98px) {
.who, .userbtn .chev { display: none; }
.nav a, .nav-admin { padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}
/* 卡片 */
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px;
margin-bottom: 16px;
box-shadow: var(--shadow-sm);
}
/* 卡片底部与顶部留白一致 */
.card > :last-child, .card > form:last-child > :last-child, .card > .form:last-child { margin-bottom: 0; }
.card.narrow { max-width: 480px; margin-left: auto; margin-right: auto; }
/* 窄卡片页面的提示与卡片对齐 */
main.container:has(> .card.narrow) > .alert,
main.container:has(> .card.narrow) > p:first-child { max-width: 480px; margin-left: auto; margin-right: auto; }
.card-danger { border-color: var(--danger-border); }
.card-danger > h2 { color: var(--danger); }
.danger-zone { border-top: 1px dashed var(--danger-border); margin-top: 18px; padding-top: 14px; }
.form-sep-top { margin-top: 12px; }
.form-sep { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 14px; }
.hero { text-align: center; padding: 44px 20px; color: #fff; border: 0;
background: radial-gradient(120% 140% at 100% 0%, var(--hero-glow), transparent 55%), linear-gradient(135deg, var(--hero-1), var(--hero-2)); }
.hero p { color: rgba(255, 255, 255, .88); }
.hero .button { background: #fff; border-color: #fff; color: var(--hero-1); }
.hero .button.secondary { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
@media (hover: hover) {
.hero .button:hover { background: rgba(255, 255, 255, .9); }
.hero .button.secondary:hover { background: rgba(255, 255, 255, .12); }
}
.hero .button:focus-visible { box-shadow: 0 0 0 2px var(--hero-1), 0 0 0 4px #fff; }
.heading-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: .8rem; }
.heading-row h1, .heading-row h2 { margin: 0; }
/* 提示框：全站只用 .alert + .alert-info / success / warning / error 一种写法（圆角、细边框、淡色底，不加左侧色条）；
.small 为紧凑的小号提示。左侧色条只用来标注“一块内容的状态”（进服请求卡、绑定请求、置顶公告、理由），不用于提示框 */
.alert {
border: 1px solid var(--frozen-border);
background: var(--frozen-bg);
border-radius: var(--radius);
padding: 10px 14px;
margin-bottom: 16px;
overflow-wrap: anywhere;
color: var(--text);
}
.alert p { margin: 0; }
.alert p + p, .alert p + ol, .alert p + ul { margin-top: .4em; }
.alert ul, .alert ol { margin: 0; padding-left: 1.2em; }
.alert:focus { outline: none; }
.alert-info { background: var(--frozen-bg); border-color: var(--frozen-border); }
.alert-success { background: var(--ok-bg); border-color: var(--ok-border); }
.alert-error { background: var(--danger-bg); border-color: var(--danger-border); }
.alert-warning { background: var(--warn-bg); border-color: var(--warn-border); }
.alert.small { padding: 8px 12px; }
/* 表单 */
.form { margin: 0 0 12px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 500; margin-bottom: 4px; }
.field .hint { margin: 4px 0 0; }
/* 桌面上输入框不必拉满整张卡片 */
.card .form .field { max-width: 28rem; }
.card .form .inline-fields .field { max-width: none; }
input[type=text], input[type=email], input[type=password], input[type=search], input:not([type]),
textarea, select {
width: 100%;
padding: 8px 10px;
font: inherit;
color: var(--text);
background: var(--bg);
border: 1px solid var(--input-border);
border-radius: 8px;
}
input:hover:not(:disabled), textarea:hover:not(:disabled), select:hover:not(:disabled) { border-color: var(--muted); }
input[aria-invalid=true], textarea[aria-invalid=true], select[aria-invalid=true] { border-color: var(--danger); }
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible, summary:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); outline-offset: 0; }
/* 按钮的焦点：底色与焦点环之间留出卡片色的间隔，深色模式下同样清楚 */
button:focus-visible, .button:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent);
}
textarea { resize: vertical; }
/* 按钮：主按钮用主题色，“允许”“通过”等用语义绿（.ok），“拒绝”“删除”用语义红（.danger），不随主题色变化 */
button, .button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 16px;
font: inherit;
font-weight: 500;
line-height: 1.5;
color: #fff;
background: var(--accent-fill);
border: 1px solid var(--accent-fill);
border-radius: var(--radius);
cursor: pointer;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
}
button .i, .button .i { width: 18px; height: 18px; margin-left: -2px; }
button:hover, .button:hover { text-decoration: none; }
button.secondary, .button.secondary { background: var(--card); color: var(--text); border-color: var(--input-border); }
button.ok, .button.ok { background: var(--ok-fill); border-color: var(--ok-fill); }
button.danger, .button.danger { background: var(--danger-fill); border-color: var(--danger-fill); }
button.small, .button.small { padding: 2px 10px; font-size: .85rem; border-radius: 8px; }
button.danger-outline { color: var(--danger); border-color: var(--danger-border); background: var(--card); }
/* 按钮的悬停色只在能悬停的设备上生效：触屏点过之后不残留悬停色（顺序与上面的基础样式一一对应，层叠结果不变） */
@media (hover: hover) {
button:hover, .button:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); }
button.secondary:hover, .button.secondary:hover { background: var(--soft); border-color: var(--muted); }
button.ok:hover, .button.ok:hover { background: var(--ok-fill-hover); border-color: var(--ok-fill-hover); }
button.danger:hover, .button.danger:hover { background: var(--danger-fill-hover); border-color: var(--danger-fill-hover); }
button.danger-outline:hover { background: var(--danger-bg); border-color: var(--danger); }
}
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-start; }
/* 文字按钮：与链接同色，触摸高度不小于 24px；顶栏的“退出”与其他导航项同色 */
button.link {
display: inline; background: none; border: none; padding: 0; color: var(--accent); font-weight: normal; min-height: 24px;
}
button.link:hover { background: none; }
@media (hover: hover) {
button.link:hover { text-decoration: underline; }
}
button.link.danger { color: var(--danger); }
a.danger-link { color: var(--danger); }
button.link:focus-visible { box-shadow: none; outline: 2px solid var(--accent); outline-offset: 1px; }
form.inline { display: inline; margin: 0; }
fieldset.checks { border: 1px solid var(--border); border-radius: 6px; margin: 0 0 14px; padding: 8px 12px; }
fieldset.checks legend { font-weight: 500; padding: 0 4px; }
/* 复选框 / 单选框：文字换行时与第一行文字对齐（悬挂缩进） */
/* 文字与说明须包在同一个 里（否则裸文字与说明成为两个 flex 项，说明较长时另起一列）；行距与原先的块级写法一致 */
label.check { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; margin: 4px 0; font-weight: normal; }
label.check input { flex: none; margin: 0; position: relative; top: .1em; }
/* 不可用的选项：灰色（输入框本身带 disabled；JS 联动禁用的整组 fieldset 同样变灰） */
label.check.disabled, label.check:has(> input:disabled), fieldset:disabled label.check, fieldset:disabled .hint { color: var(--muted); }
label.check:has(> input:disabled) { cursor: not-allowed; }
.form > label.check { margin-bottom: 14px; }
.actions { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* 并排的两个表单：按钮对齐到底部 */
.split > form { display: flex; flex-direction: column; margin: 0; }
.split > form > button { margin-top: auto; align-self: flex-start; }
.searchbar { display: flex; gap: 8px; margin: 12px 0; }
.searchbar input { flex: 1; min-width: 0; }
/* 标签与徽章（不在词中断行）：淡色底胶囊。状态用语义色（正常 / 在线 = ok，待处理 = warn，拒绝 / 封禁 = danger，
冻结 = frozen，其余 = neutral），不随主题色变化；只有“超级管理员”“置顶”等标记用主题色 */
.badge {
display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .78rem; font-weight: 500; line-height: 1.5;
vertical-align: middle; white-space: nowrap; background: var(--neutral-bg); color: var(--neutral);
}
.badge + .badge { margin-left: 4px; }
.badge-active, .badge-online, .badge-allow, .badge-approval-approved, .badge-profile-active, .badge-state-published { background: var(--ok-bg); color: var(--ok); }
.badge-pending, .badge-unverified, .badge-warn, .badge-joined, .badge-approval-pending, .badge-state-scheduled, .badge-state-draft, .badge-level-important { background: var(--warn-bg); color: var(--warn); }
.badge-rejected, .badge-banned, .badge-deny, .badge-approval-denied, .badge-level-urgent { background: var(--danger-bg); color: var(--danger); }
.badge-frozen, .badge-attr { background: var(--frozen-bg); color: var(--frozen); }
.badge-superuser, .badge-pinned, .badge-accent { background: var(--accent-soft); color: var(--accent); }
.badge-private { box-shadow: inset 0 0 0 1px var(--input-border); background: none; }
/* 用户组、权限等分组标签（列表中可换行） */
.badge-group { font-weight: 500; margin: 1px 4px 1px 0; }
.badge-group + .badge-group { margin-left: 0; }
.badge-superuser { margin-right: 4px; }
/* 表格 */
/* 可横向滚动时两侧显示阴影提示（背景随内容滚动的遮罩 + 固定的阴影） */
.table-wrap {
overflow-x: auto;
background:
linear-gradient(to right, var(--card) 30%, transparent) left center / 40px 100% no-repeat local,
linear-gradient(to left, var(--card) 30%, transparent) right center / 40px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, var(--scroll-shadow), transparent) left center / 12px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), transparent) right center / 12px 100% no-repeat scroll;
}
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { font-weight: 500; color: var(--muted); white-space: nowrap; }
.table td.mono, .table .uuid { white-space: nowrap; }
.table td.ip { white-space: normal; overflow-wrap: anywhere; min-width: 9em; }
.table td.breakable { overflow-wrap: anywhere; min-width: 10em; }
.table td.group-name { min-width: 9em; }
.table td.text { min-width: 14em; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px 14px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.tabs a { color: var(--muted); white-space: nowrap; }
.tabs a.active { color: var(--accent); font-weight: 600; }
.tabs .count { margin-left: 4px; font-size: .8rem; color: var(--muted); }
.pagination { display: flex; gap: 14px; justify-content: center; margin-top: 14px; }
dl.meta { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
dl.meta dt { color: var(--muted); }
dl.meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.mono, code { font-family: var(--mono); font-size: .88em; }
.nowrap { white-space: nowrap; }
.truncate { display: block; max-width: 22em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reason { border-left: 3px solid var(--danger); padding-left: 10px; }
.prewrap { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg); border-radius: 6px; padding: 10px; }
/* 第二部分：角色、诊断、管理后台 */
.name { font-family: var(--mono); font-weight: 600; white-space: pre; }
.actions.left { justify-content: flex-start; margin-top: 12px; }
.links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.admin-tabs { margin-bottom: 16px; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.filters input, .filters select { width: auto; min-width: 0; max-width: 100%; flex: 1 1 140px; }
.filters select { flex: 0 1 13em; }
.inline-form { display: flex; gap: 6px; margin: 0; }
.inline-form input { width: 8em; min-width: 6em; flex: 1 1 8em; }
.inline-form button { padding: 4px 12px; }
.kick-status { font-size: 1.05rem; margin: 4px 0 8px; }
.kick-status p { margin: 0; }
.kick-status[data-state=kicked] { color: var(--ok); }
.kick-status[data-state=pending], .kick-status[data-state=timeout] { color: var(--warn); }
.kick-status[data-state=failed], .kick-status[data-state=expired] { color: var(--danger); }
.kick-status[data-state=cancelled], .kick-status[data-state=not_online] { color: var(--muted); }
.problems { margin: 0 0 12px; padding-left: 0; list-style: none; }
.problems li + li { margin-top: .3em; }
.problems li.hint { color: var(--muted); }
/* 操作日志的详情：保留换行，过长时在单元格内滚动 */
.detail {
margin: 0; min-width: 14em; max-width: 34em; max-height: 9.5em; overflow: auto;
white-space: pre-wrap; overflow-wrap: anywhere; font: inherit;
}
@media (max-width: 640px) {
.split { grid-template-columns: 1fr; }
.card { padding: 16px; }
dl.meta { grid-template-columns: 1fr; gap: 0; }
dl.meta dd { margin-bottom: 8px; }
/* 窄卡片中的主要按钮占满整行 */
.card.narrow .form > button[type=submit] { width: 100%; }
.admin-tabs { flex-wrap: nowrap; overflow-x: auto; }
.hide-mobile { display: none; }
/* 后台表格在卡片内横向滚动，保证列宽 */
.table-wrap > .table.wide { min-width: 640px; }
/* 堆叠表格：每行一块，单元格前显示列名 */
.table-stack thead { display: none; }
.table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
.table-stack tr { border-bottom: 1px solid var(--border); padding: 6px 0; }
.table-stack td { border: none; padding: 3px 0; }
.table-stack td[data-label]::before {
content: attr(data-label); display: inline-block; min-width: 5.5em; margin-right: 6px;
color: var(--muted); font-size: .85rem;
}
.table-stack td.stack-block[data-label]::before { display: block; }
.table-stack td:empty { display: none; }
.table-stack .hide-mobile { display: none; }
}
/* 信任规则页 */
.rule-list { list-style: none; padding: 0; margin: 0 0 12px; }
.rule-list li { display: flex; align-items: center; justify-content: space-between; gap: .5em 1em; padding: .35em 0; border-bottom: 1px solid var(--border); }
.rule-list li > span:first-child { flex: 1; min-width: 0; }
.rule-list li > button { flex: none; }
.rule-list form { margin: 0; }
.rule-list .date { white-space: nowrap; }
.inline-fields { display: flex; flex-wrap: wrap; gap: .5em; align-items: flex-end; margin-bottom: 14px; }
.inline-fields .field { flex: 1 1 10em; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .4em; margin: .4em 0 .9em; }
.chips button { padding: .15em .7em; }
@media (max-width: 640px) {
.inline-fields { flex-direction: column; align-items: stretch; }
.inline-fields .field { flex: none; }
.inline-fields > button { align-self: flex-start; }
}
/* 原生下拉框：统一外观（与输入框一致，右侧箭头） */
select {
-webkit-appearance: none; appearance: none;
padding-right: 32px;
background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
linear-gradient(135deg, var(--muted) 50%, transparent 50%);
background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
cursor: pointer;
}
input:disabled, select:disabled { opacity: .55; cursor: not-allowed; }
/* 可搜索的下拉框（app.js 增强带 data-combobox 的输入框） */
.combobox, .combobox-field { position: relative; }
.combobox input { padding-right: 64px; }
/* 清除按钮（有值时显示）：在箭头左侧，触摸目标 32px */
.combobox-clear {
position: absolute; right: 32px; top: 50%; transform: translateY(-50%);
width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
background: transparent; color: var(--muted); font-size: 1.2rem; line-height: 1; font-weight: normal;
}
@media (hover: hover) {
.combobox-clear:hover { background: var(--bg); color: var(--text); border: 0; }
}
/* 箭头按钮：点击展开 / 收起（输入框本身点击只打开，以便移动光标） */
.combobox-toggle {
position: absolute; right: 0; top: 0; bottom: 0; width: 32px; padding: 0;
border: 0; border-radius: 0 6px 6px 0; background: transparent; cursor: pointer;
}
.combobox-toggle:hover { background: transparent; border: 0; }
.combobox-toggle::after {
content: ""; position: absolute; right: 13px; top: 50%;
width: 7px; height: 7px; margin-top: -6px;
border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
transform: rotate(45deg);
}
.combobox.open .combobox-toggle::after { transform: rotate(-135deg); margin-top: -2px; }
.combobox-toggle:disabled { cursor: not-allowed; opacity: .55; }
.combobox-panel {
position: absolute; z-index: 20; top: calc(100% + 4px); left: 0;
min-width: 100%; width: max-content; max-width: min(24rem, calc(100vw - 32px));
background: var(--card); color: var(--text);
border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.combobox-list {
list-style: none; margin: 0; padding: 4px;
max-height: 16.5rem; overflow-y: auto; overscroll-behavior: contain;
}
.combobox-option {
padding: 6px 10px; border-radius: 6px; cursor: pointer;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.combobox-option.active { background: var(--accent-soft); color: var(--accent); }
/* 触屏：选项不低于 44px，相邻选项之间有分隔线 */
@media (pointer: coarse) {
.combobox-option { padding: 12px 10px; min-height: 44px; }
.combobox-option + .combobox-option { border-top: 1px solid var(--border); }
}
.combobox-option mark { background: none; color: var(--accent); font-weight: 600; }
.combobox-note { margin-left: .6em; color: var(--muted); font-size: .8rem; }
.combobox-status { padding: 8px 14px; color: var(--muted); font-size: .85rem; }
.combobox-list:not([hidden]) + .combobox-status { border-top: 1px solid var(--border); padding: 6px 14px; font-size: .8rem; }
/* 地区选择：城市下方可能出现显示名说明，三个输入框按顶部对齐（不因说明把城市输入框顶上去） */
@media (min-width: 641px) { #region-form .inline-fields { align-items: flex-start; } }
/* 窄屏：列表放在正常文档流中（把后面的输入框往下推），不会盖住下一个输入框而被误点 */
@media (max-width: 640px) {
.combobox-panel { position: static; margin-top: 4px; width: auto; max-width: none; box-shadow: none; }
}
/* 创建次数限额 */
.quota-list li > span:first-child { flex: none; white-space: nowrap; }
.quota-list li > span:last-child { flex: 1; min-width: 0; text-align: right; }
.quota-list .quota-full { color: var(--danger); }
.quota-details { margin: 0 0 12px; }
.quota-details summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.quota-details[open] summary { margin-bottom: .4rem; }
/* 两步验证 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.code-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.code-row .code-input { flex: 1 1 10em; min-width: 0; width: auto; }
.code-input { font-family: var(--mono); letter-spacing: .08em; }
.qr-box { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-start; margin: 0 0 16px; }
.qr { display: block; width: 220px; max-width: 100%; height: auto; background: #fff; border: 1px solid var(--border); border-radius: 6px; image-rendering: pixelated; }
.qr-side { flex: 1 1 16em; min-width: 0; }
.secret { font-family: var(--mono); font-size: 1.05rem; letter-spacing: .04em; word-spacing: .3em; overflow-wrap: anywhere; background: var(--bg); border-radius: 6px; padding: 8px 10px; margin: 4px 0 8px; user-select: all; }
.codes { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5em, 1fr)); gap: 6px 16px; }
.codes li { font-family: var(--mono); font-size: 1.05rem; background: var(--bg); border-radius: 6px; padding: 6px 10px; text-align: center; }
textarea.codes-copy { font-family: var(--mono); width: 100%; max-width: 28rem; }
.steps { margin: 0 0 12px; padding-left: 1.3em; }
.steps li + li { margin-top: .3em; }
.choice-list { border: 1px solid var(--border); border-radius: 6px; margin: 0 0 14px; padding: 8px 12px; max-width: 34rem; }
.choice-list legend { font-weight: 500; padding: 0 4px; }
/* 进服验证设置、网页批准 */
.skip-warning { display: block; margin-top: 4px; padding: 4px 8px; border: 1px solid var(--warn-border); background: var(--warn-bg); border-radius: 6px; }
.approval-list { list-style: none; margin: 0; padding: 0; }
.approval { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--border); }
.approval:first-child { border-top: none; }
.approval-info { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; min-width: 0; }
.approval-actions { display: flex; gap: 8px; }
.approvals { border-left: 4px solid var(--warn-border); }
.mode-choice label.check { align-items: baseline; }
/* 外部帐号绑定、皮肤 */
.binding { border-left: 4px solid var(--warn-border); padding: 4px 0 4px 14px; margin: 0 0 16px; }
.binding.binding-verified { border-left-color: var(--ok-border); }
.binding h3 { margin: 0; }
.verified-box, .skin-card { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-start; margin: 0 0 12px; }
.verified-box .meta, .skin-card .meta { flex: 1 1 16em; min-width: 0; margin: 0; }
.skin-view { display: flex; gap: 16px; align-items: flex-end; }
.skin-head { position: relative; display: inline-block; flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 4px; background: var(--bg); }
.skin-head img { position: absolute; top: -64px; width: 512px; max-width: none; height: auto; image-rendering: pixelated; }
.skin-head img.skin-head-face { left: -64px; background: #000; }
.skin-head img.skin-head-hat { left: -320px; }
.skin-texture { display: block; width: 128px; max-width: none; height: auto; image-rendering: pixelated; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; }
.skin-preview { padding-top: 12px; border-top: 1px dashed var(--border); }
/* ---- 公告、消息中心、通知设置 ---- */
.count-badge { display: inline-block; min-width: 1.4em; padding: 0 .4em; border-radius: 999px; background: var(--danger-fill); color: #fff; font-size: 12px; line-height: 1.5; text-align: center; font-weight: 600; }
.announcement-title .badge, .pinned-title .badge, .message-title .badge, .announcement-meta .badge, h1 .badge { margin-right: .35em; }
.pinned-list { display: grid; gap: 8px; margin-bottom: 16px; }
.pinned { display: block; padding: 10px 14px; border: 1px solid var(--frozen-border); border-left: 4px solid var(--frozen-border); border-radius: var(--radius); background: var(--frozen-bg); color: var(--text); text-decoration: none; }
.pinned:hover { border-color: var(--frozen-border); text-decoration: none; }
.pinned:hover .pinned-title strong { text-decoration: underline; }
.pinned-important { border-left-color: var(--warn-border); background: var(--warn-bg); border-color: var(--warn-border); }
.pinned-urgent { border-left-color: var(--danger); background: var(--danger-bg); border-color: var(--danger-border); }
.pinned-title, .pinned-summary { display: block; }
.announcement-list, .message-list { list-style: none; margin: 0; padding: 0; }
.announcement-item, .message-item { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--border); }
.announcement-item:last-child, .message-item:last-child { border-bottom: 0; }
.announcement-link, .message-link { display: block; min-width: 0; color: var(--text); text-decoration: none; }
.announcement-link:hover strong, .message-link:hover strong { color: var(--accent); text-decoration: underline; }
.announcement-summary, .message-preview { display: block; overflow-wrap: anywhere; }
.message-item.unread .message-link strong { font-weight: 700; }
.message-item:not(.unread) .message-link { color: var(--muted); }
.message-meta { text-align: right; white-space: nowrap; }
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--danger-fill); vertical-align: middle; }
.announcement.level-important { border-top: 3px solid var(--warn-border); }
.announcement.level-urgent { border-top: 3px solid var(--danger); }
.announcement-meta { margin-top: -4px; }
.markdown { overflow-wrap: anywhere; }
.markdown > :first-child { margin-top: 0; }
.markdown h2, .markdown h3, .markdown h4 { margin: 1.2em 0 .5em; line-height: 1.3; }
.markdown h2 { font-size: 1.25em; }
.markdown h3 { font-size: 1.1em; }
.markdown blockquote { margin: 1em 0; padding: 2px 14px; border-left: 3px solid var(--border); color: var(--muted); }
.markdown pre { overflow-x: auto; padding: 10px 12px; border-radius: 6px; background: var(--bg); border: 1px solid var(--border); }
.markdown pre code { padding: 0; background: none; }
.markdown table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; }
.markdown th, .markdown td { border: 1px solid var(--border); padding: 4px 10px; }
.markdown hr { border: 0; border-top: 1px solid var(--border); }
.editor { display: grid; gap: 12px; }
@media (min-width: 900px) { .editor { grid-template-columns: 1fr 1fr; } }
.editor textarea { width: 100%; min-height: 18em; font-family: var(--mono); font-size: 14px; }
.lookup-result { padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); margin: 0 0 12px; }
.lookup-result h3 { margin-top: 0; }
.preview { min-height: 18em; max-height: 36em; overflow: auto; padding: 8px 12px; border: 1px dashed var(--input-border); border-radius: 6px; background: var(--bg); }
.preview-field .label { display: block; font-weight: 600; margin-bottom: 4px; }
fieldset.field { border: 0; margin: 0 0 12px; padding: 0; min-width: 0; }
fieldset.field legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
.user-picker { margin: 6px 0 0 1.6em; }
.user-picker input[type=search] { width: 100%; max-width: 360px; }
.user-picker-list { max-height: 14em; overflow-y: auto; margin-top: 6px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px; }
.pref-list { display: grid; gap: 0; margin-bottom: 16px; }
/* 两列：左侧类别与说明，右侧下拉框（固定宽度，不挤占说明文字） */
.pref-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(10rem, 16rem); gap: 6px 24px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.pref-row.locked .pref-info { grid-column: 1 / -1; }
.pref-row .pref-info { min-width: 0; }
.pref-row .pref-info p { margin: 2px 0 0; }
.pref-row select { width: 100%; }
@media (max-width: 600px) {
.announcement-item, .message-item { flex-direction: column; gap: 2px; }
.message-meta { text-align: left; }
.pref-row { grid-template-columns: minmax(0, 1fr); }
}
.card .form .editor .field { max-width: none; }
.announcement-form input[type=datetime-local] {
width: 100%; padding: 8px 10px; font: inherit; color: var(--text); background: var(--bg);
border: 1px solid var(--input-border); border-radius: 6px;
}
.announcement-form .inline-fields label .muted { font-weight: normal; }
/* 皮肤 3D 预览（static/skin3d.js 创建；未就绪 / 不支持时保留上面的 2D 头像） */
.skin-view { flex-wrap: wrap; max-width: 100%; }
.skin-3d { display: none; width: 200px; max-width: 100%; }
.skin-3d-on .skin-3d { display: block; }
.skin-3d-on { align-items: flex-start; }
.skin-3d-on .skin-head { display: none; }
/* 边框用 box-shadow：不占画布的尺寸 */
.skin-3d canvas { display: block; max-width: 100%; background: var(--bg); box-shadow: 0 0 0 1px var(--border); border-radius: 4px; cursor: grab; touch-action: none; }
.skin-3d-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.skin-figures { display: flex; flex-wrap: wrap; gap: 16px 32px; margin: 12px 0; }
.skin-figures figure { margin: 0; }
.skin-figures figcaption { margin-top: 4px; }
/* 折叠的帮助说明（如两步验证登录页的“使用恢复码”） */
/* 外部应用：授权页与“已连接的应用” */
.oauth-scopes { margin: .3rem 0 .8rem; padding-left: 1.2em; }
.oauth-scopes li { margin: .2rem 0; }
.oauth-scopes.compact { margin: 0; }
.oauth-consent .alert p { margin: .2rem 0; }
.app-grant form { margin-top: .6rem; }
/* 分项授权：授权页的必须 / 可选分组，“已连接的应用”里每个范围一行（文字 + 状态 + 开关） */
.oauth-group { font-size: 1rem; margin: .8rem 0 .2rem; }
.oauth-optional label.check { margin: 6px 0; }
.app-scopes { list-style: none; margin: 0; padding: 0; }
.app-scope { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.app-scope:last-child { border-bottom: 0; }
.app-scope-text { flex: 1 1 16rem; min-width: 0; }
.app-scope-off .app-scope-text { color: var(--muted); }
.app-grant form.app-scope-switch { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
/* 用户组编辑页的权限：按系统、分类两层折叠 */
.perm-system { margin: 0 0 12px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.perm-system > summary { cursor: pointer; font-weight: 600; min-height: 24px; }
.perm-category { margin: 8px 0 0 4px; }
.perm-category > summary { cursor: pointer; min-height: 24px; }
.perm-category .checks { margin-top: 4px; }
/* 分类名已在 中显示，legend 只给读屏 */
.perm-category .checks > legend { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.help-details { margin: 0 0 12px; }
.help-details summary { cursor: pointer; color: var(--accent); min-height: 24px; }
.help-details[open] summary { margin-bottom: .3rem; }
.help-details p { margin: 0; }
/* 用“·”分隔的一行摘要（_macros.quota_summary）：分隔符属于下一项，窄屏上每项一行 */
.inline-items > span + span::before { content: "·"; margin: 0 .45em; }
@media (max-width: 640px) {
.inline-items { display: inline-flex; flex-direction: column; vertical-align: top; }
.inline-items > span + span::before { content: none; }
}
/* 联动禁用的子选项组（两步验证的第一步 / 第二步）：不另加边框 */
fieldset.sub-options { border: 0; margin: 0; padding: 0; min-width: 0; }
.toc { margin-top: 12px; font-size: .9rem; }
/* 卡片外的页面标题（其后紧跟需要尽快看到的内容，如等待批准的进服请求） */
.page-heading { margin-bottom: 12px; }
.show-mobile { display: none; }
@media (max-width: 640px) {
.show-mobile { display: inline; }
}
/* 角色页“快捷操作”卡：冻结、强制下线、重生各占一段 */
.action-item + .action-item { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 12px; }
.action-item h3 { margin-top: 0; color: var(--text); }
.action-item > :last-child { margin-bottom: 0; }
/* 已提交、等待服务器响应的按钮（app.js） */
button.busy, .button.busy { opacity: .7; cursor: progress; }
button.busy::after { content: "…"; }
/* 公告“指定用户”：已选帐号的标签与筛选工具 */
.picker-tools { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.picker-tools input[type=search] { flex: 1 1 14rem; }
.picker-tools label.check { padding: 0; }
.picker-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.chip { display: inline-flex; align-items: center; gap: 2px; padding: 0 0 0 10px; border: 1px solid var(--accent); color: var(--accent); border-radius: 999px; font-size: .85rem; max-width: 100%; }
.chip-remove { padding: 0; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1rem; line-height: 1; font-weight: normal; }
@media (hover: hover) {
.chip-remove:hover { background: var(--accent-soft); border: 0; }
}
.hint.loosen-yes { color: var(--warn); font-weight: 500; }
/* ---- 页面内的小链接：返回上一级、页头下方的入口 ---- */
.back-link, .page-link { margin: 0 0 12px; }
.back-link a, .page-link a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-weight: 500; }
.back-link .i, .page-link .i { width: 17px; height: 17px; }
.note { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); font-size: .88rem; margin: 0 0 16px; }
.note .i { width: 16px; height: 16px; margin-top: 3px; }
/* ======== 界面改版第 2 期：头像、首页仪表盘、角色卡、角色枢纽与子页 ======== */
/* ---- 皮肤头像的裁切（帐号头像与角色头像共用）：两层 img 宽为方框的 800%，脸 (8,8)、帽子 (40,8)，按百分比偏移，
64×32 旧格式与高清皮肤都按比例正确裁切。背景为回退图（Steve / 像素问号），图片加载失败时露出来。
脸部一层衬黑底：原版（ImageBufferDownload）把脸部区域强制设为不透明，透明像素在游戏里显示为黑色（这类像素的颜色值
绝大多数是黑），不衬底会透出回退图；图片加载失败时整个 img 隐藏，黑底随之消失 ---- */
.crop { position: absolute; top: -100%; width: 800%; max-width: none; height: auto; image-rendering: pixelated; }
.crop-face { left: -100%; background: #000; }
.crop-hat { left: -500%; }
.av-img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: auto; }
.gone { visibility: hidden; }
/* ---- 角色头像：没有可显示的皮肤时为按角色着色的像素问号（qm.png 为白色问号，底色 .qm-0…9；深浅色各一组，
与白色的对比度 ≥ 4.5，tests/test_avatars.py 检查） ---- */
.head { position: relative; display: block; flex: none; width: 48px; height: 48px; border-radius: 10px; overflow: hidden;
image-rendering: pixelated; background: #4a5568 url(/static/img/qm.png?v=e3f63232e367) center / 100% no-repeat;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.head-lg { width: 84px; height: 84px; border-radius: 16px; }
.head-sm { width: 36px; height: 36px; border-radius: 8px; }
.qm-0 { background-color: #b0306a; } .qm-1 { background-color: #7a3fb0; } .qm-2 { background-color: #2f5fb3; }
.qm-3 { background-color: #0e7285; } .qm-4 { background-color: #2e7d32; } .qm-5 { background-color: #5b7414; }
.qm-6 { background-color: #995400; } .qm-7 { background-color: #b83d17; } .qm-8 { background-color: #8a3b3b; }
.qm-9 { background-color: #4a5568; }
html[data-theme="dark"] .qm-0 { background-color: #892552; } html[data-theme="dark"] .qm-1 { background-color: #5f3189; }
html[data-theme="dark"] .qm-2 { background-color: #244a8b; } html[data-theme="dark"] .qm-3 { background-color: #0a5867; }
html[data-theme="dark"] .qm-4 { background-color: #236127; } html[data-theme="dark"] .qm-5 { background-color: #465a0f; }
html[data-theme="dark"] .qm-6 { background-color: #774100; } html[data-theme="dark"] .qm-7 { background-color: #8f2f11; }
html[data-theme="dark"] .qm-8 { background-color: #6b2e2e; } html[data-theme="dark"] .qm-9 { background-color: #394251; }
/* 深色下底色与卡片接近（如 .qm-9）：浅色细边标出头像的边界（皮肤图片盖在上面，只对问号可见） */
html[data-theme="dark"] .head { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
@media (prefers-color-scheme: dark) {
html:not([data-theme]) .head { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
html:not([data-theme]) .qm-0 { background-color: #892552; } html:not([data-theme]) .qm-1 { background-color: #5f3189; }
html:not([data-theme]) .qm-2 { background-color: #244a8b; } html:not([data-theme]) .qm-3 { background-color: #0a5867; }
html:not([data-theme]) .qm-4 { background-color: #236127; } html:not([data-theme]) .qm-5 { background-color: #465a0f; }
html:not([data-theme]) .qm-6 { background-color: #774100; } html:not([data-theme]) .qm-7 { background-color: #8f2f11; }
html:not([data-theme]) .qm-8 { background-color: #6b2e2e; } html:not([data-theme]) .qm-9 { background-color: #394251; }
}
/* ---- 通用：卡片标题行、图标徽章、在线圆点 ---- */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.card-head > a { display: inline-flex; align-items: center; gap: 2px; font-size: .9rem; white-space: nowrap; min-height: 32px; }
.h-ic { color: var(--accent); width: 19px; height: 19px; }
.badge .i { width: 13px; height: 13px; margin: -2px 3px 0 -2px; vertical-align: middle; }
.pdot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.pdot-on { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.pdot-joined { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.stack > * + * { margin-top: 16px; }
.stack > .card { margin-bottom: 0; }
/* ---- 首页：欢迎卡（主题渐变）与服务器状态 ---- */
.welcome { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; gap: 20px 24px; align-items: stretch;
justify-content: space-between; margin-bottom: 20px; padding: 24px 26px; border-radius: 20px; color: #fff;
background: radial-gradient(120% 140% at 100% 0%, var(--hero-glow), transparent 55%), linear-gradient(135deg, var(--hero-1), var(--hero-2));
box-shadow: var(--shadow-sm); }
.welcome-main { min-width: 0; flex: 1 1 280px; }
.welcome h1 { font-size: 1.6rem; margin: 0; color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.wchip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 999px;
background: rgba(255, 255, 255, .16); color: #fff; font-size: .8rem; font-weight: 500; }
.wchip .i { width: 14px; height: 14px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 16px 0 0; }
.fact small { display: block; color: rgba(255, 255, 255, .8); font-size: .78rem; }
.fact b { font-size: 1.1rem; font-weight: 600; }
.server { flex: 0 1 320px; min-width: 0; padding: 14px 18px; border-radius: 16px; background: rgba(0, 0, 0, .22);
border: 1px solid rgba(255, 255, 255, .16); }
.server-top { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.server-top .i { width: 18px; height: 18px; }
.live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 500; white-space: nowrap; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #d6dbe1; }
.live-running .live-dot { background: #5ee08f; box-shadow: 0 0 0 3px rgba(94, 224, 143, .28); }
.live-crashed .live-dot { background: #ffc35a; box-shadow: 0 0 0 3px rgba(255, 195, 90, .28); }
.nums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.nums small { display: block; color: rgba(255, 255, 255, .8); font-size: .78rem; }
.nums b { font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.nums b span { font-size: .85rem; font-weight: 500; color: rgba(255, 255, 255, .82); }
.server-note { margin: 10px 0 0; font-size: .85rem; color: rgba(255, 255, 255, .9); }
/* 关服 / 中断 / 不可用时只有一行说明：不拉伸到欢迎卡的高度，垂直居中（不支持 :has 的浏览器保持拉伸） */
.server:not(:has(.nums)) { align-self: center; }
/* 进度条：宽度写在 SVG 的 width 属性上（CSP 不允许内联样式） */
.bar { display: block; width: 100%; height: 6px; margin-top: 6px; border-radius: 3px; }
.bar-bg { fill: rgba(255, 255, 255, .2); }
.bar-fg { fill: #fff; }
.meter .bar-bg { fill: var(--soft); stroke: var(--border); }
.meter .bar-fg { fill: var(--accent-fill); }
.meter .bar { height: 8px; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 12px; }
.section-title h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.section-title > a { display: inline-flex; align-items: center; gap: 2px; font-size: .9rem; white-space: nowrap; min-height: 32px; }
/* ---- 待办条 ---- */
.todo { border-left: 4px solid var(--warn-border); }
.todo-count { background: var(--warn-bg); color: var(--warn); }
.todo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.todo-list + .todo-list { margin-top: 10px; }
.todo-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: var(--soft);
border: 1px solid var(--border); }
.todo-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; }
.todo-ic .i { width: 22px; height: 22px; }
.t-approve .todo-ic { background: var(--warn-bg); color: var(--warn); }
.t-freeze .todo-ic { background: var(--frozen-bg); color: var(--frozen); }
.t-activate .todo-ic { background: var(--accent-soft); color: var(--accent); }
.todo-body { flex: 1; min-width: 0; }
.todo-title { font-weight: 600; overflow-wrap: anywhere; }
.todo-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 2px; color: var(--muted); font-size: .85rem; }
.todo-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.todo-meta .i { width: 14px; height: 14px; }
.countdown { color: var(--warn); font-weight: 600; font-variant-numeric: tabular-nums; }
.todo-acts { display: flex; gap: 8px; flex: none; }
.todo-acts form { margin: 0; }
.button.small .i, button.small .i { width: 16px; height: 16px; }
/* ---- 常用磁贴 ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
min-height: 96px; padding: 12px 8px; border-radius: 16px; background: var(--card); border: 1px solid var(--border);
box-shadow: var(--shadow-sm); color: var(--text); text-align: center; font-size: .88rem; font-weight: 600; line-height: 1.25; }
.tile:hover { text-decoration: none; }
.tile-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.tile-ic .i { width: 24px; height: 24px; }
.tile .nav-count { position: absolute; top: 10px; right: 12px; }
@media (hover: hover) {
.tile:hover, .hub-tile:hover, .notice:hover { border-color: var(--accent); }
}
/* ---- 角色卡（首页与“我的角色”） ---- */
.roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.role { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; border-radius: 16px; background: var(--card);
border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.role-top { display: flex; gap: 12px; align-items: center; min-width: 0; }
.role-id { min-width: 0; }
.role-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 1.02rem; }
.role-name > a { color: var(--text); }
.role-name .badge + .badge { margin-left: 0; }
.role-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--muted); font-size: .84rem; }
.role-sub .i { width: 16px; height: 16px; }
.role-note { display: flex; gap: 6px; align-items: flex-start; margin: 0; padding: 8px 10px; border-radius: 10px; font-size: .84rem; }
.role-note .i { width: 16px; height: 16px; margin-top: 2px; }
.note-warn { background: var(--warn-bg); color: var(--warn); }
.note-frozen { background: var(--frozen-bg); color: var(--frozen); }
.note-danger { background: var(--danger-bg); color: var(--danger); }
.note-accent { background: var(--accent-soft); color: var(--accent); }
.qa { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin-top: auto; padding-top: 10px;
border-top: 1px solid var(--border); }
.qa form { display: contents; }
.qa-act { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
min-height: 56px; padding: 6px 2px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit;
font-size: .78rem; font-weight: 500; line-height: 1.2; text-align: center; white-space: normal; cursor: pointer; }
.qa-act .i { width: 20px; height: 20px; margin: 0; color: var(--accent); }
a.qa-act:hover { text-decoration: none; }
@media (hover: hover) {
.qa-act:hover { background: var(--soft); border-color: transparent; }
}
.qa-act:focus-visible { box-shadow: none; outline: 2px solid var(--accent); outline-offset: -2px; }
.qa-off { color: var(--muted); cursor: default; }
.qa-off .i { color: var(--muted); opacity: .6; }
.qa-hot { background: var(--warn-bg); }
.qa-hot .i { color: var(--warn); }
.qa-act .nav-count { position: absolute; top: 2px; right: 8%; min-width: 18px; height: 18px; font-size: .66rem; }
.role-deleted { opacity: .92; }
.role-deleted .role-top { opacity: .75; }
/* ---- 重要通知、角色名额 ---- */
.notice-list { display: grid; gap: 10px; }
.notice { display: block; padding: 12px 14px; border-radius: 12px; background: var(--soft); border: 1px solid var(--border); color: var(--text); }
.notice:hover { text-decoration: none; }
.notice-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); }
.notice-top .badge { font-size: .72rem; }
.notice-top time { margin-left: auto; }
.notice-title { display: block; margin: 6px 0 2px; font-size: .95rem; font-weight: 600; overflow-wrap: anywhere; }
.notice-sum { display: block; color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.notice-important { background: var(--warn-bg); border-color: var(--warn-border); }
.notice-urgent { background: var(--danger-bg); border-color: var(--danger-border); }
.quota { display: grid; gap: 8px; }
.q-row { display: flex; justify-content: space-between; gap: 12px; font-size: .88rem; }
.q-row b { font-variant-numeric: tabular-nums; }
/* ---- 角色枢纽 ---- */
.role-hero { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: center; }
.role-hero-id { flex: 1 1 260px; min-width: 0; }
.role-hero h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 1.5rem; }
.role-hero h1 .badge + .badge { margin-left: 0; }
.role-facts { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 8px 0 0; color: var(--muted); font-size: .86rem; }
.role-facts > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.role-facts .i { width: 15px; height: 15px; }
.head-why { margin: 6px 0 0; color: var(--muted); font-size: .82rem; }
.role-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.role-acts form { margin: 0; }
/* 不可用的操作（角色离线时的“重生”）：灰显，悬停不变色 */
.button.act-off, .button.act-off:hover { opacity: .55; cursor: not-allowed; background: var(--card); border-color: var(--input-border); }
.hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 16px; }
.hub-tile { display: flex; gap: 14px; align-items: flex-start; min-height: 96px; padding: 16px; border-radius: 16px;
background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--text); }
.hub-tile:hover { text-decoration: none; }
.hub-ic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); }
.hub-ic .i { width: 26px; height: 26px; }
.hub-text { flex: 1; min-width: 0; }
.hub-text b { display: block; font-size: 1rem; font-weight: 600; }
.hub-text small { display: block; margin-top: 2px; color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.hub-text .badge { margin-top: 8px; }
.hub-go { align-self: center; color: var(--muted); }
.hub-danger { border-color: var(--danger-border); }
.hub-danger .hub-ic { background: var(--danger-bg); color: var(--danger); }
.hub-danger b { color: var(--danger); }
.hub-help .hub-ic { background: var(--warn-bg); color: var(--warn); }
.sub-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sub-title .head { width: 40px; height: 40px; border-radius: 9px; }
.sub-title h1 { margin: 0; }
.last-login { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
/* ---- 进服诊断 ---- */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.check-item { display: flex; gap: 10px; align-items: flex-start; }
.check-item > .i { width: 18px; height: 18px; margin-top: 3px; }
.check-bad > .i { color: var(--danger); }
.check-hint > .i { color: var(--muted); }
.check-ok > .i { color: var(--ok); }
/* ---- 帐号头像设置 ---- */
.avatar-xl { width: 64px; height: 64px; border-radius: 14px; }
.av-group { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.av-group legend { font-weight: 600; padding: 0; margin-bottom: 8px; }
.av-choices { display: grid; gap: 10px; max-width: 34rem; }
.av-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.av-choice { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 12px; border: 1px solid var(--border);
border-radius: 12px; cursor: pointer; font-weight: normal; }
.av-choice > input { flex: none; margin: 0; }
.av-choice-text { display: flex; flex-direction: column; min-width: 0; }
.av-choice-text small { color: var(--muted); font-size: .82rem; }
.av-choice-off { cursor: not-allowed; color: var(--muted); }
.av-current { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
@media (max-width: 899.98px) {
.home-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
.welcome { padding: 18px 16px; border-radius: 16px; margin-bottom: 16px; }
.welcome h1 { font-size: 1.35rem; }
.server { flex-basis: 100%; }
.todo-item { flex-wrap: wrap; }
.todo-acts { width: 100%; }
.todo-acts > form, .todo-acts > a { flex: 1; }
.todo-acts .button, .todo-acts button { width: 100%; min-height: 44px; }
/* 五个字的“认领老角色”在 360–390px 宽度下保持一行：字号随视口略缩、减小左右内边距与间距 */
.tiles { grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 6px; }
.tile { min-height: 80px; padding: 10px 2px; font-size: clamp(.68rem, 3.1vw, .78rem); border-radius: 14px; }
.tile-ic { width: 38px; height: 38px; }
.roles, .hub { grid-template-columns: minmax(0, 1fr); }
.hub { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hub-tile { flex-direction: column; gap: 8px; min-height: 0; padding: 12px; }
.hub-ic { width: 40px; height: 40px; border-radius: 12px; }
.hub-go { display: none; }
.role-hero .head-lg { width: 64px; height: 64px; border-radius: 12px; }
.role-hero h1 { font-size: 1.3rem; }
.role-acts { width: 100%; }
.role-acts > form, .role-acts > .act-off { flex: 1; }
.role-acts > .act-off { min-height: 44px; }
.role-acts button { width: 100%; min-height: 44px; }
/* 移动端“我的”页：外观、邮件通知、两步验证、头像在顶部菜单中，下方重复的摘要卡片不再显示 */
.mine-dup { display: none; }
}
/* ---- 邀请码（帐号设置 → 邀请） ---- */
.invite-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.invite-grid > .card { margin-bottom: 0; }
.invite-fresh { border-left: 4px solid var(--ok-border); }
.invite-fresh:focus { outline: none; }
.copy-row { display: flex; gap: 8px; align-items: center; }
.copy-row input { flex: 1 1 auto; min-width: 0; }
.copy-row button { flex: none; }
.invite-code-input { font-size: 1.1rem; }
.invite-source { margin-top: 12px; }
.q-free { margin: -2px 0 0; }
.invite-list { list-style: none; margin: 0; padding: 0; }
.invite-item { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-start; justify-content: space-between;
padding: 12px 0; border-top: 1px solid var(--border); }
.invite-item:first-child { border-top: 0; padding-top: 0; }
.invite-main { flex: 1 1 18rem; min-width: 0; }
.invite-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.invite-code { font-family: var(--mono); font-size: 1rem; font-weight: 600; letter-spacing: .04em; user-select: all; }
.invite-voided .invite-code, .invite-expired .invite-code { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.invite-meta { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 4px; color: var(--muted); font-size: .85rem; }
.invite-meta > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.invite-meta .i { width: 14px; height: 14px; flex: none; }
.invite-meta .breakable { overflow-wrap: anywhere; }
.invite-link-box { margin-top: 6px; font-size: .85rem; }
.invite-link-box summary { cursor: pointer; color: var(--accent); min-height: 24px; }
.invite-link-box input { margin-top: 4px; font-size: .85rem; }
.invite-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.invite-acts form { margin: 0; }
.redeem-card { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.redeem-card h2 { display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.invite-banner { display: flex; gap: 10px; align-items: flex-start; }
.invite-banner .i { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--ok); }
.quota-choice { display: grid; gap: 6px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; min-width: 0; }
.quota-choice legend { font-weight: 500; padding: 0 4px; }
.quota-choice .choices { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.quota-choice label.check { margin: 0; }
.quota-choice .num { width: 6em; padding: 4px 8px; }
.warn-text { color: var(--warn); font-weight: 500; }
@media (max-width: 767.98px) {
.invite-grid { grid-template-columns: minmax(0, 1fr); }
.invite-acts { width: 100%; }
.invite-acts button { min-height: 40px; }
}
button.copied { border-color: var(--ok-border); color: var(--ok); }
button.copied::after { content: " ✓"; }
/* ======== 界面改版第 3 期：管理后台（admin/base.html） ======== */
/* 桌面：左侧分组侧边栏（sticky）+ 正文；移动端（< 768px）：顶栏“菜单”打开同一个侧边栏作为抽屉（:target，无脚本可用；
app.js 改为给 加 drawer-open，不改地址栏）。玩家顶栏与底部标签栏不在后台页面出现 */
/* 侧边栏的底色与分隔线画在网格容器上：正文比一屏长时，侧边栏一列仍铺满到底 */
.admin { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh;
background: linear-gradient(to right, var(--card) 247px, var(--border) 247px 248px, transparent 248px) no-repeat; }
.side {
position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain;
display: flex; flex-direction: column; gap: 2px; background: var(--card); border-right: 1px solid var(--border);
padding: max(16px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.side:focus { outline: none; }
.side-head { display: flex; align-items: center; gap: 8px; padding: 2px 6px 12px; }
.side-brand { margin-right: 0; }
.side-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.side-name b { font-size: 1rem; font-weight: 700; }
.side-name small { color: var(--muted); font-size: .75rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.side-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side-grp { margin: 14px 12px 4px; color: var(--muted); font-size: .74rem; font-weight: 700; letter-spacing: .06em; }
.side-nav a, .side-foot a, .side-out {
display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 0 12px; border-radius: var(--radius);
color: var(--text); font-weight: 500;
}
.side-nav .i, .side-foot .i { width: 19px; height: 19px; color: var(--muted); }
/* 侧边栏底部的“退出”：与菜单项同样排版的按钮，危险色 */
.side-foot form { margin: 0; }
button.side-out { width: 100%; justify-content: flex-start; border: 0; border-radius: var(--radius); background: none; color: var(--danger); line-height: 1.4; }
.side-foot .side-out .i { margin-left: 0; color: var(--danger); }
.side-nav .nav-count { margin-left: auto; }
.side-nav a:hover, .side-foot a:hover { text-decoration: none; }
@media (hover: hover) {
.side-nav a:hover, .side-foot a:hover { background: var(--soft); }
button.side-out:hover { background: var(--danger-bg); border-color: transparent; }
}
.side-nav a[aria-current] { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.side-nav a[aria-current] .i { color: var(--accent); }
.side-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }
.drawer-close, .drawer-back, .admin-mtop { display: none; }
.admin-col { display: flex; flex-direction: column; min-width: 0; }
.admin-main { flex: 1 0 auto; width: 100%; max-width: 1240px; min-width: 0; padding: 28px 32px 48px; }
/* 管理后台的精简底部栏：版权行与商标说明，排在正文下方（内容不满一屏时在视口底部） */
.admin-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; max-width: 1176px; margin: 0 32px;
padding: 14px 0 max(20px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border); color: var(--muted); font-size: .78rem; }
/* 页头：标题、说明与操作 */
.page-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 18px; }
.page-top-text { min-width: 0; }
.page-top h1 { margin: 0; font-size: 1.5rem; }
.page-sub { margin: 2px 0 0; color: var(--muted); font-size: .9rem; }
.page-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
/* 总览：统计磁贴 */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat {
display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px; border-radius: 16px;
background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--text);
}
a.stat:hover { text-decoration: none; }
@media (hover: hover) {
a.stat:hover { border-color: var(--accent); }
}
.stat-top { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .86rem; font-weight: 500; }
.stat-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px;
background: var(--accent-soft); color: var(--accent); }
.stat-ic .i { width: 20px; height: 20px; }
.stat b { font-size: 1.9rem; font-weight: 650; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat small { color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.stat-warn { border-color: var(--warn-border); }
.stat-warn .stat-ic { background: var(--warn-bg); color: var(--warn); }
.stat-danger .stat-ic { background: var(--danger-bg); color: var(--danger); }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.empty { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); }
.empty .i { color: var(--ok); }
/* 总览：待审核（通过 / 拒绝）、最近操作、系统状态、最近被拒 */
.rv-list, .au-list, .ra-list, .sys-list, .mini-roles { list-style: none; margin: 0; padding: 0; }
.rv, .au, .ra-list > li, .mini-roles > li { border-top: 1px solid var(--border); }
.rv:first-child, .au:first-child, .ra-list > li:first-child, .mini-roles > li:first-child { border-top: 0; padding-top: 0; }
.rv { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; }
.rv:last-child, .au:last-child, .ra-list > li:last-child, .mini-roles > li:last-child { padding-bottom: 0; }
/* 昵称首字头像：块级 + 行高居中、常规字重（列表中每行一个；网格居中与合成粗体都会明显增加排版耗时） */
.ini, .rv-av { display: block; flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
background: var(--accent-soft); color: var(--accent); font-weight: 500; line-height: 36px; text-align: center; }
.ini-lg { width: 64px; height: 64px; border-radius: 16px; font-size: 1.6rem; line-height: 64px; }
.rv-body { flex: 1; min-width: 0; }
.rv-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 650; }
.rv-t a { color: var(--text); }
.rv-t .badge + .badge { margin-left: 0; }
.rv-m { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 2px; color: var(--muted); font-size: .84rem; }
.rv-m > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.rv-m .i { width: 14px; height: 14px; }
.rv-q { margin: 6px 0 0; padding: 6px 10px; border-radius: 8px; background: var(--soft); font-size: .86rem; overflow-wrap: anywhere; }
.rv-acts { display: flex; gap: 8px; align-items: flex-start; flex: none; }
.rv-acts form { margin: 0; }
.rv-acts .button, .rv-acts button { min-height: 34px; }
.reject > summary { list-style: none; }
.reject > summary::-webkit-details-marker { display: none; }
.reject[open] > summary { background: var(--danger-bg); }
.button.danger-outline { color: var(--danger); border-color: var(--danger-border); background: var(--card); }
@media (hover: hover) {
.button.danger-outline:hover { background: var(--danger-bg); border-color: var(--danger); }
}
.reject-form { display: grid; gap: 6px; width: 16rem; margin: 8px 0 0; }
.reject-form label { font-size: .85rem; font-weight: 500; }
.reject-acts { display: flex; justify-content: flex-end; gap: 8px; }
.dialog { width: min(420px, calc(100vw - 32px)); padding: 20px; border: 0; border-radius: 16px;
background: var(--card); color: var(--text); box-shadow: var(--shadow-lg); }
.dialog::backdrop { background: rgba(0, 0, 0, .45); }
.dialog h2 { margin: 0 0 12px; font-size: 1.05rem; overflow-wrap: anywhere; }
.dialog .reject-form { width: auto; margin: 0; }
.au { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; }
.au-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px;
background: var(--soft); color: var(--muted); }
.au-body { flex: 1; min-width: 0; }
.au-t { overflow-wrap: anywhere; line-height: 1.45; }
.au-who, .au-t b { font-weight: 600; }
.au-m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; color: var(--muted); font-size: .8rem; }
.au-m code { padding: 0 6px; border-radius: 5px; background: var(--soft); border: 1px solid var(--border); font-size: .74rem; }
.sys-list { display: grid; gap: 14px; }
.sys { display: flex; gap: 12px; align-items: flex-start; }
.sys-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px;
background: var(--ok-bg); color: var(--ok); }
.sys-warn .sys-ic { background: var(--warn-bg); color: var(--warn); }
.sys-neutral .sys-ic { background: var(--neutral-bg); color: var(--neutral); }
.sys-body { flex: 1; min-width: 0; }
.sys-body b { display: block; font-size: .92rem; font-weight: 600; }
.sys-body small { display: block; color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }
.sys > .badge { flex: none; margin-top: 2px; }
.ra-list > li { padding: 10px 0; }
.ra-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ra-t .badge + .badge { margin-left: 0; }
.ra-m { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 2px; color: var(--muted); font-size: .8rem; }
/* 列表页：工具栏（分段筛选 + 搜索）、表格卡片、分页 */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; padding: 3px; border-radius: 11px;
background: var(--soft); border: 1px solid var(--border); }
.seg a { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 8px;
color: var(--muted); font-size: .88rem; font-weight: 600; white-space: nowrap; }
.seg a:hover { color: var(--text); text-decoration: none; }
.seg a[aria-current] { background: var(--card); color: var(--text); box-shadow: var(--shadow-sm); }
.seg-n { color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.search { display: flex; align-items: center; gap: 8px; flex: 0 1 320px; min-width: 240px; height: 42px; margin: 0 0 0 auto;
padding: 0 4px 0 12px; border-radius: 11px; background: var(--card); border: 1px solid var(--input-border); }
.search:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 0; }
.search .i { color: var(--muted); }
.search input[type=search] { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; }
.search input[type=search]:focus { outline: none; }
.filter-note { margin: -4px 0 12px; }
.filter-bar { margin: 0 0 14px; padding: 10px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); }
.filter-bar button .i { width: 16px; height: 16px; }
.tcard { margin-bottom: 16px; overflow-x: auto; border-radius: 16px; background: var(--card); border: 1px solid var(--border);
box-shadow: var(--shadow-sm); }
.atable { width: 100%; border-collapse: collapse; font-size: .9rem; }
.atable th { padding: 11px 16px; background: var(--soft); border-bottom: 1px solid var(--border); color: var(--muted);
font-size: .78rem; font-weight: 650; text-align: left; white-space: nowrap; }
.atable td { padding: 11px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.atable tbody tr:last-child td { border-bottom: 0; }
.atable .num { text-align: right; font-variant-numeric: tabular-nums; }
.atable .breakable { overflow-wrap: anywhere; min-width: 9em; }
.atable td.ip { overflow-wrap: anywhere; min-width: 8em; }
.atable td.text { min-width: 12em; }
.atable .detail { max-width: 28em; }
.atable .c-act .inline-form input { width: 9em; }
.who-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.who-text > a, .who-text > .name { color: var(--text); font-weight: 500; }
.who-text small, .c-main > small { color: var(--muted); font-size: .8rem; }
.c-main > small { display: block; }
.c-main .tags .badge { margin: 2px 4px 0 0; }
.c-status .badge { margin: 1px 4px 1px 0; }
.c-status .badge + .badge { margin-left: 0; }
.group-name small { display: block; }
.perms .badge-group { margin-bottom: 2px; white-space: normal; max-width: 100%; }
.group-name a { color: var(--text); }
.block { display: block; }
.head-row { width: 32px; height: 32px; border-radius: 8px; }
.pres { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.empty-row td { padding: 28px 16px; color: var(--muted); text-align: center; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: .86rem; }
.pager-links { display: flex; gap: 8px; }
.pager .button .i { width: 16px; height: 16px; }
.pager .button .i-end { margin: 0 -2px 0 0; }
/* 详情页（帐号、角色）：页头 + 左栏信息 + 右栏操作 */
.detail-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.detail-id { flex: 1 1 260px; min-width: 0; }
.detail-id h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 1.45rem; }
.detail-id h1 .badge + .badge { margin-left: 0; }
.detail-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 0; color: var(--muted); font-size: .86rem; }
.detail-facts > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.detail-facts .i { width: 15px; height: 15px; }
.detail-facts a { display: inline-flex; align-items: center; gap: 4px; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.detail-grid > .stack > .card { margin-bottom: 0; }
.detail-side .card h2 { font-size: 1rem; }
/* 右栏较窄：审核的“通过 / 拒绝”两个表单上下排列 */
.detail-side .split { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.mini-roles > li { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.mini-role-body { flex: 1; min-width: 0; }
.mini-role-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mini-role-t .badge + .badge { margin-left: 0; }
.mini-role-m { display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.sys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 16px; }
.sys-grid > .card { margin-bottom: 0; }
.table-checks summary { cursor: pointer; color: var(--accent); min-height: 24px; margin-top: 12px; }
.table-checks .check-list { margin-top: 8px; }
.ip-files li > span:last-child { text-align: right; }
@media (max-width: 1099.98px) {
.admin-grid, .detail-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 768px) and (max-width: 979.98px) {
.admin { grid-template-columns: 216px minmax(0, 1fr);
background: linear-gradient(to right, var(--card) 215px, var(--border) 215px 216px, transparent 216px) no-repeat; }
.admin-main { padding: 24px 20px 40px; }
.admin-foot { margin: 0 20px; }
}
@media (max-width: 767.98px) {
.admin { display: block; background: none; }
.side { display: none; position: fixed; top: 0; bottom: 0; left: 0; z-index: 41; width: min(300px, 86vw); height: auto;
border-right: 0; box-shadow: var(--shadow-lg); animation: drawer-in .18s var(--ease); }
.side:target, .drawer-open .side { display: flex; }
.side:target ~ .drawer-back, .drawer-open .drawer-back { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .45); }
.drawer-open body, html:has(.side:target) body { overflow: hidden; }
.drawer-close { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-left: auto; padding: 0 12px;
border-radius: var(--radius); background: var(--soft); color: var(--text); font-weight: 600; }
.drawer-close:hover { text-decoration: none; }
.side-nav a, .side-foot a, .side-out { min-height: 46px; }
.admin-mtop { display: flex; align-items: center; gap: 4px; position: sticky; top: 0; z-index: 20; height: calc(56px + env(safe-area-inset-top));
padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
background: var(--card); border-bottom: 1px solid var(--border); }
.burger { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: var(--radius);
color: var(--text); font-weight: 650; }
.burger:hover { text-decoration: none; }
.burger .i { width: 22px; height: 22px; }
.mtop-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtop-back { margin-left: auto; min-height: 40px; }
.admin-main { padding: 16px max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left)); }
.admin-foot { flex-direction: column; margin: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
.page-top { margin-bottom: 14px; }
.page-top h1 { font-size: 1.3rem; }
.page-acts { width: 100%; margin-left: 0; }
.page-acts > .button { flex: 1; min-height: 44px; }
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.stats > .stat:first-child { grid-column: 1 / -1; }
.stat b { font-size: 1.6rem; }
.admin-grid { gap: 16px; }
.rv { flex-wrap: wrap; }
.rv-body { flex-basis: calc(100% - 48px); }
.rv-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.rv-acts .button, .rv-acts button { width: 100%; min-height: 44px; }
.reject[open] { grid-column: 1 / -1; }
.reject-form { width: auto; }
.toolbar { flex-direction: column; align-items: stretch; }
.seg { flex-wrap: nowrap; overflow-x: auto; }
.seg a { min-height: 38px; }
.search { flex-basis: auto; min-width: 0; height: 44px; margin: 0; }
.filter-bar { padding: 8px; }
/* 列表在窄屏上为卡片：同一份表格，行变为卡片，状态徽章紧跟名字；整张卡片可点（名字链接铺满卡片，其余链接与表单浮在上面） */
.tcard { overflow: visible; background: none; border: 0; border-radius: 0; box-shadow: none; }
.stackable, .stackable tbody { display: block; }
.stackable thead { display: none; }
/* 卡片内全部为块级排版（不用网格 / 弹性盒 / 浮动）：每页几十张卡片，嵌套的网格与浮动会使移动端排版耗时增加约一半 */
.stackable tr { position: relative; display: block; margin-bottom: 10px; padding: 14px;
border-radius: 14px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.stackable td { display: block; min-width: 0; padding: 0; border: 0; }
.stackable td + td { margin-top: 6px; }
.atable.stackable .breakable, .atable.stackable td.ip, .atable.stackable td.text { min-width: 0; }
.stackable td[data-label] { font-size: .86rem; }
.stackable td[data-label]::before { content: attr(data-label); display: inline-block; width: 5.5em; margin-right: 10px;
vertical-align: top; color: var(--muted); }
.stackable td[data-label] > .block, .stackable td[data-label] > .detail { margin-left: calc(5.5em + 10px); }
.stackable td.num { display: none; }
.stackable .c-main { padding-right: 22px; }
.stackable .who-cell, .stackable .who-text { display: block; }
.stackable .who-text small { display: block; }
/* 带头像的卡片：头像绝对定位在左上角 */
.stackable .c-av { min-height: 40px; padding-left: 50px; }
.stackable .c-av .head-row, .stackable .c-av .ini { position: absolute; top: 14px; left: 14px; width: 40px; height: 40px; }
.stackable .c-av .ini { border-radius: 9px; line-height: 40px; }
.stackable .head-row { border-radius: 9px; }
.stackable .row-link::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 14px; }
.stackable .row-link::before { content: ""; position: absolute; top: 20px; right: 16px; width: 8px; height: 8px;
border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); transform: rotate(45deg); }
.stackable .lift { position: relative; z-index: 1; }
.stackable .c-act .inline-form input { width: auto; }
.stackable .detail { max-width: none; min-width: 0; }
.stackable .empty-row { display: block; }
.stackable .empty-row td { padding: 12px 0; }
.tcard > .pager { padding: 12px 2px 0; border-top: 0; }
.pager-links .button { min-height: 40px; }
.detail-hero .head-lg, .ini-lg { width: 56px; height: 56px; border-radius: 14px; }
.detail-id h1 { font-size: 1.25rem; }
.sys-grid { grid-template-columns: minmax(0, 1fr); }
}
@keyframes drawer-in { from { transform: translateX(-24px); opacity: 0; } }
/* ---- 404：看板娘"小悠"（errors/error.html）。像素画按整数倍放大；窄屏时放到卡片上方 ---- */
.nf { display: grid; grid-template-columns: minmax(0, 480px) auto; gap: 40px; align-items: center; justify-content: center; }
.nf-card { margin: 0; }
.nf-mascot { position: relative; justify-self: center; width: 258px; }
.nf-mascot img { display: block; width: 258px; height: 384px; image-rendering: pixelated; }
/* 深色：给角色加一圈很淡的浅色描边与绿光，避免深色描边融进背景 */
html[data-theme="dark"] .nf-mascot img { filter: drop-shadow(0 0 1.5px rgba(231,233,236,.38)) drop-shadow(0 0 16px rgba(141,181,128,.2)); }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .nf-mascot img { filter: drop-shadow(0 0 1.5px rgba(231,233,236,.38)) drop-shadow(0 0 16px rgba(141,181,128,.2)); } }
/* 像素问号：头侧两个，轻微浮动、交替出现；减少动态效果时静止 */
.nf-q { position: absolute; fill: var(--accent); }
.nf-q1 { left: -10px; top: 66px; width: 25px; height: 35px; }
.nf-q2 { right: -6px; top: 18px; width: 20px; height: 28px; }
@media (prefers-reduced-motion: no-preference) {
.nf-q { animation: nf-q 2.4s steps(4, end) infinite; }
.nf-q2 { animation-delay: -1.2s; }
}
@keyframes nf-q { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-6px); opacity: .35; } }
@media (max-width: 760px) {
.nf { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.nf-mascot { order: -1; width: 130px; }
.nf-mascot img { width: 130px; height: 192px; }
.nf-q1 { left: -18px; top: 34px; width: 15px; height: 21px; }
.nf-q2 { right: -14px; top: 10px; width: 10px; height: 14px; }
}
/* 应用授权管理（account/app_grants.html）与属性图标：原版界面图标按像素放大 */
.attr-icon { width: 18px; height: 18px; image-rendering: pixelated; image-rendering: crisp-edges; vertical-align: -3px; margin-right: 4px; }
.grant-table th.grant-col, .grant-table td.grant-col { text-align: center; white-space: nowrap; }
.grant-table th.grant-col { min-width: 3.5em; }
/* 表头与单元格里的屏幕阅读器文字（.sr-only 绝对定位）留在滚动区域之内，不撑宽页面 */
.grant-table th, .grant-table td { position: relative; }
.grant-legend { margin: 0 0 8px; padding-left: 1.2em; }
.grant-table label.grant-check { justify-content: center; margin: 0; padding: 0; }
.grant-focus { border-left: 4px solid var(--accent); }
.share-features { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.share-item + .share-item { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; }
section.share-item + section.share-item { border-top: none; }
/* 共享页“对方”的补全列表（app.js）与重名候选（profiles/share_pick.html） */
.share-lookup { position: relative; }
.lookup-list { list-style: none; margin: 4px 0 0; padding: 4px 0; border: 1px solid var(--border); border-radius: 8px;
background: var(--card); max-height: 260px; overflow-y: auto; }
.lookup-list li { padding: 6px 10px; cursor: pointer; }
.lookup-list li[role=option]:hover, .lookup-list li[role=option]:focus { background: var(--hover, rgba(127, 127, 127, .12)); outline: none; }
.lookup-list small { color: var(--muted); }
.share-pick-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.copy-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.copy-row code { word-break: break-all; }
/* 主题色，由 themes.toml 生成 */
html[data-accent="grass"]{--accent:#2f7d4f;--accent-fill:#2f7d4f;--accent-fill-hover:#276a43;--accent-soft:#ecf6f0;--hero-1:#1f6340;--hero-2:#0d2b1d;--hero-glow:rgba(120, 220, 160, .28)}
html[data-accent="lapis"]{--accent:#1c6aa3;--accent-fill:#1c6aa3;--accent-fill-hover:#175a8b;--accent-soft:#e3effa;--hero-1:#1a5688;--hero-2:#0b2238;--hero-glow:rgba(110, 190, 255, .3)}
html[data-accent="diamond"]{--accent:#0b6e7a;--accent-fill:#0b6e7a;--accent-fill-hover:#095c66;--accent-soft:#e0f3f4;--hero-1:#0b5d68;--hero-2:#062a30;--hero-glow:rgba(110, 225, 235, .28)}
html[data-accent="cherry"]{--accent:#b1356a;--accent-fill:#b1356a;--accent-fill-hover:#962c59;--accent-soft:#fbe8f0;--hero-1:#8f2c58;--hero-2:#35101f;--hero-glow:rgba(255, 150, 195, .3)}
html[data-accent="gold"]{--accent:#935409;--accent-fill:#935409;--accent-fill-hover:#7c4707;--accent-soft:#fbf0dc;--hero-1:#7d4a0e;--hero-2:#2c1905;--hero-glow:rgba(255, 196, 100, .3)}
html[data-accent="amethyst"]{--accent:#6644ad;--accent-fill:#6644ad;--accent-fill-hover:#573a95;--accent-soft:#efe9fa;--hero-1:#533b91;--hero-2:#1d1438;--hero-glow:rgba(190, 160, 255, .3)}
html[data-theme="dark"][data-accent="grass"]{--accent:#5cbf83;--accent-fill:#2a7a4b;--accent-fill-hover:#246b41;--accent-soft:rgba(92, 191, 131, .14);--hero-1:#1c5537;--hero-2:#0b1f16;--hero-glow:rgba(92, 191, 131, .22)}
html[data-theme="dark"][data-accent="lapis"]{--accent:#62aee8;--accent-fill:#1c6497;--accent-fill-hover:#175584;--accent-soft:rgba(98, 174, 232, .14);--hero-1:#174a75;--hero-2:#0a1a2b;--hero-glow:rgba(98, 174, 232, .22)}
html[data-theme="dark"][data-accent="diamond"]{--accent:#5cc9d1;--accent-fill:#0d6b75;--accent-fill-hover:#0a5b64;--accent-soft:rgba(92, 201, 209, .14);--hero-1:#0c525a;--hero-2:#06222a;--hero-glow:rgba(92, 201, 209, .22)}
html[data-theme="dark"][data-accent="cherry"]{--accent:#f08bb4;--accent-fill:#a8325f;--accent-fill-hover:#922a52;--accent-soft:rgba(240, 139, 180, .14);--hero-1:#7a2449;--hero-2:#230a15;--hero-glow:rgba(240, 139, 180, .2)}
html[data-theme="dark"][data-accent="gold"]{--accent:#eaaa45;--accent-fill:#8a4f0a;--accent-fill-hover:#764308;--accent-soft:rgba(234, 170, 69, .13);--hero-1:#6b3f0c;--hero-2:#1f1204;--hero-glow:rgba(234, 170, 69, .2)}
html[data-theme="dark"][data-accent="amethyst"]{--accent:#b096ee;--accent-fill:#6341a6;--accent-fill-hover:#56378f;--accent-soft:rgba(176, 150, 238, .15);--hero-1:#46307d;--hero-2:#150e29;--hero-glow:rgba(176, 150, 238, .2)}
@media (prefers-color-scheme:dark){
html:not([data-theme])[data-accent="grass"]{--accent:#5cbf83;--accent-fill:#2a7a4b;--accent-fill-hover:#246b41;--accent-soft:rgba(92, 191, 131, .14);--hero-1:#1c5537;--hero-2:#0b1f16;--hero-glow:rgba(92, 191, 131, .22)}
html:not([data-theme])[data-accent="lapis"]{--accent:#62aee8;--accent-fill:#1c6497;--accent-fill-hover:#175584;--accent-soft:rgba(98, 174, 232, .14);--hero-1:#174a75;--hero-2:#0a1a2b;--hero-glow:rgba(98, 174, 232, .22)}
html:not([data-theme])[data-accent="diamond"]{--accent:#5cc9d1;--accent-fill:#0d6b75;--accent-fill-hover:#0a5b64;--accent-soft:rgba(92, 201, 209, .14);--hero-1:#0c525a;--hero-2:#06222a;--hero-glow:rgba(92, 201, 209, .22)}
html:not([data-theme])[data-accent="cherry"]{--accent:#f08bb4;--accent-fill:#a8325f;--accent-fill-hover:#922a52;--accent-soft:rgba(240, 139, 180, .14);--hero-1:#7a2449;--hero-2:#230a15;--hero-glow:rgba(240, 139, 180, .2)}
html:not([data-theme])[data-accent="gold"]{--accent:#eaaa45;--accent-fill:#8a4f0a;--accent-fill-hover:#764308;--accent-soft:rgba(234, 170, 69, .13);--hero-1:#6b3f0c;--hero-2:#1f1204;--hero-glow:rgba(234, 170, 69, .2)}
html:not([data-theme])[data-accent="amethyst"]{--accent:#b096ee;--accent-fill:#6341a6;--accent-fill-hover:#56378f;--accent-soft:rgba(176, 150, 238, .15);--hero-1:#46307d;--hero-2:#150e29;--hero-glow:rgba(176, 150, 238, .2)}
}
[data-swatch="grass"]{--l-accent:#2f7d4f;--l-accent-fill:#2f7d4f;--l-accent-soft:#ecf6f0;--l-hero-1:#1f6340;--l-hero-2:#0d2b1d;--d-accent:#5cbf83;--d-accent-fill:#2a7a4b;--d-accent-soft:rgba(92, 191, 131, .14);--d-hero-1:#1c5537;--d-hero-2:#0b1f16}
[data-swatch="lapis"]{--l-accent:#1c6aa3;--l-accent-fill:#1c6aa3;--l-accent-soft:#e3effa;--l-hero-1:#1a5688;--l-hero-2:#0b2238;--d-accent:#62aee8;--d-accent-fill:#1c6497;--d-accent-soft:rgba(98, 174, 232, .14);--d-hero-1:#174a75;--d-hero-2:#0a1a2b}
[data-swatch="diamond"]{--l-accent:#0b6e7a;--l-accent-fill:#0b6e7a;--l-accent-soft:#e0f3f4;--l-hero-1:#0b5d68;--l-hero-2:#062a30;--d-accent:#5cc9d1;--d-accent-fill:#0d6b75;--d-accent-soft:rgba(92, 201, 209, .14);--d-hero-1:#0c525a;--d-hero-2:#06222a}
[data-swatch="cherry"]{--l-accent:#b1356a;--l-accent-fill:#b1356a;--l-accent-soft:#fbe8f0;--l-hero-1:#8f2c58;--l-hero-2:#35101f;--d-accent:#f08bb4;--d-accent-fill:#a8325f;--d-accent-soft:rgba(240, 139, 180, .14);--d-hero-1:#7a2449;--d-hero-2:#230a15}
[data-swatch="gold"]{--l-accent:#935409;--l-accent-fill:#935409;--l-accent-soft:#fbf0dc;--l-hero-1:#7d4a0e;--l-hero-2:#2c1905;--d-accent:#eaaa45;--d-accent-fill:#8a4f0a;--d-accent-soft:rgba(234, 170, 69, .13);--d-hero-1:#6b3f0c;--d-hero-2:#1f1204}
[data-swatch="amethyst"]{--l-accent:#6644ad;--l-accent-fill:#6644ad;--l-accent-soft:#efe9fa;--l-hero-1:#533b91;--l-hero-2:#1d1438;--d-accent:#b096ee;--d-accent-fill:#6341a6;--d-accent-soft:rgba(176, 150, 238, .15);--d-hero-1:#46307d;--d-hero-2:#150e29}