/* ==========================================================================
   RideLab 设计系统 (ridelab.css)
   --------------------------------------------------------------------------
   分层结构：
     1. Design Token（间距 / 圆角 / 字号 / 阴影 / 动效）
     2. 主题变量（Light + Dark，统一 CSS Variables）
     3. 基础层（Reset、Typography、滚动条）
     4. 布局层（Shell / Sidebar / Topbar / Content）
     5. 组件层（Button / Card / Stat / Table / Form / Badge / Empty ...）
     6. 页面增强（Auth / Insight / Timeline / Live）
     7. 响应式与打印

   约束：本项目为 Django 模板 + Bootstrap 5.3 渲染，本文件只负责视觉，
   不包含任何业务逻辑，也不改变原有 DOM 结构语义与接口。
   主题切换由 base.html 中的早期脚本写入 <html data-theme>，
   同时同步 data-bs-theme，使 Bootstrap 自身的组件（下拉菜单等）跟随主题。
   ========================================================================== */

/* ========================================================== 1. Design Token */
:root {
  /* ---- 间距（4px 基准栅格） ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;

  /* ---- 圆角 ---- */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---- 字号 ---- */
  --fs-h2: 19px;        /* 模块 / 卡片组标题 */
  --fs-h3: 16px;        /* 卡片标题 */
  --fs-body: 14px;      /* 正文 */
  --fs-sm: 13px;        /* 次要正文 */
  --fs-xs: 12px;        /* 辅助说明 */
  --fs-metric: 30px;    /* 核心数字 */
  --fs-page-title: 20px;/* Topbar 页面标题 */

  /* ---- 布局尺寸 ---- */
  --sidebar-w: 248px;
  --topbar-h: 68px;
  --content-max: 1680px;   /* 2K 屏避免内容过度收窄，同时防止无限拉宽 */
  --content-x: 32px;    /* 主内容左右留白 */

  /* ---- 动效 ---- */
  --t-fast: 120ms ease;
  --t-base: 180ms ease;
  --t-theme: 200ms ease;
}

/* ========================================================= 2. 主题变量 */
/* ---------------------------------------------------------- 2.1 Light */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* 层级背景 */
  --bg-primary: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --surface-3: #f1f3f6;
  --surface-hover: #f4f6f9;

  /* 文字层级 */
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;

  /* 描边 */
  --border: #e5e7eb;
  --border-strong: #d8dce3;
  --divider: #eef0f3;

  /* 品牌与语义色 */
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-active: #1e40af;
  --primary-soft: rgba(37, 99, 235, 0.09);
  --primary-soft-strong: rgba(37, 99, 235, 0.16);
  --primary-contrast: #ffffff;
  --accent: #0ea5b7;

  --success: #059669;
  --success-soft: rgba(5, 150, 105, 0.1);
  --warning: #b45309;
  --warning-soft: rgba(217, 119, 6, 0.12);
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.09);
  --info: #0369a1;
  --info-soft: rgba(2, 132, 199, 0.1);

  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.18);

  /* 侧边栏（浅色主题下与主背景形成层级，而非反色重块） */
  --sidebar-bg: #ffffff;
  --sidebar-border: #e8eaee;
  --sidebar-text: #4b5563;
  --sidebar-text-strong: #111827;
  --sidebar-muted: #9ca3af;
  --sidebar-hover: #f3f5f8;
  --sidebar-active-bg: rgba(37, 99, 235, 0.09);
  --sidebar-active-text: #1d4ed8;
  --sidebar-brand: #2563eb;

  /* 阴影：浅色主题极轻 */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.1);

  /* 图表 / 滚动条 */
  --scrollbar-thumb: #d5d9e0;
  --scrollbar-thumb-hover: #b9bfc9;
  --chart-axis: #98a2b3;
  --chart-grid: #edf0f4;
  --chart-tooltip-bg: rgba(17, 24, 39, 0.94);
  --chart-tooltip-text: #f9fafb;
  --chart-label: #475467;
  --chart-empty: #e5e7eb;
  --chart-pie-border: #ffffff;

  --backdrop: rgba(16, 24, 40, 0.42);
  --table-header-bg: #fafbfc;
  --table-row-hover: #f8fafc;
}

