/* ========== 全局样式 ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-tertiary: #1c2128;
  --bg-card: #1e252e;
  --border-color: #30363d;
  --border-gold: #f0c060;
  --gold: #f0c060;
  --gold-light: #ffd700;
  --gold-dark: #b8860b;
  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --text-muted: #6e7681;
  --blue-highlight: #58a6ff;
  --blue-glow: rgba(88, 166, 255, 0.3);
  --success: #3fb950;
  --warning: #d29922;
  --danger: #f85149;
  --info: #58a6ff;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

/* 滚动条样式 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ========== 布局 ========== */
.app-container {
  display: flex;
  min-height: 100vh;
}

/* 侧边栏 */
.sidebar {
  width: 200px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 100;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
}

.sidebar.collapsed { transform: translateX(-100%); }

.sidebar-header {
  padding: 20px 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-logo {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--bg-primary);
  font-weight: bold;
}

.sidebar-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--gold);
}

.sidebar-subtitle {
  font-size: 11px;
  color: var(--text-muted);
}

.nav-menu {
  flex: 1;
  padding: 12px 8px;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 2px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  font-size: 14px;
  border-left: 3px solid transparent;
  position: relative;
}

.nav-item:hover {
  background: rgba(240, 192, 96, 0.08);
  color: var(--text-primary);
}

.nav-item.active {
  background: linear-gradient(90deg, rgba(240, 192, 96, 0.18) 0%, rgba(240, 192, 96, 0.05) 100%);
  color: var(--gold);
  border-left: 3px solid var(--gold);
  font-weight: 500;
}

.nav-item.active .nav-icon {
  filter: drop-shadow(0 0 4px rgba(240, 192, 96, 0.5));
}

.nav-icon {
  font-size: 18px;
  width: 20px;
  text-align: center;
}

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  font-size: 11px;
  color: var(--text-muted);
}

/* 主内容区 */
.main-content {
  flex: 1;
  margin-left: 200px;
  min-height: 100vh;
  transition: margin-left 0.3s ease;
}

.main-content.full { margin-left: 0; }

/* 顶部栏 */
.topbar {
  height: 56px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.topbar-left { display: flex; align-items: center; gap: 16px; }

.menu-toggle {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 20px;
}

.menu-toggle:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-title::before {
  content: '';
  width: 4px;
  height: 20px;
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
  border-radius: 2px;
}

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

/* 内容区域 */
.content-area {
  padding: 24px;
}

.page { display: none; }
.page.active { display: block; }

/* ========== 通用组件 ========== */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title::before {
  content: '';
  width: 3px;
  height: 16px;
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
  border-radius: 2px;
  display: inline-block;
}

.card-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  transition: all 0.2s ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn:hover { 
  background: var(--border-color);
  border-color: var(--text-muted);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

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

.btn-primary {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: var(--bg-primary);
  border-color: var(--gold);
  font-weight: 600;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  box-shadow: 0 4px 16px rgba(240, 192, 96, 0.4);
  border-color: var(--gold-light);
  transform: translateY(-1px);
}

.btn-danger {
  background: rgba(248, 81, 73, 0.15);
  border-color: rgba(248, 81, 73, 0.4);
  color: var(--danger);
}

.btn-danger:hover {
  background: rgba(248, 81, 73, 0.25);
}

.btn-success {
  background: rgba(63, 185, 80, 0.15);
  border-color: rgba(63, 185, 80, 0.4);
  color: var(--success);
}

.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-xs { padding: 2px 8px; font-size: 11px; }

/* 表单 */
.form-group { margin-bottom: 16px; }

.form-label {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  font-weight: 500;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.form-select option,
.loot-filter-select option,
.attend-status-select option,
.item-db-filter-select option {
  background: #1a1f26;
  color: var(--text-primary);
  padding: 8px 12px;
}

.form-select option:checked,
.loot-filter-select option:checked,
.attend-status-select option:checked,
.item-db-filter-select option:checked {
  background: var(--gold) !important;
  color: #0d1117 !important;
  font-weight: 600;
}

.form-input:hover, .form-select:hover, .form-textarea:hover {
  border-color: var(--text-muted);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(240, 192, 96, 0.15), 0 0 12px rgba(240, 192, 96, 0.1);
  background: rgba(240, 192, 96, 0.02);
}

.form-textarea { resize: vertical; min-height: 80px; font-family: monospace; font-size: 12px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* 表格 */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th {
  text-align: left;
  padding: 12px 16px;
  background: linear-gradient(180deg, var(--bg-tertiary) 0%, rgba(28, 33, 40, 0.9) 100%);
  color: var(--gold);
  font-weight: 600;
  font-size: 12px;
  border-bottom: 2px solid var(--gold);
  white-space: nowrap;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.data-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}

.data-table tbody tr:hover {
  background: rgba(240, 192, 96, 0.08);
}

.data-table tbody tr:hover td {
  border-bottom-color: rgba(240, 192, 96, 0.3);
}

/* 徽章/标签 */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}

.badge-present { background: rgba(63, 185, 80, 0.2); color: var(--success); }
.badge-absent { background: rgba(248, 81, 73, 0.2); color: var(--danger); }
.badge-late { background: rgba(210, 153, 34, 0.2); color: var(--warning); }
.badge-sub { background: rgba(88, 166, 255, 0.2); color: var(--info); }
.badge-leave { background: rgba(139, 148, 158, 0.2); color: var(--text-secondary); }
.badge-active { background: rgba(63, 185, 80, 0.2); color: var(--success); }
.badge-inactive { background: rgba(139, 148, 158, 0.2); color: var(--text-muted); }

/* 职责标签 - 多选标签 */
.role-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.role-tag {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-secondary);
  transition: all 0.2s ease;
  user-select: none;
}

.role-tag:hover {
  border-color: var(--gold);
  color: var(--text-primary);
  background: rgba(240, 192, 96, 0.05);
}

.role-tag.active {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: var(--bg-primary);
  border-color: var(--gold);
  font-weight: 600;
  box-shadow: 0 0 10px rgba(240, 192, 96, 0.3);
}

/* 成员列表中的小职责标签 */
.member-role-tags {
  display: inline-flex;
  gap: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

.member-role-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
}

.member-role-tag.tank {
  background: rgba(88, 166, 255, 0.2);
  color: #58a6ff;
}

.member-role-tag.healer {
  background: rgba(63, 185, 80, 0.2);
  color: var(--success);
}

.member-role-tag.dps {
  background: rgba(248, 81, 73, 0.2);
  color: var(--danger);
}

/* 副专精小号灰色文字 */
.off-spec-text {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 4px;
}

/* REQ-009：成员表"职责"列 tag（尺寸同 .badge，职责配色） */
.badge-role-tank {
  background: rgba(88, 166, 255, 0.2);
  color: #58a6ff;
}

.badge-role-healer {
  background: rgba(63, 185, 80, 0.2);
  color: var(--success);
}

.badge-role-dps {
  background: rgba(248, 81, 73, 0.2);
  color: var(--danger);
}

/* 副专精多选checkbox */
.off-spec-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.off-spec-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
}

.off-spec-checkbox:hover {
  border-color: var(--gold);
}

.off-spec-checkbox input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--gold);
}

.off-spec-checkbox:has(input:checked) {
  background: rgba(240, 192, 96, 0.1);
  border-color: var(--gold);
  color: var(--gold);
}

