/* ============================================================
   Discovery page specifics
   ============================================================ */

/* Discovery Info Row - description left, likes count right */
#page-discovery .info-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-base);
	padding-bottom: var(--space-3);
}

/* == DISCOVERY FILTERS == */
/* Discovery filters modal - wider on desktop */
@media (min-width: 768px) {
	#discovery-filters { max-width: 540px; }
}

/* Filter button in Discovery header */
.discovery-filter-btn .filter-icon {
	width: 18px;
	height: 18px;
}

.discovery-filter-btn .filter-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: var(--primary);
	color: var(--button-text);
	font-size: 11px;
	font-weight: 600;
	border-radius: var(--radius-md);
}



/* Filter Item */
.filter-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-3) 0;
	gap: var(--space-px);
}
@media (max-width: 768px) {
	.filter-item {
		font-size:var(--text-sm);
	}
}


.filter-item:not(:last-child) {
	border-bottom: 1px solid var(--border);
}
.filter-item-select {
	cursor: pointer;
}


.filter-label {
	flex: 1;
	min-width: 0;
}

.filter-title {
	gap: var(--space-2);
	font-weight: 500;
	margin-bottom: 2px;
}

.filter-unit-toggle {
	display: inline-block;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	margin-left: var(--space-2);
	vertical-align: middle;
}

.filter-unit-toggle .unit-btn {
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	font-weight: 400;
	border: none;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	transition: all 0.15s;
}

.filter-unit-toggle .unit-btn.active {
	background: var(--accent);
	color: var(--foreground);
}

.filter-description {
	display: block;
	font-size: var(--text-xs);
	color: var(--muted);
}

/* Filter Select Dropdown */
.filter-select {
	padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	color: var(--foreground);
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	max-width: 130px;
	flex-shrink: 0;
}

.filter-select:focus {
	outline: none;
	border-color: var(--primary);
}

/* Age Range Inputs */
.filter-age-inputs {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.filter-age-input {
	width: 60px;
	padding: var(--space-2);
	font-size: var(--text-sm);
	background: var(--accent);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	color: var(--foreground);
	text-align: center;
	-moz-appearance: textfield;
}

.filter-age-input::-webkit-outer-spin-button,
.filter-age-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.filter-age-input:focus {
	outline: none;
	border-color: var(--primary);
}

.filter-age-separator {
	color: var(--muted);
	font-size: var(--text-sm);
}

/* Distance Slider */
.filter-distance-control {
	display: flex;
	align-items: center;
	gap: var(--gap-base);
	min-width: 140px;
}

.filter-distance-slider {
	flex: 1;
	height: 4px;
	-webkit-appearance: none;
	appearance: none;
	background: var(--border);
	border-radius: var(--radius-2xs);
	cursor: pointer;
}

.filter-distance-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	background: var(--primary);
	border-radius: var(--radius-full);
	cursor: pointer;
}

.filter-distance-slider::-moz-range-thumb {
	width: 18px;
	height: 18px;
	background: var(--primary);
	border-radius: var(--radius-full);
	cursor: pointer;
	border: none;
}

.filter-distance-value {
	font-size: var(--text-sm);
	min-width: 45px;
	text-align: right;
}

/* Filter Item - Disabled state */
.filter-item-disabled {
	opacity: 0.7;
	flex-wrap: wrap;
}

.filter-item-disabled .filter-title,
.filter-item-disabled .filter-description {
	color: var(--muted);
}

.filter-lock-icon {
	width: 20px;
	height: 20px;
	color: var(--muted);
	flex-shrink: 0;
}

/* Filter Hint (unlock requirement) */
.filter-hint {
	width: 100%;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: var(--muted);
	padding-top: var(--space-2);
}

/* Filter Item - Vertical layout for radio groups */
.filter-item-vertical {
	flex-direction: column;
	align-items: flex-start;
}

.filter-item-vertical .filter-label {
	margin-bottom: var(--space-3);
}

/* Radio Group */
.filter-radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	width: 100%;
}

