/* ============================================================
   VDO.Ninja custom theme — Aurora x LizaAlert (self-hosted)
   Inter 400/500/600/700/800 served locally from ./fonts/
   ============================================================ */

/* Inter self-hosted fonts (generated) */
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(./fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================
   VDO.Ninja Custom Theme: Aurora × ЛизаАлерт
   ============================================ */
/* @import removed — Inter is self-hosted below (see ./fonts/) */

:root {
    --la-orange: #FF5500;
    --la-orange-glow: rgba(255, 85, 0, 0.4);
    --aurora-bg: #0B0B14;
    --aurora-glass: rgba(20, 20, 35, 0.65);
    --aurora-glass-border: rgba(255, 255, 255, 0.08);
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --button-radius: 12px;
}

/* 1. Глобальный фон и типографика */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background-color: var(--aurora-bg) !important;
    color: var(--text-primary) !important;
}

/* Анимированный фон "Северное сияние" с тёплым оранжевым акцентом */
body::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(100, 50, 255, 0.25), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 85, 0, 0.15), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(50, 150, 255, 0.2), transparent 60%);
    animation: aurora-flow 25s ease-in-out infinite alternate;
    z-index: -1;
    pointer-events: none;
}

@keyframes aurora-flow {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    50% { transform: translate(3%, -3%) rotate(180deg) scale(1.1); }
    100% { transform: translate(-2%, 2%) rotate(360deg) scale(1); }
}

/* 2. Контейнер видео (Сетка) */
#videos {
    background: transparent !important;
    padding: 20px !important;
}

/* 3. Карточки видео (Glassmorphism + ЛизаАлерт структура) */
.videoContainer {
    background: var(--aurora-glass) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--aurora-glass-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
}

.videoContainer:hover {
    border-color: var(--la-orange) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 20px var(--la-orange-glow) !important;
    transform: translateY(-2px) !important;
}

/* Имя участника (чётко, контрастно, как в отчётах) */
.videoContainer .video-name, 
.videoContainer .video-label {
    background: rgba(11, 11, 20, 0.85) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    backdrop-filter: blur(4px) !important;
    border-left: 3px solid var(--la-orange) !important;
}

/* 4. Нижняя панель управления */
#controls, .control-bar {
    background: var(--aurora-glass) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-top: 1px solid var(--aurora-glass-border) !important;
    padding: 16px 24px !important;
    border-radius: 20px 20px 0 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
}

/* 5. Кнопки управления */
.control-button, button[id^="btn_"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--aurora-glass-border) !important;
    color: var(--text-primary) !important;
    border-radius: var(--button-radius) !important;
    transition: all 0.25s ease !important;
    width: 56px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.control-button:hover, button[id^="btn_"]:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Активное состояние (Фирменный оранжевый ЛизаАлерт) */
.control-button.active, 
.control-button.on,
button[id^="btn_"].active {
    background: var(--la-orange) !important;
    border-color: var(--la-orange) !important;
    color: white !important;
    box-shadow: 0 4px 16px var(--la-orange-glow) !important;
}

/* Кнопка завершения (Сброс/Тревога) */
.control-button.hangup, 
button#hangup, 
button[id*="hangup"] {
    background: rgba(255, 50, 50, 0.15) !important;
    border-color: rgba(255, 50, 50, 0.3) !important;
    color: #FF5555 !important;
}

.control-button.hangup:hover, 
button#hangup:hover,
button[id*="hangup"]:hover {
    background: #FF3333 !important;
    border-color: #FF3333 !important;
    color: white !important;
    box-shadow: 0 4px 20px rgba(255, 51, 51, 0.4) !important;
}

/* 6. Замена иконок на "Штабные" (Набор А) */
/* Микрофон -> Гарнитура */
.control-button i.la-microphone::before,
.control-button i.la-microphone-slash::before {
    content: "\f10e" !important; /* Код иконки la-headset в Line Awesome */
}
/* Камера -> Глаз (контроль) */
.control-button i.la-video::before,
.control-button i.la-video-slash::before {
    content: "\f06e" !important; /* Код иконки la-eye */
}
/* Демонстрация экрана -> Карта */
.control-button i.la-desktop::before {
    content: "\f279" !important; /* Код иконки la-map */
}
/* Чат -> Спутниковая тарелка */
.control-button i.la-comments::before {
    content: "\f7c0" !important; /* Код иконки la-satellite-dish */
}
/* Завершить -> Питание */
.control-button i.la-phone-slash::before {
    content: "\f011" !important; /* Код иконки la-power-off */
}

