/* =========================================================
   CS-RYAZAN-NEW — экран авторизации, киберпанк / красный
   Стилизует существующие модалки #authorization и #registration,
   не меняя их id/классов/JS-обвязки (send_form, data-toggle и т.д.)
   ========================================================= */

:root{
  --cp-void:#050406;
  --cp-panel:#0f0a0d;
  --cp-panel-2:#160e12;
  --cp-red:#ff2245;
  --cp-red-deep:#7a0014;
  --cp-red-glow:rgba(255,34,69,.55);
  --cp-steel:#6d6470;
  --cp-line:rgba(255,34,69,.28);
  --cp-text-hi:#f4f1f2;
  --cp-text-mute:#948e93;
}

/* затемнённая красноватая подложка под открытой модалкой */
body.modal-open{ overflow:hidden; }
.modal-backdrop.show{
  background:
    radial-gradient(ellipse 900px 700px at 50% 45%, rgba(122,0,20,.45), transparent 60%),
    rgba(3,2,3,.86) !important;
  opacity:1 !important;
}

#authorization.modal,
#registration.modal{
  z-index:1060;
}

/* ---------- каркас-«хаб»: модалка без стандартной рамки ---------- */
#authorization .modal-dialog,
#registration .modal-dialog{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:64px;
  max-width:none;
  width:auto;
  margin:0 auto;
  min-height:calc(100% - 2rem);
  pointer-events:none;
}
#authorization .modal-dialog > *,
#registration .modal-dialog > *{ pointer-events:auto; }

@media (max-width:760px){
  #authorization .modal-dialog,
  #registration .modal-dialog{
    flex-direction:column;
    gap:30px;
  }
}

/* ---------- ядро (круглая карточка формы) ---------- */
#authorization .modal-content,
#registration .modal-content{
  position:relative;
  width:min(380px, 82vw);
  height:min(380px, 82vw);
  border-radius:50%;
  background:transparent;
  border:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:scale(.82);
  animation:cpCoreIn .55s cubic-bezier(.2,.8,.2,1) .05s forwards;
}
@keyframes cpCoreIn{ to{ opacity:1; transform:scale(1); } }

#authorization .modal-content::before,
#registration .modal-content::before{
  content:"";
  position:absolute; inset:-16px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, var(--cp-red) 18deg, transparent 60deg, transparent 300deg, var(--cp-red-deep) 340deg, transparent 360deg);
  animation:cpSpin 7s linear infinite;
  opacity:.85;
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}
@keyframes cpSpin{ to{ transform:rotate(360deg); } }

#authorization .modal-content::after,
#registration .modal-content::after{
  content:"";
  position:absolute; inset:-3px; border-radius:50%;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,34,69,.14), transparent 55%),
    linear-gradient(155deg, var(--cp-panel-2), var(--cp-panel) 60%, #0a0709 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 0 60px rgba(255,34,69,.18), inset 0 0 50px rgba(0,0,0,.6);
  z-index:0;
}

/* закрыть — маленький крестик поверх круга.
   Отступ задан в % от диаметра круга, а не в px, чтобы крестик
   всегда оставался внутри видимой окружности, а не «улетал»
   в угол квадратного бокса модалки (где фона уже нет). */
#authorization .modal-header,
#registration .modal-header{
  position:absolute; top:17%; right:17%; z-index:5;
  border:0; padding:0; background:transparent;
}
#authorization .modal-header .modal-title,
#registration .modal-header .modal-title{ display:none; }
#authorization .modal-header .close,
#registration .modal-header .close{
  color:var(--cp-text-mute);
  text-shadow:none;
  opacity:1;
  font-size:1.5rem;
  transition:color .2s ease, transform .2s ease;
}
#authorization .modal-header .close:hover,
#registration .modal-header .close:hover{
  color:var(--cp-red);
  transform:rotate(90deg);
}

#authorization .modal-body,
#registration .modal-body{
  position:relative; z-index:2;
  width:78%;
  padding:0;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; /* центрируем контент внутри круга по вертикали:
    без этого правила bootstrap задаёт .modal-body{flex:1 1 auto},
    контент растягивается на всю высоту круга и прижимается к верхнему
    краю квадратного бокса модалки — там, где реальная (круглая) подложка
    уже отсутствует, из-за чего надпись «АВТОРИЗАЦИЯ» и т.п. визуально
    "вылезают" за пределы круга */
  text-align:center;
  max-height:100%;
  overflow:visible;
}

#authorization .modal-body::before{
  content:"АВТОРИЗАЦИЯ";
  font-family:'Orbitron', sans-serif;
  font-size:.6rem; letter-spacing:.28em;
  color:var(--cp-steel);
  margin-bottom:8px;
}
#registration .modal-body::before{
  content:"РЕГИСТРАЦИЯ";
  font-family:'Orbitron', sans-serif;
  font-size:.6rem; letter-spacing:.28em;
  color:var(--cp-steel);
  margin-bottom:8px;
}

/* ---------- поля формы ---------- */
#authorization .form-control,
#registration .form-control{
  width:100%;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  padding:10px 12px;
  font-size:.95rem; font-weight:500;
  color:var(--cp-text-hi);
  margin-bottom:10px;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
#authorization .form-control::placeholder,
#registration .form-control::placeholder{ color:var(--cp-text-mute); }
#authorization .form-control:focus,
#registration .form-control:focus{
  border-color:var(--cp-red);
  background:rgba(255,34,69,.06);
  box-shadow:0 0 0 3px rgba(255,34,69,.12);
  outline:none;
}