.filter-radio-option {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	background: var(--accent);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all 0.15s;
}

.filter-radio-option input[type="radio"] {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--primary);
}

.filter-radio-option input[type="radio"]:checked + .filter-radio-label {
	font-weight: 500;
	color: var(--foreground);
}

.filter-radio-label {
	font-size: var(--text-sm);
	color: var(--muted);
}



/* Empty State with Filter Suggestions */
.empty-state-filters {
	margin-top: var(--space-4);
	padding: var(--space-4);
	background: var(--accent);
	border-radius: var(--radius-lg);
}

.empty-state-filters h4 {
	font-size: var(--text-sm);
	font-weight: 600;
	margin: 0 0 0.5rem 0;
}

.empty-state-filters p {
	font-size: var(--text-sm);
	color: var(--muted);
	margin: 0 0 0.75rem 0;
}

.empty-state-filters .active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.empty-state-filters .filter-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-2);
	background: var(--border);
	border-radius: var(--radius-xs);
	font-size: var(--text-xs);
	color: var(--foreground);
}

.empty-state-filters .btn-relax-filters {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	background: var(--primary);
	color: var(--button-text);
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s;
}

/* Filter Link - inline clickable text that opens filter modal */
.filter-link {
	background: none;
	border: none;
	padding: 0;
	color: var(--primary);
	font-size: inherit;
	font-weight: 500;
	cursor: pointer;
	text-underline-offset: 2px;
}

.empty-state-filters .filter-link {
	display: block;
	margin-top: var(--space-3);
	font-size: var(--text-sm);
}

/* Selected radio option styling */
.filter-radio-option:has(input:checked) {
	background: var(--primary);
	background: color-mix(in srgb, var(--primary) 15%, transparent);
	border-color: var(--primary);
}

/* Filter Modal Footer */
.filter-modal-footer {
	display: flex;
	gap: var(--gap-base);
	padding: var(--space-4) var(--space-5);
	border-top: 1px solid var(--border);
}

/* Filter Actions - inline action buttons (for settings page) */
.filter-actions {
	display: flex;
	gap: var(--gap-base);
	padding-top: var(--space-6);
	margin-top: var(--space-4);
	border-top: 1px solid var(--border);
}

.filter-actions .btn {
	flex: 1;
}

/* == ProfileCard - Unified Profile Display Component == */

/* Swipe action labels */
.swipe-label {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: var(--text-2xl);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: var(--space-2) var(--space-6);
	border-radius: var(--radius-md);
	border: 3px solid;
	pointer-events: none;
	z-index: 10;
	text-shadow: var(--text-shadow-sm);
}

.swipe-label-left {
	color: #fff;
	background: rgba(220, 38, 38, 0.9);
	border-color: var(--error);
	transform: translate(-50%, -50%) rotate(-15deg);
}

.swipe-label-right {
	color: #fff;
	background: rgba(22, 163, 74, 0.9);
	border-color: var(--success);
	transform: translate(-50%, -50%) rotate(15deg);
}



/* ============================================================
   Likes page
   ============================================================ */


.likes-counter {
	font-size: var(--text-sm);
	color: var(--muted);
}

#page-likes .deck-container {
	flex: 1;
	padding: 0 var(--space-4);
	position: relative;
	overflow: hidden;
}

/* Empty/Loading States */
#page-likes .loading-state,
#page-likes .error-state,
#page-likes .empty-state {
	text-align: center;
	padding: var(--space-12) var(--space-4);
	min-width:30%;
	color: var(--muted);
	align-items: center;
}
#page-likes .empty-state.card {
	padding:var(--padding-base);
}
@media (min-width: 768px) {
	#page-likes .empty-state.card {
	}
}

#page-likes .empty-state .empty-icon {
	font-size: 4rem;
	margin: 0 auto var(--margin-base);
}

#page-likes .empty-state h2 {
	margin: 0 0 0.5rem;
}

#page-likes .empty-state p {
	color: var(--muted);
	margin: 0 0 1.5rem;
}

#page-likes .card,
#page-likes .card[data-size="compact"] {
	padding:0;
}


