/*
Theme Name: NairaVoice Premium
Theme URI: https://www.nairavoice.com.ng
Author: Bosun
Author URI: https://nairavoice.com.ng
Description: Premium multimedia news, entertainment, music & video theme. Features Bootstrap 5, AJAX navigation, ad network integration, music charts, video streaming, and a bold editorial aesthetic.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: Proprietary
Text Domain: nairavoice

© 2024 Bosun at NairaVoice.com.ng | nairavoices@gmail.com
*/

/* ============================================================
   CSS CUSTOM PROPERTIES
============================================================ */
:root {
  --nv-gold:        #E8A020;
  --nv-gold-dark:   #C4841A;
  --nv-gold-light:  #FFB940;
  --nv-gold-glow:   rgba(232,160,32,0.18);
  --nv-red:         #E84020;
  --nv-blue:        #1A6FE8;
  --nv-green:       #20C878;
  --nv-purple:      #9B20E8;

  /* Dark Base */
  --nv-bg:          #0C0C14;
  --nv-bg2:         #12121C;
  --nv-bg3:         #191924;
  --nv-bg4:         #20202E;
  --nv-bg5:         #28283A;
  --nv-border:      rgba(255,255,255,0.07);
  --nv-border2:     rgba(255,255,255,0.12);

  --nv-text:        #F2EFE8;
  --nv-text2:       #C0BDB6;
  --nv-text3:       #807C74;
  --nv-text4:       #504C44;

  /* Category Colors */
  --cat-news:         #E84020;
  --cat-entertainment:#9B20E8;
  --cat-education:    #1A6FE8;
  --cat-business:     #E8A020;
  --cat-music:        #20C878;
  --cat-video:        #20A0E8;
  --cat-sports:       #E84020;
  --cat-tech:         #00D4FF;
  --cat-lifestyle:    #FF6B9D;
  --cat-politics:     #E8A020;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-head:    'Montserrat', 'Helvetica Neue', sans-serif;
  --font-body:    'Source Serif 4', Georgia, serif;
  --font-ui:      'DM Sans', 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Spacing */
  --nv-r:    6px;
  --nv-r2:   10px;
  --nv-r3:   16px;
  --nv-r4:   24px;

  /* Shadows */
  --sh-sm:   0 2px 8px rgba(0,0,0,0.3);
  --sh-md:   0 4px 24px rgba(0,0,0,0.4);
  --sh-lg:   0 8px 48px rgba(0,0,0,0.55);
  --sh-xl:   0 16px 80px rgba(0,0,0,0.7);
  --sh-gold: 0 4px 30px rgba(232,160,32,0.2);

  /* Nav */
  --nav-h: 64px;
  --ticker-h: 36px;
}

/* Light Mode */
[data-theme="light"] {
  --nv-bg:    #F6F4EF;
  --nv-bg2:   #EDEAE3;
  --nv-bg3:   #E4E1D8;
  --nv-bg4:   #DAD7CE;
  --nv-bg5:   #CFCCC3;
  --nv-border: rgba(0,0,0,0.08);
  --nv-border2: rgba(0,0,0,0.14);
  --nv-text:   #1A1814;
  --nv-text2:  #3C3830;
  --nv-text3:  #7C7870;
  --nv-text4:  #AFABA3;
  --sh-sm: 0 2px 8px rgba(0,0,0,0.08);
  --sh-md: 0 4px 24px rgba(0,0,0,0.1);
}

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 16px; }
body {
  background: var(--nv-bg);
  color: var(--nv-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  overflow-x: hidden;
  transition: background .3s ease, color .3s ease;
}
body.nav-open { overflow: hidden; }

a { color: var(--nv-gold); text-decoration: none; transition: color .2s; }
a:hover { color: var(--nv-gold-dark); }
img, video { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
button { cursor: pointer; font-family: var(--font-ui); border: none; background: none; }
input, select, textarea { font-family: var(--font-ui); }

/* ============================================================
   SCROLLBAR
============================================================ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--nv-bg2); }
::-webkit-scrollbar-thumb { background: var(--nv-bg5); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--nv-gold); }

/* ============================================================
   TYPOGRAPHY
============================================================ */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-head); font-weight: 700; line-height: 1.2; color: var(--nv-text); }
.font-display { font-family: var(--font-display); }
h1 { font-size: clamp(2rem,5vw,3.5rem); }
h2 { font-size: clamp(1.5rem,3vw,2.25rem); }
h3 { font-size: clamp(1.15rem,2vw,1.5rem); }

