/* Mobile presentation only. Loaded after the existing desktop/theme styles. */
@media (max-width: 767px) {
  .console-shell.console-shell {
    display: block;
    min-height: 100svh;
    padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px));
  }

  .console-shell.console-shell .workspace {
    grid-column: auto;
    width: 100%;
    min-width: 0;
    padding: 0 14px 24px;
  }

  .console-shell.console-shell .side-rail {
    position: fixed;
    inset: auto 0 0;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px;
    width: 100%;
    height: calc(78px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-right: 0;
  }

  .console-shell.console-shell .rail-logo { display: none; }

  .console-shell.console-shell .side-rail nav {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
    height: 78px;
    margin: 0;
    padding: 7px 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .28) transparent;
  }

  .console-shell.console-shell .side-rail nav::-webkit-scrollbar { display: block; height: 3px; }
  .console-shell.console-shell .side-rail nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); border-radius: 3px; }
  .console-shell.console-shell .rail-nav-group { display: contents; }
  .console-shell.console-shell .rail-subnav { display: none; }

  .console-shell.console-shell .side-rail :is(nav > button, .rail-nav-group > button) {
    flex: 0 0 72px;
    width: 72px;
    height: 62px;
    min-height: 62px;
    padding: 7px 4px;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1.3;
  }

  .console-shell.console-shell .side-rail nav button span { white-space: nowrap; overflow: visible; }
  .console-shell.console-shell .side-rail nav button svg { width: 22px; height: 22px; padding: 0; }
  .console-shell.console-shell .side-rail .wednesday-menu-label { font-size: 12px !important; line-height: 1.3 !important; white-space: nowrap !important; }
  .console-shell.console-shell .wednesday-mobile-break { display: none; }

  .console-shell.console-shell .side-rail .rail-bottom {
    position: static;
    width: 100% !important;
    height: 62px !important;
    min-height: 62px !important;
    margin: 7px 0;
    padding: 7px 2px !important;
    gap: 6px;
    flex-direction: column;
    justify-content: center;
    font-size: 12px;
    line-height: 1.3;
  }

  .console-shell.console-shell .side-rail .rail-bottom span { display: block; overflow: visible; }

  .console-shell.console-shell .page-intro {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
    margin: 18px 0 12px;
  }

  .console-shell.console-shell .page-intro > div:first-child { max-width: none; }
  .console-shell.console-shell .page-intro h1 { font-size: 25px; line-height: 1.35; }

  /* A desktop flex-basis becomes a 320px HEIGHT in the mobile column layout. */
  .console-shell.console-shell .tenant-switcher.page-intro-tenant {
    flex: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: auto;
    min-height: 54px;
    margin: 0;
    padding: 8px 10px;
  }

  .console-shell.console-shell .page-intro-tenant > span { white-space: nowrap; }
  .console-shell.console-shell .page-intro-tenant select { width: 100%; min-width: 0; max-width: none; min-height: 44px; font-size: 16px; }

  .console-shell.console-shell :is(.metric-strip, .refresh-metric-strip, .consumption-summary-stats) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .console-shell.console-shell .metric { display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 12px 8px; min-width: 0; min-height: 112px; padding: 14px 12px; }
  .console-shell.console-shell .metric-icon { grid-column: 1; grid-row: 1; width: 32px; height: 32px; }
  .console-shell.console-shell .metric strong { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: clamp(20px, 5.6vw, 26px); white-space: nowrap; }
  .console-shell.console-shell .metric small { grid-column: 2; grid-row: 1; margin: 0; white-space: normal; }

  .console-shell.console-shell .section-toolbar { align-items: stretch; flex-direction: column; gap: 12px; margin: 20px 0 14px; }
  .console-shell.console-shell .toolbar-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
  .console-shell.console-shell .toolbar-actions > :is(.overview-sort, .ghost-button) { grid-column: 1 / -1; }
  .console-shell.console-shell .toolbar-actions > button { min-width: 0; white-space: normal; }
  .console-shell.console-shell .overview-sort { justify-content: center; flex-wrap: wrap; width: 100%; }

  .console-shell.console-shell .account-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .console-shell.console-shell .account-head { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px; }
  .console-shell.console-shell .account-head .status-pill { justify-self: start; margin-left: 46px; height: 30px; }
  .console-shell.console-shell .phone-identity { gap: 10px; }
  .console-shell.console-shell .phone-glyph { flex: 0 0 36px; width: 36px; height: 40px; }
  .console-shell.console-shell .account-title-line { flex-wrap: wrap; gap: 7px; }
  .console-shell.console-shell .account-title-line h2 { flex: 1 0 100%; overflow: visible; white-space: normal; overflow-wrap: anywhere; font-size: 18px; line-height: 1.5; }
  .console-shell.console-shell .global-identity-badge { min-height: 26px; font-size: 12px; }
  .console-shell.console-shell .phone-copy-button { min-height: 36px; padding: 0 8px; }
  .console-shell.console-shell .owner-line { margin-left: 0; white-space: normal; overflow-wrap: anywhere; padding: 0 16px 12px; }

  .console-shell.console-shell .membership-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; }
  .console-shell.console-shell .membership-cell { min-width: 0; min-height: 0; padding: 14px 12px; }
  .console-shell.console-shell .membership-cell h3 { min-height: 42px; margin: 8px 0; font-size: 14px; line-height: 1.5; white-space: normal; }
  .console-shell.console-shell .coupon-number { align-items: baseline; flex-wrap: wrap; gap: 5px; }
  .console-shell.console-shell .coupon-number strong { font-size: 29px; }
  .console-shell.console-shell .membership-meta { align-items: flex-start; flex-direction: column; gap: 8px; margin-top: 10px; }
  .console-shell.console-shell .membership-meta > span { overflow: visible; white-space: normal; line-height: 1.6; }
  .console-shell.console-shell .membership-order-button { min-height: 36px; padding: 4px 7px; }
  .console-shell.console-shell .membership-open-hint { align-items: flex-start; flex-direction: column; gap: 5px; white-space: normal; }

  .console-shell.console-shell .account-footer { padding: 14px; gap: 14px; }
  .console-shell.console-shell .account-times { align-items: flex-start; flex-direction: column; gap: 8px; white-space: normal; }
  .console-shell.console-shell .card-actions { width: 100%; grid-template-columns: 44px 44px minmax(0, 1fr); gap: 10px; }
  .console-shell.console-shell .card-actions > .icon-button { width: 44px; height: 44px; }
  .console-shell.console-shell .card-actions > .secondary-button { min-height: 44px; padding: 8px; font-size: 13px; white-space: normal; }
  .console-shell.console-shell .card-actions > .secondary-button:nth-child(n + 4) { grid-column: 1 / -1; }

  .console-shell.console-shell :is(.benefit-account-bar, .benefit-account-actions, .consumption-summary-head, .account-rights-head) { align-items: stretch; flex-direction: column; gap: 12px; }
  .console-shell.console-shell .benefit-account-bar { position: static; top: auto; padding: 16px; }
  .console-shell.console-shell .benefit-account-identity strong { white-space: normal; overflow-wrap: anywhere; line-height: 1.6; }
  .console-shell.console-shell .benefit-account-actions { min-width: 0; width: 100%; }
  .console-shell.console-shell .benefit-account-actions select { width: 100%; min-width: 0; min-height: 44px; font-size: 16px; }
  .console-shell.console-shell .account-rights-panel { padding: 14px; }
  .console-shell.console-shell .layout-action-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
  .console-shell.console-shell .layout-action-row > button { width: 100%; white-space: normal; }
  .console-shell.console-shell .rights-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
  .console-shell.console-shell .rights-summary > span { min-width: 0; padding: 10px 8px; }
  .console-shell.console-shell .rights-summary > em { grid-column: 1 / -1; white-space: normal; }
  .console-shell.console-shell :is(.rights-filters, .plus-category-chips) { flex-wrap: wrap; gap: 8px; }
  .console-shell.console-shell :is(.rights-filters, .plus-category-chips) button { min-height: 44px; padding: 8px 10px; white-space: normal; }
  .console-shell.console-shell :is(.rights-list-grid, .plus-category-grid, .benefit-service-grid, .global-plus-benefits, .suixin-service-grid, .guarantee-roster) { grid-template-columns: minmax(0, 1fr); }
  .console-shell.console-shell .right-card { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .console-shell.console-shell .right-card-image { width: 52px; height: 52px; }
  .console-shell.console-shell .right-card-copy h3 { font-size: 16px; line-height: 1.6; }
  .console-shell.console-shell .right-card footer { gap: 10px; }
  .console-shell.console-shell .right-card footer button { min-height: 44px; padding: 10px 14px; }

  .console-shell.console-shell :is(.primary-button, .secondary-button, .ghost-button, .field-label input, .field-label select, .field-label textarea) { min-height: 44px; }
  .console-shell.console-shell :is(.field-label input, .field-label select, .field-label textarea) { font-size: 16px; }
  .console-shell.console-shell .dialog { width: calc(100vw - 24px); max-width: calc(100vw - 24px); max-height: calc(100svh - 24px); margin: 0; }
  .console-shell.console-shell .dialog > header { padding: 16px; }
  .console-shell.console-shell .dialog-form { padding: 16px; }
  .console-shell.console-shell .dialog > header .icon-button { width: 44px; height: 44px; }

  .console-shell.console-shell .wednesday-page { min-width: 0; padding: 18px 0 24px; }
  .console-shell.console-shell .wednesday-heading { align-items: stretch; flex-direction: column; gap: 12px; }
  .console-shell.console-shell :is(.wednesday-note, .wednesday-import, .wednesday-account) { min-width: 0; padding: 16px; overflow-wrap: anywhere; }
  .console-shell.console-shell .wednesday-list { grid-template-columns: minmax(0, 1fr); }
  .console-shell.console-shell .wednesday-account-title { align-items: flex-start; flex-wrap: wrap; gap: 8px; }
  .console-shell.console-shell .wednesday-actions { align-items: stretch; flex-direction: column; }
  .console-shell.console-shell .wednesday-page :is(button, input, select) { min-height: 44px; max-width: 100%; }
  .console-shell.console-shell .wednesday-page :is(input, select) { font-size: 16px; }
  .console-shell.console-shell .wednesday-import label { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
  .console-shell.console-shell .wednesday-import label :is(input, select) { width: 100%; min-width: 0; flex-basis: 100%; }
  .console-shell.console-shell .wednesday-app-row strong { display: block; white-space: normal; }
}

@media (max-width: 359px) {
  .console-shell.console-shell .workspace { padding-right: 10px; padding-left: 10px; }
  .console-shell.console-shell .membership-grid { grid-template-columns: minmax(0, 1fr); }
  .console-shell.console-shell .membership-cell h3 { min-height: 0; }
  .console-shell.console-shell .tenant-switcher.page-intro-tenant { grid-template-columns: minmax(0, 1fr); }
  .console-shell.console-shell .toolbar-actions { grid-template-columns: minmax(0, 1fr); }
}