/* ==================== Who Liked Me Page ==================== */


/* Like Card */
.like-card {
	width: 100%;
	max-width: 400px;
	border-radius: var(--card-radius);
	overflow: hidden;
	position: relative;
	touch-action: pan-y;
	user-select: none;
}

.like-card.swiping-left {
	transform: translateX(-20px) rotate(-3deg);
	opacity: 0.8;
}

.like-card.swiping-right {
	transform: translateX(20px) rotate(3deg);
	opacity: 0.8;
}

.like-card figure {
	position: relative;
	aspect-ratio: 4/5;
	overflow: hidden;
	background: var(--accent);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
	border-radius: var(--card-radius);
	border: var(--profile-border-width) var(--profile-border-style)	var(--profile-border-color);
}

.like-card figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.like-card .medals {
	top: var(--space-4);
	right: var(--space-4);
}

.match-overlay {
	position: absolute;
	top: var(--space-3);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-8);
	border-radius: var(--radius-full);
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(8px);
	color: #fff;
	font-size: var(--text-md);
	font-weight: 400;
	line-height:1.3;
	white-space: nowrap;
	z-index: 5;
	pointer-events: none;
}

/* Like Card Actions */
.like-card footer {
	display: flex;
	justify-content: center;
	gap: var(--gap-base);
	padding: var(--space-4) 0 var(--space-8);
	align-items: center;
}

.like-card footer .action-btn {
	flex-direction: column;
	width: auto;
	height: auto;
	padding: 0;
	background: transparent;
	border: none;
	align-items: center;
	gap: 0;
	cursor: pointer;
	transition: all 0.2s ease;
}

/* Circle buttons (Pass, Message, Like) - icon gets the circle */
.like-card footer [data-action="pass"] > svg,
.like-card footer [data-action="message"] > svg,
.like-card footer [data-action="like"] > svg {
	width: 64px;
	height: 64px;
	padding: 16px;
	border-radius: var(--radius-full);
	border: 2px solid var(--border);
	background: var(--card-bg);
	box-sizing: border-box;
	color: var(--muted);
}

.like-card footer [data-action="pass"] > svg:hover,
.like-card footer [data-action="message"] > svg:hover,
.like-card footer [data-action="like"] > svg:hover {
	border-color: var(--primary);
}

/* Label below the circle */
.like-card footer span {
	font-size: var(--text-xs);
	margin-top: 8px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
	color: var(--muted);
	display: block;
}

/* Liked state for circle buttons */
.like-card footer [data-action="like"].liked > svg {
	border-color: var(--profile-like-border);
	background: var(--profile-like-bg);
	color: var(--profile-like-text);
}

/* Navigation buttons - no circle, just icon + label */
.like-card footer [data-action="nav"] {
	border: none;
	background: transparent;
	color: var(--muted);
	width: auto;
	min-width: var(--icon-3xl);
	flex-direction: column;
	align-items: center;
}

/* Push prev to left edge, next to right edge */
.like-card footer [data-action="nav"]:first-child {
	margin-right: auto;
}

.like-card footer [data-action="nav"]:last-child {
	margin-left: auto;
}

.like-card footer [data-action="nav"]:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

/* Username overlay on photo */
.like-card figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--space-8) var(--space-4) var(--space-4);
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.like-card figcaption > div {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.like-card figcaption .location {
	color: rgba(255, 255, 255, 0.8);
	font-size: var(--text-sm);
	margin: 0;
}

.like-card figcaption h2 {
	color: white;
	font-size: var(--text-2xl);
	margin: 0;
}

.like-card figcaption .btn {
	margin-left: var(--space-2);
}

/* Match emoji style */
.match-celebration .match-emoji {
	font-size: 4rem;
	margin-bottom: var(--margin-base);
}

/* Blurred photo - only blur the image, not overlays */
.like-card figure.blurred img {
	filter: blur(20px);
}

/* Unlock overlay for blurred cards - NOT blurred */
.unlock-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--space-8);
	padding-top: var(--space-12);
	color: var(--foreground);
	z-index: 5;
}

