/* Профили, уровни, достижения, подписки, лента и каталог людей.
 * Только переменные темы из nb.css — обе темы (светлая/тёмная) получаются сами. */

/* ------------------------------------------------------------ аватары-заглушки */
.nb-avatar.nb-ava-ph { font-family: var(--font-sans); font-weight: 750; letter-spacing: 0; line-height: 1; }
.nb-avatar.nb-ava-c0 { background: color-mix(in srgb, var(--success) 22%, var(--card-solid)); color: var(--success); }
.nb-avatar.nb-ava-c1 { background: color-mix(in srgb, var(--translator) 22%, var(--card-solid)); color: var(--translator); }
.nb-avatar.nb-ava-c2 { background: color-mix(in srgb, var(--rating) 26%, var(--card-solid)); color: var(--rating-text); }
.nb-avatar.nb-ava-c3 { background: color-mix(in srgb, var(--link) 22%, var(--card-solid)); color: var(--link); }
.nb-avatar.nb-ava-c4 { background: color-mix(in srgb, var(--destructive) 18%, var(--card-solid)); color: var(--destructive); }
.nb-avatar.nb-ava-c5 { background: color-mix(in srgb, var(--warning) 22%, var(--card-solid)); color: var(--warning); }
img.nb-avatar { background: var(--secondary); }
.nb-online-dot { position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px; border-radius: 999px; background: var(--success); box-shadow: 0 0 0 2px var(--card-solid); }

/* ------------------------------------------------------------ чип уровня */
:where(.nb-level) { --lv: var(--muted-foreground); }
span.nb-level { gap: 6px; font-size: 12px; font-weight: 600; color: var(--foreground); vertical-align: middle; white-space: nowrap; }
.nb-level .nb-lvl-num {
	display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: var(--radius-sm);
	background: color-mix(in oklab, var(--lv) 18%, transparent); color: var(--lv); font-weight: 800; font-size: 12px; font-variant-numeric: tabular-nums;
	box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--lv) 35%, transparent);
}
.nb-level .nb-lvl-title { color: var(--lv); }
span.nb-level .nb-progress { width: 140px; }
.nb-level .nb-progress > i { background: var(--lv); }
.nb-level .nb-lvl-exp { color: var(--muted-foreground); font-weight: 550; font-variant-numeric: tabular-nums; }
.nb-level.is-compact .nb-lvl-num { min-width: 20px; height: 18px; font-size: 11px; border-radius: var(--radius-sm); padding: 0 5px; }
.nb-lvl-t0 { --lv: var(--muted-foreground); }
.nb-lvl-t1 { --lv: var(--success); }
.nb-lvl-t2 { --lv: var(--translator); }
.nb-lvl-t3 { --lv: var(--link); }
.nb-lvl-t4 { --lv: var(--warning); }
.nb-lvl-t5 { --lv: var(--rating-text); }
.nb-lvl-t6 { --lv: var(--destructive); }

