* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--t1);
}

button, input { font: inherit; color: inherit; }
/* Клавиатурный фокус виден везде; мышь и палец кольца не получают. */
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; border-radius: var(--r-sm); }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }

.ic { width: 20px; height: 20px; display: block; color: currentColor; }
.ic--12 { width: 12px; height: 12px; } .ic--13 { width: 13px; height: 13px; }
.ic--14 { width: 14px; height: 14px; } .ic--15 { width: 15px; height: 15px; }
.ic--16 { width: 16px; height: 16px; } .ic--17 { width: 17px; height: 17px; }
.ic--18 { width: 18px; height: 18px; } .ic--19 { width: 19px; height: 19px; }
.ic--20 { width: 20px; height: 20px; } .ic--21 { width: 21px; height: 21px; }
.ic--22 { width: 22px; height: 22px; } .ic--24 { width: 24px; height: 24px; }
.ic--26 { width: 26px; height: 26px; } .ic--27 { width: 27px; height: 27px; }
.ic--38 { width: 38px; height: 38px; }
.dim { color: var(--t3); }

/* ---------- оболочка ---------- */

.app {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
  overflow: hidden;
}

.screens { position: relative; flex: 1; min-height: 0; background: var(--bg); }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: var(--pad-t); animation: fade 0.4s var(--ease); }
@keyframes fade { from { opacity: 0; } }

/* Углубление: экран приезжает справа, возврат выводит родителя слева. Едет
   только входящий — на 390px параллакс двух непрозрачных панелей всё равно
   не виден, а стоил бы отдельного состояния в nav.js. */
@keyframes screen-push { from { transform: translateX(100%); } }
@keyframes screen-pop { from { transform: translateX(-24%); opacity: 0.6; } }
.screen--push { animation: screen-push var(--dur-sheet) var(--ease); }
.screen--pop { animation: screen-pop var(--dur-sheet) var(--ease); }

/* Синее свечение шапки главной — вместо картинки-подложки */
#screen-home { background: linear-gradient(180deg, rgba(61, 123, 255, 0.16) 0%, rgba(61, 123, 255, 0) 320px); }

.scroll {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding-bottom: 24px;
  /* Докрутили до конца — дальше тянуться нечему: страница под слоем
     ехать не должна, и pull-to-refresh браузера тоже. */
  overscroll-behavior: contain;
}
.scroll::-webkit-scrollbar { display: none; }

/* ---------- шапки ---------- */

.head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px var(--gutter) 18px; }
.head--simple { padding: 2px var(--gutter) 16px; }
.head--back { gap: var(--gap-el); justify-content: flex-start; }
.head__id { display: flex; flex-direction: column; gap: 4px; }
.head__sub { font-size: 13px; font-weight: 500; color: var(--t2); }
.head__actions { display: flex; align-items: center; gap: 10px; }
.title { font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }

.wordmark { font-size: 18px; font-weight: 800; line-height: 1.2; letter-spacing: 0.02em; color: var(--t1); }
.wordmark::first-letter { color: var(--accent); }

.iconbtn {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: var(--pill);
  background: var(--surface-2); color: var(--t1);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.iconbtn:active { background: var(--surface-3); transform: scale(0.94); }
.iconbtn--ghost { width: 36px; height: 36px; background: transparent; color: var(--t2); }
.iconbtn--on { color: var(--accent); background: var(--accent-tint); }
.head--back .iconbtn, .sheet__head .iconbtn { width: 38px; height: 38px; }

.avatar {
  width: 40px; height: 40px; border-radius: var(--pill); flex: none;
  background: linear-gradient(135deg, var(--accent-hi), var(--accent-deep));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: var(--on-accent);
}
.avatar--lg { width: 84px; height: 84px; font-size: 32px; font-weight: 800; box-shadow: var(--shadow-1); }

/* ---------- чипы ---------- */

.chips { display: flex; gap: 8px; padding: 0 var(--gutter) 20px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips--tight { padding: 0; gap: 8px; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: var(--pill); font-size: 13px; font-weight: 700;
  color: var(--t1); background: var(--surface-2);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.chips--tight .chip { padding: 8px 15px; font-size: 12px; }
.chip:active { transform: scale(0.96); }
.chip--on, .chips--tight .chip--on { color: var(--on-accent); background: var(--accent); }