/* ============================================================
   部落冲突部落战统计工具 - 梦幻科技感 UI 设计系统 v3
   设计理念：Fantasy SaaS + 紫蓝渐变 + 白色玻璃拟态
   设计系统日期：2026-06-15
============================================================ */

/* ============================================================
   LAYER 1: 设计令牌系统 (Design Tokens)
   - 原始色值 → 语义令牌 → 组件令牌 三层体系
   - 冷色调浅灰白背景层次
   - 4px 基准间距阶梯
   - 7 级排版阶梯
============================================================ */

:root {
  /* ---- 原始色值 Palette ---- */
  --palette-obsidian: #F0F2FF;
  --palette-deep-blue: #F7F9FF;
  --palette-slate: #ffffff;
  --palette-charcoal: #ffffff;
  --palette-dark-steel: #EEF2FF;
  --palette-steel: #E0E7DE;
  --palette-muted-steel: #94A3B8;
  --palette-silver: #475569;
  --palette-cloud: #334155;
  --palette-frost: #1E293B;

  --palette-violet: #8B5CF6;
  --palette-violet-bright: #A78BFA;
  --palette-violet-deep: #7C3AED;
  --palette-violet-wash: rgba(139, 92, 246, 0.08);
  --palette-blue: #3B82F6;
  --palette-blue-bright: #60A5FA;
  --palette-blue-wash: rgba(59, 130, 246, 0.08);
  --palette-rose: #F43F5E;
  --palette-rose-wash: rgba(244, 63, 94, 0.08);
  --palette-emerald: #10B981;
  --palette-emerald-wash: rgba(16, 185, 129, 0.08);
  --palette-indigo: #6366F1;
  --palette-indigo-wash: rgba(99, 102, 241, 0.08);
  --palette-amber: #F59E0B;
  --palette-amber-bright: #FBBF24;
  --palette-amber-wash: rgba(245, 158, 11, 0.08);

  /* ---- 语义背景色 Semantic Backgrounds ---- */
  --bg-root: var(--palette-obsidian);
  --bg-base: var(--palette-deep-blue);
  --bg-surface: var(--palette-slate);
  --bg-elevated: var(--palette-charcoal);
  --bg-overlay: var(--palette-dark-steel);
  --bg-input: #ffffff;

  /* ---- 语义文字色 ---- */
  --text-primary: var(--palette-frost);
  --text-secondary: var(--palette-silver);
  --text-tertiary: var(--palette-muted-steel);
  --text-accent: var(--palette-violet);
  --text-on-accent: #ffffff;

  /* ---- 语义强调色 ---- */
  --accent: var(--palette-violet);
  --accent-bright: var(--palette-violet-bright);
  --accent-deep: var(--palette-violet-deep);
  --accent-glow: rgba(139, 92, 246, 0.10);
  --accent-border: rgba(139, 92, 246, 0.20);
  --accent-border-strong: rgba(139, 92, 246, 0.35);

  --danger: var(--palette-rose);
  --danger-glow: rgba(244, 63, 94, 0.10);
  --danger-border: rgba(244, 63, 94, 0.20);

  --success: var(--palette-emerald);
  --success-glow: rgba(16, 185, 129, 0.10);

  --info: var(--palette-blue);
  --warning: var(--palette-amber);

  /* ---- 排版系统 Typography (7级阶梯) ---- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Consolas', monospace;

  --text-3xs: 0.625rem;   /* 10px - 微标签 */
  --text-2xs: 0.6875rem;  /* 11px - 辅助文字 */
  --text-xs: 0.75rem;     /* 12px - 标签/说明 */
  --text-sm: 0.8125rem;   /* 13px - 正文小 */
  --text-base: 0.875rem;  /* 14px - 正文 */
  --text-lg: 1rem;        /* 16px - 标题 */
  --text-xl: 1.25rem;     /* 20px - 大标题 */
  --text-2xl: 1.5rem;     /* 24px - 数值 */
  --text-3xl: 1.75rem;    /* 28px - 统计数值 */

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- 间距系统 Spacing (4px 基准) ---- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */

  /* ---- 圆角系统 ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* ---- 阴影系统 Elevation ---- */
  --shadow-none: 0 0 0 0 transparent;
  --shadow-sm: 0 1px 3px rgba(100, 120, 200, 0.06);
  --shadow-md: 0 4px 12px rgba(100, 120, 200, 0.08);
  --shadow-lg: 0 8px 30px rgba(100, 120, 200, 0.08);
  --shadow-xl: 0 16px 48px rgba(100, 120, 200, 0.12);
  --shadow-glow: 0 0 20px rgba(139, 92, 246, 0.12);
  --shadow-glow-lg: 0 0 32px rgba(139, 92, 246, 0.18);
  --shadow-inner: inset 0 1px 2px rgba(100, 120, 200, 0.06);

  /* ---- 边框系统 ---- */
  --border-thin: 1px solid #EEF2FF;
  --border-subtle: 1px solid rgba(224, 231, 222, 0.6);
  --border-accent: 1px solid var(--accent-border);
  --border-accent-strong: 1px solid var(--accent-border-strong);

  /* ---- 动效系统 Easing ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --duration-instant: 80ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-glacial: 600ms;

  --transition-colors: color var(--duration-fast) var(--ease-in-out),
                        background-color var(--duration-fast) var(--ease-in-out),
                        border-color var(--duration-fast) var(--ease-in-out),
                        box-shadow var(--duration-fast) var(--ease-in-out);
  --transition-transform: transform var(--duration-normal) var(--ease-out-expo);
  --transition-all: all var(--duration-fast) var(--ease-in-out);

  /* ---- 组件级颜色 ---- */
  --role-leader: #8B5CF6;
  --role-vice-leader: #3B82F6;
  --role-member: #94A3B8;
  --rate-bar-bright: #5dd879;
  --nav-bg-blur: rgba(255, 255, 255, 0.85);
  --input-focus-bg: #ffffff;
  --modal-overlay-bg: rgba(100, 120, 200, 0.25);
  --table-header-bg: rgba(139, 92, 246, 0.04);
  --absent-header-bg: rgba(139, 92, 246, 0.04);
  --multi-select-footer-bg: rgba(139, 92, 246, 0.03);
  --btn-ripple: rgba(139, 92, 246, 0.15);
  --spinner-track: rgba(139, 92, 246, 0.15);
  --loading-overlay-bg: rgba(247, 249, 255, 0.7);
  --select-tag-remove-hover-bg: rgba(244, 63, 94, 0.12);
  --card-top-line: rgba(139, 92, 246, 0.20);
  --avatar-gradient-start: rgba(139, 92, 246, 0.12);
  --avatar-gradient-end: rgba(59, 130, 246, 0.08);
  --war-banner-glow: rgba(139, 92, 246, 0.06);
  --member-hover-glow: rgba(139, 92, 246, 0.10);
  --tag-hover-shadow: rgba(139, 92, 246, 0.12);
  --placeholder-muted: rgba(148, 163, 184, 0.5);
  --placeholder-disabled: rgba(148, 163, 184, 0.35);
  --auth-card-border-top: rgba(139, 92, 246, 0.30);
  --scrollbar-thumb: #CBD5E1;
  --scrollbar-thumb-hover: #94A3B8;

  /* ---- 品牌渐变 ---- */
  --brand-gradient: linear-gradient(135deg, var(--palette-violet) 0%, var(--palette-indigo) 55%, var(--palette-blue) 100%);
  --brand-gradient-full: linear-gradient(135deg, var(--palette-violet) 0%, var(--palette-indigo) 50%, var(--palette-blue) 100%);
  --brand-gradient-alt: linear-gradient(135deg, var(--palette-violet), var(--palette-blue));

  /* ---- 选择文本 ---- */
  --selection-bg: rgba(139, 92, 246, 0.18);

  /* ---- 按钮阴影 ---- */
  --btn-primary-shadow: 0 2px 4px rgba(139, 92, 246, 0.15);
  --btn-primary-shadow-hover: 0 4px 16px rgba(139, 92, 246, 0.25);
  --btn-primary-shadow-active: 0 1px 2px rgba(139, 92, 246, 0.15);

  /* ---- 导航品牌图标 ---- */
  --nav-brand-icon-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);

  /* ---- 光泽效果 ---- */
  --shimmer-highlight: rgba(255, 255, 255, 0.15);
  --shimmer-highlight-strong: rgba(255, 255, 255, 0.35);
  --selected-option-hover-bg: rgba(139, 92, 246, 0.12);

  /* ---- 战争横幅 ---- */
  --war-banner-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.06), rgba(59, 130, 246, 0.04));

  /* ---- 认证页面背景 ---- */
  --auth-page-gradient-1: rgba(139, 92, 246, 0.05);
  --auth-page-gradient-2: rgba(59, 130, 246, 0.04);
  --auth-page-gradient-3: rgba(99, 102, 241, 0.03);
  --auth-page-grid-opacity: 0.025;
  --auth-page-orb-primary: rgba(139, 92, 246, 0.08);
  --auth-page-orb-secondary: rgba(59, 130, 246, 0.06);

  /* ---- 认证卡片 ---- */
  --auth-card-bg: rgba(255, 255, 255, 0.90);
  --auth-card-shadow: 0 8px 30px rgba(100, 120, 200, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --auth-card-glow: linear-gradient(180deg, rgba(139, 92, 246, 0.05) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(59, 130, 246, 0.03) 100%);

  /* ---- 认证品牌图标 ---- */
  --auth-icon-shadow: 0 4px 28px rgba(139, 92, 246, 0.3), 0 0 0 1px rgba(139, 92, 246, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  --auth-icon-highlight: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, transparent 100%);

  /* ---- 认证标签/输入框 ---- */
  --auth-tabs-bg: rgba(139, 92, 246, 0.05);
  --auth-tabs-border: rgba(139, 92, 246, 0.10);
  --auth-tab-active-shadow: 0 2px 10px rgba(139, 92, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  --auth-input-focus-ring: 0 0 0 3px rgba(139, 92, 246, 0.10), inset 0 1px 2px rgba(0, 0, 0, 0.02);
  --auth-password-toggle-hover: rgba(139, 92, 246, 0.08);
  --auth-password-toggle-active: rgba(139, 92, 246, 0.12);

  /* ---- 认证提交按钮 ---- */
  --auth-submit-shadow: 0 4px 28px rgba(139, 92, 246, 0.25), 0 0 0 1px rgba(139, 92, 246, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --auth-submit-shadow-hover: 0 6px 24px rgba(139, 92, 246, 0.35);
  --auth-submit-shadow-active: 0 2px 8px rgba(139, 92, 246, 0.2);
  --auth-submit-spinner-track: rgba(255, 255, 255, 0.3);
  --auth-submit-shine: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent);

  /* ---- 认证底部提示 ---- */
  --auth-hint-border: rgba(139, 92, 246, 0.10);
}

/* ============================================================
   LAYER 2: 全局重置与基础样式
============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color var(--duration-normal) var(--ease-in-out),
              color var(--duration-normal) var(--ease-in-out);
}

/* ---- 选择文本 ---- */
::selection {
  background: rgba(139, 92, 246, 0.18);
  color: var(--text-primary);
}

/* ---- 焦点可见性 (无障碍) ---- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---- 自定义滚动条 ---- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
  transition: background var(--duration-fast) var(--ease-in-out);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* ---- 减少动画偏好 ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   LAYER 3: 顶部导航栏
============================================================ */

.top-nav {
  background: var(--bg-surface);
  border-bottom: var(--border-thin);
  padding: 0 var(--space-6);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: var(--nav-bg-blur);
  transition: background-color var(--duration-normal) var(--ease-in-out),
              border-color var(--duration-normal) var(--ease-in-out);
}

/* 品牌标识 */
.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.nav-brand-icon {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, var(--accent), var(--info));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  color: var(--text-on-accent);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
  transition: transform var(--duration-fast) var(--ease-out-back);
}

