/*
 * Styles for the project page, specifically the left sidebar (#left-sidebar).
 * This file enhances the appearance of the project navigation and content area,
 * aligning with the application's theme and global styles.
 * 
 * 样式组织：
 * 1. 基础#left-sidebar样式（链接、标题等）
 * 2. 折叠区域控件样式
 * 3. 表单控件样式
 * 4. 按钮和操作栏样式
 * 5. 项目列表控件样式
 * 6. 主题特定样式覆盖（暗色/亮色）
 */

/* ===========================================
   基础侧边栏样式 - Base Sidebar Styles
   =========================================== 
   
   字体大小策略：
   - 主标题：14px (--font-size-sm)
   - 折叠标题：12px (--font-size-xs) 
   - 表单标签、输入框：12px (--font-size-xs)
   - 项目标题：12px (--font-size-xs)
   - 项目描述/元数据：10px (0.625rem)
   - 按钮：12px (--font-size-xs)
   
   配套调整：
   - 减小按钮和图标尺寸
   - 减小内边距和间距
   - 保持视觉层次和可读性
   =========================================== */

#left-sidebar h2 {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

#left-sidebar ul {
  list-style-type: none;
}

#left-sidebar ul li a {
  display: block;
  color: var(--color-primary);
  text-decoration: none;
  padding: 10px 10px;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s;
}

#left-sidebar ul li a:hover {
  background-color: var(--color-bg-light);
  color: var(--color-primary-dark);
}

#left-sidebar ul li a.active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ===========================================
   折叠区域控件样式 - Collapsible Section Styles
   =========================================== */

.collapsible-section {
  margin-bottom: var(--spacing-md, 16px);
  border-radius: var(--radius-base);
  background-color: var(--color-bg-primary);
  overflow: hidden;
  transition: var(--transition-normal);
} 

.collapsible-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px; 
  transition: var(--transition-fast);
}

.collapsible-header:hover {
  background-color: var(--color-bg-light);
}

.collapsible-section .collapsible-header h2 {
  font-size: var(--font-size-sm) !important; /* 减小折叠标题字体 12px */
  font-weight: var(--font-weight-medium) !important;
  margin: 0 !important; 
  padding: 0 !important; /* 覆盖全局h2的padding-bottom */
  font-family: var(--app-font-family) !important;
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important; /* 设置行高为1，减少字体基线造成的偏移 */
  vertical-align: middle !important; /* 强制垂直居中 */
  text-transform: none !important; /* 覆盖全局h2的text-transform: uppercase */
  letter-spacing: normal !important; /* 覆盖全局h2的letter-spacing */
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 4px);
  position: relative;
  overflow: visible;
}

.project-semantics-panel {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  background: transparent;
}

.project-semantics-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.project-semantics-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.project-semantics-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.project-semantics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.project-semantics-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.project-semantics-label {
  font-size: 11px;
  color: var(--color-text-secondary);
}

.project-semantics-badge,
.project-semantics-value {
  font-size: 12px;
  color: var(--color-text-primary);
}

.project-semantics-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-bg-light);
}

.project-semantics-badge.kind-domain-metamodel {
  color: #8a3b12;
  background: rgba(255, 122, 69, 0.14);
}

.project-semantics-badge.kind-domain-model {
  color: #0f6b46;
  background: rgba(15, 107, 70, 0.14);
}

.project-semantics-badge.kind-project {
  color: var(--color-text-primary);
}

.project-semantics-hint {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.project-semantics-chain {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border-light);
}

.project-semantics-chain-value {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-primary);
  word-break: break-word;
}

.project-dependent-groups {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-dependent-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.project-dependent-group-label {
  font-size: 11px;
  color: var(--color-text-secondary);
}

.project-dependent-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.project-dependent-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-light);
  color: var(--color-text-primary);
  cursor: pointer;
  font-size: 11px;
  line-height: 1.4;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.project-dependent-chip:hover,
.project-dependent-chip:focus-visible {
  border-color: rgba(24, 90, 219, 0.28);
  background: rgba(24, 90, 219, 0.08);
  color: #185adb;
  outline: none;
}

.project-dependent-chip-layer {
  color: var(--color-text-secondary);
}

.project-chain-crumb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-light);
  color: var(--color-text-primary);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.project-chain-crumb:hover,
.project-chain-crumb:focus-visible {
  background: rgba(24, 90, 219, 0.1);
  border-color: rgba(24, 90, 219, 0.28);
  color: #185adb;
  outline: none;
}

.project-chain-crumb.is-current {
  background: rgba(15, 107, 70, 0.14);
  border-color: rgba(15, 107, 70, 0.22);
  color: #0f6b46;
  font-weight: 600;
}

