/* ============================================
   WEIRD.NET V5 — INNER PAGES OVERRIDE
   Dark-first with light mode toggle
   Loaded AFTER responsive.css in header.php
   ============================================ */

/* --- DESIGN TOKENS (same as index.php) --- */
:root {
	--purple: #8b5cf6;
	--purple-light: #a78bfa;
	--purple-glow: rgba(139, 92, 246, 0.15);
	--purple-border: rgba(139, 92, 246, 0.2);
	--orange: #f97316;
	--orange-glow: rgba(249, 115, 22, 0.12);
	--coral: #f43f5e;
	--cyan: #22d3ee;
	--green: #34d399;
	--green-bg: rgba(52, 211, 153, 0.12);
	--pink: #f472b6;
	--yellow: #facc15;
	--bg: #0c0a14;
	--bg-raised: #141025;
	--surface: #1a1530;
	--surface-hover: #221d3a;
	--border: #2a2545;
	--border-hover: #3d3660;
	--text-primary: #eeeaf6;
	--text-secondary: #b0a8c4;
	--text-muted: #807896;
	--shadow: 0 2px 8px rgba(0,0,0,0.2), 0 12px 40px rgba(0,0,0,0.15);
	--shadow-glow: 0 0 40px rgba(139, 92, 246, 0.12);
	--radius: 16px;
	--radius-sm: 12px;
	--radius-pill: 100px;
	--ease: cubic-bezier(0.23, 1, 0.32, 1);
}

html.light-mode {
	--purple: #7c3aed;
	--purple-light: #8b5cf6;
	--purple-glow: rgba(124, 58, 237, 0.08);
	--purple-border: rgba(124, 58, 237, 0.15);
	--orange: #ea580c;
	--orange-glow: rgba(234, 88, 12, 0.06);
	--coral: #e11d48;
	--cyan: #0891b2;
	--green: #059669;
	--green-bg: rgba(5, 150, 105, 0.08);
	--pink: #db2777;
	--yellow: #ca8a04;
	--bg: #f8f7fc;
	--bg-raised: #f0eef6;
	--surface: #ffffff;
	--surface-hover: #f5f3fa;
	--border: #e2dff0;
	--border-hover: #c9c4db;
	--text-primary: #1a1740;
	--text-secondary: #57526e;
	--text-muted: #8a84a0;
	--shadow: 0 2px 8px rgba(26,23,64,0.04), 0 12px 40px rgba(26,23,64,0.06);
	--shadow-glow: 0 0 40px rgba(124, 58, 237, 0.06);
}

/* --- GLOBAL RESET --- */
*, *::before, *::after { box-sizing: border-box; }
body {
	background-color: var(--bg) !important;
	background-image: none !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	color: var(--text-secondary) !important;
	font-size: 15px !important;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
	color: var(--text-primary) !important;
	font-family: 'Space Grotesk', sans-serif !important;
}
a { color: var(--purple) !important; text-decoration: none !important; }
a:hover { color: var(--purple-light) !important; }
a.user { color: var(--text-secondary) !important; }
a.user:hover { color: var(--purple) !important; }
img { max-width: 100%; }

/* --- HEADER / NAV --- */
#sticky-header {
	padding: 0 !important;
	z-index: 999;
	transition: all 0.3s;
	width: 100%;
	background: var(--bg) !important;
}
#sticky-header.sticky-menu { background: var(--surface) !important; border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); }

html.light-mode #sticky-header.sticky-menu {
	background: rgba(255, 255, 255, 0.95) !important;
}
#sticky-header .container { max-width: 1150px !important; }
.e-transparent-menu.sticky-menu, .sticky-menu {
	background: rgba(12, 10, 20, 0.85) !important;
	backdrop-filter: blur(12px) !important;
}
html.light-mode .e-transparent-menu.sticky-menu,
html.light-mode .sticky-menu {
	background: rgba(255, 255, 255, 0.9) !important;
}
.navbar { padding: 10px 0 !important; }
.navbar-toggler { border: 1px solid var(--border) !important; padding: 6px 10px !important; width: auto !important; border-radius: 8px !important; }
.navbar-icon { background: var(--text-primary) !important; display: block; width: 22px; height: 2px; margin: 4px 0; border-radius: 2px; }
.main-menu .navbar-nav li.nav-item { margin-left: 30px !important; }
.main-menu .navbar-nav li.nav-item:first-child { margin-left: 0 !important; }
.main-menu .navbar-nav li.nav-item a.nav-link {
	color: var(--text-secondary) !important;
	font-family: 'Inter', -apple-system, sans-serif !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	padding: 35px 0 !important;
	line-height: 1 !important;
	border-radius: 0 !important;
	transition: all 0.3s !important;
	background: none !important;
}
.main-menu .navbar-nav li.nav-item a.nav-link:hover {
	color: var(--purple) !important;
	background: none !important;
}
.main-menu .navbar-nav li.nav-item a.nav-link::before { display: none !important; }
.main-menu .navbar-nav li.nav-item a.nav-link i {
	color: var(--text-muted) !important;
	margin-right: 4px;
}
/* Logo light-mode — uses SVG filter #logo-purple for exact color */
html.light-mode .navbar-brand-logo { filter: url(#logo-purple); }

/* --- SLIDER / SECTION RESET --- */
.slider-area, .slider-four-non-bg, .slider-eight-bg,
[data-background="img/slider/weird_slider9.png"] {
	background: none !important;
	background-image: none !important;
	min-height: 0 !important;
	height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
#home { display: none !important; }

/* --- MAIN CONTENT AREA --- */
main {
	padding-top: 96px !important;
	min-height: 100vh;
}
/* V6.8 patch 28 — widen the legacy Bootstrap container to match the
   .discover-wrap width (1320px) so non-Discover pages (profile, match, etc.)
   get the same edge-to-edge feel as Messages/Discover. */
.container { max-width: 1320px !important; }
.wrapper {
	width: 100% !important;
	max-width: 100% !important;
	padding: 8px 0 !important;
	text-align: center;
	color: var(--text-secondary) !important;
}

/* --- PORTAL SECTIONS --- */
.topav, .topav2, .topav3, .topav4, .topav5 {
	background: var(--surface) !important;
	background-image: none !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius) !important;
	color: var(--text-secondary) !important;
	padding: 20px !important;
	margin-bottom: 16px !important;
	opacity: 1 !important;
}
.topbut, .topbut2 {
	background: var(--bg-raised) !important;
	background-image: none !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius) !important;
	color: var(--text-secondary) !important;
	padding: 16px !important;
	margin-bottom: 12px !important;
}
.topbut2 {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	justify-content: center !important;
	align-items: center !important;
}
.topfon, .topfon2 {
	color: var(--text-primary) !important;
	background-color: transparent !important;
	font-weight: 600 !important;
}
.toppbg {
	background-color: var(--purple) !important;
	border-radius: var(--radius-sm) !important;
	color: #fff !important;
}
.fonttop {
	color: var(--text-primary) !important;
	font-weight: 700 !important;
}

/* --- BUTTONS (portal) --- */
.btnport, .btnport2, .btnport3 {
	background: #7c3aed !important;
	background-image: none !important;
	border: 1px solid transparent !important;
	border-radius: var(--radius-pill) !important;
	color: #fff !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	padding: 10px 22px !important;
	box-shadow: none !important;
	transition: all 0.2s !important;
	display: inline-block !important;
	text-decoration: none !important;
	letter-spacing: 0.03em !important;
	text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
	line-height: 1.4 !important;
}
.btnport:hover, .btnport2:hover, .btnport3:hover {
	background: var(--purple-light) !important;
	background-image: none !important;
	color: #fff !important;
	border-color: transparent !important;
	transform: translateY(-1px);
	text-decoration: none !important;
}
.btnport2 {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	color: var(--text-primary) !important;
	text-shadow: none !important;
	font-weight: 600 !important;
}
.btnport2:hover {
	background: var(--surface-hover) !important;
	color: var(--purple) !important;
	border-color: var(--purple-border) !important;
}
.btnport3 {
	background: var(--orange) !important;
	color: #fff !important;
}
.btnport3:hover {
	background: #fb923c !important;
}
html.light-mode .btnport {
	background: #7c3aed !important;
	color: #fff !important;
}
html.light-mode .btnport2 {
	background: var(--surface) !important;
	border-color: var(--border) !important;
	color: var(--text-primary) !important;
}
html.light-mode .btnport3 {
	background: var(--orange) !important;
	color: #fff !important;
}

/* --- SECTION VIEW ALL (below scroll) --- */
.section-viewall {
	padding: 12px 0 4px !important;
	margin-top: 4px !important;
}
.section-viewall a {
	font-size: 13px !important;
}

/* --- CARD ACTIONS (follow/profile/message) --- */
.card-actions {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	gap: 4px !important;
	padding: 4px 0 !important;
}
.card-actions .tvmatch2,
.card-actions .tvmatch3 {
	display: inline-flex !important;
	align-items: center !important;
	padding: 4px 8px !important;
	font-size: 11px !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	margin: 0 !important;
}

/* --- BOOTSTRAP OVERRIDES --- */
.btn-primary, .btn-info {
	background: #7c3aed !important;
	border-color: #7c3aed !important;
	color: #fff !important;
	border-radius: var(--radius-sm) !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 700 !important;
	box-shadow: none !important;
	text-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
}
.btn-primary:hover, .btn-info:hover {
	background: #6d28d9 !important;
	border-color: #6d28d9 !important;
}
.btn-secondary {
	background: #7c3aed !important;
	border-color: #7c3aed !important;
	color: #fff !important;
	border-radius: var(--radius-sm) !important;
	font-weight: 700 !important;
}
.btn-secondary:hover {
	background: #6d28d9 !important;
	border-color: #6d28d9 !important;
}
.btn-success {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	color: var(--text-secondary) !important;
	border-radius: var(--radius-sm) !important;
	font-weight: 500 !important;
}
.btn-success:hover {
	background: var(--surface-hover) !important;
	color: var(--text-primary) !important;
}
.btn-danger {
	background: var(--coral) !important;
	border-color: var(--coral) !important;
	border-radius: var(--radius-sm) !important;
}
.btn-outline-secondary {
	border-color: var(--border) !important;
	color: var(--text-secondary) !important;
	border-radius: var(--radius-sm) !important;
}
.btn-outline-secondary:hover {
	background: var(--surface-hover) !important;
	color: var(--purple) !important;
}

/* --- FORMS --- */
.form-control {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
	color: var(--text-primary) !important;
	padding: 10px 16px !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 14px !important;
}
.form-control:focus {
	border-color: var(--purple) !important;
	box-shadow: 0 0 0 3px var(--purple-glow) !important;
	background: var(--surface) !important;
	color: var(--text-primary) !important;
}
.form-control::placeholder { color: var(--text-muted) !important; }
select {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
	color: var(--text-primary) !important;
	box-shadow: none !important;
	padding: 8px 12px !important;
}
textarea {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
	color: var(--text-primary) !important;
}

/* --- CARDS / PANELS --- */
.card, .panel {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius) !important;
	color: var(--text-secondary) !important;
	box-shadow: var(--shadow) !important;
}
.card-header, .panel-heading {
	background: var(--bg-raised) !important;
	border-bottom: 1px solid var(--border) !important;
	color: var(--text-primary) !important;
}
.card-body, .panel-body {
	color: var(--text-secondary) !important;
}

/* --- ALERTS --- */
.alert-success {
	background: var(--green-bg) !important;
	border: 1px solid rgba(52, 211, 153, 0.3) !important;
	color: var(--green) !important;
	border-radius: var(--radius-sm) !important;
}
.alert-danger, .alert-warning {
	background: rgba(244, 63, 94, 0.1) !important;
	border: 1px solid rgba(244, 63, 94, 0.3) !important;
	color: var(--coral) !important;
	border-radius: var(--radius-sm) !important;
}
.alert-info {
	background: rgba(34, 211, 238, 0.1) !important;
	border: 1px solid rgba(34, 211, 238, 0.3) !important;
	color: var(--cyan) !important;
	border-radius: var(--radius-sm) !important;
}

/* --- TABLES --- */
table, .table {
	color: var(--text-secondary) !important;
}
.table th {
	color: var(--text-primary) !important;
	border-color: var(--border) !important;
	font-weight: 600 !important;
}
.table td {
	border-color: var(--border) !important;
	color: var(--text-secondary) !important;
}
.table-striped tbody tr:nth-of-type(odd) {
	background-color: var(--bg-raised) !important;
}
.table-hover tbody tr:hover {
	background-color: var(--surface-hover) !important;
}

/* --- SCROLLABLE LISTS (avatars) --- */
.avatars, .avatars2, .avatars3 {
	color: var(--text-primary) !important;
	scrollbar-color: var(--text-muted) var(--surface) !important;
}
.avatars::-webkit-scrollbar-thumb,
.avatars2::-webkit-scrollbar-thumb,
.avatars3::-webkit-scrollbar-thumb {
	background-color: var(--text-muted) !important;
}

/* --- JUMP CARDS --- */
.jumpa {
	background-color: var(--surface) !important;
	color: var(--text-secondary) !important;
	border-radius: var(--radius-sm) !important;
	border: 1px solid var(--border) !important;
}
.jumpa:hover {
	border-color: var(--purple-border) !important;
	box-shadow: var(--shadow-glow) !important;
}
.jumpa2 {
	background-color: var(--surface) !important;
	color: var(--text-secondary) !important;
	border-radius: var(--radius-sm) !important;
	border: 1px solid var(--border) !important;
	margin: 6px !important;
	padding: 12px !important;
}
.jumpa2:hover {
	background-color: var(--purple) !important;
	color: #fff !important;
	border-color: var(--purple) !important;
}

/* --- STATS --- */
.stats-item .label {
	color: var(--text-muted) !important;
}
.stats-item .stat {
	color: var(--text-primary) !important;
}
.stat-group header { color: var(--text-primary) !important; }

/* --- PURPLE BG SECTIONS (footer, share bar) --- */
.purplebg4 {
	background: var(--bg-raised) !important;
	background-image: none !important;
	color: var(--text-muted) !important;
	border-top: 1px solid var(--border) !important;
}
.purpletext4 { color: var(--purple) !important; }
.whitec { color: var(--purple-light) !important; }

/* --- FOOTER --- */
#fbg, footer {
	background: var(--bg) !important;
	background-image: none !important;
	border-top: 1px solid var(--border) !important;
}
.footer-text p, .copyright-text { color: var(--text-muted) !important; }
.fw-link ul li a { color: var(--text-muted) !important; }
.fw-link ul li a:hover { color: var(--purple) !important; }
.fw-title h5 { color: var(--text-primary) !important; }
html.light-mode .footer-widget img[src*="logo"] { filter: url(#logo-purple); }
html.light-mode nav img[src*="logo"],
html.light-mode .navbar img[src*="logo"],
html.light-mode header img[src*="logo"] { filter: url(#logo-purple); }

/* --- PAGINATION --- */
.pagination .page-link {
	background: var(--surface) !important;
	border-color: var(--border) !important;
	color: var(--text-secondary) !important;
}
.pagination .page-item.active .page-link {
	background: var(--purple) !important;
	border-color: var(--purple) !important;
	color: #fff !important;
}

/* --- TOOLTIPS --- */
.tooltipa .tooltiptexta {
	background-color: var(--surface) !important;
	color: var(--text-secondary) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
}

/* --- MODALS --- */
.modal-content {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius) !important;
	color: var(--text-secondary) !important;
}
.modal-header {
	border-bottom-color: var(--border) !important;
	color: var(--text-primary) !important;
}
.modal-footer {
	border-top-color: var(--border) !important;
}
.close { color: var(--text-muted) !important; }

/* --- BADGES --- */
.badge-primary, .badge-info {
	background: var(--purple) !important;
	color: #fff !important;
}
.badge-success {
	background: var(--green) !important;
	color: #fff !important;
}
.badge-danger {
	background: var(--coral) !important;
	color: #fff !important;
}

/* --- MISC TEXT --- */
.text-muted { color: var(--text-muted) !important; }
.text-muted2 { color: var(--text-secondary) !important; opacity: 1 !important; }
.font12 { color: var(--text-muted) !important; }
strong, b { color: var(--text-primary); }
hr { border-color: var(--border) !important; }

/* Text inside colored badges should inherit parent color */
.toppbg .text-muted2 { color: rgba(255,255,255,0.85) !important; }
.toppbg strong, .toppbg b { color: #fff !important; }
.toppbg a { color: #fff !important; }

/* --- WEIRD COIN SPINNER --- */
.weirdcointext {
	color: var(--purple) !important;
}

/* --- IMAGES IN DARK MODE --- */
img[src*="weird_slider"], img[src*="footer6"] {
	display: none !important;
}

/* --- THEME TOGGLE (matches homepage exactly) --- */
.theme-toggle {
	background: var(--surface); border: 1px solid var(--border);
	width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	font-size: 16px; transition: all 0.3s var(--ease);
	color: var(--orange); flex-shrink: 0;
	margin-left: 14px;
	padding: 0;
}
.theme-toggle:hover {
	background: var(--purple);
	color: #fff;
	border-color: var(--purple);
	transform: scale(1.1);
}
/* Dark mode: show sun (you can switch to light) */
html:not(.light-mode) .theme-toggle .fa-sun { display: inline; }
html:not(.light-mode) .theme-toggle .fa-moon { display: none; }
/* Light mode: show moon (you can switch to dark) */
html.light-mode .theme-toggle .fa-sun { display: none; }
html.light-mode .theme-toggle .fa-moon { display: inline; }

/* Mobile theme toggle */
.theme-toggle-mobile {
	background: var(--surface); border: 1px solid var(--border);
	width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
	display: none; align-items: center; justify-content: center;
	font-size: 15px; transition: all 0.3s var(--ease);
	color: var(--orange); flex-shrink: 0;
	margin-left: auto; margin-right: 12px;
	padding: 0;
}
.theme-toggle-mobile:hover {
	background: var(--purple); color: #fff; border-color: var(--purple);
}
html:not(.light-mode) .theme-toggle-mobile .fa-sun { display: inline; }
html:not(.light-mode) .theme-toggle-mobile .fa-moon { display: none; }
html.light-mode .theme-toggle-mobile .fa-sun { display: none; }
html.light-mode .theme-toggle-mobile .fa-moon { display: inline; }
@media (max-width: 991px) {
	.theme-toggle-mobile { display: flex; }
	/* V6.8 patch 86 — scoped to the legacy guest-page navbar containers
	   only (login, forgot, register, terms, privacy, messages, notifylib,
	   index). Logged-in headers (header.php / header2.php) no longer
	   render a navbar theme toggle, and the new in-settings theme toggle
	   on editinfo.php must remain visible on mobile. */
	.main-menu .theme-toggle,
	.transparent-menu .theme-toggle { display: none !important; }
}

/* V6.8 patch 86 — Account settings theme row */
.acct-theme-row {
	display: flex; align-items: center; gap: 14px;
	flex-wrap: wrap;
}
.acct-theme-row .theme-toggle {
	margin-left: 0;
	width: 44px; height: 44px;
	font-size: 18px;
}
.acct-theme-hint {
	color: var(--text-secondary, #8a8a8a);
	font-size: 14px;
	line-height: 1.4;
	margin: 0;
}

/* --- DROPDOWN --- */
.dropdown-menu {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
}
.dropdown-item {
	color: var(--text-secondary) !important;
}
.dropdown-item:hover {
	background: var(--surface-hover) !important;
	color: var(--purple) !important;
}

/* --- LIST GROUP --- */
.list-group-item {
	background: var(--surface) !important;
	border-color: var(--border) !important;
	color: var(--text-secondary) !important;
}

/* --- BREADCRUMB --- */
.breadcrumb {
	background: var(--bg-raised) !important;
	border-radius: var(--radius-sm) !important;
}
.breadcrumb-item a { color: var(--purple) !important; }
.breadcrumb-item.active { color: var(--text-muted) !important; }

/* --- RESPONSIVE: MOBILE NAV (matches homepage) --- */
@media (max-width: 991px) {
	ul.navbar-nav,
	.sticky-menu ul.navbar-nav,
	.main-menu ul.navbar-nav {
		background: var(--surface) !important;
		border: 1px solid var(--border) !important;
		border-radius: var(--radius-sm) !important;
		padding: 12px 16px !important;
		margin-top: 10px !important;
		box-shadow: var(--shadow) !important;
	}
	.navbar-collapse {
		background: none !important;
		border: none !important;
		margin-top: 0 !important;
		padding: 0 !important;
	}
	.main-menu .navbar-nav li.nav-item {
		margin: 0 !important;
	}
	.main-menu .navbar-nav li.nav-item a.nav-link,
	.sticky-menu .main-menu .navbar-nav li.nav-item a.nav-link {
		color: var(--text-primary) !important;
		font-size: 15px !important;
		font-weight: 600 !important;
		padding: 10px 8px !important;
		line-height: 1.4 !important;
	}
	.main-menu .navbar-nav li.nav-item a.nav-link:hover {
		color: var(--purple) !important;
	}
	.main-menu .navbar-nav li.nav-item a.nav-link::before,
	.sticky-menu .main-menu .navbar-nav li.nav-item a.nav-link::before {
		display: none !important;
	}
	.navbar-collapse .theme-toggle { margin: 8px 0 0; }
	.navbar-toggler {
		border: 1px solid var(--border) !important;
		padding: 6px 10px !important;
		width: auto !important;
		border-radius: 8px !important;
	}
	.navbar-icon {
		background: var(--text-primary) !important;
		height: 2px !important;
		width: 22px !important;
		margin: 4px 0 !important;
		border-radius: 2px;
	}
}

/* --- LINK COLORS IN CONTENT --- */
.wrapper a { color: var(--purple) !important; }
.wrapper a:hover { color: var(--purple-light) !important; }

/* --- PROGRESS BARS --- */
.progress {
	background: var(--bg-raised) !important;
	border-radius: var(--radius-sm) !important;
}
.progress-bar {
	background: var(--purple) !important;
}

/* --- INPUT GROUP --- */
.input-group-text {
	background: var(--bg-raised) !important;
	border-color: var(--border) !important;
	color: var(--text-muted) !important;
}

/* --- SUBMITREG (login/register button) --- */
.submitreg {
	background: var(--purple) !important;
	border-color: var(--purple) !important;
	color: #fff !important;
	border-radius: var(--radius-sm) !important;
	font-weight: 600 !important;
	padding: 10px 24px !important;
}
.submitreg:hover {
	background: var(--purple-light) !important;
	border-color: var(--purple-light) !important;
}

/* --- MESSAGES PAGE --- */
.chat-messages {
	background-color: var(--bg-raised) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
	color: var(--text-secondary) !important;
}
.chat-messages::-webkit-scrollbar-thumb { background-color: var(--text-muted) !important; }
.chat-message-left, .chat-message-right { color: var(--text-secondary) !important; }
.profilea {
	background-color: var(--surface) !important;
	color: var(--text-secondary) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
}
.profilea:hover {
	background-color: var(--purple) !important;
	color: #fff !important;
}
.accordion-button {
	background-color: var(--surface) !important;
	color: var(--text-primary) !important;
	border: none !important;
	font-family: 'Inter', sans-serif !important;
}
.accordion-button:not(.collapsed) {
	background-color: var(--purple) !important;
	color: #fff !important;
}
.accordion-button:focus { box-shadow: 0 0 0 3px var(--purple-glow) !important; }
.accordion-item {
	background-color: var(--surface) !important;
	border-color: var(--border) !important;
}
.accordion-body {
	background-color: var(--surface) !important;
	color: var(--text-secondary) !important;
}

/* --- LOGIN / REGISTER PAGES (standalone head) --- */
.wrapper h2, .wrapper h3 { color: var(--text-primary) !important; }
.wrapper p { color: var(--text-secondary) !important; }

/* ============================================
   CONTENT SECTION OVERRIDES
   Override inline <style> blocks on inner pages
   ============================================ */

/* --- BOX / CONTENT CONTAINERS --- */
.box2 {
	background-color: var(--surface) !important;
	color: var(--text-secondary) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
}
.box3 {
	background-color: var(--surface) !important;
	color: var(--text-secondary) !important;
	border-color: var(--border) !important;
}
.purple {
	background: var(--bg-raised) !important;
	border: 2px solid var(--purple) !important;
	border-radius: var(--radius-sm) !important;
}
.purple2 {
	border: 15px solid var(--bg-raised) !important;
}
.input {
	background: var(--surface) !important;
	color: var(--text-secondary) !important;
	border: 2px solid var(--purple) !important;
	border-radius: var(--radius-sm) !important;
}
.input::placeholder {
	color: var(--text-muted) !important;
}
::placeholder {
	color: var(--text-muted) !important;
}

/* --- BUTTONS (content areas) --- */
.buttonaa {
	background: #7c3aed !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--radius-sm) !important;
	font-weight: 700 !important;
	transition: background 0.25s var(--ease) !important;
	text-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
}
.buttonaa:hover {
	background: #6d28d9 !important;
	color: #fff !important;
}
.box:hover button {
	background: var(--purple-light) !important;
	color: #fff !important;
}
.box:hover .input,
.box:hover input {
	background: var(--surface-hover) !important;
	color: var(--text-primary) !important;
}

/* --- THUMBS / RATING --- */
.linkthumbs {
	color: var(--green) !important;
	background-color: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
	transition: all 0.25s var(--ease) !important;
}
.linkthumbs:hover {
	background-color: var(--green-bg) !important;
	color: var(--green) !important;
}
.linkthumbsr {
	color: var(--coral) !important;
	background-color: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
	transition: all 0.25s var(--ease) !important;
}
.linkthumbsr:hover {
	background-color: rgba(244, 63, 94, 0.12) !important;
	color: var(--coral) !important;
}
.redt, .redt a { color: var(--coral) !important; }
.greent, .greent a { color: var(--green) !important; }

/* --- FILTER / TAG PILLS --- */
.tvmatch {
	background-color: var(--surface) !important;
	color: var(--text-secondary) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-pill) !important;
	transition: all 0.25s var(--ease) !important;
}
.tvmatch:hover {
	background-color: var(--purple) !important;
	color: #fff !important;
	border-color: var(--purple) !important;
}
.tvmatch2 {
	background-color: var(--surface) !important;
	color: var(--text-secondary) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-pill) !important;
	transition: all 0.25s var(--ease) !important;
}
.tvmatch2:hover {
	background-color: var(--coral) !important;
	color: #fff !important;
	border-color: var(--coral) !important;
}
.tvmatch3 {
	background-color: var(--purple) !important;
	color: #fff !important;
	border-radius: var(--radius-pill) !important;
	transition: all 0.25s var(--ease) !important;
}
.tvmatch3:hover {
	background-color: var(--purple-light) !important;
}
.tvmatch4 {
	background-color: var(--purple) !important;
	color: #fff !important;
	border-radius: var(--radius-pill) !important;
}
.selectedtv {
	background-color: var(--purple) !important;
	color: #fff !important;
	border-color: var(--purple) !important;
	border-radius: var(--radius-pill) !important;
}

/* --- CUSTOM SELECT DROPDOWNS --- */
.custom-select {
	background-color: var(--surface) !important;
	color: var(--text-secondary) !important;
	border: 2px solid var(--purple) !important;
	border-radius: var(--radius-sm) !important;
}
.custom-select select {
	background-color: var(--surface) !important;
	color: var(--text-secondary) !important;
}
.custom-select:after {
	background-color: var(--purple) !important;
}
.purplesel {
	background-color: var(--purple) !important;
	color: #fff !important;
	border-radius: var(--radius-sm) !important;
}

/* --- TEXT / MUTED HELPERS --- */
.text-muted3, .text-muted3 a { color: var(--text-muted) !important; }
.text-muted4 { color: var(--text-muted) !important; }
.text-muted5 { color: var(--text-muted) !important; opacity: 0.8 !important; }
.text-muted6 { color: var(--text-muted) !important; font-size: 10px !important; }
.purpletext { color: var(--purple) !important; }
.whitetext { color: var(--text-primary) !important; }
.dottedb {
	border-bottom: 1px dotted var(--border) !important;
}

/* --- TABLE ROWS --- */
tr:nth-child(even) {
	background-color: var(--surface) !important;
}
tr:nth-child(odd) {
	background-color: var(--bg-raised) !important;
}
td, th {
	color: var(--text-secondary) !important;
	border-color: var(--border) !important;
}

/* --- EDITINFO / PROFILE FORMS --- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="url"] {
	background-color: var(--surface) !important;
	color: var(--text-secondary) !important;
	border-color: var(--border) !important;
	border-radius: var(--radius-sm) !important;
}
input:focus, textarea:focus, select:focus {
	background-color: var(--surface-hover) !important;
	color: var(--text-primary) !important;
	border-color: var(--purple) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px var(--purple-glow) !important;
}
input[type="range"] {
	accent-color: var(--purple) !important;
}
input[type="range"]::-webkit-slider-thumb {
	background: var(--purple) !important;
}
input[type="range"]::-webkit-slider-runnable-track {
	background: var(--border) !important;
}

/* --- ACTIVITY PAGE INLINE STYLE FIX --- */
div[style*="background-color: #F0F3F4"],
div[style*="background-color:#F0F3F4"] {
	background-color: var(--surface) !important;
	border-radius: var(--radius-sm) !important;
}

/* --- PAGINATION --- */
.mobilepag {
	color: var(--text-secondary) !important;
}
.mobilepag a {
	color: var(--purple) !important;
}

/* --- GENERAL CONTENT AREA --- */
main, .main-area, section {
	color: var(--text-secondary) !important;
}
h1, h2, h3, h4, h5, h6 {
	color: var(--text-primary) !important;
}
p {
	color: var(--text-secondary) !important;
}
a {
	color: var(--purple-light) !important;
}
a:hover {
	color: var(--purple) !important;
}
.nav-link, .nav-link.user {
	color: var(--text-secondary) !important;
	transition: all 0.3s !important;
	font-size: 18px !important;
}
.nav-link:hover, .nav-link.user:hover {
	color: var(--purple) !important;
}

/* --- COIN SPINNER (thisorthat / welcome) --- */
.weirdcointext {
	color: var(--purple) !important;
}

/* --- TOGGLE BUTTON PATTERN (avatar/interest selection) --- */
.btn-check.hidden {
	position: absolute !important;
	clip: rect(0,0,0,0) !important;
	pointer-events: none !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
}
[data-toggle="buttons"] label.btn {
	cursor: pointer !important;
	position: relative !important;
	z-index: 1 !important;
}
[data-toggle="buttons"] label.btn-primary {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	color: var(--text-secondary) !important;
	margin: 3px !important;
	transition: all 0.2s var(--ease) !important;
}
[data-toggle="buttons"] label.btn-primary:hover {
	background: var(--surface-hover) !important;
	color: var(--text-primary) !important;
	border-color: var(--purple-border) !important;
}
[data-toggle="buttons"] label.btn-primary.active,
label.btn:has(input:checked) {
	background: var(--purple) !important;
	border-color: var(--purple) !important;
	color: #fff !important;
	box-shadow: 0 0 0 3px var(--purple-glow) !important;
}
.avatars label.btn {
	padding: 2px !important;
	margin: 2px !important;
	border-radius: 50% !important;
	background: transparent !important;
	border: 3px solid transparent !important;
}
.avatars label.btn.active,
.avatars label.btn:has(input:checked) {
	border-color: var(--purple) !important;
	box-shadow: 0 0 0 3px var(--purple-glow) !important;
	background: var(--purple-glow) !important;
}

/* --- CARD LINK READABILITY --- */
.jumpa2 .tvmatch2 {
	color: var(--text-secondary) !important;
	font-size: 11px !important;
}
.jumpa2 .tvmatch2:hover {
	color: #fff !important;
}
.jumpa2 .tvmatch3:hover {
	color: #fff !important;
}
.jumpa .font-weight-bold a,
.jumpa2 .font-weight-bold a,
.card .font-weight-bold a {
	color: var(--text-primary) !important;
}
.card .font-weight-bold a:hover {
	color: var(--purple-light) !important;
}

/* Discover page category links */
.wrapper a strong,
main a strong {
	color: var(--purple-light) !important;
}
.wrapper a:hover strong,
main a:hover strong {
	color: #fff !important;
}

/* Form labels readability */
.reglab, label.reglab {
	color: var(--text-secondary) !important;
}

/* Input group addon */
.input-group-text {
	background: var(--bg-raised) !important;
	border-color: var(--border) !important;
	color: var(--text-muted) !important;
}

/* --- LIGHT MODE content overrides --- */
html.light-mode .linkthumbs { border-color: var(--border) !important; }
html.light-mode .linkthumbsr { border-color: var(--border) !important; }
html.light-mode tr:nth-child(even) { background-color: var(--surface) !important; }
html.light-mode tr:nth-child(odd) { background-color: var(--bg-raised) !important; }
html.light-mode .tvmatch { border-color: var(--border) !important; }
html.light-mode .tvmatch2 { border-color: var(--border) !important; }
html.light-mode a { color: var(--purple) !important; }
html.light-mode a:hover { color: var(--purple-light) !important; }
html.light-mode [data-toggle="buttons"] label.btn-primary {
	background: var(--bg-raised) !important;
	border-color: var(--border) !important;
	color: var(--text-secondary) !important;
}
html.light-mode [data-toggle="buttons"] label.btn-primary.active,
html.light-mode label.btn:has(input:checked) {
	background: var(--purple) !important;
	color: #fff !important;
}
html.light-mode .wrapper a strong,
html.light-mode main a strong {
	color: var(--purple) !important;
}
html.light-mode .wrapper a:hover strong {
	color: var(--purple-light) !important;
}

/* ============================================
   BOOTSTRAP UTILITY OVERRIDES
   Ensure bg-light, bg-dark, text-* work in dark mode
   ============================================ */
.bg-light {
	background-color: var(--surface) !important;
	color: var(--text-secondary) !important;
}
.bg-dark {
	background-color: var(--bg-raised) !important;
	color: var(--text-primary) !important;
}
.bg-white {
	background-color: var(--surface) !important;
}
.bg-secondary {
	background-color: var(--surface-hover) !important;
}
.text-dark {
	color: var(--text-primary) !important;
}
.text-white {
	color: var(--text-primary) !important;
}
html.light-mode .text-white {
	color: var(--text-primary) !important;
}
html.light-mode .bg-light {
	background-color: var(--surface) !important;
}
html.light-mode .bg-dark {
	background-color: var(--bg-raised) !important;
	color: var(--text-primary) !important;
}

/* ============================================
   MESSAGES PAGE — CHAT BUBBLES & BORDERS
   ============================================ */
/* Received message bubble */
.chat-message-left .bg-light {
	background-color: var(--surface) !important;
	color: var(--text-secondary) !important;
	border: 1px solid var(--border) !important;
}
.chat-message-left .bg-light .font-weight-bold {
	color: var(--text-primary) !important;
}
.chat-message-left .bg-light a {
	color: var(--purple-light) !important;
}
/* Sent message bubble */
.chat-message-right .bg-dark {
	background-color: #7c3aed !important;
	color: #fff !important;
	border: 1px solid rgba(139, 92, 246, 0.3) !important;
}
.chat-message-right .bg-dark .font-weight-bold {
	color: rgba(255,255,255,0.9) !important;
}
.chat-message-right .bg-dark font,
.chat-message-right .bg-dark font[color],
.chat-message-right .bg-dark .msg-sender,
.chat-message-right .bg-dark .msg-text {
	color: #fff !important;
}
/* Override all <font> tags in chat */
.chat-messages font[color] {
	color: inherit !important;
}
.chat-message-right font[color] {
	color: #fff !important;
}
.chat-message-left font[color] {
	color: var(--purple) !important;
}
/* Message "NEW" badge */
.msg-new, font[color="330099"] {
	color: var(--purple) !important;
	font-weight: 700 !important;
}
/* Message border overrides */
.border-bottom {
	border-bottom-color: var(--border) !important;
}
.border-bottom2 {
	border-bottom: 0.5px solid var(--border) !important;
}
.border-top {
	border-top-color: var(--border) !important;
}
/* Badge in message list */
.badge {
	color: var(--purple) !important;
}
.badge font[color] {
	color: var(--purple) !important;
}
/* Message list items */
.list-group-item.list-group-item-action {
	background: var(--surface) !important;
	color: var(--text-secondary) !important;
	border-color: var(--border) !important;
}
.list-group-item.list-group-item-action:hover {
	background: var(--surface-hover) !important;
	color: var(--text-primary) !important;
}
.list-group-item.list-group-item-action .font-weight-bold {
	color: var(--text-primary) !important;
}
/* Message timestamps */
.chat-message-left .text-muted,
.chat-message-right .text-muted {
	color: var(--text-muted) !important;
	font-size: 11px !important;
}

/* ============================================
   GENERAL <font> TAG OVERRIDES
   For any remaining <font color> in PHP
   ============================================ */
font[color] {
	color: inherit !important;
}
font[color="330099"],
font[color="#330099"] {
	color: var(--purple) !important;
}
font[color="#fff"],
font[color="fff"],
font[color="#ffffff"],
font[color="white"] {
	color: var(--text-primary) !important;
}
/* Except inside sent bubbles where white is correct */
.bg-dark font[color="#fff"],
.bg-dark font[color="fff"] {
	color: #fff !important;
}

/* ============================================
   BTN-PRIMARY / BTN-INFO / SUBMIT — CONTRAST FIX
   Use darker purple for better contrast ratio
   ============================================ */
.btn-primary, .btn-info, .submitreg {
	background: #7c3aed !important;
	border-color: #7c3aed !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	text-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
}
.btn-primary:hover, .btn-info:hover, .submitreg:hover {
	background: #6d28d9 !important;
	border-color: #6d28d9 !important;
	color: #fff !important;
}
.btn-primary:focus, .btn-info:focus, .submitreg:focus {
	box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.3) !important;
}

/* ============================================
   SEARCH / FILTER BOX — BETTER READABILITY
   ============================================ */
.box {
	background: var(--surface) !important;
	border-radius: var(--radius-sm) !important;
}
.box:hover {
	background: var(--surface-hover) !important;
}
.box .input, .box input {
	background: var(--surface) !important;
	color: var(--text-primary) !important;
	border-color: var(--purple) !important;
}
.box .buttonaa, .box button {
	background: #7c3aed !important;
	color: #fff !important;
}

/* ============================================
   PROFILE PAGE FIXES
   ============================================ */
.purpletext {
	color: var(--text-secondary) !important;
}
.whitetext {
	color: var(--text-primary) !important;
}
/* Profile progress bars */
.progress {
	background: var(--bg-raised) !important;
	border: 1px solid var(--border) !important;
	height: 20px !important;
}
.progress-bar {
	background: linear-gradient(90deg, #7c3aed, var(--purple-light)) !important;
	color: #fff !important;
	font-weight: 600 !important;
	font-size: 12px !important;
}
/* Profile share textarea */
textarea {
	background: var(--surface) !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
}
textarea:focus {
	background: var(--surface-hover) !important;
	color: var(--text-primary) !important;
	border-color: var(--purple) !important;
}

/* ============================================
   CUSTOM SELECT — BETTER DARK MODE
   ============================================ */
.custom-select {
	background-color: var(--surface) !important;
	color: var(--text-primary) !important;
	border: 2px solid var(--purple) !important;
	border-radius: var(--radius-sm) !important;
}
.custom-select select {
	background-color: var(--surface) !important;
	color: var(--text-primary) !important;
	border: none !important;
}
.custom-select::after,
.custom-select:after {
	background-color: #7c3aed !important;
	color: #fff !important;
}
select option {
	background-color: var(--surface) !important;
	color: var(--text-primary) !important;
}

/* ============================================
   TABLE / LIST READABILITY
   ============================================ */
table {
	color: var(--text-secondary) !important;
}
tr {
	color: var(--text-secondary) !important;
}
tr:nth-child(even) {
	background-color: var(--surface) !important;
}
tr:nth-child(odd) {
	background-color: var(--bg-raised) !important;
}
td {
	color: var(--text-secondary) !important;
	border-color: var(--border) !important;
	padding: 8px !important;
}
th {
	color: var(--text-primary) !important;
	border-color: var(--border) !important;
	font-weight: 700 !important;
}
/* Make percentage/rating text more readable */
td .text-muted3, td .text-muted4,
td small, td .small {
	color: var(--text-muted) !important;
	font-size: 12px !important;
}

/* ============================================
   THUMBS UP/DOWN — HOVER STATE FIX
   Inline styles set :hover to #F0F0F0 bg
   ============================================ */
.linkthumbs:hover {
	background-color: var(--green-bg) !important;
	color: var(--green) !important;
	border-color: var(--green) !important;
}
.linkthumbsr:hover {
	background-color: rgba(244, 63, 94, 0.12) !important;
	color: var(--coral) !important;
	border-color: var(--coral) !important;
}
.redt a:hover, .greent a:hover {
	color: var(--text-primary) !important;
}

/* ============================================
   FILTER PILLS — ACTIVE/HOVER STATE FIXES
   ============================================ */
.tvmatch2:hover {
	background-color: var(--purple) !important;
	color: #fff !important;
	border-color: var(--purple) !important;
}
.tvmatch3:hover {
	background-color: var(--purple-light) !important;
	color: #fff !important;
	border-color: var(--purple-light) !important;
}
/* Ensure toggle-style pills (.tvmatch2/.tvmatch3 used as Follow/Unfollow) */
a.tvmatch2, a.tvmatch3, span.tvmatch2, span.tvmatch3 {
	cursor: pointer !important;
	user-select: none !important;
}

/* ============================================
   PURPLE2 SECTION HEADER
   ============================================ */
.purple2 {
	border: 4px solid var(--purple) !important;
	color: var(--text-primary) !important;
	background-color: var(--bg-raised) !important;
	border-radius: var(--radius) !important;
}

/* ============================================
   TOOLTIP FIX
   ============================================ */
.dottedb {
	border-bottom: 1px dotted var(--text-muted) !important;
	cursor: help !important;
}
.tooltipa .tooltiptexta {
	background-color: var(--surface) !important;
	color: var(--text-secondary) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
	box-shadow: var(--shadow) !important;
}

/* ============================================
   INLINE STYLE ATTRIBUTE OVERRIDES
   Target elements with hardcoded inline colors
   ============================================ */
[style*="background-color: #F0F0F0"],
[style*="background-color:#F0F0F0"],
[style*="background-color: #f0f0f0"],
[style*="background-color:#f0f0f0"],
[style*="background: #F0F0F0"],
[style*="background: #f0f0f0"] {
	background-color: var(--surface) !important;
}
[style*="background-color: #F0F3F4"],
[style*="background-color:#F0F3F4"] {
	background-color: var(--surface) !important;
}
[style*="color:#000"],
[style*="color: #000"],
[style*="color:black"],
[style*="color: black"] {
	color: var(--text-secondary) !important;
}
[style*="color:#333"],
[style*="color: #333"] {
	color: var(--text-secondary) !important;
}

/* ============================================
   MOBILE / RESPONSIVE — READABILITY
   ============================================ */
@media (max-width: 767px) {
	.btnport, .btnport2, .btnport3 {
		font-size: 13px !important;
		padding: 8px 16px !important;
	}
	.topav, .topav2, .topav3, .topav4, .topav5 {
		padding: 12px !important;
	}
	.avatars, .avatars2, .avatars3 {
		padding: 6px !important;
	}
	.box2 {
		padding: 10px !important;
	}
	td {
		font-size: 13px !important;
		padding: 6px !important;
	}
	.jumpa, .jumpa2 {
		margin: 4px !important;
		padding: 8px !important;
	}
	.chat-messages {
		max-height: 350px !important;
	}
}

@media (max-width: 480px) {
	.btnport, .btnport2, .btnport3 {
		font-size: 12px !important;
		padding: 7px 14px !important;
	}
	.topbut2 {
		gap: 4px !important;
	}
}

/* ============================================================
   V6 — UNIFIED DESIGN SYSTEM
   - Consistent buttons everywhere (.btn-glow same as homepage)
   - Trust signals, feed, AI section, testimonials
   - All AA contrast verified
   ============================================================ */

/* --- UNIFIED BUTTONS (matches homepage .btn-glow) --- */
.btn-glow {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 14px 28px !important;
	border-radius: var(--radius-pill) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	font-family: 'Space Grotesk', 'Inter', sans-serif !important;
	transition: all 0.4s var(--ease) !important;
	cursor: pointer !important;
	border: none !important;
	text-decoration: none !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
}
.btn-glow.primary {
	background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important;
	color: #fff !important;
	box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3) !important;
}
.btn-glow.primary:hover {
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 8px 32px rgba(139, 92, 246, 0.45) !important;
	color: #fff !important;
}
.btn-glow.secondary {
	background: var(--surface) !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--border) !important;
}
.btn-glow.secondary:hover {
	border-color: var(--purple) !important;
	color: var(--purple) !important;
	transform: translateY(-2px);
}
.btn-glow.ghost {
	background: transparent !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--border) !important;
}
.btn-glow.ghost:hover {
	background: var(--surface) !important;
	border-color: var(--purple) !important;
	color: var(--purple) !important;
}
.btn-glow.sm { padding: 8px 16px !important; font-size: 13px !important; }
.btn-glow.lg { padding: 18px 36px !important; font-size: 17px !important; }
.btn-glow:disabled, .btn-glow.disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
	transform: none !important;
}

