/* ==========================================================================
   Sidefiles design system
   --------------------------------------------------------------------------
   One stylesheet, loaded after Bootstrap 5.3, on every layout (public +
   admin). Three layers:

     1. TOKENS      --sf-* custom properties, light (default) and dark.
                    Theme is chosen by <html data-bs-theme="light|dark">,
                    set before first paint by the inline script in the
                    layouts (localStorage 'sf-theme' → OS preference).
     2. BOOTSTRAP   Bootstrap's own variables re-pointed at the tokens, so
                    every stock component (cards, forms, dropdowns, modals,
                    tables, alerts) follows the theme with no markup change.
     3. COMPONENTS  .sf-* classes for the redesigned surfaces (nav, file
                    page, comments, player, lyrics, profile, admin), plus a
                    "legacy" block that re-tokenises page-scoped classes
                    that still live in per-view <style> blocks.

   To re-brand: change the tokens in section 1. Nothing else hard-codes a
   colour.
   ========================================================================== */

/* ── 1. TOKENS ───────────────────────────────────────────────────────────
   Palette: airy white + cool grey surfaces, one clear blue for actions,
   pale-blue and peach pastel "tiles" for emphasis, navy ink. Night mode is
   deep navy (not black) with the same blue + peach accents. */
:root,
[data-bs-theme="light"] {
    --sf-bg: #f4f7fb;
    --sf-surface: #ffffff;
    --sf-surface-2: #f2f6fb;
    --sf-surface-3: #e6edf6;
    --sf-line: #e7ecf3;
    --sf-line-strong: #d0d9e6;
    --sf-ink: #0f1b2d;
    --sf-text: #27344a;
    --sf-muted: #5e6b82;
    --sf-faint: #8d99ae;

    --sf-accent: #2f6fed;                       /* primary blue */
    --sf-accent-hover: #2459c9;
    --sf-accent-soft: #e8f1fe;                  /* pale-blue tile */
    --sf-accent-text: #1f58cc;
    --sf-accent-rgb: 47, 111, 237;
    --sf-on-accent: #ffffff;

    --sf-love: #e2553c;                         /* coral */
    --sf-love-soft: #ffe7e0;                    /* peach tile */
    --sf-on-love: #ffffff;
    --sf-ok: #1c8657;
    --sf-ok-soft: #ddf5e9;
    --sf-warn: #9c6408;
    --sf-warn-soft: #fff2d3;
    --sf-danger: #cf372c;
    --sf-danger-soft: #fde6e3;

    --sf-avatar-bg: #dce9fd;
    --sf-avatar-ink: #1c4aa8;
    --sf-thumb-bg: #e9f0f9;

    --sf-shadow-sm: 0 1px 2px rgba(15, 35, 75, .05);
    --sf-shadow-md: 0 6px 20px rgba(15, 35, 75, .08);
    --sf-shadow-lg: 0 18px 44px rgba(15, 35, 75, .14);
    --sf-nav-bg: rgba(255, 255, 255, .9);
    --sf-hero: linear-gradient(120deg, #e3eeff 0%, #eef4ff 48%, #ffe9e2 110%);
    --sf-hero-ink: #0f1b2d;
    --sf-hero-muted: #4a5a75;

    --sf-radius: 18px;
    --sf-radius-sm: 12px;
    --sf-nav-h: 60px;
    --sf-tabbar-h: 0px;
    --sf-font: "Inter var", Inter, Roboto, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    color-scheme: light;
}

[data-bs-theme="dark"] {
    --sf-bg: #0d1320;
    --sf-surface: #151c2c;
    --sf-surface-2: #1c2537;
    --sf-surface-3: #283349;
    --sf-line: #222c40;
    --sf-line-strong: #37445f;
    --sf-ink: #eef3fb;
    --sf-text: #d2dae8;
    --sf-muted: #9ca9c0;
    --sf-faint: #717f99;

    --sf-accent: #3b79ee;
    --sf-accent-hover: #5a90f5;
    --sf-accent-soft: #1b2d52;
    --sf-accent-text: #9cc0ff;
    --sf-accent-rgb: 91, 150, 255;
    --sf-on-accent: #ffffff;

    --sf-love: #ff9d87;
    --sf-love-soft: #47292a;
    --sf-on-love: #3d130a;
    --sf-ok: #7fd7ab;
    --sf-ok-soft: #17382b;
    --sf-warn: #f3c873;
    --sf-warn-soft: #3d3117;
    --sf-danger: #ff9f97;
    --sf-danger-soft: #472528;

    --sf-avatar-bg: #263a63;
    --sf-avatar-ink: #cfe0ff;
    --sf-thumb-bg: #1f2a3f;

    --sf-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --sf-shadow-md: 0 6px 20px rgba(0, 0, 0, .4);
    --sf-shadow-lg: 0 20px 48px rgba(0, 0, 0, .55);
    --sf-nav-bg: rgba(17, 23, 37, .88);
    --sf-hero: linear-gradient(120deg, #172a52 0%, #1b2440 50%, #3d2a2e 112%);
    --sf-hero-ink: #eef3fb;
    --sf-hero-muted: #b6c3da;
    color-scheme: dark;
}

/* ── 2. BOOTSTRAP MAPPING ──────────────────────────────────────────────── */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-bg: var(--sf-bg);
    --bs-body-color: var(--sf-text);
    --bs-body-font-family: var(--sf-font);
    --bs-emphasis-color: var(--sf-ink);
    --bs-heading-color: var(--sf-ink);
    --bs-secondary-color: var(--sf-muted);
    --bs-tertiary-color: var(--sf-faint);
    --bs-secondary-bg: var(--sf-surface-3);
    --bs-tertiary-bg: var(--sf-surface-2);
    --bs-border-color: var(--sf-line);
    --bs-border-color-translucent: var(--sf-line);
    --bs-primary: var(--sf-accent);
    --bs-primary-rgb: var(--sf-accent-rgb);
    --bs-link-color: var(--sf-accent-text);
    --bs-link-color-rgb: var(--sf-accent-rgb);
    --bs-link-hover-color: var(--sf-accent-hover);
    --bs-link-hover-color-rgb: var(--sf-accent-rgb);
    --bs-border-radius: var(--sf-radius-sm);
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: var(--sf-radius);
    --bs-focus-ring-color: rgba(var(--sf-accent-rgb), .3);
}

html { scroll-padding-top: calc(var(--sf-nav-h) + 12px); }
body {
    background: var(--sf-bg);
    color: var(--sf-text);
    font-family: var(--sf-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--sf-ink); letter-spacing: -.011em; }
a { color: var(--sf-accent-text); }
a:hover { color: var(--sf-accent-hover); }
.text-muted { color: var(--sf-muted) !important; }
hr { border-color: var(--sf-line); opacity: 1; }
::selection { background: rgba(var(--sf-accent-rgb), .28); }
:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; }

