/* ============================================================================
   THEME: maxnxx — "Graphite Violet"
   ----------------------------------------------------------------------------
   Loaded AFTER style.min.css by views/maxnxx/partials/head.ejs, so every
   rule here overrides the default skin. Design language: minimalist neutral
   graphite (no color cast in the grays), a single soft LAVENDER-VIOLET
   accent (#9b8cff — muted, never neon), flat surfaces, hairline borders,
   5px corners, no lift/glow effects. Calm, typographic, modern.
   Most of the re-theme is a :root variable swap (style.css is fully
   variable-driven); the rest are targeted component restyles plus overrides
   for the handful of colors style.css hardcodes outside variables.
   ========================================================================== */

:root {
	--color-bg-primary: #141417;
	--color-bg-secondary: #1a1a1f;
	--color-bg-header: #17171b;
	--color-bg-nav: #1a1a1f;
	--color-bg-footer: #101013;
	--color-bg-card: #1a1a1f;
	--color-bg-card-hover: #202027;
	--color-bg-dark: #0d0d10;
	--color-text-primary: #ececf1;
	--color-text-muted: #8e8e99;
	--color-text-dim: #b4b4bf;
	--color-accent: #9b8cff;
	--color-accent-yellow: #b3a7ff;
	--color-border: hsla(240, 8%, 70%, .12);
	--color-overlay: rgba(10, 10, 14, .65);
	--color-search-bg: #101013;
	--color-search-bg-focus: #0d0d10;
	--color-search-border: hsla(240, 8%, 70%, .16);
	--color-search-placeholder: #6e6e7a;
	--color-suggest-bg: #1a1a1f;
	--color-suggest-border: hsla(240, 8%, 70%, .14);
	--radius-card: 5px;
	--radius-btn: 5px;
	--shadow-card: none;
	/* Theme-local tokens (mx- prefix, not used by style.css) */
	--mx-violet: #9b8cff;
	--mx-violet-bright: #b3a7ff;
	--mx-violet-soft: rgba(155, 140, 255, .12);
	--mx-line: hsla(240, 8%, 70%, .12);
}

/* The site's Light/Dark toggle adds body.dark-mode — this theme is dark by
   design, so both modes share the same palette. */
body.dark-mode {
	--color-bg-primary: #141417;
	--color-bg-secondary: #1a1a1f;
	--color-bg-header: #17171b;
	--color-bg-nav: #1a1a1f;
	--color-bg-footer: #101013;
	--color-bg-card: #1a1a1f;
	--color-bg-card-hover: #202027;
	--color-bg-dark: #0d0d10;
	--color-search-bg: #101013;
	--color-search-bg-focus: #0d0d10;
	--color-search-border: hsla(240, 8%, 70%, .16);
	--color-search-placeholder: #6e6e7a;
	--color-suggest-bg: #1a1a1f;
	--color-suggest-border: hsla(240, 8%, 70%, .14);
}

::selection {
	background: rgba(155, 140, 255, .4);
	color: #fff;
}

::-webkit-scrollbar-thumb {
	background: #38383f;
	border-radius: 4px;
}

/* ── Header — flat graphite, hairline bottom ────────────────────────────── */
.site-header {
	background: #17171b;
	border-bottom: 1px solid var(--mx-line);
	box-shadow: none;
}

.site-logo .logo-text {
	background: none;
	color: #f4f4f8;
	-webkit-text-fill-color: #f4f4f8;
	filter: none;
	font-weight: 600;
	letter-spacing: .5px;
}

.site-logo .logo-sub {
	color: var(--mx-violet);
}

.hdr-btn {
	color: #c4c4cf;
}

.hdr-btn:hover {
	background: var(--mx-violet-soft);
	color: var(--mx-violet-bright);
}

.header-search-desktop {
	background: var(--color-search-bg);
	border: 1px solid var(--color-search-border);
	border-radius: 5px;
}

.header-search-desktop:focus-within {
	border-color: var(--mx-violet);
	box-shadow: 0 0 0 3px rgba(155, 140, 255, .18);
}

.header-search-desktop button:hover {
	color: var(--mx-violet-bright);
}

/* ── Secondary nav — flat, violet underline active ──────────────────────── */
.secondary-nav {
	background: #17171b;
	border-bottom: 1px solid var(--mx-line);
}

.nav-item {
	border-radius: 5px;
}

.nav-icon,
.offcanvas-nav-link i,
.fa-venus {
	color: var(--mx-violet-bright);
}

.nav-item.active,
.nav-item:hover {
	background: transparent;
	border-color: transparent;
	box-shadow: inset 0 -2px 0 var(--mx-violet);
	color: var(--mx-violet-bright);
}

.nav-item--special.active,
.nav-item--special:hover {
	background: var(--mx-violet-soft);
	box-shadow: none;
	color: var(--mx-violet-bright);
}

.nav-ticker-label {
	background: var(--mx-violet);
	border-radius: 4px;
	color: #131318;
}

