/* ============================================================
   InterSpace Artist Dashboard — CSS v2
   Dark UI · Glassmorphism · Red Accent
   Brand: #DE0A26
   ============================================================ */

/* ── Custom Properties ─────────────────────────────────────── */
:root {
    --bg:               #080809;
    --bg-2:             #0E0E11;
    --bg-3:             #141418;
    --surface:          #18181D;
    --surface-2:        #1E1E25;
    --surface-3:        #25252F;
    --accent:           #DE0A26;
    --accent-dim:       rgba(222,10,38,0.12);
    --accent-hover:     #FF0A2A;
    --accent-glow:      rgba(222,10,38,0.3);
    --teal:             #00CBA4;
    --teal-dim:         rgba(0,203,164,0.12);
    --text:             #F2F2F5;
    --text-2:           #A8A8B3;
    --text-3:           #606070;
    --border:           rgba(255,255,255,0.07);
    --border-2:         rgba(255,255,255,0.12);
    --danger:           #FF3B3B;
    --danger-dim:       rgba(255,59,59,0.12);
    --warning:          #F59E0B;
    --warning-dim:      rgba(245,158,11,0.12);
    --success:          #10B981;
    --success-dim:      rgba(16,185,129,0.12);
    --info:             #6366F1;
    --info-dim:         rgba(99,102,241,0.12);
    --sidebar-w:        248px;
    --sidebar-w-sm:     68px;
    --topbar-h:         60px;
    --r-sm:             8px;
    --r-md:             12px;
    --r-lg:             16px;
    --r-xl:             20px;
    --r-2xl:            24px;
    --shadow:           0 4px 20px rgba(0,0,0,0.5);
    --shadow-lg:        0 8px 40px rgba(0,0,0,0.7);
    --transition:       0.18s ease;
    --transition-md:    0.28s ease;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    overflow-x: hidden;
    min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* ══════════════════════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════════════════════ */

.app-shell {
    display: flex;
    min-height: 100vh;
}

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-w);
    background: var(--bg-2);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 200;
    overflow: visible;
    transition: transform var(--transition-md), width var(--transition-md);
    flex-shrink: 0;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 20px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.sidebar-logo-mark {
    width: 34px; height: 34px;
    background: var(--accent);
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 20px var(--accent-glow);
}

.sidebar-logo-text {
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.sidebar-logo-text span {
    color: var(--accent);
}

.sidebar-nav {
    flex: 1;
    padding: 12px 10px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Custom scrollbar — subtle but visible */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}
.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.28);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    color: var(--text-2);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--transition);
    position: relative;
    white-space: nowrap;
    overflow: hidden;
}

.nav-item:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text);
}

.nav-item.active {
    background: var(--accent-dim);
    color: var(--accent);
    font-weight: 600;
}

.nav-item.active .nav-icon svg {
    stroke: var(--accent);
}

.nav-icon {
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.nav-label { flex: 1; }

.nav-badge {
    background: var(--accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    line-height: 1.4;
    flex-shrink: 0;
}

.sidebar-section-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 10px 12px 4px;
}

.sidebar-bottom {
    padding: 10px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.sidebar-plan-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: linear-gradient(135deg, rgba(222,10,38,0.15), rgba(222,10,38,0.05));
    border: 1px solid rgba(222,10,38,0.2);
    border-radius: var(--r-md);
    margin-bottom: 8px;
    transition: border-color var(--transition), background var(--transition);
    cursor: pointer;
}

.sidebar-plan-badge:hover {
    border-color: rgba(222,10,38,0.4);
    background: linear-gradient(135deg, rgba(222,10,38,0.22), rgba(222,10,38,0.08));
}

.plan-icon {
    width: 28px; height: 28px;
    background: var(--accent);
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.plan-info { flex: 1; min-width: 0; }
.plan-name { font-size: 0.78rem; font-weight: 700; color: var(--text); }
.plan-label { font-size: 0.68rem; color: var(--text-3); }

.sidebar-artist {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--r-md);
    transition: background var(--transition);
    cursor: pointer;
}

.sidebar-artist:hover { background: rgba(255,255,255,0.04); }

.sidebar-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(222,10,38,0.3);
    overflow: hidden;
}

.sidebar-artist-info { flex: 1; min-width: 0; }
.sidebar-artist-name { font-size: 0.8125rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-artist-role { font-size: 0.7rem; color: var(--text-3); }

.sidebar-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    color: var(--text-3);
    transition: all var(--transition);
    flex-shrink: 0;
}

.sidebar-logout-btn:hover {
    background: var(--danger-dim);
    color: var(--danger);
    border-color: rgba(255,59,59,0.2);
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(2px);
    z-index: 150;
}

/* ── Main Content ──────────────────────────────────────────── */
.main-wrap {
    margin-left: var(--sidebar-w);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
}

/* ── Topbar ────────────────────────────────────────────────── */
.topbar {
    height: var(--topbar-h);
    background: rgba(8,8,9,0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}

.topbar-hamburger {
    display: none;
    width: 36px; height: 36px;
    align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    color: var(--text-2);
    cursor: pointer;
    transition: all var(--transition);
    flex-shrink: 0;
}

.topbar-hamburger:hover { background: rgba(255,255,255,0.08); color: var(--text); }

.topbar-title {
    flex: 1;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar-icon-btn {
    width: 36px; height: 36px;
    border-radius: 9px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    color: var(--text-2);
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition);
    position: relative;
    cursor: pointer;
}

.topbar-icon-btn:hover { background: rgba(255,255,255,0.09); color: var(--text); }

.topbar-badge {
    position: absolute;
    top: -3px; right: -3px;
    background: var(--accent);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    width: 16px; height: 16px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--bg);
}

.topbar-avatar-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-radius: 22px;
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
}

.topbar-avatar-btn:hover { background: rgba(255,255,255,0.09); border-color: var(--border-2); }

.topbar-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.topbar-name { font-size: 0.8125rem; font-weight: 600; color: var(--text); white-space: nowrap; }

.topbar-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r-lg);
    padding: 6px;
    box-shadow: var(--shadow-lg);
    z-index: 300;
}

.topbar-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--r-sm);
    font-size: 0.875rem;
    color: var(--text-2);
    transition: all var(--transition);
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.topbar-dropdown-item:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.topbar-dropdown-item.danger { color: var(--danger); }
.topbar-dropdown-item.danger:hover { background: var(--danger-dim); }
.topbar-dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ── Page Content ──────────────────────────────────────────── */
.page-content {
    flex: 1;
    padding: 28px;
    max-width: 1440px;
    width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   COMPONENTS
══════════════════════════════════════════════════════════════ */

/* ── Cards ─────────────────────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px;
}

.card-glass {
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-lg);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.card-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}

.card-subtitle {
    font-size: 0.78rem;
    color: var(--text-3);
    margin-top: 2px;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: var(--r-md);
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    text-decoration: none;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 16px rgba(222,10,38,0.35);
}

.btn-primary:hover {
    background: var(--accent-hover);
    box-shadow: 0 4px 24px rgba(222,10,38,0.5);
    transform: translateY(-1px);
}

.btn-secondary {
    background: rgba(255,255,255,0.07);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.11);
    border-color: var(--border-2);
}

.btn-ghost {
    background: transparent;
    color: var(--text-2);
    border: 1px solid var(--border);
}

.btn-ghost:hover { background: rgba(255,255,255,0.05); color: var(--text); }

.btn-danger {
    background: var(--danger-dim);
    color: var(--danger);
    border: 1px solid rgba(255,59,59,0.2);
}

.btn-danger:hover { background: rgba(255,59,59,0.2); }

.btn-sm { padding: 6px 13px; font-size: 0.8125rem; }
.btn-lg { padding: 13px 26px; font-size: 1rem; }
.btn-full { width: 100%; }

/* ── Forms ─────────────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }

.form-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 7px;
}

.form-label span { color: var(--danger); }

.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
    box-sizing: border-box;
    color-scheme: dark;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(222,10,38,0.12);
}

.form-select { appearance: none; cursor: pointer; }
.form-textarea { resize: vertical; min-height: 100px; line-height: 1.6; }

.form-input::placeholder, .form-textarea::placeholder { color: var(--text-3); }

.input-hint { font-size: 0.75rem; color: var(--text-3); margin-top: 5px; }

/* ── Toggle ────────────────────────────────────────────────── */
.toggle-track {
    width: 44px; height: 24px;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    border: none;
    cursor: pointer;
    position: relative;
    transition: background var(--transition);
    flex-shrink: 0;
}

.toggle-track.on { background: var(--accent); }

.toggle-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: white;
    position: absolute;
    top: 3px; left: 3px;
    transition: left var(--transition);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.toggle-track.on .toggle-thumb { left: 23px; }

/* ── Badges / Pills ────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.badge-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.badge-live     { background: rgba(16,185,129,0.15); color: #10B981; }
.badge-approved { background: rgba(16,185,129,0.15); color: #10B981; }
.badge-review   { background: rgba(245,158,11,0.15); color: #F59E0B; }
.badge-draft    { background: rgba(160,160,179,0.12); color: #A0A0B3; }
.badge-changes  { background: rgba(255,59,59,0.12); color: #FF3B3B; }
.badge-pending  { background: rgba(245,158,11,0.15); color: #F59E0B; }
.badge-red      { background: var(--accent-dim); color: var(--accent); }
.badge-teal     { background: var(--teal-dim); color: var(--teal); }

/* ── Tables ────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.data-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: var(--text-2);
    vertical-align: middle;
}

.data-table tr:last-child td { border-bottom: none; }

.data-table tbody tr {
    transition: background var(--transition);
    cursor: default;
}

.data-table tbody tr:hover td { background: rgba(255,255,255,0.02); color: var(--text); }

/* ── Modals ────────────────────────────────────────────────── */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(6px);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.modal {
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r-xl);
    padding: 28px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    position: relative;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.modal-title { font-size: 1.0625rem; font-weight: 700; color: var(--text); }

.modal-close {
    width: 30px; height: 30px;
    border-radius: 7px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    color: var(--text-3);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
}

.modal-close:hover { background: rgba(255,255,255,0.1); color: var(--text); }

/* ── Stat Cards ────────────────────────────────────────────── */
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px;
    transition: border-color var(--transition), transform var(--transition);
}

.stat-card:hover { border-color: var(--border-2); transform: translateY(-2px); }

.stat-icon {
    width: 42px; height: 42px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-bottom: 14px;
}

.stat-value {
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 8px;
}

.trend-up { color: var(--success); }
.trend-down { color: var(--danger); }

/* ── Release Cards ─────────────────────────────────────────── */
.release-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: all var(--transition-md);
    position: relative;
}

.release-card:hover {
    border-color: rgba(222,10,38,0.25);
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.release-artwork {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

.release-artwork-placeholder {
    width: 100%;
    aspect-ratio: 1;
    background: var(--bg-3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3);
}

.release-card-body { padding: 14px; }

.release-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.release-meta {
    font-size: 0.76rem;
    color: var(--text-3);
    margin-bottom: 10px;
}

/* ── Carousel ──────────────────────────────────────────────── */
.carousel-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
}

.carousel-wrap::-webkit-scrollbar { display: none; }

.carousel-track {
    display: flex;
    gap: 14px;
    width: max-content;
}

/* ── Welcome Banner ────────────────────────────────────────── */
.welcome-banner {
    background: linear-gradient(135deg, #200010 0%, #12001A 40%, #0A0A1A 100%);
    border: 1px solid rgba(222,10,38,0.15);
    border-radius: var(--r-xl);
    padding: 28px 32px;
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
}

.welcome-banner::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(222,10,38,0.2) 0%, transparent 70%);
    pointer-events: none;
}

.welcome-banner::after {
    content: '';
    position: absolute;
    bottom: -50px; left: 30%;
    width: 300px; height: 150px;
    background: radial-gradient(ellipse, rgba(99,102,241,0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* ── Welcome Banner Wallet Link ────────────────────────────── */
.banner-wallet-link {
    color: var(--text-2);
}
.banner-wallet-link:hover {
    color: var(--text);
}

/* ── Notification Items ────────────────────────────────────── */
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 14px 16px;
    border-radius: var(--r-md);
    transition: background var(--transition);
    cursor: default;
    position: relative;
}

.notif-item:hover { background: rgba(255,255,255,0.03); }

.notif-item.unread { background: rgba(222,10,38,0.03); }

.notif-item.unread::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 55%;
    background: var(--accent);
    border-radius: 0 3px 3px 0;
}

.notif-icon {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.notif-title { font-size: 0.875rem; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.notif-body  { font-size: 0.8125rem; color: var(--text-2); line-height: 1.5; }
.notif-time  { font-size: 0.72rem; color: var(--text-3); margin-top: 4px; }

/* ── Timeline ──────────────────────────────────────────────── */
.timeline { display: flex; flex-direction: column; gap: 0; }

.timeline-item {
    display: flex;
    gap: 14px;
    position: relative;
}

.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 32px;
    width: 2px;
    height: calc(100% - 10px);
    background: var(--border);
}

.timeline-dot {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg-3);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}

.timeline-dot.done { border-color: var(--success); background: var(--success-dim); }
.timeline-dot.active { border-color: var(--accent); background: var(--accent-dim); }

.timeline-content { padding-bottom: 20px; }
.timeline-label { font-size: 0.875rem; font-weight: 600; color: var(--text); }
.timeline-date  { font-size: 0.77rem; color: var(--text-3); margin-top: 2px; }

/* ── DSP Platform Chips ────────────────────────────────────── */
.dsp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}

.dsp-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    background: var(--bg-3);
    border: 2px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all var(--transition);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-2);
}

.dsp-chip:hover { border-color: var(--border-2); color: var(--text); }
.dsp-chip.checked { border-color: var(--accent); background: var(--accent-dim); color: var(--text); }

/* ── Drag-and-drop Upload ──────────────────────────────────── */
.upload-zone {
    border: 2px dashed var(--border-2);
    border-radius: var(--r-lg);
    padding: 36px 24px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-md);
    background: var(--bg-3);
}

.upload-zone:hover, .upload-zone.drag-over {
    border-color: var(--accent);
    background: rgba(222,10,38,0.04);
}

.upload-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
    color: var(--text-3);
}

