/* Cross-device UI polish. Loaded last so it can safely normalize legacy pages. */
html{scroll-padding-top:calc(var(--header-height,72px) + 16px)}
body{width:100%;max-width:100%;overflow-x:clip}
:where(.site-main,.guest-main) :where(h1,h2,h3,p,li,label,td,th,a,button){overflow-wrap:anywhere}
:where(.site-main,.guest-main) :where(img,video,iframe,canvas,svg){max-width:100%;height:auto}
:where(.site-main,.guest-main) :where(pre,code){white-space:pre-wrap;word-break:break-word}
:where(.site-main,.guest-main) :where(button,a,input,select,textarea){touch-action:manipulation}
:where(.site-main,.guest-main) :where(input,select,textarea){min-width:0}
:where(.site-main,.guest-main) [hidden]{display:none!important}
.site-nav,.guest-nav{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right))}
.site-main,.guest-main{isolation:isolate}
.flash-stack{position:relative;z-index:50}
.flash{max-width:100%;overflow-wrap:anywhere}

/* Workspace surfaces */
:where(.dashboard-container,.profile-container,.billing-shell,.ss-shell,.cu-wrap,.selection-container,.tools-shell,.devices-shell,.customize-shell,.auth-shell,.checkout-shell){min-width:0}
:where(.dashboard-page,.profile-page,.billing-page,.ss-page,.cu-page,.selection-page,.tools-page,.devices-page,.customize-page,.auth-page,.checkout-page){overflow-x:clip}
:where(.card,.profile-card,.billing-card,.ss-panel,.ss-preview-card,.cu-card,.tools-card,.devices-card){min-width:0}
:where(.dashboard-page,.profile-page,.billing-page,.ss-page,.cu-page,.selection-page,.tools-page,.devices-page) :where(button,.btn,[class$="-btn"]){max-width:100%}
:where(.dashboard-page,.profile-page,.billing-page,.ss-page,.cu-page,.selection-page,.tools-page,.devices-page) table{max-width:100%}
:where(.billing-table-wrap,.profile-table-wrap,.selection-table-wrap,.table-wrap,.table-responsive,.ag-card){overscroll-behavior-inline:contain;scrollbar-width:thin}

/* Comfortable pointer behavior without sticky hover on touch screens. */
@media(hover:hover) and (pointer:fine){
  :where(.card,.profile-card,.billing-card,.tools-card,.devices-card){transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
  :where(.tools-btn,.device-btn,.billing-action-btn,.profile-btn,.cu-btn):not(:disabled):hover{transform:translateY(-1px)}
}

/* Large desktop */
@media(min-width:1440px){
  :root{--container:1320px}
  .dashboard-container{width:min(1240px,100%)}
  .billing-shell,.profile-container,.ss-shell{width:min(1180px,100%)}
}

/* Laptop and tablet */
@media(max-width:1080px){
  .site-menu{max-height:calc(100dvh - var(--header-height) - 24px);overflow-y:auto;overscroll-behavior:contain}
  .site-menu a,.nav-logout{min-height:46px}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-brand{grid-column:1/-1}
  .dashboard-page .dashboard-quick-actions{justify-content:flex-start}
  .public-contact-panel,.public-about-grid{gap:40px}
  .customize-grid{grid-template-columns:minmax(280px,370px) minmax(0,1fr)!important}
}

@media(max-width:820px){
  :root{--page-inline:16px}
  .page-shell,.legal-page{padding-top:38px}
  .dashboard-page,.billing-page,.profile-page,.selection-page{padding-left:var(--page-inline)!important;padding-right:var(--page-inline)!important}
  .tools-page,.devices-page,.ss-page,.cu-page{padding-left:var(--page-inline)!important;padding-right:var(--page-inline)!important}
  .dashboard-page .grid-layout,.billing-overview-grid,.profile-grid,.ss-layout{grid-template-columns:1fr!important}
  .dashboard-page .dashboard-hero-card,.billing-header,.profile-header,.devices-header{align-items:flex-start!important}
  .customize-grid{display:flex!important;flex-direction:column!important}.preview-panel{position:static!important;order:1;width:100%}.customize-panel{order:2;width:100%}
  .ss-preview-card{position:static!important;order:-1}
  .tools-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))}
  .tools-tab{justify-content:center;text-align:center}
  .footer-grid{padding-top:38px}
  .guest-footer{padding-left:20px;padding-right:20px}
  .guest-footer-inner{gap:36px}
}

