/* ============================================================
   SoundGIFs design system
   Premium dark media platform theme. Self-contained — does not
   depend on the SoftwarePays Tailwind build so this domain can
   evolve independently while sharing the same backend.
   ============================================================ */

:root{
  --sg-bg:#05070D;
  --sg-bg-2:#0A0E17;
  --sg-card:#0E131E;
  --sg-elevated:#131927;
  --sg-purple:#8B5CF6;
  --sg-purple-bright:#A855F7;
  --sg-blue:#38BDF8;
  --sg-pink:#EC4899;
  --sg-green:#22C55E;
  --sg-text:#F8FAFC;
  --sg-text-muted:#94A3B8;
  --sg-border:rgba(255,255,255,0.08);
  --sg-radius-sm:12px;
  --sg-radius-md:16px;
  --sg-radius-lg:20px;
  --sg-header-h:100px;
  --sg-sidebar-w:216px;
  --sg-player-h:76px;
}

:root[data-theme="light"]{
  --sg-bg:#F8FAFC;
  --sg-bg-2:#F1F5F9;
  --sg-card:#FFFFFF;
  --sg-elevated:#EEF2F7;
  --sg-purple:#8B5CF6;
  --sg-purple-bright:#7C3AED;
  --sg-blue:#0EA5E9;
  --sg-pink:#EC4899;
  --sg-green:#16A34A;
  --sg-text:#0F172A;
  --sg-text-muted:#64748B;
  --sg-border:rgba(15,23,42,0.1);
}
:root[data-theme="light"] .sg-icon-btn:hover,
:root[data-theme="light"] .sg-card:hover,
:root[data-theme="light"] .sg-player-action-btn:hover,
:root[data-theme="light"] .sg-detail-action:hover{border-color:rgba(15,23,42,.18)}
:root[data-theme="light"] .sg-tag-pill{box-shadow:none}
/* These three panels use backdrop-filter blur, which needs a literal translucent color
   (not a plain --sg-bg hex) to blend with content scrolling underneath — so they don't
   pick up the theme swap via variables like everything else and need explicit overrides. */
:root[data-theme="light"] .sg-header{background:rgba(255,255,255,.85)}
:root[data-theme="light"] .sg-bottom-nav{background:rgba(248,250,252,.92)}
/* Footer has no background of its own, so the ambient grid/orbs bleed through and tint it
   lavender instead of clean white — pin it opaque in light mode. */
