/* =========================================================================
   NAUGHTYSCROLL — "Native Shell" design system  (v3, full overhaul)
   Loaded via must-use plugin, after the TikSwipe theme CSS.

   HARD SAFETY RULES (a broken play button has cost this site 3 times):
     • CSS ONLY — no JS, no external @import.
     • NEVER set height on .swiper / .swiper-slide / .swiper-wrapper /
       .swiper-vertical (Swiper's vertical snap math owns those).
     • Every decorative overlay MUST be pointer-events:none.
     • Never hide .playvideo, .embed-play-button, .embed-content or the video.
   ========================================================================= */

:root {
	/* brand */
	--nsc-accent: #ff2d6f;
	--nsc-accent-2: #a445ff;
	--nsc-grad: linear-gradient(135deg, #ff2d6f 0%, #a445ff 100%);
	--nsc-glow: rgba(255, 45, 111, 0.35);

	/* layered surfaces (depth without borders) */
	--nsc-bg: #050507;
	--nsc-surface-1: #0d0d12;
	--nsc-surface-2: #16161d;
	--nsc-surface-3: #1f1f28;

	/* type */
	--nsc-text: #ffffff;
	--nsc-text-2: rgba(255, 255, 255, 0.72);
	--nsc-text-3: rgba(255, 255, 255, 0.48);
	--nsc-line: rgba(255, 255, 255, 0.09);

	/* geometry — 8pt system */
	--nsc-r-sm: 10px;
	--nsc-r-md: 16px;
	--nsc-r-lg: 24px;
	--nsc-r-pill: 999px;

	--nsc-safe-top: env(safe-area-inset-top, 0px);
	--nsc-safe-bottom: env(safe-area-inset-bottom, 0px);

	/* desktop stage width (portrait-first, like a phone) */
	--nsc-stage: 560px;
	--nsc-tabbar: 68px;
}

/* ---------- base ----------------------------------------------------- */
html,
body {
	background: var(--nsc-bg);
	overscroll-behavior: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
body.media-body {
	color: var(--nsc-text);
}
::selection {
	background: var(--nsc-accent);
	color: #fff;
}
* {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
*::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}
*::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.2);
	border-radius: var(--nsc-r-pill);
}

/* =========================================================================
   HEADER — floating, minimal, glass
   ========================================================================= */
body.media-body header {
	padding-top: var(--nsc-safe-top);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 100%);
	border: 0 !important;
}
header .logo a,
header .logo .navbar-brand {
	font-weight: 800 !important;
	letter-spacing: -0.03em !important;
	background: var(--nsc-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 2px 10px var(--nsc-glow));
}
header .menu ul li a {
	border-radius: var(--nsc-r-pill);
	font-weight: 600;
	transition: background-color 0.2s ease, color 0.2s ease;
}
@media (min-width: 768px) {
	header .menu ul li a {
		padding: 9px 16px !important;
	}
	header .menu ul li a:hover {
		background: rgba(255, 255, 255, 0.09);
	}
	header .menu ul li.current-menu-item > a {
		background: rgba(255, 45, 111, 0.16);
		color: var(--nsc-accent) !important;
	}
}
.display-switcher {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--nsc-r-md);
	background: rgba(255, 255, 255, 0.07);
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.display-switcher:hover {
	background: rgba(255, 255, 255, 0.15);
	transform: translateY(-1px);
}
.display-switcher svg {
	width: 21px;
	height: 21px;
}

/* =========================================================================
   THE STAGE
   Desktop: a centred "device" column. Width only — never height.
   The letterboxing of legacy 16:9 clips becomes an intentional device frame.
   ========================================================================= */
@media (min-width: 768px) {
	body.media-body #content.content {
		background:
			radial-gradient(900px 600px at 50% -10%, rgba(255, 45, 111, 0.13), transparent 60%),
			radial-gradient(800px 560px at 50% 110%, rgba(164, 69, 255, 0.12), transparent 58%),
			var(--nsc-bg);
	}
	body.media-body .swiper {
		width: min(var(--nsc-stage), calc(100vw - 48px)) !important;
		margin-left: auto !important;
		margin-right: auto !important;
		background: #000;
		box-shadow:
			0 0 0 1px rgba(255, 255, 255, 0.07),
			0 40px 120px rgba(0, 0, 0, 0.9),
			0 0 90px rgba(255, 45, 111, 0.07);
	}
}

