@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Rajdhani:wght@300;400;500;600;700&display=swap');

/* =====================================================
   BASTION — DUAL + ORBITAL RING UPDATE
   - Вхід по центру
   - Реєстрація знизу по центру
   - Розробник прибраний
   - Плашки прибрані
   - Кільце більш технологічне: dual ring + сегменти + orbiters
   ===================================================== */

.hud-ring {
  --core-shift-x: 14px;
  --core-shift-y: -4px;
}

/* ================= CENTER CORE ================= */

.hud-ring .ring-center.hero-core,
.hud-ring .ring-center {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  width: max-content !important;
  max-width: none !important;
  text-align: center !important;

  transform:
    translate(-50%, -50%)
    translate(var(--core-shift-x), var(--core-shift-y)) !important;

  z-index: 25 !important;
}

.hud-ring .brand-mark {
  display: block !important;

  width: clamp(72px, 4.15vw, 96px) !important;
  height: auto !important;

  margin: 0 auto 12px auto !important;
  transform: none !important;

  filter:
    drop-shadow(0 0 14px rgba(255, 196, 0, .20))
    drop-shadow(0 0 34px rgba(255, 196, 0, .13)) !important;
}

.hud-ring .brand-name {
  position: relative !important;
  display: inline-block !important;

  font-family: "Michroma", "Rajdhani", sans-serif !important;
  font-size: clamp(40px, 3.55vw, 68px) !important;
  font-weight: 400 !important;
  line-height: .92 !important;

  letter-spacing: .125em !important;
  padding-left: .125em !important;
  text-transform: uppercase !important;

  background:
    linear-gradient(
      180deg,
      #f8f8f9 0%,
      #d4d6db 34%,
      #787e88 72%,
      #eef0f2 100%
    ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;

  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.08))
    drop-shadow(0 0 18px rgba(255,58,34,.12))
    drop-shadow(0 12px 24px rgba(0,0,0,.55)) !important;
}

.hud-ring .brand-name::after {
  content: "";
  position: absolute;
  left: 11%;
  right: 11%;
  top: 54%;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,58,34,.12),
      rgba(255,58,34,.96),
      rgba(255,58,34,.16),
      transparent
    );

  opacity: .82;
  filter:
    blur(.2px)
    drop-shadow(0 0 10px rgba(255,58,34,.85));
}

.hud-ring .brand-name::before {
  content: "";
  position: absolute;
  top: 53%;
  left: 26%;
  width: 76px;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #ff3a22,
      transparent
    );

  opacity: .88;
  filter: drop-shadow(0 0 14px #ff3a22);
}

.hud-ring .brand-subtitle {
  margin-top: 13px !important;

  font-family: "Rajdhani", sans-serif !important;
  font-size: 12px !important;
  letter-spacing: .40em !important;
  text-transform: uppercase !important;

  color: rgba(255,76,56,.84) !important;
  opacity: .82 !important;
}

/* ================= RING BASE LAYERS ================= */

.hud-ring .ring-tech-layer,
.hud-ring .ring-data-layer,
.hud-ring .ring-inner-layer,
.hud-ring .ring-active-layer,
.hud-ring .ring-glass-layer {
  transform-origin: 50% 50% !important;
  will-change: transform;
  pointer-events: none;
}

.hud-ring .ring-active-layer {
  opacity: .74 !important;
  filter:
    drop-shadow(0 0 12px rgba(255, 54, 72, .36))
    drop-shadow(0 0 30px rgba(255, 54, 72, .17)) !important;
  animation: bastionRingRotateMain 34s linear infinite !important;
}

.hud-ring .ring-tech-layer {
  opacity: .40 !important;
  animation: bastionRingRotateTech 74s linear infinite !important;
}

.hud-ring .ring-data-layer {
  opacity: .50 !important;
  animation: bastionRingRotateReverse 58s linear infinite !important;
}

.hud-ring .ring-inner-layer {
  opacity: .34 !important;
  animation: bastionRingRotateInner 96s linear infinite !important;
}

.hud-ring .ring-glass-layer {
  opacity: .42 !important;
  animation: bastionRingRotateGlass 120s linear infinite !important;
}

/* ================= EXTRA TECH RINGS ================= */

/* Внутрішнє тонке кільце */
.hud-ring::before {
  content: "";
  position: absolute;
  inset: 8.5%;
  border-radius: 50%;

  border: 1px solid rgba(255, 64, 78, .28);
  border-left-color: rgba(255, 64, 78, .08);
  border-right-color: rgba(255, 64, 78, .08);

  box-shadow:
    inset 0 0 28px rgba(255, 36, 58, .05),
    0 0 20px rgba(255, 36, 58, .07);

  pointer-events: none;
  z-index: 5;

  animation: bastionRingRotateReverse 88s linear infinite;
}

