/* ============================================================
   移动端适配（共享）— 在各页面内联 <style> 之后引入，故可覆盖其规则
   桌面端（>768px）完全不生效，零侵入。
   ============================================================ */

/* 汉堡按钮 / 遮罩：桌面端隐藏，由 mobile-nav.js 注入到 <body> */
.mobile-nav-toggle { display: none; }
.mobile-nav-overlay { display: none; }

@media (max-width: 768px) {

  /* ---------- 侧边栏改为抽屉 ---------- */
  .sidebar {
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    width: 264px;
    max-width: 82vw;
    z-index: 200;
    box-shadow: 0 0 48px rgba(0, 0, 0, .22);
  }
  .sidebar.open { transform: translateX(0); }

  /* 汉堡按钮（固定左上角） */
  .mobile-nav-toggle {
    display: flex;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 95;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--card, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 11px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
    color: var(--text, #1a1a2e);
    cursor: pointer;
  }
  .mobile-nav-toggle svg { width: 22px; height: 22px; }
  .mobile-nav-toggle:active { transform: scale(.94); }

  /* 半透明遮罩 */
  .mobile-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
  }
  .mobile-nav-overlay.open { opacity: 1; pointer-events: auto; }

  /* ---------- 主内容铺满 ---------- */
  .main { margin-left: 0 !important; }

  /* 普通页面：第一块标题留出汉堡按钮空间（script.html 无 page-header） */
  .page-header { padding-top: 46px; }
  .page-header h2 { font-size: 20px; }
  .page-header p { font-size: 13px; }

  /* ---------- home.html ---------- */
  .stats { gap: 12px; margin-bottom: 24px; }
  .stat-card { padding: 18px; }
  .stat-card .value { font-size: 26px; }
  .shortcuts { gap: 12px; }
  .shortcut-card { padding: 16px 18px; }
  .apikey-card,
  .upload-section,
  .list-section,
  .panel { padding: 18px 16px; }

  /* ---------- 通用工具栏 / 搜索框 ---------- */
  .toolbar { gap: 8px; }
  .search-box { flex: 1 1 100%; }
  .search-box input { width: 100% !important; }

  /* ---------- material.html ---------- */
  .list-header { flex-wrap: wrap; gap: 12px; }
  .list-header > div { width: 100%; }
  .upload-actions { flex-direction: column; align-items: stretch; }
  .btn-upload { width: 100%; justify-content: center; }
  .drop-zone { padding: 32px 16px; }
  .grid-view { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .list-view { overflow-x: auto; }
  .list-view table { min-width: 640px; }

  /* ---------- 列表卡片（videos.html / draft.html）---------- */
  .vid-card,
  .draft-card { flex-wrap: wrap; padding: 16px; gap: 12px; }
  .vid-actions,
  .draft-actions {
    width: 100%;
    justify-content: flex-start;
    max-width: 100%;
  }
  .vid-actions .btn-act,
  .vid-actions a.btn-act { flex: 1 1 auto; justify-content: center; }

  /* ---------- 数据表格（finder.html / admin.html / upgrade_db.html）---------- */
  /* 这些表格本身已包裹在可横向滚动的容器中，保持横向滚动即可 */
  .table-wrap,
  .table-scroll { -webkit-overflow-scrolling: touch; }

  /* ---------- script.html 三栏布局 ---------- */
  .inner-layout { flex-direction: column; }
  .script-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-height: 38vh;
    border-right: none;
    border-bottom: 1px solid var(--border, #e5e7eb);
  }
  .script-panel-hdr { padding-top: 54px; }   /* 让出汉堡按钮位置 */
  .sp-collapse-btn { display: flex; }
  .sp-hdr-top { margin-bottom: 12px; }
  .sp-hdr-top h3 { margin-bottom: 0; }

  /* 折叠态：仅保留标题栏，把屏幕让给编辑器 */
  .script-panel.collapsed { max-height: none; }
  .script-panel.collapsed .sp-hdr-top { margin-bottom: 0; }
  .script-panel.collapsed .btn-new-script,
  .script-panel.collapsed .script-search,
  .script-panel.collapsed .script-list { display: none; }
  .script-panel.collapsed .sp-collapse-btn svg { transform: rotate(180deg); }
  .editor-topbar { padding: 12px 16px; gap: 8px; }
  .editor-topbar input[type="text"] { flex: 1 1 100%; min-width: 0; }
  .editor-body { padding: 16px; }

  /* ---------- 弹窗在小屏上更贴边 ---------- */
  .modal-overlay,
  .picker-overlay,
  .gen-overlay,
  .json-overlay,
  .confirm-overlay,
  .modal-back { padding: 10px; }
  .confirm-box { width: 100%; max-width: 360px; padding: 22px 20px; }
}

/* 极窄屏（≤480px）微调 */
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .grid-view { grid-template-columns: 1fr 1fr; }
  .page-header { flex-direction: column; align-items: flex-start; }
}
