/**
 * SunskaRecords Overrides CSS
 *
 * Minimal CSS that Tailwind cannot handle:
 * scrollbar styling, admin-bar offsets, and keyframe animations.
 *
 * @package SunskaRecords
 * @since   1.0.0
 */

/* ---- Heading Color ---- */
#sr-content h1,
#sr-content h2 {
    color: #c7972b !important;
}

/* ---- Form Inputs (override AyeCode UI / Bootstrap) ---- */
#sr-content input[type="text"],
#sr-content input[type="password"],
#sr-content input[type="email"],
#sr-content input[type="url"],
#sr-content input[type="number"],
#sr-content input[type="search"],
#sr-content input[type="tel"],
#sr-content select,
#sr-content textarea {
    background-color: #282828 !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#sr-content input[type="text"]:focus,
#sr-content input[type="password"]:focus,
#sr-content input[type="email"]:focus,
#sr-content input[type="url"]:focus,
#sr-content input[type="number"]:focus,
#sr-content input[type="search"]:focus,
#sr-content input[type="tel"]:focus,
#sr-content select:focus,
#sr-content textarea:focus {
    border-color: #c7972b !important;
    box-shadow: 0 0 0 2px rgba(199, 151, 43, 0.2) !important;
}

#sr-content input::placeholder,
#sr-content textarea::placeholder {
    color: #666 !important;
}

/* ---- Custom Scrollbar ---- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

/* ---- WordPress Admin Bar Offset ---- */
.admin-bar header[role="banner"] {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar header[role="banner"] {
        top: 46px;
    }
}

/* ---- Smooth slide-in for queue/notif panels ---- */
#sr-queue-panel.is-open,
#sr-notifications-panel.is-open {
    transform: translateX(0);
}

/* ---- Active state for player buttons ---- */
#sr-btn-shuffle.is-active,
#sr-btn-repeat.is-active {
    color: #c7972b !important;
}

/* ---- Selection color ---- */
::selection {
    background: rgba(199, 151, 43, 0.3);
    color: #fff;
}

/* ---- Loved state ---- */
#sr-np-love.is-loved {
    color: #c7972b;
}

#sr-np-love.is-loved .icon-love {
    display: none;
}

#sr-np-love.is-loved .icon-loved {
    display: block !important;
}

/* ---- Mobile sidebar slide-in ---- */
@media (max-width: 991px) {
    #sr-sidebar {
        display: flex !important;
        position: fixed;
        top: 54px;
        left: 0;
        bottom: 64px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 9000;
        width: 280px !important;
        min-width: 280px !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.5);
    }

    #sr-sidebar.is-open {
        transform: translateX(0);
    }

    #sr-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 8999;
    }

    #sr-overlay.is-visible {
        display: block !important;
    }
}

/* On larger mobile screens (>= 768px), sidebar top adjusts to full header */
@media (min-width: 768px) and (max-width: 991px) {
    #sr-sidebar {
        top: 60px;
        bottom: 80px;
    }
}

/* ---- Range input (progress/volume) custom styling ---- */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

/* ---- Context Menu ---- */
.sr-context-menu {
    position: fixed;
    z-index: 3000;
    min-width: 200px;
    background: #282828;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    padding: 4px 0;
    animation: sr-fade-in 0.15s ease;
}

.sr-context-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: #e5e7eb;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.1s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.sr-context-menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.sr-context-menu-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.7;
}

.sr-context-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 4px 0;
}

/* Context sub-menu (playlists) */
.sr-context-submenu {
    max-height: 200px;
    overflow-y: auto;
    padding: 4px 0;
}

.sr-context-submenu .sr-context-menu-item {
    padding: 8px 16px 8px 28px;
    font-size: 12px;
}

/* ---- Search Dropdown ---- */
.sr-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2500;
    background: #282828;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    max-height: 400px;
    overflow-y: auto;
    animation: sr-fade-in 0.15s ease;
}

.sr-search-dropdown .search-group-title {
    padding: 10px 16px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
}

.sr-search-dropdown .search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.1s ease;
    text-decoration: none;
    color: #e5e7eb;
}

.sr-search-dropdown .search-result-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.sr-search-dropdown .search-result-item img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
}

.sr-search-dropdown .search-result-item .result-info {
    flex: 1;
    min-width: 0;
}

.sr-search-dropdown .search-result-item .result-title {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sr-search-dropdown .search-result-item .result-subtitle {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Toast Notifications ---- */
.sr-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 5000;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background: #c7972b;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.sr-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.sr-toast.is-error,
.sr-toast.sr-toast-error {
    background: #ef4444;
}

.sr-toast.is-info,
.sr-toast.sr-toast-info {
    background: #3b82f6;
}

/* ---- Loading Spinner ---- */
.sr-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #c7972b;
    border-radius: 50%;
    animation: sr-spin 0.6s linear infinite;
}

.sr-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 18, 18, 0.8);
    z-index: 100;
    border-radius: inherit;
}

/* ---- Keyframe Animations ---- */
@keyframes sr-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes sr-spin {
    to { transform: rotate(360deg); }
}

