@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

/* Court Live — shared stylesheet
   Extracted from index.php/video.php for cleaner maintenance. */

* {
    box-sizing: border-box;
}
html, body {
    min-height: 100%;
}
body {
    margin: 0;
    background: #ffffff;
    color: #202124;
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
/* =========================================
   HEADER
========================================= */
.header {
    background: #ffffff;
    border-bottom:
        1px solid #e5e7eb;
    padding:
        20px 24px;
}
.header-content {
    width: 100%;
    max-width: 1920px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}
.header-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #f0f2f5;
    border-radius: 12px;
}
.header-refresh {
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .15s ease, opacity .15s ease;
}
.header-refresh:hover {
    opacity: .85;
}
.header-refresh:active {
    transform: scale(.96);
}
.header-refresh-symbol {
    width: 24px;
    height: 24px;
    display: block;
    flex: 0 0 24px;
}
.header-icon img {
    width: 28px;
    height: 28px;
    display: block;
}
.title {
    font-size: 22px;
    font-weight: 700;
}
.subtitle {
    margin-top: 3px;
    color: #7c8087;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 0;
}

/* =========================================
   CONTEÚDO
========================================= */
.content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 22px;
    background: #f5f6f8;
}
.content > .lives-grid,
.content > .shared-video-wrap {
    width: 100%;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}
/* =========================================
   GRID
========================================= */
.lives-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: 20px;
}
/* =========================================
   CARD
========================================= */
.camera-card {
    overflow: hidden;
    background: #ffffff;
    border:
        1px solid #E2E5E9;
    border-radius: 14px;
    box-shadow:
        0 4px 18px
        rgba(0,0,0,.05);
}
/* =========================================
   VÍDEO
========================================= */
.video {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    background: #111;
}
.video iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}
/* =========================================
   OFFLINE / LOADING
========================================= */
.offline{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:#F5F6F8;
    color:#9AA0A6;
}
.state-icon{
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9AA0A6;
}
.state-icon svg {
    width: 30px;
    height: 30px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.offline-text{
    margin:0;
    color:#9AA0A6;
    font-size:15px;
    line-height:1.25;
    font-weight:600;
}
.offline-text.error-detail-link{
    cursor:pointer;
    text-decoration-line:underline;
    text-decoration-style:dotted;
    text-decoration-thickness:1px;
    text-underline-offset:4px;
}
.offline-text.error-detail-link:hover{opacity:.8;}
/* =========================================
   LOADER
========================================= */
.loader {
    width: 30px;
    height: 30px;
    margin-bottom: 15px;
    border:
        3px solid #d9dde2;
    border-top-color:
        #777d86;
    border-radius: 50%;
    animation:
        spin .8s linear infinite;
}
@keyframes spin {
    to {
        transform:
            rotate(360deg);
    }
}
/* =========================================
   INFO
========================================= */
.camera-info {
    min-height: 58px;
    padding: 12px 15px;
    display: flex;
    border-bottom: 1px solid #e5e7eb;
    align-items: center;
    justify-content:
        space-between;
    gap: 15px;
}
.camera-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition:
        background .18s ease;
}
.camera-link:hover {
    background: #f8f9fa;
}
.camera-name {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 600;
}
.open-icon {
    color: #9aa0a6;
    font-size: 13px;
    font-weight: 400;
}
.camera-link:hover .open-icon {
    color: #202124;
}
/* =========================================
   STATUS
========================================= */
.status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 3px;
    border: 1px solid transparent;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .55px;
    text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(17,24,39,.08);
}
.status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex: 0 0 5px;
}
.status-live {
    background: #FF0000;
    border-color: #c91f1f;
    color: #ffffff;
}
.status-live .status-dot {
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(255,255,255,.16);
}
.status-online {
    background: #25D366;
    border-color: #116c33;
    color: #ffffff;
}
.status-starting {
    background: #374151;
    border-color: #2d3642;
    color: #ffffff;
}
.status-offline {
    background: #f3f4f6;
    border-color: #d9dde3;
    color: #6b7280;
    box-shadow: none;
}
.status-loading {
    background: #f8f9fa;
    border-color: #e5e7eb;
    color: #9ca3af;
    box-shadow: none;
}
.header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.header-actions form {
    margin: 0;
}
.stream-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 18px;
}
.stream-icon-start {
    font-size: 22px;
    transform: translateX(1px);
}
.stream-icon-stop {
    font-size: 17px;
}
.page-loader {
    background: rgba(17,19,21,.78);
}
.admin-toggle {
    margin-left: auto;
    border: 1px solid #e2e5e9;
    background: #ffffff;
    color: #62666d;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.admin-toggle:hover {
    background: #f8f9fa;
}
.global-stream-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 0 0 20px;
}
.global-stream-button {
    width: 100%;
    min-height: 52px;
    padding: 0 24px;
    border: 0;
    border-radius: 14px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .18s ease, transform .15s ease;
}
.global-stream-button:hover:not(:disabled) {
    opacity: .9;
}
.global-stream-button:active:not(:disabled) {
    transform: scale(.98);
}
.global-stream-start {
    background: #25D366;
}
.global-play-icon {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    transform: translateY(1px);
}
.global-stream-stop {
    background: #FF0000;
}
.global-stream-button:disabled {
    background: #e5e7eb;
    color: #aeb3b9;
    cursor: not-allowed;
}
.global-stream-button.global-stream-muted {
    background: #e5e7eb;
    color: #aeb3b9;
}
.admin-stream-settings {
    padding: 14px 15px 0;
    border-top: 1px solid #eef0f2;
    display: grid;
    gap: 10px;
}
.admin-setting-row {
    display: grid;
    gap: 5px;
}
.admin-setting-label {
    color: #6b7077;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.admin-setting-input,
.admin-setting-select,
.admin-setting-textarea {
    width: 100%;
    border: 1px solid #dfe3e8;
    background: #ffffff;
    color: #202124;
    border-radius: 8px;
    padding: 9px 10px;
    font: inherit;
    font-size: 12px;
    outline: none;
}
.admin-setting-input:focus,
.admin-setting-select:focus,
.admin-setting-textarea:focus {
    border-color: #9ca3af;
    box-shadow: 0 0 0 2px rgba(156,163,175,.12);
}
.admin-setting-textarea {
    min-height: 68px;
    resize: vertical;
    line-height: 1.4;
}
.admin-settings-status {
    min-height: 14px;
    color: #8a8f96;
    font-size: 10px;
}
.admin-settings-status.is-saving {
    color: #ca8a04;
}
.admin-settings-status.is-saved {
    color: #25D366;
}
.admin-settings-status.is-error {
    color: #FF0000;
}
.admin-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    border-top:1px solid #E2E5E9;
    background:#F5F6F8;
}
.stream-button{
    min-height:48px;
    border:0;
    background:#F5F6F8;
    color:#c4c7cc;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
}
.stream-button + .stream-button{
    border-left:1px solid #E2E5E9;
}
.stream-button .stream-icon {
    color: inherit;
}
.stream-button:disabled{
    background:#F5F6F8;
    color:#c4c7cc;
    cursor:not-allowed;
}
.stream-button:disabled .stream-icon {
    color: #c4c7cc;
}
.camera-card.is-online .stream-start:not(:disabled) {
    color: #25D366;
}
.camera-card.is-live .stream-stop:not(:disabled) {
    color: #FF0000;
}
.stream-button:not(:disabled):hover{
    background:#FFFFFF;
}
.admin-auth-button {
    width: 38px;
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-auth-button svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
}
.admin-auth-active {
    background: #ecfdf3;
    border-color: #bbf7d0;
    color: #25D366;
}
.admin-auth-active:hover {
    background: #dcfce7;
    border-color: #86efac;
    color: #25D366;
}
.auth-icon {
    width: 20px !important;
    height: 20px !important;
    fill: currentColor;
}
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(2px);
}
.page-loader.show {
    display: flex;
}
.page-loader-spinner {
    width: 38px;
    height: 38px;
    border: 3px solid #d9dde2;
    border-top-color: #202124;
    border-radius: 50%;
    animation: spin .75s linear infinite;
}
.admin-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0,0,0,.68);
}
.admin-modal.open {
    display: flex;
}
.admin-login-box {
    width: 100%;
    max-width: 360px;
    background: #ffffff;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.admin-login-title {
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 700;
}
.admin-password {
    width: 100%;
    height: 44px;
    border: 1px solid #d9dde2;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 14px;
    outline: none;
}
.admin-password:focus {
    border-color: #777d86;
}
.admin-login-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}
.admin-login-actions button {
    flex: 1;
    height: 42px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.admin-cancel {
    border: 1px solid #e2e5e9;
    background: #ffffff;
    color: #62666d;
}
.admin-submit {
    border: 0;
    background: #202124;
    color: #ffffff;
}
.admin-error {
    margin-top: 10px;
    color: #FF0000;
    font-size: 12px;
}
/* =========================================
   MOBILE
========================================= */
.footer {
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    padding: 18px 24px;
    margin-top: 0px;
}
.footer-content {
    width: 100%;
    max-width: 1920px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #7c8087;
    font-size: 13px;
}
.footer a {
    color: #7c8087;
    text-decoration: none;
}
.footer a:hover {
    color: #202124;
}
.footer-brand-auth {
    display: inline-flex;
    align-items: center;
    gap:0;
}
.footer-auth-link {
    border: 0;
    padding: 0;
    background: none;
    color: #7c8087;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    line-height: 1.15;
}
.footer-auth-link:hover {
    color: #202124;
}

@media (max-width: 700px) {
    .admin-modal {
        padding: 16px;
    }
    .admin-login-box {
        width: 100%;
        max-width: 360px;
    }
    .header {
        padding: 14px;
    }
    .header-icon {
        width: 40px;
        height: 40px;
    }
    .header-icon img {
        width: 24px;
        height: 24px;
    }
    .title {
        font-size: 18px;
    }
    .subtitle {
        font-size: 12px;
    }
    .content {
        padding: 10px;
    }
    .global-stream-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 12px;
    }
    .global-stream-button {
        min-height: 50px;
        padding: 0 10px;
        font-size: 12px;
    }
    .lives-grid {
        grid-template-columns:
            1fr;
        gap: 12px;
    }
    .camera-card {
        border-radius: 10px;
    }
    .camera-info {
        min-height: 52px;
        padding:
            10px 12px;
    }
    .footer {
        padding: 14px;
    }
    .footer-content {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }
}
.admin-settings-panel {
    display: grid;
    grid-template-columns: 150px minmax(0,1fr);
    gap: 10px;
    align-items: end;
}
.admin-settings-panel .admin-setting-row {
    margin: 0;
}
.admin-settings-status {
    grid-column: 1 / -1;
}
@media (max-width: 600px) {
    .admin-settings-panel {
        grid-template-columns: 130px minmax(0,1fr);
    }
}
.header-icon img{max-width:100%;max-height:60px;object-fit:contain;}
.header-icon{width:68px;height:68px;}

