/* ==========================================================================
   BEH-ICE · Liquid Glass Design System
   苹果 iOS / macOS 风格液态玻璃 —— 五页共享
   仅表现层：不依赖任何 JS 逻辑；所有 id / 钩子 class 保持原样
   ========================================================================== */

/* ---------- 01 · Tokens（浅色默认） ---------- */
:root {
  /* 壁纸 */
  --wallpaper-base: linear-gradient(165deg, #E7EFFB 0%, #F4ECFB 46%, #E8F2FB 100%);
  --wallpaper-orbs:
    radial-gradient(42rem 32rem at -8% -10%, rgba(10,132,255,.28), transparent 60%),
    radial-gradient(38rem 30rem at 108% -6%, rgba(175,82,222,.22), transparent 62%),
    radial-gradient(46rem 34rem at 50% 118%, rgba(90,200,250,.26), transparent 60%);

  /* 玻璃材质（越浮越不透明） */
  --chrome-bg: rgba(245,247,252,.70);
  --topbar-bg: rgba(248,250,253,.70);
  --card-bg: rgba(255,255,255,.58);
  --card-bg-strong: rgba(255,255,255,.66);
  --modal-bg: rgba(251,251,253,.82);
  --portal-bg: rgba(251,251,253,.82);
  --control-bg: rgba(255,255,255,.55);
  --control-solid: #FFFFFF;
  --segment-track: rgba(120,120,128,.12);
  --segment-active: #FFFFFF;

  /* 玻璃边线 / 高光 / 分隔线 */
  --glass-border: rgba(255,255,255,.70);
  --glass-highlight: rgba(255,255,255,.75);
  --hairline: rgba(60,60,67,.12);
  --hairline-strong: rgba(60,60,67,.20);
  --hover-overlay: rgba(120,120,128,.10);

  /* 模糊 */
  --blur-chrome: 28px;
  --blur-card: 30px;
  --blur-portal: 40px;

  /* 文字层级 */
  --text-primary: #1C1C1E;
  --text-secondary: rgba(60,60,67,.60);
  --text-tertiary: rgba(60,60,67,.30);

  /* iOS 系统色 */
  --blue: #007AFF;  --blue-press: #0062D2;  --blue-tint: rgba(0,122,255,.12);  --blue-strong: #0040DD;  --blue-focus: rgba(0,122,255,.22);
  --green: #34C759; --green-press: #248A3D; --green-tint: rgba(52,199,89,.16);  --green-strong: #1E8742;
  --orange: #FF9500; --orange-press: #C93400; --orange-tint: rgba(255,149,0,.15); --orange-strong: #C23800;
  --red: #FF3B30;   --red-press: #D70015;   --red-tint: rgba(255,59,48,.13);    --red-strong: #D70015;
  --purple: #AF52DE; --purple-press: #8944AB; --purple-tint: rgba(175,82,222,.14); --purple-strong: #8944AB;
  --gray: #8E8E93;  --gray-tint: rgba(142,142,147,.14);
  --gray3: #C7C7CC;
  --teal: #30B0C7;
  --spinner-track: rgba(120,120,128,.18);

  /* 圆角 */
  --radius-control: 10px;
  --radius-card: 18px;
  --radius-modal: 24px;
  --radius-login: 28px;
  --radius-pill: 999px;

  /* 阴影分层 */
  --shadow-card: 0 1px 2px rgba(16,24,40,.05), 0 10px 30px rgba(16,24,40,.10);
  --shadow-raised: 0 2px 6px rgba(16,24,40,.07), 0 16px 40px rgba(16,24,40,.16);
  --shadow-portal: 0 2px 8px rgba(16,24,40,.12), 0 24px 64px rgba(16,24,40,.28);

  /* 动效 */
  --duration-fast: .18s;
  --duration: .28s;
  --duration-slow: .42s;
  --ease-ios: cubic-bezier(.32,.72,0,1);
  --ease-spring: cubic-bezier(.175,.885,.32,1.2);

  color-scheme: light;
}

/* ---------- 02 · Tokens（深色） ---------- */
:root[data-theme="dark"] {
  --wallpaper-base: linear-gradient(165deg, #06070B 0%, #0C0A12 46%, #07090F 100%);
  --wallpaper-orbs:
    radial-gradient(44rem 34rem at -8% -10%, rgba(10,132,255,.30), transparent 60%),
    radial-gradient(40rem 32rem at 108% -6%, rgba(191,90,242,.24), transparent 62%),
    radial-gradient(48rem 36rem at 50% 118%, rgba(48,209,88,.14), transparent 60%);

  --chrome-bg: rgba(20,21,26,.55);
  --topbar-bg: rgba(18,19,23,.55);
  --card-bg: rgba(29,30,36,.50);
  --card-bg-strong: rgba(24,25,30,.56);
  --modal-bg: rgba(32,33,38,.74);
  --portal-bg: rgba(32,33,38,.74);
  --control-bg: rgba(255,255,255,.06);
  --control-solid: #1E1F24;
  --segment-track: rgba(120,120,128,.24);
  --segment-active: rgba(120,120,128,.38);

  --glass-border: rgba(255,255,255,.10);
  --glass-highlight: rgba(255,255,255,.08);
  --hairline: rgba(235,235,245,.14);
  --hairline-strong: rgba(235,235,245,.22);
  --hover-overlay: rgba(120,120,128,.18);

  --text-primary: #F5F5F7;
  --text-secondary: rgba(235,235,245,.60);
  --text-tertiary: rgba(235,235,245,.30);

  --blue: #0A84FF;  --blue-press: #409CFF;  --blue-tint: rgba(10,132,255,.18);  --blue-strong: #409CFF;  --blue-focus: rgba(10,132,255,.32);
  --green: #30D158; --green-press: #30D158; --green-tint: rgba(48,209,88,.20);  --green-strong: #30D158;
  --orange: #FF9F0A; --orange-press: #FF9F0A; --orange-tint: rgba(255,159,10,.20); --orange-strong: #FFB340;
  --red: #FF453A;   --red-press: #FF453A;   --red-tint: rgba(255,69,58,.20);    --red-strong: #FF6961;
  --purple: #BF5AF2; --purple-press: #BF5AF2; --purple-tint: rgba(191,90,242,.20); --purple-strong: #D070FF;
  --gray: #98989F;  --gray-tint: rgba(152,152,159,.22);
  --gray3: #636366;
  --teal: #40C8E0;
  --spinner-track: rgba(120,120,128,.30);

  --shadow-card: 0 1px 2px rgba(0,0,0,.40), 0 12px 32px rgba(0,0,0,.50);
  --shadow-raised: 0 2px 8px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.58);
  --shadow-portal: 0 2px 10px rgba(0,0,0,.50), 0 28px 70px rgba(0,0,0,.65);

  color-scheme: dark;
}

/* theme.js 失败兜底：无 data-theme 时跟随系统 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --wallpaper-base: linear-gradient(165deg, #06070B 0%, #0C0A12 46%, #07090F 100%);
    --wallpaper-orbs:
      radial-gradient(44rem 34rem at -8% -10%, rgba(10,132,255,.30), transparent 60%),
      radial-gradient(40rem 32rem at 108% -6%, rgba(191,90,242,.24), transparent 62%),
      radial-gradient(48rem 36rem at 50% 118%, rgba(48,209,88,.14), transparent 60%);
    --chrome-bg: rgba(20,21,26,.55); --topbar-bg: rgba(18,19,23,.55);
    --card-bg: rgba(29,30,36,.50); --card-bg-strong: rgba(24,25,30,.56);
    --modal-bg: rgba(32,33,38,.74); --portal-bg: rgba(32,33,38,.74);
    --control-bg: rgba(255,255,255,.06); --control-solid: #1E1F24;
    --segment-track: rgba(120,120,128,.24); --segment-active: rgba(120,120,128,.38);
    --glass-border: rgba(255,255,255,.10); --glass-highlight: rgba(255,255,255,.08);
    --hairline: rgba(235,235,245,.14); --hairline-strong: rgba(235,235,245,.22);
    --hover-overlay: rgba(120,120,128,.18);
    --text-primary: #F5F5F7; --text-secondary: rgba(235,235,245,.60); --text-tertiary: rgba(235,235,245,.30);
    --blue: #0A84FF; --blue-press: #409CFF; --blue-tint: rgba(10,132,255,.18); --blue-strong: #409CFF; --blue-focus: rgba(10,132,255,.32);
    --green: #30D158; --green-press: #30D158; --green-tint: rgba(48,209,88,.20); --green-strong: #30D158;
    --orange: #FF9F0A; --orange-press: #FF9F0A; --orange-tint: rgba(255,159,10,.20); --orange-strong: #FFB340;
    --red: #FF453A; --red-press: #FF453A; --red-tint: rgba(255,69,58,.20); --red-strong: #FF6961;
    --purple: #BF5AF2; --purple-press: #BF5AF2; --purple-tint: rgba(191,90,242,.20); --purple-strong: #D070FF;
    --gray: #98989F; --gray-tint: rgba(152,152,159,.22); --gray3: #636366; --teal: #40C8E0;
    --spinner-track: rgba(120,120,128,.30);
    --shadow-card: 0 1px 2px rgba(0,0,0,.40), 0 12px 32px rgba(0,0,0,.50);
    --shadow-raised: 0 2px 8px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.58);
    --shadow-portal: 0 2px 10px rgba(0,0,0,.50), 0 28px 70px rgba(0,0,0,.65);
    color-scheme: dark;
  }
}

/* ---------- 03 · 旧变量别名（JS inline style 仍在引用，名字不可删） ---------- */
:root {
  --primary-color: var(--text-primary);
  --primary-blue: var(--text-primary);
  --secondary-color: var(--blue);
  --secondary-blue: var(--blue);
  --accent-color: var(--red);
  --accent-blue: var(--blue-press);
  --light-blue: var(--blue-tint);
  --success-green: var(--green);
  --warning-orange: var(--orange);
  --danger-red: var(--red);
  --gray-dark: var(--text-secondary);
  --gray-light: var(--gray3);
  --border-radius: 12px;
  --shadow-light: var(--shadow-card);
  --shadow-medium: var(--shadow-raised);
}

/* ---------- 04 · Reset / 壁纸 / 滚动条 ---------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Segoe UI Variable", "Segoe UI", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--wallpaper-base);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--wallpaper-orbs);
}

::selection { background: var(--blue-tint); color: var(--blue-strong); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(120,120,128,.36);
  border-radius: 8px;
  border: 2.5px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(120,120,128,.55); background-clip: content-box; border: 2.5px solid transparent; }
html { scrollbar-width: thin; scrollbar-color: rgba(120,120,128,.4) transparent; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- 05 · 布局骨架 ---------- */
.app-container { display: flex; min-height: 100vh; }

.main-content {
  margin-left: 250px;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.content-area { padding: 24px; flex: 1; }

/* ---------- 06 · Sidebar（macOS 半透明侧边栏） ---------- */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 250px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--chrome-bg);
  -webkit-backdrop-filter: blur(var(--blur-chrome)) saturate(180%);
  backdrop-filter: blur(var(--blur-chrome)) saturate(180%);
  border-right: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  transition: transform var(--duration-slow) var(--ease-ios);
}

