





.psback { position:fixed; inset:0; z-index:62; display:grid; place-items:center; padding:16px;
  background:rgba(8,12,18,.52); animation:psfade .16s ease-out; }
@keyframes psfade { from { opacity:0; } }
.pscard { --me-safe: var(--me, var(--accent)); position:relative; width:min(1080px, 100%); max-height:min(860px, calc(100vh - 32px)); display:flex; flex-direction:column; overflow:hidden;
  border-radius:20px; color:var(--fg); border:1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  background:radial-gradient(900px 260px at 0 0, color-mix(in srgb, var(--me-safe) 12%, transparent), transparent 70%), color-mix(in srgb, var(--bg2) 94%, transparent);
  -webkit-backdrop-filter:blur(26px) saturate(160%); backdrop-filter:blur(26px) saturate(160%);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); animation:psin .26s cubic-bezier(.2,.9,.3,1.08); }
@keyframes psin { from { opacity:0; transform:translateY(10px) scale(.97); } }
.pscard.psready { height:min(860px, calc(100vh - 32px)); }
.psloading { padding:48px; text-align:center; color:var(--fg2); }
.pshead { display:flex; align-items:flex-start; gap:12px; padding:18px 20px 12px; border-bottom:1px solid color-mix(in srgb, var(--fg) 9%, transparent); }
.pstitle { flex:1; min-width:0; }
.pstitle h3 { margin:0; font:650 19px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; letter-spacing:-.15px; }
.pstitle span { display:block; margin-top:4px; font-size:12.5px; color:var(--fg3); }
.psx { width:34px; height:34px; border:0 !important; border-radius:10px; background:none !important; font-size:24px; line-height:1; color:var(--fg3); cursor:pointer; padding:0; }
.psx:hover { color:var(--fg); background:color-mix(in srgb, var(--fg) 8%, transparent) !important; }
.psbody { flex:1; min-height:0; display:flex; flex-direction:column; }
.pstop { flex:none; display:grid; grid-template-columns:210px minmax(0, 1fr); border-bottom:1px solid color-mix(in srgb, var(--fg) 9%, transparent); }


.psprev { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:16px 18px; min-width:0;
  border-right:1px solid color-mix(in srgb, var(--fg) 9%, transparent); background:linear-gradient(180deg, color-mix(in srgb, var(--me-safe) 7%, transparent), transparent 70%); }
.pswho { width:100%; min-width:0; display:flex; flex-direction:column; align-items:center; gap:7px; }
.psframe { flex:none; width:162px; height:126px; display:grid; place-items:center; border-radius:16px; position:relative; overflow:hidden;
  background:radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--me-safe) 40%, #1b2230), #0f141c 80%);
  box-shadow:0 0 0 2px color-mix(in srgb, #febc34 55%, transparent), 0 0 0 6px color-mix(in srgb, #febc34 10%, transparent), 0 18px 40px -18px var(--me-safe); }
.psframe img { max-width:100%; max-height:100%; object-fit:contain; image-rendering:auto; }
.psinit { font:700 46px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.5); }
.psnick { width:100%; font:650 17px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; text-align:center; color:var(--fg); white-space:nowrap; overflow:hidden; }
.psnick.pscustomc { color:var(--me); }
.psenh { padding:4px 10px; border-radius:999px; font:700 11.5px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  background:linear-gradient(90deg, color-mix(in srgb, #febc34 26%, transparent), color-mix(in srgb, #39d3b6 22%, transparent)); box-shadow:inset 0 0 0 1px color-mix(in srgb, #febc34 42%, transparent); }
.pssec { min-width:0; }
.pscolor { padding:14px 22px 16px; }

.psavsec { flex:1; min-height:0; display:flex; flex-direction:column; padding:12px 22px 0; }
.psavsec .psgridwrap { flex:1; min-height:0; margin:0 -16px 0 -6px; }
.psgroups { height:100%; overflow:auto; overscroll-behavior:contain; padding:0 8px 18px 6px; scrollbar-gutter:stable; }


.psscroll::-webkit-scrollbar { width:10px; height:10px; }
.psscroll::-webkit-scrollbar-track, .psscroll::-webkit-scrollbar-corner { background:transparent; }
.psscroll::-webkit-scrollbar-button { display:none; width:0; height:0; }
.psscroll::-webkit-scrollbar-thumb { background-color:color-mix(in srgb, var(--fg) 15%, transparent); border-radius:10px; border:3px solid transparent; background-clip:content-box; min-height:40px; }
.psscroll:hover::-webkit-scrollbar-thumb { background-color:color-mix(in srgb, var(--fg) 26%, transparent); }
.psscroll::-webkit-scrollbar-thumb:hover, .psscroll::-webkit-scrollbar-thumb:active { background-color:color-mix(in srgb, var(--me-safe) 60%, transparent); }
@supports not selector(::-webkit-scrollbar) { .psscroll { scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--fg) 22%, transparent) transparent; } }
.pssec h4 { margin:0; font:650 15.5px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; letter-spacing:-.1px; }
.psnote { margin:4px 0 12px; font-size:12.5px; color:var(--fg3); }


.psswatches { display:flex; flex-wrap:wrap; gap:9px; }
.psswatch { width:34px; height:34px; padding:0; border-radius:50%; border:0 !important; cursor:pointer; position:relative;
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--sw) 55%, #fff), var(--sw) 62%) !important;
  box-shadow:0 4px 12px -6px var(--sw), inset 0 0 0 1px rgba(255,255,255,.22); transition:transform .18s cubic-bezier(.3,1.6,.5,1), box-shadow .18s; }
