/* ============================================================
   mobile.css — 手机端响应式适配层
   ------------------------------------------------------------
   - Desktop-first；只在 <= 768px / <= 480px 触发
   - 不改 token，不破坏桌面样式
   - 断点：
       MD ≤ 1024px  — 平板（微调）
       SM ≤ 768px   — 手机主断点（抽屉 + bottom tab）
       XS ≤ 480px   — 小屏 fallback
   - 依赖：tokens.css、app-shell.css
   ============================================================ */

/* ============================================================
   TABLET (≤ 1024px) — mild compaction
   ============================================================ */
@media (max-width: 1024px) {
  .app { grid-template-columns: 200px 1fr; }
  .app.is-nav-collapsed { grid-template-columns: 56px 1fr; }
  .page { padding: var(--space-5); gap: var(--space-4); }
  .tb__search { width: 280px; max-width: 32vw; }
  .tb__user-name { display: none; }            /* 收紧 user btn */
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   MOBILE (≤ 768px) — major layout shift
   ============================================================ */
@media (max-width: 768px) {

  /* -- Body: prevent horizontal scroll when drawer open -- */
  html, body { overflow-x: hidden; }
  body.is-drawer-open { overflow: hidden; }

  /* ============ APP SHELL → drawer + bottom tab ============ */
  .app {
    grid-template-columns: 1fr;
    min-height: 100vh;
    padding-bottom: 56px;                      /* bottom tab 保留空间 */
  }
  .app.is-nav-collapsed { grid-template-columns: 1fr; }

  /* SideNav 默认隐藏，抽屉打开才显示 */
  .app > .nav {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(84vw, 300px);
    height: 100vh;
    z-index: var(--z-drawer);
    padding: var(--space-3) var(--space-2);
    transform: translateX(-100%);
    transition: transform var(--motion-normal) var(--ease-standard);
    box-shadow: var(--shadow-lg);
    border-right: 1px solid var(--color-border-default);
  }
  body.is-drawer-open .app > .nav { transform: translateX(0); }

  /* Theme preview frames inside .theme-preview-grid should NOT be treated as app shell */
  .theme-preview-grid .app {
    padding-bottom: 0;
    display: grid;
    grid-template-columns: 1fr;
  }
  .theme-preview-grid .app > .nav {
    position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    height: auto;
    box-shadow: none;
    border-right: 0;
    border-bottom: 1px solid var(--color-border-default);
  }
  .theme-preview-grid .tb__hamburger,
  .theme-preview-grid .tb__search-close,
  .theme-preview-grid .nav__close-mobile,
  .theme-preview-grid .bottom-tab { display: none !important; }

  /* Drawer backdrop */
  .drawer-backdrop {
    position: fixed;
    inset: 0;
    background: var(--color-bg-overlay);
    backdrop-filter: blur(1px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-normal) ease;
    z-index: calc(var(--z-drawer) - 1);
  }
  body.is-drawer-open .drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Collapse button inside drawer → hide (swap to close icon) */
  .nav__collapse { display: none; }
  .nav__close-mobile {
    margin-left: auto;
    background: transparent;
    border: 0;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 18px;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
  }

  /* Force SideNav to show full labels even if `.is-nav-collapsed` was set */
  .app.is-nav-collapsed > .nav .nav__brand-name,
  .app.is-nav-collapsed > .nav .nav__footer,
  .app.is-nav-collapsed > .nav .nav__section,
  .app.is-nav-collapsed > .nav a .label,
  .app.is-nav-collapsed > .nav a .tag-muted { display: initial; }
  .app.is-nav-collapsed > .nav a {
    justify-content: flex-start;
    padding: 6px var(--space-3);
    gap: var(--space-3);
  }
  .app.is-nav-collapsed > .nav > .nav__brand { justify-content: flex-start; padding: var(--space-2); }

  /* Larger touch targets in drawer (only main nav) */
  .app > .nav a {
    min-height: 44px;
    padding: 10px var(--space-3);
    font-size: var(--text-lg);
  }

  /* ============ TOPBAR mobile ============ */
  .tb {
    height: 52px;
    padding: 0 var(--space-3);
    gap: var(--space-2);
  }
  .tb__left {
    gap: var(--space-2);
    min-width: 0;
    flex: 1;
  }

  /* 汉堡按钮 */
  .tb__hamburger {
    display: inline-grid !important;
    place-items: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: transparent;
    border: 0;
    color: var(--color-text-primary);
    cursor: pointer;
    border-radius: var(--radius-md);
    font-size: 18px;
    line-height: 1;
  }
  .tb__hamburger:hover { background: var(--color-bg-muted); }

  /* 面包屑 → 折叠成仅当前节点 */
  .tb__crumbs { gap: 4px; overflow: hidden; min-width: 0; }
  .tb__crumbs > :not(.current):not(.sep):not(:last-child),
  .tb__crumbs > .sep { display: none; }
  .tb__crumbs .sep:last-of-type { display: none; }
  .tb__crumbs .current {
    font-size: var(--text-base);
    font-weight: var(--weight-semi);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Brand logo collapsed to icon only */
  .tb__brand-name { display: none; }
  .tb__brand { padding: 0; }

  /* Search → icon trigger + overlay */
  .tb__center {
    flex: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .tb__search {
    width: 40px !important;
    max-width: none !important;
  }
  .tb__search input { display: none; }
  .tb__search kbd { display: none; }
  .tb__search .icon {
    position: static;
    transform: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    cursor: pointer;
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: 16px;
    background: transparent;
  }
  .tb__search .icon:hover { background: var(--color-bg-muted); }

  /* Expanded search overlay */
  .tb__search.is-mobile-open {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 56px !important;
    background: var(--color-bg-surface) !important;
    z-index: calc(var(--z-drawer) + 1) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 var(--space-3) !important;
    gap: var(--space-2) !important;
    border-bottom: 1px solid var(--color-border-default) !important;
  }
  .tb__search.is-mobile-open input {
    display: block !important;
    flex: 1 !important;
    height: 40px !important;
    font-size: 16px !important;                /* prevent iOS zoom */
    padding: 0 var(--space-3) !important;
  }
  .tb__search.is-mobile-open .icon { background: transparent; color: var(--color-text-tertiary); }
  .tb__search-close {
    display: none;
    background: transparent;
    border: 0;
    font-size: 18px;
    padding: 8px 12px;
    color: var(--color-text-primary);
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--radius-md);
  }
  .tb__search.is-mobile-open .tb__search-close { display: inline-grid; place-items: center; }

  /* Right side icons — compact */
  .tb__right { gap: 2px; }
  .tb__icon-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  /* User button → only avatar, no text */
  .tb__user-btn {
    padding: 2px;
    height: 40px;
    width: 40px;
    justify-content: center;
  }
  .tb__user-name, .tb__user-role { display: none; }

  /* Dropdown menus → anchored to right edge, wider */
  .tb__menu {
    right: 0 !important;
    left: auto !important;
    min-width: 260px !important;
    max-width: calc(100vw - var(--space-4));
  }
  .tb__menu button, .tb__menu a {
    padding: 12px var(--space-3);
    min-height: 44px;
    font-size: var(--text-base);
  }

  /* ============ MAIN / PAGE ============ */
  .main { min-height: 100vh; }
  .page {
    padding: var(--space-4) var(--space-3);
    gap: var(--space-4);
    max-width: 100%;
  }

  /* Page header stacks */
  .page-header,
  .page-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-3) !important;
    display: flex !important;
    grid-template-columns: 1fr !important;
  }
  .page-header h1,
  .page-head h1 {
    font-size: var(--text-xl);
    line-height: 1.3;
  }
  .page-header p,
  .page-head p { font-size: var(--text-sm); }
  .page-actions,
  .page-head__actions {
    flex-wrap: wrap;
    gap: var(--space-2);
    display: flex;
  }
  .page-actions .btn,
  .page-head__actions .btn {
    flex: 1 1 auto;
    min-width: 44%;
    min-height: 40px;
  }
  .page-actions .btn:only-child,
  .page-head__actions .btn:only-child { flex: 1 1 100%; }

  /* ============ GRIDS → single column on mobile ============ */
  .grid-4, .grid-3, .grid-2,
  .grid-8-4, .grid-7-5, .grid-5-7, .grid-3-9 {
    grid-template-columns: 1fr !important;
  }

  /* Generic override for inline grid template on .grid and .page .grid */
  .page .grid[style*="grid-template-columns"],
  .page .grid[style*="grid-template"] {
    grid-template-columns: 1fr !important;
  }

  /* Two-column KV layout falls back to stacked on mobile */
  .kv {
    grid-template-columns: 100px 1fr !important;
    gap: var(--space-2) var(--space-3) !important;
    font-size: var(--text-xs) !important;
  }

  /* Only keep two-column for small KPI rows on phones (opt-in via .grid--keep-2-mobile) */
  .grid--keep-2-mobile { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* KPI cards take full width each */
  .kpi { min-height: 96px; padding: var(--space-3); }
  .kpi__value { font-size: var(--text-2xl); }

  /* ============ CARDS ============ */
  .card__head {
    padding: var(--space-3);
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .card__head h3 { font-size: var(--text-base); }
  .card__body { padding: var(--space-3); }
  .card__foot {
    padding: var(--space-3);
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* ============ TABLES → horizontal scroll + sticky first col ============ */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    border-radius: var(--radius-md);
    /* visual hint: right edge shadow */
    background-image:
      linear-gradient(to right, var(--color-bg-surface), var(--color-bg-surface)),
      linear-gradient(to right, var(--color-bg-surface), var(--color-bg-surface)),
      linear-gradient(to right, rgba(0,0,0,.06), transparent),
      linear-gradient(to left, rgba(0,0,0,.06), transparent);
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  [data-theme="dark"] .table-wrap {
    background-image:
      linear-gradient(to right, var(--color-bg-surface), var(--color-bg-surface)),
      linear-gradient(to right, var(--color-bg-surface), var(--color-bg-surface)),
      linear-gradient(to right, rgba(0,0,0,.4), transparent),
      linear-gradient(to left, rgba(0,0,0,.4), transparent);
  }
  .tbl { min-width: 560px; }
  .tbl th, .tbl td {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    white-space: nowrap;
  }
  /* Sticky first column for tables marked for it */
  .tbl--sticky-first th:first-child,
  .tbl--sticky-first td:first-child {
    position: sticky;
    left: 0;
    background: var(--color-bg-surface);
    z-index: 1;
    box-shadow: 1px 0 0 var(--color-border-subtle);
  }
  .tbl--sticky-first thead th:first-child { background: var(--color-bg-subtle); z-index: 2; }

  /* Opt-in: card-flow mode (converts rows into vertical cards) */
  .tbl--card-flow,
  .tbl--card-flow thead,
  .tbl--card-flow tbody,
  .tbl--card-flow tr,
  .tbl--card-flow td {
    display: block;
    width: 100%;
  }
  .tbl--card-flow thead { position: absolute; left: -9999px; }
  .tbl--card-flow tr {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    background: var(--color-bg-surface);
  }
  .tbl--card-flow td {
    padding: 4px 0;
    border: 0;
    white-space: normal;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
  }
  .tbl--card-flow td::before {
    content: attr(data-label);
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    flex-shrink: 0;
    font-weight: var(--weight-medium);
  }
  .tbl--card-flow td[data-label=""]::before { content: none; }

  /* ============ TOOLBAR / FILTERS ============ */
  .toolbar {
    padding: var(--space-3);
    gap: var(--space-2);
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .toolbar .sep { display: none; }
  .toolbar .select {
    min-width: 120px;
    height: 36px;
  }
  .pill-filter {
    padding: 6px 12px;
    min-height: 36px;
    white-space: nowrap;
  }

  /* ============ TABS ============ */
  .tabs {
    gap: var(--space-3);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--space-1);
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a, .tabs button {
    padding: 12px 2px;
    min-height: 44px;
    font-size: var(--text-base);
    flex-shrink: 0;
  }

  /* ============ TIMELINE ============ */
  .timeline {
    padding-left: var(--space-4);
    gap: var(--space-3);
  }
  .timeline::before { left: 6px; }
  .timeline__item::before { left: -18px; }

  /* ============ FORMS ============ */
  .field { gap: var(--space-1); }
  .field label { font-size: var(--text-sm); }
  .input, .select, .textarea {
    height: 40px;
    font-size: 16px;                          /* prevent iOS auto-zoom */
    padding: 0 var(--space-3);
  }
  .textarea { height: auto; min-height: 96px; padding: var(--space-3); }

  /* Forms in cards → stack */
  .bf__field--inline { grid-template-columns: 1fr; align-items: stretch; }
  .bf__field--inline .bf__msg { grid-column: 1; }

  /* ============ BUTTONS touch-friendly ============ */
  .btn {
    min-height: 40px;
    padding: 0 var(--space-4);
  }
  .btn--sm { min-height: 36px; }
  .btn--lg { min-height: 48px; }
  .btn--icon { min-width: 40px; }

  /* ============ STICKY ACTION BAR ============ */
  .sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 56px;                              /* above bottom tab */
    padding: var(--space-3);
    z-index: var(--z-sticky);
    gap: var(--space-2);
  }
  .sticky-bar .btn {
    flex: 1;
    min-width: 0;
  }

  /* If bottom tab hidden on specific pages (e.g. forms), .sticky-bar sticks to bottom */
  body.no-bottom-tab { padding-bottom: 0; }
  body.no-bottom-tab .app { padding-bottom: 0; }
  body.no-bottom-tab .sticky-bar { bottom: 0; }

  /* ============ PAGE HEADER HEADER layout flexibility ============ */
  .row {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .row--between { gap: var(--space-3); }

  /* ============ THEME PREVIEW GRID → stack ============ */
  .theme-preview-grid {
    grid-template-columns: 1fr;
    margin-top: var(--space-5);
  }
  .theme-preview-grid .app { min-height: 400px; padding-bottom: 0; }
  .theme-preview-grid .nav { position: relative; transform: none; width: 100%; height: auto; box-shadow: none; }
  .theme-preview-grid .app { grid-template-columns: 1fr; }
  .theme-preview-grid .main .tb__hamburger { display: none !important; }

  /* Hide preview bottom tab stubs inside stacked preview frames */
  .theme-preview-grid .bottom-tab { display: none !important; }

  /* ============ MOBILE BOTTOM TAB BAR ============ */
  .bottom-tab {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    background: var(--color-bg-surface);
    border-top: 1px solid var(--color-border-default);
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    z-index: var(--z-sticky);
    padding: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.04);
  }
  [data-theme="dark"] .bottom-tab { box-shadow: 0 -1px 2px rgba(0,0,0,0.4); }

  .bottom-tab__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    font-size: 10px;
    color: var(--color-text-tertiary);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    min-width: 56px;
    min-height: 56px;
    position: relative;
  }
  .bottom-tab__item .glyph {
    font-size: 18px;
    line-height: 1;
    color: var(--color-text-secondary);
  }
  .bottom-tab__item.is-active { color: var(--color-brand-primary); }
  .bottom-tab__item.is-active .glyph { color: var(--color-brand-primary); }
  .bottom-tab__item:hover .glyph { color: var(--color-text-primary); }
  .bottom-tab__item .dot {
    position: absolute;
    top: 8px;
    right: calc(50% - 16px);
    width: 6px;
    height: 6px;
    background: var(--color-danger);
    border-radius: 50%;
  }

  /* ============ MODAL → full-screen sheet on mobile ============ */
  .modal {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .modal__panel,
  .modal__panel--sm,
  .modal__panel--md,
  .modal__panel--lg,
  .modal__panel--xl {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }
  .modal__header { padding: var(--space-3); min-height: 52px; }
  .modal__body { padding: var(--space-4); }
  .modal__footer {
    padding: var(--space-3);
    flex-direction: column-reverse;
  }
  .modal__footer .bb,
  .modal__footer .btn {
    width: 100%;
    min-height: 44px;
  }
  .modal__close { min-width: 44px; min-height: 44px; }

  /* ============ CHARTS (SVG) ============ */
  .spark, .mini-chart {
    max-width: 100%;
    height: auto;
  }
  svg.mini-chart, svg.spark {
    width: 100%;
    height: auto;
  }

  /* Chart card wrappers — allow horizontal scroll for complex SVG */
  .chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ============ LOGIN ============ */
  .login-page {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .login-page__left {
    padding: var(--space-5) var(--space-4) !important;
    min-height: auto;
    order: 2;
    border-right: 0 !important;
    border-top: 1px solid var(--color-border-default) !important;
  }
  .login-page__right {
    padding: var(--space-5) var(--space-4) !important;
    order: 1;
  }
  .login-card { max-width: 100% !important; }
  .login-title { font-size: var(--text-2xl) !important; }

  /* ============ PAGE-SPECIFIC OVERRIDES ============ */

  /* Matchboard (sales/matchboard.html) */
  .mb-layout {
    grid-template-columns: 1fr !important;
    gap: var(--space-3) !important;
  }
  .school-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-3) !important;
  }
  .school-card .stats {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Student detail / timeline — right rail moves under content */
  .student-grid,
  .detail-grid,
  .timeline-layout,
  .page-layout,
  .content-layout,
  .fn-main,
  .mb-layout,
  .funnel-layout,
  .student-hero {
    grid-template-columns: 1fr !important;
  }
  .student-hero,
  .status-hero { gap: var(--space-3) !important; padding: var(--space-3) !important; text-align: left; }
  .student-hero .meta,
  .status-hero .meta { align-items: flex-start; }
  .status-hero {
    grid-template-columns: 1fr !important;
  }

  /* Stat strip used by reception-inbox, boss dashboards */
  .stat-strip,
  .stats,
  .summary-band {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--space-2) !important;
  }
  .summary-band > * {
    padding: var(--space-3) !important;
    border-right: 0 !important;
  }

  /* Any card grid using `.grid` (not .grid-N) falls back to single col if wider than viewport */
  .page > .grid,
  .page-layout .grid {
    grid-template-columns: 1fr !important;
  }

  /* Content brief / task 双栏 headers */
  .brief-grid,
  .task-grid {
    grid-template-columns: 1fr !important;
  }

  /* Content briefs — list pages */
  .data-tbl {
    min-width: 560px;
  }

  /* Contract diff — side by side → stack */
  .diff-layout,
  .diff-grid {
    grid-template-columns: 1fr !important;
  }

  /* Reception inbox — left list + right preview stack */
  .inbox-layout {
    grid-template-columns: 1fr !important;
  }

  /* Lead intake form two-column fields */
  .two-col-form {
    grid-template-columns: 1fr !important;
  }

  /* Heat map / complex chart — horizontal scroll */
  .heatmap-wrap,
  .complex-chart {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Wrap heat-grid in scroll container when present */
  .heat-grid {
    min-width: 560px;
    font-size: var(--text-xs) !important;
  }
  .heat-grid-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ============ UTILITIES ============ */
  /* Hide on mobile */
  .u-hide-mobile { display: none !important; }
  /* Show only on mobile */
  .u-show-mobile { display: initial !important; }

  /* Desktop-only helpers */
  .nav__collapse { display: none; }            /* desktop rail toggle irrelevant */
}

/* Show the hamburger only on mobile by default hidden */
.tb__hamburger { display: none; }
.drawer-backdrop { display: none; }
@media (max-width: 768px) {
  .drawer-backdrop { display: block; }
}

/* Hide bottom tab by default (desktop); show on mobile */
.bottom-tab { display: none; }
@media (max-width: 768px) {
  .bottom-tab { display: flex; }
}

/* Show mobile-only elements only under mobile breakpoint */
.u-show-mobile { display: none; }

/* ============================================================
   HOVER-CAPABLE ONLY (disable hover effects on touch)
   ============================================================ */
@media (hover: none) {
  .btn:hover,
  .bb:hover,
  .nav a:hover,
  .tbl tbody tr:hover,
  .pill-filter:hover,
  .tb__icon-btn:hover,
  .tb__user-btn:hover,
  .tb__menu button:hover,
  .tb__menu a:hover,
  .card:hover {
    background: initial;
  }
  .tbl tbody tr:hover { background: transparent !important; }
  .tbl--hoverable tbody tr:active { background: var(--color-bg-muted); }
  .btn:active,
  .bb:active { background: var(--color-bg-muted); }
  .btn--primary:active,
  .bb--primary:active { background: var(--color-brand-active); }
}

/* ============================================================
   SMALL PHONE (≤ 480px) — tighter compaction
   ============================================================ */
@media (max-width: 480px) {
  .page { padding: var(--space-3) var(--space-3); gap: var(--space-3); }
  .page-header h1 { font-size: var(--text-lg); }

  /* KPI cards always single col */
  .grid--keep-2-mobile { grid-template-columns: 1fr !important; }
  .kpi { min-height: 80px; padding: var(--space-3); }
  .kpi__value { font-size: var(--text-xl); }

  /* Tabs → smaller text */
  .tabs a, .tabs button { font-size: var(--text-sm); padding: 10px 2px; }

  /* Page action buttons stack */
  .page-actions .btn {
    flex: 1 1 100%;
    min-width: 100%;
  }

  /* Bottom tab text labels shrink */
  .bottom-tab__item { font-size: 9px; }
  .bottom-tab__item .glyph { font-size: 16px; }

  /* Drawer full-width on tiny screens */
  .nav { width: 92vw; }

  /* Tables — shrink further */
  .tbl { min-width: 480px; }
  .tbl th, .tbl td { padding: var(--space-2); font-size: var(--text-xs); }

  /* Login: no side illustration on tiny */
  .login-page__left .login-features { display: none; }

  /* Modals fill more height */
  .modal__panel { max-height: 96vh !important; }
}

/* ============================================================
   TINY (≤ 360px) — safety fallback
   ============================================================ */
@media (max-width: 360px) {
  .tb { padding: 0 var(--space-2); }
  .tb__hamburger, .tb__icon-btn, .tb__user-btn { width: 36px; height: 36px; min-width: 36px; }
  .page { padding: var(--space-3) var(--space-2); }
}

/* ============================================================
   Safe-area insets (notch / home indicator on iPhone)
   ============================================================ */
@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    .bottom-tab {
      padding-bottom: env(safe-area-inset-bottom);
      height: calc(56px + env(safe-area-inset-bottom));
    }
    .app { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
    .sticky-bar { bottom: calc(56px + env(safe-area-inset-bottom)); }
    body.no-bottom-tab .sticky-bar { bottom: env(safe-area-inset-bottom); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); }
    .tb { padding-left: max(var(--space-3), env(safe-area-inset-left)); padding-right: max(var(--space-3), env(safe-area-inset-right)); }
  }
}

/* ============================================================
   Landscape orientation — phones
   ============================================================ */
@media (max-width: 926px) and (orientation: landscape) and (max-height: 500px) {
  .bottom-tab { height: 48px; }
  .bottom-tab__item { font-size: 9px; min-height: 48px; }
  .bottom-tab__item .glyph { font-size: 14px; }
  .app { padding-bottom: 48px; }
  .tb { height: 48px; }
}