/* Общая раскладка приложений АртВиль: рамка, шапка, нижнее меню, списки, аватары. */
.shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; }
.frame { width: 100%; max-width: 560px; min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); }
.topbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; background: var(--paper); border-bottom: 1px solid var(--line);
}
.topbar h1 { font-size: 20px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iconbtn {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card);
  display: grid; place-items: center; cursor: pointer; color: var(--ink);
}
main { flex: 1; padding: 16px 16px 110px; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; justify-content: center;
  background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
.tabbar nav { width: 100%; max-width: 560px; display: flex; }
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 10px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-faint); text-decoration: none;
}
.tabbar a[aria-current="page"] { color: var(--brand); }

.login { max-width: 400px; margin: 0 auto; padding: 48px 20px; }
.login .logo { margin: 0 auto 6px; height: 56px; }
.login h1 { text-align: center; font-size: 22px; margin-bottom: 4px; }
.login .muted { text-align: center; margin-bottom: 26px; }

.list { display: flex; flex-direction: column; gap: 8px; }
.item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; color: inherit; text-decoration: none; cursor: pointer;
}
.item:active { transform: scale(.99); }
.item .grow b { display: block; font-weight: 600; font-size: 15px; }
.item .grow span { font-size: 12.5px; color: var(--ink-faint); }
.item .chev { color: var(--ink-faint); }
.ava {
  width: 42px; height: 42px; border-radius: 50%; background: var(--brand-tint); color: var(--brand);
  display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: 18px; flex: none;
}
.ava.big { width: 54px; height: 54px; font-size: 22px; }
.empty { text-align: center; padding: 36px 16px; color: var(--ink-soft); }
.empty .btn { margin-top: 14px; }
.spinner { text-align: center; padding: 40px 0; color: var(--ink-faint); }