/* ============================================================
style.css - 数字分析记录系统 全局样式 v4.2「墨金 Ink & Signal」+ 多主题
设计语言: 深墨蓝应用外壳 + 琥珀信号色, 浅色数据面, 等宽数字排版
导航: 全视口保持顶部横向条(桌面端可见细滚动条, 条目溢出时可滚动访问)
多主题: html[data-theme] 覆盖 token(墨金/经典蓝/极光紫/翡翠绿/玫瑰红/暗夜)
导航修复: 顶部横向条显示细滚动条 + 矮视口紧凑模式, 条目始终可达
保留全部类名与 CSS 变量名(JS 内联样式依赖), 未改动既有功能 JS
============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
/* 品牌色板 - 默认「墨金」 */
--primary:#b45309;          /* 琥珀-主操作 */
--primary-dark:#92400e;
--primary-deep:#7c3a0a;
--primary-soft:#fbf0e2;
--ink:#101b2d;              /* 墨蓝-主壳 */
--ink-2:#16233a;            /* 墨蓝-导航 */
--ink-3:#1d2c47;            /* 墨蓝-悬浮 */

/* 语义色 */
--danger:#be123c;
--danger-dark:#a10f33;
--danger-soft:#fdeef2;
--danger-border:#f5c2ce;
--danger-hover:#fbe3ea;
--success:#15803d;
--success-soft:#eaf6ee;
--success-border:#bfe3c8;
--warning:#c2410c;
--warning-dark:#a63a0a;
--warning-soft:#fdf0e3;
--warning-border:#f2d5b0;
--info-bg:#e9f2fd;
--info-border:#c3d9f5;
--info-fg:#1d5aa8;

/* 表面与文字 */
--bg:#eef1f5;               /* 冷灰纸面 */
--card:#ffffff;
--card-border:rgba(16,27,45,.05);
--surface-1:#f6f8fa;        /* 表头/卡片头等次级表面 */
--surface-2:#f1f3f6;        /* 小标签/圆片 */
--hover:#f8fafc;
--border:#e3e7ec;
--border-strong:#d5dbe3;    /* 输入框边框 */
--row-border:rgba(16,27,45,.07);
--text:#16202e;
--text-primary:#1c2a3a;
--text-secondary:#4b5563;
--text-muted:#6b7280;
--placeholder:#9aa3ae;

/* 主题派生色(亮色壳上的强调 / 深色壳上的强调) */
--accent-bright:#fbbf24;
--accent-glow:rgba(180,83,9,.18);
--glow-strong:rgba(180,83,9,.25);
--glow-soft:rgba(180,83,9,.16);
--card-accent:#d9b48a;      /* 查询卡左侧默认色 */
--self-bubble:#101b2d;      /* 自己消息气泡 */
--ring:rgba(180,83,9,.14);  /* 输入聚焦光环 */

/* 阴影与浮层 */
--shadow-sm:0 1px 2px rgba(16,27,45,.05);
--shadow:0 1px 2px rgba(16,27,45,.05),0 4px 14px rgba(16,27,45,.06);
--shadow-hover:0 3px 12px rgba(16,27,45,.1);
--shadow-lg:0 12px 40px rgba(16,27,45,.18);
--overlay:rgba(16,27,45,.55);
--scrollbar:rgba(16,27,45,.18);

/* 基础 token */
--radius:10px;
--radius-lg:14px;
--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
--mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;

/* 安全区变量(浏览器注入) */
--safe-top:env(safe-area-inset-top,0px);
--safe-bottom:env(safe-area-inset-bottom,0px);
--safe-left:env(safe-area-inset-left,0px);
--safe-right:env(safe-area-inset-right,0px);

/* 触摸优化 */
--touch-target:44px;

/* 层级刻度: 内容粘性表头 → 输入条 → 浮动按钮 → 主题面板 → 弹窗 */
--z-sticky:1;
--z-inputbar:10;
--z-float:50;
--z-pop:100;
--z-modal:9999;
}

/* ============================================================
多主题: 通过覆盖 token 生效, JS 内联 var(--xxx) 自动跟随
============================================================ */
/* 经典蓝 */
html[data-theme="ocean-blue"]{
--primary:#1677ff;--primary-dark:#0958d9;--primary-deep:#073bb5;--primary-soft:#e6f4ff;
--ink:#0b1f3a;--ink-2:#10294a;--ink-3:#16355c;
--accent-bright:#8ec5ff;--accent-glow:rgba(22,119,255,.2);
--glow-strong:rgba(22,119,255,.25);--glow-soft:rgba(22,119,255,.16);
--card-accent:#8ec5ff;--self-bubble:#0b1f3a;--ring:rgba(22,119,255,.14);
}
/* 极光紫 */
html[data-theme="violet"]{
--primary:#722ed1;--primary-dark:#5b21b6;--primary-deep:#4c1d95;--primary-soft:#f3e8ff;
--ink:#1a1230;--ink-2:#241a40;--ink-3:#2e2252;
--accent-bright:#c4a5f5;--accent-glow:rgba(114,46,209,.2);
--glow-strong:rgba(114,46,209,.25);--glow-soft:rgba(114,46,209,.16);
--card-accent:#c9a8f2;--self-bubble:#1a1230;--ring:rgba(114,46,209,.16);
}
/* 翡翠绿 */
html[data-theme="emerald"]{
--primary:#047857;--primary-dark:#065f46;--primary-deep:#064e3b;--primary-soft:#e6f6ef;
--ink:#0b1f1a;--ink-2:#102a22;--ink-3:#15362c;
--accent-bright:#6ee7b7;--accent-glow:rgba(4,120,87,.2);
--glow-strong:rgba(4,120,87,.25);--glow-soft:rgba(4,120,87,.16);
--card-accent:#9fdcbf;--self-bubble:#0b1f1a;--ring:rgba(4,120,87,.14);
}
/* 玫瑰红 */
html[data-theme="rose"]{
--primary:#e11d48;--primary-dark:#be123c;--primary-deep:#9f1239;--primary-soft:#ffe4e6;
--ink:#261020;--ink-2:#33162a;--ink-3:#411c35;
--accent-bright:#fda4af;--accent-glow:rgba(225,29,72,.2);
--glow-strong:rgba(225,29,72,.25);--glow-soft:rgba(225,29,72,.16);
--card-accent:#fba9bd;--self-bubble:#261020;--ring:rgba(225,29,72,.14);
}
/* 暗夜(深色) */
html[data-theme="midnight"]{
--primary:#f59e0b;--primary-dark:#d97706;--primary-deep:#b45309;--primary-soft:rgba(245,158,11,.16);
--ink:#0d1117;--ink-2:#151b23;--ink-3:#1c2430;
--bg:#0f141b;--card:#161c26;
--card-border:#232b38;--surface-1:#1b2230;--surface-2:#242d3d;--hover:#1a2231;
--border:#2a323d;--border-strong:#39424f;--row-border:rgba(255,255,255,.08);
--text:#e6e9ee;--text-primary:#e6e9ee;--text-secondary:#a7b0bc;--text-muted:#7d8590;--placeholder:#6b7280;
--danger:#e5484d;--danger-dark:#c23a40;--danger-soft:rgba(229,72,77,.14);--danger-border:rgba(229,72,77,.32);--danger-hover:rgba(229,72,77,.22);
--success:#2ea043;--success-soft:rgba(46,160,67,.14);--success-border:rgba(46,160,67,.32);
--warning:#d29922;--warning-dark:#b8860b;--warning-soft:rgba(210,153,34,.14);--warning-border:rgba(210,153,34,.32);
--info-bg:rgba(88,166,255,.14);--info-border:rgba(88,166,255,.35);--info-fg:#7cb3ff;
--accent-bright:#fbbf24;--accent-glow:rgba(245,158,11,.16);
--glow-strong:rgba(245,158,11,.2);--glow-soft:rgba(245,158,11,.12);
--card-accent:#5b6672;--self-bubble:#1e2c44;--ring:rgba(245,158,11,.2);
--shadow-sm:0 1px 2px rgba(0,0,0,.4);
--shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.45);
--shadow-hover:0 3px 12px rgba(0,0,0,.5);
--shadow-lg:0 12px 40px rgba(0,0,0,.6);
--overlay:rgba(0,0,0,.6);
--scrollbar:rgba(255,255,255,.22);
}
html[data-theme="midnight"]{color-scheme:dark}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

html{
-webkit-tap-highlight-color:transparent;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
color-scheme:light;
}

body{
font-family:var(--font);
background:var(--bg);
color:var(--text);
min-height:100vh;
min-height:100dvh;
line-height:1.6;
overscroll-behavior-y:contain;
-webkit-overflow-scrolling:touch;
}

a{color:var(--primary-dark);text-decoration:none}
a:hover{color:var(--primary-deep);text-decoration:underline}