.unlock-overlay h3 {
	font-size: var(--text-2xl);
	margin: var(--margin-base) 0 var(--space-2);
	color:var(--primary);
}

.unlock-overlay > p {
	font-size: var(--text-sm);
	margin-bottom: var(--margin-base);
}


.match-celebration {
	padding: var(--space-8) var(--space-4);
	background: linear-gradient(135deg, var(--primary) 0%, #ff6b9d 100%);
	color: white;
}

.match-celebration h2 {
	margin: 0 0 0.5rem;
	font-size: var(--text-3xl);
}

.match-celebration p {
	opacity: 0.9;
}

.match-photos {
	display: flex;
	justify-content: center;
	gap: var(--gap-base);
	padding: var(--space-6);
	margin-top: -2rem;
}

.match-photo {
	width: 80px;
	height: 80px;
	border-radius: var(--avatar-radius);
	object-fit: cover;
	border: var(--avatar-border-width) var(--avatar-border-style) var(--avatar-border-color);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.match-actions {
	padding: 0 1.5rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: var(--gap-base);
}


/* Knock Respond Modal */
.knock-respond-modal {
	padding: var(--space-6);
}

.knock-respond-header {
	text-align: center;
	margin-bottom: var(--margin-base);
}

.knock-respond-photo {
	width: 80px;
	height: 80px;
	border-radius: var(--avatar-radius);
	object-fit: cover;
	margin-bottom: var(--space-4);
	border: var(--avatar-border-width) var(--avatar-border-style) var(--border);
}

.knock-respond-header h2 {
	margin: 0 0 0.5rem;
	font-size: var(--text-xl);
}

.knock-respond-header p {
	color: var(--muted);
	font-size: var(--text-sm);
}

.knock-response-options {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--margin-base);
}

.knock-response-btn {
	width: 100%;
	padding: var(--space-4) var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background-color: var(--background-color);
	color: var(--foreground);
	font-size: var(--text-base);
	text-align: left;
	cursor: pointer;
	transition: all 0.2s ease;
}

.knock-response-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ==================== Knocks Tab Grid Layout ==================== */

/* When knocks grid is inside deck-container, override centering */
#page-likes .deck-container:has(.knocks-grid) {
	align-items: flex-start;
	justify-content: flex-start;
	overflow: auto;
	display:block;
}

.knocks-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap-base);
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.knocks-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-8);
	}
}

.knocks-column H2 {
	text-align:center;
	margin:var(--space-2) auto; 
}

.knocks-list {
	display: flex;
	flex-direction: column;
	gap: var(--gap-base);
}

.knocks-loading-full {
	grid-column: 1 / -1;
}

/* Compact knock items (answered/sent) */
.knocks-list > a {
	display: flex;
	align-items: center;
	gap: var(--gap-base);
	padding: var(--space-2);
	border-radius: var(--radius-md);
	transition: background 0.15s ease;
	text-decoration: none;
	color: var(--foreground);
}

.knocks-list > a img {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	object-fit: cover;
	flex-shrink: 0;
}

.knocks-list > a div {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-0\.5);
	min-width: 0;
}

.knocks-list > a strong {
	font-weight: 500;
	font-size: var(--text-sm);
	margin-right: var(--space-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.knocks-list > a [data-status] {
	font-size: var(--text-xs);
	color: var(--muted);
}

.knocks-list > a [data-status="pending"] { color: var(--warning); }
.knocks-list > a [data-status="answered"] { color: var(--success); }
.knocks-list > a [data-status="declined"],
.knocks-list > a [data-status="rejected"] { color: var(--error); }
.knocks-list > a [data-status="expired"] { color: var(--muted); }

/* ==================== Likes Sent Thumbs ==================== */

#page-likes .sent-likes {
	width: 100%;
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 var(--space-4);
}

#page-likes .sent-thumbs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-2);
	width: 100%;
}