/* Технічна дрібна розмітка */
.hud-ring::after {
  content: "";
  position: absolute;
  inset: 3.7%;
  border-radius: 50%;

  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(255, 64, 78, .36) 0deg,
      rgba(255, 64, 78, .36) .55deg,
      transparent .55deg,
      transparent 3.15deg
    );

  mask:
    radial-gradient(circle, transparent 65.8%, #000 66.2%, #000 68.2%, transparent 68.7%);
  -webkit-mask:
    radial-gradient(circle, transparent 65.8%, #000 66.2%, #000 68.2%, transparent 68.7%);

  opacity: .36;
  pointer-events: none;
  z-index: 6;

  animation: bastionRingRotateTech 64s linear infinite;
}

/* Окремі світлові сегменти, як у концепті */
.hud-ring .ring-glass-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;

  background:
    conic-gradient(
      from 12deg,
      transparent 0deg,
      transparent 18deg,
      rgba(255, 64, 78, .78) 21deg,
      rgba(255, 64, 78, .18) 29deg,
      transparent 36deg,

      transparent 86deg,
      rgba(255, 64, 78, .65) 91deg,
      rgba(255, 64, 78, .14) 100deg,
      transparent 108deg,

      transparent 178deg,
      rgba(255, 64, 78, .60) 182deg,
      rgba(255, 64, 78, .12) 193deg,
      transparent 202deg,

      transparent 263deg,
      rgba(255, 64, 78, .70) 268deg,
      rgba(255, 64, 78, .15) 278deg,
      transparent 286deg,
      transparent 360deg
    );

  mask:
    radial-gradient(circle, transparent 70%, #000 70.6%, #000 74.8%, transparent 75.5%);
  -webkit-mask:
    radial-gradient(circle, transparent 70%, #000 70.6%, #000 74.8%, transparent 75.5%);

  opacity: .78;
  filter:
    drop-shadow(0 0 10px rgba(255, 55, 72, .45))
    drop-shadow(0 0 22px rgba(255, 55, 72, .20));

  pointer-events: none;
}

/* Орбітальні точки */
.hud-ring .ring-data-layer::before,
.hud-ring .ring-data-layer::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;

  background: rgba(255, 72, 88, .92);
  box-shadow:
    0 0 0 3px rgba(255, 72, 88, .14),
    0 0 12px rgba(255, 72, 88, .85),
    0 0 26px rgba(255, 72, 88, .25);

  pointer-events: none;
}

.hud-ring .ring-data-layer::before {
  top: 8.5%;
  left: 50%;
  transform: translateX(-50%);
}

.hud-ring .ring-data-layer::after {
  bottom: 8.5%;
  left: 50%;
  transform: translateX(-50%);
}

/* ================= RING ANIMATIONS ================= */

@keyframes bastionRingRotateMain {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes bastionRingRotateTech {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes bastionRingRotateReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes bastionRingRotateInner {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes bastionRingRotateGlass {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ================= TEXT NODES WITHOUT PLAQUES ================= */

.hud-ring .ring-sector {
  position: absolute !important;

  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  clip-path: none !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
  overflow: visible !important;

  z-index: 30 !important;
}

.hud-ring .ring-sector::before,
.hud-ring .ring-sector::after {
  display: none !important;
}

/* ВХІД — чітко по центру зверху */
.hud-ring .sector-login {
  left: 50% !important;
  right: auto !important;
  top: 6.2% !important;
  bottom: auto !important;

  transform: translateX(-50%) !important;
}

/* РЕЄСТРАЦІЯ — чітко по центру знизу */
.hud-ring .sector-register {
  left: 50% !important;
  right: auto !important;
  bottom: 6.4% !important;
  top: auto !important;

  transform: translateX(-50%) !important;
}

/* РОЗРОБНИК прибраний */
.hud-ring .sector-dev {
  display: none !important;
}

/* Текст пунктів */
.hud-ring .ring-sector .sector-num {
  display: block !important;

  font-family: "Rajdhani", sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;

  letter-spacing: .18em !important;
  color: rgba(255,255,255,.82) !important;

  margin-bottom: 7px !important;

  text-shadow:
    0 0 10px rgba(255,255,255,.10),
    0 0 18px rgba(255, 64, 78, .12) !important;
}

.hud-ring .ring-sector .sector-title {
  display: block !important;

  font-family: "Rajdhani", sans-serif !important;
  font-size: clamp(28px, 2vw, 38px) !important;
  font-weight: 600 !important;
  line-height: .92 !important;

  letter-spacing: .12em !important;
  text-transform: uppercase !important;

  color: rgba(255,255,255,.92) !important;

  text-shadow:
    0 0 12px rgba(255,255,255,.10),
    0 0 22px rgba(255, 64, 78, .10) !important;
}

.hud-ring .ring-sector .sector-sub {
  display: block !important;

  margin-top: 9px !important;

  font-family: "Rajdhani", sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1 !important;

  letter-spacing: .42em !important;
  text-transform: uppercase !important;

  color: rgba(255, 66, 82, .84) !important;
}

/* Тонка лінія під Вхід / Реєстрація */
.hud-ring .sector-login .sector-sub::after,
.hud-ring .sector-register .sector-sub::after {
  content: "";
  display: block;

  width: 155px;
  height: 1px;

  margin: 12px auto 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 60, 76, .68),
      transparent
    );

  filter: drop-shadow(0 0 8px rgba(255, 60, 76, .55));
}

.hud-ring .ring-sector:hover .sector-title,
.hud-ring .ring-sector.is-active .sector-title {
  color: rgba(255,255,255,.98) !important;

  text-shadow:
    0 0 14px rgba(255,255,255,.16),
    0 0 26px rgba(255, 64, 78, .18) !important;
}

.hud-ring .signal-line,
.hud-ring .enter-link {
  transform: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Cleanup */
.brand-wordmark,
.bastion-glyph-wordmark,
.brand-name-img {
  display: none !important;
}

/* ================= MOBILE ================= */

@media (max-width: 900px) {
  .hud-ring {
    --core-shift-x: 4px;
    --core-shift-y: -4px;
  }

  .hud-ring .brand-name {
    font-size: clamp(34px, 8vw, 54px) !important;
    letter-spacing: .11em !important;
    padding-left: .11em !important;
  }

  .hud-ring .brand-mark {
    width: 72px !important;
  }

  .hud-ring .sector-login {
    top: 5.4% !important;
  }

  .hud-ring .sector-register {
    bottom: 5.8% !important;
  }

  .hud-ring .ring-sector .sector-title {
    font-size: 26px !important;
  }

  .hud-ring .ring-sector .sector-sub {
    font-size: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hud-ring .ring-tech-layer,
  .hud-ring .ring-data-layer,
  .hud-ring .ring-inner-layer,
  .hud-ring .ring-active-layer,
  .hud-ring .ring-glass-layer,
  .hud-ring::before,
  .hud-ring::after {
    animation: none !important;
  }
}

/* =========================================================
   BASTION ACCESS SECTORS V3 — INTEGRATED HUD MODULES
   Це фінальний override: сектори ВХІД / РЕЄСТРАЦІЯ стають
   частиною кільця, а не текстом поверх нього.
   ========================================================= */

.hud-ring {
  --sector-w: clamp(210px, 20vw, 286px);
  --sector-h: clamp(86px, 8.2vw, 116px);
  --sector-red: rgba(255, 52, 72, .72);
  --sector-red-soft: rgba(255, 52, 72, .18);
  --sector-red-dim: rgba(255, 52, 72, .075);
}

.hud-ring .ring-sector {
  width: var(--sector-w) !important;
  min-width: 0 !important;
  height: var(--sector-h) !important;
  padding: 0 !important;
  isolation: isolate !important;
  overflow: visible !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(5px, .45vw, 8px) !important;
  opacity: .92 !important;
  filter: drop-shadow(0 0 16px rgba(255, 46, 77, .14)) !important;
  transition: opacity .28s ease, filter .28s ease, transform .28s ease !important;
}

/* Верхній сектор — оптично точно по центральній осі кільця */
.hud-ring .sector-login {
  left: 50% !important;
  right: auto !important;
  top: -1.8% !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
}

/* Нижній сектор — та сама вісь, симетрія з верхнім сектором */
.hud-ring .sector-register {
  left: 50% !important;
  right: auto !important;
  bottom: -1.8% !important;
  top: auto !important;
  transform: translateX(-50%) !important;
}

.hud-ring .sector-login:hover,
.hud-ring .sector-login.is-active {
  transform: translateX(-50%) translateY(-2px) scale(1.025) !important;
}

.hud-ring .sector-register:hover,
.hud-ring .sector-register.is-active {
  transform: translateX(-50%) translateY(2px) scale(1.025) !important;
}

/* Основний корпус HUD-сектора */
.hud-ring .ring-sector::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  opacity: .94 !important;
  border: 1px solid rgba(255, 58, 78, .36) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 70, 90, .22), transparent 56%),
    linear-gradient(180deg, rgba(31, 3, 9, .86), rgba(9, 0, 4, .44) 68%, rgba(0, 0, 0, .16)),
    linear-gradient(90deg, transparent, rgba(255, 58, 78, .075), transparent) !important;
  box-shadow:
    inset 0 0 20px rgba(255, 46, 77, .075),
    inset 0 -12px 28px rgba(255, 46, 77, .055),
    0 0 24px rgba(255, 46, 77, .11),
    0 16px 44px rgba(0, 0, 0, .42) !important;
  backdrop-filter: blur(5px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(5px) saturate(1.12) !important;
  clip-path: polygon(12% 0, 88% 0, 100% 40%, 91% 100%, 9% 100%, 0 40%) !important;
  transition: border-color .28s ease, box-shadow .28s ease, opacity .28s ease, background .28s ease !important;
}

/* Технічна нижня/верхня дуга сектора */
.hud-ring .ring-sector::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  width: 78% !important;
  height: 22px !important;
  z-index: -1 !important;
  opacity: .76 !important;
  border-left: 1px solid rgba(255, 58, 78, .26) !important;
  border-right: 1px solid rgba(255, 58, 78, .26) !important;
  background:
    linear-gradient(90deg, transparent, rgba(255, 58, 78, .42), rgba(255, 255, 255, .20), rgba(255, 58, 78, .42), transparent) center / 100% 1px no-repeat !important;
  filter: drop-shadow(0 0 9px rgba(255, 46, 77, .42)) !important;
  transition: opacity .28s ease, width .28s ease, filter .28s ease !important;
}

.hud-ring .sector-login::after {
  bottom: 10px !important;
  transform: translateX(-50%) !important;
}

.hud-ring .sector-register::after {
  top: 10px !important;
  transform: translateX(-50%) !important;
}

/* Маленькі бокові “замки”, щоб сектор виглядав як частина механіки кільця */
.hud-ring .ring-sector .sector-num::before,
.hud-ring .ring-sector .sector-num::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(28px, 3.2vw, 48px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 58, 78, .55));
  filter: drop-shadow(0 0 7px rgba(255, 46, 77, .48));
}

