/* stage3.css — экраны этапа 3а веб-приложения (на токенах kit.css).
 * Блоки: ШАПКА 3А · НАХОДКИ · ПРОФИЛЬ · УВЕДОМЛЕНИЯ · ТОП.
 * Правила: цвета — только var(--…), currentColor, transparent и
 * color-mix(… var(--…) …); длительности — var(--dur-*); всё интерактивное
 * не выделяется долгим нажатием (user-select + -webkit-user-select +
 * -webkit-touch-callout — иначе iPhone выделяет текст под пальцем);
 * тап-цели ≥ 44 px; prefers-reduced-motion гасит въезды и уходы. */

:root { --ok-ink: #57d977; }
:root[data-theme="light"] { --ok-ink: #1a6b34; }

/* == ШАПКА 3А: колокол с бейджем, Топ ==================================== */
.hbell { position: relative; }
/* Якорь — правый край кнопки: «16» и «99+» не вылезают за край экрана на 360 px (волна 3б). */
.hbell-bdg { top: 4px; left: auto; right: 2px; }
.hbtn, .tab, .fish-pill, .brand {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

/* == НАХОДКИ (screens/finds.js, ui/findsview.js) ========================== */
.fd-head .sub-title { flex: none; }
.fd-pick { flex: none; }
.fd-reels {
  display: flex; align-items: center; gap: 12px; min-height: 56px;
  margin: 2px var(--gutter) 12px; padding: 8px 14px; border-radius: var(--r-4);
  background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); color: var(--panel-fg);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: background-color var(--dur-press) linear;
}
.fd-reels:active { background: var(--accent-wash-2); }
.fd-reels .ki { flex: none; font-size: 24px; color: var(--lav); }
.fd-reels span { display: grid; min-width: 0; }
.fd-reels b { font-size: 15px; font-weight: 900; }
.fd-reels small { color: var(--ink-dim); font-size: 13px; font-weight: 700; }
.fd-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0 var(--gutter); }
@media (min-width: 560px) { .fd-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fd-list > .es { grid-column: 1 / -1; }
.fd-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border-radius: var(--r-5); background: var(--raise); box-shadow: inset 0 0 0 1px var(--line);
}
.fd-media { position: relative; aspect-ratio: var(--ar, 0.8); background: var(--sk-1); overflow: hidden; }
.fd-media:not(.is-loaded):not(.is-broken) {
  background: linear-gradient(100deg, var(--sk-1) 40%, var(--sk-2) 50%, var(--sk-1) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}
.fd-open {
  display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.fd-open img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.fd-media.is-loaded img { opacity: 1; }
.fd-media.is-broken img { visibility: hidden; }
.fd-kind {
  position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px;
  min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px;
  background: var(--backdrop); color: var(--ink-on-accent); font-size: 13px; font-weight: 900;
  pointer-events: none;
}
.fd-check {
  position: absolute; top: 4px; right: 4px; display: none; place-items: center;
  width: var(--tap); height: var(--tap); cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.is-picking .fd-check { display: grid; }
.fd-tick {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--backdrop); color: transparent; box-shadow: inset 0 0 0 2px var(--ink-on-accent);
  transition: background-color var(--dur-fast) linear, transform var(--dur-fast) var(--ease-pop);
}
.fd-tick .ki { font-size: 18px; }
.fd-card.is-picked .fd-tick { background: var(--accent-grad); color: var(--ink-on-accent); transform: scale(1.06); }
.fd-card.is-picked { box-shadow: inset 0 0 0 2px var(--lav); }
.fd-check-in:focus-visible + .fd-tick { outline: 2px solid var(--lav); outline-offset: 2px; }
.is-picking .fd-open { cursor: pointer; }
.fd-cap {
  margin: 10px 12px 0; color: var(--ink-soft); font-size: 15px; line-height: 1.45;
  white-space: pre-line; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.fd-sched {
  display: flex; align-items: center; gap: 8px; margin: 10px 12px 0; padding: 0 0 0 12px;
  min-height: var(--tap); border-radius: var(--r-3); background: var(--accent-wash);
  color: var(--warm-ink); font-size: 14px; font-weight: 800;
}
.fd-sched-t { flex: 1; min-width: 0; }
.fd-acts, .fd-ask { display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px; margin-top: auto; }
.fd-acts .btn, .fd-ask .btn, .fd-acts .ibtn, .fd-sched .btn, .fd-pick, .fd-batch .btn {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.fd-pub { flex: 1.5 1 0; min-width: 0; }
.fd-pub span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-skip { flex: 1 1 0; min-width: 0; }
.fd-later { flex: none; color: var(--ink-mid); box-shadow: inset 0 0 0 1px var(--line); }
.fd-acts.is-asked { display: none; }
.fd-acts.is-back { animation: fd-fade var(--dur-fast) var(--ease-out); }
.fd-ask { flex-wrap: wrap; animation: fd-fade var(--dur-fast) var(--ease-out); }
.fd-ask-q { flex: 1 1 100%; color: var(--panel-fg); font-size: 14px; font-weight: 800; }
.fd-ask .btn { flex: 1 1 0; min-width: 0; }
.fd-yes.is-skip {
  background: color-mix(in srgb, var(--danger-ink) 22%, var(--raise-2)); color: var(--danger-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger-ink) 45%, transparent);
}
@keyframes fd-fade { from { opacity: 0; } to { opacity: 1; } }
/* Уход карточки — как десктоп: «Мимо» — красная с мусоркой, схлопывается;
 * «Опубликовать» — зелёная с галочкой, взлетает; соседи доезжают FLIP-ом. */
.fd-fx {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  border-radius: inherit; pointer-events: none;
  background: color-mix(in srgb, var(--danger-ink) 30%, transparent);
  animation: fd-fade var(--dur-fast) var(--ease-out) both;
}
.fd-card.fx-pub .fd-fx { background: color-mix(in srgb, var(--ok-ink) 28%, transparent); }
.fd-fx-ic {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  font-size: 30px; color: var(--danger-ink); background: var(--raise-2); box-shadow: var(--e2);
  animation: fd-ic-pop var(--dur-base) var(--ease-pop) both;
}
.fd-card.fx-pub .fd-fx-ic { color: var(--ok-ink); }
@keyframes fd-ic-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.fd-card.fx-skip.fx-out {
  transform: scale(.9); opacity: 0;
  transition: transform var(--dur-fast) var(--ease-in), opacity var(--dur-fast) var(--ease-in);
}
.fd-card.fx-pub.fx-out {
  transform: translateY(-16px); opacity: 0;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-in);
}
.fd-card.fx-flip-pre { transition: none; }
.fd-card.fx-flip { transition: transform var(--dur-base) var(--ease-out); }
.fd-expired { margin: 14px var(--gutter) 0; color: var(--ink-dim); font-size: 13px; font-weight: 700; line-height: 1.45; }
/* Пачка: полоса над вкладками. */
.fd-batch {
  position: fixed; z-index: 38; left: calc(var(--gutter) + var(--safe-l)); right: calc(var(--gutter) + var(--safe-r));
  bottom: calc(var(--tab-h) + var(--safe-b) + 10px);
  display: grid; gap: 6px; max-width: 616px; margin: 0 auto; padding: 10px 12px;
  border-radius: var(--r-4); background: var(--scrim-2); box-shadow: var(--e3), inset 0 0 0 1px var(--line-strong);
  animation: fd-bar-in var(--dur-base) var(--ease-out);
}
.fd-batch-hint { color: var(--ink-mid); font-size: 13px; font-weight: 700; text-align: center; }
.scr-finds.is-picking { padding-bottom: 120px; }
@keyframes fd-bar-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fd-sk { padding-bottom: 12px; }
.fd-sk .sk-line { margin: 10px 12px 0; }
.fd-sk-img { aspect-ratio: 0.8; border-radius: 0; }
/* Своё время «позже» (шторка). */
.fd-when { display: grid; gap: 10px; padding-bottom: 4px; }
.fd-when-l { color: var(--ink-mid); font-size: 14px; font-weight: 800; }
.fd-when-in {
  min-height: var(--tap); padding: 0 12px; border: 0; border-radius: var(--r-3);
  background: var(--raise-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--panel-fg); font-size: 16px;
}
.fd-when-err { margin: 0; color: var(--danger-ink); font-size: 14px; font-weight: 700; }
/* Находка во весь экран. */
.fv {
  position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column;
  background: var(--bg); color: var(--panel-fg);
  animation: fd-fade var(--dur-base) var(--ease-out);
  transition: opacity var(--dur-fast) var(--ease-in);
}
.fv.is-leaving { opacity: 0; }
.fv-top {
  display: flex; justify-content: flex-end; flex: none;
  padding: calc(4px + var(--safe-t)) calc(4px + var(--safe-r)) 0 calc(4px + var(--safe-l));
}
.fv-x { color: var(--panel-fg); }
.fv-media { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; }
.fv-strip {
  display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.fv-strip::-webkit-scrollbar { display: none; }
.fv-img {
  flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: center;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.fv-vid { max-width: 100%; max-height: 100%; }
.fv-n {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 4px 12px;
  border-radius: 999px; background: var(--backdrop); color: var(--ink-on-accent); font-size: 13px; font-weight: 800;
  pointer-events: none;
}
.fv-foot {
  flex: none; display: grid; gap: 6px; max-width: 640px; width: 100%; margin: 0 auto;
  padding: 8px calc(var(--gutter) + var(--safe-r)) calc(10px + var(--safe-b)) calc(var(--gutter) + var(--safe-l));
}
.fv-cap { margin: 0; max-height: 26vh; overflow-y: auto; color: var(--ink-soft); font-size: 15px; line-height: 1.45; white-space: pre-line; }
.fv-sched { margin: 0; color: var(--warm-ink); font-size: 14px; font-weight: 800; }
.fv-acts, .fv-ask { padding: 4px 0 0; }
.fv-later { flex: 1 1 0; min-width: 0; }
@media (prefers-reduced-motion: reduce) {
  .fd-ask, .fd-acts.is-back, .fd-fx, .fd-fx-ic, .fd-batch, .fv, .fd-media { animation: none; }
  .fd-card.fx-skip.fx-out, .fd-card.fx-pub.fx-out { transform: none; }
}

/* == ПРОФИЛЬ (screens/profile.js, screens/follows.js) ===================== */
.pf-head {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 4px;
  margin: 0 var(--gutter); padding: 0 12px 14px; text-align: center;
  border-radius: var(--r-5); background: var(--raise); box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
/* Обложка — свой оттенок у каждого кота (--cov-h из id), в тоне темы. */
.pf-cover {
  justify-self: stretch; height: 92px; margin: 0 -12px;
  background:
    radial-gradient(120% 140% at 20% 0%, color-mix(in oklab, hsl(var(--cov-h) 70% 62%) 55%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in oklab, hsl(var(--cov-h) 55% 45%) 60%, var(--bg)), var(--accent-wash-3));
}
.pf-ava {
  display: grid; place-items: center; width: 112px; height: 112px; margin-top: -58px;
  border-radius: 50%; background: var(--bg-2);
  box-shadow: 0 0 0 4px var(--bg-2), 0 0 0 6px color-mix(in oklab, hsl(var(--cov-h) 70% 62%) 60%, transparent), var(--e2);
}
.pf-ava.is-prem { box-shadow: 0 0 0 4px var(--bg-2), 0 0 0 6px var(--gold-ink), var(--e2); }
.pf-name {
  display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%;
  margin: 6px 0 0; font-size: 22px; font-weight: 900; line-height: 1.2;
}
/* Длинное имя — в две строки, не многоточием: это лицо профиля. */
.pf-nm {
  min-width: 0; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pf-off { flex: none; display: inline-grid; color: var(--lav); font-size: 18px; }
.pf-gem { flex: none; display: inline-grid; color: var(--gold-ink); font-size: 18px; }
.pf-handle { margin: 0; color: var(--ink-dim); font-size: 14px; font-weight: 800; }
.pf-case { margin: 4px 0 0; color: var(--ink-mid); font-size: 14px; font-weight: 700; line-height: 1.4; }
.pf-case a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 900; }
.pf-bio {
  margin: 6px 0 0; max-width: 460px; color: var(--ink-soft); font-size: 15px; line-height: 1.45;
  white-space: pre-line; overflow-wrap: anywhere;
}
.pf-bio.is-empty { color: var(--ink-dim); font-size: 14px; }
.pf-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; justify-self: stretch;
  margin: 12px -8px 0;
}
.pf-stat {
  display: grid; align-content: center; justify-items: center; min-height: 56px; padding: 4px 2px;
  border-radius: var(--r-3); color: var(--panel-fg);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.pf-stat b { font-size: 18px; font-weight: 900; line-height: 1.15; }
.pf-stat span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-dim); font-size: 12px; font-weight: 800; }
a.pf-stat { transition: background-color var(--dur-press) linear; }
a.pf-stat:active { background: var(--accent-wash-2); }
.pf-acts { display: flex; gap: 6px; justify-self: stretch; margin: 10px -6px 0; }
.pf-act {
  flex: 1 1 0; min-width: 0; padding: 0 6px;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.pf-act span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-act.is-on { color: var(--lav); }
.pf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 10px var(--gutter) 0; }
.pf-tile {
  display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 12px; border: 0;
  border-radius: var(--r-4); background: var(--raise); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--panel-fg); text-align: left; cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: background-color var(--dur-press) linear;
}
.pf-tile:active { background: var(--accent-wash-2); }
.pf-tile-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-3); background: var(--accent-wash); color: var(--lav); font-size: 22px; }
.pf-tile-tx { display: grid; min-width: 0; }
.pf-tile-tx b { font-size: 15px; font-weight: 900; }
.pf-tile-tx small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-dim); font-size: 13px; font-weight: 700; }
.pf-links { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 6px var(--gutter) 0; }
.pf-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 10px;
  border-radius: 999px; color: var(--lav); font-size: 14px; font-weight: 800;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.pf-link:active { background: var(--accent-wash-2); }