/* ============================================================
   TICKER
============================================================ */
.nv-ticker {
  background: var(--nv-red);
  height: var(--ticker-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 1001;
}
.nv-ticker-label {
  background: var(--nv-gold);
  color: #000;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 0.65rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 0 1rem;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  gap: .4rem;
}
.nv-ticker-track { flex: 1; overflow: hidden; }
.nv-ticker-inner {
  display: flex;
  gap: 3rem;
  animation: tickerScroll 50s linear infinite;
  white-space: nowrap;
}
.nv-ticker-item {
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.nv-ticker-item::before { content:'●'; font-size:.4rem; opacity:.7; }
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   TOP BAR
============================================================ */
.nv-topbar {
  background: var(--nv-bg2);
  border-bottom: 1px solid var(--nv-border);
  height: 38px;
  display: flex;
  align-items: center;
}
.nv-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
}
.nv-topbar-date {
  font-family: var(--font-ui);
  font-size: .7rem;
  color: var(--nv-text3);
  letter-spacing: .04em;
}
.nv-topbar-socials { display: flex; gap: .3rem; }
.nv-topbar-social {
  width: 24px; height: 24px;
  border-radius: 4px;
  background: var(--nv-bg4);
  border: 1px solid var(--nv-border);
  color: var(--nv-text3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  transition: all .2s;
}
.nv-topbar-social:hover { background: var(--nv-gold); color: #000; border-color: var(--nv-gold); }
.nv-topbar-auth { display: flex; align-items: center; gap: .5rem; }
.nv-topbar-auth a {
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 600;
  padding: .25rem .75rem;
  border-radius: 20px;
  transition: all .2s;
}
.nv-btn-login-sm {
  border: 1px solid var(--nv-border2);
  color: var(--nv-text2);
}
.nv-btn-login-sm:hover { border-color: var(--nv-gold); color: var(--nv-gold); }
.nv-btn-signup-sm {
  background: var(--nv-gold);
  color: #000;
  font-weight: 700;
}
.nv-btn-signup-sm:hover { background: var(--nv-gold-dark); }

/* ============================================================
   HEADER
============================================================ */
.nv-header {
  background: var(--nv-bg2);
  border-bottom: 1px solid var(--nv-border);
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform .3s ease, box-shadow .3s;
}
.nv-header.scrolled { box-shadow: var(--sh-lg); }
.nv-header.hidden   { transform: translateY(-100%); }
.nv-header-inner {
  display: flex;
  align-items: center;
  height: var(--nav-h);
  gap: 1.5rem;
}

/* Logo */
.nv-logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
  text-decoration: none;
}
.nv-logo-mark {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--nv-gold) 0%, #FF6B20 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1rem;
  color: #fff;
  box-shadow: var(--sh-gold);
  position: relative;
  overflow: hidden;
}
.nv-logo-mark::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,.15) 50%, transparent 60%);
  animation: logoShine 3s infinite;
}
@keyframes logoShine { 0%,100%{transform:translateX(-100%) rotate(45deg)} 50%{transform:translateX(100%) rotate(45deg)} }

.nv-logo-text { line-height: 1.1; }
.nv-logo-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--nv-text);
  display: block;
}
.nv-logo-name span { color: var(--nv-gold); }
.nv-logo-tagline {
  font-family: var(--font-ui);
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nv-text3);
  display: block;
}

/* Header Ad */
.nv-header-ad {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nv-ad-zone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--nv-bg3);
  border: 1px dashed rgba(232,160,32,.2);
  border-radius: var(--nv-r);
}
.nv-ad-zone-label {
  position: absolute;
  top: 2px; right: 4px;
  font-family: var(--font-ui);
  font-size: 8px;
  color: var(--nv-text4);
  text-transform: uppercase;
  letter-spacing: .08em;
  pointer-events: none;
}
.nv-ad-zone img,
.nv-ad-zone video,
.nv-ad-zone iframe {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border: none;
}
/* Ad sizes */
.nv-ad-728x90   { width: 728px; height: 90px; max-width: 100%; }
.nv-ad-468x60   { width: 468px; height: 60px; max-width: 100%; }
.nv-ad-468x150  { width: 468px; height: 150px; max-width: 100%; }
.nv-ad-300x250  { width: 300px; height: 250px; max-width: 100%; }
.nv-ad-300x300  { width: 300px; height: 300px; max-width: 100%; }
.nv-ad-336x280  { width: 336px; height: 280px; max-width: 100%; }
.nv-ad-336x300  { width: 336px; height: 300px; max-width: 100%; }
.nv-ad-160x600  { width: 160px; height: 600px; max-width: 100%; }
.nv-ad-970x90   { width: 970px; height: 90px;  max-width: 100%; }
.nv-ad-320x50   { width: 320px; height: 50px;  max-width: 100%; }

/* Header Actions */
.nv-header-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.nv-icon-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--nv-bg3);
  border: 1px solid var(--nv-border);
  color: var(--nv-text2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  transition: all .2s;
}
.nv-icon-btn:hover { background: var(--nv-gold); color: #000; border-color: var(--nv-gold); }
.nv-btn-login {
  border: 1.5px solid var(--nv-border2);
  color: var(--nv-text2);
  font-size: .78rem;
  font-weight: 600;
  padding: .4rem 1rem;
  border-radius: 6px;
  transition: all .2s;
}
.nv-btn-login:hover { border-color: var(--nv-gold); color: var(--nv-gold); }
.nv-btn-register {
  background: var(--nv-gold);
  color: #000;
  font-size: .78rem;
  font-weight: 700;
  padding: .4rem 1rem;
  border-radius: 6px;
  transition: all .2s;
}
.nv-btn-register:hover { background: var(--nv-gold-dark); transform: translateY(-1px); }

/* ============================================================
   NAVIGATION
============================================================ */
.nv-nav {
  background: var(--nv-bg3);
  border-bottom: 1px solid var(--nv-border);
  position: relative;
  z-index: 999;
}
.nv-nav-inner {
  display: flex;
  align-items: stretch;
  height: 44px;
  overflow: visible;
}
.nv-nav-item { position: relative; }
.nv-nav-link {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: 0 .9rem;
  height: 44px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: .73rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nv-text2);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: all .2s;
  cursor: pointer;
}
.nv-nav-link:hover, .nv-nav-link.active, .nv-nav-item:hover .nv-nav-link {
  color: var(--nv-gold);
  border-bottom-color: var(--nv-gold);
}
.nv-nav-link svg { width: 9px; transition: transform .2s; }
.nv-nav-item:hover .nv-nav-link svg { transform: rotate(180deg); }

/* Category colors in nav */
.nv-nav-link[data-cat="news"]          { --cat-c: var(--cat-news); }
.nv-nav-link[data-cat="entertainment"] { --cat-c: var(--cat-entertainment); }
.nv-nav-link[data-cat="education"]     { --cat-c: var(--cat-education); }
.nv-nav-link[data-cat="business"]      { --cat-c: var(--cat-business); }
.nv-nav-link[data-cat]:hover           { color: var(--cat-c, var(--nv-gold)); border-bottom-color: var(--cat-c, var(--nv-gold)); }

