/* MobileShell v4.1: shared layout across every page; retains desktop interface. */
:root{--vx-red:#f33255;--vx-ink:#09070b;--vx-safe-bottom:env(safe-area-inset-bottom,0px);--vx-safe-top:env(safe-area-inset-top,0px)}
html{scroll-padding-top:70px}html,body{max-width:100%;}button,a,input,textarea,select{touch-action:manipulation}img,video,canvas{max-width:100%}html{overscroll-behavior-x:none}
.vx-mobile-nav{display:none}.vx-mobile-top{display:none}
@media(max-width:767px){
 html{font-size:16px;-webkit-text-size-adjust:100%;}html,body{width:100%;overflow-x:clip!important}
 body{padding-bottom:calc(80px + var(--vx-safe-bottom))!important;min-width:0!important}
 button,input,select,textarea{font-size:16px!important;max-width:100%}button{min-height:42px}
 .vx-mobile-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;align-items:stretch;gap:2px;min-height:66px;padding:5px 7px calc(6px + var(--vx-safe-bottom));background:#0b080df2;border-top:1px solid #a92942;backdrop-filter:blur(15px);z-index:10002;box-shadow:0 -8px 36px #0008}
 .vx-mobile-nav a{color:#d1bec5;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;font:600 10px system-ui;gap:4px;min-width:0;max-width:23%;-webkit-tap-highlight-color:transparent}
 .vx-mobile-nav a.vx-active,.vx-mobile-nav a:focus-visible{color:#ff4266}.vx-mobile-nav .vx-glyph{font-size:23px;line-height:25px}.vx-mobile-nav a:focus-visible{outline:2px solid #ff4767;outline-offset:-2px}
 .vx-mobile-top{display:flex;align-items:center;justify-content:space-between;padding:calc(9px + var(--vx-safe-top)) 16px 10px;background:#09070c;min-height:56px;border-bottom:1px solid #52202d;position:sticky;top:0;z-index:9998;color:white;font:800 17px system-ui}
 .vx-mobile-top img{width:32px;height:32px;border-radius:8px}.vx-mobile-top a{color:#eee;text-decoration:none;display:inline-flex;gap:8px;align-items:center}
 .vx-mobile-top .vx-mobile-tag{color:#e95b74;font-size:11px;letter-spacing:1px}
 /* Original home feed: hide desktop sidebar and use swipe-safe single-column videos */
 body[data-vx-page="home"] .header{display:none!important}
 body[data-vx-page="home"] .sidebar{display:none!important}
 body[data-vx-page="home"] .main-container{margin:0!important;width:100%!important;padding:0 12px!important;min-width:0!important}
 body[data-vx-page="home"] .main-content{padding:10px 0!important;width:100%!important;max-width:100%!important;min-width:0!important}
 body[data-vx-page="home"] .videos-grid,body[data-vx-page="home"] .video-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
 body[data-vx-page="home"] .video-card{width:100%!important;max-width:100%!important}
 body[data-vx-page="home"] .video-modal .modal-content{width:100%!important;max-width:100%!important;max-height:100dvh!important;overflow-y:auto!important;padding:10px!important;margin:0!important;border-radius:0!important}
 body[data-vx-page="home"] .video-modal .video-player-container{width:100%!important;max-width:100%!important}
 body[data-vx-page="home"] .video-modal .video-sidebar{width:100%!important;max-width:100%!important;position:static!important}
 body[data-vx-page="home"] .video-modal .comments-section{min-width:0!important;max-width:100%!important}
 body[data-vx-page="home"] .video-modal{padding:0!important}
 /* Forms: no 3D card tilt, hidden mouse pointer, tiny text or wide panels on phones. */
 body[data-vx-page="login"],body[data-vx-page="signup"]{min-height:100dvh!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:calc(24px + var(--vx-safe-top)) 16px calc(36px + var(--vx-safe-bottom))!important;overflow-x:clip!important;cursor:auto!important;background:radial-gradient(ellipse at 50% 5%,#45101c,#09070b 60%)!important}
 body[data-vx-page="login"] *,body[data-vx-page="signup"] *{cursor:auto!important}
 body[data-vx-page="login"] .container,body[data-vx-page="signup"] .container{width:100%!important;min-width:0!important;max-width:520px!important;margin:0 auto!important;padding:0!important;transform:none!important}
 body[data-vx-page="login"] .login-card,body[data-vx-page="signup"] .card{width:100%!important;max-width:100%!important;padding:24px 18px!important;margin:0!important;transform:none!important;border-radius:23px!important;background:#120d16f5!important;box-shadow:0 15px 60px #000a!important;backdrop-filter:none!important}
 body[data-vx-page="login"] .login-card:hover{transform:none!important}
 body[data-vx-page="login"] .title h1{font-size:clamp(24px,7vw,34px)!important;line-height:1.12!important}
 body[data-vx-page="login"] .input-group{width:100%!important;min-width:0!important}
 body[data-vx-page="login"] .input-group input,body[data-vx-page="signup"] input{width:100%!important;min-width:0!important;min-height:49px!important}
 body[data-vx-page="login"] .btn,body[data-vx-page="signup"] button{min-height:49px!important}
 body[data-vx-page="login"] .cursor-container,body[data-vx-page="login"] .card-particles,body[data-vx-page="login"] .card-glow,body[data-vx-page="login"] .logo-hologram{display:none!important}
 body[data-vx-page="login"] .audio-controls{display:none!important}
 body[data-vx-page="signup"] .card h1{font-size:27px!important}
 body[data-vx-page="signup"] .footer{font-size:14px}
 /* shared forms / editors; desktop panels become stacked full-width cards */
 body[data-vx-page="channels"] .bar,body[data-vx-page="channels"] .bar nav{display:none!important}
 body[data-vx-page="channels"] .layout{display:flex!important;flex-direction:column!important;padding:10px!important;gap:12px!important;width:100%!important}
 body[data-vx-page="channels"] .layout>*{width:100%!important;max-width:100%!important;min-width:0!important;grid-column:auto!important}
 body[data-vx-page="channels"] .center{order:0!important;padding:0!important}
 body[data-vx-page="channels"] .left{order:1!important}
 body[data-vx-page="channels"] .right{order:2!important;max-height:none!important;overflow:visible!important}
 body[data-vx-page="channels"] .player-tools{gap:4px!important;flex-wrap:wrap!important}
 body[data-vx-page="channels"] .player-shell video{aspect-ratio:16/9!important}
 body[data-vx-page="channels"] .program{min-width:0;flex-wrap:wrap}
 body[data-vx-page="channels"] .chat-form input{font-size:16px!important}
 body[data-vx-page="channels"] .panel{padding:13px!important}
 body[data-vx-page="channels"] .title-row{align-items:flex-start;flex-wrap:wrap}
 body[data-vx-page="channels"] .btn-row{flex-wrap:wrap}
 body[data-vx-page="studio"] .studio-shell,body[data-vx-page="studio"] .studio-layout,body[data-vx-page="studio"] .studio-grid{grid-template-columns:minmax(0,1fr)!important;max-width:100%!important}
 body[data-vx-page="studio"] .studio-sidebar,body[data-vx-page="studio"] .studio-panel{max-width:100%!important}
 body[data-vx-page="studio"] .studio-timeline{overflow-x:auto;max-width:100%}
 body[data-vx-page="profile"] .profile-layout,body[data-vx-page="profile"] .profile-grid{grid-template-columns:minmax(0,1fr)!important}
 body[data-vx-page="profile"] .profile-tabs{overflow-x:auto;display:flex;scrollbar-width:none;max-width:100%}
 body[data-vx-page="genesis"] .genesis-layout,body[data-vx-page="genesis"] .genesis-grid{max-width:100%!important}
 body[data-vx-page="genesis"] textarea,body[data-vx-page="genesis"] pre{max-width:100%!important}
 body[data-vx-page="policy"] main,body[data-vx-page="legal"] main,body[data-vx-page="help"] main{max-width:100%!important;padding-left:14px!important;padding-right:14px!important}
 body[data-vx-page="policy"] textarea,body[data-vx-page="legal"] textarea{max-width:100%}
 .vx-mobile-sheet{position:fixed!important;inset:auto 0 0!important;max-height:75dvh!important;border-radius:22px 22px 0 0!important;overflow:auto!important;padding-bottom:calc(25px + var(--vx-safe-bottom))!important;z-index:10005!important}
}
@media(max-width:767px) and (orientation:landscape){body[data-vx-page="home"] .video-modal .modal-content{max-height:100dvh!important}.vx-mobile-nav{min-height:45px}.vx-mobile-top{display:none!important}}
@media(prefers-reduced-motion:reduce){body *,body *:before,body *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* Avoid full-page expensive visual layers in the legacy login on mobile. */
@media(max-width:767px){body[data-vx-page="login"] .particles-container,body[data-vx-page="login"] #particles-js,body[data-vx-page="login"] canvas,body[data-vx-page="login"] .background-elements,body[data-vx-page="login"] .floating-elements{display:none!important;pointer-events:none!important}body[data-vx-page="login"] .login-card *,body[data-vx-page="signup"] .card *{max-width:100%}body[data-vx-page="login"] .footer-links{flex-wrap:wrap!important;gap:12px!important}body[data-vx-page="login"] .checkbox-container{min-height:34px!important}body[data-vx-page="login"] #loginBtn{width:100%!important}}

/* Mobile auth is purpose-built: the approved crimson platform identity, compact controls and zero mouse-era cursor effects. */
@media(max-width:767px){
body[data-vx-page="login"]{background:radial-gradient(ellipse at 50% 0,#4a0c1c,#09070b 66%)!important}
body[data-vx-page="login"] .logo-container{margin:5px 0 14px!important;height:auto!important;min-height:70px!important}
body[data-vx-page="login"] .logo-wrapper{max-height:85px!important;margin:0 auto!important}
body[data-vx-page="login"] .logo{width:72px!important;height:72px!important;object-fit:contain!important}
body[data-vx-page="login"] .title{margin:10px 0 22px!important}
body[data-vx-page="login"] .title h1{font-size:clamp(25px,7.5vw,32px)!important;line-height:1.15!important;background:none!important;color:#ffffff!important;filter:none!important;text-shadow:none!important}
body[data-vx-page="login"] .title p{font-size:14px!important;line-height:1.5!important;letter-spacing:0!important;color:#cdbbc2!important;margin-top:7px!important}
body[data-vx-page="login"] .login-card{border-color:#70273d!important;background:linear-gradient(135deg,#1d0e18,#0e0b11)!important}
body[data-vx-page="login"] .btn-primary,body[data-vx-page="login"] #loginBtn{background:linear-gradient(115deg,#c91b40,#fc4665)!important;border:1px solid #f85270!important;box-shadow:0 5px 25px #b41c4355!important;color:white!important}
body[data-vx-page="login"] .input-group input{border-color:#4e293b!important;background:#08060ebf!important;border-radius:14px!important;font-size:16px!important}
body[data-vx-page="login"] .input-group input:focus{border-color:#fa496c!important;box-shadow:0 0 0 3px #f5355733!important}
body[data-vx-page="login"] .footer-links{margin-top:18px!important;padding-top:15px!important;gap:10px!important}
body[data-vx-page="signup"]{background:radial-gradient(ellipse at 50% 0,#450c20,#09070b 68%)!important}
body[data-vx-page="signup"] .card{box-shadow:0 14px 40px #0009!important}
}

@media(max-width:767px){.vx-comment-toggle{min-height:42px!important}.vx-comments-close{display:none}.vx-comments-scrim{display:none}.vx-comments-scrim.open{display:block;position:fixed;inset:0;background:#000a;z-index:209;pointer-events:auto}.video-modal #commentsSection.vx-comments-drawer{display:block!important;position:fixed!important;inset:auto 0 0!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:min(76dvh,800px)!important;max-height:76dvh!important;overflow:auto!important;overscroll-behavior:contain;background:#130e17!important;border:1px solid #81344b!important;border-radius:23px 23px 0 0!important;box-shadow:0 -15px 60px #000e!important;z-index:210!important;padding:15px 15px calc(25px + env(safe-area-inset-bottom))!important}.vx-comments-drawer .vx-comments-close{display:block;position:sticky;top:0;z-index:211;margin:0 0 12px auto;background:#2d1521;color:#fff;border:1px solid #99425b;padding:9px 16px;border-radius:10px}.vx-comments-drawer .comment-form{position:sticky;bottom:0;background:#130e17;padding-bottom:calc(8px + var(--vx-keyboard-overlap,0px))}.vx-comments-drawer input{min-width:0!important}}