/* ── Video cards — flat, hairline, no lift ──────────────────────────────── */
.video-card {
	border: 1px solid var(--mx-line);
	transition: border-color .12s, background .12s;
}

.video-card:hover {
	border-color: rgba(155, 140, 255, .45);
	box-shadow: none;
	transform: none;
}

.video-duration,
.video-views {
	background: rgba(13, 13, 16, .85);
	border-radius: 3px;
}

.video-quality-badge {
	border-radius: 3px;
}

.video-quality-badge:is([data-hd], .hd) {
	background: var(--mx-violet);
	color: #131318;
	font-weight: 700;
}

.video-channel {
	background: #222229;
	border: 1px solid var(--mx-line);
	border-radius: 4px;
	color: #b4b4bf;
}

.video-channel:hover {
	background: var(--mx-violet-soft);
	border-color: rgba(155, 140, 255, .4);
	color: var(--mx-violet-bright);
}

.video-title a:hover {
	color: var(--mx-violet-bright);
}

/* ── Section headings — quiet, typographic ──────────────────────────────── */
.section-heading {
	border-bottom: 1px solid var(--mx-line);
	padding-bottom: 6px;
}

.section-title {
	color: #f4f4f8;
	font-weight: 600;
	letter-spacing: .3px;
}

/* ── Filter bar / tag pills — flat squares ──────────────────────────────── */
.filter-btn,
.tag-pill,
.page-kw-tag {
	border-radius: 5px;
}

.filter-btn:hover,
.filter-btn[aria-expanded=true],
.filter-wrap.is-active .filter-btn {
	border-color: var(--mx-violet);
	color: var(--mx-violet-bright);
}

.tag-pill:hover,
.page-kw-tag:hover {
	background: var(--mx-violet-soft);
	border-color: rgba(155, 140, 255, .4);
	color: var(--mx-violet-bright);
}

.filter-opt.active {
	color: var(--mx-violet-bright);
}

/* ── Pagination — flat, violet active (dark text for contrast) ──────────── */
.pgn-btn {
	background: #202027;
	border: 1px solid var(--mx-line);
	border-radius: 5px;
	color: #c4c4cf;
}

.pgn-btn:hover:not(:disabled):not(.pgn-active) {
	border-color: var(--mx-violet);
	color: var(--mx-violet-bright);
}

.pgn-btn.pgn-active {
	background: var(--mx-violet);
	border-color: var(--mx-violet);
	color: #131318;
	font-weight: 700;
}

.pgn-arrow {
	background: #202027;
	border: 1px solid rgba(155, 140, 255, .4);
	color: var(--mx-violet-bright);
}

.pgn-arrow:hover:not(:disabled) {
	background: var(--mx-violet);
	color: #131318;
}

.load-more-btn {
	background: var(--mx-violet);
	border: 0;
	border-radius: 5px;
	color: #131318;
	font-weight: 700;
}

.load-more-btn:hover {
	background: var(--mx-violet-bright);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
	background: #101013;
	border-top: 1px solid var(--mx-line);
}

/* ── Off-canvas / drawers / panels ──────────────────────────────────────── */
#mobile-menu .uk-offcanvas-bar,
.settings-panel,
.msearch-panel {
	background: #17171b;
}

.offcanvas-nav li a:hover,
.offcanvas-nav-link.active,
.offcanvas-nav-link:hover {
	background: var(--mx-violet-soft);
	color: var(--mx-violet-bright);
}

.sp-col-btn.active,
.sp-theme-btn.active,
.lang-card.active {
	background: var(--mx-violet);
	border-color: transparent;
	color: #131318;
}

/* ── Profile / country cards ────────────────────────────────────────────── */
.profile-card,
.country-card {
	border: 1px solid var(--mx-line);
}

.profile-card:hover,
.country-card:hover {
	border-color: var(--mx-violet);
}

/* ── Watch page — replace the default skin's hardcoded accents ──────────── */
.vw-tab-badge {
	background: var(--mx-violet);
	color: #131318;
}

.vw-side-title i {
	color: var(--mx-violet);
}

.ql-fhd {
	background: var(--mx-violet-soft);
	color: var(--mx-violet-bright);
}

.vw-badge--hd {
	background: var(--mx-violet-soft);
	border-color: rgba(155, 140, 255, .35);
	color: var(--mx-violet-bright);
}

.channel-src-xvs {
	color: var(--mx-violet-bright);
}

.ql-auto,
.vw-pl-q-badge.ql-auto {
	background: var(--mx-violet-soft);
	color: var(--mx-violet-bright);
}

/* ── Breadcrumbs / misc accents ─────────────────────────────────────────── */
.breadcrumb--chevron .breadcrumb-accent {
	background: var(--mx-violet);
}

.home-intro-brand {
	color: var(--mx-violet);
}

.skeleton-line:after,
.skeleton-thumb:after {
	background: linear-gradient(90deg, transparent, hsla(240, 8%, 70%, .05), transparent);
}