@media (min-width: 768px) {
	#page-likes .sent-thumbs {
		grid-template-columns: repeat(6, 1fr);
		gap: var(--gap-base);
	}
}

@media (min-width: 1024px) {
	#page-likes .sent-thumbs {
		grid-template-columns: repeat(10, 1fr);
		gap: var(--gap-base);
	}
}

/* When sent-likes is inside deck-container, override centering */
#page-likes .deck-container:has(.sent-likes) {
	align-items: flex-start;
	justify-content: flex-start;
	overflow: auto;
}

/* == KNOCKS PAGE STYLES == */

/* Standalone Knock Button */
.btn-knock {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1\.5);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-md);
	font-weight: 500;
	font-size: var(--text-sm);
	cursor: pointer;
	transition: all 0.2s;
	border: 1px solid var(--warning);
	background: var(--card-bg);
	color: var(--warning);
}

.btn-knock:disabled {
	cursor: default;
	opacity: 0.5;
}

.btn-knock.knocked-pending,
.btn-knock.knocked-answered {
	background: var(--warning-bg-subtle-flat);
	color: var(--warning);
	border-color: var(--warning);
}

.btn-knock.knocked-rejected,
.btn-knock.knocked-expired {
	background: var(--muted);
	color: var(--foreground);
	border-color: var(--border);
}

.btn-knock.loading {
	pointer-events: none;
}

/* Button cost indicator (coins) - overlay positioned above button */
.btn-cost {
	position: absolute;
	top: -0.4rem;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: var(--space-0\.5);
	padding: var(--space-0\.5) var(--space-2);
	font-size: 1.5rem;
	line-height:0;
	white-space: nowrap;
	z-index: 1;
}

.btn-cost svg {
	width: 24px;
	height: 24px;
}

.btn-cost > .cost-value {
	width: 24px;
	position: absolute;
	color: var(--vip-button-text);
	font-size: 1.2rem;
}

/* Knocks Page */
#knocks-page {
	min-height: 100%;
}


/* Knock Refresh Button */
.knock-refresh-btn {
	gap: var(--space-2);
	width: 100%;
	padding: var(--space-3);
	font-size: var(--text-sm);
	color: var(--muted);
	background: transparent;
	border: 1px dashed var(--border);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all 0.2s;
	margin-bottom: var(--space-2);
}

/* Knock Response Modal */
.knock-response-modal {
	max-width: 400px;
}

/* Response Options */
.response-options {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: var(--space-6) 0;
}

.response-option {
	display: flex;
	align-items: center;
	padding: var(--space-4) var(--space-4);
	background: var(--card-bg);
	border: 2px solid var(--border);
	border-radius: var(--radius-lg);
	cursor: pointer;
	text-align: left;
	transition: all 0.2s;
}

.response-option.selected {
	border-color: var(--primary);
	background: rgba(var(--primary-rgb), 0.1);
}

/* Modal Actions */
.knock-response-modal .modal-actions {
	display: flex;
	gap: var(--gap-base);
	margin-top: var(--space-4);
}

.knock-response-modal .modal-actions .btn-secondary {
	flex: 1;
}

.knock-response-modal .modal-actions .btn-primary {
	flex: 2;
}

.knock-response-modal .modal-actions .btn-danger {
	background: var(--error, #dc2626);
	border-color: var(--error, #dc2626);
}

/* Likes summary card for free users */
.summary-card {
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));
	border-color: rgba(239, 68, 68, 0.3);
}
.activity-cta {
	font-size: var(--text-sm);
	color: var(--primary);
	font-weight: 500;
}

.avatar-placeholder {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	background: var(--primary);
	color: var(--foreground);
	font-weight: 600;
	font-size: var(--text-lg);
	object-fit: cover;
	max-width: 16rem;
	aspect-ratio: 1 / 1;
	border: var(--avatar-border-width) solid var(--avatar-border-color);
	border-radius: var(--avatar-radius);
}

/* ============================================================
   4. Activity List Rules (.activity-list)
   Semantic activity feed list
   ============================================================ */

