/* JOIGang video platform — brand palette: light bg, pink #F674FF family */

:root {
	--jg-text: #1d1d1d;
	--jg-muted: #1d1d1d; /* per brand feedback: small text black, not grey */
	--jg-line: #e8dbe9;
	--jg-card: #ffffff;
	--jg-soft: #ffe4fd;   /* pale pink chip bg */
	--jg-pink: #f674ff;   /* brand pink */
	--jg-pink-2: #ffc2fd; /* light pink (gradient top) */
	--jg-purple: #a946b4; /* brand purple */
	--jg-ink: #27103a;    /* deep purple for dark elements */
	--jg-grad: linear-gradient(180deg, #ffc2fd 15%, #f674ff 100%);
}

/* Live JOI countdown bar — rendered in-content at the top of platform pages */
.jgvp-ljc-row { margin: 0 0 14px; }
.jgvp-ljc-row .jg-ljc-bar { border-radius: 12px; }

/* neutralize theme page furniture on platform pages */
body.jgvp-page .entry-header,
body.jgvp-page .entry-title,
body.jgvp-page .page-header { display: none; }
body.jgvp-page #content.site-main,
body.jgvp-page .site-main {
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* text selection must work in our inputs despite copy-protection plugins */
body.jgvp-page input,
body.jgvp-page textarea {
	-webkit-user-select: text !important;
	user-select: text !important;
}

.jgvp-home, .jgvp-watch { color: var(--jg-text); }
.jgvp-shell {
	/* near-full-width: side gaps cut ~70% (was 1660px cap + up to 44px pad) */
	max-width: none;
	margin: 0 auto;
	padding: 8px clamp(14px, 2.7vw, 52px) 60px;
}
/* watch page: centered column like YouTube theater */
.jgvp-watch-shell {
	max-width: 1280px;
	margin: 0 auto;
	padding: 8px clamp(16px, 3vw, 40px) 60px;
}

.jgvp-note { color: var(--jg-muted); }
.jgvp-note a { color: var(--jg-purple); }

/* ---------- search bar (centered) ---------- */
.jgvp-searchbar {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 14px auto 10px;
}
.jgvp-searchbar input[type="search"],
.jgvp-filter-main input[type="search"] {
	flex: 0 1 560px;
	background: #fff;
	border: 2px solid var(--jg-line);
	color: var(--jg-text);
	border-radius: 24px;
	padding: 11px 20px;
	font-size: 15px;
	outline: none;
}
.jgvp-searchbar input:focus,
.jgvp-filter-main input:focus { border-color: var(--jg-pink); }
.jgvp-searchbar button,
.jgvp-filter-main button {
	background: var(--jg-grad);
	color: var(--jg-ink);
	border: 0;
	border-radius: 24px;
	padding: 11px 26px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
.jgvp-searchbar button:hover,
.jgvp-filter-main button:hover { filter: brightness(1.05) saturate(1.15); }

/* ---------- tag chips ---------- */
.jgvp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.jgvp-home-tags { justify-content: center; max-width: 1100px; margin: 0 auto 8px; }
.jgvp-tag {
	background: var(--jg-soft);
	color: var(--jg-ink) !important;
	border-radius: 14px;
	padding: 5px 14px;
	font-size: 14px; /* 12 → 17 was too much; dialed back ~20% per feedback */
	line-height: 1.5;
	text-decoration: none !important;
	transition: all 0.12s;
}
.jgvp-tag:hover { background: var(--jg-pink); color: #fff !important; }
.jgvp-tag-more { background: transparent; border: 1px dashed var(--jg-pink); }

/* ---------- sections ---------- */
.jgvp-section { margin: 26px 0; }
.jgvp-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}
.jgvp-section-head h2 {
	font-size: clamp(19px, 2vw, 24px);
	margin: 0;
	color: var(--jg-text);
}
.jgvp-viewall {
	color: var(--jg-purple) !important;
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}
.jgvp-viewall:hover { color: var(--jg-pink) !important; }

.jgvp-row {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(2, auto);
	/* exactly 5 cards visible per row — no cut-off 6th card */
	grid-auto-columns: calc((100% - 4 * 16px) / 5);
	gap: 16px;
	overflow-x: auto;
	padding-bottom: 12px;
	scrollbar-width: auto;
	scrollbar-color: var(--jg-pink) #f6eef6;
}
.jgvp-row::-webkit-scrollbar { height: 14px; }
.jgvp-row::-webkit-scrollbar-track { background: #f6eef6; border-radius: 8px; }
.jgvp-row::-webkit-scrollbar-thumb { background: var(--jg-pink); border-radius: 8px; }
.jgvp-tagfilter-list::-webkit-scrollbar { width: 14px; }
.jgvp-tagfilter-list::-webkit-scrollbar-thumb { background: var(--jg-pink-2); border-radius: 8px; }
.jgvp-watch .jgvp-row { grid-template-rows: auto; }

/* ---------- browse grid: 5 per row on desktop ---------- */
.jgvp-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px 16px;
	margin-top: 18px;
}
@media (max-width: 1500px) { .jgvp-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1150px) { .jgvp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .jgvp-grid { grid-template-columns: repeat(2, 1fr); } }
.jgvp-count { color: var(--jg-muted); margin: 12px 0 0; font-size: 14px; }

/* ---------- filter bar: ONE tiny row (hard overrides vs theme widths) ---------- */
.jgvp-filterbar {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 8px 0 4px !important;
	box-shadow: none !important;
}
.jgvp-filter-main {
	display: flex !important;
	flex-wrap: nowrap;
	gap: 6px;
	align-items: center;
}
.jgvp-filter-main input[type="search"] {
	flex: 0 1 auto !important;
	width: 285px !important;
	max-width: 285px !important;
	padding: 6px 14px !important;
	font-size: 15px !important;
	border-width: 1px !important;
	height: 38px;
	box-sizing: border-box;
}
.jgvp-filter-main select {
	width: auto !important;
	max-width: 215px !important;
	background: #fff !important;
	color: var(--jg-text) !important;
	border: 1px solid var(--jg-line) !important;
	border-radius: 9px !important;
	padding: 6px 10px !important;
	font-size: 15px !important;
	height: 38px;
	box-sizing: border-box;
}
.jgvp-filter-main button {
	width: auto !important;
	padding: 0 18px !important;
	font-size: 15px !important;
	height: 38px;
	line-height: 38px;
}
.jgvp-filter-main .jgvp-tagfilter { margin: 0 !important; }
@media (max-width: 760px) {
	.jgvp-filter-main { flex-wrap: wrap; }
}
/* tag filter lives IN the row; panel drops down over the grid */
.jgvp-tagfilter { position: relative; color: var(--jg-muted); font-size: 15px; }
.jgvp-tagfilter summary {
	list-style: none;
	cursor: pointer;
	font-weight: 700;
	color: var(--jg-purple);
	user-select: none;
	font-size: 15px;
	background: #fff;
	border: 1px solid var(--jg-line);
	border-radius: 9px;
	padding: 0 14px;
	height: 38px;
	line-height: 36px;
	display: inline-block;
	box-sizing: border-box;
	white-space: nowrap;
}
.jgvp-tagfilter summary::-webkit-details-marker { display: none; }
.jgvp-tagfilter[open] summary { border-color: var(--jg-pink); }
.jgvp-tagfilter-panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 40;
	width: min(720px, 90vw);
	background: #fff;
	border: 1px solid var(--jg-line);
	border-radius: 14px;
	box-shadow: 0 10px 34px rgba(39, 16, 58, 0.2);
	padding: 14px;
}
.jgvp-tagfilter-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 12px; }
.jgvp-tagfilter-cols h4 { margin: 0 0 8px; color: var(--jg-text); font-size: 14px; }
.jgvp-tagfilter-list {
	max-height: 220px;
	overflow-y: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 4px 12px;
	border: 1px solid var(--jg-line);
	border-radius: 10px;
	padding: 10px;
	background: #fdf7fd;
}
.jgvp-tagfilter-list label { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--jg-text); cursor: pointer; }
.jgvp-tagfilter-list label span { color: var(--jg-muted); font-size: 11.5px; margin-left: auto; }
.jgvp-tagfilter-list input { accent-color: var(--jg-pink); }

