/* ==========================================================================
   喜哥健身私教管理系统 — Unified Stylesheet
   Merged: Bento Flat Modern (primary) + Premium Glassmorphism (enhanced)
   Features: 11-color module system, step cards, forms, tables, glassmorphism,
             gradient hero, magnetic interactions
   ========================================================================== */

/* ---------- 1. Design Tokens ---------- */
:root {
  /* Module Brand Colors (11 modules) */
  --color-01: #014DB2;
  --color-02: #10B981;
  --color-03: #F59E0B;
  --color-04: #8B5CF6;
  --color-05: #014DB2;
  --color-06: #10B981;
  --color-07: #F43F5E;
  --color-08: #F59E0B;
  --color-09: #8B5CF6;
  --color-10: #0EA5E9;
  --color-11: #EC4899;

  /* Neutral Palette — 略灰·实木质感 */
  --bg-primary: #F7F4EF;
  --bg-secondary: #EFEAE2;
  --bg-tertiary: #E7E0D6;
  --text-primary: #2B2722;
  --text-secondary: #5C544B;
  --text-muted: #9A8F81;
  --border-color: #E2D8CB;

  /* Premium surfaces */
  --surface: #FBF9F5;
  --surface-glass: rgba(251, 249, 245, 0.6);
  --surface-hover: rgba(251, 249, 245, 0.92);
  --surface-elevated: rgba(251, 249, 245, 0.78);

  /* 实木主题色（统一快捷卡标签 / 卡片顶饰） */
  --wood-accent: #8B5E3C;
  --wood-accent-2: #A9784F;
  --wood-soft: rgba(139, 94, 60, 0.12);

  /* Accent system */
  --primary: var(--color-01);
  --primary-light: #3b82f6;
  --primary-soft: rgba(59, 130, 246, 0.1);
  --accent: var(--color-02);
  --accent-soft: rgba(16, 185, 129, 0.1);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #014DB2 0%, #3b82f6 100%);
  --gradient-accent: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  --gradient-hero: linear-gradient(135deg, #0a1a3e 0%, #014DB2 35%, #3b82f6 70%, #818cf8 100%);
  --gradient-mesh: radial-gradient(circle at 20% 20%, rgba(59,130,246,0.12), transparent 40%),
                   radial-gradient(circle at 80% 70%, rgba(16,185,129,0.1), transparent 40%),
                   radial-gradient(circle at 50% 100%, rgba(139,92,246,0.08), transparent 40%);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.06), 0 12px 28px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 18px 45px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.14);
  --shadow-glow: 0 0 40px rgba(59, 130, 246, 0.15);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 22px;
  --radius-full: 9999px;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  /* Transitions */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;
}

/* ---------- 2. Reset & Base ---------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: var(--font-sans);
  background: var(--bg-secondary);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--duration-normal) var(--ease-smooth),
              color var(--duration-normal) var(--ease-smooth);
  overflow-x: hidden;
}

/* 实木质感：暖灰底 + 细腻木纹纹理 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(91deg, rgba(139, 94, 60, 0.035) 0px, rgba(139, 94, 60, 0.035) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(89deg, rgba(120, 80, 50, 0.022) 0px, rgba(120, 80, 50, 0.022) 1px, transparent 1px, transparent 7px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0px, rgba(255, 255, 255, 0.4) 1px, transparent 1px, transparent 130px),
    radial-gradient(circle at 16% 12%, rgba(139, 94, 60, 0.06), transparent 45%),
    radial-gradient(circle at 84% 82%, rgba(169, 120, 79, 0.05), transparent 45%);
  pointer-events: none;
  z-index: -2;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

::selection {
  background: color-mix(in srgb, var(--color-01) 20%, transparent);
  color: var(--text-primary);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* ---------- 3. Layout Containers ---------- */
.page-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px 48px;
}

.container {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}

/* ---------- 4. Page Header (sticky bar) ---------- */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-secondary);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.page-header h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  transition: all var(--duration-fast) var(--ease-premium);
}

.back-link:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
  transform: translateX(-2px);
}

/* ---------- 5b. Plan Form Extras (preset actions, photos, lock) ---------- */
.preset-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.action-chip {
  padding: 6px 12px; font-size: 0.78rem; border: 1px solid var(--border-color);
  background: var(--bg-secondary); color: var(--text-secondary);
  border-radius: var(--radius-full); cursor: pointer;
  transition: all var(--duration-fast) var(--ease-premium);
}
.action-chip:hover { border-color: var(--primary); color: var(--primary); }
.action-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.action-chip { position: relative; padding-right: 22px; }
.action-chip .chip-text { pointer-events: none; }
.action-chip .chip-del {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; line-height: 16px; text-align: center;
  border-radius: 50%; background: rgba(244,63,94,0.1); color: #F43F5E;
  font-size: 0.72rem; cursor: pointer; transition: all var(--duration-fast) var(--ease-premium);
}
.action-chip .chip-del:hover { background: #F43F5E; color: #fff; }
.preset-add-row { display: flex; gap: 8px; margin-top: 10px; }
.preset-add-row input { flex: 1; margin: 0; }
.photo-preview { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.plan-photo-thumb { width:72px; height:72px; object-fit:cover; border-radius: var(--radius-md); border:1px solid var(--border-color); }
.plan-photos { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.plan-locked-badge {
  display:inline-block; margin-left:8px; padding:2px 8px; font-size:0.68rem; font-weight:600;
  color:#fff; background:#94A3B8; border-radius: var(--radius-full); vertical-align:middle;
}
/* 管理员不受 24h 锁定限制 */
.plan-unlocked-badge {
  display:inline-block; margin-left:8px; padding:2px 8px; font-size:0.68rem; font-weight:600;
  color:#fff; background:linear-gradient(135deg,#10B981 0%,#34D399 100%);
  border-radius: var(--radius-full); vertical-align:middle;
}
/* 系统内置教练标记（受保护，不可删除） */
.sys-badge {
  display:inline-block; margin-left:8px; padding:1px 8px; font-size:0.66rem; font-weight:600;
  color:#014DB2; background:rgba(1,77,178,0.1);
  border-radius: var(--radius-full); vertical-align:middle;
}
.data-item.locked { opacity:0.92; }

/* ---------- 5c. Plan Type / Day (admin mobile gradient) ---------- */
.type-day-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.type-day-row .form-field { margin-bottom: 0; }
.type-select {
  width: 100%;
  padding: 12px 34px 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background:
    linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%)
    no-repeat right 10px center / 14px 14px;
  background-image:
    linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 0, right 10px center;
  background-size: cover, 14px 14px;
  color: var(--text-primary);
  font-size: 0.9rem;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: var(--shadow-xs);
}
.type-add-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 14px;
}
.type-add-row input { flex: 1; margin: 0; }
.btn-gradient-sm {
  border: none; cursor: pointer; border-radius: var(--radius-md);
  padding: 10px 16px; font-weight: 600; font-size: 0.85rem;
  background: var(--gradient-primary); color: #fff;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  transition: all var(--duration-fast) var(--ease-premium);
}
.btn-gradient-sm:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

@media (max-width: 480px) {
  .type-day-row { grid-template-columns: 1fr; gap: 10px; }
}

/* ---------- 6. Hero Header (homepage) ---------- */
.hero-header {
  padding: 32px 0 12px;
}

.headline {
  position: relative;
  padding: 40px 36px;
  border-radius: var(--radius-2xl);
  background: var(--gradient-hero);
  color: #fff;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  isolation: isolate;
}

.headline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.15), transparent 50%),
              radial-gradient(circle at 20% 80%, rgba(16,185,129,0.2), transparent 50%);
  z-index: -1;
}

.headline::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(255,255,255,0.03) 60deg, transparent 120deg, rgba(255,255,255,0.05) 180deg, transparent 240deg, rgba(255,255,255,0.03) 300deg, transparent 360deg);
  animation: shine 8s linear infinite;
  z-index: -1;
}

@keyframes shine {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.headline h1 {
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 20px rgba(0,0,0,0.1);
}

.headline p {
  margin-top: 16px;
  max-width: 720px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.02rem;
  line-height: 1.75;
}

.badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  transition: all var(--duration-fast) var(--ease-premium);
}

.badge:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

/* ---------- 7. Section Title & Search ---------- */
.section-title {
  margin: 36px 0 20px;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-title::before {
  content: "";
  width: 4px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--gradient-primary);
}

.search-bar {
  margin-bottom: 24px;
  position: relative;
}

.search-bar input {
  width: 100%;
  padding: 14px 18px 14px 48px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  color: var(--text);
  font-size: 0.95rem;
  font-family: var(--font-sans);
  transition: all var(--duration-normal) var(--ease-premium);
  box-shadow: var(--shadow-card);
}

.search-bar input::placeholder { color: var(--text-muted); }

.search-bar input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft), var(--shadow-md);
}

.search-bar::before {
  content: "\1F50D";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  opacity: 0.5;
  pointer-events: none;
}

/* ---------- 8. Overview Grid (homepage) ---------- */
.overview-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  padding: 24px 0;
}

.overview-card {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--duration-normal) var(--ease-premium),
              box-shadow var(--duration-normal) var(--ease-smooth);
  cursor: pointer;
  text-decoration: none;
  animation: fadeInUp 0.5s var(--ease-premium) backwards;
  position: relative;
  overflow: hidden;
}