.status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:7px 12px;
    border:0!important;
    border-radius:999px;
    font-weight:800;
    line-height:1;
    letter-spacing:.02em;
    white-space:nowrap;
}
.status-offline{background:#6b7280!important;color:#fff!important;}
.status-online{background:#25D366!important;color:#fff!important;}
.status-starting{background:#f59e0b!important;color:#111827!important;}
.status-live{background:#FF0000!important;color:#fff!important;}

/* Final admin controls */
.admin-stream-settings{padding:14px 15px;border-top:1px solid #eef0f2;display:block;}
.admin-settings-inline{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;align-items:center;}
.admin-settings-status{margin-top:6px;}
@media(max-width:520px){
    .admin-settings-inline{grid-template-columns:105px minmax(0,1fr);gap:7px;}
    .admin-setting-input,.admin-setting-select{min-width:0;font-size:11px;padding:9px 8px;}
    }

.admin-submit.admin-login-submit,
.admin-submit.admin-login-submit:hover,
.admin-submit.admin-login-submit:focus,
.admin-submit.admin-login-submit:active {
    background: #25D366 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}
.admin-submit.admin-logout-confirm,
.admin-submit.admin-logout-confirm:hover,
.admin-submit.admin-logout-confirm:focus,
.admin-submit.admin-logout-confirm:active {
    background: #FF0000 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Court Live status redesign - final override */
.status{
    min-width:82px!important;
    min-height:28px!important;
    padding:0 11px!important;
    border-radius:2px!important;
    border:1px solid #e5e7eb!important;
    border-left-width:4px!important;
    background:#ffffff!important;
    box-shadow:none!important;
    font-size:10px!important;
    font-weight:800!important;
    letter-spacing:.7px!important;
    text-transform:uppercase!important;
    justify-content:center!important;
}
.status-offline{
    color:#6b7280!important;
    border-color:#e5e7eb!important;
    border-left-color:#9ca3af!important;
    background:#f9fafb!important;
}
.status-online{
    color:#25D366!important;
    border-color:#d7eadc!important;
    border-left-color:#25D366!important;
    background:#f3fbf5!important;
}
.status-starting{
    color:#374151!important;
    border-color:#d9dde3!important;
    border-left-color:#374151!important;
    background:#f6f7f8!important;
}
.status-live{
    color:#b91c1c!important;
    border-color:#f1caca!important;
    border-left-color:#FF0000!important;
    background:#fff5f5!important;
}
.status-loading{
    color:#9ca3af!important;
    border-color:#e5e7eb!important;
    border-left-color:#d1d5db!important;
    background:#fafafa!important;
}
.status-live .status-dot{
    width:6px!important;
    height:6px!important;
    background:#FF0000!important;
    box-shadow:none!important;
}

/* Court Live status - minimal indicator */
.status{
    min-width:0!important;
    min-height:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:7px!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:800!important;
    letter-spacing:.65px!important;
    text-transform:uppercase!important;
}
.status::before{
    content:""!important;
    width:7px!important;
    height:7px!important;
    border-radius:2px!important;
    flex:0 0 7px!important;
    background:#9ca3af!important;
}
.status-offline{color:#8b9199!important;}
.status-offline::before{background:#9ca3af!important;}
.status-online{color:#25D366!important;}
.status-online::before{background:#25D366!important;}
.status-starting{color:#4b5563!important;}
.status-starting::before{background:#4b5563!important;}
.status-live{color:#FF0000!important;}
.status-live::before{background:#FF0000!important;}
.status-loading{color:#9ca3af!important;}
.status-loading::before{background:#d1d5db!important;}
.status-live .status-dot{display:none!important;}

/* Court Live status - Soft Button A, no circle */
.status{
    min-width:78px!important;
    min-height:28px!important;
    padding:0 11px!important;
    border:0!important;
    border-radius:6px!important;
    box-shadow:none!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:800!important;
    letter-spacing:.55px!important;
    text-transform:uppercase!important;
}
.status::before{display:none!important;content:none!important;}
.status-dot{display:none!important;}
.status-offline{background:#f1f3f5!important;color:#737982!important;}
.status-online{background:#eaf7ee!important;color:#25D366!important;}
.status-starting{background:#eef0f3!important;color:#4b5563!important;}
.status-live{background:#fdecec!important;color:#FF0000!important;}
.status-loading{background:#f5f6f7!important;color:#9ca3af!important;}

/* Court Live status - solid consistent colors */
.status{
    min-width:78px!important;
    min-height:28px!important;
    padding:0 11px!important;
    border:0!important;
    border-radius:6px!important;
    box-shadow:none!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:800!important;
    letter-spacing:.55px!important;
    text-transform:uppercase!important;
    color:#ffffff!important;
}
.status::before{display:none!important;content:none!important;}
.status-dot{display:none!important;}
.status-offline{background:#9ca3af!important;color:#ffffff!important;}
.status-online{background:#25D366!important;color:#ffffff!important;}
.status-starting{background:#374151!important;color:#ffffff!important;}
.status-live{background:#FF0000!important;color:#ffffff!important;}
.status-loading{background:#9ca3af!important;color:#ffffff!important;}

/* Court Live final grey palette */
.status-offline{background:#EDEEF1!important;color:#303030!important;}
.status-loading{background:#EDEEF1!important;color:#303030!important;}
.status-starting{background:#303030!important;color:#ffffff!important;}

/* Court Live official brand system */
:root{
    --cl-light:#F2F2F2;
    --cl-dark:#303030;
    --cl-green:#25D366;
    --cl-red:#FF0000;
    --cl-yellow:#FFB200;
}
.status-offline,.status-loading{
    background:var(--cl-light)!important;
    color:var(--cl-dark)!important;
}
.status-starting{
    background:var(--cl-yellow)!important;
    color:var(--cl-dark)!important;
}
.status-online{
    background:var(--cl-green)!important;
    color:#fff!important;
}
.status-live{
    background:var(--cl-red)!important;
    color:#fff!important;
}

/* Court Live official green consistency */
.status-online{background:#25D366!important;color:#fff!important;}
.login-button,.login-btn,button[type="submit"].login-button,button[type="submit"].login-btn{
    background:#25D366!important;
    border-color:#25D366!important;
}

/* Court Live OFFLINE - official dark grey */
.status-offline{background:#303030!important;color:#fff!important;}

/* STARTING: immediate feedback + official orange */
.status-starting{background:#FFB200!important;color:#fff!important;}

/* ERROR state */
.status-error{background:#303030!important;color:#fff!important;}
.camera-card.is-error .stream-button:disabled{background:#f3f4f6;color:#c4c7cc;cursor:not-allowed;}
.camera-card.is-error .admin-setting-select:disabled,.camera-card.is-error .admin-setting-input:disabled{background:#fff!important;color:#303030!important;border-color:#d7dbe0!important;}

.camera-link{display:inline-flex!important;width:auto!important;background:transparent!important;}
.camera-link:hover{background:transparent!important;}
.camera-status-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.copy-live-link{
    width:28px;height:28px;padding:0;border:0;border-radius:6px;
    display:inline-flex;align-items:center;justify-content:center;
    background:#F2F2F2;color:#303030;cursor:pointer;
    transition:background .18s ease,transform .18s ease;
}
.copy-live-link[hidden]{display:none!important;}
.copy-live-link:hover{background:#e6e6e6;}
.copy-live-link:active{transform:scale(.94);}
.copy-live-link svg{width:15px;height:15px;fill:currentColor;}
.copy-live-link.is-copied{background:#F2F2F2;color:#303030;}

/* LIVE uses the same spacing as the other status badges */
.status-live{
    min-height:28px!important;
    padding:0 11px!important;
    border-radius:6px!important;
    box-sizing:border-box!important;
    white-space:nowrap!important;
}

/* Visibility text colors */
.admin-setting-select.visibility-public{background:rgba(37,211,102,.10)!important;color:#25D366!important;border-color:#25D366!important;font-weight:700!important;}
.admin-setting-select.visibility-unlisted{background:rgba(255,178,0,.10)!important;color:#FFB200!important;border-color:#FFB200!important;font-weight:700!important;}
.admin-setting-select.visibility-private{background:rgba(59,59,59,.10)!important;color:#303030!important;border-color:#303030!important;font-weight:700!important;}
.admin-setting-select option{background:#fff;color:#303030;font-weight:700;}
.admin-setting-select:disabled,.admin-setting-input:disabled{opacity:1!important;cursor:default!important;}
.admin-setting-select:disabled{background:#fff!important;color:#303030!important;border-color:#d7dbe0!important;font-weight:700!important;}
.admin-setting-input:disabled{background:#fff!important;color:#303030!important;}


.shared-video-wrap{
    margin-bottom:0;
}
.shared-video-grid{
    display:grid;
    grid-template-columns:minmax(0,1100px);
    justify-content:center;
}
.shared-video-grid .camera-card{
    width:100%;
    border-color:#d7dbe0;
    box-shadow:0 8px 26px rgba(0,0,0,.08);
}
.shared-video-grid .video{
    aspect-ratio:16 / 9;
}

.shared-video-back{
    display:flex;
    justify-content:center;
    margin-top:14px;
}
.shared-video-back a{
    min-width:110px;
    min-height:38px;
    padding:0 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#303030;
    color:#fff;
    border:0;
    border-radius:8px;
    text-decoration:none;
    font-size:13px;
    font-weight:400;
    transition:opacity .15s ease, transform .15s ease;
}
.shared-video-back a:hover{opacity:.85;}
.shared-video-back a:active{transform:scale(.98);}

.shared-exit-header{
    min-width:38px;
    width:38px;
    height:38px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#ffffff!important;
    color:#62666d!important;
    border:1px solid #e2e5e9!important;
}
.shared-exit-x{
    font-size:24px;
    line-height:1;
    font-weight:400;
    transform:translateY(-1px);
}

.shared-subtitle{
    display:inline-flex;
    align-items:center;
    gap:0;
}
.ui-separator {
    display: inline-block;
    margin: 0 8px;
    color: #c2c5ca;
    line-height: 1;
    flex: 0 0 auto;
}



.camera-status-actions .status{order:1;}
.camera-status-actions .copy-live-link{order:2;}

.status[hidden],
.copy-live-link[hidden]{
    display:none!important;
}

.header-icon-link{
    text-decoration:none;
    color:inherit;
    cursor:pointer;
}













/* =========================================
   SHARE ACTIONS — ABOVE FOOTER
========================================= */
.share-actions-section{
    background:#ffffff;
    border-top:1px solid #e5e7eb;
    padding:10px 24px;
}
.share-actions-inner{
    width:100%;
    max-width:1920px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}
.share-action-button{
    min-height:34px;
    padding:0 14px;
    border-radius:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0;
    border:1px solid #E2E5E9;
    background:#F5F6F8;
    color:#9AA0A6;
    font:inherit;
    font-size:13px;
    font-weight:400;
    line-height:1;
    text-decoration:none;
    cursor:pointer;
    transition:background .16s ease,transform .16s ease;
    box-shadow:none;
}
.share-action-button:hover{
    background:#FFFFFF;
    border-color:#E2E5E9;
    color:#9AA0A6;
}
.share-action-button:active{
    transform:translateY(1px);
}
.share-action-button svg{
    width:17px;
    height:17px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex:0 0 auto;
}




@media (max-width:700px){
    .share-actions-section{padding:8px 10px;}
    .share-actions-inner{gap:8px;}
    .share-action-button{
        flex:1 1 0;
        min-width:0;
        padding:0 10px;
        font-size:12px;
    }
}


/* Footer/share actions: text only, regular weight */
.footer-actions a,
.footer-actions button,
.share-actions a,
.share-actions button,
.footer-share-actions a,
.footer-share-actions button,
.page-actions a,
.page-actions button {
    font-weight: 400 !important;
}
.footer-actions svg,
.share-actions svg,
.footer-share-actions svg,
.page-actions svg {
    display: none !important;
}


/* Recorded video card header: same top bar as live court cards. */
.recorded-video-info{
    justify-content:flex-start !important;
}
.recorded-video-title{
    color:var(--ui-text) !important;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Inactive stream area: subtly darker than before, still lighter than page background */
.video-wrap:not(.is-live),
.stream-empty,
.stream-placeholder{
    background:#F5F6F8;
}

/* Exact same separator in header, Recorded Video and footer */
.ui-separator {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    margin: 0 8px !important;
    padding: 0 !important;
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: #c2c5ca !important;
    transform: none !important;
}

/* =========================================================
   COURT LIVE — FINAL UNIFIED GREY PALETTE
   ========================================================= */
:root{
    --cl-bg:#F5F6F8;
    --cl-border:#E2E5E9;
    --cl-muted:#9AA0A6;
    --cl-muted-strong:#7C8087;
    --cl-text:#202124;
    --cl-dark:#303030;
}

/* Main structural greys */
body,
.content{
    background:var(--cl-bg) !important;
}
.header,
.footer,
.share-actions-section{
    background:#FFFFFF !important;
    border-color:var(--cl-border) !important;
}
.camera-card,
.shared-video-grid .camera-card{
    background:#FFFFFF !important;
    border-color:var(--cl-border) !important;
}
.camera-info,
.admin-stream-settings,
.admin-actions{
    border-color:var(--cl-border) !important;
}

/* Header / footer / secondary text */
.subtitle,
.footer,
.footer a,
.footer-auth-link,
.admin-setting-label,
.admin-settings-status{
    color:var(--cl-muted-strong) !important;
}
.ui-separator{
    color:var(--cl-muted) !important;
}
.header-icon{
    background:var(--cl-bg) !important;
}

/* Inactive / loading video areas */
.offline,
.video-wrap:not(.is-live),
.stream-empty,
.stream-placeholder{
    background:var(--cl-bg) !important;
}
.state-icon,
.offline-text,
.open-icon{
    color:var(--cl-muted) !important;
}
.video{
    background:var(--cl-bg) !important;
}

/* Loaders */
.loader,
.page-loader-spinner{
    border-color:var(--cl-border) !important;
    border-top-color:var(--cl-muted-strong) !important;
}

/* Inputs / selects */
.admin-setting-input,
.admin-setting-select,
.admin-setting-textarea,
.admin-password{
    border-color:var(--cl-border) !important;
    color:var(--cl-text) !important;
}
.admin-setting-input:focus,
.admin-setting-select:focus,
.admin-setting-textarea:focus,
.admin-password:focus{
    border-color:var(--cl-muted) !important;
}
.admin-setting-select:disabled,
.admin-setting-input:disabled,
.camera-card.is-error .admin-setting-select:disabled,
.camera-card.is-error .admin-setting-input:disabled{
    background:var(--cl-bg) !important;
    border-color:var(--cl-border) !important;
    color:var(--cl-muted) !important;
}

/* Start / Stop area */
.admin-actions,
.stream-button,
.stream-button:disabled,
.camera-card.is-error .stream-button:disabled{
    background:var(--cl-bg) !important;
}
.stream-button + .stream-button{
    border-color:var(--cl-border) !important;
}
.stream-button,
.stream-button:disabled,
.stream-button:disabled .stream-icon,
.camera-card.is-error .stream-button:disabled{
    color:var(--cl-muted) !important;
}
.stream-button:not(:disabled):hover{
    background:#FFFFFF !important;
}
/* Keep functional active colors */
.camera-card.is-online .stream-start:not(:disabled){
    color:#25D366 !important;
}
.camera-card.is-live .stream-stop:not(:disabled){
    color:#FF0000 !important;
}

/* Bottom action buttons */
.share-action-button{
    background:var(--cl-bg) !important;
    border-color:var(--cl-border) !important;
    color:var(--cl-muted) !important;
}
.share-action-button:hover{
    background:#FFFFFF !important;
    border-color:var(--cl-border) !important;
    color:var(--cl-muted) !important;
}

/* Small utility buttons */
.copy-live-link,
.admin-toggle,
.admin-cancel{
    background:var(--cl-bg) !important;
    border-color:var(--cl-border) !important;
    color:var(--cl-muted-strong) !important;
}
.copy-live-link:hover,
.admin-toggle:hover,
.admin-cancel:hover{
    background:#FFFFFF !important;
}

/* Status palette:
   keep semantic colors, use the shared greys for neutral states */
.status-loading{
    background:var(--cl-bg) !important;
    border-color:var(--cl-border) !important;
    color:var(--cl-muted-strong) !important;
}
.status-offline,
.status-error{
    background:var(--cl-dark) !important;
    border-color:var(--cl-dark) !important;
    color:#FFFFFF !important;
}
.status-online{
    background:#25D366 !important;
    color:#FFFFFF !important;
}
.status-starting{
    background:#FFB200 !important;
    color:#FFFFFF !important;
}
.status-live{
    background:#FF0000 !important;
    color:#FFFFFF !important;
}

/* Modal neutral surfaces */
.admin-login-box,
.youtube-error-modal-box{
    background:#FFFFFF !important;
    border-color:var(--cl-border) !important;
}

/* Club name */
.header .title,
.title{
    color:#303030 !important;
}

/* Footer and everything below it remain white */
.footer{
    background:#FFFFFF !important;
}
html{
    background:#FFFFFF !important;
}
body{
    min-height:100vh;
}

/* Visibility select without native arrow */
.admin-setting-select{
    appearance:none !important;
    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    background-image:none !important;
}

/* Footer and area below it */
html,
body{
    background:#FFFFFF !important;
}
.content,
main{
    background:#F5F6F8 !important;
}
.footer{
    background:#FFFFFF !important;
}

/* Compact Visibility + Title area */
.admin-stream-settings{
    padding:8px 15px 8px !important;
    gap:6px !important;
}
.admin-settings-inline{
    gap:8px !important;
}
.admin-setting-input,
.admin-setting-select{
    min-height:34px !important;
    padding:6px 9px !important;
    font-size:12px !important;
}

/* Uniform spacing for Visibility + Title area */
.admin-stream-settings{
    padding:8px !important;
    gap:6px !important;
}
.admin-settings-inline{
    gap:8px !important;
}

/* Unified popup hierarchy */
.admin-login-title{
    color:#303030 !important;
}
.admin-login-text{
    color:#7C8087 !important;
}
.admin-login-actions button{
    font-weight:400 !important;
}
.admin-cancel{
    background:#F5F6F8 !important;
    border:1px solid #E2E5E9 !important;
    color:#7C8087 !important;
}
.admin-cancel:hover{
    background:#FFFFFF !important;
    border-color:#E2E5E9 !important;
    color:#7C8087 !important;
}
.admin-submit{
    background:#303030 !important;
    border:1px solid #303030 !important;
    color:#FFFFFF !important;
}
.admin-submit:hover{
    background:#2F2F2F !important;
    border-color:#2F2F2F !important;
    color:#FFFFFF !important;
}

/* Login / Logout popup buttons only */
.admin-modal .admin-cancel{
    background:#F5F6F8 !important;
    border:1px solid #E2E5E9 !important;
    color:#7C8087 !important;
    font-weight:400 !important;
}
.admin-modal .admin-cancel:hover{
    background:#FFFFFF !important;
    border-color:#E2E5E9 !important;
    color:#7C8087 !important;
}
.admin-modal .admin-submit{
    background:#303030 !important;
    border:1px solid #303030 !important;
    color:#FFFFFF !important;
    font-weight:400 !important;
}
.admin-modal .admin-submit:hover{
    background:#2F2F2F !important;
    border-color:#2F2F2F !important;
    color:#FFFFFF !important;
}

/* Keep Login / Logout perfectly aligned in every footer */
.footer-brand-auth{
    display:inline-flex !important;
    align-items:center !important;
    gap:0 !important;
}
.admin-logout-form{
    display:inline-flex !important;
    align-items:center !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1 !important;
}
.footer-auth-link{
    display:inline-flex !important;
    align-items:center !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1.15 !important;
    vertical-align:middle !important;
}

/* Login / Logout popup primary buttons stay dark grey in every interaction state */
.admin-modal .admin-submit,
.admin-modal .admin-submit:hover,
.admin-modal .admin-submit:focus,
.admin-modal .admin-submit:active,
.admin-modal .admin-logout-confirm,
.admin-modal .admin-logout-confirm:hover,
.admin-modal .admin-logout-confirm:focus,
.admin-modal .admin-logout-confirm:active{
    background:#303030 !important;
    border-color:#303030 !important;
    color:#FFFFFF !important;
    box-shadow:none !important;
    outline:none !important;
}

/* Keep Exit / Copy / Share compact on mobile, same as desktop */
.share-actions-inner{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
}
.share-action-button{
    width:auto !important;
    min-width:0 !important;
    flex:0 0 auto !important;
}
@media (max-width: 768px){
    .share-actions-inner{
        display:flex !important;
        grid-template-columns:none !important;
        justify-content:center !important;
        gap:8px !important;
    }
    .share-action-button{
        width:auto !important;
        min-width:0 !important;
        flex:0 0 auto !important;
        padding-left:14px !important;
        padding-right:14px !important;
    }
}

/* Stream states: text only */
.offline{
    gap:0 !important;
}
.state-icon{
    display:none !important;
}

/* =========================================================
   COURT LIVE — OPTION A
   Clear separation between page, cards and empty video area
   ========================================================= */

/* White outer shell / area below footer */
html,
body{
    background:#FFFFFF !important;
}

/* Main page canvas */
main,
.content{
    background:#F9F9F9 !important;
}

/* Header and footer stay white */
.header,
.footer{
    background:#FFFFFF !important;
}

/* Cards remain clearly separated from the page background */
.camera-card,
.shared-video-grid .camera-card{
    background:#FFFFFF !important;
    border-color:#E2E5E9 !important;
}

/* Empty / non-live video area */
.offline,
.video-wrap:not(.is-live),
.stream-empty,
.stream-placeholder{
    background:#F2F3F4 !important;
}

/* Video container fallback */
.video{
    background:#F2F3F4 !important;
}

/* Settings area stays white */
.admin-stream-settings{
    background:#FFFFFF !important;
    border-color:#E2E5E9 !important;
}

/* Start / Stop strip */
.admin-actions,
.stream-button,
.stream-button:disabled,
.camera-card.is-error .stream-button:disabled{
    background:#F5F6F8 !important;
}
.stream-button + .stream-button{
    border-color:#E2E5E9 !important;
}
.stream-button:not(:disabled):hover{
    background:#FFFFFF !important;
}

/* Bottom action strip remains white and separate from page */
.share-actions-section{
    background:#FFFFFF !important;
    border-color:#E2E5E9 !important;
}

/* Neutral action buttons */
.share-action-button{
    background:#F5F6F8 !important;
    border-color:#E2E5E9 !important;
    color:#9AA0A6 !important;
}
.share-action-button:hover{
    background:#FFFFFF !important;
    border-color:#E2E5E9 !important;
    color:#9AA0A6 !important;
}

/* Keep footer and area below it white */
.footer{
    background:#FFFFFF !important;
    border-color:#E2E5E9 !important;
}

/* =========================================================
   COURT LIVE — OPTION A / FINAL VISUAL SYSTEM
   ========================================================= */
:root{
    --ui-page:#F9F9F9;
    --ui-surface:#FFFFFF;
    --ui-video:#F2F3F4;
    --ui-control:#F5F6F8;
    --ui-border:#E2E5E9;
    --ui-text:#303030;
    --ui-secondary:#7C8087;
    --ui-muted:#9AA0A6;
}

/* PAGE LAYERS */
html,
body{
    background:var(--ui-surface) !important;
    color:var(--ui-text) !important;
}
main,
.content{
    background:var(--ui-page) !important;
}
.header,
.footer,
.share-actions-section{
    background:var(--ui-surface) !important;
    border-color:var(--ui-border) !important;
}

/* HEADER */
.header .title,
.title{
    color:var(--ui-text) !important;
}
.subtitle{
    color:var(--ui-secondary) !important;
}
.header-icon{
    background:var(--ui-control) !important;
}
.ui-separator{
    color:var(--ui-muted) !important;
}

/* CARDS */
.camera-card,
.shared-video-grid .camera-card{
    background:var(--ui-surface) !important;
    border-color:var(--ui-border) !important;
}
.camera-info{
    background:var(--ui-surface) !important;
    border-color:var(--ui-border) !important;
}
.camera-name{
    color:var(--ui-text) !important;
}
.open-icon{
    color:var(--ui-muted) !important;
}

/* EMPTY / NON-LIVE VIDEO AREA */
.video,
.offline,
.video-wrap:not(.is-live),
.stream-empty,
.stream-placeholder{
    background:var(--ui-video) !important;
}
.offline-text,
.state-icon{
    color:var(--ui-secondary) !important;
}

/* ADMIN SETTINGS */
.admin-stream-settings{
    background:var(--ui-surface) !important;
    border-color:var(--ui-border) !important;
}
.admin-setting-input,
.admin-setting-select,
.admin-setting-textarea{
    background:var(--ui-surface) !important;
    border-color:var(--ui-border) !important;
    color:var(--ui-text) !important;
}
.admin-setting-input:focus,
.admin-setting-select:focus,
.admin-setting-textarea:focus{
    border-color:var(--ui-muted) !important;
    box-shadow:0 0 0 2px rgba(154,160,166,.12) !important;
}
.admin-setting-input:disabled,
.admin-setting-select:disabled,
.camera-card.is-error .admin-setting-input:disabled,
.camera-card.is-error .admin-setting-select:disabled{
    background:var(--ui-control) !important;
    border-color:var(--ui-border) !important;
    color:var(--ui-muted) !important;
}
.admin-setting-label,
.admin-settings-status{
    color:var(--ui-secondary) !important;
}

/* START / STOP */
.admin-actions,
.stream-button,
.stream-button:disabled,
.camera-card.is-error .stream-button:disabled{
    background:var(--ui-control) !important;
}
.admin-actions,
.stream-button + .stream-button{
    border-color:var(--ui-border) !important;
}
.stream-button,
.stream-button:disabled,
.stream-button:disabled .stream-icon,
.camera-card.is-error .stream-button:disabled{
    color:var(--ui-muted) !important;
}
.stream-button:not(:disabled):hover{
    background:var(--ui-surface) !important;
}
/* Semantic action colours only */
.camera-card.is-online .stream-start:not(:disabled){
    color:#25D366 !important;
}
.camera-card.is-live .stream-stop:not(:disabled){
    color:#FF0000 !important;
}

/* STATUS BADGES */
.status-loading{
    background:var(--ui-control) !important;
    border-color:var(--ui-border) !important;
    color:var(--ui-secondary) !important;
}
.status-offline,
.status-error{
    background:var(--ui-text) !important;
    border-color:var(--ui-text) !important;
    color:#FFFFFF !important;
}
.status-online{
    background:#25D366 !important;
    color:#FFFFFF !important;
}
.status-starting{
    background:#FFB200 !important;
    color:#FFFFFF !important;
}
.status-live{
    background:#FF0000 !important;
    color:#FFFFFF !important;
}

/* BOTTOM ACTIONS */
.share-action-button{
    background:var(--ui-control) !important;
    border-color:var(--ui-border) !important;
    color:var(--ui-secondary) !important;
    box-shadow:none !important;
}
.share-action-button:hover,
.share-action-button:focus{
    background:var(--ui-surface) !important;
    border-color:var(--ui-border) !important;
    color:var(--ui-secondary) !important;
    outline:none !important;
}
.share-action-button:active{
    background:var(--ui-surface) !important;
    color:var(--ui-secondary) !important;
}

/* Keep action buttons compact on mobile too */
.share-actions-inner{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:8px !important;
}
.share-action-button{
    width:auto !important;
    min-width:0 !important;
    flex:0 0 auto !important;
}

/* FOOTER */
.footer,
.footer a,
.footer-auth-link{
    color:var(--ui-secondary) !important;
}
.footer-brand-auth{
    align-items:center !important;
}
.footer-auth-link{
    line-height:1.15 !important;
}

/* MODALS */
.admin-login-box,
.youtube-error-modal-box{
    background:var(--ui-surface) !important;
    border-color:var(--ui-border) !important;
}
.admin-login-title,
.youtube-error-modal-title{
    color:var(--ui-text) !important;
}
.admin-login-text,
.youtube-error-modal-message{
    color:var(--ui-secondary) !important;
}
.admin-cancel{
    background:var(--ui-control) !important;
    border:1px solid var(--ui-border) !important;
    color:var(--ui-secondary) !important;
    font-weight:400 !important;
}
.admin-cancel:hover,
.admin-cancel:focus,
.admin-cancel:active{
    background:var(--ui-surface) !important;
    border-color:var(--ui-border) !important;
    color:var(--ui-secondary) !important;
}
.admin-submit,
.admin-submit:hover,
.admin-submit:focus,
.admin-submit:active,
.admin-logout-confirm,
.admin-logout-confirm:hover,
.admin-logout-confirm:focus,
.admin-logout-confirm:active{
    background:var(--ui-text) !important;
    border:1px solid var(--ui-text) !important;
    color:#FFFFFF !important;
    box-shadow:none !important;
    outline:none !important;
    font-weight:400 !important;
}

/* LOADERS */
.loader,
.page-loader-spinner{
    border-color:var(--ui-border) !important;
    border-top-color:var(--ui-secondary) !important;
}

/* Keep the area below the footer white */
.footer{
    background:var(--ui-surface) !important;
}

/* Club header artwork: the image itself is the full header tile. */
.header-icon{
    padding:0 !important;
    background:transparent !important;
    overflow:hidden !important;
}
.header-icon .header-club-image{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    display:block !important;
    object-fit:cover !important;
    border-radius:inherit !important;
}
.header-icon .header-fallback-image{
    width:28px !important;
    height:28px !important;
    max-width:28px !important;
    max-height:28px !important;
    object-fit:contain !important;
}

/* =====================================================
   COURT LIVE ERROR PAGES
   ===================================================== */
.error-page-body{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    background:var(--ui-page,#F9F9F9) !important;
}
.error-page-content{
    width:100%;
    flex:1 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-top:48px !important;
    padding-bottom:48px !important;
}
.error-page-card{
    width:min(100%,620px);
    box-sizing:border-box;
    text-align:center;
    background:var(--ui-surface,#FFFFFF);
    border:1px solid var(--ui-border,#E2E5E9);
    border-radius:14px;
    padding:42px 32px;
}
.error-page-code{
    color:var(--ui-muted,#9AA0A6);
    font-size:13px;
    font-weight:700;
    letter-spacing:.14em;
    margin-bottom:10px;
}
.error-page-title{
    margin:0;
    color:var(--ui-text,#303030);
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:28px;
    font-weight:700;
    line-height:1.2;
}
.error-page-message,
.error-page-contact{
    margin:12px auto 0;
    max-width:480px;
    color:var(--ui-secondary,#7C8087);
    font-size:14px;
    line-height:1.55;
}
.error-page-contact a{
    color:var(--ui-text,#303030);
    text-decoration:none;
    font-weight:500;
}
.error-page-contact a:hover{text-decoration:underline;}
.error-page-actions{
    margin-top:24px;
    display:flex;
    justify-content:center;
}
.error-page-button{
    display:inline-flex !important;
    width:auto !important;
    min-width:0 !important;
    text-decoration:none !important;
}
.error-header-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--ui-video,#F2F3F4) !important;
}
@media (max-width:700px){
    .error-page-content{padding-top:24px !important;padding-bottom:24px !important;}
    .error-page-card{padding:32px 20px;border-radius:12px;}
    .error-page-title{font-size:24px;}
}


/* =====================================================
   COURT LIVE — LIGHT / DARK MODE
   ===================================================== */
.header-actions{
    margin-left:auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
}
.theme-toggle{
    width:38px;
    height:38px;
    padding:0;
    border:1px solid var(--ui-border);
    border-radius:10px;
    background:var(--ui-control);
    color:var(--ui-secondary);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
.theme-toggle:hover,
.theme-toggle:focus{
    background:var(--ui-surface);
    border-color:var(--ui-border);
    color:var(--ui-text);
    outline:none;
}
.theme-toggle:active{transform:scale(.96);}
.theme-icon{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.theme-icon-sun{display:none;}
html[data-theme="dark"] .theme-icon-moon{display:none;}
html[data-theme="dark"] .theme-icon-sun{display:block;}

html[data-theme="dark"]{
    --ui-page:#18191B;
    --ui-surface:#202124;
    --ui-video:#25272A;
    --ui-control:#2A2C2F;
    --ui-border:#35383C;
    --ui-text:#F1F3F4;
    --ui-secondary:#B5B9BE;
    --ui-muted:#858A91;
    --cl-bg:#18191B;
    --cl-border:#35383C;
    --cl-muted:#858A91;
    --cl-muted-strong:#B5B9BE;
    --cl-text:#F1F3F4;
    --cl-dark:#F1F3F4;
}
html[data-theme="dark"],
html[data-theme="dark"] body{
    background:var(--ui-surface) !important;
    color:var(--ui-text) !important;
}
html[data-theme="dark"] main,
html[data-theme="dark"] .content,
html[data-theme="dark"] .error-page-body{
    background:var(--ui-page) !important;
}
html[data-theme="dark"] .header,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .share-actions-section{
    background:var(--ui-surface) !important;
    border-color:var(--ui-border) !important;
}
html[data-theme="dark"] .camera-card,
html[data-theme="dark"] .shared-video-grid .camera-card,
html[data-theme="dark"] .error-page-card,
html[data-theme="dark"] .admin-login-box,
html[data-theme="dark"] .youtube-error-modal-box{
    background:var(--ui-surface) !important;
    border-color:var(--ui-border) !important;
    box-shadow:0 4px 18px rgba(0,0,0,.20) !important;
}
html[data-theme="dark"] .camera-info,
html[data-theme="dark"] .admin-stream-settings{
    background:var(--ui-surface) !important;
    border-color:var(--ui-border) !important;
}
html[data-theme="dark"] .video,
html[data-theme="dark"] .offline,
html[data-theme="dark"] .error-header-icon{
    background:var(--ui-video) !important;
}
html[data-theme="dark"] .title,
html[data-theme="dark"] .camera-name,
html[data-theme="dark"] .recorded-video-title,
html[data-theme="dark"] .admin-login-title,
html[data-theme="dark"] .youtube-error-modal-title,
html[data-theme="dark"] .error-page-title,
html[data-theme="dark"] .error-page-contact a{
    color:var(--ui-text) !important;
}
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .footer a,
html[data-theme="dark"] .footer-auth-link,
html[data-theme="dark"] .offline-text,
html[data-theme="dark"] .admin-setting-label,
html[data-theme="dark"] .admin-settings-status,
html[data-theme="dark"] .admin-login-text,
html[data-theme="dark"] .youtube-error-modal-message,
html[data-theme="dark"] .error-page-message,
html[data-theme="dark"] .error-page-contact{
    color:var(--ui-secondary) !important;
}
html[data-theme="dark"] .admin-setting-input,
html[data-theme="dark"] .admin-setting-select,
html[data-theme="dark"] .admin-setting-textarea{
    background:var(--ui-surface) !important;
    border-color:var(--ui-border) !important;
    color:var(--ui-text) !important;
}
html[data-theme="dark"] .admin-setting-input:disabled,
html[data-theme="dark"] .admin-setting-select:disabled,
html[data-theme="dark"] .camera-card.is-error .admin-setting-input:disabled,
html[data-theme="dark"] .camera-card.is-error .admin-setting-select:disabled,
html[data-theme="dark"] .admin-actions,
html[data-theme="dark"] .stream-button,
html[data-theme="dark"] .stream-button:disabled,
html[data-theme="dark"] .camera-card.is-error .stream-button:disabled,
html[data-theme="dark"] .share-action-button,
html[data-theme="dark"] .admin-cancel,
html[data-theme="dark"] .theme-toggle{
    background:var(--ui-control) !important;
    border-color:var(--ui-border) !important;
}
html[data-theme="dark"] .stream-button:not(:disabled):hover,
html[data-theme="dark"] .share-action-button:hover,
html[data-theme="dark"] .share-action-button:focus,
html[data-theme="dark"] .admin-cancel:hover,
html[data-theme="dark"] .admin-cancel:focus,
html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .theme-toggle:focus{
    background:#303236 !important;
}
html[data-theme="dark"] .status-offline,
html[data-theme="dark"] .status-error{
    background:#E4E6E8 !important;
    border-color:#E4E6E8 !important;
    color:#202124 !important;
}
html[data-theme="dark"] .admin-submit,
html[data-theme="dark"] .admin-submit:hover,
html[data-theme="dark"] .admin-submit:focus,
html[data-theme="dark"] .admin-submit:active,
html[data-theme="dark"] .admin-logout-confirm,
html[data-theme="dark"] .admin-logout-confirm:hover,
html[data-theme="dark"] .admin-logout-confirm:focus,
html[data-theme="dark"] .admin-logout-confirm:active{
    background:#E4E6E8 !important;
    border-color:#E4E6E8 !important;
    color:#202124 !important;
}
html[data-theme="dark"] .page-loader{
    background:rgba(24,25,27,.72) !important;
}


/* QR share action */
.share-action-qr{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    min-width:38px;
    padding-left:0;
    padding-right:0;
}
.share-qr-icon{
    width:18px;
    height:18px;
    display:block;
    fill:currentColor;
}
.qr-modal-box{
    width:min(340px, calc(100vw - 32px));
}
.qr-code-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:16px;
    padding:14px;
    background:#fff;
    border:1px solid var(--ui-border, #E2E5E9);
    border-radius:10px;
}
#qr-canvas{
    display:block;
    max-width:100%;
    height:auto!important;
    aspect-ratio:1/1;
}
.qr-modal-actions{
    margin-top:16px;
}
html[data-theme="dark"] .qr-code-wrap,
body.dark-mode .qr-code-wrap{
    background:#fff;
    border-color:#505050;
}


/* Compact icon-only share actions */
.share-action-icon-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    min-width:38px;
    padding-left:0!important;
    padding-right:0!important;
}
.share-action-icon{
    width:18px;
    height:18px;
    display:block;
    fill:currentColor;
}
#shareCopyLabel{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Action icon buttons — same visual system as the theme toggle */
.share-action-button.share-action-icon-button{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    flex:0 0 38px !important;
    padding:0 !important;
    border:1px solid var(--ui-border) !important;
    border-radius:10px !important;
    background:var(--ui-control) !important;
    color:var(--ui-secondary) !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:1 !important;
    box-shadow:none !important;
    text-decoration:none !important;
    transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease !important;
}
.share-action-button.share-action-icon-button:hover,
.share-action-button.share-action-icon-button:focus{
    background:var(--ui-surface) !important;
    border-color:var(--ui-border) !important;
    color:var(--ui-text) !important;
    outline:none !important;
}
.share-action-button.share-action-icon-button:active{
    transform:scale(.96) !important;
}
.share-action-button.share-action-icon-button .share-action-icon,
.share-action-button.share-action-icon-button svg{
    width:19px !important;
    height:19px !important;
    display:block !important;
    margin:0 !important;
    flex:0 0 19px !important;
}
#shareCopyLabel{
    width:19px;
    height:19px;
    display:flex;
    align-items:center;
    justify-content:center;
}
@media (max-width:700px){
    .share-action-button.share-action-icon-button{
        width:38px !important;
        height:38px !important;
        min-width:38px !important;
        min-height:38px !important;
        flex:0 0 38px !important;
        padding:0 !important;
    }
}


/* Action icons — single clean rendering, matched to theme toggle */
.share-action-button.share-action-icon-button{
    width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;
    flex:0 0 38px!important;padding:0!important;gap:0!important;line-height:0!important;
}
.share-action-icon-wrap{
    width:19px!important;height:19px!important;display:flex!important;align-items:center!important;justify-content:center!important;line-height:0!important;
}
.share-action-button.share-action-icon-button .share-action-icon{
    width:19px!important;height:19px!important;display:block!important;flex:0 0 19px!important;margin:0!important;
}
.share-action-button.share-action-icon-button .share-action-icon-line{
    fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important;
}
.share-action-button.share-action-icon-button .share-action-icon-fill{
    fill:currentColor!important;stroke:none!important;stroke-width:0!important;
}

/* =====================================================
   COURT LIVE — APPEARANCE SETTINGS / CUSTOM COLUMNS
   ===================================================== */
.appearance-toggle .appearance-icon{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.lives-grid[data-columns="1"]{grid-template-columns:minmax(0,1fr) !important;}
.lives-grid[data-columns="2"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
.lives-grid[data-columns="3"]{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
.lives-grid[data-columns="4"]{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
.lives-grid[data-columns="5"]{grid-template-columns:repeat(5,minmax(0,1fr)) !important;}
.lives-grid[data-columns="6"]{grid-template-columns:repeat(6,minmax(0,1fr)) !important;}

.appearance-modal[hidden]{display:none !important;}
.appearance-modal{
    position:fixed;
    inset:0;
    z-index:10050;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
}
.appearance-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.42);
}
.appearance-modal-box{
    position:relative;
    width:min(100%,380px);
    background:var(--ui-surface);
    border:1px solid var(--ui-border);
    border-radius:14px;
    box-shadow:0 18px 50px rgba(0,0,0,.18);
    padding:22px;
    color:var(--ui-text);
}
.appearance-modal-title{
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:20px;
    font-weight:700;
    color:var(--ui-text);
    margin-bottom:20px;
}
.appearance-setting + .appearance-setting{margin-top:20px;}
.appearance-setting-label{
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--ui-secondary);
    margin-bottom:8px;
}
.appearance-options{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}
.appearance-columns{grid-template-columns:repeat(3,minmax(0,1fr));}
.appearance-option,
.appearance-close{
    min-height:40px;
    border:1px solid var(--ui-border);
    border-radius:10px;
    background:var(--ui-control);
    color:var(--ui-secondary);
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
.appearance-option:hover,
.appearance-option:focus,
.appearance-close:hover,
.appearance-close:focus{
    background:var(--ui-surface);
    color:var(--ui-text);
    outline:none;
}
.appearance-option:active,
.appearance-close:active{transform:scale(.98);}
.appearance-option.is-active{
    background:var(--ui-text);
    border-color:var(--ui-text);
    color:var(--ui-surface);
}
.appearance-modal-actions{
    display:flex;
    justify-content:flex-end;
    margin-top:22px;
}
.appearance-close{padding:0 16px;}
body.appearance-modal-open{overflow:hidden;}

html[data-theme="dark"] .appearance-modal-box{
    background:var(--ui-surface);
    border-color:var(--ui-border);
}
html[data-theme="dark"] .appearance-option,
html[data-theme="dark"] .appearance-close{
    background:var(--ui-control);
    border-color:var(--ui-border);
    color:var(--ui-secondary);
}
html[data-theme="dark"] .appearance-option:hover,
html[data-theme="dark"] .appearance-option:focus,
html[data-theme="dark"] .appearance-close:hover,
html[data-theme="dark"] .appearance-close:focus{
    background:var(--ui-surface);
    color:var(--ui-text);
}
html[data-theme="dark"] .appearance-option.is-active{
    background:var(--ui-text);
    border-color:var(--ui-text);
    color:var(--ui-surface);
}

@media (max-width:700px){
    .appearance-modal{padding:14px;}
    .appearance-modal-box{padding:20px;border-radius:12px;}
    /* Mobile defaults to one column only when no preference has been saved.
       A saved 2/3/4/5/6-column choice remains fully respected. */
    .lives-grid[data-columns="1"]{grid-template-columns:minmax(0,1fr) !important;}
    .lives-grid[data-columns="2"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
    .lives-grid[data-columns="3"]{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
    .lives-grid[data-columns="4"]{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
    .lives-grid[data-columns="5"]{grid-template-columns:repeat(5,minmax(0,1fr)) !important;}
    .lives-grid[data-columns="6"]{grid-template-columns:repeat(6,minmax(0,1fr)) !important;}
}


/* Visibility select: keep semantic color when focused/selected in all themes */
.admin-setting-select[data-stream-setting="visibility"]:focus,
.admin-setting-select[data-stream-setting="visibility"]:active{
    outline:none !important;
    box-shadow:none !important;
}
.admin-setting-select[data-stream-setting="visibility"].visibility-public,
.admin-setting-select[data-stream-setting="visibility"].visibility-public:focus,
.admin-setting-select[data-stream-setting="visibility"].visibility-public:active{
    background:rgba(37,211,102,.10) !important;
    color:#25D366 !important;
    border-color:#25D366 !important;
}
.admin-setting-select[data-stream-setting="visibility"].visibility-unlisted,
.admin-setting-select[data-stream-setting="visibility"].visibility-unlisted:focus,
.admin-setting-select[data-stream-setting="visibility"].visibility-unlisted:active{
    background:rgba(255,178,0,.10) !important;
    color:#FFB200 !important;
    border-color:#FFB200 !important;
}
.admin-setting-select[data-stream-setting="visibility"].visibility-private,
.admin-setting-select[data-stream-setting="visibility"].visibility-private:focus,
.admin-setting-select[data-stream-setting="visibility"].visibility-private:active{
    background:rgba(59,59,59,.10) !important;
    color:#303030 !important;
    border-color:#303030 !important;
}
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-public,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-public:focus,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-public:active{
    background:rgba(37,211,102,.14) !important;
    color:#25D366 !important;
    border-color:#25D366 !important;
}
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-unlisted,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-unlisted:focus,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-unlisted:active{
    background:rgba(255,178,0,.14) !important;
    color:#FFB200 !important;
    border-color:#FFB200 !important;
}
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-private,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-private:focus,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-private:active{
    background:rgba(255,255,255,.06) !important;
    color:#D7DBE0 !important;
    border-color:#7C8087 !important;
}


/* =========================================================
   COURT LIVE — ICON STATES + LIGHTER CONTROLS
   ========================================================= */

/* Dark empty video area with white text/icons */
.video{
    background:#303030 !important;
}
.offline,
.video-wrap:not(.is-live),
.stream-empty,
.stream-placeholder{
    background:#303030 !important;
    color:#FFFFFF !important;
}
.state-icon{
    display:flex !important;
    width:36px !important;
    height:36px !important;
    align-items:center !important;
    justify-content:center !important;
    color:#FFFFFF !important;
}
.state-icon svg{
    width:36px !important;
    height:36px !important;
    display:block !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.9 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}
.state-icon-loading svg,
.state-icon-starting svg{
    animation:cl-spin 1s linear infinite;
}
@keyframes cl-spin{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}
.offline{
    gap:10px !important;
    padding:16px !important;
}
.offline-text{
    color:#FFFFFF !important;
    font-size:15px !important;
    font-weight:700 !important;
    text-align:center !important;
}
.offline-subtext{
    color:rgba(255,255,255,.78) !important;
    font-size:12px !important;
    line-height:1.3 !important;
    text-align:center !important;
    margin-top:-2px !important;
}

/* Grey settings box */
.admin-stream-settings{
    background:#F5F6F8 !important;
    border-top:1px solid #E2E5E9 !important;
}
.admin-settings-inline{
    grid-template-columns:110px minmax(0,1fr) !important;
    gap:8px !important;
    align-items:center !important;
}
.admin-setting-select[data-stream-setting="visibility"]{
    width:110px !important;
    min-width:110px !important;
    max-width:110px !important;
    justify-self:start !important;
}

/* White play / stop buttons */
.admin-actions{
    background:#F5F6F8 !important;
    border-top:1px solid #E2E5E9 !important;
}
.stream-button,
.stream-button:disabled,
.camera-card.is-error .stream-button:disabled,
html[data-theme="dark"] .stream-button,
html[data-theme="dark"] .stream-button:disabled,
html[data-theme="dark"] .camera-card.is-error .stream-button:disabled{
    background:#FFFFFF !important;
    border-color:#E2E5E9 !important;
}
.stream-button:hover,
.stream-button:focus,
html[data-theme="dark"] .stream-button:hover,
html[data-theme="dark"] .stream-button:focus{
    background:#FFFFFF !important;
}
.stream-button,
.stream-button:disabled,
.stream-button .stream-icon,
.stream-button:disabled .stream-icon,
html[data-theme="dark"] .stream-button,
html[data-theme="dark"] .stream-button .stream-icon{
    color:#303030 !important;
}
.camera-card.is-online .stream-start:not(:disabled),
html[data-theme="dark"] .camera-card.is-online .stream-start:not(:disabled){
    color:#25D366 !important;
}
.camera-card.is-live .stream-stop:not(:disabled),
html[data-theme="dark"] .camera-card.is-live .stream-stop:not(:disabled){
    color:#FF0000 !important;
}

/* Keep visibility semantic colors in both themes, no dark focus ring */
.admin-setting-select[data-stream-setting="visibility"]:focus,
.admin-setting-select[data-stream-setting="visibility"]:active{
    outline:none !important;
    box-shadow:none !important;
}
html[data-theme="dark"] .admin-stream-settings{
    background:#2A2C30 !important;
    border-top-color:#3A3D43 !important;
}
html[data-theme="dark"] .admin-actions{
    background:#2A2C30 !important;
    border-top-color:#3A3D43 !important;
}
html[data-theme="dark"] .video,
html[data-theme="dark"] .offline,
html[data-theme="dark"] .video-wrap:not(.is-live),
html[data-theme="dark"] .stream-empty,
html[data-theme="dark"] .stream-placeholder{
    background:#303030 !important;
}
html[data-theme="dark"] .offline-text,
html[data-theme="dark"] .offline-subtext,
html[data-theme="dark"] .state-icon{
    color:#FFFFFF !important;
}

@media (max-width:700px){
    .admin-settings-inline{
        grid-template-columns:100px minmax(0,1fr) !important;
        gap:7px !important;
    }
    .admin-setting-select[data-stream-setting="visibility"]{
        width:100px !important;
        min-width:100px !important;
        max-width:100px !important;
    }
}


/* =========================================================
   COURT LIVE — ACTION ICONS / SETTINGS / FOOTER SPACING
   ========================================================= */

/* Shared-view open button on cards */
.copy-live-link{
    width:30px !important;
    height:30px !important;
    border-radius:8px !important;
    background:#303030 !important;
    color:#FFFFFF !important;
    transition:background .16s ease,color .16s ease,transform .16s ease !important;
}
.copy-live-link svg{
    width:15px !important;
    height:15px !important;
    fill:currentColor !important;
}
.copy-live-link:hover,
.copy-live-link:focus{
    background:#4A4A4A !important;
    color:#FFFFFF !important;
}
.copy-live-link:active,
.copy-live-link.is-opening,
.copy-live-link.is-copied{
    background:#F5F6F8 !important;
    color:#303030 !important;
}

/* New appearance/settings icon with more breathing room */
.appearance-toggle .appearance-icon{
    width:18px !important;
    height:18px !important;
}
.appearance-toggle .appearance-icon path,
.appearance-toggle .appearance-icon circle{
    stroke:currentColor !important;
    fill:none !important;
    stroke-width:1.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}

/* Bottom actions above footer: more vertical breathing room */
.share-actions-section{
    padding:14px 12px 16px !important;
}
.share-actions-inner{
    gap:10px !important;
}
.share-action-button.share-action-icon-button{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    flex:0 0 40px !important;
    border-radius:10px !important;
}
.share-action-button.share-action-icon-button .share-action-icon,
.share-action-button.share-action-icon-button svg,
.share-action-icon-wrap{
    width:18px !important;
    height:18px !important;
    flex:0 0 18px !important;
}
.share-action-button.share-action-icon-button.is-loading,
.share-action-button.share-action-icon-button:active{
    background:#FFFFFF !important;
    color:#303030 !important;
}

@media (max-width:700px){
    .share-actions-section{
        padding:14px 10px 16px !important;
    }
    .share-action-button.share-action-icon-button{
        width:40px !important;
        height:40px !important;
        min-width:40px !important;
        min-height:40px !important;
        flex:0 0 40px !important;
    }
}


/* =========================================================
   COURT LIVE — COERÊNCIA FINAL / ELLIPSIS
   ========================================================= */

:root{
    --ui-surface:#FFFFFF;
    --ui-video:#303030;
    --ui-control:#F5F6F8;
    --ui-border:#E2E5E9;
    --ui-text:#303030;
    --ui-secondary:#7C8087;
    --ui-muted:#9AA0A6;
}
html[data-theme="dark"]{
    --ui-surface:#202124;
    --ui-video:#303030;
    --ui-control:#2A2C2F;
    --ui-border:#35383C;
    --ui-text:#F5F6F8;
    --ui-secondary:#C2C7CF;
    --ui-muted:#9FA4AC;
}

/* Keep greys coherent across layout */
.content,
.error-page-body{
    background:#F5F6F8 !important;
}
.camera-card,
.shared-video-grid .camera-card,
.error-page-card,
.admin-login-box,
.youtube-error-modal-box{
    background:var(--ui-surface) !important;
    border-color:var(--ui-border) !important;
}
.camera-info,
.admin-stream-settings,
.admin-actions,
.share-actions-section{
    border-color:var(--ui-border) !important;
}
.camera-info{
    background:var(--ui-surface) !important;
}
.admin-stream-settings,
.admin-actions{
    background:var(--ui-control) !important;
}
html[data-theme="dark"] .content,
html[data-theme="dark"] .error-page-body{
    background:#181A1B !important;
}
html[data-theme="dark"] .camera-card,
html[data-theme="dark"] .shared-video-grid .camera-card,
html[data-theme="dark"] .error-page-card,
html[data-theme="dark"] .admin-login-box,
html[data-theme="dark"] .youtube-error-modal-box{
    background:var(--ui-surface) !important;
    border-color:var(--ui-border) !important;
}
html[data-theme="dark"] .camera-info,
html[data-theme="dark"] .admin-stream-settings,
html[data-theme="dark"] .admin-actions,
html[data-theme="dark"] .share-actions-section{
    background:var(--ui-control) !important;
    border-color:var(--ui-border) !important;
}

/* Bottom action buttons: uniform size/alignment */
.share-actions-inner{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
}
.share-action-button.share-action-icon-button,
.share-action-button.error-page-button,
.theme-toggle.appearance-toggle{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:10px !important;
    box-sizing:border-box !important;
}
.share-action-button.share-action-icon-button{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    flex:0 0 40px !important;
    padding:0 !important;
}
.share-action-button.share-action-icon-button svg,
.share-action-icon-wrap{
    width:18px !important;
    height:18px !important;
    flex:0 0 18px !important;
}
@media (max-width:700px){
    .share-actions-inner{
        gap:10px !important;
    }
    .share-action-button.share-action-icon-button{
        width:40px !important;
        height:40px !important;
        min-width:40px !important;
        min-height:40px !important;
        flex:0 0 40px !important;
    }
}

/* Card open button */
.copy-live-link,
html[data-theme="dark"] .copy-live-link{
    background:#303030 !important;
    color:#FFFFFF !important;
    border:1px solid #303030 !important;
}
.copy-live-link:hover,
.copy-live-link:focus,
html[data-theme="dark"] .copy-live-link:hover,
html[data-theme="dark"] .copy-live-link:focus{
    background:#4A4A4A !important;
    color:#FFFFFF !important;
    border-color:#4A4A4A !important;
}
.copy-live-link:active,
.copy-live-link.is-opening,
html[data-theme="dark"] .copy-live-link:active,
html[data-theme="dark"] .copy-live-link.is-opening{
    background:#F5F6F8 !important;
    color:#303030 !important;
    border-color:#E2E5E9 !important;
}

/* Truncate titles only inside video cards, never header/footer */
.camera-card .camera-info{
    min-width:0 !important;
}
.camera-card .camera-name.camera-link,
.camera-card .camera-name.recorded-video-title,
.camera-card .recorded-video-title{
    min-width:0 !important;
    flex:1 1 auto !important;
}
.camera-card .camera-name.camera-link{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    overflow:hidden !important;
}
.camera-card .camera-name-text,
.camera-card .recorded-video-title{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}
.camera-card .open-icon{
    flex:0 0 auto !important;
}
.camera-card .camera-status-actions{
    flex:0 0 auto !important;
}

/* Header / footer titles keep normal behavior */
.header .title,
.footer,
.footer a,
.header .subtitle{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
}

/* Footer actions slightly roomier vertically */
.share-actions-section{
    padding:14px 12px 16px !important;
}


/* =========================================================
   COURT LIVE — FUNDOS BRANCOS + BOTÕES + ESPAÇAMENTO
   ========================================================= */

/* Light mode: card/video area clean white */
.video,
.offline,
.video-wrap:not(.is-live),
.stream-empty,
.stream-placeholder{
    background:#FFFFFF !important;
    color:#303030 !important;
}
.state-icon,
.offline-text{
    color:#303030 !important;
}
.offline-subtext{
    color:#7C8087 !important;
}

/* Settings/title area in light grey */
.admin-stream-settings,
.admin-actions{
    background:#F5F6F8 !important;
    border-top:1px solid #E2E5E9 !important;
}

/* Start/Stop buttons: light grey by default */
.stream-button,
.stream-button:disabled,
.camera-card.is-error .stream-button:disabled{
    background:#F5F6F8 !important;
    border-color:#E2E5E9 !important;
    color:#303030 !important;
}
.stream-button .stream-icon,
.stream-button:disabled .stream-icon{
    color:inherit !important;
}
.stream-button:hover,
.stream-button:focus{
    background:#EEF1F4 !important;
    border-color:#D8DDE3 !important;
}

/* Preserve semantic actions exactly as requested */
.camera-card.is-online .stream-start:not(:disabled){
    color:#25D366 !important;
}
.camera-card.is-live .stream-stop:not(:disabled){
    color:#FF0000 !important;
}
.camera-card.is-online .stream-start:not(:disabled) .stream-icon,
.camera-card.is-live .stream-stop:not(:disabled) .stream-icon{
    color:inherit !important;
}

/* Bottom buttons: perfectly centered, same gap relation */
.share-actions-section{
    padding:10px 12px !important;
}
.share-actions-inner{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
}
.share-action-button.share-action-icon-button{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    flex:0 0 40px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    line-height:1 !important;
    vertical-align:middle !important;
}
.share-action-button.share-action-icon-button svg,
.share-action-icon-wrap{
    width:18px !important;
    height:18px !important;
    display:block !important;
    flex:0 0 18px !important;
}

/* Dark mode keeps dark appearance */
html[data-theme="dark"] .video,
html[data-theme="dark"] .offline,
html[data-theme="dark"] .video-wrap:not(.is-live),
html[data-theme="dark"] .stream-empty,
html[data-theme="dark"] .stream-placeholder{
    background:#303030 !important;
    color:#FFFFFF !important;
}
html[data-theme="dark"] .state-icon,
html[data-theme="dark"] .offline-text,
html[data-theme="dark"] .offline-subtext{
    color:#FFFFFF !important;
}
html[data-theme="dark"] .offline-subtext{
    color:#C2C7CF !important;
}
html[data-theme="dark"] .admin-stream-settings,
html[data-theme="dark"] .admin-actions,
html[data-theme="dark"] .share-actions-section{
    background:#2A2C2F !important;
    border-top-color:#35383C !important;
}
html[data-theme="dark"] .stream-button,
html[data-theme="dark"] .stream-button:disabled,
html[data-theme="dark"] .camera-card.is-error .stream-button:disabled{
    background:#3A3D42 !important;
    border-color:#4A4E55 !important;
    color:#F5F6F8 !important;
}
html[data-theme="dark"] .stream-button:hover,
html[data-theme="dark"] .stream-button:focus{
    background:#44484F !important;
    border-color:#585D66 !important;
}
html[data-theme="dark"] .camera-card.is-online .stream-start:not(:disabled){
    color:#25D366 !important;
}
html[data-theme="dark"] .camera-card.is-live .stream-stop:not(:disabled){
    color:#FF0000 !important;
}
html[data-theme="dark"] .camera-card.is-online .stream-start:not(:disabled) .stream-icon,
html[data-theme="dark"] .camera-card.is-live .stream-stop:not(:disabled) .stream-icon{
    color:inherit !important;
}

@media (max-width:700px){
    .share-actions-section{
        padding:10px !important;
    }
    .share-actions-inner{
        gap:10px !important;
    }
}


/* =========================================================
   COURT LIVE — OPEN VIDEO HOVER + RECORDED TITLE WRAP
   ========================================================= */

/* Open-video button: dark by default, light on hover/focus/click */
.copy-live-link,
html[data-theme="dark"] .copy-live-link{
    background:#303030 !important;
    color:#FFFFFF !important;
    border:1px solid #303030 !important;
}
.copy-live-link:hover,
.copy-live-link:focus,
.copy-live-link:active,
.copy-live-link.is-opening,
html[data-theme="dark"] .copy-live-link:hover,
html[data-theme="dark"] .copy-live-link:focus,
html[data-theme="dark"] .copy-live-link:active,
html[data-theme="dark"] .copy-live-link.is-opening{
    background:#F5F6F8 !important;
    color:#303030 !important;
    border-color:#E2E5E9 !important;
}

/* Recorded video page: title may wrap to multiple lines, never ellipsis */
.shared-video-grid .recorded-video-info,
.shared-video-grid .recorded-video-title{
    min-width:0 !important;
}
.shared-video-grid .recorded-video-title{
    display:block !important;
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    line-height:1.3 !important;
}


/* =========================================================
   COURT LIVE — BARRA SUPERIOR / FUNDO BRANCO / VISIBILIDADE SUAVE
   ========================================================= */
.header-actions-placeholder{width:40px !important;min-width:40px !important;height:40px !important;opacity:0 !important;pointer-events:none !important;}
.share-actions-top{margin:0 !important;background:#FFFFFF !important;border-top:none !important;border-bottom:1px solid #E2E5E9 !important;padding:10px 22px !important;}
.share-actions-top .share-actions-inner{width:100% !important;max-width:1920px !important;margin:0 auto !important;display:flex !important;align-items:center !important;justify-content:center !important;gap:10px !important;}
.share-action-button.share-action-icon-button,.theme-toggle.appearance-toggle,.copy-live-link{width:40px !important;height:40px !important;min-width:40px !important;min-height:40px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;padding:0 !important;border-radius:10px !important;background:#FFFFFF !important;color:#5F6368 !important;border:1px solid #D7DBE0 !important;box-shadow:none !important;transition:none !important;}
.share-action-button.share-action-icon-button svg,.theme-toggle.appearance-toggle svg,.copy-live-link svg,.share-action-icon-wrap{width:18px !important;height:18px !important;display:block !important;flex:0 0 18px !important;}
.share-action-button.share-action-icon-button:hover,.share-action-button.share-action-icon-button:focus,.share-action-button.share-action-icon-button:active,.theme-toggle.appearance-toggle:hover,.theme-toggle.appearance-toggle:focus,.theme-toggle.appearance-toggle:active,.copy-live-link:hover,.copy-live-link:focus,.copy-live-link:active{background:#FFFFFF !important;color:#5F6368 !important;border-color:#D7DBE0 !important;transform:none !important;box-shadow:none !important;outline:none !important;}
.copy-live-link.is-opening,.share-action-button.share-action-icon-button.is-loading{background:#FFFFFF !important;color:#5F6368 !important;border-color:#D7DBE0 !important;}
.copy-live-link[hidden]{display:none !important;}
.camera-status-actions .copy-live-link{order:2 !important;}
.content{background:#F5F6F8 !important;}
.camera-card,.camera-info,.video,.offline,.admin-stream-settings,.admin-actions{background:#FFFFFF !important;}
.video,.offline,.state-icon,.offline-text{color:#303030 !important;}
.offline-subtext{color:#7C8087 !important;}
.admin-stream-settings,.admin-actions,.camera-info,.share-actions-top{border-color:#E2E5E9 !important;}
.stream-button,.stream-button:disabled,.camera-card.is-error .stream-button:disabled{background:#F5F6F8 !important;color:#303030 !important;border-color:#E2E5E9 !important;transition:none !important;}
.stream-button:hover,.stream-button:focus,.stream-button:active,html[data-theme="dark"] .stream-button:hover,html[data-theme="dark"] .stream-button:focus,html[data-theme="dark"] .stream-button:active{transform:none !important;box-shadow:none !important;outline:none !important;}
.stream-button:hover,.stream-button:focus,.stream-button:active{background:#F5F6F8 !important;color:#303030 !important;border-color:#E2E5E9 !important;}
.camera-card.is-online .stream-start:not(:disabled),.camera-card.is-online .stream-start:not(:disabled):hover,.camera-card.is-online .stream-start:not(:disabled):focus{color:#25D366 !important;}
.camera-card.is-live .stream-stop:not(:disabled),.camera-card.is-live .stream-stop:not(:disabled):hover,.camera-card.is-live .stream-stop:not(:disabled):focus{color:#FF0000 !important;}
.camera-card.is-online .stream-start:not(:disabled) .stream-icon,.camera-card.is-live .stream-stop:not(:disabled) .stream-icon{color:inherit !important;}
.admin-setting-select[data-stream-setting="visibility"]{background:#FFFFFF !important;}
.admin-setting-select[data-stream-setting="visibility"].visibility-public,.admin-setting-select[data-stream-setting="visibility"].visibility-public:focus,.admin-setting-select[data-stream-setting="visibility"].visibility-public:active{background:#FFFFFF !important;color:#303030 !important;border-color:#D7DBE0 !important;font-weight:600 !important;}
.admin-setting-select[data-stream-setting="visibility"].visibility-unlisted,.admin-setting-select[data-stream-setting="visibility"].visibility-unlisted:focus,.admin-setting-select[data-stream-setting="visibility"].visibility-unlisted:active{background:rgba(255,178,0,.10) !important;color:rgba(255,178,0,.58) !important;border-color:rgba(255,178,0,.58) !important;font-weight:700 !important;}
.admin-setting-select[data-stream-setting="visibility"].visibility-private,.admin-setting-select[data-stream-setting="visibility"].visibility-private:focus,.admin-setting-select[data-stream-setting="visibility"].visibility-private:active{background:rgba(59,59,59,.10) !important;color:rgba(59,59,59,.58) !important;border-color:rgba(59,59,59,.58) !important;font-weight:700 !important;}
.shared-video-grid .recorded-video-title{display:block !important;overflow:visible !important;text-overflow:clip !important;white-space:normal !important;overflow-wrap:anywhere !important;line-height:1.3 !important;}
html[data-theme="dark"] .content{background:#181A1B !important;}
html[data-theme="dark"] .share-actions-top,html[data-theme="dark"] .camera-card,html[data-theme="dark"] .camera-info,html[data-theme="dark"] .admin-stream-settings,html[data-theme="dark"] .admin-actions{background:#202124 !important;border-color:#35383C !important;}
html[data-theme="dark"] .video,html[data-theme="dark"] .offline{background:#202124 !important;color:#F5F6F8 !important;}
html[data-theme="dark"] .state-icon,html[data-theme="dark"] .offline-text{color:#F5F6F8 !important;}
html[data-theme="dark"] .offline-subtext{color:#C2C7CF !important;}
html[data-theme="dark"] .share-action-button.share-action-icon-button,html[data-theme="dark"] .theme-toggle.appearance-toggle,html[data-theme="dark"] .copy-live-link{background:#202124 !important;color:#C2C7CF !important;border-color:#4A4E55 !important;}
html[data-theme="dark"] .share-action-button.share-action-icon-button:hover,html[data-theme="dark"] .share-action-button.share-action-icon-button:focus,html[data-theme="dark"] .share-action-button.share-action-icon-button:active,html[data-theme="dark"] .theme-toggle.appearance-toggle:hover,html[data-theme="dark"] .theme-toggle.appearance-toggle:focus,html[data-theme="dark"] .theme-toggle.appearance-toggle:active,html[data-theme="dark"] .copy-live-link:hover,html[data-theme="dark"] .copy-live-link:focus,html[data-theme="dark"] .copy-live-link:active,html[data-theme="dark"] .copy-live-link.is-opening,html[data-theme="dark"] .share-action-button.share-action-icon-button.is-loading{background:#202124 !important;color:#C2C7CF !important;border-color:#4A4E55 !important;}
html[data-theme="dark"] .stream-button,html[data-theme="dark"] .stream-button:disabled,html[data-theme="dark"] .camera-card.is-error .stream-button:disabled{background:#2A2C2F !important;color:#F5F6F8 !important;border-color:#4A4E55 !important;}
html[data-theme="dark"] .stream-button:hover,html[data-theme="dark"] .stream-button:focus,html[data-theme="dark"] .stream-button:active{background:#2A2C2F !important;color:#F5F6F8 !important;border-color:#4A4E55 !important;}
html[data-theme="dark"] .camera-card.is-online .stream-start:not(:disabled),html[data-theme="dark"] .camera-card.is-online .stream-start:not(:disabled):hover,html[data-theme="dark"] .camera-card.is-online .stream-start:not(:disabled):focus{color:#25D366 !important;}
html[data-theme="dark"] .camera-card.is-live .stream-stop:not(:disabled),html[data-theme="dark"] .camera-card.is-live .stream-stop:not(:disabled):hover,html[data-theme="dark"] .camera-card.is-live .stream-stop:not(:disabled):focus{color:#FF0000 !important;}
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-public,html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-public:focus,html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-public:active{background:#202124 !important;color:#F5F6F8 !important;border-color:#4A4E55 !important;}
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-unlisted,html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-unlisted:focus,html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-unlisted:active{background:rgba(255,178,0,.10) !important;color:rgba(255,178,0,.72) !important;border-color:rgba(255,178,0,.72) !important;}
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-private,html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-private:focus,html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-private:active{background:rgba(245,246,248,.10) !important;color:rgba(245,246,248,.72) !important;border-color:rgba(245,246,248,.55) !important;}
@media (max-width:700px){.share-actions-top{padding:10px !important;}.share-actions-top .share-actions-inner{gap:10px !important;}}


/* =========================================================
   COURT LIVE — AJUSTES FINAIS BARRA / CAMPO / VISIBILIDADE
   ========================================================= */

/* Clean, centered settings gear */
.settings-gear-icon{
    width:18px !important;
    height:18px !important;
    display:block !important;
    fill:currentColor !important;
    stroke:none !important;
}
.settings-gear-icon path{
    fill:currentColor !important;
    stroke:none !important;
}

/* Only the actual court name + arrow is clickable; do not stretch the link. */
.camera-card .camera-name.camera-link{
    flex:0 1 auto !important;
    width:fit-content !important;
    max-width:calc(100% - 110px) !important;
    align-self:center !important;
}
.camera-card .camera-name.camera-link .camera-name-text{
    flex:0 1 auto !important;
    width:auto !important;
    max-width:100% !important;
}
.camera-card .camera-status-actions{
    margin-left:auto !important;
}

/* Visibility: Public / Hidden / Private all use the same neutral select style. */
.admin-setting-select[data-stream-setting="visibility"],
.admin-setting-select[data-stream-setting="visibility"].visibility-public,
.admin-setting-select[data-stream-setting="visibility"].visibility-unlisted,
.admin-setting-select[data-stream-setting="visibility"].visibility-private,
.admin-setting-select[data-stream-setting="visibility"].visibility-public:focus,
.admin-setting-select[data-stream-setting="visibility"].visibility-unlisted:focus,
.admin-setting-select[data-stream-setting="visibility"].visibility-private:focus,
.admin-setting-select[data-stream-setting="visibility"].visibility-public:active,
.admin-setting-select[data-stream-setting="visibility"].visibility-unlisted:active,
.admin-setting-select[data-stream-setting="visibility"].visibility-private:active{
    appearance:auto !important;
    -webkit-appearance:auto !important;
    -moz-appearance:auto !important;
    background:#FFFFFF !important;
    background-image:none !important;
    color:#303030 !important;
    border-color:#D7DBE0 !important;
    font-weight:400 !important;
    padding-right:8px !important;
}
.admin-setting-select[data-stream-setting="visibility"] option{
    background:#FFFFFF !important;
    color:#303030 !important;
    font-weight:400 !important;
}

/* The admin settings/actions strips are white. */
.admin-stream-settings,
.admin-actions{
    background:#FFFFFF !important;
}

/* The eye button beside LIVE matches the LIVE badge height, not toolbar buttons. */
.camera-status-actions .copy-live-link,
html[data-theme="dark"] .camera-status-actions .copy-live-link{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    min-height:28px !important;
    flex:0 0 28px !important;
    border-radius:6px !important;
    padding:0 !important;
}
.camera-status-actions .copy-live-link svg,
html[data-theme="dark"] .camera-status-actions .copy-live-link svg{
    width:15px !important;
    height:15px !important;
    flex:0 0 15px !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}

/* Dark mode: same neutral visibility styling, with the native arrow. */
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"],
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-public,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-unlisted,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-private,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-public:focus,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-unlisted:focus,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-private:focus,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-public:active,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-unlisted:active,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-private:active{
    appearance:auto !important;
    -webkit-appearance:auto !important;
    -moz-appearance:auto !important;
    background:#202124 !important;
    background-image:none !important;
    color:#F5F6F8 !important;
    border-color:#4A4E55 !important;
    font-weight:400 !important;
}
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"] option{
    background:#202124 !important;
    color:#F5F6F8 !important;
    font-weight:400 !important;
}
html[data-theme="dark"] .admin-stream-settings,
html[data-theme="dark"] .admin-actions{
    background:#202124 !important;
}


/* =========================================================
   COURT LIVE — HEADER CINZA CLARO + START/STOP BRANCOS
   ========================================================= */
.header{
    background:#F5F6F8 !important;
}
.stream-button,
.stream-button:disabled,
.camera-card.is-error .stream-button:disabled,
.stream-button:hover,
.stream-button:focus,
.stream-button:active{
    background:#FFFFFF !important;
    border-color:#E2E5E9 !important;
}
.camera-card.is-online .stream-start:not(:disabled),
.camera-card.is-online .stream-start:not(:disabled):hover,
.camera-card.is-online .stream-start:not(:disabled):focus{
    color:#25D366 !important;
}
.camera-card.is-live .stream-stop:not(:disabled),
.camera-card.is-live .stream-stop:not(:disabled):hover,
.camera-card.is-live .stream-stop:not(:disabled):focus{
    color:#FF0000 !important;
}
html[data-theme="dark"] .header{
    background:#202124 !important;
}
html[data-theme="dark"] .stream-button,
html[data-theme="dark"] .stream-button:disabled,
html[data-theme="dark"] .camera-card.is-error .stream-button:disabled,
html[data-theme="dark"] .stream-button:hover,
html[data-theme="dark"] .stream-button:focus,
html[data-theme="dark"] .stream-button:active{
    background:#202124 !important;
    border-color:#4A4E55 !important;
}


/* =========================================================
   COURT LIVE — INPUTS IGUAIS + ÍCONES DE VISIBILIDADE
   ========================================================= */

/* Visibility and title: exactly the same height and box sizing. */
.admin-settings-inline .admin-setting-select,
.admin-settings-inline .admin-setting-input{
    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;
    box-sizing:border-box !important;
    border:1px solid #D7DBE0 !important;
    border-radius:8px !important;
    font-size:12px !important;
    line-height:20px !important;
    font-weight:400 !important;
    background-color:#FFFFFF !important;
    color:#303030 !important;
}
.admin-settings-inline .admin-setting-input{
    padding:7px 10px !important;
}

/* Custom select presentation keeps the familiar arrow while allowing a visibility icon. */
.admin-setting-select[data-stream-setting="visibility"]{
    appearance:none !important;
    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    padding:7px 30px 7px 32px !important;
    background-repeat:no-repeat !important;
    background-size:16px 16px, 12px 12px !important;
    background-position:10px 50%, calc(100% - 9px) 50% !important;
}

/* Public: eye. */
.admin-setting-select[data-stream-setting="visibility"].visibility-public{
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6368' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 4.2 6 8l3.8-3.8' fill='none' stroke='%235F6368' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Hidden: crossed-out eye. */
.admin-setting-select[data-stream-setting="visibility"].visibility-unlisted{
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6368' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 6.2A9.9 9.9 0 0 1 12 6c6 0 9.5 6 9.5 6a17 17 0 0 1-2.1 2.8M6.6 6.6C4 8.3 2.5 12 2.5 12s3.5 6 9.5 6a9.8 9.8 0 0 0 3.3-.6'/%3E%3Cpath d='M9.9 9.9A3 3 0 0 0 14.1 14.1'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 4.2 6 8l3.8-3.8' fill='none' stroke='%235F6368' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Private: neutral field, arrow only. */
.admin-setting-select[data-stream-setting="visibility"].visibility-private{
    padding-left:10px !important;
    background-size:12px 12px !important;
    background-position:calc(100% - 9px) 50% !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 4.2 6 8l3.8-3.8' fill='none' stroke='%235F6368' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Keep all three states neutral. */
.admin-setting-select[data-stream-setting="visibility"].visibility-public,
.admin-setting-select[data-stream-setting="visibility"].visibility-unlisted,
.admin-setting-select[data-stream-setting="visibility"].visibility-private,
.admin-setting-select[data-stream-setting="visibility"] option{
    color:#303030 !important;
    border-color:#D7DBE0 !important;
    font-weight:400 !important;
}

html[data-theme="dark"] .admin-settings-inline .admin-setting-select,
html[data-theme="dark"] .admin-settings-inline .admin-setting-input{
    background-color:#202124 !important;
    color:#F5F6F8 !important;
    border-color:#4A4E55 !important;
}
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-public,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-unlisted,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-private{
    color:#F5F6F8 !important;
    border-color:#4A4E55 !important;
}


/* =========================================================
   COURT LIVE — VISIBILIDADE E TITLE 50 / 50
   ========================================================= */
.admin-settings-inline{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:10px !important;
    align-items:center !important;
}
.admin-settings-inline .admin-setting-select,
.admin-settings-inline .admin-setting-input{
    width:100% !important;
    min-width:0 !important;
}
@media (max-width:700px){
    .admin-settings-inline{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
        gap:10px !important;
    }
}
html[data-theme="dark"] .admin-settings-inline{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
}


/* =========================================================
   COURT LIVE — TOPBAR / SHARE MODAL / VISIBILITY FULL WIDTH
   ========================================================= */
.header-icon{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}
.admin-settings-inline{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:10px !important;
    align-items:stretch !important;
}
.admin-settings-inline .admin-setting-select,
.admin-settings-inline .admin-setting-input{
    width:100% !important;
    min-width:0 !important;
    display:block !important;
    margin:0 !important;
}
.admin-setting-select[data-stream-setting="visibility"],
.admin-setting-select[data-stream-setting="visibility"].visibility-public,
.admin-setting-select[data-stream-setting="visibility"].visibility-unlisted,
.admin-setting-select[data-stream-setting="visibility"].visibility-private,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"],
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-public,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-unlisted,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-private{
    appearance:auto !important;
    -webkit-appearance:auto !important;
    -moz-appearance:auto !important;
    background-image:none !important;
    padding:7px 10px !important;
}
.share-menu-modal[aria-hidden="true"]{display:none !important;}
.share-menu-modal.open{display:flex !important;}
.share-menu-box{max-width:420px !important;width:min(92vw,420px) !important;}
.share-menu-actions{display:grid !important;grid-template-columns:1fr !important;gap:10px !important;margin-top:14px !important;}
.share-menu-option{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
    width:100% !important;
    min-height:42px !important;
    padding:0 14px !important;
    border:1px solid #D7DBE0 !important;
    border-radius:10px !important;
    background:#FFFFFF !important;
    color:#303030 !important;
    font:inherit !important;
    cursor:pointer !important;
}
.share-menu-option .share-action-icon,
.share-menu-option .share-action-icon-wrap{
    width:18px !important;
    height:18px !important;
    flex:0 0 18px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
}
.share-menu-footer-actions{margin-top:14px !important;}
.share-action-button svg,
.share-menu-option svg{stroke-linecap:round !important;stroke-linejoin:round !important;}
html[data-theme="dark"] .share-menu-option{
    background:#202124 !important;
    color:#F5F6F8 !important;
    border-color:#4A4E55 !important;
}


/* =========================================================
   COURT LIVE — FINAL UI TIDY
   ========================================================= */
html, body, button, input, select, textarea {
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

/* Top action buttons */
.share-action-button.share-action-icon-button,
.theme-toggle.appearance-toggle,
.copy-live-link{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
}
.share-action-button.share-action-icon-button .share-action-icon,
.theme-toggle.appearance-toggle .share-action-icon,
.copy-live-link .share-action-icon,
.share-action-icon-wrap .share-action-icon,
.share-menu-option .share-action-icon{
    width:18px !important;
    height:18px !important;
    display:block !important;
    flex:0 0 18px !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}
.share-action-icon-fill{
    fill:currentColor !important;
    stroke:none !important;
}

/* Settings / title inputs */
.admin-stream-settings,
.admin-actions{
    background:#FFFFFF !important;
}
.admin-settings-inline{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:10px !important;
    align-items:stretch !important;
}
.admin-settings-inline > *{ min-width:0 !important; }
.admin-setting-select,
.admin-setting-input,
.admin-setting-textarea{
    min-height:36px !important;
    height:36px !important;
    padding:6px 10px !important;
    line-height:1.2 !important;
    margin:0 !important;
}
.admin-setting-select[data-stream-setting="visibility"],
.admin-setting-select[data-stream-setting="visibility"].visibility-public,
.admin-setting-select[data-stream-setting="visibility"].visibility-unlisted,
.admin-setting-select[data-stream-setting="visibility"].visibility-private,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"],
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-public,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-unlisted,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-private{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    justify-self:stretch !important;
    appearance:auto !important;
    -webkit-appearance:auto !important;
    -moz-appearance:auto !important;
    background:#FFFFFF !important;
    color:#303030 !important;
    border:1px solid #D7DBE0 !important;
    font-weight:400 !important;
    padding-right:28px !important;
    box-shadow:none !important;
}
.admin-setting-input{
    width:100% !important;
}

/* Popup button alignment */
.admin-login-actions,
.qr-modal-actions,
.appearance-modal-actions,
.share-menu-footer-actions{
    display:grid !important;
    gap:10px !important;
    margin-top:16px !important;
}
.admin-login-actions:has(.admin-cancel):has(.admin-submit),
.admin-login-actions:has(.admin-cancel):has(.admin-logout-confirm),
.admin-login-actions:has(.admin-cancel):has(#youtube-confirm-open),
.admin-login-actions:has(.admin-cancel):has(#stream-confirm-ok){
    grid-template-columns:1fr 1fr !important;
}
.admin-login-actions:not(:has(.admin-submit)):not(:has(.admin-logout-confirm)):not(:has(#youtube-confirm-open)):not(:has(#stream-confirm-ok)),
.qr-modal-actions,
.appearance-modal-actions,
.share-menu-footer-actions{
    grid-template-columns:1fr !important;
}
.admin-login-actions button,
.qr-modal-actions button,
.appearance-modal-actions button,
.share-menu-footer-actions button,
.share-menu-option{
    min-height:42px !important;
    border-radius:10px !important;
    font:inherit !important;
}
.admin-cancel,
.appearance-close,
#qr-modal-close,
#share-menu-close,
#error-modal-ok{
    background:#F5F6F8 !important;
    color:#303030 !important;
    border:1px solid #D7DBE0 !important;
    font-weight:500 !important;
}
.admin-submit,
.admin-logout-confirm,
#youtube-confirm-open,
#stream-confirm-ok{
    background:#303030 !important;
    color:#FFFFFF !important;
    border:1px solid #303030 !important;
    font-weight:500 !important;
}

/* Share popup options uniform */
.share-menu-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
}
.share-menu-option{
    background:#FFFFFF !important;
    color:#303030 !important;
    border:1px solid #D7DBE0 !important;
    justify-content:flex-start !important;
    padding:0 14px !important;
    gap:10px !important;
}
.share-menu-option .share-action-icon-wrap{
    width:18px !important;
    height:18px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
}

/* Keep white background for start/stop container and buttons */
.stream-button,
.stream-button:disabled,
.camera-card.is-error .stream-button:disabled,
html[data-theme="dark"] .stream-button,
html[data-theme="dark"] .stream-button:disabled,
html[data-theme="dark"] .camera-card.is-error .stream-button:disabled{
    background:#FFFFFF !important;
}

@media (max-width:700px){
    .admin-settings-inline{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
        gap:8px !important;
    }
    .admin-setting-select,
    .admin-setting-input{
        min-height:34px !important;
        height:34px !important;
        padding:5px 9px !important;
    }
}


/* =========================================================
   COURT LIVE — FINAL PATCH POPUPS / DARK MODE
   ========================================================= */

/* Ensure one clean Ubuntu font across the UI */
html, body, button, input, select, textarea { font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; }

/* Proper gear icon and consistent icon sizing */
#appearance-toggle .share-action-icon,
#openShareMenuButton .share-action-icon,
#headerUserButton .share-action-icon,
.share-menu-option .share-action-icon,
#shareCopyLabel .share-action-icon{
    width:18px !important;
    height:18px !important;
    display:block !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}
.share-menu-option .share-action-icon-wrap,
#shareCopyLabel.share-action-icon-wrap{
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    flex:0 0 18px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:0 !important;
}
.share-menu-option svg + svg{display:none !important;}

/* Settings + share close buttons should match all other close buttons */
.admin-login-actions,
.appearance-modal-actions,
.qr-modal-actions,
.share-menu-footer-actions{
    display:grid !important;
    gap:10px !important;
    margin-top:16px !important;
}
.admin-login-actions button,
.appearance-modal-actions button,
.qr-modal-actions button,
.share-menu-footer-actions button{
    min-height:42px !important;
    height:42px !important;
    border-radius:10px !important;
    font-size:14px !important;
    font-weight:500 !important;
    text-transform:none !important;
    letter-spacing:0 !important;
    padding:0 16px !important;
    transition:background-color .15s ease, border-color .15s ease, color .15s ease !important;
}
.admin-cancel,
.appearance-close,
#share-menu-close,
#qr-modal-close,
#error-modal-ok{
    background:#F5F6F8 !important;
    color:#303030 !important;
    border:1px solid #D7DBE0 !important;
}
.admin-cancel:hover,
.appearance-close:hover,
#share-menu-close:hover,
#qr-modal-close:hover,
#error-modal-ok:hover,
.admin-cancel:focus,
.appearance-close:focus,
#share-menu-close:focus,
#qr-modal-close:focus,
#error-modal-ok:focus{
    background:#FFFFFF !important;
    color:#303030 !important;
    border-color:#D7DBE0 !important;
    outline:none !important;
    box-shadow:none !important;
}
html[data-theme="dark"] .admin-cancel,
html[data-theme="dark"] .appearance-close,
html[data-theme="dark"] #share-menu-close,
html[data-theme="dark"] #qr-modal-close,
html[data-theme="dark"] #error-modal-ok{
    background:#2A2C2F !important;
    color:#F5F6F8 !important;
    border:1px solid #4A4E55 !important;
}
html[data-theme="dark"] .admin-cancel:hover,
html[data-theme="dark"] .appearance-close:hover,
html[data-theme="dark"] #share-menu-close:hover,
html[data-theme="dark"] #qr-modal-close:hover,
html[data-theme="dark"] #error-modal-ok:hover,
html[data-theme="dark"] .admin-cancel:focus,
html[data-theme="dark"] .appearance-close:focus,
html[data-theme="dark"] #share-menu-close:focus,
html[data-theme="dark"] #qr-modal-close:focus,
html[data-theme="dark"] #error-modal-ok:focus{
    background:#35383C !important;
    color:#F5F6F8 !important;
    border-color:#4A4E55 !important;
    outline:none !important;
    box-shadow:none !important;
}
.admin-submit,
.admin-logout-confirm,
#youtube-confirm-open,
#stream-confirm-ok{
    text-transform:none !important;
    letter-spacing:0 !important;
    font-size:14px !important;
    font-weight:500 !important;
}

/* Inputs: equal 50/50 with lower height */
.admin-settings-inline{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:10px !important;
    align-items:stretch !important;
}
.admin-settings-inline > .admin-setting-select,
.admin-settings-inline > .admin-setting-input{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    display:block !important;
    box-sizing:border-box !important;
}
.admin-setting-select,
.admin-setting-input,
.admin-setting-textarea{
    min-height:34px !important;
    height:34px !important;
    padding:5px 10px !important;
    line-height:1.2 !important;
}

/* Dark mode coherence */
html[data-theme="dark"] .admin-stream-settings,
html[data-theme="dark"] .admin-actions{
    background:#202124 !important;
    border-color:#35383C !important;
}
html[data-theme="dark"] .admin-setting-select,
html[data-theme="dark"] .admin-setting-input,
html[data-theme="dark"] .admin-setting-textarea,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"],
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-public,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-unlisted,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-private{
    background:#202124 !important;
    color:#F5F6F8 !important;
    border:1px solid #4A4E55 !important;
}
html[data-theme="dark"] .stream-button,
html[data-theme="dark"] .stream-button:disabled,
html[data-theme="dark"] .camera-card.is-error .stream-button:disabled{
    background:#202124 !important;
    color:#F5F6F8 !important;
    border-color:#4A4E55 !important;
}
html[data-theme="dark"] .stream-button:hover,
html[data-theme="dark"] .stream-button:focus{
    background:#202124 !important;
    color:#F5F6F8 !important;
    border-color:#4A4E55 !important;
    box-shadow:none !important;
}
html[data-theme="dark"] .camera-card.is-online .stream-start:not(:disabled){ color:#25D366 !important; }
html[data-theme="dark"] .camera-card.is-live .stream-stop:not(:disabled){ color:#FF0000 !important; }

/* QR title back to QR Code and share buttons consistent */
.share-menu-option{
    min-height:42px !important;
    border-radius:10px !important;
    font-size:14px !important;
    font-weight:400 !important;
    text-transform:none !important;
    letter-spacing:0 !important;
}


/* =========================================================
   COURT LIVE — CURRENT CONTROL SIZING
   Consolidated from superseded historical override blocks.
   ========================================================= */
.admin-stream-settings,
.admin-actions{
    background:#FFFFFF !important;
}
.admin-actions{
    border-top:1px solid #E2E5E9 !important;
}
.admin-settings-inline{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:10px !important;
    align-items:center !important;
}
.admin-settings-inline .admin-setting-select,
.admin-settings-inline .admin-setting-input{
    width:100% !important;
    min-width:0 !important;
    height:40px !important;
    min-height:40px !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
}
.stream-button,
.stream-button:disabled{
    background:#FFFFFF !important;
    border:0 !important;
    color:#9AA0A6 !important;
    transition:background .18s ease,color .18s ease !important;
}
.stream-button + .stream-button{
    border-left:1px solid #E2E5E9 !important;
}
.stream-button .stream-icon,
.stream-button:disabled .stream-icon{
    color:inherit !important;
}
.stream-button:not(:disabled):hover{
    background:#F5F6F8 !important;
}
.stream-button:not(:disabled):active{
    background:#EEF1F4 !important;
}
.camera-card.is-online .stream-start:not(:disabled){
    color:#25D366 !important;
}
.camera-card.is-live .stream-stop:not(:disabled){
    color:#FF0000 !important;
}
.qr-modal-box{
    width:min(320px, calc(100vw - 32px)) !important;
}

/* =========================================================
   FINAL OVERRIDES — visibility select, popup buttons, icons, dark mode
   ========================================================= */

/* Visibility select: remove arrows entirely and keep stable sizing on mobile */
.admin-setting-select[data-stream-setting="visibility"],
.admin-setting-select[data-stream-setting="visibility"].visibility-public,
.admin-setting-select[data-stream-setting="visibility"].visibility-unlisted,
.admin-setting-select[data-stream-setting="visibility"].visibility-private,
.admin-setting-select[data-stream-setting="visibility"]:focus,
.admin-setting-select[data-stream-setting="visibility"]:active,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"],
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-public,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-unlisted,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"].visibility-private,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"]:focus,
html[data-theme="dark"] .admin-setting-select[data-stream-setting="visibility"]:active {
    -webkit-appearance:none !important;
    appearance:none !important;
    background-image:none !important;
    padding-right:12px !important;
}
.admin-setting-select[data-stream-setting="visibility"]::-ms-expand {display:none !important;}

/* Popup button geometry: same layout, same height, no bold */
.admin-login-actions,
.share-menu-footer-actions,
.qr-modal-actions {
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    align-items:stretch !important;
}
.admin-login-actions > button,
.share-menu-footer-actions > button,
.qr-modal-actions > button,
.admin-login-actions > a,
.share-menu-footer-actions > a,
.qr-modal-actions > a {
    width:100% !important;
    min-height:42px !important;
    height:42px !important;
    margin:0 !important;
    padding:0 16px !important;
    border-radius:10px !important;
    box-sizing:border-box !important;
    font-size:14px !important;
    font-weight:500 !important;
    line-height:1 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    box-shadow:none !important;
}
.admin-login-actions > button:only-child,
.share-menu-footer-actions > button:only-child,
.qr-modal-actions > button:only-child,
.admin-login-actions > a:only-child,
.share-menu-footer-actions > a:only-child,
.qr-modal-actions > a:only-child {
    grid-column:1 / -1 !important;
    justify-self:stretch !important;
}
.popup-close-button,
button.popup-close-button,
.admin-cancel.popup-close-button,
.admin-submit.popup-close-button {
    background:#FFFFFF !important;
    border:1px solid #D7DBE0 !important;
    color:#5F6368 !important;
    font-weight:500 !important;
}
.popup-close-button:hover,
.popup-close-button:focus,
button.popup-close-button:hover,
button.popup-close-button:focus,
.admin-cancel.popup-close-button:hover,
.admin-cancel.popup-close-button:focus,
.admin-submit.popup-close-button:hover,
.admin-submit.popup-close-button:focus {
    background:#F7F8FA !important;
    border-color:#D7DBE0 !important;
    color:#5F6368 !important;
}
.admin-submit,
.admin-login-submit,
.admin-logout-confirm {
    font-weight:500 !important;
    border-radius:10px !important;
    min-height:42px !important;
    height:42px !important;
    padding:0 16px !important;
    text-transform:none !important;
}

/* QR Code: tighter white space */
.qr-code-wrap {
    padding:4px !important;
}

/* Share icons: one clean icon, same size, no duplicate rendering */
#shareCopyLabel,
.share-action-icon-wrap {
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    flex:0 0 18px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:0 !important;
    overflow:hidden !important;
}
#shareCopyLabel > svg,
.share-action-icon-wrap > svg,
#shareCopyLabel .share-action-icon,
.share-action-icon-wrap .share-action-icon {
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    max-width:18px !important;
    display:block !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}
#shareCopyLabel > svg:not(:first-child),
.share-action-icon-wrap > svg:not(:first-child) {
    display:none !important;
}
#shareCopyLabel > svg *,
.share-action-icon-wrap > svg * {
    vector-effect:non-scaling-stroke !important;
}

/* Open button icon remains a single clean SVG */
.copy-live-link .share-action-icon,
.copy-live-link svg {
    width:18px !important;
    height:18px !important;
    display:block !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}
.copy-live-link > svg:not(:first-child) {display:none !important;}

/* Dark mode coherence */
html[data-theme="dark"] {
    --cl-dark-base:#181A1B;
    --cl-dark-surface:#202124;
    --cl-dark-surface-hover:#2A2C2F;
    --cl-dark-border:#35383C;
    --cl-dark-control:#4A4E55;
    --cl-dark-text:#F5F6F8;
    --cl-dark-muted:#C2C7CF;
}
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .header,
html[data-theme="dark"] .content,
html[data-theme="dark"] .error-page-body,
html[data-theme="dark"] .header-content {
    background:var(--cl-dark-base) !important;
    color:var(--cl-dark-text) !important;
}
html[data-theme="dark"] .header-content {background-color:transparent !important;}
html[data-theme="dark"] .share-actions-top,
html[data-theme="dark"] .camera-card,
html[data-theme="dark"] .camera-info,
html[data-theme="dark"] .admin-stream-settings,
html[data-theme="dark"] .admin-actions,
html[data-theme="dark"] .share-actions-section,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .admin-login-box,
html[data-theme="dark"] .youtube-error-modal-box,
html[data-theme="dark"] .share-menu-box,
html[data-theme="dark"] .qr-modal-box,
html[data-theme="dark"] .appearance-modal-box,
html[data-theme="dark"] .error-page-card {
    background:var(--cl-dark-surface) !important;
    border-color:var(--cl-dark-border) !important;
}
html[data-theme="dark"] .admin-setting-input,
html[data-theme="dark"] .admin-setting-select,
html[data-theme="dark"] .admin-setting-textarea {
    background:var(--cl-dark-surface) !important;
    color:var(--cl-dark-text) !important;
    border-color:var(--cl-dark-control) !important;
}
html[data-theme="dark"] .share-action-button,
html[data-theme="dark"] .appearance-option,
html[data-theme="dark"] .appearance-close,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .share-menu-option {
    background:var(--cl-dark-surface) !important;
    color:var(--cl-dark-text) !important;
    border-color:var(--cl-dark-control) !important;
}
html[data-theme="dark"] .share-action-button:hover,
html[data-theme="dark"] .appearance-option:hover,
html[data-theme="dark"] .appearance-close:hover,
html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .share-menu-option:hover,
html[data-theme="dark"] .share-action-button:focus,
html[data-theme="dark"] .appearance-option:focus,
html[data-theme="dark"] .appearance-close:focus,
html[data-theme="dark"] .theme-toggle:focus,
html[data-theme="dark"] .share-menu-option:focus {
    background:var(--cl-dark-surface-hover) !important;
    color:var(--cl-dark-text) !important;
    border-color:var(--cl-dark-control) !important;
}
html[data-theme="dark"] .popup-close-button,
html[data-theme="dark"] button.popup-close-button,
html[data-theme="dark"] .admin-cancel.popup-close-button,
html[data-theme="dark"] .admin-submit.popup-close-button {
    background:var(--cl-dark-surface) !important;
    border-color:var(--cl-dark-control) !important;
    color:var(--cl-dark-text) !important;
    font-weight:500 !important;
}
html[data-theme="dark"] .popup-close-button:hover,
html[data-theme="dark"] .popup-close-button:focus,
html[data-theme="dark"] button.popup-close-button:hover,
html[data-theme="dark"] button.popup-close-button:focus,
html[data-theme="dark"] .admin-cancel.popup-close-button:hover,
html[data-theme="dark"] .admin-cancel.popup-close-button:focus,
html[data-theme="dark"] .admin-submit.popup-close-button:hover,
html[data-theme="dark"] .admin-submit.popup-close-button:focus {
    background:var(--cl-dark-surface-hover) !important;
    color:var(--cl-dark-text) !important;
    border-color:var(--cl-dark-control) !important;
}
/* Dark action buttons should be light */
html[data-theme="dark"] .stream-button,
html[data-theme="dark"] .stream-button:disabled,
html[data-theme="dark"] .camera-card.is-error .stream-button:disabled {
    background:#F5F6F8 !important;
    color:#5F6368 !important;
    border-color:#D7DBE0 !important;
}
html[data-theme="dark"] .stream-button .stream-icon,
html[data-theme="dark"] .stream-button:disabled .stream-icon,
html[data-theme="dark"] .camera-card.is-error .stream-button:disabled .stream-icon {
    color:inherit !important;
}
html[data-theme="dark"] .stream-button:not(:disabled):hover {
    background:#FFFFFF !important;
    color:#303030 !important;
}
html[data-theme="dark"] .camera-card.is-online .stream-start:not(:disabled) {color:#25D366 !important;}
html[data-theme="dark"] .camera-card.is-live .stream-stop:not(:disabled) {color:#FF0000 !important;}
html[data-theme="dark"] .camera-card.is-online .stream-start:not(:disabled) .stream-icon,
html[data-theme="dark"] .camera-card.is-live .stream-stop:not(:disabled) .stream-icon {color:inherit !important;}


/* =========================================================
   COURT LIVE — FINAL BRAND / ERROR PAGE OVERRIDES
   ========================================================= */

:root{
    --cl-green:#25D366;
    --cl-red:#FF0000;
    --cl-dark:#303030;
}

/* Larger logo in the normal header */
.header-icon .header-fallback-image{
    width:42px !important;
    height:42px !important;
    max-width:42px !important;
    max-height:42px !important;
    object-fit:contain !important;
}
.header-icon .header-club-image{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
}

/* Requested semantic colours */
.camera-card.is-online .stream-start:not(:disabled),
.camera-card.is-online .stream-start:not(:disabled) .stream-icon,
html[data-theme="dark"] .camera-card.is-online .stream-start:not(:disabled),
html[data-theme="dark"] .camera-card.is-online .stream-start:not(:disabled) .stream-icon{
    color:#25D366 !important;
}
.camera-card.is-live .stream-stop:not(:disabled),
.camera-card.is-live .stream-stop:not(:disabled) .stream-icon,
html[data-theme="dark"] .camera-card.is-live .stream-stop:not(:disabled),
html[data-theme="dark"] .camera-card.is-live .stream-stop:not(:disabled) .stream-icon{
    color:#FF0000 !important;
}
.status-live,
.status-live::before{
    border-color:#FF0000 !important;
}
.status-live{
    background:#FF0000 !important;
    color:#FFFFFF !important;
}

/* Minimal error page — intentionally light-only */
html[data-theme="dark"] .error-page-minimal,
.error-page-minimal{
    min-height:100vh !important;
    margin:0 !important;
    background:#F2F2F2 !important;
    color:#303030 !important;
}
.error-page-minimal-main{
    min-height:100vh;
    width:100%;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:#F2F2F2;
}
.error-page-minimal-card{
    width:min(100%,420px);
    box-sizing:border-box;
    padding:42px 32px;
    border-radius:14px;
    background:#FFFFFF;
    border:1px solid #E2E5E9;
    text-align:center;
}
.error-page-minimal-logo{
    width:72px;
    height:72px;
    display:block;
    object-fit:contain;
    margin:0 auto 18px;
}
.error-page-minimal-brand{
    margin:0;
    color:#303030;
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:24px;
    font-weight:500;
    line-height:1.2;
}
.error-page-minimal-message{
    margin:14px auto 0;
    max-width:340px;
    color:#6F7379;
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:14px;
    font-weight:400;
    line-height:1.55;
}
.error-page-minimal-contact{
    width:100%;
    min-height:42px;
    box-sizing:border-box;
    margin-top:24px;
    padding:0 16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#303030;
    border:1px solid #303030;
    color:#FFFFFF;
    text-decoration:none;
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:14px;
    font-weight:500;
    line-height:1;
}
.error-page-minimal-contact:hover,
.error-page-minimal-contact:focus{
    background:#3A3A3A;
    border-color:#3A3A3A;
    color:#FFFFFF;
}
@media (max-width:700px){
    .header-icon .header-fallback-image{
        width:38px !important;
        height:38px !important;
        max-width:38px !important;
        max-height:38px !important;
    }
    .error-page-minimal-main{
        padding:18px;
    }
    .error-page-minimal-card{
        padding:34px 22px;
        border-radius:12px;
    }
    .error-page-minimal-logo{
        width:64px;
        height:64px;
    }
}


/* =========================================================
   COURT LIVE — ERROR PAGE FINAL POLISH
   ========================================================= */
.error-page-minimal-logo{
    margin-bottom:8px !important;
}
.error-page-minimal-brand{
    margin-top:0 !important;
}
.error-page-minimal-message{
    margin-top:12px !important;
}
.error-page-minimal-message.is-contact{
    font-style:italic !important;
}
.error-page-minimal-contact{
    width:auto !important;
    min-width:190px !important;
    max-width:100% !important;
    margin:22px auto 0 !important;
    padding:0 18px !important;
    background:#FFFFFF !important;
    border:1px solid #D7DBE0 !important;
    color:#303030 !important;
    box-shadow:none !important;
}
.error-page-minimal-contact:hover,
.error-page-minimal-contact:focus{
    background:#F7F8FA !important;
    border-color:#C8CDD3 !important;
    color:#303030 !important;
}


/* =========================================================
   COURT LIVE — OPEN VIDEO ICON / CONTACT FINAL
   ========================================================= */
.error-page-minimal-message.is-contact{
    font-style:normal !important;
}
.copy-live-link .open-video-icon{
    width:18px !important;
    height:18px !important;
    display:block !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}
.copy-live-link > svg:not(.open-video-icon){
    display:none !important;
}


/* =========================================================
   COURT LIVE — HEADER MENU
   ========================================================= */
.header-content{
    position:relative !important;
}
.header-home-link{
    text-decoration:none !important;
    color:inherit !important;
    flex:0 0 auto !important;
}
.header-menu-wrap{
    margin-left:auto !important;
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
}
.header-menu-button{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid #D7DBE0 !important;
    border-radius:10px !important;
    background:#FFFFFF !important;
    color:#303030 !important;
    cursor:pointer !important;
    box-shadow:none !important;
}
.header-menu-button:hover,
.header-menu-button:focus{
    background:#F7F8FA !important;
    border-color:#C8CDD3 !important;
    outline:none !important;
}
.header-menu-icon{
    width:20px !important;
    height:20px !important;
    display:block !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.8 !important;
    stroke-linecap:round !important;
}
.header-menu-panel{
    position:absolute !important;
    top:calc(100% + 8px) !important;
    right:0 !important;
    width:190px !important;
    padding:0 !important;
    z-index:1000 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
}
.header-menu-panel[hidden]{
    display:none !important;
}
.header-menu-group{
    padding:6px !important;
    background:#FFFFFF !important;
    border:1px solid #D7DBE0 !important;
    border-radius:12px !important;
    box-shadow:0 12px 30px rgba(0,0,0,.10) !important;
}
.header-menu-share-group{
    margin-top:8px !important;
}
.header-menu-item{
    width:100% !important;
    min-height:42px !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    padding:0 12px !important;
    border:0 !important;
    border-radius:8px !important;
    background:transparent !important;
    color:#303030 !important;
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:14px !important;
    font-weight:400 !important;
    line-height:1 !important;
    text-align:left !important;
    text-decoration:none !important;
    cursor:pointer !important;
}
.header-menu-item:hover,
.header-menu-item:focus{
    background:#F2F2F2 !important;
    color:#303030 !important;
    outline:none !important;
}
.header-menu-item-share{
    font-weight:600 !important;
    background:#F7F8FA !important;
}
.header-menu-item-share:hover,
.header-menu-item-share:focus{
    background:#F2F2F2 !important;
}
html[data-theme="dark"] .header-menu-button{
    background:#202124 !important;
    color:#F5F6F8 !important;
    border-color:#4A4E55 !important;
}
html[data-theme="dark"] .header-menu-button:hover,
html[data-theme="dark"] .header-menu-button:focus{
    background:#2A2C2F !important;
}
html[data-theme="dark"] .header-menu-group{
    background:#202124 !important;
    border-color:#4A4E55 !important;
    box-shadow:0 12px 30px rgba(0,0,0,.28) !important;
}
html[data-theme="dark"] .header-menu-item{
    color:#F5F6F8 !important;
}
html[data-theme="dark"] .header-menu-item:hover,
html[data-theme="dark"] .header-menu-item:focus{
    background:#2A2C2F !important;
    color:#F5F6F8 !important;
}
html[data-theme="dark"] .header-menu-item-share{
    background:#2A2C2F !important;
    font-weight:600 !important;
}
html[data-theme="dark"] .header-menu-item-share:hover,
html[data-theme="dark"] .header-menu-item-share:focus{
    background:#303236 !important;
}
@media (max-width:700px){
    .header-menu-panel{
        width:min(220px, calc(100vw - 32px)) !important;
    }
}

/* =========================================================
   COURT LIVE — COMPACT HEADER + STATUS BAR
   ========================================================= */

/* Header is intentionally tighter while keeping the logo readable. */
.header{
    padding:10px 18px !important;
}
.header-content{
    min-height:44px !important;
    gap:10px !important;
}
.header-icon{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    border-radius:10px !important;
}
.header-icon .header-fallback-image{
    width:38px !important;
    height:38px !important;
    max-width:38px !important;
    max-height:38px !important;
}
.header-icon .header-club-image{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
}
.header .title{
    font-size:20px !important;
    line-height:1.15 !important;
}
.header-menu-button{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
}

/* Former quick-actions bar now contains contextual status text. */
.status-info-bar{
    min-height:42px !important;
}
.status-info-bar-inner{
    min-height:42px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}
.status-info-text{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    color:#7C8087 !important;
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:13px !important;
    font-weight:400 !important;
    line-height:1 !important;
}
.status-info-text .ui-separator{
    margin:0 6px !important;
}
html[data-theme="dark"] .status-info-text{
    color:#C2C7CF !important;
}

@media (max-width:700px){
    .header{
        padding:8px 14px !important;
    }
    .header-content{
        min-height:42px !important;
    }
    .header-icon{
        width:42px !important;
        height:42px !important;
        min-width:42px !important;
        min-height:42px !important;
    }
    .header-icon .header-fallback-image{
        width:36px !important;
        height:36px !important;
        max-width:36px !important;
        max-height:36px !important;
    }
    .header .title{
        font-size:18px !important;
    }
    .status-info-bar,
    .status-info-bar-inner{
        min-height:40px !important;
    }
}


/* =========================================================
   COURT LIVE — BAR / CARD SPACING / SHARE LABELS / ERROR BRAND
   ========================================================= */

/* Thinner contextual bar */
.status-info-bar{
    min-height:34px !important;
    padding:0 12px !important;
}
.status-info-bar-inner{
    min-height:34px !important;
}
.status-info-text{
    font-size:13px !important;
    line-height:1.2 !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

/* Slightly more breathing room around video cards on both pages */
.content{
    padding:26px !important;
}
.lives-grid{
    gap:22px !important;
}
.shared-video-wrap{
    padding:2px !important;
}

/* Error-page Court Live name uses the same typography as the club name in the header. */
.error-page-minimal-brand{
    font-size:20px !important;
    font-weight:700 !important;
    line-height:1.15 !important;
    color:#303030 !important;
}
html[data-theme="dark"] .error-page-minimal-brand{
    color:#303030 !important;
}

@media (max-width:700px){
    .status-info-bar,
    .status-info-bar-inner{
        min-height:32px !important;
    }
    .status-info-bar{
        padding:0 10px !important;
    }
    .content{
        padding:18px !important;
    }
    .lives-grid{
        gap:18px !important;
    }
    .error-page-minimal-brand{
        font-size:18px !important;
    }
}


/* =========================================================
   COURT LIVE — MENU RIGHT ALIGNMENT WITH VIDEO CARDS
   ========================================================= */

/* Match the menu button right edge with the cards/content right edge. */
.header{
    padding-right:26px !important;
}
@media (max-width:700px){
    .header{
        padding-right:18px !important;
    }
}


/* =========================================================
   COURT LIVE — ERROR PAGE BRAND SIZE
   ========================================================= */
.error-page-minimal-brand{
    font-size:22px !important;
}
@media (max-width:700px){
    .error-page-minimal-brand{
        font-size:20px !important;
    }
}


/* =========================================================
   COURT LIVE — SHARE ICONS FINAL NORMALIZATION
   ========================================================= */
.share-menu-option .share-action-icon-wrap,
#shareCopyLabel{
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    max-width:20px !important;
    flex:0 0 20px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:0 !important;
    overflow:hidden !important;
}
.share-menu-option .share-menu-icon,
#shareCopyLabel .share-menu-icon{
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    max-width:20px !important;
    display:block !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
    vector-effect:non-scaling-stroke !important;
}
.share-menu-option .share-action-icon-wrap > svg:not(.share-menu-icon),
#shareCopyLabel > svg:not(.share-menu-icon){
    display:none !important;
}
.share-menu-option .share-menu-icon * ,
#shareCopyLabel .share-menu-icon *{
    vector-effect:non-scaling-stroke !important;
}


/* =========================================================
   COURT LIVE — ALIGNMENTS + SHARE SIMPLE
   ========================================================= */

/* Share stays separated, but no filled highlight: bold text only. */
.header-menu-item-share{
    font-weight:600 !important;
    background:transparent !important;
}
.header-menu-item-share:hover,
.header-menu-item-share:focus{
    background:#F2F2F2 !important;
}
html[data-theme="dark"] .header-menu-item-share{
    font-weight:600 !important;
    background:transparent !important;
}
html[data-theme="dark"] .header-menu-item-share:hover,
html[data-theme="dark"] .header-menu-item-share:focus{
    background:#2A2C2F !important;
}

/* Keep header content horizontally aligned with the cards. */
.header{
    padding-left:26px !important;
    padding-right:26px !important;
}

/* Footer uses the same left/right alignment as the cards. */
.footer{
    padding-left:26px !important;
    padding-right:26px !important;
}
.footer-content{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
}

/* Ensure the logo starts exactly on the same left edge as the cards. */
.header-content{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
}
.header-home-link{
    margin-left:0 !important;
}

@media (max-width:700px){
    .header{
        padding-left:18px !important;
        padding-right:18px !important;
    }
    .footer{
        padding-left:18px !important;
        padding-right:18px !important;
    }
}


/* =========================================================
   COURT LIVE — SHARE TEXT / COPY SUCCESS
   ========================================================= */

/* Explicit copied state so the check remains visible on mobile. */
#shareCopyLabel.is-copied,
.share-menu-option #shareCopyLabel.is-copied{
    color:#25D366 !important;
    opacity:1 !important;
}
#shareCopyLabel.is-copied .share-menu-check-icon,
.share-menu-option #shareCopyLabel.is-copied .share-menu-check-icon{
    color:#25D366 !important;
    stroke:#25D366 !important;
    fill:none !important;
    opacity:1 !important;
    visibility:visible !important;
}
html[data-theme="dark"] #shareCopyLabel.is-copied,
html[data-theme="dark"] #shareCopyLabel.is-copied .share-menu-check-icon{
    color:#25D366 !important;
    stroke:#25D366 !important;
}
@media (max-width:700px){
    #shareCopyLabel.is-copied,
    #shareCopyLabel.is-copied .share-menu-check-icon{
        color:#25D366 !important;
        stroke:#25D366 !important;
        opacity:1 !important;
        visibility:visible !important;
    }
}


/* =========================================================
   COURT LIVE — SHARE ICONS FINAL CONSISTENCY
   ========================================================= */
.share-menu-option{
    display:flex !important;
    align-items:center !important;
}
.share-menu-option .share-action-icon-wrap,
#shareCopyLabel{
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    max-width:20px !important;
    flex:0 0 20px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:0 !important;
    overflow:hidden !important;
}
.share-menu-option .share-menu-icon,
#shareCopyLabel .share-menu-icon{
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    max-width:20px !important;
    display:block !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
    vector-effect:non-scaling-stroke !important;
    transform:none !important;
    margin:0 !important;
}
.share-menu-option .share-action-icon-wrap > svg:not(.share-menu-icon),
#shareCopyLabel > svg:not(.share-menu-icon){
    display:none !important;
}
#shareCopyLabel.is-copied .share-menu-check-icon{
    width:20px !important;
    height:20px !important;
    stroke:#25D366 !important;
    color:#25D366 !important;
    opacity:1 !important;
    visibility:visible !important;
}


/* =========================================================
   COURT LIVE — EXPERIMENTAL 3-COLUMN STREAM CONTROL LAYOUT
   ========================================================= */
.admin-stream-settings.admin-title-only{
    min-height:34px !important;
    height:34px !important;
    padding:0 12px !important;
    display:flex !important;
    align-items:center !important;
    background:#FFFFFF !important;
    border-top:1px solid #E2E5E9 !important;
    border-bottom:0 !important;
}
.admin-title-input{
    width:100% !important;
    height:32px !important;
    min-height:32px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:#303030 !important;
    box-shadow:none !important;
    outline:none !important;
    font-size:13px !important;
    font-weight:400 !important;
    line-height:32px !important;
}
.admin-title-input:focus{
    border:0 !important;
    box-shadow:none !important;
    outline:none !important;
}

.admin-actions.admin-actions-three{
    min-height:42px !important;
    height:42px !important;
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr !important;
    align-items:stretch !important;
    background:#FFFFFF !important;
    border-top:1px solid #E2E5E9 !important;
}
.admin-actions-three .stream-button{
    min-height:42px !important;
    height:42px !important;
    padding:0 !important;
    background:#FFFFFF !important;
    border:0 !important;
    border-radius:0 !important;
}
.admin-actions-three .stream-start{
    border-right:1px solid #E2E5E9 !important;
}
.admin-actions-three .stream-stop{
    border-left:1px solid #E2E5E9 !important;
}

.admin-action-visibility,
.admin-action-visibility.visibility-public,
.admin-action-visibility.visibility-unlisted,
.admin-action-visibility.visibility-private,
.admin-action-visibility:focus,
.admin-action-visibility:active{
    width:100% !important;
    height:42px !important;
    min-height:42px !important;
    padding:0 6px !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:#FFFFFF !important;
    background-image:none !important;
    color:#303030 !important;
    box-shadow:none !important;
    outline:none !important;
    -webkit-appearance:none !important;
    appearance:none !important;
    text-align:center !important;
    text-align-last:center !important;
    font-size:12px !important;
    font-weight:400 !important;
    line-height:42px !important;
    cursor:pointer !important;
}
.admin-action-visibility option{
    text-align:center !important;
    color:#303030 !important;
    background:#FFFFFF !important;
}
.admin-action-visibility::-ms-expand{
    display:none !important;
}

html[data-theme="dark"] .admin-stream-settings.admin-title-only,
html[data-theme="dark"] .admin-actions.admin-actions-three{
    background:#202124 !important;
    border-color:#35383C !important;
}
html[data-theme="dark"] .admin-title-input{
    background:transparent !important;
    color:#F5F6F8 !important;
    border:0 !important;
}
html[data-theme="dark"] .admin-actions-three .stream-start{
    border-right-color:#35383C !important;
}
html[data-theme="dark"] .admin-actions-three .stream-stop{
    border-left-color:#35383C !important;
}
html[data-theme="dark"] .admin-action-visibility,
html[data-theme="dark"] .admin-action-visibility.visibility-public,
html[data-theme="dark"] .admin-action-visibility.visibility-unlisted,
html[data-theme="dark"] .admin-action-visibility.visibility-private,
html[data-theme="dark"] .admin-action-visibility:focus,
html[data-theme="dark"] .admin-action-visibility:active{
    background:#202124 !important;
    color:#F5F6F8 !important;
    border:0 !important;
    background-image:none !important;
}
html[data-theme="dark"] .admin-action-visibility option{
    color:#F5F6F8 !important;
    background:#202124 !important;
}
html[data-theme="dark"] .admin-actions-three .stream-button,
html[data-theme="dark"] .admin-actions-three .stream-button:disabled{
    background:#202124 !important;
    color:#C2C7CF !important;
}
html[data-theme="dark"] .camera-card.is-online .admin-actions-three .stream-start:not(:disabled){
    color:#25D366 !important;
}
html[data-theme="dark"] .camera-card.is-live .admin-actions-three .stream-stop:not(:disabled){
    color:#FF0000 !important;
}
html[data-theme="dark"] .admin-actions-three .stream-button:not(:disabled):hover{
    background:#2A2C2F !important;
}

@media (max-width:700px){
    .admin-stream-settings.admin-title-only{
        min-height:32px !important;
        height:32px !important;
        padding:0 10px !important;
    }
    .admin-title-input{
        height:30px !important;
        min-height:30px !important;
        line-height:30px !important;
        font-size:12px !important;
    }
    .admin-actions.admin-actions-three,
    .admin-actions-three .stream-button,
    .admin-action-visibility{
        min-height:40px !important;
        height:40px !important;
    }
    .admin-action-visibility{
        line-height:40px !important;
        font-size:12px !important;
    }
}


/* =========================================================
   COURT LIVE — 3-COLUMN CONTROLS FINAL CORRECTIONS
   ========================================================= */

/* Restore clear spacing between video cards. */
.lives-grid{
    row-gap:22px !important;
    column-gap:22px !important;
}
.camera-card{
    margin-bottom:0 !important;
}

/* Title: compact, borderless and centered. */
.admin-stream-settings.admin-title-only{
    min-height:34px !important;
    height:34px !important;
    padding:0 12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-bottom:0 !important;
}
.admin-title-input,
.admin-title-input:focus,
.admin-title-input:active{
    width:100% !important;
    height:32px !important;
    min-height:32px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    line-height:normal !important;
    text-align:center !important;
    font-size:13px !important;
}

/* Start | Visibility | Stop — slightly taller and visually one single rectangle. */
.admin-actions.admin-actions-three{
    min-height:46px !important;
    height:46px !important;
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr !important;
    align-items:stretch !important;
    border-top:1px solid #E2E5E9 !important;
}
.admin-actions-three .stream-button,
.admin-actions-three .stream-button:disabled{
    min-height:46px !important;
    height:46px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
}
/* No dividers around the center control. */
.admin-actions-three .stream-start,
.admin-actions-three .stream-stop{
    border-left:0 !important;
    border-right:0 !important;
}

/* Visibility: plain centered text inside the shared action rectangle.
   No border, no background ornament, no arrow, no visual jump on focus. */
.admin-action-visibility,
.admin-action-visibility:hover,
.admin-action-visibility:focus,
.admin-action-visibility:focus-visible,
.admin-action-visibility:active,
.admin-action-visibility.visibility-public,
.admin-action-visibility.visibility-unlisted,
.admin-action-visibility.visibility-private{
    display:block !important;
    width:100% !important;
    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;
    margin:0 !important;
    padding:0 8px !important;
    border:0 !important;
    border-width:0 !important;
    border-style:none !important;
    border-color:transparent !important;
    border-radius:0 !important;
    outline:0 !important;
    outline-offset:0 !important;
    box-shadow:none !important;
    background-color:transparent !important;
    background-image:none !important;
    color:#303030 !important;

    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    appearance:none !important;

    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:12px !important;
    font-weight:400 !important;
    line-height:normal !important;
    text-align:center !important;
    text-align-last:center !important;
    vertical-align:middle !important;
    cursor:pointer !important;
}

/* Hide browser-native indicators wherever supported. */
.admin-action-visibility::-ms-expand{
    display:none !important;
}
.admin-action-visibility::-webkit-list-button,
.admin-action-visibility::-webkit-calendar-picker-indicator{
    display:none !important;
    opacity:0 !important;
    width:0 !important;
    height:0 !important;
}

/* Keep option menu text normal when the OS/browser opens the picker. */
.admin-action-visibility option{
    text-align:center !important;
    font-size:14px !important;
}

/* Dark mode: same clean, borderless center control. */
html[data-theme="dark"] .admin-action-visibility,
html[data-theme="dark"] .admin-action-visibility:hover,
html[data-theme="dark"] .admin-action-visibility:focus,
html[data-theme="dark"] .admin-action-visibility:focus-visible,
html[data-theme="dark"] .admin-action-visibility:active{
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    background-image:none !important;
    color:#F5F6F8 !important;
}
html[data-theme="dark"] .admin-actions-three .stream-start,
html[data-theme="dark"] .admin-actions-three .stream-stop{
    border-left:0 !important;
    border-right:0 !important;
}

@media (max-width:700px){
    .lives-grid{
        row-gap:18px !important;
        column-gap:18px !important;
    }

    .admin-stream-settings.admin-title-only{
        min-height:32px !important;
        height:32px !important;
        padding:0 10px !important;
    }
    .admin-title-input,
    .admin-title-input:focus,
    .admin-title-input:active{
        min-height:30px !important;
        height:30px !important;
        font-size:12px !important;
        line-height:normal !important;
        text-align:center !important;
    }

    .admin-actions.admin-actions-three,
    .admin-actions-three .stream-button,
    .admin-actions-three .stream-button:disabled,
    .admin-action-visibility,
    .admin-action-visibility:hover,
    .admin-action-visibility:focus,
    .admin-action-visibility:focus-visible,
    .admin-action-visibility:active{
        min-height:44px !important;
        height:44px !important;
        max-height:44px !important;
    }

    .admin-action-visibility{
        padding:0 6px !important;
        border:0 !important;
        outline:0 !important;
        box-shadow:none !important;
        background:transparent !important;
        background-image:none !important;
        -webkit-appearance:none !important;
        -moz-appearance:none !important;
        appearance:none !important;
        line-height:normal !important;
        text-align:center !important;
        text-align-last:center !important;
    }
}


/* =========================================================
   COURT LIVE — CUSTOM VISIBILITY CONTROL (NO NATIVE ARROWS)
   ========================================================= */

/* Native select stays only as the data/API field. It is never shown/opened. */
.admin-action-visibility-native{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    min-width:1px !important;
    min-height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
    border:0 !important;
    opacity:0 !important;
    pointer-events:none !important;
}

/* Center column is just text inside the shared action rectangle. */
.admin-visibility-control{
    position:relative !important;
    width:100% !important;
    height:46px !important;
    min-height:46px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background:transparent !important;
}
.admin-visibility-button,
.admin-visibility-button:hover,
.admin-visibility-button:focus,
.admin-visibility-button:focus-visible,
.admin-visibility-button:active{
    width:100% !important;
    height:46px !important;
    min-height:46px !important;
    margin:0 !important;
    padding:0 8px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:0 !important;
    border-width:0 !important;
    border-style:none !important;
    border-color:transparent !important;
    border-radius:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    background-image:none !important;
    color:#303030 !important;
    -webkit-appearance:none !important;
    appearance:none !important;
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1 !important;
    text-align:center !important;
    cursor:pointer !important;
    -webkit-tap-highlight-color:transparent !important;
}
.admin-visibility-button::before,
.admin-visibility-button::after{
    content:none !important;
    display:none !important;
}
.admin-visibility-button:disabled{
    cursor:default !important;
    opacity:1 !important;
}
.admin-visibility-label{
    display:block !important;
    width:100% !important;
    text-align:center !important;
    font-weight:700 !important;
    line-height:1 !important;
}

/* Fully custom popup: avoids iOS/Android native select arrows/spinners. */
.admin-visibility-menu{
    position:absolute !important;
    left:50% !important;
    bottom:calc(100% + 6px) !important;
    transform:translateX(-50%) !important;
    width:112px !important;
    padding:5px !important;
    margin:0 !important;
    z-index:1200 !important;
    border:1px solid #D7DBE0 !important;
    border-radius:10px !important;
    background:#FFFFFF !important;
    box-shadow:0 8px 24px rgba(0,0,0,.12) !important;
}
.admin-visibility-menu[hidden]{
    display:none !important;
}
.admin-visibility-menu button{
    width:100% !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 8px !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:0 !important;
    border-radius:7px !important;
    background:transparent !important;
    color:#303030 !important;
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1 !important;
    text-align:center !important;
    cursor:pointer !important;
}
.admin-visibility-menu button:hover,
.admin-visibility-menu button:focus,
.admin-visibility-menu button.is-selected{
    background:#F2F2F2 !important;
    outline:0 !important;
}

html[data-theme="dark"] .admin-visibility-button,
html[data-theme="dark"] .admin-visibility-button:hover,
html[data-theme="dark"] .admin-visibility-button:focus,
html[data-theme="dark"] .admin-visibility-button:active{
    color:#F5F6F8 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}
html[data-theme="dark"] .admin-visibility-menu{
    border-color:#4A4E55 !important;
    background:#202124 !important;
    box-shadow:0 8px 24px rgba(0,0,0,.30) !important;
}
html[data-theme="dark"] .admin-visibility-menu button{
    color:#F5F6F8 !important;
}
html[data-theme="dark"] .admin-visibility-menu button:hover,
html[data-theme="dark"] .admin-visibility-menu button:focus,
html[data-theme="dark"] .admin-visibility-menu button.is-selected{
    background:#2A2C2F !important;
}

@media (max-width:700px){
    .admin-visibility-control,
    .admin-visibility-button{
        height:44px !important;
        min-height:44px !important;
    }
    .admin-visibility-button,
    .admin-visibility-label{
        font-weight:700 !important;
    }
}


/* =========================================================
   COURT LIVE — VISIBILITY DIVIDERS + CLEAN MENU
   ========================================================= */

/* Restore the two separators between Start | Visibility | Stop. */
.admin-actions-three .stream-start{
    border-right:1px solid #E2E5E9 !important;
}
.admin-actions-three .stream-stop{
    border-left:1px solid #E2E5E9 !important;
}

/* Current selected value remains bold in the center control. */
.admin-visibility-button,
.admin-visibility-label{
    font-weight:700 !important;
}

/* Popup options stay visually lighter/cleaner. */
.admin-visibility-menu button{
    font-weight:400 !important;
}
.admin-visibility-menu button.is-selected{
    font-weight:400 !important;
}

/* Dark mode separators. */
html[data-theme="dark"] .admin-actions-three .stream-start{
    border-right:1px solid #35383C !important;
}
html[data-theme="dark"] .admin-actions-three .stream-stop{
    border-left:1px solid #35383C !important;
}


/* =========================================================
   COURT LIVE — SHARE COPY VIDEO + WHATSAPP FINAL FIX
   ========================================================= */

/* Video copy confirmation uses the same green check as index. */
#shareCopyLabel.is-copied .share-menu-check-icon{
    width:20px !important;
    height:20px !important;
    display:block !important;
    fill:none !important;
    stroke:#25D366 !important;
    color:#25D366 !important;
    stroke-width:1.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
    opacity:1 !important;
    visibility:visible !important;
}

/* WhatsApp: one solid vector path, sharper at 20px. */
.share-menu-option .share-whatsapp-icon{
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    max-width:20px !important;
    display:block !important;
    fill:currentColor !important;
    stroke:none !important;
    stroke-width:0 !important;
    opacity:1 !important;
    visibility:visible !important;
}
.share-menu-option .share-whatsapp-icon path{
    fill:currentColor !important;
    stroke:none !important;
}

/* Keep every Share icon on exactly the same visual footprint. */
.share-menu-option .share-action-icon-wrap,
#shareCopyLabel{
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    max-width:20px !important;
    flex:0 0 20px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
}


/* =========================================================
   COURT LIVE — TITLE DISABLED STATE WITHOUT GREY BACKGROUND
   ========================================================= */
.admin-title-input:disabled,
.admin-setting-input.admin-title-input:disabled{
    background:transparent !important;
    background-color:transparent !important;
    color:#303030 !important;
    -webkit-text-fill-color:#303030 !important;
    opacity:1 !important;
    border:0 !important;
    box-shadow:none !important;
}

html[data-theme="dark"] .admin-title-input:disabled,
html[data-theme="dark"] .admin-setting-input.admin-title-input:disabled{
    background:transparent !important;
    background-color:transparent !important;
    color:#F5F6F8 !important;
    -webkit-text-fill-color:#F5F6F8 !important;
    opacity:1 !important;
    border:0 !important;
    box-shadow:none !important;
}


/* =========================================================
   COURT LIVE — HARD LOCK SETTINGS OUTSIDE ONLINE/LIVE
   ========================================================= */
.admin-visibility-control.is-locked .admin-visibility-button{
    pointer-events:none !important;
    cursor:default !important;
}
.admin-visibility-control.is-locked .admin-visibility-menu{
    display:none !important;
}
.admin-title-input:disabled,
.admin-title-input[readonly]{
    pointer-events:none !important;
    cursor:default !important;
    user-select:none !important;
    background:transparent !important;
    opacity:1 !important;
}


/* =========================================================
   COURT LIVE — FINAL CONTROL COLORS + TITLE CLEAN REFRESH
   ========================================================= */

/* Start/Stop default (non-active) state: dark grey. */
.stream-button,
.stream-button:disabled,
.camera-card.is-offline .stream-button,
.camera-card.is-starting .stream-button,
.camera-card.is-error .stream-button,
.camera-card:not(.is-online):not(.is-live) .stream-button{
    color:#303030 !important;
}

/* Keep semantic active colors. */
.camera-card.is-online .stream-start:not(:disabled){
    color:#25D366 !important;
}
.camera-card.is-live .stream-stop:not(:disabled){
    color:#FF0000 !important;
}

/* In dark mode, inactive Start/Stop are still dark grey as requested. */
html[data-theme="dark"] .stream-button,
html[data-theme="dark"] .stream-button:disabled,
html[data-theme="dark"] .camera-card.is-offline .stream-button,
html[data-theme="dark"] .camera-card.is-starting .stream-button,
html[data-theme="dark"] .camera-card.is-error .stream-button,
html[data-theme="dark"] .camera-card:not(.is-online):not(.is-live) .stream-button{
    color:#303030 !important;
}
html[data-theme="dark"] .camera-card.is-online .stream-start:not(:disabled){
    color:#25D366 !important;
}
html[data-theme="dark"] .camera-card.is-live .stream-stop:not(:disabled){
    color:#FF0000 !important;
}

/* Remove every grey disabled/input background around the Title on initial load/refresh. */
.admin-stream-settings.admin-title-only,
.admin-stream-settings.admin-title-only:disabled,
.admin-stream-settings.admin-title-only.is-disabled{
    background:#FFFFFF !important;
    background-color:#FFFFFF !important;
}
.admin-title-input,
.admin-title-input:hover,
.admin-title-input:focus,
.admin-title-input:active,
.admin-title-input:disabled,
.admin-title-input[disabled],
.admin-title-input[readonly],
.admin-setting-input.admin-title-input,
.admin-setting-input.admin-title-input:disabled,
.admin-setting-input.admin-title-input[readonly]{
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    border:0 !important;
    border-color:transparent !important;
    outline:0 !important;
    box-shadow:none !important;
    -webkit-box-shadow:none !important;
    opacity:1 !important;
    appearance:none !important;
    -webkit-appearance:none !important;
}

/* Prevent browser disabled styling from painting a grey field. */
.admin-title-input:disabled{
    -webkit-text-fill-color:#303030 !important;
}
html[data-theme="dark"] .admin-stream-settings.admin-title-only{
    background:#202124 !important;
    background-color:#202124 !important;
}
html[data-theme="dark"] .admin-title-input,
html[data-theme="dark"] .admin-title-input:hover,
html[data-theme="dark"] .admin-title-input:focus,
html[data-theme="dark"] .admin-title-input:active,
html[data-theme="dark"] .admin-title-input:disabled,
html[data-theme="dark"] .admin-title-input[readonly]{
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
    -webkit-box-shadow:none !important;
    -webkit-text-fill-color:#F5F6F8 !important;
    opacity:1 !important;
}


/* =========================================================
   COURT LIVE — START / VISIBILITY / STOP DIVIDERS ALWAYS ON
   ========================================================= */

/* Force the two internal separators to remain visible in every state. */
.admin-actions.admin-actions-three .stream-start,
.admin-actions.admin-actions-three .stream-start:disabled,
.admin-actions.admin-actions-three .stream-start:hover,
.admin-actions.admin-actions-three .stream-start:focus,
.admin-actions.admin-actions-three .stream-start:active,
.camera-card.is-online .admin-actions-three .stream-start,
.camera-card.is-live .admin-actions-three .stream-start,
.camera-card.is-offline .admin-actions-three .stream-start,
.camera-card.is-starting .admin-actions-three .stream-start,
.camera-card.is-error .admin-actions-three .stream-start{
    border-right:1px solid #E2E5E9 !important;
}

.admin-actions.admin-actions-three .stream-stop,
.admin-actions.admin-actions-three .stream-stop:disabled,
.admin-actions.admin-actions-three .stream-stop:hover,
.admin-actions.admin-actions-three .stream-stop:focus,
.admin-actions.admin-actions-three .stream-stop:active,
.camera-card.is-online .admin-actions-three .stream-stop,
.camera-card.is-live .admin-actions-three .stream-stop,
.camera-card.is-offline .admin-actions-three .stream-stop,
.camera-card.is-starting .admin-actions-three .stream-stop,
.camera-card.is-error .admin-actions-three .stream-stop{
    border-left:1px solid #E2E5E9 !important;
}

/* Dark mode equivalents. */
html[data-theme="dark"] .admin-actions.admin-actions-three .stream-start,
html[data-theme="dark"] .admin-actions.admin-actions-three .stream-start:disabled,
html[data-theme="dark"] .admin-actions.admin-actions-three .stream-start:hover,
html[data-theme="dark"] .admin-actions.admin-actions-three .stream-start:focus,
html[data-theme="dark"] .admin-actions.admin-actions-three .stream-start:active{
    border-right:1px solid #35383C !important;
}

html[data-theme="dark"] .admin-actions.admin-actions-three .stream-stop,
html[data-theme="dark"] .admin-actions.admin-actions-three .stream-stop:disabled,
html[data-theme="dark"] .admin-actions.admin-actions-three .stream-stop:hover,
html[data-theme="dark"] .admin-actions.admin-actions-three .stream-stop:focus,
html[data-theme="dark"] .admin-actions.admin-actions-three .stream-stop:active{
    border-left:1px solid #35383C !important;
}


/* =========================================================
   COURT LIVE — UI REFINEMENTS: COPY / QR / SETTINGS
   ========================================================= */

/* Copy success check: neutral grey instead of green. */
#shareCopyLabel.is-copied,
.share-menu-option #shareCopyLabel.is-copied{
    color:#5F6368 !important;
}
#shareCopyLabel.is-copied .share-menu-check-icon,
.share-menu-option #shareCopyLabel.is-copied .share-menu-check-icon{
    color:#5F6368 !important;
    stroke:#5F6368 !important;
}
html[data-theme="dark"] #shareCopyLabel.is-copied,
html[data-theme="dark"] #shareCopyLabel.is-copied .share-menu-check-icon{
    color:#C2C7CF !important;
    stroke:#C2C7CF !important;
}
@media (max-width:700px){
    #shareCopyLabel.is-copied,
    #shareCopyLabel.is-copied .share-menu-check-icon{
        color:#5F6368 !important;
        stroke:#5F6368 !important;
    }
    html[data-theme="dark"] #shareCopyLabel.is-copied,
    html[data-theme="dark"] #shareCopyLabel.is-copied .share-menu-check-icon{
        color:#C2C7CF !important;
        stroke:#C2C7CF !important;
    }
}

/* QR Close is the only action: use the entire available width. */
.qr-modal-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
}
.qr-modal-actions > button,
.qr-modal-actions > .popup-close-button,
.qr-modal-actions > button:only-child,
.qr-modal-actions > .popup-close-button:only-child{
    width:100% !important;
    max-width:none !important;
    grid-column:1 / -1 !important;
}

/* Dark Settings: make the selected option clearly visible. */
html[data-theme="dark"] .appearance-option.is-active{
    background:#F5F6F8 !important;
    border-color:#F5F6F8 !important;
    color:#303030 !important;
}


/* =========================================================
   COURT LIVE — OPEN VIDEO ARROW + COPY SUCCESS GREEN
   ========================================================= */

/* Open Video: simple northeast arrow. */
.copy-live-link .open-video-arrow-icon{
    width:18px !important;
    height:18px !important;
    display:block !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.9 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}

/* Copy success: green in both light and dark modes. */
#shareCopyLabel.is-copied,
.share-menu-option #shareCopyLabel.is-copied,
html[data-theme="dark"] #shareCopyLabel.is-copied,
html[data-theme="dark"] .share-menu-option #shareCopyLabel.is-copied{
    color:#25D366 !important;
}
#shareCopyLabel.is-copied .share-menu-check-icon,
.share-menu-option #shareCopyLabel.is-copied .share-menu-check-icon,
html[data-theme="dark"] #shareCopyLabel.is-copied .share-menu-check-icon,
html[data-theme="dark"] .share-menu-option #shareCopyLabel.is-copied .share-menu-check-icon{
    color:#25D366 !important;
    stroke:#25D366 !important;
    fill:none !important;
    opacity:1 !important;
    visibility:visible !important;
}

@media (max-width:700px){
    #shareCopyLabel.is-copied,
    .share-menu-option #shareCopyLabel.is-copied,
    html[data-theme="dark"] #shareCopyLabel.is-copied,
    html[data-theme="dark"] .share-menu-option #shareCopyLabel.is-copied{
        color:#25D366 !important;
    }
    #shareCopyLabel.is-copied .share-menu-check-icon,
    .share-menu-option #shareCopyLabel.is-copied .share-menu-check-icon,
    html[data-theme="dark"] #shareCopyLabel.is-copied .share-menu-check-icon,
    html[data-theme="dark"] .share-menu-option #shareCopyLabel.is-copied .share-menu-check-icon{
        color:#25D366 !important;
        stroke:#25D366 !important;
    }
}


/* =========================================================
   COURT LIVE — VISIBILITY TEXT COLORS
   ========================================================= */

/* Selected visibility between Start and Stop: text color only. */
.admin-visibility-control.visibility-unlisted .admin-visibility-label{
    color:#FFB200 !important;
    font-weight:700 !important;
}
.admin-visibility-control.visibility-private .admin-visibility-label{
    color:#FF0000 !important;
    font-weight:700 !important;
}
.admin-visibility-control.visibility-public .admin-visibility-label{
    font-weight:700 !important;
}

/* Dropdown menu: bold options, with color only on Hidden / Private text. */
.admin-visibility-menu button{
    font-weight:700 !important;
}
.admin-visibility-menu button[data-visibility-value="unlisted"]{
    color:#FFB200 !important;
}
.admin-visibility-menu button[data-visibility-value="private"]{
    color:#FF0000 !important;
}

/* Preserve the same semantic colors in dark mode. */
html[data-theme="dark"] .admin-visibility-control.visibility-unlisted .admin-visibility-label{
    color:#FFB200 !important;
}
html[data-theme="dark"] .admin-visibility-control.visibility-private .admin-visibility-label{
    color:#FF0000 !important;
}
html[data-theme="dark"] .admin-visibility-menu button[data-visibility-value="unlisted"]{
    color:#FFB200 !important;
}
html[data-theme="dark"] .admin-visibility-menu button[data-visibility-value="private"]{
    color:#FF0000 !important;
}


/* =========================================================
   COURT LIVE — SETTINGS + VISIBILITY FINAL FIX
   ========================================================= */

/* Current selected visibility between Start and Stop. */
.admin-visibility-button,
.admin-visibility-button .admin-visibility-label{
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    font-weight:700 !important;
}
.admin-visibility-control.visibility-public .admin-visibility-label{
    color:#303030 !important;
    font-weight:700 !important;
}
.admin-visibility-control.visibility-unlisted .admin-visibility-label{
    color:#FFB200 !important;
    font-weight:700 !important;
}
.admin-visibility-control.visibility-private .admin-visibility-label{
    color:#FF0000 !important;
    font-weight:700 !important;
}

/* Visibility picker options: bold, text color only. */
.admin-visibility-menu button,
.admin-visibility-menu button.is-selected{
    font-weight:700 !important;
}
.admin-visibility-menu button[data-visibility-value="public"]{
    color:#303030 !important;
}
.admin-visibility-menu button[data-visibility-value="unlisted"]{
    color:#FFB200 !important;
}
.admin-visibility-menu button[data-visibility-value="private"]{
    color:#FF0000 !important;
}

/* Dark mode keeps Public readable and semantic colors unchanged. */
html[data-theme="dark"] .admin-visibility-control.visibility-public .admin-visibility-label{
    color:#F5F6F8 !important;
}
html[data-theme="dark"] .admin-visibility-control.visibility-unlisted .admin-visibility-label{
    color:#FFB200 !important;
}
html[data-theme="dark"] .admin-visibility-control.visibility-private .admin-visibility-label{
    color:#FF0000 !important;
}
html[data-theme="dark"] .admin-visibility-menu button[data-visibility-value="public"]{
    color:#F5F6F8 !important;
}
html[data-theme="dark"] .admin-visibility-menu button[data-visibility-value="unlisted"]{
    color:#FFB200 !important;
}
html[data-theme="dark"] .admin-visibility-menu button[data-visibility-value="private"]{
    color:#FF0000 !important;
}

/* Settings selection must be visually clear in dark mode. */
html[data-theme="dark"] .appearance-option.is-active{
    background:#F5F6F8 !important;
    border-color:#F5F6F8 !important;
    color:#303030 !important;
}


/* =========================================================
   COURT LIVE — VISIBILITY SELECTED OPTION + OPEN ARROW FINAL
   ========================================================= */

/* The currently chosen option inside the opened visibility menu is bold. */
.admin-visibility-menu button.is-selected,
.admin-visibility-menu button[data-visibility-value].is-selected,
html[data-theme="dark"] .admin-visibility-menu button.is-selected,
html[data-theme="dark"] .admin-visibility-menu button[data-visibility-value].is-selected{
    font-weight:700 !important;
}

/* All three picker options remain bold as requested. */
.admin-visibility-menu button[data-visibility-value]{
    font-weight:700 !important;
}

/* Chosen simple arrow icon for opening the video. */
.copy-live-link .open-video-arrow-icon{
    width:18px !important;
    height:18px !important;
    display:block !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.9 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}


/* =========================================================
   COURT LIVE — VISIBILITY SELECTED OPTION FINAL
   ========================================================= */

/* Main selected value */
.admin-visibility-button .admin-visibility-label{
    font-weight:700 !important;
}

/* Open menu: every option bold, and selected option extra explicit */
.admin-visibility-menu button[data-visibility-value]{
    font-weight:700 !important;
}
.admin-visibility-menu button.is-selected,
.admin-visibility-menu button[data-visibility-value].is-selected{
    font-weight:700 !important;
}

/* Keep text-only semantic colors */
.admin-visibility-menu button[data-visibility-value="public"]{
    color:#303030 !important;
}
.admin-visibility-menu button[data-visibility-value="unlisted"]{
    color:#FFB200 !important;
}
.admin-visibility-menu button[data-visibility-value="private"]{
    color:#FF0000 !important;
}

html[data-theme="dark"] .admin-visibility-menu button[data-visibility-value="public"]{
    color:#F5F6F8 !important;
}
html[data-theme="dark"] .admin-visibility-menu button[data-visibility-value="unlisted"]{
    color:#FFB200 !important;
}
html[data-theme="dark"] .admin-visibility-menu button[data-visibility-value="private"]{
    color:#FF0000 !important;
}

/* =========================================================
   COURT LIVE — OPEN VIDEO ARROW FINAL
   ========================================================= */
.copy-live-link .open-video-arrow-icon{
    width:20px !important;
    height:20px !important;
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:2.1 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}


/* =========================================================
   COURT LIVE — DARK MODE POPUP PRIMARY ACTIONS
   Final authoritative override.
   ========================================================= */

/*
   In dark mode, every PRIMARY popup action is light:
   Start / Stop / Open / Sign in / Sign out / Confirm.
   Close buttons remain the darker secondary treatment.
*/
html[data-theme="dark"] .admin-modal .admin-submit:not(.popup-close-button),
html[data-theme="dark"] .admin-modal .admin-submit:not(.popup-close-button):hover,
html[data-theme="dark"] .admin-modal .admin-submit:not(.popup-close-button):focus,
html[data-theme="dark"] .admin-modal .admin-submit:not(.popup-close-button):active,
html[data-theme="dark"] #stream-confirm-ok,
html[data-theme="dark"] #stream-confirm-ok:hover,
html[data-theme="dark"] #stream-confirm-ok:focus,
html[data-theme="dark"] #stream-confirm-ok:active,
html[data-theme="dark"] #youtube-confirm-open,
html[data-theme="dark"] #youtube-confirm-open:hover,
html[data-theme="dark"] #youtube-confirm-open:focus,
html[data-theme="dark"] #youtube-confirm-open:active,
html[data-theme="dark"] .admin-login-submit,
html[data-theme="dark"] .admin-logout-confirm{
    background:#F5F6F8 !important;
    border-color:#F5F6F8 !important;
    color:#303030 !important;
    box-shadow:none !important;
    outline:none !important;
}

/* Secondary Close stays dark in dark mode. */
html[data-theme="dark"] .popup-close-button,
html[data-theme="dark"] button.popup-close-button,
html[data-theme="dark"] .admin-cancel.popup-close-button,
html[data-theme="dark"] .admin-submit.popup-close-button{
    background:#202124 !important;
    border-color:#4A4E55 !important;
    color:#F5F6F8 !important;
}
html[data-theme="dark"] .popup-close-button:hover,
html[data-theme="dark"] .popup-close-button:focus,
html[data-theme="dark"] button.popup-close-button:hover,
html[data-theme="dark"] button.popup-close-button:focus{
    background:#2A2C2F !important;
    border-color:#4A4E55 !important;
    color:#F5F6F8 !important;
}


/* =========================================================
   COURT LIVE — DARK PAGE / FOOTER COHERENCE
   Match the light-mode behavior: footer and area below it
   are visually continuous, using dark-mode equivalents.
   ========================================================= */

html[data-theme="dark"],
html[data-theme="dark"] body{
    background:#202124 !important;
}

html[data-theme="dark"] .footer{
    background:#202124 !important;
    border-color:#35383C !important;
}

/* Keep the main content on its intended darker surface,
   while footer + page remainder stay continuous. */
html[data-theme="dark"] main,
html[data-theme="dark"] .main-content{
    background:#18191B !important;
}




/* COURT LIVE — WATCHING NOW TEXT ONLY */
#viewer-count{
    display:inline !important;
}
.watching-user-text{
    display:inline !important;
}


/* =========================================================
   COURT LIVE — FONT FAMILY FINAL
   ========================================================= */
html,
body,
button,
input,
select,
textarea{
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
.error-page-minimal-brand,
.error-page-minimal-message,
.error-page-minimal-contact{
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
.error-page-minimal-brand{
    font-weight:700 !important;
}


/* =========================================================
   COURT LIVE — FONT FAMILY: INTER
   ========================================================= */
html,
body,
button,
input,
select,
textarea,
.admin-login-title,
.appearance-modal-title,
.error-page-minimal-brand,
.error-page-minimal-message,
.error-page-minimal-contact{
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
}


/* =========================================================
   COURT LIVE — TYPOGRAPHY COHERENCE
   ========================================================= */
html,
body,
button,
input,
select,
textarea,
.header,
.content,
.footer,
.admin-modal,
.appearance-modal,
.status-info-bar,
.error-page-body{
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
}

/* Primary headings: consistent Inter Bold, not Black. */
.title,
.admin-login-title,
.appearance-modal-title,
.error-page-minimal-brand{
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
    font-weight:700 !important;
}

/* Secondary UI text remains medium/regular according to existing component rules. */
.ui-separator{
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
}
\n\n/* =========================================================\n   COURT LIVE — LOCKED SETTINGS + FINAL SEMANTIC COLORS\n   ========================================================= */\n/* Locked Title/Visibility show a neutral dash in the normal theme text color. */\n.admin-title-input.is-locked-placeholder{\n    color:#303030 !important;\n    -webkit-text-fill-color:#303030 !important;\n}\n.admin-visibility-button.is-locked-placeholder .admin-visibility-label,\n.admin-visibility-control.is-locked .admin-visibility-label{\n    color:#303030 !important;\n}\nhtml[data-theme="dark"] .admin-title-input.is-locked-placeholder{\n    color:#F5F6F8 !important;\n    -webkit-text-fill-color:#F5F6F8 !important;\n}\nhtml[data-theme="dark"] .admin-visibility-button.is-locked-placeholder .admin-visibility-label,\nhtml[data-theme="dark"] .admin-visibility-control.is-locked .admin-visibility-label{\n    color:#F5F6F8 !important;\n}\n\n/* Visibility uses semantic colors in both themes. */\n.admin-visibility-control.visibility-public:not(.is-locked) .admin-visibility-label,\n.admin-visibility-menu button[data-visibility-value="public"],\nhtml[data-theme="dark"] .admin-visibility-control.visibility-public:not(.is-locked) .admin-visibility-label,\nhtml[data-theme="dark"] .admin-visibility-menu button[data-visibility-value="public"]{\n    color:#25D366 !important;\n}\n.admin-visibility-control.visibility-unlisted:not(.is-locked) .admin-visibility-label,\n.admin-visibility-menu button[data-visibility-value="unlisted"],\nhtml[data-theme="dark"] .admin-visibility-control.visibility-unlisted:not(.is-locked) .admin-visibility-label,\nhtml[data-theme="dark"] .admin-visibility-menu button[data-visibility-value="unlisted"]{\n    color:#FFB200 !important;\n}\n.admin-visibility-control.visibility-private:not(.is-locked) .admin-visibility-label,\n.admin-visibility-menu button[data-visibility-value="private"],\nhtml[data-theme="dark"] .admin-visibility-control.visibility-private:not(.is-locked) .admin-visibility-label,\nhtml[data-theme="dark"] .admin-visibility-menu button[data-visibility-value="private"]{\n    color:#FF0000 !important;\n}\n\n/* Recorded video title follows the same neutral color as the status bar text. */\n.recorded-video-title,\n.camera-card .recorded-video-title,\n.shared-video-grid .recorded-video-title{\n    color:#7C8087 !important;\n}\nhtml[data-theme="dark"] .recorded-video-title,\nhtml[data-theme="dark"] .camera-card .recorded-video-title,\nhtml[data-theme="dark"] .shared-video-grid .recorded-video-title{\n    color:#C2C7CF !important;\n}\n\n/* In dark mode disabled Start/Stop stay readable; active semantic colors remain unchanged. */\nhtml[data-theme="dark"] .admin-actions-three .stream-button:disabled,\nhtml[data-theme="dark"] .camera-card.is-offline .admin-actions-three .stream-button,\nhtml[data-theme="dark"] .camera-card.is-starting .admin-actions-three .stream-button,\nhtml[data-theme="dark"] .camera-card.is-error .admin-actions-three .stream-button,\nhtml[data-theme="dark"] .camera-card:not(.is-online):not(.is-live) .admin-actions-three .stream-button{\n    color:#C2C7CF !important;\n}\nhtml[data-theme="dark"] .camera-card.is-online .admin-actions-three .stream-start:not(:disabled){\n    color:#25D366 !important;\n}\nhtml[data-theme="dark"] .camera-card.is-live .admin-actions-three .stream-stop:not(:disabled){\n    color:#FF0000 !important;\n}\n

/* =========================================================
   COURT LIVE — FINAL STATE COLOR OVERRIDES
   Locked visibility/title placeholders must use default text color.
   Dark-mode locked Start/Stop must be light for contrast.
   ========================================================= */

/* Locked placeholder: never inherit Public/Hidden/Private semantic colors. */
.admin-visibility-button.is-locked-placeholder,
.admin-visibility-button.is-locked-placeholder .admin-visibility-label,
.admin-visibility-control.is-locked .admin-visibility-button,
.admin-visibility-control.is-locked .admin-visibility-button .admin-visibility-label,
.admin-setting-title.is-locked-placeholder,
.admin-title-input.is-locked-placeholder,
input[id^="stream-title-"].is-locked-placeholder {
    color:#303030 !important;
    -webkit-text-fill-color:#303030 !important;
}

/* Dark theme locked placeholder: use normal light text. */
html[data-theme="dark"] .admin-visibility-button.is-locked-placeholder,
html[data-theme="dark"] .admin-visibility-button.is-locked-placeholder .admin-visibility-label,
html[data-theme="dark"] .admin-visibility-control.is-locked .admin-visibility-button,
html[data-theme="dark"] .admin-visibility-control.is-locked .admin-visibility-button .admin-visibility-label,
html[data-theme="dark"] .admin-setting-title.is-locked-placeholder,
html[data-theme="dark"] .admin-title-input.is-locked-placeholder,
html[data-theme="dark"] input[id^="stream-title-"].is-locked-placeholder,
body.dark-mode .admin-visibility-button.is-locked-placeholder,
body.dark-mode .admin-visibility-button.is-locked-placeholder .admin-visibility-label,
body.dark-mode .admin-visibility-control.is-locked .admin-visibility-button,
body.dark-mode .admin-visibility-control.is-locked .admin-visibility-button .admin-visibility-label,
body.dark-mode input[id^="stream-title-"].is-locked-placeholder {
    color:#F5F6F8 !important;
    -webkit-text-fill-color:#F5F6F8 !important;
}

/* Semantic visibility colors only while unlocked. */
.admin-visibility-control:not(.is-locked) .admin-visibility-button[data-visibility-current="public"],
.admin-visibility-control:not(.is-locked) .admin-visibility-button.is-public,
.admin-visibility-control:not(.is-locked) .admin-visibility-label.is-public {
    color:#25D366 !important;
}
.admin-visibility-control:not(.is-locked) .admin-visibility-button[data-visibility-current="unlisted"],
.admin-visibility-control:not(.is-locked) .admin-visibility-button.is-hidden,
.admin-visibility-control:not(.is-locked) .admin-visibility-label.is-hidden {
    color:#FFB200 !important;
}
.admin-visibility-control:not(.is-locked) .admin-visibility-button[data-visibility-current="private"],
.admin-visibility-control:not(.is-locked) .admin-visibility-button.is-private,
.admin-visibility-control:not(.is-locked) .admin-visibility-label.is-private {
    color:#FF0000 !important;
}

/* Dark mode: inactive/disabled Start and Stop must be light, not dark gray. */
html[data-theme="dark"] .admin-actions-three .stream-start:disabled,
html[data-theme="dark"] .admin-actions-three .stream-stop:disabled,
html[data-theme="dark"] .camera-card:not(.is-online) .admin-actions-three .stream-start,
html[data-theme="dark"] .camera-card:not(.is-live) .admin-actions-three .stream-stop,
body.dark-mode .admin-actions-three .stream-start:disabled,
body.dark-mode .admin-actions-three .stream-stop:disabled,
body.dark-mode .camera-card:not(.is-online) .admin-actions-three .stream-start,
body.dark-mode .camera-card:not(.is-live) .admin-actions-three .stream-stop {
    color:#F5F6F8 !important;
    -webkit-text-fill-color:#F5F6F8 !important;
    opacity:1 !important;
}

/* Keep active semantic actions intact in dark mode. */
html[data-theme="dark"] .camera-card.is-online .admin-actions-three .stream-start:not(:disabled),
body.dark-mode .camera-card.is-online .admin-actions-three .stream-start:not(:disabled) {
    color:#25D366 !important;
    -webkit-text-fill-color:#25D366 !important;
}
html[data-theme="dark"] .camera-card.is-live .admin-actions-three .stream-stop:not(:disabled),
body.dark-mode .camera-card.is-live .admin-actions-three .stream-stop:not(:disabled) {
    color:#FF0000 !important;
    -webkit-text-fill-color:#FF0000 !important;
}


/* =========================================================
   COURT LIVE — VISIBILITY SEMANTIC COLORS (authoritative)
   ========================================================= */
.admin-visibility-control:not(.is-locked) .admin-visibility-button.is-public,
.admin-visibility-control:not(.is-locked) .admin-visibility-button.is-public .admin-visibility-label,
.admin-visibility-control:not(.is-locked) .admin-visibility-label.is-public {
    color:#25D366 !important;
    -webkit-text-fill-color:#25D366 !important;
}

.admin-visibility-control:not(.is-locked) .admin-visibility-button.is-hidden,
.admin-visibility-control:not(.is-locked) .admin-visibility-button.is-hidden .admin-visibility-label,
.admin-visibility-control:not(.is-locked) .admin-visibility-label.is-hidden {
    color:#FFB200 !important;
    -webkit-text-fill-color:#FFB200 !important;
}

.admin-visibility-control:not(.is-locked) .admin-visibility-button.is-private,
.admin-visibility-control:not(.is-locked) .admin-visibility-button.is-private .admin-visibility-label,
.admin-visibility-control:not(.is-locked) .admin-visibility-label.is-private {
    color:#FF0000 !important;
    -webkit-text-fill-color:#FF0000 !important;
}


/* =========================================================
   COURT LIVE — VIDEO TITLE COLOR
   Match the neutral text used by the "1 court live" status text.
   ========================================================= */
.status-info-bar .recorded-video-title,
.status-info-bar .video-title,
.status-info-bar [data-video-title],
.video-status-title,
.recorded-video-title {
    color:inherit !important;
    -webkit-text-fill-color:currentColor !important;
}


/* =========================================================
   COURT LIVE — EXACT SHARED STATUS/TITLE + PUBLIC GREEN
   One authoritative rule at the very end.
   ========================================================= */
:root{
    --court-live-status-text:#7C8087;
}
html[data-theme="dark"]{
    --court-live-status-text:#C2C7CF;
}

/* "1 court live" and video title use the exact same source color. */
.online-count,
.status-online-count,
[data-online-count],
.recorded-video-title,
.camera-card .recorded-video-title,
.shared-video-grid .recorded-video-title,
.status-info-bar .recorded-video-title{
    color:var(--court-live-status-text) !important;
    -webkit-text-fill-color:var(--court-live-status-text) !important;
}

/* Actual custom visibility control: Public is green everywhere while unlocked. */
.admin-visibility-control.visibility-public:not(.is-locked) .admin-visibility-button,
.admin-visibility-control.visibility-public:not(.is-locked) .admin-visibility-button .admin-visibility-label,
.admin-visibility-control.visibility-public:not(.is-locked) .admin-visibility-label,
html[data-theme="dark"] .admin-visibility-control.visibility-public:not(.is-locked) .admin-visibility-button,
html[data-theme="dark"] .admin-visibility-control.visibility-public:not(.is-locked) .admin-visibility-button .admin-visibility-label,
html[data-theme="dark"] .admin-visibility-control.visibility-public:not(.is-locked) .admin-visibility-label{
    color:#25D366 !important;
    -webkit-text-fill-color:#25D366 !important;
}

/* Public inside the selection popup is green too. */
.admin-visibility-menu button[data-visibility-value="public"],
html[data-theme="dark"] .admin-visibility-menu button[data-visibility-value="public"]{
    color:#25D366 !important;
    -webkit-text-fill-color:#25D366 !important;
}

/* Locked value is always neutral dash, overriding semantic visibility colors. */
.admin-visibility-control.is-locked .admin-visibility-button,
.admin-visibility-control.is-locked .admin-visibility-label{
    color:#303030 !important;
    -webkit-text-fill-color:#303030 !important;
}
html[data-theme="dark"] .admin-visibility-control.is-locked .admin-visibility-button,
html[data-theme="dark"] .admin-visibility-control.is-locked .admin-visibility-label{
    color:#F5F6F8 !important;
    -webkit-text-fill-color:#F5F6F8 !important;
}


/* =========================================================
   COURT LIVE — VIDEO TITLE EDIT FIELD
   ========================================================= */
.camera-card .admin-title-row,
.camera-card .admin-title-field,
.camera-card input[id^="stream-title-"]{
    background:#F2F2F2 !important;
}
.camera-card input[id^="stream-title-"]{
    border:0 !important;
    box-shadow:none !important;
    outline:0 !important;
}
.camera-card input[id^="stream-title-"].is-locked-placeholder{
    color:#303030 !important;
    -webkit-text-fill-color:#303030 !important;
}
html[data-theme="dark"] .camera-card .admin-title-row,
html[data-theme="dark"] .camera-card .admin-title-field,
html[data-theme="dark"] .camera-card input[id^="stream-title-"]{
    background:#18191B !important;
}
html[data-theme="dark"] .camera-card input[id^="stream-title-"].is-locked-placeholder{
    color:#F5F6F8 !important;
    -webkit-text-fill-color:#F5F6F8 !important;
}


/* =========================================================
   COURT LIVE — VIDEO TITLE GREY CONTAINER FINAL
   Grey fills the whole title DIV; input stays transparent.
   ========================================================= */
.camera-card .admin-title-row,
.camera-card .admin-title-field{
    background:#F2F2F2 !important;
}
.camera-card input[id^="stream-title-"]{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    outline:0 !important;
}
html[data-theme="dark"] .camera-card .admin-title-row,
html[data-theme="dark"] .camera-card .admin-title-field{
    background:#18191B !important;
}
html[data-theme="dark"] .camera-card input[id^="stream-title-"]{
    background:transparent !important;
}


/* =========================================================
   COURT LIVE — TITLE BACKGROUND FINAL
   Use the exact page background token on the real title DIV.
   No button/card responsive experiments in this build.
   ========================================================= */
.camera-card .admin-stream-settings.admin-title-only,
.camera-card .admin-stream-settings.admin-title-only:disabled,
.camera-card .admin-stream-settings.admin-title-only.is-disabled{
    background:var(--ui-bg) !important;
    background-color:var(--ui-bg) !important;
}
.camera-card .admin-stream-settings.admin-title-only .admin-title-input,
.camera-card .admin-stream-settings.admin-title-only input[id^="stream-title-"]{
    background:transparent !important;
    background-color:transparent !important;
}


/* COURT LIVE — TITLE EXACT LIGHT GREY */
html:not([data-theme="dark"]) .camera-card .admin-stream-settings.admin-title-only,
html:not([data-theme="dark"]) .camera-card .admin-stream-settings.admin-title-only:disabled,
html:not([data-theme="dark"]) .camera-card .admin-stream-settings.admin-title-only.is-disabled{
    background:#F5F6F8 !important;
    background-color:#F5F6F8 !important;
}
html:not([data-theme="dark"]) .camera-card .admin-stream-settings.admin-title-only .admin-title-input,
html:not([data-theme="dark"]) .camera-card .admin-stream-settings.admin-title-only input[id^="stream-title-"]{
    background:transparent !important;
    background-color:transparent !important;
}


/* COURT LIVE — TITLE BACKGROUND, LIGHT + DARK COHERENT */
html:not([data-theme="dark"]) .camera-card .admin-stream-settings.admin-title-only{
    background:#F5F6F8 !important;
    background-color:#F5F6F8 !important;
}
html[data-theme="dark"] .camera-card .admin-stream-settings.admin-title-only,
html[data-theme="dark"] .camera-card .admin-stream-settings.admin-title-only:disabled,
html[data-theme="dark"] .camera-card .admin-stream-settings.admin-title-only.is-disabled{
    background:#18191B !important;
    background-color:#18191B !important;
}
html[data-theme="dark"] .camera-card .admin-stream-settings.admin-title-only .admin-title-input,
html[data-theme="dark"] .camera-card .admin-stream-settings.admin-title-only input[id^="stream-title-"]{
    background:transparent !important;
    background-color:transparent !important;
}

/* Error popup: its single Close action fills the complete row. */
#error-modal .admin-login-actions{
    grid-template-columns:minmax(0,1fr) !important;
}
#error-modal #error-modal-ok{
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:none !important;
}


/* Locked Video Title placeholder: only "--" is bold; real titles stay normal. */
input[id^="stream-title-"]{
    font-weight:400 !important;
}
input[id^="stream-title-"].is-locked-placeholder{
    font-weight:400 !important;
}

/* Video title field color */
.admin-title-input{
    color:#9E9E9E !important;
}

.admin-title-input::placeholder{
    color:#9E9E9E !important;
    opacity:1;
    font-weight:400 !important;
}

/* Locked "Video Title Here" uses the same grey as the editable title. */
.admin-title-input.is-locked-placeholder{
    color:#9E9E9E !important;
    -webkit-text-fill-color:#9E9E9E !important;
    opacity:1 !important;
    font-weight:400 !important;
}


/* =========================================================
   FINAL VIDEO TITLE COLOR
   Editable title + locked "Video Title Here" = #9E9E9E
   ========================================================= */
html body .camera-card .admin-title-input,
html body .camera-card .admin-title-input:disabled,
html body .camera-card .admin-title-input[disabled],
html body .camera-card .admin-title-input.is-locked-placeholder,
html body .camera-card input[id^="stream-title-"],
html body .camera-card input[id^="stream-title-"]:disabled,
html body .camera-card input[id^="stream-title-"].is-locked-placeholder,
html[data-theme="dark"] body .camera-card .admin-title-input,
html[data-theme="dark"] body .camera-card .admin-title-input:disabled,
html[data-theme="dark"] body .camera-card .admin-title-input.is-locked-placeholder {
    color: #9E9E9E !important;
    -webkit-text-fill-color: #9E9E9E !important;
    opacity: 1 !important;
    font-weight: 400 !important;
}

html body .camera-card .admin-title-input::placeholder,
html body .camera-card input[id^="stream-title-"]::placeholder {
    color: #9E9E9E !important;
    -webkit-text-fill-color: #9E9E9E !important;
    opacity: 1 !important;
    font-weight: 400 !important;
}

/* Locked controls remain visually disabled, but their hit area explains why. */
.stream-button-hitarea{
    display:contents;
}
[data-locked-control]{
    cursor:pointer;
}
[data-locked-control] .admin-title-input:disabled,
[data-locked-control] .admin-title-input[readonly],
[data-locked-control] .admin-visibility-button:disabled,
.stream-button-hitarea .stream-button:disabled{
    pointer-events:none;
}
.stream-button:disabled,
.camera-card.is-error .stream-button:disabled,
.global-stream-button:disabled{
    cursor:pointer !important;
}

/* Unavailable popup: one full-width Close action. */
#unavailable-modal .admin-login-actions{
    grid-template-columns:minmax(0,1fr) !important;
}
#unavailable-modal #unavailable-modal-ok{
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:none !important;
}

/* Start/Stop use aria-disabled so locked buttons remain clickable for the Unavailable popup. */
.stream-button[aria-disabled="true"],
.camera-card.is-error .stream-button[aria-disabled="true"]{
    background:var(--cl-bg) !important;
    color:var(--cl-muted) !important;
    cursor:pointer !important;
}
.stream-button[aria-disabled="true"] .stream-icon{
    color:var(--cl-muted) !important;
}
.camera-card.is-online .stream-start[aria-disabled="true"],
.camera-card.is-live .stream-stop[aria-disabled="true"]{
    color:var(--cl-muted) !important;
}

/* FINAL Start/Stop lock model: clickable lock uses aria-disabled, never native disabled. */
.stream-button[aria-disabled="true"]{
    background:var(--cl-bg) !important;
    color:var(--cl-muted) !important;
    cursor:pointer !important;
}
.stream-button[aria-disabled="true"] .stream-icon{
    color:var(--cl-muted) !important;
}
.camera-card.is-online .stream-start[aria-disabled="false"]{
    color:#25D366 !important;
}
.camera-card.is-live .stream-stop[aria-disabled="false"]{
    color:#FF0000 !important;
}

/* FINAL: locked Start / Stop keep the same white background as active controls. */
.stream-button[aria-disabled="true"],
.camera-card.is-error .stream-button[aria-disabled="true"]{
    background:#FFFFFF !important;
    cursor:pointer !important;
}
.stream-button[aria-disabled="true"] .stream-icon{
    color:var(--cl-muted) !important;
}

/* FINAL locked Start / Stop colors:
   Light mode: white background + dark-grey icon.
   Dark mode: dark background + white icon. */
html:not([data-theme="dark"]) .stream-button[aria-disabled="true"],
html:not([data-theme="dark"]) .camera-card.is-error .stream-button[aria-disabled="true"]{
    background:#FFFFFF !important;
    color:#3B3B3B !important;
}
html:not([data-theme="dark"]) .stream-button[aria-disabled="true"] .stream-icon{
    color:#3B3B3B !important;
}

html[data-theme="dark"] .stream-button[aria-disabled="true"],
html[data-theme="dark"] .camera-card.is-error .stream-button[aria-disabled="true"]{
    background:var(--cl-bg) !important;
    color:#FFFFFF !important;
}
html[data-theme="dark"] .stream-button[aria-disabled="true"] .stream-icon{
    color:#FFFFFF !important;
}

/* FINAL locked Start / Stop icon colors.
   Light: Court Live dark grey.
   Dark: theme muted/light grey. */
html:not([data-theme="dark"]) .stream-button[aria-disabled="true"],
html:not([data-theme="dark"]) .camera-card.is-error .stream-button[aria-disabled="true"]{
    color:#303030 !important;
}
html:not([data-theme="dark"]) .stream-button[aria-disabled="true"] .stream-icon{
    color:#303030 !important;
}

html[data-theme="dark"] .stream-button[aria-disabled="true"],
html[data-theme="dark"] .camera-card.is-error .stream-button[aria-disabled="true"]{
    color:var(--cl-muted) !important;
}
html[data-theme="dark"] .stream-button[aria-disabled="true"] .stream-icon{
    color:var(--cl-muted) !important;
}

/* FINAL dark-mode Start / Stop surface.
   Active and locked buttons use exactly the same control background. */
html[data-theme="dark"] .admin-actions-three,
html[data-theme="dark"] .admin-actions-three .stream-button,
html[data-theme="dark"] .admin-actions-three .stream-button[aria-disabled="true"],
body.dark-mode .admin-actions-three,
body.dark-mode .admin-actions-three .stream-button,
body.dark-mode .admin-actions-three .stream-button[aria-disabled="true"]{
    background:var(--ui-control) !important;
}

/* Locked icon remains muted; active semantic colors remain green/red. */
html[data-theme="dark"] .admin-actions-three .stream-button[aria-disabled="true"],
html[data-theme="dark"] .admin-actions-three .stream-button[aria-disabled="true"] .stream-icon,
body.dark-mode .admin-actions-three .stream-button[aria-disabled="true"],
body.dark-mode .admin-actions-three .stream-button[aria-disabled="true"] .stream-icon{
    color:var(--ui-secondary) !important;
    -webkit-text-fill-color:var(--ui-secondary) !important;
}
html[data-theme="dark"] .camera-card.is-online .admin-actions-three .stream-start[aria-disabled="false"],
body.dark-mode .camera-card.is-online .admin-actions-three .stream-start[aria-disabled="false"]{
    color:#25D366 !important;
    -webkit-text-fill-color:#25D366 !important;
}
html[data-theme="dark"] .camera-card.is-live .admin-actions-three .stream-stop[aria-disabled="false"],
body.dark-mode .camera-card.is-live .admin-actions-three .stream-stop[aria-disabled="false"]{
    color:#FF0000 !important;
    -webkit-text-fill-color:#FF0000 !important;
}