@keyframes sr-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* Skeleton loading animation */
.sr-skeleton {
    background: linear-gradient(90deg, #282828 25%, #333 50%, #282828 75%);
    background-size: 200% 100%;
    animation: sr-skeleton-shimmer 1.5s ease infinite;
    border-radius: 4px;
}

@keyframes sr-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- Comment Form ---- */
.sr-comment-form textarea {
    resize: vertical;
    min-height: 60px;
}

.sr-comment-form .char-count {
    font-size: 11px;
    text-align: right;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 4px;
}

.sr-comment-form .char-count.is-over {
    color: #ef4444;
}

/* ---- Upload Progress ---- */
.sr-upload-progress {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 8px;
}

.sr-upload-progress .bar {
    height: 100%;
    background: #c7972b;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* ---- Auth Modal: Override WP theme / Bootstrap clashing styles ---- */

/* Fix spacing: WP theme's ayecode-ui redefines p-6/px-6/pt-6/mb-6 to 64px */
#sr-auth-modal .p-6    { padding: 1.5rem !important; }
#sr-auth-modal .px-6   { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
#sr-auth-modal .pt-6   { padding-top: 1.5rem !important; }
#sr-auth-modal .mb-1   { margin-bottom: 0.25rem !important; }
#sr-auth-modal .mb-1\.5 { margin-bottom: 0.375rem !important; }
#sr-auth-modal .mb-4   { margin-bottom: 1rem !important; }
#sr-auth-modal .mb-6   { margin-bottom: 1.5rem !important; }
#sr-auth-modal .mt-5   { margin-top: 1.25rem !important; }
#sr-auth-modal .pb-3   { padding-bottom: 0.75rem !important; }
#sr-auth-modal .p-3    { padding: 0.75rem !important; }
#sr-auth-modal .gap-2  { gap: 0.5rem !important; }
#sr-auth-modal .gap-3  { gap: 0.75rem !important; }
#sr-auth-modal .py-3   { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
#sr-auth-modal .space-y-4 > * + * { margin-top: 1rem !important; }

/* Fix input styles: WP theme sets inputs to white bg */
#sr-auth-modal input[type="text"],
#sr-auth-modal input[type="password"],
#sr-auth-modal input[type="email"] {
    background-color: #282828 !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    padding: 0 1rem 0 2.5rem !important;
    height: 2.75rem !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#sr-auth-modal input[type="text"]:focus,
#sr-auth-modal input[type="password"]:focus,
#sr-auth-modal input[type="email"]:focus {
    border-color: #c7972b !important;
    box-shadow: 0 0 0 2px rgba(199, 151, 43, 0.3) !important;
}

#sr-auth-modal input[type="text"]::placeholder,
#sr-auth-modal input[type="password"]::placeholder,
#sr-auth-modal input[type="email"]::placeholder {
    color: #727272 !important;
}

#sr-auth-modal input[type="checkbox"] {
    background-color: #282828 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    accent-color: #c7972b !important;
}

/* Fix heading/text colors inside modal */
#sr-auth-modal h2 {
    color: #fff !important;
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
    margin: 0 0 0.25rem !important;
}

#sr-auth-modal label {
    color: #b3b3b3 !important;
    font-size: 0.875rem !important;
}

#sr-auth-modal a {
    color: #c7972b !important;
    text-decoration: none !important;
}

#sr-auth-modal a:hover {
    color: #dca73a !important;
}

/* ============================================
   Bootstrap / AyeCode UI — Global App Overrides
   ============================================
   AyeCode UI loads Bootstrap utilities with !important
   that collide with Tailwind class names (e.g. .mb-8
   becomes 8rem instead of 2rem, .border gets bright
   Bootstrap colors, .p-5 becomes 3rem). These scoped
   resets restore Tailwind values inside the app shell.
   ============================================ */
