/* BNB Monitor 样式 */

/* 暗色模式过渡 */
* { transition: background-color 0.2s, color 0.2s, border-color 0.2s; }

/* 卡片 */
.card {
  @apply bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700;
}

/* 导航栏 */
.nav-bar {
  @apply sticky top-0 z-40 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700
         px-6 py-3 flex justify-between items-center;
}

/* 标签栏 */
.tab-bar {
  @apply flex gap-1 px-6 py-2 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 overflow-x-auto;
}

.tab-btn {
  @apply px-4 py-2 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-400
         hover:bg-gray-100 dark:hover:bg-gray-700 whitespace-nowrap;
}

.tab-active {
  @apply bg-yellow-50 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400;
}

/* 输入框 */
.input {
  @apply w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600
         bg-white dark:bg-gray-700 text-gray-800 dark:text-white
         focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent
         text-sm;
}

/* 按钮 */
.btn {
  @apply px-4 py-2 rounded-lg font-medium text-sm cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed;
}

.btn-primary {
  @apply bg-yellow-500 hover:bg-yellow-600 text-white;
}

.btn-outline {
  @apply border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300
         hover:bg-gray-100 dark:hover:bg-gray-700;
}

.btn-success {
  @apply bg-green-500 hover:bg-green-600 text-white;
}

.btn-danger {
  @apply bg-red-500 hover:bg-red-600 text-white;
}

.btn-sm {
  @apply px-3 py-1 text-xs;
}

.btn-icon {
  @apply w-9 h-9 flex items-center justify-center rounded-lg
         hover:bg-gray-100 dark:hover:bg-gray-700 text-lg cursor-pointer;
}

/* 标签 */
.label {
  @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
}