.card {
    --bs-card-bg: var(--sf-surface);
    --bs-card-border-color: var(--sf-line);
    --bs-card-border-radius: var(--sf-radius);
    --bs-card-inner-border-radius: calc(var(--sf-radius) - 1px);
    --bs-card-cap-bg: var(--sf-surface-2);
    box-shadow: 0 1px 2px rgba(15, 35, 75, .04), 0 8px 24px rgba(15, 35, 75, .04);
}
[data-bs-theme="dark"] .card { box-shadow: none; }
.btn { --bs-btn-border-radius: 999px; --bs-btn-font-weight: 600; }
.btn-sm, .btn-lg { --bs-btn-border-radius: 999px; }
.input-group > .btn { --bs-btn-border-radius: var(--sf-radius-sm); }
.btn-primary {
    --bs-btn-bg: var(--sf-accent); --bs-btn-border-color: var(--sf-accent); --bs-btn-color: var(--sf-on-accent);
    --bs-btn-hover-bg: var(--sf-accent-hover); --bs-btn-hover-border-color: var(--sf-accent-hover); --bs-btn-hover-color: var(--sf-on-accent);
    --bs-btn-active-bg: var(--sf-accent-hover); --bs-btn-active-border-color: var(--sf-accent-hover); --bs-btn-active-color: var(--sf-on-accent);
    --bs-btn-disabled-bg: var(--sf-accent); --bs-btn-disabled-border-color: var(--sf-accent); --bs-btn-disabled-color: var(--sf-on-accent);
    --bs-btn-focus-shadow-rgb: var(--sf-accent-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--sf-accent-text); --bs-btn-border-color: var(--sf-line-strong);
    --bs-btn-hover-bg: var(--sf-accent); --bs-btn-hover-border-color: var(--sf-accent); --bs-btn-hover-color: var(--sf-on-accent);
    --bs-btn-active-bg: var(--sf-accent); --bs-btn-active-border-color: var(--sf-accent); --bs-btn-active-color: var(--sf-on-accent);
}
.btn-outline-secondary {
    --bs-btn-color: var(--sf-text); --bs-btn-border-color: var(--sf-line-strong); --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--sf-surface-2); --bs-btn-hover-border-color: var(--sf-line-strong); --bs-btn-hover-color: var(--sf-ink);
    --bs-btn-active-bg: var(--sf-surface-3); --bs-btn-active-border-color: var(--sf-line-strong); --bs-btn-active-color: var(--sf-ink);
}
.btn-light {
    --bs-btn-bg: var(--sf-surface); --bs-btn-border-color: var(--sf-line); --bs-btn-color: var(--sf-ink);
    --bs-btn-hover-bg: var(--sf-surface-2); --bs-btn-hover-border-color: var(--sf-line-strong); --bs-btn-hover-color: var(--sf-ink);
    --bs-btn-active-bg: var(--sf-surface-3); --bs-btn-active-color: var(--sf-ink);
}
.form-control, .form-select, .input-group-text {
    background-color: var(--sf-surface); border-color: var(--sf-line-strong); color: var(--sf-ink);
}
.form-control::placeholder { color: var(--sf-faint); }
.form-control:focus, .form-select:focus {
    background-color: var(--sf-surface); color: var(--sf-ink);
    border-color: var(--sf-accent); box-shadow: 0 0 0 3px rgba(var(--sf-accent-rgb), .18);
}
.input-group-text { background-color: var(--sf-surface-2); color: var(--sf-muted); }
.form-check-input:checked { background-color: var(--sf-accent); border-color: var(--sf-accent); }
.dropdown-menu {
    --bs-dropdown-bg: var(--sf-surface); --bs-dropdown-border-color: var(--sf-line);
    --bs-dropdown-link-color: var(--sf-text); --bs-dropdown-link-hover-bg: var(--sf-surface-2);
    --bs-dropdown-link-hover-color: var(--sf-ink); --bs-dropdown-link-active-bg: var(--sf-accent);
    --bs-dropdown-border-radius: 12px; --bs-dropdown-header-color: var(--sf-faint);
    box-shadow: var(--sf-shadow-lg);
}
.modal { --bs-modal-bg: var(--sf-surface); --bs-modal-border-color: var(--sf-line); --bs-modal-border-radius: var(--sf-radius); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--sf-text); --bs-table-border-color: var(--sf-line); --bs-table-striped-bg: var(--sf-surface-2); --bs-table-hover-bg: var(--sf-surface-2); }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-color: var(--sf-text); --bs-list-group-border-color: var(--sf-line); --bs-list-group-action-hover-bg: var(--sf-surface-2); --bs-list-group-action-color: var(--sf-text); --bs-list-group-action-hover-color: var(--sf-ink); }
.accordion { --bs-accordion-bg: transparent; --bs-accordion-color: var(--sf-text); --bs-accordion-border-color: var(--sf-line); --bs-accordion-btn-color: var(--sf-ink); --bs-accordion-active-bg: var(--sf-accent-soft); --bs-accordion-active-color: var(--sf-accent-text); --bs-accordion-btn-focus-box-shadow: none; }
.nav-tabs, .nav-pills { --bs-nav-link-color: var(--sf-muted); --bs-nav-link-hover-color: var(--sf-ink); --bs-nav-tabs-link-active-bg: var(--sf-surface); --bs-nav-tabs-link-active-color: var(--sf-ink); --bs-nav-tabs-border-color: var(--sf-line); --bs-nav-pills-link-active-bg: var(--sf-accent); }
.pagination { --bs-pagination-bg: var(--sf-surface); --bs-pagination-color: var(--sf-text); --bs-pagination-border-color: var(--sf-line); --bs-pagination-hover-bg: var(--sf-surface-2); --bs-pagination-hover-color: var(--sf-ink); --bs-pagination-active-bg: var(--sf-accent); --bs-pagination-active-border-color: var(--sf-accent); --bs-pagination-disabled-bg: var(--sf-surface); --bs-pagination-disabled-color: var(--sf-faint); }
.breadcrumb { --bs-breadcrumb-divider-color: var(--sf-faint); --bs-breadcrumb-item-active-color: var(--sf-muted); }
.alert-light, .alert-secondary { --bs-alert-bg: var(--sf-surface-2); --bs-alert-border-color: var(--sf-line); --bs-alert-color: var(--sf-text); }
mark, .mark { background: var(--sf-warn-soft); color: inherit; padding: 0 .15em; border-radius: 3px; }
code { color: var(--sf-love); }
pre { color: var(--sf-text); }

/* Light-only utilities that would punch white holes into a dark page. */
[data-bs-theme="dark"] .bg-white { background-color: var(--sf-surface) !important; }
[data-bs-theme="dark"] .bg-light { background-color: var(--sf-surface-2) !important; }
[data-bs-theme="dark"] .text-dark:not(.bg-warning):not(.bg-info):not(.text-bg-warning):not(.text-bg-info) { color: var(--sf-ink) !important; }
[data-bs-theme="dark"] .text-bg-light,
[data-bs-theme="dark"] .badge.bg-light { background-color: var(--sf-surface-3) !important; color: var(--sf-text) !important; }
[data-bs-theme="dark"] .text-black { color: var(--sf-ink) !important; }
[data-bs-theme="dark"] .navbar-light { --bs-navbar-color: var(--sf-muted); --bs-navbar-hover-color: var(--sf-ink); --bs-navbar-brand-color: var(--sf-ink); --bs-navbar-brand-hover-color: var(--sf-ink); }
[data-bs-theme="dark"] .table-light { --bs-table-bg: var(--sf-surface-2); --bs-table-color: var(--sf-text); --bs-table-border-color: var(--sf-line); }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
[data-bs-theme="dark"] .btn-outline-dark { --bs-btn-color: var(--sf-ink); --bs-btn-border-color: var(--sf-line-strong); --bs-btn-hover-bg: var(--sf-surface-3); --bs-btn-hover-color: var(--sf-ink); }
/* Inline style="" safety net: older views paint literal light backgrounds /
   dark text straight onto elements. Catch the recurring literals so they
   follow the theme instead of glowing white. */
