/* ============================================================
   Neutral Glass Design System — 放心云
   低饱和 / 中性 / 克制的高级液态玻璃（macOS/iOS 原生质感）
   覆盖 Bootstrap 3 类名 + 自定义组件，全站统一
   ============================================================ */

/* ---------- 全局设计变量（中性，暗/亮两套） ---------- */
/* 定义全局 CSS 变量作用域 */
:root {
  /* 圆角：统一 10-18px，不大小乱跳 */
  /* 小圆角变量（按钮、小控件） */
  --radius-sm: 10px;
  /* 中圆角变量（输入框、卡片内元素） */
  --radius-md: 14px;
  /* 大圆角变量（面板、弹窗） */
  --radius-lg: 18px;
  /* 阴影：柔和，无发光无霓虹 */
  /* 一级阴影：轻微投影，用于普通卡片 */
  --shadow-1: 0 1px 2px rgba(20,22,26,.06), 0 8px 24px rgba(20,22,26,.08);
  /* 二级阴影：更深投影，用于悬浮/弹层 */
  --shadow-2: 0 2px 4px rgba(20,22,26,.08), 0 14px 36px rgba(20,22,26,.14);
  /* 动效：只保留 淡入/上浮/微下沉/微光 */
  /* 缓动曲线变量（统一动画手感） */
  --ease: cubic-bezier(.4,0,.2,1);
  /* 动画时长变量 */
  --dur: .22s;
  /* 字体：系统字体栈，三级统一字号/字重/行高 */
  /* 正文/界面字体栈（优先系统字体，含中文回退） */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  /* 标题字号 */
  --font-size-title: 16px;
  /* 正文字号 */
  --font-size-body: 14px;
  /* 辅助文字字号 */
  --font-size-aux: 12px;
  /* 标题字重 */
  --font-weight-title: 600;
  /* 正文字重 */
  --font-weight-body: 400;
  /* 行高 */
  --line-height: 1.6;
}

