.layout-container {
  --layout-gutter: 16px;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--app-bg);
  color: var(--app-text);
}

.layout-navbar {
  flex: 0 0 auto;
  background: linear-gradient(
    135deg,
    rgba(23, 58, 110, 0.46) 0%,
    rgba(10, 32, 72, 0.62) 50%,
    rgba(30, 74, 140, 0.42) 100%
  );
  border-bottom: 1px solid rgba(167, 203, 255, 0.35);
  box-shadow:
    0 8px 24px rgba(2, 10, 26, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);

  .navbar-brand,
  .nav-link,
  .navbar-toggler {
    color: var(--app-text);
  }

  .navbar-brand:hover,
  .nav-link:hover,
  .nav-link:focus {
    color: #ffffff;
  }

  .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.35);
  }

  .navbar-toggler-icon {
    filter: brightness(0) invert(1);
  }

  .nav-link-custom {
    color: var(--app-text-muted);
    transition: color 160ms ease, text-shadow 160ms ease;
  }

  .nav-link-custom:hover,
  .nav-link-custom:focus {
    color: #f3f7ff;
    text-shadow: 0 0 12px rgba(168, 203, 255, 0.45);
  }

  .nav-link-custom.active {
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 0 14px rgba(153, 193, 255, 0.5);
  }

  .keyboard-nav-group {
    .btn {
      border-color: rgba(173, 205, 255, 0.45);
      color: var(--app-text);
    }

    .btn:hover,
    .btn:focus {
      color: #ffffff;
      border-color: rgba(225, 237, 255, 0.8);
    }

    .btn.active {
      background: rgba(90, 146, 255, 0.5);
      border-color: rgba(173, 205, 255, 0.75);
      color: #ffffff;
      font-weight: 600;
      text-shadow: 0 0 14px rgba(153, 193, 255, 0.5);
    }
  }
}

.main-content {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: var(--app-bg);
  color: var(--app-text);
  padding-left: var(--layout-gutter);
  padding-right: var(--layout-gutter);
  padding-bottom: var(--layout-gutter);
}
.layout-footer {
  flex: 0 0 auto;
  padding: 12px var(--layout-gutter);
  background-color: var(--app-bg);
  border-top: 1px solid rgba(167, 203, 255, 0.35);
  text-align: center;
  font-size: 12px;
  color: var(--app-text);

  p {
    margin: 0;
  }
}