.pf-casebar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  margin: 10px var(--gutter) 0; padding: 6px 6px 6px 12px; border-radius: var(--r-4); background: var(--accent-wash);
  font-size: 14px; font-weight: 700;
}
.pf-casebar span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pf-casebar .ki { color: var(--lav); }
.pf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin: 12px var(--gutter) 0; border-radius: var(--r-3); overflow: hidden; }
.pf-cell {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--sk-1);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.pf-cell:not(.is-loaded):not(.is-broken) {
  background: linear-gradient(100deg, var(--sk-1) 40%, var(--sk-2) 50%, var(--sk-1) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}
.pf-cell img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.pf-cell.is-loaded img { opacity: 1; }
.pf-cell.is-broken img { visibility: hidden; }
.pf-cell:active img { opacity: .8; }
.pf-mark {
  position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--backdrop); color: var(--ink-on-accent); font-size: 15px; pointer-events: none;
}
.pf-foot { margin: 0 var(--gutter); }
.pf-more { height: 1px; }
.pf-sk { display: grid; justify-items: center; gap: 10px; margin: 0 var(--gutter); padding-bottom: 14px; }
.pf-sk-cover { justify-self: stretch; height: 92px; border-radius: var(--r-5) var(--r-5) 0 0; }
.pf-sk-ava { width: 112px; height: 112px; margin-top: -58px; border-radius: 50%; }
/* Шторки витрины. */
.pf-sheet { display: grid; gap: 8px; padding-bottom: 6px; }
.pf-sheet-big { margin: 0; font-size: 20px; font-weight: 900; text-align: center; }
.pf-sheet-tx { margin: 0; color: var(--ink-soft); font-size: 15px; text-align: center; }
.pf-sheet-h { margin: 6px 0 0; color: var(--ink-mid); font-size: 13px; font-weight: 900; }
.pf-sheet-note { margin: 4px 0 0; color: var(--ink-dim); font-size: 13px; font-weight: 700; text-align: center; line-height: 1.45; }
.pf-guests { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pf-guests::-webkit-scrollbar { display: none; }
.pf-guest {
  display: grid; justify-items: center; gap: 4px; flex: none; width: 72px; min-height: var(--tap);
  color: var(--panel-fg); font-size: 12px; font-weight: 800; text-align: center;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.pf-guest > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-troph { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.pf-tr {
  display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: var(--r-3);
  background: var(--raise-2); box-shadow: inset 0 0 0 1px var(--line); text-align: center;
}
.pf-tr.is-rare { box-shadow: inset 0 0 0 1px var(--lav); }
.pf-tr.is-legendary { box-shadow: inset 0 0 0 1px var(--gold-ink); }
.pf-tr-e { font-size: 26px; line-height: 1.2; }
.pf-tr b { font-size: 12px; font-weight: 800; line-height: 1.3; }
.pf-tr small { color: var(--ink-dim); font-size: 12px; font-weight: 800; }
/* Подписчики / подписки. */
.fl-list { display: grid; margin: 0 var(--gutter); }
.fl-row { display: flex; align-items: center; gap: 8px; min-height: 60px; border-bottom: 1px solid var(--line); }
.fl-who {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; min-height: 56px; color: var(--panel-fg);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.fl-ava { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--r-3); background: var(--accent-wash); }
.fl-tx { display: grid; min-width: 0; }
.fl-tx b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 900; }
.fl-tx small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-dim); font-size: 13px; font-weight: 700; }
.fl-follow {
  flex: none; min-width: 112px; padding: 0 12px;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.fl-follow .ki { font-size: 16px; }
.fl-follow.is-on { color: var(--lav); }
.fl-me { flex: none; color: var(--ink-dim); font-size: 13px; font-weight: 800; padding: 0 8px; }
.fl-foot { margin: 0 var(--gutter); }
.fl-more { height: 1px; }
@media (prefers-reduced-motion: reduce) {
  .pf-cell { animation: none; }
}

/* == УВЕДОМЛЕНИЯ (screens/notifications.js) =============================== */
.nt-push {
  display: flex; align-items: center; gap: 12px; min-height: 60px;
  margin: 2px var(--gutter) 6px; padding: 8px 8px 8px 12px; border-radius: var(--r-4);
  background: var(--raise); box-shadow: inset 0 0 0 1px var(--line);
}
.nt-push-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-3); background: var(--accent-wash); color: var(--lav); font-size: 22px; }
.nt-push-tx { display: grid; flex: 1; min-width: 0; }
.nt-push-tx b { font-size: 15px; font-weight: 900; }
.nt-push-tx small { color: var(--ink-dim); font-size: 13px; font-weight: 700; line-height: 1.35; }
.nt-push[data-state="on"] .nt-push-ic { color: var(--ok-ink); }
/* Включатель: спрятанный чекбокс + дорожка, вся метка — тап-цель 52×44. */
.nt-sw {
  display: grid; place-items: center; flex: none; width: 60px; height: var(--tap); cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.nt-sw-track {
  position: relative; width: 46px; height: 28px; border-radius: 14px;
  background: var(--line-strong); transition: background-color var(--dur-fast) linear;
}
.nt-sw-dot {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--panel-fg); box-shadow: var(--e2);
  transition: transform var(--dur-base) var(--ease-out);
}
.nt-sw-in:checked + .nt-sw-track { background: var(--accent-grad); }
.nt-sw-in:checked + .nt-sw-track .nt-sw-dot { transform: translateX(18px); background: var(--ink-on-accent); }
.nt-sw-in:focus-visible + .nt-sw-track { outline: 2px solid var(--lav); outline-offset: 2px; }
.nt-sw-in:disabled + .nt-sw-track { opacity: .6; }
.nt-list { display: grid; }
.nt-day {
  position: sticky; top: calc(var(--hdr-h) + var(--safe-t) + 52px); z-index: 5;
  margin: 0; padding: 10px calc(var(--gutter) + 4px) 6px; background: var(--bg);
  color: var(--ink-mid); font-size: 13px; font-weight: 900; letter-spacing: .02em;
}
.nt-row {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px;
  padding: 8px calc(var(--gutter) + 4px); color: var(--panel-fg);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: background-color var(--dur-slow) var(--ease-out);
}
a.nt-row:active { background: var(--accent-wash-2); }
.nt-row.is-unseen { background: var(--accent-wash); }
.nt-row.is-unseen::before {
  content: ""; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--lav); transition: opacity var(--dur-slow) var(--ease-out);
}
/* Побыла на экране — подсветка гаснет плавно. */
.nt-row.is-unseen.is-seen { background: transparent; }
.nt-row.is-unseen.is-seen::before { opacity: 0; }
.nt-avas { position: relative; flex: none; width: 48px; height: 48px; }
.nt-ava {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: var(--r-3);
  background: var(--accent-wash);
}
.nt-avas.is-many .nt-ava { width: 36px; height: 36px; inset: auto; }
.nt-avas.is-many .nt-ava:first-child { left: 0; top: 0; z-index: 1; box-shadow: 0 0 0 2px var(--bg); }
.nt-avas.is-many .nt-ava:nth-child(2) { right: 0; bottom: 0; }
.nt-kind {
  position: absolute; right: -4px; bottom: -4px; z-index: 2; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--bg-2); box-shadow: 0 0 0 2px var(--bg);
  color: var(--lav); font-size: 13px;
}
.nt-tx { display: grid; gap: 2px; flex: 1; min-width: 0; }
.nt-line { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; color: var(--ink-soft); }
.nt-line b { color: var(--panel-fg); font-weight: 900; }
.nt-time { color: var(--ink-dim); font-weight: 700; }
.nt-thumb { flex: none; width: 48px; height: 48px; overflow: hidden; border-radius: var(--r-2); background: var(--sk-1); }
.nt-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nt-foot { margin: 0 var(--gutter); }
.nt-more { height: 1px; }
@media (prefers-reduced-motion: reduce) {
  .nt-row, .nt-row::before, .nt-sw-dot, .nt-sw-track { transition: none; }
}