.nav-brand:hover .nav-brand-icon {
  transform: scale(1.08) rotate(-5deg);
}

.nav-brand-text {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.nav-brand-text span {
  color: var(--text-accent);
}

/* 导航中间区域 */
.nav-center {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  max-width: 480px;
  margin: 0 var(--space-6);
}

.nav-war-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
}

/* 导航操作区 */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* 存储模式指示器 */
#storageIndicator {
  font-size: var(--text-2xs) !important;
  margin-right: var(--space-2);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
}

/* ============================================================
   LAYER 4: 主布局
============================================================ */

.main-layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 0;
  min-height: calc(100vh - 56px);
}

.left-panel {
  background: var(--bg-surface);
  border-right: var(--border-thin);
  overflow-y: auto;
  max-height: calc(100vh - 56px);
  position: sticky;
  top: 56px;
  scrollbar-gutter: stable;
  transition: background-color var(--duration-normal) var(--ease-in-out),
              border-color var(--duration-normal) var(--ease-in-out);
}

.right-panel {
  overflow-y: auto;
  padding: var(--space-6);
  scrollbar-gutter: stable;
}

/* ============================================================
   LAYER 5: 标签栏 (Tab Bar)
============================================================ */

.tab-bar {
  display: flex;
  border-bottom: var(--border-thin);
  padding: 0 var(--space-6);
  gap: 0;
  background: var(--bg-surface);
  position: sticky;
  top: 0;
  z-index: 10;
}