.overview-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.overview-card .module-badge {
  width: 40px;
  height: 40px;
  font-size: 16px;
}

.overview-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.overview-card p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.step-count {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.step-count::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--module-color, var(--color-01));
}

/* Glow border on hover */
.overview-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--primary), #818cf8, var(--accent));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-smooth);
  z-index: 0;
}

.overview-card:hover::before { opacity: 1; }

/* ---------- 9. Module Section (detail pages) ---------- */
.module-section {
  padding: 48px 0 24px;
  animation: fadeInUp 0.6s var(--ease-premium);
}

.module-section[data-module="01"] { --module-color: var(--color-01); --module-bg: rgba(1, 77, 178, 0.04); }
.module-section[data-module="02"] { --module-color: var(--color-02); --module-bg: rgba(16, 185, 129, 0.04); }
.module-section[data-module="03"] { --module-color: var(--color-03); --module-bg: rgba(245, 158, 11, 0.04); }
.module-section[data-module="04"] { --module-color: var(--color-04); --module-bg: rgba(139, 92, 246, 0.04); }
.module-section[data-module="05"] { --module-color: var(--color-05); --module-bg: rgba(1, 77, 178, 0.04); }
.module-section[data-module="06"] { --module-color: var(--color-06); --module-bg: rgba(16, 185, 129, 0.04); }
.module-section[data-module="07"] { --module-color: var(--color-07); --module-bg: rgba(244, 63, 94, 0.04); }
.module-section[data-module="08"] { --module-color: var(--color-08); --module-bg: rgba(245, 158, 11, 0.04); }
.module-section[data-module="09"] { --module-color: var(--color-09); --module-bg: rgba(139, 92, 246, 0.04); }
.module-section[data-module="10"] { --module-color: var(--color-10); --module-bg: rgba(14, 165, 233, 0.04); }
.module-section[data-module="11"] { --module-color: var(--color-11); --module-bg: rgba(236, 72, 153, 0.04); }

/* Module Header */
.module-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 8px 16px;
}

.module-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--module-color, var(--color-01));
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--module-color, var(--color-01)) 30%, transparent);
}

.module-title-block { flex: 1; min-width: 0; }

.module-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.module-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ---------- 10. Cards Row & Step Card ---------- */
.cards-row {
  display: flex;
  gap: 16px;
  padding: 0 8px;
  flex-wrap: wrap;
}

.step-card {
  width: 400px;
  min-height: 380px;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--duration-normal) var(--ease-premium),
              box-shadow var(--duration-normal) var(--ease-smooth);
  animation: fadeInUp 0.5s var(--ease-premium) backwards;
}

.step-card:nth-child(1) { animation-delay: 0.1s; }
.step-card:nth-child(2) { animation-delay: 0.2s; }
.step-card:nth-child(3) { animation-delay: 0.3s; }

.step-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.step-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.step-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--module-color);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.step-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}