/* ---------------------------------------------------------- 2.2 Dark */
[data-theme="dark"] {
  color-scheme: dark;

  --bg-primary: #0d1117;
  --surface: #151a21;
  --surface-2: #1b212a;
  --surface-3: #202834;
  --surface-hover: #1e2630;

  --text-primary: #f3f4f6;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;

  --border: #2a313c;
  --border-strong: #38404d;
  --divider: #232a34;

  --primary: #4f8cff;
  --primary-hover: #6b9dff;
  --primary-active: #3d78ea;
  --primary-soft: rgba(79, 140, 255, 0.14);
  --primary-soft-strong: rgba(79, 140, 255, 0.24);
  --primary-contrast: #ffffff;
  --accent: #35c2d4;

  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.14);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.14);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.14);
  --info: #60a5fa;
  --info-soft: rgba(96, 165, 250, 0.14);

  --focus-ring: 0 0 0 3px rgba(79, 140, 255, 0.3);

  --sidebar-bg: #10151c;
  --sidebar-border: #212833;
  --sidebar-text: #a7b0bd;
  --sidebar-text-strong: #f3f4f6;
  --sidebar-muted: #6b7280;
  --sidebar-hover: #1a212b;
  --sidebar-active-bg: rgba(79, 140, 255, 0.14);
  --sidebar-active-text: #8fb4ff;
  --sidebar-brand: #4f8cff;

  /* 深色主题：基本不使用阴影，靠背景与描边区分层级 */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);

  --scrollbar-thumb: #333b47;
  --scrollbar-thumb-hover: #414b59;
  --chart-axis: #6b7280;
  --chart-grid: #262e39;
  --chart-tooltip-bg: rgba(32, 40, 52, 0.96);
  --chart-tooltip-text: #f3f4f6;
  --chart-label: #9ca3af;
  --chart-empty: #2a313c;
  --chart-pie-border: #151a21;

  --backdrop: rgba(0, 0, 0, 0.6);
  --table-header-bg: #191f27;
  --table-row-hover: #1e2630;
}

/* ------------------------------- 2.3 旧变量名兼容（保持既有类名可用） */
:root,
[data-theme="light"],
[data-theme="dark"] {
  --rl-bg: var(--bg-primary);
  --rl-surface: var(--surface);
  --rl-border: var(--border);
  --rl-ink: var(--text-primary);
  --rl-ink-soft: var(--text-primary);
  --rl-muted: var(--text-secondary);
  --rl-muted-light: var(--text-muted);
  --rl-primary: var(--primary);
  --rl-primary-dark: var(--primary-hover);
  --rl-accent: var(--accent);
  --rl-accent-soft: var(--primary-soft);
  --rl-success: var(--success);
  --rl-warning: var(--warning);
  --rl-danger: var(--danger);
  --rl-sidebar: var(--sidebar-bg);
  --rl-sidebar-hover: var(--sidebar-hover);
  --rl-radius: var(--radius-lg);
  --rl-radius-sm: var(--radius-md);
  --rl-shadow: var(--shadow-md);
  --rl-shadow-hover: var(--shadow-md);
  --rl-sidebar-width: var(--sidebar-w);
}

/* --------------------- 2.4 Bootstrap 变量桥接（让内置组件跟随主题） */
:root,
[data-theme="light"],
[data-theme="dark"] {
  --bs-body-bg: var(--bg-primary);
  --bs-body-color: var(--text-primary);
  --bs-body-font-size: var(--fs-body);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-color: var(--text-muted);
  --bs-emphasis-color: var(--text-primary);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-hover);
  --bs-primary: var(--primary);
  --bs-danger: var(--danger);
  --bs-success: var(--success);
  --bs-warning: var(--warning);
  --bs-info: var(--info);
}

/* ============================================================ 3. 基础层 */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

/* 主题切换时只过渡颜色类属性，避免整页闪烁 */
body,
.rl-sidebar,
.rl-topbar,
.rl-card,
.rl-stat,
.rl-filter,
.rl-table th,
.rl-table td,
.rl-session-row,
.rl-detail-item,
.form-control,
.form-select,
.btn,
.rl-badge,
.rl-live,
.rl-progress,
.rl-insight,
.dropdown-menu {
  transition: background-color var(--t-theme), border-color var(--t-theme),
    color var(--t-theme);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

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

strong, b { font-weight: 600; }

code {
  color: var(--primary);
  background: var(--primary-soft);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 0.92em;
}

hr {
  border: 0;
  border-top: 1px solid var(--divider);
  opacity: 1;
  margin: var(--space-5) 0;
}

/* 文本工具类：统一替代散落的行内 font-size */
.text-muted { color: var(--text-secondary) !important; }
.rl-text-xs { font-size: var(--fs-xs) !important; }
.rl-text-sm { font-size: var(--fs-sm) !important; }
.rl-text-body { font-size: var(--fs-body) !important; }
.rl-text-muted { color: var(--text-secondary) !important; }
.rl-text-faint { color: var(--text-muted) !important; }
.rl-text-strong { color: var(--text-primary) !important; font-weight: 600; }
.rl-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.rl-prose { white-space: pre-wrap; line-height: 1.75; }
.rl-mono-num { font-variant-numeric: tabular-nums; }

/* 滚动条：低存在感，双侧主题适配 */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

/* 无障碍：可见焦点环 */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ============================================================ 4. 布局层 */
.rl-shell { display: flex; min-height: 100vh; }

/* ------------------------------------------------------------ 4.1 Sidebar */
.rl-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  transition: transform 0.24s ease, background-color var(--t-theme),
    border-color var(--t-theme);
}

