/* v3 «Местные» — профили, «Я», «Обсуждают», уведомления (стиль B «Bento clean»). Владелец — Profiles.
   Только токены контракта (css/base.css). Префикс классов p3-. Разметка — js/profiles.js, js/mepane.js, js/top.js.
   Типографика — 7 ступеней --t-* (P0-6), движение — --ease-* / --dur-* (P1-1), мелкий цветной текст — *-text (P0-4). */

/* ---------------------------------------------------------------- каркас */
/* вкладки «Я» и «Обсуждают» — наши; ig.css беты обнуляет им боковые отступы */
#pane-me .pane-in, #pane-top .pane-in { padding-left: var(--pad); padding-right: var(--pad); }
.p3-screen .s-body { padding-left: var(--pad); padding-right: var(--pad); }
.p3-screen .s-body > .p3-head:first-child { margin-top: 4px; }
.p3-pad { padding-top: 8px; }
.p3-fade { animation: p3-fade var(--dur-2, 220ms) var(--ease-out, ease-out) both; }
@keyframes p3-fade { from { opacity: 0; } }
.p3-title { margin: 0; font: var(--t-display, 700 28px/32px var(--font-head)); letter-spacing: -.03em; color: var(--text); }
.p3-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 24px 2px 12px; }
.p3-sec h2 { margin: 0; font: var(--t-headline, 600 17px/24px var(--font-head)); letter-spacing: -.02em; }
.p3-sec span { font: var(--t-caption, 600 13px/18px var(--font)); color: var(--text-3); }
.p3-sec--sm { margin: 20px 2px 10px; align-items: center; }
.p3-sec--sm span { min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink);
  display: inline-grid; place-items: center; font: var(--t-micro, 800 11px/14px var(--font)); font-variant-numeric: tabular-nums; }
.p3-pad > .p3-sec--sm:first-child { margin-top: 6px; }
.p3-note { display: flex; gap: 6px; margin: 12px 0 0; font: var(--t-caption, 600 13px/18px var(--font)); color: var(--text-2); }
.p3-note svg { flex: none; margin-top: 2px; }
.p3-note--c { justify-content: center; text-align: center; margin-top: 16px; }

/* имя в шапке — только когда крупное имя уехало под неё (P1-11, P0-7): вкладка «Я» и экраны профилей */
body[data-tab="me"] .hdr-title, .p3-ttl .s-title { transition: opacity var(--d-fast, 160ms) var(--ease-out, ease-out), transform var(--d-fast, 160ms) var(--ease-out, ease-out); }
body[data-tab="me"]:not(.p3-me-ttl) .hdr-title, .p3-ttl:not(.p3-ttl--on) .s-title { opacity: 0; transform: translateY(6px); pointer-events: none; }

/* аватар (avatarHtml из sapi.js → span.av) внутри наших блоков */
.p3-head .av, .p3-row .av, .p3-nt .av, .p3-src .av { display: inline-grid; place-items: center; flex: none; overflow: hidden; color: #fff;
  font-weight: 800; line-height: 1; background: var(--av, var(--violet)); }
.p3-row .av, .p3-nt .av, .p3-src .av { border-radius: 15px; }
.p3-head .av img, .p3-row .av img, .p3-nt .av img, .p3-src .av img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- числовой тикер (P2-5): цифра — колонка 0–9 */
.tk { display: inline-block; height: 1.2em; line-height: 1.2em; overflow: hidden; vertical-align: bottom; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tk__c, .tk__x { display: inline-block; vertical-align: top; height: 1.2em; }
.tk__c { overflow: hidden; }
.tk__s { display: block; transform: translateY(calc(var(--n) * -1.2em)); }
.tk__s x-d { display: block; height: 1.2em; text-align: center; }
.tk x-v { display: inline; }
.tk--go .tk__s { animation: tk-roll 640ms var(--ease-out, cubic-bezier(.22, 1, .36, 1)) both; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
@keyframes tk-roll { from { transform: translateY(0); } }

/* ---------------------------------------------------------------- шапка профиля */
.p3-head { position: relative; }
.p3-cover { height: 120px; border-radius: var(--r-lg); background:
  radial-gradient(130px 100px at 18% 30%, color-mix(in srgb, var(--pc) 55%, transparent) 0%, transparent 72%),
  radial-gradient(150px 110px at 82% 18%, color-mix(in srgb, var(--violet) 45%, transparent) 0%, transparent 72%),
  radial-gradient(170px 120px at 60% 100%, color-mix(in srgb, var(--accent) 35%, transparent) 0%, transparent 72%),
  var(--surface-2); }
.p3-id { position: relative; margin-top: -48px; padding: 0 4px; }
.p3-av { position: relative; display: inline-block; width: 92px; height: 92px; border-radius: 30px; border: 5px solid var(--bg); background: var(--bg);
  box-sizing: content-box; }
.p3-av .av { width: 92px !important; height: 92px !important; border-radius: 26px; font: 700 36px/1 var(--font-head) !important; }
.p3-av.ring { box-shadow: 0 0 0 3px var(--accent); }
.p3-mark { position: absolute; right: -6px; bottom: -6px; width: 28px; height: 28px; border-radius: 10px; border: 3px solid var(--bg);
  background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; }
.p3-mark--ed { background: var(--invert); color: var(--invert-ink); }
.p3-id h1 { margin: 12px 0 0; font: var(--t-title, 700 22px/28px var(--font-head)); letter-spacing: -.03em; overflow-wrap: anywhere; }
.p3-loc { display: flex; align-items: center; gap: 6px; margin-top: 4px; font: var(--t-caption, 600 13px/18px var(--font)); color: var(--text-3); min-width: 0; }
.p3-loc svg { flex: none; }
.p3-loc span { min-width: 0; }
.p3-bio { margin: 8px 0 0; font: var(--t-body, 500 15px/22px var(--font)); color: var(--text); overflow-wrap: anywhere; }

/* кнопки: primary — акцент в обеих темах (P1-11); иконка «＋/✓» у «Читать» — через mask, чтобы paintFollow() не стирал её */
.p3-btns { display: flex; gap: 8px; margin-top: 16px; }
.p3-me .p3-btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 46px; }
.p3-pri { flex: 1; min-width: 0; height: 46px; padding: 0 12px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: var(--t-callout, 700 14px/20px var(--font)); white-space: nowrap; overflow: hidden; background: var(--accent); color: var(--accent-ink); }
.p3-pri[data-follow]::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat; }
.p3-pri.on, .p3-pri--plain, :root[data-theme="light"] .p3-pri.on, :root[data-theme="light"] .p3-pri--plain { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.p3-pri.on::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.p3-pri.on { color: var(--accent-text, var(--accent)); }
.p3-pri svg { width: 18px; height: 18px; flex: none; }
.p3-ib { width: 46px; height: 46px; flex: none; border-radius: var(--r-md); display: grid; place-items: center; background: var(--surface);
  box-shadow: var(--shadow-1); color: var(--text); }
.p3-ib--sm { position: relative; width: 40px; height: 40px; border-radius: var(--r-sm); background: transparent; box-shadow: none; color: var(--text-2); }
.p3-ib--sm::before { content: ""; position: absolute; inset: -2px; }
.p3-ib--sm.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.p3-mute { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--r-pill);
  font: var(--t-caption, 600 13px/18px var(--font)); font-weight: 800; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); }
