/**
 * nooziq "SOFT-HEAVY" skin
 * Layer that sits on top of app.css, loaded after the Theme CSS variables so it wins.
 *
 * Direction: heavy, extra-wide display type; big soft rounded cards floating on a
 * warm-to-periwinkle gradient; black pill CTAs; pastel blocks (lime, peach, lavender,
 * mustard) with coral/orange pops and the odd playful shape.
 *
 * Fonts: Archivo (expanded, 800-900) for display, Bricolage Grotesque for everything else.
 */

/* ============================================
   Tokens
   ============================================ */
:root:root {
    /* Palette */
    --sk-ink: #111216;
    --sk-ink-soft: #2a2b31;
    --sk-cream: #f4efe6;
    --sk-periwinkle: #c7d2ff;
    --sk-card: #ffffff;
    --sk-fill: #f2efe9;          /* input / chip fill */
    --sk-lime: #c8f25a;
    --sk-coral: #ff5a4e;
    --sk-orange: #ff5b1f;
    --sk-mustard: #f6cd45;
    --sk-peach: #f6e4d4;
    --sk-lavender: #dedbff;
    --sk-mint: #d5f3e2;
    --sk-sky: #d8e6ff;
    --sk-blue: #1f5cff;
    --sk-purple: #8b5cf6;
    --sk-green: #18b26b;

    /* Structure */
    --sk-r-xl: 32px;
    --sk-r: 26px;
    --sk-r-md: 18px;
    --sk-r-sm: 14px;

    /* One spacing value between every pane, card, tile and grid cell */
    --sk-gap: 24px;
    --section-gap: var(--sk-gap);   /* app.css token, used by inline page styles */
    /* Height shared by every header nav control */
    --sk-nav-h: 44px;
    --sk-shadow: 0 1px 0 rgba(17, 18, 22, .03), 0 18px 40px -18px rgba(40, 44, 90, .28);
    --sk-shadow-sm: 0 1px 0 rgba(17, 18, 22, .03), 0 8px 20px -10px rgba(40, 44, 90, .25);
    --sk-shadow-lg: 0 30px 70px -24px rgba(40, 44, 90, .45);
    --sk-hair: rgba(17, 18, 22, .08);

    --sk-display: 'Archivo', 'Bricolage Grotesque', system-ui, sans-serif;
    --sk-body: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;

    /* Re-point app.css tokens so inline page styles follow along */
    --primary: var(--sk-blue);
    --primary-hover: #1546d6;
    --primary-dark: #1546d6;
    --primary-light: #e3ebff;
    --primary-contrast: #ffffff;
    --primary-rgb: 31, 92, 255;
    --success: var(--sk-green);
    --success-light: var(--sk-mint);
    --danger: var(--sk-coral);
    --danger-light: #ffe2df;
    --warning: #e0a800;
    --warning-light: #fdf1c7;

    --background: var(--sk-cream);
    --bg: var(--sk-cream);
    --bg-primary: var(--sk-card);
    --bg-secondary: var(--sk-fill);
    --bg-tertiary: #f8f6f2;
    --surface: var(--sk-card);
    --surface-hover: #f8f6f2;
    --card-bg: var(--sk-card);
    --modal-bg: var(--sk-card);
    --dropdown-bg: var(--sk-card);
    --input-bg: var(--sk-fill);
    --border: var(--sk-hair);
    --border-color: var(--sk-hair);
    --text: var(--sk-ink);
    --text-secondary: #4a4b53;
    --text-muted: #8a8b93;
    --gray-50: #f8f6f2;
    --gray-100: var(--sk-fill);
    --gray-200: #e6e2da;

    --font: var(--sk-body);
    --font-family: var(--sk-body);
    --font-family-headings: var(--sk-display);

    --radius-lg: var(--sk-r);
    --radius-md: var(--sk-r-md);
    --radius-sm: var(--sk-r-sm);
    --form-radius: var(--sk-r-sm);
    --input-height: 54px;
    --input-height-sm: 44px;
    --input-height-lg: 62px;

    --shadow-sm: var(--sk-shadow-sm);
    --shadow: var(--sk-shadow-sm);
    --shadow-md: var(--sk-shadow);
    --shadow-lg: var(--sk-shadow-lg);
}