/* 数字排版: 数据一律等宽对齐 */
.num,.td-amount,.query-card-number,.threshold-row .num,.number-item,.q-record-amt,
.stat-card .value,table td{font-variant-numeric:tabular-nums}

/* 细滚动条(内容区) */
.content::-webkit-scrollbar,.table-wrap::-webkit-scrollbar,.chat-messages::-webkit-scrollbar{width:8px;height:8px}
.content::-webkit-scrollbar-thumb,.table-wrap::-webkit-scrollbar-thumb,.chat-messages::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:8px}
.content::-webkit-scrollbar-track,.table-wrap::-webkit-scrollbar-track,.chat-messages::-webkit-scrollbar-track{background:transparent}

/* ============================================================
登录 / 注册
============================================================ */
.login-wrap{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
min-height:100dvh;
background:
  radial-gradient(900px 480px at 88% -12%, var(--glow-strong), transparent 62%),
  radial-gradient(760px 420px at -8% 108%, var(--glow-soft), transparent 60%),
  var(--ink);
position:relative;
padding:16px;
padding-top:calc(16px + var(--safe-top));
padding-bottom:calc(16px + var(--safe-bottom));
}
/* 细网格纹理: 数字分析记录系统主题 */
.login-wrap::before{
content:'';position:absolute;inset:0;pointer-events:none;
background-image:
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
background-size:44px 44px;
mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 78%);
-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 78%);
}

.login-shell{
display:grid;
grid-template-columns:minmax(300px,400px) minmax(320px,400px);
gap:0;
width:100%;
max-width:820px;
border-radius:20px;
overflow:hidden;
box-shadow:var(--shadow-lg);
animation:rise .45s ease-out;
}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.login-brand{
display:flex;flex-direction:column;
justify-content:center;
background:linear-gradient(165deg,var(--ink-3),var(--ink));
padding:44px 40px;
color:#fff;
position:relative;
overflow:hidden;
}
.login-brand::after{
content:'';position:absolute;right:-70px;top:-70px;width:220px;height:220px;
background:radial-gradient(circle,var(--glow-strong),transparent 70%);
}
.brand-emoji{
font-size:52px;line-height:1;flex-shrink:0;
}
.brand-title{margin-top:14px;font-size:26px;font-weight:800;letter-spacing:.06em}

.login-card{
background:var(--card);
padding:44px 40px;
width:100%;
position:relative; /* 主题按钮锚定卡片右上角 */
}
.login-card h1{font-size:24px;font-weight:800;color:var(--text);letter-spacing:.02em}
.login-card .sub{font-size:13px;color:var(--text-muted);margin:6px 0 26px}

.login-link{text-align:center;margin-top:18px;font-size:13px;color:var(--text-muted)}
.login-link a{font-weight:600}

/* Forms */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--text-secondary)}
/* 登录页：保持登录勾选（独立一行，左对齐；覆盖全局 label 粗体/间距） */
.remember-row{margin-bottom:14px}
.remember-row label.remember-label{
  display:flex;align-items:center;gap:6px;margin:0;
  font-size:13px;font-weight:400;color:var(--text-muted);cursor:pointer;
  white-space:nowrap;
}
.remember-row label.remember-label input{
  /* 完整重置：覆盖全局 .form-group input 的 width:100%/padding/border/background，
     否则复选框会被渲染成全宽带边框大盒子，挤坏文字位置 */
  width:auto;height:auto;margin:0;padding:0;
  border:none;border-radius:0;background:none;box-shadow:none;
  flex-shrink:0;accent-color:var(--primary);cursor:pointer;
}
.form-group input,textarea,select{
width:100%;padding:11px 13px;
border:1px solid var(--border-strong);border-radius:var(--radius);
font-size:14px;font-family:var(--font);color:var(--text);
background:var(--card);
transition:border-color .18s,box-shadow .18s;
}
/* 移动端输入框字体 ≥16px 防止 iOS 自动缩放 */
@media(max-width:768px){
.form-group input,textarea,select{font-size:16px}
}
.form-group input:focus,textarea:focus,select:focus{
outline:none;border-color:var(--primary);
box-shadow:0 0 0 3px var(--ring);
}
.form-group input::placeholder,textarea::placeholder{color:var(--placeholder)}
textarea{resize:vertical;min-height:80px}

.captcha-row{display:flex;gap:12px;align-items:center}
.captcha-row input{flex:1}
.captcha-row img{
height:44px;border-radius:var(--radius);
border:1px solid var(--border-strong);cursor:pointer;
flex-shrink:0;min-width:90px;
-webkit-user-select:none;user-select:none;
}

/* Buttons */
.btn{
display:inline-flex;align-items:center;justify-content:center;
gap:6px;padding:10px 20px;border:none;border-radius:var(--radius);
font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
font-family:var(--font);
-webkit-user-select:none;user-select:none;
touch-action:manipulation;
min-height:var(--touch-target);
}
.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--primary-dark)}
.btn-primary:active{background:var(--primary-deep)}
.btn-primary.btn-block{width:100%}

.btn-sm{padding:5px 12px;font-size:12px;font-weight:500;min-height:32px;border-radius:8px}

.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:var(--danger-dark)}
.btn-danger:active{background:var(--danger-deep,var(--danger-dark))}

.btn-warning{background:var(--warning);color:#fff}
.btn-warning:hover{background:var(--warning-dark)}

.btn-default{
background:var(--card);color:var(--text-secondary);
border:1px solid var(--border);
box-shadow:var(--shadow-sm);
}
.btn-default:hover{border-color:var(--primary);color:var(--primary-dark)}
.btn-default:active{background:var(--surface-2)}

.btn:disabled{opacity:.5;cursor:not-allowed}

/* Alerts */
.alert{padding:10px 14px;border-radius:var(--radius);font-size:13px;margin-bottom:12px;line-height:1.5}
.alert-error{background:var(--danger-soft);border:1px solid var(--danger-border);color:var(--danger)}
.alert-success{background:var(--success-soft);border:1px solid var(--success-border);color:var(--success)}
.alert-info{background:var(--info-bg);border:1px solid var(--info-border);color:var(--info-fg)}
.alert-warning{background:var(--warning-soft);border:1px solid var(--warning-border);color:var(--warning)}

/* ============================================================
App Layout: 桌面 = 顶栏 + 左侧导航(网格), 移动 = 单列
============================================================ */
#app{
display:none;
height:100vh;height:100dvh;
overflow:hidden;
grid-template-columns:1fr;
grid-template-rows:auto auto 1fr;
grid-template-areas:"header" "tabs" "content";
}
#app.show{display:grid!important} /* 覆盖 JS 内联 display:flex, 保持布局为网格 */

