/* Touch-first account and service flows. Desktop layouts above 1024 px stay intact. */
@media (max-width:1024px){
  .account-input>input,
  .ui-field input:not([type="checkbox"]):not([type="radio"]),
  .ui-field select,.ui-field textarea,
  .service-modal .catalog-search input{font-size:16px;scroll-margin-block:20px}
  .account-input>input{min-width:0}
  .ui-form-columns{min-width:0}
  .ui-field input[type="date"]{min-width:0;max-width:100%;appearance:none}
  .service-modal .ui-summary dd,
  .service-modal .ui-status,.service-modal .ui-note,
  .service-modal .df-error,.service-modal .df-field-error{overflow-wrap:anywhere}
  .service-modal .ui-field select{padding-right:38px}
  .service-modal .df-eye{min-width:44px;min-height:44px;right:3px;padding:8px}
  .service-modal .df-input-wrap input{padding-right:54px}
  .service-modal .ui-form>.btn,
  .service-modal .ui-wide{min-height:48px}
  .service-close{flex:0 0 44px;min-width:44px;min-height:44px}
}

@media (min-width:761px) and (max-width:1024px) and (min-height:501px){
  dialog.account-modal{--account-field-size:48px;--account-action-size:46px;--account-label-size:13px;--account-helper-size:12px;--account-gap:12px;width:min(520px,calc(100vw - 48px));height:min(800px,calc(100dvh - 40px))}
  dialog.account-modal .account-input>input{font-size:16px}
  dialog.account-modal .account-password-toggle{width:44px;height:44px}
  dialog.account-modal .account-consent>input{width:20px;height:20px}
  dialog.account-modal .account-social-button{min-height:46px;font-size:12px}
  dialog.account-modal .account-forgot,
  dialog.account-modal .account-referral summary,
  dialog.account-modal .account-demo-fill{min-height:44px;font-size:12px}
  dialog.account-modal .account-close{width:44px;height:44px}
  .service-modal{max-height:calc(100dvh - 40px)}
  .service-modal-content{padding:24px;min-height:0}
}

