:root {
    --txt: #e8eefc;
    --muted: rgba(232, 238, 252, .72);
    --br: rgba(255, 255, 255, .12);
    --primary-blue: #4f7cff;
    --primary-green: #22c55e;
    --primary-orange: #f59e0b;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    min-height: 100%;
}

body {
    font-family: "Cairo", Tahoma, Arial, sans-serif;
    background: radial-gradient(1200px 700px at 85% -10%, rgba(79,124,255,.20), transparent 60%), radial-gradient(900px 600px at 0% 0%, rgba(34,197,94,.16), transparent 55%), linear-gradient(180deg, #0b1220, #0a0f1a 60%, #09111d);
    min-height: 100vh;
    color: var(--txt);
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.formPage {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.glassTop {
    background: rgba(10,15,26,.70);
    border-bottom: 1px solid var(--br);
    backdrop-filter: blur(12px);
}

.brandLogo {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--br);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

    .brandLogo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 6px;
        display: block;
    }

.heroWrap {
    position: relative;
    padding: 42px 0 14px;
}

.heroCard {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid var(--br);
    background: linear-gradient(180deg, rgba(15,26,47,.94), rgba(16,30,54,.88));
    box-shadow: 0 28px 70px rgba(0,0,0,.28);
    padding: 34px 26px;
}

.heroGlow1,
.heroGlow2 {
    position: absolute;
    border-radius: 999px;
    filter: blur(18px);
    opacity: .6;
    pointer-events: none;
}

.heroGlow1 {
    width: 220px;
    height: 220px;
    background: rgba(79,124,255,.22);
    top: -60px;
    left: -40px;
}

.heroGlow2 {
    width: 180px;
    height: 180px;
    background: rgba(34,197,94,.18);
    bottom: -50px;
    right: -30px;
}

.heroTitle {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 12px;
}

.heroSub {
    color: var(--muted);
    font-size: 15px;
    max-width: 760px;
    line-height: 1.9;
    margin-bottom: 0;
}

.heroPills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.heroPill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--br);
    color: var(--txt);
    font-size: 13px;
}

    .heroPill a {
        color: var(--txt);
        text-decoration: none;
        font-weight: 700;
    }

        .heroPill a:hover {
            color: #fff;
        }

.rolesSection {
    padding: 24px 0 20px;
}

.portalCard {
    position: relative;
    display: block;
    width: 100%;
    text-align: right;
    text-decoration: none !important;
    color: var(--txt) !important;
    height: 100%;
    border-radius: 22px;
    border: 1px solid var(--br);
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025));
    box-shadow: 0 22px 60px rgba(0,0,0,.22);
    overflow: hidden;
    transition: .22s ease;
    cursor: pointer;
}

    .portalCard:hover,
    .portalCard.active {
        transform: translateY(-4px);
        border-color: rgba(79,124,255,.30);
        box-shadow: 0 28px 70px rgba(0,0,0,.28);
    }

    .portalCard::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(79,124,255,.08), transparent 40%, rgba(34,197,94,.05));
        opacity: 0;
        transition: .22s ease;
        pointer-events: none;
    }

    .portalCard:hover::after,
    .portalCard.active::after {
        opacity: 1;
    }

.portalBody {
    position: relative;
    z-index: 2;
    padding: 18px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.portalHead {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 2px;
}

.portalIcon {
    width: 44px;
    height: 44px;
    font-size: 18px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--br);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    flex: 0 0 44px;
}

    .portalIcon.student {
        background: linear-gradient(135deg, rgba(79,124,255,.22), rgba(79,124,255,.08));
        color: #aecdff;
    }

    .portalIcon.teacher {
        background: linear-gradient(135deg, rgba(245,158,11,.20), rgba(245,158,11,.08));
        color: #ffd894;
    }

    .portalIcon.admin {
        background: linear-gradient(135deg, rgba(34,197,94,.22), rgba(34,197,94,.08));
        color: #b8f5cc;
    }

.portalTitle {
    font-size: 18px;
    font-weight: 900;
    margin: 0;
}

.portalText {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 4px;
    color: var(--muted);
    min-height: 42px;
}

.portalBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding: 8px 14px;
    min-width: 130px;
    font-size: 13px;
    border-radius: 16px;
    font-weight: 800;
    border: 0;
    text-decoration: none !important;
    align-self: flex-start;
}

    .portalBtn.student {
        background: linear-gradient(135deg, #4f7cff, #6aa6ff);
        color: #07101e !important;
    }

    .portalBtn.teacher {
        background: linear-gradient(135deg, #f59e0b, #fbbf24);
        color: #231500 !important;
    }

    .portalBtn.admin {
        background: linear-gradient(135deg, #22c55e, #6ee7b7);
        color: #05150c !important;
    }

.authSection {
    padding: 14px 0 50px;
}

.authShell {
    border-radius: 30px;
    border: 1px solid var(--br);
    background: linear-gradient(180deg, rgba(15,26,47,.94), rgba(16,30,54,.88));
    box-shadow: 0 28px 70px rgba(0,0,0,.28);
    overflow: hidden;
}

.authMain {
    padding: 28px;
}

.authSectionHidden {
    display: none;
}

.authSectionShow {
    display: block;
    animation: fadeInUp .28s ease;
}

.loginPanel {
    display: none;
}

    .loginPanel.active {
        display: block;
        animation: fadeInUp .25s ease;
    }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.formCard {
    position: relative;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    border-radius: 24px;
    padding: 22px;
}

.formCloseBtn {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
}

.logoMiniWrap {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.logoMini {
    width: 94px;
    height: 94px;
    border-radius: 22px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--br);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .logoMini img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 10px;
        display: block;
    }

.formTitle {
    text-align: center;
    font-size: 22px;
    font-weight: 900;
    margin-bottom: 5px;
}

.formSub {
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 22px;
}

.stack > * {
    margin-bottom: 12px;
}

    .stack > *:last-child {
        margin-bottom: 0;
    }

.input-group-text {
    border-radius: 14px !important;
    border-color: rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.04) !important;
    color: var(--txt) !important;
}

.form-control,
.form-select {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.14) !important;
    color: var(--txt) !important;
    border-radius: 14px !important;
    padding: .75rem .85rem;
    font-size: 16px !important;
}

    .form-control::placeholder {
        color: rgba(232,238,252,.55);
    }

.input-group .form-control,
.input-group .form-select,
.input-group > .select2-container .select2-selection {
    height: 48px !important;
}

.btnStudent {
    background: linear-gradient(135deg, #4f7cff, #6aa6ff) !important;
    border: none !important;
    color: #07101e !important;
    font-weight: 900;
    border-radius: 14px;
}

.btnTeacher {
    background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
    border: none !important;
    color: #231500 !important;
    font-weight: 900;
    border-radius: 14px;
}

.btnAdmin {
    background: linear-gradient(135deg, #22c55e, #6ee7b7) !important;
    border: none !important;
    color: #05150c !important;
    font-weight: 900;
    border-radius: 14px;
}

.btnGhost {
    border-radius: 14px;
}

.infoBox {
    margin-top: 10px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
}

.teacherLookupBox {
    transition: all .25s ease;
}

.teacherLookupCompact {
    padding: 10px 12px !important;
    background: rgba(245,158,11,.08) !important;
    border-color: rgba(245,158,11,.18) !important;
}

    .teacherLookupCompact .lookupMain {
        display: none !important;
    }

.teacherFoundBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.teacherFoundInfo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.teacherFoundIcon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(245,158,11,.22), rgba(245,158,11,.08));
    color: #ffd894;
    border: 1px solid rgba(255,255,255,.10);
    flex: 0 0 38px;
}

.teacherFoundText {
    line-height: 1.5;
}

.teacherFoundName {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
}

.teacherFoundSub {
    font-size: 12px;
    color: var(--muted);
}

.teacherFoundActions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btnMiniGhost {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: var(--txt);
    border-radius: 12px;
    padding: 7px 12px;
    font-size: 13px;
    text-decoration: none !important;
}

    .btnMiniGhost:hover {
        background: rgba(255,255,255,.08);
        color: #fff;
    }

.teacherWelcome {
    font-size: 18px;
    font-weight: 800;
}

    .teacherWelcome span,
    .teacherSubject span {
        color: #bbf7d0;
    }

.teacherSubject {
    margin-top: 6px;
    font-size: 15px;
}

.fieldHint {
    margin-top: 6px;
    color: rgba(232,238,252,.58);
    font-size: 12px;
}

.miniSupportBox {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px dashed rgba(255,255,255,.10);
    background: rgba(255,255,255,.025);
    text-align: center;
}

    .miniSupportBox .title {
        font-weight: 800;
        margin-bottom: 3px;
    }

    .miniSupportBox .text {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.8;
    }

.inputErrorPulse {
    animation: errorPulse .55s ease;
    border-color: rgba(255,99,99,.75) !important;
    box-shadow: 0 0 0 .18rem rgba(255,99,99,.12) !important;
}

@keyframes errorPulse {
    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-3px);
    }

    40% {
        transform: translateX(3px);
    }

    60% {
        transform: translateX(-2px);
    }

    80% {
        transform: translateX(2px);
    }

    100% {
        transform: translateX(0);
    }
}