.hud-ring .ring-sector .sector-num::before {
  right: calc(100% + 12px);
}

.hud-ring .ring-sector .sector-num::after {
  left: calc(100% + 12px);
  transform: scaleX(-1);
}

.hud-ring .ring-sector .sector-num {
  position: relative !important;
  margin: 0 !important;
  font-size: clamp(13px, 1.1vw, 16px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .16em !important;
  color: rgba(255, 255, 255, .78) !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, .12), 0 0 16px rgba(255, 46, 77, .18) !important;
}

.hud-ring .ring-sector .sector-title {
  margin: 0 !important;
  font-size: clamp(25px, 2.05vw, 38px) !important;
  font-weight: 700 !important;
  line-height: .88 !important;
  letter-spacing: .105em !important;
  padding-left: .105em !important;
  color: rgba(255, 255, 255, .96) !important;
  text-shadow:
    0 0 12px rgba(255, 255, 255, .14),
    0 0 26px rgba(255, 46, 77, .16),
    0 2px 14px rgba(0, 0, 0, .68) !important;
}

.hud-ring .ring-sector .sector-sub {
  margin: 0 !important;
  font-size: clamp(8px, .72vw, 11px) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .44em !important;
  padding-left: .44em !important;
  color: rgba(255, 68, 86, .88) !important;
  text-shadow: 0 0 11px rgba(255, 46, 77, .28) !important;
}