.psswatch:hover { transform:scale(1.14); }
.psswatch[aria-pressed="true"] { transform:scale(1.1); box-shadow:0 0 0 3px var(--bg2), 0 0 0 5px var(--sw), 0 8px 18px -8px var(--sw); }
.psswatch[aria-pressed="true"]::after { content:"✓"; position:absolute; inset:0; display:grid; place-items:center; font:800 15px/1 system-ui,sans-serif; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.45); }
.psdefault { --sw:#8894a5; background:repeating-conic-gradient(#f2b84b 0 25%, #7fa8ff 0 50%, #74c99a 0 75%, #f2b84b 0) !important; }
.psdefault[aria-pressed="true"]::after { content:"A"; }
.pscustom { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:14px; padding:10px 12px; border-radius:12px;
  background:color-mix(in srgb, var(--fg) 4%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--fg) 8%, transparent); }
.psslider { display:flex; align-items:center; gap:9px; flex:1 1 180px; min-width:150px; font-size:12px; color:var(--fg3); }
.psslider input { flex:1; -webkit-appearance:none; appearance:none; height:10px; border-radius:6px; padding:0 !important; border:0 !important; outline:none; cursor:pointer; }
.pshue { background:linear-gradient(90deg, hsl(0 80% 60%), hsl(60 80% 60%), hsl(120 80% 60%), hsl(180 80% 60%), hsl(240 80% 60%), hsl(300 80% 60%), hsl(359 80% 60%)) !important; }
.pstone { background:linear-gradient(90deg, #8a8f99, var(--me-safe)) !important; }
.psslider input::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.4), 0 0 0 3px var(--me-safe); }
.psslider input::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--me-safe); }
.pshex { width:96px; height:32px; border-radius:9px; font:600 13px var(--mono) !important; text-align:center; }


.psavhead { display:flex; align-items:center; gap:6px 14px; flex-wrap:wrap; margin-bottom:10px; }
.psavhead .psnote { flex:1 1 280px; margin:0; }
.pssearch { width:min(240px, 100%); height:34px; border-radius:10px; }
.pschips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.pschip { display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 11px; border-radius:999px; cursor:pointer; font-size:12.5px; color:var(--fg2);
  background:color-mix(in srgb, var(--fg) 5%, transparent) !important; border:1px solid color-mix(in srgb, var(--fg) 10%, transparent) !important; transition:background .15s, color .15s; }
.pschip b { font:600 10.5px var(--mono); color:var(--fg3); }
.pschip:hover { color:var(--fg); }
.pschip[aria-pressed="true"] { color:var(--fg); background:color-mix(in srgb, var(--me-safe) 16%, transparent) !important; border-color:color-mix(in srgb, var(--me-safe) 45%, transparent) !important; }
.psgridwrap { position:relative; }
.psgroup + .psgroup { margin-top:16px; }