/* ---------- pagination ---------- */
.jgvp-pagination { display: flex; gap: 6px; justify-content: center; margin: 28px 0 8px; }
.jgvp-pagination a, .jgvp-pagination span {
	min-width: 38px;
	text-align: center;
	padding: 8px 10px;
	border-radius: 10px;
	background: var(--jg-card);
	border: 1px solid var(--jg-line);
	color: var(--jg-text) !important;
	text-decoration: none !important;
	font-size: 14px;
}
.jgvp-pagination a:hover { border-color: var(--jg-pink); }
.jgvp-pagination .is-current { background: var(--jg-grad); border-color: var(--jg-pink); color: var(--jg-ink) !important; font-weight: 700; }

/* ---------- cards ---------- */
/* hover: zoom the image INSIDE its rounded box instead of translating the
   whole card — the translate created subpixel shimmer around the corners
   and shifted the text (user-reported glitch) */
.jgvp-card {
	display: block;
	text-decoration: none !important;
	color: var(--jg-text) !important;
	border-radius: 12px;
}
.jgvp-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background: var(--jg-soft);
	box-shadow: 0 3px 14px rgba(169, 70, 180, 0.16);
	transition: box-shadow 0.15s ease;
}
.jgvp-card:hover .jgvp-thumb { box-shadow: 0 8px 24px rgba(169, 70, 180, 0.3); }
.jgvp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.18s ease; }
.jgvp-card:hover .jgvp-thumb img { transform: scale(1.045); }
.jgvp-thumb-empty { display: block; width: 100%; height: 100%; background: var(--jg-grad); }
.jgvp-duration, .jgvp-badge, .jgvp-lock {
	position: absolute;
	bottom: 7px;
	background: rgba(20, 8, 26, 0.85);
	color: #fff;
	font-size: 12px;
	line-height: 1;
	padding: 4px 7px;
	border-radius: 5px;
}
.jgvp-duration { right: 7px; }
.jgvp-badge { left: 7px; background: var(--jg-pink); color: var(--jg-ink); font-weight: 700; letter-spacing: 0.5px; }
.jgvp-lock { top: 7px; right: 7px; bottom: auto; font-size: 13px; }
/* one line + ellipsis: long titles no longer misalign neighboring cards */
.jgvp-card-title {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 9px 2px 2px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}
.jgvp-card-meta { display: block; margin: 3px 2px; font-size: 13px; color: var(--jg-muted); }