.sidebar-header { padding: 22px 18px 14px; flex: none; }

.brand { display: flex; align-items: center; gap: 12px; }

.brand-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex: none;
  background: var(--blue-tint);
  color: var(--blue);
}

.brand-text h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.2px; }
.brand-text p { margin: 2px 0 0; font-size: 11px; font-weight: 500; color: var(--text-secondary); }

.nav-menu { flex: none; padding: 4px 0; }

.nav-item { display: block; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 2px 10px;
  padding: 9px 13px;
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  transition: background var(--duration-fast) var(--ease-ios),
              color var(--duration-fast) var(--ease-ios);
}
.nav-link i { font-size: 17px; line-height: 1; width: 22px; text-align: center; flex: none; }
.nav-link:hover { background: var(--hover-overlay); color: var(--text-primary); text-decoration: none; }
.nav-link.active {
  background: var(--segment-active);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.10), inset 0 0 0 .5px var(--hairline);
}

/* ---------- 07 · 侧栏底部主题切换件 ---------- */
.sidebar-theme { margin-top: auto; padding: 10px 14px 16px; border-top: 1px solid var(--hairline); flex: none; }

.theme-switch {
  display: flex;
  gap: 2px;
  padding: 2.5px;
  background: var(--segment-track);
  border-radius: 10px;
}