:root[data-theme="light"] .sg-footer{background:#fff}
:root[data-theme="light"] .sg-player{background:rgba(255,255,255,.96)}

/* "Global Ambient Background" — ported straight from softwarepays.com's body layer (glowing
   blurred orbs + a faint 40px grid), just re-keyed off [data-theme] instead of Tailwind's
   dark: class variant since that's how this site's toggle already works. */
.sg-ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.sg-ambient-orb{position:absolute;border-radius:9999px;mix-blend-mode:screen;animation:sg-ambient-pulse ease-in-out infinite}
.sg-ambient-orb-1{top:-20%;left:-10%;width:50%;height:50%;background:rgba(37,99,235,.2);filter:blur(120px);animation-duration:8s}
.sg-ambient-orb-2{top:40%;right:-10%;width:40%;height:60%;background:rgba(79,70,229,.1);filter:blur(120px);animation-duration:10s;animation-direction:alternate}
.sg-ambient-orb-3{bottom:-20%;left:20%;width:60%;height:40%;background:rgba(147,51,234,.1);filter:blur(150px);animation-duration:12s;animation-direction:alternate-reverse}
.sg-ambient-grid{position:absolute;inset:0;opacity:.03;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:40px 40px}
@keyframes sg-ambient-pulse{0%,100%{opacity:1}50%{opacity:.5}}

:root[data-theme="light"] .sg-ambient-orb{mix-blend-mode:multiply}
:root[data-theme="light"] .sg-ambient-orb-1{background:rgba(96,165,250,.3);filter:blur(100px)}
:root[data-theme="light"] .sg-ambient-orb-2{background:rgba(165,180,252,.3)}
:root[data-theme="light"] .sg-ambient-orb-3{background:rgba(216,180,254,.2)}
:root[data-theme="light"] .sg-ambient-grid{background-image:linear-gradient(#000 1px,transparent 1px),linear-gradient(90deg,#000 1px,transparent 1px)}

.sg *{box-sizing:border-box}
/* Hard guarantee against horizontal scroll/drag — no legitimate page should have it, and with
   several position:fixed panels plus flex/grid rows it's easy for one overflowing element
   somewhere to sneak the whole body wider than the viewport. This clips instead of scrolling;
   the real fix for any specific offender is still to make it wrap/shrink properly, but this
   guarantees the page never gains a horizontal scrollbar even if one is missed. */
html,body{overflow-x:hidden;height:100%;margin:0}
.sg{
  background:var(--sg-bg);
  color:var(--sg-text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.sg a{color:inherit;text-decoration:none}
.sg button{font:inherit;color:inherit;cursor:pointer}
/* Browsers give every <button> a default border, background chrome, and focus outline that no
   component class here ever accounted for — most buttons happen to set their own background
   and border, hiding it, but any that only set background (like the big transport play button)
   let the native border/outline show through as a stray ring around the shape. Reset once via
   a plain element selector (deliberately NOT ".sg button", which — one class + one element —
   would out-specificity single-class component rules like .sg-icon-btn's border and win
   regardless of source order) so any component class defining its own border/background still
   overrides this cleanly, with a real (not removed) focus style so keyboard users still get an
   indicator. */
button{border:0;background:none;outline:none;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:2px solid var(--sg-purple-bright);outline-offset:2px}
.sg input,.sg select,.sg textarea{font:inherit;color:inherit}
.sg img{max-width:100%;display:block}
.sg ::selection{background:rgba(139,92,246,.35)}

/* Layout shell — a true fixed app shell, not scroll tricks. .sg-shell is exactly one viewport
   tall with overflow:hidden, so the page itself never scrolls; header/sidebar/right-rail are
   just normal flex children that never move because there's nothing to scroll them with. Only
   .sg-main gets its own height + overflow-y:auto, making it the one part of the screen that
   scrolls — literally "sides fixed, middle scrolls", not an approximation of it. The footer is
   rendered as the last thing inside .sg-main (see layout.blade.php) so it appears naturally at
   the end of that scroll instead of needing separate handling.
   (Earlier attempts used position:fixed for the panels — which had no notion of "content ran
   out" and permanently covered the footer — and then position:sticky — which does release at
   the right point, but still scrolls the whole page, so the panels visually track the scroll
   instead of staying completely still. Both were workarounds for not having the actual
   independent-scroll-pane layout requested; this is that layout directly.) */
.sg-shell{height:100vh;display:flex;flex-direction:column;overflow:hidden}
.sg-body{display:flex;align-items:stretch;flex:1;min-height:0;max-width:1360px;margin:0 auto;width:100%}
.sg-main{flex:1;min-width:0;height:100%;overflow-y:auto;padding:28px 24px 0}

/* Scroll still works everywhere — the browser's scrollbar track/thumb is just not drawn, since
   with three independently-scrolling panes on screen at once, three visible scrollbars reads
   as UI clutter rather than useful affordance. Applies to any element that scrolls internally
   (.sg-main, .sg-sidebar, .sg-right-rail). */
.sg-main,.sg-sidebar,.sg-right-rail{scrollbar-width:none;-ms-overflow-style:none}
.sg-main::-webkit-scrollbar,.sg-sidebar::-webkit-scrollbar,.sg-right-rail::-webkit-scrollbar{display:none}
@media(max-width:1024px){.sg-main{padding:20px 16px 0}}

.sg-rail-static{display:none}
@media(min-width:1280px){.sg-rail-static{display:block;margin-top:0}}

/* Header */
.sg-header{
  flex-shrink:0;z-index:40;height:var(--sg-header-h);
  background:rgba(5,7,13,.85);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--sg-border);
}
.sg-header-inner{
  max-width:1360px;margin:0 auto;height:100%;padding:0 24px;
  display:flex;align-items:center;gap:20px;
}
.sg-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.01em;flex-shrink:0}
/* Header only: shift left to sit over the sidebar column below (which starts flush at the
   shell's left edge, unlike .sg-header-inner's own 24px left padding). A plain negative
   margin — NOT a fixed width on the flex box — so the logo image itself never gets squeezed. */
.sg-header .sg-logo{margin-left:-40px}
.sg-logo-mark{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(145deg,var(--sg-purple-bright),var(--sg-purple));
  display:grid;place-items:center;color:#fff;
  box-shadow:0 6px 20px rgba(139,92,246,.35);
}
/* Uploaded logo (admin Settings → SoundGIFs Logo). Falls back to .sg-logo-mark above when
   no image has been uploaded for either theme. When BOTH dark/light versions are uploaded,
   only one is shown at a time based on the current [data-theme]. */
.sg-logo-img{height:160px;width:auto;display:block}
/* Specificity must beat the global ".sg img{display:block}" reset above (0,1,1), so these
   pair the class with .sg-logo-img itself (0,2,0) instead of relying on source order alone —
   a lone .sg-logo-img-light{display:none} loses to that reset regardless of where it sits
   in the file, which is why both logos used to render at once. */
.sg-logo-img.sg-logo-img-light{display:none}
:root[data-theme="light"] .sg-logo-img.sg-logo-img-dark{display:none}
:root[data-theme="light"] .sg-logo-img.sg-logo-img-light{display:block}
.sg-header-search{flex:1;max-width:640px;position:relative;display:none}
@media(min-width:900px){.sg-header-search{display:block}}
.sg-header-search input{
  width:100%;background:var(--sg-card);border:1px solid var(--sg-border);
  border-radius:10px;padding:9px 14px 9px 38px;font-size:14px;color:var(--sg-text);outline:none;
  transition:border-color .15s;
}
.sg-header-search input:focus{border-color:var(--sg-purple)}
.sg-header-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--sg-text-muted);width:16px;height:16px}
.sg-header-search kbd{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-size:11px;color:var(--sg-text-muted);border:1px solid var(--sg-border);
  border-radius:5px;padding:1px 6px;background:var(--sg-bg-2);
}
.sg-nav{display:none;gap:4px;align-items:center}
@media(min-width:1024px){.sg-nav{display:flex}}
.sg-nav a{
  padding:8px 14px;border-radius:8px;font-size:14px;font-weight:500;color:var(--sg-text-muted);
  transition:color .15s,background .15s;
}
.sg-nav a:hover{color:var(--sg-text);background:var(--sg-elevated)}
.sg-nav a.active{color:var(--sg-text);background:var(--sg-elevated)}
.sg-header-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}
.sg-icon-btn{
  width:38px;height:38px;border-radius:9px;border:1px solid var(--sg-border);background:var(--sg-card);
  display:grid;place-items:center;color:var(--sg-text-muted);transition:color .15s,border-color .15s;
}
.sg-icon-btn:hover{color:var(--sg-text);border-color:rgba(255,255,255,.16)}
.sg-icon-btn svg{width:18px;height:18px}
.sg-btn{
  padding:9px 16px;border-radius:9px;font-size:14px;font-weight:600;border:1px solid transparent;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:filter .15s,background .15s;
}
.sg-btn-ghost{color:var(--sg-text);border-color:var(--sg-border);background:transparent}
.sg-btn-ghost:hover{background:var(--sg-elevated)}
.sg-btn-primary{
  color:#fff;background:linear-gradient(135deg,var(--sg-purple-bright),var(--sg-purple));
  box-shadow:0 4px 16px rgba(139,92,246,.3);
}
.sg-btn-primary:hover{filter:brightness(1.08)}
.sg-btn-lg{padding:13px 26px;font-size:15px;border-radius:11px}
.sg-btn-block{width:100%;justify-content:center}
@media(max-width:640px){.sg-header-actions .sg-btn span{display:none}}