/* 专精下拉双列布局 */
.spec-dual-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* 职业颜色 */
.class-warrior { color: #C79C6E; }
.class-mage { color: #69CCF0; }
.class-priest { color: #FFFFFF; }
.class-rogue { color: #FFF569; }
.class-hunter { color: #ABD473; }
.class-paladin { color: #F58CBA; }
.class-shaman { color: #0070DD; }
.class-druid { color: #FF7D0A; }
.class-warlock { color: #9482C9; }
.class-monk { color: #00FF96; }
.class-dh { color: #A330C9; }
.class-dk { color: #C41F3B; }
.class-evoker { color: #33937F; }

.class-bg-warrior { background: rgba(199, 156, 110, 0.2); }
.class-bg-mage { background: rgba(105, 204, 240, 0.2); }
.class-bg-priest { background: rgba(255, 255, 255, 0.15); }
.class-bg-rogue { background: rgba(255, 245, 105, 0.2); }
.class-bg-hunter { background: rgba(171, 212, 115, 0.2); }
.class-bg-paladin { background: rgba(245, 140, 186, 0.2); }
.class-bg-shaman { background: rgba(0, 112, 221, 0.2); }
.class-bg-druid { background: rgba(255, 125, 10, 0.2); }
.class-bg-warlock { background: rgba(148, 130, 201, 0.2); }
.class-bg-monk { background: rgba(0, 255, 150, 0.2); }
.class-bg-dh { background: rgba(163, 48, 201, 0.2); }
.class-bg-dk { background: rgba(196, 31, 59, 0.2); }
.class-bg-evoker { background: rgba(51, 147, 127, 0.2); }

/* ========== 弹窗 ========== */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn 0.2s ease;
}

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

.modal-overlay.show { display: flex; }

.modal {
  background: var(--bg-secondary);
  border: 1px solid rgba(240, 192, 96, 0.3);
  border-radius: 12px;
  width: 90%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(240, 192, 96, 0.1);
  animation: modalSlideIn 0.25s ease;
}

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

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg, rgba(240, 192, 96, 0.03) 0%, transparent 100%);
  border-radius: 12px 12px 0 0;
}

.modal-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-title::before {
  content: '';
  width: 3px;
  height: 18px;
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
  border-radius: 2px;
}

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 22px;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: var(--border-color);
  color: var(--gold);
  transform: rotate(90deg);
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ========== 仪表盘 ========== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(30, 37, 46, 0.95) 100%);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 12px rgba(240, 192, 96, 0.1);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
}

.stat-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 60%;
  height: 100%;
  background: radial-gradient(ellipse at top right, rgba(240, 192, 96, 0.03) 0%, transparent 70%);
  pointer-events: none;
}

.stat-value {
  font-size: 30px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 4px;
  text-shadow: 0 0 20px rgba(240, 192, 96, 0.15);
}

.stat-label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.stat-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 36px;
  opacity: 0.1;
  transition: opacity 0.2s ease;
}

.stat-card:hover .stat-icon {
  opacity: 0.18;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 20px;
}

.recent-list { display: flex; flex-direction: column; gap: 10px; }

.recent-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.recent-item:hover {
  border-color: var(--gold);
  transform: translateX(4px);
}

.recent-date {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.recent-raid {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.recent-count {
  font-size: 13px;
  color: var(--gold);
  font-weight: 600;
}

/* 排行榜 */
.rank-list { display: flex; flex-direction: column; gap: 8px; }

.rank-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 6px;
}

.rank-item:hover { background: var(--bg-tertiary); }

.rank-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--border-color);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.rank-item:nth-child(1) .rank-num { background: linear-gradient(135deg, #FFD700, #FFA500); color: #1a1a1a; }
.rank-item:nth-child(2) .rank-num { background: linear-gradient(135deg, #C0C0C0, #A0A0A0); color: #1a1a1a; }
.rank-item:nth-child(3) .rank-num { background: linear-gradient(135deg, #CD7F32, #B87333); color: #fff; }

.rank-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
}

.rank-rate {
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
}

/* ========== 成员管理 ========== */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}

.toolbar-left, .toolbar-right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.search-input {
  width: 220px;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 13px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input:hover {
  border-color: var(--text-muted);
}

.search-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(240, 192, 96, 0.15), 0 0 12px rgba(240, 192, 96, 0.1);
}

/* 职责过滤 */
.role-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.role-filter-label {
  color: var(--text-muted);
  font-size: 12px;
}

.role-filter-item {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}

.role-filter-item input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--gold);
}

.role-filter-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid transparent;
}

.role-filter-tag.tank {
  background: rgba(88, 166, 255, 0.15);
  color: var(--info);
  border-color: rgba(88, 166, 255, 0.3);
}

.role-filter-tag.dps {
  background: rgba(248, 81, 73, 0.15);
  color: var(--danger);
  border-color: rgba(248, 81, 73, 0.3);
}

.role-filter-tag.heal {
  background: rgba(63, 185, 80, 0.15);
  color: var(--success);
  border-color: rgba(63, 185, 80, 0.3);
}

/* 心愿单成员多选 */
.wishlist-member-search {
  margin-bottom: 8px;
}

.wishlist-member-search input {
  width: 100%;
  padding: 6px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.wishlist-member-search input:focus {
  border-color: var(--gold);
}

.wishlist-member-checkboxes {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px;
  background: var(--bg-primary);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.wishlist-member-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--class-color, var(--text-muted));
  background: var(--bg-secondary);
}

.wishlist-member-checkbox:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-gold);
}

.wishlist-member-checkbox:has(input:checked) {
  background: rgba(212, 175, 55, 0.15);
  border-color: rgba(212, 175, 55, 0.6);
}

.wishlist-member-checkbox:has(input:checked) .wm-name {
  color: var(--gold-light);
  font-weight: 600;
}

.wishlist-member-checkbox input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--gold);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  order: 2;
  margin-top: 1px;
}

.wm-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  order: 1;
  text-align: left;
}

.wm-name {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
}

.wm-spec {
  font-size: 11px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.4;
}

.wm-offspec {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.wm-role-tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 500;
  flex-shrink: 0;
}

.wm-role-tag.tank { background: rgba(74, 137, 220, 0.2); color: #4a89dc; }
.wm-role-tag.dps { background: rgba(218, 68, 83, 0.2); color: #da4453; }
.wm-role-tag.healer { background: rgba(48, 200, 100, 0.2); color: #30c864; }

.wishlist-member-toolbar {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.wishlist-member-toolbar .quick-action {
  cursor: pointer;
  color: var(--gold);
  transition: opacity 0.2s;
}

.wishlist-member-toolbar .quick-action:hover {
  opacity: 0.8;
}

.wishlist-member-toolbar .divider {
  color: var(--border-color);
}

.wishlist-member-toolbar .count {
  margin-left: auto;
  font-weight: 500;
  color: var(--text-secondary);
}

.table-container {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.action-btns {
  display: flex;
  gap: 6px;
}

.icon-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  transition: all 0.2s ease;
}

.icon-btn:hover {
  background: var(--bg-tertiary);
  color: var(--gold);
  border-color: var(--gold);
  transform: translateY(-1px);
}

.icon-btn.danger:hover { color: var(--danger); border-color: var(--danger); }

/* ========== 考勤记录 ========== */
.attendance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.view-tabs {
  display: flex;
  background: var(--bg-tertiary);
  border-radius: 6px;
  padding: 3px;
}

.view-tab {
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s;
}

.view-tab.active {
  background: var(--gold);
  color: var(--bg-primary);
  font-weight: 600;
}

/* 日历视图 */
.calendar {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.calendar-nav {
  display: flex;
  gap: 8px;
  align-items: center;
}

.calendar-month {
  font-size: 16px;
  font-weight: 600;
  color: var(--gold);
  min-width: 140px;
  text-align: center;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}

.calendar-weekday {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 8px 0;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
  border: 1px solid transparent;
  position: relative;
}

.calendar-day:hover:not(.empty) {
  border-color: var(--gold);
  background: rgba(240, 192, 96, 0.1);
}

.calendar-day.empty { cursor: default; opacity: 0.3; }

.calendar-day.today {
  background: rgba(88, 166, 255, 0.15);
  border-color: var(--blue-highlight);
  color: var(--blue-highlight);
  font-weight: 600;
}

.calendar-day.has-activity::after {
  content: '';
  position: absolute;
  bottom: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.calendar-day.has-activity .day-count {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* 列表视图 */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activity-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
}

.activity-item:hover {
  border-color: var(--gold);
  transform: translateX(4px);
}

/* REQ-020：已取消活动灰显 */
.activity-item.activity-cancelled {
  opacity: 0.55;
}
.activity-item.activity-cancelled:hover {
  transform: none;
}
.activity-item.activity-cancelled .activity-info h4 {
  color: var(--text-muted);
}

/* REQ-028：时间冲突活动黄色左边条 + ⚠ */
.activity-item.activity-conflict {
  border-left: 3px solid var(--warning);
}
.conflict-icon {
  color: var(--warning);
}

/* REQ-028：活动弹窗内冲突警告条（黄色，仅提示不阻断） */
.activity-conflict-warning {
  background: rgba(210, 153, 34, 0.12);
  border: 1px solid var(--warning);
  border-radius: 8px;
  color: var(--warning);
  font-size: 12px;
  line-height: 1.6;
  padding: 8px 12px;
  margin-bottom: 12px;
}

/* REQ-020：考勤详情弹窗「活动已取消」横幅 */
.attendance-cancelled-banner {
  background: rgba(139, 148, 158, 0.15);
  border: 1px solid var(--text-muted);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  padding: 10px 12px;
  margin-bottom: 12px;
  text-align: center;
}

.activity-info h4 {
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.activity-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  gap: 6px 16px;
  /* REQ-062（任务书 #14-补丁3）：徽章区布局重做——允许换行 + 垂直居中，
     文字徽章不再被压缩裁剪（此前单行无 wrap，"1 团"被挤成 ▭1 的根因） */
  flex-wrap: wrap;
  align-items: center;
}
.activity-meta .tag,
.activity-meta .btn {
  flex: 0 0 auto;
}

.activity-stats {
  display: flex;
  gap: 16px;
  align-items: center;
}

.activity-stat {
  text-align: center;
}

.activity-stat-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--gold);
}

.activity-stat-label {
  font-size: 11px;
  color: var(--text-muted);
}

/* 考勤详情弹窗 */
.attendance-members {
  max-height: 400px;
  overflow-y: auto;
  margin: 12px 0;
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.attend-member-row {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
  gap: 12px;
}

.attend-member-row:last-child { border-bottom: none; }
.attend-member-row:hover { background: var(--bg-tertiary); }

/* REQ-033：WCL 同步考勤预览三分区（绿=自动出席 / 黄=部分参战 / 红=未匹配） */
.wcl-sync-zone {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  margin-bottom: 12px;
  overflow: hidden;
}

.wcl-sync-zone-title {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
}

.wcl-sync-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
}

.wcl-sync-row:last-child { border-bottom: none; }
.wcl-sync-row.wcl-sync-full { border-left: 3px solid var(--success); }
.wcl-sync-row.wcl-sync-partial { border-left: 3px solid var(--warning); }
.wcl-sync-row.wcl-sync-unmatched { border-left: 3px solid var(--danger); }

.attend-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--gold);
}

.attend-name {
  flex: 1;
  font-size: 13px;
}

.attend-status-select {
  width: 90px;
  padding: 4px 8px;
  font-size: 12px;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

/* ========== 统计报表 ========== */
.filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.filter-btn {
  padding: 6px 14px;
  font-size: 12px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.filter-btn.active {
  background: var(--gold);
  color: var(--bg-primary);
  border-color: var(--gold);
  font-weight: 600;
}

.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.chart-container {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
}

.chart-container canvas {
  width: 100%;
  height: 250px;
}

.stats-rank-table .rank-num {
  background: var(--border-color);
  color: var(--text-secondary);
}

/* ========== 数据管理 ========== */
.data-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.data-stat-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}

.data-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 4px;
}

.data-stat-label {
  font-size: 12px;
  color: var(--text-muted);
}

.data-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.data-action-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
}

.data-action-card h4 {
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.data-action-card p {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
  line-height: 1.5;
}

/* ========== 提示消息 ========== */
/* 任务书 #19 WP2：toast 改版——顶部居中（避开右上角用户面板与主操作按钮）、
   背景不透明、z-index 置顶；行为不变（自动消失、多条堆叠） */
.toast-container {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none; /* 不遮挡下方用户面板与页面主按钮的点击 */
}

.toast {
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.55);
  animation: slideIn 0.3s ease;
  border: 1px solid;
  border-left: 3px solid;
  background: var(--bg-secondary); /* 不透明基底，alpha=1 */
  pointer-events: auto;
  max-width: min(560px, 92vw);
}

.toast.success { border-color: var(--success); color: var(--success); }
.toast.error { border-color: var(--danger); color: var(--danger); }
.toast.info { border-color: var(--info); color: var(--info); }
.toast.warning { border-color: var(--warning); color: var(--warning); }

@keyframes slideIn {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ========== 空状态 ========== */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }
.empty-text { font-size: 14px; margin-bottom: 16px; }

/* ========== 公会切换按钮 ========== */
.guild-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  transition: all 0.2s;
}

.guild-switch-btn:hover {
  background: rgba(88, 166, 255, 0.15);
  border-color: var(--info);
  color: var(--info);
}

/* ========== 响应式 ========== */
@media (max-width: 1024px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .charts-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.show { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .content-area { padding: 16px; }
  .data-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .data-stats-grid { grid-template-columns: 1fr; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-left, .toolbar-right { width: 100%; }
  .search-input { width: 100%; }
}

/* ========== 装备分配 ========== */
.loot-name {
  color: var(--gold);
  font-weight: 600;
}

.loot-secondary-stats {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.loot-stat-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  background: rgba(88, 166, 255, 0.15);
  color: var(--info);
}

/* 分配状态标签 */
.badge-loot-pending { background: rgba(210, 153, 34, 0.2); color: var(--warning); }
.badge-loot-assigned { background: rgba(63, 185, 80, 0.2); color: var(--success); }
.badge-loot-disenchant { background: rgba(139, 148, 158, 0.2); color: var(--text-muted); }
.badge-loot-destroyed { background: rgba(248, 81, 73, 0.2); color: var(--danger); }

/* 优先级标签 */
.badge-priority-p0 { background: rgba(248, 81, 73, 0.2); color: var(--danger); }
.badge-priority-p1 { background: rgba(255, 125, 10, 0.2); color: #ff7d0a; }
.badge-priority-p2 { background: rgba(240, 192, 96, 0.2); color: var(--gold); }
.badge-priority-p3 { background: rgba(88, 166, 255, 0.2); color: var(--info); }

/* 副属性多选标签 */
.secondary-stat-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.secondary-stat-tag {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-secondary);
  transition: all 0.2s ease;
  user-select: none;
}

.secondary-stat-tag:hover {
  border-color: var(--gold);
  color: var(--text-primary);
  background: rgba(240, 192, 96, 0.05);
}

.secondary-stat-tag.active {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: var(--bg-primary);
  border-color: var(--gold);
  font-weight: 600;
  box-shadow: 0 0 10px rgba(240, 192, 96, 0.3);
}

.special-effect-hint {
  font-size: 11px;
  color: var(--success);
  margin-top: 4px;
}

/* 装备筛选下拉宽度 */
.loot-filter-select {
  width: 120px;
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.loot-filter-select:focus {
  outline: none;
  border-color: var(--gold);
}

/* 装备分配-成员信息条 */
.loot-member-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
}

.loot-member-info .lmi-class-bar {
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
  flex-shrink: 0;
}

.loot-member-info .lmi-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.loot-member-info .lmi-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.loot-member-info .lmi-name {
  font-weight: 600;
  font-size: 13px;
}

.loot-member-info .lmi-label {
  color: var(--text-muted);
  font-size: 11px;
}

.loot-member-info .lmi-value {
  color: var(--text-primary);
}

.loot-member-info .lmi-role-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 500;
}

.loot-member-info .lmi-role-tag.tank { background: rgba(74, 137, 220, 0.2); color: #4a89dc; }
.loot-member-info .lmi-role-tag.dps { background: rgba(218, 68, 83, 0.2); color: #da4453; }
.loot-member-info .lmi-role-tag.healer { background: rgba(48, 200, 100, 0.2); color: #30c864; }

.loot-special-effect {
  font-size: 11px;
  color: var(--success);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.special-effect-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ========== 心愿单 ========== */
.wishlist-item-name {
  color: var(--gold);
  font-weight: 600;
}

.wishlist-raid-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  background: rgba(88, 166, 255, 0.15);
  color: var(--info);
}

/* 心愿单状态标签 */
.badge-wish-pending { background: rgba(210, 153, 34, 0.2); color: var(--warning); }
.badge-wish-obtained { background: rgba(63, 185, 80, 0.2); color: var(--success); }

/* 心愿单专精标签 */
.badge-spec-main { background: rgba(240, 192, 96, 0.2); color: var(--gold); }
.badge-spec-off { background: rgba(139, 148, 158, 0.2); color: var(--text-secondary); }
.badge-spec-both { background: rgba(88, 166, 255, 0.2); color: var(--info); }

/* 心愿匹配成员按钮 */
.wish-match-member {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  transition: all 0.2s;
  user-select: none;
}

.wish-match-member:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(240, 192, 96, 0.08);
}

.wish-match-member .match-priority {
  font-size: 10px;
  font-weight: 700;
}

/* ========== 更新日志 ========== */
.changelog-timeline {
  position: relative;
  padding: 20px 0;
}

.changelog-timeline::before {
  content: '';
  position: absolute;
  left: 80px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--gold), var(--border-color));
}

.changelog-item {
  position: relative;
  margin-bottom: 30px;
  padding-left: 120px;
}

.changelog-date {
  position: absolute;
  left: 0;
  top: 2px;
  width: 70px;
  text-align: right;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.changelog-dot {
  position: absolute;
  left: 72px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 2px solid var(--gold);
  z-index: 1;
}

.changelog-dot.dot-feature { border-color: #3fb950; }
.changelog-dot.dot-fix { border-color: #f85149; }
.changelog-dot.dot-improve { border-color: #58a6ff; }
.changelog-dot.dot-refactor { border-color: #d29922; }

.changelog-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.changelog-card:hover {
  border-color: var(--border-gold);
  box-shadow: 0 2px 12px rgba(240, 192, 96, 0.1);
}

.changelog-card.expanded {
  border-color: var(--gold);
}

.changelog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.changelog-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.changelog-version {
  font-size: 12px;
  color: var(--gold);
  font-family: 'Courier New', monospace;
  background: rgba(240, 192, 96, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
}

.changelog-tags {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.changelog-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}

.tag-feature { background: rgba(63, 185, 80, 0.15); color: #3fb950; }
.tag-fix { background: rgba(248, 81, 73, 0.15); color: #f85149; }
.tag-improve { background: rgba(88, 166, 255, 0.15); color: #58a6ff; }
.tag-refactor { background: rgba(210, 153, 34, 0.15); color: #d29922; }

.changelog-summary {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.changelog-details {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.changelog-card.expanded .changelog-details {
  display: block;
}

.changelog-details ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.changelog-details li {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 4px 0 4px 18px;
  position: relative;
  line-height: 1.6;
}

.changelog-details li::before {
  content: '•';
  position: absolute;
  left: 4px;
  color: var(--gold);
}

.changelog-toggle {
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.changelog-card.expanded .changelog-toggle {
  transform: rotate(180deg);
}

#page-changelog .filter-bar {
  flex-wrap: wrap;
  gap: 6px;
}

/* ========== 底部导航栏（移动端基础样式，默认隐藏） ========== */
.bottom-nav {
  display: none;
}

/* ========== 移动端响应式适配 v2.8.0 ========== */
@media (max-width: 768px) {
  /* --- 底部导航栏 --- */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    z-index: 999;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .bottom-nav .nav-item {
    flex: 1;
    flex-direction: column;
    gap: 2px;
    padding: 6px 4px;
    margin: 0;
    justify-content: center;
    align-items: center;
    border-radius: 0;
    font-size: 11px;
    border-left: none !important;
    color: var(--text-muted);
  }

  .bottom-nav .nav-icon {
    font-size: 22px;
    width: auto;
    text-align: center;
  }

  .bottom-nav .nav-item.active {
    background: transparent;
    color: var(--gold);
    padding-left: 4px;
    position: relative;
  }

  .bottom-nav .nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    background: var(--gold);
    border-radius: 0 0 3px 3px;
  }

  /* --- 侧边栏隐藏 --- */
  .sidebar {
    display: none;
  }

  /* --- 主内容区 --- */
  .main-content {
    margin-left: 0 !important;
  }

  /* --- 顶部栏 --- */
  .topbar {
    padding: 0 12px;
    height: 48px;
  }

  .menu-toggle {
    display: none;
  }

  .page-title {
    font-size: 16px;
  }

  #todayStr {
    display: none;
  }

  .guild-switch-btn {
    padding: 6px 10px;
    font-size: 12px;
    min-height: 36px;
  }

  /* --- 内容区域 --- */
  .content-area {
    padding: 12px;
    padding-bottom: 76px;
  }

  /* --- 卡片 --- */
  .card {
    padding: 14px;
    margin-bottom: 12px;
  }

  .card-header {
    margin-bottom: 12px;
    padding-bottom: 10px;
  }

  .card-title {
    font-size: 15px;
  }

  .card-subtitle {
    font-size: 12px;
  }

  /* --- 仪表盘统计卡片 2列 --- */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
    margin-bottom: 16px;
  }

  .stat-card {
    padding: 14px;
  }

  .stat-value {
    font-size: 22px;
  }

  .stat-label {
    font-size: 12px;
  }

  .stat-icon {
    font-size: 22px;
    right: 12px;
    top: 12px;
  }

  /* --- 仪表盘grid改单列 --- */
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* --- 图表grid单列 --- */
  .charts-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 12px;
  }

  .chart-container {
    padding: 12px;
  }

  .chart-container canvas {
    height: 200px !important;
  }

  /* --- 工具栏 --- */
  .toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .toolbar-left, .toolbar-right {
    gap: 8px;
    flex-wrap: wrap;
  }

  .search-input {
    width: 100% !important;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
  }

  /* --- 按钮触控优化 --- */
  .btn {
    min-height: 44px;
    padding: 0 14px;
    font-size: 14px;
    align-items: center;
    justify-content: center;
  }

  .btn-sm {
    min-height: 36px;
    font-size: 13px;
    padding: 0 10px;
  }

  .btn-xs {
    min-height: 30px;
    padding: 0 8px;
    font-size: 12px;
  }

  .icon-btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  /* --- 表单触控优化 --- */
  .form-input, .form-select, .form-textarea {
    min-height: 44px;
    font-size: 14px;
    padding: 10px 12px;
  }

  .form-textarea {
    min-height: 100px;
    padding-top: 10px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

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

  .form-label {
    font-size: 13px;
    margin-bottom: 6px;
  }

  /* --- 下拉选择器 --- */
  .loot-filter-select,
  #classFilter {
    min-height: 44px;
    padding: 0 10px;
    font-size: 13px;
  }

  /* --- 表格转卡片布局 --- */
  .table-container {
    overflow-x: visible;
    border: none;
  }

  .data-table thead {
    display: none;
  }

  .data-table,
  .data-table tbody,
  .data-table tbody tr,
  .data-table tbody td {
    display: block;
    width: 100%;
  }

  .data-table tbody tr {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 4px 12px;
  }

  .data-table tbody tr:hover {
    background: var(--bg-card);
    border-color: var(--gold);
  }

  .data-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(48, 54, 61, 0.5);
    font-size: 13px;
    text-align: right;
  }

  .data-table tbody td:last-child {
    border-bottom: none;
  }

  .data-table tbody td::before {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    flex-shrink: 0;
    margin-right: 10px;
  }

  .action-btns {
    gap: 8px;
  }

  /* 成员表格标签 */
  #page-members .data-table tbody td:nth-child(1)::before { content: '角色'; }
  #page-members .data-table tbody td:nth-child(2)::before { content: '职业'; }
  #page-members .data-table tbody td:nth-child(3)::before { content: '职责'; }
  #page-members .data-table tbody td:nth-child(4)::before { content: '主专精'; }
  #page-members .data-table tbody td:nth-child(5)::before { content: '副专精'; }
  #page-members .data-table tbody td:nth-child(6)::before { content: '状态'; }
  #page-members .data-table tbody td:nth-child(7)::before { content: '操作'; }

  /* 心愿单表格标签 */
  #page-wishlist .data-table tbody td:nth-child(1)::before { content: '装备名称'; }
  #page-wishlist .data-table tbody td:nth-child(2)::before { content: '所属团本'; }
  #page-wishlist .data-table tbody td:nth-child(3)::before { content: '掉落BOSS'; }
  #page-wishlist .data-table tbody td:nth-child(4)::before { content: '装备部位'; }
  #page-wishlist .data-table tbody td:nth-child(5)::before { content: '需求成员'; }
  #page-wishlist .data-table tbody td:nth-child(6)::before { content: '优先级'; }
  #page-wishlist .data-table tbody td:nth-child(7)::before { content: '专精'; }
  #page-wishlist .data-table tbody td:nth-child(8)::before { content: '状态'; }
  #page-wishlist .data-table tbody td:nth-child(9)::before { content: '操作'; }

  /* 装备分配表格标签 */
  #page-loot .data-table tbody td:nth-child(1)::before { content: '装备名称'; }
  #page-loot .data-table tbody td:nth-child(2)::before { content: '难度'; }
  #page-loot .data-table tbody td:nth-child(3)::before { content: '掉落BOSS'; }
  #page-loot .data-table tbody td:nth-child(4)::before { content: '大类'; }
  #page-loot .data-table tbody td:nth-child(5)::before { content: '部位'; }
  #page-loot .data-table tbody td:nth-child(6)::before { content: '主属性'; }
  #page-loot .data-table tbody td:nth-child(7)::before { content: '副属性'; }
  #page-loot .data-table tbody td:nth-child(8)::before { content: '特效'; }
  #page-loot .data-table tbody td:nth-child(9)::before { content: '分配给'; }
  #page-loot .data-table tbody td:nth-child(10)::before { content: '状态'; }
  #page-loot .data-table tbody td:nth-child(11)::before { content: '优先级'; }
  #page-loot .data-table tbody td:nth-child(12)::before { content: '日期'; }
  #page-loot .data-table tbody td:nth-child(13)::before { content: '备注'; }
  #page-loot .data-table tbody td:nth-child(14)::before { content: '操作'; }

  /* --- 心愿单成员选择器 2列 --- */
  .wishlist-member-checkboxes {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    max-height: 320px;
  }

  .wishlist-member-checkbox {
    min-height: 48px;
    padding: 8px 10px 8px 0;
    font-size: 13px;
    align-items: flex-start;
  }

  .wishlist-member-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    order: 2;
  }

  .wm-name {
    font-size: 13px;
  }

  .wm-spec {
    font-size: 11px;
  }

  /* --- 弹窗全屏 --- */
  .modal-overlay.show {
    align-items: flex-end;
  }

  .modal {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    height: 92vh;
    border-radius: 12px 12px 0 0;
    border-bottom: none;
    border-left: none;
    border-right: none;
  }

  .modal-header {
    padding: 14px 16px;
  }

  .modal-title {
    font-size: 16px;
  }

  .modal-body {
    padding: 16px;
  }

  .modal-footer {
    padding: 12px 16px;
  }

  .modal-close {
    width: 36px;
    height: 36px;
    font-size: 22px;
  }

  /* --- 装备库弹窗 --- */
  .item-db-modal {
    width: 100% !important;
    max-width: 100% !important;
  }

  .item-db-container {
    flex-direction: column;
    min-height: auto;
    gap: 12px;
  }

  .item-db-filters {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding-right: 0;
    padding-bottom: 12px;
  }

  .item-db-list {
    max-height: none;
    padding-right: 0;
  }

  /* --- 日历 --- */
  .calendar {
    padding: 10px;
  }

  .calendar-weekday {
    font-size: 11px;
    padding: 6px 0;
  }

  .calendar-day {
    font-size: 12px;
    aspect-ratio: 1.2;
  }

  .calendar-month {
    font-size: 15px;
    min-width: 100px;
  }

  .calendar-day.has-activity .day-count {
    font-size: 9px;
  }

  /* --- 活动列表 --- */
  .activity-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
  }

  .activity-stats {
    width: 100%;
    justify-content: space-around;
  }

  .activity-info h4 {
    font-size: 14px;
  }

  .activity-meta {
    gap: 12px;
    font-size: 11px;
  }

  /* --- 考勤详情 --- */
  .attendance-members {
    max-height: 50vh;
  }

  .attend-member-row {
    padding: 10px 12px;
    gap: 10px;
  }

  .attend-checkbox {
    width: 22px;
    height: 22px;
  }

  .attend-status-select {
    min-height: 36px;
    font-size: 13px;
    width: 100px;
  }

  /* --- 职责标签 --- */
  .role-tags {
    gap: 6px;
  }

  .role-tag {
    min-height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
  }

  /* --- 数据统计grid --- */
  .data-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }

  /* --- 筛选栏 --- */
  .filter-bar {
    gap: 6px;
    margin-bottom: 16px;
  }

  .filter-btn {
    min-height: 38px;
    padding: 0 12px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
  }

  /* --- 视图切换 --- */
  .view-tabs {
    width: 100%;
  }

  .view-tab {
    flex: 1;
    text-align: center;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    padding: 0 10px;
  }

  /* --- 排行榜 --- */
  .rank-item {
    padding: 10px;
    gap: 10px;
  }

  .rank-num {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }

  .rank-name {
    font-size: 13px;
  }

  .rank-rate {
    font-size: 13px;
  }

  /* --- 副专精多选 --- */
  .off-spec-checkbox {
    min-height: 42px;
    padding: 8px 12px;
    font-size: 14px;
  }

  .off-spec-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }

  /* --- 专精双列改单列 --- */
  .spec-dual-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* --- 职责过滤 --- */
  .role-filter-group {
    flex-wrap: wrap;
    gap: 8px;
  }

  .role-filter-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }

  /* --- 更新日志 --- */
  .changelog-item {
    padding-left: 20px;
  }

  .changelog-card {
    padding: 12px;
  }

  .changelog-title {
    font-size: 14px;
  }

  /* --- 最近记录 --- */
  .recent-item {
    padding: 12px;
  }

  .recent-date {
    font-size: 13px;
  }

  /* --- 考勤头部 --- */
  .attendance-header {
    gap: 10px;
    margin-bottom: 12px;
  }

  /* --- 装备卡片 --- */
  .item-card {
    padding: 10px;
    gap: 10px;
  }

  .item-card-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .item-card-name {
    font-size: 13px;
  }

  /* --- 空状态 --- */
  .empty-state {
    padding: 30px 20px;
  }

  .empty-icon {
    font-size: 40px;
    margin-bottom: 10px;
  }

  .empty-text {
    font-size: 13px;
  }
}

.item-db-modal { max-width: 960px !important; width: 90%; }
.item-db-container { display: flex; gap: 16px; min-height: 500px; }
.item-db-filters { width: 220px; flex-shrink: 0; border-right: 1px solid var(--border-color); padding-right: 16px; }
.item-db-filter-group { margin-bottom: 16px; }
.item-db-filter-label { font-size: 12px; color: var(--text-muted); font-weight: 600; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.item-db-filter-select { width: 100%; padding: 6px 10px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); font-size: 13px; }
.item-db-search { width: 100%; padding: 8px 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); font-size: 13px; margin-bottom: 16px; box-sizing: border-box; }
.item-db-search:focus { outline: none; border-color: var(--gold); }
.item-db-list { flex: 1; overflow-y: auto; max-height: 520px; padding-right: 8px; }
.item-db-list::-webkit-scrollbar { width: 6px; }
.item-db-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
.item-card { display: flex; gap: 12px; padding: 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 10px; cursor: pointer; transition: all 0.2s; position: relative; }
.item-card:hover { border-color: var(--gold); background: rgba(240, 192, 96, 0.06); transform: translateY(-1px); }
.item-card.selected { border-color: var(--gold); background: rgba(240, 192, 96, 0.1); box-shadow: 0 0 0 1px var(--gold); }
.item-card-icon { width: 44px; height: 44px; border-radius: 6px; background: linear-gradient(135deg, #2a2a3a, #1a1a2a); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; border: 1px solid var(--border-color); }
.item-card-info { flex: 1; min-width: 0; }
.item-card-name { font-size: 14px; font-weight: 600; color: var(--gold); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-card-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.item-card-stats { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
.item-card-stats .stat-label { color: var(--text-muted); }
/* 主属性颜色 - 参考War3/Dota2 */
.stat-str { color: #ff4444; font-weight: 500; }
.stat-agi { color: #44ff44; font-weight: 500; }
.stat-int { color: #4488ff; font-weight: 500; }
/* 副属性颜色 - 魔兽世界游戏内配色 */
.stat-crit { color: #ff8c2a; }
.stat-haste { color: #20e060; }
.stat-mastery { color: #30b8ff; }
.stat-versatility { color: #c862ff; }
.item-card-source { position: absolute; top: 8px; right: 10px; font-size: 10px; color: var(--text-muted); background: rgba(0,0,0,0.3); padding: 2px 6px; border-radius: 4px; }
.item-db-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 14px; }
.item-db-count { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); }
.quality-epic { color: #a335ee !important; }
.quality-rare { color: #0070dd !important; }

/* ==================== 认证界面 ==================== */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.auth-container {
  width: 100%;
  max-width: 400px;
  text-align: center;
}
.auth-logo {
  font-size: 48px;
  margin-bottom: 16px;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(240, 192, 96, 0.3);
}
.auth-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.auth-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 32px;
}
.auth-form {
  text-align: left;
}
.auth-field {
  margin-bottom: 16px;
}
.auth-field label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  font-weight: 500;
}
.auth-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.auth-input:focus {
  border-color: var(--gold);
}
.auth-input::placeholder {
  color: var(--text-muted);
}
.auth-btn {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  margin-top: 4px;
}
.auth-switch {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 16px;
}
.auth-switch a {
  color: var(--gold);
  text-decoration: none;
}
.auth-switch a:hover {
  text-decoration: underline;
}
.auth-divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
  color: var(--text-muted);
  font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}
.auth-divider span {
  padding: 0 12px;
}
.auth-error {
  color: var(--danger);
  font-size: 13px;
  margin-top: 12px;
  text-align: center;
  min-height: 20px;
}
.auth-guild-hint {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  text-align: center;
}

/* ==================== 公会栏 ==================== */
.guild-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: rgba(240, 192, 96, 0.06);
  border-bottom: 1px solid var(--border-color);
}
.guild-bar-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.guild-bar-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.guild-bar-role {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-secondary);
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  border: 1px solid var(--border-color);
}
/* BUG-018：角色徽章按角色着色，一眼可见 */
.guild-bar-role.role-owner {
  color: var(--gold);
  border-color: rgba(240, 192, 96, 0.5);
  background: rgba(240, 192, 96, 0.12);
}
.guild-bar-role.role-editor {
  color: var(--info);
  border-color: rgba(88, 166, 255, 0.4);
  background: rgba(88, 166, 255, 0.12);
}
.guild-bar-role.role-viewer {
  color: var(--text-secondary);
  border-color: var(--border-color);
  background: var(--bg-tertiary);
}
.guild-bar-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.2s;
}
.guild-bar-btn:hover {
  color: var(--gold);
}
.guild-bar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ==================== 公会成员列表 ==================== */
.guild-member-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
}
.guild-member-item:last-child {
  border-bottom: none;
}
.guild-member-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.guild-member-name {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}
.guild-member-email {
  font-size: 11px;
  color: var(--text-muted);
}
.guild-member-role {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}
.role-owner {
  background: rgba(240, 192, 96, 0.15);
  color: var(--gold);
}
.role-editor {
  background: rgba(88, 166, 255, 0.15);
  color: var(--blue-highlight);
}
.role-viewer {
  background: rgba(139, 148, 158, 0.15);
  color: var(--text-secondary);
}
.guild-member-actions {
  display: flex;
  gap: 6px;
}
.guild-member-actions select {
  font-size: 11px;
  padding: 4px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-primary);
  outline: none;
}
.guild-member-actions button {
  font-size: 11px;
  padding: 4px 8px;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
}
.guild-member-actions button:hover {
  border-color: var(--danger);
  color: var(--danger);
}

/* ==================== 用户中心 ==================== */
.user-center-btn {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 12px;
  transition: all 0.2s;
  position: relative;
}
.user-center-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.user-center-btn .notif-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: var(--danger);
  border-radius: 50%;
  display: none;
}
.user-center-btn .notif-dot.show {
  display: block;
}

.user-center-modal {
  max-width: 700px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg-secondary);
  border: 1px solid rgba(240, 192, 96, 0.3);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(240, 192, 96, 0.1);
}

.uc-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 20px;
}
.uc-tab {
  flex: 1;
  padding: 12px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  position: relative;
}
.uc-tab:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.03);
}
.uc-tab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.uc-badge {
  display: inline-block;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 4px;
  font-weight: 600;
}

.uc-section {
  padding: 10px 0;
}
.uc-section h3 {
  font-size: 16px;
  color: var(--gold);
  margin-bottom: 16px;
  font-weight: 600;
}

.uc-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.uc-header-row h3 {
  margin-bottom: 0;
}

.uc-form-group {
  margin-bottom: 16px;
}
.uc-form-group label {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  font-weight: 500;
}
.uc-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}
.uc-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.uc-input:focus {
  border-color: var(--gold);
}
.uc-input-disabled {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 14px;
  box-sizing: border-box;
}
.uc-select {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
}
.uc-select:focus {
  border-color: var(--gold);
}

.uc-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.uc-btn {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}
.uc-btn-primary {
  background: var(--gold);
  color: #000;
  border-color: var(--gold);
}
.uc-btn-primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
}
.uc-btn-secondary {
  background: none;
  color: var(--text-secondary);
  border-color: var(--border-color);
}
.uc-btn-secondary:hover {
  border-color: var(--text-secondary);
  color: var(--text-primary);
}
.uc-btn-danger {
  background: none;
  color: var(--danger);
  border-color: var(--danger);
}
.uc-btn-danger:hover {
  background: var(--danger);
  color: #fff;
}