@media (max-width:760px), (max-width:1024px) and (max-height:500px) and (orientation:landscape){
  /* Compact actions are sheets; longer account, payment and multi-step flows use the screen. */
  dialog.service-modal{
    inset:auto 0 0;margin:0;width:100%;max-width:100%;
    height:auto;max-height:calc(100vh - 12px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - 12px);
    border:1px solid #455653;border-bottom:0;border-radius:22px 22px 0 0;
    overflow:hidden;overscroll-behavior:contain
  }
  dialog.service-modal:is(.service-modal-wallet,.service-modal-wide,.service-modal-support),
  dialog.service-modal:has(.df-flow){
    inset:0;margin:0;width:100%;max-width:100%;height:100vh;height:100dvh;
    max-height:100vh;max-height:100dvh;border:0;border-radius:0
  }
  .service-modal-header{gap:12px;padding:16px max(16px,env(safe-area-inset-right,0px)) 14px max(16px,env(safe-area-inset-left,0px));align-items:center}
  .service-modal-header>div{min-width:0}
  .service-modal-header h1{font-size:20px;line-height:1.4;margin-top:5px;overflow-wrap:anywhere}
  .service-modal-header>div>span{font-size:9px;letter-spacing:1.6px}
  .service-modal:is(.service-modal-wallet,.service-modal-wide,.service-modal-support) .service-modal-header,
  .service-modal:has(.df-flow) .service-modal-header{padding-top:calc(14px + env(safe-area-inset-top,0px))}
  .service-close{width:44px;height:44px;border-radius:12px}
  .service-modal-content{
    flex:1 1 auto;min-height:0;min-width:0;max-width:100%;
    padding:20px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));
    overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;scrollbar-gutter:auto;scroll-padding-block:20px
  }
  .service-modal>.ui-preview-note{padding:12px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));font-size:11px;line-height:1.6}
  .service-modal .ui-form{gap:16px}
  .service-modal .ui-form-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .ui-field>span,.ui-field-label{font-size:13px;line-height:1.5}
  .ui-field input:not([type="checkbox"]):not([type="radio"]),
  .ui-field select,.ui-field textarea{min-height:48px;font-size:16px;padding-block:11px;line-height:1.5}
  .ui-field textarea{min-height:120px}
  .service-modal .ui-code-field{gap:8px;align-items:flex-end}
  .service-modal .ui-code-field>.ui-field{min-width:0}
  .service-modal .ui-code-field>.btn{flex-shrink:0;min-height:48px;padding-inline:12px;font-size:12px}
  .service-modal .btn{min-height:44px;white-space:normal;line-height:1.5}
  .service-modal .ui-tabs{gap:8px;margin:0 0 20px;padding-bottom:8px}
  .service-modal .ui-tab{min-height:44px;white-space:nowrap;font-size:13px;padding-inline:16px}
  .service-modal .ui-gate{padding:16px 0 8px}
  .service-modal .ui-gate h2{font-size:22px}
  .service-modal .ui-gate p{font-size:14px;line-height:1.8}
  .service-modal .ui-gate-actions{gap:10px}
  .service-modal .ui-gate-actions .btn{flex:1;min-width:0;padding-inline:12px}
  .service-modal .ui-preview-entry{min-height:44px;font-size:12px}
  .service-modal .ui-dialog-links{flex-wrap:wrap;gap:8px 16px;margin-top:18px}
  .service-modal .ui-dialog-links a{min-height:44px;display:inline-flex;align-items:center}
  .service-modal .ui-wallet-balance{gap:8px;flex-wrap:wrap;padding:14px;margin-bottom:20px}
  .service-modal .ui-wallet-balance>strong{font-size:22px;line-height:1.4;overflow-wrap:anywhere}
  .service-modal .ui-summary{gap:12px;margin:20px 0;padding-block:16px;font-size:13px}
  .service-modal .ui-summary>div{gap:14px;align-items:flex-start}
  .service-modal .ui-summary dt{flex:0 0 auto;max-width:45%}
  .service-modal .ui-summary dd{min-width:0;line-height:1.65}
  .service-modal .ui-copy-row{gap:8px;align-items:stretch}
  .service-modal .ui-copy-row output{min-width:0;padding:12px;font-size:14px;line-height:1.7;overflow-wrap:anywhere}
  .service-modal .ui-copy-row .btn{flex-shrink:0;min-height:48px;padding-inline:12px}
  .service-modal .ui-search-results{grid-template-columns:1fr;gap:10px}
  .service-modal .ui-search-results>a{min-height:76px;padding:12px}
  .service-modal .ui-search-results strong{white-space:normal;font-size:13px;line-height:1.5}
  .service-modal .ui-support-option{min-height:60px;padding:15px;font-size:14px}
  .service-modal .ui-avatars{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 8px}
  .service-modal .ui-avatar-choice{width:54px;height:54px}

  /* A form may be taller than the screen: retain its controls and scroll the content area. */
  dialog.account-modal{
    --account-banner-size:132px;--account-tabs-size:48px;--account-field-size:48px;
    --account-action-size:48px;--account-gap:14px;--account-field-gap:6px;
    --account-inset:20px;--account-content-inset:20px;--account-label-size:13px;--account-helper-size:12px;
    inset:0;margin:0;width:100%;max-width:100%;height:100vh;height:100dvh;
    max-height:100vh;max-height:100dvh;border:0;border-radius:0;overscroll-behavior:contain
  }
  dialog.account-modal .account-banner.account-banner-carousel{height:calc(var(--account-banner-size) + env(safe-area-inset-top,0px));flex-basis:calc(var(--account-banner-size) + env(safe-area-inset-top,0px))}
  dialog.account-modal .account-banner-slide{padding:calc(18px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) 32px max(20px,env(safe-area-inset-left,0px));align-items:center}
  dialog.account-modal .account-banner-copy{max-width:calc(100% - 42px)}
  dialog.account-modal .account-banner-copy>span{font-size:9px;letter-spacing:1.3px}
  dialog.account-modal .account-banner-copy h3{font-size:23px;line-height:1.25;margin:5px 0 6px}
  dialog.account-modal .account-banner-copy h3 br{display:none}
  dialog.account-modal .account-banner-copy p{display:block;font-size:11px;line-height:1.5;margin:0}
  dialog.account-modal .account-close{width:44px;height:44px;right:max(12px,env(safe-area-inset-right,0px));top:calc(10px + env(safe-area-inset-top,0px));border-radius:12px}
  dialog.account-modal .account-banner .bn-pagination{left:max(12px,env(safe-area-inset-left,0px));bottom:0}
  dialog.account-modal .account-banner .bn-dot{width:36px;height:32px}
  dialog.account-modal .account-tabs{margin-inline:max(var(--account-inset),env(safe-area-inset-left,0px)) max(var(--account-inset),env(safe-area-inset-right,0px));gap:14px}
  dialog.account-modal .account-tab{min-height:48px;font-size:15px}
  dialog.account-modal .account-content{padding:20px max(var(--account-inset),env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(var(--account-inset),env(safe-area-inset-left,0px));min-height:0;scroll-padding-block:20px;overflow-x:hidden;overflow-y:auto}
  dialog.account-modal .account-panel{flex:1 0 auto;justify-content:flex-start}
  dialog.account-modal .account-form{justify-content:flex-start;gap:14px;flex:1 0 auto}
  dialog.account-modal .account-actions{gap:14px;margin-top:4px}
  dialog.account-modal .account-input>input{font-size:16px;line-height:1.5;padding:10px 12px}
  dialog.account-modal .account-input>input::placeholder{font-size:14px}
  dialog.account-modal .account-identity-heading{gap:8px;min-height:24px}
  dialog.account-modal .account-identity-heading select{font-size:12px;min-height:32px;max-width:158px;padding-right:24px}
  dialog.account-modal .account-password-toggle{width:44px;height:44px;flex-basis:44px}
  dialog.account-modal .account-forgot,
  dialog.account-modal .account-referral summary{min-height:44px;font-size:13px;line-height:1.5}
  dialog.account-modal .account-referral .account-input{margin-top:6px}
  dialog.account-modal .account-consents{gap:12px}
  dialog.account-modal .account-consent{gap:10px;min-height:44px;font-size:12px;line-height:1.75;align-items:flex-start}
  dialog.account-modal .account-consent>input{width:22px;height:22px;flex:0 0 22px;margin-top:3px}
  dialog.account-modal .account-submit{min-height:48px;font-size:15px}
  dialog.account-modal .account-social{gap:12px}
  dialog.account-modal .account-social-divider{font-size:11px;line-height:1.5}
  dialog.account-modal .account-social-buttons{gap:8px}
  dialog.account-modal .account-social-button{min-height:48px;padding:9px 5px;gap:6px;font-size:11px}
  dialog.account-modal .account-brand-icon{width:20px;height:20px}
  dialog.account-modal .account-demo-fill{min-height:44px;font-size:12px;padding:8px}
  dialog.account-modal .account-preview-note{font-size:11px;line-height:1.7;margin-top:18px}
  dialog.account-modal .form-status{font-size:12px;line-height:1.7;padding:12px}

  .df-flow{min-height:0}
  .df-stepper{gap:4px;margin:0 0 24px}
  .df-stepper>span{min-width:0}
  .df-stepper b{width:30px;height:30px;font-size:12px;flex-shrink:0}
  .df-stepper>span:not(:last-child):after{top:15px;left:calc(50% + 18px);right:calc(-50% + 13px)}
  .df-stepper small{font-size:10px;line-height:1.5;margin-top:8px;max-width:76px;word-break:normal;overflow-wrap:anywhere}
  .df-lead{font-size:14px;line-height:1.85;margin-bottom:20px}
  .df-form-foot,.df-flow-footer{gap:10px;flex-wrap:wrap}
  .df-form-foot>span,.df-flow-footer>span{font-size:11px;line-height:1.5;max-width:none}
  .df-form-foot .text-link,.df-flow-footer .text-link,
  .df-back,.df-resend .text-link,.df-mail .text-link{min-height:44px;font-size:12px;display:inline-flex;align-items:center}
  .df-flow-footer{margin-top:24px;padding-top:14px}
  .df-field-error{font-size:12px;line-height:1.6}
  .df-code-destination{padding:14px;gap:12px;align-items:flex-start;font-size:13px;overflow-wrap:anywhere}
  .df-code-destination>div{min-width:0}
  .df-code-destination>.icon{flex-shrink:0}
  .df-code-destination small{font-size:11px;line-height:1.6}
  .df-resend{gap:8px 14px;font-size:11px}
  .df-password-rules{font-size:12px;line-height:1.8}
  .df-percents{gap:8px;grid-template-columns:repeat(4,minmax(0,1fr))}
  .df-percents .btn{min-height:44px;font-size:12px}
  .df-verification-methods{gap:8px;flex-wrap:wrap}
  .df-verification-methods>span{padding:10px;min-height:44px;font-size:12px}
  .df-noqr{padding:24px 16px;min-height:156px;overflow-wrap:anywhere}
  .df-noqr small{font-size:11px;line-height:1.7;text-align:center}
  .df-result h2{font-size:24px;line-height:1.45}
  .df-result p,.df-mail p,.df-wait p,.df-pair p{font-size:14px;line-height:1.8;overflow-wrap:anywhere}
  .df-result .btn{min-height:48px}
  .df-record-value{font-size:clamp(24px,7.5vw,34px);overflow-wrap:anywhere}
}

