/* Current dashboard and studio workspace, with shared accessible controls. */
[hidden] { display:none !important; }
:root { --accent:#ff5b2a; --line:#303033; }
button, input, textarea, select { font-family:Geist,Arial,sans-serif; }
button { cursor:pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline:2px solid #ff764d; outline-offset:3px; }
.material-symbols-outlined { font-size:22px; flex-shrink:0; }
.primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; background:#ff5b2a; color:#fff; border:0; border-radius:9px; font-weight:650; }
.danger { color:#e55050 !important; }
.eyebrow { font-size:10px; letter-spacing:1.5px; color:#93939a; font-weight:600; margin:0 0 7px; }
.home-shell { background:#fff; color:#222225; grid-template-columns:238px minmax(0,1fr); }
.home-sidebar { background:#fafafa; border-right:1px solid #ebebed; padding:28px 18px; }
.home-account { gap:10px; }
.home-account-copy strong { font-size:14px; max-width:145px; overflow:hidden; text-overflow:ellipsis; }
.home-account-copy span { font-size:12px; color:#929298; }
.home-avatar { background:#ffe7dc; color:#a34826; border-radius:50%; }
.home-main { padding:40px clamp(24px,4vw,64px); overflow:auto; }
.home-sidebar-foot button { background:none; padding:0; color:#787881; text-align:left; font-size:12px; }
.home-sidebar-foot > span { font-size:11px; color:#aaa; }
.home-nav button { border-radius:7px; font-size:14px; font-weight:500; min-height:42px; }
.home-nav button.active { background:#fff0e9; color:#ce4820; }
.home-nav small { display:none; }
.home-invite { border:1px solid #dedee3; border-radius:8px; background:white; font-size:13px; }
.home-workspace-head { margin-top:32px; font-size:11px; }
.dashboard-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:34px; }
.dashboard-heading h1 { margin:0; font-size:28px; font-weight:650; letter-spacing:-.9px; }
.stream-search { display:flex; gap:9px; align-items:center; color:#919198; border:1px solid #e7e7ea; border-radius:8px; padding:8px 12px; }
.stream-search input { border:0; outline:none; background:none; color:#262629; width:175px; font-size:13px; }
.home-toolbar { height:54px; padding:0; border-bottom:1px solid #e9e9ec; margin-bottom:20px; }
.home-tabs { height:100%; gap:26px; }
.home-tabs button { padding:0 4px; border-radius:0; background:none; font-size:13px; }
.home-tabs button.active { border-bottom:2px solid #ff5b2a; color:#222; background:none; }
.new-stream-btn { background:#ff5b2a; color:#fff; min-height:38px; border-radius:8px; font-size:13px; padding:0 16px; margin-bottom:12px; }
.streams-head,.stream-row { grid-template-columns:minmax(210px,1fr) 110px 100px 160px; }
.streams-head { padding:14px 0; font-size:11px; color:#8b8b93; }
.streams-head button { background:none; color:inherit; padding:0; text-align:left; font-size:11px; }
.stream-row { width:100%; border-bottom:1px solid #eeeef0; padding:18px 0; cursor:default; }
.stream-row:hover { background:#fdfdfd; }
.stream-title-cell { border:0; background:none; color:#252528; text-align:left; padding:0; min-width:0; }
.stream-thumb { width:96px; height:56px; min-width:96px; background:linear-gradient(135deg,#333338,#171719); color:#b5b5bc; border-radius:6px; }
.stream-copy { min-width:0; }
.stream-copy strong { font-size:13px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.stream-copy > span { font-size:11px; color:#92929a; }
.stream-status { font-size:11px; background:#f1f1f4; color:#747480; border:0; padding:5px 9px; border-radius:5px; }
.status-scheduled { background:#edf0ff; color:#5b60a9; }
.status-live { background:#ffede7; color:#d34a20; }
.stream-edited { font-size:11px; gap:6px; justify-content:space-between; }
.stream-menu-button { background:none; color:#999; padding:5px; }
.row-channels { display:flex; gap:4px; color:#999; font-size:11px; }
.channel-dot { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#55525b; color:white; font-size:13px; font-weight:700; flex-shrink:0; }
.channel-dot.youtube { background:#ef3838; }.channel-dot.facebook { background:#1877f2; }.channel-dot.twitch { background:#9146ff; }.channel-dot.linkedin { background:#0a66c2; }
.workflow-empty { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:320px; text-align:center; padding:35px 20px; }
.workflow-empty > .material-symbols-outlined { font-size:40px; background:#fff1eb; color:#e97047; padding:22px; border-radius:22px; margin-bottom:20px; }
.workflow-empty h2 { margin:0 0 10px; font-size:21px; font-weight:600; letter-spacing:-.4px; }
.workflow-empty p { max-width:370px; font-size:13px; line-height:1.7; color:#99999f; margin:0 0 25px; }
.help-bubble { background:#fff; color:#555; border:1px solid #eee; width:50px; height:50px; font-size:10px; box-shadow:0 4px 15px #0000000a; }
.page-intro { display:flex; align-items:center; justify-content:space-between; margin:20px 0; gap:20px; }.page-intro p { color:#8a8a92; font-size:14px; }
.channel-card { display:flex; align-items:center; gap:13px; border:1px solid #e4e4e8; padding:18px; margin-bottom:12px; border-radius:10px; }
.channel-card > div { flex:1; display:grid; gap:4px; }.channel-card strong { font-size:14px; }.channel-card small { color:#8b8b94; font-size:12px; }.channel-card button { background:none; color:#888; padding:6px; }
.switch input { position:absolute; opacity:0; }.switch span { display:block; width:34px; height:20px; border-radius:20px; background:#555; cursor:pointer; }.switch span:after { content:''; display:block; width:14px; height:14px; border-radius:50%; background:#fff; position:relative; top:3px; left:3px; transition:transform .15s; }.switch input:checked + span { background:#ff5b2a; }.switch input:checked + span:after { transform:translateX(14px); }.switch input:focus-visible + span { outline:2px solid #ff764d; outline-offset:3px; }
.library-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }.library-card { display:grid; gap:12px; border:1px solid #eee; border-radius:10px; padding:22px; overflow:hidden; }.library-card strong { word-break:break-word; font-size:13px; }.library-card > .material-symbols-outlined { font-size:38px; color:#999; }.library-card a { color:#e96840; }.library-card span { font-size:12px; color:#999; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }.metrics article { display:grid; gap:18px; padding:24px; border:1px solid #eee; border-radius:10px; }.metrics article span { font-size:12px; color:#999; }.metrics strong { font-size:32px; font-weight:600; }
.workflow-modal { width:min(560px,calc(100vw - 32px)); max-height:85dvh; border:1px solid #3c3c40; border-radius:16px; padding:26px; background:#232325; color:#eeeef0; box-shadow:0 30px 100px #0008; }
.workflow-modal::backdrop { background:#0009; backdrop-filter:blur(5px); }
.workflow-modal header { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; gap:16px; }.workflow-modal header h2 { font-size:21px; font-weight:600; margin:0; }.workflow-modal header button { background:none; color:#aaa; padding:4px; }
.workflow-modal input,.workflow-modal textarea,.workflow-modal select { background:#19191b; border:1px solid #424247; color:#f5f5f6; border-radius:7px; padding:11px 12px; width:100%; box-sizing:border-box; font-size:14px; }.workflow-modal .field { margin-bottom:18px; }.workflow-modal .field > span { font-size:12px; color:#bbbbc3; margin-bottom:7px; }.workflow-modal .channel-card { border-color:#3b3b40; }.dialog-description,.workflow-modal p { font-size:13px; color:#a6a6af; line-height:1.7; }.dialog-actions { display:flex; justify-content:space-between; gap:12px; }.dialog-actions button { padding:12px 18px; }
.stream-method { display:flex; align-items:center; gap:16px; padding:20px 16px; width:100%; text-align:left; background:#2c2c30; border:1px solid #444449; border-radius:10px; margin:14px 0; color:#eee; }.stream-method > .material-symbols-outlined { font-size:27px; color:#ff845b; }.stream-method > span:nth-child(2) { flex:1; display:grid; gap:7px; }.stream-method strong { font-size:15px; }.stream-method small { font-size:12px; line-height:1.6; color:#a4a4ae; }.stream-method.selected:hover { border-color:#ff5b2a; }.stream-method.unavailable { opacity:.55; }.soon { font-size:10px; white-space:nowrap; }
.platform-choice { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:15px; }.platform-choice button { padding:9px 12px; border:1px solid #444; border-radius:7px; background:#29292d; color:#ddd; font-size:12px; }.platform-choice button.active { border-color:#ff5b2a; color:#ff9876; }
.action-menu { display:grid; gap:7px; }.action-menu button { display:flex; align-items:center; gap:14px; padding:14px; color:#ddd; background:#2e2e32; border-radius:8px; text-align:left; }
.studio-shell { grid-template-columns:168px minmax(0,1fr) 76px; grid-template-rows:62px minmax(0,1fr) 130px; }
.studio-shell.panel-open { grid-template-columns:168px minmax(0,1fr) 320px 76px; grid-template-areas:'top top top top' 'scenes stage tools rail' 'scenes controls tools rail'; }
.studio-topbar { height:62px; border-bottom:1px solid #2c2c2e; grid-template-columns:35px minmax(180px,1fr) auto minmax(250px,1fr); padding:0 18px; }
.studio-stream-title { gap:16px; font-size:12px; font-weight:500; }.studio-stream-title > span { max-width:200px; }.studio-stream-title button { font-size:10px; }.studio-live-brand { font-size:14px; letter-spacing:1px; background:none; }.studio-live-brand span { font-size:9px; }.stream-quality { font-size:10px; }.quality-btn { font-size:12px; }
.studio-topbar .go-live { background:#ff5b2a; color:#fff; border:0; border-radius:7px; font-size:12px; text-transform:none; }
.studio-orientation-tabs { top:80px; left:190px; gap:14px; }.studio-orientation-tabs button { font-size:11px; font-weight:500; min-height:30px; }.studio-orientation-tabs button.active { background:#303033; border-radius:6px; }
.studio-shell .stage-area { padding:60px 24px 10px; }.studio-shell .program-wrap { width:100%; max-width:calc((100dvh - 270px)*16/9); min-width:0; min-height:0; aspect-ratio:16/9; }.studio-shell #programCanvas { min-height:0; }.studio-shell .program-wrap::before,.studio-shell .program-wrap::after { display:none; }
.fullscreen-button { position:absolute; right:10px; bottom:10px; z-index:4; background:#222a; color:white; padding:5px; border-radius:6px; opacity:.6; }.fullscreen-button:hover { opacity:1; }
.studio-shell.portrait-output .program-wrap { aspect-ratio:9/16; max-width:calc((100dvh - 270px)*9/16); }.studio-shell .program-wrap:fullscreen { max-width:none; width:100vw; height:100dvh; background:#000; }.studio-shell .program-wrap:fullscreen canvas { object-fit:contain; }
.studio-shell .sidebar { position:static; grid-area:tools; width:auto; height:auto; display:none; background:#232325; border-left:1px solid #303034; pointer-events:auto; min-height:0; overflow:auto; }
.studio-shell.panel-open .sidebar { display:block; }.studio-shell .sidebar > .panel.active { display:block; padding:24px 18px; height:auto; overflow:visible; }.studio-shell .sidebar > .panel:not(.active) { display:none; }.panel-head h2 { font-size:17px; font-weight:600; }.panel .field { margin-top:17px; }.panel .field span { font-size:12px; }.panel input,.panel textarea,.panel select { background:#1b1b1e; border-color:#3d3d43; border-radius:7px; padding:10px; font-size:12px; }.panel .primary { width:100%; font-size:12px; margin:12px 0; }.panel .hint { font-size:11px; line-height:1.7; color:#92929c; }
#closeStudioPanel { position:absolute; right:87px; top:75px; z-index:5; background:none; color:#9a9aa4; padding:5px; }.settings-drawer { top:62px; right:76px; z-index:15; }
.restream-right-rail { padding:16px 7px; background:#1c1c1e; border-left:1px solid #303034; gap:7px; }.restream-right-rail button { font-size:9px; padding:10px 2px; border-radius:8px; gap:6px; font-weight:500; }.restream-right-rail button.active { background:#353035; color:#ff9b79; }.restream-right-rail .rail-avatar { width:38px; height:38px; margin:0 auto 15px; }
.restream-scene-rail { padding:16px 12px; gap:15px; background:#1c1c1e; }.add-scene-btn { font-size:10px; font-weight:600; border-radius:7px; background:#343437; min-height:34px; }#sceneRailList { overflow:auto; flex:1; }.scene-mini { margin-bottom:18px; }.scene-mini-head { font-size:11px; color:#a9a9b1; }.scene-mini-head button { background:none; color:#8b8b96; padding:0; }.scene-mini-head button .material-symbols-outlined { font-size:18px; }.scene-mini-thumb { width:100%; height:80px; margin-top:7px; border:1px solid #3b3b42; background:#262629; border-radius:7px; }.scene-mini.active .scene-mini-thumb { border:2px solid #ff7647; }.scene-mini-thumb small { background:#45454d; }.private-chat-btn { font-size:10px; }
.control-deck { padding:12px 0 0; grid-template-rows:30px 52px; gap:13px; }.broadcast-actions { gap:10px; }.broadcast-actions button { width:42px; height:42px; min-height:42px; border:1px solid #38383d; border-radius:9px; background:#28282b; }.broadcast-actions #recordBtn { display:flex; width:auto; gap:7px; padding:0 12px; font-size:11px; }.broadcast-actions #recordBtn span { display:inline; }.studio-layout-strip { gap:10px; }.studio-layout-strip button.active { border-color:#ff815b; }
.caption-card { margin:14px 0; padding:15px; background:#2d2d32; border-radius:9px; display:grid; gap:10px; font-size:13px; word-break:break-word; }.caption-card small { color:#999; font-size:10px; }.caption-card > div { display:flex; justify-content:space-between; }.caption-card button { color:#ff9b79; padding:6px 10px; background:#3b3333; border-radius:5px; font-size:11px; }#qrPreview { text-align:center; margin-top:25px; }#qrPreview img { width:170px; border-radius:8px; }#qrPreview p { font-size:12px; }#qrPreview button { padding:10px 15px; border-radius:7px; }.save-status { color:#8d8d98; font-size:11px; }
.auth-modal { background:#f8f8fa; z-index:30; opacity:1; backdrop-filter:none; }.auth-card { background:#fff; color:#202025; border:1px solid #e8e8ed; box-shadow:0 20px 80px #00000008; width:min(420px,calc(100vw - 40px)); padding:38px; border-radius:15px; }.auth-head { display:flex; flex-direction:column; align-items:flex-start; gap:9px; margin-bottom:30px; }.auth-head h2 { font-size:28px; letter-spacing:-.7px; }.auth-head > span { color:#92929c; font-size:12px; }.auth-card .field > span { color:#666672; font-size:12px; }.auth-card input { background:#fafafa; border:1px solid #dfdfe6; color:#222; padding:12px; border-radius:7px; }.auth-card #authSubmitBtn { background:#ff5b2a; color:#fff; border-radius:8px; }.auth-card #authModeToggle { background:none; color:#a65336; font-size:12px; }.toast { z-index:100 !important; }
@media(max-width:1150px) { .studio-live-brand { display:none; }.studio-topbar { grid-template-columns:32px minmax(150px,1fr) auto; }.studio-shell.panel-open { grid-template-columns:138px minmax(0,1fr) 285px 68px; }.studio-shell { grid-template-columns:138px minmax(0,1fr) 68px; }.studio-orientation-tabs { left:154px; }.studio-stream-title button { display:none; }.home-shell { grid-template-columns:205px minmax(0,1fr); }.streams-head,.stream-row { grid-template-columns:minmax(180px,1fr) 90px 80px 120px; }.stream-thumb { width:75px; min-width:75px; }.stream-quality { display:none; } }
@media(max-width:800px) { .home-shell { grid-template-columns:64px minmax(0,1fr); }.home-sidebar { display:flex; padding:20px 8px; }.home-account-copy,.home-account button,.home-workspace,.home-workspace-head,.home-invite,.home-sidebar-foot { display:none; }.home-nav button { font-size:0; justify-content:center; padding:10px; }.home-nav .material-symbols-outlined { font-size:23px; }.home-main { padding:24px 18px; }.dashboard-heading { flex-wrap:wrap; gap:15px; }.stream-search input { width:140px; }.streams-head { display:none; }.stream-row { grid-template-columns:minmax(140px,1fr) 70px; gap:10px; }.stream-edited,.row-channels { display:none; }.stream-row > span:not(.stream-title-cell) { margin-left:0; }.studio-shell,.studio-shell.panel-open { grid-template-columns:105px minmax(0,1fr) 60px; grid-template-rows:56px minmax(0,1fr) 110px; grid-template-areas:'top top top' 'scenes stage rail' 'scenes controls rail'; }.studio-shell.panel-open .sidebar { position:fixed; top:56px; right:60px; bottom:0; width:min(320px,calc(100vw - 70px)); z-index:8; box-shadow:-15px 0 40px #0005; }.studio-topbar { height:56px; padding:0 8px; }.studio-stream-title > span { max-width:150px; font-size:11px; }.quality-btn { display:none; }.studio-shell .stage-area { padding:55px 8px 5px; }.studio-orientation-tabs { top:68px; left:115px; gap:4px; }.studio-orientation-tabs button { font-size:9px; padding:4px; }.studio-orientation-tabs .material-symbols-outlined { font-size:15px; }.scene-mini-thumb { height:55px; }.restream-scene-rail { padding:12px 7px; }.broadcast-actions { gap:5px; }.broadcast-actions button { width:31px; height:36px; padding:5px; }.broadcast-actions #recordBtn { padding:0 6px; }.broadcast-actions #recordBtn span { display:none; }.restream-right-rail button { font-size:8px; }.restream-right-rail .material-symbols-outlined { font-size:20px; }.metrics { grid-template-columns:1fr; }.settings-drawer { right:60px; top:56px; width:min(320px,calc(100vw - 70px)); } }
/* Authentication reference: Restream login observed September 7, 2026. */
.auth-modal.active { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:64px; overflow:auto; padding:50px 20px; background:radial-gradient(ellipse 280px 280px at 44% 65%,#17223b66,transparent 100%),radial-gradient(ellipse 320px 400px at 52% 48%,#23183688,transparent 100%),#03030e; }
.auth-brand-block { text-align:center; color:#fafafa; flex-shrink:0; }
.auth-brand-block > strong { font-size:28px; font-weight:800; letter-spacing:-1px; }
.auth-brand-block > h1 { font-size:18px; line-height:26px; font-weight:400; letter-spacing:-.5px; margin:10px 0 0; color:#e4e3eb; }
.auth-modal .auth-card { width:min(426px,calc(100vw - 40px)); padding:40px; border:1px solid #191726; border-radius:26px; background:#020208; box-shadow:none; color:white; flex-shrink:0; }
.auth-modal .auth-card .field { margin:0 0 25px; }
.auth-modal .auth-card .field > span { color:#fff; font-size:14px; margin-bottom:10px; font-weight:400; }
.auth-modal .auth-card input { height:37px; background:#03030b; color:#f4f4fa; border:1px solid #2c2b39; border-radius:9px; font-size:14px; padding:8px 14px; }
.auth-modal .auth-card input:focus { border-color:#8275fb; outline:1px solid #8275fb; outline-offset:0; }
.auth-modal .auth-card #authSubmitBtn { height:37px; min-height:37px; padding:0 14px; border-radius:8px; border:1px solid #8073ff; color:white; font-size:14px; font-weight:500; background:linear-gradient(#7965ff,#5336ff); }
.auth-modal .auth-card #authModeToggle { margin-top:24px; color:#eeedf5; font-size:12px; font-weight:400; text-decoration:underline; text-underline-offset:4px; }
@media(max-height:650px) { .auth-modal.active { justify-content:flex-start; gap:30px; padding-top:30px; } }
/* Signed-in reference: Restream dark theme, observed live September 7, 2026. */
.home-shell { grid-template-columns:248px minmax(0,1fr); background:#191919; color:#f5f5f5; }
.home-sidebar { padding:16px 20px; background:#080808; border:0; gap:0; }
.home-account { margin-bottom:16px; }
.home-account-copy strong { color:#eee; font-size:13px; font-weight:600; }
.home-account-copy span { color:#b4bac3; font-size:11px; }
.home-avatar { width:32px; height:32px; background:#292929; color:#ccc; font-size:13px; }
.home-icon-button { background:transparent; color:#aeb3bf; }
.home-invite { padding:0; min-height:26px; background:none; border:0; color:#c4c9d1; font-weight:500; font-size:13px; justify-content:flex-start; }
.home-workspace-head { margin-top:24px; margin-bottom:14px; color:#abb3c0; font-size:12px; text-transform:none; letter-spacing:0; }
.home-workspace-head button { background:none; color:#aab2be; font-size:17px; }
.home-workspace { background:none; color:#c6ccd6; padding:4px 8px; min-height:28px; border:0; font-size:13px; }
.home-workspace > span { width:20px; height:20px; border-radius:3px; background:#272727; font-size:11px; }
.home-nav { gap:0; margin-top:10px; }.home-nav button { min-height:37px; padding:8px 24px; font-size:13px; font-weight:500; color:#c3cad5; gap:10px; }.home-nav button.active { color:#fff; background:#222; }.home-nav .material-symbols-outlined { font-size:18px; }
.home-main { padding:86px 20px 24px; }.dashboard-heading { display:none; }.home-toolbar { height:37px; margin-bottom:14px; border:0; }.home-tabs { gap:2px; align-items:center; }.home-tabs button { height:30px; min-height:30px; padding:0 12px; color:#b9c0cb; font-size:13px; }.home-tabs button.active { background:#3c3c3c; border:0; border-radius:20px; color:white; }.new-stream-btn { background:#3c3c3c; color:white; border-radius:24px; min-height:37px; padding:0 16px; margin:0; font-size:13px; font-weight:650; }.new-stream-btn .material-symbols-outlined { font-size:18px; }
.streams-head,.stream-row { grid-template-columns:minmax(260px,1fr) 130px 170px 200px; gap:20px; }.streams-head { color:#b0b4bd; padding:12px 8px 18px; border-bottom:1px solid #252525; }.streams-head button { font-size:13px; }.stream-row { padding:8px; min-height:88px; border:0; }.stream-row:hover { background:#202020; }.stream-title-cell { color:#eee; gap:13px; }.stream-thumb { width:124px; min-width:124px; height:70px; border-radius:0; border:1px solid #303030; background:radial-gradient(ellipse at center,#313131,#070707 70%); }.stream-thumb > .material-symbols-outlined { font-size:17px; }.stream-copy strong { font-size:13px; }.stream-copy > span { font-size:12px; color:#b2bdc9; }.stream-status { padding:3px; border-radius:0; background:#262626; color:#9c9da5; }.stream-edited { color:#b3bbc7; }.row-channels { color:#9ca4ad; }.stream-menu-button { color:#b5b9c4; }.home-sidebar-foot { display:flex; flex-wrap:wrap; gap:12px; color:#646464; }.home-sidebar-foot button,.home-sidebar-foot a { color:#686868; font-size:11px; }.home-sidebar-foot > span { display:none; }
.help-bubble { width:58px; height:58px; background:#252525; color:#eee; border:0; font-size:11px; box-shadow:none; right:22px; bottom:18px; }
.workflow-empty > .material-symbols-outlined { background:#292929; color:#b2b2bc; }.workflow-empty h2 { color:#eee; }.workflow-empty .primary { background:#414141; color:#fff; border-radius:22px; }
.home-main .channel-card,.home-main .library-card,.home-main .metrics article { border-color:#333; background:#202020; }.home-main .primary { background:#3f3f3f; border-radius:20px; }.home-main .library-card a { color:#b0a7ff; }
.workflow-modal.stream-chooser { background:#fff; color:#203047; border:0; border-radius:8px; width:min(500px,calc(100vw - 32px)); padding:24px; margin:28px auto auto; box-shadow:0 20px 60px #0004; }
.stream-chooser header { justify-content:center; margin:0 0 22px; }.stream-chooser header h2 { font-size:20px; font-weight:650; }.stream-chooser header button { position:absolute; top:20px; right:20px; color:#aaa; }
.stream-chooser .stream-method { min-height:62px; gap:9px; padding:12px; margin:10px 0; border:1px solid #eee; border-radius:8px; background:#fff; color:#283c54; }.stream-chooser .stream-method > .material-symbols-outlined:first-child { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#f4f5ff; color:#3567e9; font-size:18px; }.stream-chooser .stream-method > .material-symbols-outlined:last-child { color:#6b7b8c; font-size:20px; }.stream-chooser .stream-method strong { font-size:13px; font-weight:500; }.stream-chooser .stream-method small { font-size:11px; color:#74808d; }.stream-chooser .stream-method > span:nth-child(2) { gap:0; }.stream-chooser .stream-method:hover { border-color:#b9c9ee; background:#fafbff; }
.prejoin-shell { background:#191919; color:#eee; }.prejoin-orb { display:none; }.prejoin-brand { top:20px; left:22px; color:#626262; font-size:17px; text-transform:uppercase; }.prejoin-brand span { background:#383838; color:#eee; padding:0 4px; }.prejoin-main { max-width:1040px; grid-template-columns:1fr 500px; gap:80px; }.prejoin-info { text-align:center; }.prejoin-host-line { justify-content:center; font-size:14px; }.prejoin-host-line > span { background:#292929; }.prejoin-info h1 { font-size:24px; line-height:1.4; font-weight:650; letter-spacing:-.6px; }.prejoin-copy { margin:22px auto 0; border-radius:8px; background:#343434; color:white; font-size:13px; }.prejoin-card { background:#f8f9fc; color:#203047; border-radius:24px; padding:28px; }.prejoin-card h2 { font-size:22px; font-weight:750; }.prejoin-preview { background:#333; border-radius:9px; }.prejoin-fields input { background:#fff; border-color:#d8dde5; color:#203047; }.prejoin-controls button { background:#e9ebef; color:#203047; }.enter-studio-btn { background:#2165f5; border-radius:10px; }.prejoin-login-line { font-size:13px; }.prejoin-copyright { font-size:12px; color:#999; }
@media(max-width:1150px) { .streams-head,.stream-row { grid-template-columns:minmax(190px,1fr) 90px 80px 130px; gap:12px; }.home-shell { grid-template-columns:220px minmax(0,1fr); }.stream-thumb { width:96px; min-width:96px; }.prejoin-main { grid-template-columns:1fr minmax(360px,460px); gap:32px; } }
@media(max-width:800px) { .home-shell { grid-template-columns:64px minmax(0,1fr); }.home-sidebar { padding:20px 8px; }.home-nav button { font-size:0; padding:10px; }.home-main { padding:32px 14px; }.stream-row { grid-template-columns:minmax(140px,1fr) 65px; }.prejoin-main { grid-template-columns:1fr; gap:24px; }.stream-thumb { width:72px; min-width:72px; }.workflow-modal.stream-chooser { padding:20px; }.prejoin-info h1 { font-size:22px; } }
/* Shared dashboard section anatomy from the signed-in reference. */
.home-main:not([data-section="Home"]) .dashboard-heading { display:flex; margin:5px 8px 20px; }
.home-main:not([data-section="Home"]) .dashboard-heading h1 { font-size:21px; font-weight:500; letter-spacing:-.3px; }
.dashboard-heading .eyebrow { display:none; }
.page-actions { display:flex; justify-content:flex-end; margin-top:-58px; margin-bottom:18px; }
.light-pill { display:inline-flex; align-items:center; justify-content:center; gap:6px; background:#dedede; color:#141414; font-size:13px; font-weight:500; min-height:37px; padding:0 15px; border-radius:24px; }
.light-pill .material-symbols-outlined { font-size:18px; }
.channel-table-head,.channel-table-row { display:grid; grid-template-columns:minmax(230px,1.7fr) 1fr 1fr 120px 30px; gap:20px; align-items:center; padding:16px 8px; font-size:13px; color:#aeb5c1; border-bottom:1px solid #303030; }
.channel-table-row { min-height:86px; }.channel-table-row > button { background:none; color:#aaa; padding:4px; }.channel-identity { display:flex; align-items:center; gap:12px; padding-left:20px; }.channel-identity .channel-dot { width:52px; height:52px; font-size:18px; }.channel-identity > div { display:grid; gap:3px; }.channel-identity strong { color:#efefef; font-size:13px; }.channel-identity > div > span { text-transform:capitalize; }.connection-status { justify-self:start; border-radius:4px; padding:4px 7px; background:#252525; font-size:11px; }
.sidebar-channel-summary { margin-top:auto; margin-bottom:18px; padding:12px; border-radius:9px; background:#111; display:grid; grid-template-columns:1fr auto; gap:10px; font-size:11px; color:#ddd; }.sidebar-channel-summary button { background:none; color:#ddd; text-decoration:underline; padding:0; font-size:11px; }.sidebar-channel-summary > div { grid-column:1/-1; height:3px; background:#aaa; border-radius:2px; }.sidebar-channel-summary small { grid-column:1/-1; color:#939393; font-size:9px; }.home-sidebar-foot { margin-top:0; }#collapseSidebar { background:none; color:#949aa6; padding:0; width:18px; height:24px; min-height:0; }#collapseSidebar .material-symbols-outlined { font-size:17px; }.home-account { position:relative; } .home-account-copy { flex:1; min-width:0; }.home-icon-button { width:18px; padding:0; min-height:20px; }
.sidebar-collapsed.home-shell { grid-template-columns:64px minmax(0,1fr); }.sidebar-collapsed .home-sidebar { padding:16px 8px; }.sidebar-collapsed .home-account-copy,.sidebar-collapsed .home-icon-button,.sidebar-collapsed .home-avatar,.sidebar-collapsed .home-workspace-head,.sidebar-collapsed .home-workspace,.sidebar-collapsed .home-invite,.sidebar-collapsed .sidebar-channel-summary,.sidebar-collapsed .home-sidebar-foot { display:none; }.sidebar-collapsed .home-account { justify-content:center; }.sidebar-collapsed .home-nav button { font-size:0; padding:10px; justify-content:center; }.sidebar-collapsed .home-nav button .material-symbols-outlined { font-size:20px; }
.workflow-modal.channel-picker-modal { width:min(816px,calc(100vw - 32px)); margin:8vh auto auto; max-height:80dvh; }.channel-picker { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding-top:12px; }.channel-picker > button { border:1px solid #eee; box-shadow:0 2px 2px #0001; border-radius:9px; padding:26px 8px 12px; min-height:115px; display:flex; align-items:center; flex-direction:column; justify-content:space-between; gap:20px; background:#fff; }.channel-picker > button:hover { border-color:#b9c9ee; }.channel-picker > button > span { color:#8a9098; font-size:11px; }.platform-wordmark { font-size:27px; color:#111; font-weight:800; letter-spacing:-1px; }.platform-youtube { color:#e22; }.platform-facebook { color:#1877f2; }.platform-linkedin { color:#0077a6; }.platform-twitch { color:#9146ff; }.platform-kick { color:#171717; }.platform-instagram { color:#c93999; }.platform-rumble { color:#65b624; }.platform-custom-rtmp { font-size:20px; padding:2px 12px; border:2px solid #24394e; border-radius:3px; letter-spacing:0; }
.storage-usage { position:absolute; right:30px; top:60px; color:#a3acb8; font-size:10px; }.home-main { position:relative; }.storage-tabs { display:flex; gap:24px; margin:42px 8px 52px; }.storage-tabs button { padding:0 0 9px; background:none; color:#a5a9b1; border-bottom:2px solid transparent; border-radius:0; font-size:12px; letter-spacing:.4px; }.storage-tabs button.active { color:#fff; border-bottom-color:#fff; }.storage-tabs small { font-size:12px; color:#aaa; }.storage-dropzone { border:1px solid #282828; border-radius:14px; padding:45px 20px; text-align:center; min-height:295px; margin-bottom:25px; }.storage-dropzone.drag-active { border-color:#8073ff; background:#23212b; }.storage-dropzone p { margin:8px 0; color:#aaa; font-size:15px; }.storage-dropzone .muted { color:#747474; }.storage-dropzone > small { display:block; margin-top:15px; color:#666; font-size:11px; }.storage-dropzone .light-pill { margin-top:10px; }.storage-illustration { display:flex; justify-content:center; margin-bottom:20px; }.storage-illustration .material-symbols-outlined { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:#242424; border:1px solid #303030; color:#999; transform:rotate(-10deg); }.storage-illustration .material-symbols-outlined:nth-child(2) { transform:translateY(-12px); z-index:1; }.storage-illustration .material-symbols-outlined:last-child { transform:rotate(10deg); }
.past-streams-empty { min-height:250px; border:1px solid #282828; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#b5b9c1; }.past-streams-empty .material-symbols-outlined { font-size:46px; font-weight:200; }.past-streams-empty p { margin-top:20px; font-size:15px; }
.analytics-range { display:flex; justify-content:flex-end; align-items:center; gap:25px; margin:-52px 15px 20px; color:#7b7d83; font-size:13px; }.analytics-range > div { display:flex; border:1px solid #242424; border-radius:24px; padding:2px; }.analytics-range button { font-size:13px; background:none; color:#81838a; padding:8px 14px; border-radius:20px; }.analytics-range button.active { background:#333; color:#eee; }.analytics-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.analytics-grid article { padding:4px; background:#0c0c0e; border-radius:13px; min-height:255px; }.analytics-grid header { display:flex; gap:8px; align-items:baseline; padding:8px 15px 12px; }.analytics-grid header strong { font-size:24px; color:#fff; }.analytics-grid header span { font-size:13px; }.analytics-grid header small { color:#6c6c75; font-size:10px; }.analytics-grid article > div { border-radius:9px; background:#191919; min-height:200px; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:20px; font-size:12px; color:#777; }.analytics-grid p { margin:0 0 6px; }.change-dates { background:none; color:#909096; text-decoration:underline; padding:0; font-size:11px; }.stream-breakdown { margin-top:18px; padding:20px; background:#101010; border-radius:12px; }.stream-breakdown h2 { font-size:15px; font-weight:500; }.stream-breakdown p { color:#888; font-size:12px; }.account-details { display:grid; gap:8px; margin-bottom:25px; }.account-details span { color:#999; font-size:13px; }
@media(max-width:1050px) { .channel-table-head,.channel-table-row { grid-template-columns:minmax(170px,1.5fr) 1fr 90px 85px 25px; gap:10px; }.channel-identity { padding-left:0; }.analytics-range { margin:0 0 18px; justify-content:space-between; gap:10px; }.analytics-range button { padding:6px 10px; } }
@media(max-width:800px) { .sidebar-channel-summary { display:none; }.channel-table-head { display:none; }.channel-table-row { grid-template-columns:1fr auto 25px; }.channel-table-row > span:nth-child(2),.channel-table-row > span:nth-child(3) { display:none; }.channel-identity .channel-dot { width:35px; height:35px; }.page-actions { margin-top:0; }.channel-picker { grid-template-columns:1fr 1fr; }.platform-wordmark { font-size:21px; }.analytics-grid { grid-template-columns:1fr; }.analytics-range { flex-wrap:wrap; }.storage-usage { position:static; font-size:9px; margin-left:8px; }.storage-tabs { margin:25px 8px; } }
/* Compact studio asset panels. */
.reference-panel-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:22px; }
.reference-panel-head h2 { font-size:15px; font-weight:600; margin:0; }
.asset-library-button { display:flex; align-items:center; gap:4px; background:none; padding:4px; color:#aaa; font-size:12px; }
.asset-library-button .material-symbols-outlined { font-size:17px; }
.asset-group-heading { display:flex; align-items:center; gap:6px; margin:22px 0 10px; }
.asset-group-heading strong { display:flex; align-items:center; gap:2px; margin-right:auto; font-size:13px; font-weight:500; }
.asset-group-heading button { display:flex; align-items:center; gap:2px; border-radius:6px; background:#353535; color:#ccc; padding:4px 7px; font-size:11px; min-height:27px; }
.asset-group-heading .material-symbols-outlined { font-size:16px; }
.asset-list-empty { color:#929292; font-size:12px; padding:12px 8px; }
.reference-caption { position:relative; background:#444; border:1px solid transparent; border-radius:9px; margin-bottom:9px; overflow:hidden; }
.reference-caption.on-air,.qr-asset-card.on-air { border-color:#387dff; background:#323c50; }
.caption-take { width:100%; min-height:66px; text-align:left; display:grid; gap:4px; padding:12px 14px; background:none; color:#f5f5f5; }
.caption-take strong { font-size:13px; font-weight:500; overflow-wrap:anywhere; }
.caption-take span { font-size:12px; color:#bdbdbd; }
.caption-take small { font-size:10px; color:#aebdd3; }
.caption-edit-actions { position:absolute; display:flex; gap:3px; right:5px; bottom:5px; }
.caption-edit-actions button { padding:3px; color:#c6c6c6; background:#353535; border-radius:5px; }
.caption-edit-actions .material-symbols-outlined { font-size:15px; }
.qr-asset-card { border:1px solid transparent; display:flex; align-items:center; gap:10px; background:#444; padding:12px; border-radius:9px; width:100%; text-align:left; color:white; }
.qr-asset-card img { width:46px; height:46px; border-radius:3px; }.qr-asset-card > span { display:grid; gap:5px; min-width:0; }.qr-asset-card strong { font-size:13px; font-weight:500; }.qr-asset-card small { font-size:11px; color:#bbb; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.qr-asset-card em { margin-left:auto; font-size:10px; font-style:normal; }
.theme-label { font-size:12px; color:#bbb; }.theme-presets { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:12px 0 24px; }.theme-presets button { padding:8px 3px; height:55px; background:#3d3d3d; border:2px solid transparent; border-radius:7px; color:#ddd; font-size:11px; }.theme-presets button.active { border-color:#347bff; }.theme-presets button span { background:#171717; padding:5px 8px; }.theme-presets [data-theme="air"] span { border-radius:4px; }.theme-presets [data-theme="news"] span { border-left:3px solid #fff; }.theme-presets [data-theme="round"] span { border-radius:20px; }
#graphicsTheme { width:100%; border-radius:8px; background:#3c3c3c; color:#eee; min-height:34px; margin:0 0 2px; }
.graphic-asset-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }.graphic-asset-grid button { aspect-ratio:1; min-width:0; padding:5px; display:grid; place-items:center; border:1px solid #555; border-radius:7px; color:#ccc; background:repeating-conic-gradient(#363636 0% 25%,#414141 0% 50%) 0 0/14px 14px; position:relative; overflow:hidden; }.graphic-asset-grid button.on-air { border:2px solid #397eff; }.graphic-asset-grid img { width:100%; height:100%; object-fit:contain; }.graphic-asset-grid .saved-graphic span { position:absolute; bottom:2px; font-size:9px; background:#111b; padding:2px 5px; border-radius:4px; }
/* Studio geometry matches the reference's inset, rounded inspector. */
.studio-shell.panel-open .sidebar { margin:12px 0 12px; border-radius:24px; background:#262626; border:0; }
.studio-shell .program-wrap { border:0; padding:0; background:transparent; }
.studio-shell .program-wrap canvas { border-radius:0; }
.studio-shell .studio-control-bar > button { border-radius:50%; }
#qrPreview .qr-asset-card img { width:46px; height:46px; }
.studio-shell .broadcast-actions > button { border-radius:50%; width:48px; height:48px; }
.studio-shell .broadcast-actions #recordBtn { border-radius:24px; width:auto; }
.studio-layout-strip button.active,.scene-mini.active .scene-mini-thumb { border-color:#397eff; }
@media(min-width:1300px) { .studio-shell.panel-open { grid-template-columns:168px minmax(0,1fr) 360px 95px; }.studio-shell { grid-template-columns:168px minmax(0,1fr) 95px; }#closeStudioPanel { right:105px; }.reference-panel-head { padding-right:18px; } }
/* Incoming social comments. */
#manualChatDetails { margin:16px 0; color:#aaa; font-size:12px; }#manualChatDetails summary { cursor:pointer; padding:8px 0; }
#commentList { display:grid; gap:9px; margin:18px 0; max-height:none; }.live-comment-card { display:flex; width:100%; gap:10px; padding:13px; background:#383838; border:1px solid transparent; border-radius:10px; color:#eee; text-align:left; }.live-comment-card:hover { background:#444; }.live-comment-card.active-comment { border-color:#4387ff; background:#303c52; }.comment-avatar { flex:0 0 32px; height:32px; background:#59657a; border-radius:50%; display:grid; place-items:center; font-size:11px; }.comment-content { display:grid; gap:4px; min-width:0; }.comment-content strong { font-size:12px; }.comment-content small { font-size:10px; color:#aab2c1; }.comment-content > span { font-size:13px; line-height:1.5; overflow-wrap:anywhere; white-space:pre-wrap; }.comment-content em { margin-top:5px; color:#a9c7ff; font-size:10px; font-style:normal; }.chat-empty { font-size:12px; text-align:center; padding:24px 8px; color:#999; }.chat-source-status { display:grid; gap:4px; font-size:11px; border-bottom:1px solid #414141; padding:9px 0; }.chat-source-status span { color:#99baa5; }.chat-source-status small,.chat-error span { color:#ffbc97; line-height:1.5; }.chat-connection-row { display:flex; gap:15px; padding:10px; background:#303034; border-radius:8px; margin:8px 0; font-size:12px; }.chat-connection-row > div { display:grid; gap:5px; flex:1; }.chat-connection-row small { color:#aaa; }.chat-connection-row button { color:#ffbc97; background:none; }.chat-access-help { font-size:12px; color:#aaa; margin:15px 0; line-height:1.6; }.chat-access-help summary { cursor:pointer; }#chatConnectionError { color:#ffbc97; font-size:12px; line-height:1.5; }#clearCommentBtn:disabled { opacity:.4; cursor:default; }
@media(min-width:801px) { .prejoin-login-line { bottom:28px; margin:0; right:calc(50% - 462px); } }
/* Reference measurements: compact studio controls and asset thumbnail rows. */
.studio-shell { grid-template-rows:56px minmax(0,1fr) 126px; }.studio-topbar { height:56px; }.studio-shell .stage-area { padding:58px 16px 0; }.studio-orientation-tabs { top:72px; left:184px; }.studio-shell .stage-content { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }.studio-shell .program-wrap { max-width:calc((100dvh - 220px)*16/9); }.studio-shell.portrait-output .program-wrap { max-width:calc((100dvh - 220px)*9/16); }
.studio-shell .sidebar > .panel.active { padding:16px; }.reference-panel-head { margin:0 -16px 12px; padding:0 48px 12px 16px; border-bottom:1px solid #3a3a3a; min-height:32px; }.reference-panel-head h2 { font-size:15px; }.asset-library-button { padding:6px 9px; border:1px solid #444; border-radius:5px; background:#303030; color:#eee; }.asset-library-button .material-symbols-outlined:first-child { color:#3b98ef; }.studio-shell .sidebar { scrollbar-width:thin; scrollbar-color:#414141 transparent; }#closeStudioPanel { top:82px; }
#graphicsTheme { height:36px; font-size:13px; }.asset-group-heading { margin:20px 0 10px; }.asset-group-heading strong { font-size:14px; color:#eee; cursor:pointer; }.graphic-asset-grid { gap:8px; }.graphic-asset-grid[hidden] { display:none; }.graphic-asset-grid > .asset-upload { aspect-ratio:16/9; border:0; background:#303030; font-size:25px; }.graphic-tile { min-width:0; position:relative; }.graphic-asset-grid .graphic-preview { width:100%; height:auto; aspect-ratio:16/9; padding:0; border:1px solid transparent; border-radius:6px; }.graphic-preview img { width:100%; height:100%; object-fit:contain; }.graphic-preview > span { position:absolute; inset:0; display:grid; place-items:center; font-size:11px; background:#0006; opacity:0; }.graphic-preview:hover > span,.graphic-preview.on-air > span { opacity:1; }.graphic-asset-grid .graphic-preview.on-air { border-color:#3d80ff; }.graphic-asset-grid .graphic-menu { display:none; position:absolute; right:1px; top:1px; aspect-ratio:auto; width:20px; height:18px; padding:0; background:#191919; border:0; }.graphic-tile:hover .graphic-menu,.graphic-tile:focus-within .graphic-menu { display:grid; }.graphic-menu .material-symbols-outlined { font-size:16px; }#logoAssets { grid-template-columns:repeat(6,minmax(0,1fr)); }#logoAssets .graphic-preview,#logoAssets .asset-upload { aspect-ratio:1; }.logo-alignment { display:flex; margin-left:auto; }.logo-alignment button { border-radius:4px; padding:4px; background:#363636; }.logo-alignment button.active { background:#575757; }.default-graphics-toggle { margin-top:20px; font-size:12px; }.advanced-graphics { font-size:12px; color:#aaa; margin-top:24px; }.advanced-graphics summary { cursor:pointer; padding:10px 0; }
.studio-layout-strip button { width:64px; height:40px; border:2px solid transparent; padding:2px; background:#222; color:#414141; border-radius:5px; }.studio-layout-strip button svg { width:100%; height:100%; }.studio-layout-strip button.active { border-color:#2776ff; }.studio-layout-strip button::before,.studio-layout-strip button::after { display:none; }.broadcast-actions { gap:8px; }.studio-shell .broadcast-actions > button { background:#262626; border:0; width:48px; height:48px; }.broadcast-actions .material-symbols-outlined { font-size:22px; }.studio-shell .broadcast-actions #muteBtn.muted { background:#fff0ee; color:#eb7972; }.studio-shell .restream-right-rail button.active { color:white; background:#393939; }.restream-right-rail { background:#191919; border:0; }.restream-right-rail button { gap:7px; }.restream-right-rail .material-symbols-outlined { font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24; }.restream-scene-rail { background:#191919; border-right:1px solid #292929; padding:16px 12px; }.add-scene-btn { border-radius:22px; }.scene-mini-thumb { border-radius:8px; background:radial-gradient(ellipse at center,#333 0%,#050505 75%); }.scene-mini.active .scene-mini-thumb { box-shadow:0 0 0 2px #182f64; }.studio-topbar .go-live { background:#3b2018 !important; color:#ff642d !important; border:1px solid #64301e; border-radius:24px; height:38px; font-family:inherit; }.studio-topbar .go-live.live { background:#b93227 !important; color:white !important; }
@media(max-width:800px) { .studio-layout-strip { gap:3px; }.studio-layout-strip button { width:37px; height:28px; }.studio-shell .broadcast-actions > button { width:34px; height:34px; min-height:34px; }.studio-orientation-tabs { left:112px; }.studio-shell .stage-area { padding:54px 8px 0; } }
.outline-icon { display:inline-flex; width:22px; height:22px; flex-shrink:0; }.outline-icon svg { width:100%; height:100%; }.home-nav .outline-icon { width:18px; height:18px; }.restream-right-rail .outline-icon { width:23px; height:23px; }.home-main[data-section="Storage"] { padding-top:54px; }.home-main[data-section="Storage"] .storage-tabs { margin-top:48px; }.home-main[data-section="Channels"] .dashboard-heading { margin-top:16px; }.channel-table-row { min-height:86px; }.channel-table-head { padding-top:20px; padding-bottom:20px; }
.graphic-library { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:20px; }.graphic-library button { display:grid; gap:7px; color:#ddd; background:#303030; padding:8px; border-radius:8px; min-width:0; }.graphic-library img { width:100%; aspect-ratio:16/9; object-fit:contain; background:repeating-conic-gradient(#363636 0% 25%,#414141 0% 50%) 0 0/14px 14px; }.graphic-library span { font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.device-split-control { display:flex; align-items:center; border-radius:30px; background:#262626; flex-shrink:0; }.device-split-control > button:first-child { flex-shrink:0; border-radius:50%; }.device-split-control .device-dropdown { width:30px; min-width:30px; height:48px; min-height:48px; padding:0 7px 0 0; background:none; border:0; color:#aaa; border-radius:0 25px 25px 0; }.device-dropdown .material-symbols-outlined { font-size:19px; }.prejoin-controls .device-split-control { background:#eef0f3; }.prejoin-controls .device-split-control > button:first-child { background:white; }.prejoin-controls .device-dropdown { color:#707783; }.prejoin-controls .off { color:#f17c73 !important; }.broadcast-actions .device-split-control > button:first-child { width:48px; height:48px; min-height:48px; }.broadcast-actions .device-split-control .device-dropdown { width:28px; height:48px; }.broadcast-actions .device-split-control .device-dropdown:hover { background:#383838; }
@media(max-width:800px){.broadcast-actions .device-split-control > button:first-child { width:34px;height:34px;min-height:34px; }.broadcast-actions .device-split-control .device-dropdown { width:19px;min-width:19px;height:34px;min-height:34px;padding:0; }.broadcast-actions { gap:4px; }}
/* Fixed studio header geometry and source flyouts. */
#studioShell .topbar-actions {flex-shrink:0;gap:16px;align-items:center;}
#studioShell #liveBtn.go-live {display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:auto;min-width:104px;height:40px;padding:0 22px;border-radius:24px;white-space:nowrap;word-break:normal;font-size:14px;font-weight:600;line-height:20px;background:#ff6b35!important;color:#fff!important;border:0;box-shadow:none;}
#studioShell #liveBtn.live {background:#d43e37!important;}
#studioShell .stream-quality {flex:none;white-space:nowrap;cursor:pointer;line-height:1.35;}
#studioShell .stream-quality strong {font-size:10px;font-weight:600;letter-spacing:.3px;}
#studioShell .stream-quality span {font-size:9px;color:#929299;}
#studioShell .quality-btn {white-space:nowrap;flex:none;padding:8px 0;font-size:14px;gap:8px;}
.studio-source-rail {display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;margin:4px 0 12px;}
.source-circle-wrap {position:relative;flex:none;width:48px;height:48px;}
#studioShell .source-circle-wrap > button {width:48px!important;height:48px!important;min-width:48px;min-height:48px;max-width:48px;max-height:48px;padding:0!important;border-radius:50%!important;aspect-ratio:1;display:flex;align-items:center;justify-content:center;flex:none;margin:0!important;background:#090909;color:#eee;border:1px solid #414146;overflow:hidden;}
#studioShell .source-circle-wrap > .on-stage {border:2px solid #8b85ff;background:#33313f;}
.source-popover {display:none;position:absolute;right:calc(100% + 12px);top:0;z-index:100;width:240px;padding:16px;background:#303033;border:1px solid #45454a;border-radius:16px;box-shadow:0 12px 36px #0008;text-align:left;}
.source-popover::after {content:'';position:absolute;left:100%;top:0;width:16px;height:100%;}
.source-circle-wrap:hover > .source-popover,.source-circle-wrap:focus-within > .source-popover,.source-circle-wrap.pinned > .source-popover {display:block;}
.source-popover strong {display:block;font-size:14px;overflow-wrap:anywhere;}
.source-popover p {font-size:12px;color:#bbb;line-height:1.5;}
#studioShell .source-popover button {display:block;width:100%;height:auto;min-height:34px;padding:8px 12px;border-radius:8px;background:#414145;color:white;font-size:12px;margin-top:8px;text-align:left;}
.source-popover-preview {display:block;width:100%;height:112px;object-fit:cover;border-radius:8px;margin:10px 0;background:#18181b;}
#studioShell .restream-right-rail {overflow:visible;}
#studioShell .scene-mini-thumb {padding:0;overflow:hidden;aspect-ratio:16/9;height:auto;position:relative;border:2px solid transparent;border-radius:8px;}
#studioShell .scene-mini-thumb[aria-pressed=true] {border-color:#938aff;}
.scene-mini-thumb canvas {display:block;width:100%;height:auto;}
#sceneRailList {overflow-y:auto;min-height:0;flex:1;padding-bottom:12px;}
.scene-mini-head>span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.scene-actions {display:grid;gap:8px;}
.scene-actions button {text-align:left;padding:12px;border-radius:8px;background:#333;color:white;}
.dialog-actions {display:flex;justify-content:flex-end;gap:12px;}
@media(max-width:800px){#studioShell .topbar-actions{gap:8px;}#studioShell #liveBtn.go-live{min-width:88px;padding:0 16px;}#studioShell .stream-quality{display:none;}}
#studioShell .studio-source-rail {max-height:32vh;min-height:48px;overflow-y:auto;overflow-x:hidden;flex-shrink:0;scrollbar-width:thin;}
#studioShell .source-popover {position:fixed;right:92px;top:80px;max-height:calc(100vh - 24px);overflow-y:auto;}
.scene-context-menu{position:fixed;z-index:1000;width:248px;background:#ededf0;color:#18263d;border-radius:8px;padding:8px 0;box-shadow:0 12px 32px #0004;font:13px Arial;}
.scene-context-menu[hidden]{display:none;}.scene-context-menu>button{display:flex;align-items:center;gap:12px;width:100%;border:0;border-radius:0;padding:10px 16px;background:transparent;color:inherit;text-align:left;font-weight:400;font-size:13px;}.scene-context-menu>button:hover,.scene-context-menu>button:focus{background:#dadddf;}.scene-context-menu>button:disabled{opacity:.45}.scene-context-menu .material-symbols-outlined{font-size:18px}.scene-context-menu kbd{margin-left:auto;font:10px Arial;background:#f6f6f8;padding:2px 3px}.scene-context-menu .danger{color:#db2020}.scene-auto{padding:12px 16px 2px;background:#f2f4f7}.scene-auto label{display:flex;justify-content:space-between;align-items:center;font-size:13px}.scene-auto input{accent-color:#1264ed;width:32px;height:18px}.scene-auto p{font-size:11px;line-height:1.5;color:#4b5b70}.scene-type-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.scene-type-picker button{display:flex;flex-direction:column;gap:14px;align-items:center;padding:24px 12px;border-radius:12px;background:#333;color:#fff}.scene-type-picker small{font-size:11px;color:#aaa}.canvas-name-tools{position:absolute;z-index:4;display:flex;gap:4px;background:#eee;padding:4px;border-radius:6px}.canvas-name-tools[hidden]{display:none}.canvas-name-tools button{background:#eee;color:#17171b;padding:6px 12px;border:0;font-size:12px}.private-chat-messages{min-height:180px;max-height:360px;overflow:auto;padding:12px;background:#1b1b1f;border-radius:12px}.private-chat-messages p{margin:0 0 14px;overflow-wrap:anywhere}.private-chat-messages strong{display:block;font-size:12px;color:#999bd8;margin-bottom:5px}.private-chat-messages span{white-space:pre-wrap;font-size:14px;line-height:1.5}
.orientation-group{display:flex;align-items:center;gap:8px}.studio-orientation-tabs .orientation-channels{font-size:12px;color:#ddd;padding:4px;white-space:nowrap;opacity:0;max-width:0;overflow:hidden;transition:opacity .12s,max-width .12s}.orientation-group:hover .orientation-channels,.orientation-group:focus-within .orientation-channels,.orientation-group:has(.active) .orientation-channels{opacity:1;max-width:120px}.studio-orientation-tabs{gap:18px!important}.channel-orientation-list{border-top:1px solid #444;margin-top:18px;padding-top:12px}
.scene-auto input{appearance:none;position:relative;width:34px;height:19px;border:0;border-radius:20px;background:#a2a7af;cursor:pointer;flex:none}.scene-auto input:checked{background:#1264ed}.scene-auto input::after{content:'';position:absolute;left:3px;top:3px;width:13px;height:13px;border-radius:50%;background:white}.scene-auto input:checked::after{left:18px}.scene-duration-label,.scene-auto-label{position:absolute;left:5px;padding:2px 4px;background:#111b;border-radius:3px;color:#fff;font-size:10px;line-height:14px;pointer-events:none}.scene-duration-label{bottom:4px}.scene-auto-label{top:4px;left:50%;transform:translateX(-50%);white-space:nowrap}
#privateChatDock{position:fixed;left:180px;bottom:24px;width:340px;max-width:calc(100vw - 32px);z-index:20;background:#27272b;border:1px solid #45454b;border-radius:18px;padding:18px;box-shadow:0 16px 48px #0007;text-align:left}#privateChatDock[hidden]{display:none}#privateChatDock header{display:flex;align-items:center;justify-content:space-between;font-size:16px}#privateChatDock header button{border:0;background:transparent;color:#bdbdc7;padding:4px}#privateChatDock .private-chat-messages{min-height:100px;max-height:28vh}#privateChatDock textarea{resize:vertical;min-height:50px;max-height:100px}#privateChatDock .hint{font-size:12px;line-height:1.4}#privateChatDock .primary{width:100%}#privateChatStatus:empty{display:none}.scene-mini.dragging{opacity:.4}.scene-mini.drop-target{border-top:3px solid #458aff}.scene-mini-thumb{cursor:grab}.scene-mini-thumb:active{cursor:grabbing}.scene-mini-thumb:focus-visible{outline:2px solid #8c9cff;outline-offset:3px}@media(max-width:800px){#privateChatDock{left:16px;bottom:100px;width:320px}}
#privateChatDock{bottom:100px;max-height:calc(100vh - 175px);display:flex;flex-direction:column;width:320px;padding:16px}#privateChatDock[hidden]{display:none}#privateChatDock .private-chat-messages{min-height:70px;flex:1;overflow-y:auto}#privateChatDock header{flex:none}#privateChatDock .primary{height:36px;padding:8px 12px;font-size:13px;font-weight:600;background:#5968e8;border-radius:8px}#privateChatDock form{flex:none}#privateChatDock .field{margin:10px 0}#privateChatDock textarea{font-size:13px;outline-offset:1px}#privateChatDock textarea:focus{outline:2px solid #8793ff;border-color:transparent}
#studioShell #recordBtn{width:48px!important;height:48px!important;min-width:48px;max-width:48px;padding:0!important;border-radius:50%!important;display:flex;align-items:center;justify-content:center;flex:none;aspect-ratio:1;background:#303034;border:0;color:#eee}#studioShell #recordBtn svg{width:24px;height:24px}#studioShell #recordBtn.recording{background:#fbe4e4;color:#d73131}#canvasSourceEditor{position:absolute;z-index:3;border:2px solid #4877ff;pointer-events:none;box-sizing:border-box}#canvasSourceEditor[hidden]{display:none}.canvas-move{position:absolute;inset:0;pointer-events:auto;width:100%;height:100%;background:transparent!important;border:0!important;border-radius:0!important;cursor:move;touch-action:none}.canvas-source-toolbar{position:absolute;top:8px;right:8px;display:flex;gap:4px;pointer-events:auto}.canvas-source-toolbar button{width:32px;height:32px;display:grid;place-items:center;padding:0;border-radius:50%;background:#242429e6;color:white;border:1px solid #666}.canvas-source-toolbar .material-symbols-outlined{font-size:18px}.canvas-resize{position:absolute;width:14px;height:14px;padding:0;right:-7px;bottom:-7px;border:2px solid #4877ff;border-radius:3px;background:white;pointer-events:auto;cursor:nwse-resize;touch-action:none}.canvas-align{display:flex;gap:8px;margin:16px 0}.canvas-align button{flex:1;padding:8px;border-radius:8px}.canvas-name-tools{z-index:5}
.studio-shell .sidebar:has(.editing-scene.active) { padding:0; background:#202022; }
.studio-shell .sidebar:has(.editing-scene.active) > #closeStudioPanel { display:none; }
#scenes-panel.editing-scene { height:100%; padding:0; }
#scenes-panel.editing-scene > .panel-head, #scenes-panel.editing-scene > #sceneList { display:none; }
#scenes-panel.editing-scene #sceneEditor { height:100%; display:flex; flex-direction:column; padding:0; margin:0; border:0; background:transparent; gap:0; }
.scene-drawer-header { display:flex; align-items:center; justify-content:space-between; padding:20px; border-bottom:1px solid #38383b; }
.scene-edit-eyebrow { font-size:10px; letter-spacing:1.1px; color:#93939b; }
.scene-drawer-header h2 { margin:5px 0 0; font-size:18px; color:#f3f3f5; }
#sceneEditor .scene-drawer-header button { width:32px; height:32px; padding:4px; border:0; background:transparent; color:#aaa; }
.scene-drawer-body { flex:1; overflow-y:auto; min-height:0; padding:18px 20px; }
.scene-draft-preview { position:relative; overflow:hidden; border-radius:8px; background:#141416; }
.scene-draft-preview canvas { width:100%; display:block; aspect-ratio:16/9; }
.scene-draft-preview > span { position:absolute; top:8px; left:8px; padding:4px 7px; border-radius:4px; background:#315eea; color:#fff; font-size:10px; }
.scene-draft-hint { color:#a5a5ad; font-size:11px; line-height:1.6; margin:10px 0 20px; }
.scene-layout-section { padding:0; border:0; margin:18px 0; }
.scene-layout-section legend { font-size:12px; font-weight:600; margin-bottom:10px; }
.scene-layout-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
#sceneEditor .scene-layout-options button { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:7px; min-width:0; padding:9px 3px; border:1px solid #444448; background:#2d2d30; border-radius:7px; color:#bbb; }
#sceneEditor .scene-layout-options button[aria-pressed=true] { border-color:#4c7bff; box-shadow:0 0 0 1px #4c7bff; background:#30394e; color:#fff; }
.scene-layout-options svg { width:40px; height:28px; }
.scene-layout-options button > span:last-child { font-size:9px; line-height:1.3; }
.scene-drawer-body details { border-top:1px solid #39393d; padding:14px 0; }
.scene-drawer-body summary { cursor:pointer; font-size:12px; font-weight:600; }
.scene-drawer-body .picker-list { margin-top:12px; }
.scene-drawer-body .picker-row { padding:10px; border:1px solid #414146; border-radius:6px; background:#29292c; }
.scene-drawer-body .picker-row small { display:block; color:#909098; margin-top:4px; font-size:10px; }
.scene-drawer-toggle { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 0; font-size:12px; border-top:1px solid #39393d; }
.scene-drawer-toggle input { width:30px; height:18px; accent-color:#4c7bff; }
.scene-drawer-footer { flex-shrink:0; padding:14px 16px; border-top:1px solid #39393d; background:#232325; }
#sceneDraftStatus { display:block; font-size:10px; color:#9999a2; margin-bottom:10px; }
.scene-drawer-footer > div { display:flex; gap:7px; }
#sceneEditor .scene-drawer-footer button { white-space:nowrap; padding:10px; border:0; border-radius:7px; font-size:11px; flex:1; }
#sceneEditor #sceneDraftAir { background:#3867ee; color:white; }
#sceneEditor button:focus-visible { outline:2px solid #80a0ff; outline-offset:2px; }
.workflow-modal #canvasCustomizationForm button {
  background:#353539;
  color:#f5f5f7;
  border:1px solid #55555d;
  border-radius:8px;
  font:inherit;
  font-size:13px;
  font-weight:600;
  min-height:38px;
}
.workflow-modal #canvasCustomizationForm button:hover { background:#45454b; border-color:#777781; }
.workflow-modal #canvasCustomizationForm button:focus-visible { outline:2px solid #8aa8ff; outline-offset:3px; }
.workflow-modal #canvasCustomizationForm button.primary { background:#ff642e; border-color:#ff642e; color:#fff; }
.workflow-modal #canvasCustomizationForm button.primary:hover { background:#e94d1b; border-color:#e94d1b; }
.workflow-modal #canvasCustomizationForm input[type="range"] { accent-color:#527dff; color-scheme:dark; padding:8px 0; }
.studio-media-controls { display:grid; gap:9px; padding:12px; border:1px solid #494950; border-radius:9px; background:#252529; color:#f4f4f6; }
.media-playback-row { display:flex; align-items:center; gap:10px; }
.media-playback-row output { flex:1; font-size:11px; font-variant-numeric:tabular-nums; }
.studio-media-controls .media-playback-row button { display:grid; place-items:center; width:32px; height:32px; padding:0; border:1px solid #55555d; border-radius:50%; color:#eee; background:#39393f; }
.studio-media-controls button[aria-pressed=true] { background:#315bd0; color:#fff; }
.studio-media-controls input[type=range] { width:100%; min-width:0; padding:0; accent-color:#6c91ff; color-scheme:dark; }
.media-volume-row { display:flex; align-items:center; gap:8px; font-size:11px; }
.media-volume-row output { min-width:32px; }
.canvas-playback { position:absolute; pointer-events:auto; width:min(300px,90%); left:50%; top:50%; transform:translate(-50%,-50%); }
.canvas-playback[hidden] { display:none; }
.music-control-card { margin-top:16px; display:grid; gap:10px; }
.music-control-card > strong { overflow-wrap:anywhere; font-size:13px; }
.workflow-modal #sourceActionsPanel > button { color:#f5f5f7; background:#353539; border:1px solid #55555d; border-radius:8px; padding:12px; }
.workflow-modal #sourceActionsPanel > button:hover { background:#48484f; }
#studioMicIndicator { display:flex; align-items:center; gap:7px; margin-right:14px; padding:7px 9px; border:1px solid #393b40; border-radius:8px; color:#75d5a0; flex-shrink:0; }
#studioMicIndicator .header-mic-icon svg { display:block; width:17px; height:17px; }
.header-mic-copy { font-size:9px; font-weight:700; white-space:nowrap; }
.header-mic-meter { display:flex; align-items:center; gap:2px; height:20px; }
.header-mic-meter i { width:3px; height:5px; border-radius:2px; background:#484b50; }
.header-mic-meter i:nth-child(2n) { height:10px; }
.header-mic-meter i:nth-child(3n) { height:16px; }
.header-mic-meter i.lit { background:#60d798; }
#studioMicIndicator.muted { color:#f2817d; }
#studioMicIndicator.unavailable:not(.muted) { color:#999da6; }
.header-mic-live { color:#ff8580; font-size:9px; font-weight:700; }
.header-mic-live[hidden] { display:none; }
#studioShell .broadcast-actions #muteBtn { background:#303034!important; color:#eee!important; }
#studioShell .broadcast-actions #muteBtn.muted { background:#fff0ee!important; color:#dd5b55!important; }
#studioShell #muteBtn svg { width:23px; height:23px; }
@media(max-width:950px){#studioMicIndicator { margin-right:5px; padding:6px; gap:4px; }.header-mic-copy { display:none; }}
@media(max-width:650px){#studioMicIndicator .header-mic-meter i:nth-child(n+5){display:none;}#studioMicIndicator{border:0;margin:0;padding:3px;}}
#addDemoGuestsBtn { background:#33343a; color:#eee; border:1px solid #545660; border-radius:8px; padding:10px 14px; margin-bottom:16px; }
/* Same floating backstage conversation as the guest studio. */
#privateChatDock{left:12px;bottom:12px;width:330px;height:400px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 80px);padding:0;border:1px solid #494949;border-radius:24px;overflow:hidden;background:#252525;box-shadow:none;z-index:30}#privateChatDock header{height:51px;padding:0 12px;flex-shrink:0;background:#1d1d1d}#privateChatDock header button{display:flex;align-items:center;gap:6px;color:#eee;font-size:13px;padding:8px 0}#privateChatDock header strong{font-weight:500}#privateChatDock svg,.private-chat-btn svg{width:19px;height:19px;flex-shrink:0}#privateChatDock #closePrivateChat{padding:8px}#privateChatDock .private-chat-messages{min-height:0;max-height:none;flex:1;padding:12px 16px;background:transparent;border-radius:0;color:#888;font-size:13px}#privateChatDock .private-chat-messages:not(:has(p)){display:grid;place-content:center;text-align:center;padding:40px}#privateChatDock .private-chat-messages p{padding:10px 0;margin:0;border-bottom:1px solid #343438}#privateChatDock .private-chat-messages strong{color:#c6c6ce;font-size:12px;margin-bottom:6px}#privateChatDock .private-chat-messages span{color:#eee;font-size:13px}#privateChatDock form{display:flex;align-items:end;gap:8px;flex-wrap:wrap;background:#202020;padding:8px 10px 14px}#privateChatDock textarea{flex:1;min-width:0;min-height:25px;height:25px;max-height:85px;margin:0;border:0;border-radius:0;background:transparent;color:#eee;resize:none;padding:4px;font-size:13px}#privateChatDock .primary{width:25px;height:25px;padding:4px;border:0;border-radius:50%;background:#454545;color:#aaa}#privateChatStatus{width:100%;margin:0;font-size:12px}.private-chat-btn{display:flex;align-items:center;gap:7px}@media(max-width:650px){#privateChatDock{left:12px;bottom:12px;width:calc(100vw - 24px)}#privateChatDock textarea{font-size:16px}}

/* Source picker shared visually with the guest Add menu. */
.studio-add-popover{position:fixed;z-index:100;width:230px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 96px);overflow:auto;border-radius:8px;background:#ececec;color:#24334b;padding:5px 0;box-shadow:0 8px 28px #0003}
.studio-add-popover[hidden]{display:none!important}.studio-add-popover button{display:flex;gap:10px;align-items:center;background:transparent;color:inherit;border:0;border-radius:0;width:100%;padding:9px 14px;font-size:13px;text-align:left}.studio-add-popover button:hover:not(:disabled),.studio-add-popover button:focus-visible{background:#dce8fb;outline:0}.studio-add-popover svg,.stored-source-choice svg{width:16px;height:16px;flex-shrink:0}.studio-add-popover kbd{margin-left:auto;font:11px Arial;background:#f6f6f6;padding:1px 4px;border-radius:3px}.studio-add-popover small{display:block;font-size:10px;margin-top:3px}.studio-add-popover button:disabled{opacity:.45;cursor:not-allowed}
.source-detail-modal{width:440px;max-width:calc(100vw - 24px);background:#f1f1f1;color:#24334b;border:0;border-radius:16px}.source-detail-modal header{color:inherit;background:transparent}.source-detail-modal button:not(.primary){color:inherit}.studio-source-detail{display:grid;gap:18px;padding:6px 6px 20px}.studio-source-detail>svg{width:76px;height:76px;margin:0 auto}.studio-source-detail p{margin:0;line-height:1.6;color:#586274}.source-capability-check{display:flex;align-items:center;gap:8px;font-size:13px}.source-capability-check input{width:16px;height:16px}.studio-source-detail .field select{background:white;color:#24334b}.studio-source-detail .primary{background:#1765f5;color:white;border:0;border-radius:8px;padding:12px}.studio-source-detail .primary:disabled{opacity:.45}.stored-source-choice{display:flex;gap:12px;align-items:center;width:100%;padding:12px;text-align:left;border:0;background:transparent}.stored-source-choice:hover{background:#dce8fb}.stored-source-choice span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.host-slide-controls{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-top:1px solid #333}.host-slide-controls button{font-size:12px;padding:8px}

.host-slide-controls button{background:#343434;color:#eee;border:1px solid #555;border-radius:7px}.host-slide-controls button:disabled{opacity:.4;cursor:default}

/* Refined against the signed-in host Add picker and source dialogs. */
.studio-add-popover{width:220px}.studio-add-popover button{min-height:32px;padding:7px 14px;gap:10px}.studio-add-popover button:nth-child(6){border-top:1px solid #dedede;margin-top:3px;padding-top:10px}.source-detail-modal{background:#fff;width:500px;border-radius:12px;color:#24334b}.source-detail-modal header{position:relative;display:flex;justify-content:center;border-bottom:0;padding:20px 40px}.source-detail-modal header h2{font-size:21px}.source-detail-modal #closeWorkflow{position:absolute;right:12px;top:14px;background:transparent;border:0;color:#959ba4}.source-detail-modal #sourcePickerBack{position:absolute;left:12px;top:14px;background:transparent;border:0;color:#2867ed;font-size:23px}.source-library-modal{width:800px;min-height:min(530px,80dvh)}.source-library-modal .studio-source-detail{padding:12px}.source-library-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:320px}.source-library-empty>svg{width:64px;height:64px;color:#969da8}.source-library-empty .primary{min-width:220px}.source-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.source-choice-grid button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:8px;min-height:155px;background:#fff;color:#24334b;border:1px solid #e5e5e5;border-radius:6px;padding:20px}.source-choice-grid button:hover{border-color:#3272ff;background:#f7faff}.source-choice-grid svg{width:24px;height:24px;margin-bottom:16px;color:#76808b}.source-choice-grid strong{font-size:15px}.source-choice-grid span{font-size:13px;line-height:1.45;color:#697588}.canvas-slot-assign{position:absolute;z-index:15;transform:translate(-50%,-50%);background:#ffffff20;color:#fff;border:1px solid #aaa;border-radius:12px;padding:12px;font-size:13px;backdrop-filter:blur(8px);cursor:pointer}.canvas-slot-assign svg{width:22px;height:22px}.canvas-slot-assign[hidden]{display:none!important}#extraCameraPreview{width:100%;aspect-ratio:16/9;background:#080808;border-radius:7px;object-fit:contain}.extra-camera-fields{display:grid;grid-template-columns:1.5fr 1fr;gap:12px}.studio-source-detail .field{gap:7px;color:#7c8490;font-size:13px}.studio-source-detail .field select{border:1px solid #aaa;border-radius:4px;padding:12px;width:100%}#startExtraPreview{justify-self:center;padding:7px 14px;background:#eef3ff;border:0;border-radius:6px}#extraCameraStatus:empty{display:none}@media(max-width:600px){.source-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.source-choice-grid button{padding:12px}.source-library-modal{min-height:0}.source-library-empty{min-height:220px}.extra-camera-fields{grid-template-columns:1fr}}

.workflow-modal.source-detail-modal{padding:0}.workflow-modal.source-detail-modal header{margin-bottom:0;padding:20px 48px}.workflow-modal.source-detail-modal .studio-source-detail{padding:0 24px 24px}.workflow-modal.source-detail-modal input[type=checkbox]{width:18px;height:18px;padding:0;flex:0 0 18px}.workflow-modal.source-detail-modal .field{margin-bottom:0}.source-choice-grid{gap:18px}.source-choice-grid button{min-height:150px}.workflow-modal.source-detail-modal p{color:#687486}