.uc-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

/* 角色列表 */
.uc-character-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.uc-character-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  transition: all 0.2s;
}
.uc-character-card:hover {
  border-color: var(--gold-dark);
}
.uc-character-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.uc-character-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.uc-character-server {
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: 8px;
}
.uc-character-region {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(240, 192, 96, 0.1);
  color: var(--gold);
}
.uc-character-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.uc-character-detail {
  font-size: 12px;
  color: var(--text-secondary);
}
.uc-character-detail span {
  color: var(--text-primary);
  font-weight: 500;
}
.uc-character-armory {
  font-size: 12px;
}
.uc-character-armory a {
  color: var(--blue-highlight);
  text-decoration: none;
}
.uc-character-armory a:hover {
  text-decoration: underline;
}
.uc-character-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.uc-character-actions button {
  font-size: 12px;
  padding: 4px 12px;
}

/* 通知列表 */
.uc-notification-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.uc-notification-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 14px 16px;
  transition: all 0.2s;
  cursor: pointer;
}
.uc-notification-item:hover {
  border-color: var(--gold-dark);
}
.uc-notification-item.unread {
  border-left: 3px solid var(--gold);
  background: rgba(240, 192, 96, 0.03);
}
.uc-notification-item.read {
  opacity: 0.7;
}
.uc-notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.uc-notification-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.uc-notification-time {
  font-size: 11px;
  color: var(--text-muted);
}
.uc-notification-message {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.uc-notification-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.uc-notification-actions button {
  font-size: 12px;
  padding: 4px 12px;
}

.uc-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 20px;
  font-size: 14px;
}

