:root {
      --primary-blue: #1e40af;
      --light-blue: #dbeafe;
      --medium-blue: #3b82f6;
      --dark-blue: #1e3a8a;
      --gray: #64748b;
      --light-gray: #f1f5f9;
      --block-gap: 16px;
      --label-gap: 6px;
    }

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

    body {
      background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      color: #1e293b;
      line-height: 1.5;
    }

    #app {
      max-width: 1600px;
      margin: 0 auto;
      padding: 20px;
      position: relative;
    }

    .login-container {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .login-card {
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      width: 100%;
      max-width: 400px;
    }

    .login-header {
      background: var(--primary-blue);
      color: white;
      padding: 24px;
      text-align: center;
    }

    .login-body {
      padding: 32px 24px;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid #e5e7eb;
    }

    .header h1 {
      font-size: 32px;
      color: var(--primary-blue);
      font-weight: 700;
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--medium-blue);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
    }

    .user-menu {
      position: relative;
    }

    .user-dropdown {
      position: absolute;
      top: 100%;
      right: 0;
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      min-width: 200px;
      z-index: 100;
      margin-top: 8px;
      overflow: hidden;
    }

    .user-dropdown a {
      display: block;
      padding: 12px 16px;
      color: #374151;
      text-decoration: none;
      transition: background-color 0.2s;
    }

    .user-dropdown a:hover {
      background-color: #f3f4f6;
    }

    .mode-toggle, .controls {
      text-align: center;
      margin-bottom: 16px;
    }
    
    .controls {
      display: flex;
      gap: 8px;
      justify-content: center;
      flex-wrap: wrap;
    }

    button {
      padding: 8px 16px;
      font-size: 14px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      background: var(--medium-blue);
      color: white;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    button:hover {
      background: var(--primary-blue);
      transform: translateY(-1px);
    }

    button:active {
      transform: translateY(0);
    }

    button.secondary {
      background: var(--gray);
    }

    button.secondary:hover {
      background: #475569;
    }

    button.danger {
      background: #ef4444;
    }

    button.danger:hover {
      background: #dc2626;
    }

    button:disabled {
      background: #9ca3af;
      cursor: not-allowed;
      transform: none;
    }

    button.connection-mode {
      background: #10b981;
    }

    button.connection-mode:hover {
      background: #059669;
    }

    /* 修改：新的层容器样式 */
    .layer-container {
      margin-bottom: 32px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
      border: 1px solid #e5e7eb;
      transition: all 0.3s ease;
    }

    .layer-container:hover {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      border-color: var(--light-blue);
    }

    /* 修改：层标题样式 */
    .layer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 2px solid var(--light-blue);
    }

    .layer-title {
      font-size: 20px;
      font-weight: 600;
      color: var(--dark-blue);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .layer-title::before {
      content: '';
      width: 4px;
      height: 24px;
      background: var(--medium-blue);
      border-radius: 2px;
    }

    .layer-controls {
      display: flex;
      gap: 8px;
    }

    .layer-controls button {
      font-size: 12px;
      padding: 6px 12px;
    }

    /* 修改：新的流式布局容器 */
    .blocks-container {
      display: flex;
      flex-wrap: wrap;
      gap: var(--block-gap);
      align-items: stretch;
      justify-content: flex-start;
    }

    /* 修改：新的方块样式 */
    .block {
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      flex-direction: column;
      position: relative;
      /* 动态宽度计算 */
      flex: 1 1 calc((100% - var(--block-gap) * 3) / 4); /* 默认4列 */
      min-width: 200px;
      max-width: 400px;
    }

    /* 响应式列数调整 */
    .blocks-container.single-block .block {
      flex: 1 1 100%;
      max-width: 100%;
    }

    .blocks-container.two-blocks .block {
      flex: 1 1 calc((100% - var(--block-gap)) / 2);
      max-width: calc(50% - var(--block-gap) / 2);
    }

    .blocks-container.three-blocks .block {
      flex: 1 1 calc((100% - var(--block-gap) * 2) / 3);
      max-width: calc(33.333% - var(--block-gap) * 2 / 3);
    }

    .blocks-container.five-plus-blocks .block {
      flex: 1 1 calc((100% - var(--block-gap) * 4) / 5);
      max-width: calc(20% - var(--block-gap) * 4 / 5);
    }
    
    .block:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
      border-color: var(--medium-blue);
    }

    .block.selected {
      border-color: var(--medium-blue);
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    .block.connection-source {
      border-color: #10b981;
      box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
    }

    .block.connection-target {
      border-color: #f59e0b;
      box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
    }

    /* 修改：方块标题样式 */
/* block 标题容器（调整布局方向） */
    .block h4 {
      display: flex;
      flex-direction: column; /* 关键：子元素垂直排列 */
      gap: 8px; /* 标题与标签的间距 */
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid #f3f4f6;
    }

    /* 标题（独立一行） */
    .block-title-text {
      display: block; /* 关键：设置为块级元素，独占一行 */
      flex: 1;
      min-width: 0;
      white-space: normal;
      word-break: break-word;
      z-index: 2; /* 层级高于标签 */
      font-size: 16px; /* 标题字号（大于标签） */
      font-weight: 600;
      color: var(--primary-blue);
    }

    /* 标签容器（优化标签布局） */
    .block-labels-container {
      display: flex;
      gap: 4px; /* 标签之间的间距 */
      flex-wrap: wrap; /* 标签换行（空间不足时自动换行） */
      font-size: 11px; /* 标签字号（小于标题） */
    }


    .status-badge, .route-badge {
      flex-shrink: 1;
      display: inline-flex;
      align-items: center;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      z-index: 1;
    }


    .status-follow { background: #fef3c7; color: #92400e; }
    .status-parallel { background: #d1fae5; color: #065f46; }
    .status-lead { background: #dbeafe; color: #1e40af; }
    .status-lag { background: #fee2e2; color: #991b1b; }

    .route-main { background: #f3e8ff; color: #6b21a8; }
    .route-advanced { background: #e0f2fe; color: #075985; }
    .route-auxiliary { background: #f0fdf4; color: #166534; }

    /* 修改：标签容器样式 */
    .block-labels {
      display: flex;
      flex-wrap: wrap;
      gap: var(--label-gap);
      align-items: center;
      flex: 1;
      min-height: 32px; /* 确保有足够空间显示标签 */
    }

    /* 修改：标签样式 */
    .label {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 16px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      color: white;
      position: relative;
      white-space: nowrap; /* 标签内部文字不换行（可选，根据需求调整） */
      flex-shrink: 0; /* 防止标签收缩（可选） */
      min-width: 80px; /* 设置最小宽度，避免标签过小 */
    }

    .label:hover {
      transform: scale(1.05);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .label-text {
      overflow: visible; /* 关键：不隐藏溢出文字 */
      white-space: normal; /* 允许文字换行（如果空间不足） */
      max-width: none; /* 去掉最大宽度限制 */
      flex-shrink: 0; /* 防止标签收缩（可选，根据需求调整） */
    }

    .label .remove-label {
      margin-left: 6px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      width: 16px;
      height: 16px;
      display: none;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      cursor: pointer;
      transition: background 0.2s;
    }

    .label:hover .remove-label {
      display: flex;
    }

    .label .remove-label:hover {
      background: rgba(255, 255, 255, 0.5);
    }

    /* 标签颜色 */
    .label.technology { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
    .label.enterprise { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
    .label.product { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
    .label.service { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
    .label.other { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
    
    .label.blue { background: #3b82f6; }
    .label.green { background: #10b981; }
    .label.red { background: #ef4444; }
    .label.yellow { background: #eab308; }
    .label.purple { background: #a855f7; }
    .label.orange { background: #f97316; }
    .label.gray { background: #6b7280; }
    .label.pink { background: #ec4899; }
    .label.indigo { background: #6366f1; }

    /* 特殊标签样式 */
    .label.china-status {
      background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
      border: 1px solid #d97706;
    }

    .label.us-status {
      background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
      border: 1px solid #2563eb;
    }

    .label.blocked {
      border: 2px solid #dc2626 !important;
      box-sizing: border-box;
      animation: pulse-border 2s infinite;
    }

    @keyframes pulse-border {
      0% { 
        opacity: 1; 
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
      }
      50% { 
        opacity: 1;
        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0);
      }
      100% { 
        opacity: 1; 
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
      }
    }

    /* 添加标签按钮 */
    .add-label-btn {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 16px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      background: #e5e7eb;
      color: #6b7280;
      border: 1px dashed #9ca3af;
      transition: all 0.2s ease;
    }

    .add-label-btn:hover {
      background: #d1d5db;
      border-color: #6b7280;
    }

    /* 方块操作按钮 */
    .block-actions {
      display: flex;
      gap: 4px;
      margin-top: 12px;
      padding-top: 8px;
      border-top: 1px solid #f3f4f6;
      justify-content: flex-end;
    }

    .block-actions button {
      width: 28px;
      height: 28px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      border-radius: 4px;
    }

    /* 北京布局指示器 */
    .beijing-indicator {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      font-size: 12px;
      flex-shrink: 0;
    }

    .beijing-indicator.yes {
      background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
      color: white;
      box-shadow: 0 2px 4px rgba(16, 185, 129, 0.25);
      border: 1px solid #10b981;
    }

    .beijing-indicator.no {
      background: #fee2e2;
      color: #991b1b;
    }

    /* 状态背景色 */
    .block.status-follow { 
      background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); 
      border-color: #f59e0b;
    }

    .block.status-parallel { 
      background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); 
      border-color: #10b981;
    }

    .block.status-lead { 
      background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); 
      border-color: #3b82f6;
    }

    .block.status-lag { 
      background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); 
      border-color: #ef4444;
    }

    .block.beijing-no { 
      background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
      border-color: #ef4444;
    }

    /* 响应式设计 */
    @media (max-width: 1200px) {
      .block {
        flex: 1 1 calc((100% - var(--block-gap) * 2) / 3) !important;
        max-width: calc(33.333% - var(--block-gap) * 2 / 3) !important;
      }
    }

    @media (max-width: 768px) {
      .layer-container {
        padding: 16px;
        margin-bottom: 20px;
      }

      .layer-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }

      .layer-controls {
        width: 100%;
        justify-content: flex-end;
      }

      .blocks-container {
        gap: 12px;
      }

      .block {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        min-width: unset;
      }

      .label-text {
        max-width: 100px;
      }

      .color-legend {
        padding: 12px 16px;
        margin-bottom: 12px;
      }
      
      .legend-items {
        gap: 12px;
      }
      
      .legend-item {
        font-size: 12px;
      }
      
      .legend-color {
        width: 16px;
        height: 16px;
      }
    }

    /* 其他样式 */
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    .modal-content {
      background-color: white;
      padding: 24px;
      border-radius: 8px;
      width: 90%;
      max-width: 600px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      max-height: 90vh;
      overflow-y: auto;
    }

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

    .form-group label {
      display: block;
      margin-bottom: 4px;
      font-weight: 500;
    }

    .form-group input, .form-group textarea, .form-group select {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid #d1d5db;
      border-radius: 4px;
      font-size: 14px;
    }

    .form-group textarea {
      min-height: 80px;
      resize: vertical;
    }

    .form-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 16px;
    }

    .toast {
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding: 12px 20px;
      background-color: var(--dark-blue);
      color: white;
      border-radius: 4px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      z-index: 1001;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.3s, transform 0.3s;
    }

    .toast.show {
      opacity: 1;
      transform: translateY(0);
    }

    .toast.success { background-color: #10b981; }
    .toast.error { background-color: #ef4444; }

    .access-denied {
      text-align: center;
      padding: 60px 20px;
    }

    .access-denied h2 {
      font-size: 24px;
      color: #ef4444;
      margin-bottom: 16px;
    }

    .map-selector {
      margin-bottom: 20px;
      text-align: center;
    }

    .permission-badge {
      display: inline-block;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
      margin-left: 8px;
    }

    .permission-badge.read { background: #dbeafe; color: #1e40af; }
    .permission-badge.edit { background: #d1fae5; color: #059669; }

    .edit-only { display: none; }
    .edit-mode .edit-only { display: inline-block; }

    .connection-hint {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(16, 185, 129, 0.9);
      color: white;
      padding: 12px 20px;
      border-radius: 8px;
      z-index: 100;
      font-weight: 500;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .label-selector {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }

    .label-filter-btn {
      padding: 4px 12px;
      border-radius: 16px;
      font-size: 12px;
      cursor: pointer;
      background: #e5e7eb;
      color: #374151;
      border: none;
      transition: all 0.2s;
    }

    .label-filter-btn.active {
      background: var(--medium-blue);
      color: white;
    }

    .arrows-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 10;
    }

    .arrow {
      stroke: var(--gray);
      stroke-width: 1.5;
      fill: none;
      marker-end: url(#arrowhead);
    }

    .share-users-list {
      max-height: 300px;
      overflow-y: auto;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      background: #f9fafb;
    }

    .share-user-item {
      padding: 12px 16px;
      border-bottom: 1px solid #e5e7eb;
      transition: background-color 0.2s ease;
    }

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

    .share-user-item:hover {
      background-color: #f3f4f6;
    }

    .share-user-label {
      display: flex;
      align-items: center;
      cursor: pointer;
      margin: 0;
      width: 100%;
    }

    .share-user-checkbox {
      margin-right: 12px;
      width: 18px;
      height: 18px;
      cursor: pointer;
    }

    .share-user-info {
      display: flex;
      align-items: center;
      flex: 1;
    }

    .share-user-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--medium-blue);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 14px;
      margin-right: 12px;
      flex-shrink: 0;
    }

    .share-user-details {
      flex: 1;
      min-width: 0;
    }

    .share-user-name {
      font-weight: 500;
      color: #1f2937;
      font-size: 14px;
      margin-bottom: 2px;
    }

    .share-user-email {
      color: #6b7280;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .permission-select {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      font-size: 14px;
      background: white;
    }

    .share-users-list::-webkit-scrollbar {
      width: 6px;
    }

    .share-users-list::-webkit-scrollbar-track {
      background: #f1f5f9;
      border-radius: 3px;
    }

    .share-users-list::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 3px;
    }

    .share-users-list::-webkit-scrollbar-thumb:hover {
      background: #94a3b8;
    }

    .map-card {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      padding: 16px;
      margin-bottom: 16px;
      transition: all 0.2s ease;
      cursor: pointer;
    }

    .map-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }

    .map-card.selected {
      border: 2px solid var(--medium-blue);
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
    }

    .map-card h3 {
      font-size: 18px;
      color: var(--primary-blue);
      margin-bottom: 8px;
    }

    .map-card p {
      font-size: 14px;
      color: var(--gray);
      margin-bottom: 12px;
    }

    .map-card .map-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }

    .map-card .map-actions button {
      font-size: 12px;
      padding: 4px 8px;
    }

    .shared-badge {
      display: inline-block;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 500;
      margin-left: 8px;
      background: #fef3c7;
      color: #92400e;
    }

    .markdown-preview {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      padding: 20px;
      margin-bottom: 20px;
      max-height: 400px;
      overflow-y: auto;
    }

    .markdown-preview h1 {
      font-size: 24px;
      color: var(--primary-blue);
      margin-bottom: 16px;
      border-bottom: 1px solid #e5e7eb;
      padding-bottom: 8px;
    }

    .markdown-preview h2 {
      font-size: 20px;
      color: var(--dark-blue);
      margin-top: 20px;
      margin-bottom: 12px;
    }

    .markdown-preview h3 {
      font-size: 18px;
      color: var(--medium-blue);
      margin-top: 16px;
      margin-bottom: 10px;
    }

    .markdown-preview ul {
      margin-left: 20px;
      margin-bottom: 12px;
    }

    .markdown-preview li {
      margin-bottom: 4px;
    }

    .markdown-preview p {
      margin-bottom: 12px;
    }

    .position-controls {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-top: 8px;
    }

    .position-controls input {
      padding: 4px 8px;
      font-size: 12px;
    }

    .label-creator {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-top: 8px;
    }

    .label-creator input {
      padding: 4px 8px;
      font-size: 12px;
    }

    .label-creator select {
      padding: 4px 8px;
      font-size: 12px;
    }

    .label-creator .full-width {
      grid-column: 1 / -1;
    }

    .excel-help {
      margin: 16px 0;
      padding: 12px;
      background: #f3f4f6;
      border-radius: 6px;
      font-size: 14px;
    }

    .excel-help h4 {
      margin-bottom: 8px;
      color: #374151;
    }

    .excel-help ul {
      margin: 0;
      padding-left: 20px;
      color: #6b7280;
    }

    .file-info {
      margin-top: 8px;
      color: #6b7280;
      font-size: 14px;
    }

    /* 颜色说明区域 */
    .color-legend {
      background: rgba(255, 255, 255, 0.9);
      border-radius: 8px;
      padding: 16px 20px;
      margin-bottom: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      border: 1px solid #e5e7eb;
    }

    .color-legend h4 {
      font-size: 16px;
      font-weight: 600;
      color: var(--dark-blue);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .color-legend h4::before {
      content: '';
      width: 4px;
      height: 20px;
      background: var(--medium-blue);
      border-radius: 2px;
    }

    .legend-items {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: var(--gray);
    }

    .legend-color {
      width: 20px;
      height: 20px;
      border-radius: 4px;
      border: 1px solid #e5e7eb;
    }

    .legend-color.status-lead {
      background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
      border-color: #3b82f6;
    }

    .legend-color.status-parallel {
      background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
      border-color: #10b981;
    }

    .legend-color.status-follow {
      background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
      border-color: #f59e0b;
    }

    .legend-color.status-lag {
      background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
      border-color: #ef4444;
    }

    .legend-color.beijing-no {
      background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
      border-color: #ef4444;
    }