.theme-option {
  flex: 1;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast) var(--ease-ios),
              color var(--duration-fast) var(--ease-ios);
}
.theme-option:hover { color: var(--text-primary); }

html[data-theme-mode="light"] .theme-option[data-theme-option="light"],
html[data-theme-mode="auto"]  .theme-option[data-theme-option="auto"],
html[data-theme-mode="dark"]  .theme-option[data-theme-option="dark"] {
  background: var(--segment-active);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,.15), inset 0 0 0 .5px var(--hairline);
}

/* ---------- 08 · Top Bar（毛玻璃顶栏） ---------- */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 22px;
  background: var(--topbar-bg);
  -webkit-backdrop-filter: blur(var(--blur-chrome)) saturate(180%);
  backdrop-filter: blur(var(--blur-chrome)) saturate(180%);
  border-bottom: 1px solid var(--hairline);
}

.page-title h1 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.2px; }
.page-title p { margin: 2px 0 0; font-size: 12px; color: var(--text-secondary); }

.menu-toggle {
  display: none;
  width: 38px; height: 38px;
  border: 0;
  border-radius: 10px;
  background: var(--blue-tint);
  color: var(--blue);
  font-size: 19px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex: none;
}

.user-menu { display: flex; align-items: center; gap: 12px; }
.user-info { text-align: right; line-height: 1.25; }
.user-name { font-size: 13px; font-weight: 600; }
.user-role { font-size: 11px; color: var(--text-secondary); }
.user-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-tint);
  color: var(--blue);
  font-size: 23px;
  cursor: pointer;
  flex: none;
}

/* ---------- 09 · 页头 / 玻璃面板 ---------- */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.page-header h2 { font-size: 22px; font-weight: 700; letter-spacing: -.3px; margin: 0; color: var(--text-primary); }
.page-header p { font-size: 13px; color: var(--text-secondary); margin: 4px 0 0; }
.page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* 玻璃面板统一样式 */
.stat-card,
.chart-card,
.machines-table-container,
.history-table-container,
.filter-section,
.tabs-container,
.recent-section {
  background: var(--card-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card), inset 0 1px 0 var(--glass-highlight);
  -webkit-backdrop-filter: blur(var(--blur-card)) saturate(180%);
  backdrop-filter: blur(var(--blur-card)) saturate(180%);
}