/* Header — Upload / Favorites / Notifications / Avatar cluster */
.sg-upload-btn{
  display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:10px;
  border:1px solid var(--sg-border);background:var(--sg-card);color:var(--sg-purple-bright);
  font-size:14px;font-weight:600;white-space:nowrap;transition:border-color .15s,background .15s;
}
.sg-upload-btn svg{width:17px;height:17px;flex-shrink:0}
.sg-upload-btn:hover{border-color:var(--sg-purple);background:var(--sg-elevated)}
@media(max-width:640px){.sg-upload-btn span{display:none}.sg-upload-btn{padding:9px}}
.sg-header-icon-link{
  position:relative;width:38px;height:38px;display:grid;place-items:center;border-radius:9px;
  color:var(--sg-text-muted);border:0;background:transparent;transition:color .15s,background .15s;
}
.sg-header-icon-link:hover{color:var(--sg-text);background:var(--sg-elevated)}
.sg-header-icon-link svg{width:20px;height:20px}
.sg-notif-badge{
  position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 3px;border-radius:8px;
  background:var(--sg-purple-bright);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;
  box-shadow:0 0 0 2px var(--sg-card);
}
.sg-avatar-btn{
  display:flex;align-items:center;gap:6px;padding:2px 4px 2px 2px;border-radius:20px;
  border:1px solid transparent;background:transparent;transition:border-color .15s,background .15s;
}
.sg-avatar-btn:hover{background:var(--sg-elevated);border-color:var(--sg-border)}
.sg-avatar-img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}
.sg-avatar-fallback{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--sg-purple-bright),var(--sg-purple));color:#fff;
  font-size:13px;font-weight:700;
}
.sg-avatar-chevron{width:14px;height:14px;color:var(--sg-text-muted);flex-shrink:0}