[data-sr-route] .border       { border-width: 1px !important; border-style: solid !important; border-color: rgba(255,255,255,0.08) !important; }
[data-sr-route] .border-t     { border-top-width: 1px !important; border-top-style: solid !important; border-top-color: rgba(255,255,255,0.08) !important; }
[data-sr-route] .border-b     { border-bottom-width: 1px !important; border-bottom-style: solid !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
[data-sr-route] .border-r     { border-right-width: 1px !important; border-right-style: solid !important; border-right-color: rgba(255,255,255,0.08) !important; }
[data-sr-route] .p-0  { padding: 0 !important; }
[data-sr-route] .p-1  { padding: 0.25rem !important; }
[data-sr-route] .p-2  { padding: 0.5rem !important; }
[data-sr-route] .p-3  { padding: 0.75rem !important; }
[data-sr-route] .p-4  { padding: 1rem !important; }
[data-sr-route] .p-5  { padding: 1.25rem !important; }
[data-sr-route] .p-6  { padding: 1.5rem !important; }
[data-sr-route] .p-8  { padding: 2rem !important; }
[data-sr-route] .px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
[data-sr-route] .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
[data-sr-route] .px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
[data-sr-route] .px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
[data-sr-route] .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
[data-sr-route] .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
[data-sr-route] .py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
[data-sr-route] .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
[data-sr-route] .py-5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
[data-sr-route] .pt-6 { padding-top: 1.5rem !important; }
[data-sr-route] .pb-3 { padding-bottom: 0.75rem !important; }
[data-sr-route] .m-0  { margin: 0 !important; }
[data-sr-route] .mt-1 { margin-top: 0.25rem !important; }
[data-sr-route] .mt-2 { margin-top: 0.5rem !important; }
[data-sr-route] .mt-3 { margin-top: 0.75rem !important; }
[data-sr-route] .mt-4 { margin-top: 1rem !important; }
[data-sr-route] .mt-5 { margin-top: 1.25rem !important; }
[data-sr-route] .mt-6 { margin-top: 1.5rem !important; }
[data-sr-route] .mt-8 { margin-top: 2rem !important; }
[data-sr-route] .mt-10 { margin-top: 2.5rem !important; }
[data-sr-route] .mt-12 { margin-top: 3rem !important; }
[data-sr-route] .mb-1 { margin-bottom: 0.25rem !important; }
[data-sr-route] .mb-2 { margin-bottom: 0.5rem !important; }
[data-sr-route] .mb-3 { margin-bottom: 0.75rem !important; }
[data-sr-route] .mb-4 { margin-bottom: 1rem !important; }
[data-sr-route] .mb-5 { margin-bottom: 1.25rem !important; }
[data-sr-route] .mb-6 { margin-bottom: 1.5rem !important; }
[data-sr-route] .mb-8 { margin-bottom: 2rem !important; }
/* v2.0.18: 10/12-step overrides — must beat ayecode-ui.css's Bootstrap-style
 * spacing scale where mb-10 = 12rem instead of Tailwind's 2.5rem. Without
 * these, every section on the music engine has a 192px gap below it. */
[data-sr-route] .mb-10 { margin-bottom: 2.5rem !important; }
[data-sr-route] .mb-12 { margin-bottom: 3rem !important; }
[data-sr-route] .mb-16 { margin-bottom: 4rem !important; }
[data-sr-route] .mb-20 { margin-bottom: 5rem !important; }
[data-sr-route] .mb-24 { margin-bottom: 6rem !important; }
[data-sr-route] .ms-1 { margin-left: 0.25rem !important; }
[data-sr-route] .ms-2 { margin-left: 0.5rem !important; }
[data-sr-route] .me-1 { margin-right: 0.25rem !important; }
[data-sr-route] .me-2 { margin-right: 0.5rem !important; }
[data-sr-route] .gap-1 { gap: 0.25rem !important; }
[data-sr-route] .gap-2 { gap: 0.5rem !important; }
[data-sr-route] .gap-3 { gap: 0.75rem !important; }
[data-sr-route] .gap-4 { gap: 1rem !important; }
[data-sr-route] .gap-5 { gap: 1.25rem !important; }
[data-sr-route] .gap-6 { gap: 1.5rem !important; }
[data-sr-route] .gap-8 { gap: 2rem !important; }
[data-sr-route] .gap-10 { gap: 2.5rem !important; }
[data-sr-route] .gap-12 { gap: 3rem !important; }
[data-sr-route] .p-10 { padding: 2.5rem !important; }
[data-sr-route] .p-12 { padding: 3rem !important; }
[data-sr-route] .px-10 { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
[data-sr-route] .px-12 { padding-left: 3rem !important; padding-right: 3rem !important; }
[data-sr-route] .py-10 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
[data-sr-route] .py-12 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
[data-sr-route] .pb-24 { padding-bottom: 6rem !important; }
[data-sr-route] .pt-10 { padding-top: 2.5rem !important; }
[data-sr-route] .pt-12 { padding-top: 3rem !important; }
[data-sr-route] .rounded    { border-radius: 0.25rem !important; }
[data-sr-route] .rounded-lg { border-radius: 0.5rem !important; }
[data-sr-route] .rounded-xl { border-radius: 0.75rem !important; }
[data-sr-route] .space-y-2 > * + * { margin-top: 0.5rem !important; }
[data-sr-route] .space-y-3 > * + * { margin-top: 0.75rem !important; }
[data-sr-route] .space-y-4 > * + * { margin-top: 1rem !important; }
[data-sr-route] .space-y-6 > * + * { margin-top: 1.5rem !important; }
[data-sr-route] .space-y-8 > * + * { margin-top: 2rem !important; }
[data-sr-route] .space-y-10 > * + * { margin-top: 2.5rem !important; }

/* ---- Playlist Modal Overrides ---- */
#sr-playlist-modal .modal-overlay {
    animation: sr-fade-in 0.2s ease;
}

/* ---- Top-bar Main Navigation — exact musico theme replica
 * Replicates the wipe-in bar hover animation from the main site:
 * - Each menu link has a ::before bar that scales from right-to-left to left-to-right on hover
 * - 50% height white bar with 0.2 opacity, transitioning on transform over 0.3s
 * - Active items stay in the hover state
 * ------------------------------------------------------------- */
[data-sr-route] .sr-topbar-menu {
    list-style: none !important;
    margin: 0 0.75rem 0 0 !important;
    padding: 0 !important;
    display: none !important;
}
@media (min-width: 1024px) {
    [data-sr-route] .sr-topbar-menu {
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
    }
}
[data-sr-route] .sr-topbar-menu > li {
    position: relative !important;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
[data-sr-route] .sr-topbar-menu > li:last-child {
    margin-right: 0 !important;
}

/* Base link — position:relative + overflow:hidden are what enable the ::before bar clipping */
[data-sr-route] .sr-topbar-menu > li > a {
    display: inline-block !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 8px 0.7em !important;
    font-family: "Poppins", "Renner", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    line-height: 1.6 !important;
    text-transform: uppercase !important;
    background: transparent !important;
    border-radius: 0 !important;
    transition: padding 0.3s, color 0.1s !important;
    z-index: 0 !important;
}

/* The wipe-in bar — collapsed by default, anchored to the right */
[data-sr-route] .sr-topbar-menu > li > a::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: -1 !important;
    opacity: 0.22 !important;
    height: 50% !important;
    width: 100% !important;
    background-color: #c7972b !important;
    transform-origin: right top !important;
    transform: scale(0, 1) !important;
    transition: transform 0.3s ease !important;
    pointer-events: none !important;
}

/* Hover / focus / active (current page): expand bar from left-to-right */
[data-sr-route] .sr-topbar-menu > li > a:hover::before,
[data-sr-route] .sr-topbar-menu > li > a:focus::before,
[data-sr-route] .sr-topbar-menu > li.current-menu-item > a::before,
[data-sr-route] .sr-topbar-menu > li.current-menu-ancestor > a::before,
[data-sr-route] .sr-topbar-menu > li.current-menu-parent > a::before,
[data-sr-route] .sr-topbar-menu > li.current_page_item > a::before {
    transform-origin: left top !important;
    transform: scale(1, 1) !important;
}

/* Text turns SunSka yellow on hover and on the current page (v2.0.17) */
[data-sr-route] .sr-topbar-menu > li > a:hover,
[data-sr-route] .sr-topbar-menu > li > a:focus,
[data-sr-route] .sr-topbar-menu > li.current-menu-item > a,
[data-sr-route] .sr-topbar-menu > li.current-menu-ancestor > a,
[data-sr-route] .sr-topbar-menu > li.current-menu-parent > a,
[data-sr-route] .sr-topbar-menu > li.current_page_item > a {
    color: #c7972b !important;
    background: transparent !important;
    text-decoration: none !important;
}

/* Trim the menu on narrower viewports so the search box stays usable */
@media (max-width: 1279px) {
    [data-sr-route] .sr-topbar-menu > li:nth-child(n+5) {
        display: none !important;
    }
}
@media (max-width: 1100px) {
    [data-sr-route] .sr-topbar-menu > li:nth-child(n+4) {
        display: none !important;
    }
}

/* ---- News Article Body (v2.0.22)
 * Typography for WP / Gutenberg block content rendered inside the music
 * app shell. The single-article template wraps `the_content` output in
 * `.sr-news-body` so we can scope these rules without touching the rest
 * of the music engine pages. */
[data-sr-route="news-article"] .sr-news-body {
    color: #d6d6d6;
    font-size: 16px;
    line-height: 1.7;
}
[data-sr-route="news-article"] .sr-news-body > * {
    margin: 0 0 1.1em 0;
}
[data-sr-route="news-article"] .sr-news-body > *:last-child { margin-bottom: 0; }

[data-sr-route="news-article"] .sr-news-body h2,
[data-sr-route="news-article"] .sr-news-body h3,
[data-sr-route="news-article"] .sr-news-body h4 {
    color: #ffffff;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
}
[data-sr-route="news-article"] .sr-news-body h2 { font-size: 26px; }
[data-sr-route="news-article"] .sr-news-body h3 { font-size: 21px; }
[data-sr-route="news-article"] .sr-news-body h4 { font-size: 17px; }

[data-sr-route="news-article"] .sr-news-body p { color: #d6d6d6; }
[data-sr-route="news-article"] .sr-news-body strong { color: #ffffff; }
[data-sr-route="news-article"] .sr-news-body em { color: #ebebeb; }

[data-sr-route="news-article"] .sr-news-body a {
    color: #c7972b;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
[data-sr-route="news-article"] .sr-news-body a:hover {
    color: #dca73a;
    text-decoration-thickness: 2px;
}

[data-sr-route="news-article"] .sr-news-body ul,
[data-sr-route="news-article"] .sr-news-body ol {
    padding-left: 1.4em;
}
[data-sr-route="news-article"] .sr-news-body li { margin-bottom: 0.4em; }

[data-sr-route="news-article"] .sr-news-body blockquote {
    border-left: 3px solid #c7972b;
    padding: 0.5em 1.2em;
    margin: 1.6em 0;
    background: rgba(255,255,255,0.03);
    border-radius: 0 6px 6px 0;
    color: #ffffff;
    font-style: italic;
    font-size: 18px;
    line-height: 1.55;
}

[data-sr-route="news-article"] .sr-news-body img,
[data-sr-route="news-article"] .sr-news-body .wp-block-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
[data-sr-route="news-article"] .sr-news-body figure { margin: 1.6em 0; }
[data-sr-route="news-article"] .sr-news-body figcaption {
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
    margin-top: 0.5em;
}

[data-sr-route="news-article"] .sr-news-body code {
    background: rgba(255,255,255,0.06);
    color: #f0c674;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}
[data-sr-route="news-article"] .sr-news-body pre {
    background: #0f0f0f;
    border: 1px solid rgba(255,255,255,0.08);
    padding: 14px 16px;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 13px;
}
[data-sr-route="news-article"] .sr-news-body pre code {
    background: transparent;
    color: #d6d6d6;
    padding: 0;
}

[data-sr-route="news-article"] .sr-news-body iframe {
    max-width: 100%;
    border-radius: 8px;
}
[data-sr-route="news-article"] .sr-news-body .wp-block-embed iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
}

/* Tailwind line-clamp utilities — needed by news cards in older Tailwind Play CDN builds. */
[data-sr-route] .line-clamp-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
[data-sr-route] .line-clamp-3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Store / WooCommerce add-to-cart styling (v2.0.23)
 * WooCommerce's default add-to-cart form uses light/store-checkout styling.
 * Scope-style it so it fits inside the dark music app shell. */
[data-sr-route="store-product"] .cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
}
[data-sr-route="store-product"] .cart .quantity {
    display: inline-flex;
    align-items: center;
}
[data-sr-route="store-product"] .cart .quantity input[type="number"],
[data-sr-route="store-product"] .cart input.qty {
    background: #282828;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 8px 10px;
    width: 80px;
    font-size: 14px;
    -moz-appearance: textfield;
}
[data-sr-route="store-product"] .cart input.qty:focus {
    outline: none;
    border-color: #c7972b;
    box-shadow: 0 0 0 3px rgba(199,151,43,0.18);
}
[data-sr-route="store-product"] .cart label {
    color: #b3b3b3;
    font-size: 13px;
    margin-right: 8px;
}
[data-sr-route="store-product"] .cart select {
    background: #282828;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    min-height: 40px;
}
[data-sr-route="store-product"] .cart .single_add_to_cart_button,
[data-sr-route="store-product"] .cart button[type="submit"] {
    background: #c7972b !important;
    color: #000 !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: 10px 22px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
    box-shadow: none !important;
}
[data-sr-route="store-product"] .cart .single_add_to_cart_button:hover,
[data-sr-route="store-product"] .cart button[type="submit"]:hover {
    background: #dca73a !important;
    transform: translateY(-1px);
}
[data-sr-route="store-product"] .variations_form .reset_variations {
    color: #c7972b !important;
    font-size: 12px !important;
}
[data-sr-route="store-product"] .woocommerce-variation-price {
    color: #ffffff !important;
    font-size: 18px;
    font-weight: 700;
    margin: 8px 0;
}
[data-sr-route="store-product"] .woocommerce-variation-availability,
[data-sr-route="store-product"] .stock {
    color: #b3b3b3 !important;
    font-size: 12px;
}
[data-sr-route="store-product"] .price del {
    color: #727272;
    margin-right: 8px;
    font-weight: 400;
}
[data-sr-route="store-product"] .price ins {
    text-decoration: none;
}

/* Long description block formatting */
[data-sr-route="store-product"] .sr-store-description p {
    margin: 0 0 1em 0;
}
[data-sr-route="store-product"] .sr-store-description p:last-child { margin-bottom: 0; }
[data-sr-route="store-product"] .sr-store-description a {
    color: #c7972b;
    text-decoration: underline;
    text-underline-offset: 3px;
}
[data-sr-route="store-product"] .sr-store-description ul,
[data-sr-route="store-product"] .sr-store-description ol {
    padding-left: 1.4em;
    margin-bottom: 1em;
}

/* Listing card price */
[data-sr-route="store"] .price del {
    color: #727272;
    margin-right: 4px;
    font-weight: 400;
}
[data-sr-route="store"] .price ins { text-decoration: none; }

/* ──────────────────────────────────────────────────────────────────────
 * v2.0.29 — Hide LoftLoader Lite on music-engine pages.
 *
 * Bug it fixes: on the single live-event page (and any page with HLS
 * streams / autoplay video / external iframes), the third-party
 * "LoftLoader Lite" preloader plugin waits for window.onload to fire
 * before dismissing itself. When a video source is slow or 404s, onload
 * can be delayed indefinitely, leaving the loader stuck on screen so
 * the page looks like it never loaded.
 *
 * The music engine has its own loading state and doesn't need (or want)
 * an external preloader anyway. Targeting `html.dark` reliably hits
 * music-engine pages because app.php adds that class to <html>.
 * ────────────────────────────────────────────────────────────────────── */
html.dark #loftloader-wrapper,
html.dark .loftloader-wrapper {
    display: none !important;
}
html.dark body { padding-top: 0 !important; }

/* ──────────────────────────────────────────────────────────────────────
 * v2.0.77 — Shared design tokens for "futuristic" hero treatments
 * (song page, artist page, trending). Refined pulse indicator +
 * animated waveform bars + reduced-motion safety.
 * ────────────────────────────────────────────────────────────────────── */
.sr-pulse {
    position: relative;
    display: inline-flex;
    width: 10px;
    height: 10px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sr-pulse--sm { width: 8px; height: 8px; }
.sr-pulse__core {
    position: relative;
    width: 5px;
    height: 5px;
    border-radius: 9999px;
    background: var(--sr-primary, #c7972b);
    box-shadow: 0 0 6px 1px rgba(199,151,43,0.55);
}
.sr-pulse--sm .sr-pulse__core { width: 4px; height: 4px; }
.sr-pulse__ring {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: var(--sr-primary, #c7972b);
    opacity: 0;
    animation: sr-pulse-halo 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.sr-pulse--emerald .sr-pulse__core {
    background: #34d399;
    box-shadow: 0 0 6px 1px rgba(52,211,153,0.6);
}
.sr-pulse--emerald .sr-pulse__ring { background: #34d399; }
@keyframes sr-pulse-halo {
    0%   { transform: scale(0.6); opacity: 0.55; }
    70%  { transform: scale(2.4); opacity: 0; }
    100% { transform: scale(2.4); opacity: 0; }
}
@keyframes sr-wave {
    0%, 100% { transform: scaleY(0.4); }
    50%      { transform: scaleY(1.1); }
}
.sr-bar {
    transform-origin: bottom;
    animation: sr-wave 1.6s ease-in-out infinite;
}

/* v2.0.99 — Floating-element keyframes for decorative SVGs in page heros.
   Three speeds so multiple floating notes don't all rise at the same time. */
@keyframes sr-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-10px) rotate(6deg); }
}
.sr-float       { animation: sr-float 7s ease-in-out infinite; }
.sr-float-slow  { animation: sr-float 11s ease-in-out infinite; }
.sr-float-fast  { animation: sr-float 5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .sr-pulse__ring,
    .sr-bar,
    .sr-float, .sr-float-slow, .sr-float-fast { animation: none; }
}

/* ──────────────────────────────────────────────────────────────────────
 * v2.0.81 / v2.0.82 — Neon glow hover effect for cards.
 *
 * Inspired by https://letstartdesign.com/3d-flip-card-with-neon-effect-using-html-css/
 * (cyan/blue stacked box-shadows). v2.0.81 adapted it to amber for song
 * cards. v2.0.82 generalised to a CSS-custom-prop system so each section
 * gets its own colourway by toggling a single modifier class — same
 * gesture (lift + glow + edge trace), different "personality" per card type.
 *
 * USAGE — pick one base class + one optional colour modifier:
 *
 *   .sr-card-neon              (default amber/gold)   — songs
 *   .sr-card-neon--pink        (magenta/pink)          — artists
 *   .sr-card-neon--cyan        (cyan/teal)             — playlists
 *   .sr-card-neon--rose        (red/rose)              — live events
 *   .sr-card-neon--emerald     (green/emerald)         — podcasts
 *   .sr-card-neon--violet      (purple/violet)         — albums
 *
 * OPTIONAL EFFECT MODIFIERS (compose freely):
 *
 *   .sr-card-neon--pulse       — slow ambient pulse, no hover required
 *                                 (good for "live now" affordances)
 *
 * Easy revert: remove the `sr-card-neon*` classes from the card wrapper(s),
 * or `cp <template>.bak <template>`. The `.sr-card-neon` rules are harmless
 * to leave in CSS if nothing references them.
 * ────────────────────────────────────────────────────────────────────── */
/* v2.0.89: REVERTED .sr-card-neon to v2.0.87 hover-only behaviour. The
   v2.0.88 always-visible neon border experiment is preserved as a separate
   `.sr-header-neon` class below — applied to section heading containers
   instead of cards (per user's correction). */
.sr-card-neon {
    /* Default colourway = SunSka amber. Each `--<color>` modifier below
       overrides these two RGB triplets and the card recolours automatically. */
    --sr-neon-rgb: 199, 151, 43;          /* deep / outer glow tone        */
    --sr-neon-accent-rgb: 255, 215, 100;  /* lifted / inner accent tone    */

    position: relative;
    z-index: 0;

    /* Asymmetric transitions: long ease-out for hover-EXIT (settle slowly). */
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Thin neon edge trace — diagonal gradient (top-left dim → bottom-right
   brightest) drawn on a pseudo-element with a mask-composite cutout so it
   reads as a 1px outline around the card. Hover-only. */
.sr-card-neon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(var(--sr-neon-rgb), 0)   0%,
        rgba(var(--sr-neon-rgb), 0.4) 35%,
        rgba(var(--sr-neon-accent-rgb), 0.9) 65%,
        rgba(var(--sr-neon-rgb), 0.4) 100%
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.sr-card-neon:hover {
    transform: translateY(-3px);
    box-shadow:
        0 0 32px -4px  rgba(var(--sr-neon-rgb), 0.45),
        0 0 64px -16px rgba(var(--sr-neon-rgb), 0.30),
        0 18px 36px -12px rgba(0, 0, 0, 0.55);

    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sr-card-neon:hover::before {
    opacity: 1;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.6, 1);
}

/* ──────────────────────────────────────────────────────────────────────
 * v2.0.89 — .sr-header-neon: ALWAYS-VISIBLE neon border for section
 * heading containers (the "linear style cards" treatment from the
 * reference image, correctly scoped to headers this time, not cards).
 *
 * Use on the outer div of each section header. Defaults to amber; pair
 * with `sr-header-neon--<color>` modifier to match the section's eyebrow
 * colour (pink for artists, cyan for playlists, rose for live events,
 * emerald for podcasts/commerce, violet for albums).
 *
 * Specificity prefix [data-sr-route] needed to win over the
 * [data-sr-route] .border { border-color: ... } shim at line 512.
 * ────────────────────────────────────────────────────────────────────── */
.sr-header-neon,
[data-sr-route] .sr-header-neon {
    --sr-neon-rgb: 199, 151, 43;
    --sr-neon-accent-rgb: 255, 215, 100;

    position: relative;
    border: 1px solid rgba(var(--sr-neon-rgb), 0.25) !important;
    border-color: rgba(var(--sr-neon-rgb), 0.25) !important;
    /* v2.0.92 — neon visibility dialled to ~25% per user feedback.
       Border, top-rim accent, and main inner glow all sit at 0.25 opacity. */
    box-shadow:
        inset 0 0 28px -6px  rgba(var(--sr-neon-rgb), 0.18),  /* main inner glow */
        inset 0 0 60px -20px rgba(var(--sr-neon-rgb), 0.12),  /* wider inner halo */
        inset 0 1px 0 0      rgba(var(--sr-neon-accent-rgb), 0.25) !important;  /* top accent rim */
    transition: border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ──────────────────────────────────────────────────────────────────────
 * v2.0.93 — .sr-see-all: neon-pill See-All button.
 *
 * Sits inside `.sr-header-neon[--<color>]` and auto-derives its colour
 * from the parent's `--sr-neon-rgb` custom property. So a pink-themed
 * header has a pink See All, a cyan header has cyan, etc. — no per-link
 * colour class needed. Chevron slides right on hover.
 * ────────────────────────────────────────────────────────────────────── */
.sr-see-all,
[data-sr-route] .sr-see-all {
    /* v2.0.94 — bolder button-like treatment. Tinted background + brighter
       border at rest so it reads as an actual button, not a tracked label. */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.2rem;
    border-radius: 9999px;
    background: rgba(var(--sr-neon-rgb, 199, 151, 43), 0.12) !important;
    border: 1px solid rgba(var(--sr-neon-rgb, 199, 151, 43), 0.45) !important;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sr-see-all:hover,
[data-sr-route] .sr-see-all:hover {
    color: #fff;
    background: rgba(var(--sr-neon-rgb, 199, 151, 43), 0.22) !important;
    border-color: rgba(var(--sr-neon-rgb, 199, 151, 43), 0.85) !important;
    box-shadow:
        0 0 22px -4px rgba(var(--sr-neon-rgb, 199, 151, 43), 0.55),
        inset 0 0 14px -4px rgba(var(--sr-neon-rgb, 199, 151, 43), 0.25);
    transform: translateY(-1px);
}

.sr-see-all svg {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sr-see-all:hover svg {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .sr-see-all, .sr-see-all svg { transition: none; }
    .sr-see-all:hover { transform: none; }
    .sr-see-all:hover svg { transform: none; }
}

/* ── Shared colour variants — each just swaps the two RGB triplets.
   Modifier classes work on BOTH .sr-card-neon AND .sr-header-neon. ── */

/* Pink / magenta — artists. Bright cherry-pink for "personality". */
.sr-card-neon--pink, .sr-header-neon--pink {
    --sr-neon-rgb: 236, 72, 153;
    --sr-neon-accent-rgb: 244, 114, 182;
}

/* Cyan / teal — playlists. Cool curated-collection vibe. */
.sr-card-neon--cyan, .sr-header-neon--cyan {
    --sr-neon-rgb: 34, 211, 238;
    --sr-neon-accent-rgb: 103, 232, 249;
}

/* Rose / red — live events. Broadcast-urgent. */
.sr-card-neon--rose, .sr-header-neon--rose {
    --sr-neon-rgb: 244, 63, 94;
    --sr-neon-accent-rgb: 251, 113, 133;
}

/* Emerald / green — podcasts. Conversation / organic. */
.sr-card-neon--emerald, .sr-header-neon--emerald {
    --sr-neon-rgb: 16, 185, 129;
    --sr-neon-accent-rgb: 52, 211, 153;
}

/* Violet / purple — albums. Deep listening / immersion. */
.sr-card-neon--violet, .sr-header-neon--violet {
    --sr-neon-rgb: 139, 92, 246;
    --sr-neon-accent-rgb: 167, 139, 250;
}

/* ── Optional effect modifier — ambient pulse, no hover required ────── */

.sr-card-neon--pulse {
    animation: sr-card-neon-pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes sr-card-neon-pulse {
    0%, 100% {
        box-shadow:
            0 0 14px -2px rgba(var(--sr-neon-rgb), 0.30),
            0 0 28px -10px rgba(var(--sr-neon-rgb), 0.20);
    }
    50% {
        box-shadow:
            0 0 22px -2px rgba(var(--sr-neon-rgb), 0.50),
            0 0 44px -10px rgba(var(--sr-neon-rgb), 0.32);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sr-card-neon,
    .sr-card-neon::before  { transition: none; }
    .sr-card-neon:hover    { transform: none; }
    .sr-card-neon--pulse   { animation: none; }
}

/* ──────────────────────────────────────────────────────────────────────
 * v2.0.84 — Legacy hover-shadow card smoothness shim.
 *
 * Many templates (album cards, playlist cards, podcast cards, artist
 * cards, store cards, etc. — 27 files at last count) use the older
 * `hover:shadow-sr-card transition-all duration-200` Tailwind pattern
 * without the newer `.sr-card-neon` class. v2.0.83 only fixed the hover-
 * out easing on cards that had `.sr-card-neon`. Everything else still
 * used Tailwind's 200ms symmetric transition — so the user saw home
 * cards animate smoothly but album / artist / discover cards snap.
 *
 * Rather than retrofit 27 templates, the attribute selector below
 * catches every element that uses the legacy utility and gives it the
 * SAME asymmetric "snap-in, slow-out" timing as `.sr-card-neon`. No
 * template edits required — fix lands site-wide.
 *
 * NOTE: this only changes timing, not visuals. Cards still show the
 * existing Tailwind shadow on hover (no neon glow added). To get the
 * actual coloured glow, add the `sr-card-neon[--<colour>]` class —
 * which is what we've done on home.php (v2.0.82) and on song-card.php
 * (v2.0.81).
 * ────────────────────────────────────────────────────────────────────── */
[class*="hover:shadow-sr-card"] {
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
[class*="hover:shadow-sr-card"]:hover {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
/* Same smoothing for the inner `<img>` that uses `group-hover:scale-105` —
   otherwise the image scales back down with a snappy linear feel while the
   wrapper's shadow eases out slowly, which is more jarring than either alone. */
[class*="hover:shadow-sr-card"] img[class*="group-hover:scale"] {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
[class*="hover:shadow-sr-card"]:hover img[class*="group-hover:scale"] {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@media (prefers-reduced-motion: reduce) {
    [class*="hover:shadow-sr-card"],
    [class*="hover:shadow-sr-card"] img[class*="group-hover:scale"] {
        transition: none !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────
 * v2.0.128 — Reviews & Ratings styles
 * Display stars (.sr-stars) — read-only, support half-stars via fg width.
 * Input stars (.sr-stars-input) — interactive with half-star hit zones.
 * Spoiler block — blur + click to reveal.
 * ────────────────────────────────────────────────────────────────────── */

/* Display stars — used in summary block, review cards, and JS-rendered cards. */
.sr-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    --sr-star-px: 14px;
    color: rgba(255, 255, 255, 0.18);
    line-height: 1;
}
.sr-stars__cell {
    position: relative;
    display: inline-block;
    width: var(--sr-star-px);
    height: var(--sr-star-px);
    line-height: 0;
}
.sr-stars__bg {
    width: 100%;
    height: 100%;
    display: block;
}
.sr-stars__fg {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    overflow: hidden;
    color: #f5b941;
    pointer-events: none;
}
.sr-stars__fg svg {
    width: var(--sr-star-px);
    height: var(--sr-star-px);
    display: block;
}

/* Input stars (composer) — interactive */
.sr-stars-input {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    --sr-star-px: 22px;
    color: rgba(255, 255, 255, 0.18);
    cursor: pointer;
    user-select: none;
}
.sr-stars-input--sm {
    --sr-star-px: 16px;
}
.sr-stars-input__cell {
    position: relative;
    display: inline-block;
    width: var(--sr-star-px);
    height: var(--sr-star-px);
    line-height: 0;
    transition: transform 80ms ease-out;
}
.sr-stars-input__cell:hover { transform: scale(1.05); }
.sr-stars-input__cell .sr-stars__bg {
    width: 100%;
    height: 100%;
    display: block;
}
.sr-stars-input__fg {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    overflow: hidden;
    color: #f5b941;
    pointer-events: none;
    transition: width 80ms ease-out;
}
.sr-stars-input__fg svg {
    width: var(--sr-star-px);
    height: var(--sr-star-px);
    display: block;
}
/* Half-star hit zones — invisible buttons that drive the click/hover. */
.sr-stars-input__half-left,
.sr-stars-input__half-right {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 2;
}
.sr-stars-input__half-left  { left: 0; }
.sr-stars-input__half-right { right: 0; }

/* Spoiler reveal — body is blurred until clicked. */
.sr-spoiler .sr-spoiler__content {
    filter: blur(8px);
    transition: filter 180ms ease-out;
    user-select: none;
    pointer-events: none;
}
.sr-spoiler.sr-spoiler--revealed .sr-spoiler__content {
    filter: none;
    user-select: text;
    pointer-events: auto;
}
.sr-spoiler.sr-spoiler--revealed .sr-spoiler__reveal {
    display: none;
}
@media (prefers-reduced-motion: reduce) {
    .sr-stars-input__cell,
    .sr-stars-input__fg,
    .sr-spoiler .sr-spoiler__content { transition: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────
 * v2.0.141 — Footer player + fullscreen Now Playing
 * ────────────────────────────────────────────────────────────────────── */

/* Z-index ladder — fullscreen player sits above queue/notif panels */
.z-fullscreen { z-index: 9000; }

/* Audio-reactive bars overlay on the footer artwork. Hidden by default;
   shown via .sr-is-playing class on <body> while the player is playing. */
.sr-np-bars {
    position: absolute;
    inset: 0;
    display: none;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    padding: 0 6px 4px;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 50%);
    pointer-events: none;
}
body.sr-is-playing .sr-np-bars { display: flex; }
.sr-np-bars span {
    width: 3px;
    background: #fff;
    border-radius: 2px;
    animation: srNpBar 0.85s ease-in-out infinite alternate;
    transform-origin: bottom;
}
.sr-np-bars span:nth-child(1) { height: 30%; animation-delay: 0s;    animation-duration: 0.7s; }
.sr-np-bars span:nth-child(2) { height: 70%; animation-delay: 0.15s; animation-duration: 0.85s; }
.sr-np-bars span:nth-child(3) { height: 45%; animation-delay: 0.05s; animation-duration: 0.65s; }
.sr-np-bars span:nth-child(4) { height: 60%; animation-delay: 0.22s; animation-duration: 0.95s; }
@keyframes srNpBar {
    0%   { transform: scaleY(0.30); }
    100% { transform: scaleY(1.00); }
}

/* When playing, the artwork image dims slightly so the bars read clearly */
body.sr-is-playing .sr-np-artwork-link img { opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
    .sr-np-bars span { animation: none !important; transform: scaleY(0.6); }
}

/* Fullscreen Now Playing — fade in animation */
#sr-fs-player:not(.hidden) {
    animation: srFsFadeIn 280ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes srFsFadeIn {
    from { opacity: 0; transform: scale(1.02); }
    to   { opacity: 1; transform: scale(1); }
}

/* Slow ken-burns zoom on the fullscreen artwork while playing — feels alive */
body.sr-is-playing #sr-fs-artwork {
    animation: srFsKenBurns 22s ease-in-out infinite alternate;
}
@keyframes srFsKenBurns {
    0%   { transform: scale(1.0); }
    100% { transform: scale(1.06); }
}

/* Lyrics scrollbar — slim and dark */
#sr-fs-lyrics::-webkit-scrollbar { width: 6px; }
#sr-fs-lyrics::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
#sr-fs-lyrics::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.35); }

/* ──────────────────────────────────────────────────────────────────────
 * v2.0.144 — Force-light dividers for dashboard tables
 *
 * Tailwind's `border-white/5` arbitrary opacity wasn't in the JIT
 * output on this build, so rows fell back to the default light-grey
 * border and looked bright. Reset all inherited table borders and
 * pin the colour explicitly with !important to win over any stray
 * Tailwind border-color classes.
 * ────────────────────────────────────────────────────────────────────── */

/* Reset everything */
.sr-dash-panel table,
.sr-dash-panel table thead,
.sr-dash-panel table tbody,
.sr-dash-panel table tr,
.sr-dash-panel table th,
.sr-dash-panel table td,
[data-panel="earnings"] table,
[data-panel="earnings"] table thead,
[data-panel="earnings"] table tbody,
[data-panel="earnings"] table tr,
[data-panel="earnings"] table th,
[data-panel="earnings"] table td {
    border: 0 !important;
    background-image: none !important;
}

.sr-dash-panel table,
[data-panel="earnings"] table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Header underline — subtle */
.sr-dash-panel table > thead > tr > th,
[data-panel="earnings"] table > thead > tr > th {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Row dividers — very soft, exactly matches the rest of the app */
.sr-dash-panel table > tbody > tr,
[data-panel="earnings"] table > tbody > tr {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.sr-dash-panel table > tbody > tr:first-child,
[data-panel="earnings"] table > tbody > tr:first-child {
    border-top: 0 !important;
}

/* Row hover */
.sr-dash-panel table > tbody > tr:hover,
[data-panel="earnings"] table > tbody > tr:hover {
    background-color: rgba(255, 255, 255, 0.025);
}

/* Withdrawals list (ul/li) divider */
[data-panel="earnings"] ul > li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}