.project-chain-crumb.is-current:hover,
.project-chain-crumb.is-current:focus-visible {
  background: rgba(15, 107, 70, 0.18);
  border-color: rgba(15, 107, 70, 0.28);
  color: #0f6b46;
}

.project-chain-separator {
  display: inline-flex;
  align-items: center;
  margin: 0 4px;
  color: var(--color-text-secondary);
}

.project-semantics-chain-graph {
  margin-top: 10px;
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}

.project-chain-node {
  display: inline-flex;
  align-items: stretch;
}

.project-chain-node-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 116px;
  max-width: 180px;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-light);
  color: var(--color-text-primary);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.project-chain-node-card:hover,
.project-chain-node-card:focus-visible {
  border-color: rgba(24, 90, 219, 0.3);
  background: rgba(24, 90, 219, 0.08);
  transform: translateY(-1px);
  outline: none;
}

.project-chain-node.is-current .project-chain-node-card {
  border-color: rgba(15, 107, 70, 0.24);
  background: rgba(15, 107, 70, 0.12);
}

.project-chain-node-layer {
  font-size: 10px;
  line-height: 1.3;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.project-chain-node-name {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-primary);
  font-weight: 600;
}

.project-chain-node-link {
  align-self: center;
  width: 18px;
  height: 1px;
  background: var(--color-border-light);
}

.project-list-focus-target {
  animation: project-list-focus-pulse 1.5s ease;
}

@keyframes project-list-focus-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(24, 90, 219, 0.24);
  }
  30% {
    box-shadow: 0 0 0 6px rgba(24, 90, 219, 0.16);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(24, 90, 219, 0);
  }
}

.project-kind-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
}

.project-kind-chip-metamodel {
  color: #8a3b12;
  background: rgba(255, 122, 69, 0.14);
}

.project-kind-chip-domain {
  color: #0f6b46;
  background: rgba(15, 107, 70, 0.14);
}

/* ================================
   Preview mode layout adjustments
   ================================ */
body.preview-mode nav.minimal-nav,
body.preview-mode #left-sidebar,
body.preview-mode .sidebar,
body.preview-mode .node-property-sidebar,
body.preview-mode .chat-panel,
body.preview-mode .project-panel,
body.preview-mode .project-panel-container,
body.preview-mode #view-panel-tab-strip,
body.preview-mode .toolbar,
body.preview-mode .user-info-container {
  display: none !important;
}

body.preview-mode {
  height: 100vh;
  overflow: hidden; /* Prevent browser scrollbars inside preview iframe */
}

body.preview-mode .app-container {
  padding: 0 !important;
  margin: 0 !important;
  height: 100% !important;
}

body.preview-mode .canvas-wrapper,
body.preview-mode .canvas-area,
body.preview-mode #opm-canvas,
body.preview-mode #canvas {
  margin: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
}

body.preview-mode #opm-canvas {
  background-image: none !important;
}

body.preview-mode .canvas-area,
body.preview-mode #opm-canvas,
body.preview-mode #canvas {
  cursor: grab;
}

body.version-preview-mode .canvas-area,
body.version-preview-mode #opm-canvas,
body.version-preview-mode #canvas {
  cursor: grab;
}

body.preview-mode .opm-element,
body.preview-mode .opm-link {
  cursor: inherit !important;
}

body.version-preview-mode .opm-element,
body.version-preview-mode .opm-link {
  cursor: inherit !important;
}

body.preview-mode #simulation-console,
body.preview-mode .simulation-console {
  display: none !important;
  box-shadow: none !important;
}

/* 视图切换控件 */
.view-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--color-bg-primary);
  border: none; /* 不需要外层边框 */
  border-radius: 8px;
  padding: 2px;
  margin-right: 6px;
}

.view-toggle-btn {
  background: transparent !important;
  border: none !important;
  width: 28px;
  height: 28px;
  color: #888 !important; /* 未选中为灰色 */
  border-radius: 6px;
}

.view-toggle-btn[aria-pressed="true"],
.view-toggle-btn.active {
  background: transparent !important; /* 激活不再使用背景色 */
  color: #000 !important; /* 选中为黑色 */
}

/* 显式指定未选中态，防止其他规则覆盖 */
.view-toggle-btn[aria-pressed="false"]:not(.active) {
  color: #888 !important;
}

/* 覆盖悬停状态，避免出现背景高亮 */
.view-toggle-btn:hover {
  background: transparent !important;
  transform: none;
}