/* 统计卡片 */
.stats-section { margin-bottom: 22px; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.stat-card {
  padding: 20px;
  cursor: pointer;
  transition: transform var(--duration) var(--ease-ios),
              box-shadow var(--duration) var(--ease-ios);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised), inset 0 1px 0 var(--glass-highlight); }
.stat-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.stat-label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.stat-value {
  margin-top: 3px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}
.stat-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex: none;
}
.stat-card.total .stat-icon { background: var(--blue-tint); color: var(--blue); }
.stat-card.online .stat-icon { background: var(--green-tint); color: var(--green); }
.stat-card.low-balance .stat-icon { background: var(--orange-tint); color: var(--orange); }
.stat-trend {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  color: var(--text-secondary);
}
.stat-trend i { font-size: 13px; }

/* 图表卡片 */
.charts-section { margin-bottom: 22px; }
.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 18px;
}
.chart-card { padding: 20px; }
.chart-header { margin-bottom: 12px; }
.chart-title { margin: 0; font-size: 16px; font-weight: 600; }
.chart-container { position: relative; height: 250px; }

/* 表格容器 / 筛选区 / 最近记录 */
.machines-table-container,
.history-table-container { padding: 18px 20px; }

.table-header { margin-bottom: 10px; }
.section-title { margin: 0; font-size: 16px; font-weight: 600; }

.filter-section { padding: 20px; margin-bottom: 20px; }
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  align-items: end;
}

.recent-section { padding: 10px 20px 14px; margin-top: 4px; }
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0 10px;
}

/* ---------- 10 · 表格 ---------- */
.table-responsive { -webkit-overflow-scrolling: touch; }

.recent-table,
.machines-table,
.history-table { width: 100%; border-collapse: collapse; }

.recent-table th,
.machines-table th,
.history-table th {
  text-align: left;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  border-bottom: 1px solid var(--hairline-strong);
}

.recent-table td,
.machines-table td,
.history-table td {
  padding: 11px 12px;
  font-size: 14px;
  vertical-align: middle;
  border-bottom: 1px solid var(--hairline);
}

.recent-table tbody tr:last-child td,
.machines-table tbody tr:last-child td,
.history-table tbody tr:last-child td { border-bottom: 0; }

.recent-table tbody tr,
.machines-table tbody tr,
.history-table tbody tr { transition: background var(--duration-fast) var(--ease-ios); }

.recent-table tbody tr:hover,
.machines-table tbody tr:hover,
.history-table tbody tr:hover { background: var(--hover-overlay); }

/* ---------- 11 · 徽章（iOS 胶囊 tint 风格） ---------- */
.status-badge,
.type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.status-badge i, .type-badge i { font-size: 11px; line-height: 1; }

.status-success, .status-online { background: var(--green-tint); color: var(--green-strong); }
.status-pending, .status-low-balance { background: var(--orange-tint); color: var(--orange-strong); }
.status-failed { background: var(--red-tint); color: var(--red-strong); }
.status-offline { background: var(--gray-tint); color: var(--gray); }

.type-online { background: var(--blue-tint); color: var(--blue-strong); }
.type-passcode { background: var(--purple-tint); color: var(--purple-strong); }

/* 通用 Bootstrap 徽章（历史表 Passcode 列） */
.badge { font-weight: 600; }
.badge.bg-secondary {
  background: var(--segment-track) !important;
  color: var(--text-primary) !important;
}

/* ---------- 12 · 按钮 ---------- */
.btn-primary, .btn-success, .btn-outline, .btn-export, .btn-generate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-control);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--duration-fast) var(--ease-ios),
              box-shadow var(--duration-fast) var(--ease-ios),
              transform var(--duration-fast) var(--ease-ios),
              opacity var(--duration-fast) var(--ease-ios);
}
.btn-primary i, .btn-success i, .btn-outline i, .btn-export i, .btn-generate i { font-size: 15px; line-height: 1; }

.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--blue-press); color: #fff; }