@media (max-width:360px){
  dialog.account-modal{--account-inset:16px}
  dialog.account-modal .account-content{padding-top:16px}
  dialog.account-modal .account-banner-copy h3{font-size:21px}
  dialog.account-modal .account-social-button{flex-direction:column;gap:4px;min-height:62px;font-size:11px}
  .service-modal .ui-form-columns{grid-template-columns:minmax(0,1fr)}
  .service-modal .ui-avatar-choice{width:50px;height:50px}
  .service-modal .ui-code-field>.btn{padding-inline:10px}
  .df-flow-footer>span{width:100%;text-align:left}
}

/* Landscape and keyboard-compressed screens keep a small fixed header and a scrollable form. */
@media (max-width:1024px) and (max-height:560px){
  dialog.account-modal{--account-banner-size:76px;--account-tabs-size:44px;--account-field-size:48px;--account-action-size:48px;--account-gap:12px}
  dialog.account-modal .account-banner-slide{padding-top:calc(12px + env(safe-area-inset-top,0px));padding-bottom:22px}
  dialog.account-modal .account-banner-copy>span,
  dialog.account-modal .account-banner-copy p{display:none}
  dialog.account-modal .account-banner-copy h3{font-size:22px;margin:0}
  dialog.account-modal .account-banner-copy h3 br{display:none}
  dialog.account-modal .account-close{width:44px;height:44px;top:calc(8px + env(safe-area-inset-top,0px))}
  dialog.account-modal .account-content{padding-top:14px;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  .service-modal-header{padding-block:10px}
  .service-modal-header h1{font-size:18px;margin-top:3px}
  .service-modal-content{padding-top:16px;padding-bottom:20px}
  .service-modal>.ui-preview-note{padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .df-stepper{margin-bottom:18px}
}

/* Visual viewport fallback also leaves room when the on-screen keyboard is open. */
@media (max-width:760px), (max-width:1024px) and (max-height:500px) and (orientation:landscape){
 dialog.service-modal{max-height:calc(var(--mobile-viewport-height,100dvh) - env(safe-area-inset-top,0px) - 12px)}
 dialog.account-modal,dialog.service-modal:is(.service-modal-wallet,.service-modal-wide,.service-modal-support),dialog.service-modal:has(.df-flow){height:var(--mobile-viewport-height,100dvh);max-height:var(--mobile-viewport-height,100dvh)}
}