.footerNote {
    color: rgba(232,238,252,.50);
    text-align: center;
    font-size: 13px;
    margin-top: 26px;
}

.input-group > .select2-container {
    flex: 1 1 auto !important;
    width: 1% !important;
    min-width: 0 !important;
}

.select2-container--bootstrap4 .select2-selection {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 14px !important;
    min-height: 48px;
    position: relative !important;
    padding-left: 44px !important;
    padding-right: 12px !important;
}

.select2-container--bootstrap4 .select2-selection__rendered {
    color: var(--txt) !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    line-height: 46px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.select2-container--bootstrap4 .select2-selection__arrow {
    height: 46px !important;
    left: 10px !important;
    right: auto !important;
    position: absolute !important;
    top: 1px !important;
}

.select2-dropdown {
    background: #0f1a2f !important;
    border: 1px solid rgba(255,255,255,.14) !important;
}

.select2-results__option {
    color: var(--txt) !important;
}

.select2-results__option--highlighted {
    background: #4f7cff !important;
}

.modal-content.modalDark {
    background: linear-gradient(180deg, rgba(15,26,47,.98), rgba(16,30,54,.96));
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 22px;
    color: var(--txt);
}

.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.legal-modal .modal-content {
    background: #ffffff !important;
    color: #1f2937 !important;
    border: 0 !important;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.legal-modal .modal-header {
    background: #ffffff;
    border-bottom: 1px solid #e9ecef;
    padding: 18px 22px;
}

.legal-modal .modal-title {
    color: #1f2937 !important;
    font-weight: 800;
    font-size: 1.25rem;
}

.legal-modal .btn-close {
    box-shadow: none !important;
    opacity: 1;
}

.legal-modal .modal-body {
    background: #ffffff !important;
    color: #374151 !important;
    padding: 22px;
    line-height: 2;
    font-size: 15px;
    text-align: right;
}

    .legal-modal .modal-body p,
    .legal-modal .modal-body li,
    .legal-modal .modal-body div,
    .legal-modal .modal-body span {
        color: #374151 !important;
        opacity: 1 !important;
    }

    .legal-modal .modal-body strong,
    .legal-modal .modal-body h6 {
        color: #111827 !important;
        font-weight: 800;
    }

.legal-modal .modal-footer {
    background: #ffffff;
    border-top: 1px solid #e9ecef;
    padding: 14px 22px;
}

.legal-modal .btn-primary {
    border-radius: 10px;
    padding: 8px 18px;
    font-weight: 700;
}

.siteFooter {
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(7, 12, 22, .55);
    backdrop-filter: blur(10px);
    color: rgba(232,238,252,.72);
    text-align: center;
    padding: 16px 12px;
    font-size: 13px;
    line-height: 1.9;
}

    .siteFooter .footerInner {
        max-width: 1200px;
        margin: 0 auto;
    }

@media (max-width: 767.98px) {
    .heroCard,
    .authShell {
        border-radius: 24px;
    }

    .heroCard,
    .authMain {
        padding: 20px 16px;
    }

    .portalBody {
        padding: 20px 18px 16px;
    }

    .portalBtn {
        width: 100%;
        align-self: stretch;
    }

    .teacherFoundBar {
        flex-direction: column;
        align-items: stretch;
    }

    .teacherFoundActions {
        width: 100%;
    }

        .teacherFoundActions .btnMiniGhost {
            width: 100%;
            text-align: center;
        }
}

@media (max-width: 575.98px) {
    .glassTop .container > .d-flex {
        justify-content: center !important;
        text-align: center;
    }

    .heroPill {
        width: 100%;
        justify-content: center;
    }

    .legal-modal .modal-body {
        padding: 16px;
        font-size: 14px;
        line-height: 1.9;
    }

    .legal-modal .modal-header,
    .legal-modal .modal-footer {
        padding: 14px 16px;
    }

    .input-group .form-control,
    .input-group .form-select,
    .input-group > .select2-container .select2-selection {
        height: 52px !important;
    }

    .portalBtn,
    .btnStudent,
    .btnTeacher,
    .btnAdmin {
        min-height: 52px;
    }
}

@media (max-width: 420px) {
    .logoMini {
        width: 82px;
        height: 82px;
    }

    .formTitle {
        font-size: 20px;
    }
}
:root {
    --bg1: #07111f;
    --bg2: #0b1629;
    --bg3: #0f223d;
    --txt: #edf3ff;
    --muted: rgba(237,243,255,.74);
    --muted2: rgba(237,243,255,.54);
    --br: rgba(255,255,255,.10);
    --card: rgba(10,18,32,.82);
    --card2: rgba(12,23,40,.92);
    --soft: rgba(255,255,255,.05);
    --blue: #5b8cff;
    --green: #22c55e;
    --amber: #f59e0b;
    --red: #ef4444;
    --shadow: 0 20px 60px rgba(0,0,0,.28);
}

html, body {
    min-height: 100%;
}

body {
    font-family: "Cairo", Tahoma, Arial, sans-serif;
    color: var(--txt);
    background: radial-gradient(1000px 500px at 90% -10%, rgba(91,140,255,.22), transparent 60%), radial-gradient(800px 450px at -5% 0%, rgba(34,197,94,.16), transparent 55%), linear-gradient(180deg, var(--bg1), var(--bg2) 48%, #08111d 100%);
}

.pageShell {
    min-height: 100vh;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    backdrop-filter: blur(14px);
    background: rgba(6,12,22,.72);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 40px rgba(0,0,0,.16);
}

.brandWrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brandLogo {
    width: 50px;
    height: 50px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 25px rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
}

    .brandLogo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 7px;
        display: block;
    }

.brandTitle {
    font-weight: 900;
    font-size: 1.12rem;
}

.brandSub {
    color: var(--muted);
    font-size: .92rem;
}

.heroCard {
    background: linear-gradient(180deg, rgba(11,20,36,.84), rgba(10,18,33,.92)), radial-gradient(700px 260px at 100% 0%, rgba(91,140,255,.10), transparent 55%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 28px;
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
}

    .heroCard:before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    }

.heroHead {
    padding: 18px 18px 8px;
}

.welcomeBox {
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025));
    border-radius: 22px;
    padding: 16px;
    margin-bottom: 14px;
}

