/* Content pages keep their desktop tables and become labelled records on phones. */
@media (max-width:767px) {
  .member-app .m-record-panel { overflow:visible; border:0; background:transparent; box-shadow:none; }
  .member-app .m-record-panel .m-table-title { padding:4px 0 16px; }
  .member-app .m-record-panel .m-table-wrap { overflow:visible; }
  .member-app .m-record-table { display:block; min-width:0; width:100%; white-space:normal; font-size:14px; }
  .member-app .m-record-table thead { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .member-app .m-record-table tbody { display:grid; gap:12px; width:100%; }
  .member-app .m-record-table tbody > tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 20px; padding:18px; border:1px solid var(--m-border); border-radius:14px; background:var(--m-panel); }
  .member-app .m-record-table tbody > tr:hover { background:var(--m-panel); }
  .member-app .m-record-table td { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:0; border:0; gap:5px; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; line-height:1.5; }
  .member-app .m-record-table td[data-label]::before { content:attr(data-label); color:var(--m-muted); font-size:12px; font-weight:400; line-height:1.4; }
  .member-app .m-record-table .m-record-index { display:none; }
  .member-app .m-record-table .m-record-primary { grid-column:1 / -1; padding-bottom:14px; border-bottom:1px solid var(--m-border); font-size:16px; font-weight:600; }
  .member-app .m-record-table .m-record-primary br { display:none; }
  .member-app .m-record-table td small { display:block; font-size:12px; font-weight:400; line-height:1.6; margin-top:3px; overflow-wrap:anywhere; }
  .member-app .m-record-table .m-record-status { align-items:flex-end; text-align:right; }
  .member-app .m-record-table .m-state-badge { min-height:28px; font-size:12px; }
  .member-app .m-record-table .m-record-actions { grid-column:1 / -1; padding-top:4px; }
  .member-app .m-record-table .m-record-actions::before { display:none; }
  .member-app .m-record-table .m-record-actions .m-text-button { display:flex; justify-content:center; width:100%; min-height:44px; padding:10px 16px; border:1px solid var(--m-border); border-radius:10px; background:var(--m-hover); font-size:14px; }
  .member-app .m-record-table .m-record-total { grid-column:1 / -1; flex-direction:row; justify-content:space-between; align-items:center; padding-top:12px; border-top:1px solid var(--m-border); font-weight:600; color:var(--m-primary); }
  .member-app .m-record-table .m-empty-cell { grid-column:1 / -1; display:block; padding:0; }
  .member-app .m-record-table .m-empty { min-height:190px; padding:24px 8px; }
  .member-app .m-api-pagination { gap:10px; padding:16px 0 0; font-size:13px; }
  .member-app .m-api-pagination .m-button { min-height:44px; min-width:80px; font-size:14px; }

  .member-app :is(.m-form-field input:not([type="checkbox"]),.m-form-field textarea,.m-form-field select,.m-input),
  .m-dialog :is(input:not([type="checkbox"]),textarea,select) { font-size:16px; line-height:1.5; min-height:48px; }
  .member-app :is(.m-form-field label,.m-demo-note) { font-size:13px; }
  .member-app .m-form-field { gap:8px; margin-bottom:18px; }
  .member-app :is(.m-wallet-actions,.m-header-actions) { display:flex; flex-wrap:wrap; gap:10px; width:100%; }
  .member-app :is(.m-wallet-actions,.m-header-actions) .m-button { flex:1 1 110px; min-height:46px; font-size:14px; text-align:center; }
  .member-app .m-header-actions .m-invite-purchase-button { flex-basis:100%; }
  .member-app .m-invite-codes header { align-items:flex-start; }
  .member-app .m-invite-codes header .m-button { min-height:46px; font-size:14px; }
  .member-app .m-invite-codes .m-sub-center-address { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 12px; padding:16px 0; }
  .member-app .m-invite-codes .m-sub-center-address code { font-size:15px; overflow:visible; white-space:normal; overflow-wrap:anywhere; }
  .member-app .m-invite-codes .m-sub-center-address > span { font-size:12px; color:var(--m-muted); }
  .member-app .m-invite-codes .m-sub-center-address .m-text-button { grid-column:1 / -1; justify-content:center; min-height:44px; border:1px solid var(--m-border); border-radius:10px; padding:9px 12px; font-size:14px; background:var(--m-hover); }
  .member-app .m-commission-balance { padding:24px 0; }
  .member-app .m-commission-balance strong { font-size:36px; overflow-wrap:anywhere; }
  .member-app .m-referral-stats { gap:20px 16px; padding-top:20px; }
  .member-app .m-referral-stats span { font-size:12px; }
  .member-app .m-referral-stats strong { font-size:20px; overflow-wrap:anywhere; }
  .member-app .m-wallet-panel,.member-app .m-profile-subscription { min-height:0; }
  .member-app .m-wallet-balances { gap:14px; }
  .member-app .m-wallet-balances span,.member-app .m-profile-sub-details { font-size:13px; }
  .member-app .m-wallet-balances strong { overflow-wrap:anywhere; }
  .member-app .m-profile-usage > div:last-child { min-width:0; }
  .member-app .m-profile-usage > div:last-child strong { font-size:13px; overflow-wrap:anywhere; }
  .member-app .m-subscription-center header { flex-wrap:wrap; gap:8px 12px; }
  .member-app .m-subscription-center header .m-text-button { min-height:44px; font-size:14px; }
  .member-app .m-sub-center-body { align-items:center; gap:20px; }
  .member-app .m-sub-center-address { gap:10px; }
  .member-app .m-sub-center-address code { white-space:normal; text-overflow:clip; overflow-wrap:anywhere; max-height:100px; overflow:auto; font-size:13px; }
  .member-app .m-sub-center-address > .m-text-button { flex:0 0 44px; min-height:44px; justify-content:center; border:1px solid var(--m-border); border-radius:10px; }
  .member-app .m-sub-center-main > a.m-text-button { width:100%; min-height:44px; justify-content:center; border:1px solid var(--m-border); border-radius:10px; font-size:14px; }
  .member-app .m-password-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; overflow:visible; }
  .member-app .m-password-tabs > button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:12px 6px; min-height:64px; white-space:normal; font-size:13px; text-align:center; background:var(--m-hover); border-radius:9px 9px 0 0; }
  .member-app .m-password-tabs > button > span { font-size:11px; }
  .member-app .m-code-row { flex-wrap:wrap; }
  .member-app .m-code-row input { flex:1 1 140px; }
  .member-app .m-code-row .m-button { min-height:48px; font-size:13px; }
  .member-app :is(.m-password-submit,#member-reminder-form > .m-button) { width:100%; min-height:48px; font-size:14px; }
  .member-app #member-reminder-form > .m-form-field { min-height:48px; padding:10px 0; margin-bottom:12px; }
  .member-app .m-avatar-preview :is(strong,span) { max-width:100%; overflow-wrap:anywhere; }
  .member-app .m-avatar-preview > span:last-child { font-size:13px; }

  .member-app .m-node-grid { grid-template-columns:1fr; gap:12px; }
  .member-app .m-node-card { position:relative; min-height:0; padding:18px; }
  .member-app .m-node-top { margin-bottom:10px; }
  .member-app .m-node-card > strong { font-size:16px; overflow-wrap:anywhere; }
  .member-app .m-node-rate { font-size:13px; }
  .member-app .m-node-status { font-size:12px; }
  .member-app .m-node-chips { margin-top:12px; }
  .member-app .m-node-chips > span { font-size:11px; padding:4px 8px; }
  .member-app .m-node-protocol { font-size:11px; }
  .member-app .m-ticket-table,.member-app .m-traffic-table { margin-top:18px; }
  .member-app .m-feature-banner { padding:20px; min-height:160px; gap:12px; }
  .member-app .m-feature-banner > div:first-child { min-width:0; }
  .member-app .m-feature-banner h1 { font-size:22px; }
  .member-app .m-feature-banner p { font-size:13px; }
  .member-app .m-feature-banner .m-banner-button { min-height:46px; font-size:14px; }
  .member-app .m-banner-art-ticket { width:88px; flex:0 0 88px; }
  .member-app .m-banner-art-ticket img { max-width:100%; height:auto; }
  .member-app .m-traffic-summary h1 { font-size:19px; }
  .member-app .m-traffic-used,.member-app .m-traffic-values { font-size:13px; gap:10px; }
  .member-app .m-traffic-values { display:grid; grid-template-columns:1fr; }
  .member-app .m-traffic-summary p { font-size:12px; overflow-wrap:anywhere; }

  .m-dialog[open] { display:flex; flex-direction:column; width:calc(100% - 16px); max-width:550px; max-height:calc(100dvh - 16px); overflow:hidden; border-radius:18px; }
  .m-dialog-heading { flex:0 0 auto; padding:16px 18px; gap:12px; }
  .m-dialog-heading h2 { font-size:18px; min-width:0; overflow-wrap:anywhere; }
  .m-dialog-heading .m-icon-button { flex:0 0 44px; width:44px; height:44px; }
  .m-dialog-content { flex:1 1 auto; min-height:0; max-height:none; overflow:auto; overscroll-behavior:contain; padding:20px 18px; }
  .m-dialog-footer { flex:0 0 auto; padding:14px 18px max(14px,env(safe-area-inset-bottom)); background:var(--m-panel); gap:10px; }
  .m-dialog-footer .m-button { flex:1 1 110px; min-height:48px; font-size:14px; }
  .m-dialog .m-checkout-summary { padding:16px; }
  .m-dialog .m-bill-lines > div { gap:16px; }
  .m-dialog .m-bill-lines span,.m-dialog .m-bill-lines strong { font-size:13px; }
  .m-dialog .m-checkout-payments { gap:8px; }
  .m-dialog .m-payment { font-size:14px; min-height:52px; padding:10px; }
  .m-dialog .m-payment span { overflow-wrap:anywhere; }
  .m-dialog .m-coupon { flex-wrap:wrap; }
  .m-dialog .m-coupon input { flex:1 1 140px; }
  .m-dialog .m-coupon .m-button { min-height:48px; font-size:14px; }
  .m-dialog .m-ticket-message { padding:14px; border:1px solid var(--m-border); border-radius:12px; background:var(--m-bg); }
  .m-dialog .m-ticket-message small { font-size:12px; margin:4px 0 10px; }
  .m-dialog .m-ticket-content { font-size:14px; line-height:1.7; }
  .m-dialog .m-demo-note { font-size:12px; }
}

@media (max-width:359px) {
  .member-app .m-record-table tbody > tr { padding:16px; gap:14px 12px; }
  .member-app .m-banner-art-ticket { display:none; }
  .member-app .m-commission-balance strong { font-size:32px; }
  .member-app .m-code-row .m-button,.m-dialog .m-coupon .m-button { flex-basis:100%; }
}