/* ============================================================
   Надстройка над CSS сайта для страницы регистратора.
   styles.css и pages.css — копии файлов сайта, их не правим (иначе разойдёмся с сайтом).
   Здесь — только то, чего на сайте нет: вход в кабинет в шапке.
   Токены берём сайтовые (--line, --accent-ink, --tap).
   ============================================================ */

/* Разделитель между «Главная» и «Войти» */
.topbar__sep {
  width: 1px;
  height: 18px;
  flex-shrink: 0;
  background: var(--line);
}

/* «Войти» — действие, поэтому акцентные чернила */
.topbar__login {
  display: inline-flex;
  align-items: center;
  position: relative;
  min-height: var(--tap);
  padding: 8px 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-ink);
  transition: color .2s;
}

.topbar__login::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 2px;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s;
}

.topbar__login:hover { color: var(--accent-d); }
.topbar__login:hover::after { transform: scaleX(1); }

/* ===== Меню аккаунта в шапке (вошедший клиент) =====
   Те же классы, что в main.css, но на САЙТОВЫХ токенах: лендинг подключает styles.css и
   pages.css сайта, а main.css (тема регистратора с daisyUI) — намеренно нет, иначе разойдёмся
   с сайтом. Без этого блока разметка меню на лендинге оставалась голой: подложка не рисовалась,
   и меню висело раскрытым поверх шапки. Скрыто по умолчанию — открывает класс .open. */
.uz-acc { position: relative; }

.uz-acc__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  cursor: pointer;
}

.uz-acc__chev {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform .2s;
}

.uz-acc.open .uz-acc__chev { transform: rotate(180deg); }

/* Фон НЕПРОЗРАЧНЫЙ. --card-bg сюда не годится: в тёмной теме сайта это 3.5% белого —
   «стекло», которое читается только вместе с backdrop-filter у карточек. Под меню живой
   canvas-фон «рэка», сквозь него текст не разобрать (решение пользователя 2026-07-16).
   В светлой --card-bg и так белый; в тёмной берём #10161f — тот же непрозрачный цвет,
   которым styles.css подменяет «стекло» там, где backdrop-filter не поддержан. */
.uz-acc__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 220px;
  padding: 6px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 60;
}

:root[data-theme="dark"] .uz-acc__menu { background: #10161f; }

.uz-acc.open .uz-acc__menu { opacity: 1; visibility: visible; transform: none; }

.uz-acc__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;          /* длинный e-mail не выдавит соседей за край */
  gap: 4px 8px;
  padding: 12px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 8px;
}

.uz-acc__mail {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  word-break: break-all;
}

.uz-acc__item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--tap);
  padding: 8px 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.uz-acc__item:hover { background: var(--field-bg); color: var(--text); }
.uz-acc__item--out { color: var(--danger); }
.uz-acc__item--out:hover { background: color-mix(in oklch, var(--danger) 10%, transparent); color: var(--danger); }

/* Форма выхода — обёртка вокруг пункта меню, лишней ширины ей не нужно */
.uz-acc__menu form { margin: 0; }

/* Мобила: как и «Главная», уезжает в бургер-меню */
@media (max-width: 680px) {
  .topbar__sep,
  .topbar__login { display: none; }

  /* .uz-acc целиком: её кнопка — это тот же .topbar__login, но правило выше прячет только
     сам класс, а не обёртку меню — без этого от меню осталась бы висящая пустая коробка */
  .uz-acc { display: none; }

  .mobmenu__link--login {
    color: var(--accent-ink);
    font-weight: 700;
  }

  /* «Выйти» в бургере: форма — лишь обёртка, кнопка должна вести себя как соседние ссылки */
  .mobmenu__out { margin: 0; }

  .mobmenu__out .mobmenu__link {
    width: 100%;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    color: var(--danger);
  }
}