[data-bs-theme="dark"] [style*="background:#fff"],
[data-bs-theme="dark"] [style*="background: #fff"],
[data-bs-theme="dark"] [style*="background-color:#fff"],
[data-bs-theme="dark"] [style*="background-color: #fff"],
[data-bs-theme="dark"] [style*="background:white"],
[data-bs-theme="dark"] [style*="background: white"] { background-color: var(--sf-surface) !important; }
[data-bs-theme="dark"] [style*="background:#f8fafc"],
[data-bs-theme="dark"] [style*="background: #f8fafc"],
[data-bs-theme="dark"] [style*="background:#f6f8fa"],
[data-bs-theme="dark"] [style*="background: #f6f8fa"],
[data-bs-theme="dark"] [style*="background:#f1f5f9"],
[data-bs-theme="dark"] [style*="background: #f1f5f9"],
[data-bs-theme="dark"] [style*="background:#f9fafb"],
[data-bs-theme="dark"] [style*="background: #f9fafb"],
[data-bs-theme="dark"] [style*="background:#f3f4f6"],
[data-bs-theme="dark"] [style*="background: #f3f4f6"],
[data-bs-theme="dark"] [style*="background:#eff6ff"],
[data-bs-theme="dark"] [style*="background: #eff6ff"] { background-color: var(--sf-surface-2) !important; border-color: var(--sf-line) !important; }
[data-bs-theme="dark"] [style*="color:#1f2328"],
[data-bs-theme="dark"] [style*="color: #1f2328"],
[data-bs-theme="dark"] [style*="color:#0f172a"],
[data-bs-theme="dark"] [style*="color: #0f172a"],
[data-bs-theme="dark"] [style*="color:#111827"],
[data-bs-theme="dark"] [style*="color: #111827"],
[data-bs-theme="dark"] [style*="color:#1e293b"],
[data-bs-theme="dark"] [style*="color: #1e293b"],
[data-bs-theme="dark"] [style*="color:#000"] { color: var(--sf-ink) !important; }
[data-bs-theme="dark"] [style*="color:#334155"],
[data-bs-theme="dark"] [style*="color: #334155"],
[data-bs-theme="dark"] [style*="color:#475569"],
[data-bs-theme="dark"] [style*="color: #475569"],
[data-bs-theme="dark"] [style*="color:#374151"],
[data-bs-theme="dark"] [style*="color: #374151"] { color: var(--sf-text) !important; }

/* ── 3. COMPONENTS ─────────────────────────────────────────────────────── */

/* 3.1 Avatars ----------------------------------------------------------- */
.sf-avatar {
    --size: 40px;
    width: var(--size); height: var(--size); border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: var(--sf-avatar-bg); color: var(--sf-avatar-ink); font-weight: 700; font-size: calc(var(--size) * .4);
    object-fit: cover; overflow: hidden; text-decoration: none; line-height: 1;
}
.sf-avatar.is-guest { background: var(--sf-surface-3); color: var(--sf-muted); }
.sf-avatar-sm { --size: 30px; } .sf-avatar-lg { --size: 52px; } .sf-avatar-xl { --size: 112px; }

/* 3.2 Top navigation ---------------------------------------------------- */
.sf-nav {
    position: sticky; top: 0; z-index: 1030; height: var(--sf-nav-h);
    background: var(--sf-nav-bg); border-bottom: 1px solid var(--sf-line);
    -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
}
.sf-nav-inner { height: 100%; display: flex; align-items: center; gap: .75rem; }
.sf-brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.12rem; color: var(--sf-ink); text-decoration: none; letter-spacing: -.02em; flex-shrink: 0; }
.sf-brand:hover { color: var(--sf-ink); }
.sf-brand-mark { width: 32px; height: 32px; border-radius: 11px; background: var(--sf-accent); color: var(--sf-on-accent); display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; }
.sf-nav-links { display: flex; align-items: center; gap: .15rem; margin-left: .5rem; min-width: 0; }
.sf-nav-link {
    display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .7rem; border-radius: 999px;
    color: var(--sf-muted); font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap;
    transition: background .12s, color .12s;
}
.sf-nav-link:hover { background: var(--sf-surface-2); color: var(--sf-ink); }
.sf-nav-link.active { background: var(--sf-accent-soft); color: var(--sf-accent-text); }
.sf-nav-link i { font-size: .85rem; opacity: .85; }
.sf-nav-search { flex: 1 1 auto; max-width: 440px; margin: 0 auto; position: relative; }
.sf-nav-search input {
    width: 100%; height: 40px; border-radius: 999px; border: 1px solid transparent;
    background: var(--sf-surface-2); color: var(--sf-ink); padding: 0 1rem 0 2.5rem; font-size: .9rem;
    transition: background .12s, border-color .12s, box-shadow .12s;
}
.sf-nav-search input::placeholder { color: var(--sf-faint); }
.sf-nav-search input:focus { outline: 0; background: var(--sf-surface); border-color: var(--sf-accent); box-shadow: 0 0 0 3px rgba(var(--sf-accent-rgb), .18); }
.sf-nav-search > i { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--sf-faint); font-size: .85rem; pointer-events: none; }
.sf-nav-actions { display: flex; align-items: center; gap: .4rem; margin-left: auto; flex-shrink: 0; }
.sf-icon-btn {
    width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--sf-muted);
    display: inline-flex; align-items: center; justify-content: center; position: relative; text-decoration: none;
    transition: background .12s, color .12s; cursor: pointer; flex-shrink: 0;
}
.sf-icon-btn:hover, .sf-icon-btn[aria-expanded="true"] { background: var(--sf-surface-2); color: var(--sf-ink); }
.sf-icon-btn .sf-dot { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--sf-love); color: var(--sf-on-love); font-size: .65rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--sf-surface); }
[data-bs-theme="light"] .sf-theme-toggle .fa-sun, :root:not([data-bs-theme="dark"]) .sf-theme-toggle .fa-sun { display: none; }
[data-bs-theme="dark"] .sf-theme-toggle .fa-moon { display: none; }
[data-bs-theme="dark"] .sf-theme-toggle .fa-sun { display: inline-block; }
.sf-more-menu { min-width: 230px; padding: .4rem; }
.sf-more-menu .dropdown-item { border-radius: 8px; padding: .5rem .65rem; display: flex; align-items: center; gap: .65rem; font-size: .9rem; font-weight: 500; }
.sf-more-menu .dropdown-item i { width: 18px; text-align: center; color: var(--sf-faint); }

/* Mobile bottom tab bar: the primary nav on phones (the top bar keeps only
   brand, search and account). */
