/* ============================================================
   CnkeAPI - 全站移动端自适应
   覆盖所有主题，确保手机端完整可用
   ============================================================ */

/* ── 小屏：1024px ↓ ── */
@media (max-width: 1024px) {
  .form-row { grid-template-columns: 1fr !important; }
  .stats-grid { grid-template-columns: repeat(2,1fr) !important; }
  .panel-header .flex { flex-wrap: wrap; gap: 6px; }
  .tabs { flex-wrap: wrap; }
}

/* ── 平板 & 手机：768px ↓ ── */
@media (max-width: 768px) {
  /* 布局 */
  .sidebar { width: 240px !important; }
  .topbar { height: 50px !important; left: 0 !important; }
  .topbar-left h2 { font-size: 15px !important; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-right .topbar-btn:not(.mobile-menu-btn):not(.dark-mode-toggle):not(:last-child) { display: none; }
  .main-content { margin-left: 0 !important; margin-top: 50px !important; padding: 12px !important; }
  .mobile-menu-btn { display: flex !important; }
  .sidebar.open { transform: translateX(0) !important; }

  /* 统计卡片 */
  .stats-grid { gap: 8px !important; }
  .stat-card { padding: 12px 14px !important; }
  .stat-value { font-size: 20px !important; }
  .stat-card:not(:hover) { transform: none !important; }

  /* 面板 */
  .panel { padding: 0 !important; }
  .panel-header { padding: 10px 12px !important; flex-wrap: wrap; gap: 6px; }
  .panel-title { font-size: 14px !important; }
  .panel-body { padding: 12px !important; }

  /* 表单 */
  .form-input, .form-select, .form-textarea { font-size: 16px !important; padding: 10px 12px !important; }
  .form-row { grid-template-columns: 1fr !important; }
  .form-group { margin-bottom: 10px !important; }

  /* 按钮 */
  .btn { font-size: 14px !important; padding: 8px 16px !important; }

  /* 分页 */
  .pagination { flex-wrap: wrap; gap: 3px; justify-content: center; padding: 8px; }
  .page-item { padding: 4px 10px !important; font-size: 12px !important; }
  .page-info { width: 100%; text-align: center; margin-top: 4px; }

  /* 网格：2列变1列 */
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="display:grid"]:not(.stats-grid):not(.pagination) { gap: 8px; }

  /* 登录页 */
  .login-card { max-width: 94% !important; margin: 20px auto !important; }
  .login-card-inner { padding: 24px 20px !important; }
  .login-card-inner h1 { font-size: 18px !important; }

  /* 充值页快捷金额按钮 */
  [style*="grid-template-columns: repeat(3,"] { grid-template-columns: repeat(3,1fr) !important; gap: 6px; }
  [style*="repeat(auto-fill"] { grid-template-columns: repeat(2,1fr) !important; }

  /* 会员卡片 */
  [style*="grid-template-columns: repeat(auto-fill,minmax(240px"] { grid-template-columns: repeat(2,1fr) !important; gap: 10px; }

  /* 左右两栏布局（充值页） */
  [style*="display:grid;grid-template-columns:1fr 1fr;gap:16px"] { grid-template-columns: 1fr !important; }

  /* 卡片网格 */
  [style*="display:grid;grid-template-columns:repeat(auto-fill,minmax(150px"] { grid-template-columns: repeat(3,1fr) !important; }

  /* 公告页的快速链接 */
  .quick-link { width: 100%; justify-content: center; margin-bottom: 6px; }

  /* 工单详情页回复框 */
  [style*="padding:16px;margin-bottom:12px"] { padding: 12px !important; }

  /* 统计页暗色面板 */
  .dash-grid { grid-template-columns: repeat(2,1fr) !important; gap: 8px !important; }
  .dash-chart { padding: 12px !important; }
  .chart-area { height: 120px !important; }
}

/* ── 手机：480px ↓ ── */
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr !important; }
  .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* 表格转卡片视图 */
  .table-container table { min-width: auto; width: 100%; }
  .table-container thead { display: none; }
  .table-container tbody tr {
    display: block;
    margin-bottom: 10px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    padding: 10px 12px;
  }
  .table-container tbody tr td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0 !important;
    border-bottom: 1px solid var(--border-color);
    border-left: none !important;
    font-size: 13px;
  }
  .table-container tbody tr td:last-child { border-bottom: none; }
  .table-container tbody tr td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 11px;
    color: var(--text-tertiary);
    flex-shrink: 0;
    margin-right: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  .table-container tbody tr td:empty { display: none; }
  .table-container tbody tr td .flex { flex-wrap: wrap; justify-content: flex-end; gap: 4px; }

  /* 模态框全屏 */
  .modal { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; border-radius: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; }
  .modal-content { border-radius: 0 !important; max-height: 100vh !important; height: 100%; overflow-y: auto; }
  .modal-body { padding: 14px !important; }

  /* 暗色统计面板 */
  .dash-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .dash-card { padding: 12px !important; }
  .dash-card .value { font-size: 22px !important; }

  /* 会员卡片 */
  [style*="grid-template-columns: repeat(auto-fill,minmax(240px"] { grid-template-columns: 1fr !important; }

  /* 仪表盘快速操作 */
  [style*="display:grid;grid-template-columns:repeat(auto-fill,minmax(150px"] { grid-template-columns: repeat(2,1fr) !important; }

  /* 使用帮助文档样式 */
  .doc-hero { padding: 24px 20px !important; }
  .doc-hero h1 { font-size: 20px !important; }
  .doc-method { padding: 16px !important; }
  .doc-code-block { font-size: 11px !important; padding: 12px 14px !important; }
  .doc-grid-2 { grid-template-columns: 1fr !important; }

  /* 报章风格 */
  .newspaper-wrap { padding: 16px !important; }
  .newspaper-article { padding: 20px !important; }
  .newspaper-masthead h1 { font-size: 24px !important; }
}

/* ── 极小屏：375px ↓ ── */
@media (max-width: 375px) {
  .main-content { padding: 8px !important; }
  .panel-header { padding: 8px 10px !important; }
  .panel-body { padding: 8px 10px !important; }
  .stat-value { font-size: 18px !important; }
  .stats-grid { gap: 6px !important; }
  .stat-card { padding: 10px 12px !important; }
  .sidebar { width: 100% !important; }
}