:root{color-scheme:dark;--bg:#100d17;--surface:#1c1628;--raised:#292035;--border:#3b2d4e;--text:#f6f1ff;--muted:#b3a7c4;--accent:#b38aff;--danger:#ffabab;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}a{color:inherit;text-decoration:none}button,input,.button{font:inherit}button,.button{border:1px solid var(--border);background:var(--raised);color:var(--text);border-radius:9px;padding:11px 17px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:background .15s,transform .15s}button:hover,.button:hover{background:#3a2c4f}button:active{transform:translateY(1px)}button:disabled{opacity:.45;cursor:wait}button.primary,.button.primary{background:var(--accent);border-color:var(--accent);color:#190b30}button.primary:hover,.button.primary:hover{background:#c8a7ff}.quiet{border-color:transparent;background:transparent;color:var(--muted);padding:8px}.quiet:hover{background:var(--raised);color:var(--text)}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}input{background:#140e20;border:1px solid #58406e;border-radius:8px;padding:13px;color:var(--text);min-width:0;width:100%}input::placeholder{color:#a08daf}h1,h2,p{margin-top:0}h1{font-size:clamp(2rem,3.2vw,2.75rem);font-weight:650;letter-spacing:-1.7px;margin-bottom:10px;line-height:1.15}h2{font-size:1.25rem;letter-spacing:-.4px;margin-bottom:0}.muted{color:var(--muted);line-height:1.6;margin-bottom:0;font-size:.95rem}.eyebrow,.tiny-label{font-size:.75rem;font-weight:650;letter-spacing:1.5px;color:var(--muted)}.eyebrow{margin-bottom:14px}.accent{color:var(--accent)}.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.15rem;letter-spacing:2px}.brand-icon{display:grid;place-items:center;width:35px;height:35px;background:var(--accent);color:#230e42;border-radius:9px;font-weight:900;font-size:1.35rem;letter-spacing:-2px}nav{display:grid;gap:6px}.main-shell{margin-left:235px}.topbar{height:89px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid var(--border);font-size:.75rem;color:var(--muted);letter-spacing:.5px}.topbar strong{color:var(--text);font-size:.85rem;letter-spacing:0}.account{display:flex;align-items:center;gap:11px;letter-spacing:0;font-size:.9rem;color:var(--text)}.avatar{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border:1px solid #71538a;border-radius:50%;color:var(--accent);background:#332247;font-size:.9rem;font-weight:700}.account small,.member small{display:block;color:var(--muted);font-size:.75rem;margin-top:3px}.account button{margin-left:10px;font-size:.8rem}main{max-width:1460px;padding:40px;margin:0 auto}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;gap:20px}.connection{font-size:.8rem;color:var(--muted);border:1px solid var(--border);border-radius:20px;padding:8px 12px;white-space:nowrap}.connection.good{color:var(--accent)}.broadcast-panel{display:grid;grid-template-columns:minmax(0,1fr) 260px;border:1px solid var(--border);border-radius:15px;overflow:hidden;background:var(--surface)}.broadcast-main{padding:27px 30px}.panel-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:27px}.panel-top .eyebrow{margin:0}.status-badge{font-size:.75rem;border:1px solid #7954a2;border-radius:5px;background:#362249;color:var(--accent);padding:5px 9px;text-transform:uppercase;letter-spacing:1px}.broadcast-main h2{font-size:1.65rem;line-height:1.35;max-width:730px;overflow-wrap:anywhere}.broadcast-main>p{margin-top:8px}.timeline{height:5px;background:#3c2c50;border-radius:5px;margin-top:30px;overflow:hidden}.timeline>div{height:100%;width:0;background:var(--accent);transition:width 1s}.time-row{display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums;margin-top:9px}.transport{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.hint{font-size:.8rem;line-height:1.6;color:var(--muted);margin:13px 0 0}.monitor{border-top:1px solid var(--border);padding-top:22px}.monitor p{font-size:.9rem;line-height:1.5;margin:10px 0}.speed{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-top:auto}.speed strong{color:var(--text)}.section{margin-top:33px;scroll-margin-top:20px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:19px}.section-heading .muted{font-size:.85rem;margin-top:7px}.count{font-size:.8rem;font-weight:500;padding:3px 8px;border:1px solid var(--border);border-radius:5px;color:var(--muted);vertical-align:middle;margin-left:7px}.queue-list{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}.queue-item{display:flex;align-items:center;gap:18px;padding:20px 22px;border-bottom:1px solid var(--border)}.queue-item:last-child{border:0}.queue-item.current{background:#2c1e3c;border-left:3px solid var(--accent);padding-left:19px}.queue-number{width:27px;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}.playlist-mark{width:43px;height:43px;display:grid;place-items:center;border-radius:8px;background:#38254c;color:#d4b8f4;font-size:1.4rem;flex-shrink:0}.playlist-info{min-width:0;flex:1}.playlist-info strong{font-size:.95rem;display:block;overflow-wrap:anywhere}.playlist-info small{display:block;font-size:.75rem;color:var(--muted);margin-top:6px;overflow-wrap:anywhere}.playlist-actions{display:flex;gap:3px;flex-wrap:wrap}.playlist-actions button{font-size:.8rem;padding:7px 9px}.queue-current{font-size:.75rem;font-weight:500;color:var(--accent);margin-left:10px}.empty{padding:36px;text-align:center;color:var(--muted);line-height:1.6}.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:25px}.card .eyebrow{margin-bottom:8px}.card>.muted{font-size:.85rem}.invite-form{display:flex;gap:8px;margin:20px 0}.invite-form button{font-size:.8rem;white-space:nowrap}.member{display:flex;align-items:center;gap:11px;padding:13px 0;border-top:1px solid var(--border)}.member strong{font-size:.9rem}.member .tag,.member button{margin-left:auto;font-size:.75rem}.tag{color:var(--muted)}.live-label{font-size:.75rem;color:var(--muted)}.activity-list{max-height:300px;overflow:auto}.event{display:grid;grid-template-columns:61px 1fr;gap:13px;padding:13px 0;border-bottom:1px solid var(--border)}.event:last-child{border:0}.event time{font-size:.75rem;color:var(--muted);padding-top:3px}.event p{font-size:.85rem;margin:0;overflow-wrap:anywhere;line-height:1.5}.event small{display:block;color:var(--muted);font-size:.75rem;margin-top:4px}footer{display:flex;justify-content:space-between;color:#a08daf;font-size:.75rem;letter-spacing:1px;margin-top:40px;padding-bottom:10px}footer span{letter-spacing:0}.notice{padding:15px;border-radius:8px;border:1px solid #754545;background:#362020;margin-bottom:20px;font-size:.9rem}.error,.form-error{color:var(--danger)}[hidden]{display:none!important}dialog{background:var(--surface);color:var(--text);border:1px solid #73568c;border-radius:16px;padding:27px;width:min(520px,calc(100% - 32px));box-shadow:0 25px 100px #0008}dialog::backdrop{background:#0009;backdrop-filter:blur(4px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}dialog label{font-size:.9rem;display:block;margin:18px 0 8px}.checkbox-row{display:flex;align-items:center;gap:12px}.checkbox-row input{width:18px;height:18px;accent-color:var(--accent)}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.form-error{font-size:.85rem;margin-top:12px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--accent);color:#1d0b34;padding:13px 22px;border-radius:9px;box-shadow:0 8px 40px #0006;z-index:20;font-size:.9rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.login-page{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.login-card{width:min(540px,100%);padding:65px;margin:auto}.login-card .brand{margin-bottom:90px;flex-wrap:wrap}.login-card h1{font-size:3rem;line-height:1.12;margin-bottom:23px}.login-button{width:100%;margin-top:33px;justify-content:space-between;padding:17px 20px}@media(min-width:1500px){main{padding-top:50px}.broadcast-main{padding:34px 38px}}@media(max-width:1100px){.main-shell{margin-left:200px}main{padding:28px}.topbar{padding:0 28px}.broadcast-panel{grid-template-columns:minmax(0,1fr) 210px}.broadcast-main{padding:24px}.bottom-grid{grid-template-columns:1fr}.playlist-actions{max-width:175px;justify-content:flex-end}.section-heading{align-items:flex-start}}@media(max-width:760px){.main-shell{margin:0}.topbar{height:75px;padding:0 20px}.topbar>span{display:none}.account{margin-left:auto}main{padding:26px 20px}.page-heading{align-items:flex-start;flex-direction:column;gap:14px}.page-heading .muted{font-size:.9rem}.broadcast-panel{grid-template-columns:1fr}.monitor{padding:0;border:0}.speed{grid-column:1/-1;padding-top:15px;border-top:1px solid var(--border)}.broadcast-main h2{font-size:1.35rem}.section-heading{flex-wrap:wrap}.queue-item{gap:10px;padding:18px 14px;flex-wrap:wrap}.queue-item.current{padding-left:11px}.queue-number{width:18px}.playlist-mark{width:35px;height:35px}.playlist-actions{max-width:none;width:100%;justify-content:flex-end;margin-top:3px}.playlist-info small{font-size:.75rem}.card{padding:20px}.live-label{display:none}.transport button{padding:11px 14px;font-size:.85rem}footer{flex-direction:column;gap:10px}.login-page{grid-template-columns:1fr}.login-card{padding:35px}.login-card .brand{margin-bottom:65px}.invite-form{flex-wrap:wrap}.invite-form input{flex:1;min-width:140px}.connection{white-space:normal}} /* Penta control panel: one working surface, no side navigation. */ .main-shell{margin-left:0}.topbar{max-width:1220px;margin:auto;height:auto;min-height:82px;padding:18px 32px;gap:20px;flex-wrap:wrap}.topbar .brand{font-size:1.05rem;letter-spacing:.1px;text-transform:none}.topbar .brand-icon{color:white;background:#9146ff}main{max-width:1220px;padding:32px}.page-heading{margin-bottom:24px}.page-heading h1{font-size:2rem;letter-spacing:-.8px}.broadcast-panel{display:block}.broadcast-main{padding:28px}.monitor{border:0;padding:0}.monitor .tiny-label{display:block}.penta-status{display:block;margin:8px 0;font-size:1.2rem}.penta-status.online{color:#e3b6ff}.penta-status.offline{color:#c8b8e6}.penta-status.unknown{color:#d5c5ac}.monitor p{margin:6px 0;font-size:.9rem}.monitor small{color:var(--muted);font-size:.8rem}.output-summary a{color:var(--accent)}.login-page{display:grid;grid-template-columns:1fr;min-height:100dvh;place-items:center;background:#100d17}.login-card{margin:32px auto;padding:36px;width:min(430px,calc(100% - 32px));background:var(--surface);border:1px solid var(--border);border-radius:16px;text-align:center}.login-card .brand-icon{margin:0 auto 22px;background:#9146ff;color:white;width:48px;height:48px;border-radius:12px}.login-card h1{font-size:1.9rem;letter-spacing:-.7px;margin-bottom:12px}.login-button{justify-content:center;margin-top:28px}.login-card .notice{margin-top:20px}.transport button{font-size:.95rem}footer{justify-content:center;letter-spacing:0} @media(max-width:760px){.topbar{padding:16px 20px}.topbar .brand{display:flex;max-width:100%;font-size:1rem}.account{margin-left:0}.account button{margin-left:0}.main-shell{margin:0}main{padding:25px 20px}.broadcast-main{padding:22px}.login-card{padding:28px}.login-card h1{font-size:1.7rem}} .mode-label{color:var(--accent);font-size:.95rem;margin-top:20px}.transport button[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:3px} .transport button:disabled{background:#302b38;border-color:#48404f;color:#a39aa9;opacity:.7;cursor:not-allowed;transform:none}.transport button[aria-busy="true"]{cursor:wait} .transport button:not(:disabled){background:#9146ff;border-color:#9146ff;color:#fff}.transport button:not(:disabled):hover{background:#a970ff;border-color:#a970ff}.transport button:disabled{background:#423c49;border-color:#554d5e;color:#aaa2b2;opacity:1} .topbar .penta-logo,.login-card .penta-logo{object-fit:contain;background:#000;display:block;flex-shrink:0}.topbar .penta-logo{width:48px;height:48px;border-radius:10px}.login-card .penta-logo{width:112px;height:112px;border-radius:16px;margin:0 auto 22px} .penta-status.inactive{color:#c4b5fd} .penta-status.online{color:#b780ff}.penta-status.offline{color:#f6f1ff}.penta-status.inactive{color:#a39aa9}.penta-status.unknown{color:#f28b9a} .connection.good{color:#86efac;border-color:#316847;background:#14281c}.connection.down{color:#f28b9a;border-color:#75404a;background:#30191f} /* Stream metadata sits beside playback on wide screens. */ main,.topbar{max-width:1540px}.stream-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:24px;align-items:start}.stream-layout .broadcast-panel{min-width:0;margin-bottom:0}.stream-editor{padding:24px;min-width:0}.stream-editor h2{margin:8px 0 16px}.stream-editor label{display:block;margin:20px 0 8px;font-size:.9rem}.stream-editor fieldset{border:0;padding:0;margin:0;min-width:0}.stream-editor textarea{resize:vertical;min-height:90px;width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:12px;font:inherit}.category-combo{position:relative}.category-combo input{width:100%}#category-results{position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;margin:0;padding:6px;list-style:none;max-height:280px;overflow:auto;background:var(--raised);border:1px solid var(--border);border-radius:10px;box-shadow:0 18px 48px #000a}.category-option{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:7px;cursor:pointer;font-size:.9rem;line-height:1.3}.category-option img{width:26px;height:36px;object-fit:cover;border-radius:4px;flex-shrink:0;background:#2a2138}.category-option span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.category-option.active{background:var(--accent);color:#190b30}.category-empty{padding:12px 10px;color:var(--muted);font-size:.85rem}.stream-save{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.stream-editor .connected{color:#86efac}.stream-editor .failed{color:#f28b9a}.stream-editor .hint{line-height:1.5}.channel-connect{margin:16px 0}.stream-editor button:not(:disabled),.playlist-actions button:not(:disabled),#add-playlist:not(:disabled){background:#9146ff;border-color:#9146ff;color:#fff}.stream-editor button:disabled,.stream-editor fieldset:disabled button{background:#423c49;border-color:#554d5e;color:#aaa2b2;cursor:not-allowed}.stream-editor fieldset:disabled{opacity:.6}.stream-editor textarea:focus-visible{outline:2px solid #b780ff;outline-offset:2px} @media(max-width:1120px){.stream-layout{grid-template-columns:1fr}.stream-editor{width:100%}}@media(max-width:520px){.stream-editor{padding:22px}} .reload-info{margin-top:10px} .playback-column{min-width:0}.playback-column .queue-item{flex-wrap:wrap}.playback-column .playlist-actions{margin-left:auto} .stream-actions{display:flex;flex-wrap:nowrap;gap:6px;margin-top:18px}.stream-actions button{flex:1 1 0;min-width:0;white-space:nowrap;padding:10px 5px;font-size:12px;letter-spacing:-.2px} .queue-tools{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}.queue-tools button:not(:disabled){background:#9146ff;border-color:#9146ff;color:#fff}.playlist-actions button:disabled,.queue-tools button:disabled{background:#423c49;border-color:#554d5e;color:#aaa2b2;opacity:1;cursor:not-allowed}.playback-column .section-heading{flex-wrap:wrap} img.avatar{object-fit:cover;padding:0;background:var(--raised)} .account img.avatar{margin-right:2px} /* Penta status: a page-level banner, above and separate from playback controls */ .monitor-bar{display:flex;align-items:center;gap:18px;margin-bottom:22px;padding:18px 24px; border:1px solid var(--border);border-left:4px solid var(--muted);border-radius:14px;background:var(--surface)} .monitor-bar .monitor{flex:1;min-width:0} .monitor-bar .tiny-label{display:block;margin-bottom:6px} .monitor-dot{width:13px;height:13px;border-radius:50%;flex-shrink:0;background:var(--muted); box-shadow:0 0 0 5px rgba(179,167,196,.14)} .monitor-link{white-space:nowrap;font-size:.85rem;color:var(--accent); border:1px solid var(--border);border-radius:9px;padding:10px 14px} .monitor-link:hover{background:var(--raised)} .monitor-bar.online{border-left-color:#ff7a94;background:linear-gradient(90deg,rgba(255,122,148,.10),var(--surface) 55%)} .monitor-bar.online .monitor-dot{background:#ff7a94;box-shadow:0 0 0 5px rgba(255,122,148,.18);animation:pentapulse 2s ease-in-out infinite} .monitor-bar.offline{border-left-color:#5fe0a6;background:linear-gradient(90deg,rgba(95,224,166,.09),var(--surface) 55%)} .monitor-bar.offline .monitor-dot{background:#5fe0a6;box-shadow:0 0 0 5px rgba(95,224,166,.16)} @keyframes pentapulse{0%,100%{opacity:1}50%{opacity:.45}} .penta-status{margin:0 0 4px} .monitor-bar.online .penta-status{color:#ff7a94} .monitor-bar.offline .penta-status{color:#5fe0a6} /* encoder telemetry now sits with playback, where it belongs */ .output-summary{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:22px;padding-top:18px; border-top:1px solid var(--border);color:var(--muted);font-size:.8rem} .output-summary strong{color:var(--text);font-weight:600} @media(max-width:620px){.monitor-bar{flex-wrap:wrap}.monitor-link{width:100%;text-align:center}} /* compact Penta status in the top bar */ .penta-chip{display:inline-flex;align-items:center;gap:9px;margin-left:auto;margin-right:20px; padding:7px 13px;border:1px solid var(--border);border-radius:999px;background:var(--surface); font-size:.85rem;white-space:nowrap;transition:border-color .15s,background .15s} .penta-chip:hover{background:var(--raised)} .penta-chip .penta-status{margin:0;font-size:.85rem;font-weight:650} .penta-chip .chip-go{color:var(--muted);font-size:.78rem;padding-left:9px;border-left:1px solid var(--border)} .penta-chip .monitor-dot{width:9px;height:9px;box-shadow:none} .penta-chip.online{border-color:#7d3550;background:rgba(255,122,148,.10)} .penta-chip.online .monitor-dot{background:#ff7a94;animation:pentapulse 2s ease-in-out infinite} .penta-chip.online .penta-status{color:#ff7a94} .penta-chip.offline{border-color:#2f5a48;background:rgba(95,224,166,.08)} .penta-chip.offline .monitor-dot{background:#5fe0a6} .penta-chip.offline .penta-status{color:#5fe0a6} .playback-note{font-size:.85rem;margin:6px 0 0} @media(max-width:860px){.penta-chip .chip-go{display:none}.penta-chip{margin-right:12px}} @media(max-width:620px){.penta-chip .penta-status{display:none}.penta-chip{padding:7px 10px}} /* Access + Activity: side by side and denser */ .bottom-grid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:24px;align-items:start;margin-top:24px} .bottom-grid .card{margin-top:0;padding:20px} .bottom-grid .section-heading{margin-bottom:12px} .bottom-grid h2{font-size:1.05rem} .bottom-grid .card>.muted{font-size:.8rem;line-height:1.5} .invite-form{margin:14px 0 4px;gap:6px} .invite-form input{padding:10px} .invite-form button{padding:10px 13px} .member{padding:9px 0;gap:10px} .member .avatar{width:30px;height:30px;font-size:.8rem} .member strong{font-size:.86rem} .activity-list{max-height:230px} .event{grid-template-columns:56px 1fr;gap:10px;padding:9px 0} .event p{font-size:.82rem;line-height:1.4} @media(max-width:1000px){.bottom-grid{grid-template-columns:1fr}} /* Activity takes the wide column; access is owner-only so it sits narrow. When the viewer is not the owner, Activity is the only card and spans both. */ .bottom-grid > :only-child{grid-column:1 / -1} .bottom-grid #activity-section .activity-list{max-height:330px} /* the invite form has to stack in the narrow column */ .bottom-grid #access-section .invite-form{flex-direction:column;align-items:stretch} .bottom-grid #access-section .invite-form button{width:100%} /* playback state, styled to match the Penta chip in the top bar */ .state-chip{display:inline-flex;align-items:center;gap:9px;padding:6px 13px;border-radius:999px; border:1px solid var(--border);background:var(--raised); font-size:.75rem;font-weight:650;letter-spacing:1.5px;color:var(--muted)} .state-chip .monitor-dot{width:9px;height:9px;box-shadow:none;background:var(--muted)} .state-chip.playing{border-color:#2f5a48;background:rgba(95,224,166,.10);color:#5fe0a6} .state-chip.playing .monitor-dot{background:#5fe0a6} .state-chip.paused{border-color:#7d3550;background:rgba(255,122,148,.10);color:#ff7a94} .state-chip.paused .monitor-dot{background:#ff7a94;animation:pentapulse 2s ease-in-out infinite} .state-chip.busy{border-color:#4a3570;background:#2a1d45;color:var(--accent-bright,#c4a0ff)} .state-chip.busy .monitor-dot{background:var(--accent)} /* match the padding the other panels use */ .bottom-grid .card{padding:24px} /* the queue heading/buttons were floating on the page background while every other section sits in a panel -- wrap the whole thing instead */ #queue-section{background:var(--surface);border:1px solid var(--border);border-radius:15px;padding:24px;overflow:hidden} #queue-section .section-heading{margin-bottom:16px} #queue-section .queue-list{border:0;background:transparent;border-radius:0;margin:4px -24px -24px;overflow:hidden} #queue-section .queue-item{padding:16px 24px;border-bottom:0;border-top:1px solid var(--border)} /* Dragging rows into a new order. The grip is the handle; the marks show where the row will land. */ /* The Auto wait: a pill on the end of the Auto button, opening a small popover. It is part of what Auto means, so it lives on the button rather than in a settings list somewhere else. */ /* The panel used to clip at its rounded edge for the sake of a second column it no longer has; the popover has to be able to hang below it. */ .broadcast-panel{overflow:visible} .auto-group{position:relative;display:inline-flex;align-items:stretch} .auto-group>button[data-action="auto"]{border-top-right-radius:0;border-bottom-right-radius:0} .auto-pill{display:inline-flex;align-items:center;padding:0 11px;margin-left:-1px; border:1px solid var(--border);border-radius:0 9px 9px 0;background:var(--surface); color:var(--muted);font-size:.78rem;font-weight:600;font-variant-numeric:tabular-nums; cursor:pointer;transition:background .15s} /* The transport paints its buttons purple; the pill is a quieter shade of the same so it reads as the tail of Auto, not a sixth control. */ .transport .auto-pill,.transport button.auto-pill:not(:disabled){background:#5d2fa6;border-color:#9146ff; color:#dccbff;padding:0 11px;font-size:.78rem} .transport button.auto-pill:not(:disabled):hover,.transport button.auto-pill[aria-expanded="true"]{ background:#7445c7;border-color:#a970ff;color:#fff} .auto-pill.static{cursor:default} .confirm-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:30;width:min(340px,calc(100vw - 48px)); padding:16px;border:1px solid #73568c;border-radius:12px;background:var(--surface); box-shadow:0 18px 50px rgba(0,0,0,.55)} .confirm-pop label{display:block;font-size:.85rem;margin:0 0 10px} .confirm-row{display:flex;align-items:center;gap:8px} .confirm-row input{width:84px;padding:9px 10px;text-align:right;font-variant-numeric:tabular-nums} .confirm-row span{color:var(--muted);font-size:.85rem} .confirm-row button{margin-left:auto;font-size:.8rem;padding:9px 14px} .confirm-note{margin:10px 0 0;font-size:.75rem;color:var(--muted);line-height:1.5} .queue-grip{cursor:grab;color:var(--muted);font-size:.9rem;letter-spacing:-3px;user-select:none; padding:6px 2px;margin-right:-6px;flex:0 0 auto} .queue-grip:hover{color:var(--text)} .queue-item.dragging{opacity:.4} .queue-item.dragging .queue-grip{cursor:grabbing} .queue-item.drop-before{box-shadow:inset 0 3px 0 var(--accent)} .queue-item.drop-after{box-shadow:inset 0 -3px 0 var(--accent)} #queue-section .queue-item.current{padding-left:21px;border-left:3px solid var(--accent)} #queue-section .empty{padding:30px 24px;border-top:1px solid var(--border)} /* tighter again -- these two cards are denser than the main panels */ .bottom-grid .card{padding:18px} .bottom-grid .section-heading{margin-bottom:10px} /* the three Twitch buttons were forced onto one line with 5px of side padding and squeezed text. Let them breathe: primary on its own row, then the pair. */ .stream-actions{flex-wrap:wrap;gap:8px} .stream-actions button{flex:1 1 auto;padding:10px 14px;font-size:.8rem;letter-spacing:0} .stream-actions #save-stream{order:-1;flex:1 1 100%} .stream-actions #clear-category:not(:disabled), .stream-actions #load-stream:not(:disabled){background:var(--raised);border-color:var(--border);color:var(--text)} /* both status readouts become dot chips, matching Penta's and the playback state */ .connection,#channel-state{display:inline-flex;align-items:center;gap:8px;white-space:nowrap; padding:6px 13px;border-radius:999px;border:1px solid var(--border);background:var(--surface); font-size:.78rem;font-weight:600;color:var(--muted)} .connection::before,#channel-state::before{content:'';width:8px;height:8px;border-radius:50%; background:var(--muted);flex-shrink:0} .connection.good,#channel-state.connected{border-color:#2f5a48;background:rgba(95,224,166,.09);color:#5fe0a6} .connection.good::before,#channel-state.connected::before{background:#5fe0a6} .connection.down{border-color:#7d3550;background:rgba(255,122,148,.09);color:#ff7a94} .connection.down::before{background:#ff7a94;animation:pentapulse 2s ease-in-out infinite} #channel-state{margin:2px 0 14px} /* the two ambient status chips sit together in the top bar */ .topbar .penta-chip{margin-left:auto} .page-heading{justify-content:flex-start} @media(max-width:1000px){.topbar .connection{display:none}} /* Penta's matters more when space is tight */ /* Worker-connected is the normal state, so keep it quiet; green is reserved for Penta being offline, which is the signal that actually matters. */ .topbar .connection.good{border-color:var(--border);background:var(--surface);color:var(--muted)} .topbar .connection.good::before{background:#5fe0a6} /* worker health is operational detail: it lives with the encoder telemetry, and the state chip already shouts WORKER OFFLINE when it actually drops */ .output-summary .connection{padding:0;border:0;background:none;font-size:.8rem;font-weight:400; color:var(--muted);gap:7px} .output-summary .connection.good{border:0;background:none;color:var(--muted)} .output-summary .connection::before{width:7px;height:7px} .output-summary .connection.down{border:0;background:none;color:#ff7a94;font-weight:600} /* the channel controls are a separate concern from the member list above */ #access-section .channel-connect{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--border)} #access-section .channel-connect .tiny-label{display:block;margin-bottom:10px} #access-section .channel-connect button{width:100%} #access-section .channel-connect .hint{margin-top:10px} /* connected state: a muted readout with an X to disconnect, not a loud button */ .channel-linked{display:flex;width:100%;height:43px;min-height:43px;box-sizing:border-box; align-items:center;justify-content:space-between;gap:9px;padding:7px 7px 7px 10px; border:1px solid var(--border);border-radius:9px;background:var(--raised); color:var(--muted);font-size:.85rem;font-weight:600} .channel-linked .linked-dot{margin-right:-2px} .channel-linked>span:first-child{flex-shrink:0} .linked-dot{width:8px;height:8px;border-radius:50%;background:#5fe0a6;flex-shrink:0} /* One outlined control style, shared by Disconnect and the per-member Revoke: both are destructive owner-only actions inside Owner controls, so they should read the same. .danger adds the red hover they share. */ .linked-action{padding:5px 12px;border-radius:7px;font-size:.78rem;font-weight:600; background:transparent;border:1px solid var(--border);color:var(--muted);flex-shrink:0} .linked-action.danger:hover{background:rgba(255,122,148,.14);border-color:#7d3550;color:#ff7a94} .member .linked-action{margin-left:auto;font-size:.78rem} .channel-linked #connect-channel:hover{background:rgba(145,70,255,.16);border-color:var(--accent);color:var(--text)} #access-section .channel-connect .linked-action{width:auto} /* Stream info matches the other side-column card again */ .stream-editor{padding:18px} .stream-editor #stream-feedback{margin-top:10px} .linked-label{display:inline-flex;align-items:center;gap:9px} /* not connected: the dot goes red, everything else stays put */ .channel-linked.offline .linked-dot{background:#ff7a94} .channel-linked.offline .linked-label{color:var(--muted)} .channel-connect .hint:last-child{margin-bottom:0} /* One grid, two columns that pack independently. Previously the bottom cards lived in a separate grid below, so the short right-hand column was padded out with dead space until the taller left column finished. */ .playback-column,.side-column{display:flex;flex-direction:column;gap:24px;min-width:0} .playback-column>.section,.side-column>.section,.side-column>.card{margin-top:0} .playback-column>.broadcast-panel{margin-bottom:0} /* icon-only sign out: saves top-bar width, keeps an accessible name */ .icon-button{width:38px;height:38px;padding:0;flex-shrink:0;display:grid;place-items:center; border-radius:9px;border:1px solid var(--border);background:transparent;color:var(--muted)} .icon-button:hover{background:var(--raised);color:var(--text);border-color:#3d2d5a} .account .icon-button{margin-left:14px} .member .role-select{margin-left:auto;width:auto;padding:5px 8px;font-size:.75rem;border-radius:7px; background:#140e20;border:1px solid #58406e;color:var(--text)} .member .role-select+button{margin-left:0} .invite-form select{width:auto;min-width:110px;padding:10px;border-radius:8px; background:#140e20;border:1px solid #58406e;color:var(--text);font-size:.85rem} /* The access card lives in the narrow side column, so the invite row wraps: username on its own line, role and the button beneath it. */ #access-section .invite-form{flex-wrap:wrap} #access-section .invite-form input{flex:1 1 100%} #access-section .invite-form select{flex:1 1 auto} #access-section .invite-form button{flex:0 0 auto} .member{flex-wrap:wrap} .member>div{flex:1 1 auto;min-width:0} .member-actions{display:flex;align-items:center;gap:6px;margin-left:auto} .member-actions .role-select{margin-left:0} /* Role switcher lives with the account, where the role is already named. It looks like the label it replaces until you use it; while a role is borrowed it turns accent so the missing controls are never a mystery. */ .account .who{display:flex;flex-direction:column;align-items:flex-start;gap:2px} /* The role control is a real menu, not a