/* Шапка картки входу: знак на верхній кромці картки з кільцем сяйва, що обертається, назва градієнтом, мітки розділів їхніми кольорами; «Захищено» в підвалі. */
@property --hero-turn { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.brand-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 0 26px; text-align: center; }
/* Знак наполовину виходить за верхній край картки: зверху картці — місце під нього. */
.login-card:has(.brand-hero) { margin-top: 30px; padding-top: 50px; }
/* Знак: градієнтний квадрат із галочкою й ореолом. */
.brand-mark {
  position: absolute;
  top: -31px;
  left: 50%;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  border-radius: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 34px no-repeat, var(--grad-brand);
  box-shadow:
    0 0 0 12px color-mix(in srgb, var(--sky) 5%, transparent),
    0 14px 40px color-mix(in srgb, var(--vio) 55%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}
/* Кільце сяйва: дуга від блакитного до фіолетового біжить по контуру знака. */
.brand-mark::before {
  content: "";
  position: absolute;
  inset: -6px;
  padding: 2px;
  border-radius: 23px;
  background: conic-gradient(from var(--hero-turn), transparent 0 40%, var(--sky), var(--vio), transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 6px var(--vio));
  animation: hero-turn 4s linear infinite;
}
@keyframes hero-turn { to { --hero-turn: 360deg; } }
@media (prefers-reduced-motion: reduce) { .brand-mark::before { animation: none; } }

.brand-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .08em;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Мітки розділів — кольори ті самі, що на «Куди перейти?» (shared/scripts/components/sections.js). */
.brand-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.brand-chip {
  --c: var(--sky);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px 2px 7px;
  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: color-mix(in srgb, var(--c) 80%, var(--text));
  font-size: 12px;
  font-weight: 500;
}
.brand-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.brand-chip.tone-vio { --c: var(--vio); }
.brand-chip.tone-emr { --c: var(--emr); }

/* Під шапкою заголовок кроку й підказка — теж по центру. */
.brand-hero ~ #step h1, .brand-hero ~ #step .login-lead { text-align: center; }

/* «Захищено» — зелений рядок із замком першим у підвалі картки. */
.login-foot .login-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 8px;
  color: color-mix(in srgb, var(--emr) 80%, var(--text));
  font-size: 12.5px;
}
.login-secure .icon { flex: none; }