/* Стару тонку лінію вимикаємо — тепер лінія інтегрована в корпус сектора */
.hud-ring .sector-login .sector-sub::after,
.hud-ring .sector-register .sector-sub::after {
  display: none !important;
}

.hud-ring .ring-sector:hover,
.hud-ring .ring-sector.is-active {
  opacity: 1 !important;
  filter:
    drop-shadow(0 0 18px rgba(255, 46, 77, .26))
    drop-shadow(0 0 42px rgba(255, 46, 77, .10)) !important;
}

.hud-ring .ring-sector:hover::before,
.hud-ring .ring-sector.is-active::before {
  border-color: rgba(255, 82, 98, .58) !important;
  box-shadow:
    inset 0 0 24px rgba(255, 46, 77, .12),
    inset 0 -12px 32px rgba(255, 46, 77, .085),
    0 0 28px rgba(255, 46, 77, .18),
    0 18px 48px rgba(0, 0, 0, .46) !important;
}

.hud-ring .ring-sector:hover::after,
.hud-ring .ring-sector.is-active::after {
  width: 88% !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 14px rgba(255, 46, 77, .62)) !important;
}

.hud-ring .ring-sector:hover .sector-title,
.hud-ring .ring-sector.is-active .sector-title {
  color: #fff !important;
  text-shadow:
    0 0 16px rgba(255, 255, 255, .22),
    0 0 34px rgba(255, 46, 77, .24),
    0 2px 16px rgba(0, 0, 0, .70) !important;
}

/* На малих екранах сектори не повинні давити на центр */
@media (max-width: 900px) {
  .hud-ring {
    --sector-w: clamp(176px, 54vw, 230px);
    --sector-h: 82px;
  }

  .hud-ring .sector-login {
    top: -3.2% !important;
  }

  .hud-ring .sector-register {
    bottom: -3.2% !important;
  }
}

/* =========================================================
   BASTION ACCESS SECTORS V5 — OPTICAL CENTER FIX
   Виправлення головної проблеми: верхній сектор “ВХІД” більше
   не сидить зліва. Він прив’язаний до оптичної осі кільця/бренду.
   ========================================================= */

.hud-ring {
  --sector-w: clamp(188px, 17.4vw, 252px);
  --sector-h: clamp(68px, 6.5vw, 92px);
  --login-optical-shift-x: clamp(64px, 6.1vw, 106px);
  --register-optical-shift-x: 0px;
}

/* ВХІД — оптично по центру HUD, з легким зсувом вправо від математичної осі */
.hud-ring .sector-login {
  left: calc(50% + var(--login-optical-shift-x)) !important;
  top: 2.8% !important;
  transform: translateX(-50%) !important;
}

.hud-ring .sector-login:hover,
.hud-ring .sector-login.is-active {
  transform: translateX(-50%) translateY(-2px) scale(1.018) !important;
}

/* РЕЄСТРАЦІЯ лишається на центральній осі, але стає трохи легшою */
.hud-ring .sector-register {
  left: calc(50% + var(--register-optical-shift-x)) !important;
  bottom: 2.3% !important;
  transform: translateX(-50%) !important;
}

.hud-ring .sector-register:hover,
.hud-ring .sector-register.is-active {
  transform: translateX(-50%) translateY(2px) scale(1.018) !important;
}