/* Mega Dropdown */
.nv-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--nv-bg4);
  border: 1px solid var(--nv-border2);
  border-top: 2px solid var(--nv-gold);
  border-radius: 0 0 var(--nv-r3) var(--nv-r3);
  box-shadow: var(--sh-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all .22s cubic-bezier(.4,0,.2,1);
  z-index: 998;
  overflow: hidden;
}
.nv-nav-item:hover .nv-dropdown,
.nv-dropdown:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nv-dropdown-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1.1rem;
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 500;
  color: var(--nv-text2);
  transition: all .18s;
  border-left: 3px solid transparent;
}
.nv-dropdown-item:hover {
  background: rgba(255,255,255,.04);
  color: var(--nv-gold);
  border-left-color: var(--nv-gold);
}
.nv-dropdown-section-label {
  font-family: var(--font-ui);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nv-text4);
  padding: .6rem 1.1rem .25rem;
  border-top: 1px solid var(--nv-border);
}
.nv-dropdown-section-label:first-child { border-top: none; }

/* Mega dropdown (multi-column) */
.nv-mega-dropdown {
  min-width: 480px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0;
}

/* Mobile Nav */
.nv-hamburger {
  display: none;
  width: 38px; height: 38px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border-radius: var(--nv-r);
  background: var(--nv-bg3);
  border: 1px solid var(--nv-border);
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
}
.nv-hamburger:hover { border-color: var(--nv-gold); }
.nv-hamburger span {
  width: 18px; height: 2px;
  background: var(--nv-text2);
  border-radius: 2px;
  transition: all .3s;
  display: block;
}
.nv-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nv-hamburger.open span:nth-child(2) { opacity: 0; }
.nv-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Overlay Nav */
.nv-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 1098;
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
}
.nv-mobile-overlay.open { opacity: 1; visibility: visible; }

.nv-mobile-nav {
  position: fixed;
  top: 0; left: -100%;
  width: min(320px, 85vw);
  height: 100vh;
  background: var(--nv-bg2);
  border-right: 1px solid var(--nv-border2);
  z-index: 1099;
  overflow-y: auto;
  transition: left .35s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
}
.nv-mobile-nav.open { left: 0; }
.nv-mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--nv-border);
}
.nv-mobile-nav-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--nv-bg4);
  border: 1px solid var(--nv-border);
  color: var(--nv-text2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: all .2s;
}
.nv-mobile-nav-close:hover { background: var(--nv-red); color: #fff; }
.nv-mobile-nav-body { flex: 1; padding: .75rem 0; }
.nv-mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1.25rem;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: .88rem;
  color: var(--nv-text2);
  border-left: 3px solid transparent;
  transition: all .18s;
  cursor: pointer;
}
.nv-mobile-nav-link:hover, .nv-mobile-nav-link.active {
  color: var(--nv-gold);
  background: rgba(232,160,32,.06);
  border-left-color: var(--nv-gold);
}
.nv-mobile-nav-link .chevron { font-size: .7rem; transition: transform .2s; }
.nv-mobile-nav-link.expanded .chevron { transform: rotate(90deg); }
.nv-mobile-sub-menu { display: none; background: rgba(0,0,0,.15); }
.nv-mobile-sub-menu.open { display: block; }
.nv-mobile-sub-link {
  display: block;
  padding: .55rem 1.5rem .55rem 2rem;
  font-family: var(--font-ui);
  font-size: .8rem;
  color: var(--nv-text3);
  transition: color .18s;
}
.nv-mobile-sub-link:hover { color: var(--nv-gold); }
.nv-mobile-nav-auth {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--nv-border);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.nv-mobile-auth-btn {
  display: block;
  text-align: center;
  padding: .65rem 1rem;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: .85rem;
  transition: all .2s;
}
.nv-mobile-auth-login  { border: 1.5px solid var(--nv-border2); color: var(--nv-text2); }
.nv-mobile-auth-signup { background: var(--nv-gold); color: #000; font-weight: 700; }
.nv-mobile-auth-signup:hover { background: var(--nv-gold-dark); }

/* Search Overlay */
.nv-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12,12,20,.97);
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
}
.nv-search-overlay.open { opacity: 1; visibility: visible; }
.nv-search-box { width: 100%; max-width: 680px; padding: 0 1.5rem; }
.nv-search-input-wrap {
  display: flex;
  align-items: center;
  background: var(--nv-bg3);
  border: 2px solid var(--nv-gold);
  border-radius: 50px;
  padding: 0 1.25rem;
  gap: .75rem;
  box-shadow: var(--sh-gold);
}
.nv-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--nv-text);
  font-size: 1.3rem;
  font-family: var(--font-display);
  padding: 1rem 0;
}
.nv-search-input::placeholder { color: var(--nv-text4); }
.nv-search-results { margin-top: 1.5rem; }
.nv-search-result-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem;
  background: var(--nv-bg3);
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-r2);
  margin-bottom: .5rem;
  text-decoration: none;
  transition: all .2s;
}
.nv-search-result-item:hover { border-color: var(--nv-gold); background: var(--nv-bg4); }
.nv-search-result-thumb { width: 60px; height: 42px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.nv-search-result-title { font-family: var(--font-ui); font-weight: 600; font-size: .85rem; color: var(--nv-text); }
.nv-search-result-meta  { font-family: var(--font-ui); font-size: .7rem; color: var(--nv-text3); margin-top: 2px; }

/* ============================================================
   SECTION LABELS
============================================================ */
.nv-section-label {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-ui);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nv-gold);
}
.nv-section-label::before {
  content: '';
  width: 4px; height: 18px;
  background: var(--nv-gold);
  border-radius: 2px;
}
.nv-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--nv-gold-glow), transparent);
}
.nv-section-label.news          { color: var(--cat-news);         }
.nv-section-label.news::before  { background: var(--cat-news);    }
.nv-section-label.entertainment { color: var(--cat-entertainment);}
.nv-section-label.entertainment::before { background: var(--cat-entertainment); }
.nv-section-label.education     { color: var(--cat-education);    }
.nv-section-label.education::before { background: var(--cat-education); }
.nv-section-label.business      { color: var(--cat-business);     }
.nv-section-label.business::before { background: var(--cat-business); }
.nv-section-label.music         { color: var(--cat-music);        }
.nv-section-label.music::before { background: var(--cat-music);   }
.nv-section-label.video         { color: var(--cat-video);        }
.nv-section-label.video::before { background: var(--cat-video);   }

