.app { display: flex; min-height: 100vh; }
.sidebar { width: 220px; flex-shrink: 0; }
.sidebar .nav-link { color: rgba(255, 255, 255, .75); border-radius: .375rem; }
.sidebar .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.sidebar .nav-link.active { color: #fff; background: rgba(255, 255, 255, .15); }
.content { flex: 1; min-width: 0; background: #f8f9fa; }
.auth-card { max-width: 420px; }

@media (max-width: 768px) {
    .app { flex-direction: column; }
    .sidebar { width: 100%; }
    .sidebar .nav { flex-direction: row !important; flex-wrap: wrap; }
}

.tag-badge { background: var(--tag-color); color: #fff; font-weight: 500; }
.tag-remove { width: .5em; height: .5em; padding: 0; vertical-align: middle; }
.note-body { white-space: pre-wrap; }