/* ============================================
   部门工作任务跟踪管理系统 - Global Styles
   设计方向：Dark Sapphire · 科技质感 · 精致层次
   统一设计令牌 — 浅色工作区 + 深色驾驶舱共享
   ============================================ */

/* --- Unified Design Tokens --- */
:root {
  /* === 品牌色 === */
  --primary: #1e3a5f;
  --primary-hover: #152a47;
  --primary-light: #5eead4;
  --primary-subtle: #ecfdf5;
  --primary-glow: rgba(13,148,136,0.25);
  --accent-teal: #0d9488;
  --accent-blue: #38bdf8;
  --accent-purple: #8b5cf6;

  /* === 语义色 === */
  --success: #10b981;
  --success-light: #d1fae5;
  --warning: #f59e0b;
  --warning-light: #fef3c7;
  --danger: #ef4444;
  --danger-light: #fee2e2;
  --info: #3b82f6;
  --info-light: #dbeafe;

  /* === 中性色 === */
  --gray-50: #fafbfc;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #cdd3db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* === 浅色主题（工作区） === */
  --bg-page: #f4f5f7;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-header: #ffffff;
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-500);
  --text-disabled: var(--gray-400);
  --text-inverse: #ffffff;
  --text-muted: var(--text-tertiary);
  --border: #e5e7eb;
  --border-light: 1px solid var(--gray-200);
  --border-medium: 1px solid var(--gray-300);

  /* === 深色主题（驾驶舱） === */
  --dark-bg: #060b16;
  --dark-card-bg: linear-gradient(135deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02));
  --dark-border: rgba(255,255,255,0.12);
  --dark-text: #c8d8e8;

  /* === 侧栏 === */
  --bg-sidebar: #090b13;
  --bg-sidebar-top: #080b14;
  --bg-sidebar-bottom: #0e1525;
  --bg-sidebar-hover: rgba(255,255,255,0.07);
  --bg-sidebar-active: rgba(255,255,255,0.08);
  --sidebar-nav-active-border: #2dd4bf;
  --sidebar-text: #8ba0b8;
  --sidebar-text-active: #ffffff;

  /* === 字体 === */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-mono: "Cascadia Code", "Fira Code", "SF Mono", "Consolas", monospace;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.875rem;
  --text-md:   0.9375rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* === 间距 === */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* === 圆角 === */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-btn: 8px;

  /* === 阴影 === */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.03);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.02);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03);
  --shadow-xl: 0 20px 48px rgba(0,0,0,0.12);
  --shadow-card: var(--shadow-md);

  /* === 玻璃效果（两套共用） === */
  --glass-blur: blur(12px);
  --glass-radius: 16px;
  --glass-shadow: 0 4px 24px rgba(0,0,0,0.08);
  --glass-shadow-hover: 0 8px 36px rgba(0,0,0,0.12);

  /* === 渐变 === */
  --grad-title: linear-gradient(90deg, var(--primary) 0%, var(--accent-teal) 50%, var(--accent-blue) 100%);
  --grad-progress-teal: linear-gradient(90deg, #0d9488, #14b8a6);
  --grad-progress-purple: linear-gradient(90deg, #8b5cf6, #a78bfa);

  /* === 品牌色扩展 —— Teal 收敛后规范 === */
  /* 主 teal: #0d9488（以此为准，替代其他 4 种散落 teal） */
  --teal-main: var(--accent-teal);
  --teal-light: #14b8a6;
  --teal-lighter: #5eead4;
  --teal-bright: #2dd4bf;
  --teal-dark: #0f766e;
  --teal-gradient: linear-gradient(90deg, var(--teal-main), var(--teal-light));

  /* === 语义色扩展（补充深色变体） === */
  --danger-dark: #991b1b;
  --danger-gradient-bg: linear-gradient(135deg, #e6fffa, #ccfbf1);
  --warning-dark: #92400e;
  --info-dark: #1e40af;
  --success-dark: #065f46;

  /* === 考勤/状态颜色映射（统一引用，消除 JS 硬编码色值） === */
  --att-normal: #059669;
  --att-unchecked: #d97706;
  --att-late: #ea580c;
  --att-absent: #991b1b;
  --att-pending: #f59e0b;
  --att-leave: #2563eb;
  --att-out: var(--teal-dark);
  --att-travel: #7c3aed;
  --att-weekend: #0891b2;
  --att-holiday: #db2777;
  --att-rest: #4f46e5;

  /* === 过渡 === */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* === Element Plus 覆盖 === */
  --el-color-primary: #1e3a5f;
  --el-color-primary-light-3: #2a4a7a;
  --el-color-primary-light-5: #3a5a8a;
  --el-color-primary-light-7: #5a7aaa;
  --el-color-primary-light-8: #7a9aba;
  --el-color-primary-light-9: #e8edf2;
  --el-color-primary-dark-2: #152a47;
  --el-border-radius-base: 8px;

  /* === 向后兼容别名 === */
  --primary-dark: var(--primary);
  --primary-accent: var(--accent-teal);
  --primary-accent-light: var(--accent-blue);
  --bg-body: var(--bg-page);
}

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

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

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-page);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* --- Typography Helpers --- */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out-quart);
}
a:hover { color: var(--primary-hover); }

/* --- Utility Classes --- */
.text-muted { color: var(--text-tertiary); }
.text-secondary { color: var(--text-secondary); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-info { color: var(--info); }
.text-bold { font-weight: var(--font-semibold); }

/* --- I-10: 可点击行统一视觉线索 --- */
.clickable-row { cursor: pointer; }
.clickable-row:hover { background: var(--gray-50); }
.el-table__row.clickable-row { cursor: pointer; }
.el-table tr { cursor: pointer; }
.el-table tr:hover > td { background: var(--gray-50) !important; }

/* --- V-03: 弹窗宽度三档标准化 --- */
.dialog-sm { max-width: 420px !important; }
.dialog-md { max-width: 550px !important; }
.dialog-lg { max-width: 700px !important; }

/* --- U-01: 统一空状态组件 --- */
.empty-state-card { 
  text-align: center; padding: var(--space-10); 
  color: var(--text-tertiary); border: 2px dashed var(--gray-200);
  border-radius: var(--radius-lg); background: var(--gray-50);
}

/* 通用布局工具类 —— 替代高频内联 style= 模式 */
.mt-4 { margin-top: var(--space-4); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.p-4 { padding: var(--space-4); }
.gap-3 { display: flex; gap: var(--space-3); }
.gap-2 { display: flex; gap: var(--space-2); }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { display: flex; flex-wrap: wrap; }
.flex-1 { flex: 1; min-width: 0; }

/* 空状态 / 加载占位 */
.empty-state { text-align: center; padding: var(--space-6); color: var(--text-tertiary); }
.empty-state-icon { font-size: 48px; margin-bottom: var(--space-3); }

/* 进度条颜色统一 */
.progress-danger .el-progress-bar__inner { background-color: var(--danger) !important; }
.progress-teal .el-progress-bar__inner { background-color: var(--accent-teal) !important; }

/* 超期标记 */
.section-danger { color: var(--danger); border-color: var(--danger); }
.section-danger-light { background: var(--danger-light); color: var(--danger); }

/* 任务卡片头部 teal 渐变（统一 task-list 的硬编码渐变） */
.card-teal-header {
  background: var(--danger-gradient-bg);
  margin: -24px -24px 16px;
  padding: 16px 24px;
  border-radius: 14px 14px 0 0;
  border-bottom: 2px solid var(--teal-lighter);
}

/* ============================================
   Status Tags
   ============================================ */
.status-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.status-in_progress   { background: #fef9c3; color: #a16207; }
.status-rejected      { background: #fee2e2; color: #dc2626; }
.status-completed     { background: #dcfce7; color: #15803d; }
.status-overdue       { background: #fecaca;  color: #dc2626; }
.status-cancelled     { background: #f3f4f6;    color: #6b7280; }
.status-pending_review { background: #fef3c7;           color: #92400e; }

/* Review banner */
.review-banner {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 14px;
}

.review-total {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  background: var(--gray-100);
  padding: 2px 10px;
  border-radius: 12px;
}

/* ============================================
   Cards
   ============================================ */
.card {
  background: var(--bg-surface);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: var(--space-6);
  margin-bottom: var(--space-4);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: transform var(--duration-normal) var(--ease-out-quart), box-shadow var(--duration-normal) var(--ease-out-quart);
}
.card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-light);
}
.card-count {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  background: var(--gray-100);
  padding: 2px 10px;
  border-radius: 20px;
}

/* ============================================
   Stat Cards
   ============================================ */
.stat-card {
  background: var(--bg-surface);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: var(--space-5) var(--space-6);
  min-height: 80px;
  text-align: left;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  position: relative;
  overflow: hidden;
  transition: transform var(--duration-fast) var(--ease-out-quart), box-shadow var(--duration-fast) var(--ease-out-quart);
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-teal), transparent);
  opacity: 0;
  transition: opacity var(--duration-normal);
}
.stat-card:hover::before { opacity: 0.6; }
.stat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: var(--primary);
  opacity: 0.8;
}
.stat-card.stat-success::after { background: var(--success); }
.stat-card.stat-warning::after { background: var(--warning); }
.stat-card.stat-danger::after { background: var(--danger); }
.stat-num {
  font-size: 2rem;
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.02em;
  min-height: 1.75em;
  display: block;
}
.stat-label {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
  font-weight: var(--font-medium);
}

/* ============================================
   Overdue Banner
   ============================================ */
.overdue-banner {
  background: var(--danger);
  color: #fff;
  padding: var(--space-3) var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  letter-spacing: 0.01em;
  animation: bannerPulse 2.5s ease-in-out infinite;
}
.overdue-banner a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: var(--space-2);
}
.ok-banner {
  background: var(--success);
  color: #fff;
  padding: var(--space-3) var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}
@keyframes bannerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.88; }
}

/* ============================================
   Task Items (List Cards)
   ============================================ */
.task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out-quart), color var(--duration-fast) var(--ease-out-quart), border-color var(--duration-fast) var(--ease-out-quart);
  margin-bottom: 2px;
}
.task-item:hover { background: var(--gray-50); }
.task-item:last-child { margin-bottom: 0; }
.task-item-main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}
.task-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--font-medium);
}
.task-item-info {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.week-due-card {
  border-left: 3px solid var(--warning);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ============================================
   Collaboration Badge
   ============================================ */
.collab-badge {
  display: inline-flex;
  align-items: center;
  background: var(--primary-subtle);
  color: var(--primary);
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.03em;
}
/* Recurring badge */
.recur-badge {
  display: inline-flex;
  align-items: center;
  background: #ede9fe;
  color: #7c3aed;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: var(--font-semibold);
}
/* Priority tags */
.prio-tag { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; }
.prio-urgent { background: #fee2e2; color: #dc2626; animation: deadlinePulse 1s ease-in-out infinite; }
.prio-important { background: #fff7ed; color: #ea580c; }
.prio-tag-label { background: var(--gray-100); color: var(--gray-600); font-weight: 600; }

/* ============================================
   Log Detail Formatting
   ============================================ */
.log-old { text-decoration: line-through; color: var(--text-tertiary); }
.log-new { color: var(--success); font-weight: var(--font-semibold); }

/* ============================================
   Page Layout Helpers
   ============================================ */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
  gap: var(--space-3);
}
.page-header h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--primary);
  letter-spacing: 1px;
}

.filter-bar {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
}

/* ============================================
   Empty State
   ============================================ */
.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--text-tertiary);
}
.empty-state-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
  opacity: 0.4;
}
/* 统一样式的内联空状态卡片 */
.card-empty{text-align:center;padding:40px 20px;color:var(--text-tertiary);font-size:13px;background:var(--gray-50);border-radius:var(--radius-md)}
.card-empty svg{opacity:.3;margin-bottom:12px}

/* ============================================
   Responsive
   ============================================ */

/* ============================================
   Element Plus Overrides
   ============================================ */
.el-button--primary {
  --el-button-bg-color: var(--primary);
  --el-button-border-color: var(--primary);
  --el-button-hover-bg-color: var(--primary-hover);
  --el-button-hover-border-color: var(--primary-hover);
  --el-button-active-bg-color: var(--primary-hover);
  border-radius: var(--radius-sm);
  font-weight: var(--font-medium);
  letter-spacing: 0.01em;
  transition: background var(--duration-fast) var(--ease-out-quart), color var(--duration-fast) var(--ease-out-quart), border-color var(--duration-fast) var(--ease-out-quart);
}
.el-button {
  border-radius: var(--radius-sm);
  font-weight: var(--font-medium);
  transition: background var(--duration-fast) var(--ease-out-quart), color var(--duration-fast) var(--ease-out-quart), border-color var(--duration-fast) var(--ease-out-quart);
}
.el-button:hover {
  transform: translateY(-1px);
}
.el-button:active {
  transform: translateY(0);
}

.el-input__wrapper {
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  border: var(--border-light);
  transition: background var(--duration-fast) var(--ease-out-quart), color var(--duration-fast) var(--ease-out-quart), border-color var(--duration-fast) var(--ease-out-quart);
}
.el-input__wrapper:hover {
  border-color: var(--gray-400);
}
.el-input.is-focus .el-input__wrapper {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1) !important;
}

.el-select .el-input__wrapper {
  border-radius: var(--radius-sm) !important;
}

.el-table {
  --el-table-border-color: var(--gray-200);
  --el-table-header-bg-color: var(--gray-50);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: var(--text-base);
}
.el-table th.el-table__cell {
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-transform: none;
  letter-spacing: 0.01em;
}
.el-table .el-table__row {
  transition: background var(--duration-fast);
}
.el-table .el-table__row:hover {
  background: var(--primary-subtle) !important;
}