.rl-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5) var(--space-5);
  border-bottom: 1px solid var(--sidebar-border);
  min-height: var(--topbar-h);
}

.rl-sidebar__brand i,
.rl-sidebar__brand .bi {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  font-size: 19px;
  color: #fff;
  background: var(--sidebar-brand);
}

.rl-sidebar__brand > div {
  font-size: 16px;
  font-weight: 650;
  color: var(--sidebar-text-strong);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.rl-sidebar__brand small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  color: var(--sidebar-muted);
  letter-spacing: 0.06em;
}

.rl-sidebar__nav {
  flex: 1;
  padding: var(--space-4) var(--space-3);
  overflow-y: auto;
}

.rl-nav-label {
  padding: var(--space-4) var(--space-3) var(--space-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sidebar-muted);
}
.rl-nav-label:first-child { padding-top: var(--space-1); }

.rl-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 40px;
  padding: 0 var(--space-3);
  margin-bottom: 2px;
  border-radius: var(--radius-md);
  color: var(--sidebar-text);
  font-size: var(--fs-body);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--t-fast), color var(--t-fast);
}

.rl-nav-link .bi {
  width: 18px;
  font-size: 17px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.9;
}

.rl-nav-link:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text-strong);
}

/* 选中态：浅色主题使用浅主色背景，深色主题使用深色 Surface + 品牌色文字 */
.rl-nav-link.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  font-weight: 600;
}
.rl-nav-link.active .bi { opacity: 1; }

.rl-sidebar__footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--sidebar-border);
  font-size: var(--fs-xs);
  color: var(--sidebar-muted);
}
.rl-sidebar__footer .bi { color: var(--sidebar-text); }
.rl-sidebar__footer .rl-version {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sidebar-muted);
}

/* ------------------------------------------------------------- 4.2 Topbar */
.rl-main {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  transition: margin-left 0.24s ease;
}

.rl-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--topbar-h);
  padding: var(--space-3) var(--content-x);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}

.rl-topbar__head { flex: 1; min-width: 0; }

.rl-topbar__title {
  margin: 0;
  font-size: var(--fs-page-title);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  line-height: 1.3;
}

.rl-topbar__subtitle {
  margin: 2px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.5;
}

.rl-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* 桌面端隐藏抽屉按钮。
   注意：选择器必须比 .rl-icon-btn 更具体——两者优先级相同时，
   后面的 .rl-icon-btn{display:inline-grid} 会把 display:none 覆盖掉。 */
button.rl-icon-btn.rl-sidebar-toggle { display: none; }

/* ------------------------------------------------------ 4.3 主题切换按钮 */
.rl-theme-toggle {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast),
    color var(--t-fast);
}
.rl-theme-toggle:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.rl-theme-toggle:active { transform: none; }
.rl-theme-toggle .bi { line-height: 1; }

/* 主题切换瞬时抑制 transition，避免出现渐变残影 */
html.rl-theme-switching *,
html.rl-theme-switching *::before,
html.rl-theme-switching *::after {
  transition: none !important;
}

/* ------------------------------------------------------------ 4.4 Content */
.rl-content {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-7) var(--content-x) var(--space-9);
}

/* 页面区块节奏：标题 → 内容 24~32px，模块之间 24~32px */
.rl-section { margin-bottom: var(--space-6); }
.rl-section:last-child { margin-bottom: 0; }
.rl-section--lg { margin-bottom: var(--space-7); }

