:root{--sidebar-width: 256px;--sidebar-studio-width: 400px;--header-height: 48px;--control-bar-height: 64px;--backstage-height: 128px;--color-primary: #2563EB;--color-primary-dark: #1D4ED8;--color-bg-dark: #181a1b;--color-bg-light: #f7f9fa}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}.hide-on-mobile{display:block}.show-on-mobile{display:none}.no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.no-scrollbar::-webkit-scrollbar{display:none}.scrollbar-thin{scrollbar-width:thin}.scrollbar-thin::-webkit-scrollbar{width:6px;height:6px}.scrollbar-thin::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes glow{0%,to{opacity:.5}50%{opacity:1}}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes ticker{0%{transform:translate(0)}to{transform:translate(-33.33%)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-fadeIn{animation:fadeIn .2s ease-out}.animate-slideUp{animation:slideUp .3s ease-out}.animate-slideInRight{animation:slideInRight .3s ease-out}.animate-slideInLeft{animation:slideInLeft .3s ease-out}.animate-ticker{animation:ticker 15s linear infinite}.animate-pulse{animation:pulse 2s ease-in-out infinite}.mobile-sidebar-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.5);z-index:40;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}.mobile-sidebar-overlay.active{opacity:1;visibility:visible}.mobile-sidebar{position:fixed;right:0;top:0;bottom:0;width:85%;max-width:400px;z-index:50;transform:translate(100%);transition:transform .3s ease-out}.mobile-sidebar.active{transform:translate(0)}.dashboard-sidebar-mobile{position:fixed;left:0;top:0;bottom:0;width:85%;max-width:280px;z-index:50;transform:translate(-100%);transition:transform .3s ease-out}.dashboard-sidebar-mobile.active{transform:translate(0)}@media (max-width: 1024px){:root{--sidebar-studio-width: 340px}.studio-sidebar{width:var(--sidebar-studio-width)}.dashboard-sidebar{width:220px}}@media (max-width: 768px){:root{--header-height: 56px;--control-bar-height: 72px;--backstage-height: 100px}.hide-on-tablet{display:none!important}.show-on-tablet{display:block!important}.landing-nav{padding:1rem}.landing-hero{flex-direction:column;padding-top:2rem;padding-bottom:2rem}.landing-hero-text{padding-right:0;text-align:center;margin-bottom:2rem}.landing-hero h1{font-size:2.5rem}.landing-3d-scene{height:300px;margin-top:2rem}.landing-features-grid{grid-template-columns:1fr;gap:1rem}.dashboard-sidebar{display:none}.dashboard-sidebar-mobile-trigger{display:flex!important}.dashboard-content{margin-left:0;padding:1rem}.dashboard-header{padding:0 1rem}.studio-sidebar{display:none}.studio-mobile-sidebar-trigger{display:flex!important}.studio-header{padding:0 .75rem}.studio-header-title{max-width:120px;font-size:.75rem}.studio-backstage{height:var(--backstage-height);padding:.5rem}.studio-backstage-label{display:none}.control-bar{height:var(--control-bar-height);gap:.5rem;padding:0 .5rem}.control-button-label{display:none}.control-button{min-width:48px;padding:.5rem}.guest-lobby-container{flex-direction:column;height:auto;max-height:none}.guest-lobby-preview{padding:1rem}.guest-lobby-form{width:100%;border-left:none;border-top:1px solid #e5e7eb;padding:1.5rem}.modal-container{width:95%;max-width:100%;margin:.5rem;max-height:90vh;overflow-y:auto}.settings-modal{flex-direction:column;width:95%;height:90vh}.settings-modal-sidebar{width:100%;flex-direction:row;overflow-x:auto;padding:0;border-right:none;border-bottom:1px solid #e5e7eb}.settings-modal-sidebar button{padding:.75rem;flex-shrink:0;border-left:none;border-bottom:3px solid transparent}.settings-modal-sidebar button.active{border-left:none;border-bottom-color:var(--color-primary)}.broadcast-card{flex-direction:column}.broadcast-card-thumbnail{width:100%;height:120px;margin-bottom:1rem}.broadcast-card-actions{flex-direction:column;gap:.5rem;margin-top:1rem;width:100%}.broadcast-card-actions button{width:100%}}@media (max-width: 640px){:root{--header-height: 48px;--control-bar-height: 56px;--backstage-height: 80px}html,body{overflow-x:hidden;width:100%;max-width:100vw}.hide-on-mobile{display:none!important}.show-on-mobile{display:flex!important}h1{font-size:1.75rem!important}h2{font-size:1.5rem!important}.landing-nav{padding:.75rem 1rem}.landing-nav-logo-text{display:none}.landing-nav-buttons{gap:.5rem}.landing-nav-login{display:none}.landing-nav-register{padding:.5rem 1rem;font-size:.875rem}.landing-hero{padding:1.5rem 1rem 3rem}.landing-hero h1{font-size:2rem;line-height:1.2}.landing-hero-description{font-size:1rem}.landing-hero-buttons{flex-direction:column;width:100%}.landing-hero-buttons a,.landing-hero-buttons button{width:100%}.landing-3d-scene{height:250px}.landing-features-section{padding:3rem 1rem}.landing-feature-card{padding:1.5rem}.auth-container{padding:1rem;min-height:calc(100vh - 32px)}.auth-form-container{padding:1.5rem;border-radius:.75rem}.auth-logo{width:56px;height:56px}.auth-title{font-size:1.5rem}.dashboard-tabs{overflow-x:auto;white-space:nowrap;gap:1.5rem}.dashboard-action-bar{flex-direction:column;gap:1rem;align-items:stretch}.dashboard-action-bar button{width:100%;justify-content:center}.dashboard-header h1{font-size:1.125rem}.studio-main{min-height:calc(100vh - var(--header-height) - var(--control-bar-height) - var(--backstage-height));overflow:hidden}.studio-stage{padding:.25rem}.studio-header{height:var(--header-height);padding:0 .5rem!important}.studio-header-buttons{gap:.25rem}.studio-header-record-btn,.studio-header-live-btn{padding:.25rem .5rem;font-size:.625rem;min-height:28px}.studio-backstage{height:var(--backstage-height);gap:.5rem;padding:0 .5rem;overflow:hidden}.backstage-tile{height:56px!important;width:84px!important;min-width:84px!important;flex-shrink:0;aspect-ratio:16/9}.backstage-add-ai-btn{height:56px!important;width:84px!important;min-width:84px!important;flex-shrink:0;aspect-ratio:16/9;padding:.25rem!important}.backstage-add-ai-btn span{font-size:8px!important}.backstage-add-ai-btn>div{width:20px!important;height:20px!important;font-size:8px!important}.control-bar{height:var(--control-bar-height)!important;gap:.125rem!important;justify-content:center;padding:0 .25rem!important;overflow-x:auto;overflow-y:hidden}.control-button{min-width:40px!important;max-width:52px;padding:.25rem!important;gap:0!important;min-height:auto!important}.control-button>div{padding:.375rem!important}.control-button svg{width:18px!important;height:18px!important}.control-button-label{display:none!important}.present-menu{width:200px;min-width:180px;left:50%;transform:translate(-50%)}.layout-selector{padding:.25rem .375rem!important;gap:.25rem!important;max-width:calc(100vw - 1rem)!important;border-radius:.5rem!important;flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch}.layout-selector button{min-width:32px!important;width:32px!important;height:28px!important;padding:.125rem!important;flex-shrink:0}.layout-selector button svg{width:12px!important;height:12px!important}.layout-selector>div[class*=w-px]{height:1rem!important;margin:0 .125rem!important}.guest-lobby-container{flex-direction:column;border-radius:0!important;margin:0!important;width:100%!important;max-width:100%!important;height:100%!important;max-height:100vh!important;overflow-y:auto;-webkit-overflow-scrolling:touch}.guest-lobby-preview{padding:.75rem;flex-shrink:0}.guest-lobby-preview-video{border-radius:.5rem;aspect-ratio:16/9;max-height:35vh}.guest-lobby-controls{bottom:.5rem;gap:.5rem}.guest-lobby-controls button{padding:.5rem;min-height:36px;min-width:36px}.guest-lobby-audio-meter{margin-top:.75rem;max-width:none}.guest-lobby-device-selects{margin-top:.5rem;max-width:none}.guest-lobby-device-selects select{padding:.625rem .75rem!important;font-size:16px!important}.guest-lobby-form{padding:1rem!important;flex:1;display:flex;flex-direction:column}.guest-lobby-form h2{font-size:1.125rem!important;margin-bottom:.25rem}.guest-lobby-form p{font-size:.75rem}.guest-lobby-form-inputs{margin-bottom:1rem}.guest-lobby-form-inputs input{padding:.75rem!important;font-size:16px!important}.guest-lobby-join-btn{padding:.75rem!important;font-size:1rem!important;margin-top:auto}.modal-container{width:100%;height:100%;max-height:100vh;margin:0;border-radius:0}.modal-header{padding:.75rem 1rem}.modal-content{padding:1rem}.modal-footer{padding:.75rem 1rem}.create-broadcast-modal{width:100%;border-radius:0}.settings-modal{width:100%;height:100%;border-radius:0}.settings-modal-content{padding:1rem}.settings-video-preview{margin-bottom:1rem}.invite-modal{width:95%;max-width:95vw}.invite-modal-input{flex-direction:column;gap:.5rem}.invite-modal-input input{width:100%;font-size:16px!important}.invite-modal-input button{width:100%}.video-tile-name-tag{font-size:.5rem!important;padding:.125rem .25rem!important;max-width:90%}.video-tile-headline{display:none}.video-tile-menu{min-width:140px}.sidebar-tabs-vertical{flex-direction:row;width:100%;overflow-x:auto;padding:.5rem;gap:.5rem;border-left:none;border-top:1px solid #e5e7eb;-webkit-overflow-scrolling:touch}.sidebar-tabs-vertical button{flex-shrink:0;width:auto;aspect-ratio:auto;padding:.5rem .75rem;border-left:none;border-bottom:2px solid transparent;min-height:40px}.sidebar-tabs-vertical button.active{border-left-color:transparent;border-bottom-color:var(--color-primary)}.mobile-sidebar{width:90%!important;max-width:320px!important}.go-live-modal{width:100%;height:100%;border-radius:0;max-height:100vh}.stage-control-buttons{display:none!important}.video-tile-name-wrapper{transform:scale(.7);transform-origin:bottom left}.video-tile-name-classic{padding:.125rem .375rem!important}.video-tile-name-classic span{font-size:.5rem!important;max-width:100px!important}.video-tile-name-bubble{padding:.25rem .5rem!important}.video-tile-name-bubble span{font-size:.5rem!important}.video-tile-name-minimal{padding:.125rem .375rem!important}.video-tile-name-minimal span{font-size:.5rem!important}.video-tile-name-block{padding:.25rem .5rem!important}.video-tile-name-block span{font-size:.5rem!important}.video-tile-headline{display:none!important}.studio-banner{padding:.25rem .5rem!important;font-size:.625rem!important;border-left-width:4px!important}.studio-ticker{padding:.25rem 0!important;font-size:.625rem!important;border-top-width:2px!important}.comment-overlay{transform:scale(.7);transform-origin:bottom left}.layout-selector{padding:.125rem .25rem!important;gap:.125rem!important;max-width:calc(100vw - .5rem)!important}.layout-selector button{min-width:26px!important;width:26px!important;height:22px!important}.layout-selector-add-btn,.layout-selector-settings-btn{display:none!important}.studio-backstage{height:56px!important;padding:0 .25rem!important}.studio-backstage-label{display:none!important}.backstage-tile{height:40px!important;width:60px!important;min-width:60px!important}.backstage-add-ai-btn{height:40px!important;width:60px!important;min-width:60px!important;padding:.125rem!important}.backstage-add-ai-btn span{font-size:6px!important}.backstage-add-ai-btn>div:first-child{width:16px!important;height:16px!important;font-size:6px!important}.control-bar{height:48px!important;padding:0 .125rem!important}.control-button{min-width:36px!important;max-width:44px!important;padding:.125rem!important}.control-button>div{padding:.25rem!important}.control-button svg{width:16px!important;height:16px!important}}@media (max-width: 375px){:root{--header-height: 44px;--control-bar-height: 52px;--backstage-height: 72px}.landing-hero h1{font-size:1.75rem}.landing-nav-register{padding:.375rem .75rem;font-size:.8125rem}.control-bar{padding:0 .125rem!important;gap:0!important}.control-button{min-width:36px!important;padding:.125rem!important}.control-button>div{padding:.25rem!important}.backstage-tile,.backstage-add-ai-btn{height:48px!important;width:72px!important;min-width:72px!important}.layout-selector{padding:.125rem!important}.layout-selector button{min-width:28px!important;width:28px!important;height:24px!important}.studio-header-live-btn,.studio-header-record-btn{padding:.25rem .375rem!important;font-size:.5rem!important}}@media screen and (max-height: 500px),screen and (orientation: landscape) and (max-height: 500px){.studio-backstage{display:none!important;height:0!important;overflow:hidden!important}.layout-selector{display:none!important}.studio-header{height:32px!important;padding:0 .25rem!important}.studio-header-title{font-size:9px!important;max-width:60px!important}.studio-header-live-btn{padding:.125rem .25rem!important;font-size:9px!important}.studio-header-record-btn{display:none!important}.control-bar{height:36px!important;padding:0!important}.control-button{min-width:28px!important;max-width:36px!important;padding:0!important}.control-button>div{padding:2px!important}.control-button svg{width:14px!important;height:14px!important}.studio-stage{padding:2px!important}.stage-control-buttons{display:none!important}.video-tile-name-wrapper{transform:scale(.6)!important;transform-origin:bottom left!important}.video-tile-headline{display:none!important}.studio-banner{padding:2px 4px!important;font-size:8px!important;border-left-width:2px!important}.studio-ticker{padding:2px 0!important;font-size:8px!important;border-top-width:1px!important}}@media screen and (max-height: 500px) and (min-width: 600px){.guest-lobby-container{flex-direction:row!important;height:100vh!important;height:100dvh!important}.guest-lobby-preview{width:55%!important;padding:.5rem!important}.guest-lobby-form{width:45%!important;overflow-y:auto!important;border-left:1px solid #e5e7eb!important;border-top:none!important;padding:.5rem!important}.guest-lobby-form h2{font-size:.875rem!important}.guest-lobby-preview-video{max-height:none!important}.mobile-sidebar{width:250px!important;max-width:40vw!important}}@media (hover: none) and (pointer: coarse){button,a{min-height:44px}.hover\:scale-105:hover{transform:none}}@media screen and (max-width: 768px){input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],input[type=url],input[type=search],textarea,select{font-size:16px!important}select option{font-size:16px}}@media print{.studio-sidebar,.control-bar,.studio-backstage,.studio-header{display:none!important}.studio-stage{width:100%;height:auto}}@media (prefers-contrast: high){:root{--color-primary: #0040FF;--color-bg-dark: #000000}button,a{border:2px solid currentColor}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.fullscreen-stage:fullscreen,.fullscreen-stage:-webkit-full-screen{position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;display:flex!important;align-items:center!important;justify-content:center!important;background:#000!important;z-index:999999!important;margin:0!important;padding:0!important;border-radius:0!important;box-shadow:none!important}.fullscreen-stage:fullscreen,.fullscreen-stage:-webkit-full-screen{max-width:min(100vw,calc(100vh * 16 / 9))!important;max-height:min(100vh,56.25vw)!important;aspect-ratio:16 / 9!important}.fullscreen-stage:fullscreen .absolute.bottom-6,.fullscreen-stage:-webkit-full-screen .absolute.bottom-6{opacity:0;transition:opacity .3s ease;z-index:1000001!important}.fullscreen-stage:fullscreen:hover .absolute.bottom-6,.fullscreen-stage:-webkit-full-screen:hover .absolute.bottom-6{opacity:1}:fullscreen{background-color:#000!important}:-webkit-full-screen{background-color:#000!important}.fullscreen-stage:fullscreen .z-20,.fullscreen-stage:-webkit-full-screen .z-20{z-index:20!important}.fullscreen-stage:fullscreen .z-30,.fullscreen-stage:-webkit-full-screen .z-30{z-index:30!important}.fullscreen-stage:fullscreen .z-40,.fullscreen-stage:-webkit-full-screen .z-40{z-index:40!important}