main {
  flex: 1; display: flex; flex-direction: column;
  padding: 10px; min-height: 0; min-width: 0; overflow: hidden;
}

.view {
  display: none; flex-direction: column;
  background: #fff; border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  flex: 1; min-height: 0; overflow: hidden;
}
.view.active { display: flex; }

.view-header {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; font-size: 12px;
  text-transform: uppercase; color: #666;
  letter-spacing: 0.5px; border-bottom: 1px solid #eef1f4;
  flex-shrink: 0;
}

.view-body { flex: 1; overflow: auto; padding: 10px; min-height: 0; }

.tree-body { padding: 0; display: flex; flex-direction: column; }

.panel-count { font-weight: 600; }
.panel-count.lib { color: #3498db; }
.panel-count.combo { color: #27ae60; }

/* ===== Sidebar navigation ===== */
.workspace { flex: 1; display: flex; min-height: 0; min-width: 0; }

.sidebar {
  flex: 0 0 210px; width: 210px; min-height: 0;
  display: flex; flex-direction: column;
  background: #fff; border-right: 1px solid #e3e8ee;
  overflow: hidden;
}
body:not(.nav-open) .sidebar { display: none; }

.sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 8px 8px 12px; border-bottom: 1px solid #eef1f4;
  flex-shrink: 0;
}
.sidebar-title {
  font-size: 11px; text-transform: uppercase; color: #8a949e;
  letter-spacing: 0.5px;
}
.pin-btn {
  background: transparent; border: none; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 4px 6px; border-radius: 4px;
  opacity: 0.45; transition: background 0.1s, opacity 0.1s;
  filter: grayscale(1);
}
.pin-btn:hover { background: #eef3f8; opacity: 0.8; }
.pin-btn.pinned { opacity: 1; filter: none; background: #eaf3fb; }

.nav-btn {
  background: rgba(255,255,255,0.15); color: #fff; border: none;
  padding: 6px 10px; border-radius: 4px; cursor: pointer;
  font-size: 12px; white-space: nowrap;
}
.nav-btn:hover { background: rgba(255,255,255,0.25); }

.nav-menu {
  display: flex; flex-direction: column;
  padding: 6px; gap: 2px; overflow-y: auto; min-height: 0;
}
.nav-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; font-size: 13px; color: #333;
  font-family: inherit; background: transparent; border: none;
  border-radius: 5px; cursor: pointer; transition: background 0.1s;
}
.nav-item:hover { background: #f0f5fb; }
.nav-item.active { background: #3498db; color: #fff; font-weight: 500; }
.nav-item:focus-visible { outline: 2px solid #3498db; outline-offset: -2px; }
/* Предупреждение о старых файлах из кэша (checkAppVersion в app.js) */
.stale-banner {
  background: #fff3cd; color: #7a5b00; border-bottom: 1px solid #f0d58a;
  padding: 6px 12px; font-size: 13px; text-align: center;
}
.stale-banner.hidden { display: none; }
.storage-banner {
  flex-shrink: 0; background: #fff3cd; color: #7a5b00;
  border-bottom: 1px solid #f0d58a; padding: 8px 12px;
  font-size: 13px; overflow-wrap: anywhere;
}
.storage-banner button { margin: 4px; cursor: pointer; }
.drive-sync-status { max-width: 190px; font-size: 11px; overflow-wrap: anywhere; }
.account-sync-status { max-width: 170px; font-size: 11px; overflow-wrap: anywhere; }
#btnAccount { max-width: 230px; overflow: hidden; text-overflow: ellipsis; }