/* ------------------------------------------------------------ шапка профиля */
.nb-card.nb-profile-card { padding: 26px 26px 0; margin-bottom: 26px; overflow: hidden; }
.nb-profile-card .nb-profile-head { align-items: flex-start; }
.nb-profile-ava { position: relative; flex: none; line-height: 0; }
.nb-profile-ava > a { position: relative; display: block; border-radius: var(--radius-pill); }
.nb-profile-ava .nb-avatar-lg { width: 112px !important; height: 112px !important; font-size: 46px !important; box-shadow: 0 0 0 4px var(--card-solid), var(--elev-2); }
.nb-profile-ava .nb-online-dot { width: 18px; height: 18px; right: 6px; bottom: 6px; box-shadow: 0 0 0 3px var(--card-solid); }
.nb-ava-edit { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--primary); color: var(--primary-foreground); box-shadow: var(--elev-2); opacity: 0; transition: opacity .15s; }
.nb-profile-ava > a:hover .nb-ava-edit, .nb-profile-ava > a:focus-visible .nb-ava-edit { opacity: 1; }
.nb-profile-main { flex: 1 1 340px; min-width: 0; }
.nb-profile-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nb-profile-name h1 { margin: 0; font-size: 30px; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.nb-profile-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 14px; color: var(--muted-foreground); font-size: 12.5px; }
.nb-profile-meta span { display: inline-flex; align-items: center; gap: 5px; }
.nb-profile-meta .is-online { color: var(--success); font-weight: 600; }
.nb-profile-level { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nb-profile-level .nb-level .nb-lvl-num { min-width: 28px; height: 28px; font-size: 14px; border-radius: var(--radius); }
.nb-profile-level .nb-level .nb-lvl-title { font-size: 14px; }
.nb-profile-level .nb-level .nb-progress { width: 180px; height: 7px; }
.nb-lvl-next { font-size: 12px; }
.nb-profile-bio { margin: 14px 0 0; max-width: 70ch; color: var(--muted-foreground); font-size: 14.5px; line-height: 1.65; }
.nb-profile-badges { margin-top: 16px; align-items: center; }
.nb-profile-badges .nb-badge { color: var(--foreground); }
.nb-profile-badges .nb-badge:hover { text-decoration: none; border-color: var(--ring); }
.nb-badge-more { font-size: 12.5px; color: var(--muted-foreground); display: inline-flex; align-items: center; gap: 2px; }
.nb-profile-actions { display: flex; flex-direction: column; gap: 8px; flex: none; min-width: 168px; }
.nb-profile-actions > * { width: 100%; }
.nb-profile-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 22px; padding: 16px 0; border-top: 1px solid var(--border); }
.nb-profile-stats a { display: block; color: var(--foreground); border-radius: var(--radius); padding: 4px 6px; margin: -4px -6px; }
.nb-profile-stats a:hover { background: var(--muted); text-decoration: none; }
.nb-profile-stats b { display: block; font-size: 22px; font-weight: 750; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.nb-profile-stats span { display: block; margin-top: 3px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-foreground); }
.nb-profile-stats a.negative b { color: var(--destructive); }
.nb-profile-card .nb-profile-tabs { margin: 0 -26px; padding: 0 18px; border-top: 1px solid var(--border); border-bottom: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nb-profile-card .nb-profile-tabs::-webkit-scrollbar { display: none; }
.nb-profile-card .nb-profile-tabs > li { margin-bottom: 0; flex: none; }
.nb-profile-card .nb-profile-tabs > li > a { padding: 13px 12px 12px; white-space: nowrap; }
.nb-tab-n { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 3px; border-radius: var(--radius-pill); background: var(--secondary); color: var(--muted-foreground); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.nb-profile-tabs > .active .nb-tab-n { background: var(--primary); color: var(--primary-foreground); }
@media (max-width: 979px) {
	.nb-profile-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.nb-card.nb-profile-card { padding: 18px 16px 0; }
	.nb-profile-card .nb-profile-tabs { margin: 0 -16px; padding: 0 8px; }
	.nb-profile-ava .nb-avatar-lg { width: 84px !important; height: 84px !important; font-size: 34px !important; }
	.nb-profile-name h1 { font-size: 24px; }
	.nb-profile-actions { flex-direction: row; flex-wrap: wrap; min-width: 0; width: 100%; }
	.nb-profile-actions > * { width: auto; flex: 1 1 auto; }
	.nb-profile-level .nb-level .nb-progress { width: 120px; }
}

/* подписка */
.nb-follow-btn span { align-items: center; gap: 6px; }
.nb-follow-btn .st-off { display: inline-flex; }
.nb-follow-btn .st-on, .nb-follow-btn .st-un { display: none; }
.nb-follow-btn.is-following .st-off { display: none; }
.nb-follow-btn.is-following .st-on { display: inline-flex; }
.nb-follow-btn.is-following:hover .st-on, .nb-follow-btn.is-following:focus-visible .st-on { display: none; }
.nb-follow-btn.is-following:hover .st-un, .nb-follow-btn.is-following:focus-visible .st-un { display: inline-flex; }
.nb-btn.nb-follow-btn.is-following:hover { color: var(--destructive); border-color: color-mix(in oklab, var(--destructive) 40%, transparent); }

/* ------------------------------------------------------------ тело профиля */
.nb-profile-body .nb-section-head { margin-top: 4px; }
.nb-profile-body .nb-section-head h2 { font-size: 20px; }
.nb-profile-content > h2:first-child, .nb-profile-content > .nb-section-head:first-child h2 { margin-top: 0; }
.nb-subtabs { margin: 0 0 18px; gap: 6px; }
.nb-nowrap { white-space: nowrap; }
.nb-user-books .nb-user-book { font-weight: 600; }
.nb-user-book-m { display: inline-flex; gap: 4px; margin-left: 6px; flex-wrap: wrap; vertical-align: middle; }
.nb-side-list { list-style: none; margin: 0 !important; padding: 0; display: grid; gap: 2px; }
.nb-side-list a { display: block; padding: 6px 10px; border-radius: var(--radius); color: var(--foreground); }
.nb-side-list a:hover { background: var(--muted); text-decoration: none; }
.nb-side-list .active a { background: var(--primary); color: var(--primary-foreground); }
.nb-side-links { margin-top: 12px; gap: 6px 14px; font-size: 12.5px; }
.nb-side-links a { display: inline-flex; align-items: center; gap: 5px; }
.nb-ava-stack { display: flex; flex-wrap: wrap; gap: 6px; }
.nb-ava-stack a { line-height: 0; border-radius: var(--radius-pill); }
.nb-ava-stack a:hover .nb-avatar { box-shadow: 0 0 0 2px var(--ring); }
dl.nb-personal { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 10px 18px; margin: 0; }
dl.nb-personal dt { color: var(--muted-foreground); font-weight: 600; font-size: 13px; }
dl.nb-personal dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { dl.nb-personal { grid-template-columns: 1fr; gap: 2px; } dl.nb-personal dd { margin-bottom: 10px; } }

/* карма */
.nb-karma-form { margin-bottom: 18px; }
.nb-karma-form form { margin: 0; }
.nb-karma-grid { display: grid; grid-template-columns: 200px 1fr; gap: 18px; margin-bottom: 14px; }
.nb-karma-grid h4 { margin: 0 0 8px; }
@media (max-width: 700px) { .nb-karma-grid { grid-template-columns: 1fr; } }
.marks-table > .nb-card.nb-card { margin-top: 0; }
.marks-table .plus h3 { color: var(--success); }
.marks-table .minus h3 { color: var(--destructive); }
.nb-karma-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

/* версии перевода пользователя */
.nb-card.nb-user-trs { padding: 0; overflow: hidden; }
.nb-user-trs .verse { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 16px 20px; border-top: 1px solid var(--border); }
.nb-user-trs .verse:first-child { border-top: 0; }
.nb-user-trs .verse:hover { background: var(--muted); }
.nb-user-trs .orig { position: relative; padding-right: 28px; color: var(--muted-foreground); }
.nb-user-trs .orig .go { position: absolute; right: 0; top: 0; color: var(--muted-foreground); }
.nb-user-trs .tr .rate { display: inline-block; min-width: 22px; padding: 0 6px; margin-right: 6px; text-align: center; font-size: 12px; font-weight: 700; font-style: normal; }
.nb-user-trs .tr .rate.negative { color: var(--destructive); }
@media (max-width: 700px) { .nb-user-trs .verse { grid-template-columns: 1fr; gap: 8px; } }

/* ------------------------------------------------------------ достижения */
.nb-level-card { display: flex; gap: 24px; align-items: center; margin-bottom: 26px; }
.nb-level-big {
	--p: 0; flex: none; width: 124px; height: 124px; border-radius: var(--radius-pill); display: grid; place-content: center; text-align: center;
	background:
		radial-gradient(closest-side, var(--card-solid) 80%, transparent 81%),
		conic-gradient(var(--lv) calc(var(--p) * 1%), color-mix(in oklab, var(--lv) 14%, transparent) 0);
}
.nb-level-big b { display: block; font-size: 40px; line-height: 1; font-weight: 800; color: var(--lv); font-variant-numeric: tabular-nums; }
.nb-level-big span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); }
.nb-level-info { flex: 1; min-width: 0; }
.nb-level-info h2 { margin: 0 0 10px; font-size: 24px; }
.nb-progress.nb-progress-lg { height: 9px; }
.nb-level-nums { margin: 8px 0 12px; font-size: 13px; }
.nb-ladder { display: flex; flex-wrap: wrap; gap: 6px; }
.nb-ladder .nb-chip { background: transparent; box-shadow: inset 0 0 0 1px var(--border); color: var(--muted-foreground); font-weight: 550; }
.nb-ladder .nb-chip.is-reached { color: var(--foreground); background: var(--secondary); box-shadow: none; }
.nb-ladder .nb-chip.is-active { background: var(--primary); color: var(--primary-foreground); }
@media (max-width: 600px) { .nb-level-card { flex-direction: column; text-align: center; } .nb-ladder { justify-content: center; } }
.nb-exp-table td:not(:first-child), .nb-exp-table th:not(:first-child) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nb-exp-table tr.is-zero td { color: var(--muted-foreground); }
.nb-exp-table tfoot td { border-top: 1px solid var(--border); font-weight: 700; }