/* Sidebar (desktop only) — flex sibling of .sg-main inside a non-scrolling shell (see layout
   shell comment above). overflow:hidden, not auto: this one must never scroll, full stop, not
   even internally with its own content — it's short enough to always fit now that the app
   promo card was removed, so nothing here needs to be reachable by scrolling. */
.sg-sidebar{
  display:none;width:var(--sg-sidebar-w);flex-shrink:0;padding:24px 12px 24px 0;
  border-right:1px solid var(--sg-border);
  height:100%;overflow:hidden;
}
@media(min-width:1024px){.sg-sidebar{display:block}}

/* Right rail (player panel + trending now + popular tags) — same never-moves pattern as the
   sidebar (overflow:hidden, not auto — must never scroll, matching .sg-sidebar). Deliberately
   NOT display:none below 1280px: the persistent audio player (#sg-player) lives inside this
   wrapper and must keep working as the mobile bottom bar, and display:none on an ancestor
   would remove that whole subtree from rendering — including the position:fixed mobile player
   — instead of just hiding the wrapper's own box. Below 1280px the wrapper collapses to zero
   size instead, which hides its own content without touching descendants' own fixed
   positioning. */
.sg-right-rail{width:0;height:0;padding:0;margin:0;overflow:visible;flex-shrink:0}
@media(min-width:1280px){
  .sg-right-rail{
    display:block;width:296px;height:100%;padding:18px 0 18px 24px;
    overflow:hidden;
  }
}

.sg-sidebar-group{margin-bottom:20px}
.sg-sidebar-label{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--sg-text-muted);padding:0 12px;margin-bottom:8px;
}
.sg-sidebar a{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;
  font-size:14px;font-weight:500;color:var(--sg-text-muted);margin-bottom:2px;
  transition:background .15s,color .15s;
}
.sg-sidebar a svg{width:17px;height:17px;flex-shrink:0}
.sg-sidebar a:hover{background:var(--sg-elevated);color:var(--sg-text)}
.sg-sidebar a.active{background:rgba(139,92,246,.14);color:var(--sg-purple-bright)}