.tab-btn {
  position: relative;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  transition: var(--transition-colors), background-color var(--duration-fast) var(--ease-in-out);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.tab-btn::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 100%;
  height: 2px;
  background: var(--accent);
  border-radius: var(--radius-full) var(--radius-full) 0 0;
  transition: transform var(--duration-normal) var(--ease-out-back);
}

.tab-btn:hover {
  color: var(--text-primary);
}

.tab-btn.active {
  color: var(--text-accent);
}

.tab-btn.active::after {
  transform: translateX(-50%) scaleX(1);
}

.tab-content {
  display: none;
  animation: tabFadeIn var(--duration-normal) var(--ease-out-expo);
}

.tab-content.active {
  display: block;
}

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

/* 徽章 */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  font-size: var(--text-3xs);
  font-weight: var(--weight-bold);
  background: var(--accent-glow);
  color: var(--text-accent);
  border: 1px solid var(--accent-border);
  letter-spacing: 0.02em;
  transition: var(--transition-all);
}

.badge-red {
  background: var(--danger-glow);
  color: var(--danger);
  border-color: var(--danger-border);
}

/* ============================================================
   LAYER 6: 表单区域
============================================================ */

.form-section {
  padding: var(--space-5) var(--space-6);
}

.section-divider {
  border: none;
  border-top: var(--border-subtle);
  margin: 0;
}

.form-group {
  margin-bottom: var(--space-4);
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.form-label .required {
  color: var(--danger);
  margin-left: 2px;
}

/* 通用输入框 */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="search"],
textarea,
select {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--palette-steel);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: inherit;
  padding: var(--space-2) var(--space-3);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-in-out),
              box-shadow var(--duration-fast) var(--ease-in-out),
              background var(--duration-fast) var(--ease-in-out),
              color var(--duration-fast) var(--ease-in-out);
  line-height: var(--leading-normal);
}

input:hover,
textarea:hover,
select:hover {
  border-color: var(--palette-muted-steel);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-inner);
  background: var(--input-focus-bg);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-tertiary);
  font-style: italic;
  transition: color var(--duration-fast) var(--ease-in-out);
}

input:focus::placeholder,
textarea:focus::placeholder {
  color: var(--palette-muted-steel);
}

textarea {
  resize: vertical;
  min-height: 64px;
  line-height: var(--leading-relaxed);
}

select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
}

select option {
  background: var(--bg-elevated);
  color: var(--text-primary);
  padding: var(--space-2) var(--space-3);
}

/* 输入行（输入框+按钮） */
.input-row {
  display: flex;
  gap: var(--space-2);
}

.input-row input {
  flex: 1;
}

/* ============================================================
   LAYER 7: 按钮系统
============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--duration-fast) var(--ease-in-out);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
  position: relative;
  overflow: hidden;
  user-select: none;
  letter-spacing: 0.01em;
}

/* 按钮涟漪效果 */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, var(--btn-ripple) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-in-out);
}

.btn:active::before {
  opacity: 1;
  transition: opacity 0s;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.3);
}

/* 主按钮 */
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--info));
  color: var(--text-on-accent);
  font-weight: var(--weight-bold);
  border-color: transparent;
  box-shadow: var(--btn-primary-shadow);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--accent-bright), var(--palette-blue-bright));
  transform: translateY(-1px);
  box-shadow: var(--btn-primary-shadow-hover);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--btn-primary-shadow-active);
  transition: all 50ms var(--ease-in-out);
}

/* 次要按钮 */
.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--palette-steel);
  transition: all var(--duration-fast) var(--ease-in-out), background-color var(--duration-fast) var(--ease-in-out);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--bg-overlay);
  border-color: var(--palette-muted-steel);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  background: var(--bg-elevated);
}

/* 危险按钮 */
.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger-border);
}

.btn-danger:hover:not(:disabled) {
  background: var(--danger-glow);
  border-color: var(--danger);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(244, 63, 94, 0.15);
}

.btn-danger:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

/* 幽灵按钮 */
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
  padding: var(--space-2) var(--space-3);
  transition: all var(--duration-fast) var(--ease-in-out), background-color var(--duration-fast) var(--ease-in-out);
}

.btn-ghost:hover:not(:disabled) {
  color: var(--text-primary);
  background: var(--bg-overlay);
}

.btn-ghost:active:not(:disabled) {
  background: var(--bg-elevated);
}

/* 按钮尺寸变体 */
.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--radius-sm);
}

.btn-full {
  width: 100%;
}

/* ============================================================
   LAYER 8: 卡片
============================================================ */

.card {
  background: var(--bg-elevated);
  border: var(--border-thin);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  transition: border-color var(--duration-normal) var(--ease-in-out),
              box-shadow var(--duration-normal) var(--ease-in-out),
              transform var(--duration-normal) var(--ease-out-expo),
              background-color var(--duration-normal) var(--ease-in-out);
  position: relative;
  overflow: hidden;
}

/* 卡片顶部光泽 */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--card-top-line), transparent);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-in-out);
  pointer-events: none;
}

.card:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-lg);
}

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

.card + .card {
  margin-top: var(--space-4);
}

.card-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  letter-spacing: 0.01em;
}

.card-title-icon {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: var(--accent-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  flex-shrink: 0;
}

/* ============================================================
   LAYER 9: 统计卡片 (Stats Grid)
============================================================ */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.stat-card {
  background: var(--bg-elevated);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: center;
  transition: border-color var(--duration-normal) var(--ease-in-out),
              box-shadow var(--duration-normal) var(--ease-in-out),
              transform var(--duration-normal) var(--ease-out-expo),
              background-color var(--duration-normal) var(--ease-in-out);
  position: relative;
  overflow: hidden;
}

.stat-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60%;
  height: 2px;
  background: var(--accent);
  border-radius: var(--radius-full);
  opacity: 0.5;
  transition: transform var(--duration-normal) var(--ease-out-back);
}

.stat-card:hover {
  border-color: var(--accent-border);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}

.stat-card:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.stat-card.highlight {
  border-color: var(--accent-border-strong);
  background: linear-gradient(180deg, var(--accent-glow), transparent);
  box-shadow: var(--shadow-glow);
}

.stat-value {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  transition: color var(--duration-normal) var(--ease-in-out);
}

.stat-value.gold  { color: var(--accent); }
.stat-value.green { color: var(--success); }
.stat-value.red   { color: var(--danger); }
.stat-value.blue  { color: var(--info); }

