/* ============================================================================
   毛玻璃 · 撞色科技风主题  v2.0 （撞色版）
   站点：car.lxzz1024.top（玛纳斯养护所车辆管理系统）

   【v2.0 设计语言 —— 与 v1 的区别】
   v1 保留琥珀金+深青，太保守看不出变化。v2 改为撞色体系：
     · 底色：深空黑蓝 #05070f（比原来的深青更深更冷）
     · 主色：电光青 #22d3ee  ×  品红 #f43f8e  ×  紫罗兰 #a78bfa 三色对撞
     · 卡片：渐变描边玻璃（青→紫→品红 1px 渐变边 + 高透底 + 大模糊）
     · 悬停：青/品红双色光晕
   【回滚方式】  inject_theme.py --off 一键还原，或删 link 一行
   【兼容性】    @supports 降级 + prefers-reduced-motion 均已内置
   ========================================================================== */

/* ==========================================================================
   1. 设计令牌 Design Tokens —— 撞色体系
   ========================================================================== */
:root {
  /* --- 主色：电光青 --- */
  --primary: #22d3ee;
  --primary-dark: #0ea5c9;
  --primary-light: #a5f3fc;
  --primary-bg: rgba(34, 211, 238, 0.14);

  /* --- 撞色对：品红 / 紫罗兰 / 琥珀（点缀） --- */
  --accent: #f43f8e;
  --accent-soft: rgba(244, 63, 142, 0.16);
  --violet: #a78bfa;
  --violet-soft: rgba(167, 139, 250, 0.16);
  --amber: #ffc873;
  --tech: #f43f8e;
  --tech-dim: rgba(244, 63, 142, 0.18);

  /* --- 玻璃表面 --- */
  --glass-1: rgba(148, 184, 255, 0.055);
  --glass-2: rgba(148, 184, 255, 0.10);
  --glass-3: rgba(148, 184, 255, 0.15);
  --glass-solid: rgba(10, 16, 34, 0.82);

  /* --- 渐变描边（撞色灵魂） --- */
  --edge: linear-gradient(135deg, rgba(34, 211, 238, 0.65), rgba(167, 139, 250, 0.38) 45%, rgba(244, 63, 142, 0.6));
  --edge-dim: linear-gradient(135deg, rgba(34, 211, 238, 0.30), rgba(167, 139, 250, 0.20) 50%, rgba(244, 63, 142, 0.28));
  --glass-border: rgba(148, 184, 255, 0.16);
  --glass-border-strong: rgba(34, 211, 238, 0.45);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --glass-hairline: rgba(148, 184, 255, 0.10);

  --glass-blur: blur(24px) saturate(170%);
  --glass-blur-lg: blur(36px) saturate(180%);

  /* --- 光晕 --- */
  --card-shadow: 0 8px 32px rgba(2, 6, 18, 0.55);
  --card-hover-shadow: 0 0 0 1px rgba(34, 211, 238, 0.25),
                       0 12px 40px rgba(2, 6, 18, 0.6),
                       0 0 32px rgba(34, 211, 238, 0.18),
                       0 0 64px rgba(244, 63, 142, 0.10);
  --glow-primary: 0 0 16px rgba(34, 211, 238, 0.4);
  --glow-primary-hover: 0 0 28px rgba(34, 211, 238, 0.6), 0 0 56px rgba(244, 63, 142, 0.25);

  /* --- 映射原有变量名（74 条自定义选择器自动继承） --- */
  --bg-body: #05070f;
  --bg-card: var(--glass-1);
  --bg-card-hover: var(--glass-2);
  --bg-input: rgba(148, 184, 255, 0.06);
  --border-color: var(--glass-border);

  --sidebar-bg: rgba(6, 10, 24, 0.60);
  --sidebar-text: #9fb4d8;
  --sidebar-active: var(--primary);

  --header-h: 60px;
  --sidebar-w: 220px;

  --text-primary: #eef5ff;
  --text-secondary: #b8c9e6;
  --text-muted: #7e93b8;

  /* --- 状态色（撞色但语义不变） --- */
  --neon-green: #4ade80;
  --neon-red: #fb7185;
  --neon-orange: #fbbf24;
  --neon-purple: #a78bfa;
}

