* { font-family: 'Noto Sans SC', sans-serif; }
  [x-cloak] { display: none !important; }
  .sidebar-item { transition: all 0.2s cubic-bezier(0.16,1,0.3,1); position: relative; overflow: hidden; }
  .sidebar-item:hover { background: rgba(59,130,246,0.1); transform: translateX(2px); }
  .sidebar-item.active { background: rgba(59,130,246,0.15); border-left: 3px solid #3b82f6; }
  .sidebar-item:active { transform: scale(0.97); }
  .card-hover { transition: all 0.25s cubic-bezier(0.16,1,0.3,1); }
  .card-hover:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
  .btn-primary { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
  .btn-primary:hover { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); }
  .modal-overlay { backdrop-filter: blur(4px); background: rgba(0,0,0,0.4); }
  .modal-box { animation: modalIn 0.3s cubic-bezier(0.16,1,0.3,1); }
  @keyframes modalIn { from { opacity:0; transform: scale(0.95) translateY(8px); } to { opacity:1; transform: scale(1) translateY(0); } }
  .table-row:hover { background: #f8fafc; }
  input:focus, select:focus { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
  .tab-btn { transition: all 0.2s; border-bottom: 2px solid transparent; }
  .tab-btn.active { border-bottom-color: #3b82f6; color: #3b82f6; }
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: #f1f5f9; }
  ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

  /* 可滚动弹窗（新增运动员等内容多的弹窗）
     注意：不对 display 用 !important — 否则 Alpine.js x-show 无法用 display:none 隐藏元素 */
  .modal-scrollable {
    height: 85vh !important;
    max-height: 85vh !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .modal-scrollable-body {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  .modal-scrollable-footer {
    flex-shrink: 0 !important;
  }

  /* 出场顺序拖拽样式 */
  .order-item { cursor: default; transition: background 0.15s; }
  .order-item:hover { background: #f1f5f9; }
  .order-btn { cursor: pointer; user-select: none; }
  .order-btn:hover { background: #e2e8f0; border-radius: 4px; }

  /* 场地编号徽章 */
  .venue-badge {
    background: linear-gradient(135deg, #3730a3, #4f46e5);
    color: white;
    border-radius: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ===== 主题切换平滑过渡（仅在切换时生效，避免页面加载闪烁） ===== */
  .theme-anim, .theme-anim * {
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease !important;
  }

  /* ===== 夜间模式 / Dark Mode ===== */
  .dark { color-scheme: dark; }
  .dark body { background-color: #0f172a; color: #e2e8f0; }

  /* 白色背景 → 深灰 */
  .dark .bg-white { background-color: #1e293b !important; }
  /* 浅灰背景 → 更深 */
  .dark .bg-slate-50 { background-color: #0f172a !important; }
  .dark .bg-slate-100 { background-color: #334155 !important; }
  .dark .bg-slate-200 { background-color: #475569 !important; }
  .dark .bg-gray-50 { background-color: #1e293b !important; }
  .dark .bg-gray-100 { background-color: #334155 !important; }

  /* 文字颜色 → 浅色系 */
  .dark .text-slate-900 { color: #f8fafc !important; }
  .dark .text-slate-800 { color: #f1f5f9 !important; }
  .dark .text-slate-700 { color: #e2e8f0 !important; }
  .dark .text-slate-600 { color: #cbd5e1 !important; }
  .dark .text-slate-500 { color: #94a3b8 !important; }
  .dark .text-slate-400 { color: #64748b !important; }
  .dark .text-slate-300 { color: #475569 !important; }
  .dark .text-gray-700 { color: #e2e8f0 !important; }
  .dark .text-gray-500 { color: #94a3b8 !important; }
  .dark .text-gray-400 { color: #64748b !important; }

  /* 边框 → 深色 */
  .dark .border-slate-200 { border-color: #334155 !important; }
  .dark .border-slate-300 { border-color: #475569 !important; }
  .dark .border-slate-100 { border-color: #1e293b !important; }
  .dark .border-gray-200 { border-color: #334155 !important; }
  .dark .border-gray-300 { border-color: #475569 !important; }

  /* hover 背景 */
  .dark .hover\:bg-slate-100:hover { background-color: #334155 !important; }
  .dark .hover\:bg-slate-200:hover { background-color: #475569 !important; }
  .dark .hover\:bg-blue-50:hover { background-color: rgba(59,130,246,0.15) !important; }
  .dark .hover\:bg-red-50:hover { background-color: rgba(239,68,68,0.15) !important; }
  .dark .hover\:bg-gray-50:hover { background-color: #1e293b !important; }
  .dark .hover\:bg-gray-100:hover { background-color: #334155 !important; }

  /* 浅色状态背景 → 半透明 */
  .dark .bg-blue-50 { background-color: rgba(59,130,246,0.15) !important; }
  .dark .bg-red-50 { background-color: rgba(239,68,68,0.15) !important; }
  .dark .bg-green-50 { background-color: rgba(34,197,94,0.15) !important; }
  .dark .bg-yellow-50 { background-color: rgba(234,179,8,0.15) !important; }
  .dark .bg-orange-50 { background-color: rgba(249,115,22,0.15) !important; }
  .dark .bg-indigo-50 { background-color: rgba(99,102,241,0.15) !important; }
  .dark .bg-purple-50 { background-color: rgba(168,85,247,0.15) !important; }

  /* 输入框 */
  .dark input, .dark select, .dark textarea {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
  }
  .dark input::placeholder, .dark textarea::placeholder { color: #475569 !important; }
  .dark input:focus, .dark select:focus {
    box-shadow: 0 0 0 3px rgba(59,130,246,0.2) !important;
    border-color: #3b82f6 !important;
  }

  /* 表格行 hover */
  .dark .table-row:hover { background: #1e293b !important; }

  /* 滚动条 */
  .dark ::-webkit-scrollbar-track { background: #0f172a !important; }
  .dark ::-webkit-scrollbar-thumb { background: #475569 !important; }
  .dark ::-webkit-scrollbar-thumb:hover { background: #64748b !important; }

  /* 出场顺序 */
  .dark .order-item:hover { background: #1e293b !important; }
  .dark .order-btn:hover { background: #334155 !important; }

  /* 弹窗遮罩加深 */
  .dark .modal-overlay { background: rgba(0,0,0,0.6) !important; }

  /* 阴影加深 */
  .dark .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important; }
  .dark .shadow-md { box-shadow: 0 4px 6px rgba(0,0,0,0.4) !important; }
  .dark .shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,0.4) !important; }
  .dark .shadow-xl { box-shadow: 0 20px 25px rgba(0,0,0,0.5) !important; }

  /* 分割线 */
  .dark .divide-slate-200 > * { border-color: #334155 !important; }
  .dark .divide-gray-200 > * { border-color: #334155 !important; }

  /* 侧边栏 overlay */
  .dark .sidebar-overlay { background: rgba(0,0,0,0.5) !important; }

  /* 占位符/空状态文字 */
  .dark .text-gray-300 { color: #475569 !important; }
  .dark .text-gray-600 { color: #94a3b8 !important; }

  /* ============================================
     管理端移动端 UI 优化 v3.0
     ============================================ */

  /* ===== 0. 侧边栏抽屉式导航（移动端+平板统一） ===== */
  @media (max-width: 1023px) {
    /* 侧边栏默认隐藏（抽屉式） */
    aside.sidebar-drawer {
      transform: translateX(-100%);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
      z-index: 55;
    }
    aside.sidebar-drawer.open {
      transform: translateX(0);
    }
    /* 遮罩层默认隐藏 */
    .sidebar-overlay {
      position: fixed;
      inset: 0;
      top: 56px;
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(2px);
      z-index: 45;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s;
    }
    .sidebar-overlay.show {
      opacity: 1;
      pointer-events: auto;
    }
    /* 主内容区全宽（无左边距） */
    main.ml-56 {
      margin-left: 0 !important;
    }
    /* 汉堡菜单按钮显示 */
    .mobile-menu-btn {
      display: flex !important;
    }
    /* 底部导航隐藏（改用侧边抽屉） */
    .bottom-nav {
      display: none !important;
    }
    /* FAB 保留，但调整位置 */
    .fab {
      bottom: 20px !important;
      right: 16px !important;
    }
  }

  /* 桌面端：侧边栏固定显示，汉堡隐藏 */
  @media (min-width: 1024px) {
    aside.sidebar-drawer {
      transform: translateX(0) !important;
      box-shadow: none !important;
    }
    .sidebar-overlay {
      display: none !important;
    }
    .mobile-menu-btn {
      display: none !important;
    }
  }

  /* Dark mode 侧边栏抽屉 */
  .dark aside.sidebar-drawer {
    background: #1e293b !important;
    border-right-color: #334155 !important;
  }
  .dark .sidebar-overlay {
    background: rgba(0, 0, 0, 0.6);
  }

  /* ===== 1. 触控区域优化 — 所有可点击元素至少 44px ===== */
  @media (max-width: 1024px) {
    button:not(.bottom-nav-item):not(.fab):not(.numpad-btn),
    [role="button"],
    .sidebar-item {
      min-height: 44px !important;
    }
    /* 表格内操作按钮 */
    .table-row button,
    .table-row a {
      min-height: 36px !important;
      min-width: 36px !important;
      padding: 6px 10px !important;
    }
    /* 分页按钮 */
    .pagination button,
    button[class*="px-3 py-1"] {
      min-height: 40px !important;
      min-width: 40px !important;
    }
  }

  /* ===== 2. 导航精简 — 底部导航 5 项核心 + 更多 ===== */
  @media (max-width: 1024px) {
    .bottom-nav {
      height: 60px !important;
    }
    .bottom-nav-item {
      font-size: 10px !important;
      padding: 6px 2px !important;
      gap: 3px !important;
    }
    .bottom-nav-item svg {
      width: 24px !important;
      height: 24px !important;
    }
    .bottom-nav-item.active {
      color: #3b82f6 !important;
    }
    .bottom-nav-item.active svg {
      transform: scale(1.1);
      transition: transform 0.2s;
    }
  }

  /* ===== 3. 卡片信息密度 — 移动端紧凑布局 ===== */
  @media (max-width: 768px) {
    /* 统计卡片 */
    .stat-card,
    [class*="bg-white rounded"][class*="p-4"] {
      padding: 12px !important;
    }
    /* 卡片标题 */
    .stat-card .text-2xl,
    [class*="bg-white"][class*="rounded"] .text-2xl {
      font-size: 1.5rem !important;
    }
    /* 减少卡片间距 */
    .grid[class*="gap-4"] {
      gap: 10px !important;
    }
    .grid[class*="gap-3"] {
      gap: 8px !important;
    }
  }

  /* ===== 4. 表格优化 — 移动端紧凑 + 横滑 ===== */
  @media (max-width: 768px) {
    .table-scroll {
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      overflow: hidden;
    }
    .table-scroll table {
      min-width: 600px;
    }
    .table-row {
      min-height: 44px !important;
    }
    /* 表头粘性 */
    .table-scroll thead th {
      position: sticky;
      top: 0;
      background: #f8fafc;
      z-index: 5;
    }
    .dark .table-scroll thead th {
      background: #1e293b !important;
    }
  }

  /* ===== 5. 表单优化 — 移动端输入增强 ===== */
  @media (max-width: 768px) {
    /* 输入框增大 */
    .modal-box input[type="text"],
    .modal-box input[type="number"],
    .modal-box input[type="tel"],
    .modal-box input[type="password"],
    .modal-box select,
    .modal-box textarea {
      min-height: 48px !important;
      font-size: 16px !important;
      border-radius: 10px !important;
      padding: 10px 14px !important;
    }
    /* 表单标签 */
    .modal-box label {
      font-size: 13px !important;
      font-weight: 600 !important;
      margin-bottom: 4px !important;
      display: block;
    }
    /* 搜索框增强 */
    input[placeholder*="搜索"],
    input[placeholder*="筛"] {
      border-radius: 12px !important;
      padding-left: 40px !important;
      background-position: 12px center !important;
    }
  }

  /* 数字输入去掉上下箭头（全局生效） */
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }

  /* ===== 6. 交互反馈 — 加载状态 + Toast ===== */
  @media (max-width: 768px) {
    /* Toast 底部定位 */
    [class*="fixed"][class*="z-50"][class*="toast"],
    #toast-container,
    .toast-container {
      bottom: calc(72px + env(safe-area-inset-bottom, 0)) !important;
      left: 12px !important;
      right: 12px !important;
      max-width: none !important;
    }
    /* 按钮 loading 状态 */
    button[disabled],
    button.loading {
      opacity: 0.6;
      pointer-events: none;
    }
    /* 全局加载条 */
    .mobile-loading-bar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, #3b82f6, #6366f1, #8b5cf6);
      background-size: 200% 100%;
      animation: loadingSlide 1.2s linear infinite;
      z-index: 100;
    }
  }
  @keyframes loadingSlide {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* ===== 7. 弹窗优化 — 底部 Sheet 增强 ===== */
  @media (max-width: 640px) {
    .modal-box {
      border-radius: 20px 20px 0 0 !important;
      max-height: 90vh !important;
      padding-bottom: env(safe-area-inset-bottom, 16px) !important;
    }
    .modal-box::before {
      width: 40px !important;
      height: 4px !important;
      background: #cbd5e1 !important;
      border-radius: 2px !important;
      margin: 0 auto 16px !important;
    }
    /* 弹窗标题 */
    .modal-box h2,
    .modal-box [class*="text-lg font-bold"] {
      font-size: 17px !important;
    }
    /* 弹窗内按钮 */
    .modal-box button[class*="flex-1"] {
      min-height: 48px !important;
      font-size: 15px !important;
      border-radius: 10px !important;
    }
  }

  /* ===== 8. 视觉一致性 — 统一间距/圆角/阴影 ===== */
  @media (max-width: 768px) {
    /* 统一圆角 */
    .rounded-lg { border-radius: 10px !important; }
    .rounded-xl { border-radius: 14px !important; }
    .rounded-2xl { border-radius: 16px !important; }
    /* 统一间距 */
    main[class*="p-"] {
      padding: 12px !important;
    }
    /* 头部紧凑 */
    header[class*="h-14"] {
      height: 52px !important;
      padding: 0 12px !important;
    }
    header h1,
    header [class*="font-bold"] {
      font-size: 16px !important;
    }
  }

  /* ===== 9. Dark mode 侧边栏抽屉 ===== */
  .dark aside.sidebar-drawer {
    background: #1e293b !important;
    border-right-color: #334155 !important;
  }
  .dark .sidebar-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
  }
  .dark .sidebar-item {
    color: #cbd5e1 !important;
  }
  .dark .sidebar-item:hover {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #93c5fd !important;
  }
  .dark aside.sidebar-drawer .border-t {
    border-color: #334155 !important;
  }

  /* ===== 10. 搜索/筛选区域优化 ===== */
  @media (max-width: 768px) {
    /* 搜索+筛选区改为纵向堆叠 */
    .flex[class*="gap-3"][class*="items-center"] {
      flex-wrap: wrap;
    }
    /* 筛选 select 宽度 */
    select[class*="text-sm"] {
      max-width: 140px;
      font-size: 13px !important;
    }
  }

  /* ===== 11. 空状态美化 ===== */
  @media (max-width: 768px) {
    [class*="text-center"][class*="py-12"],
    [class*="text-center"][class*="py-8"] {
      padding: 32px 16px !important;
    }
    [class*="text-center"][class*="py-12"] svg,
    [class*="text-center"][class*="py-8"] svg {
      width: 48px !important;
      height: 48px !important;
      opacity: 0.3;
    }
  }

  /* ===== 12. 顶部导航栏优化 ===== */
  @media (max-width: 768px) {
    header.sticky {
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .dark header.sticky {
      background: rgba(30, 41, 59, 0.9) !important;
    }
  }