.btn-success { background: var(--green); color: #fff; }
.btn-success:hover, .btn-success:focus { background: var(--green-press); color: #fff; }

.btn-export { background: var(--teal); color: #fff; }
.btn-export:hover, .btn-export:focus { background: var(--blue-press); color: #fff; }

.btn-generate { background: var(--orange); color: #fff; }
.btn-generate:hover, .btn-generate:focus { background: var(--orange-press); color: #fff; }

.btn-outline {
  background: var(--control-bg);
  border-color: var(--hairline);
  color: var(--blue);
}
.btn-outline:hover, .btn-outline:focus { background: var(--hover-overlay); color: var(--blue-strong); }

.btn-primary:active, .btn-success:active, .btn-outline:active,
.btn-export:active, .btn-generate:active,
.btn:active, .btn-login:active { transform: scale(.97); }

.btn-primary[disabled], .btn-success[disabled], .btn-outline[disabled],
.btn-export[disabled], .btn-generate[disabled],
.btn:disabled, .btn-login[disabled], [disabled] {
  opacity: .42;
  cursor: not-allowed;
  pointer-events: none;
}

/* Bootstrap .btn 系列（modal 页脚等） */
.btn {
  border-radius: var(--radius-control);
  font-weight: 600;
  transition: background var(--duration-fast) var(--ease-ios),
              border-color var(--duration-fast) var(--ease-ios),
              color var(--duration-fast) var(--ease-ios),
              transform var(--duration-fast) var(--ease-ios),
              opacity var(--duration-fast) var(--ease-ios);
}
.btn.btn-secondary {
  background: var(--segment-track);
  border-color: transparent;
  color: var(--text-primary);
}
.btn.btn-secondary:hover, .btn.btn-secondary:focus { background: var(--hover-overlay); color: var(--text-primary); }
.btn.btn-primary { background: var(--blue); border-color: transparent; color: #fff; }
.btn.btn-primary:hover, .btn.btn-primary:focus { background: var(--blue-press); color: #fff; }
.btn.btn-success { background: var(--green); border-color: transparent; color: #fff; }
.btn.btn-success:hover, .btn.btn-success:focus { background: var(--green-press); color: #fff; }

/* View All 小按钮 */
.view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--control-bg);
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-ios);
}
.view-all-btn:hover { background: var(--hover-overlay); }
.view-all-btn i { font-size: 14px; }

/* 操作图标钮 */
.action-icons { display: inline-flex; align-items: center; gap: 5px; }
.action-btn {
  width: 34px; height: 34px;
  border: 0;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-ios),
              background var(--duration-fast) var(--ease-ios);
}
.action-btn:hover { transform: translateY(-2px); }
.view-btn { background: var(--blue-tint); color: var(--blue); }
.edit-btn { background: var(--orange-tint); color: var(--orange-strong); }
.recharge-btn { background: var(--green-tint); color: var(--green-strong); }
.delete-btn { background: var(--red-tint); color: var(--red-strong); }

/* 分页 */
.pagination-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.pagination-info { font-size: 13px; color: var(--text-secondary); }
.pagination { display: flex; align-items: center; gap: 5px; margin: 0; }
.page-btn {
  min-width: 34px; height: 34px;
  padding: 0 8px;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  background: var(--control-bg);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast) var(--ease-ios),
              opacity var(--duration-fast) var(--ease-ios);
}
.page-btn:hover:not([disabled]):not(.active) { background: var(--hover-overlay); }
.page-btn.active { background: var(--blue); border-color: transparent; color: #fff; }
.page-btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ---------- 13 · 表单 ---------- */
.form-group { margin-bottom: 0; }
.form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.required-star { color: var(--red); }
.form-text { font-size: 12px; color: var(--text-tertiary); }

.form-control, .form-select {
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
  color: var(--text-primary);
  background-color: var(--control-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  transition: border-color var(--duration-fast) var(--ease-ios),
              box-shadow var(--duration-fast) var(--ease-ios),
              background-color var(--duration-fast) var(--ease-ios);
}
.form-control::placeholder { color: var(--text-tertiary); }
.form-control:focus, .form-select:focus {
  outline: none;
  border-color: var(--blue);
  background-color: var(--control-bg);
  box-shadow: 0 0 0 3px var(--blue-focus);
}
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%238E8E93' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 14px;
  padding-right: 2.4rem;
}
.form-select option { background: var(--control-solid); color: var(--text-primary); }
textarea.form-control { resize: vertical; }

/* 搜索框 */
.search-container { position: relative; }
.search-input {
  width: 230px;
  max-width: 100%;
  padding: 9px 14px 9px 36px;
  font-size: 14px;
  color: var(--text-primary);
  background-color: var(--control-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  transition: border-color var(--duration-fast) var(--ease-ios),
              box-shadow var(--duration-fast) var(--ease-ios);
}
.search-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-focus); }
.search-input::placeholder { color: var(--text-tertiary); }
.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-size: 14px;
  pointer-events: none;
}

/* ---------- 14 · 自研 Tabs → iOS Segmented Control ---------- */
.tabs-container { padding: 20px; }

.tabs-nav {
  display: flex;
  gap: 2px;
  max-width: 430px;
  margin: 0 auto 22px;
  padding: 3px;
  background: var(--segment-track);
  border-radius: 11px;
}
.tab-btn {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 8px 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background var(--duration) var(--ease-ios),
              color var(--duration) var(--ease-ios);
}
.tab-btn i { font-size: 15px; }
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active {
  background: var(--segment-active);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,.14), inset 0 0 0 .5px var(--hairline);
}

.tab-content { display: none; }
.tab-content.active { display: block; animation: lg-fade var(--duration) var(--ease-ios); }

@keyframes lg-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- 15 · 状态横幅 / Alert ---------- */
.status-message {
  display: none;
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
}
.status-message.status-success { background: var(--green-tint); color: var(--green-strong); }
.status-message.status-error { background: var(--red-tint); color: var(--red-strong); }
.status-message.status-info { background: var(--blue-tint); color: var(--blue-strong); }

.alert {
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
}
.alert-danger { background: var(--red-tint); color: var(--red-strong); }
.alert-success { background: var(--green-tint); color: var(--green-strong); }
.alert-info { background: var(--blue-tint); color: var(--blue-strong); }

/* 登录卡内的两个 alert 默认必须隐藏（JS 用 inline display 控制） */
.login-card .alert { display: none; margin-bottom: 16px; }

/* ---------- 16 · 机器信息卡 / 时长 / JSON / Passcode ---------- */
.machine-selection { margin-bottom: 8px; }

.machine-info-card {
  margin-top: 14px;
  padding: 16px;
  background: var(--blue-tint);
  border-radius: 14px;
}

.time-selection { padding-top: 20px; }
.time-selection h3 { font-size: 17px; font-weight: 700; color: var(--text-primary); }
.time-inputs { display: flex; gap: 12px; }
.time-input-group { flex: 1; display: flex; flex-direction: column; }
.time-input {
  padding: 12px 8px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  background-color: var(--control-bg);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--duration-fast) var(--ease-ios),
              box-shadow var(--duration-fast) var(--ease-ios);
}
.time-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-focus); }
.time-input::-webkit-outer-spin-button,
.time-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.time-input { -moz-appearance: textfield; appearance: textfield; }
.time-label { margin-top: 7px; text-align: center; font-size: 12px; font-weight: 500; color: var(--text-secondary); }