/* ============================================================
   CARDS
============================================================ */
.nv-card {
  background: var(--nv-bg2);
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-r3);
  overflow: hidden;
  transition: transform .22s, box-shadow .22s, border-color .22s;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.nv-card:hover { transform: translateY(-4px); box-shadow: var(--sh-gold); border-color: rgba(232,160,32,.25); }

.nv-card-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.nv-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; display: block; }
.nv-card:hover .nv-card-thumb img { transform: scale(1.06); }
.nv-card-cat {
  position: absolute;
  top: .7rem; left: .7rem;
  font-family: var(--font-ui);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .22rem .6rem;
  border-radius: 3px;
  color: #fff;
  background: var(--cat-news);
}
.nv-card-cat.entertainment { background: var(--cat-entertainment); }
.nv-card-cat.education     { background: var(--cat-education);     }
.nv-card-cat.business      { background: var(--cat-business); color: #000; }
.nv-card-cat.music         { background: var(--cat-music);    color: #000; }
.nv-card-cat.video         { background: var(--cat-video);         }

.nv-card-body   { padding: 1rem 1.1rem 1.1rem; flex: 1; display: flex; flex-direction: column; }
.nv-card-title  {
  font-family: var(--font-head);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--nv-text);
  margin-bottom: .45rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .2s;
}
.nv-card:hover .nv-card-title { color: var(--nv-gold); }
.nv-card-excerpt {
  font-size: .8rem;
  color: var(--nv-text3);
  line-height: 1.55;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nv-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .75rem;
  padding-top: .65rem;
  border-top: 1px solid var(--nv-border);
  font-family: var(--font-ui);
  font-size: .7rem;
  color: var(--nv-text3);
}
.nv-card-author { display: flex; align-items: center; gap: .4rem; }
.nv-card-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(232,160,32,.3); }
.nv-card-readtime {
  background: var(--nv-bg4);
  padding: .18rem .5rem;
  border-radius: 20px;
  font-size: .65rem;
}

/* Featured Card (large) */
.nv-card-featured {
  position: relative;
  border-radius: var(--nv-r3);
  overflow: hidden;
  min-height: 420px;
  border: none;
}
.nv-card-featured .nv-card-thumb {
  position: absolute; inset: 0;
  aspect-ratio: unset;
  width: 100%; height: 100%;
}
.nv-card-featured .nv-card-thumb img { filter: brightness(.45); }
.nv-card-featured:hover .nv-card-thumb img { transform: scale(1.04); filter: brightness(.55); }
.nv-card-featured .nv-card-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2rem 1.5rem 1.5rem;
  background: linear-gradient(to top, rgba(12,12,20,.98) 0%, transparent 100%);
}
.nv-card-featured .nv-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem,2.5vw,1.6rem);
  color: #fff;
  -webkit-line-clamp: 4;
}
.nv-card-featured:hover .nv-card-title { color: var(--nv-gold-light); }

/* Horizontal Card */
.nv-card-h {
  flex-direction: row;
  min-height: 90px;
  align-items: stretch;
}
.nv-card-h .nv-card-thumb { width: 110px; flex-shrink: 0; aspect-ratio: unset; min-height: 90px; }
.nv-card-h .nv-card-body  { padding: .65rem .8rem; }
.nv-card-h .nv-card-title { font-size: .8rem; -webkit-line-clamp: 2; margin-bottom: 0; }
.nv-card-h .nv-card-footer { display: none; }

/* ============================================================
   HERO SLIDER
============================================================ */
.nv-hero { position: relative; overflow: hidden; background: var(--nv-bg2); }
.nv-hero-track { display: flex; transition: transform .65s cubic-bezier(.4,0,.2,1); will-change: transform; }
.nv-hero-slide { min-width: 100%; position: relative; }
.nv-hero-slide img { width: 100%; height: clamp(300px,55vw,560px); object-fit: cover; display: block; filter: brightness(.45); }
.nv-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,12,20,.97) 0%, rgba(12,12,20,.4) 50%, transparent 100%);
}
.nv-hero-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 3rem 2rem;
}
.nv-hero-cat {
  display: inline-block;
  background: var(--nv-red);
  color: #fff;
  font-family: var(--font-ui);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .22rem .7rem;
  border-radius: 2px;
  margin-bottom: .75rem;
}
.nv-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem,4vw,2.8rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin-bottom: .75rem;
  max-width: 750px;
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
.nv-hero-meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-ui);
  font-size: .75rem;
  color: rgba(255,255,255,.6);
}
.nv-hero-author { color: var(--nv-gold); font-weight: 600; }
.nv-hero-controls {
  position: absolute;
  bottom: 1.5rem; right: 1.5rem;
  display: flex;
  gap: .4rem;
  align-items: center;
}
.nv-hero-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  cursor: pointer;
  transition: all .2s;
  border: none;
}
.nv-hero-dot.active { background: var(--nv-gold); width: 20px; border-radius: 4px; }
.nv-hero-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: all .2s;
}
.nv-hero-btn:hover { background: var(--nv-gold); border-color: var(--nv-gold); color: #000; }

/* ============================================================
   AD STRIP / LEADERBOARD
============================================================ */
.nv-ad-strip {
  background: var(--nv-bg2);
  border-top: 1px solid var(--nv-border);
  border-bottom: 1px solid var(--nv-border);
  padding: .75rem 0;
  text-align: center;
}

/* ============================================================
   SIDEBAR
============================================================ */
.nv-widget {
  background: var(--nv-bg2);
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-r3);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.nv-widget-head {
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--nv-border);
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nv-text);
  display: flex; align-items: center; gap: .5rem;
}
.nv-widget-head::before { content:''; width:3px; height:13px; background:var(--nv-gold); border-radius:2px; }
.nv-widget-body { padding: 1rem 1.1rem; }

