.app-navbar {
  background: linear-gradient(90deg, #0b4a6f, #0f6aa1);
}

.app-logo {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.15);
  display: grid;
  place-items: center;
}
.app-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pin-input {
  letter-spacing: 0.6em;
  font-variant-numeric: tabular-nums;
}

.avatar,
.avatar-preview {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  overflow: hidden;
  background: #eef3f7;
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: grid;
  place-items: center;
}

.avatar img,
.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #4a5a67;
  font-weight: 700;
}

.cropper-wrap {
  width: 100%;
  min-height: 280px;
  border-radius: 16px;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.65);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.cropper-wrap img {
  max-width: 100%;
  display: block;
}

.pwa-install-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 1080;
  pointer-events: none;
}

.pwa-install-banner .card {
  pointer-events: auto;
  border-radius: 18px;
}

.pwa-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(11, 74, 111, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.pwa-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}