/* kLinQ.™ baseline — Template Studio stabilization layer.
   Loaded after legacy CSS. Owns Preview device behavior and template isolation. */
:root{
  --kl-device-w:400px;
  --kl-device-h:820px;
  --kl-device-radius:34px;
  --kl-device-pad:28px;
  --kl-control-size:42px;
  --kl-content-w:304px;
  --kl-ad-w:300px;
  --kl-ad-h:50px;
}

/* Figma-like device canvas: fixed shell, real internal scrolling. */
body.client-dashboard-body #profile .profile-live-preview-panel{
  position:sticky!important;
  top:18px!important;
  align-self:start!important;
  display:flex!important;
  justify-content:center!important;
  overflow:visible!important;
}
body.client-dashboard-body #profile [data-profile-preview]{
  position:relative!important;
  width:var(--kl-device-w)!important;
  max-width:100%!important;
  height:var(--kl-device-h)!important;
  min-height:var(--kl-device-h)!important;
  border-radius:var(--kl-device-radius)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin!important;
  scroll-behavior:smooth!important;
  isolation:isolate!important;
  box-shadow:0 24px 70px rgba(7,17,31,.28)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  background:#07111f!important;
}
body.client-dashboard-body #profile [data-profile-preview]::-webkit-scrollbar{width:7px!important;}
body.client-dashboard-body #profile [data-profile-preview]::-webkit-scrollbar-thumb{background:rgba(127,145,170,.45)!important;border-radius:999px!important;}
body.client-dashboard-body #profile [data-profile-preview]>.kl-preview-pane{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  min-height:100%!important;
  height:auto!important;
  max-height:none!important;
  margin:0!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  transform:none!important;
}
body.client-dashboard-body #profile [data-profile-preview]>.kl-preview-pane:not(.is-active-template){
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
body.client-dashboard-body #profile [data-profile-preview]>.kl-preview-pane.is-active-template{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}
body.client-dashboard-body #profile [data-profile-preview]>.kl-preview-pane-biz.is-active-template{display:block!important;}

/* Preview controls behave like device chrome and stay visible while scrolling. */
body.client-dashboard-body #profile [data-profile-preview] .preview-share-action,
body.client-dashboard-body #profile [data-profile-preview] [data-preview-mode-toggle]{
  position:sticky!important;
  top:24px!important;
  z-index:100!important;
}
body.client-dashboard-body #profile [data-profile-preview] .preview-share-action{
  float:left!important;
  margin-left:24px!important;
}
body.client-dashboard-body #profile [data-profile-preview] .preview-top-actions,
body.client-dashboard-body #profile [data-profile-preview] .star-preview-theme-toggle{
  position:sticky!important;
  top:24px!important;
  z-index:100!important;
}

/* Shared full-width animation canvas in Default + Star preview. */
body.client-dashboard-body #profile .kl-preview-pane-default>.klinq-animation-layer,
body.client-dashboard-body #profile .kl-preview-pane-star>.klinq-animation-layer{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  pointer-events:none!important;
  overflow:hidden!important;
  z-index:0!important;
}

/* Shared exact banner holder. */
body.client-dashboard-body #profile .kl-default-ad-slot,
body.client-dashboard-body #profile .kl-star-ad-slot,
body.client-dashboard-body #profile .klv71-ad-slot,
body.page-public-profile .kl-default-ad-slot,
body.page-public-profile .kl-star-ad-slot,
body.page-public-profile .klv71-ad-slot{
  width:var(--kl-ad-w)!important;
  max-width:100%!important;
  height:var(--kl-ad-h)!important;
  min-height:var(--kl-ad-h)!important;
  max-height:var(--kl-ad-h)!important;
  margin:14px auto!important;
  padding:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  display:grid!important;
  place-items:center!important;
}
body.client-dashboard-body #profile .kl-default-ad-slot iframe,
body.client-dashboard-body #profile .kl-star-ad-slot iframe,
body.client-dashboard-body #profile .klv71-ad-slot iframe,
body.page-public-profile .kl-default-ad-slot iframe,
body.page-public-profile .kl-star-ad-slot iframe,
body.page-public-profile .klv71-ad-slot iframe{
  width:var(--kl-ad-w)!important;
  max-width:100%!important;
  height:var(--kl-ad-h)!important;
  border:0!important;
  border-radius:0!important;
  display:block!important;
}

