/* wire-channel-customization-live-preview-303f1h459 */

/* Studio editor */

.wire-channel-customizer-303f1h459{
  display:grid;
  gap:16px;
  min-width:0;
}

.wire-channel-customizer-header-303f1h459
>div:last-child{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  align-items:center;
  justify-content:flex-end;
}

.wire-channel-save-state-303f1h459{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 12px;
  border:1px solid #315069;
  border-radius:999px;
  background:#081925;
  color:#8299aa;
  font-size:11px;
  font-weight:850;
}

.wire-channel-save-state-303f1h459.is-dirty{
  border-color:#c33955;
  background:rgba(195,57,85,.14);
  color:#ff9aad;
}

.wire-channel-save-state-303f1h459.is-saving{
  border-color:#4c8db8;
  color:#9fd4f6;
}

.wire-channel-customizer-layout-303f1h459{
  display:grid;
  grid-template-columns:minmax(430px,.88fr) minmax(520px,1.12fr);
  gap:18px;
  align-items:start;
  min-width:0;
}

.wire-channel-customizer-editor-303f1h459{
  display:grid;
  gap:15px;
  min-width:0;
}

.wire-channel-editor-card-303f1h459{
  display:grid;
  gap:14px;
  padding:18px!important;
}

.wire-channel-editor-card-303f1h459>header{
  display:flex;
  gap:14px;
  align-items:flex-end;
  justify-content:space-between;
  padding-bottom:13px;
  border-bottom:1px solid rgba(68,101,127,.3);
}

.wire-channel-editor-card-303f1h459 h2{
  margin:3px 0 0;
  font-size:21px;
}

.wire-channel-editor-card-303f1h459>header small{
  color:#7f96a8;
  font-size:10px;
  font-weight:800;
}

.wire-channel-editor-card-303f1h459>label,
.wire-channel-video-selector-grid-303f1h459>label{
  display:grid;
  gap:7px;
  color:#dce7ee;
  font-size:12px;
  font-weight:820;
}

.wire-channel-editor-card-303f1h459 label>small,
.wire-channel-video-selector-grid-303f1h459 label>small{
  color:#7f96a8;
  font-size:10px;
  font-weight:650;
  line-height:1.45;
}

.wire-channel-video-selector-grid-303f1h459{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
}

.wire-channel-video-choice-303f1h459{
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  gap:10px;
  align-items:center;
  min-height:74px;
  padding:8px;
  border:1px solid rgba(65,101,129,.34);
  border-radius:11px;
  background:#06131e;
}

.wire-channel-video-choice-303f1h459 img{
  width:96px;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:8px;
  background:#000;
}

.wire-channel-video-choice-303f1h459 div{
  display:grid;
  min-width:0;
  gap:4px;
}

.wire-channel-video-choice-303f1h459 strong,
.wire-channel-video-choice-303f1h459 span{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.wire-channel-video-choice-303f1h459 strong{
  color:#fff;
  font-size:11px;
}

.wire-channel-video-choice-303f1h459 span{
  color:#7f95a6;
  font-size:9px;
}

.wire-channel-video-choice-303f1h459.is-empty{
  grid-template-columns:1fr;
  place-items:center;
  color:#738a9b;
  font-size:10px;
  text-align:center;
}

.wire-channel-toggle-row-303f1h459{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr);
  gap:10px!important;
  align-items:start;
  padding:13px;
  border:1px solid rgba(67,101,128,.34);
  border-radius:11px;
  background:#071621;
}

.wire-channel-toggle-row-303f1h459>input{
  margin-top:3px;
}

.wire-channel-toggle-row-303f1h459>span{
  display:grid;
  gap:3px;
}

.wire-channel-toggle-row-303f1h459 strong{
  color:#fff;
  font-size:12px;
}

.wire-channel-section-editor-303f1h459{
  display:grid;
  gap:9px;
}

.wire-channel-section-editor-303f1h459
>article{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto auto;
  gap:9px;
  align-items:end;
  padding:10px;
  border:1px solid rgba(65,100,128,.36);
  border-radius:11px;
  background:#071621;
  transition:
    border-color 110ms ease,
    background 110ms ease,
    opacity 110ms ease;
}

.wire-channel-section-editor-303f1h459
>article.is-dragging{
  opacity:.45;
  border-color:#d33856;
}

.wire-channel-section-handle-303f1h459{
  align-self:stretch;
  min-height:42px;
  padding:0!important;
  border:1px solid #315069!important;
  border-radius:9px!important;
  background:#0b2232!important;
  color:#96adbd!important;
  cursor:grab;
}