.psgroup h5 { position:sticky; top:0; z-index:1; display:flex; align-items:baseline; gap:8px; margin:0 -8px 8px -6px; padding:7px 8px 6px 6px;
  font:600 13px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; letter-spacing:0; color:var(--fg2);
  background:color-mix(in srgb, var(--bg2) 93%, #0b0f15); box-shadow:0 1px 0 color-mix(in srgb, var(--fg) 8%, transparent); }
.psgroup h5 b { font:600 10.5px var(--mono); color:var(--fg3); }
.psgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:8px; }
.pstile { position:relative; height:78px; padding:6px; border-radius:12px; cursor:pointer; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(circle at 50% 30%, #273042, #121821 85%) !important; border:1px solid rgba(255,255,255,.07) !important;
  transition:transform .18s cubic-bezier(.3,1.5,.5,1), box-shadow .18s, border-color .18s; }
.pstile img { max-width:100%; max-height:100%; object-fit:contain; }
.pstile:hover { transform:translateY(-2px); box-shadow:0 10px 22px -12px rgba(0,0,0,.7); border-color:rgba(255,255,255,.18) !important; }
.pstile.pson { border-color:#febc34 !important; box-shadow:0 0 0 2px color-mix(in srgb, #febc34 70%, transparent), 0 10px 24px -12px #febc34; }
.psnone { color:#9aa4b2; }
.psnoneemo { font-size:26px; line-height:1; }
.psnone small { font-size:11px; }
.psempty { grid-column:1 / -1; padding:18px; text-align:center; color:var(--fg3); font-size:13px; }
.pslocked .psgroups, .pslocked .psswatches, .pslocked .pscustom { filter:blur(1.5px) grayscale(.5); opacity:.45; pointer-events:none; user-select:none; }
.pslocked .psgroups { overflow:hidden; }
.pssecl .pslocked { min-height:200px; }
.pslock { position:absolute; left:50%; top:40px; transform:translateX(-50%); width:min(380px, 92%); padding:20px 22px; text-align:center; border-radius:16px;
  background:color-mix(in srgb, var(--bg2) 92%, transparent); border:1px solid color-mix(in srgb, #febc34 40%, transparent);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.6); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.pslockemo { font-size:30px; margin-bottom:6px; }
.pslock b { display:block; font-size:14.5px; line-height:1.35; }

.pslock .psgamecol { display:inline; color:var(--me); }
.psdonate { display:inline-block; margin-top:12px; padding:9px 18px; border-radius:11px; font-weight:700; color:#10151c !important; text-decoration:none !important;
  background:linear-gradient(90deg, #febc34, #39d3b6); box-shadow:0 8px 20px -10px #febc34; transition:transform .15s; }
.psdonate:hover { transform:translateY(-1px) scale(1.03); }

.psfoot { display:flex; align-items:center; gap:10px; padding:12px 20px; border-top:1px solid color-mix(in srgb, var(--fg) 9%, transparent); }
.psmsgline { flex:1; font-size:12.5px; color:var(--fg3); }
.psmsgline.psok { color:var(--ok); } .psmsgline.psbad { color:var(--fail); }
.psbtn { height:38px; padding:0 18px; border-radius:11px; cursor:pointer; font-weight:600; }
.pssave { color:var(--fg) !important; border:1px solid color-mix(in srgb, var(--me-safe) 55%, transparent) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.1), transparent), color-mix(in srgb, var(--me-safe) 22%, var(--bg3)) !important; }
.pssave:disabled { opacity:.45; cursor:default; }



@media (min-width: 761px) and (max-height: 780px) {
  .psbody { display:block; overflow:auto; overscroll-behavior:contain; }
  .psavsec { display:block; padding-bottom:14px; }
  .psgroups { height:auto; overflow:visible; }
}
@media (max-width: 760px) {
  .psback { padding:0; place-items:stretch; }
  .pscard, .pscard.psready { width:100%; max-height:none; height:100%; height:100dvh; border-radius:0; border:0; }
  .pshead { padding:12px 14px 10px; }
  .pstitle h3 { font-size:20px; }

  .psbody { display:block; overflow:auto; overscroll-behavior:contain; }
  .pstop { grid-template-columns:minmax(0, 1fr); }
  .psprev { flex-direction:row; justify-content:flex-start; gap:14px; padding:14px; border-right:0; border-bottom:1px solid color-mix(in srgb, var(--fg) 9%, transparent); }
  .pswho { align-items:flex-start; }
  .psframe { width:112px; height:88px; border-radius:12px; }
  .psinit { font-size:38px; }
  .psnick { text-align:left; }
  .pscolor { padding:12px 14px 14px; }
  .psavsec { display:block; padding:12px 14px 14px; }
  .psavsec .psgridwrap { margin:0; }
  .psgroups { height:auto; overflow:visible; padding:0; }
  .psgroup h5 { margin:0 0 8px; padding:7px 0 6px; }
  .pssearch { width:100%; }
  .pschips { flex-wrap:nowrap; overflow-x:auto; margin:0 -14px 10px; padding:0 14px 2px; scrollbar-width:none; }
  .pschips::-webkit-scrollbar { display:none; }
  .pschip { flex:none; }
  .psgrid { grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); gap:6px; }
  .pstile { height:62px; padding:4px; border-radius:10px; }
  .pslock { top:20px; }
  .psfoot { padding:10px 14px calc(10px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .psback, .pscard, .psswatch, .pstile, .psdonate { animation:none !important; transition:none !important; } }