/* ==========================================================================
   2. 深空极光背景 v3 —— 高饱和极光场 + 星尘 + 色相流动
   ========================================================================== */
html {
  background: linear-gradient(165deg, #04060f 0%, #0a1030 30%, #10103a 55%, #1a0b2e 78%, #060313 100%);
}

body {
  background: transparent;
  color: var(--text-primary);
}

/* 星尘层：细碎光点，随极光缓慢漂移 */
body::before {
  content: "";
  position: fixed;
  inset: -28%;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 22% 31%, rgba(255,255,255,0.9), transparent 100%),
    radial-gradient(1.2px 1.2px at 67% 12%, rgba(160,220,255,0.8), transparent 100%),
    radial-gradient(1.4px 1.4px at 84% 47%, rgba(255,190,240,0.7), transparent 100%),
    radial-gradient(1.1px 1.1px at 41% 72%, rgba(255,255,255,0.65), transparent 100%),
    radial-gradient(1.5px 1.5px at 9% 58%, rgba(140,240,255,0.7), transparent 100%),
    radial-gradient(1.2px 1.2px at 55% 89%, rgba(255,255,255,0.6), transparent 100%),
    radial-gradient(1.3px 1.3px at 93% 76%, rgba(180,200,255,0.65), transparent 100%),
    radial-gradient(1.1px 1.1px at 33% 8%, rgba(255,255,255,0.55), transparent 100%);
  background-size: 340px 340px, 420px 420px, 380px 380px, 460px 460px, 400px 400px, 360px 360px, 440px 440px, 320px 320px;
  animation: starfield-twinkle 7s ease-in-out infinite alternate;
}

@keyframes starfield-twinkle {
  from { opacity: 0.35; }
  to   { opacity: 0.9; }
}

/* 极光层：挂载在 main 下方新伪元素不可行，改由 .main::before 承载高饱和光晕 */
.main::before {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 700px at 14% 16%, rgba(34, 211, 238, 0.42), transparent 58%),
    radial-gradient(820px 660px at 90% 8%,  rgba(244, 63, 142, 0.34), transparent 60%),
    radial-gradient(940px 760px at 72% 95%, rgba(167, 139, 250, 0.36), transparent 62%),
    radial-gradient(600px 520px at 28% 80%, rgba(6, 182, 212, 0.26), transparent 58%),
    radial-gradient(480px 420px at 55% 40%, rgba(59, 130, 246, 0.16), transparent 60%);
  animation: aurora-drift 26s ease-in-out infinite alternate, aurora-hue 18s linear infinite;
  will-change: transform, filter;
}

/* 色相流动：整个极光场缓慢在青⇄紫⇄品红间呼吸 */
@keyframes aurora-hue {
  from { filter: hue-rotate(-18deg) saturate(1.05); }
  50%  { filter: hue-rotate(14deg)  saturate(1.2); }
  to   { filter: hue-rotate(-18deg) saturate(1.05); }
}

@keyframes aurora-drift {
  from { transform: translate3d(-2.5%, -1.5%, 0) scale(1); }
  to   { transform: translate3d(3.5%, 2.5%, 0) scale(1.12); }
}

/* 科技网格（径向遮罩，边缘淡出）—— 网格亮度同步提级 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.75;
  background-image:
    linear-gradient(rgba(90, 200, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 200, 255, 0.06) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 100%);
}

/* ==========================================================================
   3. 顶栏 —— 玻璃 + 底部撞色流光细线
   ========================================================================== */
.header {
  background: rgba(6, 10, 24, 0.55);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  backdrop-filter: var(--glass-blur-lg);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, rgba(34, 211, 238, 0.6), rgba(167, 139, 250, 0.35) 50%, rgba(244, 63, 142, 0.55)) 1;
  box-shadow: var(--glass-highlight), 0 6px 28px rgba(2, 6, 18, 0.5);
}

.header-left h1 {
  color: var(--text-primary);
  letter-spacing: 0.4px;
}

.header-left h1 i { color: var(--primary); filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.7)); }

/* ==========================================================================
   4. 侧边栏 v3 —— 渐变光柱 + 撞色光缘 + 发光导航
   ========================================================================== */