/* ============================================================ 5. 组件层 */
/* ------------------------------------------------------------- 5.1 Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--fs-body);
  font-weight: 550;
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--t-fast), border-color var(--t-fast),
    color var(--t-fast), box-shadow var(--t-fast);
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled, .btn.disabled { opacity: 0.45; cursor: not-allowed; }

.btn-sm { height: 34px; padding: 0 var(--space-3); font-size: var(--fs-sm); }
.btn-lg { height: 44px; padding: 0 var(--space-6); font-size: 15px; }

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-contrast);
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--primary-contrast);
}
.btn-primary:active { background: var(--primary-active); border-color: var(--primary-active); }

.btn-outline-secondary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-secondary);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.btn-outline-secondary:active { background: var(--surface-3); }

.btn-outline-primary {
  background: transparent;
  border-color: var(--primary);
  color: var(--primary);
}
.btn-outline-primary:hover { background: var(--primary-soft); color: var(--primary-hover); }

.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn-danger:hover, .btn-danger:focus { filter: brightness(0.94); color: #fff; }

.btn-outline-danger {
  background: transparent;
  border-color: var(--border);
  color: var(--danger);
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}

.btn-success {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.btn-success:hover, .btn-success:focus { filter: brightness(0.94); color: #fff; }

/* 训练任务完成开关：用低饱和语义色，避免长列表出现大面积实心色块 */
.rl-toggle-done {
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
  color: var(--success);
}
.rl-toggle-done:hover,
.rl-toggle-done:focus {
  background: color-mix(in srgb, var(--success) 22%, transparent);
  border-color: var(--success);
  color: var(--success);
}

.btn-link { height: auto; padding: 0; color: var(--primary); }

/* --------------------------------------------------------- 5.2 卡片 Card */
.rl-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.rl-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--divider);
}

.rl-card__title {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.rl-card__subtitle {
  margin: 3px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.55;
}

.rl-card__body { padding: var(--space-5); }
.rl-card__body--flush { padding: 0; }
.rl-card__footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--divider);
  background: var(--surface-2);
}

/* ------------------------------------------------------ 5.3 KPI 统计卡 */
.rl-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-base), background-color var(--t-theme);
}
.rl-stat:hover { border-color: var(--border-strong); }

.rl-stat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.rl-stat__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.rl-stat__icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  font-size: 16px;
  background: var(--primary-soft);
  color: var(--primary);
}
/* 静态内联场景：跟随标题行，不绝对定位 */
.rl-stat__icon--inline {
  position: static;
  width: 40px;
  height: 40px;
  font-size: 18px;
}
.rl-stat__icon--lg { width: 44px; height: 44px; font-size: 20px; }

.rl-stat__value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: var(--fs-metric);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text-primary);
}

.rl-stat__unit {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
}

.rl-stat__hint {
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.55;
}

/* 语义着色只作用于图标，避免大面积高饱和色块 */
.rl-stat--accent .rl-stat__icon { background: var(--success-soft); color: var(--success); }
.rl-stat--warn .rl-stat__icon { background: var(--warning-soft); color: var(--warning); }
.rl-stat--violet .rl-stat__icon { background: var(--primary-soft); color: var(--primary); }

.rl-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
}
.rl-delta--up { color: var(--success); }
.rl-delta--down { color: var(--danger); }

/* 卡片内嵌入式小指标组（近 30 天表现等） */
.rl-mini-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
}
.rl-mini-grid > * {
  flex: 1 1 0;
  min-width: 96px;
}
.rl-mini__label {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.rl-mini__value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.25;
  white-space: nowrap;
}
.rl-mini__unit {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 2px;
}

/* 卡片底部的补充说明行（爬升 / 心率 / RPE 等次要信息） */
.rl-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--divider);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.rl-meta-row .bi { margin-right: 5px; color: var(--text-muted); }

/* ------------------------------------------------------------ 5.4 Table */
.rl-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-body);
  color: var(--text-primary);
}

.rl-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--space-3) var(--space-3);
  background: var(--table-header-bg);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}

.rl-table tbody td {
  height: 52px;
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--divider);
  vertical-align: middle;
}
.rl-table tbody tr:last-child td { border-bottom: none; }
.rl-table tbody tr { transition: background-color var(--t-fast); }
.rl-table tbody tr:hover { background: var(--table-row-hover); }
.rl-table tbody tr:hover td { background: transparent; }

.rl-table__num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.rl-table a { font-weight: 500; white-space: nowrap; }

/* 表格内的紧凑按钮组 */
.rl-table .btn-sm { height: 30px; padding: 0 10px; }
.rl-table__actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}

