/* ============================================================
 * MediaNet Cinematic — visual overhaul (2026-05-16)
 * Loaded AFTER medianet-2026.css. Replaces gradient salad,
 * applies design.md tokens, kills cliché AI-aesthetic.
 *
 * Philosophy: poster art is the design. Chrome recedes.
 * Red is rationed. No gradients. Hairlines, not shadows.
 * ============================================================ */

/* ---------- NUCLEAR — kill ALL gradient text effects on chrome ---------- */
.logo, .logo *, .np-logo, .np-logo *,
.brand, .brand *, .brand-text, .brand-mark,
.jarvis-title, .ai-chat-title, .np-jarvis,
[class*="brand-text"], [class*="logo-text"], [class*="logo-mark"] {
  -webkit-text-fill-color: currentColor !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
}

/* ---------- Logo overhaul ---------- */
/* Kill ALL old gradient + image backgrounds on logo parts */
.logo, .logo-mark, .logo-text,
.np-logo, .np-logo .logo-text, .np-logo .logo-mark,
.brand-text, .brand-mark {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* The actual logo composition: bold neutral "M" mark + "edia" muted + "Net" red */
.logo {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 1px !important;
  color: var(--mn-on-surface) !important;
  text-decoration: none !important;
  font-family: var(--mn-font-headline) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem) !important;
  line-height: 1 !important;
  height: auto !important;
  width: auto !important;
}
.logo-mark {
  color: var(--mn-primary) !important;
  font-family: var(--mn-font-display) !important;
  font-weight: 600 !important;
  font-size: 1.15em !important;
  margin-right: 1px !important;
  font-variation-settings: "opsz" 96 !important;
}
.logo-text {
  color: var(--mn-on-surface) !important;
  font-family: var(--mn-font-headline) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

/* Avatar — drop the pink→red→violet gradient, single tonal disk */
.avatar.has-initial,
.np-avatar,
.profile-avatar {
  background: var(--mn-surface-container-hi) !important;
  color: var(--mn-on-surface) !important;
  font-family: var(--mn-font-headline) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  border: 1px solid var(--mn-outline) !important;
  box-shadow: none !important;
}
.avatar.has-initial:hover,
.np-avatar:hover {
  border-color: var(--mn-secondary) !important;
  background: var(--mn-surface-container-hh) !important;
}

/* ---------- Body + base ---------- */
html, body {
  background: var(--mn-bg) !important;
  color: var(--mn-on-surface) !important;
  font-family: var(--mn-font-body) !important;
}

/* ---------- Navigation ---------- */
.np-nav,
.nav-primary,
header.app-header {
  background: var(--mn-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--mn-outline-faint) !important;
  box-shadow: none !important;
}

/* Nav tab pills — small-caps, no chrome until active */
.np-btn,
.nav-tool,
.nav-tab {
  background: transparent !important;
  color: var(--mn-on-surface-variant) !important;
  font-family: var(--mn-font-body) !important;
  font-size: var(--mn-text-cat-size) !important;
  font-weight: var(--mn-text-cat-weight) !important;
  letter-spacing: var(--mn-text-cat-track) !important;
  text-transform: uppercase !important;
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 0 var(--mn-space-3) !important;
  border-radius: var(--mn-radius-sm) !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: color var(--mn-dur-fast) var(--mn-ease-out),
              background var(--mn-dur-fast) var(--mn-ease-out);
}
.np-btn:hover,
.nav-tool:hover,
.nav-tab:hover {
  background: var(--mn-surface) !important;
  color: var(--mn-on-surface) !important;
}
.np-btn.active,
.np-btn[aria-current="true"],
.nav-tab.active,
.nav-tab[aria-current="true"] {
  background: var(--mn-surface-container) !important;
  color: var(--mn-on-surface) !important;
}
/* Kill the gradient underline */
.np-btn::after, .nav-tab::after { display: none !important; }

/* ---------- Hero ---------- */
.hero,
.np-hero,
section.hero {
  min-height: 75vh !important;
  background: var(--mn-bg) !important;
  border-bottom: 1px solid var(--mn-outline-faint) !important;
}

.hero-content,
.np-hero-content {
  padding: var(--mn-space-12) var(--mn-page-padding) !important;
}

/* Hero title — Fraunces serif, ONE per screen */
.hero-title,
.np-hero-title,
.hero h1,
.np-hero h1 {
  font-family: var(--mn-font-display) !important;
  font-weight: 500 !important;
  font-size: var(--mn-text-hero-size) !important;
  line-height: var(--mn-text-hero-line) !important;
  letter-spacing: var(--mn-text-hero-track) !important;
  color: var(--mn-on-surface) !important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.55) !important;
  margin: 0 0 var(--mn-space-4) 0 !important;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}