:root:root[data-theme="dark"] {
    /* Neutral near-black: no blue cast, so lime/coral/mustard accents don't clash */
    --sk-cream: #0b0b0c;
    --sk-periwinkle: #141415;
    --sk-card: #171718;
    --sk-fill: #222224;
    --sk-peach: #2a2622;
    --sk-lavender: #252328;
    --sk-mint: #19271f;
    --sk-sky: #1e2124;
    --sk-hair: rgba(255, 255, 255, .08);
    --sk-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7);
    --sk-shadow-sm: 0 8px 20px -10px rgba(0, 0, 0, .6);
    --sk-shadow-lg: 0 30px 70px -24px rgba(0, 0, 0, .8);

    /* Lime replaces the periwinkle blue as the dark-mode accent */
    --primary: var(--sk-lime);
    --primary-hover: #d8ff70;
    --primary-dark: #b6e43f;
    --primary-light: rgba(200, 242, 90, .14);
    --primary-contrast: var(--sk-ink);
    --primary-rgb: 200, 242, 90;
    --success-light: var(--sk-mint);
    --danger-light: rgba(255, 90, 78, .16);
    --warning-light: rgba(246, 205, 69, .14);

    --background: var(--sk-cream);
    --bg: var(--sk-cream);
    --bg-primary: var(--sk-card);
    --bg-secondary: var(--sk-fill);
    --bg-tertiary: #1c1c1e;
    --surface: var(--sk-card);
    --surface-hover: #1f1f21;
    --card-bg: var(--sk-card);
    --modal-bg: var(--sk-card);
    --dropdown-bg: var(--sk-card);
    --input-bg: var(--sk-fill);
    --border: var(--sk-hair);
    --border-color: var(--sk-hair);
    --text: #f3f1ec;
    --text-secondary: #b6b3ad;
    --text-muted: #7e7b76;
    --white: var(--sk-card);
    --gray-50: #1c1c1e;
    --gray-100: var(--sk-fill);
    --gray-200: #2e2e31;
}

/* ============================================
   Base + type
   ============================================ */
html body {
    font-family: var(--sk-body);
    font-weight: 450;
    font-optical-sizing: auto;
    color: var(--text);
    background: linear-gradient(180deg, var(--sk-cream) 0%, var(--sk-cream) 18%, var(--sk-periwinkle) 100%) fixed;
    letter-spacing: -0.005em;
}

h1, h2,
.page-title,
.stat-value, .stat-card-value {
    font-family: var(--sk-display);
    font-stretch: 125%;
    font-variation-settings: "wdth" 125;
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.0;
    color: var(--text);
}
h3, h4,
.section-title, .card-title, .modal-title, .empty-state-title {
    font-family: var(--sk-body);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--text);
}
h1 { font-size: clamp(34px, 5.4vw, 60px); }
h2 { font-size: clamp(24px, 3.2vw, 34px); }
h3 { font-size: 21px; }
h5, h6 { font-family: var(--sk-body); font-weight: 700; }

a { font-weight: 600; }
a:not([class]):hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

::selection { background: var(--sk-lime); color: var(--sk-ink); }
hr { border-top: 1px solid var(--sk-hair); }

:focus-visible {
    outline: 3px solid var(--sk-blue);
    outline-offset: 3px;
}

.text-muted { color: var(--text-muted) !important; }

/* ============================================
   Page header
   ============================================ */
.page-content { padding-top: 44px; padding-bottom: 72px; }