/* Менше “плашки”, більше інтегрованого HUD-модуля */
.hud-ring .ring-sector::before {
  opacity: .78 !important;
  border-color: rgba(255, 58, 78, .24) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 70, 90, .13), transparent 58%),
    linear-gradient(180deg, rgba(31, 3, 9, .46), rgba(9, 0, 4, .22) 68%, rgba(0, 0, 0, .08)),
    linear-gradient(90deg, transparent, rgba(255, 58, 78, .045), transparent) !important;
  box-shadow:
    inset 0 0 16px rgba(255, 46, 77, .045),
    inset 0 -9px 22px rgba(255, 46, 77, .035),
    0 0 18px rgba(255, 46, 77, .07),
    0 12px 34px rgba(0, 0, 0, .34) !important;
  backdrop-filter: blur(4px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(4px) saturate(1.06) !important;
  clip-path: polygon(14% 0, 86% 0, 100% 38%, 90% 100%, 10% 100%, 0 38%) !important;
}

.hud-ring .ring-sector::after {
  width: 72% !important;
  opacity: .58 !important;
  filter: drop-shadow(0 0 7px rgba(255, 46, 77, .30)) !important;
}

.hud-ring .ring-sector .sector-title {
  font-size: clamp(24px, 1.84vw, 34px) !important;
  letter-spacing: .10em !important;
  padding-left: .10em !important;
}

.hud-ring .sector-register .sector-title {
  font-size: clamp(24px, 1.75vw, 32px) !important;
}

.hud-ring .ring-sector .sector-sub {
  letter-spacing: .40em !important;
  padding-left: .40em !important;
}

.hud-ring .ring-sector .sector-num::before,
.hud-ring .ring-sector .sector-num::after {
  opacity: .62 !important;
}

/* На менших екранах зсув зменшується, щоб сектор не тікав вправо */
@media (max-width: 1200px) {
  .hud-ring {
    --login-optical-shift-x: clamp(36px, 5.2vw, 74px);
  }
}

@media (max-width: 900px) {
  .hud-ring {
    --sector-w: clamp(170px, 50vw, 218px);
    --sector-h: 76px;
    --login-optical-shift-x: 0px;
  }

  .hud-ring .sector-login {
    left: 50% !important;
    top: 1.6% !important;
  }

  .hud-ring .sector-register {
    bottom: 1.6% !important;
  }
}
/* ===== END BASTION ACCESS SECTORS V5 ===== */


/* =========================================================
   BASTION CENTERLINE V6 — SINGLE AXIS ALIGNMENT
   Головна правка: прибираємо різні “центри” для кільця,
   секторів і центрального бренду. Усі ключові елементи
   прив’язані до однієї осі HUD: 50% / 50%.
   ========================================================= */

.hud-ring {
  --core-shift-x: 0px !important;
  --core-shift-y: -4px !important;
  --sector-w: clamp(190px, 16vw, 252px) !important;
  --sector-h: clamp(66px, 6.1vw, 90px) !important;
  --login-optical-shift-x: 0px !important;
  --register-optical-shift-x: 0px !important;
  --bastion-center-x: 50% !important;
}

/* Єдина вертикальна вісь для центрального блоку */
.hud-ring .ring-center.hero-core,
.hud-ring .ring-center {
  left: var(--bastion-center-x) !important;
  top: 50% !important;
  transform: translate(-50%, -50%) translate(0, var(--core-shift-y)) !important;
}

/* Внутрішні елементи центрального блоку теж не мають власних зсувів */
.hud-ring .brand-mark,
.hud-ring .brand-name,
.hud-ring .brand-subtitle,
.hud-ring .signal-line,
.hud-ring .enter-link {
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
  text-align: center !important;
}

/* Компенсація letter-spacing: без padding-left текст здається зміщеним */
.hud-ring .brand-name {
  padding-left: 0 !important;
  text-indent: .125em !important;
}

/* Єдина вісь для ВХІД */
.hud-ring .sector-login {
  left: var(--bastion-center-x) !important;
  right: auto !important;
  top: 1.9% !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
}

/* Єдина вісь для РЕЄСТРАЦІЯ */
.hud-ring .sector-register {
  left: var(--bastion-center-x) !important;
  right: auto !important;
  bottom: 1.9% !important;
  top: auto !important;
  transform: translateX(-50%) !important;
}

.hud-ring .sector-login:hover,
.hud-ring .sector-login.is-active {
  transform: translateX(-50%) translateY(-2px) scale(1.016) !important;
}

.hud-ring .sector-register:hover,
.hud-ring .sector-register.is-active {
  transform: translateX(-50%) translateY(2px) scale(1.016) !important;
}

/* Сектори стають симетричнішими, щоб центр був не лише математичний, а й оптичний */
.hud-ring .ring-sector::before {
  clip-path: polygon(12% 0, 88% 0, 100% 42%, 88% 100%, 12% 100%, 0 42%) !important;
  transform: none !important;
}

.hud-ring .ring-sector::after {
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 74% !important;
}

/* Текст усередині секторів: прибираємо приховані зсуви від padding-left */
.hud-ring .ring-sector .sector-title,
.hud-ring .ring-sector .sector-sub,
.hud-ring .ring-sector .sector-num {
  padding-left: 0 !important;
  text-align: center !important;
}

.hud-ring .ring-sector .sector-title {
  text-indent: .10em !important;
}

.hud-ring .ring-sector .sector-sub {
  text-indent: .40em !important;
}