/* 表格外层容器：窄屏只在容器内横向滚动，页面不横向滚动 */
.rl-table-wrap { overflow-x: auto; }
.rl-table-wrap .rl-table { min-width: 760px; }

/* 操作列固定在右侧：表格横向滚动时行内操作始终可见 */
.rl-table th.rl-table__actions-cell,
.rl-table td.rl-table__actions-cell {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--surface);
  box-shadow: -1px 0 0 var(--divider);
}
.rl-table thead th.rl-table__actions-cell {
  z-index: 4;
  background: var(--table-header-bg);
}
.rl-table tbody tr:hover td.rl-table__actions-cell { background: var(--table-row-hover); }

/* 备注列：限宽 + 单行省略，避免撑破表格 */
.rl-table td.rl-cell-note {
  max-width: 172px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rl-table td.rl-cell-note > span { max-width: 100%; }

/* ------------------------------------------------------------ 5.5 Badge */
.rl-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}

.rl-badge .bi { font-size: 12px; }

.rl-badge--soft {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--text-secondary);
}
.rl-badge--success { background: var(--success-soft); color: var(--success); }
.rl-badge--warning { background: var(--warning-soft); color: var(--warning); }
.rl-badge--danger { background: var(--danger-soft); color: var(--danger); }
.rl-badge--info { background: var(--info-soft); color: var(--info); }
.rl-badge--android { background: var(--success-soft); color: var(--success); }
.rl-badge--web { background: var(--primary-soft); color: var(--primary); }
a.rl-badge:hover { filter: brightness(1.06); }

/* --------------------------------------------------------- 5.6 RPE 强度 */
.rl-rpe {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.rl-rpe strong {
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.rl-rpe__bar { display: inline-flex; gap: 2px; }
.rl-rpe__dot {
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--border-strong);
  transition: background-color var(--t-theme);
}
.rl-rpe__dot.on { background: var(--primary); }
.rl-rpe__dot.on.mid { background: var(--warning); }
.rl-rpe__dot.on.high { background: var(--danger); }

/* ----------------------------------------------------------- 5.7 表单 */
.form-label {
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--text-primary);
}

.form-control,
.form-select {
  min-height: 42px;
  padding: 9px var(--space-3);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--fs-body);
  box-shadow: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast),
    background-color var(--t-theme);
}

.form-control::placeholder { color: var(--text-muted); }

.form-control:focus,
.form-select:focus {
  background-color: var(--surface);
  border-color: var(--primary);
  color: var(--text-primary);
  box-shadow: var(--focus-ring);
  outline: none;
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  background-color: var(--surface-3);
  color: var(--text-muted);
  border-color: var(--border);
}

textarea.form-control { min-height: 104px; line-height: 1.65; resize: vertical; }

/* 日期选择器图标在深色主题下需要反色，否则几乎不可见 */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.75);
  cursor: pointer;
}

.form-select {
  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='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
  padding-right: 36px;
}
[data-theme="dark"] .form-select {
  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='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-text {
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.form-check-input {
  width: 17px;
  height: 17px;
  margin-top: 0.2em;
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  cursor: pointer;
}
.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}
.form-check-input:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
  outline: none;
}
.form-check-label { font-size: var(--fs-body); color: var(--text-primary); cursor: pointer; }

.rl-required::after { content: " *"; color: var(--danger); }

.rl-field-error { margin-top: 6px; font-size: var(--fs-xs); color: var(--danger); }

/* 表单分组：一个 Surface 承载一组字段，避免卡片套卡片 */
.rl-form-section + .rl-form-section {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--divider);
}
.rl-form-section__title {
  display: block;
  margin: 0 0 2px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.rl-form-section__hint {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

/* 表单侧栏：跟随滚动，方便随时提交 */
.rl-sticky { position: sticky; top: calc(var(--topbar-h) + var(--space-4)); }

/* 实时预览数值列表 */
.rl-preview__item + .rl-preview__item {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--divider);
}
.rl-preview__label {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.rl-preview__value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-primary);
}
.rl-preview__value--sm { font-size: 18px; }
.rl-preview__unit {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
}
.rl-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--divider);
}

/* ---------------------------------------------------------- 5.8 筛选栏 */
.rl-filter {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.rl-filter__title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

/* ----------------------------------------------------- 5.9 说明面板 */
.rl-panel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.rl-panel__body { flex: 1; min-width: 240px; }
.rl-panel__title {
  margin: 0 0 6px;
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--text-primary);
}
.rl-panel__text {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.75;
}