#authorization .btn-primary,
#registration .btn-primary{
  width:100%;
  border:none; border-radius:8px;
  padding:11px 16px;
  font-weight:700; letter-spacing:.04em;
  color:#170307 !important;
  background:linear-gradient(135deg, var(--cp-red), #c4102c) !important;
  box-shadow:0 0 22px rgba(255,34,69,.35);
  transition:transform .18s ease, box-shadow .18s ease;
  margin-top:2px;
}
#authorization .btn-primary:hover,
#registration .btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 0 30px rgba(255,34,69,.55);
}

#authorization .modal-body a.small,
#registration .modal-body a.small,
#registration .modal-body a.privacy-policy{
  color:var(--cp-text-mute);
  font-size:.78rem;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
  display:inline-block;
  margin-top:8px;
}
#authorization .modal-body a.small:hover,
#registration .modal-body a.small:hover,
#registration .modal-body a.privacy-policy:hover{
  color:var(--cp-red);
  border-color:var(--cp-red);
  text-decoration:none;
}
#registration .modal-body a.privacy-policy{
  font-size:.68rem; line-height:1.3; opacity:.75;
}

#result, #result2, #result_api_reg{ margin-top:6px; }

/* ---------- спутники: VK / Steam / Регистрация ---------- */
.cp-satellites{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:40px;
  z-index:3;
}
.cp-sat{
  display:flex; align-items:center; gap:12px;
  opacity:0; transform:translateX(14px);
  animation:cpSatIn .5s ease forwards;
  text-decoration:none !important;
}
.cp-sat:nth-child(1){ animation-delay:.55s; }
.cp-sat:nth-child(2){ animation-delay:.72s; }
.cp-sat:nth-child(3){ animation-delay:.89s; }
.cp-sat:nth-child(4){ animation-delay:1.06s; }
@keyframes cpSatIn{ to{ opacity:1; transform:translateX(0); } }

.cp-sat .cp-sat-btn{
  position:relative;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg, var(--cp-panel-2), #0a0709);
  border:1px solid rgba(255,255,255,.1);
  color:var(--cp-text-hi) !important;
  box-shadow:0 0 0 rgba(255,34,69,0);
  transition:box-shadow .25s ease, border-color .25s ease, transform .2s ease;
  flex-shrink:0;
}
.cp-sat .cp-sat-btn svg{ width:20px; height:20px; }
.cp-sat .cp-sat-btn .m-icon{ font-size:1.15rem; }
.cp-sat .cp-sat-btn::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid var(--cp-line); opacity:.6;
}
.cp-sat:hover .cp-sat-btn{
  border-color:var(--cp-red);
  box-shadow:0 0 24px var(--cp-red-glow);
  transform:scale(1.06);
}
.cp-sat-label{
  font-family:'Orbitron', sans-serif;
  font-size:.6rem; letter-spacing:.14em;
  color:var(--cp-text-mute); white-space:nowrap;
}
.cp-sat:hover .cp-sat-label{ color:var(--cp-red); }

@media (max-width:760px){
  .cp-satellites{ flex-direction:row; justify-content:center; }
  .cp-sat{ flex-direction:column; gap:8px; }
}

/* обёртка трассы и спутников: держит их вместе одним флекс-элементом
   внутри .modal-dialog и растягивает .cp-trunk РОВНО по высоте
   .cp-satellites (а не по высоте всей модалки/страницы) */
.cp-hub{
  display:flex;
  align-items:stretch;
  gap:64px; /* тот же промежуток трасса→спутники, что раньше был
               между .modal-content, .cp-trunk и .cp-satellites */
}
@media (max-width:760px){
  .cp-hub{ flex-direction:column; align-items:center; }
}

/* перемычки: трасса + отводы к каждой кнопке, в духе LineageOS.
   Раньше был align-self:stretch относительно .modal-dialog, из-за чего
   вертикальная линия растягивалась на всю высоту страницы — теперь
   растяжение идёт только внутри .cp-hub, по высоте списка спутников. */
.cp-trunk{
  position:relative;
  width:70px;
  flex-shrink:0;
}
.cp-trunk::before{
  content:"";
  position:absolute; left:50%; top:0; bottom:0; width:1px;
  transform:translateX(-50%);
  background:linear-gradient(to bottom, transparent, var(--cp-red) 15%, var(--cp-red) 85%, transparent);
  opacity:0;
  animation:cpTrunkIn .6s ease .35s forwards;
}
@keyframes cpTrunkIn{ to{ opacity:.55; } }
.cp-trunk::after{
  content:"";
  position:absolute; left:0; top:50%; width:70px; height:1px;
  transform:translateY(-50%);
  background:linear-gradient(to right, transparent, var(--cp-red-glow));
  opacity:0;
  animation:cpTrunkIn .6s ease .3s forwards;
}
@media (max-width:760px){ .cp-trunk{ display:none; } }

.cp-sat .cp-branch{
  position:absolute; left:-64px; top:50%; width:64px; height:1px;
  transform:translateY(-50%);
  background:linear-gradient(to right, transparent, var(--cp-red-glow));
  opacity:0;
  animation:cpTrunkIn .5s ease forwards;
}
.cp-sat:nth-child(1) .cp-branch{ animation-delay:.6s; }
.cp-sat:nth-child(2) .cp-branch{ animation-delay:.77s; }
.cp-sat:nth-child(3) .cp-branch{ animation-delay:.94s; }
.cp-sat:nth-child(4) .cp-branch{ animation-delay:1.11s; }
@media (max-width:760px){ .cp-sat .cp-branch{ display:none; } }
.cp-sat{ position:relative; }