/* Hero meta strip — small-caps catalogue voice */
.hero-meta,
.np-hero-meta,
.hero-info {
  font-family: var(--mn-font-body) !important;
  font-size: var(--mn-text-cat-size) !important;
  font-weight: 700 !important;
  letter-spacing: var(--mn-text-cat-track) !important;
  text-transform: uppercase !important;
  color: var(--mn-on-surface-variant) !important;
  display: flex !important;
  gap: var(--mn-space-3) !important;
  align-items: center !important;
  margin-bottom: var(--mn-space-6) !important;
}
.hero-meta > * + *::before,
.np-hero-meta > * + *::before {
  content: "·";
  color: var(--mn-on-surface-faint);
  margin-right: var(--mn-space-3);
}

/* Match-percent — neutralize the Netflix-green */
.match-percent,
.match-score {
  color: var(--mn-secondary) !important;
  font-weight: 700 !important;
}

/* Hero overview text */
.hero-overview,
.np-hero-overview,
.hero-description {
  font-family: var(--mn-font-body) !important;
  font-size: var(--mn-text-body-lg-size) !important;
  line-height: var(--mn-text-body-lg-line) !important;
  color: var(--mn-on-surface-variant) !important;
  max-width: 56ch !important;
  margin: 0 0 var(--mn-space-6) 0 !important;
}

/* Hero CTAs — primary red Play, ghost Info */
.btn-play,
.hero-play,
.hero-cta-primary {
  background: var(--mn-primary) !important;
  color: var(--mn-on-primary) !important;
  font-family: var(--mn-font-headline) !important;
  font-weight: 700 !important;
  font-size: var(--mn-text-h-md-size) !important;
  height: var(--mn-control-h) !important;
  padding: 0 var(--mn-space-6) !important;
  border-radius: var(--mn-radius) !important;
  border: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--mn-space-2) !important;
  cursor: pointer;
  transition: background var(--mn-dur-fast) var(--mn-ease-out),
              transform var(--mn-dur-fast) var(--mn-ease-out);
  box-shadow: none !important;
}
.btn-play:hover, .hero-play:hover, .hero-cta-primary:hover {
  background: var(--mn-primary-hover) !important;
  transform: translateY(-1px);
}
.btn-play:active, .hero-play:active { transform: translateY(0); }

.btn-info,
.hero-info-btn,
.hero-cta-secondary {
  background: var(--mn-surface-container-hi) !important;
  color: var(--mn-on-surface) !important;
  border: 1px solid var(--mn-outline) !important;
  font-family: var(--mn-font-headline) !important;
  font-weight: 700 !important;
  font-size: var(--mn-text-h-md-size) !important;
  height: var(--mn-control-h) !important;
  padding: 0 var(--mn-space-6) !important;
  border-radius: var(--mn-radius) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--mn-space-2) !important;
  cursor: pointer;
  transition: background var(--mn-dur-fast) var(--mn-ease-out),
              border-color var(--mn-dur-fast) var(--mn-ease-out);
  box-shadow: none !important;
}
.btn-info:hover { background: var(--mn-surface-container-hh) !important; border-color: var(--mn-on-surface-variant) !important; }

