/* Stage 1/2 modernization: header/nav + shared components (safe CSS-only pass) */

:root {
    --ohm-modern-border: rgba(255, 119, 0, 0.16);
    --ohm-modern-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.08);
    --ohm-modern-shadow-md: 0 16px 40px rgba(15, 23, 42, 0.12);
    --ohm-modern-grad: linear-gradient(to right, rgb(255, 126, 95), rgb(254, 180, 123));
}

body {
    background:
        radial-gradient(920px 420px at 100% -8%, rgba(255, 119, 0, 0.12), transparent 62%),
        radial-gradient(760px 340px at -8% 0%, rgba(255, 180, 120, 0.16), transparent 60%),
        #fcfdfd;
}

.navbar.navbar-dark {
    background-image: var(--ohm-modern-grad) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(7px);
}

.navbar .container,
#content-wrapper.container {
    max-width: 1280px;
}

.navbar-brand {
    font-weight: 800;
    letter-spacing: 0.2px;
}

.beta-badge {
    border-radius: 999px;
    padding: 2px 8px;
}

.navbar-dark .navbar-nav .nav-link.nav-main-link {
    border-radius: 10px;
    transition: background-color 0.16s ease, transform 0.16s ease;
}

.navbar-dark .navbar-nav .nav-link.nav-main-link:hover,
.navbar-dark .navbar-nav .nav-link.nav-main-link:focus {
    transform: translateY(-1px);
}

.navbar-dark .navbar-nav .nav-link.nav-main-link.active {
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(255, 119, 0, 0.22), 0 8px 18px rgba(255, 119, 0, 0.18);
}

.nav-search-group {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.nav-search-group .nav-search-input,
.nav-search-group .nav-search-btn {
    min-height: 40px;
}

.category-mega-menu {
    border-radius: 14px;
    border: 1px solid var(--ohm-modern-border);
    box-shadow: var(--ohm-modern-shadow-md);
}

.category-mega-item {
    border: 1px solid transparent;
}

.category-mega-item:hover,
.category-mega-item:focus {
    border-color: var(--ohm-modern-border);
    background: rgba(255, 119, 0, 0.08);
}

.card,
.song-card,
.category-card,
.listen-card,
.listen-sidecard {
    border: 1px solid var(--ohm-modern-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--ohm-modern-shadow-sm);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 249, 243, 0.98));
}

.card:hover,
.song-card:hover,
.category-card:hover,
.listen-card:hover {
    box-shadow: var(--ohm-modern-shadow-md);
}

.card-footer {
    border-top-color: var(--ohm-modern-border) !important;
}

.btn {
    border-radius: 11px;
}

.btn-primary {
    background: var(--ohm-modern-grad) !important;
    border: 0 !important;
    box-shadow: 0 10px 24px rgba(255, 126, 95, 0.34);
}

.btn-primary:hover,
.btn-primary:focus {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(255, 126, 95, 0.44) !important;
}

.btn-outline-primary {
    border-color: rgba(255, 119, 0, 0.46);
    color: #e05f01;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    border-color: transparent;
    color: #fff;
    background: var(--ohm-modern-grad);
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: 0.1px;
}

#persistent-player {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.26);
}

body.dark-mode {
    background:
        radial-gradient(980px 460px at 100% -8%, rgba(255, 119, 0, 0.18), transparent 62%),
        radial-gradient(760px 360px at -8% 0%, rgba(255, 170, 110, 0.1), transparent 60%),
        #10151d;
}

body.dark-mode .card,
body.dark-mode .song-card,
body.dark-mode .category-card,
body.dark-mode .listen-card,
body.dark-mode .listen-sidecard {
    background: linear-gradient(180deg, #1a2331, #151d29);
    border-color: rgba(255, 136, 54, 0.34) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
}

body.dark-mode .category-mega-menu {
    background: #1b2433;
    border-color: rgba(255, 136, 54, 0.3);
}

body.dark-mode .category-mega-item:hover,
body.dark-mode .category-mega-item:focus {
    background: rgba(255, 136, 54, 0.2);
}

body.dark-mode .nav-search-group {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.36);
}

@media (max-width: 991.98px) {
    .navbar .container,
    #content-wrapper.container {
        max-width: 100%;
    }
}