/* 悬停时保持各自颜色不被全局hover规则覆盖 */
.view-toggle-btn[aria-pressed="false"]:hover:not(.active) { color: #888 !important; }
.view-toggle-btn[aria-pressed="true"]:hover,
.view-toggle-btn.active:hover { color: #000 !important; }

/* 明确控制图标颜色（避免继承冲突） */
/* 由父级按钮 color 控制图标颜色，避免强制 stroke/fill 导致边框出现 */
.view-toggle-btn svg {
  color: inherit !important;
}

/* 进一步用ID提高优先级，确保状态色不被其他样式覆盖 */
#view-toggle-grid[aria-pressed="false"],
#view-toggle-list[aria-pressed="false"] {
  color: #888 !important;
}

#view-toggle-grid[aria-pressed="true"],
#view-toggle-list[aria-pressed="true"],
#view-toggle-grid.active,
#view-toggle-list.active {
  color: #000 !important;
}

#view-toggle-grid[aria-pressed="false"]:hover,
#view-toggle-list[aria-pressed="false"]:hover {
  color: #888 !important;
}

#view-toggle-grid[aria-pressed="true"]:hover,
#view-toggle-list[aria-pressed="true"]:hover,
#view-toggle-grid.active:hover,
#view-toggle-list.active:hover {
  color: #000 !important;
}

/* 保障网格图标填充使用当前颜色（确保为灰/黑实心） */
#view-toggle-grid svg {
  fill: currentColor !important;
  stroke: none !important;
}
#view-toggle-grid[aria-pressed="false"] svg { color: #888 !important; }
#view-toggle-grid[aria-pressed="true"] svg,
#view-toggle-grid.active svg { color: #000 !important; }

/* 列表图标使用描边（不填充），避免被全局 fill 覆盖 */
#view-toggle-list svg {
  stroke: currentColor !important;
  fill: none !important;
}

/* 将工程列表的“新建”等按钮向左移动一点 */
#project-management-section .header-actions {
    margin-right: 8px;
}

/* 让标题栏中的工具按钮（如保存按钮）背景透明，与标题栏融为一体 */
#left-sidebar .collapsible-header .header-actions .toolbar-btn {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
}

.collapsible-header .header-actions .toolbar-btn:hover {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  transform: none; /* 移除悬浮时的位移效果 */
}

.toggle-collapse-btn {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: var(--spacing-xs, 4px);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.toggle-collapse-btn .arrow-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
  transition: transform var(--transition-fast);
}

.collapsible-section:not(.expanded) .toggle-collapse-btn .arrow-icon {
  transform: rotate(-90deg);
}

.collapsible-content {
  padding: var(--spacing-sm, 8px); 
  transition: var(--transition-normal);
}

.collapsible-section:not(.expanded) .collapsible-content {
  display: none;
}

/* 特定于工程信息区域的滚动和边距修复 */
#project-info-section .collapsible-content {
  overflow: visible;
  padding-bottom: 16px; /* 增加底部内边距，确保“标签”输入框不被遮挡 */
}

/* 使工程列表区域填满剩余空间 */
#project-management-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* 关键：防止flex子项溢出其容器 */
}

#project-management-section .collapsible-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0; /* 移除内边距，让列表填满 */
  /* 关键修复：把滚动权交给内部的 .project-list，避免双重滚动容器导致滚动条不出现 */
  overflow: hidden;
  background-color: var(--color-bg-primary);
}

#project-management-section .action-bar {
  padding: var(--spacing-sm, 8px);
  padding-bottom: 4px;
  margin-bottom: 0;
}

/* ===========================================
   自定义滚动条样式 (亮/暗色主题)
   =========================================== */
#project-info-section .collapsible-content::-webkit-scrollbar,
.project-list::-webkit-scrollbar,
#current-project-view::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#project-info-section .collapsible-content::-webkit-scrollbar-track,
.project-list::-webkit-scrollbar-track,
#current-project-view::-webkit-scrollbar-track {
  background: transparent; /* 轨道背景透明 */
}

#project-info-section .collapsible-content::-webkit-scrollbar-thumb,
.project-list::-webkit-scrollbar-thumb,
#current-project-view::-webkit-scrollbar-thumb {
  background-color: var(--color-border-medium);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}

#project-info-section .collapsible-content::-webkit-scrollbar-thumb:hover,
.project-list::-webkit-scrollbar-thumb:hover,
#current-project-view::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-primary);
}

/* 亮色主题下的滚动条样式 */
[data-theme="light"] #project-info-section .collapsible-content::-webkit-scrollbar-thumb,
[data-theme="light"] .project-list::-webkit-scrollbar-thumb,
[data-theme="light"] #current-project-view::-webkit-scrollbar-thumb {
  background-color: #a9b1ba;
}

[data-theme="light"] #project-info-section .collapsible-content::-webkit-scrollbar-thumb:hover,
[data-theme="light"] .project-list::-webkit-scrollbar-thumb:hover,
[data-theme="light"] #current-project-view::-webkit-scrollbar-thumb:hover {
  background-color: #868e96;
}

/* ===========================================
   表单控件样式 - Form Controls Styles
   =========================================== */