/* Trending widget items */
.nv-trending-item {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--nv-border);
  text-decoration: none;
}
.nv-trending-item:last-child { border-bottom: none; padding-bottom: 0; }
.nv-trending-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--nv-text4);
  line-height: 1;
  flex-shrink: 0;
  width: 26px;
  text-align: right;
}
.nv-trending-item:first-child .nv-trending-num { color: var(--nv-gold); }
.nv-trending-title {
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 600;
  color: var(--nv-text2);
  line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .18s;
}
.nv-trending-item:hover .nv-trending-title { color: var(--nv-gold); }
.nv-trending-date { font-size: .65rem; color: var(--nv-text4); font-family: var(--font-ui); margin-top: 2px; }

/* ============================================================
   MUSIC SECTION
============================================================ */
.nv-music-section {
  background: linear-gradient(135deg, rgba(32,200,120,.06) 0%, var(--nv-bg2) 100%);
  border: 1px solid rgba(32,200,120,.1);
  border-radius: var(--nv-r4);
  padding: 1.75rem;
}
.nv-music-card {
  display: flex; align-items: center; gap: .85rem;
  padding: .65rem .75rem;
  border-radius: var(--nv-r2);
  border: 1px solid var(--nv-border);
  background: var(--nv-bg3);
  cursor: pointer;
  transition: all .2s;
}
.nv-music-card:hover { background: var(--nv-bg4); border-color: rgba(32,200,120,.3); transform: translateX(4px); }
.nv-music-cover { width: 52px; height: 52px; border-radius: var(--nv-r); object-fit: cover; flex-shrink: 0; box-shadow: var(--sh-md); }
.nv-music-cover-ph { width:52px; height:52px; border-radius:var(--nv-r); background:rgba(32,200,120,.1); display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; }
.nv-music-rank { font-family:var(--font-display); font-size:1rem; font-weight:800; color:var(--nv-text4); width:24px; text-align:right; flex-shrink:0; }
.nv-music-info { flex:1; min-width:0; }
.nv-music-name  { font-family:var(--font-ui); font-weight:600; font-size:.85rem; color:var(--nv-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nv-music-artist{ font-family:var(--font-ui); font-size:.72rem; color:var(--nv-text3); margin-top:2px; }
.nv-music-play  { width:34px; height:34px; border-radius:50%; background:rgba(32,200,120,.15); color:var(--cat-music); display:flex; align-items:center; justify-content:center; font-size:.85rem; flex-shrink:0; transition:all .2s; }
.nv-music-card:hover .nv-music-play { background:var(--cat-music); color:#000; }

/* Mini Player */
.nv-player {
  position: fixed; bottom:0; left:0; right:0;
  height: 68px;
  background: var(--nv-bg4);
  border-top: 1px solid rgba(232,160,32,.3);
  z-index: 800;
  display: flex; align-items: center; gap: 1.25rem;
  padding: 0 1.5rem;
  transform: translateY(100%);
  transition: transform .35s ease;
  backdrop-filter: blur(16px);
}
.nv-player.show { transform: translateY(0); }
.nv-player-cover { width: 44px; height: 44px; border-radius: var(--nv-r); object-fit: cover; flex-shrink:0; }
.nv-player-info  { flex:1; min-width:0; }
.nv-player-title { font-family:var(--font-ui); font-weight:600; font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nv-player-artist{ font-size:.68rem; color:var(--nv-text3); font-family:var(--font-ui); }
.nv-player-controls { display:flex; align-items:center; gap:.85rem; }
.nv-player-btn  { color:var(--nv-text3); font-size:1rem; transition:color .18s; padding:4px; }
.nv-player-btn:hover { color:var(--cat-music); }
.nv-player-play { width:38px; height:38px; border-radius:50%; background:var(--cat-music); color:#000; display:flex; align-items:center; justify-content:center; font-size:.95rem; border:none; cursor:pointer; transition:transform .18s; }
.nv-player-play:hover { transform:scale(1.1); }
.nv-player-progress { flex:2; max-width:280px; }
.nv-player-bar { height:3px; background:var(--nv-bg5); border-radius:2px; cursor:pointer; overflow:hidden; }
.nv-player-fill { height:100%; background:linear-gradient(90deg,var(--cat-music),var(--nv-gold)); width:0; transition:width .3s linear; }
.nv-player-times { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.6rem; color:var(--nv-text4); margin-top:3px; }

/* ============================================================
   VIDEO SECTION
============================================================ */
.nv-video-card {
  background: var(--nv-bg2);
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-r3);
  overflow: hidden;
  cursor: pointer;
  transition: all .22s;
}
.nv-video-card:hover { border-color: rgba(32,160,232,.3); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(32,160,232,.1); }
.nv-video-thumb { position:relative; aspect-ratio:16/9; overflow:hidden; }
.nv-video-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; }
.nv-video-card:hover .nv-video-thumb img { transform:scale(1.05); }
.nv-video-overlay { position:absolute; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; }
.nv-video-card:hover .nv-video-overlay { opacity:1; }
.nv-video-play { width:50px; height:50px; border-radius:50%; background:rgba(32,160,232,.9); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.1rem; transform:scale(.85); transition:transform .2s; }
.nv-video-card:hover .nv-video-play { transform:scale(1); }
.nv-video-dur { position:absolute; bottom:6px; right:6px; background:rgba(0,0,0,.8); color:#fff; font-family:var(--font-mono); font-size:.65rem; padding:1px 5px; border-radius:3px; }
.nv-video-body { padding:.75rem 1rem; }
.nv-video-title { font-family:var(--font-ui); font-weight:600; font-size:.82rem; color:var(--nv-text); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:.3rem; }
.nv-video-meta  { font-family:var(--font-ui); font-size:.68rem; color:var(--nv-text3); }

/* Video Modal */
.nv-video-modal {
  position:fixed; inset:0;
  background:rgba(0,0,0,.95);
  z-index:2000;
  display:flex; align-items:center; justify-content:center;
  padding:2rem;
  opacity:0; visibility:hidden;
  transition:all .3s;
}
.nv-video-modal.open { opacity:1; visibility:visible; }
.nv-video-modal-inner { width:100%; max-width:960px; position:relative; }
.nv-video-modal-close {
  position:absolute; top:-42px; right:0;
  color:rgba(255,255,255,.6); font-size:1.3rem;
  cursor:pointer; font-family:var(--font-ui); font-size:.8rem;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
  border-radius:6px; padding:.3rem .8rem;
  transition:all .2s;
}
.nv-video-modal-close:hover { background:var(--nv-red); color:#fff; border-color:var(--nv-red); }
.nv-video-frame { aspect-ratio:16/9; border-radius:var(--nv-r3); overflow:hidden; box-shadow:var(--sh-xl); }
.nv-video-frame iframe { width:100%; height:100%; border:none; display:block; }

/* ============================================================
   POST SINGLE
============================================================ */
.nv-post-header { max-width:820px; margin:0 auto; padding:2.5rem 0 1.5rem; }
.nv-post-cats { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.85rem; }
.nv-post-title { font-family:var(--font-display); font-size:clamp(1.6rem,4vw,2.8rem); font-weight:800; line-height:1.15; margin-bottom:1.25rem; }
.nv-post-meta { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding-bottom:1.25rem; border-bottom:1px solid var(--nv-border); }
.nv-post-author-wrap { display:flex; align-items:center; gap:.6rem; }
.nv-post-avatar { width:38px; height:38px; border-radius:50%; border:2px solid rgba(232,160,32,.4); }
.nv-post-author-name { font-family:var(--font-ui); font-weight:600; font-size:.82rem; color:var(--nv-gold); }
.nv-post-date { font-family:var(--font-ui); font-size:.75rem; color:var(--nv-text3); }
.nv-post-share { display:flex; gap:.4rem; margin-left:auto; }
.nv-share-btn {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.3rem .75rem; border-radius:20px;
  font-family:var(--font-ui); font-size:.68rem; font-weight:600;
  border:1px solid var(--nv-border); color:var(--nv-text3);
  transition:all .2s;
}
.nv-share-btn:hover { border-color:var(--nv-gold); color:var(--nv-gold); }
.nv-post-content { max-width:820px; margin:0 auto; padding:2rem 0; }
.nv-post-content p { margin-bottom:1.35rem; font-size:1.05rem; color:var(--nv-text2); line-height:1.8; }
.nv-post-content h2,.nv-post-content h3,.nv-post-content h4 { margin:2rem 0 .85rem; }
.nv-post-content blockquote {
  border-left:4px solid var(--nv-gold); padding:1rem 1.5rem;
  background:var(--nv-bg3); border-radius:0 var(--nv-r) var(--nv-r) 0;
  margin:1.5rem 0; font-family:var(--font-display); font-style:italic; font-size:1.1rem;
}
.nv-post-content img { border-radius:var(--nv-r3); margin:1.5rem 0; max-width:100%; }
.nv-incontent-ad { margin:2rem auto; text-align:center; }

/* Author Box */
.nv-author-box {
  display:flex; gap:1.25rem; align-items:flex-start;
  background:var(--nv-bg2); border:1px solid var(--nv-border);
  border-radius:var(--nv-r3); padding:1.5rem; margin:2rem 0;
}
.nv-author-box-avatar { border-radius:50%; border:2px solid rgba(232,160,32,.4); flex-shrink:0; }
.nv-author-box-name { font-family:var(--font-ui); font-weight:700; margin-bottom:.3rem; }
.nv-author-box-bio  { font-size:.85rem; color:var(--nv-text3); }

/* ============================================================
   TAGS / BADGES
============================================================ */
.nv-tag {
  display:inline-block; background:var(--nv-bg3); border:1px solid var(--nv-border);
  color:var(--nv-text3); font-family:var(--font-ui); font-size:.65rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; padding:.2rem .6rem; border-radius:3px;
  transition:all .18s;
}
.nv-tag:hover { border-color:var(--nv-gold); color:var(--nv-gold); }

.nv-badge { display:inline-flex; align-items:center; padding:.18rem .55rem; border-radius:20px; font-family:var(--font-ui); font-size:.62rem; font-weight:700; }
.nv-badge-live { background:rgba(232,64,32,.2); color:var(--nv-red); animation:pulseBadge 1.5s infinite; }
.nv-badge-new  { background:rgba(232,64,32,.12); color:var(--nv-red); }
.nv-badge-hot  { background:rgba(232,160,32,.12); color:var(--nv-gold); }
@keyframes pulseBadge { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ============================================================
   FOOTER
============================================================ */
.nv-footer {
  background: var(--nv-bg2);
  border-top: 1px solid var(--nv-border);
  margin-top: 3rem;
}
.nv-footer-top { padding: 3rem 0 2rem; }
.nv-footer-brand p { font-size:.82rem; color:var(--nv-text3); margin:1rem 0; max-width:280px; line-height:1.7; }
.nv-footer-socials { display:flex; gap:.4rem; margin-top:.5rem; }
.nv-footer-social {
  width:34px; height:34px; border-radius:var(--nv-r);
  background:var(--nv-bg3); border:1px solid var(--nv-border);
  color:var(--nv-text3); display:flex; align-items:center; justify-content:center;
  font-size:.85rem; transition:all .2s;
}
.nv-footer-social:hover { background:var(--nv-gold); color:#000; border-color:var(--nv-gold); transform:translateY(-2px); }
.nv-footer-heading {
  font-family:var(--font-ui); font-weight:700; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--nv-text);
  margin-bottom:.85rem; padding-bottom:.5rem;
  border-bottom:1px solid rgba(232,160,32,.2);
}
.nv-footer-links { display:flex; flex-direction:column; gap:.4rem; }
.nv-footer-link {
  font-family:var(--font-ui); font-size:.8rem; color:var(--nv-text3);
  display:flex; align-items:center; gap:.4rem; transition:color .18s;
}
.nv-footer-link::before { content:'›'; color:var(--nv-gold); font-size:.9rem; }
.nv-footer-link:hover { color:var(--nv-gold); }
.nv-newsletter-input {
  width:100%; background:var(--nv-bg3); border:1px solid var(--nv-border);
  color:var(--nv-text); border-radius:var(--nv-r); padding:.6rem .85rem;
  font-size:.82rem; font-family:var(--font-ui); margin-bottom:.5rem;
  transition:border-color .2s;
}
.nv-newsletter-input:focus { outline:none; border-color:var(--nv-gold); }
.nv-newsletter-btn {
  width:100%; background:var(--nv-gold); color:#000; border:none;
  border-radius:var(--nv-r); padding:.6rem 1rem; font-family:var(--font-ui);
  font-weight:700; font-size:.78rem; cursor:pointer; transition:background .2s;
}
.nv-newsletter-btn:hover { background:var(--nv-gold-dark); }
.nv-footer-bottom {
  border-top:1px solid var(--nv-border); padding:1.1rem 0;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.5rem;
}
.nv-footer-copy { font-family:var(--font-ui); font-size:.72rem; color:var(--nv-text3); }
.nv-footer-legal { display:flex; gap:1.25rem; }
.nv-footer-legal a { font-family:var(--font-ui); font-size:.7rem; color:var(--nv-text4); transition:color .18s; }
.nv-footer-legal a:hover { color:var(--nv-gold); }

/* ============================================================
   LOGIN / REGISTER PAGES
============================================================ */
.nv-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: radial-gradient(ellipse at 30% 40%, rgba(232,160,32,.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 60%, rgba(155,32,232,.06) 0%, transparent 60%),
              var(--nv-bg);
}
.nv-auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--nv-bg2);
  border: 1px solid var(--nv-border2);
  border-radius: var(--nv-r4);
  overflow: hidden;
  box-shadow: var(--sh-xl);
}
.nv-auth-card-header {
  padding: 2.5rem 2rem 1.5rem;
  text-align: center;
  border-bottom: 1px solid var(--nv-border);
  background: linear-gradient(135deg, rgba(232,160,32,.06), transparent);
}
.nv-auth-card-header .nv-logo { justify-content: center; margin-bottom: 1.5rem; }
.nv-auth-title { font-family:var(--font-display); font-size:1.6rem; font-weight:800; margin-bottom:.3rem; }
.nv-auth-subtitle { font-family:var(--font-ui); font-size:.82rem; color:var(--nv-text3); }
.nv-auth-card-body { padding: 2rem; }
.nv-auth-tabs {
  display: flex; gap: 0;
  background: var(--nv-bg3);
  border-radius: var(--nv-r2);
  padding: 3px;
  margin-bottom: 1.75rem;
}
.nv-auth-tab {
  flex: 1; text-align:center;
  padding:.5rem; border-radius:7px;
  font-family:var(--font-ui); font-weight:600; font-size:.82rem;
  color:var(--nv-text3); cursor:pointer; transition:all .2s;
  border: none; background: transparent;
}
.nv-auth-tab.active { background:var(--nv-gold); color:#000; }
.nv-form-group { margin-bottom:1.1rem; }
.nv-form-label { display:block; font-family:var(--font-ui); font-size:.75rem; font-weight:600; color:var(--nv-text2); margin-bottom:.4rem; }
.nv-form-input {
  width:100%; background:var(--nv-bg3); border:1px solid var(--nv-border2);
  color:var(--nv-text); border-radius:var(--nv-r2); padding:.7rem 1rem;
  font-family:var(--font-ui); font-size:.88rem; transition:all .22s;
}
.nv-form-input:focus { outline:none; border-color:var(--nv-gold); box-shadow:0 0 0 3px rgba(232,160,32,.12); }
.nv-form-input.error { border-color:var(--nv-red); }
.nv-form-input::placeholder { color:var(--nv-text4); }
.nv-form-submit {
  width:100%; padding:.8rem; background:var(--nv-gold); color:#000;
  border:none; border-radius:var(--nv-r2); font-family:var(--font-ui);
  font-weight:700; font-size:.9rem; cursor:pointer; transition:all .22s;
  margin-top:.5rem;
}
.nv-form-submit:hover { background:var(--nv-gold-dark); transform:translateY(-1px); box-shadow:var(--sh-gold); }
.nv-form-divider {
  display:flex; align-items:center; gap:1rem; margin:1.25rem 0;
  font-family:var(--font-ui); font-size:.72rem; color:var(--nv-text4);
}
.nv-form-divider::before,.nv-form-divider::after { content:''; flex:1; height:1px; background:var(--nv-border); }
.nv-form-msg { font-family:var(--font-ui); font-size:.78rem; margin-top:.6rem; padding:.6rem .85rem; border-radius:var(--nv-r); }
.nv-form-msg.success { background:rgba(32,200,120,.1); border:1px solid rgba(32,200,120,.2); color:var(--nv-green); }
.nv-form-msg.error   { background:rgba(232,64,32,.1);   border:1px solid rgba(232,64,32,.2);   color:var(--nv-red);   }
.nv-auth-footer { padding:1.25rem 2rem; border-top:1px solid var(--nv-border); text-align:center; font-family:var(--font-ui); font-size:.78rem; color:var(--nv-text3); }
.nv-auth-footer a { color:var(--nv-gold); font-weight:600; }

/* ============================================================
   DASHBOARD (Ads)
============================================================ */
.nvads-dashboard {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 80vh;
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-r4);
  overflow: hidden;
  margin: 1.5rem 0;
  background: var(--nv-bg);
}
.nvads-dash-sidebar {
  background: var(--nv-bg2);
  border-right: 1px solid var(--nv-border);
  padding: 1.5rem 0;
}
.nvads-dash-main { padding: 2rem; background: var(--nv-bg); overflow-y: auto; }

/* ============================================================
   SKELETON LOADING
============================================================ */
.nv-skeleton {
  background: linear-gradient(90deg, var(--nv-bg3) 25%, var(--nv-bg4) 50%, var(--nv-bg3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--nv-r);
}
@keyframes shimmer { from{background-position:200% 0} to{background-position:-200% 0} }

/* ============================================================
   PAGINATION
============================================================ */
.nv-pagination { display:flex; align-items:center; justify-content:center; gap:.35rem; padding:2rem 0; }
.nv-page-btn {
  min-width:36px; height:36px; border-radius:var(--nv-r);
  background:var(--nv-bg2); border:1px solid var(--nv-border);
  color:var(--nv-text2); font-family:var(--font-ui); font-size:.8rem; font-weight:600;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s;
  padding:0 .75rem;
}
.nv-page-btn:hover, .nv-page-btn.active { background:var(--nv-gold); border-color:var(--nv-gold); color:#000; }

/* ============================================================
   BUTTONS
============================================================ */
.nv-btn {
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-ui); font-weight:600; font-size:.8rem;
  padding:.55rem 1.25rem; border-radius:var(--nv-r); border:1.5px solid transparent;
  cursor:pointer; transition:all .2s; text-decoration:none;
}
.nv-btn-primary { background:var(--nv-gold); color:#000; border-color:var(--nv-gold); }
.nv-btn-primary:hover { background:var(--nv-gold-dark); transform:translateY(-1px); }
.nv-btn-outline { border-color:var(--nv-border2); color:var(--nv-text2); }
.nv-btn-outline:hover { border-color:var(--nv-gold); color:var(--nv-gold); }
.nv-btn-ghost  { color:var(--nv-gold); }
.nv-btn-ghost:hover { background:var(--nv-gold-glow); }
.nv-btn-sm { padding:.35rem .85rem; font-size:.72rem; }
.nv-btn-lg { padding:.75rem 1.75rem; font-size:.88rem; }

/* ============================================================
   LOAD MORE
============================================================ */
.nv-load-more { text-align:center; padding:2rem 0; }
#nv-load-more-btn:disabled { opacity:.5; cursor:not-allowed; }

/* ============================================================
   RESPONSIVE — BOOTSTRAP OVERRIDES
============================================================ */
@media (max-width:1200px) { .nv-ad-728x90 { width:100%; } }
@media (max-width:992px)  {
  .nv-header-ad { display:none; }
  .nv-topbar { display:none; }
}
@media (max-width:768px)  {
  :root { --nav-h: 56px; }
  .nv-nav { display:none; }
  .nv-hamburger { display:flex; }
  .nv-btn-login, .nv-btn-register { display:none; }
  .nv-player-progress { display:none; }
  .nvads-dashboard { grid-template-columns:1fr; }
  .nvads-dash-sidebar { border-right:none; border-bottom:1px solid var(--nv-border); }
}

/* ============================================================
   POPUP AD
============================================================ */
.nv-popup-ad {
  position:fixed; inset:0;
  background:rgba(0,0,0,.75);
  z-index:3000;
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  opacity:0; visibility:hidden; transition:all .3s;
}
.nv-popup-ad.show { opacity:1; visibility:visible; }
.nv-popup-inner {
  position:relative; max-width:700px; width:100%;
  background:var(--nv-bg3); border-radius:var(--nv-r4); overflow:hidden;
  box-shadow:var(--sh-xl); animation:popIn .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn { from{transform:scale(.85);opacity:0} to{transform:scale(1);opacity:1} }
.nv-popup-close {
  position:absolute; top:.75rem; right:.75rem;
  width:28px; height:28px; border-radius:50%;
  background:rgba(0,0,0,.6); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; cursor:pointer; z-index:10;
  transition:background .2s; border:none;
}
.nv-popup-close:hover { background:var(--nv-red); }

/* ============================================================
   PRINT
============================================================ */
@media print {
  .nv-header,.nv-nav,.nv-ticker,.nv-footer,.nv-player,.nv-ad-zone,.nv-sidebar { display:none!important; }
}