/* ============================================================

   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); }

/* 只读输入框（如 API 密钥展示）强制使用玻璃底，避免 Bootstrap 默认 #eee 白底在暗色下刺眼 */

.form-control[readonly],

.form-control[readonly]:focus {

  background: var(--input-bg);

  color: var(--text-primary);

  cursor: default;

}

/* 下拉框选项在暗色下用深底浅字 */

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;

}

/* 顶栏品牌区：站点名靠最左（留出适度左边距，不贴边），无 logo */
.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: 14px 15px 14px 12px; margin-left: 0; display: block; }

/* 表格内长链接/密钥自动换行，防止手机端截断 */
.panel-body table td code, .panel-body table th code { word-break: break-all; white-space: normal; }


/* 导航栏头部弹性布局：品牌在左，操作组在右（PC/手机同一行，铃铛不再被折叠隐藏） */
/* 覆盖 Bootstrap .navbar-header{float:left} 的宽度收缩：取消浮动并占满整行 */
.navbar-header.header-flex { display: flex; align-items: center; justify-content: space-between; float: none; width: 100%; }

/* 顶部操作组：消息通知铃铛 + 主题切换 + 抽屉横杠 同行，贴最右 */

.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* 操作组内按钮统一对齐：铃铛 / 月亮 / 横杠 同尺寸 38×38、无 margin、垂直居中 */
.header-actions .nav-msg,
.header-actions .theme-toggle,
.header-actions .drawer-toggle {
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  float: none;
  flex: 0 0 auto;
}

/* 品牌区图标颜色 */

.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); }



/* ---------- 系统确认弹窗（液态玻璃） ---------- */

/* 弹窗遮罩：半透明黑 + 背景模糊 */

.g-confirm-overlay {

  position: fixed; inset: 0; z-index: 1200;

  background: rgba(0,0,0,.38);

  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);

  display: flex; align-items: center; justify-content: center;

  animation: gFadeIn .18s ease;

}

/* 弹窗卡片：半透明磨砂 + 高光描边 + 柔和阴影 */

.g-confirm {

  width: min(330px, 86vw); box-sizing: border-box;

  background: var(--glass-bg-strong, rgba(255,255,255,.78));

  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);

  border: 1px solid var(--glass-border-strong, rgba(255,255,255,.55));

  border-radius: var(--radius-lg, 20px);

  box-shadow: var(--glass-shadow);

  padding: 20px 22px;

  animation: gRise .18s ease;

}

/* 弹窗标题 */

.g-confirm-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; }

/* 弹窗正文 */

.g-confirm-body { font-size: 14px; color: var(--text-secondary); line-height: 1.65; margin-bottom: 20px; word-break: break-all; }

/* 弹窗按钮组 */

.g-confirm-btns { display: flex; justify-content: flex-end; gap: 10px; }

/* 弹窗按钮（次按钮：玻璃底） */

.g-confirm-btns .g-btn {

  min-width: 76px; height: 38px; padding: 0 18px; box-sizing: border-box;

  border-radius: var(--radius-md, 14px);

  border: 1px solid var(--glass-border-strong, rgba(255,255,255,.55));

  background: var(--glass-bg); color: var(--text-primary);

  font-size: 14px; font-weight: 500; cursor: pointer;

  transition: all var(--dur);

}

/* 弹窗按钮悬浮：轻微上浮 + 高光 */

.g-confirm-btns .g-btn:hover { background: var(--glass-bg-hover); transform: translateY(-1px); }

/* 弹窗确定按钮（主按钮：低饱和主色底） */

.g-confirm-btns .g-ok { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 确定按钮悬浮：微上浮 */

.g-confirm-btns .g-ok:hover { background: var(--accent); transform: translateY(-1px); }

/* 弹窗淡入动效 */

@keyframes gFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 弹窗上移动效 */

@keyframes gRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }



/* ---------- 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:16px; right:54px; width:36px; height:36px; 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; font-size:16px; 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: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-secondary); font-size: 16px; 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 { }

/* 抽屉分组标题按钮（点击展开/收起整组） */

.drawer-group-head { display: flex; align-items: center; gap: 4px; width: 100%; padding: 18px 24px 8px; background: none; border: 0; color: var(--text-secondary); font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: color var(--dur); text-align: left; }

/* 分组标题悬浮高亮 */

.drawer-group-head:hover { color: var(--text-primary); }

/* 分组箭头图标（收起状态指向右） */

.grp-arrow { font-size: 10px; color: var(--text-muted); transition: transform .25s var(--ease); }

/* 分组展开时箭头旋转向下 */

.drawer-group.open .grp-arrow { transform: rotate(90deg); }

/* 分组内容区：收起时高度为 0 隐藏，展开时平滑展开 */

.drawer-group-body { max-height: 0; overflow: hidden; transition: max-height .32s var(--ease); }

/* 分组展开时显示内容 */

.drawer-group.open .drawer-group-body { max-height: 640px; }

/* 抽屉菜单项 */

.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; }

}

/* ---------- 首页仪表盘（初识云风格：时间段 Tab + 四卡 + 订单统计） ---------- */

/* 时间段切换 Tab */

.period-tabs { display: flex; gap: 6px; flex-wrap: wrap; }

.period-tab { border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--text-secondary); border-radius: var(--radius-sm); padding: 6px 14px; font-size: 13px; cursor: pointer; transition: all var(--dur); line-height: 1.4; }

.period-tab:hover { color: var(--text-primary); border-color: var(--accent); }

.period-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }

/* 四宫格卡片（在栅格内不留大空隙） */

.stat-cell { padding: 5px !important; }

.stat-cell .stat-card { margin: 0; height: 100%; }

/* 订单统计块 */

.order-stat-item { padding: 10px 0; border-bottom: 1px solid rgba(128,128,128,.12); }

.order-stat-item:last-child { border-bottom: none; }

.pay-income { padding: 10px 0; border-bottom: 1px solid rgba(128,128,128,.12); }

.os-label { font-size: 13px; color: var(--text-secondary); }

.os-value { font-size: 17px; font-weight: 600; color: var(--text-primary); margin-top: 4px; }