/* --- TRUST BAR (homepage logged-out) --- */
.trust-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 24px;
	padding: 20px;
	margin: 20px auto 0;
	max-width: 900px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	backdrop-filter: blur(10px);
}
.trust-item {
	display: flex; align-items: center; gap: 8px;
	font-size: 13px; color: var(--text-secondary);
	font-weight: 600;
}
.trust-item i { color: var(--green); font-size: 16px; }
.trust-item.purple i { color: var(--purple); }
.trust-item.orange i { color: var(--orange); }
@media (max-width: 640px) {
	.trust-bar { gap: 12px; padding: 14px; }
	.trust-item { font-size: 12px; }
}

/* --- TESTIMONIALS --- */
.testimonials-section {
	padding: 80px 24px;
}
.testimonials-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	max-width: 1200px;
	margin: 40px auto 0;
}
.testimonial-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 28px;
	transition: all 0.3s var(--ease);
}
.testimonial-card:hover {
	border-color: var(--purple-border);
	box-shadow: var(--shadow-glow);
	transform: translateY(-2px);
}
.testimonial-quote {
	color: var(--text-primary);
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 20px;
	font-style: italic;
}
.testimonial-author {
	display: flex;
	align-items: center;
	gap: 12px;
}
.testimonial-avatar {
	width: 44px; height: 44px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; color: #fff; font-size: 16px;
}
.testimonial-meta { display: flex; flex-direction: column; }
.testimonial-name { color: var(--text-primary); font-weight: 700; font-size: 14px; }
.testimonial-role { color: var(--text-muted); font-size: 12px; }
.testimonial-stars { color: var(--yellow); margin-bottom: 12px; font-size: 14px; }

/* --- SOCIAL PROOF STRIP --- */
.social-proof {
	background: var(--bg-raised);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	padding: 32px 24px;
	text-align: center;
}
.social-proof-label {
	font-size: 11px;
	letter-spacing: 0.2em;
	color: var(--text-muted);
	text-transform: uppercase;
	margin-bottom: 16px;
	font-weight: 700;
}
.social-proof-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
	margin-top: 8px;
}
.social-proof-stat {
	display: flex; flex-direction: column; align-items: center;
}
.social-proof-stat strong {
	font-size: 28px;
	color: var(--text-primary);
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 800;
}
.social-proof-stat span {
	color: var(--text-muted); font-size: 12px;
	text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
}

/* --- FEED PAGE --- */
.feed-wrap {
	max-width: 720px;
	margin: 0 auto;
	padding: 24px 16px;
	text-align: left;
}
.feed-header {
	display: flex; flex-wrap: wrap; align-items: center;
	justify-content: space-between; gap: 12px;
	margin-bottom: 24px;
}
.feed-header h1 {
	font-size: 28px;
	color: var(--text-primary);
	margin: 0;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 800;
	letter-spacing: -0.5px;
}
.feed-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 24px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.feed-tabs::-webkit-scrollbar { display: none; }
.feed-tab {
	padding: 8px 16px;
	border-radius: var(--radius-pill);
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text-secondary);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.3s var(--ease);
	text-decoration: none !important;
}
.feed-tab:hover {
	border-color: var(--purple-border);
	color: var(--text-primary) !important;
}
.feed-tab.active {
	background: var(--purple);
	border-color: var(--purple);
	color: #fff !important;
}
.feed-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 20px;
	margin-bottom: 16px;
	transition: all 0.3s var(--ease);
}
.feed-card:hover {
	border-color: var(--purple-border);
	box-shadow: var(--shadow);
}
.feed-card-head {
	display: flex; align-items: center; gap: 12px;
	margin-bottom: 14px;
}
.feed-card-avatar {
	width: 40px; height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--purple), var(--orange));
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-weight: 700; font-size: 15px;
	flex-shrink: 0;
}
.feed-card-meta { flex: 1; min-width: 0; }
.feed-card-name {
	color: var(--text-primary); font-weight: 700;
	font-size: 14px;
}
.feed-card-name .match-pct {
	color: var(--purple);
	font-size: 12px;
	font-weight: 700;
	margin-left: 4px;
}
.feed-card-time {
	color: var(--text-muted);
	font-size: 12px;
}
.feed-card-action {
	color: var(--text-secondary);
	margin-bottom: 12px;
	font-size: 14px;
	line-height: 1.5;
}
.feed-card-action strong {
	color: var(--text-primary);
}
.feed-card-action .verb-up { color: var(--green); font-weight: 700; }
.feed-card-action .verb-down { color: var(--coral); font-weight: 700; }
.feed-card-item {
	display: flex; align-items: center; gap: 14px;
	padding: 14px;
	background: var(--bg-raised);
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	transition: all 0.3s var(--ease);
}
.feed-card-item-icon {
	width: 56px; height: 56px;
	border-radius: var(--radius-sm);
	background: var(--purple-glow);
	display: flex; align-items: center; justify-content: center;
	font-size: 24px;
	flex-shrink: 0;
}
.feed-card-item-info { flex: 1; min-width: 0; }
.feed-card-item-title {
	color: var(--text-primary);
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 2px;
}
.feed-card-item-cat {
	color: var(--text-muted);
	font-size: 12px;
}
.feed-card-actions {
	display: flex; gap: 8px;
	margin-top: 14px;
	flex-wrap: wrap;
}
.feed-action-btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px;
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	color: var(--text-secondary);
	font-size: 12px; font-weight: 600;
	cursor: pointer;
	transition: all 0.2s var(--ease);
	text-decoration: none !important;
}
.feed-action-btn:hover {
	border-color: var(--purple-border);
	color: var(--purple) !important;
	background: var(--surface-hover);
}
.feed-action-btn.up:hover { color: var(--green) !important; border-color: var(--green); }
.feed-action-btn.down:hover { color: var(--coral) !important; border-color: var(--coral); }
.feed-empty {
	text-align: center;
	padding: 60px 20px;
	color: var(--text-muted);
}
.feed-empty h3 { color: var(--text-primary); margin-bottom: 12px; }

/* --- AI DISCOVER PAGE --- */
.ai-hero {
	max-width: 1100px; margin: 0 auto;
	padding: 24px 16px 8px;
	text-align: center;
}
.ai-badge {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 14px;
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(34, 211, 238, 0.1));
	border: 1px solid var(--purple-border);
	border-radius: var(--radius-pill);
	color: var(--purple);
	font-size: 11px; font-weight: 700;
	letter-spacing: 0.15em; text-transform: uppercase;
	margin-bottom: 14px;
}
.ai-hero h1 {
	font-size: clamp(28px, 4vw, 42px);
	color: var(--text-primary);
	margin-bottom: 12px;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 800;
	letter-spacing: -1px;
}
.ai-hero p {
	color: var(--text-secondary);
	font-size: 16px;
	max-width: 600px;
	margin: 0 auto 24px;
	line-height: 1.6;
}
.ai-filters {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 8px; margin-bottom: 32px;
}
.ai-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 16px 60px;
	text-align: left;
}
.ai-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: all 0.3s var(--ease);
	display: flex;
	flex-direction: column;
}
.ai-card:hover {
	border-color: var(--purple-border);
	transform: translateY(-3px);
	box-shadow: var(--shadow-glow);
}
.ai-card-img {
	height: 160px;
	background: linear-gradient(135deg, var(--purple), var(--orange));
	display: flex; align-items: center; justify-content: center;
	font-size: 48px;
	position: relative;
	overflow: hidden;
}
.ai-card-img.green { background: linear-gradient(135deg, var(--green), var(--cyan)); }
.ai-card-img.coral { background: linear-gradient(135deg, var(--coral), var(--pink)); }
.ai-card-img.cyan  { background: linear-gradient(135deg, var(--cyan), var(--purple)); }
.ai-card-img.yellow { background: linear-gradient(135deg, var(--yellow), var(--orange)); }
.ai-card-img::after {
	content: ''; position: absolute; inset: 0;
	background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.2), transparent 50%);
	pointer-events: none;
}
.ai-card-type {
	position: absolute;
	top: 12px; left: 12px;
	padding: 4px 10px;
	background: rgba(0,0,0,0.5);
	border-radius: var(--radius-pill);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	backdrop-filter: blur(4px);
	z-index: 1;
}
.ai-card-body {
	padding: 18px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.ai-card-title {
	color: var(--text-primary);
	font-weight: 700;
	font-size: 16px;
	margin-bottom: 6px;
	line-height: 1.3;
}
.ai-card-desc {
	color: var(--text-secondary);
	font-size: 13px;
	line-height: 1.5;
	margin-bottom: 14px;
	flex: 1;
}
.ai-card-stats {
	display: flex; gap: 12px;
	font-size: 12px;
	color: var(--text-muted);
	margin-bottom: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--border);
}
.ai-card-stat { display: flex; align-items: center; gap: 4px; }
.ai-card-stat i { font-size: 12px; }
.ai-card-stat.up { color: var(--green); }
.ai-card-stat.down { color: var(--coral); }
.ai-card-actions {
	display: flex; gap: 6px;
}
.ai-card-actions .btn-rate {
	flex: 1;
	padding: 8px;
	border: 1px solid var(--border);
	background: transparent;
	border-radius: var(--radius-sm);
	color: var(--text-secondary);
	font-size: 13px; font-weight: 600;
	cursor: pointer;
	transition: all 0.2s var(--ease);
}
.ai-card-actions .btn-rate:hover { border-color: var(--purple); color: var(--purple); }
.ai-card-actions .btn-rate.up:hover { border-color: var(--green); color: var(--green); background: var(--green-bg); }
.ai-card-actions .btn-rate.down:hover { border-color: var(--coral); color: var(--coral); background: rgba(244, 63, 94, 0.08); }
.ai-card-actions .btn-rate.open {
	flex: 2;
	background: var(--purple);
	border-color: var(--purple);
	color: #fff;
}
.ai-card-actions .btn-rate.open:hover { background: var(--purple-light); border-color: var(--purple-light); color: #fff; }

/* --- COMMUNITY PULSE WIDGET (welcome page) --- */
.pulse-widget {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 20px;
	margin: 20px 0;
}
.pulse-head {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 16px;
}
.pulse-head h3 {
	color: var(--text-primary);
	font-size: 16px;
	margin: 0;
}
.pulse-head .live-dot {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--green); font-size: 11px;
	font-weight: 700; letter-spacing: 0.1em;
	text-transform: uppercase;
}
.pulse-head .live-dot::before {
	content: ''; width: 8px; height: 8px;
	background: var(--green); border-radius: 50%;
	animation: pulse 2s infinite;
}
@keyframes pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.6; transform: scale(0.85); }
}
.pulse-item {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--border);
	font-size: 13px;
}
.pulse-item:last-child { border-bottom: none; }
.pulse-item-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--purple);
	flex-shrink: 0;
}
.pulse-item-dot.green { background: var(--green); }
.pulse-item-dot.orange { background: var(--orange); }
.pulse-item-text {
	color: var(--text-secondary);
	flex: 1; min-width: 0;
}
.pulse-item-text strong { color: var(--text-primary); }

/* --- STREAK / DAILY WIDGET --- */
.streak-widget {
	background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(139, 92, 246, 0.1));
	border: 1px solid var(--orange-glow);
	border-radius: var(--radius);
	padding: 20px;
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
}
.streak-icon {
	font-size: 32px;
	flex-shrink: 0;
}
.streak-info { flex: 1; min-width: 0; }
.streak-info strong {
	display: block;
	color: var(--text-primary);
	font-size: 18px;
	margin-bottom: 2px;
	font-family: 'Space Grotesk', sans-serif;
}
.streak-info span {
	color: var(--text-secondary);
	font-size: 13px;
}

/* --- VALUE PROP TILES (logged-out hero) --- */
.value-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	max-width: 1100px;
	margin: 32px auto 0;
	padding: 0 16px;
}
.value-tile {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 24px;
	text-align: center;
	transition: all 0.3s var(--ease);
}
.value-tile:hover {
	border-color: var(--purple-border);
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}
.value-tile-icon {
	font-size: 32px;
	margin-bottom: 12px;
}
.value-tile h4 {
	color: var(--text-primary);
	font-size: 16px;
	margin: 0 0 8px;
	font-weight: 700;
}
.value-tile p {
	color: var(--text-secondary);
	font-size: 13px;
	line-height: 1.5;
	margin: 0;
}

/* --- BETTER FOCUS STATES (a11y) --- */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--purple) !important;
	outline-offset: 2px !important;
}
button:focus, a:focus { outline: none; }

/* --- FIX READABILITY OF SOME LEGACY BUTTONS --- */
input[type="submit"],
input[type="button"],
button[type="submit"],
button:not(.theme-toggle):not(.theme-toggle-mobile):not(.navbar-toggler):not(.btn-rate):not(.feed-action-btn):not(.btn-glow):not(.faq-q):not(.close):not(.btn):not(.discover-quiz-opt):not(.discover-quiz-skip):not(.discover-tab):not(.discover-card-rate-btn):not(.discover-bar-stat):not(.connect-tile-act):not(.discover-rate):not(.discover-skip):not(.discover-card-save):not(.discover-follow):not(.discover-greet-chip):not(.discover-card-actions button):not(.ans-opt):not(.ans-foot-btn):not(.ttt-cell):not(.c4-drop) {
	background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--radius-pill) !important;
	padding: 10px 22px !important;
	font-weight: 700 !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 14px !important;
	box-shadow: 0 4px 14px rgba(139, 92, 246, 0.25) !important;
	cursor: pointer !important;
	transition: all 0.2s var(--ease) !important;
}
input[type="submit"]:hover,
input[type="button"]:hover,
button[type="submit"]:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4) !important;
}

/* --- LIGHT MODE BUTTON CONTRAST --- */
html.light-mode .btn-glow.primary {
	background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
	box-shadow: 0 4px 20px rgba(124, 58, 237, 0.25) !important;
}
html.light-mode .btn-glow.secondary {
	background: #ffffff !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--border) !important;
}

/* --- HOMEPAGE FAQ-STYLE EXPAND/COLLAPSE (reused) --- */
.faq-x {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	margin-bottom: 12px;
	overflow: hidden;
	transition: all 0.3s var(--ease);
}
.faq-x:hover { border-color: var(--purple-border); }
.faq-x-q {
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px 24px;
	cursor: pointer;
	color: var(--text-primary);
	font-weight: 700;
	font-size: 15px;
	gap: 12px;
}
.faq-x-toggle {
	color: var(--purple);
	font-size: 20px;
	transition: transform 0.3s var(--ease);
}
.faq-x.active .faq-x-toggle { transform: rotate(45deg); }
.faq-x-a {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s var(--ease), padding 0.3s var(--ease);
	padding: 0 24px;
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 1.6;
}
.faq-x.active .faq-x-a {
	max-height: 400px;
	padding: 0 24px 18px;
}

/* --- BADGE / PILL HELPERS --- */
.badge-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--surface);
	color: var(--text-secondary);
	border: 1px solid var(--border);
}
.badge-pill.purple { background: var(--purple-glow); color: var(--purple); border-color: var(--purple-border); }
.badge-pill.green  { background: var(--green-bg); color: var(--green); border-color: rgba(52, 211, 153, 0.3); }
.badge-pill.orange { background: var(--orange-glow); color: var(--orange); border-color: rgba(249, 115, 22, 0.3); }

/* --- MOBILE: RESPONSIVE HEADERS --- */
@media (max-width: 640px) {
	.feed-wrap { padding: 16px 12px; }
	.feed-card { padding: 16px; }
	.feed-card-item { padding: 10px; gap: 10px; }
	.feed-card-item-icon { width: 44px; height: 44px; font-size: 20px; }
	.feed-header h1 { font-size: 22px; }
	.ai-hero { padding: 16px 12px 4px; }
	.ai-grid { gap: 14px; padding: 0 12px 40px; }
	.testimonials-grid { gap: 16px; }
	.testimonial-card { padding: 20px; }
	.value-grid { gap: 12px; padding: 0 12px; }
	.value-tile { padding: 18px; }
}


/* ============================================================
   V6.1 — BUTTON AUDIT FIXES
   - Fix .selectedtv / .tvmatch losing to .wrapper a
   - Bullet-proof contrast on all action buttons
   - Use compound selectors (.tvmatch.selectedtv) to win specificity
   ============================================================ */

/* Pills inside .wrapper - override .wrapper a */
.wrapper a.tvmatch,
.wrapper a.tvmatch2,
.wrapper a.tvmatch3,
.wrapper a.tvmatch4 { color: var(--text-secondary) !important; }
.wrapper a.tvmatch.selectedtv,
.wrapper a.tvmatch3,
.wrapper a.tvmatch4 { color: #ffffff !important; }
.wrapper a.tvmatch:hover,
.wrapper a.tvmatch2:hover,
.wrapper a.tvmatch3:hover { color: #ffffff !important; }

/* Selected tab/pill - solid filled */
a.tvmatch.selectedtv,
.tvmatch.selectedtv {
	background: linear-gradient(135deg, var(--purple) 0%, var(--purple-light) 100%) !important;
	color: #ffffff !important;
	border-color: var(--purple) !important;
	box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35) !important;
	font-weight: 600 !important;
}

/* Search button (magnifying glass) on movies/tv/music etc - .buttonaa class */
.buttonaa,
button.buttonaa,
input.buttonaa {
	background: linear-gradient(135deg, var(--purple) 0%, var(--purple-light) 100%) !important;
	color: #ffffff !important;
	border: none !important;
	font-weight: 600 !important;
	transition: all 0.25s var(--ease) !important;
}
.buttonaa:hover {
	background: linear-gradient(135deg, var(--purple-light) 0%, var(--purple) 100%) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4) !important;
}
.buttonaa i, .buttonaa svg { color: #ffffff !important; }

/* Search input field - readable in dark mode */
.input,
input.input,
.box .input {
	background: var(--surface) !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--border) !important;
	border-right: none !important;
}
.input::placeholder { color: var(--text-muted) !important; opacity: 1 !important; }
.input:focus { border-color: var(--purple) !important; outline: none !important; }
.box:hover .input,
.box:hover input.input { background: var(--surface) !important; color: var(--text-primary) !important; }
.box:hover .buttonaa { background: linear-gradient(135deg, var(--purple-light) 0%, var(--purple) 100%) !important; color:#fff !important; }

/* Custom select dropdowns - readable */
.custom-select,
.custom-select select {
	background: var(--surface) !important;
	color: var(--text-primary) !important;
	border-color: var(--purple) !important;
}
.custom-select::after { color: var(--purple) !important; }

/* Pagination numbers - keep readable */
.page-link,
.pagination .page-link,
.wrapper a.page-link {
	background: var(--surface) !important;
	color: var(--text-primary) !important;
	border-color: var(--border) !important;
	font-weight: 600 !important;
}
.page-link:hover { background: var(--purple) !important; color: #fff !important; border-color: var(--purple) !important; }
.page-item.active .page-link,
.pagination .page-item.active .page-link {
	background: linear-gradient(135deg, var(--purple) 0%, var(--purple-light) 100%) !important;
	color: #fff !important;
	border-color: var(--purple) !important;
}
.page-item.disabled .page-link { background: var(--bg) !important; color: var(--text-muted) !important; opacity: 0.6 !important; }

/* Recommend / match percentage badges */
.toppbg,
span.toppbg,
div.toppbg {
	background: linear-gradient(135deg, var(--purple) 0%, var(--purple-light) 100%) !important;
	color: #ffffff !important;
	border-radius: var(--radius-pill) !important;
	font-weight: 700 !important;
	padding: 6px 14px !important;
	box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
	display: inline-block !important;
}
.toppbg a, .toppbg span { color: #ffffff !important; }

/* Movie/TV/Music cards - title and description */
.wrapper .pcol a,
.wrapper a.pcol,
.fonttop a,
.wrapper .fonttop a {
	color: var(--text-primary) !important;
	font-weight: 600 !important;
}
.wrapper .pcol a:hover,
.fonttop a:hover { color: var(--purple-light) !important; }

/* Thumbs up/down (linkthumbs) - bigger contrast */
.linkthumbs,
a.linkthumbs,
.wrapper a.linkthumbs {
	background: rgba(34, 197, 94, 0.15) !important;
	color: var(--green) !important;
	border: 1px solid var(--green) !important;
	border-radius: 8px !important;
	padding: 6px 10px !important;
	font-weight: 700 !important;
	transition: all 0.2s var(--ease) !important;
}
.linkthumbs:hover { background: var(--green) !important; color: #ffffff !important; }
.linkthumbsr,
a.linkthumbsr,
.wrapper a.linkthumbsr {
	background: rgba(255, 90, 95, 0.15) !important;
	color: var(--coral) !important;
	border: 1px solid var(--coral) !important;
	border-radius: 8px !important;
	padding: 6px 10px !important;
	font-weight: 700 !important;
	transition: all 0.2s var(--ease) !important;
}
.linkthumbsr:hover { background: var(--coral) !important; color: #ffffff !important; }

/* Tooltip text - readable bg */
.tooltiptexta,
span.tooltiptexta {
	background: var(--bg-raised) !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--border) !important;
	box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}

/* Edit/profile/account form inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
	background: var(--surface) !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
	padding: 10px 12px !important;
	font-size: 14px !important;
	transition: border-color 0.2s var(--ease) !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus { border-color: var(--purple) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(139,92,246,0.2) !important; }
input::placeholder, textarea::placeholder { color: var(--text-muted) !important; opacity: 1 !important; }

/* Generic submit buttons */
input[type="submit"],
button[type="submit"],
button.btn-primary,
.btn-primary,
.button {
	background: linear-gradient(135deg, var(--purple) 0%, var(--purple-light) 100%) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: var(--radius-sm) !important;
	padding: 12px 24px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	cursor: pointer !important;
	transition: all 0.25s var(--ease) !important;
}
input[type="submit"]:hover,
button[type="submit"]:hover,
button.btn-primary:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 20px rgba(139,92,246,0.4) !important;
}

/* Light mode adjustments */
html.light-mode a.tvmatch,
html.light-mode .wrapper a.tvmatch { color: var(--text-secondary) !important; background: var(--surface) !important; border-color: var(--border) !important; }
html.light-mode a.tvmatch.selectedtv,
html.light-mode .wrapper a.tvmatch.selectedtv {
	background: linear-gradient(135deg, var(--purple) 0%, var(--purple-light) 100%) !important;
	color: #ffffff !important;
}
html.light-mode .input,
html.light-mode input[type="text"],
html.light-mode input[type="email"],
html.light-mode input[type="password"],
html.light-mode textarea,
html.light-mode select {
	background: #ffffff !important;
	color: #1f1d2b !important;
	border-color: var(--border) !important;
}
html.light-mode .input::placeholder,
html.light-mode input::placeholder,
html.light-mode textarea::placeholder { color: #6b7280 !important; }
html.light-mode .page-link { background: #ffffff !important; color: #1f1d2b !important; }
html.light-mode .toppbg { color: #ffffff !important; }
html.light-mode .tooltiptexta { background: #ffffff !important; color: #1f1d2b !important; }


/* ============================================================
   V6.2 — STICKY HEADER ALIGNMENT FIX (Chrome quirk)
   - Logo was sitting at bottom because nav-link padding (35px 0)
     created an 86px nav inside an 80px sticky header.
   - Solution: use flex centering, fixed heights, smaller padding
   ============================================================ */

/* Header heights: consistent at top and when sticky */
#sticky-header {
	min-height: 80px;
}
#sticky-header .container,
#sticky-header .row,
#sticky-header .col-xl-12,
#sticky-header .main-menu {
	height: 100%;
}
#sticky-header .navbar {
	display: flex !important;
	align-items: center !important;
	min-height: 80px !important;
	padding: 0 !important;
	flex-wrap: wrap !important;
}

/* Strip the 180px side padding that was making nav cramped on Chrome */
.e-transparent-menu.sticky-menu,
.transparent-menu.sticky-menu {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Logo: stays at proper height, no bottom-shift */
#sticky-header .navbar > a:first-child {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
#sticky-header .navbar-brand-logo {
	height: 38px !important;
	width: auto !important;
	display: block !important;
}

/* Nav-links: use flex centering, NOT giant padding */
@media (min-width: 992px) {
	.main-menu .navbar-nav li.nav-item a.nav-link,
	.sticky-menu .main-menu .navbar-nav li.nav-item a.nav-link {
		padding: 12px 0 !important;
		font-size: 15px !important;
		display: flex !important;
		align-items: center !important;
		height: 80px !important;
		line-height: 1.2 !important;
	}
	.main-menu .navbar-nav li.nav-item {
		margin-left: 22px !important;
	}
	.main-menu .navbar-nav {
		align-items: center !important;
	}
	.navbar-collapse {
		display: flex !important;
		align-items: center !important;
		flex: 1 1 auto !important;
	}
	#sticky-header .theme-toggle {
		margin-left: 16px;
		flex-shrink: 0;
	}
}

/* Mobile: reset flex height */
@media (max-width: 991px) {
	#sticky-header .navbar {
		min-height: 64px !important;
	}
	#sticky-header .navbar-brand-logo {
		height: 32px !important;
	}
	.main-menu .navbar-nav li.nav-item a.nav-link {
		height: auto !important;
		padding: 10px 8px !important;
	}
}


/* ============================================================
   V6.3 — UNIFIED CONTENT HUB (content.php)
   Combines Feed + Discover + Interactive into one page.
   Every rating feeds the same recommendation engine.
   ============================================================ */

.hub-wrap {
	max-width: 1320px;
	margin: 0 auto;
	padding: 24px 16px 60px;
	text-align: left;
}

/* ---- HERO ---- */
.hub-hero {
	text-align: center;
	max-width: 820px;
	margin: 0 auto 32px;
	padding: 8px 16px 0;
}
.hub-hero h1 {
	font-size: clamp(28px, 4vw, 40px) !important;
	color: var(--text-primary) !important;
	margin: 12px 0 12px !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-weight: 800 !important;
	letter-spacing: -1px;
	line-height: 1.15;
}
.hub-hero p {
	color: var(--text-secondary) !important;
	font-size: 16px !important;
	max-width: 620px;
	margin: 0 auto 24px;
	line-height: 1.6;
}
.hub-stats {
	display: flex;
	justify-content: center;
	gap: 32px;
	flex-wrap: wrap;
	margin-top: 20px;
	padding: 18px 24px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
}
.hub-stat { display: flex; flex-direction: column; align-items: center; min-width: 80px; }
.hub-stat strong {
	font-size: 24px; color: var(--text-primary);
	font-family: 'Space Grotesk', sans-serif; font-weight: 800;
	line-height: 1;
}
.hub-stat span {
	color: var(--text-muted); font-size: 11px;
	text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
	margin-top: 6px;
}

/* ---- FILTER PILLS ---- */
.hub-tabs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	padding: 8px 4px 16px;
	margin: 0 -4px 24px;
	border-bottom: 1px solid var(--border);
	scroll-snap-type: x mandatory;
}
.hub-tabs::-webkit-scrollbar { display: none; }
.hub-tabs .feed-tab { scroll-snap-align: start; flex-shrink: 0; }

/* ---- SECTIONS ---- */
.hub-section { margin-bottom: 40px; }
.hub-section-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; margin-bottom: 16px;
}
.hub-section-head h2 {
	color: var(--text-primary) !important;
	font-size: 18px !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-weight: 700 !important;
	margin: 0 !important;
	display: inline-flex; align-items: center; gap: 10px;
}
.hub-section-head h2 i { color: var(--purple); }
.hub-section-more {
	color: var(--purple) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	white-space: nowrap;
	display: inline-flex; align-items: center; gap: 6px;
	transition: gap 0.25s var(--ease);
}
.hub-section-more:hover { gap: 10px; color: var(--purple-light) !important; }