/* Увеличиваем размер иконок для лучшей читаемости */
.control-button i, button[id^="btn_"] i {
    font-size: 22px !important;
}

/* 7. Дополнительные элементы интерфейса (Чат, Директор) */
#chatModule, .directorContainer, .promptModal {
    background: var(--aurora-glass) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid var(--aurora-glass-border) !important;
    border-radius: 12px !important;
    color: var(--text-primary) !important;
}

/* 8. Кастомные скроллбары */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}
::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.2) !important;
    border-radius: 4px !important;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--la-orange) !important;
}
/* ============================================================
   Dropdown / Select кнопки — тёмный фон + оранжевая рамка
   ============================================================ */

/* Базовые select элементы */
select,
select option,
.form-group select,
.multiselect select {
    background-color: rgba(30, 30, 40, 0.9) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
}

/* При фокусе/активации — оранжевая рамка */
select:focus,
select:active,
.form-group select:focus,
.form-group select:active,
.multiselect select:focus,
.multiselect select:active {
    border-color: var(--la-orange) !important;
    box-shadow: 0 0 8px var(--la-orange-glow) !important;
    outline: none !important;
}

/* Popup селекторы */
.popupSelector,
.popupSelector_constraints,
.popupSelector_constraints_audio,
.popupSelector_constraints_video,
.popupSelector_user_settings {
    background: var(--aurora-glass) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid var(--aurora-glass-border) !important;
    border-radius: 12px !important;
}

.popupSelector:focus,
.popupSelector:active {
    border-color: var(--la-orange) !important;
    box-shadow: 0 0 12px var(--la-orange-glow) !important;
}

