/* 手机网页版补充适配：仅处理窄屏排版，不改变桌面端与业务逻辑。 */
@media (max-width:760px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{min-width:0}
  .auth-shell:not([hidden])~.app{height:100dvh;overflow:hidden}
  .app,main,.page,.panel,.bill-layout,.bill-builder,.record-list,.timeline,.sources{min-width:0}

  header{padding-inline:12px;gap:8px}
  header>div{min-width:0;gap:6px}
  header strong{max-width:112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .menu{flex:0 0 auto;width:40px;height:40px;border-radius:9px}
  .warehouse-switcher{min-width:0;max-width:138px}
  .warehouse-switcher select{min-width:0;max-width:122px;text-overflow:ellipsis}

  aside{width:min(86vw,300px);max-width:300px;box-shadow:18px 0 38px rgba(15,23,42,.24)}
  html[data-theme="sage"] aside .brand strong,
  html[data-theme="sage"] aside .user strong,
  html[data-theme="mono"] aside .brand strong,
  html[data-theme="mono"] aside .user strong{color:var(--ink-1)}
  .page,html[data-theme] .page{padding:16px 12px 26px}
  .heading,.panel-head,.section-head,.surcharge-head{align-items:flex-start;flex-wrap:wrap;gap:10px}
  .heading>div:first-child,.panel-head>div:first-child,.section-head>div:first-child{min-width:0}
  .heading p,.panel-head p,.section-head p{overflow-wrap:anywhere}
  .heading>div:last-child:not(:first-child){display:flex;width:100%;flex-wrap:wrap}
  .heading .primary,.heading .secondary{display:inline-flex;flex:1 1 132px;justify-content:center;min-width:0}

  .panel,.bill-builder{padding:14px}
  .rule-summary{grid-template-columns:1fr}
  .record-list>article,.timeline article,.sources article{padding:14px;gap:12px}
  .record-list>article>span:nth-child(2),.sources article>span{min-width:calc(100% - 52px);overflow-wrap:anywhere}
  .source-actions,.pricing-actions,.bill-actions,.bill-statuses{margin-left:0!important}
  .source-actions,.pricing-actions,.bill-actions{display:flex;flex-flow:row wrap;align-items:center;gap:8px}
  .pricing-actions>strong{width:100%}

  .toolbar{align-items:stretch}
  .toolbar>button,.toolbar>.secondary{flex:1 1 120px}
  .tablewrap,.access-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tablewrap table,.access-table table{min-width:max-content}

  .backdrop{align-items:center;padding:8px}
  .modal,html[data-theme] .modal,.pricing-modal,.pricing-import-modal{
    width:100%;
    max-width:none;
    max-height:calc(100dvh - 16px);
    overflow:auto;
    overscroll-behavior:contain;
  }
  .modal-head{position:sticky;top:0;z-index:5;background:var(--bg,#fff)}
  .modal-foot{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;background:var(--bg,#fff)}
  .modal-foot .primary,.modal-foot .secondary{flex:1 1 120px;min-width:0;min-height:44px}
  .toast{left:12px;right:12px;bottom:12px;max-width:none}
}

@media (max-width:430px){
  .auth-shell{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    overflow-y:auto;
    padding:18px 14px calc(24px + env(safe-area-inset-bottom));
  }
  .auth-shell::before{inset:0 0 auto;height:190px}
  .auth-brand{
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    margin:14px auto 82px;
    gap:10px;
  }
  .auth-brand strong{font-size:18px}
  .auth-brand small{font-size:10px;white-space:nowrap}
  .auth-card{width:100%;margin:0;padding:20px;border-radius:16px}
  .auth-card h1{font-size:23px}
  .auth-card form{margin:20px 0 14px}

  .page,html[data-theme] .page{padding-inline:10px}
  .panel,.bill-builder{padding:13px}
  .heading h1{font-size:21px}
  .primary,.secondary{padding-inline:10px}
  .steps{padding-inline:10px}
  .steps i{margin-inline:6px}
  .confirm-card dl div{align-items:flex-start;flex-direction:column;gap:4px}
  .confirm-card dt{width:auto}
  .choices button{min-width:0}
  .pagination{align-items:flex-start;flex-direction:column;gap:10px}
}