.nb-badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
:where(.nb-badge-card) { --tc: var(--muted-foreground); }
.nb-badge.nb-badge-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: var(--radius-lg); font-weight: 400; font-size: 13px; background: var(--card); }
.nb-badge.nb-badge-card .ico { width: 44px; height: 44px; font-size: 24px; flex: none; border-radius: 14px; background: color-mix(in oklab, var(--tc) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tc) 40%, transparent); }
.nb-badge-card .body { min-width: 0; flex: 1; }
.nb-badge-card .t { font-weight: 700; font-size: 14px; line-height: 1.3; }
.nb-badge-card .d { color: var(--muted-foreground); font-size: 12.5px; margin: 2px 0 8px; line-height: 1.4; }
.nb-badge-card .p { color: var(--muted-foreground); font-size: 11.5px; margin-top: 5px; font-variant-numeric: tabular-nums; }
.nb-badge-card .p.is-done { color: var(--success); display: flex; align-items: center; gap: 4px; font-weight: 600; }
.nb-badge-card .nb-progress > i { background: var(--tc); }
.nb-badge.nb-badge-card.locked { opacity: 1; }
.nb-badge-card.locked .ico { filter: grayscale(1); opacity: .5; }
.nb-badge-card.locked .t { color: var(--muted-foreground); }
.nb-badge-card.locked .nb-progress > i { background: var(--muted-foreground); }
.nb-badge-card.is-secret { border-style: dashed; }
.nb-tier { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; background: color-mix(in oklab, var(--tc) 18%, transparent); color: var(--tc); }
.nb-tier-pips { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.nb-tier-pips .pip { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-pill); color: var(--muted-foreground); box-shadow: inset 0 0 0 1px var(--border); font-variant-numeric: tabular-nums; }
.nb-tier-pips .pip.on { color: var(--tc-pip); background: color-mix(in oklab, var(--tc-pip) 16%, transparent); box-shadow: none; }
/* ступени: бронза / серебро / золото — из цветов темы */
.tier-bronze { --tc: color-mix(in oklab, var(--warning) 55%, var(--destructive)); --tc-pip: color-mix(in oklab, var(--warning) 55%, var(--destructive)); }
.tier-silver { --tc: var(--translator); --tc-pip: var(--translator); }
.tier-gold { --tc: var(--rating-text); --tc-pip: var(--rating-text); }
.nb-badges .nb-badge.tier-bronze .ico, .nb-badges .nb-badge.tier-silver .ico, .nb-badges .nb-badge.tier-gold .ico { background: color-mix(in oklab, var(--tc) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tc) 45%, transparent); }

