/* Логотип — ссылка на главную */
a.brand, a.brand:hover, .topbar a.mark { color: inherit; text-decoration: none; }
a.brand { border-radius: var(--radius-sm); transition: background .15s; }
a.brand:hover { background: var(--surface2); }
.topbar a.mark { cursor: pointer; }

.lay-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Кнопка сворачивания боковой панели */
.side { position: sticky; }
.side-toggle {
  position: absolute; top: 18px; right: 10px; z-index: 2; width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--muted); cursor: pointer; transition: transform .25s, color .15s, background .15s;
}
.side-toggle:hover { color: var(--accent); background: var(--accent-soft); }
.side-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.side .brand { padding-right: 44px; }
.brand > span:not(.mark) { min-width: 0; }
.brand .brand-name, .brand .brand-tag { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Экран «Настройки» */
.set-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); align-items: start; }
.set-grid .card { margin: 0; min-width: 0; }
.set-grid .card h2 { margin-top: 0; }
.set-grid .card .row { margin-top: 12px; }
.set-grid .check { margin: 4px 0; }
.set-grid .card > .hint { margin: -4px 0 10px; }

@media (min-width: 900px) {
  .shell { transition: grid-template-columns .25s ease; }
  .side-collapsed .shell { grid-template-columns: 72px minmax(0, 1fr); }
  .side-collapsed .side { padding-left: 10px; padding-right: 10px; overflow-x: hidden; }
  .side-collapsed .side-toggle { position: static; margin: 0 auto 10px; transform: rotate(180deg); }
  .side-collapsed .side .brand { padding: 2px 0 12px; justify-content: center; }
  .side-collapsed .side .brand > span:not(.mark),
  .side-collapsed .side .navgroup,
  .side-collapsed .side .navlink .grow,
  .side-collapsed .side .who > :not(.ava),
  .side-collapsed .side input[type=search],
  .side-collapsed .side form,
  .side-collapsed .side [class*="search"] { display: none; }
  .side-collapsed .side .navlink { justify-content: center; position: relative; padding-left: 0; padding-right: 0; }
  .side-collapsed .side .navlink .badge, .side-collapsed .side .navlink .count {
    position: absolute; top: 2px; right: 6px; transform: scale(.85);
  }
  .side-collapsed .side .side-add { font-size: 0; gap: 0; padding: 0; justify-content: center; }
  .side-collapsed .side .side-add .ico, .side-collapsed .side .side-add svg { width: 20px; height: 20px; }
  .side-collapsed .side .who { justify-content: center; }
}
@media (max-width: 899px) { .side-toggle { display: none; } }

/* Кнопка «Наверх» */
.to-top {
  position: fixed; right: 20px; bottom: 24px; z-index: 40; width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-text); box-shadow: 0 6px 20px rgba(20, 30, 90, .25);
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity .2s, transform .2s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { transform: translateY(-2px); }
.to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.to-top .lay-ico { width: 20px; height: 20px; }
@media (max-width: 899px) {
  .to-top { right: 16px; bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .shell, .side-toggle, .to-top { transition: none; }
}

/* Аватарки с фото */
.has-ini { position: relative; overflow: hidden; }
.ava-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; opacity: 0; transition: opacity .2s; }
.has-img .ava-img { opacity: 1; }
.has-img { color: transparent; }
a.who { color: inherit; text-decoration: none; border-radius: var(--radius-sm); cursor: pointer; transition: background .15s; }
a.who:hover { background: var(--surface2); }
.top-ava .ava-in { width: 100%; height: 100%; display: grid; place-items: center; border-radius: inherit; }
.profile-photo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.profile-photo .ava-big { width: 88px; height: 88px; border-radius: 999px; display: grid; place-items: center; font-size: 30px; font-weight: 700; background: var(--accent-soft); color: var(--accent); }

/* Логотип вместо буквы: боковая панель, шапка телефона, экран входа */
.mark, .mark.big { background: url(logo.svg) center / cover no-repeat; color: transparent; box-shadow: none; overflow: hidden; }

/* Низ боковой панели: профиль + выход */
.side .who-row { margin-top: auto; display: flex; align-items: center; gap: 4px; border-top: 1px solid var(--border); padding-top: 8px; }
.side .who-row .who { margin-top: 0; border-top: 0; flex: 1; min-width: 0; padding: 6px 8px; }
.side-logout { flex: none; width: 38px; height: 38px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s; }
.side-logout:hover { background: var(--bad-soft, rgba(209, 67, 67, .12)); color: var(--bad, #d14343); }
.side-logout:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.side-logout .ico { width: 19px; height: 19px; }
@media (min-width: 900px) {
  .side-collapsed .side .who-row { flex-direction: column; gap: 6px; }
  .side-collapsed .side .who-row .who { padding: 4px 0; }
}