.stat-label {
  font-size: var(--text-2xs);
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
}

/* ============================================================
   LAYER 10: 参战率进度条
============================================================ */

.rate-bar-wrapper {
  background: var(--bg-elevated);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  transition: background-color var(--duration-normal) var(--ease-in-out),
              border-color var(--duration-normal) var(--ease-in-out);
}

.rate-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-3);
}

.rate-bar-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.rate-bar-value {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--text-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.rate-bar-bg {
  height: 8px;
  background: var(--bg-input);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-inner);
}

.rate-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-bright));
  transition: width var(--duration-glacial) var(--ease-out-expo);
  position: relative;
}

/* 进度条流动光效 */
.rate-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );
  animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ============================================================
   LAYER 11: 未参战成员列表
============================================================ */

.absent-list-section {
  background: var(--bg-elevated);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: background-color var(--duration-normal) var(--ease-in-out),
              border-color var(--duration-normal) var(--ease-in-out);
}

.absent-list-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--absent-header-bg);
}

.absent-list-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.absent-list-body {
  padding: var(--space-3) var(--space-4);
  min-height: 60px;
}

/* 未参战成员项 */
.absent-member-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: var(--border-subtle);
  transition: background var(--duration-fast) var(--ease-in-out);
}

.absent-member-item:last-child {
  border-bottom: none;
}

.member-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--avatar-gradient-start), var(--avatar-gradient-end));
  border: 1px solid var(--accent-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--text-accent);
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-out-back),
              box-shadow var(--duration-fast) var(--ease-in-out);
}

.absent-member-item:hover .member-avatar {
  transform: scale(1.1);
  box-shadow: 0 0 8px var(--accent-glow);
}

.member-name {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

.member-note {
  font-size: var(--text-2xs);
  color: var(--text-secondary);
  background: var(--bg-overlay);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
  border: 1px solid var(--palette-steel);
  transition: background-color var(--duration-fast) var(--ease-in-out),
              border-color var(--duration-fast) var(--ease-in-out);
}

/* ============================================================
   LAYER 12: 多选下拉组件
============================================================ */

.multi-select-wrapper {
  position: relative;
}

.multi-select-trigger {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--palette-steel);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  transition: border-color var(--duration-fast) var(--ease-in-out),
              box-shadow var(--duration-fast) var(--ease-in-out),
              background var(--duration-fast) var(--ease-in-out),
              color var(--duration-fast) var(--ease-in-out);
  user-select: none;
  gap: var(--space-2);
}

.multi-select-trigger:hover {
  border-color: var(--palette-muted-steel);
}

.multi-select-trigger.open,
.multi-select-trigger:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.multi-select-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}

.multi-select-placeholder {
  color: var(--text-tertiary);
  font-style: italic;
}

.select-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--accent-glow);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-xs);
  padding: 1px var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-accent);
  font-weight: var(--weight-medium);
  animation: tagPopIn var(--duration-normal) var(--ease-out-back);
  transition: background-color var(--duration-fast) var(--ease-in-out),
              border-color var(--duration-fast) var(--ease-in-out),
              color var(--duration-fast) var(--ease-in-out);
}

@keyframes tagPopIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.select-tag-remove {
  cursor: pointer;
  opacity: 0.6;
  font-size: var(--text-base);
  line-height: 1;
  padding: 0 2px;
  border-radius: var(--radius-xs);
  transition: all var(--duration-fast) var(--ease-in-out);
}

.select-tag-remove:hover {
  opacity: 1;
  background: var(--select-tag-remove-hover-bg);
  color: var(--danger);
}

.multi-select-arrow {
  color: var(--text-secondary);
  font-size: var(--text-3xs);
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.multi-select-arrow.open {
  transform: rotate(180deg);
}

.multi-select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  z-index: 50;
  max-height: 260px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: dropdownIn var(--duration-fast) var(--ease-out-expo);
  transform-origin: top center;
  transition: background-color var(--duration-normal) var(--ease-in-out),
              border-color var(--duration-normal) var(--ease-in-out);
}

@keyframes dropdownIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scaleY(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

.multi-select-search {
  padding: var(--space-2);
  border-bottom: var(--border-subtle);
}

.multi-select-search input {
  background: var(--bg-input);
  border-color: var(--palette-steel);
  font-size: var(--text-xs);
}

.multi-select-options {
  overflow-y: auto;
  flex: 1;
}

.multi-select-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-in-out);
  font-size: var(--text-sm);
}

.multi-select-option:hover {
  background: var(--bg-overlay);
}

.multi-select-option.selected {
  background: var(--accent-glow);
}

.multi-select-option.selected:hover {
  background: var(--selected-option-hover-bg);
}

.option-checkbox {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--palette-steel);
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--duration-fast) var(--ease-out-expo);
}

.multi-select-option.selected .option-checkbox {
  background: var(--accent);
  border-color: var(--accent);
}

.option-check {
  color: var(--text-on-accent);
  font-size: var(--text-3xs);
  font-weight: var(--weight-bold);
  display: none;
}

.multi-select-option.selected .option-check {
  display: block;
}

.multi-select-footer {
  padding: var(--space-2) var(--space-3);
  border-top: var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: var(--multi-select-footer-bg);
}

/* ============================================================
   LAYER 13: 部落战列表
============================================================ */

.war-list {
  padding: var(--space-3) var(--space-4);
}

.war-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-in-out);
  margin-bottom: 2px;
  border: 1px solid transparent;
  position: relative;
}

.war-item:hover {
  background: var(--bg-overlay);
}

.war-item.active {
  background: var(--accent-glow);
  border-color: var(--accent-border);
}

.war-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--space-2);
  bottom: var(--space-2);
  width: 3px;
  background: var(--accent);
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

.war-item-icon {
  font-size: var(--text-lg);
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-out-back);
}

.war-item:hover .war-item-icon {
  transform: scale(1.15);
}

.war-item-info {
  flex: 1;
  min-width: 0;
}

.war-item-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-in-out);
}

.war-item.active .war-item-name {
  color: var(--text-accent);
  font-weight: var(--weight-semibold);
}

.war-item-meta {
  font-size: var(--text-2xs);
  color: var(--text-tertiary);
  margin-top: 1px;
}

.war-item-actions {
  display: flex;
  gap: var(--space-1);
  opacity: 0;
  transform: translateX(4px);
  transition: all var(--duration-fast) var(--ease-in-out);
}

.war-item:hover .war-item-actions {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================================
   LAYER 14: 成员列表
============================================================ */

.member-list {
  padding: 0 var(--space-4) var(--space-3);
}

.member-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: var(--border-subtle);
  transition: background var(--duration-fast) var(--ease-in-out);
  border-radius: var(--radius-xs);
}

