:root {
  --pa-bg:#0d1015;
  --pa-panel:#181c23;
  --pa-panel-2:#202632;
  --pa-text:#f2f5f8;
  --pa-muted:#9aa6b2;
  --pa-accent:#22c55e;
  --pa-accent-2:#4ade80;
  --pa-border:#2c3442;
  --pa-good:#42d392;
  --pa-shadow:0 18px 48px rgba(0,0,0,.36);
}

* { box-sizing:border-box; }
body {
  margin:0;
  min-height:100vh;
  color:var(--pa-text);
  background:linear-gradient(180deg,#0d1015 0%,#141922 100%);
  font-family:Inter,Arial,sans-serif;
}

.pa-wrap { width:min(1120px,calc(100% - 32px)); margin:0 auto; padding:28px 0 56px; }
.pa-panel {
  overflow:hidden;
  border:1px solid var(--pa-border);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.015)),rgba(24,28,35,.96);
  box-shadow:var(--pa-shadow);
}
.pa-hero { padding:20px 24px 16px; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.18); text-align:center; }
.pa-hero img { display:block; width:min(900px,100%); height:auto; margin:auto; }
.pa-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:22px 24px; border-bottom:1px solid rgba(255,255,255,.08); }
.pa-title { margin:0; font-size:clamp(24px,4vw,34px); line-height:1.15; }
.pa-subtitle { margin:7px 0 0; color:var(--pa-muted); line-height:1.5; }
.pa-controls { display:grid; grid-template-columns:minmax(220px,1fr) 170px 210px; gap:12px; padding:18px 24px; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.1); }
.pa-control label { display:block; margin:0 0 7px; color:var(--pa-muted); font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.pa-input,.pa-select,.pa-button {
  width:100%; min-height:44px; border:1px solid var(--pa-border); border-radius:12px;
  background:#151a22; color:var(--pa-text); padding:10px 13px; font:inherit; outline:none;
}
.pa-input:focus,.pa-select:focus { border-color:var(--pa-accent); box-shadow:0 0 0 3px rgba(34,197,94,.12); }
.pa-button { width:auto; cursor:pointer; font-weight:800; transition:.16s ease; }
.pa-button:hover:not(:disabled) { border-color:var(--pa-accent); background:var(--pa-panel-2); }
.pa-button:disabled { opacity:.45; cursor:not-allowed; }
.pa-status { padding:28px 24px; color:var(--pa-muted); }
.pa-rows { display:grid; }
.pa-row { display:grid; grid-template-columns:62px minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px 22px; border-bottom:1px solid rgba(255,255,255,.06); }
.pa-row:last-child { border-bottom:0; }
.pa-row:hover { background:rgba(255,255,255,.025); }
.pa-rank { color:var(--pa-accent-2); font-size:18px; font-weight:1000; }
.pa-viewer { display:flex; align-items:center; gap:12px; min-width:0; }
.pa-avatar { width:46px; height:46px; flex:0 0 46px; border:2px solid rgba(255,255,255,.12); border-radius:50%; object-fit:cover; background:#10141a; }
.pa-avatar-fallback { display:grid; place-items:center; color:white; font-weight:1000; background:linear-gradient(135deg,var(--pa-accent),#16a34a); }
.pa-viewer-copy { min-width:0; }
.pa-name { color:var(--pa-text); font-weight:850; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pa-name:hover { color:var(--pa-accent-2); }
.pa-platforms { display:flex; gap:5px; margin-top:5px; }
.pa-platform-icon { width:17px; height:17px; object-fit:contain; }
.pa-score { min-width:120px; text-align:right; color:var(--pa-text); font-size:18px; font-weight:1000; }
.pa-score small { display:block; margin-top:2px; color:var(--pa-muted); font-size:11px; font-weight:750; text-transform:uppercase; letter-spacing:.06em; }
.pa-pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 22px; border-top:1px solid rgba(255,255,255,.08); }
.pa-page-copy { color:var(--pa-muted); font-size:13px; text-align:center; }
.pa-pagination-actions { display:flex; gap:8px; }
.pa-directory-controls { display:grid; grid-template-columns:minmax(260px,1fr) minmax(360px,1.4fr); gap:20px; align-items:end; padding:18px 24px; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.1); }
.pa-platform-filter { display:flex; align-items:center; gap:9px; flex-wrap:wrap; min-width:0; margin:0; padding:0; border:0; }
.pa-platform-filter legend { width:100%; margin:0 0 7px; padding:0; color:var(--pa-muted); font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.pa-platform-filter label { display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border:1px solid var(--pa-border); border-radius:999px; background:#151a22; color:var(--pa-text); font-size:13px; cursor:pointer; }
.pa-platform-filter label:has(input:checked) { border-color:rgba(34,197,94,.6); background:rgba(34,197,94,.12); }
.pa-platform-filter input { margin:0; accent-color:var(--pa-accent); }
.pa-streamer-grid { display:grid; grid-template-columns:1fr; gap:9px; padding:20px; }
.pa-streamer-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:11px 15px; border:1px solid var(--pa-border); border-radius:15px; background:rgba(255,255,255,.02); }
.pa-streamer-card:hover { border-color:rgba(34,197,94,.45); background:rgba(34,197,94,.035); }
.pa-directory-platforms { display:flex; align-items:center; justify-content:flex-end; gap:5px; min-height:20px; }
.pa-directory-platforms .pa-platforms { margin-top:0; }
.pa-platform-link { display:inline-flex; border-radius:5px; transition:transform .15s ease,filter .15s ease; }
.pa-platform-link:hover { transform:translateY(-1px); filter:brightness(1.2); }
.pa-platform-link:focus-visible { outline:2px solid var(--pa-accent-2); outline-offset:3px; }
.pa-platform-wordmark { display:inline-grid; place-items:center; height:17px; padding:0 5px; border-radius:4px; background:var(--pa-accent); color:#08110c; font-size:10px; font-weight:1000; }
.pa-card-meta { margin-top:5px; color:var(--pa-muted); font-size:12px; }
.pa-card-arrow { color:var(--pa-accent-2); font-size:26px; }

.pa-profile-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px; border-bottom:1px solid rgba(255,255,255,.08); }
.pa-profile-person { display:flex; align-items:center; gap:16px; min-width:0; }
.pa-profile-person .pa-avatar { width:72px; height:72px; flex-basis:72px; }
.pa-profile-name { margin:0; font-size:clamp(25px,4vw,36px); overflow-wrap:anywhere; }
.pa-profile-totals { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.pa-pill { padding:9px 13px; border:1px solid rgba(34,197,94,.35); border-radius:999px; background:rgba(34,197,94,.1); color:#d9ffec; font-size:13px; font-weight:850; }
.pa-back { display:inline-flex; margin-bottom:16px; color:var(--pa-accent-2); font-weight:800; text-decoration:none; }
.pa-back:hover { text-decoration:underline; }
.pa-accordions { display:grid; gap:12px; padding:20px; }
.pa-details { border:1px solid var(--pa-border); border-radius:15px; background:rgba(255,255,255,.018); overflow:hidden; }
.pa-details > summary { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 17px; cursor:pointer; list-style:none; font-weight:850; }
.pa-details > summary::-webkit-details-marker { display:none; }
.pa-details > summary:hover { background:rgba(255,255,255,.03); }
.pa-details > summary::before { content:'›'; color:var(--pa-accent-2); transition:transform .16s ease; }
.pa-details[open] > summary::before { transform:rotate(90deg); }
.pa-summary-title { flex:1; }
.pa-summary-meta { color:var(--pa-muted); font-size:12px; white-space:nowrap; }
.pa-details-body { display:grid; gap:10px; padding:12px 14px 14px; border-top:1px solid rgba(255,255,255,.065); }
.pa-platform-group { margin-left:12px; }
.pa-track { margin-left:12px; }
.pa-metric { margin-left:12px; }
.pa-metric-heading { display:flex; justify-content:space-between; gap:12px; color:var(--pa-muted); font-size:13px; }
.pa-accolades { display:grid; gap:8px; }
.pa-accolade { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; padding:14px; border:1px solid rgba(255,255,255,.09); border-radius:13px; background:rgba(255,255,255,.025); }
.pa-accolade.earned { border-color:rgba(66,211,146,.38); background:rgba(66,211,146,.08); }
.pa-accolade.locked { opacity:.55; filter:grayscale(.7); }
.pa-accolade h4 { margin:0 0 6px; font-size:15px; }
.pa-accolade p { margin:0; color:var(--pa-muted); font-size:13px; line-height:1.45; }
.pa-accolade-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; color:var(--pa-muted); font-size:12px; }
.pa-accolade-side { text-align:right; white-space:nowrap; }
.pa-accolade-state { color:var(--pa-good); font-size:12px; font-weight:900; }
.pa-accolade.locked .pa-accolade-state { color:var(--pa-muted); }
.pa-accolade-points { margin-top:5px; color:var(--pa-accent-2); font-weight:900; }

@media (max-width:760px) {
  .pa-wrap { width:min(100% - 20px,1120px); padding-top:14px; }
  .pa-intro,.pa-profile-hero { align-items:flex-start; flex-direction:column; }
  .pa-controls { grid-template-columns:1fr; }
  .pa-directory-controls,.pa-streamer-grid { grid-template-columns:1fr; }
  .pa-streamer-card { grid-template-columns:auto minmax(0,1fr) auto; }
  .pa-directory-platforms { grid-column:2; justify-content:flex-start; }
  .pa-card-arrow { grid-column:3; grid-row:1 / span 2; }
  .pa-row { grid-template-columns:48px minmax(0,1fr); padding:13px 14px; }
  .pa-score { grid-column:2; min-width:0; text-align:left; }
  .pa-pagination { flex-direction:column; }
  .pa-profile-totals { justify-content:flex-start; }
  .pa-platform-group,.pa-track,.pa-metric { margin-left:0; }
  .pa-accolade { grid-template-columns:1fr; }
  .pa-accolade-side { text-align:left; }
}