/* ==================== 服务器自动补全 ==================== */
.autocomplete-container {
  position: relative;
  width: 100%;
}

.autocomplete-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 14px;
  box-sizing: border-box;
  cursor: text;
}

.autocomplete-input:focus {
  outline: none;
  border-color: var(--gold);
}

.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 4px 4px;
  z-index: 100;
  display: none;
}

.autocomplete-dropdown.active {
  display: block;
}

.autocomplete-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary);
  transition: background 0.2s;
}

.autocomplete-item:hover,
.autocomplete-item.selected {
  background: var(--gold);
  color: var(--bg-primary);
}

.autocomplete-empty {
  padding: 12px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

/* REQ-022：隐藏 number 原生步进箭头（循环逻辑由自定义按钮/键盘处理） */
.roll-value-input::-webkit-outer-spin-button,
.roll-value-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.roll-value-input {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ==================== 响应式 ==================== */
@media (max-width: 768px) {
  .auth-container { max-width: 100%; }
  .guild-bar { padding: 6px 12px; }
}

/* ==================== BUG-012 viewer 权限门 ====================
   viewer（无编辑权限）登录后隐藏/禁用所有写入口。
   真正的防线在 server.js 代理鉴权（SEC-001），此处仅界面收口。 */
body.viewer-mode .edit-only,
body.viewer-mode .action-btns,
body.viewer-mode .wishlist-row-checkbox {
  display: none !important;
}

/* 考勤详情：viewer 可查看，但不可修改 */
body.viewer-mode .attend-checkbox,
body.viewer-mode .attend-status-select {
  pointer-events: none;
  opacity: 0.6;
}

/* ==================== 任务书 #12 第二批：筛选条 / 批量条 / 提示条 ==================== */

/* REQ-018：考勤筛选条（实时筛选 + 出勤率小计） */
.att-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 13px;
}
.att-filter-bar .form-select,
.att-filter-bar .form-input {
  height: 30px;
  padding: 2px 8px;
  font-size: 12px;
  width: auto;
}
.att-filter-statuses {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.att-filter-statuses label,
.att-filter-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
}
.att-filter-subtotal {
  margin-left: auto;
  color: var(--gold);
  font-weight: 600;
  font-size: 12px;
}

/* 批量操作工具条（REQ-017-B 活动 / REQ-042 成员共用，参照心愿单批量条） */
.batch-toolbar {
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 13px;
}
.batch-toolbar-count {
  color: var(--gold);
  font-weight: 600;
}

/* REQ-017-B：活动卡片复选框 */
.activity-select-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--gold);
  margin-right: 12px;
  flex-shrink: 0;
}

