/* PeopleRank — народный рейтинг. Lightweight, CLS-safe, mobile-first. */

.pr-rating {
  --pr-accent: #ff5a1f;
  --pr-bg: #fff;
  --pr-line: #ececef;
  --pr-text: #16181d;
  --pr-muted: #6b7280;
  --pr-radius: 14px;
  max-width: 760px;
  margin: 2rem auto;
  font-family: inherit;
  color: var(--pr-text);
}

.pr-trust {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: .9rem;
}
.pr-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(22, 163, 74, .12);
  color: #15803d;
  font-weight: 700;
}
.pr-trust-count { color: var(--pr-muted); }

/* Rating editorial intro (SEO description) — smaller than body text */
.pr-rating-intro {
  max-width: 760px;
  margin: 1rem auto 0;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--pr-muted, #6b7280);
}
.pr-rating-intro p { font-size: inherit; margin: 0 0 .7rem; }
.pr-rating-intro p:last-child { margin-bottom: 0; }
.pr-trust-index {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
}
.pr-trust-index--high { background: rgba(22, 163, 74, .12); color: #15803d; }
.pr-trust-index--mid  { background: rgba(234, 179, 8, .15); color: #a16207; }
.pr-trust-index--low  { background: rgba(220, 38, 38, .12); color: #b91c1c; }

.pr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pr-methodology { max-width: 760px; margin: 2rem auto; line-height: 1.6; }
.pr-methodology h2 { margin-bottom: .5rem; }
.pr-methodology h3 { margin-top: 1.4rem; font-size: 1.05rem; }

.pr-item {
  display: grid;
  grid-template-columns: 44px 64px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--pr-bg);
  border: 1px solid var(--pr-line);
  border-radius: var(--pr-radius);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  will-change: transform;
}

.pr-item--voted { box-shadow: 0 0 0 2px var(--pr-accent) inset; }

.pr-rank {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.pr-rank b {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--pr-accent);
  font-variant-numeric: tabular-nums;
}
.pr-rank small {
  font-size: .6rem;
  font-weight: 600;
  color: var(--pr-muted);
  margin-top: 3px;
}

.pr-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  background: #f3f4f6;
}

/* Placeholder when a nominee has no image — keeps the grid from shifting. */
.pr-thumb--ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.6rem;
  color: #fff;
  background: linear-gradient(135deg, var(--pr-accent), #ff8a4f);
  user-select: none;
}

.pr-body { min-width: 0; }

.pr-name {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.25;
}

.pr-desc {
  margin: 2px 0 4px;
  font-size: .86rem;
  color: var(--pr-muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pr-votes { font-size: .8rem; color: var(--pr-muted); }
.pr-votes-num { color: var(--pr-text); }

.pr-vote-btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: .9rem;
  color: #fff;
  background: var(--pr-accent);
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
  white-space: nowrap;
}
.pr-vote-btn:hover { filter: brightness(1.05); }
.pr-vote-btn:active { transform: scale(.96); }
.pr-vote-btn:disabled { opacity: .6; cursor: default; }
.pr-vote-btn--loading { position: relative; color: transparent; }
.pr-vote-btn--loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .5);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pr-spin .7s linear infinite;
}
@keyframes pr-spin { to { transform: rotate(360deg); } }

.pr-suggest-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed var(--pr-line);
  border-radius: var(--pr-radius);
  background: transparent;
  color: var(--pr-muted);
  font-weight: 600;
  cursor: pointer;
}
.pr-suggest-btn:hover { border-color: var(--pr-accent); color: var(--pr-accent); }

