/* Каркас: боковая навигация, верхняя панель времени, рабочая область страницы. */
.app {
  display: grid; height: 100%;
  grid-template-columns: 216px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}

/* боковая навигация */
.side { grid-row: 1 / 3; display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; background: var(--side); color: var(--side-ink) }
.logo { font: 700 17px/1 var(--display); letter-spacing: .08em; color: var(--side-hi); padding: 4px 10px 18px }
.logo span { color: var(--side-accent) }
.side a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--side-ink); text-decoration: none }
.side a:hover { background: rgba(255, 255, 255, .06); color: var(--side-hi) }
.side a.active { background: rgba(91, 182, 227, .16); color: var(--side-hi) }
.side-spacer { flex: 1 }
.side-credits { font-size: 12px; line-height: 1.5; padding: 10px; border-top: 1px solid rgba(255, 255, 255, .08) }

/* верхняя панель времени (наполняет js/components/sim-bar.js) */
.sim-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 10px 20px; background: var(--panel); border-bottom: 1px solid var(--line) }

/* рабочая область */
.view { overflow: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px }
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px }
.stack { display: flex; flex-direction: column; gap: 12px }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.grid { display: grid; gap: 16px }
.grid-wide { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) }
.grid-half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
.scroll { overflow: auto; max-height: 520px }
.scroll-short { max-height: 300px }

@media (max-width: 1100px) {
  .grid-wide, .grid-half { grid-template-columns: minmax(0, 1fr) }
}

@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) }
  .side { grid-row: auto; flex-direction: row; overflow-x: auto; padding: 8px }
  .logo, .side-spacer, .side-credits { display: none }
  .view { padding: 12px 16px }
}