/* Shared responsive layer for phone, tablet and desktop layouts. */
html{width:100%;overflow-x:hidden}
body{width:100%;min-width:0;overflow-x:hidden}
img,video,canvas{max-width:100%;height:auto}
button,a,input,select,textarea{touch-action:manipulation}
.site-header,.account-header{width:100%;min-width:0}
.brand-logo,.account-logo{max-width:48vw}
.hero,.market,.creator-banner,.trust,.page,footer{max-width:calc(100% - 30px)}
.grid,.profile-grid{min-width:0}
.card,.profile-pack,.panel{min-width:0}
.card-body,.profile-main,.section-title,.upload-heading{min-width:0}
.card-actions button,.detail-buttons button,.primary-btn,.muted-btn,.white-button{min-height:42px}
.pack-name,.creator,.detail-copy,.about-card p,.lead{overflow-wrap:anywhere}
.detail-modal{width:min(800px,calc(100vw - 24px));max-width:100%;max-height:calc(100dvh - 24px)}
.detail-modal img{max-width:100%}
.preview-grid,.profile-grid,.grid{width:100%}
@media (max-width:1100px){
  .site-header{gap:16px}
  .desktop-nav{gap:8px}
  .hero{grid-template-columns:1fr!important}
  .hero-copy{width:100%;max-width:760px}
  .hero-art{width:100%}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .trust{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .site-header,.account-header{padding-left:14px;padding-right:14px}
  .brand-logo{width:145px;max-width:48vw}
  .account-logo{width:130px;max-width:44vw}
  .header-actions{min-width:0}
  .mobile-menu{width:100%;max-width:100vw}
  .hero,.market,.creator-banner,.trust,footer,.page{width:calc(100% - 20px);max-width:none}
  .hero-copy{text-align:center}
  .hero-copy>p{margin-left:auto;margin-right:auto}
  .hero-search{width:100%;max-width:620px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card{border-radius:16px}
  .pack-preview{min-height:145px}
  .creator-banner{box-sizing:border-box}
  .creator-banner p{max-width:none}
  .profile-hero{grid-template-columns:64px minmax(0,1fr)!important}
  .avatar-large{width:64px;height:64px}
  .upload-layout{grid-template-columns:1fr!important}
  .upload-heading{align-items:flex-start}
  .upload-heading h1{font-size:clamp(34px,9vw,48px)}
  .preview-canvas{min-height:320px}
  .section-title{align-items:flex-start}
  .section-title .primary-btn{width:100%;text-align:center}
  .account-nav{display:none}
  .profile-nav{margin-left:auto}
}
@media (max-width:480px){
  .brand-logo{width:135px}
  .account-logo{width:120px}
  .hero{padding-left:12px!important;padding-right:12px!important}
  .hero h1{font-size:clamp(37px,11vw,46px);letter-spacing:-2px}
  .hero-search button{padding-left:12px;padding-right:12px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pack-preview{height:145px;padding:8px}
  .pack-preview span{width:62px;height:62px}
  .pack-preview img{width:55px;height:55px}
  .card-body{padding:9px}
  .pack-name{font-size:11px}
  .creator{font-size:8px}
  .rating{font-size:8px}
  .card-actions{gap:5px}
  .add-btn,.view-btn{padding:9px 5px;font-size:9px}
  .detail-modal{padding:14px;border-radius:18px}
  .detail-cover{padding:12px}
  .detail-modal h2{font-size:25px}
  .preview-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .review-form{padding:12px}
  .review-submit-row{width:100%}
  .profile-tabs{gap:14px}
  .profile-tabs button{white-space:nowrap}
  .form,.live-preview{padding:15px}
  .preview-canvas{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .dropzone{padding:24px 12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}