/* ------------------------------------------------------- 5.10 空状态 */
.rl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-9) var(--space-5);
}
.rl-empty .bi {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-xl);
  font-size: 25px;
  color: var(--text-muted);
  background: var(--surface-3);
}
.rl-empty h5 {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--fs-h3);
  font-weight: 600;
}
.rl-empty p {
  max-width: 420px;
  margin: 0 0 var(--space-5);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.65;
}
.rl-empty .btn { align-self: center; }
.rl-empty--inline { padding: var(--space-7) var(--space-5); }

/* --------------------------------------------- 5.11 实体卡片（车辆等） */
.rl-entity { display: flex; flex-direction: column; padding: var(--space-5); }

.rl-entity__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.rl-entity__title { flex: 1; min-width: 0; }
.rl-entity__title h2 {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-primary);
}
.rl-entity__title p {
  margin: 2px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.rl-entity__metric { margin: var(--space-5) 0; }
.rl-entity__metric-label {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.rl-entity__metric .rl-stat__value { font-size: 26px; }

.rl-entity__note {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.65;
}

.rl-entity__goal {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: var(--space-4) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.65;
}
.rl-entity__goal .bi { color: var(--primary); margin-top: 3px; }

.rl-entity__meter + .rl-entity__meter { margin-top: var(--space-4); }
.rl-entity__meter:first-of-type { margin-top: var(--space-5); }

.rl-entity__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--divider);
}

/* 卡片内的分组小指标（无需边框，靠间距与分割线区分） */
.rl-nested-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}
.rl-nested-stats .rl-mini__value { font-size: 18px; }

/* ------------------------------------------------- 5.12 确认操作块 */
.rl-confirm {
  text-align: center;
  margin-bottom: var(--space-6);
}
.rl-confirm__icon {
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 24px;
}
.rl-confirm__title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h2);
  font-weight: 600;
}
.rl-confirm__text {
  max-width: 460px;
  margin: 0 auto;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.7;
}
.rl-confirm__value {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-primary);
}

/* 确认页内的详情栅格带外框；字段数量固定为 4，用 2×2 避免出现空格子 */
.rl-detail-grid--boxed {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* 表单底部操作区 */
.rl-form-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--divider);
}

/* --------------------------------------------------------- 5.13 分页 */
.rl-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--divider);
  background: var(--surface);
}
.rl-pagination__info {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.pagination { gap: 4px; margin: 0; }
.page-link {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  transition: background-color var(--t-fast), color var(--t-fast),
    border-color var(--t-fast);
}
.page-link:hover {
  background: var(--surface-hover);
  border-color: var(--border);
  color: var(--text-primary);
}
.page-item.active .page-link {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-contrast);
  font-weight: 600;
}
.page-item.disabled .page-link {
  background: transparent;
  color: var(--text-muted);
  opacity: 0.55;
}

/* ------------------------------------------------------- 5.14 Dropdown */
.dropdown-menu {
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-body);
}
.dropdown-item {
  display: flex;
  align-items: center;
  padding: 8px var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--fs-sm);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--surface-hover);
  color: var(--text-primary);
}
.dropdown-item.text-danger { color: var(--danger) !important; }
.dropdown-item.text-danger:hover { background: var(--danger-soft); }
.dropdown-divider { border-top-color: var(--divider); margin: 6px 4px; }

/* 顶栏图标按钮（账户菜单等） */
.rl-icon-btn {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1;
  transition: background-color var(--t-fast), border-color var(--t-fast),
    color var(--t-fast);
}
.rl-icon-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.rl-icon-btn::after { display: none; }  /* 隐藏 Bootstrap caret，保持简洁 */

/* ------------------------------------------------------- 5.15 进度条 */
.rl-progress {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.rl-progress__bar {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--primary);
  transition: width 0.4s ease;
}

/* 训练计划速览（仪表盘侧栏卡片） */
.rl-plan__title {
  margin: 0 0 4px;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-primary);
}
.rl-plan__goal {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.6;
}
.rl-plan__meter + .rl-plan__meter { margin-top: var(--space-4); }
.rl-plan__meter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: var(--fs-xs);
}
.rl-plan__meter-head strong {
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.rl-plan__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}
.rl-plan__stats > * { flex: none; min-width: 0; }
.rl-plan__stats .rl-mini__value { font-size: 18px; }
.rl-plan__date {
  margin-bottom: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.rl-plan__date .bi { margin-right: 5px; }

/* 计划目标摘要行 */
.rl-plan-brief {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-body);
  color: var(--text-primary);
  line-height: 1.7;
}
.rl-plan-brief .bi {
  color: var(--primary);
  font-size: 16px;
  margin-top: 3px;
}