/* Mobile bottom nav */
.sg-bottom-nav{
  display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:rgba(10,14,23,.92);backdrop-filter:blur(14px);border-top:1px solid var(--sg-border);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
@media(min-width:1024px){.sg-bottom-nav{display:none}}
.sg-bottom-nav a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 2px;border-radius:10px;color:var(--sg-text-muted);font-size:10.5px;font-weight:600;
}
.sg-bottom-nav a svg{width:20px;height:20px}
.sg-bottom-nav a.active{color:var(--sg-purple-bright)}

/* Typography helpers */
.sg-h1{font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.sg-h2{font-size:22px;font-weight:800;letter-spacing:-.01em}
.sg-muted{color:var(--sg-text-muted)}
.sg-eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--sg-purple-bright)}

/* Section header w/ "View all" */
.sg-section{margin-bottom:40px}
.sg-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.sg-view-all{font-size:13px;font-weight:600;color:var(--sg-purple-bright);display:flex;align-items:center;gap:4px}
.sg-view-all:hover{color:var(--sg-blue)}

/* Cards */
.sg-card{
  background:var(--sg-card);border:1px solid var(--sg-border);border-radius:var(--sg-radius-md);
  transition:border-color .15s,transform .15s;
}
.sg-card:hover{border-color:rgba(255,255,255,.16)}

/* Grid — every track uses minmax(0,1fr) instead of plain 1fr. Plain 1fr tracks have an
   implicit minimum width equal to their content's min-content size (the same gotcha as
   flexbox's default min-width:auto), so a card with a long unwrapped title refuses to shrink
   below that size and forces the whole grid — and the .sg-main box around it — wider than the
   space actually reserved for it, overlapping the fixed right rail. minmax(0,1fr) removes
   that implicit floor so tracks always honor the available width. */