/* ---------- Row titles ---------- */
.row-title,
.sec-title,
section h2,
.shelf-title {
  font-family: var(--mn-font-headline) !important;
  font-size: var(--mn-text-h-lg-size) !important;
  font-weight: 700 !important;
  line-height: var(--mn-text-h-lg-line) !important;
  letter-spacing: var(--mn-text-h-lg-track) !important;
  color: var(--mn-on-surface) !important;
  text-transform: none !important;
  margin: 0 0 var(--mn-space-4) 0 !important;
}

/* Section h3 — sub-rows like "Top Acțiune" */
.row-subtitle,
.sec-subtitle {
  font-family: var(--mn-font-body) !important;
  font-size: var(--mn-text-cat-size) !important;
  font-weight: 700 !important;
  letter-spacing: var(--mn-text-cat-track) !important;
  text-transform: uppercase !important;
  color: var(--mn-on-surface-variant) !important;
}

/* ---------- Cards ----------
   IMPORTANT: use background-COLOR, NOT shorthand `background:`. The shorthand
   resets `background-image` to `initial`, which kills the poster art that
   app.js sets inline (e.g. `style="background-image: url(...)"`). */
.card,
.np-card,
.row-card {
  background-color: var(--mn-surface-container) !important;
  border: 1px solid var(--mn-outline-faint) !important;
  border-radius: var(--mn-radius-md) !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: border-color var(--mn-dur-normal) var(--mn-ease-out),
              background-color var(--mn-dur-normal) var(--mn-ease-out),
              transform var(--mn-dur-normal) var(--mn-ease-out);
}
.card:hover, .np-card:hover, .row-card:hover {
  border-color: var(--mn-outline) !important;
  background-color: var(--mn-surface-container-hi) !important;
  transform: translateY(-2px) scale(1.025) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px var(--mn-secondary) !important;
}
.card .meta,
.card-meta {
  font-family: var(--mn-font-body) !important;
  font-size: var(--mn-text-meta-size) !important;
  letter-spacing: var(--mn-text-meta-track) !important;
  color: var(--mn-on-surface-variant) !important;
  font-variant-numeric: tabular-nums;
  padding: var(--mn-space-2) var(--mn-space-3) !important;
}
.card .title,
.card-title {
  font-family: var(--mn-font-headline) !important;
  font-size: var(--mn-text-row-size) !important;
  font-weight: 600 !important;
  letter-spacing: var(--mn-text-row-track) !important;
  color: var(--mn-on-surface) !important;
  padding: var(--mn-space-2) var(--mn-space-3) 0 !important;
}

/* ---------- Modal ---------- */
.modal,
#itemModal,
.item-modal,
.np-modal {
  background: var(--mn-surface) !important;
  border: 1px solid var(--mn-outline-faint) !important;
  border-radius: var(--mn-radius-lg) !important;
  box-shadow: 0 24px 96px rgba(0,0,0,0.75) !important;
  backdrop-filter: none !important;
}
.modal-overlay,
.np-modal-backdrop,
.modal-backdrop {
  background: var(--mn-scrim) !important;
  opacity: var(--mn-scrim-opacity-strong) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal h2, .modal-title,
#itemModal h2 {
  font-family: var(--mn-font-display) !important;
  font-weight: 500 !important;
  font-size: var(--mn-text-modal-size) !important;
  line-height: var(--mn-text-modal-line) !important;
  letter-spacing: var(--mn-text-modal-track) !important;
  color: var(--mn-on-surface) !important;
}

/* ---------- Search box ---------- */
.search-box,
#searchInput,
.search-input {
  background: var(--mn-surface-container) !important;
  border: 1px solid var(--mn-outline) !important;
  color: var(--mn-on-surface) !important;
  font-family: var(--mn-font-body) !important;
  font-size: var(--mn-text-body-md-size) !important;
  height: var(--mn-control-h) !important;
  min-height: 44px !important;
  padding: 0 var(--mn-space-4) !important;
  border-radius: var(--mn-radius) !important;
  box-shadow: none !important;
  transition: border-color var(--mn-dur-fast) var(--mn-ease-out);
}
.search-box:focus-within,
#searchInput:focus,
.search-input:focus {
  border-color: var(--mn-secondary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mn-secondary) 30%, transparent) !important;
}