.header{
grid-area:header;
background:var(--ink);
color:#fff;padding:0 20px;
padding-top:calc(0px + var(--safe-top));
display:flex;align-items:center;justify-content:space-between;
height:56px;flex-shrink:0;
border-bottom:1px solid rgba(255,255,255,.07);
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.header h1{font-size:16px;font-weight:700;letter-spacing:.08em;white-space:nowrap}

.header-right{display:flex;align-items:center;gap:10px;font-size:13px;min-width:0}
.header-right .user{
background:rgba(255,255,255,.1);
padding:3px 12px;border-radius:999px;
color:rgba(255,255,255,.92);
max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.header-right .badge{
background:var(--primary-soft);color:var(--primary-dark);
border:1px solid var(--primary-dark);
padding:2px 10px;border-radius:999px;font-size:11px;white-space:nowrap;
}
.header-right .btn{
background:rgba(255,255,255,.08);color:rgba(255,255,255,.9);
padding:5px 12px;font-size:12px;min-height:30px;border-radius:8px;
box-shadow:none;
}
.header-right .btn:hover{background:rgba(255,255,255,.16);color:#fff}
.header-right .btn-quit{background:rgba(190,18,60,.22);color:#fda4af}
.header-right .btn-quit:hover{background:rgba(190,18,60,.38);color:#fff}
.header-right .btn-theme{width:32px;height:32px;padding:0;border-radius:9px;flex-shrink:0}
.header-right .btn-theme svg{width:16px;height:16px}

/* Tabs: 移动端横向条(高度随视口高度连续缩放: clamp(40px, 6.8vh, 50px), vh 兼容老内核) */
.tabs{
grid-area:tabs;
display:flex;gap:2px;padding:0 14px;
background:var(--ink-2);
border-bottom:1px solid rgba(255,255,255,.07);
flex-shrink:0;overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
height:44px; /* 旧浏览器回退(不支持 clamp/vh 时固定高度) */
height:clamp(40px,6.8vh,50px);
align-items:stretch;
}
.tabs::-webkit-scrollbar{display:none}
.tab-btn{
padding:0 15px;background:none;border:none;
border-bottom:2px solid transparent;
color:rgba(255,255,255,.72);cursor:pointer;
font-size:13px;white-space:nowrap;transition:color .15s,background .15s;
font-family:var(--font);
height:100%;min-height:0;
display:flex;align-items:center;
touch-action:manipulation;
-webkit-user-select:none;user-select:none;
}
.tab-btn:hover{color:#fff;background:rgba(255,255,255,.06)}
.tab-btn.active{color:var(--accent-bright);border-bottom-color:var(--accent-bright);font-weight:600;background:var(--accent-glow)}

/* Tabs: 桌面端顶部横向条(高度随视口明显缩放 + 底部可拖动滚动条) */
@media(min-width:1024px){
.tabs{
padding:0 24px;
overscroll-behavior-x:contain;
scrollbar-width:thin;
scrollbar-color:rgba(255,255,255,.35) rgba(255,255,255,.08);
height:44px; /* 旧浏览器回退 */
height:clamp(32px,5.2vh,56px); /* 桌面: 5.2vh 陡斜率, 1080p→56px / 800→42 / 700→36 / 600→32 */
}
.tabs::-webkit-scrollbar{display:block;height:10px}
.tabs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
.tabs::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.55);background-clip:padding-box}
.tabs::-webkit-scrollbar-track{background:rgba(255,255,255,.08)}
.tab-btn{padding:0 18px;font-size:13.5px;font-size:clamp(11px,1.6vh,13.5px)} /* 字号随视口同步缩放 */
}
/* 矮视口: 间距同步收紧(高度/字号已由 vh 连续缩放) */
@media(min-width:1024px) and (max-height:760px){
.tabs{padding:0 14px;gap:2px}
.tab-btn{padding:0 12px}
}
/* 旧内核浏览器(不支持 clamp): 矮视口固定档缩小 */
@supports not (height:clamp(1px,1vh,1px)){
@media(max-height:760px){
.tabs{height:36px}
.tab-btn{font-size:12px}
}
}

.content{
grid-area:content;
flex:1;overflow-y:auto;overflow-x:hidden;
background:var(--bg);
-webkit-overflow-scrolling:touch;
min-width:0;
padding-bottom:calc(30px + var(--safe-bottom,0px)); /* 底部预留固定页脚空间,内容不被遮挡 */
}
.panel{display:none;padding:16px;max-width:1000px;margin:0 auto}
.panel.active{display:block}

/* ============================================================
主题切换: 顶栏按钮 / 登录页右上角按钮 / 选择面板
============================================================ */
.btn-theme-float{
position:absolute;top:12px;right:12px;
width:36px;height:36px;border-radius:11px;
display:flex;align-items:center;justify-content:center;
background:var(--surface-2);color:var(--text-secondary);
border:1px solid var(--border);cursor:pointer;
z-index:var(--z-float);
transition:background .15s,border-color .15s,color .15s;
}
.btn-theme-float:hover{background:var(--surface-1);border-color:var(--primary);color:var(--primary)}
.btn-theme-float:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.btn-theme-float svg{width:17px;height:17px}

.theme-pop{
position:fixed;top:calc(var(--safe-top) + 62px);right:14px;
width:238px;background:var(--card);border:1px solid var(--border);
border-radius:14px;box-shadow:var(--shadow-lg);
padding:14px;z-index:var(--z-pop);
animation:rise .18s ease-out;
}
.theme-pop[hidden]{display:none}
.theme-pop-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px}
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.theme-item{
display:flex;align-items:center;gap:8px;padding:7px 9px;
border:1px solid var(--border);border-radius:10px;background:var(--card);
cursor:pointer;font-family:var(--font);font-size:12.5px;color:var(--text-secondary);
transition:border-color .15s;min-height:34px;text-align:left;
}
.theme-item:hover{border-color:var(--primary)}
.theme-item.active{border-color:var(--primary);color:var(--text);box-shadow:0 0 0 1px var(--primary)}
.theme-dot{
width:16px;height:16px;border-radius:50%;flex-shrink:0;
background:linear-gradient(135deg,var(--dot-a) 50%,var(--dot-b) 50%);
border:1px solid var(--border);
}
.theme-name{flex:1}
.theme-item.active::after{content:'✓';color:var(--primary);font-weight:700;font-size:12px}

/* ============================================================
Chat
============================================================ */
.chat-container{display:flex;flex-direction:column;flex:1;min-height:0}
.chat-messages{
flex:1;overflow-y:auto;
padding:20px 0 80px 0;
display:flex;flex-direction:column;gap:12px;
-webkit-overflow-scrolling:touch;
}
.chat-msg{display:flex;gap:10px;max-width:min(82%,700px);animation:fadein .18s ease-out}
.chat-msg>div{min-width:0} /* 防止条目网格把气泡容器水平撑破 */
@keyframes fadein{from{opacity:0}to{opacity:1}}
.chat-msg.self{flex-direction:row-reverse;align-self:flex-end}
.chat-msg .avatar{
width:clamp(30px,3vw,40px);height:clamp(30px,3vw,40px);border-radius:clamp(9px,.9vw,12px);
display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:700;font-size:clamp(12px,1.2vw,15px);flex-shrink:0;
box-shadow:var(--shadow-sm);
}
.chat-msg .bubble{
background:var(--card);padding:11px 15px;
border-radius:16px;border-bottom-left-radius:5px;
box-shadow:var(--shadow);
border:1px solid var(--card-border);
font-size:14px;line-height:1.55;
word-break:break-word;overflow-wrap:break-word;
}
.chat-msg.self .bubble{background:var(--self-bubble);color:#fff;border-color:transparent;border-radius:16px;border-bottom-right-radius:5px}
.chat-msg .time{font-size:11px;color:var(--text-muted);margin-top:4px}
.chat-msg.self .time{text-align:right}
.chat-msg .entries{
background:var(--surface-1);border-radius:10px;
padding:9px;margin-top:9px;font-size:13px;
}
.chat-msg.self .entries{background:rgba(255,255,255,.08)}
/* 条目网格:固定3行,列数随屏幕自适应(桌面6列/平板4列/手机3列,每列3条→可见9-18条) */
.chat-msg .entries-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0 12px;position:relative}
.chat-msg .entries .row{
display:flex;justify-content:space-between;padding:3px 2px;
border-bottom:1px solid var(--row-border);
gap:8px;min-width:0;flex-wrap:wrap;
}
.chat-msg.self .entries .row{border-bottom-color:rgba(255,255,255,.1)}
/* 默认收缩:只显示前 3行×N列(9/12/18条),其余条目隐藏(display:none,展开后随文档流显示,
   无 overflow/高度裁剪,气泡与条目同步长高);展开(.open)显示全部 */
.chat-msg .entries-grid > .row:nth-child(n+19){display:none} /* 桌面6列×3行 */
@media(max-width:768px){
  .chat-msg .entries-grid{grid-template-columns:repeat(4,1fr)}
  .chat-msg .entries-grid > .row:nth-child(n+13){display:none} /* 平板4列×3行 */
}
@media(max-width:480px){
  .chat-msg .entries-grid{grid-template-columns:repeat(3,1fr)}
  .chat-msg .entries-grid > .row:nth-child(n+10){display:none} /* 手机3列×3行 */
}
.chat-msg .entries.open .entries-grid > .row{display:flex}
/* 底部渐隐:仅当存在被隐藏条目(JS 标记 has-more)且未展开时显示 */
.chat-msg .entries.has-more:not(.open) .entries-grid::after{
content:'';position:absolute;left:0;right:0;bottom:0;height:1.6em;
background:linear-gradient(to bottom,transparent,var(--surface-1));
pointer-events:none;
}
.chat-msg .entries-total{border-top:2px solid var(--primary);margin-top:4px;padding-top:4px;font-weight:700}
.chat-msg .entries-toggle{
display:none;align-items:center;justify-content:center;gap:4px;
width:100%;margin-top:7px;padding:4px 0;border:none;border-radius:7px;
background:var(--surface-2);color:var(--text-secondary);
font-size:12px;cursor:pointer;touch-action:manipulation;
}
.chat-msg .entries.open .entries-toggle,
.chat-msg .entries.has-more:not(.open) .entries-toggle{display:flex}
.chat-msg.self .entries-toggle{background:rgba(255,255,255,.1);color:#fff}
.chat-msg .entries-toggle:hover{background:var(--border-strong);color:var(--text)}
.chat-msg .alert-tag{
display:inline-block;background:var(--warning);color:#fff;
padding:1px 7px;border-radius:6px;font-size:11px;margin-left:6px;
white-space:nowrap;
}

/* Copy bubble */
.chat-msg .bubble.copy-bubble{position:relative;padding-right:36px;white-space:pre-wrap}
.chat-msg:not(.self) .bubble.copy-bubble{padding-bottom:32px}
.chat-msg .copy-btn{
position:absolute;bottom:6px;right:6px;
width:26px;height:26px;border:none;border-radius:7px;
background:var(--surface-2);color:var(--text-secondary);font-size:13px;
cursor:pointer;display:flex;align-items:center;justify-content:center;
opacity:.85;transition:opacity .15s;
touch-action:manipulation;
}
.chat-msg.self .copy-btn,.chat-msg .bubble.copy-bubble .entries+.copy-btn{
background:rgba(255,255,255,.22);color:#fff;
}
.chat-msg .copy-btn:hover{opacity:1;background:var(--border-strong)}
.chat-msg.self .copy-btn:hover,.chat-msg .bubble.copy-bubble .entries+.copy-btn:hover{
background:rgba(255,255,255,.38);
}
.chat-msg .copy-btn.copied{background:var(--success);color:#fff;opacity:1}

/* Chat input area */
.chat-input-area{
display:flex;gap:8px;
padding:clamp(10px,1.4vw,14px) clamp(12px,2vw,18px);
padding-bottom:calc(clamp(10px,1.4vw,14px) + var(--safe-bottom));
background:transparent;
flex-shrink:0;
position:sticky;
bottom:calc(30px + var(--safe-bottom,0px)); /* 上移避开固定页脚,不遮挡按钮 */
z-index:var(--z-inputbar);
}
.chat-input-area textarea{
flex:1;padding:10px 15px;
border:1px solid var(--border);border-radius:22px;
resize:none;font-size:15px;font-family:var(--font);
min-height:clamp(38px,4.4vh,46px);max-height:clamp(96px,14vh,132px);line-height:1.4;
background:var(--card);
transition:border-color .18s,box-shadow .18s;
}
.chat-input-area textarea:focus{
outline:none;border-color:var(--primary);
box-shadow:0 0 0 3px var(--ring);
}
.chat-input-area .btn{
border-radius:50%;width:clamp(38px,3.8vw,52px);height:clamp(38px,3.8vw,52px);padding:0;
font-size:clamp(16px,1.7vw,21px);flex-shrink:0;
min-height:unset;
}
/* 清空输入框按钮:固定高度,不随输入框(autoGrow 变高)拉伸;与发送按钮一样始终底部对齐 */
.chat-input-area .btn-clear-input{
border-radius:20px;width:auto;height:42px;padding:0 14px;font-size:13px;white-space:nowrap;
align-self:flex-end;
}
.chat-input-area .btn-send{align-self:flex-end}
@media(max-width:768px){
.chat-input-area .btn-clear-input{height:38px}
}
/* 过滤面板数字输入框:基础 15px,移动端 16px(防 iOS 聚焦自动缩放) */
#fText{font-size:15px}
@media(max-width:768px){
#fText{font-size:16px}
}
/* 过滤面板功能组件与对话工具栏统一风格(剔除数字/类型/复选项) */
.filter-toolbar{
display:flex;gap:8px;flex-wrap:nowrap;align-items:center;
flex-shrink:0;margin-bottom:6px;
overflow-x:auto;overflow-y:hidden;
-webkit-overflow-scrolling:touch;
scrollbar-width:none; /* 隐藏滚动条,保持简洁 */
}
.filter-toolbar::-webkit-scrollbar{display:none}
.filter-opt-input,.filter-opt-select{
border:1px solid var(--border);border-radius:8px;
font-size:13px;padding:6px 10px;background:var(--card);
font-family:var(--font);flex-shrink:0;min-height:32px;box-sizing:border-box;
}
.filter-opt-input{width:84px;text-align:center}
.filter-opt-select{width:88px;padding:6px 12px}
/* 滑动开关(Slider/Switch):紧凑版,清晰选中/未选中态 + 过渡动画 */
.sw{
position:relative;display:inline-flex;align-items:center;gap:6px;
flex-shrink:0;cursor:pointer;user-select:none;-webkit-user-select:none;
font-size:13px;color:var(--text-muted);
-webkit-tap-highlight-color:transparent;
}
.sw input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.sw-track{
position:relative;display:inline-block;width:34px;height:20px;flex-shrink:0;
background:var(--border-strong);border-radius:20px;
box-shadow:inset 0 1px 2px rgba(0,0,0,.12);
transition:background .22s ease,box-shadow .22s ease;
touch-action:none; /* 拖动滑块时避免触发页面滚动 */
}
.sw-thumb{
position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;
background:#fff;box-shadow:0 1px 3px rgba(16,27,45,.35);
transition:transform .22s cubic-bezier(.4,.2,.2,1);
pointer-events:none;
}
.sw-text{transition:color .22s ease}
.sw input:checked + .sw-track{background:var(--primary);box-shadow:inset 0 1px 2px rgba(0,0,0,.18)}
.sw input:checked + .sw-track .sw-thumb{transform:translateX(14px)}
.sw input:checked ~ .sw-text{color:var(--primary);font-weight:600}
.sw input:focus-visible + .sw-track{outline:2px solid var(--primary);outline-offset:2px}
/* 拖拽预览时关闭过渡,松手后恢复动画 */
.sw-track.dragging,.sw-track.dragging .sw-thumb{transition:none}
@media(max-width:768px){
.filter-opt-input,.filter-opt-select,.sw{font-size:14px}
}

.chat-empty{text-align:center;color:var(--text-muted);padding:44px 20px}
.chat-empty .icon{font-size:46px;margin-bottom:10px;opacity:.85}
/* 矢量图标(替代 emoji):随字号 1em 缩放,currentColor 跟随文字颜色,跨设备渲染一致 */
.icon{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;flex-shrink:0}

/* ============================================================
Cards & Tables
============================================================ */
.card-row{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:12px;margin-bottom:16px;
}
.stat-card{
background:var(--card);border-radius:var(--radius-lg);
padding:18px 16px;text-align:center;
box-shadow:var(--shadow);
border:1px solid var(--card-border);
}
.stat-card .label{font-size:12px;font-weight:500;color:var(--text-secondary);margin-bottom:7px}
.stat-card .value{font-size:25px;font-weight:800;word-break:break-all;line-height:1.25}

.table-wrap{
overflow-x:auto;background:var(--card);
border-radius:var(--radius-lg);box-shadow:var(--shadow);
border:1px solid var(--card-border);
-webkit-overflow-scrolling:touch;
max-width:100%;
}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:400px}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--border)}
th{
background:var(--surface-1);font-weight:600;
white-space:nowrap;color:var(--text-secondary);font-size:12px;
}
.table-wrap th{position:sticky;top:0;z-index:var(--z-sticky)}
tr:hover{background:var(--hover)}
tbody tr:last-child td{border-bottom:none}

.filters{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:flex-end}
.filters-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.filters-grid .filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.filters-grid .filter-row.full{grid-column:1/-1}
.filters input,.filters select{
padding:7px 10px;border:1px solid var(--border-strong);
border-radius:8px;font-size:13px;font-family:var(--font);
background:var(--card);
}

.pagination{
display:flex;gap:8px;justify-content:flex-end; /* 分页栏右对齐 */
margin-top:12px;align-items:center;
flex-wrap:wrap;
}
.pagination span{font-size:13px;color:var(--text-secondary)}
/* 分页控件:每页条数下拉 / 页码输入跳转 / 总数 */
.pager-size-wrap{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--text-secondary);white-space:nowrap}
.pager-size{padding:4px 6px;border:1px solid var(--border);border-radius:6px;background:var(--card);font-size:12px;font-family:var(--font);color:var(--text)}
.pager-page{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--text-secondary);white-space:nowrap}
.pager-input{width:48px;padding:4px 6px;border:1px solid var(--border);border-radius:6px;background:var(--card);font-size:12px;font-family:var(--font);color:var(--text);text-align:center}
.pager-input:focus{outline:none;border-color:var(--primary)}
.pager-total{font-size:12px;color:var(--text-muted);white-space:nowrap}