/* Нижній сектор трохи ширший, бо слово довше; центр при цьому лишається той самий */
.hud-ring .sector-register {
  width: clamp(230px, 18.5vw, 308px) !important;
}

/* Допоміжна debug-вісь: увімкнути клас .debug-centerline на .start-page, якщо треба перевірити центр */
.start-page.debug-centerline .hud-ring::selection { background: transparent; }
.start-page.debug-centerline .hud-ring::marker { color: transparent; }
.start-page.debug-centerline .hud-ring .ring-center::after {
  content: "";
  position: fixed;
  left: 50vw;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0,255,80,.7);
  box-shadow: 0 0 10px rgba(0,255,80,.9);
  pointer-events: none;
  z-index: 9999;
}

@media (max-width: 900px) {
  .hud-ring {
    --core-shift-x: 0px !important;
    --login-optical-shift-x: 0px !important;
    --register-optical-shift-x: 0px !important;
    --sector-w: clamp(170px, 48vw, 218px) !important;
    --sector-h: 74px !important;
  }

  .hud-ring .sector-login {
    left: 50% !important;
    top: 1.2% !important;
  }

  .hud-ring .sector-register {
    left: 50% !important;
    bottom: 1.2% !important;
    width: clamp(220px, 58vw, 292px) !important;
  }
}
/* ===== END BASTION CENTERLINE V6 ===== */


/* =========================================================
   BASTION CLEAN ACCESS V8 — TEMPORARY CLEAN CENTER STAGE
   Прибрано верхній/нижній access-сектори. Центр лишається чистим,
   щоб наступним кроком намалювати ВХІД / РЕЄСТРАЦІЮ заново.
   ========================================================= */

.hud-ring .ring-sector,
.hud-ring .sector-login,
.hud-ring .sector-register,
.hud-ring .sector-dev {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.hud-ring .ring-center.hero-core,
.hud-ring .ring-center {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) translate(0, -4px) !important;
}

.hud-ring {
  --core-shift-x: 0px !important;
  --core-shift-y: -4px !important;
}

/* Трохи більше повітря для чистої центральної композиції */
.hud-ring .brand-mark {
  margin-bottom: 16px !important;
}

.hud-ring .brand-subtitle {
  margin-top: 16px !important;
}

.hud-ring .enter-link {
  margin-top: 22px !important;
}
/* ===== END BASTION CLEAN ACCESS V8 ===== */


/* ===== BASTION HUD RING RESTORE V10 ===== */

/* Прибираємо саме активний “ghost arc / банан”, не ламаючи геометрію кільця. */
.hud-ring .ring-active-layer {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Після видалення ВХІД / РЕЄСТРАЦІЯ залишаємо чисту центральну сцену. */
.hud-ring .ring-sector,
.hud-ring .sector-login,
.hud-ring .sector-register,
.hud-ring .sector-dev {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Єдина центральна вісь для логотипу, BASTION і кнопки входу. */
.hud-ring {
  --core-shift-x: 0px !important;
  --core-shift-y: -4px !important;
}

.hud-ring .ring-center.hero-core,
.hud-ring .ring-center {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) translate(0, var(--core-shift-y)) !important;
}

/* Не чіпаємо основну геометрію hud-ring.css — тільки чистимо зайве. */
/* ===== END BASTION HUD RING RESTORE V10 ===== */
/* =========================================================
   BASTION — CLEAN CINEMATIC CORNERS
   прибираємо кутові HUD-написи
   ========================================================= */

.hud-corner,
.corner-label,
.corner-meta,
.system-label,
.system-status,
.status-block,
.status-line,
.footer-meta,
.footer-copy,
.top-left-meta,
.top-right-meta,
.bottom-left-meta,
.bottom-right-meta {
  display: none !important;
}

/* Якщо кутові блоки мають стару структуру */
.hero-corner,
.hero-meta,
.hero-status,
.hero-footer,
.hud-top-left,
.hud-top-right,
.hud-bottom-left,
.hud-bottom-right {
  display: none !important;
}

/* Залишаємо центральну сцену чистою */
.hero-scene,
.hero-center,
.bastion-core,
.bastion-wordmark,
.hud-ring {
  pointer-events: auto;
}


/* =========================================================
   BASTION — AUTH PANEL v20
   ВХІД / РЕЄСТРАЦІЯ замість стартового напису
   ========================================================= */

.access-auth-zone {
  position: relative;
  margin-top: 18px;
  min-width: min(420px, 78vw);
  display: grid;
  place-items: center;
  z-index: 35;
}

.access-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 42px;
  padding: 8px 34px;
  isolation: isolate;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity .32s ease,
    transform .32s ease,
    filter .32s ease;
}

.access-choice::before,
.access-choice::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 26px;
  opacity: .76;
  transform: translateY(-50%);
  pointer-events: none;
  transition:
    opacity .26s ease,
    transform .26s ease;
}

.access-choice::before {
  left: 0;
  border-left: 1px solid rgba(255, 62, 78, .82);
  border-top: 1px solid rgba(255, 62, 78, .54);
  border-bottom: 1px solid rgba(255, 62, 78, .54);
}