.welcomeTitle {
    font-size: 1.25rem;
    font-weight: 900;
    margin-bottom: 4px;
}

.welcomeText {
    color: var(--muted);
    font-size: .94rem;
}

.statusRibbon {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.liveBadgeX {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(245,158,11,.10);
    border: 1px solid rgba(245,158,11,.24);
    color: #ffe7ba;
    font-size: 13px;
    font-weight: 700;
}

    .liveBadgeX.live {
        background: rgba(34,197,94,.10);
        border-color: rgba(34,197,94,.24);
        color: #dbffe7;
    }

.liveDot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--amber);
}

.liveBadgeX.live .liveDot {
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(34,197,94,.6);
    animation: pulse 1.6s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34,197,94,.6);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(34,197,94,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34,197,94,0);
    }
}

.weakBadge {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(245,158,11,.12);
    border: 1px solid rgba(245,158,11,.26);
    color: #ffe7ba;
    font-size: 13px;
    font-weight: 700;
}

    .weakBadge.show {
        display: inline-flex;
    }

.infoGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
    padding: 0 18px 18px;
}

.infoCard {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025));
    border-radius: 20px;
    padding: 14px 14px 12px;
    min-height: 96px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

    .infoCard:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 3px;
        background: linear-gradient(90deg, rgba(91,140,255,.0), rgba(91,140,255,.8), rgba(34,197,94,.7));
        opacity: .9;
    }

.infoHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.infoLabel {
    color: var(--muted2);
    font-size: 12px;
    font-weight: 700;
}