/* ---------- Badge ---------- */
.badge, .chip, .tag, .pill {
  background: var(--mn-secondary-container) !important;
  color: var(--mn-on-secondary-container) !important;
  font-family: var(--mn-font-body) !important;
  font-size: var(--mn-text-cat-size) !important;
  font-weight: var(--mn-text-cat-weight) !important;
  letter-spacing: var(--mn-text-cat-track) !important;
  text-transform: uppercase !important;
  padding: 4px 8px !important;
  border-radius: var(--mn-radius-sm) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ---------- Targeted gradient kills (NO blanket catch-all — that broke
     card poster background-images by accident) ---------- */
.brand-gradient, .text-gradient, .logo-gradient,
.np-jarvis-gradient, .ai-orb-gradient,
.np-btn-gradient::before, .hero-cta-glow {
  background-image: none !important;
  filter: none !important;
  -webkit-text-fill-color: currentColor !important;
}

/* ---------- Mobile responsive ---------- */
@media (max-width: 768px), (pointer: coarse) {
  /* All interactive controls hit 44×44 min — fixes 1067 sub-target violations */
  .np-btn, .nav-tool, .nav-tab,
  .btn, button, [role="button"],
  input, select, textarea, .search-box {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  /* Hero scales down */
  .hero-title, .np-hero-title { font-size: clamp(2rem, 8vw, 3.5rem) !important; }
  /* Page padding tighter */
  :root { --mn-page-padding: 16px !important; }
}

/* ============================================================
 * BATCH 2 — Music, Radio, JARVIS, Watch page (Faza 2)
 * ============================================================ */

/* ---------- Music section ---------- */
.music-section,
.mui-section,
#musicTab,
[data-section="music"] {
  background: var(--mn-bg) !important;
  color: var(--mn-on-surface) !important;
}

/* Now-playing bar — minimal, single-line */
.mui-now-playing,
.np-now-playing,
.music-now-bar {
  background: var(--mn-surface) !important;
  border-top: 1px solid var(--mn-outline-faint) !important;
  border-bottom: 1px solid var(--mn-outline-faint) !important;
  padding: var(--mn-space-3) var(--mn-page-padding) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.mui-track,
.music-track,
.track-item {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--mn-radius-sm) !important;
  padding: var(--mn-space-2) var(--mn-space-3) !important;
  transition: background var(--mn-dur-fast) var(--mn-ease-out),
              border-color var(--mn-dur-fast) var(--mn-ease-out);
}
.mui-track:hover, .music-track:hover, .track-item:hover {
  background: var(--mn-surface-container) !important;
  border-color: var(--mn-outline-faint) !important;
}
.mui-track.playing, .music-track.playing {
  background: var(--mn-surface-container) !important;
  border-color: var(--mn-secondary) !important;
}
.mui-track-title, .track-title, .music-title {
  font-family: var(--mn-font-headline) !important;
  font-weight: 600 !important;
  color: var(--mn-on-surface) !important;
}
.mui-track-artist, .track-artist, .music-artist {
  font-family: var(--mn-font-body) !important;
  font-size: var(--mn-text-body-sm-size) !important;
  color: var(--mn-on-surface-variant) !important;
}
.mui-track-duration, .track-duration {
  font-family: var(--mn-font-mono) !important;
  font-size: var(--mn-text-body-sm-size) !important;
  color: var(--mn-on-surface-faint) !important;
  font-variant-numeric: tabular-nums;
}

/* Music play button — small ember disc */
.mui-play-btn, .music-play-btn, .play-btn-mini {
  background: var(--mn-primary) !important;
  color: var(--mn-on-primary) !important;
  border: 0 !important;
  border-radius: var(--mn-radius-full) !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  transition: background var(--mn-dur-fast) var(--mn-ease-out),
              transform var(--mn-dur-fast) var(--mn-ease-out);
}
.mui-play-btn:hover, .music-play-btn:hover {
  background: var(--mn-primary-hover) !important;
  transform: scale(1.08);
}

/* ---------- Radio section ---------- */
.rui-section, .radio-section, #radioTab {
  background: var(--mn-bg) !important;
}
.rui-station, .radio-station {
  background: var(--mn-surface-container) !important;
  border: 1px solid var(--mn-outline-faint) !important;
  border-radius: var(--mn-radius-md) !important;
  padding: var(--mn-space-3) !important;
  transition: border-color var(--mn-dur-fast) var(--mn-ease-out),
              background var(--mn-dur-fast) var(--mn-ease-out);
  box-shadow: none !important;
}
.rui-station:hover, .radio-station:hover {
  border-color: var(--mn-outline) !important;
  background: var(--mn-surface-container-hi) !important;
}
.rui-station.playing, .radio-station.playing {
  border-color: var(--mn-primary) !important;
  background: var(--mn-surface-container-hi) !important;
}
.rui-station-name, .radio-station-name {
  font-family: var(--mn-font-headline) !important;
  font-weight: 600 !important;
  color: var(--mn-on-surface) !important;
}
.rui-station-meta, .radio-station-meta {
  font-family: var(--mn-font-body) !important;
  font-size: var(--mn-text-body-sm-size) !important;
  color: var(--mn-on-surface-variant) !important;
  font-variant-numeric: tabular-nums;
}

/* ---------- JARVIS AI chat ---------- */
#jarvis-modal, .jarvis-modal, .ai-chat-modal {
  background: var(--mn-surface) !important;
  border: 1px solid var(--mn-outline-faint) !important;
  border-radius: var(--mn-radius-lg) !important;
  box-shadow: 0 24px 96px rgba(0,0,0,0.7) !important;
  backdrop-filter: none !important;
}
.jarvis-header, .ai-chat-header {
  background: var(--mn-surface) !important;
  border-bottom: 1px solid var(--mn-outline-faint) !important;
  padding: var(--mn-space-4) var(--mn-space-6) !important;
}
.jarvis-title, .ai-chat-title {
  font-family: var(--mn-font-headline) !important;
  font-weight: 700 !important;
  font-size: var(--mn-text-h-md-size) !important;
  color: var(--mn-on-surface) !important;
}
.jarvis-subtitle, .ai-chat-subtitle {
  font-family: var(--mn-font-body) !important;
  font-size: var(--mn-text-body-sm-size) !important;
  color: var(--mn-on-surface-variant) !important;
}

