.snav {
    --snav-w: 268px;
    --snav-cw: 82px;
    --snav-radius: 12px;
    --snav-ease: cubic-bezier(.22,1,.36,1);
    --snav-bg: #fff;
    --snav-panel: #f8fbff;
    --snav-border: rgba(29,78,216,.16);
    --snav-text: #0f172a;
    --snav-muted: #1e3a5f;
    --snav-faint: #475569;
    --snav-hover: rgba(37,99,235,.1);
    --snav-active: rgba(37,99,235,.14);
    --snav-accent: #2563eb;
    --snav-accent-2: #0f766e;
    --snav-shadow: 8px 0 26px rgba(37,99,235,.1);
    --snav-icon-shadow: 0 8px 18px rgba(15,23,42,.16);
    width: var(--snav-w);
    height: 100vh;
    min-height: 100vh;
    position: sticky;
    top: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    color: var(--snav-text);
    background: linear-gradient(180deg,var(--snav-bg),var(--snav-panel));
    border-right: 1px solid var(--snav-border);
    box-shadow: var(--snav-shadow);
    transition: width .28s var(--snav-ease),transform .28s var(--snav-ease)
}

    .snav *, .snav *::before, .snav *::after {
        box-sizing: border-box
    }

.snav__brand {
    min-height: 78px;
    padding: 16px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    border-bottom: 1px solid var(--snav-border)
}

.snav__brand-icon, .snav__avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: #fff;
    background: linear-gradient(135deg,#2563eb,#0f766e);
    box-shadow: 0 10px 24px rgba(37,99,235,.28)
}

.snav__brand-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 1.12rem
}

.snav__brand-text, .snav__user-text {
    min-width: 0
}

.snav__eyebrow {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--snav-faint);
    line-height: 1
}

.snav__appname {
    margin-top: 4px;
    font-size: .86rem;
    font-weight: 800;
    color: var(--snav-accent);
    line-height: 1.15
}

.snav__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 10px
}

    .snav__body::-webkit-scrollbar {
        width: 5px
    }

    .snav__body::-webkit-scrollbar-thumb {
        background: rgba(37,99,235,.26);
        border-radius: 999px
    }

.snav__link, .snav__action-link, .snav__theme-toggle, .snav__group-title {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 3px 0;
    padding: 8px 10px;
    color: var(--snav-muted);
    font: 700 .82rem/1.2 'Inter','Be Vietnam Pro',system-ui,sans-serif;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--snav-radius);
    background: transparent;
    cursor: pointer;
    outline: none;
    transition: color .18s ease,background .18s ease,border-color .18s ease,transform .18s var(--snav-ease),box-shadow .18s ease
}

    .snav__link span:not(.snav__icon), .snav__action-link span:not(.snav__icon), .snav__theme-toggle span:not(.snav__icon), .snav__group-title span:not(.snav__icon) {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .snav__link:hover, .snav__action-link:hover, .snav__theme-toggle:hover, .snav__group-title:hover {
        color: var(--snav-text);
        background: var(--snav-hover);
        border-color: var(--snav-border);
        transform: translateX(2px)
    }

    .snav__link.active {
        position: relative;
        color: var(--snav-accent);
        background: var(--snav-active);
        border-color: rgba(37,99,235,.24);
        box-shadow: inset 3px 0 0 var(--snav-accent)
    }

.snav__group {
    margin: 4px 0
}

.snav__group-title {
    justify-content: space-between
}

    .snav__group-title > span:not(.snav__icon) {
        flex: 1
    }

    .snav__group-title > i {
        font-size: .78rem;
        color: var(--snav-faint)
    }

.snav__group-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-left: 10px;
    transition: max-height .26s ease,opacity .22s ease,margin .22s ease
}

    .snav__group-content.show {
        max-height: 560px;
        opacity: 1;
        margin-top: 4px;
        margin-bottom: 8px
    }

    .snav__group-content .snav__link {
        min-height: 40px;
        padding: 7px 9px;
        font-size: .78rem
    }

.snav__icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #fff;
    font-size: .92rem;
    box-shadow: var(--snav-icon-shadow);
    transition: transform .18s ease,box-shadow .18s ease
}

.snav__link:hover .snav__icon, .snav__action-link:hover .snav__icon, .snav__theme-toggle:hover .snav__icon, .snav__group-title:hover .snav__icon {
    transform: scale(1.07);
    box-shadow: 0 10px 22px rgba(15,23,42,.22)
}