/* --------------------------------------------------- 5.16 Alert / Toast */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  font-size: var(--fs-sm);
}
.alert .btn-close { filter: none; opacity: 0.5; }
[data-theme="dark"] .alert .btn-close { filter: invert(1) grayscale(1); opacity: 0.45; }

.alert-success {
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
  color: var(--success);
}
.alert-warning {
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 30%, transparent);
  color: var(--warning);
}
.alert-danger {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  color: var(--danger);
}
.alert-info {
  background: var(--info-soft);
  border-color: color-mix(in srgb, var(--info) 30%, transparent);
  color: var(--info);
}
.alert-light {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-secondary);
}
.alert code { background: var(--surface); color: var(--primary); }

/* 右上角浮层提示 */
.rl-messages {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1080;
  width: min(380px, calc(100vw - 32px));
}
.rl-messages .alert {
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-2);
}

/* --------------------------------------------------------- 5.17 Tooltip */
.tooltip {
  --bs-tooltip-bg: var(--text-primary);
  --bs-tooltip-color: var(--surface);
  --bs-tooltip-font-size: 12px;
  --bs-tooltip-border-radius: var(--radius-sm);
  --bs-tooltip-opacity: 1;
}
.tooltip-inner { padding: 6px 10px; }

/* ------------------------------------------------------- 5.18 图表容器 */
.rl-chart { width: 100%; height: 300px; }
.rl-chart--sm { height: 240px; }
.rl-chart--lg { height: 340px; }

/* ========================================================= 6. 页面增强 */
/* --------------------------------------------------- 6.0b 个人资料 */
.rl-profile { text-align: center; }
.rl-profile__avatar {
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--primary);
  color: #fff;
  font-size: 24px;
}
.rl-profile__name {
  margin: 0 0 4px;
  font-size: var(--fs-h3);
  font-weight: 600;
}
.rl-profile__handle {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.rl-profile__bio {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.7;
}
.rl-profile__stats { margin-top: var(--space-5); }
.rl-profile__joined {
  margin-top: var(--space-5);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* -------------------------------------------------------- 6.1 认证页面 */
.rl-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-8) var(--space-5);
  background:
    radial-gradient(1000px 480px at 10% -12%, var(--primary-soft), transparent 62%),
    radial-gradient(760px 420px at 100% 108%, var(--primary-soft), transparent 62%),
    var(--bg-primary);
}

.rl-auth__card {
  width: 100%;
  max-width: 428px;
  padding: var(--space-8) var(--space-7) var(--space-7);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.rl-auth__logo {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin: 0 auto var(--space-5);
  border-radius: var(--radius-lg);
  font-size: 24px;
  color: #fff;
  background: var(--primary);
}

.rl-auth__title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-align: center;
}

.rl-auth__subtitle {
  margin: 0 0 var(--space-6);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  text-align: center;
}

.rl-auth__foot {
  margin: var(--space-6) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  text-align: center;
}

/* 顶部认证页主题切换按钮 */
.rl-auth__theme {
  position: fixed;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 10;
}

/* ------------------------------------------------------- 6.2 智能结论 */
.rl-insight {
  height: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-md);
}
.rl-insight--positive { border-left-color: var(--success); }
.rl-insight--warning { border-left-color: var(--warning); }
.rl-insight--info { border-left-color: var(--primary); }

.rl-insight__title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-primary);
}
.rl-insight--positive .rl-insight__title .bi { color: var(--success); }
.rl-insight--warning .rl-insight__title .bi { color: var(--warning); }
.rl-insight--info .rl-insight__title .bi { color: var(--primary); }

.rl-insight__detail {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ------------------------------------------------ 6.3 训练任务时间轴 */
.rl-session-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--divider);
  transition: background-color var(--t-fast);
}
.rl-session-row:last-child { border-bottom: none; }
.rl-session-row:hover { background: var(--table-row-hover); }
.rl-session-row--today {
  background: var(--primary-soft);
  box-shadow: inset 3px 0 0 var(--primary);
}
.rl-session-row--today:hover { background: var(--primary-soft-strong); }
.rl-session-row--past { opacity: 0.92; }