/* 暗色主题变量组 */
:root[data-theme="dark"] {
  /* 背景：中性冷灰，无花哨渐变 */
  /* 暗色基础背景色 */
  --bg-base: #131518;
  /* 暗色页面渐变背景 */
  --bg-gradient: linear-gradient(165deg, #1a1d21 0%, #15171a 55%, #101215 100%);
  /* 玻璃层：半透明白，不带颜色 */
  /* 玻璃卡片底色（轻微半透明白） */
  --glass-bg: rgba(255,255,255,.055);
  /* 玻璃强底色（面板头、输入框聚焦等） */
  --glass-bg-strong: rgba(255,255,255,.09);
  /* 玻璃悬浮底色 */
  --glass-bg-hover: rgba(255,255,255,.13);
  /* 玻璃描边色（常规） */
  --glass-border: rgba(255,255,255,.12);
  /* 玻璃描边色（强调/悬浮） */
  --glass-border-strong: rgba(255,255,255,.20);
  /* 玻璃阴影（复用一级阴影） */
  --glass-shadow: var(--shadow-1);
  /* 玻璃悬浮阴影（复用二级阴影） */
  --glass-shadow-hover: var(--shadow-2);
  /* 文字：中性灰三级，对比度达标 */
  /* 主文字色（标题/正文高亮） */
  --text-primary: #e7e9ec;
  /* 次要文字色 */
  --text-secondary: #aab0b8;
  /* 弱化文字色（提示、辅助） */
  --text-muted: #7a818b;
  /* 主色：单一低饱和冷灰蓝 */
  /* 主题强调色 */
  --accent: #9aa8b8;
  /* 强调色浅底 */
  --accent-soft: rgba(154,168,184,.16);
  /* 强调色稍深底（悬浮） */
  --accent-soft-strong: rgba(154,168,184,.24);
  /* 强调色上的文字色 */
  --on-accent: #14161a;
  /* 辅助强调色（同主色） */
  --accent2: var(--accent);
  /* 强调渐变（暗色下无渐变） */
  --accent-gradient: none;
  /* 强调发光（暗色下无发光） */
  --accent-glow: none;
  /* 状态色：低饱和，不荧光 */
  /* 成功色 */
  --success: #6aa18b;
  /* 成功色浅底 */
  --success-soft: rgba(106,161,139,.14);
  /* 危险/错误色 */
  --danger: #c46f6f;
  /* 危险色浅底 */
  --danger-soft: rgba(196,111,111,.14);
  /* 警告色 */
  --warning: #b99144;
  /* 警告色浅底 */
  --warning-soft: rgba(185,145,68,.13);
  /* 信息色 */
  --info: #7290a8;
  /* 信息色浅底 */
  --info-soft: rgba(114,144,168,.14);
  /* 表单 / 表格 / 导航 */
  /* 输入框背景 */
  --input-bg: rgba(255,255,255,.05);
  /* 输入框描边 */
  --input-border: rgba(255,255,255,.14);
  /* 表格斑马纹底色 */
  --table-stripe: rgba(255,255,255,.025);
  /* 表格行悬浮底色 */
  --table-hover: rgba(255,255,255,.05);
  /* 代码块背景 */
  --code-bg: rgba(0,0,0,.35);
  /* 顶栏背景 */
  --navbar-bg: rgba(20,22,26,.72);
  /* 侧栏背景 */
  --sidebar-bg: rgba(255,255,255,.03);
}

/* 亮色主题变量组 */
:root[data-theme="light"] {
  /* 亮色基础背景色 */
  --bg-base: #eceef1;
  /* 亮色页面渐变背景 */
  --bg-gradient: linear-gradient(165deg, #f2f3f5 0%, #eceef1 55%, #e5e8eb 100%);
  /* 玻璃卡片底色（亮色下半透明白更实） */
  --glass-bg: rgba(255,255,255,.6);
  /* 玻璃强底色 */
  --glass-bg-strong: rgba(255,255,255,.78);
  /* 玻璃悬浮底色 */
  --glass-bg-hover: rgba(255,255,255,.92);
  /* 玻璃描边色（常规） */
  --glass-border: rgba(255,255,255,.92);
  /* 玻璃描边色（强调） */
  --glass-border-strong: rgba(255,255,255,1);
  /* 玻璃阴影（亮色下用深色投影） */
  --glass-shadow: 0 1px 2px rgba(23,26,31,.05), 0 8px 24px rgba(23,26,31,.10);
  /* 玻璃悬浮阴影 */
  --glass-shadow-hover: 0 2px 4px rgba(23,26,31,.07), 0 14px 36px rgba(23,26,31,.15);
  /* 主文字色 */
  --text-primary: #23272b;
  /* 次要文字色 */
  --text-secondary: #565c64;
  /* 弱化文字色 */
  --text-muted: #858b93;
  /* 主题强调色（亮色下更深的灰蓝） */
  --accent: #55677c;
  /* 强调色浅底 */
  --accent-soft: rgba(85,103,124,.13);
  /* 强调色稍深底 */
  --accent-soft-strong: rgba(85,103,124,.20);
  /* 强调色上的文字色 */
  --on-accent: #ffffff;
  /* 辅助强调色（同主色） */
  --accent2: var(--accent);
  /* 强调渐变（亮色下无渐变） */
  --accent-gradient: none;
  /* 强调发光（亮色下无发光） */
  --accent-glow: none;
  /* 成功色 */
  --success: #3f7d66;
  /* 成功色浅底 */
  --success-soft: rgba(63,125,102,.12);
  /* 危险色 */
  --danger: #a8554f;
  /* 危险色浅底 */
  --danger-soft: rgba(168,85,79,.12);
  /* 警告色 */
  --warning: #96691f;
  /* 警告色浅底 */
  --warning-soft: rgba(150,105,31,.12);
  /* 信息色 */
  --info: #47627a;
  /* 信息色浅底 */
  --info-soft: rgba(71,98,122,.12);
  /* 输入框背景 */
  --input-bg: rgba(255,255,255,.7);
  /* 输入框描边 */
  --input-border: rgba(23,26,31,.14);
  /* 表格斑马纹底色 */
  --table-stripe: rgba(23,26,31,.03);
  /* 表格行悬浮底色 */
  --table-hover: rgba(23,26,31,.06);
  /* 代码块背景 */
  --code-bg: rgba(0,0,0,.05);
  /* 顶栏背景 */
  --navbar-bg: rgba(255,255,255,.62);
  /* 侧栏背景 */
  --sidebar-bg: rgba(255,255,255,.5);
}

/* ---------- Reset & Base ---------- */
/* 全局盒模型：所有元素统一按边框盒计算尺寸 */
* { box-sizing: border-box; }
/* 页面根元素清空外边距内边距并撑满视口高度 */
html, body { margin: 0; padding: 0; min-height: 100vh; }
/* 页面主体基础样式 */
body {
  /* 使用系统字体栈 */
  font-family: var(--font-body);
  /* 使用主题渐变背景并固定不随滚动 */
  background: var(--bg-gradient) fixed;
  /* 兼容旧浏览器：背景固定 */
  background-attachment: fixed;
  /* 主文字颜色 */
  color: var(--text-primary);
  /* 正文字号 */
  font-size: var(--font-size-body);
  /* 行高 */
  line-height: var(--line-height);
  /* 文字抗锯齿 */
  -webkit-font-smoothing: antialiased;
  /* 主题切换时文字颜色平滑过渡 */
  transition: color var(--dur) var(--ease);
}
/* 链接基础样式：主题色、无下划线、平滑过渡 */
a { color: var(--accent); text-decoration: none; transition: all var(--dur) var(--ease); }
/* 链接悬浮：使用辅助强调色 */
a:hover { color: var(--accent2); text-decoration: none; }

/* 弱化文字（Bootstrap text-muted 覆盖） */
.text-muted, .help-block { color: var(--text-muted) !important; }
/* 主色文字 */
.text-primary { color: var(--accent) !important; }
/* 成功色文字 */
.text-success { color: var(--success) !important; }
/* 危险色文字 */
.text-danger { color: var(--danger) !important; }
/* 警告色文字 */
.text-warning { color: var(--warning) !important; }
/* 信息色文字 */
.text-info { color: var(--info) !important; }

/* 代码与预格式文本统一样式 */
code, pre {
  /* 等宽字体栈 */
  font-family: "Consolas", "Monaco", monospace;
  /* 代码块背景 */
  background: var(--code-bg);
  /* 代码文字颜色 */
  color: var(--text-primary);
  /* 圆角 */
  border-radius: 8px;
}
/* 预格式文本：内边距与描边 */
pre { padding: 14px; border: 1px solid var(--glass-border); }
/* 预格式文本内的代码：透明背景去掉多余内边距 */
pre code { background: transparent; padding: 0; }

/* ---------- 动效（克制：仅淡入/上浮/微下沉/微光） ---------- */
/* 上浮渐入关键帧：从下方 14px 透明位置浮现 */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
/* 纯渐入关键帧 */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* 微光扫过关键帧：背景位置左右移动形成光泽 */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
/* 弹窗入场关键帧：从 97% 缩放透明到原尺寸 */
@keyframes modalIn { from { transform: scale(.97); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* 页面主容器/主体进入时播放上浮渐入动画 */
body > .container, body > .container-fluid, .main { animation: fadeInUp .4s var(--ease); }

/* ---------- Glass Card (.panel) ---------- */
/* 玻璃面板（Bootstrap .panel 覆盖） */
.panel {
  /* 玻璃半透明底 */
  background: var(--glass-bg);
  /* 背景模糊（毛玻璃核心效果） */
  backdrop-filter: blur(20px);
  /* Safari/旧 Chrome 前缀 */
  -webkit-backdrop-filter: blur(20px);
  /* 玻璃描边 */
  border: 1px solid var(--glass-border);
  /* 大圆角 */
  border-radius: var(--radius-lg);
  /* 柔和阴影 */
  box-shadow: var(--glass-shadow);
  /* 下边距 */
  margin-bottom: 20px;
  /* 溢出隐藏（配合圆角裁切内容） */
  overflow: hidden;
  /* 悬浮/主题切换时平滑过渡 */
  transition: all var(--dur) var(--ease);
}
/* 面板悬浮：阴影加深、描边加强 */
.panel:hover { box-shadow: var(--glass-shadow-hover); border-color: var(--glass-border-strong); }
/* 面板标题栏 */
.panel > .panel-heading {
  /* 更强的玻璃底 */
  background: var(--glass-bg-strong) !important;
  /* 标题文字色 */
  color: var(--text-primary) !important;
  /* 底部描边分隔 */
  border-bottom: 1px solid var(--glass-border);
  /* 仅上方圆角（与面板大圆角衔接） */
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0 !important;
  /* 内边距 */
  padding: 14px 18px;
  /* 标题字号 */
  font-size: var(--font-size-title);
  /* 标题字重 */
  font-weight: var(--font-weight-title);
}
/* 标题栏内加粗/斜体元素统一文字色 */
.panel > .panel-heading b, .panel > .panel-heading i { color: var(--text-primary); }
/* 面板内容区内边距 */
.panel > .panel-body { padding: 18px; }
/* 面板底部栏 */
.panel > .panel-footer {
  /* 透明背景 */
  background: transparent;
  /* 顶部描边分隔 */
  border-top: 1px solid var(--glass-border);
  /* 次要文字色 */
  color: var(--text-secondary);
  /* 内边距 */
  padding: 12px 18px;
}
/* 信息型面板标题：信息色浅底与文字 */
.panel-info > .panel-heading { background: var(--info-soft) !important; color: var(--info) !important; }
/* 成功型面板标题 */
.panel-success > .panel-heading { background: var(--success-soft) !important; color: var(--success) !important; }
/* 危险型面板标题 */
.panel-danger > .panel-heading { background: var(--danger-soft) !important; color: var(--danger) !important; }
/* 警告型面板标题 */
.panel-warning > .panel-heading { background: var(--warning-soft) !important; color: var(--warning) !important; }

/* ---------- 按钮（统一一套：玻璃底+半透明边+统一圆角/高度/字号） ----------
   主/次/危险 仅靠 透明度 + 边框 + 文字 区分，不靠花哨颜色填充 */
/* 通用按钮（Bootstrap .btn 覆盖） */
.btn {
  /* 中圆角 */
  border-radius: var(--radius-md);
  /* 统一高度 40px */
  height: 40px;
  /* 左右内边距 */
  padding: 0 18px;
  /* 正文字号 */
  font-size: var(--font-size-body);
  /* 中等字重 */
  font-weight: 500;
  /* 玻璃描边 */
  border: 1px solid var(--glass-border);
  /* 玻璃底 */
  background: var(--glass-bg);
  /* 背景模糊 */
  backdrop-filter: blur(12px);
  /* Safari/旧 Chrome 前缀 */
  -webkit-backdrop-filter: blur(12px);
  /* 主文字色 */
  color: var(--text-primary);
  /* 柔和阴影 */
  box-shadow: var(--glass-shadow);
  /* 手型光标 */
  cursor: pointer;
  /* 去掉默认聚焦外框 */
  outline: none !important;
  /* 统一 flex 对齐：图标 + 文字垂直居中、间距统一，避免错位/大小不一 */
  /* 弹性布局 */
  display: inline-flex;
  /* 垂直居中 */
  align-items: center;
  /* 水平居中 */
  justify-content: center;
  /* 图标与文字间距 */
  gap: 6px;
  /* 内容不换行 */
  white-space: nowrap;
  /* 与行内文字基线对齐 */
  vertical-align: middle;
  /* 状态变化平滑过渡 */
  transition: all var(--dur) var(--ease);
}
/* 按钮悬浮/聚焦状态 */
.btn:hover, .btn:focus {
  /* 悬浮底色 */
  background: var(--glass-bg-hover);
  /* 描边加强 */
  border-color: var(--glass-border-strong);
  /* 文字保持主色 */
  color: var(--text-primary);
  /* 轻微上浮 */
  transform: translateY(-1px);
  /* 阴影加深 */
  box-shadow: var(--glass-shadow-hover);
  /* 去掉聚焦外框 */
  outline: none !important;
}
/* 按钮按下：轻微下沉缩放 */
.btn:active { transform: translateY(0) scale(.98); }
/* 禁用按钮：半透明且不可点击 */
.btn[disabled], .btn.disabled { opacity: .5; pointer-events: none; }

/* 主按钮：玻璃底 + 主色边 + 主色文字（略强调） */
/* 主按钮：强调色浅底 */
.btn-primary, .btn-primary:hover, .btn-primary:focus {
  /* 强调色浅底 */
  background: var(--accent-soft);
  /* 半透明强调描边 */
  border-color: rgba(154,168,184,.35);
  /* 强调色文字 */
  color: var(--accent);
}
/* 亮色主题下主按钮描边改用亮色系强调值 */
:root[data-theme="light"] .btn-primary, :root[data-theme="light"] .btn-primary:hover { border-color: rgba(85,103,124,.35); }
/* 主按钮悬浮：底色加深 */
.btn-primary:hover { background: var(--accent-soft-strong); }

/* 成功：低饱和绿文字+淡绿底，不荧光 */
/* 成功按钮 */
.btn-success, .btn-success:hover, .btn-success:focus { background: var(--success-soft); border-color: rgba(106,161,139,.35); color: var(--success); }
/* 亮色主题下成功按钮描边调整 */
:root[data-theme="light"] .btn-success { border-color: rgba(63,125,102,.35); }

/* 危险：低饱和红文字+淡红底 */
/* 危险按钮 */
.btn-danger, .btn-danger:hover, .btn-danger:focus { background: var(--danger-soft); border-color: rgba(196,111,111,.35); color: var(--danger); }
/* 亮色主题下危险按钮描边调整 */
:root[data-theme="light"] .btn-danger { border-color: rgba(168,85,79,.35); }

/* 警告 */
/* 警告按钮 */
.btn-warning, .btn-warning:hover, .btn-warning:focus { background: var(--warning-soft); border-color: rgba(185,145,68,.35); color: var(--warning); }
/* 亮色主题下警告按钮描边调整 */
:root[data-theme="light"] .btn-warning { border-color: rgba(150,105,31,.35); }

/* 信息 */
/* 信息按钮 */
.btn-info, .btn-info:hover, .btn-info:focus { background: var(--info-soft); border-color: rgba(114,144,168,.35); color: var(--info); }
/* 亮色主题下信息按钮描边调整 */
:root[data-theme="light"] .btn-info { border-color: rgba(71,98,122,.35); }

/* 默认/次按钮 */
/* 默认按钮：玻璃底 */
.btn-default, .btn-default:hover { background: var(--glass-bg); border-color: var(--glass-border); color: var(--text-primary); }
/* 默认按钮悬浮 */
.btn-default:hover { background: var(--glass-bg-hover); border-color: var(--glass-border-strong); }

/* 尺寸：统一比例，圆角随尺寸微调但不乱 */
/* 小按钮 */
.btn-sm { height: 32px; padding: 0 12px; font-size: var(--font-size-aux); border-radius: var(--radius-sm); }
/* 超小按钮 */
.btn-xs { height: 26px; padding: 0 10px; font-size: var(--font-size-aux); border-radius: 8px; }
/* 大按钮 */
.btn-lg { height: 48px; padding: 0 26px; font-size: var(--font-size-title); }
/* 通栏按钮 */
.btn-block { width: 100%; border-radius: var(--radius-md); }

/* ---------- 表单 / 输入 ---------- */
/* 表单控件（Bootstrap .form-control 覆盖） */
.form-control {
  /* 输入框玻璃底 */
  background: var(--input-bg);
  /* 背景模糊 */
  backdrop-filter: blur(10px);
  /* Safari/旧 Chrome 前缀 */
  -webkit-backdrop-filter: blur(10px);
  /* 输入框描边 */
  border: 1px solid var(--input-border);
  /* 中圆角 */
  border-radius: var(--radius-md);
  /* 文字颜色 */
  color: var(--text-primary);
  /* 内边距 */
  padding: 8px 14px;
  /* 高度自适应 */
  height: auto;
  /* 最小高度与按钮一致 */
  min-height: 40px;
  /* 去掉 Bootstrap 默认阴影 */
  box-shadow: none !important;
  /* 状态平滑过渡 */
  transition: all var(--dur) var(--ease);
}
/* 输入框聚焦状态 */
.form-control:focus {
  /* 描边变强调色 */
  border-color: var(--accent);
  /* 底色加强 */
  background: var(--glass-bg-strong);
  /* 外发光用强调色浅底 */
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  /* 去掉默认聚焦外框 */
  outline: none;
}
/* 占位符文字用弱化色 */
.form-control::placeholder { color: var(--text-muted); }
/* 下拉框选项在暗色下用深底浅字 */
select.form-control option { background: #1a1d21; color: #e7e9ec; }
/* 亮色主题下下拉框选项恢复浅底深字 */
:root[data-theme="light"] select.form-control option { background: #fff; color: #23272b; }
/* 表单组标签样式 */
.form-group label { color: var(--text-secondary); font-weight: 500; }
/* 输入组前置图标块 */
.input-group-addon {
  /* 玻璃强底 */
  background: var(--glass-bg-strong);
  /* 输入框描边 */
  border: 1px solid var(--input-border);
  /* 左侧圆角（与输入框衔接） */
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  /* 次要文字色 */
  color: var(--text-secondary);
}
/* 输入组内输入框：右侧圆角 */
.input-group .form-control { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
/* 输入组内按钮：右侧圆角 */
.input-group .input-group-btn .btn { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
/* 按钮+输入框组合的右侧圆角 */
.input-group .input-group-btn + .form-control,
/* 非首个输入框的右侧圆角 */
.input-group .form-control:not(:first-child) { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
/* 首个输入框的左侧圆角 */
.input-group .form-control:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
/* 前置图标+输入框组合的右侧圆角 */
.input-group .input-group-addon + .form-control { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
/* 行内表单组间距 */
.form-inline .form-group { margin-right: 10px; margin-bottom: 10px; }
/* 行内表单输入框去掉下边距 */
.form-inline .form-control { margin-bottom: 0; }
/* 多行文本框仅允许纵向缩放 */
textarea.form-control { resize: vertical; }
/* 复选框/单选框选中颜色跟随主题强调色 */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* ---------- 表格 ---------- */
/* 表格基础样式 */
.table { color: var(--text-primary); margin-bottom: 0; }
/* 表头行 */
.table > thead > tr > th {
  /* 玻璃强底 */
  background: var(--glass-bg-strong);
  /* 主文字色 */
  color: var(--text-primary);
  /* 底部描边分隔 */
  border-bottom: 1px solid var(--glass-border);
  /* 去掉顶部描边 */
  border-top: none;
  /* 标题字重 */
  font-weight: var(--font-weight-title);
  /* 内边距 */
  padding: 12px 14px;
  /* 不换行 */
  white-space: nowrap;
}
/* 数据行单元格：顶部描边、垂直居中 */
.table > tbody > tr > td { border-top: 1px solid var(--glass-border); padding: 11px 14px; vertical-align: middle; color: var(--text-primary); }
/* 奇数行斑马纹 */
.table > tbody > tr:nth-child(odd) { background: var(--table-stripe); }
/* 行悬浮底色 */
.table > tbody > tr:hover { background: var(--table-hover); }
/* 带边框表格 */
.table-bordered { border: 1px solid var(--glass-border); border-radius: 0; }
/* 带边框表格的所有单元格描边 */
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th,
.table-bordered > thead > tr > td, .table-bordered > tbody > tr > td { border: 1px solid var(--glass-border); }
/* 响应式表格容器圆角 */
.table-responsive { border-radius: var(--radius-md); }

/* ---------- 标签 / 徽章（低饱和，不荧光） ---------- */
/* 通用标签（Bootstrap .label 覆盖） */
.label {
  /* 圆角 */
  border-radius: 8px;
  /* 中等字重 */
  font-weight: 500;
  /* 内边距 */
  padding: 3px 10px;
  /* 辅助字号 */
  font-size: var(--font-size-aux);
  /* 玻璃底 */
  background: var(--glass-bg-strong);
  /* 次要文字色 */
  color: var(--text-secondary);
}
/* 成功标签 */
.label-success { background: var(--success-soft); color: var(--success); }
/* 危险标签 */
.label-danger { background: var(--danger-soft); color: var(--danger); }
/* 警告标签 */
.label-warning { background: var(--warning-soft); color: var(--warning); }
/* 信息标签 */
.label-info { background: var(--info-soft); color: var(--info); }
/* 默认标签 */
.label-default { background: var(--glass-bg-strong); color: var(--text-secondary); }
/* 主色标签（带半透明强调描边） */
.label-primary { background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(154,168,184,.35); }
/* 亮色主题下主色标签描边调整 */
:root[data-theme="light"] .label-primary { border-color: rgba(85,103,124,.35); }
/* 徽章（Bootstrap .badge 覆盖） */
.badge { background: var(--glass-bg-strong); border: 1px solid var(--glass-border); color: var(--text-secondary); border-radius: 10px; padding: 3px 10px; }

/* ---------- 提示 ---------- */
/* 提示条（Bootstrap .alert 覆盖） */
.alert {
  /* 中圆角 */
  border-radius: var(--radius-md);
  /* 玻璃描边 */
  border: 1px solid var(--glass-border);
  /* 玻璃底 */
  background: var(--glass-bg);
  /* 背景模糊 */
  backdrop-filter: blur(10px);
  /* Safari/旧 Chrome 前缀 */
  -webkit-backdrop-filter: blur(10px);
  /* 主文字色 */
  color: var(--text-primary);
  /* 内边距 */
  padding: 12px 16px;
  /* 下边距 */
  margin-bottom: 16px;
}
/* 成功提示条 */
.alert-success { background: var(--success-soft); border-color: rgba(106,161,139,.3); color: var(--success); }
/* 亮色主题下成功提示条描边调整 */
:root[data-theme="light"] .alert-success { border-color: rgba(63,125,102,.3); }
/* 危险/错误提示条 */
.alert-danger, .alert-error { background: var(--danger-soft); border-color: rgba(196,111,111,.3); color: var(--danger); }
/* 亮色主题下危险提示条描边调整 */
:root[data-theme="light"] .alert-danger, :root[data-theme="light"] .alert-error { border-color: rgba(168,85,79,.3); }
/* 警告提示条 */
.alert-warning { background: var(--warning-soft); border-color: rgba(185,145,68,.3); color: var(--warning); }
/* 亮色主题下警告提示条描边调整 */
:root[data-theme="light"] .alert-warning { border-color: rgba(150,105,31,.3); }
/* 信息提示条 */
.alert-info { background: var(--info-soft); border-color: rgba(114,144,168,.3); color: var(--info); }
/* 亮色主题下信息提示条描边调整 */
:root[data-theme="light"] .alert-info { border-color: rgba(71,98,122,.3); }

/* ---------- 导航栏 ---------- */
/* 顶栏（兼容自定义 .navbar-pay 与 Bootstrap .navbar） */
.navbar-pay, .navbar {
  /* 顶栏背景 */
  background: var(--navbar-bg) !important;
  /* 背景模糊 */
  backdrop-filter: blur(20px);
  /* Safari/旧 Chrome 前缀 */
  -webkit-backdrop-filter: blur(20px);
  /* 去掉默认边框 */
  border: none !important;
  /* 仅保留底部描边 */
  border-bottom: 1px solid var(--glass-border) !important;
  /* 去掉默认圆角 */
  border-radius: 0 !important;
  /* 柔和阴影 */
  box-shadow: var(--glass-shadow) !important;
  /* 去掉下边距 */
  margin-bottom: 0;
  /* 统一高度 */
  min-height: 56px;
}
/* 顶栏品牌区 */
.navbar-pay .navbar-brand, .navbar .navbar-brand { color: var(--text-primary) !important; font-weight: var(--font-weight-title); font-size: 17px; line-height: 24px; padding: 15px 15px; }
/* 品牌区图标颜色 */
.navbar-pay .navbar-brand i, .navbar .navbar-brand i { color: var(--text-primary); }
/* 顶栏菜单项 */
.navbar-pay .navbar-nav > li > a, .navbar .navbar-nav > li > a { color: var(--text-secondary) !important; transition: color var(--dur); }
/* 顶栏菜单项悬浮 */
.navbar-pay .navbar-nav > li > a:hover, .navbar .navbar-nav > li > a:hover { color: var(--text-primary) !important; background: var(--glass-bg) !important; }
/* 顶栏用户菜单文字色 */
.navbar-pay .user-menu { color: var(--text-secondary) !important; }
/* 折叠按钮去掉默认边框 */
.navbar-toggle { border: none !important; }
/* 折叠按钮三条横线颜色 */
.navbar-toggle .icon-bar { background: var(--text-primary) !important; }
/* 下拉菜单（玻璃弹层） */
.dropdown-menu {
  /* 玻璃强底 */
  background: var(--glass-bg-strong);
  /* 背景模糊 */
  backdrop-filter: blur(20px);
  /* Safari/旧 Chrome 前缀 */
  -webkit-backdrop-filter: blur(20px);
  /* 玻璃描边 */
  border: 1px solid var(--glass-border);
  /* 中圆角 */
  border-radius: var(--radius-md);
  /* 柔和阴影 */
  box-shadow: var(--glass-shadow);
  /* 上下内边距 */
  padding: 8px 0;
}
/* 下拉菜单项 */
.dropdown-menu > li > a { color: var(--text-primary); padding: 8px 18px; transition: all var(--dur); }
/* 下拉菜单项悬浮/聚焦 */
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--glass-bg-hover); color: var(--text-primary); }
/* 下拉菜单分隔线 */
.dropdown-menu .divider { background: var(--glass-border); }
/* 下拉箭头颜色 */
.caret { border-top-color: var(--text-secondary) !important; }

/* ---------- 侧栏（商户） ---------- */
/* 商户侧栏导航容器 */
.sidebar-nav {
  /* 玻璃底 */
  background: var(--glass-bg);
  /* 背景模糊 */
  backdrop-filter: blur(20px);
  /* Safari/旧 Chrome 前缀 */
  -webkit-backdrop-filter: blur(20px);
  /* 玻璃描边 */
  border: 1px solid var(--glass-border);
  /* 大圆角 */
  border-radius: var(--radius-lg);
  /* 内边距 */
  padding: 10px;
  /* 柔和阴影 */
  box-shadow: var(--glass-shadow);
  /* 下边距 */
  margin-bottom: 16px;
}
/* 侧栏列表组容器 */
.sidebar-nav .list-group { background: transparent; border-radius: var(--radius-md); overflow: hidden; }
/* 侧栏列表项 */
.sidebar-nav .list-group-item { background: transparent; border: none; border-left: 3px solid transparent; border-radius: var(--radius-sm); color: var(--text-secondary); padding: 10px 14px; margin-bottom: 2px; transition: all var(--dur); }
/* 侧栏列表项悬浮 */
.sidebar-nav .list-group-item:hover { background: var(--glass-bg-hover); color: var(--text-primary); }
/* 侧栏当前选中项：强调色左条+浅底 */
.sidebar-nav .list-group-item.active { background: var(--accent-soft); border-left-color: var(--accent); color: var(--accent); box-shadow: none; }
/* 选中项图标颜色 */
.sidebar-nav .list-group-item.active i { color: var(--accent); }

/* ---------- PC 端顶部平铺用户信息 ---------- */
.navbar-uid { display:inline-flex; align-items:center; gap:6px; color:var(--text-secondary); font-size:14px; padding:8px 12px; white-space:nowrap; }
.navbar-uid i { color:var(--text-muted); }
.navbar-logout { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; margin:4px 0 4px 8px; border-radius:var(--radius-md); background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--danger); font-size:14px; transition:all var(--dur); }
.navbar-logout:hover { background:var(--danger-soft); border-color:var(--danger); color:var(--danger); }
/* 侧边栏分组标题 */
.sidebar-group-title { font-size:12px; letter-spacing:2px; color:var(--text-muted); padding:16px 12px 6px; font-weight:600; }
.sidebar-nav .list-group { margin-top:0 !important; }

/* 列表项图标：固定宽度居中对齐 */
.sidebar-nav .list-group-item i { width: 22px; text-align: center; margin-right: 6px; color: var(--text-muted); }

/* ---------- 管理员顶栏 ---------- */
/* 管理员顶栏 */
.topbar {
  /* 顶栏背景 */
  background: var(--navbar-bg) !important;
  /* 背景模糊 */
  backdrop-filter: blur(20px);
  /* Safari/旧 Chrome 前缀 */
  -webkit-backdrop-filter: blur(20px);
  /* 底部描边 */
  border-bottom: 1px solid var(--glass-border);
  /* 主文字色 */
  color: var(--text-primary) !important;
  /* 左右内边距 */
  padding: 0 20px;
  /* 行高与高度一致实现垂直居中 */
  line-height: 52px;
  /* 固定高度 */
  height: 52px;
  /* 柔和阴影 */
  box-shadow: var(--glass-shadow);
  /* 吸顶 */
  position: sticky;
  /* 顶部吸附 */
  top: 0;
  /* 层级高于内容 */
  z-index: 1000;
}
/* 顶栏品牌文字 */
.topbar .brand { font-weight: var(--font-weight-title); font-size: 17px; color: var(--text-primary); }
/* 顶栏品牌图标 */
.topbar .brand i { color: var(--text-primary); }
/* 顶栏右侧区域右浮动 */
.topbar .right { float: right; }
/* 顶栏链接 */
.topbar a { color: var(--text-secondary) !important; transition: color var(--dur); }
/* 顶栏链接悬浮 */
.topbar a:hover { color: var(--text-primary) !important; }

/* ---------- 管理员侧栏 ---------- */
/* 管理员侧栏 */
.sidebar {
  /* 侧栏背景 */
  background: var(--sidebar-bg) !important;
  /* 背景模糊 */
  backdrop-filter: blur(20px);
  /* Safari/旧 Chrome 前缀 */
  -webkit-backdrop-filter: blur(20px);
  /* 右侧描边 */
  border-right: 1px solid var(--glass-border);
  /* 高度撑满视口（扣除顶栏高度） */
  min-height: calc(100vh - 52px);
  /* 上下内边距 */
  padding: 10px 0 !important;
}
/* 侧栏分组标题（小号大写字母间距文字） */
.sidebar .group-title { font-size: 11px; color: var(--text-muted); padding: 14px 20px 6px; text-transform: uppercase; letter-spacing: 1px; }
/* 侧栏列表项（右侧圆角、左条定位） */
.sidebar .list-group-item { background: transparent; border: none; border-left: 3px solid transparent; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-secondary); padding: 10px 20px; margin: 2px 10px 2px 0; transition: all var(--dur); }
/* 侧栏列表项悬浮 */
.sidebar .list-group-item:hover { background: var(--glass-bg-hover); color: var(--text-primary); }
/* 侧栏选中项 */
.sidebar .list-group-item.active { background: var(--accent-soft); border-left-color: var(--accent); color: var(--accent); box-shadow: none; }
/* 选中项图标 */
.sidebar .list-group-item.active i { color: var(--accent); }
/* 列表项图标固定宽度 */
.sidebar .list-group-item i { width: 20px; text-align: center; margin-right: 5px; color: var(--text-muted); }

/* 主内容区内边距 */
.main { padding: 20px; }

/* ---------- 余额卡（中性玻璃，无渐变无发光） ---------- */
/* 余额卡片 */
.balance-card {
  /* 玻璃强底 */
  background: var(--glass-bg-strong) !important;
  /* 背景模糊 */
  backdrop-filter: blur(22px);
  /* Safari/旧 Chrome 前缀 */
  -webkit-backdrop-filter: blur(22px);
  /* 加强描边 */
  border: 1px solid var(--glass-border-strong);
  /* 大圆角 */
  border-radius: var(--radius-lg);
  /* 主文字色 */
  color: var(--text-primary) !important;
  /* 内边距 */
  padding: 24px;
  /* 柔和阴影 */
  box-shadow: var(--glass-shadow);
  /* 下边距 */
  margin-bottom: 16px;
  /* 悬浮过渡 */
  transition: all var(--dur);
}
/* 余额卡悬浮：轻微上浮与阴影加深 */
.balance-card:hover { transform: translateY(-2px); box-shadow: var(--glass-shadow-hover); }
/* 余额卡内标签 */
.balance-card .label { color: var(--text-secondary) !important; font-size: 13px; }
/* 余额大数字 */
.balance-card .num { font-size: 32px; font-weight: var(--font-weight-title); color: var(--text-primary); margin-top: 4px; }
/* 余额卡内按钮 */
.balance-card .btn { background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-primary); }
/* 余额卡内按钮悬浮 */
.balance-card .btn:hover { background: var(--glass-bg-hover); color: var(--text-primary); }
/* 余额卡附加信息 */
.balance-meta { color: var(--text-secondary) !important; font-size: 13px; margin-top: 10px; }
/* 余额卡操作按钮行：弹性布局 */
.balance-actions { display: flex; gap: 10px; margin-top: 18px; }
/* 操作按钮等宽 */
.balance-actions .btn {
  /* 平均分配宽度 */
  flex: 1;
  /* 统一高度 */
  height: 40px;
  /* 字号 */
  font-size: 14px;
  /* 中圆角 */
  border-radius: var(--radius-md);
  /* 内边距 */
  padding: 0 8px;
}
/* 操作按钮图标字号 */
.balance-actions .btn i { font-size: 15px; }

/* 快捷金额 / 并排操作按钮：flex 等分，统一高度比例 */
/* 快捷金额按钮行 */
.amount-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* 快捷金额按钮 */
.amount-actions .btn {
  /* 自动伸缩宽度 */
  flex: 1 1 auto;
  /* 统一高度 */
  height: 40px;
  /* 最小宽度 */
  min-width: 60px;
  /* 弹性布局居中 */
  display: inline-flex;
  /* 垂直居中 */
  align-items: center;
  /* 水平居中 */
  justify-content: center;
  /* 字号 */
  font-size: 14px;
  /* 中圆角 */
  border-radius: var(--radius-md);
  /* 内边距 */
  padding: 0 10px;
}
/* 快捷金额小按钮高度对齐 */
.amount-actions .btn-sm { height: 40px; }
/* 超窄屏下压缩快捷按钮尺寸 */
@media (max-width: 420px) {
  /* 缩小最小宽度与内边距、字号 */
  .amount-actions .btn { min-width: 46px; padding: 0 6px; font-size: 13px; }
}

/* ---------- 统计卡（文字居中：两列卡片各自居中，消除中间大空隙/偏移） ---------- */
/* 统计卡片 */
.stat-card {
  /* 玻璃底 */
  background: var(--glass-bg) !important;
  /* 背景模糊 */
  backdrop-filter: blur(20px);
  /* Safari/旧 Chrome 前缀 */
  -webkit-backdrop-filter: blur(20px);
  /* 玻璃描边 */
  border: 1px solid var(--glass-border);
  /* 大圆角 */
  border-radius: var(--radius-lg);
  /* 内边距 */
  padding: 16px 12px;
  /* 柔和阴影 */
  box-shadow: var(--glass-shadow);
  /* 下边距 */
  margin-bottom: 16px;
  /* 文字居中 */
  text-align: center;
  /* 悬浮过渡 */
  transition: all var(--dur) var(--ease);
}
/* 统计卡悬浮：上浮与阴影加深 */
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--glass-shadow-hover); border-color: var(--glass-border-strong); }
/* 统计卡标签（块级显示） */
.stat-card .label { font-size: 13px; color: var(--text-secondary); display: block; }
/* 统计数值 */
.stat-card .value { font-size: 24px; font-weight: var(--font-weight-title); color: var(--text-primary); margin-top: 6px; }
/* 统计卡辅助说明 */
.stat-card .text-muted { font-size: var(--font-size-aux); margin-top: 4px; display: block; }

/* ---------- 页脚 ---------- */
/* 页脚：弱化文字、居中、小字号 */
.footer { color: var(--text-muted); text-align: center; padding: 24px 0; font-size: var(--font-size-aux); }

/* ---------- 分页 ---------- */
/* 分页容器：弹性居中 */
.pagination { margin: 0; display: flex; justify-content: center; gap: 4px; }
/* 分页项 */
.pagination > li > a, .pagination > li > span { background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-primary); border-radius: var(--radius-sm); padding: 6px 14px; transition: all var(--dur); }
/* 分页项悬浮 */
.pagination > li > a:hover { background: var(--glass-bg-hover); border-color: var(--accent); color: var(--accent); }
/* 当前页高亮 */
.pagination > li.active > a, .pagination > li.active > span { background: var(--accent-soft) !important; border-color: var(--accent) !important; color: var(--accent) !important; }
/* 首页项：仅左侧圆角 */
.pagination > li:first-child > a, .pagination > li:first-child > span { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
/* 末页项：仅右侧圆角 */
.pagination > li:last-child > a, .pagination > li:last-child > span { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* ---------- Tabs ---------- */
/* 标签页导航底线 */
.nav-tabs { border-bottom: 1px solid var(--glass-border); }
/* 标签项 */
.nav-tabs > li > a { color: var(--text-secondary); border: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: all var(--dur); }
/* 标签项悬浮 */
.nav-tabs > li > a:hover { background: var(--glass-bg); border-color: transparent; color: var(--text-primary); }
/* 激活标签：强调色文字+底部强调线 */
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: var(--accent); background: var(--glass-bg-strong); border: none; border-bottom: 2px solid var(--accent); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
/* 胶囊标签项 */
.nav-pills > li > a { color: var(--text-secondary); border-radius: var(--radius-sm); }
/* 胶囊激活项 */
.nav-pills > li.active > a, .nav-pills > li.active > a:hover { background: var(--accent-soft); border-radius: var(--radius-sm); color: var(--accent); }

/* ---------- 弹窗 ---------- */
/* 弹窗内容（Bootstrap .modal-content 覆盖） */
.modal-content {
  /* 玻璃强底 */
  background: var(--glass-bg-strong);
  /* 背景模糊 */
  backdrop-filter: blur(24px);
  /* Safari/旧 Chrome 前缀 */
  -webkit-backdrop-filter: blur(24px);
  /* 加强描边 */
  border: 1px solid var(--glass-border-strong);
  /* 大圆角 */
  border-radius: var(--radius-lg);
  /* 悬浮级阴影 */
  box-shadow: var(--glass-shadow-hover);
  /* 主文字色 */
  color: var(--text-primary);
  /* 入场动画 */
  animation: modalIn var(--dur) var(--ease);
}
/* 弹窗头部底线 */
.modal-header { border-bottom: 1px solid var(--glass-border); }
/* 关闭按钮：弱化样式 */
.modal-header .close { color: var(--text-secondary); opacity: .7; text-shadow: none; }
/* 关闭按钮悬浮 */
.modal-header .close:hover { color: var(--text-primary); opacity: 1; }
/* 弹窗标题颜色 */
.modal-title { color: var(--text-primary); }
/* 弹窗正文颜色 */
.modal-body { color: var(--text-primary); }
/* 弹窗底部顶线 */
.modal-footer { border-top: 1px solid var(--glass-border); }
/* 遮罩透明度 */
.modal-backdrop.in { opacity: .32; }

/* ---------- 登录 / 认证页 ---------- */
/* 登录/注册/通用包装卡片 */
.login-wrap, .reg-wrap, .wrap, .login {
  /* 玻璃强底 */
  background: var(--glass-bg-strong) !important;
  /* 背景模糊 */
  backdrop-filter: blur(24px);
  /* Safari/旧 Chrome 前缀 */
  -webkit-backdrop-filter: blur(24px);
  /* 加强描边 */
  border: 1px solid var(--glass-border-strong);
  /* 大圆角 */
  border-radius: var(--radius-lg) !important;
  /* 悬浮级阴影 */
  box-shadow: var(--glass-shadow-hover) !important;
  /* 溢出隐藏 */
  overflow: hidden;
  /* 上浮渐入动画 */
  animation: fadeInUp .5s var(--ease);
}
/* 认证页头部 */
.login-head, .reg-head, .head {
  /* 玻璃强底 */
  background: var(--glass-bg-strong) !important;
  /* 主文字色 */
  color: var(--text-primary);
  /* 文字居中 */
  text-align: center;
  /* 内边距 */
  padding: 28px 20px;
  /* 底部描边 */
  border-bottom: 1px solid var(--glass-border);
}
/* 认证页 Logo 文字 */
.login-head .logo, .reg-head .logo, .head .logo { font-size: 26px; font-weight: var(--font-weight-title); color: var(--text-primary); }
/* Logo 图标颜色 */
.login-head .logo i, .reg-head .logo i, .head .logo i { color: var(--accent); }
/* Logo 下方副标题 */
.login-head .sub { color: var(--text-secondary); font-size: 13px; margin-top: 6px; }
/* 认证页主体内边距 */
.login-body, .reg-body, .body { padding: 28px 30px 24px; }
/* 支付大按钮 */
.btn-pay {
  /* 强调色浅底 */
  background: var(--accent-soft) !important;
  /* 半透明强调描边 */
  border: 1px solid rgba(154,168,184,.38) !important;
  /* 强调色文字 */
  color: var(--accent) !important;
  /* 高度 */
  height: 46px;
  /* 标题字号 */
  font-size: var(--font-size-title);
  /* 加粗 */
  font-weight: 600;
  /* 中圆角 */
  border-radius: var(--radius-md) !important;
  /* 背景模糊 */
  backdrop-filter: blur(14px);
  /* Safari/旧 Chrome 前缀 */
  -webkit-backdrop-filter: blur(14px);
  /* 柔和阴影 */
  box-shadow: var(--glass-shadow);
  /* 状态过渡 */
  transition: all var(--dur) var(--ease);
}
/* 亮色主题下支付按钮描边调整 */
:root[data-theme="light"] .btn-pay { border-color: rgba(85,103,124,.38); }
/* 支付按钮悬浮：上浮、底色加深、阴影增强 */
.btn-pay:hover { transform: translateY(-1px); background: var(--accent-soft-strong) !important; color: var(--accent) !important; box-shadow: var(--glass-shadow-hover); }
/* 页脚链接颜色 */
.footer-links a { color: var(--text-secondary) !important; }

/* ---------- 收银台 ---------- */
/* 收银台卡片 */
.cashier {
  /* 玻璃强底 */
  background: var(--glass-bg-strong) !important;
  /* 背景模糊 */
  backdrop-filter: blur(24px);
  /* Safari/旧 Chrome 前缀 */
  -webkit-backdrop-filter: blur(24px);
  /* 加强描边 */
  border: 1px solid var(--glass-border-strong);
  /* 大圆角 */
  border-radius: var(--radius-lg) !important;
  /* 悬浮级阴影 */
  box-shadow: var(--glass-shadow-hover) !important;
  /* 溢出隐藏 */
  overflow: hidden;
  /* 上浮渐入动画 */
  animation: fadeInUp .5s var(--ease);
}
/* 收银台头部 */
.cashier-head {
  /* 玻璃强底 */
  background: var(--glass-bg-strong) !important;
  /* 主文字色 */
  color: var(--text-primary);
  /* 文字居中 */
  text-align: center;
  /* 内边距 */
  padding: 28px;
  /* 底部描边 */
  border-bottom: 1px solid var(--glass-border);
}
/* 收银台金额大数字 */
.cashier-head .amt { font-size: 36px; font-weight: var(--font-weight-title); color: var(--text-primary); }
/* 收银台副标题 */
.cashier-head .sub { color: var(--text-secondary); font-size: 13px; margin-top: 6px; }
/* 收银台主体 */
.cashier-body { padding: 22px 26px; }
/* 支付方式条目：图标+名称+勾选 */
.pay-item { display: flex; align-items: center; padding: 14px 16px; border: 1px solid var(--glass-border); border-radius: var(--radius-md); margin-bottom: 12px; cursor: pointer; transition: all var(--dur); background: var(--glass-bg); }
/* 支付方式条目悬浮 */
.pay-item:hover { border-color: var(--glass-border-strong); transform: translateY(-1px); background: var(--glass-bg-hover); }
/* 选中的支付方式：强调描边与浅底 */
.pay-item.selected { border-color: var(--accent); background: var(--accent-soft); }
/* 支付方式图标 */
.pay-item .icon { font-size: 24px; margin-right: 12px; width: 36px; text-align: center; color: var(--text-secondary); }
/* 支付方式名称 */
.pay-item .label { flex: 1; font-size: 15px; color: var(--text-primary); }
/* 选中勾选图标 */
.pay-item .check { color: var(--accent); font-size: 18px; }
/* 支付倒计时：危险色加粗 */
.timer { color: var(--danger); font-weight: 700; }
/* 已支付状态区 */
.status-paid { text-align: center; padding: 30px; }
/* 已支付大文字 */
.status-paid .big { font-size: 26px; color: var(--success); font-weight: 700; }

/* ---------- 主题切换按钮（去旋转炫技，仅微动效） ---------- */
/* 主题切换按钮 */
.theme-toggle {
  /* 弹性布局 */
  display: inline-flex;
  /* 垂直居中 */
  align-items: center;
  /* 水平居中 */
  justify-content: center;
  /* 宽度 */
  width: 38px;
  /* 高度 */
  height: 38px;
  /* 小圆角 */
  border-radius: var(--radius-sm);
  /* 玻璃底 */
  background: var(--glass-bg);
  /* 玻璃描边 */
  border: 1px solid var(--glass-border);
  /* 主文字色 */
  color: var(--text-primary);
  /* 手型光标 */
  cursor: pointer;
  /* 状态过渡 */
  transition: all var(--dur);
  /* 左侧间距 */
  margin-left: 8px;
  /* 图标字号 */
  font-size: 16px;
}
/* 主题切换按钮悬浮 */
.theme-toggle:hover { background: var(--glass-bg-hover); transform: translateY(-1px); }

/* ---------- Toast ---------- */
/* Toast 容器：固定右上角、纵向排列 */
.glass-toast-wrap { position: fixed; top: 20px; right: 20px; z-index: 99999; display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
/* Toast 提示条 */
.glass-toast {
  /* 玻璃强底 */
  background: var(--glass-bg-strong);
  /* 背景模糊 */
  backdrop-filter: blur(20px);
  /* Safari/旧 Chrome 前缀 */
  -webkit-backdrop-filter: blur(20px);
  /* 加强描边 */
  border: 1px solid var(--glass-border-strong);
  /* 中圆角 */
  border-radius: var(--radius-md);
  /* 内边距 */
  padding: 14px 18px;
  /* 柔和阴影 */
  box-shadow: var(--glass-shadow);
  /* 主文字色 */
  color: var(--text-primary);
  /* 弹性布局 */
  display: flex;
  /* 图标与文字垂直居中 */
  align-items: center;
  /* 图标与文字间距 */
  gap: 10px;
  /* 上浮渐入动画 */
  animation: fadeInUp var(--dur) var(--ease);
  /* 正文字号 */
  font-size: var(--font-size-body);
}
/* 成功 Toast：左侧色条 */
.glass-toast.success { border-left: 4px solid var(--success); color: var(--success); }
/* 错误 Toast */
.glass-toast.error { border-left: 4px solid var(--danger); color: var(--danger); }
/* 警告 Toast */
.glass-toast.warning { border-left: 4px solid var(--warning); color: var(--warning); }
/* 信息 Toast */
.glass-toast.info { border-left: 4px solid var(--info); color: var(--info); }
/* 即将消失的 Toast：透明并上移 */
.glass-toast.leaving { opacity: 0; transform: translateY(-10px); transition: all var(--dur); }

/* ---------- 自定义弹窗 ---------- */
/* 自定义弹窗遮罩：全屏、居中、淡入 */
.glass-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); backdrop-filter: blur(4px); z-index: 99998; display: flex; align-items: center; justify-content: center; opacity: 0; animation: fadeIn .2s forwards; }
/* 自定义弹窗主体 */
.glass-modal {
  /* 玻璃强底 */
  background: var(--glass-bg-strong);
  /* 背景模糊 */
  backdrop-filter: blur(24px);
  /* Safari/旧 Chrome 前缀 */
  -webkit-backdrop-filter: blur(24px);
  /* 加强描边 */
  border: 1px solid var(--glass-border-strong);
  /* 大圆角 */
  border-radius: var(--radius-lg);
  /* 悬浮级阴影 */
  box-shadow: var(--glass-shadow-hover);
  /* 内边距 */
  padding: 28px;
  /* 最大宽度 */
  max-width: 420px;
  /* 小屏适配宽度 */
  width: 90%;
  /* 主文字色 */
  color: var(--text-primary);
  /* 入场动画 */
  animation: modalIn var(--dur) var(--ease);
}
/* 弹窗标题 */
.glass-modal .glass-modal-title { font-size: var(--font-size-title); font-weight: var(--font-weight-title); margin-bottom: 12px; }
/* 弹窗正文 */
.glass-modal .glass-modal-body { margin-bottom: 20px; color: var(--text-secondary); line-height: var(--line-height); }
/* 弹窗按钮行：右对齐 */
.glass-modal .glass-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ---------- 页头 / Well ---------- */
/* 页头：底部描边 */
.page-header { border-bottom: 1px solid var(--glass-border); margin: 20px 0; padding-bottom: 10px; }
/* 页头标题颜色与字重 */
.page-header h1, .page-header h2, .page-header h3 { color: var(--text-primary); font-weight: var(--font-weight-title); }
/* 嵌入面板（Bootstrap .well 覆盖） */
.well { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md); box-shadow: none; color: var(--text-primary); }

/* ---------- 响应式 ---------- */
/* 平板及以下屏幕适配 */
@media (max-width: 768px) {
  /* 缩小正文字号 */
  body { font-size: 13px; }
  /* 容器左右内边距收窄 */
  .container, .container-fluid { padding-left: 12px; padding-right: 12px; }
  /* 主内容区内边距收窄 */
  .main { padding: 12px; }
  /* 统计卡内边距收窄 */
  .stat-card { padding: 14px; }
  /* 统计数值缩小 */
  .stat-card .value { font-size: 20px; }
  /* 余额卡内边距收窄 */
  .balance-card { padding: 18px; }
  /* 余额数字缩小 */
  .balance-card .num { font-size: 26px; }
  /* 侧栏改为横向展开（不再吸顶撑满） */
  .sidebar { min-height: auto; border-right: none; border-bottom: 1px solid var(--glass-border); }
  /* 收银台四周留边距 */
  .cashier { margin: 10px; }
  /* 认证卡片四周留边距 */
  .login-wrap, .reg-wrap, .wrap, .login { margin: 20px 10px; }
  /* 表格禁止换行以便横向滚动 */
  .table { white-space: nowrap; }
  /* 响应式表格容器允许横向滚动 */
  .table-responsive { overflow-x: auto; }
  /* 行内表单组改为块级 */
  .form-inline .form-group { display: block; margin-right: 0; }
  /* 行内表单输入框占满宽度 */
  .form-inline .form-control { width: 100%; margin-bottom: 8px; }
  /* 顶栏内边距收窄 */
  .topbar { padding: 0 12px; }
}

/* ---------- 不支持 backdrop-filter 时的降级（纯色半透明） ---------- */
/* 浏览器不支持毛玻璃时：用纯色背景替代 */
@supports not (backdrop-filter: blur(20px)) {
  /* 暗色下页面用纯色背景 */
  body { background: #15171a fixed; }
  /* 亮色下页面用浅色背景 */
  :root[data-theme="light"] body { background: #eceef1 fixed; }
  /* 需要降级的玻璃组件选择器列表 */
  .panel, .sidebar-nav, .stat-card, .navbar-pay, .navbar, .topbar, .sidebar,
  .login-wrap, .reg-wrap, .wrap, .login, .cashier, .modal-content, .dropdown-menu,
  .alert, .form-control, .btn, .glass-toast, .glass-modal {
    /* 暗色下统一用深色半透明底 */
    background: rgba(21,23,26,.94) !important;
  }
  /* 亮色主题下的降级组件 */
  :root[data-theme="light"] .panel, :root[data-theme="light"] .sidebar-nav,
  :root[data-theme="light"] .stat-card, :root[data-theme="light"] .navbar-pay,
  :root[data-theme="light"] .navbar, :root[data-theme="light"] .topbar,
  :root[data-theme="light"] .sidebar, :root[data-theme="light"] .login-wrap,
  :root[data-theme="light"] .reg-wrap, :root[data-theme="light"] .wrap,
  :root[data-theme="light"] .login, :root[data-theme="light"] .cashier,
  :root[data-theme="light"] .modal-content, :root[data-theme="light"] .dropdown-menu,
  :root[data-theme="light"] .alert, :root[data-theme="light"] .form-control,
  :root[data-theme="light"] .btn, :root[data-theme="light"] .glass-toast,
  :root[data-theme="light"] .glass-modal { background: rgba(255,255,255,.95) !important; }
}

/* ---------- 右上角抽屉菜单（中性玻璃） ---------- */
/* 抽屉开关按钮（移动端右上角） */
.drawer-toggle {
  /* 弹性布局 */
  display: inline-flex;
  /* 垂直居中 */
  align-items: center;
  /* 水平居中 */
  justify-content: center;
  /* 宽度 */
  width: 40px;
  /* 高度 */
  height: 40px;
  /* 上右间距 */
  margin: 8px 4px 0 0;
  /* 玻璃描边 */
  border: 1px solid var(--glass-border);
  /* 中圆角 */
  border-radius: var(--radius-md);
  /* 玻璃底 */
  background: var(--glass-bg);
  /* 主文字色 */
  color: var(--text-primary);
  /* 图标字号 */
  font-size: 18px;
  /* 手型光标 */
  cursor: pointer;
  /* 右浮动 */
  float: right;
  /* 状态过渡 */
  transition: all var(--dur) var(--ease);
}
/* 抽屉开关悬浮 */
.drawer-toggle:hover { background: var(--glass-bg-hover); border-color: var(--glass-border-strong); }
/* 抽屉遮罩：默认隐藏，点击显示 */
.nav-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 998; opacity: 0; visibility: hidden; transition: opacity var(--dur) ease, visibility var(--dur); }
/* 抽屉遮罩显示状态 */
.nav-drawer-overlay.show { opacity: 1; visibility: visible; }
/* 抽屉面板 */
.nav-drawer {
  /* 固定定位 */
  position: fixed;
  /* 左侧上下撑满 */
  top: 0; left: 0; bottom: 0;
  /* 宽度占屏 82% */
  width: 82%;
  /* 最大宽度 */
  max-width: 300px;
  /* 纵向弹性布局 */
  display: flex;
  /* 纵向排列 */
  flex-direction: column;
  /* 半透明底（参考图：实体侧栏观感，加深不透明度） */
  background: rgba(255,255,255,.14);
  /* 背景模糊 */
  backdrop-filter: blur(26px);
  /* Safari/旧 Chrome 前缀 */
  -webkit-backdrop-filter: blur(26px);
  /* 右侧加强描边 */
  border-right: 1px solid var(--glass-border-strong);
  /* 悬浮级阴影 */
  box-shadow: var(--glass-shadow-hover);
  /* 层级高于遮罩 */
  z-index: 999;
  /* 默认移出屏幕左侧 */
  transform: translateX(-105%);
  /* 滑动过渡 */
  transition: transform .34s var(--ease);
}
/* 抽屉展开状态 */
.nav-drawer.open { transform: translateX(0); }

/* 抽屉头部主题切换按钮 */
.drawer-theme { position:absolute; top:18px; right:52px; width:34px; height:34px; border-radius:var(--radius-sm); background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-secondary); display:inline-flex; align-items:center; justify-content:center; transition:all var(--dur); }
.drawer-theme:hover { background:var(--glass-bg-hover); border-color:var(--glass-border-strong); color:var(--text-primary); }

/* 抽屉头部 */
.drawer-head { padding: 20px 20px 14px; border-bottom: 1px solid var(--glass-border); position: relative; }
/* 抽屉品牌logo区：圆形图标 + 文字左右排列 */
.drawer-logo { display: flex; align-items: center; gap: 12px; padding-right: 76px; }
/* 圆形首字图标（参考图式 logo） */
.drawer-logo-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--accent); color: #fff; font-size: 20px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
/* logo 文字区 */
.drawer-logo-text { display: flex; flex-direction: column; min-width: 0; }
/* 抽屉品牌文字 */
.drawer-brand { font-size: 18px; font-weight: var(--font-weight-title); color: var(--text-primary); line-height: 1.3; }
/* 品牌副标（参考图式 slogan） */
.drawer-slogan { font-size: 12px; color: var(--text-muted); margin-top: 2px; letter-spacing: 1px; }
/* 抽屉副标题 */
.drawer-sub { margin-top: 12px; font-size: 13px; color: var(--text-secondary); }
/* 抽屉关闭按钮 */
.drawer-close { position: absolute; top: 16px; right: 14px; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-secondary); font-size: 14px; cursor: pointer; transition: all var(--dur); }
/* 抽屉关闭按钮悬浮 */
.drawer-close:hover { color: var(--text-primary); background: var(--glass-bg-hover); }
/* 抽屉主体：可滚动 */
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 0; }
/* 抽屉分组标题（参考图式：主分组更醒目） */
.drawer-group-title { font-size: 12px; font-weight: 600; color: var(--text-secondary); padding: 18px 24px 8px; letter-spacing: 1px; text-transform: uppercase; }
/* 抽屉菜单项 */
.drawer-item { display: flex; align-items: center; padding: 11px 20px; margin: 2px 10px; border-radius: var(--radius-md); color: var(--text-secondary); border-left: 3px solid transparent; transition: all var(--dur); font-size: 15px; }
/* 抽屉菜单项图标 */
.drawer-item i { width: 22px; text-align: center; margin-right: 10px; color: var(--text-muted); font-size: 15px; }
/* 抽屉菜单项悬浮 */
.drawer-item:hover { background: var(--glass-bg-hover); color: var(--text-primary); }
/* 抽屉选中项（参考图式：高亮底块 + 左侧强调条） */
.drawer-item.active { background: var(--accent-soft); color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
/* 抽屉选中项图标 */
.drawer-item.active i { color: var(--accent); }
/* 抽屉底部 */
.drawer-foot { padding: 10px; border-top: 1px solid var(--glass-border); }
/* 底部菜单项（危险色） */
.drawer-foot .drawer-item { color: var(--danger); }
/* 底部菜单项悬浮（危险色浅底） */
.drawer-foot .drawer-item:hover { background: var(--danger-soft); }

/* ---------- 移动端：隐藏平铺侧栏，功能走抽屉 ---------- */
/* 移动端隐藏平铺侧栏 */
@media (max-width: 768px) {
  /* 隐藏商户侧栏 */
  .sidebar-nav { display: none; }
  /* 隐藏顶栏右侧导航 */
  .navbar-nav.navbar-right { display: none; }
}