.pr-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  padding: 12px 18px;
  border-radius: 12px;
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  opacity: 0;
  transition: opacity .3s, transform .3s;
  z-index: 9999;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .18);
}
.pr-toast--show { opacity: 1; transform: translate(-50%, 0); }
.pr-toast--ok { background: #16a34a; }
.pr-toast--err { background: #dc2626; }

@media (max-width: 560px) {
  .pr-item { grid-template-columns: 34px 48px 1fr; grid-template-rows: auto auto; }
  .pr-thumb { width: 48px; height: 48px; }
  .pr-vote-btn { grid-column: 1 / -1; width: 100%; margin-top: 6px; }
}

/* ---- Creation widget ---- */
.pr-create {
  --pr-accent: #ff5a1f;
  --pr-line: #ececef;
  --pr-muted: #6b7280;
  position: relative;
  max-width: 680px;
  margin: 1.5rem auto;
  font-family: inherit;
}
/* Defensive resets so themes don't distort the widget. */
.pr-create *, .pr-create *::before, .pr-create *::after { box-sizing: border-box; }
.pr-create-label, .pr-create-h { padding: 0; border: 0; background: none; }
.pr-create-input, .pr-create-add-input, .pr-create-ex, .pr-create-submit { font-family: inherit; }

/* Hero block */
.pr-create-hero {
  text-align: center;
  padding: 28px 20px 24px;
  border-radius: 22px;
  background:
    radial-gradient(120% 120% at 50% -10%, rgba(255, 90, 31, .10), transparent 60%),
    var(--pr-bg, #fff);
  border: 1px solid var(--pr-line);
  box-shadow: 0 10px 40px rgba(16, 24, 40, .06);
}
.pr-create-label {
  margin: 0 0 6px;
  font-weight: 800;
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.pr-create-sub {
  margin: 0 auto 18px;
  max-width: 460px;
  color: var(--pr-muted);
  font-size: 1rem;
}

.pr-create-inputwrap {
  position: relative;
  max-width: 540px;
  margin: 0 auto;
}
.pr-create-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pr-muted);
  pointer-events: none;
  transition: color .15s;
}
.pr-create-input {
  width: 100%;
  padding: 18px 18px 18px 52px;
  font-size: 1.12rem;
  border: 2px solid var(--pr-line);
  border-radius: 16px;
  outline: none;
  background: #fff;
  transition: border-color .15s, box-shadow .2s;
  box-sizing: border-box;
}
.pr-create-add-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  border: 2px solid var(--pr-line);
  border-radius: 12px;
  outline: none;
  box-sizing: border-box;
}
.pr-create-input:focus {
  border-color: var(--pr-accent);
  box-shadow: 0 0 0 4px rgba(255, 90, 31, .15);
}
.pr-create-inputwrap:focus-within .pr-create-icon { color: var(--pr-accent); }
.pr-create-add-input:focus { border-color: var(--pr-accent); }

.pr-create-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
}
.pr-create-exlabel { color: var(--pr-muted); font-size: .85rem; }
.pr-create-ex {
  border: 1px solid var(--pr-line);
  background: #fff;
  color: inherit;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: .85rem;
  cursor: pointer;
  transition: border-color .12s, color .12s, transform .1s;
}
.pr-create-ex:hover { border-color: var(--pr-accent); color: var(--pr-accent); }
.pr-create-ex:active { transform: scale(.96); }

.pr-create-results {
  position: absolute;
  z-index: 30;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 8px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--pr-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .12);
}
.pr-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: .95rem;
  color: inherit;
  text-decoration: none;
}
.pr-result:hover { background: #faf6f3; }
.pr-result-go { color: var(--pr-muted); font-size: .8rem; }
.pr-result--create { font-weight: 700; color: var(--pr-accent); border-top: 1px solid var(--pr-line); }
.pr-result-sem { font-size: .72rem; color: #2563eb; background: rgba(37,99,235,.1); padding: 1px 6px; border-radius: 6px; margin-left: 6px; }

.pr-create-step2 { margin-top: 20px; }
.pr-create-h { margin: 0 0 4px; font-size: 1.1rem; }
.pr-create-hint { margin: 0 0 12px; color: var(--pr-muted); font-size: .9rem; }

.pr-create-nominees {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.pr-nominee {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--pr-line);
  border-radius: 12px;
  cursor: pointer;
}
.pr-nominee:hover { border-color: var(--pr-accent); }
.pr-nominee-cb { width: 18px; height: 18px; accent-color: var(--pr-accent); }
.pr-nominee-img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; }
.pr-nominee-body { display: flex; flex-direction: column; min-width: 0; }
.pr-nominee-body b { font-size: .92rem; line-height: 1.2; }
.pr-nominee-body span { font-size: .78rem; color: var(--pr-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Animated nominee-search loader */
.pr-loader { padding: 6px 0 2px; grid-column: 1 / -1; width: 100%; }
.pr-loader-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}
.pr-radar {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(255, 90, 31, .25);
  flex: 0 0 auto;
}
.pr-radar i {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 90, 31, .55), transparent 38%);
  animation: pr-radar-spin 1.1s linear infinite;
}
.pr-radar::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--pr-accent);
  animation: pr-radar-pulse 1.1s ease-in-out infinite;
}
@keyframes pr-radar-spin { to { transform: rotate(360deg); } }
@keyframes pr-radar-pulse { 0%, 100% { transform: scale(.6); opacity: .6; } 50% { transform: scale(1); opacity: 1; } }
.pr-loader-status { font-weight: 700; font-size: 1rem; transition: opacity .18s; }

