:root {
  --brand-blue: #0d6efd;
  --soft-blue: #eef5ff;
  --soft-border: #dbe8ff;
  --card-radius: 1rem;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.card-soft {
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 1rem;
}

.card.soft {
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: var(--card-radius);
}

.brand-badge {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--brand-blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
}

.rank-badge {
  border: 1px solid var(--badge-border);
  background: var(--badge-bg);
  border-radius: 50rem;
  font-size: .75rem;
  padding: .125rem .5rem;
}

.badge-soft {
  background: #eef5ff;
  color: #0d6efd;
  border: 1px solid #dbe8ff;
  border-radius: 999px;
  padding: .2rem .6rem;
  font-size: .75rem;
}

/* .badge-soft {
  background: var(--soft-blue);
  color: var(--brand-blue);
  border: 1px solid var(--soft-border);
  border-radius: 999px;
  padding: .2rem .6rem;
  font-size: .75rem;
} */

.kpi-value {
  font-weight: 700;
}

.progress-thin {
  height: 8px;
}

.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav svg {
  width: 20px;
  height: 20px;
}

.table thead th {
  white-space: nowrap;
}

@media (max-width: 576px) {
  th, td {
    padding: .5rem .625rem !important;
  }
}

@media (max-width: 576px) {
  .kpi-value {
    font-size: 1.25rem;
  }
}

.cta-card {
  background: linear-gradient(180deg, #f6faff, #eef5ff);
  border: 1px solid var(--soft-border);
  border-radius: 16px;
}

footer .links a {
  text-decoration: none;
}

.place-items-center {
  place-items: center;
}

.alert-soft {
  background: #f8faff;
  border: 1px solid #e5efff;
}

.info-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px dashed var(--soft-border);
  padding: .4rem .6rem;
  border-radius: 999px;
  background: #f8fbff;
}

.contact-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #eef5ff;
  color: #0d6efd;
}

.map-placeholder {
  background: #e9f1ff;
  border: 1px solid #dbe8ff;
  border-radius: 12px;
  height: 260px;
  display: grid;
  place-items: center;
  color: #0d6efd;
}

.hero-bg {
  background-image: radial-gradient(40rem 20rem at 50% 0%, rgba(13, 110, 253, .08), transparent);
}

.password-meter {
  height: 6px;
  border-radius: 999px;
  background: #e9ecef;
  overflow: hidden;
}

.password-meter > div {
  height: 100%;
  width: 0%;
  transition: width .25s ease;
}

.password-meter.weak > div {
  width: 33%;
  background: #dc3545;
}

.password-meter.fair > div {
  width: 66%;
  background: #ffc107;
}

.password-meter.strong > div {
  width: 100%;
  background: #28a745;
}

.form-hint {
  font-size: .85rem;
  color: #6c757d;
}

.trust-logos img {
  height: 28px;
  filter: grayscale(100%);
  opacity: .9;
}

.icon-pill {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #eef5ff;
  color: #0d6efd;
}

.step {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
}

.step2 {
  display: flex;
  gap: .75rem;
}

.step2 .num {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #0d6efd;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.feature {
  display: flex;
  gap: .75rem;
}

.feature .tick {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #e8f5e9;
  display: grid;
  place-items: center;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

.place-center {
  display: grid;
  place-items: center;
}

.glass {
  background: var(--brand-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* .badge-soft-blue {
  background: #eef5ff;
  color: #0d6efd;
  border: 1px solid #dbe8ff;
  border-radius: 999px;
  padding: .25rem .5rem;
  font-size: .75rem;
} */

.row-highlight {
  background: #f7fbff;
}

/* Hero gradients */

.hero-bg-1 {
  background-image: radial-gradient(40rem 20rem at 50% 20%, rgba(13, 110, 253, 0.10), transparent);
}

.hero-bg-2 {
  background-image: linear-gradient(135deg, #f8fbff 0%, #ffffff 50%, #ffffff 100%);
}

/* Cards and borders */

.card.border-soft {
  border: 1px solid rgba(0, 0, 0, .06);
}

/* Section spacing */

.section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width:992px) {
  .section {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* Mobile drawer for small screens (Bootstrap collapsing handled by data attrs) */

.mobile-drawer {
  display: none;
}

.mobile-drawer.open {
  display: block;
  animation: slideDown .16s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Counter digits alignment */

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Simple hero badge */

.hero-ribbon {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .6rem;
  border-radius: 999px;
  background: #eef5ff;
  color: #0d6efd;
  border: 1px solid #dbe8ff;
  font-size: .8rem;
}

.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #0d6efd;
  display: inline-block;
}

/* Utilities */

.text-blue-600 {
  color: #0b5ed7;
}

.bg-blue-50 {
  background: #eef5ff;
}

.border-blue-100 {
  border-color: #dbe8ff !important;
}

.shadow-soft {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 8px 20px rgba(13, 110, 253, .04);
}

.section {
  scroll-margin-top: 90px;
}

.toc a {
  text-decoration: none;
}

.toc .list-group-item {
  border: none;
  padding: .5rem .75rem;
}

.toc .list-group-item.active {
  background: #eef5ff;
  color: #0d6efd;
  border-radius: 8px;
}

.notice {
  background: #f8faff;
  border: 1px solid #e5efff;
}

.input-group .toggle-pwd {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.hero-bg-1 {
  background-image: radial-gradient(40rem 20rem at 50% 20%, rgba(13, 110, 253, 0.10), transparent);
}

.hero-bg-2 {
  background-image: linear-gradient(135deg, #f8fbff 0%, #ffffff 50%, #ffffff 100%);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.req-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.req-list li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #6c757d;
}

.req-list li .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ced4da;
}

#system-alert {
  position: fixed;
  bottom: 0;
  /*visibility: hidden;*/
  display: none;
}

.overlay {
  /*top: 50%;*/
  /*left: 50%;*/
  /*transform: translate(-50%, -50%);*/
  display: none;
}

.overlay-1 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

#bs-spinner {
  color: var(--bs-primary);
  display: none;
}

.spinner-border {
  --bs-spinner-width: 2rem;
  --bs-spinner-height: 2rem;
  --bs-spinner-vertical-align: -0.125em;
  --bs-spinner-border-width: 0.25em;
  --bs-spinner-animation-speed: 0.75s;
  --bs-spinner-animation-name: spinner-border;
  border: var(--bs-spinner-border-width) solid currentcolor;
  border-right-color: transparent;
}

#sent-mail {
  margin-left: 5px;
  margin-right: 5px;
  font-weight: bold;
}

#loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  /*display: flex;*/
  justify-content: center;
  align-items: center;
  z-index: 1050;
}

#loading .modal-backdrop {
  display: none;
}

.check li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
}

.check li .tick {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: #e8f5e9;
  display: grid;
  place-items: center;
  font-size: .9rem;
  line-height: 1;
}

.invalid {
  border: 1px solid red;
}

#btn-Logout {
  display: none;
}