.wire-channel-section-editor-303f1h459
article>label:not(.wire-channel-section-enabled-303f1h459){
  display:grid;
  gap:5px;
  color:#8098aa;
  font-size:9px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.wire-channel-section-enabled-303f1h459{
  display:flex;
  gap:6px;
  align-items:center;
  align-self:center;
  color:#aec0cd;
  font-size:10px;
  font-weight:800;
}

.wire-channel-section-move-303f1h459{
  display:flex;
  gap:4px;
  align-self:center;
}

.wire-channel-section-move-303f1h459 button{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  padding:0!important;
  border:1px solid #315069!important;
  border-radius:8px!important;
  background:#091c2a!important;
  color:#fff!important;
}

.wire-channel-savebar-303f1h459{
  position:sticky;
  bottom:10px;
  z-index:32;
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  padding:13px 14px;
  border:1px solid rgba(201,50,79,.52);
  border-radius:14px;
  background:rgba(6,17,27,.96);
  box-shadow:0 16px 40px rgba(0,0,0,.38);
  backdrop-filter:blur(18px);
}

.wire-channel-savebar-303f1h459>div{
  display:grid;
  gap:3px;
}

.wire-channel-savebar-303f1h459 strong{
  font-size:12px;
}

.wire-channel-savebar-303f1h459 span{
  color:#8096a7;
  font-size:10px;
}

.wire-channel-savebar-303f1h459 button{
  min-height:42px;
  padding:0 18px!important;
  border-color:#ff3155!important;
  background:#d42647!important;
  color:#fff!important;
  font-weight:900!important;
}

/* Preview panel */

.wire-channel-preview-panel-303f1h459{
  position:sticky;
  top:8px;
  display:grid;
  gap:12px;
  min-width:0;
  padding:14px;
  border:1px solid rgba(75,113,143,.4);
  border-radius:17px;
  background:
    radial-gradient(circle at 80% 0,rgba(222,40,72,.1),transparent 30%),
    linear-gradient(145deg,#091b29,#06121c);
  box-shadow:0 18px 48px rgba(0,0,0,.25);
}

.wire-channel-preview-panel-303f1h459>header{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
  justify-content:space-between;
}

.wire-channel-preview-panel-303f1h459 h2{
  margin:3px 0 0;
  font-size:19px;
}

.wire-channel-preview-actions-303f1h459{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.wire-channel-preview-segment-303f1h459{
  display:flex;
  gap:3px;
  padding:3px;
  border:1px solid #315069;
  border-radius:10px;
  background:#06131e;
}

.wire-channel-preview-segment-303f1h459 button{
  min-height:31px;
  padding:0 9px!important;
  border:0!important;
  border-radius:7px!important;
  background:transparent!important;
  color:#8198a9!important;
  font-size:10px!important;
  font-weight:850!important;
}

.wire-channel-preview-segment-303f1h459 button.is-active{
  background:#17384e!important;
  color:#fff!important;
}

.wire-channel-preview-frame-wrap-303f1h459{
  display:flex;
  justify-content:center;
  min-height:720px;
  overflow:hidden;
  padding:10px;
  border:1px solid rgba(64,99,126,.4);
  border-radius:14px;
  background:#02070c;
}

.wire-channel-preview-frame-wrap-303f1h459 iframe{
  display:block;
  width:100%;
  min-height:700px;
  border:0;
  border-radius:10px;
  background:#050b12;
  transition:
    width 170ms ease,
    border-radius 170ms ease;
}

.wire-channel-preview-frame-wrap-303f1h459[
  data-device="mobile"
] iframe{
  width:390px;
  max-width:100%;
  border:1px solid #2b465a;
  border-radius:22px;
}

.wire-channel-preview-note-303f1h459{
  margin:0;
  color:#72899a;
  font-size:9px;
  line-height:1.45;
  text-align:center;
}

/* Actual public-channel preview mode */

html.wire-channel-preview-ready-303f1h459{
  min-height:100%;
  background:#050b12;
}

html.wire-channel-preview-ready-303f1h459 body{
  min-height:100%;
  margin:0!important;
  padding:12px!important;
  overflow:auto!important;
  visibility:visible!important;
  background:#050b12!important;
}

html.wire-channel-preview-ready-303f1h459
.wire-creator-channel-303f1h451{
  width:100%;
  max-width:1420px;
  margin:0 auto;
}

html.wire-channel-preview-ready-303f1h459
.wire-channel-tabs-303f1h451{
  top:0;
}

html.wire-channel-preview-ready-303f1h459
a,
html.wire-channel-preview-ready-303f1h459
button,
html.wire-channel-preview-ready-303f1h459
form{
  cursor:default!important;
}

.wire-creator-channel-303f1h451
[data-wire-channel-home-section-303f1h459][hidden],
.wire-creator-channel-303f1h451
[data-wire-channel-timeline-widget-303f1h459][hidden]{
  display:none!important;
}

@media(max-width:1260px){
  .wire-channel-customizer-layout-303f1h459{
    grid-template-columns:minmax(390px,.9fr) minmax(470px,1.1fr);
  }

  .wire-channel-video-selector-grid-303f1h459{
    grid-template-columns:1fr;
  }
}

@media(max-width:1040px){
  .wire-channel-customizer-layout-303f1h459{
    grid-template-columns:1fr;
  }

  .wire-channel-preview-panel-303f1h459{
    position:relative;
    top:auto;
  }

  .wire-channel-preview-frame-wrap-303f1h459{
    min-height:660px;
  }

  .wire-channel-preview-frame-wrap-303f1h459 iframe{
    min-height:640px;
  }
}

@media(max-width:700px){
  .wire-channel-customizer-header-303f1h459
  >div:last-child{
    width:100%;
    justify-content:flex-start;
  }

  .wire-channel-video-selector-grid-303f1h459{
    grid-template-columns:1fr;
  }

  .wire-channel-section-editor-303f1h459
  >article{
    grid-template-columns:34px minmax(0,1fr) auto;
  }

  .wire-channel-section-move-303f1h459{
    grid-column:2/-1;
    justify-content:flex-end;
  }

  .wire-channel-savebar-303f1h459{
    bottom:72px;
  }

  .wire-channel-preview-panel-303f1h459>header{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media(max-width:480px){
  .wire-channel-video-choice-303f1h459{
    grid-template-columns:78px minmax(0,1fr);
  }

  .wire-channel-video-choice-303f1h459 img{
    width:78px;
  }

  .wire-channel-preview-frame-wrap-303f1h459{
    padding:4px;
  }

  html.wire-channel-preview-ready-303f1h459 body{
    padding:4px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .wire-channel-preview-frame-wrap-303f1h459 iframe,
  .wire-channel-section-editor-303f1h459>article{
    transition:none!important;
  }
}