.total-minutes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 12px 16px;
  background: var(--blue-tint);
  border-radius: 12px;
}
.total-label { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.total-value { font-size: 16px; font-weight: 700; color: var(--blue-strong); font-variant-numeric: tabular-nums; }

/* JSON 命令 */
.json-preview-container { margin-top: 18px; }
.json-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.json-title { font-size: 14px; font-weight: 600; }
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 0;
  border-radius: 9px;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-ios);
}
.copy-btn:hover { background: var(--blue-press); }
.json-code {
  margin: 0;
  padding: 16px;
  background: #14151A;
  color: #F5F5F7;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  font-size: 13px;
  line-height: 1.6;
  overflow: auto;
}

/* 密码展示 —— recharge 弹窗：大紫块 */
.passcode-container { text-align: center; }
.passcode-display { display: flex; gap: 12px; justify-content: center; }
#passcodeConfirmModal .passcode-part {
  flex: 1;
  max-width: 130px;
  padding: 16px 8px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--purple), var(--purple-press));
  color: #fff;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 4px;
  text-align: center;
  box-shadow: 0 8px 22px rgba(175,82,222,.35);
}

/* history 详情弹窗：紫色 tint 芯片 */
#viewDetailsModal .passcode-part {
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--purple-tint);
  color: var(--purple-strong);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 2px;
}

/* 验证码输入 */
.verificationCode-input-group { margin-top: 20px; }
.verificationCode-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 3px;
  text-align: center;
  color: var(--text-primary);
  background-color: var(--control-bg);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  transition: border-color var(--duration-fast) var(--ease-ios),
              box-shadow var(--duration-fast) var(--ease-ios);
}
.verificationCode-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-focus); }
.verificationCode-input::placeholder { color: var(--text-tertiary); letter-spacing: 2px; }

/* ---------- 17 · Info 网格 / 加载态 ---------- */
.info-grid, .details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 20px;
}
.info-item, .details-item { min-width: 0; }
.info-label, .details-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 3px;
}
.info-value, .details-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-word;
}

.loading { text-align: center; padding: 34px 16px; color: var(--text-secondary); }
.spinner {
  display: inline-block;
  width: 19px; height: 19px;
  border: 2.5px solid var(--spinner-track);
  border-top-color: var(--blue);
  border-radius: 50%;
  vertical-align: middle;
  animation: lg-spin .75s linear infinite;
}
@keyframes lg-spin { to { transform: rotate(360deg); } }

.no-data { text-align: center; padding: 48px 20px; color: var(--text-tertiary); }
.no-data i { display: block; font-size: 42px; margin-bottom: 10px; line-height: 1; }
.no-data p { margin: 0 0 12px; font-size: 14px; }

/* 按钮内白色小 spinner */
.btn .spinner,
.btn-primary .spinner,
.btn-success .spinner {
  width: 15px; height: 15px;
  border-width: 2px;
  border-color: rgba(255,255,255,.45);
  border-top-color: #fff;
}

/* ---------- 18 · Bootstrap Modal ---------- */
.modal-content {
  background: var(--modal-bg);
  -webkit-backdrop-filter: blur(var(--blur-portal)) saturate(190%);
  backdrop-filter: blur(var(--blur-portal)) saturate(190%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-portal), inset 0 1px 0 var(--glass-highlight);
  overflow: hidden;
}
.modal-header {
  padding: 16px 20px;
  background: transparent;
  border-bottom: 1px solid var(--hairline);
}
.modal-title { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.modal-body { padding: 20px; color: var(--text-primary); }
.modal-body > p:first-child { margin-top: 0; }
.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--hairline);
}