.infoIcon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: #dbe8ff;
    font-size: 15px;
}

.infoValue {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    line-height: 1.5;
}

.infoSub {
    font-size: 12px;
    color: var(--muted2);
    margin-top: 2px;
}

.joinPanel {
    padding: 0 18px 18px;
}

.joinBar {
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.joinLeft {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.stageChip {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 22px;
    color: #dbe8ff;
}

.stageText {
    min-width: 0;
}

.stageNameBig {
    font-weight: 950;
    font-size: 22px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40vw;
}

.stageHint {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}

.joinRight {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.btnJoinPro {
    background: linear-gradient(135deg,#5b8cff,#22c55e) !important;
    border: none !important;
    color: #07101e !important;
    border-radius: 16px !important;
    padding: 12px 18px !important;
    min-width: 180px;
    font-weight: 950 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 14px 30px rgba(91,140,255,.18) !important;
}

    .btnJoinPro:hover {
        filter: brightness(1.04);
    }

.btnGlass {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    color: var(--txt) !important;
    border-radius: 14px !important;
    padding: 10px 16px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

    .btnGlass:hover {
        background: rgba(255,255,255,.09) !important;
    }

.statusBox {
    display: none;
    margin: 0 18px 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    padding: 12px 14px;
}

.statusDot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #f59e0b;
    display: inline-block;
}

.netBanner {
    display: none;
    margin: 0 18px 14px;
    border-radius: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(245,158,11,.24);
    background: rgba(245,158,11,.10);
    color: #ffe6b3;
    font-size: 13px;
    font-weight: 700;
}

    .netBanner.show {
        display: block;
    }

.meetingWrap {
    padding: 0 18px 18px;
}

#jitsiWrap {
    position: relative;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.09);
    overflow: hidden;
    background: #000;
    height: min(72vh, 790px);
    box-shadow: 0 18px 50px rgba(0,0,0,.32);
    display: none;
}

#jaas {
    width: 100%;
    height: 100%;
}

#jaasLoading {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: none;
    align-items: center;
    justify-content: center;
    background: radial-gradient(800px 300px at 50% 0%, rgba(91,140,255,.16), transparent 55%), linear-gradient(180deg, rgba(4,8,15,.96), rgba(7,11,18,.98));
}

.loaderBox {
    min-width: 290px;
    max-width: 92%;
    border-radius: 24px;
    padding: 26px 22px;
    text-align: center;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 50px rgba(0,0,0,.25);
}

.loaderTitle {
    font-size: 1.02rem;
    font-weight: 900;
    margin-bottom: 6px;
}

.loaderText {
    color: var(--muted);
    font-size: .92rem;
}

.bottomNote {
    text-align: center;
    color: var(--muted2);
    font-size: 13px;
    padding: 0 12px 18px;
}

@media (max-width: 992px) {
    .infoGrid {
        grid-template-columns: 1fr 1fr;
    }

    .stageNameBig {
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .brandLogo {
        width: 46px;
        height: 46px;
        border-radius: 15px;
    }

    .brandTitle {
        font-size: 1rem;
    }

    .brandSub {
        font-size: .82rem;
        line-height: 1.7;
    }

    .heroCard {
        border-radius: 22px;
    }

    .heroHead {
        padding: 14px 14px 8px;
    }

    .infoGrid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 0 14px 14px;
    }

    .joinPanel {
        padding: 0 14px 14px;
    }

    .joinBar {
        flex-direction: column;
        align-items: stretch;
    }

    .joinRight {
        width: 100%;
    }

    .btnJoinPro {
        width: 100%;
    }

    .statusBox {
        margin: 0 14px 12px;
    }

    .netBanner {
        margin: 0 14px 12px;
    }

    .meetingWrap {
        padding: 0 14px 14px;
    }

    #jitsiWrap {
        height: 68vh;
        border-radius: 18px;
    }

    .loaderBox {
        min-width: auto;
        width: 92%;
        padding: 22px 18px;
        border-radius: 20px;
    }
}
:root {
    --bg1: #07111f;
    --bg2: #0b1629;
    --bg3: #0f223d;
    --txt: #edf3ff;
    --muted: rgba(237,243,255,.72);
    --muted2: rgba(237,243,255,.52);
    --br: rgba(255,255,255,.10);
    --card: rgba(10,18,32,.82);
    --card2: rgba(12,23,40,.92);
    --soft: rgba(255,255,255,.05);
    --blue: #5b8cff;
    --green: #22c55e;
    --amber: #f59e0b;
    --red: #ef4444;
    --shadow: 0 20px 60px rgba(0,0,0,.28);
}

