@layer components {
    .content-wrap { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-8); }
    .sidebar { background: var(--bg); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: var(--space-6); }
    .sidebar-title {
        font-size: var(--text-base); font-weight: 700; color: var(--primary-700);
        padding-bottom: var(--space-3); margin-bottom: var(--space-4);
        border-bottom: 2px solid var(--primary-600);
    }
    .sidebar-nav { list-style: none; padding: 0; }
    .sidebar-nav li { margin-bottom: var(--space-1); }
    .sidebar-nav a {
        display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
        font-size: var(--text-sm); color: var(--steel-600); transition: all var(--transition);
    }
    .sidebar-nav a:hover { background: var(--primary-50); color: var(--primary-600); }
    .sidebar-nav a.active { background: var(--primary-50); color: var(--primary-600); font-weight: 600; }
    @media (max-width: 768px) {
        .content-wrap { grid-template-columns: 1fr; }
        .sidebar { order: -1; }
    }
}