/* REQ-017-A：考勤详情勾选列 + 批量标记条 */
.attend-pick-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--info);
  flex-shrink: 0;
}
.att-pick-bar {
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 13px;
}

/* REQ-037：WCL 已导入提示条（复用 .attendance-cancelled-banner 结构，换 info 配色） */
.attendance-wcl-banner {
  background: rgba(88, 166, 255, 0.12);
  border: 1px solid var(--info);
  border-radius: 8px;
  color: var(--info);
  font-size: 13px;
  padding: 10px 12px;
  margin-bottom: 12px;
  text-align: center;
}

/* REQ-042：已离队成员名（装备分配历史记录） */
.member-departed {
  color: var(--text-muted);
  opacity: 0.75;
}

/* REQ-042：成员复选框列 */
.member-row-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--gold);
}

/* 批量删除二次确认弹窗（REQ-017-B / REQ-042 共用） */
.batch-delete-list {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 13px;
}
.batch-delete-item {
  padding: 4px 0;
  border-bottom: 1px solid var(--border-color);
}
.batch-delete-item:last-child { border-bottom: none; }
.batch-delete-warning {
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
}

/* viewer 权限门补充：批量勾选入口一并隐藏 */
body.viewer-mode .member-row-checkbox,
body.viewer-mode .activity-select-checkbox,
body.viewer-mode .attend-pick-checkbox,
body.viewer-mode #memberSelectAll {
  display: none !important;
}