#left-sidebar .form-group {
  margin-bottom: var(--spacing-md, 16px);
}

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

#left-sidebar .form-label {
  display: block;
  margin-bottom: var(--spacing-xs, 4px);
  font-size: var(--font-size-xs); /* 减小标签字体 12px */
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  font-family: var(--app-font-family);
}

#left-sidebar .form-input,
#left-sidebar .form-textarea {
  width: 100%;
  padding: var(--spacing-sm, 8px) var(--spacing-sm, 8px);
  font-size: var(--font-size-xs); /* 减小输入框字体 12px */
  font-family: var(--app-font-family);
  color: var(--color-text-primary);
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-base);
  transition: var(--transition-fast);
  box-sizing: border-box;
}

#left-sidebar .form-input:focus,
#left-sidebar .form-textarea:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.1);
}

#left-sidebar .form-input:hover:not(:focus),
#left-sidebar .form-textarea:hover:not(:focus) {
  border-color: var(--color-border-medium);
}

#left-sidebar .form-input::placeholder,
#left-sidebar .form-textarea::placeholder {
  color: var(--color-text-muted);
  font-style: italic;
}

#left-sidebar .form-textarea {
  resize: vertical;
  min-height: 80px;
  max-height: 200px;
}

/* 输入框禁用状态 */
#left-sidebar .form-input:disabled,
#left-sidebar .form-textarea:disabled {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

/* 亮色主题下的表单控件特殊处理 */
[data-theme="light"] #left-sidebar .form-input,
[data-theme="light"] #left-sidebar .form-textarea {
  background-color: var(--sidebar-light-theme-input-bg, #ffffff);
  border-color: var(--sidebar-light-theme-input-border, #ced4da);
  color: var(--sidebar-light-theme-text, #212529);
}

[data-theme="light"] #left-sidebar .form-input:focus,
[data-theme="light"] #left-sidebar .form-textarea:focus {
  box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.15);
}

[data-theme="light"] #left-sidebar .form-input::placeholder,
[data-theme="light"] #left-sidebar .form-textarea::placeholder {
  color: var(--sidebar-light-theme-text-secondary, #6c757d);
}

/* ===========================================
   按钮和操作栏样式 - Button & Action Bar Styles
   =========================================== */

.action-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-xs, 4px);
  margin-bottom: var(--spacing-md, 16px);
  padding: var(--spacing-sm, 8px) 0;
}

#left-sidebar .toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
  min-width: 28px; /* 减小按钮尺寸 */
  height: 28px; /* 减小按钮高度 */
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--font-size-xs); /* 减小按钮字体 12px */
  font-family: var(--app-font-family);
  text-decoration: none;
  transition: var(--transition-fast);
  box-sizing: border-box;
}

#left-sidebar .toolbar-btn:hover {
  background-color: var(--color-bg-light);
  color: var(--color-text-primary);
  border-color: var(--color-border-medium);
  transform: translateY(-1px);
}

#left-sidebar .toolbar-btn:active {
  transform: translateY(0);
  background-color: var(--color-bg-secondary);
}

#left-sidebar .toolbar-btn:focus {
  outline: none;
  box-shadow: none;
}

#left-sidebar .toolbar-btn:focus-visible {
  outline: none;
  box-shadow: none;
}

#left-sidebar .toolbar-btn:disabled {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-disabled);
  border-color: var(--color-border-light);
  cursor: not-allowed;
  transform: none;
  opacity: 0.5;
}

/* 工具栏按钮图标 */
#left-sidebar .toolbar-btn svg {
  width: 14px; /* 减小图标尺寸 */
  height: 14px; /* 减小图标尺寸 */
  fill: currentColor;
  transition: var(--transition-fast);
}

#left-sidebar .toolbar-btn:hover svg {
  fill: currentColor;
}

/* 主要按钮样式 - Primary Button */
#left-sidebar .toolbar-btn.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

#left-sidebar .toolbar-btn.btn-primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
}

#left-sidebar .toolbar-btn.btn-primary:active {
  background-color: var(--color-primary-dark);
}

/* 成功按钮样式 - Success Button */
#left-sidebar .toolbar-btn.btn-success {
  background-color: var(--color-success);
  color: var(--color-white);
  border-color: var(--color-success);
}

#left-sidebar .toolbar-btn.btn-success:hover {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  color: var(--color-white);
}

/* 亮色主题下按钮的特殊处理 */
[data-theme="light"] #left-sidebar .toolbar-btn {
  background-color: var(--color-bg-tertiary);
  color: var(--sidebar-light-theme-text);
  border-color: var(--sidebar-light-theme-border);
}

[data-theme="light"] #left-sidebar .toolbar-btn:hover {
  background-color: var(--color-bg-tertiary);
  color: var(--sidebar-light-theme-text);
  border-color: var(--color-border-medium);
}

