@charset "UTF-8";
/**
 * KAIROS 主样式文件
 * Clarity Design System v1.0 + NingYou Design System v1.0
 */
/**
 * KAIROS Ceramic Design System v2.0
 * 设计理念：温润如玉，光泽内敛
 * 主色调：暖灰 (Warm Gray) - 带有泥土气息的陶器质感
 */
:root {
  --color-primary: #57534E;
  --color-primary-hover: #44403C;
  --color-primary-subtle: #F5F5F4;
  --gray-900: #1C1917;
  --gray-700: #44403C;
  --gray-500: #78716C;
  --gray-300: #D6D3D1;
  --gray-100: #F5F5F4;
  --gray-50: #FAFAF9;
  --surface-primary: #FFFFFF;
  --surface-secondary: #FAFAF9;
  --surface-tertiary: #F5F5F4;
  --color-success: #65A30D;
  --color-warning: #D97706;
  --color-error: #DC2626;
  --color-info: #0891B2;
  --shadow-sm: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08);
  --shadow-md: 0 4px 6px rgba(87, 83, 78, 0.06), 0 2px 4px rgba(87, 83, 78, 0.08);
  --shadow-lg: 0 10px 15px rgba(87, 83, 78, 0.06), 0 4px 6px rgba(87, 83, 78, 0.07);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --font-family: -apple-system, BlinkMacSystemFont, SF Pro Text, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
  --font-mono: SF Mono, JetBrains Mono, Consolas, Liberation Mono, monospace;
}

[data-theme=dark],
.theme-dark {
  --color-primary: #FAFAF9;
  --color-primary-hover: #E7E5E4;
  --color-primary-subtle: #292524;
  --gray-900: #FAFAF9;
  --gray-700: #A8A29E;
  --gray-500: #78716C;
  --gray-300: #44403C;
  --gray-100: #292524;
  --gray-50: #1C1917;
  --surface-primary: #0C0A09;
  --surface-secondary: #1C1917;
  --surface-tertiary: #292524;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/**
 * KAIROS 组件样式 - Clarity Design System
 * 支持三大主视图：项目板、任务板、工作板
 */
.achievement-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 500;
  min-width: 320px;
  max-width: 400px;
  padding: 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  border: 1px solid #D6D3D1;
  border: 2px solid #D97706;
  box-shadow: 0 8px 32px rgba(217, 119, 6, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateX(100%);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.achievement-toast.show {
  transform: translateX(0);
  opacity: 1;
}
.achievement-toast .achievement-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.achievement-toast .achievement-icon {
  font-size: 2.5rem;
  line-height: 1;
  flex-shrink: 0;
}
.achievement-toast .achievement-info {
  flex: 1;
  min-width: 0;
}
.achievement-toast .achievement-title {
  font-size: 14px;
  font-weight: 500;
  color: #D97706;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.achievement-toast .achievement-name {
  font-size: 18px;
  font-weight: 600;
  color: #1C1917;
  margin-bottom: 4px;
  line-height: 1.25;
}
.achievement-toast .achievement-desc {
  font-size: 14px;
  color: #44403C;
  line-height: 1.5;
}

.achievement-panel .achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  padding: 24px;
}
.achievement-panel .achievement-card {
  background: #FFFFFF;
  border: 1px solid #E7E5E4;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  padding: 24px;
  border-radius: 16px;
  text-align: center;
  transition: all 0.2s ease;
}
.achievement-panel .achievement-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(87, 83, 78, 0.06), 0 2px 4px rgba(87, 83, 78, 0.08);
}
.achievement-panel .achievement-card.unlocked {
  border: 2px solid #D97706;
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.05) 0%, rgba(255, 255, 255, 0.95) 100%);
}
.achievement-panel .achievement-card.locked {
  opacity: 0.6;
  filter: grayscale(0.5);
}
.achievement-panel .achievement-card .achievement-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  display: block;
}
.achievement-panel .achievement-card .achievement-name {
  font-size: 18px;
  font-weight: 600;
  color: #1C1917;
  margin-bottom: 8px;
}
.achievement-panel .achievement-card .achievement-desc {
  font-size: 14px;
  color: #44403C;
  line-height: 1.5;
  margin-bottom: 16px;
}
.achievement-panel .achievement-card .achievement-progress .progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.achievement-panel .achievement-card .achievement-progress .progress-bar .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #D97706, rgb(248.3757847534, 140.1802690583, 15.4242152466));
  border-radius: 3px;
  transition: width 0.3s ease;
}
.achievement-panel .achievement-card .achievement-progress .progress-text {
  font-size: 12px;
  color: #44403C;
}
.achievement-panel {
  /* Removed stray closing brace to fix CssSyntaxError */
}
.achievement-panel .nav-menu .nav-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  border: 1px solid #D6D3D1;
  width: 100%;
  padding: 16px;
  margin-bottom: 8px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #1C1917;
  text-align: left;
  cursor: pointer;
  transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 16px;
}
.achievement-panel .nav-menu .nav-item .icon {
  width: 20px;
  height: 20px;
  stroke: currentcolor;
  stroke-width: 2;
  fill: none;
  opacity: 0.7;
}
.achievement-panel .nav-menu .nav-item span {
  font-weight: 500;
  font-size: 14px;
}
.achievement-panel .nav-menu .nav-item:hover {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  border: 1px solid #D6D3D1;
  transform: translateY(-1px);
}
.achievement-panel .nav-menu .nav-item:hover .icon {
  opacity: 1;
}
.achievement-panel .nav-menu .nav-item.active {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  border: 1px solid #D6D3D1;
  background: rgba(8, 145, 178, 0.1);
  color: #0891B2;
  box-shadow: 0 4px 6px rgba(87, 83, 78, 0.06), 0 2px 4px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.achievement-panel .nav-menu .nav-item.active .icon {
  opacity: 1;
  stroke: #0891B2;
}
.achievement-panel .view-content {
  display: none;
  width: 100%;
  height: 100%;
  padding: 32px;
  animation: fade-in-up 0.4s ease-out;
}
.achievement-panel .view-content.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.achievement-panel .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.achievement-panel .section-header .section-title {
  margin: 0;
  color: #1C1917;
  font-size: 20px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.achievement-panel .section-header .section-title .boards-icon {
  font-size: 20px;
  line-height: 1;
  transform: translateY(1px);
  opacity: 0.9;
}
.achievement-panel .section-header .create-board-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(28, 25, 23, 0.7);
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: saturate(110%) blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.achievement-panel .section-header .create-board-btn .btn-icon {
  font-size: 16px;
  line-height: 1;
  color: rgba(28, 25, 23, 0.5);
}
.achievement-panel .section-header .create-board-btn:hover {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}
.achievement-panel .section-header .create-board-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
.achievement-panel .section-header .create-board-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(28, 25, 23, 0.12);
}
.achievement-panel .boards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  column-gap: 0;
  row-gap: 8px;
}
.achievement-panel .boards-container .new-board-card {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(8, 145, 178, 0.18);
  background: linear-gradient(180deg, rgba(8, 145, 178, 0.06), rgba(8, 145, 178, 0.03));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  min-height: 120px;
}
.achievement-panel .boards-container .new-board-card .new-board-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  color: #0891B2;
  padding: 24px 0;
}
.achievement-panel .boards-container .new-board-card .new-board-content .icon {
  width: 28px;
  height: 28px;
  stroke: currentcolor;
  stroke-width: 2.2;
  fill: none;
}
.achievement-panel .boards-container .new-board-card .new-board-content span {
  font-weight: 600;
  letter-spacing: 0.2px;
}
.achievement-panel .boards-container .new-board-card {
  /* 角标高光 */
}
.achievement-panel .boards-container .new-board-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 20% 0%, rgba(8, 145, 178, 0.18), transparent 60%), radial-gradient(80% 80% at 100% 100%, rgba(8, 145, 178, 0.06), transparent 70%);
  pointer-events: none;
}
.achievement-panel .boards-container .new-board-card:hover {
  transform: translateY(-2px);
  border-color: rgba(8, 145, 178, 0.36);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
  background: linear-gradient(180deg, rgba(8, 145, 178, 0.08), rgba(8, 145, 178, 0.04));
}
.achievement-panel .boards-container .new-board-card:active {
  transform: translateY(0);
}
.achievement-panel .boards-container .empty-state {
  grid-column: 1/-1;
  text-align: center;
  padding: 64px;
  color: #44403C;
}
.achievement-panel .boards-container .empty-state .empty-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.6;
}
.achievement-panel .boards-container .empty-state .empty-text {
  font-size: 18px;
  font-weight: 500;
  color: #1C1917;
  margin-bottom: 8px;
}
.achievement-panel .boards-container .empty-state .empty-hint {
  font-size: 14px;
  color: #78716C;
}
.achievement-panel .empty-project-state {
  text-align: center;
  padding: 64px;
  color: #44403C;
}
.achievement-panel .empty-project-state .empty-icon {
  font-size: 4rem;
  margin-bottom: 24px;
  opacity: 0.6;
}
.achievement-panel .empty-project-state .empty-text {
  font-size: 20px;
  font-weight: 500;
  color: #1C1917;
  margin-bottom: 8px;
}
.achievement-panel .empty-project-state .empty-hint {
  font-size: 16px;
  color: #78716C;
}

.project-view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding: 0 16px;
}
.project-view-header .view-title {
  font-size: 24px;
  font-weight: 700;
  color: #1C1917;
  margin: 0;
  line-height: 1.2;
}
.project-view-header .create-board-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 32px;
  background: linear-gradient(135deg, #0891B2 0%, rgb(9.7548387097, 176.8064516129, 217.0451612903) 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 9999px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 6px 18px rgba(8, 145, 178, 0.22);
  margin-left: auto;
}
.project-view-header .create-board-btn:hover {
  background: linear-gradient(135deg, rgb(6.2451612903, 113.1935483871, 138.9548387097) 0%, #0891B2 100%);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(8, 145, 178, 0.28);
}
.project-view-header .create-board-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.2);
}
.project-view-header .create-board-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.18);
}
.project-view-header .create-board-btn .btn-icon {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.tasks-board {
  width: 100%;
  max-width: 1400px;
}
.tasks-board .task-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  width: 100%;
}
.tasks-board .task-columns .task-column .column-title {
  font-size: 18px;
  font-weight: 500;
  color: #1C1917;
  margin-bottom: 24px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(8, 145, 178, 0.2);
}
.tasks-board .task-columns .task-column .task-list {
  min-height: 400px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  border: 1px solid #D6D3D1;
  border-radius: 16px;
  transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tasks-board .task-columns .task-column .task-list.drop-zone.active {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  border: 1px solid #D6D3D1;
  border-color: #0891B2;
  transform: scale(1.02);
}
.tasks-board .task-columns .task-column .task-list.drop-zone.hover {
  border-color: #65A30D;
  background: rgba(101, 163, 13, 0.1);
}

.task-item {
  margin: 0;
}
.task-item .task-priority {
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.2;
  /* 优先级标签（四象限） - 统一样式 */
}
.task-item .task-priority.urgent-important {
  background: #FEF2F2;
  color: #DC2626;
  border: 1px solid rgba(220, 38, 38, 0.3);
}
.task-item .task-priority.not-urgent-important {
  background: #F7FEE7;
  color: #65A30D;
  border: 1px solid rgba(101, 163, 13, 0.3);
}
.task-item .task-priority.urgent-not-important {
  background: #FFFBEB;
  color: #D97706;
  border: 1px solid rgba(217, 119, 6, 0.3);
}
.task-item .task-priority.not-urgent-not-important {
  background: #FAFAF9;
  color: #57534E;
  border: 1px solid #E7E5E4;
}
.task-item .task-status {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}
.task-item .task-status.completed {
  background: rgba(101, 163, 13, 0.2);
  color: #65A30D;
}
.task-item .task-status.pending {
  background: rgba(68, 64, 60, 0.2);
  color: #44403C;
}

.stats-section .stat-card {
  margin: 0 0 16px;
  padding: 16px;
  text-align: center;
}
.stats-section .stat-card h4 {
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stats-section .stat-card p {
  margin: 0;
  line-height: 1.2;
}

.quick-actions {
  margin-top: auto;
}
.quick-actions .ceramic-button.w-full, .quick-actions .w-full.quick-create-btn {
  width: 100%;
}
.quick-actions .ceramic-button.mb-2, .quick-actions .mb-2.quick-create-btn {
  margin-bottom: 8px;
}

.panel-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.panel-header h1, .panel-header h2 {
  margin: 0;
  line-height: 1.2;
}
.panel-header p {
  margin: 4px 0 0 0;
  opacity: 0.8;
}

@media (max-width: 1024px) {
  .task-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .boards-container {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 24px;
  }
}
@media (max-width: 768px) {
  .task-columns {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .task-columns .task-column .task-list {
    min-height: 200px;
  }
  .boards-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .view-content {
    padding: 24px;
  }
}
@keyframes slide-in-from-left {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slide-in-from-right {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.left-panel {
  animation: slide-in-from-left 0.6s ease-out;
}

.right-panel {
  animation: slide-in-from-right 0.6s ease-out;
}

.center-panel {
  animation: fade-in-up 0.8s ease-out;
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
.loading::after {
  content: "";
  width: 32px;
  height: 32px;
  border: 3px solid rgba(8, 145, 178, 0.2);
  border-top: 3px solid #0891B2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 300px;
  color: #78716C;
  text-align: center;
}
.empty-state .icon {
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  opacity: 0.5;
}
.empty-state h3 {
  margin-bottom: 8px;
  color: #44403C;
}
.empty-state p {
  margin: 0;
  max-width: 300px;
}

.app-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 48px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(28, 25, 23, 0.1);
  z-index: 1000;
}
.app-header .logo-section {
  display: flex;
  align-items: center;
  gap: 24px;
}
.app-header .logo-section .logo {
  font-size: 24px; /* 1.5rem -> 标准24px */
}
.app-header .logo-section .app-title {
  font-size: 20px;
  font-weight: 700;
  color: #1C1917;
  margin: 0;
  letter-spacing: 0.05em;
}

.task-board {
  height: 100%;
  padding: 48px;
  position: relative;
}

.task-view-switcher {
  display: none !important; /* 隐藏右上角视图切换器 */
}
.task-view-switcher .task-view-btn {
  padding: 16px 32px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #44403C;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
}
.task-view-switcher .task-view-btn:hover {
  background: rgba(8, 145, 178, 0.1);
  color: #1C1917;
}
.task-view-switcher .task-view-btn.active {
  background: #0891B2;
  color: white;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08);
}

.project-overview {
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.project-overview .create-board-btn {
  position: absolute;
  top: 32px;
  right: 32px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 24px;
  background: linear-gradient(135deg, #0891B2 0%, rgb(9.7548387097, 176.8064516129, 217.0451612903) 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08);
}
.project-overview .create-board-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(87, 83, 78, 0.06), 0 2px 4px rgba(87, 83, 78, 0.08);
}
.project-overview .create-board-btn .btn-icon {
  font-size: 18px;
  font-weight: 700;
}
.project-overview .section-title {
  font-size: 20px;
  font-weight: 600;
  color: #1C1917;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.project-overview .section-title .star-icon {
  font-size: 18px;
}
.project-overview .starred-boards,
.project-overview .all-boards {
  display: block;
  margin-bottom: 16px;
}

/* 精准作用于项目界面右上角（所有看板分区）的新建按钮 */
.all-boards .section-header .create-board-btn {
  color: rgba(28, 25, 23, 0.9);
  background: rgba(8, 145, 178, 0.1);
  backdrop-filter: saturate(110%) blur(8px);
  border: 1px solid rgba(8, 145, 178, 0.2);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.all-boards .section-header .create-board-btn .btn-icon {
  color: rgba(8, 145, 178, 0.8);
}

.all-boards .section-header .create-board-btn:hover {
  background: rgba(8, 145, 178, 0.16);
  border-color: rgba(8, 145, 178, 0.28);
}

.all-boards .section-header .create-board-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.18);
}

.search-section {
  margin-bottom: 0;
}
.search-section .search-input {
  width: 100%;
  padding: 16px 24px;
  border: 1px solid rgba(68, 64, 60, 0.3);
  border-radius: 12px;
  background: #FFFFFF;
  color: #1C1917;
  font-size: 16px;
  transition: all 0.2s ease;
}
.search-section .search-input:focus {
  outline: none;
  border-color: #0891B2;
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}
.search-section .search-input::placeholder {
  color: #44403C;
}

.task-section .task-list .task-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 8px;
  cursor: pointer;
  transition: all 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.task-section .task-list .task-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.task-section .task-list .task-item {
  background: #FFFFFF;
  color: #44403C;
  border: 1px solid #D6D3D1;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.task-section .task-list .task-item:hover:not(:disabled) {
  background: #FAFAF9;
  border-color: #A8A29E;
  color: #1C1917;
}
.task-section .task-list .task-item {
  width: 100%;
  padding: 16px 24px;
  margin-bottom: 0;
  border-radius: 12px;
  cursor: move;
  transition: all 0.2s ease;
  text-align: left;
  border: none;
}
.task-section .task-list .task-item:hover {
  background: rgba(8, 145, 178, 0.05);
  transform: translateX(4px);
}
.task-section .task-list .task-item.dragging {
  opacity: 0.5;
  transform: rotate(5deg);
}
.task-section .task-list .task-item .task-title {
  font-weight: 500;
  color: #1C1917;
  margin-bottom: 8px;
}
.task-section .task-list .task-item .task-meta {
  font-size: 14px;
  color: #44403C;
}

@keyframes timerPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.025);
  }
}
.task-drop-zone {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(28, 25, 23, 0.08);
  border-radius: 16px;
  padding: 24px 32px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  backdrop-filter: blur(10px);
}
.task-drop-zone:focus-within {
  border-color: rgba(8, 145, 178, 0.45);
  box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.15);
}

.current-task-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 32px;
  margin-bottom: 24px;
  background: rgba(8, 145, 178, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(8, 145, 178, 0.2);
}
.current-task-display .current-task-label {
  font-size: 14px;
  color: #44403C;
}
.current-task-display .current-task-title {
  font-size: 16px;
  font-weight: 500;
  color: #1C1917;
}

.activity-input-area {
  margin-bottom: 16px;
}
.activity-input-area.task-drop-zone {
  border: 2px dashed transparent;
  border-radius: 16px;
  transition: all 0.3s ease;
  padding: 16px;
}
.activity-input-area.task-drop-zone.drag-over {
  border-color: #0891B2;
  background: rgba(8, 145, 178, 0.05);
}
.activity-input-area .activity-input {
  width: 100%;
  min-height: 80px;
  padding: 24px;
  border: 1px solid rgba(28, 25, 23, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  resize: vertical;
  transition: all 0.2s ease;
  margin-bottom: 16px;
  display: block;
}
.activity-input-area .activity-input:focus {
  outline: none;
  border-color: #0891B2;
  box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.1);
}
.activity-input-area .send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 8px;
  cursor: pointer;
  transition: all 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.activity-input-area .send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.activity-input-area .send-btn {
  background: #FFFFFF;
  color: #44403C;
  border: 1px solid #D6D3D1;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.activity-input-area .send-btn:hover:not(:disabled) {
  background: #FAFAF9;
  border-color: #A8A29E;
  color: #1C1917;
}
.activity-input-area .send-btn {
  padding: 8px 16px;
  background: #0891B2;
  color: #FFFFFF;
  border-radius: 8px;
  font-size: 12px;
  display: block;
  margin-left: auto;
  margin-bottom: 16px;
  width: fit-content;
  min-width: 50px;
}
.activity-input-area .send-btn:hover {
  background: rgb(4.4903225806, 81.3870967742, 99.9096774194);
}

.summary-area {
  display: flex;
  justify-content: center;
  margin-top: 8px;
  margin-bottom: 32px;
}
.summary-area .summary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 8px;
  cursor: pointer;
  transition: all 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.summary-area .summary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.summary-area .summary-btn {
  background: #FFFFFF;
  color: #44403C;
  border: 1px solid #D6D3D1;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.summary-area .summary-btn:hover:not(:disabled) {
  background: #FAFAF9;
  border-color: #A8A29E;
  color: #1C1917;
}
.summary-area .summary-btn {
  padding: 8px 24px;
  font-size: 12px;
  background: rgba(8, 145, 178, 0.08);
  color: #0891B2;
  border: 1px solid rgba(8, 145, 178, 0.2);
  border-radius: 12px;
  min-width: 80px;
}
.summary-area .summary-btn:hover {
  background: rgba(8, 145, 178, 0.15);
  border-color: rgba(8, 145, 178, 0.4);
}

.activity-log {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px;
}
.activity-log h3 {
  font-size: 14px;
  font-weight: 600;
  color: #78716C;
  margin: 0 0 4px 0;
  padding: 0;
}
.activity-log .log-list {
  flex: 1;
  overflow-y: auto;
}
.activity-log .log-list .log-item {
  background: #FFFFFF;
  border: 1px solid #E7E5E4;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  padding: 8px 16px; /* 大幅减少padding，从spacing-3改为spacing-1和spacing-2 */
  margin-bottom: 8px; /* 减少卡片间距，从spacing-2改为spacing-1 */
  border-radius: 12px;
  border-left: 3px solid #0891B2;
  line-height: 1.2; /* 紧凑行高 */
}
.activity-log .log-list .log-item .log-time {
  font-size: 12px; /* 减小字体，从sm改为xs */
  color: #78716C; /* Digital Ceramic: 使用更淡的颜色创建层次 */
  margin-bottom: 2px; /* 极小间距，从spacing-1改为固定2px */
  line-height: 1.1;
}
.activity-log .log-list .log-item .log-content {
  color: #44403C; /* Digital Ceramic: 使用中性灰色降低视觉权重 */
  margin-bottom: 2px; /* 极小间距 */
  line-height: 1.2;
}
.activity-log .log-list .log-item .log-task {
  font-size: 12px; /* 减小字体 */
  color: #78716C; /* Digital Ceramic: 进一步降低任务信息的视觉权重 */
  font-style: italic;
  line-height: 1.1;
}

.priority-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-auto-rows: minmax(220px, 1fr);
  gap: clamp(24px, 2.4vw, 32px);
  width: 100%;
  height: 100%;
  padding: clamp(24px, 3vw, 40px);
  background: rgba(255, 255, 255, 0.72);
  border-radius: 16px;
  border: 1px solid rgba(28, 25, 23, 0.04);
  box-shadow: 0 12px 28px rgba(28, 25, 23, 0.06);
  backdrop-filter: blur(10px);
}
@media (max-width: 768px) {
  .priority-matrix {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(200px, auto);
    padding: 24px;
  }
}
.priority-matrix .matrix-quadrant {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 16px;
  border: 1px solid rgba(28, 25, 23, 0.06);
  padding: clamp(24px, 2.2vw, 32px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  min-height: 0;
}
@media (max-width: 768px) {
  .priority-matrix .matrix-quadrant {
    padding: 24px;
  }
}
.priority-matrix .matrix-quadrant .quadrant-header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}
.priority-matrix .matrix-quadrant .quadrant-header .priority-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: rgba(28, 25, 23, 0.08);
  color: #1C1917;
}
.priority-matrix .matrix-quadrant .quadrant-header .quadrant-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.priority-matrix .matrix-quadrant .quadrant-header .quadrant-title {
  font-size: 16px;
  font-weight: 600;
  color: #1C1917;
}
.priority-matrix .matrix-quadrant .quadrant-header .quadrant-subtitle {
  font-size: 12px;
  color: #44403C;
}
.priority-matrix .matrix-quadrant .quadrant-tasks {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(28, 25, 23, 0.12) transparent;
}
.priority-matrix .matrix-quadrant .quadrant-tasks::-webkit-scrollbar {
  width: 6px;
}
.priority-matrix .matrix-quadrant .quadrant-tasks::-webkit-scrollbar-thumb {
  background: rgba(28, 25, 23, 0.12);
  border-radius: 3px;
}
.priority-matrix .matrix-quadrant .quadrant-tasks .empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  padding: 32px 24px;
  border: 1px dashed rgba(28, 25, 23, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
}
.priority-matrix .matrix-quadrant .quadrant-tasks .empty-state .empty-icon {
  font-size: 24px;
}
.priority-matrix .matrix-quadrant .quadrant-tasks .empty-state .empty-text {
  font-size: 16px;
  color: #1C1917;
  font-weight: 500;
}
.priority-matrix .matrix-quadrant .quadrant-tasks .empty-state .empty-hint {
  font-size: 14px;
  color: #44403C;
}
.priority-matrix .matrix-quadrant.urgent-important .quadrant-header .priority-icon {
  background: rgba(220, 38, 38, 0.18);
  color: rgb(187.0333333333, 30.1666666667, 30.1666666667);
}
.priority-matrix .matrix-quadrant.not-urgent-important .quadrant-header .priority-icon {
  background: rgba(8, 145, 178, 0.16);
  color: rgb(6.2451612903, 113.1935483871, 138.9548387097);
}
.priority-matrix .matrix-quadrant.urgent-not-important .quadrant-header .priority-icon {
  background: rgba(217, 119, 6, 0.2);
  color: rgb(177.2977578475, 97.2278026906, 4.9022421525);
}
.priority-matrix .matrix-quadrant.not-urgent-not-important .quadrant-header .priority-icon {
  background: rgba(68, 64, 60, 0.2);
  color: rgb(35.4875, 33.4, 31.3125);
}

.priority-task-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid #D6D3D1;
  transition: border-color 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.priority-task-card:hover {
  border-color: #78716C;
}
.priority-task-card.is-complete {
  opacity: 0.45;
  border-style: dashed;
}
.priority-task-card.is-complete .priority-task-title {
  text-decoration: line-through;
  color: #44403C;
}
.priority-task-card .task-checkbox {
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  border-radius: 8px;
  border: 2px solid #D6D3D1;
  background: #FFFFFF;
  cursor: pointer;
  position: relative;
  transition: border-color 120ms cubic-bezier(0.25, 0.1, 0.25, 1), background-color 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.priority-task-card .task-checkbox:checked {
  background: #57534E;
  border-color: #57534E;
}
.priority-task-card .task-checkbox:checked::after {
  content: "✔";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -56%) scale(0.9);
  font-size: 12px;
  color: white;
}
.priority-task-card .priority-task-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  cursor: pointer;
}
.priority-task-card .priority-task-body .priority-task-title {
  font-size: 16px;
  font-weight: 500;
  color: #1C1917;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.priority-task-card .priority-task-body .priority-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.priority-task-card .priority-task-body .priority-task-meta .priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  background: rgba(28, 25, 23, 0.05);
  color: #44403C;
}
.priority-task-card .priority-task-body .priority-task-meta .priority-badge.status-todo {
  background: rgba(8, 145, 178, 0.12);
  color: rgb(6.2451612903, 113.1935483871, 138.9548387097);
}
.priority-task-card .priority-task-body .priority-task-meta .priority-badge.status-doing {
  background: rgba(217, 119, 6, 0.18);
  color: rgb(177.2977578475, 97.2278026906, 4.9022421525);
}
.priority-task-card .priority-task-body .priority-task-meta .priority-badge.status-review {
  background: rgba(9.7548387097, 176.8064516129, 217.0451612903, 0.18);
  color: rgb(6.2451612903, 113.1935483871, 138.9548387097);
}
.priority-task-card .priority-task-body .priority-task-meta .priority-badge.status-done {
  background: rgba(101, 163, 13, 0.12);
  color: rgb(77.5863636364, 125.2136363636, 9.9863636364);
}
.priority-task-card .priority-task-body .priority-task-meta .priority-badge.project {
  background: rgba(28, 25, 23, 0.06);
  color: #44403C;
}
.priority-task-card .priority-open-btn {
  border: none;
  background: transparent;
  color: rgba(28, 25, 23, 0.5);
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  align-self: center;
  transition: color 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.priority-task-card .priority-open-btn:hover {
  color: rgb(6.2451612903, 113.1935483871, 138.9548387097);
}

.priority-task-card.status-urgent-important {
  border-left: 4px solid #DC2626;
}

.priority-task-card.status-not-urgent-important {
  border-left: 4px solid #0891B2;
}

.priority-task-card.status-urgent-not-important {
  border-left: 4px solid #D97706;
}

.priority-task-card.status-not-urgent-not-important {
  border-left: 4px solid #44403C;
}

/* 矩阵布局容器：上部四象限 + 底部操作栏 */
.matrix-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.matrix-layout .priority-matrix {
  flex: 1;
}

.status-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 2vw, 32px);
  height: 100%;
  padding: clamp(24px, 2.4vw, 32px);
  overflow: hidden;
}
.status-board .status-column {
  background: #FFFFFF;
  border: 1px solid #E7E5E4;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  min-width: 0;
  border-radius: 16px;
  padding: 0; /* 让列头贴边 */
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(28, 25, 23, 0.06);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.status-board .status-column:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}
.status-board .status-column .column-header {
  margin: 0; /* 无上/左右外边距 */
  padding: 24px 24px 16px; /* 保持内部留白 */
  border-bottom: 1px solid rgba(28, 25, 23, 0.1);
}
.status-board .status-column .column-header .column-title {
  font-size: 18px;
  font-weight: 600;
  color: #1C1917;
}
.status-board .status-column .column-header .task-count {
  font-size: 14px;
  color: #44403C;
}
.status-board .status-column .column-tasks {
  flex: 1;
  min-height: 0;
  padding: 0 24px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(28, 25, 23, 0.12) transparent;
}
.status-board .status-column .column-tasks::-webkit-scrollbar {
  width: 6px;
}
.status-board .status-column .column-tasks::-webkit-scrollbar-thumb {
  background: rgba(28, 25, 23, 0.12);
  border-radius: 3px;
}
.status-board .status-column .column-tasks .task-card {
  background: #FFFFFF;
  border: 1px solid #E7E5E4;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  padding: 24px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.status-board .status-column .column-tasks .task-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.status-board .status-column .column-tasks .task-card .task-title {
  font-weight: 500;
  color: #1C1917;
  margin-bottom: 16px;
}
.status-board .status-column .column-tasks .task-card .task-project {
  font-size: 14px;
  color: #44403C;
}
.status-board .status-column .column-tasks .task-card .task-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.status-board .status-column .column-tasks .task-card .task-tags .task-tag {
  font-size: 12px;
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(8, 145, 178, 0.1);
  color: #0891B2;
}
.status-board .status-column .column-tasks .task-card .task-meta {
  font-size: 12px;
  color: #44403C;
}
.status-board .status-column .quadrant-tasks {
  max-height: 100%;
  overflow-y: auto;
}
.status-board .status-column .quadrant-tasks::-webkit-scrollbar {
  width: 6px;
}
.status-board .status-column .quadrant-tasks::-webkit-scrollbar-thumb {
  background: rgba(28, 25, 23, 0.15);
  border-radius: 3px;
}
.status-board .status-column .quadrant-tasks::-webkit-scrollbar-track {
  background: transparent;
}

.matrix-actions {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 0 24px;
  border-top: 1px solid rgba(28, 25, 23, 0.08);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
}

.kanban-view {
  display: flex;
  gap: 32px;
  height: 100%;
  overflow-x: auto;
  padding: 40px;
}
.kanban-view .kanban-column {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  border: 1px solid #D6D3D1;
  min-width: 300px;
  border-radius: 16px;
  padding: 32px;
}
.kanban-view .kanban-column .column-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(68, 64, 60, 0.3);
}
.kanban-view .kanban-column .column-header .column-title {
  font-size: 18px;
  font-weight: 600;
  color: #1C1917;
}
.kanban-view .kanban-column .column-header .task-count {
  font-size: 14px;
  color: #44403C;
}
.kanban-view .kanban-column .column-tasks {
  padding: 16px 24px 24px; /* 内容区恢复左右/下内边距 */
}
.kanban-view .kanban-column .column-tasks .task-card {
  background: #FFFFFF;
  border: 1px solid #E7E5E4;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  padding: 16px 24px;
  margin-bottom: 6px;
  border-radius: 12px;
  border: 1px solid rgba(28, 25, 23, 0.06);
  background: rgba(255, 255, 255, 0.98);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.kanban-view .kanban-column .column-tasks .task-card:hover {
  transform: translateY(-2px);
  border-color: rgba(28, 25, 23, 0.12);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
  background: white;
}
.kanban-view .kanban-column .column-tasks .task-card .task-title {
  font-weight: 500;
  color: #1C1917;
  margin-bottom: 8px;
  line-height: 1.3;
}
.kanban-view .kanban-column .column-tasks .task-card .task-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.kanban-view .kanban-column .column-tasks .task-card .task-tags .task-tag {
  font-size: 12px;
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(8, 145, 178, 0.1);
  color: #0891B2;
}
.kanban-view .kanban-column .column-tasks .task-card .task-meta {
  font-size: 12px;
  color: #44403C;
}

.modal,
.kairos-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.modal.active,
.kairos-modal.active {
  opacity: 1;
  visibility: visible;
}
.modal.active .modal-content,
.kairos-modal.active .modal-content {
  transform: scale(1);
  opacity: 1;
}
.modal .modal-content,
.kairos-modal .modal-content {
  width: min(420px, 100vw - 32px);
  max-height: calc(100vh - 120px);
  background: white;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  transform: scale(0.96);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  overflow: hidden;
}
.modal .modal-content .modal-header,
.kairos-modal .modal-content .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px 20px;
  border-bottom: 1px solid #F5F5F4;
}
.modal .modal-content .modal-header .modal-title,
.kairos-modal .modal-content .modal-header .modal-title {
  font-size: 16px;
  font-weight: 600;
  color: #1C1917;
  line-height: 24px;
}
.modal .modal-content .modal-header .modal-close,
.modal .modal-content .modal-header .close-btn,
.kairos-modal .modal-content .modal-header .modal-close,
.kairos-modal .modal-content .modal-header .close-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #78716C;
  cursor: pointer;
  transition: all 0.2s ease;
}
.modal .modal-content .modal-header .modal-close:hover,
.modal .modal-content .modal-header .close-btn:hover,
.kairos-modal .modal-content .modal-header .modal-close:hover,
.kairos-modal .modal-content .modal-header .close-btn:hover {
  background: #F5F5F4;
  color: #1C1917;
}
.modal .modal-content .modal-header .modal-close svg,
.modal .modal-content .modal-header .modal-close i,
.modal .modal-content .modal-header .close-btn svg,
.modal .modal-content .modal-header .close-btn i,
.kairos-modal .modal-content .modal-header .modal-close svg,
.kairos-modal .modal-content .modal-header .modal-close i,
.kairos-modal .modal-content .modal-header .close-btn svg,
.kairos-modal .modal-content .modal-header .close-btn i {
  width: 16px;
  height: 16px;
}
.modal .modal-content .modal-body,
.kairos-modal .modal-content .modal-body {
  padding: 16px 20px;
  flex: 1;
  overflow-y: auto;
}
.modal .modal-content .modal-body .form-group,
.kairos-modal .modal-content .modal-body .form-group {
  margin-bottom: 12px;
}
.modal .modal-content .modal-body .form-group:last-child,
.kairos-modal .modal-content .modal-body .form-group:last-child {
  margin-bottom: 0;
}
.modal .modal-content .modal-body .form-group .form-label,
.modal .modal-content .modal-body .form-group label,
.kairos-modal .modal-content .modal-body .form-group .form-label,
.kairos-modal .modal-content .modal-body .form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #57534E;
  margin-bottom: 8px;
}
.modal .modal-content .modal-body .form-group .form-label-required::after,
.kairos-modal .modal-content .modal-body .form-group .form-label-required::after {
  content: "*";
  color: #ff4d4f;
  margin-left: 4px;
}
.modal .modal-content .modal-body .form-group .form-input,
.modal .modal-content .modal-body .form-group input,
.modal .modal-content .modal-body .form-group select,
.modal .modal-content .modal-body .form-group textarea,
.kairos-modal .modal-content .modal-body .form-group .form-input,
.kairos-modal .modal-content .modal-body .form-group input,
.kairos-modal .modal-content .modal-body .form-group select,
.kairos-modal .modal-content .modal-body .form-group textarea {
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  font-size: 14px;
  color: #1C1917;
  background: white;
  border: 1px solid #E7E5E4;
  border-radius: 6px;
  transition: all 0.2s ease;
  font-family: inherit;
}
.modal .modal-content .modal-body .form-group .form-input::placeholder,
.modal .modal-content .modal-body .form-group input::placeholder,
.modal .modal-content .modal-body .form-group select::placeholder,
.modal .modal-content .modal-body .form-group textarea::placeholder,
.kairos-modal .modal-content .modal-body .form-group .form-input::placeholder,
.kairos-modal .modal-content .modal-body .form-group input::placeholder,
.kairos-modal .modal-content .modal-body .form-group select::placeholder,
.kairos-modal .modal-content .modal-body .form-group textarea::placeholder {
  color: #A8A29E;
}
.modal .modal-content .modal-body .form-group .form-input:hover,
.modal .modal-content .modal-body .form-group input:hover,
.modal .modal-content .modal-body .form-group select:hover,
.modal .modal-content .modal-body .form-group textarea:hover,
.kairos-modal .modal-content .modal-body .form-group .form-input:hover,
.kairos-modal .modal-content .modal-body .form-group input:hover,
.kairos-modal .modal-content .modal-body .form-group select:hover,
.kairos-modal .modal-content .modal-body .form-group textarea:hover {
  border-color: #57534E;
}
.modal .modal-content .modal-body .form-group .form-input:focus,
.modal .modal-content .modal-body .form-group input:focus,
.modal .modal-content .modal-body .form-group select:focus,
.modal .modal-content .modal-body .form-group textarea:focus,
.kairos-modal .modal-content .modal-body .form-group .form-input:focus,
.kairos-modal .modal-content .modal-body .form-group input:focus,
.kairos-modal .modal-content .modal-body .form-group select:focus,
.kairos-modal .modal-content .modal-body .form-group textarea:focus {
  border-color: #57534E;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
  outline: none;
}
.modal .modal-content .modal-body .form-group .form-input.is-invalid, .modal .modal-content .modal-body .form-group .form-input[aria-invalid=true],
.modal .modal-content .modal-body .form-group input.is-invalid,
.modal .modal-content .modal-body .form-group input[aria-invalid=true],
.modal .modal-content .modal-body .form-group select.is-invalid,
.modal .modal-content .modal-body .form-group select[aria-invalid=true],
.modal .modal-content .modal-body .form-group textarea.is-invalid,
.modal .modal-content .modal-body .form-group textarea[aria-invalid=true],
.kairos-modal .modal-content .modal-body .form-group .form-input.is-invalid,
.kairos-modal .modal-content .modal-body .form-group .form-input[aria-invalid=true],
.kairos-modal .modal-content .modal-body .form-group input.is-invalid,
.kairos-modal .modal-content .modal-body .form-group input[aria-invalid=true],
.kairos-modal .modal-content .modal-body .form-group select.is-invalid,
.kairos-modal .modal-content .modal-body .form-group select[aria-invalid=true],
.kairos-modal .modal-content .modal-body .form-group textarea.is-invalid,
.kairos-modal .modal-content .modal-body .form-group textarea[aria-invalid=true] {
  border-color: #ff4d4f;
  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.12);
}
.modal .modal-content .modal-body .form-group .form-input[readonly], .modal .modal-content .modal-body .form-group .form-input[disabled],
.modal .modal-content .modal-body .form-group input[readonly],
.modal .modal-content .modal-body .form-group input[disabled],
.modal .modal-content .modal-body .form-group select[readonly],
.modal .modal-content .modal-body .form-group select[disabled],
.modal .modal-content .modal-body .form-group textarea[readonly],
.modal .modal-content .modal-body .form-group textarea[disabled],
.kairos-modal .modal-content .modal-body .form-group .form-input[readonly],
.kairos-modal .modal-content .modal-body .form-group .form-input[disabled],
.kairos-modal .modal-content .modal-body .form-group input[readonly],
.kairos-modal .modal-content .modal-body .form-group input[disabled],
.kairos-modal .modal-content .modal-body .form-group select[readonly],
.kairos-modal .modal-content .modal-body .form-group select[disabled],
.kairos-modal .modal-content .modal-body .form-group textarea[readonly],
.kairos-modal .modal-content .modal-body .form-group textarea[disabled] {
  background: #F5F5F4;
  color: #78716C;
  cursor: not-allowed;
}
.modal .modal-content .modal-body .form-group textarea,
.modal .modal-content .modal-body .form-group textarea.form-input,
.kairos-modal .modal-content .modal-body .form-group textarea,
.kairos-modal .modal-content .modal-body .form-group textarea.form-input {
  min-height: 72px;
  max-height: 140px;
  resize: vertical;
  line-height: 1.4;
}
.modal .modal-content .modal-body .form-group .form-input-counter,
.kairos-modal .modal-content .modal-body .form-group .form-input-counter {
  display: block;
  text-align: right;
  font-size: 12px;
  color: #A8A29E;
  margin-top: 4px;
}
.modal .modal-content .modal-body .form-group .form-input-counter.warning,
.kairos-modal .modal-content .modal-body .form-group .form-input-counter.warning {
  color: #D97706;
}
.modal .modal-content .modal-body .form-group .form-input-counter.error,
.kairos-modal .modal-content .modal-body .form-group .form-input-counter.error {
  color: #ff4d4f;
}
.modal .modal-content .modal-body .form-group .form-feedback,
.kairos-modal .modal-content .modal-body .form-group .form-feedback {
  display: none;
  margin-top: 4px;
  font-size: 12px;
  color: #ff4d4f;
}
.modal .modal-content .modal-body .form-group .form-feedback.is-visible,
.kairos-modal .modal-content .modal-body .form-group .form-feedback.is-visible {
  display: block;
}
.modal .modal-content .modal-footer,
.modal .modal-content .modal-actions,
.kairos-modal .modal-content .modal-footer,
.kairos-modal .modal-content .modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 20px;
  gap: 10px;
  border-top: 1px solid #F5F5F4;
  background: #FAFAF9;
}
.modal .modal-content .modal-footer button,
.modal .modal-content .modal-footer .ceramic-button,
.modal .modal-content .modal-footer .quick-create-btn,
.modal .modal-content .modal-footer .modal-button,
.modal .modal-content .modal-footer .modal-button-secondary,
.modal .modal-content .modal-footer .modal-button-primary,
.modal .modal-content .modal-footer .cancel-btn,
.modal .modal-content .modal-footer .submit-btn,
.modal .modal-content .modal-footer .primary-btn,
.modal .modal-content .modal-footer .secondary,
.modal .modal-content .modal-footer .primary,
.modal .modal-content .modal-actions button,
.modal .modal-content .modal-actions .ceramic-button,
.modal .modal-content .modal-actions .quick-create-btn,
.modal .modal-content .modal-actions .modal-button,
.modal .modal-content .modal-actions .modal-button-secondary,
.modal .modal-content .modal-actions .modal-button-primary,
.modal .modal-content .modal-actions .cancel-btn,
.modal .modal-content .modal-actions .submit-btn,
.modal .modal-content .modal-actions .primary-btn,
.modal .modal-content .modal-actions .secondary,
.modal .modal-content .modal-actions .primary,
.kairos-modal .modal-content .modal-footer button,
.kairos-modal .modal-content .modal-footer .ceramic-button,
.kairos-modal .modal-content .modal-footer .quick-create-btn,
.kairos-modal .modal-content .modal-footer .modal-button,
.kairos-modal .modal-content .modal-footer .modal-button-secondary,
.kairos-modal .modal-content .modal-footer .modal-button-primary,
.kairos-modal .modal-content .modal-footer .cancel-btn,
.kairos-modal .modal-content .modal-footer .submit-btn,
.kairos-modal .modal-content .modal-footer .primary-btn,
.kairos-modal .modal-content .modal-footer .secondary,
.kairos-modal .modal-content .modal-footer .primary,
.kairos-modal .modal-content .modal-actions button,
.kairos-modal .modal-content .modal-actions .ceramic-button,
.kairos-modal .modal-content .modal-actions .quick-create-btn,
.kairos-modal .modal-content .modal-actions .modal-button,
.kairos-modal .modal-content .modal-actions .modal-button-secondary,
.kairos-modal .modal-content .modal-actions .modal-button-primary,
.kairos-modal .modal-content .modal-actions .cancel-btn,
.kairos-modal .modal-content .modal-actions .submit-btn,
.kairos-modal .modal-content .modal-actions .primary-btn,
.kairos-modal .modal-content .modal-actions .secondary,
.kairos-modal .modal-content .modal-actions .primary {
  height: 36px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #E7E5E4;
  background: white;
  color: #57534E;
  cursor: pointer;
  transition: all 0.2s ease;
}
.modal .modal-content .modal-footer button:hover,
.modal .modal-content .modal-footer .ceramic-button:hover,
.modal .modal-content .modal-footer .quick-create-btn:hover,
.modal .modal-content .modal-footer .modal-button:hover,
.modal .modal-content .modal-footer .modal-button-secondary:hover,
.modal .modal-content .modal-footer .modal-button-primary:hover,
.modal .modal-content .modal-footer .cancel-btn:hover,
.modal .modal-content .modal-footer .submit-btn:hover,
.modal .modal-content .modal-footer .primary-btn:hover,
.modal .modal-content .modal-footer .secondary:hover,
.modal .modal-content .modal-footer .primary:hover,
.modal .modal-content .modal-actions button:hover,
.modal .modal-content .modal-actions .ceramic-button:hover,
.modal .modal-content .modal-actions .quick-create-btn:hover,
.modal .modal-content .modal-actions .modal-button:hover,
.modal .modal-content .modal-actions .modal-button-secondary:hover,
.modal .modal-content .modal-actions .modal-button-primary:hover,
.modal .modal-content .modal-actions .cancel-btn:hover,
.modal .modal-content .modal-actions .submit-btn:hover,
.modal .modal-content .modal-actions .primary-btn:hover,
.modal .modal-content .modal-actions .secondary:hover,
.modal .modal-content .modal-actions .primary:hover,
.kairos-modal .modal-content .modal-footer button:hover,
.kairos-modal .modal-content .modal-footer .ceramic-button:hover,
.kairos-modal .modal-content .modal-footer .quick-create-btn:hover,
.kairos-modal .modal-content .modal-footer .modal-button:hover,
.kairos-modal .modal-content .modal-footer .modal-button-secondary:hover,
.kairos-modal .modal-content .modal-footer .modal-button-primary:hover,
.kairos-modal .modal-content .modal-footer .cancel-btn:hover,
.kairos-modal .modal-content .modal-footer .submit-btn:hover,
.kairos-modal .modal-content .modal-footer .primary-btn:hover,
.kairos-modal .modal-content .modal-footer .secondary:hover,
.kairos-modal .modal-content .modal-footer .primary:hover,
.kairos-modal .modal-content .modal-actions button:hover,
.kairos-modal .modal-content .modal-actions .ceramic-button:hover,
.kairos-modal .modal-content .modal-actions .quick-create-btn:hover,
.kairos-modal .modal-content .modal-actions .modal-button:hover,
.kairos-modal .modal-content .modal-actions .modal-button-secondary:hover,
.kairos-modal .modal-content .modal-actions .modal-button-primary:hover,
.kairos-modal .modal-content .modal-actions .cancel-btn:hover,
.kairos-modal .modal-content .modal-actions .submit-btn:hover,
.kairos-modal .modal-content .modal-actions .primary-btn:hover,
.kairos-modal .modal-content .modal-actions .secondary:hover,
.kairos-modal .modal-content .modal-actions .primary:hover {
  border-color: #57534E;
  color: #1C1917;
}
.modal .modal-content .modal-footer button:active,
.modal .modal-content .modal-footer .ceramic-button:active,
.modal .modal-content .modal-footer .quick-create-btn:active,
.modal .modal-content .modal-footer .modal-button:active,
.modal .modal-content .modal-footer .modal-button-secondary:active,
.modal .modal-content .modal-footer .modal-button-primary:active,
.modal .modal-content .modal-footer .cancel-btn:active,
.modal .modal-content .modal-footer .submit-btn:active,
.modal .modal-content .modal-footer .primary-btn:active,
.modal .modal-content .modal-footer .secondary:active,
.modal .modal-content .modal-footer .primary:active,
.modal .modal-content .modal-actions button:active,
.modal .modal-content .modal-actions .ceramic-button:active,
.modal .modal-content .modal-actions .quick-create-btn:active,
.modal .modal-content .modal-actions .modal-button:active,
.modal .modal-content .modal-actions .modal-button-secondary:active,
.modal .modal-content .modal-actions .modal-button-primary:active,
.modal .modal-content .modal-actions .cancel-btn:active,
.modal .modal-content .modal-actions .submit-btn:active,
.modal .modal-content .modal-actions .primary-btn:active,
.modal .modal-content .modal-actions .secondary:active,
.modal .modal-content .modal-actions .primary:active,
.kairos-modal .modal-content .modal-footer button:active,
.kairos-modal .modal-content .modal-footer .ceramic-button:active,
.kairos-modal .modal-content .modal-footer .quick-create-btn:active,
.kairos-modal .modal-content .modal-footer .modal-button:active,
.kairos-modal .modal-content .modal-footer .modal-button-secondary:active,
.kairos-modal .modal-content .modal-footer .modal-button-primary:active,
.kairos-modal .modal-content .modal-footer .cancel-btn:active,
.kairos-modal .modal-content .modal-footer .submit-btn:active,
.kairos-modal .modal-content .modal-footer .primary-btn:active,
.kairos-modal .modal-content .modal-footer .secondary:active,
.kairos-modal .modal-content .modal-footer .primary:active,
.kairos-modal .modal-content .modal-actions button:active,
.kairos-modal .modal-content .modal-actions .ceramic-button:active,
.kairos-modal .modal-content .modal-actions .quick-create-btn:active,
.kairos-modal .modal-content .modal-actions .modal-button:active,
.kairos-modal .modal-content .modal-actions .modal-button-secondary:active,
.kairos-modal .modal-content .modal-actions .modal-button-primary:active,
.kairos-modal .modal-content .modal-actions .cancel-btn:active,
.kairos-modal .modal-content .modal-actions .submit-btn:active,
.kairos-modal .modal-content .modal-actions .primary-btn:active,
.kairos-modal .modal-content .modal-actions .secondary:active,
.kairos-modal .modal-content .modal-actions .primary:active {
  background: #F5F5F4;
}
.modal .modal-content .modal-footer button.modal-button-primary, .modal .modal-content .modal-footer button.primary, .modal .modal-content .modal-footer button.primary-btn, .modal .modal-content .modal-footer button.submit-btn, .modal .modal-content .modal-footer button.create-btn, .modal .modal-content .modal-footer button.save-btn,
.modal .modal-content .modal-footer .ceramic-button.modal-button-primary,
.modal .modal-content .modal-footer .modal-button-primary.quick-create-btn,
.modal .modal-content .modal-footer .ceramic-button.primary,
.modal .modal-content .modal-footer .primary.quick-create-btn,
.modal .modal-content .modal-footer .ceramic-button.primary-btn,
.modal .modal-content .modal-footer .primary-btn.quick-create-btn,
.modal .modal-content .modal-footer .ceramic-button.submit-btn,
.modal .modal-content .modal-footer .submit-btn.quick-create-btn,
.modal .modal-content .modal-footer .ceramic-button.create-btn,
.modal .modal-content .modal-footer .create-btn.quick-create-btn,
.modal .modal-content .modal-footer .ceramic-button.save-btn,
.modal .modal-content .modal-footer .save-btn.quick-create-btn,
.modal .modal-content .modal-footer .modal-button.modal-button-primary,
.modal .modal-content .modal-footer .modal-button.primary,
.modal .modal-content .modal-footer .modal-button.primary-btn,
.modal .modal-content .modal-footer .modal-button.submit-btn,
.modal .modal-content .modal-footer .modal-button.create-btn,
.modal .modal-content .modal-footer .modal-button.save-btn,
.modal .modal-content .modal-footer .modal-button-secondary.modal-button-primary,
.modal .modal-content .modal-footer .modal-button-secondary.primary,
.modal .modal-content .modal-footer .modal-button-secondary.primary-btn,
.modal .modal-content .modal-footer .modal-button-secondary.submit-btn,
.modal .modal-content .modal-footer .modal-button-secondary.create-btn,
.modal .modal-content .modal-footer .modal-button-secondary.save-btn,
.modal .modal-content .modal-footer .modal-button-primary.modal-button-primary,
.modal .modal-content .modal-footer .modal-button-primary.primary,
.modal .modal-content .modal-footer .modal-button-primary.primary-btn,
.modal .modal-content .modal-footer .modal-button-primary.submit-btn,
.modal .modal-content .modal-footer .modal-button-primary.create-btn,
.modal .modal-content .modal-footer .modal-button-primary.save-btn,
.modal .modal-content .modal-footer .cancel-btn.modal-button-primary,
.modal .modal-content .modal-footer .cancel-btn.primary,
.modal .modal-content .modal-footer .cancel-btn.primary-btn,
.modal .modal-content .modal-footer .cancel-btn.submit-btn,
.modal .modal-content .modal-footer .cancel-btn.create-btn,
.modal .modal-content .modal-footer .cancel-btn.save-btn,
.modal .modal-content .modal-footer .submit-btn.modal-button-primary,
.modal .modal-content .modal-footer .submit-btn.primary,
.modal .modal-content .modal-footer .submit-btn.primary-btn,
.modal .modal-content .modal-footer .submit-btn.submit-btn,
.modal .modal-content .modal-footer .submit-btn.create-btn,
.modal .modal-content .modal-footer .submit-btn.save-btn,
.modal .modal-content .modal-footer .primary-btn.modal-button-primary,
.modal .modal-content .modal-footer .primary-btn.primary,
.modal .modal-content .modal-footer .primary-btn.primary-btn,
.modal .modal-content .modal-footer .primary-btn.submit-btn,
.modal .modal-content .modal-footer .primary-btn.create-btn,
.modal .modal-content .modal-footer .primary-btn.save-btn,
.modal .modal-content .modal-footer .secondary.modal-button-primary,
.modal .modal-content .modal-footer .secondary.primary,
.modal .modal-content .modal-footer .secondary.primary-btn,
.modal .modal-content .modal-footer .secondary.submit-btn,
.modal .modal-content .modal-footer .secondary.create-btn,
.modal .modal-content .modal-footer .secondary.save-btn,
.modal .modal-content .modal-footer .primary.modal-button-primary,
.modal .modal-content .modal-footer .primary.primary,
.modal .modal-content .modal-footer .primary.primary-btn,
.modal .modal-content .modal-footer .primary.submit-btn,
.modal .modal-content .modal-footer .primary.create-btn,
.modal .modal-content .modal-footer .primary.save-btn,
.modal .modal-content .modal-actions button.modal-button-primary,
.modal .modal-content .modal-actions button.primary,
.modal .modal-content .modal-actions button.primary-btn,
.modal .modal-content .modal-actions button.submit-btn,
.modal .modal-content .modal-actions button.create-btn,
.modal .modal-content .modal-actions button.save-btn,
.modal .modal-content .modal-actions .ceramic-button.modal-button-primary,
.modal .modal-content .modal-actions .modal-button-primary.quick-create-btn,
.modal .modal-content .modal-actions .ceramic-button.primary,
.modal .modal-content .modal-actions .primary.quick-create-btn,
.modal .modal-content .modal-actions .ceramic-button.primary-btn,
.modal .modal-content .modal-actions .primary-btn.quick-create-btn,
.modal .modal-content .modal-actions .ceramic-button.submit-btn,
.modal .modal-content .modal-actions .submit-btn.quick-create-btn,
.modal .modal-content .modal-actions .ceramic-button.create-btn,
.modal .modal-content .modal-actions .create-btn.quick-create-btn,
.modal .modal-content .modal-actions .ceramic-button.save-btn,
.modal .modal-content .modal-actions .save-btn.quick-create-btn,
.modal .modal-content .modal-actions .modal-button.modal-button-primary,
.modal .modal-content .modal-actions .modal-button.primary,
.modal .modal-content .modal-actions .modal-button.primary-btn,
.modal .modal-content .modal-actions .modal-button.submit-btn,
.modal .modal-content .modal-actions .modal-button.create-btn,
.modal .modal-content .modal-actions .modal-button.save-btn,
.modal .modal-content .modal-actions .modal-button-secondary.modal-button-primary,
.modal .modal-content .modal-actions .modal-button-secondary.primary,
.modal .modal-content .modal-actions .modal-button-secondary.primary-btn,
.modal .modal-content .modal-actions .modal-button-secondary.submit-btn,
.modal .modal-content .modal-actions .modal-button-secondary.create-btn,
.modal .modal-content .modal-actions .modal-button-secondary.save-btn,
.modal .modal-content .modal-actions .modal-button-primary.modal-button-primary,
.modal .modal-content .modal-actions .modal-button-primary.primary,
.modal .modal-content .modal-actions .modal-button-primary.primary-btn,
.modal .modal-content .modal-actions .modal-button-primary.submit-btn,
.modal .modal-content .modal-actions .modal-button-primary.create-btn,
.modal .modal-content .modal-actions .modal-button-primary.save-btn,
.modal .modal-content .modal-actions .cancel-btn.modal-button-primary,
.modal .modal-content .modal-actions .cancel-btn.primary,
.modal .modal-content .modal-actions .cancel-btn.primary-btn,
.modal .modal-content .modal-actions .cancel-btn.submit-btn,
.modal .modal-content .modal-actions .cancel-btn.create-btn,
.modal .modal-content .modal-actions .cancel-btn.save-btn,
.modal .modal-content .modal-actions .submit-btn.modal-button-primary,
.modal .modal-content .modal-actions .submit-btn.primary,
.modal .modal-content .modal-actions .submit-btn.primary-btn,
.modal .modal-content .modal-actions .submit-btn.submit-btn,
.modal .modal-content .modal-actions .submit-btn.create-btn,
.modal .modal-content .modal-actions .submit-btn.save-btn,
.modal .modal-content .modal-actions .primary-btn.modal-button-primary,
.modal .modal-content .modal-actions .primary-btn.primary,
.modal .modal-content .modal-actions .primary-btn.primary-btn,
.modal .modal-content .modal-actions .primary-btn.submit-btn,
.modal .modal-content .modal-actions .primary-btn.create-btn,
.modal .modal-content .modal-actions .primary-btn.save-btn,
.modal .modal-content .modal-actions .secondary.modal-button-primary,
.modal .modal-content .modal-actions .secondary.primary,
.modal .modal-content .modal-actions .secondary.primary-btn,
.modal .modal-content .modal-actions .secondary.submit-btn,
.modal .modal-content .modal-actions .secondary.create-btn,
.modal .modal-content .modal-actions .secondary.save-btn,
.modal .modal-content .modal-actions .primary.modal-button-primary,
.modal .modal-content .modal-actions .primary.primary,
.modal .modal-content .modal-actions .primary.primary-btn,
.modal .modal-content .modal-actions .primary.submit-btn,
.modal .modal-content .modal-actions .primary.create-btn,
.modal .modal-content .modal-actions .primary.save-btn,
.kairos-modal .modal-content .modal-footer button.modal-button-primary,
.kairos-modal .modal-content .modal-footer button.primary,
.kairos-modal .modal-content .modal-footer button.primary-btn,
.kairos-modal .modal-content .modal-footer button.submit-btn,
.kairos-modal .modal-content .modal-footer button.create-btn,
.kairos-modal .modal-content .modal-footer button.save-btn,
.kairos-modal .modal-content .modal-footer .ceramic-button.modal-button-primary,
.kairos-modal .modal-content .modal-footer .modal-button-primary.quick-create-btn,
.kairos-modal .modal-content .modal-footer .ceramic-button.primary,
.kairos-modal .modal-content .modal-footer .primary.quick-create-btn,
.kairos-modal .modal-content .modal-footer .ceramic-button.primary-btn,
.kairos-modal .modal-content .modal-footer .primary-btn.quick-create-btn,
.kairos-modal .modal-content .modal-footer .ceramic-button.submit-btn,
.kairos-modal .modal-content .modal-footer .submit-btn.quick-create-btn,
.kairos-modal .modal-content .modal-footer .ceramic-button.create-btn,
.kairos-modal .modal-content .modal-footer .create-btn.quick-create-btn,
.kairos-modal .modal-content .modal-footer .ceramic-button.save-btn,
.kairos-modal .modal-content .modal-footer .save-btn.quick-create-btn,
.kairos-modal .modal-content .modal-footer .modal-button.modal-button-primary,
.kairos-modal .modal-content .modal-footer .modal-button.primary,
.kairos-modal .modal-content .modal-footer .modal-button.primary-btn,
.kairos-modal .modal-content .modal-footer .modal-button.submit-btn,
.kairos-modal .modal-content .modal-footer .modal-button.create-btn,
.kairos-modal .modal-content .modal-footer .modal-button.save-btn,
.kairos-modal .modal-content .modal-footer .modal-button-secondary.modal-button-primary,
.kairos-modal .modal-content .modal-footer .modal-button-secondary.primary,
.kairos-modal .modal-content .modal-footer .modal-button-secondary.primary-btn,
.kairos-modal .modal-content .modal-footer .modal-button-secondary.submit-btn,
.kairos-modal .modal-content .modal-footer .modal-button-secondary.create-btn,
.kairos-modal .modal-content .modal-footer .modal-button-secondary.save-btn,
.kairos-modal .modal-content .modal-footer .modal-button-primary.modal-button-primary,
.kairos-modal .modal-content .modal-footer .modal-button-primary.primary,
.kairos-modal .modal-content .modal-footer .modal-button-primary.primary-btn,
.kairos-modal .modal-content .modal-footer .modal-button-primary.submit-btn,
.kairos-modal .modal-content .modal-footer .modal-button-primary.create-btn,
.kairos-modal .modal-content .modal-footer .modal-button-primary.save-btn,
.kairos-modal .modal-content .modal-footer .cancel-btn.modal-button-primary,
.kairos-modal .modal-content .modal-footer .cancel-btn.primary,
.kairos-modal .modal-content .modal-footer .cancel-btn.primary-btn,
.kairos-modal .modal-content .modal-footer .cancel-btn.submit-btn,
.kairos-modal .modal-content .modal-footer .cancel-btn.create-btn,
.kairos-modal .modal-content .modal-footer .cancel-btn.save-btn,
.kairos-modal .modal-content .modal-footer .submit-btn.modal-button-primary,
.kairos-modal .modal-content .modal-footer .submit-btn.primary,
.kairos-modal .modal-content .modal-footer .submit-btn.primary-btn,
.kairos-modal .modal-content .modal-footer .submit-btn.submit-btn,
.kairos-modal .modal-content .modal-footer .submit-btn.create-btn,
.kairos-modal .modal-content .modal-footer .submit-btn.save-btn,
.kairos-modal .modal-content .modal-footer .primary-btn.modal-button-primary,
.kairos-modal .modal-content .modal-footer .primary-btn.primary,
.kairos-modal .modal-content .modal-footer .primary-btn.primary-btn,
.kairos-modal .modal-content .modal-footer .primary-btn.submit-btn,
.kairos-modal .modal-content .modal-footer .primary-btn.create-btn,
.kairos-modal .modal-content .modal-footer .primary-btn.save-btn,
.kairos-modal .modal-content .modal-footer .secondary.modal-button-primary,
.kairos-modal .modal-content .modal-footer .secondary.primary,
.kairos-modal .modal-content .modal-footer .secondary.primary-btn,
.kairos-modal .modal-content .modal-footer .secondary.submit-btn,
.kairos-modal .modal-content .modal-footer .secondary.create-btn,
.kairos-modal .modal-content .modal-footer .secondary.save-btn,
.kairos-modal .modal-content .modal-footer .primary.modal-button-primary,
.kairos-modal .modal-content .modal-footer .primary.primary,
.kairos-modal .modal-content .modal-footer .primary.primary-btn,
.kairos-modal .modal-content .modal-footer .primary.submit-btn,
.kairos-modal .modal-content .modal-footer .primary.create-btn,
.kairos-modal .modal-content .modal-footer .primary.save-btn,
.kairos-modal .modal-content .modal-actions button.modal-button-primary,
.kairos-modal .modal-content .modal-actions button.primary,
.kairos-modal .modal-content .modal-actions button.primary-btn,
.kairos-modal .modal-content .modal-actions button.submit-btn,
.kairos-modal .modal-content .modal-actions button.create-btn,
.kairos-modal .modal-content .modal-actions button.save-btn,
.kairos-modal .modal-content .modal-actions .ceramic-button.modal-button-primary,
.kairos-modal .modal-content .modal-actions .modal-button-primary.quick-create-btn,
.kairos-modal .modal-content .modal-actions .ceramic-button.primary,
.kairos-modal .modal-content .modal-actions .primary.quick-create-btn,
.kairos-modal .modal-content .modal-actions .ceramic-button.primary-btn,
.kairos-modal .modal-content .modal-actions .primary-btn.quick-create-btn,
.kairos-modal .modal-content .modal-actions .ceramic-button.submit-btn,
.kairos-modal .modal-content .modal-actions .submit-btn.quick-create-btn,
.kairos-modal .modal-content .modal-actions .ceramic-button.create-btn,
.kairos-modal .modal-content .modal-actions .create-btn.quick-create-btn,
.kairos-modal .modal-content .modal-actions .ceramic-button.save-btn,
.kairos-modal .modal-content .modal-actions .save-btn.quick-create-btn,
.kairos-modal .modal-content .modal-actions .modal-button.modal-button-primary,
.kairos-modal .modal-content .modal-actions .modal-button.primary,
.kairos-modal .modal-content .modal-actions .modal-button.primary-btn,
.kairos-modal .modal-content .modal-actions .modal-button.submit-btn,
.kairos-modal .modal-content .modal-actions .modal-button.create-btn,
.kairos-modal .modal-content .modal-actions .modal-button.save-btn,
.kairos-modal .modal-content .modal-actions .modal-button-secondary.modal-button-primary,
.kairos-modal .modal-content .modal-actions .modal-button-secondary.primary,
.kairos-modal .modal-content .modal-actions .modal-button-secondary.primary-btn,
.kairos-modal .modal-content .modal-actions .modal-button-secondary.submit-btn,
.kairos-modal .modal-content .modal-actions .modal-button-secondary.create-btn,
.kairos-modal .modal-content .modal-actions .modal-button-secondary.save-btn,
.kairos-modal .modal-content .modal-actions .modal-button-primary.modal-button-primary,
.kairos-modal .modal-content .modal-actions .modal-button-primary.primary,
.kairos-modal .modal-content .modal-actions .modal-button-primary.primary-btn,
.kairos-modal .modal-content .modal-actions .modal-button-primary.submit-btn,
.kairos-modal .modal-content .modal-actions .modal-button-primary.create-btn,
.kairos-modal .modal-content .modal-actions .modal-button-primary.save-btn,
.kairos-modal .modal-content .modal-actions .cancel-btn.modal-button-primary,
.kairos-modal .modal-content .modal-actions .cancel-btn.primary,
.kairos-modal .modal-content .modal-actions .cancel-btn.primary-btn,
.kairos-modal .modal-content .modal-actions .cancel-btn.submit-btn,
.kairos-modal .modal-content .modal-actions .cancel-btn.create-btn,
.kairos-modal .modal-content .modal-actions .cancel-btn.save-btn,
.kairos-modal .modal-content .modal-actions .submit-btn.modal-button-primary,
.kairos-modal .modal-content .modal-actions .submit-btn.primary,
.kairos-modal .modal-content .modal-actions .submit-btn.primary-btn,
.kairos-modal .modal-content .modal-actions .submit-btn.submit-btn,
.kairos-modal .modal-content .modal-actions .submit-btn.create-btn,
.kairos-modal .modal-content .modal-actions .submit-btn.save-btn,
.kairos-modal .modal-content .modal-actions .primary-btn.modal-button-primary,
.kairos-modal .modal-content .modal-actions .primary-btn.primary,
.kairos-modal .modal-content .modal-actions .primary-btn.primary-btn,
.kairos-modal .modal-content .modal-actions .primary-btn.submit-btn,
.kairos-modal .modal-content .modal-actions .primary-btn.create-btn,
.kairos-modal .modal-content .modal-actions .primary-btn.save-btn,
.kairos-modal .modal-content .modal-actions .secondary.modal-button-primary,
.kairos-modal .modal-content .modal-actions .secondary.primary,
.kairos-modal .modal-content .modal-actions .secondary.primary-btn,
.kairos-modal .modal-content .modal-actions .secondary.submit-btn,
.kairos-modal .modal-content .modal-actions .secondary.create-btn,
.kairos-modal .modal-content .modal-actions .secondary.save-btn,
.kairos-modal .modal-content .modal-actions .primary.modal-button-primary,
.kairos-modal .modal-content .modal-actions .primary.primary,
.kairos-modal .modal-content .modal-actions .primary.primary-btn,
.kairos-modal .modal-content .modal-actions .primary.submit-btn,
.kairos-modal .modal-content .modal-actions .primary.create-btn,
.kairos-modal .modal-content .modal-actions .primary.save-btn {
  border: none;
  background: #57534E;
  color: white;
  padding: 0 20px;
}
.modal .modal-content .modal-footer button.modal-button-primary:hover, .modal .modal-content .modal-footer button.primary:hover, .modal .modal-content .modal-footer button.primary-btn:hover, .modal .modal-content .modal-footer button.submit-btn:hover, .modal .modal-content .modal-footer button.create-btn:hover, .modal .modal-content .modal-footer button.save-btn:hover,
.modal .modal-content .modal-footer .ceramic-button.modal-button-primary:hover,
.modal .modal-content .modal-footer .modal-button-primary.quick-create-btn:hover,
.modal .modal-content .modal-footer .ceramic-button.primary:hover,
.modal .modal-content .modal-footer .primary.quick-create-btn:hover,
.modal .modal-content .modal-footer .ceramic-button.primary-btn:hover,
.modal .modal-content .modal-footer .primary-btn.quick-create-btn:hover,
.modal .modal-content .modal-footer .ceramic-button.submit-btn:hover,
.modal .modal-content .modal-footer .submit-btn.quick-create-btn:hover,
.modal .modal-content .modal-footer .ceramic-button.create-btn:hover,
.modal .modal-content .modal-footer .create-btn.quick-create-btn:hover,
.modal .modal-content .modal-footer .ceramic-button.save-btn:hover,
.modal .modal-content .modal-footer .save-btn.quick-create-btn:hover,
.modal .modal-content .modal-footer .modal-button.modal-button-primary:hover,
.modal .modal-content .modal-footer .modal-button.primary:hover,
.modal .modal-content .modal-footer .modal-button.primary-btn:hover,
.modal .modal-content .modal-footer .modal-button.submit-btn:hover,
.modal .modal-content .modal-footer .modal-button.create-btn:hover,
.modal .modal-content .modal-footer .modal-button.save-btn:hover,
.modal .modal-content .modal-footer .modal-button-secondary.modal-button-primary:hover,
.modal .modal-content .modal-footer .modal-button-secondary.primary:hover,
.modal .modal-content .modal-footer .modal-button-secondary.primary-btn:hover,
.modal .modal-content .modal-footer .modal-button-secondary.submit-btn:hover,
.modal .modal-content .modal-footer .modal-button-secondary.create-btn:hover,
.modal .modal-content .modal-footer .modal-button-secondary.save-btn:hover,
.modal .modal-content .modal-footer .modal-button-primary.modal-button-primary:hover,
.modal .modal-content .modal-footer .modal-button-primary.primary:hover,
.modal .modal-content .modal-footer .modal-button-primary.primary-btn:hover,
.modal .modal-content .modal-footer .modal-button-primary.submit-btn:hover,
.modal .modal-content .modal-footer .modal-button-primary.create-btn:hover,
.modal .modal-content .modal-footer .modal-button-primary.save-btn:hover,
.modal .modal-content .modal-footer .cancel-btn.modal-button-primary:hover,
.modal .modal-content .modal-footer .cancel-btn.primary:hover,
.modal .modal-content .modal-footer .cancel-btn.primary-btn:hover,
.modal .modal-content .modal-footer .cancel-btn.submit-btn:hover,
.modal .modal-content .modal-footer .cancel-btn.create-btn:hover,
.modal .modal-content .modal-footer .cancel-btn.save-btn:hover,
.modal .modal-content .modal-footer .submit-btn.modal-button-primary:hover,
.modal .modal-content .modal-footer .submit-btn.primary:hover,
.modal .modal-content .modal-footer .submit-btn.primary-btn:hover,
.modal .modal-content .modal-footer .submit-btn.submit-btn:hover,
.modal .modal-content .modal-footer .submit-btn.create-btn:hover,
.modal .modal-content .modal-footer .submit-btn.save-btn:hover,
.modal .modal-content .modal-footer .primary-btn.modal-button-primary:hover,
.modal .modal-content .modal-footer .primary-btn.primary:hover,
.modal .modal-content .modal-footer .primary-btn.primary-btn:hover,
.modal .modal-content .modal-footer .primary-btn.submit-btn:hover,
.modal .modal-content .modal-footer .primary-btn.create-btn:hover,
.modal .modal-content .modal-footer .primary-btn.save-btn:hover,
.modal .modal-content .modal-footer .secondary.modal-button-primary:hover,
.modal .modal-content .modal-footer .secondary.primary:hover,
.modal .modal-content .modal-footer .secondary.primary-btn:hover,
.modal .modal-content .modal-footer .secondary.submit-btn:hover,
.modal .modal-content .modal-footer .secondary.create-btn:hover,
.modal .modal-content .modal-footer .secondary.save-btn:hover,
.modal .modal-content .modal-footer .primary.modal-button-primary:hover,
.modal .modal-content .modal-footer .primary.primary:hover,
.modal .modal-content .modal-footer .primary.primary-btn:hover,
.modal .modal-content .modal-footer .primary.submit-btn:hover,
.modal .modal-content .modal-footer .primary.create-btn:hover,
.modal .modal-content .modal-footer .primary.save-btn:hover,
.modal .modal-content .modal-actions button.modal-button-primary:hover,
.modal .modal-content .modal-actions button.primary:hover,
.modal .modal-content .modal-actions button.primary-btn:hover,
.modal .modal-content .modal-actions button.submit-btn:hover,
.modal .modal-content .modal-actions button.create-btn:hover,
.modal .modal-content .modal-actions button.save-btn:hover,
.modal .modal-content .modal-actions .ceramic-button.modal-button-primary:hover,
.modal .modal-content .modal-actions .modal-button-primary.quick-create-btn:hover,
.modal .modal-content .modal-actions .ceramic-button.primary:hover,
.modal .modal-content .modal-actions .primary.quick-create-btn:hover,
.modal .modal-content .modal-actions .ceramic-button.primary-btn:hover,
.modal .modal-content .modal-actions .primary-btn.quick-create-btn:hover,
.modal .modal-content .modal-actions .ceramic-button.submit-btn:hover,
.modal .modal-content .modal-actions .submit-btn.quick-create-btn:hover,
.modal .modal-content .modal-actions .ceramic-button.create-btn:hover,
.modal .modal-content .modal-actions .create-btn.quick-create-btn:hover,
.modal .modal-content .modal-actions .ceramic-button.save-btn:hover,
.modal .modal-content .modal-actions .save-btn.quick-create-btn:hover,
.modal .modal-content .modal-actions .modal-button.modal-button-primary:hover,
.modal .modal-content .modal-actions .modal-button.primary:hover,
.modal .modal-content .modal-actions .modal-button.primary-btn:hover,
.modal .modal-content .modal-actions .modal-button.submit-btn:hover,
.modal .modal-content .modal-actions .modal-button.create-btn:hover,
.modal .modal-content .modal-actions .modal-button.save-btn:hover,
.modal .modal-content .modal-actions .modal-button-secondary.modal-button-primary:hover,
.modal .modal-content .modal-actions .modal-button-secondary.primary:hover,
.modal .modal-content .modal-actions .modal-button-secondary.primary-btn:hover,
.modal .modal-content .modal-actions .modal-button-secondary.submit-btn:hover,
.modal .modal-content .modal-actions .modal-button-secondary.create-btn:hover,
.modal .modal-content .modal-actions .modal-button-secondary.save-btn:hover,
.modal .modal-content .modal-actions .modal-button-primary.modal-button-primary:hover,
.modal .modal-content .modal-actions .modal-button-primary.primary:hover,
.modal .modal-content .modal-actions .modal-button-primary.primary-btn:hover,
.modal .modal-content .modal-actions .modal-button-primary.submit-btn:hover,
.modal .modal-content .modal-actions .modal-button-primary.create-btn:hover,
.modal .modal-content .modal-actions .modal-button-primary.save-btn:hover,
.modal .modal-content .modal-actions .cancel-btn.modal-button-primary:hover,
.modal .modal-content .modal-actions .cancel-btn.primary:hover,
.modal .modal-content .modal-actions .cancel-btn.primary-btn:hover,
.modal .modal-content .modal-actions .cancel-btn.submit-btn:hover,
.modal .modal-content .modal-actions .cancel-btn.create-btn:hover,
.modal .modal-content .modal-actions .cancel-btn.save-btn:hover,
.modal .modal-content .modal-actions .submit-btn.modal-button-primary:hover,
.modal .modal-content .modal-actions .submit-btn.primary:hover,
.modal .modal-content .modal-actions .submit-btn.primary-btn:hover,
.modal .modal-content .modal-actions .submit-btn.submit-btn:hover,
.modal .modal-content .modal-actions .submit-btn.create-btn:hover,
.modal .modal-content .modal-actions .submit-btn.save-btn:hover,
.modal .modal-content .modal-actions .primary-btn.modal-button-primary:hover,
.modal .modal-content .modal-actions .primary-btn.primary:hover,
.modal .modal-content .modal-actions .primary-btn.primary-btn:hover,
.modal .modal-content .modal-actions .primary-btn.submit-btn:hover,
.modal .modal-content .modal-actions .primary-btn.create-btn:hover,
.modal .modal-content .modal-actions .primary-btn.save-btn:hover,
.modal .modal-content .modal-actions .secondary.modal-button-primary:hover,
.modal .modal-content .modal-actions .secondary.primary:hover,
.modal .modal-content .modal-actions .secondary.primary-btn:hover,
.modal .modal-content .modal-actions .secondary.submit-btn:hover,
.modal .modal-content .modal-actions .secondary.create-btn:hover,
.modal .modal-content .modal-actions .secondary.save-btn:hover,
.modal .modal-content .modal-actions .primary.modal-button-primary:hover,
.modal .modal-content .modal-actions .primary.primary:hover,
.modal .modal-content .modal-actions .primary.primary-btn:hover,
.modal .modal-content .modal-actions .primary.submit-btn:hover,
.modal .modal-content .modal-actions .primary.create-btn:hover,
.modal .modal-content .modal-actions .primary.save-btn:hover,
.kairos-modal .modal-content .modal-footer button.modal-button-primary:hover,
.kairos-modal .modal-content .modal-footer button.primary:hover,
.kairos-modal .modal-content .modal-footer button.primary-btn:hover,
.kairos-modal .modal-content .modal-footer button.submit-btn:hover,
.kairos-modal .modal-content .modal-footer button.create-btn:hover,
.kairos-modal .modal-content .modal-footer button.save-btn:hover,
.kairos-modal .modal-content .modal-footer .ceramic-button.modal-button-primary:hover,
.kairos-modal .modal-content .modal-footer .modal-button-primary.quick-create-btn:hover,
.kairos-modal .modal-content .modal-footer .ceramic-button.primary:hover,
.kairos-modal .modal-content .modal-footer .primary.quick-create-btn:hover,
.kairos-modal .modal-content .modal-footer .ceramic-button.primary-btn:hover,
.kairos-modal .modal-content .modal-footer .primary-btn.quick-create-btn:hover,
.kairos-modal .modal-content .modal-footer .ceramic-button.submit-btn:hover,
.kairos-modal .modal-content .modal-footer .submit-btn.quick-create-btn:hover,
.kairos-modal .modal-content .modal-footer .ceramic-button.create-btn:hover,
.kairos-modal .modal-content .modal-footer .create-btn.quick-create-btn:hover,
.kairos-modal .modal-content .modal-footer .ceramic-button.save-btn:hover,
.kairos-modal .modal-content .modal-footer .save-btn.quick-create-btn:hover,
.kairos-modal .modal-content .modal-footer .modal-button.modal-button-primary:hover,
.kairos-modal .modal-content .modal-footer .modal-button.primary:hover,
.kairos-modal .modal-content .modal-footer .modal-button.primary-btn:hover,
.kairos-modal .modal-content .modal-footer .modal-button.submit-btn:hover,
.kairos-modal .modal-content .modal-footer .modal-button.create-btn:hover,
.kairos-modal .modal-content .modal-footer .modal-button.save-btn:hover,
.kairos-modal .modal-content .modal-footer .modal-button-secondary.modal-button-primary:hover,
.kairos-modal .modal-content .modal-footer .modal-button-secondary.primary:hover,
.kairos-modal .modal-content .modal-footer .modal-button-secondary.primary-btn:hover,
.kairos-modal .modal-content .modal-footer .modal-button-secondary.submit-btn:hover,
.kairos-modal .modal-content .modal-footer .modal-button-secondary.create-btn:hover,
.kairos-modal .modal-content .modal-footer .modal-button-secondary.save-btn:hover,
.kairos-modal .modal-content .modal-footer .modal-button-primary.modal-button-primary:hover,
.kairos-modal .modal-content .modal-footer .modal-button-primary.primary:hover,
.kairos-modal .modal-content .modal-footer .modal-button-primary.primary-btn:hover,
.kairos-modal .modal-content .modal-footer .modal-button-primary.submit-btn:hover,
.kairos-modal .modal-content .modal-footer .modal-button-primary.create-btn:hover,
.kairos-modal .modal-content .modal-footer .modal-button-primary.save-btn:hover,
.kairos-modal .modal-content .modal-footer .cancel-btn.modal-button-primary:hover,
.kairos-modal .modal-content .modal-footer .cancel-btn.primary:hover,
.kairos-modal .modal-content .modal-footer .cancel-btn.primary-btn:hover,
.kairos-modal .modal-content .modal-footer .cancel-btn.submit-btn:hover,
.kairos-modal .modal-content .modal-footer .cancel-btn.create-btn:hover,
.kairos-modal .modal-content .modal-footer .cancel-btn.save-btn:hover,
.kairos-modal .modal-content .modal-footer .submit-btn.modal-button-primary:hover,
.kairos-modal .modal-content .modal-footer .submit-btn.primary:hover,
.kairos-modal .modal-content .modal-footer .submit-btn.primary-btn:hover,
.kairos-modal .modal-content .modal-footer .submit-btn.submit-btn:hover,
.kairos-modal .modal-content .modal-footer .submit-btn.create-btn:hover,
.kairos-modal .modal-content .modal-footer .submit-btn.save-btn:hover,
.kairos-modal .modal-content .modal-footer .primary-btn.modal-button-primary:hover,
.kairos-modal .modal-content .modal-footer .primary-btn.primary:hover,
.kairos-modal .modal-content .modal-footer .primary-btn.primary-btn:hover,
.kairos-modal .modal-content .modal-footer .primary-btn.submit-btn:hover,
.kairos-modal .modal-content .modal-footer .primary-btn.create-btn:hover,
.kairos-modal .modal-content .modal-footer .primary-btn.save-btn:hover,
.kairos-modal .modal-content .modal-footer .secondary.modal-button-primary:hover,
.kairos-modal .modal-content .modal-footer .secondary.primary:hover,
.kairos-modal .modal-content .modal-footer .secondary.primary-btn:hover,
.kairos-modal .modal-content .modal-footer .secondary.submit-btn:hover,
.kairos-modal .modal-content .modal-footer .secondary.create-btn:hover,
.kairos-modal .modal-content .modal-footer .secondary.save-btn:hover,
.kairos-modal .modal-content .modal-footer .primary.modal-button-primary:hover,
.kairos-modal .modal-content .modal-footer .primary.primary:hover,
.kairos-modal .modal-content .modal-footer .primary.primary-btn:hover,
.kairos-modal .modal-content .modal-footer .primary.submit-btn:hover,
.kairos-modal .modal-content .modal-footer .primary.create-btn:hover,
.kairos-modal .modal-content .modal-footer .primary.save-btn:hover,
.kairos-modal .modal-content .modal-actions button.modal-button-primary:hover,
.kairos-modal .modal-content .modal-actions button.primary:hover,
.kairos-modal .modal-content .modal-actions button.primary-btn:hover,
.kairos-modal .modal-content .modal-actions button.submit-btn:hover,
.kairos-modal .modal-content .modal-actions button.create-btn:hover,
.kairos-modal .modal-content .modal-actions button.save-btn:hover,
.kairos-modal .modal-content .modal-actions .ceramic-button.modal-button-primary:hover,
.kairos-modal .modal-content .modal-actions .modal-button-primary.quick-create-btn:hover,
.kairos-modal .modal-content .modal-actions .ceramic-button.primary:hover,
.kairos-modal .modal-content .modal-actions .primary.quick-create-btn:hover,
.kairos-modal .modal-content .modal-actions .ceramic-button.primary-btn:hover,
.kairos-modal .modal-content .modal-actions .primary-btn.quick-create-btn:hover,
.kairos-modal .modal-content .modal-actions .ceramic-button.submit-btn:hover,
.kairos-modal .modal-content .modal-actions .submit-btn.quick-create-btn:hover,
.kairos-modal .modal-content .modal-actions .ceramic-button.create-btn:hover,
.kairos-modal .modal-content .modal-actions .create-btn.quick-create-btn:hover,
.kairos-modal .modal-content .modal-actions .ceramic-button.save-btn:hover,
.kairos-modal .modal-content .modal-actions .save-btn.quick-create-btn:hover,
.kairos-modal .modal-content .modal-actions .modal-button.modal-button-primary:hover,
.kairos-modal .modal-content .modal-actions .modal-button.primary:hover,
.kairos-modal .modal-content .modal-actions .modal-button.primary-btn:hover,
.kairos-modal .modal-content .modal-actions .modal-button.submit-btn:hover,
.kairos-modal .modal-content .modal-actions .modal-button.create-btn:hover,
.kairos-modal .modal-content .modal-actions .modal-button.save-btn:hover,
.kairos-modal .modal-content .modal-actions .modal-button-secondary.modal-button-primary:hover,
.kairos-modal .modal-content .modal-actions .modal-button-secondary.primary:hover,
.kairos-modal .modal-content .modal-actions .modal-button-secondary.primary-btn:hover,
.kairos-modal .modal-content .modal-actions .modal-button-secondary.submit-btn:hover,
.kairos-modal .modal-content .modal-actions .modal-button-secondary.create-btn:hover,
.kairos-modal .modal-content .modal-actions .modal-button-secondary.save-btn:hover,
.kairos-modal .modal-content .modal-actions .modal-button-primary.modal-button-primary:hover,
.kairos-modal .modal-content .modal-actions .modal-button-primary.primary:hover,
.kairos-modal .modal-content .modal-actions .modal-button-primary.primary-btn:hover,
.kairos-modal .modal-content .modal-actions .modal-button-primary.submit-btn:hover,
.kairos-modal .modal-content .modal-actions .modal-button-primary.create-btn:hover,
.kairos-modal .modal-content .modal-actions .modal-button-primary.save-btn:hover,
.kairos-modal .modal-content .modal-actions .cancel-btn.modal-button-primary:hover,
.kairos-modal .modal-content .modal-actions .cancel-btn.primary:hover,
.kairos-modal .modal-content .modal-actions .cancel-btn.primary-btn:hover,
.kairos-modal .modal-content .modal-actions .cancel-btn.submit-btn:hover,
.kairos-modal .modal-content .modal-actions .cancel-btn.create-btn:hover,
.kairos-modal .modal-content .modal-actions .cancel-btn.save-btn:hover,
.kairos-modal .modal-content .modal-actions .submit-btn.modal-button-primary:hover,
.kairos-modal .modal-content .modal-actions .submit-btn.primary:hover,
.kairos-modal .modal-content .modal-actions .submit-btn.primary-btn:hover,
.kairos-modal .modal-content .modal-actions .submit-btn.submit-btn:hover,
.kairos-modal .modal-content .modal-actions .submit-btn.create-btn:hover,
.kairos-modal .modal-content .modal-actions .submit-btn.save-btn:hover,
.kairos-modal .modal-content .modal-actions .primary-btn.modal-button-primary:hover,
.kairos-modal .modal-content .modal-actions .primary-btn.primary:hover,
.kairos-modal .modal-content .modal-actions .primary-btn.primary-btn:hover,
.kairos-modal .modal-content .modal-actions .primary-btn.submit-btn:hover,
.kairos-modal .modal-content .modal-actions .primary-btn.create-btn:hover,
.kairos-modal .modal-content .modal-actions .primary-btn.save-btn:hover,
.kairos-modal .modal-content .modal-actions .secondary.modal-button-primary:hover,
.kairos-modal .modal-content .modal-actions .secondary.primary:hover,
.kairos-modal .modal-content .modal-actions .secondary.primary-btn:hover,
.kairos-modal .modal-content .modal-actions .secondary.submit-btn:hover,
.kairos-modal .modal-content .modal-actions .secondary.create-btn:hover,
.kairos-modal .modal-content .modal-actions .secondary.save-btn:hover,
.kairos-modal .modal-content .modal-actions .primary.modal-button-primary:hover,
.kairos-modal .modal-content .modal-actions .primary.primary:hover,
.kairos-modal .modal-content .modal-actions .primary.primary-btn:hover,
.kairos-modal .modal-content .modal-actions .primary.submit-btn:hover,
.kairos-modal .modal-content .modal-actions .primary.create-btn:hover,
.kairos-modal .modal-content .modal-actions .primary.save-btn:hover {
  background: #78716C;
}
.modal .modal-content .modal-footer button.modal-button-primary:active, .modal .modal-content .modal-footer button.primary:active, .modal .modal-content .modal-footer button.primary-btn:active, .modal .modal-content .modal-footer button.submit-btn:active, .modal .modal-content .modal-footer button.create-btn:active, .modal .modal-content .modal-footer button.save-btn:active,
.modal .modal-content .modal-footer .ceramic-button.modal-button-primary:active,
.modal .modal-content .modal-footer .modal-button-primary.quick-create-btn:active,
.modal .modal-content .modal-footer .ceramic-button.primary:active,
.modal .modal-content .modal-footer .primary.quick-create-btn:active,
.modal .modal-content .modal-footer .ceramic-button.primary-btn:active,
.modal .modal-content .modal-footer .primary-btn.quick-create-btn:active,
.modal .modal-content .modal-footer .ceramic-button.submit-btn:active,
.modal .modal-content .modal-footer .submit-btn.quick-create-btn:active,
.modal .modal-content .modal-footer .ceramic-button.create-btn:active,
.modal .modal-content .modal-footer .create-btn.quick-create-btn:active,
.modal .modal-content .modal-footer .ceramic-button.save-btn:active,
.modal .modal-content .modal-footer .save-btn.quick-create-btn:active,
.modal .modal-content .modal-footer .modal-button.modal-button-primary:active,
.modal .modal-content .modal-footer .modal-button.primary:active,
.modal .modal-content .modal-footer .modal-button.primary-btn:active,
.modal .modal-content .modal-footer .modal-button.submit-btn:active,
.modal .modal-content .modal-footer .modal-button.create-btn:active,
.modal .modal-content .modal-footer .modal-button.save-btn:active,
.modal .modal-content .modal-footer .modal-button-secondary.modal-button-primary:active,
.modal .modal-content .modal-footer .modal-button-secondary.primary:active,
.modal .modal-content .modal-footer .modal-button-secondary.primary-btn:active,
.modal .modal-content .modal-footer .modal-button-secondary.submit-btn:active,
.modal .modal-content .modal-footer .modal-button-secondary.create-btn:active,
.modal .modal-content .modal-footer .modal-button-secondary.save-btn:active,
.modal .modal-content .modal-footer .modal-button-primary.modal-button-primary:active,
.modal .modal-content .modal-footer .modal-button-primary.primary:active,
.modal .modal-content .modal-footer .modal-button-primary.primary-btn:active,
.modal .modal-content .modal-footer .modal-button-primary.submit-btn:active,
.modal .modal-content .modal-footer .modal-button-primary.create-btn:active,
.modal .modal-content .modal-footer .modal-button-primary.save-btn:active,
.modal .modal-content .modal-footer .cancel-btn.modal-button-primary:active,
.modal .modal-content .modal-footer .cancel-btn.primary:active,
.modal .modal-content .modal-footer .cancel-btn.primary-btn:active,
.modal .modal-content .modal-footer .cancel-btn.submit-btn:active,
.modal .modal-content .modal-footer .cancel-btn.create-btn:active,
.modal .modal-content .modal-footer .cancel-btn.save-btn:active,
.modal .modal-content .modal-footer .submit-btn.modal-button-primary:active,
.modal .modal-content .modal-footer .submit-btn.primary:active,
.modal .modal-content .modal-footer .submit-btn.primary-btn:active,
.modal .modal-content .modal-footer .submit-btn.submit-btn:active,
.modal .modal-content .modal-footer .submit-btn.create-btn:active,
.modal .modal-content .modal-footer .submit-btn.save-btn:active,
.modal .modal-content .modal-footer .primary-btn.modal-button-primary:active,
.modal .modal-content .modal-footer .primary-btn.primary:active,
.modal .modal-content .modal-footer .primary-btn.primary-btn:active,
.modal .modal-content .modal-footer .primary-btn.submit-btn:active,
.modal .modal-content .modal-footer .primary-btn.create-btn:active,
.modal .modal-content .modal-footer .primary-btn.save-btn:active,
.modal .modal-content .modal-footer .secondary.modal-button-primary:active,
.modal .modal-content .modal-footer .secondary.primary:active,
.modal .modal-content .modal-footer .secondary.primary-btn:active,
.modal .modal-content .modal-footer .secondary.submit-btn:active,
.modal .modal-content .modal-footer .secondary.create-btn:active,
.modal .modal-content .modal-footer .secondary.save-btn:active,
.modal .modal-content .modal-footer .primary.modal-button-primary:active,
.modal .modal-content .modal-footer .primary.primary:active,
.modal .modal-content .modal-footer .primary.primary-btn:active,
.modal .modal-content .modal-footer .primary.submit-btn:active,
.modal .modal-content .modal-footer .primary.create-btn:active,
.modal .modal-content .modal-footer .primary.save-btn:active,
.modal .modal-content .modal-actions button.modal-button-primary:active,
.modal .modal-content .modal-actions button.primary:active,
.modal .modal-content .modal-actions button.primary-btn:active,
.modal .modal-content .modal-actions button.submit-btn:active,
.modal .modal-content .modal-actions button.create-btn:active,
.modal .modal-content .modal-actions button.save-btn:active,
.modal .modal-content .modal-actions .ceramic-button.modal-button-primary:active,
.modal .modal-content .modal-actions .modal-button-primary.quick-create-btn:active,
.modal .modal-content .modal-actions .ceramic-button.primary:active,
.modal .modal-content .modal-actions .primary.quick-create-btn:active,
.modal .modal-content .modal-actions .ceramic-button.primary-btn:active,
.modal .modal-content .modal-actions .primary-btn.quick-create-btn:active,
.modal .modal-content .modal-actions .ceramic-button.submit-btn:active,
.modal .modal-content .modal-actions .submit-btn.quick-create-btn:active,
.modal .modal-content .modal-actions .ceramic-button.create-btn:active,
.modal .modal-content .modal-actions .create-btn.quick-create-btn:active,
.modal .modal-content .modal-actions .ceramic-button.save-btn:active,
.modal .modal-content .modal-actions .save-btn.quick-create-btn:active,
.modal .modal-content .modal-actions .modal-button.modal-button-primary:active,
.modal .modal-content .modal-actions .modal-button.primary:active,
.modal .modal-content .modal-actions .modal-button.primary-btn:active,
.modal .modal-content .modal-actions .modal-button.submit-btn:active,
.modal .modal-content .modal-actions .modal-button.create-btn:active,
.modal .modal-content .modal-actions .modal-button.save-btn:active,
.modal .modal-content .modal-actions .modal-button-secondary.modal-button-primary:active,
.modal .modal-content .modal-actions .modal-button-secondary.primary:active,
.modal .modal-content .modal-actions .modal-button-secondary.primary-btn:active,
.modal .modal-content .modal-actions .modal-button-secondary.submit-btn:active,
.modal .modal-content .modal-actions .modal-button-secondary.create-btn:active,
.modal .modal-content .modal-actions .modal-button-secondary.save-btn:active,
.modal .modal-content .modal-actions .modal-button-primary.modal-button-primary:active,
.modal .modal-content .modal-actions .modal-button-primary.primary:active,
.modal .modal-content .modal-actions .modal-button-primary.primary-btn:active,
.modal .modal-content .modal-actions .modal-button-primary.submit-btn:active,
.modal .modal-content .modal-actions .modal-button-primary.create-btn:active,
.modal .modal-content .modal-actions .modal-button-primary.save-btn:active,
.modal .modal-content .modal-actions .cancel-btn.modal-button-primary:active,
.modal .modal-content .modal-actions .cancel-btn.primary:active,
.modal .modal-content .modal-actions .cancel-btn.primary-btn:active,
.modal .modal-content .modal-actions .cancel-btn.submit-btn:active,
.modal .modal-content .modal-actions .cancel-btn.create-btn:active,
.modal .modal-content .modal-actions .cancel-btn.save-btn:active,
.modal .modal-content .modal-actions .submit-btn.modal-button-primary:active,
.modal .modal-content .modal-actions .submit-btn.primary:active,
.modal .modal-content .modal-actions .submit-btn.primary-btn:active,
.modal .modal-content .modal-actions .submit-btn.submit-btn:active,
.modal .modal-content .modal-actions .submit-btn.create-btn:active,
.modal .modal-content .modal-actions .submit-btn.save-btn:active,
.modal .modal-content .modal-actions .primary-btn.modal-button-primary:active,
.modal .modal-content .modal-actions .primary-btn.primary:active,
.modal .modal-content .modal-actions .primary-btn.primary-btn:active,
.modal .modal-content .modal-actions .primary-btn.submit-btn:active,
.modal .modal-content .modal-actions .primary-btn.create-btn:active,
.modal .modal-content .modal-actions .primary-btn.save-btn:active,
.modal .modal-content .modal-actions .secondary.modal-button-primary:active,
.modal .modal-content .modal-actions .secondary.primary:active,
.modal .modal-content .modal-actions .secondary.primary-btn:active,
.modal .modal-content .modal-actions .secondary.submit-btn:active,
.modal .modal-content .modal-actions .secondary.create-btn:active,
.modal .modal-content .modal-actions .secondary.save-btn:active,
.modal .modal-content .modal-actions .primary.modal-button-primary:active,
.modal .modal-content .modal-actions .primary.primary:active,
.modal .modal-content .modal-actions .primary.primary-btn:active,
.modal .modal-content .modal-actions .primary.submit-btn:active,
.modal .modal-content .modal-actions .primary.create-btn:active,
.modal .modal-content .modal-actions .primary.save-btn:active,
.kairos-modal .modal-content .modal-footer button.modal-button-primary:active,
.kairos-modal .modal-content .modal-footer button.primary:active,
.kairos-modal .modal-content .modal-footer button.primary-btn:active,
.kairos-modal .modal-content .modal-footer button.submit-btn:active,
.kairos-modal .modal-content .modal-footer button.create-btn:active,
.kairos-modal .modal-content .modal-footer button.save-btn:active,
.kairos-modal .modal-content .modal-footer .ceramic-button.modal-button-primary:active,
.kairos-modal .modal-content .modal-footer .modal-button-primary.quick-create-btn:active,
.kairos-modal .modal-content .modal-footer .ceramic-button.primary:active,
.kairos-modal .modal-content .modal-footer .primary.quick-create-btn:active,
.kairos-modal .modal-content .modal-footer .ceramic-button.primary-btn:active,
.kairos-modal .modal-content .modal-footer .primary-btn.quick-create-btn:active,
.kairos-modal .modal-content .modal-footer .ceramic-button.submit-btn:active,
.kairos-modal .modal-content .modal-footer .submit-btn.quick-create-btn:active,
.kairos-modal .modal-content .modal-footer .ceramic-button.create-btn:active,
.kairos-modal .modal-content .modal-footer .create-btn.quick-create-btn:active,
.kairos-modal .modal-content .modal-footer .ceramic-button.save-btn:active,
.kairos-modal .modal-content .modal-footer .save-btn.quick-create-btn:active,
.kairos-modal .modal-content .modal-footer .modal-button.modal-button-primary:active,
.kairos-modal .modal-content .modal-footer .modal-button.primary:active,
.kairos-modal .modal-content .modal-footer .modal-button.primary-btn:active,
.kairos-modal .modal-content .modal-footer .modal-button.submit-btn:active,
.kairos-modal .modal-content .modal-footer .modal-button.create-btn:active,
.kairos-modal .modal-content .modal-footer .modal-button.save-btn:active,
.kairos-modal .modal-content .modal-footer .modal-button-secondary.modal-button-primary:active,
.kairos-modal .modal-content .modal-footer .modal-button-secondary.primary:active,
.kairos-modal .modal-content .modal-footer .modal-button-secondary.primary-btn:active,
.kairos-modal .modal-content .modal-footer .modal-button-secondary.submit-btn:active,
.kairos-modal .modal-content .modal-footer .modal-button-secondary.create-btn:active,
.kairos-modal .modal-content .modal-footer .modal-button-secondary.save-btn:active,
.kairos-modal .modal-content .modal-footer .modal-button-primary.modal-button-primary:active,
.kairos-modal .modal-content .modal-footer .modal-button-primary.primary:active,
.kairos-modal .modal-content .modal-footer .modal-button-primary.primary-btn:active,
.kairos-modal .modal-content .modal-footer .modal-button-primary.submit-btn:active,
.kairos-modal .modal-content .modal-footer .modal-button-primary.create-btn:active,
.kairos-modal .modal-content .modal-footer .modal-button-primary.save-btn:active,
.kairos-modal .modal-content .modal-footer .cancel-btn.modal-button-primary:active,
.kairos-modal .modal-content .modal-footer .cancel-btn.primary:active,
.kairos-modal .modal-content .modal-footer .cancel-btn.primary-btn:active,
.kairos-modal .modal-content .modal-footer .cancel-btn.submit-btn:active,
.kairos-modal .modal-content .modal-footer .cancel-btn.create-btn:active,
.kairos-modal .modal-content .modal-footer .cancel-btn.save-btn:active,
.kairos-modal .modal-content .modal-footer .submit-btn.modal-button-primary:active,
.kairos-modal .modal-content .modal-footer .submit-btn.primary:active,
.kairos-modal .modal-content .modal-footer .submit-btn.primary-btn:active,
.kairos-modal .modal-content .modal-footer .submit-btn.submit-btn:active,
.kairos-modal .modal-content .modal-footer .submit-btn.create-btn:active,
.kairos-modal .modal-content .modal-footer .submit-btn.save-btn:active,
.kairos-modal .modal-content .modal-footer .primary-btn.modal-button-primary:active,
.kairos-modal .modal-content .modal-footer .primary-btn.primary:active,
.kairos-modal .modal-content .modal-footer .primary-btn.primary-btn:active,
.kairos-modal .modal-content .modal-footer .primary-btn.submit-btn:active,
.kairos-modal .modal-content .modal-footer .primary-btn.create-btn:active,
.kairos-modal .modal-content .modal-footer .primary-btn.save-btn:active,
.kairos-modal .modal-content .modal-footer .secondary.modal-button-primary:active,
.kairos-modal .modal-content .modal-footer .secondary.primary:active,
.kairos-modal .modal-content .modal-footer .secondary.primary-btn:active,
.kairos-modal .modal-content .modal-footer .secondary.submit-btn:active,
.kairos-modal .modal-content .modal-footer .secondary.create-btn:active,
.kairos-modal .modal-content .modal-footer .secondary.save-btn:active,
.kairos-modal .modal-content .modal-footer .primary.modal-button-primary:active,
.kairos-modal .modal-content .modal-footer .primary.primary:active,
.kairos-modal .modal-content .modal-footer .primary.primary-btn:active,
.kairos-modal .modal-content .modal-footer .primary.submit-btn:active,
.kairos-modal .modal-content .modal-footer .primary.create-btn:active,
.kairos-modal .modal-content .modal-footer .primary.save-btn:active,
.kairos-modal .modal-content .modal-actions button.modal-button-primary:active,
.kairos-modal .modal-content .modal-actions button.primary:active,
.kairos-modal .modal-content .modal-actions button.primary-btn:active,
.kairos-modal .modal-content .modal-actions button.submit-btn:active,
.kairos-modal .modal-content .modal-actions button.create-btn:active,
.kairos-modal .modal-content .modal-actions button.save-btn:active,
.kairos-modal .modal-content .modal-actions .ceramic-button.modal-button-primary:active,
.kairos-modal .modal-content .modal-actions .modal-button-primary.quick-create-btn:active,
.kairos-modal .modal-content .modal-actions .ceramic-button.primary:active,
.kairos-modal .modal-content .modal-actions .primary.quick-create-btn:active,
.kairos-modal .modal-content .modal-actions .ceramic-button.primary-btn:active,
.kairos-modal .modal-content .modal-actions .primary-btn.quick-create-btn:active,
.kairos-modal .modal-content .modal-actions .ceramic-button.submit-btn:active,
.kairos-modal .modal-content .modal-actions .submit-btn.quick-create-btn:active,
.kairos-modal .modal-content .modal-actions .ceramic-button.create-btn:active,
.kairos-modal .modal-content .modal-actions .create-btn.quick-create-btn:active,
.kairos-modal .modal-content .modal-actions .ceramic-button.save-btn:active,
.kairos-modal .modal-content .modal-actions .save-btn.quick-create-btn:active,
.kairos-modal .modal-content .modal-actions .modal-button.modal-button-primary:active,
.kairos-modal .modal-content .modal-actions .modal-button.primary:active,
.kairos-modal .modal-content .modal-actions .modal-button.primary-btn:active,
.kairos-modal .modal-content .modal-actions .modal-button.submit-btn:active,
.kairos-modal .modal-content .modal-actions .modal-button.create-btn:active,
.kairos-modal .modal-content .modal-actions .modal-button.save-btn:active,
.kairos-modal .modal-content .modal-actions .modal-button-secondary.modal-button-primary:active,
.kairos-modal .modal-content .modal-actions .modal-button-secondary.primary:active,
.kairos-modal .modal-content .modal-actions .modal-button-secondary.primary-btn:active,
.kairos-modal .modal-content .modal-actions .modal-button-secondary.submit-btn:active,
.kairos-modal .modal-content .modal-actions .modal-button-secondary.create-btn:active,
.kairos-modal .modal-content .modal-actions .modal-button-secondary.save-btn:active,
.kairos-modal .modal-content .modal-actions .modal-button-primary.modal-button-primary:active,
.kairos-modal .modal-content .modal-actions .modal-button-primary.primary:active,
.kairos-modal .modal-content .modal-actions .modal-button-primary.primary-btn:active,
.kairos-modal .modal-content .modal-actions .modal-button-primary.submit-btn:active,
.kairos-modal .modal-content .modal-actions .modal-button-primary.create-btn:active,
.kairos-modal .modal-content .modal-actions .modal-button-primary.save-btn:active,
.kairos-modal .modal-content .modal-actions .cancel-btn.modal-button-primary:active,
.kairos-modal .modal-content .modal-actions .cancel-btn.primary:active,
.kairos-modal .modal-content .modal-actions .cancel-btn.primary-btn:active,
.kairos-modal .modal-content .modal-actions .cancel-btn.submit-btn:active,
.kairos-modal .modal-content .modal-actions .cancel-btn.create-btn:active,
.kairos-modal .modal-content .modal-actions .cancel-btn.save-btn:active,
.kairos-modal .modal-content .modal-actions .submit-btn.modal-button-primary:active,
.kairos-modal .modal-content .modal-actions .submit-btn.primary:active,
.kairos-modal .modal-content .modal-actions .submit-btn.primary-btn:active,
.kairos-modal .modal-content .modal-actions .submit-btn.submit-btn:active,
.kairos-modal .modal-content .modal-actions .submit-btn.create-btn:active,
.kairos-modal .modal-content .modal-actions .submit-btn.save-btn:active,
.kairos-modal .modal-content .modal-actions .primary-btn.modal-button-primary:active,
.kairos-modal .modal-content .modal-actions .primary-btn.primary:active,
.kairos-modal .modal-content .modal-actions .primary-btn.primary-btn:active,
.kairos-modal .modal-content .modal-actions .primary-btn.submit-btn:active,
.kairos-modal .modal-content .modal-actions .primary-btn.create-btn:active,
.kairos-modal .modal-content .modal-actions .primary-btn.save-btn:active,
.kairos-modal .modal-content .modal-actions .secondary.modal-button-primary:active,
.kairos-modal .modal-content .modal-actions .secondary.primary:active,
.kairos-modal .modal-content .modal-actions .secondary.primary-btn:active,
.kairos-modal .modal-content .modal-actions .secondary.submit-btn:active,
.kairos-modal .modal-content .modal-actions .secondary.create-btn:active,
.kairos-modal .modal-content .modal-actions .secondary.save-btn:active,
.kairos-modal .modal-content .modal-actions .primary.modal-button-primary:active,
.kairos-modal .modal-content .modal-actions .primary.primary:active,
.kairos-modal .modal-content .modal-actions .primary.primary-btn:active,
.kairos-modal .modal-content .modal-actions .primary.submit-btn:active,
.kairos-modal .modal-content .modal-actions .primary.create-btn:active,
.kairos-modal .modal-content .modal-actions .primary.save-btn:active {
  background: #44403C;
}
.modal .modal-content .modal-footer button.modal-button-primary:disabled, .modal .modal-content .modal-footer button.primary:disabled, .modal .modal-content .modal-footer button.primary-btn:disabled, .modal .modal-content .modal-footer button.submit-btn:disabled, .modal .modal-content .modal-footer button.create-btn:disabled, .modal .modal-content .modal-footer button.save-btn:disabled,
.modal .modal-content .modal-footer .ceramic-button.modal-button-primary:disabled,
.modal .modal-content .modal-footer .modal-button-primary.quick-create-btn:disabled,
.modal .modal-content .modal-footer .ceramic-button.primary:disabled,
.modal .modal-content .modal-footer .primary.quick-create-btn:disabled,
.modal .modal-content .modal-footer .ceramic-button.primary-btn:disabled,
.modal .modal-content .modal-footer .primary-btn.quick-create-btn:disabled,
.modal .modal-content .modal-footer .ceramic-button.submit-btn:disabled,
.modal .modal-content .modal-footer .submit-btn.quick-create-btn:disabled,
.modal .modal-content .modal-footer .ceramic-button.create-btn:disabled,
.modal .modal-content .modal-footer .create-btn.quick-create-btn:disabled,
.modal .modal-content .modal-footer .ceramic-button.save-btn:disabled,
.modal .modal-content .modal-footer .save-btn.quick-create-btn:disabled,
.modal .modal-content .modal-footer .modal-button.modal-button-primary:disabled,
.modal .modal-content .modal-footer .modal-button.primary:disabled,
.modal .modal-content .modal-footer .modal-button.primary-btn:disabled,
.modal .modal-content .modal-footer .modal-button.submit-btn:disabled,
.modal .modal-content .modal-footer .modal-button.create-btn:disabled,
.modal .modal-content .modal-footer .modal-button.save-btn:disabled,
.modal .modal-content .modal-footer .modal-button-secondary.modal-button-primary:disabled,
.modal .modal-content .modal-footer .modal-button-secondary.primary:disabled,
.modal .modal-content .modal-footer .modal-button-secondary.primary-btn:disabled,
.modal .modal-content .modal-footer .modal-button-secondary.submit-btn:disabled,
.modal .modal-content .modal-footer .modal-button-secondary.create-btn:disabled,
.modal .modal-content .modal-footer .modal-button-secondary.save-btn:disabled,
.modal .modal-content .modal-footer .modal-button-primary.modal-button-primary:disabled,
.modal .modal-content .modal-footer .modal-button-primary.primary:disabled,
.modal .modal-content .modal-footer .modal-button-primary.primary-btn:disabled,
.modal .modal-content .modal-footer .modal-button-primary.submit-btn:disabled,
.modal .modal-content .modal-footer .modal-button-primary.create-btn:disabled,
.modal .modal-content .modal-footer .modal-button-primary.save-btn:disabled,
.modal .modal-content .modal-footer .cancel-btn.modal-button-primary:disabled,
.modal .modal-content .modal-footer .cancel-btn.primary:disabled,
.modal .modal-content .modal-footer .cancel-btn.primary-btn:disabled,
.modal .modal-content .modal-footer .cancel-btn.submit-btn:disabled,
.modal .modal-content .modal-footer .cancel-btn.create-btn:disabled,
.modal .modal-content .modal-footer .cancel-btn.save-btn:disabled,
.modal .modal-content .modal-footer .submit-btn.modal-button-primary:disabled,
.modal .modal-content .modal-footer .submit-btn.primary:disabled,
.modal .modal-content .modal-footer .submit-btn.primary-btn:disabled,
.modal .modal-content .modal-footer .submit-btn.submit-btn:disabled,
.modal .modal-content .modal-footer .submit-btn.create-btn:disabled,
.modal .modal-content .modal-footer .submit-btn.save-btn:disabled,
.modal .modal-content .modal-footer .primary-btn.modal-button-primary:disabled,
.modal .modal-content .modal-footer .primary-btn.primary:disabled,
.modal .modal-content .modal-footer .primary-btn.primary-btn:disabled,
.modal .modal-content .modal-footer .primary-btn.submit-btn:disabled,
.modal .modal-content .modal-footer .primary-btn.create-btn:disabled,
.modal .modal-content .modal-footer .primary-btn.save-btn:disabled,
.modal .modal-content .modal-footer .secondary.modal-button-primary:disabled,
.modal .modal-content .modal-footer .secondary.primary:disabled,
.modal .modal-content .modal-footer .secondary.primary-btn:disabled,
.modal .modal-content .modal-footer .secondary.submit-btn:disabled,
.modal .modal-content .modal-footer .secondary.create-btn:disabled,
.modal .modal-content .modal-footer .secondary.save-btn:disabled,
.modal .modal-content .modal-footer .primary.modal-button-primary:disabled,
.modal .modal-content .modal-footer .primary.primary:disabled,
.modal .modal-content .modal-footer .primary.primary-btn:disabled,
.modal .modal-content .modal-footer .primary.submit-btn:disabled,
.modal .modal-content .modal-footer .primary.create-btn:disabled,
.modal .modal-content .modal-footer .primary.save-btn:disabled,
.modal .modal-content .modal-actions button.modal-button-primary:disabled,
.modal .modal-content .modal-actions button.primary:disabled,
.modal .modal-content .modal-actions button.primary-btn:disabled,
.modal .modal-content .modal-actions button.submit-btn:disabled,
.modal .modal-content .modal-actions button.create-btn:disabled,
.modal .modal-content .modal-actions button.save-btn:disabled,
.modal .modal-content .modal-actions .ceramic-button.modal-button-primary:disabled,
.modal .modal-content .modal-actions .modal-button-primary.quick-create-btn:disabled,
.modal .modal-content .modal-actions .ceramic-button.primary:disabled,
.modal .modal-content .modal-actions .primary.quick-create-btn:disabled,
.modal .modal-content .modal-actions .ceramic-button.primary-btn:disabled,
.modal .modal-content .modal-actions .primary-btn.quick-create-btn:disabled,
.modal .modal-content .modal-actions .ceramic-button.submit-btn:disabled,
.modal .modal-content .modal-actions .submit-btn.quick-create-btn:disabled,
.modal .modal-content .modal-actions .ceramic-button.create-btn:disabled,
.modal .modal-content .modal-actions .create-btn.quick-create-btn:disabled,
.modal .modal-content .modal-actions .ceramic-button.save-btn:disabled,
.modal .modal-content .modal-actions .save-btn.quick-create-btn:disabled,
.modal .modal-content .modal-actions .modal-button.modal-button-primary:disabled,
.modal .modal-content .modal-actions .modal-button.primary:disabled,
.modal .modal-content .modal-actions .modal-button.primary-btn:disabled,
.modal .modal-content .modal-actions .modal-button.submit-btn:disabled,
.modal .modal-content .modal-actions .modal-button.create-btn:disabled,
.modal .modal-content .modal-actions .modal-button.save-btn:disabled,
.modal .modal-content .modal-actions .modal-button-secondary.modal-button-primary:disabled,
.modal .modal-content .modal-actions .modal-button-secondary.primary:disabled,
.modal .modal-content .modal-actions .modal-button-secondary.primary-btn:disabled,
.modal .modal-content .modal-actions .modal-button-secondary.submit-btn:disabled,
.modal .modal-content .modal-actions .modal-button-secondary.create-btn:disabled,
.modal .modal-content .modal-actions .modal-button-secondary.save-btn:disabled,
.modal .modal-content .modal-actions .modal-button-primary.modal-button-primary:disabled,
.modal .modal-content .modal-actions .modal-button-primary.primary:disabled,
.modal .modal-content .modal-actions .modal-button-primary.primary-btn:disabled,
.modal .modal-content .modal-actions .modal-button-primary.submit-btn:disabled,
.modal .modal-content .modal-actions .modal-button-primary.create-btn:disabled,
.modal .modal-content .modal-actions .modal-button-primary.save-btn:disabled,
.modal .modal-content .modal-actions .cancel-btn.modal-button-primary:disabled,
.modal .modal-content .modal-actions .cancel-btn.primary:disabled,
.modal .modal-content .modal-actions .cancel-btn.primary-btn:disabled,
.modal .modal-content .modal-actions .cancel-btn.submit-btn:disabled,
.modal .modal-content .modal-actions .cancel-btn.create-btn:disabled,
.modal .modal-content .modal-actions .cancel-btn.save-btn:disabled,
.modal .modal-content .modal-actions .submit-btn.modal-button-primary:disabled,
.modal .modal-content .modal-actions .submit-btn.primary:disabled,
.modal .modal-content .modal-actions .submit-btn.primary-btn:disabled,
.modal .modal-content .modal-actions .submit-btn.submit-btn:disabled,
.modal .modal-content .modal-actions .submit-btn.create-btn:disabled,
.modal .modal-content .modal-actions .submit-btn.save-btn:disabled,
.modal .modal-content .modal-actions .primary-btn.modal-button-primary:disabled,
.modal .modal-content .modal-actions .primary-btn.primary:disabled,
.modal .modal-content .modal-actions .primary-btn.primary-btn:disabled,
.modal .modal-content .modal-actions .primary-btn.submit-btn:disabled,
.modal .modal-content .modal-actions .primary-btn.create-btn:disabled,
.modal .modal-content .modal-actions .primary-btn.save-btn:disabled,
.modal .modal-content .modal-actions .secondary.modal-button-primary:disabled,
.modal .modal-content .modal-actions .secondary.primary:disabled,
.modal .modal-content .modal-actions .secondary.primary-btn:disabled,
.modal .modal-content .modal-actions .secondary.submit-btn:disabled,
.modal .modal-content .modal-actions .secondary.create-btn:disabled,
.modal .modal-content .modal-actions .secondary.save-btn:disabled,
.modal .modal-content .modal-actions .primary.modal-button-primary:disabled,
.modal .modal-content .modal-actions .primary.primary:disabled,
.modal .modal-content .modal-actions .primary.primary-btn:disabled,
.modal .modal-content .modal-actions .primary.submit-btn:disabled,
.modal .modal-content .modal-actions .primary.create-btn:disabled,
.modal .modal-content .modal-actions .primary.save-btn:disabled,
.kairos-modal .modal-content .modal-footer button.modal-button-primary:disabled,
.kairos-modal .modal-content .modal-footer button.primary:disabled,
.kairos-modal .modal-content .modal-footer button.primary-btn:disabled,
.kairos-modal .modal-content .modal-footer button.submit-btn:disabled,
.kairos-modal .modal-content .modal-footer button.create-btn:disabled,
.kairos-modal .modal-content .modal-footer button.save-btn:disabled,
.kairos-modal .modal-content .modal-footer .ceramic-button.modal-button-primary:disabled,
.kairos-modal .modal-content .modal-footer .modal-button-primary.quick-create-btn:disabled,
.kairos-modal .modal-content .modal-footer .ceramic-button.primary:disabled,
.kairos-modal .modal-content .modal-footer .primary.quick-create-btn:disabled,
.kairos-modal .modal-content .modal-footer .ceramic-button.primary-btn:disabled,
.kairos-modal .modal-content .modal-footer .primary-btn.quick-create-btn:disabled,
.kairos-modal .modal-content .modal-footer .ceramic-button.submit-btn:disabled,
.kairos-modal .modal-content .modal-footer .submit-btn.quick-create-btn:disabled,
.kairos-modal .modal-content .modal-footer .ceramic-button.create-btn:disabled,
.kairos-modal .modal-content .modal-footer .create-btn.quick-create-btn:disabled,
.kairos-modal .modal-content .modal-footer .ceramic-button.save-btn:disabled,
.kairos-modal .modal-content .modal-footer .save-btn.quick-create-btn:disabled,
.kairos-modal .modal-content .modal-footer .modal-button.modal-button-primary:disabled,
.kairos-modal .modal-content .modal-footer .modal-button.primary:disabled,
.kairos-modal .modal-content .modal-footer .modal-button.primary-btn:disabled,
.kairos-modal .modal-content .modal-footer .modal-button.submit-btn:disabled,
.kairos-modal .modal-content .modal-footer .modal-button.create-btn:disabled,
.kairos-modal .modal-content .modal-footer .modal-button.save-btn:disabled,
.kairos-modal .modal-content .modal-footer .modal-button-secondary.modal-button-primary:disabled,
.kairos-modal .modal-content .modal-footer .modal-button-secondary.primary:disabled,
.kairos-modal .modal-content .modal-footer .modal-button-secondary.primary-btn:disabled,
.kairos-modal .modal-content .modal-footer .modal-button-secondary.submit-btn:disabled,
.kairos-modal .modal-content .modal-footer .modal-button-secondary.create-btn:disabled,
.kairos-modal .modal-content .modal-footer .modal-button-secondary.save-btn:disabled,
.kairos-modal .modal-content .modal-footer .modal-button-primary.modal-button-primary:disabled,
.kairos-modal .modal-content .modal-footer .modal-button-primary.primary:disabled,
.kairos-modal .modal-content .modal-footer .modal-button-primary.primary-btn:disabled,
.kairos-modal .modal-content .modal-footer .modal-button-primary.submit-btn:disabled,
.kairos-modal .modal-content .modal-footer .modal-button-primary.create-btn:disabled,
.kairos-modal .modal-content .modal-footer .modal-button-primary.save-btn:disabled,
.kairos-modal .modal-content .modal-footer .cancel-btn.modal-button-primary:disabled,
.kairos-modal .modal-content .modal-footer .cancel-btn.primary:disabled,
.kairos-modal .modal-content .modal-footer .cancel-btn.primary-btn:disabled,
.kairos-modal .modal-content .modal-footer .cancel-btn.submit-btn:disabled,
.kairos-modal .modal-content .modal-footer .cancel-btn.create-btn:disabled,
.kairos-modal .modal-content .modal-footer .cancel-btn.save-btn:disabled,
.kairos-modal .modal-content .modal-footer .submit-btn.modal-button-primary:disabled,
.kairos-modal .modal-content .modal-footer .submit-btn.primary:disabled,
.kairos-modal .modal-content .modal-footer .submit-btn.primary-btn:disabled,
.kairos-modal .modal-content .modal-footer .submit-btn.submit-btn:disabled,
.kairos-modal .modal-content .modal-footer .submit-btn.create-btn:disabled,
.kairos-modal .modal-content .modal-footer .submit-btn.save-btn:disabled,
.kairos-modal .modal-content .modal-footer .primary-btn.modal-button-primary:disabled,
.kairos-modal .modal-content .modal-footer .primary-btn.primary:disabled,
.kairos-modal .modal-content .modal-footer .primary-btn.primary-btn:disabled,
.kairos-modal .modal-content .modal-footer .primary-btn.submit-btn:disabled,
.kairos-modal .modal-content .modal-footer .primary-btn.create-btn:disabled,
.kairos-modal .modal-content .modal-footer .primary-btn.save-btn:disabled,
.kairos-modal .modal-content .modal-footer .secondary.modal-button-primary:disabled,
.kairos-modal .modal-content .modal-footer .secondary.primary:disabled,
.kairos-modal .modal-content .modal-footer .secondary.primary-btn:disabled,
.kairos-modal .modal-content .modal-footer .secondary.submit-btn:disabled,
.kairos-modal .modal-content .modal-footer .secondary.create-btn:disabled,
.kairos-modal .modal-content .modal-footer .secondary.save-btn:disabled,
.kairos-modal .modal-content .modal-footer .primary.modal-button-primary:disabled,
.kairos-modal .modal-content .modal-footer .primary.primary:disabled,
.kairos-modal .modal-content .modal-footer .primary.primary-btn:disabled,
.kairos-modal .modal-content .modal-footer .primary.submit-btn:disabled,
.kairos-modal .modal-content .modal-footer .primary.create-btn:disabled,
.kairos-modal .modal-content .modal-footer .primary.save-btn:disabled,
.kairos-modal .modal-content .modal-actions button.modal-button-primary:disabled,
.kairos-modal .modal-content .modal-actions button.primary:disabled,
.kairos-modal .modal-content .modal-actions button.primary-btn:disabled,
.kairos-modal .modal-content .modal-actions button.submit-btn:disabled,
.kairos-modal .modal-content .modal-actions button.create-btn:disabled,
.kairos-modal .modal-content .modal-actions button.save-btn:disabled,
.kairos-modal .modal-content .modal-actions .ceramic-button.modal-button-primary:disabled,
.kairos-modal .modal-content .modal-actions .modal-button-primary.quick-create-btn:disabled,
.kairos-modal .modal-content .modal-actions .ceramic-button.primary:disabled,
.kairos-modal .modal-content .modal-actions .primary.quick-create-btn:disabled,
.kairos-modal .modal-content .modal-actions .ceramic-button.primary-btn:disabled,
.kairos-modal .modal-content .modal-actions .primary-btn.quick-create-btn:disabled,
.kairos-modal .modal-content .modal-actions .ceramic-button.submit-btn:disabled,
.kairos-modal .modal-content .modal-actions .submit-btn.quick-create-btn:disabled,
.kairos-modal .modal-content .modal-actions .ceramic-button.create-btn:disabled,
.kairos-modal .modal-content .modal-actions .create-btn.quick-create-btn:disabled,
.kairos-modal .modal-content .modal-actions .ceramic-button.save-btn:disabled,
.kairos-modal .modal-content .modal-actions .save-btn.quick-create-btn:disabled,
.kairos-modal .modal-content .modal-actions .modal-button.modal-button-primary:disabled,
.kairos-modal .modal-content .modal-actions .modal-button.primary:disabled,
.kairos-modal .modal-content .modal-actions .modal-button.primary-btn:disabled,
.kairos-modal .modal-content .modal-actions .modal-button.submit-btn:disabled,
.kairos-modal .modal-content .modal-actions .modal-button.create-btn:disabled,
.kairos-modal .modal-content .modal-actions .modal-button.save-btn:disabled,
.kairos-modal .modal-content .modal-actions .modal-button-secondary.modal-button-primary:disabled,
.kairos-modal .modal-content .modal-actions .modal-button-secondary.primary:disabled,
.kairos-modal .modal-content .modal-actions .modal-button-secondary.primary-btn:disabled,
.kairos-modal .modal-content .modal-actions .modal-button-secondary.submit-btn:disabled,
.kairos-modal .modal-content .modal-actions .modal-button-secondary.create-btn:disabled,
.kairos-modal .modal-content .modal-actions .modal-button-secondary.save-btn:disabled,
.kairos-modal .modal-content .modal-actions .modal-button-primary.modal-button-primary:disabled,
.kairos-modal .modal-content .modal-actions .modal-button-primary.primary:disabled,
.kairos-modal .modal-content .modal-actions .modal-button-primary.primary-btn:disabled,
.kairos-modal .modal-content .modal-actions .modal-button-primary.submit-btn:disabled,
.kairos-modal .modal-content .modal-actions .modal-button-primary.create-btn:disabled,
.kairos-modal .modal-content .modal-actions .modal-button-primary.save-btn:disabled,
.kairos-modal .modal-content .modal-actions .cancel-btn.modal-button-primary:disabled,
.kairos-modal .modal-content .modal-actions .cancel-btn.primary:disabled,
.kairos-modal .modal-content .modal-actions .cancel-btn.primary-btn:disabled,
.kairos-modal .modal-content .modal-actions .cancel-btn.submit-btn:disabled,
.kairos-modal .modal-content .modal-actions .cancel-btn.create-btn:disabled,
.kairos-modal .modal-content .modal-actions .cancel-btn.save-btn:disabled,
.kairos-modal .modal-content .modal-actions .submit-btn.modal-button-primary:disabled,
.kairos-modal .modal-content .modal-actions .submit-btn.primary:disabled,
.kairos-modal .modal-content .modal-actions .submit-btn.primary-btn:disabled,
.kairos-modal .modal-content .modal-actions .submit-btn.submit-btn:disabled,
.kairos-modal .modal-content .modal-actions .submit-btn.create-btn:disabled,
.kairos-modal .modal-content .modal-actions .submit-btn.save-btn:disabled,
.kairos-modal .modal-content .modal-actions .primary-btn.modal-button-primary:disabled,
.kairos-modal .modal-content .modal-actions .primary-btn.primary:disabled,
.kairos-modal .modal-content .modal-actions .primary-btn.primary-btn:disabled,
.kairos-modal .modal-content .modal-actions .primary-btn.submit-btn:disabled,
.kairos-modal .modal-content .modal-actions .primary-btn.create-btn:disabled,
.kairos-modal .modal-content .modal-actions .primary-btn.save-btn:disabled,
.kairos-modal .modal-content .modal-actions .secondary.modal-button-primary:disabled,
.kairos-modal .modal-content .modal-actions .secondary.primary:disabled,
.kairos-modal .modal-content .modal-actions .secondary.primary-btn:disabled,
.kairos-modal .modal-content .modal-actions .secondary.submit-btn:disabled,
.kairos-modal .modal-content .modal-actions .secondary.create-btn:disabled,
.kairos-modal .modal-content .modal-actions .secondary.save-btn:disabled,
.kairos-modal .modal-content .modal-actions .primary.modal-button-primary:disabled,
.kairos-modal .modal-content .modal-actions .primary.primary:disabled,
.kairos-modal .modal-content .modal-actions .primary.primary-btn:disabled,
.kairos-modal .modal-content .modal-actions .primary.submit-btn:disabled,
.kairos-modal .modal-content .modal-actions .primary.create-btn:disabled,
.kairos-modal .modal-content .modal-actions .primary.save-btn:disabled {
  background: #E7E5E4;
  color: #A8A29E;
  cursor: not-allowed;
}
.modal.modal--medium .modal-content,
.kairos-modal.modal--medium .modal-content {
  width: min(520px, 100vw - 56px);
}
.modal.modal--large .modal-content,
.kairos-modal.modal--large .modal-content {
  width: min(640px, 100vw - 64px);
}
.modal.modal--full-height,
.kairos-modal.modal--full-height {
  align-items: flex-start;
}
.modal.modal--full-height .modal-content,
.kairos-modal.modal--full-height .modal-content {
  margin-top: 48px;
  max-height: calc(100vh - 96px);
}
.modal .modal-content--compact,
.kairos-modal .modal-content--compact {
  width: min(380px, 100vw - 32px);
  max-height: auto;
}
.modal .modal-footer--centered,
.kairos-modal .modal-footer--centered {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 16px 20px 20px;
}

#task-completion-modal .task-completion-info {
  text-align: center;
  padding: 8px 0;
}
#task-completion-modal .completion-message {
  font-size: 15px;
  color: #44403C;
  margin-bottom: 16px;
}
#task-completion-modal .completion-task-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #F5F5F4;
  padding: 12px 20px;
  border-radius: 8px;
  margin-bottom: 16px;
  max-width: 100%;
}
#task-completion-modal .completion-task-card .task-icon {
  font-size: 18px;
  flex-shrink: 0;
}
#task-completion-modal .completion-task-card .task-title {
  font-size: 14px;
  font-weight: 500;
  color: #1C1917;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#task-completion-modal .completion-question {
  font-size: 16px;
  font-weight: 500;
  color: #1C1917;
  margin: 0;
}
#task-completion-modal .complete-btn {
  background: #65A30D;
  color: white;
}
#task-completion-modal .complete-btn:hover {
  background: rgb(77.5863636364, 125.2136363636, 9.9863636364);
}

.onboarding-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  pointer-events: none;
}

.onboarding-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: auto;
}

.onboarding-spotlight {
  position: absolute;
  background: transparent;
  border-radius: 16px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 1;
}

.onboarding-tooltip {
  position: absolute;
  width: 320px;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 10px 15px rgba(87, 83, 78, 0.06), 0 4px 6px rgba(87, 83, 78, 0.07);
  pointer-events: auto;
  z-index: 2;
  animation: onboarding-fade-in 0.3s ease;
}

@keyframes onboarding-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.onboarding-tooltip-content {
  padding: 48px;
}

.onboarding-icon {
  font-size: 40px;
  text-align: center;
  margin-bottom: 24px;
}

.onboarding-title {
  font-size: 20px;
  font-weight: 600;
  color: #1C1917;
  margin: 0 0 16px 0;
  text-align: center;
}

.onboarding-description {
  font-size: 16px;
  color: #44403C;
  line-height: 1.6;
  margin: 0 0 32px 0;
  text-align: center;
}

.onboarding-progress {
  text-align: center;
  margin-bottom: 32px;
}

.onboarding-progress-text {
  font-size: 14px;
  color: #78716C;
}

.onboarding-actions {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.onboarding-skip {
  flex: 1;
  padding: 24px 32px;
  background: transparent;
  border: 1px solid #D6D3D1;
  border-radius: 16px;
  color: #44403C;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.onboarding-skip:hover {
  background: #F5F5F4;
  color: #1C1917;
}

.onboarding-next {
  flex: 1;
  padding: 24px 32px;
  background: #0891B2;
  border: none;
  border-radius: 16px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.onboarding-next:hover {
  background: rgb(6.2451612903, 113.1935483871, 138.9548387097);
}

.onboarding-arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #FFFFFF;
  transform: rotate(45deg);
}

.onboarding-tooltip[data-position=bottom] .onboarding-arrow {
  top: -6px;
  left: 50%;
  margin-left: -6px;
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05);
}

.onboarding-tooltip[data-position=top] .onboarding-arrow {
  bottom: -6px;
  left: 50%;
  margin-left: -6px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
}

.onboarding-tooltip[data-position=left] .onboarding-arrow {
  right: -6px;
  top: 50%;
  margin-top: -6px;
  box-shadow: 2px -2px 4px rgba(0, 0, 0, 0.05);
}

.onboarding-tooltip[data-position=right] .onboarding-arrow {
  left: -6px;
  top: 50%;
  margin-top: -6px;
  box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.05);
}

.settings-panel {
  padding: 32px;
  margin-top: 32px;
}

.settings-title {
  font-size: 18px;
  font-weight: 600;
  color: #1C1917;
  margin: 0 0 32px 0;
  padding-bottom: 16px;
  border-bottom: 1px solid #D6D3D1;
}

.settings-section {
  margin-bottom: 32px;
}
.settings-section:last-child {
  margin-bottom: 0;
}

.settings-section-title {
  font-size: 14px;
  font-weight: 500;
  color: #44403C;
  margin: 0 0 16px 0;
}

.settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}
.settings-item > label {
  font-size: 14px;
  color: #1C1917;
}
.settings-item.toggle-item {
  padding: 8px 0;
}

.settings-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-input-group input[type=number] {
  width: 60px;
  padding: 8px 16px;
  border: 1px solid #D6D3D1;
  border-radius: 12px;
  font-size: 14px;
  text-align: center;
  background: #FFFFFF;
  color: #1C1917;
}
.settings-input-group input[type=number]:focus {
  outline: none;
  border-color: #0891B2;
}

.settings-unit {
  font-size: 12px;
  color: #44403C;
}

.settings-select {
  padding: 8px 16px;
  border: 1px solid #D6D3D1;
  border-radius: 12px;
  font-size: 14px;
  background: #FFFFFF;
  color: #1C1917;
  cursor: pointer;
  min-width: 80px;
}
.settings-select:focus {
  outline: none;
  border-color: #0891B2;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #D6D3D1;
  transition: 0.2s;
  border-radius: 22px;
}
.toggle-slider::before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: #FFFFFF;
  transition: 0.2s;
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: #0891B2;
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px);
}

.settings-btn {
  width: 100%;
  padding: 16px 24px;
  margin-bottom: 16px;
  border: 1px solid #D6D3D1;
  border-radius: 12px;
  background: #FFFFFF;
  color: #1C1917;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.settings-btn:hover {
  background: #F5F5F4;
}
.settings-btn:last-child {
  margin-bottom: 0;
}
.settings-btn.settings-btn-danger {
  color: #DC2626;
  border-color: rgba(220, 38, 38, 0.3);
}
.settings-btn.settings-btn-danger:hover {
  background: rgba(220, 38, 38, 0.05);
}

.page-title {
  font-size: 30px; /* 2rem -> 标准30px */
  font-weight: 700;
  color: #1C1917;
  margin-bottom: 32px;
}

.ceramic-button, .quick-create-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 8px;
  cursor: pointer;
  transition: all 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ceramic-button:disabled, .quick-create-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ceramic-button, .quick-create-btn {
  background: #FFFFFF;
  color: #44403C;
  border: 1px solid #D6D3D1;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.ceramic-button:hover:not(:disabled), .quick-create-btn:hover:not(:disabled) {
  background: #FAFAF9;
  border-color: #A8A29E;
  color: #1C1917;
}
.ceramic-button, .quick-create-btn {
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ceramic-button:disabled, .quick-create-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (width <= 768px) {
  .task-view-switcher {
    display: none !important; /* 隐藏右上角视图切换器 */
  }
  .priority-matrix {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
  }
  .kanban-view {
    flex-direction: column;
  }
  .kanban-view .kanban-column {
    min-width: auto;
  }
  .boards-grid {
    grid-template-columns: 1fr;
  }
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
}

.achievement-modal {
  max-width: 900px;
  max-height: 80vh;
  width: 90vw;
}
.achievement-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.achievement-modal .modal-header h2 {
  margin: 0;
  font-size: 20px;
  color: #1C1917;
}
.achievement-modal .modal-header .modal-close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #44403C;
  padding: 4px;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.achievement-modal .modal-header .modal-close-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #1C1917;
}
.achievement-modal .modal-body {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(80vh - 120px);
}

.achievement-stats {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
}
.achievement-stats .stat-item {
  flex: 1;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #E7E5E4;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  padding: 24px;
  border-radius: 16px;
}
.achievement-stats .stat-item .stat-value {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: #D97706;
  margin-bottom: 4px;
}
.achievement-stats .stat-item .stat-label {
  font-size: 14px;
  color: #44403C;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.achievement-categories .category-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.achievement-categories .category-tabs .category-tab {
  background: none;
  border: none;
  padding: 16px 24px;
  font-size: 14px;
  color: #44403C;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  transition: all 0.2s ease;
  position: relative;
}
.achievement-categories .category-tabs .category-tab:hover {
  color: #1C1917;
  background: rgba(0, 0, 0, 0.05);
}
.achievement-categories .category-tabs .category-tab.active {
  color: #D97706;
  background: rgba(217, 119, 6, 0.1);
}
.achievement-categories .category-tabs .category-tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #D97706;
}

.personal-key-stats .stats-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.personal-key-stats .activity-stat-card {
  background: #FFFFFF;
  border: 1px solid #E7E5E4;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  padding: 24px;
  border-radius: 16px;
  transition: all 0.2s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.personal-key-stats .activity-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
}
.personal-key-stats .activity-stat-card .stat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.personal-key-stats .activity-stat-card .stat-header .stat-icon {
  font-size: 1.5rem;
  line-height: 1;
}
.personal-key-stats .activity-stat-card .stat-header .stat-title {
  font-size: 14px;
  font-weight: 500;
  color: #44403C;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.personal-key-stats .activity-stat-card .stat-content {
  text-align: center;
}
.personal-key-stats .activity-stat-card .stat-content .big-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: #0891B2;
  line-height: 1;
  margin-bottom: 4px;
}
.personal-key-stats .activity-stat-card .stat-content .stat-subtitle {
  font-size: 14px;
  color: #44403C;
  font-weight: 500;
}

.error-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
}

.error-dialog {
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 8px 16px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow: hidden;
  animation: error-dialog-slide-in 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  border: 1px solid #D6D3D1;
}

@keyframes error-dialog-slide-in {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.error-dialog-header {
  padding: 24px 32px 16px;
  border-bottom: 1px solid #D6D3D1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.error-dialog-header h3 {
  color: #DC2626;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.error-dialog-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #44403C;
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  transition: background-color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.error-dialog-close:hover {
  background-color: #F5F5F4;
}

.error-dialog-content {
  padding: 24px 32px;
}
.error-dialog-content .error-message {
  color: #1C1917;
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 16px;
}
.error-dialog-content .error-details {
  margin-top: 16px;
}
.error-dialog-content .error-details summary {
  color: #44403C;
  font-size: 14px;
  cursor: pointer;
  padding: 8px 0;
  border-top: 1px solid #D6D3D1;
  transition: color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.error-dialog-content .error-details summary:hover {
  color: #1C1917;
}
.error-dialog-content .error-stack {
  background: #FAFAF9;
  border: 1px solid #D6D3D1;
  border-radius: 8px;
  padding: 16px;
  font-family: Monaco, Menlo, "Ubuntu Mono", monospace;
  font-size: 12px;
  color: #1C1917;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 8px;
}

.error-dialog-actions {
  padding: 16px 32px 24px;
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  border-top: 1px solid #D6D3D1;
}
.error-dialog-actions button {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  border: 1px solid transparent;
}
.error-dialog-actions button.btn-secondary {
  background: #FAFAF9;
  border-color: #D6D3D1;
  color: #1C1917;
}
.error-dialog-actions button.btn-secondary:hover {
  background: #F5F5F4;
}
.error-dialog-actions button.btn-primary {
  background: #0891B2;
  border-color: #0891B2;
  color: #FFFFFF;
}
.error-dialog-actions button.btn-primary:hover {
  background: rgb(6.2451612903, 113.1935483871, 138.9548387097);
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.loading-overlay.active {
  opacity: 1;
  visibility: visible;
}

.loading-content {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 8px 16px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  border: 1px solid #D6D3D1;
  min-width: 200px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #D6D3D1;
  border-top: 3px solid #0891B2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}

.loading-text {
  color: #1C1917;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}

.loading-progress {
  width: 100%;
  height: 4px;
  background: #FAFAF9;
  border-radius: 2px;
  overflow: hidden;
  display: none;
}

.loading-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #0891B2, rgb(9.7548387097, 176.8064516129, 217.0451612903));
  border-radius: 2px;
  transition: width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  width: 0%;
}

.inline-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  color: #44403C;
}

.inline-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid #D6D3D1;
  border-top: 2px solid #0891B2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 8px;
}

.inline-text {
  font-size: 14px;
  color: #44403C;
}

.button-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentcolor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 8px;
}

button.loading {
  opacity: 0.7;
  cursor: not-allowed;
}
button.loading:hover {
  transform: none !important;
}

.skeleton-container {
  padding: 16px;
}

.skeleton-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}
.skeleton-item:last-child {
  margin-bottom: 0;
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(90deg, #FAFAF9 25%, #F5F5F4 50%, #FAFAF9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-content {
  flex: 1;
}

.skeleton-title {
  height: 16px;
  background: linear-gradient(90deg, #FAFAF9 25%, #F5F5F4 50%, #FAFAF9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
  margin-bottom: 8px;
  width: 70%;
}

.skeleton-text {
  height: 12px;
  background: linear-gradient(90deg, #FAFAF9 25%, #F5F5F4 50%, #FAFAF9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
  margin-bottom: 4px;
}
.skeleton-text.short {
  width: 40%;
}

.progress-bar-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #FFFFFF;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  min-width: 300px;
  z-index: 9998;
  display: none;
}

.progress-text {
  color: #1C1917;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  text-align: center;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #FAFAF9;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0891B2, rgb(9.7548387097, 176.8064516129, 217.0451612903));
  border-radius: 4px;
  transition: width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  width: 0%;
}

.progress-percentage {
  color: #44403C;
  font-size: 12px;
  text-align: center;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
#keyboard-help-modal .modal-content {
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
}
#keyboard-help-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid #D6D3D1;
}
#keyboard-help-modal .modal-header h3 {
  margin: 0;
  color: #1C1917;
  font-size: 18px;
  font-weight: 600;
}
#keyboard-help-modal .modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #44403C;
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
#keyboard-help-modal .modal-close:hover {
  background: #F5F5F4;
  color: #1C1917;
}
#keyboard-help-modal .modal-body {
  padding: 24px;
}

.shortcuts-table {
  width: 100%;
  border-collapse: collapse;
}
.shortcuts-table th, .shortcuts-table td {
  padding: 16px;
  text-align: left;
  border-bottom: 1px solid #D6D3D1;
}
.shortcuts-table th {
  background: #FAFAF9;
  color: #1C1917;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.shortcuts-table td {
  color: #1C1917;
  font-size: 14px;
}
.shortcuts-table .shortcut-key {
  font-family: Monaco, Menlo, "Ubuntu Mono", monospace;
  background: #FAFAF9;
  border-radius: 8px;
  padding: 4px 8px;
  font-weight: 500;
  color: #0891B2;
  white-space: nowrap;
  width: 30%;
}
.shortcuts-table .shortcut-description {
  color: #44403C;
}
.shortcuts-table tr:hover {
  background: #F5F5F4;
}

.keyboard-hint {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 8px 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 12px;
  color: #44403C;
  z-index: 1000;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.keyboard-hint.visible {
  opacity: 1;
  transform: translateY(0);
}
.keyboard-hint .hint-key {
  background: #FAFAF9;
  border-radius: 8px;
  padding: 2px 6px;
  font-family: Monaco, Menlo, "Ubuntu Mono", monospace;
  font-weight: 500;
  color: #0891B2;
  margin: 0 2px;
}

.board-context-menu {
  position: fixed;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(68, 64, 60, 0.1);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(28, 25, 23, 0.1);
  padding: 4px;
  min-width: 160px;
  z-index: 1000;
  opacity: 0;
  transform: scale(0.95) translateY(-5px);
  transition: all 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.board-context-menu.show {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.board-context-menu .menu-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  color: #1C1917;
  transition: all 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.board-context-menu .menu-item .menu-icon {
  margin-right: 8px;
  font-size: 14px;
  width: 16px;
  text-align: center;
}
.board-context-menu .menu-item:hover {
  background: rgba(8, 145, 178, 0.1);
  color: #0891B2;
}
.board-context-menu .menu-item.danger:hover {
  background: rgba(220, 38, 38, 0.1);
  color: #DC2626;
}
.board-context-menu .menu-item.starred .menu-icon {
  color: #D97706;
}
.board-context-menu .menu-divider {
  height: 1px;
  background: rgba(68, 64, 60, 0.1);
  margin: 4px 0;
}

#daily-summary-modal .modal-content {
  max-width: 700px;
  max-height: 85vh;
}
#daily-summary-modal .modal-header {
  background: linear-gradient(135deg, #0891B2 0%, #D97706 100%);
  color: #FFFFFF;
  border-radius: 16px 16px 0 0;
}
#daily-summary-modal .modal-header .modal-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}
#daily-summary-modal .modal-header .modal-close {
  color: #FFFFFF;
  opacity: 0.8;
}
#daily-summary-modal .modal-header .modal-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}
#daily-summary-modal .epic-summary-content {
  text-align: center;
}
#daily-summary-modal .epic-summary-content .summary-text {
  font-size: 18px;
  line-height: 1.6;
  color: #1C1917;
  margin-bottom: 32px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.1) 0%, rgba(8, 145, 178, 0.1) 100%);
  border-radius: 16px;
  border: 2px solid rgba(217, 119, 6, 0.2);
  font-weight: 500;
}
#daily-summary-modal .epic-summary-content .summary-stats {
  margin-bottom: 32px;
}
#daily-summary-modal .epic-summary-content .summary-stats .stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (width <= 600px) {
  #daily-summary-modal .epic-summary-content .summary-stats .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
#daily-summary-modal .epic-summary-content .summary-stats .stat-grid .stat-item {
  background: #FFFFFF;
  border: 1px solid #E7E5E4;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  padding: 24px;
  border-radius: 16px;
  transition: all 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
#daily-summary-modal .epic-summary-content .summary-stats .stat-grid .stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
#daily-summary-modal .epic-summary-content .summary-stats .stat-grid .stat-item .stat-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}
#daily-summary-modal .epic-summary-content .summary-stats .stat-grid .stat-item .stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #0891B2;
  margin-bottom: 4px;
}
#daily-summary-modal .epic-summary-content .summary-stats .stat-grid .stat-item .stat-label {
  font-size: 14px;
  color: #44403C;
  font-weight: 500;
}
#daily-summary-modal .epic-summary-content .completed-tasks-section {
  text-align: left;
}
#daily-summary-modal .epic-summary-content .completed-tasks-section h4 {
  color: #1C1917;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
}
#daily-summary-modal .epic-summary-content .completed-tasks-section .completed-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#daily-summary-modal .epic-summary-content .completed-tasks-section .completed-tasks-list .completed-task-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background: rgba(101, 163, 13, 0.1);
  border-radius: 12px;
  border-left: 4px solid #65A30D;
}
#daily-summary-modal .epic-summary-content .completed-tasks-section .completed-tasks-list .completed-task-item .task-icon {
  margin-right: 8px;
  font-size: 18px;
}
#daily-summary-modal .epic-summary-content .completed-tasks-section .completed-tasks-list .completed-task-item .task-name {
  color: #1C1917;
  font-weight: 500;
}

.achievements-panel {
  margin-top: 32px;
}
.achievements-panel .achievements-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.achievements-panel .achievements-header .section-title {
  margin: 0;
}
.achievements-panel .achievements-header .achievements-summary {
  display: flex;
  gap: 24px;
  font-size: 14px;
}
.achievements-panel .achievements-header .achievements-summary .achievements-count {
  color: #0891B2;
  font-weight: 600;
}
.achievements-panel .achievements-header .achievements-summary .achievements-points {
  color: #D97706;
  font-weight: 600;
}
.achievements-panel .achievements-progress {
  margin-bottom: 32px;
}
.achievements-panel .achievements-progress .achievements-progress-bar {
  height: 8px;
  background: rgba(28, 25, 23, 0.1);
  border-radius: 4px;
  overflow: hidden;
}
.achievements-panel .achievements-progress .achievements-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0891B2, #D97706);
  border-radius: 4px;
  transition: width 0.5s ease;
}
.achievements-panel .achievements-categories {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.achievement-category .category-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(28, 25, 23, 0.1);
}
.achievement-category .category-header .category-icon {
  font-size: 18px;
}
.achievement-category .category-header .category-name {
  font-size: 16px;
  font-weight: 600;
  color: #1C1917;
}
.achievement-category .category-header .category-count {
  margin-left: auto;
  font-size: 12px;
  color: #44403C;
}
.achievement-category .category-achievements {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.achievement-card {
  display: flex;
  gap: 24px;
  padding: 24px;
  background: rgba(28, 25, 23, 0.02);
  border: 1px solid rgba(28, 25, 23, 0.08);
  border-radius: 16px;
  transition: all 0.2s ease;
}
.achievement-card:hover {
  background: rgba(28, 25, 23, 0.04);
  border-color: rgba(28, 25, 23, 0.12);
}
.achievement-card.unlocked {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.08), rgba(8, 145, 178, 0.05));
  border-color: rgba(217, 119, 6, 0.3);
}
.achievement-card.unlocked .achievement-icon {
  opacity: 1;
  filter: none;
}
.achievement-card.locked .achievement-icon {
  opacity: 0.4;
  filter: grayscale(100%);
}
.achievement-card.locked .achievement-name {
  color: #44403C;
}
.achievement-card .achievement-icon {
  font-size: 2rem;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 25, 23, 0.05);
  border-radius: 12px;
  transition: all 0.3s ease;
}
.achievement-card .achievement-info {
  flex: 1;
  min-width: 0;
}
.achievement-card .achievement-info .achievement-name {
  font-size: 14px;
  font-weight: 600;
  color: #1C1917;
  margin-bottom: 8px;
}
.achievement-card .achievement-info .achievement-desc {
  font-size: 12px;
  color: #44403C;
  line-height: 1.4;
  margin-bottom: 16px;
}
.achievement-card .achievement-info .achievement-points {
  font-size: 12px;
  color: #D97706;
  font-weight: 500;
}
.achievement-card .achievement-info .achievement-progress-bar {
  height: 4px;
  background: rgba(28, 25, 23, 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
}
.achievement-card .achievement-info .achievement-progress-bar .progress-fill {
  height: 100%;
  background: #0891B2;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.achievement-card .achievement-info .achievement-progress-text {
  font-size: 10px;
  color: #44403C;
  margin-top: 2px;
}

.achievement-toast {
  position: fixed;
  top: 20px;
  right: -400px;
  width: 360px;
  padding: 32px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(217, 119, 6, 0.1));
  border: 1px solid rgba(217, 119, 6, 0.4);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(28, 25, 23, 0.15);
  z-index: 10000;
  transition: right 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.achievement-toast.show {
  right: 20px;
}
.achievement-toast.hide {
  right: -400px;
  opacity: 0;
}
.achievement-toast .achievement-content {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.achievement-toast .achievement-content .achievement-icon {
  font-size: 2.5rem;
  animation: achievement-bounce 0.6s ease;
}
.achievement-toast .achievement-content .achievement-info {
  flex: 1;
}
.achievement-toast .achievement-content .achievement-info .achievement-title {
  font-size: 12px;
  color: #D97706;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.achievement-toast .achievement-content .achievement-info .achievement-name {
  font-size: 18px;
  font-weight: 700;
  color: #1C1917;
  margin-bottom: 8px;
}
.achievement-toast .achievement-content .achievement-info .achievement-desc {
  font-size: 14px;
  color: #44403C;
  line-height: 1.4;
}

@keyframes achievement-bounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}
/**
 * KAIROS - 面板布局与UI风格
 * Clarity Design System
 */
/* 顶部导航栏 - Ceramic Design */
.app-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 24px 0 80px !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #E7E5E4 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  z-index: 1000 !important;
}
html[data-platform=windows] .app-header {
  padding: 0 140px 0 24px !important;
}
.app-header .header-content {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.app-header .header-content .header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  /* 全局今日总结按钮 - 陶瓷质感 */
}
.app-header .header-content .header-actions .summary-btn-global {
  padding: 8px 12px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  background: #FFFFFF !important;
  color: #57534E !important;
  border: 1px solid #E7E5E4 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transition: all 120ms cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}
.app-header .header-content .header-actions .summary-btn-global:hover {
  background: #FAFAF9 !important;
  color: #57534E !important;
  border-color: #D6D3D1 !important;
}
.app-header .header-content .header-actions {
  /* 🎯 右侧按钮组 - 使用margin-left: auto推向最右端 */
}
.app-header .header-content .header-actions .right-button-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
}
.app-header .header-content .header-actions {
  /* 顶栏视图切换按钮组移除：仅保留左下角仪表盘切换 */
}
.app-header .header-content .header-actions .user-avatar {
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
}
.app-header .header-content .header-actions .user-avatar .avatar-circle {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #57534E 0%, #78716C 100%) !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  /* 支持头像图片 */
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  /* 当有背景图片时，隐藏文字 */
}
.app-header .header-content .header-actions .user-avatar .avatar-circle[style*=background-image] {
  color: transparent !important;
}
.app-header .header-content .header-actions .user-avatar:hover .avatar-circle {
  transform: scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.app-header .header-content {
  /* 顶栏主要操作：新建看板按钮视觉统一 */
}
.app-header .header-content .create-board-btn {
  padding: 8px 14px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #0891B2 0%, rgb(9.7548387097, 176.8064516129, 217.0451612903) 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.app-header .header-content .create-board-btn .btn-icon {
  font-size: 18px !important;
}
.app-header .header-content .create-board-btn:hover {
  background: linear-gradient(135deg, rgb(6.2451612903, 113.1935483871, 138.9548387097) 0%, #0891B2 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08) !important;
}

.project-kanban-board {
  display: contents !important;
}

.project-overview {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  height: 100% !important;
  padding: 32px 40px !important;
  overflow-y: auto !important;
}

.project-overview-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}

.overview-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 220px !important;
}

.overview-title {
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #1C1917 !important;
}

.overview-subtitle {
  margin: 0 !important;
  font-size: 14px !important;
  color: #57534E !important;
}

.overview-actions {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-left: auto !important;
}

.overview-stats {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.project-stat-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 12px 16px !important;
  min-width: 112px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
}

.stat-value {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: #1C1917 !important;
  line-height: 1 !important;
}

.stat-label {
  font-size: 12px !important;
  color: #57534E !important;
}

.project-overview .create-board-btn {
  height: 38px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  border: none !important;
  background: #57534E !important;
  color: white !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

.project-overview .create-board-btn:hover {
  background: #78716C !important;
  box-shadow: 0 12px 24px rgba(24, 144, 255, 0.25) !important;
  transform: translateY(-1px) !important;
}

.project-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  padding: 24px 24px 28px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05) !important;
}

.project-section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.project-section .section-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1C1917 !important;
}

.section-icon {
  font-size: 18px !important;
  line-height: 1 !important;
}

.section-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 24px !important;
  text-align: center !important;
  border: 1px dashed rgba(148, 163, 184, 0.6) !important;
  border-radius: 12px !important;
  background: rgba(148, 163, 184, 0.08) !important;
  color: #57534E !important;
}

.section-empty[hidden] {
  display: none !important;
}

.section-empty .empty-icon {
  font-size: 28px !important;
  color: #78716C !important;
}

.section-empty .empty-title {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1C1917 !important;
}

.section-empty .empty-subtitle {
  margin: 0 !important;
  font-size: 13px !important;
  color: #57534E !important;
}

.project-section .boards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

.project-section .board-card,
.project-section .boards-grid .board-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-height: 130px !important;
  padding: 18px 20px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.project-section .board-card:hover,
.project-section .boards-grid .board-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(24, 144, 255, 0.15) !important;
  border-color: rgba(24, 144, 255, 0.35) !important;
}

.project-section .board-card.starred,
.project-section .boards-grid .board-card.starred {
  border-color: rgba(250, 204, 21, 0.7) !important;
  box-shadow: 0 14px 34px rgba(250, 204, 21, 0.22) !important;
  background: rgba(255, 250, 235, 0.95) !important;
}

.project-section .board-title {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1C1917 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.project-section .board-meta {
  margin: 0 !important;
  font-size: 12px !important;
  color: #57534E !important;
}

.project-section .board-progress {
  margin-top: auto !important;
}

.project-section .board-progress .progress-bar {
  width: 100% !important;
  height: 4px !important;
  background: rgba(148, 163, 184, 0.2) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.project-section .board-progress .progress-fill {
  height: 100% !important;
  width: 0% !important;
  background: linear-gradient(90deg, #57534E, #78716C) !important;
  transition: width 0.3s ease !important;
}

/* 折叠态：仅保留小箭头，面板主体滑出隐藏 */
.consistent-nav-panel.collapsed {
  left: 0;
}

.consistent-nav-panel.collapsed .panel-bottom-switcher {
  transform: translateX(-120%);
  opacity: 0;
}

.consistent-nav-panel.collapsed > .panel-toggle {
  left: 6px;
  right: auto;
}

/* 🎯 专注页面对话框优化 - 移除冗余元素，提升用户体验 */
.compact-input-area {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 8px !important; /* 🎯 减少垂直外边距为一半：16px -> 8px */
}
.compact-input-area .input-container {
  position: relative !important;
  border: 2px dashed #E7E5E4 !important;
  border-radius: 12px !important;
  padding: 16px !important;
  background: rgba(255, 255, 255, 0.8) !important;
  transition: all 0.3s ease !important;
}
.compact-input-area .input-container.task-drop-zone.drag-over {
  border-color: #57534E !important;
  background: rgba(59, 130, 246, 0.05) !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
}
.compact-input-area .input-container .activity-input {
  width: 100% !important;
  min-height: 60px !important;
  padding: 12px 14px !important;
  border: none !important;
  background: transparent !important;
  font-size: 16px !important; /* 15px -> 标准16px */
  line-height: 1.75 !important;
  color: #57534E !important;
  resize: none !important;
  font-family: Inter, sans-serif !important;
  text-align: left !important; /* 🎯 文本左对齐 */
}
.compact-input-area .input-container .activity-input::placeholder {
  color: #78716C !important;
  font-weight: 400 !important;
  text-align: left !important; /* 🎯 占位符也左对齐 */
  line-height: 1.5 !important;
}
.compact-input-area .input-container .activity-input:focus {
  outline: none !important;
  color: #292524 !important;
}
.compact-input-area .input-container .activity-input:focus::placeholder {
  color: #D6D3D1 !important;
}
.compact-input-area .input-container {
  /* 🚫 彻底隐藏发送按钮 - 与拖拽交互语义冲突 */
}
.compact-input-area .input-container .send-btn {
  display: none !important;
}
.compact-input-area .summary-btn {
  align-self: flex-start !important;
  padding: 8px 16px !important;
  font-size: 14px !important; /* 13px -> 标准14px */
  background: rgba(59, 130, 246, 0.08) !important;
  color: #57534E !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}
.compact-input-area .summary-btn:hover {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* 🔥 强制视图切换规则 - 最高优先级 */
.main-view {
  display: none !important;
}
.main-view.active {
  display: block !important;
}

/* === 左下角导航按钮精确定位与样式（最终版，避免重复） === */
/* 合并到下方最终版 .consistent-nav-panel 规则，删除本段重复定义 */
/* 强制重置 left-panel 布局 */
.left-panel {
  display: flex !important;
  flex-direction: column !important;
  padding: 8px !important;
  gap: 12px !important; /* 增加控件之间的间距 */
  overflow: hidden !important;
  background: #F5F5F4 !important; /* 使用更柔和的背景色 */
}

/* 顶部控件样式 */
.panel-top-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.panel-top-controls .project-filter {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  color: #1C1917;
  background: white;
  border: 2px solid rgba(43, 127, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: all 0.2s ease-in-out;
}
.panel-top-controls .project-filter:hover {
  border-color: rgba(43, 127, 255, 0.4);
}
.panel-top-controls .project-filter:focus {
  border-color: #57534E;
  outline: none;
  box-shadow: 0 4px 12px rgba(43, 127, 255, 0.15);
}
.panel-top-controls .search-input {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  color: #44403C;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  transition: all 0.2s ease-in-out;
}
.panel-top-controls .search-input::placeholder {
  color: #A8A29E;
}
.panel-top-controls .search-input:hover {
  background: white;
}
.panel-top-controls .search-input:focus {
  background: white;
  border: 2px solid rgba(43, 127, 255, 0.3);
  outline: none;
}

/* 滚动任务区样式 */
.task-scroll-area {
  flex-grow: 1 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  padding: 16px 12px !important;
}
.task-scroll-area .task-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 任务卡片UI重构 */
.task-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 16px 18px 16px 56px;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease-in-out;
  margin: 0 !important;
  cursor: move;
}
.task-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.task-item .task-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.task-item .task-title {
  font-size: 15px;
  font-weight: 500;
  color: #1C1917;
  line-height: 22px;
  margin: 0;
  word-break: break-word;
}
.task-item .task-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #78716C;
}
.task-item .task-meta span + span::before {
  content: "•";
  margin: 0 6px;
  color: rgba(0, 0, 0, 0.25);
}
.task-item .task-meta span:first-child::before {
  content: none;
}

/* 底部切换器UI重构 - 已合并到统一样式系统中 */
/* 计时器样式已迁移到 main.scss 呼吸光环计时器 */
/* === Quick Create 样式（替代内联style） === */
.quick-create {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

.quick-input {
  flex: 1 1 auto !important;
  padding: 8px 10px !important;
  border: 1px solid #E7E5E4 !important;
  border-radius: 8px !important;
  background: white !important;
}

.quick-select {
  padding: 8px 10px !important;
  border: 1px solid #E7E5E4 !important;
  border-radius: 8px !important;
  background: white !important;
}

/* timer-controls 已迁移到 main.scss */
/* 项目列表样式 */
.project-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.project-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: white;
  border-radius: 8px;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  cursor: pointer;
}
.project-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-color: #E7E5E4;
}
.project-item .project-info {
  flex-grow: 1;
}
.project-item .project-title {
  font-size: 14px; /* 14px -> 标准14px */
  font-weight: 500;
  margin-bottom: 4px;
  color: #1C1917;
}
.project-item .project-meta {
  font-size: 12px; /* 12px -> 标准12px */
  color: #57534E;
  margin-bottom: 6px;
}
.project-item .project-progress .progress-bar {
  width: 100%;
  height: 4px;
  background: #F5F5F4;
  border-radius: 2px;
  overflow: hidden;
}
.project-item .project-progress .progress-bar .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #57534E, #44403C);
  transition: width 0.3s ease;
}

/* 统计网格样式 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: white;
  border-radius: 8px;
  border: 1px solid #F5F5F4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.stat-item .stat-number {
  font-size: 20px; /* 20px -> 标准20px */
  font-weight: 600;
  color: #1C1917;
  margin-bottom: 4px;
}
.stat-item .stat-label {
  font-size: 12px; /* 11px -> 标准12px */
  color: #57534E;
  text-align: center;
  font-weight: 500;
}

/* 项目统计和任务统计样式 */
.project-stats, .task-stats {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.project-stats h3, .task-stats h3 {
  font-size: 16px; /* 16px -> 标准16px */
  font-weight: 600;
  color: #1C1917;
  margin: 0 0 12px;
}

/* 最近更新样式 */
.recent-updates {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.recent-updates h3 {
  font-size: 16px; /* 16px -> 标准16px */
  font-weight: 600;
  color: #1C1917;
  margin: 0 0 12px;
}

.update-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.update-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid #F5F5F4;
}
.update-item:last-child {
  border-bottom: none;
}
.update-item .update-title {
  font-size: 14px; /* 13px -> 标准14px */
  color: #292524;
  font-weight: 500;
  flex: 1;
  margin-right: 8px;
}
.update-item .update-time {
  font-size: 12px; /* 11px -> 标准12px */
  color: #78716C;
  white-space: nowrap;
}

/* 🎯 架构师级解决方案：任务子视图切换系统 */
.task-subview {
  display: none; /* 默认隐藏所有子视图 */
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.task-subview.active {
  display: block; /* 只显示激活的子视图 */
  opacity: 1;
  transform: translateX(0);
}

/* 🎨 任务视图切换器已删除 - 无需CSS */
/* 🎨 看板视图样式 */
.kanban-view {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px;
}
.kanban-view .kanban-column {
  flex: 1;
  min-width: 300px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.kanban-view .kanban-column .column-header {
  padding: 16px;
  background: #FAFAF9;
  border-bottom: 1px solid #E7E5E4;
}
.kanban-view .kanban-column .column-header .column-title {
  font-size: 16px; /* 16px -> 标准16px */
  font-weight: 600;
  color: #1C1917;
  margin-bottom: 4px;
}
.kanban-view .kanban-column .column-header .task-count {
  font-size: 12px; /* 12px -> 标准12px */
  color: #57534E;
}
.kanban-view .kanban-column .column-tasks {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px; /* 紧凑卡片间距 */
}
.kanban-view .kanban-column .column-tasks .task-card {
  padding: 12px;
  background: white;
  border: 1px solid #E7E5E4;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.kanban-view .kanban-column .column-tasks .task-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #57534E;
}
.kanban-view .kanban-column .column-tasks .task-card .task-title {
  font-size: 14px;
  font-weight: 500;
  color: #1C1917;
  margin-bottom: 8px;
}
.kanban-view .kanban-column .column-tasks .task-card .task-tags {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.kanban-view .kanban-column .column-tasks .task-card .task-tags .task-tag {
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
}
.kanban-view .kanban-column .column-tasks .task-card .task-tags .task-tag:nth-child(1) {
  background: #FFFBEB;
  color: rgb(142.5582959641, 78.1771300448, 3.9417040359);
}
.kanban-view .kanban-column .column-tasks .task-card .task-tags .task-tag:nth-child(2) {
  background: #ECFEFF;
  color: rgb(4.7096774194, 85.3629032258, 104.7903225806);
}
.kanban-view .kanban-column .column-tasks .task-card .task-meta {
  font-size: 12px;
  color: #57534E;
}
.kanban-view .kanban-column .column-tasks .task-card .task-project {
  font-size: 12px;
  color: #57534E;
}

/* 🎨 状态看板样式 */
.status-board {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px;
}
.status-board .status-column {
  flex: 1;
  min-width: 250px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.status-board .status-column .column-header {
  padding: 16px;
  background: #FAFAF9;
  border-bottom: 1px solid #E7E5E4;
}
.status-board .status-column .column-header .column-title {
  font-size: 16px;
  font-weight: 600;
  color: #1C1917;
  margin-bottom: 4px;
}
.status-board .status-column .column-header .task-count {
  font-size: 12px;
  color: #57534E;
}
.status-board .status-column .column-tasks {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px; /* 🎯 增加间距为12px，提升视觉分离 */
}
.status-board .status-column .column-tasks .status-task-card {
  background: white !important;
  border: 1px solid #E7E5E4 !important;
  border-radius: 6px !important;
  padding: 8px 10px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  min-height: 60px !important;
}
.status-board .status-column .column-tasks .status-task-card .task-checkbox-wrapper {
  flex-shrink: 0 !important;
  padding-top: 2px !important;
}
.status-board .status-column .column-tasks .status-task-card .task-checkbox-wrapper .task-checkbox {
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
  accent-color: #57534E !important;
}
.status-board .status-column .column-tasks .status-task-card .task-content {
  flex: 1 !important;
  cursor: pointer !important;
}
.status-board .status-column .column-tasks .status-task-card .task-content .task-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1C1917 !important;
  margin-bottom: 4px !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.status-board .status-column .column-tasks .status-task-card .task-content .task-project {
  font-size: 12px !important;
  color: #57534E !important;
  margin-bottom: 6px !important;
}
.status-board .status-column .column-tasks .status-task-card .task-content .task-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
.status-board .status-column .column-tasks .status-task-card .task-content .task-meta .task-priority {
  padding: 2px 6px !important;
  border-radius: 10px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  /* 优先级标签（四象限） */
}
.status-board .status-column .column-tasks .status-task-card .task-content .task-meta .task-priority.urgent-important {
  background: #FEF2F2 !important;
  color: #DC2626 !important;
  border: 1px solid rgba(220, 38, 38, 0.3) !important;
}
.status-board .status-column .column-tasks .status-task-card .task-content .task-meta .task-priority.not-urgent-important {
  background: #F7FEE7 !important;
  color: #65A30D !important;
  border: 1px solid rgba(101, 163, 13, 0.3) !important;
}
.status-board .status-column .column-tasks .status-task-card .task-content .task-meta .task-priority.urgent-not-important {
  background: #FFFBEB !important;
  color: #D97706 !important;
  border: 1px solid rgba(217, 119, 6, 0.3) !important;
}
.status-board .status-column .column-tasks .status-task-card .task-content .task-meta .task-priority.not-urgent-not-important {
  background: #FAFAF9 !important;
  color: #57534E !important;
  border: 1px solid #E7E5E4 !important;
}
.status-board .status-column .column-tasks .status-task-card .delete-task-btn {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 20px !important;
  height: 20px !important;
  background: rgba(239, 68, 68, 0.1) !important;
  color: #DC2626 !important;
  border: none !important;
  border-radius: 50% !important;
  font-size: 12px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transition: all 0.2s ease !important;
}
.status-board .status-column .column-tasks .status-task-card .delete-task-btn:hover {
  background: #DC2626 !important;
  color: white !important;
  transform: scale(1.1) !important;
}
.status-board .status-column .column-tasks .status-task-card:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
}
.status-board .status-column .column-tasks .status-task-card:hover .delete-task-btn {
  opacity: 1 !important;
}
.status-board .status-column .column-tasks .status-task-card:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
.status-board .status-column .column-tasks .add-task-btn {
  /* 统一添加按钮为陶瓷风格且更克制 */
  background: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 100%) !important;
  border: 1px solid rgba(17, 24, 39, 0.08) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  color: #1C1917 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
  text-align: center !important;
  margin: 4px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  width: 100% !important;
}
.status-board .status-column .column-tasks .add-task-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 6px rgba(87, 83, 78, 0.06), 0 2px 4px rgba(87, 83, 78, 0.08) !important;
}
.status-board .status-column .column-tasks .add-task-btn:active {
  transform: translateY(0) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}
.status-board .status-column .column-tasks .task-card {
  padding: 12px;
  background: white;
  border: 1px solid #E7E5E4;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.status-board .status-column .column-tasks .task-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #57534E;
}
.status-board .status-column .column-tasks .task-card .task-title {
  font-size: 14px;
  font-weight: 500;
  color: #1C1917;
  margin-bottom: 8px;
}
.status-board .status-column .column-tasks .task-card .task-project {
  font-size: 12px;
  color: #57534E;
}

/* 🎨 紧凑优先级矩阵样式 - 全新设计 */
.compact-priority-matrix {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 0 !important; /* 无间隙，通过阴影分隔 */
  height: calc(100vh - 140px) !important; /* 填满整个视图区域 */
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #FAFAF9 !important;
}
.compact-priority-matrix .matrix-quadrant {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: 4px !important; /* 小边距营造阴影分隔效果 */
  border-radius: 8px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s ease !important;
}
.compact-priority-matrix .matrix-quadrant:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
}
.compact-priority-matrix .matrix-quadrant {
  /* 四象限背景色设计 */
}
.compact-priority-matrix .matrix-quadrant.urgent-important {
  background: linear-gradient(135deg, #FEF2F2 0%, white 100%) !important;
  border-left: 4px solid #DC2626 !important;
}
.compact-priority-matrix .matrix-quadrant.not-urgent-important {
  background: linear-gradient(135deg, #F7FEE7 0%, white 100%) !important;
  border-left: 4px solid #65A30D !important;
}
.compact-priority-matrix .matrix-quadrant.urgent-not-important {
  background: linear-gradient(135deg, #FFFBEB 0%, white 100%) !important;
  border-left: 4px solid #D97706 !important;
}
.compact-priority-matrix .matrix-quadrant.not-urgent-not-important {
  background: linear-gradient(135deg, #F5F5F4 0%, white 100%) !important;
  border-left: 4px solid #57534E !important;
}
.compact-priority-matrix .matrix-quadrant .quadrant-header {
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(4px) !important;
}
.compact-priority-matrix .matrix-quadrant .quadrant-header .priority-icon {
  font-size: 24px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}
.compact-priority-matrix .matrix-quadrant .quadrant-header .quadrant-text {
  flex: 1 !important;
}
.compact-priority-matrix .matrix-quadrant .quadrant-header .quadrant-text .quadrant-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1C1917 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
.compact-priority-matrix .matrix-quadrant .quadrant-header .quadrant-text .quadrant-subtitle {
  font-size: 12px !important;
  color: #57534E !important;
  margin: 2px 0 0 !important;
  font-weight: 500 !important;
}
.compact-priority-matrix .matrix-quadrant .quadrant-tasks {
  flex: 1 !important;
  padding: 8px 12px 12px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  /* 自定义滚动条 */
}
.compact-priority-matrix .matrix-quadrant .quadrant-tasks::-webkit-scrollbar {
  width: 4px !important;
}
.compact-priority-matrix .matrix-quadrant .quadrant-tasks::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05) !important;
  border-radius: 2px !important;
}
.compact-priority-matrix .matrix-quadrant .quadrant-tasks::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 2px !important;
}
.compact-priority-matrix .matrix-quadrant .quadrant-tasks::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* === 任务视图：对进度视图应用专注风格的紧凑卡片（确保覆盖） === */
#task-view .status-board {
  gap: 12px !important;
  padding: 12px !important;
}

#task-view .status-board .status-column {
  padding: 0 !important;
  border: 1px solid rgba(17, 24, 39, 0.06) !important; /* ink 6% */
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06) !important;
}

#task-view .status-board .status-column .column-header {
  margin: 0 !important;
  padding: 12px 14px 8px !important; /* 略增下内边距，增强层次 */
  border-bottom: 1px solid rgba(17, 24, 39, 0.12) !important;
  /* 加深陶瓷渐变：更深的墨色过渡，提高对比 */
  background: linear-gradient(135deg, rgba(28, 25, 23, 0.04) 0%, rgba(28, 25, 23, 0.14) 100%) !important;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}

#task-view .status-board .status-column .column-header .column-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  color: #1C1917 !important;
  margin-bottom: 2px !important;
}

#task-view .status-board .status-column .column-header .task-count {
  font-size: 12px !important;
  color: rgba(28, 25, 23, 0.55) !important;
  letter-spacing: 0.2px !important;
}

#task-view .status-board .status-column .column-tasks {
  padding: 8px 8px 12px !important; /* 轻微左右留白 */
  gap: 6px !important;
}

#task-view .status-board .status-column .column-tasks .task-card {
  padding: 8px 12px !important; /* 紧凑内边距 */
  position: relative !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  /* 1:1 专注页卡片 - 渐变陶瓷表面 */
  background: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 100%) !important;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  border: 0 !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease !important;
  width: 100% !important;
}

#task-view .status-board .status-column .column-tasks .task-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 6px rgba(87, 83, 78, 0.06), 0 2px 4px rgba(87, 83, 78, 0.08) !important; /* 稍加强阴影 */
}

#task-view .status-board .status-column .column-tasks .task-card .task-title {
  margin-bottom: 4px !important;
  line-height: 1.3 !important;
  color: #1C1917 !important; /* 深墨色，匹配陶瓷对比 */
}

#task-view .status-board .status-column .column-tasks .task-card .task-meta {
  font-size: 12px !important;
  color: rgba(15, 23, 42, 0.6) !important; /* 墨色的半透明，柔和 */
}

/* 陶瓷高光叠层 */
/* 内高光保持微弱以贴合渐变陶瓷 */
#task-view .status-board .status-column .column-tasks .task-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) !important;
}

/* 🎨 优先级任务项样式 - checkbox风格 */
.priority-task-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}
.priority-task-item:hover {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  transform: translateX(2px) !important;
}
.priority-task-item .task-checkbox {
  width: 16px !important;
  height: 16px !important;
  border: 2px solid #D6D3D1 !important;
  border-radius: 3px !important;
  background: white !important;
  cursor: pointer !important;
  appearance: none !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}
.priority-task-item .task-checkbox:checked {
  background: #57534E !important;
  border-color: #57534E !important;
}
.priority-task-item .task-checkbox:checked::after {
  content: "✓" !important;
  display: block !important;
  color: white !important;
  font-size: 10px !important;
  font-weight: bold !important;
  text-align: center !important;
  line-height: 12px !important;
}
.priority-task-item .task-checkbox:hover {
  border-color: #57534E !important;
}
.priority-task-item .task-text {
  flex: 1 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  color: #292524 !important;
  margin: 0 !important;
  word-break: break-word !important;
}
.priority-task-item {
  /* 不同类型任务的字体样式 */
}
.priority-task-item.urgent-task .task-text {
  font-weight: 600 !important;
  color: #DC2626 !important;
}
.priority-task-item.important-task .task-text {
  font-weight: 500 !important;
  color: #65A30D !important;
}
.priority-task-item.delegate-task .task-text {
  font-weight: 400 !important;
  color: #D97706 !important;
  font-style: italic !important;
}
.priority-task-item.leisure-task .task-text {
  font-weight: 300 !important;
  color: #57534E !important;
}
.priority-task-item {
  /* 已完成任务样式 */
}
.priority-task-item.completed {
  opacity: 0.6 !important;
}
.priority-task-item.completed .task-text {
  text-decoration: line-through !important;
  color: #78716C !important;
}

/* 🎨 像素级精致：单栏布局架构 */
.single-column-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

/* 🎨 右上角切换器 - 精致化设计 */
.minimalist-nav {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 100;
}
.minimalist-nav .nav-switcher {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.minimalist-nav .nav-switcher .nav-btn {
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border: none !important;
  background: transparent !important;
  color: #57534E !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  white-space: nowrap !important;
  min-width: 52px !important;
  text-align: center !important;
}
.minimalist-nav .nav-switcher .nav-btn:hover {
  background: rgba(59, 130, 246, 0.1) !important;
  color: #57534E !important;
}
.minimalist-nav .nav-switcher .nav-btn.active {
  background: #57534E !important;
  color: white !important;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3) !important;
}

/* 🎨 扩展内容区域 - 为左下角导航栏预留空间 */
#task-view .expanded-content-area {
  padding: 0 !important;
}

.expanded-content-area {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  padding-bottom: var(--bottom-safe, 100px); /* 为左下角导航栏预留空间 */
}

/* 🎨 左下角导航栏一致性设计（桌面端隐藏，窄屏保留） */
.consistent-nav-panel {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 100;
  /* 将底部安全区与左侧安全区暴露为CSS变量，便于上层内容避让 */
  --bottom-safe: 120px;
  --left-safe: 260px;
  transition: left 0.2s ease;
}
.consistent-nav-panel .panel-bottom-switcher {
  display: inline-flex !important;
  flex-direction: row !important; /* 横向排列 */
  gap: 8px !important;
  background: white !important;
  backdrop-filter: blur(20px) !important;
  border-radius: 10px !important;
  padding: 8px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  margin: 0 !important;
  align-items: center !important;
  position: relative !important;
  transition: transform 0.22s ease, opacity 0.22s ease !important;
  /* 折叠按钮 */
}
.consistent-nav-panel .panel-bottom-switcher .panel-toggle {
  display: none !important; /* 内部折叠按钮不再显示 */
}
.consistent-nav-panel .panel-bottom-switcher .switcher-btn {
  flex: 0 0 auto !important;
  min-width: 60px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border: none !important;
  background: transparent !important;
  color: #57534E !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  white-space: nowrap !important;
  text-align: center !important;
}
.consistent-nav-panel .panel-bottom-switcher .switcher-btn:hover {
  background: rgba(59, 130, 246, 0.1) !important;
  color: #57534E !important;
}
.consistent-nav-panel .panel-bottom-switcher .switcher-btn.active {
  background: #57534E !important;
  color: white !important;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3) !important;
}
.consistent-nav-panel {
  /* 外置的折叠按钮：放到面板外侧，靠右，与面板保持对齐 */
}
.consistent-nav-panel > .panel-toggle {
  position: absolute;
  right: -12px;
  bottom: 50%;
  transform: translateY(50%);
  width: 22px !important;
  height: 28px !important;
  border-radius: 6px !important;
  background: white !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(8px) !important;
  color: #292524 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  opacity: 0.85;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  transition: opacity 0.2s ease, background-color 0.2s ease, right 0.2s ease !important;
}
.consistent-nav-panel > .panel-toggle:hover {
  opacity: 1;
  background: white !important;
  color: #1C1917 !important;
}

/* 还原：桌面端也显示左下角仪表盘视图切换 */
/* 🎨 专注视图左下角导航栏样式修正 */
.three-column-layout .left-panel .panel-bottom-switcher {
  margin-top: auto !important;
  display: flex !important;
  flex-direction: row !important; /* 改为横向 */
  gap: 4px !important;
  padding: 6px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.three-column-layout .left-panel .panel-bottom-switcher .switcher-btn {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 8px 4px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border: none !important;
  background: transparent !important;
  color: #57534E !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  white-space: nowrap !important;
  text-align: center !important;
}
.three-column-layout .left-panel .panel-bottom-switcher .switcher-btn:hover {
  background: rgba(59, 130, 246, 0.1) !important;
  color: #57534E !important;
}
.three-column-layout .left-panel .panel-bottom-switcher .switcher-btn.active {
  background: #57534E !important;
  color: white !important;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3) !important;
}

/* === 紧凑化：新建看板模态框 === */
#create-board-modal .modal-content {
  background: #FFFFFF;
  border: 1px solid #E7E5E4;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  padding: 14px 16px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-shadow: 0 4px 6px rgba(87, 83, 78, 0.06), 0 2px 4px rgba(87, 83, 78, 0.08) !important;
  width: min(92vw, 480px) !important;
}
#create-board-modal .modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* 标题在左，关闭在最右 */
  gap: 8px !important;
  padding-bottom: 10px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid #E7E5E4 !important;
}
#create-board-modal .modal-header .modal-title {
  font-size: 18px !important;
  margin: 0 !important;
  letter-spacing: 0.2px;
  font-weight: 600 !important;
  color: #1C1917 !important;
  line-height: 1.2 !important;
}
#create-board-modal .modal-header .modal-close {
  font-size: 18px !important;
  background: transparent !important;
  border: none !important;
  color: #44403C !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}
#create-board-modal .modal-header .modal-close:hover {
  color: #1C1917 !important;
  background: #F5F5F4 !important;
}
#create-board-modal .modal-body {
  padding: 0 !important;
}
#create-board-modal .form-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px 12px !important;
}
#create-board-modal .form-grid .col-span-2 {
  grid-column: 1/-1 !important;
}
#create-board-modal #create-board-form .form-group {
  margin-bottom: 10px !important;
}
#create-board-modal #create-board-form label {
  font-size: 12px !important;
  margin-bottom: 6px !important;
  color: #44403C !important;
  font-weight: 500 !important;
}
#create-board-modal #create-board-form input, #create-board-modal #create-board-form textarea {
  width: 100% !important;
  padding: 8px 10px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  border: 1px solid #E7E5E4 !important;
  background: white !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#create-board-modal #create-board-form input:focus, #create-board-modal #create-board-form textarea:focus {
  border-color: #57534E !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15) !important;
}
#create-board-modal #create-board-form textarea {
  min-height: 64px !important;
}
#create-board-modal .modal-actions {
  padding-top: 10px !important;
  margin-top: 12px !important;
  gap: 10px !important;
  border-top: 1px solid #E7E5E4 !important;
}
#create-board-modal .modal-actions .ceramic-button, #create-board-modal .modal-actions .quick-create-btn {
  padding: 8px 14px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
}
#create-board-modal .modal-actions .btn-ceramic-compact {
  padding: 6px 12px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}
#create-board-modal .modal-actions .ceramic-button.primary.create-btn, #create-board-modal .modal-actions .primary.create-btn.quick-create-btn {
  background: #0891B2 !important;
  color: white !important;
  border: none !important;
}
#create-board-modal .modal-actions .ceramic-button.primary.create-btn:hover, #create-board-modal .modal-actions .primary.create-btn.quick-create-btn:hover {
  background: rgb(9.7548387097, 176.8064516129, 217.0451612903) !important;
  transform: translateY(-1px);
}
#create-board-modal .modal-actions .ceramic-button.secondary.cancel-btn, #create-board-modal .modal-actions .secondary.cancel-btn.quick-create-btn {
  background: #F5F5F4 !important;
  color: #292524 !important;
  border: none !important;
}

/* === 紧凑化：新建任务模态框 === */
#new-task-modal .modal-content {
  background: #FFFFFF;
  border: 1px solid #E7E5E4;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  padding: 14px 16px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-shadow: 0 4px 6px rgba(87, 83, 78, 0.06), 0 2px 4px rgba(87, 83, 78, 0.08) !important;
  width: min(94vw, 560px) !important;
}
#new-task-modal .modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding-bottom: 10px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid #E7E5E4 !important;
}
#new-task-modal .modal-header h3 {
  font-size: 18px !important;
  margin: 0 !important;
  letter-spacing: 0.2px;
  font-weight: 600 !important;
  color: #1C1917 !important;
  line-height: 1.2 !important;
}
#new-task-modal .modal-body {
  padding: 0 !important;
}
#new-task-modal .form-group {
  margin-bottom: 10px !important;
}
#new-task-modal label {
  font-size: 12px !important;
  margin-bottom: 6px !important;
  color: #44403C !important;
}
#new-task-modal .form-input, #new-task-modal #new-task-title, #new-task-modal #new-task-project, #new-task-modal #new-task-priority, #new-task-modal #new-task-status, #new-task-modal #new-task-description {
  padding: 8px 10px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: #FAFAF9 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
#new-task-modal .form-input:focus, #new-task-modal #new-task-title:focus, #new-task-modal #new-task-project:focus, #new-task-modal #new-task-priority:focus, #new-task-modal #new-task-status:focus, #new-task-modal #new-task-description:focus {
  border-color: #57534E !important;
  background: white !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15) !important;
}
#new-task-modal #new-task-description {
  min-height: 64px !important;
}
#new-task-modal .modal-footer {
  padding-top: 10px !important;
  margin-top: 12px !important;
  border-top: 1px solid #E7E5E4 !important;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
#new-task-modal .cancel-btn, #new-task-modal .submit-btn {
  padding: 8px 14px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  border: none;
}
#new-task-modal .submit-btn.primary-btn {
  background: #0891B2 !important;
  color: white !important;
}
#new-task-modal .submit-btn.primary-btn:hover {
  background: rgb(9.7548387097, 176.8064516129, 217.0451612903) !important;
  transform: translateY(-1px);
}
#new-task-modal .cancel-btn {
  background: #F5F5F4 !important;
  color: #292524 !important;
}

/* === 统一抽屉式布局（右侧滑出，更现代） === */
.modal.side-drawer {
  align-items: stretch !important;
  justify-content: flex-end !important;
}

.modal.side-drawer .modal-content {
  height: 100vh !important;
  max-height: 100vh !important;
  width: min(94vw, 560px) !important;
  border-radius: 12px 0 0 12px !important;
  transform: translateX(0) !important;
}

/* 🎨 项目看板样式 */
.project-overview {
  /* 减少容器水平留白，进一步压缩视觉间距 */
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.project-overview .section-title {
  font-size: 20px;
  font-weight: 600;
  color: #1C1917;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.project-overview .section-title .star-icon {
  font-size: 18px;
}
.project-overview .boards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  justify-content: start; /* 左对齐，剩余空间留在右侧 */
  justify-items: stretch; /* 卡片占满单元格宽度 */
  align-items: start; /* 避免等高拉伸导致填补空白 */
  align-content: start; /* 上对齐，避免网格强行拉伸填补 */
  gap: 8px !important; /* 统一 gap 设置 */
  margin-bottom: 16px;
}
.project-overview .boards-grid.starred {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
}
.project-overview .boards-grid .board-card {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 100%);
  border-radius: 10px;
  padding: 8px 12px;
  border: 0;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  width: 100%;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
}
.project-overview .boards-grid .board-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(87, 83, 78, 0.06), 0 2px 4px rgba(87, 83, 78, 0.08) !important;
}
.project-overview .boards-grid .board-card.starred {
  border: 2px solid #D97706;
  background: linear-gradient(135deg, whitebeb 0%, white 100%);
}
.project-overview .boards-grid .board-card .board-title {
  font-size: 14px;
  font-weight: 600;
  color: #1C1917;
  margin: 0 !important;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-overview .boards-grid .board-card .board-meta {
  font-size: 11px;
  color: rgba(28, 25, 23, 0.6);
  margin: 0;
  line-height: 1.2;
}
.project-overview .boards-grid .board-card .board-progress .progress-bar {
  width: 100%;
  height: 3px;
  background: #E7E5E4;
  border-radius: 2px;
  overflow: hidden;
}
.project-overview .boards-grid .board-card .board-progress .progress-bar .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #57534E, #44403C);
  width: 0%;
  transition: width 0.3s ease;
}

/* 响应式设计优化 */
@media (width <= 1200px) {
  .expanded-content-area {
    padding: 16px;
  }
  .boards-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
  }
  .boards-grid.starred {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}
@media (width <= 768px) {
  .minimalist-nav {
    padding: 12px 16px;
  }
  .nav-btn {
    padding: 8px 16px;
    font-size: 14px;
    min-width: 70px;
  }
  .expanded-content-area {
    padding: 12px;
  }
  .boards-grid,
  .boards-grid.starred {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .board-card {
    padding: 10px 14px;
    height: 70px;
    aspect-ratio: 2.5/1;
  }
}
/* 模态框补充覆盖 */
#task-details-modal.modal--large .modal-content {
  width: min(680px, 100vw - 64px);
}
#task-details-modal.modal--full-height {
  align-items: flex-start;
}
#task-details-modal.modal--full-height .modal-content {
  margin-top: 48px;
  max-height: calc(100vh - 96px);
}
#task-details-modal .modal-content {
  padding: 0;
  overflow: hidden;
}
#task-details-modal .modal-header {
  padding: 20px 24px 12px 24px;
  border-bottom: 1px solid #F5F5F4;
}
#task-details-modal .modal-header #modal-task-title {
  font-size: 16px;
  font-weight: 600;
  color: #1C1917;
  margin: 0;
  flex: 1;
  padding: 4px 6px;
  border: 2px solid transparent;
  border-radius: 6px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
#task-details-modal .modal-header #modal-task-title[contenteditable=true] {
  border-color: #57534E;
  background: #F5F5F4;
  outline: none;
}
#task-details-modal .modal-header .modal-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
#task-details-modal .modal-header .modal-header-actions .edit-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: rgba(24, 144, 255, 0.12);
  color: #57534E;
  cursor: pointer;
  transition: all 0.2s ease;
}
#task-details-modal .modal-header .modal-header-actions .edit-btn:hover {
  background: rgba(24, 144, 255, 0.2);
}
#task-details-modal .modal-header .modal-header-actions .edit-btn.active {
  background: #57534E;
  color: white;
}
#task-details-modal .modal-header .modal-header-actions .modal-close {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: rgba(239, 68, 68, 0.12);
  color: #DC2626;
  cursor: pointer;
  transition: all 0.2s ease;
}
#task-details-modal .modal-header .modal-header-actions .modal-close:hover {
  background: #DC2626;
  color: white;
}
#task-details-modal .modal-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#task-details-modal .modal-body .task-basic-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 16px;
}
#task-details-modal .modal-body .task-basic-info .info-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#task-details-modal .modal-body .task-basic-info .info-row label {
  font-size: 13px;
  font-weight: 500;
  color: #292524;
}
#task-details-modal .modal-body .task-basic-info .info-row span,
#task-details-modal .modal-body .task-basic-info .info-row select {
  padding: 8px 12px;
  border: 1px solid #D6D3D1;
  border-radius: 6px;
  font-size: 14px;
  background: white;
}
#task-details-modal .modal-body .task-basic-info .info-row span:focus,
#task-details-modal .modal-body .task-basic-info .info-row select:focus {
  border-color: #57534E;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
  outline: none;
}
#task-details-modal .modal-body .task-basic-info .info-row span {
  background: #FAFAF9;
  color: #57534E;
}
#task-details-modal .modal-body .task-description-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#task-details-modal .modal-body .task-description-section label {
  font-size: 13px;
  font-weight: 500;
  color: #292524;
}
#task-details-modal .modal-body .task-description-section .task-description-content {
  min-height: 80px;
  padding: 12px;
  border: 1px solid #E7E5E4;
  border-radius: 6px;
  background: #FAFAF9;
  font-size: 13px;
  line-height: 1.5;
  color: #292524;
}
#task-details-modal .modal-body .task-description-section .task-description-content[contenteditable=true] {
  background: white;
  border-color: #57534E;
}
#task-details-modal .modal-body .task-activity-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#task-details-modal .modal-body .task-activity-section label {
  font-size: 13px;
  font-weight: 500;
  color: #292524;
}
#task-details-modal .modal-body .task-activity-section .activity-list {
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#task-details-modal .modal-body .task-activity-section .activity-list .activity-item {
  padding: 8px 12px;
  background: #FAFAF9;
  border: 1px solid #E7E5E4;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#task-details-modal .modal-body .task-activity-section .activity-list .activity-item .activity-content {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #292524;
}
#task-details-modal .modal-body .task-activity-section .activity-list .activity-item .activity-content .activity-time {
  font-size: 12px;
  color: #78716C;
  white-space: nowrap;
}
#task-details-modal .modal-body .task-activity-section .activity-list .activity-item .activity-content .activity-icon {
  color: #78716C;
}
#task-details-modal .modal-body .task-activity-section .add-comment-area {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
#task-details-modal .modal-body .task-activity-section .add-comment-area #new-comment-input {
  flex: 1;
  min-height: 56px;
  padding: 8px 12px;
  border: 1px solid #D6D3D1;
  border-radius: 6px;
  font-size: 13px;
  resize: vertical;
}
#task-details-modal .modal-body .task-activity-section .add-comment-area #new-comment-input:focus {
  border-color: #57534E;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
  outline: none;
}
#task-details-modal .modal-body .task-activity-section .add-comment-area .add-comment-btn {
  min-width: 96px;
  height: 36px;
  border-radius: 6px;
  border: none;
  background: #57534E;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}
#task-details-modal .modal-body .task-activity-section .add-comment-area .add-comment-btn:hover {
  background: #78716C;
}
#task-details-modal .modal-actions {
  padding: 16px 24px;
  border-top: 1px solid #F5F5F4;
  background: #FAFAF9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
#task-details-modal .modal-actions .left-actions {
  display: flex;
  gap: 8px;
}
#task-details-modal .modal-actions button {
  height: 36px;
  border-radius: 6px;
  border: none;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
#task-details-modal .modal-actions .save-btn,
#task-details-modal .modal-actions .primary-btn {
  background: #57534E;
  color: white;
}
#task-details-modal .modal-actions .save-btn:hover,
#task-details-modal .modal-actions .primary-btn:hover {
  background: #78716C;
}
#task-details-modal .modal-actions .cancel-btn,
#task-details-modal .modal-actions .secondary-btn {
  background: white;
  color: #57534E;
  border: 1px solid #E7E5E4;
}
#task-details-modal .modal-actions .cancel-btn:hover,
#task-details-modal .modal-actions .secondary-btn:hover {
  border-color: #57534E;
  color: #1C1917;
}
#task-details-modal .modal-actions .delete-btn {
  background: rgba(239, 68, 68, 0.12);
  color: #DC2626;
}
#task-details-modal .modal-actions .delete-btn:hover {
  background: #DC2626;
  color: white;
}

/* 紧凑栅格表单布局（用于任务/看板创建） */
.modal .modal-body .modal-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.modal .modal-body .modal-form-grid.columns-1 {
  grid-template-columns: 1fr;
}
.modal .modal-body .modal-form-grid .span-2 {
  grid-column: 1/-1;
}

.modal .modal-body form .form-group + .form-group {
  margin-top: 0;
}


/* 空活动提示样式 */
.no-activity-hint {
  color: #78716C !important;
  font-size: 13px !important;
  text-align: center !important;
  padding: 20px !important;
}

/* 🔧 防弹CSS - 最高优先级强制应用 */
/* 使用!important是必要的，因为项目中存在更高优先级的全局样式覆盖 */
#kairos-popup-nav-container.consistent-nav-panel {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 99999 !important; /* 极高层级确保不被覆盖 */
  --bottom-safe: 120px; /* 默认底部安全区变量，避免行内样式 */
}
#kairos-popup-nav-container.consistent-nav-panel .panel-bottom-switcher {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  padding: 12px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}
#kairos-popup-nav-container.consistent-nav-panel .panel-bottom-switcher .switcher-btn {
  position: relative !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  min-width: 80px !important;
  text-align: center !important;
  /* 🎯 非激活状态：浅灰色背景 */
  background: #F5F5F4 !important;
  color: #57534E !important;
  /* 🎯 激活状态：蓝色背景 */
}
#kairos-popup-nav-container.consistent-nav-panel .panel-bottom-switcher .switcher-btn.active {
  background: #57534E !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}
#kairos-popup-nav-container.consistent-nav-panel .panel-bottom-switcher .switcher-btn {
  /* 悬停效果 */
}
#kairos-popup-nav-container.consistent-nav-panel .panel-bottom-switcher .switcher-btn:hover:not(.active) {
  background: #E7E5E4 !important;
  color: #292524 !important;
  transform: translateY(-1px) !important;
}
#kairos-popup-nav-container.consistent-nav-panel .panel-bottom-switcher .switcher-btn:hover.active {
  background: #44403C !important;
  transform: translateY(-1px) !important;
}
#kairos-popup-nav-container.consistent-nav-panel .panel-bottom-switcher .switcher-btn {
  /* 点击效果 */
}
#kairos-popup-nav-container.consistent-nav-panel .panel-bottom-switcher .switcher-btn:active {
  transform: translateY(0) !important;
}
#kairos-popup-nav-container.consistent-nav-panel .panel-bottom-switcher .switcher-btn {
  /* 🔧 强化任务按钮 - 使用ID选择器提升优先级 */
}

/* 🔧 任务触发器容器 - 新的div结构 */
.task-trigger-container {
  position: relative !important;
  display: inline-block !important;
}

/* 🔧 强化任务按钮 - 使用新的容器结构 */
#kairos-task-trigger-btn {
  position: relative !important;
  overflow: visible !important;
}

/* 🔧 防弹弹出菜单样式 - 更新为新的父容器结构 */
#kairos-popup-menu.view-popup-menu {
  /* 核心定位属性 - 相对于task-trigger-container定位 */
  position: absolute !important;
  bottom: calc(100% + 12px) !important; /* 减少间距，让鼠标更容易从按钮移动到菜单 */
  left: 50% !important;
  /* 抽屉式动画初始状态 - 必须使用!important */
  transform: translateX(-50%) translateY(20px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  /* 动画过渡效果 - 强制应用 */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; /* 稍快的动画 */
  z-index: 100000 !important; /* 极高层级确保显示在最顶层 */
  /* 布局属性 - 防止被外部样式覆盖 */
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 8px !important; /* 增加内边距，扩大悬浮响应区域 */
  background: transparent !important;
  /* 扩大可悬浮区域 - 让鼠标移动更容忍 */
  min-width: 120px !important;
  /* 添加一个不可见的扩展区域，连接按钮和菜单 */
}
#kairos-popup-menu.view-popup-menu::before {
  content: "" !important;
  position: absolute !important;
  top: 100% !important; /* 从菜单底部开始 */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  height: 16px !important; /* 覆盖按钮和菜单之间的空隙 */
  background: transparent !important;
  pointer-events: auto !important; /* 确保这个区域也能响应鼠标事件 */
}

/* 🔧 防弹弹出菜单选项按钮 - 最高优先级样式 */
#kairos-popup-menu .view-option {
  /* 基础样式 - 强制应用防止被覆盖 */
  position: relative !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  white-space: nowrap !important;
  min-width: 80px !important;
  text-align: center !important;
  display: block !important;
  /* 非激活状态样式 - 与主导航一致 */
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(8px) !important;
  color: #57534E !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* 激活状态样式 */
#kairos-popup-menu .view-option.active {
  background: #57534E !important;
  backdrop-filter: blur(8px) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

/* 悬停效果 */
#kairos-popup-menu .view-option:hover:not(.active) {
  background: #E7E5E4 !important;
  color: #292524 !important;
  transform: translateY(-1px) !important;
}

#kairos-popup-menu .view-option:hover.active {
  background: #44403C !important;
  transform: translateY(-1px) !important;
}

/* 点击效果 */
#kairos-popup-menu .view-option:active {
  transform: translateY(0) !important;
}

/* 🔧 防弹悬停效果 - 使用新的容器结构 */
.task-trigger-container:hover #kairos-popup-menu,
#kairos-popup-menu:hover {
  /* 向上弹出的抽屉效果 - 强制应用 */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* 延迟隐藏机制 - 提升用户体验 */
#kairos-popup-menu {
  transition-delay: 0s !important;
}

.task-trigger-container:not(:hover) #kairos-popup-menu:not(:hover) {
  transition-delay: 0.2s !important;
}

/* 🎯 Trello风格紧凑看板 - 任务项目视图专用 */
.compact-kanban-board {
  display: flex !important;
  width: 100% !important;
  height: calc(100vh - 140px) !important; /* 减去顶部栏和内边距 */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 16px 8px !important;
  gap: 8px !important; /* 列间距极小 */
  background: #FAFAF9 !important; /* 优化：统一浅灰背景，减少层级 */
  /* 🎯 核心布局：每列宽度 = 屏幕宽度的1/6 */
}
.compact-kanban-board .project-column {
  flex: 0 0 calc(16.666% - 7px) !important; /* 1/6 - gap补偿 */
  min-width: 220px !important; /* 最小宽度保证可读性 */
  max-width: calc(16.666% - 7px) !important;
  height: 100% !important;
  background: #E7E5E4 !important; /* 调深背景颜色 */
  border-radius: 8px !important;
  padding: 12px 8px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; /* 恢复：轻微阴影 */
  /* 项目标题区域 - 重新设计为更优雅的无背景样式 */
}
.compact-kanban-board .project-column .project-header {
  margin-bottom: 16px !important; /* 增加与卡片的距离 */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: transparent !important; /* 去掉背景色 */
  border-radius: 0 !important;
  padding: 0 4px 8px !important; /* 只保留底部padding和少量水平padding */
  box-shadow: none !important; /* 移除阴影 */
  border-bottom: 2px solid #E7E5E4 !important; /* 添加底部分隔线 */
  position: relative !important;
  /* 添加优雅的渐变装饰线 */
}
.compact-kanban-board .project-column .project-header::after {
  content: "" !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 30px !important; /* 短装饰线 */
  height: 2px !important;
  background: linear-gradient(90deg, #57534E, #78716C) !important; /* 蓝色渐变 */
  border-radius: 1px !important;
}
.compact-kanban-board .project-column .project-header .project-title {
  font-size: 16px !important; /* 增大字体 */
  font-weight: 700 !important; /* 加粗字重 */
  color: #1C1917 !important; /* 深色文字 */
  margin: 0 !important;
  line-height: 1.2 !important;
  padding: 0 !important;
  word-break: break-word !important;
  flex: 1 !important;
  letter-spacing: 0.02em !important; /* 稍微增加字间距 */
  /* 编辑状态样式 */
}
.compact-kanban-board .project-column .project-header .project-title.editing {
  background: white !important;
  border: 2px solid #57534E !important;
  border-radius: 6px !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  padding: 6px 8px !important;
  font-weight: 600 !important;
}
.compact-kanban-board .project-column .project-header .edit-project-btn {
  width: 24px !important; /* 稍微增大 */
  height: 24px !important;
  padding: 0 !important;
  border: none !important;
  background: rgba(107, 114, 128, 0.1) !important; /* 淡灰色背景 */
  color: #57534E !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  opacity: 0.6 !important;
}
.compact-kanban-board .project-column .project-header .edit-project-btn:hover {
  background: rgba(59, 130, 246, 0.1) !important;
  color: #57534E !important;
  opacity: 1 !important;
  transform: scale(1.05) !important;
}
.compact-kanban-board .project-column .project-header .edit-project-btn:active {
  transform: scale(0.95) !important;
  background: rgba(59, 130, 246, 0.2) !important;
}
.compact-kanban-board .project-column {
  /* 任务卡片容器 */
}
.compact-kanban-board .project-column .task-cards-container {
  flex: 1 !important;
  overflow-y: auto !important;
  margin-bottom: 8px !important;
  padding-right: 2px !important; /* 滚动条间距 */
  /* 🎯 优化任务卡片：增强间距和交互体验 */
}
.compact-kanban-board .project-column .task-cards-container .compact-task-card {
  background: white !important; /* 保持纯白卡片背景 */
  border-radius: 6px !important;
  padding: 8px 10px !important; /* 增加到1.2倍：原6px 8px -> 8px 10px */
  margin-bottom: 12px !important; /* 🎯 增加垂直间距为12px，提升视觉分离 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important; /* 增强阴影 */
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  min-height: auto !important; /* 确保高度自适应 */
  height: auto !important;
  position: relative !important; /* 为删除按钮定位 */
  display: flex !important; /* 使用flex布局 */
  align-items: flex-start !important;
  justify-content: space-between !important;
  /* 任务内容区域 */
}
.compact-kanban-board .project-column .task-cards-container .compact-task-card .task-content {
  flex: 1 !important;
  cursor: pointer !important;
  min-width: 0 !important; /* 允许内容收缩 */
}
.compact-kanban-board .project-column .task-cards-container .compact-task-card {
  /* 任务标题 - 统一字体大小与进度视图一致 */
}
.compact-kanban-board .project-column .task-cards-container .compact-task-card .task-title {
  font-size: 14px !important; /* 从12px增加到14px，与进度视图一致 */
  font-weight: 500 !important;
  color: #1C1917 !important;
  line-height: 1.3 !important; /* 稍微放松行高 */
  margin-bottom: 4px !important; /* 增加下边距 */
  word-break: break-word !important;
}
.compact-kanban-board .project-column .task-cards-container .compact-task-card {
  /* 删除按钮样式 */
}
.compact-kanban-board .project-column .task-cards-container .compact-task-card .delete-task-btn {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  width: 18px !important;
  height: 18px !important;
  border: none !important;
  background: rgba(239, 68, 68, 0.1) !important; /* 淡红色背景 */
  color: #DC2626 !important;
  border-radius: 50% !important; /* 圆形按钮 */
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important; /* 默认隐藏 */
  transition: all 0.2s ease !important;
  z-index: 10 !important;
}
.compact-kanban-board .project-column .task-cards-container .compact-task-card .delete-task-btn:hover {
  background: #DC2626 !important;
  color: white !important;
  transform: scale(1.1) !important;
}
.compact-kanban-board .project-column .task-cards-container .compact-task-card .delete-task-btn:active {
  transform: scale(0.9) !important;
}
.compact-kanban-board .project-column .task-cards-container .compact-task-card {
  /* 悬停时显示删除按钮 */
}
.compact-kanban-board .project-column .task-cards-container .compact-task-card:hover .delete-task-btn {
  opacity: 1 !important;
}
.compact-kanban-board .project-column .task-cards-container .compact-task-card {
  /* 标签容器 */
}
.compact-kanban-board .project-column .task-cards-container .compact-task-card .task-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3px !important; /* 增加标签间距 */
  margin-bottom: 4px !important;
  /* 标签样式 - 增加可读性 */
}
.compact-kanban-board .project-column .task-cards-container .compact-task-card .task-tags .tag {
  font-size: 11px !important; /* 从9px增加到11px，提升可读性 */
  font-weight: 500 !important;
  padding: 2px 6px !important; /* 增加内边距：原1px 4px -> 2px 6px */
  border-radius: 10px !important; /* 增加圆角 */
  white-space: nowrap !important;
  line-height: 1.2 !important; /* 稍微放松行高 */
  /* 优先级标签（四象限） */
}
.compact-kanban-board .project-column .task-cards-container .compact-task-card .task-tags .tag.priority-urgent-important {
  background: #FEF2F2 !important;
  color: #DC2626 !important;
  border: 1px solid rgba(220, 38, 38, 0.3) !important;
}
.compact-kanban-board .project-column .task-cards-container .compact-task-card .task-tags .tag.priority-not-urgent-important {
  background: #F7FEE7 !important;
  color: #65A30D !important;
  border: 1px solid rgba(101, 163, 13, 0.3) !important;
}
.compact-kanban-board .project-column .task-cards-container .compact-task-card .task-tags .tag.priority-urgent-not-important {
  background: #FFFBEB !important;
  color: #D97706 !important;
  border: 1px solid rgba(217, 119, 6, 0.3) !important;
}
.compact-kanban-board .project-column .task-cards-container .compact-task-card .task-tags .tag.priority-not-urgent-not-important {
  background: #FAFAF9 !important;
  color: #57534E !important;
  border: 1px solid #E7E5E4 !important;
}
.compact-kanban-board .project-column .task-cards-container .compact-task-card .task-tags .tag {
  /* 状态标签 */
}
.compact-kanban-board .project-column .task-cards-container .compact-task-card .task-tags .tag.status-todo {
  background: #FAFAF9 !important;
  color: #57534E !important;
  border: 1px solid #E7E5E4 !important;
}
.compact-kanban-board .project-column .task-cards-container .compact-task-card .task-tags .tag.status-doing {
  background: #ECFEFF !important;
  color: #44403C !important;
  border: 1px solid rgba(8, 145, 178, 0.3) !important;
}
.compact-kanban-board .project-column .task-cards-container .compact-task-card .task-tags .tag.status-review {
  background: rgba(120, 113, 108, 0.08) !important;
  color: #78716C !important;
  border: 1px solid rgba(120, 113, 108, 0.3) !important;
}
.compact-kanban-board .project-column .task-cards-container .compact-task-card {
  /* 任务元信息 - 与标题保持一致的字体大小 */
}
.compact-kanban-board .project-column .task-cards-container .compact-task-card .task-meta {
  font-size: 12px !important; /* 稍小于标题，但保持可读性 */
  color: #57534E !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
.compact-kanban-board .project-column .task-cards-container .compact-task-card {
  /* 悬停效果 - 增强交互反馈 */
}
.compact-kanban-board .project-column .task-cards-container .compact-task-card:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
  background: rgba(0, 0, 0, 0.03) !important; /* 🎯 添加淡灰色悬停背景 */
}
.compact-kanban-board .project-column .task-cards-container .compact-task-card:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
.compact-kanban-board .project-column {
  /* 添加任务按钮 - 模仿任务卡片格式但使用虚线边框 */
}
.compact-kanban-board .project-column .add-task-btn {
  background: white !important; /* 与任务卡片相同的白色背景 */
  border: 2px dashed #D6D3D1 !important; /* 虚线边框 */
  border-radius: 6px !important; /* 与任务卡片相同的圆角 */
  padding: 8px 10px !important; /* 与任务卡片相同的padding */
  color: #78716C !important; /* 较淡的颜色表示占位 */
  font-size: 14px !important; /* 与任务标题相同的字体大小 */
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
  margin-bottom: 4px !important; /* 与任务卡片相同的间距 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important; /* 确保与任务卡片高度相似 */
}
.compact-kanban-board .project-column .add-task-btn:hover {
  border-color: #57534E !important;
  color: #57534E !important;
  background: #FAFAF9 !important; /* 轻微背景变化 */
  transform: translateY(-1px) !important; /* 与任务卡片相同的悬停效果 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}
.compact-kanban-board .project-column .add-task-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
.compact-kanban-board {
  /* 响应式优化：小屏幕时自动滚动 */
}
@media (width <= 1200px) {
  .compact-kanban-board .project-column {
    flex: 0 0 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
  }
}

/* 🎯 清晰的视图切换器隐藏规则 */
.task-view-switcher {
  display: none !important;
}

.task-view-btn {
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  /* 非激活状态 */
  background: transparent !important;
  color: #57534E !important;
  /* 激活状态 */
}
.task-view-btn.active {
  background: #57534E !important;
  color: white !important;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3) !important;
}
.task-view-btn {
  /* 悬停效果 */
}
.task-view-btn:hover:not(.active) {
  background: #F5F5F4 !important;
  color: #292524 !important;
}

.project-kanban-board {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px; /* 与进度视图一致 */
  height: 100%;
}
.project-kanban-board .project-column {
  flex: 1;
  min-width: 250px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.project-kanban-board .project-column .project-header {
  padding: 12px 14px 8px; /* 与状态列头一致 */
  background: linear-gradient(135deg, rgba(28, 25, 23, 0.04) 0%, rgba(28, 25, 23, 0.14) 100%);
  border-bottom: 1px solid rgba(17, 24, 39, 0.12);
  position: relative;
}
.project-kanban-board .project-column .project-header .project-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #1C1917;
  margin: 0 0 2px;
  border: none;
  background: transparent;
  outline: none;
  cursor: text;
}
.project-kanban-board .project-column .project-header .project-title:hover {
  background: rgba(59, 130, 246, 0.05);
  border-radius: 4px;
  padding: 2px 4px;
  margin: -2px -4px 2px;
}
.project-kanban-board .project-column .project-header .project-title[contenteditable=true] {
  background: white;
  border: 2px solid #57534E;
  border-radius: 4px;
  padding: 4px 8px;
  margin: -4px -8px 0;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.project-kanban-board .project-column .project-header .task-count {
  font-size: 12px;
  color: rgba(28, 25, 23, 0.55);
  letter-spacing: 0.2px;
}
.project-kanban-board .project-column .project-header .edit-project-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(148, 163, 184, 0.1);
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.2s ease;
}
.project-kanban-board .project-column .project-header .edit-project-btn:hover {
  background: rgba(59, 130, 246, 0.1);
  opacity: 1;
}
.project-kanban-board .project-column .project-header:hover .edit-project-btn {
  opacity: 0.7;
}
.project-kanban-board .project-column .project-tasks {
  padding: 8px 8px 12px; /* 左右8px 与状态列一致 */
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.project-kanban-board .project-column .project-tasks .project-task-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px; /* 紧凑 */
  background: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 100%);
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  border: 0;
  border-radius: 10px;
  width: 100%;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
.project-kanban-board .project-column .project-tasks .project-task-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(87, 83, 78, 0.06), 0 2px 4px rgba(87, 83, 78, 0.08);
}
.project-kanban-board .project-column .project-tasks .project-task-card:hover .delete-task-btn {
  opacity: 1;
}
.project-kanban-board .project-column .project-tasks .project-task-card .task-checkbox-wrapper {
  flex-shrink: 0;
  padding-top: 2px;
}
.project-kanban-board .project-column .project-tasks .project-task-card .task-checkbox-wrapper .task-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #57534E;
  border: none;
  background: white;
}
.project-kanban-board .project-column .project-tasks .project-task-card .task-content {
  flex: 1;
  min-width: 0;
}
.project-kanban-board .project-column .project-tasks .project-task-card .task-content .task-title {
  font-size: 14px;
  font-weight: 500;
  color: #1C1917;
  margin-bottom: 4px;
  line-height: 1.3;
  word-wrap: break-word;
}
.project-kanban-board .project-column .project-tasks .project-task-card .task-content .task-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.6);
}
.project-kanban-board .project-column .project-tasks .project-task-card .task-content .task-meta .task-priority,
.project-kanban-board .project-column .project-tasks .project-task-card .task-content .task-meta .task-status {
  font-size: 12px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.project-kanban-board .project-column .project-tasks .project-task-card .task-content .task-meta .task-priority {
  padding: 2px 6px !important;
  border-radius: 10px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  /* 优先级标签（四象限） - 与进度视图保持一致 */
}
.project-kanban-board .project-column .project-tasks .project-task-card .task-content .task-meta .task-priority.urgent-important {
  background: #FEF2F2 !important;
  color: #DC2626 !important;
  border: 1px solid rgba(220, 38, 38, 0.3) !important;
}
.project-kanban-board .project-column .project-tasks .project-task-card .task-content .task-meta .task-priority.not-urgent-important {
  background: #F7FEE7 !important;
  color: #65A30D !important;
  border: 1px solid rgba(101, 163, 13, 0.3) !important;
}
.project-kanban-board .project-column .project-tasks .project-task-card .task-content .task-meta .task-priority.urgent-not-important {
  background: #FFFBEB !important;
  color: #D97706 !important;
  border: 1px solid rgba(217, 119, 6, 0.3) !important;
}
.project-kanban-board .project-column .project-tasks .project-task-card .task-content .task-meta .task-priority.not-urgent-not-important {
  background: #FAFAF9 !important;
  color: #57534E !important;
  border: 1px solid #E7E5E4 !important;
}
.project-kanban-board .project-column .project-tasks .project-task-card .task-content .task-meta .task-status {
  background: #F5F5F4;
  color: #44403C;
}
.project-kanban-board .project-column .project-tasks .project-task-card .task-content .task-meta .task-status.doing {
  background: #ECFEFF;
  color: #44403C;
}
.project-kanban-board .project-column .project-tasks .project-task-card .task-content .task-meta .task-status.review {
  background: #FFFBEB;
  color: rgb(142.5582959641, 78.1771300448, 3.9417040359);
}
.project-kanban-board .project-column .project-tasks .project-task-card .task-content .task-meta .task-status.done {
  background: #F7FEE7;
  color: #65A30D;
}
.project-kanban-board .project-column .project-tasks .project-task-card .delete-task-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border: none;
  background: #DC2626;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.2s ease;
}
.project-kanban-board .project-column .project-tasks .project-task-card .delete-task-btn:hover {
  background: #DC2626;
  transform: scale(1.1);
}
.project-kanban-board .project-column .project-tasks .add-task-btn {
  /* 统一为陶瓷按钮，等宽，与进度视图一致 */
  background: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 100%);
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #1C1917;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.project-kanban-board .project-column .project-tasks .add-task-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(87, 83, 78, 0.06), 0 2px 4px rgba(87, 83, 78, 0.08);
}
.project-kanban-board .project-column .project-tasks .add-task-btn:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* ================================================================================================
 * 🎯 用户中心系统样式
 * 用户头像下拉菜单、个人资料页面、成就系统、热力图等
 * ================================================================================================ */
/* 用户中心容器 */
.user-center-container {
  position: relative !important;
  display: inline-block !important;
}

/* 用户头像下拉菜单 */
.user-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  min-width: 280px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
  z-index: 9999 !important;
  /* 默认隐藏 */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-10px) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  /* 显示状态 */
}
.user-dropdown.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
.user-dropdown {
  /* 菜单分隔线 */
}
.user-dropdown .menu-divider {
  height: 1px !important;
  background: rgba(0, 0, 0, 0.08) !important;
  margin: 8px 0 !important;
}
.user-dropdown {
  /* 菜单项 */
}
.user-dropdown .menu-item {
  display: flex !important;
  align-items: center !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border-radius: 8px !important;
  margin: 2px 8px !important;
  position: relative !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}
.user-dropdown .menu-item .menu-icon {
  font-size: 16px !important;
  margin-right: 12px !important;
  width: 20px !important;
  text-align: center !important;
}
.user-dropdown .menu-item .menu-text {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #292524 !important;
}
.user-dropdown .menu-item:hover {
  background: rgba(59, 130, 246, 0.08) !important;
}
.user-dropdown .menu-item:hover .menu-text {
  color: #44403C !important;
}
.user-dropdown .menu-item {
  /* 登出菜单项特殊样式 */
}
.user-dropdown .menu-item.logout-item .menu-icon {
  color: #DC2626 !important;
}
.user-dropdown .menu-item.logout-item .menu-text {
  color: #DC2626 !important;
}
.user-dropdown .menu-item.logout-item:hover {
  background: rgba(220, 38, 38, 0.08) !important;
}
.user-dropdown .menu-item.logout-item:hover .menu-text {
  color: rgb(178.25, 28.75, 28.75) !important;
}
.user-dropdown .menu-item.logout-item:hover .menu-icon {
  color: rgb(178.25, 28.75, 28.75) !important;
}

/* 用户信息区域 */
.user-info-section {
  padding: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.user-info-section .user-avatar-large .avatar-circle-large {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #57534E, #44403C) !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  /* 支持头像图片 */
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  /* 当有背景图片时，隐藏文字 */
}
.user-info-section .user-avatar-large .avatar-circle-large[style*=background-image] {
  color: transparent !important;
}
.user-info-section .user-basic-info {
  flex: 1 !important;
}
.user-info-section .user-basic-info .user-name {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1C1917 !important;
  line-height: 1.2 !important;
}
.user-info-section .user-basic-info .user-level {
  font-size: 13px !important;
  color: #57534E !important;
  margin-top: 2px !important;
}

/* 菜单分割线 */
.menu-divider {
  height: 1px !important;
  background: #E7E5E4 !important;
  margin: 0 16px !important;
}

/* 菜单项目 */
.menu-items {
  padding: 8px 0 !important;
}
.menu-items .menu-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 20px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.menu-items .menu-item:hover {
  background: rgba(59, 130, 246, 0.08) !important;
}
.menu-items .menu-item .menu-icon {
  font-size: 16px !important;
  width: 20px !important;
  text-align: center !important;
}
.menu-items .menu-item .menu-text {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #292524 !important;
}

/* 用户个人资料页面 */
#user-profile-view .profile-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 20px !important;
}
#user-profile-view {
  /* 个人资料头部 */
}
#user-profile-view .profile-header {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 32px !important;
  margin-bottom: 24px !important;
  position: relative !important;
}
#user-profile-view .profile-header .profile-avatar .avatar-circle-xl {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #57534E, #44403C) !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3) !important;
  /* 支持头像图片 */
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  /* 当有背景图片时，隐藏文字 */
}
#user-profile-view .profile-header .profile-avatar .avatar-circle-xl[style*=background-image] {
  color: transparent !important;
}
#user-profile-view .profile-header .profile-info {
  flex: 1 !important;
}
#user-profile-view .profile-header .profile-info .profile-name {
  margin: 0 0 8px !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #1C1917 !important;
}
#user-profile-view .profile-header .profile-info .profile-level {
  font-size: 16px !important;
  color: #57534E !important;
  margin-bottom: 20px !important;
}
#user-profile-view .profile-header .profile-info .profile-stats {
  display: flex !important;
  gap: 32px !important;
}
#user-profile-view .profile-header .profile-info .profile-stats .stat-item {
  text-align: center !important;
}
#user-profile-view .profile-header .profile-info .profile-stats .stat-item .stat-value {
  display: block !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #57534E !important;
  line-height: 1 !important;
}
#user-profile-view .profile-header .profile-info .profile-stats .stat-item .stat-label {
  font-size: 13px !important;
  color: #57534E !important;
  margin-top: 4px !important;
}
#user-profile-view .profile-header .back-btn {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
}
#user-profile-view {
  /* 个人资料内容区 */
}
#user-profile-view .profile-content {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
}
@media (width <= 768px) {
  #user-profile-view .profile-content {
    grid-template-columns: 1fr !important;
  }
}
#user-profile-view {
  /* 热力图区域 */
}
#user-profile-view .heatmap-section {
  padding: 24px !important;
}
#user-profile-view .heatmap-section .section-title {
  margin: 0 0 20px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #1C1917 !important;
}
#user-profile-view .heatmap-section .heatmap-container .heatmap-calendar {
  display: grid !important;
  grid-template-columns: repeat(53, 1fr) !important;
  gap: 2px !important;
  margin-bottom: 12px !important;
}
#user-profile-view .heatmap-section .heatmap-container .heatmap-calendar .heatmap-day {
  width: 12px !important;
  height: 12px !important;
  border-radius: 2px !important;
  background: #E7E5E4 !important;
}
#user-profile-view .heatmap-section .heatmap-container .heatmap-calendar .heatmap-day[data-level="1"] {
  background: #d9ead3 !important;
}
#user-profile-view .heatmap-section .heatmap-container .heatmap-calendar .heatmap-day[data-level="2"] {
  background: #a8d08d !important;
}
#user-profile-view .heatmap-section .heatmap-container .heatmap-calendar .heatmap-day[data-level="3"] {
  background: #6b8e23 !important;
}
#user-profile-view .heatmap-section .heatmap-container .heatmap-calendar .heatmap-day[data-level="4"] {
  background: #556b2f !important;
}
#user-profile-view .heatmap-section .heatmap-container .heatmap-legend {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
#user-profile-view .heatmap-section .heatmap-container .heatmap-legend .legend-text {
  font-size: 12px !important;
  color: #57534E !important;
}
#user-profile-view .heatmap-section .heatmap-container .heatmap-legend .legend-colors {
  display: flex !important;
  gap: 2px !important;
}
#user-profile-view .heatmap-section .heatmap-container .heatmap-legend .legend-colors .legend-color {
  width: 12px !important;
  height: 12px !important;
  border-radius: 2px !important;
}
#user-profile-view .heatmap-section .heatmap-container .heatmap-legend .legend-colors .legend-color[data-level="0"] {
  background: #E7E5E4 !important;
}
#user-profile-view .heatmap-section .heatmap-container .heatmap-legend .legend-colors .legend-color[data-level="1"] {
  background: #d9ead3 !important;
}
#user-profile-view .heatmap-section .heatmap-container .heatmap-legend .legend-colors .legend-color[data-level="2"] {
  background: #a8d08d !important;
}
#user-profile-view .heatmap-section .heatmap-container .heatmap-legend .legend-colors .legend-color[data-level="3"] {
  background: #6b8e23 !important;
}
#user-profile-view .heatmap-section .heatmap-container .heatmap-legend .legend-colors .legend-color[data-level="4"] {
  background: #556b2f !important;
}
#user-profile-view {
  /* 数据统计区域 */
}
#user-profile-view .stats-section {
  padding: 24px !important;
}
#user-profile-view .stats-section .stats-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
}
#user-profile-view .stats-section .stats-grid .stat-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px !important;
  background: #FAFAF9 !important;
  border-radius: 8px !important;
  border: 1px solid #E7E5E4 !important;
}
#user-profile-view .stats-section .stats-grid .stat-card .stat-icon {
  font-size: 24px !important;
}
#user-profile-view .stats-section .stats-grid .stat-card .stat-info .stat-number {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1C1917 !important;
  line-height: 1 !important;
}
#user-profile-view .stats-section .stats-grid .stat-card .stat-info .stat-text {
  font-size: 12px !important;
  color: #57534E !important;
  margin-top: 2px !important;
}
#user-profile-view {
  /* 成就系统 */
}
#user-profile-view .achievements-section {
  padding: 24px !important;
}
#user-profile-view .achievements-section .achievements-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}
#user-profile-view .achievements-section .achievements-grid .achievement-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px !important;
  background: white !important;
  border-radius: 8px !important;
  border: 1px solid #E7E5E4 !important;
  transition: all 0.2s ease !important;
}
#user-profile-view .achievements-section .achievements-grid .achievement-card.locked {
  opacity: 0.5 !important;
  background: #FAFAF9 !important;
}
#user-profile-view .achievements-section .achievements-grid .achievement-card.locked .achievement-icon {
  filter: grayscale(1) !important;
}
#user-profile-view .achievements-section .achievements-grid .achievement-card.unlocked {
  border-color: #57534E !important;
  background: linear-gradient(135deg, #ECFEFF, white) !important;
}
#user-profile-view .achievements-section .achievements-grid .achievement-card.unlocked:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
}
#user-profile-view .achievements-section .achievements-grid .achievement-card .achievement-icon {
  font-size: 24px !important;
  width: 32px !important;
  text-align: center !important;
}
#user-profile-view .achievements-section .achievements-grid .achievement-card .achievement-info {
  flex: 1 !important;
  min-width: 0 !important;
}
#user-profile-view .achievements-section .achievements-grid .achievement-card .achievement-info .achievement-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1C1917 !important;
  margin-bottom: 2px !important;
}
#user-profile-view .achievements-section .achievements-grid .achievement-card .achievement-info .achievement-desc {
  font-size: 12px !important;
  color: #57534E !important;
  line-height: 1.3 !important;
}
#user-profile-view {
  /* 最近活动 */
}
#user-profile-view .recent-activity-section {
  padding: 24px !important;
}
#user-profile-view .recent-activity-section .activity-timeline .activity-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid #E7E5E4 !important;
}
#user-profile-view .recent-activity-section .activity-timeline .activity-item:last-child {
  border-bottom: none !important;
}
#user-profile-view .recent-activity-section .activity-timeline .activity-item .activity-desc {
  font-size: 14px !important;
  color: #292524 !important;
}
#user-profile-view .recent-activity-section .activity-timeline .activity-item .activity-time {
  font-size: 12px !important;
  color: #57534E !important;
}
#user-profile-view {
  /* ================================================================================================
   * 🎯 GitHub风格个人资料页面样式
   * 重新设计的左右分栏布局，参考GitHub个人资料页面
   * ================================================================================================ */
  /* GitHub风格布局容器 */
}
#user-profile-view .github-style-layout {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 20px !important;
  background: white !important;
}
#user-profile-view .github-style-layout .back-btn {
  margin-bottom: 16px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  border-radius: 6px !important;
}
#user-profile-view .profile-layout {
  display: grid !important;
  grid-template-columns: 320px 1fr !important;
  gap: 32px !important;
  align-items: start !important;
}
#user-profile-view {
  /* 左侧边栏样式 */
}
#user-profile-view .profile-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  position: sticky !important;
  top: 20px !important;
}
#user-profile-view {
  /* 用户卡片 - GitHub风格 */
}
#user-profile-view .user-card {
  padding: 24px !important;
  text-align: center !important;
}
#user-profile-view .user-card .user-avatar-section {
  margin-bottom: 20px !important;
}
#user-profile-view .user-card .user-avatar-section .avatar-circle-github {
  width: 140px !important;
  height: 140px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #57534E, #44403C) !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 60px !important;
  font-weight: 700 !important;
  margin: 0 auto 16px !important;
  border: 4px solid #E7E5E4 !important;
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15) !important;
  /* 支持头像图片 */
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  /* 当有背景图片时，隐藏文字 */
}
#user-profile-view .user-card .user-avatar-section .avatar-circle-github[style*=background-image] {
  color: transparent !important;
}
#user-profile-view .user-card .user-avatar-section .user-name {
  font-size: 26px !important;
  font-weight: 600 !important;
  color: #1C1917 !important;
  margin: 0 0 4px !important;
  line-height: 1.2 !important;
}
#user-profile-view .user-card .user-avatar-section .user-username {
  font-size: 20px !important;
  color: #57534E !important;
  margin: 0 0 12px !important;
  font-weight: 300 !important;
}
#user-profile-view .user-card .user-avatar-section .user-bio {
  color: #292524 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  font-size: 16px !important;
}
#user-profile-view .user-card .key-stats {
  text-align: left !important;
  border-top: 1px solid #E7E5E4 !important;
  padding-top: 16px !important;
}
#user-profile-view .user-card .key-stats .stat-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 0 !important;
}
#user-profile-view .user-card .key-stats .stat-item .stat-icon {
  font-size: 16px !important;
  width: 20px !important;
}
#user-profile-view .user-card .key-stats .stat-item .stat-text {
  color: #292524 !important;
  font-size: 14px !important;
}
#user-profile-view {
  /* 成就徽章侧边栏 */
}
#user-profile-view .achievements-sidebar {
  padding: 20px !important;
}
#user-profile-view .achievements-sidebar .section-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1C1917 !important;
  margin: 0 0 12px !important;
}
#user-profile-view .achievements-sidebar .achievements-badges {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
#user-profile-view .achievements-sidebar .achievements-badges .achievement-badge {
  width: 60px !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: radial-gradient(circle at center, #FFFBEB 0%, #D97706 100%) !important;
  border-radius: 50% !important;
  border: 3px solid #D97706 !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.4) !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  position: relative !important;
  justify-self: center !important;
  /* 徽章光泽效果 */
}
#user-profile-view .achievements-sidebar .achievements-badges .achievement-badge::before {
  content: "" !important;
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  right: 8px !important;
  height: 15px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, transparent 50%) !important;
  border-radius: 50%/100% 100% 0% 0% !important;
  pointer-events: none !important;
}
#user-profile-view .achievements-sidebar .achievements-badges .achievement-badge.locked {
  background: radial-gradient(circle at center, #F5F5F4 0%, #78716C 100%) !important;
  border-color: #57534E !important;
  box-shadow: 0 2px 6px rgba(107, 114, 128, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.2) !important;
  opacity: 0.6 !important;
  filter: grayscale(70%) !important;
}
#user-profile-view .achievements-sidebar .achievements-badges .achievement-badge.locked .badge-icon {
  opacity: 0.7 !important;
}
#user-profile-view .achievements-sidebar .achievements-badges .achievement-badge.unlocked {
  background: radial-gradient(circle at center, #FFFBEB 0%, #D97706 100%) !important;
  border-color: #D97706 !important;
  transform: scale(1.1) !important;
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.5) !important;
  animation: badge-glow 2s ease-in-out infinite alternate !important;
}
#user-profile-view .achievements-sidebar .achievements-badges .achievement-badge.unlocked .badge-icon {
  animation: badge-bounce 1s ease-in-out infinite alternate !important;
}
#user-profile-view .achievements-sidebar .achievements-badges .achievement-badge:hover {
  transform: scale(1.15) !important;
  box-shadow: 0 8px 25px rgba(217, 119, 6, 0.5), inset 0 2px 6px rgba(255, 255, 255, 0.6) !important;
  border-color: rgb(142.5582959641, 78.1771300448, 3.9417040359) !important;
}
#user-profile-view .achievements-sidebar .achievements-badges .achievement-badge .badge-icon {
  font-size: 24px !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) !important;
  z-index: 1 !important;
}
#user-profile-view .achievements-sidebar {
  /* 徽章动画效果 */
}
@keyframes badge-glow {
  0% {
    box-shadow: 0 6px 20px rgba(217, 119, 6, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.5) !important;
  }
  100% {
    box-shadow: 0 8px 30px rgba(217, 119, 6, 0.6), inset 0 3px 6px rgba(255, 255, 255, 0.7) !important;
  }
}
@keyframes badge-bounce {
  0% {
    transform: translateY(0) !important;
  }
  100% {
    transform: translateY(-2px) !important;
  }
}
#user-profile-view .achievements-sidebar .achievements-summary {
  text-align: center !important;
}
#user-profile-view .achievements-sidebar .achievements-summary .achievements-count {
  font-size: 12px !important;
  color: #57534E !important;
}
#user-profile-view {
  /* 快速统计 */
}
#user-profile-view .quick-stats {
  padding: 20px !important;
}
#user-profile-view .quick-stats .section-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1C1917 !important;
  margin: 0 0 12px !important;
}
#user-profile-view .quick-stats .stats-list .stat-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 0 !important;
  font-size: 14px !important;
}
#user-profile-view .quick-stats .stats-list .stat-row .stat-label {
  color: #57534E !important;
}
#user-profile-view .quick-stats .stats-list .stat-row .stat-value {
  color: #1C1917 !important;
  font-weight: 500 !important;
}
#user-profile-view {
  /* 右侧主要内容 */
}
#user-profile-view .profile-main {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}
#user-profile-view {
  /* GitHub风格热力图 */
}
#user-profile-view .heatmap-main-section {
  padding: 24px !important;
}
#user-profile-view .heatmap-main-section .heatmap-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 20px !important;
}
#user-profile-view .heatmap-main-section .heatmap-header .section-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1C1917 !important;
  margin: 0 !important;
}
#user-profile-view .heatmap-main-section .heatmap-header .year-selector {
  background: #FAFAF9 !important;
  border: 1px solid #E7E5E4 !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  color: #292524 !important;
}
#user-profile-view .heatmap-main-section .heatmap-header .year-selector:focus {
  outline: none !important;
  border-color: #57534E !important;
}
#user-profile-view .heatmap-main-section .github-heatmap-container .months-labels {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 2px !important;
  font-size: 10px !important;
  color: #57534E !important;
  margin-bottom: 8px !important;
  margin-left: 30px !important;
}
#user-profile-view .heatmap-main-section .github-heatmap-container .months-labels span {
  text-align: center !important;
}
#user-profile-view .heatmap-main-section .github-heatmap-container .heatmap-content {
  display: flex !important;
  gap: 8px !important;
}
#user-profile-view .heatmap-main-section .github-heatmap-container .heatmap-content .weekdays-labels {
  display: flex !important;
  flex-direction: column !important;
  gap: 11px !important;
  font-size: 9px !important;
  color: #57534E !important;
  padding-top: 2px !important;
  width: 25px !important;
}
#user-profile-view .heatmap-main-section .github-heatmap-container .heatmap-content .weekdays-labels span {
  height: 11px !important;
  line-height: 11px !important;
  text-align: right !important;
}
#user-profile-view .heatmap-main-section .github-heatmap-container .heatmap-content .heatmap-grid {
  display: grid !important;
  grid-template-columns: repeat(53, clamp(10px, 1.1vw, 12px)) !important;
  grid-template-rows: repeat(7, clamp(10px, 1.1vw, 12px)) !important;
  gap: clamp(2px, 0.25vw, 3px) !important;
  flex: 1 !important;
}
#user-profile-view .heatmap-main-section .github-heatmap-container .heatmap-content .heatmap-grid .heatmap-day {
  width: clamp(10px, 1.1vw, 12px) !important;
  height: clamp(10px, 1.1vw, 12px) !important;
  border-radius: 2px !important;
  background: #E7E5E4 !important;
  cursor: pointer !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}
#user-profile-view .heatmap-main-section .github-heatmap-container .heatmap-content .heatmap-grid .heatmap-day:hover {
  transform: scale(1.25) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  z-index: 1 !important;
  position: relative !important;
}
#user-profile-view .heatmap-main-section .github-heatmap-container .heatmap-content .heatmap-grid .heatmap-day:focus-visible {
  outline: 2px solid #57534E !important;
  outline-offset: 2px !important;
  z-index: 2 !important;
  position: relative !important;
}
#user-profile-view .heatmap-main-section .github-heatmap-container .heatmap-content .heatmap-grid .heatmap-day[data-level="1"] {
  background: #d9ead3 !important;
}
#user-profile-view .heatmap-main-section .github-heatmap-container .heatmap-content .heatmap-grid .heatmap-day[data-level="2"] {
  background: #a8d08d !important;
}
#user-profile-view .heatmap-main-section .github-heatmap-container .heatmap-content .heatmap-grid .heatmap-day[data-level="3"] {
  background: #6b8e23 !important;
}
#user-profile-view .heatmap-main-section .github-heatmap-container .heatmap-content .heatmap-grid .heatmap-day[data-level="4"] {
  background: #556b2f !important;
}
#user-profile-view .heatmap-main-section .heatmap-legend {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  font-size: 11px !important;
  color: #57534E !important;
  margin-top: 8px !important;
}
#user-profile-view .heatmap-main-section .heatmap-legend .legend-squares {
  display: flex !important;
  gap: 2px !important;
  margin: 0 4px !important;
}
#user-profile-view .heatmap-main-section .heatmap-legend .legend-squares .legend-square {
  width: 11px !important;
  height: 11px !important;
  border-radius: 2px !important;
}
#user-profile-view .heatmap-main-section .heatmap-legend .legend-squares .legend-square[data-level="0"] {
  background: #E7E5E4 !important;
}
#user-profile-view .heatmap-main-section .heatmap-legend .legend-squares .legend-square[data-level="1"] {
  background: #d9ead3 !important;
}
#user-profile-view .heatmap-main-section .heatmap-legend .legend-squares .legend-square[data-level="2"] {
  background: #a8d08d !important;
}
#user-profile-view .heatmap-main-section .heatmap-legend .legend-squares .legend-square[data-level="3"] {
  background: #6b8e23 !important;
}
#user-profile-view .heatmap-main-section .heatmap-legend .legend-squares .legend-square[data-level="4"] {
  background: #556b2f !important;
}
#user-profile-view {
  /* 活动统计卡片 */
}
#user-profile-view .activity-stats {
  padding: 24px !important;
}
#user-profile-view .activity-stats .section-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1C1917 !important;
  margin: 0 0 16px !important;
}
#user-profile-view .activity-stats .stats-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 16px !important;
}
#user-profile-view .activity-stats .stats-cards-grid .activity-stat-card {
  padding: 20px !important;
  background: #FAFAF9 !important;
  border-radius: 8px !important;
  border: 1px solid #E7E5E4 !important;
}
#user-profile-view .activity-stats .stats-cards-grid .activity-stat-card .stat-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}
#user-profile-view .activity-stats .stats-cards-grid .activity-stat-card .stat-header .stat-icon {
  font-size: 16px !important;
}
#user-profile-view .activity-stats .stats-cards-grid .activity-stat-card .stat-header .stat-title {
  font-size: 14px !important;
  color: #57534E !important;
  font-weight: 500 !important;
}
#user-profile-view .activity-stats .stats-cards-grid .activity-stat-card .stat-content .big-number {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #57534E !important;
  line-height: 1 !important;
}
#user-profile-view .activity-stats .stats-cards-grid .activity-stat-card .stat-content .stat-subtitle {
  font-size: 12px !important;
  color: #57534E !important;
  margin-top: 4px !important;
}
#user-profile-view {
  /* 最近活动时间线 */
}
#user-profile-view .recent-activity-main {
  padding: 24px !important;
}
#user-profile-view .recent-activity-main .section-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1C1917 !important;
  margin: 0 0 16px !important;
}
#user-profile-view .recent-activity-main .activity-timeline-main .activity-item-main {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px 0 !important;
}
#user-profile-view .recent-activity-main .activity-timeline-main .activity-item-main .activity-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #57534E !important;
  margin-top: 6px !important;
  flex-shrink: 0 !important;
}
#user-profile-view .recent-activity-main .activity-timeline-main .activity-item-main .activity-content {
  flex: 1 !important;
}
#user-profile-view .recent-activity-main .activity-timeline-main .activity-item-main .activity-content .activity-text {
  color: #292524 !important;
  font-size: 14px !important;
  margin-bottom: 2px !important;
}
#user-profile-view .recent-activity-main .activity-timeline-main .activity-item-main .activity-content .activity-time {
  font-size: 12px !important;
  color: #57534E !important;
}
#user-profile-view .recent-activity-main .activity-placeholder {
  text-align: center !important;
  padding: 40px 0 !important;
}
#user-profile-view .recent-activity-main .activity-placeholder p {
  color: #57534E !important;
  font-style: italic !important;
  margin: 0 !important;
  font-size: 14px !important;
}
#user-profile-view {
  /* 响应式设计 */
}
@media (width <= 1024px) {
  #user-profile-view .profile-layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  #user-profile-view .profile-sidebar {
    position: static !important;
  }
  #user-profile-view .user-card .user-avatar-section .avatar-circle-github {
    width: 200px !important;
    height: 200px !important;
    font-size: 80px !important;
  }
}
@media (width <= 768px) {
  #user-profile-view .github-style-layout {
    padding: 16px !important;
  }
  #user-profile-view .achievements-badges {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #user-profile-view .stats-cards-grid {
    grid-template-columns: 1fr !important;
  }
  #user-profile-view .user-card .user-avatar-section .avatar-circle-github {
    width: 150px !important;
    height: 150px !important;
    font-size: 60px !important;
  }
}

/**
 * 凝釉设计令牌 (NingYou Design Tokens)
 * 五窑色系 + 四象限色系 + 间距/字体/阴影
 */
:root {
  --ny-yingqing: #E8F4F2;
  --ny-tianqing: #B8D4CE;
  --ny-ruqing: #7EB5A6;
  --ny-longquan: #4A9B87;
  --ny-jianzhan: #2D3B36;
  --ny-warm-ochre: #C17F59;
  --ny-celadon: #7EB5A6;
  --ny-rice-glaze: #D4C4A8;
  --ny-ash-glaze: #A8A8A0;
  --ny-shadow-raised: 0 1px 2px rgba(45, 59, 54, 0.05), 0 2px 4px rgba(45, 59, 54, 0.05);
  --ny-shadow-floating: 0 4px 8px rgba(45, 59, 54, 0.08), 0 8px 16px rgba(45, 59, 54, 0.08);
  --ny-duration-fast: 200ms;
  --ny-duration-normal: 300ms;
  --ny-ease-water: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ny-ease-wood: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ny-ease-metal: cubic-bezier(0.4, 0, 0.2, 1);
}

/**
 * 凝釉设计系统入口 (NingYou Design System Entry)
 * KAIROS 任务视图 UI 重设计
 */
/**
 * 凝釉混入工具 (NingYou Mixins)
 */
/**
 * 凝釉设计系统入口 (NingYou Design System Entry)
 * KAIROS 任务视图 UI 重设计
 */
/**
 * 凝釉动画系统 (NingYou Animation System)
 * 五行缓动 + 关键帧动画
 */
@keyframes shard-enter {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes shard-exit {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.9);
  }
}
@keyframes shard-complete {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
}
@keyframes shard-shake {
  0%, 100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-4px);
  }
  40% {
    transform: translateX(4px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
}
@keyframes view-slide-in {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes view-slide-out {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-20px);
  }
}
@keyframes view-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes pulse-border {
  0%, 100% {
    border-color: rgba(126, 181, 166, 0.4);
  }
  50% {
    border-color: rgba(126, 181, 166, 0.8);
  }
}
@keyframes drop-zone-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(126, 181, 166, 0.3);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(126, 181, 166, 0);
  }
}
@keyframes crackle-loading {
  0% {
    background-position: 0 0;
    opacity: 0.03;
  }
  50% {
    opacity: 0.06;
  }
  100% {
    background-position: 100px 100px;
    opacity: 0.03;
  }
}
@keyframes accordion-expand {
  0% {
    max-height: 0;
    opacity: 0;
  }
  100% {
    max-height: 500px;
    opacity: 1;
  }
}
@keyframes accordion-collapse {
  0% {
    max-height: 500px;
    opacity: 1;
  }
  100% {
    max-height: 0;
    opacity: 0;
  }
}
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}
@keyframes ceramic-shine {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.animate-stagger {
  animation: shard-enter 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  animation-fill-mode: both;
}

.animate-stagger:nth-child(1) {
  animation-delay: 50ms;
}

.animate-stagger:nth-child(2) {
  animation-delay: 100ms;
}

.animate-stagger:nth-child(3) {
  animation-delay: 150ms;
}

.animate-stagger:nth-child(4) {
  animation-delay: 200ms;
}

.animate-stagger:nth-child(5) {
  animation-delay: 250ms;
}

.animate-stagger:nth-child(6) {
  animation-delay: 300ms;
}

.animate-stagger:nth-child(7) {
  animation-delay: 350ms;
}

.animate-stagger:nth-child(8) {
  animation-delay: 400ms;
}

.animate-stagger:nth-child(9) {
  animation-delay: 450ms;
}

.animate-stagger:nth-child(10) {
  animation-delay: 500ms;
}

.animate-stagger:nth-child(11) {
  animation-delay: 550ms;
}

.animate-stagger:nth-child(12) {
  animation-delay: 600ms;
}

.animate-stagger:nth-child(13) {
  animation-delay: 650ms;
}

.animate-stagger:nth-child(14) {
  animation-delay: 700ms;
}

.animate-stagger:nth-child(15) {
  animation-delay: 750ms;
}

.animate-stagger:nth-child(16) {
  animation-delay: 800ms;
}

.animate-stagger:nth-child(17) {
  animation-delay: 850ms;
}

.animate-stagger:nth-child(18) {
  animation-delay: 900ms;
}

.animate-stagger:nth-child(19) {
  animation-delay: 950ms;
}

.animate-stagger:nth-child(20) {
  animation-delay: 1000ms;
}

.is-entering {
  animation: view-slide-in 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.is-leaving {
  animation: view-slide-out 200ms cubic-bezier(0.4, 0, 1, 1);
}

.fade-in {
  animation: view-fade-in 300ms cubic-bezier(0, 0, 0.2, 1);
}

.shake {
  animation: shard-shake 300ms cubic-bezier(0.4, 0, 1, 1);
}

@media (prefers-reduced-motion: reduce) {
  .animate-stagger,
  .is-entering,
  .is-leaving,
  .fade-in,
  .shake {
    animation: none !important;
    transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  @keyframes shard-enter {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes view-slide-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
}
/**
 * 凝釉设计系统入口 (NingYou Design System Entry)
 * KAIROS 任务视图 UI 重设计
 */
/**
 * 开片纹理 (Crackle Glaze Pattern)
 * SVG pattern + CSS animation
 */
.crackle-texture {
  position: relative;
}

.crackle-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='crackle' patternUnits='userSpaceOnUse' width='100' height='100'%3E%3Cpath d='M0 50 Q25 45 50 50 T100 50' stroke='%232D3B36' stroke-width='0.5' fill='none' opacity='0.08'/%3E%3Cpath d='M50 0 Q45 25 50 50 T50 100' stroke='%232D3B36' stroke-width='0.5' fill='none' opacity='0.06'/%3E%3Cpath d='M20 20 Q35 30 30 45' stroke='%232D3B36' stroke-width='0.3' fill='none' opacity='0.05'/%3E%3Cpath d='M70 60 Q85 70 80 85' stroke='%232D3B36' stroke-width='0.3' fill='none' opacity='0.05'/%3E%3Cpath d='M10 80 Q25 75 40 80' stroke='%232D3B36' stroke-width='0.3' fill='none' opacity='0.04'/%3E%3Cpath d='M60 10 Q75 15 80 30' stroke='%232D3B36' stroke-width='0.3' fill='none' opacity='0.04'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='200' height='200' fill='url(%23crackle)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
  z-index: 1;
  border-radius: inherit;
}

.crackle-texture:hover::before, .crackle-texture.is-active::before {
  opacity: 1;
}

.crackle-texture-dark {
  position: relative;
}

.crackle-texture-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='crackle' patternUnits='userSpaceOnUse' width='100' height='100'%3E%3Cpath d='M0 50 Q25 45 50 50 T100 50' stroke='%23FFFFFF' stroke-width='0.5' fill='none' opacity='0.15'/%3E%3Cpath d='M50 0 Q45 25 50 50 T50 100' stroke='%23FFFFFF' stroke-width='0.5' fill='none' opacity='0.12'/%3E%3Cpath d='M20 20 Q35 30 30 45' stroke='%23FFFFFF' stroke-width='0.3' fill='none' opacity='0.1'/%3E%3Cpath d='M70 60 Q85 70 80 85' stroke='%23FFFFFF' stroke-width='0.3' fill='none' opacity='0.1'/%3E%3Cpath d='M10 80 Q25 75 40 80' stroke='%23FFFFFF' stroke-width='0.3' fill='none' opacity='0.08'/%3E%3Cpath d='M60 10 Q75 15 80 30' stroke='%23FFFFFF' stroke-width='0.3' fill='none' opacity='0.08'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='200' height='200' fill='url(%23crackle)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
  z-index: 1;
  border-radius: inherit;
}

.crackle-texture-dark:hover::before, .crackle-texture-dark.is-active::before {
  opacity: 0.6;
}

.crackle-texture-persistent {
  position: relative;
}

.crackle-texture-persistent::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='crackle' patternUnits='userSpaceOnUse' width='100' height='100'%3E%3Cpath d='M0 50 Q25 45 50 50 T100 50' stroke='%23FFFFFF' stroke-width='0.5' fill='none' opacity='0.15'/%3E%3Cpath d='M50 0 Q45 25 50 50 T50 100' stroke='%23FFFFFF' stroke-width='0.5' fill='none' opacity='0.12'/%3E%3Cpath d='M20 20 Q35 30 30 45' stroke='%23FFFFFF' stroke-width='0.3' fill='none' opacity='0.1'/%3E%3Cpath d='M70 60 Q85 70 80 85' stroke='%23FFFFFF' stroke-width='0.3' fill='none' opacity='0.1'/%3E%3Cpath d='M10 80 Q25 75 40 80' stroke='%23FFFFFF' stroke-width='0.3' fill='none' opacity='0.08'/%3E%3Cpath d='M60 10 Q75 15 80 30' stroke='%23FFFFFF' stroke-width='0.3' fill='none' opacity='0.08'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='200' height='200' fill='url(%23crackle)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
  z-index: 1;
  border-radius: inherit;
  opacity: 0.5;
}

@keyframes crackle-shift {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 150px 150px;
  }
}
@keyframes crackle-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.05;
  }
}
.crackle-flowing::before {
  animation: crackle-shift 60s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .crackle-texture::before,
  .crackle-texture-dark::before,
  .crackle-flowing::before {
    animation: none;
    transition: none;
  }
}
/**
 * 凝釉设计系统入口 (NingYou Design System Entry)
 * KAIROS 任务视图 UI 重设计
 */
/**
 * 凝釉设计令牌 (NingYou Design Tokens)
 * 五窑色系 + 四象限色系 + 间距/字体/阴影
 */
:root {
  --ny-yingqing: #E8F4F2;
  --ny-tianqing: #B8D4CE;
  --ny-ruqing: #7EB5A6;
  --ny-longquan: #4A9B87;
  --ny-jianzhan: #2D3B36;
  --ny-warm-ochre: #C17F59;
  --ny-celadon: #7EB5A6;
  --ny-rice-glaze: #D4C4A8;
  --ny-ash-glaze: #A8A8A0;
  --ny-shadow-raised: 0 1px 2px rgba(45, 59, 54, 0.05), 0 2px 4px rgba(45, 59, 54, 0.05);
  --ny-shadow-floating: 0 4px 8px rgba(45, 59, 54, 0.08), 0 8px 16px rgba(45, 59, 54, 0.08);
  --ny-duration-fast: 200ms;
  --ny-duration-normal: 300ms;
  --ny-ease-water: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ny-ease-wood: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ny-ease-metal: cubic-bezier(0.4, 0, 0.2, 1);
}

/**
 * 瓷片 (Shard) - 任务卡片组件
 * 简洁白底卡片，无陶瓷纹理
 */
.shard-task {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  overflow: visible;
  box-shadow: none;
}

.shard-task::before, .shard-task::after {
  display: none;
}

.shard-task:hover {
  background: #FAFAF9;
  border-color: rgba(0, 0, 0, 0.1);
  transform: none;
  box-shadow: none;
}

.shard-task:hover .shard-actions {
  opacity: 1;
}

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

.shard-title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #292524;
  line-height: 1.4;
  white-space: normal;
  overflow: visible;
}

.shard-description {
  margin: 0;
  font-size: 12px;
  color: #A8A29E;
  line-height: 1.4;
}

.shard-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 12px;
  color: #78716C;
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.meta-icon {
  font-size: 14px;
}

.meta-board {
  font-size: 11px;
  color: #A8A29E;
}

.shard-actions {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 10;
}

.shard-task.is-selected {
  border-color: #A8A29E;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
  transform: none;
}

.shard-task.is-dragging {
  transform: scale(0.95) rotate(2deg);
  box-shadow: 0 12px 24px rgba(45, 59, 54, 0.15), 0 24px 48px rgba(45, 59, 54, 0.15);
  opacity: 0.9;
  z-index: 1000;
  cursor: grabbing;
}

.shard-task.is-done {
  background: #FAFAF9;
  border-color: #F5F5F4;
}

.shard-task.is-done .shard-title {
  color: #A8A29E;
  text-decoration: line-through;
}

.shard-task[data-priority=urgent-important] {
  border-left: 3px solid #C17F59;
}

.shard-task[data-priority=not-urgent-important] {
  border-left: 3px solid #3B82F6;
}

.shard-task[data-priority=urgent-not-important] {
  border-left: 3px solid #D97706;
}

.shard-task[data-priority=not-urgent-not-important] {
  border-left: 3px solid #D6D3D1;
}

@media (max-width: 768px) {
  .shard-actions {
    opacity: 1;
    position: static;
    transform: none;
    margin-top: 8px;
    justify-content: flex-end;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shard-task {
    transition: none;
  }
  .shard-task.is-dragging {
    transform: scale(0.98);
  }
}
/**
 * 凝釉设计系统入口 (NingYou Design System Entry)
 * KAIROS 任务视图 UI 重设计
 */
/**
 * 凝釉设计系统入口 (NingYou Design System Entry)
 * KAIROS 任务视图 UI 重设计
 */
/**
 * 凝釉混入工具 (NingYou Mixins)
 */
/**
 * 瓷钮 (Porcelain Button) - 按钮组件
 */
.porcelain-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(126, 181, 166, 0.25);
}

.porcelain-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 20px;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: white;
  background: #7EB5A6;
  border: 1px solid #7EB5A6;
  border-radius: 8px;
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 100ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.porcelain-btn:hover {
  background: rgb(100.0729064039, 166.1270935961, 148.1123152709);
  border-color: rgb(100.0729064039, 166.1270935961, 148.1123152709);
}

.porcelain-btn:active {
  transform: scale(0.98);
}

.porcelain-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.porcelain-btn--secondary {
  color: #7EB5A6;
  background: transparent;
  border-color: #7EB5A6;
}

.porcelain-btn--secondary:hover {
  background: rgba(126, 181, 166, 0.1);
}

.porcelain-btn--ghost {
  color: #2D3B36;
  background: transparent;
  border-color: transparent;
}

.porcelain-btn--ghost:hover {
  background: rgba(45, 59, 54, 0.06);
}

.porcelain-btn--danger {
  background: #C17F59;
  border-color: #C17F59;
}

.porcelain-btn--danger:hover {
  background: rgb(175.6105263158, 105.7894736842, 65.5894736842);
  border-color: rgb(175.6105263158, 105.7894736842, 65.5894736842);
}

.porcelain-btn-icon {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.porcelain-btn-icon:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(126, 181, 166, 0.25);
}

.porcelain-btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 9999px;
  background: rgba(232, 244, 242, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid #B8D4CE;
  color: #2D3B36;
  font-size: 14px;
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.porcelain-btn-icon:hover {
  background: #7EB5A6;
  border-color: #7EB5A6;
  color: white;
  transform: scale(1.1);
}

.porcelain-btn-icon:active {
  transform: scale(0.95);
}

.porcelain-btn-icon--sm {
  width: 24px;
  height: 24px;
  font-size: 12px;
}

.porcelain-btn-icon--lg {
  width: 44px;
  height: 44px;
  font-size: 18px;
}

.porcelain-btn--sm {
  min-height: 32px;
  padding: 4px 12px;
  font-size: 12px;
}

.porcelain-btn--lg {
  min-height: 48px;
  padding: 12px 32px;
  font-size: 16px;
}

.porcelain-btn--add:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(126, 181, 166, 0.25);
}

.porcelain-btn--add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 12px;
  color: rgba(45, 59, 54, 0.6);
  background: rgba(255, 255, 255, 0.5);
  border: 1px dashed rgba(45, 59, 54, 0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.porcelain-btn--add:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: #7EB5A6;
  border-style: solid;
  color: #7EB5A6;
}

.porcelain-btn--loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.porcelain-btn--loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 9999px;
  animation: btn-spin 0.8s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .porcelain-btn,
  .porcelain-btn-icon {
    transition: none;
  }
  .porcelain-btn:hover,
  .porcelain-btn-icon:hover {
    transform: none;
  }
  .porcelain-btn:active,
  .porcelain-btn-icon:active {
    transform: none;
  }
  .porcelain-btn--loading::after {
    animation: none;
  }
}
/**
 * 凝釉设计系统入口 (NingYou Design System Entry)
 * KAIROS 任务视图 UI 重设计
 */
/**
 * 瓷签 (Glaze Tag) - 标签组件
 */
.glaze-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  color: #2D3B36;
  background: rgba(184, 212, 206, 0.2);
  border: 1px solid rgba(184, 212, 206, 0.4);
  border-radius: 4px;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.glaze-tag:hover {
  background: rgba(184, 212, 206, 0.3);
  border-color: rgba(184, 212, 206, 0.6);
}

.glaze-tag--q1 {
  background: rgba(193, 127, 89, 0.15);
  border-color: rgba(193, 127, 89, 0.3);
  color: rgb(149.6184210526, 90.1315789474, 55.8815789474);
}

.glaze-tag--q1:hover {
  background: rgba(193, 127, 89, 0.25);
}

.glaze-tag--q2 {
  background: rgba(126, 181, 166, 0.15);
  border-color: rgba(126, 181, 166, 0.3);
  color: rgb(84.0246305419, 146.4753694581, 129.4433497537);
}

.glaze-tag--q2:hover {
  background: rgba(126, 181, 166, 0.25);
}

.glaze-tag--q3 {
  background: rgba(212, 196, 168, 0.2);
  border-color: rgba(212, 196, 168, 0.4);
  color: rgb(168.9807692308, 137.9038461538, 83.5192307692);
}

.glaze-tag--q3:hover {
  background: rgba(212, 196, 168, 0.3);
}

.glaze-tag--q4 {
  background: rgba(168, 168, 160, 0.15);
  border-color: rgba(168, 168, 160, 0.3);
  color: rgb(117.967032967, 117.967032967, 108.032967033);
}

.glaze-tag--q4:hover {
  background: rgba(168, 168, 160, 0.25);
}

.glaze-tag--sm {
  padding: 1px 4px;
  font-size: 10px;
}

.glaze-tag--lg {
  padding: 4px 12px;
  font-size: 12px;
}

.glaze-tag--clickable {
  cursor: pointer;
}

.glaze-tag--clickable:active {
  transform: scale(0.95);
}

.glaze-tag--removable {
  padding-right: 4px;
}

.glaze-tag--removable .glaze-tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  font-size: 10px;
  color: inherit;
  opacity: 0.6;
  border-radius: 9999px;
  cursor: pointer;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.glaze-tag--removable .glaze-tag-remove:hover {
  opacity: 1;
  background: rgba(45, 59, 54, 0.1);
}

/**
 * 凝釉设计系统入口 (NingYou Design System Entry)
 * KAIROS 任务视图 UI 重设计
 */
/**
 * 窑徽章 (Kiln Badge) - 徽章组件
 */
.kiln-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 600;
  color: white;
  background: #7EB5A6;
  border-radius: 9999px;
  white-space: nowrap;
}

.kiln-badge--priority.q1 {
  background: #C17F59;
}

.kiln-badge--priority.q2 {
  background: #7EB5A6;
}

.kiln-badge--priority.q3 {
  background: #D4C4A8;
  color: #2D3B36;
}

.kiln-badge--priority.q4 {
  background: #A8A8A0;
  color: #2D3B36;
}

.kiln-badge--status.todo {
  background: #B8D4CE;
  color: #2D3B36;
}

.kiln-badge--status.doing {
  background: #7EB5A6;
}

.kiln-badge--status.review {
  background: #D4C4A8;
  color: #2D3B36;
}

.kiln-badge--status.done {
  background: #A8A8A0;
  color: #2D3B36;
}

.kiln-badge--count {
  background: rgba(45, 59, 54, 0.1);
  color: #2D3B36;
}

.kiln-badge--sm {
  min-width: 16px;
  height: 16px;
  font-size: 10px;
}

.kiln-badge--lg {
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  font-size: 12px;
}

.kiln-badge--dot {
  min-width: 8px;
  width: 8px;
  height: 8px;
  padding: 0;
}

.kiln-badge--dot.q1 {
  background: #C17F59;
}

.kiln-badge--dot.q2 {
  background: #7EB5A6;
}

.kiln-badge--dot.q3 {
  background: #D4C4A8;
}

.kiln-badge--dot.q4 {
  background: #A8A8A0;
}

.kiln-badge--pulse {
  position: relative;
}

.kiln-badge--pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: badge-pulse 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

@keyframes badge-pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kiln-badge--pulse::after {
    animation: none;
  }
}
/**
 * 凝釉设计系统入口 (NingYou Design System Entry)
 * KAIROS 任务视图 UI 重设计
 */
/**
 * 凝釉设计令牌 (NingYou Design Tokens)
 * 五窑色系 + 四象限色系 + 间距/字体/阴影
 */
:root {
  --ny-yingqing: #E8F4F2;
  --ny-tianqing: #B8D4CE;
  --ny-ruqing: #7EB5A6;
  --ny-longquan: #4A9B87;
  --ny-jianzhan: #2D3B36;
  --ny-warm-ochre: #C17F59;
  --ny-celadon: #7EB5A6;
  --ny-rice-glaze: #D4C4A8;
  --ny-ash-glaze: #A8A8A0;
  --ny-shadow-raised: 0 1px 2px rgba(45, 59, 54, 0.05), 0 2px 4px rgba(45, 59, 54, 0.05);
  --ny-shadow-floating: 0 4px 8px rgba(45, 59, 54, 0.08), 0 8px 16px rgba(45, 59, 54, 0.08);
  --ny-duration-fast: 200ms;
  --ny-duration-normal: 300ms;
  --ny-ease-water: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ny-ease-wood: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ny-ease-metal: cubic-bezier(0.4, 0, 0.2, 1);
}

/**
 * 四象限视图 (Matrix View)
 * 艾森豪威尔矩阵：Y=重要性(上高下低)，X=紧急性(左低右高)
 */
.matrix-grid-ny {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
  height: 100%;
  min-height: 500px;
  padding: 24px;
  background: transparent;
}

.matrix-quadrant-ny {
  display: flex;
  flex-direction: column;
  padding: 16px;
  min-height: 200px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.matrix-quadrant-ny::before {
  display: none;
}

.matrix-quadrant-ny.q2-not-urgent-important {
  grid-area: 1/1/2/2;
  background: #F6F9FE;
  border-color: rgba(59, 130, 246, 0.1);
}

.matrix-quadrant-ny.q1-urgent-important {
  grid-area: 1/2/2/3;
  background: #FDF8F5;
  border-color: rgba(193, 127, 89, 0.12);
}

.matrix-quadrant-ny.q4-not-urgent-not-important {
  grid-area: 2/1/3/2;
  background: #FAFAF9;
  border-color: rgba(168, 162, 158, 0.15);
}

.matrix-quadrant-ny.q3-urgent-not-important {
  grid-area: 2/2/3/3;
  background: #FEFCF6;
  border-color: rgba(217, 119, 6, 0.12);
}

.quadrant-header-ny {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.quadrant-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.quadrant-icon-ny {
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #A8A29E;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.quadrant-title-ny {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #292524;
}

.quadrant-subtitle-ny {
  margin: 0;
  font-size: 12px;
  color: #A8A29E;
  margin-top: 2px;
}

.matrix-quadrant-ny.q1-urgent-important .quadrant-title-ny,
.matrix-quadrant-ny.q2-not-urgent-important .quadrant-title-ny,
.matrix-quadrant-ny.q3-urgent-not-important .quadrant-title-ny,
.matrix-quadrant-ny.q4-not-urgent-not-important .quadrant-title-ny {
  color: #292524;
}

.matrix-quadrant-ny.q1-urgent-important .quadrant-subtitle-ny,
.matrix-quadrant-ny.q2-not-urgent-important .quadrant-subtitle-ny,
.matrix-quadrant-ny.q3-urgent-not-important .quadrant-subtitle-ny,
.matrix-quadrant-ny.q4-not-urgent-not-important .quadrant-subtitle-ny {
  color: #A8A29E;
}

.quadrant-count-ny {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 9999px;
}

.matrix-quadrant-ny.q1-urgent-important .quadrant-count-ny {
  background: rgba(193, 127, 89, 0.1);
  color: #C17F59;
}

.matrix-quadrant-ny.q2-not-urgent-important .quadrant-count-ny {
  background: rgba(59, 130, 246, 0.1);
  color: #3B82F6;
}

.matrix-quadrant-ny.q3-urgent-not-important .quadrant-count-ny {
  background: rgba(217, 119, 6, 0.1);
  color: #D97706;
}

.matrix-quadrant-ny.q4-not-urgent-not-important .quadrant-count-ny {
  background: #F5F5F4;
  color: #78716C;
}

.quadrant-tasks-ny {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding-right: 4px;
}

.quadrant-tasks-ny::-webkit-scrollbar {
  width: 4px;
}

.quadrant-tasks-ny::-webkit-scrollbar-track {
  background: transparent;
}

.quadrant-tasks-ny::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 999px;
}

.quadrant-tasks-ny::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.22);
}

.matrix-quadrant-ny .shard-task {
  border-left-width: 1px;
  border-left-color: rgba(0, 0, 0, 0.06);
}

.quadrant-empty-ny {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 24px 16px;
  text-align: center;
  color: #A8A29E;
  font-size: 13px;
}

.matrix-add-task-ny {
  color: #A8A29E;
  background: transparent;
  border: none;
  font-size: 13px;
  padding: 8px 0;
  cursor: pointer;
  transition: color 0.15s ease;
}

.matrix-add-task-ny:hover {
  color: #57534E;
  background: transparent;
  border: none;
}

.matrix-quadrant-ny.is-drag-over {
  border-color: #D6D3D1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

@media (max-width: 768px) {
  .matrix-grid-ny {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: auto;
    padding: 16px;
  }
  .matrix-quadrant-ny {
    padding: 0;
    overflow: visible;
    border-radius: 8px;
    margin-bottom: 8px;
  }
  .matrix-quadrant-ny.is-collapsed .quadrant-tasks-ny {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
  }
  .matrix-quadrant-ny.is-collapsed .accordion-toggle::after {
    transform: rotate(0deg);
  }
  .matrix-quadrant-ny.is-expanded .quadrant-tasks-ny {
    max-height: 400px;
    opacity: 1;
  }
  .matrix-quadrant-ny.is-expanded .accordion-toggle::after {
    transform: rotate(180deg);
  }
  .quadrant-header-ny {
    padding: 12px;
    margin: 0;
    cursor: pointer;
    border-radius: 8px;
  }
  .accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
  }
  .accordion-toggle::after {
    content: "▼";
    font-size: 10px;
    color: inherit;
    opacity: 0.7;
    transition: transform 0.2s ease;
  }
  .quadrant-tasks-ny {
    padding: 12px;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .matrix-quadrant-ny.is-expanded .quadrant-tasks-ny {
    animation: none;
  }
  .accordion-toggle::after {
    transition: none;
  }
}
/**
 * 凝釉设计系统入口 (NingYou Design System Entry)
 * KAIROS 任务视图 UI 重设计
 */
/**
 * 看板视图 (Kanban View)
 * 干净列布局，细分隔线
 */
.kanban-container-ny {
  display: flex;
  gap: 16px;
  height: 100%;
  padding: 24px;
  overflow-x: auto;
}

.kanban-column-ny {
  flex: 1 1 0;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  max-height: none;
}

.kanban-column-ny + .kanban-column-ny {
  border-left: 1px solid rgba(214, 211, 209, 0.8);
  padding-left: 16px;
}

.kanban-column-ny[data-status=todo],
.kanban-column-ny[data-status=doing],
.kanban-column-ny[data-status=review],
.kanban-column-ny[data-status=done] {
  border: none;
  border-left: none;
  background: transparent;
}

.kanban-column-ny[data-status=todo] .kanban-column-header-ny,
.kanban-column-ny[data-status=doing] .kanban-column-header-ny,
.kanban-column-ny[data-status=review] .kanban-column-header-ny,
.kanban-column-ny[data-status=done] .kanban-column-header-ny {
  background: transparent;
  border-bottom: none;
}

.kanban-column-header-ny {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 12px 0;
  flex-shrink: 0;
  background: transparent;
  border-bottom: none;
}

.kanban-column-title-ny {
  display: flex;
  align-items: center;
  gap: 8px;
}

.column-icon-ny {
  font-size: 18px;
}

.column-name-ny {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #44403C;
  letter-spacing: 0.02em;
}

.column-name-ny::before {
  display: none;
}

.column-count-ny {
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(120, 113, 108, 0.1);
  color: #57534E;
  border-radius: 10px;
}

.kanban-column-content-ny {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 0;
  overflow-y: auto;
  overflow-x: visible;
}

.kanban-column-content-ny::-webkit-scrollbar {
  width: 4px;
}

.kanban-column-content-ny::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 2px;
}

.kanban-empty-ny {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
  color: #A8A29E;
  font-size: 13px;
  border: 1px dashed #E7E5E4;
  border-radius: 8px;
}

.kanban-add-task-ny {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  padding: 8px 0;
  margin-top: auto;
  font-size: 13px;
  color: #A8A29E;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.kanban-add-task-ny:hover {
  color: #57534E;
  background: transparent;
  border: none;
}

.kanban-column-ny.is-drag-over {
  box-shadow: none;
  border-color: transparent;
}

.kanban-column-ny.is-drag-over .kanban-column-content-ny {
  background: #FAFAF9;
  border-radius: 8px;
}

@media (max-width: 1024px) {
  .kanban-column-ny {
    flex: 0 0 240px;
    min-width: 240px;
  }
}
@media (max-width: 768px) {
  .kanban-container-ny {
    flex-direction: column;
    overflow-x: visible;
    overflow-y: auto;
    padding: 16px;
    gap: 12px;
  }
  .kanban-column-ny {
    flex: none;
    width: 100%;
  }
  .kanban-column-ny + .kanban-column-ny {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(214, 211, 209, 0.6);
    padding-top: 12px;
  }
  .kanban-column-content-ny {
    max-height: 250px;
  }
}
/**
 * 凝釉设计系统入口 (NingYou Design System Entry)
 * KAIROS 任务视图 UI 重设计
 */
/**
 * 凝釉设计系统入口 (NingYou Design System Entry)
 * KAIROS 任务视图 UI 重设计
 */
/**
 * 凝釉混入工具 (NingYou Mixins)
 */
/**
 * 凝釉设计系统入口 (NingYou Design System Entry)
 * KAIROS 任务视图 UI 重设计
 */
/**
 * 凝釉动画系统 (NingYou Animation System)
 * 五行缓动 + 关键帧动画
 */
@keyframes shard-enter {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes shard-exit {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.9);
  }
}
@keyframes shard-complete {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
}
@keyframes shard-shake {
  0%, 100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-4px);
  }
  40% {
    transform: translateX(4px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
}
@keyframes view-slide-in {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes view-slide-out {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-20px);
  }
}
@keyframes view-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes pulse-border {
  0%, 100% {
    border-color: rgba(126, 181, 166, 0.4);
  }
  50% {
    border-color: rgba(126, 181, 166, 0.8);
  }
}
@keyframes drop-zone-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(126, 181, 166, 0.3);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(126, 181, 166, 0);
  }
}
@keyframes crackle-loading {
  0% {
    background-position: 0 0;
    opacity: 0.03;
  }
  50% {
    opacity: 0.06;
  }
  100% {
    background-position: 100px 100px;
    opacity: 0.03;
  }
}
@keyframes accordion-expand {
  0% {
    max-height: 0;
    opacity: 0;
  }
  100% {
    max-height: 500px;
    opacity: 1;
  }
}
@keyframes accordion-collapse {
  0% {
    max-height: 500px;
    opacity: 1;
  }
  100% {
    max-height: 0;
    opacity: 0;
  }
}
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}
@keyframes ceramic-shine {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.animate-stagger {
  animation: shard-enter 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  animation-fill-mode: both;
}

.animate-stagger:nth-child(1) {
  animation-delay: 50ms;
}

.animate-stagger:nth-child(2) {
  animation-delay: 100ms;
}

.animate-stagger:nth-child(3) {
  animation-delay: 150ms;
}

.animate-stagger:nth-child(4) {
  animation-delay: 200ms;
}

.animate-stagger:nth-child(5) {
  animation-delay: 250ms;
}

.animate-stagger:nth-child(6) {
  animation-delay: 300ms;
}

.animate-stagger:nth-child(7) {
  animation-delay: 350ms;
}

.animate-stagger:nth-child(8) {
  animation-delay: 400ms;
}

.animate-stagger:nth-child(9) {
  animation-delay: 450ms;
}

.animate-stagger:nth-child(10) {
  animation-delay: 500ms;
}

.animate-stagger:nth-child(11) {
  animation-delay: 550ms;
}

.animate-stagger:nth-child(12) {
  animation-delay: 600ms;
}

.animate-stagger:nth-child(13) {
  animation-delay: 650ms;
}

.animate-stagger:nth-child(14) {
  animation-delay: 700ms;
}

.animate-stagger:nth-child(15) {
  animation-delay: 750ms;
}

.animate-stagger:nth-child(16) {
  animation-delay: 800ms;
}

.animate-stagger:nth-child(17) {
  animation-delay: 850ms;
}

.animate-stagger:nth-child(18) {
  animation-delay: 900ms;
}

.animate-stagger:nth-child(19) {
  animation-delay: 950ms;
}

.animate-stagger:nth-child(20) {
  animation-delay: 1000ms;
}

.is-entering {
  animation: view-slide-in 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.is-leaving {
  animation: view-slide-out 200ms cubic-bezier(0.4, 0, 1, 1);
}

.fade-in {
  animation: view-fade-in 300ms cubic-bezier(0, 0, 0.2, 1);
}

.shake {
  animation: shard-shake 300ms cubic-bezier(0.4, 0, 1, 1);
}

@media (prefers-reduced-motion: reduce) {
  .animate-stagger,
  .is-entering,
  .is-leaving,
  .fade-in,
  .shake {
    animation: none !important;
    transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  @keyframes shard-enter {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes view-slide-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
}
/**
 * 项目视图 (Project View)
 * 左侧项目列表 + 右侧任务网格
 */
.project-layout-ny {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  height: 100%;
}

.project-sidebar-ny {
  background: white;
  border: 1px solid #B8D4CE;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(45, 59, 54, 0.05), 0 2px 4px rgba(45, 59, 54, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  border-radius: 0;
  border-right: 1px solid rgba(184, 212, 206, 0.3);
  overflow: hidden;
}

.project-sidebar-header-ny {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(184, 212, 206, 0.2);
}

.project-sidebar-title-ny {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #2D3B36;
}

.project-list-ny {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.project-list-ny::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.project-list-ny::-webkit-scrollbar-track {
  background: transparent;
}

.project-list-ny::-webkit-scrollbar-thumb {
  background: rgba(45, 59, 54, 0.15);
  border-radius: 9999px;
}

.project-list-ny::-webkit-scrollbar-thumb:hover {
  background: rgba(45, 59, 54, 0.25);
}

.project-item-ny:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(126, 181, 166, 0.25);
}

.project-item-ny {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.project-item-ny:hover {
  background: rgba(184, 212, 206, 0.15);
}

.project-item-ny.is-active {
  background: rgba(126, 181, 166, 0.15);
  color: #4A9B87;
}

.project-item-ny.is-active .project-item-icon-ny {
  color: #7EB5A6;
}

.project-item-icon-ny {
  font-size: 18px;
  flex-shrink: 0;
}

.project-item-name-ny {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}

.project-item-count-ny {
  font-size: 11px;
  color: rgba(45, 59, 54, 0.5);
}

.project-item-ny.is-child {
  padding-left: 52px;
}

.project-item-ny.is-starred .project-item-icon-ny::before {
  content: "★";
  color: #C17F59;
}

.project-content-ny {
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow: hidden;
}

.project-content-header-ny {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.project-content-title-ny {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #2D3B36;
}

.project-content-actions-ny {
  display: flex;
  align-items: center;
  gap: 8px;
}

.project-tasks-grid-ny {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  overflow-y: auto;
  padding-right: 8px;
}

.project-tasks-grid-ny::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.project-tasks-grid-ny::-webkit-scrollbar-track {
  background: transparent;
}

.project-tasks-grid-ny::-webkit-scrollbar-thumb {
  background: rgba(45, 59, 54, 0.15);
  border-radius: 9999px;
}

.project-tasks-grid-ny::-webkit-scrollbar-thumb:hover {
  background: rgba(45, 59, 54, 0.25);
}

.project-empty-ny {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  padding: 52px;
  text-align: center;
  color: rgba(45, 59, 54, 0.5);
}

.project-empty-ny .empty-icon {
  font-size: 48px;
  opacity: 0.3;
}

.project-empty-ny .empty-text {
  font-size: 16px;
}

.project-empty-ny .empty-hint {
  font-size: 12px;
}

.kanban-column-ny + .kanban-column-ny {
  border-left: 1px solid rgba(214, 211, 209, 0.8);
  padding-left: 16px;
}

.project-add-task-text {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  color: rgba(45, 59, 54, 0.45);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.project-add-task-text:hover {
  color: rgba(45, 59, 54, 0.75);
  background: rgba(184, 212, 206, 0.1);
}

@media (max-width: 1024px) {
  .project-layout-ny {
    grid-template-columns: 220px 1fr;
  }
}
@media (max-width: 768px) {
  .project-layout-ny {
    grid-template-columns: 1fr;
  }
  .project-sidebar-ny {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    max-height: 50vh;
    border-radius: 16px 16px 0 0;
    border-right: none;
    border-top: 1px solid rgba(184, 212, 206, 0.3);
    z-index: 100;
    transform: translateY(calc(100% - 56px));
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .project-sidebar-ny.is-expanded {
    transform: translateY(0);
  }
  .project-sidebar-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    cursor: pointer;
  }
  .project-sidebar-handle::before {
    content: "";
    width: 40px;
    height: 4px;
    background: rgba(45, 59, 54, 0.2);
    border-radius: 9999px;
  }
  .project-sidebar-header-ny {
    display: none;
  }
  .project-content-ny {
    padding-bottom: 80px;
  }
  .project-tasks-grid-ny {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .project-sidebar-ny {
    transition: none;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  line-height: 1.5;
  min-height: 100%;
  background: #FAFAF9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: "Noto Serif SC", "Georgia", "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.5;
  color: #1C1917;
  background: #FAFAF9;
  min-height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-app-region: no-drag;
}

input, textarea, [contenteditable] {
  user-select: text;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#app {
  height: 100vh;
  width: 100vw;
  position: relative;
}

.main-view {
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  height: calc(100% - 60px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms cubic-bezier(0.25, 0.1, 0.25, 1), visibility 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.main-view.active {
  opacity: 1;
  visibility: visible;
}

#task-view {
  top: 60px;
  height: calc(100% - 60px);
}

.activity-empty {
  padding: 48px 0;
  text-align: center;
  font-size: 14px;
  color: #A8A29E;
}

.three-column-layout {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  height: 100%;
  gap: 0;
}
@media (width <= 1024px) {
  .three-column-layout {
    grid-template-columns: 240px 1fr 240px;
  }
}
@media (width <= 768px) {
  .three-column-layout {
    grid-template-columns: 1fr;
  }
  .three-column-layout .left-panel,
  .three-column-layout .right-panel {
    display: none;
  }
}

/* 移除重复的 .left-panel 基础块，保留下方最终实现 */
.right-panel {
  background: #FDFCFB;
  width: 320px;
  height: calc(100vh - 60px);
  border-left: 1px solid #E7E5E4;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
}

.activity-log {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 12px 16px 14px 16px;
}

.activity-header {
  font-size: 14px;
  font-weight: 600;
  color: #78716C;
  line-height: 1;
  letter-spacing: 0.02em;
  margin: 0 0 4px 0;
  padding: 0;
}

.activity-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

.activity-empty {
  padding: 32px 0;
  text-align: center;
  font-size: 14px;
  color: #A8A29E;
  line-height: 20px;
}

.activity-date-group {
  margin-bottom: 16px;
}

.activity-date-header {
  font-size: 12px;
  font-weight: 600;
  color: #78716C;
  line-height: 18px;
  margin-bottom: 8px;
  padding-left: 0;
}

.activity-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease-in-out;
}

.activity-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

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

.activity-item .activity-text,
.activity-item .activity-description {
  font-size: 14px;
  color: #44403C;
  line-height: 1.6;
}

.activity-item .activity-time {
  font-size: 13px;
  color: #78716C;
  margin-bottom: 4px;
}

.activity-item-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.activity-time {
  font-size: 13px;
  color: #78716C;
  line-height: 1;
  margin-bottom: 4px;
}

.activity-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  font-size: 11px;
  border-radius: 3px;
  line-height: 1;
}

.activity-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #78716C;
}

.activity-item-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.activity-description {
  font-size: 13px;
  color: #1C1917;
  line-height: 20px;
  word-break: break-word;
}

.activity-task-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.activity-task-name {
  font-size: 12px;
  color: #57534E;
  line-height: 18px;
}

.activity-project-name {
  font-size: 11px;
  color: #78716C;
  line-height: 16px;
}

.activity-type-badge.type-start {
  background: rgba(24, 144, 255, 0.1);
  color: #57534E;
}

.activity-type-badge.type-complete {
  background: rgba(82, 196, 26, 0.1);
  color: #65A30D;
}

.activity-type-badge.type-pause {
  background: rgba(140, 140, 140, 0.1);
  color: #78716C;
}

.activity-type-badge.type-update {
  background: rgba(250, 140, 22, 0.1);
  color: #D97706;
}

.left-panel {
  background: #FDFCFB;
  width: 280px;
  height: calc(100vh - 60px);
  border-right: 1px solid #E7E5E4;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.center-panel {
  background: transparent;
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.center-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  padding: 8vh 0 0;
  gap: 32px;
}

.center-panel .timer-section {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 520px;
  padding: 24px 16px;
  margin-bottom: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.center-panel .timer-section .mini-mode-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  -webkit-app-region: no-drag;
}

.center-panel .timer-section .mini-mode-btn:hover {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(43, 127, 255, 0.35);
}

.center-panel .timer-section .mini-mode-btn .mini-icon {
  width: 16px;
  height: 16px;
  color: #44403C;
  transition: color 0.2s ease;
}

.center-panel .timer-section .mini-mode-btn:hover .mini-icon {
  color: #57534E;
}

.task-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.task-priority,
.task-pomodoro {
  font-weight: 400;
  color: #57534E;
}

.compact-input-area {
  display: none !important;
}

.focus-compose {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 560px;
  padding: 24px;
  background: #FFFFFF;
  border: 1px solid #E7E5E4;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: translateY(-18%);
  transition: border-color 120ms cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.focus-compose.has-task {
  border-color: #78716C;
  box-shadow: 0 4px 6px rgba(87, 83, 78, 0.06), 0 2px 4px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.focus-compose.drag-over {
  border-color: #57534E;
  background: #F5F5F4;
}

.focus-compose-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.focus-compose-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #1C1917;
}

.focus-compose-icon {
  font-size: 18px;
}

.focus-selected-task {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #1C1917;
}

.focus-selected-task[hidden] {
  display: none;
}

.focus-selected-label {
  font-weight: 500;
  color: #44403C;
}

.focus-selected-name {
  font-weight: 500;
  color: #1C1917;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-panel-target {
  font-weight: 500;
  color: #1C1917;
}

.focus-compose-input {
  width: 100%;
  min-height: 150px;
  padding: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #1C1917;
  background: #FDFCFB;
  border: 1px solid #E7E5E4;
  border-radius: 12px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
  resize: none;
  transition: border-color 120ms cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
  font-family: inherit;
}

.focus-compose-input:focus {
  border-color: #57534E;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03), 0 0 0 3px rgba(87, 83, 78, 0.08);
  outline: none;
}

.focus-compose-input::placeholder {
  color: #A8A29E;
}

.focus-compose-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.focus-compose-hint {
  font-size: 12px;
  color: #78716C;
}

.focus-compose-send {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #E7E5E4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  color: #A8A29E;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: all 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.focus-compose-send:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.focus-compose-send:not(:disabled) {
  background: #57534E;
  color: white;
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.focus-compose-send:not(:disabled):hover {
  background: #44403C;
  box-shadow: 0 4px 6px rgba(87, 83, 78, 0.06), 0 2px 4px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.focus-compose-send:not(:disabled):active {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

.focus-compose-send-icon {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.panel-top-controls {
  padding: 16px 16px 0 16px;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.panel-top-controls .project-select {
  width: 100%;
  height: 36px;
  padding: 0 36px 0 12px;
  font-size: 14px;
  color: #1C1917;
  background: white;
  border: 1px solid #D6D3D1;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.2 4.2l2.8 3 2.8-3' stroke='%238c8c8c' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.panel-top-controls .project-select:hover {
  border-color: #57534E;
}
.panel-top-controls .project-select:focus {
  border-color: #57534E;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.16);
  outline: none;
}
.panel-top-controls .search-input {
  position: relative;
  width: 100%;
  height: 36px;
  padding: 0 12px 0 36px;
  font-size: 13px;
  color: #57534E;
  background: #FAFAF9;
  border: none;
  border-radius: 4px;
  transition: box-shadow 0.2s ease, border 0.2s ease, background 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.333 9.333l3.334 3.334' stroke='%23bfbfbf' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='6.167' cy='6.167' r='4.5' stroke='%23bfbfbf' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
}
.panel-top-controls .search-input::placeholder {
  color: #A8A29E;
}
.panel-top-controls .search-input:hover {
  background: #F5F5F4;
}
.panel-top-controls .search-input:focus {
  background: white;
  border: 1px solid #57534E;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.12);
  outline: none;
}

.search-section {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.left-panel .task-scroll-area {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 2px 8px !important;
  margin-top: 0 !important;
}
.left-panel .task-scroll-area::-webkit-scrollbar {
  width: 6px;
}
.left-panel .task-scroll-area::-webkit-scrollbar-track {
  background: transparent;
}
.left-panel .task-scroll-area::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 999px;
}
.left-panel .task-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.quick-guide-card {
  display: none;
}

.ceramic-card {
  background: white;
  border: 1px solid #B8D4CE;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(45, 59, 54, 0.05), 0 2px 4px rgba(45, 59, 54, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  padding: 24px;
  margin: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ceramic-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(87, 83, 78, 0.06), 0 2px 4px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.ceramic-card.clickable {
  cursor: pointer;
}
.ceramic-card.clickable:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ceramic-button, .quick-create-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 8px;
  cursor: pointer;
  transition: all 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ceramic-button:disabled, .quick-create-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ceramic-button, .quick-create-btn {
  background: #FFFFFF;
  color: #44403C;
  border: 1px solid #D6D3D1;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.ceramic-button:hover:not(:disabled), .quick-create-btn:hover:not(:disabled) {
  background: #FAFAF9;
  border-color: #A8A29E;
  color: #1C1917;
}
.ceramic-button, .quick-create-btn {
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 500;
  color: #1C1917;
  text-decoration: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ceramic-button:focus, .quick-create-btn:focus {
  outline: 2px solid #0891B2;
  outline-offset: 2px;
}
.ceramic-button:disabled, .quick-create-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}
.ceramic-button.small, .small.quick-create-btn {
  padding: 8px 16px;
  font-size: 14px;
}
.ceramic-button.large, .large.quick-create-btn {
  padding: 24px 32px;
  font-size: 18px;
}
.ceramic-button.primary, .primary.quick-create-btn {
  background: linear-gradient(135deg, #0891B2, rgb(6.2451612903, 113.1935483871, 138.9548387097));
  color: white;
}
.ceramic-button.primary:hover, .primary.quick-create-btn:hover {
  background: linear-gradient(135deg, rgb(9.7548387097, 176.8064516129, 217.0451612903), #0891B2);
}
.ceramic-button.success, .success.quick-create-btn {
  background: linear-gradient(135deg, #65A30D, rgb(77.5863636364, 125.2136363636, 9.9863636364));
  color: white;
}
.ceramic-button.success:hover, .success.quick-create-btn:hover {
  background: linear-gradient(135deg, rgb(124.4136363636, 200.7863636364, 16.0136363636), #65A30D);
}
.ceramic-button.warning, .warning.quick-create-btn {
  background: linear-gradient(135deg, #D97706, rgb(177.2977578475, 97.2278026906, 4.9022421525));
  color: white;
}
.ceramic-button.warning:hover, .warning.quick-create-btn:hover {
  background: linear-gradient(135deg, rgb(248.3757847534, 140.1802690583, 15.4242152466), #D97706);
}
.ceramic-button.danger, .danger.quick-create-btn {
  background: linear-gradient(135deg, #DC2626, rgb(187.0333333333, 30.1666666667, 30.1666666667));
  color: white;
}
.ceramic-button.danger:hover, .danger.quick-create-btn:hover {
  background: linear-gradient(135deg, rgb(225.6666666667, 73.1333333333, 73.1333333333), #DC2626);
}

.ceramic-input {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  border: 1px solid #D6D3D1;
  border-radius: 12px;
  padding: 16px;
  font-size: 16px;
  font-family: inherit;
  color: #1C1917;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}
.ceramic-input::placeholder {
  color: #78716C;
}
.ceramic-input:focus {
  outline: none;
  border-color: #0891B2;
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1), 0 4px 6px rgba(87, 83, 78, 0.06), 0 2px 4px rgba(87, 83, 78, 0.08);
}
.ceramic-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.left-panel .task-scroll-area .task-list {
  counter-reset: taskIndex;
}

.left-panel .task-item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 6px 10px !important;
  margin: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  transition: background 0.15s ease !important;
  cursor: pointer !important;
}
.left-panel .task-item:hover, .left-panel .task-item:focus-within {
  background: rgba(0, 0, 0, 0.03) !important;
  box-shadow: none !important;
  transform: none !important;
}
.left-panel .task-item.is-complete, .left-panel .task-item.checked {
  opacity: 0.45;
}
.left-panel .task-item.dragging {
  opacity: 0.8;
  background: rgba(0, 0, 0, 0.04) !important;
}

.left-panel .task-item .task-content,
.left-panel .task-item .task-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0 !important;
  cursor: pointer;
  flex: 1;
}

.left-panel .task-item .task-info[draggable=true] {
  cursor: grab;
}

.left-panel .task-item .task-info[draggable=true]:active {
  cursor: grabbing;
}

.left-panel .task-item .task-title {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #44403C !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.left-panel .task-item[data-priority=urgent-important] .task-title {
  color: #9B6356 !important;
}

.left-panel .task-item[data-priority=not-urgent-important] .task-title {
  color: #5B7A9E !important;
}

.left-panel .task-item[data-priority=urgent-not-important] .task-title {
  color: #A8845C !important;
}

.left-panel .task-item[data-priority=not-urgent-not-important] .task-title {
  color: #B0ADA8 !important;
}

.left-panel .task-item.is-done .task-title {
  color: #A8A29E !important;
  text-decoration: line-through;
}

.left-panel .task-item .task-project {
  font-size: 11px;
  color: #A8A29E;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.left-panel .task-item .task-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #A8A29E;
  flex-wrap: wrap;
}

.left-panel .task-item .task-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 11px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  border: 1px solid transparent;
  color: #57534E;
  background: #F5F5F4;
}

.left-panel .task-item .task-badge-priority.priority-urgent-important {
  background: #FFFBEB;
  color: #D97706;
  border-color: rgba(250, 140, 22, 0.25);
}

.left-panel .task-item .task-badge-priority.priority-not-urgent-important {
  background: #F7FEE7;
  color: #65A30D;
  border-color: rgba(82, 196, 26, 0.25);
}

.left-panel .task-item .task-badge-priority.priority-urgent-not-important {
  background: #FFFBEB;
  color: rgb(177.2977578475, 97.2278026906, 4.9022421525);
  border-color: rgba(212, 136, 6, 0.25);
}

.left-panel .task-item .task-badge-priority.priority-not-urgent-not-important {
  background: #F5F5F4;
  color: #78716C;
  border-color: rgba(140, 140, 140, 0.2);
}

.left-panel .task-item .task-badge-priority.priority-unknown {
  background: #FAFAF9;
  color: #78716C;
  border-color: rgba(140, 140, 140, 0.2);
}

.left-panel .task-item .task-badge-status {
  background: #ECFEFF;
  color: #57534E;
  border-color: rgba(24, 144, 255, 0.24);
}

.left-panel .task-item .task-badge-status.status-done {
  background: #F7FEE7;
  color: #65A30D;
  border-color: rgba(82, 196, 26, 0.24);
}

.left-panel .task-item .task-badge-status.status-archived,
.left-panel .task-item .task-badge-status.status-unknown {
  background: #F5F5F4;
  color: #78716C;
  border-color: rgba(140, 140, 140, 0.24);
}

.left-panel .task-add-entry {
  width: 100%;
  margin-top: 12px;
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  border: 1px dashed rgba(24, 144, 255, 0.45);
  background: rgba(230, 247, 255, 0.35);
  color: #57534E;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.left-panel .task-add-entry:hover,
.left-panel .task-add-entry:focus-visible {
  background: rgba(230, 247, 255, 0.65);
  border-color: rgba(24, 144, 255, 0.65);
  color: #44403C;
  outline: none;
}

.left-panel .task-add-icon {
  font-size: 18px;
  line-height: 1;
}

.left-panel .task-add-text {
  line-height: 1;
}

.empty-state-card {
  margin: 0 16px 16px 16px;
  padding: 16px;
  background: #FAFAF9;
  border: 1px solid #F5F5F4;
  border-radius: 10px;
}

.empty-state-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.empty-state-icon {
  font-size: 16px;
  line-height: 1;
}

.empty-state-title {
  font-size: 14px;
  font-weight: 600;
  color: #1C1917;
  line-height: 20px;
}

.empty-state-description {
  font-size: 12px;
  color: #78716C;
  line-height: 18px;
  margin-bottom: 10px;
}

.empty-state-input,
.empty-state-select {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  color: #1C1917;
  background: white;
  border: 1px solid #E7E5E4;
  border-radius: 6px;
  margin-bottom: 8px;
  transition: border-color 0.2s ease;
}

.empty-state-input::placeholder {
  color: #A8A29E;
}

.empty-state-input:focus,
.empty-state-select:focus {
  border-color: #57534E;
  outline: none;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}

.empty-state-button {
  width: 100%;
  height: 32px;
  font-size: 13px;
  font-weight: 500;
  color: white;
  background: #57534E;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.2s ease;
}

.empty-state-button:hover {
  background: #78716C;
}

.empty-state-button:active {
  background: #44403C;
}

.empty-state-button .btn-icon {
  font-size: 12px;
  line-height: 1;
}

.app-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: #F5F2EE;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: none;
  -webkit-app-region: drag;
  z-index: 1000;
}

.app-header .header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0;
  -webkit-app-region: no-drag;
}

.logo-icon {
  display: none;
}

.logo-text {
  display: none;
  font-size: 20px;
  font-weight: 700;
  color: #1C1917;
  letter-spacing: 0.2px;
}

.header-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
  -webkit-app-region: no-drag;
}

.header-nav .nav-tabs {
  display: flex;
  gap: 32px;
  align-items: center;
  height: 44px;
}

.app-header .header-actions,
.user-area {
  display: flex;
  align-items: center;
  gap: 12px;
  -webkit-app-region: no-drag;
}

.nav-tabs {
  display: flex;
  -webkit-app-region: no-drag;
}

.nav-tabs .nav-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: #78716C;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.nav-tabs .nav-btn::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  border-radius: 1px;
  background: transparent;
  transition: background 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.nav-tabs .nav-btn.active {
  color: #57534E;
}

.nav-tabs .nav-btn.active::after {
  background: #57534E;
}

.nav-tabs .nav-btn:hover:not(.active) {
  color: #44403C;
}

.nav-tab-wrapper {
  position: relative;
  display: inline-flex;
}

.nav-tab-wrapper.has-dropdown .task-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-dropdown-icon {
  font-size: 10px;
  transition: transform 0.2s ease;
}

.nav-tab-wrapper.has-dropdown.is-open .nav-dropdown-icon,
.nav-tab-wrapper.has-dropdown .task-nav-btn[aria-expanded=true] .nav-dropdown-icon {
  transform: rotate(180deg);
}

.task-view-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 168px;
  margin-top: 6px;
  padding: 8px;
  background: white;
  border: 1px solid #F5F5F4;
  border-radius: 10px;
  box-shadow: 0 18px 36px -24px rgba(24, 144, 255, 0.22);
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 20;
}

.nav-tab-wrapper.has-dropdown.is-open .task-view-dropdown {
  display: flex;
}

.task-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  color: #57534E;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.task-dropdown-item:hover {
  background: #F5F5F4;
  color: #57534E;
}

.task-dropdown-item.active {
  background: rgba(24, 144, 255, 0.12);
  color: #57534E;
  font-weight: 500;
}

.nav-tab {
  position: relative;
  height: 36px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: #44403C;
  cursor: pointer;
  transition: color 0.2s ease-in-out;
}

.nav-tab::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -10px;
  height: 3px;
  border-radius: 3px;
  background: transparent;
  transition: all 0.2s ease-in-out;
}

.nav-tab:hover {
  color: #57534E;
}

.nav-tab.active {
  color: #57534E;
}

.nav-tab.active::after {
  background: #57534E;
}

.today-summary-btn {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #57534E;
  background: rgba(43, 127, 255, 0.1);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.today-summary-btn:hover {
  background: rgba(43, 127, 255, 0.15);
  color: #57534E;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #57534E;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  -webkit-app-region: no-drag;
}

.drop-zone {
  border: 1px dashed #D6D3D1;
  border-radius: 10px;
  background: transparent;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.drop-zone.active, .drop-zone.hover {
  border-color: #57534E;
  background: rgba(24, 144, 255, 0.05);
  transform: scale(1.01);
}

@media (width <= 1024px) {
  .three-column-layout {
    grid-template-columns: 240px 1fr 240px;
  }
}
@media (width <= 768px) {
  .three-column-layout {
    grid-template-columns: 1fr;
  }
  .three-column-layout .left-panel,
  .three-column-layout .right-panel {
    display: none;
  }
  .priority-matrix {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
  }
  .project-columns,
  .status-columns {
    flex-direction: column;
  }
  .project-columns .project-column,
  .project-columns .status-column,
  .status-columns .project-column,
  .status-columns .status-column {
    min-width: auto;
  }
}
.status-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  height: 100%;
}

.project-kanban-board {
  display: contents;
}

.project-status-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.project-status-progress {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
}

.project-status-progress .status-section {
  flex: 0 0 calc((100% - 48px) / 4);
  max-width: calc((100% - 48px) / 4);
  height: 100%;
  min-height: 0;
}

.project-status-progress::-webkit-scrollbar {
  height: 6px;
}

.project-status-progress::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18);
  border-radius: 999px;
}

.project-status-progress::-webkit-scrollbar-track {
  background: transparent;
}

.status-section {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: transparent;
  min-height: 0;
}

.status-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.status-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-icon {
  font-size: 18px;
  line-height: 1;
}

.status-text h3 {
  font-size: 14px;
  font-weight: 600;
  color: #1C1917;
  margin: 0;
}

.status-count {
  font-size: 12px;
  color: #57534E;
}

.section-add-btn {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 10px;
  border: 1px solid rgba(24, 144, 255, 0.3);
  background: rgba(24, 144, 255, 0.04);
  color: #57534E;
  cursor: pointer;
  transition: all 0.2s ease;
}

.section-add-btn:hover {
  background: rgba(24, 144, 255, 0.12);
  border-color: rgba(24, 144, 255, 0.5);
}

.status-section-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.status-task-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.status-task-row:hover {
  border-color: rgba(24, 144, 255, 0.4);
  box-shadow: 0 4px 14px rgba(24, 144, 255, 0.15);
}

.status-task-row.is-complete {
  border-color: rgba(59, 130, 246, 0.25);
  background: rgba(59, 130, 246, 0.12);
}

.status-task-row.is-complete .status-task-title {
  color: #44403C;
  text-decoration: line-through;
}

.status-task-row.is-complete .status-task-meta {
  color: #78716C;
}

.status-checkbox {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.status-checkbox input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.checkbox-indicator {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid rgba(15, 23, 42, 0.25);
  background: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #57534E;
}

.checkbox-indicator::after {
  content: "";
  font-size: 12px;
}

.status-checkbox input:checked + .checkbox-indicator {
  background: rgba(24, 144, 255, 0.12);
  border-color: rgba(24, 144, 255, 0.6);
}

.status-checkbox input:checked + .checkbox-indicator::after {
  content: "✓";
}

.status-task-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}

.status-task-title {
  font-size: 14px;
  font-weight: 600;
  color: #1C1917;
  line-height: 1.4;
}

.status-task-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #57534E;
  flex-wrap: wrap;
}

.status-task-meta .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.status-task-action {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #78716C;
  cursor: pointer;
  transition: all 0.2s ease;
}

.status-task-action:hover {
  color: #DC2626;
  background: rgba(239, 68, 68, 0.08);
}

.status-empty, .project-empty {
  padding: 16px 12px;
  font-size: 12px;
  color: #78716C;
  text-align: center;
  border: 1px dashed rgba(156, 163, 175, 0.4);
  border-radius: 10px;
}

@media (width <= 1200px) {
  .status-progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .project-status-progress .status-section {
    flex: 0 0 calc((100% - 16px) / 2);
    max-width: calc((100% - 16px) / 2);
  }
}
@media (width <= 768px) {
  .status-progress {
    grid-template-columns: 1fr;
  }
  .project-status-progress {
    gap: 12px;
  }
  .project-status-progress .status-section {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@keyframes ceramic-glow {
  0% {
    box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow: 0 4px 6px rgba(87, 83, 78, 0.06), 0 2px 4px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(8, 145, 178, 0.2);
  }
  100% {
    box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }
}
.ceramic-glow-animation {
  animation: ceramic-glow 2s ease-in-out infinite;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-up {
  animation: fade-in-up 0.6s ease-out;
}

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

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.text-xs {
  font-size: 12px;
}

.text-sm {
  font-size: 14px;
}

.text-base {
  font-size: 16px;
}

.text-lg {
  font-size: 18px;
}

.text-xl {
  font-size: 20px;
}

.text-2xl {
  font-size: 24px;
}

.text-3xl {
  font-size: 30px;
}

.text-ceramic-ink {
  color: #1C1917;
}

.text-ceramic-gray {
  color: #44403C;
}

.text-ceramic-light {
  color: #78716C;
}

.text-ceramic-blue {
  color: #0891B2;
}

.text-ceramic-green {
  color: #65A30D;
}

.text-ceramic-gold {
  color: #D97706;
}

.text-ceramic-red {
  color: #DC2626;
}

.m-0 {
  margin: 0;
}

.m-1 {
  margin: 4px;
}

.m-2 {
  margin: 8px;
}

.m-4 {
  margin: 16px;
}

.m-6 {
  margin: 24px;
}

.m-8 {
  margin: 32px;
}

.p-0 {
  padding: 0;
}

.p-1 {
  padding: 4px;
}

.p-2 {
  padding: 8px;
}

.p-4 {
  padding: 16px;
}

.p-6 {
  padding: 24px;
}

.p-8 {
  padding: 32px;
}

.hidden {
  display: none;
}

.block {
  display: block;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

/* 模态框补充样式 */
.task-view-container {
  height: calc(100vh - 64px);
  background: #FAFAF9;
  display: flex;
  flex-direction: column;
}

.matrix-view .task-subview-content {
  padding: 0;
  background: transparent;
}

.task-view-container.matrix-view-active {
  background: transparent;
}

.task-view-container.matrix-view-active .task-subview,
.task-view-container.matrix-view-active .task-subview.active {
  background: transparent;
  padding: 0;
}

.task-view-container.matrix-view-active .task-subview-content {
  flex: 1;
  padding: 0;
  display: flex;
}

.task-view-container.matrix-view-active .matrix-grid {
  flex: 1;
}

.task-subview {
  display: none;
  height: calc(100vh - 64px);
  flex: 1;
}

.task-subview.active {
  display: flex;
  flex-direction: column;
}

.task-subview-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.project-view {
  flex: 1;
}

.project-view .task-subview-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px;
  gap: 16px;
  background: transparent;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.project-empty {
  gap: 12px;
  padding: 40px 24px;
}

.project-empty-icon {
  font-size: 36px;
}

.project-empty[hidden] {
  display: none !important;
}

.project-content[hidden],
.project-overview[hidden] {
  display: none !important;
}

.project-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.project-tasks-empty {
  padding: 12px;
  font-size: 12px;
  color: #78716C;
  background: rgba(148, 163, 184, 0.08);
  border: 1px dashed rgba(148, 163, 184, 0.6);
  border-radius: 10px;
  text-align: center;
}

.project-overview {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
  padding: 32px 40px;
  overflow-y: auto;
}

.project-overview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.overview-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
}

.overview-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #1C1917;
}

.overview-subtitle {
  margin: 0;
  font-size: 14px;
  color: #57534E;
}

.overview-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-left: auto;
}

.overview-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.project-stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  min-width: 112px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.stat-value {
  font-size: 20px;
  font-weight: 600;
  color: #1C1917;
  line-height: 1;
}

.stat-label {
  font-size: 12px;
  color: #57534E;
}

.project-overview .create-board-btn {
  height: 38px;
  padding: 0 18px;
  border-radius: 8px;
  border: none;
  background: #57534E;
  color: white;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.project-overview .create-board-btn:hover {
  background: #78716C;
  box-shadow: 0 12px 24px rgba(24, 144, 255, 0.25);
  transform: translateY(-1px);
}

.project-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 24px 28px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
}

.project-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}

.project-section .section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1C1917;
}

.section-icon {
  font-size: 18px;
  line-height: 1;
}

.section-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  border: 1px dashed rgba(148, 163, 184, 0.6);
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.08);
  color: #57534E;
}

.section-empty[hidden] {
  display: none;
}

.section-empty .empty-icon {
  font-size: 28px;
  color: #78716C;
}

.section-empty .empty-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1C1917;
}

.section-empty .empty-subtitle {
  margin: 0;
  font-size: 13px;
  color: #57534E;
}

.all-boards .boards-grid .section-empty {
  grid-column: 1/-1;
  padding: 36px 24px;
}

.all-boards .boards-grid .section-empty .create-board-btn {
  margin-top: 8px;
}

.project-section .boards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.project-section .board-card,
.project-section .boards-grid .board-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 130px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.project-section .board-card:hover,
.project-section .boards-grid .board-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(24, 144, 255, 0.15);
  border-color: rgba(24, 144, 255, 0.35);
}

.project-section .board-card.starred,
.project-section .boards-grid .board-card.starred {
  border-color: rgba(250, 204, 21, 0.7);
  box-shadow: 0 14px 34px rgba(250, 204, 21, 0.22);
  background: rgba(255, 250, 235, 0.95);
}

.project-section .board-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1C1917;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-section .board-meta {
  margin: 0;
  font-size: 12px;
  color: #57534E;
}

.project-section .board-progress {
  margin-top: auto;
}

.project-section .board-progress .progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  overflow: hidden;
}

.project-section .board-progress .progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #57534E, #78716C);
  transition: width 0.3s ease;
}

@media (max-width: 1024px) {
  .project-overview {
    padding: 28px 24px;
  }
  .project-overview-header {
    gap: 16px;
  }
}
@media (max-width: 768px) {
  .project-overview {
    padding: 24px 16px;
  }
  .overview-actions {
    width: 100%;
    justify-content: space-between;
  }
  .overview-stats {
    width: 100%;
  }
  .project-stat-card {
    flex: 1;
  }
  .project-section .boards-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}
.kanban-view {
  flex: 1;
}

.kanban-view .task-subview-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px;
  background: transparent;
  overflow-y: auto;
  overflow-x: hidden;
}

.stats-section {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.stats-section .stat-card {
  padding: 32px;
  text-align: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(214, 211, 209, 0.85);
  box-shadow: 0 14px 32px -24px rgba(87, 83, 78, 0.28);
}
.stats-section .stat-card .stat-label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(68, 64, 60, 0.85);
  margin-bottom: 8px;
}
.stats-section .stat-card .stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #57534E;
}

.activity-log {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.activity-log .log-title {
  font-size: 16px;
  font-weight: 600;
  color: #1C1917;
  margin: 0 0 8px;
}
.activity-log .log-list {
  flex: 1;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.activity-log .log-item {
  padding: 12px 0;
  border-bottom: 1px solid #F5F5F4;
}
.activity-log .log-item:last-child {
  border-bottom: none;
}
.activity-log .log-item .log-time {
  font-size: 12px;
  color: #78716C;
  margin-bottom: 4px;
}
.activity-log .log-item .log-content {
  font-size: 13px;
  color: #57534E;
  line-height: 20px;
}
.activity-log .log-item .log-task {
  font-size: 12px;
  color: #57534E;
  margin-top: 4px;
}

.activity-dialog {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  border: 1px solid #D6D3D1;
  border-radius: 20px;
  padding: 32px;
}
.activity-dialog .dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.activity-dialog .dialog-header .dialog-title {
  font-size: 16px;
  font-weight: 500;
}
.activity-dialog .dialog-header .summary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 8px;
  cursor: pointer;
  transition: all 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.activity-dialog .dialog-header .summary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.activity-dialog .dialog-header .summary-btn {
  background: #FFFFFF;
  color: #44403C;
  border: 1px solid #D6D3D1;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.activity-dialog .dialog-header .summary-btn:hover:not(:disabled) {
  background: #FAFAF9;
  border-color: #A8A29E;
  color: #1C1917;
}
.activity-dialog .dialog-header .summary-btn {
  padding: 16px;
}
.activity-dialog .dialog-header .summary-btn .icon {
  width: 16px;
  height: 16px;
}
.activity-dialog .dialog-input {
  display: flex;
  gap: 24px;
}
.activity-dialog .dialog-input .activity-input {
  flex: 1;
  padding: 24px;
  border: 1px solid rgba(28, 25, 23, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}
.activity-dialog .dialog-input .activity-input:focus {
  outline: none;
  border-color: #0891B2;
  box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.1);
}
.activity-dialog .dialog-input .send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 8px;
  cursor: pointer;
  transition: all 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.activity-dialog .dialog-input .send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.activity-dialog .dialog-input .send-btn {
  background: #FFFFFF;
  color: #44403C;
  border: 1px solid #D6D3D1;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.activity-dialog .dialog-input .send-btn:hover:not(:disabled) {
  background: #FAFAF9;
  border-color: #A8A29E;
  color: #1C1917;
}
.activity-dialog .dialog-input .send-btn {
  padding: 24px;
  background: #0891B2;
  color: #FFFFFF;
}
.activity-dialog .dialog-input .send-btn:hover {
  background: rgb(4.4903225806, 81.3870967742, 99.9096774194);
}
.activity-dialog .dialog-input .send-btn .icon {
  width: 16px;
  height: 16px;
}

.panel-header {
  padding: 48px;
  border-bottom: 1px solid rgba(28, 25, 23, 0.1);
}
.panel-header .panel-title {
  font-size: 18px;
  font-weight: 500;
  color: #1C1917;
}

.task-section {
  flex: 1;
  padding: 32px;
  overflow-y: auto;
}
.task-section h3 {
  font-size: 16px;
  font-weight: 500;
  color: #44403C;
  margin-bottom: 32px;
}
.task-section .task-list .task-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 8px;
  cursor: pointer;
  transition: all 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.task-section .task-list .task-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.task-section .task-list .task-item {
  background: #FFFFFF;
  color: #44403C;
  border: 1px solid #D6D3D1;
  box-shadow: 0 1px 3px rgba(87, 83, 78, 0.06), 0 1px 2px rgba(87, 83, 78, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.task-section .task-list .task-item:hover:not(:disabled) {
  background: #FAFAF9;
  border-color: #A8A29E;
  color: #1C1917;
}
.task-section .task-list .task-item {
  width: 100%;
  text-align: left;
  margin-bottom: 16px;
  padding: 24px;
  cursor: grab;
}
.task-section .task-list .task-item:active {
  cursor: grabbing;
}
.task-section .task-list .task-item.dragging {
  opacity: 0.5;
}
.task-section .task-list .task-item .task-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}
.task-section .task-list .task-item .task-meta {
  font-size: 12px;
  color: #44403C;
}

.task-drop-zone {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  border: 1px solid #D6D3D1;
  border-radius: 20px;
  padding: 48px;
  margin-bottom: 48px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border: 2px dashed transparent;
}
.task-drop-zone.drag-over {
  border-color: #0891B2;
  background: rgba(8, 145, 178, 0.1);
  transform: scale(1.02);
}
.task-drop-zone .drop-zone-placeholder {
  text-align: center;
  color: #44403C;
}
.task-drop-zone .drop-zone-placeholder .drop-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
  opacity: 0.6;
}
.task-drop-zone .drop-zone-placeholder .drop-text {
  font-size: 16px;
}

.project-overview {
  padding: 32px 0 64px 32px; /* 添加 padding，上和左为原来的一半 */
}
.project-overview .section-title {
  font-size: 20px;
  font-weight: 600;
  color: #1C1917;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.project-overview .section-title .star-icon {
  font-size: 18px;
}
.project-overview .boards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  justify-items: stretch; /* 撑满单元格 */
  column-gap: 0; /* 横向无间距 */
  row-gap: 8px; /* 纵向保持适度 */
  margin-bottom: 10px;
}

.recent-activity-main .activity-timeline-main .activity-item-main {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(68, 64, 60, 0.2);
}
.recent-activity-main .activity-timeline-main .activity-item-main:last-child {
  border-bottom: none;
}
.recent-activity-main .activity-timeline-main .activity-item-main .activity-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
  background: #0891B2;
}
.recent-activity-main .activity-timeline-main .activity-item-main .activity-dot.daily_summary {
  background: #65A30D;
}
.recent-activity-main .activity-timeline-main .activity-item-main .activity-dot.default {
  background: #44403C;
}
.recent-activity-main .activity-timeline-main .activity-item-main .activity-content {
  flex: 1;
  min-width: 0;
}
.recent-activity-main .activity-timeline-main .activity-item-main .activity-content .activity-text {
  font-size: 14px;
  color: #1C1917;
  line-height: 1.4;
  margin-bottom: 8px;
}
.recent-activity-main .activity-timeline-main .activity-item-main .activity-content .activity-text .activity-icon {
  margin-right: 8px;
  font-size: 16px;
}
.recent-activity-main .activity-timeline-main .activity-item-main .activity-content .activity-text .activity-description {
  font-size: 12px;
  color: #44403C;
  margin-top: 8px;
  font-style: italic;
}
.recent-activity-main .activity-timeline-main .activity-item-main .activity-content .activity-time {
  font-size: 12px;
  color: #44403C;
}
.recent-activity-main .activity-timeline-main .activity-item-main.daily_summary .activity-content .activity-text {
  color: #65A30D;
}
.recent-activity-main .activity-placeholder {
  text-align: center;
  padding: 48px;
  color: #44403C;
  font-size: 14px;
}
.recent-activity-main .activity-placeholder p {
  margin: 0;
}

@media (max-width: 768px) {
  .app-header {
    padding: 0.5rem 0.75rem;
  }
  .task-card {
    font-size: 0.875rem;
  }
  .task-card .task-title,
  .task-item .task-title {
    font-size: 0.875rem;
  }
  .task-item .task-meta {
    font-size: 0.75rem;
  }
}
[data-theme=dark] {
  --bg-primary: #1C1917;
  --bg-secondary: #292524;
  --bg-surface: #36322F;
  --text-primary: #F5F5F4;
  --text-secondary: #A8A29E;
  --border-color: #44403C;
  background: var(--bg-primary);
  color: var(--text-primary);
}
[data-theme=dark] body {
  background: var(--bg-primary);
  color: var(--text-primary);
}
[data-theme=dark] .app-header {
  background: var(--bg-secondary);
  border-color: var(--border-color);
}
[data-theme=dark] .left-panel, [data-theme=dark] .right-panel {
  background: var(--bg-secondary);
}
[data-theme=dark] .center-panel {
  background: var(--bg-primary);
}
[data-theme=dark] .task-item, [data-theme=dark] .board-card, [data-theme=dark] .ceramic-panel, [data-theme=dark] .activity-stat-card {
  background: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-primary);
}
[data-theme=dark] .task-item:hover, [data-theme=dark] .board-card:hover {
  border-color: #57534E;
}
[data-theme=dark] .modal .modal-content, [data-theme=dark] .kairos-modal .modal-content {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
[data-theme=dark] .input, [data-theme=dark] input, [data-theme=dark] textarea, [data-theme=dark] select {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-color);
}
[data-theme=dark] .timer-display {
  color: var(--text-primary);
}
[data-theme=dark] .settings-panel {
  background: var(--bg-surface);
  border-color: var(--border-color);
}
[data-theme=dark] .user-card {
  background: var(--bg-surface);
  border-color: var(--border-color);
}
[data-theme=dark] .heatmap-main-section {
  background: var(--bg-surface);
  border-color: var(--border-color);
}
[data-theme=dark] .user-dropdown {
  background: var(--bg-surface);
  border-color: var(--border-color);
}
[data-theme=dark] .task-subview-content {
  color: var(--text-primary);
}
[data-theme=dark] .app-header {
  background: rgba(28, 25, 23, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--border-color);
}
[data-theme=dark] .logo-text {
  color: var(--text-primary);
}
[data-theme=dark] .logo-img {
  filter: invert(1);
}
[data-theme=dark] .nav-tabs .nav-btn {
  color: var(--text-secondary);
}
[data-theme=dark] .nav-tabs .nav-btn:hover:not(.active) {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .nav-tabs .nav-btn.active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.1);
}
[data-theme=dark] .ring-bg {
  stroke: rgba(255, 255, 255, 0.08);
}
[data-theme=dark] .timer-session-label {
  color: var(--text-secondary);
}
[data-theme=dark] .session-dot {
  background: rgba(255, 255, 255, 0.1);
}
[data-theme=dark] .session-dot.completed, [data-theme=dark] .session-dot.active {
  background: var(--text-secondary);
}
[data-theme=dark] .focus-compose-row {
  background: transparent;
  border-bottom-color: var(--border-color);
}
[data-theme=dark] .focus-compose-row:focus-within {
  border-bottom-color: var(--text-primary);
}
[data-theme=dark] .focus-compose-input {
  color: var(--text-primary);
}
[data-theme=dark] .focus-compose-input::placeholder {
  color: var(--text-secondary);
}
[data-theme=dark] .focus-compose-send {
  background: var(--border-color);
  color: var(--text-secondary);
}
[data-theme=dark] .focus-compose-send:not(:disabled) {
  background: var(--text-primary);
  color: var(--bg-primary);
}
[data-theme=dark] .focus-selected-name {
  color: var(--text-secondary);
}
[data-theme=dark] .left-panel {
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.04);
}
[data-theme=dark] .right-panel {
  box-shadow: -1px 0 0 rgba(255, 255, 255, 0.04);
}
[data-theme=dark] .activity-item {
  color: var(--text-secondary);
}
[data-theme=dark] .activity-time {
  color: var(--text-secondary);
}
[data-theme=dark] .summary-btn-global {
  color: var(--text-secondary);
  border-color: var(--border-color);
}
[data-theme=dark] .summary-btn-global:hover {
  color: var(--text-primary);
  background: var(--bg-surface);
}
[data-theme=dark] .panel-top-controls .search-input {
  background: transparent;
  border-color: var(--border-color);
  color: var(--text-primary);
}
[data-theme=dark] .panel-top-controls .search-input:focus {
  border-color: var(--border-color);
  background: transparent;
}
[data-theme=dark] .custom-dropdown-trigger {
  color: var(--text-primary);
  border-bottom-color: var(--border-color);
}
[data-theme=dark] .custom-dropdown-trigger:hover, [data-theme=dark] .custom-dropdown-trigger:focus {
  border-bottom-color: var(--border-color);
}
[data-theme=dark] .custom-dropdown-arrow {
  color: var(--text-secondary);
}
[data-theme=dark] .custom-dropdown-menu {
  background: var(--bg-surface);
  border-color: var(--border-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
[data-theme=dark] .custom-dropdown-option {
  color: var(--text-secondary);
}
[data-theme=dark] .custom-dropdown-option:hover {
  background: rgba(255, 255, 255, 0.05);
}
[data-theme=dark] .custom-dropdown-option.is-selected {
  color: var(--text-primary);
}

.board-card {
  position: relative;
  cursor: pointer;
}
.board-card .board-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.board-card .board-star {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 2px 4px;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.board-card .board-star:hover, .board-card .board-star.active {
  opacity: 1;
}
.board-card .board-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #A8A29E;
  opacity: 0;
  transition: opacity 0.2s, color 0.2s;
  padding: 4px 6px;
  border-radius: 4px;
}
.board-card .board-delete:hover {
  color: #DC2626;
  background: rgba(220, 38, 38, 0.08);
}
.board-card:hover .board-delete {
  opacity: 1;
}

@keyframes slideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(400px);
    opacity: 0;
  }
}
.timer-display {
  font-family: "Inter", sans-serif !important;
}

.nav-btn {
  font-family: "Inter", sans-serif !important;
}

.modal-btn-fill, .modal-button-primary,
.modal-btn-text,
.modal-button-secondary,
.modal-btn-danger,
.create-board-btn,
.empty-create-btn {
  font-family: "Inter", sans-serif !important;
}

.logo-img {
  height: 20px;
  width: auto;
  display: block;
  mix-blend-mode: multiply;
}

.nav-tabs .nav-btn {
  font-size: 13px;
  font-weight: 500;
  color: #78716C;
  padding: 6px 16px;
  border-radius: 20px;
  transition: all 0.2s ease;
}
.nav-tabs .nav-btn::after {
  display: none;
}
.nav-tabs .nav-btn:hover:not(.active) {
  color: #44403C;
  background: rgba(0, 0, 0, 0.04);
}
.nav-tabs .nav-btn.active {
  color: #1C1917;
  background: rgba(0, 0, 0, 0.06);
  font-weight: 600;
}
.nav-tabs .nav-btn.active::after {
  display: none;
}

.nav-tab::after {
  display: none !important;
}
.nav-tab.active::after {
  display: none !important;
}

.summary-btn-global {
  font-size: 12px;
  font-weight: 500;
  color: #78716C;
  padding: 5px 12px;
  border: 1px solid #E7E5E4;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.summary-btn-global:hover {
  color: #44403C;
  border-color: #D6D3D1;
  background: #FAFAF9;
}

.left-panel {
  border-right: none;
  background: #FAFAF9;
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.04);
}

.right-panel {
  border-left: none;
  background: #FAFAF9;
  box-shadow: -1px 0 0 rgba(0, 0, 0, 0.04);
}

.timer-ring-wrap {
  position: relative;
  width: 280px;
  height: 280px;
}

.timer-glow {
  position: absolute;
  inset: -32px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(193, 127, 89, 0.14) 0%, rgba(193, 127, 89, 0.06) 45%, transparent 70%);
  animation: breathe 4s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}
.timer-glow::after {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(193, 127, 89, 0.08) 0%, transparent 60%);
}

@keyframes breathe {
  0%, 100% {
    transform: scale(0.94);
    opacity: 0.35;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}
.timer-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  position: relative;
  z-index: 1;
}

.ring-bg {
  fill: none;
  stroke: rgba(193, 127, 89, 0.08);
  stroke-width: 3;
}

.ring-bloom {
  fill: none;
  stroke: url(#timer-grad);
  stroke-width: 16;
  stroke-linecap: round;
  stroke-dasharray: 691.15;
  stroke-dashoffset: 691.15;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
  opacity: 0.15;
  filter: blur(4px);
}

.ring-progress {
  fill: none;
  stroke: url(#timer-grad);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 691.15;
  stroke-dashoffset: 691.15;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
  filter: drop-shadow(0 0 6px rgba(193, 127, 89, 0.4));
}

.timer-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}

.timer-section .timer-display {
  font-size: 64px;
  font-weight: 200;
  color: #1C1917;
  text-shadow: none;
  margin: 0;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  line-height: 1;
  cursor: default;
}

.timer-session-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #C17F59;
  opacity: 0.7;
}

.timer-session-dots {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.session-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.session-dot.completed {
  background: #C17F59;
  box-shadow: 0 0 8px rgba(193, 127, 89, 0.35);
}
.session-dot.active {
  background: #C17F59;
  box-shadow: 0 0 12px rgba(193, 127, 89, 0.4);
}

.timer-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
  gap: 14px;
}

.timer-ctrl-icon {
  height: 42px;
  padding: 0 24px;
  border-radius: 6px;
  border: 1px solid #E7E5E3;
  background: white;
  color: #57534E;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.timer-ctrl-icon:hover {
  border-color: #D6D3D1;
  background: #FAFAF9;
}
.timer-ctrl-icon:active {
  transform: scale(0.98);
}
.timer-ctrl-icon:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

.timer-ctrl-main {
  height: 42px;
  padding: 0 32px;
  border-radius: 6px;
  border: 1px solid #292524;
  background: #292524;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.timer-ctrl-main:hover {
  background: #1C1917;
}
.timer-ctrl-main:active {
  transform: scale(0.98);
}
.timer-ctrl-main:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
}
.timer-ctrl-main.is-paused {
  background: white;
  color: #57534E;
  border-color: #E7E5E3;
  box-shadow: none;
}
.timer-ctrl-main.is-paused:hover {
  border-color: #D6D3D1;
  background: #FAFAF9;
}

.center-area {
  padding: 6vh 0 4vh;
  gap: 40px;
}

.focus-compose {
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  transform: none;
  width: 100%;
  max-width: 520px;
}

.focus-compose-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  border-bottom: 1px solid #D6D3D1;
  border-radius: 0;
  padding: 8px 0;
  transition: border-color 0.2s ease;
}
.focus-compose-row:focus-within {
  border-bottom-color: #292524;
  background: transparent;
  box-shadow: none;
}

.focus-compose-input {
  border: none;
  background: transparent;
  box-shadow: none;
  min-height: 0;
  height: 32px;
  max-height: 80px;
  border-radius: 0;
  font-size: 15px;
  padding: 4px 0;
  resize: none;
  flex: 1;
  line-height: 1.5;
  color: #1C1917;
}
.focus-compose-input:focus {
  background: transparent;
  box-shadow: none;
  border: none;
  outline: none;
}
.focus-compose-input::placeholder {
  color: #78716C;
}

.focus-compose-send {
  width: auto;
  height: 32px;
  min-width: 32px;
  padding: 0 12px;
  border-radius: 4px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #D6D3D1;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: none;
  padding: 0;
}
.focus-compose-send:disabled {
  cursor: default;
  opacity: 0.3;
}
.focus-compose-send:not(:disabled) {
  background: #292524;
  color: white;
  box-shadow: none;
}
.focus-compose-send:not(:disabled):hover {
  background: #1C1917;
}

.focus-compose-send-icon {
  font-size: 13px;
  font-weight: 700;
}

.focus-selected-task {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #A8A29E;
  margin-bottom: 6px;
  padding-left: 0;
}
.focus-selected-task[hidden] {
  display: none;
}

.focus-selected-name {
  color: #57534E;
  font-weight: 500;
}

.focus-compose-header,
.focus-compose-footer,
.focus-compose-title,
.focus-compose-hint,
.focus-selected-label {
  display: none;
}

.panel-top-controls {
  padding: 8px 12px 4px !important;
  gap: 8px !important;
  margin-bottom: 0 !important;
}
.panel-top-controls .project-select {
  display: none;
}
.panel-top-controls .search-input {
  border: none;
  border-bottom: 1px solid #E7E5E3;
  border-radius: 0;
  height: 34px;
  font-size: 13px;
  color: #1C1917;
  background: transparent;
  background-image: none;
  padding: 0;
  text-align: left;
}
.panel-top-controls .search-input::placeholder {
  color: #A8A29E;
}
.panel-top-controls .search-input:focus {
  border-bottom-color: #D6D3D1;
  outline: none;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid #D6D3D1;
  background: transparent;
}
.panel-top-controls .search-input:hover {
  background: transparent;
}

.custom-dropdown {
  position: relative;
  width: 100%;
}

.custom-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  padding: 0;
  border: none;
  border-bottom: 1px solid #E7E5E3;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: #1C1917;
  font-weight: 500;
  font-family: inherit;
  width: 100%;
  text-align: left;
  transition: border-color 0.15s;
}
.custom-dropdown-trigger:hover {
  border-bottom-color: #D6D3D1;
}
.custom-dropdown-trigger:focus {
  outline: none;
  border-bottom-color: #D6D3D1;
}

.custom-dropdown-arrow {
  font-size: 10px;
  color: #A8A29E;
  transition: transform 0.15s;
}
.custom-dropdown.is-open .custom-dropdown-arrow {
  transform: rotate(180deg);
}

.custom-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: -12px;
  right: -12px;
  background: white;
  border: 1px solid #E7E5E3;
  border-radius: 8px;
  padding: 4px 0;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  max-height: 240px;
  overflow-y: auto;
}
.custom-dropdown.is-open .custom-dropdown-menu {
  display: block;
}

.custom-dropdown-option {
  padding: 8px 14px;
  font-size: 13px;
  color: #44403C;
  cursor: pointer;
  transition: background 0.1s;
}
.custom-dropdown-option:hover {
  background: #FAFAF9;
}
.custom-dropdown-option.is-selected {
  color: #1C1917;
  font-weight: 500;
}

.activity-header {
  font-size: 14px;
  font-weight: 600;
  color: #78716C;
  letter-spacing: 0.02em;
  margin: 0 0 4px 0;
  padding: 0;
}

.activity-item {
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 4px 14px;
  box-shadow: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.activity-item:hover {
  transform: none;
  box-shadow: none;
  background: rgba(0, 0, 0, 0.02);
}
.activity-item .activity-time {
  flex-shrink: 0;
  font-size: 11px;
  color: #A8A29E;
  font-family: "SF Mono", "Menlo", monospace;
  margin-bottom: 0;
}
.activity-item .activity-content {
  font-size: 13px;
  color: #57534E;
  line-height: 1.4;
}

.project-overview {
  padding: 40px 48px;
  max-width: 960px;
  margin: 0 auto;
}

.project-overview .section-title {
  font-size: 13px;
  font-weight: 600;
  color: #A8A29E;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

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

.all-boards > .section-title {
  margin-bottom: 16px;
}

.project-overview .create-board-btn,
.create-board-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  background: #1C1917;
  color: white;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s ease;
}
.project-overview .create-board-btn:hover,
.create-board-btn:hover {
  background: #44403C;
}

.boards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 260px)) !important;
  gap: 12px !important;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

.boards-grid .board-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  min-height: auto !important;
  padding: 16px 18px !important;
  background: white !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: all 0.15s ease !important;
}
.boards-grid .board-card:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  background: white !important;
}
.boards-grid .board-card.starred {
  background: white !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: none !important;
}

.board-card-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 80px;
  padding: 16px 18px;
  background: transparent;
  border: 1.5px dashed #E7E5E4;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: #A8A29E;
}
.board-card-new:hover {
  border-color: #A8A29E;
  background: rgba(245, 245, 244, 0.5);
  color: #57534E;
}
.board-card-new .new-card-icon {
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
}
.board-card-new .new-card-text {
  font-size: 13px;
  font-weight: 500;
}

.board-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.board-card .board-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1C1917;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-card .board-desc {
  margin: 4px 0 0;
  font-size: 12px;
  color: #78716C;
  line-height: 1.4;
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.board-card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.board-task-count {
  flex: 1;
  font-size: 12px;
  color: #A8A29E;
}

.board-card .board-star {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: #D6D3D1;
  padding: 2px;
  line-height: 1;
  border-radius: 4px;
  transition: all 0.15s;
  flex-shrink: 0;
}
.board-card .board-star:hover {
  color: #D4A574;
}
.board-card .board-star.active {
  color: #D4A574;
}

.board-card .board-delete {
  background: none;
  border: none;
  color: #D6D3D1;
  cursor: pointer;
  font-size: 11px;
  padding: 2px;
  border-radius: 4px;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0;
  transition: all 0.15s;
}
.board-card .board-delete:hover {
  color: #DC2626;
}

.board-card:hover .board-delete {
  opacity: 1;
}

.project-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 60vh;
  text-align: center;
}
.project-empty-state .empty-line {
  width: 40px;
  height: 3px;
  background: #E7E5E4;
  border-radius: 2px;
  margin-bottom: 24px;
}
.project-empty-state .empty-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #44403C;
  letter-spacing: -0.01em;
}
.project-empty-state .empty-hint {
  margin: 8px 0 0;
  font-size: 14px;
  color: #A8A29E;
}
.project-empty-state .empty-create-btn {
  margin-top: 28px;
  height: 38px;
  padding: 0 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  color: #78716C;
  border: 1.5px dashed #E7E5E4;
  cursor: pointer;
  transition: all 0.15s ease;
}
.project-empty-state .empty-create-btn:hover {
  border-color: #A8A29E;
  color: #44403C;
  background: rgba(245, 245, 244, 0.5);
}

.section-empty {
  border: none;
  background: transparent;
}

.project-empty-icon {
  display: none;
}

.github-style-layout {
  padding: 24px 32px;
}

.back-btn {
  font-size: 13px;
  font-weight: 500;
  color: #78716C;
  padding: 6px 12px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid #E7E5E4;
  cursor: pointer;
  margin-bottom: 24px;
}
.back-btn:hover {
  color: #44403C;
  border-color: #D6D3D1;
  background: #FAFAF9;
}

.ceramic-panel {
  border: 1px solid #F5F5F4;
  border-radius: 12px;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  padding: 24px;
}

.settings-title {
  font-size: 15px;
  font-weight: 600;
  color: #292524;
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}

.settings-section-title {
  font-size: 12px;
  font-weight: 600;
  color: #A8A29E;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.settings-item label {
  font-size: 13px;
  color: #57534E;
}

.activity-stats .section-title {
  font-size: 15px;
  font-weight: 600;
  color: #292524;
}

.activity-stat-card {
  border: 1px solid #F5F5F4;
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.activity-stat-card .stat-title {
  font-size: 12px;
  font-weight: 500;
  color: #A8A29E;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.activity-stat-card .big-number {
  font-size: 32px;
  font-weight: 300;
  color: #1C1917;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  line-height: 1;
}
.activity-stat-card .stat-subtitle {
  font-size: 12px;
  color: #A8A29E;
  margin-top: 4px;
}

.kairos-modal {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(4px) !important;
}

.kairos-modal .modal-content {
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16) !important;
  padding: 20px !important;
  width: min(92vw, 480px) !important;
  max-height: 85vh !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  background: white !important;
}

.modal-content.modal-task-detail {
  width: min(92vw, 540px) !important;
}

.modal-header-inline {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 0 !important;
  border: none !important;
  margin: 0 !important;
}
.modal-header-inline h2 {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1C1917 !important;
  line-height: 1.3 !important;
  flex: 1;
  min-width: 0;
}
.modal-header-inline .modal-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.modal-close {
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  background: none !important;
  color: #A8A29E !important;
  font-size: 18px !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  padding: 0 !important;
  flex-shrink: 0;
}
.modal-close:hover {
  background: #F5F5F4 !important;
  color: #57534E !important;
}

.modal-input {
  width: 100% !important;
  padding: 10px 12px !important;
  border: 1px solid #E7E5E4 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  color: #1C1917 !important;
  background: #FAFAF9 !important;
  outline: none !important;
  resize: none !important;
  transition: border-color 0.15s ease !important;
  box-sizing: border-box !important;
}
.modal-input::placeholder {
  color: #A8A29E !important;
}
.modal-input:focus {
  border-color: #A8A29E !important;
  background: white !important;
}

textarea.modal-input {
  min-height: 60px !important;
  line-height: 1.5 !important;
}

.modal-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.meta-tag {
  font-size: 12px;
  color: #78716C;
  background: #F5F5F4;
  padding: 3px 10px;
  border-radius: 4px;
}

.meta-select {
  font-size: 12px !important;
  color: #57534E !important;
  background: #FAFAF9 !important;
  border: 1px solid #E7E5E4 !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  cursor: pointer !important;
  outline: none !important;
  font-family: inherit !important;
}
.meta-select:focus {
  border-color: #A8A29E !important;
}

.modal-desc-area {
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: #44403C;
  transition: border-color 0.15s;
}
.modal-desc-area:empty::before {
  content: attr(data-placeholder);
  color: #A8A29E;
}
.modal-desc-area[contenteditable=true] {
  border-color: #E7E5E4;
  background: #FAFAF9;
}
.modal-desc-area[contenteditable=true]:focus {
  border-color: #A8A29E;
  background: white;
  outline: none;
}

.modal-activity-area {
  border-top: 1px solid #F5F5F4;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modal-activity-area .activity-list {
  max-height: 160px;
  overflow-y: auto;
  font-size: 12px;
  color: #78716C;
}

.modal-comment-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.modal-comment-row .modal-input {
  flex: 1;
  padding: 8px 12px !important;
  font-size: 13px !important;
}

.modal-footer-inline {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 0 !important;
  border: none !important;
  margin: 0 !important;
}
.modal-footer-inline .left-actions {
  display: flex;
  gap: 8px;
}

.modal-btn-fill, .modal-button-primary {
  height: 32px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  background: #1C1917;
  color: white;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.modal-btn-fill:hover, .modal-button-primary:hover {
  background: #44403C;
}
.modal-btn-fill.modal-btn-sm, .modal-btn-sm.modal-button-primary {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
}

.modal-btn-text, .modal-button-secondary {
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  color: #78716C;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}
.modal-btn-text:hover, .modal-button-secondary:hover {
  background: #F5F5F4;
  color: #44403C;
}

.modal-btn-danger {
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  color: #A8A29E;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}
.modal-btn-danger:hover {
  background: rgba(220, 38, 38, 0.08);
  color: #DC2626;
}

.modal-button-secondary {
  border: 1px solid #E7E5E4;
}
.modal-button-secondary:hover {
  border-color: #D6D3D1;
}

.kairos-modal .modal-header {
  padding: 0 !important;
  border: none !important;
  margin: 0 !important;
}
.kairos-modal .modal-header h2 {
  font-size: 16px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

.kairos-modal .modal-body {
  padding: 0 !important;
}
.kairos-modal .modal-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #57534E;
}

.kairos-modal .modal-actions {
  padding: 0 !important;
  border: none !important;
  margin: 0 !important;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.modal-compact .form-group {
  display: none;
}

.shard-action-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: #F5F5F4;
  color: #78716C;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}
.shard-action-btn:hover {
  background: #E7E5E4;
  color: #44403C;
}

.glaze-tag.status-todo {
  background: rgba(100, 116, 139, 0.1);
  border-color: rgba(100, 116, 139, 0.2);
  color: #475569;
}

.glaze-tag.status-doing {
  background: rgba(184, 134, 11, 0.1);
  border-color: rgba(184, 134, 11, 0.2);
  color: #92700C;
}

.glaze-tag.status-review {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.2);
  color: #4F46E5;
}

.glaze-tag.status-done {
  background: rgba(22, 163, 74, 0.1);
  border-color: rgba(22, 163, 74, 0.2);
  color: #15803D;
}

.user-dropdown {
  border-radius: 12px;
  border: 1px solid #F5F5F4;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.user-dropdown .menu-item {
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  color: #44403C;
  transition: background 0.15s ease;
}
.user-dropdown .menu-item:hover {
  background: #FAFAF9;
  color: #1C1917;
}

.avatar-circle {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #E7E5E4;
  color: #78716C;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.heatmap-main-section .section-title {
  font-size: 14px;
  font-weight: 600;
  color: #44403C;
}

#task-project-view .shard-task {
  border-left-width: 1px;
  border-left-color: rgba(0, 0, 0, 0.06);
}

[data-theme=dark] .timer-glow {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
}
[data-theme=dark] .ring-progress {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.15));
}
[data-theme=dark] .timer-inner .timer-display {
  color: var(--text-primary);
}
[data-theme=dark] .timer-ctrl-icon {
  border-color: rgba(255, 255, 255, 0.15);
  background: transparent;
  color: var(--text-secondary);
}
[data-theme=dark] .timer-ctrl-icon:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.05);
}
[data-theme=dark] .timer-ctrl-main {
  border-color: var(--text-primary);
  background: var(--text-primary);
}
[data-theme=dark] .timer-ctrl-main:hover {
  background: var(--text-secondary);
}
[data-theme=dark] .timer-ctrl-main.is-paused {
  background: transparent;
  color: var(--text-secondary);
  border-color: rgba(255, 255, 255, 0.15);
}
[data-theme=dark] .timer-ctrl-main.is-paused:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.05);
}
[data-theme=dark] .focus-compose {
  background: transparent;
  box-shadow: none;
}
[data-theme=dark] .focus-compose-input {
  background: transparent;
}
[data-theme=dark] .activity-item {
  background: transparent;
  box-shadow: none;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme=dark] .activity-item:hover {
  background: rgba(255, 255, 255, 0.03);
}
[data-theme=dark] .kanban-column-ny {
  background: transparent;
}
[data-theme=dark] .column-name-ny {
  color: var(--text-secondary);
}
[data-theme=dark] .column-count-ny {
  background: var(--border-color);
  color: var(--text-secondary);
}
[data-theme=dark] .kanban-empty-ny {
  border-color: var(--border-color);
  color: var(--text-secondary);
}
[data-theme=dark] .kanban-add-task-ny {
  color: var(--text-secondary);
}
[data-theme=dark] .matrix-quadrant-ny {
  background: var(--bg-surface);
  border-color: var(--border-color);
}
[data-theme=dark] .matrix-quadrant-ny.q1-urgent-important {
  border-left-color: #C17F59;
}
[data-theme=dark] .matrix-quadrant-ny.q2-not-urgent-important {
  border-left-color: #3B82F6;
}
[data-theme=dark] .matrix-quadrant-ny.q3-urgent-not-important {
  border-left-color: #D97706;
}
[data-theme=dark] .matrix-quadrant-ny.q4-not-urgent-not-important {
  border-left-color: var(--text-secondary);
}
[data-theme=dark] .quadrant-title-ny {
  color: var(--text-primary);
}
[data-theme=dark] .quadrant-subtitle-ny {
  color: var(--text-secondary);
}
[data-theme=dark] .quadrant-empty-ny {
  color: var(--text-secondary);
}
[data-theme=dark] .matrix-add-task-ny {
  color: var(--text-secondary);
}
[data-theme=dark] .shard-task {
  background: var(--bg-surface);
  border-color: var(--border-color);
}
[data-theme=dark] .shard-title {
  color: var(--text-primary);
}
[data-theme=dark] .shard-description {
  color: var(--text-secondary);
}

@media (max-width: 1024px) {
  .app-header {
    padding: 0 16px;
    height: 56px;
  }
  .main-view {
    top: 56px;
    height: calc(100% - 56px);
  }
  #task-view {
    top: 56px;
    height: calc(100% - 56px);
  }
  .logo-img {
    height: 18px;
  }
  .header-nav .nav-tabs {
    gap: 8px;
  }
  .nav-tabs .nav-btn {
    font-size: 12px;
    padding: 5px 12px;
  }
  .summary-btn-global {
    font-size: 11px;
    padding: 4px 8px;
  }
  .three-column-layout {
    grid-template-columns: 220px 1fr !important;
  }
  .three-column-layout .right-panel {
    display: none;
  }
  .left-panel {
    width: auto;
    height: calc(100vh - 56px);
  }
  .right-panel {
    width: auto;
    height: calc(100vh - 56px);
  }
  .center-panel {
    height: calc(100vh - 56px);
  }
  .center-area {
    padding: 4vh 16px 3vh;
    gap: 24px;
  }
  .timer-ring-wrap {
    width: 240px;
    height: 240px;
  }
  .focus-compose {
    max-width: 100%;
    padding: 0 16px;
  }
  .project-overview {
    padding: 24px 20px;
  }
  .matrix-grid-ny {
    padding: 16px;
    gap: 12px;
  }
  .kanban-container-ny {
    padding: 16px;
    gap: 12px;
  }
  .kanban-column-ny {
    flex: 0 0 240px;
    min-width: 240px;
  }
}
@media (max-width: 768px) {
  .app-header {
    padding: 0 12px;
    height: 48px;
  }
  .main-view {
    top: 48px;
    height: calc(100% - 48px);
  }
  #task-view {
    top: 48px;
    height: calc(100% - 48px);
  }
  .logo-img {
    height: 14px;
  }
  .header-content {
    gap: 8px !important;
  }
  .header-nav .nav-tabs {
    gap: 4px;
  }
  .nav-tabs .nav-btn {
    font-size: 12px;
    padding: 4px 10px;
  }
  .summary-btn-global {
    display: none;
  }
  .nav-tab-wrapper .task-view-dropdown {
    right: 0;
    left: auto;
  }
  .three-column-layout {
    grid-template-columns: 1fr !important;
  }
  .three-column-layout .left-panel,
  .three-column-layout .right-panel {
    display: none;
  }
  .center-panel {
    height: calc(100vh - 48px);
  }
  .center-area {
    padding: 3vh 16px 2vh;
    gap: 20px;
  }
  .timer-ring-wrap {
    width: 210px;
    height: 210px;
  }
  .timer-section .timer-display {
    font-size: 48px;
  }
  .timer-session-label {
    font-size: 10px;
  }
  .timer-session-dots {
    gap: 6px;
  }
  .session-dot {
    width: 5px;
    height: 5px;
  }
  .timer-controls {
    gap: 8px;
    margin-top: 16px;
  }
  .timer-ctrl-main {
    height: 36px;
    padding: 0 22px;
    font-size: 13px;
  }
  .timer-ctrl-icon {
    height: 36px;
    padding: 0 18px;
    font-size: 13px;
  }
  .focus-compose {
    max-width: 100%;
    padding: 0 12px;
  }
  .focus-compose-row {
    padding: 4px 0;
  }
  .focus-compose-input {
    font-size: 14px;
  }
  .project-overview {
    padding: 16px;
  }
  .project-section .boards-grid,
  .boards-grid {
    grid-template-columns: 1fr !important;
  }
  .github-style-layout {
    padding: 16px;
  }
  .profile-layout {
    flex-direction: column;
  }
  .profile-sidebar {
    width: 100% !important;
    max-width: none;
  }
  .matrix-grid-ny {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 12px;
    gap: 10px;
  }
  .matrix-quadrant-ny {
    min-height: auto;
    padding: 16px;
  }
  .matrix-quadrant-ny.q1-urgent-important {
    grid-area: auto;
  }
  .matrix-quadrant-ny.q2-not-urgent-important {
    grid-area: auto;
  }
  .matrix-quadrant-ny.q3-urgent-not-important {
    grid-area: auto;
  }
  .matrix-quadrant-ny.q4-not-urgent-not-important {
    grid-area: auto;
  }
  .kanban-container-ny {
    flex-direction: column;
    padding: 12px;
    gap: 12px;
    overflow-x: visible;
  }
  .kanban-column-ny {
    flex: none;
    min-width: 0;
    width: 100%;
  }
  .stats-cards-grid {
    grid-template-columns: 1fr !important;
  }
  .user-center-container .user-dropdown {
    right: -8px;
  }
}
@media (max-width: 480px) {
  .timer-ring-wrap {
    width: 180px;
    height: 180px;
  }
  .timer-section .timer-display {
    font-size: 40px;
  }
  .nav-tabs .nav-btn {
    font-size: 11px;
    padding: 4px 8px;
  }
  .center-area {
    padding: 2vh 12px 2vh;
    gap: 16px;
  }
  .timer-controls {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* =============================================================================
   登录页样式
   ============================================================================= */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #FAFAF9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-overlay[hidden] {
  display: none;
}
.auth-card {
  width: 340px;
  text-align: center;
  padding: 0 20px;
}
.auth-logo {
  height: 32px;
  margin-bottom: 8px;
}
.auth-subtitle {
  font-size: 14px;
  color: #78716C;
  margin-bottom: 40px;
}
#auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #D6D3D1;
  padding: 10px 0;
  font-size: 15px;
  font-family: inherit;
  background: transparent;
  color: #1C1917;
  transition: border-color 0.2s;
}
.auth-input::placeholder {
  color: #A8A29E;
}
.auth-input:focus {
  border-bottom-color: #292524;
  outline: none;
}
.auth-btn-primary {
  width: 100%;
  height: 42px;
  border-radius: 6px;
  background: #292524;
  color: white;
  border: 1px solid #292524;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 8px;
}
.auth-btn-primary:hover {
  background: #1C1917;
}
.auth-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.auth-error {
  color: #C17F59;
  font-size: 13px;
  text-align: left;
  margin: 0;
}
.auth-error[hidden] {
  display: none;
}
.auth-divider {
  display: flex;
  align-items: center;
  margin: 24px 0;
  color: #A8A29E;
  font-size: 13px;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #E7E5E4;
}
.auth-divider span {
  padding: 0 12px;
}
.auth-btn-google {
  width: 100%;
  height: 42px;
  border-radius: 6px;
  border: 1px solid #E7E5E4;
  background: white;
  color: #57534E;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: border-color 0.2s, background 0.2s;
}
.auth-btn-google:hover {
  border-color: #D6D3D1;
  background: #FAFAF9;
}
.auth-btn-google + .auth-btn-google {
  margin-top: 8px;
}
.auth-toggle {
  margin-top: 24px;
  font-size: 13px;
  color: #78716C;
}
.auth-toggle a {
  color: #292524;
  text-decoration: none;
  font-weight: 500;
}
.auth-toggle a:hover {
  text-decoration: underline;
}

/* 登录页暗色模式 */
[data-theme=dark] .auth-overlay {
  background: var(--bg-primary);
}
[data-theme=dark] .auth-subtitle {
  color: var(--text-secondary);
}
[data-theme=dark] .auth-input {
  color: var(--text-primary);
  border-bottom-color: var(--border-color);
}
[data-theme=dark] .auth-input::placeholder {
  color: var(--text-secondary);
}
[data-theme=dark] .auth-input:focus {
  border-bottom-color: var(--text-primary);
}
[data-theme=dark] .auth-btn-primary {
  background: #F5F5F4;
  color: #1C1917;
  border-color: #F5F5F4;
}
[data-theme=dark] .auth-btn-primary:hover {
  background: #E7E5E4;
}
[data-theme=dark] .auth-divider {
  color: var(--text-secondary);
}
[data-theme=dark] .auth-divider::before,
[data-theme=dark] .auth-divider::after {
  background: var(--border-color);
}
[data-theme=dark] .auth-btn-google {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-color);
}
[data-theme=dark] .auth-btn-google:hover {
  background: var(--bg-secondary);
  border-color: #57534E;
}
[data-theme=dark] .auth-toggle {
  color: var(--text-secondary);
}
[data-theme=dark] .auth-toggle a {
  color: var(--text-primary);
}
[data-theme=dark] .auth-error {
  color: #D4A574;
}

/* 退出登录按钮 */
.menu-item-logout {
  color: #78716C;
}