/* 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:960px){
  body[data-view="user"] .guest-hero{padding:44px 42px;grid-template-columns:1fr .8fr}
  body[data-view="user"] .guest-visual{transform:scale(.86);transform-origin:center right}
  body[data-view="user"] .auth-layout{gap:38px}
  body[data-view="user"] .auth-card{padding:30px}
  body[data-view="user"] .guest-feature-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  body[data-view="user"] .guest-nav{width:calc(100% - 36px);height:68px}
  body[data-view="user"] .guest-links{display:none}
  body[data-view="user"] .guest-nav-actions{gap:12px}
  body[data-view="user"] .guest-register{padding:10px 12px;font-size:10px}
  body[data-view="user"] .guest-login{font-size:11px}
  body[data-view="user"] .guest-brand-mark{width:36px;height:36px;border-radius:12px;font-size:22px}
  body[data-view="user"] .guest-brand strong{font-size:16px}
  body[data-view="user"] .guest-hero{width:calc(100% - 28px);min-height:0;margin-top:5px;padding:31px 24px 15px;border-radius:22px;display:block}
  body[data-view="user"] .guest-hero h1{margin:18px 0 12px;font-size:38px}
  body[data-view="user"] .guest-hero-copy>p{font-size:12px}
  body[data-view="user"] .guest-hero-actions{gap:10px;flex-wrap:wrap;margin-top:21px}
  body[data-view="user"] .guest-cta{padding:12px 14px;font-size:11px}
  body[data-view="user"] .guest-cta-quiet{font-size:10px}
  body[data-view="user"] .guest-proof{gap:7px;margin-top:25px;font-size:8px}
  body[data-view="user"] .guest-proof i{width:13px}
  body[data-view="user"] .guest-visual{height:225px;margin:8px -15px -5px;transform:scale(.76);transform-origin:center center}
  body[data-view="user"] .visual-panel{width:285px}
  body[data-view="user"] .visual-note{right:2px;bottom:0}
  body[data-view="user"] .guest-features,body[data-view="user"] .guest-guide{width:calc(100% - 36px);margin-top:54px}
  body[data-view="user"] .guest-section-heading h2{font-size:23px}
  body[data-view="user"] .guest-feature-grid{gap:10px;margin-top:22px}
  body[data-view="user"] .guest-feature-grid article{min-height:165px;padding:16px 14px;border-radius:14px}
  body[data-view="user"] .feature-icon{width:34px;height:34px}
  body[data-view="user"] .guest-feature-grid h3{margin-top:13px}
  body[data-view="user"] .guest-feature-grid p{font-size:9px}
  body[data-view="user"] .guest-guide{grid-template-columns:1fr;gap:18px;padding:25px 20px;border-radius:18px}
  body[data-view="user"] .guest-guide h2{font-size:26px}
  body[data-view="user"] .guide-steps article{gap:10px;padding:12px}
  body[data-view="user"] .guest-footer{width:calc(100% - 36px);margin-top:25px;padding-bottom:20px;gap:14px;font-size:8px}
  body[data-view="user"] .auth-layout{width:calc(100% - 36px);min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:18px 0 26px}
  body[data-view="user"] .auth-story{min-height:0;padding:14px 0 8px}
  body[data-view="user"] .auth-story h1{margin:14px 0 8px;font-size:31px!important}
  body[data-view="user"] .auth-story>p{margin-bottom:0;font-size:11px}
  body[data-view="user"] .auth-steps,body[data-view="user"] .auth-decoration{display:none}
  body[data-view="user"] .auth-card{padding:24px 22px;border-radius:18px}
  body[data-view="user"] .auth-card h2{font-size:22px}
  body[data-view="user"] .guest-footer{margin-top:8px}
}
@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 input,.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}
}

@media(max-width:700px){
  body[data-view="user"] .modal:not(.buy-modal){width:100%;max-width:100%;max-height:min(90dvh,780px);border-radius:18px 18px 0 0}
  body[data-view="user"] .modal:not(.buy-modal) .modal-head{padding:20px 20px 16px}
  body[data-view="user"] .modal:not(.buy-modal) .remark-form,body[data-view="user"] .modal:not(.buy-modal) .info-body{padding:18px 20px 22px}
  body[data-view="user"] .modal:not(.buy-modal) .modal-actions{padding:14px 20px max(18px,env(safe-area-inset-bottom))}
  body[data-view="user"] .modal:not(.buy-modal) .remark-form input,body[data-view="user"] .modal:not(.buy-modal) .remark-form select,body[data-view="user"] .modal:not(.buy-modal) .info-body select{font-size:16px}
}

/* Vue user center: keep the newer page layouts inside the phone viewport. */
@media(max-width:700px){
  body[data-view="user"] .layout{min-width:0;min-height:100dvh}
  body[data-view="user"] .topbar{left:0;right:0;width:auto;z-index:40}
  body[data-view="user"] .sidebar{max-height:calc(100dvh - 58px);overflow:hidden}
  body[data-view="user"] .sidebar.open{z-index:35}
  body[data-view="user"] .sidebar nav{min-height:0}
  body[data-view="user"] .main{width:100%;min-width:0;margin-left:0}
  body[data-view="user"] .content{width:100%;min-width:0}
  body[data-view="user"] .content{padding-bottom:max(22px,env(safe-area-inset-bottom))}
  body[data-view="user"] .node-filter-grid{display:grid;grid-template-columns:minmax(0,1fr);overflow:visible}
  body[data-view="user"] .node-filter-grid>label{min-width:0;width:100%}
  body[data-view="user"] .gold-actions{width:100%;flex-wrap:wrap;gap:8px}
  body[data-view="user"] .gold-actions button{min-width:0;flex:1 1 130px}
  body[data-view="user"] .wallet-strip{gap:12px;flex-wrap:wrap;padding:18px 16px}
  body[data-view="user"] .wallet-strip .gold-actions{margin-top:0}
  body[data-view="user"] .wallet-mark{right:12px}
  body[data-view="user"] .account-stats{grid-template-columns:minmax(0,1fr)}
  body[data-view="user"] .account-grid{grid-template-columns:minmax(0,1fr)}
  body[data-view="user"] .table-scroll{max-width:100%;overscroll-behavior-x:contain}
  body[data-view="user"] .table-foot>span:last-child{max-width:100%;overflow-wrap:anywhere}
  body[data-view="user"] .action-bar button{flex:1 1 calc(50% - 9px);white-space:normal}
  body[data-view="user"] .promotion-banner{min-height:270px}
  body[data-view="user"] .promotion-banner>div:first-child{padding-bottom:146px}
  body[data-view="user"] .promotion-banner-link{top:auto;right:16px;bottom:14px;left:16px;width:auto;gap:6px;padding:10px 11px;transform:none}
  body[data-view="user"] .promotion-link-caption span{display:none}
  body[data-view="user"] .promotion-link-control{gap:6px}
  body[data-view="user"] .promotion-banner-link input{height:32px;font-size:10px}
  body[data-view="user"] .promotion-banner-link button{height:32px;min-width:64px}
}

@media(max-width:380px){
  body[data-view="user"] .top-brand small{display:none}
  body[data-view="user"] .top-summary{gap:5px}
  body[data-view="user"] .recharge-top{min-width:48px}
  body[data-view="user"] .profile{padding-right:4px}
}

/* 手机端顶栏：品牌名保持单行，不再折成「服务平/台」 */
@media(max-width:700px){
  body[data-view="user"] .top-brand{min-width:0;flex:0 1 auto;white-space:nowrap;gap:8px}
  body[data-view="user"] .top-brand strong{white-space:nowrap}
  body[data-view="user"] .top-brand small{display:none}
  body[data-view="user"] .top-summary{flex:1 1 auto;min-width:0;justify-content:flex-end}
  body[data-view="user"] .profile{min-width:0;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* 节点筛选在手机端两列排布，少占一屏 */
@media(max-width:700px){
  body[data-view="user"] .node-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
  body[data-view="user"] .node-filter-grid>label{min-width:0;width:auto}
}