[data-theme="light"] #left-sidebar .toolbar-btn:active {
  background-color: var(--color-bg-secondary);
}

/* ===========================================
   项目列表控件样式 - Project List Controls Styles
   =========================================== */

.project-panel-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#project-list-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#current-project-view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable both-edges;
  padding-right: 4px;
}

.project-list {
  flex: 1;
  /* 让列表自身成为滚动容器，确保自定义滚动条样式作用于正确的元素 */
  height: 100%;
  /* 始终预留滚动条区域（在多数浏览器显示滚动槽），更直观地提示可滚动 */
  overflow-y: scroll;
  overflow-x: hidden;
  /* 在支持的浏览器中预留滚动槽，避免布局抖动并提高可见性 */
  scrollbar-gutter: stable both-edges;
  position: relative; /* 供内部 sticky 提示定位 */
  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px); /* 恢复水平内边距 */
  padding-bottom: var(--spacing-sm, 8px);
}

.project-kind-collection {
  display: block;
}

/* 网格视图容器 */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-auto-rows: max-content;
  gap: 8px;
  padding: 8px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable both-edges;
  align-content: start;
  align-items: start;
}

.project-kind-section {
  margin-bottom: 0;
  padding: 0;
  position: relative;
}

.project-kind-section + .project-kind-section {
  margin-top: 14px;
}

.project-kind-section + .project-kind-section::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: 10px;
  background: var(--color-border-light);
}

.project-kind-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  margin-bottom: 0;
  cursor: pointer;
  user-select: none;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.project-kind-section-header:hover {
  background: transparent;
}

.project-kind-section-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  color: var(--color-text-secondary);
  transition: transform 0.18s ease;
}

.project-kind-section.is-collapsed .project-kind-section-arrow {
  transform: rotate(-90deg);
}

.project-kind-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.project-kind-section-count {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 0;
  font-size: 12px;
  color: var(--color-text-secondary);
  background: transparent;
}

.project-kind-section-body.project-list,
.project-kind-section-body.project-grid {
  height: auto;
  overflow: visible;
  padding-top: 0;
}

.project-kind-section-body[hidden] {
  display: none !important;
}

/* 项目卡片 */
.project-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  overflow: hidden; /* 防止内部溢出覆盖下一卡片 */
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.project-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  border-color: var(--color-border-medium);
}

.project-card-thumb {
  height: 110px; /* 默认有缩略图时的高度 */
  background: rgba(0, 0, 0, 0.02); /* 更浅的灰色纯色背景（亮色主题） */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* 允许在缩略图上叠加角标 */
}

/* 暗色主题下的轻灰背景（使用白色低不透明度） */
[data-theme="dark"] .project-card-thumb {
  background: rgba(255, 255, 255, 0.04); /* 更浅的亮灰（暗色主题） */
}

/* 没有缩略图时，缩小预留区域高度，让卡片整体更紧凑 */
.project-card.no-thumb .project-card-thumb {
  height: 56px;
}

/* 让卡片高度随内容自适应，避免下方空白 */
.project-card.has-thumb { min-height: 0; }
.project-card.no-thumb  { min-height: 0; }
.project-card.has-thumb.has-tags { min-height: 0; }
.project-card.no-thumb.has-tags  { min-height: 0; }

/* 卡片页脚：标题 + 操作按钮（确保始终可见） */
.project-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  min-height: 36px;
  background: var(--color-bg-light, #f3f4f6);
}

.project-thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 缩略图右上角标签角标容器 */
.project-thumb-badges {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  max-width: 80%;
}
.project-thumb-badges .project-tag {
  font-size: 10px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 10px;
  border: 1px solid transparent; /* 由 tag-color-* 覆盖 */
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  white-space: nowrap;
}
.project-thumb-badges .project-tag.more {
  background: rgba(0,0,0,0.4);
  color: #fff;
  border-color: rgba(255,255,255,0.35);
}

.project-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.project-card-body {
  box-sizing: border-box;
  padding: 6px 8px 8px; /* 正常内边距 */
  display: flex; /* 纵向流式排布 */
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  gap: 2px;
  overflow: visible;
}

/* 取消按类型额外预留，由最小高度保障 */

/* 消除任何来源于全局样式的外边距，避免行间距被放大 */
.project-card-body > * {
  margin: 0 !important;
}

.project-card-title {
  font-size: var(--font-size-sm); /* 放大标题字号 */
  font-weight: var(--font-weight-medium);
  margin: 0; /* 去掉与标签行的额外间距 */
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0; /* 允许标题文本在flex中收缩以显示省略号 */
  overflow: hidden; /* 防止公开标签挤压导致溢出 */
}