.sidebar {
  background:
    radial-gradient(420px 300px at 0% 0%, rgba(34, 211, 238, 0.16), transparent 62%),
    radial-gradient(380px 320px at 0% 100%, rgba(244, 63, 142, 0.13), transparent 62%),
    linear-gradient(180deg, rgba(10, 18, 46, 0.78) 0%, rgba(8, 12, 32, 0.66) 50%, rgba(14, 10, 38, 0.74) 100%);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  backdrop-filter: var(--glass-blur-lg);
  border-right: 1px solid transparent;
  border-image: linear-gradient(180deg, rgba(34, 211, 238, 0.75), rgba(167, 139, 250, 0.35) 45%, rgba(244, 63, 142, 0.6)) 1;
  box-shadow:
    1px 0 0 rgba(148, 184, 255, 0.06),
    10px 0 44px rgba(2, 6, 18, 0.55),
    2px 0 18px rgba(34, 211, 238, 0.12);
}

/* 顶栏 logo 区域加青色辉光（若存在 logo/标题） */
.sidebar .logo,
.sidebar h2,
.sidebar .sidebar-title {
  color: var(--primary-light);
  text-shadow: 0 0 14px rgba(34, 211, 238, 0.55);
}

.nav-group-title {
  color: #67e8f9;
  letter-spacing: 1.6px;
  font-size: 11px;
  text-shadow: 0 0 8px rgba(34, 211, 238, 0.35);
}

.nav-item a {
  color: #b6c8ea;
  border-radius: 10px;
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  border: 1px solid transparent;
  position: relative;
}

.nav-item a i {
  transition: color 0.22s ease, filter 0.22s ease, text-shadow 0.22s ease;
}

.nav-item a:hover {
  background: linear-gradient(100deg, rgba(34, 211, 238, 0.14), rgba(167, 139, 250, 0.08) 60%, rgba(244, 63, 142, 0.10));
  color: var(--text-primary);
  transform: translateX(5px);
  border-color: rgba(34, 211, 238, 0.35);
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.14);
}

.nav-item a:hover i {
  color: var(--primary-light);
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.7));
}

/* 激活态：全亮度撞色渐变底 + 双侧辉光 */
.nav-item.active a {
  background: linear-gradient(100deg, rgba(34, 211, 238, 0.30), rgba(167, 139, 250, 0.16) 55%, rgba(244, 63, 142, 0.22));
  color: #fff;
  border-color: rgba(34, 211, 238, 0.65);
  box-shadow:
    var(--glass-highlight),
    0 0 22px rgba(34, 211, 238, 0.30),
    inset 0 0 18px rgba(34, 211, 238, 0.10);
  font-weight: 600;
  text-shadow: 0 0 10px rgba(120, 230, 255, 0.5);
}

.nav-item.active a i {
  color: var(--primary-light);
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.9));
}

.nav-item.active a::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 12%;
  bottom: 12%;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--primary), var(--violet) 55%, var(--accent));
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.95), 0 0 26px rgba(244, 63, 142, 0.4);
}

.nav-icon { transition: transform 0.22s ease, filter 0.22s ease; }
.nav-item.active .nav-icon { filter: drop-shadow(0 0 7px rgba(34, 211, 238, 0.8)); }

/* ==========================================================================
   5. 玻璃卡片 —— 渐变描边（撞色灵魂）
   background 双层技巧：内层玻璃色 padding-box，外层渐变边 border-box
   ========================================================================== */
.stat-card,
.stat-card-gradient,
.metric-card,
.layui-card {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--glass-1), var(--glass-1)) padding-box,
    var(--edge-dim) border-box;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-radius: 16px;
  box-shadow: var(--glass-highlight), var(--card-shadow);
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.26s ease, background 0.26s ease;
}

.stat-card:hover,
.stat-card-gradient:hover,
.metric-card:hover,
.layui-card:hover {
  transform: translateY(-3px);
  background:
    linear-gradient(var(--glass-2), var(--glass-2)) padding-box,
    var(--edge) border-box;
  box-shadow: var(--glass-highlight), var(--card-hover-shadow);
}