/* ------------------------------------------------------------ мини-карточки, люди */
.nb-mini-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border); min-width: 0; }
.nb-stack .nb-mini-card { padding: 8px 0; background: none; border: 0; border-radius: 0; }
.nb-stack .nb-mini-card + .nb-mini-card { border-top: 1px solid var(--border); }
.nb-mini-ava { position: relative; flex: none; line-height: 0; border-radius: var(--radius-pill); }
.nb-mini-ava .nb-online-dot { width: 10px; height: 10px; right: 0; bottom: 0; }
.nb-mini-card .body { flex: 1; min-width: 0; }
.nb-mini-card .t { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nb-mini-card .t .user { font-weight: 650; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-mini-card .m { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px; font-size: 12px; color: var(--muted-foreground); }
.nb-mini-card .m .nb-rating { font-weight: 650; }
.nb-mini-card .nb-follow-btn { flex: none; }
.nb-people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 18px; }
.nb-people-grid.is-wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.nb-people-search { position: relative; display: flex; align-items: center; gap: 8px; flex: 0 1 380px; }
.nb-people-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); pointer-events: none; }
.nb-people-search input[type="search"] { flex: 1; min-width: 0; height: 36px; margin: 0; padding-left: 36px; border-radius: var(--radius-pill); }
.nb-go-form { flex-wrap: nowrap; }
.nb-go-form input { flex: 1; min-width: 0; margin: 0; height: 32px; }

.nb-rating-table td { vertical-align: middle; }
.nb-rating-table td:not(.c-user), .nb-rating-table th:not(.c-user) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.nb-rating-table .c-rank { width: 36px; text-align: center; padding-right: 0; }
.nb-rating-table .c-user { width: 100%; }
.nb-rating-table .c-follow { text-align: right; }
.nb-rating-table th a { color: var(--muted-foreground); }
.nb-rating-table th a.is-sorted { color: var(--foreground); }
.nb-rating-user { display: inline-flex; align-items: center; gap: 10px; margin-right: 8px; color: var(--foreground); font-weight: 650; vertical-align: middle; }
.nb-rating-user:hover { text-decoration: none; }
.nb-rating-user:hover .l { text-decoration: underline; text-underline-offset: 3px; }
.nb-rating-table .nb-rank { font-size: 15px; width: auto; }
.nb-dry-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nb-dry-stats b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--foreground); }
.nb-dry-stats span { font-size: 11.5px; color: var(--muted-foreground); }