.modal-backdrop.show {
  opacity: 1;
  background: rgba(0,0,0,.34);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
:root[data-theme="dark"] .modal-backdrop.show { background: rgba(0,0,0,.58); }

/* 关闭钮：浅色主题用深色图标，深色主题反色 */
.btn-close { background-size: .9em; opacity: .75; }
.btn-close:focus { box-shadow: none; opacity: .9; }
:root[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(1) brightness(2.2);
  opacity: .85;
}
/* btn-close-white 在浅色玻璃头部会隐形 → 浅色下改回深色图标 */
:root[data-theme="light"] .btn-close-white { filter: none; }
:root[data-theme="dark"] .btn-close-white { filter: invert(1) grayscale(1) brightness(2.2); opacity: .85; }

/* ---------- 19 · Popover ---------- */
.popover {
  background: var(--portal-bg);
  -webkit-backdrop-filter: blur(34px) saturate(180%);
  backdrop-filter: blur(34px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  box-shadow: var(--shadow-portal);
}
.popover-body { padding: 12px 14px; color: var(--text-primary); font-size: 13px; }
.popover .popover-arrow { display: none; }

/* ---------- 20 · daterangepicker（jQuery 插件 portal） ---------- */
.daterangepicker {
  background: var(--portal-bg);
  -webkit-backdrop-filter: blur(36px) saturate(180%);
  backdrop-filter: blur(36px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: var(--shadow-portal), inset 0 1px 0 var(--glass-highlight);
  padding: 0;
  font-family: inherit;
}
.daterangepicker::before, .daterangepicker::after { display: none; }

.daterangepicker .calendar-table { background: transparent; border: 0; }
.daterangepicker .calendar-table table { font-size: 13px; color: var(--text-primary); }
.daterangepicker .calendar-table th {
  border: 0;
  padding: 5px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}
.daterangepicker .calendar-table td { border: 0; padding: 2px; }
.daterangepicker td.week, .daterangepicker th.week { color: var(--text-tertiary); }

.daterangepicker .calendar-table .day {
  display: inline-block;
  width: 28px; height: 28px;
  line-height: 28px;
  padding: 0;
  border-radius: 8px;
  color: var(--text-primary);
  text-align: center;
  transition: background var(--duration-fast) var(--ease-ios);
}
.daterangepicker td:hover .day { background: var(--hover-overlay); }
.daterangepicker td.off .day,
.daterangepicker td.off { color: var(--text-tertiary); background: transparent; }

.daterangepicker td.today .day {
  color: var(--blue);
  box-shadow: inset 0 0 0 1.2px var(--blue);
}
.daterangepicker td.active .day,
.daterangepicker td.active:hover .day {
  background: var(--blue);
  color: #fff;
  box-shadow: none;
}
.daterangepicker td.in-range { background: var(--blue-tint); border-radius: 0; }
.daterangepicker td.in-range .day { background: transparent; }
.daterangepicker td.start-date { border-radius: 9px 0 0 9px; }
.daterangepicker td.end-date { border-radius: 0 9px 9px 0; }
.daterangepicker td.start-date.end-date { border-radius: 9px; }

.daterangepicker .prev span,
.daterangepicker .next span { color: var(--blue); }
.daterangepicker .btn-default { border: 0; background: transparent; color: var(--blue); font-weight: 500; }

.daterangepicker .drp-selected {
  display: block;
  padding: 9px 14px 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}
.daterangepicker .drp-buttons {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--hairline);
  text-align: right;
}
.daterangepicker .applyBtn,
.daterangepicker .cancelBtn {
  padding: 6px 15px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: 0;
}
.daterangepicker .applyBtn { background: var(--blue); color: #fff; margin-left: 7px; }
.daterangepicker .applyBtn:hover { background: var(--blue-press); }
.daterangepicker .cancelBtn { background: var(--segment-track); color: var(--text-primary); }
.daterangepicker .cancelBtn:hover { background: var(--hover-overlay); }

/* 左侧预设 ranges */
.daterangepicker.show-ranges.single .ranges,
.daterangepicker.show-ranges .drp-calendar.left { padding-top: 0; }
.daterangepicker .ranges { padding: 8px; }
.daterangepicker .ranges ul { margin: 0; padding: 0; list-style: none; }
.daterangepicker .ranges li {
  margin: 0;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-ios);
}
.daterangepicker .ranges li:hover { background: var(--hover-overlay); }
.daterangepicker .ranges li.active { background: var(--blue-tint); color: var(--blue-strong); font-weight: 600; }

.daterangepicker .range_inputs { padding: 10px 12px 12px; border-top: 1px solid var(--hairline); }
.daterangepicker .grp-title { color: var(--text-secondary); font-weight: 600; }

/* ---------- 登录页专属 ---------- */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}
.login-container { width: 100%; max-width: 400px; }
.login-card {
  background: var(--modal-bg);
  -webkit-backdrop-filter: blur(var(--blur-portal)) saturate(190%);
  backdrop-filter: blur(var(--blur-portal)) saturate(190%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-login);
  box-shadow: var(--shadow-portal), inset 0 1px 0 var(--glass-highlight);
  overflow: hidden;
  transition: transform var(--duration) var(--ease-ios),
              box-shadow var(--duration) var(--ease-ios);
}
.login-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-portal); }