/* Chat bubbles */
.jarvis-message, .ai-msg, .chat-bubble {
  padding: var(--mn-space-3) var(--mn-space-4) !important;
  border-radius: var(--mn-radius-md) !important;
  margin-bottom: var(--mn-space-2) !important;
  font-family: var(--mn-font-body) !important;
  font-size: var(--mn-text-body-md-size) !important;
  line-height: var(--mn-text-body-md-line) !important;
  border: 1px solid var(--mn-outline-faint) !important;
  box-shadow: none !important;
}
.jarvis-message.user, .ai-msg.user, .chat-bubble.user {
  background: var(--mn-primary-container) !important;
  color: var(--mn-on-primary-container) !important;
  border-color: transparent !important;
  margin-left: auto !important;
  max-width: 80% !important;
}
.jarvis-message.ai, .ai-msg.assistant, .chat-bubble.assistant {
  background: var(--mn-surface-container) !important;
  color: var(--mn-on-surface) !important;
  max-width: 90% !important;
}

/* Prompt input bar */
.jarvis-input, .ai-chat-input, #ai-ask-input {
  background: var(--mn-surface-container) !important;
  border: 1px solid var(--mn-outline) !important;
  color: var(--mn-on-surface) !important;
  font-family: var(--mn-font-body) !important;
  font-size: var(--mn-text-body-md-size) !important;
  padding: var(--mn-space-3) var(--mn-space-4) !important;
  border-radius: var(--mn-radius-md) !important;
  min-height: 48px !important;
  resize: none;
  transition: border-color var(--mn-dur-fast) var(--mn-ease-out);
}
.jarvis-input:focus, .ai-chat-input:focus, #ai-ask-input:focus {
  border-color: var(--mn-secondary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mn-secondary) 30%, transparent) !important;
}