/* ---------- watch page ---------- */
.jgvp-player {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	margin: 0 auto;
	background: #14081a;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 8px 34px rgba(169, 70, 180, 0.25);
}
.jgvp-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.jgvp-locked {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.jgvp-locked::before { content: ""; position: absolute; inset: 0; background: rgba(24, 8, 30, 0.78); backdrop-filter: blur(16px); }
.jgvp-locked-inner { position: relative; text-align: center; padding: 24px; color: #fff; }
.jgvp-locked-icon { font-size: 44px; margin-bottom: 10px; }
.jgvp-btn {
	display: inline-block;
	margin: 6px;
	padding: 11px 26px;
	border-radius: 26px;
	background: rgba(255, 255, 255, 0.16);
	color: #fff !important;
	text-decoration: none !important;
	font-weight: 700;
}
.jgvp-btn-primary { background: var(--jg-grad); color: var(--jg-ink) !important; }
.jgvp-btn:hover { filter: brightness(1.1); }

.jgvp-title { font-size: clamp(20px, 2.4vw, 26px); margin: 18px 0 8px; color: var(--jg-text); }
.jgvp-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	color: var(--jg-muted);
	font-size: 14.5px;
	border-bottom: 1px solid var(--jg-line);
	padding-bottom: 14px;
}
.jgvp-actions { display: flex; gap: 8px; }
/* hardened against theme/global button styles (the stray red) — two states only:
   inactive = white, active = pink gradient */
.jgvp-watch .jgvp-react,
.jgvp-watch .jgvp-react:focus,
.jgvp-watch .jgvp-react:active {
	appearance: none;
	-webkit-appearance: none;
	background: #fff !important;
	color: var(--jg-text) !important;
	border: 2px solid var(--jg-line) !important;
	border-radius: 22px;
	padding: 8px 17px;
	font-size: 14.5px;
	cursor: pointer;
	outline: none;
	box-shadow: none !important;
	text-shadow: none;
	transition: none;
}
.jgvp-watch .jgvp-react:hover:not(:disabled):not(.is-active) {
	border-color: var(--jg-pink) !important;
}
.jgvp-watch .jgvp-react.is-active,
.jgvp-watch .jgvp-react.is-active:focus,
.jgvp-watch .jgvp-react.is-active:active,
.jgvp-watch .jgvp-react.is-active:hover {
	background: var(--jg-grad) !important;
	border-color: var(--jg-pink) !important;
	color: var(--jg-ink) !important;
	font-weight: 700;
}
.jgvp-watch .jgvp-react:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- CTA buttons (funscript / variant versions) ---------- */
.jgvp-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }
.jgvp-cta {
	display: inline-block;
	background: var(--jg-grad);
	color: var(--jg-ink) !important;
	border-radius: 24px;
	padding: 10px 22px;
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none !important;
	box-shadow: 0 2px 10px rgba(246, 116, 255, 0.35);
}
.jgvp-cta:hover { filter: brightness(1.06) saturate(1.15); }
.jgvp-cta-locked { opacity: 0.8; }
.jgvp-cta-ghost { background: #fff; border: 2px solid var(--jg-pink); box-shadow: none; }
.jgvp-cta-menu { position: relative; padding: 0; }
.jgvp-cta-menu summary {
	list-style: none;
	cursor: pointer;
	padding: 10px 22px;
	display: inline-block;
}
.jgvp-cta-menu summary::-webkit-details-marker { display: none; }
.jgvp-cta-list {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 30;
	min-width: 240px;
	background: #fff;
	border: 1px solid var(--jg-line);
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(39, 16, 58, 0.18);
	overflow: hidden;
}
.jgvp-cta-list a {
	display: block;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--jg-text) !important;
	text-decoration: none !important;
}
.jgvp-cta-list a:hover { background: var(--jg-soft); }

