/* ================================================================
灵枢AI学擎 · 最新官方设计系统（V2.0 · 蓝白科技风 · AI 助手感）
严格同步自：miniapp/DESIGN_SYSTEM.md + miniapp/app.wxss
—— 100% 对齐小程序已有 UI 标准，不再自定义任何颜色 ——
---------------------------------------------------------------
单位换算：1rpx = 0.5px（小程序标准屏宽 750rpx = 375px）
================================================================ */
:root,
[data-theme="lingshu-v2-official"] {
/* ---------- ① 品牌色：DESIGN_SYSTEM §2.1 1:1 全量 ---------- */
--c-primary: #2563EB; /* 主按钮、重点数据、图标、链接 */
--c-primary-2: #1D4ED8; /* 渐变终点、强调文字 */
--c-primary-light: #3B82F6; /* 渐变起点、hover / 轻量强调 */
--c-primary-lighter: #60A5FA; /* 装饰性高亮 */
--c-primary-soft: #DBEAFE; /* 标签背景、浅色底 */
--c-primary-bg: #EFF6FF; /* 卡片淡蓝背景、页面淡背景 */
--c-primary-ghost: rgba(37, 99, 235, 0.08); /* 极淡蓝背景 */
/* ---------- ② 语义色：DESIGN_SYSTEM §2.2 + app.wxss L11-L28 全量 ---------- */
--c-success: #10B981; /* 成功、低风险、上升 */
--c-warn: #F59E0B; /* 警告、待处理、中风险 */
--c-danger: #EF4444; /* 错误、高风险、红名单 */
--c-info: #0EA5E9; /* 信息提示 */
--c-sales: #F59E0B; /* 学管端强调色（与 warn 一致）*/
--c-sales-2: #D97706; /* 学管端强调·深 */
--c-red-watch: #FEF2F2; /* 红名单浅底 */
--c-red-alert: #FFF7ED; /* 告警浅底 */
--c-tag-low: #FEF3C7; /* 低风险/低难度黄底 */
/* ---------- ③ 中性色：DESIGN_SYSTEM §2.3 1:1 ---------- */
--c-text: #0F172A; /* 主标题、正文 */
--c-text-2: #475569; /* 次要说明 */
--c-text-3: #94A3B8; /* 占位、时间、弱提示 */
--c-bg: #F8FAFC; /* 页面背景 */
--c-surface: #FFFFFF; /* 卡片/容器背景（DESIGN: --color-card） */
--c-surface-2: #F1F5F9; /* 列表项、输入框背景（DESIGN: --color-surface） */
--c-surface-3: #E2E8F0; /* 深一级表面（DESIGN: --color-surface-2） */
--c-border: #E2E8F0; /* 分割线、边框 */
/* ---------- ④ 场景色：三档难度（严格对齐 miniapp/pages/scan-result/scan-result.wxss L42~L48） ---------- */
/* Easy（绿） */
--diff-easy-bg: #ECFDF5;
--diff-easy-br: var(--c-success);
--diff-easy-text: var(--c-success);
/* Medium（黄） */
--diff-medium-bg: #FFFBEB;
--diff-medium-br: var(--c-warn);
--diff-medium-text:var(--c-warn);
/* Hard（红） */
--diff-hard-bg: #FEF2F2;
--diff-hard-br: var(--c-danger);
--diff-hard-text: var(--c-danger);
/* ---------- ⑤ 圆角（DESIGN_SYSTEM §5.1，rpx ÷ 2 → px） ---------- */
--r-sm: 8px; /* 16rpx → 小标签、小按钮 */
--r-md: 12px; /* 24rpx → 列表项、输入框 */
--r-lg: 16px; /* 32rpx → 卡片、快捷入口（§6.2） */
--r-xl: 18px; /* 36rpx → 大卡片、弹层 */
--r-2xl: 22px; /* 44rpx → Hero AI 日报卡 */
--r-full: 999px; /* 999rpx → 按钮、胶囊（§6.1） */
/* ---------- ⑥ 阴影（DESIGN_SYSTEM §5.2 + app.wxss L29/L30） ---------- */
--shadow-1: 0 1px 6px rgba(0, 0, 0, 0.05); /* app.wxss L29: 0 2rpx 12rpx → ÷2 */
--shadow-2: 0 2px 8px rgba(0, 0, 0, 0.06); /* app.wxss L30: 0 4rpx 16rpx → ÷2 */
--shadow-3: 0 6px 20px rgba(0, 0, 0, 0.08); /* §5.2 Dock 悬浮 */
--shadow-brand: 0 10px 30px rgba(37,99,235,.18); /* 主按钮、选中态（蓝灰光晕）§6.1 */
--shadow-blue-glow: 0 0 0 6px rgba(37,99,235,.10); /* §5.2 蓝色光晕 */
/* ---------- ⑦ 派生：品牌渐变（§6.1 主按钮 & §6.6 Hero 区） ---------- */
--grad-brand: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2) 100%); /* §6.6 / §6.1 */
--grad-brand-deep: linear-gradient(135deg, var(--c-primary-2) 0%, #1E40AF 100%);
--grad-hero: var(--grad-brand);
--grad-btn-primary: var(--grad-brand);
/* ---------- ⑧ 派生：语义柔底 pill 背景 ---------- */
--pill-ok-bg: #D1FAE5; /* 对应 app.wxss L95 .tag-green */
--pill-ok-text: #065F46;
--pill-warn-bg: #FFEDD5; /* L96 .tag-orange */
--pill-warn-text: #9A3412;
--pill-danger-bg: #FEE2E2; /* L97 .tag-red */
--pill-danger-text: #991B1B;
--pill-low-bg: var(--c-tag-low);
--pill-low-text: #92400E;
--pill-mute-bg: var(--c-surface-2);
--pill-mute-text: var(--c-text-2);
/* ---------- ⑨ 排版 token（DESIGN_SYSTEM §3，rpx ÷2 → px） ---------- */
--f-3xl: 24px; /* 48rpx Hero 老师名 */
--f-2xl: 20px; /* 40rpx 核心数据数值 */
--f-xl: 18px; /* 36rpx 大标题 */
--f-lg: 16px; /* 32rpx 卡片标题、班级名 */
--f-base:14px; /* 28rpx 正文、按钮 */
--f-sm: 12px; /* 24rpx 辅助文字 */
--f-xs: 11px; /* 22rpx 标签、时间、角标 */
/* ---------- ⑩ 间距（DESIGN_SYSTEM §4，rpx ÷2） ---------- */
--sp-xs: 4px; /* 8rpx */
--sp-sm: 8px; /* 16rpx */
--sp-md: 12px; /* 24rpx */
--sp-lg: 16px; /* 32rpx 页面水平边距 */
--sp-xl: 20px; /* 40rpx */
--sp-2xl: 28px; /* 56rpx */
}
/* ==========================================================
通用原子类（同步 app.wxss 通用组件类，web 版本，1:1）
========================================================== */
/* §6.1 按钮（web 版） */
.ui-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px; /* 80rpx */
padding: 0 20px; /* 40rpx */
border-radius: var(--r-full);
font-size: var(--f-base); /* 28rpx */
font-weight: 500;
border: none;
box-sizing: border-box;
cursor: pointer;
transition: filter .15s, transform .15s;
}
.ui-btn:hover{ filter: brightness(1.05); }
.ui-btn:active{ transform: scale(0.98); }
.ui-btn-primary { background: var(--grad-btn-primary); color: #fff; box-shadow: var(--shadow-brand); }
.ui-btn-danger { background: var(--c-danger); color: #fff; }
.ui-btn-block { width: 100%; display: flex; }
.ui-btn-lg { height: 48px; font-size: var(--f-lg); } /* 96rpx */
.ui-btn-sm { height: 28px; padding: 0 10px; font-size: var(--f-sm); min-width: fit-content; }
/* §6.2 卡片 */
.ui-card {
background: var(--c-surface);
border-radius: var(--r-lg);
padding: var(--sp-lg);
box-shadow: var(--shadow-1);
}
/* §6.3 标签 Pill（完全对齐 app.wxss L85-L98 tag-*） */
.ui-pill {
display: inline-block;
padding: 3px 10px; /* 4rpx 16rpx → ÷2 */
border-radius: var(--r-full); /* app.wxss L89 12rpx → §6.3 允许 radius-sm 或 full，我们用 full 更像蓝白 AI */
font-size: var(--f-xs); /* 22rpx */
font-weight: 600;
margin: 2px 4px 2px 0;
}
.ui-pill-default{ background: var(--c-primary-soft); color: var(--c-primary-2); } /* 默认：§6.3 */
.ui-pill-mute { background: var(--pill-mute-bg); color: var(--pill-mute-text); }
.ui-pill-ok { background: var(--pill-ok-bg); color: var(--pill-ok-text); }
.ui-pill-warn { background: var(--pill-warn-bg); color: var(--pill-warn-text); }
.ui-pill-danger { background: var(--pill-danger-bg); color: var(--pill-danger-text); }
.ui-pill-low { background: var(--pill-low-bg); color: var(--pill-low-text); }
/* 三档难度盒（对齐小程序 scan-result.wxss L36-L48 diff-box） */
.ui-diff {
border-radius: var(--r-md);
padding: 16px 12px;
text-align: center;
border: 1px solid transparent;
}
.ui-diff.easy { background: var(--diff-easy-bg); border-color: var(--diff-easy-br); color: var(--diff-easy-text); }
.ui-diff.medium { background: var(--diff-medium-bg); border-color: var(--diff-medium-br); color: var(--diff-medium-text); }
.ui-diff.hard { background: var(--diff-hard-bg); border-color: var(--diff-hard-br); color: var(--diff-hard-text); }
/* 语义状态进度条（对齐 app.wxss L178-L179 bar-track bar-fill） */
.ui-bar-track { height: 8px; background: var(--c-border); border-radius: 999px; overflow: hidden; }
.ui-bar-fill { height: 100%; background: var(--c-primary); border-radius: 999px; }
/* AI 阶段提示条（对齐 app.wxss L182 ai-stage） */
.ui-ai-stage {
display: flex; align-items: center; gap: var(--sp-sm);
font-size: var(--f-sm); color: var(--c-primary-2);
background: var(--c-primary-soft);
border-radius: var(--r-sm); padding: 12px 14px;
}
/* 角色提示条（对齐 app.wxss L139 role-tip + 校长/学管变体 L192-L202） */
.ui-role-tip {
display: flex; gap: var(--sp-sm); align-items: flex-start;
font-size: var(--f-sm); line-height: 1.55;
color: var(--c-primary-2);
background: var(--c-primary-soft);
border-radius: var(--r-sm);
padding: 14px 16px;
}
.ui-role-tip.sales {
background: linear-gradient(135deg, #FFF7ED, #FFF1F2);
border: 1px solid #FED7AA;
color: #C2410C;
}
.ui-role-tip.teach {
background: linear-gradient(135deg, var(--c-primary-bg), var(--c-primary-soft));
border: 1px solid #BFDBFE;
color: var(--c-primary-2);
}
/* 分段控件（对齐 app.wxss L149 seg） */
.ui-seg {
display: inline-flex;
background: var(--c-surface-2);
border-radius: var(--r-full);
padding: 4px;
gap: 4px;
}
.ui-seg .item {
flex: 1; text-align: center;
font-size: var(--f-sm); color: var(--c-text-2);
padding: 6px 16px; border-radius: var(--r-full);
cursor: pointer;
transition: .15s;
}
.ui-seg .item.active {
background: var(--c-surface);
color: var(--c-primary);
font-weight: 600;
box-shadow: var(--shadow-1);
}
/* 按压态动画（对齐 app.wxss L213 press） */
.ui-press { transition: transform .1s, background-color .1s; }
.ui-press:active { background-color: rgba(15,23,42,.05); transform: scale(0.98); }
/* ==========================================================
§7 Shopeers 风 Dashboard 组件库（零新颜色·仅结构）
所有类统一 sh- 前缀，与 §1~§6 原子类完全隔离
========================================================== */
/* ---- 7.1 三段式全局布局 Shell ---- */
.sh-shell { display: flex; min-height: 100vh; background: var(--c-bg); }
.sh-sb {
width: 232px; flex-shrink: 0;
background: var(--c-surface); border-right: 1px solid var(--c-border);
padding: 18px 14px; display: flex; flex-direction: column; gap: 6px;
position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sh-sb-brand { display:flex; align-items:center; gap:10px; padding: 10px 10px 18px; }
.sh-sb-brand .mark {
width: 34px; height: 34px; border-radius: 10px;
background: var(--grad-brand); color:#fff; font-weight: 800;
display:flex; align-items:center; justify-content:center;
box-shadow: var(--shadow-brand);
}
.sh-sb-brand .txt { font-weight: 800; font-size: 15px; color: var(--c-text); line-height: 1.25; }
.sh-sb-brand .sub { font-size: 11px; color: var(--c-text-3); }
.sh-sb-group {
font-size: 11px; font-weight: 600; letter-spacing: 2px; color: var(--c-text-3);
padding: 14px 12px 6px; text-transform: uppercase;
}
.sh-sb-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: var(--r-md);
color: var(--c-text-2); font-size: 13px; font-weight: 500;
cursor: pointer; transition: .15s;
}
.sh-sb-item .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .6; }
.sh-sb-item:hover { background: var(--c-primary-soft); color: var(--c-primary-2); }
.sh-sb-item.active {
background: var(--c-primary); color: #fff; font-weight: 600;
box-shadow: var(--shadow-brand);
}
.sh-sb-item.active .dot { opacity: 1; }
.sh-sb-spacer { flex: 1; }
.sh-sb-cta {
margin-top: 10px; padding: 16px; border-radius: var(--r-lg);
background: var(--grad-brand-deep); color: #fff;
box-shadow: 0 10px 24px rgba(37,99,235,.22);
}
.sh-sb-cta .t { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.sh-sb-cta .d { font-size: 11px; opacity: .85; line-height: 1.55; margin-bottom: 10px; }
.sh-sb-cta .btn {
display:inline-block; padding: 6px 12px; border-radius: var(--r-full);
background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.25);
font-size: 11px; font-weight: 600; color: #fff; cursor: pointer;
backdrop-filter: blur(4px);
}
.sh-sb-cta .btn:hover { background: rgba(255,255,255,.28); }
/* ---- 全局交互焦点样式（去掉浏览器默认 outline，统一品牌蓝环） ---- */
*, *::before, *::after {
outline: none;
}
:focus-visible {
outline: 2px solid #2563EB;
outline-offset: 2px;
border-radius: 4px;
}
button:focus-visible,
.btn:focus-visible,
.sh-ghost-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
box-shadow: 0 0 0 3px rgba(37,99,235,.20);
outline: 2px solid #2563EB;
outline-offset: 1px;
}
.sh-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sh-header {
height: 60px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
padding: 0 28px; background: var(--c-surface); border-bottom: 1px solid var(--c-border);
position: sticky; top: 0; z-index: 5;
}
.sh-header-left { display: flex; align-items: center; gap: 10px; color: var(--c-text-2); font-size: 13px; }
.sh-header-left .sep { color: var(--c-text-3); }
.sh-header-left .cur { color: var(--c-text); font-weight: 700; }
.sh-header-right { display: flex; align-items: center; gap: 8px; }
.sh-chip {
display:inline-flex; align-items:center; justify-content:center;
height:32px; padding:0 12px; border-radius:999px;
font-size:12.5px; font-weight:600; line-height:1;
border:1px solid transparent; white-space:nowrap;
letter-spacing:.1px;
}
.sh-chip .icon { flex-shrink:0; vertical-align:middle; }
.sh-chip-warn { background:#fff7ed; color:#9a3412; border-color:#fdba74; }
.sh-chip-indigo { background:#eef2ff; color:#3730a3; border-color:#c7d2fe; }
.sh-chip-success{ background:#ecfdf5; color:#047857; border-color:#a7f3d0; }
.sh-chip-gray { background:#f9fafb; color:#111827; border-color:#e5e7eb; }
.sh-ghost-btn {
height:32px; padding:0 14px; border-radius:999px;
border:1px solid var(--c-border); background:#fff;
color:#374151; font-size:12.5px; font-weight:600; line-height:30px;
cursor:pointer; transition:.15s; white-space:nowrap;
}
.sh-ghost-btn:hover { border-color:var(--c-primary); color:var(--c-primary); background:#fff; }
.sh-icon-btn, .sh-add-btn, .sh-export-btn {
height:32px; display:inline-flex; align-items:center; justify-content:center;
}
.sh-content { flex: 1; padding: 28px; }
/* ---- 7.2 Bento Grid（便当网格）---- */
.sh-bento {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 20px;
}
.sh-span-2 { grid-column: span 2; }
.sh-span-3 { grid-column: span 3; }
.sh-span-4 { grid-column: span 4; }
.sh-row-span-2 { grid-row: span 2; }
@media (max-width: 1024px) {
.sh-bento { grid-template-columns: repeat(2, 1fr); }
.sh-span-2, .sh-span-3, .sh-span-4 { grid-column: span 2; }
.sh-row-span-2 { grid-row: auto; }
}
@media (max-width: 640px) {
.sh-bento { grid-template-columns: 1fr; }
.sh-span-2, .sh-span-3, .sh-span-4 { grid-column: span 1; }
}
/* ---- 7.3 KPI 卡 · 四件套（icon+title 同行 / value / Δ） ---- */
.sh-kpi {
position: relative;
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
padding: 18px;
box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.03);
transition: transform .15s, box-shadow .15s;
display: flex;
flex-direction: column;
gap: 6px;
}
.sh-kpi:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(15,23,42,.06);
}
.sh-kpi .head-row {
display: flex;
align-items: center;
gap: 8px;
}
.sh-kpi .icon {
width: 22px; height: 22px; min-width: 22px;
display: flex; align-items: center; justify-content: center;
background: transparent; color: var(--c-primary);
font-size: 15px; flex-shrink: 0;
}
.sh-kpi .icon::before, .sh-kpi .icon::after { display: none; }
.sh-kpi .l { font-size: 13px; color: var(--c-text-2); font-weight: 500; line-height: 1.3; }
.sh-kpi .v {
font-size: 28px; font-weight: 800; letter-spacing: -.5px;
color: var(--c-primary-2); line-height: 1.1;
}
.sh-kpi .v .u { font-size: 13px; color: var(--c-text-2); font-weight: 500; margin-left: 4px; letter-spacing: 0; }
.sh-kpi .delta-row { margin-top: 10px; min-height: 18px; }
.sh-kpi .spark { margin-top: 12px; display: block; }
@media (max-width: 640px) {
.sh-kpi .v { font-size: 22px; }
}
/* ---- 7.4 Δ 对比徽标（迷你 pill 版） ---- */
.sh-delta {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 9px; border-radius: var(--r-full);
font-size: 11px; font-weight: 600; line-height: 1.3;
}
.sh-delta.up { background: var(--pill-ok-bg); color: var(--pill-ok-text); }
.sh-delta.down { background: var(--pill-danger-bg); color: var(--pill-danger-text); }
.sh-delta.mute { background: var(--pill-mute-bg); color: var(--pill-mute-text); }
/* ---- 7.5 卡片头（标题 + 右侧操作） ---- */
.sh-card {
background: var(--c-surface); border: 1px solid var(--c-border);
border-radius: var(--r-lg); padding: 20px;
box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.03);
}
.sh-card-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 16px; gap: 10px;
}
.sh-card-head .t { display: flex; align-items: baseline; gap: 8px; }
.sh-card-head .t h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--c-text); }
.sh-card-head .t .sub { font-size: 12px; color: var(--c-text-3); font-weight: 400; }
.sh-card-actions { display: flex; align-items: center; gap: 6px; }
.sh-icon-btn {
width: 32px; height: 32px; border-radius: 999px;
background: transparent; border: 1px solid transparent; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
color: var(--c-text-2); font-size: 14px; transition: .12s;
flex-shrink: 0;
}
.sh-icon-btn:hover { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border); }
/* ---- 7.6 极简表格 ---- */
.sh-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.sh-table th, .sh-table td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--c-surface-3); }
.sh-table thead th {
background: var(--c-surface-2); color: var(--c-text-2);
font-weight: 600; font-size: 11px; letter-spacing: .5px;
text-transform: uppercase;
border-bottom: 1px solid var(--c-border);
}
.sh-table thead th:first-child { border-top-left-radius: var(--r-sm); border-bottom-left-radius: 0; }
.sh-table thead th:last-child { border-top-right-radius: var(--r-sm); }
.sh-table tbody tr:nth-child(even) td { background: var(--c-bg); }
.sh-table tbody tr:hover td { background: var(--c-primary-bg); }
.sh-table tbody tr:last-child td { border-bottom: none; }
/* ---- 7.7 迷你 Sparkline（内联 SVG wrapper） ---- */
.sh-spark { display: block; width: 100%; height: 34px; }
.sh-spark-good path { stroke: var(--c-success); }
.sh-spark-bad path { stroke: var(--c-danger); }
.sh-spark-blue path { stroke: var(--c-primary); }
.sh-spark path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sh-spark circle { fill: var(--c-primary); }
/* ---- 7.8 彩色分段水平条（对齐 Customers 三色素条） ---- */
.sh-segbar { display: flex; align-items: center; gap: 10px; }
.sh-segbar .track { flex: 1; height: 6px; background: var(--c-surface-2); border-radius: var(--r-full); overflow: hidden; display: flex; }
.sh-segbar .track .seg { height: 100%; }
.sh-segbar .track .seg.g { background: var(--c-success); }
.sh-segbar .track .seg.w { background: var(--c-warn); }
.sh-segbar .track .seg.d { background: var(--c-danger); }
.sh-segbar .track .seg.b { background: var(--c-primary); }
.sh-segbar .track .seg.p { background: var(--c-info); }
.sh-segbar .val { font-size: 12px; font-weight: 600; min-width: 54px; text-align: right; }
.sh-seg-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.sh-seg-legend span {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; color: var(--c-text-2); font-weight: 500;
}
.sh-seg-legend i { width: 8px; height: 8px; border-radius: var(--r-full); display: inline-block; }
/* ---- 7.9 双轨进度条（额度/OCR+LLM 风格） ---- */
.sh-dualbar + .sh-dualbar { margin-top: 6px; }
.sh-dualbar .l { display: flex; justify-content: space-between; font-size: 11px; color: var(--c-text-2); margin-bottom: 4px; }
.sh-dualbar .track { height: 8px; background: var(--c-surface-2); border-radius: var(--r-full); overflow: hidden; }
.sh-dualbar .fill { height: 100%; border-radius: var(--r-full); transition: width .4s; }
/* ---- 7.10 Shell 响应式 Sidebar 折叠 ---- */
@media (max-width: 900px) {
.sh-sb { position: fixed; z-index: 30; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow-3); }
.sh-shell.sh-sb-open .sh-sb { transform: translateX(0); }
.sh-header-left .sh-menu-btn { display: inline-flex !important; }
/* 侧边栏遮罩：打开时显示半透明背景，点击可关闭 */
.sh-sb-backdrop {
position: fixed; inset: 0; z-index: 29;
background: rgba(0,0,0,.35);
opacity: 0; pointer-events: none;
transition: opacity .2s;
}
.sh-shell.sh-sb-open .sh-sb-backdrop { opacity: 1; pointer-events: auto; }
/* 侧边栏内关闭按钮（仅移动端显示） */
.sh-sb-close {
display: flex !important; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: var(--r-md);
border: none; background: transparent;
color: var(--c-text-3); cursor: pointer;
flex-shrink: 0; margin-left: auto;
transition: background .15s, color .15s;
}
.sh-sb-close:hover { background: rgba(0,0,0,.08); color: var(--c-text); }
}
/* 桌面端隐藏关闭按钮和遮罩 */
.sh-sb-close { display: none; }
.sh-sb-backdrop { display: none; }
.sh-menu-btn { display: none; width: 32px; height: 32px; border-radius: var(--r-md); background: var(--c-surface-2); border: none; color: var(--c-text-2); align-items: center; justify-content: center; cursor: pointer; font-size: 15px; }
.sh-menu-btn:hover { background: var(--c-primary-soft); color: var(--c-primary); }
/* ==============================================================
§8 Shopeers 风 2.0 · 高级感增强套组（参考图一一对应）
统一 sh- 前缀，保留与 §7 一致的色彩与圆角体系
============================================================== */
/* ---- 8.1 Sidebar 数字徽章（Orders 46） ---- */
.sh-sb-item .badge {
margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px;
border-radius: 999px; background: var(--c-danger); color: #fff;
font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.sh-sb-item.active .badge { background: rgba(255,255,255,.22); color: #fff; }
.sh-sb-item:not(.active) .badge.info { background: var(--c-primary); color: #fff; }
/* ---- 8.2 顶栏搜索框、日期过滤、头像、操作按钮 ---- */
.sh-search {
display: flex; align-items: center; gap: 8px;
height: 38px; padding: 0 14px; min-width: 260px;
background: var(--c-surface-2); border: 1px solid transparent; border-radius: var(--r-md);
color: var(--c-text-3); font-size: 13px; transition: .15s;
}
.sh-search:hover { border-color: var(--c-border); background: var(--c-surface); }
.sh-search:focus-within {
background: var(--c-surface); border-color: var(--c-primary);
box-shadow: var(--shadow-blue-glow); color: var(--c-text);
}
.sh-search input {
border: none; outline: none; background: transparent; flex: 1; min-width: 0;
font-size: 13px; color: var(--c-text); font-family: inherit;
}
.sh-search .kbd {
padding: 2px 7px; font-size: 10px; color: var(--c-text-3);
border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-surface);
}
.sh-datepicker {
display: inline-flex; align-items: center; gap: 10px;
height: 38px; padding: 0 14px; background: var(--c-surface);
border: 1px solid var(--c-border); border-radius: var(--r-md);
font-size: 13px; color: var(--c-text); font-weight: 500; cursor: pointer;
transition: .15s;
}
.sh-datepicker:hover { border-color: var(--c-primary); color: var(--c-primary-2); }
.sh-datepicker .sep { color: var(--c-text-3); font-weight: 400; }
/* （旧 .sh-range-pill / .sh-avatar / .sh-export-btn / .sh-add-btn 已统一搬到下方"顶栏胶囊 32px 规范"区，保持顶栏一排严格同高同圆角）*/
/* ---- 范围时间胶囊（本日/本周/本月）统一 32px 高度 ---- */
.sh-range-pill {
height:32px; padding:0 12px; border-radius:999px;
border:1px solid transparent; background:transparent; color:var(--c-text-2);
font-size:12.5px; font-weight:600; cursor:pointer; transition:.12s;
display:inline-flex; align-items:center; justify-content:center;
}
.sh-range-pill:hover { background: var(--c-surface); color: var(--c-text); }
.sh-range-pill.active { background: #fff; color: var(--c-text); border-color: var(--c-border); box-shadow: var(--shadow-1); }
.sh-datepicker {
height:32px; padding:0 12px; border-radius:999px;
background:#fff; border:1px solid var(--c-border);
display:inline-flex; align-items:center; gap:8px;
font-size:12.5px; color:var(--c-text);
}
/* ---- 顶栏身份胶囊 / 操作按钮 / 头像：统一 32px 高度、圆形、同一竖向对齐 ---- */
.sh-avatar {
width: 32px; height: 32px; border-radius: 50%;
background: var(--grad-brand); color:#fff;
font-weight: 700; font-size: 13px;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 1px var(--c-border); cursor: pointer;
flex-shrink: 0; user-select: none; line-height: 1;
}
.sh-export-btn {
display: inline-flex; align-items: center; gap: 6px;
height: 32px; padding: 0 14px; border-radius: 999px;
background: var(--c-surface); color: var(--c-text);
border: 1px solid var(--c-border);
font-size: 12.5px; font-weight: 600; cursor: pointer;
transition: .15s; white-space: nowrap; line-height: 30px;
}
.sh-export-btn:hover { border-color: var(--c-primary); color: var(--c-primary-2); }
.sh-add-btn {
display: inline-flex; align-items: center; gap: 6px;
height: 32px; padding: 0 14px; border-radius: 999px;
background: var(--c-primary); color: #fff;
border: 1px solid var(--c-primary);
font-size: 12.5px; font-weight: 600; cursor: pointer;
transition: .15s; white-space: nowrap; line-height: 30px;
box-shadow: var(--shadow-1);
}
.sh-add-btn:hover { filter: brightness(1.05); color: #fff; border-color: var(--c-primary); box-shadow: var(--shadow-brand); }
.sh-add-btn svg path, .sh-export-btn svg path { stroke: currentColor; }
/* ---- 8.3 KPI 卡 · 彩色图标变体（无背景，仅保留单色图标） ---- */
.sh-kpi .icon.blue { background: transparent; color: var(--c-primary); }
.sh-kpi .icon.green { background: transparent; color: var(--c-success); }
.sh-kpi .icon.orange { background: transparent; color: var(--c-warn); }
.sh-kpi .icon.red { background: transparent; color: var(--c-danger); }
.sh-kpi .icon.cyan { background: transparent; color: var(--c-info); }
.sh-kpi .icon.purple { background: transparent; color: #8B5CF6; }
.sh-kpi .icon.pink { background: transparent; color: #EC4899; }
/* ---- 8.4 主卡内嵌折线（折线 + 渐变填充 + 悬停 tooltip） ---- */
.sh-spark-area {
display: block; width: 100%; height: 100%;
}
.sh-spark-area path.line { fill: none; stroke: var(--c-primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sh-spark-area path.area {
fill: url(#grad-spark);
opacity: .85;
}
.sh-spark-area circle.point { fill: #fff; stroke: var(--c-primary); stroke-width: 2.5; }
.sh-spark-tooltip {
position: absolute; pointer-events: none; background: var(--c-text); color: #fff;
padding: 8px 12px; border-radius: 10px; font-size: 11px; font-weight: 600;
box-shadow: 0 10px 24px rgba(15,23,42,.25); z-index: 10;
transform: translate(-50%, -100%); transition: opacity .12s, transform .12s;
white-space: nowrap; opacity: 0;
}
.sh-spark-tooltip::after {
content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%);
border:5px solid transparent; border-top-color:var(--c-text);
}
.sh-spark-tooltip.show { opacity: 1; }
.sh-spark-tooltip .t { color: rgba(255,255,255,.7); font-weight: 400; margin-bottom: 2px; }
.sh-spark-tooltip .v { font-size: 14px; }
/* ---- 8.5 星期活跃柱图 Most Day Active ---- */
.sh-barweek { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; height: 120px; padding: 0 2px; }
.sh-barweek .d { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.sh-barweek .b {
width: 80%; max-width: 28px; background: var(--c-surface-3);
border-radius: 6px 6px 0 0; transition: height .4s; min-height: 6px;
position: relative;
}
.sh-barweek .d.active .b { background: var(--grad-brand); box-shadow: 0 4px 12px rgba(37,99,235,.25); }
.sh-barweek .lbl { font-size: 11px; color: var(--c-text-2); font-weight: 500; }
.sh-barweek .d.active .lbl { color: var(--c-primary-2); font-weight: 700; }
.sh-barweek .num {
position: absolute; left: 50%; top: -20px; transform: translateX(-50%);
font-size: 10px; font-weight: 700; color: var(--c-primary-2); opacity: 0; transition: .12s;
}
.sh-barweek .d.active .num, .sh-barweek .d:hover .num { opacity: 1; }
/* ---- 8.6 半圆仪表盘 Repeat Customer Rate ---- */
.sh-halfgauge { position: relative; width: 100%; max-width: 240px; margin: 0 auto; }
.sh-halfgauge svg { display: block; width: 100%; height: auto; }
.sh-halfgauge .track { stroke: var(--c-surface-3); fill: none; stroke-width: 14; stroke-linecap: round; }
.sh-halfgauge .fill { stroke: url(#grad-gauge); fill: none; stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.sh-halfgauge .center {
position: absolute; left: 0; right: 0; bottom: 4px; text-align: center;
}
.sh-halfgauge .pct { font-size: 32px; font-weight: 800; color: var(--c-primary-2); letter-spacing: -.5px; line-height: 1; }
.sh-halfgauge .tag { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: var(--r-full); background: var(--c-primary-soft); color: var(--c-primary-2); font-size: 11px; font-weight: 600; }
.sh-halfgauge .detail-btn {
display: inline-block; margin-top: 10px;
font-size: 11px; color: var(--c-primary-2); font-weight: 600; cursor: pointer;
padding: 5px 10px; border-radius: var(--r-full); background: var(--c-surface-2); transition: .15s;
}
.sh-halfgauge .detail-btn:hover { background: var(--c-primary-soft); }
/* ---- 8.7 AI Assistant 小卡（蓝色渐变球体 + 输入框） ---- */
.sh-assistant { display: flex; flex-direction: column; align-items: center; }
.sh-aiball {
width: 64px; height: 64px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #93C5FD 0%, #3B82F6 45%, #1D4ED8 100%);
box-shadow: 0 10px 24px rgba(37,99,235,.32), inset 0 -8px 16px rgba(29,78,216,.35), inset 0 8px 16px rgba(147,197,253,.45);
margin: 6px 0 14px; position: relative;
}
.sh-aiball::after {
content:""; position: absolute; top: 10px; left: 16px; width: 16px; height: 10px;
background: rgba(255,255,255,.55); border-radius: 50%; filter: blur(2px);
}
.sh-aiinput {
display: flex; align-items: center; gap: 8px; width: 100%;
background: var(--c-surface-2); border: 1px solid var(--c-border);
border-radius: var(--r-full); padding: 6px 6px 6px 14px;
}
.sh-aiinput input {
border: none; outline: none; background: transparent; flex: 1;
min-width: 0; font-size: 12px; color: var(--c-text); font-family: inherit;
}
.sh-aiinput .mic {
width: 30px; height: 30px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--c-surface); color: var(--c-text-3); cursor: pointer;
transition: .15s;
}
.sh-aiinput .mic:hover { color: var(--c-primary-2); background: var(--c-primary-soft); }
.sh-aiinput .send {
width: 34px; height: 34px; border-radius: 50%; background: var(--grad-btn-primary);
color: #fff; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-brand); transition: .15s;
}
.sh-aiinput .send:hover { filter: brightness(1.04); transform: translateY(-.5px); }
/* ---- 8.8 Best Selling Products 表 · 星级 + 缩略图标 ---- */
.sh-thumb {
width: 28px; height: 28px; border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--c-surface-2); margin-right: 8px; color: var(--c-primary-2); font-size: 13px;
}
.sh-thumb.green { background: var(--diff-easy-bg); color: var(--c-success); }
.sh-thumb.orange { background: var(--diff-medium-bg); color: var(--c-warn); }
.sh-thumb.red { background: var(--diff-hard-bg); color: var(--c-danger); }
.sh-thumb.cyan { background: rgba(14,165,233,.1); color: var(--c-info); }
.sh-thumb.purple { background: rgba(139,92,246,.10); color: #8B5CF6; }
.sh-thumb.blue { background: rgba(37,99,235,.10); color: var(--c-primary); }
.sh-stars { color: #F59E0B; font-size: 12px; letter-spacing: 1px; }
.sh-stars .muted { color: var(--c-surface-3); }
.sh-rate { display: inline-flex; align-items: center; gap: 6px; }
.sh-rate .num { font-weight: 700; color: var(--c-text); }
/* ---- 8.9 Add Widget 弹层（参考图右上浮层样式） ---- */
.sh-modal-mask {
position: fixed; inset: 0; background: rgba(15,23,42,.45); backdrop-filter: blur(4px);
z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px;
animation: fade .18s ease;
}
.sh-modal {
width: 100%; max-width: 440px; max-height: 85vh; overflow: auto;
background: var(--c-surface); border-radius: var(--r-xl);
box-shadow: 0 30px 80px rgba(15,23,42,.28);
}
.sh-modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px; border-bottom: 1px solid var(--c-border); position: sticky; top: 0; background: var(--c-surface); z-index: 1;
}
.sh-modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--c-text); }
.sh-modal-body { padding: 16px 20px 22px; }
.sh-widget-card {
display: flex; gap: 14px; padding: 14px; border-radius: var(--r-lg);
border: 1px solid var(--c-border); background: var(--c-surface); cursor: pointer;
transition: .15s; margin-bottom: 12px;
}
.sh-widget-card:hover { border-color: var(--c-primary-soft); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.sh-widget-preview {
width: 72px; height: 72px; flex-shrink: 0; border-radius: 12px;
background: var(--c-primary-bg); border: 1px solid var(--c-primary-soft);
display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.sh-widget-info { flex: 1; min-width: 0; }
.sh-widget-info h4 { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--c-text); }
.sh-widget-info p { margin: 0 0 8px; font-size: 12px; color: var(--c-text-2); line-height: 1.5; }
.sh-widget-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.sh-widget-actions .cat {
padding: 3px 10px; border-radius: var(--r-full); background: var(--c-primary-bg);
color: var(--c-primary-2); font-size: 10px; font-weight: 700; letter-spacing: .3px;
}
.sh-select-btn {
padding: 6px 14px; border-radius: var(--r-full); background: var(--c-primary); color: #fff;
font-size: 12px; font-weight: 700; border: none; cursor: pointer; transition: .15s;
box-shadow: 0 4px 12px rgba(37,99,235,.22);
}
.sh-select-btn:hover { filter: brightness(1.04); transform: translateY(-.5px); }
.sh-select-btn.added { background: var(--c-success); box-shadow: 0 4px 12px rgba(16,185,129,.22); }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
/* ---- 8.10 页面标题 + 副标题 + 日期过滤 / 操作按钮组合行 ---- */
.sh-pagehead { margin-bottom: 20px; }
.sh-pagehead .top {
display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
margin-bottom: 16px;
}
.sh-pagehead h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--c-text); }
.sh-pagehead .sub { font-size: 12px; color: var(--c-text-3); margin-left: 4px; font-weight: 400; }
.sh-filterbar {
display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.sh-filterbar .left, .sh-filterbar .right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* ---- 8.11 响应式细调 ---- */
@media (max-width: 1024px) {
.sh-search { min-width: 180px; }
}
@media (max-width: 720px) {
.sh-search, .sh-datepicker { display: none; }
.sh-content { padding: 18px; }
}
/* =============================================================
Monochrome SVG Icon System（配合 js/icons-sprite.js）
- 所有图标 stroke/fill 使用 currentColor，父节点改 color 即可
- .icon 默认对齐：内联 vertical middle 无间隙跟文字基线
- 备用：icon-bg-* 背景 SVG（CSS data-uri）给 ::before 装饰层用
============================================================= */
.icon{
display:inline-block;
flex-shrink:0;
width:18px; height:18px;
vertical-align: -3px;
color: inherit;
overflow: visible;
}
.icon.sz-14{ width:14px; height:14px; }
.icon.sz-16{ width:16px; height:16px; }
.icon.sz-20{ width:20px; height:20px; }
.icon.sz-22{ width:22px; height:22px; }
.icon.sz-24{ width:24px; height:24px; }
.icon.sz-28{ width:28px; height:28px; }
.icon.sz-32{ width:32px; height:32px; }
.icon.sz-36{ width:36px; height:36px; }
.icon.c-primary { color: var(--c-primary); }
.icon.c-primary-2 { color: var(--c-primary-2); }
.icon.c-success { color: var(--c-success); }
.icon.c-warn { color: var(--c-warn); }
.icon.c-danger { color: var(--c-danger); }
.icon.c-info { color: var(--c-info); }
.icon.c-sales { color: var(--c-sales); }
.icon.c-text { color: var(--c-text); }
.icon.c-text-2 { color: var(--c-text-2); }
.icon.c-text-3 { color: var(--c-text-3); }
.icon.c-purple { color: #7C3AED; }
.icon.c-cyan { color: #0891B2; }
.icon.c-pink { color: #DB2777; }
.icon.c-orange { color: #C2410C; }
.icon.c-indigo { color: #3730A3; }
.icon.c-teal { color: #0F766E; }
/* 彩色 KPI 图标块（8 张循环配色） */
.icon-tile{
width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
border-radius:10px; font-style:normal; flex-shrink:0;
}
.icon-tile.blue { background:linear-gradient(135deg,#DBEAFE,#EFF6FF); color:#1D4ED8; box-shadow:inset 0 0 0 1px rgba(37,99,235,.18); }
.icon-tile.green { background:linear-gradient(135deg,#D1FAE5,#ECFDF5); color:#047857; box-shadow:inset 0 0 0 1px rgba(16,185,129,.2); }
.icon-tile.cyan { background:linear-gradient(135deg,#CFFAFE,#ECFEFF); color:#0E7490; box-shadow:inset 0 0 0 1px rgba(6,182,212,.2); }
.icon-tile.orange { background:linear-gradient(135deg,#FDE68A,#FFFBEB); color:#B45309; box-shadow:inset 0 0 0 1px rgba(245,158,11,.22); }
.icon-tile.red { background:linear-gradient(135deg,#FECACA,#FEF2F2); color:#B91C1C; box-shadow:inset 0 0 0 1px rgba(239,68,68,.2); }
.icon-tile.ok { background:linear-gradient(135deg,#A7F3D0,#ECFDF5); color:#047857; box-shadow:inset 0 0 0 1px rgba(16,185,129,.2); }
.icon-tile.purple { background:linear-gradient(135deg,#DDD6FE,#F5F3FF); color:#5B21B6; box-shadow:inset 0 0 0 1px rgba(139,92,246,.2); }
.icon-tile.amber { background:linear-gradient(135deg,#FED7AA,#FFF7ED); color:#9A3412; box-shadow:inset 0 0 0 1px rgba(249,115,22,.22); }
.icon-tile.pink { background:linear-gradient(135deg,#FCE7F3,#FDF2F8); color:#9D174D; box-shadow:inset 0 0 0 1px rgba(219,39,119,.2); }
.icon-tile.indigo { background:linear-gradient(135deg,#E0E7FF,#EEF2FF); color:#3730A3; box-shadow:inset 0 0 0 1px rgba(99,102,241,.2); }
.icon-tile.teal { background:linear-gradient(135deg,#CCFBF1,#F0FDFA); color:#0F766E; box-shadow:inset 0 0 0 1px rgba(20,184,166,.2); }
/* SVG data-uri 版备用装饰：给不能动 JS 的 ::before 层用（单色） */
.icon-bg-dashboard { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-school { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-fire { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-users { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-trendUp { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-alert { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-check { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-seedling { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-warn { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-money { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-pie { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-paper { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-ai { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-home { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-grad { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-briefcase { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-sun { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-bell { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-cal { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-search { background:url("data:image/svg+xml;utf8,") center/88% no-repeat; }
.icon-bg-doc { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-settings { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-logs { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-target { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-family { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-chat { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-teacher { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-book { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-edit { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-trash { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-down { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-light { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-celebrate { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-trophy { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-medal { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-clips { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-calendar { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
.icon-bg-send { background:url("data:image/svg+xml;utf8,") center/62% no-repeat; }
/* 隐藏 sprite 本体（首屏 DOM 里的 svg 容器） */
#lingshu-svg-sprite{ position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; visibility:hidden; }
/* ==============================================================
§9 移动端适配（2026-08-29 增补 · 单点生效，4 页共用）
仅作用于窄屏，不影响桌面布局。
表格方案：横向滚动 + 首列冻结（用户选定）
============================================================== */
/* ---- 9.1 表格：窄屏横向滚动 + 首列冻结 ---- */
/* 与侧栏抽屉断点(900px)对齐：侧栏收起时表格即转入滚动，杜绝横向页面溢出 */
@media (max-width: 900px) {
.sh-table {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
/* 首列冻结常驻左侧 */
.sh-table th:first-child,
.sh-table td:first-child {
position: sticky;
left: 0;
z-index: 2;
background: var(--c-surface);
box-shadow: 2px 0 5px rgba(15,23,42,.06);
}
/* 表头首格(左上角)置于最上层，背景与 thead 一致 */
.sh-table thead th:first-child {
z-index: 3;
background: var(--c-surface-2);
}
/* 偶数行首列为冻结列，保持与表体一致的不透明白底 */
.sh-table tbody tr:nth-child(even) td:first-child { background: var(--c-surface); }
}
/* ---- 9.2 窄屏(≤480px)精修：边距/工具栏/弹窗/页头按钮 ---- */
@media (max-width: 480px) {
.sh-content { padding: 16px 14px; }
.p-hero { padding: 20px 18px 18px; }
.p-hero .school { font-size: 23px; }
.p-hero .stat-row { gap: 10px; }
.p-hero .stat-card { padding: 14px 15px; }
.sh-card { border-radius: var(--r-lg); padding: 16px; }
.sh-card-head { flex-wrap: wrap; gap: 10px; }
.sh-card-actions, .sh-card-actions > div { width: 100%; }
/* 卡片内输入框占满（覆盖内联 width:220px 等） */
.sh-card input[type=text], .sh-card input[type=search],
.sh-card input[type=number], .sh-card select, .sh-card textarea {
width: 100% !important;
}
/* 工具栏：搜索框与分段筛选各占一行 */
.stu-toolbar { flex-direction: column; align-items: stretch; }
.stu-toolbar .search { min-width: 0; max-width: none; width: 100%; }
.stu-filters { width: 100%; overflow-x: auto; }
/* 弹窗更贴边、按钮拉满 */
.modal { width: 100%; border-radius: var(--r-lg); }
.modal-body { padding: 16px; max-height: 80vh; }
.modal-foot { padding: 12px 16px; flex-wrap: wrap; }
.modal-foot .btn { flex: 1; justify-content: center; }
/* 页头标题与右侧操作按钮：换行后按钮占满 */
.sh-pagehead .right { margin-top: 10px; width: 100%; }
.sh-pagehead .right .btn { width: 100%; justify-content: center; }
/* 防止长文字按钮被挤压换行 */
button.btn { white-space: nowrap; }
}