/* ====================================================================
   lk.css — Сводный стиль для ЛК Sportdan.
   Сгенерирован автоматически из:
     1) /mnt/data/lk.css (база)
     2) /mnt/data/password-recovery.html (<style> блоки)
     3) /mnt/data/sign-up.html (<style> блоки)
     4) /mnt/data/login.html (<style> блоки)
     5) /mnt/data/profile.html (<style> блоки)
   Полные дубли правил удалены, порядок первых вхождений сохранён.
   ВНИМАНИЕ: если один и тот же селектор встречался с разным содержимым,
   обе версии сохранены в порядке появления в исходниках для корректного каскада.
==================================================================== */

/* Local Roboto (WOFF2) */
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-RegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

html, body{
  background: #061729;
  color: #e4ecff;
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}
.wrapper{
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 18px;
}
/* .card{
  background: #0d1f2d;
  border-radius: 14px;
  box-shadow: 0 0 20px rgba(0,0,0,.50);
  padding: 32px 32px 38px;
  margin-bottom: 28px;
} */
.section-title{
  margin: 28px 0 12px;
  font-size: 17px;
  font-weight: 500;
  color: #c7d8ff;
}
.table-scroll{
  max-width: 100%;
  overflow-x: auto;
  border-radius: 10px;
  background: #0d1f2d;
}
.table-scroll table{
  width: 100%;
  border-collapse: collapse;
}
.table-scroll th, .table-scroll td{
  padding: 12px 8px;
  /* border-bottom: 1px solid #12244d; */
  font-size: 13px;
  text-align: left;
}
.table-scroll th{
  border-bottom: 1px solid grey;
  /* background: #14325a; */
  color: #b6c6e3;
  font-weight: 500;
}
.table-scroll td{
  color: #e4ecff;
}
input, select, textarea{
  font-family: inherit;
  font-size: 15px;
  background: #112744;
  color: #fff;
  border: 1px solid #1a3254;
  border-radius: 7px;
  padding: 8px 12px;
  box-sizing: border-box;
  transition: border .2s, background .2s;
}
input:focus, select:focus, textarea:focus{
  border-color: #2a91ff;
  outline: none;
  background: #162b4b;
}
input[readonly]{ opacity: .75; cursor: default; }
input.input-error{ box-shadow: 0 0 0 2px #e35d6a inset; border-color: #e35d6a; }
.btn, .btn-primary, .btn-ghost, .btn-outline-danger, .btn-danger, .btn-send{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 18px;
  cursor: pointer;
  transition: opacity .22s, background .18s, color .2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.11);
}
.btn-primary, .btn-send{
  background: #2162D6;
  color: #fff;
}
.btn-ghost{
  background: #112744;
  color: #c7d8ff;
}
.btn-outline-danger{
  background: transparent;
  border: 1px solid #e35d6a;
  color: #e35d6a;
}
.btn-danger{
  background: #e35d6a;
  color: #fff;
}
.btn:disabled, .btn-primary:disabled, .btn-send:disabled{ opacity: .48; cursor: default; }
.switch{ position: relative; display: inline-block; width: 52px; height: 28px; cursor: pointer; }
.switch input{ opacity: 0; width: 0; height: 0; }
.slider{
  position: absolute; inset: 0;
  background: #374d79;
  border-radius: 34px;
  transition: background .35s;
  box-shadow: inset 0 0 4px rgba(0,0,0,.45);
}
.slider::before{
  content: "";
  position: absolute;
  height: 22px; width: 22px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 2px 4px rgba(0,0,0,.35);
}
.switch input:checked + .slider{
  background: linear-gradient(135deg,#2a91ff 0%,#186cd8 100%);
}
.switch input:checked + .slider::before{
  transform: translateX(24px);
}
.switch input:focus-visible + .slider{
  box-shadow: 0 0 0 3px rgba(42,145,255,.6);
}
.badge, .badge-ok, .badge-no{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  min-width: 120px; max-width: 140px;
  height: 36px; padding: 0 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
  cursor: pointer;
  margin-left: 0;
  transition: filter .22s, background .18s, color .2s;
}
.badge-ok{ background: #1abc9c; color: #fff; pointer-events: none; cursor: default; }
.badge-no{ background: #f95d6a; color: #fff; }
.badge-no:hover{ filter: brightness(1.10); }
.toast{
  position: fixed; bottom: 22px; right: 20px;
  background: #14325a; color: #fff; padding: 12px 18px;
  border-radius: 10px; font-size: 13px;
  box-shadow: 0 4px 18px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transform: translateY(20px);
  transition: opacity .4s, transform .4s; z-index: 300;
}
.toast.show{ opacity: 1; transform: translateY(0); }
.overlay{
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: none; align-items: center; justify-content: center; z-index: 200;
}
.overlay.show{ display: flex; }
.modal{
  font-size: 1.8rem;
  background: rgba(7, 20, 38, 0.96);
  border-radius: 14px;
  padding: clamp(18px, 3vw, 26px) clamp(16px, 4vw, 32px);
  --modal-width: clamp(240px, calc(100vw - 24px), 380px);
  --modal-max-width: 380px;
  width: min(var(--modal-width), calc(100vw - 24px));
  max-width: min(var(--modal-max-width), calc(100vw - 24px));
  box-sizing: border-box;
  box-shadow: 0 0 20px rgba(0,0,0,.55);
  word-break: break-word;
}
.modal--auth-invalid{
  --modal-width: 600px;
  --modal-max-width: 600px;
}
@media (max-width: 640px) {
  .modal--auth-invalid{
    --modal-width: 90vw;
    --modal-max-width: 90vw;
  }
}
.modal:focus,
.modal:focus-visible{
  outline: none;
}
.modal__dialog:focus,
.modal__dialog:focus-visible{
  outline: none;
}
.modal h3, .modal h4{ 
	color: #fff; 
	font-size: 2rem; 
	text-align: center; 
	margin: 0 0 12px; 
}
.modal p{ color: #c7d8ff; font-size: 14px; line-height: 1.5; margin: 0 0 18px; text-align: center; }
.modal .modal__content{
	color: #c7d8ff; 
	/* font-size: 14px;  */
	line-height: 1.5; 
	margin: 0; 
	text-align: center;
}
.modal .modal__content > :last-child{ margin-bottom: 0; }
.modal input{ 
  width: 100%; 
  background: #112744; 
  border: 1px solid #1a3254; 
  border-radius: 8px; 
  padding: 10px 12px; 
  /* font-size: 14px;  */
  color: #fff; 
  /* margin-bottom: 18px;  */
}
#delete-modal input{
  margin-bottom: 18px;
}
.modal-actions{ display: flex; gap: 12px; justify-content: center; }
.close-x{
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: 0;
  color: #c7d8ff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.close-x:hover{ color: #ffffff; }
.code-inputs{
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 14px 0 6px;
}
.code-inputs input{
  /* width: 48px; */
  /* height: 56px; */
  border-radius: 10px;
  border: none;
  outline: none;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  background: #14243c;
  color: #fff;
  transition: background .25s, box-shadow .25s;
}
.code-inputs input:focus{ background: #2a3d5e; }
.input-error{ box-shadow: 0 0 0 2px #f95d6a inset !important; }

/* ===== Field Errors (inline) =====
   Стабильные слоты под ошибками → верстка не прыгает.
   Можно менять высоту строки через --fe-slot-height.
*/
:root{
  --fe-slot-height: 14px;      /* 12–14px: компактно и читабельно */
  --fe-error-color: #ff6a6a;   /* цвет ошибок */
}

/* Подсветка инпута с ошибкой */
.is-invalid{
  border-color: var(--fe-error-color) !important;
  outline: none;
}

/* Резерв под сообщение об ошибке (всегда занимает место) */
.field-error-slot{
  display: block;
  height: var(--fe-slot-height);
  line-height: var(--fe-slot-height);
  font-size: 0.7em;
  color: var(--fe-error-color);
  /* margin-top: 2px; */
  visibility: hidden;             /* скрыто, но место занято */
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.field-error-slot.fe-visible{      /* показываем текст ошибки */
  visibility: visible;
}

/* Совместимость со старым .field-error (если где-то ещё используется) */
.field-error{
  font-size: 12px;
  line-height: 14px;
  color: var(--fe-error-color);
  margin-top: 2px;
}

@media (max-width: 480px){
  :root{ --fe-slot-height: 12px; }
  .field-error, .field-error-slot{ font-size: 11px; }
}

/* ===== Field Errors: overlay mode (z-index) =====
   Ничего не сдвигает в потоке. Сообщение парит строго под инпутом слева.
   Включается классом .fe-abs на .field-error-slot (ставится JS).
*/
:root{
  --fe-overlay-z: 5;             /* слой ошибок, “на пару пунктов” выше рабочего */
}
.fe-anchor{ position: relative; }   /* якорная обертка для абсолютного позиционирования */

.field-error-slot.fe-abs{
  position: absolute;
  top: calc(100%  2px);
  left: 0;
  width: 100%;
  height: auto;
  min-height: 0;
  /* line-height: 1.2; */
  pointer-events: none;           /* не перекрывает клики по нижним элементам */
  z-index: var(--fe-overlay-z);
  background: transparent;
  visibility: hidden;
  opacity: 0;
  transition: opacity .15s ease-in-out;
  white-space: normal;
  overflow: hidden;
}
.field-error-slot.fe-abs.fe-visible{
  visibility: visible;
  opacity: 1;
}



/* ===== Field Errors: pseudo (::after) =====
   Сообщение выводится псевдоэлементом у самого input/textarea/select.
   Не участвует в потоке, не ломает сетку, не требует JS-вычислений. */
:root{
  --fe-overlay-z: 5;                  /* слой сообщений об ошибке */
  --fe-gap: 2px;                      /* зазор под инпутом */
  --fe-color: var(--error, #ff6b6b);  /* цвет текста ошибки */
  --fe-font-size: 12px;
  --fe-line-height: 1.3;
}

input.is-invalid[data-error],
textarea.is-invalid[data-error],
select.is-invalid[data-error]{
  position: relative; /* якорь для ::after */
}

input.is-invalid[data-error]::after,
textarea.is-invalid[data-error]::after,
select.is-invalid[data-error]::after{
  content: attr(data-error);
  position: absolute;
  left: 0;
  right: 0;                            /* ширина = ширине поля */
  top: calc(100%  var(--fe-gap));
  z-index: var(--fe-overlay-z);
  pointer-events: none;                /* не перехватывает клики по соседям */
  display: block;
  font-size: var(--fe-font-size);
  line-height: var(--fe-line-height);
  color: var(--fe-color);
  white-space: normal;
  /* опционально можно ограничить до 2 строк: раскомментируй блок ниже */
  /* display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden; */
}



/* === Field errors via ::after on anchor (universal) === */
:root{
  --fe-gap: 4px;                      /* зазор под полем */
  --fe-z: 5;                           /* слой поверх контента формы */
  --fe-color: var(--error, #ff6b6b);   /* цвет текста */
  --fe-font-size: 12px;
  --fe-line: 1.3;
}

/* Якори: добавляются JS на ближайший контейнер поля */
.fe-anchor{ position: relative; }

/* Сообщение: позиционируем относительно якоря,
   но смещаемся влево/вправо/вниз так, чтобы попасть ровно под INPUT */
.fe-anchor.fe-error::after{
  content: attr(data-fe);
  position: absolute;
  /* левая граница = левая граница инпута */
  left: var(--fe-left, 0);
  /* правая граница чтобы ширина = ширине инпута */
  right: var(--fe-right, 0);
  /* вертикаль от нижней кромки инпута */
  top: calc(var(--fe-top, 100%) + var(--fe-gap));
  z-index: var(--fe-z);
  pointer-events: none;
  display: block;
  color: var(--fe-color);
  font-size: 0.9em;
  line-height: 0.5;
  margin-left: 0.4em;
  /* при желании ограничить до 2 строк:
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; */
}



input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #112744 inset;
  box-shadow: 0 0 0 1000px #112744 inset;
  border: 1px solid #1a3254;
  transition: background-color 9999s ease-in-out 0s;
}
input:-moz-autofill,
textarea:-moz-autofill,
select:-moz-autofill{
  box-shadow: 0 0 0 1000px #112744 inset;
  color: #fff;
}
.hint{ font-size: 11px; color: #7d8aac; margin-left: 4px; }
/* .legal{ font-size: 11px; color: #7d8aac; margin-top: 24px; } */
.is-busy{ opacity: .55; pointer-events: none; position: relative; }
@media (max-width: 800px){
  .wrapper { padding: 12px 6vw; }
  .card { padding: 19px 7vw 19px 7vw; }
}
@media (max-width: 540px){
  .wrapper { padding: 8px 1vw; }
  .card { padding: 16px 3vw 16px 3vw; }
  .modal { padding: 16px 18px; }
}
:root{
      font-size:62.5%;
      --clr-card-bg:rgba(7, 20, 38, 0.96); --clr-body-bg:#0b1830; --clr-text:#fff; --clr-muted:#ccc;
      --clr-input:#1a335c; --clr-placeholder:#888;
      --clr-btn-1:#2a91ff; --clr-btn-2:#186cd8;
      --clr-btn-1h:#3aaaff; --clr-btn-2h:#1f75e0;
    }



*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Roboto,system-ui,-apple-system,Segoe UI,Arial,Helvetica,sans-serif;background:#000;color:var(--clr-text)}
a{color:#4dabf7;text-decoration:none}
.site-header__logo{
  /* width: 205px; */
  font-weight:700;
  color:#00c6ff;
  white-space: nowrap;
}
.site-nav{
  flex: 1 1 auto;
  min-width: 0;
}
.site-nav__list{
  display:flex;
  align-items:center;
  gap: 1rem;
  list-style:none;
  margin:0;
  padding:0;
  flex-wrap: nowrap;
}
.site-nav__item{ white-space: nowrap; }
.logo{
    height: 30px;
    /* width: auto; */
    display: block;
}
.logo__img{
  height: inherit;
      /* margin-top: -4px; */
      /* padding-top: 2%; */
}
.site-nav__link{
  display:inline-block;
  font-size:.875em;
  padding:.5em .875em;
  background:#1a335c;
  border-radius:.625em;
  color:#fff;
  text-decoration: none;
}

.nav-more[hidden]{ display:none !important; }
.nav-more{ position:relative; }
.nav-more__btn{
  padding:.5rem .8rem; border-radius:.5rem; border:0;
  background: rgba(0,0,0,.06); cursor:pointer;
}
.nav-more__menu{
  position:absolute; top: calc(100% + .4rem); right:0; z-index: 1000;
  min-inline-size: 12rem; padding:.5rem; margin:0; list-style:none;
  background: var(--dropdown-bg, #fff); color: inherit;
  border: 1px solid rgba(0,0,0,.08); border-radius:.75rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  display:none;
}
.nav-more__menu[aria-hidden="false"]{ display:block; }
.nav-more__menu li a{ display:block; padding:.5rem .75rem; border-radius:.5rem; text-decoration:none; }
.nav-more__menu li a:hover{ background: rgba(0,0,0,.06); }

/* ===== Header dropdown: "Индикаторы" (desktop) ===== */
.nav-dd{ position:relative; }
.nav-dd__btn{
  border:0;
  cursor:pointer;
  font:inherit;
  line-height:inherit;
  appearance:none;
  -webkit-appearance:none;
}
.nav-dd__btn::after{
  content:'▾';
  display:inline-block;
  margin-left:.45em;
  font-size:.9em;
  opacity:.9;
}

.nav-dd__menu{
  position:absolute;
  right:0;
  z-index: 1000;
  min-inline-size: 16rem;
  padding:.5rem;
  margin:0;
  list-style:none;
  background:#0d1f2d;
  border: 1px solid rgba(255,255,255,.08);
  border-radius:.75rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  display:none;
}
.nav-dd__menu li a{
  display:block;
  padding:.7rem .85rem;
  border-radius:.6rem;
  text-decoration:none;
  background:rgba(26,51,92,.82);
  color:#fff;
}
.nav-dd__menu li a:hover,
.nav-dd__menu li a:focus-visible{
  background:rgba(34,61,109,.95);
}

.nav-dd:hover .nav-dd__menu,
.nav-dd:focus-within .nav-dd__menu{
  display:block;
}

/* бургер */
.nav-toggle{
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border:0;
  border-radius:.75rem;
  background:rgba(0,0,0,.25);
  color:#fff;
  padding:.6rem;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:.32rem;
  transition:background .2s ease, transform .2s ease;
}
/* .nav-toggle:focus-visible,
.nav-toggle:hover{
  background:rgba(0,0,0,.4);
  transform:translateY(-1px);
} */
.nav-toggle__bar{
  display:block;
  inline-size: 100%;
  block-size: .18rem;
  background: currentColor;
  /* border-radius: 999px; */
}
.nav-toggle__bar + .nav-toggle__bar{ margin-top: 0; }

.nav-toggle__bar:nth-child(2){
  inline-size: 100%;
  margin-inline:auto;
}

.nav-toggle__bar:nth-child(3){
  inline-size: 100%;
}



/* off-canvas */
.offcanvas{
  position:fixed; inset-block:0; inset-inline-start:0; z-index: 1000;
  inline-size: min(80vw, 22rem); transform: translateX(-100%);
  background: var(--panel-bg, #0d1f2d); color: #fff;
  box-shadow: 2px 0 18px rgba(0,0,0,.35); transition: transform .18s ease-out;
  display:flex; flex-direction:column; padding: 1.5rem 1.25rem;
}
.offcanvas[aria-hidden="false"]{ transform: translateX(0); }
.offcanvas__close{ margin-inline-start: auto; font-size: 1.2rem; border:0; background:transparent; }
.offcanvas__nav{ margin-top: .5rem; }
.offcanvas__list{ list-style:none; padding:0; margin: 1.25rem 0; display:flex; flex-direction:column; gap:.75rem; }
.offcanvas__list a{
  display:block;
  padding:1rem 1.1rem;
  border-radius:.75rem;
  text-decoration:none;
  font-size:1.05em;
  background:rgba(26,51,92,.82);
  color:#fff;
}
.offcanvas__list a:focus-visible{
  outline:2px solid rgba(255,255,255,.65);
  outline-offset:3px;
}
.offcanvas__divider{ border:0; border-top:1px solid rgba(0,0,0,.1); margin: .5rem 0; }

.offcanvas__backdrop[hidden]{ display:none; }
.offcanvas__backdrop{ position:fixed; inset:0; background: rgba(0,0,0,.35); z-index:999; }

/* ===== брейкпоинт 800px ===== */
@media (max-width: 799px){        /* узкие — бургер */
  .nav-toggle{ display:inline-flex; }
  .site-nav{ display:none; }      /* горизонтальную шапку скрываем */
}
@media (min-width: 800px){        /* широкие — обычное меню */
  .nav-toggle{ display:none; }
  .site-nav{ display:block; }
}

/* a11y: без резких анимаций по просьбе OS */
@media (prefers-reduced-motion: reduce){
  .offcanvas{ transition: none; }
}
.auth{display:flex;gap:.625em}
.auth__link{font-size:.875em;padding:.5em .875em;border-radius:.625em;text-decoration:none}
.auth__link--login{background:#1a335c;color:#fff}
.auth__link--register{background:#e0e0e0;color:#000}
[data-auth-mobile] .auth__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  inline-size:3.2rem;
  block-size:3.2rem;
  border-radius:999px;
  background:var(--clr-ghost-bg,#1a335c);
  color:var(--clr-ghost-text,#fff);
  text-decoration:none;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
[data-auth-mobile] .auth__icon:hover{
  background:var(--clr-ghost-bg-hover,#223d6d);
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
[data-auth-mobile] .auth__icon:focus-visible{
  outline:2px solid rgba(42,145,255,.45);
  outline-offset:3px;
}
[data-auth-mobile] .auth__icon-image{
  inline-size:1.5rem;
  block-size:1.5rem;
}
[data-auth-mobile] .auth__icon--profile{
  background:linear-gradient(to bottom, var(--clr-accent,#2a91ff), var(--clr-accent-2,#186cd8));
  color:#fff;
  box-shadow:0 10px 22px rgba(42,145,255,.35);
}
[data-auth-mobile] .auth__icon--profile:hover{
  background:linear-gradient(to bottom, var(--clr-accent-hover,#3aaaff), var(--clr-accent-2-hover,#1f75e0));
  box-shadow:0 12px 26px rgba(42,145,255,.45);
}
.title_box{
      margin:34vh auto;
      
      padding:1em}
.register-box{font-size:1.6rem;background:var(--clr-card-bg);padding:1.875em;border-radius:1em;max-width:25em;margin:0 auto;box-shadow:0 0 20px rgba(0,0,0,.6)}
.register-box h1,
.register-box h2{text-align:center;margin:0 0 1em}
.form-group{margin-bottom:1.5em}
.form-group label{display:block;font-size:.875em;color:var(--clr-muted);margin-bottom:.375em}
.form-group input{width:100%;padding:.625em .75em;    border: 1px #0d1f2d solid;border-radius:.5em;background:var(--clr-input);color:#fff;font-size:.9375em}
.form-group input::placeholder{color:var(--clr-placeholder)}
.register-btn{width:100%;padding:.75em;border:none;border-radius:.625em;background:linear-gradient(to bottom,var(--clr-btn-1),var(--clr-btn-2));color:#fff;font-weight:500;cursor:pointer}
.register-btn:hover{background:linear-gradient(to bottom,var(--clr-btn-1h),var(--clr-btn-2h))}
.register-btn:disabled{opacity:.6;cursor:default}
.sub-actions{font-size:.8125em;text-align:center;margin-top:.75em}
.toast{position:fixed;bottom:22px;right:20px;background:#14325a;color:#fff;padding:12px 18px;border-radius:10px;font-size:13px;box-shadow:0 4px 18px rgba(0,0,0,.5);opacity:0;pointer-events:none;transform:translateY(20px);transition:opacity .4s,transform .4s;z-index:300}
.toast.show{opacity:1;transform:translateY(0)}
/* .site-footer{font-size:1.6rem;background:#0d1f2d;color:#ccc;padding:2.5em 1.25em 1.25em;margin-top:4rem} */
/* .site-footer__inner{max-width:75em;margin:0 auto;display:flex;gap:2.5em;flex-wrap:wrap;justify-content:space-between} */
/* .footer-col{flex:1 1 13em;min-width:13em} */
/* .footer-col h4{color:#fff;margin-bottom:.75em;font-size:.9375em} */
/* .footer-bottom{text-align:center;margin-top:1.875em;padding-top:.625em;border-top:.1rem solid #1e2e44;font-size:.8125em;color:#777} */
a{color: dodgerblue;}
.login_cntnr_bc{
        
        background-repeat: no-repeat;
        background-position-y: 50%;
        background-color: #000;
        background-size: cover;
    }
:root{
      font-size: 62.5%;
      color-scheme: light dark;

      
      --clr-backdrop:           rgba(11,24,48,1);
      --clr-surface:            #0d1f2d;
      --clr-text-main:          #ffffff;
      --clr-text-muted:         #cccccc;

      --clr-primary-1:          #00c6ff;
      --clr-primary-2:          #00c6ff;

      
      --clr-ghost-bg:           #1a335c;
      --clr-ghost-bg-hover:     #223d6d;
      --clr-ghost-text:         #ffffff;

      
      --clr-register-bg:        #e0e0e0;
      --clr-register-bg-hover:  #d0d0d0;
      --clr-register-text:      #000000;

      
      --clr-accent:             #2a91ff;
      --clr-accent-2:           #186cd8;
      --clr-accent-glow:        rgba(0,198,255,0.38);
    }
[data-theme="dark"]{
      --clr-backdrop:           rgba(11,24,48,1); 
      --clr-surface:            #0a1723;
      --clr-text-main:          #e6e6e6;
      --clr-text-muted:         #a3a3a3;

      --clr-primary-1:          #00aee0; 
      --clr-primary-2:          #00aee0;

      --clr-ghost-bg:           #162b4e; 
      --clr-ghost-bg-hover:     #1d2c5d; 
      --clr-ghost-text:         #e6e6e6;

      --clr-register-bg:        #bebebe; 
      --clr-register-bg-hover:  #b1b1b1; 
      --clr-register-text:      #000000;

      --clr-accent:             #247bd9; 
      --clr-accent-2:           #155fbf;
      --clr-accent-glow:        rgba(0,174,223,0.38);
    }
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
.site-footer{ 
                font-size:1.6rem;
                background:linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(8, 15, 34, 0.98));
                border-top:1px solid #12244d;
                box-shadow:0 -4px 12px rgba(0, 0, 0, 0.15);
                color:var(--clr-text-muted);
                padding:2.5em 1.25em 1.25em;
	}
.site-footer__inner{
		max-width:75em;
                margin-inline:auto;
                display:flex;
                gap:2.5em;
                flex-wrap:wrap;
        }
.footer-col{
                flex:1 1 13em;
                min-width:13em;
        }
.footer-col h4{
                color:var(--clr-text-main);
                margin-bottom:.75em;
                font-size:1.7rem;
        }
.footer-col ul{
		list-style:none;
	}
.footer-col li{
		margin-bottom:.375em;
	}
.footer-col a{
		color:var(--clr-text-muted);
		text-decoration:none;
	}
.footer-col a:hover{
		color:var(--clr-primary-1);
	}
.footer-socials{
		margin:.75em 0;
		display:flex;
		gap:.75em;
	}
.footer-socials img{
		width:22px;
		height:22px;
		filter:brightness(.9);
		object-fit:contain;
		transition:filter .3s;
	}
.footer-socials a[href*="t.me"] img{
		transform:none;
	}
.footer-socials img:hover{
		filter:brightness(1.2);
	}
.footer-description{
		margin-top:.75em;
		/* font-size:.8125em; */
		color:#aaa;
		line-height:1.4;
	}
.subscribe-form{
		display:flex;
		flex-direction:column;
		gap:.625em;
	}
.subscribe-form input{
		padding:.5em .75em;
		border-radius:.6rem;
		border:none;
		background:var(--clr-ghost-bg);
		color:var(--clr-text-main);
		font-size:.875em;
	}
.subscribe-form input::placeholder{
		color:#888;
	}
.subscribe-form button{
		padding:.5em .75em;
		border:none;
		border-radius:.6rem;
		background:linear-gradient(to bottom,var(--clr-primary-1),var(--clr-primary-2));
		color:#fff;
		font-weight:500;
		cursor:pointer;
		transition:background .3s;
	}
.subscribe-form button:hover{
		background:linear-gradient(to bottom,var(--clr-primary-1-hover),var(--clr-primary-2-hover));
	}
.chat-link{
    cursor: pointer;
    width: 50%;
		display:flex;
		align-items:center;
		gap:.5em;
		margin:.375em 0 .625em;
		color:var(--clr-text-muted);
		/* font-size:.875em; */
	}
.chat-link svg{
		display:block;
	}
.footer-bottom{
		display:flex;
		align-items:flex-start;
		justify-content:space-between;
		gap:2.4rem;
		text-align:center;
		margin-top:1.875em;
		padding-top:.625em;
		border-top:.1rem solid #1e2e44;
		font-size:.8125em;
                color:#777;
        }
.footer-disclaimer{
		display:flex;
		align-items:flex-start;
		justify-content:center;
		gap:1.2rem;
		max-width:70ch;
		text-align:left;
}
.footer-age{
		flex:0 0 auto;
		min-width:3.6rem;
		padding:.2rem .7rem;
		border:.1rem solid rgba(255,66,66,.86);
		border-radius:.4rem;
		color:#fff;
		background:rgba(148,16,16,.32);
		font-size:1.2rem;
		font-weight:800;
		line-height:1.5;
		text-align:center;
}
.footer-trademark{
		max-width:46ch;
		text-align:right;
}
@media (max-width:768px){
                .site-footer__inner {
                        flex-wrap:wrap;
                        gap:1.5em;
                }
                .footer-col {
                        min-width:unset;
                        max-width:none;
                        flex:1 1 50%;
                }
                .site-footer__inner > .footer-col:first-child,
                .site-footer__inner > .footer-col:nth-child(2){
                        flex: unset;
                        max-width: 49%;
                        min-width: auto;
                }
                .site-footer__inner > .footer-col:nth-child(3){
                        flex:0 0 100%;
                        max-width:100%;
                }
                .footer-bottom{
                        flex-direction:column;
                        align-items:center;
                        gap:1.6rem;
                        text-align:center;
                }
                .footer-disclaimer{
                        flex-direction:column;
                        align-items:center;
                        max-width:42ch;
                        text-align:center;
                }
                .footer-trademark{
                        max-width:42ch;
                        text-align:center;
                }
        }
.rd50{border-radius: 50px;}
:root{
      font-size: 62.5%;
      color-scheme: light dark;

      
      --clr-backdrop:           rgba(11,24,48,1);
      --clr-surface:            #0d1f2d;
      --clr-text-main:          #ffffff;
      --clr-text-muted:         #cccccc;

      --clr-primary-1:          #00c6ff;
      --clr-primary-2:          #00c6ff;

      
      --clr-ghost-bg:           #1a335c;
      --clr-ghost-bg-hover:     #223d6d;
      --clr-ghost-text:         #ffffff;

      
      --clr-register-bg:        #e0e0e0;
      --clr-register-bg-hover:  #d0d0d0;
      --clr-register-text:      #000000;

      
      --clr-accent:             #2a91ff;
      --clr-accent-2:           #186cd8;
      --clr-accent-glow:        rgba(0,198,255,0.38);
    }
.site-header__logo{
      margin: 0 0.5rem;
      font-size:1.1em; 
      font-weight:700;
      color:var(--clr-primary-1);
      text-shadow:0 0 .6rem var(--clr-accent-glow);
    }
.site-nav__list{
      display:flex;
      gap:.75em; 
      list-style:none;
    }
.site-nav__link{
      display:inline-block;
      font-size:.875em; 
      font-weight:500;
      padding:.5em .875em; 
      background:var(--clr-ghost-bg);
      color:var(--clr-ghost-text);
      border-radius:.625em; 
      text-decoration:none;
      transition:background .3s, box-shadow .3s;
    }
/* .site-nav__link:hover{ background:var(--clr-ghost-bg-hover); } */
.site-nav__link--active{
      background:linear-gradient(to bottom,var(--clr-accent),var(--clr-accent-2)) !important;
      /* box-shadow:0 0 .8rem rgb(42 145 255 / .5); */
    }
.auth{ display:flex; gap:.625em; }
.auth__link{
      font-size:.875em; font-weight:500;
      padding:.5em .875em;
      border-radius:.625em;
      text-decoration:none;
      transition:background .3s;
    }
.auth__link--login{
      background:var(--clr-ghost-bg);
      color:var(--clr-ghost-text);
    }
.auth__link--login:hover{ background:var(--clr-ghost-bg-hover); }
.auth__link--register{
      background:var(--clr-register-bg);
      color:var(--clr-register-text);
    }
.auth__link--register:hover{ background:var(--clr-register-bg-hover); }
.auth__link--logout{
      background:var(--clr-ghost-bg);
      color:var(--clr-ghost-text);
    }
.auth__link--logout:hover{ background:var(--clr-ghost-bg-hover); }
@media (max-width:768px){
      .site-header{ flex-wrap:wrap; gap:1.6rem; }
      .site-nav__list,.auth{ justify-content:center; width:100%; }
    }
:root{
		font-size:62.5%;
		color-scheme:light dark;
		--clr-backdrop:rgba(11,24,48,1);
		--clr-surface:#0d1f2d;
		--clr-text-main:#fff;
		--clr-text-muted:#ccc;
		--clr-primary-1:#00c6ff;
		--clr-primary-1-hover:#3aaaff;
		--clr-primary-2:#186cd8;
		--clr-primary-2-hover:#1f75e0;
		--clr-ghost-bg:#1a335c;
		--clr-ghost-bg-hover:#223d6d;
	}
[data-theme="dark"]{
		--clr-surface:#0a1723;
		--clr-text-main:#e6e6e6;
		--clr-text-muted:#a3a3a3;
		--clr-primary-1:#00aee0;
		--clr-primary-1-hover:#32c6ff;
		--clr-primary-2:#155fbf;
		--clr-primary-2-hover:#1a6ad1;
		--clr-ghost-bg:#162b4e;
		--clr-ghost-bg-hover:#1d2c5d;
	}
/* .site-footer__inner{
		max-width:75em;
		margin-inline:auto;
		display:flex;
		gap:2.5em;
		flex-wrap:wrap;
		justify-content:space-between;
	} */
/* .chat-link{
		display:flex;
		align-items:center;
		gap:.5em;
		margin:.375em 0 .62em;
		color:var(--clr-text-muted);
		font-size:.875em;
	} */
:root{
  --clr-body-bg:            #0b1830;
  --clr-card-bg:            rgba(7, 20, 38, 0.96);
  --clr-text-main:          #ffffff;
  --clr-text-muted:         #ccc;
  --clr-text-subtle:        #b0b0b0;
  --clr-link:               #4dabf7;
  --clr-input-bg:           #1a335c;
  --clr-placeholder:        #888;
  --clr-badge-bg:           #e63946;

  --clr-btn-primary-1:      #2162D6;
  --clr-btn-primary-2:      #2162D6;
  --clr-btn-hover-1:        #1d56bd;
  --clr-btn-hover-2:        #1d56bd;

  --clr-social-bg:          #1a335c;
  --clr-social-hover:       #2a446f;

  --clr-yandex-bg:          #000000;
}
[data-theme="dark"]{
  --clr-body-bg:            #091322;
  --clr-card-bg:            rgba(7, 20, 38, 0.96);
  --clr-text-main:          #e6e6e6;
  --clr-text-muted:         #a3a3a3;
  --clr-text-subtle:        #8c8c8c;
  --clr-link:               #3d90d4;
  --clr-input-bg:           #14284a;
  --clr-placeholder:        #707070;
  --clr-badge-bg:           #c12e3a;

  --clr-btn-primary-1:      #2162D6;
  --clr-btn-primary-2:      #2162D6;
  --clr-btn-hover-1:        #1d56bd;
  --clr-btn-hover-2:        #1d56bd;

  --clr-social-bg:          #14284a;
  --clr-social-hover:       #21365d;

  --clr-yandex-bg:          #000000;            
}
html{ color-scheme:light dark; }
.footer-col{
		flex:1 1 13em;
		min-width:13em;
	}
*{ box-sizing:border-box; margin:0; padding:0; }
body{
  
  
  
  
  
  
  font-family:'Roboto',sans-serif;
}
.register-box{
  font-size:1.6rem;                           
  position:relative;
  background:var(--clr-card-bg);
  padding:1.875em;                            
  border-radius:1em;                          
  width:100%; max-width:25em;                 
  box-shadow:0 0 1.25em rgba(0,0,0,.6);       
}
.age-badge{
  position:absolute; top:-0.75em; right:-0.75em;           
  width:36px; height:36px;                           
  border-radius:50%;
  background:var(--clr-badge-bg); color:#fff;
  font-size:14px;                                       
  font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0.75em rgba(0,0,0,.5);                    
}
.register-box h1,
.register-box h2{
  text-align:center; 
  margin-bottom:1.5em;                  
  font-size:1.75em;                                        
  color: var(--clr-text-main);
}
.form-group{ margin-bottom:1em; }
.form-group label{
  display:block; font-size:0.875em;                        
  margin-bottom:0.375em;                                   
  color:var(--clr-text-muted);
}
.form-group input{
  width:100%; 
  padding:0.625em 0.75em;                      
  border:1px solid var(--clr-input-bg);
  border-radius:0.5em;                        
  background:var(--clr-input-bg); 
  color:#fff;
  font-size:0.9375em;                                      
}
.form-group input::placeholder{ color:var(--clr-placeholder); }
.agreement{
  font-size:0.75em;                                        
  color:var(--clr-text-subtle);
  margin-bottom:1em; line-height:1.55;
  display:flex; align-items:flex-start; gap:0.5em;         
}
#signup-form .agreement-required{
  flex-wrap:wrap;
  margin-bottom:16px;
}
#signup-form .agreement-required > label{
  flex:1 1 calc(100% - 30px);
  min-width:0;
}
.agreement input[type='checkbox']{
  margin-top:0.125em; flex-shrink:0;
  width:1em; height:1em;                                   
  accent-color:var(--clr-btn-primary-1); cursor:pointer;
}
.agreement a{ color:var(--clr-link); text-decoration:underline; }
.register-btn{
  width:100%; padding:0.75em;                              
  font-size:1em; font-weight:500;
  border:none; border-radius:0.625em;                      
  background:linear-gradient(to bottom,var(--clr-btn-primary-1),var(--clr-btn-primary-2));
  color:#fff; cursor:pointer; transition:background .3s;
  display:flex; align-items:center; justify-content:center; gap:0.625em; 
}
.register-btn:hover:enabled{
  background:linear-gradient(to bottom,var(--clr-btn-hover-1),var(--clr-btn-hover-2));
}
.register-btn:disabled{ opacity:.5; cursor:default; }
.register-btn svg{ width:1.25em; height:1.25em; }
.sub-actions{
  font-size:0.8125em;                                      
  text-align:center; margin-top:0.75em;                    
}
.sub-actions a{ color:var(--clr-link); text-decoration:none; }
.social-login{
  margin-top:1.25em; text-align:center;                    
  font-size:max(0.75em, 12px); color:var(--clr-text-muted);
}
.social-auth-hint{
  max-width: 30rem;
  margin: .75rem auto 0;
  color: var(--clr-text-subtle);
  font-size: max(1.25rem, 12px);
  line-height: 1.45;
  text-align: center;
}
.social-auth-error{
  min-height: 1.4em;
  max-width: 30rem;
  margin: .45rem auto 0;
  color: #ff7b7b;
  font-size: max(1.25rem, 12px);
  line-height: 1.4;
  text-align: center;
}
.signup-social-modal[hidden]{ display:none; }
body.signup-social-modal-open{ overflow:hidden; }
.signup-social-modal{
  position:fixed;
  inset:0;
  z-index:1600;
  display:grid;
  place-items:center;
  padding:20px;
}
.signup-social-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(1, 8, 20, .76);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.signup-social-modal__dialog{
  position:relative;
  width:min(430px, 100%);
  padding:28px;
  border:1px solid #24466f;
  border-radius:16px;
  background:var(--clr-card-bg, #071426);
  box-shadow:0 24px 70px rgba(0, 0, 0, .55);
  color:var(--clr-text-main, #fff);
}
.signup-social-modal__dialog:focus{ outline:none; }
.signup-social-modal__dialog h2{
  margin:0 42px 12px 0;
  color:var(--clr-text-main, #fff);
  font-size:22px;
  line-height:1.25;
  text-align:left;
}
.signup-social-modal__dialog p{
  margin:0;
  color:var(--clr-text-muted, #ccc);
  font-size:14px;
  line-height:1.55;
  text-align:left;
}
.signup-social-modal__close{
  position:absolute;
  top:14px;
  right:14px;
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:var(--clr-text-muted, #ccc);
  font-size:26px;
  line-height:1;
  cursor:pointer;
}
.signup-social-modal__close:hover,
.signup-social-modal__close:focus-visible{
  border-color:#36669c;
  color:var(--clr-text-main, #fff);
  outline:none;
}
.signup-social-modal__actions{
  display:grid;
  gap:10px;
  margin-top:22px;
}
.signup-social-modal__primary{
  min-height:44px;
  padding:10px 16px;
  border-radius:10px;
  font:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
.signup-social-modal__primary{
  border:1px solid var(--clr-btn-primary-1, #2162d6);
  background:var(--clr-btn-primary-1, #2162d6);
  color:#fff;
}
.signup-social-modal__primary:hover,
.signup-social-modal__primary:focus-visible{
  border-color:var(--clr-btn-hover-1, #1d56bd);
  background:var(--clr-btn-hover-1, #1d56bd);
  outline:none;
}
@media (max-width:520px){
  .signup-social-modal{ padding:14px; }
  .signup-social-modal__dialog{ padding:24px 20px 20px; }
  .signup-social-modal__dialog h2{ font-size:20px; }
}
.signup-method-title{
  margin: 0 0 1.25rem;
  color: var(--clr-text-main);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
}
.page-signup .social-login{
  margin-top: 1.6em;
  color: var(--clr-text-main);
  font-size: max(.8125em, 12px);
  font-weight: 600;
}
.social-icons{
  display:flex; justify-content:space-between;
  margin-bottom:1rem;                                      
}
.si-wid{
  margin-left: -0.9em;
  margin-right: -0.9em;
}
.oa-lk{
  cursor: pointer;
  background-color: #10253e;
  border: 1px solid #1a3254;
}
.oauth-btn{
  padding:0.425em;                                         
  flex:1; 
  margin:0 0.7em;                                 
  border-radius:0.625em;                                   
  display:flex; align-items:center; justify-content:center;
  transition:background .3s;
}
.oauth-btn img{
  width:36px;
  height:36px;
  object-fit:contain;
}
.oauth-btn:hover:not(.is-disabled){ background:var(--clr-social-hover); }
.oauth-btn.is-disabled{ pointer-events:none; opacity:.5; cursor:default; }
.oauth-btn-ya img,
.oauth-btn-vk img{
  width:36px;
  height:36px;
}

#profile-socials.social-icons{
  justify-content:flex-start;
  gap:18px;
  margin:10px 0 0;
}
#profile-socials .oauth-btn{
  flex:0 0 auto;
  width:40px;
  height:40px;
  margin:0;
  padding:2px;
  border:0 !important;
  border-radius:0;
  background:transparent !important;
  box-shadow:none !important;
}
#profile-socials .oauth-btn:hover:not(.is-disabled){
  background:transparent !important;
  opacity:.9;
  transform:translateY(-1px);
}
#profile-socials .oauth-btn img{
  width:36px;
  height:36px;
  display:block;
}

.yandex-login{ margin-top:1.25em; text-align:center; }
.yandex-btn{
  background:var(--clr-yandex-bg); color:#fff; border:none;
  width:100%; padding:0.625em;                             
  border-radius:0.5em;                                     
  font-weight:500; display:flex; align-items:center; justify-content:center;
  gap:0.625em; cursor:pointer; transition:opacity .3s;
}
.yandex-btn:disabled{ opacity:.5; cursor:default; }
.yandex-btn img{ width:1.25em; height:1.25em; }
@media (max-width:420px){                                  
  .social-icons{ flex-wrap:wrap; }
  .oauth-btn{ 
    /* margin:0.25em 0; */
    width:48%; 
  }                
}
.title_box{
    margin: 34vh auto;
    
    padding: 1em;
    
    
    
    
    -webkit-margin-inline: auto;
    -moz-margin-inline: auto;
    margin-inline: auto;
    -webkit-inset-inline: 0;
    -moz-inset-inline: 0;
    inset-inline: 0;
    -webkit-inset-block-start: 50%;
    -moz-inset-block-start: 50%;
    inset-block-start: 50%;
    -webkit-transform: translateY(-33%);
    -moz-transform: translateY(-33%);
    -ms-transform: translateY(-33%);
    -o-transform: translateY(-33%);
    transform: translateY(-33%);
}
.conteiner{
    background-color: transparent;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    
}

.modal.hidden{ display:none; }
.modal{
  position:fixed;
  /*inset:0; */
  z-index:1000;
}
.modal__dialog:focus,
.modal__dialog:focus-visible{
  outline:none;
}
.modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.modal__dialog{ position:relative; max-width:480px; margin:10vh auto 0; background:rgba(7, 20, 38, 0.96); border-radius:12px; padding:20px 22px; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.modal__title{ margin:0 0 10px; font-size:18px; font-weight:600; }
.modal__text{ margin:0 0 16px; line-height:1.45; white-space:pre-line; }
.modal__actions{ display:flex; justify-content:flex-end; gap:10px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:8px; border:0; cursor:pointer; }
.btn-primary{ background:#2162D6; color:#fff; }
.btn-primary:hover{ filter:brightness(0.95); }
.broken{ background: #f95d6a !important;}
body{ font-family: 'Roboto', sans-serif; background: #061729; color: #e4ecff; margin: 0; }
.card{
      background: #0d1f2d;
      border-radius: 14px;
      padding: 32px 32px 38px;
      box-shadow: 0 0 20px rgba(0,0,0,.55);
      max-width: 760px;
      /* margin-bottom: 28px; */
    }
.card-header{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-bottom: 24px;
    }
.card-header > div{ display: flex; gap: 8px; }
.form-block{ width: 100%; margin-bottom: 18px; }
.field{
      display: grid;
      grid-template-columns: 150px 1fr;
      align-items: center;
      gap: 10px 16px;
      margin-bottom: 14px;
      width: 100%;
    }
.field label{ font-size: 14px; color: #b6c6e3; }
.field input:not([type='checkbox']),
    .field .btn{
      width: 100%;
      /* max-width: 380px; */
      min-width: 120px;
      box-sizing: border-box;
      margin-right: 0;
    }
.field input:not([type='checkbox']){
      background: #112744;
      border: 1px solid #1a3254;
      border-radius: 7px;
      padding: 8px 12px;
      font-size: 14px;
      color: #fff;
      transition: border .25s;
    }
.field input:focus{ outline: none; border-color: #2a91ff; box-shadow: 0 0 0 2px rgba(42,145,255,.35); }
.field input[readonly]{ opacity: .75; cursor: default; }
.input-badge-row{ display: flex; align-items: center; gap: 10px; width: 100%; }
.input-badge-row input{ flex: 1 1 auto; min-width: 0; }
.badge{
      flex-shrink: 0;
      height: 36px;
      min-width: 130px; max-width: 130px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 999px; font-size: 13px; font-weight: 500;
      border: none; box-shadow: 0 2px 6px rgba(0,0,0,0.10);
      cursor: pointer; margin-left: 0; padding: 0 16px;
      transition: filter .25s, background .25s, color .2s;
    }
.btn{ border: none; cursor: pointer; font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 9px; transition: opacity .25s,filter .25s; display: inline-flex; align-items: center; justify-content: center; user-select: none; }
.btn:hover{ opacity: .9; }
.btn:disabled{ opacity: .45; cursor: default; }
.btn-primary{ background: #2162D6; color: #fff; }
.btn-outline-danger:hover{ background: rgba(227,93,106,.1); }
.btn-xs{ padding: 6px 12px; font-size: 12px; }
input:checked + .slider{ background: linear-gradient(135deg,#2a91ff 0%,#186cd8 100%); }
input:checked + .slider::before{ transform: translateX(24px); }
.table-scroll{ 
  /* max-width: 540px;  */
  width: 100%; 
  overflow: hidden; 
  margin-bottom: 10px; 
}
.table-scroll table{ width: 100%; border-collapse: collapse; table-layout: fixed; }
.table-scroll thead tr{ 
  background: #14325a; 
  position: sticky;
  top: 0;
  z-index: 2; 
}
.table-scroll thead{
  background: #14325a;
}
.table-scroll tbody{ 
  display: table; 
  max-height: 182px; 
  overflow-y: auto; 
  width: 100%; 
}
.table-scroll thead, .table-scroll tbody tr{ 
  /* display: table; */
  width: 100%;
  /* table-layout: fixed;  */
}
.table-scroll td, .table-scroll th{ 
  padding: 7px 6px; 
  text-align: left; 
  white-space: nowrap; 
  /* overflow: hidden;  */
  text-overflow: ellipsis; 
}
.rename{ color: #4dabf7; font-size: 11px; cursor: pointer; }
.legal{ 
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 2.4rem; 
  font-size: 1.3rem; 
  color: #7d8aac; 
}
.legal span{ white-space: nowrap; }
.toast{ position: fixed; bottom: 24px; right: 24px; background: #14325a; color: #fff; padding: 12px 18px; border-radius: 10px; font-size: 13px; box-shadow: 0 4px 18px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transform: translateY(20px); transition: opacity .4s, transform .4s; z-index: 300; }
.modal h3{ margin: 0 0 12px; font-size: 2rem; text-align: center; color: #fff; }
.modal p{ 
  /* font-size: 14px;  */
  line-height: 1.5; margin: 0 0 18px; text-align: center; color: #c7d8ff; }
@media (max-width: 700px){
      .form-block, .table-scroll { max-width: 100%; }
      .field { grid-template-columns: 1fr; margin-bottom: 4px;}
      .field input:not([type='checkbox']), .field .btn { max-width: 100%; }
      .legal{  
        flex-wrap: nowrap;
        flex-direction: column;
        text-align: center;
      }
    }
@media (max-width: 540px){
      .card { padding: 24px 8px 22px; }
      .table-scroll tbody { max-height: 180px; }
      .card-header { 
        /* flex-direction: column;  */
        align-items: flex-end; 
        gap: 12px; 
      }
    }




/* === Оболочка страницы === */
.page-shell{
  /* сам каркас растягиваем до экрана */
  min-height: 100dvh;
  /* display: grid; */
  /* ключевой момент: центральная полоса не меньше 100dvh -> футер уедет ниже экрана */
  /* grid-template-rows: auto minmax(100dvh, auto) auto; */
}

/* === Центральная полоса: фон + центрирование окна === */
.main-band{
  display: grid;
  place-items: center;
  padding: clamp(16px, 6vh, 72px) 16px;
  background: var(--main-bg, #000) center / cover no-repeat;
}

/* Модификатор — «вытянуть центр до высоты экрана» (можно не использовать
   если уже включили minmax выше; оставил как удобный флажок для отдельных страниц) */
.main-band--belowfold{ min-height: 100dvh; }

/* Фолбэк для старых браузеров без dvh */
@supports not (height: 100dvh){
  .page-shell{ min-height: 100vh; }
  .main-band--belowfold{ min-height: 100vh; }
}

/* Опционально: если «окно» не имеет своих ограничителей ширины */
.center-card{ width: min(100%, 420px); }

[data-band-modal].overlay{
  position: fixed;
  inset: auto;                      /* сбросить inset:0 из .overlay */
  left: 0; right: 0;
  top: var(--band-top, 0);
  bottom: var(--band-bottom, 0);
  background: rgba(0,0,0,.6);
  z-index: 2147483646;             /* ниже showModal (2147483647), но выше .overlay (200) */
}

[data-api-modal].overlay.overlay--clear,
[data-api-modal][data-band-modal].overlay.overlay--clear {
  background: transparent !important;
}
.overlay.overlay--clear { background: transparent !important; }


/* ===== Age Gate / Страница‑заглушка (не модалка) ===== */
.sb-main{
  /* центрирование карточки в зоне контента */
  min-height: 90vh;
  display: grid;
  place-items: center;
  padding: 6vh 16px;
  background: var(--clr-body-bg, #0b1830);
}
.sb-card{
  position: relative;
  background: var(--clr-card-bg, #0d1f2d);
  color: var(--clr-text-main, #fff);
  text-align: center;
  padding: 32px 24px;
  border-radius: 16px;
  max-width: 560px;
  width: 100%;
  box-shadow: 0 0 20px rgba(0,0,0,.55);
}
.sb-badge{
  position: absolute;
  top: -14px; right: -14px;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--clr-badge-bg, #e63946); color: #fff;
  font-weight: 700; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 12px rgba(0,0,0,.5);
}
.sb-title{ font-size: 24px; margin: 0 0 16px; }
.sb-text{
  font-size: 15px; line-height: 1.6;
  color: var(--clr-text-muted, #d0d0d0);
  margin: 0 0 14px;
}
.sb-link{ color: var(--clr-link, #4dabf7); text-decoration: underline; }
.sb-actions{ margin-top: 8px; display: flex; justify-content: center; }

.sb-hint{
  margin-top: 6px; font-size: 13px; color: #9bb0d1;
}

@media (max-width: 480px){
  .sb-card{ padding: 24px 18px; border-radius: 14px; }
  .sb-title{ font-size: 20px; }
}


/* === ЛК: оболочка и левое меню (общая для всех страниц) ================== */
.lk-flex{display:flex;gap:24px;align-items:stretch}
.lk-content{flex:1 1 0%;min-width:0}

/* ЛК: режим без меню (например, support для аккаунта "на удаление" или under-18) */
.lk-flex.lk-flex--no-menu{justify-content:center !important}
.lk-flex.lk-flex--no-menu #lkMenuMount{display:none !important}
.lk-flex.lk-flex--no-menu .lk-content{
  flex: unset !important;   /* убираем flex:1 1 0% в этом режиме */
  max-width: 960px;
  margin: 0 auto;
}

@media (max-width:800px){
  .lk-flex.lk-flex--no-menu .lk-content{max-width:none}
}

/* =======================================================================
 * Support: скрываем LK-меню ТОЛЬКО в исключительных случаях:
 *  - аккаунт в карантине удаления
 *  - пользователь младше 18 (wait_years > 0)
 *
 * По умолчанию на /support меню должно быть видно (defensive override),
 * даже если где-то ранее появлялись агрессивные display:none.
 * ======================================================================= */

main[data-lk-page="support"] #lkMenuMount{
  display: block !important;
}

html.support--no-menu main[data-lk-page="support"] #lkMenuMount{
  display: none !important;
}

html.support--no-menu main[data-lk-page="support"] .lk-flex{
  justify-content: center !important;
}

html.support--no-menu main[data-lk-page="support"] .lk-content{
  flex: 0 1 960px !important; /* убираем flex:1 1 0% только в этом режиме */
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 800px){
  html.support--no-menu main[data-lk-page="support"] .lk-content{
    flex: 1 1 auto !important;
    max-width: none;
  }
}

/* Меню */
.lk-menu{
  background:#0d1f2d;border-radius:16px;box-shadow:0 0 18px rgba(0,0,0,.40);
  padding:26px 0;width:230px;min-width:180px;flex-shrink:0;align-self:stretch
}
.lk-menu ul{list-style:none;margin:0;padding:0}
.lk-menu__item a{
  display:flex;align-items:center;gap:13px;
  padding:13px 28px;border-radius:9px;text-decoration:none;outline:0;
  font:500 16px/1.35 Roboto,system-ui,sans-serif;color:#b6c6e3;
  transition:background .17s,color .18s
}
.lk-menu__item a:hover,.lk-menu__item a:focus,.lk-menu__item--active a{
  background:linear-gradient(to right,#2a91ff 0%,#186cd8 100%);color:#fff
}
.lk-menu__item--active a{font-weight:700;box-shadow:0 4px 20px #2a91ff33}
.lk-menu__icon{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;color:#2a91ff;transition:color .17s}
.lk-menu__item--active .lk-menu__icon,.lk-menu__item a:hover .lk-menu__icon{color:#fff}

/* Мобайл */
@media (max-width:800px){
  .lk-flex{flex-direction:column;gap:0}
  .lk-menu{width:100%;min-width:0;margin:0 0 18px;padding:14px 0}
  .lk-menu__item a{padding:10px 18px;font-size:15px}
}

.pr_box{
    /*margin: 5em 50em;*/
    margin: 4rem auto;
    width: min(1100px, 92vw);
    padding: 2.5rem;
    box-sizing: border-box;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.pr_text{
    font-size:1.7rem;
    line-height: 1.7;
    color:#c3c3c3;
}
.npr_text{
    font-size:1.7rem;
    line-height: 1.7;
    color:#c3c3c3;
}
.pr_text h2{
  margin: 1em 0;
}
.pr_text p{
  margin-bottom: 0.5em;
}
.pr_text li{
  margin-bottom: 0.5em;
}
.pr_text ul {
  list-style-position: inside;
}
.pr_text a {
  color: dodgerblue;
}

.pr_ml_1{
    margin-left: 1em;
}

.pr_ml_2{
    margin-left: 2em;
}

button.mp3 {
    display: inline;
    width: 1em;
    height: 1em;
    background: none;
    border: none;
    cursor: pointer;
    /* margin: 10px; */
    background-repeat: no-repeat;
    background-position-y: bottom;
}
button.play{
    background-image: url(img/play.svg);
}
button.stop{
    background-image: url(img/stop.svg);
}

/* ===== Sticky page‑shell: шапка, контент, футер ===== */
html, body { height: 100%; }

body.page-shell{
  /* 100svh — корректная высота на iOS/Android, 100vh — фолбэк */
  min-height: 100vh;
  min-height: 100svh;
  /* display: grid; */
  /* grid-template-rows: auto 1fr auto; */
}

/* Средняя полоса (контент) должна уметь сжиматься и скроллиться */
.page-main{ 
  /* min-height: 0;  */
  min-height: 95vh;
  min-height: 95svh;
}

/* Базовые отступы для контента (при желании подправьте значения) */
/* .page-main > .wrapper{ padding-block: 40px 36px; } */

/* Футер в рамках каркаса — без искусственного отступа сверху */
.page-shell .site-footer{ margin-top: 0 !important; }

/* Для «баннерных» страниц (логин/регистрация) — центрирование карточки */
.main-band{
  display: grid;
  place-items: start center;
  padding: 24px 18px 40px;
  min-height: 0; /* важно при grid‑каркасе */
}


/* ===== Email verify: donor-style ===== */
.adorned{
  position:relative; display:flex; align-items:center;
  /* height:44px; padding:0 12px; padding-right:96px; */
  /* background:#14243c; border:1px solid #1f2a3e;  */
  border-radius:10px;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.adorned:focus-within{
  border-color:#2B87FF; box-shadow:0 0 0 4px rgba(43,135,255,.14);
  background:#162a47;
}
.adorned input{
  width:100%; height:100%; background:transparent; color:#fff;
  border:0; outline:0; font:inherit; font-size:15px;
}
.adorned .cta{
  position:absolute; right:40px; top:50%; transform:translateY(-50%);
  font-size:12px; padding:4px 8px; border-radius:6px; cursor:pointer;
  color:#2B87FF; background:transparent; border:1px solid #2B87FF; transition:.16s;
}
.adorned .cta:hover{ background:#2B87FF; color:#fff; }
.adorned .status{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; display:grid; place-items:center; color:#34D399;
}
.adorned .status.warn{ color:#FBBF24; }
.adorned .status svg{ width:18px; height:18px; display:block; }
.hint{ font-size:11px; color:#7d8aac; margin-left:4px; } /* уже используется в проекте */

/* === Control-ячейка: внутри .form-group вторым элементом === */
.fg-control { display:block; width:100%; }
.fg-control > input,
.fg-control > select,
.fg-control > textarea { display:block; width:100%; }

/* Сообщение под полем */
.field-msg{
  margin-left: 1.1em;
  display: block;
  min-height: 10px;
  margin-top: 0px;
  font-size: 10px;
  /* line-height: 1.3; */
  color: #ff6b6b;         /* базовый цвет ошибки */
  visibility:hidden;
}
.field-msg.is-visible{ visibility:visible; }

/* Читаемые и стабильные подсказки в карточках авторизации. */
body.page-signup .title_box{
  margin:clamp(24px, calc((100vh - 872px) / 2), 180px) auto 64px;
  transform:none;
}
#signup-form .field-msg{
  margin-left:0;
  min-height:16px;
  font-size:12px;
  line-height:1.35;
}
#signup-form .signup-consent-msg{
  flex:0 0 calc(100% - 30px);
  margin:-0.25em 0 0 30px;
}
#signup-form .signup-consent-msg:not(.is-visible){
  display:none;
}
#signup-form .agreement input[type='checkbox'].is-invalid{
  outline:2px solid #ff6b6b;
  outline-offset:2px;
}
#signup-form .agreement input[type='checkbox'].is-invalid:focus-visible{
  outline-width:3px;
  outline-offset:3px;
}

.fg-email{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-auto-rows: auto;
  /* gap: 6px 10px; */
  align-items:start;
}
.fg-email > input{ grid-column: 1 / -1; }
.fg-email > .field-msg{ grid-column: 1 / 2; }
.fg-email > #sendMailBtn{ grid-column: 2 / 3; }
.fg-email > #sendMailBtn[hidden]{ display:none; }

.email-onboarding{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:14px 0 18px;
  padding:14px 16px;
  border:1px solid rgba(43,135,255,.35);
  border-radius:12px;
  background:rgba(43,135,255,.10);
}
.email-onboarding[hidden]{ display:none; }
.email-onboarding > div{
  display:grid;
  gap:4px;
  min-width:0;
}
.email-onboarding strong{
  color:#fff;
  font-size:14px;
}
.email-onboarding span{
  color:#aebbd0;
  font-size:12px;
  line-height:1.45;
}
.email-onboarding .btn{ flex:0 0 auto; }

@media (max-width: 640px){
  .email-onboarding{
    align-items:stretch;
    flex-direction:column;
  }
  .email-onboarding .btn{ width:100%; }
}

/* Подсветка поля при ошибке (если скрипты её ставят) */
input.is-invalid, select.is-invalid, textarea.is-invalid {
  border-color:#ff6b6b;
}


/* == UI blur helper == */
:root { --ui-blur-strength: 6px; }

.ui-blur {
  filter: blur(var(--ui-blur-strength));
  transition: filter .16s ease;
  will-change: filter;
}

@media (prefers-reduced-motion: reduce) {
  .ui-blur { transition: none; }
}

.id-badge{font-weight:600;font-size:18px;margin-right:12px;display:inline-block;}
.card-header.card-header--split{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-header__right{display:inline-flex;gap:8px;flex-shrink:0}
.card-header__left .id-badge{font-weight:600;font-size:18px;line-height:1.2}


/* ===== История входов (логины) — прокрутка и обрезка UA ===== */
.table-scroll {
  /* overflow-x: auto; */
  /* overflow-y: auto; */
  -webkit-overflow-scrolling: touch;
  border: 1px solid grey;
    border-radius: 6px;
}
.table-scroll > table {
  min-width: 465px; /* чтобы узкие окна не ломали столбцы */
  /* table-layout: auto; */
  display: block;
  height: 190px;
  overflow: auto;
}
/* колонка «Устройство»: не переносить, показывать tooltip по title */
.ua-cell {
  white-space: nowrap;
  text-overflow: ellipsis;
  /* overflow: hidden; */
}

/* Скроллбар окна логов сессий — повторяем общий градиент ЛК */
.table-scroll,
.table-scroll tbody {
  /* border: 1px solid grey; */
  /* border-radius: 10px; */
  background: radial-gradient(circle at 0 0, rgba(37, 99, 235, .18), transparent 70%) #071324;
  scrollbar-width: thin;
  scrollbar-color: #c5c5c5 #071324;
}

.table-scroll::-webkit-scrollbar,
.table-scroll tbody::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.table-scroll::-webkit-scrollbar-track,
.table-scroll tbody::-webkit-scrollbar-track {
  background: rgba(13, 31, 45, 0.9);
  border-radius: 999px;
}

.table-scroll::-webkit-scrollbar-thumb,
.table-scroll tbody::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #2a91ff 0%, #186cd8 100%);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.table-scroll::-webkit-scrollbar-thumb:hover,
.table-scroll tbody::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #3da0ff 0%, #1f78e5 100%);
}



/* === Масштаб всей системы === */
html { font-size: clamp(14px, 1.1vw + 0.2rem, 18px); }

/* === Адаптив для страницы стратегий === */
.page-strategies main.wrapper {
  min-height: 100svh;
  padding: 2rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.page-strategies .pr_box {
  inline-size: min(1100px, 92vw);
  margin: 0;
  padding: 2.5rem;
  box-sizing: border-box;
}

.page-strategies .pr_text {
  font-size: 1.7rem;
  line-height: 1.7;
}

.page-strategies .npr_text {
  font-size: 1.7rem;
  line-height: 1.7;
}

.page-strategies .pr_text h2,
.page-strategies .pr_text h3 {
  margin-block: 1.5rem 1rem;
  font-size: 1.35em;
}

.page-strategies .pr_text p,
.page-strategies .pr_text li {
  margin-block-end: .8rem;
}

.page-strategies .pr_ml_1 { margin-inline-start: 1.5rem; }
.page-strategies .pr_ml_2 { margin-inline-start: 3rem; }

.page-strategies button.mp3 {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.page-strategies button.mp3 img {
  inline-size: 100%;
  block-size: 100%;
}

@media (max-width: 400px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
}

@media (min-width: 600px) {
  .page-strategies .pr_box { inline-size: min(1100px, 88vw); }
}

@media (min-width: 1024px) {
  .page-strategies .pr_box { inline-size: min(1100px, 84vw); }
}

@media (min-width: 1920px) {
  .page-strategies main.wrapper { padding-block: 4rem; }
  .page-strategies .pr_box { inline-size: min(1200px, 70vw); }
}

/* Верхняя полоса: бургер | логотип | auth справа */
.site-header {
  font-size:1.6rem;
  background:linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(8, 15, 34, 0.98));
  border-bottom:1px solid #12244d;
  box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem;
}

.site-header__bar {
  flex:1 1 100%;
  display:grid;
  grid-template-columns:minmax(3rem,auto) 1fr auto;
  align-items:center;
  gap:1rem;
}

.site-header__bar .site-header__logo {
  justify-self:center;
  white-space:nowrap;
}

.site-header__bar .auth {
  justify-self:end;
  display:flex;
  align-items:center;
  gap:.75rem;
}

/* Переключение мобайл/десктоп на 800px */
@media (max-width: 49.99rem) {
  .nav-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    inline-size: 3.2rem;
    block-size: 3.2rem;
    border:0;
    background:#1a335c;
    color: var(--clr-ghost-bg, #1a335c);
  }

  .nav-toggle__bar { background: white; }
  .site-nav { display:none; }
  .auth__mobile { display:flex; }
  .auth__desktop { display:none; }
}

@media (min-width: 50rem) {
  .site-header {
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    column-gap:1rem;
  }

  .site-header__bar { display:contents; }
  .site-header__bar .site-header__logo { grid-column:1; }
  .site-header__bar .auth { grid-column:3; justify-self:end; }
  .site-nav { grid-column:2; display:block; justify-self:center; }
  .nav-toggle { display:none; }
  .auth__mobile { display:none; }
  .auth__desktop {
    display:flex;
    align-items:center;
    gap:.75rem;
  }
}

@media screen and (min-width: 800px) and (max-width: 900px) {
  :root {
    font-size: 52.5%;
  }
}

@media screen and (max-width: 800px) {
  .logo{
      height: 3.2rem;
  }
  /* .logo__img{
    height: 36px;
  } */
}

/* Если ширина окна меньше 400px */
@media screen and (max-width: 400px) {
  :root {
    font-size: 52.5%;
  }
}

/* Если ширина окна меньше 300px */
@media screen and (max-width: 350px) {
  :root {
    font-size: 42.5%;
  }
}

/* Если ширина окна меньше 300px */
@media screen and (max-width: 290px) {
  :root {
    font-size: 32.5%;
  }
}

/* ===== Support: тикеты + чат в ЛК ===== */

.support-card{
  margin-bottom: 24px;
}

.support-card__header{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:20px;
}

.support-card__header .card-title{
  margin:0;
  font-size:20px;
}

.support-card__header .card-subtitle{
  margin:4px 0 0;
  font-size:14px;
  color:#9fb3d9;
}

.support-user{
  margin-top:6px;
  font-size:13px;
  color:#7f92b5;
}

.support-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  font-size:13px;
}

.support-counter{
  color:#9fb3d9;
}

.support-agent-toggle{
  display:flex;
  gap:6px;
}

.support-agent-toggle .btn{
  font-size:13px;
  padding:4px 10px;
}

.support-scope-btn--active{
  background:#2a91ff;
  color:#fff;
}

.support-layout{
  display:grid;
  grid-template-columns:minmax(220px,280px) minmax(0,1fr);
  gap:20px;
}

.support-sidebar{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.support-new-btn{
  width:100%;
  justify-content:center;
}

.support-empty{
  font-size:14px;
  color:#9fb3d9;
  padding:8px 2px;
}

.support-ticket-list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:420px;
  overflow-y:auto;
}

.support-ticket{
  border-radius:8px;
  padding:8px 10px;
  background:#0f2238;
  border:1px solid #1a3254;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}

.support-ticket:hover{
  background:#122847;
  border-color:#2a91ff;
}

.support-ticket--active{
  background:#122847;
  border-color:#2a91ff;
  box-shadow:0 0 0 1px rgba(42,145,255,.3);
}

.support-ticket__top{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:flex-start;
}

.support-ticket__subject{
  font-size:14px;
  font-weight:500;
  color:#e4ecff;
}

.support-ticket__meta{
  margin-top:4px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:12px;
  color:#9fb3d9;
}

.support-ticket__uid{
  font-size:12px;
  color:#7f9ccf;
}

.support-ticket__unread{
  padding:2px 6px;
  border-radius:999px;
  background:#e35d6a;
  color:#fff;
  font-size:11px;
}

.support-status-badge{
  border-radius:999px;
  padding:2px 8px;
  font-size:11px;
  white-space:nowrap;
  border:1px solid #1a3254;
  color:#c7d8ff;
}

.support-status-badge--open{
  background:rgba(42,145,255,.12);
  border-color:#2a91ff;
}

.support-status-badge--answered{
  background:rgba(12,179,132,.12);
  border-color:#0cb384;
}

.support-status-badge--closed{
  background:rgba(125,141,172,.15);
  border-color:#7d8dac;
  color:#bcc8e5;
}

.support-chat{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:260px;
}

.support-chat__placeholder{
  font-size:14px;
  color:#9fb3d9;
  padding:24px 12px;
  border-radius:12px;
  background:#0d1f2d;
  border:1px dashed #1a3254;
}

.support-chat__inner{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.support-chat__header{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.support-chat__title{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  font-size:15px;
  font-weight:500;
}

.support-chat__info{
  font-size:12px;
  color:#9fb3d9;
}

.support-chat__messages{
  margin-top: 0.5rem;
  flex:1 1 auto;
  max-height:400px;
  padding:10px 8px;
  border-radius:10px;
  background:#050f1f;
  border:1px solid #1a3254;
  overflow-y:auto;
}

.support-chat__empty,
.support-chat__loader,
.support-chat__error{
  font-size:14px;
  color:#9fb3d9;
}

.support-message{
  display:flex;
  margin-bottom:8px;
}

.support-message--user{
  justify-content:flex-end;
}

.support-message--agent{
  justify-content:flex-start;
}

.support-message__bubble{
  max-width:80%;
  padding:8px 10px;
  border-radius:12px;
  background:#162b4b;
  color:#e4ecff;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}

.support-message--user .support-message__bubble{
  background:#2a91ff;
}

.support-message__header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
  font-size:11px;
  margin-bottom:4px;
  opacity:.9;
}

.support-message__meta{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.support-message__actions{
  flex:0 0 auto;
}

.support-message__edit-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:2px 7px;
  border:1px solid rgba(228,236,255,.48);
  border-radius:8px;
  background:rgba(5,15,31,.22);
  color:#f3f7ff;
  font:inherit;
  line-height:1;
  cursor:pointer;
}

.support-message__edit-btn:hover,
.support-message__edit-btn:focus-visible{
  border-color:#f3f7ff;
  background:rgba(5,15,31,.34);
  outline:none;
}

.support-message__edit-btn:disabled{
  cursor:default;
  opacity:.55;
}

.support-message__author{
  font-weight:500;
}

.support-message__date{
  white-space:nowrap;
}

.support-message__edited{
  display:block;
  margin-top:6px;
  white-space:nowrap;
  color:rgba(228,236,255,.82);
  font-size:11px;
  line-height:1.2;
}

.support-message--user .support-message__edited{
  text-align:right;
}

.support-message--agent .support-message__edited{
  text-align:left;
}

.support-message__text{
  font-size:14px;
  white-space:pre-wrap;
}

.support-message__edit-form{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:6px;
}

.support-message__edit-input{
  width:min(420px, 100%);
  min-height:84px;
  resize:vertical;
  padding:8px 10px;
  border:1px solid rgba(228,236,255,.55);
  border-radius:8px;
  background:#07172a;
  color:#e4ecff;
  font:inherit;
  font-size:14px;
  line-height:1.35;
}

.support-message__edit-input:focus{
  border-color:#79b5ff;
  outline:none;
}

.support-message__edit-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

.support-message__edit-save,
.support-message__edit-cancel{
  min-height:30px;
  padding:6px 10px;
  border-radius:8px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

.support-message__edit-save{
  border:1px solid #79b5ff;
  background:#0f4b8f;
  color:#fff;
}

.support-message__edit-cancel{
  border:1px solid rgba(228,236,255,.42);
  background:transparent;
  color:#e4ecff;
}

.support-message__edit-save:disabled,
.support-message__edit-cancel:disabled{
  cursor:default;
  opacity:.6;
}

/* Вложения в сообщениях поддержки */
.support-message__attachments{
  margin-top:6px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.support-message__attachment{
  font-size:12px;
}

.support-message__attachment-link{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:#9fb3d9;
  cursor:pointer;
}

.support-message__attachment-link:hover{
  color:#ffffff;
}

.support-message__attachment-preview{
  margin-top:4px;
}

.support-message__attachment-img{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:8px;
  cursor:zoom-in;
}

.support-message__attachment-download{
  font-size:12px;
  color:#9fb3d9;
}

.support-chat__form{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:6px;
}

.support-chat__form textarea{
  width:100%;
  resize:vertical;
  min-height:80px;
}

.support-chat__form-actions{
  display:flex;
  justify-content:flex-end;
}

.support-more-btn {
  width: 100%;
  max-width: 760px;
  justify-content: center;
  font-size: 13px;
}

.support-new .form-group{
  margin-bottom:10px;
}

.support-form-hint{
  font-size:13px;
  color:#9fb3d9;
  margin:8px 0 12px;
}

/* Модальное окно просмотра вложений */
.support-attachment-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1100;
}

.support-attachment-modal.is-open{
  display:flex;
}

.support-attachment-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.75);
}

.support-attachment-modal__dialog{
  position:relative;
  z-index:1;
  max-width:95vw;
  max-height:95vh;
  padding:12px;
  border-radius:12px;
  background:rgba(7,20,38,.96);
  box-shadow:0 12px 40px rgba(0,0,0,.6);
  display:flex;
  flex-direction:column;
  gap:8px;
}

.support-attachment-modal__img-wrap{
  max-width:92vw;
  max-height:80vh;
  overflow:auto;
}

.support-attachment-modal__img{
  display:block;
  max-width:92vw;
  max-height:80vh;
  height:auto;
  border-radius:8px;
  transform-origin:center center;
  transition:transform 0.12s ease-out;
  cursor:grab;
}

.support-attachment-modal__caption{
  font-size:12px;
  opacity:.8;
}

.support-attachment-modal__toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  font-size:12px;
  margin-bottom:2px;
}

.support-attachment-modal__zoom-label{
  min-width:3em;
  text-align:center;
  opacity:.85;
}

.support-attachment-modal__zoom-btn{
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.12);
  color:#ffffff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
}

.support-attachment-modal__zoom-btn:hover{
  background:rgba(255,255,255,.2);
}

.support-attachment-modal__zoom-btn:focus-visible{
  outline:2px solid #60a5fa;
  outline-offset:2px;
}

.support-attachment-modal__zoom-btn:disabled{
  opacity:.45;
  cursor:default;
}

.support-attachment-modal__close{
  position:absolute;
  top:10px;
  right:10px;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  cursor:pointer;
  background:rgba(7,20,38,.82);
  color:#ffffff;
  box-shadow:0 4px 14px rgba(0,0,0,.38);
  font-size:24px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.support-attachment-modal__close:hover{
  background:rgba(30,64,112,.96);
}

.support-attachment-modal__close:focus-visible{
  outline:2px solid #60a5fa;
  outline-offset:2px;
}

body.support-attachment-modal-open{
  overflow:hidden;
}

@media (max-width: 900px){
  .support-layout{
    grid-template-columns:1fr;
  }
  .support-card__header{
    flex-direction:column;
    align-items:flex-start;
  }
  .support-meta{
    align-items:flex-start;
  }
  .support-chat__messages{
    max-height:320px;
  }
}

/* ─────────────────────────────────────────────────────────────
   Support — Agent page (3 панели)
   ───────────────────────────────────────────────────────────── */

.support-agent-app{
  margin-top: 7px;
}

.support-agent-layout{
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 360px;
  gap: 12px;
  align-items: stretch;
}

.support-agent-pane{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  overflow: hidden;
  min-height: 520px;
  display: flex;
  flex-direction: column;
}

.support-agent-pane__head{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-weight: 600;
}

.support-agent-pane__body{
  padding: 12px;
  overflow: auto;
  min-height: 0;
}

.support-agent-muted{
  opacity: .75;
}

@media (max-width: 980px){
  .support-agent-layout{
    grid-template-columns: 1fr;
  }
  .support-agent-pane{
    min-height: 240px;
  }
}