/* ---------- series playlist ---------- */
.jgvp-playlist {
	margin: 18px 0;
	border: 1px solid var(--jg-line);
	border-radius: 14px;
	background: #fdf7fd;
	overflow: hidden;
}
.jgvp-playlist h3 {
	margin: 0;
	padding: 12px 16px;
	font-size: 15px;
	background: var(--jg-soft);
	color: var(--jg-ink);
}
.jgvp-playlist-items { max-height: 340px; overflow-y: auto; }
.jgvp-playlist-items::-webkit-scrollbar { width: 14px; }
.jgvp-playlist-items::-webkit-scrollbar-thumb { background: var(--jg-pink-2); border-radius: 8px; }
.jgvp-playlist-item {
	display: grid;
	grid-template-columns: 30px 84px 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 7px 12px;
	text-decoration: none !important;
	color: var(--jg-text) !important;
	border-bottom: 1px solid #f3e6f3;
}
.jgvp-playlist-item:hover { background: var(--jg-soft); }
.jgvp-playlist-item.is-current { background: var(--jg-soft); font-weight: 700; }
.jgvp-playlist-num { text-align: center; font-size: 13px; color: var(--jg-purple); font-weight: 700; }
.jgvp-playlist-thumb img { width: 84px; height: 47px; object-fit: cover; border-radius: 6px; display: block; }
.jgvp-playlist-title { font-size: 13.5px; line-height: 1.35; }
.jgvp-playlist-dur { font-size: 12px; color: var(--jg-muted); }

.jgvp-watch .jgvp-tags { margin: 14px 0; }
.jgvp-description { margin: 14px 0; color: var(--jg-text); line-height: 1.65; max-width: 900px; }

/* ---------- comments (custom, YouTube-ish) ---------- */
.jgvp-comments { margin-top: 34px; }
.jgvp-comments h3 { font-size: 18px; margin: 0 0 18px; }
.jgvp-comment-form textarea {
	width: 100%;
	min-height: 74px;
	background: #fff;
	border: 2px solid var(--jg-line);
	border-radius: 12px;
	padding: 12px 14px;
	font-size: 14.5px;
	color: var(--jg-text);
	resize: vertical;
}
.jgvp-comment-form textarea:focus { border-color: var(--jg-pink); outline: none; }
.jgvp-comment-form .form-submit { margin: 10px 0 0; }
.jgvp-comment-form input[type="submit"] {
	background: var(--jg-grad);
	color: var(--jg-ink);
	border: 0;
	border-radius: 22px;
	padding: 10px 26px;
	font-weight: 700;
	font-size: 14.5px;
	cursor: pointer;
}
.jgvp-comment-list { list-style: none; margin: 22px 0 0; padding: 0; }
.jgvp-comment-list .children { list-style: none; margin: 12px 0 0 46px; padding: 0; }
.jgvp-comment {
	display: flex;
	gap: 12px;
	padding: 12px 0;
}
.jgvp-comment .avatar { border-radius: 50%; flex: 0 0 auto; }
.jgvp-comment-main { flex: 1; min-width: 0; }
.jgvp-comment-head { font-size: 13.5px; margin-bottom: 3px; }
.jgvp-comment-author { font-weight: 700; color: var(--jg-text); }
.jgvp-comment-date { color: var(--jg-muted); margin-left: 8px; }
.jgvp-comment-body { font-size: 14.5px; line-height: 1.55; color: var(--jg-text); }
.jgvp-comment-body p { margin: 0 0 6px; }
.jgvp-comment-reply a {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--jg-purple) !important;
	text-decoration: none !important;
}
.jgvp-comment-reply a:hover { color: var(--jg-pink) !important; }