/* ============================================================
Query Panel
============================================================ */
.query-filters{background:var(--card);border-radius:var(--radius-lg);padding:16px;margin-bottom:16px;box-shadow:var(--shadow);border:1px solid var(--card-border)}
/* query.js 内联硬编码 #1677ff 的「查询超出额度」按钮: 仅 CSS 统一为主色, 不改 JS */
.query-filters .btn.btn-primary{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}
.query-input-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.query-number-wrap{display:flex;align-items:center;background:var(--surface-1);border-radius:10px;border:2px solid var(--border-strong);overflow:hidden;transition:border-color .18s,box-shadow .18s}
.query-number-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.query-number-prefix{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--primary);padding:0 10px;user-select:none}
.query-number-wrap input{border:none!important;background:transparent;font-family:var(--mono);font-size:20px;text-align:center;letter-spacing:4px;padding:10px 12px 10px 0;width:130px;outline:none;box-shadow:none!important}
.query-filters input[type="date"]{width:140px;padding:10px 12px;border:1px solid var(--border-strong);border-radius:8px;font-family:var(--font);font-size:14px}
.query-hint{font-size:11px;color:var(--text-muted);margin-top:10px;padding-left:4px}

/* Query Cards */
.query-cards{display:flex;flex-direction:column;gap:12px}
.query-card{
background:var(--card);border-radius:var(--radius-lg);
box-shadow:var(--shadow);
border:1px solid var(--card-border);
border-left:4px solid var(--card-accent);
overflow:hidden;transition:border-color .18s,box-shadow .18s;
}
.query-card:hover{box-shadow:var(--shadow-hover);border-left-color:var(--primary)}
.query-card-alert{border-left-color:var(--danger)}
.query-card-alert:hover{border-left-color:var(--danger)}
.query-card-header{display:flex;align-items:center;gap:16px;padding:13px 16px;background:var(--surface-1);border-bottom:1px solid var(--border);flex-wrap:wrap}
.query-card-number{font-family:var(--mono);font-size:27px;font-weight:700;color:var(--primary-dark);min-width:70px;letter-spacing:2px}
.query-card-alert .query-card-number{color:var(--danger)}
.query-card-stats{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:1}
.query-card-stat{font-size:12px;color:var(--text-secondary)}
.query-card-stat-val{font-weight:700;font-size:16px;color:var(--text)}
.query-card-stat-amt{font-weight:700;color:var(--danger);font-size:14px}
.query-card-stat-amt span{font-size:16px}