/* ---- FEED CARDS ---- */
.hub-feed {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: 14px;
}
.hub-feed-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 16px;
	transition: all 0.3s var(--ease);
}
.hub-feed-card:hover {
	border-color: var(--purple-border);
	box-shadow: var(--shadow);
}
.hub-feed-head {
	display: flex; align-items: center; gap: 12px;
	margin-bottom: 12px;
}
.hub-feed-head .feed-card-avatar { width: 38px; height: 38px; font-size: 14px; }
.hub-feed-head .feed-card-name { font-size: 13px; }
.hub-feed-head .feed-card-time { font-size: 11px; }
.hub-feed-head .hub-loc { color: var(--text-muted); font-weight: 500; }
.hub-verb {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
	margin-left: auto;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	background: var(--bg-raised);
	display: inline-flex; align-items: center; gap: 5px;
}
.hub-verb.verb-up { color: var(--green); }
.hub-verb.verb-down { color: var(--coral); }
.hub-feed-item {
	display: flex; align-items: center; gap: 12px;
	padding: 10px;
	background: var(--bg-raised);
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	transition: all 0.25s var(--ease);
	text-decoration: none !important;
}
.hub-feed-item:hover { border-color: var(--purple-border); transform: translateX(2px); }
.hub-feed-item .feed-card-item-icon { width: 44px; height: 44px; font-size: 20px; }

