/* StormTube Studio — operational workspace, independent of marketing pages. */
#app.st-studio-workspace{max-width:1660px}
#app.st-studio-workspace>.site-footer{display:none!important}
.st-studio-workspace .st-studio-page-heading{margin:0 0 16px}
.st-studio-workspace .st-studio-page-heading h1{font-size:clamp(24px,2.05vw,32px);letter-spacing:-.7px}
.st-studio-workspace .st-studio-page-heading p{font-size:12px;line-height:1.5}
.st-studio-workspace .st-studio-summary-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;margin:14px 0 16px}
.st-studio-workspace .st-studio-summary-card{min-height:96px;padding:14px;gap:11px;border-radius:12px}
.st-studio-workspace .st-studio-summary-card strong{font-size:17px;line-height:1.3}
.st-studio-workspace .st-studio-summary-card>div>span{font-size:10px;letter-spacing:.65px}
.st-studio-workspace .st-studio-summary-card small{font-size:11px;line-height:1.45}
.st-studio-workspace .st-studio-summary-card.ingress{border-color:#375c66;
  background:linear-gradient(140deg,#142631,#111920)}
.st-studio-workspace .st-studio-summary-card.ingress .st-studio-summary-icon{color:#83deeb;
  border-color:#395b62;background:#122933}
.st-studio-workspace .st-studio-summary-card.ingress strong{color:#a4eaf1;font-variant-numeric:tabular-nums}
.st-studio-workspace .st-studio-summary-card.shared{grid-column:auto}
.st-studio-workspace .settings-tabs{margin:15px 0 18px;gap:8px;padding:5px;
  background:#10171d;border:1px solid #2a3935;border-radius:10px;width:fit-content;max-width:100%}
.st-studio-workspace .settings-tabs button{border:0;border-radius:7px;padding:11px 17px;
  background:transparent;color:#b0c5b9;font-size:12px;white-space:nowrap;cursor:pointer}
.st-studio-workspace .settings-tabs button.active{background:#53e88a;color:#08140d}
.st-studio-workspace .settings-tabs button:not(.active):hover{background:#233b2e;color:#eaffef}
.st-studio-workspace .dash-panel{min-width:0}
.st-studio-workspace .dash-panel[hidden]{display:none!important}
.st-studio-workspace .st-studio-section{margin:19px 0 28px;min-width:0}
.st-studio-workspace .st-studio-section-head{display:flex;flex-direction:column;gap:4px;margin:0 0 12px;padding:0 2px}
.st-studio-workspace .st-studio-section-head h2{font-size:19px;font-weight:850;letter-spacing:-.45px;margin:0;color:#f0f8f2}
.st-studio-workspace .st-studio-section-head p{color:#91aa9b;font-size:12px;line-height:1.45;margin:0}
.st-studio-workspace .st-studio-hero-previews{display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(280px,.93fr);gap:15px;margin:0;align-items:stretch}
.st-studio-workspace .st-studio-hero-previews>.panel{margin:0!important;min-width:0;
  border-radius:14px;border-color:#34453c;background:#151b21;padding:16px;box-shadow:0 10px 26px #0002}
.st-studio-workspace .st-studio-hero-previews .preview-box{margin-top:1px}
.st-studio-workspace .st-studio-preview-panel h2{font-size:15px;margin:0}
.st-studio-workspace .st-studio-preview-panel{gap:10px;min-height:0}
.st-studio-workspace .st-studio-preview-panel .studio-health-hint{font-size:10px;line-height:1.45}
.st-studio-workspace .st-studio-preview-panel .st-studio-preview-metrics{margin-top:auto}
.st-studio-workspace .st-studio-vertical-stage{height:clamp(245px,30vw,360px);background:#091015}
.st-studio-workspace .st-studio-vertical-stage>video{height:100%;width:auto;max-width:100%}
.st-studio-workspace .st-studio-vertical-placeholder{background:radial-gradient(ellipse at 50% 40%,#203d31,#0a1618 78%)}
.st-studio-workspace .st-studio-preview-header .btn{font-size:11px}
.st-studio-workspace .st-studio-settings{margin-top:29px}
.st-studio-workspace .st-studio-configuration-grid{display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(300px,1fr);align-items:start;gap:15px;margin:0 0 15px}
.st-studio-workspace .st-studio-configuration-grid>.panel{margin:0!important;border-radius:13px;
  padding:19px;background:#171c23;min-width:0}
.st-studio-workspace .st-studio-configuration-grid .panel h2{font-size:16px;letter-spacing:-.2px;margin:0 0 16px}
.st-studio-workspace .st-studio-config-info .st-dual-help{margin-top:18px}
.st-studio-workspace .st-studio-config-vertical .st-dual-mode-status[hidden]{display:none!important}
.st-studio-workspace .st-studio-config-vertical .st-dual-mode-status{display:none}
.st-studio-workspace .st-studio-config-vertical #dual-vertical-signal{border:1px solid #2d5240;
  background:#14271f;padding:10px 12px;border-radius:8px;color:#b4e3c1;font-size:11px;line-height:1.5}
.st-studio-workspace .st-studio-config-chat{border-color:#364249!important}
.st-studio-workspace .st-studio-configuration-grid .field{margin-top:10px}
.st-studio-workspace .st-studio-tools{border-top:1px solid #263d30;padding-top:21px;margin-top:31px}
.st-studio-workspace .st-studio-tools-grid{display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.st-studio-workspace .st-studio-tool-card{display:flex;flex-direction:column;align-items:stretch;
  justify-content:space-between;gap:15px;min-width:0;min-height:145px;margin:0;padding:17px;
  background:#15201d;border:1px solid #2d483a;border-radius:12px}
.st-studio-workspace .st-studio-tool-card>div{min-width:0}
.st-studio-workspace .st-studio-tool-card strong{font-size:14px;font-weight:800;color:#f2fff5}
.st-studio-workspace .st-studio-tool-card p{font-size:11px;line-height:1.5;color:#a5c0b1;margin:6px 0 0}
.st-studio-workspace .st-studio-tool-card .btn{display:inline-flex;align-items:center;justify-content:center;
  align-self:flex-start;border-radius:8px;padding:9px 11px;font-size:11px;margin:0}
.st-studio-workspace .st-collab-dashboard.st-studio-tool-card{background:#1c202b;border-color:#433c5d}
.st-studio-workspace .st-collab-dashboard.st-studio-tool-card strong{color:#ebdfff}
.st-studio-workspace .st-studio-tool-link{background:#181e24}
.st-studio-workspace .st-studio-obs-guide{margin-top:14px;border:1px solid #33433a;
  background:#151a20;border-radius:11px;overflow:hidden}
.st-studio-workspace .st-studio-obs-guide>summary{cursor:pointer;list-style:none;
  padding:14px 17px;font-weight:780;font-size:12px;color:#b9d5c1}
.st-studio-workspace .st-studio-obs-guide>summary::-webkit-details-marker{display:none}
.st-studio-workspace .st-studio-obs-guide>summary::after{content:'⌄';float:right;color:#73ed99}
.st-studio-workspace .st-studio-obs-guide[open]>summary::after{content:'⌃'}
.st-studio-workspace .st-studio-guide-content.panel{border:0;border-top:1px solid #2e3b33;
  margin:0;border-radius:0;background:transparent;padding:12px 17px 18px}
.st-studio-workspace .st-studio-guide-content p{font-size:12px;margin:8px 0}
@media(max-width:1240px){
 .st-studio-workspace .st-studio-summary-row{grid-template-columns:repeat(2,minmax(0,1fr))}
 .st-studio-workspace .st-studio-summary-card.shared{grid-column:auto}
 .st-studio-workspace .st-studio-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:960px){
 .st-studio-workspace .st-studio-hero-previews{grid-template-columns:minmax(0,1fr) minmax(250px,.9fr)}
 .st-studio-workspace .st-studio-configuration-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
 .st-studio-workspace .st-studio-hero-previews,
 .st-studio-workspace .st-studio-configuration-grid{grid-template-columns:1fr}
 .st-studio-workspace .st-studio-preview-panel,.st-studio-workspace .st-studio-configuration-grid>.panel{padding:16px}
 .st-studio-workspace .st-studio-vertical-stage{height:320px}
 .st-studio-workspace .st-studio-summary-row{gap:8px}
 .st-studio-workspace .st-studio-summary-card{min-height:92px;gap:8px;padding:11px}
 .st-studio-workspace .st-studio-summary-icon{height:33px;flex-basis:33px;font-size:20px}
 .st-studio-workspace .st-studio-summary-card>div>span{font-size:9px}
 .st-studio-workspace .st-studio-summary-card strong{font-size:14px}
 .st-studio-workspace .st-studio-tools-grid{grid-template-columns:1fr 1fr}
 .st-studio-workspace .st-studio-tool-card{padding:13px;min-height:155px}
 .st-studio-workspace .settings-tabs{width:100%;overflow-x:auto;flex-wrap:nowrap}
 .st-studio-workspace .settings-tabs button{flex:1;padding:10px 12px}
}
@media(max-width:420px){
 .st-studio-workspace .st-studio-summary-row{grid-template-columns:1fr 1fr}
 .st-studio-workspace .st-studio-summary-card.ingress{grid-column:1/-1}
 .st-studio-workspace .st-studio-tools-grid{grid-template-columns:1fr}
 .st-studio-workspace .st-studio-configuration-grid .form-grid{grid-template-columns:1fr}
}

/* Compact mobile: exactly two balanced summary cards per row, no clipped tabs. */
@media(max-width:420px){
 .st-studio-workspace .st-studio-summary-card.ingress{grid-column:auto}
 .st-studio-workspace .st-studio-summary-card{padding:10px;gap:6px}
 .st-studio-workspace .st-studio-summary-icon{flex-basis:29px;height:29px;font-size:18px}
 .st-studio-workspace .st-studio-summary-card small{font-size:10px;overflow-wrap:anywhere}
 .st-studio-workspace .settings-tabs{overflow:visible}
 .st-studio-workspace .settings-tabs button{min-width:0;flex:1 1 0;white-space:normal;
   line-height:1.25;font-size:10px;padding:10px 5px;text-align:center}
}

/* Preview portrait v2: an actual centered 9:16 frame, not a landscape slot.
 * Video zoom is a local CSS transform and never changes OBS/HLS output. */
.st-studio-workspace .st-studio-vertical-panel{
  align-items:stretch;
}
.st-studio-workspace .st-studio-vertical-stage{
  min-height:0;
  height:auto;
  width:100%;
  padding:12px 10px;
  display:flex;
  justify-content:center;
  align-items:center;
  background:radial-gradient(ellipse at center,#1d312b 0%,#101b20 53%,#090e13 100%);
  border:1px solid #304f40;
  border-radius:12px;
  overflow:hidden;
}
.st-studio-workspace .st-studio-portrait-frame{
  position:relative;
  aspect-ratio:9/16;
  height:clamp(285px,29vw,425px);
  max-width:100%;
  width:auto;
  display:block;
  flex-shrink:0;
  overflow:hidden;
  border:1px solid #3d6450;
  border-radius:13px;
  background:#050709;
  box-shadow:0 10px 26px #0009,0 0 0 3px #1a2a25;
  isolation:isolate;
}
.st-studio-workspace .st-studio-portrait-frame video{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  aspect-ratio:9/16;
  background:#030406;
  border:0;
  border-radius:0;
  box-shadow:none;
  transform:scale(var(--st-portrait-zoom, 2.5));
  transform-origin:center center;
  transition:transform .18s ease-out;
}
.st-studio-workspace .st-studio-portrait-frame video[hidden]{
  display:none!important;
}
.st-studio-workspace .st-studio-portrait-frame .st-studio-vertical-placeholder{
  position:absolute;
  inset:0;
  border:0;
  background:radial-gradient(circle at 50% 40%,#214a33,#080d13 88%);
}
.st-studio-workspace .st-studio-portrait-frame .st-studio-vertical-placeholder[hidden]{
  display:none!important;
}
.st-studio-workspace .st-studio-portrait-frame .st-studio-vertical-placeholder span{
  height:104px;
  width:63px;
}
.st-studio-workspace .st-studio-portrait-badge{
  position:absolute;
  top:9px;
  right:9px;
  font-size:10px;
  font-weight:800;
  line-height:1;
  padding:6px 7px;
  color:#d4ffe4;
  background:#0b161acb;
  border:1px solid #50775a;
  border-radius:6px;
  pointer-events:none;
}
.st-studio-workspace .st-studio-portrait-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 12px;
  padding:11px 12px;
  background:#101b19;
  border:1px solid #314b3c;
  border-radius:10px;
}
.st-studio-workspace .st-studio-portrait-modes{
  display:inline-flex;
  gap:4px;
  border:1px solid #45604d;
  border-radius:9px;
  padding:3px;
  background:#0b1312;
}
.st-studio-workspace .st-studio-fit-mode{
  background:transparent;
  border:0;
  border-radius:6px;
  padding:7px 11px;
  color:#b6cabd;
  font:inherit;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.st-studio-workspace .st-studio-fit-mode.active{
  background:#4fe88b;
  color:#0a1b11;
}
.st-studio-workspace .st-studio-portrait-zoom-label{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:800;
  font-size:11px;
  color:#bce5c9;
  margin-left:auto;
}
.st-studio-workspace .st-studio-portrait-zoom-label output{
  color:#8bffb5;
  font-variant-numeric:tabular-nums;
  min-width:4ch;
}
.st-studio-workspace #st-studio-vertical-zoom{
  accent-color:#5bea94;
  flex:1 1 110px;
  min-width:85px;
  cursor:pointer;
}
.st-studio-workspace #st-studio-vertical-fit-note{
  margin:0;
  flex:1 0 100%;
  color:#96b4a1;
  font-size:10px;
  line-height:1.45;
}
@media(max-width:1000px){
 .st-studio-workspace .st-studio-portrait-frame{height:clamp(270px,33vw,385px)}
 .st-studio-workspace .st-studio-portrait-zoom-label{margin-left:0}
}
@media(max-width:760px){
 .st-studio-workspace .st-studio-vertical-stage{height:auto;padding:13px}
 .st-studio-workspace .st-studio-portrait-frame{height:clamp(305px,105vw,470px)}
}
@media(max-width:420px){
 .st-studio-workspace .st-studio-portrait-frame{height:min(110vw,440px)}
 .st-studio-workspace .st-studio-portrait-controls{gap:8px}
 .st-studio-workspace .st-studio-portrait-modes{flex:1 0 auto}
 .st-studio-workspace .st-studio-fit-mode{flex:1}
}
@media(prefers-reduced-motion:reduce){
 .st-studio-workspace .st-studio-portrait-frame video{transition:none}
}

/* Studio 3: settings are owned by each stream, not mixed across rows. */
.st-studio-workspace .st-studio-stream-switcher{display:none}
.st-studio-workspace .st-studio-stream-columns{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:start;
}
.st-studio-workspace .st-studio-stream-column{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:17px;
  background:linear-gradient(145deg,#131d20,#111820 75%);
  border:1px solid #355846;
  border-radius:17px;
  min-width:0;
}
.st-studio-workspace .st-studio-vertical-column{
  border-color:#485375;
  background:linear-gradient(145deg,#171d2b,#121922 75%);
}
.st-studio-workspace .st-studio-stream-column-head{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:6px;
}
.st-studio-workspace .st-studio-stream-column-head h3{
  margin:0;
  font-size:18px;
  letter-spacing:-.35px;
  color:#eafff1;
}
.st-studio-workspace .st-studio-stream-column-head .st-studio-stream-shape{
  color:#a3f7bb;
  background:#1b352a;
  border:1px solid #436950;
  border-radius:7px;
  padding:5px 8px;
  font-size:11px;
  font-weight:900;
}
.st-studio-workspace .st-studio-vertical-column .st-studio-stream-shape{
  color:#c9c5ff;
  border-color:#565580;
  background:#242438;
}
.st-studio-workspace .st-studio-stream-column-head p{
  grid-column:1/-1;
  font-size:11px;
  line-height:1.5;
  color:#9db6a5;
  margin:0;
}
.st-studio-workspace .st-studio-stream-column>.panel{
  min-width:0;
  margin:0!important;
  background:#181e24;
  border:1px solid #35443e;
  border-radius:12px;
  padding:16px;
}
.st-studio-workspace .st-studio-vertical-column>.panel{
  border-color:#384453;
}
.st-studio-workspace .st-studio-stream-column .st-studio-column-preview{
  display:flex;
  flex-direction:column;
  gap:11px;
  min-height:0;
}
.st-studio-workspace .st-studio-stream-column .st-studio-column-preview h2{
  font-size:15px;
  margin:0;
}
.st-studio-workspace .st-studio-stream-column .preview-box{
  max-width:100%;
  aspect-ratio:16/9;
}
.st-studio-workspace .st-studio-stream-column .st-studio-vertical-stage{
  width:100%;
  height:auto;
  padding:14px;
}
.st-studio-workspace .st-studio-stream-column .st-studio-portrait-frame{
  height:clamp(290px,29vw,440px);
  max-width:100%;
}
.st-studio-workspace .st-studio-stream-column .st-studio-preview-metrics{
  margin-top:0;
}
.st-studio-workspace .st-studio-stream-column .st-studio-preview-actions{
  flex-wrap:wrap;
}
.st-studio-workspace .st-studio-stream-column .panel>h2{
  font-size:15px;
  margin:0 0 15px;
}
.st-studio-workspace .st-studio-stream-column .field{
  margin-top:11px;
}
.st-studio-workspace .st-studio-stream-column .form-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.st-studio-workspace .st-studio-stream-column .form-grid .field,
.st-studio-workspace .st-studio-stream-column .field>input,
.st-studio-workspace .st-studio-stream-column .field>select{min-width:0;width:100%}
.st-studio-workspace .st-studio-stream-column .st-dual-help{
  font-size:11px;
  margin:12px 0 7px;
}
.st-studio-workspace .st-studio-stream-column .st-ingest-host{
  overflow-wrap:anywhere;
}
.st-studio-workspace .st-studio-metadata-note{
  color:#9cb1aa;
  font-size:11px;
  line-height:1.5;
  margin:10px 0;
}
.st-studio-workspace .st-studio-shared-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  max-width:950px;
}
.st-studio-workspace .st-studio-shared-grid>.panel{
  border-radius:12px;
  background:#171d24;
  padding:18px;
  margin:0;
  min-width:0;
}
@media(max-width:990px){
  .st-studio-workspace .st-studio-stream-columns{
    grid-template-columns:minmax(0,1fr);
  }
  .st-studio-workspace .st-studio-stream-switcher{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin:0 0 15px;
  }
  .st-studio-workspace .st-studio-stream-tab{
    display:flex;align-items:center;justify-content:center;
    flex-wrap:wrap;gap:7px;
    font-size:13px;font-weight:800;
    color:#c1d7c9;
    border:1px solid #395548;
    background:#171e25;
    border-radius:10px;
    min-height:48px;
    padding:9px;
    cursor:pointer;
  }
  .st-studio-workspace .st-studio-stream-tab small{
    font-size:10px;
    opacity:.8;
  }
  .st-studio-workspace .st-studio-stream-tab.is-active{
    background:#234a33;
    color:#aaffbf;
    border-color:#62ef93;
    box-shadow:inset 0 0 0 1px #62ef9347;
  }
  .st-studio-workspace .st-studio-stream-column:not(.is-active){display:none}
  .st-studio-workspace .st-studio-stream-column{padding:13px}
  .st-studio-workspace .st-studio-stream-column .st-studio-portrait-frame{height:clamp(315px,75vw,500px)}
}
@media(max-width:520px){
 .st-studio-workspace .st-studio-stream-column{padding:10px;gap:11px}
 .st-studio-workspace .st-studio-stream-column>.panel{padding:13px}
 .st-studio-workspace .st-studio-stream-column .form-grid{grid-template-columns:1fr}
 .st-studio-workspace .st-studio-stream-column .st-studio-portrait-frame{height:min(115vw,460px)}
 .st-studio-workspace .st-studio-stream-column-head h3{font-size:16px}
 .st-studio-workspace .st-studio-stream-column .form-actions{flex-wrap:wrap}
 .st-studio-workspace .st-studio-stream-column .secret{overflow-wrap:anywhere}
}