/* Badges */
.query-card-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap}
.badge-muted{background:var(--surface-2);color:var(--text-muted)}
.badge-danger{background:var(--danger-soft);color:var(--danger)}
.badge-success{background:var(--success-soft);color:var(--success)}
.badge-warning{background:var(--warning-soft);color:var(--warning)}

.query-card-body{padding:0;overflow-x:auto}
.query-card-body table{margin:0;min-width:500px}
.query-card-body th{background:transparent;border-bottom:2px solid var(--border);font-size:11px;letter-spacing:.5px;position:static;color:var(--text-muted)}
.query-card-body td{padding:10px 16px}

/* Table cell styles */
.td-amount{font-family:var(--mono);font-weight:700;color:var(--danger);font-size:14px;white-space:nowrap}
.td-time{font-size:11px;color:var(--text-muted);white-space:nowrap}
.tr-blocked{background:var(--danger-soft)}
.tr-blocked:hover{background:var(--danger-hover)}

/* Tags */
.lottery-tag{display:inline-block;padding:2px 9px;background:var(--surface-2);border-radius:6px;font-size:12px;font-weight:600;color:var(--text-secondary)}
.status-badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:600}
.status-danger{background:var(--danger-soft);color:var(--danger)}
.status-success{background:var(--success-soft);color:var(--success)}

/* ============================================================
User Management
============================================================ */
.user-row{
display:flex;align-items:center;gap:10px;
padding:11px 14px;background:var(--card);
border-radius:12px;margin-bottom:8px;box-shadow:var(--shadow);
border:1px solid var(--card-border);
flex-wrap:wrap;
}
.user-row .uavatar{
width:32px;height:32px;border-radius:10px;
display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:700;font-size:13px;flex-shrink:0;
}
.user-row .uinfo{flex:1;min-width:120px}
.user-row .uname{font-weight:600;font-size:14px}
.user-row .umeta{font-size:12px;color:var(--text-muted)}
.user-row .uactions{display:flex;gap:6px;flex-shrink:0}

.user-form{
padding:16px;background:var(--card);
border-radius:var(--radius-lg);margin-bottom:16px;
box-shadow:var(--shadow);border:1px solid var(--card-border);
}
.user-form h2{font-size:15px;font-weight:700;margin-bottom:14px;padding-left:11px;border-left:3px solid var(--primary)}
.user-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.user-form-grid .form-group label{font-size:12px;color:var(--text-muted);margin-bottom:4px;display:block}
.user-form-grid input,.user-form-grid select{width:100%;padding:8px 10px;border:1px solid var(--border-strong);border-radius:8px;font-size:14px;font-family:var(--font);background:var(--surface-1);box-sizing:border-box}

/* 过滤功能开关（用户管理） */
.feat-switch-grid{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.feat-switch-item{flex:1;min-width:220px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 14px;background:var(--surface-1);border:1px solid var(--border);border-radius:12px;transition:border-color .18s}
.feat-switch-item:hover{border-color:var(--primary)}
.feat-switch-info{flex:1;min-width:0}
.feat-switch-title{font-size:14px;font-weight:600;color:var(--text)}
.feat-switch-desc{font-size:12px;color:var(--text-muted);margin-top:2px;line-height:1.5}
.feat-switch-hint{font-size:12px;color:var(--text-muted)}
.feat-toggle{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0;cursor:pointer}
.feat-toggle input{position:absolute;opacity:0;width:0;height:0}
.feat-toggle-track{position:absolute;inset:0;background:var(--border-strong);border-radius:26px;transition:background .18s}
.feat-toggle-track::before{content:'';position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(16,27,45,.3);transition:transform .18s}
.feat-toggle input:checked + .feat-toggle-track{background:var(--primary)}
.feat-toggle input:checked + .feat-toggle-track::before{transform:translateX(20px)}
.feat-toggle input:focus-visible + .feat-toggle-track{outline:2px solid var(--primary);outline-offset:2px}

/* 用户卡片网格 */
.user-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.user-card{
background:var(--card);border-radius:var(--radius-lg);padding:15px;
box-shadow:var(--shadow);
display:flex;flex-direction:column;gap:10px;
border:1px solid var(--card-border);
transition:box-shadow .15s,transform .15s;
}
.user-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-1px)}
.user-card-top{display:flex;align-items:center;gap:10px}
.user-card .uavatar{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px;flex-shrink:0}
.user-card-info{flex:1;min-width:0}
.user-card-info .uname{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-at{font-size:12px;color:var(--text-muted);font-weight:400}
.user-role-badge{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;margin-top:4px}
.role-admin{background:var(--warning-soft);color:var(--warning)}
.role-user{background:var(--info-bg);color:var(--info-fg)}
.user-card-meta{font-size:12px;color:var(--text-muted)}
.user-card-actions{display:flex;gap:6px;margin-top:auto;flex-wrap:wrap}
.user-builtin{font-size:11px;color:var(--text-muted);background:var(--surface-2);padding:4px 10px;border-radius:999px}

/* ============================================================
Filter / Number Grid
============================================================ */
.number-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.number-item{
background:var(--card);padding:4px 10px;border-radius:7px;
font-size:13px;font-family:var(--mono);
border:1px solid var(--border);
box-shadow:var(--shadow-sm);
}

.threshold-row{
display:flex;align-items:center;gap:8px;
padding:9px 14px;background:var(--card);
border-radius:12px;margin-bottom:7px;
box-shadow:var(--shadow);border:1px solid var(--card-border);
flex-wrap:wrap;
}
.threshold-row .num{font-family:var(--mono);font-weight:700;min-width:60px;color:var(--primary-dark)}
.threshold-row .info{flex:1;font-size:13px;color:var(--text-secondary);min-width:100px}

/* ============================================================
Misc
============================================================ */
.empty-state{
text-align:center;padding:34px 20px;color:var(--text-muted);
}
.empty-state .icon{font-size:40px;margin-bottom:8px;opacity:.85}

/* ============================================================
Modal / Dialog
============================================================ */
.modal-overlay{
position:fixed;top:0;left:0;right:0;bottom:0;
background:var(--overlay);
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
display:flex;align-items:center;justify-content:center;
z-index:var(--z-modal);
padding:16px;
padding-top:calc(16px + var(--safe-top));
padding-bottom:calc(16px + var(--safe-bottom));
animation:fadein .15s ease-out;
}
.modal-card{
background:var(--card);
border-radius:16px;
padding:26px;
width:100%;
max-width:360px;
box-shadow:var(--shadow-lg);
max-height:90vh;
overflow-y:auto;
animation:rise .22s ease-out;
}
.modal-title{font-size:16px;font-weight:700;margin:0 0 16px;color:var(--text);padding-left:11px;border-left:3px solid var(--primary)}
.modal-error{color:var(--danger);font-size:13px;margin-bottom:8px;min-height:18px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}

/* 页脚(站点名/备案号):固定悬浮底部(回滚流式布局),pointer-events:none 不拦截点击,保留视觉美化 */
.site-footer{
position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);
display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;
padding:6px 12px calc(6px + var(--safe-bottom,0px));
font-size:11px;color:var(--text-secondary);
background:var(--surface-1);
border-top:1px solid var(--border);
letter-spacing:.4px;
pointer-events:none;text-align:center;
}
.site-footer #icp:empty{display:none}
/* 登录成功后(body.logged-in)隐藏页脚;输入区/滚动按钮/内容底部同步恢复(页脚仅在登录/注册页显示) */
body.logged-in .site-footer{display:none}
body.logged-in .chat-input-area{bottom:calc(var(--safe-bottom,0px))}
body.logged-in .chat-scroll-btns{bottom:calc(132px + var(--safe-bottom,0px))}
body.logged-in .content{padding-bottom:0}

