html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin: 0;
}

.app-shell {
  background:
    radial-gradient(1000px 420px at 8% -5%, rgba(var(--bs-primary-rgb), 0.14), transparent 62%),
    radial-gradient(900px 420px at 100% 0, rgba(var(--bs-info-rgb), 0.12), transparent 60%),
    var(--bs-body-bg);
}

.app-top-stripe {
  height: 4px;
  background: linear-gradient(
    90deg,
    rgba(var(--bs-primary-rgb), 0.95) 0%,
    rgba(var(--bs-info-rgb), 0.95) 55%,
    rgba(var(--bs-success-rgb), 0.95) 100%
  );
}

.app-header {
  background-color: rgba(var(--bs-body-bg-rgb), 0.9);
  backdrop-filter: blur(8px);
}

.app-brand {
  letter-spacing: 0.03em;
}

.app-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(var(--bs-info-rgb), 1);
  box-shadow: 0 0 0 4px rgba(var(--bs-info-rgb), 0.2);
}

.app-nav-link {
  font-weight: 600;
  border-radius: 999px;
  padding: 0.45rem 0.85rem !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.app-nav-link:hover,
.app-nav-link:focus-visible {
  background-color: rgba(var(--bs-primary-rgb), 0.12);
}

.app-user-link {
  max-width: 240px;
}

.app-user-name {
  max-width: 180px;
}

.app-login-link {
  background-color: rgba(var(--bs-primary-rgb), 0.12);
}

.app-content-shell {
  background-color: rgba(var(--bs-body-bg-rgb), 0.88);
  border: 1px solid rgba(var(--bs-border-color-rgb), 0.85);
  border-radius: 1rem;
  box-shadow: 0 12px 30px rgba(var(--bs-dark-rgb), 0.08);
  padding: clamp(1rem, 2vw, 1.5rem);
}

.app-footer {
  background-color: rgba(var(--bs-body-bg-rgb), 0.82);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}