/* ---- HUB CARDS (movies/tv/music/travel/local) ---- */
.hub-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}
.hub-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: all 0.3s var(--ease);
}
.hub-card:hover {
	border-color: var(--purple-border);
	transform: translateY(-3px);
	box-shadow: var(--shadow-glow);
}
.hub-card.rated { opacity: 0.85; }
.hub-card.rated-up { border-color: rgba(52, 211, 153, 0.4); }
.hub-card.rated-down { border-color: rgba(244, 63, 94, 0.35); }
.hub-card-media {
	position: relative;
	aspect-ratio: 3 / 4;
	background: linear-gradient(135deg, var(--purple), var(--orange));
	overflow: hidden;
	display: flex; align-items: center; justify-content: center;
}
.hub-card-media img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.hub-card-media-icon { aspect-ratio: 16 / 9; }
.hub-card-emoji { font-size: 56px; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); }
.hub-card[data-cat="music"]  .hub-card-media { background: linear-gradient(135deg, var(--coral), var(--pink)); }
.hub-card[data-cat="travel"] .hub-card-media { background: linear-gradient(135deg, var(--cyan), var(--purple)); }
.hub-card[data-cat="local"]  .hub-card-media { background: linear-gradient(135deg, var(--green), var(--cyan)); }
.hub-card[data-cat="tv"]     .hub-card-media { background: linear-gradient(135deg, var(--orange), var(--coral)); }
.hub-card-tag {
	position: absolute; top: 10px; left: 10px;
	padding: 4px 10px;
	background: rgba(0,0,0,0.55);
	color: #fff;
	font-size: 10px; font-weight: 700;
	letter-spacing: 0.1em; text-transform: uppercase;
	border-radius: var(--radius-pill);
	backdrop-filter: blur(4px);
	z-index: 1;
}
.hub-card-pct {
	position: absolute; top: 10px; right: 10px;
	padding: 4px 10px;
	background: rgba(0,0,0,0.55);
	color: #fff;
	font-size: 11px; font-weight: 800;
	border-radius: var(--radius-pill);
	backdrop-filter: blur(4px);
	z-index: 1;
}
.hub-card-body {
	padding: 14px;
	display: flex; flex-direction: column;
	flex: 1;
	gap: 6px;
}
.hub-card-title {
	color: var(--text-primary) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.3;
	margin: 0 !important;
	font-family: 'Inter', sans-serif !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hub-card-meta-line {
	color: var(--text-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.hub-card-desc {
	color: var(--text-secondary) !important;
	font-size: 12px !important;
	line-height: 1.5;
	margin: 4px 0 0 !important;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 1;
}
.hub-card-foot {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.hub-card-rate-label {
	font-size: 11px;
	color: var(--text-muted);
	font-weight: 600;
	letter-spacing: 0.03em;
}
.hub-card-actions {
	display: flex;
	gap: 6px;
}
.hub-rate {
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--bg-raised);
	color: var(--text-secondary);
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: all 0.2s var(--ease);
	font-size: 14px;
	padding: 0;
}
.hub-rate.up:hover {
	background: var(--green);
	border-color: var(--green);
	color: #fff;
	transform: scale(1.08);
}
.hub-rate.down:hover {
	background: var(--coral);
	border-color: var(--coral);
	color: #fff;
	transform: scale(1.08);
}
.hub-rate.up.active {
	background: var(--green) !important;
	border-color: var(--green) !important;
	color: #fff !important;
}
.hub-rate.down.active {
	background: var(--coral) !important;
	border-color: var(--coral) !important;
	color: #fff !important;
}
.hub-rate:disabled { cursor: not-allowed; opacity: 0.6; }
.hub-rate:disabled:hover { transform: none; }

/* ---- CTA SECTION ---- */
.hub-cta-section { margin-top: 16px; }
.hub-cta {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 24px;
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(249, 115, 22, 0.08));
	border: 1px solid var(--purple-border);
	border-radius: var(--radius);
	flex-wrap: wrap;
}

/* ---- LIGHT MODE ---- */
html.light-mode .hub-card-tag,
html.light-mode .hub-card-pct {
	background: rgba(26, 23, 64, 0.7);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 767px) {
	.hub-wrap { padding: 16px 12px 40px; }
	.hub-stats { gap: 18px; padding: 14px 18px; }
	.hub-stat strong { font-size: 20px; }
	.hub-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
	.hub-card-body { padding: 12px; }
	.hub-card-title { font-size: 13px !important; }
	.hub-card-desc { -webkit-line-clamp: 2; }
	.hub-feed { grid-template-columns: 1fr; }
	.hub-cta { padding: 18px; }
}

@media (max-width: 480px) {
	.hub-grid { grid-template-columns: 1fr 1fr; }
	.hub-stats { gap: 12px; }
	.hub-stat strong { font-size: 18px; }
	.hub-rate { width: 32px; height: 32px; font-size: 12px; }
}
/* ===========================================================
   V6.4 — UNIFIED DISCOVER FEED + SUBPAGE COHESION
   May 2026
   ----------------------------------------------------------
   - Merges old /discover, /content, /feed, /discover-ai into a
     single cohesive Discover stream (one feed, many card types).
   - Brings movies / tv / music / travel / local subpages into
     the same visual language: gradient hero strip, modern
     filter pills, card aesthetics, circular thumbs.
   =========================================================== */

/* ---------- shared ---------- */
.discover-wrap {
	max-width: 1320px;
	margin: 0 auto;
	padding: 12px 16px 56px;
}

/* HERO */
.discover-hero {
	background:
		radial-gradient(circle at 0% 0%, rgba(124,58,237,0.18), transparent 55%),
		radial-gradient(circle at 100% 100%, rgba(255,140,0,0.14), transparent 55%),
		linear-gradient(180deg, var(--surface) 0%, var(--bg-raised) 100%);
	border: 1px solid var(--border);
	border-radius: 22px;
	padding: 44px clamp(20px, 4vw, 56px);
	margin-bottom: 28px;
	position: relative;
	overflow: hidden;
}
.discover-hero h1 {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: clamp(28px, 4.2vw, 44px);
	line-height: 1.12;
	color: var(--text-primary);
	margin: 12px 0 14px;
	letter-spacing: -0.02em;
	font-weight: 700;
	max-width: 880px;
}
.discover-hero p {
	color: var(--text-secondary);
	font-size: 16px;
	line-height: 1.55;
	max-width: 720px;
	margin: 0 0 22px;
}
.discover-stats {
	display: flex; flex-wrap: wrap; gap: 24px;
}
.discover-stat {
	display: flex; flex-direction: column;
	min-width: 110px;
}
.discover-stat strong {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 28px; font-weight: 700;
	color: var(--text-primary);
	line-height: 1;
}
.discover-stat span {
	font-size: 12px;
	color: var(--text-muted);
	margin-top: 6px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* TABS */
.discover-tabs {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin-bottom: 28px;
	padding: 6px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
}
.discover-tab {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 18px;
	border-radius: 12px;
	background: transparent;
	color: var(--text-secondary) !important;
	font-size: 14px; font-weight: 600;
	text-decoration: none !important;
	transition: all 0.2s var(--ease);
	border: 1px solid transparent;
}
.discover-tab:hover {
	background: var(--surface-hover);
	color: var(--text-primary) !important;
}
.discover-tab.active {
	background: linear-gradient(135deg, var(--purple), #6d28d9);
	color: #fff !important;
	box-shadow: 0 4px 14px rgba(124,58,237,0.35);
}

/* SECTION HEADER */
.discover-section { margin-bottom: 36px; }
.discover-section-head {
	display: flex; align-items: baseline; flex-wrap: wrap;
	gap: 12px; margin-bottom: 18px;
}
.discover-section-head h2 {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 22px; font-weight: 700;
	color: var(--text-primary) !important;
	margin: 0;
	letter-spacing: -0.01em;
}
.discover-section-head h2 i { color: var(--purple); margin-right: 8px; }
.discover-section-sub {
	color: var(--text-muted);
	font-size: 13px;
}
.discover-section-more {
	margin-left: auto;
	color: var(--purple) !important;
	font-size: 14px; font-weight: 600;
	text-decoration: none !important;
	display: inline-flex; align-items: center; gap: 6px;
}
.discover-section-more:hover { color: var(--purple-light) !important; }

/* THE STREAM — uniform 220px+ grid; cards span 1 col by default */
.discover-stream {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 18px;
}
@media (min-width: 1100px) {
	/* V6.8 patch 29 — was capped at 260px which left ~190px unused on the
	   right of the new 1320px container. minmax(220px, 1fr) auto-fills 5 even
	   ~245px cols at 1320px (or 4 ~253px cols at 1100px) so the grid fills
	   whatever container width the page provides. */
	.discover-stream { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 600px) {
	.discover-stream { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
}

/* CARD BASE */
.discover-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: all 0.25s var(--ease);
	position: relative;
}
.discover-card:hover {
	transform: translateY(-3px);
	border-color: var(--purple-border);
	box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.discover-card.rated { opacity: 0.92; }
.discover-card.rated-up   { border-color: rgba(34,197,94,0.45); }
.discover-card.rated-down { border-color: rgba(244,63,94,0.45); }

.discover-card-body {
	padding: 14px 16px 16px;
	display: flex; flex-direction: column;
	gap: 8px; flex: 1;
}
.discover-card-title {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 16px; font-weight: 700;
	color: var(--text-primary) !important;
	line-height: 1.25;
	margin: 0;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}
.discover-card-meta {
	font-size: 12px;
	color: var(--text-muted);
	letter-spacing: 0.02em;
}
.discover-card-desc {
	font-size: 13px;
	color: var(--text-secondary);
	line-height: 1.45;
	margin: 0;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
	overflow: hidden;
}
.discover-card-foot {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	margin-top: auto; padding-top: 10px;
	border-top: 1px solid var(--border-soft, rgba(255,255,255,0.06));
}
.discover-card-prompt {
	font-size: 12px; font-weight: 600;
	color: var(--text-muted);
	letter-spacing: 0.02em;
	text-align: center;
}
.discover-card-actions {
	display: flex;
	gap: 8px;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
}

/* CIRCULAR THUMBS — used everywhere */
.discover-rate {
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--bg-raised);
	color: var(--text-secondary);
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: all 0.2s var(--ease);
	font-size: 14px;
	flex-shrink: 0;
}
.discover-rate:not(:disabled):hover { transform: scale(1.07); }
.discover-rate.up:hover, .discover-rate.up.active { background: var(--green); color: #fff; border-color: var(--green); }
.discover-rate.down:hover, .discover-rate.down.active { background: var(--coral); color: #fff; border-color: var(--coral); }
.discover-rate:disabled { cursor: default; opacity: 0.7; }
.discover-rate.up.active { box-shadow: 0 0 0 4px rgba(34,197,94,0.15); }
.discover-rate.down.active { box-shadow: 0 0 0 4px rgba(244,63,94,0.15); }

/* ITEM CARD — cover image + tag + pct chip */
.discover-card-item .discover-card-media {
	position: relative;
	aspect-ratio: 3 / 4;
	max-height: 320px;
	background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(0,0,0,0.4));
	overflow: hidden;
}
.discover-card-item[data-cat="movies"] .discover-card-media,
.discover-card-item[data-cat="tv"]     .discover-card-media {
	/* V6.8 patch 33 — short banner crop so cards stay scannable. The full
	   poster (with description) is revealed on hover (see :hover rule below). */
	aspect-ratio: 16 / 10;
	max-height: 170px;
	transition: max-height 0.35s var(--ease), aspect-ratio 0.35s var(--ease);
}
.discover-card-item[data-cat="movies"]:hover .discover-card-media,
.discover-card-item[data-cat="tv"]:hover .discover-card-media {
	aspect-ratio: 2 / 3;
	max-height: 400px;
}
.discover-card-item[data-cat="movies"]:hover .discover-card-media img,
.discover-card-item[data-cat="tv"]:hover .discover-card-media img {
	object-fit: contain;
	background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(0,0,0,0.45));
}
.discover-card-item[data-cat="movies"]:hover,
.discover-card-item[data-cat="tv"]:hover {
	z-index: 10;
}
.discover-card-item[data-cat="movies"]:hover .discover-card-desc,
.discover-card-item[data-cat="tv"]:hover .discover-card-desc {
	/* V6.8 patch 34 — canonical "unclamp" for a -webkit-box element. Setting
	   line-clamp: 999 alone is unreliable across engines; switching back to
	   block layout + visible overflow guarantees the full description is
	   shown on hover. */
	display: block;
	-webkit-line-clamp: unset;
	-webkit-box-orient: initial;
	overflow: visible;
}
.discover-card-item[data-cat="travel"] .discover-card-media,
.discover-card-item[data-cat="local"]  .discover-card-media {
	aspect-ratio: 4 / 3;
	max-height: 240px;
}
.discover-card-item[data-cat="music"]  .discover-card-media {
	aspect-ratio: 1 / 1;
	max-height: 220px;
}
/* V6.8 patch 66 — board games: square tile like music (no image library yet). */
.discover-card-item[data-cat="boardgames"] .discover-card-media {
	aspect-ratio: 1 / 1;
	max-height: 220px;
	background: linear-gradient(135deg, #ec4899, #db2777);
}
/* V6.8 patch 81 — books: portrait tile (book cover proportions); amber fallback
   when Open Library cover is missing. */
.discover-card-item[data-cat="books"] .discover-card-media {
	aspect-ratio: 2 / 3;
	max-height: 280px;
	background: linear-gradient(135deg, #a16207, #854d0e);
}
.discover-card-item .discover-card-media img {
	width: 100%; height: 100%; object-fit: cover;
	display: block;
}
.discover-card-media-blank {
	display: flex; align-items: center; justify-content: center;
}
.discover-card-emoji { font-size: 64px; opacity: 0.85; }
.discover-card-tag {
	position: absolute; top: 10px; left: 10px;
	background: rgba(0,0,0,0.62);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #fff;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 11px; font-weight: 700;
	letter-spacing: 0.04em;
	display: inline-flex; align-items: center; gap: 5px;
}
.discover-card-tag i { font-size: 11px; }
.discover-card-pct {
	position: absolute; top: 10px; right: 10px;
	background: rgba(0,0,0,0.62);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #fff;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 11px; font-weight: 700;
}
.discover-card-tag-inline {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 11px; font-weight: 700;
	color: var(--purple);
	letter-spacing: 0.04em; text-transform: uppercase;
}
/* category-tinted top borders & gradients */
.discover-card-item[data-cat="movies"] { border-top: 3px solid #7c3aed; }
.discover-card-item[data-cat="tv"]     { border-top: 3px solid #f97316; }
.discover-card-item[data-cat="music"]  { border-top: 3px solid #f43f5e; }
.discover-card-item[data-cat="travel"] { border-top: 3px solid #06b6d4; }
.discover-card-item[data-cat="local"]  { border-top: 3px solid #22c55e; }
.discover-card-item[data-cat="boardgames"] { border-top: 3px solid #ec4899; }
.discover-card-item[data-cat="books"] { border-top: 3px solid #a16207; }
.discover-card-item[data-cat="movies"] .discover-card-tag { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.discover-card-item[data-cat="tv"]     .discover-card-tag { background: linear-gradient(135deg, #f97316, #ea580c); }
.discover-card-item[data-cat="music"]  .discover-card-tag { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.discover-card-item[data-cat="travel"] .discover-card-tag { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.discover-card-item[data-cat="local"]  .discover-card-tag { background: linear-gradient(135deg, #22c55e, #16a34a); }
.discover-card-item[data-cat="boardgames"] .discover-card-tag { background: linear-gradient(135deg, #ec4899, #db2777); }
.discover-card-item[data-cat="books"] .discover-card-tag { background: linear-gradient(135deg, #a16207, #854d0e); }

/* SOCIAL CARD — match avatar + verb + item ref */
.discover-card-social { padding: 14px 14px 0; }
.discover-card-social-head {
	display: flex; align-items: center; gap: 10px;
	margin-bottom: 12px;
}
.discover-card-avatar {
	width: 36px; height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--purple), #6d28d9);
	color: #fff;
	font-weight: 700;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.discover-card-avatar:hover {
	transform: scale(1.06);
	box-shadow: 0 0 0 2px var(--purple);
}
.discover-card-avatar-img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.discover-card-avatar-hidden {
	background: linear-gradient(135deg, #444, #222);
	opacity: 0.85;
}
.discover-social-namelink {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}
.discover-social-namelink:hover {
	color: var(--purple);
	text-decoration: none;
}
.discover-card-social-meta { flex: 1; min-width: 0; }
.discover-card-social-name {
	font-size: 14px; font-weight: 600;
	color: var(--text-primary);
	line-height: 1.2;
	display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
	overflow: hidden;
}
.discover-card-social-time {
	font-size: 12px;
	color: var(--text-muted);
	margin-top: 2px;
}
.discover-match-pct {
	display: inline-block;
	background: rgba(124,58,237,0.18);
	color: var(--purple);
	padding: 2px 7px;
	border-radius: 999px;
	font-size: 11px; font-weight: 700;
	margin-left: 4px;
}
.discover-verb { font-weight: 600; }
.discover-verb.verb-up   { color: var(--green); }
.discover-verb.verb-down { color: var(--coral); }
.discover-card-social-item {
	display: flex; align-items: center; gap: 10px;
	background: var(--bg-raised);
	border: 1px solid var(--border-soft, rgba(255,255,255,0.06));
	border-radius: 12px;
	padding: 8px;
	margin-bottom: 12px;
}
.discover-card-social-thumb {
	width: 56px; height: 56px;
	border-radius: 8px; overflow: hidden;
	background: linear-gradient(135deg, rgba(124,58,237,0.2), rgba(0,0,0,0.4));
	flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 28px;
}
.discover-card-social-thumb img { width: 100%; height: 100%; object-fit: cover; }
.discover-card-social-info { flex: 1; min-width: 0; }
.discover-card-social-cat {
	font-size: 11px; font-weight: 700;
	color: var(--purple);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	display: inline-flex; align-items: center; gap: 5px;
}
.discover-card-social-title {
	font-size: 14px; font-weight: 700;
	color: var(--text-primary);
	margin-top: 2px;
	line-height: 1.25;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}
.discover-card-social .discover-card-foot {
	border-top: 1px solid var(--border-soft, rgba(255,255,255,0.06));
	padding: 10px 0 12px;
	margin: 0;
}

/* AI CARD — gradient banner + try button */
.discover-card-ai {
	border-top: 3px solid #fbbf24;
}
.discover-card-ai-banner {
	height: 110px;
	background: linear-gradient(135deg, #7c3aed 0%, #f43f5e 100%);
	position: relative;
	display: flex; align-items: center; justify-content: center;
}
.discover-card-ai-banner.cyan   { background: linear-gradient(135deg, #06b6d4 0%, #7c3aed 100%); }
.discover-card-ai-banner.coral  { background: linear-gradient(135deg, #f43f5e 0%, #f97316 100%); }
.discover-card-ai-banner.yellow { background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%); }
.discover-card-ai-banner.green  { background: linear-gradient(135deg, #22c55e 0%, #06b6d4 100%); }
.discover-card-ai-icon { font-size: 52px; line-height: 1; }
.discover-card-ai-type {
	position: absolute; top: 10px; left: 10px;
	background: rgba(0,0,0,0.45);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #fff;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px; font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.discover-card-ai-stats {
	display: flex; gap: 12px; flex-wrap: wrap;
	font-size: 12px;
	color: var(--text-muted);
	margin-top: 4px;
}
.discover-card-ai-stats .up { color: var(--green); }
.discover-card-ai-stats .rated { margin-left: auto; }
.discover-card-ai-stats .rated.up { color: var(--green); }
.discover-card-ai-stats .rated.down { color: var(--coral); }
.discover-card-ai-stats .ai-stat-new {
	color: rgba(255,255,255,0.45);
	font-style: italic;
}
.discover-card-actions .discover-rate.active.up {
	color: var(--green);
	border-color: rgba(34,197,94,0.5);
	background: rgba(34,197,94,0.12);
}
.discover-card-actions .discover-rate.active.down {
	color: var(--coral);
	border-color: rgba(255,99,99,0.5);
	background: rgba(255,99,99,0.12);
}
.discover-card-try {
	font-size: 13px !important;
	padding: 8px 16px !important;
}

/* CTA CARD — full-width, more prominent */
.discover-card-cta {
	grid-column: span 2;
	background:
		radial-gradient(circle at 0% 0%, rgba(124,58,237,0.18), transparent 50%),
		radial-gradient(circle at 100% 100%, rgba(255,140,0,0.16), transparent 50%),
		var(--surface);
	border: 1px solid var(--purple-border);
	padding: 22px 24px;
	display: flex; flex-direction: column; gap: 8px;
	align-items: flex-start;
	min-height: 220px;
	justify-content: center;
}
.discover-card-cta-emoji { font-size: 38px; }
.discover-card-cta .discover-card-title { font-size: 20px; }
.discover-card-cta .discover-card-desc { -webkit-line-clamp: 4; }
.discover-card-cta .btn-glow { margin-top: 8px; }
@media (max-width: 600px) {
	.discover-card-cta { grid-column: span 2; min-height: 0; padding: 18px; }
}

/* EMPTY STATE */
.discover-empty {
	background: var(--surface);
	border: 1px dashed var(--border);
	border-radius: 16px;
	padding: 48px 32px;
	text-align: center;
}
.discover-empty h3 {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	color: var(--text-primary);
	font-size: 22px; font-weight: 700;
	margin: 0 0 8px;
}
.discover-empty p { color: var(--text-secondary); margin: 0 0 20px; }

/* LIGHT MODE */
html.light-mode .discover-card { background: #ffffff; border-color: rgba(0,0,0,0.08); }
html.light-mode .discover-card-tag,
html.light-mode .discover-card-pct {
	background: rgba(0,0,0,0.78);
}
html.light-mode .discover-card-social-item { background: #f8f5ff; border-color: rgba(0,0,0,0.05); }
html.light-mode .discover-tabs { background: #f6f3ff; border-color: rgba(0,0,0,0.06); }
html.light-mode .discover-empty { background: #ffffff; border-color: rgba(0,0,0,0.1); }
html.light-mode .discover-rate { background: #f6f3ff; border-color: rgba(0,0,0,0.06); color: #4b3a7a; }


/* =====================================================
   SUBPAGE COHESION — movies / tv / music / travel / local
   Wrap subpages with .discover-sub[data-cat="<cat>"] to
   re-skin the legacy filter UI in the new visual language.
   ===================================================== */
.discover-sub {
	max-width: 1320px;
	margin: 0 auto;
	padding: 24px 16px 56px;
}

/* Breadcrumb / back-bar at top of every subpage */
.discover-sub-bar {
	display: flex; align-items: center; flex-wrap: wrap;
	gap: 14px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 12px 16px;
	margin-bottom: 18px;
}
.discover-sub-back {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--text-secondary) !important;
	font-size: 13px; font-weight: 600;
	text-decoration: none !important;
	padding: 6px 10px;
	border-radius: 8px;
	transition: all 0.2s var(--ease);
}
.discover-sub-back:hover { color: var(--purple) !important; background: var(--surface-hover); }
.discover-sub-cat {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 14px; font-weight: 700;
	color: var(--text-primary);
}
.discover-sub-bar > .spacer { flex: 1; }
.discover-sub-quick {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 13px; font-weight: 700;
	color: var(--purple) !important;
	text-decoration: none !important;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(124,58,237,0.12);
	transition: all 0.2s var(--ease);
}
.discover-sub-quick:hover { background: rgba(124,58,237,0.22); }

/* Subpage hero — replaces small h2 with a gradient banner */
.discover-sub > h2:first-of-type,
.discover-sub-hero {
	background:
		radial-gradient(circle at 0% 0%, rgba(124,58,237,0.18), transparent 55%),
		linear-gradient(180deg, var(--surface) 0%, var(--bg-raised) 100%);
	border: 1px solid var(--border);
	border-radius: 18px;
	padding: 22px 24px !important;
	margin: 0 0 14px !important;
	font-family: 'Space Grotesk', 'Inter', sans-serif !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	color: var(--text-primary) !important;
	letter-spacing: -0.01em !important;
	display: flex; align-items: center; gap: 12px;
}
.discover-sub > h2:first-of-type i { color: var(--purple); }
.discover-sub[data-cat="movies"] > h2:first-of-type { border-top: 3px solid #7c3aed; }
.discover-sub[data-cat="tv"]     > h2:first-of-type { border-top: 3px solid #f97316; }
.discover-sub[data-cat="music"]  > h2:first-of-type { border-top: 3px solid #f43f5e; }
.discover-sub[data-cat="travel"] > h2:first-of-type { border-top: 3px solid #06b6d4; }
.discover-sub[data-cat="local"]  > h2:first-of-type { border-top: 3px solid #22c55e; }
.discover-sub[data-cat="boardgames"] > h2:first-of-type { border-top: 3px solid #ec4899; }
.discover-sub[data-cat="books"] > h2:first-of-type { border-top: 3px solid #a16207; }
.discover-sub[data-cat="movies"] > h2:first-of-type i { color: #7c3aed; }
.discover-sub[data-cat="tv"]     > h2:first-of-type i { color: #f97316; }
.discover-sub[data-cat="music"]  > h2:first-of-type i { color: #f43f5e; }
.discover-sub[data-cat="travel"] > h2:first-of-type i { color: #06b6d4; }
.discover-sub[data-cat="local"]  > h2:first-of-type i { color: #22c55e; }
.discover-sub[data-cat="boardgames"] > h2:first-of-type i { color: #ec4899; }
.discover-sub[data-cat="books"] > h2:first-of-type i { color: #a16207; }

/* Filter row .box2 → modern chip strip */
.discover-sub .box2 {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: 14px !important;
	padding: 14px !important;
	margin: 0 0 18px !important;
}

/* Filter pills inside subpage */
.discover-sub .tvmatch {
	background: var(--bg-raised) !important;
	color: var(--text-secondary) !important;
	border: 1px solid var(--border) !important;
	border-radius: 999px !important;
	padding: 8px 14px !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	max-height: none !important;
	transition: all 0.2s var(--ease) !important;
	margin: 2px !important;
	min-height: 36px;
	line-height: 1.2;
}
.discover-sub .tvmatch:hover {
	background: linear-gradient(135deg, var(--purple), #6d28d9) !important;
	color: #fff !important;
	border-color: transparent !important;
}
.discover-sub .selectedtv,
.discover-sub .tvmatch.selectedtv {
	background: linear-gradient(135deg, var(--purple), #6d28d9) !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 4px 12px rgba(124,58,237,0.3);
}

/* Item cards — re-skin .jumpa to discover aesthetic */
.discover-sub .card.jumpa,
.discover-sub .jumpa {
	background: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: 16px !important;
	padding: 0 !important;
	overflow: hidden !important;
	transition: all 0.25s var(--ease) !important;
	color: var(--text-secondary) !important;
}
.discover-sub .card.jumpa:hover,
.discover-sub .jumpa:hover {
	transform: translateY(-3px);
	border-color: var(--purple-border) !important;
	box-shadow: 0 12px 32px rgba(0,0,0,0.35) !important;
}
.discover-sub[data-cat="movies"] .jumpa { border-top: 3px solid #7c3aed !important; }
.discover-sub[data-cat="tv"]     .jumpa { border-top: 3px solid #f97316 !important; }
.discover-sub[data-cat="music"]  .jumpa { border-top: 3px solid #f43f5e !important; }
.discover-sub[data-cat="travel"] .jumpa { border-top: 3px solid #06b6d4 !important; }
.discover-sub[data-cat="local"]  .jumpa { border-top: 3px solid #22c55e !important; }
.discover-sub .jumpa .pcol { padding: 12px !important; }

/* Image inside subpage card */
.discover-sub .jumpa img.img-fluid {
	border-radius: 0 !important;
	width: 100% !important;
	max-height: 260px;
	object-fit: cover;
}

/* % chip — replace solid purple banner with gradient pill positioned over image */
.discover-sub .toppbg {
	display: inline-block !important;
	background: linear-gradient(135deg, var(--purple), #6d28d9) !important;
	color: #fff !important;
	padding: 5px 12px !important;
	border-radius: 999px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	max-width: none !important;
	margin: 6px 0 !important;
}
.discover-sub[data-cat="movies"] .toppbg { background: linear-gradient(135deg, #7c3aed, #6d28d9) !important; }
.discover-sub[data-cat="tv"]     .toppbg { background: linear-gradient(135deg, #f97316, #ea580c) !important; }
.discover-sub[data-cat="music"]  .toppbg { background: linear-gradient(135deg, #f43f5e, #e11d48) !important; }
.discover-sub[data-cat="travel"] .toppbg { background: linear-gradient(135deg, #06b6d4, #0891b2) !important; }
.discover-sub[data-cat="local"]  .toppbg { background: linear-gradient(135deg, #22c55e, #16a34a) !important; }

/* Item title + descriptions */
.discover-sub .fonttop {
	font-family: 'Space Grotesk', 'Inter', sans-serif !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	color: var(--text-primary) !important;
	padding: 4px 0 !important;
	margin-top: 8px !important;
	line-height: 1.25 !important;
}
.discover-sub .pcol { color: var(--text-secondary) !important; font-size: 13px; line-height: 1.45; }
.discover-sub .text-muted2,
.discover-sub .text-muted3,
.discover-sub .text-muted5 { color: var(--text-muted) !important; }

/* Circular thumbs on subpages */
.discover-sub .linkthumbs,
.discover-sub .linkthumbsr {
	width: 38px !important;
	height: 38px !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	margin: 4px !important;
	font-weight: 700 !important;
	transition: all 0.2s var(--ease) !important;
}
.discover-sub .linkthumbs {
	color: var(--green) !important;
	background: var(--bg-raised) !important;
	border: 1px solid var(--border) !important;
}
.discover-sub .linkthumbs:hover {
	background: var(--green) !important;
	color: #fff !important;
	border-color: var(--green) !important;
	transform: scale(1.07);
}
.discover-sub .linkthumbsr {
	color: var(--coral) !important;
	background: var(--bg-raised) !important;
	border: 1px solid var(--border) !important;
}
.discover-sub .linkthumbsr:hover {
	background: var(--coral) !important;
	color: #fff !important;
	border-color: var(--coral) !important;
	transform: scale(1.07);
}

/* Search input/button on subpages — match discover style */
.discover-sub .input {
	background: var(--bg-raised) !important;
	border: 1px solid var(--border) !important;
	color: var(--text-primary) !important;
	border-right: none !important;
	border-radius: 999px 0 0 999px !important;
	padding: 10px 16px !important;
	height: auto !important;
	min-height: 40px;
}
.discover-sub .buttonaa {
	background: linear-gradient(135deg, var(--purple), #6d28d9) !important;
	color: #fff !important;
	border: 1px solid transparent !important;
	border-radius: 0 999px 999px 0 !important;
	padding: 10px 18px !important;
	min-height: 40px;
	font-weight: 700 !important;
}

/* Custom select on subpages */
.discover-sub .custom-select {
	background: var(--bg-raised) !important;
	border: 1px solid var(--border) !important;
	border-radius: 999px !important;
	overflow: hidden;
	color: var(--text-primary) !important;
}
.discover-sub .custom-select select {
	background: transparent !important;
	color: var(--text-primary) !important;
	padding: 10px 50px 10px 16px !important;
	font-weight: 600 !important;
}
.discover-sub .custom-select:after {
	background: linear-gradient(135deg, var(--purple), #6d28d9) !important;
	color: #fff !important;
	border-radius: 0 999px 999px 0 !important;
}
.discover-sub .purplesel,
.discover-sub .custom-select.purplesel {
	background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(244,63,94,0.12)) !important;
}

/* Pagination links */
.discover-sub a[class*="tvmatch"][href*="?"],
.discover-sub .mobilepag a {
	display: inline-block;
}
.discover-sub .colxs { color: var(--text-muted); font-size: 13px; }

/* Light mode for subpages */
html.light-mode .discover-sub-bar { background: #ffffff; }
html.light-mode .discover-sub > h2:first-of-type { background: linear-gradient(180deg, #ffffff 0%, #f8f5ff 100%); }
html.light-mode .discover-sub .box2 { background: #ffffff !important; }
html.light-mode .discover-sub .jumpa { background: #ffffff !important; }
html.light-mode .discover-sub .tvmatch { background: #f6f3ff !important; }
html.light-mode .discover-sub .input { background: #ffffff !important; }
html.light-mode .discover-sub .custom-select { background: #ffffff !important; }
html.light-mode .discover-sub .linkthumbs,
html.light-mode .discover-sub .linkthumbsr { background: #f6f3ff !important; }

/* small responsive fixes */
@media (max-width: 600px) {
	.discover-sub > h2:first-of-type { font-size: 22px !important; padding: 16px 18px !important; }
	.discover-sub-bar { padding: 10px 12px; gap: 8px; }
	.discover-sub-quick { font-size: 12px; padding: 6px 10px; }
}

/* ===========================================================
   V6.5 — DISCOVER COMPACT BAR + INLINE TASTE QUIZ
   May 2026
   ----------------------------------------------------------
   - Replaces the bulky .discover-hero with a slim .discover-bar
     that puts above-the-fold focus on rating, not marketing.
   - Adds .discover-quiz-card: inline taste-quiz that swaps in
     the next question via fetch — keeps users on Discover.
   =========================================================== */

/* COMPACT BAR — replaces the old hero */
.discover-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	padding: 14px 18px;
	margin: 0 0 16px;
	background: linear-gradient(135deg, rgba(124,58,237,0.10) 0%, rgba(244,63,94,0.06) 50%, rgba(6,182,212,0.06) 100%), var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	color: var(--text-primary);
}
.discover-bar-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: var(--text-primary);
	letter-spacing: -0.01em;
	/* V6.8 patch 37 — reset user-agent <h1> margin/line-height so the title
	   sits identically inside the flex bar regardless of whether it's
	   rendered as <div> (Discover) or <h1> (Messages/Account). */
	margin: 0;
	line-height: 1.1;
}
.discover-bar-title i {
	color: var(--purple);
	font-size: 22px;
}
.discover-bar-stats {
	margin-left: auto;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}
.discover-bar-stat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--text-secondary);
	background: var(--bg-raised);
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--border-soft, rgba(255,255,255,0.06));
}
.discover-bar-stat i { color: var(--purple); font-size: 12px; }
.discover-bar-stat strong { color: var(--text-primary); font-weight: 700; }
@media (max-width: 600px) {
	.discover-bar { padding: 12px 14px; gap: 8px; }
	.discover-bar-title { font-size: 18px; }
	.discover-bar-title i { font-size: 18px; }
	.discover-bar-stats { margin-left: 0; width: 100%; gap: 6px; }
	.discover-bar-stat { font-size: 12px; padding: 4px 10px; }
}

/* V6.8 patch 36 — Messages and Account use the SAME discover-bar styling as
   Discover itself (no per-page padding/font overrides). The earlier patch-35
   tightening made these bars feel inconsistent next to Discover; let them
   share defaults so the heading reads identically across all pages. */

/* TASTE QUIZ — inline card. Lives in its own section above the stream. */
.discover-quiz-wrap {
	margin-bottom: 24px;
}
.discover-quiz-card {
	position: relative;
	background:
		radial-gradient(circle at 0% 0%, rgba(124,58,237,0.18), transparent 50%),
		radial-gradient(circle at 100% 100%, rgba(255,140,0,0.14), transparent 50%),
		linear-gradient(180deg, var(--surface) 0%, var(--bg-raised) 100%);
	border: 1px solid var(--purple-border);
	border-radius: 18px;
	padding: 18px 22px 20px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(124,58,237,0.18);
}
.discover-quiz-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 14px;
}
.discover-quiz-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: linear-gradient(135deg, var(--purple), #6d28d9);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 999px;
}
.discover-quiz-progress {
	flex: 1;
	min-width: 180px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.discover-quiz-progress-label {
	font-size: 12px;
	color: var(--text-muted);
}
.discover-quiz-progress-label strong { color: var(--text-primary); }
.discover-quiz-progress-bar {
	height: 6px;
	background: var(--bg-raised);
	border-radius: 999px;
	overflow: hidden;
	position: relative;
}
.discover-quiz-progress-bar > span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--purple) 0%, #6d28d9 50%, #f43f5e 100%);
	border-radius: 999px;
	transition: width .5s var(--ease);
}
.discover-quiz-coins {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(251,191,36,0.16);
	color: #fbbf24;
	padding: 6px 12px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 13px;
	border: 1px solid rgba(251,191,36,0.25);
}
.discover-quiz-coins i { font-size: 13px; }

.discover-quiz-body {
	transition: opacity .2s;
}
.discover-quiz-story {
	color: var(--text-muted);
	font-size: 13px;
	font-style: italic;
	margin: 0 0 8px;
	line-height: 1.5;
}
.discover-quiz-text {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 16px;
	line-height: 1.25;
	letter-spacing: -0.01em;
}
@media (min-width: 768px) {
	.discover-quiz-text { font-size: 24px; }
}
/* "Asked by [Name]" attribution chip for user-submitted (moment) questions. */
.discover-quiz-creator {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--text-muted);
	background: rgba(124,58,237,0.10);
	border: 1px solid rgba(124,58,237,0.22);
	padding: 4px 10px;
	border-radius: 999px;
	margin: 0 0 14px;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.discover-quiz-creator[hidden] { display: none; }
.discover-quiz-creator i { color: var(--purple); font-size: 11px; }
.discover-quiz-creator-link {
	color: var(--text-primary);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.15s ease;
}
.discover-quiz-creator-link:hover {
	color: var(--purple);
	text-decoration: none;
}
.discover-quiz-creator .hub-loc { font-weight: 400; color: var(--text-muted); }
.discover-quiz-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 14px;
}
@media (max-width: 540px) {
	.discover-quiz-options { grid-template-columns: 1fr; }
}
.discover-quiz-opt {
	background: var(--bg-raised);
	border: 1px solid var(--border);
	color: var(--text-primary);
	font-size: 15px;
	font-weight: 600;
	padding: 14px 16px;
	border-radius: 12px;
	cursor: pointer;
	text-align: center;
	transition: all .2s var(--ease);
	font-family: 'Inter', sans-serif;
}
.discover-quiz-opt:hover:not(:disabled) {
	background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(244,63,94,0.06));
	border-color: var(--purple-border);
	transform: translateY(-1px);
	color: var(--text-primary);
}
.discover-quiz-opt.chosen {
	background: linear-gradient(135deg, var(--purple), #6d28d9) !important;
	color: #fff !important;
	border-color: transparent !important;
}
.discover-quiz-opt:disabled { cursor: default; }

.discover-quiz-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.discover-quiz-skip {
	background: none;
	border: none;
	color: var(--text-muted);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	padding: 6px 10px;
	border-radius: 8px;
	transition: all .2s var(--ease);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.discover-quiz-skip:hover:not(:disabled) {
	background: var(--surface-hover);
	color: var(--text-primary);
}
.discover-quiz-reward {
	font-size: 12px;
	font-weight: 700;
	color: #fbbf24;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* V6.8 patch 63 — soft inline CTA below the quiz foot. Always visible
   on the inline this-or-that card so members discover the "create your
   own question" feature without leaving the rating flow. */
.discover-quiz-create {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding: 10px 14px;
	border-radius: 12px;
	background: rgba(124,58,237,0.10);
	border: 1px dashed rgba(124,58,237,0.35);
	color: var(--text-secondary) !important;
	font-size: 12.5px;
	font-weight: 500;
	text-decoration: none !important;
	transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.discover-quiz-create:hover {
	background: rgba(124,58,237,0.16);
	border-color: rgba(124,58,237,0.55);
	color: var(--text-primary) !important;
	transform: translateY(-1px);
}
.discover-quiz-create i { color: var(--purple-light); font-size: 14px; }
.discover-quiz-create strong { color: var(--text-primary); margin-left: 2px; }

.discover-quiz-puff {
	position: absolute;
	right: 22px;
	top: 22px;
	background: rgba(251,191,36,0.95);
	color: #1a0f0a;
	font-weight: 800;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 14px;
	box-shadow: 0 4px 14px rgba(251,191,36,0.45);
	pointer-events: none;
	animation: dq-puff 1.4s var(--ease) forwards;
}
@keyframes dq-puff {
	0%   { opacity: 0; transform: translateY(0) scale(0.7); }
	18%  { opacity: 1; transform: translateY(-10px) scale(1.05); }
	60%  { opacity: 1; transform: translateY(-30px) scale(1); }
	100% { opacity: 0; transform: translateY(-60px) scale(0.95); }
}

/* Done celebration */
.discover-quiz-done {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 24px;
}
.discover-quiz-done-icon {
	font-size: 48px;
	line-height: 1;
}
.discover-quiz-celebrate {
	text-align: center;
	padding: 8px 0;
}
.discover-quiz-celebrate .discover-quiz-done-icon { font-size: 56px; margin-bottom: 8px; }
.discover-quiz-celebrate h3 {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	color: var(--text-primary);
	font-size: 22px;
	margin: 0 0 6px;
}
.discover-quiz-celebrate p {
	color: var(--text-secondary);
	margin: 0;
	font-size: 14px;
}

/* light mode tweaks */
html.light-mode .discover-bar {
	background: linear-gradient(135deg, rgba(124,58,237,0.06) 0%, rgba(244,63,94,0.04) 100%), #ffffff;
}
html.light-mode .discover-bar-stat { background: #f6f3ff; }
html.light-mode .discover-quiz-card { background: linear-gradient(180deg, #ffffff 0%, #faf7ff 100%); }
html.light-mode .discover-quiz-opt { background: #f6f3ff; color: #1a0f2e; }

/* Hide the legacy big hero if it's still rendered for some reason */
.discover-wrap > .discover-hero { display: none !important; }

/* =============================================================
   V6.6 — Ongoing quiz variant (returning users) + image tiles
   Same .discover-quiz-card chassis, different head/options
   ============================================================= */
.discover-quiz-card.discover-quiz-card-ongoing {
	border-color: rgba(6,182,212,0.35);
	background: linear-gradient(180deg, rgba(6,182,212,0.06) 0%, rgba(124,58,237,0.04) 100%), var(--surface);
}
.discover-quiz-badge.discover-quiz-badge-ongoing {
	background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}
.discover-quiz-progress.discover-quiz-progress-ongoing {
	display: flex;
	align-items: center;
	flex: 1;
}
.discover-quiz-progress.discover-quiz-progress-ongoing .discover-quiz-progress-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--text-secondary);
	font-weight: 500;
}
.discover-quiz-progress.discover-quiz-progress-ongoing .discover-quiz-progress-label i {
	color: #06b6d4;
}

/* Image-tile options ("this or that") */
.discover-quiz-options.discover-quiz-options-tiles {
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
@media (max-width: 540px) {
	.discover-quiz-options.discover-quiz-options-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
}
.discover-quiz-opt-tile {
	padding: 0 !important;
	overflow: hidden;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: 14px;
	color: var(--text-primary);
	cursor: pointer;
	transition: all .2s var(--ease);
	min-height: 180px;
}
.discover-quiz-opt-tile img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	display: block;
	margin: 0;
}
.discover-quiz-opt-tile br { display: none; }
.discover-quiz-opt-tile {
	/* the legacy text label sits as a text node after the <img>; pad the wrapper bottom */
}
.discover-quiz-opt-tile::after {
	/* visual padding for the label area */
	content: '';
	display: block;
	height: 4px;
}
.discover-quiz-opt-tile:hover:not(:disabled) {
	transform: translateY(-2px);
	border-color: var(--purple-border);
	box-shadow: 0 8px 24px rgba(124,58,237,0.18);
}
.discover-quiz-opt-tile.chosen {
	background: linear-gradient(135deg, var(--purple), #6d28d9) !important;
	color: #fff !important;
	border-color: transparent !important;
}
.discover-quiz-opt-tile.chosen img { opacity: 0.85; }

@media (max-width: 540px) {
	.discover-quiz-opt-tile { min-height: 150px; font-size: 13px; }
	.discover-quiz-opt-tile img { height: 110px; }
}

html.light-mode .discover-quiz-card.discover-quiz-card-ongoing {
	background: linear-gradient(180deg, #f0fbfd 0%, #faf7ff 100%);
}
html.light-mode .discover-quiz-opt-tile { background: #ffffff; color: #1a0f2e; }

/* ============================================================
   V6.8 patch 8 — Connect strip + Save button
   ============================================================ */

/* CONNECT STRIP (#1) */
.connect-strip-wrap {
	margin: 0 0 26px;
	padding: 16px 18px 18px;
	background: linear-gradient(180deg, rgba(124,58,237,0.08), rgba(124,58,237,0.02));
	border: 1px solid var(--purple-border, rgba(124,58,237,0.28));
	border-radius: 18px;
}
.connect-strip-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.connect-strip-title {
	font-size: 1.15rem; font-weight: 700;
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--text-primary); margin: 0;
}
.connect-strip-title i { color: var(--purple); }
.connect-strip-sub { font-size: .82rem; color: var(--text-secondary); }

.connect-row { margin-top: 14px; }
.connect-row-head {
	display: flex; align-items: center; gap: 8px;
	font-size: .76rem; font-weight: 700;
	letter-spacing: .07em; text-transform: uppercase;
	color: var(--text-secondary); margin-bottom: 8px;
}
.connect-row-head i { color: var(--purple); }
.connect-row-more {
	margin-left: auto;
	font-size: .72rem; font-weight: 700;
	color: var(--purple) !important; text-decoration: none !important;
	display: inline-flex; align-items: center; gap: 4px;
	letter-spacing: .04em;
}
.connect-row-more:hover { color: var(--purple-light, #a78bfa) !important; }
.connect-row-tiles {
	display: flex; gap: 12px;
	overflow-x: scroll; overflow-y: hidden;
	padding: 4px 4px 14px;
	scroll-snap-type: x mandatory;
	/* V6.8 patch 18 — make the horizontal scrollbar persistent so users
	   know the row is scrollable on hover-less devices. Firefox: thin +
	   colored. WebKit: explicit thumb/track shown always (not auto). */
	scrollbar-width: thin;
	scrollbar-color: rgba(124,58,237,0.55) rgba(255,255,255,0.06);
}
.connect-row-tiles::-webkit-scrollbar { height: 10px; }
.connect-row-tiles::-webkit-scrollbar-track {
	background: rgba(255,255,255,0.06);
	border-radius: 6px;
}
.connect-row-tiles::-webkit-scrollbar-thumb {
	background: rgba(124,58,237,0.55);
	border-radius: 6px;
	border: 2px solid transparent;
	background-clip: padding-box;
}
.connect-row-tiles::-webkit-scrollbar-thumb:hover {
	background: rgba(124,58,237,0.85);
	background-clip: padding-box;
}

.connect-tile {
	flex: 0 0 auto;
	scroll-snap-align: start;
	width: 200px;
	padding: 14px 12px 12px;
	background: var(--surface, rgba(255,255,255,0.04));
	border: 1px solid var(--border, rgba(255,255,255,0.08));
	border-radius: 14px;
	display: flex; flex-direction: column; gap: 10px;
	color: var(--text-primary) !important;
	text-decoration: none !important;
	transition: transform .15s, border-color .15s, background .15s;
}
.connect-tile:hover {
	transform: translateY(-2px);
	border-color: var(--purple-border, rgba(124,58,237,0.45));
	background: rgba(124,58,237,0.06);
}
.connect-tile-top {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.connect-tile-avatar {
	display: inline-block;
	border-radius: 50%;
	overflow: hidden;
}
.connect-tile-avatar img {
	width: 56px; height: 56px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(124,58,237,0.4);
	display: block;
}
.connect-tile-avatar-hidden img {
	filter: grayscale(0.4);
	opacity: 0.85;
}
.connect-tile-name {
	font-size: .85rem; font-weight: 600;
	text-align: center;
	max-width: 100%;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	line-height: 1.2;
}
.connect-tile-name .hub-loc { display: none; }  /* keep tiles compact */
.connect-tile-pct {
	font-size: .7rem; font-weight: 700;
	letter-spacing: .03em;
	padding: 3px 10px;
	border-radius: 99px;
	background: rgba(255,255,255,0.06);
	white-space: nowrap;
}
.connect-tile-pct-high  { background: rgba(34,197,94,0.18);  color: #22c55e; }
.connect-tile-pct-mid   { background: rgba(245,158,11,0.18); color: #f59e0b; }
.connect-tile-pct-low   { background: rgba(244,63,94,0.18);  color: #f43f5e; }
.connect-tile-pct-fresh { background: rgba(124,58,237,0.18); color: var(--purple); }

/* Action chips inside each Connect tile (Follow / Profile / Message) */
.connect-tile-actions {
	display: flex; flex-direction: column; gap: 6px;
	margin-top: 2px;
}
.connect-tile-act {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 6px;
	padding: 7px 10px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(255,255,255,0.03);
	color: var(--text-primary) !important;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none !important;
	cursor: pointer;
	transition: all 0.15s ease;
	font-family: inherit;
}
.connect-tile-act:hover {
	background: rgba(124,58,237,0.14);
	border-color: rgba(124,58,237,0.45);
	color: #fff !important;
	transform: translateY(-1px);
}
.connect-tile-act.connect-tile-following {
	background: rgba(124,58,237,0.20);
	border-color: rgba(124,58,237,0.55);
	color: #d8c8ff !important;
}
.connect-tile-act:disabled { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 600px) {
	.connect-strip-wrap { padding: 12px 12px 14px; border-radius: 14px; }
	.connect-tile { width: 170px; padding: 12px 10px 10px; }
	.connect-tile-avatar img { width: 50px; height: 50px; }
	.connect-tile-act { font-size: 11.5px; padding: 6px 9px; }
}

/* SAVE BUTTON (#9) */
.discover-card-save {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px; height: 32px;
	border-radius: 50%;
	border: none;
	background: rgba(0,0,0,0.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: rgba(255,255,255,0.9);
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: all 0.18s var(--ease);
	z-index: 4;
	font-size: 13px;
}
/* When the pct chip is also showing in top-right, push the save button left of it. */
.discover-card-item .discover-card-media .discover-card-pct + .discover-card-save,
.discover-card-item .discover-card-media .discover-card-save:has(+ .discover-card-pct) {
	right: 90px;
}
.discover-card-item .discover-card-media:has(.discover-card-pct) .discover-card-save {
	right: 90px;
}
.discover-card-save:hover { transform: scale(1.1); background: rgba(124,58,237,0.85); }
.discover-card-save.saved { background: var(--purple); color: #fff; }
.discover-card-save.saved:hover { background: var(--purple-dark, #6d28d9); }
.discover-card-save:disabled { opacity: 0.6; cursor: default; }
/* AI banner variant — sit on the gradient banner itself, top-right */
.discover-card-save-onbanner {
	top: 8px; right: 8px;
	background: rgba(0,0,0,0.4);
}
.discover-card-save-onbanner.saved { background: rgba(255,255,255,0.92); color: var(--purple); }

/* SAVED-tab empty state */
.discover-empty-saved {
	background: rgba(124,58,237,0.05);
	border: 1px dashed rgba(124,58,237,0.32);
	border-radius: 16px;
	padding: 30px 20px;
	text-align: center;
}

html.light-mode .connect-strip-wrap { background: linear-gradient(180deg, rgba(124,58,237,0.04), rgba(124,58,237,0.0)); }
html.light-mode .discover-card-save { background: rgba(0,0,0,0.6); }
html.light-mode .discover-card-save.saved { background: var(--purple); }

/* ============================================================
   V6.8 patch 9 — Connect as its own tab (fuller layout)
   ============================================================ */
.connect-tab-page {
	margin-top: 18px;
	padding: 24px 22px 26px;
	background: linear-gradient(180deg, rgba(124,58,237,0.10), rgba(124,58,237,0.02));
}
.connect-tab-page .connect-strip-title {
	font-size: 1.55rem;
	margin-bottom: 2px;
}
.connect-tab-page .connect-strip-sub {
	font-size: .92rem;
	color: var(--text-secondary);
}
.connect-tab-page .connect-row {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid rgba(124,58,237,0.18);
}
.connect-tab-page .connect-row:first-of-type {
	border-top: 0;
	margin-top: 8px;
	padding-top: 0;
}
.connect-tab-page .connect-row-head {
	font-size: .9rem;
	margin-bottom: 12px;
}
/* Bigger tiles on the dedicated tab */
.connect-tab-page .connect-tile {
	width: 150px;
	padding: 14px 12px;
}
.connect-tab-page .connect-tile-avatar img {
	width: 64px; height: 64px;
}
.connect-tab-page .connect-tile-name {
	font-size: .88rem;
}
.connect-tab-page .connect-tile-pct {
	font-size: .72rem;
}
.connect-tab-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid rgba(124,58,237,0.18);
}
@media (max-width: 600px) {
	.connect-tab-page { padding: 16px 14px 18px; }
	.connect-tab-page .connect-strip-title { font-size: 1.25rem; }
	.connect-tab-page .connect-tile { width: 120px; padding: 10px 8px; }
	.connect-tab-page .connect-tile-avatar img { width: 52px; height: 52px; }
}

/* ============================================================
   V6.8 patch 8 — Live coin counter flash (#8)
   The original nav-coin-pill was reverted in patch 9; the flash
   keyframe still applies to any [data-coin-counter] element that
   gets updated by WeirdPulse.applyCoin(n).
   ============================================================ */
.coin-pulse-flash {
	animation: coin-pulse-flash 0.6s ease-out;
}
@keyframes coin-pulse-flash {
	0%   { transform: scale(1); color: inherit; }
	30%  { transform: scale(1.18); color: #fde047; text-shadow: 0 0 12px rgba(253,224,71,0.7); }
	100% { transform: scale(1); color: inherit; }
}

/* ============================================================
   V6.8 patch 10 — Discover-style sub-pages
   Tiny back-arrow chip in the slim .discover-bar so movies.php /
   tv.php / music.php / travel.php / local.php can lead with a
   compact "← Movies" header that matches Discover's chrome.
   ============================================================ */
.discover-bar-left {
	display: inline-flex; align-items: center; gap: 10px;
}
.discover-bar-back {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: rgba(124,58,237,0.14);
	color: var(--purple) !important;
	border: 1px solid rgba(124,58,237,0.28);
	transition: all 0.15s var(--ease);
	text-decoration: none !important;
}
.discover-bar-back:hover {
	background: var(--purple);
	color: #fff !important;
	transform: translateX(-2px);
}
html.light-mode .discover-bar-back {
	background: rgba(124,58,237,0.10);
}


/* ===========================================================
   V6.8 patch 11 — Mobile compaction for Discover + sub-pages
   ----------------------------------------------------------
   On phones the chrome (slim bar + 11-tab nav + section header
   + 2 filter pillrows) was eating the whole viewport above the
   fold, pushing the actual cards way down. Switch wrapping rows
   to horizontal scroll, shrink type, drop redundant padding.
   =========================================================== */
@media (max-width: 640px) {
  /* TABS — single horizontal scroll row instead of 3-col wrap grid.
     Slim purple scrollbar + double-edge fade make scrollability obvious. */
  .discover-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px;
    margin-bottom: 14px;
    padding: 5px 10px 7px;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(124,58,237,0.45) transparent;
    /* fade BOTH edges so hidden content on either side is implied */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
  .discover-tabs::-webkit-scrollbar { height: 4px; }
  .discover-tabs::-webkit-scrollbar-thumb {
    background: rgba(124,58,237,0.55); border-radius: 4px;
  }
  .discover-tabs::-webkit-scrollbar-track { background: transparent; }
  .discover-tab {
    flex: 0 0 auto;
    padding: 7px 12px;
    font-size: 13px;
    gap: 6px;
    scroll-snap-align: start;
  }
  .discover-tab i { font-size: 12px; }

  /* DISCOVER BAR — slimmer & stats become a one-row scroller. */
  .discover-bar {
    padding: 10px 12px !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .discover-bar-back { width: 32px; height: 32px; font-size: 13px; }
  .discover-bar-title { font-size: 16px !important; gap: 6px; }
  .discover-bar-title i { font-size: 16px !important; }
  .discover-bar-stats {
    margin-left: 0;
    width: 100%;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 5px !important;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
  }
  .discover-bar-stats::-webkit-scrollbar { display: none; }
  .discover-bar-stat {
    flex: 0 0 auto;
    font-size: 11.5px !important;
    padding: 4px 10px !important;
  }

  /* SECTION HEADER — smaller h2, descriptor de-emphasised. */
  .discover-section { margin-bottom: 24px; }
  .discover-section-head { gap: 4px 10px; margin-bottom: 12px; }
  .discover-section-head h2 { font-size: 18px !important; line-height: 1.2; }
  .discover-section-sub { font-size: 12px; line-height: 1.3; }

  /* SUB-PAGE TOOLBAR & PILLROWS — horizontal scroll, no wrap. */
  .subpage-toolbar { margin: 8px 0 12px !important; gap: 8px !important; }
  .subpage-toolbar form.subpage-search { min-width: 0 !important; }
  .subpage-toolbar .subpage-search input[type="text"] {
    padding: 8px 14px !important; font-size: 14px;
  }
  .subpage-toolbar .subpage-search button {
    padding: 8px 14px !important;
  }
  .subpage-pillrow {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(124,58,237,0.45) transparent;
    margin-bottom: 8px !important;
    padding-bottom: 4px;
    scroll-padding-inline: 18px;
    /* fade BOTH edges so users see there's more to scroll on either side */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
  .subpage-pillrow::-webkit-scrollbar { height: 3px; }
  .subpage-pillrow::-webkit-scrollbar-thumb {
    background: rgba(124,58,237,0.45); border-radius: 3px;
  }
  .subpage-pillrow::-webkit-scrollbar-track { background: transparent; }
  .subpage-pillrow-label {
    flex: 0 0 auto;
    font-size: .68rem !important;
    padding: 4px 4px 4px 0 !important;
  }
  .subpage-pill {
    flex: 0 0 auto;
    font-size: .78rem !important;
    padding: 5px 11px !important;
  }
  .subpage-result-meta { font-size: .78rem; margin-bottom: 8px; }
  .subpage-pager a, .subpage-pager span {
    padding: 6px 10px;
    min-width: 32px;
    font-size: .82rem;
  }
}

/* Even tighter on small phones. */
@media (max-width: 420px) {
  .discover-bar-title { font-size: 15px !important; }
  .discover-bar-stat { font-size: 11px !important; padding: 3px 9px !important; }
  .discover-tab { padding: 6px 10px; font-size: 12.5px; }
}

/* ===========================================================
   V6.8 patch 12 — Mobile scroll-discoverability
   ----------------------------------------------------------
   Add a once-per-page "nudge" animation to scrollable rows so
   users see them peek-scroll right then back, plus a small
   chevron hint on tab rows that overflow. Only fires on
   touch + ≤640px so desktop behaviour is unchanged.
   =========================================================== */
@media (max-width: 640px) {
  /* one-shot peek animation: slides 20px right, settles back. */
  @keyframes scrollNudge {
    0%   { transform: translateX(0); }
    35%  { transform: translateX(-22px); }
    70%  { transform: translateX(0); }
    100% { transform: translateX(0); }
  }
  .scroll-nudge > * { animation: scrollNudge 1.4s ease-in-out 0.6s 1 both; }

  /* When a row is overflowed, optionally show a small chevron at the
     trailing edge. Activated only when JS adds .has-overflow class. */
  .has-overflow-right { position: relative; }
  .has-overflow-right::after {
    content: '';
    position: absolute;
    right: 2px; top: 50%;
    width: 18px; height: 18px;
    margin-top: -9px;
    border-radius: 50%;
    background: rgba(124,58,237,0.85);
    /* embed a chevron-right glyph via mask */
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6 3l5 5-5 5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 10px 10px no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6 3l5 5-5 5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 10px 10px no-repeat;
    pointer-events: none;
    animation: chevPulse 2s ease-in-out infinite;
    z-index: 4;
  }
  @keyframes chevPulse {
    0%, 100% { opacity: 0.55; transform: translateX(0); }
    50%      { opacity: 1;    transform: translateX(3px); }
  }

  /* respect users who don't want motion */
  @media (prefers-reduced-motion: reduce) {
    .scroll-nudge > * { animation: none !important; }
    .has-overflow-right::after { animation: none !important; opacity: 0.7 !important; }
  }
}

/* ===========================================================
   V6.8 patch 13 — Mobile dropdown filters
   ----------------------------------------------------------
   On mobile, audience+genre pillrows wasted 2 rows of vertical
   space and hid options behind a horizontal scroll. Replace
   with native <select>-backed chips ("Audience: Anyone ▾").
   Native picker = familiar, accessible, zero scroll.
   =========================================================== */
.subpage-filters-mobile { display: none; }

@media (max-width: 640px) {
  /* Hide the pill version of FILTER rows only (audience + genre).
     The .discover-tabs nav row is unaffected — it stays scrollable. */
  .subpage-pillrow-filter { display: none !important; }

  /* Show the dropdown row */
  .subpage-filters-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
  }
  .subpage-select-chip {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 32px 8px 12px;
    border-radius: 999px;
    background: rgba(124,58,237,0.10);
    border: 1px solid rgba(124,58,237,0.28);
    cursor: pointer;
    transition: all .15s var(--ease);
  }
  .subpage-select-chip:focus-within,
  .subpage-select-chip:active {
    border-color: var(--purple);
    background: rgba(124,58,237,0.18);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.18);
  }
  .subpage-select-chip-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-secondary);
    flex-shrink: 0;
  }
  /* V6.8 patch 128 — visible label span (shows current selected option). */
  .subpage-select-chip-val {
    flex: 1 1 0;
    min-width: 0;
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
  }
  /* V6.8 patch 128 — overlay the <select> on the FULL chip area (incl. padding
     + caret) so iOS Safari taps anywhere on the chip reliably open the native
     picker. Prior layout (select as a flex sibling) sometimes failed to
     forward padding-area taps to the inner control. opacity:0 keeps the chip
     visual driven by .subpage-select-chip-val + .subpage-select-chip-caret;
     iOS picker still uses the <option> text for the wheel display. */
  .subpage-select-chip select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
    opacity: 0;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    /* iOS auto-zooms inputs with font-size < 16px on focus; lock to 16. */
    font-size: 16px;
    cursor: pointer;
    z-index: 2;
  }
  .subpage-select-chip select option {
    color: var(--text-primary);
    background: var(--surface, #1a1625);
  }
  /* V6.8 patch 25 — disabled first option acts as picker header. */
  .subpage-select-chip select option:disabled {
    color: var(--text-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: .85rem;
  }
  .subpage-select-chip-caret {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--purple);
    pointer-events: none;
    z-index: 1;
  }
}

/* Light-mode tint for the chip */
html.light-mode .subpage-select-chip {
  background: rgba(124,58,237,0.06);
  border-color: rgba(124,58,237,0.22);
}
html.light-mode .subpage-select-chip select option {
  background: #ffffff;
}

/* ===========================================================
   V6.8 patch 14 — Tighter nav-to-content gap + mobile padding
   ----------------------------------------------------------
   Was 120px main padding-top + 20px wrapper padding = 140px of
   dead space below an 80px header. Now 96 + 8 = 104px on
   desktop, with a smaller bump on phones.
   =========================================================== */
@media (max-width: 640px) {
  main { padding-top: 76px !important; }
  .wrapper { padding: 4px 0 !important; }
  /* Ensure the discover-wrap doesn't add an extra 32+ buffer that
     was visible above the .discover-bar */
  .discover-wrap { padding-top: 4px !important; }
}

/* V6.8 patch 14 — fallback open state when Bootstrap collapse JS
   isn't wired up (e.g. messages.php's BS5 vs nav's BS4 attrs). */
.collapse.navbar-collapse.navbar-open-fallback {
  display: block !important;
  height: auto !important;
}

/* ============================================================
   V6.8 patch 16 — Stream tab merge + Skip control + obvious
   rated state + mobile card-foot fix
   ------------------------------------------------------------
   1) Stream filter chips (top/opposites/follow on the new
      single Stream tab that replaces For You + Feed).
   2) `.discover-skip` button — small "Not interested" eye-slash
      icon that lives left of the up/down thumbs.
   3) Whole-card visual when the user has already rated
      (.discover-card.rated.rated-up / .rated-down): tinted
      green/coral border, prominent ✓ badge in the foot prompt.
   4) Mobile breakpoint fix: card-foot wraps so the 3 action
      buttons + prompt don't overflow on phones.
   ============================================================ */

/* (1) Stream filter chips — sit right below the .discover-tabs nav */
.stream-filters {
	display: flex;
	gap: 8px;
	margin: 0 0 14px;
	padding: 4px 2px 6px;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding-inline: 16px;
	scrollbar-width: thin;
	scrollbar-color: rgba(124,58,237,0.45) transparent;
	/* V6.8 patch 31 — fade only the right edge so the leftmost "All" pill
	   stays solid and readable. Right-edge fade still hints at scrollability. */
	mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
	-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
}
.stream-filters::-webkit-scrollbar { height: 4px; }
.stream-filters::-webkit-scrollbar-thumb { background: rgba(124,58,237,0.45); border-radius: 999px; }
.stream-filter {
	display: inline-flex; align-items: center; gap: 6px;
	flex: 0 0 auto;
	scroll-snap-align: start;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(124,58,237,0.10);
	border: 1px solid rgba(124,58,237,0.32);
	/* V6.8 patch 32 — was --text-secondary (mid-grey) which got washed out on
	   the purple-tinted background; bump to primary for full contrast. */
	color: var(--text-primary);
	font-size: 13px; font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.stream-filter:hover { background: rgba(124,58,237,0.22); border-color: rgba(124,58,237,0.55); color: var(--text-primary); }
.stream-filter.active {
	/* Brighter purple gradient + heavier weight + glow so the active pill
	   reads loud against any neighbouring tile background. */
	background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 60%, #6d28d9 100%);
	border-color: #a78bfa;
	color: #fff !important;
	font-weight: 700;
	box-shadow: 0 6px 22px rgba(124,58,237,0.45);
}
.stream-filter.active i { color: #fff; }
html.light-mode .stream-filter { background: rgba(124,58,237,0.10); color: #2b2350; border-color: rgba(124,58,237,0.32); }
/* V6.8 patch 69 — light-mode bug fix. The `html.light-mode .stream-filter` rule
   above ties on specificity (0,2,0) with `.stream-filter.active` and wins by
   source order, which silently reset the active pill's gradient back to the
   soft purple wash and left WHITE TEXT on a near-white background (invisible).
   Restate the gradient + border + glow here so the active pill stays loud in
   light mode too. */
html.light-mode .stream-filter.active {
	background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 60%, #6d28d9 100%);
	border-color: #6d28d9;
	color: #fff !important;
	box-shadow: 0 6px 22px rgba(124,58,237,0.35);
}
html.light-mode .stream-filter.active i { color: #fff; }
html.light-mode .stream-filter:hover { background: rgba(124,58,237,0.18); border-color: rgba(124,58,237,0.55); color: #2b2350; }
html.light-mode .stream-filter.active:hover { background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 60%, #6d28d9 100%); color: #fff !important; }

/* (2) Skip "Not interested" button — eye-slash icon */
.discover-skip {
	width: 32px; height: 32px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--bg-raised);
	color: var(--text-muted);
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: all 0.18s var(--ease);
	font-size: 12px;
	flex-shrink: 0;
}
.discover-skip:hover:not(:disabled) {
	background: rgba(255,255,255,0.06);
	color: var(--text-primary);
	transform: scale(1.07);
}
.discover-skip:disabled { opacity: 0.4; cursor: default; }
html.light-mode .discover-skip { background: #f6f3ff; border-color: rgba(0,0,0,0.06); color: #6b6378; }

/* (3) Whole-card "I rated this" treatment for item + social cards.
       AI cards already have their own .ai-stat-mine badge in the
       stats row, so we leave them alone here. */
.discover-card-item.rated, .discover-card-social.rated {
	position: relative;
}
.discover-card-item.rated-up, .discover-card-social.rated-up {
	border-color: rgba(34,197,94,0.45);
	box-shadow: 0 0 0 1px rgba(34,197,94,0.25), 0 6px 18px rgba(34,197,94,0.10);
}
.discover-card-item.rated-down, .discover-card-social.rated-down {
	border-color: rgba(244,63,94,0.45);
	box-shadow: 0 0 0 1px rgba(244,63,94,0.25), 0 6px 18px rgba(244,63,94,0.10);
}
/* Subtle banner stripe across the top of rated cards */
.discover-card.rated::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--green);
	opacity: 0.85;
	z-index: 2;
}
.discover-card.rated-down::before { background: var(--coral); }
/* The category-tinted top border defined elsewhere uses `border-top: 3px`,
   so suppress it on rated cards (the coloured stripe replaces it). */
.discover-card-item.rated { border-top-color: transparent !important; }
/* Foot prompt becomes the rated badge — clearly green/coral with checkmark */
.discover-card.rated-up .discover-card-prompt {
	color: var(--green);
	font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.discover-card.rated-down .discover-card-prompt {
	color: var(--coral);
	font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.discover-card.rated-up .discover-card-prompt i,
.discover-card.rated-down .discover-card-prompt i { font-size: 11px; }
/* Hide skip on rated cards — the rating already filters it from future fetches */
.discover-card.rated .discover-skip { display: none; }
/* Pulse the rated card briefly when it first gets the class via JS */
@keyframes ratedFlashUp {
	0%   { box-shadow: 0 0 0 1px rgba(34,197,94,0.25); }
	50%  { box-shadow: 0 0 0 4px rgba(34,197,94,0.45), 0 8px 24px rgba(34,197,94,0.30); }
	100% { box-shadow: 0 0 0 1px rgba(34,197,94,0.25), 0 6px 18px rgba(34,197,94,0.10); }
}
@keyframes ratedFlashDown {
	0%   { box-shadow: 0 0 0 1px rgba(244,63,94,0.25); }
	50%  { box-shadow: 0 0 0 4px rgba(244,63,94,0.45), 0 8px 24px rgba(244,63,94,0.30); }
	100% { box-shadow: 0 0 0 1px rgba(244,63,94,0.25), 0 6px 18px rgba(244,63,94,0.10); }
}
.discover-card.rated-up   { animation: ratedFlashUp   0.7s ease 1; }
.discover-card.rated-down { animation: ratedFlashDown 0.7s ease 1; }

/* (4) Mobile fixes — already stacked from desktop now; just tighten spacing
       and shrink the circular controls so 3 buttons fit on tiny phones. */
@media (max-width: 640px) {
	.discover-card-foot {
		gap: 6px;
		padding-top: 8px;
	}
	.discover-card-prompt {
		font-size: 11.5px;
	}
	.discover-card-actions {
		gap: 6px;
	}
	/* Slightly smaller circular controls on phones (was 36×36 → 32×32) */
	.discover-rate { width: 32px; height: 32px; font-size: 13px; }
	.discover-skip { width: 30px; height: 30px; font-size: 11px; }
	/* Top-corner badges: only pct sits opposite the cat tag now
	   (save moved into actions row in patch 47). */
	.discover-card-tag, .discover-card-pct {
		font-size: 10px;
		padding: 4px 8px;
		top: 8px;
	}
	.discover-card-tag { left: 8px; }
	.discover-card-pct { right: 8px; }
	.discover-card-save {
		top: 8px; right: 8px;
		width: 28px; height: 28px;
	}
	/* Larger AI banner save lifted similarly */
	.discover-card-save.discover-card-save-onbanner {
		top: 8px; right: 8px;
	}
	/* Body text smaller, tighter padding so card has less vertical bulk */
	.discover-card-body { padding: 12px; gap: 6px; }
	.discover-card-title { font-size: 15px; }
	.discover-card-desc  { font-size: 12.5px; line-height: 1.4; }
	.discover-card-meta  { font-size: 11.5px; }
	/* AI card stats wrap properly */
	.discover-card-ai-stats { font-size: 11.5px; gap: 8px; }
	.discover-card-ai-stats .rated { margin-left: 0; }
	/* AI try button shrinks a hair */
	.discover-card-try { font-size: 12px !important; padding: 7px 12px !important; }
	/* Section heading drops the trailing "Browse all" link to next line so it
	   doesn't push the h2 off-screen */
	.discover-section-head { flex-wrap: wrap; gap: 6px; }
	.discover-section-more { width: 100%; justify-content: flex-start; font-size: 12px; }
	/* Stream filter chip row — match other mobile chip rows */
	.stream-filter { font-size: 12.5px; padding: 6px 11px; }
	.stream-filters { gap: 6px; padding-bottom: 4px; }
}

/* Even tighter on tiny phones — 3 buttons fit without wrap below 380px */
@media (max-width: 380px) {
	.discover-rate { width: 30px; height: 30px; font-size: 12px; }
	.discover-skip { width: 28px; height: 28px; font-size: 10px; }
	.discover-card-actions { gap: 4px; }
	.discover-card-pct { right: 40px; }
}

/* =============================================================
   V6.8 patch 17 — Hidden-items tab + persistent skip surface
   ============================================================= */

/* Small numeric badge next to "Hidden" tab label */
.discover-tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	padding: 0 6px;
	height: 18px;
	margin-left: 4px;
	border-radius: 999px;
	background: rgba(124, 58, 237, 0.22);
	border: 1px solid rgba(124, 58, 237, 0.45);
	color: #d8c8ff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}
.discover-tab.active .discover-tab-count {
	background: rgba(255,255,255,0.16);
	border-color: rgba(255,255,255,0.28);
	color: #fff;
}

/* Hidden tab — cards rendered with a "Show again" CTA in the foot */
.discover-card.discover-card-hidden {
	opacity: 0.78;
	border-color: rgba(255,255,255,0.08);
}
.discover-card.discover-card-hidden:hover {
	opacity: 1;
}
.discover-card.discover-card-hidden .discover-card-prompt {
	color: var(--text-secondary, #aaa);
}
.discover-card.discover-card-hidden .discover-card-prompt i {
	margin-right: 4px;
}

/* Show-again button — full-width pill, not a circle, since it replaces
   the up/down/skip cluster entirely. */
.discover-unhide {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid rgba(124, 58, 237, 0.45);
	background: rgba(124, 58, 237, 0.16);
	color: #d8c8ff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
}
.discover-unhide:hover {
	background: rgba(124, 58, 237, 0.32);
	border-color: rgba(124, 58, 237, 0.7);
	color: #fff;
}
.discover-unhide:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Hidden-tab grid layout matches discover-stream */
.discover-stream-hidden {
	/* No size override — just a hook so future per-tab tweaks don't bleed. */
}

@media (max-width: 640px) {
	.discover-tab-count { min-width: 16px; height: 16px; font-size: 10px; padding: 0 5px; }
	.discover-unhide { font-size: 12px; padding: 7px 12px; }
}

/* =============================================================
   V6.8 patch 18 — Connect heading + persistent scrollbar +
   priv-aware avatar / profile-link suppression on friends.php
   ============================================================= */

/* friends.php top heading — match the discover-bar / connect-strip pattern */
.connect-page-head {
	margin: 14px 0 18px;
	padding: 16px 20px;
	background: linear-gradient(180deg, rgba(124,58,237,0.10), rgba(124,58,237,0.02));
	border: 1px solid var(--border, rgba(255,255,255,0.10));
	border-radius: 16px;
}
.connect-page-head .connect-strip-head {
	margin-bottom: 0;
}
.connect-page-head .connect-strip-title {
	font-size: 1.4rem;
	margin: 0 0 4px;
}
.connect-page-head .connect-strip-sub {
	font-size: .88rem;
	color: var(--text-secondary, rgba(255,255,255,0.65));
}

@media (max-width: 600px) {
	.connect-page-head { padding: 14px 16px; border-radius: 14px; }
	.connect-page-head .connect-strip-title { font-size: 1.18rem; }
	.connect-page-head .connect-strip-sub { font-size: .8rem; }
}

/* Hidden-user avatar treatment on legacy friends.php cards too */
.card .avatar-hidden img,
.card a.avatar-hidden img {
	filter: grayscale(0.4);
	opacity: 0.85;
}

/* =============================================================
   V6.8 patch 19 — Connect heading unification (matches other
   discover-section headings) + horizontal action chips on
   friends.php cards.
   ============================================================= */

/* Connect tab on discover.php now uses .discover-section markup like every
   other category. Drop the surrounding purple-tinted card box and let the
   .discover-section-head h2 + sub-text speak for itself, identical to
   Movies / TV / Music / Travel / Local. */
.connect-section {
	/* nothing — inherits .discover-section spacing. */
}
.connect-section .connect-row {
	margin-top: 18px;
}
.connect-section .connect-row + .connect-row {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid rgba(124,58,237,0.18);
}
.connect-section .connect-tab-foot {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid rgba(124,58,237,0.18);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

/* Horizontal action-chip layout for friends.php cards (and anywhere else
   with enough width for chips to sit side-by-side). */
.connect-tile-actions-row {
	flex-direction: row !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 8px;
	padding: 0 6px 6px;
}
.connect-tile-actions-row .connect-tile-act {
	flex: 1 1 auto;
	min-width: 0;
	padding: 7px 10px;
	font-size: 12px;
}

/* Friends.php legacy `.card.jumpa` cells now host chip actions. Make sure
   the chip text inherits the dark/light theme correctly and isn't crushed
   by Bootstrap's text-center utilities. */
.card.jumpa .connect-tile-actions-row {
	justify-content: center;
}
@media (max-width: 480px) {
	.connect-tile-actions-row .connect-tile-act {
		flex: 1 1 100%;
		font-size: 12px;
	}
}

/* =============================================================
   V6.8 patch 20 — friends.php sub-page chrome + grid tile
   Wraps the legacy Bootstrap layout in the same .discover-wrap /
   .discover-bar / .discover-tabs chrome used by movies.php, tv.php,
   etc. (via subpage.php). Cards become full-width connect-tiles
   that fit the .discover-stream auto-fill grid.
   ============================================================= */

/* Stream grid for friends.php — same auto-fill behaviour as the rest
   of the discover sub-pages, but tuned for the people-tile aspect ratio
   (taller minimum so name + 3 chips don't crowd). */
.connect-stream {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	margin-top: 16px;
}
@media (min-width: 1100px) {
	/* V6.8 patch 29 — fill the wider container instead of capping at 280px. */
	.connect-stream { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* Connect-tile in grid mode — overrides the horizontal-scroll
   defaults (fixed 200px width, scroll-snap) so it can fill a grid cell. */
.connect-tile-grid {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	scroll-snap-align: none;
}
.connect-tile-grid .connect-tile-top {
	gap: 8px;
}
.connect-tile-grid .connect-tile-avatar img {
	width: 64px;
	height: 64px;
}
.connect-tile-grid .connect-tile-name .hub-loc {
	display: inline;
	font-weight: 400;
	color: var(--text-secondary, rgba(255,255,255,0.6));
	font-size: .78rem;
}
.connect-tile-grid .connect-tile-name {
	white-space: normal;        /* allow wrap on grid card */
	overflow: visible;
	text-overflow: clip;
	line-height: 1.3;
}
.connect-tile-meta {
	font-size: .72rem;
	color: var(--text-muted, rgba(255,255,255,0.5));
	letter-spacing: .03em;
}

/* Friends.php legacy filter rows — keep the existing form markup but
   reshape it visually so it sits inside the discover-wrap without
   colliding with the new chrome. */
.discover-wrap .row.box2 {
	background: rgba(124,58,237,0.04);
	border: 1px solid rgba(124,58,237,0.18);
	border-radius: 14px;
	margin: 12px 0 18px !important;
	padding: 14px 12px !important;
}
.discover-wrap .custom-select.purplesel {
	border-color: var(--purple) !important;
}
.discover-wrap .box .input {
	max-width: 480px;
}

@media (max-width: 600px) {
	.connect-stream { grid-template-columns: 1fr 1fr; gap: 12px; }
	.connect-tile-grid .connect-tile-avatar img { width: 56px; height: 56px; }
}
@media (max-width: 380px) {
	.connect-stream { grid-template-columns: 1fr; }
}

/* =============================================================
   V6.8 patch 21 — Connect chip parity, smaller meta, more spacing,
   "Discover" branding on sub-pages, glass behind Connect hub.
   ============================================================= */

/* (#1) Follow chip styling parity. The default `.connect-tile-act`
   colored anchors as purple (via the `.wrapper a` killer rule) but
   buttons stayed white — making Follow look mismatched next to
   Profile/Message in light AND dark mode. Force purple text + purple
   icon on every chip in the default state so all three look identical;
   the .connect-tile-following modifier still wins for the active state.
   Specificity is bumped (.connect-tile-actions descendant) to beat the
   .wrapper a !important killer. */
.connect-tile-actions .connect-tile-act,
.connect-tile-actions-row .connect-tile-act {
	color: var(--purple) !important;
	background: rgba(124,58,237,0.06);
	border-color: rgba(124,58,237,0.22);
}
.connect-tile-actions .connect-tile-act i,
.connect-tile-actions-row .connect-tile-act i {
	color: var(--purple) !important;
}
.connect-tile-actions .connect-tile-act:hover,
.connect-tile-actions-row .connect-tile-act:hover {
	color: #fff !important;
	background: rgba(124,58,237,0.22);
	border-color: rgba(124,58,237,0.55);
}
.connect-tile-actions .connect-tile-act:hover i,
.connect-tile-actions-row .connect-tile-act:hover i {
	color: #fff !important;
}
/* Active "Following" — keep distinct: filled purple chip, light text. */
.connect-tile-actions .connect-tile-act.connect-tile-following,
.connect-tile-actions-row .connect-tile-act.connect-tile-following {
	color: #fff !important;
	background: var(--purple);
	border-color: var(--purple);
}
.connect-tile-actions .connect-tile-act.connect-tile-following i,
.connect-tile-actions-row .connect-tile-act.connect-tile-following i {
	color: #fff !important;
}
.connect-tile-actions .connect-tile-act.connect-tile-following:hover,
.connect-tile-actions-row .connect-tile-act.connect-tile-following:hover {
	background: #6d28d9; /* slightly darker purple */
	border-color: #6d28d9;
}
/* Light-mode tweak — soften the purple-on-white default a hair so chips
   read as outline rather than solid. */
html.light-mode .connect-tile-actions .connect-tile-act,
html.light-mode .connect-tile-actions-row .connect-tile-act {
	background: rgba(124,58,237,0.05);
	border-color: rgba(124,58,237,0.28);
}

/* (#2) Smaller "Based on N answers" meta line. Was .72rem and looked
   chunky on light mode where it competed with the name. Shrink + lower
   contrast so it reads as a footnote. Spacing pulled tighter against
   the pct chip. Applies on both surfaces (discover hub + friends.php). */
.connect-tile .connect-tile-meta {
	font-size: 11px;
	line-height: 1.3;
	margin-top: 4px;
	color: var(--text-secondary, rgba(255,255,255,0.55));
	letter-spacing: 0;
	font-weight: 500;
	opacity: 0.85;
}
html.light-mode .connect-tile .connect-tile-meta {
	color: rgba(0,0,0,0.55);
}

/* (#3) More breathing room between Connect cards on sub-pages. The
   16px gap looked cramped/unfinished. Bump to 22px and add bottom
   padding so the last row doesn't sit flush against the pagination. */
.connect-stream {
	gap: 22px;
	padding-bottom: 8px;
}
@media (min-width: 1100px) {
	.connect-stream { gap: 24px; }
}
@media (max-width: 600px) {
	.connect-stream { gap: 14px; }
}
/* Generic discover sub-page streams (movies/tv/music/travel/local) also
   benefit from a hair more space between cards. */
.discover-stream { gap: 22px; }
@media (min-width: 1100px) {
	.discover-stream { gap: 24px; }
}
@media (max-width: 600px) {
	.discover-stream { gap: 14px; }
}

/* (#5) Glass card behind the discover.php Connect hub. The .connect-section
   was sitting on the raw page background which made the heading + tile rows
   feel ungrounded. Wrap it in a soft purple-tinted glass surface that
   matches subpage.php's .row.box2 filter card aesthetic. */
.discover-section.connect-section {
	background:
		linear-gradient(135deg, rgba(124,58,237,0.06) 0%, rgba(244,63,94,0.04) 50%, rgba(6,182,212,0.04) 100%),
		var(--surface, rgba(255,255,255,0.02));
	border: 1px solid var(--border, rgba(255,255,255,0.06));
	border-radius: 18px;
	padding: 18px 18px 22px;
	margin-top: 18px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 8px 24px -16px rgba(0,0,0,0.5);
}
.discover-section.connect-section .discover-section-head {
	margin-bottom: 4px;
}
.discover-section.connect-section .connect-row-head {
	color: var(--text-secondary, rgba(255,255,255,0.6));
	letter-spacing: 0.06em;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 600;
}
@media (max-width: 600px) {
	.discover-section.connect-section { padding: 14px 12px 16px; border-radius: 14px; }
}
html.light-mode .discover-section.connect-section {
	background:
		linear-gradient(135deg, rgba(124,58,237,0.05) 0%, rgba(244,63,94,0.03) 50%, rgba(6,182,212,0.03) 100%),
		rgba(255,255,255,0.7);
	border-color: rgba(124,58,237,0.14);
}

/* (#4) "Discover" branding in the sub-page top bar. The category label
   was being shown twice — once in the header bar AND again in the
   .discover-section-head h2 right below. The bar now reads
   "Discover" + cat icon (set by the PHP). Style tweak: keep the icon
   accent but tighten the spacing to feel less repetitive. */
.discover-bar .discover-bar-title { letter-spacing: -0.01em; }

/* ==========================================================
   V6.8 patch 38 — discover/subpage card fixes
   1) titles never truncated
   2) action buttons centred (incl. new follow on social cards)
   3) "You [coloured-thumb] this" rated prompt
   4) (PHP-side) skip duplicate-of-meta blurbs
   5) mobile fixes — pct/save no-overlap + smaller music tile
   6) full-poster movies/tv on subpage (only crop on mixed stream)
   ========================================================== */

/* (1) — never clamp the card title; let the full name show. */
.discover-card-title {
	display: block !important;
	-webkit-line-clamp: unset !important;
	-webkit-box-orient: unset !important;
	overflow: visible !important;
}
.discover-card-social-title {
	display: block !important;
	-webkit-line-clamp: unset !important;
	-webkit-box-orient: unset !important;
	overflow: visible !important;
	white-space: normal;
}

/* (2) — center the actions row across all cards. */
.discover-card-actions {
	justify-content: center !important;
}

/* (2) — follow button on social cards is icon-only and matches the
   .discover-rate footprint so the four buttons read as a centred row. */
.discover-card-actions .discover-follow {
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--bg-raised);
	color: var(--text-secondary);
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: all 0.2s var(--ease);
	font-size: 14px;
	flex-shrink: 0;
}
.discover-card-actions .discover-follow:not(:disabled):hover {
	transform: scale(1.07);
	background: rgba(124,58,237,0.18);
	color: var(--purple);
	border-color: var(--purple);
}
.discover-card-actions .discover-follow.connect-tile-following {
	background: var(--purple);
	color: #fff;
	border-color: var(--purple);
	box-shadow: 0 0 0 4px rgba(124,58,237,0.15);
}
.discover-card-actions .discover-follow.connect-tile-following:hover {
	background: var(--purple);
	color: #fff;
}

/* (3) — coloured-thumb verb in the rated prompt. */
.discover-card-prompt {
	text-align: center;
}
.discover-prompt-icon {
	font-size: 14px;
	vertical-align: -1px;
	margin: 0 3px;
}
.discover-prompt-icon.up   { color: var(--green); }
.discover-prompt-icon.down { color: var(--coral); }

/* (6) — Subpages and single-cat discover tabs (no [data-mixed]) get the
   full poster aspect for movies/tv. The mixed stream keeps the short
   16/10 banner crop with hover unfurl. */
.discover-stream:not([data-mixed]) .discover-card-item[data-cat="movies"] .discover-card-media,
.discover-stream:not([data-mixed]) .discover-card-item[data-cat="tv"]     .discover-card-media {
	aspect-ratio: 2 / 3;
	max-height: none;
	transition: none;
}
.discover-stream:not([data-mixed]) .discover-card-item[data-cat="movies"] .discover-card-media img,
.discover-stream:not([data-mixed]) .discover-card-item[data-cat="tv"]     .discover-card-media img {
	object-fit: cover;
}
/* Disable the hover-unfurl on non-mixed grids since the poster is already
   full size — keep it for the discover stream. */
.discover-stream:not([data-mixed]) .discover-card-item[data-cat="movies"]:hover .discover-card-media,
.discover-stream:not([data-mixed]) .discover-card-item[data-cat="tv"]:hover     .discover-card-media {
	aspect-ratio: 2 / 3;
	max-height: none;
}
.discover-stream:not([data-mixed]) .discover-card-item[data-cat="movies"]:hover .discover-card-media img,
.discover-stream:not([data-mixed]) .discover-card-item[data-cat="tv"]:hover     .discover-card-media img {
	object-fit: cover;
}

/* (5) — mobile fixes for discover/subpage cards. */
@media (max-width: 600px) {
	/* Music's square 1:1 was eating the entire viewport on mobile.
	   Cap height so cards stay scannable without having to scroll
	   per card. */
	.discover-card-item[data-cat="music"] .discover-card-media {
		aspect-ratio: 1 / 1;
		max-height: 140px;
	}
	/* Hard-stop the pct/save overlap: shrink the chip on mobile and
	   force the save offset with high specificity so any later rule
	   can't undo it. */
	.discover-card-pct {
		font-size: 10px;
		padding: 3px 7px;
		max-width: 78px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.discover-card-item .discover-card-media .discover-card-pct + .discover-card-save {
		right: 96px !important;
	}
	.discover-card-save {
		z-index: 5;
	}
	/* Tighten the action row spacing so 4 centred buttons fit on the
	   narrowest phones without wrapping. */
	.discover-card-actions {
		gap: 6px;
		flex-wrap: wrap;
	}
	/* Reduce body padding so we get more room for the title. */
	.discover-card-body {
		padding: 12px 12px 14px;
	}
	/* On the discover stream, even mixed mode, keep the movies/tv crop
	   short so the grid scrolls fast — but make sure the hover unfurl
	   doesn't fire on touch (handled by :hover requiring a pointer). */
}

/* ==========================================================
   V6.8 patch 39 — site-wide UX audit fixes
   1) Messages: mobile pane-switching (list ↔ thread) so the long
      conversation list stops dominating phone screens, and a back
      button on the thread head returns to the list.
   2) Messages: stronger active-tab contrast on phones so users can
      actually see whether they're on Inbox / Sent / Help.
   3) Top nav: visual indicator of the current page so users always
      know which section they're on.
   4) Theme toggle: aria-pressed surface, no behavioural change.
   ========================================================== */

/* (1) — Messages mobile pane-switch. Desktop: both panes side-by-side
   (unchanged). Phones (≤860px): show ONLY the pane that matches the
   shell's data-mobile-pane attribute. The rule has higher specificity
   than the existing 70vh cap so the list can scroll naturally. */
@media (max-width: 860px) {
	.msg-shell { gap: 0; }
	.msg-shell[data-mobile-pane="list"]   .msg-thread  { display: none; }
	.msg-shell[data-mobile-pane="thread"] .msg-sidebar { display: none; }
	.msg-shell .msg-sidebar {
		max-height: none;       /* let the list use the full screen */
		min-height: 60vh;
	}
	.msg-shell .msg-thread { min-height: 60vh; }
	.msg-thread-body {
		max-height: none !important;
		min-height: 200px !important;
	}
}

/* (1) — Back-arrow on the thread header, mobile only. */
.msg-thread-back {
	display: none;
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--bg-raised);
	color: var(--text-secondary);
	cursor: pointer;
	margin-right: 4px;
	flex-shrink: 0;
	transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.msg-thread-back:hover {
	background: rgba(124,58,237,0.18);
	color: var(--purple);
	transform: translateX(-1px);
}
@media (max-width: 860px) {
	.msg-thread-back { display: inline-flex; align-items: center; justify-content: center; }
}

/* (2) — Stronger active-tab styling on phones. The default gradient
   pill can wash out on small screens; bump font weight, add a brighter
   ring, and dim the inactive tabs more so the contrast is unmistakable. */
@media (max-width: 600px) {
	.msg-side-tabs button {
		font-size: 13px;
		padding: 9px 8px;
	}
	.msg-side-tabs button:not(.is-active) {
		color: var(--text-secondary);
		opacity: 0.65;
	}
	.msg-side-tabs button.is-active {
		font-weight: 700;
		box-shadow: 0 6px 18px -8px rgba(124,58,237,0.85),
		            0 0 0 2px rgba(255,255,255,0.06) inset;
	}
}

/* (3) — Top-nav active-page indicator. Adds a subtle purple wash and
   underline to the link representing the current section so users
   always know where they are without reading the URL. */
.navbar-nav .nav-link.user.is-active {
	color: var(--purple) !important;
	background: rgba(124,58,237,0.10);
	border-radius: 999px;
	position: relative;
}
.navbar-nav .nav-link.user.is-active i {
	color: var(--purple) !important;
}
@media (min-width: 992px) {
	.navbar-nav .nav-link.user.is-active::after {
		content: "";
		position: absolute;
		left: 18px; right: 18px; bottom: 6px;
		height: 2px;
		background: linear-gradient(90deg, var(--purple), #f43f5e);
		border-radius: 2px;
	}
}

/* =================================================================
   V6.8 patch 40 — site-wide UX audit follow-up
   1) Skip-link for keyboard users
   2) :focus-visible outlines on .nav-link.user
   3) Empty-state pattern (friends.php, messages sidebar)
   4) Sidebar long-name truncation already present; ensure flex min-width
   5) Light-mode overrides for hard-coded surfaces (.msg-shell,
      .msg-sidebar, .msg-thread, .msg-side-tabs, .msg-thread-body,
      .connect-tile, .subpage-pill, hub-stat) so every dark surface
      flips cleanly when the user picks light mode or their OS prefers it.
   ================================================================= */

/* (1) Skip-link
   V6.8 patch 41 — bullet-proof visually-hidden pattern. The previous
   `left: -9999px` approach left the link visible on register.php in
   some browser/viewport combos because positioning context could be
   defeated by ancestor styles. clip + clip-path + 1px size is the
   WAI-ARIA recommended pattern and renders nothing until :focus. */
.skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	z-index: 100000;
}
.skip-link:focus {
	position: fixed;
	width: auto;
	height: auto;
	padding: 10px 16px;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
	left: 12px;
	top: 12px;
	background: var(--purple, #7c3aed);
	color: #fff;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 700;
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* (2) Keyboard focus rings */
.navbar-nav .nav-link.user:focus-visible,
.theme-toggle:focus-visible,
.theme-toggle-mobile:focus-visible,
.navbar-toggler:focus-visible,
.msg-thread-back:focus-visible,
.msg-side-tabs button:focus-visible {
	outline: 2px solid var(--purple, #7c3aed);
	outline-offset: 2px;
	border-radius: 8px;
}

/* (3) Generic empty-state pattern */
.empty-state {
	width: 100%;
	max-width: 540px;
	margin: 24px auto 32px;
	padding: 28px 24px;
	text-align: center;
	background: rgba(124, 58, 237, 0.06);
	border: 1px dashed rgba(124, 58, 237, 0.35);
	border-radius: 14px;
	color: var(--text-primary);
}
.empty-state i { color: var(--purple, #7c3aed); margin-bottom: 12px; opacity: 0.85; }
.empty-state h3 { margin: 6px 0 6px; font-size: 1.2rem; font-weight: 700; color: var(--text-primary); }
.empty-state p  { margin: 0 0 14px; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.4; }
.empty-state-btn,
.empty-state-btn-secondary {
	display: inline-block;
	padding: 9px 18px;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none !important;
	margin: 4px 4px 0;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.empty-state-btn {
	background: var(--purple, #7c3aed);
	color: #fff !important;
	box-shadow: 0 6px 18px -8px rgba(124,58,237,0.85);
}
.empty-state-btn:hover { transform: translateY(-1px); }
.empty-state-btn-secondary {
	background: transparent;
	border: 1px solid var(--border, rgba(255,255,255,0.18));
	color: var(--text-primary) !important;
}
.empty-state-btn-secondary:hover { background: rgba(124,58,237,0.10); }
html.light-mode .empty-state { background: rgba(124, 58, 237, 0.05); border-color: rgba(124, 58, 237, 0.30); }
html.light-mode .empty-state-btn-secondary { border-color: rgba(0,0,0,0.14); }

/* Messages sidebar empty CTA — uses .msg-side-empty wrapper */
.msg-side-empty {
	padding: 28px 18px;
	text-align: center;
	color: var(--text-secondary);
}
.msg-side-empty i { color: var(--purple, #7c3aed); margin-bottom: 10px; opacity: 0.85; }
.msg-side-empty h4 { margin: 4px 0 6px; font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.msg-side-empty p { margin: 0 0 12px; font-size: 0.85rem; line-height: 1.4; }
.msg-side-empty-btn,
.msg-side-empty-btn-secondary {
	display: block;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none !important;
	margin: 6px 0 0;
	transition: transform 0.15s ease, background 0.2s ease;
}
.msg-side-empty-btn {
	background: var(--purple, #7c3aed);
	color: #fff !important;
	box-shadow: 0 6px 14px -6px rgba(124,58,237,0.75);
}
.msg-side-empty-btn:hover { transform: translateY(-1px); }
.msg-side-empty-btn-secondary {
	color: var(--text-secondary) !important;
	background: transparent;
}
.msg-side-empty-btn-secondary:hover { background: rgba(124,58,237,0.08); color: var(--text-primary) !important; }

/* (4) Defensive truncation parent — prevent flex-children from forcing overflow */
.msg-side-card { min-width: 0; }
.msg-side-card-body { min-width: 0; flex: 1 1 auto; }
.msg-side-card-name { max-width: 100%; }

/* (5) Light-mode parity for messages chrome (lots of inline rgba(255,255,255,...) surfaces) */
html.light-mode .msg-shell,
html.light-mode .msg-sidebar,
html.light-mode .msg-thread,
html.light-mode .msg-thread-body,
html.light-mode .msg-thread-head,
html.light-mode .msg-side-tabs,
html.light-mode .msg-side-card {
	background: #fff;
	color: var(--text-primary);
	border-color: rgba(0,0,0,0.08);
}
html.light-mode .msg-shell { background: #faf9ff; }
html.light-mode .msg-side-card:hover { background: rgba(124,58,237,0.06); }
html.light-mode .msg-side-card.is-active { background: rgba(124,58,237,0.12); }
html.light-mode .msg-side-tabs button { color: #4a3f6b; }
html.light-mode .msg-side-tabs button:not(.is-active) { color: #6b5e88; }
html.light-mode .msg-side-tabs button.is-active { color: var(--purple); background: rgba(124,58,237,0.12); }
html.light-mode .msg-thread-back { background: #fff; border-color: rgba(0,0,0,0.10); color: var(--text-secondary); }
html.light-mode .msg-thread-back:hover { background: rgba(124,58,237,0.08); color: var(--purple); }

/* Light-mode parity for connect tiles + subpage pills (catch hard-coded rgba whites) */
html.light-mode .connect-tile,
html.light-mode .subpage-pill {
	background: #fff;
	border-color: rgba(0,0,0,0.10);
	color: var(--text-primary);
}
html.light-mode .subpage-pill:hover { background: rgba(124,58,237,0.06); border-color: rgba(124,58,237,0.30); }

/* Light-mode parity for the Discover hub stats pill (rgba bg) */
html.light-mode .discover-bar-stat,
html.light-mode .hub-stat {
	background: #fff;
	border-color: rgba(0,0,0,0.08);
	color: var(--text-primary);
}

/* Light-mode parity for the subpage search input (rgba surface) */
html.light-mode .subpage-toolbar .subpage-search input[type="text"] {
	background: #fff;
	border-color: rgba(0,0,0,0.12);
	color: var(--text-primary);
}

/* =================================================================
   V6.8 patch 41 — Auth pages (login / register / forgot) redesigned
   to match the Account page (.acct-card) language. The old screens
   had inline 80%-wide centered <div class="wrapper"> with a giant
   slider hero and ad-hoc Bootstrap input-groups. New shell:

	   .auth-wrap (≤ .discover-wrap)
	     └ .discover-bar (page title)
	     └ .auth-shell  (centered, max 720px on login/forgot;
	                     max 920px on register)
	         └ .auth-card (mirrors .acct-card visual)
	            └ .auth-card-head (h2 + sub-paragraph)
	            └ .auth-fields (column of .auth-field rows)
	            └ .auth-actions (right-aligned button row)
	     └ .auth-meta  (links to forgot / register / login)

   Every input is a pill (.auth-input), labels live above, errors
   live below, and the submit button reuses the .acct-save gradient.
   ================================================================= */

.auth-wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: 12px 16px 56px;
}
/* V6.8 patch 46 — auth-shell now spans the full .auth-wrap so the auth-card
   and auth-meta render at the same width as the .discover-bar heading. */
.auth-shell {
	max-width: none;
	margin: 0 auto;
}
.auth-shell.is-wide {
	max-width: none;
}
.auth-card {
	background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(244,63,94,0.04), rgba(6,182,212,0.04)), var(--surface);
	border: 1px solid var(--border);
	border-radius: 18px;
	padding: 26px clamp(18px, 3vw, 30px) 28px;
	box-shadow: 0 8px 24px -16px rgba(0,0,0,0.5);
	text-align: left;
	margin-bottom: 18px;
}
.auth-card-head { margin: 0 0 6px; }
.auth-card-head h2 {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 4px;
	letter-spacing: -0.01em;
	display: inline-flex; align-items: center; gap: 8px;
}
.auth-card-head h2 i { color: var(--purple); }
.auth-card-sub {
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 18px;
}
.auth-fields { display: flex; flex-direction: column; gap: 14px; }
.auth-field  { display: flex; flex-direction: column; gap: 6px; }
.auth-field-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
@media (min-width: 640px) {
	.auth-field-row.cols-2 { grid-template-columns: 1fr 1fr; }
}
.auth-field-label {
	font-size: 13px; font-weight: 600;
	color: var(--text-secondary);
	letter-spacing: 0.02em;
	display: inline-flex; align-items: center; gap: 6px;
}
.auth-field-label i { color: var(--purple); width: 16px; text-align: center; }
.auth-input {
	width: 100%;
	padding: 12px 16px;
	border-radius: 999px;
	border: 1px solid var(--border, rgba(255,255,255,0.12));
	background: var(--surface, rgba(255,255,255,0.04));
	color: var(--text-primary);
	font-size: 14px;
	font-family: inherit;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
	box-sizing: border-box;
}
.auth-input:focus {
	border-color: var(--purple);
	box-shadow: 0 0 0 3px rgba(124,58,237,0.18);
}
.auth-input.is-invalid { border-color: #f43f5e; }
html.light-mode .auth-input {
	background: #fff;
	border-color: rgba(0,0,0,0.12);
	color: var(--text-primary, #1a1330);
}
.auth-field-err {
	color: #f43f5e;
	font-size: 12px;
	margin: 2px 4px 0;
	display: block;
}
.auth-field-err a { color: #f43f5e; text-decoration: underline; }

/* Decade slider + range styling (register) */
.auth-decade-row { display: flex; align-items: baseline; gap: 14px; margin: 4px 4px 8px; }
.auth-decade {
	font-size: 24px;
	font-weight: 800;
	color: var(--purple);
	font-family: 'Space Grotesk', sans-serif;
}
.auth-decade-hint { color: var(--text-secondary); font-size: 12px; }
.auth-card input[type=range].auth-range {
	-webkit-appearance: none; appearance: none;
	width: 100%; height: 6px; border-radius: 999px;
	background: linear-gradient(to right, rgba(124,58,237,0.7), rgba(244,63,94,0.5));
	outline: none; margin: 6px 0 4px;
}
.auth-card input[type=range].auth-range::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--purple); border: 3px solid #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,0.4);
	cursor: pointer;
}
.auth-card input[type=range].auth-range::-moz-range-thumb {
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--purple); border: 3px solid #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,0.4);
	cursor: pointer;
}

/* Privacy radio cards (register) */
.auth-priv { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 700px) { .auth-priv { grid-template-columns: 1fr 1fr; } }
.auth-priv label.auth-priv-opt {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 14px 16px; border-radius: 14px;
	border: 1px solid var(--border, rgba(255,255,255,0.12));
	background: rgba(124,58,237,0.06);
	cursor: pointer; margin: 0;
	transition: border-color .15s ease, background-color .15s ease;
}
.auth-priv label.auth-priv-opt:hover { border-color: var(--purple); }
.auth-priv input[type=radio] { accent-color: var(--purple); margin-top: 3px; }
.auth-priv-opt-title { display:block; font-weight: 700; color: var(--text-primary); font-size: 14px; }
.auth-priv-opt-desc  { display:block; font-size: 12px; color: var(--text-secondary); margin-top: 4px; }

/* Interest pills (register) */
.auth-interests {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 8px;
}
.auth-interests label.auth-interest {
	display: flex; align-items: center; gap: 8px;
	padding: 10px 14px; border-radius: 999px;
	border: 1px solid var(--border, rgba(255,255,255,0.12));
	background: rgba(124,58,237,0.06);
	color: var(--text-primary);
	cursor: pointer; margin: 0; font-size: 13px;
	font-weight: 600;
	transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.auth-interests label.auth-interest:hover { border-color: var(--purple); transform: translateY(-1px); }
.auth-interests label.auth-interest.is-active,
.auth-interests label.auth-interest.active {
	background: linear-gradient(135deg, rgba(124,58,237,0.22), rgba(244,63,94,0.16));
	border-color: var(--purple);
	color: var(--text-primary);
}
.auth-interests label.auth-interest input { display: none; }
.auth-interests label.auth-interest i { color: var(--purple); }
.auth-interests label.auth-interest.is-active i,
.auth-interests label.auth-interest.active i { color: var(--purple); }

/* Avatar grid (register) */
.auth-avatars {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
	gap: 8px;
	max-height: 280px;
	overflow-y: auto;
	padding: 12px;
	border-radius: 14px;
	background: rgba(255,255,255,0.03);
	border: 1px solid var(--border, rgba(255,255,255,0.10));
	scrollbar-width: thin;
	scrollbar-color: rgba(124,58,237,0.5) transparent;
}
.auth-avatars::-webkit-scrollbar { width: 8px; }
.auth-avatars::-webkit-scrollbar-thumb { background: rgba(124,58,237,0.5); border-radius: 999px; }
.auth-avatars label.auth-avatar-opt {
	cursor: pointer;
	border-radius: 12px;
	padding: 4px;
	border: 2px solid transparent;
	transition: border-color .15s ease, transform .15s ease, background-color .15s ease;
	display: block;
	margin: 0;
}
.auth-avatars label.auth-avatar-opt:hover { transform: scale(1.05); border-color: rgba(124,58,237,0.5); }
.auth-avatars label.auth-avatar-opt.is-active {
	border-color: var(--purple);
	background: rgba(124,58,237,0.18);
	box-shadow: 0 0 0 1px rgba(124,58,237,0.4);
}
.auth-avatars img { width: 100%; aspect-ratio: 1/1; display: block; border-radius: 8px; }
.auth-avatars input[type=radio] { display: none; }

/* Action buttons */
.auth-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding-top: 6px;
	flex-wrap: wrap;
}
.auth-btn-primary {
	background: linear-gradient(135deg, var(--purple), #f43f5e) !important;
	color: #fff !important;
	border: none !important;
	padding: 12px 30px !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	cursor: pointer;
	box-shadow: 0 6px 18px -8px rgba(124,58,237,0.6);
	font-size: 14px;
	display: inline-flex; align-items: center; gap: 8px;
	font-family: inherit;
	transition: transform .12s ease;
}
.auth-btn-primary:hover { transform: translateY(-1px); color: #fff !important; }
.auth-btn-primary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Inline alerts (logout banner, login error, code-not-matched) */
.auth-alert {
	border-radius: 14px;
	padding: 14px 18px;
	margin-bottom: 18px;
	font-size: 14px;
	line-height: 1.5;
	display: flex; align-items: flex-start; gap: 10px;
	border: 1px solid transparent;
}
.auth-alert i { margin-top: 2px; flex-shrink: 0; }
.auth-alert a { font-weight: 700; text-decoration: underline; }
.auth-alert.is-info {
	background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(6,182,212,0.10));
	border-color: rgba(124,58,237,0.35);
	color: var(--text-primary);
}
.auth-alert.is-info i, .auth-alert.is-info a { color: var(--purple); }
.auth-alert.is-warn {
	background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(244,63,94,0.10));
	border-color: rgba(245,158,11,0.45);
	color: var(--text-primary);
}
.auth-alert.is-warn i { color: #f59e0b; }
.auth-alert.is-warn a { color: var(--text-primary); }
.auth-alert.is-error {
	background: linear-gradient(135deg, rgba(244,63,94,0.18), rgba(124,58,237,0.10));
	border-color: rgba(244,63,94,0.45);
	color: var(--text-primary);
}
.auth-alert.is-error i, .auth-alert.is-error a { color: #f43f5e; }
.auth-alert.is-success {
	background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(124,58,237,0.10));
	border-color: rgba(34,197,94,0.45);
	color: var(--text-primary);
}
.auth-alert.is-success i { color: #22c55e; }

/* Footer meta links under the card */
.auth-meta {
	text-align: center;
	color: var(--text-secondary);
	font-size: 14px;
	margin-top: 12px;
	display: flex; flex-direction: column; gap: 8px;
	align-items: center;
}
.auth-meta a {
	color: var(--purple);
	font-weight: 600;
	text-decoration: none;
}
.auth-meta a:hover { text-decoration: underline; }
.auth-meta-row { display: inline-flex; align-items: center; gap: 8px; }
.auth-meta-row i { color: var(--purple); }

/* Terms reminder block on register */
.auth-terms-note {
	font-size: 12px;
	color: var(--text-secondary);
	margin-top: 14px;
	line-height: 1.5;
	text-align: center;
}
.auth-terms-note a { color: var(--purple); font-weight: 600; }

/* Light-mode parity for auth surfaces */
html.light-mode .auth-card {
	background: #fff;
	border-color: rgba(0,0,0,0.08);
	box-shadow: 0 8px 24px -16px rgba(0,0,0,0.15);
}
html.light-mode .auth-priv label.auth-priv-opt {
	background: rgba(124,58,237,0.05);
	border-color: rgba(0,0,0,0.10);
}
html.light-mode .auth-interests label.auth-interest {
	background: rgba(124,58,237,0.05);
	border-color: rgba(0,0,0,0.10);
	color: var(--text-primary);
}
html.light-mode .auth-avatars {
	background: rgba(124,58,237,0.04);
	border-color: rgba(0,0,0,0.10);
}
html.light-mode .auth-alert.is-info,
html.light-mode .auth-alert.is-warn,
html.light-mode .auth-alert.is-error,
html.light-mode .auth-alert.is-success { color: var(--text-primary, #1a1330); }

/* Hide the legacy hero slider on the auth pages — we now use .discover-bar */
.auth-wrap .slider-area,
body.auth-page .slider-area { display: none !important; }

/* =================================================================
   V6.8 patch 42 (revised in patch 51) — Cat-tag overflow fix
   The two media-corner controls (.discover-card-tag at top-left and
   .discover-card-pct at top-right) are absolutely positioned. When
   the badge label is long ("Destinations" for Places > travel rows),
   the tag would overrun the pct chip ("100% rec") on narrow cards.

   Original patch 42 reserved 144px assuming save+pct were both in
   the corner. V6.8 patch 47 moved save out of the corner into the
   actions row, so only pct (~70px) sits opposite the tag. The old
   144px reserve was capping the tag at ~101px on a 245px desktop
   card, slicing "Destinations" → "Destinatio".

   Patch 51 (May 2026) corrections:
     1. Reduce reserves to match the lone pct chip in the corner
        (≈80px desktop incl. safety gap; pct's right:10 + width ≤70).
     2. Switch .discover-card-tag from inline-flex to inline-block
        so text-overflow:ellipsis actually engages — flex anonymous
        text nodes block ellipsis from rendering.
     3. The icon swaps from `gap` to `margin-right` + vertical-align.
   ================================================================= */
.discover-card-tag {
	display: inline-block;
	max-width: calc(100% - 88px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	z-index: 4;
	box-sizing: border-box;
	vertical-align: top;
}
.discover-card-tag > i {
	margin-right: 5px;
	vertical-align: -1px;
}
/* No pct chip → only the card's own padding to clear. */
.discover-card-item .discover-card-media:not(:has(.discover-card-pct)) .discover-card-tag {
	max-width: calc(100% - 28px);
}
@media (max-width: 640px) {
	.discover-card-tag {
		max-width: calc(100% - 82px);
	}
	.discover-card-item .discover-card-media:not(:has(.discover-card-pct)) .discover-card-tag {
		max-width: calc(100% - 24px);
	}
	/* Tighten the pct chip too — "100% rec" on a narrow card was
	   chewing pixels the badge could otherwise have. */
	.discover-card-pct {
		max-width: 70px;
	}
}
@media (max-width: 380px) {
	.discover-card-tag {
		max-width: calc(100% - 74px);
		font-size: 9.5px;
		padding: 3px 7px;
	}
	.discover-card-pct {
		max-width: 62px;
		font-size: 9.5px;
		padding: 3px 6px;
	}
}

/* Social cards on phones: the name + "67% match" pill row could
   overlap when the name was long. Let the match pill drop to its
   own line under the name. */
@media (max-width: 640px) {
	.discover-card-social-name {
		display: flex;
		flex-wrap: wrap;
		row-gap: 4px;
		column-gap: 6px;
		align-items: center;
	}
	.discover-card-social-name .discover-match-pct {
		flex: 0 0 auto;
	}
}

/* =============================================================
   V6.8 patch 44 — Mobile audit pass.
   On phones every page was bleeding off the right edge: card grids
   running into the second column with no breathing room, the Discover
   tab strip overshooting the viewport, and the wide 1320px container
   nudging body-scroll-width past 100vw. This block adds a strict
   "nothing escapes the viewport" guard, single-column card grids
   below 480px, and a hair more breathing room around section chrome.
   ============================================================= */
@media (max-width: 640px) {
	html, body { max-width: 100vw; overflow-x: hidden; }
	main { padding-left: 0 !important; padding-right: 0 !important; }
	main > .container { padding-left: 12px !important; padding-right: 12px !important; max-width: 100vw !important; }
	.discover-wrap { padding-left: 12px; padding-right: 12px; max-width: 100vw; }

	/* Discover stream + connect stream go single column on real phones
	   so the cards have enough width for the title + thumbnail without
	   the right column getting clipped off-screen. The earlier 600px
	   minmax(160px,1fr) was making 2 cols that overshot the .discover-wrap
	   inside a 100vw container. */
	.discover-stream { grid-template-columns: 1fr !important; gap: 14px !important; }
	.connect-stream  { grid-template-columns: 1fr !important; gap: 14px !important; }

	/* Hero text shrink so the headline doesn't try to wrap into an
	   awkward third line. */
	.discover-hero { padding: 24px 18px !important; margin-bottom: 18px !important; }
	.discover-hero h1 { font-size: 24px !important; margin-bottom: 8px !important; }
	.discover-hero p { font-size: 14px !important; margin-bottom: 14px !important; }
	.discover-stats { gap: 14px !important; }
	.discover-stat { min-width: 0 !important; }
	.discover-stat strong { font-size: 22px !important; }
	.discover-stat span { font-size: 11px !important; }

	/* Section heading row — drop the "see all" link onto its own line
	   below the title instead of overflowing right when the title is
	   long ("Find your taste twins" + "More"). */
	.discover-section-head { gap: 6px !important; }
	.discover-section-head h2 { font-size: 18px !important; }
	.discover-section-more { margin-left: 0 !important; font-size: 13px !important; }

	/* Subpage toolbars (movies/tv/etc.) — keep search + filter chips
	   contained, no horizontal jitter from a single oversize select. */
	.subpage-toolbar { flex-wrap: wrap !important; }
	.subpage-toolbar form.subpage-search { width: 100% !important; flex: 1 1 100% !important; }

	/* Tables and code blocks on legacy pages (terms/privacy) often
	   forced horizontal scroll. Force them to wrap. */
	pre, code { white-space: pre-wrap !important; word-break: break-word !important; }
	.wrapper, .wrapper > * { max-width: 100%; }

	/* Connect tile in grid mode — ensure the fixed 200px tile fallback
	   never sneaks in on mobile and the avatar+name+chips column always
	   fits the cell. */
	.connect-tile-grid { width: 100% !important; min-width: 0 !important; }

	/* Profile page legacy grid — long usernames + meta lines were
	   pushing the .profilebar wider than the screen. */
	.profilebar, .profileb, .matchbar { max-width: 100% !important; }
	.profileb img { max-width: 100% !important; height: auto !important; }
}

@media (max-width: 480px) {
	/* Tighten card body type so a 360px wide tile still reads cleanly. */
	.discover-card-body { padding: 12px 12px 14px !important; gap: 6px !important; }
	.discover-card-title { font-size: 15px !important; }
	.discover-card-desc { font-size: 12.5px !important; -webkit-line-clamp: 2 !important; }

	/* Discover slim-bar stat pills — let them wrap onto two rows
	   instead of horizontal-scrolling off-screen. */
	.discover-bar { flex-wrap: wrap !important; row-gap: 6px !important; }

	/* Messages — sidebar list stays scrollable; avoid the
	   conversation header overlapping the back chevron. */
	.msg-thread-head { padding: 10px 12px !important; gap: 8px !important; }
	.msg-thread-head .msg-thread-title { font-size: 15px !important; min-width: 0 !important; }
}

/* =============================================================
   V6.8 patch 44b — Mobile audit pass, harder overflow guards.
   The first pass (44) wasn't enough on subpages (movies/places/
   editinfo). The poster cards still bled past the right edge,
   the discover-bar stats stayed on one row, and the subpage
   toolbar's min-width:220px search input pushed past 100vw.
   This block clamps everything inside main to 100% width with
   box-sizing:border-box, lets the discover-bar stats wrap at the
   wider 640px breakpoint (was 600px which the screenshots failed),
   and adds an explicit min-width:0 reset on flex children so the
   intrinsic content size doesn't expand them past the cell.
   ============================================================= */
@media (max-width: 640px) {
	/* Universal flex-child reset: stop intrinsic content from
	   blowing out flex parents. The single biggest cause of right-
	   edge clipping on the subpage browse pages. */
	main .subpage-toolbar,
	main .subpage-toolbar > *,
	main .discover-bar,
	main .discover-bar > *,
	main .discover-card,
	main .discover-card *,
	main .acct-form,
	main .acct-form > *,
	main .matchbar,
	main .profilebar,
	main .msg-shell,
	main .msg-shell > * { min-width: 0 !important; }

	/* Containers that should never exceed the screen. The bootstrap
	   .container at 390px is width:100%, but its 15px padding plus
	   our discover-wrap padding compounded — collapse the container
	   padding so we have one source of truth. */
	main > .container,
	main > .container-fluid,
	main > section > .container { padding-left: 12px !important; padding-right: 12px !important; }
	main .container,
	main .container > .wrapper { max-width: 100% !important; box-sizing: border-box !important; }
	main .discover-wrap { padding-left: 0 !important; padding-right: 0 !important; }

	/* The subpage toolbar (search + filters) had `min-width: 220px`
	   on the search form which forced the whole row past 390px.
	   On mobile, search takes the full row and filters wrap below. */
	.subpage-toolbar { gap: 8px !important; }
	.subpage-toolbar form.subpage-search,
	.subpage-toolbar .subpage-search { min-width: 0 !important; flex: 1 1 100% !important; width: 100% !important; }
	.subpage-toolbar .subpage-search input[type="text"] { min-width: 0 !important; width: 100% !important; }
	.subpage-toolbar select,
	.subpage-toolbar .subpage-filter,
	.subpage-toolbar .subpage-filter select { max-width: 100% !important; min-width: 0 !important; }

	/* Discover-bar pulls stats onto the second row so the header
	   row title doesn't push them off-screen. */
	.discover-bar { padding: 12px 14px !important; gap: 8px !important; }
	.discover-bar-stats { margin-left: 0 !important; width: 100% !important; flex-wrap: wrap !important; gap: 6px !important; }

	/* Cards: clamp every card to the grid cell width so a long
	   poster image or social-name doesn't punch out the right side. */
	.discover-card,
	.discover-card-item,
	.discover-card-social,
	.discover-card-cta { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
	.discover-card img,
	.discover-card-media,
	.discover-card-media img,
	.discover-card-social-thumb img { max-width: 100% !important; height: auto; }

	/* Account/editinfo: the interests-grid uses minmax(140px, 1fr)
	   which fits 2 columns at 390px (140+140+gap < 390) — keep that
	   but make sure every form control fills its cell instead of
	   forcing the page wider. V6.8 patch 59: exclude checkbox/radio
	   from the blanket `width:100%` rule — they need to stay at their
	   intrinsic 18px size inside .acct-priv-opt or notify-prefs +
	   editinfo's privacy/notification rows break apart with the
	   checkbox eating ~80% of the row width. */
	.acct-form input:not([type=checkbox]):not([type=radio]),
	.acct-form select,
	.acct-form textarea,
	.acct-form .acct-field { max-width: 100% !important; box-sizing: border-box !important; width: 100% !important; }
	.acct-decade-row { flex-wrap: wrap !important; gap: 6px !important; }

	/* Profile (legacy) — the matchbar showed a long username +
	   chips on one line. Wrap. */
	.matchbar { flex-wrap: wrap !important; gap: 6px !important; }

	/* Connect tile in grid mode — already targeted in 44, but the
	   tile's internal name/match row was breaking. Reset min-width. */
	.connect-tile-grid .connect-tile-meta,
	.connect-tile-grid .connect-tile-name,
	.connect-tile-grid .connect-tile-foot { min-width: 0 !important; }

	/* Messages thread: the message body was overflowing its bubble
	   when a long URL or unbroken token appeared. */
	.msg-bubble, .msg-bubble * { word-break: break-word !important; overflow-wrap: anywhere !important; }
	.msg-list, .msg-thread, .msg-shell { max-width: 100vw !important; }
}

/* ===========================================================================
   V6.8 patch 44c — CTA span override + flex fallback for discover-stream
   Root cause discovered: `.discover-card-cta { grid-column: span 2 }` plus
   the existing `@media(max-width:600px)` rule that reinforces it. When the
   grid template is collapsed to a single column, `span 2` on the CTA card
   forces the browser to create an implicit second column to honor the span,
   which then pulls all sibling cards into a 2-col layout that bleeds off
   the viewport at 390px.
   Fix:
   (1) Reset every direct child of `.discover-stream` to `grid-column: auto`
       so no card forces an implicit column.
   (2) Defensively switch the stream to `display:flex; flex-direction:column`
       on phones — no grid math, no implicit tracks, no overflow risk.
   ========================================================================== */
@media (max-width: 640px) {
	.discover-stream {
		display: flex !important;
		flex-direction: column !important;
		gap: 14px !important;
		grid-template-columns: 1fr !important;
		grid-auto-columns: auto !important;
		grid-auto-flow: row !important;
	}
	.connect-stream {
		display: flex !important;
		flex-direction: column !important;
		gap: 14px !important;
		grid-template-columns: 1fr !important;
	}
	.discover-stream > *,
	.discover-stream > .discover-card,
	.discover-stream > .discover-card-cta,
	.discover-stream > article,
	.connect-stream > *,
	.connect-stream > .connect-tile {
		grid-column: auto !important;
		grid-row: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
}

/* ===========================================================================
   V6.8 patch 47 — Action row redesign + mobile compact movies/tv +
                   light-mode interest visibility + general mobile spacing
   ------------------------------------------------------------------------
   (1) `.discover-card-actions` is now centred and the row carries the save /
       follow button alongside thumbs + hide. Save is no longer floating in
       the media corner. Order everywhere: up → down → hide → save (or
       follow on social cards).
   (2) Movies / TV cards on mobile default to a compact horizontal layout
       (small portrait thumb left, title + actions right). Hover OR
       `.is-expanded` (toggled by tap) blows the card back up to the
       full poster + multi-line title.
   (3) Selected interest pills are visible in light mode and clearer in
       dark mode.
   (4) A handful of mobile spacing tweaks for Account + Discover bar so
       things don't kiss the viewport edge.
   ========================================================================= */

/* (1) Centered actions row + save/follow as inline circular buttons -------- */
.discover-card-actions {
	justify-content: center !important;
}
/* When .discover-card-save or .discover-follow live INSIDE the actions row
   they shed their absolute / banner styling and look like a thumb. */
.discover-card-actions .discover-card-save,
.discover-card-actions .discover-follow {
	position: static !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	bottom: auto !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	border: 1px solid var(--border) !important;
	background: var(--bg-raised) !important;
	color: var(--text-secondary) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	box-shadow: none !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px !important;
	flex-shrink: 0;
	transition: all 0.18s var(--ease);
	cursor: pointer;
}
.discover-card-actions .discover-card-save:hover,
.discover-card-actions .discover-follow:hover {
	transform: scale(1.07);
	background: rgba(124,58,237,0.18) !important;
	color: var(--text-primary) !important;
	border-color: var(--purple) !important;
}
.discover-card-actions .discover-card-save.saved {
	background: var(--purple) !important;
	color: #fff !important;
	border-color: var(--purple) !important;
}
.discover-card-actions .discover-follow.connect-tile-following {
	background: var(--purple) !important;
	color: #fff !important;
	border-color: var(--purple) !important;
}
html.light-mode .discover-card-actions .discover-card-save,
html.light-mode .discover-card-actions .discover-follow {
	background: #f6f3ff !important;
	border-color: rgba(0,0,0,0.08) !important;
	color: #6b6378 !important;
}
html.light-mode .discover-card-actions .discover-card-save.saved,
html.light-mode .discover-card-actions .discover-follow.connect-tile-following {
	background: var(--purple) !important;
	color: #fff !important;
	border-color: var(--purple) !important;
}

/* (3) Interest pills — selected state must be obvious in both modes ------- */
.auth-interests label.auth-interest.is-active,
.auth-interests label.auth-interest.active,
.acct-interests label.acct-interest.is-active {
	background: linear-gradient(135deg, rgba(124,58,237,0.50), rgba(244,63,94,0.34)) !important;
	border-color: var(--purple) !important;
	color: #fff !important;
	box-shadow: 0 4px 14px -6px rgba(124,58,237,0.55);
}
.auth-interests label.auth-interest.is-active i,
.auth-interests label.auth-interest.active i,
.acct-interests label.acct-interest.is-active i {
	color: #fff !important;
}
html.light-mode .auth-interests label.auth-interest.is-active,
html.light-mode .auth-interests label.auth-interest.active,
html.light-mode .acct-interests label.acct-interest.is-active {
	background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
	border-color: #6d28d9 !important;
	color: #fff !important;
	box-shadow: 0 6px 18px -8px rgba(124,58,237,0.6);
}
html.light-mode .auth-interests label.auth-interest.is-active i,
html.light-mode .auth-interests label.auth-interest.active i,
html.light-mode .acct-interests label.acct-interest.is-active i {
	color: #fff !important;
}

/* (2) Movies / TV compact mobile layout + tap-to-expand ------------------- */
@media (max-width: 640px) {
	/* Default compact: row layout with small portrait thumb + condensed body */
	.discover-card-item[data-cat="movies"]:not(.is-expanded),
	.discover-card-item[data-cat="tv"]:not(.is-expanded) {
		flex-direction: row !important;
		align-items: stretch !important;
	}
	.discover-card-item[data-cat="movies"]:not(.is-expanded) .discover-card-media,
	.discover-card-item[data-cat="tv"]:not(.is-expanded) .discover-card-media {
		width: 110px !important;
		min-width: 110px !important;
		max-width: 110px !important;
		aspect-ratio: 2 / 3 !important;
		max-height: 165px !important;
		flex: 0 0 110px !important;
	}
	.discover-card-item[data-cat="movies"]:not(.is-expanded) .discover-card-body,
	.discover-card-item[data-cat="tv"]:not(.is-expanded) .discover-card-body {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		padding: 10px 12px !important;
	}
	.discover-card-item[data-cat="movies"]:not(.is-expanded) .discover-card-title,
	.discover-card-item[data-cat="tv"]:not(.is-expanded) .discover-card-title {
		-webkit-line-clamp: 2 !important;
		font-size: 14px !important;
	}
	.discover-card-item[data-cat="movies"]:not(.is-expanded) .discover-card-meta,
	.discover-card-item[data-cat="tv"]:not(.is-expanded) .discover-card-meta {
		font-size: 11px !important;
	}
	/* Hide the long description blurb in compact mode — restored on expand */
	.discover-card-item[data-cat="movies"]:not(.is-expanded) .discover-card-desc,
	.discover-card-item[data-cat="tv"]:not(.is-expanded) .discover-card-desc {
		display: none !important;
	}
	/* Tap-target affordance: the media + title are clickable to expand */
	.discover-card-item[data-cat="movies"]:not(.is-expanded) .discover-card-media,
	.discover-card-item[data-cat="tv"]:not(.is-expanded) .discover-card-media,
	.discover-card-item[data-cat="movies"]:not(.is-expanded) .discover-card-title,
	.discover-card-item[data-cat="tv"]:not(.is-expanded) .discover-card-title {
		cursor: pointer;
	}
	/* Hover (desktop testers) or .is-expanded (tap toggled): full layout */
	.discover-card-item[data-cat="movies"]:hover,
	.discover-card-item[data-cat="tv"]:hover,
	.discover-card-item[data-cat="movies"].is-expanded,
	.discover-card-item[data-cat="tv"].is-expanded {
		flex-direction: column !important;
	}
	.discover-card-item[data-cat="movies"]:hover .discover-card-media,
	.discover-card-item[data-cat="tv"]:hover .discover-card-media,
	.discover-card-item[data-cat="movies"].is-expanded .discover-card-media,
	.discover-card-item[data-cat="tv"].is-expanded .discover-card-media {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		flex: 0 0 auto !important;
		aspect-ratio: 2 / 3 !important;
		max-height: 320px !important;
	}
	.discover-card-item[data-cat="movies"]:hover .discover-card-title,
	.discover-card-item[data-cat="tv"]:hover .discover-card-title,
	.discover-card-item[data-cat="movies"].is-expanded .discover-card-title,
	.discover-card-item[data-cat="tv"].is-expanded .discover-card-title {
		-webkit-line-clamp: 3 !important;
		font-size: 15px !important;
	}
	.discover-card-item[data-cat="movies"]:hover .discover-card-desc,
	.discover-card-item[data-cat="tv"]:hover .discover-card-desc,
	.discover-card-item[data-cat="movies"].is-expanded .discover-card-desc,
	.discover-card-item[data-cat="tv"].is-expanded .discover-card-desc {
		/* V6.8 patch 51 — full description on tap/hover. Switch back to block
		   layout + unclamp + visible overflow so the entire blurb is
		   revealed (was just display:-webkit-box which kept the 2-line
		   mobile clamp in effect). */
		display: block !important;
		-webkit-line-clamp: unset !important;
		-webkit-box-orient: initial !important;
		overflow: visible !important;
	}
}

/* (4) General mobile spacing audit — Discover bar + Account form --------- */
@media (max-width: 640px) {
	/* Tighten outer page padding so cards don't kiss the viewport edge but
	   also don't lose horizontal real estate. */
	.discover-wrap { padding-left: 12px !important; padding-right: 12px !important; }
	.discover-bar { padding: 10px 12px !important; gap: 8px !important; margin-bottom: 12px !important; }
	.discover-bar-title { font-size: 17px !important; line-height: 1.25 !important; }
	/* Account form cards — reduce inner padding so the chip grids breathe */
	.acct-card { padding: 16px 14px !important; }
	.acct-fields { gap: 10px !important; }
	.acct-priv { grid-template-columns: 1fr !important; gap: 8px !important; }
	.acct-interests { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; gap: 6px !important; }
	.acct-interests label.acct-interest { padding: 8px 12px !important; font-size: 12.5px !important; }
	/* Toast banner — full-bleed inside the wrap */
	.acct-toast { padding: 10px 14px !important; font-size: 13px !important; }
}


/* =============================================================
   V6.8 patch 49 — Infinite scroll (continuous feeds)
   =============================================================
   Used by discover.php, subpage.php (movies/tv/music/place) and
   the messages.php thread. The legacy paginated `.subpage-pager`
   is hidden when JS is present (`html.js .subpage-pager-fallback
   { display: none }`) — only screen-reader/no-script users see
   the page links.
   ============================================================= */
html.js .subpage-pager-fallback { display: none !important; }
.weird-infscroll {
	display: flex; flex-direction: column; align-items: stretch;
	gap: 14px; padding: 18px 0 8px;
	margin: 8px 0 12px;
	position: relative;
}
.weird-infscroll.is-end { padding-bottom: 22px; }
.weird-infscroll-sentinel {
	width: 100%; height: 1px;
	pointer-events: none; user-select: none;
}
.weird-infscroll-status {
	min-height: 22px;
	text-align: center;
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--text-secondary, rgba(255,255,255,0.7));
	display: flex; align-items: center; justify-content: center;
	gap: 8px;
}
.weird-infscroll-status.is-loading::before {
	content: '';
	display: inline-block;
	width: 14px; height: 14px;
	border-radius: 50%;
	border: 2px solid rgba(124,58,237,0.25);
	border-top-color: var(--purple, #7c3aed);
	animation: weird-infs-spin 720ms linear infinite;
}
.weird-infscroll-status.is-end {
	color: var(--text-secondary, rgba(255,255,255,0.6));
	font-style: italic;
	font-size: 13px;
	opacity: 0.78;
}
.weird-infscroll-status.is-end::before {
	content: '✓';
	color: var(--purple, #7c3aed);
	font-weight: 800;
	font-style: normal;
	margin-right: 4px;
}
.weird-infscroll-status.is-error {
	color: #f87171;
}
.weird-infscroll-retry {
	align-self: center;
	padding: 8px 18px;
	border-radius: 999px;
	border: 1px solid rgba(248,113,113,0.5);
	background: rgba(248,113,113,0.08);
	color: #f87171;
	font-weight: 600;
	font-size: 13.5px;
	cursor: pointer;
	transition: all .2s ease;
}
.weird-infscroll-retry:hover {
	background: rgba(248,113,113,0.16);
	border-color: rgba(248,113,113,0.7);
}
@keyframes weird-infs-spin { to { transform: rotate(360deg); } }

/* Skeleton ghost cards — match the rounded card visual while a
   page is in flight. We render them inside the same grid as the
   real cards so layout doesn't jump. */
.weird-infscroll-skeleton {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
	width: 100%;
	min-height: 1px;
}
.weird-infscroll-skeleton[hidden] { display: none; }
.weird-infscroll-skeleton-card {
	background: var(--surface, rgba(255,255,255,0.04));
	border: 1px solid var(--border, rgba(255,255,255,0.08));
	border-radius: 14px;
	padding: 0;
	height: 280px;
	position: relative;
	overflow: hidden;
}
.weird-infscroll-skeleton-card::before {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(110deg,
		transparent 0%, transparent 40%,
		rgba(124,58,237,0.10) 50%,
		transparent 60%, transparent 100%);
	background-size: 250% 100%;
	animation: weird-infs-shimmer 1.6s linear infinite;
}
.weird-infscroll-skeleton-card-thumb {
	height: 60%;
	background: rgba(124,58,237,0.06);
	border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
}
.weird-infscroll-skeleton-card-body {
	padding: 12px;
	display: flex; flex-direction: column; gap: 8px;
}
.weird-infscroll-skeleton-card-line {
	height: 10px; border-radius: 6px;
	background: rgba(124,58,237,0.10);
}
.weird-infscroll-skeleton-card-line.short { width: 60%; }
.weird-infscroll-skeleton-card-line.tiny  { width: 35%; height: 8px; }
@keyframes weird-infs-shimmer { to { background-position: -250% 0; } }

/* Light-mode shimmer + skeleton fill tuned for white backgrounds */
html.light-mode .weird-infscroll-skeleton-card {
	background: rgba(124,58,237,0.04);
	border-color: rgba(124,58,237,0.10);
}
html.light-mode .weird-infscroll-skeleton-card-thumb,
html.light-mode .weird-infscroll-skeleton-card-line {
	background: rgba(124,58,237,0.08);
}
html.light-mode .weird-infscroll-skeleton-card::before {
	background: linear-gradient(110deg,
		transparent 0%, transparent 40%,
		rgba(124,58,237,0.20) 50%,
		transparent 60%, transparent 100%);
	background-size: 250% 100%;
}
html.light-mode .weird-infscroll-status { color: rgba(26,19,48,0.7); }
html.light-mode .weird-infscroll-status.is-end { color: rgba(26,19,48,0.55); }

/* Messages thread variant — the sentinel sits inside the scrollable
   thread body, NOT at the page bottom. Make the skeleton compact too
   so it matches message bubble height. */
.msg-thread-body .weird-infscroll {
	padding: 8px 0 4px;
	gap: 6px;
}
.msg-thread-body .weird-infscroll-skeleton {
	grid-template-columns: 1fr;
	gap: 8px;
}
.msg-thread-body .weird-infscroll-skeleton-card {
	height: 64px;
	border-radius: 14px;
}
.msg-thread-body .weird-infscroll-skeleton-card-thumb { display: none; }
.msg-thread-body .weird-infscroll-skeleton-card-body { padding: 10px 14px; }

/* Mobile — tighter sentinel/skeleton spacing on phones. */
@media (max-width: 640px) {
	.weird-infscroll { padding: 14px 0 6px; gap: 10px; }
	.weird-infscroll-skeleton {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.weird-infscroll-skeleton-card { height: 220px; }
	.weird-infscroll-status { font-size: 13px; }
	.weird-infscroll-status.is-end { font-size: 12.5px; }
}

/* Tablet — 2-up skeleton. */
@media (min-width: 641px) and (max-width: 1024px) {
	.weird-infscroll-skeleton {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	}
}

/* Reduce-motion — kill shimmer + spinner animation. */
@media (prefers-reduced-motion: reduce) {
	.weird-infscroll-skeleton-card::before { animation: none; opacity: 0.5; }
	.weird-infscroll-status.is-loading::before { animation: none; }
}

/* =============================================================
   V6.8 patch 50 — Profile cohesion (May 2026)
   =============================================================
   profile.php gets the Discover-style chrome: a hero card on
   top with avatar + match%, then a 2-column grid for About and
   "How you match up". All colours route through site tokens so
   light/dark modes share one source of truth.
   ============================================================= */

/* ---------- Hero ------------------------------------------------ */
.profile-hero {
	position: relative;
	margin: 0 0 20px;
	border-radius: 22px;
	overflow: hidden;
	background: var(--surface);
	border: 1px solid var(--border);
	box-shadow: 0 12px 32px -22px rgba(0,0,0,0.55);
}
.profile-hero-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(circle at 0% 0%, rgba(124,58,237,0.28), transparent 55%),
		radial-gradient(circle at 100% 0%, rgba(244,63,94,0.20), transparent 55%),
		radial-gradient(circle at 50% 100%, rgba(6,182,212,0.16), transparent 60%);
	opacity: 0.95;
}
html.light-mode .profile-hero-bg {
	background:
		radial-gradient(circle at 0% 0%, rgba(124,58,237,0.14), transparent 55%),
		radial-gradient(circle at 100% 0%, rgba(244,63,94,0.10), transparent 55%),
		radial-gradient(circle at 50% 100%, rgba(6,182,212,0.10), transparent 60%);
}
.profile-hero-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 28px 22px 24px;
	text-align: center;
}
.profile-hero-avatar {
	width: 104px;
	height: 104px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--bg-raised);
	border: 3px solid rgba(255,255,255,0.95);
	box-shadow: 0 10px 30px -10px rgba(124,58,237,0.55);
}
html.light-mode .profile-hero-avatar {
	border-color: #fff;
	box-shadow: 0 10px 30px -10px rgba(124,58,237,0.35);
}
.profile-hero-name {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 28px;
	font-weight: 800;
	margin: 0;
	color: var(--text-primary);
	letter-spacing: -0.01em;
	line-height: 1.15;
}

/* Match% banner inside hero. */
.profile-hero-pct {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
	background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(244,63,94,0.14));
	border: 1px solid var(--purple-border);
}
.profile-hero-pct strong { font-size: 18px; }
.profile-hero-pct i { color: var(--purple); }
.profile-hero-pct-sub {
	color: var(--text-secondary);
	font-weight: 500;
	font-size: 12.5px;
	margin-left: 4px;
}
.profile-hero-pct-high {
	background: linear-gradient(135deg, rgba(34,197,94,0.20), rgba(6,182,212,0.16));
	border-color: rgba(34,197,94,0.40);
}
.profile-hero-pct-high i { color: #22c55e; }
.profile-hero-pct-mid {
	background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(244,63,94,0.14));
	border-color: rgba(124,58,237,0.30);
}
.profile-hero-pct-low {
	background: linear-gradient(135deg, rgba(148,148,164,0.18), rgba(127,127,141,0.10));
	border-color: rgba(127,127,141,0.30);
}
.profile-hero-pct-low i { color: var(--text-muted); }

/* Meta chip strip. */
.profile-hero-meta {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 8px;
}
.profile-hero-meta li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 500;
	color: var(--text-secondary);
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: 999px;
	white-space: nowrap;
}
.profile-hero-meta li i { color: var(--purple); font-size: 12px; }
.profile-hero-meta li a {
	color: inherit !important;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.profile-hero-meta li a:hover { color: var(--text-primary) !important; }
.profile-hero-meta li:has(a):hover {
	border-color: var(--purple-border);
	background: var(--purple-glow);
}

/* Hero action buttons. */
.profile-hero-actions {
	margin-top: 8px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.profile-action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: all 0.18s ease;
	background: var(--bg-raised);
	color: var(--text-primary);
	text-decoration: none !important;
}
.profile-action i { font-size: 13px; }
.profile-action:hover {
	border-color: var(--purple);
	transform: translateY(-1px);
	color: var(--text-primary);
}
.profile-action-primary {
	background: linear-gradient(135deg, var(--purple) 0%, #6d28d9 100%);
	border-color: var(--purple);
	color: #fff !important;
	box-shadow: 0 6px 18px -8px rgba(124,58,237,0.7);
}
.profile-action-primary:hover {
	background: linear-gradient(135deg, var(--purple-light) 0%, var(--purple) 100%);
	box-shadow: 0 8px 22px -8px rgba(124,58,237,0.85);
	color: #fff !important;
}
.profile-action-secondary {
	background: var(--bg-raised);
	color: var(--text-primary);
}
.profile-action-secondary:hover {
	background: var(--purple-glow);
	border-color: var(--purple);
}
.profile-action-following {
	background: rgba(34,197,94,0.14);
	border-color: rgba(34,197,94,0.45);
	color: #22c55e;
}
.profile-action-following:hover {
	background: rgba(244,63,94,0.14);
	border-color: rgba(244,63,94,0.55);
	color: #f43f5e;
}
.profile-action-following:hover::before {
	content: "\f234"; /* fa-user-times — Awesome 5 free */
}
.profile-action-following:hover i { display: none; }

/* ---------- Compare picker (self mode only) -------------------- */
.profile-compare {
	margin: 0 0 22px;
	padding: 18px 20px 16px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 18px;
}
.profile-compare-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 14px;
	margin-bottom: 12px;
}
.profile-compare-title {
	margin: 0;
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 17px;
	font-weight: 700;
	color: var(--text-primary);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.profile-compare-title i { color: var(--purple); }
.profile-compare-sub { font-size: 12.5px; color: var(--text-secondary); }
.profile-compare-empty {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0 4px;
	color: var(--text-secondary);
	font-size: 14px;
}
.profile-compare-chiprow {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 4px 2px 8px;
	margin: 0 -2px;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}
.profile-compare-chiprow::-webkit-scrollbar { height: 6px; }
.profile-compare-chiprow::-webkit-scrollbar-thumb {
	background: var(--purple-border);
	border-radius: 999px;
}
.profile-compare-chip {
	flex: 0 0 auto;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 8px 14px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--bg-raised);
	color: var(--text-primary) !important;
	text-decoration: none !important;
	font-size: 13.5px;
	font-weight: 600;
	scroll-snap-align: start;
	transition: all 0.15s ease;
	min-width: 90px;
}
.profile-compare-chip:hover {
	border-color: var(--purple);
	background: var(--purple-glow);
}
.profile-compare-chip.is-active {
	background: linear-gradient(135deg, var(--purple), #6d28d9);
	border-color: var(--purple);
	color: #fff !important;
	box-shadow: 0 6px 16px -8px rgba(124,58,237,0.55);
}
.profile-compare-chip-sub {
	font-size: 11.5px;
	font-weight: 400;
	color: var(--text-muted);
}
.profile-compare-chip.is-active .profile-compare-chip-sub {
	color: rgba(255,255,255,0.85);
}

/* ---------- Card grid ------------------------------------------ */
.profile-grid {
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,1fr);
	gap: 18px;
}
.profile-card {
	background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(244,63,94,0.04), rgba(6,182,212,0.04)), var(--surface);
	border: 1px solid var(--border);
	border-radius: 18px;
	padding: 22px 22px 24px;
	box-shadow: 0 8px 24px -16px rgba(0,0,0,0.5);
	text-align: left;
}
.profile-card .discover-section-head { margin-bottom: 4px; }
.profile-card .discover-section-sub  { margin: 0 0 18px; }

.profile-about-block { margin-bottom: 22px; }
.profile-about-block:last-child { margin-bottom: 0; }
.profile-subheading {
	margin: 0 0 10px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-secondary);
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.profile-subheading i { color: var(--purple); font-size: 12px; }
.profile-bio {
	margin: 0;
	color: var(--text-primary);
	font-size: 15px;
	line-height: 1.55;
}
.profile-bio-empty {
	color: var(--text-muted);
	font-style: italic;
	font-size: 14px;
}
.profile-bio-empty a { color: var(--purple) !important; }

/* Interest chips. */
.profile-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
}
.profile-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--bg-raised);
	color: var(--text-primary) !important;
	border: 1px solid var(--border);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	transition: all 0.15s ease;
}
.profile-chip:hover {
	background: var(--purple-glow);
	border-color: var(--purple);
	color: var(--purple-light) !important;
	transform: translateY(-1px);
}
html.light-mode .profile-chip:hover { color: var(--purple) !important; }

/* Explore-recommendations buttons (per-category coloured). */
.profile-explore {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 10px;
}
.profile-explore-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 14px;
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: 12px;
	color: var(--text-primary) !important;
	text-decoration: none !important;
	font-size: 14px;
	font-weight: 700;
	transition: all 0.18s ease;
}
.profile-explore-btn i { font-size: 14px; }
.profile-explore-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -12px rgba(124,58,237,0.55);
}
.profile-explore-btn[data-cat="movies"] { border-top: 3px solid #7c3aed; }
.profile-explore-btn[data-cat="movies"]:hover { color: #a78bfa !important; border-color: #7c3aed; }
.profile-explore-btn[data-cat="tv"]     { border-top: 3px solid #f97316; }
.profile-explore-btn[data-cat="tv"]:hover     { color: #fb923c !important; border-color: #f97316; }
.profile-explore-btn[data-cat="music"]  { border-top: 3px solid #f43f5e; }
.profile-explore-btn[data-cat="music"]:hover  { color: #fb7185 !important; border-color: #f43f5e; }
.profile-explore-btn[data-cat="place"]  { border-top: 3px solid #22c55e; }
.profile-explore-btn[data-cat="place"]:hover  { color: #4ade80 !important; border-color: #22c55e; }
html.light-mode .profile-explore-btn[data-cat="movies"]:hover { color: #6d28d9 !important; }
html.light-mode .profile-explore-btn[data-cat="tv"]:hover     { color: #c2410c !important; }
html.light-mode .profile-explore-btn[data-cat="music"]:hover  { color: #be123c !important; }
html.light-mode .profile-explore-btn[data-cat="place"]:hover  { color: #15803d !important; }

/* ---------- Match meter rows ----------------------------------- */
.profile-match-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.profile-match-row {
	display: grid;
	grid-template-columns: 165px 1fr 60px;
	align-items: center;
	gap: 12px;
}
.profile-match-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
}
.profile-match-label i { color: var(--purple); font-size: 13px; }
.profile-match-bar {
	position: relative;
	height: 10px;
	background: var(--bg-raised);
	border-radius: 999px;
	overflow: hidden;
	border: 1px solid var(--border);
}
.profile-match-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--purple), #f43f5e);
	width: 0;
	transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: 0 0 12px -2px rgba(124,58,237,0.45);
	position: relative;
	overflow: hidden;
}
/* Soft shimmer along the gradient bar. */
.profile-match-fill::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
	animation: profileShimmer 2.4s ease-in-out infinite;
}
@keyframes profileShimmer {
	0%   { transform: translateX(-100%); }
	60%  { transform: translateX(100%); }
	100% { transform: translateX(100%); }
}
.profile-match-row.is-high  .profile-match-fill { background: linear-gradient(90deg, #22c55e, #06b6d4); }
.profile-match-row.is-mid   .profile-match-fill { background: linear-gradient(90deg, var(--purple), #f43f5e); }
.profile-match-row.is-low   .profile-match-fill { background: linear-gradient(90deg, #f97316, #f43f5e); opacity: 0.85; }
.profile-match-row.is-empty .profile-match-fill {
	background: var(--border);
	animation: none;
}
.profile-match-row.is-empty .profile-match-fill::after { display: none; }
.profile-match-pct {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 800;
	color: var(--text-primary);
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.profile-match-row.is-high  .profile-match-pct { color: #22c55e; }
.profile-match-row.is-low   .profile-match-pct { color: #f97316; }
.profile-match-row.is-empty .profile-match-pct { color: var(--text-muted); font-weight: 600; font-size: 13px; }
html.light-mode .profile-match-row.is-high .profile-match-pct { color: #15803d; }
html.light-mode .profile-match-row.is-low  .profile-match-pct { color: #c2410c; }

/* Discover-bar back link variant (Connect link on other-user view). */
.discover-bar-back {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-secondary) !important;
	background: var(--bg-raised);
	border: 1px solid var(--border);
	padding: 6px 14px;
	border-radius: 999px;
	text-decoration: none !important;
	transition: all 0.15s ease;
}
.discover-bar-back:hover {
	border-color: var(--purple);
	color: var(--purple-light) !important;
	background: var(--purple-glow);
}
html.light-mode .discover-bar-back:hover { color: var(--purple) !important; }

/* ---------- Tablet (641-1024px) -------------------------------- */
@media (min-width: 641px) and (max-width: 1024px) {
	.profile-grid { grid-template-columns: minmax(0,1fr); }
	.profile-hero-name { font-size: 25px; }
	.profile-match-row { grid-template-columns: 150px 1fr 56px; }
}

/* ---------- Mobile (<= 640px) ---------------------------------- */
@media (max-width: 640px) {
	.profile-hero { border-radius: 18px; }
	.profile-hero-content { padding: 22px 16px 20px; gap: 10px; }
	.profile-hero-avatar { width: 88px; height: 88px; }
	.profile-hero-name { font-size: 22px; }
	.profile-hero-pct { font-size: 13px; padding: 7px 12px; }
	.profile-hero-pct strong { font-size: 16px; }
	.profile-hero-meta li { font-size: 12px; padding: 5px 10px; }
	.profile-hero-actions { gap: 8px; }
	.profile-action { padding: 10px 16px; font-size: 13px; }

	.profile-compare { padding: 14px 14px 12px; border-radius: 16px; }
	.profile-compare-title { font-size: 15px; }
	.profile-compare-chip { padding: 7px 12px; font-size: 13px; min-width: 84px; }

	.profile-grid { grid-template-columns: minmax(0,1fr); gap: 14px; }
	.profile-card { padding: 18px 16px 20px; border-radius: 16px; }

	.profile-match-row {
		grid-template-columns: 1fr auto;
		gap: 6px 10px;
	}
	.profile-match-label { grid-column: 1 / 2; font-size: 13px; }
	.profile-match-pct   { grid-column: 2 / 3; font-size: 14px; }
	.profile-match-bar   { grid-column: 1 / -1; height: 9px; }

	.profile-explore { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Anchor-as-button overrides ------------------------- */
/* The global `a { color: var(--purple) !important; }` rule (line ~78)
   wins on specificity against single-class rules. Scope these with
   `a.…` to bump them up to (0,1,1) so the intended button colours
   apply on real <a> elements. */
a.profile-action,
a.profile-action:visited,
a.profile-action:link            { color: var(--text-primary) !important; }
a.profile-action-primary,
a.profile-action-primary:visited,
a.profile-action-primary:hover   { color: #fff !important; }
a.profile-action-secondary,
a.profile-action-secondary:visited { color: var(--text-primary) !important; }
a.profile-action-following,
a.profile-action-following:visited { color: #22c55e !important; }
a.profile-action-following:hover { color: #f43f5e !important; }

a.profile-chip,
a.profile-chip:visited            { color: var(--text-primary) !important; }
a.profile-chip:hover              { color: var(--purple-light) !important; }
html.light-mode a.profile-chip:hover { color: var(--purple) !important; }

a.profile-explore-btn,
a.profile-explore-btn:visited     { color: var(--text-primary) !important; }
a.profile-explore-btn[data-cat="movies"]:hover { color: #a78bfa !important; }
a.profile-explore-btn[data-cat="tv"]:hover     { color: #fb923c !important; }
a.profile-explore-btn[data-cat="music"]:hover  { color: #fb7185 !important; }
a.profile-explore-btn[data-cat="place"]:hover  { color: #4ade80 !important; }
html.light-mode a.profile-explore-btn[data-cat="movies"]:hover { color: #6d28d9 !important; }
html.light-mode a.profile-explore-btn[data-cat="tv"]:hover     { color: #c2410c !important; }
html.light-mode a.profile-explore-btn[data-cat="music"]:hover  { color: #be123c !important; }
html.light-mode a.profile-explore-btn[data-cat="place"]:hover  { color: #15803d !important; }

a.profile-compare-chip,
a.profile-compare-chip:visited    { color: var(--text-primary) !important; }
a.profile-compare-chip.is-active  { color: #fff !important; }

a.discover-bar-back,
a.discover-bar-back:visited       { color: var(--text-secondary) !important; }
a.discover-bar-back:hover         { color: var(--purple-light) !important; }
html.light-mode a.discover-bar-back:hover { color: var(--purple) !important; }

/* Meta-row anchor (questions-created link). */
.profile-hero-meta li a,
.profile-hero-meta li a:visited   { color: inherit !important; }
.profile-hero-meta li a:hover     { color: var(--text-primary) !important; }

/* Owner & compare-name links in the section-sub text. */
.discover-section-sub a,
.discover-section-sub a:visited   { color: var(--purple-light) !important; }
html.light-mode .discover-section-sub a { color: var(--purple) !important; }

/* ---------- Reduce motion -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.profile-match-fill { transition: none; }
	.profile-match-fill::after { animation: none; opacity: 0.4; }
	.profile-action:hover { transform: none; }
	.profile-chip:hover { transform: none; }
	.profile-explore-btn:hover { transform: none; }
}

/* ================================================================
   V6.8 patch 54 — Personalized "Today" greeting strip on Discover.
   Sits above the .discover-bar on `?tab=stream` only. Shows a
   time-aware hello + up to 3 contextual next-action chips. Goal:
   give returning users an immediate, clear reason to engage today.
   ================================================================ */
.discover-greet {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 14px 18px;
	margin: 4px 0 18px;
	padding: 16px 20px;
	background:
		radial-gradient(ellipse 70% 100% at 0% 0%, rgba(139,92,246,0.10) 0%, transparent 60%),
		var(--surface);
	border: 1px solid var(--purple-border);
	border-radius: var(--radius, 16px);
	box-shadow: 0 8px 28px rgba(0,0,0,0.18), 0 0 0 1px rgba(139,92,246,0.04) inset;
}
html.light-mode .discover-greet {
	background:
		radial-gradient(ellipse 70% 100% at 0% 0%, rgba(124,58,237,0.07) 0%, transparent 60%),
		#ffffff;
	box-shadow: 0 6px 22px rgba(26,23,64,0.06), 0 0 0 1px rgba(124,58,237,0.04) inset;
}
/* V6.8 patch 57 — defeat legacy `.wrapper { text-align: center }` (line ~159)
   so the greeting reads as a clean left-anchored "name + welcome" block,
   and let the chips sit hard-right via `margin-left: auto` instead of letting
   the text container grow to consume the slack (which left the name floating
   in dead-center on wide desktops). */
.discover-greet-text {
	display: flex; flex-direction: column; gap: 2px;
	flex: 0 1 auto; min-width: 0;
	text-align: left;
}
.discover-greet-hi {
	font-family: 'Space Grotesk', sans-serif;
	font-size: clamp(18px, 2.4vw, 22px);
	font-weight: 800; letter-spacing: -0.4px;
	color: var(--text-primary);
	line-height: 1.2;
	text-align: left;
}
.discover-greet-tag {
	font-size: 13px; color: var(--text-muted); font-weight: 500;
	line-height: 1.4;
	text-align: left;
}
.discover-greet-chips {
	display: flex; flex-wrap: wrap; gap: 8px;
	list-style: none; padding: 0; margin: 0 0 0 auto;
}
.discover-greet-chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 14px;
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: 13px; font-weight: 700; letter-spacing: -0.1px;
	color: var(--text-primary) !important;
	text-decoration: none !important;
	transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
	white-space: nowrap;
}
.discover-greet-chip i { font-size: 13px; }
.discover-greet-chip:hover, .discover-greet-chip:focus-visible {
	transform: translateY(-1px);
	border-color: var(--border-hover);
	background: var(--surface-hover);
}
.discover-greet-chip.is-purple { border-color: var(--purple-border); background: var(--purple-glow); }
.discover-greet-chip.is-purple i { color: var(--purple); }
.discover-greet-chip.is-orange { border-color: rgba(249,115,22,0.25); background: var(--orange-glow); }
.discover-greet-chip.is-orange i { color: var(--orange); }
.discover-greet-chip.is-green  { border-color: rgba(52,211,153,0.25); background: var(--green-bg); }
.discover-greet-chip.is-green i  { color: var(--green); }
.discover-greet-chip.is-cyan   { border-color: rgba(34,211,238,0.25); background: rgba(34,211,238,0.10); }
.discover-greet-chip.is-cyan i   { color: var(--cyan); }

/* Tablet: stack text + chips vertically with slightly tighter chips. */
@media (max-width: 820px) {
	.discover-greet { padding: 14px 16px; }
	.discover-greet-hi { font-size: 18px; }
	.discover-greet-chip { padding: 9px 12px; font-size: 12px; }
}
/* Mobile: full-bleed chips row, allow horizontal scroll if very many. */
@media (max-width: 560px) {
	.discover-greet { gap: 12px; padding: 14px; border-radius: 14px; }
	.discover-greet-text { flex-basis: 100%; }
	.discover-greet-chips {
		flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px;
		scrollbar-width: none; flex-basis: 100%;
	}
	.discover-greet-chips::-webkit-scrollbar { display: none; }
	.discover-greet-chip { flex-shrink: 0; }
}
/* Reduce motion: kill transform. */
@media (prefers-reduced-motion: reduce) {
	.discover-greet-chip:hover { transform: none; }
}


/* ===========================================================================
   V6.8 patch 55 — Icon-only circular action buttons (centering + colors)
   ------------------------------------------------------------------------
   Symptom: thumbs up/down, hide, save, and follow buttons in the card
   actions row rendered as wide purple PILLS with off-center glyphs.

   Root cause: the legacy `button:not(...)` fallback at the top of this
   file applies `padding: 10px 22px !important` + a purple gradient +
   box-shadow + text-shadow to every <button> not in its exclusion list.
   Specificity (0,15,1) beat the patch-47 rules, and because parents are
   flex containers with `min-width: auto`, the 44 px of padding became
   the min-content width — blowing past the explicit 36 px circle.

   Fix part A (above): added `.discover-rate`, `.discover-skip`,
   `.discover-card-save`, `.discover-follow`, `.discover-greet-chip`,
   and the descendant `.discover-card-actions button` to the legacy
   :not() exclusion list, so the fallback never targets them.

   Fix part B (below): defensive reset — even if another global rule
   ever creeps in, these icon buttons stay circular with a centered
   single glyph. Uses `body` + a chained selector for extra specificity.
   ========================================================================= */

body .discover-rate,
body .discover-skip,
body .discover-card-actions .discover-card-save,
body .discover-card-actions .discover-follow {
	padding: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	background-image: none !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	flex: 0 0 auto;
	min-width: 0 !important;
}

/* Lock circle dimensions (border-box + flex min-content can otherwise
   stretch them). 36 px is the touch-target sweet spot. */
body .discover-rate,
body .discover-card-actions .discover-card-save,
body .discover-card-actions .discover-follow {
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	font-size: 14px !important;
}
body .discover-skip {
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	font-size: 12px !important;
}

/* Default (unselected) backgrounds — neutral raised, not purple. */
body .discover-rate:not(.active),
body .discover-skip,
body .discover-card-actions .discover-card-save:not(.saved),
body .discover-card-actions .discover-follow:not(.connect-tile-following) {
	background: var(--bg-raised) !important;
	background-color: var(--bg-raised) !important;
	color: var(--text-secondary) !important;
	border: 1px solid var(--border) !important;
}

/* Active up = green */
body .discover-rate.up.active,
body .discover-rate.up:hover:not(:disabled) {
	background: var(--green) !important;
	background-color: var(--green) !important;
	background-image: none !important;
	color: #fff !important;
	border-color: var(--green) !important;
}
/* Active down = coral */
body .discover-rate.down.active,
body .discover-rate.down:hover:not(:disabled) {
	background: var(--coral) !important;
	background-color: var(--coral) !important;
	background-image: none !important;
	color: #fff !important;
	border-color: var(--coral) !important;
}

/* Saved = purple */
body .discover-card-actions .discover-card-save.saved {
	background: var(--purple) !important;
	background-color: var(--purple) !important;
	color: #fff !important;
	border-color: var(--purple) !important;
}
/* Following = purple */
body .discover-card-actions .discover-follow.connect-tile-following {
	background: var(--purple) !important;
	background-color: var(--purple) !important;
	color: #fff !important;
	border-color: var(--purple) !important;
}

/* Icon inside is reset to inline-flex centered glyph */
body .discover-rate > i,
body .discover-skip > i,
body .discover-card-actions .discover-card-save > i,
body .discover-card-actions .discover-follow > i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	vertical-align: middle;
	margin: 0;
	width: auto;
	height: auto;
}

/* Light mode — neutral raised lavender */
html.light-mode body .discover-rate:not(.active),
html.light-mode body .discover-skip,
html.light-mode body .discover-card-actions .discover-card-save:not(.saved),
html.light-mode body .discover-card-actions .discover-follow:not(.connect-tile-following) {
	background: #f6f3ff !important;
	background-color: #f6f3ff !important;
	color: #4b3a7a !important;
	border-color: rgba(0,0,0,0.08) !important;
}

/* Mobile: keep size for fat-fingers (36 px is already small enough). */
@media (max-width: 560px) {
	body .discover-rate,
	body .discover-card-actions .discover-card-save,
	body .discover-card-actions .discover-follow {
		width: 34px !important;
		height: 34px !important;
		font-size: 13px !important;
	}
	body .discover-skip {
		width: 30px !important;
		height: 30px !important;
		font-size: 11px !important;
	}
}

/* ================================================================
   V6.8 patch 58 — Profile hero layout + back-link cleanup
   ----------------------------------------------------------------
   Symptoms reported:
     • "Both views take up too much room with the icon, name, meta,
       and buttons... too vertical."
     • "Connect" link awkwardly placed in the discover-bar.
   Root cause: hero was a centered flex-COLUMN with a 104px avatar
   and a chips-wrap meta row, eating ~300px of vertical space on
   desktop where there's plenty of horizontal real estate. Back-
   link was a word-pill "← Connect" that read as a CTA, not a nav.
   Fix:
     1. Hero on >640px → 2-col grid: avatar (76px) on the left,
        name / match-pct / meta / actions stacked on the right
        with left-aligned text. Halves the section's height.
     2. Mobile <=640px keeps the current centered vertical look
        with a slightly tighter avatar.
     3. `.discover-bar-back.is-icon` strips the "Connect" word and
        renders a clean 36px circle arrow, matching movies/tv/music
        sub-pages. The text variant is kept for any other callers.
   ================================================================ */
@media (min-width: 641px) {
	.profile-hero-content {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 22px;
		row-gap: 4px;
		align-items: start;
		text-align: left;
		padding: 20px 24px 22px;
	}
	.profile-hero-avatar {
		grid-row: 1 / -1;
		grid-column: 1;
		align-self: center;
		width: 84px;
		height: 84px;
		border-width: 2px;
	}
	.profile-hero-name {
		grid-column: 2;
		font-size: 24px;
		margin: 0;
		line-height: 1.2;
	}
	.profile-hero-pct {
		grid-column: 2;
		justify-self: start;
		margin-top: 4px;
	}
	.profile-hero-meta {
		grid-column: 2;
		justify-content: flex-start;
		margin: 8px 0 0;
	}
	.profile-hero-actions {
		grid-column: 2;
		justify-content: flex-start;
		margin-top: 10px;
	}
}

/* Icon-only back-arrow chip in the profile discover-bar. Overrides the
   patch 10 (line ~4457) and the later text-pill rule (line ~7289) by
   coming later in the cascade with a compound selector. */
.discover-bar-back.is-icon {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	gap: 0;
	border-radius: 50%;
	background: rgba(124,58,237,0.14);
	color: var(--purple) !important;
	border: 1px solid rgba(124,58,237,0.28);
	font-size: 13px;
	transition: all 0.15s var(--ease);
	text-decoration: none !important;
}
.discover-bar-back.is-icon:hover {
	background: var(--purple);
	color: #fff !important;
	transform: translateX(-2px);
}
html.light-mode .discover-bar-back.is-icon { background: rgba(124,58,237,0.10); }
html.light-mode .discover-bar-back.is-icon:hover { color: #fff !important; }
@media (max-width: 640px) {
	.discover-bar-back.is-icon { width: 32px; height: 32px; font-size: 12px; }
}
/* ================================================================
   V6.8 patch 59 — Unify Account-page chrome
   ----------------------------------------------------------------
   User reported:
     • "notifications doesn't match rest of account pages.
        Same goes for reset password."
     • "white text issue on buttons in light mode"
     • "Profile page also has notifications displayed even though
        it's a separate page and password is linked at the bottom
        still even though we added a button"
     • "Mobile: text not lining up next to radio/checkboxes,
        buttons bumping to 2 rows, odd spacing on interests text"
     • "register page spacing issues at the top"
   Root cause: the `.acct-*` rules were defined ONLY inside the
   inline <style> block in editinfo.php (patch 27/43/45/53). Other
   account-shell pages (notify-prefs.php, reset-password.php) had
   their own partial copies inline, so styles drifted: checkboxes
   on notify-prefs collapsed to default browser layout (squished
   title+description in one inline run), and the dark-mode is-active
   gradient didn't apply consistently. Move everything into the
   shared sheet so every account surface looks identical.
   ================================================================ */

/* Account form scaffolding — promoted from editinfo.php inline block. */
.acct-form { display: flex; flex-direction: column; gap: 22px; margin: 0; }
.acct-card {
	background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(244,63,94,0.04), rgba(6,182,212,0.04)), var(--surface);
	border: 1px solid var(--border);
	border-radius: 18px;
	padding: 22px 22px 24px;
	box-shadow: 0 8px 24px -16px rgba(0,0,0,0.5);
	text-align: left;
}
.acct-card .discover-section-head { margin-bottom: 4px; }
.acct-card .discover-section-sub  { margin: 0 0 18px; }
.acct-fields { display: flex; flex-direction: column; gap: 14px; }
.acct-field  { display: flex; flex-direction: column; gap: 6px; }
.acct-field-label {
	font-size: 13px; font-weight: 600;
	color: var(--text-secondary);
	letter-spacing: 0.02em;
	display: inline-flex; align-items: center; gap: 6px;
}
.acct-field-label i { color: var(--purple); }
.acct-card input[type=email],
.acct-card input[type=text],
.acct-card input[type=password] {
	width: 100%;
	padding: 11px 16px;
	border-radius: 999px;
	border: 1px solid var(--border, rgba(255,255,255,0.12));
	background: var(--surface, rgba(255,255,255,0.04));
	color: var(--text-primary);
	font-size: 14px;
	outline: none;
	transition: border-color .15s ease;
}
.acct-card input[type=email]:focus,
.acct-card input[type=text]:focus,
.acct-card input[type=password]:focus { border-color: var(--purple); }
.acct-card input.is-invalid { border-color: #f43f5e !important; }
.acct-field-err {
	color: #f43f5e; font-size: 12px; margin-top: 2px;
	display: block;
}
.acct-decade-row { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; }
.acct-decade { font-size: 24px; font-weight: 800; color: var(--purple); font-family: 'Space Grotesk', sans-serif; }
.acct-decade-row .acct-decade-hint { color: var(--text-secondary); font-size: 12px; }
.acct-card input[type=range].acct-range {
	-webkit-appearance: none; appearance: none;
	width: 100%; height: 6px; border-radius: 999px;
	background: linear-gradient(to right, rgba(124,58,237,0.7), rgba(244,63,94,0.5));
	outline: none; margin: 6px 0;
}
.acct-card input[type=range].acct-range::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--purple); border: 3px solid #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,0.4);
	cursor: pointer;
}
.acct-card input[type=range].acct-range::-moz-range-thumb {
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--purple); border: 3px solid #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,0.4);
	cursor: pointer;
}

/* Privacy / Notification radio + checkbox option cards. The KEY rule
   that was missing on notify-prefs.php — without it the <input> sat
   inline next to <span> with no gap, and the title/desc spans had no
   display:block so they ran together as one squished line. */
.acct-priv { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 700px) { .acct-priv { grid-template-columns: 1fr 1fr; } }
.acct-priv label.acct-priv-opt,
.acct-notif label.acct-priv-opt,
label.acct-priv-opt {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 14px 16px; border-radius: 14px;
	border: 1px solid var(--border, rgba(255,255,255,0.12));
	background: rgba(124,58,237,0.06);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.acct-priv label.acct-priv-opt:hover,
.acct-notif label.acct-priv-opt:hover,
label.acct-priv-opt:hover { border-color: var(--purple); }
.acct-priv input[type=radio],
.acct-priv-opt input[type=radio] {
	accent-color: var(--purple); margin-top: 3px;
	width: 18px; height: 18px; flex-shrink: 0;
}
.acct-notif input[type=checkbox],
.acct-priv-opt input[type=checkbox] {
	accent-color: var(--purple); margin-top: 3px;
	width: 18px; height: 18px; flex-shrink: 0;
}
.acct-priv-opt.is-active {
	border-color: var(--purple);
	background: rgba(124,58,237,0.18);
}
/* display:block on the title/desc is critical — without it (the
   notify-prefs bug pre-patch-59) the text wrapped inline and read as
   a single squished sentence on mobile. */
.acct-priv-opt-title { display:block; font-weight: 700; color: var(--text-primary); font-size: 14px; line-height: 1.3; }
.acct-priv-opt-desc  { display:block; font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; }
/* The wrapping <span> around title+desc must grow so the text fills the
   remaining flex track. Without flex:1 + min-width:0 the inner spans
   shrink to min-content (single-character columns) on mobile. */
.acct-priv-opt > span { flex: 1 1 auto; min-width: 0; }

/* Avatar picker. */
.acct-avatars {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
	gap: 8px; max-height: 280px; overflow-y: auto;
	padding: 12px; border-radius: 14px;
	background: rgba(255,255,255,0.03);
	border: 1px solid var(--border, rgba(255,255,255,0.10));
	scrollbar-width: thin;
	scrollbar-color: rgba(124,58,237,0.5) transparent;
}
.acct-avatars::-webkit-scrollbar { width: 8px; }
.acct-avatars::-webkit-scrollbar-thumb { background: rgba(124,58,237,0.5); border-radius: 999px; }
.acct-avatars label.acct-avatar-opt {
	cursor: pointer; border-radius: 12px; padding: 4px;
	border: 2px solid transparent;
	transition: border-color .15s ease, transform .15s ease, background-color .15s ease;
	display: block; margin: 0;
}
.acct-avatars label.acct-avatar-opt:hover { transform: scale(1.05); border-color: rgba(124,58,237,0.5); }
.acct-avatars label.acct-avatar-opt.is-active {
	border-color: var(--purple);
	background: rgba(124,58,237,0.18);
	box-shadow: 0 0 0 1px rgba(124,58,237,0.4);
}
.acct-avatars img { width: 100%; aspect-ratio: 1/1; display: block; border-radius: 8px; }
.acct-avatars input[type=radio] { display: none; }

/* Form actions / save button. */
.acct-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
.acct-save {
	background: linear-gradient(135deg, var(--purple), #f43f5e) !important;
	color: #fff !important;
	border: none !important;
	padding: 12px 30px !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	cursor: pointer;
	box-shadow: 0 6px 18px -8px rgba(124,58,237,0.6);
	font-size: 14px;
	display: inline-flex; align-items: center; gap: 6px;
}
.acct-save:hover { transform: translateY(-1px); }
.acct-toast {
	background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(124,58,237,0.16));
	border: 1px solid rgba(34,197,94,0.45);
	border-radius: 14px;
	padding: 14px 18px;
	color: var(--text-primary);
	font-weight: 600;
	margin-bottom: 18px;
	display: flex; align-items: center; gap: 10px;
}
.acct-toast i { color: #22c55e; }

/* Interest chips. */
.acct-interests {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 8px;
}
.acct-interests label.acct-interest {
	display: flex; align-items: center; gap: 8px;
	padding: 10px 14px; border-radius: 999px;
	border: 1px solid var(--border, rgba(255,255,255,0.12));
	background: rgba(124,58,237,0.06);
	color: var(--text-primary);
	cursor: pointer; margin: 0; font-size: 13px;
	font-weight: 600;
	transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.acct-interests label.acct-interest:hover { border-color: var(--purple); transform: translateY(-1px); }
.acct-interests label.acct-interest.is-active {
	background: linear-gradient(135deg, rgba(124,58,237,0.22), rgba(244,63,94,0.16));
	border-color: var(--purple);
	color: var(--text-primary);
}
.acct-interests label.acct-interest input { display: none; }
.acct-interests label.acct-interest i { color: var(--purple); }
/* Tighten the gap between the section-sub paragraph and the bolt-hint
   — user-reported "odd spacing on interests text above buttons".
   The hint had `margin: -6px 0 4px` which pulled it up against the
   sub-paragraph, but on mobile the sub-paragraph wraps to 2 lines and
   the negative margin clipped through it. Use positive margin + tighter
   bottom margin on the sub. */
.acct-card .discover-section-sub + .acct-interest-hint { margin-top: -8px; }
.acct-interest-hint {
	display: flex; align-items: center; gap: 8px;
	font-size: 12px; color: var(--text-secondary);
	margin: 0 0 12px;
	line-height: 1.45;
}
.acct-interest-hint i { color: var(--purple); flex-shrink: 0; }
html.light-mode .acct-interests label.acct-interest {
	background: rgba(124,58,237,0.05);
	border-color: rgba(0,0,0,0.08);
}

/* Account quick-link chip nav (shared by every account page). The
   `.is-active` rule MUST keep its background-gradient at !important
   priority or Bootstrap's default `a:focus` rule on notify-prefs (which
   loads bootstrap.min.css via render_head) can win and leave the active
   pill with white text on a transparent background — that's the
   "white text issue on buttons in light mode" the user spotted. */
.acct-quicklinks {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin: 0 0 18px;
}
.acct-quicklink {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 16px; border-radius: 999px;
	background: rgba(124,58,237,0.08);
	border: 1px solid rgba(124,58,237,0.25);
	color: var(--text-primary) !important;
	font-size: 13.5px; font-weight: 600;
	text-decoration: none !important;
	transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.acct-quicklink:hover {
	background: rgba(124,58,237,0.18);
	transform: translateY(-1px);
	border-color: rgba(124,58,237,0.45);
}
.acct-quicklink i { color: var(--purple); }
.acct-quicklink.is-active,
.acct-quicklink.is-active:hover,
.acct-quicklink.is-active:focus,
.acct-quicklink.is-active:visited {
	background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
	border-color: #6d28d9 !important;
	color: #fff !important;
	cursor: default;
	transform: none;
}
.acct-quicklink.is-active i { color: #fff !important; }
html.light-mode .acct-quicklink { background: rgba(124,58,237,0.06); border-color: rgba(124,58,237,0.20); }
html.light-mode .acct-quicklink:hover { background: rgba(124,58,237,0.12); }
html.light-mode .acct-quicklink.is-active,
html.light-mode .acct-quicklink.is-active i { color: #fff !important; }

/* Reset-password page bespoke card (so reset-password.php can drop its
   inline .rp-card style). */
.acct-rp-card {
	background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(244,63,94,0.04), rgba(6,182,212,0.04)), var(--surface);
	border: 1px solid var(--border);
	border-radius: 18px;
	padding: 24px clamp(18px, 3vw, 28px) 26px;
	box-shadow: 0 8px 24px -16px rgba(0,0,0,0.5);
	max-width: 540px;
	margin: 0 auto;
}
.acct-rp-card h2 {
	margin: 0 0 8px;
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 20px; font-weight: 700; color: var(--text-primary);
	display: inline-flex; align-items: center; gap: 8px;
}
.acct-rp-card h2 i { color: var(--purple); }
.acct-rp-card p.acct-rp-sub {
	color: var(--text-secondary); font-size: 14px; line-height: 1.5;
	margin: 0 0 16px;
}
.acct-rp-card .input-group { margin-bottom: 12px; }
.acct-rp-card .input-group-text {
	background: rgba(124,58,237,0.10);
	border: 1px solid var(--border);
	color: var(--purple);
	border-right: none;
	border-radius: 999px 0 0 999px;
}
.acct-rp-card .form-control {
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text-primary) !important;
	border-radius: 0 999px 999px 0;
	padding: 11px 16px;
}
.acct-rp-card .form-control:focus {
	border-color: var(--purple);
	box-shadow: none;
	background: var(--surface);
}
html.light-mode .acct-rp-card .form-control { background: #fff; color: var(--text-primary) !important; }
.acct-rp-card .submitreg {
	background: linear-gradient(135deg, var(--purple), #f43f5e) !important;
	color: #fff !important;
	border: none !important;
	padding: 11px 26px !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	cursor: pointer;
}
.acct-rp-card .submitreg:hover { transform: translateY(-1px); }

/* ----- Mobile fixes for account pages (<=640px) ----- */
@media (max-width: 640px) {
	/* User: "buttons bumping to 2 rows causing things to bump down too much".
	   With 4 chips at ~108px each, total ~440px doesn't fit in 360px viewport
	   and breaks across 3 rows on iPhone SE. Switch to a horizontally
	   scrollable single row that hides the scrollbar — same pattern as
	   .stream-filters and .discover-greet-chips on mobile (patch 54). */
	.acct-quicklinks {
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 6px;
		margin: 0 -4px 14px;
		padding: 2px 4px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.acct-quicklinks::-webkit-scrollbar { display: none; }
	.acct-quicklink { flex-shrink: 0; padding: 8px 14px; font-size: 12.5px; }

	/* Tighter card padding on mobile to give content more room. */
	.acct-card { padding: 18px 16px 20px; border-radius: 16px; }

	/* User: "text not lining up next to radio/checkboxes" — on mobile the
	   18px input + 12px gap was fine but `align-items: flex-start` paired
	   with `margin-top: 3px` on the input made the radio sit BELOW the
	   title. Use flex-start with no extra margin so the radio's vertical
	   midline matches the title's first cap-height. */
	.acct-priv label.acct-priv-opt,
	.acct-notif label.acct-priv-opt,
	label.acct-priv-opt {
		padding: 12px 14px;
		gap: 10px;
	}
	.acct-priv-opt-title { font-size: 13.5px; }
	.acct-priv-opt-desc  { font-size: 12px; margin-top: 3px; }

	/* Interests grid: tighter rows on mobile. */
	.acct-interests { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
	.acct-interests label.acct-interest { padding: 9px 12px; font-size: 12.5px; }

	/* Save button full-width on mobile so users can't miss it. */
	.acct-actions { justify-content: stretch; }
	.acct-save { width: 100%; justify-content: center; }
}

/* ----- Register-page top spacing tighten (patch 59 follow-on) -----
   User: "while you're at it, fix the register page spacing issues at
   the top". The .auth-wrap padding (12px top) + .discover-bar's own
   ~22px top padding + .auth-shell + .auth-alert margin all stacked,
   producing ~80px of dead space above the welcome callout on mobile.
   Tighten the auth-alert top margin and pull the first .auth-card
   up under it. */
.auth-wrap .auth-shell > .auth-alert:first-child { margin-top: 4px; }
.auth-wrap .auth-shell > form { margin-top: 14px; }
@media (max-width: 640px) {
	.auth-wrap { padding: 8px 12px 48px; }
	.auth-wrap .discover-bar { margin-bottom: 10px; padding: 12px 14px; }
	.auth-wrap .auth-shell > .auth-alert:first-child { margin-top: 0; }
	.auth-wrap .auth-shell > form { margin-top: 10px; }
}

/* ================================================================
   V6.8 patch 60 — Profile hero spacing + always-on compare strip
   ----------------------------------------------------------------
   User reported (May 2026):
     • "Opportunity to fix spacing on profile pages where name and
        icons are displayed."
     • "I liked having the scrollbar for others to compare against.
        Keep that always but show the current person compared as
        the one highlighted."
     • "Be sure to update the top profile header to the person being
        compared against."
     • "On account page create a link with a button at the top for
        people to view their profile page."

   Background: patch 58 turned the hero into a 2-col grid (avatar |
   right-column stack of name → pct → meta → actions). On desktop
   that right column gets ~900px of width but only ~360px of content
   is ever wider than ~200px, so a huge amount of horizontal space
   on the right of the card sits empty while the vertical stack
   makes the card ~270px tall. Also the avatar was `align-self:
   center`, which floats it visually below the name instead of
   anchoring at the title line.

   Patch 60 changes:
     1. Desktop hero → 3-col grid (avatar | text-stack | actions).
        The actions column ("Edit account / Copy share link", or
        "Follow / Message") sits to the RIGHT of the meta chips on
        wide screens, eating the previously-empty horizontal space.
        Card height drops from ~270px to ~170px.
     2. Avatar `align-self: start` (was center) so it anchors to
        the title baseline. Adds 8px top inset for optical balance.
     3. Tighter row-gap (2px), tighter padding, tighter name margin.
     4. `.profile-grid.profile-grid-single` lets self-profile use
        a single-column grid (no breakdown card).
   ================================================================ */
@media (min-width: 880px) {
	.profile-hero-content {
		grid-template-columns: auto 1fr auto;
		column-gap: 22px;
		row-gap: 2px;
		align-items: start;
		padding: 18px 22px 20px;
	}
	.profile-hero-avatar {
		grid-row: 1 / span 3;
		grid-column: 1;
		align-self: start;
		margin-top: 4px;
		width: 80px;
		height: 80px;
	}
	.profile-hero-name {
		grid-column: 2;
		grid-row: 1;
		font-size: 22px;
		line-height: 1.2;
		margin: 0;
	}
	.profile-hero-pct {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		margin-top: 4px;
	}
	.profile-hero-meta {
		grid-column: 2;
		grid-row: 3;
		justify-content: flex-start;
		margin: 8px 0 0;
	}
	.profile-hero-actions {
		/* Right column, spanning the rows so the buttons sit beside
		   the meta strip on desktop instead of stacking below. */
		grid-column: 3;
		grid-row: 1 / span 3;
		align-self: center;
		justify-content: flex-end;
		flex-direction: column;
		gap: 8px;
		margin-top: 0;
		min-width: 180px;
	}
	.profile-hero-actions .profile-action { width: 100%; justify-content: center; }
}

/* On tablet/narrow desktop (641-879px) keep the patch-58 2-col grid
   but with patch-60's tighter spacing. */
@media (min-width: 641px) and (max-width: 879px) {
	.profile-hero-content {
		row-gap: 2px;
		padding: 18px 22px 20px;
	}
	.profile-hero-avatar {
		align-self: start;
		margin-top: 4px;
		width: 78px;
		height: 78px;
	}
	.profile-hero-name { font-size: 22px; line-height: 1.2; margin: 0; }
	.profile-hero-pct { margin-top: 4px; }
	.profile-hero-meta { margin: 8px 0 0; }
	.profile-hero-actions { margin-top: 10px; }
}

/* Self-profile: no match-breakdown card, so the About card alone
   should NOT stay stuck at 50% width with empty whitespace beside it. */
.profile-grid.profile-grid-single {
	grid-template-columns: minmax(0, 1fr) !important;
}
.profile-grid.profile-grid-single .profile-card { max-width: 100%; }

/* ----- Mobile (<=640px) — keep centered stack but make actions row
   inline with meta chips so the hero card is shorter. ----- */
@media (max-width: 640px) {
	.profile-hero-content { padding: 20px 14px 18px; gap: 8px; }
	.profile-hero-avatar { width: 78px; height: 78px; }
	.profile-hero-name { font-size: 20px; margin: 0; }
	.profile-hero-pct { font-size: 12.5px; padding: 6px 12px; }
	.profile-hero-pct strong { font-size: 15px; }
	.profile-hero-meta { gap: 5px 6px; margin-top: 4px; }
	.profile-hero-meta li { font-size: 11.5px; padding: 4px 9px; }
	.profile-hero-actions { gap: 6px; margin-top: 6px; }
	.profile-hero-actions .profile-action { padding: 9px 14px; font-size: 12.5px; }
}

/* Account-page header — "View my profile" CTA that opens above the
   chip nav so users can immediately jump to their public profile.
   Mirrors the gradient .profile-action style. Selector uses the
   `a.acct-profile-cta` compound (specificity 0,1,1) so it ties — and
   because it's later in the cascade, defeats — the global
   `.wrapper a { color: var(--purple) !important }` rule that would
   otherwise leave the button text in faint purple-on-purple. */
.acct-profile-cta-wrap {
	display: flex; justify-content: flex-start;
	margin: 0 0 14px;
}
a.acct-profile-cta,
a.acct-profile-cta:link,
a.acct-profile-cta:visited,
a.acct-profile-cta:hover,
a.acct-profile-cta:focus {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 22px; border-radius: 999px;
	background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
	color: #fff !important;
	font-weight: 700; font-size: 14px;
	border: 1px solid #6d28d9;
	box-shadow: 0 6px 18px -8px rgba(124,58,237,0.6);
	text-decoration: none !important;
	transition: transform .15s ease, box-shadow .15s ease;
}
a.acct-profile-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -10px rgba(124,58,237,0.7);
	color: #fff !important;
}
a.acct-profile-cta i { color: #fff !important; }
@media (max-width: 640px) {
	.acct-profile-cta-wrap { margin-bottom: 10px; }
	a.acct-profile-cta { padding: 10px 18px; font-size: 13px; }
}

/* =====================================================================
   V6.8 patch 61 — Compact image-less cards + filter pillrow polish +
   "scroll for more" hint (May 2026)
   ---------------------------------------------------------------------
   * Music / Local / Place / AI cards that show only an emoji fallback
     were stretched as tall as their image-bearing siblings (220-280px).
     Now capped at ~96px so the card collapses to the body height.
   * Filter pillrow on movies / tv / music / place subpages was visually
     flat — bigger pills, brighter active state, "By" label moved into
     pill chrome, sub-line under section heading restates "showing N
     items, scroll for more".
   * Removed the legacy "Showing 1–24 of N" + bottom paginator since
     infinite scroll handles loading.
   ===================================================================== */

/* (1) Tighter media block when there's no real image to show. The base
   per-cat aspect-ratio + max-height rules at ~line 3142 inflate the
   emoji-only fallback to ~220-280px tall. Lock the blank variant to a
   compact 96px strip so the card height equals the body. */
.discover-card-item .discover-card-media.discover-card-media-blank {
	aspect-ratio: auto !important;
	max-height: 96px !important;
	min-height: 96px !important;
	height: 96px !important;
}
.discover-card-item .discover-card-media.discover-card-media-blank .discover-card-emoji {
	font-size: 42px;
	opacity: 0.55;
}
@media (max-width: 640px) {
	.discover-card-item .discover-card-media.discover-card-media-blank {
		max-height: 80px !important;
		min-height: 80px !important;
		height: 80px !important;
	}
	.discover-card-item .discover-card-media.discover-card-media-blank .discover-card-emoji {
		font-size: 34px;
	}
}

/* (2) Filter pillrow polish for subpages — bigger, more inviting,
   stronger active state that reads as "this is the current view". */
.subpage-pillrow {
	gap: 8px !important;
	margin-bottom: 14px !important;
}
.subpage-pillrow-label {
	font-size: .68rem !important;
	color: var(--text-secondary);
	padding: 6px 8px 6px 2px !important;
}
.subpage-pill {
	font-size: .88rem !important;
	font-weight: 600 !important;
	padding: 8px 16px !important;
	border-radius: 999px !important;
	background: rgba(124,58,237,0.06) !important;
	border: 1px solid rgba(124,58,237,0.18) !important;
	color: var(--text-primary) !important;
	transition: all 0.18s ease;
}
.subpage-pill:hover {
	background: rgba(124,58,237,0.14) !important;
	border-color: rgba(124,58,237,0.42) !important;
	transform: translateY(-1px);
}
.subpage-pill.active {
	background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 60%, #6d28d9 100%) !important;
	color: #fff !important;
	border-color: #6d28d9 !important;
	box-shadow: 0 6px 18px -6px rgba(124,58,237,0.55);
	font-weight: 700 !important;
}
.subpage-pill.active:hover { transform: translateY(-1px); color: #fff !important; }
/* "Recommended" gets a small star icon to underline it's the default smart pick. */
.subpage-pill-rec::before {
	content: "\f005"; /* fas fa-star */
	font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
	font-weight: 900;
	margin-right: 6px;
	font-size: .78rem;
	opacity: 0.85;
}
html.light-mode .subpage-pill {
	background: rgba(124,58,237,0.05) !important;
	border-color: rgba(124,58,237,0.22) !important;
}

/* (3) Result-count line — converted from "Showing N–M of T · …" into a
   single calm sentence: "T items · filters · scroll for more". */
.subpage-result-meta {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
	font-size: .9rem !important;
	color: var(--text-secondary);
	margin: 6px 0 14px !important;
}
.subpage-result-meta strong {
	color: var(--text-primary);
	font-weight: 700;
}
.subpage-result-meta .subpage-scroll-hint {
	display: inline-flex; align-items: center; gap: 6px;
	margin-left: auto;
	font-size: .82rem;
	color: var(--text-secondary);
	opacity: 0.85;
}
.subpage-result-meta .subpage-scroll-hint i {
	font-size: 11px;
	transform: translateY(1px);
}
@media (max-width: 640px) {
	.subpage-result-meta { font-size: .85rem !important; }
	.subpage-result-meta .subpage-scroll-hint { margin-left: 0; font-size: .78rem; }
}

/* (4) Sub-page section heading tighter so the filters sit closer. */
.discover-wrap .discover-section .discover-section-head {
	margin-bottom: 10px;
}

/* (5) Mobile select-chip row — apply same active-state visual lift. */
.subpage-select-chip select {
	font-weight: 600;
}

/* =================================================================
   V6.8 patch 68 — Profile breakdown drill-down + compare-detail page
   =================================================================
   - Make the per-cat .profile-match-row cards clickable (hover state +
     chevron + cursor) when there's data to drill into.
   - New compare-detail.php chrome: hero with both avatars + per-cat
     match%, filter pills (All/Agree/Differ), item rows with both
     users' picks side-by-side.
   ================================================================= */

/* clickable rows on .profile-match-list ----------------------------- */
.profile-match-list a.profile-match-row,
.profile-match-list a.profile-match-row:link,
.profile-match-list a.profile-match-row:visited {
    text-decoration: none;
    color: inherit;
    display: flex;
}
.profile-match-row.is-drillable {
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.18s ease, transform 0.18s ease;
}
.profile-match-row.is-drillable:hover,
.profile-match-row.is-drillable:focus-visible {
    background: rgba(124, 58, 237, 0.08);
    transform: translateX(2px);
    outline: none;
}
html.light-mode .profile-match-row.is-drillable:hover,
html.light-mode .profile-match-row.is-drillable:focus-visible {
    background: rgba(124, 58, 237, 0.06);
}
.profile-match-chev {
    margin-left: 6px;
    opacity: 0.45;
    font-size: 11px;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.profile-match-row.is-drillable:hover .profile-match-chev {
    opacity: 1;
    transform: translateX(2px);
}
.profile-match-foot {
    margin: 14px 4px 0;
    padding: 10px 12px;
    font-size: 12px;
    color: var(--text-secondary, #a8a4c4);
    background: rgba(124, 58, 237, 0.05);
    border-radius: 10px;
    border-left: 3px solid rgba(124, 58, 237, 0.3);
}
.profile-match-foot i { color: var(--purple, #7c3aed); margin-right: 4px; }

/* compare-detail.php hero ------------------------------------------ */
.cd-hero {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    padding: 22px 22px;
    background: var(--surface, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 18px;
    margin-bottom: 18px;
    background-image: radial-gradient(ellipse at top, rgba(124, 58, 237, 0.10), transparent 70%);
}
.cd-hero-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    min-width: 0;
}
.cd-hero-them { align-items: flex-start; text-align: left; }
.cd-hero-me   { align-items: flex-end;   text-align: right; }
.cd-avatar img {
    border-radius: 50%;
    border: 2px solid rgba(124, 58, 237, 0.4);
    background: rgba(0, 0, 0, 0.2);
    object-fit: cover;
    display: block;
}
.cd-hero-name {
    font-weight: 700;
    font-size: 16px;
    color: var(--text-primary, #fff);
}
.cd-hero-side a.cd-hero-name,
.cd-hero-side a.cd-hero-name:link,
.cd-hero-side a.cd-hero-name:visited { color: var(--text-primary, #fff) !important; text-decoration: none; }
.cd-hero-side a.cd-hero-name:hover { color: var(--purple, #7c3aed) !important; }
.cd-hero-loc { font-size: 12px; color: var(--text-secondary, #a8a4c4); }
.cd-hero-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 14px 22px;
    border-radius: 14px;
    min-width: 130px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.cd-hero-score-pct {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.cd-hero-score-sub { font-size: 11px; color: var(--text-secondary, #a8a4c4); text-transform: uppercase; letter-spacing: 0.04em; }
.cd-hero-score-high .cd-hero-score-pct { color: #22c55e; }
.cd-hero-score-mid  .cd-hero-score-pct { color: #f59e0b; }
.cd-hero-score-low  .cd-hero-score-pct { color: #f43f5e; }
.cd-hero-score-na   .cd-hero-score-pct { color: var(--text-secondary, #a8a4c4); font-size: 22px; }
.cd-hero-score-high { border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.05); }
.cd-hero-score-mid  { border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.05); }
.cd-hero-score-low  { border-color: rgba(244, 63, 94, 0.4); background: rgba(244, 63, 94, 0.05); }

/* compare-detail summary + filter pills ---------------------------- */
.cd-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
    padding: 0 4px;
}
.cd-summary-stats { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.cd-stat { font-size: 13px; color: var(--text-secondary, #a8a4c4); }
.cd-stat strong { color: var(--text-primary, #fff); margin-right: 2px; font-variant-numeric: tabular-nums; }
.cd-stat-agree i  { color: #22c55e; margin-right: 3px; }
.cd-stat-differ i { color: #f43f5e; margin-right: 3px; }
.cd-filters { display: flex; gap: 6px; }
.cd-filters a.cd-filter,
.cd-filters a.cd-filter:link,
.cd-filters a.cd-filter:visited {
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #fff) !important;
    background: rgba(124, 58, 237, 0.10);
    border: 1px solid rgba(124, 58, 237, 0.22);
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.cd-filters a.cd-filter:hover { background: rgba(124, 58, 237, 0.20); }
.cd-filters a.cd-filter.is-active {
    background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 60%, #6d28d9 100%);
    color: #fff !important;
    border-color: #6d28d9;
    box-shadow: 0 6px 22px rgba(124, 58, 237, 0.45);
}
.cd-filters a.cd-filter-agree.is-active  { background: linear-gradient(135deg, #4ade80, #16a34a); border-color: #16a34a; box-shadow: 0 6px 22px rgba(34, 197, 94, 0.35); }
.cd-filters a.cd-filter-differ.is-active { background: linear-gradient(135deg, #fb7185, #e11d48); border-color: #e11d48; box-shadow: 0 6px 22px rgba(244, 63, 94, 0.35); }

/* compare-detail item rows ----------------------------------------- */
.cd-list { display: flex; flex-direction: column; gap: 10px; }
.cd-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: var(--surface, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-left-width: 4px;
    border-radius: 14px;
}
.cd-row-agree  { border-left-color: #22c55e; background-image: linear-gradient(90deg, rgba(34, 197, 94, 0.06), transparent 30%); }
.cd-row-differ { border-left-color: #f43f5e; background-image: linear-gradient(90deg, rgba(244, 63, 94, 0.06), transparent 30%); }
.cd-row-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.cd-row-title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary, #fff);
    line-height: 1.3;
}
.cd-row-sub { font-size: 12px; color: var(--text-secondary, #a8a4c4); }
.cd-row-status {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cd-row-agree  .cd-row-status { color: #22c55e; background: rgba(34, 197, 94, 0.12); }
.cd-row-differ .cd-row-status { color: #f43f5e; background: rgba(244, 63, 94, 0.12); }
.cd-row-votes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.cd-row-vote {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.18);
    min-width: 0;
}
html.light-mode .cd-row-vote { background: rgba(0, 0, 0, 0.04); }
.cd-row-vote-who {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #a8a4c4);
    font-weight: 600;
}
.cd-vote {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #fff);
    overflow-wrap: anywhere;
}
.cd-vote i { font-size: 13px; }
.cd-vote-up    { color: #22c55e; }
.cd-vote-down  { color: #f43f5e; }
.cd-vote-pick  { color: var(--text-primary, #fff); }
.cd-vote-pick i { color: #a78bfa; }

/* compare-detail empty + pager ------------------------------------- */
.cd-empty { padding: 28px 16px; text-align: center; }
.cd-empty p { margin: 0 0 8px; }
.cd-empty-hint { font-size: 13px; color: var(--text-secondary, #a8a4c4); }
.cd-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 22px;
    padding: 14px;
}
.cd-pager-state { font-size: 13px; color: var(--text-secondary, #a8a4c4); font-variant-numeric: tabular-nums; }
.cd-pager a.cd-pager-btn,
.cd-pager a.cd-pager-btn:link,
.cd-pager a.cd-pager-btn:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.10);
    border: 1px solid rgba(124, 58, 237, 0.22);
    color: var(--text-primary, #fff) !important;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: background 0.18s ease;
}
.cd-pager a.cd-pager-btn:hover { background: rgba(124, 58, 237, 0.20); }

/* compare-detail mobile -------------------------------------------- */
@media (max-width: 640px) {
    .cd-hero { grid-template-columns: auto 1fr; gap: 12px; padding: 14px; }
    .cd-hero-them { grid-row: 1; }
    .cd-hero-me   { grid-row: 2; align-items: flex-start; text-align: left; }
    .cd-hero-score { grid-row: 1 / span 2; grid-column: 2; min-width: 100px; padding: 10px 14px; }
    .cd-hero-score-pct { font-size: 26px; }
    .cd-summary { flex-direction: column; align-items: stretch; }
    .cd-summary-stats { justify-content: space-between; }
    .cd-filters { justify-content: stretch; }
    .cd-filters a.cd-filter { flex: 1 1 0; text-align: center; }
    .cd-row-votes { grid-template-columns: 1fr; }
    .cd-row-head { flex-wrap: wrap; }
}

/* =================================================================
   V6.8 patch 71 — Uniform card-image heights in the mixed stream
                 + much shorter blank/emoji-only thumbs on desktop
   =================================================================
   The For-You / discover mixed stream interleaves cats with very
   different aspect ratios (movies 16/10 → 170px banner, music 1/1
   → 220px square, local 4/3 → 240px). Real-image cards looked fine
   at 170px but blank/emoji-only fallbacks (Music, Local without
   photos, Boardgames) towered over the row, breaking the visual
   grid. Lock everything in [data-mixed] streams to the same 170px
   banner. On desktop also collapse the blank-emoji thumb to ~110px
   so an empty fallback isn't louder than a real cover image.
   Per-cat tabs (no [data-mixed]) keep their original taller layouts.
   ================================================================= */
.discover-stream[data-mixed] .discover-card-item .discover-card-media {
	aspect-ratio: 16 / 10 !important;
	max-height: 170px !important;
}
/* keep the existing movies/tv hover-unfurl behaviour by NOT overriding
   the :hover rule — the !important above only hits the base state. The
   per-cat :hover rules at line 3157+ still bump movies/tv to 2/3 / 400px.
   But we DO need the new uniform height to apply to travel/local/music/
   boardgames, which never had hover state. Confirmed visually: these
   cats don't define :hover overrides on .discover-card-media. */

/* Boardgames default banner: keep its pink gradient backdrop visible.
   The base rule at line 3192 sets a pink bg — the new uniform height
   above wins, but the bg follows from .discover-card-item[data-cat=...] */

@media (min-width: 601px) {
	/* Blank-emoji fallback thumb: be small and quiet on desktop. Mobile
	   keeps its current sizing because emoji at small widths fills the
	   tile naturally and there's no "hand-me-down" cropping issue. */
	.discover-card-media-blank {
		aspect-ratio: auto !important;
		max-height: 110px !important;
		min-height: 110px !important;
	}
	.discover-card-media-blank .discover-card-emoji {
		font-size: 44px;
	}
}

/* =================================================================
   V6.8 patch 72 — Connect tab matches the other Discover sub-pages
   =================================================================
   Connect tab's bespoke "glass card → horizontal scroll-snap rows of
   200px tiles" looked nothing like the other tabs (Movies / TV /
   Music / Travel / Local / Boardgames), which use a flat
   .discover-section + responsive .discover-stream grid + rounded
   .discover-card chrome.

   This patch:
   1. Drops the Connect-only glass-card wrapper so the section sits
      flat like every other tab.
   2. Converts each .connect-row-tiles from a horizontal flex carousel
      into a responsive CSS grid mirroring .discover-stream's
      auto-fill / minmax(220px, 1fr) pattern.
   3. Restyles .connect-tile to read like a .discover-card (full-cell
      width, larger avatar, soft shadow on hover, generous padding).
   4. Inlines .connect-row-head as a discover-section-style sub-bar
      so the per-row dividers feel like the rest of the discover hub.
   ================================================================= */

/* (1) Drop the bespoke glass wrapper — let .connect-section inherit
       the flat .discover-section spacing every other tab uses. We
       use !important to defeat the earlier "(#5) Glass card" block
       at line ~5377 without rewriting that block. */
.discover-section.connect-section {
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin-top: 0 !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	box-shadow: none !important;
}
html.light-mode .discover-section.connect-section {
	background: none !important;
	border: none !important;
}

/* (2) Convert the horizontal flex-scroll row into a responsive grid.
       Mirrors .discover-stream's auto-fill / minmax(220px, 1fr) so
       Connect tiles flow into the same column count as item cards on
       any viewport. Defeat the existing flex/scroll-snap rules from
       line ~4235 with !important. */
.discover-section.connect-section .connect-row-tiles {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
	gap: 18px !important;
	overflow: visible !important;
	scroll-snap-type: none !important;
	padding: 4px 0 4px !important;
}
@media (max-width: 600px) {
	.discover-section.connect-section .connect-row-tiles {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
		gap: 12px !important;
	}
}

/* (3) Tile chrome that matches .discover-card. Full-cell width (no
       fixed 200px), 16px radius, surface bg, hover lift + shadow. */
.discover-section.connect-section .connect-tile {
	width: 100% !important;
	flex: initial !important;
	scroll-snap-align: none !important;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 18px 14px 14px;
	gap: 12px;
	transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.discover-section.connect-section .connect-tile:hover {
	transform: translateY(-3px);
	border-color: var(--purple-border, rgba(124,58,237,0.45));
	box-shadow: 0 12px 32px rgba(0,0,0,0.35);
	background: rgba(124,58,237,0.04);
}
html.light-mode .discover-section.connect-section .connect-tile:hover {
	box-shadow: 0 10px 28px rgba(124,58,237,0.18);
	background: rgba(124,58,237,0.04);
}
/* Larger avatar to match the card aesthetic (was 56px → 72px). */
.discover-section.connect-section .connect-tile-avatar img {
	width: 72px; height: 72px;
}
.discover-section.connect-section .connect-tile-name {
	font-size: 0.95rem;
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.discover-section.connect-section .connect-tile-meta {
	font-size: 12px;
	color: var(--text-secondary, #a8a4c4);
	text-align: center;
}
.discover-section.connect-section .connect-tile-pct {
	font-size: 12px;
	padding: 4px 12px;
}
/* Action chips horizontal at the bottom (matches .discover-card-actions). */
.discover-section.connect-section .connect-tile-actions {
	flex-direction: row !important;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
	padding-top: 10px;
	border-top: 1px solid var(--border-soft, rgba(255,255,255,0.06));
}
.discover-section.connect-section .connect-tile-act {
	flex: 1 1 0;
	min-width: 0;
	padding: 7px 8px;
	font-size: 11.5px;
}
@media (max-width: 600px) {
	.discover-section.connect-section .connect-tile { padding: 14px 10px 10px; }
	.discover-section.connect-section .connect-tile-avatar img { width: 60px; height: 60px; }
	.discover-section.connect-section .connect-tile-act { font-size: 11px; padding: 6px 6px; }
}

/* (4) Per-row sub-head feels like a discover section divider
       instead of a tiny uppercase chip floating above a carousel. */
.discover-section.connect-section .connect-row {
	margin-top: 24px;
}
.discover-section.connect-section .connect-row:first-of-type {
	margin-top: 14px;
}
.discover-section.connect-section .connect-row-head {
	font-size: 13px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0.01em;
	color: var(--text-primary);
	padding-bottom: 8px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--border-soft, rgba(255,255,255,0.06));
}
.discover-section.connect-section .connect-row-head i { color: var(--purple); }
.discover-section.connect-section .connect-row-more {
	font-size: 12px;
	text-transform: none;
	letter-spacing: 0;
}
/* Drop the +divider between rows since each row now has its own header
   underline — double-divider would be visually noisy. */
.discover-section.connect-section .connect-row + .connect-row {
	border-top: none !important;
	padding-top: 0 !important;
	margin-top: 24px !important;
}
.discover-section.connect-section .connect-tab-foot {
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--border-soft, rgba(255,255,255,0.06));
}

/* =================================================================
   V6.8 patch 73 — Default emoji fallback thumbs: shrink aggressively
   =================================================================
   When a card has no real image, we used to show a 96x222 strip with
   a 42px emoji at 0.55 opacity (per patches 70/71). The emoji still
   visually dominated the card. Per user request: "wherever we are
   using default icons, like music, make the images very small."

   Fix: Push the blank thumb down to ~64px tall with a 24px emoji on
   desktop (~50px / 18px on mobile), at 0.4 opacity so it reads as a
   quiet category marker rather than the centerpiece. Specificity is
   high enough (0,4,1) and !important is used on the box dims to
   defeat the earlier patch 70/71 blocks at line ~8370 / ~8794
   without rewriting them.
*/
.discover-card-item .discover-card-media.discover-card-media-blank {
	max-height: 64px !important;
	min-height: 64px !important;
	height: 64px !important;
}
.discover-card-item .discover-card-media.discover-card-media-blank .discover-card-emoji {
	font-size: 24px;
	opacity: 0.4;
	line-height: 1;
}
@media (max-width: 640px) {
	.discover-card-item .discover-card-media.discover-card-media-blank {
		max-height: 50px !important;
		min-height: 50px !important;
		height: 50px !important;
	}
	.discover-card-item .discover-card-media.discover-card-media-blank .discover-card-emoji {
		font-size: 18px;
	}
	/* Pct + tag chips were sized for the taller strip; tighten them so
	   they don't look bolted-on at this height. */
	.discover-card-item .discover-card-media.discover-card-media-blank .discover-card-tag,
	.discover-card-item .discover-card-media.discover-card-media-blank .discover-card-pct {
		font-size: 10px;
		padding: 3px 7px;
		top: 6px;
	}
}
/* Same chip tightening on desktop — they were sized for 220px tall
   media boxes, look chunky on the new 64px strip. */
.discover-card-item .discover-card-media.discover-card-media-blank .discover-card-tag,
.discover-card-item .discover-card-media.discover-card-media-blank .discover-card-pct {
	font-size: 10px;
	padding: 3px 8px;
	top: 8px;
}
.discover-card-item .discover-card-media.discover-card-media-blank .discover-card-save {
	top: 8px;
}


/* =================================================================
   V6.8 patch 74 — Hide redundant category tag on single-cat pages
   =================================================================
   On music.php / movies.php / tv.php / travel.php / local.php /
   boardgames.php (and discover.php?tab=cat), every card on the page
   is the same category, so the "Music" / "Movies" pill in the top-
   left of every thumbnail is just noise. Only the For-You mixed
   stream actually mixes categories.

   The mixed stream is marked `<div class="discover-stream"
   data-mixed="1">` (discover.php:1778) — single-cat streams have no
   data-mixed attr (discover.php:1703, subpage.php:1124).

   Hide the tag in non-mixed streams. Social cards inside the mixed
   stream still show category context via .discover-card-social-cat
   (different class, untouched by this rule).
*/
.discover-stream:not([data-mixed]) .discover-card-tag {
	display: none !important;
}


/* =================================================================
   V6.8 patch 76 — "View my profile" CTA inline with account heading
   =================================================================
   Across editinfo / answers / notify-prefs / reset-password the
   "View my profile" gradient button now lives inside the .discover-bar
   header (right-aligned via margin-left:auto) instead of below it as
   a full-width row. Tighter chrome, identical placement on every
   account page, and the chip nav still sits underneath.
*/
.discover-bar a.acct-profile-cta {
	margin-left: auto;
	padding: 8px 16px;
	font-size: 13px;
	box-shadow: 0 4px 14px -8px rgba(124,58,237,0.55);
}
.discover-bar a.acct-profile-cta i { font-size: 12px; }
@media (max-width: 600px) {
	/* On narrow screens .discover-bar wraps; keep the CTA full-width on
	   its own row instead of squashed next to a long title. */
	.discover-bar a.acct-profile-cta {
		margin-left: 0;
		width: 100%;
		justify-content: center;
		padding: 10px 16px;
		font-size: 13px;
	}
}



/* =============================================================
   V6.8 patch 77 — Messaging UX: oldest at top, newest at bottom,
   composer always within thumb reach.

   Until now, .msg-thread-body rendered DOM in DESC order (newest
   first) and *displayed* them that way, which placed the composer
   at the very bottom of the page — on mobile that meant scrolling
   past the entire history before you could type a reply.

   Fix: flex-direction:column-reverse flips the visual order so
   the oldest message sits at the top, newest just above the
   composer (the standard chat layout every messaging app uses).
   No PHP/SQL changes: the DOM stays newest-first, the .weird-
   infscroll loader stays at the END of DOM = the visual TOP,
   which is exactly where "load older" belongs.

   Also: cap the whole thread (head+body+composer) to the viewport
   on mobile so the composer is one tap away, not buried below
   the messages.

   NOTE: messages.php has an inline <style> with .msg-thread-body
   rules that loads AFTER this external sheet, so we boost
   specificity to .msg-shell .msg-thread-body (0,2,0) to win the
   cascade. The same trick is used by the mobile rules below.
   ============================================================= */
.msg-shell .msg-thread-body {
        flex-direction: column-reverse;
}
@media (max-width: 860px) {
        /* When the user is in the thread pane on mobile, lock the
           entire .msg-thread to the viewport so head + body + composer
           always fit on screen and composer stays pinned at the bottom. */
        .msg-shell[data-mobile-pane="thread"] .msg-thread {
                height: calc(100vh - 90px);
                min-height: calc(100vh - 90px);
                max-height: calc(100vh - 90px);
        }
        .msg-shell[data-mobile-pane="thread"] .msg-thread-body {
                flex: 1 1 auto !important;
                max-height: none !important;
                min-height: 0 !important;
                overflow-y: auto !important;
        }
}

/* =====================================================================
   V6.8 patch 87 — Geo preferences picker (editinfo.php) + "filtering by"
   chip (place.php result-meta).

   Lets users opt into a set of US metros so the local-content stream and
   place.php local rows bias toward those cities. Travel/destination rows
   are NEVER filtered. Mirrors the .acct-interest chip pattern from patch
   47 for dark + light mode contrast.
   ===================================================================== */
.acct-geo-toolbar {
	display: flex; align-items: center; gap: 10px;
	flex-wrap: wrap;
	margin: 4px 0 12px;
}
.acct-geo-search {
	position: relative; flex: 1 1 220px; min-width: 200px;
}
.acct-geo-search i {
	position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
	color: var(--text-secondary); pointer-events: none; font-size: 13px;
}
.acct-geo-search input {
	width: 100%;
	padding: 9px 12px 9px 34px;
	border-radius: 999px;
	border: 1px solid var(--border, rgba(255,255,255,0.12));
	background: rgba(255,255,255,0.04);
	color: var(--text-primary);
	font-size: 13px;
	outline: none;
	transition: border-color .15s ease, background-color .15s ease;
}
.acct-geo-search input:focus {
	border-color: var(--purple);
	background: rgba(124,58,237,0.06);
}
html.light-mode .acct-geo-search input {
	background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.10);
}
html.light-mode .acct-geo-search input:focus {
	background: rgba(124,58,237,0.06); border-color: var(--purple);
}
.acct-geo-count {
	font-size: 12px; font-weight: 700;
	color: var(--text-secondary);
	padding: 6px 12px; border-radius: 999px;
	background: rgba(124,58,237,0.10);
	border: 1px solid rgba(124,58,237,0.20);
	white-space: nowrap;
}
.acct-geo-count.has-selection { color: var(--purple); }
.acct-geo-clear {
	font-size: 12px; font-weight: 700;
	padding: 6px 12px; border-radius: 999px;
	background: transparent;
	color: var(--text-secondary);
	border: 1px solid var(--border, rgba(255,255,255,0.12));
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}
.acct-geo-clear:hover { color: var(--purple); border-color: var(--purple); }
.acct-geos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 8px;
}
.acct-geos label.acct-geo {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 10px 14px; border-radius: 12px;
	border: 1px solid var(--border, rgba(255,255,255,0.12));
	background: rgba(124,58,237,0.06);
	color: var(--text-primary);
	cursor: pointer; margin: 0;
	font-size: 13px; font-weight: 600;
	transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.acct-geos label.acct-geo:hover { border-color: var(--purple); transform: translateY(-1px); }
.acct-geos label.acct-geo input { display: none; }
.acct-geos label.acct-geo.is-active {
	background: linear-gradient(135deg, rgba(124,58,237,0.22), rgba(244,63,94,0.16));
	border-color: var(--purple);
}
.acct-geo-name { font-weight: 700; }
.acct-geo-state {
	font-size: 11px; font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--text-secondary);
	background: rgba(255,255,255,0.04);
	padding: 2px 6px; border-radius: 6px;
}
.acct-geos label.acct-geo.is-active .acct-geo-state {
	color: var(--purple);
	background: rgba(124,58,237,0.15);
}
.acct-geo-empty {
	grid-column: 1 / -1;
	padding: 24px 16px; border-radius: 12px;
	text-align: center;
	color: var(--text-secondary);
	font-size: 13px;
	border: 1px dashed var(--border, rgba(255,255,255,0.12));
}
/* Native `hidden` attribute toggled by JS handles show/hide. */
html.light-mode .acct-geos label.acct-geo {
	background: rgba(124,58,237,0.05);
	border-color: rgba(0,0,0,0.08);
}
html.light-mode .acct-geo-state {
	background: rgba(0,0,0,0.04);
	color: var(--text-secondary);
}
html.light-mode .acct-geo-count {
	background: rgba(124,58,237,0.10);
	border-color: rgba(124,58,237,0.25);
}

/* Compact "Filtering by your N places · Show all" indicator on place.php. */
.hub-geo-chip {
	display: inline-flex; align-items: center; gap: 6px;
}
.hub-geo-chip .hub-geo-clear {
	margin-left: 4px;
	font-size: 11px;
	font-weight: 700;
	color: var(--purple);
	text-decoration: none;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(124,58,237,0.10);
	border: 1px solid rgba(124,58,237,0.25);
	transition: background-color .15s ease, color .15s ease;
}
.hub-geo-chip .hub-geo-clear:hover {
	background: rgba(124,58,237,0.20);
	color: var(--text-primary);
}

@media (max-width: 600px) {
	.acct-geos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 6px !important; }
	.acct-geos label.acct-geo { padding: 8px 10px !important; font-size: 12.5px !important; }
	.acct-geo-state { font-size: 10px !important; padding: 2px 5px !important; }
}