body.media-body .swiper-slide {
	position: relative;
	background: #000;
}

/* Bottom scrim for legibility — pointer-events:none so it can never
   intercept the play tap. */
body.media-body .swiper-slide::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 46%;
	pointer-events: none;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.88) 0%,
		rgba(0, 0, 0, 0.55) 34%,
		rgba(0, 0, 0, 0) 100%
	);
}

/* Play affordance — modern glass disc instead of a bare triangle */
body.media-body .embed-play-button a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(14px) saturate(150%);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.22),
		0 12px 40px rgba(0, 0, 0, 0.55);
	transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2), background-color 0.22s ease;
}
body.media-body .embed-play-button a:hover {
	transform: scale(1.08);
	background: rgba(255, 255, 255, 0.22);
}
body.media-body .embed-play-button img {
	width: 30px !important;
	height: auto;
	margin-left: 4px; /* optical centring of the triangle */
}

/* =========================================================================
   INLINE PLAYBACK — no "opens its own page" takeover
   When a video starts, the theme adds .hidden to the whole UI, which reads as
   the video opening a separate full-screen page. Keep the app chrome visible
   so playback happens INSIDE the feed and you can keep scrolling.
   (CSS-only: we just refuse the .hidden class on these specific elements.)
   ========================================================================= */
body.media-body header.hidden,
body.media-body footer.hidden,
body.media-body .swiper-side.hidden,
body.media-body .single-content-infos.hidden {
	display: flex !important;
}
body.media-body .swiper-button-next.hidden,
body.media-body .swiper-button-prev.hidden {
	display: flex !important;
}

/* The close button was a hard white-on-pink cross — make it a subtle glass
   chip that matches the rest of the UI. */
