.sp-save-attention::after {
  content: "";
  display: inline-block;
  width: .55rem;
  height: .55rem;
  margin-inline-start: .25rem;
  border-radius: 50%;
  background: #aa4030;
  box-shadow: 0 0 0 2px #fff3e7;
  flex: none;
}
.sp{--sp-royal:#5633b8;--sp-deep:#42248e;--sp-lilac:#eee4ff;--sp-gold:#ffdc68;--sp-coral:#ef754f;--sp-mint:#2f8f6b}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sp-nav{margin-top:4px}.sp-top{border:1px solid #d8c8ef;background:#fbf8ff;color:#5633b8;border-radius:999px;padding:6px 14px;font-weight:800;font-size:13px;min-height:36px}
.sp-header .pg-links{flex-wrap:wrap}
.sp-alert{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff1ec;border:1px solid #f4b9a5;color:#7a2e17;border-radius:16px;padding:14px 18px;margin-bottom:20px}.sp-alert p{margin:0;font-size:14px}
.sp-notice{background:#f3eefe;border-radius:14px;padding:12px 16px;color:#42248e;font-size:14px;margin:0 0 20px}
.sp-fine{font-size:12px;color:var(--muted);margin:6px 0 0;line-height:1.5}.sp-ok{color:#2f8f6b;font-weight:700}
.sp-id{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:22px;background:var(--sp-royal);color:#fff;border-radius:26px;padding:26px 28px;margin-bottom:30px;box-shadow:0 5px 0 var(--sp-deep);animation:pgIn .45s ease both}
.sp-id .eyebrow{color:var(--sp-gold)}.sp-id h2{font-family:'Fredoka',sans-serif;font-size:28px;margin:2px 0 0;color:#fff;overflow-wrap:anywhere}.sp-id .sp-fine{color:#ddd0ff}
.sp-id-main{display:flex;gap:16px;align-items:flex-start}
.sp-avatar{flex-shrink:0;width:58px;height:58px;border-radius:18px;background:var(--sp-gold);color:#42248e;display:grid;place-items:center;font-family:'Fredoka',sans-serif;font-weight:600;font-size:22px;transform:rotate(-4deg)}
.sp-avatar.sm{width:40px;height:40px;border-radius:12px;font-size:15px;background:var(--sp-lilac);color:#5633b8}
.sp-name-form label,.sp-add label{display:block;font-weight:800;font-size:13px;margin-bottom:8px}
.sp-inline{display:flex;gap:8px}.sp-inline input,.sp-code-fallback{flex:1;min-width:0;min-height:44px;padding:9px 13px;border:1px solid #d8c8ef;border-radius:12px;font:inherit;font-size:16px;color:var(--ink);background:#fff}
.sp-inline input:focus-visible,.sp-code-fallback:focus-visible{outline:3px solid #3271dc;outline-offset:2px}
.sp-code-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.sp-code-row code{font-family:'Space Mono',ui-monospace,monospace;font-size:20px;letter-spacing:2px;background:#ffffff1f;border:1px dashed #ffffff70;padding:8px 14px;border-radius:12px;color:var(--sp-gold)}
.sp-code-fallback{width:100%;margin-top:6px;font-family:ui-monospace,monospace}
.sp-id .secondary{background:#fff;color:#42248e}
.sp-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:start}
.sp-grid section,.sp-grid aside{margin-bottom:28px}
.sp-friends,.sp-cmp{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px 22px}
.sp-sub{font-size:12px;letter-spacing:1.3px;text-transform:uppercase;color:#7950ad;margin:20px 0 8px}
.sp-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sp-person{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;border-radius:14px;border:1px solid var(--line)}
.sp-person.is-active{border-color:var(--sp-royal);background:#fbf8ff}.sp-person.is-incoming{border-color:var(--sp-gold);background:#fffbea}
.sp-person-name{flex:1;min-width:120px;font-weight:800;overflow-wrap:anywhere;display:flex;flex-direction:column}.sp-person-name small{font-weight:600;color:var(--muted);font-size:12px}
.sp-actions{display:flex;gap:6px;align-items:center}
.sp .sm{padding:7px 13px;font-size:13px;min-height:36px}
.sp .danger{background:#c2412a;color:#fff;border:0;border-radius:999px;padding:8px 16px;font-weight:800;min-height:36px}
.sp-confirm{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff1ec;border-radius:12px;padding:10px 12px}.sp-confirm p{flex-basis:100%;margin:0;font-size:13px;color:#7a2e17}
.sp-empty{border:1px dashed #c9b8e0;border-radius:16px;padding:18px 20px;background:#fff;color:var(--muted);font-size:14px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-top:12px}.sp-empty p{margin:0}.sp-empty strong{color:var(--ink)}
.sp-cmp-idle h2{font-family:'Fredoka',sans-serif;margin:0 0 6px}.sp-cmp-idle p{margin:0;color:var(--muted);font-size:14px}
.sp-tally{font-size:14px;color:#42248e;font-weight:700;margin:0 0 12px}
.sp-table-wrap{overflow-x:auto}.sp-table{width:100%;border-collapse:collapse;font-size:14px}
.sp-table th,.sp-table td{padding:11px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.sp-table thead th{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.sp-table tbody th{font-weight:700;display:flex;flex-direction:column;gap:2px}.sp-table tbody th small{color:var(--muted);font-weight:600;font-size:12px}
.sp-table td strong{font-family:'Fredoka',sans-serif;font-size:20px}.sp-table td small{color:var(--muted)}
.sp-unplayed{color:var(--muted);font-size:12px;font-style:italic}
.sp-verdict{display:inline-block;padding:4px 10px;border-radius:999px;font-weight:800;font-size:12px;white-space:nowrap}
.sp-verdict.up{background:#e3f5ec;color:#1e6b4e}.sp-verdict.down{background:#fff1ec;color:#a13a20}.sp-verdict.tie{background:#fff6d4;color:#6d5300}.sp-verdict.solo{background:#f1f2f4;color:#4b585d}
.sp-kind{font-size:10px;letter-spacing:1.3px;text-transform:uppercase;font-weight:800;color:#7950ad}
.sp-hist-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sp-hist{display:flex;gap:15px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:17px;padding:13px 16px;animation:pgIn .35s ease both}
.sp-hist-score{flex-shrink:0;width:70px;height:58px;border-radius:14px;background:var(--sp-lilac,#eee4ff);color:#5633b8;display:flex;align-items:baseline;justify-content:center;padding-top:14px;transform:rotate(-3deg)}
.sp-hist-score strong{font-family:'Fredoka',sans-serif;font-size:24px;line-height:1}.sp-hist-score small{font-size:12px;font-weight:700}
.sp-hist-text{display:flex;flex-direction:column;gap:2px;min-width:0}.sp-hist-text strong{font-family:'Fredoka',sans-serif;font-weight:500;font-size:17px;overflow-wrap:anywhere}.sp-hist-text>span:last-child{font-size:12px;color:var(--muted)}
.sp-more{margin-top:14px;width:100%}.sp-end{text-align:center}
.sp-privacy{background:#fffbea;border:1px solid #f1df9c;border-radius:20px;padding:18px 22px}.sp-privacy h2{font-family:'Fredoka',sans-serif;font-size:20px;margin:0 0 8px}.sp-privacy ul{margin:0;padding-left:18px;display:grid;gap:8px;font-size:13px;line-height:1.55;color:#4b4430}
.sp-guest{display:flex;gap:22px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;margin-bottom:24px}
.sp-guest h2{font-family:'Fredoka',sans-serif;margin:0 0 8px}.sp-guest p{color:var(--muted);margin:0 0 16px;line-height:1.6}
.sp-guest-seal{flex-shrink:0;width:96px;height:96px;border-radius:50%;background:var(--sp-royal,#5633b8);color:#ffdc68;display:grid;place-items:center;font-family:'Fredoka',sans-serif;font-size:30px;font-weight:600;box-shadow:0 0 0 6px #eee4ff;transform:rotate(-8deg)}
.sp-btn-link{display:inline-flex;align-items:center;text-decoration:none}
.sp-skel{display:grid;gap:12px}.sp-skel-card{height:150px;border-radius:24px}.sp-skel-row{display:flex;gap:12px}.sp-skel-row span{height:56px;border-radius:14px;flex:1}.sp-skel-row span:first-child{flex:0 0 70px}
.sp-skel-card,.sp-skel-row span{background:#ece6f6;animation:spPulse 1.3s ease-in-out infinite}
@keyframes spPulse{50%{opacity:.5}}
@media (max-width:900px){.sp-id{grid-template-columns:1fr}.sp-grid{grid-template-columns:1fr}}
@media (max-width:560px){.sp-inline{flex-direction:column}.sp-guest{flex-direction:column;text-align:center}.sp-id{padding:22px 18px}.sp-table thead th:nth-child(4),.sp-table td:nth-child(4){white-space:normal}}
@media (prefers-reduced-motion:reduce){.sp-hist,.sp-id,.sp-skel-card,.sp-skel-row span{animation:none}}

.sp-acct{background:#fff;border:2px solid var(--sp-royal);border-radius:24px;padding:20px 24px;margin-bottom:24px;box-shadow:0 4px 0 var(--sp-deep);min-width:0}
.sp-acct h2{font-family:'Fredoka',sans-serif;font-size:24px;margin:2px 0 4px}.sp-acct .eyebrow{color:#7950ad}
.sp-acct-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.sp-acct-actions,.sp-acct-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sp-acct-status{display:inline-flex;align-items:center;gap:8px;margin:0;font-weight:800;font-size:13px;padding:4px 12px;border-radius:999px;background:#f3eefe;color:#42248e}
.sp-acct-status.is-ok{background:#e3f5ec;color:#1e6b4e}.sp-acct-status.is-warn{background:#fff1ec;color:#a13a20}
.sp-dot{width:8px;height:8px;border-radius:50%;background:currentColor}.is-busy .sp-dot{animation:spPulse 1.1s ease-in-out infinite}
.sp-acct-body{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.sp-acct-lead{margin:0 0 8px}.sp-acct-msg{font-size:13px;color:#42248e;margin:0 0 6px;overflow-wrap:anywhere}
.sp-acct-warn{background:#fff1ec;border:1px solid #f4b9a5;color:#7a2e17;border-radius:12px;padding:10px 12px;font-size:13px;margin:10px 0 0;overflow-wrap:anywhere}
.sp-acct-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.sp-acct-list li{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;border:1px solid #f1df9c;background:#fffbea;border-radius:14px;padding:10px 12px;font-size:14px;overflow-wrap:anywhere}
.sp-acct-list li>span:first-child{flex:1;min-width:180px}
.sp-acct-rec{margin-top:6px}
.sp-save-options>summary{cursor:pointer;width:fit-content;font-size:14px;font-weight:700;color:var(--sp-royal);border-radius:6px}
.sp-save-options[open]>summary{margin-bottom:14px}
.sp-save-options>summary:focus-visible{outline:3px solid #3271dc;outline-offset:4px}
.sp-acct-retry{margin-top:12px}
.sp-acct-warn~.sp-save-options,.sp-acct-list~.sp-save-options,.sp-acct-retry~.sp-save-options{margin-top:16px}
.sp-acct button:focus-visible,.sp-acct a:focus-visible{outline:3px solid #3271dc;outline-offset:2px}
@media (max-width:560px){.sp-acct{padding:18px 16px}.sp-acct-actions>*{flex:1 1 auto;justify-content:center}}
@media (prefers-reduced-motion:reduce){.is-busy .sp-dot{animation:none}}