/* System UI and Telegram controls are separate layers; only system sources
   overlap. Do not add env(safe-area-inset-*) twice or discard Telegram controls. */
html[data-lock-zoom="true"]{touch-action:pan-x pan-y}
.payment-handoff{box-sizing:border-box;width:min(460px,calc(100vw - var(--app-safe-left,0px) - var(--app-safe-right,0px) - 32px));max-height:calc(100dvh - var(--app-safe-top,0px) - var(--app-safe-bottom,0px) - 32px);inset:var(--app-safe-top,0px) var(--app-safe-right,0px) var(--app-safe-bottom,0px) var(--app-safe-left,0px);margin:auto;padding:24px;border:1px solid #d3a752;border-radius:16px;background:#171918;color:#f5f2eb;font:16px/1.5 system-ui,sans-serif;overflow:auto}
.payment-handoff::backdrop{background:rgba(0,0,0,.7)}
.payment-handoff h2{font-size:23px;margin:0 0 12px}.payment-handoff p{margin:0 0 20px}
.payment-handoff a,.payment-handoff button{display:block;box-sizing:border-box;width:100%;padding:12px 18px;text-align:center;text-decoration:none;font:inherit;border-radius:9px;cursor:pointer}
.payment-handoff a{background:#d3a752;color:#171918;margin-bottom:10px}.payment-handoff button{background:transparent;color:inherit;border:1px solid #777}
@media(max-width:900px),(pointer:coarse){
  html[data-lock-zoom="true"] :is(input,select,textarea){font-size:16px!important}
}
:root[data-safe-shell] {
  --app-safe-top:calc(max(env(safe-area-inset-top,0px),var(--app-device-top,var(--tg-safe-area-inset-top,0px))) + var(--app-content-top,var(--tg-content-safe-area-inset-top,0px)));
  --app-safe-right:calc(max(env(safe-area-inset-right,0px),var(--app-device-right,var(--tg-safe-area-inset-right,0px))) + var(--app-content-right,var(--tg-content-safe-area-inset-right,0px)));
  --app-safe-bottom:calc(max(env(safe-area-inset-bottom,0px),var(--app-device-bottom,var(--tg-safe-area-inset-bottom,0px))) + var(--app-content-bottom,var(--tg-content-safe-area-inset-bottom,0px)));
  --app-safe-left:calc(max(env(safe-area-inset-left,0px),var(--app-device-left,var(--tg-safe-area-inset-left,0px))) + var(--app-content-left,var(--tg-content-safe-area-inset-left,0px)));
  --hws-safe-top:var(--app-safe-top);--hws-safe-right:var(--app-safe-right);--hws-safe-bottom:var(--app-safe-bottom);--hws-safe-left:var(--app-safe-left);
  --admin-safe-top:var(--app-safe-top);--admin-safe-right:var(--app-safe-right);--admin-safe-bottom:var(--app-safe-bottom);--admin-safe-left:var(--app-safe-left);
  --mu-safe-top:var(--app-safe-top);--mu-safe-right:var(--app-safe-right);--mu-safe-left:var(--app-safe-left);
  scroll-padding-top:calc(var(--app-safe-top) + 90px);
  scroll-padding-bottom:calc(var(--app-safe-bottom) + 16px);
}
/* Keep scrolled content and tap targets out of the native controls strip. */
html[data-safe-shell]::before{content:"";position:fixed;inset:0 0 auto;height:var(--app-safe-top);z-index:2147483000;background:var(--paper,var(--bg,#0c0d0f))}
html[data-safe-shell]:not([data-safe-shell="studio"]):not([data-safe-shell="admin"]):not([data-safe-shell="machine"]) body {
  box-sizing:border-box;
  padding-top:var(--app-safe-top);
  padding-right:var(--app-safe-right);
  padding-bottom:var(--app-safe-bottom);
  padding-left:var(--app-safe-left);
}
/* Fixed/sticky headers need their own offset when the document scrolls. */
html[data-safe-shell="site"] .site-header,
html[data-safe-shell="about"] .site-header,
html[data-safe-shell="glyph"] body>header,
html[data-safe-shell="sender"] .topbar,
html[data-safe-shell="legacy"] .topbar {top:var(--app-safe-top)}
html[data-safe-shell="about"] .site-header {left:var(--app-safe-left);right:var(--app-safe-right)}
html[data-safe-shell="about"] .site-header::before,
html[data-safe-shell="site"] .site-header::before,
html[data-safe-shell="sender"] .topbar::before,
html[data-safe-shell="glyph"] body>header::before {
  content:"";position:absolute;bottom:100%;left:calc(-1 * var(--app-safe-left));right:calc(-1 * var(--app-safe-right));
  height:var(--app-safe-top);background:var(--paper,var(--bg,#0c0b0a));pointer-events:none;
}
html[data-safe-shell="about"] .site-header::before{background:#0c0b0a}
html[data-safe-shell="flow"] .service-header{padding-top:26px}
html[data-safe-shell="public"] main{padding-bottom:0}
html[data-safe-shell="machine"] .wrap{padding-bottom:calc(42px + var(--app-safe-bottom));padding-left:max(clamp(20px,4vw,46px),var(--app-safe-left));padding-right:max(clamp(20px,4vw,46px),var(--app-safe-right))}
html[data-safe-shell="sender"] #prep-banner{top:calc(61px + var(--app-safe-top))}
html[data-safe-shell="denied"] body{padding:calc(24px + var(--app-safe-top)) calc(24px + var(--app-safe-right)) calc(24px + var(--app-safe-bottom)) calc(24px + var(--app-safe-left))}
html[data-safe-shell="legacy"] .sidebar{top:var(--app-safe-top);height:calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom))}
html[data-safe-shell="plain"] body>header{top:var(--app-safe-top)}
@media(max-width:1020px){
  html[data-safe-shell="legacy"] .sidebar{top:auto;height:auto;left:var(--app-safe-left);right:var(--app-safe-right);padding-bottom:calc(6px + var(--app-safe-bottom))}
}
html[data-safe-shell] :is(#loginModal,.machine-access-modal,.work-picker-overlay,#no-serial-banner,.app-sheet-backdrop){
  box-sizing:border-box;padding:calc(20px + var(--app-safe-top)) calc(20px + var(--app-safe-right)) calc(20px + var(--app-safe-bottom)) calc(20px + var(--app-safe-left));
}
html[data-safe-shell] :is(#loginModal,.machine-access-modal,.work-picker-overlay,#no-serial-banner,.app-sheet-backdrop)>:first-child{
  max-height:calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom) - 40px);overflow-y:auto;
}
html[data-safe-shell="legacy"] .settings-drawer{top:var(--app-safe-top);bottom:var(--app-safe-bottom);right:var(--app-safe-right)}
@media(max-width:1020px){html[data-safe-shell="legacy"] .settings-drawer{top:auto;max-height:min(88dvh,calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom)))}}
@media(max-width:640px){html[data-safe-shell="machine"] .wrap{padding-left:max(11px,var(--app-safe-left));padding-right:max(11px,var(--app-safe-right))}}
html[data-safe-shell="legacy"] .toast-stack{bottom:calc(22px + var(--app-safe-bottom));right:calc(22px + var(--app-safe-right))}
@media(max-width:820px){
  html[data-safe-shell="about"] .site-nav{top:calc(68px + var(--app-safe-top));left:var(--app-safe-left);right:var(--app-safe-right);max-height:calc(100dvh - 68px - var(--app-safe-top) - var(--app-safe-bottom));overflow-y:auto}
}
@media(max-width:740px){
  html[data-safe-shell="site"] .site-nav{max-height:calc(100dvh - 72px - var(--app-safe-top) - var(--app-safe-bottom));overflow-y:auto}
}
@media(max-width:600px){html[data-safe-shell="flow"] .service-header{padding-top:22px}}
/* Wide phones in landscape and desktop Telegram must obey the same safe zone. */
@media(min-width:901px) and (min-height:601px), (min-width:901px) and (pointer:fine){
  html[data-safe-shell="admin"] .app{padding:var(--app-safe-top) var(--app-safe-right) var(--app-safe-bottom) var(--app-safe-left)}
  html[data-safe-shell="admin"] .main{max-height:calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom))}
}
@media(min-width:768px){
  html.hws-miniapp-fullscreen[data-safe-shell="studio"] body.studio-shell .app{box-sizing:border-box;padding-top:var(--app-safe-top);padding-left:var(--app-safe-left);padding-right:var(--app-safe-right);padding-bottom:var(--app-safe-bottom)}
  html.hws-miniapp-fullscreen[data-safe-shell="studio"] #editorOverlay.modal-overlay{padding:var(--app-safe-top) var(--app-safe-right) var(--app-safe-bottom) var(--app-safe-left)!important}
}