/* ------------------------------------------------------------ лента */
.nb-card.nb-feed { padding: 6px; }
.nb-feed .nb-feed-item { align-items: flex-start; }
.nb-feed-item .ava { flex: none; line-height: 0; border-radius: var(--radius-pill); }
.nb-feed-item .body { flex: 1; min-width: 0; }
.nb-feed-item .h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nb-feed-item .h .user { font-weight: 650; color: var(--foreground); }
.nb-feed-item .h .act { color: var(--muted-foreground); font-size: 13px; }
.nb-feed-item .c { margin-top: 3px; font-size: 14px; }
.nb-feed-item .c .pt { font-weight: 650; color: var(--foreground); }
.nb-feed-item .c .bk { color: var(--link); }
.nb-feed-item .x { margin: 6px 0 0; color: var(--muted-foreground); font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nb-feed-item .m { margin-top: 6px; font-size: 12px; color: var(--muted-foreground); }
.nb-feed-item .cv { flex: none; width: 46px; }
.nb-feed-item .cv .nb-cover { border-radius: var(--radius-sm); }
.nb-feed-item .cv .nb-cover .ph { font-size: 18px; }
.nb-feed-item .cv .nb-cover .ph small { display: none; }

/* счётчик внутри цифры статистики */
.nb-profile-stats b span { display: inline; margin: 0; font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }

/* ============================================================ присутствие: «В сети» / «Был(а) в сети …» */
.nb-presence { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--radius-pill); background: var(--muted); color: var(--muted-foreground); font-size: 12px; font-weight: 550; white-space: nowrap; line-height: 1; }
.nb-presence svg { flex: none; }
.nb-presence time { color: inherit; }
.nb-presence.is-online { background: color-mix(in oklab, var(--success) 14%, transparent); color: var(--success); font-weight: 650; }
.nb-presence-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--success); box-shadow: 0 0 0 3px color-mix(in oklab, var(--success) 22%, transparent); flex: none; }
.nb-presence.is-compact { height: auto; padding: 0; background: none; font-size: inherit; font-weight: inherit; gap: 5px; }
.nb-presence.is-compact .nb-presence-dot { width: 7px; height: 7px; box-shadow: none; }
.nb-profile-name .nb-presence { align-self: center; }
.nb-profile-login { font-weight: 600; color: var(--muted-foreground); }

/* ============================================================ секции обзора / статистики */
.nb-pf-sec { margin-bottom: 28px; min-width: 0; }
.nb-pf-sec > .nb-section-head { flex-wrap: wrap; }
.nb-pf-sec > .nb-section-head > span { font-size: 12.5px; }
.nb-pf-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
@media (max-width: 760px) { .nb-pf-2col { grid-template-columns: minmax(0, 1fr); } }

/* плитки итогов */
.nb-stat-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nb-stat-tiles.is-all { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nb-stat-tile { padding: 14px 16px 13px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); min-width: 0; }
.nb-stat-tile b { display: block; font-size: 24px; font-weight: 750; line-height: 1.15; letter-spacing: -0.02em; color: var(--foreground); overflow-wrap: anywhere; }
.nb-stat-tile span { display: block; margin-top: 4px; font-size: 12px; color: var(--muted-foreground); line-height: 1.35; }
.nb-stat-tile small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted-foreground); }
.nb-stat-tile.is-negative b { color: var(--destructive); }
.nb-stat-note { margin: 10px 0 0; font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
@media (max-width: 979px) { .nb-stat-tiles.is-all { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .nb-stat-tiles, .nb-stat-tiles.is-all { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============================================================ карта активности (недели × дни) */
.nb-card.nb-heat-card { padding: 18px 20px 16px; }
.nb-heat { --cell: 11px; --gap: 3px; min-width: 0; }
.nb-heat-scroll { overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.nb-heat-wrap { display: grid; grid-template-columns: auto max-content; grid-template-rows: auto auto; column-gap: 6px; row-gap: 4px; width: max-content; margin: 0 auto; }
.nb-heat-months { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(var(--weeks), var(--cell)); column-gap: var(--gap); height: 14px; font-size: 10.5px; color: var(--muted-foreground); }
.nb-heat-months span { white-space: nowrap; overflow: visible; }
.nb-heat-dows { grid-column: 1; grid-row: 2; display: grid; grid-template-rows: repeat(7, var(--cell)); row-gap: var(--gap); font-size: 10px; color: var(--muted-foreground); }
.nb-heat-dows span { line-height: var(--cell); white-space: nowrap; }
.nb-heat-grid { grid-column: 2; grid-row: 2; display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, var(--cell)); grid-auto-columns: var(--cell); gap: var(--gap); }
.nb-heat .c { display: block; width: var(--cell); height: var(--cell); border-radius: var(--radius-sm); background: var(--muted); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 5%, transparent); }
.nb-heat .c.l1 { background: color-mix(in oklab, var(--success) 32%, var(--card-solid)); }
.nb-heat .c.l2 { background: color-mix(in oklab, var(--success) 55%, var(--card-solid)); }
.nb-heat .c.l3 { background: color-mix(in oklab, var(--success) 78%, var(--card-solid)); }
.nb-heat .c.l4 { background: var(--success); }
.nb-heat .c.l1, .nb-heat .c.l2, .nb-heat .c.l3, .nb-heat .c.l4 { box-shadow: none; }
.nb-heat .c.is-out { visibility: hidden; }
.nb-heat-grid .c { cursor: default; outline-offset: 1px; }
.nb-heat-grid .c:focus-visible { outline: 2px solid var(--ring); }
.nb-heat-grid .c.is-hover { box-shadow: 0 0 0 1px var(--ring); }
.nb-heat-grid .c.is-today { box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 45%, transparent); }
.nb-heat-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-top: 12px; }
.nb-heat-sum { margin: 0; font-size: 13px; display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; }
.nb-heat-sum b { font-weight: 650; }
.nb-heat-sum span { color: var(--muted-foreground); font-size: 12.5px; }
.nb-heat-legend { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--muted-foreground); }
.nb-heat-legend span { margin: 0 4px; }
.nb-heat-legend .c { display: inline-block; }
.nb-heat-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }
.nb-heat-facts dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); }
.nb-heat-facts dd { margin: 3px 0 0; font-size: 14px; font-weight: 650; }
.nb-heat-facts dd .nb-muted { font-weight: 500; }
.nb-heat-types { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; }
@media (max-width: 700px) { .nb-heat-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nb-card.nb-heat-card { padding: 14px; } }