.access-choice::after {
  right: 0;
  border-right: 1px solid rgba(255, 62, 78, .82);
  border-top: 1px solid rgba(255, 62, 78, .54);
  border-bottom: 1px solid rgba(255, 62, 78, .54);
}

.access-choice:hover::before {
  transform: translateY(-50%) translateX(-5px);
}

.access-choice:hover::after {
  transform: translateY(-50%) translateX(5px);
}

.access-choice-btn {
  position: relative;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;

  font-family: "Rajdhani", "Exo 2", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;

  color: rgba(246, 248, 255, .90);
  text-shadow:
    0 0 8px rgba(255,255,255,.10),
    0 0 18px rgba(255, 46, 70, .14);

  transition:
    color .22s ease,
    text-shadow .22s ease,
    transform .22s ease,
    filter .22s ease;
}

.access-choice-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: .32em;
  bottom: -8px;
  height: 1px;
  opacity: 0;
  transform: scaleX(.25);
  background:
    linear-gradient(90deg, transparent, rgba(255, 72, 82, .92), transparent);
  box-shadow: 0 0 12px rgba(255, 54, 76, .44);
  transition:
    opacity .22s ease,
    transform .22s ease;
}

.access-choice-btn:hover,
.access-choice-btn:focus-visible {
  color: #fff;
  transform: translateY(-1px);
  filter: brightness(1.18);
  text-shadow:
    0 0 10px rgba(255,255,255,.24),
    0 0 26px rgba(255, 48, 70, .30);
}

.access-choice-btn:hover::after,
.access-choice-btn:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

.access-dot {
  display: inline-block;
  color: rgba(255, 48, 66, .96);
  text-shadow:
    0 0 8px rgba(255, 38, 62, .72),
    0 0 18px rgba(255, 38, 62, .36);
  animation: accessDotPulseV20 2.2s ease-in-out infinite;
}

/* ================= AUTH PANEL ================= */

.auth-panel {
  position: relative;
  width: min(430px, 78vw);
  display: grid;
  gap: 12px;
  padding: 18px 24px 20px;

  opacity: 0;
  transform: translateY(14px) scale(.975);
  pointer-events: none;

  background:
    linear-gradient(180deg, rgba(80, 12, 20, .23), rgba(5, 5, 8, .46)),
    radial-gradient(circle at 50% 0%, rgba(255, 60, 76, .14), transparent 58%);
  border: 1px solid rgba(255, 66, 82, .26);
  box-shadow:
    inset 0 0 24px rgba(255, 60, 76, .055),
    0 0 28px rgba(255, 30, 50, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  clip-path: polygon(
    5% 0%,
    95% 0%,
    100% 16%,
    100% 84%,
    95% 100%,
    5% 100%,
    0% 84%,
    0% 16%
  );

  transition:
    opacity .36s ease,
    transform .36s cubic-bezier(.2,.8,.2,1),
    filter .36s ease;
}

.auth-panel::before,
.auth-panel::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  height: 1px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255, 74, 86, .66), transparent);
  box-shadow: 0 0 12px rgba(255, 52, 70, .22);
}

.auth-panel::before {
  top: 10px;
}

.auth-panel::after {
  bottom: 10px;
}

.auth-panel.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.access-auth-zone.is-auth-open .access-choice {
  opacity: 0;
  transform: translateY(-10px) scale(.96);
  pointer-events: none;
  position: absolute;
}

.auth-panel[hidden] {
  display: none !important;
}

.auth-back,
.auth-switch {
  border: 0;
  background: transparent;
  color: rgba(255, 90, 98, .78);
  font-family: "Rajdhani", "Exo 2", system-ui, sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color .22s ease,
    text-shadow .22s ease,
    transform .22s ease;
}

.auth-back {
  justify-self: start;
  padding: 0;
  font-size: 11px;
}

.auth-switch {
  justify-self: center;
  margin-top: 2px;
  font-size: 11px;
}

.auth-back:hover,
.auth-switch:hover,
.auth-back:focus-visible,
.auth-switch:focus-visible {
  color: #fff;
  transform: translateY(-1px);
  text-shadow:
    0 0 8px rgba(255,255,255,.18),
    0 0 18px rgba(255, 50, 70, .24);
}

.auth-panel-head {
  text-align: center;
  display: grid;
  gap: 3px;
  margin-bottom: 2px;
}

.auth-kicker {
  font-family: "Rajdhani", "Exo 2", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(255, 72, 82, .70);
}

.auth-title {
  margin: 0;
  font-family: "Rajdhani", "Exo 2", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: rgba(248, 250, 255, .94);
  text-shadow:
    0 0 10px rgba(255,255,255,.16),
    0 0 24px rgba(255, 48, 70, .18);
}

.auth-field {
  display: grid;
  gap: 5px;
  text-align: left;
}

.auth-field span {
  padding-left: 4px;
  font-family: "Rajdhani", "Exo 2", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: rgba(255, 104, 112, .74);
}

.auth-field input {
  width: 100%;
  height: 38px;
  padding: 0 13px;

  font-family: "Rajdhani", "Exo 2", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .10em;
  color: rgba(248, 250, 255, .94);

  outline: none;
  border: 1px solid rgba(255, 72, 82, .24);
  background:
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(10, 8, 12, .58));
  box-shadow:
    inset 0 0 14px rgba(255, 60, 76, .05),
    0 0 0 rgba(255, 60, 76, 0);

  transition:
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