.upload-title { font-size: 0.9375rem; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.upload-hint  { font-size: 0.8125rem; color: var(--text-3); }

/* ── Filter Bar ────────────────────────────────────────────── */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-pill {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.04);
    color: var(--text-2);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.filter-pill:hover { border-color: var(--border-2); color: var(--text); background: rgba(255,255,255,0.07); }
.filter-pill.active { background: var(--accent-dim); border-color: rgba(222,10,38,0.35); color: var(--accent); font-weight: 600; }

/* ── Step Wizard ───────────────────────────────────────────── */
.step-bar {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 24px;
}

.step-item {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 0;
}

.step-dot {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
    background: rgba(255,255,255,0.08);
    color: var(--text-3);
    border: 2px solid var(--border);
    transition: all var(--transition-md);
}

.step-dot.current { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(222,10,38,0.2); }
.step-dot.done    { background: var(--success); color: #fff; border-color: var(--success); }

.step-connector {
    flex: 1;
    height: 2px;
    background: var(--border);
    margin: 0 6px;
    transition: background var(--transition-md);
}

.step-connector.done { background: var(--success); }

/* ── KYC Cards ─────────────────────────────────────────────── */
.kyc-status-card {
    border-radius: var(--r-xl);
    padding: 28px;
    text-align: center;
}

/* ── Progress Bar ──────────────────────────────────────────── */
.progress-bar {
    height: 5px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #FF4060);
    border-radius: 3px;
    transition: width var(--transition-md);
}

/* ── Wallet ────────────────────────────────────────────────── */
.balance-card {
    background: linear-gradient(135deg, #1A0006 0%, #110015 60%, #0A0A20 100%);
    border: 1px solid rgba(222,10,38,0.2);
    border-radius: var(--r-xl);
    padding: 32px;
    position: relative;
    overflow: hidden;
}

.balance-card::before {
    content: '';
    position: absolute;
    top: -80px; right: -40px;
    width: 250px; height: 250px;
    background: radial-gradient(circle, rgba(222,10,38,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.balance-amount {
    font-size: 3rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.04em;
    line-height: 1;
}

/* ── Collab Card ───────────────────────────────────────────── */
.collab-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: all var(--transition-md);
}

.collab-card:hover { border-color: var(--border-2); transform: translateY(-2px); box-shadow: var(--shadow); }

/* ── Autosave Indicator ────────────────────────────────────── */
.autosave {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--success);
}

/* ── Chart Container ───────────────────────────────────────── */
.chart-container {
    position: relative;
    width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD SPECIFIC
══════════════════════════════════════════════════════════════ */

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.right-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.platform-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

.platform-row:last-child { border-bottom: none; }

.platform-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
    width: 80px;
    flex-shrink: 0;
}

.platform-bar {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
}

.platform-bar-fill {
    height: 100%;
    border-radius: 3px;
}

.platform-val {
    font-size: 0.78rem;
    color: var(--text-3);
    width: 50px;
    text-align: right;
    flex-shrink: 0;
}

/* ── Donut Ring ────────────────────────────────────────────── */
.donut-ring {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.donut-label {
    position: absolute;
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */

/* ── Grid Utilities ────────────────────────────────────────── */
.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 1200px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .stats-row { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    :root { --sidebar-w: 0px; }

    .sidebar {
        transform: translateX(-100%);
        width: 280px;
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }

    .sidebar-overlay { display: block; }
    .main-wrap { margin-left: 0; }
    .topbar-hamburger { display: flex; }
    .page-content { padding: 18px; }
    .stats-row { grid-template-columns: 1fr 1fr; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .grid-2col { grid-template-columns: 1fr 1fr; }
    .grid-3col { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    /* Filter bar — horizontal scroll strip */
    .filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .filter-bar::-webkit-scrollbar { display: none; }
    .filter-pill { flex-shrink: 0; }

    /* Compact cards */
    .card { padding: 16px; }
    .modal { padding: 20px; }
    .balance-card { padding: 24px; }
    .kyc-status-card { padding: 20px; }
    .welcome-banner { padding: 22px 20px; }

    /* Step wizard */
    .step-dot { width: 28px; height: 28px; font-size: 0.72rem; }
    .step-connector { margin: 0 4px; }

    /* DSP grid smaller min */
    .dsp-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

    /* Stat values compact */
    .stat-value { font-size: 1.625rem; }
}

@media (max-width: 600px) {
    .stats-row { grid-template-columns: 1fr 1fr; }
    .dsp-grid { grid-template-columns: 1fr 1fr; }
    .welcome-banner { padding: 16px; }
    .balance-amount { font-size: 2rem; }
    .balance-card { padding: 20px; }

    /* Modal as bottom sheet */
    .modal-backdrop { padding: 0; align-items: flex-end; }
    .modal {
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        max-height: 90vh;
        max-width: 100%;
    }

    /* Grid collapses */
    .grid-2col { grid-template-columns: 1fr; }
    .grid-3col { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .page-content { padding: 12px; }
    .stats-row { grid-template-columns: 1fr 1fr; }
    .topbar { padding: 0 12px; }
    .topbar-name { display: none; }
    .card { padding: 14px; }
    .balance-amount { font-size: 1.875rem; }
    .balance-card { padding: 18px; }
    .welcome-banner { padding: 14px; }
    .grid-3col { grid-template-columns: 1fr; }

    /* Table rows readable on tiny screens */
    .table-wrap { border-radius: var(--r-md); }
}

@media (max-width: 360px) {
    .stats-row { grid-template-columns: 1fr; }
    .dsp-grid { grid-template-columns: 1fr; }
    .topbar-name { display: none; }
}

/* ── Utility ───────────────────────────────────────────────── */
.text-accent  { color: var(--accent) !important; }
.text-teal    { color: var(--teal) !important; }
.text-muted   { color: var(--text-2); }
.text-dim     { color: var(--text-3); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warning { color: var(--warning); }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }
.flex  { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.divider { height: 1px; background: var(--border); margin: 16px 0; }
.rounded-full { border-radius: 9999px; }

/* ── Animations ────────────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

.fade-in { animation: fadeIn 0.3s ease forwards; }
.pulse   { animation: pulse 2s ease-in-out infinite; }

/* ══════════════════════════════════════════════════════════════
   SUBSCRIPTION PAGE
══════════════════════════════════════════════════════════════ */

/* ── Hero / Plan banner ──────────────────────────────────────── */
.sub-hero {
    background: linear-gradient(135deg, #200010 0%, #12001A 40%, #0A0A1A 100%);
    border: 1px solid rgba(222,10,38,0.15);
    border-radius: var(--r-xl);
    padding: 28px 32px 24px;
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
}

.sub-hero-blob {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
}
.sub-hero-blob--1 {
    top: -70px; right: -70px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(222,10,38,0.22) 0%, transparent 70%);
}
.sub-hero-blob--2 {
    bottom: -50px; left: 25%;
    width: 340px; height: 180px;
    background: radial-gradient(ellipse, rgba(99,102,241,0.09) 0%, transparent 70%);
}

.sub-hero-inner {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.sub-plan-icon {
    width: 38px; height: 38px;
    background: var(--accent);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 20px var(--accent-glow);
}

.sub-plan-name {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0;
}

.sub-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.sub-status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sub-hero-hint {
    font-size: 0.875rem;
    color: var(--text-2);
    margin-top: 10px;
}

.sub-hero-hint strong {
    color: var(--text);
    font-weight: 700;
}

.sub-hero-pricing {
    text-align: right;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.sub-price-line {
    display: flex;
    align-items: baseline;
    gap: 3px;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.sub-price {
    font-size: 2.25rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.03em;
    line-height: 1;
}

.sub-price-per {
    font-size: 0.9rem;
    color: var(--text-3);
    font-weight: 500;
}

/* ── Progress bar ────────────────────────────────────────────── */
.sub-progress-section {
    margin-top: 24px;
    position: relative;
    z-index: 1;
}

.sub-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.sub-progress-label {
    font-size: 0.775rem;
    color: var(--text-3);
    font-weight: 500;
}

.sub-progress-label strong {
    color: var(--text-2);
    font-weight: 700;
}

.sub-progress-track {
    width: 100%;
    height: 10px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    overflow: visible;
    position: relative;
}

.sub-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #DE0A26 0%, #FF4D4D 100%);
    border-radius: 999px;
    position: relative;
    transition: width 0.6s ease;
    box-shadow: 0 0 10px rgba(222,10,38,0.45);
    min-width: 10px;
}

.sub-progress-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.sub-progress-tooltip {
    background: var(--accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
    margin-top: -28px;
    position: relative;
    box-shadow: 0 2px 8px rgba(222,10,38,0.4);
    letter-spacing: 0.03em;
}

.sub-progress-tooltip::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--accent);
}

.sub-progress-dates {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 0.72rem;
    color: var(--text-3);
}

/* ── Body grid ───────────────────────────────────────────────── */
.sub-body-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .sub-body-grid { grid-template-columns: 1fr; }
    .sub-hero-inner { flex-direction: column; gap: 16px; }
    .sub-hero-pricing { text-align: left; }
    .sub-price-line { justify-content: flex-start; }
}

/* ── Features list ───────────────────────────────────────────── */
.sub-features-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sub-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    font-size: 0.875rem;
    color: var(--text-2);
    border-bottom: 1px solid var(--border);
    transition: color var(--transition);
}

.sub-feature-item:last-child { border-bottom: none; }
.sub-feature-item:hover { color: var(--text); }

.sub-feature-check {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--success-dim);
    color: var(--success);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ── Plan comparison cards ─────────────────────────────────── */
.sub-plan-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    transition: border-color var(--transition);
}

.sub-plan-card:hover { border-color: var(--border-2); }

.sub-plan-card--active {
    border-color: rgba(222,10,38,0.3);
    background: var(--accent-dim);
}

.sub-plan-card-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}

.sub-plan-card-price {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.02em;
}

.sub-plan-card-price span {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-3);
}

/* ── Payment table extras ──────────────────────────────────── */
.sub-payment-table th:first-child,
.sub-payment-table td:first-child { width: 110px; }

.sub-invoice-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--accent-dim);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.sub-receipt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-3);
    transition: all var(--transition);
}

.sub-receipt-btn:hover {
    background: var(--accent-dim);
    color: var(--accent);
    border-color: rgba(222,10,38,0.2);
}

/* ══════════════════════════════════════════════════════════════
   ROYALTIES PAGE
══════════════════════════════════════════════════════════════ */

/* ── Tab nav ─────────────────────────────────────────────────── */
.ryl-tabs {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--border);
    padding: 0 20px;
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ryl-tabs::-webkit-scrollbar { display: none; }

.ryl-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 14px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-3);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    margin-bottom: -1px;
}

.ryl-tab:hover { color: var(--text-2); }

.ryl-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.ryl-tab.active svg { stroke: var(--accent); }

/* ── Tab panel ───────────────────────────────────────────────── */
.ryl-tab-panel {
    animation: fadeIn 0.2s ease forwards;
}

/* ── Responsive grid helpers ─────────────────────────────────── */
.ryl-top-grid {
    grid-template-columns: 2fr 1fr;
}

@media (max-width: 900px) {
    .ryl-top-grid { grid-template-columns: 1fr !important; }
}

/* ── Monthly statements grid ─────────────────────────────────── */
.ryl-statements-grid {
    grid-template-columns: repeat(6, 1fr);
}

@media (max-width: 1100px) { .ryl-statements-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 640px)  { .ryl-statements-grid { grid-template-columns: repeat(2, 1fr) !important; } }

/* ── Statement card ────────────────────────────────────────── */
.ryl-stmt-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color var(--transition), transform var(--transition);
}

.ryl-stmt-card:hover {
    border-color: var(--border-2);
    transform: translateY(-2px);
}

.ryl-stmt-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--accent-dim);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 4px;
    flex-shrink: 0;
}

.ryl-stmt-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ryl-stmt-amount {
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--teal);
    letter-spacing: -0.02em;
}

.ryl-stmt-dl {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-3);
    text-decoration: none;
    transition: color var(--transition);
}

.ryl-stmt-dl:hover { color: var(--accent); }

/* ══════════════════════════════════════════════════════════════
   PRICING PAGE
══════════════════════════════════════════════════════════════ */

/* ── Page header ─────────────────────────────────────────────── */
.pricing-header {
    background: linear-gradient(135deg, #200010 0%, #12001A 40%, #0A0A1A 100%);
    border: 1px solid rgba(222,10,38,0.15);
    border-radius: var(--r-xl);
    padding: 48px 32px 36px;
    position: relative;
    overflow: hidden;
    margin-bottom: 28px;
    text-align: center;
}

.pricing-header-blob {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
}
.pricing-header-blob--1 {
    top: -80px; right: -80px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(222,10,38,0.22) 0%, transparent 70%);
}
.pricing-header-blob--2 {
    bottom: -60px; left: 10%;
    width: 400px; height: 200px;
    background: radial-gradient(ellipse, rgba(99,102,241,0.1) 0%, transparent 70%);
}

.pricing-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 10px;
}

.pricing-title {
    font-size: 2.25rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.03em;
    margin-bottom: 10px;
    line-height: 1.1;
}

.pricing-subtitle {
    font-size: 1rem;
    color: var(--text-2);
    max-width: 480px;
    margin: 0 auto 24px;
}

/* ── Billing toggle ──────────────────────────────────────────── */
.pricing-toggle-wrap {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border-2);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
    position: relative;
    z-index: 1;
}

.pricing-toggle-opt {
    padding: 7px 20px;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pricing-toggle-opt--active {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.pricing-toggle-divider {
    width: 1px;
    height: 18px;
    background: var(--border);
}

.pricing-save-chip {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── Plan cards grid ─────────────────────────────────────────── */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
    align-items: start;
}

@media (max-width: 1200px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .pricing-grid { grid-template-columns: 1fr; } }

/* ── Individual plan card ────────────────────────────────────── */
.pricing-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 24px 22px 22px;
    position: relative;
    transition: border-color var(--transition-md), transform var(--transition-md), box-shadow var(--transition-md);
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    border-color: var(--border-2);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.pricing-card--popular {
    border-color: rgba(222,10,38,0.45);
    background: linear-gradient(160deg, rgba(222,10,38,0.06) 0%, var(--surface) 60%);
    box-shadow: 0 0 0 1px rgba(222,10,38,0.2), var(--shadow);
}

.pricing-card--popular:hover {
    border-color: rgba(222,10,38,0.7);
    box-shadow: 0 0 0 1px rgba(222,10,38,0.35), 0 12px 40px rgba(222,10,38,0.15);
}

.pricing-card--current {
    border-color: rgba(222,10,38,0.45);
}

.pricing-popular-badge {
    position: absolute;
    top: -1px; left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 14px;
    border-radius: 0 0 10px 10px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(222,10,38,0.4);
}

/* ── Plan icon ───────────────────────────────────────────────── */
.pricing-plan-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.pricing-plan-name {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
}

.pricing-plan-tagline {
    font-size: 0.725rem;
    color: var(--text-3);
    margin-top: 1px;
}

/* ── Price display ───────────────────────────────────────────── */
.pricing-price-block {
    margin-bottom: 18px;
}

.pricing-price-row {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.pricing-currency {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-2);
    align-self: flex-start;
    margin-top: 6px;
}

.pricing-amount {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.04em;
    line-height: 1;
}

.pricing-annual-save-tag {
    background: rgba(16,185,129,0.15);
    color: var(--success);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 20px;
    margin-left: 6px;
    align-self: center;
}

.pricing-price-sub {
    font-size: 0.75rem;
    color: var(--text-3);
    margin-top: 3px;
}

/* ── Divider ─────────────────────────────────────────────────── */
.pricing-divider {
    height: 1px;
    background: var(--border);
    margin: 0 -22px 18px;
}

/* ── Feature list in cards ───────────────────────────────────── */
.pricing-feat-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.pricing-feat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.84rem;
    color: var(--text-2);
}

.pricing-feat-check {
    width: 20px; height: 20px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ── Comparison table ────────────────────────────────────────── */
.pricing-compare-card {
    margin-bottom: 24px;
}

.pricing-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    min-width: 640px;
}

.pricing-compare-feature-col {
    text-align: left;
    padding: 10px 16px 10px 0;
    font-weight: 600;
    color: var(--text-2);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    width: 34%;
    border-bottom: 1px solid var(--border);
}

.pricing-compare-plan-col {
    text-align: center;
    padding: 12px 8px;
    border-bottom: 1px solid var(--border);
    min-width: 110px;
}

.pricing-compare-plan-col.pricing-compare-current {
    background: rgba(222,10,38,0.04);
    border-bottom-color: rgba(222,10,38,0.15);
}

.pricing-compare-plan-name {
    font-weight: 800;
    font-size: 0.875rem;
}

.pricing-compare-current-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 2px;
}

