/* Sparkling Карточки рейтинга (префикс prl__) */
.prl {
  --pl-bg: var(--sp-bg, #00050B); --pl-card: var(--sp-card, #111924); --pl-text: var(--sp-text, #F8FCFF);
  --pl-accent: var(--sp-accent, #009CFF); --pl-accent-hi: var(--sp-accent-hi, #4FB3FF); --pl-on-accent: var(--sp-on-accent, #F8FCFF);
  --pl-dots: var(--sp-accent, #009CFF); --pl-bg-opacity: .35;
  --pl-pro: var(--sp-ok, #2BD67B); --pl-con: var(--sp-no, #FF6467);
  --pl-soft: color-mix(in srgb, var(--pl-text) 72%, transparent);
  --pl-muted: color-mix(in srgb, var(--pl-text) 55%, transparent);
  --pl-line: color-mix(in srgb, var(--pl-text) 9%, transparent);
  --pl-panel: color-mix(in srgb, var(--pl-card) 70%, var(--pl-bg));
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0; padding: 64px 20px; background: var(--pl-bg); color: var(--pl-text);
  font-family: var(--sp-font, Arial, Helvetica, sans-serif);
}
.prl *, .prl *::before, .prl *::after { box-sizing: border-box; }
.prl::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(color-mix(in srgb, var(--pl-dots) 22%, transparent) 1.1px, transparent 1.3px); background-size: 7px 7px;
  -webkit-mask-image: radial-gradient(60% 40% at 50% 8%, #000 10%, transparent 75%); mask-image: radial-gradient(60% 40% at 50% 8%, #000 10%, transparent 75%); opacity: .4; }
.prl--nodots::before { display: none; }
.prl__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: var(--pl-bg-opacity); pointer-events: none; }

/* защита от стилей темы */
.prl h2, .prl h3, .prl p, .prl ol, .prl ul, .prl li, .prl dl, .prl dt, .prl dd { text-transform: none; letter-spacing: normal; }
.prl ol, .prl ul { list-style: none; margin: 0; padding: 0; }
.prl li::before, .prl li::marker { content: none; }
.prl dl, .prl dd { margin: 0; }
.prl .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.prl__inner { max-width: 960px; margin: 0 auto; }
.prl__head { margin-bottom: 24px; }
.prl__tag { display: inline-block; padding: 8px 12px; border: 1px solid var(--pl-line); border-radius: 8px; background: color-mix(in srgb, var(--pl-card) 90%, transparent);
  font: 600 12px/1 var(--sp-mono, "Courier New", monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--pl-text); }
.prl .prl__title { margin: 14px 0 0; font-size: clamp(26px, 3.6vw, 36px); line-height: 1.1; font-weight: 600; letter-spacing: -.03em; color: var(--pl-text); }
.prl .prl__lead { margin: 10px 0 0; max-width: 760px; font-size: 16px; line-height: 1.55; color: var(--pl-soft); }

.prl__list { display: grid; gap: 14px; }
.prl .prl__item { position: relative; margin: 0; padding: 22px 24px; border-radius: 22px; background: var(--pl-card); border: 1px solid var(--pl-line);
  scroll-margin-top: 96px; }
.prl .prl__item--hl { border: 2px solid var(--pl-accent); padding: 21px 23px;
  background: color-mix(in srgb, var(--pl-accent) 6%, var(--pl-card)); }
.prl__badge { position: absolute; inset-block-start: -1px; inset-inline-end: 22px; transform: translateY(-50%); padding: 7px 11px; border-radius: 8px;
  background: var(--pl-accent); color: var(--pl-on-accent); font: 700 11px/1 var(--sp-mono, "Courier New", monospace); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }

.prl__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.prl__list--norank .prl__top { grid-template-columns: minmax(0, 1fr) auto; }
.prl__rank { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--pl-panel); border: 1px solid var(--pl-line); font-size: 26px; font-weight: 700; letter-spacing: -.03em; color: var(--pl-text); }
.prl__item--hl .prl__rank { background: var(--pl-accent); border-color: var(--pl-accent); color: var(--pl-on-accent); }
.prl .prl__name { margin: 0; font-size: 21px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: var(--pl-text); }
.prl__type { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.4; color: var(--pl-muted); }

.prl__ring { position: relative; width: 48px; height: 48px; flex: none; }
.prl__ring svg { display: block; width: 100%; height: 100%; }
.prl__ring-track { stroke: color-mix(in srgb, var(--pl-text) 10%, transparent); }
.prl__ring-fill { stroke: var(--pl-accent); }
.prl__ring span { position: absolute; inset: 0; direction: ltr; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--pl-text); }

.prl .prl__facts { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.prl__facts > div { padding: 11px 14px; border-radius: 14px; background: var(--pl-panel); border: 1px solid var(--pl-line); }
.prl .prl__facts dt { font: 700 10.5px/1.3 var(--sp-mono, "Courier New", monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--pl-accent-hi); }
.prl .prl__facts dd { margin-top: 5px; font-size: 14.5px; line-height: 1.45; color: var(--pl-text); }

.prl__pc { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.prl__pc--one { grid-template-columns: minmax(0, 1fr); }
.prl__col { --pl-t: var(--pl-pro); }
.prl__col--con { --pl-t: var(--pl-con); }
.prl .prl__col-title { margin: 0 0 6px; font: 700 11px/1.3 var(--sp-mono, "Courier New", monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--pl-t); }
.prl .prl__col li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; margin: 0; padding: 5px 0; font-size: 14px; line-height: 1.5; color: var(--pl-soft); }
.prl__mark { width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
  background: color-mix(in srgb, var(--pl-t) 12%, transparent); color: var(--pl-t); }

.prl__cta { margin-top: 18px; display: flex; }
.prl .prl__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 12px;
  font-size: 14px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; transition: opacity .15s; }
.prl .prl__btn:hover { opacity: .88; }
.prl .prl__btn--a { background: var(--pl-accent); color: var(--pl-on-accent); }
.prl .prl__btn--d { background: color-mix(in srgb, var(--pl-text) 6%, transparent); border: 1px solid var(--pl-line); color: var(--pl-text); font-weight: 600; }

@media (max-width: 720px) {
  .prl { padding: 48px 16px; }
  .prl .prl__item { padding: 20px 16px; }
  .prl .prl__item--hl { padding: 19px 15px; }
  .prl__top { gap: 12px; }
  .prl__rank { width: 42px; height: 42px; font-size: 21px; border-radius: 12px; }
  .prl .prl__name { font-size: 18px; }
  .prl .prl__facts, .prl__pc { grid-template-columns: minmax(0, 1fr); }
  .prl__pc { gap: 10px; }
  .prl__cta .prl__btn { width: 100%; }
}