/* kvmspot emerald dark navigation — shared site-wide */

:root {
    --mc-primary: #34d399;
    --mc-primary-dark: #10b981;
    --mc-primary-light: #6ee7b7;
    --nav-cta-bg: #34d399;
    --nav-cta-color: #04120d;
    --nav-cta-bg-hover: #6ee7b7;
    --nav-cta-color-hover: #04120d;
    --nav-cta-radius: 0.5rem;
    --ru-accent: #34d399;
    --primary-blue: #34d399;
}

#headerContainer .tm-nav {
    background: rgba(8, 8, 12, 0.94) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    font-family: 'Inter', 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

#headerContainer .tm-brand-name,
#headerContainer .tm-brand-name--mobile,
#headerContainer nav a.flex span[style*="color:#fff"] {
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
}

#headerContainer nav .flex.items-center.gap-3 > div:first-child,
#headerContainer #mobileMenuPanel .flex.items-center.gap-3 > div:first-child {
    background: linear-gradient(135deg, #34d399, #059669) !important;
    border-radius: 0.6rem !important;
}

#headerContainer .tm-nav-link {
    color: rgba(209, 213, 219, 0.8) !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
}
#headerContainer .tm-nav-link:hover { color: #34d399 !important; }
#headerContainer .nav-item.active { color: #34d399 !important; }

#headerContainer .tm-nav-cta {
    background: #34d399 !important;
    color: #04120d !important;
    border-radius: 0.5rem !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    height: auto !important;
    padding: 0.55rem 1.25rem !important;
}
#headerContainer .tm-nav-cta:hover,
#headerContainer .tm-nav .tm-btn-primary:hover {
    background: #6ee7b7 !important;
    color: #04120d !important;
    box-shadow: none !important;
    transform: translateY(-1px);
}

#headerContainer .tm-nav .tm-btn-primary {
    background: transparent !important;
    color: #e5e5e5 !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: none !important;
    border-radius: 0.5rem !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
#headerContainer .tm-nav .tm-btn-primary:hover {
    border-color: #34d399 !important;
    color: #34d399 !important;
    background: rgba(52, 211, 153, 0.08) !important;
}

#headerContainer .tm-lang-pill {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: transparent !important;
    color: rgba(209, 213, 219, 0.8) !important;
    border-radius: 0.5rem !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 0.8125rem !important;
}
#headerContainer .tm-lang-pill:hover {
    border-color: rgba(52, 211, 153, 0.45) !important;
    color: #34d399 !important;
    background: rgba(52, 211, 153, 0.08) !important;
}

#headerContainer #langOptions,
#headerContainer #mobileLangOptions,
#mobileLangOptions {
    background: #111116 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
    border-radius: 0.5rem !important;
}
#headerContainer #langOptions .lang-option,
#headerContainer #mobileLangOptions .lang-option,
#mobileLangOptions .lang-option,
#mobileLangOptions button {
    color: rgba(209, 213, 219, 0.85) !important;
    border-radius: 0.375rem !important;
    background: transparent !important;
}
#headerContainer #langOptions .lang-option:hover,
#headerContainer #langOptions .lang-option--active,
#headerContainer #mobileLangOptions .lang-option:hover,
#headerContainer #mobileLangOptions .lang-option--active,
#mobileLangOptions .lang-option:hover,
#mobileLangOptions .lang-option--active,
#mobileLangOptions button[data-active="1"] {
    color: #34d399 !important;
    background: rgba(52, 211, 153, 0.1) !important;
}

#headerContainer #authContainer .tm-auth-avatar,
#headerContainer #mobileAuthContainer .tm-auth-mobile-btn,
#headerContainer #authContainer .w-8.h-8 {
    background: #34d399 !important;
    color: #04120d !important;
    border-radius: 999px !important;
}
#headerContainer #authContainer .tm-auth-avatar:hover,
#headerContainer #mobileAuthContainer .tm-auth-mobile-btn:hover,
#headerContainer #authContainer .w-8.h-8:hover {
    background: #6ee7b7 !important;
    filter: none !important;
}
#headerContainer #authContainer .tm-auth-avatar i,
#headerContainer #mobileAuthContainer .tm-auth-mobile-btn i {
    color: #04120d !important;
}
#headerContainer #mobileAuthContainer .tm-auth-mobile-btn {
    border-radius: 0.5rem !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 700 !important;
}

#mobileMenuPanel #authContainer .w-full.rounded-full,
#mobileMenuPanel #authContainer .tm-auth-mobile-btn {
    background: #34d399 !important;
    color: #04120d !important;
    border-radius: 0.5rem !important;
}

#headerContainer #mobileMenuToggle { color: rgba(229, 231, 235, 0.85) !important; }
#headerContainer #mobileMenuToggle:hover { color: #34d399 !important; }

#headerContainer #mobileMenuOverlay,
#mobileMenuOverlay { background: rgba(0, 0, 0, 0.75) !important; }

#headerContainer #mobileMenuPanel,
#mobileMenuPanel {
    background: #08080c !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.mobile-menu-item,
#headerContainer .mobile-menu-item {
    color: rgba(209, 213, 219, 0.8) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
}
.mobile-menu-item:hover,
.mobile-menu-item.active,
#headerContainer .mobile-menu-item:hover,
#headerContainer .mobile-menu-item.active {
    color: #34d399 !important;
    background: rgba(52, 211, 153, 0.06) !important;
}

#mobileMenuPanel .text-white { color: #e5e5e5 !important; }
#mobileMenuPanel .tm-brand-name { color: #fff !important; }
#mobileMenuPanel span[style*="color:#fff"]:not(.tm-brand-name) { color: #34d399 !important; }

#headerContainer #mobileMenuPanel button[onclick*="toggleMobileLangMenu"],
#mobileMenuPanel button[onclick*="toggleMobileLangMenu"] {
    border-radius: 0.5rem !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: transparent !important;
    color: rgba(209, 213, 219, 0.8) !important;
}
#headerContainer #mobileMenuPanel button[onclick*="toggleMobileLangMenu"]:hover,
#mobileMenuPanel button[onclick*="toggleMobileLangMenu"]:hover {
    border-color: rgba(52, 211, 153, 0.45) !important;
    color: #34d399 !important;
    background: rgba(52, 211, 153, 0.08) !important;
}

#mobileMenuPanel .border-white\/10 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}