/* Service Manager inspired console; native Smart Scoreboard branding. */
:root {
  color-scheme:light; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.5; --ink:#13253a; --muted:#627386; --canvas:#f4f7f7; --surface:#fff;
  --line:#dce6e4; --line-strong:#c8d6d2; --brand:#1d3f60; --brand-strong:#122e49; --brand-pale:#e8eff6;
  background:var(--canvas); color:var(--ink);
}
* {box-sizing:border-box} body {margin:0} button,input,select {font:inherit} a {color:var(--brand)}
button,.button {display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:40px;padding:9px 15px;border:1px solid var(--brand);border-radius:9px;background:var(--brand);color:#fff;font-weight:650;line-height:1.4;text-decoration:none;cursor:pointer;transition:background 150ms,border-color 150ms,box-shadow 150ms,transform 150ms}
button:hover,.button:hover {background:var(--brand-strong);border-color:var(--brand-strong);box-shadow:0 3px 10px #122e4914}
button:active,.button:active {transform:translateY(1px)} button:disabled {opacity:.42;cursor:default;box-shadow:none;transform:none}
button.secondary {background:white;border-color:var(--line-strong);color:#36516b;box-shadow:none}
button.secondary:hover {background:#f0f4f8;border-color:#aabfd2} button.danger {color:#b23e36;border-color:#e2c9c5} button.danger:hover {background:#fff3f1;border-color:#cfaaa3}
button.compact {min-height:33px;padding:6px 11px;font-size:12px}
button.text-button {background:transparent;border:0;padding:4px 0;color:var(--brand);white-space:nowrap;box-shadow:none}
button.icon-button {padding:7px;width:34px;min-height:34px;border-color:transparent;background:transparent;color:inherit}
button.icon-button:hover {background:#ffffff12}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {outline:3px solid #5988b966;outline-offset:3px}
svg {width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.icon-sprite {position:absolute;width:0;height:0;overflow:hidden}
.skip-link {position:fixed;z-index:20;top:-60px;left:20px;padding:10px 16px;background:white;border-radius:7px} .skip-link:focus {top:12px}
h1,h2,h3,p {margin-top:0} h1 {font-size:30px;font-weight:730;letter-spacing:-.045em;line-height:1.15;margin-bottom:8px}
h2 {font-size:17px;font-weight:700;letter-spacing:-.025em;line-height:1.3;margin-bottom:10px}
h3 {font-size:14px;margin-bottom:6px;font-weight:650} p {color:var(--muted);line-height:1.65;margin-bottom:16px}
.muted,.field-note {color:var(--muted);font-size:12px} .field-note {display:block;font-weight:400;line-height:1.6;margin-top:5px}
.eyebrow {color:#7b8a98;font-size:10px;font-weight:700;letter-spacing:.12em;margin:0 0 10px}
.app-shell {min-height:100vh}
.sidebar {position:fixed;z-index:10;inset:0 auto 0 0;width:246px;padding:25px 16px 18px;background:linear-gradient(155deg,#17394f,#0a1c2d);color:#c7d7df;display:flex;flex-direction:column;box-shadow:5px 0 30px #0d243210;overflow-y:auto}
.brand {display:flex;gap:11px;align-items:center;text-decoration:none} .brand img {object-fit:contain;border-radius:11px;flex-shrink:0}
.brand span {color:inherit;font-size:15px;font-weight:700;letter-spacing:-.025em} .brand small {display:block;font-size:9px;font-weight:500;letter-spacing:.14em;margin-top:4px;color:#91adbf}
.brand .cloud-logo-mark {display:block;position:relative;width:44px;height:46px;flex-shrink:0;overflow:hidden}
.brand .cloud-logo-mark img {position:absolute;left:0;top:0;width:139px;height:auto;max-width:none;border-radius:0}
.login-brand .cloud-wordmark {width:min(326px,100%);height:auto;border-radius:0}
.sidebar-brand {color:#fff;padding:0 5px 24px;border-bottom:1px solid #ffffff16}
.sidebar-group-title {color:#8fa7b4;font-size:9px;font-weight:700;letter-spacing:.12em;margin:27px 12px 10px}
.sidebar nav {display:grid;gap:5px}
.sidebar .nav-item {justify-content:flex-start;width:100%;min-height:42px;gap:12px;padding:10px 12px;background:transparent;border:1px solid transparent;color:#becfda;font-size:13px;font-weight:530;box-shadow:none;text-align:left}
.sidebar .nav-item:hover {background:#ffffff0d;color:white}
.sidebar .nav-item.active {background:#89b7de22;border-color:#b7d6f01a;color:#f5f9ff} .sidebar .nav-item.active svg {color:#b4d9f6}
.nav-live-dot {width:6px;height:6px;border-radius:50%;background:#75c8a4;margin-left:auto}
.sidebar-note {margin:auto 8px 22px;padding-top:50px;display:flex;gap:10px;font-size:11px;line-height:1.6;color:#c3d6e3}
.sidebar-note svg {margin-top:2px;color:#83a9c3} .sidebar-note p {color:#8fa7b8;font-size:11px;line-height:1.65;margin:5px 0 0}
.sidebar-footer {display:flex;align-items:center;gap:10px;padding:17px 5px 0;border-top:1px solid #ffffff16}
.avatar {display:grid;place-items:center;width:33px;height:33px;flex-shrink:0;border-radius:9px;background:#45667d;color:white;font-size:13px;font-weight:650}
.sidebar-footer>div {min-width:0;flex:1} .sidebar-footer strong {display:block;font-size:12px;color:#e8f0f4;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-footer div>span {display:block;color:#8fa7b8;font-size:10px;margin-top:2px;text-transform:capitalize}
.main-column {margin-left:246px;min-width:0}
.toolbar {min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 34px;border-bottom:1px solid var(--line);background:#ffffffd9}
.toolbar-location {display:flex;align-items:center;gap:14px;color:#7e8d99;font-size:12px}
.toolbar-location strong {font-weight:550;color:var(--ink)} .breadcrumb-divider {color:#c3ced5}
#identity {display:flex;align-items:center;gap:12px;font-size:12px;color:#5b6b7b}
.pill {display:inline-flex;align-items:center;border:1px solid #dce5eb;border-radius:5px;background:#f0f4f7;color:#587084;font-size:10px;font-weight:600;line-height:1.5;padding:4px 8px;white-space:nowrap;text-transform:capitalize}
.pill.experimental {background:#fff7e9;border-color:#efdcb4;color:#92682f}
.pill.is-live {background:#eaf6ef;border-color:#bfdfce;color:#277453} .pill.is-offline {color:#7d6d52;background:#f7f3ec;border-color:#e6dbca}
.pill.role-host {color:#734c9c;background:#f3eef9;border-color:#ddd0eb} .pill.role-controller {color:#236b53;background:#edf7f2;border-color:#cde5d9} .pill.role-display {color:#486887;background:#edf3f8;border-color:#d5e1ec}
.mobile-nav-toggle {display:none!important}
main {max-width:1440px;margin:auto;padding:34px 34px 0}
.page-header {display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px} .page-header p:last-child {font-size:13px;margin-bottom:0}
.account-access {align-self:flex-end;margin-bottom:4px}
.card {background:white;border:1px solid var(--line);border-radius:13px;padding:24px;box-shadow:0 7px 23px #1a384607;margin-bottom:22px;min-width:0}
.section-heading {display:flex;align-items:center;gap:13px;margin-bottom:24px} .section-heading h2 {margin-bottom:5px} .section-heading p {font-size:12px;margin-bottom:0}
.heading-between {justify-content:space-between}
.section-icon {display:grid;place-items:center;width:39px;height:39px;background:#edf3f8;border-radius:10px;color:#365c7b;flex-shrink:0} .section-icon svg {width:20px;height:20px}
.session-actions {display:grid;grid-template-columns:1.12fr 1fr;gap:22px;align-items:stretch}
.session-actions:has(#create-section[hidden]) {grid-template-columns:1fr}
form {display:flex;flex-direction:column;gap:10px} label {color:#43586b;font-size:12px;font-weight:550}
label:has(select),label:has(input:not([type=checkbox])) {display:flex;flex-direction:column;gap:9px}
input:not([type=checkbox]),select {width:100%;min-width:0;min-height:41px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:8px;background:white;color:var(--ink);font-size:13px;transition:box-shadow 150ms,border-color 150ms}
input::placeholder {color:#9aa6b0;opacity:1} input:hover,select:hover {border-color:#aabfcf}
input:focus,select:focus {outline:0;border-color:#6e92b0;box-shadow:0 0 0 3px #1d3f6010}
.input-action {display:flex;gap:10px} .input-action input {flex:1} .input-action button {flex-shrink:0}
#join-code {font-family:ui-monospace,SFMono-Regular,monospace;text-transform:uppercase;letter-spacing:.09em}
.check {display:flex;align-items:flex-start;gap:10px;line-height:1.5;margin-top:9px} .check input {width:16px;height:16px;margin:2px 0 0;accent-color:var(--brand);flex-shrink:0} .check .field-note {margin-top:3px}
#create-form button,#link-form>button {align-self:flex-start;margin-top:4px}
.access-note,.notice {display:flex;gap:12px;align-items:flex-start;padding:15px 18px;border:1px solid #cdddeb;border-radius:10px;background:#edf4fa;margin-bottom:22px;color:#365a77}
.access-note svg {margin-top:2px} .access-note strong {font-size:12px;font-weight:650} .access-note p {font-size:12px;margin:3px 0 0;color:#5f788c}
.notice {font-size:13px;background:#fff6ec;color:#8b5c29;border-color:#ecd4b7} .notice[data-tone=success] {background:#eef8f2;border-color:#c4e0cf;color:#2b6d4a}
.sessions-card {min-height:215px} .empty-state {display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:24px 15px 30px}
.empty-state .section-icon {width:43px;height:43px;margin-bottom:12px;background:#f3f6f7;color:#a0afba}
.empty-state strong {font-weight:550;font-size:13px;color:#64788b} .empty-state p {margin:5px 0 0;font-size:12px;color:#95a1ab}
.session-row {display:grid;grid-template-columns:40px minmax(0,1fr) auto auto;gap:14px;align-items:center;border-top:1px solid #eaf0ee;padding:17px 0}
.session-row:last-child {padding-bottom:0} .session-row-name {font-size:13px;font-weight:600}
.session-row small {display:block;color:#8796a3;font-size:11px;margin-top:5px} .session-row code {font-size:11px;color:#526e87;letter-spacing:.04em}
.session-row .session-expiry {font-size:11px;color:#7e8e9c;padding:0 10px}
.connection-strip {display:flex;align-items:flex-start;gap:11px;padding:0 3px}
.mini-icon {display:grid;place-items:center;width:21px;height:21px;background:#e4efe8;color:#4b866a;border-radius:50%;flex-shrink:0;margin-top:3px}
.mini-icon svg {width:13px;height:13px} .connection-strip p {flex:1;margin:0;font-size:11px;color:#8a98a4} .connection-strip strong {color:#64798a;font-weight:550} .connection-strip button {font-size:11px}
.device-grid {display:grid;grid-template-columns:1.6fr 1fr;gap:22px} .subtle-card {background:#edf3f7;box-shadow:none}
.subtle-card>svg {width:32px;height:32px;color:#7896ae;margin:5px 0 18px} .subtle-card p {font-size:13px}
.step-list {padding:0;list-style:none;display:grid;gap:22px;margin:0 0 28px} .step-list li {display:flex;gap:13px}
.step-list li>span {display:grid;place-items:center;border-radius:50%;width:25px;height:25px;background:#edf3f7;color:#5b7b96;font-size:11px;font-weight:600;flex-shrink:0}
.step-list strong {font-size:12px;font-weight:600} .step-list p {font-size:12px;margin:3px 0 0}
.form-grid {display:grid;grid-template-columns:1fr 1fr;gap:20px} .link-approval {border-top:3px solid #71a88e}
.board {display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:14px;align-items:center;background:#102538;border:1px solid #1b394f;color:white;border-radius:11px;padding:36px 20px;margin-bottom:25px;text-align:center}
.board-team,.board-clock {min-width:0;display:flex;flex-direction:column;gap:9px}
.board-team>span {font-size:12px;letter-spacing:.05em;color:#a5bbc9;overflow-wrap:anywhere}
.board-team strong {font-size:clamp(36px,5.5vw,72px);line-height:1.1;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.home-team strong {color:#a8cef8} .guest-team strong {color:#ffc2b3}
.board-clock strong {font-family:ui-monospace,SFMono-Regular,monospace;font-size:clamp(28px,4.5vw,59px);font-weight:500;font-variant-numeric:tabular-nums;color:#f4d78e;letter-spacing:-.06em;line-height:1.2}
.board-clock>span {color:#7996aa;text-transform:uppercase;font-size:10px;letter-spacing:.08em}
.control-heading {display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:20px} .control-heading p {margin-bottom:0}
.view-links {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.view-link {display:grid;gap:8px;padding:17px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--brand);background:#fafcfd}
.view-link:hover {background:var(--brand-pale);border-color:#b7cbdc}
.view-link strong {font-size:12px;font-weight:600}.view-link>span {font-size:11px;color:var(--muted)}
.public-sharing {border-top:1px solid var(--line);padding-top:15px;margin-top:18px}.public-sharing>.check strong {font-size:12px}
.public-link-row {display:grid;grid-template-columns:180px minmax(0,1fr) auto;gap:12px;align-items:end;margin:20px 0 14px}
.public-link-row input {font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px}.public-sharing .actions {justify-content:space-between;font-size:12px}
.controls {display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:end;gap:22px;margin-bottom:16px}
.controls>div>span {display:block;font-size:11px;color:#7c8e9d;margin-bottom:8px} .controls>div>div {display:flex;gap:8px}
.controls>div button {flex:1;font-size:16px} .controls .clock-button {min-height:43px;margin:0}
.rows .row {display:flex;justify-content:space-between;align-items:center;gap:18px;padding:15px 0;border-top:1px solid #e7efed} .rows .row:last-child {padding-bottom:0}
.row-title {min-width:0;font-size:12px;font-weight:550;overflow-wrap:anywhere}
.row small {display:block;font-size:11px;font-weight:400;color:#8b9aa6;line-height:1.6;margin-top:4px;overflow-wrap:anywhere}
.row-actions {display:flex;align-items:center;gap:10px;flex-shrink:0}
.row select {width:auto;min-width:92px;min-height:33px;padding:6px 10px;font-size:11px;text-transform:capitalize}
.row button {min-height:32px;font-size:11px;padding:6px 10px} .actions {display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.session-footer {margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.guide-grid {display:grid;grid-template-columns:1fr;gap:0} .guide-facts {display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:28px}
.guide-facts .section-icon {margin-bottom:14px} .guide-facts p {font-size:12px;margin-bottom:0}
.diagram-card {margin-top:0;text-align:center} .diagram-card img {max-width:900px;width:100%;height:auto;border-radius:8px}
.diagram-card figcaption {color:#8393a1;font-size:12px;margin-top:18px}
.registration-control {margin-bottom:4px} .registration-control strong {font-size:13px;font-weight:600} .registration-control input {margin-top:3px}
.pagination {display:flex;align-items:center;justify-content:flex-end;gap:13px;padding-top:20px;margin-top:20px;border-top:1px solid var(--line)}
.admin-grid {display:grid;grid-template-columns:1fr 1fr;gap:22px} .admin-grid .row {align-items:flex-start} .admin-grid .row button {white-space:nowrap}
.page-footer {display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding:22px 0 24px;margin-top:42px;color:#9ba7b1;font-size:10px}
.auth-loading {display:flex;justify-content:center;align-items:center;gap:12px;height:65vh;color:#7b8d9b}
.spinner {width:19px;height:19px;border:2px solid #d9e4eb;border-top-color:#345f81;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin {to {transform:rotate(360deg)}} body:not([data-auth=loading]) .auth-loading {display:none}
body:not([data-auth=signed-in]) .main-column {margin-left:0} body:not([data-auth=signed-in]) .toolbar {display:none}
body:not([data-auth=signed-in]) main {padding:6vh 30px 0;max-width:1180px} body:not([data-auth=signed-in]) {background:#eaf0f4}
.login-layout {min-height:76vh;display:grid;grid-template-columns:1fr 1fr;border-radius:20px;overflow:hidden;box-shadow:0 22px 65px #162d4314;border:1px solid #dce6e9;background:white}
.login-copy {padding:clamp(30px,5vw,64px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.login-brand {color:#19364e;margin-bottom:45px} .login-brand small {color:#7991a4} .login-brand span {font-size:17px}
.login-copy>.pill {margin-bottom:22px} .login-copy h1 {font-size:clamp(34px,4vw,46px);letter-spacing:-.045em;line-height:1.15;margin-bottom:20px}
.login-copy>p {font-size:14px;line-height:1.8;margin-bottom:30px;max-width:340px}
.google-button {min-height:47px;background:#1f6feb;border-color:#1f6feb;width:100%;justify-content:flex-start;font-size:13px}
.google-button:hover {background:#195cc4;border-color:#195cc4} .google-button>svg {margin-left:auto}
.google-mark {display:grid;place-items:center;width:24px;height:24px;background:white;border-radius:4px;color:#4285f4;font-size:17px;font-weight:750}
.login-access {display:flex;align-items:flex-start;gap:9px;margin-top:22px}
.login-access svg {color:#8396a6;width:15px;height:15px;margin-top:3px} .login-access p {font-size:11px;line-height:1.8;margin-bottom:0}
.login-art {position:relative;min-height:570px;background:#173b9f url('/assets/app-background.png') 50% 0% / auto 72% no-repeat}
.login-art::before {content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,#10253bbb 64%,#10253b 100%)}
.login-art-caption {position:absolute;bottom:44px;left:40px;right:30px;color:white}
.art-status {display:flex;align-items:center;gap:8px;color:#b8d3e4;font-size:10px;margin-bottom:17px} .art-status>span {background:#a3d4bb;width:5px;height:5px;border-radius:50%}
.login-art h2 {font-size:34px;font-weight:550;letter-spacing:-.035em;line-height:1.15;margin-bottom:16px} .login-art p {color:#a0b7c9;font-size:12px;line-height:1.8;margin-bottom:0}
[hidden] {display:none!important}
@media(min-width:1500px) {.sidebar {width:260px} .main-column {margin-left:260px} main {padding-inline:46px}}
@media(max-width:1100px) {.session-actions {grid-template-columns:1fr;gap:0} .device-grid {grid-template-columns:1fr;gap:0} .device-grid>aside {display:none} .admin-grid {grid-template-columns:1fr;gap:0} #identity-name {display:none} .session-expiry {display:none}}
@media(max-width:800px) {
  .sidebar {transform:translateX(-100%);width:246px;transition:transform 200ms ease} .main-column {margin-left:0} .nav-open .sidebar {transform:translateX(0)}
  .nav-backdrop {position:fixed;z-index:9;inset:0;border:0;border-radius:0;background:#10253877}
  .mobile-nav-toggle {display:inline-flex!important;margin-left:-7px;color:#5d778e!important} .toolbar {padding:13px 22px;min-height:61px}
  .toolbar-location {gap:10px} .toolbar-location>span:first-of-type,.breadcrumb-divider {display:none}
  main {padding:27px 22px 0} .page-header {margin-bottom:24px} h1 {font-size:27px} .card {padding:21px}
  .login-layout {grid-template-columns:1.1fr 1fr} .login-art-caption {left:25px;right:20px} .login-art h2 {font-size:29px}
  .login-copy {padding:32px} .login-art {min-height:550px;background-position:50% 0;background-size:auto 65%}
}
@media(max-width:560px) {
  main {padding:24px 16px 0} .toolbar {padding-inline:18px} #identity {gap:7px} .page-header {align-items:flex-start}
  .account-access {align-self:flex-start;margin-top:28px;font-size:9px} .page-header p:last-child {max-width:220px} .eyebrow {font-size:9px}
  .card {padding:19px;margin-bottom:16px;border-radius:11px} .section-heading {margin-bottom:21px;gap:10px} .section-heading h2 {font-size:16px}
  .input-action {flex-direction:column;gap:10px} .input-action button {align-self:flex-start} .check {margin-top:12px}
  .connection-strip {padding:5px 2px 0} .connection-strip .text-button {display:none}
  .session-row {grid-template-columns:32px minmax(0,1fr) auto;gap:10px} .session-row .section-icon {width:32px;height:32px;border-radius:7px}
  .session-row button {min-height:32px;padding:6px 10px;font-size:11px}
  .board {padding:30px 11px;gap:7px} .board-team strong {font-size:40px} .board-team>span {font-size:10px}
  .board-clock strong {font-size:31px} .board-clock>span {font-size:8px}
  .controls {grid-template-columns:1fr 1fr;gap:15px} .controls .clock-button {grid-column:1/-1;grid-row:2}
  .control-heading {flex-direction:column;gap:12px} .form-grid,.guide-facts {grid-template-columns:1fr}
  .view-links,.public-link-row {grid-template-columns:1fr}.view-link {grid-template-columns:22px 1fr;align-items:center;gap:5px 10px}
  .view-link svg {grid-row:1/3}.view-link>span {grid-column:2}.public-link-row button {justify-self:start}
  .rows .row {align-items:flex-start;gap:12px} .row-actions {align-items:flex-end;flex-direction:column;gap:7px}
  .page-footer {flex-direction:column;gap:4px;margin-top:30px}
  body:not([data-auth=signed-in]) main {padding:20px 16px 0}
  .login-layout {grid-template-columns:1fr;min-height:0} .login-copy {padding:32px 27px 37px} .login-brand {margin-bottom:32px}
  .login-copy h1 {font-size:38px} .login-art {display:none} .login-copy>p {max-width:none}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}}