sub2api/frontend/src/style.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    @apply border-gray-200 dark:border-dark-700;
  }

  html {
    @apply antialiased scroll-smooth;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  }

  body {
    @apply bg-gray-50 text-gray-900 dark:bg-dark-950 dark:text-gray-100;
    @apply min-h-screen;
  }

  /* 自定义滚动条 */
  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-dark-600 rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400 dark:bg-dark-500;
  }

  /* 选中文本样式 */
  ::selection {
    @apply bg-primary-500/20 text-primary-900 dark:text-primary-100;
  }
}

@layer components {
  /* ============ 按钮样式 ============ */
  .btn {
    @apply inline-flex items-center justify-center gap-2;
    @apply px-4 py-2.5 rounded-xl font-medium text-sm;
    @apply transition-all duration-200 ease-out;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500/50;
    @apply disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none;
    @apply active:scale-[0.98];
  }

  .btn-primary {
    @apply bg-gradient-to-r from-primary-500 to-primary-600;
    @apply text-white shadow-md shadow-primary-500/25;
    @apply hover:from-primary-600 hover:to-primary-700 hover:shadow-lg hover:shadow-primary-500/30;
    @apply dark:shadow-primary-500/20;
  }

  .btn-secondary {
    @apply bg-white dark:bg-dark-800;
    @apply text-gray-700 dark:text-gray-200;
    @apply border border-gray-200 dark:border-dark-600;
    @apply shadow-sm hover:bg-gray-50 dark:hover:bg-dark-700;
    @apply hover:border-gray-300 dark:hover:border-dark-500;
  }

  .btn-ghost {
    @apply bg-transparent text-gray-600 dark:text-gray-300;
    @apply hover:bg-gray-100 dark:hover:bg-dark-800;
  }

  .btn-danger {
    @apply bg-gradient-to-r from-red-500 to-red-600;
    @apply text-white shadow-md shadow-red-500/25;
    @apply hover:from-red-600 hover:to-red-700 hover:shadow-lg hover:shadow-red-500/30;
  }

  .btn-sm {
    @apply px-3 py-1.5 text-xs rounded-lg;
  }

  .btn-lg {
    @apply px-6 py-3 text-base rounded-2xl;
  }

  .btn-icon {
    @apply p-2.5 rounded-xl;
  }

  /* ============ 输入框样式 ============ */
  .input {
    @apply w-full px-4 py-2.5 rounded-xl text-sm;
    @apply bg-white dark:bg-dark-800;
    @apply border border-gray-200 dark:border-dark-600;
    @apply text-gray-900 dark:text-gray-100;
    @apply placeholder:text-gray-400 dark:placeholder:text-dark-400;
    @apply transition-all duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-primary-500/30 focus:border-primary-500;
    @apply disabled:bg-gray-100 dark:disabled:bg-dark-900 disabled:cursor-not-allowed;
  }

  .input-error {
    @apply border-red-500 focus:ring-red-500/30 focus:border-red-500;
  }

  .input-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5;
  }

  .input-hint {
    @apply text-xs text-gray-500 dark:text-dark-400 mt-1;
  }

  .input-error-text {
    @apply text-xs text-red-500 mt-1;
  }

  /* Hide number input spinner buttons for cleaner UI */
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }

  /* ============ 卡片样式 ============ */
  .card {
    @apply bg-white dark:bg-dark-800/50;
    @apply rounded-2xl;
    @apply border border-gray-100 dark:border-dark-700/50;
    @apply shadow-card;
    @apply transition-all duration-300;
  }

  .card-hover {
    @apply hover:shadow-card-hover hover:-translate-y-0.5;
    @apply hover:border-gray-200 dark:hover:border-dark-600;
  }

  .card-glass {
    @apply bg-white/70 dark:bg-dark-800/70;
    @apply backdrop-blur-xl;
    @apply border border-white/20 dark:border-dark-700/50;
    @apply shadow-glass;
  }

  /* ============ 统计卡片 ============ */
  .stat-card {
    @apply card p-5;
    @apply flex items-start gap-4;
  }

  .stat-icon {
    @apply w-12 h-12 rounded-xl;
    @apply flex items-center justify-center;
    @apply text-xl;
  }

  .stat-icon-primary {
    @apply bg-primary-100 text-primary-600 dark:bg-primary-900/30 dark:text-primary-400;
  }

  .stat-icon-success {
    @apply bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400;
  }

  .stat-icon-warning {
    @apply bg-amber-100 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400;
  }

  .stat-icon-danger {
    @apply bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400;
  }

  .stat-value {
    @apply text-2xl font-bold text-gray-900 dark:text-white;
  }

  .stat-label {
    @apply text-sm text-gray-500 dark:text-dark-400;
  }

  .stat-trend {
    @apply text-xs font-medium flex items-center gap-1 mt-1;
  }

  .stat-trend-up {
    @apply text-emerald-600 dark:text-emerald-400;
  }

  .stat-trend-down {
    @apply text-red-600 dark:text-red-400;
  }

  /* ============ 表格样式 ============ */
  .table-container {
    @apply overflow-x-auto rounded-xl border border-gray-200 dark:border-dark-700;
  }

  .table {
    @apply w-full text-sm;
  }

  .table th {
    @apply px-4 py-3 text-left font-medium;
    @apply text-gray-600 dark:text-dark-300;
    @apply bg-gray-50 dark:bg-dark-800/50;
    @apply border-b border-gray-200 dark:border-dark-700;
  }

  .table td {
    @apply px-4 py-3;
    @apply text-gray-700 dark:text-gray-300;
    @apply border-b border-gray-100 dark:border-dark-800;
  }

  .table tr:last-child td {
    @apply border-b-0;
  }

  .table tbody tr {
    @apply transition-colors duration-150;
    @apply hover:bg-gray-50 dark:hover:bg-dark-800/30;
  }

  /* ============ 徽章样式 ============ */
  .badge {
    @apply inline-flex items-center gap-1;
    @apply px-2.5 py-0.5 rounded-full text-xs font-medium;
  }

  .badge-primary {
    @apply bg-primary-100 text-primary-700 dark:bg-primary-900/30 dark:text-primary-400;
  }

  .badge-success {
    @apply bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400;
  }

  .badge-warning {
    @apply bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400;
  }

  .badge-danger {
    @apply bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400;
  }

  .badge-gray {
    @apply bg-gray-100 text-gray-700 dark:bg-dark-700 dark:text-dark-300;
  }

  /* ============ 下拉菜单 ============ */
  .dropdown {
    @apply absolute z-50;
    @apply bg-white dark:bg-dark-800;
    @apply rounded-xl;
    @apply border border-gray-200 dark:border-dark-700;
    @apply shadow-lg;
    @apply py-1;
    @apply animate-scale-in origin-top-right;
  }

  .dropdown-item {
    @apply px-4 py-2 text-sm;
    @apply text-gray-700 dark:text-gray-300;
    @apply hover:bg-gray-100 dark:hover:bg-dark-700;
    @apply cursor-pointer transition-colors;
    @apply flex items-center gap-2;
  }

  /* ============ 模态框 ============ */
  .modal-overlay {
    @apply fixed inset-0 z-50;
    @apply bg-black/50 backdrop-blur-sm;
    @apply flex items-center justify-center p-4;
  }

  .modal-content {
    @apply bg-white dark:bg-dark-800;
    @apply rounded-2xl shadow-2xl;
    @apply w-full;
    @apply max-h-[90vh] overflow-y-auto;
  }

  .modal-header {
    @apply px-6 py-4 border-b border-gray-100 dark:border-dark-700;
    @apply flex items-center justify-between;
  }

  .modal-title {
    @apply text-lg font-semibold text-gray-900 dark:text-white;
  }

  .modal-body {
    @apply px-6 py-4;
  }

  .modal-footer {
    @apply px-6 py-4 border-t border-gray-100 dark:border-dark-700;
    @apply flex items-center justify-end gap-3;
  }

  /* ============ Toast 通知 ============ */
  .toast {
    @apply fixed top-4 right-4 z-[100];
    @apply min-w-[320px] max-w-md;
    @apply bg-white dark:bg-dark-800;
    @apply rounded-xl shadow-lg;
    @apply border-l-4;
    @apply p-4;
    @apply animate-slide-in-right;
  }

  .toast-success {
    @apply border-l-emerald-500;
  }

  .toast-error {
    @apply border-l-red-500;
  }

  .toast-warning {
    @apply border-l-amber-500;
  }

  .toast-info {
    @apply border-l-primary-500;
  }

  /* ============ 侧边栏 ============ */
  .sidebar {
    @apply fixed inset-y-0 left-0 z-40;
    @apply w-64 bg-white dark:bg-dark-900;
    @apply border-r border-gray-200 dark:border-dark-800;
    @apply flex flex-col;
    @apply transition-transform duration-300;
  }

  .sidebar-header {
    @apply h-16 px-6;
    @apply flex items-center gap-3;
    @apply border-b border-gray-100 dark:border-dark-800;
  }

  .sidebar-nav {
    @apply flex-1 overflow-y-auto py-4 px-3;
  }

  .sidebar-link {
    @apply flex items-center gap-3 px-3 py-2.5 rounded-xl;
    @apply text-sm font-medium;
    @apply text-gray-600 dark:text-dark-300;
    @apply transition-all duration-200;
    @apply hover:bg-gray-100 dark:hover:bg-dark-800;
    @apply hover:text-gray-900 dark:hover:text-white;
  }

  .sidebar-link-active {
    @apply bg-primary-50 dark:bg-primary-900/20;
    @apply text-primary-600 dark:text-primary-400;
    @apply hover:bg-primary-100 dark:hover:bg-primary-900/30;
  }

  .sidebar-section {
    @apply mb-6;
  }

  .sidebar-section-title {
    @apply px-3 mb-2;
    @apply text-xs font-semibold uppercase tracking-wider;
    @apply text-gray-400 dark:text-dark-500;
  }

  /* ============ 页面头部 ============ */
  .page-header {
    @apply mb-6;
  }

  .page-title {
    @apply text-2xl font-bold text-gray-900 dark:text-white;
  }

  .page-description {
    @apply text-sm text-gray-500 dark:text-dark-400 mt-1;
  }

  /* ============ 空状态 ============ */
  .empty-state {
    @apply flex flex-col items-center justify-center py-12 px-4;
    @apply text-center;
  }

  .empty-state-icon {
    @apply w-16 h-16 mb-4;
    @apply text-gray-300 dark:text-dark-600;
  }

  .empty-state-title {
    @apply text-lg font-medium text-gray-900 dark:text-white mb-1;
  }

  .empty-state-description {
    @apply text-sm text-gray-500 dark:text-dark-400 max-w-sm;
  }

  /* ============ 加载状态 ============ */
  .spinner {
    @apply w-5 h-5 border-2 border-current border-t-transparent rounded-full;
    @apply animate-spin;
  }

  .skeleton {
    @apply bg-gray-200 dark:bg-dark-700 rounded animate-pulse;
  }

  /* ============ 分隔线 ============ */
  .divider {
    @apply h-px bg-gray-200 dark:bg-dark-700 my-4;
  }

  /* ============ 标签页 ============ */
  .tabs {
    @apply flex gap-1 p-1;
    @apply bg-gray-100 dark:bg-dark-800 rounded-xl;
  }

  .tab {
    @apply px-4 py-2 rounded-lg text-sm font-medium;
    @apply text-gray-600 dark:text-dark-400;
    @apply transition-all duration-200;
    @apply hover:text-gray-900 dark:hover:text-white;
  }

  .tab-active {
    @apply bg-white dark:bg-dark-700;
    @apply text-gray-900 dark:text-white;
    @apply shadow-sm;
  }

  /* ============ 进度条 ============ */
  .progress {
    @apply h-2 bg-gray-200 dark:bg-dark-700 rounded-full overflow-hidden;
  }

  .progress-bar {
    @apply h-full bg-gradient-to-r from-primary-500 to-primary-400;
    @apply transition-all duration-300;
  }

  /* ============ 开关 ============ */
  .switch {
    @apply relative w-11 h-6 rounded-full cursor-pointer;
    @apply bg-gray-300 dark:bg-dark-600;
    @apply transition-colors duration-200;
  }

  .switch-active {
    @apply bg-primary-500;
  }

  .switch-thumb {
    @apply absolute top-0.5 left-0.5 w-5 h-5 rounded-full;
    @apply bg-white shadow-sm;
    @apply transition-transform duration-200;
  }

  .switch-active .switch-thumb {
    @apply translate-x-5;
  }

  /* ============ 代码块 ============ */
  .code {
    @apply font-mono text-sm;
    @apply bg-gray-100 dark:bg-dark-800;
    @apply px-1.5 py-0.5 rounded;
    @apply text-primary-600 dark:text-primary-400;
  }

  .code-block {
    @apply font-mono text-sm;
    @apply bg-gray-900 text-gray-100;
    @apply p-4 rounded-xl overflow-x-auto;
  }
}

@layer utilities {
  /* 文字渐变 */
  .text-gradient {
    @apply bg-gradient-to-r from-primary-500 to-accent-500 bg-clip-text text-transparent;
  }

  /* 玻璃效果 */
  .glass {
    @apply bg-white/80 dark:bg-dark-800/80 backdrop-blur-xl;
  }

  /* 隐藏滚动条 */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* 安全区域 */
  .safe-top {
    padding-top: env(safe-area-inset-top);
  }

  .safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
}