.member-row:last-child {
  border-bottom: none;
}

.member-row:hover {
  background: var(--bg-overlay);
}

.member-row-num {
  width: 24px;
  font-size: var(--text-2xs);
  color: var(--text-tertiary);
  text-align: center;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.member-row-name {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

.member-row-actions {
  display: flex;
  gap: var(--space-1);
  opacity: 0;
  transform: translateX(4px);
  transition: all var(--duration-fast) var(--ease-in-out);
}

.member-row:hover .member-row-actions {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================================
   LAYER 15: 历史记录表格
============================================================ */

.history-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-sm);
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.history-table th {
  text-align: left;
  padding: var(--space-3) var(--space-3);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--palette-steel);
  background: var(--table-header-bg);
  position: sticky;
  top: 0;
}

.history-table td {
  padding: var(--space-3) var(--space-3);
  border-bottom: var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
  transition: background var(--duration-fast) var(--ease-in-out);
}

.history-table tr:last-child td {
  border-bottom: none;
}

.history-table tbody tr {
  transition: background var(--duration-fast) var(--ease-in-out),
              transform var(--duration-fast) var(--ease-out-expo);
}

.history-table tbody tr:hover td {
  background: var(--bg-overlay);
}

/* 表格中的迷你进度条 */
.table-rate-bar {
  display: inline-block;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--bg-input);
  width: 60px;
  margin-right: var(--space-2);
  vertical-align: middle;
  overflow: hidden;
}

.table-rate-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--duration-glacial) var(--ease-out-expo);
}

/* ============================================================
   LAYER 16: 战争横幅 (War Banner)
============================================================ */

.war-banner {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.06), rgba(59, 130, 246, 0.04));
  border: var(--border-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  position: relative;
  overflow: hidden;
  transition: background var(--duration-normal) var(--ease-in-out),
              border-color var(--duration-normal) var(--ease-in-out);
}

.war-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 50%, var(--war-banner-glow) 0%, transparent 70%);
  pointer-events: none;
}

.war-banner-icon {
  font-size: var(--text-2xl);
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-glow);
  border-radius: var(--radius-md);
  border: var(--border-accent);
}

.war-banner-name {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-accent);
  letter-spacing: -0.01em;
}

.war-banner-meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ============================================================
   LAYER 17: 模态框
============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--modal-overlay-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  animation: overlayIn var(--duration-normal) var(--ease-in-out);
}

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

.modal {
  background: var(--bg-elevated);
  border: var(--border-thin);
  border-radius: var(--radius-2xl);
  width: 100%;
  max-width: 440px;
  padding: var(--space-6);
  box-shadow: var(--shadow-xl), var(--shadow-glow-lg);
  animation: modalIn var(--duration-slow) var(--ease-spring);
  position: relative;
  transition: background-color var(--duration-normal) var(--ease-in-out),
              border-color var(--duration-normal) var(--ease-in-out);
}

/* 模态框顶部装饰线 */
.modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--space-6);
  right: var(--space-6);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--info), transparent);
  border-radius: var(--radius-full);
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

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

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.modal-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.modal-close {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--bg-overlay);
  border: 1px solid var(--palette-steel);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  line-height: 1;
  transition: all var(--duration-fast) var(--ease-in-out);
}

.modal-close:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-color: var(--danger);
  box-shadow: 0 0 8px var(--danger-glow);
}

.modal-footer {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-5);
}

/* ============================================================
   LAYER 18: Toast 通知
============================================================ */

.toast-container {
  position: fixed;
  top: 72px;
  right: var(--space-6);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
  max-width: 380px;
}

.toast {
  background: var(--bg-elevated);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  animation: toastSlideIn var(--duration-normal) var(--ease-spring);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  pointer-events: all;
  position: relative;
  overflow: hidden;
  transition: background-color var(--duration-normal) var(--ease-in-out),
              border-color var(--duration-normal) var(--ease-in-out);
}

/* Toast 进度条 */
.toast {
  --toast-duration: 3000ms;
}

.toast::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.3;
  animation: toastTimer var(--toast-duration) linear forwards;
}

@keyframes toastTimer {
  from { width: 100%; }
  to { width: 0%; }
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.toast.toast-exit {
  animation: toastSlideOut var(--duration-fast) var(--ease-in-out) forwards;
}

@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(30px);
  }
}

.toast .toast-icon {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast.success {
  border-left: 3px solid var(--success);
}
.toast.success .toast-icon { color: var(--success); }
.toast.success::after { color: var(--success); }

.toast.error {
  border-left: 3px solid var(--danger);
}
.toast.error .toast-icon { color: var(--danger); }
.toast.error::after { color: var(--danger); }

.toast.info {
  border-left: 3px solid var(--info);
}
.toast.info .toast-icon { color: var(--info); }
.toast.info::after { color: var(--info); }

.toast.warning {
  border-left: 3px solid var(--warning);
}
.toast.warning .toast-icon { color: var(--warning); }
.toast.warning::after { color: var(--warning); }

/* ============================================================
   LAYER 19: 空状态
============================================================ */

.empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-6);
  color: var(--text-secondary);
}

.empty-state-icon {
  font-size: 40px;
  margin-bottom: var(--space-4);
  opacity: 0.4;
  transition: opacity var(--duration-normal) var(--ease-in-out),
              transform var(--duration-normal) var(--ease-out-back);
}

.empty-state:hover .empty-state-icon {
  opacity: 0.7;
  transform: scale(1.05);
}

.empty-state-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.empty-state-desc {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* ============================================================
   LAYER 20: 加载状态
============================================================ */

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--spinner-track);
  border-top-color: var(--accent);
  border-radius: var(--radius-full);
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 骨架屏 */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-overlay) 0%,
    var(--bg-elevated) 40%,
    var(--bg-overlay) 80%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-xs);
}

@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 14px;
  margin-bottom: var(--space-2);
}

.skeleton-text:last-child {
  width: 60%;
}

.skeleton-card {
  height: 80px;
  border-radius: var(--radius-lg);
}

/* 错步入场动画 */
.stagger-item {
  opacity: 0;
  transform: translateY(8px);
  animation: staggerIn var(--duration-slow) var(--ease-out-expo) forwards;
}

@keyframes staggerIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   LAYER 21: 辅助组件
============================================================ */

/* 分割线 */
.divider-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--text-2xs);
  margin: var(--space-4) 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--weight-medium);
}

.divider-label::before,
.divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--palette-steel);
}