/* REQ-042（软删除）：已离队成员行灰显（成员列表 / 考勤详情历史行共用） */
.member-row-departed {
  opacity: 0.55;
}

/* BUG-030（任务书 #12 补丁）：数据模块加载失败横幅 */
.load-failure-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: rgba(220, 50, 47, 0.12);
  border: 1px solid var(--danger);
  border-radius: 6px;
  color: var(--danger);
  font-size: 13px;
}
.load-failure-banner span {
  flex: 1;
}

/* ==================== 任务书 #13：品牌「魔兽管家 WoW Butler」 ==================== */
.sidebar-logo {
  background: none;
}
.sidebar-logo-img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: block;
}
.sidebar-brand-sub {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.auth-logo-img {
  width: 96px;
  height: 96px;
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(240, 192, 96, 0.3);
}

/* ==================== 任务书 #13 BUG-025：原生控件深色渲染 ==================== */
/* 日期/时间选择器、select 箭头、number 步进等原生控件按深色方案渲染，修复黑吃黑 */
:root {
  color-scheme: dark;
}

/* ==================== 任务书 #13 BUG-028：活动卡片左对齐信息组 ==================== */
.activity-item {
  justify-content: flex-start;
}
.activity-info {
  flex: 0 1 auto;
  min-width: 0;
  text-align: left;
}
.activity-stats {
  margin-left: auto;
  flex-shrink: 0;
}
.activity-item {
  gap: 12px;
}

/* ==================== 任务书 #13 BUG-027：团本自定义下拉 ==================== */
/* 暗色浮层（ui设计参考 §4：比底层亮一档 + 柔和阴影表达层级，不靠刺眼描边） */
.raid-select {
  position: relative;
}
.raid-select-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 10;
  max-height: 224px;
  overflow-y: auto;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  padding: 4px;
}
.raid-select-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
}
.raid-select-item:hover,
.raid-select-item.active {
  background: rgba(240, 192, 96, 0.12);
}
.raid-select-tag {
  font-size: 11px;
  color: var(--gold);
  flex-shrink: 0;
}
.raid-select-other {
  color: var(--text-muted);
  border-top: 1px solid var(--border-color);
  margin-top: 4px;
}

