/* Единый блок «вы среди пользователей» (score_rank.py, 03.09.2026). */
.sr { border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; padding: 14px 16px; margin: 0 0 14px; }
.sr--compact { padding: 10px 12px; margin: 0; }
.sr-h { font-size: .98rem; font-weight: 700; color: #111827; margin: 0 0 8px; }
.sr-h small { display: block; font-weight: 500; color: #64748b; font-size: .78rem; margin-top: 2px; }
.sr-note { margin-top: 8px; font-size: .86rem; color: #374151; line-height: 1.55; display: flex; flex-direction: column; gap: 2px; }
.sr-note b { color: #111827; }
.sr-n { margin-top: 6px; font-size: .72rem; color: #94a3b8; }
.sr-inline { font-size: .78rem; color: #374151; }
.sr-inline b { color: #b45309; }

/* столбики */
.sr-bars { display: flex; align-items: flex-end; gap: 3px; height: 118px; padding-top: 18px; }
.sr-bars__c { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: relative; height: 100%; }
.sr-bars__b { width: 100%; max-width: 26px; border-radius: 4px 4px 2px 2px; background: #cbd5e1; }
.sr-bars__c.is-me .sr-bars__b { background: linear-gradient(180deg,#f59e0b,#b45309); }
.sr-bars__n { font-size: .68rem; color: #64748b; margin-top: 3px; font-variant-numeric: tabular-nums; }
.sr-bars__c.is-me .sr-bars__n { color: #b45309; font-weight: 800; }
.sr-bars__me { position: absolute; top: -16px; font-size: .66rem; font-weight: 800; color: #b45309; }

/* лестница */
.sr-ladder { display: grid; gap: 4px; }
.sr-ladder__r { display: grid; grid-template-columns: 44px 1fr 120px 40px 56px; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 8px; font-size: .84rem; color: #475569; }
.sr-ladder__r.is-me { background: #fff7ed; color: #111827; font-weight: 700; box-shadow: 0 0 0 1px #fdba74 inset; }
.sr-ladder__rng { font-variant-numeric: tabular-nums; font-size: .76rem; color: #94a3b8; }
.sr-ladder__r.is-me .sr-ladder__rng { color: #b45309; }
.sr-ladder__bar { height: 10px; background: #f1f5f9; border-radius: 99px; overflow: hidden; }
.sr-ladder__bar i { display: block; height: 100%; background: #cbd5e1; border-radius: 99px; }
.sr-ladder__r.is-me .sr-ladder__bar i { background: linear-gradient(90deg,#fbbf24,#ea580c); }
.sr-ladder__pct { text-align: right; font-variant-numeric: tabular-nums; font-size: .8rem; }
.sr-ladder__me { font-size: .72rem; color: #b45309; font-weight: 700; white-space: nowrap; }
@media (max-width: 560px) { .sr-ladder__r { grid-template-columns: 40px 1fr 40px; } .sr-ladder__bar, .sr-ladder__me { display: none; } }

/* шкала перцентиля */
.sr-strip__bar { position: relative; height: 18px; border-radius: 99px; background: linear-gradient(90deg,#e2e8f0,#f1f5f9); overflow: visible; }
.sr-strip__fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 99px; background: linear-gradient(90deg,#fde68a,#f59e0b,#ea580c); }
.sr-strip__me { position: absolute; top: -6px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: #111827; color: #fff; display: flex; align-items: center; justify-content: center; font-size: .66rem; font-weight: 800; box-shadow: 0 0 0 3px #fff; }
.sr-strip__axis { display: flex; justify-content: space-between; font-size: .7rem; color: #94a3b8; margin-top: 8px; }
.sr-strip__caption { margin-top: 6px; font-size: .84rem; color: #374151; }
.sr-strip__caption b { color: #111827; }

/* толпа */
.sr-crowd { display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; }
.sr-crowd i { display: block; aspect-ratio: 1; border-radius: 50%; background: #e2e8f0; }
.sr-crowd i.is-below { background: #fbbf24; }
.sr-crowd i.is-same { background: #111827; }
.sr-crowd i.is-above { background: #e2e8f0; }
.sr-crowd__leg { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: .78rem; color: #475569; }
.sr-crowd__leg i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.sr-crowd__leg i.is-below { background: #fbbf24; } .sr-crowd__leg i.is-same { background: #111827; } .sr-crowd__leg i.is-above { background: #e2e8f0; }
@media (max-width: 480px) { .sr-crowd { grid-template-columns: repeat(10, 1fr); } }