body.media-body .close-fullscreen {
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	background: rgba(20, 20, 26, 0.6) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	opacity: 0.85;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
body.media-body .close-fullscreen:hover {
	opacity: 1;
	transform: scale(1.06);
}
body.media-body .close-fullscreen svg,
body.media-body .close-fullscreen img {
	width: 16px !important;
	height: 16px !important;
}

/* =========================================================================
   VIDEO META — overlaid caption block
   ========================================================================= */
body.media-body .single-content-infos {
	z-index: 3;
	width: calc(100% - 96px) !important;
	max-width: 620px;
	padding: 0 18px;
	bottom: calc(var(--nsc-tabbar) + 26px + var(--nsc-safe-bottom)) !important;
	box-sizing: border-box;
}
body.media-body .single-content-infos h1,
body.media-body .single-content-infos h2 {
	font-size: 18px !important;
	line-height: 1.34 !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em;
	margin: 0 0 10px !important;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
body.media-body .single-content-infos h2 a {
	color: #fff !important;
}
body.media-body .post-desc,
body.media-body .single-content-infos .post-desc p {
	font-size: 13.5px !important;
	line-height: 1.5 !important;
	color: var(--nsc-text-2) !important;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
/* views / duration as subtle glass chips */
body.media-body .post-datas {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}
body.media-body .post-views,
body.media-body .post-duration {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: var(--nsc-r-pill);
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-size: 11.5px !important;
	font-weight: 600;
	color: #fff !important;
}

/* Tag pills */
body.media-body .tags-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}
body.media-body .tags-list a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px !important;
	border-radius: var(--nsc-r-pill) !important;
	background: rgba(255, 255, 255, 0.11) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
	color: #fff !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
body.media-body .tags-list a:hover {
	background: var(--nsc-grad) !important;
	box-shadow: 0 6px 20px var(--nsc-glow);
	transform: translateY(-2px);
}

/* =========================================================================
   ACTION RAIL
   ========================================================================= */
body.media-body .swiper-side {
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	right: 8px !important;
	top: auto !important;
	bottom: calc(var(--nsc-tabbar) + 30px + var(--nsc-safe-bottom)) !important;
	transform: none !important;
	height: auto !important;
	width: 66px;
}
body.media-body .swiper-side a {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-width: 54px;
	min-height: 54px;
	border-radius: 50%;
	color: #fff;
	transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.3), background-color 0.18s ease;
}
body.media-body .swiper-side a:hover {
	background: rgba(255, 255, 255, 0.13);
	transform: scale(1.08);
}
body.media-body .swiper-side a:active {
	transform: scale(0.92);
}
body.media-body .swiper-side svg {
	width: 33px;
	height: 33px;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7));
}
body.media-body .swiper-side .comment-icon span,
body.media-body .swiper-side small {
	font-size: 11px;
	font-weight: 700;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
/* favourited = accent */
body.media-body .swiper-side .fav-added svg,
body.media-body .swiper-side .fav-added svg path {
	fill: var(--nsc-accent) !important;
	stroke: var(--nsc-accent) !important;
	filter: drop-shadow(0 0 12px var(--nsc-glow));
}
body.media-body .swiper-side .avatar-img img,
body.media-body .swiper-side .avatar-img svg {
	border-radius: 50%;
	box-shadow: 0 0 0 2px #fff, 0 4px 14px rgba(0, 0, 0, 0.6);
}

/* =========================================================================
   PREV / NEXT — glass discs, left edge on desktop (clear of the rail)
   ========================================================================= */
body.media-body .swiper-button-next,
body.media-body .swiper-button-prev {
	width: 46px !important;
	height: 46px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.11) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: background 0.2s ease, transform 0.2s ease;
	z-index: 3;
}
body.media-body .swiper-button-next:hover,
body.media-body .swiper-button-prev:hover {
	background: var(--nsc-grad) !important;
	transform: scale(1.08);
	box-shadow: 0 8px 26px var(--nsc-glow);
}
body.media-body .swiper-button-next::after,
body.media-body .swiper-button-prev::after {
	font-size: 16px !important;
	font-weight: 800;
	color: #fff !important;
}
@media (min-width: 768px) {
	body.media-body .swiper-button-prev,
	body.media-body .swiper-button-next {
		left: 16px !important;
		right: auto !important;
	}
	body.media-body .swiper-button-prev {
		top: calc(50% - 34px) !important;
	}
	body.media-body .swiper-button-next {
		top: calc(50% + 34px) !important;
	}
}
@media (max-width: 767.98px) and (pointer: coarse) {
	body.media-body .swiper-button-next,
	body.media-body .swiper-button-prev {
		display: none !important;
	}
}

/* =========================================================================
   BOTTOM TAB BAR — the app's primary nav, on every page
   ========================================================================= */