html, body {
    min-height: 100%;
}

body {
    font-family: "Cairo", Tahoma, Arial, sans-serif;
    color: var(--txt);
    background: radial-gradient(1000px 500px at 90% -10%, rgba(91,140,255,.22), transparent 60%), radial-gradient(800px 450px at -5% 0%, rgba(34,197,94,.16), transparent 55%), linear-gradient(180deg, var(--bg1), var(--bg2) 48%, #08111d 100%);
}

.pageShell {
    min-height: 100vh;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    backdrop-filter: blur(14px);
    background: rgba(6,12,22,.72);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 40px rgba(0,0,0,.16);
}

.brandWrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brandLogo {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 25px rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
}

    .brandLogo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 7px;
        display: block;
    }

.brandTitle {
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: .1px;
}

.brandSub {
    color: var(--muted);
    font-size: .92rem;
}

.heroCard {
    background: linear-gradient(180deg, rgba(11,20,36,.84), rgba(10,18,33,.92)), radial-gradient(700px 260px at 100% 0%, rgba(91,140,255,.10), transparent 55%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 28px;
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
}

    .heroCard:before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    }

.heroHead {
    padding: 18px 18px 8px 18px;
}

.statusRibbon {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.liveBadge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(34,197,94,.10);
    border: 1px solid rgba(34,197,94,.24);
    color: #dbffe7;
    font-size: 13px;
    font-weight: 700;
}

.liveDot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(34,197,94,.6);
    animation: pulse 1.6s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34,197,94,.6);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(34,197,94,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34,197,94,0);
    }
}

.weakBadge {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(245,158,11,.12);
    border: 1px solid rgba(245,158,11,.26);
    color: #ffe7ba;
    font-size: 13px;
    font-weight: 700;
}

    .weakBadge.show {
        display: inline-flex;
    }

.infoGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
    padding: 0 18px 18px 18px;
}

.infoCard {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025));
    border-radius: 20px;
    padding: 14px 14px 12px;
    min-height: 92px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

    .infoCard:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 3px;
        background: linear-gradient(90deg, rgba(91,140,255,.0), rgba(91,140,255,.8), rgba(34,197,94,.7));
        opacity: .9;
    }

.infoHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.infoLabel {
    color: var(--muted2);
    font-size: 12px;
    font-weight: 700;
}

.infoIcon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: #dbe8ff;
    font-size: 15px;
}

.infoValue {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    line-height: 1.5;
}

.infoSub {
    font-size: 12px;
    color: var(--muted2);
    margin-top: 2px;
}

.toolsBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 0 18px 14px 18px;
    flex-wrap: wrap;
}

.toolsLeft, .toolsRight {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: var(--muted);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
}

.btnGlass {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    color: var(--txt) !important;
    border-radius: 14px !important;
    padding: 10px 16px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

    .btnGlass:hover {
        background: rgba(255,255,255,.09) !important;
    }

.btnEnd {
    background: linear-gradient(135deg, #ff7b7b, #ef4444) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 14px !important;
    padding: 10px 16px !important;
    font-weight: 900 !important;
    box-shadow: 0 14px 30px rgba(239,68,68,.18) !important;
}

    .btnEnd:hover {
        filter: brightness(1.03);
    }

.meetingWrap {
    padding: 0 18px 18px 18px;
}

#jitsiWrap {
    position: relative;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.09);
    overflow: hidden;
    background: #000;
    height: min(72vh, 790px);
    box-shadow: 0 18px 50px rgba(0,0,0,.32);
}

#jaas {
    width: 100%;
    height: 100%;
}

#jaasLoading {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(800px 300px at 50% 0%, rgba(91,140,255,.16), transparent 55%), linear-gradient(180deg, rgba(4,8,15,.96), rgba(7,11,18,.98));
}

.loaderBox {
    min-width: 290px;
    max-width: 92%;
    border-radius: 24px;
    padding: 26px 22px;
    text-align: center;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 50px rgba(0,0,0,.25);
}