.sf-tabbar { display: none; }
@media (max-width: 767.98px) {
    :root { --sf-tabbar-h: 58px; --sf-nav-h: 54px; }
    .sf-nav-links, .sf-nav-search { display: none; }
    .sf-tabbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
        height: calc(var(--sf-tabbar-h) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--sf-nav-bg); border-top: 1px solid var(--sf-line);
        -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
    }
    .sf-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--sf-faint); font-size: .66rem; font-weight: 600; text-decoration: none; min-height: 48px; }
    .sf-tab i { font-size: 1.1rem; }
    .sf-tab.active { color: var(--sf-accent-text); }
    .sf-tab-upload i { width: 40px; height: 30px; border-radius: 10px; background: var(--sf-accent); color: var(--sf-on-accent); display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; }
    body { padding-bottom: calc(var(--sf-tabbar-h) + env(safe-area-inset-bottom, 0px)); }
}

/* 3.3 Footer ------------------------------------------------------------- */
.sf-footer { border-top: 1px solid var(--sf-line); margin-top: 2.5rem; padding: 2rem 0 2.5rem; color: var(--sf-muted); font-size: .85rem; }
.sf-footer h2 { font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: var(--sf-faint); font-weight: 700; margin-bottom: .6rem; }
.sf-footer a { color: var(--sf-muted); text-decoration: none; }
.sf-footer a:hover { color: var(--sf-accent-text); }
.sf-footer-links { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }
.sf-footer-cloud { line-height: 1.9; }
.sf-footer-bottom { border-top: 1px solid var(--sf-line); margin-top: 1.5rem; padding-top: 1.1rem; display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; justify-content: space-between; }

/* 3.4 Chips, pills, section headings ------------------------------------- */
.sf-chip {
    display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .7rem; border-radius: 999px;
    background: var(--sf-surface-2); color: var(--sf-text); font-size: .8rem; font-weight: 600;
    text-decoration: none; border: 1px solid transparent; white-space: nowrap; transition: background .12s, color .12s, border-color .12s;
}
a.sf-chip:hover { background: var(--sf-accent-soft); color: var(--sf-accent-text); }
.sf-chip.is-accent { background: var(--sf-accent-soft); color: var(--sf-accent-text); }
.sf-chip .sf-chip-k { color: var(--sf-faint); font-weight: 500; }
.sf-section-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--sf-faint); margin: 0 0 .75rem; display: flex; align-items: center; gap: .45rem; }
.sf-h { font-size: 1.05rem; font-weight: 700; color: var(--sf-ink); margin: 0; display: flex; align-items: center; gap: .5rem; }
.sf-count { background: var(--sf-surface-3); color: var(--sf-muted); font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .1rem .5rem; }

/* 3.5 Engagement bar (file / track pages) -------------------------------- */
.sf-engage { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .25rem 0; }
.sf-engage-spacer { flex: 1 1 auto; }
.sf-engage .btn-group { gap: .4rem; flex-wrap: wrap; }
.sf-engage .react-btn,
.sf-pill-btn {
    --bs-btn-padding-y: .4rem; --bs-btn-padding-x: .8rem; --bs-btn-font-size: .88rem;
    display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px !important;
    border: 1px solid transparent !important; background: var(--sf-surface-2) !important; color: var(--sf-text) !important;
    font-weight: 600; line-height: 1.2; transition: transform .1s, background .12s, border-color .12s, color .12s; margin: 0 !important;
}
.sf-engage .react-btn:hover, .sf-pill-btn:hover { background: var(--sf-surface-3) !important; color: var(--sf-ink) !important; }
.sf-engage .react-btn:active, .sf-pill-btn:active { transform: scale(.95); }
.sf-engage .react-btn.active { background: var(--sf-accent-soft) !important; border-color: transparent !important; color: var(--sf-accent-text) !important; }
.sf-engage .react-btn[data-kind="heart"].active { background: var(--sf-love-soft) !important; border-color: transparent !important; color: var(--sf-love) !important; }
.sf-engage .react-count { font-variant-numeric: tabular-nums; }
.sf-pill-btn.is-primary { background: var(--sf-accent) !important; border-color: var(--sf-accent) !important; color: var(--sf-on-accent) !important; }
.sf-pill-btn.is-primary:hover { background: var(--sf-accent-hover) !important; color: var(--sf-on-accent) !important; }
.sf-pill-btn.btn-primary:not(.is-primary) { background: var(--sf-accent-soft) !important; color: var(--sf-accent-text) !important; }
.sf-pill-btn.dropdown-toggle::after { margin-left: .1rem; opacity: .6; }
.sf-owner-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem .75rem; margin-top: .6rem; border: 1px dashed var(--sf-line-strong); border-radius: var(--sf-radius-sm); background: var(--sf-surface-2); font-size: .82rem; }
.sf-owner-tools > .sf-owner-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--sf-faint); margin-right: .25rem; }

/* Uploader strip */
.sf-uploader { display: flex; align-items: center; gap: .8rem; padding: .85rem 0; border-top: 1px solid var(--sf-line); border-bottom: 1px solid var(--sf-line); margin: .9rem 0; }
.sf-uploader-name { font-weight: 700; color: var(--sf-ink); text-decoration: none; display: block; line-height: 1.25; }
.sf-uploader-sub { font-size: .8rem; color: var(--sf-muted); }
.sf-stats-inline { display: flex; flex-wrap: wrap; gap: .25rem .9rem; color: var(--sf-muted); font-size: .85rem; align-items: center; }
.sf-stats-inline i { color: var(--sf-faint); margin-right: .25rem; }