.auth-field input:focus {
  border-color: rgba(255, 98, 108, .62);
  background:
    linear-gradient(180deg, rgba(30, 4, 10, .46), rgba(7, 5, 9, .72));
  box-shadow:
    inset 0 0 16px rgba(255, 60, 76, .08),
    0 0 18px rgba(255, 48, 70, .12);
}

.auth-field-confirm {
  display: none;
}

.auth-panel[data-mode="register"] .auth-field-confirm {
  display: grid;
}

.auth-submit {
  margin-top: 3px;
  height: 40px;

  border: 1px solid rgba(255, 72, 82, .36);
  background:
    linear-gradient(90deg, rgba(255, 38, 62, .08), rgba(255, 68, 82, .18), rgba(255, 38, 62, .08));
  color: rgba(255,255,255,.94);

  font-family: "Rajdhani", "Exo 2", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  cursor: pointer;

  box-shadow:
    inset 0 0 18px rgba(255, 52, 70, .08),
    0 0 18px rgba(255, 36, 62, .08);

  transition:
    transform .22s ease,
    filter .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.auth-submit:hover,
.auth-submit:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.16);
  border-color: rgba(255, 112, 122, .68);
  box-shadow:
    inset 0 0 20px rgba(255, 52, 70, .12),
    0 0 26px rgba(255, 36, 62, .18);
}

@keyframes accessDotPulseV20 {
  0%, 100% { opacity: .48; transform: scale(.88); }
  50% { opacity: 1; transform: scale(1.22); }
}

@media (max-width: 760px) {
  .access-auth-zone {
    min-width: min(360px, 86vw);
  }

  .access-choice {
    gap: 14px;
    padding: 8px 24px;
  }

  .access-choice-btn {
    font-size: 13px;
    letter-spacing: .22em;
  }

  .auth-panel {
    width: min(360px, 86vw);
    padding: 17px 18px 19px;
  }

  .auth-title {
    font-size: 19px;
    letter-spacing: .14em;
  }
}

.auth-panel.auth-shake {
  animation: authPanelShakeV20 .28s ease both;
}

@keyframes authPanelShakeV20 {
  0%, 100% { transform: translateX(0) scale(1); }
  25% { transform: translateX(-5px) scale(1); }
  50% { transform: translateX(5px) scale(1); }
  75% { transform: translateX(-3px) scale(1); }
}

/* =========================================================
   BASTION — AUTH FIELD POLISH v21
   - прибрано повторне введення пароля
   - placeholder замість реальної пошти
   ========================================================= */

.auth-field input::placeholder {
  color: rgba(245, 247, 255, .42);
  letter-spacing: .08em;
}

.auth-field-confirm {
  display: none !important;
}


/* =========================================================
   BASTION — MFA PANEL v24
   QR-код + код Google Authenticator
   ========================================================= */

.auth-panel[data-step="mfa"] {
  width: min(460px, 82vw);
}

.auth-panel[data-step="mfa"] .auth-panel-head {
  margin-bottom: 8px;
}

.mfa-panel {
  display: grid;
  gap: 12px;
  justify-items: center;
  margin: 2px 0 4px;
  animation: mfaPanelInV24 .34s ease both;
}

.mfa-panel[hidden] {
  display: none !important;
}

.mfa-qr-wrap {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.mfa-qr-wrap[hidden],
.mfa-login-hint[hidden] {
  display: none !important;
}

.mfa-qr-frame {
  width: 172px;
  height: 172px;
  display: grid;
  place-items: center;
  padding: 10px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(235,235,238,.95));
  border: 1px solid rgba(255, 76, 90, .38);
  box-shadow:
    0 0 18px rgba(255, 52, 72, .18),
    inset 0 0 18px rgba(255, 52, 72, .05);

  clip-path: polygon(
    7% 0%,
    93% 0%,
    100% 7%,
    100% 93%,
    93% 100%,
    7% 100%,
    0% 93%,
    0% 7%
  );
}

.mfa-qr-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mfa-secret {
  max-width: 100%;
  font-family: "Rajdhani", "Exo 2", system-ui, sans-serif;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: .12em;
  color: rgba(255, 118, 126, .76);
  word-break: break-all;
  text-align: center;
}

.mfa-hint {
  max-width: 360px;
  font-family: "Rajdhani", "Exo 2", system-ui, sans-serif;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(245, 247, 255, .62);
  text-align: center;
}

.mfa-code-field {
  width: 100%;
}

.mfa-code-field input {
  height: 44px;
  text-align: center;
  font-size: 22px;
  letter-spacing: .42em;
  padding-left: .42em;
}

.auth-panel[data-step="mfa"] .auth-switch {
  color: rgba(255, 126, 132, .76);
}

@keyframes mfaPanelInV24 {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* =========================================================
   BASTION — MFA REGISTER FLOW FIX v25
   ========================================================= */

.auth-field[hidden],
.auth-panel [hidden] {
  display: none !important;
}

.mfa-qr-image[src=""],
.mfa-qr-image:not([src]) {
  display: none !important;
}

.mfa-qr-frame:has(.mfa-qr-image[src=""]) {
  opacity: .35;
}