.login-header { padding: 34px 24px 6px; text-align: center; }
.login-header::before {
  content: "\F491";
  font-family: "bootstrap-icons";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  margin: 0 auto 14px;
  border-radius: 20px;
  background: var(--blue-tint);
  color: var(--blue);
  font-size: 36px;
}
.login-header h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.3px; }
.login-header p { margin: 6px 0 0; font-size: 13px; color: var(--text-secondary); }

.login-body { padding: 22px 28px 28px; }

.btn-login {
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-ios),
              transform var(--duration-fast) var(--ease-ios);
}
.btn-login:hover { background: var(--blue-press); }

.language-switcher { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
.language-btn {
  border: 0;
  background: transparent;
  padding: 5px 13px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-ios),
              color var(--duration-fast) var(--ease-ios);
}
.language-btn.active { background: var(--blue-tint); color: var(--blue); font-weight: 600; }

.footer-text { margin-top: 16px; text-align: center; font-size: 11px; color: var(--text-tertiary); }

/* ---------- 21 · 响应式 ---------- */
@media (max-width: 992px) {
  .sidebar { transform: translateX(-250px); }
  .sidebar.active { transform: translateX(0); box-shadow: var(--shadow-portal); }
  .main-content { margin-left: 0; }
  .menu-toggle { display: inline-flex; }
  .charts-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .content-area { padding: 16px; }
  .top-bar { padding: 10px 16px; }
  .stats-grid { grid-template-columns: 1fr; }
  .user-info { display: none; }
  .pagination-container { flex-direction: column; align-items: stretch; }
  .pagination { justify-content: center; flex-wrap: wrap; }

  /* 移动端降低模糊，省电 */
  .sidebar, .top-bar {
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
  }
  .stat-card, .chart-card, .machines-table-container,
  .history-table-container, .filter-section, .tabs-container, .recent-section,
  .popover, .daterangepicker {
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
  }
  .modal-content, .login-card {
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    backdrop-filter: blur(28px) saturate(170%);
  }

  .search-input { width: 100%; }
  .page-actions { width: 100%; }
  .page-actions .search-container { flex: 1; }
}

@media (max-width: 480px) {
  .time-inputs { gap: 8px; }
  .time-input { font-size: 18px; padding: 10px 4px; }
  .machines-table-container, .history-table-container { padding: 14px; }
  .tabs-container { padding: 16px; }

  /* daterangepicker 小屏防横溢 */
  .daterangepicker { max-width: calc(100vw - 16px); }
  .daterangepicker .drp-calendar { max-width: 50%; }
  .daterangepicker .calendar-table .day { width: 24px; height: 24px; line-height: 24px; font-size: 12px; }
}

/* ---------- 22 · 无 backdrop-filter 降级（近实色） ---------- */
@supports not ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))) {
  .sidebar { background: rgba(244,246,250,.94); }
  .top-bar { background: rgba(248,250,253,.94); }
  .stat-card, .chart-card, .filter-section, .tabs-container, .recent-section,
  .machines-table-container, .history-table-container { background: rgba(255,255,255,.96); }
  .modal-content, .login-card, .popover, .daterangepicker { background: #FBFBFD; }
  .form-control, .form-select, .search-input, .time-input, .verificationCode-input {
    background-color: #FFFFFF;
  }

  :root[data-theme="dark"] .sidebar { background: rgba(18,19,23,.94); }
  :root[data-theme="dark"] .top-bar { background: rgba(18,19,23,.94); }
  :root[data-theme="dark"] .stat-card, :root[data-theme="dark"] .chart-card,
  :root[data-theme="dark"] .filter-section, :root[data-theme="dark"] .tabs-container,
  :root[data-theme="dark"] .recent-section,
  :root[data-theme="dark"] .machines-table-container,
  :root[data-theme="dark"] .history-table-container { background: rgba(28,29,34,.96); }
  :root[data-theme="dark"] .modal-content, :root[data-theme="dark"] .login-card,
  :root[data-theme="dark"] .popover, :root[data-theme="dark"] .daterangepicker { background: #202126; }
  :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select,
  :root[data-theme="dark"] .search-input, :root[data-theme="dark"] .time-input,
  :root[data-theme="dark"] .verificationCode-input { background-color: rgba(255,255,255,.07); }
}

/* ---------- 23 · reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .stat-card:hover, .login-card:hover { transform: none; }
}