.loaderTitle {
    font-size: 1.02rem;
    font-weight: 900;
    margin-bottom: 6px;
}

.loaderText {
    color: var(--muted);
    font-size: .92rem;
}

.bottomNote {
    text-align: center;
    color: var(--muted2);
    font-size: 13px;
    padding: 0 12px 18px;
}

.netBanner {
    display: none;
    margin: 0 18px 14px 18px;
    border-radius: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(245,158,11,.24);
    background: rgba(245,158,11,.10);
    color: #ffe6b3;
    font-size: 13px;
    font-weight: 700;
}

    .netBanner.show {
        display: block;
    }

.sepDot {
    opacity: .35;
}

@media (max-width: 992px) {
    .infoGrid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    #jitsiWrap {
        height: 72vh;
    }
}

@media (max-width: 576px) {
    .brandLogo {
        width: 46px;
        height: 46px;
        border-radius: 15px;
    }

    .brandTitle {
        font-size: 1rem;
    }

    .brandSub {
        font-size: .82rem;
        line-height: 1.7;
    }

    .heroCard {
        border-radius: 22px;
    }

    .heroHead {
        padding: 14px 14px 8px 14px;
    }

    .infoGrid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 0 14px 14px 14px;
    }

    .toolsBar {
        padding: 0 14px 12px 14px;
    }

    .meetingWrap {
        padding: 0 14px 14px 14px;
    }

    .netBanner {
        margin: 0 14px 12px 14px;
    }

    #jitsiWrap {
        height: 68vh;
        border-radius: 18px;
    }

    .loaderBox {
        min-width: auto;
        width: 92%;
        padding: 22px 18px;
        border-radius: 20px;
    }
}
:root {
    --txt: #e8eefc;
    --muted: rgba(232,238,252,.70);
    --br: rgba(255,255,255,.12);
    --glass: rgba(255,255,255,.04);
    --glass2: rgba(255,255,255,.02);
    --line: rgba(255,255,255,.08);
    --head: rgba(255,255,255,.06);
    --hover: rgba(79,124,255,.08);
}

body {
    font-family: "Cairo",Tahoma,Arial,sans-serif;
    background: radial-gradient(1200px 600px at 80% -20%, rgba(79,124,255,.22), transparent 60%), radial-gradient(900px 500px at 0% 0%, rgba(34,197,94,.18), transparent 55%), linear-gradient(180deg,#0b1220,#0a0f1a);
    min-height: 100vh;
    color: var(--txt);
}

.glass {
    background: rgba(10,15,26,.72);
    border-bottom: 1px solid var(--br);
    backdrop-filter: blur(10px);
}

.liveWin.full {
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
}

.brandLogo {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--br);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .brandLogo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 6px;
        display: block;
    }

.cardX {
    background: linear-gradient(180deg, rgba(15,26,47,.95), rgba(16,30,54,.92));
    border: 1px solid var(--br);
    border-radius: 24px;
    box-shadow: 0 22px 60px rgba(0,0,0,.25);
}

.muted {
    color: var(--muted);
}

.pill {
    border: 1px solid var(--br);
    border-radius: 999px;
    padding: 6px 10px;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
    background: rgba(255,255,255,.03);
}

.btnPri {
    background: linear-gradient(135deg,#4f7cff,#22c55e) !important;
    border: none !important;
    color: #07101e !important;
    font-weight: 900;
    border-radius: 14px;
    box-shadow: 0 10px 20px rgba(79,124,255,.18);
}

.btnSoft {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid var(--br) !important;
    color: var(--txt) !important;
    border-radius: 14px;
}

    .btnSoft:hover {
        background: rgba(255,255,255,.10) !important;
    }

.form-control,
.form-select {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid var(--br) !important;
    color: var(--txt) !important;
    border-radius: 14px !important;
    padding: 11px 12px;
    box-shadow: none !important;
}

    .form-control:focus,
    .form-select:focus {
        border-color: rgba(79,124,255,.45) !important;
        box-shadow: 0 0 0 3px rgba(79,124,255,.12) !important;
    }

    .form-control::placeholder {
        color: rgba(232,238,252,.55);
    }

    .form-select option {
        color: #111;
    }

.statCard {
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025));
    border: 1px solid var(--br);
    border-radius: 20px;
    padding: 16px;
    height: 100%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.statVal {
    font-weight: 950;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: .3px;
}