.project-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px; /* 略微间距 */
  margin-bottom: 0; /* 与按钮无额外间距 */
  min-height: 18px; /* 防止被压缩为0 */
  height: 18px; /* 强制可见高度 */
  line-height: 18px;
  background: transparent; /* 去除浅背景避免视觉增厚 */
}

.project-meta-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
}

.project-meta-line-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  justify-content: center;
}

.project-card-tags {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow: hidden;
}

.project-tag {
  font-size: 10px;
  line-height: 14px;
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: 999px;
  padding: 2px 6px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.project-tag-filter {
  margin-top: 8px;
}

.project-tag-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 46px; /* 两行标签 + 间距 */
  overflow: hidden;
}

.project-tag-filter-row.is-expanded {
  max-height: none;
}

.project-tag-filter-toggle {
  margin-top: 6px;
  font-size: 11px;
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.project-tag-filter-toggle:hover {
  color: var(--color-text-primary);
}

.project-tag-filter-toggle .toggle-icon {
  width: 12px;
  height: 12px;
  display: inline-block;
  stroke: currentColor;
  fill: none;
  transition: transform 0.15s ease;
}

.project-tag-filter-toggle.is-expanded .toggle-icon {
  transform: rotate(180deg);
}

.project-tag-filter .project-tag {
  cursor: pointer;
  user-select: none;
  transition: transform 0.1s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.project-tag-filter .project-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.project-tag-filter .project-tag.is-active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(64, 117, 255, 0.15);
}

.project-tag-filter-empty {
  font-size: 11px;
  color: var(--color-text-muted);
  padding: 2px 0;
}

.project-public-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  background: rgba(81, 189, 138, 0.16);
  border: 1px solid rgba(81, 189, 138, 0.35);
  color: #51bd8a;
  flex: 0 0 auto;
  white-space: nowrap;
}

.project-shared-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  background: rgba(71, 125, 255, 0.14);
  border: 1px solid rgba(71, 125, 255, 0.3);
  color: #5f8dff;
  flex: 0 0 auto;
  white-space: nowrap;
}

[data-theme="light"] .project-shared-chip {
  background: rgba(38, 93, 235, 0.1);
  border-color: rgba(38, 93, 235, 0.22);
  color: #2d57c6;
}

[data-theme="light"] .project-public-chip {
  background: rgba(8, 142, 88, 0.12);
  border-color: rgba(8, 142, 88, 0.3);
  color: #0d7c52;
}

