.statusPanel{

    background:#39455e;

    border-radius:10px;

    padding:14px 18px;

    margin-top:15px;

}

.statusRow{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:8px 0;

    border-bottom:1px solid #444;

}

.statusRow span:first-child{

    color:#bdbdbd;

    font-weight:bold;

}

.statusRow span:last-child{

    color:white;

    font-weight:bold;

}

.viewerPanel{

    margin-top:22px;

    background:#27292c;

    border-radius:10px;

    padding:14px;

}

.viewerTitle{

    font-size:15px;

    font-weight:bold;

    color:#8fb8ff;

    margin-bottom:10px;

    text-align:left;

}

.viewer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:8px 0;

    border-bottom:1px solid #3b3d40;

}

.viewer:last-child{

    border-bottom:none;

}

.viewerName{

    color:white;

}

.viewerState{

    font-size:13px;

}

.viewerInfo{

    display:flex;

    flex-direction:column;

}

.viewerToken{

    color:#7b8794;

    font-size:12px;

    margin-top:2px;

}

.miniButton:hover{

    background:#4a4e53;

}

.viewerHeader{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:12px;

}

.videoHeader{

    width:100%;

    height:44px;

    background:#2b2d31;

    border-radius:10px 10px 0 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 18px;

    box-sizing:border-box;

    font-size:16px;

    font-weight:bold;

}

@keyframes logoPulse{

    0%{

        opacity:.25;

    }

    50%{

        opacity:.40;

    }

    100%{

        opacity:.25;

    }

}

#videoText{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    height:100%;

}

.videoLogo{

    text-align:center;

    user-select:none;
    animation:logoPulse 6s infinite ease-in-out;
}

.logoTitle{

    font-size:72px;

    color:white;

}

.logoSubtitle{

    color:white;

    font-size:24px;

}

.liveOff{

    color:#c05050;

}

.liveOn{

    color:#5fd66b;

}

.buttons{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:25px;

}

#videoBox{

    width:100%;

    height:520px;

    background:#000;

    border:2px solid #2b2d31;

    border-top:none;

    border-radius:0 0 10px 10px;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

button:active{
    transform:translateY(0);
    filter:brightness(95%);
}

.videoOff{
    background:#465772;

    color:white;

}

.videoOn{
    background:#2f7a52;
}

.recordButton{
    background:#8e3b3b;
}

.recording{

    background:#b93b3b !important;

}

.reconnectButton{
    background:#465772;

    color:white;

}

.settingsButton{
    background:#465772;

    color:white;

}

.logsButton{
    background:#465772;

    color:white;

}

.recordingsButton{
    background:#465772;

    color:white;

}
.controlBar{

    margin-top:12px;

    height:52px;

    background:var(--panel);

    border-radius:10px;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:var(--shadow);

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 14px;

}

.controlButtons{

    display:flex;

    align-items:center;

    gap:8px;

}

.controlButtons button{

    width:auto;

    min-width:92px;

    height:36px;

    padding:0 14px;

    border-radius:8px;

    font-size:13px;

    font-weight:600;

    letter-spacing:.2px;

}

.systemClock{

    font-family:Consolas, monospace;

    font-size:18px;

    font-weight:bold;

    color:#d8dee9;

    padding-left:18px;

    margin-left:18px;

    border-left:1px solid rgba(255,255,255,.15);

}

/* ---------- VIEWERS ---------- */

.viewerPanel{

    margin-top:20px;

    background:#2b2c2f;

    border-radius:10px;

    padding:15px;

}

.viewerTitle{

    color:#3BA7FF;

    font-size:15px;

    font-weight:bold;

    margin-bottom:12px;

    letter-spacing:1px;

}

.viewerRow{

    display:flex;

    align-items:center;

    padding:8px 0;

    border-bottom:1px solid #3a3b3d;

}

.viewerRow:last-child{

    border-bottom:none;

}

.viewerDot{

    width:28px;

    text-align:center;

}

.viewerName{

    color:#ECECEC;

    font-size:15px;

}

.viewerCount{

    background:#3BA7FF;

    color:white;

    padding:2px 10px;

    border-radius:20px;

    font-size:13px;

    font-weight:bold;

}

.viewerLeft{

    display:flex;

    align-items:center;

    gap:10px;

}

.viewerRow{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:8px 0;

    border-bottom:1px solid #3c3c3c;

}

.viewerAdd{

    margin-top:15px;

    width:100%;

    background:#37474F;

    color:#ECECEC;

}

.toast{

    position: fixed;

    right: 25px;
    bottom: 25px;

    background: #2b3442;

    color: white;

    padding: 12px 20px;

    border-radius: 8px;

    box-shadow: 0 4px 18px rgba(0,0,0,.35);

    opacity: 0;

    transform: translateY(20px);

    transition: opacity .25s ease,
                transform .25s ease;

    pointer-events: none;

    z-index: 9999;

}

.toast.show{

    opacity: 1;

    transform: translateY(0);

}

.viewerButtons{

    display:flex;

    gap:6px;

}

.viewerButtons button{

    width:30px;
    height:30px;

    border:none;
    border-radius:8px;

    cursor:pointer;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:15px;

    transition:.2s;
}

.viewerButtons button:hover{

    transform:scale(1.08);

}

.viewerCopy,
.viewerEdit,
.viewerDelete{

    width:34px !important;
    height:34px !important;

    min-width:34px;
    min-height:34px;

    padding:0;

    border:none;

    border-radius:8px;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    font-size:16px;

}

.viewerCopy{

    background:#2e8b57;

    color:white;

}

.viewerEdit{

    background:#3b82f6;

    color:white;

}

.viewerDelete{

    background:#d64545;

    color:white;

}

.dialogBack{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:10000;

}

.dialog{

    width:360px;

    background:#2b2d31;

    border-radius:12px;

    padding:22px;

    box-shadow:0 12px 30px rgba(0,0,0,.45);

}

.dialogTitle{

    font-size:20px;

    font-weight:bold;

    margin-bottom:20px;

}

.dialogInput{

    width:100%;

    box-sizing:border-box;

    height:42px;

    border:none;

    border-radius:8px;

    padding:0 12px;

    background:#3a3d42;

    color:white;

    font-size:15px;

}

.dialogButtons{

    display:flex;

    justify-content:flex-end;

    gap:10px;

    margin-top:20px;

}

.dialogCancel{

    background:#555;

    color:white;

}

.dialogOk{

    background:#2e8b57;

    color:white;

}

.viewerState{

    width:32px;
    height:32px;

    border:none;

    background:none;

    cursor:pointer;

    font-size:18px;

    padding:0;

}

.toolIcon{

    width:18px;
    height:18px;

    display:block;

    pointer-events:none;

}

.viewerIndicator{

    width:10px;
    height:10px;

    border-radius:50%;

    display:inline-block;

}

.viewerIndicator.online{

    background:#44d45a;

}

.viewerIndicator.offline{

    background:#707070;

}