/* Premade icons: never render generated letters behind an image. */
body.client-dashboard-body #profile .public-tile-icon:has(img),
body.client-dashboard-body #profile .kl-star-row-icon:has(img),
body.client-dashboard-body #profile .klv71-action i:has(img),
body.page-public-profile .public-tile-icon:has(img),
body.page-public-profile .kl-star-row-icon:has(img),
body.page-public-profile .klv71-action i:has(img){
  font-size:0!important;
  color:transparent!important;
  text-shadow:none!important;
}
body.client-dashboard-body #profile .public-tile-icon img,
body.page-public-profile .public-tile-icon img{
  width:68%!important;
  height:68%!important;
  max-width:48px!important;
  max-height:48px!important;
  object-fit:contain!important;
  display:block!important;
}
body.client-dashboard-body #profile .kl-star-row-icon img,
body.page-public-profile .kl-star-row-icon img,
body.client-dashboard-body #profile .klv71-action i img,
body.page-public-profile .klv71-action i img{
  width:72%!important;
  height:72%!important;
  object-fit:contain!important;
  display:block!important;
}

/* QR section titles are removed structurally; hide any legacy remnants. */
body.client-dashboard-body #profile [class*="qr-section"]>h1,
body.client-dashboard-body #profile [class*="qr-section"]>h2,
body.client-dashboard-body #profile [class*="qr-section"]>h3,
body.page-public-profile [class*="qr-section"]>h1,
body.page-public-profile [class*="qr-section"]>h2,
body.page-public-profile [class*="qr-section"]>h3,
body.client-dashboard-body #profile .klv71-pay-card>header,
body.page-public-profile .klv71-pay-card>header{display:none!important;}

/* Footer stays in document flow after QR + ad. */
body.client-dashboard-body #profile .kl-preview-pane-default footer,
body.client-dashboard-body #profile .kl-preview-pane-star footer,
body.client-dashboard-body #profile .kl-preview-pane-biz footer,
body.page-public-profile.profile-template-default footer,
body.page-public-profile.profile-template-star footer,
body.page-public-profile.profile-template-biz footer{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  margin-top:auto!important;
  flex:0 0 auto!important;
}




/* kLinQ.™ baseline — authoritative +kLinQ icon centering */
body.client-dashboard-body .ios-button-item .klinq-row-preview,
body.client-dashboard-body .ios-button-item .public-tile-icon{
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
}
body.client-dashboard-body .ios-button-item .public-tile-icon img,
body.client-dashboard-body .ios-button-item .klinq-row-preview img{
  width:72%!important;
  height:72%!important;
  max-width:72%!important;
  max-height:72%!important;
  object-fit:contain!important;
  object-position:center!important;
  display:block!important;
  margin:auto!important;
  transform:none!important;
}

/* kLinQ.™ baseline — Client kLinQ row cleanup */
body.client-dashboard-body #profile .ios-button-stack .ios-button-item{
  border-width:1px!important;
  box-shadow:0 10px 24px rgba(13,37,76,.045)!important;
}
body.client-dashboard-body #profile .ios-button-stack .ios-button-item>summary{
  display:grid!important;
  grid-template-columns:34px 72px minmax(180px,1fr) auto 66px 42px!important;
  grid-template-rows:1fr!important;
  gap:14px!important;
  align-items:center!important;
  min-height:112px!important;
  padding:16px 18px!important;
}
body.client-dashboard-body #profile .ios-button-stack .ios-button-item>summary .drag-handle,
body.client-dashboard-body #profile .ios-button-stack .ios-button-item>summary .klinq-row-preview,
body.client-dashboard-body #profile .ios-button-stack .ios-button-item>summary .button-meta,
body.client-dashboard-body #profile .ios-button-stack .ios-button-item>summary .klinq-status-pill,
body.client-dashboard-body #profile .ios-button-stack .ios-button-item>summary .ios-switch,
body.client-dashboard-body #profile .ios-button-stack .ios-button-item>summary .klinq-delete-button{
  grid-row:1!important;
  align-self:center!important;
}
body.client-dashboard-body #profile .ios-button-stack .ios-button-item>summary .klinq-status-pill{
  justify-self:end!important;
  margin:0!important;
}
body.client-dashboard-body #profile .ios-button-stack .ios-button-item>summary .ios-switch{
  justify-self:end!important;
  margin:0!important;
}
body.client-dashboard-body #profile .ios-button-stack .ios-button-item>summary .klinq-delete-button{
  justify-self:end!important;
  align-self:center!important;
  margin:0!important;
  width:38px!important;
  height:38px!important;
  border-width:1px!important;
}
body.client-dashboard-body #profile .ios-button-stack .ios-button-item>summary .public-tile-icon{
  width:64px!important;
  height:64px!important;
  border-radius:16px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  font-size:0!important;
  color:transparent!important;
}
body.client-dashboard-body #profile .ios-button-stack .ios-button-item>summary .public-tile-icon img{
  width:78%!important;
  height:78%!important;
  max-width:50px!important;
  max-height:50px!important;
  object-fit:contain!important;
  object-position:center!important;
  display:block!important;
  margin:auto!important;
}