.p3-mute.on { color: var(--accent-text, var(--accent)); background: var(--accent-soft); box-shadow: none; }

/* светлая тема: белый текст на #12A57A — 3.1:1, поэтому заливка кнопок и плашек — --accent-text (#0B7F5C, 4.99:1) */
:root[data-theme="light"] .p3-pri:not(.on):not(.p3-pri--plain), :root[data-theme="light"] .p3-btn--acc, :root[data-theme="light"] .p3-pill:not(.on):not(.p3-pill--ghost),
:root[data-theme="light"] .p3-sec--sm span, :root[data-theme="light"] .ds-t b em, :root[data-theme="light"] .p3-nt__k.p3-tone--accent, :root[data-theme="light"] .p3-mark:not(.p3-mark--ed) {
  background: var(--accent-text, #0B7F5C); color: #fff; }

/* плитки статистики */
.p3-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.p3-stat { display: flex; flex-direction: column; justify-content: space-between; min-height: 76px; text-align: left; background: var(--surface); border-radius: 20px;
  padding: 12px; box-shadow: var(--shadow-1); min-width: 0; color: var(--text); }
.p3-stat b { display: block; font: var(--t-title, 700 22px/28px var(--font-head)); letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p3-stat span { display: block; margin-top: 2px; font: var(--t-caption, 600 13px/18px var(--font)); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p3-stat.acc { background: var(--accent-soft); box-shadow: none; }
.p3-stat.acc b { color: var(--accent-text, var(--accent)); }
.p3-stat.acc span { color: var(--text-2); }
/* «Пока никто — поделись»: вместо «0 читают» (P1-11) */
.p3-stat--cta { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line), var(--shadow-1); }
.p3-stat--cta .p3-stat__ic { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--accent-soft); color: var(--accent-text, var(--accent)); }
.p3-stat--cta span { margin-top: 6px; white-space: normal; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* бейджи */
.p3-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.p3-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--surface);
  box-shadow: var(--shadow-1); font: var(--t-caption, 600 13px/18px var(--font)); font-weight: 700; }
.p3-badge svg { color: var(--amber-text, var(--amber)); flex: none; }

/* сегменты (база — .seg / .seg__item из base.css) */
.p3-tabs { margin: 20px 0 12px; }
.p3-seg { flex: 1; }
.p3-seg__i { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 419px) { .p3-seg__tail { display: none; } }

/* ---------------------------------------------------------------- карточки в 2 колонки */
.p3-mas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.p3-mas__c { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.p3-card { position: relative; display: block; width: 100%; border-radius: 20px; overflow: hidden; background: var(--surface-2); text-align: left; color: #fff; }
.p3-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p3-card__ov { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 10px 10px; background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .3) 60%, transparent); }
.p3-card__ov b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font: var(--t-caption, 600 13px/18px var(--font)); font-weight: 700; }
.p3-card__m { display: flex; align-items: center; gap: 4px; margin-top: 4px; font: var(--t-caption, 600 13px/18px var(--font)); opacity: .9; font-variant-numeric: tabular-nums; }
.p3-card__m b { font-weight: 800; }
.p3-card__m i { font-style: normal; opacity: .7; }
.p3-card__n { position: absolute; top: 8px; right: 8px; padding: 3px 7px; border-radius: var(--r-pill); background: rgba(0, 0, 0, .55); font: var(--t-micro, 800 11px/14px var(--font)); }
.p3-card--txt { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.p3-card--txt > b { font: var(--t-callout, 700 14px/20px var(--font)); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.p3-card--txt .p3-card__m { color: var(--text-3); opacity: 1; margin-top: 0; }
.p3-card.p3-sk { border-radius: 20px; }
.p3-chip { align-self: flex-start; display: inline-flex; padding: 3px 8px; border-radius: 9px; font: var(--t-micro, 800 11px/14px var(--font)); letter-spacing: .02em; }
.p3-chip--accent { background: var(--accent-soft); color: var(--accent-text, var(--accent)); }
.p3-chip--red { background: var(--red-soft); color: var(--red-text, var(--red)); }
.p3-chip--amber { background: var(--amber-soft); color: var(--amber-text, var(--amber)); }
.p3-chip--blue { background: var(--blue-soft); color: var(--blue-text, var(--blue)); }
.p3-chip--violet { background: var(--violet-soft); color: var(--violet-text, var(--violet)); }
.p3-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-radius: var(--r-md); overflow: hidden; }
.p3-photo { position: relative; aspect-ratio: 1; background: var(--surface-2); }
.p3-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p3-feed { margin: 0 calc(-1 * var(--pad)); }
.p3-more { display: grid; place-items: center; padding: 20px 0; }

/* ответы жителя */
.p3-replies { display: flex; flex-direction: column; gap: 8px; }
.p3-reply { display: block; width: 100%; text-align: left; padding: 12px 16px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-1); color: var(--text); }
.p3-reply q { display: block; quotes: none; font: var(--t-body, 500 15px/22px var(--font)); }
.p3-reply__m { display: flex; align-items: center; gap: 6px; margin-top: 8px; font: var(--t-caption, 600 13px/18px var(--font)); color: var(--text-3); min-width: 0; }
.p3-reply__m svg { flex: none; }
.p3-reply__m b { color: var(--text-2); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p3-reply__m i { font-style: normal; flex: none; }

/* ---------------------------------------------------------------- пустые состояния (иллюстрации 96×96) и скелетоны */
.p3-empty { padding: 28px 16px 24px; }
.p3-empty b { font: var(--t-headline, 600 17px/24px var(--font-head)); }
.p3-empty p { font: var(--t-body, 500 15px/22px var(--font)); }
.p3-empty__ic { background: var(--surface-2); color: var(--text-2); }
.p3-empty__ic svg { width: 28px; height: 28px; }
.p3-empty__ill { display: block; width: 96px; height: 96px; margin: 0 auto 14px; color: var(--text-3); }
.p3-ill { display: block; overflow: visible; }
.p3-ill__bg { fill: var(--surface-2); stroke: none; }
.p3-ill .a { stroke: var(--accent); transform-box: fill-box; transform-origin: center; }
.p3-empty--ill .p3-ill { animation: p3-ill-in 520ms var(--ease-spring, cubic-bezier(.34, 1.36, .64, 1)) both; }
.p3-empty--ill .p3-ill .a { animation: p3-ill-a 3.2s var(--ease-in-out, ease-in-out) .6s infinite; }
@keyframes p3-ill-in { from { opacity: 0; transform: scale(.82); } }
@keyframes p3-ill-a { 50% { transform: translateY(-2px) scale(1.06); opacity: .75; } }
.p3-sk--av { width: 44px; height: 44px; border-radius: 15px; flex: none; }
.p3-sk--l { width: 60%; height: 12px; }
.p3-sk--s { width: 38%; height: 10px; margin-top: 8px; }
.p3-sk--th { width: 48px; height: 48px; border-radius: 14px; flex: none; }
.p3-sk-sec { width: 84px; height: 18px; margin: 6px 2px 12px; border-radius: 8px; }
.p3-nt--sk { pointer-events: none; }
/* «Долго грузится…» — проявляется сама через 6 с скелетона (P2-6) */
.p3-slow { margin: 14px 0 0; text-align: center; font: var(--t-caption, 600 13px/18px var(--font)); color: var(--text-3); opacity: 0; animation: p3-slow .3s ease 6s forwards; }
@keyframes p3-slow { to { opacity: 1; } }
.p3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 14px;
  background: var(--surface-2); color: var(--text); font: var(--t-callout, 700 14px/20px var(--font)); }