.el-dialog {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}
.el-dialog__header {
  padding: var(--space-5) var(--space-6) 0;
}
.el-dialog__title {
  font-weight: var(--font-semibold);
  font-size: var(--text-lg);
}
.el-dialog__body {
  padding: var(--space-5) var(--space-6);
}

.el-tag {
  border-radius: var(--radius-sm);
  font-weight: var(--font-medium);
  letter-spacing: 0.01em;
}

.el-progress-bar__outer {
  border-radius: 10px;
  background: var(--gray-200);
  height: 8px !important;
}
.el-progress-bar__inner {
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(13,148,136,0.2);
}

.el-pagination {
  font-weight: var(--font-medium);
}
.el-pager li {
  border-radius: var(--radius-sm) !important;
  font-weight: var(--font-medium);
}

.el-empty__description {
  color: var(--text-tertiary);
}

.el-form-item__label {
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  font-size: var(--text-base);
}

.el-descriptions__label {
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.el-upload {
  display: inline-block;
}

/* --- Element Plus Menu Overrides --- */
.el-menu {
  border-right: none !important;
}
.el-menu-item {
  font-size: var(--text-base);
  height: 42px;
  line-height: 42px;
  margin: 2px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-out-quart), color var(--duration-fast) var(--ease-out-quart), border-color var(--duration-fast) var(--ease-out-quart);
}
.el-menu-item:hover {
  background: var(--bg-sidebar-hover) !important;
}
.el-menu-item.is-active {
  background: var(--bg-sidebar-active) !important;
  color: #ffffff !important;
}

/* ============================================
   Layout - Main Shell
   ============================================ */