footer {
	background: rgba(10, 10, 14, 0.82) !important;
	backdrop-filter: blur(26px) saturate(170%);
	-webkit-backdrop-filter: blur(26px) saturate(170%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
	border: 0 !important;
	padding-bottom: var(--nsc-safe-bottom);
	height: calc(var(--nsc-tabbar) + var(--nsc-safe-bottom));
	box-sizing: border-box;
	z-index: 6;
}
.footer-menu {
	max-width: 640px;
	margin: 0 auto;
}
.footer-menu a {
	position: relative;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 58px;
	color: var(--nsc-text-3) !important;
	border-radius: var(--nsc-r-md);
	transition: color 0.2s ease, transform 0.18s ease;
}
.footer-menu a:hover {
	color: #fff !important;
}
.footer-menu a:active {
	transform: scale(0.93);
}
.footer-menu a svg {
	width: 26px !important;
	height: 26px !important;
	transition: transform 0.18s ease;
}
.footer-menu a:hover svg {
	transform: translateY(-1px);
}
/* theme hardcodes fill="#333" on these paths and #333 on the labels —
   without this the whole tab bar is invisible on every non-feed page */
.footer-menu a svg path {
	fill: currentColor !important;
}
.footer-menu a small,
.footer-menu a span {
	font-size: 10.5px !important;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: inherit !important;
}
/* active tab: accent + a soft pill behind it */
.footer-menu a.active,
.footer-menu li.current-menu-item > a {
	color: var(--nsc-accent) !important;
}
.footer-menu a.active::before,
.footer-menu li.current-menu-item > a::before {
	content: "";
	position: absolute;
	inset: 4px 10px;
	border-radius: var(--nsc-r-md);
	background: rgba(255, 45, 111, 0.13);
	pointer-events: none;
	z-index: -1;
}

/* =========================================================================
   BUTTONS / FORMS / SHEETS
   ========================================================================= */
.button,
.button-color,
button.button {
	border-radius: var(--nsc-r-pill) !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em;
	background: var(--nsc-grad) !important;
	border: 0 !important;
	color: #fff !important;
	box-shadow: 0 8px 24px var(--nsc-glow);
	transition: transform 0.18s ease, filter 0.18s ease;
}
.button:hover,
.button-color:hover {
	filter: brightness(1.08);
	transform: translateY(-2px);
}
.slideup-box,
.comment-box {
	border-radius: var(--nsc-r-lg) !important;
	background: var(--nsc-surface-1) !important;
	box-shadow:
		inset 0 0 0 1px var(--nsc-line),
		0 30px 90px rgba(0, 0, 0, 0.8);
}
.input-field input,
.form-field input,
.form-field textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea {
	border-radius: var(--nsc-r-sm) !important;
	background: var(--nsc-surface-2) !important;
	border: 1px solid var(--nsc-line) !important;
	color: #fff !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input-field input:focus,
.form-field input:focus,
textarea:focus {
	outline: none !important;
	border-color: var(--nsc-accent) !important;
	box-shadow: 0 0 0 3px rgba(255, 45, 111, 0.18) !important;
}
.dark-bg {
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
/* phone: auth/comment sheets slide up from the bottom (thumb reach) */
@media (max-width: 767.98px) {
	#main-nav.slideup-box:not(.comment-box),
	.slideup-box:not(.comment-box) {
		top: auto !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		transform: none !important;
		width: 100% !important;
		max-width: 100% !important;
		max-height: 88dvh;
		overflow-y: auto;
		border-radius: var(--nsc-r-lg) var(--nsc-r-lg) 0 0 !important;
		padding-bottom: calc(20px + var(--nsc-safe-bottom));
		-webkit-overflow-scrolling: touch;
	}
}

/* =========================================================================
   CONTENT PAGES (DMCA / 2257 / profile / upload / search)
   Shipped light-on-white by the theme — unify with the app.
   ========================================================================= */
body:not(.media-body) {
	background: var(--nsc-bg) !important;
	color: var(--nsc-text-2) !important;
}
body:not(.media-body) #content.content,
body:not(.media-body) main,
body:not(.media-body) article,
body:not(.media-body) .page-content,
body:not(.media-body) .content-wrapper {
	background: transparent !important;
}
body:not(.media-body) #content.content {
	padding-bottom: calc(var(--nsc-tabbar) + 32px + var(--nsc-safe-bottom)) !important;
}
body:not(.media-body) p,
body:not(.media-body) li,
body:not(.media-body) td,
body:not(.media-body) label,
body:not(.media-body) span,
body:not(.media-body) em,
body:not(.media-body) strong {
	color: var(--nsc-text-2);
}
body:not(.media-body) h1,
body:not(.media-body) h2,
body:not(.media-body) h3,
body:not(.media-body) h4,
body:not(.media-body) h5 {
	color: #fff !important;
	letter-spacing: -0.02em;
}
body:not(.media-body) a {
	color: var(--nsc-accent);
}
body:not(.media-body) a:hover {
	color: #fff;
}
body:not(.media-body) header {
	background: rgba(5, 5, 7, 0.94) !important;
	box-shadow: inset 0 -1px 0 var(--nsc-line);
}
body:not(.media-body) header a,
body:not(.media-body) header .menu ul li a {
	color: #fff !important;
}
body:not(.media-body) header svg path {
	fill: #fff !important;
}

/* =========================================================================
   GRID VIEW
   ========================================================================= */
body.grid .post-thumb,
body.grid article {
	border-radius: var(--nsc-r-md);
	overflow: hidden;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}
body.grid .post-thumb:hover,
body.grid article:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
}

/* =========================================================================
   A11Y / MISC
   ========================================================================= */
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--nsc-accent);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}

/* SEO crawl-link block: crawlable, invisible to humans */
.nsc-crawl-links {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	margin: -1px;
	padding: 0;
}