body { 
    background-color: #f8fafc; 
    font-family: 'Inter', sans-serif; 
    overflow-x: hidden; 
}

.sidebar { 
    background: #1e3a8a; 
    height: 100vh; 
    position: fixed; 
    width: 260px; 
    color: white; 
    transition: all 0.3s; 
    z-index: 1001; 
    left: -260px; 
}

.sidebar.active { 
    left: 0; 
}

.main-content { 
    margin-left: 0; 
    padding: 20px; 
    transition: all 0.3s; 
    min-height: 100vh; 
    padding-top: 80px; 
}

@media (min-width: 769px) {
    .sidebar { left: 0; }
    .main-content { margin-left: 260px; padding: 40px; }
    .mobile-header { display: none; }
}

.mobile-header { 
    display: flex; 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    background: white; 
    z-index: 1000; 
    padding: 15px 20px; 
    border-bottom: 1px solid #e2e8f0; 
    align-items: center; 
    justify-content: space-between; 
}

.card { 
    background: white; 
    border-radius: 1.5rem; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); 
    border: 1px solid #e2e8f0; 
}

.sidebar-overlay { 
    display: none; 
    position: fixed; 
    inset: 0; 
    background: rgba(0,0,0,0.5); 
    z-index: 1000; 
}

.sidebar-overlay.active { 
    display: block; 
}

.hide-scrollbar::-webkit-scrollbar { 
    display: none; 
}

.edit-modal { 
    display: none; 
    position: fixed; 
    inset: 0; 
    z-index: 3000; 
    background: rgba(0,0,0,0.7); 
    align-items: center; 
    justify-content: center; 
    padding: 20px; 
}

.edit-modal.active { 
    display: flex; 
}