/* Viewport-based adaptation: no device-name or physical-pixel assumptions. */
:root{
  --xn-safe-top:env(safe-area-inset-top,0px);
  --xn-safe-right:env(safe-area-inset-right,0px);
  --xn-safe-bottom:env(safe-area-inset-bottom,0px);
  --xn-safe-left:env(safe-area-inset-left,0px);
  --xn-content-gutter:3rem;
  --xn-back-gap:1.5rem;
  --xn-bag-top:2.5rem;
  --xn-bag-side:2rem;
}
@media(max-width:1100px){:root{--xn-content-gutter:2rem;}}
@media(max-width:900px){:root{--xn-content-gutter:1.5rem;--xn-back-gap:1rem;}}
@media(max-width:600px){:root{--xn-content-gutter:1.2rem;--xn-back-gap:0.8rem;--xn-bag-top:2rem;--xn-bag-side:1.3rem;}}
.container{
  padding-left:max(var(--xn-content-gutter),var(--xn-safe-left));
  padding-right:max(var(--xn-content-gutter),var(--xn-safe-right));
}
.back-portal{
  top:calc(var(--xn-back-gap) + var(--xn-safe-top));
  left:calc(var(--xn-back-gap) + var(--xn-safe-left));
}
/* Mid-width windows must not clip shop category buttons. */
@media(min-width:601px) and (max-width:1000px){
  .mood-tags{flex-wrap:wrap;}
}
/* Keep sheets within independently changing insets on all four edges. */
.auth-modal,.mine-modal,.mine-refund-modal{
  padding-top:max(12px,var(--xn-safe-top));
  padding-right:max(12px,var(--xn-safe-right));
  padding-bottom:max(12px,var(--xn-safe-bottom));
  padding-left:max(12px,var(--xn-safe-left));
}
.auth-box,.mine-box,.mine-refund-dialog{
  min-width:0;
  max-height:calc(100vh - max(12px,var(--xn-safe-top)) - max(12px,var(--xn-safe-bottom)));
  max-height:calc(100dvh - max(12px,var(--xn-safe-top)) - max(12px,var(--xn-safe-bottom)));
}
.bag-panel-inner{
  padding-top:max(var(--xn-bag-top),calc(var(--xn-safe-top) + 1rem));
  padding-left:max(var(--xn-bag-side),calc(var(--xn-safe-left) + 0.5rem));
  padding-bottom:max(var(--xn-bag-side),calc(var(--xn-safe-bottom) + 0.5rem));
}
.pd-modal,.vendor-modal{
  padding-top:max(12px,var(--xn-safe-top));
  padding-right:max(12px,var(--xn-safe-right));
  padding-bottom:max(12px,var(--xn-safe-bottom));
  padding-left:max(12px,var(--xn-safe-left));
}
.vendor-modal-inner{
  max-height:calc(100dvh - max(12px,var(--xn-safe-top)) - max(12px,var(--xn-safe-bottom)));
}
.bag-panel-inner > .bag-close{top:max(1.2rem,calc(var(--xn-safe-top) + 0.25rem));}
@media(hover:none) and (pointer:coarse){
  /* A wide touch screen is still a phone: avoid input-focus zoom. */
  .auth-input,.mine-refund-field input,.mine-refund-field textarea{font-size:16px;}
  .auth-close,.bag-close,.mine-refund-close{min-width:44px;min-height:44px;}
}
@media(max-width:600px){
  .auth-box{border-radius:16px;}
}