.step-description {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ---------- 11. UI Elements Inside Cards ---------- */

/* Metric List */
.metric-list { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.metric-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: var(--radius-sm); background: var(--bg-tertiary);
}
.metric-name { font-size: 12px; font-weight: 500; color: var(--text-primary); }
.metric-source { font-size: 11px; color: var(--text-muted); }

/* KPI Cards */
.kpi-row { display: flex; gap: 8px; }
.kpi-card {
  flex: 1; padding: 10px; border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: 4px;
}
.kpi-card.blue { background: rgba(14, 165, 233, 0.08); }
.kpi-card.green { background: rgba(16, 185, 129, 0.08); }
.kpi-card.purple { background: rgba(139, 92, 246, 0.08); }
.kpi-card.orange { background: rgba(245, 158, 11, 0.08); }
.kpi-card.pink { background: rgba(236, 72, 153, 0.08); }
.kpi-label { font-size: 11px; color: var(--text-secondary); }
.kpi-value { font-size: 16px; font-weight: 700; }
.kpi-value.blue { color: #0EA5E9; }
.kpi-value.green { color: #10B981; }
.kpi-value.purple { color: #8B5CF6; }
.kpi-value.orange { color: #F59E0B; }
.kpi-value.pink { color: #EC4899; }

/* Chart Area */
.chart-area {
  background: var(--bg-tertiary); border-radius: var(--radius-md);
  padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.chart-title { font-size: 11px; font-weight: 500; color: var(--text-secondary); }
.bars-row {
  display: flex; align-items: flex-end; justify-content: space-around;
  flex: 1; min-height: 60px;
}
.bar {
  width: 30px; border-radius: 4px 4px 0 0;
  transition: height 0.6s var(--ease-premium);
}

/* Export Buttons */
.export-buttons { display: flex; gap: 8px; }
.export-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 500; transition: transform var(--duration-fast) var(--ease-premium);
}
.export-btn:hover { transform: translateY(-1px); }
.export-btn.excel { background: rgba(16, 185, 129, 0.1); color: #10B981; }
.export-btn.pdf { background: rgba(239, 68, 68, 0.1); color: #EF4444; }
.export-btn.csv { background: rgba(59, 130, 246, 0.1); color: #3B82F6; }

/* Share Area */
.share-area {
  background: var(--bg-tertiary); border-radius: var(--radius-md);
  padding: 12px; display: flex; flex-direction: column; gap: 6px;
}
.share-title { font-size: 12px; font-weight: 500; color: var(--text-primary); }
.share-desc { font-size: 11px; color: var(--text-secondary); }

/* Push Status */
.push-row { display: flex; align-items: center; justify-content: space-between; }
.push-status {
  display: inline-flex; align-items: center; padding: 4px 8px;
  border-radius: 10px; font-size: 11px; font-weight: 500;
  background: rgba(16, 185, 129, 0.15); color: #10B981;
}

/* Phone Mockup */
.phone-mockup {
  width: 220px; margin: 0 auto; background: var(--bg-tertiary);
  border-radius: var(--radius-xl); padding: 20px;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.phone-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.phone-input {
  width: 100%; height: 36px; padding: 0 12px;
  border-radius: var(--radius-md); background: var(--bg-primary);
  border: 1px solid var(--border-color); font-size: 12px;
  color: var(--text-muted); display: flex; align-items: center;
}
.login-btn {
  width: 100%; height: 36px; border-radius: var(--radius-md);
  border: none; background: var(--module-color); color: #FFFFFF;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-premium);
}
.login-btn:hover { opacity: 0.9; }
.alt-login { font-size: 11px; color: var(--module-color); font-weight: 500; }

/* Booking Card */
.booking-card {
  background: var(--module-bg); border-radius: var(--radius-md);
  padding: 12px; display: flex; flex-direction: column; gap: 4px;
  border-left: 3px solid var(--module-color);
}
.booking-class { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.booking-time { font-size: 11px; color: var(--module-color); }

/* History List */
.history-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: var(--radius-sm); background: var(--bg-tertiary);
}
.history-name { font-size: 12px; font-weight: 500; color: var(--text-primary); }
.history-date { font-size: 11px; color: var(--text-muted); }

/* Member Card */
.member-card {
  background: var(--module-color); border-radius: var(--radius-lg);
  padding: 16px; display: flex; flex-direction: column; gap: 4px; color: #FFFFFF;
}
.member-name { font-size: 14px; font-weight: 700; }
.member-card-no { font-size: 11px; opacity: 0.85; }

/* Benefit Row */
.benefit-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: var(--radius-sm); background: var(--bg-tertiary);
}
.benefit-label { font-size: 12px; color: var(--text-secondary); }
.benefit-value { font-size: 12px; font-weight: 700; color: var(--module-color); }

/* Renew Button */
.renew-btn {
  width: 100%; height: 36px; border-radius: var(--radius-md);
  border: none; background: var(--module-bg); color: var(--module-color);
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all var(--duration-fast) var(--ease-premium);
}
.renew-btn:hover { background: var(--module-color); color: #FFFFFF; }

/* Table Mini */
.table-mini { width: 100%; border-collapse: collapse; font-size: 11px; }
.table-mini th {
  text-align: left; padding: 6px 8px; color: var(--text-muted);
  font-weight: 500; border-bottom: 1px solid var(--border-color);
}
.table-mini td {
  padding: 6px 8px; color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

/* Permission Matrix */
.perm-matrix { display: flex; flex-direction: column; gap: 6px; }
.perm-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.perm-role { font-size: 12px; font-weight: 500; color: var(--text-primary); width: 60px; }
.perm-dots { display: flex; gap: 6px; flex: 1; }
.perm-dot {
  width: 20px; height: 20px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.perm-dot.yes { background: rgba(16, 185, 129, 0.15); color: #10B981; }
.perm-dot.no { background: var(--bg-tertiary); color: var(--text-muted); }

/* Tag Pills */
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-pill {
  display: inline-flex; align-items: center; padding: 4px 10px;
  border-radius: 12px; font-size: 11px; font-weight: 500;
}
.tag-pill.active { background: rgba(16, 185, 129, 0.12); color: #10B981; }
.tag-pill.dormant { background: rgba(245, 158, 11, 0.12); color: #F59E0B; }
.tag-pill.lost { background: rgba(244, 63, 94, 0.12); color: #F43F5E; }
.tag-pill.vip { background: rgba(139, 92, 246, 0.12); color: #8B5CF6; }

/* Timeline */
.timeline {
  display: flex; flex-direction: column; gap: 0;
  padding-left: 12px; border-left: 2px solid var(--border-color);
}
.timeline-item { position: relative; padding: 0 0 12px 16px; }
.timeline-item::before {
  content: ''; position: absolute; left: -19px; top: 4px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--module-color);
}
.timeline-label { font-size: 12px; font-weight: 500; color: var(--text-primary); }
.timeline-date { font-size: 11px; color: var(--text-muted); }

/* Status Badge */
.status-badge {
  display: inline-flex; align-items: center; padding: 4px 8px;
  border-radius: 10px; font-size: 11px; font-weight: 500;
}
.status-badge.success { background: rgba(16, 185, 129, 0.15); color: #10B981; }
.status-badge.warning { background: rgba(245, 158, 11, 0.15); color: #F59E0B; }
.status-badge.danger { background: rgba(244, 63, 94, 0.15); color: #F43F5E; }
.status-badge.info { background: rgba(59, 130, 246, 0.15); color: #3B82F6; }

/* Progress Bar */
.progress-bar {
  width: 100%; height: 6px; border-radius: 3px;
  background: var(--bg-tertiary); overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 3px; background: var(--module-color);
  transition: width 0.6s var(--ease-premium);
}

/* QR Placeholder */
.qr-placeholder {
  width: 80px; height: 80px; border-radius: var(--radius-md);
  background: var(--bg-tertiary); display: flex; align-items: center;
  justify-content: center; margin: 0 auto; position: relative;
}
.qr-placeholder::before {
  content: ''; position: absolute; inset: 8px;
  background-image:
    linear-gradient(45deg, var(--text-primary) 25%, transparent 25%),
    linear-gradient(-45deg, var(--text-primary) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--text-primary) 75%),
    linear-gradient(-45deg, transparent 75%, var(--text-primary) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  opacity: 0.7; border-radius: 4px;
}

/* Calendar Mini */
.calendar-mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-cell {
  aspect-ratio: 1; border-radius: 4px; background: var(--bg-tertiary);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--text-muted);
}
.cal-cell.has-event { background: var(--module-color); color: #FFFFFF; font-weight: 600; }
.cal-cell.today { border: 2px solid var(--module-color); }

/* Template Preview */
.template-preview {
  background: var(--bg-tertiary); border-radius: var(--radius-md);
  padding: 12px; font-size: 11px; color: var(--text-secondary);
  line-height: 1.6; border-left: 3px solid var(--module-color);
}
.template-var {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  background: var(--module-bg); color: var(--module-color);
  font-weight: 600; font-size: 10px;
}

/* Card Footer Note */
.footer-note {
  font-size: 11px; color: var(--text-muted);
  margin-top: auto; padding-top: 8px;
}

/* ---------- 12. Management Section (forms & tables) ---------- */
.management-section {
  padding: 32px 8px 48px;
  animation: fadeInUp 0.6s var(--ease-premium) 0.3s backwards;
}

.management-section h2 {
  margin-bottom: 16px;
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.management-section h2::before {
  content: "";
  width: 4px;
  height: 20px;
  border-radius: var(--radius-sm);
  background: var(--module-color, var(--gradient-primary));
}

/* Module Panel */
.module-panel {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;
}

.module-panel h2 {
  margin-bottom: 14px;
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.module-panel h2::before {
  content: "";
  width: 4px;
  height: 20px;
  border-radius: var(--radius-sm);
  background: var(--gradient-primary);
}

.module-panel p {
  color: var(--text-secondary);
  line-height: 1.8;
}

/* Feature List */
.feature-list { list-style: none; }
.feature-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.7;
  transition: padding-left var(--duration-fast) var(--ease-premium);
}
.feature-list li::before {
  content: "\2714";
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.feature-list li:last-child { border-bottom: none; }
.feature-list li:hover { padding-left: 6px; }

/* Panel Grid & Cards */
.panel-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 16px;
}
.panel-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: all var(--duration-normal) var(--ease-premium);
}
.panel-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}
.panel-card h3 {
  margin-bottom: 10px; font-size: 1rem; font-weight: 700; color: var(--primary);
}
.panel-card p { color: var(--text-muted); line-height: 1.75; font-size: 0.88rem; }

/* ---------- 13. Forms ---------- */
.form-panel { margin-top: 24px; }
.module-form { display: grid; gap: 18px; }
.form-field { display: grid; gap: 8px; }
.form-field label {
  font-weight: 600; color: var(--text-primary);
  font-size: 0.88rem; letter-spacing: 0.01em;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%; padding: 12px 16px;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-primary); color: var(--text-primary);
  font-size: 0.9rem; font-family: var(--font-sans);
  transition: all var(--duration-normal) var(--ease-premium);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--text-muted); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}
.form-field textarea {
  min-height: 100px; resize: vertical; line-height: 1.6;
}
.form-field select {
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}

.form-actions {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px;
}

/* ---------- 14. Buttons ---------- */
.btn-primary,
.btn-secondary,
.btn-delete {
  border: none; cursor: pointer;
  border-radius: var(--radius-md);
  padding: 12px 24px; font-weight: 600; font-size: 0.88rem;
  font-family: var(--font-sans);
  transition: all var(--duration-normal) var(--ease-premium);
  position: relative; overflow: hidden;
}

.btn-primary {
  background: var(--gradient-primary); color: #fff; box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}

.btn-secondary {
  background: var(--bg-tertiary); color: var(--text-primary);
  border: 1px solid var(--border-color);
}
.btn-secondary:hover {
  background: var(--surface-hover);
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
}

.btn-delete {
  background: rgba(244, 63, 94, 0.1); color: #F43F5E;
  padding: 8px 14px; font-size: 0.83rem;
}
.btn-delete:hover {
  background: #F43F5E; color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3);
}

.btn-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: var(--radius-md);
  background: var(--primary-soft); color: var(--primary);
  font-weight: 600; font-size: 0.88rem;
  transition: all var(--duration-normal) var(--ease-premium);
  border: 1px solid transparent;
}
.btn-back:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), var(--shadow-glow);
  background: var(--primary); color: #fff;
}

/* ---------- 15. Data Table ---------- */
.table-wrapper {
  overflow-x: auto; margin-top: 22px;
  border-radius: var(--radius-lg); border: 1px solid var(--border-color);
  background: var(--bg-primary); box-shadow: var(--shadow-card);
}
.data-table {
  width: 100%; border-collapse: collapse; min-width: 680px;
}
.data-table th,
.data-table td {
  border-bottom: 1px solid var(--border-color);
  padding: 13px 18px; text-align: left; font-size: 0.88rem;
}
.data-table th {
  background: var(--bg-tertiary); font-weight: 700;
  color: var(--text-secondary); text-transform: uppercase;
  font-size: 0.76rem; letter-spacing: 0.05em;
  position: sticky; top: 0;
}
.data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-smooth); }
.data-table tbody tr:hover { background: var(--primary-soft); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr td.empty-row {
  text-align: center; color: var(--text-muted);
  padding: 40px; font-style: italic;
}

/* ---------- 16. Page Footer Note (homepage) ---------- */
.homepage-footer {
  margin: 36px 0 56px;
  padding: 24px 28px;
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  box-shadow: var(--shadow-card);
  font-size: 0.88rem;
  line-height: 1.7;
}

/* ---------- 17. Toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(100px);
  padding: 14px 24px; border-radius: var(--radius-md);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary); font-size: 0.88rem; font-weight: 600;
  z-index: 9999; opacity: 0;
  transition: all var(--duration-normal) var(--ease-bounce);
  display: flex; align-items: center; gap: 8px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { border-left: 4px solid var(--accent); }
.toast.error { border-left: 4px solid #F43F5E; }

/* ---------- 18. Utilities ---------- */
.text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.glass {
  background: var(--surface-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-color);
}

/* Smooth theme transition */
*, *::before, *::after {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: var(--duration-normal);
  transition-timing-function: var(--ease-smooth);
}

/* ---------- 19. Animations ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in { animation: fadeInUp 0.6s var(--ease-premium) both; }
.fade-in-delay-1 { animation: fadeInUp 0.6s var(--ease-premium) 0.1s both; }
.fade-in-delay-2 { animation: fadeInUp 0.6s var(--ease-premium) 0.2s both; }
.fade-in-delay-3 { animation: fadeInUp 0.6s var(--ease-premium) 0.3s both; }

/* Stagger overview cards */
.overview-card:nth-child(1) { animation-delay: 0.05s; }
.overview-card:nth-child(2) { animation-delay: 0.1s; }
.overview-card:nth-child(3) { animation-delay: 0.15s; }
.overview-card:nth-child(4) { animation-delay: 0.2s; }
.overview-card:nth-child(5) { animation-delay: 0.25s; }
.overview-card:nth-child(6) { animation-delay: 0.3s; }
.overview-card:nth-child(7) { animation-delay: 0.35s; }
.overview-card:nth-child(8) { animation-delay: 0.4s; }
.overview-card:nth-child(9) { animation-delay: 0.45s; }
.overview-card:nth-child(10) { animation-delay: 0.5s; }
.overview-card:nth-child(11) { animation-delay: 0.55s; }

/* ---------- 20. Responsive ---------- */
@media (max-width: 1280px) {
  .cards-row { flex-wrap: wrap; }
  .step-card { width: calc(50% - 8px); }
}

@media (max-width: 980px) {
  .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .step-card { width: 100%; }
  .page-container { padding: 0 16px 32px; }
  .module-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .headline { padding: 28px 22px; }
  .overview-grid { grid-template-columns: 1fr; }
  .container { width: calc(100% - 32px); }
  .module-panel { padding: 22px; }
}

@media (max-width: 480px) {
  .headline h1 { font-size: 1.6rem; }
  .section-title { font-size: 1.15rem; }
  .form-actions { flex-direction: column; }
  .form-actions button { width: 100%; }
}

/* ---------- 21. Auth Card (Login/Register) ---------- */
.auth-wrapper {
  min-height: 100vh;   /* 回退 */
  min-height: 100dvh;  /* 移动端地址栏伸缩时不被裁切 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
}

.auth-card {
  width: 100%;
  max-width: 760px;
  background: var(--bg-primary);
  border-radius: var(--radius-2xl);
  padding: 40px 36px;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-color);
  animation: fadeInUp 0.6s var(--ease-premium);
  position: relative;
  overflow: hidden;
}

/* Two-column login + QR split */
.auth-split {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.auth-login-panel {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 32px;
}

.auth-qr-panel {
  flex: 0 0 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 32px;
  border-left: 1px solid var(--border-color);
  position: relative;
}

/* Vertical "或" divider on the boundary */
.auth-qr-panel::before {
  content: "或";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  z-index: 2;
}

.qr-center {
  text-align: center;
  width: 100%;
}

.qr-center-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.qr-center-tip {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 14px;
  line-height: 1.5;
}

.auth-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradient-primary);
}

.auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
}

.auth-logo .logo-icon {
  width: 46px;
  height: 46px;
  margin: 0;
  border-radius: var(--radius-xl);
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  font-weight: 800;
  box-shadow: var(--shadow-glow);
}

.auth-logo h1 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
}

.auth-logo p {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.auth-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-lg);
  background: var(--bg-tertiary);
  margin-bottom: 24px;
}

.auth-tab {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-premium);
}

.auth-tab.active {
  background: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}

.auth-form { display: flex; flex-direction: column; gap: 16px; }

.auth-form .form-field { gap: 6px; }

.auth-form .form-field label {
  font-size: 0.8rem;
  font-weight: 600;
}

.auth-form .form-field input {
  padding: 12px 16px;
  font-size: 0.9rem;
}

.auth-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--gradient-primary);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-premium);
  margin-top: 8px;
  box-shadow: var(--shadow-sm);
}

.auth-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}

.auth-btn:active { transform: translateY(0); }

/* 登录页微信咨询卡片（底部居中，与品牌区隔离） */
.auth-wechat { margin-top: 24px; padding: 16px 16px 14px; border-radius: var(--radius-lg); background: var(--bg-tertiary, #f1f5f9); border: 1px solid var(--border-color); text-align: center; }
.auth-wechat-head { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.86rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0; cursor: pointer; user-select: none; }
.auth-wechat-head:hover { color: var(--primary); }
.auth-wechat-caret { display: inline-block; font-size: 0.7rem; transition: transform var(--duration-fast) var(--ease-smooth); }
.auth-wechat.open .auth-wechat-caret { transform: rotate(90deg); }
.auth-wechat-body { display: none; margin-top: 12px; }
.auth-wechat.open .auth-wechat-body { display: block; }
.auth-wechat-qr { display: inline-block; padding: 8px; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: all var(--duration-normal) var(--ease-premium); }
.auth-wechat-qr:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.auth-wechat-qr img { display: block; width: 120px; height: 120px; object-fit: contain; border-radius: 8px; }
.auth-wechat-tip { font-size: 0.72rem; color: var(--text-muted); margin-top: 10px; }
@media (max-width: 600px) {
  .auth-wechat-qr img { width: 108px; height: 108px; }
}

.auth-error {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: rgba(244, 63, 94, 0.1);
  color: #F43F5E;
  font-size: 0.82rem;
  font-weight: 500;
  display: none;
}

.auth-error.show { display: block; animation: fadeInUp 0.3s var(--ease-premium); }

/* ---------- 22. Dashboard ---------- */
.dashboard {
  padding: 24px 0 48px;
}

.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}

.dashboard-header .user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.user-greeting h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
}

.user-greeting p {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.logout-btn {
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-premium);
}

.logout-btn:hover {
  border-color: #F43F5E;
  color: #F43F5E;
}

/* Quick Action Grid */
.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.action-card {
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform var(--duration-normal) var(--ease-premium),
              box-shadow var(--duration-normal) var(--ease-smooth);
  border: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.5s var(--ease-premium) backwards;
}

.action-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.action-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--action-color, var(--gradient-primary));
}

.action-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 16px;
  background: var(--action-soft, var(--primary-soft));
}

.action-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.action-card p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.action-card .action-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--action-soft);
  color: var(--action-color);
}

/* 快捷卡标签统一实木色（取消各功能特殊颜色） */
.action-card:not([data-primary="1"]) .action-badge {
  background: var(--wood-soft) !important;
  color: var(--wood-accent) !important;
}
.action-card:not([data-primary="1"])::before {
  background: var(--wood-accent) !important;
}

/* 主操作卡片：实心品牌色，突出首要操作（引导使用） */
.action-card[data-primary="1"] {
  background: var(--gradient-primary);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}
.action-card[data-primary="1"] .action-icon {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.action-card[data-primary="1"] h3 { color: #fff; }
.action-card[data-primary="1"] p { color: rgba(255, 255, 255, 0.85); }
.action-card[data-primary="1"] .action-badge {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.action-card[data-primary="1"]::before { background: transparent; height: 0; }

/* ---------- 会员端：统一淡灰配色（标签图标保留各功能微差色） ---------- */
/* 仅作用于 body[data-role="member"]，教练/管理员端不受影响 */
body[data-role="member"] .action-card {
  background: #F4F5F7;
  border-color: #E5E7EB;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
}
body[data-role="member"] .action-card::before { background: transparent; height: 0; }
body[data-role="member"] .action-card .action-icon {
  background: #FFFFFF;
  color: var(--action-color, #6B7280);   /* 标签（图标）按功能略加不同色 */
}
body[data-role="member"] .action-card h3 { color: #374151; }
body[data-role="member"] .action-card p { color: #9CA3AF; }

/* 主操作卡同样淡灰，仅以稍重边框/阴影突出，不再用实心品牌色 */
body[data-role="member"] .action-card[data-primary="1"] {
  background: #FFFFFF;
  border-color: #D1D5DB;
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.08);
}
body[data-role="member"] .action-card[data-primary="1"] .action-icon {
  background: #F3F4F6;
  color: var(--action-color, #6B7280);
}
body[data-role="member"] .action-card[data-primary="1"] h3 { color: #374151; }
body[data-role="member"] .action-card[data-primary="1"] p { color: #6B7280; }

/* 会员端：统计卡 / KPI / 列表图标 一并统一为淡灰，整体克制 */
body[data-role="member"] .stat-card[class*="grad-"] {
  background: #F4F5F7 !important;
  color: #374151 !important;
  border-color: #E5E7EB !important;
}
body[data-role="member"] .stat-card .stat-value,
body[data-role="member"] .stat-card .stat-label { color: #374151 !important; }
body[data-role="member"] .kpi-card { background: #F4F5F7 !important; }
body[data-role="member"] .kpi-card .kpi-value { color: #374151 !important; }
body[data-role="member"] .data-item-icon { background: #EEF0F3 !important; }

/* 全端隐藏快捷卡图标（会员/教练/管理员一致，按需求去除标签图标），主卡标签改用实木色避免白底白字 */
.action-card .action-icon { display: none; }
body[data-role="member"] .action-card[data-primary="1"] .action-badge {
  background: var(--wood-soft) !important;
  color: var(--wood-accent) !important;
}

/* ---------- 23. Modal / Dialog ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* 必须高于底部标签栏(.mobile-tabbar 1200)，否则手机端弹窗会被 5 个 Tab 遮挡 */
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-normal) var(--ease-smooth);
}

.modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.modal {
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  /* 弹窗自身不滚动，改为「标题栏固定 + 内容区滚动」，避免长表单（如预约课程）底部被裁 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-primary);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-color);
  transform: translateY(20px) scale(0.95);
  transition: transform var(--duration-normal) var(--ease-premium);
}

.modal-overlay.show .modal {
  transform: translateY(0) scale(1);
}

.modal-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  background: var(--bg-primary);
  z-index: 1;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.modal-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bg-tertiary);
  border-radius: 50%;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-premium);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background: #F43F5E;
  color: #fff;
  transform: rotate(90deg);
}

.modal-body {
  padding: 24px;
  /* 内容区独立滚动（flex 子项需 min-height:0 才能正确收缩） */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- 24. Data List Items ---------- */
.data-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.data-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  transition: all var(--duration-fast) var(--ease-premium);
  animation: fadeInUp 0.3s var(--ease-premium) backwards;
}

.data-item:hover {
  border-color: var(--text-muted);
  transform: translateX(4px);
}

.data-item-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.data-item-body { flex: 1; min-width: 0; }

.data-item-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.data-item-desc {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.data-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* 训练计划详情：动作明细（去图标，显示动作全名称 + 具体 chip） */
.plan-ex-item { align-items: stretch; }
.plan-ex-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 6px;
}
.plan-ex-idx {
  flex: 0 0 auto;
  display: inline-block;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px;
  background: rgba(1, 77, 178, 0.1);
  color: #014DB2;
  font-size: 0.78rem; font-weight: 700;
  line-height: 22px; text-align: center;
}
.plan-ex-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 1rem; font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  word-break: break-word;
}
.plan-ex-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 2px;
}
.plan-ex-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem; font-weight: 500;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
.plan-ex-chip.sets { background: rgba(1, 77, 178, 0.1); color: #014DB2; }
.plan-ex-chip.reps { background: rgba(16, 185, 129, 0.12); color: #10B981; }
.plan-ex-chip.weight { background: rgba(245, 158, 11, 0.12); color: #F59E0B; }
.plan-ex-note {
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* 教练/管理员已有计划列表项：分组标签 + 元信息 */
.coach-plan-item-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
}
.coach-plan-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.coach-plan-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 6px;
  font-size: 0.74rem; color: var(--text-muted);
}
.coach-plan-meta-item { display: inline-flex; align-items: center; gap: 4px; }
/* 已有计划列表项：.data-item 默认是横向 flex，这里改为纵向堆叠多行内容 */
.data-item.coach-plan-item {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.coach-plan-item .data-item-actions {
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 6px;
}

/* ===== 总消课统计：按教练聚合周/月 ===== */
.checkin-stats-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.checkin-stat-tile {
  border-radius: 14px;
  padding: 14px 12px;
  color: #fff;
  display: flex; flex-direction: column; gap: 4px;
  text-align: center;
  border: none;
}
.checkin-stat-tile-num {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
}
.checkin-stat-tile-label {
  font-size: 0.72rem;
  opacity: 0.92;
}
.checkin-stat-tile.grad-purple { background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%); }
.checkin-stat-tile.grad-blue { background: linear-gradient(135deg, #014DB2 0%, #3B82F6 100%); }
.checkin-stat-tile.grad-orange { background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%); }

.checkin-stats-block {
  margin-top: 14px;
  padding: 14px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-color);
  border-radius: 14px;
}
.checkin-stats-block-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.checkin-stats-block-title {
  font-size: 0.92rem; font-weight: 600;
  color: var(--text-primary);
}
.checkin-stats-block-range {
  font-size: 0.72rem; color: var(--text-muted);
}
.checkin-stats-rows { display: flex; flex-direction: column; gap: 8px; }
.checkin-stats-row {
  display: grid;
  grid-template-columns: 24px minmax(80px, 1fr) minmax(0, 2fr) auto;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
}
.checkin-stats-rank {
  width: 22px; height: 22px;
  border-radius: 11px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: 0.78rem; font-weight: 700;
  line-height: 22px; text-align: center;
}
.checkin-stats-row:nth-child(1) .checkin-stats-rank { background: rgba(245, 158, 11, 0.18); color: #F59E0B; }
.checkin-stats-namebox { min-width: 0; }
.checkin-stats-name {
  font-size: 0.88rem; font-weight: 600;
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.checkin-stats-phone {
  font-size: 0.7rem; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.checkin-stats-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  overflow: hidden;
  min-width: 0;
}
.checkin-stats-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #014DB2 0%, #3B82F6 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}
.checkin-stats-count {
  font-size: 0.84rem; font-weight: 700;
  color: #014DB2;
  white-space: nowrap;
}

/* 耗课明细：教练 -> 学员 两级 */
.checkin-coach-group { border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: var(--bg-primary, #fff); }
.checkin-coach-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--text-primary, #1e293b); margin-bottom: 6px; }
.checkin-coach-count { font-size: 0.8rem; color: var(--text-secondary, #64748b); font-weight: 600; }
.checkin-student { padding: 8px 0; border-top: 1px dashed var(--border-color, #e2e8f0); }
.checkin-student:first-of-type { border-top: none; padding-top: 2px; }
.checkin-student-head { font-size: 0.9rem; font-weight: 600; color: var(--text-primary, #1e293b); margin-bottom: 4px; }
.checkin-rec-list { display: flex; flex-direction: column; gap: 4px; }
.checkin-rec-item { display: flex; justify-content: space-between; gap: 8px; font-size: 0.82rem; color: var(--text-secondary, #64748b); padding-left: 8px; }
.checkin-rec-course { color: var(--text-primary, #1e293b); font-weight: 500; }
.checkin-rec-meta { white-space: nowrap; }

/* ===== 移动端适配 ===== */
@media (max-width: 600px) {
  .checkin-stats-summary { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .checkin-stat-tile { padding: 12px 8px; border-radius: 12px; }
  .checkin-stat-tile-num { font-size: 1.3rem; }
  .checkin-stat-tile-label { font-size: 0.68rem; }
  .checkin-stats-row {
    grid-template-columns: 22px minmax(70px, 1fr) auto;
    grid-template-areas: "rank name count" "rank bar bar";
    gap: 6px 8px;
  }
  .checkin-stats-rank { grid-area: rank; }
  .checkin-stats-namebox { grid-area: name; }
  .checkin-stats-count { grid-area: count; text-align: right; }
  .checkin-stats-bar { grid-area: bar; }
  .checkin-stats-block { padding: 12px; }
  .checkin-stats-block-title { font-size: 0.86rem; }
  .plan-ex-name { font-size: 0.95rem; }
  .plan-ex-chip { font-size: 0.74rem; padding: 3px 8px; }
  .coach-plan-meta { font-size: 0.7rem; gap: 8px; }
}

.icon-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--ease-premium);
  border: 1px solid var(--border-color);
}

.icon-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.icon-btn.danger:hover {
  background: #F43F5E;
  color: #fff;
  border-color: #F43F5E;
}

/* ---------- 25. Plan / Nutrition Cards ---------- */
.plan-card {
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-tertiary);
  border-left: 4px solid var(--plan-color, var(--color-01));
  animation: fadeInUp 0.3s var(--ease-premium) backwards;
}

.plan-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.plan-card-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
}

.plan-card-body {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.meal-section {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.meal-tag {
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 500;
}

.meal-tag.breakfast { background: rgba(245, 158, 11, 0.12); color: #F59E0B; }
.meal-tag.lunch { background: rgba(16, 185, 129, 0.12); color: #10B981; }
.meal-tag.dinner { background: rgba(139, 92, 246, 0.12); color: #8B5CF6; }
.meal-tag.snack { background: rgba(14, 165, 233, 0.12); color: #0EA5E9; }

/* ---------- 26. Compact Stats ---------- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.stat-card {
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-xs);
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
}

.stat-label {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.stat-card.clickable {
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-premium), box-shadow var(--duration-fast) var(--ease-premium);
}
.stat-card.clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ---------- 27. Module Steps Link Section ---------- */
.modules-link-section {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}

.modules-link-section h3 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.modules-link-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.module-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-premium);
}

.module-link:hover {
  transform: translateY(-2px);
  border-color: var(--module-color, var(--primary));
  color: var(--module-color, var(--primary));
  box-shadow: var(--shadow-sm);
}

.module-link .link-badge {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
}

/* ---------- 28. Empty State ---------- */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.empty-state-icon {
  font-size: 36px;
  margin-bottom: 12px;
  opacity: 0.4;
}

.empty-state p {
  font-size: 0.85rem;
}

/* ---------- 29. Section Divider ---------- */
.section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
}

.section-divider h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

/* 分组标题右侧的小幽灵按钮（如「恢复内置教练」）：order:1 让它排在 ::after 分隔线之后 */
.btn-ghost-sm {
  order: 1;
  flex: 0 0 auto;
  padding: 4px 10px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #014DB2;
  background: rgba(1, 77, 178, 0.08);
  border: 1px solid rgba(1, 77, 178, 0.18);
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.btn-ghost-sm:hover { background: rgba(1, 77, 178, 0.16); }

/* ---------- 30. Form Inline ---------- */
.form-inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-inline .full { grid-column: 1 / -1; }

/* ---------- 体测数据：紧凑指标录入网格 ---------- */
.body-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.body-grid .form-field { gap: 4px; }
.body-grid .form-field label { font-size: 0.72rem; margin-left: 2px; color: var(--text-secondary); }
.body-grid .form-field input { padding: 8px 10px; font-size: 0.85rem; }

@media (max-width: 600px) {
  .form-inline { grid-template-columns: 1fr; }
  .action-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .body-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 31. QR Code Login ---------- */
.qr-login-section {
  margin-top: 20px;
}

.qr-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.qr-divider::before,
.qr-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.qr-divider span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.qr-login-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-premium);
}

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

.qr-login-btn .qr-icon {
  font-size: 1.2rem;
}

/* QR Code Box */
.qr-code-box {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  padding: 12px;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.qr-code-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 2px;
}

.qr-cell {
  background: transparent;
  border-radius: 2px;
  transition: background var(--duration-fast);
}

.qr-cell.on {
  background: #121620;
}

/* ---------- 32. Notification Bell ---------- */
.notif-bell:hover {
  border-color: #F59E0B !important;
  transform: scale(1.05);
}

.notif-bell:hover::after {
  content: '';
}

/* ---------- 33. Mobile-first Redesign (简便 / 易用 / 不臃肿) ---------- */
@media (max-width: 768px) {
  /* 容器收窄居中，留白更克制；底部给 Tab 栏留位 */
  .page-container { padding: 0 14px; }
  .dashboard { padding: 16px 0 88px; }

  /* 头部：头像+问候 左，铃铛+退出 右，始终一行 */
  .dashboard-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 10px;
  }
  .dashboard-header .user-info { gap: 10px; }
  .user-avatar { width: 40px; height: 40px; font-size: 16px; }
  .user-greeting h2 { font-size: 1.05rem; }
  .user-greeting p { font-size: 0.72rem; }
  .notif-bell { width: 38px; height: 38px; font-size: 16px; }
  .logout-btn { display: none; } /* 手机端退出入口只保留「我的」页一处，避免重复 */

  /* 未读悬浮条：更紧凑、更醒目 */
  .unread-banner { margin: 10px 14px 0; padding: 10px 12px; border-radius: 12px; }
  .unread-banner .ub-text { font-size: 0.78rem; }

  /* 统计：2×2 紧凑芯片，去卡片阴影，数字为主 */
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 18px;
  }
  .stat-card {
    padding: 12px 14px;
    border-radius: 14px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .stat-value { font-size: 1.35rem; line-height: 1.1; }
  .stat-label { font-size: 0.72rem; }
  .stat-card.grad-blue,
  .stat-card.grad-green,
  .stat-card.grad-orange,
  .stat-card.grad-purple,
  .stat-card.grad-red { color: #fff; border-color: transparent; }
  .stat-card.grad-blue { background: linear-gradient(135deg, #014DB2 0%, #3B82F6 100%); }
  .stat-card.grad-green { background: linear-gradient(135deg, #10B981 0%, #34D399 100%); }
  .stat-card.grad-orange { background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%); }
  .stat-card.grad-purple { background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%); }
  .stat-card.grad-red { background: linear-gradient(135deg, #F43F5E 0%, #FB7185 100%); }
  .stat-card.grad-blue .stat-value, .stat-card.grad-blue .stat-label,
  .stat-card.grad-green .stat-value, .stat-card.grad-green .stat-label,
  .stat-card.grad-orange .stat-value, .stat-card.grad-orange .stat-label,
  .stat-card.grad-purple .stat-value, .stat-card.grad-purple .stat-label,
  .stat-card.grad-red .stat-value, .stat-card.grad-red .stat-label { color: #fff; }

  /* 快捷功能：2 列紧凑图标卡，去顶部渐变条，扁平清晰 */
  .section-divider { margin: 22px 0 12px; }
  .section-divider h3 { font-size: 0.95rem; }
  .action-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 8px;
  }
  .action-card {
    padding: 14px 12px;
    border-radius: 14px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 94px;
  }
  .action-card::before { height: 0; }   /* 去掉重渐变顶条，更简洁 */
  .action-icon {
    width: 42px; height: 42px; font-size: 20px;
    border-radius: 12px;
  }
  .action-card h3 { font-size: 0.92rem; margin-bottom: 0; }
  .action-card p {
    font-size: 0.72rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .action-card .action-badge { top: 10px; right: 10px; padding: 1px 7px; font-size: 0.66rem; }

  /* 会员端快捷卡：上下高度略收（图1），向教练/管理员端（图2）的紧凑度靠拢。
     注意：基础样式里 .action-icon 带 margin-bottom:16px，在 flex 列布局下会与 gap 叠加成 24px，
     是卡片偏高的主因，这里只对 member 收敛，避免影响已确认合适的 coach/admin。 */
  body[data-role="member"] .action-card { padding: 12px 12px; min-height: 84px; }
  body[data-role="member"] .action-card .action-icon { margin-bottom: 4px; }
  body[data-role="member"] .action-card p { line-height: 1.35; }

  /* 主操作卡片：手机上通栏、横向，作为首要 CTA，更显眼 */
  .action-card[data-primary="1"] {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    min-height: 60px;
    padding: 14px 16px;
  }
  .action-card[data-primary="1"] .action-icon { margin-bottom: 0; width: 44px; height: 44px; }
  .action-card[data-primary="1"] h3 { font-size: 1rem; margin-bottom: 2px; }
  .action-card[data-primary="1"] p { font-size: 0.74rem; }

  /* 列表项更紧凑 */
  .data-list { gap: 8px; }
  .data-item { padding: 12px 14px; gap: 10px; border-radius: 12px; }
  .data-item-icon { width: 32px; height: 32px; font-size: 16px; border-radius: 10px; }
  .data-item-title { font-size: 0.84rem; }
  .data-item-desc { font-size: 0.72rem; }

  /* 弹窗：底部抽屉，统一收小，尽量少占屏 */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100%;
    max-height: 80vh;   /* 回退：不支持 dvh 的浏览器（含旧版 Safari/微信内核） */
    max-height: 80dvh;  /* 移动端地址栏伸缩时更准确，避免底部被裁 */
    border-radius: 16px 16px 0 0;
    margin-top: auto;
  }
  .modal-header { padding: 12px 14px; border-radius: 16px 16px 0 0; }
  .modal-header h3 { font-size: 1rem; }
  .modal-close { width: 30px; height: 30px; font-size: 1.1rem; line-height: 1; }
  /* 底部留出 iOS 手势横条安全区，避免最后一个按钮被遮挡/顶到屏幕边缘 */
  .modal-body { padding: 12px 14px calc(18px + env(safe-area-inset-bottom, 0px)); }
  /* 弹窗内元素同步收紧，避免内容撑开占满整屏 */
  .modal-body .auth-form { gap: 10px; }
  .modal-body .form-field label { font-size: 0.76rem; margin-bottom: 4px; }
  .modal-body .form-field input,
  .modal-body .form-field select { padding: 10px 12px; font-size: 0.88rem; border-radius: 10px; }
  .modal-body .auth-btn { padding: 11px; font-size: 0.9rem; border-radius: 10px; }
  .modal-body .section-divider { margin: 14px 0 8px; }
  .modal-body .section-divider h3 { font-size: 0.88rem; }
  .modal-body .data-item { padding: 10px 12px; }
  .modal-body .data-list { gap: 6px; }
  .modal-body .kpi-row { gap: 8px; margin-bottom: 10px; }

  /* 移动端：首页不再展示长列表（已移入「约课 / 训练」标签页），避免下滑 */
  .dash-extra { display: none !important; }

  /* 登录页：单栏、紧凑、清晰，尽量一屏装下 */
  .auth-wrapper { padding: 12px; align-items: center; }
  .auth-card { max-width: 440px; padding: 20px 16px; border-radius: 18px; }
  .auth-logo { margin-bottom: 12px; }
  .auth-logo h1 { font-size: 1.3rem; }
  .auth-tabs { gap: 4px; padding: 4px; margin-bottom: 16px; }
  .auth-tab { flex: 1 1 0; font-size: 0.8rem; padding: 9px 4px; }   /* 三个等宽一排 */
  .auth-form { gap: 12px; }
  .auth-btn { padding: 12px; }
  .auth-wechat { margin-top: 16px; padding: 12px 12px 10px; }
  .auth-wechat-head { margin-bottom: 8px; }
  .auth-wechat-qr img { width: 100px; height: 100px; }
  .auth-form .form-field input { padding: 13px 14px; font-size: 0.95rem; border-radius: 12px; }
  .auth-btn { padding: 14px; border-radius: 12px; font-size: 0.95rem; }
  .auth-split { flex-direction: column; }
  .auth-login-panel { padding-right: 0; }
  .auth-qr-panel {
    flex: 1 1 auto; padding-left: 0;
    border-left: none; border-top: 1px solid var(--border-color);
    margin-top: 20px; padding-top: 20px;
  }
  .auth-qr-panel::before { display: none; }

  /* 表格保留横向滚动 */
  .data-table { min-width: 500px; }
}

/* 矮屏手机：继续收紧，确保登录页不滚动、整屏可见 */
@media (max-height: 720px) {
  .auth-wrapper { padding: 8px; }
  .auth-card { padding: 16px 14px; }
  .auth-logo { margin-bottom: 10px; }
  .auth-logo .logo-icon { width: 40px; height: 40px; }
  .auth-logo h1 { font-size: 1.2rem; }
  .auth-tabs { margin-bottom: 12px; }
  .auth-form { gap: 10px; }
  .auth-btn { padding: 11px; }
  .auth-wechat { margin-top: 12px; padding: 10px; }
  .auth-wechat-head { margin-bottom: 6px; }
  .auth-wechat-qr img { width: 88px; height: 88px; }
}

@media (max-width: 480px) {
  .page-container { padding: 0 12px; }
  .dashboard { padding: 14px 0 88px; }
  .user-greeting h2 { font-size: 1rem; }
  .stat-value { font-size: 1.2rem; }
  .action-grid { gap: 10px; }
  .action-card { padding: 12px 10px; min-height: 86px; gap: 6px; }
  .action-icon { width: 38px; height: 38px; font-size: 18px; border-radius: 11px; }
  .action-card h3 { font-size: 0.86rem; }
  .action-card p { font-size: 0.68rem; }
  /* 会员端快捷卡：≤480px 再略收上下高度 */
  body[data-role="member"] .action-card { padding: 11px 10px; min-height: 78px; }
  body[data-role="member"] .action-card .action-icon { margin-bottom: 4px; }
  .auth-logo .logo-icon { width: 44px; height: 44px; font-size: 22px; }
  .qr-code-box { width: 160px; height: 160px; }
}

/* ---------- 多选约课（学员端） ---------- */
.booking-multi-row {
  display: flex;
  flex-wrap: wrap;           /* 让「加一节/移除」按钮换到下一行，不再挤压字段宽度 */
  gap: 12px;
  align-items: flex-start;
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.booking-row-ops {
  display: flex;
  gap: 8px;
  flex: 0 0 100%;            /* 独占整行 */
  width: 100%;
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px dashed var(--border-color, #e2e8f0);
}
.booking-row-ops .btn-ghost-sm { padding: 4px 10px; font-size: 12px; }
.pwd-result { user-select: all; word-break: break-all; }
.multi-cb {
  width: 20px;
  height: 20px;
  margin-top: 4px;
  accent-color: var(--color-01, #014DB2);
  cursor: pointer;
  flex: 0 0 auto;
}
.booking-multi-info { flex: 1 1 auto; min-width: 0; }
.booking-multi-title { font-weight: 600; font-size: 0.92rem; margin-bottom: 8px; }
.booking-multi-controls {
  display: grid;
  /* 两行两列：日期|时间、教练|时长；日期列略宽（标签较长），字段区已全宽（按钮换行） */
  grid-template-columns: 1.1fr 1fr;
  gap: 12px 10px;
}
.mini-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.booking-multi-controls .mini-label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary, #64748b); }
.booking-multi-controls .mini-select,
.booking-multi-controls .mini-input {
  width: 100%; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--border-color, #e2e8f0); border-radius: 8px;
  font-size: 0.95rem; line-height: 1.3; background: #fff;
  text-overflow: ellipsis;
}
/* 手机端：再大一档，贴近原版舒适度 */
@media (max-width: 768px) {
  .booking-multi-controls { gap: 12px 10px; }
  .booking-multi-controls .mini-label { font-size: 0.85rem; }
  .booking-multi-controls .mini-select,
  .booking-multi-controls .mini-input { padding: 11px 12px; font-size: 1rem; border-radius: 10px; }
}

/* ---------- 训练计划编辑弹窗：放宽宽高，避免「对话框太过狭小」 ---------- */
.plan-edit-modal { max-width: 620px; }
@media (max-width: 600px) {
  /* 手机端底部抽屉：加高，让「个性化备注」多行框与动作明细舒适可见 */
  #modalOverlay .plan-edit-modal { max-height: 92vh; }
  #modalOverlay .plan-edit-modal .form-field textarea { min-height: 110px; }
}

/* ---------- 训练计划模板（管理端/教练端共享） ---------- */
.template-box { margin: 4px 0 8px; display: flex; flex-direction: column; gap: 12px; }
.template-select-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.template-select-row .form-field { flex: 1 1 220px; margin-bottom: 0; }
.template-btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.template-action-checks {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px;
  max-height: 260px; overflow-y: auto; padding: 4px 2px;
}
.tpl-check {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer; user-select: none;
  background: #f1f5f9; border: 1px solid #e2e8f0; color: #334155; font-size: 0.9rem;
  transition: all .15s ease;
}
.tpl-check:hover { border-color: #cbd5e1; background: #e8eef6; }
.tpl-check input { width: 16px; height: 16px; margin: 0; accent-color: #014DB2; }
.tpl-check:has(input:checked) {
  background: rgba(1,77,178,0.1); border-color: #014DB2; color: #014DB2; font-weight: 600;
}

/* 独立表单字段（如「代学员预约」选择学员） */
.booking-form-field { margin-bottom: 12px; }
.booking-form-field > .mini-label {
  display: block; font-size: 0.78rem; font-weight: 600;
  color: var(--text-secondary, #64748b); margin-bottom: 6px;
}
.booking-form-field select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  font-size: 0.86rem;
  background: #fff;
  color: var(--text-primary, #1e293b);
}

/* ---------- 训练计划：结构化动作行 ---------- */
.action-rows { display: flex; flex-direction: column; gap: 8px; }
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  padding: 8px 10px;
}
.action-row .action-idx { font-size: 0.78rem; color: var(--text-secondary, #64748b); width: 20px; }
.action-row .action-name { flex: 1 1 130px; min-width: 110px; }
.action-row .action-sets { flex: 0 0 62px; width: 62px; }
.action-row .action-reps { flex: 0 0 62px; width: 62px; }
.action-row .action-weight { flex: 0 1 92px; min-width: 80px; }
.action-row input {
  padding: 6px 8px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  font-size: 0.82rem;
  background: #fff;
}
.action-row .action-tag { font-size: 0.72rem; color: var(--text-secondary, #64748b); }

/* ---------- 训练类型：自定义类型可删减 ---------- */
.type-chip-box { display: flex; flex-wrap: wrap; gap: 8px; }
.type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(1,77,178,0.08);
  border: 1px solid rgba(1,77,178,0.25);
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  font-size: 0.8rem;
}
.type-chip-del {
  border: none;
  background: rgba(239,68,68,0.12);
  color: #EF4444;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
}
.type-chip-del:hover { background: #EF4444; color: #fff; }
@media (max-width: 600px) {
  .action-row .action-name { flex: 1 1 100%; }
}

/* ---------- 训练计划：手动添加动作（整行通栏、更大更舒展） ---------- */
.manual-action-add { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.manual-action-add input {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  font-size: 0.98rem;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  background: #fff;
  line-height: 1.4;
}
.manual-action-add input:focus {
  outline: none;
  border-color: var(--primary, #014DB2);
  box-shadow: 0 0 0 4px var(--primary-soft, rgba(1,77,178,0.12));
}
.manual-action-add .btn-secondary { width: 100%; padding: 13px; font-size: 0.95rem; border-radius: 12px; }

/* 管理端：签到下课记录单用户查询栏 */
.checkin-search-bar { display: flex; gap: 10px; align-items: flex-end; margin: 4px 0 16px; flex-wrap: wrap; }
.checkin-search-bar .form-field { flex: 1 1 240px; margin-bottom: 0; }
.checkin-search-bar .btn-secondary { white-space: nowrap; padding: 11px 20px; }
.checkin-search-bar .btn-ghost-sm { white-space: nowrap; }

/* ===== Mobile Bottom Tab Bar (手机端 5 按钮) ===== */
.mobile-tabbar { display: none; }
body.logged-in .mobile-tabbar {
  display: flex;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1200;
  /* box-sizing:border-box，故安全区要加进高度，否则 iPhone 上图标被压扁 */
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: #ffffff;
  border-top: 1px solid var(--border-color, #e5e7eb);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
}
/* 弹窗打开时隐藏底部标签栏：彻底避免 5 个 Tab 压住弹窗内容（移动端） */
body.modal-open .mobile-tabbar { display: none !important; }
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  font-size: 11px;
  padding: 4px 0;
  transition: color 0.15s;
}
.tab-item { position: relative; }
.tab-item .tab-ico { position: relative; display: inline-flex; line-height: 1; }
.tab-item .tab-ico svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tab-item .tab-label { font-size: 11px; }
.tab-item.active { color: #014DB2; }
.tab-badge {
  position: absolute; top: -5px; right: -9px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 9px; background: #F43F5E; color: #fff;
  font-size: 10px; font-weight: 500; line-height: 16px;
  display: none; align-items: center; justify-content: center;
}
/* 学员端首页未读通知悬浮条（强化通知可见性，替代学员端缺失的铃铛红点） */
.unread-banner {
  display: none;
  align-items: center;
  gap: 10px;
  margin: 14px 16px 0;
  padding: 11px 14px;
  background: rgba(244, 63, 94, 0.07);
  border: 1px solid rgba(244, 63, 94, 0.22);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.unread-banner:hover { background: rgba(244, 63, 94, 0.11); }
.unread-banner:active { transform: scale(0.99); }
.unread-banner .ub-ico {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #F43F5E;
}
.unread-banner .ub-ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.unread-banner .ub-text {
  flex: 1 1 auto;
  min-width: 0;
  color: #1f2937;
  font-size: 13px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.unread-banner .ub-count {
  flex: 0 0 auto;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: #F43F5E; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px;
  text-align: center;
}
.unread-banner .ub-go {
  flex: 0 0 auto;
  color: #F43F5E;
  font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
@media (min-width: 769px) {
  body.logged-in .mobile-tabbar { display: none; }
}
@media (max-width: 768px) {
  /* 底部预留标签栏高度（含 iPhone 安全区），避免最后一张卡片被压住 */
  body.logged-in #dashboardView .dashboard { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
/* 我的 / 资料弹窗 */
.profile-modal { padding: 6px 2px; }
.profile-head { display: flex; align-items: center; gap: 14px; padding: 10px 4px 16px; }
.profile-avatar {
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, #014DB2, #0A6CFF);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700;
}
.profile-id h3 { margin: 0; font-size: 18px; }
.profile-id p { margin: 4px 0 0; color: var(--text-muted, #6b7280); font-size: 13px; }
.profile-tips {
  background: #f7f9fc; border-radius: 10px; padding: 12px 14px;
  color: #475569; font-size: 13px; margin-bottom: 14px;
}
.profile-logout {
  width: 100%; padding: 12px; border: none; border-radius: 10px;
  background: #F43F5E; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
  margin-top: 16px;
}

/* ===== 底部标签页（单页内联视图，替代大弹窗） ===== */
.tab-page { padding: 14px 0 calc(92px + env(safe-area-inset-bottom, 0px)); }
.tab-page-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 12px;
}
.tab-page-title {
  margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--text-primary, #0f172a);
}
.tab-home-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(1,77,178,0.25); background: rgba(1,77,178,0.06);
  color: #014DB2; font-size: 0.76rem; font-weight: 700;
}
.tab-page-body { display: block; }
/* 标签页内元素收紧，尽量单屏显示 */
.tab-page-body .section-divider:first-child { margin-top: 4px; }
.tab-page-body .stat-card { box-shadow: none; }

/* ===== 我的：信息卡 / 进度条 / 菜单 ===== */
.profile-page { padding: 4px 2px; }
.profile-info-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; margin: 10px 0 4px;
}
.profile-cell {
  background: var(--bg-secondary, #f7f9fc);
  border: 1px solid var(--border-color, #e5e9f0);
  border-radius: 14px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.profile-cell-value { font-size: 1.2rem; font-weight: 800; line-height: 1.15; color: #0f172a; }
.profile-cell-label { font-size: 0.72rem; color: var(--text-muted, #6b7280); }
.profile-progress { margin: 14px 0 2px; }
.profile-progress-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.8rem; color: var(--text-secondary, #475569); margin-bottom: 6px;
}
.profile-progress-pct { font-weight: 800; color: #014DB2; }
.profile-progress-bar {
  height: 8px; background: #e8eef7; border-radius: 999px; overflow: hidden;
}
.profile-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #014DB2 0%, #3B82F6 100%);
}
.profile-menu {
  display: flex; flex-direction: column;
  border: 1px solid var(--border-color, #e5e9f0);
  border-radius: 14px; overflow: hidden; margin-top: 4px;
  background: #fff;
}
.profile-menu-item {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 13px 16px; background: transparent; cursor: pointer; text-align: left;
  border: 0; border-bottom: 1px solid var(--border-color, #eef2f7);
  font-size: 0.92rem; color: var(--text-primary, #1e293b);
}
.profile-menu-item:last-child { border-bottom: 0; }
.profile-menu-arrow { color: #94a3b8; font-size: 1.15rem; line-height: 1; }

/* 禁用态按钮：明确不可点，避免误解 */
.auth-btn:disabled,
button.auth-btn[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* ===== 手机端合理化：首页不堆长列表 / 不重复标签入口，卡片更紧凑 ===== */
@media (max-width: 768px) {
  /* 首页不再展示管理面板长列表（已在「课程 / 人员 / 我的」标签页内） */
  #adminPanel { display: none !important; }

  /* 与底部标签重复的入口，首页不再重复出现 */
  body[data-role="member"] .action-card[data-action="plan"],
  body[data-role="coach"] .action-card[data-action="coachSchedule"],
  body[data-role="coach"] .action-card[data-action="plan"],
  body[data-role="admin"] .action-card[data-action="course"],
  body[data-role="admin"] .action-card[data-action="staffMgmt"] { display: none !important; }

  /* 教练 / 管理员：3 列紧凑图标卡，只留图标 + 标题，降低高度 */
  body[data-role="coach"] .action-grid,
  body[data-role="admin"] .action-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  body[data-role="coach"] .action-card,
  body[data-role="admin"] .action-card { min-height: 74px; padding: 12px 10px; gap: 6px; }
  body[data-role="coach"] .action-card .action-icon,
  body[data-role="admin"] .action-card .action-icon { width: 34px; height: 34px; font-size: 17px; border-radius: 10px; }
  body[data-role="coach"] .action-card h3,
  body[data-role="admin"] .action-card h3 { font-size: 0.82rem; }
  body[data-role="coach"] .action-card:not([data-primary="1"]) p,
  body[data-role="admin"] .action-card:not([data-primary="1"]) p { display: none; }
  body[data-role="coach"] .action-card .action-badge,
  body[data-role="admin"] .action-card .action-badge { top: 8px; right: 8px; font-size: 0.6rem; padding: 1px 6px; }

  /* 主操作卡（首要 CTA）仍通栏，并保留说明文字 */
  body[data-role="coach"] .action-card[data-primary="1"],
  body[data-role="admin"] .action-card[data-primary="1"] {
    grid-column: 1 / -1; flex-direction: row; align-items: center;
    min-height: 56px; padding: 12px 14px; gap: 12px;
  }
  body[data-role="coach"] .action-card[data-primary="1"] p,
  body[data-role="admin"] .action-card[data-primary="1"] p { display: block; }

  /* 整体再收紧，会员端首页尽量一屏放下 */
  .dashboard { padding: 12px 0 84px; }
  .stats-row { gap: 8px; margin-bottom: 14px; }
  .stat-card { padding: 10px 12px; }
  .stat-value { font-size: 1.2rem; }
  .stat-label { font-size: 0.68rem; }
  .section-divider { margin: 16px 0 10px; }
  .unread-banner { margin: 8px 14px 0; }
  .action-grid { margin-bottom: 4px; }
}

/* ===== AI 思考参谋：浮动按钮 + 对话弹窗 ===== */
.floating-ai-btn {
  position: fixed;
  right: 22px;
  bottom: 26px;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #014DB2, #2E7BD6);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  /* 默认隐藏，renderDashboard 仅对教练/管理员显示 */
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(1, 77, 178, 0.4);
  /* 低于弹层 1300，高于底部标签栏 1200 */
  z-index: 1250;
  transition: transform var(--duration-fast) var(--ease-premium), box-shadow var(--duration-fast) var(--ease-premium);
}
.floating-ai-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 12px 30px rgba(1, 77, 178, 0.5);
}

/* 手机端：避开底部 5 个标签栏 */
@media (max-width: 768px) {
  .floating-ai-btn {
    right: 16px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
    font-size: 24px;
  }
}

/* 对话弹窗布局：标题固定 + 消息区滚动 + 输入区置底 */
.ai-chat-modal { max-width: 640px; max-height: 88vh; }
.ai-chat-modal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  overflow: hidden;
}
.ai-note {
  margin: 0;
  flex: 0 0 auto;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-secondary);
  background: rgba(1, 77, 178, 0.08);
  border-radius: 10px;
  padding: 8px 12px;
}
.ai-msg-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 56vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}
.ai-empty {
  margin: auto;
  padding: 20px;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-muted, #9ca3af);
}
.ai-msg { display: flex; }
.ai-msg-user { justify-content: flex-end; }
.ai-msg-assistant { justify-content: flex-start; }
.ai-msg-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-msg-user .ai-msg-bubble {
  background: #014DB2;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.ai-msg-assistant .ai-msg-bubble {
  background: var(--bg-tertiary, #f1f5f9);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-bottom-left-radius: 4px;
}
.ai-msg-bubble.ai-loading::after {
  content: '…';
  animation: aiDots 1.2s steps(1, end) infinite;
}
@keyframes aiDots {
  0%   { content: '…'; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
}
.ai-input-row {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.ai-input {
  flex: 1 1 auto;
  resize: none;
  min-height: 44px;
  max-height: 120px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  background: var(--bg-primary);
  color: var(--text-primary);
}
.ai-input:focus {
  outline: none;
  border-color: #014DB2;
  box-shadow: 0 0 0 3px rgba(1, 77, 178, 0.15);
}
.ai-btn-group { display: flex; gap: 8px; flex: 0 0 auto; }
.ai-send { white-space: nowrap; padding: 10px 18px; }
.ai-clear {
  white-space: nowrap;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary, #f1f5f9);
  color: var(--text-secondary);
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.85rem;
}
.ai-clear:hover { background: #e5e7eb; }

@media (max-width: 600px) {
  .ai-chat-modal { max-width: 100%; max-height: 92vh; }
  .ai-chat-modal .modal-body { padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .ai-msg-bubble { max-width: 88%; }
}

/* ===== 首屏加载遮罩 =====
   首屏进入（登录/刷新）时，renderDashboard 需等待 initCache + 多个 API，
   期间页面处于半渲染状态。用不透明遮罩盖住，渲染完成（hideAppLoader）即隐藏，
   彻底消除移动端"加载时卡片乱闪、页面混乱"的观感。
   层级低于 toast(9999)，高于弹窗(1300)/底部标签栏(1200)，确保完全覆盖。 */
.app-loader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--bg-primary, #ffffff);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
body.app-loading .app-loader { display: flex; }
.app-loader-spinner {
  width: 38px; height: 38px;
  border: 3px solid rgba(1, 77, 178, 0.18);
  border-top-color: #014DB2;
  border-radius: 50%;
  animation: app-loader-spin 0.8s linear infinite;
}
.app-loader-text {
  color: #014DB2;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
@keyframes app-loader-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .app-loader-spinner { animation-duration: 1.6s; }
}

/* ===== 可折叠区块（移动端长列表默认折叠，点击标题展开） ===== */
.collapsible-section { margin-top: 6px; }
.collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 12px 2px;
  background: none;
  border: none;
  border-top: 1px solid var(--border-color, #e5e9f0);
  cursor: pointer;
  text-align: left;
}
.collapsible-title { font-size: 0.95rem; font-weight: 700; color: var(--text-primary, #0f172a); }
.collapsible-caret { color: var(--text-muted, #6b7280); font-size: 0.8rem; transition: transform 0.15s; }
.collapsible-body { padding: 4px 0 8px; }

/* 会员端「我的」页：手机号半隐藏 + 该区域尺寸缩小 */
.profile-id p.member-sub {
  font-size: 0.72rem;
  margin-top: 2px;
  color: var(--text-muted, #6b7280);
  letter-spacing: 0.02em;
}