.app-layout { display: flex; min-height: 100vh; }
.app-sidebar {
  width: 200px; background: linear-gradient(180deg, var(--bg-sidebar-top) 0%, var(--bg-sidebar-bottom) 100%); display: flex; flex-direction: column;
  flex-shrink: 0; transition: width 0.25s var(--ease-out-expo); overflow: hidden; z-index: 100; position: sticky; top: 0; height: 100vh;
}
.app-sidebar::after { content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: linear-gradient(180deg, rgba(13,148,136,0.15), transparent 40%, transparent 60%, rgba(13,148,136,0.08)); pointer-events: none; }
.sidebar-collapsed .app-sidebar { width: 68px; }
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 20px 18px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.brand-icon { flex-shrink: 0; }
.brand-text { font-size: 15px; font-weight: 600; color: #fff; letter-spacing: 0.02em; white-space: nowrap; }

.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.sidebar-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
.sidebar-username { font-size: 13px; color: rgba(255,255,255,0.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-nav { flex: 1; padding: 12px 10px; overflow-y: auto; overflow-x: hidden; }
.nav-section { margin-bottom: 8px; }
.nav-section-title { display: block; padding: 8px 10px 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.40); }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: rgba(255,255,255,0.65); text-decoration: none; font-size: 13px; font-weight: 500; transition: all 0.2s ease; margin-bottom: 1px; white-space: nowrap; position: relative; border: 1px solid transparent; }
.nav-item:hover { background: var(--bg-sidebar-hover); color: rgba(255,255,255,0.85); transform: translateX(2px); }
.nav-item.active { background: var(--bg-sidebar-active); color: #ffffff; border-color: rgba(13,148,136,0.15); box-shadow: inset 0 0 20px rgba(13,148,136,0.06); }
.nav-item.active::before { content: ''; position: absolute; left: -2px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: var(--primary-light); border-radius: 0 3px 3px 0; }
.nav-icon { font-size: 16px; flex-shrink: 0; width: 24px; text-align: center; }
.nav-label { flex: 1; }
.nav-badge { background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px; min-width: 20px; text-align: center; }
.nav-badge-dot { width: 7px; height: 7px; background: #ef4444; border-radius: 50%; }
.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg-page); }
/* 安全区适配 */
.app-content{padding-bottom:env(safe-area-inset-bottom,0)}
.mobile-tabbar{padding-bottom:env(safe-area-inset-bottom,0)}
.app-topbar { padding-top: env(safe-area-inset-top, 0); height: 56px; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid rgba(0,0,0,0.05); flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.03); }
.topbar-left { display: flex; align-items: center; gap: 14px; }
.menu-toggle { background: var(--gray-50); border: 1px solid var(--gray-200); color: var(--text-secondary); cursor: pointer; padding: 6px; border-radius: 10px; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.menu-toggle:hover { background: var(--gray-100); color: var(--text-primary); border-color: var(--gray-300); }
.breadcrumb-current { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.breadcrumb-trail { font-size: 14px; display: flex; align-items: center; gap: 6px; }
.bc-sep { color: var(--gray-400); margin: 0 2px; font-size: 16px; }
.bc-link { color: var(--text-secondary); text-decoration: none; }
.bc-link:hover { color: var(--primary); }
.topbar-right { display: flex; align-items: center; gap: 18px; min-width: 200px; }
.topbar-greeting { font-size: 13px; color: var(--text-tertiary); min-width: 80px; white-space: nowrap; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #14b8a6); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s, border-color .15s, opacity .15s; }
.user-avatar:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(13,148,136,0.2); }
.avatar-text { color: #fff; font-size: 14px; font-weight: 700; }
.dropdown-user-info { padding: 12px 16px 8px; border-bottom: 1px solid var(--gray-200); }

.settings-avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #14b8a6); display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff; font-weight: 700; flex-shrink: 0; }

/* 通用头像：任何地方复用 */
.avatar-xs { width:24px;height:24px;border-radius:50%;background:#b2dfdb;display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:#fff;font-weight:700;flex-shrink:0;background-size:cover;background-position:center;transition:opacity 0.4s ease;animation:avatarPulse 2s ease-in-out 2 }
.avatar-sm { width:30px;height:30px;border-radius:50%;background:#b2dfdb;display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:#fff;font-weight:700;flex-shrink:0;background-size:cover;background-position:center;transition:opacity 0.4s ease;animation:avatarPulse 2s ease-in-out 2 }
.avatar-md { width:40px;height:40px;border-radius:50%;background:#b2dfdb;display:inline-flex;align-items:center;justify-content:center;font-size:16px;color:#fff;font-weight:700;flex-shrink:0;background-size:cover;background-position:center;transition:opacity 0.4s ease;animation:avatarPulse 2s ease-in-out 2 }

@keyframes avatarPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .avatar-xs, .avatar-sm, .avatar-md { animation: none !important; }
}
.dropdown-user-info strong { display: block; font-size: 14px; }
.dropdown-user-info span { font-size: 12px; color: var(--text-tertiary); }
.app-content { flex: 1; padding: 24px 40px 24px 36px; overflow-y: auto; }

/* ============================================
   Dashboard
   ============================================ */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.quick-actions { margin-bottom: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
.board-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-height: 300px; }
.board-column { display: flex; flex-direction: column; }
/* Dashboard mid-row: holidays + overdue side by side */
.dash-mid-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.dash-mid-left, .dash-mid-right { min-width: 0; }
.dash-mid-left .holiday-card{background:linear-gradient(165deg,#fffdf7,#fffbeb 40%,#f0fdfa);border:1px solid rgba(245,158,11,.15);border-radius:var(--radius-lg);padding:20px 24px;margin-bottom:var(--space-4);box-shadow:var(--shadow-sm)}
.dash-mid-right .card { height: 100%; }
.overdue-column { border: 2px solid #fecaca !important; animation: overdueGlow 2s ease-in-out infinite; }
.overdue-item { background: #fff5f5; border-radius: 6px; border-left: 3px solid #ef4444; }
.overdue-item:hover { background: #fef2f2 !important; }
.g-owner { display: flex; align-items: center; }
.owner-name { font-size: 12px; color: var(--text-secondary); }
/* Performance grid for admin view */
.perf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.perf-user-card { background: var(--bg-surface); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 14px; transition: box-shadow 0.2s; }
.perf-user-card:hover { box-shadow: var(--shadow-md); }
.perf-user-card.perf-grade-S { border-left: 4px solid #0f766e; }
.perf-user-card.perf-grade-A { border-left: 4px solid #2563eb; }
.perf-user-card.perf-grade-B { border-left: 4px solid #d97706; }
.perf-user-card.perf-grade-C { border-left: 4px solid #dc2626; }
.perf-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.perf-card-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex-shrink: 0; }
.perf-card-name { font-size: 15px; font-weight: 600; color: var(--text-primary); flex: 1; }
.perf-card-grade { font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.grade-S { background: #ccfbf1; color: #0f766e; }
.grade-A { background: #dbeafe; color: #2563eb; }
.grade-B { background: #fef3c7; color: #d97706; }
.grade-C { background: #fee2e2; color: #dc2626; }
.perf-card-body { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; text-align: center; }
.perf-card-stat { display: flex; flex-direction: column; gap: 2px; }
.perf-card-num { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.perf-card-num.green { color: var(--success); }
.perf-card-num.red { color: var(--danger); }
.perf-card-label { font-size: 11px; color: var(--text-tertiary); }
.overdue-title { color: #dc2626; font-weight: 700; }
.overdue-days { color: #dc2626; font-weight: 700; font-size: 12px; background: #fee2e2; padding: 2px 8px; border-radius: 10px; }
@keyframes overdueGlow {
  0%, 100% { border-color: #fecaca; box-shadow: 0 0 0 rgba(239,68,68,0); }
  50% { border-color: #fca5a5; box-shadow: 0 0 12px rgba(239,68,68,0.08); }
}
.view-all { text-align: center; padding-top: 12px; border-top: var(--border-light); margin-top: 8px; }
.task-list { flex: 1; }

/* ============================================
   Task List
   ============================================ */
.filter-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.table-card { padding: 16px 20px; }
.pagination-wrap { margin-top: 16px; display: flex; justify-content: flex-end; }

/* ============================================
   Task Form
   ============================================ */
.form-card { max-width: 900px; }
.form-row { display: flex; gap: 20px; }
.form-col { flex: 1; min-width: 0; }
.form-col-wide { flex: 2; }
.form-col-narrow { flex: 0.7; }
.progress-row { display: flex; align-items: center; gap: 16px; }
.progress-value { font-size: 13px; font-weight: 600; color: var(--text-secondary); min-width: 36px; text-align: right; }
/* Progress Section - Enhanced */
.progress-section { padding: 8px 0; }
.progress-presets { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.preset-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; height: 32px; padding: 0 12px;
  border: 1.5px solid var(--gray-300); border-radius: 16px;
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s, opacity .15s ease; user-select: none;
  background: var(--bg-surface);
}
.preset-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-subtle); }
.preset-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
/* Larger slider */
.progress-section .el-slider { height: 32px; display: flex; align-items: center; }
.progress-section .el-slider__runway { height: 8px; border-radius: 4px; }
.progress-section .el-slider__bar { height: 8px; border-radius: 4px; }
.progress-section .el-slider__button-wrapper { top: -12px; }
.progress-section .el-slider__button {
  width: 22px; height: 22px; border: 3px solid var(--primary);
}
.progress-section .el-slider__stop { top: -4px; width: 6px; height: 6px; }
.progress-section .el-slider__marks-text { font-size: 12px; margin-top: 10px; }
.form-actions { margin-top: 8px; padding-top: 20px; border-top: var(--border-light); display: flex; gap: 12px; }
.attachment-list { margin-bottom: 12px; }
.attachment-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--gray-50); border-radius: 8px; margin-bottom: 4px; font-size: 13px; transition: background 0.15s; }
.attachment-item:hover { background: var(--gray-100); }
.att-icon { color: var(--text-tertiary); }
.att-name { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-meta, .att-uploader, .att-time { color: var(--text-tertiary); font-size: 12px; white-space: nowrap; }
.att-link { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }

/* ============================================
   Task Detail
   ============================================ */
.detail-card { padding: 28px; }
.detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; padding-bottom: 20px; border-bottom: var(--border-light); gap: 16px; }
.detail-title { font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; }
.detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 24px; }
.detail-field { display: flex; flex-direction: column; gap: 4px; }
.detail-field-full { grid-column: 1 / -1; }
.field-label { font-size: 12px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.field-value { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-primary { color: var(--primary) !important; }
.detail-section { margin-top: 28px; padding-top: 20px; border-top: var(--border-light); }
.section-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.section-count { font-size: 12px; color: var(--text-tertiary); background: var(--gray-100); padding: 1px 8px; border-radius: 10px; font-weight: 500; }
.content-body { white-space: pre-wrap; line-height: 1.8; color: var(--text-secondary); font-size: 14px; }
.completion-box { background: var(--primary-subtle); border-radius: 10px; padding: 16px 20px; border: 1px solid #ccfbf1; border-top: none; margin-top: 28px; }
.completion-box .section-title { color: var(--primary); margin-bottom: 8px; }
.comment-item { display: flex; gap: 12px; padding: 16px 0; border-bottom: var(--border-light); }
.comment-item:last-child { border-bottom: none; }
.comment-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #14b8a6); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.comment-time { font-size: 12px; color: var(--text-tertiary); }
.comment-text { white-space: pre-wrap; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.comment-del:hover { opacity: 1 !important; }
@media (hover: none) { .comment-del { opacity: 1 !important; } }
/* Operation History Timeline */
.history-timeline { position: relative; padding-left: 20px; }
.history-timeline::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--gray-200); }
.history-item { position: relative; padding: 8px 0 12px 16px; }
.history-item:last-child { padding-bottom: 0; }
.history-dot { position: absolute; left: -15px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--gray-400); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--gray-200); }
.hdot-green { background: #059669; box-shadow: 0 0 0 2px #d1fae5; }
.hdot-red { background: #dc2626; box-shadow: 0 0 0 2px #fee2e2; }
.hdot-orange { background: #d97706; box-shadow: 0 0 0 2px #fef3c7; }
.hdot-blue { background: #2563eb; box-shadow: 0 0 0 2px #dbeafe; }
.hdot-gray { background: #94a3b8; box-shadow: 0 0 0 2px var(--gray-200); }
.hdot-info { background: #2563eb; box-shadow: 0 0 0 2px #dbeafe; }
.history-body { min-width: 0; }
.history-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.history-head strong { font-size: 13px; color: var(--text-primary); }
.history-time { font-size: 11px; color: var(--text-tertiary); margin-left: auto; }
.history-detail { font-size: 13px; color: var(--text-secondary); background: var(--gray-50); padding: 6px 10px; border-radius: 6px; margin-top: 4px; white-space: pre-wrap; line-height: 1.5; }
.header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Inline progress edit on detail page */
.detail-progress-edit { display: flex; align-items: center; gap: 12px; padding: 8px 0; }

/* ============================================
   Calendar
   ============================================ */
.month-nav { display: flex; align-items: center; gap: 8px; }
.month-label { font-size: 16px; font-weight: 600; min-width: 100px; text-align: center; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--gray-300); border: 1px solid var(--gray-300); border-radius: 8px; overflow: hidden; }
.cal-header { background: var(--gray-50); padding: 8px; text-align: center; font-weight: 600; font-size: 13px; }
.cal-day { background: var(--bg-surface); min-height: 80px; padding: 4px; }
.cal-other { background: var(--gray-50); }
.cal-other .cal-day-num { color: #ccc; }
.cal-today { background: #e6f7ff; }
.cal-day-num { font-size: 13px; font-weight: 600; padding: 2px 4px; }
.cal-day-tasks { margin-top: 2px; }
.cal-task { font-size: 11px; padding: 1px 4px; margin-bottom: 1px; border-radius: 3px; background: #e6f7ff; color: #1890ff; cursor: pointer; overflow: hidden; white-space: nowrap; }
.cal-task-overdue { background: #fff2f0; color: #f5222d; }
.cal-task:hover { opacity: 0.8; }

/* ============================================
   Notifications
   ============================================ */
.notify-item { display: flex; gap: 12px; padding: 14px; border-bottom: 1px solid var(--gray-200); cursor: pointer; transition: background 0.2s; }
.notify-item:hover { background: var(--gray-50); }
.notify-unread { background: #e6f7ff; }
.notify-dot { width: 8px; height: 8px; border-radius: 50%; background: #1890ff; margin-top: 6px; flex-shrink: 0; }
/* Log Table (plain HTML) */
.log-table{width:100%;border-collapse:collapse}
.log-table th{background:var(--gray-50);padding:10px 12px;text-align:left;font-size:12px;font-weight:600;color:var(--text-secondary);border-bottom:2px solid var(--gray-300)}
.log-table td{padding:8px 12px;font-size:13px;border-bottom:1px solid var(--gray-100);vertical-align:top}
.log-table tr:hover td{background:var(--gray-50)}
.tag-sm{display:inline-block;padding:1px 6px;border-radius:4px;font-size:11px;font-weight:600}
.tag-green{background:var(--success-light);color:var(--success)}.tag-red{background:var(--danger-light);color:var(--danger)}.tag-orange{background:var(--warning-light);color:var(--warning)}.tag-blue{background:var(--info-light);color:var(--info)}.tag-gray{background:var(--gray-100);color:var(--text-secondary)}.tag-info{background:var(--info-light);color:var(--info)}

/* ============================================
   Grouped Task List
   ============================================ */
.task-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: 8px; cursor: pointer; transition: background 0.15s; margin-bottom: 2px; }
.task-row:hover { background: var(--gray-50); }
.task-row-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.task-row-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-row-right { display: flex; align-items: center; gap: 16px; color: var(--text-tertiary); font-size: 13px; flex-shrink: 0; }
.task-row-date { white-space: nowrap; }
.group-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--gray-50); border-radius: 10px; margin-bottom: 8px; }
.group-avatar { width: 36px; height: 36px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex-shrink: 0; }
.group-name { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.group-count { font-size: 12px; color: var(--text-tertiary); margin-left: auto; }
.group-card { padding: 16px 20px; }
/* Grid alignment system */
.g-row {
  display: grid; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  transition: background 0.15s; margin-bottom: 2px; line-height: 1.4;
}
.g-row:hover { background: var(--gray-50); }
.g-head {
  display: grid; align-items: center; gap: 8px;
  padding: 10px 12px; font-size: 11px; font-weight: 600;
  color: var(--text-tertiary); text-transform: uppercase;
  letter-spacing: 0.04em; border-bottom: 1px solid var(--gray-100);
  margin-bottom: 4px; border-radius: 0; line-height: 1;
}
.g-head:hover { background: transparent; }
.g-head > *, .g-row > * { display: flex; align-items: center; }
/* Grid column templates */
.g-4 { grid-template-columns: 1.6fr 115px 100px 110px; gap: 10px; }  /* name date deadline progress */
.g-3 { grid-template-columns: 1.6fr 115px 100px; gap: 10px; }         /* name date deadline */
.g-2 { grid-template-columns: 1.6fr auto; gap: 10px; }               /* name deadline */
.g-5 { grid-template-columns: 1.6fr 115px 100px 110px 52px; gap: 8px; } /* name date deadline progress btn */
.g-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.g-date { white-space: nowrap; font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; }
.g-dl { display: flex; align-items: center; justify-content: center; }
.g-prog { min-width: 0; display: flex; align-items: center; }
.g-btn { display: flex; align-items: center; justify-content: center; }
/* Tablet */
@media (max-width: 1024px) {
  .g-4 { grid-template-columns: 1.3fr 105px 90px 100px; gap: 8px; }
  .g-3 { grid-template-columns: 1.3fr 105px 90px; gap: 8px; }
  .g-5 { grid-template-columns: 1.3fr 105px 90px 100px 44px; gap: 6px; }
}
/* ============================================
   Responsive Design System
   四级断点: Desktop≥1024 Tablet≥768 Phone≥480 Small<480
   ============================================ */

/* --- Tablet (768-1024px) --- */
@media (max-width: 1024px) {
  .board-columns { grid-template-columns: 1fr; }
  .dash-mid-row { grid-template-columns: 1fr; }
  .perf-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: repeat(2, 1fr); }
  .duty-week { grid-template-columns: repeat(4, 1fr); }
  .app-content { padding: 16px; }
}

/* --- Phone (480-768px) --- */


@media (max-width: 768px) {
:root {
    --text-base: 0.875rem;
    --text-lg: 1.0625rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
  }
  .card { padding: var(--space-4); border-radius: var(--radius-md); }
  .task-item { flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); }
  .task-item-info { width: 100%; justify-content: space-between; }
  .stat-card { padding: var(--space-4); }
  .stat-num { font-size: 1.5rem; }
/* Sidebar */
  .app-layout { position: relative; }
  .app-sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 999;
    width: 240px; transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 4px 0 24px rgba(0,0,0,0.2); }
  .app-layout:not(.sidebar-collapsed) .app-sidebar { transform: translateX(0); }
  .sidebar-overlay.visible { display: block; position: fixed; inset: 0; z-index: 998; background: rgba(0,0,0,0.4); animation: fadeIn 0.2s ease; }
  .app-topbar { padding: 0 12px; height: 52px; }
  .app-content { padding: 12px; }
  .topbar-greeting { display: none; }
  .breadcrumb-current { font-size: 14px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu-toggle { width: 40px; height: 40px; border-radius: 8px; }
  .user-avatar { width: 30px; height: 30px; }
  .avatar-text { font-size: 12px; }

  /* Stats — fixed height */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-label { font-size: 11px; }

  /* Cards */
  .card-header { margin: -12px -12px 10px !important; padding: 10px 12px !important; font-size: 14px; }
  .page-header { margin-bottom: 10px; }
  .page-header h2 { font-size: 17px; }

  /* Forms */
  .form-row { flex-direction: column !important; gap: 0 !important; }
  .form-card { padding: 14px !important; max-width: 100%; }
  .el-dialog__header { padding: 12px 14px !important; font-size: 15px !important; }
  .el-dialog__body { padding: 10px 14px !important; }
  .el-form-item__label { font-size: 13px !important; padding-bottom: 2px !important; }

  /* Task cards — mobile card mode */
  .task-row { flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 12px; min-height: 44px; }
  .task-row-left { width: 100%; flex-wrap: wrap; }
  .task-row-right { width: 100%; flex-wrap: wrap; gap: 6px; font-size: 12px; }
  .task-row-right .el-progress { width: 100% !important; }
  .group-header { padding: 8px 10px; margin-bottom: 4px; }
  .group-avatar { width: 30px; height: 30px; font-size: 14px; }
  .group-name { font-size: 13px; }
  .group-card { padding: 8px 10px; }

  /* Mobile inline labels */
  .m-label { display: inline-block; font-size: 10px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin-right: 4px; white-space: nowrap; }
  .m-label::after { content: ':'; }

  /* Task detail */
  .detail-card { padding: 16px !important; }
  .detail-header { flex-direction: column; gap: 8px; }
  .detail-title { font-size: 17px; }
  .detail-grid { grid-template-columns: repeat(2, 1fr); gap: 6px 10px; }
  .header-actions { flex-wrap: wrap; gap: 4px; }

  /* Calendar */
  .calendar-grid { font-size: 11px; }
  .cal-day { min-height: 44px; padding: 2px; }
  .cal-header { font-size: 11px; padding: 4px 2px; }
  .cal-task { font-size: 11px; padding: 2px 4px; border-radius: 2px; min-height: 22px; }
  .cal-day-num { font-size: 11px; }

  /* Duty week */
  .duty-week { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .duty-day-card { padding: 12px 10px; border-radius: var(--radius-md); }
  .duty-day-avatar { width: 28px; height: 28px; font-size: 14px; }
  .duty-day-text { font-size: 12px; }
  .duty-day-name { font-size: 12px; margin-bottom: 8px; }

  /* Dashboard */
  .quick-actions { flex-direction: column; }
  .quick-actions .el-button { width: 100%; justify-content: center; min-height: 44px; }
  .task-item-info .el-progress { width: 100% !important; }
  .notify-dash { padding: 10px 12px; border-radius: var(--radius-md); }
  .today-duty { padding: 8px 10px; border-radius: var(--radius-md); font-size: 12px; }

  /* Tables scroll */
  .el-table { font-size: 12px; }
  .filter-row { gap: 6px; }
  .filter-row > * { flex: 1 1 100% !important; min-width: 0; }

  /* Deadline */
  .deadline-badge { font-size: 11px; padding: 2px 6px; }
  .deadline-urgent { font-size: 12px; padding: 3px 8px; }

  /* Progress */
  .progress-presets { gap: 3px; }
  .preset-btn { min-width: 42px; height: 32px; font-size: 12px; padding: 0 8px; border-radius: 16px; }
  .progress-value { font-size: 12px; }

  /* Sidebar nav */
  .nav-item { min-height: 40px; font-size: 14px; padding: 8px 12px; }
  .sidebar-brand { padding: 16px 14px; }
  .brand-text { font-size: 16px; }
/* ---- 工作台顶部卡片行 ---- */
.dash-top-row{display:flex;gap:16px;margin-bottom:24px;flex-wrap:nowrap;align-items:stretch}
.dash-box{flex:1;min-width:0;background:var(--bg-surface);border:1px solid rgba(0,0,0,.07);border-radius:16px;padding:20px 16px;text-align:center;cursor:pointer;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden}
.dash-box:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.dash-box-num{font-size:32px;font-weight:800;color:var(--text-primary);line-height:1.15;margin-bottom:4px}
.dash-box-num span{font-size:16px;font-weight:500;color:var(--text-secondary)}
.dash-box-label{font-size:13px;color:var(--text-secondary);margin-bottom:2px}
.dash-box-sub{font-size:11px;color:var(--text-tertiary);margin-bottom:6px}
.dash-box-bar{height:5px;background:var(--gray-100);border-radius:3px;overflow:hidden;margin-top:4px}
.dash-box-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#0ea5e9,#38bdf8);transition:width .5s;position:relative}
.dash-box-bar i::after{content:'';position:absolute;top:0;right:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6));animation:dashPulse 2s ease-in-out infinite;border-radius:3px}
@keyframes dashPulse{0%,100%{opacity:0}40%{opacity:.8}60%{opacity:1}}
.dash-box.dash-year{border-top:3px solid #0ea5e9}
.dash-box.dash-today{border-top:3px solid #f59e0b}
.dash-box.dash-red{border-top:3px solid var(--danger)}
.dash-box.dash-red .dash-box-num{color:var(--danger)}
.dash-box.dash-orange{border-top:3px solid var(--warning)}
.dash-box.dash-orange .dash-box-num{color:var(--warning)}
.dash-box.dash-create{background:var(--accent-teal)!important;border-color:var(--accent-teal)!important;flex:0 0 100px}
.dash-box.dash-create .dash-box-label{color:rgba(255,255,255,.85)}
.dash-plus{font-size:28px;color:#fff;line-height:1;font-weight:300}
}
@media (max-width: 768px) {
  .report-summary { grid-template-columns: 1fr; }
.global-search .el-input { width: 140px !important; }
  .search-drop { width: 280px; left: 0; right: auto; }
.week-grid{gap:4px}.week-card{padding:10px 4px 8px}.week-card-num{font-size:1.25rem}.member-bar-name{width:50px;font-size:11px}
.tomorrow-duty{padding:8px 10px;font-size:12px}
/* Sidebar overlay — shown when sidebar is open */
  .sidebar-overlay.visible { display: block; position: fixed; inset: 0; z-index: 998; background: rgba(0,0,0,0.4); animation: fadeIn 0.2s ease; }
  .dash-top-row{flex-wrap:wrap!important;gap:10px}
  .dash-box{padding:14px 12px;min-width:130px}
  .dash-box.dash-create{flex:1 1 100%!important;min-height:44px}
  .dash-box-num{font-size:26px}
  .dash-box-label{font-size:12px}
  .dash-box-sub{font-size:10px}
  .smart-banner{padding:10px 12px;gap:6px}
  .smart-banner-text{width:100%;text-align:center}

  /* Form fields full-width in column mode */
  .form-row > .el-form-item { width: 100% !important; flex: 1 1 100% !important; }
  .form-col, .form-col-wide, .form-col-narrow { width: 100% !important; flex: 1 1 100% !important; }

  /* Topbar alignment */
  .topbar-left { display: flex; align-items: center; gap: 8px; }
  .topbar-right { display: flex; align-items: center; gap: 4px; }

  /* Task list & table */
  .el-table td.el-table__cell { padding: 8px 6px; vertical-align: middle; }

  /* Detail card spacing */
  .detail-field { padding: 6px 0; }
  .field-label { font-size: 11px; margin-bottom: 1px; }
  .field-value { font-size: 13px; }

  /* Button group alignment in header */
  .header-actions .el-button { font-size: 12px; padding: 7px 12px; }

  /* Fix sidebar brand text centering */
  .brand-icon svg { width: 26px; height: 26px; }

  /* Smart banner */
  .smart-banner-stat { min-width: 50px; }

  /* Empty state */
  .empty-state { padding: 24px 12px !important; }

  /* Fix el-table empty text */
  .el-table__empty-text { font-size: 13px; padding: 20px 0; }

  /* Duty page editing */
  .duty-day-card .el-select { width: 100% !important; }
  .duty-day-card .el-checkbox { font-size: 11px; }

  /* Calendar mobile */
  .calendar-header { flex-direction: column; gap: 8px; align-items: stretch; }
  .filter-row > .el-button { flex: 1 1 0; min-width: 0 !important; }
  .filter-row > .el-input { flex: 1 1 120px; min-width: 0 !important; }
  .filter-row > .el-select { flex: 1 1 100px; min-width: 0 !important; }
  .filter-row > .el-date-picker { flex: 1 1 120px; min-width: 0; }
.g-row { display: flex; flex-direction: column; padding: 12px; gap: 8px; }
  .g-name { width: 100% !important; font-size: 14px; font-weight: 600; }
  .g-name > * { white-space: normal !important; word-break: break-word; }
  .g-date, .g-dl { width: auto !important; font-size: 12px; }
  .g-prog { width: 100% !important; }
  .g-btn { width: 100% !important; }
  .g-head { display: none !important; }
  .task-item-title { font-size: 14px !important; font-weight: 600 !important; white-space: normal !important; word-break: break-word; width: 100% !important; }
  .task-item-right { width: 100% !important; display: flex; gap: 6px; align-items: center; }
.el-table td, .el-table th { max-width: 0; }
  .el-table .cell { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; word-break: keep-all; }
.holiday-card{background:linear-gradient(165deg,#fffdf7,#fffbeb 40%,#f0fdfa);border:1px solid rgba(245,158,11,.15);border-radius:var(--radius-lg);padding:20px 24px;margin-bottom:var(--space-4);box-shadow:var(--shadow-sm)}
  .holiday-item { padding: 8px 10px; flex-wrap: wrap; }
  .holiday-icon { font-size: 20px; width: 34px; height: 34px; }
  .holiday-left { gap: 8px; flex: 1 1 auto; }
  .holiday-right { min-width: 60px; flex-shrink: 0; }
  .holiday-countdown { font-size: var(--text-base); }
  .holiday-name { font-size: 13px; white-space: normal; word-break: break-word; }
  .smart-banner{flex-wrap:wrap;gap:8px;padding:12px 16px}
  .smart-create-btn{width:100%;margin-top:4px}
  .overview-filter-bar{flex-direction:column;align-items:stretch}
  .overview-filter-bar .el-select{width:100%!important}
  /* 移动端弹窗：CSS变量控制尺寸 + 备用宽高确保可见 */
  .el-dialog{--el-dialog-width:92vw!important;--el-dialog-margin-top:8vh!important;width:92vw!important;max-width:92vw!important;min-height:30vh}
}
/* --- Small Phone (<480px) --- */
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .stat-num { font-size: 1.15rem; }
  .stat-label { font-size: 12px; }
  .stat-card { min-height: 60px; }
  .duty-week { grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .duty-day-card { padding: 8px 4px; }
  .duty-day-name { font-size: 11px; margin-bottom: 6px; }
  .detail-grid { grid-template-columns: 1fr; }
  .page-header h2 { font-size: 15px; }
  .breadcrumb-current { max-width: 140px; font-size: 13px; }
  .el-pagination .btn-prev, .el-pagination .btn-next { width: 26px; min-width: 26px; }
  .el-pager li { min-width: 26px; height: 26px; line-height: 26px; font-size: 12px; margin: 0 2px; }
  .el-pagination { justify-content: center; flex-wrap: wrap; }
  .deadline-badge { font-size: 10px; padding: 1px 5px; }
  .deadline-urgent { font-size: 11px; }
  .card-header { font-size: 13px; }
}

/* Sidebar overlay (hidden on desktop) */
.sidebar-overlay { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Touch-friendly buttons */
@media (hover: none) and (pointer: coarse) {
  .el-button, .preset-btn, .menu-toggle { min-height: 44px; }
  .nav-item { min-height: 44px; }
  .task-row { min-height: 44px; }
}
/* Dashboard Notification Panel */
.notify-dash { background: linear-gradient(135deg, #fffbeb, #fef3c7); border: 1.5px solid #fcd34d; border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; min-height: 56px; }
.notify-dash-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 15px; font-weight: 700; color: #92400e; }
.notify-dash-badge { background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 10px; min-width: 22px; text-align: center; }
.notify-dash-link { margin-left: auto; font-size: 12px; color: var(--primary); font-weight: 500; }
.notify-dash-list { display: flex; flex-direction: column; gap: 4px; }
.notify-dash-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; transition: background 0.15s; }
.notify-dash-item:hover { background: rgba(255,255,255,0.6); }
.notify-dash-item.unread { font-weight: 600; }
.notify-dash-dot { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; flex-shrink: 0; }
.notify-dash-title { flex: 1; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notify-dash-time { font-size: 11px; color: #999; white-space: nowrap; }
.notify-dash-owner { font-size: 11px; color: var(--primary); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
/* Today Duty Card */
.today-duty-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 20px; border-radius: 12px; margin-bottom: 20px; border: 1.5px solid; transition: background .2s, color .2s, border-color .2s, opacity .2s, transform .2s; }
.today-duty-card.duty-sub { background: linear-gradient(135deg,#f0fdfa,#e6fffa); border-color: #99f6e4; }
.today-duty-card.duty-ok { background: linear-gradient(135deg,#f0fdf4,#dcfce7); border-color: #86efac; }
.today-duty-card.duty-pending { background: linear-gradient(135deg,#fffbeb,#fef3c7); border-color: #fde68a; }
.today-duty-card.duty-reject { background: linear-gradient(135deg,#fef2f2,#fee2e2); border-color: #fecaca; }
.today-duty-card.duty-overdue { background: linear-gradient(135deg,#fef2f2,#fee2e2); border-color: #fca5a5; }
.today-duty-card.duty-none { background: #f8fafc; border-color: var(--gray-200); }
.td-card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.td-label { font-size: 14px; font-weight: 700; color: var(--primary); }
.td-status { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 10px; background: #fff; }
.td-action { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.today-duty-person { display: inline-flex; align-items: center; gap: 6px; background: #fff; padding: 4px 14px 4px 6px; border-radius: 20px; font-size: 14px; font-weight: 600; color: #333; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.today-duty-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background-size: cover; background-position: center; }
@media (max-width: 768px) { .today-duty-card { flex-direction: column; align-items: flex-start; padding: 12px; } }
.duty-status.rejected { background: #fee2e2; color: #dc2626; }
.duty-status.overdue { background: #fee2e2; color: #991b1b; font-weight: 600; }
.duty-status.unsub { background: #f1f5f9; color: #94a3b8; }
/* Duty weekly stats */
.duty-stat-row { display: flex; align-items: center; padding: 8px 12px; gap: 10px; }
.duty-stat-row:hover { background: var(--gray-50); }
.duty-stat-name { width: 60px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.duty-stat-bar-wrap { flex: 1; height: 10px; background: var(--gray-100); border-radius: 5px; overflow: hidden; }
.duty-stat-bar { height: 100%; border-radius: 5px; transition: width 0.4s ease; min-width: 4px; }
.duty-stat-num { font-size: 12px; font-weight: 600; color: var(--text-secondary); min-width: 36px; text-align: right; }

/* Duty Week Grid */
.duty-week-grid { display:grid;grid-template-columns:repeat(7,1fr);gap:8px }
.duty-day-card { background:var(--gray-50);border-radius:10px;padding:12px 10px;text-align:center;min-height:140px;transition: background .15s, color .15s, border-color .15s, opacity .15s;border:1px solid transparent }
.duty-day-card.is-today { background:#f0fdfa;border-color:#99f6e4 }
.duty-day-card.is-rest { opacity:0.5 }
.duty-day-card.is-editing { min-height:100px }
.duty-day-name { font-size:12px;color:var(--text-tertiary);margin-bottom:6px;font-weight:500 }
.duty-day-name.today { color:var(--primary);font-weight:700 }
.duty-day-person { display:flex;align-items:center;justify-content:center;gap:4px;margin-bottom:4px;flex-direction:column }
.duty-day-real { font-size:12px;font-weight:600;color:var(--text-primary);margin-top:4px }
.duty-day-rest { font-size:13px;color:var(--text-tertiary);padding:20px 0 }
.duty-day-empty { font-size:13px;color:#ccc;padding:12px 0 }
.duty-day-status { margin-top:4px }
.duty-day-card .el-button { white-space:nowrap; touch-action:manipulation }
@media (max-width: 768px) {
  .duty-week-grid { grid-template-columns:repeat(4,1fr) }
  .duty-day-card { min-height:140px;padding:8px 6px }
  .duty-day-card .el-button{padding:5px 10px;font-size:11px;margin-top:6px;position:relative;z-index:1}
}
@media (max-width: 480px) {
  .duty-week-grid { grid-template-columns:repeat(2,1fr) }
  .duty-day-status{margin-bottom:2px}
}
/* Deadline Countdown Badge */
.deadline-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 10px; border-radius: 16px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  white-space: nowrap;
}
.deadline-overdue {
  background: #ef4444; color: #fff;
  font-size: 13px; padding: 4px 12px;
  animation: deadlinePulse 1s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(239,68,68,0.3);
}
.deadline-urgent {
  background: #fff7ed; color: #ea580c;
  font-size: 14px; padding: 4px 12px;
}
.deadline-soon {
  background: #fefce8; color: #ca8a04;
  font-size: 13px;
}
.deadline-ok {
  background: var(--gray-100); color: var(--gray-600);
  font-size: 12px; font-weight: 500;
}
.deadline-done {
  background: var(--success-light); color: var(--success);
  font-size: 12px; font-weight: 500;
}
@keyframes deadlinePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(1.02); }
}
/* Task list overdue row highlight */
.status-overdue + .task-row-title { color: #dc2626; font-weight: 600; }
/* Smart Banner */
.smart-banner{display:flex;align-items:center;gap:0;flex-wrap:wrap;padding:14px 24px;background:linear-gradient(135deg,#f0fdfa,#e6fffa 50%,#ccfbf1);border:1px solid rgba(13,148,136,.12);border-radius:var(--radius-lg);margin-bottom:20px;box-shadow:var(--shadow-sm)}
.smart-stat { display: flex; align-items: center; gap: 12px; }

.smart-stat-ring::after { content: ''; width: 34px; height: 34px; border-radius: 50%; background: #fff; position: absolute; }
.smart-stat{display:flex;flex-direction:column;align-items:center;padding:0 20px}
.smart-num { font-size: 1.5rem; font-weight: 700; color: var(--gray-900); line-height: 1.1; }
.smart-label { font-size: 11px; color: var(--gray-500); font-weight: 500; }
.smart-message { font-size: var(--text-sm); color: var(--warning); font-weight: 500; margin-left: auto; }
.smart-message.ok { color: var(--success); }
.smart-create-btn { margin-left: auto; border-radius: 10px !important; height: 40px; font-weight: 600; box-shadow: 0 2px 8px rgba(13,148,136,0.25) !important; }
.smart-banner-stat { text-align: center; min-width: 56px; }
.smart-banner-stat .smart-num { font-size: 24px; font-weight: 700; display: block; line-height: 1.1; color: var(--text-primary); }
.smart-banner-stat span:last-child { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.smart-banner-stat.overdue .smart-num { color: #dc2626; }
.smart-banner-stat.today .smart-num { color: #ea580c; }
.smart-banner-text { font-size: 14px; font-weight: 600; color: var(--primary); margin-left: auto; }
.smart-banner-text.ok { color: #059669; }
/* Weekly Report */
.report-summary { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-bottom: 16px; }
.report-card { background: var(--gray-50); border-radius: 10px; padding: 14px; }
.report-card h4 { font-size: 13px; margin-bottom: 8px; }
.report-card li { font-size: 13px; padding: 3px 0; color: var(--text-secondary); }
/* Global Search */
.search-result-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--gray-100); }
.search-result-item:hover { background: var(--primary-subtle); }

/* Global Search */
.global-search { position: relative; }
.search-drop { position: absolute; top: 100%; right: 0; width: 350px; max-height: 320px; overflow-y: auto; background: #fff; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,0.12); z-index: 500; margin-top: 4px; }

/* Week completion grid */
.week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:4px 0}
.week-card{border-radius:10px;padding:12px 6px 10px;text-align:center;transition:transform .15s,box-shadow .15s}
.week-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1)}
.week-card.today{box-shadow:0 0 0 2px var(--primary),0 4px 12px rgba(13,148,136,.25);position:relative}
.week-card.today::after{content:'';position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:var(--primary)}
.week-card-num{display:block;font-size:1.5rem;font-weight:800;line-height:1.2}
.week-card-label{display:block;font-size:11px;margin-top:4px;opacity:.85;font-weight:500}

.member-bar{display:flex;align-items:center;gap:10px;padding:6px 0}
.member-bar-name{font-size:13px;font-weight:500;width:70px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member-bar-track{flex:1;height:20px;background:var(--gray-100);border-radius:10px;overflow:hidden}
.member-bar-fill{height:100%;border-radius:10px;transition:width .4s ease;display:flex;align-items:center;padding-left:8px;font-size:11px;font-weight:700;color:#fff;min-width:30px}

/* Tomorrow Duty Banner */
.tomorrow-duty{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 20px;background:linear-gradient(135deg,#fefce8,#fef9c3);border:1.5px solid #fde047;border-radius:10px;margin-bottom:20px;animation:dutyPulse 2s ease-in-out infinite}
.tomorrow-duty-label{font-size:14px;font-weight:700;color:#a16207}
.tomorrow-duty-person{display:inline-flex;align-items:center;gap:6px;background:#fff;padding:4px 14px 4px 6px;border-radius:20px;font-size:14px;font-weight:600;color:#333;box-shadow:0 1px 3px rgba(0,0,0,0.06)}
.tomorrow-duty-hint{font-size:12px;color:#ca8a04;font-weight:500;animation:dutyPulse 2s ease-in-out infinite}
@keyframes dutyPulse{0%,100%{opacity:0.85}50%{opacity:1}}

/* ====== Small Phone <480px Polish ====== */
@media (max-width: 480px) {
  .el-dialog{--el-dialog-width:95vw!important;--el-dialog-margin-top:4vh!important;width:95vw!important;max-width:95vw!important}
  .el-dialog__header { padding: 10px 12px !important; }
  .el-dialog__body { padding: 8px 12px !important; }
  .el-table .cell { padding: 6px 4px; }
  .header-actions .el-button { font-size: 11px; padding: 6px 10px; }
  .task-row { padding: 8px 10px; border-radius: 8px; }
}

/* ========== 节日策划提醒卡片 ========== */
.holiday-card{background:linear-gradient(165deg,#fffdf7,#fffbeb 40%,#f0fdfa);border:1px solid rgba(245,158,11,.15);border-radius:var(--radius-lg);padding:20px 24px;margin-bottom:var(--space-4);box-shadow:var(--shadow-sm)}
.holiday-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: var(--border-light);
}
.holiday-card-title-row { display: flex; align-items: center; gap: 8px; }
.holiday-card-icon-title { font-size: 18px; line-height: 1; }
.holiday-card-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }

/* Holiday rows — clean table-style, matching site cards */
.holiday-table{display:flex;flex-direction:column}.holiday-head{display:flex;align-items:center;padding:6px 0 8px;border-bottom:1px solid rgba(245,158,11,.08);font-size:11px;font-weight:600;color:#a16207;text-transform:uppercase;letter-spacing:.05em}.holiday-col-name{flex:1;min-width:0;display:flex;align-items:center;gap:8px}.holiday-col-date{width:60px;text-align:center;flex-shrink:0}.holiday-col-countdown{width:72px;text-align:center;flex-shrink:0}.holiday-row{display:flex;align-items:center;padding:10px 0;border-bottom:1px solid rgba(245,158,11,.06);transition:background .15s;font-size:13px}.holiday-row:last-child{border-bottom:none}.holiday-row:hover{background:rgba(245,158,11,.04);margin:0 -8px;padding:10px 8px;border-radius:6px}.holiday-row .holiday-icon{font-size:18px;flex-shrink:0;width:22px;text-align:center}.holiday-countdown{font-size:12px;font-weight:600;color:var(--primary);background:var(--primary-subtle);padding:3px 10px;border-radius:10px;white-space:nowrap}
.holiday-row:not(:last-child) { border-bottom: 1px solid var(--gray-100); }
.holiday-row:hover { background: var(--primary-subtle); margin: 0 -8px; padding: 8px 8px; border-radius: 6px; border-bottom-color: transparent; }
.holiday-row:last-child:hover { border-bottom-color: transparent; }

.holiday-row .holiday-icon { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; }
.holiday-row .holiday-name { font-size: 13px; font-weight: 500; color: var(--text-primary); flex: 1; min-width: 0; }
.holiday-row .holiday-date { font-size: 12px; color: var(--text-tertiary); flex-shrink: 0; }
.holiday-countdown {
  font-size: 12px; font-weight: 600; color: var(--primary); background: var(--primary-subtle);
  padding: 3px 10px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; min-width: 42px; text-align: center;
}
.holiday-name {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.holiday-date {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: var(--font-medium);
}
.holiday-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
  min-width: 85px;
}
.holiday-countdown {
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  color: #d97706;
  line-height: 1;
  letter-spacing: -0.01em;
}
.holiday-countdown small {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--warning);
}
.holiday-bar {
  width: 100%;
  height: 4px;
  background: #fef3c7;
  border-radius: 2px;
  overflow: hidden;
}
.holiday-bar-inner {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, var(--warning));
  border-radius: 2px;
  transition: width 0.6s var(--ease-out-quart);
}
/* 今日节日高亮 */
.holiday-today {
  background: linear-gradient(135deg, var(--danger-light), #fff1f2) !important;
  border-color: #fca5a5 !important;
}
.holiday-today .holiday-icon { background: var(--danger-light); }
.holiday-today .holiday-countdown {
  color: var(--danger);
  animation: holidayPulse 1.2s ease-in-out infinite alternate;
}
.holiday-today .holiday-bar-inner {
  background: linear-gradient(90deg, #fbbf24, var(--danger)) !important;
  width: 100% !important;
}
@keyframes holidayPulse {
  from { opacity: 1; }
  to   { opacity: 0.7; }
}

/* ========== 在线状态悬浮窗 ========== */
.online-widget {
  position: fixed; bottom: 20px; right: 20px; z-index: 800;
  font-family: inherit;
}
.online-panel {
  width: 230px; background: #fff; border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  overflow: hidden; border: 1px solid var(--gray-200);
  animation: onlineSlideUp 0.25s var(--ease-out-quart);
}
@keyframes onlineSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.online-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: linear-gradient(135deg, var(--gray-50), #fff);
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  border-bottom: 1px solid var(--gray-100);
}
.online-panel-close {
  cursor: pointer; font-size: 16px; color: var(--text-tertiary);
  width: 24px; height: 24px; display: flex; align-items: center;
  justify-content: center; border-radius: 6px; transition: background .15s, color .15s, border-color .15s, opacity .15s;
}
.online-panel-close:hover { background: var(--gray-100); color: var(--text-primary); }
.online-panel-body {
  max-height: 340px; overflow-y: auto; padding: 6px 0;
}
.online-divider {
  padding: 6px 14px 2px; font-size: 11px; color: var(--text-tertiary);
  font-weight: 500; letter-spacing: 0.03em;
  border-top: 1px dashed var(--gray-200); margin-top: 4px;
}
.online-divider:first-child { border-top: none; margin-top: 0; }
.online-item {
  display: flex; align-items: center; padding: 6px 14px;
  font-size: 13px; transition: background 0.15s;
}
.online-item:hover { background: var(--gray-50); }
.online-name { flex: 1; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-ago { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; margin-left: 8px; }
.online-online .online-name { color: var(--primary); }
.online-online .online-ago { color: var(--success); }
.online-recent .online-name { color: var(--text-secondary); }
.online-bubble {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #14b8a6);
  box-shadow: 0 4px 16px rgba(15,118,110,0.35);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s, color .2s, border-color .2s, opacity .2s, transform .2s;
  animation: onlineBubbleIn 0.3s var(--ease-out-quart);
}
@keyframes onlineBubbleIn {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
.online-bubble:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(13,148,136,0.2); }
.online-bubble span {
  color: #fff; font-size: 17px; font-weight: 700; line-height: 1;
}
.online-collapsed .online-panel { display: none; }
@media (max-width: 768px) {
  .online-widget { bottom: 12px; right: 12px; }
  .online-panel { width: 210px; }
  .online-bubble { width: 42px; height: 42px; }
  .online-bubble span { font-size: 15px; }
}

/* ========== 我的工作页 ========== */
.mw-score-card { display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:6px 16px;padding:20px 24px;border-radius:12px;border:1px solid;margin-bottom:14px;align-items:center;transition:box-shadow 0.2s }
.mw-score-card:hover { box-shadow:0 2px 12px rgba(0,0,0,0.04) }
.mw-score-card.mw-grade- { background:#f8fafc;border-color:var(--gray-200) }
.mw-score-card.mw-grade-S { background:linear-gradient(135deg,#faf5ff,#f3e8ff);border-color:#d8b4fe }
.mw-score-card.mw-grade-A { background:linear-gradient(135deg,#eff6ff,#dbeafe);border-color:#93c5fd }
.mw-score-card.mw-grade-B { background:linear-gradient(135deg,#fffbeb,#fef3c7);border-color:#fcd34d }
.mw-score-card.mw-grade-C { background:linear-gradient(135deg,#fef2f2,#fee2e2);border-color:#fca5a5 }
.mw-score-card.mw-no-data { grid-template-columns:1fr;justify-items:center;color:var(--text-tertiary);font-size:13px }
.mw-score-num { grid-row:1/3;font-size:42px;font-weight:800;color:#0f172a;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-0.02em }
.mw-score-grade { font-size:28px;font-weight:800;padding:1px 12px;border-radius:6px;min-width:46px;text-align:center;line-height:1.3;letter-spacing:-0.01em;justify-self:start }
.mw-score-grade.grade-S { color:#7c3aed;background:rgba(124,58,237,0.1) }
.mw-score-grade.grade-A { color:#2563eb;background:rgba(37,99,235,0.1) }
.mw-score-grade.grade-B { color:#d97706;background:rgba(217,119,6,0.1) }
.mw-score-grade.grade-C { color:#dc2626;background:rgba(220,38,38,0.1) }
.mw-score-sub { grid-column:2;display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--text-tertiary) }
.mw-score-sub span { white-space:nowrap;position:relative }
.mw-score-sub span + span::before { content:'·';position:absolute;left:-9px;top:0;color:var(--gray-300) }

/* Bar rows — 固定网格：label(68px) | bar(flex) | val(42px) | arr(16px) */
/* Bar rows — Grid 固定四列: label | bar | val | arr */
.mw-bar-list { padding:0 }
.mw-bar-row {
  display:grid;
  grid-template-columns:72px 1fr 56px 20px;
  column-gap:8px;
  align-items:center;
  padding:7px 10px;
  cursor:pointer;
  border-radius:6px;
  transition:background 0.12s
}
.mw-bar-row:hover { background:rgba(15,118,110,0.04) }
.mw-bar-label { font-size:12px;font-weight:500;color:var(--text-secondary);white-space:nowrap }
.mw-bar-wrap { height:6px;background:var(--gray-100);border-radius:3px;overflow:hidden }
.mw-bar { height:100%;border-radius:3px;transition:width 0.6s cubic-bezier(0.34,1.56,0.64,1);min-width:2px }
.mw-bar-val { text-align:right;font-size:12px;font-weight:600;color:#0f172a;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap }
.mw-bar-val.muted { color:#d97706 }
.mw-bar-arr { text-align:center;color:var(--text-tertiary);font-size:10px;transition:transform 0.2s;opacity:0.5;line-height:1 }
.mw-bar-arr.open { transform:rotate(180deg);opacity:1 }
/* 扣分明细 — 对齐 bar 列起点 = row-padding(10px) + label(72px) + gap(8px) = 90px */
.mw-bd-detail { margin:0 0 4px;padding:6px 10px 6px 90px;background:var(--gray-50);font-size:12px;border-bottom:1px solid var(--gray-100) }
.mw-bd-detail > :first-child { margin-top:0 }
.mw-bd-title { font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-tertiary);padding:2px 0 }
.mw-bd-item { padding:2px 0;color:var(--text-secondary);display:flex;justify-content:space-between;gap:8px;font-size:12px }
.mw-bd-ded { color:var(--danger);font-weight:600;font-size:11px;flex-shrink:0 }

/* Tabs */
.mw-tab { padding:5px 14px;border-radius:6px 6px 0 0;cursor:pointer;font-size:12px;font-weight:500;color:var(--text-tertiary);background:transparent;transition: background .15s, color .15s, border-color .15s, opacity .15s;border-bottom:2px solid transparent;display:inline-block }
.mw-tab.active { color:var(--primary);background:var(--gray-50);font-weight:600;border-bottom-color:var(--primary) }
.mw-tab:hover:not(.active) { color:var(--text-primary);background:rgba(15,118,110,0.04) }
.mw-tab + .mw-tab { margin-left:2px }

@media (max-width: 768px) {
  .mw-score-card { padding:14px 16px;gap:4px 12px }
  .mw-score-num { font-size:32px }
  .mw-score-grade { font-size:22px;padding:1px 8px;min-width:38px }
  .mw-score-sub { gap:8px;font-size:11px }
  .mw-score-sub span + span::before { left:-6px }
  .mw-bar-row { grid-template-columns:56px 1fr 44px 18px;column-gap:6px;padding:5px 6px }
  .mw-bar-label { font-size:11px }
  .mw-bar-val { font-size:11px }
  .mw-bd-detail { padding-left:calc(6px + 56px + 6px) }
  .mw-tab { padding:4px 10px;font-size:11px }
}

/* ===== 可访问性 & 全局修复 ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.nav-item:focus-visible, .menu-toggle:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.g-row:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.cal-task:focus-visible { outline: 1px solid var(--primary); outline-offset: 0; }
.z-sidebar { z-index: 100; }
.z-overlay { z-index: 200; }
.z-dropdown { z-index: 500; }
.z-widget { z-index: 800; }
.z-modal { z-index: 1000; }

/* Keyboard & ARIA helpers */
.g-row, .notify-item, .holiday-item, .cal-task { cursor: pointer }
@media (hover: none) and (pointer: coarse) {
  .cal-task { min-height: 22px; display:flex;align-items:center }
  .preset-btn { min-height: 40px }
}

/* ====== 全站统一过渡与微交互 ====== */
.card, .stat-card, .g-row, .holiday-row, .td-action button,
.filter-bar .el-button, .log-table tr, .cal-task {
  transition: background .2s, color .2s, border-color .2s, opacity .2s, transform .2s cubic-bezier(0.4,0,0.2,1);
}
a, .nav-item, .menu-toggle, .tag-sm {
  transition: background .15s, color .15s, border-color .15s, opacity .15s cubic-bezier(0.4,0,0.2,1);
}
/* 禁用 Element Plus 默认的冗长过渡 */
.el-button { transition: background .15s, color .15s, border-color .15s, opacity .15s cubic-bezier(0.4,0,0.2,1) !important; }
.el-dialog { transition: background .25s, border-color .25s, opacity .25s cubic-bezier(0.4,0,0.2,1) !important; }

/* Dashboard Notifications */
.notify-dash.card { margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); }
.notify-dash .card-header { padding-bottom: var(--space-2); margin-bottom: var(--space-2); font-size: var(--text-sm); }
.notify-dash-badge { background: var(--danger); color: #fff; padding: 1px 8px; border-radius: 8px; font-size: 10px; font-weight: 600; }
.notify-dash-list { display: flex; flex-direction: column; }
.notify-dash-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(13,148,136,0.06); cursor: pointer; font-size: 12px; transition: background .12s; }
.notify-dash-item:last-child { border-bottom: none; }
.notify-dash-item:hover { background: var(--primary-subtle) }
.notify-dash-item.unread { font-weight: 600; background: linear-gradient(90deg, rgba(13,148,136,0.04), transparent); margin: 0 -4px; padding: 6px 4px; border-radius: 4px; }
.notify-dash-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--primary-light); }
.notify-dash-dot.read { background: var(--gray-300); }
.notify-dash-time { font-size: 10px; color: var(--text-tertiary); margin-left: auto; flex-shrink: 0; }

/* 统一空状态视觉 */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-8); color: var(--text-tertiary); }
.empty-state p { font-size: var(--text-sm); margin: 0; }

/* 统一加载状态 */
.loading-state { display: flex; justify-content: center; align-items: center; padding: var(--space-8); color: var(--text-tertiary); }
.loading-state .el-loading-spinner .circular circle { stroke: var(--primary); }

/* Overview - all tasks card */
.overview-all-tasks .g-row { cursor: pointer; }
.overview-all-tasks .g-5 { grid-template-columns: 1.4fr 100px 140px 80px 50px; gap: 8px; }
.overview-all-tasks .g-row.overview-overdue { background: #fef2f2; }
.overview-all-tasks .g-row.overview-overdue:hover { background: #fee2e2; }
.overview-total-tag { font-size: 11px; background: var(--primary-subtle); color: var(--primary); padding: 2px 10px; border-radius: 10px; font-weight: 600; }
@media (max-width: 768px){.overview-all-tasks .g-5{grid-template-columns:1fr}}

/* Filter chips */
.filter-chips { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 16px; font-size: 12px; font-weight: 500; background: var(--gray-100); color: var(--text-secondary); cursor: pointer; transition: background .15s, color .15s; border: 1px solid transparent; min-width: 44px; justify-content: center; user-select: none; }
.chip:hover { background: var(--gray-200); color: var(--text-primary); }
.chip.active { background: var(--primary-subtle); color: var(--primary); border-color: var(--primary-light); font-weight: 600; }
.chip.chip-danger.active { background: var(--danger-light); color: var(--danger); border-color: var(--danger); }
.chip.chip-warn.active { background: var(--warning-light); color: var(--warning); }
.chip.chip-done.active { background: var(--success-light); color: var(--success); }

/* Overview filter bar */
.overview-filter-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.overview-filter-bar .filter-chips { margin-bottom: 0; }

/* Login */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#090b13 0%,#0e1a2e 40%,#13294b 70%,#1e3a5f 100%);position:relative;overflow:hidden}
.login-page::before{content:'';position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(13,148,136,.1),transparent 70%);top:-250px;right:-150px}
.login-page::after{content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(14,165,233,.08),transparent 70%);bottom:-200px;left:-100px}
.login-container{display:flex;width:820px;max-width:95vw;min-height:520px;border-radius:20px;overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,.35),0 0 0 1px rgba(45,212,191,.08);position:relative;z-index:1;background:var(--bg-surface)}
.login-brand{flex:0 0 380px;background:linear-gradient(160deg,#1e3a5f,#0d7666,#0d9488);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-8);color:#fff;text-align:center;position:relative;overflow:hidden}
.login-brand::before{content:'';position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(45,212,191,.06);top:-80px;right:-80px}
.login-brand .brand-icon{font-size:48px;margin-bottom:var(--space-3)}
.login-brand .brand-title{font-size:28px;font-weight:700;margin-bottom:8px}
.login-brand .brand-desc{opacity:.85;line-height:1.8;text-align:center;font-size:14px}
.login-form-panel{flex:1;display:flex;flex-direction:column;justify-content:center;padding:48px 44px;background:var(--bg-surface)}
.login-form-panel .form-header{font-size:24px;font-weight:700;margin-bottom:6px;color:#1a202c}
.login-form-panel .sub{font-size:14px;color:#718096;margin-bottom:28px}
.login-form{padding:0}
.login-btn{width:100%}
.login-btn .el-button--primary{background:linear-gradient(135deg,#0d9488,var(--primary))!important;border:none!important;border-radius:10px!important;height:44px;font-size:15px;font-weight:600}
.login-btn .el-button--primary:hover{opacity:.9;transform:translateY(-1px)}
.login-form .el-input__wrapper{background:#f8f9fc;border:1px solid #e5e7eb;border-radius:10px;box-shadow:none!important;transition:all .2s}
.login-form .el-input__wrapper:hover{border-color:#5eead4}
.login-form .el-input.is-focus .el-input__wrapper{border-color:#0d9488;box-shadow:0 0 0 3px rgba(13,148,136,.12)!important;background:#fff}
.login-form .el-input__inner{height:44px}
.login-form .el-form-item{margin-bottom:18px}
.login-form .el-button--primary{background:linear-gradient(135deg,#0d9488,#0d7666)!important;border:none!important;border-radius:10px!important;height:46px;font-size:15px;font-weight:600;letter-spacing:2px}
.login-form .el-button--primary:hover{opacity:.9;transform:translateY(-1px)}
@media (max-width: 920px){.login-container{flex-direction:column;min-height:auto}.login-brand{width:100%;flex:0 0 auto;padding:32px 24px}.login-form-panel{padding:32px 24px}}
@media (max-width: 768px){.login-container{max-width:100vw}.login-brand .brand-icon{font-size:36px}}
 .smart-divider{width:1px;height:36px;background:rgba(99,102,241,.15);flex-shrink:0} .smart-label{margin-top:2px}
/* CLS Fix */
.smart-banner{min-height:68px}
.stats-grid{min-height:80px;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3)}
.stat-card{min-height:76px}
.app-content{min-height:60vh}
.dash-mid-row{min-height:200px}
.task-list{min-height:100px}
.online-widget{position:fixed!important;bottom:20px;right:20px;z-index:1000;width:auto!important;height:auto!important}
.online-panel{position:fixed!important;bottom:70px;right:20px;z-index:1000;width:280px;max-height:400px}
.card{contain:layout style}

/* Filter chips */
.filter-chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;padding:5px 14px;border-radius:16px;font-size:12px;font-weight:500;background:var(--gray-100);color:var(--text-secondary);cursor:pointer;transition:background .15s,color .15s;border:1px solid transparent;min-width:44px;justify-content:center;user-select:none}
.chip:hover{background:var(--gray-200);color:var(--text-primary)}
.chip.active{background:var(--primary-subtle);color:var(--primary);border-color:var(--primary-light);font-weight:600}
.chip.chip-danger.active{background:var(--danger-light);color:var(--danger);border-color:var(--danger)}
.chip.chip-warn.active{background:var(--warning-light);color:var(--warning)}
.chip.chip-done.active{background:var(--success-light);color:var(--success)}
.chip.chip-cancel.active{background:var(--gray-200);color:var(--gray-700);border-color:var(--gray-400)}

.report-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.report-card{background:var(--bg-surface);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:16px;transition:box-shadow .15s}
.report-card:hover{box-shadow:var(--shadow-sm)}
.report-card.rc-danger{border-color:var(--danger-light);background:linear-gradient(135deg,#fff,#fef2f2)}
.report-card-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.rc-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px}
.rc-done{background:var(--success-light);color:var(--success)}
.rc-overdue{background:var(--danger-light)}
.rc-new{background:var(--primary-subtle);color:var(--primary)}
.rc-progress{background:var(--info-light);color:var(--info)}
.rc-count{font-size:18px;font-weight:700;color:var(--gray-900)}
.rc-count-danger{color:var(--danger)}
.rc-title{font-size:13px;font-weight:600;color:var(--text-secondary);margin:0 0 10px}
.rc-list{display:flex;flex-direction:column;max-height:240px;overflow-y:auto}
.rc-item{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--gray-100);font-size:12px}
.rc-item:last-child{border-bottom:none}
.rc-item-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:8px;color:var(--text-primary)}
.rc-item-sub{flex-shrink:0;color:var(--text-tertiary);font-size:11px}
.rc-empty{text-align:center;padding:12px;color:var(--text-tertiary);font-size:12px}
.report-actions{display:flex;align-items:center;gap:12px}
@media (max-width: 768px){.report-grid{grid-template-columns:1fr}}

/* ===== 状态标签胶囊式 ===== */
.status-tag{display:inline-block;padding:2px 12px;border-radius:20px;font-size:12px;font-weight:500;line-height:1.6}
.status-in_progress{background:#e8f4f8;color:#0d9488;border-left:3px solid #0d9488}
.status-pending_review{background:#fef3e2;color:#d97706;border-left:3px solid #d97706}
.status-completed{background:#e6f7ed;color:#059669;border-left:3px solid #059669}
.status-overdue{background:#fde8e8;color:#dc2626;border-left:3px solid #dc2626}
.status-cancelled{background:#f0f2f5;color:#8ba0b8;border-left:3px solid #8ba0b8}
.status-rejected{background:#fde8e8;color:#b91c1c;border-left:3px solid #b91c1c}

/* ===== 进度条渐变色 ===== */
.el-progress-bar__inner{background:var(--grad-progress-teal)!important}

/* ===== 登录页深蓝渐变 ===== */
.login-page{background:linear-gradient(135deg,#090b13 0%,#0e1a2e 40%,#13294b 70%,#1e3a5f 100%)!important;min-height:100vh;display:flex;align-items:center;justify-content:center}
.login-card{background:rgba(255,255,255,0.1)!important;backdrop-filter:blur(20px)!important;border:1px solid rgba(255,255,255,0.15)!important;border-radius:16px!important;padding:40px!important;min-width:380px!important;box-shadow:0 20px 60px rgba(0,0,0,0.3)!important}
.login-card input{background:rgba(255,255,255,0.08)!important;border:1px solid rgba(255,255,255,0.2)!important;color:#fff!important}
.login-card input::placeholder{color:rgba(255,255,255,0.4)!important}
.login-card .el-form-item__label{color:rgba(255,255,255,0.7)!important}
@media (max-width: 480px){.login-card{min-width:auto!important;width:90%!important;padding:24px!important}}

/* ===== 驾驶舱（深色大屏） ===== */
.bigscreen{min-height:100vh;background:#060b16;color:#c8d8e8;font-family:inherit;overflow-x:hidden;position:relative}
.bigscreen::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(13,148,136,0.12),transparent),radial-gradient(ellipse 60% 40% at 80% 100%,rgba(139,92,246,0.08),transparent),radial-gradient(ellipse 60% 40% at 20% 100%,rgba(56,189,248,0.08),transparent);pointer-events:none;z-index:0}
.bigscreen::after{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,0.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.015) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:0}
.bigscreen>*{position:relative;z-index:1}
.bs-header{padding:48px 32px 24px;text-align:center}
.bs-logo{font-size:clamp(36px,5vw,56px);font-weight:900;margin:0 0 28px 0;line-height:1.15;letter-spacing:10px;
  background:linear-gradient(90deg,#e8edf2 0%,#5eead4 30%,#38bdf8 60%,#a78bfa 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 20px rgba(13,148,136,0.4)) drop-shadow(0 0 40px rgba(56,189,248,0.2));
  animation:bsShimmer 6s ease-in-out infinite}
@keyframes bsShimmer{0%,100%{filter:drop-shadow(0 0 20px rgba(13,148,136,0.4)) drop-shadow(0 0 40px rgba(56,189,248,0.2))}50%{filter:drop-shadow(0 0 30px rgba(13,148,136,0.6)) drop-shadow(0 0 60px rgba(139,92,246,0.3))}}

/* 进度卡片 */
.bs-meta-row{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.bs-prog-card{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,rgba(255,255,255,0.09),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.12);border-radius:16px;padding:14px 22px;flex:1 1 250px;max-width:420px;min-width:0;box-shadow:0 4px 20px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.08);backdrop-filter:blur(12px);transition:transform .3s,box-shadow .3s,border-color .3s}
.bs-prog-card:hover{transform:translateY(-3px);box-shadow:0 12px 48px rgba(0,0,0,0.4),0 0 24px rgba(13,148,136,0.15),inset 0 1px 0 rgba(255,255,255,0.12);border-color:rgba(94,234,212,0.3)}
.bs-prog-icon{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;opacity:0.9}
.bs-prog-body{flex:1;min-width:0}
.bs-prog-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.bs-prog-label{font-size:14px;color:#8ba0b8;font-weight:500;letter-spacing:.3px}
.bs-prog-pct{font-size:24px;font-weight:800;color:#e8edf2;font-variant-numeric:tabular-nums;line-height:1;text-shadow:0 0 16px rgba(255,255,255,0.1)}
.bs-prog-bar{height:6px;background:rgba(255,255,255,0.06);border-radius:3px;overflow:hidden;margin-bottom:8px}
.bs-prog-fill{display:block;height:100%;border-radius:3px;transition:width .4s ease;box-shadow:0 0 8px currentColor}
.bs-fill-teal{background:linear-gradient(90deg,#0d9488,#14b8a6);color:#14b8a6}
.bs-fill-purple{background:linear-gradient(90deg,#8b5cf6,#a78bfa);color:#a78bfa}
.bs-prog-sub{font-size:14px;color:#a0b8d0;font-variant-numeric:tabular-nums;font-weight:500;line-height:1.4}

.bs-dot-pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:#10b981;animation:bsPulse 2s infinite;margin-right:6px}
@keyframes bsPulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0.6)}50%{box-shadow:0 0 0 6px rgba(16,185,129,0)}}
.bs-body{padding:18px 28px 12px}
.bs-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:18px}
.bs-stat-card{background:linear-gradient(135deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:20px;display:flex;align-items:center;gap:14px;backdrop-filter:blur(12px);transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden}
.bs-stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(94,234,212,0.5),transparent);opacity:0;transition:opacity .3s}
.bs-stat-card:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(0,0,0,0.3),0 0 16px rgba(94,234,212,0.1)}
.bs-stat-card:hover::before{opacity:1}
.bs-stat-icon{font-size:28px;flex-shrink:0}
.bs-stat-info{flex:1;min-width:0}
.bs-stat-num{font-size:32px;font-weight:800;color:#fff;text-shadow:0 0 16px rgba(255,255,255,0.08)}
.bs-stat-label{font-size:12px;color:#8ba0b8;margin-top:2px;letter-spacing:.5px}
.bs-stat-change{font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;flex-shrink:0}
.bs-stat-change.up{color:#34d399;background:rgba(52,211,153,0.15)}
.bs-stat-change.down{color:#f87171;background:rgba(248,113,113,0.15)}
.bs-charts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px}
.bs-chart-box{background:linear-gradient(135deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:16px;backdrop-filter:blur(12px);transition:border-color .3s}
.bs-chart-box:hover{border-color:rgba(94,234,212,0.15)}
.bs-chart-wide{grid-column:span 1}
.bs-chart-narrow{grid-column:span 1}
.bs-chart-title{font-size:13px;font-weight:600;color:#a0b8d0;margin-bottom:10px;letter-spacing:.5px}
.bs-chart-wrap{width:100%;height:240px}
.bs-overdue-list{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto}
.bs-overdue-item{display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(255,255,255,0.04);border-radius:8px;font-size:13px;transition:background .15s;border:1px solid transparent}
.bs-overdue-item:hover{background:rgba(255,255,255,0.08)}
.bs-overdue-item.bs-pulse{border:1px solid rgba(255,107,107,0.4);animation:bsPulseBorder 2s infinite}
@keyframes bsPulseBorder{0%,100%{border-color:rgba(255,107,107,0.4);box-shadow:0 0 8px rgba(255,107,107,0.1)}50%{border-color:rgba(255,107,107,0.8);box-shadow:0 0 16px rgba(255,107,107,0.25)}}
.bs-od-badge{background:linear-gradient(135deg,#dc2626,#ef4444);color:#fff;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700;flex-shrink:0;box-shadow:0 0 8px rgba(220,38,38,0.3)}
.bs-od-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e8edf2}
.bs-od-owner{color:#8ba0b8;font-size:12px;flex-shrink:0}
.bs-od-btn{flex-shrink:0}
.bs-empty{text-align:center;padding:30px;color:#6a8aa8;font-size:13px}
.bs-statusbar{text-align:center;padding:10px;font-size:12px;color:#4a5a72;border-top:1px solid rgba(255,255,255,0.06);background:rgba(6,11,22,0.6);display:flex;align-items:center;justify-content:center;gap:8px;backdrop-filter:blur(10px)}
.bs-status-dot{width:7px;height:7px;border-radius:50%;background:#10b981;flex-shrink:0;box-shadow:0 0 8px rgba(16,185,129,0.5);animation:bsPulse 2s infinite}
@media (max-width: 1400px){.bs-charts{grid-template-columns:1fr}.bs-chart-wide,.bs-chart-narrow{grid-column:span 1}.bs-stats{grid-template-columns:repeat(3,1fr)}}
@media (max-width: 768px){.bs-stats{grid-template-columns:repeat(2,1fr);gap:8px}.bs-stat-card{padding:12px}.bs-stat-num{font-size:22px}.bs-body{padding:12px 12px 8px}.bs-header{padding:20px 14px}.bs-logo{font-size:20px;letter-spacing:4px}.bs-chart-wrap{height:180px}}
/* 审核中心移动端 */
@media (max-width: 768px){.review-page .el-button{min-height:40px;white-space:nowrap}.review-page .card>div{flex-direction:column!important;align-items:stretch!important;gap:8px}.review-page .card>div>div:last-child{display:flex;justify-content:flex-end;gap:8px}}
/* 宣传看板移动端图表高度 */
@media (max-width: 768px){#news-trend-chart{height:160px!important}#news-pie-chart{height:200px!important}}
@media (min-width: 769px){#news-pie-chart{height:260px!important}}
/* 任务列表平板 */
@media (max-width: 1024px){.g-name{font-size:13px}}
/* 任务列表移动端标题不截断 */
.task-row-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width: 768px){.task-row-title{white-space:normal!important;word-break:break-word;font-size:14px}}
/* 任务详情审核区移动端 */
@media (max-width: 768px){.review-banner>div{flex-direction:column;align-items:stretch!important}.review-banner .el-button{width:100%}}
/* 个人设置移动端 */
@media (max-width: 768px){.settings-page .el-form-item__label{float:none!important;display:block!important;width:100%!important;text-align:left!important;padding-bottom:4px!important}.settings-page .el-form-item__content{margin-left:0!important}.settings-page .el-button{min-height:44px}}
/* 全局按钮移动端规范 */
@media (max-width: 768px){.el-button{min-height:44px;padding:8px 16px;font-size:14px}.el-button--small{min-height:36px;padding:5px 12px;font-size:13px}.page-header .el-button{min-height:44px}.header-actions .el-button{min-height:40px}}
/* 全局按钮统一的盒大小 */
.el-button{box-sizing:border-box}
/* 我的工作移动端 */
@media (max-width: 768px){.my-work .stat-card{min-height:70px;padding:12px 10px}.my-work .stat-num{font-size:1.3rem}}

/* 驾驶舱全屏模式：隐藏顶栏/横幅，保留侧栏 */
.bigscreen-active .app-topbar{display:none!important}
.bigscreen-active .ok-banner{display:none!important}
.bigscreen-active .overdue-alert{display:none!important}
.bigscreen-active .app-content{margin:0!important;padding:0!important;max-width:100%!important}

/* ===== 移动端修复 ===== */
@media (max-width: 768px){
  .el-dialog{max-width:90vw!important;margin:10vh auto!important;max-height:80vh!important;overflow-y:auto!important}
  .el-dialog__body{max-height:60vh!important;overflow-y:auto!important}
  .el-table,.el-table__body-wrapper{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .filter-bar .filter-row{flex-direction:column;gap:8px}
  .filter-bar .el-input,.filter-bar .el-select,.filter-bar .el-date-picker{width:100%!important}
}
@media (max-width: 480px){
  .el-col-xs-12{max-width:100%!important;flex:0 0 100%!important}
  .g-prog{display:none!important}
}
body{padding-bottom:env(safe-area-inset-bottom,0px)}
.safe-bottom{padding-bottom:env(safe-area-inset-bottom,12px)}

/* ===== 移动端适配 ===== */
.mobile-tabbar{display:none}
@media (max-width: 768px){
  .app-sidebar{display:none!important}
  .mobile-tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;height:56px;background:var(--bg-sidebar);z-index:999;box-shadow:0 -2px 12px rgba(0,0,0,0.15)}
  .mobile-tabbar-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--sidebar-text);font-size:11px;gap:2px;min-height:44px;cursor:pointer;text-decoration:none}
  .mobile-tabbar-item.active{color:var(--sidebar-nav-active-border)}
  .mobile-tabbar-item svg{width:20px;height:20px}
  .app-content{padding-bottom:56px!important;margin:0!important;max-width:100%!important}
  .app-topbar{padding:8px 12px}
  .app-topbar h1{font-size:16px}
  .page-header h2{font-size:18px}
  .el-dialog{margin:0!important;width:100%!important;border-radius:16px 16px 0 0!important;position:fixed;bottom:0!important;top:auto!important}
  .el-dialog__body{max-height:60vh;overflow-y:auto}
  .el-dialog__header{border-radius:16px 16px 0 0}
  .stat-card{min-height:60px;padding:12px 14px}
  .stat-num{font-size:1.5rem}
  .card{padding:14px;border-radius:12px}
  .el-table{font-size:13px}
  .el-form-item__label{font-size:13px}
  .filter-bar{padding:8px}
  .el-button--small{min-height:36px}
  .el-input__inner{min-height:40px}
  .calendar-grid{grid-template-columns:repeat(3,1fr)!important;font-size:10px}
  .cal-day{min-height:32px;padding:1px}
  .overview-filter-bar .el-select__dropdown,.overview-filter-bar .el-select-dropdown{max-width:90vw!important}
  .el-dialog__body .el-form-item{margin-bottom:14px}
  .logs-page .filter-bar .el-col:last-child>button{margin-top:4px}
}
/* 部门绩效 */
.perf-period-bar{display:flex;gap:6px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.perf-period-tag{padding:5px 16px;border-radius:8px;font-size:13px;cursor:pointer;background:var(--gray-100);color:var(--text-secondary);transition:all .15s}
.perf-period-tag.active{background:var(--primary);color:#fff}
.perf-period-tag:hover:not(.active){background:var(--gray-200)}
.perf-dim-card .card-header{padding:10px 16px!important;font-size:14px;font-weight:600}
.perf-chart{width:100%;height:180px;min-height:140px}
.perf-rules .el-collapse-item__header{font-size:14px;font-weight:500;padding:10px 0}
.perf-rule-text{font-size:13px;color:#475569;line-height:1.8;padding:4px 0}
.perf-rule-text p{margin-bottom:6px}
/* 考勤 */
.att-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.att-stat{flex:1;min-width:80px;background:#fff;border-radius:10px;padding:12px 10px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.att-stat-num{font-size:22px;font-weight:700;color:#1e293b}
.att-stat-label{font-size:11px;color:#64748b;margin-top:2px}
.att-alert{background:#fef3c7!important;border:1px solid #fcd34d!important;padding:10px 16px!important;display:flex;align-items:center;gap:10px;font-size:13px;color:#92400e}
.att-alert a{font-weight:600}
.att-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:12px;color:#94a3b8;margin-bottom:6px;padding:0 4px}
.att-weekdays .weekend{color:#f97316}
.att-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.att-grid-new{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.att-cell-new{height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;transition:all .15s;cursor:default;background:#f8fafc;border:1px solid transparent}
.att-cell-new.att-dimmed{background:transparent;color:#cbd5e1}
.att-cell-new.att-clickable{cursor:pointer}
.att-cell-new.att-clickable:hover{transform:scale(1.06);box-shadow:0 3px 10px rgba(0,0,0,.1);z-index:1}
.att-cell-new.att-today{box-shadow:inset 0 0 0 2px #1e3a5f}
.att-day-new{font-size:12px;font-weight:600;line-height:1}
.att-icon-new{font-size:10px;line-height:1;margin-top:1px}
.att-cell{min-height:38px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;font-size:13px;position:relative;transition:background .15s}
.att-cell.today{box-shadow:inset 0 0 0 2px #1e3a5f}
.att-cell.other{color:#d0d5dd}
.att-cell.clickable{cursor:pointer}
.att-cell.clickable:hover{background:#f1f5f9}
.att-day{font-weight:500}
.att-dot{width:6px;height:6px;border-radius:50%;margin-top:2px}
.att-label{font-size:10px;line-height:1;margin-top:1px}
.att-leg-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0;vertical-align:middle}
.att-pending-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#fffbeb;border-radius:8px;margin-bottom:6px;font-size:13px}
.att-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.att-admin-table{border-collapse:collapse;width:100%;font-size:12px}
.att-admin-table th{position:sticky;top:0;background:#f8fafc;padding:8px 2px;border-bottom:2px solid #e2e8f0;z-index:1}
.att-admin-table td{border-bottom:1px solid #f1f5f9}
.att-th-name{min-width:60px;text-align:left;padding-left:8px!important;font-weight:600;color:#475569;position:sticky;left:0;z-index:3;background:#f8fafc}
.att-th-day{width:36px;text-align:center;font-size:10px;color:#94a3b8;font-weight:500}
.att-th-stat{min-width:90px;text-align:left;padding-left:8px!important;font-size:11px;color:#64748b}
.att-td-name{padding:8px 8px!important;font-weight:500;color:#1e293b;white-space:nowrap;position:sticky;left:0;z-index:2;background:#fff}
.att-td-day{text-align:center;padding:3px 1px;cursor:pointer}
.att-td-day:hover{background:#f1f5f9}
.att-td-stat{font-size:10px;color:#94a3b8;white-space:nowrap;padding:4px 8px!important}
.att-circle{display:inline-block;width:26px;height:26px;line-height:26px;border-radius:50%;font-size:11px;color:#fff;text-align:center;font-weight:600;transition:transform .12s}
.att-circle:hover{transform:scale(1.15)}
.att-circle-half{display:inline-block;width:13px;height:13px;line-height:13px;font-size:7px;color:#fff;text-align:center;font-weight:700;border-radius:50%}
.att-circle-half.am{margin-right:0;border-radius:50% 50% 0 0}
.att-circle-half.pm{margin-left:0;border-radius:0 0 50% 50%}
.att-half-tag{position:absolute;top:2px;right:3px;font-size:8px;background:var(--primary);color:#fff;border-radius:3px;padding:0 2px;line-height:1.3;font-weight:600;opacity:.85}
/* 半天拆分 — 铺满整格 */
.att-split-cell{padding:0!important;justify-content:stretch!important;align-items:stretch!important;background:transparent!important;border:none!important;border-radius:8px;overflow:hidden}
.att-split-cell.att-today{border:2px solid var(--primary)!important}
.att-half-row{flex:1;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
  text-shadow:0 0 3px rgba(0,0,0,.2);
  border-left:3px solid rgba(0,0,0,.12);border-right:3px solid rgba(0,0,0,.12)}
.att-half-row:first-child{border-top:3px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(255,255,255,.3)}
.att-half-row:last-child{border-bottom:3px solid rgba(0,0,0,.1);border-top:1px solid rgba(255,255,255,.3)}

/* === 管理员日历格（color blocks）=== */
.att-block{display:flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;border-radius:6px;padding:2px 4px;cursor:pointer;transition:transform .12s;font-size:11px;font-weight:600}
.att-block:hover{transform:scale(1.08);z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.att-block.am{border-radius:6px 6px 0 0;min-height:24px;font-size:10px}
.att-block.pm{border-radius:0 0 6px 6px;min-height:24px;font-size:10px}
.att-td-day{padding:1px 2px!important;text-align:center;vertical-align:middle}
.th-weekend{background:#f1f5f9!important;color:#94a3b8!important}
.att-th-day{min-width:44px;text-align:center;padding:4px 2px!important;font-weight:600;color:#475569;font-size:11px}

/* === 员工端按钮层级 === */
.att-page .el-button--success{font-weight:700;box-shadow:0 2px 6px rgba(16,185,129,.25)}
.att-page .el-button--warning{font-weight:600}
.att-page .el-button--default{font-weight:500}
.att-row:nth-child(even){background:#fafbfc}
.att-review-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #f0f0f0;font-size:13px;flex-wrap:wrap}
.att-review-item:last-child{border-bottom:none}
@media (max-width: 768px){.att-stat{min-width:60px;padding:8px 6px}.att-stat-num{font-size:18px}.att-cell{font-size:11px;min-height:32px}}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-8);color:var(--text-tertiary);text-align:center;min-height:120px}.empty-state p{font-size:var(--text-sm);margin-top:var(--space-2)}.empty-state-icon{font-size:36px;opacity:.15;margin-bottom:var(--space-2)}
.weekly-required .el-textarea__inner{border-color:#ef4444!important;box-shadow:0 0 0 2px rgba(239,68,68,.15)}

/* ===== P3: avatar 尺寸规范 V-07 ===== */
.avatar-xs{width:22px;height:22px;font-size:10px}
.avatar-sm{width:30px;height:30px;font-size:13px}
.avatar-md{width:40px;height:40px;font-size:16px}
.avatar-lg{width:56px;height:56px;font-size:22px}

/* ===== P3: 统一样式-可点击卡片 I-14 ===== */
.stat-card{cursor:pointer;transition:transform .15s,box-shadow .15s}
.stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.08)}

/* ===== P3: 表单label对齐统一 U-07 ===== */
.el-form-item__label{text-align:left!important}
@media (max-width: 768px){.el-form-item__label{padding-bottom:4px!important}.el-form-item__content{margin-left:0!important}}

/* ===== P3: 移动端补全 M-03 ===== */
@media (max-width: 768px){
  /* accounts/calendar/dept-performance 移动端 */
  .accounts-page .el-table,.calendar-page .fc,.dept-perf .perf-chart{overflow-x:auto}
  .dept-perf .el-row .el-col{width:100%!important;flex:0 0 100%!important;max-width:100%!important}
  .calendar-page .cal-day{min-height:28px;font-size:9px}
  .accounts-page .el-dialog{width:95vw!important}
  .perf-chart{height:180px!important}
  .dept-perf .page-header{flex-wrap:wrap;gap:8px}
}

/* ===== P3: 登录页移动端适配 M-05 ===== */
@media (max-width: 480px){
  .login-container{flex-direction:column;min-height:100vh}
  .login-brand{width:100%!important;flex:0 0 auto!important;padding:24px 16px!important;min-height:140px}
  .login-brand h1{font-size:20px!important}
  .login-form-panel{width:100%!important;padding:24px 16px!important}
  .login-card{width:100%!important;min-width:auto!important;padding:20px!important}
}

/* ===== P3: 骨架屏占位 M-04(简化版) ===== */
.skeleton{background:linear-gradient(90deg,var(--gray-100) 25%,var(--gray-50) 50%,var(--gray-100) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite;border-radius:var(--radius-sm)}
.skeleton-text{height:14px;margin-bottom:8px;width:80%}
.skeleton-title{height:20px;margin-bottom:12px;width:60%}
.skeleton-card{height:80px;border-radius:var(--radius-md)}
@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ===== P3: 侧栏图标统一 U-06 ===== */
.nav-icon{width:20px;text-align:center;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px}
.nav-icon svg{width:18px;height:18px}

/* ===== P3: 按钮默认样式兜底 U-08 ===== */
.el-button:not([type]){color:var(--text-primary);background:var(--bg-surface);border-color:var(--gray-300)}
.el-button:not([type]):hover{color:var(--primary);border-color:var(--primary)}

/* ============================================
   移动端全面优化（320px-428px）
   ============================================ */

/* --- 基础触摸优化：最小点击区域 44x44px --- */
@media (max-width: 768px) {
  .el-button, .el-select .el-input__inner, .el-input__inner,
  .nav-item, .mobile-tabbar-item, .el-checkbox, .el-radio,
  .el-dropdown-link, .menu-toggle, .user-avatar,
  .search-result-item, .att-cell-new, .cal-day,
  .el-pagination button, .el-pager li {
    min-height: 44px; min-width: 44px;
    display: flex; align-items: center; justify-content: center;
  }
  .el-button--small { min-height: 36px; min-width: 36px; }
  .el-table td, .el-table th { padding: 10px 6px; }
  a, button, [role="button"], .clickable-row { -webkit-tap-highlight-color: transparent; }
}

/* --- 触摸反馈：:active 态替代 :hover --- */
@media (hover: none) and (pointer: coarse) {
  .nav-item:active, .mobile-tabbar-item:active { background: rgba(0,0,0,.08); }
  .el-button:active:not(.el-button--text) { transform: scale(0.96); opacity: 0.85; }
  .g-row:active, .el-table tr:active td { background: var(--gray-50) !important; }
  .stat-card:active { transform: scale(0.97); }
  .search-result-item:active { background: var(--gray-100); }
  .att-cell-new:active { transform: scale(0.92); }
}

/* --- 320-428px 精细适配（小屏手机） --- */
@media (max-width: 428px) {
  :root { --text-base: 0.8125rem; --text-lg: 1rem; --text-xl: 1.125rem; }
  .app-content { padding: 8px !important; margin: 0 !important; }
  .card { padding: 12px !important; border-radius: 10px; }
  .page-header { padding: 8px 0; margin-bottom: 8px; flex-wrap: wrap; gap: 6px; }
  .page-header h2 { font-size: 16px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .stat-card { padding: 10px 8px; min-height: 56px; }
  .stat-num { font-size: 1.25rem; }
  .filter-bar { padding: 6px !important; }
  .filter-bar .el-input, .filter-bar .el-select { width: 100% !important; }
  .el-date-picker { width: 100% !important; }
  .el-table { font-size: 11px; }
  .el-table .cell { padding: 0 4px; }
  .el-dialog { width: 96vw !important; max-width: 96vw !important; margin: 2vh auto !important; }
  .el-dialog__body { padding: 12px !important; }
  .el-form-item { margin-bottom: 12px; }
  .el-form-item__label { font-size: 13px; line-height: 1.4; }
  .el-pagination { font-size: 12px; }
  .g-row { padding: 8px 6px; font-size: 12px; gap: 4px; }
  .g-head { font-size: 11px; padding: 6px; }
  .topbar-greeting { display: none; }
  .global-search .el-input { width: 120px !important; }
  .overdue-banner { font-size: 11px; padding: 8px 12px; flex-wrap: wrap; }
  .smart-banner { flex-wrap: wrap; gap: 6px; padding: 10px; min-height: 48px; }
  .smart-banner-stat { min-width: 60px; padding: 4px 8px; }
  .smart-num { font-size: 1.1rem; }
  .att-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 4px; }
  .att-stat { min-width: 0; padding: 6px 4px; }
  .att-stat-num { font-size: 16px; }
  .att-weekdays span, .att-day-new { font-size: 10px; }
  .detail-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .detail-grid { grid-template-columns: 1fr !important; gap: 8px; }
  .header-actions { flex-wrap: wrap; gap: 4px; }
  .header-actions .el-button { min-height: 40px; font-size: 13px; }
  .member-bar-name { width: 40px; font-size: 11px; }
  .member-bar-track { height: 20px; }
  .report-summary { grid-template-columns: 1fr; }
  .duty-week-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .duty-day-card { min-height: 100px; }
  .search-drop { width: 90vw; left: 0; }
  .quick-actions { flex-wrap: wrap; }
  .quick-actions .el-button { flex: 1; min-width: 0; }
}

/* --- 横屏适配 --- */
@media (max-width: 920px) and (orientation: landscape) {
  .app-content { max-height: 100vh; overflow-y: auto; }
  .app-topbar { height: 44px; padding: 0 12px; }
  .app-topbar .topbar-greeting { display: none; }
  .card { padding: 10px 14px !important; }
  .page-header h2 { font-size: 15px; }
  .el-table td, .el-table th { padding: 6px 4px; }
  .stat-card { min-height: 48px; padding: 8px; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .stat-num { font-size: 1.1rem; }
  .header-actions { gap: 4px; }
  .header-actions .el-button { padding: 4px 10px; font-size: 12px; }
  .mobile-tabbar { height: 44px; }
  .mobile-tabbar-item { font-size: 10px; }
  .app-content { padding-bottom: 44px !important; }
}

/* --- 安全区域强化 --- */
@supports (padding: max(0px)) {
  .mobile-tabbar { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .app-topbar { padding-top: max(0px, env(safe-area-inset-top)); }
  .app-content { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
}

/* --- 移动端动画简化 --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
@media (max-width: 768px) {
  .stat-card:hover { transform: none; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
  .el-table tr:hover td { background: transparent !important; }
}
.tabbar-badge{position:absolute;top:2px;right:2px;background:var(--danger);color:#fff;font-size:10px;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px;font-weight:600}

/* --- 登录卡片移动端修复 --- */
@media (max-width: 480px) {
  .login-card{min-width:auto!important;width:100%!important;padding:24px 16px!important}
  .login-container{width:100%!important;max-width:100vw!important;min-height:auto!important;flex-direction:column!important}
  .login-brand{flex:0 0 auto!important;padding:32px 16px!important}
  .login-form-panel{padding:24px 16px!important}
}

/* --- 弹窗层级修复：高于所有 overlay/tabbar/online-widget --- */
.el-overlay{ z-index: 2000 !important; }
.el-dialog{ z-index: 2001 !important; }
.el-message-box{ z-index: 2002 !important; }
.el-popper,.el-dropdown__popper,.el-select__popper{ z-index: 2003 !important; }

/* --- 侧栏遮罩修复：仅侧栏展开时显示 --- */
.sidebar-overlay{ display: none !important; }
@media (max-width: 768px) {
  .sidebar-overlay.visible{ display: block !important; position: fixed; inset: 0; z-index: 990; background: rgba(0,0,0,0.4); }
}

/* --- 移动端固定宽度溢出修复 --- */
@media (max-width: 428px) {
  .el-table__body-wrapper{ overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .el-table .el-table__cell{ max-width: 150px; }
  .bs-prog-card{ max-width: 100% !important; flex: 1 1 100% !important; }
  .online-panel{ width: 240px !important; right: 8px !important; bottom: 60px !important; }
  .online-widget{ right: 8px !important; bottom: 60px !important; }
}

/* --- 通用移动端对齐修复 --- */
@media (max-width: 768px) {
  .el-row{ margin-left: 0 !important; margin-right: 0 !important; }
  .el-col{ padding-left: 4px !important; padding-right: 4px !important; }
  .duty-week-grid{ gap: 8px; }
  .duty-day-card{ padding: 10px 8px; }
  .member-bar{ flex-wrap: wrap; gap: 4px; }
  .group-header{ flex-wrap: wrap; gap: 6px; }
  .filter-row{ flex-wrap: wrap; gap: 6px; }
  .el-form-item__content{ margin-left: 0 !important; }
  .el-pagination{ flex-wrap: wrap; justify-content: center; }
  .review-banner>div{ flex-direction: column; align-items: flex-start !important; }
  .detail-field{ flex-direction: column; gap: 2px; }
  .field-label{ min-width: auto; margin-bottom: 0; }
  .calendar-grid{ gap: 2px; }
  .report-grid{ gap: 8px; }
  .news-review-card>div{ flex-direction: column !important; gap: 8px !important; }
  .att-review-item{ flex-direction: column; align-items: flex-start; gap: 6px; }
  .att-review-item>div:last-child{ width: 100%; }
}