/* 卡片顶部高光条 */
.stat-card::before,
.stat-card-gradient::before {
  background: linear-gradient(90deg, transparent, rgba(165, 243, 252, 0.35), transparent);
}

/* 渐变数值卡：四色轮换（青 / 紫 / 品红 / 绿） */
.stat-card-gradient:nth-of-type(4n+1) { background: linear-gradient(rgba(34,211,238,0.10), rgba(34,211,238,0.03)) padding-box, linear-gradient(135deg, rgba(34,211,238,0.7), rgba(59,130,246,0.35)) border-box; }
.stat-card-gradient:nth-of-type(4n+2) { background: linear-gradient(rgba(167,139,250,0.10), rgba(167,139,250,0.03)) padding-box, linear-gradient(135deg, rgba(167,139,250,0.7), rgba(244,63,142,0.35)) border-box; }
.stat-card-gradient:nth-of-type(4n+3) { background: linear-gradient(rgba(244,63,142,0.10), rgba(244,63,142,0.03)) padding-box, linear-gradient(135deg, rgba(244,63,142,0.7), rgba(251,191,36,0.35)) border-box; }
.stat-card-gradient:nth-of-type(4n+4) { background: linear-gradient(rgba(74,222,128,0.10), rgba(74,222,128,0.03)) padding-box, linear-gradient(135deg, rgba(74,222,128,0.7), rgba(34,211,238,0.35)) border-box; }

.layui-card-header {
  background: transparent;
  border-bottom: 1px solid var(--glass-hairline);
  color: var(--text-primary);
  font-weight: 600;
}

.layui-card-body { background: transparent; }

.stat-card .value,
.stat-card-gradient .value,
.metric-card .metric-value {
  color: var(--text-primary);
  text-shadow: 0 0 24px rgba(34, 211, 238, 0.35);
}

.stat-card .value.blue   { color: #7dd3fc; text-shadow: 0 0 22px rgba(125, 211, 252, 0.45); }
.stat-card .value.orange { color: var(--amber); text-shadow: 0 0 22px rgba(255, 200, 115, 0.4); }
.stat-card .value.red    { color: var(--neon-red); text-shadow: 0 0 22px rgba(251, 113, 133, 0.45); }

.stat-card .label,
.stat-card-gradient .label,
.metric-card .metric-label,
.metric-card .metric-sub { color: var(--text-secondary); }

/* 中国习惯：红涨绿跌 */
.stat-card .trend.up   { color: var(--neon-red); }
.stat-card .trend.down { color: var(--neon-green); }

/* 状态标签：撞色荧光胶囊 */
.tag-safe, .tag-warning, .tag-danger, .tag-info, .tag-gray {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  font-weight: 600;
}
.tag-safe    { background: rgba(74, 222, 128, 0.14);  border: 1px solid rgba(74, 222, 128, 0.45);  color: #86efac; }
.tag-warning { background: rgba(251, 191, 36, 0.14);  border: 1px solid rgba(251, 191, 36, 0.45);  color: #fcd34d; }
.tag-danger  { background: rgba(251, 113, 133, 0.14); border: 1px solid rgba(251, 113, 133, 0.5);  color: #fda4af; }
.tag-info    { background: rgba(34, 211, 238, 0.14);  border: 1px solid rgba(34, 211, 238, 0.45);  color: #a5f3fc; }
.tag-gray    { background: rgba(148, 184, 255, 0.10); border: 1px solid rgba(148, 184, 255, 0.25); color: var(--text-secondary); }

/* ==========================================================================
   6. 表格 Layui Table
   ========================================================================== */
.layui-table-view {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--glass-1), var(--glass-1)) padding-box,
    var(--edge-dim) border-box;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--glass-highlight), var(--card-shadow);
}

.layui-table-header {
  background: rgba(34, 211, 238, 0.06);
  border-bottom: 1px solid rgba(34, 211, 238, 0.18);
}

.layui-table th {
  background: transparent;
  color: var(--primary-light);
  font-weight: 600;
  letter-spacing: 0.3px;
  border-bottom: 1px solid rgba(34, 211, 238, 0.18);
}

.layui-table td {
  background: transparent;
  color: var(--text-primary);
  border-bottom: 1px solid rgba(148, 184, 255, 0.06);
}

.layui-table tr:hover td { background: rgba(34, 211, 238, 0.06); }

/* 表头工具条 */
.table-toolbar {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--glass-1), var(--glass-1)) padding-box,
    var(--edge-dim) border-box;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-radius: 14px;
  box-shadow: var(--glass-highlight);
}

