/* ===== DESKTOP SHELL — shared by index.php, test.php, book.php ===== */
/* Sidebar avatar — shared across all pages that include _desktop_sidebar.php */
.sidebar-avt-circle { width: 40px; height: 40px; border-radius: 50%; background: var(--primary);
                      display: flex; align-items: center; justify-content: center;
                      font-weight: 800; font-size: .95rem; color: #fff; flex-shrink: 0;
                      overflow: hidden; background-size: cover; background-position: center; }

@media (min-width: 768px) {
    body { background: #eef0f5; }

    #app-shell {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        min-height: 100vh;
        background: #f5f6fa;
        box-shadow: 0 0 40px rgba(0,0,0,.12);
        position: relative;
    }
    #app-main { background: #f5f6fa; }

    #desktop-sidebar {
        display: flex !important;
        flex-direction: column;
        width: 240px;
        min-width: 240px;
        background: var(--white);
        border-right: 1px solid var(--line);
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
        flex-shrink: 0;
    }

    #desktop-sidebar .ds-logo {
        padding: 16px 20px;
        border-bottom: 1px solid var(--line);
        text-align: center;
    }
    #desktop-sidebar .ds-logo img {
        width: 100%; max-width: 160px; height: auto; border-radius: 8px;
    }
    #desktop-sidebar .ds-user {
        display: flex; align-items: center; gap: 10px;
        padding: 16px 20px;
        border-bottom: 1px solid var(--line);
    }
    #desktop-sidebar .ds-nav {
        flex: 1; padding: 12px 12px 20px; overflow-y: auto;
    }
    #desktop-sidebar .ds-nav-section {
        font-size: .68rem; font-weight: 700; color: var(--text_color);
        text-transform: uppercase; letter-spacing: .5px;
        padding: 12px 8px 6px;
    }
    #desktop-sidebar .nav-link-item {
        padding: 9px 12px !important; border-radius: 10px !important;
        margin-bottom: 2px; font-size: .86rem !important;
        display: flex; align-items: center;
    }
    #desktop-sidebar .nav-link-item.active { background: #EDE7F6; color: var(--primary) !important; }
    #desktop-sidebar .nav-link-item.active .icon { color: var(--primary) !important; }
    #desktop-sidebar .nav-link-item.locked { opacity: .4; cursor: not-allowed; pointer-events: none; }
    #desktop-sidebar .nav-link-item .lock-ic { margin-left: auto; flex-shrink: 0; opacity: .6; }
    #desktop-sidebar .ds-footer {
        padding: 12px; border-top: 1px solid var(--line); height: 55px;
        display: flex; align-items: center;
    }

    #app-main {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        height: 100vh;
    }
}

@media (max-width: 767px) {
    #desktop-sidebar { display: none !important; }
    #app-shell { display: block; }
    #app-main  { display: block; height: auto; overflow-y: visible; }
}