* { box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; margin: 0; background: var(--bg); color: var(--text); display: flex; min-height: 100vh; }

#sidebar {
    width: 280px; background: var(--sidebar); color: white; padding: 2rem;
    display: flex; flex-direction: column; transition: transform 0.3s ease;
    position: fixed; height: 100vh; z-index: 1000;
}
#sidebar.hidden { transform: translateX(-100%); }
#sidebar h2 { color: var(--accent); margin-bottom: 2rem; }

.nav-link {
    color: rgba(255,255,255,0.8); text-decoration: none; padding: 12px 0;
    display: block; border-bottom: 1px solid rgba(255,255,255,0.1); transition: 0.3s;
}
.nav-link:hover { color: var(--accent); padding-left: 10px; }

main { flex-grow: 1; margin-left: 280px; padding: 2rem; transition: margin 0.3s ease; }
main.expanded { margin-left: 0; }

.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.project-card { background: var(--card); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.card-content { padding: 20px; }
.tag { background: var(--bg); color: var(--primary); font-size: 0.75rem; padding: 4px 10px; border-radius: 20px; margin-right: 5px; font-weight: bold; }
.btn-action { display: block; background: var(--accent); color: white; text-align: center; padding: 12px; text-decoration: none; font-weight: bold; }

@media (max-width: 768px) {
    #sidebar { width: 100%; transform: translateX(-100%); }
    #sidebar.active { transform: translateX(0); }
    main { margin-left: 0; }
}