/* 3.6 Comments ------------------------------------------------------------ */
.sf-comments-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.sf-sort { display: inline-flex; background: var(--sf-surface-2); border-radius: 999px; padding: 3px; }
.sf-sort button { border: 0; background: transparent; color: var(--sf-muted); font-size: .8rem; font-weight: 600; padding: .3rem .8rem; border-radius: 999px; cursor: pointer; }
.sf-sort button.active { background: var(--sf-surface); color: var(--sf-ink); box-shadow: var(--sf-shadow-sm); }
.sf-composer { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: 1.5rem; }
.sf-composer-box { flex: 1; min-width: 0; border: 1px solid var(--sf-line-strong); border-radius: var(--sf-radius); background: var(--sf-surface); padding: .35rem; transition: border-color .12s, box-shadow .12s; }
.sf-composer-box:focus-within { border-color: var(--sf-accent); box-shadow: 0 0 0 3px rgba(var(--sf-accent-rgb), .16); }
.sf-composer-box textarea { border: 0 !important; box-shadow: none !important; background: transparent !important; resize: none; padding: .5rem .65rem; min-height: 44px; font-size: .95rem; }
.sf-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .25rem .35rem .2rem .65rem; flex-wrap: wrap; }
.sf-composer-hint { font-size: .75rem; color: var(--sf-faint); }
.sf-composer-guest { padding: .35rem .35rem 0; }
.sf-comment { display: flex; gap: .75rem; padding: .85rem 0; }
.sf-comment + .sf-comment, .sf-thread + .sf-thread { border-top: 1px solid var(--sf-line); }
.sf-comment-main { flex: 1; min-width: 0; }
.sf-comment-meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: .88rem; }
.sf-comment-author { font-weight: 700; color: var(--sf-ink); text-decoration: none; }
.sf-comment-time { color: var(--sf-faint); font-size: .8rem; }
.sf-comment-body { margin-top: .2rem; white-space: pre-wrap; word-break: break-word; color: var(--sf-text); line-height: 1.5; }
.sf-comment-body a.mention, .comment-body a.mention { color: var(--sf-accent-text) !important; font-weight: 600; text-decoration: none; }
.sf-comment-actions { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; margin-top: .4rem; }
.sf-comment-actions .sf-link-btn { border: 0; background: transparent; color: var(--sf-muted); font-size: .8rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; cursor: pointer; }
.sf-comment-actions .sf-link-btn:hover { background: var(--sf-surface-2); color: var(--sf-ink); }
.sf-comment-actions .sf-link-btn.is-danger:hover { color: var(--sf-danger); background: var(--sf-danger-soft); }
.sf-replies { margin-left: 22px; padding-left: 1.1rem; border-left: 2px solid var(--sf-line); }
.sf-replies .sf-comment { padding: .6rem 0; border-top: 0 !important; }
.sf-badge-op { background: var(--sf-accent-soft); color: var(--sf-accent-text); font-size: .65rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.sf-empty { text-align: center; padding: 2rem 1rem; color: var(--sf-muted); }
.sf-empty i { font-size: 1.6rem; color: var(--sf-faint); display: block; margin-bottom: .5rem; }
.comment-reactions { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin: 0; font-size: .8rem; }
body .cr-btn { display: inline-flex; align-items: center; gap: .25rem; border: 1px solid transparent; background: transparent; color: var(--sf-muted); padding: .2rem .5rem; border-radius: 999px; line-height: 1.1; cursor: pointer; min-height: 28px; transition: background .12s, border-color .12s, color .12s; }
body .cr-btn:hover { background: var(--sf-surface-2); color: var(--sf-ink); border-color: var(--sf-line); }
body .cr-btn.has-count { background: var(--sf-surface-2); border-color: var(--sf-line); color: var(--sf-text); }
body .cr-btn.active { background: var(--sf-accent-soft); border-color: transparent; color: var(--sf-accent-text); }
/* Unused reactions stay tucked away until the row is hovered / focused, so a
   thread reads as conversation first and controls second. Touch devices
   (no hover) always show them. */
@media (hover: hover) {
    .sf-comment .cr-btn:not(.has-count):not(.active) { opacity: 0; }
    .sf-comment:hover .cr-btn, .sf-comment:focus-within .cr-btn { opacity: 1; }
}
body .captcha-row { background: var(--sf-surface-2); border: 1px dashed var(--sf-line-strong); border-radius: var(--sf-radius-sm); }
body .captcha-q { color: var(--sf-text); }

/* 3.7 Audio player + lyrics ---------------------------------------------- */
.sf-player {
    display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 1.25rem; align-items: center;
    background: var(--sf-surface-2); border: 1px solid var(--sf-line); border-radius: var(--sf-radius); padding: 1.1rem;
    position: relative; overflow: hidden;
}
.sf-player-art { width: 168px; height: 168px; border-radius: 12px; object-fit: cover; background: var(--sf-thumb-bg); display: block; box-shadow: var(--sf-shadow-md); }
.sf-player-art-wrap { position: relative; }
.sf-player-body { min-width: 0; }
.sf-player-title { font-size: 1.15rem; font-weight: 800; color: var(--sf-ink); line-height: 1.25; margin: 0 0 .15rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sf-player-artist { color: var(--sf-muted); font-size: .9rem; margin: 0 0 .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-player-tools { display: flex; align-items: center; gap: .35rem; margin-top: .5rem; flex-wrap: wrap; }
.sf-tool-btn { border: 1px solid var(--sf-line); background: var(--sf-surface); color: var(--sf-text); border-radius: 999px; font-size: .78rem; font-weight: 600; padding: .3rem .7rem; display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; min-height: 32px; }
.sf-tool-btn:hover { border-color: var(--sf-line-strong); color: var(--sf-ink); }
.sf-tool-btn.active { background: var(--sf-accent-soft); border-color: transparent; color: var(--sf-accent-text); }
.sf-tool-btn[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 767.98px) {
    .sf-player { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 1rem; gap: .85rem; }
    .sf-player-art { width: min(52vw, 200px); height: min(52vw, 200px); }
    .sf-player-body { width: 100%; }
    .sf-player-tools { justify-content: center; }
}
/* Plyr inherits the theme through its own custom properties. */
.plyr { --plyr-color-main: var(--sf-accent); --plyr-audio-controls-background: transparent; --plyr-audio-control-color: var(--sf-text); --plyr-audio-control-color-hover: var(--sf-on-accent); --plyr-audio-progress-buffered-background: rgba(var(--sf-accent-rgb), .22); --plyr-range-thumb-background: var(--sf-accent); --plyr-audio-range-track-background: var(--sf-surface-3); --plyr-font-family: var(--sf-font); --plyr-range-thumb-height: 14px; --plyr-control-icon-size: 18px; border-radius: 12px; }
.plyr--audio .plyr__controls { padding: .35rem 0; color: var(--sf-text); }
.plyr--audio .plyr__control[data-plyr="play"] { background: var(--sf-accent); color: var(--sf-on-accent); border-radius: 50%; padding: 12px; margin-right: .5rem; }
.plyr--audio .plyr__control[data-plyr="play"]:hover { background: var(--sf-accent-hover); }
.plyr__time { font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) { .plyr--audio .plyr__volume { display: none; } }

.sf-lyrics { border: 1px solid var(--sf-line); border-radius: var(--sf-radius); background: var(--sf-surface); margin-top: 1rem; overflow: hidden; }
.sf-lyrics-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .95rem; border-bottom: 1px solid var(--sf-line); flex-wrap: wrap; }
.sf-lyrics-tag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .12rem .5rem; border-radius: 999px; background: var(--sf-ok-soft); color: var(--sf-ok); }
.sf-lyrics-tag.is-plain { background: var(--sf-surface-3); color: var(--sf-muted); }
.sf-lyrics-scroll { max-height: 340px; overflow-y: auto; padding: 1rem .95rem 1.4rem; scroll-behavior: smooth; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; position: relative; }
.sf-lyrics-scroll.is-collapsed { max-height: 11.5rem; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%); mask-image: linear-gradient(to bottom, #000 65%, transparent 100%); }
.sf-lyrics-scroll pre { margin: 0; font-family: inherit; font-size: 1rem; line-height: 1.75; white-space: pre-wrap; word-wrap: break-word; color: var(--sf-text); }
.sf-lyric-line { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--sf-faint); font-size: 1.12rem; font-weight: 700; line-height: 1.4; padding: .32rem .5rem; border-radius: 8px; cursor: pointer; transition: color .18s, background .12s, transform .18s; transform-origin: left center; }
.sf-lyric-line:hover { background: var(--sf-surface-2); color: var(--sf-text); }
.sf-lyric-line.is-past { color: var(--sf-muted); }
.sf-lyric-line.is-active { color: var(--sf-ink); transform: scale(1.03); }
.sf-lyric-line.is-gap { min-height: 1.1rem; cursor: default; }
.sf-lyrics-foot { padding: .5rem .95rem; border-top: 1px solid var(--sf-line); font-size: .75rem; color: var(--sf-faint); display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 767.98px) { .sf-lyric-line { font-size: 1.05rem; padding: .4rem .45rem; } .sf-lyrics-scroll { max-height: 46vh; } }
@media (prefers-reduced-motion: reduce) { .sf-lyrics-scroll { scroll-behavior: auto; } .sf-lyric-line { transition: none; } }
/* Tap-to-sync editor */
.sf-sync-list { max-height: 44vh; overflow-y: auto; border: 1px solid var(--sf-line); border-radius: var(--sf-radius-sm); }
.sf-sync-row { display: flex; align-items: center; gap: .6rem; padding: .4rem .65rem; border-top: 1px solid var(--sf-line); font-size: .92rem; }
.sf-sync-row:first-child { border-top: 0; }
.sf-sync-row .t { font-variant-numeric: tabular-nums; font-size: .75rem; color: var(--sf-faint); width: 4.6em; flex-shrink: 0; }
.sf-sync-row.is-next { background: var(--sf-accent-soft); color: var(--sf-ink); font-weight: 600; }
.sf-sync-row.is-done .t { color: var(--sf-ok); }
.sf-sync-tap { width: 100%; min-height: 64px; font-size: 1.05rem; border-radius: var(--sf-radius); touch-action: manipulation; }

/* Persistent mini-player */
body .mini-player { background: var(--sf-nav-bg); border-top: 1px solid var(--sf-line); box-shadow: var(--sf-shadow-lg); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); bottom: calc(var(--sf-tabbar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: .5rem; }
@media (min-width: 768px) { body .mini-player { bottom: 0; padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); } }
body .mini-player .mini-title { color: var(--sf-ink); }
body .mini-player .mini-artist { color: var(--sf-muted); }
body .mini-player .mini-btn { background: var(--sf-accent); border-color: var(--sf-accent); color: var(--sf-on-accent); width: 40px; height: 40px; }
body .mini-player .mini-btn:hover { background: var(--sf-accent-hover); }
body .mini-player .mini-btn-ghost { background: transparent; color: var(--sf-muted); border-color: transparent; width: 36px; height: 36px; }
body .mini-player .mini-btn-ghost:hover { background: var(--sf-surface-2); color: var(--sf-ink); }
body .mini-player .mini-progress input[type=range] { background: var(--sf-surface-3); height: 4px; }
body .mini-player .mini-progress input[type=range]::-webkit-slider-thumb { background: var(--sf-accent); width: 14px; height: 14px; }
body .mini-player .mini-progress input[type=range]::-moz-range-thumb { background: var(--sf-accent); width: 14px; height: 14px; }
body .mini-player .mini-times { color: var(--sf-faint); }
body .mini-player .mini-options-menu { background: var(--sf-surface); border-color: var(--sf-line); box-shadow: var(--sf-shadow-lg); }
body .mini-player .mini-opt-item { color: var(--sf-text); }
body .mini-player .mini-opt-item:hover { background: var(--sf-surface-2); }
body .mini-player .mini-art-inner { border-radius: 8px; width: 44px; height: 44px; }

/* 3.8 Lists of files (aside "up next", grids) ----------------------------- */
.sf-aside-list { display: flex; flex-direction: column; gap: .15rem; }
.sf-row-card { display: flex; align-items: center; gap: .7rem; padding: .45rem; border-radius: 12px; text-decoration: none; color: inherit; transition: background .12s; min-width: 0; }
.sf-row-card:hover { background: var(--sf-surface-2); color: inherit; }
.sf-row-thumb { width: 56px; height: 56px; border-radius: 10px; flex-shrink: 0; background: var(--sf-surface-3); color: var(--sf-faint); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sf-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-row-title { font-weight: 600; font-size: .88rem; color: var(--sf-ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-row-meta { font-size: .75rem; color: var(--sf-faint); }
/* The legacy 6-across "similar" strip becomes a stacked list inside the aside. */
.sf-aside .row > [class*="col-"] { width: 100%; flex: 0 0 100%; max-width: 100%; }
.sf-aside .similar-card { flex-direction: row !important; align-items: center; gap: .7rem; border: 0 !important; box-shadow: none !important; background: transparent !important; padding: .4rem; border-radius: 12px; transform: none !important; }
.sf-aside .similar-card:hover { background: var(--sf-surface-2) !important; }
.sf-aside .similar-card .similar-thumb { width: 56px; height: 56px; flex-shrink: 0; border-radius: 10px; border: 0; aspect-ratio: auto; }
.sf-aside .similar-card .similar-thumb .fa-2x { font-size: 1.1rem; }
.sf-aside .similar-card .similar-thumb img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.sf-aside .similar-card .card-body { padding: 0 !important; min-width: 0; }
.sf-aside .similar-card .similar-title { font-size: .88rem; font-weight: 600; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; color: var(--sf-ink); }
.sf-aside .similar-card .similar-meta { font-size: .74rem; display: block !important; }
.sf-aside hr:first-child { display: none; }
@media (min-width: 1200px) { .sf-aside-sticky { position: sticky; top: calc(var(--sf-nav-h) + 16px); } }

.sf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
@media (max-width: 575.98px) { .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } }
.sf-tile { display: block; text-decoration: none; color: inherit; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); background: var(--sf-surface); overflow: hidden; transition: transform .15s, box-shadow .15s, border-color .15s; }
.sf-tile:hover { transform: translateY(-3px); box-shadow: var(--sf-shadow-md); border-color: var(--sf-line-strong); color: inherit; }
.sf-tile-thumb { aspect-ratio: 1 / 1; background: var(--sf-thumb-bg) center / cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--sf-faint); position: relative; }
.sf-tile-kind { position: absolute; left: .5rem; top: .5rem; background: rgba(29, 27, 32, .58); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .15rem .45rem; border-radius: 6px; }
.sf-tile-body { padding: .6rem .7rem .7rem; }
.sf-tile-title { font-weight: 600; font-size: .88rem; color: var(--sf-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-tile-meta { font-size: .75rem; color: var(--sf-faint); display: flex; gap: .6rem; margin-top: .15rem; }

/* 3.9 Hero (home) -------------------------------------------------------- */
.sf-hero { background: var(--sf-hero); color: var(--sf-hero-ink); border-radius: calc(var(--sf-radius) + 6px); padding: clamp(1.5rem, 4vw, 3rem); position: relative; overflow: hidden; }
.sf-hero::after { content: ""; position: absolute; inset: auto -10% -60% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .35), transparent 65%); pointer-events: none; }
.sf-hero h1 { color: var(--sf-hero-ink); font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.sf-hero p { color: var(--sf-hero-muted); font-size: 1.05rem; max-width: 46ch; }
.sf-drop { border: 2px dashed rgba(var(--sf-accent-rgb), .45); border-radius: var(--sf-radius); background: rgba(255, 255, 255, .45); padding: 1.75rem 1rem; text-align: center; color: var(--sf-hero-ink); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
[data-bs-theme="dark"] .sf-drop { background: rgba(0, 0, 0, .18); }
.sf-hero .btn-light { --bs-btn-bg: var(--sf-accent); --bs-btn-border-color: var(--sf-accent); --bs-btn-color: var(--sf-on-accent); --bs-btn-hover-bg: var(--sf-accent-hover); --bs-btn-hover-border-color: var(--sf-accent-hover); --bs-btn-hover-color: var(--sf-on-accent); }
.sf-hero .btn-outline-light { --bs-btn-color: var(--sf-hero-ink); --bs-btn-border-color: rgba(var(--sf-accent-rgb), .45); --bs-btn-hover-bg: rgba(255, 255, 255, .5); --bs-btn-hover-color: var(--sf-hero-ink); --bs-btn-hover-border-color: rgba(var(--sf-accent-rgb), .6); }
body .dropzone-area { border: 2px dashed var(--sf-line-strong); border-radius: var(--sf-radius); background: var(--sf-surface); }
body .dropzone-area.is-drag { border-color: var(--sf-accent); background: var(--sf-accent-soft); }
body .dropzone-area i.upload { color: var(--sf-accent-text); }

/* 3.10 Profile ----------------------------------------------------------- */
.sf-profile-cover { height: clamp(120px, 22vw, 210px); border-radius: calc(var(--sf-radius) + 4px) calc(var(--sf-radius) + 4px) 0 0; background: var(--sf-hero); position: relative; overflow: hidden; }
.sf-profile-cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 10%, rgba(255, 255, 255, .4), transparent 45%); }
.sf-profile-card { background: var(--sf-surface); border: 1px solid var(--sf-line); border-top: 0; border-radius: 0 0 calc(var(--sf-radius) + 4px) calc(var(--sf-radius) + 4px); padding: 0 1.5rem 1.25rem; box-shadow: var(--sf-shadow-sm); }
.sf-profile-top { display: flex; align-items: flex-end; gap: 1.1rem; flex-wrap: wrap; margin-top: -48px; position: relative; }
.sf-profile-top .sf-avatar { border: 4px solid var(--sf-surface); box-shadow: var(--sf-shadow-md); }
.sf-profile-id { flex: 1 1 220px; min-width: 0; padding-bottom: .25rem; }
.sf-profile-id h1 { font-size: 1.55rem; font-weight: 800; margin: 0; letter-spacing: -.02em; overflow-wrap: anywhere; }
.sf-profile-handle { color: var(--sf-muted); font-size: .92rem; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.sf-profile-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; padding-bottom: .35rem; }
.sf-profile-bio { margin: .9rem 0 0; max-width: 68ch; line-height: 1.55; overflow-wrap: anywhere; }
.sf-profile-stats { display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--sf-line); }
.sf-stat { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.sf-stat .v { font-size: 1.2rem; font-weight: 800; color: var(--sf-ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.sf-stat .l { font-size: .72rem; color: var(--sf-faint); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
a.sf-stat:hover .v { color: var(--sf-accent-text); }
.sf-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--sf-line); margin: 1.25rem 0 1.25rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sf-tabs::-webkit-scrollbar { display: none; }
.sf-tabs button, .sf-tabs a { border: 0; background: transparent; color: var(--sf-muted); font-weight: 600; font-size: .92rem; padding: .7rem .9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.sf-tabs button:hover, .sf-tabs a:hover { color: var(--sf-ink); }
.sf-tabs button.active, .sf-tabs a.active { color: var(--sf-accent-text); border-bottom-color: var(--sf-accent); }
.sf-badge-card { border: 1px solid var(--sf-line); border-radius: 12px; padding: .65rem .75rem; display: flex; align-items: center; gap: .65rem; background: var(--sf-surface); }
.sf-badge-icon { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.sf-top-file { display: flex; gap: .75rem; align-items: center; background: var(--sf-warn-soft); border-radius: 12px; padding: .65rem .85rem; margin-top: 1rem; text-decoration: none; color: inherit; }
.sf-top-file:hover { color: inherit; filter: brightness(.98); }
@media (max-width: 575.98px) { .sf-profile-card { padding: 0 1rem 1rem; } .sf-profile-actions { width: 100%; } .sf-profile-actions > * { flex: 1 1 auto; } .sf-profile-actions .btn { width: 100%; } .sf-profile-stats { gap: .6rem 1.25rem; } }

/* 3.11 Admin ------------------------------------------------------------- */
.sf-attn { display: flex; align-items: center; gap: .8rem; padding: .8rem .9rem; border-radius: 14px; border: 1px solid var(--sf-line); background: var(--sf-surface); text-decoration: none; color: inherit; height: 100%; transition: border-color .12s, box-shadow .12s; }
a.sf-attn:hover { border-color: var(--sf-line-strong); box-shadow: var(--sf-shadow-md); color: inherit; }
.sf-attn-ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--sf-ok-soft); color: var(--sf-ok); }
.sf-attn.is-warn .sf-attn-ico { background: var(--sf-warn-soft); color: var(--sf-warn); }
.sf-attn.is-danger .sf-attn-ico { background: var(--sf-danger-soft); color: var(--sf-danger); }
.sf-attn.is-danger { border-color: transparent; background: var(--sf-danger-soft); }
.sf-attn.is-danger .sf-attn-ico { background: var(--sf-surface); }
.sf-attn-v { font-size: 1.25rem; font-weight: 800; color: var(--sf-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.sf-attn-l { font-size: .78rem; color: var(--sf-muted); }
.sf-meter { height: 8px; border-radius: 999px; background: var(--sf-surface-3); overflow: hidden; }
.sf-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--sf-accent); }
.sf-meter.is-warn > span { background: var(--sf-warn); } .sf-meter.is-danger > span { background: var(--sf-danger); }
.sf-mini-row { display: flex; align-items: center; gap: .65rem; padding: .55rem 0; border-top: 1px solid var(--sf-line); min-width: 0; font-size: .88rem; }
.sf-mini-row:first-child { border-top: 0; padding-top: 0; }
.sf-mini-row .grow { flex: 1; min-width: 0; }
.sf-mini-row .num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--sf-ink); }
.sf-rank { width: 22px; height: 22px; border-radius: 7px; background: var(--sf-surface-3); color: var(--sf-muted); font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── 4. LEGACY RE-TOKENISING ───────────────────────────────────────────────
   Classes still defined in per-view <style> blocks with literal colours.
   `body` prefix lifts specificity above those blocks regardless of order. */
body .audio-card, body .zip-tracklist, body .zip-add-pop, body .markdown-preview, body .badge-card { background: var(--sf-surface); border-color: var(--sf-line); color: var(--sf-text); }
body .audio-card { background: var(--sf-surface-2); border-radius: var(--sf-radius); }
body #zip-player-card .audio-title { color: var(--sf-ink); }
body .zip-track, body .zip-track-upcoming { border-top-color: var(--sf-line); }
body .zip-track:hover { background: var(--sf-surface-2); }
body .zip-track.active { background: var(--sf-accent-soft); color: var(--sf-accent-text); }
body .zip-track.active .titles .a, body .zip-track.active .icon { color: var(--sf-accent-text); }
body .zip-track .titles .a, body .zip-track .num, body .zip-track .size, body .zip-track .icon { color: var(--sf-faint); }
body .zip-track .titles a.t { color: inherit; }
body .zip-track .zip-add { background: var(--sf-surface); border-color: var(--sf-line-strong); color: var(--sf-muted); }
body .zip-track .zip-add.in-list { background: var(--sf-accent); border-color: var(--sf-accent); color: var(--sf-on-accent); }
body .zip-track-upcoming .t { color: var(--sf-muted); }
body .zip-track-upcoming .upcoming-badge { background: var(--sf-surface-3); color: var(--sf-muted); }
body .zip-add-pop .zip-add-row:hover { background: var(--sf-surface-2); }
body .embed-snippet { background: var(--sf-surface-2); border-color: var(--sf-line); color: var(--sf-text); }
body .markdown-preview code { background: var(--sf-surface-2); }
body .similar-thumb { background: var(--sf-surface-3); border-bottom-color: var(--sf-line); color: var(--sf-accent-text); }
body .similar-card .similar-meta { color: var(--sf-faint); }
body .file-thumb, body .list-mini-cover { border-bottom-color: var(--sf-line); }
body .file-tags .tag, body a.tag, body span.tag { background: var(--sf-accent-soft); color: var(--sf-accent-text); padding: .22rem .65rem; font-weight: 600; }
body .file-tags .tag.tag-music, body .tag.tag-music { background: var(--sf-love-soft); color: var(--sf-love); }
body .file-tags .tag.tag-video { background: var(--sf-warn-soft); color: var(--sf-warn); }
body .file-tags .tag.tag-image { background: var(--sf-ok-soft); color: var(--sf-ok); }
body #lyrics.lyrics-compact .lyrics-heading { color: var(--sf-muted); }
body #lyrics.lyrics-compact .lyrics-body, body #additional-info.lyrics-compact .lyrics-body { background: var(--sf-surface-2); border-color: var(--sf-line); }
body #lyrics.lyrics-compact .lyrics-body pre, body #additional-info.lyrics-compact .lyrics-body pre { color: var(--sf-text); }
body .mention-popover a.mention-pick:hover { background: var(--sf-surface-2); }
body .replies-block { border-color: var(--sf-line) !important; }
body .maintenance-banner { background: var(--sf-warn-soft); color: var(--sf-warn); border-bottom-color: var(--sf-line); }
body .maintenance-banner i { color: var(--sf-warn); }
[data-bs-theme="dark"] body .sf-countdown { background: var(--sf-danger-soft); border-color: transparent; color: var(--sf-danger); }
[data-bs-theme="dark"] body .sf-countdown .sf-countdown-timer { color: #fff; }
[data-bs-theme="dark"] body .sf-countdown .sf-countdown-timer span.unit { color: var(--sf-danger); }
[data-bs-theme="dark"] body .sf-countdown .sf-countdown-clear { color: var(--sf-danger); }
[data-bs-theme="dark"] body .age-gate-card { background: var(--sf-surface); }
[data-bs-theme="dark"] body .age-gate-title { color: var(--sf-ink); }
[data-bs-theme="dark"] body .age-gate-body { color: var(--sf-muted); }
[data-bs-theme="dark"] .hljs { background: #0d1117; color: #c9d1d9; }

/* Pages not restructured in this pass (messages, album, series, upload,
   leaderboard, blog, categories, server health…): their light "islands" and
   hard-coded dark text follow the tokens so nothing glows white or vanishes
   in night mode. */
body .chat-window, body .chat-footer, body .msg.theirs, body .album-player, body .sf-upload-card,
body .cat-card, body .cat-chip, body .server-row, body .health-card, body .metric-card,
body .file-card:not(.card) { background: var(--sf-surface); border-color: var(--sf-line); color: var(--sf-text); }
body .chat-body, body .share-box, body .fy-hint, body .season-card .card-header { background: var(--sf-surface-2); border-color: var(--sf-line); color: var(--sf-text); }
body .details-panel dd, body .lb-metric .v, body .home-stats strong { color: var(--sf-ink); }
body .blog-body pre, body .blog-body code { background: var(--sf-surface-2); color: var(--sf-text); }
body .blog-body blockquote { color: var(--sf-muted); border-color: var(--sf-line-strong); }
/* Entity heroes (album / series / artist / performer) paint an inline light
   gradient; swap it for the themed hero wash. */
[style*="linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)"],
[style*="linear-gradient(135deg, #fdf2f8 0%, #f9e4ec 100%)"] { background: var(--sf-hero) !important; border-color: transparent !important; color: var(--sf-hero-ink); border-radius: var(--sf-radius); }
/* Row hover / selected / unread states that were literal pale blues + greys. */
[data-bs-theme="dark"] [style*="background:#dbeafe"],
[data-bs-theme="dark"] [style*="background: #dbeafe"],
[data-bs-theme="dark"] [style*="background:#e0e7ff"],
[data-bs-theme="dark"] [style*="background: #e0e7ff"] { background-color: var(--sf-accent-soft) !important; color: var(--sf-accent-text) !important; }

/* Admin shell (layouts/admin.blade.php) */
body .admin-sidebar, body .admin-topbar, body .stat-card, body .dash-card { background: var(--sf-surface); border-color: var(--sf-line); }
body .stat-card { background: var(--sf-accent-soft); border-color: transparent; box-shadow: none; }
body .stat-card .stat-ico { background: var(--sf-surface); }
body .admin-brand, body .admin-topbar h1, body .stat-card .stat-value { color: var(--sf-ink); }
body .admin-brand, body .admin-user, body .dash-card .dash-head { border-color: var(--sf-line); }
body .admin-nav a { color: var(--sf-muted); }
body .admin-nav a:hover { background: var(--sf-surface-2); color: var(--sf-ink); }
body .admin-nav a.active { background: var(--sf-accent-soft); color: var(--sf-accent-text); }
body .admin-nav a.active .n-ico { color: var(--sf-accent-text); }
body .admin-nav a .n-ico, body .admin-nav .nav-group-label { color: var(--sf-faint); }
body .admin-search input { background: var(--sf-surface-2); color: var(--sf-ink); }
body .admin-search input:focus { background: var(--sf-surface); border-color: var(--sf-accent); }
body .stat-card .stat-label, body .sf-legend { color: var(--sf-muted); }
body .stat-card .stat-ico { background: var(--sf-accent-soft); color: var(--sf-accent-text); }
body .stat-delta.up { color: var(--sf-ok); } body .stat-delta.down { color: var(--sf-danger); } body .stat-delta.flat { color: var(--sf-faint); }
body .admin-table th { color: var(--sf-faint); border-bottom-color: var(--sf-line); }
body .admin-table td { border-bottom-color: var(--sf-line); }
body .admin-brand .brand-badge { background: var(--sf-accent); color: var(--sf-on-accent); }
body .admin-user .au-avatar { background: var(--sf-avatar-bg); color: var(--sf-avatar-ink); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media print {
    .sf-nav, .sf-tabbar, .mini-player, .sf-footer, .ads-top, .ads-bottom { display: none !important; }
    body { background: #fff; padding: 0; }
}