/* Supabase 通知栏 */
#supabaseNotice {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--accent-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-3) var(--space-5) !important;
  font-size: var(--text-xs) !important;
  color: var(--text-secondary) !important;
  box-shadow: var(--shadow-lg), var(--shadow-glow) !important;
  animation: noticeSlideUp var(--duration-slow) var(--ease-spring);
}

@keyframes noticeSlideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* 面板标题 */
.panel-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-thin);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.panel-subtitle {
  font-size: var(--text-2xs);
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* ============================================================
   LAYER 23: 连续未参战统计面板
============================================================ */

.consecutive-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.consecutive-col {
  background: var(--bg-surface);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: border-color var(--duration-normal) var(--ease-in-out),
              box-shadow var(--duration-normal) var(--ease-in-out),
              background-color var(--duration-normal) var(--ease-in-out);
  min-height: 80px;
}

.consecutive-col:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-md);
}

.consecutive-col-header {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
  letter-spacing: 0.02em;
}

.consecutive-col-count {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  display: block;
  margin-bottom: var(--space-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  transition: color var(--duration-normal) var(--ease-in-out);
}

.consecutive-col-subtitle {
  font-size: var(--text-2xs);
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consecutive-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.consecutive-member-tag {
  display: inline-block;
  background: var(--bg-overlay);
  border: 1px solid var(--palette-steel);
  border-radius: var(--radius-full);
  padding: 3px var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  transition: all var(--duration-fast) var(--ease-in-out),
              background-color var(--duration-fast) var(--ease-in-out),
              border-color var(--duration-fast) var(--ease-in-out);
  cursor: default;
  letter-spacing: 0.01em;
}

.consecutive-member-tag:hover {
  border-color: var(--accent-border);
  background: var(--accent-glow);
  color: var(--text-accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px var(--tag-hover-shadow);
}

.consecutive-col-body.empty-hint {
  text-align: center;
  padding: var(--space-4) var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

/* 响应式：平板及以下改为单列 */
@media (max-width: 768px) {
  .consecutive-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   LAYER 24: 响应式设计
============================================================ */

/* 平板竖屏 / 中等屏幕 (≤1024px) */
@media (max-width: 1024px) {
  .main-layout {
    grid-template-columns: 360px 1fr;
  }

  .right-panel {
    padding: var(--space-4);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 平板竖屏 (≤768px) — 上下布局 */
@media (max-width: 768px) {
  .main-layout {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
  }

  .left-panel {
    position: static;
    max-height: none;
    border-right: none;
    border-bottom: var(--border-thin);
    order: 1;
  }

  .right-panel {
    order: 2;
    padding: var(--space-4);
  }

  .top-nav {
    padding: var(--space-2) var(--space-4);
    flex-wrap: wrap;
    height: auto;
    gap: var(--space-2);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }

  .nav-center {
    order: 3;
    width: 100%;
    margin: 0;
    max-width: 100%;
  }

  .nav-brand-text {
    font-size: var(--text-sm);
  }

  .nav-actions {
    gap: var(--space-1);
  }

  .form-section {
    padding: var(--space-4);
  }

  .tab-bar {
    padding: 0 var(--space-4);
  }

  .tab-btn {
    padding: var(--space-3) var(--space-3);
    font-size: var(--text-xs);
  }

  .modal {
    max-width: 100%;
    margin: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-xl);
  }

  .toast-container {
    top: auto;
    bottom: var(--space-4);
    right: var(--space-4);
    left: var(--space-4);
    max-width: 100%;
  }

  .toast {
    max-width: 100%;
  }
}

/* 手机 (≤480px) */
@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }

  .stat-card {
    padding: var(--space-3);
  }

  .stat-value {
    font-size: var(--text-2xl);
  }

  .right-panel {
    padding: var(--space-3);
  }

  .top-nav {
    padding: var(--space-2) var(--space-3);
  }

  .card {
    padding: var(--space-4);
  }

  .history-table th,
  .history-table td {
    padding: var(--space-2) var(--space-2);
    font-size: var(--text-xs);
  }

  .btn-sm {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-2xs);
  }
}

/* ============================================================
   LAYER 23: 打印样式
============================================================ */

@media print {
  body {
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 12px;
  }

  .top-nav,
  .left-panel,
  .toast-container,
  #loadingIndicator,
  #supabaseNotice {
    display: none !important;
  }

  .main-layout {
    display: block;
  }

  .right-panel {
    padding: 0;
  }

  .stat-card,
  .card,
  .rate-bar-wrapper,
  .absent-list-section {
    border: 1px solid var(--palette-steel);
    box-shadow: none;
    background: var(--bg-surface);
  }
}

/* ============================================================
   设计系统 Handoff 说明
   - 令牌体系：3层语义令牌 (原始→语义→组件)
   - 间距基准：4px 网格系统
   - 排版阶梯：10px→28px, 7级
   - 色彩对比：正文 4.6:1+, 大文本 3.1:1+ (WCAG AA)
   - 背景层次：冷色调浅灰白 5级 (#F7F9FF → #EEF2FF → #ffffff)
   - 品牌色：紫蓝渐变 #8B5CF6 → #3B82F6
   - 动效时长：80ms(瞬时)/150ms(快)/250ms(标准)/400ms(慢)/600ms(冰川)
   - 断点：480/768/1024px
   - 设计风格：Fantasy SaaS + 白色玻璃拟态
   - 版本：v3.0.0 | 2026-06-15
============================================================ */

/* ============================================================
   LAYER 25: 认证页面 (Auth Page) — 优化版 v3
   设计升级：多层渐变背景 · 网格纹理 · 浮动光球
   玻璃拟态卡片 · SVG 图标 · 精密微交互 · 错步入场
   WCAG AA 合规：正文 4.6:1+ 对比度
============================================================ */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 25% 30%, var(--auth-page-gradient-1) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 75% 70%, var(--auth-page-gradient-2) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 50%, var(--auth-page-gradient-3) 0%, transparent 70%),
    var(--bg-base);
  transition: background var(--duration-normal) var(--ease-in-out);
}

/* ---- 背景网格纹理 ---- */
.auth-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(139, 92, 246, var(--auth-page-grid-opacity)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, var(--auth-page-grid-opacity)) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 22%, transparent 70%);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 22%, transparent 70%);
}

/* ---- 浮动光球 ---- */
.auth-page::after {
  content: '';
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--auth-page-orb-primary) 0%, transparent 65%);
  top: -120px;
  right: -120px;
  pointer-events: none;
  animation: authOrbFloat 10s ease-in-out infinite;
}

