/* StormTube Verticais — two mobile modes, one real HLS/WebSocket room. */
.st-vertical-rail{margin:26px 0 35px;min-width:0}
.st-vertical-grid{display:flex;align-items:flex-start;gap:13px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:5px 1px 15px;scrollbar-width:thin}
.st-vcard{flex:0 0 clamp(135px,14.5vw,193px);min-width:0;scroll-snap-align:start;display:block;color:#edf5ee}
.st-vcard-art{position:relative;aspect-ratio:9/16;background:linear-gradient(145deg,#244c39,#132025 46%,#27203b);border:1px solid #315a42;border-radius:12px;overflow:hidden;transition:transform .2s,border-color .2s;display:grid;place-items:center}
.st-vcard:hover .st-vcard-art{transform:translateY(-3px);border-color:#67fca0}
.st-vcard-art>img{width:100%;height:100%;object-fit:cover}
.st-vcard-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#98efb9;gap:4px}
.st-vcard-empty span{font-size:70px}.st-vcard-empty small{font-size:9px;letter-spacing:1.5px}
.st-vcard-live,.st-vcard-offline{position:absolute;top:9px;left:9px;font-size:10px;font-weight:900;color:white;background:#e63869;padding:6px 8px;border-radius:5px}
.st-vcard-offline{background:#242730}
.st-vcard-viewers{position:absolute;bottom:9px;left:9px;background:#0b1313d9;padding:5px 8px;border-radius:6px;font-size:10px;font-weight:750}
.st-vcard-author{display:flex;align-items:center;gap:8px;padding:8px 1px}
.st-vcard-author .avatar{width:29px;height:29px;flex:0 0 29px}
.st-vcard-author>div{min-width:0}
.st-vcard-author strong,.st-vcard-author small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-vcard-author strong{font-size:12px}.st-vcard-author small{font-size:10px;color:#aab9b0;margin-top:3px}
.st-vertical-discover{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:27px 0;background:radial-gradient(circle at 80% 0,#245d4580,transparent 42%),linear-gradient(110deg,#14281e,#151b2d);border:1px solid #376848;border-radius:14px;padding:23px}
.st-vertical-discover span,.st-vertical-kicker{color:#7fffad;font-size:11px;font-weight:900;letter-spacing:1px}
.st-vertical-discover h2{font-size:19px;margin:7px 0}.st-vertical-discover p{color:#bacdc3;margin:0;font-size:12px}
.st-vertical-empty{text-align:center;margin:35px auto;max-width:850px;padding:35px 20px;border:1px solid #294835;border-radius:17px;background:radial-gradient(circle at 55% 45%,#214736,#0c121d 76%)}
.st-vertical-empty>span{color:#71f5a2;font-size:12px;font-weight:850;letter-spacing:2px}
.st-vertical-empty h1{font-size:clamp(26px,4vw,43px);margin:11px 0 8px}
.st-vertical-empty p{font-size:14px;line-height:1.7;color:#becfc3;max-width:530px;margin:0 auto 22px}
.st-vertical-empty>div:not(.st-vertical-empty-art){display:flex;justify-content:center;flex-wrap:wrap;gap:11px}
.st-vertical-empty-art{height:200px;display:flex;justify-content:center;align-items:center;gap:17px;margin-top:18px;overflow:hidden}
.st-vertical-empty-art span{color:#80ffad;background:#11231b;border:1px solid #487759;border-radius:11px;font-size:36px;padding:17px}
.st-vertical-empty-art span:nth-child(2){font-size:11px;color:#fff;background:#e33268;font-weight:900}
.st-broadcast-orientation{margin:16px 0;padding:17px;border:1px solid #375c48;border-radius:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;background:#111c19}
.st-broadcast-orientation legend{color:#baffce;font-weight:900;padding:0 8px}
.st-broadcast-orientation>label{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;background:#1b2824;border:1px solid #3c4e45;border-radius:11px;padding:13px;cursor:pointer}
.st-broadcast-orientation>label:has(input:checked){background:#1c4730;border-color:#70f3a0}
.st-broadcast-orientation input{grid-row:1/3;accent-color:#6dfa9a}
.st-broadcast-orientation label b{font-size:13px}
.st-broadcast-orientation label small{grid-column:2;color:#bac9bf;font-size:11px;margin-top:5px}
.st-broadcast-orientation .st-orientation-icon{grid-column:1;grid-row:1/3;font-size:27px;display:none}
.st-broadcast-orientation>p{grid-column:1/-1;margin:0;font-size:11px}
.st-signal-warning{color:#ffcf75!important;font-weight:800}
.st-vertical-page{max-width:1180px;margin:0 auto}
.st-vertical-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.st-vertical-head h1{font-size:22px;margin:5px 0}
.st-vertical-head>div:last-child{display:flex;gap:9px}
.st-vertical-layout{display:grid;grid-template-columns:minmax(300px,510px) minmax(270px,410px);gap:18px;justify-content:center;align-items:start}
.st-vertical-view{min-width:0}
.st-vertical-stage{position:relative;isolation:isolate;overflow:hidden;border:1px solid #3d5346;border-radius:17px;background:linear-gradient(160deg,#143126,#0a0b10 70%);aspect-ratio:9/16;width:100%;max-height:min(79dvh,850px)}
.st-vertical-stage>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0b0d12}
.st-vertical-stage::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0008,transparent 18%,transparent 44%,#000b 100%);z-index:1}
.st-vertical-stage-top,.st-vertical-sideactions,.st-vertical-float-chat,.st-vertical-overlay-bottom{position:absolute;z-index:3}
.st-vertical-stage-top{display:flex;top:0;left:0;right:0;align-items:center;gap:8px;padding:13px 11px}
.st-vertical-back{flex-shrink:0;border-radius:99px;background:#13181aa8;font-size:29px;width:30px;height:30px;display:grid;place-items:center;line-height:1}
.st-vertical-identity{display:flex;align-items:center;gap:7px;min-width:0;flex:1}
.st-vertical-identity .avatar{width:36px;height:36px;flex:0 0 36px;border:2px solid #75ffa3}
.st-vertical-identity span:not(.avatar){min-width:0}
.st-vertical-identity strong,.st-vertical-identity small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px #000}
.st-vertical-identity strong{font-size:13px}.st-vertical-identity small{font-size:10px;margin-top:3px}
.st-vertical-live{background:#e63565;color:#fff;border-radius:7px;padding:7px 8px;font-size:10px;font-weight:900;white-space:nowrap}
.st-vertical-live.off{background:#4c5158}
.st-vertical-follow{border:0;background:#63fb97;color:#092415;padding:8px 10px;white-space:nowrap;font-size:11px;font-weight:900;border-radius:7px}
.st-vertical-wait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:11px;color:#dfede3;text-align:center}
.st-vertical-wait>span{font-size:68px;color:#63e69b}.st-vertical-wait strong{font-size:14px}.st-vertical-wait small{color:#aabbb0;font-size:12px}
.st-vertical-sideactions{right:10px;bottom:115px;display:flex;flex-direction:column;align-items:center;gap:14px}
.st-vertical-sideactions button,.st-vertical-sideactions a{width:41px;min-height:41px;background:#10171ac4;border:1px solid #778c8c66;color:white;border-radius:99px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:25px;line-height:1;gap:4px;backdrop-filter:blur(8px)}
.st-vertical-sideactions small{font-size:8px}
.st-vertical-overlay-bottom{bottom:0;left:0;right:0;padding:10px 58px 13px 14px}
.st-vertical-meta{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;max-width:85%;text-shadow:0 1px 6px #000}
.st-vertical-meta strong{font-size:14px;line-height:1.3}
.st-vertical-meta span{font-size:11px;color:#e6ebea}
.st-vertical-overlay-compose{display:none;gap:6px;align-items:center}
.st-vertical-overlay-compose input{min-width:0;flex:1;border:1px solid #a9b0b05e;background:#181b21b8;color:white;border-radius:99px;padding:12px 14px;font-size:13px}
.st-vertical-overlay-compose button{border:0;border-radius:50%;width:39px;height:39px;background:#5afa95;color:#102416;font-weight:900}
.st-vertical-stage-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.st-vertical-stage-actions button,.st-vertical-stage-actions a{color:white;background:#212d30c7;border:1px solid #74827475;border-radius:99px;padding:8px 12px;font-size:11px}
.st-vertical-float-chat{display:none;left:12px;right:66px;bottom:145px;max-height:37%;overflow:hidden;flex-direction:column;justify-content:flex-end;gap:5px;pointer-events:none;mask-image:linear-gradient(transparent,#000 25%)}
.st-vertical-float-chat .st-vertical-chat-line{font-size:12px;padding:2px 0;text-shadow:0 1px 5px #000,0 1px 9px #000}
.st-vertical-float-chat .avatar{width:23px;height:23px;flex:0 0 23px}
.st-vertical-footnote{display:flex;align-items:center;justify-content:space-between;color:#899d91;font-size:11px;margin:9px 2px 0}
.st-vertical-footnote a{color:#76f9a3}
.st-vertical-chat-panel{display:flex;flex-direction:column;height:min(79dvh,850px);border:1px solid #303e38;border-radius:15px;overflow:hidden;background:#0d1118;min-height:0}
.st-vertical-chat-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:17px 14px;border-bottom:1px solid #2b3834;background:#141a22}
.st-vertical-chat-head strong{display:block;font-size:15px}
.st-vertical-chat-head small{display:block;color:#83dca0;font-size:11px;margin-top:4px}
.st-vertical-chat-head button{border:1px solid #485b50;background:#28382e;color:#dcffe5;padding:9px;border-radius:8px;font-weight:800;font-size:11px}
.st-vertical-pin{background:#182721;margin:10px;padding:10px;border:1px solid #36513e;border-radius:8px;color:#cde9d2;font-size:12px;line-height:1.4;display:flex;gap:9px;max-height:100px;overflow:auto}
.st-vertical-pin:first-letter{color:#75ffaa}
.st-vertical-chat-lines{overflow-y:auto;flex:1;min-height:0;overscroll-behavior:contain;padding:9px 12px 17px;scrollbar-width:thin;display:flex;flex-direction:column;gap:6px}
.st-vertical-chat-line{display:flex;align-items:start;gap:8px;color:#e8eee9;font-size:13px;line-height:1.48;overflow-wrap:anywhere}
.st-vertical-chat-line .avatar{width:26px;height:26px;flex:0 0 26px}
.st-vertical-chat-line>div{min-width:0}
.st-vertical-chat-line b{color:#79ffaf;font-size:12px}
.st-vertical-chat-text{color:#e3e8e8}
.st-vertical-chat-compose{display:flex;align-items:center;gap:7px;padding:12px;background:#161b24;border-top:1px solid #33443a}
.st-vertical-chat-compose input{flex:1;min-width:0;border:1px solid #40584c;color:white;background:#0e141c;padding:12px;border-radius:9px;font-size:13px}
.st-vertical-chat-compose button{border:0;background:#62f690;color:#062118;border-radius:9px;padding:12px 14px;font-weight:900}
.st-vertical-login{color:#8affac;font-size:12px;padding:10px}
.st-vertical-recommend{margin:30px 0}
.st-vertical-recommend h2{font-size:17px}
.st-vertical-recommend p{color:#8e9e97;font-size:12px}
.st-vertical-heart-animation{position:absolute;bottom:30%;right:15%;z-index:20;pointer-events:none;font-size:36px;animation:st-v-heart 1.1s ease-out forwards}
@keyframes st-v-heart{to{transform:translateY(-110px) scale(1.4);opacity:0}}
@media(max-width:900px){
 .st-vertical-layout{grid-template-columns:minmax(260px,470px) minmax(245px,1fr)}
 .st-vertical-chat-head{padding:12px}
 .st-vertical-stage-top{gap:5px}
 .st-vertical-identity strong{font-size:11px}
}
@media(max-width:740px){
 body.vertical-watching{overflow:hidden}
 body.vertical-watching .topbar,body.vertical-watching .sidebar,body.vertical-watching .site-footer{display:none!important}
 body.vertical-watching .shell{display:block!important}
 body.vertical-watching .content{max-width:none!important;width:100%;padding:0!important;margin:0!important}
 body.vertical-watching #app{height:100dvh;overflow:hidden}
 .st-vertical-page,.st-vertical-layout,.st-vertical-view{height:100dvh;width:100%;max-width:none;margin:0;display:block}
 .st-vertical-head,.st-vertical-recommend,.st-vertical-footnote{display:none}
 .st-vertical-stage{width:100vw;max-height:none;height:100dvh;aspect-ratio:auto;border:0;border-radius:0;background:#070a0e}
 .st-vertical-stage>video{object-fit:cover}
 .st-vertical-stage-top{top:env(safe-area-inset-top,0px);padding:14px 11px;gap:6px}
 .st-vertical-identity .avatar{width:32px;height:32px;flex:0 0 32px}
 .st-vertical-follow{padding:8px 9px}
 .st-vertical-live{padding:6px}
 .st-vertical-overlay-bottom{bottom:env(safe-area-inset-bottom,0px);padding:10px 56px 16px 13px}
 .st-vertical-overlay-compose{display:flex}
 .st-vertical-sideactions{bottom:142px;right:9px}
 .st-vertical-float-chat{display:flex}
 .st-vertical-chat-panel{display:none}
 .st-vertical-compact{background:#080d12;overflow-y:auto;height:100dvh}
 .st-vertical-compact .st-vertical-layout{height:auto;display:flex;flex-direction:column}
 .st-vertical-compact .st-vertical-view{height:auto}
 .st-vertical-compact .st-vertical-stage{height:auto;aspect-ratio:16/9;min-height:0}
 .st-vertical-compact .st-vertical-stage-top{top:0;padding:6px 9px}
 .st-vertical-compact .st-vertical-stage-top .st-vertical-identity .avatar{width:25px;height:25px;flex-basis:25px}
 .st-vertical-compact .st-vertical-live{font-size:9px;padding:4px}
 .st-vertical-compact .st-vertical-follow{font-size:10px;padding:6px}
 .st-vertical-compact .st-vertical-float-chat,.st-vertical-compact .st-vertical-overlay-compose,.st-vertical-compact .st-vertical-meta,.st-vertical-compact .st-vertical-sideactions{display:none}
 .st-vertical-compact .st-vertical-overlay-bottom{right:10px;padding:3px 8px 8px}
 .st-vertical-compact .st-vertical-stage-actions{justify-content:flex-end}
 .st-vertical-compact .st-vertical-chat-panel{display:flex;height:calc(100dvh - 56.25vw - 14px);width:100%;min-height:280px;border:0;border-radius:0;background:#090c11}
 .st-vertical-compact .st-vertical-pin{margin:6px 10px;max-height:64px}
 .st-vertical-compact .st-vertical-chat-lines{padding:7px 12px;gap:4px}
 .st-vertical-compact .st-vertical-chat-compose{padding:9px 12px calc(10px + env(safe-area-inset-bottom,0px))}
 .st-vertical-compact .st-vertical-stage>video{object-fit:contain}
}
@media(max-width:375px){
 .st-vertical-stage-top .st-vertical-identity small{font-size:9px}
 .st-vertical-live{display:none}
 .st-vertical-sideactions{bottom:140px}
 .st-broadcast-orientation{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.st-vcard-art{transition:none}.st-vertical-heart-animation{animation:none;opacity:.8}}

.st-studio-portrait{aspect-ratio:9/16!important;width:min(100%,340px);max-height:600px;margin:0 auto}
.st-studio-portrait video{object-fit:contain}
@media(max-width:740px){.st-studio-portrait{width:min(100%,300px)}}

@media(max-width:740px){
 .st-vertical-compact .st-vertical-sideactions{display:flex;bottom:49px;right:8px}
 .st-vertical-compact .st-vertical-sideactions>*:not(#st-vertical-mute){display:none}
 .st-vertical-compact #st-vertical-mute{width:33px;height:33px;min-height:33px;font-size:18px}
 .st-vertical-compact #st-vertical-mute small{display:none}
}

/* Simultaneous portrait + landscape streaming in one creator account. */
.st-dual-help{margin:14px 0;background:linear-gradient(110deg,#1d3c2a,#17231f);border:1px solid #426e4a;border-radius:10px;padding:14px 16px}
.st-dual-help strong{color:#adffd0;font-size:13px}
.st-dual-help p{color:#bacdc2;margin:6px 0 0;font-size:12px;line-height:1.5}
.st-dual-mode-status{display:flex;gap:8px;flex-wrap:wrap;margin:13px 0}
.st-dual-mode-status span{background:#122820;border:1px solid #3b6048;border-radius:8px;padding:9px 11px;color:#d7e8dc;font-size:12px;font-weight:800}
.st-dual-vertical-key .secret{font-size:11px;overflow-wrap:anywhere}
.st-dual-vertical-key .form-actions{margin:12px 0}