.activity-list {
	display: flex;
	flex-direction: column;
	gap: var(--gap-base);
	font-size:var(--text-sm)
}

.activity-list > a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-4);
	background: var(--card-bg);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	text-decoration: none;
	color: inherit;
	transition: background 0.2s, border-color 0.2s;
}

.activity-list .emoji {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	background: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-xl);
	line-height: 1;
}

.activity-list .text {
	flex: 1;
	min-width: 0;
	margin: 0 0 0.15rem;
}

.activity-list .text a {
	color: var(--primary);
	text-decoration: underline;
	position: relative;
	z-index: 1;
}
.activity-list .text strong {
	color: var(--primary);
}

.activity-list time {
	font-size: var(--text-xs);
	color: var(--muted);
	padding: var(--gap-base);
}

.activity-list figure {
	position: relative;
	flex-shrink: 0;
	margin: 0;
}

.activity-list figure img {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-full);
	object-fit: cover;
}

@media (max-width: 640px) {
	.activity-list .emoji {
		width: var(--icon-3xl);
		height: var(--icon-3xl);
	}
}

/* ============================================================
   5. Profile Boost Styles
   ============================================================ */

/* Boost Promo Card - appears in discovery grid */
article.card[data-type="boost-promo"] {
	position: relative;
	border: 5px solid var(--primary);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--card-bg);
}

article.card[data-type="boost-promo"] .boost-promo-close {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	z-index: 2;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: var(--radius-full);
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: var(--text-sm);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

article.card[data-type="boost-promo"] figure {
	position: relative;
	overflow: hidden;
}

article.card[data-type="boost-promo"] figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

article.card[data-type="boost-promo"] .overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--space-4);
	color: #fff;
	background: rgba(0, 0, 0, 0.3);
}

article.card[data-type="boost-promo"] .overlay h3 {
	font-size: var(--text-lg);
	font-weight: 700;
	margin: 0 0 var(--space-2);
}

article.card[data-type="boost-promo"] .overlay p {
	font-size: var(--text-sm);
	opacity: 0.9;
	margin: 0;
}

article.card[data-type="boost-promo"] footer {
	padding: var(--space-3);
	display: flex;
	justify-content: center;
}

article.card[data-type="boost-promo"] footer .btn {
	width: 100%;
	text-align: center;
}

/* Boost Status Banner - above discovery grid */
.boost-status-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	background: linear-gradient(135deg, var(--primary), var(--primary-hover, var(--primary)));
	color: #fff;
	border-radius: var(--radius-lg);
	margin-bottom: var(--space-4);
	font-size: var(--text-sm);
	flex-wrap: wrap;
}

.boost-status-text strong {
	font-weight: 600;
}

.boost-status-stats {
	opacity: 0.9;
	font-size: var(--text-xs);
}

@media (max-width: 640px) {
	.boost-status-banner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-1);
	}
}

/* Boost Promo Banner - mobile compact CTA */
.boost-promo-banner {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-3);
	background: var(--card-bg);
	border: 1px solid var(--primary);
	border-radius: var(--radius-lg);
	margin-bottom: var(--space-3);
}

.boost-promo-banner-text {
	flex: 1;
	font-size: var(--text-sm);
	font-weight: 600;
}

.boost-promo-banner .btn-sm {
	padding: var(--space-1) var(--space-3);
	font-size: var(--text-xs);
	white-space: nowrap;
}

.boost-promo-banner-close {
	background: none;
	border: none;
	color: var(--muted);
	cursor: pointer;
	padding: var(--space-1);
	font-size: var(--text-sm);
	line-height: 1;
}

/* VIP Boost Widget - profile page */
.vip-boost-widget {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
}

.vip-boost-header {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.vip-boost-header strong {
	font-size: var(--text-base);
}

.vip-boost-subtitle {
	font-size: var(--text-sm);
	color: var(--muted);
}

.vip-boost-disabled {
	font-size: var(--text-sm);
	color: var(--muted);
	margin: 0;
}

.vip-boost-used {
	font-size: var(--text-sm);
	color: var(--muted);
	margin: 0;
}