/* ===================================================================
   The /pr/ page's look for site pages built on styles.css — shared by the
   homepage (with home-pr.css) and /rating/. Tokens, the Helvetica Neue / Arial
   stack, the top row, light pill buttons, the footer colours; everything is
   scoped by body.prl, so a page without that class keeps the classic design.
   =================================================================== */
body.prl{
  --bg:#0a0a0c; --ink:#f2f2f4; --ink-soft:#cbcbd1; --muted:#a3a3ad; --faint:#797983;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.17); --panel:#111013; --wash:rgba(255,255,255,.045); --light:#f4f4f6;
  --band:transparent; --text:var(--ink); --stroke:var(--line); --stroke-2:var(--line-2);
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif; --wrap:1040px;
  color-scheme:dark;
  background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;
}
.prl h1,.prl h2,.prl h3{font-family:var(--sans);text-transform:none}
.prl :where(a,button,summary):focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.prl .grad{color:var(--faint)}

/* ---- Top row: no bar, just the brand, the links and the switch ---- */
.prl .nav{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--line)}
.prl .nav-inner{max-width:var(--wrap);padding:18px 24px}
.prl .brand-mark{width:28px;height:28px}
.prl .brand-name{font-size:19px;font-weight:700;letter-spacing:-.02em}
.prl .nav-links{gap:22px}
.prl .nav-links a,.prl .nav-invite{color:var(--muted);font-weight:500;font-size:14px}
.prl .nav-links a:hover,.prl .nav-invite:hover{color:var(--ink)}
.prl .lang-switch{gap:2px;padding:2px;background:transparent;border:1px solid var(--line-2);border-radius:999px}
.prl .lang-switch button{min-height:34px;padding:5px 13px;border-radius:999px;font-size:13.5px;font-weight:500;letter-spacing:0;color:var(--muted)}
.prl .lang-switch button.active{background:var(--light);color:#0a0a0c}
.prl .nav-login{height:40px;padding:0 16px;border-radius:999px;background:transparent;border:1px solid var(--line-2);color:var(--ink);font-weight:500}
.prl .nav-login:hover{background:transparent;border-color:var(--ink)}
.prl .nav-login svg{color:var(--ink-soft)}
.prl .nav-av{border-color:var(--line-2);background-color:#1d1c22}
.prl .nav-av:hover{box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.prl .nav-menu{background:var(--panel);border-color:var(--line-2);border-radius:16px}
.prl .nm-banner{background:linear-gradient(135deg,#2a2930,#17161b)}
.prl .nm-items a.active,.prl .nm-items a.active svg{color:var(--ink);background:var(--wash)}

/* ---- Buttons: light pills ---- */
.prl .btn{border-radius:999px;text-transform:none;letter-spacing:-.005em;font-weight:500;font-size:14px;padding:11px 20px;box-shadow:none}
.prl .btn-primary{background:var(--light);color:#0a0a0c;border-color:transparent}
.prl .btn-primary:hover{background:#fff;box-shadow:none;transform:none}
.prl .btn-ghost{background:transparent;border:1px solid var(--line-2);color:var(--ink)}
.prl .btn-ghost:hover{background:transparent;border-color:var(--ink)}
.prl .btn-discord{border-radius:999px;background:transparent;border:1px solid var(--line-2);color:var(--ink);font-weight:500;font-size:14px;padding:11px 20px}
.prl .btn-discord:hover{background:transparent;border-color:var(--ink)}
.prl .btn-discord svg{color:var(--ink-soft);width:18px;height:18px}

.prl .footer{border-top:1px solid var(--line);color:var(--faint)}
.prl .footer-links a{color:var(--muted);font-weight:500}
.prl .footer-links a:hover{color:var(--ink)}
.prl .footer-copy{color:var(--faint)}

@media (max-width:600px){
  .prl .nav-inner{padding:14px 18px}
}