/* Phones */
@media(max-width:640px){
  :root{--header-height:64px;--page-inline:12px}
  html{scroll-padding-top:76px}
  body{font-size:14px}
  .site-nav{min-height:64px;gap:12px}
  .brand-name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .site-menu{top:calc(var(--header-height) + 7px);right:8px;left:8px;max-height:calc(100dvh - 78px);border-radius:15px}
  .site-menu a,.nav-logout{min-height:48px;font-size:14px}
  .nav-toggle{width:44px;height:44px}
  :where(.site-main,.guest-main) :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){font-size:16px!important}
  :where(.site-main,.guest-main) :where(button,.btn,.button,[class$="-btn"]){min-height:44px}
  .dashboard-page,.billing-page,.profile-page,.selection-page,.tools-page,.devices-page,.ss-page,.cu-page,.customize-page{padding-top:26px!important;padding-bottom:54px!important}
  :where(.dashboard-page,.billing-page,.profile-page,.selection-page,.tools-page,.devices-page,.ss-page,.cu-page) h1{font-size:clamp(27px,8.5vw,36px)!important;line-height:1.12}
  :where(.card,.profile-card,.billing-card,.ss-panel,.ss-preview-card,.cu-card,.tools-card,.devices-card){border-radius:14px!important;box-shadow:0 8px 24px rgba(15,23,42,.05)!important}
  .dashboard-page .dashboard-quick-actions{display:grid!important;grid-template-columns:1fr!important;width:100%}
  .dashboard-page .dashboard-quick-actions>.btn{width:100%!important;justify-content:center}
  .dashboard-page .data-row,.dashboard-page .dashboard-collection-card{align-items:stretch!important;flex-direction:column!important}
  .dashboard-page .action-container{display:grid!important;grid-template-columns:1fr!important;width:100%}
  .dashboard-page .action-container>*{width:100%!important}
  .profile-header-actions,.billing-autopay-actions,.tools-actions,.device-actions,.cu-actions{width:100%;align-items:stretch;flex-direction:column}
  .profile-header-actions>*,.billing-autopay-actions>*,.tools-actions>*,.device-actions>*,.cu-actions>*{width:100%}
  .tools-tabs{grid-template-columns:1fr!important}
  .tools-tab{justify-content:flex-start}
  .tools-copy{display:grid!important;grid-template-columns:1fr}
  .tools-input{width:100%}
  .device-create{grid-template-columns:1fr!important}
  .device-row{grid-template-columns:1fr!important}
  .device-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
  .device-actions form,.device-actions button{width:100%}
  .ss-header{margin-top:18px!important}
  .ss-footer-actions{grid-template-columns:1fr!important}
  .cu-drop{min-height:180px!important;padding:20px 14px!important}
  .customize-head{align-items:stretch!important;flex-direction:column!important}.customize-head>a{width:100%!important;text-align:center}.preview-tools{display:grid!important;grid-template-columns:repeat(3,1fr);width:100%}.preview-device{padding-inline:5px}.preview-frame{height:min(540px,68vh)!important}.customize-actions{grid-template-columns:1fr!important}
  :where(.auth-page,.checkout-page,.reset-page,.forgot-page,.signup-page){padding:28px 10px 54px!important}
  :where(.auth-card,.checkout-card,.reset-card,.forgot-card,.signup-card){width:100%!important;padding-left:18px!important;padding-right:18px!important;border-radius:16px!important}
  .site-main table{font-size:12px}
  .site-main th,.site-main td{padding:10px 9px!important}
  .modal-box,.profile-delete-dialog{width:calc(100vw - 20px)!important;max-height:calc(100dvh - 24px)!important;margin:auto;border-radius:16px!important}
  .site-footer{margin-top:40px}
  .footer-grid{grid-template-columns:1fr;gap:28px;padding:36px 0 28px}
  .footer-brand{grid-column:auto}
  .footer-bottom{padding-bottom:max(22px,env(safe-area-inset-bottom))}
  .guest-nav{min-height:64px}
  .guest-brand-copy strong{max-width:min(190px,52vw)}
  .guest-menu{max-height:calc(100dvh - 82px)!important}
  .guest-footer-inner{padding-bottom:36px}
  .guest-footer-bottom{line-height:1.6}
  .guest-body .gallery-page .top-bar{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .guest-body .gallery-page .top-bar::-webkit-scrollbar{display:none}
}

@media(max-width:390px){
  :root{--page-inline:10px}
  .brand-name{max-width:145px}
  .device-actions{grid-template-columns:1fr}
  .tools-card,.devices-card{padding:15px!important}
  .dashboard-page .card{padding:15px!important}
  .guest-brand-copy strong{max-width:150px}
  .guest-body .gallery-page .gallery,.guest-body .favorite-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Landscape phones and short tablet windows */
@media(max-height:520px) and (orientation:landscape){
  .site-menu,.guest-menu{max-height:calc(100dvh - 74px)!important;overflow-y:auto!important}
  .modal-box,.profile-delete-dialog{max-height:calc(100dvh - 12px)!important;overflow-y:auto!important}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}