body {
    background-color: #f4f6f9;
    font-family: 'Sarabun', 'Segoe UI', sans-serif;
}
.navbar-brand { font-weight: 700; }
.user-nav-symbols {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
.user-brand,
.user-nav-link {
    display: inline-flex;
    align-items: center;
}
.user-brand-icon,
.user-nav-icon {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}
.user-brand-icon {
    width: 27px;
    height: 27px;
    margin-right: 10px;
}
.user-nav-icon {
    width: 20px;
    height: 20px;
    margin-right: 7px;
}
.user-logout-link .user-nav-icon { margin-right: 0; }
.theme-icon-sun { display: none; }
html[data-theme="dark"] .theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-icon-sun { display: block; }
.user-theme-toggle {
    display: grid;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
}
.user-theme-toggle:hover { background: rgba(255, 255, 255, .1); }
.user-theme-toggle .user-nav-icon { margin-right: 0; }
.user-navbar { background: #1f2937 !important; }
.user-profile-menu { display: flex; align-items: center; }
.user-profile-toggle {
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: 8px;
    padding: 6px 9px !important;
    border: 0;
    border-radius: 10px;
    background: transparent;
    white-space: nowrap;
}
.user-profile-toggle:hover,
.user-profile-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .1); }
.user-profile-avatar {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}
.user-profile-name {
    max-width: 190px;
    overflow: hidden;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-profile-chevron {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    transition: transform .15s ease;
}
.user-profile-toggle[aria-expanded="true"] .user-profile-chevron { transform: rotate(180deg); }
.user-profile-dropdown {
    min-width: 220px;
    padding: 7px;
    border: 1px solid #d9e0e8;
    border-radius: 10px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .16);
}
.user-profile-dropdown .dropdown-item {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 11px;
    border-radius: 7px;
}
.user-profile-dropdown .dropdown-item svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}
.user-profile-page { max-width: 820px; margin: 0 auto; }
.user-profile-card { border-radius: 16px; }
@media (max-width: 900px) {
    .user-profile-name { display: none; }
    .user-profile-toggle { gap: 3px; }
}
.card { border: none; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.realtime-count-card {
    min-height: 100%;
    border: 1px solid rgba(14, 165, 233, .15);
    background: linear-gradient(145deg, #fff 45%, #f0fbff);
}
.realtime-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .1);
    color: #15803d;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    white-space: nowrap;
}
.realtime-badge > span,
.online-status-dot,
.online-status-label > span {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .13);
}
.realtime-badge > span,
.online-status-dot {
    animation: online-status-pulse 2s ease-out infinite;
}
.realtime-users-card { overflow: hidden; }
.realtime-users-header {
    display: flex;
    padding: 24px 26px 20px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.realtime-users-header h4 { font-weight: 700; }
.realtime-updated {
    flex: 0 0 auto;
    font-size: .86rem;
}
.realtime-users-table-wrap { border-top: 1px solid #e8edf3; }
.realtime-users-table thead th {
    padding: 13px 22px;
    border-bottom-width: 1px;
    background: #f8fafc;
    color: #64748b;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}
.realtime-users-table tbody td {
    padding: 14px 22px;
    border-color: #edf1f5;
}
.realtime-user-name {
    display: flex;
    align-items: center;
    gap: 11px;
    font-weight: 650;
    white-space: nowrap;
}
.realtime-user-avatar {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    border-radius: 50%;
    background: #e0efff;
    color: #2563aa;
    font-weight: 800;
}
.online-status-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #15803d;
    font-size: .86rem;
    font-weight: 700;
    white-space: nowrap;
}
.realtime-page-label {
    display: inline-flex;
    padding: 5px 10px;
    align-items: center;
    border: 1px solid #dbe7f4;
    border-radius: 999px;
    background: #f2f7fd;
    color: #35648e;
    font-size: .82rem;
    font-weight: 650;
    white-space: nowrap;
}
.realtime-page-label::before {
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: #3b82c4;
    content: '';
}
.online-status-label > span {
    width: 7px;
    height: 7px;
    flex-basis: 7px;
    box-shadow: none;
}
.realtime-empty {
    display: flex;
    min-height: 150px;
    padding: 28px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-top: 1px solid #e8edf3;
    color: #7b8797;
}
.online-status-dot.is-idle {
    background: #94a3b8;
    box-shadow: 0 0 0 4px rgba(148, 163, 184, .14);
    animation: none;
}
@keyframes online-status-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .36); }
    70%, 100% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
}
@media (max-width: 575px) {
    .realtime-users-header {
        padding: 20px;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
    .realtime-users-table thead th,
    .realtime-users-table tbody td { padding-right: 16px; padding-left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .realtime-badge > span,
    .online-status-dot { animation: none; }
}
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-page {
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 12% 17%, rgba(255, 255, 255, .9) 0, rgba(255, 255, 255, .4) 9%, transparent 22%),
        radial-gradient(circle at 86% 14%, rgba(244, 248, 255, .72) 0, transparent 18%),
        radial-gradient(circle at 18% 48%, rgba(113, 158, 224, .28) 0, transparent 13%),
        radial-gradient(circle at 76% 58%, rgba(82, 135, 211, .24) 0, transparent 15%),
        radial-gradient(circle at 30% 72%, rgba(133, 176, 230, .18) 0, transparent 10%),
        linear-gradient(180deg, #f8fafc 0%, #dbe3ef 17%, #7284a2 34%, #173766 53%, #0b2856 66%, #566e95 82%, #e4eaf3 94%, #fafbfd 100%);
    background-attachment: fixed;
}
.home-page::before,
.home-page::after {
    position: fixed;
    z-index: 0;
    border-radius: 50%;
    content: '';
    pointer-events: none;
    filter: blur(4px);
}
.home-page::before {
    top: -120px;
    left: -100px;
    width: 360px;
    height: 360px;
    background: rgba(255, 255, 255, .42);
    box-shadow:
        420px 390px 0 -150px rgba(160, 199, 239, .22),
        680px 520px 0 -162px rgba(255, 255, 255, .2),
        1020px 290px 0 -145px rgba(137, 180, 230, .2);
}
.home-page::after {
    right: -100px;
    bottom: -160px;
    width: 420px;
    height: 420px;
    background: rgba(27, 72, 145, .18);
}
.home-hero {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 100vh;
    padding: 72px 24px;
    place-items: center;
}
.home-welcome-card {
    width: fit-content;
    min-width: min(100%, 720px);
    max-width: calc(100vw - 48px);
    padding: 52px 54px 42px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 28px;
    background: rgba(249, 251, 255, .84);
    box-shadow: 0 28px 70px rgba(8, 28, 66, .24), inset 0 1px 0 rgba(255, 255, 255, .9);
    text-align: center;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.home-emblem {
    display: grid;
    width: 68px;
    height: 68px;
    margin: 0 auto 20px;
    place-items: center;
    border: 1px solid rgba(42, 102, 210, .2);
    border-radius: 20px;
    background: linear-gradient(145deg, #f8fbff, #dce9ff);
    color: #1e5fc4;
    box-shadow: 0 12px 28px rgba(30, 95, 196, .18);
}
.home-emblem svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}
.home-eyebrow {
    margin-bottom: 10px;
    color: #3568ad;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .18em;
}
.home-welcome-card h1 {
    margin: 0;
    color: #132743;
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 750;
    line-height: 1.18;
    white-space: nowrap;
}
.home-subtitle {
    max-width: 510px;
    margin: 18px auto 32px;
    color: #5f6f84;
    font-size: 1.08rem;
    line-height: 1.75;
}
.home-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.home-action {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    padding: 13px 20px;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.home-action svg {
    width: 22px;
    height: 22px;
    margin-right: 9px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}
.home-action-primary {
    background: linear-gradient(135deg, #246edb, #174cae);
    color: #fff;
    box-shadow: 0 12px 24px rgba(30, 91, 190, .25);
}
.home-action-primary:hover {
    color: #fff;
    box-shadow: 0 16px 30px rgba(30, 91, 190, .32);
    transform: translateY(-2px);
}
.home-action-secondary {
    border-color: rgba(38, 94, 178, .28);
    background: rgba(255, 255, 255, .62);
    color: #285b9d;
}
.home-action-secondary:hover {
    background: #fff;
    color: #174b93;
    box-shadow: 0 10px 24px rgba(25, 62, 116, .12);
    transform: translateY(-2px);
}
.home-help-text {
    display: flex;
    margin-top: 28px;
    align-items: center;
    justify-content: center;
    color: #6f7f91;
    font-size: .9rem;
}
.home-status-dot {
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 5px rgba(34, 197, 94, .12);
}
@media (min-width: 992px) {
    .home-welcome-card {
        width: fit-content;
        min-width: 720px;
        max-width: calc(100vw - 64px);
        padding-right: 64px;
        padding-left: 64px;
    }
    .home-welcome-card h1 {
        font-size: clamp(2.3rem, 3vw, 2.8rem);
        white-space: nowrap;
    }
    .home-subtitle,
    .home-actions {
        width: min(100%, 650px);
        margin-right: auto;
        margin-left: auto;
    }
}
.home-admin-link {
    position: fixed;
    z-index: 10;
    top: 20px;
    right: 20px;
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .68);
    border-radius: 50%;
    background: rgba(255, 255, 255, .72);
    color: #244d83;
    box-shadow: 0 8px 24px rgba(8, 29, 67, .16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: color .15s ease, background-color .15s ease, transform .15s ease;
}
.home-admin-link:hover {
    background: #1f2937;
    color: #fff;
    transform: rotate(30deg);
}
.home-admin-link:focus-visible {
    outline: 3px solid rgba(13, 110, 253, .35);
    outline-offset: 2px;
}
.home-admin-icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}
@media (max-width: 640px) {
    .home-hero { padding: 78px 16px 30px; }
    .home-welcome-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding: 38px 22px 30px;
        border-radius: 22px;
    }
    .home-welcome-card h1 {
        font-size: clamp(1.8rem, 9vw, 2.5rem);
        white-space: normal;
    }
    .home-actions { grid-template-columns: 1fr; }
    .home-admin-link {
        top: 14px;
        right: 14px;
    }
    .home-page { background-attachment: scroll; }
}
.login-card { max-width: 420px; width: 100%; }
.admin-login-page {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 17%, rgba(255, 255, 255, .9) 0, rgba(255, 255, 255, .4) 9%, transparent 22%),
        radial-gradient(circle at 86% 14%, rgba(244, 248, 255, .72) 0, transparent 18%),
        radial-gradient(circle at 18% 48%, rgba(113, 158, 224, .28) 0, transparent 13%),
        radial-gradient(circle at 76% 58%, rgba(82, 135, 211, .24) 0, transparent 15%),
        radial-gradient(circle at 30% 72%, rgba(133, 176, 230, .18) 0, transparent 10%),
        linear-gradient(180deg, #f8fafc 0%, #dbe3ef 17%, #7284a2 34%, #173766 53%, #0b2856 66%, #566e95 82%, #e4eaf3 94%, #fafbfd 100%);
    background-attachment: fixed;
}
.admin-login-page::before,
.admin-login-page::after {
    position: fixed;
    z-index: 0;
    border-radius: 50%;
    content: '';
    pointer-events: none;
    filter: blur(4px);
}
.admin-login-page::before {
    top: -120px;
    left: -100px;
    width: 360px;
    height: 360px;
    background: rgba(255, 255, 255, .42);
    box-shadow:
        420px 390px 0 -150px rgba(160, 199, 239, .22),
        680px 520px 0 -162px rgba(255, 255, 255, .2),
        1020px 290px 0 -145px rgba(137, 180, 230, .2);
}
.admin-login-page::after {
    right: -100px;
    bottom: -160px;
    width: 420px;
    height: 420px;
    background: rgba(27, 72, 145, .18);
}
.admin-login-wrapper {
    position: relative;
    z-index: 1;
    padding: 28px 16px;
}
.admin-login-card {
    max-width: 470px;
    padding: 16px !important;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 26px;
    background: rgba(255, 255, 255, .8);
    box-shadow: 0 24px 65px rgba(38, 80, 84, .2), inset 0 1px 0 rgba(255, 255, 255, .92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.admin-login-card .card-body { padding: 28px; }
.admin-login-emblem {
    display: grid;
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    place-items: center;
    border: 1px solid rgba(34, 123, 132, .18);
    border-radius: 17px;
    background: linear-gradient(145deg, #f8ffff, #d4f3ef);
    color: #16717b;
    font-size: 1.6rem;
    font-weight: 800;
    box-shadow: 0 10px 25px rgba(36, 133, 140, .16);
}
.admin-login-card h4 {
    color: #173c46;
    font-size: 1.55rem;
    font-weight: 750;
}
.admin-login-card .form-label {
    color: #34545b;
    font-weight: 650;
}
.admin-login-card .form-control {
    min-height: 52px;
    border: 1px solid rgba(76, 128, 132, .25);
    border-radius: 12px;
    background: rgba(255, 255, 255, .7);
    box-shadow: inset 0 1px 2px rgba(26, 72, 77, .04);
}
.admin-login-card .form-control:focus {
    border-color: #42aeb3;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(66, 174, 179, .16);
}
.admin-login-submit {
    min-height: 52px;
    margin-top: 6px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #28a9b5, #187984);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 12px 24px rgba(23, 121, 132, .22);
    transition: transform .18s ease, box-shadow .18s ease;
}
.admin-login-submit:hover,
.admin-login-submit:focus {
    background: linear-gradient(135deg, #219aa5, #136c75);
    color: #fff;
    box-shadow: 0 15px 28px rgba(23, 121, 132, .3);
    transform: translateY(-1px);
}
.admin-login-card a.text-muted {
    color: #527177 !important;
    text-underline-offset: 3px;
}
@media (max-width: 520px) {
    .admin-login-page { background-attachment: scroll; }
    .admin-login-card { padding: 8px !important; }
    .admin-login-card .card-body { padding: 24px 18px; }
    .admin-login-card h4 { font-size: 1.3rem; }
}
.student-auth-page {
    position: relative;
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 39%, rgba(139, 188, 232, .2) 0 8px, transparent 18px),
        radial-gradient(circle at 29% 35%, rgba(190, 218, 242, .18) 0 6px, transparent 15px),
        radial-gradient(circle at 43% 43%, rgba(137, 184, 228, .24) 0 9px, transparent 19px),
        radial-gradient(circle at 59% 32%, rgba(184, 216, 243, .2) 0 7px, transparent 16px),
        radial-gradient(circle at 73% 38%, rgba(140, 188, 230, .18) 0 5px, transparent 14px),
        radial-gradient(circle at 88% 29%, rgba(194, 222, 244, .18) 0 5px, transparent 13px),
        radial-gradient(circle at 8% 68%, rgba(184, 215, 242, .18) 0 6px, transparent 15px),
        radial-gradient(circle at 38% 74%, rgba(133, 178, 220, .14) 0 4px, transparent 12px),
        linear-gradient(180deg, #071737 0%, #0a2250 37%, #1c3968 60%, #60769c 82%, #d6deea 100%);
    background-attachment: fixed;
}
.student-auth-page::before,
.student-auth-page::after {
    position: fixed;
    z-index: 0;
    content: '';
    pointer-events: none;
}
.student-auth-page::before {
    inset: 0;
    background:
        radial-gradient(circle at 22% 48%, rgba(169, 207, 239, .18) 0 10px, transparent 25px),
        radial-gradient(circle at 51% 40%, rgba(204, 228, 248, .13) 0 8px, transparent 21px),
        radial-gradient(circle at 66% 49%, rgba(146, 191, 230, .16) 0 7px, transparent 20px),
        radial-gradient(circle at 81% 43%, rgba(198, 224, 245, .14) 0 5px, transparent 17px);
    filter: blur(2px);
}
.student-auth-page::after {
    bottom: -24%;
    left: 10%;
    width: 80%;
    height: 45%;
    border-radius: 50%;
    background: rgba(247, 250, 255, .44);
    filter: blur(60px);
}
.student-auth-wrapper {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    padding: 34px 16px;
}
.student-auth-card {
    max-width: 470px;
    margin: 0;
    padding: 14px !important;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 26px;
    background: rgba(242, 247, 255, .88);
    box-shadow: 0 25px 70px rgba(2, 17, 47, .38), inset 0 1px 0 rgba(255,255,255,.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.student-auth-card .card-body { padding: 27px; }
.student-request-card { max-width: 520px; }
.student-auth-emblem {
    display: grid;
    width: 60px;
    height: 60px;
    margin: 0 auto 18px;
    place-items: center;
    border: 1px solid rgba(31, 130, 192, .2);
    border-radius: 18px;
    background: linear-gradient(145deg, #f9fdff, #cceeff);
    color: #167bb6;
    box-shadow: 0 11px 25px rgba(22, 123, 182, .17);
}
.student-auth-emblem svg {
    width: 31px;
    height: 31px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}
.student-auth-card h4 {
    color: #164a69;
    font-size: 1.55rem;
    font-weight: 750;
}
.student-auth-card .form-label {
    color: #3b647b;
    font-weight: 650;
}
.student-auth-card .form-control {
    min-height: 51px;
    border: 1px solid rgba(71, 133, 168, .28);
    border-radius: 12px;
    background: rgba(255, 255, 255, .72);
}
.student-auth-card .form-control:focus {
    border-color: #239bc5;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(35, 155, 197, .17);
}
.student-auth-submit {
    min-height: 51px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #25add3, #1678b8);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 12px 25px rgba(22, 120, 184, .24);
    transition: transform .18s ease, box-shadow .18s ease;
}
.student-auth-submit:hover,
.student-auth-submit:focus {
    background: linear-gradient(135deg, #1f9dc2, #126ca7);
    color: #fff;
    box-shadow: 0 15px 30px rgba(22, 120, 184, .3);
    transform: translateY(-1px);
}
.student-auth-card a.text-muted {
    color: #4f7185 !important;
    text-underline-offset: 3px;
}
@media (max-width: 520px) {
    .student-auth-wrapper { align-items: flex-start; padding-top: 28px; }
    .student-auth-card { padding: 7px !important; }
    .student-auth-card .card-body { padding: 22px 17px; }
    .student-auth-card h4 { font-size: 1.3rem; }
    .student-auth-page { background-attachment: scroll; }
}
.pending-box {
    max-width: 480px;
    margin: 60px auto;
    text-align: center;
}
.game-card img, .game-card iframe { border-radius: 8px; }
.sidebar-symbols {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
.admin-page { overflow-x: hidden; }
.admin-shell {
    display: flex;
    min-height: 100vh;
}
.sidebar {
    position: relative;
    z-index: 1030;
    display: flex;
    flex: 0 0 280px;
    flex-direction: column;
    width: 280px;
    min-height: 100vh;
    padding: 28px 20px 22px;
    background: #1f2937;
    overflow: hidden;
    transition: width .25s ease, flex-basis .25s ease, padding .25s ease, transform .25s ease;
}
.sidebar-header {
    display: flex;
    align-items: center;
    min-height: 42px;
    margin-bottom: 24px;
    color: #fff;
}
.sidebar-brand-full {
    overflow: hidden;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
}
.sidebar-brand-icon {
    display: grid;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    margin-right: 11px;
    place-items: center;
    border-radius: 8px;
    background: #374151;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
}
.sidebar-menu { flex: 1; }
.sidebar-link {
    display: flex;
    align-items: center;
    min-height: 46px;
    margin-bottom: 4px;
    padding: 10px 14px;
    border-radius: 10px;
    color: #d1d5db;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.sidebar-link:hover,
.sidebar-link.active {
    background: #374151;
    color: #fff;
}
.sidebar-icon {
    flex: 0 0 21px;
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}
.sidebar-label {
    margin-left: 13px;
    overflow: hidden;
    opacity: 1;
    transition: opacity .15s ease;
}
.sidebar-footer {
    padding-top: 14px;
    border-top: 1px solid #374151;
}
.sidebar-logout { color: #f43f5e; }
.sidebar-logout:hover { color: #fb7185; }
.sidebar-toggle {
    position: sticky;
    z-index: 1040;
    top: 0;
    display: flex;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 100vh;
    padding: 0;
    border: 0;
    border-right: 1px solid #d1d5db;
    border-left: 1px solid #d1d5db;
    border-radius: 0;
    background: #e5e7eb;
    color: #1f2937;
    box-shadow: none;
    transition: background-color .15s ease;
}
.sidebar-toggle:hover {
    background: #d1d5db;
}
.sidebar-toggle:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}
.toggle-arrow { font-size: 28px; font-family: Arial, sans-serif; line-height: 1; }
.toggle-arrow-open { display: none; }
.sidebar-backdrop { display: none; }
.admin-content {
    position: relative;
    min-width: 0;
    flex: 1;
    padding: 0;
}
.admin-topbar {
    position: sticky;
    z-index: 1010;
    top: 0;
    display: flex;
    min-height: 60px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 24px;
    border-bottom: 1px solid #d7dee8;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 7px rgba(31, 41, 55, .08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.admin-topbar-search {
    position: relative;
    display: flex;
    width: min(600px, 55%);
    min-width: 0;
    align-items: center;
}
.admin-topbar-search svg {
    position: absolute;
    left: 14px;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #66758a;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    pointer-events: none;
}
.admin-topbar-search input {
    width: 100%;
    height: 40px;
    padding: 7px 14px 7px 43px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #f8fafc;
    color: #26364b;
    font-size: 1rem;
    outline: none;
}
.admin-topbar-search input:focus {
    border-color: #38aee0;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(56, 174, 224, .12);
}
.admin-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.admin-page-body {
    padding: 32px;
}
.admin-theme-toggle {
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    border: 1px solid #dbe3ed;
    border-radius: 12px;
    background: #fff;
    color: #38526f;
    box-shadow: 0 5px 16px rgba(31, 41, 55, .1);
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.admin-theme-toggle:hover {
    background: #e8eef6;
    color: #172b45;
    transform: translateY(-1px);
}
.admin-theme-toggle:focus-visible {
    outline: 3px solid rgba(59, 130, 246, .25);
    outline-offset: 2px;
}
.admin-theme-toggle svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}
.admin-top-logout {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(244, 63, 94, .2);
    border-radius: 12px;
    background: #fff;
    color: #f43f5e;
    box-shadow: 0 5px 16px rgba(31, 41, 55, .1);
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.admin-top-logout:hover {
    background: #f43f5e;
    color: #fff;
    transform: translateY(-1px);
}
.admin-top-logout:focus-visible {
    outline: 3px solid rgba(244, 63, 94, .25);
    outline-offset: 2px;
}
.admin-top-logout svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}
.sidebar-collapsed .sidebar {
    flex-basis: 64px;
    width: 64px;
    padding-right: 8px;
    padding-left: 8px;
}
.sidebar-collapsed .sidebar-header {
    justify-content: center;
}
.sidebar-collapsed .sidebar-brand-full { display: none; }
.sidebar-collapsed .sidebar-brand-icon { margin-right: 0; }
.sidebar-collapsed .sidebar-label { display: none; }
.sidebar-collapsed .sidebar-link {
    justify-content: center;
    padding-right: 0;
    padding-left: 0;
}
.sidebar-collapsed .toggle-arrow-close { display: none; }
.sidebar-collapsed .toggle-arrow-open { display: inline; }

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(280px, 84vw);
        transform: translateX(-100%);
        box-shadow: 10px 0 30px rgba(0, 0, 0, .2);
    }
    .sidebar-mobile-open .sidebar { transform: translateX(0); }
    .sidebar-toggle {
        position: fixed;
        left: 0;
    }
    .sidebar-mobile-open .sidebar-toggle { left: min(280px, 84vw); }
    .sidebar-mobile-open .toggle-arrow-close { display: inline; }
    .sidebar-mobile-open .toggle-arrow-open { display: none; }
    .admin-page:not(.sidebar-mobile-open) .toggle-arrow-close { display: none; }
    .admin-page:not(.sidebar-mobile-open) .toggle-arrow-open { display: inline; }
    .sidebar-backdrop {
        position: fixed;
        z-index: 1020;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgba(15, 23, 42, .5);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
    }
    .sidebar-mobile-open .sidebar-backdrop {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }
    .admin-content {
        width: 100%;
        padding: 0;
    }
    .admin-topbar {
        min-height: 58px;
        gap: 8px;
        padding: 7px 10px 7px 56px;
    }
    .admin-topbar-search {
        width: auto;
        flex: 1;
    }
    .admin-topbar-search input {
        height: 38px;
        font-size: .92rem;
    }
    .admin-topbar-actions { gap: 7px; }
    .admin-theme-toggle,
    .admin-top-logout {
        width: 36px;
        height: 36px;
    }
    .admin-page-body {
        padding: 20px 16px 24px;
    }
}

html[data-theme="dark"] .admin-page,
html[data-theme="dark"] .user-page {
    background: #181818;
    color: #c9c9c9;
}
html[data-theme="dark"] .admin-page .sidebar { background: #262626; }
html[data-theme="dark"] .admin-page .sidebar-link { color: #bdbdbd; }
html[data-theme="dark"] .admin-page .sidebar-link:hover,
html[data-theme="dark"] .admin-page .sidebar-link.active {
    background: #343434;
    color: #fff;
}
html[data-theme="dark"] .admin-page .sidebar-brand-icon { background: #3a3a3a; }
html[data-theme="dark"] .admin-page .sidebar-footer { border-color: #3a3a3a; }
html[data-theme="dark"] .admin-page .sidebar-toggle {
    border-color: #343434;
    background: #222;
    color: #bfbfbf;
}
html[data-theme="dark"] .admin-page .sidebar-toggle:hover {
    background: #303030;
    color: #fff;
}
html[data-theme="dark"] .admin-topbar {
    border-color: #363636;
    background: rgba(31, 31, 31, .94);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] .admin-topbar-search input {
    border-color: #424242;
    background: #181818;
    color: #d2d2d2;
}
html[data-theme="dark"] .admin-topbar-search input:focus {
    border-color: #38aee0;
    background: #1d1d1d;
}
html[data-theme="dark"] .admin-topbar-search svg { stroke: #929292; }
html[data-theme="dark"] .user-navbar {
    border-bottom: 1px solid #353535;
    background: #252525 !important;
}
html[data-theme="dark"] .user-profile-dropdown {
    border-color: #3b3b3b;
    background: #242424;
}
html[data-theme="dark"] .user-profile-dropdown .dropdown-item { color: #ccc; }
html[data-theme="dark"] .user-profile-dropdown .dropdown-item:hover { background: #353535; }
html[data-theme="dark"] .user-profile-dropdown .dropdown-divider { border-color: #414141; }
html[data-theme="dark"] .admin-page .card.realtime-count-card {
    border-color: #303c43;
    background: linear-gradient(145deg, #202020 45%, #1d292d);
}
html[data-theme="dark"] .realtime-badge {
    background: rgba(34, 197, 94, .12);
    color: #71d995;
}
html[data-theme="dark"] .realtime-users-table-wrap,
html[data-theme="dark"] .realtime-empty { border-color: #343434; }
html[data-theme="dark"] .realtime-users-table thead th {
    border-color: #363636;
    background: #252525;
    color: #9e9e9e;
}
html[data-theme="dark"] .realtime-users-table tbody td { border-color: #333; }
html[data-theme="dark"] .realtime-user-avatar {
    background: #27394a;
    color: #68b5ec;
}
html[data-theme="dark"] .online-status-label { color: #71d995; }
html[data-theme="dark"] .realtime-page-label {
    border-color: #384b5d;
    background: #253442;
    color: #89bce5;
}
html[data-theme="dark"] .realtime-page-label::before { background: #63aee8; }
html[data-theme="dark"] .admin-page .card,
html[data-theme="dark"] .user-page .card {
    border: 1px solid #303030;
    background: #202020;
    color: #cfcfcf;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] .admin-page .text-muted,
html[data-theme="dark"] .user-page .text-muted { color: #929292 !important; }
html[data-theme="dark"] .admin-page .table,
html[data-theme="dark"] .user-page .table {
    --bs-table-bg: transparent;
    --bs-table-color: #c8c8c8;
    --bs-table-border-color: #363636;
    --bs-table-striped-bg: rgba(255, 255, 255, .025);
    --bs-table-hover-bg: rgba(56, 174, 224, .07);
}
html[data-theme="dark"] .admin-page .form-control,
html[data-theme="dark"] .admin-page .form-select,
html[data-theme="dark"] .user-page .form-control,
html[data-theme="dark"] .user-page .form-select {
    border-color: #404040;
    background-color: #171717;
    color: #d4d4d4;
}
html[data-theme="dark"] .admin-page .form-control::placeholder,
html[data-theme="dark"] .user-page .form-control::placeholder { color: #777; }
html[data-theme="dark"] .admin-page .form-control:focus,
html[data-theme="dark"] .admin-page .form-select:focus,
html[data-theme="dark"] .user-page .form-control:focus,
html[data-theme="dark"] .user-page .form-select:focus {
    border-color: #38aee0;
    box-shadow: 0 0 0 3px rgba(56, 174, 224, .14);
}
html[data-theme="dark"] .admin-page .modal-content,
html[data-theme="dark"] .user-page .modal-content,
html[data-theme="dark"] .admin-page .list-group-item,
html[data-theme="dark"] .user-page .list-group-item {
    border-color: #383838;
    background: #202020;
    color: #cecece;
}
html[data-theme="dark"] .admin-page a:not(.btn):not(.sidebar-link):not(.admin-top-logout),
html[data-theme="dark"] .user-page .container a:not(.btn) { color: #38aee0; }
html[data-theme="dark"] .admin-theme-toggle {
    border-color: #414141;
    background: #292929;
    color: #f2c94c;
}
html[data-theme="dark"] .admin-theme-toggle:hover { background: #383838; }
html[data-theme="dark"] .admin-top-logout {
    border-color: #414141;
    background: #292929;
}
html[data-theme="dark"] .admin-top-logout:hover { background: #e33b55; }
html[data-theme="dark"] .admin-page .btn-secondary,
html[data-theme="dark"] .user-page .btn-secondary {
    border-color: #454545;
    background: #3b3b3b;
    color: #ddd;
}
html[data-theme="dark"] .admin-page hr,
html[data-theme="dark"] .user-page hr { border-color: #404040; }
#jitsi-container { width: 100%; height: 80vh; border-radius: 12px; overflow: hidden; }

/* Built-in AR game studio */
.ar-builder-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.ar-builder-heading h3 { margin:4px 0 5px; }
.ar-builder-heading p { margin:0; color:#64748b; }
.ar-eyebrow { color:#6d5dfc; font-size:.75rem; font-weight:800; letter-spacing:.14em; }
.ar-builder-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr); gap:22px; align-items:start; }
.ar-builder-panel { padding:24px; border:1px solid #e5eaf1; border-radius:18px; box-shadow:0 9px 30px rgba(33,44,72,.07); }
.ar-section-title { display:flex; align-items:center; gap:11px; margin-bottom:22px; }
.ar-section-title>span { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; background:#eceafe; color:#5b4ee3; font-weight:800; }
.ar-section-title h5 { margin:0; }.ar-section-title small { color:#7d899b; }
.ar-shape-picker { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.ar-shape-picker label { cursor:pointer; }.ar-shape-picker input { position:absolute; opacity:0; pointer-events:none; }
.ar-shape-option { display:flex; min-height:82px; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:9px; border:1px solid #dce3ed; border-radius:13px; color:#56657a; font-size:.78rem; transition:.15s; }
.ar-shape-picker input:checked+.ar-shape-option { border-color:#6d5dfc; background:#f0efff; color:#5447d4; box-shadow:0 0 0 2px rgba(109,93,252,.12); }
.ar-mini-object { display:block; width:28px; height:28px; background:#7c70f5; }.ar-mini-planet { border-radius:50%; box-shadow:0 0 0 3px #c7c2ff inset; }.ar-mini-atom { width:12px; height:12px; border-radius:50%; box-shadow:0 0 0 7px transparent,0 0 0 2px #7c70f5; }.ar-mini-cube { border-radius:6px; transform:rotate(20deg); }.ar-mini-star { clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 35%,39% 35%); }
.ar-preview { --ar-accent:#6d5dfc; position:relative; min-height:430px; margin-top:18px; overflow:hidden; border-radius:20px; background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--ar-accent) 45%,#24394e),#07111d 72%); color:#fff; }
.ar-preview-grid { position:absolute; inset:0; opacity:.16; background-image:linear-gradient(rgba(255,255,255,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.3) 1px,transparent 1px); background-size:34px 34px; perspective:400px; transform:scale(1.3) rotateX(52deg) translateY(90px); }
.ar-camera-pill { position:absolute; top:14px; left:14px; padding:6px 10px; border-radius:99px; background:rgba(0,0,0,.35); font-size:.7rem; backdrop-filter:blur(8px); }
.ar-preview-object { position:absolute; top:24%; left:50%; width:90px; height:90px; transform:translateX(-50%); background:radial-gradient(circle at 28% 24%,#fff,var(--ar-accent) 22%,color-mix(in srgb,var(--ar-accent),#101727 42%) 70%); filter:drop-shadow(0 0 22px var(--ar-accent)); animation:ar-float 3s ease-in-out infinite; }
.ar-object-planet { border-radius:50%; }.ar-object-planet:after { content:""; position:absolute; inset:38px -22px; border:7px solid rgba(255,255,255,.75); border-radius:50%; transform:rotate(-18deg); }.ar-object-atom { width:28px; height:28px; margin-top:30px; border-radius:50%; }.ar-object-atom:before,.ar-object-atom:after { content:""; position:absolute; inset:-34px; border:5px solid var(--ar-accent); border-radius:50%; }.ar-object-atom:before { transform:rotate(60deg); }.ar-object-atom:after { transform:rotate(-60deg); }.ar-object-cube { border-radius:18px; transform:translateX(-50%) rotate(25deg); box-shadow:inset -15px -12px 0 rgba(0,0,0,.2); }.ar-object-star { clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 35%,39% 35%); }
@keyframes ar-float { 50% { margin-top:-10px; } }
.ar-preview-card { position:absolute; right:16px; bottom:16px; left:16px; padding:16px; border:1px solid rgba(255,255,255,.16); border-radius:16px; background:rgba(7,12,25,.7); backdrop-filter:blur(12px); }.ar-preview-card small { display:block; color:#c9d1df; }.ar-preview-card strong { display:block; margin:5px 0 11px; line-height:1.35; }.ar-preview-card>div { display:grid; grid-template-columns:1fr 1fr; gap:6px; }.ar-preview-card span { overflow:hidden; padding:7px 9px; border:1px solid rgba(255,255,255,.16); border-radius:8px; background:rgba(255,255,255,.08); font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
.ar-builder-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }.ar-library { padding:22px; border-radius:18px; }.ar-empty { padding:28px; border:1px dashed #cbd5e1; border-radius:13px; color:#718096; text-align:center; }.ar-status { display:inline-block; padding:5px 9px; border-radius:99px; font-size:.76rem; font-weight:700; }.ar-status-published { background:#dcfce7; color:#16834a; }.ar-status-draft { background:#f1f5f9; color:#64748b; }
html[data-theme="dark"] .ar-builder-heading p { color:#929292; }html[data-theme="dark"] .ar-builder-panel { border-color:#303030; }html[data-theme="dark"] .ar-shape-option { border-color:#444; color:#aaa; }html[data-theme="dark"] .ar-shape-picker input:checked+.ar-shape-option { border-color:#7468f5; background:#302d4c; color:#b9b3ff; }html[data-theme="dark"] .ar-status-draft { background:#343434; color:#aaa; }
@media(max-width:1100px){.ar-builder-grid{grid-template-columns:1fr}.ar-preview{min-height:480px}}@media(max-width:600px){.ar-builder-heading{align-items:flex-start;flex-direction:column}.ar-builder-panel{padding:17px}.ar-shape-picker{grid-template-columns:1fr 1fr}.ar-builder-actions{flex-direction:column}.ar-builder-actions .btn{width:100%}}

.ar-control-chip { display:flex; min-height:38px; align-items:center; justify-content:center; border:1px solid #dcd8ff; border-radius:9px; background:#f1efff; color:#5447d4; font-weight:700; }
.ar-scene-list { display:grid; gap:16px; }
.ar-scene-card { padding:20px; border:1px solid #dfe5ed; border-radius:16px; background:#fbfcfe; }
.ar-scene-card-header,.ar-scene-card-header>div:first-child { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ar-scene-card-header>div:first-child { justify-content:flex-start; }.ar-scene-card-header small { display:block; color:#8491a3; font-size:.74rem; }
.ar-scene-number { display:grid; width:34px; height:34px; place-items:center; border-radius:50%; background:#6d5dfc; color:#fff; font-weight:800; }
.ar-scene-controls { display:flex; gap:6px; }.ar-scene-design { display:grid; grid-template-columns:1.5fr 1fr 1fr .6fr; gap:12px; margin-top:17px; }.ar-question-field { margin-top:13px; }
.ar-two-answers { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:13px 0 7px; }.ar-answer-editor { display:grid; grid-template-columns:auto 1fr; gap:7px 9px; align-items:center; padding:12px; border:1px solid #dfe5ed; border-radius:13px; background:#fff; cursor:pointer; }.ar-answer-editor>span { font-size:.8rem; font-weight:700; }.ar-answer-editor>.form-control { grid-column:1/-1; }.ar-answer-editor:has(input[type="radio"]:checked) { border-color:#6d5dfc; box-shadow:0 0 0 2px rgba(109,93,252,.1); }.ar-answer-left>span { color:#2864c7; }.ar-answer-right>span { color:#c3456c; }
html[data-theme="dark"] .ar-control-chip { border-color:#484166; background:#302d4c; color:#b9b3ff; }html[data-theme="dark"] .ar-scene-card { border-color:#383838; background:#1c1c1c; }html[data-theme="dark"] .ar-answer-editor { border-color:#3d3d3d; background:#242424; }
@media(max-width:900px){.ar-scene-design{grid-template-columns:1fr 1fr}}@media(max-width:560px){.ar-scene-design,.ar-two-answers{grid-template-columns:1fr}.ar-scene-card{padding:14px}.ar-scene-card-header{align-items:flex-start}}

.ar-sort-builder[hidden],.ar-builder-panel[hidden],#timeField[hidden] { display:none !important; }
.ar-mode-help { display:grid; gap:5px; margin-bottom:18px; padding:14px 16px; border:1px solid #d7e8ff; border-radius:13px; background:#f2f8ff; color:#405774; font-size:.86rem; }.ar-mode-help strong { color:#1d4f91; }.ar-mode-help span { display:block; }
.ar-sort-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.ar-category-editor { padding:18px; border:1px solid #dfe5ed; border-radius:16px; background:#fbfcfe; }.ar-category-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:15px; font-weight:800; }.ar-category-head .form-control-color { width:54px; }
.ar-score-rule { display:flex; align-items:center; gap:13px; margin-top:17px; padding:15px; border:1px solid #f3dd99; border-radius:14px; background:#fff9e8; color:#735b18; }.ar-score-rule>span { font-size:1.8rem; }.ar-score-rule small { display:block; margin-top:2px; color:#8a753b; }.ar-main-actions { margin:18px 0 0; }
.ar-target-score { flex:0 0 190px; }.ar-target-score label { display:block; margin-bottom:5px; font-size:.74rem; font-weight:700; }
html[data-theme="dark"] .ar-mode-help { border-color:#2f465d; background:#202b35; color:#aabaca; }html[data-theme="dark"] .ar-mode-help strong { color:#73b9ff; }html[data-theme="dark"] .ar-category-editor { border-color:#383838; background:#1c1c1c; }html[data-theme="dark"] .ar-score-rule { border-color:#544822; background:#302b1d; color:#e2cb83; }html[data-theme="dark"] .ar-score-rule small { color:#b9a66d; }
@media(max-width:720px){.ar-sort-grid{grid-template-columns:1fr}.ar-score-rule{align-items:flex-start;flex-wrap:wrap}.ar-target-score{flex-basis:100%}}