.pricing-compare-group-row td {
    padding: 18px 0 6px;
}

.pricing-compare-group {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.pricing-compare-row:hover td {
    background: rgba(255,255,255,0.02);
}

.pricing-compare-feat-label {
    padding: 11px 16px 11px 0;
    color: var(--text-2);
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border);
}

.pricing-compare-cell {
    text-align: center;
    padding: 11px 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.pricing-compare-cell.pricing-compare-current {
    background: rgba(222,10,38,0.04);
    border-bottom-color: rgba(222,10,38,0.10);
}

.pricing-compare-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--success-dim);
    color: var(--success);
}

.pricing-compare-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    color: var(--text-3);
}

.pricing-compare-text {
    font-size: 0.8125rem;
    color: var(--text-2);
    font-weight: 500;
}

/* ── FAQ strip ───────────────────────────────────────────────── */
.pricing-faq-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 1200px) { .pricing-faq-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .pricing-faq-grid { grid-template-columns: 1fr; } }

.pricing-faq-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pricing-faq-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--accent-dim);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-bottom: 2px;
}

.pricing-faq-q {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

.pricing-faq-a {
    font-size: 0.825rem;
    color: var(--text-2);
    line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════
   ARTIST TOOLBOX
══════════════════════════════════════════════════════════════ */

/* ── Plan gate banner ──────────────────────────────────────── */
.toolbox-gate-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--r-lg);
    background: rgba(245,158,11,.08);
    border: 1px solid rgba(245,158,11,.25);
    color: var(--text);
    font-size: 0.875rem;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.toolbox-gate-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: rgba(245,158,11,.15);
    display: flex; align-items: center; justify-content: center;
    color: var(--warning);
    flex-shrink: 0;
}

/* ── Locked form overlay ───────────────────────────────────── */
.toolbox-locked {
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
}

/* ── Pitch stepper ─────────────────────────────────────────── */
.toolbox-stepper {
    display: flex;
    gap: 0;
    align-items: flex-start;
}
.toolbox-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    gap: 6px;
}
.toolbox-step-dot {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.06);
    border: 2px solid var(--border);
    color: var(--text-3);
    font-size: 0.78rem;
    transition: all var(--transition-md);
    z-index: 1;
}
.toolbox-step-dot.done    { background: var(--success); border-color: var(--success); color: #fff; }
.toolbox-step-dot.current { background: var(--accent);  border-color: var(--accent);  color: #fff; box-shadow: 0 0 0 4px rgba(222,10,38,.18); }
.toolbox-step-connector {
    position: absolute;
    top: 15px; left: 50%;
    width: 100%; height: 2px;
    background: var(--border);
    z-index: 0;
}
.toolbox-step-connector.done { background: var(--success); }
.toolbox-step:last-child .toolbox-step-connector { display: none; }
.toolbox-step-label {
    font-size: 0.75rem;
    color: var(--text-3);
    text-align: center;
    margin-top: 2px;
}

/* ── Curator tag checkboxes ────────────────────────────────── */
.toolbox-tag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
    gap: 8px;
}
.toolbox-tag-check {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--text-2);
    cursor: pointer;
    transition: all var(--transition);
}
.toolbox-tag-check input:checked + span,
.toolbox-tag-check:has(input:checked) {
    border-color: rgba(222,10,38,.35);
    background: var(--accent-dim);
    color: var(--accent);
}
.toolbox-tag-check:hover { border-color: var(--border-2); color: var(--text); }
.toolbox-tag-check--disabled { opacity: .4; pointer-events: none; }

/* ── Promo size picker ─────────────────────────────────────── */
.toolbox-size-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
}
.toolbox-size-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
}
.toolbox-size-card:hover { border-color: var(--border-2); }
.toolbox-size-card.active { border-color: var(--accent); background: var(--accent-dim); }
.toolbox-size-thumb {
    width: 48px;
    background: rgba(255,255,255,.06);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-3);
}
.toolbox-size-card.active .toolbox-size-thumb { color: var(--accent); background: rgba(222,10,38,.1); }
.toolbox-size-label { font-size: 0.78rem; font-weight: 600; color: var(--text); }
.toolbox-size-dim   { font-size: 0.72rem; color: var(--text-3); }

/* ── Watermark notice ──────────────────────────────────────── */
.toolbox-watermark-notice {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(99,102,241,.08);
    border: 1px solid rgba(99,102,241,.2);
    font-size: 0.8rem;
    color: var(--text-2);
    margin-bottom: 14px;
}
.toolbox-watermark-notice svg { flex-shrink: 0; color: var(--info); }
.toolbox-watermark-notice a   { color: var(--accent); text-decoration: underline; }

/* ── Asset preview area ────────────────────────────────────── */
.toolbox-asset-preview {
    min-height: 240px;
    border-radius: var(--r-lg);
    background: rgba(255,255,255,.03);
    border: 1px dashed var(--border);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.toolbox-asset-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
}
.toolbox-asset-card {
    position: relative;
    width: 100%;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #111;
}
.toolbox-asset-overlay {
    padding: 14px 16px 18px;
    background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.3) 100%);
    background: var(--surface);
}
.toolbox-asset-branding {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.toolbox-asset-track {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}
.toolbox-asset-cta {
    font-size: 0.78rem;
    color: var(--text-3);
}

/* ── Partner deals grid ────────────────────────────────────── */
.toolbox-deals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
    gap: 16px;
}
.toolbox-deal-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    transition: all var(--transition-md);
    overflow: hidden;
}
.toolbox-deal-card:hover { border-color: var(--border-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.toolbox-deal-card--locked { opacity: .55; pointer-events: none; }
.toolbox-deal-card--claimed { border-color: rgba(16,185,129,.3); }
.toolbox-deal-top {
    display: flex;
    align-items: center;
    gap: 10px;
}
.toolbox-deal-logo {
    width: 40px; height: 40px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border);
}
.toolbox-deal-meta { flex: 1; min-width: 0; }
.toolbox-deal-name { font-size: 0.875rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toolbox-deal-cat  { font-size: 0.75rem; color: var(--text-3); }
.toolbox-deal-offer { font-size: 0.8125rem; color: var(--text-2); line-height: 1.5; margin: 0; flex: 1; }
.toolbox-deal-lock {
    position: absolute;
    top: 10px; right: 10px;
    display: flex; align-items: center; gap: 5px;
    font-size: 0.7rem; font-weight: 700;
    color: var(--warning);
    background: rgba(245,158,11,.12);
    border: 1px solid rgba(245,158,11,.25);
    border-radius: 6px;
    padding: 3px 8px;
}
.toolbox-deal-claimed-ribbon {
    position: absolute;
    top: 0; right: 0;
    background: var(--success);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-bottom-left-radius: 8px;
}
.toolbox-deal-card--locked .toolbox-deal-card { pointer-events: none; }

/* ── Agreement text box ────────────────────────────────────── */
.toolbox-agreement-box {
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 18px;
    font-size: 0.8125rem;
    color: var(--text-2);
    line-height: 1.7;
    max-height: 260px;
    overflow-y: auto;
}

/* ══════════════════════════════════════════════════════════════
   TOOLBOX BENTO GRID
══════════════════════════════════════════════════════════════ */

.tb-bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 16px;
    margin-bottom: 8px;
}

/* Layout: pitch spans 2 cols + 2 rows; radar spans full width */
.tb-bento-card--pitch     { grid-column: span 2; grid-row: span 2; }
.tb-bento-card--radar     { grid-column: span 3; }

.tb-bento-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 22px 20px 18px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color var(--transition-md), transform var(--transition-md), box-shadow var(--transition-md);
}
.tb-bento-card:hover {
    border-color: var(--border-2);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}
.tb-bento-card:active { transform: translateY(-1px); }

/* Glow blob for the large pitch card */
.tb-bento-glow {
    position: absolute;
    pointer-events: none;
    width: 260px; height: 260px;
    border-radius: 50%;
    top: -80px; right: -60px;
    background: radial-gradient(circle, rgba(222,10,38,0.12) 0%, transparent 70%);
    z-index: 0;
}

.tb-bento-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    position: relative; z-index: 1;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
}

/* Larger icon for the 2×2 pitch card */
.tb-bento-card--pitch .tb-bento-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
}

.tb-bento-body {
    flex: 1;
    position: relative; z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Horizontal layout for the radar full-width strip */
.tb-bento-card--radar {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
}
.tb-bento-card--radar .tb-bento-body { gap: 4px; }

.tb-bento-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}
.tb-bento-card--pitch .tb-bento-name { font-size: 1.2rem; margin-top: 6px; }
.tb-bento-card--radar .tb-bento-name { font-size: .95rem; }

.tb-bento-desc {
    font-size: 0.8125rem;
    color: var(--text-2);
    line-height: 1.55;
    flex: 1;
}
.tb-bento-card--radar .tb-bento-desc { font-size: .8rem; }

.tb-bento-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.tb-bento-stat {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-3);
    background: rgba(255,255,255,.06);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2px 9px;
}

.tb-bento-lock {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--warning);
    background: rgba(245,158,11,.1);
    border: 1px solid rgba(245,158,11,.25);
    border-radius: 20px;
    padding: 2px 9px;
}

.tb-bento-arrow {
    position: absolute;
    bottom: 18px; right: 18px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-3);
    transition: background var(--transition), color var(--transition);
    z-index: 1;
}
.tb-bento-card:hover .tb-bento-arrow {
    background: var(--accent);
    color: #fff;
}
.tb-bento-card--radar .tb-bento-arrow {
    position: static;
    flex-shrink: 0;
    margin-left: auto;
}

@media (max-width: 900px) {
    .tb-bento-grid { grid-template-columns: repeat(2, 1fr); }
    .tb-bento-card--pitch { grid-column: span 2; grid-row: span 1; }
    .tb-bento-card--radar { grid-column: span 2; }
}
@media (max-width: 580px) {
    .tb-bento-grid { grid-template-columns: 1fr; }
    .tb-bento-card--pitch { grid-column: span 1; }
    .tb-bento-card--radar { grid-column: span 1; flex-direction: column; align-items: flex-start; }
    .tb-bento-card--radar .tb-bento-arrow { margin-left: 0; }
}

/* Back bar */
#tbBackBar {
    display: flex;
    align-items: center;
    gap: 0;
}

/* ══════════════════════════════════════════════════════════════
   SMARTLINK / FANLINK
══════════════════════════════════════════════════════════════ */

.sl-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    height: 42px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: var(--r-md) 0 0 var(--r-md);
    font-size: 0.8125rem;
    color: var(--text-3);
    white-space: nowrap;
    flex-shrink: 0;
}

.sl-slug-input {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.sl-theme-picker {
    display: flex;
    gap: 8px;
}

.sl-theme-opt {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: all var(--transition);
    color: var(--text-2);
}
.sl-theme-opt:hover { border-color: var(--border-2); color: var(--text); }
.sl-theme-opt.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

.sl-theme-opt--dark   { background: rgba(0,0,0,.3); }
.sl-theme-opt--light  { background: rgba(255,255,255,.06); }
.sl-theme-opt--accent { background: var(--accent-dim); }

.sl-platforms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px,1fr));
    gap: 8px;
}

.sl-platform-check {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--text-2);
    cursor: pointer;
    transition: all var(--transition);
}
.sl-platform-check:hover { border-color: var(--border-2); color: var(--text); }
.sl-platform-check:has(input:checked) { border-color: rgba(0,203,164,.3); background: rgba(0,203,164,.06); color: var(--teal); }

.sl-platform-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sl-phone-wrap {
    display: flex;
    justify-content: center;
    padding: 10px 0 16px;
}

.sl-phone {
    width: 200px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
}

.sl-phone-art {
    margin-bottom: 4px;
}

.sl-phone-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text);
    text-align: center;
}

.sl-phone-sub {
    font-size: 0.72rem;
    color: var(--text-3);
    margin-top: -6px;
}

.sl-phone-btns {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
    margin-top: 4px;
}

.sl-phone-btn {
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

.sl-qr-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-3);
    padding: 10px 0;
}

/* ══════════════════════════════════════════════════════════════
   TYPEAHEAD / SEARCHABLE RELEASE SELECT (ts-*)
══════════════════════════════════════════════════════════════ */

/* Wrapper */
.ts-wrap {
    position: relative;
    width: 100%;
    user-select: none;
    font-family: inherit;
}

