:root {
    --brand: #1b6ec2;
    --bg: #f5f7f9;
    --sidebar-width: 240px;
}

/* BASE */
html, body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    font-family: system-ui, -apple-system, Segoe UI, Roboto;
}

/* HEADER */
.app-header {
    height: 64px;
}

/* APP SHELL */
.app-shell {
    display: flex;
    height: calc(100vh - 64px);
    overflow: hidden;
}

/* SIDEBAR */
.sidebar {
    width: var(--sidebar-width);
    background: #fff;
    border-right: 1px solid #e5e7eb;
    overflow-y: auto;
}

/* SIDEBAR NAV */
.sidebar-nav {
    padding: 16px 8px;
}

.side-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 4px 6px;
    color: #374151;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
}

    .side-link:hover {
        background: #f3f4f6;
        color: var(--brand);
    }

    .side-link.active {
        background: #e9f2ff;
        color: var(--brand);
        font-weight: 600;
    }

.side-section {
    margin: 20px 12px 6px;
    font-size: 11px;
    letter-spacing: .12em;
    color: #9ca3af;
    font-weight: 700;
}

/* CONTENT */
.content {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
}

/* PAGE CARD */
.page-card {
    background: #fff;
    border-radius: 10px;
    padding: 32px;
    max-width: 1000px;
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* TOAST */
.toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2000;
}

/* MOBILE */
@media (max-width: 991px) {
    .app-shell {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }
}