/* EZ Rank chips only — safe to load site-wide (no :root layout token overrides). */

:root {
  --r01-face:#B8C0CA; --r01-deep:#6E7682;
  --r01-bg:rgba(184,192,202,.10); --r01-border:rgba(184,192,202,.32);
  --r02-face:#8FA3B8; --r02-deep:#546678;
  --r02-bg:rgba(143,163,184,.11); --r02-border:rgba(143,163,184,.34);
  --r03-face:#7BA8A4; --r03-deep:#466866;
  --r03-bg:rgba(123,168,164,.11); --r03-border:rgba(123,168,164,.34);
  --r04-face:#7FA88A; --r04-deep:#486652;
  --r04-bg:rgba(127,168,138,.11); --r04-border:rgba(127,168,138,.34);
  --r05-face:#9A8FB8; --r05-deep:#5C5476;
  --r05-bg:rgba(154,143,184,.12); --r05-border:rgba(154,143,184,.35);
  --r06-face:#B88FA3; --r06-deep:#74505F;
  --r06-bg:rgba(184,143,163,.12); --r06-border:rgba(184,143,163,.35);
  --r07-face:#C49A78; --r07-deep:#7A5840;
  --r07-bg:rgba(196,154,120,.12); --r07-border:rgba(196,154,120,.36);
  --r08-face:#C9A85C; --r08-deep:#8A6F35;
  --r08-bg:rgba(201,168,92,.11); --r08-border:rgba(201,168,92,.34);
  --r09-face:#C4846A; --r09-deep:#7A4A38;
  --r09-bg:rgba(196,132,106,.12); --r09-border:rgba(196,132,106,.36);
  --r10-face:#D4C48A; --r10-deep:#8A7C4A;
  --r10-bg:rgba(212,196,138,.12); --r10-border:rgba(212,196,138,.36);
}