/* 第二个光球（通过内联元素实现） */
.auth-orb-secondary {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at 60% 60%, var(--auth-page-orb-secondary) 0%, transparent 65%);
  bottom: -100px;
  left: -80px;
  pointer-events: none;
  animation: authOrbFloatAlt 12s ease-in-out infinite;
}

@keyframes authOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  33% { transform: translate(-40px, 25px) scale(1.08); opacity: 1; }
  66% { transform: translate(30px, -15px) scale(0.93); opacity: 0.5; }
}

@keyframes authOrbFloatAlt {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  50% { transform: translate(35px, -30px) scale(1.1); opacity: 0.8; }
}

/* ---- 容器 ---- */
.auth-container {
  width: 100%;
  max-width: 440px;
  position: relative;
  z-index: 1;
}

/* ============================================================
   品牌区域（错步入场 + 微光效果）
============================================================ */
.auth-brand {
  text-align: center;
  margin-bottom: var(--space-8);
  animation: authBrandIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes authBrandIn {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 图标：更大、更精致的光晕 */
.auth-brand-icon {
  width: 72px;
  height: 72px;
  background: var(--brand-gradient);
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #ffffff;
  margin-bottom: var(--space-4);
  box-shadow:
    var(--auth-icon-shadow);
  position: relative;
  animation: authIconGlow 3.5s ease-in-out infinite;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
              background var(--duration-normal) var(--ease-in-out),
              color var(--duration-normal) var(--ease-in-out),
              box-shadow var(--duration-normal) var(--ease-in-out);
}

/* 图标顶部高光 */
.auth-brand-icon::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: var(--auth-icon-highlight);
  border-radius: 18px 18px 0 0;
  pointer-events: none;
}

.auth-brand:hover .auth-brand-icon {
  transform: scale(1.05);
}

@keyframes authIconGlow {
  0%, 100% {
    box-shadow: 0 4px 28px rgba(139, 92, 246, 0.3), 0 0 0 1px rgba(139, 92, 246, 0.2);
  }
  50% {
    box-shadow: 0 4px 40px rgba(139, 92, 246, 0.4), 0 0 0 1px rgba(139, 92, 246, 0.3), 0 0 60px rgba(139, 92, 246, 0.08);
  }
}

/* 标题 */
.auth-brand-title {
  font-size: 28px;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
  line-height: 1.2;
}

.auth-brand-title span {
  color: var(--text-accent);
  position: relative;
}

/* 标题下划线装饰 */
.auth-brand-title span::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius: var(--radius-full);
  opacity: 0.3;
}

.auth-brand-desc {
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  line-height: 1.6;
}

/* ============================================================
   认证卡片：白色玻璃拟态 + 顶部紫线
============================================================ */
.auth-card {
  background: var(--auth-card-bg);
  border: 1px solid #EEF2FF;
  border-radius: 16px;
  padding: var(--space-8) var(--space-6) var(--space-6);
  box-shadow: var(--auth-card-shadow);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: authCardIn 0.5s 0.1s cubic-bezier(0.25, 1, 0.5, 1) both;
  position: relative;
  overflow: visible;
  transition: background var(--duration-normal) var(--ease-in-out),
              border-color var(--duration-normal) var(--ease-in-out),
              box-shadow var(--duration-normal) var(--ease-in-out);
}

/* 顶部紫色装饰线 */
.auth-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--auth-card-border-top), transparent);
  border-radius: var(--radius-full);
}

/* 卡片外围氛围光 */
.auth-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 17px;
  background: var(--auth-card-glow);
  z-index: -1;
  pointer-events: none;
}

@keyframes authCardIn {
  from { opacity: 0; transform: scale(0.96) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================================
   标签切换：药丸设计 + 滑入指示器
============================================================ */
.auth-tabs {
  display: flex;
  background: var(--auth-tabs-bg);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 28px;
  border: 1px solid var(--auth-tabs-border);
  position: relative;
  gap: 2px;
  transition: background var(--duration-normal) var(--ease-in-out),
              border-color var(--duration-normal) var(--ease-in-out);
}

.auth-tab {
  flex: 1;
  padding: 9px var(--space-4);
  text-align: center;
  font-size: 13px;
  font-weight: var(--weight-semibold);
  font-family: inherit;
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
  user-select: none;
}

.auth-tab:hover {
  color: var(--text-primary);
}

.auth-tab.active {
  background: var(--brand-gradient-alt);
  color: var(--text-on-accent);
  box-shadow: var(--auth-tab-active-shadow);
  font-weight: var(--weight-bold);
}

/* ============================================================
   表单：图标输入框 + 精密焦点环
============================================================ */
.auth-form {
  display: none;
  animation: authFormIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-form.active {
  display: block;
}

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

/* 表单组 */
.auth-form-group {
  margin-bottom: 18px;
}

.auth-form-label {
  display: block;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 带图标的输入框容器 */
.auth-input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--text-tertiary);
  transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 1;
  flex-shrink: 0;
}

/* focus-within：图标变为金色 + 微缩放 */
.auth-input-with-icon:focus-within .auth-input-icon {
  color: var(--accent);
  transform: translateY(-50%) scale(1.08);
}

.auth-input-with-icon input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--palette-steel);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  padding: 11px 12px 11px 38px;
  outline: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background var(--duration-normal) var(--ease-in-out),
              border-color var(--duration-normal) var(--ease-in-out);
  line-height: 1.5;
}

.auth-input-with-icon input:hover {
  border-color: var(--scrollbar-thumb);
  background: var(--bg-input);
}

.auth-input-with-icon input:focus {
  border-color: var(--accent);
  background: var(--bg-input);
  box-shadow:
    var(--auth-input-focus-ring);
}

.auth-input-with-icon input::placeholder {
  color: var(--placeholder-muted);
  font-style: italic;
  transition: color 0.2s;
}

.auth-input-with-icon input:focus::placeholder {
  color: var(--placeholder-disabled);
}

/* 密码输入框（额外右侧留白给切换按钮） */
.auth-password-wrapper {
  position: relative;
}

.auth-password-wrapper input {
  padding-left: 38px;
  padding-right: 42px;
}

/* 密码可见性切换按钮（SVG图标） */
.auth-password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  width: 32px;
  height: 32px;
}

.auth-password-toggle:hover {
  color: var(--text-secondary);
  background: var(--auth-password-toggle-hover);
}

.auth-password-toggle:active {
  color: var(--accent);
  background: var(--auth-password-toggle-active);
}

.auth-password-toggle svg {
  width: 18px;
  height: 18px;
  transition: opacity 0.15s;
}

.auth-password-toggle .eye-off { display: none; }
.auth-password-toggle.showing .eye-on  { display: none; }
.auth-password-toggle.showing .eye-off { display: block; }