/* ============================================================
Chat Panel Extras
============================================================ */
.chat-panel-wrapper{
display:flex;flex-direction:column;height:100%;
position:relative;
width:100%;
}
.chat-toolbar{
display:flex;gap:6px;margin-bottom:10px;
flex-shrink:0;flex-wrap:wrap;align-items:center;
}
.chat-toolbar .btn{font-size:clamp(12px,1.3vw,14px)}
.chat-date-input{
flex:1 1 100px;min-width:84px;max-width:140px;width:auto;box-sizing:border-box;
font-size:12px;padding:5px 8px;
border:1px solid var(--border);border-radius:8px;
font-family:var(--font);background:var(--card);
}
.chat-hint{
font-size:12px;color:var(--text-muted);margin-top:4px;
}
.chat-scroll-btns{
position:absolute;right:14px;bottom:calc(162px + var(--safe-bottom,0px)); /* 与输入区同步上移,避开页脚 */
display:flex;flex-direction:column;gap:6px;z-index:var(--z-float);
transition:opacity .3s;
}
.btn-scroll{
width:clamp(32px,3vw,42px);height:clamp(32px,3vw,42px);border-radius:50%;
padding:0;font-size:clamp(14px,1.4vw,18px);min-height:unset;
opacity:.75;box-shadow:var(--shadow);
}
.btn-scroll:hover{opacity:1}
.btn-send{
border-radius:50%;width:clamp(38px,3.8vw,52px);height:clamp(38px,3.8vw,52px);
padding:0;font-size:clamp(16px,1.7vw,21px);flex-shrink:0;
min-height:unset;
}

/* ============================================================
面板工具栏 & 卡片列表
============================================================ */
.panel-toolbar {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
  border: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.panel-toolbar .toolbar-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.panel-toolbar input,
.panel-toolbar select {
  padding: 8px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--font);
  background: var(--card);
}
.panel-toolbar input[type="date"] { width: 135px; }

.log-card {
  background: var(--card);
  border-radius: 12px;
  padding: 11px 15px;
  margin-bottom: 8px;
  box-shadow: var(--shadow);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--primary);
  transition: box-shadow .15s;
}
.log-card:hover { box-shadow: var(--shadow-hover); }
.log-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.log-card-id {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-dark);
  background: var(--primary-soft);
  padding: 2px 9px;
  border-radius: 999px;
}
.log-card-user {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.log-card-sender {
  font-size: 11px;
  color: var(--text-muted);
}
.log-card-tags {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary-dark);
  background: var(--primary-soft);
  padding: 2px 9px;
  border-radius: 999px;
}
.log-card-meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-left: auto;
}
.log-card-meta b{color:var(--danger)}
.log-card-time {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.log-card-body {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.55;
  word-break: break-all;
  padding: 4px 0;
}
.log-card-toggle {
  font-size: 12px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  transition: transform .15s;
}
.log-card-toggle.open{transform:rotate(90deg)}

/* 数字明细单条记录 */
.q-record-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.q-record-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border-radius: 12px;
  padding: 9px 14px;
  box-shadow: var(--shadow);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--success);
  flex-wrap: wrap;
}
.q-record-row.tr-blocked { border-left-color: var(--danger); background: var(--danger-soft); }
.q-record-idx {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 2px 9px;
  border-radius: 999px;
}
.q-record-amt {
  font-weight: 700;
  color: var(--danger);
  margin-right: auto;
  font-family: var(--mono);
}
.q-record-time {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ============================================================
响应式 - 平板 (≤768px)
============================================================ */
@media(max-width:768px){
/* Login */
.login-shell{grid-template-columns:1fr;max-width:420px;border-radius:16px}
.login-brand{display:none}
.login-card{padding:34px 26px}

/* App header */
.app-header,.header{padding:0 12px;height:50px}
.app-header h1,.header h1{font-size:14px}
.header-right{gap:7px}
.header-right .user{max-width:84px;font-size:12px;padding:2px 9px}
.header-right .btn{padding:4px 8px;font-size:11px;min-height:28px}
.header-right .btn-theme{width:30px;height:30px}

/* Tabs */
.tabs{padding:0 8px;gap:0}
.tab-btn{padding:0 12px;font-size:12px}

/* Content */
.panel{padding:12px 8px}

/* Chat */
.chat-msg{max-width:94%}
.chat-messages{padding:14px 0 80px 0;gap:9px}
.chat-msg .bubble{font-size:13px;padding:9px 12px}
.chat-input-area{padding:8px 10px;gap:6px;background:transparent}
.chat-input-area textarea{font-size:16px}

/* Cards */
.card-row{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.stat-card{padding:13px 8px}
.stat-card .value{font-size:20px}

/* Tables */
table{font-size:12px;min-width:350px}
th,td{padding:8px 10px}

/* Filters */
.filters select,.filters input{font-size:12px;padding:6px 8px}
.filters{flex-direction:column;align-items:stretch}
.filters-grid{grid-template-columns:1fr}

/* Query panel */
.query-filters{padding:12px}
.query-number-wrap input{width:100px;font-size:18px}
.query-card-header{gap:10px;padding:10px 12px}
.query-card-number{font-size:22px}

/* Form inputs on mobile */
.form-group input,textarea,select{font-size:16px}

/* Number grid */
.number-item{font-size:12px;padding:3px 8px}

/* Threshold */
.threshold-row{padding:7px 10px;gap:6px}

/* User row */
.user-row{gap:8px;padding:9px 10px}
.user-row .uactions{width:100%;justify-content:flex-end;margin-top:4px}
}

/* ============================================================
响应式 - 手机 (≤480px)
============================================================ */
@media(max-width:480px){
/* Login */
.login-shell{border-radius:14px}
.login-card{padding:26px 18px}
.login-card h1{font-size:21px}
.login-card .sub{font-size:12px;margin-bottom:20px}
.btn-theme-float{top:10px;right:10px;width:34px;height:34px;border-radius:10px}

/* App header */
.app-header,.header{height:48px;padding:0 8px}
.app-header h1,.header h1{font-size:13px}
.header-right{gap:4px}
.header-right .user{max-width:62px;font-size:11px;padding:2px 7px}
.header-right .btn{padding:3px 6px;font-size:10px;min-height:28px}
.header-right .btn-theme{width:28px;height:28px}
.header-right .badge{padding:1px 6px;font-size:10px}

/* Tabs */
.tabs{padding:0 4px}
.tab-btn{padding:0 8px;font-size:11px;min-height:0}

/* Content */
.panel{padding:8px 4px}

/* Chat */
.chat-msg{max-width:97%}
.chat-msg .avatar{width:30px;height:30px;font-size:12px;border-radius:9px}
.chat-msg .bubble{font-size:12px;padding:8px 10px}
.chat-messages{gap:7px;padding:10px 0 80px 0}
.chat-input-area{padding:6px 8px;gap:4px}
.chat-input-area textarea{padding:8px 12px;min-height:38px;font-size:16px}
.chat-input-area .btn{width:38px;height:38px;font-size:16px}

/* Cards - 两列 */
.card-row{grid-template-columns:1fr 1fr;gap:6px}
.stat-card{padding:11px 6px}
.stat-card .label{font-size:11px}
.stat-card .value{font-size:16px}

/* Tables */
table{font-size:11px;min-width:320px}
th,td{padding:6px 8px}

/* Filters */
.filters{gap:6px;margin-bottom:8px}
.filters-grid{gap:5px}
.filters-grid .filter-row{gap:4px}

/* Query panel */
.query-filters{padding:10px}
.query-input-row{gap:6px}
.query-number-wrap input{width:90px;font-size:16px}
.query-card-header{gap:8px;padding:8px 10px}
.query-card-number{font-size:20px;min-width:50px}
.query-card-stats{gap:6px}
.filters select,.filters input{width:100%}

/* Copy button */
.chat-msg .copy-btn{width:24px;height:24px;font-size:11px}

/* Pagination */
.pagination{gap:4px}
.pagination .btn{padding:4px 8px;font-size:11px;min-height:28px}

/* Threshold row */
.threshold-row{flex-direction:column;align-items:flex-start;gap:4px;padding:9px}

/* Theme pop */
.theme-pop{right:10px;width:224px}
}

/* ============================================================
响应式 - 宽屏增强 (≥1024px)
============================================================ */
@media(min-width:1024px){
.panel{max-width:1100px;padding:20px 24px}

.card-row{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}

.chat-msg{max-width:72%}
.chat-messages{padding:24px 0 80px 0}

.tabs{padding:0 24px}
.app-header,.header{padding:0 24px}
}

/* ============================================================
横屏手机 / 小屏平板 (高度不足)
============================================================ */
@media(max-height:500px) and (orientation:landscape){
.app-header,.header{height:40px}
.app-header h1,.header h1{font-size:13px}
.header-right .btn{padding:2px 6px;font-size:10px}
.tabs .tab-btn{padding:0 10px;font-size:11px;min-height:0}
.chat-messages{padding:8px 0 60px 0}
.chat-input-area{padding:6px 10px}
.chat-input-area textarea{min-height:32px}
}

/* ============================================================
打印样式
============================================================ */
@media print{
#app.show{display:block!important}
.app-header,.header,.tabs,.chat-input-area,.chat-scroll-btns,.header-right,.btn,.btn-theme-float,.theme-pop{display:none!important}
.content{overflow:visible}
.panel{display:block!important;max-width:100%;padding:0}
.stat-card,.table-wrap{box-shadow:none;border:1px solid #ddd;break-inside:avoid}
}

/* ============================================================
管理界面卡片式切换导航
============================================================ */
.admin-nav{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.admin-nav-card{flex:1;min-width:160px;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:10px;cursor:pointer;background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow-sm);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.admin-nav-card:hover{border-color:var(--primary);transform:translateY(-1px)}
.admin-nav-card.active{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset,var(--shadow-sm);background:var(--surface-1)}
.admin-nav-card .nav-icon{font-size:22px;line-height:1;flex-shrink:0}
.admin-nav-card .nav-title{font-weight:700;font-size:14px;color:var(--text-primary)}
.admin-nav-card .nav-desc{font-size:12px;color:var(--text-muted);margin-top:3px;line-height:1.4}
@media(max-width:639px){.admin-nav-card{min-width:100%}}
@media(prefers-reduced-motion:reduce){.admin-nav-card{transition:none;transform:none}}

/* ============================================================
账号面板（修改昵称/修改密码/绑定微信）
============================================================ */
.form-msg{margin-top:10px;font-size:13px}
.form-error{color:var(--danger)}
.form-ok{color:var(--success)}
.bind-status{display:flex;align-items:center;gap:14px;padding:6px 2px;flex-wrap:wrap}
.bind-status-icon{font-size:26px;line-height:1;flex-shrink:0}
.bind-status-title{font-weight:700;font-size:14px;margin-bottom:4px}
.bind-status-desc{font-size:12.5px;color:var(--text-muted);line-height:1.7}
.bind-status .btn{margin-left:auto;flex-shrink:0}
.bind-code-card{margin-top:14px;padding:18px;border:1px dashed var(--primary);border-radius:10px;background:var(--surface-1);text-align:center}
.bind-code-label{font-size:12.5px;color:var(--text-muted);margin-bottom:10px}
.bind-code-value{font-size:30px;font-weight:800;letter-spacing:6px;font-family:monospace;color:var(--primary);margin-bottom:10px}
.bind-code-hint{font-size:12.5px;color:var(--text-muted);line-height:1.8;margin-bottom:12px}

/* ============================================================
管理后台界面 v2 —— 现代视觉升级
纯样式层重构：布局/间距/排版/配色层次优化，功能与 DOM 结构不变
============================================================ */

/* ── 统计信息卡：左对齐 + 主色侧条 + 层级阴影 ── */
.card-row{gap:14px;margin-bottom:18px}
.stat-card{position:relative;text-align:left;padding:20px 18px 18px;border-radius:14px;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.stat-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary);opacity:.9;border-radius:0 3px 3px 0}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.stat-card .label{font-size:11px;font-weight:600;letter-spacing:.5px;color:var(--text-secondary);margin-bottom:8px}
.stat-card .value{font-size:26px;font-weight:800;line-height:1.2}

/* ── 卡片导航：图标圆底 + 激活态主色块 ── */
.admin-nav{gap:12px;margin-bottom:18px}
.admin-nav-card{position:relative;padding:16px;border-radius:14px;gap:14px;overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.admin-nav-card .nav-icon{width:40px;height:40px;border-radius:12px;background:var(--primary-soft);display:inline-flex;align-items:center;justify-content:center;font-size:20px;transition:background .15s ease}
.admin-nav-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.admin-nav-card:hover .nav-icon{background:var(--primary)}
.admin-nav-card.active{background:var(--primary-soft);border-color:var(--primary);box-shadow:none}
.admin-nav-card.active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary)}
.admin-nav-card.active .nav-icon{background:var(--primary)}
.admin-nav-card .nav-title{font-size:14.5px;letter-spacing:.2px}
.admin-nav-card .nav-desc{font-size:12px;line-height:1.5}

/* ── 区块卡片与表单：统一圆角/内边距/焦点环 ── */
.user-form{padding:20px;border-radius:14px}
.user-form h2{letter-spacing:.2px}
.user-form-grid{gap:14px}
.user-form-grid .form-group label,.panel-toolbar label{letter-spacing:.3px}
.user-form-grid input,.user-form-grid select,.panel-toolbar input,.panel-toolbar select{transition:border-color .15s ease,box-shadow .15s ease}
.user-form-grid input:focus,.user-form-grid select:focus,.panel-toolbar input:focus,.panel-toolbar select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);outline:none}