.pr-skels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.pr-skel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--pr-line);
  border-radius: 12px;
  background: #fff;
  position: relative;
  overflow: hidden;
}
.pr-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
  animation: pr-shimmer 1.3s infinite;
}
@keyframes pr-shimmer { 100% { transform: translateX(100%); } }
.pr-skel-img { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 8px; background: #e9ebef; }
.pr-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pr-skel-lines span { height: 10px; border-radius: 6px; background: #e9ebef; }
.pr-skel-lines span:first-child { width: 72%; }
.pr-skel-lines span:last-child { width: 46%; }
.pr-skel-cb { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 5px; background: #e9ebef; }

@keyframes pr-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.pr-nominee--in { animation: pr-pop .35s both; }

@media (prefers-reduced-motion: reduce) {
  .pr-radar i, .pr-radar::after, .pr-skel::after, .pr-nominee--in { animation: none; }
}

.pr-create-add { display: flex; gap: 8px; margin-bottom: 14px; }
.pr-create-add-btn {
  flex: 0 0 auto;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: #f1f2f4;
  font-weight: 600;
  cursor: pointer;
}
.pr-create-submit {
  width: 100%;
  padding: 18px 24px;
  font-size: 1.15rem;
  font-weight: 800;
  border-radius: 16px;
  margin-top: 8px;
  letter-spacing: .2px;
  box-shadow: 0 8px 20px rgba(255, 90, 31, .35);
}
.pr-create-submit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.pr-create-submit:active { transform: translateY(0); }

.pr-create-done {
  text-align: center;
  padding: 30px 22px;
  border: 1px solid var(--pr-line, #ececef);
  border-radius: 16px;
  background: var(--pr-bg, #fff);
  color: var(--pr-text, #16181d);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.5;
}

/* ---- Suggest modal ---- */
.pr-modal {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
}
.pr-modal-box {
  background: #fff;
  border-radius: 16px;
  padding: 22px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, .3);
}
.pr-modal-box h3 { margin: 0 0 14px; }
.pr-modal-box input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--pr-line, #ececef);
  border-radius: 10px;
  box-sizing: border-box;
}
.pr-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.pr-modal-cancel { border: 0; background: transparent; cursor: pointer; color: #6b7280; font-weight: 600; }

/* Pre-vote share gate */
.pr-share-why { color: #6b7280; font-size: .92rem; margin: 0 0 16px; }
.pr-share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.pr-share-btn {
  padding: 12px 14px;
  border: 1px solid var(--pr-line, #ececef);
  border-radius: 12px;
  background: #fff;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  transition: border-color .12s, transform .1s;
}
.pr-share-btn:hover { border-color: var(--pr-accent, #ff5a1f); }
.pr-share-btn:active { transform: scale(.97); }
.pr-share-native { grid-column: 1 / -1; background: var(--pr-accent, #ff5a1f); color: #fff; border-color: transparent; }
.pr-modal-box .pr-modal-cancel { display: block; margin: 0 auto; }
@media (prefers-color-scheme: dark) { .pr-share-btn { background: #23262e; color: #f3f4f6; } }

/* Opinion textarea in the post-vote modal */
.pr-modal-body {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--pr-line, #ececef);
  border-radius: 10px;
  margin-bottom: 12px;
  font: inherit;
  resize: vertical;
}

/* Inline argument next to a position */
.pr-arg {
  margin: 6px 0 0;
  font-size: .84rem;
  font-style: italic;
  color: var(--pr-muted, #6b7280);
  border-left: 3px solid var(--pr-accent, #ff5a1f);
  padding-left: 8px;
}

.pr-name a { color: inherit; text-decoration: none; }
.pr-name a:hover { text-decoration: underline; }

/* Affiliate links */
.pr-aff {
  display: inline-block;
  margin-top: 6px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--pr-accent, #ff5a1f);
  text-decoration: none;
}
.pr-aff:hover { text-decoration: underline; }
.pr-aff-btn { display: inline-block; margin-top: 10px; text-decoration: none; }

/* Embed code + promo */
.pr-embed { margin-top: 6px; font-size: .8rem; }
.pr-embed summary { cursor: pointer; color: var(--pr-muted, #6b7280); }
.pr-embed summary:hover { color: var(--pr-accent, #ff5a1f); }
.pr-embed textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  font-family: monospace;
  font-size: .72rem;
  border: 1px solid var(--pr-line, #ececef);
  border-radius: 8px;
  padding: 6px;
  resize: vertical;
}

/* Ratings grid (home / landing) */
.pr-grid-wrap { max-width: 1100px; margin: 2rem auto; }
.pr-grid-title { text-align: center; font-size: 1.7rem; font-weight: 800; margin-bottom: 1.3rem; }
/* Premium auto-fill grid: fits as many cards as the width allows, with enough
   room for the title to stay readable. */
.pr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.pr-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--pr-text, #16181d);
  background: var(--pr-bg, #fff);
  border: 1px solid var(--pr-line, #ececef);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(16, 24, 40, .06);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.pr-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(16, 24, 40, .16);
  border-color: color-mix(in srgb, var(--pr-accent, #ff5a1f) 55%, transparent);
}

.pr-card-head {
  padding: 15px 16px 14px;
  background: linear-gradient(135deg, #1b1235 0%, #2c1c40 55%, #3a2147 100%);
  color: #fff;
}
.pr-card-tag {
  display: inline-block; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 800; color: #ffce8a;
}
/* Title wraps long tokens (e.g. "100 000") and never overflows the card; clamps
   to 3 lines so cards stay tidy. Full text is in the link's title attribute. */
.pr-card-title {
  margin: 7px 0 0; font-size: 1.02rem; font-weight: 800; line-height: 1.3; color: #fff;
  overflow-wrap: anywhere; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.6em;
}

.pr-card-top { list-style: none; margin: 0; padding: 11px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pr-card-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 10px;
  background: #f5f6f8;
  background: color-mix(in srgb, var(--pr-text, #16181d) 5%, transparent);
}
.pr-card-pos { flex: 0 0 auto; width: 22px; text-align: center; font-size: 1.02rem; font-weight: 800; color: var(--pr-accent, #ff5a1f); }
.pr-card-name { font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pr-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px; border-top: 1px solid var(--pr-line, #ececef);
  font-size: .82rem; color: var(--pr-muted, #6b7280);
}
.pr-card-go { color: var(--pr-accent, #ff5a1f); font-weight: 800; }

/* Infinite-scroll sentinel + spinner. */
.pr-grid-sentinel { height: 1px; }
.pr-grid--loading .pr-grid-sentinel { height: 44px; }
.pr-grid--loading .pr-grid-sentinel::after {
  content: ''; display: block; width: 24px; height: 24px; margin: 10px auto;
  border: 3px solid color-mix(in srgb, var(--pr-text, #16181d) 15%, transparent);
  border-top-color: var(--pr-accent, #ff5a1f); border-radius: 50%;
  animation: pr-spin .8s linear infinite;
}
@keyframes pr-spin { to { transform: rotate(360deg); } }

@media (max-width: 600px) {
  /* Phones: one full-width card per row so the rating title is fully readable. */
  .pr-grid-wrap { padding-inline: 12px; }
  .pr-grid { grid-template-columns: 1fr; gap: 12px; }
  .pr-card-title { -webkit-line-clamp: 4; min-height: 0; }
  .pr-card-head { padding: 14px 16px 13px; }
}

/* Position history chart */
.pr-history { max-width: 760px; margin: 1.5rem auto 0; }
.pr-history-title { font-size: 1.1rem; margin-bottom: 10px; }
.pr-history-empty { color: var(--pr-muted, #6b7280); font-size: .9rem; }
.pr-history-svg { width: 100%; height: auto; border: 1px solid var(--pr-line, #ececef); border-radius: 12px; background: #fff; }
.pr-history-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: .85rem; }
.pr-history-leg { display: inline-flex; align-items: center; gap: 6px; }
.pr-history-leg i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
@media (prefers-color-scheme: dark) { .pr-history-svg { background: #1a1c22; } }

/* Reviews block */
.pr-reviews { max-width: 760px; margin: 1.5rem auto 0; }
.pr-reviews-title { font-size: 1.1rem; margin-bottom: 12px; }
.pr-review-form { margin-bottom: 18px; }
.pr-review-note { margin: 6px 2px 0; font-size: .82rem; color: var(--pr-muted, #6b7280); }
.pr-review-body {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--pr-line, #ececef);
  border-radius: 12px;
  font: inherit;
  resize: vertical;
  margin-bottom: 8px;
}
.pr-review-row { display: flex; gap: 8px; }
.pr-review-name {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--pr-line, #ececef);
  border-radius: 10px;
}
.pr-review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pr-review {
  padding: 12px 14px;
  border: 1px solid var(--pr-line, #ececef);
  border-radius: 12px;
}
.pr-review-meta { display: flex; gap: 10px; align-items: baseline; font-size: .82rem; color: var(--pr-muted, #6b7280); margin-bottom: 4px; }
.pr-review-text { margin: 0 0 8px; font-size: .95rem; line-height: 1.55; }
.pr-review-helpful { border: 0; background: transparent; cursor: pointer; color: var(--pr-muted, #6b7280); font-weight: 600; padding: 0; }
.pr-review-helpful:hover { color: var(--pr-accent, #ff5a1f); }

/* Nominee page — follows the theme's constrained layout + content width.
   Vertical padding only; horizontal spacing comes from the block theme's root
   padding (a mobile safety padding is added below). */
.pr-nominee-main { padding-block: 2.5rem; }
.pr-nominee-page {
  max-width: var(--wp--style--global--content-size, 760px);
  margin-left: auto;
  margin-right: auto;
}
.pr-nominee-head { display: flex; gap: 18px; align-items: center; margin-bottom: 1.5rem; }
.pr-nominee-photo { width: 120px; height: 120px; object-fit: cover; border-radius: 16px; flex: 0 0 auto; }
.pr-nominee-name {
  margin: 0 0 16px;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 800;
  line-height: 1.18;
  overflow-wrap: anywhere;
}
.pr-nominee-desc { margin: 0; font-size: 1.02rem; line-height: 1.6; color: color-mix(in srgb, var(--pr-text, #16181d) 78%, transparent); }
.pr-nominee-content { margin-top: 1.2rem; }
.pr-nominee-headtext { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pr-nominee-edit { display: inline-block; margin-top: 8px; font-size: .82rem; font-weight: 600; color: #2563eb; text-decoration: none; }
.pr-nominee-edit:hover { text-decoration: underline; }
.pr-nominee-h { font-size: 1.25rem; font-weight: 800; margin: 1.8rem 0 .9rem; display: flex; align-items: center; gap: 10px; }
.pr-nratings-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 8px;
  font-size: .85rem; font-weight: 700;
  color: var(--pr-muted, #6b7280);
  background: #eef0f3;
  background: color-mix(in srgb, var(--pr-text, #16181d) 10%, transparent);
  border-radius: 999px;
}

.pr-nratings-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pr-nrow-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 12px;
  border: 1px solid var(--pr-line, #ececef);
  border-radius: 11px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.pr-nrow-link:hover { transform: translateX(2px); border-color: var(--pr-accent, #ff5a1f); box-shadow: 0 6px 18px rgba(16, 24, 40, .08); }

/* Compact, clearly-visible place chip: big accent number over a small label. */
.pr-nplace {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 46px;
  padding: 4px 8px;
  border-radius: 10px;
  line-height: 1.02;
  white-space: nowrap;
  background: color-mix(in srgb, var(--pr-accent, #ff5a1f) 12%, var(--pr-bg, #fff));
  border: 1px solid color-mix(in srgb, var(--pr-accent, #ff5a1f) 32%, transparent);
}
.pr-nplace b { font-size: 1.12rem; font-weight: 800; color: var(--pr-accent, #ff5a1f); }
.pr-nplace small { font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pr-muted, #6b7280); }
.pr-nplace--top {
  background: linear-gradient(135deg, rgba(255, 90, 31, .2), rgba(255, 138, 79, .16));
  border-color: rgba(255, 90, 31, .5);
}
.pr-nplace--top b { color: #b45309; }
.pr-nplace-medal { font-size: .95rem; line-height: 1; }

.pr-nrow-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pr-nrow-title { font-weight: 700; line-height: 1.2; font-size: .95rem; }
.pr-nrow-votes { font-size: .78rem; color: var(--pr-muted, #6b7280); }
.pr-nrow-go { flex: 0 0 auto; color: var(--pr-muted, #6b7280); font-size: 1.1rem; transition: transform .12s, color .12s; }
.pr-nrow-link:hover .pr-nrow-go { color: var(--pr-accent, #ff5a1f); transform: translateX(3px); }
.pr-nrow-embed { margin: 6px 4px 2px; }

/* Long-read SEO article (rating & nominee big text). */
.pr-longread {
  max-width: 760px;
  margin: 2.2rem auto;
  line-height: 1.72;
  font-size: 1.02rem;
}
.pr-longread h2 { font-size: 1.5rem; font-weight: 800; margin: 1.8rem 0 .7rem; line-height: 1.25; }
.pr-longread h3 { font-size: 1.2rem; font-weight: 700; margin: 1.4rem 0 .5rem; }
.pr-longread p { margin: 0 0 1rem; }
.pr-longread ul, .pr-longread ol { margin: 0 0 1.1rem; padding-left: 1.4rem; }
.pr-longread li { margin: .3rem 0; }
.pr-longread strong { font-weight: 700; }

@media (prefers-color-scheme: dark) {
  .pr-nrow-link { background: #1a1c22; border-color: #2a2d36; }
  .pr-nplace { background: #23262e; color: #c7ccd4; }
  .pr-nplace b { color: #f3f4f6; }
}

@media (prefers-color-scheme: dark) {
  .pr-rating { --pr-bg: #1a1c22; --pr-line: #2a2d36; --pr-text: #f3f4f6; --pr-muted: #9aa0ab; }
  .pr-create-results, .pr-modal-box { background: #1a1c22; color: #f3f4f6; }
  .pr-result:hover { background: #23262e; }
  .pr-create-add-btn { background: #2a2d36; color: #f3f4f6; }
}

/* ---- Mobile polish (small screens) ---- */
@media (max-width: 560px) {
  .pr-rating, .pr-create, .pr-reviews, .pr-history { padding-left: 12px; padding-right: 12px; }
  .pr-create-hero { padding: 22px 14px 18px; border-radius: 18px; }
  .pr-create-input { padding: 15px 15px 15px 46px; font-size: 1.05rem; }
  .pr-create-icon { left: 14px; }

  /* Reviews: stack name + button */
  .pr-review-row { flex-wrap: wrap; }
  .pr-review-row .pr-vote-btn { width: 100%; }

  /* Nominee page: tighter padding, header stacks on small phones */
  .pr-nominee-main { padding-block: 1.6rem; }
  .pr-nominee-page { padding-inline: 14px; }
  .pr-nominee-head { gap: 12px; flex-direction: column; align-items: flex-start; }
  .pr-nominee-photo { width: 88px; height: 88px; }
  .pr-aff-btn { width: 100%; text-align: center; }

  /* Place row on nominee page wraps gracefully */
  .pr-nrow-link { flex-wrap: wrap; }
  .pr-nrow-body { flex-basis: 100%; order: 3; }
}

/* Tap targets and image safety */
.pr-vote-btn, .pr-suggest-btn, .pr-create-ex, .pr-review-helpful { min-height: 40px; }
.pr-card-media img, .pr-thumb, .pr-nominee-photo { display: block; }

/* ===== Twenty Twenty-Five (block theme) compatibility =====
   Pull colors and layout widths from the theme so the plugin follows the
   active TT5 style variation (light/dark) and content/wide sizes. color-mix
   degrades gracefully: unsupported browsers keep the light fallbacks above. */
.pr-rating, .pr-create, .pr-grid-wrap, .pr-nominee-page, .pr-reviews,
.pr-history, .pr-methodology, .pr-modal {
  --pr-bg: var(--wp--preset--color--base, #fff);
  --pr-text: var(--wp--preset--color--contrast, #16181d);
  --pr-line: color-mix(in srgb, var(--wp--preset--color--contrast, #16181d) 14%, transparent);
  --pr-muted: color-mix(in srgb, var(--wp--preset--color--contrast, #16181d) 58%, transparent);
  color: var(--pr-text);
}

/* Match the theme's content and wide widths. */
.pr-rating, .pr-create, .pr-reviews, .pr-history, .pr-methodology {
  max-width: var(--wp--style--global--content-size, 760px);
}
.pr-grid-wrap { max-width: var(--wp--style--global--wide-size, 1100px); }

/* Surfaces follow the theme background (light/dark). Gradients/accents kept. */
.pr-card, .pr-create-input, .pr-create-add-input, .pr-create-ex,
.pr-create-results, .pr-modal-box, .pr-share-btn:not(.pr-share-native),
.pr-review, .pr-review-body, .pr-review-name, .pr-nrow-link, .pr-history-svg {
  background: var(--pr-bg);
  color: var(--pr-text);
}

/* Borders follow the theme contrast color at low opacity. */
.pr-card, .pr-create-hero, .pr-create-input, .pr-create-add-input, .pr-create-ex,
.pr-create-results, .pr-review, .pr-review-body, .pr-review-name, .pr-nrow-link,
.pr-item, .pr-suggest-btn, .pr-nplace, .pr-skel, .pr-modal-box input,
.pr-bulk-status, .pr-history-svg {
  border-color: var(--pr-line);
}

/* Secondary text follows the muted token. */
.pr-card-meta, .pr-card-top li, .pr-nrow-votes, .pr-review-meta, .pr-trust-count,
.pr-create-sub, .pr-create-exlabel, .pr-desc, .pr-votes, .pr-arg, .pr-rank small {
  color: var(--pr-muted);
}

/* Neutral fills (skeletons) derived from theme contrast. The place pill keeps
   its own accent-tinted background (defined above) for clear visibility. */
.pr-skel-img, .pr-skel-lines span, .pr-skel-cb {
  background: color-mix(in srgb, var(--pr-text, #16181d) 9%, transparent);
}

/* Home blocks and the rating hero are simply centered within their flow and
   never break out of the screen. To make them span the full layout width, place
   the shortcode inside a Wide- or Full-aligned Group block in the editor — the
   widths below will then expand to fill it. */
.pr-create, .pr-grid-wrap, .pr-hero {
  margin-left: auto;
  margin-right: auto;
  transform: none;
}
.pr-grid-wrap { max-width: var(--wp--style--global--wide-size, 1100px); }
/* Hero: just a touch wider than the content column. The bleed is capped to the
   available side space, so it never overflows the screen on any width. */
.pr-hero { max-width: 100%; }
.pr-hero-inner { max-width: var(--wp--style--global--wide-size, 1180px); margin: 0 auto; }

/* ===== Premium "award" header on the rating page ===== */
.pr-hero {
  margin: 0 auto 24px;
  border-radius: 22px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(120% 150% at 50% -20%, rgba(255, 185, 90, .22), transparent 55%),
    linear-gradient(135deg, #14102a 0%, #21163a 55%, #2c182f 100%);
  box-shadow: 0 20px 54px rgba(20, 12, 40, .32);
}
.pr-hero-inner { position: relative; padding: 36px 24px 28px; text-align: center; }
.pr-hero-inner::before {
  content: "🏆";
  position: absolute;
  right: 16px;
  top: 4px;
  font-size: 92px;
  line-height: 1;
  opacity: .07;
  pointer-events: none;
}
.pr-hero-eyebrow {
  display: inline-block;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
  color: #ffd27a;
}
.pr-hero-title {
  margin: .5rem auto .7rem;
  max-width: 20ch;
  font-size: clamp(1.8rem, 4.8vw, 3.1rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: #fff;
}
.pr-hero-lead {
  max-width: 80ch;
  margin: 0 auto 14px;
  color: rgba(255, 255, 255, .82);
  font-size: .92rem;
  line-height: 1.6;
}
.pr-hero-lead p { margin: 0 0 .5rem; }
.pr-hero-lead p:last-child { margin-bottom: 0; }

.pr-hero-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  color: #cbbbe6;
  font-size: .9rem;
}
.pr-hero-avatar { width: 30px; height: 30px; border-radius: 50%; }
.pr-hero-author { font-weight: 600; color: #efe7ff; }
.pr-hero-job { color: #b8acd2; font-weight: 500; }
.pr-hero-dot { opacity: .5; }
.pr-hero-authorlink { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #efe7ff; }
.pr-hero-authorlink:hover .pr-hero-author { text-decoration: underline; }
.pr-hero-bio { margin: .7rem auto 0; max-width: 62ch; color: #cdbfe8; font-size: .9rem; line-height: 1.6; }
.pr-hero-biolink { color: #c3b6df; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.pr-hero-biolink:hover { color: #efe7ff; }
.pr-hero-trust { justify-content: center; margin-top: 18px; margin-bottom: 0; }
.pr-hero-trust .pr-trust-count { color: #cbbbe6; }
.pr-hero-trust .pr-trust-badge { background: rgba(255, 255, 255, .14); color: #fff; }

/* Hide the theme's plain title/byline on rating pages (block themes / TT5) —
   our premium hero provides the H1, author and date instead. */
.single-pr_rating .wp-block-post-title,
.single-pr_rating .wp-block-post-author,
.single-pr_rating .wp-block-post-date,
.single-pr_rating .wp-block-post-author-name {
  display: none;
}

@media (max-width: 560px) {
  .pr-hero-inner { padding: 28px 16px 22px; }
  .pr-hero { border-radius: 18px; }
}

/* ===== Modal text/button visibility (robust against theme button styles) ===== */
.pr-modal-box, .pr-modal-box h3 { color: var(--pr-text, #16181d); }
.pr-modal-box p, .pr-share-why { color: var(--pr-muted, #6b7280); }
.pr-modal-box .pr-modal-cancel { color: var(--pr-muted, #6b7280); background: transparent; }
.pr-modal-box .pr-vote-btn, .pr-modal-box .pr-modal-send { color: #fff; background: var(--pr-accent, #ff5a1f); }
.pr-modal-box .pr-share-btn:not(.pr-share-native) { color: var(--pr-text, #16181d); }
.pr-modal-box .pr-share-native { color: #fff; }
.pr-modal-box .pr-modal-body,
.pr-modal-box input,
.pr-modal-box textarea {
  color: var(--pr-text, #16181d);
  background: var(--pr-bg, #fff);
}