/* Reference palette: carbon surfaces, white interactions, emerald/orange/coral statuses. */ :root{--bg:#050505;--surface:#0e0e0e;--raised:#191919;--border:#242424;--text:#ebebed;--muted:#808087;--accent:#f1f1f3;--accent-bg:#202020;--mint:#f1f1f3;--mint-dim:#202020;--blue:#a0a0a6;--red:#fa6b73;--amber:#f3b63f;--success:#29cc94;--upcoming:#ff922e;color-scheme:dark} body,#workspace{background:var(--bg);color:var(--text)}.brand-dot{color:#ededf0}.brand-label,.viewer,.muted,.field-note{color:#808087} #workspace .masthead{background:#060606;border-color:#222;box-shadow:none} #workspace .provider-section,#workspace #streams-dialog{background:#0e0e0e;border:1px solid #242424;box-shadow:none;border-radius:12px} #workspace .section-top,.provider-pane-tools,#workspace .split-workspace #streams-dialog>.dialog-heading{background:#0e0e0e;border-color:#242424;box-shadow:none} #workspace .table-scroll,#workspace .stream-detail,#workspace .stream-list-scroll{background:#0e0e0e;border-color:#242424} #workspace .providers-table th,#workspace .streams-table th{background:#101010;color:#818188;border-color:#262626;box-shadow:none;font-weight:500} #workspace .providers-table td,#workspace .streams-table td{border-color:#181818;color:#d6d6da} #workspace .providers-table .provider-row:hover,#workspace .streams-table .stream-list-row:hover{background:#171717} #workspace .providers-table tr.provider-row.expanded,#workspace .providers-table tr.provider-row.expanded:hover{background:#242424;outline:1px solid #666;outline-offset:-1px;box-shadow:inset 3px 0 #eeeeef} #workspace .providers-table tr.provider-row.expanded .provider-name{color:#f1f1f3}#streams-dialog .streams-table tr.stream-selected td{background:#242424} #workspace .providers-table tr.provider-down,#workspace .providers-table tr.provider-down:hover{background:#241214;box-shadow:inset 3px 0 #fa6b73} #workspace .providers-table tr.provider-critical,#workspace .providers-table tr.provider-critical:hover{background:#241b0e;box-shadow:inset 3px 0 #ff922e} #workspace .providers-table tr.provider-disabled{background:#101010;box-shadow:none;color:#75757c}#workspace .providers-table tr.provider-disabled .provider-name{color:#8b8b92} #workspace h2,#workspace h3,.provider-name,.stream-name-cell strong{color:#ebebed}.server-cell,.stream-id-cell,.stream-schedule,.detail-state{color:#85858d}.id-tag,.count-pill,.provider-avatar{background:#1e1e1e;border-color:#2c2c2c;color:#9d9da5}.provider-name .chevron,.stream-list-footer,.table-footer,.context-provider-name{color:#77777f} input:not([type=checkbox]),select,textarea,#workspace .search-wrap input{background:#0d0d0d;border:1px solid #292929;color:#dedee2;border-radius:7px;box-shadow:none}input::placeholder,textarea::placeholder{color:#77777f}input:focus,select:focus,textarea:focus{border-color:#929298;outline:1px solid #eeeeee1a;box-shadow:none}input[type=checkbox]{accent-color:#ededf0} button{border-radius:6px;transition:background 150ms,border-color 150ms;box-shadow:none}button:hover:not(:disabled){filter:none}button:active:not(:disabled){transform:none}button:focus-visible{outline:2px solid #b5b5bb;outline-offset:2px} .primary,#workspace .primary,#terminal-dialog.ssh-redesign .ssh-primary{background:#f1f1f3;border:1px solid #e1e1e5;color:#111;box-shadow:none}.primary:hover:not(:disabled),#workspace .primary:hover:not(:disabled),#terminal-dialog.ssh-redesign .ssh-primary:hover:not(:disabled){background:#dcdce0;border-color:#dcdce0} .secondary,#workspace .secondary,#terminal-dialog.ssh-redesign .ssh-button{background:#191919;border:1px solid #333;color:#d4d4d9;box-shadow:none}.secondary:hover:not(:disabled),#workspace .secondary:hover:not(:disabled),#terminal-dialog.ssh-redesign .ssh-button:hover:not(:disabled){background:#262626;border-color:#4b4b4b;color:#ededf0}.quiet{color:#92929a}.quiet:hover{background:#202020;color:#e5e5e9} #workspace .monitor-button{background:#102d20;border-color:#23543c;color:#29cc94}#workspace .monitor-button.stopping{background:#301719;border-color:#693135;color:#fa6b73} .providers-table input.switch{background:#27272a;border-color:#424247}.providers-table input.switch:after{background:#777780}.providers-table input.switch:checked{background:#6b6b71;border-color:#96969c}.providers-table input.switch:checked:after{background:#f1f1f3}.providers-table input.switch:focus-visible{outline-color:#b5b5bb} #provider-streams-tab,#provider-ssh-tab{background:#151515;border-color:#2e2e2e;color:#87878f;box-shadow:none}#provider-streams-tab:hover,#provider-ssh-tab:hover{background:#242424;border-color:#555}#provider-streams-tab.active,#provider-ssh-tab.active{background:#262626;border-color:#8a8a90;color:#eeeeef;box-shadow:inset 0 -1px #ddd}#provider-streams-tab:focus-visible,#provider-ssh-tab:focus-visible{outline-color:#b5b5bb} #workspace .stat-card,#workspace .stream-filter{background:#101010;border:1px solid #292929;box-shadow:none;border-radius:6px}#workspace .stat-card.active,#workspace .stream-filter.active{background:#202020;border-color:#c4c4c9;box-shadow:none} #workspace .stat-card.total{--stat-color:#dedee3}#workspace .stat-card.healthy{--stat-color:#29cc94}#workspace .stat-card.checking{--stat-color:#f3b63f}#workspace .stat-card.critical{--stat-color:#ff922e}#workspace .stat-card.down{--stat-color:#fa6b73}#workspace .stat-card.idle{--stat-color:#7f7f87}#workspace .stat-card .stat-dot{box-shadow:none} #workspace .status-badge.healthy,#workspace .status-badge.live{background:#112c23;border-color:#1c3e30;color:#29cc94} #workspace .status-badge.checking{background:#2e2310;border-color:#49371a;color:#f3b63f} #workspace .status-badge.critical,#workspace .status-badge.stopped{background:#2e2114;border-color:#4c341e;color:#ff922e} #workspace .status-badge.error,#workspace .status-badge.down{background:#301719;border-color:#51272c;color:#fa6b73} #workspace .status-badge.upcoming{background:#2b1f12;border-color:#49311a;color:#ff922e} #workspace .status-badge.replay,#workspace .status-badge.idle,#workspace .status-badge.ended{background:#1c1c1f;border-color:#303034;color:#85858d} #workspace .stream-filter.live,#workspace .stream-filter.running{color:#29cc94;background:#101010;border-color:#292929}#workspace .stream-filter.upcoming,#workspace .stream-filter.stopped{color:#ff922e;background:#101010;border-color:#292929}#workspace .stream-filter.error{color:#fa6b73;background:#101010;border-color:#292929}#workspace .stream-filter.replay,#workspace .stream-filter.ended{color:#85858d;background:#101010;border-color:#292929}#workspace .stream-filter.active{background:#202020;border-color:#c4c4c9;color:#ebebed} #workspace .metric-running,.healthy-text,.stream-live-totals .running{color:#29cc94}#workspace .metric-errors.has-errors,.stream-live-totals .errors,.error-text{color:#fa6b73}#workspace .metric-errors:not(.has-errors){color:#85858d}#workspace .metric-total,.stream-live-totals .total{color:#dedee3}.stream-runtime,.stream-bandwidth,.stream-clients{color:#ceced4}.stream-countdown{color:#ff922e}.stream-countdown[data-running="true"]{color:#29cc94} .row-actions button.monitor-row.is-start,#streams-dialog .stream-start{color:#29cc94;background:#103222;border-color:#194b32}.row-actions button.monitor-row.is-stop,#streams-dialog .stream-stop{color:#fa6b73;background:#321719;border-color:#4e252a}#streams-dialog .stream-play{background:#1c1c1e;color:#9898a1;border-color:#303034}#streams-dialog .streams-table .stream-details-icon{background:#1b1b1d;border-color:#2e2e31;color:#92929a} #workspace .live-indicator.live{color:#29cc94}#workspace .live-indicator.live:before{background:#29cc94;box-shadow:none}#workspace .live-indicator:not(.live){color:#f3b63f}#workspace .live-indicator:not(.live):before{background:#f3b63f} .provider-context-menu,.popover,.error-popover,.toast{background:#141414;border:1px solid #333;color:#d9d9df;box-shadow:0 10px 30px #0008;border-radius:8px}.provider-context-menu button:hover:not(:disabled){background:#292929;color:#f1f1f3}.provider-context-menu .context-delete{color:#fa6b73}.provider-context-menu .context-delete:hover{background:#301719}.context-divider{background:#2c2c2c} dialog,#confirm-dialog{background:#111;border:1px solid #333;border-radius:10px;box-shadow:0 18px 60px #0009}.dialog-heading,.dialog-footer{background:#171717;border-color:#2b2b2b;box-shadow:none}dialog::backdrop{background:#000000b8;backdrop-filter:blur(3px)}#confirm-dialog.warning-dialog{border-color:#693135}#confirm-dialog.warning-dialog .dialog-heading{background:#251416;border-color:#49252a}#confirm-dialog.warning-dialog #confirm-submit{background:#301719;border-color:#813c43;color:#fa6b73}#confirm-dialog.warning-dialog #confirm-submit:hover{background:#452025}#confirm-warning-icon{background:#301719;border-color:#693135;color:#fa6b73}#confirm-message{color:#aaaab2} .stream-dialog-metrics{background:#0b0b0b;border-color:#282828}.stream-dialog-metrics strong{color:#ebebed}.stream-dialog-facts,.stream-config{border-color:#292929}.stream-dialog-facts strong,.stream-dialog-status>strong{color:#85858d}.stream-bulk-toolbar .stream-live-totals{background:#111;border-color:#2c2c2c;box-shadow:none}.stream-bulk-toolbar .stream-live-totals span{border-color:#333} #terminal-dialog.ssh-redesign,#streams-dialog #terminal-dialog.ssh-redesign{background:#0e0e0e}#terminal-dialog.ssh-redesign .ssh-card{background:#141414;border-color:#2c2c2c;box-shadow:none}#terminal-dialog.ssh-redesign .ssh-input-wrap,#terminal-dialog.ssh-redesign textarea{background:#0d0d0d;border-color:#303030}#terminal-dialog.ssh-redesign .ssh-section-icon{background:#202020;color:#b8b8bf}#terminal-dialog.ssh-redesign #ssh-terminal{background:#090909;border-color:#2b2b2b;box-shadow:none}#terminal-dialog.ssh-redesign .ssh-footer{background:#121212;border-color:#2b2b2b}#terminal-dialog.ssh-redesign .ssh-delete{color:#fa6b73}#terminal-trust{background:#2e2310;border-color:#49371a;color:#f3b63f} /* Compact switches and restrained dark-blue interactions. */ #workspace .providers-table input.switch{width:24px;height:14px;background:#242a31;border:1px solid #39434e;vertical-align:middle} #workspace .providers-table input.switch:after{width:8px;height:8px;left:2px;top:2px;background:#727e8b;transform:none} #workspace .providers-table input.switch:checked{background:#24394e;border-color:#3b5771} #workspace .providers-table input.switch:checked:after{background:#8faac0;transform:translateX(10px)} #workspace .providers-table input.switch:focus-visible{outline:2px solid #7897b3;outline-offset:2px} .primary,.secondary,#workspace .primary,#workspace .secondary,#terminal-dialog.ssh-redesign .ssh-primary,#terminal-dialog.ssh-redesign .ssh-button{background:#152638;border-color:#2b435b;color:#b7c9da;box-shadow:none} .primary:hover:not(:disabled),.secondary:hover:not(:disabled),#workspace .primary:hover:not(:disabled),#workspace .secondary:hover:not(:disabled),#terminal-dialog.ssh-redesign .ssh-primary:hover:not(:disabled),#terminal-dialog.ssh-redesign .ssh-button:hover:not(:disabled){background:#20374e;border-color:#44617c;color:#d5e2ed} .quiet:hover{background:#152638;color:#b7c9da} #workspace .providers-table tr.provider-row.expanded,#workspace .providers-table tr.provider-row.expanded:hover{background:#101e2c;outline:1px solid #2b435b;outline-offset:-1px;box-shadow:inset 3px 0 #496986} #workspace .providers-table tr.provider-row.expanded .provider-name{color:#c7d7e5} #streams-dialog .streams-table tr.stream-selected td{background:#101e2c} #provider-streams-tab.active,#provider-ssh-tab.active{background:#152638;border-color:#3b5771;color:#c0d0df;box-shadow:inset 0 -1px #7897b3} #streams-dialog .streams-table .stream-details-icon,#streams-dialog .stream-play{background:#142333;border-color:#2b4056;color:#97adc1} .provider-context-menu button:hover:not(:disabled){background:#152638;color:#c7d7e5} button:focus-visible{outline-color:#7897b3} #terminal-dialog.ssh-redesign .ssh-delete{background:#301719;border-color:#693135;color:#fa6b73} /* Stream metrics remain legible against black and selected navy rows. */ #workspace #streams-dialog .streams-table td.stream-clients{color:#adadb4;font-weight:500} #workspace #streams-dialog .streams-table td.stream-clients[data-has-clients="true"]{color:#bda14f;font-weight:600} #workspace #streams-dialog .streams-table td.stream-countdown{color:#e1b855;font-weight:650} #workspace #streams-dialog .streams-table td.stream-countdown[data-running="true"]{color:#39dca3} #workspace #streams-dialog .streams-table td.stream-countdown[data-status="Ended"]{color:#85858d;font-weight:500}#workspace #streams-dialog .streams-table td.stream-countdown[data-status="Replay"]{color:#a8b5ac} #login-screen.login-screen{display:grid;grid-template-columns:1fr;place-items:center;min-height:100dvh;padding:24px;background:#050505} #login-form{width:100%;max-width:350px;margin:0;padding:28px;border:1px solid #292929;border-radius:10px;background:#101010;box-shadow:none} #login-form h1{font-size:23px;line-height:1.3;font-weight:600;letter-spacing:-.4px;margin:0 0 8px;color:#ebebed} #login-form>p.muted{font-size:12px;margin:0 0 24px;color:#85858d} #login-form label{font-size:12px;color:#b7b7bf;margin-bottom:16px} #login-form input{height:40px;font-size:13px} #login-form button{width:100%;height:40px;margin-top:4px} #login-error:empty{display:none}#login-error{margin-bottom:0} #workspace .masthead .brand{font-size:19px;letter-spacing:-.5px;white-space:nowrap} #workspace .status-badge.disabled{background:#1b1b1d;border-color:#303034;color:#85858d} /* Recede technical identifiers behind provider/stream names and live metrics. */ #workspace .providers-table td.server-cell,#workspace .providers-table .id-tag{color:#77777f} #workspace #streams-dialog .streams-table td.stream-id-cell{color:#707078} /* Subdued selection and secondary live metrics. */ #workspace input[type=checkbox]:not(.switch),#workspace #streams-dialog .streams-table input[type=checkbox]{accent-color:#4c6570} #workspace #streams-dialog .streams-table td.stream-clients[data-has-clients="true"]{color:#548f98} #workspace #streams-dialog .streams-table td.stream-countdown{color:#ad9256;font-weight:600} /* Custom dark checkboxes avoid the browser's light native border. */ #workspace input[type=checkbox]:not(.switch),#workspace #streams-dialog .streams-table input[type=checkbox]{appearance:none;-webkit-appearance:none;display:inline-grid;place-content:center;width:13px;height:13px;min-width:13px;margin:0;border:1px solid #363b40;border-radius:3px;background:#13171b;box-shadow:none;vertical-align:middle;cursor:pointer} #workspace input[type=checkbox]:not(.switch):hover{border-color:#53606b;background:#1a2229} #workspace input[type=checkbox]:not(.switch):checked{background:#233747;border-color:#3d566b} #workspace input[type=checkbox]:not(.switch):checked:after{content:"";width:6px;height:3px;border-left:1.5px solid #9cafbd;border-bottom:1.5px solid #9cafbd;transform:translateY(-1px) rotate(-45deg)} #workspace input[type=checkbox]:not(.switch):indeterminate{background:#233747;border-color:#3d566b} #workspace input[type=checkbox]:not(.switch):indeterminate:after{content:"";width:6px;height:1.5px;background:#9cafbd;border:0;transform:none} #workspace input[type=checkbox]:not(.switch):focus-visible{outline:2px solid #526c82;outline-offset:2px} #workspace input[type=checkbox]:not(.switch):disabled{opacity:.4;cursor:not-allowed} #workspace .providers-table td.index-cell,#workspace #streams-dialog .streams-table tr.stream-list-row>td:nth-child(2){color:#707078} /* Optional column palette, layered after the committed UI checkpoint. */ #workspace #streams-dialog .streams-table td.stream-runtime{color:#b9aa83} #workspace #streams-dialog .streams-table td.stream-bandwidth{color:#8b9eaf} #workspace #streams-dialog .streams-table td.stream-start-time{color:#77777f} #workspace #streams-dialog .streams-table td.stream-end-time{color:#77777f} #workspace .status-badge.upcoming{color:#8dabbf;background:#18232c;border-color:#304554} #workspace .stream-filter.upcoming{color:#8dabbf;background:#101010;border-color:#304554} #workspace .stream-filter.upcoming.active{color:#b6ccda;background:#1b2b37;border-color:#58778d} #workspace #streams-dialog .streams-table td.stream-clients[data-has-clients="true"]{color:#b87b3e} #workspace #streams-dialog .streams-table td.stream-runtime{color:#8e8369} #workspace #streams-dialog .streams-table td.stream-bandwidth{color:#6e8190} #workspace #streams-dialog .streams-table td.stream-runtime,#workspace #streams-dialog .streams-table td.stream-bandwidth{color:#ad9256} #workspace #streams-dialog .streams-table td.stream-bandwidth{color:#6384a3} #workspace #streams-dialog .streams-table td.stream-countdown{color:#72a89d;text-align:center;font-weight:600} #workspace #streams-dialog .streams-table td.stream-countdown:empty:after{content:"";display:inline-block;width:8ch;max-width:100%;border-top:1px solid #454d51;vertical-align:middle} #workspace #streams-dialog .streams-table td.stream-countdown{color:#b87b3e} /* Keep Stop controls restrained against the dark panel. */ #workspace .monitor-button.stopping{background:#251315;border-color:#4c252a;color:#b75a63} #workspace .monitor-button.stopping:hover:not(:disabled){background:#30181c;border-color:#643039;color:#ca7079} .row-actions button.monitor-row.is-stop,#streams-dialog .stream-stop{background:#251315;border-color:#4c252a;color:#b75a63} .row-actions button.monitor-row.is-stop:hover:not(:disabled),#streams-dialog .stream-stop:hover:not(:disabled){background:#30181c;border-color:#643039;color:#ca7079;filter:none} #terminal-dialog.ssh-redesign #terminal-stop{background:#251315;border-color:#4c252a;color:#b75a63} #terminal-dialog.ssh-redesign #terminal-stop:hover:not(:disabled){background:#30181c;border-color:#643039;color:#ca7079} #workspace #streams-dialog .stream-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap} #workspace #streams-dialog .stream-toolbar .detail-state{margin-left:auto;font-size:9px;color:#77777f;white-space:nowrap} #workspace #streams-dialog .stream-toolbar input[data-stream-search]{order:3} /* Card presentation: keep the keyed rows and delegated controls for live updates. */ .view-switch{display:flex;flex:none;border:1px solid #263b4e;border-radius:6px;overflow:hidden;} .view-switch button{width:34px;min-width:34px;min-height:32px;height:32px;padding:0;border:0;border-radius:0;font-size:21px;} .view-switch button.active{box-shadow:inset 0 0 0 1px #2377ad} .provider-card-menu,.stream-card-menu,.stream-card-image,.selected-provider-logo,.stream-card-date,.card-select-control{display:none} .cached-logo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:inherit} .logo-fallback{display:grid;place-items:center;width:100%;height:100%;font-size:22px;font-weight:600;border-radius:inherit} #workspace.dashboard-shell{} #workspace.dashboard-shell .masthead{height:64px;padding:0 24px} #workspace.dashboard-shell .brand{font-size:25px;letter-spacing:-.7px} #workspace.dashboard-shell main{padding:16px 20px 12px} #workspace.dashboard-shell .split-workspace{grid-template-columns:clamp(280px,var(--provider-width),calc(100% - 474px)) 14px minmax(0,1fr);height:calc(100dvh - 92px)} #workspace.dashboard-shell .provider-section,#workspace.dashboard-shell #streams-dialog{border:1px solid #1b2b38;border-radius:12px;box-shadow:0 6px 24px #0002} #workspace.dashboard-shell .section-top{display:flex;flex-wrap:wrap;padding:16px;gap:12px;border-bottom:0;} #workspace.dashboard-shell .section-top>div:first-child{margin-right:auto} #workspace.dashboard-shell .section-top h2{font-size:20px;margin:0;display:flex;align-items:center;gap:10px} #workspace.dashboard-shell .section-top .toolbar{order:3;flex:1 0 100%;padding:0;border:0;gap:10px;flex-wrap:wrap;} #workspace.dashboard-shell .heading-actions{gap:8px;margin-left:auto} #workspace.dashboard-shell .heading-actions button{font-size:12px;padding:8px 10px;min-height:35px;min-width:0} #workspace.dashboard-shell #scope-note{display:none} #workspace.dashboard-shell .file-controls{margin-left:auto;flex-wrap:wrap} #workspace.dashboard-shell .file-controls select{width:145px} #workspace.dashboard-shell .toolbar-scope{gap:9px} #workspace.dashboard-shell .provider-pane-tools{padding:0 16px 14px;gap:8px;border-bottom:1px solid #192b39} #workspace.dashboard-shell .provider-pane-tools .search-wrap{max-width:none;width:auto} #workspace.dashboard-shell .provider-pane-tools input{height:36px;font-size:12px} #workspace.dashboard-shell .provider-pane-tools select{height:36px;font-size:12px;width:110px} #workspace.dashboard-shell input:not([type=checkbox]),#workspace.dashboard-shell select{} #workspace.dashboard-shell .primary,#workspace.dashboard-shell .secondary{box-shadow:none} #workspace.dashboard-shell .primary:hover,#workspace.dashboard-shell .secondary:hover{} #workspace.dashboard-shell .stat-card{} #workspace.dashboard-shell .stat-card.healthy{}#workspace.dashboard-shell .stat-card.critical{}#workspace.dashboard-shell .stat-card.down{}#workspace.dashboard-shell .stat-card.checking{} #workspace.dashboard-shell .status-badge{font-size:11px;line-height:15px;padding:3px 6px;gap:4px;border-radius:6px;font-weight:500} #workspace.dashboard-shell .status-badge.healthy,#workspace.dashboard-shell .status-badge.live{} #workspace.dashboard-shell .status-badge.upcoming{} #workspace.dashboard-shell .status-badge.error,#workspace.dashboard-shell .status-badge.down,#workspace.dashboard-shell .status-badge.stopped{} #workspace.dashboard-shell .status-badge.checking,#workspace.dashboard-shell .status-badge.critical{} #workspace.dashboard-shell .status-badge.disabled,#workspace.dashboard-shell .status-badge.idle,#workspace.dashboard-shell .status-badge.ended{} #workspace.dashboard-shell .table-scroll,#workspace.dashboard-shell .stream-list-scroll{border:0;container-type:inline-size} #workspace.cards-mode .providers-table,#workspace.cards-mode .streams-table{display:block;min-width:0;width:100%;table-layout:auto} #workspace.cards-mode .providers-table>thead,#workspace.cards-mode .streams-table>thead,#workspace.cards-mode .streams-table>colgroup{display:none} #workspace.cards-mode .providers-table>tbody{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px;padding:16px} #workspace.cards-mode .providers-table tr.provider-row{position:relative;display:grid;grid-template-columns:60px minmax(0,1fr) 28px;grid-template-rows:25px 24px 24px 48px;gap:0 10px;min-width:0;min-height:151px;padding:12px;border:1px solid #233441;border-radius:10px;box-shadow:none;outline:0} #workspace.cards-mode .providers-table tr.provider-row:hover{} #workspace.cards-mode .providers-table tr.provider-row.expanded{box-shadow:none;outline:0} #workspace.cards-mode .providers-table tr.provider-disabled{opacity:.62;} #workspace.cards-mode .providers-table td,#workspace.cards-mode #streams-dialog .streams-table td{display:block;position:static;width:auto;min-width:0;height:auto;padding:0;border:0;text-align:left;white-space:normal} #workspace.cards-mode .providers-table td:nth-child(1){position:absolute;left:16px;top:60px;z-index:2;border-radius:3px} #workspace.cards-mode .providers-table td:nth-child(2){display:none} #workspace.cards-mode .providers-table td:nth-child(3){grid-column:2;grid-row:1} #workspace.cards-mode .providers-table .provider-name{display:block;min-width:0;max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;line-height:22px;padding:0} #workspace.cards-mode .provider-name .chevron{display:none} #workspace.cards-mode .provider-avatar{position:absolute;display:block;left:12px;top:12px;width:60px;height:60px;border-radius:9px;overflow:hidden;margin:0;border:1px solid #233849} #workspace.cards-mode .providers-table td:nth-child(4){grid-column:2;grid-row:2;align-self:center} #workspace.cards-mode .providers-table .id-tag{font-size:11px;border:0;padding:2px 5px} #workspace.cards-mode .providers-table td:nth-child(5){grid-column:1/4;grid-row:3;align-self:end;padding-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px} #workspace.cards-mode .providers-table td:nth-child(6){grid-column:2/4;grid-row:2;justify-self:end;align-self:center;width:auto!important;min-width:0!important} #workspace.cards-mode .providers-table td:nth-child(4){max-width:55%} #workspace.cards-mode .provider-card-menu{display:grid;place-items:center;position:absolute;top:11px;right:10px;width:24px;min-width:24px;height:26px;min-height:26px;padding:0;border:1px solid #2a4053;border-radius:5px;font-size:18px;} #workspace.cards-mode .providers-table td:nth-child(7),#workspace.cards-mode .providers-table td:nth-child(10),#workspace.cards-mode .providers-table td:nth-child(8){grid-row:4;align-self:end;position:relative;width:42px;font-size:16px;text-align:center;font-weight:600;padding-bottom:0;pointer-events:none} #workspace.cards-mode .providers-table td:nth-child(7){grid-column:1;justify-self:start} #workspace.cards-mode .providers-table td:nth-child(10){grid-column:2;justify-self:start} #workspace.cards-mode .providers-table td:nth-child(8){grid-column:2;justify-self:center;margin-left:45px} #workspace.cards-mode .providers-table td:nth-child(7):after,#workspace.cards-mode .providers-table td:nth-child(10):after,#workspace.cards-mode .providers-table td:nth-child(8):after{display:block;font-size:10px;font-weight:400;margin-top:4px} #workspace.cards-mode .providers-table td:nth-child(7):after{content:'RUN'}#workspace.cards-mode .providers-table td:nth-child(10):after{content:'ERR'}#workspace.cards-mode .providers-table td:nth-child(8):after{content:'TOTAL'} #workspace.cards-mode .providers-table td:nth-child(11){grid-column:3;grid-row:4;align-self:end;width:auto!important} #workspace.cards-mode .providers-table .row-actions button{width:30px;min-width:30px;height:34px;min-height:34px;font-size:16px;border-radius:7px} #workspace.cards-mode .providers-table td:nth-child(12){position:absolute;right:13px;top:74px} #workspace.cards-mode .providers-table input.switch{width:22px;height:12px;} #workspace.cards-mode .providers-table input.switch:after{width:6px;height:6px;top:2px;left:2px;} #workspace.cards-mode .providers-table input.switch:checked{} #workspace.cards-mode .providers-table input.switch:checked:after{transform:translateX(8px);} #workspace.dashboard-shell .card-select-control{display:inline-flex;align-items:center} #workspace.dashboard-shell #streams-dialog>.dialog-heading{display:flex;flex-wrap:wrap;padding:16px;gap:12px;border-bottom:1px solid #21313e} #workspace.dashboard-shell .selected-provider-logo{display:block;position:relative;width:60px;height:60px;border-radius:9px;overflow:hidden;flex:none} #workspace.dashboard-shell #streams-dialog .streams-header-info{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:6px;min-width:0} #workspace.dashboard-shell #streams-dialog-title{font-size:21px;white-space:normal} #workspace.dashboard-shell #streams-dialog-subtitle{font-size:12px;max-width:100%} #workspace.dashboard-shell .provider-view-tabs{order:3;width:100%;border-top:1px solid #1b2d3b;padding-top:12px;gap:8px} #workspace.dashboard-shell .provider-view-tabs button{font-size:12px;min-height:34px;padding:7px 16px;border-radius:6px} #workspace.dashboard-shell #streams-dialog .stream-detail{padding:14px;display:flex;flex-direction:column;height:100%} #workspace.dashboard-shell #streams-dialog .stream-toolbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:0 0 10px} #workspace.dashboard-shell .stream-status-filters{display:flex;gap:5px;flex-wrap:wrap;flex:1 0 100%} #workspace.dashboard-shell .stream-filter{font-size:11px;min-height:32px;padding:6px 9px;border-radius:6px;border:1px solid #2a3c4b;} #workspace.dashboard-shell .stream-filter.active{} #workspace.dashboard-shell .stream-filter.live{}#workspace.dashboard-shell .stream-filter.upcoming{}#workspace.dashboard-shell .stream-filter.stopped,#workspace.dashboard-shell .stream-filter.error{} #workspace.dashboard-shell #streams-dialog .stream-toolbar input{order:0;flex:1;min-width:130px;width:auto;font-size:12px;height:34px} #workspace.dashboard-shell .stream-toolbar select{width:140px;font-size:12px;height:34px;padding:6px 9px} #workspace.dashboard-shell #streams-dialog .stream-toolbar .detail-state{order:4;flex:1 0 100%;margin:0;font-size:10px;text-align:right} #workspace.dashboard-shell .stream-bulk-toolbar{font-size:11px;gap:5px;margin-bottom:12px} #workspace.dashboard-shell .stream-bulk-toolbar button{font-size:11px;padding:5px 7px} #workspace.dashboard-shell .stream-live-totals{font-size:11px} #workspace.dashboard-shell .stream-list-scroll{flex:1;min-height:0;overflow:auto} #workspace.cards-mode .streams-table>tbody{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:12px;padding:1px} #workspace.cards-mode #streams-dialog .streams-table tr.stream-list-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 30px 30px 30px;grid-template-rows:24px 38px 19px 32px 30px;gap:2px 5px;padding:12px 12px 12px 108px;min-height:177px;min-width:0;border:1px solid #223746;border-radius:10px;box-shadow:none} #workspace.cards-mode #streams-dialog .streams-table tr.stream-list-row:hover{} #workspace.cards-mode #streams-dialog .streams-table tr.stream-selected{} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(1){position:absolute;left:17px;top:18px;z-index:2;border-radius:3px} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(2){display:none} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(3){grid-row:2;grid-column:1/5;max-width:none;align-self:start} #workspace.cards-mode .stream-name-cell strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;white-space:normal;font-size:13px;line-height:19px;font-weight:600;} #workspace.cards-mode .stream-card-image{display:block;position:absolute;left:12px;top:12px;bottom:12px;width:84px;border-radius:8px;overflow:hidden;} #workspace.cards-mode .stream-card-image .cached-logo{object-fit:contain} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(4){grid-row:3;grid-column:1/5;font-size:11px} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(5){grid-row:1;grid-column:2/5;justify-self:end;font-size:11px;align-self:center} #workspace.cards-mode .stream-clients:after{content:' clients';font-size:10px;} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(6){grid-row:1;grid-column:1;align-self:start} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(7){grid-row:5;grid-column:1;font-size:11px;align-self:center} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(8){grid-row:4;grid-column:4;font-size:11px;display:none} #workspace.cards-mode .stream-bandwidth:after{content:' Mbps';font-size:10px} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(9){grid-row:4;grid-column:1/5;font-size:10px;line-height:15px;align-self:center} #workspace.cards-mode .stream-list-date{display:none}#workspace.cards-mode .stream-card-date{display:inline} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(10){display:none} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(11){grid-row:5;grid-column:1;text-align:left;font-size:12px;align-self:center} #workspace.cards-mode #streams-dialog .streams-table td.stream-countdown:empty{display:none} #workspace.cards-mode #streams-dialog .streams-table td.stream-countdown:empty:after{display:none} #workspace.cards-mode #streams-dialog .streams-table tr:not([data-status=Live]):not([data-status=Replay]) td:nth-child(7){display:none} #workspace.cards-mode #streams-dialog .streams-table tr[data-status=Live] td:nth-child(8),#workspace.cards-mode #streams-dialog .streams-table tr[data-status=Replay] td:nth-child(8){display:block;grid-row:3;grid-column:2/5;justify-self:end} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(12){grid-row:5;grid-column:2;align-self:end} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(13){grid-row:5;grid-column:3;align-self:end} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(14){grid-row:5;grid-column:4;align-self:end} #workspace.cards-mode #streams-dialog .streams-table .stream-actions button,#workspace.cards-mode #streams-dialog .streams-table .stream-play,#workspace.cards-mode #streams-dialog .streams-table .stream-card-menu{display:grid;place-items:center;width:30px;min-width:30px;height:30px;min-height:30px;padding:0;border-radius:6px} #workspace.cards-mode .stream-card-menu{border:1px solid #1c537d;font-size:20px} #workspace.cards-mode .stream-details-icon{display:none!important} #workspace.dashboard-shell .stream-start,#workspace.dashboard-shell .monitor-row.is-start{} #workspace.dashboard-shell #streams-dialog .stream-stop,#workspace.dashboard-shell .monitor-row.is-stop,#workspace.dashboard-shell .monitor-button.stopping{} #workspace.dashboard-shell .stream-list-footer,#workspace.dashboard-shell .table-footer{font-size:10px;} @media(max-width:1100px){#workspace.dashboard-shell .heading-actions{flex-wrap:wrap}#workspace.dashboard-shell .section-top .toolbar{gap:8px}#workspace.dashboard-shell .file-controls{margin-left:0}} @media(max-width:800px){#workspace.dashboard-shell .split-workspace{display:flex;flex-direction:column;height:auto;gap:14px}#workspace.dashboard-shell .provider-section{max-height:65dvh;min-height:320px}#workspace.dashboard-shell #streams-dialog{height:75dvh;min-height:500px}#workspace.dashboard-shell #pane-divider{display:none}#workspace.dashboard-shell .masthead{height:auto;min-height:64px;flex-wrap:wrap;gap:10px;padding:12px}#workspace.dashboard-shell main{padding:10px}#workspace.dashboard-shell .masthead-right{gap:12px}} /* Panel controls follow the same hierarchy as the supplied reference. */ .provider-card-filters,#provider-card-settings,#selected-provider-status{display:none} #workspace.dashboard-shell .provider-card-filters{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 14px;border-bottom:1px solid #1a2b38} #workspace.dashboard-shell .provider-card-filters .stat-card{display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;gap:7px;min-height:30px;padding:5px 9px;border-radius:6px;margin:0;box-shadow:none} #workspace.dashboard-shell .provider-card-filters .stat-card:after{display:none} #workspace.dashboard-shell .provider-card-filters .stat-label,#workspace.dashboard-shell .provider-card-filters .stat-number{display:inline;margin:0;font-size:11px;letter-spacing:0;} #workspace.dashboard-shell .provider-card-filters .stat-dot{display:none} #workspace.dashboard-shell .provider-card-filters .stat-card.active{} #workspace.dashboard-shell #provider-card-settings{display:block} #workspace.dashboard-shell #selected-provider-status{display:block;order:2;margin-left:auto} #workspace.dashboard-shell .selected-provider-logo{order:0} #workspace.dashboard-shell .streams-header-info{order:1} #workspace.dashboard-shell .provider-view-tabs{order:3} #workspace.dashboard-shell #streams-dialog .stream-status-filters{flex:1 0 auto} #workspace.dashboard-shell #streams-dialog .stream-toolbar input{min-width:145px;max-width:none} #workspace.cards-mode #streams-dialog .streams-table tr.stream-list-row{grid-template-rows:22px 38px 18px 28px 30px;min-height:168px} #workspace.cards-mode .providers-table td:nth-child(5){grid-column:2/4;padding-right:23px;font-family:inherit} #workspace.dashboard-shell .table-scroll{scroll-padding-top:16px} #workspace.cards-mode #streams-dialog .streams-table td.stream-id-cell{grid-column:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Compact cards use the same carbon palette as the list view. */ #workspace.dashboard-shell{background:var(--bg);color:var(--text)} #workspace.dashboard-shell .masthead{background:#060606;border-color:#222} #workspace.dashboard-shell .provider-section,#workspace.dashboard-shell #streams-dialog,#workspace.dashboard-shell .section-top,#workspace.dashboard-shell .provider-pane-tools,#workspace.dashboard-shell #streams-dialog>.dialog-heading,#workspace.dashboard-shell .table-scroll,#workspace.dashboard-shell .stream-detail,#workspace.dashboard-shell .stream-list-scroll{background:#0e0e0e;border-color:#242424} #workspace.cards-mode .providers-table tr.provider-row,#workspace.cards-mode #streams-dialog .streams-table tr.stream-list-row{background:#131313;border-color:#282828} #workspace.cards-mode .providers-table tr.provider-row:hover,#workspace.cards-mode #streams-dialog .streams-table tr.stream-list-row:hover{background:#191919;border-color:#373737} #workspace.cards-mode .providers-table tr.provider-row.expanded,#workspace.cards-mode .providers-table tr.provider-row.expanded:hover,#workspace.cards-mode #streams-dialog .streams-table tr.stream-selected{background:#101e2c;border-color:#2b435b;box-shadow:inset 2px 0 #496986} #workspace.cards-mode .providers-table tr.provider-disabled{background:#101010;border-color:#242424} #workspace.cards-mode .providers-table .provider-name,#workspace.cards-mode .stream-name-cell strong{color:#ebebed} #workspace.cards-mode .providers-table .id-tag{background:#1e1e1e;color:#77777f} #workspace.cards-mode .providers-table td.server-cell,#workspace.cards-mode #streams-dialog .streams-table td.stream-id-cell{color:#707078} #workspace.cards-mode .providers-table td.numeric{color:#d6d6da} #workspace.cards-mode .providers-table td:nth-child(7):after,#workspace.cards-mode .providers-table td:nth-child(10):after,#workspace.cards-mode .providers-table td:nth-child(8):after{color:#77777f} #workspace.cards-mode .provider-avatar,#workspace.cards-mode .stream-card-image{border-color:#2c2c2c;background:#111} #workspace.dashboard-shell .logo-fallback,#workspace.dashboard-shell .cached-logo{background:#111;color:#77777f} #workspace.cards-mode .provider-card-menu,#workspace.cards-mode .stream-card-menu,#workspace.dashboard-shell .view-switch button.active{background:#152638;border-color:#2b435b;color:#b7c9da;box-shadow:none} #workspace.dashboard-shell .view-switch{background:#101010;border-color:#292929} #workspace.dashboard-shell .provider-card-filters .stat-card.active{background:#202020;border-color:#c4c4c9} #workspace.cards-mode .providers-table input.switch{background:#242a31;border-color:#39434e} #workspace.cards-mode .providers-table input.switch:after{background:#727e8b} #workspace.cards-mode .providers-table input.switch:checked{background:#24394e;border-color:#3b5771} #workspace.cards-mode .providers-table input.switch:checked:after{background:#8faac0} #workspace.cards-mode .providers-table>tbody{gap:8px;padding:10px} #workspace.cards-mode .providers-table tr.provider-row{grid-template-columns:44px minmax(0,1fr) 25px;grid-template-rows:21px 21px 20px 34px;column-gap:8px;padding:9px;min-height:116px;border-radius:8px} #workspace.cards-mode .provider-avatar{left:9px;top:9px;width:44px;height:44px;border-radius:6px} #workspace.cards-mode .providers-table td:nth-child(1){left:10px;top:43px} #workspace.cards-mode .providers-table .provider-name{font-size:12px;line-height:19px} #workspace.cards-mode .providers-table .id-tag{font-size:10px} #workspace.cards-mode .providers-table td:nth-child(5){font-size:10px;padding-top:2px} #workspace.cards-mode .provider-card-menu{top:8px;right:8px;width:21px;min-width:21px;height:22px;min-height:22px;font-size:16px} #workspace.cards-mode .providers-table td:nth-child(7),#workspace.cards-mode .providers-table td:nth-child(10),#workspace.cards-mode .providers-table td:nth-child(8){font-size:14px;width:36px} #workspace.cards-mode .providers-table td:nth-child(7):after,#workspace.cards-mode .providers-table td:nth-child(10):after,#workspace.cards-mode .providers-table td:nth-child(8):after{font-size:9px;margin-top:2px} #workspace.cards-mode .providers-table td:nth-child(12){top:55px;right:10px} #workspace.cards-mode .providers-table .row-actions button{width:25px;min-width:25px;height:27px;min-height:27px;font-size:13px} #workspace.cards-mode .providers-table .status-badge{font-size:10px;line-height:13px;padding:2px 4px} #workspace.cards-mode .streams-table>tbody{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:8px} #workspace.cards-mode #streams-dialog .streams-table tr.stream-list-row{grid-template-columns:minmax(0,1fr) 24px 24px 24px;grid-template-rows:20px 34px 16px 28px 24px;column-gap:4px;padding:9px 9px 9px 67px;min-height:148px;border-radius:8px} #workspace.cards-mode .stream-card-image{left:9px;top:9px;bottom:9px;width:49px;border-radius:6px} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(1){left:12px;top:12px} #workspace.cards-mode .stream-name-cell strong{font-size:12px;line-height:17px} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(4){font-size:10px} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(5){font-size:10px} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(9){font-size:10px;line-height:14px} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(7),#workspace.cards-mode #streams-dialog .streams-table td:nth-child(8),#workspace.cards-mode #streams-dialog .streams-table td:nth-child(11){font-size:10px} #workspace.cards-mode #streams-dialog .streams-table .status-badge{font-size:10px;line-height:13px;padding:2px 4px} #workspace.cards-mode #streams-dialog .streams-table .stream-actions button,#workspace.cards-mode #streams-dialog .streams-table .stream-play,#workspace.cards-mode #streams-dialog .streams-table .stream-card-menu{width:24px;min-width:24px;height:24px;min-height:24px;border-radius:5px} #workspace.dashboard-shell .selected-provider-logo{width:44px;height:44px} #workspace.dashboard-shell #streams-dialog>.dialog-heading{padding:12px;gap:9px} #workspace.dashboard-shell #streams-dialog-title{font-size:18px} #workspace.dashboard-shell #streams-dialog .stream-detail{padding:10px} #workspace.dashboard-shell .stream-filter,#workspace.dashboard-shell .provider-pane-tools,#workspace.dashboard-shell .provider-card-filters,#workspace.dashboard-shell .provider-view-tabs,#workspace.dashboard-shell #streams-dialog>.dialog-heading{border-color:#292929} #workspace.dashboard-shell .stream-filter.active{border-color:#c4c4c9} #workspace.dashboard-shell .stream-list-footer,#workspace.dashboard-shell .table-footer{color:#77777f;border-color:#242424} /* Both grids reflow from their panel width, including divider drags. */ #workspace.dashboard-shell .provider-pane-tools{flex-wrap:wrap} #workspace.dashboard-shell .provider-pane-tools .search-wrap{flex:1 1 160px;min-width:0} #workspace.dashboard-shell .toolbar-scope{flex-wrap:wrap} #workspace.dashboard-shell #streams-dialog .stream-status-filters{flex:1 1 auto;min-width:0} /* Variant 1: logo and details above a shared metrics/action footer. */ #workspace.cards-mode #streams-dialog .streams-table tr.stream-list-row{grid-template-columns:minmax(0,1fr) 25px 25px 25px;grid-template-rows:21px 38px 17px 30px 30px;gap:3px 4px;padding:10px;min-height:168px;align-content:start} #workspace.cards-mode .stream-card-image{left:10px;top:10px;bottom:auto;width:58px;height:76px;border-radius:6px} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(1){left:12px;top:74px;z-index:3} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(3){grid-row:2;grid-column:1/5;padding-left:68px;align-self:center} #workspace.cards-mode .stream-name-cell strong{font-size:12px;line-height:18px} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(4){grid-row:3;grid-column:1/5;padding-left:68px;font-size:10px} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(5){grid-row:1;grid-column:1/5;justify-self:end;align-self:center;font-size:10px} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(6){grid-row:1;grid-column:1/5;padding-left:68px;align-self:start} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(9){grid-row:4;grid-column:1/5;align-self:center;font-size:10px;line-height:14px} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(7){grid-row:5;grid-column:1;align-self:center;font-size:11px} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(8),#workspace.cards-mode #streams-dialog .streams-table tr[data-status=Live] td:nth-child(8),#workspace.cards-mode #streams-dialog .streams-table tr[data-status=Replay] td:nth-child(8){grid-row:5;grid-column:1;justify-self:start;align-self:center;margin-left:72px;font-size:10px} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(11){grid-row:5;grid-column:1;align-self:center;font-size:11px} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(12){grid-row:5;grid-column:2;align-self:center} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(13){grid-row:5;grid-column:3;align-self:center} #workspace.cards-mode #streams-dialog .streams-table td:nth-child(14){grid-row:5;grid-column:4;align-self:center} /* Reference label colors apply only to Variant 1 stream cards. */ #workspace.dashboard-shell #streams-dialog .status-badge.live{background:#003b2b;border-color:#008b62;color:#00dfaa} #workspace.dashboard-shell #streams-dialog .status-badge.upcoming{background:#103347;border-color:#315a73;color:#a4c9e4} #workspace.cards-mode #streams-dialog .streams-table td.stream-clients{color:#8c929b} #workspace.cards-mode #streams-dialog .streams-table td.stream-clients[data-has-clients=true]{color:#f49b45} #workspace.cards-mode #streams-dialog .streams-table td.stream-clients:after{color:inherit} #workspace.cards-mode #streams-dialog .streams-table td.stream-runtime{color:#efb94f;font-weight:600} #workspace.cards-mode #streams-dialog .streams-table td.stream-bandwidth{color:#96b4ce} #workspace.cards-mode #streams-dialog .streams-table td.stream-countdown{color:#eea341} #workspace.cards-mode #streams-dialog .streams-table td.stream-start-time{color:#8fa6ba} #workspace.cards-mode #streams-dialog .streams-table td.stream-id-cell{color:#7d858f} /* Provider Variant 1 follows the reference's identity area and divided footer. */ #workspace.cards-mode .providers-table>tbody{grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:12px;padding:12px} #workspace.cards-mode .providers-table tr.provider-row{grid-template-columns:repeat(3,minmax(0,1fr)) 38px;grid-template-rows:31px 28px 29px 57px;gap:4px 9px;padding:14px;min-height:0;align-content:start;border-radius:11px} #workspace.cards-mode .provider-avatar{left:14px;top:14px;right:auto;width:78px;height:78px;border-radius:8px} #workspace.cards-mode .providers-table td:nth-child(1){position:absolute;left:18px;top:91px;z-index:3} #workspace.cards-mode .providers-table td:nth-child(3){grid-row:1;grid-column:1/5;align-self:center;padding:0 129px 0 92px} #workspace.cards-mode .providers-table .provider-name{font-size:15px;line-height:23px;font-weight:650;padding:0;max-width:100%} #workspace.cards-mode .providers-table td:nth-child(4){grid-row:2;grid-column:1/5;padding-left:92px;padding-right:40px;max-width:100%;align-self:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #workspace.cards-mode .providers-table .id-tag{font-size:12px;padding:3px 7px;border-radius:6px;color:#91a5b8;background:#20262d} #workspace.cards-mode .providers-table td:nth-child(5){grid-row:3;grid-column:1/5;align-self:center;padding:0 34px 0 92px;font-size:12px;color:#95a9bb} #workspace.cards-mode .providers-table td:nth-child(6){grid-row:1;grid-column:1/5;align-self:center;justify-self:end;margin-right:39px} #workspace.cards-mode .providers-table .status-badge{font-size:11px;line-height:16px;padding:4px 6px;border-radius:7px} #workspace.cards-mode .provider-card-menu{top:14px;right:14px;width:29px;min-width:29px;height:31px;min-height:31px;z-index:3;font-size:21px} #workspace.cards-mode .providers-table td:nth-child(7),#workspace.cards-mode .providers-table td:nth-child(10),#workspace.cards-mode .providers-table td:nth-child(8){grid-row:4;justify-self:stretch;align-self:stretch;position:relative;width:auto;margin:0;padding-top:14px;border-top:1px solid #343434;font-size:20px;line-height:23px;text-align:center} #workspace.cards-mode .providers-table td:nth-child(7){grid-column:1} #workspace.cards-mode .providers-table td:nth-child(10){grid-column:2} #workspace.cards-mode .providers-table td:nth-child(8){grid-column:3} #workspace.cards-mode .providers-table td:nth-child(7):after,#workspace.cards-mode .providers-table td:nth-child(10):after,#workspace.cards-mode .providers-table td:nth-child(8):after{font-size:11px;line-height:15px;margin-top:3px;color:#91a5b8} #workspace.cards-mode .providers-table td:nth-child(10):before,#workspace.cards-mode .providers-table td:nth-child(8):before{content:'';position:absolute;left:-5px;top:15px;bottom:0;border-left:1px solid #343434} #workspace.cards-mode .providers-table td:nth-child(11){grid-row:4;grid-column:4;align-self:stretch;padding-top:15px;border-top:1px solid #343434} #workspace.cards-mode .providers-table .row-actions button{width:37px;min-width:37px;height:38px;min-height:38px;font-size:18px;border-radius:8px} #workspace.cards-mode .providers-table td:nth-child(12){position:absolute;right:16px;top:82px} #workspace.cards-mode .providers-table input.switch{width:28px;height:16px} #workspace.cards-mode .providers-table input.switch:after{width:10px;height:10px} #workspace.cards-mode .providers-table input.switch:checked:after{transform:translateX(12px)} /* Narrow panels keep the same hierarchy, with status beside the provider ID. */ @container(max-width:390px){ #workspace.cards-mode .providers-table td:nth-child(3){padding-right:35px} #workspace.cards-mode .providers-table td:nth-child(6){grid-row:2;margin-right:0} #workspace.cards-mode .providers-table td:nth-child(4){padding-right:85px} } #workspace.cards-mode .providers-table tr.provider-row{container-type:inline-size} #workspace.cards-mode .providers-table tr.provider-row>td:nth-child(7),#workspace.cards-mode .providers-table tr.provider-row>td:nth-child(10),#workspace.cards-mode .providers-table tr.provider-row>td:nth-child(8){text-align:center!important} #workspace.cards-mode .providers-table tr.provider-row:before{content:'';position:absolute;left:14px;right:14px;bottom:71px;border-top:1px solid #343434;pointer-events:none} /* Compact reference proportions without changing the identity/footer hierarchy. */ #workspace.cards-mode .providers-table>tbody{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:8px;padding:10px} #workspace.cards-mode .providers-table tr.provider-row{grid-template-columns:repeat(3,minmax(0,1fr)) 28px;grid-template-rows:23px 21px 22px 40px;gap:3px 6px;padding:10px;border-radius:8px} #workspace.cards-mode .provider-avatar{left:10px;top:10px;width:54px;height:54px;border-radius:6px} #workspace.cards-mode .providers-table td:nth-child(1){left:12px;top:62px} #workspace.cards-mode .providers-table td:nth-child(3){padding:0 27px 0 64px} #workspace.cards-mode .providers-table .provider-name{font-size:13px;line-height:19px} #workspace.cards-mode .providers-table td:nth-child(4){padding-left:64px;padding-right:72px} #workspace.cards-mode .providers-table .id-tag{font-size:10px;padding:2px 4px} #workspace.cards-mode .providers-table td:nth-child(5){padding:0 27px 0 64px;font-size:10px} #workspace.cards-mode .providers-table td:nth-child(6){grid-row:2;margin-right:0} #workspace.cards-mode .providers-table .status-badge{font-size:10px;line-height:13px;padding:2px 4px;border-radius:5px} #workspace.cards-mode .provider-card-menu{top:9px;right:9px;width:22px;min-width:22px;height:24px;min-height:24px;font-size:17px} #workspace.cards-mode .providers-table td:nth-child(7),#workspace.cards-mode .providers-table td:nth-child(10),#workspace.cards-mode .providers-table td:nth-child(8){padding-top:8px;font-size:16px;line-height:18px} #workspace.cards-mode .providers-table td:nth-child(7):after,#workspace.cards-mode .providers-table td:nth-child(10):after,#workspace.cards-mode .providers-table td:nth-child(8):after{font-size:9px;line-height:12px;margin-top:2px} #workspace.cards-mode .providers-table td:nth-child(10):before,#workspace.cards-mode .providers-table td:nth-child(8):before{left:-3px;top:9px} #workspace.cards-mode .providers-table td:nth-child(11){padding-top:8px} #workspace.cards-mode .providers-table .row-actions button{width:27px;min-width:27px;height:28px;min-height:28px;font-size:14px;border-radius:6px} #workspace.cards-mode .providers-table td:nth-child(12){right:12px;top:61px} #workspace.cards-mode .providers-table input.switch{width:24px;height:14px} #workspace.cards-mode .providers-table input.switch:after{width:8px;height:8px} #workspace.cards-mode .providers-table input.switch:checked:after{transform:translateX(10px)} #workspace.cards-mode .providers-table tr.provider-row:before{left:10px;right:10px;bottom:50px} /* Headerless workspace keeps account exit in the provider toolbar. */ #workspace .masthead[hidden]{display:none!important} #workspace .split-workspace{height:calc(100dvh - 100px)} #workspace.dashboard-shell .split-workspace{height:calc(100dvh - 28px)} #workspace.cards-mode .providers-table tr.provider-row>td:nth-child(6){grid-row:1;margin:0 31px 0 0;align-self:center;justify-self:end} #workspace.cards-mode .providers-table tr.provider-row>td:nth-child(3){padding-right:103px} #workspace.cards-mode .providers-table tr.provider-row>td:nth-child(4){padding-right:30px} @media(max-width:800px){#workspace.dashboard-shell .split-workspace{height:auto}} /* Compact client-count medallion in stream cards. */ #workspace.cards-mode #streams-dialog .streams-table td.stream-clients{display:grid;place-items:center;justify-self:end;align-self:start;width:23px;min-width:23px;height:23px;padding:0;border:1px solid #65501f;border-radius:50%;background:#302712;color:#c5a34e;font-size:11px;font-weight:650;line-height:1;font-variant-numeric:tabular-nums} #workspace.cards-mode #streams-dialog .streams-table td.stream-clients[data-has-clients=true]{color:#dfbd65} #workspace.cards-mode #streams-dialog .streams-table td.stream-clients:after{content:none} /* Show client counts only when viewers are connected. */ #workspace.cards-mode #streams-dialog .streams-table td.stream-clients[data-has-clients=true]{background:#202020;border-color:#343434;color:var(--text)} #workspace.cards-mode #streams-dialog .streams-table td.stream-clients[data-has-clients=false]{display:none} #workspace.cards-mode #streams-dialog .streams-table td.stream-clients[data-has-clients=true]{background:#ad9256;border-color:#ad9256;color:#131313} /* Client count matches the runtime accent without a badge. */ #workspace.cards-mode #streams-dialog .streams-table td.stream-clients[data-has-clients=true]{display:block;width:auto;min-width:0;height:auto;padding:0;border:0;border-radius:0;background:transparent;color:#efb94f;font-size:12px;font-weight:750;line-height:20px} /* Empty results occupy the stream grid, never the provider heading. */ #workspace.cards-mode #streams-dialog .streams-table tr.stream-empty-row{display:block;grid-column:1/-1;position:static;min-height:110px} #workspace.cards-mode #streams-dialog .streams-table tr.stream-empty-row>td{display:flex;position:static;align-items:center;justify-content:center;min-height:110px;width:100%;padding:24px;color:#808087;text-align:center;background:transparent} /* Provider statistics retain subdued semantic accents. */ #workspace.cards-mode .providers-table tr.provider-row>td.metric-running{color:#efb94f} #workspace.cards-mode .providers-table tr.provider-row>td.metric-errors:not(.has-errors){color:#63636b} #workspace.cards-mode .providers-table tr.provider-row>td.metric-errors.has-errors{color:#b75a63} #workspace.cards-mode .providers-table tr.provider-row>td.metric-total{color:#8faac0} #workspace.cards-mode .providers-table tr.provider-row>td.metric-running:not(.has-count),#workspace.cards-mode .providers-table tr.provider-row>td.metric-total:not(.has-count){color:#63636b} /* A narrow pane wraps its controls independently of the browser width. */ #workspace.dashboard-shell .provider-section{container-type:inline-size} #workspace.dashboard-shell .heading-actions{display:flex;flex-wrap:wrap;min-width:0;max-width:100%} #workspace.dashboard-shell .section-top .toolbar,#workspace.dashboard-shell .file-controls,#workspace.dashboard-shell .toolbar-scope{min-width:0;max-width:100%} @container(max-width:400px){ #workspace.dashboard-shell .section-top{padding:12px;gap:9px} #workspace.dashboard-shell .heading-actions{width:100%;margin-left:0;justify-content:flex-start;gap:5px} #workspace.dashboard-shell .heading-actions button{min-height:29px;padding:5px 7px;font-size:10px} #workspace.dashboard-shell .file-controls{margin-left:0;gap:4px} #workspace.dashboard-shell .file-controls select{width:130px} #workspace.dashboard-shell .provider-pane-tools{padding-left:12px;padding-right:12px} } /* Dim artwork locally; keep source logos and cached files untouched. */ #workspace.dashboard-shell .cached-logo{filter:brightness(.68) saturate(.8)} #workspace.dashboard-shell .logo-fallback{background:#111;color:#62676d} #workspace.dashboard-shell .cached-logo{filter:none} #workspace.cards-mode .provider-avatar:after,#workspace.cards-mode .stream-card-image:after,#workspace.dashboard-shell .selected-provider-logo:after{content:'';position:absolute;inset:0;border-radius:inherit;background:#0005;pointer-events:none;z-index:1} /* Keep a clear gutter after longer status labels in list rows. */ #workspace.dashboard-shell:not(.cards-mode) #streams-dialog .streams-table .col-status{width:96px} #workspace.dashboard-shell:not(.cards-mode) #streams-dialog .streams-table td:nth-child(6),#workspace.dashboard-shell:not(.cards-mode) #streams-dialog .streams-table th:nth-child(6){padding-right:16px;white-space:nowrap} #workspace.dashboard-shell .stream-toolbar .stream-view-switch{flex:none} /* Provider toolbar needs no duplicate title/count heading. */ #workspace.dashboard-shell .section-top>div:first-child{display:none} /* Stream preview: cinema area and live stream inspector. */ #player-dialog{width:min(1360px,calc(100vw - 40px));max-width:calc(100vw - 40px);max-height:calc(100dvh - 40px);padding:0;background:#0e0e0e;border:1px solid #303943;border-radius:13px;overflow:auto;color:#ebebed} #player-dialog>.dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px 24px;background:#111417;border-color:#2a3036} #player-dialog .eyebrow{font-size:10px;letter-spacing:1.7px;color:#91a5b8} #player-title{margin:7px 0 0;font-size:21px;line-height:1.35;font-weight:600} #player-dialog .icon-button{background:#152638;border-color:#2b435b;color:#c8d8e7;width:34px;height:34px;min-height:34px;padding:0;flex:none} .player-layout{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(280px,1fr);gap:24px;padding:18px 20px;align-items:start} .player-stage{position:relative;min-width:0;aspect-ratio:16/9;background:#050505;border:1px solid #282f36;border-radius:10px;overflow:hidden;display:grid;place-items:center} #preview-video{display:block;width:100%;height:100%;max-height:70dvh;object-fit:contain;background:#050505} .player-stage-tools{position:absolute;left:12px;top:12px;display:flex;gap:6px} .player-stage-tools button{background:#10171fbd;border:1px solid #364452;color:#d4e4f0;border-radius:6px;min-height:29px;padding:3px 8px;font-size:17px} .player-live-badge{position:absolute;right:12px;top:12px;border:1px solid #71343d;border-radius:6px;background:#2c151bd9;color:#ed747e;font-size:11px;font-weight:700;padding:6px 9px;pointer-events:none} .player-sidebar{min-width:0;padding:4px 0} .player-stream-identity{display:flex;align-items:flex-start;gap:13px} .player-logo{position:relative;display:block;width:64px;height:64px;border:1px solid #2c343c;border-radius:8px;overflow:hidden;flex:none} .player-logo:after{content:'';position:absolute;inset:0;background:#0003;pointer-events:none} .player-stream-identity h3{font-size:17px;line-height:1.4;margin:8px 0 7px;overflow-wrap:anywhere} .player-stream-identity .mono{font-size:11px}.player-stream-identity .status-badge{font-size:11px;padding:3px 6px} .player-schedule{display:grid;gap:10px;padding:20px 0;color:#9aafc0;font-size:12px} .player-schedule>div{display:grid;grid-template-columns:42px 1fr;gap:10px}.player-schedule strong{font-weight:400}.player-schedule span,.player-schedule small{color:#727f8b;font-size:10px} .player-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:20px 0;border-top:1px solid #30363d;border-bottom:1px solid #30363d;gap:8px} .player-metrics>div{display:flex;flex-direction:column;gap:8px;min-width:0;padding-left:10px;border-left:1px solid #30363d}.player-metrics>div:first-child{padding-left:0;border:0} .player-metrics strong{font-size:14px;overflow-wrap:anywhere}.player-metrics span{font-size:11px;color:#8497a8}.player-metrics .player-runtime{color:#efb94f}.player-metrics .player-bitrate{color:#96b4ce} .player-quality-panel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding-top:22px}.player-quality-panel label{font-size:12px}.player-quality-panel select{font-size:12px;background:#0c1014;border-color:#344452;color:#d2dfe9} .player-quality-options{grid-column:1/-1;display:flex;gap:7px;flex-wrap:wrap}.player-quality-options button{background:#171f27;border:1px solid #293847;color:#91a5b8;min-height:30px;padding:5px 10px;font-size:11px}.player-quality-options button.active{background:#152f46;border-color:#3e779e;color:#c5e1f5} #player-status{grid-column:1/-1;font-size:11px;line-height:1.5;color:#95a3af;margin:0;overflow-wrap:anywhere} .player-footer{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:13px 20px;border-top:1px solid #2a3036;background:#101214}.player-footer p{font-size:11px;color:#8497a8;margin:0;flex:1}.player-shortcuts{display:flex;align-items:center;gap:7px;font-size:10px;color:#8497a8}.player-shortcuts kbd{padding:4px 6px;border:1px solid #344452;border-radius:5px;color:#b9cbd9;background:#15202b}.player-footer button{min-height:32px;padding:6px 16px} .player-stage:fullscreen{aspect-ratio:auto;border-radius:0;width:100%;height:100%;border:0}.player-stage:fullscreen video{max-height:none} @media(max-width:850px){.player-layout{grid-template-columns:1fr;gap:18px}.player-sidebar{padding:0}.player-stream-identity h3{font-size:16px}.player-shortcuts{display:none}#player-title{font-size:18px}#player-dialog>.dialog-heading{padding:16px}} /* Player-only preview uses the full available width. */ #player-dialog .player-sidebar{display:none} #player-dialog .player-layout{grid-template-columns:minmax(0,1fr)} #player-dialog{width:min(1120px,calc(100vw - 40px))} #player-dialog #preview-video{max-height:70dvh} #workspace.cards-mode #streams-dialog .streams-table td.stream-countdown:not(:empty):before{content:'Start in: ';font-family:inherit;font-weight:400;color:#8c929b} #workspace.cards-mode #streams-dialog .streams-table td.stream-countdown:not(:empty){color:#72aeb4} #workspace.cards-mode #streams-dialog .streams-table td.stream-countdown:not(:empty):before{color:#638e94} #workspace.cards-mode #streams-dialog .streams-table td.stream-countdown:not(:empty){color:#c58c79} #workspace.cards-mode #streams-dialog .streams-table td.stream-countdown:not(:empty):before{color:#a7796b} #workspace.cards-mode #streams-dialog .streams-table td.stream-countdown:not(:empty){color:#60a5fa} #workspace.cards-mode #streams-dialog .streams-table td.stream-countdown:not(:empty):before{content:'Starts in: ';color:#3b82f6} /* Card-only label glow follows each label's semantic color. */ #workspace.cards-mode .providers-table .status-badge,#workspace.cards-mode #streams-dialog .streams-table .status-badge{box-shadow:0 0 8px color-mix(in srgb,currentColor 15%,transparent),inset 0 0 7px color-mix(in srgb,currentColor 5%,transparent);text-shadow:0 0 7px color-mix(in srgb,currentColor 40%,transparent)} #workspace.cards-mode .providers-table tr.provider-row>td.metric-running.has-count,#workspace.cards-mode .providers-table tr.provider-row>td.metric-errors.has-errors,#workspace.cards-mode .providers-table tr.provider-row>td.metric-total.has-count,#workspace.cards-mode #streams-dialog .streams-table td.stream-runtime,#workspace.cards-mode #streams-dialog .streams-table td.stream-bandwidth,#workspace.cards-mode #streams-dialog .streams-table td.stream-clients[data-has-clients=true],#workspace.cards-mode #streams-dialog .streams-table td.stream-countdown:not(:empty){text-shadow:0 0 7px color-mix(in srgb,currentColor 45%,transparent),0 0 14px color-mix(in srgb,currentColor 16%,transparent)} #workspace.cards-mode #streams-dialog .streams-table td.stream-countdown:not(:empty):before{ text-shadow:0 0 8px #3b82f64d} /* Stat captions stay crisp beneath the glowing values. */ #workspace.cards-mode .providers-table td.numeric:after{ text-shadow:none} /* Restrained card-edge glow highlights live streams and errors. */ #workspace.cards-mode #streams-dialog .streams-table tr.stream-list-row[data-status="Live"]{border-color:#285344;box-shadow:0 0 9px #29cc941a,inset 0 0 9px #29cc9407} #workspace.cards-mode #streams-dialog .streams-table tr.stream-list-row[data-status="Error"]{border-color:#68323b;box-shadow:0 0 10px #cf596326,inset 0 0 10px #cf59630a} #workspace.cards-mode .providers-table tr.provider-row:has(.metric-errors.has-errors){border-color:#68323b;box-shadow:0 0 10px #cf596326,inset 0 0 10px #cf59630a} #workspace.cards-mode #streams-dialog .streams-table tr.stream-selected[data-status="Live"],#workspace.cards-mode #streams-dialog .streams-table tr.stream-selected[data-status="Error"],#workspace.cards-mode .providers-table tr.provider-row.expanded:has(.metric-errors.has-errors){border-color:#496986;box-shadow:inset 2px 0 #496986,0 0 10px #cf59631a} /* Dense stream workspace: one identity/navigation row, one primary toolbar. */ #workspace.dashboard-shell #streams-dialog{container-type:inline-size} #workspace.dashboard-shell #streams-dialog>.dialog-heading{display:grid;grid-template-columns:40px minmax(110px,1fr) auto auto;align-items:center;gap:12px;padding:11px 14px;min-height:64px;flex-wrap:nowrap} #workspace.dashboard-shell .selected-provider-logo{grid-column:1;grid-row:1;width:40px;height:40px;order:0} #workspace.dashboard-shell #streams-dialog .streams-header-info{grid-column:2;grid-row:1;gap:3px} #workspace.dashboard-shell #streams-dialog-title{font-size:16px;line-height:21px} #workspace.dashboard-shell #streams-dialog-subtitle{font-size:10px} #workspace.dashboard-shell #streams-dialog>.dialog-heading .provider-view-tabs{grid-column:3;grid-row:1;order:0;width:auto;border:0;padding:0;display:flex;gap:5px} #workspace.dashboard-shell .provider-view-tabs button{padding:6px 10px;min-height:31px;font-size:11px} #workspace.dashboard-shell #selected-provider-status{grid-column:4;grid-row:1;order:0;margin:0} #workspace.dashboard-shell #streams-dialog-body{flex:1;min-height:0;display:flex;flex-direction:column} #workspace.dashboard-shell #streams-dialog .stream-detail{padding:10px 12px 0;gap:0;min-height:0;flex:1} #workspace.dashboard-shell #streams-dialog .stream-toolbar{gap:8px;margin:0 0 12px;min-height:36px;align-items:center} #workspace.dashboard-shell #streams-dialog .stream-status-filters{flex:1 1 auto;gap:4px} #workspace.dashboard-shell .stream-filter{padding:5px 7px;min-height:30px;font-size:10px} #workspace.dashboard-shell #streams-dialog .stream-toolbar input{flex:1 1 130px;min-width:100px;max-width:220px;height:32px;font-size:11px} #workspace.dashboard-shell #streams-dialog .stream-toolbar select{width:123px;height:32px;font-size:11px;padding:5px 7px} #workspace.dashboard-shell .stream-toolbar .view-switch button{width:29px;min-width:29px;height:30px;min-height:30px;font-size:18px} #workspace.dashboard-shell .stream-toolbar [data-card-select-streams]{min-height:30px;padding:5px 7px;font-size:10px} #workspace.dashboard-shell .stream-bulk-toolbar{margin:0 0 10px;min-height:30px;padding:3px 6px;background:#141414;border:1px solid #292929;border-radius:6px} #workspace.dashboard-shell #streams-dialog .stream-list-scroll{flex:1;max-height:none;min-height:0} #workspace.dashboard-shell .stream-list-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;padding:8px 0;font-size:9px;border-top:1px solid #242424;margin-top:8px} #workspace.dashboard-shell #streams-dialog .stream-list-footer .detail-state{font-size:9px;color:#77777f;margin-left:auto;white-space:normal} #workspace.dashboard-shell .stream-list-footer .stream-live-totals{display:flex;gap:8px;font-size:10px;margin:0;padding:0;background:transparent;border:0;box-shadow:none} #workspace.dashboard-shell .stream-list-footer .stream-live-totals span{padding-left:8px;border-left:1px solid #303030} #workspace.cards-mode .streams-table>tbody{gap:10px} #workspace.cards-mode #streams-dialog .streams-table td.stream-countdown:not(:empty){color:#ff9838;text-shadow:none} #workspace.cards-mode #streams-dialog .streams-table td.stream-countdown:not(:empty):before{color:#bd803e;text-shadow:none} @container(max-width:700px){ #workspace.dashboard-shell #streams-dialog>.dialog-heading{grid-template-columns:34px minmax(0,1fr) auto;gap:8px;padding:9px 12px} #workspace.dashboard-shell .selected-provider-logo{width:34px;height:34px} #workspace.dashboard-shell #selected-provider-status{grid-column:3} #workspace.dashboard-shell #streams-dialog>.dialog-heading .provider-view-tabs{grid-column:1/-1;grid-row:2} #workspace.dashboard-shell #streams-dialog .stream-toolbar input{max-width:none} } /* Countdown uses the former runtime yellow; runtime now uses subdued green. */ #workspace.cards-mode #streams-dialog .streams-table td.stream-countdown:not(:empty),#workspace.cards-mode #streams-dialog .streams-table td.stream-countdown:not(:empty):before{color:#efb94f} #workspace.dashboard-shell #streams-dialog .streams-table td.stream-runtime{color:#57966e} .player-metrics .player-runtime{color:#57966e} #workspace.cards-mode #streams-dialog .streams-table td.stream-countdown:not(:empty):before{color:#a6a6ad;text-shadow:none} #workspace.dashboard-shell #streams-dialog .streams-table td.stream-runtime,.player-metrics .player-runtime{color:#83b895} #workspace.dashboard-shell #streams-dialog .streams-table td.stream-runtime,.player-metrics .player-runtime{color:#00dfaa} /* Four provider counters, with monitoring controls retained at the right. */ #workspace.cards-mode .providers-table tr.provider-row{grid-template-columns:repeat(4,minmax(0,1fr)) 28px} #workspace.cards-mode .providers-table tr.provider-row>td:nth-child(3),#workspace.cards-mode .providers-table tr.provider-row>td:nth-child(4),#workspace.cards-mode .providers-table tr.provider-row>td:nth-child(5),#workspace.cards-mode .providers-table tr.provider-row>td:nth-child(6){grid-column:1/6} #workspace.cards-mode .providers-table tr.provider-row>td.metric-running{grid-column:1} #workspace.cards-mode .providers-table tr.provider-row>td.metric-total{grid-column:2} #workspace.cards-mode .providers-table tr.provider-row>td.metric-warn{grid-row:4;grid-column:3;position:relative;align-self:stretch;justify-self:stretch;width:auto;margin:0;padding-top:8px;border-top:1px solid #343434;color:#b87738;font-size:16px;font-weight:600;line-height:18px;text-align:center} #workspace.cards-mode .providers-table tr.provider-row>td.metric-warn:not(.has-count){color:#63636b} #workspace.cards-mode .providers-table tr.provider-row>td.metric-warn:after{content:'WARN';display:block;font-size:9px;font-weight:400;line-height:12px;margin-top:2px;color:#91a5b8} #workspace.cards-mode .providers-table tr.provider-row>td.metric-errors{grid-column:4} #workspace.cards-mode .providers-table tr.provider-row>td:nth-child(11){grid-column:5} #workspace.cards-mode .providers-table tr.provider-row>td.metric-running:after{content:'RUNNING';font-size:8px} #workspace.cards-mode .providers-table tr.provider-row>td.metric-errors:after{content:'ERROR'} #workspace.dashboard-shell .status-badge.warn{color:#d18b42;background:#352312;border-color:#70451f} #workspace.dashboard-shell .stream-filter.warn{color:#d18b42;border-color:#70451f} #workspace.cards-mode #streams-dialog .streams-table tr.stream-list-row[data-status="Live"]{background:radial-gradient(ellipse at top left,#164b323d,transparent 80%),linear-gradient(135deg,#10291e,#121a16 60%,#131313);box-shadow:0 0 12px #29cc9420,inset 0 0 20px #29cc940a} #workspace.cards-mode #streams-dialog .streams-table tr.stream-list-row[data-status="Warn"]{background:linear-gradient(135deg,#332211,#1c1813 70%);border-color:#714821;box-shadow:0 0 9px #c37b2518} #workspace.cards-mode #streams-dialog .streams-table tr.stream-selected[data-status="Live"],#workspace.cards-mode #streams-dialog .streams-table tr.stream-selected[data-status="Warn"]{border-color:#496986;box-shadow:inset 2px 0 #496986} /* Variant 4 — soft green surface with an asymmetric curved highlight. */ #workspace.cards-mode #streams-dialog .streams-table tr.stream-list-row[data-status="Live"]{isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 78% 0%,#123c2e70 0%,transparent 72%),linear-gradient(145deg,#111d1b,#131719 70%);border-color:#35433f;box-shadow:0 3px 12px #0002,inset 0 1px 0 #ffffff05} #workspace.cards-mode #streams-dialog .streams-table tr.stream-list-row[data-status="Live"]:before{content:'';position:absolute;z-index:-1;pointer-events:none;inset:0;background:linear-gradient(115deg,transparent 12%,#075d4240 68%,#08744d70);clip-path:ellipse(76% 92% at 17% -17%)} #workspace.cards-mode #streams-dialog .streams-table tr.stream-list-row[data-status="Live"]:hover{border-color:#496057;background:radial-gradient(ellipse at 78% 0%,#164b3975 0%,transparent 72%),linear-gradient(145deg,#13211e,#151b1b 70%)} #workspace.cards-mode #streams-dialog .streams-table tr.stream-selected[data-status="Live"]{border-color:#496986;box-shadow:inset 2px 0 #496986,0 3px 12px #0002} /* Matching Variant 4 surfaces for warning and error states. */ #workspace.cards-mode #streams-dialog .streams-table tr.stream-list-row[data-status="Warn"]{isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 78% 0%,#51371670 0%,transparent 72%),linear-gradient(145deg,#282016,#191715 70%);border-color:#51402c;box-shadow:0 3px 12px #0002,inset 0 1px 0 #ffffff05} #workspace.cards-mode #streams-dialog .streams-table tr.stream-list-row[data-status="Warn"]:before{content:'';position:absolute;z-index:-1;pointer-events:none;inset:0;background:linear-gradient(115deg,transparent 12%,#92531340 68%,#a96b2370);clip-path:ellipse(76% 92% at 17% -17%)} #workspace.cards-mode #streams-dialog .streams-table tr.stream-list-row[data-status="Error"]{isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 78% 0%,#54232d70 0%,transparent 72%),linear-gradient(145deg,#28181d,#1c1518 70%);border-color:#54323b;box-shadow:0 3px 12px #0002,inset 0 1px 0 #ffffff05} #workspace.cards-mode #streams-dialog .streams-table tr.stream-list-row[data-status="Error"]:before{content:'';position:absolute;z-index:-1;pointer-events:none;inset:0;background:linear-gradient(115deg,transparent 12%,#8d263d40 68%,#a13b4f70);clip-path:ellipse(76% 92% at 17% -17%)} #workspace.cards-mode #streams-dialog .streams-table tr.stream-list-row[data-status="Warn"]:hover{border-color:#795b36} #workspace.cards-mode #streams-dialog .streams-table tr.stream-list-row[data-status="Error"]:hover{border-color:#7c4653} #workspace.cards-mode #streams-dialog .streams-table tr.stream-selected[data-status="Warn"],#workspace.cards-mode #streams-dialog .streams-table tr.stream-selected[data-status="Error"]{border-color:#496986;box-shadow:inset 2px 0 #496986,0 3px 12px #0002} /* Upcoming uses the same Variant 4 treatment in subdued blue. */ #workspace.cards-mode #streams-dialog .streams-table tr.stream-list-row[data-status="Upcoming"]{isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 78% 0%,#193c5970 0%,transparent 72%),linear-gradient(145deg,#14202c,#15191f 70%);border-color:#304559;box-shadow:0 3px 12px #0002,inset 0 1px 0 #ffffff05} #workspace.cards-mode #streams-dialog .streams-table tr.stream-list-row[data-status="Upcoming"]:before{content:'';position:absolute;z-index:-1;pointer-events:none;inset:0;background:linear-gradient(115deg,transparent 12%,#174b7940 68%,#23649a70);clip-path:ellipse(76% 92% at 17% -17%)} #workspace.cards-mode #streams-dialog .streams-table tr.stream-list-row[data-status="Upcoming"]:hover{border-color:#466784} #workspace.cards-mode #streams-dialog .streams-table tr.stream-selected[data-status="Upcoming"]{border-color:#496986;box-shadow:inset 2px 0 #496986,0 3px 12px #0002} /* Upcoming retains the curved surface using a neutral carbon palette. */ #workspace.cards-mode #streams-dialog .streams-table tr.stream-list-row[data-status="Upcoming"]{background:radial-gradient(ellipse at 78% 0%,#34343470 0%,transparent 72%),linear-gradient(145deg,#191919,#111111 70%);border-color:#343434} #workspace.cards-mode #streams-dialog .streams-table tr.stream-list-row[data-status="Upcoming"]:before{background:linear-gradient(115deg,transparent 12%,#45454530 68%,#55555555)} #workspace.cards-mode #streams-dialog .streams-table tr.stream-list-row[data-status="Upcoming"]:hover{border-color:#4b4b4b} #workspace.cards-mode #streams-dialog .streams-table tr.stream-selected[data-status="Upcoming"]{border-color:#496986} /* Stream details inspector — status-tinted header and legible information groups. */ #stream-dialog{--detail-rgb:22,174,108;width:720px;max-width:calc(100vw - 28px);max-height:calc(100dvh - 28px);padding:0;background:#0e1315;border:1px solid #3b474c;border-radius:16px;overflow:hidden;box-shadow:0 18px 70px #0007;color:#e4e9eb} #stream-dialog[open]{display:flex;flex-direction:column} #stream-dialog[data-status="Warn"]{--detail-rgb:190,114,40} #stream-dialog[data-status="Error"]{--detail-rgb:186,66,83} #stream-dialog[data-status="Upcoming"]{--detail-rgb:92,106,122} #stream-dialog[data-status="Ended"],#stream-dialog[data-status="Stopped"]{--detail-rgb:104,110,118} #stream-dialog>.dialog-heading{isolation:isolate;position:relative;overflow:hidden;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 24px 14px;background:radial-gradient(ellipse at 85% 0%,rgba(var(--detail-rgb),.2),transparent 70%),#0e1517;border:0;flex:none} #stream-dialog>.dialog-heading:before{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(var(--detail-rgb),.08) 60%,rgba(var(--detail-rgb),.4));clip-path:ellipse(76% 100% at 15% -20%);pointer-events:none} #stream-dialog-subtitle{font-size:11px;line-height:17px;letter-spacing:0;text-transform:none;color:#a6b0b7} #stream-dialog-title{font-size:22px;line-height:1.3;margin:5px 0 0;letter-spacing:-.4px;color:#f0f2f3} #stream-dialog .dialog-heading>.icon-button{width:34px;min-width:34px;height:34px;min-height:34px;padding:0;font-size:24px;border:1px solid #334147;background:#152023;color:#d5dfe3;border-radius:8px} #stream-dialog-body{padding:0 24px 20px;max-height:none;min-height:0;overflow:auto} #stream-dialog .inspector-context{border-top:1px solid #29383b;padding-top:10px;margin-bottom:14px;gap:14px;flex-wrap:wrap} #stream-dialog .inspector-context .status-badge{font-size:12px;padding:5px 9px;border-radius:7px} #stream-dialog .inspector-type,#stream-dialog .inspector-zone{font-size:12px;color:#b9c2c8} #stream-dialog .inspector-live{font-size:11px;color:#c3ccd0} #stream-dialog .inspector-live i{width:6px;height:6px;background:rgb(var(--detail-rgb));box-shadow:0 0 8px rgba(var(--detail-rgb),.25)} #stream-dialog .inspector-metrics{grid-template-columns:1.1fr 1.1fr .8fr;background:linear-gradient(110deg,rgba(var(--detail-rgb),.16),rgba(var(--detail-rgb),.07));border:1px solid rgba(var(--detail-rgb),.5);border-radius:13px;padding:13px 0;overflow:hidden} #stream-dialog .inspector-metrics>div{display:flex;align-items:center;gap:12px;min-width:0;padding:0 16px;border-right:1px solid #ffffff1c} #stream-dialog .inspector-metrics>div:last-child{border:0} #stream-dialog .inspector-metric-icon{display:grid;place-items:center;width:42px;height:42px;flex:none;border:1px solid #ffffff0c;border-radius:10px;background:rgba(var(--detail-rgb),.14);color:#dae7e0} #stream-dialog svg{width:19px;height:19px;flex:none;vertical-align:middle} #stream-dialog .inspector-metric-icon svg{width:24px;height:24px} #stream-dialog .inspector-metrics small{font-size:10px;letter-spacing:.25px;color:#bec9c7;margin:0 0 5px} #stream-dialog .inspector-metrics strong{font-size:24px;font-weight:700;letter-spacing:-.6px;color:#e8c765;line-height:1.2;overflow-wrap:anywhere} #stream-dialog .inspector-metrics>div:last-child strong{color:#e0e7e8} #stream-dialog .inspector-schedule{padding:17px 5px;border:0;gap:20px} #stream-dialog .inspector-schedule>div{gap:10px;flex-wrap:wrap} #stream-dialog .inspector-schedule>div+div{border-left:1px solid #303c40;padding-left:20px} #stream-dialog .inspector-schedule small{font-size:10px;color:#88989f} #stream-dialog .inspector-schedule span{font-size:12px;color:#d7dfe1} #stream-dialog .inspector-schedule svg{width:17px;height:17px;color:#acbbc1} #stream-dialog .inspector-selections{gap:12px;margin:3px 0 18px} #stream-dialog .inspector-selections>div{padding:10px 12px 10px 65px;min-width:0;min-height:70px;background:linear-gradient(120deg,#1c262a,#151d21);border:1px solid #303d43;border-radius:11px} #stream-dialog .inspector-selection-icon{position:absolute;left:11px;top:13px;width:41px;height:41px;border:1px solid #ffffff0a;border-radius:9px;background:#ffffff04;display:grid;place-items:center;color:#c6d4d9} #stream-dialog .inspector-selection-icon svg{width:23px;height:23px} #stream-dialog .inspector-selections small{font-size:11px;margin-bottom:5px;color:#b8c4cb} #stream-dialog .inspector-selections strong{font-size:16px;color:#e6ebed;overflow-wrap:anywhere} #stream-dialog .inspector-selections span.mono{font-size:11px;color:#92a3ac;overflow-wrap:anywhere} #stream-dialog .inspector-section{margin-top:15px} #stream-dialog .inspector-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px} #stream-dialog .inspector-section h3{display:flex;align-items:center;gap:10px;font-size:13px;color:#e1e8eb;margin:0;font-weight:600} #stream-dialog .inspector-code{font-size:12px;line-height:1.55;color:#c8d2d7;background:#0b1114;border:1px solid #344249;border-radius:10px;padding:11px 13px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:140px;margin:0} #stream-dialog .manifest-code{max-height:150px} #stream-dialog .keys-code{max-height:105px} #stream-dialog .inspector-copy{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:29px;padding:4px 10px;font-size:11px;border-radius:7px;border:1px solid #3a484f;background:linear-gradient(#202b30,#172025);color:#dce4e8} #stream-dialog .inspector-copy svg{width:14px;height:14px} #stream-dialog .inspector-count{min-width:29px;text-align:center;padding:5px 8px;background:#182226;border:1px solid #334148;border-radius:7px;font-size:12px;color:#cdd7dc} #stream-dialog .inspector-disclosures{border-top:1px solid #344147;margin-top:17px;padding-top:8px} #stream-dialog .inspector-disclosures summary{font-size:13px;font-weight:600;color:#dce4e8;line-height:30px} #stream-dialog .inspector-disclosures summary .inspector-copy{margin-top:0} @media(max-width:600px){#stream-dialog-title{font-size:19px}#stream-dialog>.dialog-heading{padding:16px}#stream-dialog-body{padding:0 16px 16px}#stream-dialog .inspector-metrics>div{padding:0 10px;gap:7px}#stream-dialog .inspector-metric-icon{width:30px;height:34px}#stream-dialog .inspector-metrics strong{font-size:19px}#stream-dialog .inspector-metrics small{font-size:8px}#stream-dialog .inspector-selections{gap:8px}} @media(max-width:420px){#stream-dialog .inspector-metric-icon{display:none}#stream-dialog .inspector-selections{grid-template-columns:1fr}#stream-dialog .inspector-zone{display:none}} #stream-dialog .status-badge.live{background:linear-gradient(120deg,#079458,#075d3f);border-color:#10a36b;color:#e5fff0} #stream-dialog .status-badge.warn{background:#352312;border-color:#70451f;color:#dba05d} #stream-dialog .status-badge.error{background:#351b23;border-color:#713340;color:#ed8697} #stream-dialog .status-badge.upcoming{background:#1b2833;border-color:#3c5366;color:#a4c9e4} /* Host filter shares the provider status row and wraps within narrow panes. */ #workspace.dashboard-shell .provider-filter-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:0 16px 12px;border-bottom:1px solid #292929} #workspace.dashboard-shell .provider-filter-row .provider-card-filters{flex:1 1 auto;padding:0;border:0;gap:6px} #workspace.dashboard-shell #provider-server-filter{flex:0 1 210px;min-width:140px;max-width:100%;margin-left:auto;height:30px;padding:4px 8px;font-size:11px;background:#101010;border:1px solid #30343a;color:#a6b4c0} @container(max-width:400px){#workspace.dashboard-shell .provider-filter-row{padding-left:12px;padding-right:12px}#workspace.dashboard-shell #provider-server-filter{flex:1 1 100%;margin-left:0}} /* SVG dots avoid font baseline overflow in the compact menu control. */ #workspace.cards-mode #streams-dialog .streams-table button.stream-card-menu{line-height:0;overflow:hidden;align-content:center;justify-content:center} #workspace.cards-mode #streams-dialog .streams-table .stream-card-menu svg{display:block;width:14px;height:14px;pointer-events:none} /* Account/settings on the left; provider and monitoring actions on the right. */ #workspace.dashboard-shell .heading-actions{width:100%;margin-left:0} #workspace.dashboard-shell .heading-actions #add-provider{margin-left:auto} @container(max-width:400px){#workspace.dashboard-shell .heading-actions #add-provider{margin-left:0}} /* List rows expose the same warning/error signals as provider cards. */ #workspace.dashboard-shell:not(.cards-mode) .providers-table tr.provider-row:not(.provider-disabled):has(.metric-warn.has-count){background:#241b11;box-shadow:inset 3px 0 #98612f} #workspace.dashboard-shell:not(.cards-mode) .providers-table tr.provider-row:not(.provider-disabled):has(.metric-warn.has-count):hover{background:#302215} #workspace.dashboard-shell:not(.cards-mode) .providers-table tr.provider-row:not(.provider-disabled):has(.metric-errors.has-errors){background:#29171c;box-shadow:inset 3px 0 #a64f5d} #workspace.dashboard-shell:not(.cards-mode) .providers-table tr.provider-row:not(.provider-disabled):has(.metric-errors.has-errors):hover{background:#351d24} #workspace.dashboard-shell:not(.cards-mode) .providers-table tr.provider-row.expanded:has(.metric-warn.has-count),#workspace.dashboard-shell:not(.cards-mode) .providers-table tr.provider-row.expanded:has(.metric-errors.has-errors){outline:1px solid #496986;outline-offset:-1px} /* Provider warning cards match the list warning treatment; errors take priority. */ #workspace.cards-mode .providers-table tr.provider-row:not(.provider-disabled):has(.metric-warn.has-count):not(:has(.metric-errors.has-errors)){background:linear-gradient(135deg,#2b2013,#191612 75%);border-color:#70502b;box-shadow:0 0 9px #b5782f18,inset 0 0 10px #b5782f07} #workspace.cards-mode .providers-table tr.provider-row:not(.provider-disabled):has(.metric-warn.has-count):not(:has(.metric-errors.has-errors)):hover{background:linear-gradient(135deg,#352717,#201a13 75%);border-color:#8c6536} #workspace.cards-mode .providers-table tr.provider-row.expanded:has(.metric-warn.has-count):not(:has(.metric-errors.has-errors)){outline:1px solid #496986;outline-offset:-1px;box-shadow:inset 2px 0 #496986,0 0 9px #b5782f18} /* Provider errors mirror warning-card highlighting, using the red palette. */ #workspace.cards-mode .providers-table tr.provider-row:not(.provider-disabled):has(.metric-errors.has-errors){background:linear-gradient(135deg,#2d191f,#1b1417 75%);border-color:#743a47;box-shadow:0 0 9px #bb596918,inset 0 0 10px #bb596907} #workspace.cards-mode .providers-table tr.provider-row:not(.provider-disabled):has(.metric-errors.has-errors):hover{background:linear-gradient(135deg,#382027,#23181c 75%);border-color:#914b5a} #workspace.cards-mode .providers-table tr.provider-row.expanded:has(.metric-errors.has-errors){outline:1px solid #496986;outline-offset:-1px;box-shadow:inset 2px 0 #496986,0 0 9px #bb596918}