/* 自定义样式补充 Tailwind CSS */

/* 状态指示器样式 */
.status-running {
  @apply bg-yellow-100 text-yellow-800;
}

.status-running i {
  @apply text-yellow-500;
}

.status-success {
  @apply bg-green-100 text-green-800;
}

.status-success i {
  @apply text-green-500;
}

.status-error {
  @apply bg-red-100 text-red-800;
}

.status-error i {
  @apply text-red-500;
}

.status-idle {
  @apply bg-gray-100 text-gray-800;
}

.status-idle i {
  @apply text-gray-400;
}

/* 日志级别样式 */
.log-level-INFO {
  @apply bg-blue-900 text-blue-200;
}

.log-level-SUCCESS {
  @apply bg-green-900 text-green-200;
}

.log-level-WARN {
  @apply bg-yellow-900 text-yellow-200;
}

.log-level-ERROR {
  @apply bg-red-900 text-red-200;
}

/* 结果框样式 */
.result-success {
  @apply bg-green-50 border border-green-200 rounded-lg p-4;
}

.result-error {
  @apply bg-red-50 border border-red-200 rounded-lg p-4;
}

/* 账号卡片样式 */
.account-card {
  @apply bg-gray-50 border border-gray-200 rounded-lg p-4 hover:border-gray-300 transition-colors duration-200;
}

/* 滚动条样式 */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  @apply bg-gray-100 rounded-full;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  @apply bg-gray-300 rounded-full hover:bg-gray-400;
}

/* 动画 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* 按钮悬停效果 */
.btn-hover-scale:hover {
  transform: scale(1.02);
}

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

/* 代码字体 */
.font-mono {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', monospace;
}

/* 响应式设计 */
@media (max-width: 640px) {
  .max-w-6xl {
    @apply max-w-full;
  }
  
  .p-6 {
    @apply p-4;
  }
  
  .space-y-6 > * + * {
    @apply mt-4;
  }
}