/* REQ-050（任务书 #13-补丁）：团本输入框清空按钮 */
.raid-select .form-input {
  padding-right: 30px;
}
.raid-select-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 4px;
  border-radius: 4px;
}
.raid-select-clear:hover {
  color: var(--gold);
}

/* BUG-042（任务书 #13-补丁2）：报表排名区流式网格（宽度不足自动换行，缺席榜不被挤成竖条） */
.reports-rank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
}
.reports-rank-grid .card {
  min-width: 0;
}

/* BUG-040（任务书 #13-补丁）：宽表横向滚动兜底（容器内 min-width 保底，窗口不足时表内横滚） */
/* flex 子项默认 min-width:auto 拒绝收缩——宽表会把整页撑出横向滚动；
   补 min-width:0 让收缩发生在容器层，滚动留在 .table-container 内 */
.main-content { min-width: 0; }
.content-area { min-width: 0; }
#page-loot .table-container .data-table {
  min-width: 1050px;
}
/* 窄屏横滚时首列（装备名称）保持可见：sticky 首列。
   sticky 单元格需不透明背景，故装备表行底色显式化（与全局斑马纹/悬停同色系） */
#page-loot .table-container .data-table tbody tr { background: var(--bg-card); }
#page-loot .table-container .data-table tbody tr:nth-child(odd) { background: #252c34; }
#page-loot .table-container .data-table tbody tr:hover { background: #2f3132; }
#page-loot .table-container .data-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: inherit;
}
#page-loot .table-container .data-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--bg-tertiary);
}
#page-members .table-container .data-table {
  min-width: 900px;
}
#page-wishlist .table-container .data-table {
  min-width: 960px;
}
#page-reports .table-container .data-table {
  min-width: 720px;
}

/* ==================== 任务书 #13 REQ-045：冲突信息直显 ==================== */
.activity-conflict-line {
  color: var(--warning);
  font-size: 11px;
  margin-top: 4px;
}

/* ==================== 任务书 #13 REQ-046（补丁2 方案变更）：手动标记折叠区 ==================== */
/* 预览页内嵌第四区，默认收起、点击就地展开（废弃悬浮浮层：弹窗堆叠中空间不可控必截断） */
.wcl-preserved-header {
  cursor: pointer;
  color: var(--text-secondary);
  user-select: none;
}
.wcl-preserved-header:hover {
  color: var(--text-primary);
}
.wcl-preserved-caret {
  font-size: 11px;
  color: var(--text-muted);
}
.wcl-preserved-body {
  max-height: 264px; /* 约 10 行，超出区内滚动，无行数上限 */
  overflow-y: auto;
}
.wcl-preserved-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 10px;
  margin-top: 4px;
  border-radius: 4px;
  background: var(--bg-primary);
  font-size: 12px;
  color: var(--text-secondary);
}

/* ==================== 任务书 #13 REQ-049：离队成员分组 ==================== */
.member-divider-row td {
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 8px 0;
  background: rgba(139, 148, 158, 0.06);
}

/* ==================== 任务书 #13 REQ-044：头像菜单 ==================== */.user-menu {
  position: relative;
}
.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 4px 12px 4px 4px;
  cursor: pointer;
  color: var(--text-primary);
}
.user-menu-trigger:hover {
  border-color: var(--gold);
}
.user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--bg-primary);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-nickname {
  font-size: 13px;
}
.user-menu-caret {
  font-size: 11px;
  color: var(--text-muted);
}
.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  padding: 4px;
  z-index: 1001;
}
.user-menu-item {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-primary);
}
.user-menu-item:hover {
  background: rgba(240, 192, 96, 0.12);
}
.user-menu-item-danger {
  color: var(--danger);
}
.user-menu-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 8px;
}

/* ==================== 任务书 #13 §6：职业/职责图标 ==================== */
.class-icon {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 4px;
  flex-shrink: 0;
}
.badge .class-icon {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 3px;
}

/* ============================================================
   任务书 #13-补遗：项目级组件规范（同步沉淀于 docs/ui设计参考.md 附录）
   ============================================================ */