.sg-grid{display:grid;gap:14px;min-width:0}
.sg-grid-sounds{grid-template-columns:repeat(2,minmax(0,1fr))}
.sg-grid-media{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:640px){.sg-grid-sounds{grid-template-columns:repeat(3,minmax(0,1fr))}.sg-grid-media{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){.sg-grid-sounds{grid-template-columns:repeat(4,minmax(0,1fr))}.sg-grid-media{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1200px){.sg-grid-sounds{grid-template-columns:repeat(6,minmax(0,1fr))}.sg-grid-media{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Buttons on media */
.sg-play-btn{
  width:40px;height:40px;border-radius:50%;background:var(--sg-purple);color:#fff;
  display:grid;place-items:center;flex-shrink:0;transition:background .15s,transform .1s;border:0;
}
.sg-play-btn:hover{background:var(--sg-purple-bright)}
.sg-play-btn:active{transform:scale(.94)}
.sg-play-btn.is-playing{background:var(--sg-pink)}
.sg-play-btn svg{width:16px;height:16px}
.sg-icon-action{
  width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--sg-text-muted);
  border:0;background:transparent;transition:color .15s,background .15s;
}
.sg-icon-action:hover{color:var(--sg-text);background:var(--sg-elevated)}
.sg-icon-action.is-active{color:var(--sg-pink)}
.sg-icon-action svg{width:16px;height:16px}

/* Sound card favorite button — Tailwind class sets the resting color server-side;
   this covers the instant client-side toggle our own JS does after a click. */
.sg-favorite-btn.is-active{color:#ef4444 !important}

/* Footer has no background of its own, so the ambient grid/orbs bleed through and tint it —
   pin it opaque (light-theme override further down switches it to white). */
.sg-footer{background:#000}

/* Right-rail ranked-list panels (Trending Now, Favorites, ...) */
.sg-rail-panel{padding:14px}
.sg-rail-panel + .sg-rail-panel{margin-top:10px}
.sg-rail-panel-head{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;font-weight:700;margin-bottom:12px}
.sg-rail-panel-head a{font-size:12px;font-weight:600;color:var(--sg-purple-bright)}
.sg-rank-list{display:flex;flex-direction:column;gap:4px}
.sg-rank-item{display:flex;align-items:center;gap:10px;padding:6px 4px;border-radius:8px}
.sg-rank-item:hover{background:var(--sg-elevated)}
.sg-rank-num{width:14px;font-size:12px;font-weight:800;color:var(--sg-text-muted);flex-shrink:0}
.sg-rank-thumb{border:0;padding:0;cursor:pointer;display:grid;place-items:center;overflow:hidden}
.sg-rank-more{border:0;background:transparent;color:var(--sg-text-muted);width:20px;height:20px;display:grid;place-items:center;border-radius:6px;flex-shrink:0}
.sg-rank-more:hover{background:var(--sg-card);color:var(--sg-text)}
.sg-rank-more svg{width:14px;height:14px}
.sg-rail-more-btn{
    display:block;text-align:center;margin-top:12px;padding:9px;border-radius:9px;
    background:var(--sg-elevated);border:1px solid var(--sg-border);font-size:12.5px;font-weight:600;color:var(--sg-text);
}
.sg-rail-more-btn:hover{border-color:rgba(255,255,255,.2)}
.sg-rail-empty{text-align:center;padding:18px 8px;font-size:12.5px;color:var(--sg-text-muted)}
.sg-rail-empty a{color:var(--sg-purple-bright);font-weight:600}

/* Skeleton */
.sg-skeleton{background:linear-gradient(90deg,var(--sg-card) 25%,var(--sg-elevated) 37%,var(--sg-card) 63%);background-size:400% 100%;animation:sg-shimmer 1.4s ease infinite;border-radius:var(--sg-radius-md)}
@keyframes sg-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* Empty / error state */
.sg-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px 24px;color:var(--sg-text-muted)}
.sg-state svg{width:40px;height:40px;margin-bottom:14px;opacity:.5}
.sg-state h3{color:var(--sg-text);font-size:16px;font-weight:700;margin:0 0 6px}
.sg-state p{font-size:14px;max-width:360px;margin:0}

/* Toast */
.sg-toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(10px);
  background:var(--sg-elevated);border:1px solid var(--sg-border);color:var(--sg-text);
  padding:12px 18px;border-radius:10px;font-weight:600;font-size:13px;
  opacity:0;pointer-events:none;transition:.2s;z-index:80;box-shadow:0 12px 30px rgba(0,0,0,.4);
}
.sg-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Persistent player — a slim fixed bottom bar at every screen width (the earlier "docks as
   a card panel in the right rail" desktop treatment was dropped: it ate rail space that
   Trending Now / Most Favorited needed and duplicated download/share/heart already on cards). */
.sg-player{
  position:fixed;left:0;right:0;bottom:0;z-index:50;height:var(--sg-player-h);
  background:rgba(10,14,23,.96);backdrop-filter:blur(14px);border-top:1px solid var(--sg-border);
  display:none;align-items:center;padding:0 16px;gap:14px;
}
.sg-player.is-active{display:flex}
@media(max-width:1024px){.sg-player{bottom:58px;height:60px;padding:0 10px;gap:10px}}
/* Bar spans left:0 by default (no sidebar below 1024px); once the sidebar shows, start the
   bar after it instead of overlapping/covering the sidebar's own bottom content. */
@media(min-width:1024px){.sg-player{left:var(--sg-sidebar-w)}}

.sg-player-track{display:flex;align-items:center;gap:12px;min-width:0;width:240px;flex-shrink:0}
.sg-player-thumb{width:44px;height:44px;border-radius:8px;background:var(--sg-elevated);flex-shrink:0;overflow:hidden;display:grid;place-items:center;color:var(--sg-text-muted)}
.sg-player-thumb img{width:100%;height:100%;object-fit:cover}
.sg-player-thumb svg{width:18px;height:18px}
.sg-player-meta{min-width:0;flex:1}
.sg-player-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-player-sub{font-size:11px;color:var(--sg-text-muted)}
.sg-player-heart{display:none;flex-shrink:0}
.sg-player-waveform{display:none}
.sg-player-controls{display:flex;align-items:center;gap:10px;flex:1;justify-content:center;min-width:0}
.sg-player-transport{display:flex;align-items:center;gap:14px}
.sg-player-transport button{color:var(--sg-text-muted);transition:color .15s}
.sg-player-transport button:hover{color:var(--sg-text)}
.sg-player-transport svg{width:18px;height:18px}
.sg-player-toggle-btn{
  width:36px;height:36px;border-radius:50%;background:var(--sg-purple);color:#fff !important;
  display:grid;place-items:center;flex-shrink:0;
}
.sg-player-toggle-btn:hover{background:var(--sg-purple-bright)}
.sg-player-progress{display:none;align-items:center;gap:8px;width:100%;max-width:420px}
@media(min-width:768px){.sg-player-progress{display:flex}}
.sg-player-time{font-size:11px;color:var(--sg-text-muted);width:36px;flex-shrink:0}
.sg-player-bar{flex:1;height:4px;border-radius:2px;background:var(--sg-elevated);position:relative;cursor:pointer}
.sg-player-bar-fill{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--sg-purple);width:0%}
.sg-player-extra{display:none;align-items:center;gap:10px;flex-shrink:0}
@media(min-width:1024px){.sg-player-extra{display:flex}}
.sg-player-actions{display:none;align-items:center;gap:8px;flex-shrink:0}
@media(min-width:1280px){.sg-player-actions{display:flex}}
.sg-player-action-btn span{display:none}
@media(min-width:1440px){.sg-player-action-btn span{display:inline}}

/* Compact volume slider — a bare <input type=range> renders with the browser's own (fairly
   chunky) track/thumb, which combined with flex:1 growth was stretching this to fill most of
   the player card. Fixed, small width + a thin custom track/thumb keeps it a minor control
   rather than a dominant one. */
#sg-player-volume{
  -webkit-appearance:none;appearance:none;width:48px;height:3px;border-radius:2px;
  background:var(--sg-elevated);accent-color:var(--sg-purple);flex:none;cursor:pointer;
}
#sg-player-volume::-webkit-slider-thumb{
  -webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:var(--sg-purple);
  box-shadow:0 0 0 3px var(--sg-bg-2);cursor:pointer;
}
#sg-player-volume::-moz-range-thumb{
  width:11px;height:11px;border-radius:50%;background:var(--sg-purple);border:0;
  box-shadow:0 0 0 3px var(--sg-bg-2);cursor:pointer;
}

