html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
}

[data-bs-theme="dark"] body {
  background-color: #111317;
  color: #dee2e6;
}
[data-bs-theme="light"] body {
  background-color: #f8f9fa;
  color: #212529;
}

main { flex: 1; }

.navbar-blur {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-bs-theme="dark"] .navbar-blur {
  background-color: rgba(17, 19, 23, 0.8) !important;
}
[data-bs-theme="light"] .navbar-blur {
  background-color: rgba(248, 249, 250, 0.8) !important;
}

.avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
}

.icon-wrap {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  border: 3px solid rgba(255, 255, 255, 0.1);
}
[data-bs-theme="dark"] .icon-wrap {
  background: rgba(255, 255, 255, 0.05);
}
[data-bs-theme="light"] .icon-wrap {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}