/* всплывающая подсказка карты и графика */
.nb-tip { position: fixed; z-index: 1000; display: none; max-width: 280px; padding: 7px 10px; border-radius: var(--radius); background: var(--popover); color: var(--foreground); border: 1px solid var(--border); box-shadow: var(--elev-3); font-size: 12px; line-height: 1.45; pointer-events: none; }
.nb-tip b { display: block; font-weight: 650; }
.nb-tip span { display: block; color: var(--muted-foreground); }

/* ============================================================ столбцы по месяцам */
.nb-card.nb-bars { margin: 0; padding: 18px 20px 14px; }
.nb-bars-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; padding-top: 18px; }
.nb-bars-axis { position: relative; height: 150px; min-width: 24px; font-size: 10.5px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; text-align: right; }
.nb-bars-axis span { position: absolute; right: 0; transform: translateY(50%); line-height: 1; }
.nb-bars-cols { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); height: 150px; border-bottom: 1px solid var(--border); }
.nb-bars-grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--border); opacity: .6; pointer-events: none; }
.nb-bars-col { position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.nb-bars-hit { position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: center; cursor: default; border-radius: var(--radius-sm); }
.nb-bars-hit:hover, .nb-bars-hit.is-hover { background: var(--muted); }
.nb-bars-bar { display: block; width: min(24px, 62%); background: var(--translator); border-radius: var(--radius) var(--radius) 0 0; }
.nb-bars-col.is-current .nb-bars-bar { background: color-mix(in oklab, var(--translator) 70%, var(--card-solid)); }
.nb-bars-hit.is-hover .nb-bars-bar, .nb-bars-hit:focus-visible .nb-bars-bar { background: color-mix(in oklab, var(--translator) 85%, var(--foreground)); }
.nb-bars-val { position: absolute; left: 0; right: 0; text-align: center; font-style: normal; font-size: 11px; font-weight: 650; color: var(--foreground); font-variant-numeric: tabular-nums; pointer-events: none; }
.nb-bars-lab { position: absolute; top: calc(100% + 6px); left: 0; right: 0; text-align: center; font-size: 10.5px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.nb-bars-plot + .nb-bars-table { margin-top: 30px; }
.nb-bars-empty { margin: 4px 0 14px; }
.nb-bars-table summary { cursor: pointer; font-size: 12.5px; color: var(--muted-foreground); }
.nb-bars-table summary:hover { color: var(--foreground); }
.nb-bars-table .nb-table-wrap { margin-top: 10px; max-width: 360px; }
.nb-bars-table td:last-child, .nb-bars-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .nb-bars-lab { font-size: 9.5px; } .nb-card.nb-bars { padding: 14px 12px; } }

/* ============================================================ разбивка по тайтлам, пары, сообщество */
.nb-pf-tbl td, .nb-pf-tbl th { vertical-align: middle; }
.nb-pf-tbl .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nb-pf-tbl .c-title { min-width: 150px; }
.nb-pf-tbl th.c-title, .nb-pf-tbl th.c-roles { text-align: left; }
.nb-pf-tbl th, .nb-pf-tbl td { padding-left: 10px; padding-right: 10px; }
.nb-pf-tbl .c-title .t { display: block; font-weight: 650; color: var(--foreground); overflow-wrap: anywhere; }
.nb-pf-tbl .c-title small { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 11.5px; }
.nb-pf-tbl .c-roles { white-space: normal; min-width: 0; }
.nb-pf-tbl .c-roles .nb-chip { margin: 1px 2px 1px 0; }
.nb-pf-tbl .c-share { white-space: nowrap; }
.nb-pf-tbl .nb-share i.nb-progress { width: 40px; }
.nb-pf-tbl td.negative { color: var(--destructive); }
.nb-pf-tbl tr.is-hidden-row td { color: var(--muted-foreground); }
.nb-pf-tbl tr.is-hidden-row .t { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--muted-foreground); }
.nb-share { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; font-size: 12.5px; }
i.nb-progress { display: inline-block; width: 60px; vertical-align: middle; font-style: normal; }
.nb-share .nb-progress > i, .nb-pf-title .nb-progress > i { background: var(--translator); }
.nb-pairs { list-style: none; margin: 0; padding: 6px 18px; display: grid; }
.nb-pairs li { padding: 12px 0; display: grid; gap: 6px; }
.nb-pairs li + li { border-top: 1px solid var(--border); }
.nb-pairs .t { font-weight: 650; }
.nb-pairs .nb-progress { width: 100%; }
.nb-pairs .nb-progress > i { background: var(--translator); }
.nb-pairs .m { font-size: 12.5px; color: var(--muted-foreground); }
dl.nb-pf-dl { margin: 0; padding: 6px 18px; display: grid; }
dl.nb-pf-dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; }
dl.nb-pf-dl > div + div { border-top: 1px solid var(--border); }
dl.nb-pf-dl dt { font-weight: 500; color: var(--muted-foreground); font-size: 13px; }
dl.nb-pf-dl dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nb-pf-since time { color: inherit; }