/* Closed trigger button */
.ts-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    height: 42px;
    border: 1.5px solid var(--border-2, rgba(255,255,255,.12));
    border-radius: 10px;
    background: var(--surface-2, #1E1E25);
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s;
    gap: 8px;
    overflow: hidden;
}
.ts-trigger:hover {
    border-color: var(--text-3, #8D8BA2);
    background: var(--surface-3, #25252F);
}
.ts-wrap.ts-open .ts-trigger {
    border-color: var(--accent, #DE0A26);
    box-shadow: 0 0 0 3px rgba(222,10,38,.13);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

/* Display area inside trigger */
.ts-display {
    flex: 1;
    min-width: 0;
    font-size: .875rem;
    color: var(--text-3, #8D8BA2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}
.ts-display.has-value { color: var(--text, #F2F2F5); }

/* Thumbnail shown in trigger when a release is selected */
.ts-display-art {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

/* Chevron */
.ts-arrow {
    flex-shrink: 0;
    color: var(--text-3, #8D8BA2);
    transition: transform .2s ease;
    margin-left: 2px;
}
.ts-wrap.ts-open .ts-arrow { transform: rotate(180deg); }

/* Dropdown panel */
.ts-dropdown {
    display: none;
    position: absolute;
    top: calc(100% - 1px);
    left: 0; right: 0;
    z-index: 600;
    background: var(--surface, #18181D);
    border: 1.5px solid var(--accent, #DE0A26);
    border-top: none;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
    overflow: hidden;
}
.ts-wrap.ts-open .ts-dropdown { display: block; }

/* Search row inside dropdown */
.ts-search-wrap {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,.07));
    background: linear-gradient(135deg, rgba(222,10,38,.06) 0%, rgba(30,30,37,.98) 100%);
    background-color: var(--surface-2, #1E1E25);
    position: relative;
}
.ts-search {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 14px 9px 38px;
    border: 1.5px solid rgba(222,10,38,.25);
    border-radius: 8px;
    background: rgba(0,0,0,.25);
    color: var(--text, #F2F2F5);
    font-size: .83rem;
    font-family: inherit;
    outline: none;
    line-height: 1.4;
    transition: border-color .18s, box-shadow .18s, background .18s;
    /* magnifier icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' stroke='%23DE0A26' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 15px;
    letter-spacing: .01em;
}
.ts-search:focus {
    border-color: var(--accent, #DE0A26);
    box-shadow: 0 0 0 3px rgba(222,10,38,.18), inset 0 1px 3px rgba(0,0,0,.3);
    background-color: rgba(0,0,0,.35);
}
.ts-search::placeholder {
    color: rgba(222,10,38,.45);
    font-style: italic;
    font-size: .8rem;
}
[data-theme="light"] .ts-search-wrap {
    background: linear-gradient(135deg, rgba(222,10,38,.05) 0%, #f8f7fd 100%);
    background-color: #f8f7fd;
}
[data-theme="light"] .ts-search {
    background: rgba(255,255,255,.9);
    color: #0C0B14;
    border-color: rgba(222,10,38,.3);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' stroke='%23DE0A26' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 15px;
}
[data-theme="light"] .ts-search:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(222,10,38,.14);
    background-color: #fff;
}
[data-theme="light"] .ts-search::placeholder { color: rgba(222,10,38,.4); }

/* Options list */
.ts-options {
    max-height: 230px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border-2, rgba(255,255,255,.12)) transparent;
}
.ts-options::-webkit-scrollbar { width: 4px; }
.ts-options::-webkit-scrollbar-track { background: transparent; }
.ts-options::-webkit-scrollbar-thumb { background: var(--border-2, rgba(255,255,255,.12)); border-radius: 4px; }

/* Individual option row */
.ts-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: .86rem;
    color: var(--text, #F2F2F5);
    transition: background .1s;
    border-bottom: 1px solid var(--border, rgba(255,255,255,.04));
    overflow: hidden;
}
.ts-opt:last-child { border-bottom: none; }
.ts-opt:hover { background: var(--surface-2, #1E1E25); }
.ts-opt.ts-selected {
    background: var(--accent-dim, rgba(222,10,38,.10));
    color: var(--text, #F2F2F5);
    font-weight: 500;
}

/* Artwork thumbnail in each option */
.ts-opt-art {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    border-radius: 5px;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
    background: var(--surface-3, #25252F);
}
.ts-opt-art--placeholder {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 5px;
    background: var(--surface-3, #25252F);
    border: 1px solid var(--border, rgba(255,255,255,.07));
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3, #8D8BA2);
}
.ts-opt-art--placeholder::after {
    content: '';
    display: block;
    width: 14px; height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238D8BA2' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/* Option label text */
.ts-opt span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* Empty / no-match message */
.ts-opt--empty {
    padding: 18px 16px;
    font-size: .82rem;
    color: var(--text-3, #8D8BA2);
    font-style: italic;
    cursor: default;
    text-align: center;
    background: none;
    border: none;
}
.ts-opt--empty:hover { background: none; }
.ts-opt--hidden { display: none !important; }

/* Light theme overrides */
[data-theme="light"] .ts-trigger {
    background: #fff;
    border-color: rgba(0,0,0,.14);
}
[data-theme="light"] .ts-trigger:hover { background: #f9f8fe; }
[data-theme="light"] .ts-wrap.ts-open .ts-trigger { border-color: var(--accent); }
[data-theme="light"] .ts-dropdown {
    background: #fff;
    box-shadow: 0 12px 32px rgba(0,0,0,.14);
}
[data-theme="light"] .ts-search-wrap { background: #f8f7fd; }
[data-theme="light"] .ts-search {
    background: #fff;
    color: #0C0B14;
    border-color: rgba(0,0,0,.14);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%238D8BA2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 14px;
}
[data-theme="light"] .ts-search:focus { background-color: #fff; }
[data-theme="light"] .ts-opt { color: #0C0B14; border-color: rgba(0,0,0,.05); }
[data-theme="light"] .ts-opt:hover { background: #f5f4fc; }
[data-theme="light"] .ts-opt.ts-selected { background: rgba(222,10,38,.07); }
[data-theme="light"] .ts-opt-art--placeholder { background: #eceaf3; border-color: rgba(0,0,0,.08); }
[data-theme="light"] .ts-display { color: #8D8BA2; }
[data-theme="light"] .ts-display.has-value { color: #0C0B14; }

.sl-link-cell {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--teal);
    text-decoration: none;
}
.sl-link-cell:hover { text-decoration: underline; }

/* ── Release Radar target cards ────────────────────────────── */
.toolbox-radar-target {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    cursor: pointer;
    transition: all var(--transition);
    background: rgba(255,255,255,.02);
}
.toolbox-radar-target:hover { border-color: var(--border-2); }
.toolbox-radar-target.active { border-color: var(--accent); background: var(--accent-dim); }
.toolbox-radar-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.toolbox-radar-info { flex: 1; min-width: 0; }
.toolbox-radar-name { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.toolbox-radar-desc { font-size: 0.78rem; color: var(--text-3); }
.toolbox-radar-check {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

/* ── Release Radar mood chips ───────────────────────────────── */
.radar-mood-chip {
    display: inline-block;
    padding: 5px 13px;
    font-size: .78rem;
    font-weight: 400;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    cursor: pointer;
    transition: all var(--transition);
    user-select: none;
}
.radar-mood-chip:hover {
    border-color: var(--border-2);
    color: var(--text);
}

/* ══════════════════════════════════════════════════════════════
   DMCA / COPYRIGHT / CONFLICT CENTER
══════════════════════════════════════════════════════════════ */

/* ── Alert banner (top of page) ─────────────────────────────── */
.cfl-alert-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: rgba(222, 10, 38, .12);
    border: 1px solid rgba(222, 10, 38, .35);
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: .875rem;
    color: var(--text);
    line-height: 1.5;
}
.cfl-alert-icon {
    flex-shrink: 0;
    color: #DE0A26;
}

/* ── Frozen pill (page header right) ────────────────────────── */
.cfl-frozen-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .3);
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
    color: #EF4444;
    align-self: center;
    white-space: nowrap;
}

/* ── Frozen revenue banner ────────────────────────────────────── */
.cfl-frozen-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: rgba(239, 68, 68, .07);
    border: 1px solid rgba(239, 68, 68, .2);
    border-radius: 8px;
    font-size: .85rem;
    color: var(--text-2);
    margin-bottom: 20px;
    line-height: 1.5;
    flex-wrap: wrap;
}

/* ── Stat card strip ─────────────────────────────────────────── */
.cfl-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
@media (max-width: 900px) { .cfl-stats-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cfl-stats-strip { grid-template-columns: 1fr 1fr; } }

.cfl-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    transition: transform .18s, box-shadow .18s;
}
.cfl-stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.cfl-stat-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
}
.cfl-stat-card--red   .cfl-stat-icon { background: rgba(222,10,38,.15);   color: #DE0A26; }
.cfl-stat-card--amber .cfl-stat-icon { background: rgba(245,158,11,.15);   color: #F59E0B; }
.cfl-stat-card--blue  .cfl-stat-icon { background: rgba(99,102,241,.15);   color: #6366F1; }
.cfl-stat-card--green .cfl-stat-icon { background: rgba(16,185,129,.15);   color: #10B981; }

.cfl-stat-num {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--text);
}
.cfl-stat-label { font-size: .78rem; color: var(--text-3); margin-top: 4px; font-weight: 500; }
.cfl-stat-card--red   .cfl-stat-num { color: #DE0A26; }
.cfl-stat-card--amber .cfl-stat-num { color: #F59E0B; }
.cfl-stat-card--blue  .cfl-stat-num { color: #6366F1; }
.cfl-stat-card--green .cfl-stat-num { color: #10B981; }

/* ── Filter bar ──────────────────────────────────────────────── */
.cfl-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.cfl-filter-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 12px;
    flex: 1;
    min-width: 200px;
    color: var(--text-3);
}
.cfl-search-input {
    border: none;
    background: transparent;
    padding: 9px 0;
    font-size: .85rem;
    color: var(--text);
    width: 100%;
    outline: none;
    font-family: inherit;
}
.cfl-search-input::placeholder { color: var(--text-3); }

/* ── Conflict type badges ─────────────────────────────────────── */
.cfl-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}
.cfl-badge--dmca      { background: rgba(222,10,38,.15);  border: 1px solid rgba(222,10,38,.35);  color: #DE0A26; }
.cfl-badge--cid       { background: rgba(255,0,0,.10);    border: 1px solid rgba(255,0,0,.3);     color: #FF3333; }
.cfl-badge--fraud     { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.3);  color: #F59E0B; }
.cfl-badge--ownership { background: rgba(99,102,241,.12); border: 1px solid rgba(99,102,241,.3);  color: #6366F1; }

/* ── Status badges ───────────────────────────────────────────── */
.cfl-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: .73rem;
    font-weight: 600;
    white-space: nowrap;
}
.cfl-status--pending    { background: rgba(222,10,38,.12);   border: 1px solid rgba(222,10,38,.3);    color: #DE0A26; }
.cfl-status--review     { background: rgba(99,102,241,.12);  border: 1px solid rgba(99,102,241,.3);   color: #6366F1; }
.cfl-status--responded  { background: rgba(0,203,164,.10);   border: 1px solid rgba(0,203,164,.3);    color: #00CBA4; }
.cfl-status--escalated  { background: rgba(239,68,68,.12);   border: 1px solid rgba(239,68,68,.3);    color: #EF4444; }
.cfl-status--resolved   { background: rgba(16,185,129,.12);  border: 1px solid rgba(16,185,129,.3);   color: #10B981; }
.cfl-status--dismissed  { background: rgba(16,185,129,.10);  border: 1px solid rgba(16,185,129,.25);  color: #10B981; }

/* ── Table cells ─────────────────────────────────────────────── */
.cfl-table td { vertical-align: middle; }
.cfl-release-cell { display: flex; align-items: center; gap: 10px; }
.cfl-thumb { border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.cfl-release-name { font-weight: 600; font-size: .875rem; color: var(--text); }
.cfl-track-name   { font-size: .78rem; color: var(--text-3); margin-top: 2px; }
.cfl-dsp-pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 600;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    white-space: nowrap;
}
.cfl-frozen-val { color: #EF4444; font-weight: 700; font-size: .85rem; }

/* ── Explainer grid (bottom of index) ────────────────────────── */
.cfl-explainer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 20px;
}
@media (max-width: 900px) { .cfl-explainer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .cfl-explainer-grid { grid-template-columns: 1fr; } }

.cfl-explainer-card {
    padding: 18px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
}
.cfl-exp-hd {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: .875rem;
    margin-bottom: 10px;
}
.cfl-exp-body { font-size: .82rem; color: var(--text-3); line-height: 1.6; margin: 0; }

/* ════════════════════════════════════════════════════════════
   CONFLICT DETAIL PAGE
════════════════════════════════════════════════════════════ */

/* ── Breadcrumb ──────────────────────────────────────────────── */
.cfl-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: .83rem;
}
.cfl-bread-link {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--text-3);
    text-decoration: none;
    transition: color .15s;
}
.cfl-bread-link:hover { color: var(--accent); }
.cfl-bread-sep  { color: var(--border-2); }
.cfl-bread-cur  { color: var(--text-2); font-weight: 500; }

/* ── Hero card ───────────────────────────────────────────────── */
.cfl-hero-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 20px;
}
.cfl-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.cfl-hero-left { display: flex; flex-direction: column; gap: 6px; }
.cfl-hero-id   { font-size: .82rem; color: var(--text-3); }

/* ── Release info row ───────────────────────────────────────── */
.cfl-release-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--surface-2);
    border-radius: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.cfl-release-art   { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.cfl-release-info  { flex: 1; min-width: 0; }
.cfl-release-title { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.cfl-release-meta  {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
    font-size: .78rem;
    color: var(--text-3);
}
.cfl-dsp-info, .cfl-filed-info { flex-shrink: 0; }
.cfl-dsp-label { font-size: .72rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 3px; }
.cfl-dsp-name  { font-size: .875rem; font-weight: 600; color: var(--text); }

/* ── Status timeline bar ────────────────────────────────────── */
.cfl-timeline-bar {
    display: flex;
    align-items: flex-start;
    gap: 0;
    overflow-x: auto;
    padding-bottom: 4px;
}
.cfl-tstep {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 90px;
}
.cfl-tstep-dot {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2);
    border: 2px solid var(--border);
    color: var(--text-3);
    position: relative;
    z-index: 1;
}
.cfl-tstep-dot--done    { background: var(--teal);   border-color: var(--teal);   color: #fff; }
.cfl-tstep-dot--current { background: #6366F1;        border-color: #6366F1;        color: #fff; }
.cfl-tstep-pulse {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: white;
    animation: pulse-anim 1.4s ease-in-out infinite;
}
@keyframes pulse-anim {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(.65); opacity: .5; }
}
.cfl-tstep-body  { text-align: center; }
.cfl-tstep-label { font-size: .78rem; font-weight: 600; color: var(--text-2); }
.cfl-tstep-sub   { font-size: .7rem;  color: var(--text-3); margin-top: 2px; max-width: 90px; }
.cfl-tstep--future .cfl-tstep-label { color: var(--text-3); }
.cfl-tline-connector {
    flex: 1;
    height: 2px;
    background: var(--border);
    margin-top: 13px;
    min-width: 24px;
}
.cfl-tline-connector--done { background: var(--teal); }

/* ── Deadline banner ─────────────────────────────────────────── */
.cfl-deadline-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: .875rem;
    line-height: 1.55;
    margin-bottom: 20px;
    background: rgba(245,158,11,.10);
    border: 1px solid rgba(245,158,11,.35);
    color: #F59E0B;
}
.cfl-deadline-banner svg { flex-shrink: 0; margin-top: 1px; }
.cfl-deadline--warning  { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.4); }
.cfl-deadline--critical { background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.45); color: #EF4444; }

/* ── Detail grid ─────────────────────────────────────────────── */
.cfl-detail-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    align-items: start;
    margin-bottom: 20px;
}
@media (max-width: 1024px) { .cfl-detail-grid { grid-template-columns: 1fr; } }

/* ── KV (key-value) detail grid ─────────────────────────────── */
.cfl-detail-kv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}
@media (max-width: 640px) { .cfl-detail-kv-grid { grid-template-columns: 1fr; } }
.cfl-kv       { display: flex; flex-direction: column; gap: 4px; }
.cfl-kv--full { grid-column: 1 / -1; }
.cfl-kv-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); font-weight: 600; }
.cfl-kv-val   { font-size: .875rem; color: var(--text); line-height: 1.4; }
.cfl-mono     { font-family: monospace; font-size: .82rem; color: var(--text-2); }

/* ── Type-specific info boxes ───────────────────────────────── */
.cfl-dmca-notice, .cfl-cid-revenue-note, .cfl-fraud-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: .82rem;
    line-height: 1.6;
    color: var(--text-2);
}
.cfl-dmca-notice      { background: rgba(99,102,241,.08);  border: 1px solid rgba(99,102,241,.2); }
.cfl-dmca-notice svg  { flex-shrink: 0; color: #6366F1; margin-top: 1px; }
.cfl-cid-revenue-note { background: rgba(239,68,68,.07);   border: 1px solid rgba(239,68,68,.2); }
.cfl-cid-revenue-note svg { flex-shrink: 0; color: #EF4444; margin-top: 1px; }
.cfl-fraud-notice     { background: rgba(245,158,11,.08);  border: 1px solid rgba(245,158,11,.2); }
.cfl-fraud-notice svg { flex-shrink: 0; color: #F59E0B; margin-top: 1px; }

/* ── Stream chart ────────────────────────────────────────────── */
.cfl-stream-chart-wrap { margin: 16px 0; }
.cfl-stream-chart-title { font-size: .8rem; font-weight: 600; color: var(--text-3); margin-bottom: 10px; }

/* ── Ownership split comparison ─────────────────────────────── */
.cfl-split-compare {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-top: 16px;
    flex-wrap: wrap;
}
.cfl-split-col   { flex: 1; min-width: 160px; }
.cfl-split-hd    { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--teal); margin-bottom: 10px; }
.cfl-split-row   { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cfl-split-name  { font-size: .8rem; font-weight: 600; color: var(--text); min-width: 50px; }
.cfl-split-bar-wrap { flex: 1; height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.cfl-split-bar   { height: 100%; border-radius: 4px; transition: width .6s ease; }
.cfl-split-pct   { font-size: .8rem; font-weight: 700; color: var(--text); min-width: 36px; text-align: right; }
.cfl-split-arrow { color: var(--text-3); padding-top: 32px; flex-shrink: 0; }

/* ── Dispute workflow ────────────────────────────────────────── */
.cfl-dispute-responded { border: 1px solid rgba(16,185,129,.3); background: rgba(16,185,129,.05); }
.cfl-dispute-step-indicator {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-3);
    background: var(--surface-2);
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--border);
}

/* ── Dispute stepper (mini) ─────────────────────────────────── */
.cfl-dispute-stepper, .cfl-dispute-timeline-mini {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 20px 0;
    overflow-x: auto;
    padding-bottom: 4px;
}
.cfl-dts { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; }
.cfl-dts-dot {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-3);
    transition: background .2s, border-color .2s, color .2s;
}
.cfl-dts-dot.done    { background: var(--teal);  border-color: var(--teal);  color: #fff; font-size: .7rem; }
.cfl-dts-dot.current { background: var(--accent); border-color: var(--accent); color: #fff; }
.cfl-dts-label { font-size: .68rem; color: var(--text-3); font-weight: 500; text-align: center; max-width: 60px; }
.cfl-dts-line {
    flex: 1;
    height: 2px;
    background: var(--border);
    margin-top: 13px;
    min-width: 16px;
    transition: background .2s;
}
.cfl-dts-line.done { background: var(--teal); }

/* ── Dispute step panels ─────────────────────────────────────── */
.cfl-dstep-panel { padding-top: 8px; }
.cfl-dstep-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.cfl-dstep-body  { font-size: .875rem; color: var(--text-2); line-height: 1.6; margin-bottom: 4px; }

.cfl-acknowledge-box {
    padding: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-top: 12px;
}
.cfl-ack-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .875rem;
    color: var(--text);
    cursor: pointer;
    line-height: 1.55;
}
.cfl-ack-check input { margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); width: 16px; height: 16px; }

/* ── Dispute basis options ──────────────────────────────────── */
.cfl-dispute-options { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.cfl-dispute-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    font-size: .875rem;
    color: var(--text);
}
.cfl-dispute-opt:hover        { border-color: var(--accent); }
.cfl-dispute-opt.active       { border-color: var(--accent); background: rgba(222,10,38,.07); }
.cfl-dispute-opt-radio {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border-2);
    flex-shrink: 0;
    transition: border-color .15s;
}
.cfl-dispute-opt.active .cfl-dispute-opt-radio {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: inset 0 0 0 3px var(--surface-2);
}

/* ── Upload zone ─────────────────────────────────────────────── */
.cfl-upload-zone {
    border: 2px dashed var(--border-2);
    border-radius: 10px;
    padding: 32px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    margin-top: 12px;
}
.cfl-upload-zone:hover { border-color: var(--accent); background: rgba(222,10,38,.04); }
.cfl-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: .82rem;
    color: var(--text);
}
.cfl-file-name { flex: 0 0 auto; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfl-file-size { font-size: .75rem; color: var(--text-3); }

/* ── Guidance note ───────────────────────────────────────────── */
.cfl-guidance-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(0,203,164,.08);
    border: 1px solid rgba(0,203,164,.2);
    border-radius: 8px;
    font-size: .82rem;
    color: var(--teal);
    line-height: 1.55;
}
.cfl-guidance-note svg { flex-shrink: 0; margin-top: 1px; }

/* ── Review summary ──────────────────────────────────────────── */
.cfl-review-summary {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}
.cfl-review-row {
    display: flex;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    font-size: .875rem;
}
.cfl-review-row:last-child { border-bottom: none; }
.cfl-review-label { font-weight: 600; color: var(--text-3); min-width: 120px; flex-shrink: 0; }
.cfl-review-val   { color: var(--text); }
.cfl-submit-consent {
    padding: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
}

/* ── Revenue impact (right column) ──────────────────────────── */
.cfl-revenue-frozen-card {
    padding: 20px;
    background: rgba(239,68,68,.07);
    border-radius: 10px;
    border: 1px solid rgba(239,68,68,.2);
    text-align: center;
    margin-bottom: 16px;
}
.cfl-rev-amount { font-size: 2.2rem; font-weight: 800; color: #EF4444; letter-spacing: -.03em; margin-bottom: 4px; }
.cfl-rev-label  { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #EF4444; opacity: .7; margin-bottom: 10px; }
.cfl-rev-meta   { font-size: .78rem; color: var(--text-3); line-height: 1.5; margin-top: 6px; }

.cfl-revenue-ledger { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.cfl-rev-ledger-title {
    font-size: .72rem; font-weight: 700; color: var(--text-3);
    text-transform: uppercase; letter-spacing: .08em;
    padding: 8px 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.cfl-rev-ledger-row { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: .8rem; }
.cfl-rev-ledger-row:last-child { border-bottom: none; }
.cfl-rll-date   { color: var(--text-3); font-size: .75rem; white-space: nowrap; flex-shrink: 0; }
.cfl-rll-desc   { flex: 1; color: var(--text-2); }
.cfl-rll-amount { font-weight: 700; white-space: nowrap; }
.cfl-rll-amount.red   { color: #EF4444; }
.cfl-rll-amount.green { color: #10B981; }

/* ── Message thread ──────────────────────────────────────────── */
.cfl-messages-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 360px;
    overflow-y: auto;
    padding: 4px 0 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.cfl-msg {
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    border-top-left-radius: 4px;
    max-width: 92%;
}
.cfl-msg--artist {
    align-self: flex-end;
    background: rgba(99,102,241,.1);
    border-color: rgba(99,102,241,.25);
    border-top-left-radius: 10px;
    border-top-right-radius: 4px;
}
.cfl-msg-action-flag {
    font-size: .72rem;
    font-weight: 700;
    color: #F59E0B;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}
.cfl-msg-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cfl-msg-from   { font-size: .78rem; font-weight: 700; color: var(--text); }
.cfl-msg-time   { font-size: .72rem; color: var(--text-3); }
.cfl-msg-body   { font-size: .845rem; color: var(--text-2); line-height: 1.55; }
.cfl-msg-compose { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 4px; }

/* ── Audit timeline ──────────────────────────────────────────── */
.cfl-audit-timeline { display: flex; flex-direction: column; gap: 0; padding: 8px 0; }
.cfl-audit-entry {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    position: relative;
    padding-bottom: 20px;
}
.cfl-audit-entry:last-child { padding-bottom: 0; }
.cfl-audit-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-3);
    position: relative;
    z-index: 1;
}
.cfl-audit-icon--receive  { background: rgba(222,10,38,.1);  border-color: rgba(222,10,38,.3);  color: #DE0A26; }
.cfl-audit-icon--notify   { background: rgba(99,102,241,.1); border-color: rgba(99,102,241,.3); color: #6366F1; }
.cfl-audit-icon--view     { background: rgba(0,203,164,.1);  border-color: rgba(0,203,164,.3);  color: #00CBA4; }
.cfl-audit-icon--dispute  { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); color: #F59E0B; }
.cfl-audit-icon--assign   { background: rgba(139,92,246,.1); border-color: rgba(139,92,246,.3); color: #8B5CF6; }
.cfl-audit-icon--submit   { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.3); color: #10B981; }
.cfl-audit-icon--ack      { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.3); color: #10B981; }
.cfl-audit-icon--freeze   { background: rgba(239,68,68,.1);  border-color: rgba(239,68,68,.3);  color: #EF4444; }
.cfl-audit-icon--escalate { background: rgba(239,68,68,.1);  border-color: rgba(239,68,68,.3);  color: #EF4444; }
.cfl-audit-icon--deadline { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); color: #F59E0B; }

.cfl-audit-line {
    position: absolute;
    left: 16px;
    top: 32px;
    bottom: 0;
    width: 1px;
    background: var(--border);
}
.cfl-audit-entry:last-child .cfl-audit-line { display: none; }
.cfl-audit-body { flex: 1; min-width: 0; padding-top: 5px; }
.cfl-audit-ts   { font-size: .72rem; color: var(--text-3); margin-bottom: 4px; font-family: monospace; }
.cfl-audit-entry-text { font-size: .875rem; color: var(--text-2); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════
   AUTH PAGES  (login / signup)
══════════════════════════════════════════════════════════════ */

.auth-shell {
    display: flex;
    min-height: 100vh;
    overflow: hidden;
}

/* ── Left branding panel ────────────────────────────────────── */
.auth-brand-panel {
    flex: 0 0 480px;
    background: linear-gradient(160deg, #120006 0%, #0C0016 45%, #07070F 100%);
    border-right: 1px solid rgba(222,10,38,0.12);
    display: flex;
    flex-direction: column;
    padding: 48px 44px;
    position: relative;
    overflow: hidden;
}

.auth-brand-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.auth-brand-blob--1 {
    top: -120px; left: -80px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(222,10,38,0.18) 0%, transparent 65%);
}
.auth-brand-blob--2 {
    bottom: -100px; right: -80px;
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 65%);
}
.auth-brand-blob--3 {
    top: 45%; left: 10%;
    width: 280px; height: 180px;
    background: radial-gradient(ellipse, rgba(0,203,164,0.06) 0%, transparent 70%);
}

.auth-brand-logo {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 56px;
    position: relative;
    z-index: 1;
}

.auth-brand-logo-mark {
    width: 38px; height: 38px;
    background: var(--accent);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 28px rgba(222,10,38,0.4);
    flex-shrink: 0;
}

.auth-brand-logo-text {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.025em;
}
.auth-brand-logo-text span { color: var(--accent); }

.auth-brand-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.auth-brand-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.13em;
    margin-bottom: 12px;
}

.auth-brand-headline {
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.04em;
    line-height: 1.15;
    margin-bottom: 14px;
}

.auth-brand-headline span {
    background: linear-gradient(90deg, #DE0A26, #FF6B87, #A78BFA);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.auth-brand-tagline {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.65;
    margin-bottom: 40px;
    max-width: 360px;
}

/* Feature list */
.auth-brand-feats {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 44px;
}

.auth-brand-feat {
    display: flex;
    align-items: center;
    gap: 14px;
}

.auth-brand-feat-icon {
    width: 36px; height: 36px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.auth-brand-feat-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255,255,255,0.72);
    line-height: 1.4;
}

.auth-brand-feat-text strong {
    color: #fff;
    font-weight: 700;
}

/* Testimonial */
.auth-brand-testimonial {
    position: relative;
    z-index: 1;
    padding: 18px 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    backdrop-filter: blur(8px);
}

.auth-brand-quote {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.65;
    font-style: italic;
    margin-bottom: 12px;
}

.auth-brand-quote::before { content: '\201C'; }
.auth-brand-quote::after  { content: '\201D'; }

.auth-brand-attr {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-brand-attr-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #8B5CF6);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}

.auth-brand-attr-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
}

.auth-brand-attr-role {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.45);
}

/* DSP logos strip */
.auth-brand-dsps {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.auth-brand-dsp-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.04);
}

/* ── Right form panel ───────────────────────────────────────── */
.auth-form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    overflow-y: auto;
    background: var(--bg);
}

.auth-form-wrap {
    width: 100%;
    max-width: 420px;
}

/* Mobile-only logo row (hidden on desktop) */
.auth-mobile-logo {
    display: none;
    align-items: center;
    gap: 10px;
    margin-bottom: 32px;
}
.auth-mobile-logo-mark {
    width: 32px; height: 32px;
    background: var(--accent);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 18px rgba(222,10,38,0.35);
}
.auth-mobile-logo-text {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
}
.auth-mobile-logo-text span { color: var(--accent); }

.auth-heading {
    font-size: 1.625rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.03em;
    margin-bottom: 6px;
}

.auth-subheading {
    font-size: 0.875rem;
    color: var(--text-3);
    margin-bottom: 28px;
    line-height: 1.55;
}

.auth-subheading a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}
.auth-subheading a:hover { text-decoration: underline; }

/* Social login buttons */
.auth-socials {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.auth-social-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--r-md);
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
}
.auth-social-btn:hover {
    background: var(--surface-2);
    border-color: var(--border-2);
}

/* Divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* Input with icon */
.auth-input-wrap {
    position: relative;
}
.auth-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-3);
    pointer-events: none;
    display: flex;
    align-items: center;
}
.auth-input-wrap .form-input {
    padding-left: 38px;
}
.auth-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 2px;
    color: var(--text-3);
    cursor: pointer;
    display: flex; align-items: center;
    transition: color var(--transition);
}
.auth-password-toggle:hover { color: var(--text); }

/* Remember + forgot row */
.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    gap: 10px;
}
.auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--text-2);
    cursor: pointer;
    user-select: none;
}
.auth-remember input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.auth-forgot {
    font-size: 0.8125rem;
    color: var(--text-3);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition);
    white-space: nowrap;
}
.auth-forgot:hover { color: var(--accent); }

/* Submit button */
.auth-submit-btn {
    width: 100%;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 700;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: 0 4px 18px rgba(222,10,38,0.35);
    letter-spacing: -0.01em;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}
.auth-submit-btn:hover {
    background: var(--accent-hover);
    box-shadow: 0 4px 26px rgba(222,10,38,0.52);
    transform: translateY(-1px);
}
.auth-submit-btn:active { transform: translateY(0); }

/* Loading state */
.auth-submit-btn.loading {
    pointer-events: none;
    opacity: 0.75;
}

/* Switch link row */
.auth-switch {
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-3);
}
.auth-switch a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}
.auth-switch a:hover { text-decoration: underline; }

/* Error box */
.auth-error-box {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 14px;
    background: rgba(222,10,38,0.10);
    border: 1px solid rgba(222,10,38,0.3);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--accent);
    margin-bottom: 18px;
    line-height: 1.5;
}
.auth-error-box svg { flex-shrink: 0; margin-top: 1px; }

/* Success box */
.auth-success-box {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 14px;
    background: rgba(16,185,129,0.10);
    border: 1px solid rgba(16,185,129,0.3);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--success);
    margin-bottom: 18px;
    line-height: 1.5;
}

/* Account type selector */
.auth-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
}
.auth-type-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
    background: var(--surface);
    position: relative;
}
.auth-type-opt:hover { border-color: var(--border-2); }
.auth-type-opt input { position: absolute; opacity: 0; pointer-events: none; }
.auth-type-opt.active {
    border-color: var(--accent);
    background: var(--accent-dim);
}
.auth-type-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.06);
    transition: background var(--transition);
}
.auth-type-opt.active .auth-type-icon {
    background: rgba(222,10,38,0.15);
    color: var(--accent);
}
.auth-type-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text);
}
.auth-type-desc {
    font-size: 0.72rem;
    color: var(--text-3);
    line-height: 1.4;
}

/* Terms */
.auth-terms {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.8rem;
    color: var(--text-3);
    line-height: 1.55;
    margin-bottom: 20px;
    cursor: pointer;
}
.auth-terms input { accent-color: var(--accent); width: 15px; height: 15px; margin-top: 1px; flex-shrink: 0; cursor: pointer; }
.auth-terms a { color: var(--text-2); font-weight: 500; text-decoration: underline; }
.auth-terms a:hover { color: var(--accent); }

/* Password strength */
.auth-pw-strength { margin-top: 8px; }
.auth-pw-strength-track {
    display: flex;
    gap: 4px;
    margin-bottom: 5px;
}
.auth-pw-strength-bar {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: var(--border);
    transition: background 0.3s;
}
.auth-pw-strength-bar.weak   { background: #EF4444; }
.auth-pw-strength-bar.medium { background: #F59E0B; }
.auth-pw-strength-bar.strong { background: #10B981; }

.auth-pw-strength-label {
    font-size: 0.72rem;
    color: var(--text-3);
    transition: color 0.3s;
}
.auth-pw-strength-label.weak   { color: #EF4444; }
.auth-pw-strength-label.medium { color: #F59E0B; }
.auth-pw-strength-label.strong { color: #10B981; }

/* Footer note */
.auth-footer {
    margin-top: 32px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-3);
    line-height: 1.6;
}
.auth-footer a { color: var(--text-3); text-decoration: underline; }
.auth-footer a:hover { color: var(--text-2); }

/* Responsive: collapse brand panel on narrow screens */
@media (max-width: 1024px) {
    .auth-brand-panel { flex: 0 0 380px; }
}

@media (max-width: 860px) {
    .auth-shell { flex-direction: column; }
    .auth-brand-panel { display: none; }
    .auth-form-panel {
        padding: 32px 20px;
        align-items: flex-start;
    }
    .auth-form-wrap { max-width: 460px; margin: 0 auto; width: 100%; }
    .auth-mobile-logo { display: flex; }
}

@media (max-width: 480px) {
    .auth-form-panel { padding: 24px 16px; }
    .auth-heading { font-size: 1.4rem; }
    .auth-socials { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════
   ONBOARDING WIZARD
══════════════════════════════════════════════════════════════ */

.onb-shell {
    min-height: 100vh;
    background: var(--bg);
    display: flex;
    flex-direction: column;
}

/* ── Header ──────────────────────────────────────────────────── */
.onb-header {
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    padding: 0 40px;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 50;
}

.onb-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}
.onb-logo-mark {
    width: 32px; height: 32px;
    background: var(--accent);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 18px rgba(222,10,38,0.3);
}
.onb-logo-text {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
}
.onb-logo-text span { color: var(--accent); }

/* Step counter */
.onb-step-counter {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-3);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Progress bar track */
.onb-progress-wrap {
    flex: 1;
    display: flex;
    align-items: center;
}
.onb-progress-track {
    width: 100%;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}
.onb-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #FF4060);
    border-radius: 2px;
    transition: width 0.4s ease;
    box-shadow: 0 0 8px rgba(222,10,38,0.35);
}

/* Skip button */
.onb-skip-btn {
    background: none;
    border: none;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-3);
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    transition: color var(--transition), background var(--transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
}
.onb-skip-btn:hover { color: var(--text); background: rgba(255,255,255,0.05); }

@media (max-width: 640px) {
    .onb-header { padding: 0 16px; gap: 12px; }
    .onb-step-counter { display: none; }
}

/* ── Main content ─────────────────────────────────────────────── */
.onb-main {
    flex: 1;
    padding: 48px 24px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.onb-slide {
    width: 100%;
    max-width: 640px;
    animation: fadeIn 0.28s ease forwards;
    display: none;
}

.onb-slide.active { display: block; }

/* Step title row */
.onb-step-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.onb-step-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}

.onb-slide-title {
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.04em;
    margin-bottom: 8px;
}

.onb-slide-sub {
    font-size: 0.9rem;
    color: var(--text-3);
    line-height: 1.6;
    margin-bottom: 32px;
}

/* ── Genre grid ───────────────────────────────────────────────── */
.onb-genre-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin-top: 6px;
}

.onb-genre-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    background: var(--surface);
    transition: all var(--transition);
    text-align: center;
    position: relative;
}
.onb-genre-chip:hover { border-color: var(--border-2); }
.onb-genre-chip.selected {
    border-color: var(--accent);
    background: var(--accent-dim);
}
.onb-genre-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.onb-genre-emoji { font-size: 1.5rem; line-height: 1; }
.onb-genre-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-2);
}
.onb-genre-chip.selected .onb-genre-name { color: var(--accent); }

/* ── Avatar upload ────────────────────────────────────────────── */
.onb-avatar-section {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.onb-avatar-preview {
    flex-shrink: 0;
    position: relative;
}

.onb-avatar-img {
    width: 100px; height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #8B5CF6);
    border: 3px solid rgba(222,10,38,0.3);
    object-fit: cover;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    flex-shrink: 0;
}
.onb-avatar-img img { width: 100%; height: 100%; object-fit: cover; }

.onb-avatar-edit-btn {
    position: absolute;
    bottom: 0; right: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: background var(--transition);
    flex-shrink: 0;
}
.onb-avatar-edit-btn:hover { background: var(--accent-hover); }

.onb-avatar-meta {
    flex: 1;
    padding-top: 8px;
}
.onb-avatar-title { font-size: 0.875rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.onb-avatar-hint  { font-size: 0.78rem; color: var(--text-3); line-height: 1.5; margin-bottom: 12px; }

/* Cover art upload zone */
.onb-cover-zone {
    border: 2px dashed var(--border-2);
    border-radius: 12px;
    padding: 36px 24px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-md);
    background: var(--surface);
    position: relative;
    overflow: hidden;
    margin-top: 8px;
}
.onb-cover-zone:hover, .onb-cover-zone.drag { border-color: var(--accent); background: rgba(222,10,38,0.04); }
.onb-cover-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px;
    color: var(--text-3);
}
.onb-cover-title { font-size: 0.9rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.onb-cover-hint  { font-size: 0.78rem; color: var(--text-3); }
.onb-cover-preview {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
    display: none;
}

/* ── Plan picker (step 4) ─────────────────────────────────────── */
.onb-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 6px;
}

@media (max-width: 560px) { .onb-plan-grid { grid-template-columns: 1fr; } }

.onb-plan-card {
    padding: 20px;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    background: var(--surface);
    transition: all var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.onb-plan-card:hover { border-color: var(--border-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.onb-plan-card.selected {
    border-color: var(--accent);
    background: var(--accent-dim);
}
.onb-plan-card input { position: absolute; opacity: 0; pointer-events: none; }

.onb-plan-popular-badge {
    position: absolute;
    top: -1px; right: 16px;
    background: var(--accent);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 0 0 8px 8px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.onb-plan-icon {
    width: 36px; height: 36px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
}

.onb-plan-name {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 2px;
}

.onb-plan-price {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-bottom: 4px;
}
.onb-plan-currency { font-size: 0.95rem; font-weight: 700; color: var(--text-2); align-self: flex-start; margin-top: 4px; }
.onb-plan-amount   { font-size: 2rem; font-weight: 900; color: var(--text); letter-spacing: -0.04em; line-height: 1; }
.onb-plan-per      { font-size: 0.78rem; color: var(--text-3); }

.onb-plan-feats {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.onb-plan-feat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--text-2);
}
.onb-plan-feat-check {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--success-dim);
    color: var(--success);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.onb-plan-free-note {
    font-size: 0.78rem;
    color: var(--text-3);
    text-align: center;
    margin-top: 10px;
    line-height: 1.5;
}
.onb-plan-free-note a { color: var(--accent); text-decoration: none; }
.onb-plan-free-note a:hover { text-decoration: underline; }

/* ── Success screen ───────────────────────────────────────────── */
.onb-success {
    text-align: center;
    padding: 20px 0 40px;
}

.onb-success-icon {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--success), #059669);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 0 40px rgba(16,185,129,0.3);
    animation: popIn 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

@keyframes popIn {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.onb-success-confetti {
    font-size: 2.5rem;
    margin-bottom: 8px;
    display: block;
}

.onb-success-title {
    font-size: 2rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.04em;
    margin-bottom: 10px;
}

.onb-success-sub {
    font-size: 0.95rem;
    color: var(--text-3);
    line-height: 1.65;
    margin-bottom: 36px;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}

.onb-success-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.onb-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

.onb-checklist li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.875rem;
    color: var(--text-2);
}

.onb-checklist-dot {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--success-dim);
    color: var(--success);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ── Bottom nav row ───────────────────────────────────────────── */
.onb-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 36px;
    gap: 12px;
}

.onb-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border-radius: var(--r-md);
    font-size: 0.875rem;
    font-weight: 600;
    background: transparent;
    color: var(--text-3);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
}
.onb-back-btn:hover { color: var(--text); border-color: var(--border-2); background: rgba(255,255,255,0.04); }

.onb-next-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--r-md);
    font-size: 0.9375rem;
    font-weight: 700;
    background: var(--accent);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: 0 4px 18px rgba(222,10,38,0.35);
    letter-spacing: -0.01em;
    text-decoration: none;
}
.onb-next-btn:hover {
    background: var(--accent-hover);
    box-shadow: 0 4px 26px rgba(222,10,38,0.5);
    transform: translateY(-1px);
}

/* Country/language selects fullwidth */
.onb-select-wrap {
    position: relative;
}
.onb-select-wrap::after {
    content: '';
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--text-3);
    pointer-events: none;
}
.onb-select-wrap select {
    appearance: none;
}

/* Input hint row */
.onb-form-hint {
    font-size: 0.75rem;
    color: var(--text-3);
    margin-top: 5px;
    line-height: 1.5;
}

/* Profile preview card */
.onb-profile-preview {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 28px;
}
.onb-preview-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #8B5CF6);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}
.onb-preview-avatar img { width: 100%; height: 100%; object-fit: cover; }
.onb-preview-name  { font-size: 1rem; font-weight: 700; color: var(--text); }
.onb-preview-email { font-size: 0.78rem; color: var(--text-3); margin-top: 2px; }

/* Step indicator dots row (visible on mobile only below content) */
.onb-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 24px;
}
.onb-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--border-2);
    transition: all var(--transition);
}
.onb-dot.active {
    width: 22px;
    border-radius: 4px;
    background: var(--accent);
}

/* Responsive */
@media (max-width: 640px) {
    .onb-main { padding: 28px 16px 60px; }
    .onb-slide-title { font-size: 1.4rem; }
    .onb-avatar-section { flex-direction: column; }
    .onb-plan-grid { grid-template-columns: 1fr; }
}

/* ── Auth + Onboarding light theme overrides ─────────────────── */
[data-theme="light"] .auth-brand-panel {
    background: linear-gradient(160deg, #200010 0%, #0C0016 45%, #07070F 100%);
    /* keep dark always */
}
[data-theme="light"] .auth-form-panel    { background: var(--bg); }
[data-theme="light"] .auth-social-btn    { background: var(--surface); border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .auth-social-btn:hover { background: var(--surface-2); }
[data-theme="light"] .auth-type-opt      { background: var(--surface); border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .auth-type-opt.active { background: rgba(222,10,38,0.07); }
[data-theme="light"] .auth-type-icon     { background: rgba(0,0,0,0.06); }

[data-theme="light"] .onb-shell          { background: var(--bg); }
[data-theme="light"] .onb-header         { background: var(--surface); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .onb-progress-track { background: rgba(0,0,0,0.08); }
[data-theme="light"] .onb-genre-chip     { background: #fff; border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .onb-genre-chip.selected { background: rgba(222,10,38,0.07); }
[data-theme="light"] .onb-cover-zone     { background: #fff; border-color: rgba(0,0,0,0.15); }
[data-theme="light"] .onb-plan-card      { background: #fff; border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .onb-plan-card.selected { background: rgba(222,10,38,0.07); }
[data-theme="light"] .onb-profile-preview { background: #fff; border-color: rgba(0,0,0,0.10); }

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME
════════════════════════════════════════════════════════════════
   Applied via:  <html data-theme="light">
   Toggled by JS, persisted in localStorage (key: is-theme)
══════════════════════════════════════════════════════════════ */
[data-theme="light"] {
    --bg:          #F4F3F9;
    --bg-2:        #ECEAF3;
    --bg-3:        #E1DFEC;
    --surface:     #FFFFFF;
    --surface-2:   #F8F7FD;
    --surface-3:   #EEECF7;
    --text:        #0C0B14;
    --text-2:      #48465A;
    --text-3:      #8D8BA2;
    --border:      rgba(0,0,0,0.08);
    --border-2:    rgba(0,0,0,0.14);
    --shadow:      0 4px 20px rgba(60,40,100,0.10);
    --shadow-lg:   0 8px 40px rgba(60,40,100,0.16);
    --accent-dim:  rgba(222,10,38,0.09);
    --accent-glow: rgba(222,10,38,0.18);
    --teal-dim:    rgba(0,203,164,0.10);
    --danger-dim:  rgba(255,59,59,0.10);
    --warning-dim: rgba(245,158,11,0.10);
    --success-dim: rgba(16,185,129,0.10);
    --info-dim:    rgba(99,102,241,0.10);
}

[data-theme="light"] body { color-scheme: light; }

/* Form inputs */
[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea { color-scheme: light; }

/* Topbar */
[data-theme="light"] .topbar {
    background: rgba(244,243,249,0.92);
}

/* Nav hover / active (override hardcoded white-alpha) */
[data-theme="light"] .nav-item:hover { background: rgba(0,0,0,0.04); color: var(--text); }
[data-theme="light"] .sidebar-artist:hover { background: rgba(0,0,0,0.04); }

/* Topbar controls */
[data-theme="light"] .topbar-hamburger,
[data-theme="light"] .topbar-icon-btn { background: rgba(0,0,0,0.05); }
[data-theme="light"] .topbar-hamburger:hover,
[data-theme="light"] .topbar-icon-btn:hover { background: rgba(0,0,0,0.09); color: var(--text); }
[data-theme="light"] .topbar-avatar-btn { background: rgba(0,0,0,0.05); }
[data-theme="light"] .topbar-avatar-btn:hover { background: rgba(0,0,0,0.09); border-color: var(--border-2); }
[data-theme="light"] .topbar-badge { border-color: var(--bg); }

/* Dropdown */
[data-theme="light"] .topbar-dropdown-item:hover { background: rgba(0,0,0,0.04); color: var(--text); }

/* Buttons */
[data-theme="light"] .btn-secondary { background: rgba(0,0,0,0.06); }
[data-theme="light"] .btn-secondary:hover { background: rgba(0,0,0,0.10); border-color: var(--border-2); }
[data-theme="light"] .btn-ghost:hover { background: rgba(0,0,0,0.05); color: var(--text); }

/* Sidebar */
[data-theme="light"] .sidebar-logout-btn { background: rgba(0,0,0,0.05); }
[data-theme="light"] .sidebar-logout-btn:hover { background: var(--danger-dim); }

/* Cards */
[data-theme="light"] .card-glass {
    background: rgba(255,255,255,0.75);
    border-color: rgba(0,0,0,0.07);
}

/* Tables */
[data-theme="light"] .data-table td { border-bottom-color: rgba(0,0,0,0.05); }
[data-theme="light"] .data-table tbody tr:hover td { background: rgba(0,0,0,0.02); color: var(--text); }

/* Notifications */
[data-theme="light"] .notif-item:hover { background: rgba(0,0,0,0.03); }
[data-theme="light"] .notif-item.unread { background: rgba(222,10,38,0.04); }

/* Toggles */
[data-theme="light"] .toggle-track { background: rgba(0,0,0,0.15); }

/* Upload zone */
[data-theme="light"] .upload-zone:hover,
[data-theme="light"] .upload-zone.drag-over { background: rgba(222,10,38,0.04); }
[data-theme="light"] .upload-icon { background: rgba(0,0,0,0.06); }

/* Step wizard */
[data-theme="light"] .step-dot { background: rgba(0,0,0,0.06); }

/* Platform bars */
[data-theme="light"] .platform-bar { background: rgba(0,0,0,0.08); }

/* Overlays */
[data-theme="light"] .sidebar-overlay { background: rgba(0,0,0,0.50); }
[data-theme="light"] .modal-backdrop { background: rgba(0,0,0,0.50); }
[data-theme="light"] .modal-close { background: rgba(0,0,0,0.05); }
[data-theme="light"] .modal-close:hover { background: rgba(0,0,0,0.09); color: var(--text); }

/* Scrollbars */
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.14); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.22); }

/* Gradient components */
[data-theme="light"] .welcome-banner {
    background: linear-gradient(135deg, #FFE8ED 0%, #F5E6FF 50%, #E8E6FF 100%);
    border-color: rgba(222,10,38,0.15);
}

[data-theme="light"] .welcome-banner::before {
    background: radial-gradient(circle, rgba(222,10,38,0.10) 0%, transparent 70%);
}

[data-theme="light"] .welcome-banner::after {
    background: radial-gradient(ellipse, rgba(99,102,241,0.06) 0%, transparent 70%);
}

[data-theme="light"] .balance-card {
    background: linear-gradient(135deg, #FFDDE4 0%, #EFD9FF 60%, #D9D9FF 100%);
    border-color: rgba(222,10,38,0.20);
}

[data-theme="light"] .balance-card::before {
    background: radial-gradient(circle, rgba(222,10,38,0.10) 0%, transparent 70%);
}

[data-theme="light"] .balance-amount { color: #0C0B14; }

[data-theme="light"] .sidebar-plan-badge {
    background: linear-gradient(135deg, rgba(222,10,38,0.08), rgba(222,10,38,0.03));
}

/* Subscription page */
[data-theme="light"] .sub-hero {
    background: linear-gradient(135deg, #FFE8ED 0%, #F5E6FF 50%, #E8E6FF 100%);
    border-color: rgba(222,10,38,0.15);
}

[data-theme="light"] .sub-hero-blob--1 {
    background: radial-gradient(circle, rgba(222,10,38,0.10) 0%, transparent 70%);
}

[data-theme="light"] .sub-hero-blob--2 {
    background: radial-gradient(ellipse, rgba(99,102,241,0.06) 0%, transparent 70%);
}

[data-theme="light"] .sub-progress-track {
    background: rgba(0,0,0,0.08);
}

[data-theme="light"] .sub-plan-card {
    background: var(--surface-3);
}

[data-theme="light"] .sub-plan-card--active {
    background: rgba(222,10,38,0.06);
}

[data-theme="light"] .sub-receipt-btn {
    background: var(--surface-3);
}

/* Pricing page */
[data-theme="light"] .pricing-header {
    background: linear-gradient(135deg, #FFE8ED 0%, #F5E6FF 50%, #E8E6FF 100%);
    border-color: rgba(222,10,38,0.15);
}

[data-theme="light"] .pricing-header-blob--1 {
    background: radial-gradient(circle, rgba(222,10,38,0.10) 0%, transparent 70%);
}

[data-theme="light"] .pricing-header-blob--2 {
    background: radial-gradient(ellipse, rgba(99,102,241,0.06) 0%, transparent 70%);
}

[data-theme="light"] .pricing-toggle-wrap {
    background: rgba(0,0,0,0.05);
    border-color: var(--border-2);
}

[data-theme="light"] .pricing-toggle-opt--active {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}

[data-theme="light"] .pricing-card--popular {
    background: linear-gradient(160deg, rgba(222,10,38,0.04) 0%, var(--surface) 60%);
}

[data-theme="light"] .pricing-compare-row:hover td {
    background: rgba(0,0,0,0.02);
}

[data-theme="light"] .pricing-compare-cell.pricing-compare-current,
[data-theme="light"] .pricing-compare-plan-col.pricing-compare-current {
    background: rgba(222,10,38,0.03);
}

[data-theme="light"] .pricing-compare-x {
    background: rgba(0,0,0,0.05);
}

/* Royalties page */
[data-theme="light"] .ryl-stmt-card {
    background: var(--surface-3);
}

[data-theme="light"] .ryl-tab:hover { color: var(--text-2); }

/* Theme toggle icon visibility */
.theme-toggle-btn .icon-moon { display: none; }
.theme-toggle-btn .icon-sun  { display: flex; align-items: center; justify-content: center; }
[data-theme="light"] .theme-toggle-btn .icon-moon {
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-theme="light"] .theme-toggle-btn .icon-sun { display: none; }

/* Toolbox page */
[data-theme="light"] .toolbox-gate-banner {
    background: rgba(245,158,11,0.07);
    border-color: rgba(245,158,11,0.3);
}
[data-theme="light"] .toolbox-tag-check {
    background: #fff;
    border-color: rgba(0,0,0,0.12);
    color: var(--text-2);
}
[data-theme="light"] .toolbox-size-card {
    background: #fff;
    border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .toolbox-size-card.active {
    background: rgba(222,10,38,0.06);
}
[data-theme="light"] .toolbox-size-thumb {
    background: rgba(0,0,0,0.05);
}
[data-theme="light"] .toolbox-asset-preview {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.15);
}
[data-theme="light"] .toolbox-deal-card {
    background: #fff;
    border-color: rgba(0,0,0,0.10);
}
[data-theme="light"] .toolbox-deal-card--claimed {
    border-color: rgba(16,185,129,0.35);
    background: rgba(16,185,129,0.03);
}
[data-theme="light"] .toolbox-agreement-box {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .toolbox-radar-target {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .toolbox-radar-target.active {
    background: rgba(222,10,38,0.05);
    border-color: var(--accent);
}
[data-theme="light"] .radar-mood-chip {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.14);
    color: var(--text-2);
}
[data-theme="light"] .toolbox-step-dot {
    background: rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.18);
}

/* Bento grid */
[data-theme="light"] .tb-bento-card {
    background: #fff;
    border-color: rgba(0,0,0,0.10);
}
[data-theme="light"] .tb-bento-card:hover {
    border-color: rgba(0,0,0,0.22);
    box-shadow: 0 6px 24px rgba(0,0,0,0.10);
}
[data-theme="light"] .tb-bento-stat {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.12);
    color: var(--text-3);
}
[data-theme="light"] .tb-bento-arrow {
    background: rgba(0,0,0,0.06);
}
[data-theme="light"] .tb-bento-glow {
    background: radial-gradient(circle, rgba(222,10,38,0.07) 0%, transparent 70%);
}

/* SmartLink */
[data-theme="light"] .sl-prefix {
    background: var(--surface-3);
    border-color: rgba(0,0,0,0.15);
    color: var(--text-3);
}
[data-theme="light"] .sl-theme-opt--dark  { background: rgba(0,0,0,0.06); }
[data-theme="light"] .sl-theme-opt--light { background: rgba(0,0,0,0.02); }
[data-theme="light"] .sl-platform-check {
    background: #fff;
    border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .sl-phone {
    background: #F8F7FF;
    border-color: rgba(0,0,0,0.14);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
[data-theme="light"] .sl-qr-placeholder { color: rgba(0,0,0,0.35); }

/* Sidebar light scrollbar */
[data-theme="light"] .sidebar-nav {
    scrollbar-color: rgba(0,0,0,0.15) transparent;
}
[data-theme="light"] .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
}
[data-theme="light"] .sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.28);
}

/* ══════════════════════════════════════════════════════════════
   PAGE LAYOUT HELPERS
══════════════════════════════════════════════════════════════ */

/* Sidebar-panel layout (profile, kyc, releases/create) */
.layout-with-panel {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
}

/* Wallet main + settings panel */
.layout-wallet {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
}

/* Analytics dual column (2fr 1fr) */
.layout-split {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

/* Form field pairs — collapses earlier than page layout grids */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 1024px) {
    .layout-with-panel { grid-template-columns: 1fr; }
    .layout-wallet     { grid-template-columns: 1fr; }
    .layout-split      { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .form-grid-2 { grid-template-columns: 1fr; }
    .grid-2col   { gap: 14px; }
    .grid-3col   { gap: 14px; }
}

/* ── Conflict Center — light theme overrides ─────────────────── */
[data-theme="light"] .cfl-alert-banner  { background: rgba(222,10,38,.07); border-color: rgba(222,10,38,.25); }
[data-theme="light"] .cfl-frozen-banner { background: rgba(239,68,68,.05); border-color: rgba(239,68,68,.15); }
[data-theme="light"] .cfl-stat-card     { background: #fff; border-color: #E5E3EF; }
[data-theme="light"] .cfl-explainer-card { background: #fff; border-color: #E5E3EF; }
[data-theme="light"] .cfl-badge--dmca      { background: rgba(222,10,38,.10); }
[data-theme="light"] .cfl-badge--cid       { background: rgba(255,0,0,.07);   }
[data-theme="light"] .cfl-badge--fraud     { background: rgba(245,158,11,.10); }
[data-theme="light"] .cfl-badge--ownership { background: rgba(99,102,241,.08); }

[data-theme="light"] .cfl-hero-card     { background: #fff; border-color: #E5E3EF; }
[data-theme="light"] .cfl-release-hero  { background: #F4F3F9; }
[data-theme="light"] .cfl-tstep-dot     { background: #ECEAF3; border-color: #D1CEEA; }
[data-theme="light"] .cfl-tline-connector { background: #D1CEEA; }
[data-theme="light"] .cfl-deadline-banner { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.3); }
[data-theme="light"] .cfl-deadline--critical { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.3); }

[data-theme="light"] .cfl-detail-kv-grid { border-color: #E5E3EF; }
[data-theme="light"] .cfl-dmca-notice     { background: rgba(99,102,241,.06); border-color: rgba(99,102,241,.15); }
[data-theme="light"] .cfl-cid-revenue-note{ background: rgba(239,68,68,.05);  border-color: rgba(239,68,68,.15); }
[data-theme="light"] .cfl-fraud-notice    { background: rgba(245,158,11,.06); border-color: rgba(245,158,11,.2); }
[data-theme="light"] .cfl-guidance-note   { background: rgba(0,203,164,.06);  border-color: rgba(0,203,164,.15); }

[data-theme="light"] .cfl-filter-search { background: #F8F7FD; border-color: #E0DEEE; }
[data-theme="light"] .cfl-acknowledge-box { background: #F4F3F9; border-color: #DDD; }
[data-theme="light"] .cfl-dispute-opt    { background: #F8F7FD; border-color: #DDD; }
[data-theme="light"] .cfl-dispute-opt.active { background: rgba(222,10,38,.05); }
[data-theme="light"] .cfl-upload-zone   { border-color: #C8C6D9; }
[data-theme="light"] .cfl-upload-zone:hover { background: rgba(222,10,38,.03); border-color: var(--accent); }
[data-theme="light"] .cfl-file-item     { background: #F4F3F9; border-color: #E0DEEE; }
[data-theme="light"] .cfl-review-summary{ border-color: #E5E3EF; }
[data-theme="light"] .cfl-review-row    { border-color: #E5E3EF; }
[data-theme="light"] .cfl-submit-consent{ background: #F4F3F9; border-color: #E0DEEE; }

[data-theme="light"] .cfl-revenue-frozen-card { background: rgba(239,68,68,.05); border-color: rgba(239,68,68,.15); }
[data-theme="light"] .cfl-revenue-ledger { border-color: #E5E3EF; }
[data-theme="light"] .cfl-rev-ledger-row { border-color: #E5E3EF; }
[data-theme="light"] .cfl-rev-ledger-title { background: #F4F3F9; border-color: #E5E3EF; }

[data-theme="light"] .cfl-msg        { background: #F4F3F9; border-color: #E0DEEE; }
[data-theme="light"] .cfl-msg--artist{ background: rgba(99,102,241,.06); border-color: rgba(99,102,241,.15); }
[data-theme="light"] .cfl-msg-compose{ border-color: #E0DEEE; }
[data-theme="light"] .cfl-messages-thread { scrollbar-color: rgba(0,0,0,.1) transparent; }

[data-theme="light"] .cfl-audit-icon { background: #F4F3F9; border-color: #DDD; }
[data-theme="light"] .cfl-audit-line { background: #DDD; }
[data-theme="light"] .cfl-split-bar-wrap { background: #E5E3EF; }

[data-theme="light"] .cfl-dts-dot    { background: #ECEAF3; border-color: #C8C6D9; color: #8D8BA2; }
[data-theme="light"] .cfl-dts-line   { background: #D1CEEA; }

/* ══════════════════════════════════════════════════════════════
   ADMIN PANEL
══════════════════════════════════════════════════════════════ */

/* Admin accent override — amber/warning tone to distinguish from artist portal */
.admin-shell { --admin: #F59E0B; --admin-dim: rgba(245,158,11,.12); }

/* ── Admin sidebar variant ──────────────────────────────────── */
.admin-sidebar-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(245,158,11,.15);
    color: #F59E0B;
    border: 1px solid rgba(245,158,11,.3);
    border-radius: 20px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 2px 8px;
    text-transform: uppercase;
    margin-left: auto;
}
.admin-sidebar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}
.admin-sidebar-header-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(245,158,11,.15);
    color: #F59E0B;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ── Admin KPI stats row ────────────────────────────────────── */
.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.admin-kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    overflow: hidden;
    transition: border-color .2s;
}
.admin-kpi-card:hover { border-color: var(--border-2); }
.admin-kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--kpi-color, var(--accent));
}
.admin-kpi-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--kpi-dim, rgba(222,10,38,.12));
    color: var(--kpi-color, var(--accent));
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 4px;
}
.admin-kpi-value {
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: -.04em;
    color: var(--text);
    line-height: 1;
}
.admin-kpi-label {
    font-size: .78rem;
    color: var(--text-3);
    font-weight: 500;
}
.admin-kpi-delta {
    font-size: .73rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
}
.admin-kpi-delta--up   { color: var(--success); }
.admin-kpi-delta--down { color: var(--danger); }

/* ── Admin activity feed ────────────────────────────────────── */
.admin-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.admin-feed-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
}
.admin-feed-item:last-child { border-bottom: none; }
.admin-feed-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--surface-2);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--text-2);
    font-size: .9rem;
}
.admin-feed-body  { flex: 1; min-width: 0; }
.admin-feed-text  { font-size: .825rem; color: var(--text); line-height: 1.5; }
.admin-feed-time  { font-size: .72rem; color: var(--text-3); margin-top: 2px; }
.admin-feed-text strong { color: var(--text); }

/* ── Admin user row for tables ──────────────────────────────── */
.admin-user-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.admin-user-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--surface-2);
    overflow: hidden;
    flex-shrink: 0;
}
.admin-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-user-name  { font-weight: 600; font-size: .85rem; color: var(--text); }
.admin-user-email { font-size: .75rem; color: var(--text-3); }

/* ── Admin detail page header ───────────────────────────────── */
.admin-detail-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.admin-detail-avatar {
    width: 72px; height: 72px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface-2);
    flex-shrink: 0;
    border: 1px solid var(--border);
}
.admin-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-detail-name  { font-size: 1.25rem; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.admin-detail-meta  { font-size: .8rem; color: var(--text-3); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.admin-detail-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }

/* ── Admin release card ─────────────────────────────────────── */
.admin-release-art {
    width: 44px; height: 44px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--surface-2);
    flex-shrink: 0;
    border: 1px solid var(--border);
}
.admin-release-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Admin KYC doc viewer ───────────────────────────────────── */
.admin-kyc-doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin: 16px 0;
}
.admin-kyc-doc {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-2);
}
.admin-kyc-doc-img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    background: var(--surface-2);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-3);
}
.admin-kyc-doc-label {
    padding: 8px 12px;
    font-size: .75rem;
    color: var(--text-3);
    font-weight: 500;
    border-top: 1px solid var(--border);
}

/* ── Admin review action bar ────────────────────────────────── */
.admin-review-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.admin-review-bar-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text);
    flex: 1;
    min-width: 120px;
}

/* ── Admin bulk-action bar ──────────────────────────────────── */
.admin-bulk-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(245,158,11,.08);
    border: 1px solid rgba(245,158,11,.25);
    border-radius: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    transition: opacity .2s;
}
.admin-bulk-bar[hidden] { display: none; }
.admin-bulk-bar-count {
    font-size: .85rem;
    font-weight: 700;
    color: #F59E0B;
}

/* ── Admin search + filter bar ──────────────────────────────── */
.admin-filter-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.admin-search-wrap {
    position: relative;
    flex: 1;
    min-width: 180px;
}
.admin-search-icon {
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    color: var(--text-3);
    pointer-events: none;
}
.admin-search-input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: .85rem;
    outline: none;
    transition: border-color .2s;
}
.admin-search-input:focus { border-color: var(--accent); }
.admin-filter-select {
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: .85rem;
    outline: none;
    cursor: pointer;
    min-width: 130px;
}

/* ── Admin timeline / audit log ─────────────────────────────── */
.admin-timeline { display: flex; flex-direction: column; gap: 0; }
.admin-tl-item {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    position: relative;
}
.admin-tl-item:last-child { border-bottom: none; }
.admin-tl-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--border-2);
    margin-top: 5px;
    flex-shrink: 0;
}
.admin-tl-dot--success { background: var(--success); }
.admin-tl-dot--danger  { background: var(--danger); }
.admin-tl-dot--info    { background: var(--info); }
.admin-tl-dot--warning { background: var(--warning); }
.admin-tl-content  { flex: 1; }
.admin-tl-action   { font-size: .825rem; color: var(--text); font-weight: 600; }
.admin-tl-detail   { font-size: .78rem; color: var(--text-3); margin-top: 2px; }
.admin-tl-time     { font-size: .72rem; color: var(--text-3); margin-left: auto; white-space: nowrap; }

/* ── Admin notification composer ────────────────────────────── */
.admin-notif-target-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin: 10px 0;
}
.admin-notif-target {
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    text-align: center;
    transition: border-color .2s, background .2s;
}
.admin-notif-target:hover { border-color: var(--border-2); }
.admin-notif-target.active {
    border-color: var(--accent);
    background: rgba(222,10,38,.06);
}
.admin-notif-target-icon { font-size: 1.4rem; margin-bottom: 4px; }
.admin-notif-target-name { font-size: .78rem; font-weight: 600; color: var(--text); }
.admin-notif-target-desc { font-size: .7rem; color: var(--text-3); }

/* ── Admin settings sections ────────────────────────────────── */
.admin-settings-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 20px;
}
.admin-settings-section-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}
.admin-settings-section-title { font-size: .9rem; font-weight: 700; color: var(--text); }
.admin-settings-section-sub   { font-size: .78rem; color: var(--text-3); margin-top: 1px; }
.admin-settings-row {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    gap: 14px;
    flex-wrap: wrap;
}
.admin-settings-row:last-child { border-bottom: none; }
.admin-settings-row-label { flex: 1; }
.admin-settings-row-key   { font-size: .85rem; font-weight: 600; color: var(--text); }
.admin-settings-row-hint  { font-size: .75rem; color: var(--text-3); margin-top: 2px; }
.admin-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.admin-toggle {
    position: relative;
    width: 40px; height: 22px;
    flex-shrink: 0;
}
.admin-toggle input { display: none; }
.admin-toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--border-2);
    cursor: pointer;
    transition: background .2s;
}
.admin-toggle input:checked ~ .admin-toggle-track { background: var(--success); }
.admin-toggle-thumb {
    position: absolute;
    top: 3px; left: 3px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    transition: transform .2s;
    pointer-events: none;
}
.admin-toggle input:checked ~ .admin-toggle-thumb { transform: translateX(18px); }

/* ── Admin plan badge cells ─────────────────────────────────── */
.plan-badge-free   { background: rgba(107,114,128,.12); color: #9CA3AF; border: 1px solid rgba(107,114,128,.25); }
.plan-badge-artist { background: rgba(99,102,241,.12);  color: #818CF8; border: 1px solid rgba(99,102,241,.25); }
.plan-badge-artist_plus { background: rgba(222,10,38,.10); color: #F87171; border: 1px solid rgba(222,10,38,.2); }
.plan-badge-label  { background: rgba(0,203,164,.1);   color: #34D399; border: 1px solid rgba(0,203,164,.2); }

/* ── Admin payout status ────────────────────────────────────── */
.payout-status-pending   { background: rgba(245,158,11,.12); color: #F59E0B; border: 1px solid rgba(245,158,11,.3); }
.payout-status-processed { background: rgba(16,185,129,.1);  color: #10B981; border: 1px solid rgba(16,185,129,.25); }
.payout-status-failed    { background: rgba(222,10,38,.1);   color: #F87171; border: 1px solid rgba(222,10,38,.2); }
.payout-status-on_hold   { background: rgba(99,102,241,.1);  color: #818CF8; border: 1px solid rgba(99,102,241,.25); }

/* ── Responsive admin ───────────────────────────────────────── */
@media (max-width: 768px) {
    .admin-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-detail-actions { margin-left: 0; width: 100%; }
    .admin-filter-row { flex-direction: column; align-items: stretch; }
    .admin-search-wrap { min-width: 0; }
}
@media (max-width: 480px) {
    .admin-kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .admin-kpi-value { font-size: 1.4rem; }
}

/* ── Admin light theme ──────────────────────────────────────── */
[data-theme="light"] .admin-kpi-card       { background: #fff; border-color: #E5E3EF; }
[data-theme="light"] .admin-feed-item      { border-color: #E5E3EF; }
[data-theme="light"] .admin-detail-header  { background: #fff; border-color: #E5E3EF; }
[data-theme="light"] .admin-review-bar     { background: #fff; border-color: #E5E3EF; }
[data-theme="light"] .admin-bulk-bar       { background: rgba(245,158,11,.06); border-color: rgba(245,158,11,.2); }
[data-theme="light"] .admin-search-input   { background: #fff; border-color: #D9D7E7; color: #1A1824; }
[data-theme="light"] .admin-search-input:focus { border-color: var(--accent); }
[data-theme="light"] .admin-filter-select  { background: #fff; border-color: #D9D7E7; color: #1A1824; }
[data-theme="light"] .admin-kyc-doc        { background: #F4F3F9; border-color: #E0DEEE; }
[data-theme="light"] .admin-tl-item        { border-color: #E5E3EF; }
[data-theme="light"] .admin-settings-section       { background: #fff; border-color: #E5E3EF; }
[data-theme="light"] .admin-settings-section-header{ border-color: #E5E3EF; }
[data-theme="light"] .admin-settings-row           { border-color: #E5E3EF; }
[data-theme="light"] .admin-notif-target           { border-color: #D9D7E7; }
[data-theme="light"] .admin-notif-target:hover     { border-color: #B8B5D0; }


/* ══════════════════════════════════════════════════════════════════
   RELEASE SHOW PAGE — hero + main grid layout
══════════════════════════════════════════════════════════════════ */
.release-show-hero {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 28px;
    align-items: start;
}
.release-show-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: start;
}

/* collapse sidebar panel below 900px */
@media (max-width: 900px) {
    .release-show-grid { grid-template-columns: 1fr; }
}

/* stack hero + hide tracklist columns at 768px */
@media (max-width: 768px) {
    .release-show-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .release-show-hero > img {
        width: 140px !important;
        height: 140px !important;
        justify-self: center;
    }
    /* tracklist table — hide artist & ISRC columns */
    .track-col-artists,
    .track-col-isrc { display: none !important; }
}

/* hide explicit column on very small screens */
@media (max-width: 480px) {
    .track-col-explicit { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   GENERAL ARTIST PAGES — broad responsive improvements
══════════════════════════════════════════════════════════════════ */

/* Make all card tables horizontally scrollable on small screens */
@media (max-width: 768px) {
    .card { overflow-x: hidden; }
    .card .data-table-wrap,
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Page titles */
    .page-title,
    h1.page-title { font-size: 1.4rem !important; }

    /* stats-row — 2 cols at 768 */
    .stats-row { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }

    /* filter/action bar pill wrapping */
    .filter-bar,
    .page-actions { flex-wrap: wrap; gap: 8px; }

    /* Royalties overview bar */
    .ryl-top-grid { grid-template-columns: 1fr !important; }
}

/* 2-col stats => 1-col at 480 */
@media (max-width: 480px) {
    .stats-row { grid-template-columns: 1fr 1fr !important; gap: 8px; }
    .stats-card .stat-value { font-size: 1.4rem; }

    /* release card grid min-width reduction */
    .releases-card-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; }
}

/* single column everything at 360px */
@media (max-width: 360px) {
    .stats-row { grid-template-columns: 1fr !important; }
    .releases-card-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════════════
   TRACK DETAIL PAGE (.track-hero-grid / .track-detail-grid)
   — also defined in track.php but canonical copy lives here
══════════════════════════════════════════════════════════════════ */
.track-hero-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 24px;
    align-items: start;
}
.track-detail-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 900px) {
    .track-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .track-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .track-hero-grid img {
        justify-self: center;
    }
}