/* Логотип. Один файл на все страницы: витрину, вход, кабинет и админку.

   Раньше знак рисовали три разных класса — 28 и 30 пикселей, радиус 7 и 8,
   вес 700 и 800, фон то синий, то почти чёрный. Из-за этого буква на каждой
   странице выглядела по-своему.

   Цвет знака и цвет буквы — переменные ниже. Поменять оформление логотипа
   можно только здесь, и оно поменяется везде. */
:root {
  --mark-bg: #2563EB;
  --mark-ink: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --mark-bg: #5A90F2; --mark-ink: #0C1220; }
}
:root[data-theme="dark"] { --mark-bg: #5A90F2; --mark-ink: #0C1220; }
/* ---- знак ----
   Размер, радиус, вес и цвет заданы здесь и только здесь. Три прежних
   класса (.auth-mark, .app-mark, .pub-mark) оставлены псевдонимами, чтобы
   не искать по шаблонам каждое место разом. */
.mark, .auth-mark, .app-mark, .pub-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--mark-bg);
  color: var(--mark-ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  /* буква стоит на оптической середине: у заглавной нет нижних выносных,
     и без сдвига она кажется приклеенной к низу */
  padding-bottom: 1px;
}
.mark-sm { width: 26px; height: 26px; border-radius: 8px; font-size: 14px; }
.mark-lg { width: 38px; height: 38px; border-radius: 11px; font-size: 20px; }
/* на тёмной подложке знак не спорит с ней цветом, а растворяется в ней */
.mark-dark { background: rgba(255, 255, 255, .18); color: #fff; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* на витрине своих переменных нет: там работает запасной цвет */
  color: var(--ink-1, var(--ink, #16202E));
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.02em;
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand-dark { color: #fff; }
.brand-name { white-space: nowrap; }


/* ---- полоса про кукисы ---- */
.cookie-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
  padding: 13px 16px;
  border: 1px solid var(--line, #E3E8EF);
  border-radius: 12px;
  background: var(--surface, #fff);
  box-shadow: 0 8px 28px rgba(15, 23, 42, .16);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-1, var(--ink, #16202E));
}
.cookie-bar a { color: var(--mark-bg); }
.cookie-bar button { flex: none; }
@media (max-width: 620px) {
  .cookie-bar { flex-direction: column; align-items: stretch; gap: 10px; text-align: left; }
}