.statLbl {
    color: var(--muted);
    font-size: 12px;
    margin-top: 4px;
}

/* ===== Table Premium ===== */
.tableX {
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 40px rgba(0,0,0,.18);
    backdrop-filter: blur(12px);
}

.table {
    margin: 0 !important;
    background: transparent !important;
    color: var(--txt) !important;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: transparent;
    --bs-table-border-color: transparent;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

    .table thead th {
        background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
        color: #ffffff !important;
        font-weight: 800;
        font-size: 14px;
        letter-spacing: .2px;
        padding: 16px 14px !important;
        border: none !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
        text-align: center;
        white-space: nowrap;
    }

        .table thead th:first-child {
            border-top-right-radius: 18px;
        }

        .table thead th:last-child {
            border-top-left-radius: 18px;
        }

    .table tbody td {
        background: transparent !important;
        color: rgba(232,238,252,.96) !important;
        padding: 14px 12px !important;
        border: none !important;
        border-bottom: 1px solid rgba(255,255,255,.06) !important;
        text-align: center;
        vertical-align: middle !important;
        transition: .18s ease;
    }

    .table tbody tr:last-child td {
        border-bottom: none !important;
    }

    .table tbody tr:nth-child(even) td {
        background: rgba(255,255,255,.015) !important;
    }

    .table tbody tr:hover td {
        background: rgba(79,124,255,.08) !important;
    }

    .table tbody tr {
        transition: transform .15s ease;
    }

        .table tbody tr:hover {
            transform: scale(1.002);
        }

    /* stage cell */
    .table tbody td:first-child {
        font-weight: 800;
        color: #ffffff !important;
    }

/* ===== Chips ===== */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    color: #eef4ff;
    font-size: 12px;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #f59e0b;
    box-shadow: 0 0 10px rgba(245,158,11,.35);
    flex: 0 0 auto;
}

.chip.ok {
    background: rgba(34,197,94,.14);
    color: #bbf7d0;
    border: 1px solid rgba(34,197,94,.35);
}

    .chip.ok .dot {
        background: #22c55e;
        box-shadow: 0 0 10px rgba(34,197,94,.45);
    }

.chip.off {
    background: rgba(239,68,68,.12);
    color: #fecaca;
    border: 1px solid rgba(239,68,68,.30);
}

    .chip.off .dot {
        background: #ef4444;
        box-shadow: 0 0 10px rgba(239,68,68,.40);
    }

.chip.live {
    background: rgba(34,197,94,.14);
    color: #bbf7d0;
    border: 1px solid rgba(34,197,94,.35);
}

    .chip.live .dot {
        background: #22c55e;
        box-shadow: 0 0 10px rgba(34,197,94,.45);
    }

.chip.nolive {
    background: rgba(245,158,11,.12);
    color: #fde68a;
    border: 1px solid rgba(245,158,11,.30);
}

    .chip.nolive .dot {
        background: #f59e0b;
        box-shadow: 0 0 10px rgba(245,158,11,.35);
    }

.miniBtn {
    width: 40px;
    height: 40px;
    border-radius: 14px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

.joinBtn i {
    font-size: 16px;
}

/* Floating live windows */
.liveWin {
    position: fixed;
    width: 760px;
    height: 430px;
    background: #0f1a2f;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    box-shadow: 0 22px 60px rgba(0,0,0,.35);
    overflow: hidden;
    z-index: 6000;
}

    .liveWin.min {
        width: 320px;
        height: 56px;
    }

.liveWinHeader {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,.06);
    cursor: move;
    user-select: none;
}

.liveWinTitle {
    font-weight: 800;
    color: #e8eefc;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.liveWinBody {
    height: calc(100% - 56px);
    background: #000;
}

.liveWin.min .liveWinBody {
    display: none !important;
}

.liveBadge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    color: #e8eefc;
    background: rgba(34,197,94,.18);
}

/* Mobile */
@media (max-width: 768px) {
    .tableX {
        overflow-x: auto;
        border-radius: 18px;
    }

    .table {
        min-width: 760px;
    }

    .liveWin {
        width: calc(100vw - 20px);
        height: 72vh;
        left: 10px !important;
        top: 80px !important;
    }

    .statVal {
        font-size: 20px;
    }
}