/* 标签配色（8色），保证不同标签背景各异且易读 */
.project-tag.tag-color-0 { background: #e9f5ff; border-color: #b3ddff; color: #0b3d62; }
.project-tag.tag-color-1 { background: #e8f7ef; border-color: #b6e8cc; color: #1f5f3b; }
.project-tag.tag-color-2 { background: #fff3e0; border-color: #ffd8a8; color: #734408; }
.project-tag.tag-color-3 { background: #f3e8ff; border-color: #dcc0ff; color: #4a2873; }
.project-tag.tag-color-4 { background: #fdecee; border-color: #ffced3; color: #7a1f2a; }
.project-tag.tag-color-5 { background: #e6fbff; border-color: #b8eef7; color: #0b5563; }
.project-tag.tag-color-6 { background: #fffbe6; border-color: #fff1a8; color: #6b5d06; }
.project-tag.tag-color-7 { background: #eef0ff; border-color: #c6ccff; color: #26396b; }

[data-theme="dark"] .project-tag.tag-color-0 { background:#163447; border-color:#2b5672; color:#cfe9ff; }
[data-theme="dark"] .project-tag.tag-color-1 { background:#173a2a; border-color:#2b694d; color:#d4f1e1; }
[data-theme="dark"] .project-tag.tag-color-2 { background:#46331a; border-color:#6a4a1f; color:#ffe6bf; }
[data-theme="dark"] .project-tag.tag-color-3 { background:#2f2940; border-color:#4d3e68; color:#ebdcff; }
[data-theme="dark"] .project-tag.tag-color-4 { background:#4a2a32; border-color:#6e3a43; color:#ffdbe0; }
[data-theme="dark"] .project-tag.tag-color-5 { background:#103a42; border-color:#1f5a65; color:#d7f6fb; }
[data-theme="dark"] .project-tag.tag-color-6 { background:#423b18; border-color:#655923; color:#fff3b8; }
[data-theme="dark"] .project-tag.tag-color-7 { background:#232a4a; border-color:#38436b; color:#e7ecff; }

.project-card-time {
  font-size: 10px;
  color: var(--color-text-muted);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.project-card-actions {
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 24px;
  height: 24px;
  background: transparent;
  padding: 0 2px;
}

.project-card-stats {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 0 auto;
  justify-content: center;
}

.project-card-stats .stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  line-height: 1;
}

.project-card-stats .icon {
  width: 10px;
  height: 10px;
  color: currentColor;
}

.project-card-stats .num {
  color: currentColor;
  font-size: 10px;
  line-height: 1;
  min-width: 0;
  text-align: left;
}

.project-item-meta.project-time-item {
  flex: 0 1 auto;
  min-width: 0;
}

.project-card.has-thumb .project-card-actions { bottom: 8px; }
.project-card.no-thumb  .project-card-actions { bottom: 6px; }

.project-card-actions .project-action-btn {
  width: 22px;
  height: 22px;
  color: var(--color-text-secondary);
  flex: 0 0 auto;
}

[data-theme="light"] .project-card {
  background: var(--color-bg-primary);
}

[data-theme="light"] .project-card:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

.project-list-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 6px var(--spacing-sm, 8px); 
  margin-bottom: 2px; 
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-base);
  cursor: pointer;
  transition: var(--transition-fast);
  user-select: none;
}

.project-list-item.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.project-item-content {
  flex: 1;
  min-width: 0; /* 允许flex子项收缩 */
  margin-right: 0;
  text-align: center;
}

.project-item-title {
  font-size: var(--font-size-xs); 
  font-weight: var(--font-weight-medium);
  font-family: var(--app-font-family);
  color: currentColor;
  margin: 0;
  max-width: 100%; /* 确保在父容器内 */
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.project-title-text {
  display: block;
  min-width: 0;
  flex: 1 1 0;
  max-width: 100%;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-content: center;
}

.project-card-title .project-title-text {
  justify-content: flex-start;
  text-align: left;
}

.project-title-chips {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  max-width: 42%;
}

/* 列表/网格标题统一：名称居中，公开标签固定在右侧，不影响标题居中 */
.project-item-title,
.project-grid .project-card-title {
  position: relative;
  justify-content: center;
}

.project-item-title .project-title-text,
.project-grid .project-card-title .project-title-text {
  justify-content: center;
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}

.project-item-title.has-public-chip .project-title-text,
.project-grid .project-card-title.has-public-chip .project-title-text {
  padding-left: 0;
  padding-right: 35px;
}

.project-item-title .project-title-chips,
.project-grid .project-card-title .project-title-chips {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
}

.project-item-description {
  font-size: 0.625rem; 
  color: var(--color-text-muted);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-list-item.active .project-item-description {
  color: rgba(255, 255, 255, 0.8);
}

.project-item-meta {
  font-size: 0.625rem; /* 进一步减小元数据字体 10px */
  color: var(--color-text-muted);
  margin: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

/* 时间组水平对齐：图标与文本垂直居中 */
.project-time-group {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.project-time-item {
  display: inline-flex;
  align-items: center;
}
.project-time-item svg {
  width: 12px;
  height: 12px;
  display: block; /* 避免基线导致的偏移 */
}
.project-time-item span {
  line-height: 1;
}

.project-list-item.active .project-item-meta {
  color: rgba(255, 255, 255, 0.7);
}

.project-item-actions {
  display: flex;
  gap: var(--spacing-xs, 4px);
  flex-shrink: 0; /* 防止按钮区域被压缩 */
  min-width: 112px; /* 为5个按钮预留宽度 */
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}

/* 动态生成的工程列表项现在使用.project-item-title类，该样式已在上方定义 */

.project-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; /* 减小按钮尺寸 */
  height: 20px; /* 减小按钮尺寸 */
  padding: 0;
  background-color: transparent;
  color: var(--color-text-muted);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
  opacity: 0.7;
}

.project-action-btn:hover {
  background-color: rgba(0, 0, 0, 0.1);
  color: var(--color-text-primary);
  opacity: 1;
}

[data-theme="dark"] .project-action-btn:hover,
body.dark-theme .project-action-btn:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary);
}

.project-list-item.active .project-action-btn {
  color: rgba(255, 255, 255, 0.8);
}

.project-list-item.active .project-action-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
}

[data-theme="dark"] .project-list-item .project-action-btn,
body.dark-theme .project-list-item .project-action-btn {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .project-list-item.active .project-action-btn,
body.dark-theme .project-list-item.active .project-action-btn {
  color: rgba(255, 255, 255, 0.85);
}

.project-action-btn svg {
  width: 12px; /* 减小操作按钮图标 */
  height: 12px; /* 减小操作按钮图标 */
  fill: none;
  stroke: currentColor;
}

.project-action-btn.project-public-toggle-btn {
  opacity: 0.8;
}

.project-action-btn.project-public-toggle-btn.is-active {
  color: #51bd8a;
  opacity: 1;
}

.project-action-btn.project-share-manage-btn {
  opacity: 0.9;
}

.project-action-btn.project-share-manage-btn.is-active {
  color: #5f8dff;
  opacity: 1;
}

[data-theme="light"] .project-action-btn.project-public-toggle-btn.is-active {
  color: #0f8f5e;
}

[data-theme="light"] .project-action-btn.project-share-manage-btn.is-active {
  color: #2d57c6;
}

.project-action-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* 空状态样式 */
.project-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl, 32px) var(--spacing-md, 16px);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs); /* 减小空状态字体 12px */
  font-family: var(--app-font-family);
}

.project-list-empty-icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--spacing-md, 16px);
  opacity: 0.4;
  fill: currentColor;
}

.project-share-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.project-share-member-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.project-share-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-base);
  background: var(--color-bg-secondary);
}

.project-share-member-meta {
  min-width: 0;
}

.project-share-member-name {
  font-size: 13px;
  color: var(--color-text-primary);
}

.project-share-member-sub,
.project-share-empty {
  font-size: 12px;
  color: var(--color-text-muted);
}


/* 此样式已移动到文件底部进行统一管理 */

/* 删除提示样式（不再使用） */
[data-theme="light"] #left-sidebar h2 {
  color: var(--sidebar-light-theme-text, #212529);
  border-bottom-color: var(--sidebar-light-theme-border, #dee2e6);
  font-size: var(--font-size-sm); /* 确保亮色主题下字体大小一致 */
}

[data-theme="light"] #left-sidebar ul li a {
  color: var(--color-primary);
}

[data-theme="light"] #left-sidebar ul li a:hover {
  background-color: rgba(255, 107, 53, 0.1);
  color: var(--color-primary-dark);
}

[data-theme="light"] #left-sidebar ul li a.active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* 亮色模式下折叠区域的背景色调整 */
[data-theme="light"] #left-sidebar .collapsible-section {
  background-color: var(--color-bg-primary);
  border-color: var(--sidebar-light-theme-border, #dee2e6);
}

[data-theme="light"] #left-sidebar .collapsible-header {
  background-color: var(--color-bg-primary);
}

[data-theme="light"] #left-sidebar .collapsible-header:hover {
  background-color: var(--color-bg-light);
}

/* 亮色模式下项目列表项的背景色调整 */
[data-theme="light"] #left-sidebar .project-list-item {
  background-color: var(--color-bg-primary);
  border-color: var(--sidebar-light-theme-border, #dee2e6);
}

[data-theme="light"] #left-sidebar .project-list-item:hover {
  background-color: rgba(209, 209, 209, 0.05);
}

[data-theme="light"] #left-sidebar .project-list-item.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

[data-theme="light"] #left-sidebar .project-list-item.active .project-item-description,
[data-theme="light"] #left-sidebar .project-list-item.active .project-item-meta {
  color: rgba(255, 255, 255, 0.8);
}

/* ===========================================
   暗色主题下的项目侧边栏背景色明确设置 - Dark Theme Sidebar Colors
   =========================================== */

[data-theme="dark"] #left-sidebar .collapsible-header {
  background-color: var(--color-bg-primary);
}

/* ===========================================
   最高优先级的亮色主题背景色覆盖 - Highest Priority Light Theme Override
   =========================================== */

[data-theme="light"] .view-toggle {
  background: var(--color-bg-primary);
}

[data-theme="light"] #project-management-section .collapsible-content {
  background-color: var(--color-bg-primary);
}

/* 最高优先级的亮色主题样式覆盖 - 合并所有选择器 */
/* ===========================================
   样式优先级说明 - Style Priority Notes
   ===========================================*/

/* ===========================================
   样式优先级说明 - Style Priority Notes
   ===========================================
   
   1. styles.css 中包含基础的 #left-sidebar 亮色主题样式
   2. 本文件提供增强的控件样式和颜色覆盖
   3. 使用 !important 确保关键样式生效
   4. 支持暗色/亮色主题自动切换
   
   注意：避免在其他文件中再次定义 #left-sidebar 的基础样式
   以免造成样式冲突和优先级问题。
   =========================================== */


/* Override fill for outline-style icons to ensure they are not filled */
#project-close-btn svg,
#project-refresh-btn svg {
  fill: none !important;
  stroke: currentColor;
}

/* 确保工程按钮的工具提示不被遮盖 */
#project-close-btn,
#project-refresh-btn {
  position: relative;
  z-index: var(--z-index-tooltip, 1070);
}
.project-card-tags-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 6px 0 6px;
}
.project-card-tags-row .project-tag {
  font-size: 10px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 10px;
  border: 1px solid transparent; /* 由 tag-color-* 覆盖 */
}

/* 在列表视图中，标签左对齐以贴合标题排版 */
.project-list .project-card-tags-row {
  justify-content: center;
  margin: 4px 0 0;
}