.page-header,
.dashboard-greeting { margin-bottom: var(--sk-gap) !important; }
.page-title {
    font-size: clamp(36px, 6vw, 66px);
    margin: 0 0 12px;
}
/* playful four-point sparkle after big titles */
.page-title::after {
    content: "";
    display: inline-block;
    width: .5em;
    height: .5em;
    margin-left: .18em;
    vertical-align: .55em;
    background: var(--sk-orange);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 6.6 5.4 11.3 12 12-6.6.7-11.3 5.4-12 12-.7-6.6-5.4-11.3-12-12C6.6 11.3 11.3 6.6 12 0z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 6.6 5.4 11.3 12 12-6.6.7-11.3 5.4-12 12-.7-6.6-5.4-11.3-12-12C6.6 11.3 11.3 6.6 12 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.page-subtitle {
    font-size: 18px;
    font-weight: 450;
    color: var(--text-secondary);
    max-width: 60ch;
}

/* ============================================
   Header: floating rounded bar
   ============================================ */
.header {
    background: transparent;
    border: 0;
    padding: 12px 16px 0;
}
.header-inner {
    height: 72px;
    gap: 12px;
    background: var(--sk-card);
    border-radius: 24px;
    box-shadow: var(--sk-shadow-sm);
    padding: 0 12px 0 22px;
    max-width: calc(1120px - 32px);
}
@supports (backdrop-filter: blur(1px)) {
    .header-inner {
        background: color-mix(in srgb, var(--sk-card) 86%, transparent);
        backdrop-filter: saturate(1.4) blur(14px);
    }
}
.logo span {
    font-family: var(--sk-display);
    font-stretch: 125%;
    font-variation-settings: "wdth" 125;
    font-weight: 900;
    font-size: 24px;
    letter-spacing: -0.04em;
}
.logo-image { height: 34px; }

.nav { gap: 4px; }
/* Every nav control (links, dropdown toggles, icon buttons, auth button) shares one height */
.nav-link,
.nav-dropdown .nav-dropdown-toggle {
    font-family: var(--sk-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    height: var(--sk-nav-h);
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    transition: background .15s, color .15s;
}
.nav-link:hover,
.nav-dropdown .nav-dropdown-toggle:hover {
    background: var(--sk-fill);
    color: var(--text);
}
/* Active = black pill */
.nav-link.active:not(.nav-icon-link),
.nav-dropdown.active > .nav-dropdown-toggle {
    background: var(--sk-ink);
    color: #fff;
}
[data-theme="dark"] .nav-link.active:not(.nav-icon-link),
[data-theme="dark"] .nav-dropdown.active > .nav-dropdown-toggle { background: #f3f1ec; color: var(--sk-ink); }

/* Round white icon buttons */
.nav-link.nav-icon-link,
.nav-icon-link {
    width: var(--sk-nav-h);
    height: var(--sk-nav-h);
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    background: var(--sk-fill);
    color: var(--text);
    font-size: 16px;
}
.nav-icon-link:hover { background: var(--sk-lime); color: var(--sk-ink); }

/* Guest "Sign In / Register" pill: same height as the nav pills */
.header .auth-buttons .btn {
    height: var(--sk-nav-h);
    min-height: 0;
    padding: 0 20px;
    font-size: 15px;
    font-weight: 600;
}
.nav-icon-link.active { background: var(--sk-ink); color: #fff; }
.nav-icon-badge {
    background: var(--sk-coral);
    color: #fff;
    box-shadow: 0 0 0 2px var(--sk-card);
    font-weight: 700;
    font-size: 11px;
}

.credit-badge {
    background: var(--sk-lime);
    color: var(--sk-ink);
    font-weight: 700;
    border: 0;
    border-radius: 999px;
}

.profile-avatar,
.profile-avatar-placeholder {
    box-shadow: 0 0 0 3px var(--sk-card), 0 0 0 5px var(--sk-lime);
}
.profile-avatar-placeholder {
    background: var(--sk-lavender);
    color: var(--text);
    font-weight: 800;
}

/* Dropdowns / menus */
.nav-dropdown-menu,
.admin-menu,
.profile-menu,
.notifications-menu,
.search-dropdown,
.autocomplete-dropdown,
.dropdown-menu {
    background: var(--sk-card);
    border: 1px solid var(--sk-hair) !important;
    border-radius: 22px;
    box-shadow: var(--sk-shadow-lg) !important;
    padding: 8px;
}
.nav-dropdown-item,
.admin-menu-item,
.profile-menu-item,
.search-item,
.autocomplete-item {
    border-radius: 14px;
    font-weight: 550;
    color: var(--text);
}
.nav-dropdown-item:hover,
.admin-menu-item:hover,
.profile-menu-item:hover,
.search-item:hover,
.autocomplete-item:hover { background: var(--sk-fill); color: var(--text); }
.nav-dropdown-item.active { background: var(--sk-lime); color: var(--sk-ink); }
.admin-menu-header,
.search-category-header,
.profile-menu-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.profile-menu-header,
.notifications-header { border-bottom: 1px solid var(--sk-hair); }

.mobile-menu-toggle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--sk-fill);
    border: 0;
}
.hamburger-line { background: var(--text) !important; height: 2.5px; border-radius: 2px; }

/* ============================================
   Buttons: pills
   ============================================ */
.btn,
button.btn,
a.btn {
    font-family: var(--sk-body);
    font-weight: 650;
    font-size: 15px;
    min-height: 50px;
    padding: 0 24px;
    border: 0 !important;
    border-radius: 999px;
    box-shadow: none;
    gap: 8px;
    transition: transform .15s ease, background .15s, box-shadow .15s, color .15s;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); text-decoration: none; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.btn:disabled { opacity: .4; }

.btn-primary { background: var(--sk-ink); color: #fff !important; }
.btn-primary:hover:not(:disabled) { background: var(--sk-lime); color: var(--sk-ink) !important; }
.btn.btn-secondary {
    background: transparent;
    color: var(--text) !important;
    box-shadow: inset 0 0 0 2px var(--text);
}
.btn.btn-secondary:hover:not(:disabled) { background: var(--text); color: var(--sk-card) !important; }
.btn-success { background: var(--sk-lime); color: var(--sk-ink) !important; }
.btn-success:hover:not(:disabled) { background: #b6e43f; }
.btn-danger { background: var(--sk-coral); color: #fff !important; }
.btn-danger:hover:not(:disabled) { background: #f0453a; }
.btn-warning { background: var(--sk-mustard); color: var(--sk-ink) !important; }
.btn-ghost,
.btn-link {
    background: transparent;
    color: var(--text) !important;
}
.btn-ghost:hover:not(:disabled),
.btn-link:hover:not(:disabled) { background: var(--sk-fill); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn-lg { min-height: 62px; padding: 0 34px; font-size: 17px; }
.btn-icon { padding: 0; width: 50px; border-radius: 50%; }
.btn-icon.btn-sm { width: 40px; }

[data-theme="dark"] .btn-primary { background: #f3f1ec; color: var(--sk-ink) !important; }
[data-theme="dark"] .btn-primary:hover:not(:disabled) { background: var(--sk-lime); }

/* Small round icon buttons used in tables/lists */
.icon-btn,
.action-btn {
    border: 0 !important;
    border-radius: 50%;
    background: var(--sk-fill);
    color: var(--text);
    transition: background .15s, color .15s;
}
.icon-btn:hover,
.action-btn:hover { background: var(--sk-lime); color: var(--sk-ink); }

/* ============================================
   Cards + sections
   ============================================ */
.section,
.card,
.stat-card {
    background: var(--sk-card);
    border: 0 !important;
    border-radius: var(--sk-r);
    box-shadow: var(--sk-shadow);
}
/* ============================================
   Spacing: one gap (--sk-gap) between every pane, card, tile and grid cell
   ============================================ */
.section,
.card { margin-bottom: var(--sk-gap); }

.grid,
.stats-grid,
.stats-grid-3 {
    gap: var(--sk-gap) !important;
    margin-bottom: var(--sk-gap);
}
/* Grids of card tiles (rows inside lists like .user-list stay tight on purpose) */
.song-grid, .home-newest-grid, .home-contests-grid, .collections-grid,
.playlists-grid, .posts-grid, .bands-grid, .tracks-grid, .recommendations-grid,
.members-grid, .managers-grid, .merch-grid, .releases-grid, .photos-grid,
.videos-grid, .search-grid, .profile-stats-grid, .shootouts-list, .stats-row {
    gap: var(--sk-gap) !important;
}
/* Tiles inside a grid are spaced by the grid gap, not their own margins */
.grid > .section, .grid > .card,
.grid > * > .section:only-child, .grid > * > .card:only-child,
.stats-grid > *, .stats-grid-3 > * { margin-bottom: 0; }

/* ~40 templates set their own inline margins on panes (12/16/32px, margin-top
   spacers). Inline styles only lose to !important, so the rule is enforced here. */
.page-content :is(.section, .card, .toolbar, .tabs, .filter-row, .stats-grid, .stats-grid-3, .stats-row, .grid) {
    margin-top: 0 !important;
    margin-bottom: var(--sk-gap) !important;
}
.page-content :is(.grid, .stats-grid, .stats-grid-3) > :is(.section, .card, .stat-card),
.page-content :is(.section-header, .card-header, .modal) :is(.tabs, .toolbar),
.page-content :is(.section, .card, .toolbar, .tabs, .filter-row, .stats-grid, .stats-grid-3, .grid):last-child {
    margin-bottom: 0 !important;
}

/* Nothing adds extra space after the last block on a page */
.page-content > :last-child,
.section:last-child, .card:last-child { margin-bottom: 0; }

.section-header,
.card-header {
    border-bottom: 0;
    padding: 24px 28px 8px;
    min-height: 0;
}
.section-title,
.card-title { font-size: 21px; }
.section-body,
.card-body { padding: 20px 28px 28px; }
.section-footer,
.card-footer {
    border-top: 1px solid var(--sk-hair);
    background: transparent;
    padding: 18px 28px;
}

a.card,
.card.clickable,
.card[onclick] { transition: transform .2s ease, box-shadow .2s ease; }
a.card:hover,
.card.clickable:hover,
.card[onclick]:hover {
    transform: translateY(-4px);
    box-shadow: var(--sk-shadow-lg);
}

/* Stat cards: pastel blocks, huge wide numbers */
.stat-card { padding: 24px 26px; border-radius: var(--sk-r); }
.stat-value,
.stat-card-value,
.stat-card .stat-value,
.stat-card .stat-card-value { font-size: clamp(32px, 4.2vw, 46px); }
.stat-label,
.stat-card-label {
    font-size: 14px;
    font-weight: 550;
    color: var(--text-secondary);
}
.stat-card:nth-child(4n+1) { background: var(--sk-lime); }
.stat-card:nth-child(4n+2) { background: var(--sk-peach); }
.stat-card:nth-child(4n+3) { background: var(--sk-lavender); }
.stat-card:nth-child(4n+4) { background: var(--sk-mustard); }
.stat-card:nth-child(4n+1) *,
.stat-card:nth-child(4n+4) * { color: var(--sk-ink) !important; }
[data-theme="dark"] .stat-card:nth-child(4n+2) *,
[data-theme="dark"] .stat-card:nth-child(4n+3) * { color: #f3f1ec; }

/* ============================================
   Forms: soft filled fields
   ============================================ */
.form-group > label,
.form-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.form-hint,
.form-text { font-weight: 450; color: var(--text-muted); }

html .form-input,
html .form-select,
html .form-textarea,
html .form-control,
html input[type="text"],
html input[type="email"],
html input[type="password"],
html input[type="number"],
html input[type="url"],
html input[type="tel"],
html input[type="search"],
html input[type="date"],
html input[type="time"],
html input[type="datetime-local"],
html select,
html textarea {
    background-color: var(--input-bg);
    border: 2px solid transparent;
    border-radius: var(--sk-r-sm);
    font-weight: 500;
    font-size: 16px;
    color: var(--text);
    padding-left: 18px;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
html textarea { padding-top: 14px; }
html .form-input:hover,
html input:hover,
html select:hover,
html textarea:hover { background-color: color-mix(in srgb, var(--input-bg) 85%, var(--text) 5%); }
html .form-input:focus,
html .form-select:focus,
html .form-textarea:focus,
html .form-control:focus,
html input:focus,
html select:focus,
html textarea:focus {
    outline: none;
    background-color: var(--sk-card);
    border-color: var(--text);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--sk-lime) 55%, transparent);
}
::placeholder { color: var(--text-muted); opacity: 1; }

html select,
html .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23111216' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 46px;
}
[data-theme="dark"] select,
[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f3f1ec' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
}

input[type="checkbox"],
input[type="radio"] { accent-color: var(--sk-ink); width: 20px; height: 20px; }
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] { accent-color: var(--sk-lime); }

/* Toggle switches */
.switch-slider,
.toggle-slider { background: var(--gray-200); border: 0; }
.switch input:checked + .switch-slider,
.toggle-switch input:checked + .toggle-slider { background: var(--sk-ink); }
[data-theme="dark"] .switch input:checked + .switch-slider,
[data-theme="dark"] .toggle-switch input:checked + .toggle-slider { background: var(--sk-lime); }

/* ============================================
   Tabs, filter rows, toolbars: segmented pills
   ============================================ */
/* Every bar is a full pill (circular ends), and so is everything inside it */
.tabs,
.toolbar,
.filter-row,
.action-toolbar,
.tabs-responsive .tabs {
    background: var(--sk-card);
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: var(--sk-shadow-sm);
    padding: 6px;
    gap: 4px;
    margin-bottom: var(--sk-gap);
}
.tabs input, .tabs select, .tabs .btn,
.toolbar input, .toolbar select, .toolbar .btn,
.filter-row input, .filter-row select, .filter-row .btn {
    border-radius: 999px !important;
}
.toolbar input, .toolbar select,
.filter-row input, .filter-row select { margin-top: 0; margin-bottom: 0; }
/* song.php's own .action-toolbar rule (grey fill) loads after the skin */
.action-toolbar { background: var(--sk-card) !important; padding: 6px !important; }

/* app.css paints primary buttons inside bars with --primary (blue); keep them the black pill */
.toolbar .btn-primary,
.filter-row .btn-primary { background: var(--sk-ink); color: #fff !important; }
.toolbar .btn-primary:hover:not(:disabled),
.filter-row .btn-primary:hover:not(:disabled) { background: var(--sk-lime); color: var(--sk-ink) !important; }
[data-theme="dark"] .toolbar .btn-primary,
[data-theme="dark"] .filter-row .btn-primary { background: #f3f1ec; color: var(--sk-ink) !important; }
.section-header .tabs,
.card-header .tabs { box-shadow: none; background: var(--sk-fill); margin-bottom: 0; }

.tab,
.tabs button:not(.btn),
.filter-row button:not(.btn):not(.btn-icon) {
    font-weight: 600;
    border-radius: 999px;
    border: 0;
    color: var(--text-secondary);
}
.tab:hover,
.tabs button:not(.btn):hover,
.filter-row button:not(.btn):not(.btn-icon):hover { background: var(--sk-fill); color: var(--text); }
.tab.active,
.tabs button.active,
.filter-row button.active {
    background: var(--sk-ink) !important;
    color: #fff !important;
}
[data-theme="dark"] .tab.active,
[data-theme="dark"] .tabs button.active,
[data-theme="dark"] .filter-row button.active { background: #f3f1ec !important; color: var(--sk-ink) !important; }

/* ============================================
   Badges, alerts
   ============================================ */
.badge {
    font-family: var(--sk-body);
    font-weight: 650;
    font-size: 12.5px;
    letter-spacing: 0;
    text-transform: none;
    padding: 5px 12px;
    border: 0;
    border-radius: 999px;
    background: var(--sk-fill);
    color: var(--text);
}
.badge-primary { background: var(--sk-ink); color: #fff; }
.badge-success { background: var(--sk-mint); color: #0d6b3f; }
.badge-danger { background: var(--sk-coral); color: #fff; }
.badge-warning { background: var(--sk-mustard); color: var(--sk-ink); }
.badge-info { background: var(--sk-sky); color: #1546d6; }
.badge-secondary { background: var(--sk-fill); color: var(--text-secondary); }
[data-theme="dark"] .badge-primary { background: #f3f1ec; color: var(--sk-ink); }
[data-theme="dark"] .badge-success { color: #7ee2ad; }
[data-theme="dark"] .badge-info { color: #c9d6e3; }

.alert {
    border: 0 !important;
    border-radius: var(--sk-r-md);
    font-weight: 550;
    color: var(--sk-ink);
}
.alert-success { background: var(--sk-mint); }
.alert-danger,
.alert-error { background: #ffe0dc; }
.alert-warning { background: #fdefb8; }
.alert-info { background: var(--sk-sky); }
.alert-success, .alert-danger, .alert-error, .alert-warning, .alert-info { color: var(--sk-ink) !important; }
[data-theme="dark"] .alert-success, [data-theme="dark"] .alert-danger, [data-theme="dark"] .alert-error,
[data-theme="dark"] .alert-warning, [data-theme="dark"] .alert-info { color: #f3f1ec !important; }
[data-theme="dark"] .alert-danger, [data-theme="dark"] .alert-error { background: rgba(255, 90, 78, .18); }
[data-theme="dark"] .alert-warning { background: rgba(246, 205, 69, .16); }

.text-danger { color: var(--sk-coral) !important; }

/* ============================================
   Tables
   ============================================ */
.table-wrapper {
    border: 0;
    border-radius: var(--sk-r);
    box-shadow: var(--sk-shadow);
    background: var(--sk-card);
    overflow: hidden;
}
.table th {
    font-family: var(--sk-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border-bottom: 1px solid var(--sk-hair) !important;
}
.table td { border-bottom: 1px solid var(--sk-hair) !important; }
.table tbody tr:hover { background: var(--surface-hover); }

/* ============================================
   Modals
   ============================================ */
.modal-overlay[style*="display: flex"],
.modal-overlay[style*="display:flex"],
.modal-overlay.active,
div.modal > .modal-backdrop {
    background: rgba(17, 18, 22, .45);
    backdrop-filter: blur(6px);
}
.modal-overlay .modal,
.modal-content,
div.modal > .modal-content {
    background: var(--sk-card);
    border: 0;
    border-radius: var(--sk-r-xl);
    box-shadow: var(--sk-shadow-lg);
}
.modal-header { border-bottom: 0; padding-top: 26px; }
.modal-footer { border-top: 1px solid var(--sk-hair); background: transparent; }
.modal-title { font-size: 22px; }
.modal-close {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--sk-fill);
    color: var(--text);
}
.modal-close:hover { background: var(--sk-ink); color: #fff; }

/* ============================================
   Empty states + loading
   ============================================ */
.empty-state {
    background: var(--sk-card);
    border-radius: var(--sk-r);
    box-shadow: var(--sk-shadow-sm);
    padding: 52px 24px;
    position: relative;
    overflow: hidden;
}
/* orange quarter-circle + mustard dot, Design.io style */
.empty-state::before,
.empty-state::after {
    content: "";
    position: absolute;
    pointer-events: none;
}
.empty-state::before {
    width: 120px; height: 120px;
    right: -40px; bottom: -40px;
    border-radius: 50%;
    background: var(--sk-lavender);
}
.empty-state::after {
    width: 22px; height: 22px;
    left: 28px; top: 26px;
    border-radius: 50%;
    background: var(--sk-mustard);
}
.empty-state > * { position: relative; z-index: 1; }
/* Only an empty state sitting directly on the page is its own card with shapes;
   inside any panel (cards, modals, the messages sidebar...) it's just content */
.empty-state:not(.page-content > .empty-state, .empty-state-standalone) {
    background: transparent;
    box-shadow: none;
    padding: 32px 16px;
}
.empty-state:not(.page-content > .empty-state, .empty-state-standalone)::before,
.empty-state:not(.page-content > .empty-state, .empty-state-standalone)::after { display: none; }
.empty-state-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    font-size: 32px;
    color: var(--sk-ink) !important;
    background: var(--sk-mustard);
    border-radius: 50% 50% 50% 12px;
}
.empty-state-title { font-size: 22px; }
.empty-state-message { color: var(--text-secondary); }

.spinner {
    border-width: 4px !important;
    border-color: var(--gray-200) !important;
    border-top-color: var(--sk-ink) !important;
}
[data-theme="dark"] .spinner { border-top-color: var(--sk-lime) !important; }

/* ============================================
   Footer: dark rounded block
   ============================================ */
.footer {
    margin: 56px 16px 16px;
    background: var(--sk-ink);
    color: #f3f1ec;
    border: 0;
    border-radius: var(--sk-r-xl);
}
.footer a { color: #f3f1ec; font-weight: 550; }
.footer a:hover { color: var(--sk-lime); }
.footer .text-muted { color: #8f8e98 !important; }
.social-links a {
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}
.social-links a:hover { background: var(--sk-lime); color: var(--sk-ink); }
[data-theme="dark"] .footer { background: #000; box-shadow: inset 0 0 0 1px var(--sk-hair); }

/* ============================================
   Home hero + CTA: floating rounded panels
   ============================================ */
.hero-fullwidth {
    max-width: calc(1120px - 32px);
    width: calc(100% - 32px);
    margin: 20px auto 0;
    border-radius: var(--sk-r-xl);
    overflow: hidden;
    box-shadow: var(--sk-shadow-lg);
    position: relative;
}
.hero-fullwidth > .container { padding: 0 48px; }
.hero-fullwidth + .container.page-content { padding-top: var(--sk-gap); }
.hero-title {
    font-family: var(--sk-display);
    font-stretch: 125%;
    font-variation-settings: "wdth" 125;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: .98;
}
/* Buttons sitting on a dark/image hero or the gradient CTA */
.hero-with-bg .btn-primary,
.cta-section .btn-primary { background: var(--sk-lime); color: var(--sk-ink) !important; }
.hero-with-bg .btn-primary:hover:not(:disabled),
.cta-section .btn-primary:hover:not(:disabled) { background: #fff; }
.hero-with-bg .btn-secondary,
.cta-section .btn-secondary {
    background: rgba(255, 255, 255, .12);
    color: #fff !important;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85);
    backdrop-filter: blur(6px);
}
.hero-with-bg .btn-secondary:hover:not(:disabled),
.cta-section .btn-secondary:hover:not(:disabled) { background: #fff; color: var(--sk-ink) !important; }

.cta-section {
    border-radius: var(--sk-r-xl) !important;
    overflow: hidden;
    position: relative;
    background-image: none !important;
    background-color: var(--sk-ink) !important;
}
/* Design.io-style shapes in the CTA corners */
.cta-section::before,
.cta-section::after {
    content: "";
    position: absolute;
    pointer-events: none;
}
.cta-section::before {
    width: 220px; height: 220px;
    right: -70px; top: -70px;
    border-radius: 0 0 0 100%;
    background: var(--sk-orange);
}
.cta-section::after {
    width: 140px; height: 140px;
    left: -40px; bottom: -60px;
    border-radius: 50%;
    background: var(--sk-mustard);
}
.cta-section > * { position: relative; z-index: 1; }
.cta-section h2, .cta-section h3 { color: #fff; }

/* ============================================
   Cookie notice: floating pill card
   ============================================ */
.cookie-notice {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    max-width: 760px;
    margin: 0 auto;
    background: var(--sk-ink) !important;
    color: #f3f1ec !important;
    border: 0 !important;
    border-radius: 24px !important;
    box-shadow: var(--sk-shadow-lg) !important;
}
.cookie-notice a { color: var(--sk-lime); }
.cookie-notice .btn-primary { background: var(--sk-lime); color: var(--sk-ink) !important; }
.cookie-notice .btn-secondary { color: #fff !important; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); }

/* ============================================
   Mobile
   ============================================ */
@media (max-width: 768px) {
    :root:root { --sk-gap: 16px; }

    /* Tab-only bars stay one-row pills and scroll sideways instead of wrapping */
    .tabs:not(:has(input, select)),
    .toolbar:not(:has(input, select)),
    .filter-row:not(:has(input, select)) {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 6px;
    }
    .tabs:not(:has(input, select))::-webkit-scrollbar,
    .toolbar:not(:has(input, select))::-webkit-scrollbar,
    .filter-row:not(:has(input, select))::-webkit-scrollbar { display: none; }
    .tabs:not(:has(input, select)) > *,
    .toolbar:not(:has(input, select)) > *,
    .filter-row:not(:has(input, select)) > * { flex: 0 0 auto !important; white-space: nowrap; }

    /* Bars with search boxes/selects wrap on phones: drop the outer bar so each
       control is its own pill rather than one tall rounded rectangle */
    .tabs:has(input, select),
    .toolbar:has(input, select),
    .filter-row:has(input, select) {
        background: transparent;
        box-shadow: none;
        padding: 0;
        gap: 8px;
    }
    /* Plain wrappers (e.g. a "Following only" checkbox label) become their own pill */
    .toolbar:has(input, select) > *:not(input, select, .btn, button, :has(input[type="text"], input[type="search"], select)),
    .filter-row:has(input, select) > *:not(input, select, .btn, button, :has(input[type="text"], input[type="search"], select)) {
        background: var(--sk-card);
        border-radius: 999px;
        box-shadow: var(--sk-shadow-sm);
        padding: 4px;
    }
    /* Search boxes get a full row instead of being squeezed by buttons/selects */
    :is(.toolbar, .filter-row, .tabs) > :is(input[type="text"], input[type="search"]),
    :is(.toolbar, .filter-row, .tabs) > :has(input[type="text"], input[type="search"]) {
        flex: 1 1 100% !important;
        max-width: none !important;
    }
    :is(.toolbar, .filter-row, .tabs) > :has(input[type="text"], input[type="search"]) {
        background: transparent;
        box-shadow: none;
        padding: 0;
    }
    :is(.toolbar, .filter-row, .tabs) > :has(input[type="text"], input[type="search"]) input { width: 100%; }
    :is(.toolbar, .filter-row):has(input, select) > * { max-width: 100%; min-width: 0; flex-wrap: wrap; }

    /* Song page action bar holds a Share dropdown, so it wraps into separate
       pills instead of scrolling (a scrolling bar would clip the dropdown) */
    .action-toolbar {
        flex-wrap: wrap;
        background: transparent !important;
        box-shadow: none;
        padding: 0 !important;
        gap: 8px;
    }

    /* Page-header button rows (e.g. Mark all read / Delete) wrap rather than overflow */
    .page-header .flex,
    .page-header > div,
    .notifications-actions,
    .notifications-actions > * { flex-wrap: wrap; gap: 8px; }
    .toolbar:has(input, select) input, .toolbar:has(input, select) select,
    .filter-row:has(input, select) input, .filter-row:has(input, select) select { background-color: var(--sk-card); box-shadow: var(--sk-shadow-sm); }

    .header { padding: 8px 8px 0; }
    .header-inner { height: 64px; border-radius: 20px; padding: 0 8px 0 16px; }
    .page-content { padding-top: 28px; padding-bottom: 48px; }
    /* app.css runs content edge-to-edge on phones; floating cards need a gutter */
    .container.page-content,
    .page-content > .container { padding-left: 14px; padding-right: 14px; }
    .section-header, .card-header { padding: 20px 20px 4px; }
    .section-body, .card-body { padding: 16px 20px 22px; }
    .section-footer, .card-footer { padding: 14px 20px; }
    .footer { margin: 40px 8px 8px; border-radius: 24px; }
    /* backdrop-filter would make the fixed mobile menu size itself to the header bar */
    .header-inner { backdrop-filter: none; background: var(--sk-card); }
    .nav { background: var(--sk-card); border-radius: 20px; }
    .nav.mobile-open {
        top: 80px;
        left: 8px;
        right: 8px;
        bottom: auto;
        max-height: calc(100dvh - 96px);
        padding: 12px;
        border-radius: 24px;
        box-shadow: var(--sk-shadow-lg);
    }
    .nav.mobile-open .nav-link { font-size: 17px; padding: 14px 18px; }
    .nav.mobile-open .nav-dropdown-menu {
        box-shadow: none !important;
        border: 0 !important;
        background: transparent;
        padding: 0 0 0 8px;
    }
    .nav.mobile-open .mobile-highlight {
        background: var(--sk-ink);
        color: #fff;
        justify-content: center;
        text-align: center;
        margin-top: 8px;
    }
    [data-theme="dark"] .nav.mobile-open .mobile-highlight { background: #f3f1ec; color: var(--sk-ink); }
    .hero-fullwidth { width: calc(100% - 16px); margin: 12px auto 0; border-radius: 24px; }
    .hero-fullwidth > .container { padding: 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .btn, .nav-link, .card, .icon-btn, input, select, textarea { transition: none !important; }
}