.aily-blockly-viewer {
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  margin: 12px 0;
  background-color: #ffffff;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  // 错误卡片
  .error-card {
    padding: 16px;
    background-color: #fff2f0;
    border-left: 4px solid #ff4d4f;

    .error-content {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;

      .error-icon {
        font-size: 16px;
        color: #ff4d4f;
      }

      .error-text {
        color: #a8071a;
        font-weight: 500;
      }
    }

    .raw-data-section {
      margin-top: 12px;

      h4 {
        margin: 0 0 8px 0;
        font-size: 14px;
        color: #262626;
      }

      .raw-data {
        background-color: #f5f5f5;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        padding: 12px;
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        font-size: 12px;
        line-height: 1.4;
        overflow-x: auto;
        max-height: 300px;
        overflow-y: auto;
      }
    }
  }

  // 主要内容卡片
  .blockly-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      border-bottom: 1px solid #f0f0f0;
      background-color: #fafafa;

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

        .blockly-icon {
          font-size: 24px;
        }

        h3 {
          margin: 0;
          font-size: 18px;
          font-weight: 600;
          color: #262626;
        }
      }

      .actions {
        display: flex;
        gap: 8px;

        .action-btn {
          padding: 6px 12px;
          border: 1px solid #d9d9d9;
          border-radius: 4px;
          background-color: #ffffff;
          color: #262626;
          font-size: 12px;
          cursor: pointer;
          transition: all 0.3s ease;

          &:hover {
            border-color: #40a9ff;
            color: #1890ff;
          }

          &.primary {
            background-color: #1890ff;
            border-color: #1890ff;
            color: #ffffff;

            &:hover {
              background-color: #40a9ff;
            }

            &:disabled {
              background-color: #f5f5f5;
              border-color: #d9d9d9;
              color: #bfbfbf;
              cursor: not-allowed;
            }
          }

          &:disabled {
            background-color: #f5f5f5;
            border-color: #d9d9d9;
            color: #bfbfbf;
            cursor: not-allowed;
          }
        }
      }
    }

    .description {
      padding: 16px;
      color: #595959;
      font-size: 14px;
      line-height: 1.5;
      border-bottom: 1px solid #f0f0f0;
    }

    .blockly-details {
      padding: 16px;
      border-bottom: 1px solid #f0f0f0;

      .detail-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;

        &:last-child {
          margin-bottom: 0;
        }

        .detail-label {
          font-weight: 500;
          color: #262626;
          min-width: 80px;
        }

        .detail-value {
          color: #595959;
        }

        .detail-tag {
          padding: 2px 8px;
          border-radius: 4px;
          font-size: 12px;
          font-weight: 500;
          color: white;

          &.blue {
            background-color: #1890ff;
          }

          &.green {
            background-color: #52c41a;
          }
        }

        .tags {
          display: flex;
          flex-wrap: wrap;
          gap: 4px;

          .tag {
            padding: 2px 6px;
            background-color: #f0f0f0;
            border-radius: 3px;
            font-size: 11px;
            color: #595959;
          }
        }
      }
    }

    .preview-section,
    .code-section,
    .xml-section,
    .raw-data-section {
      padding: 16px;
      border-bottom: 1px solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      h4 {
        margin: 0 0 12px 0;
        font-size: 14px;
        font-weight: 600;
        color: #262626;
      }

      .preview-image {
        max-width: 100%;
        height: auto;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
      }

      .code-content,
      .xml-content,
      .raw-data {
        background-color: #f5f5f5;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        padding: 12px;
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        font-size: 12px;
        line-height: 1.4;
        overflow-x: auto;
        max-height: 300px;
        overflow-y: auto;
        white-space: pre-wrap;
        word-break: break-word;
      }
    }

    .blockly-preview {
      padding: 40px 16px;
      text-align: center;

      .preview-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        color: #bfbfbf;

        .placeholder-icon {
          font-size: 48px;
          opacity: 0.6;
        }

        span {
          font-size: 16px;
          font-weight: 500;
        }

        small {
          font-size: 12px;
          color: #8c8c8c;
        }
      }
    }
  }

  // 加载卡片
  .loading-card {
    padding: 40px 16px;
    text-align: center;

    .loading-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      color: #595959;

      .loading-icon {
        font-size: 24px;
        animation: spin 1s linear infinite;
      }

      span {
        font-size: 14px;
      }
    }
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.raw-view {
  padding: 12px;
  background-color: #f8f8f8;

  pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
  }

  code {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 13px;
    line-height: 1.4;
    color: #333;
  }
}

.error-view {
  padding: 12px;
  background-color: #fff2f0;
  border-left: 4px solid #ff4d4f;
}

.error-content {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a8071a;
}

.error-icon {
  color: #ff4d4f;
}

.viewer-footer {
  padding: 8px 12px;
  background-color: #f5f5f5;
  border-top: 1px solid #d9d9d9;
}

.metadata-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #8c8c8c;
}

.version {
  font-family: monospace;
}