.page-header h2 { color: var(--text-primary); }

/* ==========================================================================
   7. 表单 Layui Form
   ========================================================================== */
.layui-input,
.layui-textarea,
.layui-form-select .layui-input {
  background: var(--bg-input);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  color: var(--text-primary);
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.layui-input:hover,
.layui-textarea:hover { border-color: rgba(34, 211, 238, 0.35); }

.layui-input:focus,
.layui-textarea:focus {
  border-color: rgba(34, 211, 238, 0.65);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15), 0 0 18px rgba(34, 211, 238, 0.15);
  background: rgba(34, 211, 238, 0.05);
}

.layui-input::placeholder,
.layui-textarea::placeholder { color: var(--text-muted); }

/* 下拉面板 */
.layui-form-select dl {
  background: var(--glass-solid);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  backdrop-filter: var(--glass-blur-lg);
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 12px;
  box-shadow: 0 16px 44px rgba(2, 6, 18, 0.6), 0 0 24px rgba(34, 211, 238, 0.12);
  overflow: hidden;
}

.layui-form-select dl dd { color: var(--text-secondary); }
.layui-form-select dl dd:hover { background: rgba(34, 211, 238, 0.12); color: var(--primary-light); }
.layui-form-select dl dd.layui-this { background: rgba(34, 211, 238, 0.18); color: var(--primary-light); }

/* 复选 / 单选 */
.layui-form-checkbox i,
.layui-form-radio i {
  background: rgba(148, 184, 255, 0.07);
  border-color: rgba(148, 184, 255, 0.3);
}
.layui-form-checked i,
.layui-form-radioed i {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: var(--glow-primary);
}
.layui-form-checked[lay-skin="primary"] i { border-color: var(--primary) !important; }

/* ==========================================================================
   8. 按钮 —— 撞色渐变体系
   ========================================================================== */