/* 表单错误状态 */
.auth-input-with-icon.input-error input {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.08);
  animation: authInputShake 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-input-with-icon.input-error .auth-input-icon {
  color: var(--danger);
}

@keyframes authInputShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.auth-error-msg {
  font-size: 11px;
  color: var(--danger);
  margin-top: 5px;
  display: none;
  align-items: center;
  gap: 4px;
  animation: authErrorIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-error-msg.visible {
  display: flex;
}

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

/* ============================================================
   提交按钮
============================================================ */
.auth-submit-btn {
  height: 46px;
  font-size: 15px;
  font-weight: var(--weight-bold);
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: 10px;
  background: var(--brand-gradient-full);
  letter-spacing: 0.02em;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.15s cubic-bezier(0.16, 1, 0.3, 1),
              background var(--duration-normal) var(--ease-in-out),
              color var(--duration-normal) var(--ease-in-out);
  position: relative;
  overflow: hidden;
}

/* 按钮光泽扫过 */
.auth-submit-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: var(--auth-submit-shine);
  transition: left 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-submit-btn:hover:not(:disabled)::after {
  left: 100%;
}

.auth-submit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--auth-submit-shadow-hover);
}

.auth-submit-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
  transition: all 0.08s;
  box-shadow: var(--auth-submit-shadow-active);
}

.auth-submit-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

/* 按钮内的加载动画 */
.auth-submit-btn .loading-spinner {
  width: 18px;
  height: 18px;
  border-width: 2px;
  border-color: var(--auth-submit-spinner-track);
  border-top-color: var(--text-on-accent);
}

/* ============================================================
   底部提示文字
============================================================ */
.auth-hint {
  text-align: center;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--auth-hint-border);
  line-height: 1.7;
  letter-spacing: 0.01em;
}

.auth-hint strong {
  color: var(--text-secondary);
  font-weight: var(--weight-semibold);
}

/* ============================================================
   响应式优化
============================================================ */
@media (max-width: 768px) {
  .auth-container {
    max-width: 100%;
  }

  .auth-card {
    padding: 28px 20px 24px;
    border-radius: 16px;
  }

  .auth-brand-icon {
    width: 56px;
    height: 56px;
    font-size: 28px;
  }

  .auth-brand-title {
    font-size: 24px;
  }

  .auth-brand {
    margin-bottom: var(--space-6);
  }
}

@media (max-width: 480px) {
  .auth-page {
    padding: var(--space-4);
  }

  .auth-card {
    padding: 24px 16px 20px;
    border-radius: 14px;
  }

  .auth-card::before {
    left: 16px;
    right: 16px;
  }

  .auth-brand {
    margin-bottom: var(--space-5);
  }

  .auth-brand-icon {
    width: 48px;
    height: 48px;
    font-size: 24px;
    border-radius: 14px;
  }

  .auth-brand-icon::after {
    border-radius: 14px 14px 0 0;
  }

  .auth-brand-title {
    font-size: 22px;
  }

  .auth-tabs {
    margin-bottom: 20px;
  }

  .auth-tab {
    padding: 8px 12px;
    font-size: 12px;
  }

  .auth-form-group {
    margin-bottom: 14px;
  }

  .auth-input-with-icon input {
    padding: 10px 10px 10px 36px;
    font-size: 13px;
    border-radius: 8px;
  }

  .auth-submit-btn {
    height: 42px;
    font-size: 14px;
    border-radius: 8px;
  }
}

/* ============================================================
   LAYER 26: 用户角色徽章和菜单
============================================================ */

/* 角色徽章 */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  border: 1px solid;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* 用户菜单 */
.user-menu-wrapper {
  position: relative;
}

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 240px;
  background: var(--bg-elevated);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: 200;
  padding: var(--space-2);
  animation: userMenuIn var(--duration-fast) var(--ease-out-expo);
  transform-origin: top right;
  transition: background-color var(--duration-normal) var(--ease-in-out),
              border-color var(--duration-normal) var(--ease-in-out);
}

@keyframes userMenuIn {
  from {
    opacity: 0;
    transform: scaleY(0.95) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: scaleY(1) translateY(0);
  }
}

.user-menu-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  margin-bottom: var(--space-2);
}

.user-menu-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--avatar-gradient-start), var(--avatar-gradient-end));
  border: 1px solid var(--accent-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-accent);
  flex-shrink: 0;
}

.user-menu-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-role {
  font-size: var(--text-2xs);
  color: var(--text-tertiary);
  margin-top: 1px;
}

.user-menu-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-2) 0;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--text-primary);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-in-out);
  text-align: left;
}

.user-menu-item:hover {
  background: var(--bg-overlay);
}

.user-menu-item-danger {
  color: var(--danger);
}

.user-menu-item-danger:hover {
  background: var(--danger-glow);
}

/* ============================================================
   LAYER 27: 用户管理模态框
============================================================ */

.user-manage-list {
  max-height: 400px;
  overflow-y: auto;
}

.user-manage-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: var(--border-subtle);
  transition: background var(--duration-fast) var(--ease-in-out);
}

.user-manage-item:last-child {
  border-bottom: none;
}

.user-manage-item:hover {
  background: var(--bg-overlay);
}

.user-manage-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--bg-overlay);
  border: 1px solid var(--palette-steel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.user-manage-info {
  flex: 1;
  min-width: 0;
}

.user-manage-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-manage-email {
  font-size: var(--text-2xs);
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-manage-role-select {
  padding: var(--space-1) var(--space-3);
  padding-right: var(--space-6);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--palette-steel);
  color: var(--text-primary);
  cursor: pointer;
  min-width: 90px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color var(--duration-fast) var(--ease-in-out);
}

.user-manage-role-select:hover {
  border-color: var(--accent);
}

.user-manage-role-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  outline: none;
}

/* 角色选择项颜色 */
.user-manage-role-select option[value="leader"] {
  color: var(--accent);
  font-weight: var(--weight-bold);
}

.user-manage-role-select option[value="vice_leader"] {
  color: var(--info);
  font-weight: var(--weight-bold);
}

.user-manage-role-select option[value="member"] {
  color: var(--text-secondary);
}

/* 自己的条目标记 */
.user-manage-item.is-self {
  background: var(--accent-glow);
  border-radius: var(--radius-md);
}

.user-manage-item.is-self .user-manage-avatar {
  border-color: var(--accent-border);
  color: var(--text-accent);
  background: var(--accent-glow);
}

/* ============================================================
   LAYER 28: 响应式补充
============================================================ */

@media (max-width: 768px) {
  .nav-actions {
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .user-menu-dropdown {
    right: -40px;
    width: 220px;
  }
}