/* ================================================================
   2026-11-01 V18 iOS / Android mobile symmetry layer
   目标：客户手机端保持相同的左右边距、控件高度、输入框/按钮边线与安全区。
   仅在手机宽度生效；不改变业务逻辑。
   ================================================================ */
:root{
  --mobile-page-max:680px;
  --mobile-gutter:12px;
  --mobile-control-h:46px;
  --mobile-control-radius:12px;
  --mobile-safe-left:env(safe-area-inset-left,0px);
  --mobile-safe-right:env(safe-area-inset-right,0px);
  --mobile-safe-top:env(safe-area-inset-top,0px);
  --mobile-safe-bottom:env(safe-area-inset-bottom,0px);
}

@media (max-width:760px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  *,*::before,*::after{box-sizing:border-box}

  /* 常见客户页面容器：左右留白严格一致。 */
  .wrap,.page,.page-body,.main-wrap,.main-content,.content,.form-box,
  .list-container,.merchant-container,.order-list,.mine-page,.login-page,
  .card-container{
    width:100%!important;
    max-width:var(--mobile-page-max)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* 仅修正左右安全区，不覆盖页面自己的上下间距。 */
  .wrap,.page,.page-body,.main-wrap,.main-content,.content,.form-box,
  .list-container,.merchant-container,.order-list{
    padding-left:max(var(--mobile-gutter),var(--mobile-safe-left))!important;
    padding-right:max(var(--mobile-gutter),var(--mobile-safe-right))!important;
  }

  /* iOS/Android 表单基础几何统一，16px 防止 iPhone 聚焦自动放大。 */
  form:not(.search-form):not(.market-search) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]),
  form:not(.search-form):not(.market-search) select,
  form:not(.search-form):not(.market-search) textarea,
  .f-input,.f-textarea,.form-control,.app-input,.w-input,.link-input{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    font-size:16px!important;
    box-sizing:border-box!important;
  }
  form:not(.search-form):not(.market-search) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]),
  form:not(.search-form):not(.market-search) select,
  .f-input,.form-control,.app-input,.w-input,.link-input{
    min-height:var(--mobile-control-h)!important;
  }
  textarea,.f-textarea{min-height:108px}

  button,input[type="button"],input[type="submit"],input[type="reset"],
  .btn,.submit,.btn-submit,.submit-btn,.btn-save,.btn-add,.w-btn,.link-btn,
  .login-btn,.account-login-btn,.wechat-login-btn,.confirm,.modal-close{
    min-height:var(--mobile-control-h)!important;
    box-sizing:border-box!important;
  }
  button,input[type="button"],input[type="submit"],input[type="reset"]{
    -webkit-appearance:none;
    appearance:none;
  }

  /* 标准主提交按钮与输入框使用同一左右边线。 */
  form:not(.search-form):not(.market-search) > .btn,
  form:not(.search-form):not(.market-search) > .submit,
  form:not(.search-form):not(.market-search) > .btn-submit,
  form:not(.search-form):not(.market-search) > .submit-btn,
  form:not(.search-form):not(.market-search) > .btn-save,
  form:not(.search-form):not(.market-search) > .w-btn,
  form:not(.search-form):not(.market-search) > button[type="submit"]{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* 常见双栏输入：两侧严格等宽；超窄机型自动上下排列。 */
  .form-card .row,.form-box .row,.apply-form .row,.field-row,.form-row-pair{
    min-width:0;
  }
  .form-card .row > .field,.form-box .row > .field,.apply-form .row > .field,.field-row > .field,.form-row-pair > *{
    min-width:0;
    flex:1 1 0!important;
  }

  /* 复制链接类控件：输入框与按钮高度一致，不允许按钮被挤变形。 */
  .urlrow,.link-row,.copy-row,.share-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
    align-items:stretch!important;
    width:100%!important;
  }
  .urlrow input,.link-row input,.copy-row input,.share-row input,
  .urlrow button,.link-row button,.copy-row button,.share-row button{
    height:var(--mobile-control-h)!important;
    min-height:var(--mobile-control-h)!important;
    margin:0!important;
  }

  /* 卡片本身保持左右对称，不让内部元素撑破页面。 */
  .card,.form-card,.info-card,.qr-card,.login-card,.profile,.info,.hero,.asset-panel{
    max-width:100%!important;
  }
  .qr img,.qr canvas{max-width:100%!important;height:auto}

  /* 顶部返回栏在带刘海/灵动岛设备上保持同一视觉中心。 */
  .mobile-symmetry-top{
    min-height:calc(52px + var(--mobile-safe-top))!important;
    height:auto!important;
    padding-top:var(--mobile-safe-top)!important;
    padding-left:max(52px,var(--mobile-safe-left))!important;
    padding-right:max(52px,var(--mobile-safe-right))!important;
    position:sticky!important;
    top:0!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:var(--mobile-page-max)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    z-index:980!important;
  }
  .mobile-symmetry-top > a:first-child,
  .mobile-symmetry-top > .back:first-child{
    left:max(16px,var(--mobile-safe-left))!important;
  }

  /* “我的邀请 / 我的积分”专用：统计卡、记录与表单严格对齐。 */
  body.invite-mobile-page .wrap,
  body.points-mobile-page .wrap{
    padding-top:10px!important;
    padding-bottom:calc(24px + var(--mobile-safe-bottom))!important;
  }
  body.invite-mobile-page .hero,
  body.points-mobile-page .hero,
  body.invite-mobile-page .card,
  body.points-mobile-page .card{
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  body.invite-mobile-page .stats{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
  }
  body.invite-mobile-page .stat{min-width:0;text-align:center}
  body.invite-mobile-page .stat b{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
  body.invite-mobile-page .record,
  body.points-mobile-page .item{min-width:0;width:100%}
  body.invite-mobile-page .record-main,
  body.points-mobile-page .item > :first-child{min-width:0}
  body.invite-mobile-page .record-reward,
  body.points-mobile-page .item > :last-child{flex:0 0 auto}

  body.points-mobile-page .row{width:100%!important;margin-left:0!important;margin-right:0!important}
  body.points-mobile-page .input,
  body.points-mobile-page .btn,
  body.points-mobile-page .modal-close{
    width:100%!important;
    height:var(--mobile-control-h)!important;
    min-height:var(--mobile-control-h)!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* 邀请详情：取消旧版仅 Android 固定顶栏，苹果/安卓使用同一结构。 */
  body.invite-detail-mobile-page{padding-top:0!important}
  body.invite-detail-mobile-page .wrap{padding-top:12px!important;padding-bottom:calc(24px + var(--mobile-safe-bottom))!important}
  body.invite-detail-mobile-page .profile,
  body.invite-detail-mobile-page .info{width:100%;margin-left:0!important;margin-right:0!important}
  body.invite-detail-mobile-page .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  body.invite-detail-mobile-page .stat{min-width:0;text-align:center}
  body.invite-detail-mobile-page .row{min-width:0;align-items:flex-start}
  body.invite-detail-mobile-page .row > span:first-child{flex:0 0 40%;min-width:0}
  body.invite-detail-mobile-page .row > b{flex:1;min-width:0;text-align:right;overflow-wrap:anywhere}
}

@media (max-width:430px){
  :root{--mobile-gutter:10px}
  .urlrow,.link-row,.copy-row,.share-row{
    grid-template-columns:1fr!important;
  }
  .urlrow button,.link-row button,.copy-row button,.share-row button{
    width:100%!important;
  }
  body.invite-mobile-page .stats{gap:6px!important}
  body.invite-mobile-page .stat{padding-left:6px!important;padding-right:6px!important}
}

@media (max-width:360px){
  .form-card .row,.form-box .row,.apply-form .row,.field-row,.form-row-pair{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  body.invite-detail-mobile-page .row{gap:10px!important}
  body.invite-detail-mobile-page .row > span:first-child{flex-basis:36%}
}