.layui-btn {
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.layui-btn:hover { transform: translateY(-1px); filter: brightness(1.1); }

/* 主操作：电光青渐变 */
.layui-btn-normal,
.btn-primary {
  background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
  border-color: rgba(34, 211, 238, 0.55);
  color: #04121e;
  font-weight: 600;
  box-shadow: var(--glow-primary);
}
.layui-btn-normal:hover,
.btn-primary:hover { box-shadow: var(--glow-primary-hover); }

/* 强调操作：品红 */
.layui-btn-warm {
  background: linear-gradient(135deg, #f43f8e 0%, #d946ef 100%);
  border-color: rgba(244, 63, 142, 0.55);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 0 16px rgba(244, 63, 142, 0.4);
}

.layui-btn-danger {
  background: linear-gradient(135deg, rgba(251, 113, 133, 0.92), rgba(225, 29, 72, 0.92));
  border-color: rgba(251, 113, 133, 0.5);
  color: #fff;
  font-weight: 600;
}

.layui-btn-primary {
  background: var(--glass-2);
  color: var(--text-secondary);
  border-color: var(--glass-border);
}
.layui-btn-primary:hover { background: var(--glass-3); color: var(--primary-light); border-color: rgba(34, 211, 238, 0.4); }

/* ==========================================================================
   9. 浮层：模态 / 下拉 / 搜索
   ========================================================================== */
.layui-layer {
  background: var(--glass-solid) !important;
  -webkit-backdrop-filter: var(--glass-blur-lg) !important;
  backdrop-filter: var(--glass-blur-lg) !important;
  border: 1px solid rgba(34, 211, 238, 0.3);
  border-radius: 18px !important;
  box-shadow: 0 24px 70px rgba(2, 6, 18, 0.7), 0 0 40px rgba(34, 211, 238, 0.1) !important;
  overflow: hidden;
}

.layui-layer-title {
  background: rgba(34, 211, 238, 0.06);
  border-bottom: 1px solid rgba(34, 211, 238, 0.18);
  color: var(--text-primary);
  font-weight: 600;
}

.layui-layer-content { color: var(--text-secondary); }
.layui-layer-content form label { color: var(--text-secondary); }
.layui-layer-btn { background: rgba(148, 184, 255, 0.03); border-top: 1px solid var(--glass-hairline); }
.layui-layer-btn a {
  background: var(--glass-2);
  border-color: var(--glass-border);
  color: var(--text-secondary);
  border-radius: 9px;
}
.layui-layer-btn .layui-layer-btn0 {
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  border-color: rgba(34, 211, 238, 0.55);
  color: #04121e;
  font-weight: 600;
}

/* 全局搜索 */
.global-search input {
  background: rgba(148, 184, 255, 0.06);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
}
.global-search input:focus {
  border-color: rgba(34, 211, 238, 0.6);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.14);
}
.global-search button { color: var(--text-muted); }
.global-search button:hover { color: var(--primary); }

.search-dropdown {
  background: var(--glass-solid);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  backdrop-filter: var(--glass-blur-lg);
  border: 1px solid rgba(34, 211, 238, 0.3);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(2, 6, 18, 0.6);
}
.search-item { border-bottom: 1px solid var(--glass-hairline); }
.search-item:hover { background: rgba(34, 211, 238, 0.08); }
.search-item-title { color: var(--text-primary); }
.search-item-sub { color: var(--text-muted); }
.search-tag {
  background: rgba(34, 211, 238, 0.14);
  color: var(--primary-light);
  border: 1px solid rgba(34, 211, 238, 0.35);
}

/* ==========================================================================
   10. 分页与选项卡
   ========================================================================== */
.layui-laypage a,
.layui-laypage span {
  background: var(--glass-1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 9px;
  color: var(--text-secondary);
}
.layui-laypage a:hover { background: var(--glass-2); border-color: rgba(34, 211, 238, 0.45); color: var(--primary-light); }
.layui-laypage .layui-laypage-curr {
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  border-color: rgba(34, 211, 238, 0.55);
}
.layui-laypage .layui-laypage-curr em { color: #04121e; font-weight: 700; }

.layui-table-page { background: transparent; border-top: 1px solid var(--glass-hairline); }
.layui-table-page .layui-laypage-skip input {
  background: var(--bg-input);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  border-radius: 8px;
}
.layui-table-page .layui-laypage select {
  background: var(--glass-solid);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  border-radius: 8px;
}

.layui-tab { background: transparent; }
.layui-tab-title { border-bottom: 1px solid var(--glass-hairline); }
.layui-tab-title li { color: var(--text-muted); }
.layui-tab-title li.layui-this { color: var(--primary-light); font-weight: 600; }
.layui-tab-title li.layui-this::after {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  height: 2px;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.6);
}
.layui-tab-content { background: transparent; color: var(--text-primary); }

/* ==========================================================================
   11. 头像 / 链接 / 滚动条
   ========================================================================== */
.user-avatar {
  background: linear-gradient(135deg, #22d3ee, #a78bfa 60%, #f43f8e);
  color: #05070f;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.45);
}
.user-info { color: var(--text-secondary); }
a { color: var(--primary); }
a:hover { color: var(--primary-light); text-shadow: 0 0 10px rgba(34, 211, 238, 0.5); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: rgba(148, 184, 255, 0.03); }
::-webkit-scrollbar-thumb {
  background: rgba(34, 211, 238, 0.28);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(34, 211, 238, 0.5); background-clip: content-box; }

/* ==========================================================================
   12. 无障碍与降级
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body::before,
  .main::before { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* 不支持 backdrop-filter：提高不透明度兜底 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header,
  .sidebar { background: rgba(7, 11, 28, 0.95); }

  .stat-card,
  .stat-card-gradient,
  .metric-card,
  .layui-card,
  .layui-table-view,
  .table-toolbar { background: rgba(9, 14, 32, 0.92); border-color: rgba(34, 211, 238, 0.25); }

  .layui-layer,
  .search-dropdown,
  .layui-form-select dl { background: rgba(9, 14, 32, 0.98) !important; }
}