@charset "utf-8";
/* 移动端自适应：≤768px 自动检测切换 —— 抽屉导航 + 底部快捷栏 + 大触控目标 */

#btnMenu { display: none; }
#tabbar { display: none; }

@media (max-width: 768px) {
  /* 布局：单列，侧栏变抽屉 */
  #app {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-h) 1fr;
    grid-template-areas: "top" "main";
  }

  /* 顶栏紧凑化 */
  #topbar { padding: 0 10px; gap: 8px; min-width: 0; }
  .brand { min-width: 0; gap: 8px; flex: none; }
  .brand-mark { height: 30px; padding: 0 9px; letter-spacing: 1px; }
  .brand-title { display: none; }
  .topbar-search { flex: 1; max-width: none; min-width: 0; }
  .topbar-search input { width: 100%; min-width: 0; height: 34px; font-size: 13px; padding: 0 12px 0 34px; background-position: 11px center; }
  .topbar-actions { gap: 6px; flex: none; }
  .icon-btn { height: 36px; padding: 0 10px; font-size: .86em; }
  .icon-btn.lock { padding: 0 9px; }
  #btnMenu {
    display: inline-grid;
    place-items: center;
    width: 38px; padding: 0;
    font-size: 18px; line-height: 1;
  }

  /* 侧栏 → 左侧抽屉 */
  #sidebar {
    position: fixed;
    z-index: 60; top: 0; left: 0; bottom: 0;
    width: min(80vw, 300px);
    transform: translateX(-103%);
    transition: transform .28s cubic-bezier(.2, .7, .3, 1);
  }
  body.nav-open #sidebar { transform: translateX(0); box-shadow: var(--shadow-3); }
  body.nav-open::after {
    content: "";
    position: fixed; inset: 0; z-index: 55;
    background: rgba(9, 18, 30, .5);
    animation: fadeIn .2s ease both;
  }

  /* 主区 */
  #view { padding: 14px 13px calc(76px + env(safe-area-inset-bottom)); }
  .page-head { gap: 8px; margin-bottom: 14px; }
  .page-title { font-size: 1.22em; }

  /* 底部快捷栏（App 式） */
  #tabbar {
    display: flex;
    position: fixed;
    z-index: 45; left: 0; right: 0; bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--top-bg);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 22px rgba(15, 23, 42, .10);
  }
  #tabbar a {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px;
    height: 56px;
    font-size: 10.5px;
    font-weight: 550;
    color: var(--text-faint);
    text-decoration: none;
    transition: color .15s;
  }
  #tabbar a .ti { font-size: 20px; line-height: 1; }
  #tabbar a.on { color: var(--brand-strong); }
  #tabbar a.on .ti { transform: translateY(-1px) scale(1.06); }

  /* 触控目标 */
  .btn { min-height: 42px; }
  .icon-btn { min-height: 38px; }
  .modal { width: 94vw !important; max-width: 94vw !important; max-height: 86vh; }
  .modal-body { max-height: 60vh; overflow-y: auto; }

  /* 卡片网格：两列起步，窄屏单列 */
  .grid-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-grid { gap: 10px; }
  .stat .v { font-size: 1.6em; }

  /* Hero 压缩 */
  .hero { padding: 22px 16px !important; }
  .hero-title { font-size: 1.12em !important; line-height: 1.4; }
  .hero-sub { font-size: .84em !important; }
  .hero-meta { gap: 6px; }
  .hero-chip { font-size: .82em; padding: 4px 10px; }
  .hero-meta .btn { min-height: 36px; padding: 0 14px; font-size: .88em; }

  /* 表格横向滑动 */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 弹出层全宽 */
  .dropdown, .popover { max-width: 92vw; }
}

@media (max-width: 430px) {
  .grid-cards { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
}

/* 桌面 PWA 窄窗口（如 800px 分屏）也吃到紧凑布局 */
@media (min-width: 769px) and (max-width: 1024px) {
  :root { --sidebar-w: 210px; }
  #view { padding: 18px 20px 56px; }
  .grid-cards { grid-template-columns: 1fr 1fr; }
}

/* ≤480px：顶栏按钮进一步收纳（DOM 文本不动，仅视觉裁剪，测试断言不受影响） */
@media (max-width: 480px) {
  .icon-btn.lock { width: 42px; padding: 0; overflow: hidden; white-space: nowrap; justify-content: center; }
  .icon-btn#btnTheme { padding: 0 12px; }
}