.p3-btn--acc { background: var(--accent); color: var(--accent-ink); }
.p3-btn--wide { width: 100%; height: 48px; margin-top: 6px; }
.p3-btn:disabled { opacity: .55; }
.p3-btn svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- списки людей / источников */
.p3-rows { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 4px 0; }
.p3-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-width: 0; min-height: 64px; }
.p3-row + .p3-row { border-top: 1px solid var(--line); }
.p3-row__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.p3-row__t b { font: var(--t-callout, 700 14px/20px var(--font)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p3-row__t i { font-style: normal; font: var(--t-caption, 600 13px/18px var(--font)); color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p3-row__t .p3-sk { display: block; }
.p3-pill { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink); font: var(--t-caption, 600 13px/18px var(--font)); font-weight: 800; white-space: nowrap; cursor: pointer; }
.p3-pill::before { content: ""; position: absolute; inset: -4px -2px; }   /* хит-зона ≥44 (P0-5) */
.p3-pill.on { background: var(--surface-2); color: var(--text-2); }
.p3-pill--ghost { background: var(--surface-2); color: var(--text-2); }
.p3-grp + .p3-grp { margin-top: 16px; }
.p3-grp__h { display: flex; align-items: center; gap: 6px; margin: 0 4px 8px; font: var(--t-caption, 600 13px/18px var(--font)); font-weight: 700; color: var(--text-2); }
.p3-grp__h svg { color: var(--accent-text, var(--accent)); }

/* «Источники» сеткой */
.p3-srcs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.p3-src { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px; border-radius: 20px; background: var(--surface);
  box-shadow: var(--shadow-1); text-align: left; min-width: 0; color: var(--text); }
.p3-src__av { position: relative; margin-bottom: 8px; }
.p3-src__new { position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); }
.p3-src b { width: 100%; font: var(--t-callout, 700 14px/20px var(--font)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p3-src > span:last-child { width: 100%; font: var(--t-caption, 600 13px/18px var(--font)); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- «Обсуждают» */
.p3-top__h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 10px 0 12px; }
.p3-vw { display: flex; gap: 2px; padding: 3px; border-radius: 14px; background: var(--surface-2); }
.p3-top { padding-top: 8px; }
.p3-top__f { display: flex; align-items: center; gap: 8px; }
.p3-top__f--2 { margin-top: 8px; }
.p3-top__sub { display: flex; align-items: center; gap: 8px; margin: 14px 2px 12px; font: var(--t-caption, 600 13px/18px var(--font)); color: var(--text-2); }
.p3-top__sub > span { flex: 1; min-width: 0; }
.p3-top__sub svg { color: var(--accent-text, var(--accent)); flex: none; }

/* ---------------------------------------------------------------- «Я» */
.p3-me { padding-top: 8px; }
.p3-menu { margin-top: 14px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 4px 0; overflow: hidden; }
.p3-me .p3-head + .p3-menu { margin-top: 20px; }
.p3-mrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; text-align: left; min-width: 0; color: var(--text); }
.p3-mrow + .p3-mrow { border-top: 1px solid var(--line); }
.p3-mrow__ic { width: 36px; height: 36px; flex: none; border-radius: 12px; display: grid; place-items: center; }
.p3-mrow b { flex: 1; min-width: 0; font: var(--t-callout, 700 14px/20px var(--font)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p3-mrow i { font-style: normal; font: var(--t-caption, 600 13px/18px var(--font)); color: var(--text-3); max-width: 42%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p3-mrow em { color: var(--text-3); display: grid; }
.p3-mrow--theme { padding-bottom: 4px; }
.p3-theme { padding: 6px 14px 12px; display: flex; }
.p3-tone--accent { background: var(--accent-soft); color: var(--accent-text, var(--accent)); }
.p3-tone--blue { background: var(--blue-soft); color: var(--blue-text, var(--blue)); }
.p3-tone--amber { background: var(--amber-soft); color: var(--amber-text, var(--amber)); }
.p3-tone--violet { background: var(--violet-soft); color: var(--violet-text, var(--violet)); }
.p3-tone--red { background: var(--red-soft); color: var(--red-text, var(--red)); }
.p3-tone--gray { background: var(--surface-2); color: var(--text-2); }

/* ---------------------------------------------------------------- уведомления (P1-15): новые — обычная карточка + точка 8 px слева */
.p3-nts { display: flex; flex-direction: column; gap: 8px; }
.p3-nt { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border-radius: 20px; background: var(--surface);
  box-shadow: var(--shadow-1); text-align: left; min-width: 0; color: var(--text); }
.p3-nt.is-new { padding-left: 24px; }
.p3-nt__dot { position: absolute; left: 9px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.p3-nt__av { position: relative; flex: none; width: 44px; height: 44px; }
.p3-nt__sys { display: grid; place-items: center; border-radius: 15px; }
.p3-nt__av--stack .av { position: absolute; width: 32px !important; height: 32px !important; border-radius: 11px !important; font-size: 13px !important; }
.p3-nt__av--stack .av:first-child { left: 0; top: 0; opacity: .9; }
.p3-nt__av--stack .av:nth-child(2) { right: 0; bottom: 0; box-shadow: 0 0 0 2px var(--surface); }
.p3-nt__k { position: absolute; right: -5px; bottom: -5px; width: 22px; height: 22px; border-radius: 8px; display: grid; place-items: center;
  border: 2px solid var(--surface); background: var(--surface-2); }
.p3-nt__av--stack .p3-nt__k { right: -7px; bottom: -7px; }
.p3-nt__k.p3-tone--accent { background: var(--accent); color: var(--accent-ink); }
.p3-nt__k.p3-tone--blue { background: var(--blue); color: #fff; }
.p3-nt__k.p3-tone--violet { background: var(--violet); color: #fff; }
.p3-nt__k.p3-tone--amber { background: var(--amber); color: #1A1206; }
.p3-nt__k.p3-tone--red { background: var(--red); color: #fff; }
.p3-nt__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font: var(--t-callout, 700 14px/20px var(--font)); font-weight: 500; }
.p3-nt__t b { font-weight: 800; }
.p3-nt__t q { quotes: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-2);
  font: var(--t-caption, 600 13px/18px var(--font)); font-weight: 500; }
.p3-nt__t > i { font-style: normal; font: var(--t-caption, 600 13px/18px var(--font)); color: var(--text-3); }
.p3-nt__th { flex: none; width: 48px; height: 48px; border-radius: 14px; object-fit: cover; background: var(--surface-2); }
.p3-nt__go { flex: none; color: var(--text-3); display: grid; }
.p3-pill--back { padding: 0 12px; }

/* ---------------------------------------------------------------- редактирование профиля (нижний лист) */
.p3-form h2 { margin: 6px 0 14px; font: var(--t-title, 700 22px/28px var(--font-head)); letter-spacing: -.03em; }
.p3-fld { display: block; margin-bottom: 12px; }
.p3-fld span { display: block; margin: 0 0 6px 2px; font: var(--t-caption, 600 13px/18px var(--font)); font-weight: 700; color: var(--text-2); }
.p3-fld input, .p3-fld textarea, .p3-fld select { width: 100%; min-height: 48px; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--surface-2); color: var(--text);
  font: var(--t-body, 500 15px/22px var(--font)); outline: none; resize: none; -webkit-appearance: none; appearance: none; }
.p3-fld input:focus, .p3-fld textarea:focus, .p3-fld select:focus { box-shadow: inset 0 0 0 2px var(--accent); }
.p3-tg { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; border-radius: 14px; background: var(--surface-2); cursor: pointer; }
.p3-tg__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.p3-tg__t b { font: var(--t-callout, 700 14px/20px var(--font)); }
.p3-tg__t i { font-style: normal; font: var(--t-caption, 600 13px/18px var(--font)); color: var(--text-3); }
.p3-tg input { position: absolute; opacity: 0; pointer-events: none; }
.p3-tg__s { flex: none; position: relative; width: 46px; height: 28px; border-radius: 14px; background: var(--surface-3); transition: background var(--dur-2, 220ms) var(--ease-in-out, ease); }
.p3-tg__s::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform var(--dur-2, 220ms) var(--ease-spring, ease); }
.p3-tg input:checked + .p3-tg__s { background: var(--accent); }
.p3-tg input:checked + .p3-tg__s::after { transform: translateX(18px); }
.p3-tg input:focus-visible + .p3-tg__s { outline: 2px solid var(--accent); outline-offset: 2px; }
.p3-err { margin: 0 0 10px; color: var(--red-text, var(--red)); font: var(--t-caption, 600 13px/18px var(--font)); font-weight: 700; }

/* ---------------------------------------------------------------- просмотр сторис источника (storyViewer; feed.css беты в v3 не подключён) */
.sv { position: fixed; z-index: 90; inset: 0; background: #000; color: #fff; touch-action: none; user-select: none; -webkit-user-select: none;
  opacity: 0; transform: scale(.94); transition: opacity var(--dur-2, 220ms) var(--ease-out, ease), transform 260ms var(--ease-out, ease); font-family: var(--font); }
.sv.in { opacity: 1; transform: none; }
.sv.out { opacity: 0; transform: translateY(40px) scale(.94); transition-timing-function: var(--ease-exit, ease-in); }
.sv-bars { position: absolute; z-index: 3; top: calc(var(--safe-top) + 10px); left: 10px; right: 10px; display: flex; gap: 4px; }
.sv-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .32); overflow: hidden; }
.sv-bars b { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; will-change: transform; }
@keyframes svbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sv-top { position: absolute; z-index: 3; top: calc(var(--safe-top) + 20px); left: 12px; right: 6px; display: flex; align-items: center; justify-content: space-between; }
.sv-brand { display: flex; align-items: center; gap: 10px; min-height: 44px; color: #fff; text-align: left; }
.sv-brand .av { display: inline-grid; place-items: center; border-radius: 11px; overflow: hidden; background: var(--av, var(--violet)); color: #fff; font-weight: 800;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.sv-brand .av img { width: 100%; height: 100%; object-fit: cover; }
.sv-brand span { display: flex; flex-direction: column; }
.sv-brand b { font: var(--t-callout, 700 14px/20px var(--font)); }
.sv-brand i { font-style: normal; font: var(--t-caption, 600 13px/18px var(--font)); opacity: .85; }
.sv-x { width: 44px; height: 44px; display: grid; place-items: center; color: #fff; }
.sv-stage, .sv-slide { position: absolute; inset: 0; }
.sv-slide { animation: p3svin 280ms var(--ease-out, ease) both; }
.sv-slide.from-r { animation-name: p3svr; }
.sv-slide.from-l { animation-name: p3svl; }
@keyframes p3svin { from { opacity: 0; } }
@keyframes p3svr { from { opacity: .3; transform: translateX(36px); } }
@keyframes p3svl { from { opacity: .3; transform: translateX(-36px); } }
.sv-bg { position: absolute; inset: 0; overflow: hidden; }
.sv-bg .fm-blur { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(28px) brightness(.6); }
.sv-bg img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.sv-bg img.contain { object-fit: contain; object-position: 50% 32%; }
.sv-bg.card { display: grid; place-items: center; padding-bottom: 30vh; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 80%, #000), #000); }
.sv-bg.card span { color: rgba(255, 255, 255, .9); display: grid; }
.sv-g { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent 22%, transparent 42%, rgba(0, 0, 0, .78) 70%, rgba(0, 0, 0, .92)); }
.sv-c { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 20px calc(22px + var(--safe-bottom)); }
.sv-cat { display: inline-flex; padding: 5px 10px; border-radius: 10px; font: var(--t-caption, 600 13px/18px var(--font)); font-weight: 800; background: color-mix(in srgb, var(--c, var(--accent)) 85%, transparent); }
.sv-cat:empty { display: none; }
.sv-c h2 { margin: 12px 0 0; font: var(--t-title, 700 22px/28px var(--font-head)); letter-spacing: -.03em; text-wrap: balance; }
.sv-c p { margin: 10px 0 0; font: var(--t-body, 500 15px/22px var(--font)); opacity: .9; }
.sv-cr { display: block; margin-top: 10px; font: var(--t-caption, 600 13px/18px var(--font)); opacity: .7; }
.sv-b { display: flex; gap: 8px; margin-top: 18px; }
.sv-b .btn { height: 50px; min-height: 50px; border-radius: var(--r-md); font: var(--t-callout, 700 14px/20px var(--font)); }
.sv-read { flex: 1; background: #fff; color: #0E1116; }
.sv .sv-lk { flex: none; width: 52px; padding: 0; background: rgba(255, 255, 255, .18); color: #fff; display: grid; place-items: center; }
.sv .sv-lk.on { background: var(--accent); color: var(--accent-ink); }
.sv .sv-lk.pop { animation: p3pop 420ms var(--ease-spring, cubic-bezier(.34, 1.36, .64, 1)); }
@keyframes p3pop { 40% { transform: scale(1.18); } }
.sv.paused .sv-c, .sv.paused .sv-top { opacity: .35; transition: opacity .2s; }

/* ---------------------------------------------------------------- узкие экраны */
@media (max-width: 350px) {
  .p3-stat b { font-size: 18px; }
  .p3-srcs { grid-template-columns: 1fr; }
}

/* ================================================================ репутация, рейтинг соседей, районы */
.p3-lvl { margin: 6px 0 2px; display: flex; }
.p3-badges[role="button"] { cursor: pointer; }
.p3-row__t b .lvl { margin-left: 6px; }

/* блок «Репутация» */
.rep { --tone: var(--text-2); position: relative; margin: 14px 0 2px; padding: 16px; border-radius: 20px; text-align: left;
  background: radial-gradient(130% 120% at 100% 0%, color-mix(in srgb, var(--tone) 16%, transparent), transparent 60%), var(--surface-2);
  transition: box-shadow .6s var(--ease-out, ease); }
.rep--t2 { --tone: var(--accent); } .rep--t3 { --tone: var(--blue); } .rep--t4 { --tone: var(--amber); }
.rep__h { display: flex; align-items: center; gap: 12px; }
.rep__lvl { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 15px; color: var(--accent-ink);
  background: var(--tone); font: var(--t-title, 700 22px/28px var(--font-head)); box-shadow: 0 6px 18px color-mix(in srgb, var(--tone) 35%, transparent); }
.rep--t1 .rep__lvl { color: var(--text); background: var(--surface-3); box-shadow: none; }
.rep__lvl span { animation: rep-pop 520ms var(--ease-spring, cubic-bezier(.34, 1.36, .64, 1)) both; }
@keyframes rep-pop { from { transform: scale(.4); opacity: 0; } }
.rep__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rep__t i { font-style: normal; font: var(--t-micro, 800 11px/14px var(--font)); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.rep__t b { margin-top: 2px; font: var(--t-headline, 600 17px/24px var(--font-head)); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rep__pts { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.rep__pts b { font: var(--t-title, 700 22px/28px var(--font-head)); letter-spacing: -.03em; }
.rep__pts i { font-style: normal; font: var(--t-caption, 600 13px/18px var(--font)); color: var(--text-3); }
/* прогресс до уровня: растёт с --ease-out, потом один блик; при перерисовке (is-still) не анимируем заново */
.rep__bar { position: relative; height: 10px; margin-top: 14px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.rep__bar span { position: absolute; inset: 0 auto 0 0; width: var(--p); min-width: 10px; border-radius: 6px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 70%, transparent), var(--tone)); animation: rep-grow 1s var(--ease-out, ease-out) .2s both; }
.rep__bar span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
  transform: translateX(-100%); animation: rep-shine 1.4s var(--ease-in-out, ease-in-out) 1.2s 1; }
@keyframes rep-grow { from { width: 0; min-width: 0; } }
@keyframes rep-shine { to { transform: translateX(100%); } }
.rep--t1 .rep__bar span { --tone: var(--accent); }
.rep__next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin-top: 10px; font: var(--t-caption, 600 13px/18px var(--font)); color: var(--text-2); }
.rep__rank { flex: none; padding: 3px 9px; border-radius: 9px; background: var(--surface); color: var(--text); font: var(--t-caption, 600 13px/18px var(--font)); font-weight: 700; }
.rep__streak { display: flex; align-items: center; gap: 6px; margin-top: 8px; font: var(--t-caption, 600 13px/18px var(--font)); font-weight: 700; color: var(--amber-text, var(--amber)); }
.rep__bd { display: flex; gap: 3px; height: 6px; margin-top: 14px; border-radius: 4px; overflow: hidden; }
.rep__seg { min-width: 4px; border-radius: 3px; background: var(--c); transform-origin: left; animation: rep-seg .7s var(--ease-out, ease-out) both; }
.rep__seg--1 { animation-delay: 80ms; } .rep__seg--2 { animation-delay: 160ms; } .rep__seg--3 { animation-delay: 240ms; }
@keyframes rep-seg { from { transform: scaleX(0); } }
.rep__seg--0 { --c: var(--accent); } .rep__seg--1 { --c: var(--blue); } .rep__seg--2 { --c: var(--violet); } .rep__seg--3 { --c: var(--amber); }
.rep__legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font: var(--t-caption, 600 13px/18px var(--font)); color: var(--text-2); }
.rep__legend b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.rep__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--c); vertical-align: 1px; }
.rep__badges { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 48px; margin-top: 12px; padding: 8px 8px 8px 10px; border-radius: 14px; background: var(--surface); color: var(--text); }
.rep__b { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--amber-soft); color: var(--amber-text, var(--amber)); }
.rep__badges em { flex: 1; text-align: left; font-style: normal; font: var(--t-callout, 700 14px/20px var(--font)); margin-left: 4px; }
.rep__badges > svg:last-child { color: var(--text-3); }
.rep.is-still .rep__bar span, .rep.is-still .rep__bar span::after, .rep.is-still .rep__lvl span, .rep.is-still .rep__seg { animation: none; }
/* новый уровень: пружинный «поп» уровня + свечение; при reduced motion — только свечение (is-glow) */
.rep.is-pop .rep__lvl { animation: rep-lvl 760ms var(--ease-spring, cubic-bezier(.34, 1.36, .64, 1)); }
@keyframes rep-lvl { 0% { transform: scale(1); } 35% { transform: scale(1.28) rotate(-6deg); box-shadow: 0 0 0 8px color-mix(in srgb, var(--tone) 25%, transparent); } 100% { transform: none; } }
.rep.is-pop, .rep.is-glow { box-shadow: 0 0 0 2px var(--tone), 0 0 32px color-mix(in srgb, var(--tone) 40%, transparent); }
.rep--sk { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.rep--sk__h { display: flex; align-items: center; gap: 12px; }
.rep--sk__h > .skeleton { width: 44px; height: 44px; border-radius: 15px; flex: none; }
.rep--sk__h > span:last-child { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.rep--sk__h > span:last-child .skeleton { height: 10px; width: 40%; border-radius: 5px; }
.rep--sk__h > span:last-child .skeleton + .skeleton { height: 14px; width: 65%; }
.rep--sk > .skeleton { height: 10px; border-radius: 6px; }

/* конфетти за уровень или бейдж (P2-5) */
.p3-cf { position: fixed; inset: 0; z-index: 120; pointer-events: none; overflow: hidden; }
.p3-cf i { position: absolute; width: 6px; height: 10px; border-radius: 2px; will-change: transform, opacity; }

/* лист бейджей */
.bdg-l { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; }
.bdg-i { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--surface-2);
  animation: p3-rise 380ms var(--ease-out, ease-out) both; animation-delay: var(--d); }
.bdg-i__ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 13px; background: var(--amber-soft); color: var(--amber-text, var(--amber));
  animation: bdg-pop 520ms var(--ease-spring, cubic-bezier(.34, 1.36, .64, 1)) both; animation-delay: calc(var(--d) + 120ms); }
@keyframes bdg-pop { from { transform: scale(.5); opacity: 0; } }
.bdg-i > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bdg-i b { font: var(--t-callout, 700 14px/20px var(--font)); }
.bdg-i i { font-style: normal; font: var(--t-caption, 600 13px/18px var(--font)); font-weight: 500; color: var(--text-2); margin-top: 2px; }
.bdg-i.is-next .bdg-i__ic { background: var(--surface-3); color: var(--text-2); }
.bdg-i em { flex: none; font-style: normal; font: var(--t-caption, 600 13px/18px var(--font)); font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums; }
.bdg-i__p { display: block; height: 6px; margin-top: 8px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.bdg-i__p span { display: block; height: 100%; width: var(--p); border-radius: 3px; background: var(--accent); animation: rep-grow .9s var(--ease-out, ease-out) both; animation-delay: calc(var(--d) + 200ms); }
.bdg-sub { margin: 6px 2px 0; font: var(--t-micro, 800 11px/14px var(--font)); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
@keyframes p3-rise { from { opacity: 0; transform: translateY(12px); } }

/* «Обсуждают»: вкладки */
.p3-top__tabs { position: sticky; top: 0; z-index: 4; margin: 0 calc(-1 * var(--pad)); padding: 8px var(--pad) 10px;
  background: linear-gradient(var(--bg) 78%, color-mix(in srgb, var(--bg) 0%, transparent)); }
.p3-top__tabs .seg__item { font: var(--t-callout, 700 14px/20px var(--font)); }
.p3-top__body { animation: p3-rise 300ms var(--ease-out, ease-out) both; }
.rt-how { position: relative; flex: none; margin-left: auto; padding: 4px 0; color: var(--accent-text, var(--accent)); font: var(--t-caption, 600 13px/18px var(--font)); font-weight: 800; white-space: nowrap; }
.rt-how::before { content: ""; position: absolute; inset: -10px -6px; }   /* хит-зона ≥44 */
.uk-slot { margin: 16px 0 4px; }
.uk-slot:empty { display: none; }

/* медаль места */
.rt-medal { position: absolute; right: -5px; bottom: -5px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; display: grid; place-items: center;
  font: var(--t-micro, 800 11px/14px var(--font)); font-style: normal; color: #1A1206; background: #C9CED6; box-shadow: 0 0 0 2.5px var(--surface); }
.rt-medal--1, .rt-pod__c--1 .rt-medal { background: linear-gradient(135deg, #FFE08A, #F5B42A); }
.rt-medal--2, .rt-pod__c--2 .rt-medal { background: linear-gradient(135deg, #EEF1F5, #AEB6C2); }
.rt-medal--3, .rt-pod__c--3 .rt-medal { background: linear-gradient(135deg, #F6C9A0, #C98552); }

/* пьедестал (P2): ступени растут 3 → 2 → 1 пружиной, аватары «падают» на них, у первого — корона */
.rt-pod { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr); align-items: end; gap: 8px; margin: 18px 0 14px; }
.rt-pod__c { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 0; color: var(--text); }
.rt-pod__av { position: relative; margin-bottom: 4px; animation: pod-drop 620ms var(--ease-spring, cubic-bezier(.34, 1.36, .64, 1)) both; animation-delay: calc(var(--d) + 300ms); }
.rt-pod__c > b, .rt-pod__c > .lvl, .rt-pod__pts { animation: p3-fade 360ms var(--ease-out, ease-out) both; animation-delay: calc(var(--d) + 420ms); }
@keyframes pod-drop { from { opacity: 0; transform: translateY(-22px) scale(.6); } }
.rt-pod__av .av { border-radius: 34% !important; box-shadow: 0 0 0 3px var(--bg); }
.rt-pod__c--1 .rt-pod__av .av { box-shadow: 0 0 0 3px #F5B42A, 0 10px 26px rgba(245, 180, 42, .3); }
.rt-pod__crown { position: absolute; left: 50%; top: -22px; z-index: 1; margin-left: -11px; color: #F5B42A; display: grid; filter: drop-shadow(0 2px 4px rgba(245, 180, 42, .45));
  animation: pod-crown 700ms var(--ease-spring, cubic-bezier(.34, 1.36, .64, 1)) both; animation-delay: calc(var(--d) + 640ms); }
@keyframes pod-crown { from { opacity: 0; transform: translateY(8px) rotate(-18deg) scale(.4); } }
.rt-pod__c b { font: var(--t-callout, 700 14px/20px var(--font)); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-pod__c .lvl { margin-left: 0; }
.rt-pod__pts { font: var(--t-headline, 600 17px/24px var(--font-head)); font-weight: 700; letter-spacing: -.02em; color: var(--accent-text, var(--accent)); }
.rt-pod__base { position: relative; overflow: hidden; width: 100%; margin-top: 6px; border-radius: 16px 16px 6px 6px; display: grid; place-items: start center; padding-top: 8px;
  background: linear-gradient(var(--surface), var(--surface-2)); box-shadow: var(--shadow-1); font: var(--t-title, 700 22px/28px var(--font-head)); color: var(--text-3);
  transform-origin: bottom; animation: pod-grow 620ms var(--ease-spring, cubic-bezier(.34, 1.36, .64, 1)) both; animation-delay: var(--d); }
.rt-pod__c--1 .rt-pod__base { height: 76px; color: #C98A0E; background: linear-gradient(color-mix(in srgb, #F5B42A 22%, var(--surface)), var(--surface-2)); }
.rt-pod__c--1 .rt-pod__base::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-120%); animation: rep-shine 1.1s var(--ease-in-out, ease-in-out) both; animation-delay: calc(var(--d) + 800ms); }
:root:not([data-theme="light"]) .rt-pod__c--1 .rt-pod__base { color: #F5B42A; }
.rt-pod__c--2 .rt-pod__base { height: 56px; }
.rt-pod__c--3 .rt-pod__base { height: 42px; }
@keyframes pod-grow { from { transform: scaleY(0); } }
.rt-pod--sk { align-items: end; }
.rt-pod__skc { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rt-pod__skc > .skeleton:first-child { border-radius: 34%; }
.rt-pod__skt { width: 64%; height: 12px; border-radius: 6px; }
.rt-pod__skb { width: 100%; border-radius: 16px 16px 6px 6px; }
.rt-pod__skb--1 { height: 76px; } .rt-pod__skb--2 { height: 56px; } .rt-pod__skb--3 { height: 42px; }

/* список и «моё место» */
.rt-list { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.rt-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 60px; padding: 10px 12px; text-align: left; color: var(--text); }
.rt-row + .rt-row { border-top: 1px solid var(--line); }
.rt-row .av { border-radius: 34% !important; }
.rt-rank { min-width: 24px; flex: none; text-align: center; font: var(--t-callout, 700 14px/20px var(--font)); font-family: var(--font-head); color: var(--text-3); font-variant-numeric: tabular-nums; }
.rt-row__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rt-row__t b { display: flex; align-items: center; font: var(--t-callout, 700 14px/20px var(--font)); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-row__t i { font-style: normal; font: var(--t-caption, 600 13px/18px var(--font)); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-bd { display: flex; gap: 3px; flex: none; }
.rt-bd i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: var(--amber-soft); color: var(--amber-text, var(--amber)); }
.rt-pts { flex: none; display: flex; flex-direction: column; align-items: flex-end; min-width: 44px; }
.rt-pts b { font: var(--t-headline, 600 17px/24px var(--font-head)); font-weight: 700; letter-spacing: -.02em; }
.rt-pts i { font-style: normal; font: var(--t-caption, 600 13px/18px var(--font)); color: var(--text-3); }
.rt-row.is-me { background: var(--accent-soft); }
.rt-row.is-me .rt-rank, .rt-row.is-me .rt-pts b { color: var(--accent-text, var(--accent)); }
.rt-me { position: sticky; bottom: calc(var(--tab) + 20px + var(--safe-bottom)); z-index: 3; margin-top: 12px; border-radius: 20px; overflow: hidden;
  background: var(--bar); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--shadow-2), inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); animation: me-up 520ms var(--ease-spring, cubic-bezier(.34, 1.36, .64, 1)) .25s both; }
@keyframes me-up { from { opacity: 0; transform: translateY(30px); } }
.rt-me .rt-row { background: transparent; }
.rt-me__hint { display: block; padding: 0 12px 10px 46px; margin-top: -4px; font: var(--t-caption, 600 13px/18px var(--font)); font-weight: 700; color: var(--accent-text, var(--accent)); }
.rt-me__empty { display: flex; align-items: center; gap: 10px; padding: 14px; font: var(--t-caption, 600 13px/18px var(--font)); color: var(--text-2); }
.rt-me__empty svg { color: var(--amber-text, var(--amber)); flex: none; }
@media (max-width: 370px) { .rt-bd { display: none; } }
.rt-howl { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
.rt-howi { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--surface-2); }
.rt-howi > span { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text, var(--accent)); }
.rt-howi b { flex: 1; font: var(--t-callout, 700 14px/20px var(--font)); font-weight: 600; }
.rt-howi em { font-style: normal; font: var(--t-callout, 700 14px/20px var(--font)); font-family: var(--font-head); color: var(--accent-text, var(--accent)); }

/* районы */
.ds-list { display: flex; flex-direction: column; gap: 8px; }
.ds-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-1);
  animation: p3-rise 400ms var(--ease-out, ease-out) both; animation-delay: var(--d); }
.ds-rank { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--surface-2);
  font: var(--t-caption, 600 13px/18px var(--font)); font-family: var(--font-head); font-weight: 700; color: var(--text-2); }
.ds-row--top .ds-rank { background: var(--amber-soft); color: var(--amber-text, var(--amber)); }
.ds-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ds-t b { display: flex; align-items: center; gap: 6px; font: var(--t-callout, 700 14px/20px var(--font)); }
.ds-t b em { font-style: normal; font: var(--t-micro, 800 11px/14px var(--font)); padding: 2px 7px; border-radius: 7px; background: var(--accent); color: var(--accent-ink); }
.ds-t i { font-style: normal; font: var(--t-caption, 600 13px/18px var(--font)); color: var(--text-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-bar { display: block; height: 6px; margin-top: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.ds-bar span { display: block; height: 100%; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, var(--blue), var(--accent));
  animation: rep-grow .9s var(--ease-out, ease-out) both; animation-delay: calc(var(--d) + 120ms); }
.ds-row.is-me { box-shadow: inset 0 0 0 1.5px var(--accent); }
.ds-pts { flex: none; display: flex; flex-direction: column; align-items: flex-end; }
.ds-pts b { font: var(--t-headline, 600 17px/24px var(--font-head)); font-weight: 700; letter-spacing: -.02em; }
.ds-pts i { display: inline-flex; align-items: center; gap: 2px; font-style: normal; font: var(--t-caption, 600 13px/18px var(--font)); color: var(--text-3); }
.ds-pts i.up { color: var(--accent-text, var(--accent)); } .ds-pts i.down { color: var(--red-text, var(--red)); }

/* ---------------------------------------------------------------- reduced motion: без сдвигов, частиц и пружин; подпись «Долго грузится» остаётся */
@media (prefers-reduced-motion: reduce) {
  .sv, .sv-slide, .p3-tg__s, .p3-tg__s::after { animation: none !important; transition: none !important; }
  .rt-pod__av, .rt-pod__base, .rt-pod__base::after, .rt-pod__crown, .rt-pod__c > b, .rt-pod__c > .lvl, .rt-pod__pts, .rt-me, .ds-row, .ds-bar span,
  .rep__bar span, .rep__bar span::after, .rep__seg, .bdg-i, .bdg-i__ic, .bdg-i__p span, .p3-top__body, .rep__lvl span, .rep.is-pop .rep__lvl,
  .p3-empty--ill .p3-ill, .p3-empty--ill .p3-ill .a, .tk--go .tk__s { animation: none !important; }
  .p3-fade { animation-duration: 150ms; }
  body[data-tab="me"] .hdr-title, .p3-ttl .s-title { transform: none !important; }
}