.sg-player-action-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 10px;border-radius:9px;
  border:1px solid var(--sg-border);background:var(--sg-elevated);color:var(--sg-text);font-size:12.5px;font-weight:600;
}
.sg-player-action-btn:hover{border-color:rgba(255,255,255,.2)}
.sg-player-action-btn svg{width:15px;height:15px;flex-shrink:0}
.sg-player-action-icon-only{grid-column:3}

/* Utility */
.sg-container{max-width:1360px;margin:0 auto;padding:0 24px}
@media(max-width:640px){.sg-container{padding:0 16px}}
.sg-fade-up{animation:sg-fade-up .5s ease both}
@keyframes sg-fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Detail pages (sound/gif/sticker/clip) */
.sg-breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--sg-text-muted);margin-bottom:20px;flex-wrap:wrap}
.sg-breadcrumb a:hover{color:var(--sg-text)}
.sg-breadcrumb .sg-current{color:var(--sg-text);font-weight:600}
.sg-detail-grid{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:900px){.sg-detail-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.sg-detail-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.sg-detail-action{
  display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:11px;
  border:1px solid var(--sg-border);background:var(--sg-elevated);color:var(--sg-text);font-size:13.5px;font-weight:600;
}
.sg-detail-action:hover{border-color:rgba(255,255,255,.2)}
.sg-detail-action.is-active{color:var(--sg-pink);border-color:rgba(236,72,153,.4)}
.sg-detail-action svg{width:16px;height:16px}
.sg-detail-meta-row{display:flex;flex-wrap:wrap;gap:18px;margin:14px 0;color:var(--sg-text-muted);font-size:13px}
.sg-detail-meta-row span{display:flex;align-items:center;gap:6px}
.sg-detail-meta-row svg{width:14px;height:14px}
.sg-detail-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sg-info-box{background:var(--sg-card);border:1px solid var(--sg-border);border-radius:var(--sg-radius-lg);padding:22px}
.sg-info-box + .sg-info-box{margin-top:16px}
.sg-info-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--sg-text-muted);margin-bottom:10px}
.sg-related-list{display:flex;flex-direction:column;gap:4px}
.sg-related-row{display:flex;align-items:center;gap:12px;padding:8px;border-radius:10px}
.sg-related-row:hover{background:var(--sg-elevated)}
.sg-related-thumb{width:48px;height:48px;border-radius:9px;background:var(--sg-elevated);flex-shrink:0;overflow:hidden;position:relative}
.sg-related-thumb img{width:100%;height:100%;object-fit:cover}
.sg-related-info{min-width:0;flex:1}
.sg-related-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.sg-related-sub{font-size:11.5px;color:var(--sg-text-muted)}

