/* =============================================================
   BeatLab Studio — Redesign Design System
   Loaded AFTER Bootstrap + site.css to override safely.
   ============================================================= */

/* ===== DESIGN TOKENS ===== */
:root {
    /* Primary palette */
    --bls-primary: #8B5CF6;
    --bls-primary-dark: #7C3AED;
    --bls-secondary: #F97316;
    --bls-accent: #06B6D4;

    /* Backgrounds */
    --bls-bg-dark: #0F172A;
    --bls-bg-card: #1E293B;
    --bls-bg-surface: #162032;

    /* Text */
    --bls-text-main: #F8FAFC;
    --bls-text-muted: #94A3B8;

    /* Glass / borders */
    --bls-glass: rgba(255, 255, 255, 0.05);
    --bls-glass-border: rgba(255, 255, 255, 0.1);

    /* Shadows */
    --bls-shadow-primary: 0 10px 20px -5px rgba(139, 92, 246, 0.4);
    --bls-shadow-primary-hover: 0 15px 30px -5px rgba(139, 92, 246, 0.6);
    --bls-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.2);

    /* Radius */
    --bls-radius-sm: 8px;
    --bls-radius-md: 12px;
    --bls-radius-lg: 16px;
    --bls-radius-xl: 24px;

    /* Transitions */
    --bls-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Typography */
    --bls-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ===== GLOBAL OVERRIDES ===== */
body {
    background-color: var(--bls-bg-dark) !important;
    color: var(--bls-text-main) !important;
    font-family: var(--bls-font) !important;
    line-height: 1.6;
}

/* Override Bootstrap's white backgrounds */
.bg-white, .bg-light {
    background-color: var(--bls-bg-dark) !important;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
    color: var(--bls-text-main);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.gradient-text, .bls-gradient-text {
    background: linear-gradient(135deg, var(--bls-primary), var(--bls-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

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

a {
    color: var(--bls-primary);
    transition: color 0.3s;
}

a:hover {
    color: var(--bls-accent);
}

/* ===== NAVIGATION (Bootstrap navbar override) ===== */
.navbar {
    position: fixed !important;
    top: 0;
    width: 100%;
    padding: 1rem 0 !important;
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1050;
    border-bottom: 1px solid var(--bls-glass-border) !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

.navbar .navbar-brand {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    color: var(--bls-text-main) !important;
    text-decoration: none;
}

.navbar .navbar-brand:hover {
    color: var(--bls-text-main) !important;
}

.navbar .nav-link,
.navbar .nav-link.text-dark {
    color: var(--bls-text-muted) !important;
    font-weight: 500;
    transition: color 0.3s;
    border-radius: var(--bls-radius-sm);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--bls-primary) !important;
    background-color: rgba(139, 92, 246, 0.1) !important;
}

.navbar .nav-link.fw-semibold {
    color: var(--bls-primary) !important;
}

.navbar-toggler {
    border-color: var(--bls-glass-border) !important;
}

.navbar-toggler-icon {
    filter: invert(1);
}

/* Dropdown menus */
.dropdown-menu {
    background-color: var(--bls-bg-card) !important;
    border: 1px solid var(--bls-glass-border) !important;
    border-radius: var(--bls-radius-md) !important;
    box-shadow: var(--bls-shadow-card) !important;
    padding: 0.5rem !important;
}

.dropdown-item {
    color: var(--bls-text-muted) !important;
    border-radius: var(--bls-radius-sm) !important;
    transition: var(--bls-transition);
    padding: 0.5rem 1rem !important;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: rgba(139, 92, 246, 0.15) !important;
    color: var(--bls-text-main) !important;
}

.dropdown-item i {
    color: var(--bls-primary);
}

.dropdown-divider {
    border-color: var(--bls-glass-border) !important;
}

/* Navbar collapse on mobile — dark bg */
.navbar-collapse {
    background-color: transparent;
}

@media (max-width: 991.98px) {
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        background-color: var(--bls-bg-card);
        border-radius: var(--bls-radius-md);
        padding: 1rem;
        margin-top: 0.5rem;
    }
}

/* ===== BODY OFFSET FOR FIXED NAV ===== */
body {
    padding-top: 76px;
}

/* ===== MAIN CONTENT ===== */
main[role="main"], main {
    background-color: var(--bls-bg-dark);
    min-height: calc(100vh - 200px);
}

/* ===== FOOTER ===== */
footer, .footer {
    padding: 2rem 0 !important;
    border-top: 1px solid var(--bls-glass-border) !important;
    background-color: var(--bls-bg-dark) !important;
    color: var(--bls-text-muted) !important;
}

.footer-content, .footer .row {
    color: var(--bls-text-muted);
}

.footer a, .footer-links a {
    color: var(--bls-text-muted) !important;
    transition: color 0.3s;
}

.footer a:hover, .footer-links a:hover {
    color: var(--bls-primary) !important;
}

/* ===== BUTTONS ===== */
/* Primary button — gradient purple */
.btn-primary, .bls-btn-primary {
    background: linear-gradient(135deg, var(--bls-primary), var(--bls-primary-dark)) !important;
    border: none !important;
    color: #fff !important;
    border-radius: var(--bls-radius-md) !important;
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    box-shadow: var(--bls-shadow-primary);
    transition: var(--bls-transition);
}

.btn-primary:hover, .bls-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--bls-shadow-primary-hover);
    background: linear-gradient(135deg, var(--bls-primary), var(--bls-primary-dark)) !important;
}

.btn-primary:focus, .btn-primary:active {
    box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.5) !important;
    background: linear-gradient(135deg, var(--bls-primary), var(--bls-primary-dark)) !important;
}