.profile-sidebar-panel__name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.vip-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px 0 5px;
  border-radius: 999px;
  border: 1px solid var(--color-border, #33363d);
  background: var(--color-surface-raised, #2a2d33);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--color-text-secondary, #b4b8c0);
  user-select: none;
}

.vip-chip .vip-ico {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid transparent;
}

.vip-chip .vip-ico svg { width: 9px; height: 9px; display: block; }

.vip-chip .vip-pct {
  font-weight: 700;
  font-size: 10px;
  opacity: 0.92;
  padding-left: 1px;
}

.vip-chip--xs { height: 18px; padding: 0 6px 0 3px; font-size: 10px; gap: 4px; }
.vip-chip--xs .vip-ico { width: 12px; height: 12px; }
.vip-chip--xs .vip-ico svg { width: 8px; height: 8px; }
.vip-chip--xs .vip-pct { font-size: 9px; }

.vip-chip--lg { height: 26px; padding: 0 10px 0 6px; font-size: 12px; gap: 6px; }
.vip-chip--lg .vip-ico { width: 16px; height: 16px; }
.vip-chip--lg .vip-ico svg { width: 10px; height: 10px; }
.vip-chip--lg .vip-pct { font-size: 11px; }

.vip-chip--xl { height: 30px; padding: 0 12px 0 7px; font-size: 13px; gap: 7px; }
.vip-chip--xl .vip-ico { width: 18px; height: 18px; }
.vip-chip--xl .vip-ico svg { width: 11px; height: 11px; }
.vip-chip--xl .vip-pct { font-size: 12px; }

.vip-chip--icon {
  width: 22px;
  height: 22px;
  padding: 0;
  justify-content: center;
  border-radius: 7px;
}

.vip-chip--icon .vip-pct,
.vip-chip--icon .vip-name { display: none; }

.vip-chip--icon .vip-ico { width: 14px; height: 14px; border: 0; }

.vip-chip--r01 {
  color: #D5DBE3;
  background: linear-gradient(180deg, rgba(184,192,202,.14), rgba(184,192,202,.06));
  border-color: var(--r01-border);
}
.vip-chip--r01 .vip-ico {
  background: linear-gradient(160deg, #E4E8ED 0%, var(--r01-face) 42%, var(--r01-deep) 100%);
  border-color: rgba(255,255,255,.18);
  color: #2A3038;
}
.vip-chip--r01 .vip-pct { color: var(--r01-face); }

.vip-chip--r02 {
  color: #C8D4E0;
  background: linear-gradient(180deg, rgba(143,163,184,.15), rgba(143,163,184,.06));
  border-color: var(--r02-border);
}
.vip-chip--r02 .vip-ico {
  background: linear-gradient(160deg, #C5D2E0 0%, var(--r02-face) 45%, var(--r02-deep) 100%);
  border-color: rgba(255,255,255,.16);
  color: #243038;
}
.vip-chip--r02 .vip-pct { color: var(--r02-face); }

.vip-chip--r03 {
  color: #C5DAD8;
  background: linear-gradient(180deg, rgba(123,168,164,.15), rgba(123,168,164,.06));
  border-color: var(--r03-border);
}
.vip-chip--r03 .vip-ico {
  background: linear-gradient(160deg, #B8D4D1 0%, var(--r03-face) 45%, var(--r03-deep) 100%);
  border-color: rgba(255,255,255,.16);
  color: #1E3030;
}
.vip-chip--r03 .vip-pct { color: var(--r03-face); }

.vip-chip--r04 {
  color: #C6DACB;
  background: linear-gradient(180deg, rgba(127,168,138,.15), rgba(127,168,138,.06));
  border-color: var(--r04-border);
}
.vip-chip--r04 .vip-ico {
  background: linear-gradient(160deg, #B8D4C0 0%, var(--r04-face) 45%, var(--r04-deep) 100%);
  border-color: rgba(255,255,255,.16);
  color: #1E3024;
}
.vip-chip--r04 .vip-pct { color: var(--r04-face); }

.vip-chip--r05 {
  color: #D4CDE4;
  background: linear-gradient(180deg, rgba(154,143,184,.16), rgba(154,143,184,.06));
  border-color: var(--r05-border);
}
.vip-chip--r05 .vip-ico {
  background: linear-gradient(160deg, #C8C0DC 0%, var(--r05-face) 45%, var(--r05-deep) 100%);
  border-color: rgba(255,255,255,.16);
  color: #2A2438;
}
.vip-chip--r05 .vip-pct { color: var(--r05-face); }

.vip-chip--r06 {
  color: #E4CDD8;
  background: linear-gradient(180deg, rgba(184,143,163,.16), rgba(184,143,163,.06));
  border-color: var(--r06-border);
}
.vip-chip--r06 .vip-ico {
  background: linear-gradient(160deg, #DCC4D0 0%, var(--r06-face) 45%, var(--r06-deep) 100%);
  border-color: rgba(255,255,255,.16);
  color: #382430;
}
.vip-chip--r06 .vip-pct { color: var(--r06-face); }

.vip-chip--r07 {
  color: #E8D4C0;
  background: linear-gradient(180deg, rgba(196,154,120,.16), rgba(196,154,120,.06));
  border-color: var(--r07-border);
}
.vip-chip--r07 .vip-ico {
  background: linear-gradient(160deg, #E0C4A8 0%, var(--r07-face) 45%, var(--r07-deep) 100%);
  border-color: rgba(255,255,255,.16);
  color: #3A2818;
}
.vip-chip--r07 .vip-pct { color: var(--r07-face); }

.vip-chip--r08 {
  color: #E8D5A4;
  background: linear-gradient(180deg, rgba(201,168,92,.16), rgba(201,168,92,.06));
  border-color: var(--r08-border);
}
.vip-chip--r08 .vip-ico {
  background: linear-gradient(160deg, #E8D08A 0%, var(--r08-face) 45%, var(--r08-deep) 100%);
  border-color: rgba(255,255,255,.16);
  color: #3A2E12;
}
.vip-chip--r08 .vip-pct { color: var(--r08-face); }

.vip-chip--r09 {
  color: #E8C8B8;
  background: linear-gradient(180deg, rgba(196,132,106,.16), rgba(196,132,106,.06));
  border-color: var(--r09-border);
}
.vip-chip--r09 .vip-ico {
  background: linear-gradient(160deg, #E0B8A0 0%, var(--r09-face) 45%, var(--r09-deep) 100%);
  border-color: rgba(255,255,255,.16);
  color: #3A2418;
}
.vip-chip--r09 .vip-pct { color: var(--r09-face); }

.vip-chip--r10 {
  color: #EDE4C0;
  background: linear-gradient(180deg, rgba(212,196,138,.16), rgba(212,196,138,.06));
  border-color: var(--r10-border);
}
.vip-chip--r10 .vip-ico {
  background: linear-gradient(160deg, #EDE0B0 0%, var(--r10-face) 45%, var(--r10-deep) 100%);
  border-color: rgba(255,255,255,.18);
  color: #3A3420;
}
.vip-chip--r10 .vip-pct { color: var(--r10-face); }