/* Profile "My songs": crate carousel + See-all mosaic. */
#profSongsBlock{ padding:20px 0 4px; }
.sg-hd{ display:flex; align-items:center; gap:8px; margin:0 2px 8px; }
.sg-hd b{ font:800 12px var(--sans); letter-spacing:.16em; } .sg-hd em{ font:700 11px var(--sans); color:var(--faint); font-style:normal; }
.sg-hd .ic{ width:26px; height:26px; border-radius:8px; background:rgba(124,92,255,.16); color:#b9a8ff; display:grid; place-items:center; }
.sg-all{ margin-left:auto; border:0; background:none; color:var(--accent); font:700 12px var(--sans); cursor:pointer; padding:6px 2px; }
.sg-stage{ --c:#7c5cff; position:relative; height:196px; margin:0 -16px; overflow:hidden; touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:grab; outline:0; }
.sg-glow{ position:absolute; left:50%; top:34px; width:300px; height:170px; margin-left:-150px; background:radial-gradient(closest-side, color-mix(in srgb, var(--c) 50%, transparent), transparent); opacity:.8; transition:background .5s; pointer-events:none; }
.sg-row{ position:absolute; inset:0; perspective:700px; perspective-origin:50% 50%; }
.sg-card{ position:absolute; left:50%; top:14px; width:150px; height:150px; margin-left:-75px; -webkit-backface-visibility:hidden; backface-visibility:hidden;
  transition:transform .45s cubic-bezier(.2,.9,.25,1), opacity .35s; will-change:transform; }
.sg-card .cv{ position:absolute; inset:0; border-radius:4px; background:#1a1826; overflow:hidden; box-shadow:0 18px 36px rgba(0,0,0,.6); }
.sg-card .cv::after{ content:""; position:absolute; inset:0; z-index:3; background:#000; opacity:var(--dim, 0); transition:opacity .45s; pointer-events:none; }   /* dimming without filter */
.sg-card .cv img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; pointer-events:none; -webkit-user-drag:none; }
.sg-ph{ position:absolute; inset:0; display:grid; place-items:center; font:800 34px var(--disp); color:rgba(255,255,255,.9); }
.sg-card .vin{ position:absolute; left:6%; top:6%; width:88%; height:88%; border-radius:50%; background:repeating-radial-gradient(circle, #101014 0 2px, #17171c 2px 4px);
  box-shadow:0 8px 20px rgba(0,0,0,.5); transition:left .6s cubic-bezier(.2,.9,.25,1) .15s; }
.sg-card .vin::after{ content:""; position:absolute; left:50%; top:50%; width:30%; height:30%; margin:-15%; border-radius:50%; background:var(--c, #7c5cff); }
.sg-card.c .vin{ left:34%; }
.sg-meta{ text-align:center; margin-top:2px; }
.sg-t{ font:800 19px/1.2 var(--disp); letter-spacing:-.02em; padding:0 10px; }
.sg-a{ font:600 13px var(--sans); color:#c3c1d0; margin-top:2px; }
.sg-src{ font:500 11px var(--sans); color:var(--faint); margin-top:6px; } .sg-src u{ text-decoration:none; color:var(--muted); }
.sg-act{ display:flex; justify-content:center; gap:10px; margin:12px 0 8px; }
.sg-act button{ display:inline-flex; gap:7px; align-items:center; font:700 12px var(--sans); padding:8px 13px; border-radius:99px; border:0; background:rgba(255,255,255,.07); color:#d6d4e2; cursor:pointer; }
.sg-act button:disabled{ opacity:.35; cursor:default; } .sg-act button.on{ color:var(--accent); }
.sg-cnt{ font:700 11px var(--sans); color:var(--faint); letter-spacing:.06em; font-variant-numeric:tabular-nums; }
@media (prefers-reduced-motion:reduce){ .sg-card, .sg-card .vin{ transition:none; } }
/* See all */
.sg-wall{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.sg-tile{ position:relative; aspect-ratio:1; padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.sg-tile .cv{ position:absolute; inset:0; border-radius:4px; background:#1a1826; overflow:hidden; }
.sg-tile .cv img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.sg-tile .sg-ph{ font-size:22px; }
.sg-tile.big{ grid-column:span 2; grid-row:span 2; } .sg-tile.big .sg-ph{ font-size:48px; }
.sg-tile .cap{ position:absolute; z-index:2; left:0; right:0; bottom:0; padding:34px 12px 11px; border-radius:0 0 4px 4px; background:linear-gradient(transparent, rgba(0,0,0,.75)); text-align:left; font:600 12px var(--sans); color:#d6d4e2; }
.sg-tile .cap b{ display:block; font:800 15px var(--disp); color:#fff; }
.sg-tile .new{ position:absolute; z-index:2; left:10px; top:10px; font:800 9.5px var(--sans); letter-spacing:.14em; color:#fff; background:var(--accent); padding:4px 7px; border-radius:99px; }
.sg-tile:active .cv{ opacity:.85; }

.sg-stage::before, .sg-stage::after{ content:""; position:absolute; top:0; bottom:0; width:56px; z-index:20; pointer-events:none; }
.sg-stage::before{ left:0; background:linear-gradient(90deg, var(--bg), transparent); }
.sg-stage::after{ right:0; background:linear-gradient(270deg, var(--bg), transparent); }