/* Shared phone layout for every user page. */
@media(max-width:700px){
  html,body{max-width:100%;overflow-x:hidden}
  .main,.content,.content>*{min-width:0}
  .page-title{width:100%;gap:10px}
  .page-title>div{min-width:0;max-width:100%}
  .page-title h1,.section-head h2,.panel-title h2,.list-head h2{overflow-wrap:anywhere}
  .filter-card,.list-card,.card{max-width:100%}
  .filter-card.compact .filter-inline{align-items:stretch;flex-wrap:wrap}
  .filter-card.compact .filter-inline label{width:100%}
  .filter-actions,.action-bar,.list-head,.table-foot,.content footer{flex-wrap:wrap;gap:9px}
  .list-head{align-items:flex-start}
  .list-head>div:first-child{min-width:0;flex:1 1 180px}
  .buy-button{flex:0 0 auto;max-width:100%;padding:0 12px}
  .table-scroll{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .table-foot>span{max-width:100%;overflow-wrap:anywhere}
  .account-panel,.account-stats>.card,.group-card{min-width:0}
  .detail-line{align-items:flex-start;gap:10px;flex-wrap:wrap}
  .detail-line strong{text-align:right;overflow-wrap:anywhere}
  .modal-shade{align-items:flex-end;padding:0}
  .modal,.buy-modal{width:100%;max-width:100%;max-height:min(94dvh,900px);border-radius:14px 14px 0 0}
  .modal-head,.buy-footer,.modal-actions{padding-left:16px;padding-right:16px}
  .info-body{padding:12px 16px 20px}
  .recharge-field{padding-left:16px;padding-right:16px}
  .modal-notice{margin-left:16px;margin-right:16px}
  .toast{left:12px;right:12px;bottom:12px;text-align:center}
}
@media(max-width:420px){
  .content{padding-left:12px;padding-right:12px}
  .preview-bar{padding-left:12px;padding-right:12px}
  .topbar{gap:8px;padding-left:10px;padding-right:10px}
  .top-brand strong{font-size:16px}
  .top-summary{gap:7px}
  .recharge-top{min-width:52px;padding:0 8px}
  .stat-grid,.stat-grid.three{grid-template-columns:1fr 1fr}
  .stat-card{min-width:0;padding:13px}
  .stat-card strong{font-size:21px;overflow-wrap:anywhere}
  .filter-grid{gap:9px}
  .filter-grid label{min-width:0}
  .action-bar button,.filter-actions button{min-height:36px}
  .wallet-strip{gap:18px;padding:18px}
  .wallet-strip strong{font-size:23px}
  .buy-filters{flex-wrap:wrap}
  .buy-filters>.secondary{width:100%}
  .buy-options select{max-width:100%}
  .amount-choice{padding:10px 12px}
  .catalog-subcategory-row{min-width:0}
}
@media(max-width:700px){
  .filter-grid input,.filter-grid select,.filter-inline select,.buy-filters select,.buy-options select,.account-panel input,.bulk-search textarea{font-size:16px}
  .primary,.secondary,.buy-button,.filter-actions button{min-height:38px}
}

/* Shared phone layout for every admin page. */
@media(max-width:850px){
  html,body{max-width:100%;overflow-x:hidden}
  .main,.content,.content>*{min-width:0}
  .topbar{gap:8px}
  .crumb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .content{width:100%;padding-left:16px;padding-right:16px}
  .demo-banner{flex-wrap:wrap;line-height:1.55}
  .page-head{flex-wrap:wrap;gap:10px}
  .page-head>div{min-width:0;max-width:100%}
  .page-head>button{flex:0 0 auto}
  .filter-panel,.list-panel,.panel{max-width:100%}
  .filters{align-items:stretch;gap:10px}
  .filters label{min-width:0;flex:1 1 180px}
  .filters input,.filters select,.supplier-filters input,.supplier-filters select{max-width:100%;font-size:16px}
  .filter-buttons{flex-wrap:wrap}
  .table-wrap{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .list-top{flex-wrap:wrap;gap:10px}
  .list-top>div:first-child{min-width:0;flex:1 1 200px}
  .table-foot{flex-wrap:wrap;gap:10px}
  .dialog{max-width:100%;max-height:calc(100dvh - 20px);border-radius:12px 12px 0 0}
  .modal-backdrop{align-items:flex-end;justify-content:center;padding:10px 0 0}
  .toast{left:12px;right:12px;bottom:12px;text-align:center}
  .supplier-context,.supplier-tab-content{padding-left:16px;padding-right:16px}
  .supplier-tabs{padding-left:10px;padding-right:10px;-webkit-overflow-scrolling:touch}
  .supplier-config-grid>div{min-width:0;overflow-wrap:anywhere}
  .catalog-layout,.admin-settings-layout{min-width:0}
}
@media(max-width:600px){
  .content{padding:18px 12px}
  .demo-banner{padding:8px 12px}
  .page-head{align-items:flex-start}
  .page-head h1{overflow-wrap:anywhere}
  .page-head>button{white-space:normal;height:auto;min-height:36px;padding:6px 10px}
  .welcome{border-radius:8px}
  .metric-grid,.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric,.quick-grid>button{min-width:0}
  .filters label{flex:1 1 100%;width:100%}
  .filter-buttons{width:100%}
  .filter-buttons button{flex:1;min-height:38px}
  .filter-panel,.list-panel{padding:16px 13px}
  .panel-title{align-items:flex-start;gap:9px}
  .list-top{align-items:flex-start}
  .list-actions{width:100%}
  .list-actions button{width:100%;min-height:38px}
  .commission-summary{gap:8px}
  .supplier-category-settings>div:last-child{gap:8px}
  .supplier-filters{padding:10px}
  .supplier-filters label{min-width:0;flex-basis:100%}
  .supplier-filters>div{width:100%}
  .supplier-filters>div button{flex:1;min-height:38px}
  .supplier-config-heading{align-items:flex-start;flex-wrap:wrap}
  .supplier-config-heading button{width:100%;min-height:38px}
  .admin-settings-title{gap:10px;flex-wrap:wrap}
  .admin-settings-count{white-space:normal}
  .admin-settings-card-head{align-items:flex-start;flex-wrap:wrap;gap:8px}
  .admin-settings-actions{flex-wrap:wrap}
  .admin-settings-actions>small{max-width:100%}
  .linked-node{flex-wrap:wrap;min-width:0}
  .linked-node span{flex:1 1 100%;overflow-wrap:anywhere}
  .row-actions{flex-wrap:wrap}
  footer{gap:7px;flex-wrap:wrap}
}
@media(max-width:380px){
  .topbar{padding-left:10px;padding-right:10px}
  .menu-button{margin-right:3px}
  .crumb{font-size:10px}
  .content{padding-left:10px;padding-right:10px}
  .metric-grid,.quick-grid{gap:8px}
  .metric{padding:12px}
  .metric strong{font-size:22px;overflow-wrap:anywhere}
  .admin-settings-nav button{padding:8px}
  .table-foot{align-items:flex-start}
}