/* тайтлы на обзоре */
.nb-card.nb-pf-titles { padding: 4px 18px; }
.nb-pf-title { padding: 12px 0; min-width: 0; }
.nb-pf-title + .nb-pf-title { border-top: 1px solid var(--border); }
.nb-pf-title .t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.nb-pf-title .t > a { font-weight: 650; color: var(--foreground); overflow-wrap: anywhere; min-width: 0; }
.nb-pf-title .roles { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.nb-pf-title .m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 4px; font-size: 12.5px; color: var(--muted-foreground); }
.nb-pf-title .share { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }

/* ============================================================ лента активности */
.nb-act.nb-card { padding: 4px 20px 8px; }
.nb-act-day + .nb-act-day { border-top: 1px solid var(--border); }
.nb-act-dayh { margin: 0; padding: 14px 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-foreground); }
.nb-act-list { list-style: none; margin: 0; padding: 0 0 8px; }
.nb-act-item { position: relative; display: flex; gap: 12px; padding: 8px 0; min-width: 0; }
.nb-act-item + .nb-act-item::before { content: ""; position: absolute; left: 14px; top: -8px; height: 16px; border-left: 1px solid var(--border); }
.nb-act-ico { flex: none; display: inline-grid; place-items: center; width: 29px; height: 29px; border-radius: var(--radius); background: var(--secondary); color: var(--muted-foreground); position: relative; z-index: 1; }
.nb-act-ico.is-emoji { font-size: 15px; line-height: 1; }
.nb-act-item.k-tr .nb-act-ico { background: color-mix(in oklab, var(--translator) 16%, transparent); color: var(--translator); }
.nb-act-item.k-review .nb-act-ico, .nb-act-item.k-rating .nb-act-ico, .nb-act-item.k-badge .nb-act-ico { background: color-mix(in oklab, var(--rating) 18%, transparent); color: var(--rating-text); }
.nb-act-item.k-book .nb-act-ico, .nb-act-item.k-chap .nb-act-ico, .nb-act-item.k-corr_ok .nb-act-ico { background: color-mix(in oklab, var(--success) 15%, transparent); color: var(--success); }
.nb-act-item .body { flex: 1; min-width: 0; padding-top: 4px; }
.nb-act-item .h { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.nb-act-item .h a { font-weight: 600; }
.nb-act-item .h a.bk { color: var(--link); font-weight: 550; }
.nb-act-item .h a.user { color: var(--foreground); }
.nb-act-item .h .nb-rating { margin-left: 4px; font-size: 12.5px; vertical-align: 1px; }
.nb-act-item .sep { color: var(--muted-foreground); margin: 0 2px; }
.nb-act-item .x { margin: 4px 0 0; color: var(--muted-foreground); font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nb-act-item .x b { color: var(--foreground); font-weight: 600; }
.nb-act-item .m { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin-top: 3px; font-size: 12px; color: var(--muted-foreground); }
.nb-act-item .m a { color: var(--muted-foreground); }
.nb-act-item .m a:hover { color: var(--foreground); }
.nb-act-item .m .nb-chip { font-size: 10.5px; padding: 0 7px; }
.nb-act-item .nb-tier { margin-left: 2px; }
.nb-act-more { display: flex; justify-content: center; padding: 10px 0 12px; border-top: 1px solid var(--border); }
.nb-act-more .is-loading { opacity: .6; pointer-events: none; }
.nb-act-end { text-align: center; font-size: 12.5px; padding: 12px 0; margin: 0; border-top: 1px solid var(--border); }
.nb-act-filter { margin-bottom: 14px; }
.nb-act-privacy { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 14px; padding: 10px 14px; border: 1px dashed var(--border); border-radius: var(--radius-lg); font-size: 12.5px; color: var(--muted-foreground); }
.nb-act-privacy span { flex: 1 1 260px; min-width: 0; }
@media (max-width: 560px) { .nb-act.nb-card { padding: 2px 14px 6px; } }

/* мини-карточка и списки: присутствие */
.nb-mini-card .m .nb-presence.is-compact { font-size: 12px; }
.nb-mini-card .m .nb-presence.is-online, .nb-rating-table .nb-presence.is-online { color: var(--success); }
.nb-rating-user .nb-mini-ava { line-height: 0; }

/* ============================================================ телефоны: компактная шапка профиля
 * Аватар 64px рядом с именем, уровень/достижения/кнопки на всю ширину под ними; на вкладках кроме «Обзора»
 * био и значки достижений не повторяются — содержимое вкладки начинается на первом экране. */
@media (max-width: 700px) {
	.nb-profile-card .nb-profile-head { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; row-gap: 0; align-items: center; }
	.nb-profile-card .nb-profile-main { display: contents; }
	.nb-profile-card .nb-profile-ava { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
	.nb-profile-ava .nb-avatar-lg { width: 64px !important; height: 64px !important; font-size: 26px !important; box-shadow: 0 0 0 3px var(--card-solid), var(--elev-1); }
	.nb-profile-ava .nb-online-dot { width: 14px; height: 14px; right: 1px; bottom: 1px; box-shadow: 0 0 0 2px var(--card-solid); }
	.nb-profile-ava .nb-ava-edit { opacity: 1; width: 24px; height: 24px; bottom: -8px; }
	.nb-profile-card .nb-profile-name { grid-column: 2; grid-row: 1; align-self: end; gap: 6px 8px; }
	.nb-profile-name h1 { font-size: 22px; }
	.nb-profile-card .nb-profile-meta { grid-column: 2; grid-row: 2; align-self: start; margin: 4px 0 0; gap: 2px 12px; font-size: 12px; }
	.nb-profile-card .nb-profile-level, .nb-profile-card .nb-profile-bio, .nb-profile-card .nb-profile-badges, .nb-profile-card .nb-profile-actions { grid-column: 1 / -1; }
	.nb-profile-card .nb-profile-level { margin-top: 16px; gap: 8px 12px; }
	.nb-profile-card .nb-profile-badges { margin-top: 12px; gap: 8px; }
	.nb-profile-card .nb-profile-actions { margin-top: 16px; }
	.nb-profile-actions > .nb-btn { min-height: 40px; }
	.nb-profile-stats { margin-top: 16px; padding: 12px 0; gap: 10px; }
	.nb-profile-stats b { font-size: 19px; }
	.nb-profile-stats span { font-size: 10px; letter-spacing: .05em; }
	body:not(.route-users-books) .nb-profile-card .nb-profile-bio, body:not(.route-users-books) .nb-profile-card .nb-profile-badges { display: none; }
}

/* ------------------------------------------------------------ touch screens and phones
   Sub-tab chips (People, Activity) were 28 px tall; "N XP to ...", "all achievements" and the side links were 19-20 px lines.
   Four profile numbers share one row instead of three plus a lone fourth one (phones and tablets). */
@media (max-width: 760px), (pointer: coarse) {
	.nb-subtabs .nb-chip { min-height: 36px; padding: 0 12px; }
	.nb-lvl-next { display: inline-block; padding: 9px 0; margin: -9px 0; }
	.nb-badge-more { padding: 9px 0; margin: -9px 0; }
	.nb-side-links a { min-height: 36px; }
}
@media (max-width: 979px) {
	.nb-profile-stats:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}