/* ── Сайдбар ── */
.sidebar { width: var(--sidebar-width); background: var(--bg-card); border-right: 1px solid var(--border-color); padding: var(--space-5) var(--space-3); position: fixed; height: 100vh; overflow-y: auto; }
.sidebar-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); padding: 0 var(--space-2); }
.sidebar-logo { width: 28px; height: 28px; background: var(--action-bg); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--action-ink); font-weight: 700; font-size: var(--font-body-sm); flex-shrink: 0; }
.demo .sidebar-logo { background: var(--brand-demo); }
.sidebar-title { font-size: var(--font-section); font-weight: 600; }
.sidebar-subtitle { font-size: var(--font-small); color: var(--text-tertiary); }
.nav-section-label { font-size: var(--font-meta); font-weight: 500; color: var(--text-tertiary); padding: 0 var(--space-3); margin: var(--space-4) 0 var(--space-1); }
.nav-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-half); border-radius: var(--radius-sm); color: var(--text-secondary); text-decoration: none; font-size: var(--font-control); font-weight: 500; }
.nav-item:hover { background: var(--surface-subtle); color: var(--text-primary); }
.nav-item.active { background: var(--surface-subtle); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-color); }
.nav-item.disabled { color: var(--text-tertiary); cursor: default; pointer-events: none; opacity: .55; }
.nav-soon { margin-left: auto; font-size: var(--font-caption); font-weight: 600; color: var(--text-tertiary); background: var(--surface-selected); border-radius: var(--radius-xs); padding: var(--space-half) var(--space-1); }
.nav-icon { width: 18px; height: 18px; display: inline-flex; flex-shrink: 0; color: var(--text-tertiary); }
.nav-item.active .nav-icon, .nav-item:hover .nav-icon { color: var(--text-primary); }
.nav-icon .icon { width: 18px; height: 18px; }
.sidebar-account { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); padding: var(--space-3) var(--space-3) 0; border-top: 1px solid var(--border-color); }
.sidebar-login { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); font-size: var(--font-control); font-weight: 500; }
.sidebar-logout { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--font-control); cursor: pointer; }
.sidebar-logout:hover { background: var(--surface-subtle); color: var(--text-primary); }
.sidebar-logout:hover .nav-icon { color: var(--text-primary); }

/* Схлопывание: только иконки; ширина через переменную, чтобы main-content сдвигался тем же значением. */
.sidebar-toggle { margin-left: auto; width: 24px; height: 24px; border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; border-radius: var(--radius-xs); font-size: var(--font-control); flex-shrink: 0; transition: transform .15s; }
.sidebar-toggle:hover { background: var(--surface-subtle); color: var(--text-primary); }
html.sidebar-collapsed { --sidebar-width: var(--sidebar-collapsed); }
.sidebar-collapsed .sidebar-toggle { transform: rotate(180deg); }
.sidebar-collapsed .sidebar-title, .sidebar-collapsed .sidebar-subtitle,
.sidebar-collapsed .nav-section-label, .sidebar-collapsed .nav-label,
.sidebar-collapsed .nav-soon { display: none; }
.sidebar-collapsed .sidebar-header { flex-direction: column; justify-content: center; gap: var(--space-2); padding: 0; }
.sidebar-collapsed .sidebar-toggle { margin-left: 0; }
.sidebar-collapsed .nav-item { justify-content: center; padding: var(--space-2) var(--space-1-5); }
.sidebar-collapsed .sidebar-account { flex-direction: column; padding: var(--space-3) 0 0; }

.main-content { flex: 1; width: 100%; min-width: 0; margin-left: var(--sidebar-width); padding: var(--space-7) var(--space-8) var(--space-14); max-width: var(--container-width); }
.app-version { margin-top: var(--space-6); color: var(--text-tertiary); font-size: var(--font-small); text-align: right; }
.app-version a { color: inherit; text-decoration: none; }
.app-version a:hover { color: var(--primary-color); text-decoration: underline; }
@media (max-width: 860px) {
body { display: block; }
.sidebar { position: static; width: auto; height: auto; border-right: none; border-bottom: 1px solid var(--border-color); padding: var(--space-3) var(--space-4); }
.sidebar nav { display: flex; gap: var(--space-1-5); overflow-x: auto; }
.sidebar-header { margin-bottom: var(--space-3); padding: 0; }
.nav-section-label { display: none; }
.nav-item { white-space: nowrap; min-height: var(--touch-target); }
.nav-item.disabled { display: none; }
.nav-soon { display: none; }
.sidebar-account { margin-top: var(--space-2); padding: var(--space-2) 0 0; }
.sidebar-logout { min-height: var(--touch-target); }
.app-version a { display: inline-flex; align-items: center; min-height: var(--touch-target); }
.main-content { margin-left: 0; padding: var(--space-5) var(--space-4) var(--space-10); }
}
@media (max-height: 500px) and (orientation: landscape) {
.sidebar-header { margin-bottom: var(--space-2); }
.sidebar { padding: var(--space-2) var(--space-4); }
}
@media (max-width: 360px) {
.main-content { padding-left: var(--space-2); padding-right: var(--space-2); }
}