/* Sound/Clip hero player card on detail pages */
.sg-hero-player{background:var(--sg-card);border:1px solid var(--sg-border);border-radius:var(--sg-radius-lg);padding:28px;text-align:center}
.sg-hero-player-art{
  width:180px;height:180px;margin:0 auto 22px;border-radius:24px;overflow:hidden;position:relative;
  background:linear-gradient(135deg,var(--sg-purple),var(--sg-blue));display:grid;place-items:center;
  box-shadow:0 20px 50px rgba(139,92,246,.25);
}
.sg-hero-player-art img{width:100%;height:100%;object-fit:cover}
.sg-hero-waveform{display:flex;align-items:center;gap:3px;height:64px;margin:22px 0;padding:0 4px}
.sg-hero-waveform span{flex:1;min-width:3px;border-radius:3px;background:var(--sg-purple);opacity:.5}
.sg-hero-waveform span.is-past{opacity:1;background:var(--sg-purple-bright)}
.sg-hero-transport{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:16px}
.sg-hero-transport button{color:var(--sg-text-muted)}
.sg-hero-transport button:hover{color:var(--sg-text)}
.sg-hero-transport svg{width:20px;height:20px}
.sg-hero-play-btn{
  width:64px;height:64px;border-radius:50%;background:var(--sg-purple);color:#fff !important;
  display:grid;place-items:center;box-shadow:0 10px 30px rgba(139,92,246,.4);
}
.sg-hero-play-btn:hover{background:var(--sg-purple-bright)}
.sg-hero-play-btn svg{width:26px;height:26px}
.sg-hero-progress{display:flex;align-items:center;gap:10px;max-width:420px;margin:0 auto}

/* GIF / sticker media preview */
.sg-media-preview{border-radius:var(--sg-radius-lg);overflow:hidden;background:var(--sg-card);border:1px solid var(--sg-border)}
.sg-media-preview img,.sg-media-preview video{width:100%;display:block}
.sg-checkerboard{
  background-image:linear-gradient(45deg,#1a1f2e 25%,transparent 25%),linear-gradient(-45deg,#1a1f2e 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#1a1f2e 75%),linear-gradient(-45deg,transparent 75%,#1a1f2e 75%);
  background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0;background-color:#0e131e;
}
.sg-video-player{width:100%;border-radius:var(--sg-radius-lg);overflow:hidden;background:#000;aspect-ratio:16/9}
.sg-video-player video{width:100%;height:100%;object-fit:contain}