:root {
    --ap-primary: #886cc0;
    --ap-primary-dark: #6f4fb0;
    --ap-primary-light: #f3effa;
    --ap-bg: #f5f3fa;
    --ap-card: #ffffff;
    --ap-text: #1f2937;
    --ap-muted: #6b7280;
    --ap-border: #ece8f4;
    --ap-sidebar-w: 270px;
}

* { box-sizing: border-box; }

body.ap-body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--ap-bg);
    color: var(--ap-text);
}

.ap-shell { display: flex; min-height: 100vh; }

.ap-sidebar {
    width: var(--ap-sidebar-w);
    background: #fff;
    border-right: 1px solid var(--ap-border);
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    z-index: 40;
    transition: transform .25s ease;
}

.ap-brand { padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--ap-border); }
.ap-brand h1 { margin: 0; color: var(--ap-primary); font-size: 1.65rem; letter-spacing: -.02em; }
.ap-brand p { margin: .3rem 0 0; color: var(--ap-muted); font-size: .75rem; }

.ap-nav { flex: 1; overflow-y: auto; padding: .7rem 0; }
.ap-nav::-webkit-scrollbar { width: 5px; }
.ap-nav::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }
.ap-nav-section {
    padding: .7rem 1.2rem .3rem;
    color: var(--ap-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: .65rem;
    font-weight: 600;
}
.ap-nav a {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    margin: 0 .45rem;
    border-radius: .5rem;
    padding: .6rem .9rem;
    color: #4b5563;
    font-size: .84rem;
}
.ap-nav a i { width: 1.1rem; text-align: center; color: var(--ap-muted); }
.ap-nav a:hover { background: var(--ap-primary-light); color: var(--ap-primary); }
.ap-nav a.active { background: linear-gradient(90deg, var(--ap-primary-light), transparent); color: var(--ap-primary); font-weight: 600; }
.ap-nav a.active i, .ap-nav a:hover i { color: var(--ap-primary); }

.ap-user {
    border-top: 1px solid var(--ap-border);
    padding: .95rem 1.2rem;
    background: #faf9fc;
}
.ap-user .name { font-size: .85rem; font-weight: 600; }
.ap-user .meta { font-size: .72rem; color: var(--ap-muted); }

.ap-main { margin-left: var(--ap-sidebar-w); flex: 1; min-height: 100vh; display: flex; flex-direction: column; }
.ap-topbar {
    position: sticky; top: 0; z-index: 30;
    background: #fff;
    border-bottom: 1px solid var(--ap-border);
    padding: .85rem 1.4rem;
    display: flex;
    align-items: center;
    gap: .8rem;
}
.ap-menu-btn {
    display: none;
    border: none;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: .45rem;
    background: var(--ap-primary-light);
    color: var(--ap-primary);
}
.ap-page-title { margin: 0; font-size: 1.08rem; font-weight: 600; }
.ap-top-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.ap-chip {
    background: linear-gradient(135deg, var(--ap-primary), #a78bfa);
    color: #fff;
    border-radius: .5rem;
    padding: .45rem .85rem;
    font-size: .75rem;
    font-weight: 600;
}
.ap-avatar {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    background: var(--ap-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
}

.ap-content { padding: 1.2rem 1.4rem 1.8rem; }
.ap-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 35; }

.ap-card, .bg-white.rounded-xl, .bg-white.rounded-2xl {
    background: var(--ap-card) !important;
    border-radius: 1rem !important;
    border: 1px solid var(--ap-border) !important;
    box-shadow: 0 1px 3px rgba(136,108,192,.06) !important;
}
.ap-hero {
    background: linear-gradient(135deg, #7c5cbf 0%, #9b7cd4 50%, #b794f6 100%);
    color: #fff;
    border-radius: 1rem;
    padding: 1.4rem;
}
.ap-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1rem 0 1.1rem; }
.ap-kpi { padding: .95rem 1.05rem; }
.ap-kpi .lbl { color: var(--ap-muted); font-size: .73rem; margin-bottom: .2rem; }
.ap-kpi .val { font-size: 1.35rem; font-weight: 700; }

.ap-alert { border-radius: .5rem; padding: .75rem .95rem; margin-bottom: 1rem; font-size: .9rem; }
.ap-alert.success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.ap-alert.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.ap-chart-card { margin-bottom: 1rem; padding: 1rem; }
.ap-chart-title { margin: 0 0 .6rem; font-size: .95rem; font-weight: 600; }

table th, table td { border-bottom: 1px solid var(--ap-border) !important; }
thead { background: #faf9fc !important; }

@media (max-width: 1100px) {
    .ap-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .ap-sidebar { transform: translateX(-100%); }
    .ap-sidebar.open { transform: translateX(0); }
    .ap-main { margin-left: 0; }
    .ap-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
    .ap-overlay.show { display: block; }
    .ap-kpi-grid { grid-template-columns: 1fr; }
}