/* ===== Page: Settings (layout only) ===== */
:root {
  --container-w: 1400px;
  --gutter: 16px;
  --header-h: 61px;
}

.navbar-component {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
}

/* Внутрішній контейнер навбара */
.navbar-component .container {
  width: min(var(--container-w), 100% - calc(2 * var(--gutter)));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

body { padding-top: var(--header-h); }

/* Головний контент тягнеться, футер при дні */
.page-main { flex: 1; }

/* Центр і ширина секцій сторінки налаштувань */
.page-main,
.page-section,
.controls-panel,
.page-footer {
  width: min(var(--container-w), 100% - calc(2 * var(--gutter)));
  margin-inline: auto;
}

.controls-panel { margin-top: var(--gutter); }

/* Футер-компонент: внутрішній контейнер 1400px */
.footer-component .container {
  width: min(var(--container-w), 100% - calc(2 * var(--gutter)));
  margin-inline: auto;
  padding-inline: var(--gutter);
}