.snav__icon--home {
    background: linear-gradient(135deg,#2563eb,#1d4ed8)
}

.snav__icon--record {
    background: linear-gradient(135deg,#0ea5e9,#0369a1)
}

.snav__icon--tkb {
    background: linear-gradient(135deg,#f97316,#ea580c)
}

.snav__icon--magic {
    background: linear-gradient(135deg,#22c55e,#15803d)
}

.snav__icon--view {
    background: linear-gradient(135deg,#6366f1,#4338ca)
}

.snav__icon--guide {
    background: linear-gradient(135deg,#06b6d4,#0891b2)
}

.snav__icon--school {
    background: linear-gradient(135deg,#0f766e,#115e59)
}

.snav__icon--book {
    background: linear-gradient(135deg,#8b5cf6,#7c3aed)
}

.snav__icon--attendance {
    background: linear-gradient(135deg,#14b8a6,#0f766e)
}

.snav__icon--task {
    background: linear-gradient(135deg,#f59e0b,#d97706)
}

.snav__icon--report {
    background: linear-gradient(135deg,#3b82f6,#1d4ed8)
}

.snav__icon--admin {
    background: linear-gradient(135deg,#f97316,#c2410c)
}

.snav__icon--user {
    background: linear-gradient(135deg,#22c55e,#16a34a)
}

.snav__icon--list {
    background: linear-gradient(135deg,#2563eb,#0f766e)
}

.snav__icon--building {
    background: linear-gradient(135deg,#0ea5e9,#2563eb)
}

.snav__icon--license {
    background: linear-gradient(135deg,#f97316,#c2410c)
}

.snav__icon--register {
    background: linear-gradient(135deg,#10b981,#047857)
}

.snav__icon--key {
    background: linear-gradient(135deg,#2563eb,#0f766e)
}

.snav__icon--logout {
    background: linear-gradient(135deg,#ef4444,#b91c1c)
}

.snav__icon--login {
    background: linear-gradient(135deg,#16a34a,#047857)
}

.snav__icon--theme {
    background: linear-gradient(135deg,#0f172a,#2563eb)
}

.snav__collapse-btn, .snav__close, .snav__hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--snav-text);
    border: 1px solid var(--snav-border);
    background: var(--snav-bg);
    box-shadow: 0 6px 16px rgba(15,23,42,.12);
    transition: all .18s var(--snav-ease)
}

.snav__collapse-btn {
    position: absolute;
    right: -15px;
    top: 24px;
    z-index: 5;
    width: 30px;
    height: 30px;
    border-radius: 50%
}

.snav__close {
    display: none;
    margin-left: auto;
    width: 34px;
    height: 34px;
    border-radius: 11px
}

.snav__hamburger {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 310;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg,#2563eb,#0f766e);
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(37,99,235,.34)
}

.snav__collapse-btn:hover, .snav__close:hover {
    color: #fff;
    background: var(--snav-accent);
    transform: translateY(-1px)
}

.snav__footer {
    flex-shrink: 0;
    padding: 10px;
    border-top: 1px solid var(--snav-border);
    background: rgba(255,255,255,.54)
}

.snav__user {
    min-height: 56px;
    margin-bottom: 7px;
    padding: 9px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--snav-border);
    border-radius: 16px;
    background: rgba(37,99,235,.08)
}

.snav__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: .82rem;
    font-weight: 800
}

.snav__uname, .snav__urole {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.snav__uname {
    font-size: .8rem;
    font-weight: 800;
    color: var(--snav-text)
}

.snav__urole {
    font-size: .68rem;
    color: var(--snav-faint)
}

.snav__action-link--logout {
    color: #b91c1c
}

.snav__action-link--login {
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg,#16a34a,#047857);
    box-shadow: 0 10px 22px rgba(22,163,74,.24)
}

    .snav__action-link--login:hover {
        color: #fff;
        background: linear-gradient(135deg,#15803d,#065f46);
        transform: translateY(-1px)
    }

.snav--collapsed {
    width: var(--snav-cw)
}

    .snav--collapsed .snav__brand {
        justify-content: center;
        padding: 16px 10px
    }

    .snav--collapsed .snav__brand-text, .snav--collapsed .snav__link span:not(.snav__icon), .snav--collapsed .snav__action-link span:not(.snav__icon), .snav--collapsed .snav__theme-toggle span:not(.snav__icon), .snav--collapsed .snav__group-title span:not(.snav__icon), .snav--collapsed .snav__group-title > i, .snav--collapsed .snav__user-text {
        width: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none
    }

    .snav--collapsed .snav__body, .snav--collapsed .snav__footer {
        padding: 8px
    }

    .snav--collapsed .snav__link, .snav--collapsed .snav__action-link, .snav--collapsed .snav__theme-toggle, .snav--collapsed .snav__group-title {
        justify-content: center;
        gap: 0;
        padding-left: 0;
        padding-right: 0
    }

    .snav--collapsed .snav__group-content {
        margin-left: 0
    }

    .snav--collapsed .snav__user {
        justify-content: center;
        padding: 8px
    }

    .snav--collapsed .snav__collapse-btn i {
        transform: rotate(180deg)
    }

.snav__overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 190;
    background: rgba(15,23,42,.46);
    backdrop-filter: blur(4px)
}

.snav__overlay--show {
    display: block;
    animation: snav-fade-in .18s ease both
}

body.dark .snav, .snav.snav--dark {
    --snav-bg: #071426;
    --snav-panel: #0d2038;
    --snav-border: rgba(251,146,60,.18);
    --snav-text: #f8fafc;
    --snav-muted: #e2e8f0;
    --snav-faint: #b6c5d8;
    --snav-hover: rgba(251,146,60,.13);
    --snav-active: rgba(251,146,60,.18);
    --snav-accent: #fb923c;
    --snav-accent-2: #22c55e;
    --snav-shadow: 10px 0 30px rgba(0,0,0,.42);
    --snav-icon-shadow: 0 10px 24px rgba(0,0,0,.36);
    background: linear-gradient(150deg,#071426,#0d2038 58%,#10233b)
}

body.dark .snav__footer, .snav--dark .snav__footer {
    background: rgba(7,20,38,.78)
}

body.dark .snav__brand-icon, .snav--dark .snav__brand-icon {
    background: linear-gradient(135deg,#f97316,#22c55e);
    box-shadow: 0 12px 26px rgba(249,115,22,.28)
}

body.dark .snav__avatar, .snav--dark .snav__avatar {
    background: linear-gradient(135deg,#fb923c,#16a34a)
}

body.dark .snav__appname, .snav--dark .snav__appname {
    color: #fdba74
}

body.dark .snav__icon--theme, .snav--dark .snav__icon--theme {
    background: linear-gradient(135deg,#f97316,#22c55e)
}

body.dark .snav__collapse-btn, body.dark .snav__close, .snav--dark .snav__collapse-btn, .snav--dark .snav__close {
    background: #10233b;
    color: #f8fafc;
    border-color: rgba(251,146,60,.24)
}

body.dark .snav__hamburger, .snav--dark + .snav__overlay + .snav__hamburger {
    background: linear-gradient(135deg,#f97316,#16a34a)
}

.snav__group-title > i {
    transition: transform .2s ease;
}

.snav__group-title.snav__group-title--open > i {
    transform: rotate(180deg);
}

.snav--collapsed .snav__group-content {
    display: none;
}

.snav__group-title.snav__group-title--open {
    background: var(--snav-hover);
    border-color: var(--snav-border);
    color: var(--snav-text);
}

.snav__group-title > i:last-child {
    transition: transform .2s ease;
}

.snav__group-title.snav__group-title--open > i:last-child {
    transform: rotate(180deg);
}
@media(max-width:991.98px) {
    .snav {
        --snav-w: min(84vw,288px)
    }
}

@media(max-width:767.98px) {
    .snav {
        position: fixed;
        left: 0;
        top: 0;
        width: min(86vw,300px);
        transform: translateX(calc(-100% - 8px));
        box-shadow: 8px 0 30px rgba(15,23,42,.2)
    }

    .snav--open {
        transform: translateX(0)
    }

    .snav--collapsed {
        width: min(86vw,300px)
    }

        .snav--collapsed .snav__brand {
            justify-content: flex-start;
            padding: 16px 56px 16px 14px
        }

        .snav--collapsed .snav__brand-text, .snav--collapsed .snav__link span:not(.snav__icon), .snav--collapsed .snav__action-link span:not(.snav__icon), .snav--collapsed .snav__theme-toggle span:not(.snav__icon), .snav--collapsed .snav__group-title span:not(.snav__icon), .snav--collapsed .snav__group-title > i, .snav--collapsed .snav__user-text {
            width: auto;
            opacity: 1;
            visibility: visible;
            pointer-events: auto
        }

        .snav--collapsed .snav__link, .snav--collapsed .snav__action-link, .snav--collapsed .snav__theme-toggle, .snav--collapsed .snav__group-title {
            justify-content: flex-start;
            gap: 10px;
            padding-left: 10px;
            padding-right: 10px
        }

    .snav__collapse-btn {
        display: none
    }

    .snav__close, .snav__hamburger {
        display: inline-flex
    }

    .snav__link:hover, .snav__action-link:hover, .snav__theme-toggle:hover, .snav__group-title:hover {
        transform: none
    }
}

@keyframes snav-fade-in {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@media(prefers-reduced-motion:reduce) {
    .snav, .snav__link, .snav__action-link, .snav__theme-toggle, .snav__group-title, .snav__collapse-btn, .snav__close, .snav__hamburger {
        transition-duration: .01ms
    }
}