.audio-test-page {
  padding: 20px;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

  .audio-test-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 20px;

    @media (max-width: 768px) {
      grid-template-columns: 1fr;
    }

    .main-card {
      .ant-card-body {
        padding: 24px;
      }

      .control-section, .audio-control-section, .token-section {
        margin: 16px 0;

        .status-indicator {
          padding: 8px 12px;
          border-radius: 6px;
          background: #f0f0f0;
          font-weight: 500;
          border: 1px solid #d9d9d9;
        }
      }

      .token-section {
        .ant-typography {
          word-break: break-all;
        }
      }
    }

    .log-card {
      height: fit-content;
      max-height: 600px;

      .ant-card-head {
        background: #fafafa;
      }

      .log-controls {
        margin-bottom: 12px;
        text-align: right;
      }

      .log-container {
        max-height: 400px;
        overflow-y: auto;
        background: #f8f8f8;
        border: 1px solid #e8e8e8;
        border-radius: 6px;
        padding: 12px;

        .log-item {
          margin-bottom: 8px;
          font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
          font-size: 12px;
          line-height: 1.4;

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

          .ant-typography {
            font-size: 12px;
            padding: 4px 8px;
            background: white;
            border-radius: 4px;
            display: block;
            margin: 0;
          }
        }

        /* 自定义滚动条 */
        &::-webkit-scrollbar {
          width: 6px;
        }

        &::-webkit-scrollbar-track {
          background: #f1f1f1;
          border-radius: 3px;
        }

        &::-webkit-scrollbar-thumb {
          background: #c1c1c1;
          border-radius: 3px;

          &:hover {
            background: #a8a8a8;
          }
        }
      }
    }
  }

  /* 连接状态指示器样式 */
  .status-indicator {
    &:has-text("🟢") {
      background: #f6ffed !important;
      border-color: #b7eb8f !important;
      color: #389e0d;
    }

    &:has-text("🟡") {
      background: #fffbe6 !important;
      border-color: #ffe58f !important;
      color: #d48806;
    }

    &:has-text("🔴") {
      background: #fff2f0 !important;
      border-color: #ffccc7 !important;
      color: #cf1322;
    }
  }

  /* 按钮动画效果 */
  .ant-btn {
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

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

    &.ant-btn-primary {
      background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
      border: none;

      &:hover {
        background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
      }
    }

    &.ant-btn-dangerous {
      background: linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%);
      border: none;

      &:hover {
        background: linear-gradient(135deg, #ff7875 0%, #ff4d4f 100%);
      }
    }
  }

  /* 卡片阴影效果 */
  .ant-card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    border: none;

    &:hover {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }

    .ant-card-head {
      border-radius: 12px 12px 0 0;
    }
  }

  /* 分割线样式 */
  .ant-divider {
    border-color: #e8e8e8;
    margin: 20px 0;
  }

  /* 标题样式 */
  .ant-typography h2 {
    color: #1890ff;
    margin-bottom: 8px;
  }

  .ant-typography h4 {
    color: #262626;
    margin-bottom: 12px;
  }

  /* Alert 样式 */
  .ant-alert {
    border-radius: 8px;
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    padding: 12px;

    .audio-test-container {
      .main-card, .log-card {
        .ant-card-body {
          padding: 16px;
        }
      }

      .log-card {
        max-height: 300px;

        .log-container {
          max-height: 200px;
        }
      }
    }
  }
}
