/* =============================================================================
   console-mobile.css — 会员控制台 H5 移动端（≤768px）
   ============================================================================= */

@media (max-width: 768px) {
  :root {
    --tabbar-h: 3.5rem;
  }

  /* Layout: 单列，隐藏侧栏 */
  .console-app .app {
    grid-template-columns: 1fr;
    grid-template-rows: var(--tb-h) 1fr;
  }

  .console-app .sidebar {
    display: none;
  }

  .console-app .main {
    padding: var(--spacing-4);
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--spacing-4));
  }

  /* Topbar 紧凑 */
  .console-app .topbar {
    padding: 0 var(--spacing-3);
    padding-top: env(safe-area-inset-top, 0px);
    min-height: var(--tb-h);
  }

  .console-app .topbar .brand > span:not(.pill):not(.backend-version) {
    font-size: var(--font-size-sm);
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .console-app .topbar .pill.info.no-dot,
  .console-app .topbar .backend-version,
  .console-app .topbar #tb-logout,
  .console-app .topbar #tb-avatar {
    display: none;
  }

  .console-app .topbar #tb-balance {
    font-size: var(--font-size-xs);
    padding: var(--spacing-1) var(--spacing-2);
  }

  /* Page header */
  .console-app .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
  }

  .console-app .page-header .page-actions {
    display: flex;
    gap: var(--spacing-2);
  }

  .console-app .page-header .page-actions .btn {
    flex: 1;
    justify-content: center;
    min-height: 2.75rem;
  }

  .console-app .page-title {
    font-size: var(--font-size-xl);
  }

  .console-app .page-sub {
    font-size: var(--font-size-sm);
  }

  /* Grids → 单列 */
  .console-app .console-split-2,
  .console-app .grid.section[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  .console-app .grid.g-4.section,
  .console-app .kpi-grid-mobile {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--spacing-3);
  }

  .console-app .grid.g-3.section {
    grid-template-columns: 1fr !important;
  }

  .console-app .card.kpi {
    padding: var(--spacing-3);
  }

  .console-app .card.kpi .kpi-value {
    font-size: var(--font-size-xl);
  }

  /* Card header 趋势切换 */
  .console-app .card-h {
    flex-wrap: wrap;
    gap: var(--spacing-2);
  }

  .console-app .card-h .trend-range {
    width: 100%;
    justify-content: flex-start;
  }

  .console-app .card-h .trend-range .btn {
    flex: 1;
    min-height: 2.25rem;
  }

  /* Tables */
  .console-app .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
  }

  .console-app .table th,
  .console-app .table td {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-xs);
    white-space: nowrap;
  }

  /* Dialog → bottom sheet */
  .console-app .dialog {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    max-width: none;
    width: 100%;
    max-height: 85vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    transform: translateY(100%);
    transition: transform 0.2s ease;
  }

  .console-app .dialog.show {
    transform: translateY(0);
  }

  .console-app pre.code {
    overflow-x: auto;
    font-size: var(--font-size-xs);
    -webkit-overflow-scrolling: touch;
  }

  /* Profile menu rows */
  .console-app .mobile-menu-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .console-app .mobile-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4);
    min-height: 3rem;
    border-bottom: var(--border-width-1) solid var(--color-border-subtle);
    color: var(--color-text-primary);
    text-decoration: none;
  }

  .console-app .mobile-menu-item:last-child {
    border-bottom: none;
  }

  .console-app .mobile-menu-item:active {
    background: var(--color-surface-base);
  }

  .console-app .mobile-menu-item .chevron {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-lg);
  }

  /* Bottom tab bar */
  .console-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sticky, 100);
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--color-surface-raised);
    border-top: var(--border-width-1) solid var(--color-border-subtle);
  }

  .console-tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--spacing-1) 0;
    color: var(--color-text-tertiary);
    font-size: 0.625rem;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .console-tabbar-item .ic {
    width: 1.375rem;
    height: 1.375rem;
  }

  .console-tabbar-item.active {
    color: var(--color-brand-primary-600);
    font-weight: var(--font-weight-medium);
  }

  .console-tabbar-item.active .ic {
    stroke: var(--color-brand-primary-600);
  }

  /* Touch targets */
  .console-app .btn {
    min-height: 2.75rem;
  }

  .console-app .btn-sm {
    min-height: 2.25rem;
  }

  .console-app .input {
    min-height: 2.75rem;
  }

  /* Auth pages (login) */
  body:not(.console-app) .main.center {
    padding: var(--spacing-4);
    padding-top: calc(var(--spacing-4) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--spacing-4) + env(safe-area-inset-bottom, 0px));
    align-items: flex-start;
  }

  body:not(.console-app) .auth-card {
    width: 100%;
    max-width: none;
  }

  body:not(.console-app) .auth-tabs {
    width: 100%;
  }

  body:not(.console-app) .btn-lg {
    min-height: 3rem;
  }
}

/* Desktop: hide tab bar */
@media (min-width: 769px) {
  .console-tabbar {
    display: none;
  }

  .console-app .mobile-only {
    display: none;
  }
}

/* WebView embed mode */
.console-app.embed-mode .app {
  grid-template-columns: 1fr;
}

.console-app.embed-mode .main {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  padding-bottom: var(--spacing-6);
}

.console-app.embed-mode .grid.g-3 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.console-app.embed-mode .console-tabbar,
.console-app.embed-mode .sidebar {
  display: none !important;
}

@media (max-width: 768px) {
  .console-app.embed-mode .main {
    padding-bottom: calc(var(--spacing-4) + env(safe-area-inset-bottom, 0px));
  }
}