/* ---------- BUG-022 按钮体系：主 / 次(幽灵) / 危险 / 文字 四级 ---------- */
.btn:disabled,
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
/* 次按钮：描边幽灵（取消/返回/忽略） */
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}
.btn-ghost:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--text-muted);
}
/* 文字按钮：无边框低强调（表格内联操作） */
.btn-text {
  background: none;
  border: none;
  color: var(--info);
  padding: 4px 6px;
}
.btn-text:hover {
  background: none;
  color: var(--blue-highlight);
  text-decoration: underline;
  transform: none;
  box-shadow: none;
}
.btn-text-danger {
  color: var(--danger);
}

/* ---------- REQ-031 标签体系：统一尺寸 + 语义色板 ---------- */
/* 语义：金=管理 / 红=危险·离队 / 灰=中性 / 黄=警告 / 蓝=信息 / 绿=成功 */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.tag .class-icon {
  width: 12px;
  height: 12px;
  margin-right: 0;
  vertical-align: 0;
}
.tag-gold { background: rgba(240, 192, 96, 0.15); color: var(--gold); }
.tag-red { background: rgba(248, 81, 73, 0.15); color: var(--danger); }
.tag-grey { background: rgba(139, 148, 158, 0.15); color: var(--text-secondary); }
.tag-yellow { background: rgba(210, 153, 34, 0.15); color: var(--warning); }
.tag-blue { background: rgba(88, 166, 255, 0.15); color: var(--info); }
.tag-green { background: rgba(63, 185, 80, 0.15); color: var(--success); }

/* 任务书 #21 WP1-②：未认领明示——「待认领」可点击标签（灰字描边，点击弹认领确认弹窗） */
.claim-pending-btn {
  cursor: pointer;
  border: 1px dashed var(--text-muted);
  background: transparent;
  font-family: inherit;
}
.claim-pending-btn:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(240, 192, 96, 0.08);
}

/* 任务书 #21 WP2：认领审核区块（approval 模式，成员管理顶部） */
.claim-review-card {
  margin: 0 16px 12px;
  padding: 12px 14px;
  border: 1px solid rgba(210, 153, 34, 0.4);
  border-radius: 8px;
  background: rgba(210, 153, 34, 0.06);
}
.claim-review-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.claim-review-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-secondary);
}
.claim-review-row + .claim-review-row { border-top: 1px solid rgba(139, 148, 158, 0.15); }
.claim-review-text b { color: var(--text-primary); }
.claim-review-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* 既有 .badge 统一到标签规范尺寸（圆角 10px→5px，inline-flex 对齐图标） */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 5px;
}

/* 已离队标记：语义=红（离队），原为中性灰 */
.member-departed {
  color: var(--danger);
  font-size: 11px;
  font-weight: 600;
}

/* ---------- BUG-020 身份徽章：盾形意象底 + 图标 + 文字 ---------- */
.guild-bar-role,
.guild-member-role,
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px 0 5px;
  border-radius: 5px 5px 8px 8px; /* 盾形意象 */
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: none;
}
.guild-bar-role::before,
.guild-member-role::before,
.role-badge::before {
  content: '';
  width: 12px;
  height: 12px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.role-owner::before { background-image: url('../assets/icons/role-owner.svg'); }
.role-editor::before { background-image: url('../assets/icons/role-editor.svg'); }
.role-viewer::before { background-image: url('../assets/icons/role-viewer.svg'); }

/* ---------- REQ-026/030 表格规范：对齐 + 斑马纹 + 悬停 + 表头 ---------- */
/* 斑马纹加强（原 even 0.015 过淡） */
.data-table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }
.data-table tbody tr:nth-child(even) { background: transparent; }
/* 对齐：数字右对齐（等宽数字），状态/操作居中 */
.data-table td.num,
.data-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.data-table td.center,
.data-table th.center { text-align: center; }
/* 表头吸顶（在带滚动的 .table-container 内生效） */
.table-container { overflow-x: auto; }
.table-container .data-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-tertiary);
}
/* 列宽稳定：智能导入预览（已定义列宽）固定布局，不随内容跳动 */
#importPreviewStep .data-table { table-layout: fixed; }

/* ---------- REQ-027 中小分辨率适配（基准 1366×768） ---------- */
@media (max-width: 1400px) {
  .main-content { padding: 16px; }
  .modal { max-width: 92vw; }
  .activity-stats { gap: 10px; }
  .user-nickname {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar { padding: 0 16px; }
}

/* ==================== REQ-051：登录/注册按钮文本居中 ==================== */
/* .btn 为 inline-flex 默认左排；登录/注册按钮（含"登录中.../注册中..."忙碌态）
   文本水平居中。纯样式覆盖，不涉及 FIXED-023 按钮状态机逻辑。 */
.auth-btn {
  justify-content: center;
  text-align: center;
}

/* ==================== REQ-052：日期输入中文遮罩 ==================== */
.date-zh-wrap {
  position: relative;
  display: block;
}
/* BUG-049（补丁2 根治）：原生 datetime-edit 文本全状态透明（不设例外），
   显示职责完全交给遮罩层——普通文本、字段、选中高亮全部不可见 */
.date-zh-wrap input[type="date"] {
  color: transparent;
  width: 100%;
  caret-color: transparent;
}
.date-zh-wrap input[type="date"]::-webkit-datetime-edit,
.date-zh-wrap input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.date-zh-wrap input[type="date"]::-webkit-datetime-edit-text,
.date-zh-wrap input[type="date"]::-webkit-datetime-edit-year-field,
.date-zh-wrap input[type="date"]::-webkit-datetime-edit-month-field,
.date-zh-wrap input[type="date"]::-webkit-datetime-edit-day-field {
  color: transparent;
  background: transparent;
}
.date-zh-wrap input[type="date"]::selection,
.date-zh-wrap input[type="date"]::-webkit-datetime-edit::selection,
.date-zh-wrap input[type="date"]::-webkit-datetime-edit-text::selection,
.date-zh-wrap input[type="date"]::-webkit-datetime-edit-year-field::selection,
.date-zh-wrap input[type="date"]::-webkit-datetime-edit-month-field::selection,
.date-zh-wrap input[type="date"]::-webkit-datetime-edit-day-field::selection {
  color: transparent;
  background: transparent;
}

.date-zh-wrap .date-zh-text {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-primary);
  font-size: 13px;
  white-space: nowrap;
}
.date-zh-wrap .date-zh-text.date-zh-empty {
  color: var(--text-muted);
}
/* 选择器图标保持可见（color-scheme: dark 已保证对比度） */
.date-zh-wrap input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 1;
  cursor: pointer;
}
/* BUG-050：遮罩包裹为 inline-block，考勤筛选行内不再撑满整行挤压「含已取消」；
   筛选行日期框给固定宽度（全分辨率不重叠不折行） */
.date-zh-wrap {
  display: inline-block;
  width: 100%;
}
#attFilterBar .date-zh-wrap {
  width: 140px;
  flex: 0 0 auto;
}

/* ==================== REQ-054：标签多选（数据中心掉落表单） ==================== */
.md-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.md-tag {
  cursor: pointer;
  user-select: none;
}
.md-tag-on {
  background: rgba(240, 192, 96, 0.2);
  color: var(--gold);
}

/* REQ-053 整改：套装名占位联动样式——更浅+斜体+"如："前缀，与实值一眼可辨 */
.md-tier-setname::placeholder {
  color: var(--text-muted);
  opacity: 0.55;
  font-style: italic;
}

/* REQ-059：装备特效文本游戏绿（WoW tooltip 绿字） */
.loot-effect-green {
  color: #1eff00;
}

/* 任务书 #14-补丁3：专精区块 13 张职业表四列横向对齐——fixed 布局 + 固定列宽，与内容长度无关 */
.md-specs-table {
  table-layout: fixed;
}
.md-specs-table th:nth-child(1),
.md-specs-table td:nth-child(1) { width: 60px; }
.md-specs-table th:nth-child(2),
.md-specs-table td:nth-child(2) { width: 130px; }
.md-specs-table th:nth-child(3),
.md-specs-table td:nth-child(3) { width: 150px; }
.md-specs-table td:nth-child(4) { word-break: break-all; }

/* ==================== REQ-055：考勤实时统计行 ==================== */
.attendance-stats-line {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.attendance-stats-line .att-stat-zero {
  color: var(--text-muted);
  opacity: 0.6;
}