@media (max-width: 900px) { .jgvp-tagfilter-cols { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
	.jgvp-row { grid-auto-columns: 70vw; grid-template-rows: auto; }
	.jgvp-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
	.jgvp-title { font-size: 19px; }
	.jgvp-comment-list .children { margin-left: 20px; }
}

/* ---- funscript gate page ---- */
.jgvp-fsgate {
	display: grid;
	grid-template-columns: minmax(260px, 420px) 1fr;
	gap: 28px;
	background: var(--jg-card, #fff);
	border: 1px solid #f3d9f7;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(169, 70, 180, .12);
	margin: 26px 0;
}
.jgvp-fsgate-thumb {
	min-height: 260px;
	background-size: cover;
	background-position: center;
}
.jgvp-fsgate-body { padding: 28px 28px 24px 0; }
.jgvp-fsgate:not(:has(.jgvp-fsgate-thumb)) .jgvp-fsgate-body { padding-left: 28px; }
.jgvp-fsgate-kicker {
	font-weight: 800;
	letter-spacing: .1em;
	font-size: 13px;
	color: var(--jg-purple, #A946B4);
	margin: 0 0 4px;
}
.jgvp-fsgate-body h1 { margin: 0 0 8px; font-size: 26px; }
.jgvp-fsgate-sub { color: #4a3a5c; margin: 0 0 18px; }
.jgvp-fsgate-dl { font-size: 17px; padding: 12px 26px; }
.jgvp-fsgate-lock {
	background: #faf3fc;
	border: 1px solid #f3d9f7;
	border-radius: 12px;
	padding: 16px 18px;
	margin-bottom: 14px;
}
.jgvp-fsgate-lock .jgvp-btn { margin-right: 8px; }
.jgvp-fsgate-back {
	display: inline-block;
	margin-top: 12px;
	font-size: 14px;
	color: var(--jg-purple, #A946B4) !important;
	text-decoration: none !important;
}
@media (max-width: 760px) {
	.jgvp-fsgate { grid-template-columns: 1fr; }
	.jgvp-fsgate-thumb { min-height: 200px; }
	.jgvp-fsgate-body { padding: 20px; }
}

/* ---- homepage embeds ---- */
.jgvp-embed { background: transparent; padding: 0; }
.jgvp-row-single { grid-template-rows: auto; }

/* ---- membership tier cards ---- */
.jgvp-tiers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 18px;
	align-items: stretch;
	max-width: 1280px;
	margin: 0 auto;
	padding: 8px 4px 24px;
}
.jgvp-tier {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #f3d9f7;
	border-radius: 16px;
	padding: 22px 18px 18px;
	box-shadow: 0 6px 18px rgba(169, 70, 180, .08);
	transition: transform .15s, box-shadow .15s;
}
.jgvp-tier:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(169, 70, 180, .18); }
/* popular card must read on BOTH the light pricing page and the darker
   homepage band: thicker border + glow, flag in solid purple with a white
   keyline (user feedback: border/label blended into the homepage bg) */
.jgvp-tier.is-popular {
	border: 3px solid #F674FF;
	box-shadow: 0 0 0 3px rgba(246, 116, 255, .28), 0 10px 34px rgba(246, 116, 255, .45);
}
.jgvp-tier-flag {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, #A946B4, #F674FF);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .05em;
	padding: 4px 16px;
	border-radius: 999px;
	white-space: nowrap;
	border: 2px solid rgba(255, 255, 255, .9);
	box-shadow: 0 3px 12px rgba(39, 16, 58, .35);
}
.jgvp-tier-name {
	margin: 0 0 2px;
	font-size: 19px;
	font-weight: 800;
	color: #27103A;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.jgvp-tier-price {
	margin: 0 0 12px;
	font-size: 34px;
	font-weight: 800;
	background: linear-gradient(135deg, #A946B4, #F674FF);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.jgvp-tier-price span { font-size: 14px; -webkit-text-fill-color: #6b5580; font-weight: 600; }
.jgvp-tier-feats {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	flex: 1;
	font-size: 13.5px;
	line-height: 1.45;
	color: #1d1d1d;
}
.jgvp-tier-feats li { padding: 5px 0 5px 22px; position: relative; }
.jgvp-tier-feats li::before {
	content: "✓";
	position: absolute;
	left: 2px;
	color: #A946B4;
	font-weight: 800;
}
.jgvp-tier-feats li.jgvp-tier-plus {
	padding-left: 0;
	font-weight: 700;
	color: #6b5580;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.jgvp-tier-feats li.jgvp-tier-plus::before { content: none; }
.jgvp-tier-cta {
	display: block;
	text-align: center;
	background: linear-gradient(135deg, #F674FF, #FFC2FD);
	color: #27103A !important;
	font-weight: 800;
	padding: 11px 0;
	border-radius: 999px;
	text-decoration: none !important;
	transition: filter .15s;
}
.jgvp-tier-cta:hover { filter: brightness(1.06); }
.jgvp-tier.is-popular .jgvp-tier-cta { background: linear-gradient(135deg, #A946B4, #F674FF); color: #fff !important; }
@media (max-width: 900px) {
	.jgvp-tiers { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* ---- Handy sync panel ---- */
.jgvp-handy {
	margin: 14px 0;
	border: 1px solid #f3d9f7;
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}
.jgvp-handy > summary {
	cursor: pointer;
	padding: 12px 16px;
	font-weight: 800;
	color: #27103A;
	list-style: none;
	user-select: none;
}
.jgvp-handy > summary::-webkit-details-marker { display: none; }
.jgvp-handy[open] > summary { border-bottom: 1px solid #f3d9f7; background: #faf3fc; }
.jgvp-handy-hint { font-weight: 400; color: #6b5580; font-size: 13.5px; }
.jgvp-handy-body { padding: 14px 16px 16px; }
.jgvp-handy-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.jgvp-handy-row input[type="text"] {
	flex: 1;
	min-width: 220px;
	border: 1px solid #e2c7ea;
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 14px;
}
.jgvp-handy-filelabel {
	display: block;
	border: 2px dashed #e2c7ea;
	border-radius: 10px;
	padding: 14px;
	text-align: center;
	color: #6b5580;
	font-size: 14px;
	cursor: pointer;
	width: 100%;
	transition: border-color .15s, background .15s;
}
.jgvp-handy-filelabel:hover { border-color: #F674FF; background: #fef7ff; }
.jgvp-handy-filelabel input { display: none; }
.jgvp-handy-variants { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.jgvp-handy-variant {
	border: 1px solid #e2c7ea;
	background: #fff;
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	cursor: pointer;
}
.jgvp-handy-variant.is-active { background: #F674FF; color: #fff; border-color: #F674FF; }
.jgvp-handy-status { font-size: 13.5px; color: #6b5580; margin: 6px 0 0; }
.jgvp-handy-status.is-ok { color: #1d8348; font-weight: 700; }
.jgvp-handy-status.is-err { color: #c0392b; font-weight: 700; }

/* ---- mobile pass ---- */
@media (max-width: 640px) {
	.jgvp-watch-shell { padding: 0 10px; }
	.jgvp-ctas { flex-wrap: wrap; }
	.jgvp-ctas .jgvp-cta { flex: 1 1 100%; text-align: center; }
	.jgvp-meta-row { flex-direction: column; align-items: flex-start; gap: 8px; }
	.jgvp-filterbar .jgvp-filter-main { flex-wrap: wrap; }
	.jgvp-filterbar input[type="search"] { flex: 1 1 100%; }
	.jgvp-playlist-items { max-height: 320px; }
	.jgvp-tiers { padding: 8px 2px 18px; }
	.jgvp-handy-row { flex-direction: column; }
	/* 16px stops iOS Safari from zooming the page on input focus */
	.jgvp-handy-row input[type="text"] { font-size: 16px; min-width: 0; }
	.jgvp-handy-row .jgvp-btn { width: 100%; }
	.jgvp-handy-filelabel { width: 100%; box-sizing: border-box; }
}

/* ---- description block ---- */
.jgvp-description { margin: 14px 0; }
.jgvp-desc-label {
	margin: 0 0 4px;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6b5580;
}
.jgvp-desc-body {
	font-size: 13.5px;
	line-height: 1.5;
	color: #1d1d1d;
	max-height: 3.1em;
	overflow: hidden;
}
.jgvp-description.is-open .jgvp-desc-body { max-height: none; }
.jgvp-desc-more {
	background: none;
	border: 0;
	padding: 4px 0 0;
	font-size: 13px;
	font-weight: 700;
	color: #A946B4;
	cursor: pointer;
}
.jgvp-handy-filelabel.is-drag { border-color: #F674FF; background: #fef0ff; }

/* ---- watch page: two columns on desktop ---- */
@media (min-width: 1100px) {
	.jgvp-watch-shell.jgvp-cols {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 400px;
		gap: 26px;
		align-items: start;
		max-width: 1680px;
	}
	/* sidebar "More videos": vertical list, horizontal cards */
	.jgvp-side .jgvp-section { margin-top: 14px; }
	.jgvp-side .jgvp-row {
		display: flex;
		flex-direction: column;
		gap: 10px;
		grid-auto-columns: unset;
		grid-template-rows: unset;
		overflow: visible;
	}
	.jgvp-side .jgvp-card {
		display: grid;
		grid-template-columns: 168px 1fr;
		grid-template-rows: auto auto;
		gap: 2px 10px;
		width: 100%;
	}
	.jgvp-side .jgvp-card .jgvp-thumb { grid-row: 1 / span 2; }
	.jgvp-side .jgvp-card-title { font-size: 13.5px; -webkit-line-clamp: 2; }
	.jgvp-side .jgvp-card-meta { font-size: 12px; }
	.jgvp-side .jgvp-playlist-items { max-height: 420px; }
}
.jgvp-player-outer { margin-bottom: 10px; }
/* the TJC addon row the controller injects */
.patreon-valid-patron-message { align-items: center; gap: 8px; margin: 8px 0; }

/* homepage: static 6-wide new-videos row (no scrollbar) */
.jgvp-row-static {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
}
@media (max-width: 1100px) { .jgvp-row-static { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .jgvp-row-static { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .jgvp-row-static { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* TJC (JOI controller) pages: static iframe like the legacy pages —
   the controller script measures and resizes the iframe directly */
.jgvp-player.is-tjc { aspect-ratio: auto; padding: 0; }
.jgvp-tjc-innerwrap { width: 100%; }
.jgvp-player.is-tjc iframe, .jgvp-tjc-innerwrap iframe {
	position: static;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	display: block;
	border: 0;
	border-radius: 14px;
}

/* tag filter: search + chips */
.jgvp-tagsearch {
	width: 100%;
	border: 1px solid #e2c7ea;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 13.5px;
	margin-bottom: 10px;
}
.jgvp-tagchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.jgvp-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	font-weight: 700;
	border-radius: 999px;
	padding: 4px 6px 4px 12px;
	cursor: default;
}
.jgvp-chip-inc { background: #f2e2f7; color: #6d2f7a; border: 1px solid #e2c7ea; }
.jgvp-chip-exc { background: #fdeaea; color: #a33; border: 1px solid #f1c7c7; }
.jgvp-chip button {
	border: 0;
	background: none;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	padding: 0 4px;
}
.jgvp-handy-auto { width: 100%; font-size: 15px; }
.jgvp-handy-or { text-align: center; font-size: 12px; color: #6b5580; margin: 2px 0; }

/* homepage video carousels: 4 visible, auto-scrolls */
.jgvp-hcar {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 42px) / 4);
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: #F674FF #f3d9f7;
	padding-bottom: 6px;
}
.jgvp-hcar::-webkit-scrollbar { height: 8px; }
.jgvp-hcar::-webkit-scrollbar-thumb { background: #F674FF; border-radius: 4px; }
.jgvp-hcar::-webkit-scrollbar-track { background: #f3d9f7; border-radius: 4px; }
.jgvp-hcar .jgvp-card { scroll-snap-align: start; }
@media (max-width: 900px) { .jgvp-hcar { grid-auto-columns: calc((100% - 28px) / 3); } }
@media (max-width: 560px) { .jgvp-hcar { grid-auto-columns: calc((100% - 14px) / 2); } }

/* homepage: tighter vertical rhythm between reels */
.jgvp-embed { margin: 0; }
.jgvp-embed .jgvp-section { margin: 0 0 6px; }
.jgvp-embed .jgvp-section-head { margin-bottom: 6px; }
.jgvp-hcar { cursor: grab; }
.jgvp-hcar.is-grabbing { cursor: grabbing; scroll-behavior: auto; }
.jgvp-hcar.is-grabbing .jgvp-card { pointer-events: none; }

/* ---- Handy: unmissable load confirmation ---- */
.jgvp-toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	transform: translate(-50%, 20px);
	z-index: 99999;
	max-width: min(92vw, 560px);
	background: #1d8348;
	color: #fff;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.4;
	padding: 14px 22px;
	border-radius: 14px;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
	opacity: 0;
	transition: opacity .3s ease, transform .3s ease;
	pointer-events: none;
	text-align: center;
}
.jgvp-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.jgvp-handy-filelabel.is-loaded {
	border-color: #1d8348;
	border-style: solid;
	background: #eafaf1;
	color: #1d8348;
	font-weight: 700;
}
@keyframes jgvp-status-flash {
	0% { background: #d4f5e2; }
	100% { background: transparent; }
}
.jgvp-handy-status.is-flash { animation: jgvp-status-flash 1.6s ease-out; border-radius: 6px; padding: 2px 6px; }

/* ---- access-password unlock form (hidden videos) ---- */
.jgvp-pw-form { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.jgvp-pw-form input[type="password"] {
	background: rgba(255, 255, 255, .92);
	border: 2px solid transparent;
	border-radius: 26px;
	padding: 10px 18px;
	font-size: 15px;
	min-width: 220px;
	color: #1d1d1d;
}
.jgvp-pw-form input[type="password"]:focus { outline: none; border-color: var(--jg-pink); }
.jgvp-pw-form .jgvp-btn { margin: 0; border: 0; cursor: pointer; }
.jgvp-pw-error { color: #ff8d8d; font-weight: 700; }

/* secret "?" easter egg (per-video _jg_secret_link) — sneaky by design */
.jgvp-secret { text-align: center; margin: 18px 0 6px; }
.jgvp-secret a { color: #6b5580; opacity: 0.45; font-size: 15px; text-decoration: none; padding: 4px 12px; }
.jgvp-secret a:hover { opacity: 1; color: var(--jg-pink); }

/* ---- live-show replay: video + synced chat, like the live fullscreen ---- */
.jgvp-replayrow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 380px);
	gap: 14px;
	align-items: stretch;
}
.jgvp-replayrow .jgvp-player-outer { min-width: 0; }
.jgvp-replaychat {
	display: flex;
	flex-direction: column;
	background: #1c0e29;
	border: 1px solid #3d2352;
	border-radius: 12px;
	overflow: hidden;
	min-height: 320px;
}
.jgvp-replaychat-head {
	padding: 10px 12px;
	background: #241332;
	border-bottom: 1px solid #3d2352;
	color: #ece2f6;
	font-weight: 800;
	font-size: 13.5px;
}
.jgvp-replaychat-live {
	background: #a946b4;
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 2px 8px;
	margin-left: 6px;
	vertical-align: 1px;
}
.jgvp-replaychat-log {
	flex: 1;
	overflow-y: auto;
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	scrollbar-width: thin;
	scrollbar-color: #3d2352 transparent;
}
.jgvp-rc-line { font-size: 13px; line-height: 1.45; color: #ece2f6; overflow-wrap: anywhere; }
.jgvp-rc-line b { font-weight: 800; }
.jgvp-rc-line.is-sys {
	color: #e9dcfa;
	font-size: 12.5px;
	font-weight: 600;
	background: rgba(246, 116, 255, 0.09);
	border-left: 3px solid #a946b4;
	padding: 3px 8px;
	border-radius: 0 8px 8px 0;
}
.jgvp-replaychat-empty { color: #b8a5cb; font-size: 13px; padding: 6px 2px; }
@media (max-width: 900px) {
	.jgvp-replayrow { grid-template-columns: minmax(0, 1fr); }
	.jgvp-replaychat { min-height: 0; max-height: 45vh; }
}