/* Dropdown контейнеры */
.dropdown,
.dropdown-container,
.select-btn,
.select-camera,
.select-audio-source {
    background-color: rgba(30, 30, 40, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    color: var(--text-primary) !important;
}

.dropdown:focus,
.dropdown:active,
.select-btn:focus,
.select-btn:active,
.select-camera:focus,
.select-camera:active,
.select-audio-source:focus,
.select-audio-source:active {
    border-color: var(--la-orange) !important;
    box-shadow: 0 0 10px var(--la-orange-glow) !important;
}

/* Опции в dropdown */
.dropdown option,
select option {
    background-color: rgba(20, 20, 35, 0.95) !important;
    color: var(--text-primary) !important;
    padding: 8px 12px !important;
}

.dropdown option:hover,
.dropdown option:focus,
select option:hover,
select option:focus {
    background-color: var(--la-orange) !important;
    color: #FFFFFF !important;
}

/* Menu popup */
.menu__submenu {
    background: var(--aurora-glass) !important;
    backdrop-filter: blur(24px) !important;
    border: 1px solid var(--aurora-glass-border) !important;
    border-radius: 12px !important;
}

.menu__submenu:focus,
.menu__submenu:active {
    border-color: var(--la-orange) !important;
}

/* ============================================================
   Иконки Line Awesome — все белые для единообразия
   ============================================================ */

/* Все иконки Line Awesome — белые */
i.las,
i.la,
i[class*="las "],
i[class*="la-"],
.las,
.la {
    color: #FFFFFF !important;
}

/* Иконки в кнопках приложений (верхняя панель) */
.gobutton i,
.gobutton .las,
.gobutton .la,
.testtonebutton i,
.testtonebutton .las,
.testtonebutton .la,
.director-link-icons,
.director-link-icons.las,
.director-link-icons.la {
    color: #FFFFFF !important;
}

/* Иконки в меню настроек */
#mutetoggle,
#mutevideotoggle,
#screensharetoggle,
#chattoggle,
#filesharetoggle,
#queuetoggle,
#websitesharetoggle,
#meshDebugBtn,
.la-file-upload,
.la-comment-alt,
.la-desktop,
.la-video,
.la-microphone,
.la-volume-up,
.la-window-maximize,
.la-cloud-upload-alt,
.la-users,
.la-eye,
.la-podcast,
.la-file-video,
.la-external-link-alt,
.la-qrcode,
.la-paperclip,
.la-long-arrow-alt-right,
.la-project-diagram,
.la-tv {
    color: #FFFFFF !important;
}

/* При наведении — можно добавить лёгкий эффект */
i.las:hover,
i.la:hover,
.las:hover,
.la:hover {
    color: #FFFFFF !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important;
}

/* Если есть иконки с inline style="color: ..." — переопределить */
[style*="color:"] i.las,
[style*="color:"] i.la,
i[style*="color:"].las,
i[style*="color:"].la {
    color: #FFFFFF !important;
}

/* ============================================================
   Главные кнопки на главной странице — единый стиль
   ============================================================ */

/* Карточки кнопок — тёмно-серый фон */
.gobutton,
.gowebcam,
.testtonebutton,
.screen-share-button,
.audio-source-button,
.video-source-button {
    background: linear-gradient(135deg, rgba(40, 40, 55, 0.95), rgba(30, 30, 45, 0.95)) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: #FFFFFF !important;
}

/* Иконки в карточках — цвет #27255b */
.gobutton i,
.gobutton .las,
.gobutton .la,
.gowebcam i,
.gowebcam .las,
.gowebcam .la,
.testtonebutton i,
.testtonebutton .las,
.testtonebutton .la,
.director-link-icons,
.director-link-icons.las,
.director-link-icons.la {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

/* SVG иконки тоже */
.gobutton svg,
.gowebcam svg,
.testtonebutton svg,
.director-link-icons svg {
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* При наведении — лёгкая подсветка */
.gobutton:hover,
.gowebcam:hover,
.testtonebutton:hover {
    background: linear-gradient(135deg, rgba(50, 50, 70, 0.95), rgba(40, 40, 60, 0.95)) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Текст в кнопках — белый */
.gobutton,
.gowebcam,
.testtonebutton {
    color: #FFFFFF !important;
}

/* Если есть span внутри кнопок */
.gobutton span,
.gowebcam span,
.testtonebutton span {
    color: #FFFFFF !important;
}

/* ============================================================
   Главные карточки на странице (director layout)
   ============================================================ */

/* Фон карточек - тёмно-серый */
.card,
.column.card,
.columnfade.pointer.card {
    background: linear-gradient(135deg, rgba(45, 45, 65, 0.95), rgba(35, 35, 55, 0.95)) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}

/* Иконки в карточках - цвет #27255b */
.card i,
.card .las,
.card .la,
.card svg,
.director-link-icons,
.director-link-icons.las,
.director-link-icons.la {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* Текст в карточках - белый */
.card h2,
.card h3,
.card span,
.card [data-translate],
.card .column {
    color: #FFFFFF !important;
}

/* При наведении - подсветка */
.card:hover,
.column.card:hover,
.columnfade.pointer.card:hover {
    background: linear-gradient(135deg, rgba(55, 55, 80, 0.95), rgba(45, 45, 70, 0.95)) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Container карточек */
#container-1,
#container-2,
#container-3,
#container-3a,
#container-4,
#container-5,
#container-6,
#container-7,
#container-8,
#container-9,
#container-10,
#container-11,
#container-12,
#container-13,
#container-14,
#container-15,
#container-18,
#container-19,
#container-20,
#container-21 {
    background: linear-gradient(135deg, rgba(45, 45, 65, 0.95), rgba(35, 35, 55, 0.95)) !important;
}

/* Иконки в container - #27255b */
#container-1 i,
#container-2 i,
#container-3 i,
#container-3a i,
#container-4 i,
#container-1 .las,
#container-2 .las,
#container-3 .las,
#container-3a .las,
#container-4 .las,
#container-1 .la,
#container-2 .la,
#container-3 .la,
#container-3a .la,
#container-4 .la {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

/* ============================================================
   SVG иконки в первых карточках — белые
   ============================================================ */

/* Все SVG в карточках */
.card svg,
.column.card svg,
.columnfade.pointer.card svg,
#container-1 svg,
#container-2 svg,
#container-3 svg,
#container-3a svg,
#container-4 svg,
#container-5 svg,
#container-6 svg {
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* Конкретные SVG классы иконок */
.screenshare-icon svg,
.camera-icon svg,
.mic-icon svg,
.desktop-icon svg,
.paper-plane-icon svg,
.file-icon svg {
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* SVG path внутри иконок */
.card svg path,
.column.card svg path,
#container-1 svg path,
#container-2 svg path,
#container-3 svg path,
#container-4 svg path {
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}