:root{--bg:#05060a;--panel:#0b0d14;--panel-2:#11141d;--panel-3:#181b26;--text:#f8f8fb;--muted:#9296a8;--line:rgba(255,255,255,.09);--red:#ef3340;--red-2:#ff5a64;--violet:#8b42f5;--green:#42d789;--shadow:0 28px 90px rgba(0,0,0,.5)}
[hidden]{display:none!important}
*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;min-height:100vh;overflow-x:hidden;background:radial-gradient(circle at 80% 5%,rgba(104,45,205,.13),transparent 31%),radial-gradient(circle at 10% 80%,rgba(195,39,65,.08),transparent 30%),var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}button,input,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}.skip-link{position:fixed;left:12px;top:-60px;z-index:300;background:#fff;color:#111;padding:9px 14px;border-radius:7px}.skip-link:focus{top:12px}.brand{display:inline-flex;align-items:center;gap:8px;font:800 23px Manrope,sans-serif;letter-spacing:-1.2px;white-space:nowrap}.brand-logo{width:26px;height:26px;display:block;border-radius:6px}.brand span{color:var(--red)}
.watch-header{height:70px;padding:0 clamp(16px,3vw,48px);position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:32px;border-bottom:1px solid var(--line);background:rgba(5,6,10,.88);backdrop-filter:blur(22px)}.watch-header nav{height:100%;flex:1;display:flex;justify-content:center;align-items:stretch;gap:28px}.watch-header nav a{position:relative;display:flex;align-items:center;color:#a8aab6;font-size:12px;font-weight:650}.watch-header nav a:hover,.watch-header nav a.active{color:#fff}.watch-header nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);box-shadow:0 0 12px var(--red)}.account-chip{display:flex;align-items:center;gap:9px}.account-chip>span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--red),var(--violet));font-weight:800;font-size:12px}.account-chip strong,.account-chip small{display:block}.account-chip strong{font-size:10px;max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-chip small{color:var(--muted);font-size:8px;margin-top:2px}
#cowatch-main{min-height:calc(100vh - 70px)}.auth-stage{width:min(1250px,calc(100% - 36px));min-height:calc(100vh - 120px);margin:auto;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:75px}.auth-story h1{font:800 clamp(48px,6vw,80px)/.98 Manrope;margin:0;letter-spacing:-4px}.auth-story h1 em{font-style:normal;background:linear-gradient(100deg,#ff626b,#e64c94 47%,#a878ff);-webkit-background-clip:text;background-clip:text;color:transparent}.auth-story>p:not(.eyebrow){max-width:670px;color:#a4a3b2;font-size:14px;line-height:1.8;margin:25px 0}.eyebrow{color:var(--red-2);font-size:9px;font-weight:800;letter-spacing:.14em;margin:0 0 11px}.auth-points{display:flex;flex-wrap:wrap;gap:22px}.auth-points span{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:650;color:#d6d5df}.auth-points svg{width:17px;color:var(--red-2)}.auth-points span:nth-child(2) svg{color:#a875ff}.auth-points span:nth-child(3) svg{color:#4fc995}
.auth-card{padding:28px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(155deg,rgba(255,255,255,.04),rgba(255,255,255,.015));box-shadow:var(--shadow)}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:10px;background:rgba(255,255,255,.04);margin-bottom:25px}.auth-tabs button{height:38px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:10px;font-weight:750}.auth-tabs button.active{background:var(--panel-3);color:#fff;box-shadow:0 5px 18px rgba(0,0,0,.25)}.auth-card h2{font:800 22px Manrope;margin:0 0 7px}.auth-card>p{color:var(--muted);font-size:10px;line-height:1.6}.auth-card label,.create-dialog label{display:grid;gap:7px;color:#c9c8d3;font-size:10px;font-weight:650;margin-top:15px}.auth-card input,.create-dialog input,.create-dialog select,.message-form input{width:100%;height:44px;border:1px solid var(--line);border-radius:9px;background:#080a10;color:#fff;padding:0 12px;outline:none}.auth-card input:focus,.create-dialog input:focus,.create-dialog select:focus,.message-form input:focus{border-color:rgba(239,51,64,.65);box-shadow:0 0 0 3px rgba(239,51,64,.08)}.auth-card>.primary-button{width:100%;margin-top:21px}.signup-only{display:none!important}.auth-card.signup .signup-only{display:grid!important}.form-status{min-height:16px;color:#ff7d84!important;margin:10px 0 0!important}.form-status.success{color:var(--green)!important}.primary-button,.secondary-button,.danger-button{min-height:42px;padding:0 17px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9px;font-size:11px;font-weight:750}.primary-button{border:0;color:#fff;background:linear-gradient(135deg,var(--red),#d62c3a);box-shadow:0 12px 30px rgba(239,51,64,.22)}.secondary-button{border:1px solid var(--line);color:#e5e4eb;background:rgba(255,255,255,.045)}.danger-button{border:1px solid rgba(239,51,64,.28);background:rgba(239,51,64,.08);color:#ff747c}.primary-button svg,.secondary-button svg,.danger-button svg{width:16px}.primary-button:hover{transform:translateY(-1px);box-shadow:0 15px 35px rgba(239,51,64,.3)}
.watch-app{width:min(1540px,calc(100% - 42px));margin:auto;padding:30px 0 60px}.watch-titlebar{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-bottom:23px}.watch-titlebar h1{font:800 clamp(31px,3.5vw,48px) Manrope;letter-spacing:-1.8px;margin:0}.watch-titlebar>div:first-child>p:last-child{color:var(--muted);font-size:11px}.watch-titlebar>div:last-child{display:flex;align-items:center;gap:9px}.live-source{display:flex;align-items:center;gap:6px;padding:8px 11px;border:1px solid rgba(66,215,137,.25);border-radius:20px;background:rgba(66,215,137,.07);color:var(--green);font-size:8px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}.live-source i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green)}
.watch-layout{display:grid;grid-template-columns:270px minmax(0,1fr);min-height:680px;border:1px solid var(--line);border-radius:17px;overflow:hidden;background:var(--panel)}.room-sidebar{padding:17px;border-right:1px solid var(--line);background:#090b11}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.panel-heading span,.panel-heading strong{display:block}.panel-heading span{color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.12em}.panel-heading strong{font-size:11px;margin-top:4px}.icon-button{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.04);color:#fff}.icon-button svg{width:16px}.room-list{display:grid;gap:8px;max-height:550px;overflow:auto;padding-right:3px}.room-card{width:100%;display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:9px;text-align:left;padding:10px;border:1px solid transparent;border-radius:10px;background:transparent;color:#fff}.room-card:hover,.room-card.active{background:var(--panel-2);border-color:var(--line)}.room-card.active{border-color:rgba(239,51,64,.32)}.room-art{width:42px;height:42px;border-radius:9px;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#713b91,#17151d 70%)}.room-art svg{width:18px;color:#fff}.room-card strong,.room-card small{display:block;max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-card strong{font-size:10px}.room-card small{font-size:8px;color:var(--muted);margin-top:4px}.room-card>span:last-child{width:7px;height:7px;border-radius:50%;background:#6a6d78}.room-card>span.active{background:var(--green);box-shadow:0 0 8px var(--green)}.loading-card{padding:25px 10px;color:var(--muted);font-size:9px;text-align:center}.loading-card svg{width:15px;vertical-align:middle;margin-right:4px;animation:spin .8s linear infinite}.create-room-button{width:100%;height:42px;margin-top:15px;border:1px dashed rgba(239,51,64,.35);border-radius:9px;background:rgba(239,51,64,.05);color:var(--red-2);font-size:10px;font-weight:750}.create-room-button svg{width:15px;vertical-align:middle;margin-right:6px}.room-workspace{min-width:0}.empty-room{min-height:680px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:35px}.empty-orbit{width:105px;height:105px;margin-bottom:26px;border:1px solid rgba(139,66,245,.3);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(139,66,245,.22),transparent 70%);box-shadow:0 0 70px rgba(139,66,245,.12)}.empty-orbit svg{width:39px;color:#b388ff}.empty-room h2{font:800 25px Manrope;margin:0}.empty-room p{max-width:520px;color:var(--muted);font-size:11px;line-height:1.7;margin:10px 0 22px}
.active-room{padding:18px}.room-topline{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}.room-topline h2{font:800 20px Manrope;margin:2px 0}.room-topline p{color:var(--muted);font-size:9px;margin:0}.room-status{color:#ffc75a;font-size:8px;font-weight:800;letter-spacing:.1em}.room-status.active{color:var(--green)}.participants{display:flex;align-items:center}.participant-avatar{width:34px;height:34px;margin-left:-7px;border:2px solid var(--panel);border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#693d95,#d73951);font-size:9px;font-weight:800}.room-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:13px}.watch-player{aspect-ratio:16/9;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:13px;background:#020204}.watch-player iframe{width:100%;height:100%;border:0}.player-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 50% 35%,rgba(117,54,204,.23),transparent 38%)}.player-placeholder>svg{width:42px;color:#a87bff;margin-bottom:17px}.player-placeholder strong{font:750 15px Manrope}.player-placeholder span{color:var(--muted);font-size:9px;margin-top:6px}.sync-controls{min-height:68px;display:flex;align-items:center;gap:13px;padding:11px 13px;border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;background:#080a0f}.round-control{flex:0 0 38px;width:38px;height:38px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--red);color:#fff}.round-control svg{width:17px;fill:#fff}.sync-progress{flex:1;min-width:0}.sync-progress>div{display:flex;justify-content:space-between;color:var(--muted);font-size:8px;margin-bottom:5px}.sync-progress input{width:100%;height:4px;accent-color:var(--red)}.sync-indicator{display:flex;align-items:center;gap:5px;color:var(--green);font-size:8px;white-space:nowrap}.sync-indicator svg{width:14px}.room-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.chat-panel{height:calc(100% + 0px);min-height:480px;border:1px solid var(--line);border-radius:12px;background:#080a0f;overflow:hidden;display:grid;grid-template-rows:58px minmax(250px,1fr) 58px}.chat-heading{display:flex;align-items:center;justify-content:space-between;padding:0 15px;border-bottom:1px solid var(--line)}.chat-heading strong,.chat-heading span{display:block}.chat-heading strong{font-size:11px}.chat-heading span{color:var(--muted);font-size:8px;margin-top:3px}.chat-heading svg{width:18px;color:var(--red-2)}.messages{padding:13px;overflow:auto;display:flex;flex-direction:column;gap:9px}.message{max-width:88%;align-self:flex-start}.message.mine{align-self:flex-end}.message>span{display:block;color:var(--muted);font-size:7px;margin:0 5px 3px}.message.mine>span{text-align:right}.message p{margin:0;padding:8px 10px;border-radius:9px;background:var(--panel-3);font-size:9px;line-height:1.55}.message.mine p{background:linear-gradient(135deg,#d62e3b,#ac2633);color:#fff}.message-form{display:flex;gap:7px;padding:9px;border-top:1px solid var(--line)}.message-form input{height:39px;min-width:0;font-size:9px}.message-form button{flex:0 0 39px;border:0;border-radius:9px;background:var(--red);color:#fff;display:grid;place-items:center}.message-form button svg{width:16px}
.create-dialog{width:min(650px,calc(100% - 28px));padding:0;border:1px solid rgba(255,255,255,.14);border-radius:17px;background:#0a0c12;color:#fff;box-shadow:var(--shadow)}.create-dialog::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(7px)}.create-dialog form{padding:25px}.dialog-heading{display:flex;justify-content:space-between;gap:20px}.dialog-heading h2{font:800 24px Manrope;margin:0}.dialog-heading p:last-child{color:var(--muted);font-size:9px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.form-grid .wide{grid-column:1/-1}.create-dialog select{appearance:auto}.privacy-row{display:flex!important;align-items:center;justify-content:space-between;padding:13px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.025)}.privacy-row strong,.privacy-row small{display:block}.privacy-row small{color:var(--muted);font-weight:400;margin-top:4px}.privacy-row input{width:18px;height:18px;accent-color:var(--red)}.create-dialog>.primary-button,.create-dialog form>.primary-button{width:100%;margin-top:20px}.manual-invite{display:none!important}.manual-invite.visible{display:grid!important}.toast{position:fixed;z-index:300;left:50%;bottom:24px;transform:translate(-50%,100px);padding:10px 15px;border:1px solid var(--line);border-radius:9px;background:#171923;color:#fff;font-size:10px;transition:.25s}.toast.show{transform:translate(-50%,0)}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1050px){.auth-stage{gap:35px}.watch-layout{grid-template-columns:230px minmax(0,1fr)}.room-grid{grid-template-columns:1fr}.chat-panel{min-height:390px}.room-card strong,.room-card small{max-width:105px}}
@media(max-width:760px){.watch-header{height:62px}.watch-header nav{display:none}.account-chip{margin-left:auto}.auth-stage{grid-template-columns:1fr;gap:35px;padding:48px 0}.auth-story h1{font-size:50px;letter-spacing:-2.8px}.watch-app{width:calc(100% - 24px);padding-top:20px}.watch-titlebar{align-items:flex-start;flex-direction:column}.watch-titlebar>div:last-child{width:100%;justify-content:space-between}.watch-layout{display:block;min-height:0}.room-sidebar{border-right:0;border-bottom:1px solid var(--line)}.room-list{display:flex;overflow:auto;max-height:none}.room-card{min-width:205px}.create-room-button{max-width:260px}.empty-room{min-height:520px}.active-room{padding:12px}.sync-controls{flex-wrap:wrap}.sync-indicator{width:100%;justify-content:center}.room-actions>*{flex:1}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.manual-invite.visible{display:grid!important}}
@media(max-width:480px){.watch-header{padding:0 13px}.account-chip div{display:none}.auth-stage{width:calc(100% - 24px)}.auth-story h1{font-size:42px}.auth-points{gap:12px}.auth-card{padding:20px}.watch-titlebar>div:last-child{align-items:stretch;flex-direction:column}.watch-titlebar .secondary-button{width:100%}.room-topline{align-items:flex-start}.participants{padding-top:8px}.sync-controls{padding:9px}.sync-progress{min-width:180px}.room-actions{display:grid;grid-template-columns:1fr}.dialog-heading h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}