/* == ТОП ДВОРА (screens/top.js) =========================================== */
.tp-body { padding: 0 var(--gutter); }
.tp-rules { margin: 0 4px 12px; color: var(--ink-dim); font-size: 13px; font-weight: 700; line-height: 1.45; }
.tp-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; margin-bottom: 14px; }
.tp-pod {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 2px; min-width: 0; padding-top: 6px; color: var(--panel-fg); text-align: center;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.tp-pod-ava { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--raise-2); }
.tp-pod.m-gold .tp-pod-ava { width: 92px; height: 92px; box-shadow: 0 0 0 3px var(--gold-ink), var(--e2); }
.tp-pod.m-silver .tp-pod-ava { box-shadow: 0 0 0 3px var(--ink-mid); }
.tp-pod.m-bronze .tp-pod-ava { box-shadow: 0 0 0 3px var(--warm-ink); }
.tp-medal {
  display: grid; place-items: center; width: 26px; height: 26px; margin-top: -14px; z-index: 1; border-radius: 50%;
  color: var(--bg); font-size: 14px; font-weight: 900; box-shadow: 0 0 0 2px var(--bg);
}
.m-gold .tp-medal, .m-gold .tp-place { background: var(--gold-ink); color: var(--bg); }
.m-silver .tp-medal, .m-silver .tp-place { background: var(--ink-mid); color: var(--bg); }
.m-bronze .tp-medal, .m-bronze .tp-place { background: var(--warm-ink); color: var(--bg); }
.tp-pod-nm { display: flex; align-items: center; justify-content: center; gap: 3px; max-width: 100%; margin-top: 4px; font-size: 14px; font-weight: 900; }
.tp-pod small { color: var(--ink-dim); font-size: 12px; font-weight: 800; }
.tp-step {
  justify-self: stretch; height: 34px; margin-top: 6px; border-radius: var(--r-3) var(--r-3) 0 0;
  background: var(--accent-wash-2); box-shadow: inset 0 1px 0 var(--line-strong);
}
.tp-pod.m-gold .tp-step { height: 52px; background: color-mix(in srgb, var(--gold-ink) 22%, var(--raise)); }
.tp-pod.m-bronze .tp-step { height: 24px; }
.tp-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-off, .tp-gem { flex: none; display: inline-grid; font-size: 14px; }
.tp-off { color: var(--lav); }
.tp-gem { color: var(--gold-ink); }
.tp-rows { display: grid; gap: 6px; }
.tp-row {
  display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 12px 8px 8px;
  border-radius: var(--r-4); background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); color: var(--panel-fg);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: background-color var(--dur-press) linear;
}
.tp-row:active, .tp-pod:active .tp-step { background: var(--accent-wash-2); }
.tp-place {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--raise-2); color: var(--ink-mid); font-size: 14px; font-weight: 900;
}
.tp-row.is-debut { box-shadow: inset 0 0 0 1px var(--ok-ink); }
.tp-row.is-debut .tp-place { color: var(--ok-ink); background: color-mix(in srgb, var(--ok-ink) 16%, transparent); }
.tp-ava { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--r-3); background: var(--accent-wash); }
.tp-who { display: grid; flex: 1; min-width: 0; }
.tp-who b { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 15px; font-weight: 900; }
.tp-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-dim); font-size: 12px; font-weight: 700; }
.tp-pts { flex: none; color: var(--lav); font-size: 17px; font-weight: 900; }
.tp-h { margin: 20px 4px 2px; font-size: 17px; font-weight: 900; }
.tp-sub { margin: 0 4px 8px; color: var(--ink-dim); font-size: 13px; font-weight: 700; }
.tp-posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.tp-post {
  display: grid; align-content: start; min-width: 0; overflow: hidden; border-radius: var(--r-4);
  background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); color: var(--panel-fg);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.tp-post-img { position: relative; display: block; aspect-ratio: 1; background: var(--sk-1); overflow: hidden; }
.tp-post-img img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.tp-post-img.is-loaded img { opacity: 1; }
.tp-post-n {
  position: absolute; top: 6px; left: 6px; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: 999px; background: var(--backdrop); color: var(--ink-on-accent); font-size: 13px; font-weight: 900;
}
.tp-post-tx { display: grid; gap: 2px; padding: 8px 10px 10px; min-width: 0; }
.tp-post-who { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.tp-post-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; }
.tp-post-ava { display: grid; place-items: center; flex: none; width: 24px; height: 24px; }
.tp-post-cap {
  color: var(--ink-soft); font-size: 13px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tp-post small { color: var(--ink-dim); font-size: 12px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .tp-row, .tp-post-img img { transition: none; }
}