.jarvis-send, .ai-chat-send {
  background: var(--mn-primary) !important;
  color: var(--mn-on-primary) !important;
  border: 0 !important;
  border-radius: var(--mn-radius) !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 var(--mn-space-4) !important;
  font-family: var(--mn-font-headline) !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: background var(--mn-dur-fast) var(--mn-ease-out);
}
.jarvis-send:hover, .ai-chat-send:hover {
  background: var(--mn-primary-hover) !important;
}

/* ---------- Watch page (player tab) ---------- */
.player-header {
  background: linear-gradient(180deg, rgba(8,9,11,0.92), rgba(8,9,11,0)) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border-bottom: 0 !important;
  height: 56px !important;
  font-family: var(--mn-font-body) !important;
}
.player-header .back-btn {
  background: rgba(40,40,48,0.7) !important;
  border: 1px solid var(--mn-outline) !important;
  color: var(--mn-on-surface) !important;
  font-family: var(--mn-font-headline) !important;
  font-weight: 600 !important;
  font-size: var(--mn-text-body-md-size) !important;
  border-radius: var(--mn-radius) !important;
  padding: var(--mn-space-2) var(--mn-space-3) !important;
  min-height: 44px !important;
  transition: background var(--mn-dur-fast) var(--mn-ease-out);
}
.player-header .back-btn:hover {
  background: var(--mn-surface-container-hi) !important;
}
.player-header .player-title {
  font-family: var(--mn-font-display) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  color: var(--mn-on-surface) !important;
}
.player-header .player-provider {
  background: var(--mn-surface-container-hi) !important;
  border: 1px solid var(--mn-outline-faint) !important;
  font-family: var(--mn-font-mono) !important;
  font-size: var(--mn-text-body-sm-size) !important;
  color: var(--mn-on-surface-variant) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 4px 10px !important;
  border-radius: var(--mn-radius-full) !important;
}
.switch-server {
  background: var(--mn-surface-container-hi) !important;
  color: var(--mn-on-surface) !important;
  border: 1px solid var(--mn-outline) !important;
  border-radius: var(--mn-radius) !important;
  min-height: 44px !important;
  padding: var(--mn-space-2) var(--mn-space-3) !important;
  font-family: var(--mn-font-headline) !important;
  font-weight: 600 !important;
  font-size: var(--mn-text-body-sm-size) !important;
  transition: background var(--mn-dur-fast) var(--mn-ease-out),
              border-color var(--mn-dur-fast) var(--mn-ease-out);
}
.switch-server:hover {
  background: var(--mn-surface-container-hh) !important;
  border-color: var(--mn-secondary) !important;
}

/* Anime failure overlay — refresh in cinematic style */
.anime-fail-card {
  background: var(--mn-surface) !important;
  border: 1px solid var(--mn-outline) !important;
  border-radius: var(--mn-radius-lg) !important;
  box-shadow: 0 24px 96px rgba(0,0,0,0.7) !important;
}
.anime-fail-title {
  font-family: var(--mn-font-headline) !important;
  color: var(--mn-on-surface) !important;
}
.anime-fail-sub {
  color: var(--mn-on-surface-variant) !important;
}
.anime-fail-section {
  color: var(--mn-on-surface-faint) !important;
  font-family: var(--mn-font-body) !important;
}
.anime-fail-btn {
  background: var(--mn-surface-container-hi) !important;
  border: 1px solid var(--mn-outline) !important;
  color: var(--mn-on-surface) !important;
  border-radius: var(--mn-radius) !important;
  font-family: var(--mn-font-headline) !important;
  font-weight: 600 !important;
}
.anime-fail-btn:hover, .anime-fail-btn:focus-visible {
  background: var(--mn-surface-container-hh) !important;
  border-color: var(--mn-secondary) !important;
}
.anime-fail-btn.danger {
  background: transparent !important;
  border-color: var(--mn-primary-container) !important;
  color: var(--mn-error) !important;
}
.anime-fail-btn.danger:hover {
  background: var(--mn-primary-container) !important;
  color: var(--mn-on-primary-container) !important;
}