/* Outline button — glass style */
.btn-outline-primary {
    background: var(--bls-glass) !important;
    color: var(--bls-text-main) !important;
    border: 1px solid var(--bls-glass-border) !important;
    border-radius: var(--bls-radius-md) !important;
    font-weight: 600;
    transition: var(--bls-transition);
}

.btn-outline-primary:hover {
    background: var(--bls-glass-border) !important;
    color: var(--bls-text-main) !important;
    border-color: var(--bls-primary) !important;
}

/* Secondary button */
.btn-secondary {
    background: var(--bls-bg-card) !important;
    border: 1px solid var(--bls-glass-border) !important;
    color: var(--bls-text-main) !important;
    border-radius: var(--bls-radius-md) !important;
    transition: var(--bls-transition);
}

.btn-secondary:hover {
    background: var(--bls-glass-border) !important;
    border-color: var(--bls-primary) !important;
}

/* Success / Danger / Warning / Info buttons */
.btn-success {
    background: linear-gradient(135deg, #059669, #10B981) !important;
    border: none !important;
    border-radius: var(--bls-radius-md) !important;
}

.btn-danger {
    background: linear-gradient(135deg, #DC2626, #EF4444) !important;
    border: none !important;
    border-radius: var(--bls-radius-md) !important;
}

.btn-warning {
    background: linear-gradient(135deg, #D97706, var(--bls-secondary)) !important;
    border: none !important;
    border-radius: var(--bls-radius-md) !important;
    color: #fff !important;
}

.btn-info {
    background: linear-gradient(135deg, #0891B2, var(--bls-accent)) !important;
    border: none !important;
    border-radius: var(--bls-radius-md) !important;
    color: #fff !important;
}

/* Outline variants */
.btn-outline-secondary {
    background: transparent !important;
    color: var(--bls-text-muted) !important;
    border: 1px solid var(--bls-glass-border) !important;
    border-radius: var(--bls-radius-md) !important;
}

.btn-outline-secondary:hover {
    background: var(--bls-glass) !important;
    color: var(--bls-text-main) !important;
}

.btn-outline-success {
    color: #10B981 !important;
    border-color: #10B981 !important;
    border-radius: var(--bls-radius-md) !important;
    background: transparent !important;
}

.btn-outline-danger {
    color: #EF4444 !important;
    border-color: #EF4444 !important;
    border-radius: var(--bls-radius-md) !important;
    background: transparent !important;
}

.btn-outline-warning {
    color: var(--bls-secondary) !important;
    border-color: var(--bls-secondary) !important;
    border-radius: var(--bls-radius-md) !important;
    background: transparent !important;
}

.btn-outline-info {
    color: var(--bls-accent) !important;
    border-color: var(--bls-accent) !important;
    border-radius: var(--bls-radius-md) !important;
    background: transparent !important;
}

/* Link button */
.btn-link {
    color: var(--bls-primary) !important;
    text-decoration: none !important;
}

.btn-link:hover {
    color: var(--bls-accent) !important;
}

/* ===== CARDS ===== */
.card {
    background: var(--bls-bg-card) !important;
    border: 1px solid var(--bls-glass-border) !important;
    border-radius: var(--bls-radius-xl) !important;
    transition: transform 0.3s;
    color: var(--bls-text-main);
}

.card:hover {
    transform: translateY(-3px);
}

.card-header {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid var(--bls-glass-border) !important;
    color: var(--bls-text-main) !important;
    border-radius: var(--bls-radius-xl) var(--bls-radius-xl) 0 0 !important;
}

.card-body {
    color: var(--bls-text-main);
}

.card-footer {
    background: rgba(255, 255, 255, 0.02) !important;
    border-top: 1px solid var(--bls-glass-border) !important;
}

.card-title {
    color: var(--bls-text-main) !important;
}

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

/* ===== FORMS ===== */
.form-control, .form-select {
    background-color: var(--bls-bg-card) !important;
    border: 1px solid var(--bls-glass-border) !important;
    color: var(--bls-text-main) !important;
    border-radius: var(--bls-radius-md) !important;
    transition: var(--bls-transition);
}

.form-control:focus, .form-select:focus {
    background-color: var(--bls-bg-surface) !important;
    border-color: var(--bls-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.25) !important;
    color: var(--bls-text-main) !important;
}

.form-control::placeholder {
    color: var(--bls-text-muted) !important;
    opacity: 0.7;
}

.form-label, label {
    color: var(--bls-text-main) !important;
    font-weight: 500;
}

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

.form-check-input {
    background-color: var(--bls-bg-card) !important;
    border-color: var(--bls-glass-border) !important;
}

.form-check-input:checked {
    background-color: var(--bls-primary) !important;
    border-color: var(--bls-primary) !important;
}

.form-check-label {
    color: var(--bls-text-muted) !important;
}

/* Input groups */
.input-group-text {
    background-color: var(--bls-bg-surface) !important;
    border: 1px solid var(--bls-glass-border) !important;
    color: var(--bls-text-muted) !important;
}

/* Validation */
.valid-feedback { color: #10B981 !important; }
.invalid-feedback { color: #EF4444 !important; }

.form-control.is-valid {
    border-color: #10B981 !important;
}

.form-control.is-invalid {
    border-color: #EF4444 !important;
}

/* ===== TABLES ===== */
.table {
    color: var(--bls-text-main) !important;
    --bs-table-bg: transparent;
    --bs-table-color: var(--bls-text-main);
}

.table > thead {
    background-color: var(--bls-bg-surface) !important;
}

.table > thead th {
    color: var(--bls-text-muted) !important;
    border-bottom: 1px solid var(--bls-glass-border) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

.table > tbody > tr {
    border-bottom: 1px solid var(--bls-glass-border);
    transition: background-color 0.2s;
}

.table > tbody > tr:hover {
    background-color: rgba(139, 92, 246, 0.05) !important;
}

.table > tbody td {
    color: var(--bls-text-main);
    border-bottom-color: var(--bls-glass-border) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
}

.table-bordered {
    border-color: var(--bls-glass-border) !important;
}

.table-bordered td, .table-bordered th {
    border-color: var(--bls-glass-border) !important;
}

/* ===== ALERTS ===== */
.alert {
    border-radius: var(--bls-radius-md) !important;
    border: 1px solid var(--bls-glass-border) !important;
}

.alert-success {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #6EE7B7 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: #FCA5A5 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

.alert-warning {
    background-color: rgba(249, 115, 22, 0.1) !important;
    color: #FDBA74 !important;
    border-color: rgba(249, 115, 22, 0.3) !important;
}

.alert-info {
    background-color: rgba(6, 182, 212, 0.1) !important;
    color: #67E8F9 !important;
    border-color: rgba(6, 182, 212, 0.3) !important;
}

.alert-primary {
    background-color: rgba(139, 92, 246, 0.1) !important;
    color: #C4B5FD !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}

/* ===== BADGES ===== */
.badge {
    border-radius: var(--bls-radius-sm) !important;
    font-weight: 600;
}

.badge.bg-primary, .badge.text-bg-primary {
    background-color: rgba(139, 92, 246, 0.2) !important;
    color: #C4B5FD !important;
}

.badge.bg-success, .badge.text-bg-success {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #6EE7B7 !important;
}

.badge.bg-danger, .badge.text-bg-danger {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #FCA5A5 !important;
}

.badge.bg-warning, .badge.text-bg-warning {
    background-color: rgba(249, 115, 22, 0.2) !important;
    color: #FDBA74 !important;
}

.badge.bg-info, .badge.text-bg-info {
    background-color: rgba(6, 182, 212, 0.2) !important;
    color: #67E8F9 !important;
}

.badge.bg-secondary, .badge.text-bg-secondary {
    background-color: rgba(148, 163, 184, 0.2) !important;
    color: var(--bls-text-muted) !important;
}

.badge.bg-dark {
    background-color: var(--bls-bg-surface) !important;
    color: var(--bls-text-main) !important;
}

.badge.bg-light {
    background-color: var(--bls-glass) !important;
    color: var(--bls-text-main) !important;
}

/* ===== MODALS ===== */
.modal-content {
    background-color: var(--bls-bg-card) !important;
    border: 1px solid var(--bls-glass-border) !important;
    border-radius: var(--bls-radius-lg) !important;
    color: var(--bls-text-main);
}

.modal-header {
    border-bottom: 1px solid var(--bls-glass-border) !important;
}

.modal-header .modal-title {
    color: var(--bls-text-main) !important;
}

.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.modal-footer {
    border-top: 1px solid var(--bls-glass-border) !important;
}

.modal-backdrop.show {
    opacity: 0.7;
}

/* ===== BREADCRUMBS ===== */
.breadcrumb {
    background: transparent !important;
    padding: 0.5rem 0;
}

.breadcrumb-item a {
    color: var(--bls-primary) !important;
}

.breadcrumb-item.active {
    color: var(--bls-text-muted) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--bls-text-muted) !important;
}

/* ===== PAGINATION ===== */
.page-link {
    background-color: var(--bls-bg-card) !important;
    border-color: var(--bls-glass-border) !important;
    color: var(--bls-text-muted) !important;
    border-radius: var(--bls-radius-sm) !important;
    transition: var(--bls-transition);
}

.page-link:hover {
    background-color: rgba(139, 92, 246, 0.15) !important;
    color: var(--bls-primary) !important;
    border-color: var(--bls-primary) !important;
}

.page-item.active .page-link {
    background: linear-gradient(135deg, var(--bls-primary), var(--bls-primary-dark)) !important;
    border-color: var(--bls-primary) !important;
    color: #fff !important;
}

.page-item.disabled .page-link {
    background-color: var(--bls-bg-surface) !important;
    color: rgba(148, 163, 184, 0.4) !important;
}

/* ===== PROGRESS BARS ===== */
.progress {
    background-color: var(--bls-bg-surface) !important;
    border-radius: var(--bls-radius-sm) !important;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(135deg, var(--bls-primary), var(--bls-accent)) !important;
}

/* ===== LIST GROUPS ===== */
.list-group-item {
    background-color: var(--bls-bg-card) !important;
    border-color: var(--bls-glass-border) !important;
    color: var(--bls-text-main) !important;
}

.list-group-item:hover {
    background-color: var(--bls-bg-surface) !important;
}

.list-group-item.active {
    background: linear-gradient(135deg, var(--bls-primary), var(--bls-primary-dark)) !important;
    border-color: var(--bls-primary) !important;
}

/* ===== ACCORDION ===== */
.accordion-item {
    background-color: var(--bls-bg-card) !important;
    border-color: var(--bls-glass-border) !important;
}

.accordion-button {
    background-color: var(--bls-bg-card) !important;
    color: var(--bls-text-main) !important;
}

.accordion-button:not(.collapsed) {
    background-color: var(--bls-bg-surface) !important;
    color: var(--bls-primary) !important;
}

.accordion-button::after {
    filter: invert(1);
}

/* ===== TABS / NAV PILLS ===== */
.nav-tabs {
    border-bottom-color: var(--bls-glass-border) !important;
}

.nav-tabs .nav-link {
    color: var(--bls-text-muted) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    transition: var(--bls-transition);
}

.nav-tabs .nav-link:hover {
    color: var(--bls-primary) !important;
    border-bottom-color: var(--bls-primary) !important;
    background: transparent !important;
}

.nav-tabs .nav-link.active {
    color: var(--bls-primary) !important;
    background: transparent !important;
    border-bottom: 2px solid var(--bls-primary) !important;
}

.nav-pills .nav-link {
    color: var(--bls-text-muted) !important;
    border-radius: var(--bls-radius-md) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: linear-gradient(135deg, var(--bls-primary), var(--bls-primary-dark)) !important;
    color: #fff !important;
}

/* ===== TOOLTIPS ===== */
.tooltip-inner {
    background-color: var(--bls-bg-card) !important;
    border: 1px solid var(--bls-glass-border);
    border-radius: var(--bls-radius-sm) !important;
    color: var(--bls-text-main) !important;
}

/* ===== INNER PAGE HEADER ===== */
.bls-page-header {
    padding: 3rem 0 2rem;
    background: linear-gradient(to bottom, var(--bls-bg-surface), var(--bls-bg-dark));
    border-bottom: 1px solid var(--bls-glass-border);
    margin-bottom: 2rem;
}

.bls-page-header h1 {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.bls-page-header p {
    color: var(--bls-text-muted);
    font-size: 1.1rem;
    margin-bottom: 0;
}

.bls-page-header .bls-page-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* ===== INNER PAGE CONTENT AREA ===== */
.bls-content-area {
    padding-bottom: 4rem;
}

/* ===== WIDGET (sidebar / info boxes) ===== */
.bls-widget {
    background: var(--bls-bg-card);
    border: 1px solid var(--bls-glass-border);
    border-radius: var(--bls-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* ===== CONTAINER OVERRIDE ===== */
/* Keep Bootstrap container widths but ensure redesign max-width on non-fluid */
.container:not(.container-fluid) {
    max-width: 1200px;
}

/* ===== UTILITY CLASSES ===== */
.bls-glass-bg {
    background: var(--bls-glass);
}

.bls-card-bg {
    background: var(--bls-bg-card);
}

.bls-surface-bg {
    background: var(--bls-bg-surface);
}

.bls-border {
    border: 1px solid var(--bls-glass-border);
}

.bls-rounded {
    border-radius: var(--bls-radius-lg);
}

/* ===== MISC BOOTSTRAP OVERRIDES ===== */
/* Border colors */
.border, .border-top, .border-bottom, .border-start, .border-end {
    border-color: var(--bls-glass-border) !important;
}

/* Text utilities */
.text-dark {
    color: var(--bls-text-main) !important;
}

.text-body {
    color: var(--bls-text-main) !important;
}

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

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

/* Background utilities */
.bg-body, .bg-body-tertiary {
    background-color: var(--bls-bg-dark) !important;
}

/* Spinner */
.spinner-border {
    color: var(--bls-primary);
}

/* Horizontal rule */
hr {
    border-color: var(--bls-glass-border);
    opacity: 0.5;
}

/* Selection */
::selection {
    background: rgba(139, 92, 246, 0.3);
    color: var(--bls-text-main);
}

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

::-webkit-scrollbar-track {
    background: var(--bls-bg-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--bls-bg-card);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bls-text-muted);
}

/* ===== FLOATING ACTION BUTTONS ===== */
.btn-lg.rounded-circle {
    background: linear-gradient(135deg, var(--bls-primary), var(--bls-primary-dark)) !important;
    border: none !important;
    box-shadow: var(--bls-shadow-primary);
}

.btn-lg.rounded-circle:hover {
    box-shadow: var(--bls-shadow-primary-hover);
}

/* ===== SUBSCRIPTION STATUS BUTTON ===== */
.subscription-status-wrapper .btn {
    border-radius: var(--bls-radius-md) !important;
}

/* ===== AUDIO PLAYER PROTECTION ===== */
/* Ensure audio players, waveforms, and duration UI are not broken */
audio {
    border-radius: var(--bls-radius-sm);
}

/* WaveSurfer containers should keep their own styling */
[id*="waveform"], .wavesurfer-container {
    color: inherit;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .bls-page-header h1 {
        font-size: 1.75rem;
    }

    .bls-page-header .bls-page-actions {
        flex-direction: column;
    }

    body {
        padding-top: 68px;
    }
}

@media (max-width: 576px) {
    .bls-page-header {
        padding: 2rem 0 1.5rem;
    }

    .bls-page-header h1 {
        font-size: 1.5rem;
    }
}

/* ===== HOME PAGE REDESIGN STYLES ===== */
/* These apply only when the home page uses redesign markup */
.bls-hero {
    padding-top: 6rem;
    text-align: center;
    position: relative;
}

.bls-hero::before {
    content: '';
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

.bls-hero h1 {
    font-size: 4.5rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.bls-hero p.bls-hero-subtitle {
    font-size: 1.25rem;
    color: var(--bls-text-muted);
    max-width: 600px;
    margin: 0 auto 2.5rem;
}

.bls-hero-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 3rem;
}

.bls-trust-badges {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 3rem;
    opacity: 0.6;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* Redesign grid */
.bls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* Redesign section */
.bls-section {
    padding: 6rem 0;
}

.bls-section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.bls-section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.bls-section-header p {
    max-width: 600px;
    margin: 0 auto;
}

/* Glass section background */
.bls-glass-section {
    background: var(--bls-glass);
}

/* Pricing card redesign */
.bls-pricing-card {
    position: relative;
    overflow: hidden;
}

.bls-pricing-card.popular {
    border: 2px solid var(--bls-primary) !important;
}

.bls-popular-tag {
    position: absolute;
    top: 1rem;
    right: -2rem;
    background: var(--bls-primary);
    padding: 0.25rem 3rem;
    transform: rotate(45deg);
    font-size: 0.75rem;
    font-weight: bold;
    color: #fff;
}

@media (max-width: 768px) {
    .bls-hero h1 {
        font-size: 2.5rem;
    }

    .bls-hero-btns {
        flex-direction: column;
        align-items: center;
    }

    .bls-trust-badges {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    .bls-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================
   HOMEPAGE — Dark Theme Overrides for existing styles.css classes
   These override the light-theme homepage classes so Index.cshtml
   renders correctly without rewriting all its markup.
   ============================================================= */

/* Override styles.css :root light-theme variables when redesign is active */
:root {
    --primary-color: #8B5CF6;
    --primary-color-alt: #A855F7;
    --secondary-color: #F97316;
    --accent-color: #06B6D4;
    --text-color: #F8FAFC;
    --text-color-light: #94A3B8;
    --white-color: #F8FAFC;
    --black-color: #000000;
    --body-color: #0F172A;
    --container-color: #1E293B;
    --border-color: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(139, 92, 246, 0.2);
    --gradient: linear-gradient(135deg, #8B5CF6, #F97316);
}

/* Header / Nav from styles.css — override to dark */
.header {
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(12px);
}

.header.scroll-header {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3) !important;
}

.nav__logo, .nav__link {
    color: var(--bls-text-main) !important;
}

.nav__link:hover, .nav__link.active-link {
    color: var(--bls-primary) !important;
}

/* Hero section — dark bg */
.hero {
    background-color: var(--bls-bg-dark);
}

.hero__title {
    color: var(--bls-text-main);
}

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

.hero__stat-number {
    color: var(--bls-primary) !important;
}

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

/* Hero video container */
.hero__video-container {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
}

/* Floating cards — dark glass */
.floating-card {
    background: var(--bls-bg-card) !important;
    border: 1px solid var(--bls-glass-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    color: var(--bls-text-main);
}

.floating-card__text {
    color: var(--bls-text-main) !important;
}

/* Buttons from styles.css */
.button {
    border-radius: var(--bls-radius-md) !important;
    transition: var(--bls-transition);
}

.button--primary {
    background: linear-gradient(135deg, var(--bls-primary), var(--bls-primary-dark)) !important;
    color: #fff !important;
    box-shadow: var(--bls-shadow-primary);
}

.button--primary:hover {
    box-shadow: var(--bls-shadow-primary-hover);
}

.button--secondary {
    background: transparent !important;
    color: var(--bls-primary) !important;
    border-color: var(--bls-primary) !important;
}

.button--secondary:hover {
    background: var(--bls-primary) !important;
    color: #fff !important;
}

/* Features section — dark */
.features {
    background: var(--bls-bg-surface) !important;
}

.feature__card {
    background: var(--bls-bg-card) !important;
    border-color: var(--bls-glass-border) !important;
    color: var(--bls-text-main);
}

.feature__card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
}

.feature__title {
    color: var(--bls-text-main) !important;
}

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

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

.feature__list li::before {
    color: var(--bls-accent) !important;
}

/* Section headers */
.section__title {
    color: var(--bls-text-main) !important;
}

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

/* Ecosystem section — dark */
.ecosystem {
    background: var(--bls-bg-surface) !important;
}

.ecosystem__card {
    background: var(--bls-bg-card) !important;
    border: 1px solid var(--bls-glass-border) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

.ecosystem__card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
}

.ecosystem__card--creators {
    border-left: 5px solid var(--bls-primary) !important;
}

.ecosystem__card--advertisers {
    border-left: 5px solid var(--bls-accent) !important;
}

.ecosystem__title {
    color: var(--bls-text-main) !important;
}

.ecosystem__subtitle {
    color: var(--bls-primary) !important;
}

.ecosystem__card--advertisers .ecosystem__subtitle {
    color: var(--bls-accent) !important;
}

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

.ecosystem__benefits li {
    color: var(--bls-text-muted) !important;
    border-bottom-color: var(--bls-glass-border) !important;
}

.ecosystem__stat-number {
    color: var(--bls-primary) !important;
}

.ecosystem__card--advertisers .ecosystem__stat-number {
    color: var(--bls-accent) !important;
}

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

.ecosystem__cta {
    background: var(--bls-bg-card) !important;
    border: 1px solid var(--bls-glass-border) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

.ecosystem__cta-title {
    color: var(--bls-text-main) !important;
}

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

/* Testimonials — dark */
.testimonials {
    background: var(--bls-bg-dark) !important;
}

.testimonial__card {
    background: var(--bls-bg-card) !important;
    border: 1px solid var(--bls-glass-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.testimonial__card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
}

.testimonial__stars {
    color: var(--bls-secondary) !important;
}

.testimonial__text {
    color: var(--bls-text-main) !important;
}

.testimonial__name {
    color: var(--bls-text-main) !important;
}

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

/* Search Creations section — dark override */
#search-creations {
    background: var(--bls-bg-surface) !important;
}

#search-creations h2 {
    color: var(--bls-text-main) !important;
}

#search-creations p {
    color: var(--bls-text-muted) !important;
}

#search-creations input[type="text"] {
    background-color: var(--bls-bg-card) !important;
    border-color: var(--bls-glass-border) !important;
    color: var(--bls-text-main) !important;
}

#search-creations button[type="submit"] {
    background: linear-gradient(135deg, var(--bls-primary), var(--bls-primary-dark)) !important;
}

#search-creations a[href="/Creations"] {
    border-color: var(--bls-primary) !important;
    color: var(--bls-primary) !important;
}

/* Pricing section — dark */
.pricing {
    background: var(--bls-bg-dark) !important;
}

.pricing__card {
    background: var(--bls-bg-card) !important;
    border-color: var(--bls-glass-border) !important;
    color: var(--bls-text-main);
}

.pricing__card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
}

.pricing__card--featured {
    border-color: var(--bls-primary) !important;
}

.pricing__badge {
    background: linear-gradient(135deg, var(--bls-primary), var(--bls-secondary)) !important;
}

.pricing__title {
    color: var(--bls-text-main) !important;
}

.pricing__amount {
    color: var(--bls-primary) !important;
}

.pricing__currency, .pricing__period {
    color: var(--bls-text-muted) !important;
}

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

.pricing__feature::before {
    color: var(--bls-accent) !important;
}

/* Advertising CTA — dark override */
.advertising-cta {
    background: linear-gradient(135deg, var(--bls-bg-surface), var(--bls-bg-card)) !important;
}

.advertising-cta__title {
    color: var(--bls-text-main) !important;
}

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

/* CTA section — gradient override */
.cta {
    background: linear-gradient(135deg, var(--bls-primary), var(--bls-primary-dark)) !important;
}

.cta__title {
    color: #fff !important;
}

.cta__description {
    color: rgba(255, 255, 255, 0.9) !important;
}

.cta__buttons .button--primary {
    background: #fff !important;
    color: var(--bls-primary) !important;
}

.cta__buttons .button--secondary {
    border-color: #fff !important;
    color: #fff !important;
}

.cta__buttons .button--secondary:hover {
    background: #fff !important;
    color: var(--bls-primary) !important;
}

/* text-gradient class from styles.css — use redesign gradient */
.text-gradient {
    background: linear-gradient(135deg, var(--bls-primary), var(--bls-secondary)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Mobile nav from styles.css */
.nav__menu {
    background: var(--bls-bg-card) !important;
}

.nav__close {
    color: var(--bls-text-main) !important;
}

.nav__toggle {
    color: var(--bls-text-main) !important;
}

/* Footer from styles.css */
.footer {
    background: var(--bls-bg-dark) !important;
    color: var(--bls-text-muted) !important;
}

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

.footer__link:hover {
    color: var(--bls-secondary) !important;
}

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

.footer__bottom {
    border-top-color: var(--bls-glass-border) !important;
}

/* =============================================================
   INNER PAGES — Common Dashboard & Page Pattern Overrides
   ============================================================= */

/* Welcome banners — keep gradient but ensure dark-compatible */
.welcome-banner {
    background: linear-gradient(135deg, var(--bls-primary), var(--bls-primary-dark)) !important;
    border: 1px solid var(--bls-glass-border);
}

/* Stat cards — use redesign gradient */
.stat-card {
    background: linear-gradient(135deg, var(--bls-primary), var(--bls-accent)) !important;
    border: 1px solid var(--bls-glass-border);
}

/* Dashboard cards */
.dashboard-card {
    background: var(--bls-bg-card) !important;
    border: 1px solid var(--bls-glass-border) !important;
}

.dashboard-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

/* Cards with colored left borders — dark bg */
.announcement-card, .contest-card, .music-card, .discovery-card {
    background: var(--bls-bg-card) !important;
    color: var(--bls-text-main);
}

.announcement-card {
    border-left-color: var(--bls-primary) !important;
}

.contest-card {
    border-left-color: var(--bls-accent) !important;
}

.music-card {
    border-left-color: var(--bls-primary) !important;
}

.discovery-card {
    border-left-color: var(--bls-accent) !important;
}

/* Quick action cards */
.quick-action-card {
    background: var(--bls-bg-card) !important;
    border-color: var(--bls-glass-border) !important;
}

.quick-action-card:hover {
    border-color: var(--bls-primary) !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15) !important;
}

/* Project cards */
.project-card, .ad-card {
    background: var(--bls-bg-card) !important;
    border-color: var(--bls-glass-border) !important;
    color: var(--bls-text-main);
}

/* Card header colored backgrounds — use dark variants */
.card-header.bg-primary {
    background: linear-gradient(135deg, var(--bls-primary), var(--bls-primary-dark)) !important;
}

.card-header.bg-success {
    background: linear-gradient(135deg, #059669, #10B981) !important;
}

.card-header.bg-info {
    background: linear-gradient(135deg, #0891B2, var(--bls-accent)) !important;
}

.card-header.bg-warning {
    background: linear-gradient(135deg, #D97706, var(--bls-secondary)) !important;
}

.card-header.bg-danger {
    background: linear-gradient(135deg, #DC2626, #EF4444) !important;
}

.card-header.bg-secondary {
    background: var(--bls-bg-surface) !important;
}

/* bg-light utility — dark override */
.bg-light {
    background-color: var(--bls-bg-surface) !important;
}

/* Shadow utilities */
.shadow-sm {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.shadow {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

.shadow-lg {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* Text colors — ensure readability on dark */
.text-success { color: #10B981 !important; }
.text-danger { color: #EF4444 !important; }
.text-warning { color: var(--bls-secondary) !important; }
.text-info { color: var(--bls-accent) !important; }

/* Container fluid — dark bg */
.container-fluid {
    color: var(--bls-text-main);
}

/* Small text */
small, .small {
    color: var(--bls-text-muted) !important;
}

/* Lead text */
.lead {
    color: var(--bls-text-muted) !important;
}

/* Jumbotron / hero-like sections */
.jumbotron, .p-5.bg-light {
    background-color: var(--bls-bg-surface) !important;
}

/* Well / panel patterns */
.well, .panel {
    background-color: var(--bls-bg-card) !important;
    border-color: var(--bls-glass-border) !important;
}

/* Toast */
.toast {
    background-color: var(--bls-bg-card) !important;
    border-color: var(--bls-glass-border) !important;
    color: var(--bls-text-main) !important;
}

.toast-header {
    background-color: var(--bls-bg-surface) !important;
    color: var(--bls-text-main) !important;
    border-bottom-color: var(--bls-glass-border) !important;
}

/* Popover */
.popover {
    background-color: var(--bls-bg-card) !important;
    border-color: var(--bls-glass-border) !important;
}

.popover-header {
    background-color: var(--bls-bg-surface) !important;
    color: var(--bls-text-main) !important;
    border-bottom-color: var(--bls-glass-border) !important;
}

.popover-body {
    color: var(--bls-text-main) !important;
}

/* Offcanvas */
.offcanvas {
    background-color: var(--bls-bg-card) !important;
    color: var(--bls-text-main) !important;
}

.offcanvas-header {
    border-bottom-color: var(--bls-glass-border) !important;
}

/* Close button — invert for dark */
.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* =============================================================
   REGISTRATION / AUTH PAGES — Dark Theme Overrides
   ============================================================= */
.registration-container {
    background: linear-gradient(135deg, var(--bls-primary) 0%, var(--bls-primary-dark) 100%) !important;
}

.registration-wrapper {
    background: var(--bls-bg-card) !important;
    color: var(--bls-text-main);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}

.registration-wrapper::before {
    background: linear-gradient(90deg, var(--bls-primary), var(--bls-primary-dark), var(--bls-secondary)) !important;
}

.social-proof, .trust-signals, .benefits-section {
    background: var(--bls-bg-surface) !important;
    border-color: var(--bls-glass-border) !important;
    color: var(--bls-text-main);
}

.user-type-option {
    border-color: var(--bls-glass-border) !important;
    background: var(--bls-bg-card) !important;
    color: var(--bls-text-main);
}

.user-type-option:hover {
    border-color: var(--bls-primary) !important;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15) !important;
}

.user-type-option.selected {
    border-color: var(--bls-primary) !important;
    background: var(--bls-bg-surface) !important;
}

.user-type-icon {
    background: linear-gradient(135deg, var(--bls-primary), var(--bls-primary-dark)) !important;
}

.registration-btn {
    background: linear-gradient(135deg, var(--bls-primary), var(--bls-primary-dark)) !important;
}

.registration-btn:hover {
    box-shadow: var(--bls-shadow-primary-hover) !important;
}

.password-strength .progress {
    background: var(--bls-bg-surface) !important;
}