/* Streamsy broadcast surface, matching the violet neon player reference. */
body.hub-broadcast{font-family:LocalSans,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--accent:#9757ff;--muted:#a5a4bb}
body.hub-broadcast[data-mode=watch]{background:radial-gradient(ellipse at 50% 45%,#492a8a14,transparent 65%),#080b10!important}
.hub-broadcast .watch-layout{padding:20px;gap:14px;grid-template-columns:minmax(0,1fr) clamp(280px,23vw,350px);align-items:start}
.hub-broadcast .watch-breadcrumb{height:24px;margin:0 0 12px;font-size:11px}
.hub-broadcast .watch-breadcrumb>span{color:#a78bfa;letter-spacing:1.5px}
.hub-broadcast .watch-breadcrumb button{padding:4px 9px;border-color:#7b63954d;color:#b4accb}
.hub-broadcast .player-shell{padding:1px;border-radius:13px;background:linear-gradient(125deg,#a05bff,#555581 48%,#5a3ab3 100%);box-shadow:0 0 25px #773dff20,0 12px 40px #0005}
.hub-broadcast .watch-stage{aspect-ratio:16/9;min-height:0;max-height:none;border:0;border-radius:12px;background:#05060a;isolation:isolate}
.hub-broadcast .watch-stage:before{display:none}
.hub-broadcast .watch-stage #remote-stage{position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0;display:block;overflow:hidden;background:radial-gradient(ellipse,#171225,#08080e 75%)}
.hub-broadcast .watch-stage #remote-stage video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:100%;max-height:100%;object-fit:contain!important;object-position:center!important;background:transparent}
.hub-broadcast .player-controls{pointer-events:auto;height:58px;gap:9px;padding:10px 13px 6px;background:linear-gradient(transparent,#05050cef 50%);border-top:1px solid #ac8df51a}
.hub-broadcast .player-controls button{margin:0;width:30px;height:35px;padding:4px;color:#f1ecff}
.hub-broadcast .player-controls svg{width:20px;height:20px}
.hub-broadcast .player-controls button:hover,.hub-broadcast .player-controls button[aria-pressed=true]{color:#c7a5ff;background:#8652df27}
.hub-broadcast .volume-control{width:115px;padding:0 4px}
.hub-broadcast .volume-control input{appearance:none;width:100%;height:5px;border:0;border-radius:8px;background:linear-gradient(to right,#8c3cff 0 var(--volume,100%),#605b6c70 var(--volume,100%) 100%);accent-color:#a568ff}
.volume-control input::-webkit-slider-thumb{appearance:none;width:11px;height:11px;background:#a86bff;border:2px solid #ece1ff;border-radius:50%;box-shadow:0 0 8px #7a41ff}
.volume-control input::-moz-range-thumb{width:9px;height:9px;background:#a86bff;border:2px solid #ece1ff;border-radius:50%}
.hub-broadcast .player-quality{margin:0 10px;font-size:11px;color:#e1ddef;display:flex;align-items:center;gap:7px}
.hub-broadcast .watch-stage[data-playing=true] .player-quality:before{content:'';width:7px;height:7px;flex:none;border-radius:50%;background:#ff2948;box-shadow:0 0 10px #ff284444}
.hub-broadcast .player-badges{left:19px;top:18px;gap:8px}
.hub-broadcast .player-badges>span{font-size:12px;border:0;border-radius:5px;background:#060710cf;padding:5px 9px;font-weight:700}
.hub-broadcast .player-badges .player-live.is-live{background:#ff2644;font-size:12px;display:flex;align-items:center}
.hub-broadcast .player-live.is-live:before{content:'';width:7px;height:7px;border-radius:50%;background:#fff}
.hub-broadcast .player-settings-panel{right:12px;bottom:58px;background:#0c0c19f5;border-color:#8264ba80;box-shadow:0 8px 30px #0008;border-radius:8px;width:240px}
.hub-broadcast .player-settings-panel output{color:#c9b0f9;font-size:11px}
.hub-broadcast .player-settings-panel p{font-size:10px;color:#a4a0b6}
.quality-auto{display:flex;gap:12px;align-items:center;padding:11px 0;color:#eee9ff;font-size:12px}
.quality-auto>span{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#8435fa;font-size:11px}
.quality-auto small{display:block;font-size:10px;color:#aaa5c0;margin-top:1px}
.hub-broadcast .watch-info{display:grid;grid-template-columns:72px minmax(0,1fr) auto;grid-template-rows:auto auto auto;column-gap:16px;row-gap:4px;margin-top:12px;padding:17px 18px;border-radius:11px;border:1px solid #65539e6b;background:linear-gradient(120deg,#10101e,#0b0c14);box-shadow:0 0 24px #6837bd0b}
.hub-broadcast .watch-creator{display:contents}
.hub-broadcast .watch-avatar{grid-column:1;grid-row:1/4;width:72px;height:72px;align-self:center;border:2px solid #9563ff;box-shadow:0 0 18px #7044d543;background:#1d1730;font-size:28px}
.hub-broadcast #creator-name{grid-column:2;grid-row:1;align-self:end;font-size:18px;line-height:1.4;overflow-wrap:anywhere}
.hub-broadcast .watch-headline{grid-column:2;grid-row:2;display:block;margin:0;min-width:0}
.hub-broadcast .watch-headline h1{font-size:15px;line-height:1.5;letter-spacing:0;font-weight:400;color:#dfdcec}
.hub-broadcast .watch-headline #live-status{display:none}
.hub-broadcast .watch-tags{display:flex;gap:6px;flex-wrap:wrap;grid-column:2;grid-row:3;margin-top:5px}
.watch-tags>span{font-size:10px;color:#c7c2e6;background:#242238;padding:3px 10px;border-radius:20px;line-height:1.4}
.hub-broadcast .creator-actions{grid-column:3;grid-row:1/3;display:flex;align-items:center;align-self:start;gap:8px;margin:0 0 8px}
.hub-broadcast .follow-live{background:linear-gradient(125deg,#261749,#1a132b);border:1px solid #8b4dff;border-radius:7px;box-shadow:0 0 15px #702dff16;padding:8px 14px;min-height:36px;font-size:12px;font-weight:400}
.hub-broadcast .follow-live.following{background:#332048;color:#dec3ff;border-color:#a178e1}
.hub-broadcast .share-button{background:#171225;color:#dac8ff;border:1px solid #7250aa70;border-radius:7px;font-size:12px;min-height:36px;padding:8px 12px}
.hub-broadcast .watch-metadata{grid-column:1/-1;grid-row:4;display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:12px 0 0;padding:12px 0 0;border-color:#8b74b422;font-size:11px;color:#a5a0bb}
.hub-broadcast .watch-metadata .viewer-pill{font-size:11px;margin:0;color:#b9a9d6}
.hub-broadcast .live-dot{display:inline-block;background:#ff2950;width:8px;height:8px;box-shadow:0 0 9px #ff2b4944;border-radius:50%}
.hub-broadcast .watch-metadata>a{color:#bba0ed;margin-left:auto}
.hub-broadcast .watch-community{display:none}
.hub-broadcast .watch-side{padding-top:36px;align-self:stretch;position:static}
.hub-broadcast .watch-side .chat-panel{height:var(--watch-chat-height,560px);min-height:400px;max-height:900px;border:1px solid #6654917a;border-radius:12px;background:linear-gradient(145deg,#10101c,#090b12);box-shadow:0 0 20px #6d35ac0c;padding:0}
.hub-broadcast .watch-side .chat-top{padding:16px 15px;border-bottom:1px solid #8776b425;min-height:55px}
.hub-broadcast .watch-side .chat-top h2{font-size:16px;font-weight:700;gap:8px}
.hub-broadcast .watch-side .chat-indicator{background:#aa7bff;box-shadow:0 0 9px #ac6dff44}
.hub-broadcast .watch-side .chat-welcome{padding:25px 15px;border-bottom:1px solid #8776b41c;margin:0 14px;color:#c2b5e2}
.hub-broadcast .watch-side .chat-welcome b{font-size:12px}
.hub-broadcast .watch-side .chat-welcome p{font-size:11px;color:#9691ac}
.hub-broadcast .watch-side .chat-messages{padding:12px 14px;min-height:80px;scrollbar-color:#3b3155 transparent}
.hub-broadcast .watch-side .chat-messages p{font-size:12px;line-height:1.65;padding:8px 0}
.hub-broadcast .watch-side .chat-messages strong{color:#c592ff;font-size:12px;margin-right:7px}
.hub-broadcast .watch-side .chat-messages p:nth-child(3n) strong{color:#e5a0df}
.hub-broadcast .watch-side .chat-messages p:nth-child(3n+2) strong{color:#aab2ff}
.hub-broadcast .chat-messages time{font-size:10px;color:#76778d;margin-right:9px;white-space:nowrap}
.hub-broadcast .watch-side .chat-messages span{color:#e1dcea}
.hub-broadcast .watch-side .chat-form{border:1px solid #74639450;border-radius:8px;margin:4px 12px 10px;background:#1a1929;min-height:40px}
.hub-broadcast .watch-side .chat-form input{color:#e5dff5;font-size:12px;min-width:0;padding:10px}
.hub-broadcast .watch-side .chat-form button{color:#c4a3ff}
.hub-broadcast .watch-side .chat-footnote{display:none}
.hub-broadcast .watch-side .chat-access{color:#88839b;font-size:10px;padding:7px 14px}
.hub-broadcast .watch-stage .watch-overlay{background:radial-gradient(ellipse at 50% 35%,#28203e,#100d1e 70%);gap:10px}
.hub-broadcast .watch-overlay .overline,.hub-broadcast .overlay-back{color:#b397e5}
.hub-broadcast .watch-overlay p{color:#a7a0bc}
.hub-broadcast .empty-orbit{color:#c49bff;background:#6e40bd16;border-color:#9560db60;box-shadow:0 0 40px #753acf18}
/* Studio: keep all mobile overlay controls, with the same surface and accents. */
.hub-broadcast .workspace-top .overline,.hub-broadcast .breadcrumb,.hub-broadcast .studio-section-label{color:#ae91e1}
.hub-broadcast .studio-preview{border-color:#71608d50;background:#11101d}
.hub-broadcast .preview-heading,.hub-broadcast .preview-bottom{background:#13101f;color:#a69bbb;border-color:#71608d33}
.hub-broadcast .studio-stage{background:radial-gradient(ellipse,#201832,#0c0c15)}
.hub-broadcast .look-badge,.hub-broadcast #privacy-label{background:#171024d9;border-color:#77568f66;color:#d2b8ef}
.hub-broadcast .panel,.hub-broadcast .studio-side .panel{background:linear-gradient(130deg,#171323,#10111b);border-color:#6f5b8f55}
.hub-broadcast .studio-layout input:not([type=range]),.hub-broadcast .studio-layout select,.hub-broadcast .studio-layout textarea{background:#100d1b;border-color:#69528166;color:#e7dbf5}
.hub-broadcast .studio-layout label,.hub-broadcast .studio-layout .section-number{color:#ba9ddb}
.hub-broadcast .studio-layout .secondary{background:#20172d;border-color:#74519355;color:#dfc8f7}
.hub-broadcast .filter-note{background:#21192d;border-color:#79608d3d;color:#c5afd9}
.hub-broadcast .filter-note p,.hub-broadcast .preview-heading span,.hub-broadcast .source-state,.hub-broadcast #privacy-label{color:#b9a2d5}
.hub-broadcast .panel-title .step,.hub-broadcast .filter-note small{color:#b58cde}
.hub-broadcast .overlay-form input[type=range]{accent-color:#a56cff}
.hub-broadcast .controls button,.hub-broadcast .overlay-presets button{background:linear-gradient(130deg,#231a32,#17121f);border:1px solid #77559355;color:#dcc9f0}
.hub-broadcast .overlay-presets button.selected{background:#3c2457;border-color:#a56bf1;color:#edd9ff}
.hub-broadcast .stage-watermark{color:#c8a9e8;background:#1c142acc;border-color:#71508966}
.hub-broadcast .panel-title .step-number{color:#c49be7;background:#291a3b;border-color:#7b4f9d55}
.hub-broadcast .overlay-check input{accent-color:#a56cff}
.hub-broadcast .source-caption,.hub-broadcast .studio-viewers,.hub-broadcast .studio-viewers svg{color:#b6a1cf}
.hub-broadcast.chat-collapsed .watch-layout{grid-template-columns:minmax(0,1fr)}
.hub-broadcast.theater-mode .watch-layout{padding:12px 16px;gap:12px}
.hub-broadcast.theater-mode .watch-stage{max-height:none}
.hub-broadcast .watch-stage:fullscreen{aspect-ratio:auto!important;width:100vw;height:100dvh;border-radius:0}
@media(min-width:1600px){.hub-broadcast .watch-layout{grid-template-columns:minmax(0,1fr) 340px}}
@media(max-width:1150px) and (min-width:781px){.hub-broadcast .watch-layout{grid-template-columns:minmax(0,1fr) 260px;padding:14px;gap:12px}.hub-broadcast .watch-info{grid-template-columns:50px minmax(0,1fr);padding:14px;gap:5px 10px}.hub-broadcast .watch-avatar{width:50px;height:50px}.hub-broadcast .creator-actions{grid-column:1/-1;grid-row:4;margin:8px 0 0}.hub-broadcast .watch-metadata{grid-row:5}.hub-broadcast #creator-name{font-size:16px}.hub-broadcast .watch-headline h1{font-size:13px}.hub-broadcast .volume-control{width:65px}.hub-broadcast .player-quality{display:none}}
@media(max-width:900px){.hub-broadcast .watch-layout{display:flex;flex-direction:column}.hub-broadcast .watch-layout>.workspace,.hub-broadcast .watch-side{width:100%}.hub-broadcast .watch-side{position:static;padding-top:0}.hub-broadcast .watch-side .chat-panel{height:430px;min-height:320px}}
@media(max-width:780px){.hub-broadcast .watch-layout{padding:12px!important;gap:12px}.hub-broadcast .watch-stage[data-format=portrait]{aspect-ratio:auto;width:100%;height:min(70dvh,calc((100vw - 26px)*16/9));max-height:760px;min-height:0}.hub-broadcast .watch-stage[data-format=landscape],.hub-broadcast .watch-stage:not([data-format]){aspect-ratio:16/9;min-height:0;max-height:none}.hub-broadcast .watch-info{grid-template-columns:50px minmax(0,1fr);gap:4px 11px;padding:14px}.hub-broadcast .watch-avatar{width:50px;height:50px}.hub-broadcast #creator-name{font-size:16px}.hub-broadcast .watch-headline h1{font-size:13px}.hub-broadcast .creator-actions{grid-column:1/-1;grid-row:4;margin:10px 0 0}.hub-broadcast .watch-metadata{grid-row:5;gap:10px;font-size:10px}.hub-broadcast .watch-metadata .viewer-pill{font-size:10px}.hub-broadcast .watch-metadata>a{margin-left:0}.hub-broadcast .player-badges{top:11px;left:11px}.hub-broadcast .player-badges>span,.hub-broadcast .player-badges .player-live.is-live{font-size:10px;padding:4px 7px}.hub-broadcast .player-controls{padding:9px 7px 5px;gap:3px;height:49px}.hub-broadcast .player-controls button{width:28px}.hub-broadcast .player-controls svg{width:18px;height:18px}.hub-broadcast .volume-control{width:55px}.hub-broadcast .player-quality{display:none}.hub-broadcast .player-settings-panel{bottom:50px}.hub-broadcast .watch-overlay h2{font-size:19px}.hub-broadcast .watch-stage .watch-overlay{padding:24px 14px 54px;gap:5px}.hub-broadcast .watch-overlay h2{margin:4px 0}.hub-broadcast .watch-overlay p{line-height:1.5}.hub-broadcast .watch-overlay .primary{padding:8px 14px;min-height:32px}.hub-broadcast .watch-stage:fullscreen{height:100dvh!important}}