/* ---------- TV mode (1920+) ---------- */
@media (min-width: 1920px) {
  .np-btn, .nav-tool, .nav-tab {
    min-height: 56px !important;
    font-size: 0.875rem !important;
    padding: 0 var(--mn-space-4) !important;
  }
  .card .title, .card-title { font-size: 1.125rem !important; }
  /* Bigger focus ring for 10-foot UI */
  *:focus-visible {
    outline: 4px solid var(--mn-secondary) !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--mn-secondary) 40%, transparent) !important;
  }
}

/* ============================================================
 * BATCH 3 — Mobile bottom-tab nav + a11y polish
 * ============================================================ */

/* Bottom tab bar — only on mobile, replaces hamburger-hidden primary nav */
.mn-bottom-tabs {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--mn-surface);
  border-top: 1px solid var(--mn-outline);
  padding: var(--mn-space-2) var(--mn-space-3);
  padding-bottom: calc(var(--mn-space-2) + env(safe-area-inset-bottom));
  justify-content: space-around;
  align-items: center;
  gap: var(--mn-space-2);
}
/* 2026-05-20: target BOTH <button> (index.html) and <a> (sub-pages) so the
 * 6 tabs render consistently across all sections (Filme, TV, Muzică, Radio,
 * Cărți, AI). Previously only button was styled → <a> on sub-pages had no
 * flex sizing, no min-height, no active state. */
.mn-bottom-tabs > * {
  flex: 1 1 0;
  min-width: 0;          /* allow truncation in 6-tab row on narrow screens */
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: 0;
  color: var(--mn-on-surface-variant);
  font-family: var(--mn-font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--mn-radius-sm);
  text-decoration: none;  /* anchor default underline off */
  transition: color var(--mn-dur-fast) var(--mn-ease-out),
              background var(--mn-dur-fast) var(--mn-ease-out);
}
.mn-bottom-tabs > * .icon {
  font-size: 22px;
  line-height: 1;
}
.mn-bottom-tabs > *:hover,
.mn-bottom-tabs > *[aria-current="page"] {
  color: var(--mn-on-surface);
  background: var(--mn-surface-container);
}
.mn-bottom-tabs > *[aria-current="page"] {
  color: var(--mn-primary);
}
/* Truncate label text gracefully — 6 tabs at <360px get tight */
.mn-bottom-tabs > * > span:not(.icon) {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .mn-bottom-tabs { display: flex; }
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
  /* Hide redundant secondary tools on mobile — bottom bar covers nav */
  .navbar-row-secondary { display: none !important; }
}

/* Skip link — visible on focus, brass */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--mn-space-4);
  background: var(--mn-secondary) !important;
  color: var(--mn-on-secondary) !important;
  padding: var(--mn-space-3) var(--mn-space-4) !important;
  border-radius: var(--mn-radius) !important;
  font-family: var(--mn-font-headline) !important;
  font-weight: 700 !important;
  z-index: 1000;
  text-decoration: none !important;
  transition: top var(--mn-dur-fast) var(--mn-ease-out);
}
.skip-link:focus-visible {
  top: var(--mn-space-3);
  outline: 3px solid var(--mn-on-surface) !important;
  outline-offset: 2px !important;
}

/* Reduce-motion compliance for the cinematic.css transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* High-contrast mode tweaks */
@media (prefers-contrast: more) {
  :root {
    --mn-on-surface: #FFFFFF;
    --mn-on-surface-variant: #D4D2CC;
    --mn-outline: #6B6663;
  }
}