/* ── 功能开关：独立卡片 + 开关内阴影 ── */
.feat-switch-grid{gap:12px}
.feat-switch-item{background:var(--card);padding:15px 16px;border-radius:14px;border-color:var(--card-border);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.feat-switch-item:hover{border-color:var(--primary);box-shadow:var(--shadow-sm)}
.feat-switch-desc{line-height:1.55}
.feat-toggle-track{box-shadow:inset 0 1px 2px rgba(0,0,0,.15)}
.feat-toggle input:checked + .feat-toggle-track{background:var(--primary);box-shadow:inset 0 1px 2px rgba(0,0,0,.2)}

/* ── 用户卡片：头像圆角升级 + 层次感 ── */
.user-grid{gap:12px}
.user-card{padding:16px;border-radius:14px;gap:12px;transition:box-shadow .15s ease,transform .15s ease}
.user-card:hover{transform:translateY(-2px)}
.user-card .uavatar{width:46px;height:46px;border-radius:14px;font-size:17px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.user-role-badge{padding:3px 10px;letter-spacing:.3px}
.user-builtin{padding:4px 12px}
.user-card-actions{padding-top:2px}

/* ── 表格：表头分层 + 行悬停 ── */
.table-wrap{border-radius:14px}
.table-wrap th{background:var(--surface-2);font-size:12px;font-weight:600;letter-spacing:.3px;color:var(--text-secondary);white-space:nowrap}
.table-wrap tbody tr:hover{background:var(--surface-1)}

/* ── 消息/日志卡片：圆角/色条/微交互统一 ── */
.log-card{border-radius:14px;padding:13px 16px;border-left-width:4px;transition:box-shadow .15s ease,transform .15s ease}
.log-card:hover{transform:translateY(-1px)}
.log-card-body{padding:6px 0 2px}

/* ── 分页 ── */
.pagination{gap:8px}
.pagination .btn{border-radius:8px}

/* ── 按钮焦点环（键盘可达性，全局统一） ── */
.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ── 响应式：移动端管理后台 ── */
@media(max-width:767px){
  .admin-nav-card{min-width:100%}
  .card-row{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
  .stat-card{padding:14px 14px 13px}
  .stat-card .value{font-size:20px}
  .user-form,.panel-toolbar{padding:14px}
  .panel-toolbar .toolbar-row input,.panel-toolbar .toolbar-row select{flex:1;min-width:120px}
  .feat-switch-item{min-width:100%}
}

/* ── 动效偏好：关闭过渡与位移 ── */
@media(prefers-reduced-motion:reduce){
  .admin-nav-card,.user-card,.log-card,.stat-card,.feat-switch-item{transition:none;transform:none}
}

/* ============================================================
账号管理界面 v2 —— 现代视觉升级
纯样式层：绑定状态卡/识别码卡片/表单消息/响应式，功能与 DOM 不变
============================================================ */

/* ── 绑定状态卡：图标圆底 + 布局层次 ── */
.bind-status{padding:10px 4px;gap:16px}
.bind-status-icon{width:46px;height:46px;border-radius:14px;background:var(--primary-soft);display:inline-flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.bind-status-title{font-size:15px;font-weight:700;margin-bottom:5px}
.bind-status-desc{font-size:12.5px;line-height:1.8}
.bind-status .btn{padding:8px 16px;border-radius:9px}

/* 已绑定：解绑按钮 danger 软底风格 */
.bind-status .btn-danger{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-border)}
.bind-status .btn-danger:hover{background:var(--danger);color:#fff}

/* ── 识别码卡片：主色软底虚线框 + 大字识别码 ── */
.bind-code-card{margin-top:16px;padding:22px 18px;border-radius:14px;border:1px dashed var(--primary);background:var(--primary-soft)}
.bind-code-label{font-size:12px;font-weight:600;letter-spacing:.5px;margin-bottom:12px}
.bind-code-value{font-size:34px;font-weight:800;letter-spacing:8px;color:var(--primary);text-shadow:0 1px 0 rgba(255,255,255,.25);margin-bottom:12px}
.bind-code-hint{font-size:12.5px;line-height:1.9}
.bind-code-hint b{color:var(--primary);font-family:var(--mono);letter-spacing:2px;background:var(--card);padding:1px 8px;border-radius:6px}
.bind-code-card .btn{margin-top:6px;border-radius:9px}

/* ── 表单消息：底色标签化（成功/错误语义色软底） ── */
.form-msg{margin-top:12px;padding:8px 14px;border-radius:8px;font-size:12.5px;display:inline-block}
.form-ok{color:var(--success);background:var(--success-soft)}
.form-error{color:var(--danger);background:var(--danger-soft)}

/* ── 账号页密码输入等宽数字 ── */
#accNick,#accOldPwd,#accNewPwd,#accNewPwd2{font-variant-numeric:tabular-nums}

/* ── 响应式：移动端账号管理 ── */
@media(max-width:767px){
  .bind-status{flex-direction:column;align-items:flex-start}
  .bind-status .btn{margin-left:0;width:100%;text-align:center}
  .bind-code-value{font-size:26px;letter-spacing:5px}
  .bind-code-card{padding:18px 14px}
}

/* ── 动效偏好：关闭过渡与位移 ── */
@media(prefers-reduced-motion:reduce){
  .bind-status-icon,.bind-code-card{transition:none}
}

/* ============================================================
账号管理界面 v2.1 —— 个人信息头部卡 + 双栏布局
（配合 account.js 渲染重构；功能与数据不变）
============================================================ */
.acc-hero{display:flex;align-items:center;gap:16px;padding:22px 20px;background:var(--card);border:1px solid var(--card-border);border-radius:16px;box-shadow:var(--shadow);margin-bottom:16px;flex-wrap:wrap}
.acc-avatar{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;font-weight:800;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),var(--shadow-sm)}
.acc-info{flex:1;min-width:180px}
.acc-name{font-size:19px;font-weight:800;color:var(--text-primary)}
.acc-username{font-size:13px;color:var(--text-muted);font-weight:500}
.acc-meta{font-size:12.5px;color:var(--text-muted);margin-top:7px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.acc-meta .user-role-badge{margin-top:0}
.acc-bind-badge{margin-left:auto;font-size:12px;font-weight:600;padding:6px 14px;border-radius:999px;background:var(--primary-soft);color:var(--primary);white-space:nowrap}
.acc-bind-badge.bound{background:var(--success-soft);color:var(--success)}
.acc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.acc-col{min-width:0}

@media(max-width:1023px){
  .acc-grid{grid-template-columns:1fr}
}
@media(max-width:767px){
  .acc-hero{padding:18px 14px;gap:12px}
  .acc-avatar{width:54px;height:54px;border-radius:15px;font-size:22px}
  .acc-name{font-size:17px}
  .acc-bind-badge{margin-left:0}
}

/* ============================================================
管理后台 v3 —— 面板 Hero 头部 + 区块标题
管理界面与账号管理共用同一套视觉语言（功能与 DOM 结构不变）
============================================================ */

/* ── 面板 Hero：图标/头像 + 标题 + 说明 + 右侧状态徽章 ── */
.panel-hero{display:flex;align-items:center;gap:16px;padding:22px 20px;background:var(--card);border:1px solid var(--card-border);border-radius:16px;box-shadow:var(--shadow);margin-bottom:16px;flex-wrap:wrap}
.panel-hero-icon{width:52px;height:52px;border-radius:16px;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0}
.panel-hero-avatar{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;font-weight:800;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),var(--shadow-sm)}
.panel-hero-info{flex:1;min-width:180px}
.panel-hero-title{font-size:19px;font-weight:800;color:var(--text-primary);letter-spacing:.2px;display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
.panel-hero-username{font-size:13px;color:var(--text-muted);font-weight:500}
.panel-hero-meta{font-size:12.5px;color:var(--text-muted);margin-top:7px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.panel-hero-meta .user-role-badge{margin-top:0}
.panel-hero-reg{white-space:nowrap}
.panel-hero-badge{margin-left:auto;font-size:12px;font-weight:600;padding:7px 14px;border-radius:999px;background:var(--primary-soft);color:var(--primary);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.panel-hero-badge.bound{background:var(--success-soft);color:var(--success)}

/* ── 区块标题：主色竖条 + 计数圆片 + 右侧操作区 ── */
.sec-head{display:flex;align-items:center;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.sec-head-title{font-size:15px;font-weight:700;color:var(--text-primary);padding-left:11px;border-left:3px solid var(--primary);letter-spacing:.2px;line-height:1.3}
.sec-head-desc{font-size:12px;color:var(--text-muted)}
.sec-head-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.count-pill{font-size:12px;font-weight:600;color:var(--text-secondary);background:var(--surface-2);padding:2px 10px;border-radius:999px;white-space:nowrap}

/* ── 用户卡片：微信号ID / 未绑定标记 ── */
.user-wechat{color:var(--primary);font-weight:600;word-break:break-all}
.user-wechat-unbound{color:var(--text-muted);font-weight:500}

/* ── 响应式：移动端 Hero 与区块标题 ── */
@media(max-width:767px){
  .panel-hero{padding:18px 14px;gap:12px}
  .panel-hero-icon{width:46px;height:46px;border-radius:14px;font-size:22px}
  .panel-hero-avatar{width:54px;height:54px;border-radius:15px;font-size:22px}
  .panel-hero-title{font-size:17px}
  .panel-hero-badge{margin-left:0}
  .sec-head-right{margin-left:0;width:100%}
  .sec-head-right .btn{flex:1}
}

/* ── 动效偏好：关闭过渡与位移 ── */
@media(prefers-reduced-motion:reduce){
  .panel-hero,.sec-head{transition:none;transform:none}
}

/* ============================================================
UI 精修(2026-08-18): 字体/数字排版/按压反馈/文字渲染
纯样式追加,不改变既有结构与功能;六套主题自动适配
============================================================ */

/* 1. 字体栈:中文优先现代系统字体(设备无则逐级回退,零外部资源) */
:root{--font:"HarmonyOS Sans SC","MiSans","Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}

/* 2. 文字渲染与选中态:提升小字号文字质感 */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:var(--primary-soft);color:var(--primary-dark)}

/* 3. 数字等宽(tabular-nums)补齐:金额/数据/计数类一律等宽对齐 */
.log-card-meta,.log-card-time,.chat-msg .entries .row,.threshold-row .info,
.query-card-stat,.query-card-badge,.pager-total,.pager-page,.pager-size-wrap,
.alert,.count-pill,table th{font-variant-numeric:tabular-nums}

/* 4. 全局按压反馈:按下轻压,模拟物理点击 */
.btn:active:not(:disabled){transform:translateY(1px)}
.tab-btn:active{transform:translateY(1px)}
.sw-track{transition:background .22s ease,box-shadow .22s ease,transform .22s ease}
.sw:active .sw-track{transform:scale(.96)}

/* 5. 卡片内容文本断行优化 */
.card-row,.panel-hero,.log-card-body{text-wrap:pretty}

/* ── 用户管理表格（体检需求：表格式布局/排序/筛选/分页） ── */
.um-table{width:100%;border-collapse:collapse;font-size:12.5px}
.um-table th,.um-table td{padding:6px 8px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap;vertical-align:middle}
.um-table thead th{background:var(--surface-1);color:var(--text-muted);font-weight:600;position:sticky;top:0;z-index:1}
.um-user{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.um-today{font-size:12px}
.um-created{font-size:12px}
.um-th-sort{cursor:pointer;user-select:none;-webkit-user-select:none}
.um-th-sort:hover{color:var(--primary)}
.um-sort-arrow{font-size:10px;margin-left:2px;color:var(--primary)}
.um-status{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;font-weight:600}
.um-status-on{background:rgba(82,196,26,.15);color:#52c41a}
.um-status-off{background:rgba(255,77,79,.15);color:#ff4d4f}
.um-bind{color:#52c41a;font-size:12px}
.um-bind-unbound{color:var(--text-muted);font-size:12px}
.um-actions{display:flex;flex-wrap:wrap;gap:4px}
.um-actions .btn{padding:4px 9px;font-size:12px}
.um-row-disabled td{opacity:.55}
.um-detail-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--border);font-size:13px}
.um-detail-k{color:var(--text-muted);flex-shrink:0}
.um-detail-v{text-align:right;word-break:break-all;font-weight:600}

.um-today{color:var(--danger);font-weight:600}
.um-today-filter{color:var(--text-muted);font-size:11px}
.um-today-sub {font-size: 11px;color: var(--text-muted, #999);font-weight: 400;white-space: nowrap;}

.um-hint{color:var(--text-muted);font-size:12px;margin-top:5px}
.um-edit-line{font-size:14px}