.rl-session-row__date {
  width: 84px;
  flex-shrink: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.rl-session-row__date .rl-weekday {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}
.rl-session-row__body { flex: 1; min-width: 0; }
.rl-session-row__body strong { font-size: var(--fs-body); }
.rl-session-row__meta {
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.6;
}
.rl-session-row__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.rl-timeline-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--border-strong);
}
.rl-timeline-dot--done { background: var(--success); }
.rl-timeline-dot--missed { background: var(--danger); }

/* ------------------------------------------------------ 6.4 详情数据栅格 */
.rl-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 1px;
  background: var(--divider);
}
/* 确认页的详情栅格字段固定为 4 个，用 2×2 避免出现空格子。
   必须放在 .rl-detail-grid 基础规则之后：两者优先级相同，靠顺序覆盖。 */
@media (min-width: 480px) {
  .rl-detail-grid--boxed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rl-detail-item {
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
}
.rl-detail-item__label {
  margin-bottom: 6px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.rl-detail-item__value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.25;
}
.rl-detail-item__value .rl-unit {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
}

/* 详情页关联信息分组 */
.rl-meta-block + .rl-meta-block {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--divider);
}
.rl-meta-block__label {
  margin-bottom: 4px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.rl-meta-block__value {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-primary);
}
.rl-meta-block__hint {
  margin-top: 3px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.6;
}

/* --------------------------------------------------------- 6.5 实时同步 */
.rl-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}
.rl-live__dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--success);
  animation: rl-pulse 2s infinite;
}
.rl-live--error .rl-live__dot { background: var(--danger); animation: none; }
.rl-live--idle .rl-live__dot { background: var(--text-muted); animation: none; }

@keyframes rl-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* 新数据到达时的高亮：使用主题色而非固定浅绿 */
.rl-new-flash { animation: rl-flash 1.8s ease; }
@keyframes rl-flash {
  0% { background: var(--success-soft); }
  100% { background: transparent; }
}

/* ------------------------------------------------------ 6.6 遮罩（抽屉） */
.rl-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1035;
  background: var(--backdrop);
}
.rl-backdrop.show { display: block; }

/* ------------------------------------------------------- 6.7 错误提示块 */
.rl-error {
  padding: var(--space-3) var(--space-4);
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-radius: var(--radius-md);
  color: var(--danger);
  font-size: var(--fs-sm);
}
.rl-alert-inline {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}

/* ========================================================= 7. 响应式 */
/* 2K 及以上：内容区居中并增加留白，避免大屏两侧过空 */
@media (min-width: 1921px) {
  :root { --content-x: 40px; }
}

/* 1366 及以下：收紧留白与标题尺度，但保持信息层级 */
@media (max-width: 1440px) {
  :root { --content-x: 28px; }
}

@media (max-width: 1280px) {
  :root {
    --sidebar-w: 228px;
    --content-x: 24px;
  }
  .rl-stat__value { font-size: 27px; }
}

@media (max-width: 1100px) {
  :root { --content-x: 22px; }
  .rl-stat { padding: var(--space-4); }
  .rl-detail-item { padding: var(--space-4); }
}

/* 平板 / 窄窗口：侧边栏改为抽屉，主内容占满 */
@media (max-width: 991.98px) {
  .rl-sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .rl-sidebar.show { transform: translateX(0); }
  .rl-main { margin-left: 0; }
  button.rl-icon-btn.rl-sidebar-toggle { display: inline-grid; }
  .rl-topbar { padding: var(--space-3) var(--space-5); }
  .rl-content { padding: var(--space-6) var(--space-5) var(--space-8); }
  .rl-chart { height: 260px; }
}

@media (max-width: 640px) {
  .rl-topbar { flex-wrap: wrap; row-gap: var(--space-2); }
  .rl-topbar__head { order: 3; flex-basis: 100%; }
  .rl-content { padding: var(--space-5) var(--space-4) var(--space-7); }
  .rl-card__body { padding: var(--space-4); }
  .rl-card__header { padding: var(--space-4); }
  .rl-stat { padding: var(--space-4); }
  .rl-stat__value { font-size: 25px; }
  .rl-session-row { flex-wrap: wrap; }
  .rl-session-row__actions { margin-left: auto; }
}

/* -------------------------------------------------------------- 打印 */
@media print {
  .rl-sidebar, .rl-topbar, .rl-messages, .rl-theme-toggle { display: none !important; }
  .rl-main { margin-left: 0; }
  .rl-card, .rl-stat { box-shadow: none; border-color: #ddd; }
}

/* ------------------------------------------------- 降低动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}