/* Membership pages (pricing / account / funscript library) — brand palette. */
.jg-pricing, .jg-acct, .jg-fslib { max-width: 1100px; margin: 0 auto; padding: 10px 16px 50px; color: #27103A; }

/* ---- pricing ---- */
.jg-pricing-hero { text-align: center; padding: 18px 0 6px; }
.jg-pricing-hero h1 { margin: 0 0 4px; font-size: 32px; font-weight: 800; }
.jg-pricing-hero p { margin: 0; color: #6b5580; }
.jg-pricing-h2 { text-align: center; font-size: 24px; font-weight: 800; margin: 34px 0 14px; }
.jg-pricing-patreon {
	background: #fff;
	border: 1px solid #f3d9f7;
	border-left: 4px solid #F674FF;
	border-radius: 12px;
	padding: 16px 20px;
	margin: 18px auto 0;
	max-width: 760px;
	font-size: 14.5px;
}
.jg-pricing-patreon h3 { margin: 0 0 6px; font-size: 16px; }
.jg-pricing-patreon p { margin: 0; color: #4a3a5c; }
.jg-pricing-patreon a { color: #A946B4 !important; font-weight: 700; }

.jg-matrix-wrap { overflow-x: auto; border: 1px solid #f3d9f7; border-radius: 14px; background: #fff; }
.jg-matrix { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
.jg-matrix th, .jg-matrix td { padding: 9px 12px; border-bottom: 1px solid #f7ebfa; text-align: center; }
.jg-matrix td:first-child { text-align: left; color: #4a3a5c; }
.jg-matrix thead th { background: #27103A; color: #fff; font-size: 13px; }
.jg-matrix thead th span { display: block; color: #FFC2FD; font-weight: 800; }
.jg-matrix td.is-yes { color: #A946B4; font-weight: 800; }
.jg-matrix td.is-no { color: #cdbcd9; }
.jg-matrix-cta td { padding: 12px; }
.jg-matrix-cta a {
	display: inline-block;
	background: linear-gradient(135deg, #F674FF, #FFC2FD);
	color: #27103A !important;
	font-weight: 800;
	font-size: 12.5px;
	padding: 7px 16px;
	border-radius: 999px;
	text-decoration: none !important;
}

.jg-faq { max-width: 760px; margin: 0 auto; }
.jg-faq details { background: #fff; border: 1px solid #f3d9f7; border-radius: 10px; margin-bottom: 8px; padding: 0 16px; }
.jg-faq summary { cursor: pointer; font-weight: 700; padding: 13px 0; list-style: none; }
.jg-faq summary::-webkit-details-marker { display: none; }
.jg-faq summary::after { content: "+"; float: right; color: #A946B4; font-weight: 800; }
.jg-faq details[open] summary::after { content: "–"; }
.jg-faq p { margin: 0 0 14px; font-size: 14px; color: #4a3a5c; }

.jg-pricing-sticky { display: none; }
@media (max-width: 640px) {
	.jg-pricing-sticky {
		display: block;
		position: fixed;
		bottom: 12px;
		left: 12px;
		right: 12px;
		z-index: 8000;
		text-align: center;
		background: linear-gradient(135deg, #A946B4, #F674FF);
		color: #fff !important;
		font-weight: 800;
		padding: 12px;
		border-radius: 999px;
		text-decoration: none !important;
		box-shadow: 0 8px 22px rgba(169, 70, 180, .4);
	}
}

/* ---- account dashboard ---- */
.jg-acct-hello { font-size: 26px; font-weight: 800; margin: 14px 0 14px; }
.jg-acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.jg-card {
	background: #fff;
	border: 1px solid #f3d9f7;
	border-radius: 14px;
	padding: 16px 18px;
	box-shadow: 0 4px 14px rgba(169, 70, 180, .06);
}
.jg-card h3 { margin: 0 0 8px; font-size: 15px; letter-spacing: .02em; }
.jg-card-big { margin: 0; font-size: 24px; font-weight: 800; background: linear-gradient(135deg, #A946B4, #F674FF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.jg-card-sub { margin: 2px 0 10px; font-size: 13.5px; color: #4a3a5c; }
.jg-card-actions { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jg-btn-sm {
	display: inline-block;
	background: linear-gradient(135deg, #F674FF, #FFC2FD);
	color: #27103A !important;
	font-weight: 800;
	font-size: 12.5px;
	padding: 7px 16px;
	border-radius: 999px;
	text-decoration: none !important;
	border: 0;
	cursor: pointer;
}
.jg-btn-ghost { background: none; border: 1px solid #e2c7ea; color: #6b5580 !important; }
.jg-card-upgrade { border: 2px solid #F674FF; }
.jg-card-links a { display: inline-block; color: #A946B4 !important; font-weight: 700; text-decoration: none !important; margin-right: 4px; }
.jg-acct-legacy { margin-top: 22px; background: #fff; border: 1px solid #f3d9f7; border-radius: 12px; padding: 0 16px; }
.jg-acct-legacy summary { cursor: pointer; font-weight: 700; padding: 13px 0; }
.jg-acct-login { text-align: center; padding: 40px 0; font-size: 16px; }

/* the account card hosts the news prefs — flatten its box */
.jg-card .jgn-prefs { grid-template-columns: 1fr; border: 0; box-shadow: none; padding: 0; margin: 0; }

/* ---- funscript library ---- */
.jg-fslib-head { text-align: center; padding: 12px 0 6px; }
.jg-fslib-head h1 { margin: 0 0 4px; font-size: 28px; font-weight: 800; }
.jg-fslib-head p { margin: 0 0 12px; color: #6b5580; }
.jg-fslib-search {
	width: 100%;
	max-width: 460px;
	border: 1px solid #e2c7ea;
	border-radius: 999px;
	padding: 10px 18px;
	font-size: 14px;
	margin-bottom: 16px;
}
.jg-fslib-row {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #fff;
	border: 1px solid #f3d9f7;
	border-radius: 12px;
	padding: 10px 14px;
	margin-bottom: 8px;
}
.jg-fslib-thumb img { width: 74px; height: 42px; object-fit: cover; border-radius: 8px; display: block; }
.jg-fslib-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jg-fslib-title { font-weight: 700; color: #27103A !important; text-decoration: none !important; }
.jg-fslib-title:hover { color: #A946B4 !important; }
.jg-fslib-file { font-size: 12px; color: #6b5580; word-break: break-all; }
.jg-fslib-none { text-align: center; color: #6b5580; }
@media (max-width: 560px) {
	.jg-fslib-thumb { display: none; }
}

/* ---- cancel retention ---- */
.jg-retain {
	background: #fff;
	border: 2px solid #F674FF;
	border-radius: 14px;
	padding: 16px 20px;
	margin-bottom: 18px;
}
.jg-retain h3 { margin: 0 0 6px; }
.jg-retain p { margin: 0; }
.jg-retain a { color: #A946B4 !important; }

/* rows of cards share the same height (even bottoms) */
.jg-acct-grid { align-items: stretch; }

/* billing history */
.jg-card-billing { margin-top: 14px; }
.jg-orders { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.jg-orders th, .jg-orders td { text-align: left; padding: 7px 10px; border-bottom: 1px solid #f7ebfa; }
.jg-orders th { color: #6b5580; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.jg-orders a { color: #A946B4 !important; font-weight: 700; text-decoration: none !important; }

/* pricing tiers in one row on desktop */
@media (min-width: 1000px) {
	.jg-pricing .jgvp-tiers { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* funscript library intro cards */
.jg-fslib-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; text-align: left; }
.jg-fslib-intro .jg-card-sub a { color: #A946B4 !important; font-weight: 700; }
@media (max-width: 700px) { .jg-fslib-intro { grid-template-columns: 1fr; } }

/* sign-in + change password */
.jg-signin { max-width: 900px; margin: 0 auto; padding: 26px 16px 50px; }
.jg-signin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
.jg-signin-patreon { border: 2px solid #F674FF; }
.jg-signin-pbtn { display: block; text-align: center; font-size: 15px; padding: 11px 0; }
.jg-signin-note { font-size: 12px; color: #6b5580; margin: 10px 0 0; }
.jg-signin .login { margin: 0; }
.jg-signin .login label { display: block; font-size: 13px; font-weight: 700; color: #4a3a5c; margin-bottom: 10px; }
.jg-signin .login input[type="text"], .jg-signin .login input[type="password"],
.jg-pwcard input[type="password"] {
	width: 100%;
	border: 1px solid #e2c7ea;
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 14px;
	margin-top: 3px;
}
.jg-signin .login .login-remember label { font-weight: 400; }
.jg-signin .login input[type="submit"] {
	background: linear-gradient(135deg, #F674FF, #FFC2FD);
	color: #27103A;
	font-weight: 800;
	border: 0;
	border-radius: 999px;
	padding: 9px 26px;
	cursor: pointer;
}
.jg-signin-links { font-size: 13px; margin: 12px 0 0; }
.jg-signin-links a { color: #A946B4 !important; font-weight: 700; }
.jg-pwcard { max-width: 460px; margin: 10px auto 0; }
.jg-pwcard label { display: block; font-size: 13px; font-weight: 700; color: #4a3a5c; margin-bottom: 12px; }
.jg-pw-msg { font-weight: 800; }
.jg-pw-msg.is-ok { color: #1d8348; }
.jg-pw-msg.is-err { color: #c0392b; }
@media (max-width: 760px) { .jg-signin-cols { grid-template-columns: 1fr; } }

/* sign-in tabs */
.jg-signin-tabs { display: flex; gap: 4px; max-width: 380px; margin: 6px auto 16px; background: #f2e2f7; border-radius: 999px; padding: 4px; }
.jg-signin-tab {
	flex: 1;
	border: 0;
	background: none;
	padding: 9px 0;
	border-radius: 999px;
	font-weight: 800;
	font-size: 14px;
	color: #6b5580;
	cursor: pointer;
}
.jg-signin-tab.is-active { background: linear-gradient(135deg, #F674FF, #FFC2FD); color: #27103A; }

/* quick links: one per row */
.jg-card-links { flex-direction: column; align-items: flex-start; gap: 6px; }
.jg-card-links a { margin: 0; }

/* Watch later card: full-width wrapping grid of video cards */
.jg-card-watchlater { grid-column: 1 / -1; }
.jg-card-watchlater .jgvp-row {
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	grid-template-rows: none;
	gap: 12px;
	overflow: visible;
}

/* billing + watch-later sit below the grid: same 14px rhythm between them */
.jg-card-billing { margin-top: 14px; }
.jg-card-watchlater { margin-top: 14px; }

/* long billing history collapses to the 6 newest rows */
.jg-orders.is-collapsed tbody tr:nth-child(n+7) { display: none; }
.jg-orders-more {
	display: inline-block;
	margin-top: 10px;
	background: #fff;
	border: 2px solid #F674FF;
	color: #A946B4;
	font-weight: 800;
	font-size: 13px;
	padding: 7px 18px;
	border-radius: 999px;
	cursor: pointer;
}
.jg-orders-more:hover { background: #F674FF; color: #fff; }

/* Handy remote-control link card */
.jg-handylink-row { display: flex; gap: 8px; }
.jg-handylink-row input {
	flex: 1;
	min-width: 0;
	border: 1px solid #e2c7ea;
	border-radius: 8px;
	padding: 8px 11px;
	font-size: 13px;
}
.jg-handylink-msg { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; min-height: 1em; }
.jg-handylink-msg.is-ok { color: #1d8348; }
.jg-handylink-msg.is-warn { color: #b9770e; }
.jg-handylink-msg.is-err { color: #c0392b; }

/* ---------- stream identity card ---------- */
.jg-ident-row { display: flex; gap: 14px; align-items: center; margin-top: 10px; }
.jg-ident-ava { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: #f3e3fb; display: grid; place-items: center; }
.jg-ident-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jg-ident-ava-empty { font-size: 30px; opacity: .5; }
.jg-ident-fields { flex: 1; min-width: 0; display: grid; gap: 8px; }
.jg-ident-fields input[type="text"] {
	width: 100%; box-sizing: border-box; border: 1px solid #e8d3f0; border-radius: 10px;
	padding: 9px 11px; font: inherit; font-weight: 600;
}
.jg-ident-btns { display: flex; gap: 8px; align-items: center; }
.jg-ident-upload { cursor: pointer; }

/* ---------- account dashboard: sidebar + tabbed panes ---------- */
.jg-acct { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 20px; align-items: start; }
.jg-acct-hello, .jg-acct-login { grid-column: 1 / -1; }
.jg-acct-nav {
	grid-column: 1;
	grid-row: 2;
	position: sticky;
	top: 66px; /* clears the fixed 52px header */
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: #fff;
	border: 1px solid #f3d9f7;
	border-radius: 14px;
	padding: 8px;
	box-shadow: 0 4px 14px rgba(169, 70, 180, .06);
}
.jg-acct-nav a {
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
	color: #4a3a5c !important;
	text-decoration: none !important;
	white-space: nowrap;
}
.jg-acct-nav a:hover { background: #fdf1ff; color: #A946B4 !important; }
.jg-acct-nav a.is-active { background: linear-gradient(135deg, #F674FF, #FFC2FD); color: #27103A !important; }
/* every pane shares the grid cell next to the nav; only the active one shows.
   Hidden panes stay in the DOM so their inline scripts keep working. */
.jg-acct-pane { grid-column: 2; grid-row: 2; display: none; min-width: 0; }
.jg-acct-pane.is-active { display: block; }
/* the watch-later card now lives inside the pane grid — the grid gap is the rhythm */
.jg-acct-grid .jg-card-watchlater { margin-top: 0; }
@media (max-width: 860px) {
	.jg-acct { display: block; }
	.jg-acct-nav {
		position: static;
		flex-direction: row;
		overflow-x: auto;
		margin: 0 0 14px;
		padding: 6px;
	}
	.jg-acct-nav a { flex: 0 0 auto; }
}
/* dark theme (companion rules to dark.css) */
html[data-jg-theme="dark"] .jg-acct-nav { background: #241332; border-color: #3d2352; }
html[data-jg-theme="dark"] .jg-acct-nav a { color: #c9b8da !important; }
html[data-jg-theme="dark"] .jg-acct-nav a:hover { background: #351d47; color: #FFC2FD !important; }
html[data-jg-theme="dark"] .jg-acct-nav a.is-active { background: linear-gradient(135deg, #F674FF, #FFC2FD); color: #27103A !important; }