/* ==========================================================================
   Dating Connect — design tokens
   Palette: Electric Violet / Hot Magenta / Neon Coral / Ink / Cream
   Type: Fraunces (display) + Inter (UI)
   Signature: the "aura" — a slow-drifting violet-to-magenta gradient bloom
   behind every screen, glowing gradient CTAs, and a hand-tilted card stack
   instead of a flat swipe deck.
   ========================================================================== */

.dc-app {
	--dc-plum: #180B2E;
	--dc-plum-deep: #0D0620;
	--dc-cream: #FBF6EF;
	--dc-rose: #F5478C;
	--dc-rose-deep: #D6266B;
	--dc-violet: #8B5CF6;
	--dc-violet-deep: #6D28D9;
	--dc-gold: #FF8F6B;
	--dc-blush: #FFA9D2;
	--dc-ink: #241A38;
	--dc-ink-soft: rgba(36, 26, 56, 0.62);
	--dc-line: rgba(36, 26, 56, 0.12);
	--dc-radius-lg: 28px;
	--dc-radius-md: 18px;
	--dc-radius-sm: 12px;
	--dc-shadow: 0 24px 60px -20px rgba(13, 6, 32, 0.5);
	--dc-glow: 0 12px 30px -8px rgba(139, 92, 246, 0.55);
	--dc-gradient-brand: linear-gradient(135deg, var(--dc-violet), var(--dc-rose));
	--dc-bottom-nav-h: 74px;

	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--dc-ink);
	position: relative;
	min-height: 100vh;
	box-sizing: border-box;
	isolation: isolate;
}
.dc-app *, .dc-app *::before, .dc-app *::after { box-sizing: inherit; }

/* Any element using the native `hidden` attribute must actually hide, even
   if its own class (e.g. .dc-btn, .dc-match-overlay) sets an explicit
   `display` value that would otherwise out-specificity the browser's
   built-in [hidden] rule. */
.dc-app [hidden] { display: none !important; }

/* Some themes reset <button>/<a> children on the assumption icons come from
   an icon font rather than raw inline SVG, and end up hiding ours (usually
   via `button svg { display: none }`) or stretching them to fill the
   button/link (`svg { width: 100%; height: 100% }`, meant for icon-font
   replacement icons that are always square, which distorts ours since
   buttons and links are rarely square themselves). Both are forced back to
   this plugin's own intended behavior — every icon here specifies its own
   width/height and is meant to render at exactly that size, undistorted. */
.dc-app button svg,
.dc-app a svg {
	display: inline-block !important;
	opacity: 1 !important;
	visibility: visible !important;
	width: auto !important;
	height: auto !important;
	max-width: none !important;
	max-height: none !important;
	flex-shrink: 0;
	vertical-align: middle;
}

.dc-display, .dc-display-sm, .dc-logo, .dc-eyebrow {
	font-family: 'Fraunces', Georgia, serif;
}

.dc-eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dc-rose-deep);
	font-style: italic;
	margin: 0 0 10px;
}

.dc-display {
	font-size: clamp(26px, 6vw, 40px);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 0 0 10px;
}

.dc-display-sm {
	font-size: clamp(22px, 5vw, 26px);
	font-weight: 600;
	margin: 0 0 20px;
}

.dc-subtitle {
	color: var(--dc-ink-soft);
	font-size: 15px;
	margin: 0 0 26px;
}

/* -------------------------------------------------------------------- */
/* Ambient "aura" backdrop — signature element                          */
/* -------------------------------------------------------------------- */

.dc-aura {
	position: fixed;
	inset: 0;
	z-index: -1;
	background: var(--dc-plum);
	overflow: hidden;
}
.dc-aura::before, .dc-aura::after {
	content: '';
	position: absolute;
	width: 60vmax;
	height: 60vmax;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.55;
	animation: dc-drift 26s ease-in-out infinite alternate;
}
.dc-aura::before {
	background: radial-gradient(circle, var(--dc-rose) 0%, transparent 70%);
	top: -20vmax;
	left: -15vmax;
}
.dc-aura::after {
	background: radial-gradient(circle, var(--dc-violet) 0%, transparent 70%);
	bottom: -25vmax;
	right: -15vmax;
	animation-delay: -13s;
}
@keyframes dc-drift {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(6vmax, 4vmax) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
	.dc-aura::before, .dc-aura::after { animation: none; }
}

/* -------------------------------------------------------------------- */
/* Buttons + forms                                                       */
/* -------------------------------------------------------------------- */

.dc-btn {
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	border-radius: 999px;
	padding: 14px 22px;
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.dc-btn:active { transform: scale(0.97); }
.dc-btn:disabled { opacity: 0.6; cursor: default; }

.dc-btn-primary {
	background: var(--dc-gradient-brand);
	color: #fff;
	width: 100%;
	box-shadow: var(--dc-glow);
}
.dc-btn-primary:hover { box-shadow: 0 16px 34px -8px rgba(139, 92, 246, 0.7); }

.dc-btn-social {
	width: 100%;
	background: #fff;
	color: var(--dc-ink);
	border: 1px solid var(--dc-line);
	justify-content: flex-start;
	padding: 13px 18px;
}
.dc-btn-social:hover { border-color: var(--dc-rose); }
.dc-social-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }

.dc-btn-secondary {
	background: #fff;
	color: var(--dc-rose-deep);
	border: 1px solid var(--dc-line);
	width: 100%;
}
.dc-btn-secondary:hover { border-color: var(--dc-rose); }

.dc-divider { display: flex; align-items: center; gap: 12px; margin: 4px 0 20px; color: var(--dc-ink-soft); font-size: 13px; }
.dc-divider::before, .dc-divider::after { content: ''; flex: 1; height: 1px; background: var(--dc-line); }

.dc-form { display: flex; flex-direction: column; gap: 14px; }
.dc-form input, .dc-form select, .dc-form textarea {
	font-family: inherit;
	font-size: 15px;
	padding: 13px 16px;
	border-radius: var(--dc-radius-sm);
	border: 1px solid var(--dc-line);
	background: #fff;
	color: var(--dc-ink);
	width: 100%;
}
.dc-form input:disabled { background: rgba(36, 26, 56, 0.05); color: var(--dc-ink-soft); }
.dc-form input[type="checkbox"],
.dc-form input[type="range"] {
	width: auto;
	padding: 0;
	border: none;
	background: none;
	border-radius: 0;
}
.dc-form input:focus, .dc-form select:focus, .dc-form textarea:focus {
	outline: 2px solid var(--dc-rose);
	outline-offset: 1px;
}
.dc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dc-label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--dc-ink-soft); }
.dc-hint { font-size: 12px; font-weight: 400; color: var(--dc-ink-soft); }
.dc-label-title { display: block; font-size: 13px; font-weight: 700; color: var(--dc-ink-soft); margin-bottom: 8px; }

.dc-error { color: var(--dc-rose-deep); font-size: 13px; margin-top: 10px; text-align: center; }
.dc-success { color: #3f7d52; font-size: 13px; margin-top: 12px; }

.dc-toggle-mode { text-align: center; font-size: 14px; color: var(--dc-ink-soft); margin-top: 18px; }
.dc-toggle-mode button {
	background: none; border: none; color: var(--dc-rose-deep); font-weight: 700; cursor: pointer; font-size: inherit; padding: 0 0 0 4px;
}

/* -------------------------------------------------------------------- */
/* Auth screen                                                           */
/* -------------------------------------------------------------------- */

.dc-auth-screen { display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.dc-auth-card {
	width: 100%;
	max-width: 400px;
	background: rgba(251, 246, 239, 0.92);
	backdrop-filter: blur(20px);
	border-radius: var(--dc-radius-lg);
	padding: 40px 32px;
	box-shadow: var(--dc-shadow);
	border: 1px solid rgba(255,255,255,0.4);
}

/* -------------------------------------------------------------------- */
/* Top bar / nav (desktop) + bottom tab bar (mobile)                     */
/* -------------------------------------------------------------------- */

.dc-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 28px;
	color: var(--dc-cream);
}
.dc-logo { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.dc-nav { display: flex; align-items: center; gap: 24px; }
.dc-nav-link {
	color: var(--dc-cream);
	opacity: 0.85;
	text-decoration: none;
	font-size: 15px;
	font-weight: 700;
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
}
.dc-nav-link:hover { opacity: 1; }
.dc-nav-link-btn { text-decoration: underline; text-underline-offset: 3px; }
.dc-signout-link { font-size: 13px; opacity: 0.7; }

.dc-back-link {
	color: var(--dc-cream);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	flex-shrink: 0;
}
.dc-back-link:hover { opacity: 0.85; }

.dc-bell-link { position: relative; display: inline-flex; }
.dc-likes-link { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.dc-notif-badge, .dc-likes-badge {
	position: absolute;
	top: -6px; right: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--dc-rose);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

/* Bottom tab bar: hidden on desktop, shown on narrow viewports instead
   of squeezing the horizontal nav — the standard pattern for app-like
   screens (Discover / Likes / Matches / Profile), each a real labeled tab,
   not a bare icon. */
.dc-bottom-nav { display: none; }

@media (max-width: 680px) {
	.dc-topbar .dc-nav { display: none; }

	.dc-bottom-nav {
		display: flex;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 500;
		background: rgba(21, 14, 26, 0.97);
		backdrop-filter: blur(16px);
		border-top: 1px solid rgba(255,255,255,0.08);
		padding: 10px 4px calc(10px + env(safe-area-inset-bottom));
		justify-content: space-around;
	}
	.dc-bottom-nav-item {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		color: rgba(251,246,239,0.55);
		text-decoration: none;
		font-size: 11px;
		font-weight: 700;
		padding: 4px 12px;
		border-radius: 12px;
		transition: color 0.15s ease;
	}
	.dc-bottom-nav-active { color: var(--dc-cream); }
	.dc-bottom-nav-active svg { color: var(--dc-rose); }
	.dc-bottom-nav-badged { position: relative; }
	.dc-bottom-nav-item .dc-bottom-nav-badge { top: -2px; right: 4px; }

	/* leave room above the fixed tab bar so content isn't hidden behind it */
	.dc-deck-wrap, .dc-matches-list-wrap, .dc-likes-wrap, .dc-profile-wrap {
		padding-bottom: calc(var(--dc-bottom-nav-h) + env(safe-area-inset-bottom));
	}
}

/* -------------------------------------------------------------------- */
/* Notification toasts                                                   */
/* -------------------------------------------------------------------- */

#dc-toast-container {
	position: fixed;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1200;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	max-width: 340px;
	padding: 0 16px;
	pointer-events: none;
}
.dc-toast {
	pointer-events: auto;
	background: rgba(21, 14, 26, 0.94);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.14);
	border-radius: var(--dc-radius-sm);
	padding: 12px 16px;
	box-shadow: 0 14px 30px -10px rgba(0,0,0,0.5);
	opacity: 0;
	transform: translateY(-12px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.dc-toast-in { opacity: 1; transform: translateY(0); }
.dc-toast strong { display: block; font-family: 'Fraunces', serif; font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.dc-toast span { display: block; font-size: 13px; opacity: 0.85; }

/* -------------------------------------------------------------------- */
/* Modal (report)                                                        */
/* -------------------------------------------------------------------- */

.dc-modal-overlay {
	position: fixed; inset: 0;
	background: rgba(21, 14, 26, 0.82);
	backdrop-filter: blur(6px);
	display: flex; align-items: center; justify-content: center;
	z-index: 1100;
	padding: 20px;
}
.dc-modal-overlay[hidden] { display: none; }
.dc-modal {
	width: 100%;
	max-width: 420px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: rgba(251, 246, 239, 0.98);
	border-radius: var(--dc-radius-lg);
	padding: 28px;
	box-shadow: var(--dc-shadow);
}
.dc-modal-sub { color: var(--dc-ink-soft); font-size: 14px; margin: -8px 0 18px; }
.dc-mpesa-amount {
	background: rgba(255, 143, 107, 0.18);
	border: 1px solid rgba(255, 143, 107, 0.4);
	border-radius: var(--dc-radius-sm);
	padding: 12px 16px;
	font-size: 14px;
	color: var(--dc-ink);
	margin: 0 0 16px;
}
.dc-mpesa-amount strong { color: var(--dc-rose-deep); }
.dc-modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.dc-modal-actions .dc-btn { width: auto; flex: 1; }

/* -------------------------------------------------------------------- */
/* Swipe deck                                                             */
/* -------------------------------------------------------------------- */

.dc-deck-wrap { display: flex; flex-direction: column; align-items: center; padding: 6px 20px 40px; }
.dc-deck { position: relative; width: 100%; max-width: 380px; height: min(560px, 62vh); }
.dc-loading { color: var(--dc-cream); text-align: center; opacity: 0.8; margin-top: 60px; }

.dc-card {
	position: absolute;
	inset: 0;
	border-radius: var(--dc-radius-lg);
	overflow: hidden;
	box-shadow: var(--dc-shadow);
	background: var(--dc-ink);
	cursor: grab;
	touch-action: none;
	transition: transform 0.35s cubic-bezier(.2,.9,.3,1);
}
.dc-card.dc-dragging { transition: none; cursor: grabbing; }

.dc-card-photo {
	position: relative;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-color: #2D1B4E;
	display: flex;
}
.dc-card-placeholder {
	margin: auto;
	font-size: 72px;
	font-family: 'Fraunces', serif;
	color: rgba(255,255,255,0.85);
}
.dc-card-gradient {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 48%;
	background: linear-gradient(to top, rgba(21,14,26,0.94), rgba(21,14,26,0));
	pointer-events: none;
}
.dc-card-info {
	position: absolute;
	left: 20px; right: 20px; bottom: 20px;
	color: #fff;
}
.dc-card-info h2 { font-family: 'Fraunces', serif; font-size: clamp(20px, 5vw, 24px); font-weight: 600; margin: 0 0 6px; }
.dc-card-info p { font-size: 14px; line-height: 1.5; opacity: 0.92; margin: 0; }

.dc-online-tag, .dc-gender-tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	margin: 0 8px 4px 0;
}
.dc-online-tag { color: #7be3a0; }
.dc-gender-tag { color: rgba(255,255,255,0.75); font-weight: 600; }

.dc-verified-tag, .dc-featured-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 999px;
	margin: 0 6px 8px 0;
	letter-spacing: 0.02em;
}
.dc-verified-tag { background: rgba(79, 217, 122, 0.18); color: #4fd97a; border: 1px solid rgba(79, 217, 122, 0.4); }
.dc-featured-tag { background: rgba(255, 143, 107, 0.22); color: var(--dc-gold); border: 1px solid rgba(255, 143, 107, 0.5); }
h1 .dc-verified-tag { vertical-align: middle; margin-left: 8px; }

.dc-card-dots {
	position: absolute;
	top: 12px; left: 12px; right: 12px;
	display: flex;
	gap: 4px;
	z-index: 3;
}
.dc-dot {
	flex: 1;
	height: 3px;
	border-radius: 3px;
	background: rgba(255,255,255,0.35);
}
.dc-dot-active { background: #fff; }

.dc-card-tap-left, .dc-card-tap-right {
	position: absolute;
	top: 0; bottom: 0;
	width: 32%;
	z-index: 2;
	cursor: pointer;
}
.dc-card-tap-left { left: 0; }
.dc-card-tap-right { right: 0; }

.dc-card-report-btn {
	position: absolute;
	top: 16px; right: 16px;
	z-index: 4;
	background: rgba(21, 14, 26, 0.55);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.35);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}
.dc-card-report-btn-left { left: 16px; right: auto; }
.dc-card-report-btn-active {
	background: var(--dc-rose);
	border-color: var(--dc-rose);
}

.dc-card-like-stamp {
	position: absolute;
	top: 28px;
	padding: 6px 16px;
	border: 3px solid;
	border-radius: 8px;
	font-family: 'Fraunces', serif;
	font-weight: 700;
	font-size: clamp(20px, 5vw, 26px);
	letter-spacing: 0.04em;
	opacity: 0;
	transform: rotate(-14deg);
}
.dc-stamp-like { left: 24px; color: #6cd47e; border-color: #6cd47e; transform: rotate(-14deg); }
.dc-stamp-pass { right: 24px; color: var(--dc-rose); border-color: var(--dc-rose); transform: rotate(14deg); }

.dc-empty-state { text-align: center; color: var(--dc-cream); padding: 60px 20px; }
.dc-empty-state .dc-display-sm { color: var(--dc-cream); }

.dc-swipe-actions { display: flex; gap: 12px; margin-top: 26px; width: 100%; max-width: 420px; justify-content: center; align-items: center; }
.dc-action-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 17px 20px;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	flex: 1;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dc-action-btn:hover { transform: translateY(-3px); }
.dc-action-btn:active { transform: scale(0.96); }
.dc-action-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.dc-action-pass {
	background: #fff;
	color: var(--dc-rose-deep);
	border: 2px solid var(--dc-rose);
	box-shadow: 0 12px 26px -10px rgba(0,0,0,0.4);
}
.dc-action-like {
	background: var(--dc-gradient-brand);
	color: #fff;
	box-shadow: 0 16px 32px -8px rgba(245, 71, 140, 0.65);
}
.dc-action-message {
	flex: 0.75;
	background: rgba(251, 246, 239, 0.9);
	color: var(--dc-ink);
	border: 2px solid var(--dc-gold);
	box-shadow: 0 10px 22px -10px rgba(255, 143, 107, 0.5);
	font-size: 14px;
	padding: 15px 14px;
}
.dc-action-sm { padding: 12px 14px; font-size: 13px; }

/* -------------------------------------------------------------------- */
/* Match overlay                                                         */
/* -------------------------------------------------------------------- */

.dc-match-overlay {
	position: fixed; inset: 0;
	background: rgba(21, 14, 26, 0.82);
	backdrop-filter: blur(6px);
	display: flex; align-items: center; justify-content: center;
	z-index: 999;
	animation: dc-fade-in 0.25s ease;
	padding: 20px;
}
@keyframes dc-fade-in { from { opacity: 0; } to { opacity: 1; } }
.dc-match-card {
	text-align: center;
	color: var(--dc-cream);
	max-width: 340px;
	padding: 20px;
	animation: dc-pop 0.4s cubic-bezier(.2,1.4,.4,1);
}
@keyframes dc-pop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.dc-match-card .dc-display { color: var(--dc-cream); }
.dc-match-card .dc-btn-primary { margin-top: 18px; }

.dc-onboarding-overlay {
	position: fixed; inset: 0;
	background: rgba(13, 6, 32, 0.88);
	backdrop-filter: blur(8px);
	display: flex; align-items: center; justify-content: center;
	z-index: 999;
	animation: dc-fade-in 0.25s ease;
	padding: 20px;
}
.dc-onboarding-card {
	background: rgba(251, 246, 239, 0.97);
	border-radius: var(--dc-radius-lg);
	padding: 36px 28px 28px;
	max-width: 380px;
	width: 100%;
	text-align: center;
	box-shadow: var(--dc-shadow);
	animation: dc-pop 0.4s cubic-bezier(.2,1.4,.4,1);
}
.dc-onboarding-card .dc-eyebrow { color: var(--dc-rose-deep); }
.dc-onboarding-card .dc-display-sm { margin-bottom: 26px; }
.dc-onboarding-steps { display: flex; flex-direction: column; gap: 20px; text-align: left; margin-bottom: 28px; }
.dc-onboarding-step { display: flex; align-items: center; gap: 16px; }
.dc-onboarding-step p { margin: 0; font-size: 14px; color: var(--dc-ink); line-height: 1.4; }
.dc-onboarding-icon {
	flex-shrink: 0;
	width: 48px; height: 48px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: #fff;
}
.dc-onboarding-icon-like { background: var(--dc-gradient-brand); }
.dc-onboarding-icon-pass { background: var(--dc-ink-soft); }
.dc-onboarding-icon-view { background: linear-gradient(135deg, var(--dc-gold), var(--dc-rose-deep)); }
.dc-onboarding-card .dc-btn-primary { width: 100%; }

/* -------------------------------------------------------------------- */
/* Matches list                                                          */
/* -------------------------------------------------------------------- */

.dc-matches-list-wrap { max-width: 520px; margin: 0 auto; padding: 6px 20px 60px; }
.dc-matches-list-wrap .dc-display-sm { color: var(--dc-cream); }
.dc-matches-list { display: flex; flex-direction: column; gap: 10px; }
.dc-match-row {
	display: flex; align-items: center; gap: 14px;
	background: rgba(251, 246, 239, 0.94);
	border-radius: var(--dc-radius-md);
	padding: 12px 16px;
	text-decoration: none;
	color: var(--dc-ink);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dc-match-row:hover { transform: translateX(4px); box-shadow: 0 10px 24px -14px rgba(24,11,46,0.4); }
.dc-match-avatar {
	width: 52px; height: 52px; border-radius: 50%;
	background-size: cover; background-position: center;
	background-color: var(--dc-blush);
	display: flex; align-items: center; justify-content: center;
	font-family: 'Fraunces', serif; font-weight: 600; color: #fff;
	flex-shrink: 0;
}
.dc-match-name { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.dc-match-unread-dot {
	margin-left: auto;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--dc-rose);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
	flex-shrink: 0;
}

/* -------------------------------------------------------------------- */
/* Likes screen                                                          */
/* -------------------------------------------------------------------- */

.dc-likes-wrap { max-width: 760px; margin: 0 auto; padding: 6px 20px 60px; }
.dc-likes-wrap .dc-display-sm { color: var(--dc-cream); }
.dc-likes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
}
.dc-like-card {
	background: rgba(251, 246, 239, 0.96);
	border-radius: var(--dc-radius-md);
	overflow: hidden;
	box-shadow: var(--dc-shadow);
}
.dc-like-card-photo {
	position: relative;
	aspect-ratio: 3 / 4;
	background-size: cover;
	background-position: center;
	background-color: #2D1B4E;
	display: flex;
}
.dc-like-card-actions { display: flex; gap: 8px; padding: 10px; }

.dc-paywall {
	grid-column: 1 / -1;
	text-align: center;
	background: rgba(251, 246, 239, 0.95);
	border-radius: var(--dc-radius-lg);
	padding: 44px 28px;
	box-shadow: var(--dc-shadow);
	max-width: 440px;
	margin: 0 auto;
}
.dc-paywall .dc-display-sm { margin-bottom: 8px; }
.dc-paywall p { color: var(--dc-ink-soft); font-size: 14px; margin: 0 0 20px; }
.dc-paywall .dc-btn { width: auto; padding: 14px 32px; }

/* -------------------------------------------------------------------- */
/* Upgrade / plans screen                                                */
/* -------------------------------------------------------------------- */

.dc-upgrade-wrap { max-width: 900px; margin: 0 auto; padding: 20px 20px 60px; }
.dc-upgrade-wrap .dc-eyebrow, .dc-upgrade-wrap .dc-display { color: var(--dc-cream); }
.dc-upgrade-wrap .dc-eyebrow { color: var(--dc-gold); }

.dc-cycle-toggle {
	display: flex;
	justify-content: center;
	gap: 6px;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.14);
	border-radius: 999px;
	padding: 6px;
	max-width: 480px;
	margin: 28px auto 0;
}
.dc-cycle-option {
	flex: 1;
	position: relative;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	padding: 11px 14px;
	border-radius: 999px;
	border: none;
	background: none;
	color: rgba(251,246,239,0.65);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}
.dc-cycle-active {
	background: var(--dc-gradient-brand);
	color: #fff;
	box-shadow: 0 8px 20px -6px rgba(245, 71, 140, 0.6);
}
.dc-cycle-save {
	font-size: 10px;
	font-weight: 700;
	color: var(--dc-gold);
	letter-spacing: 0.02em;
}
.dc-cycle-active .dc-cycle-save { color: rgba(255,255,255,0.9); }

.dc-plans-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	margin-top: 32px;
}
.dc-plan-card {
	position: relative;
	background: rgba(251, 246, 239, 0.96);
	border-radius: var(--dc-radius-lg);
	padding: 28px 24px;
	box-shadow: var(--dc-shadow);
	border: 2px solid transparent;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dc-plan-card:hover { transform: translateY(-4px); }
.dc-plan-card-active { border-color: var(--dc-gold); }
.dc-plan-card-best {
	border-color: var(--dc-rose);
	background: linear-gradient(160deg, rgba(251,246,239,0.98), rgba(242,166,161,0.25));
	box-shadow: 0 28px 60px -18px rgba(245, 71, 140, 0.5);
}
.dc-plan-ribbon {
	position: absolute;
	top: -12px; right: 20px;
	background: var(--dc-gradient-brand);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
	box-shadow: 0 8px 16px -6px rgba(245, 71, 140, 0.6);
}
.dc-plan-card h2 { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; margin: 0 0 8px; }
.dc-plan-price { font-size: 30px; font-weight: 700; color: var(--dc-rose-deep); margin: 0 0 2px; }
.dc-plan-price span { font-size: 13px; font-weight: 500; color: var(--dc-ink-soft); }
.dc-plan-price-sub { font-size: 12px; color: var(--dc-ink-soft); margin: 0 0 18px; }
.dc-plan-unavailable { font-size: 15px; color: var(--dc-ink-soft); margin-bottom: 18px; }
.dc-plan-perks { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dc-plan-perks li {
	font-size: 14px;
	color: var(--dc-ink);
	padding-left: 24px;
	position: relative;
}
.dc-plan-perks li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	color: #3f7d52;
	font-weight: 700;
}
.dc-plan-actions { display: flex; flex-direction: column; gap: 10px; }
.dc-plan-current {
	text-align: center;
	font-weight: 700;
	color: var(--dc-gold);
	background: rgba(255, 143, 107, 0.15);
	border-radius: var(--dc-radius-sm);
	padding: 12px;
	margin: 0;
}

/* -------------------------------------------------------------------- */
/* Presence + typing                                                     */
/* -------------------------------------------------------------------- */

.dc-presence-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dc-cream); opacity: 0.8; }
.dc-presence-dot { width: 7px; height: 7px; border-radius: 50%; background: #6b6b6b; display: inline-block; flex-shrink: 0; }
.dc-presence-dot.dc-online { background: #4fd97a; }

/* -------------------------------------------------------------------- */
/* Profile screen: two-column layout                                     */
/* -------------------------------------------------------------------- */

.dc-profile-wrap { max-width: 480px; margin: 0 auto; padding: 6px 20px 60px; }
.dc-profile-wrap .dc-display-sm { color: var(--dc-cream); }
.dc-profile-wrap.dc-profile-wrap-wide { max-width: 900px; }

.dc-profile-form {
	background: rgba(251, 246, 239, 0.95);
	border-radius: var(--dc-radius-lg);
	padding: 28px 26px;
	box-shadow: var(--dc-shadow);
}
.dc-forced-notice {
	background: rgba(255, 143, 107, 0.25);
	border: 1px solid var(--dc-gold);
	color: var(--dc-cream);
	border-radius: var(--dc-radius-sm);
	padding: 12px 16px;
	font-size: 14px;
	margin: 0 0 18px;
	max-width: 480px;
}

.dc-profile-grid {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 36px;
	align-items: start;
}
.dc-profile-col-main { display: flex; flex-direction: column; gap: 18px; }
.dc-profile-col-photos { position: sticky; top: 20px; }
.dc-profile-save-btn { margin-top: 8px; max-width: 320px; }

@media (max-width: 760px) {
	.dc-profile-grid { grid-template-columns: 1fr; gap: 28px; }
	.dc-profile-col-photos { position: static; order: -1; }
	.dc-profile-save-btn { max-width: none; }
}

.dc-birthday-row { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 10px; }
.dc-birthday-field { display: flex; flex-direction: column; gap: 4px; }
.dc-birthday-sublabel { font-size: 11px; font-weight: 700; color: var(--dc-ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }

.dc-checkbox-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--dc-ink-soft);
	margin-top: 10px;
	cursor: pointer;
}
.dc-checkbox-row input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--dc-rose); }

/* Pills — Gender / Interested in / relationship intent / interests */
.dc-pill-group, .dc-chip-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dc-pill {
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1.5px solid var(--dc-line);
	background: #fff;
	color: var(--dc-ink);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.dc-pill:hover { border-color: var(--dc-rose); }
.dc-pill-selected {
	background: var(--dc-ink);
	border-color: var(--dc-ink);
	color: #fff;
}
.dc-pill-add { border-style: dashed; color: var(--dc-rose-deep); }
.dc-chip-picker { margin-top: 8px; }
.dc-chip-options { margin-top: 12px; }

.dc-optional-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 6px 0;
	color: var(--dc-ink-soft);
	font-size: 13px;
	font-weight: 700;
}
.dc-optional-divider::before, .dc-optional-divider::after { content: ''; flex: 1; height: 1px; background: var(--dc-line); }

.dc-range-row { display: flex; align-items: center; gap: 12px; }
.dc-range-row input[type="range"] { flex: 1; accent-color: var(--dc-rose); }
.dc-range-value { font-weight: 700; font-size: 14px; min-width: 60px; text-align: right; }
.dc-push-row { margin-top: 18px; }

.dc-membership-card {
	margin-top: 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	background: rgba(251, 246, 239, 0.95);
	border-radius: var(--dc-radius-md);
	padding: 20px 22px;
	box-shadow: var(--dc-shadow);
}
.dc-membership-plan { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; color: var(--dc-ink); margin: 4px 0 0; }
.dc-membership-card .dc-btn { width: auto; padding: 12px 26px; }
.dc-boost-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dc-boost-actions .dc-btn { width: auto; padding: 11px 18px; font-size: 13px; }

.dc-quick-links {
	text-align: center;
	margin-top: 16px;
	font-size: 13px;
}
.dc-quick-links a { color: var(--dc-cream); font-weight: 600; text-decoration: none; }
.dc-quick-links a:hover { text-decoration: underline; }
.dc-quick-links span { color: rgba(251,246,239,0.4); margin: 0 8px; }

.dc-danger-zone {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid rgba(251,246,239,0.15);
}
.dc-danger-zone .dc-label-title { color: var(--dc-cream); opacity: 0.7; }
.dc-danger-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.dc-danger-actions .dc-btn { width: auto; }
.dc-btn-danger {
	background: transparent;
	color: #e56b6b;
	border: 1px solid rgba(229, 107, 107, 0.5);
}
.dc-btn-danger:hover { background: rgba(229, 107, 107, 0.1); }

/* -------------------------------------------------------------------- */
/* Profile: photo gallery grid                                           */
/* -------------------------------------------------------------------- */

.dc-gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 10px;
}
.dc-gallery-cell {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: var(--dc-radius-sm);
	overflow: hidden;
	background: rgba(36, 26, 56, 0.06);
	border: 1px solid var(--dc-line);
}
.dc-gallery-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-gallery-cell.dc-gallery-empty {
	border: 2px dashed var(--dc-line);
	background: rgba(255,255,255,0.5);
}
.dc-gallery-add-btn {
	position: absolute;
	right: 8px; bottom: 8px;
	width: 36px; height: 36px;
	border-radius: 50%;
	border: none;
	background: var(--dc-ink);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 20px;
	font-weight: 300;
	line-height: 1;
	cursor: pointer;
}
.dc-gallery-add-btn:hover { background: var(--dc-rose-deep); }
.dc-gallery-main-badge {
	position: absolute;
	left: 6px; bottom: 6px;
	background: rgba(21,14,26,0.75);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 999px;
}
.dc-gallery-remove {
	position: absolute;
	top: 6px; right: 6px;
	width: 24px; height: 24px;
	border-radius: 50%;
	border: none;
	background: rgba(21,14,26,0.75);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
}
.dc-upload-status { font-size: 13px; color: var(--dc-ink-soft); margin: 6px 0 0; }

/* -------------------------------------------------------------------- */
/* Chat screen                                                           */
/* -------------------------------------------------------------------- */

.dc-chat-avatar {
	width: 36px; height: 36px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-color: var(--dc-blush);
	display: flex; align-items: center; justify-content: center;
	font-family: 'Fraunces', serif; font-weight: 600; color: #fff; font-size: 14px;
	flex-shrink: 0;
}
.dc-chat-header-actions { display: flex; gap: 12px; flex-shrink: 0; margin-left: auto; }

/* -------------------------------------------------------------------- */
/* Inbox: split-view sidebar + thread panel                              */
/* -------------------------------------------------------------------- */

.dc-inbox-wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px 20px;
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 20px;
	height: calc(100vh - 100px);
}

.dc-inbox-sidebar {
	background: rgba(251, 246, 239, 0.95);
	border-radius: var(--dc-radius-lg);
	box-shadow: var(--dc-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.dc-inbox-search {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px;
	border-bottom: 1px solid var(--dc-line);
	color: var(--dc-ink-soft);
	flex-shrink: 0;
}
.dc-inbox-search input {
	flex: 1;
	border: none;
	background: none;
	font-family: inherit;
	font-size: 14px;
	color: var(--dc-ink);
	outline: none;
}
.dc-inbox-list { flex: 1; overflow-y: auto; }
.dc-inbox-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 14px 16px;
	border: none;
	background: none;
	border-bottom: 1px solid var(--dc-line);
	cursor: pointer;
	text-align: left;
	transition: background 0.15s ease;
}
.dc-inbox-item:hover { background: rgba(245, 71, 140, 0.06); }
.dc-inbox-item-active { background: rgba(245, 71, 140, 0.1); }
.dc-inbox-avatar {
	position: relative;
	width: 46px; height: 46px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-color: var(--dc-blush);
	display: flex; align-items: center; justify-content: center;
	font-family: 'Fraunces', serif; font-weight: 600; color: #fff; font-size: 16px;
	flex-shrink: 0;
}
.dc-inbox-presence-dot {
	position: absolute;
	bottom: -1px; right: -1px;
	width: 11px; height: 11px;
	border: 2px solid var(--dc-cream);
}
.dc-inbox-item-body { flex: 1; min-width: 0; }
.dc-inbox-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dc-inbox-item-name { font-weight: 700; font-size: 14px; color: var(--dc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-inbox-item-time { font-size: 11px; color: var(--dc-ink-soft); flex-shrink: 0; }
.dc-inbox-item-preview { display: block; font-size: 13px; color: var(--dc-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }

.dc-inbox-thread-panel {
	background: rgba(251, 246, 239, 0.95);
	border-radius: var(--dc-radius-lg);
	box-shadow: var(--dc-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.dc-inbox-empty {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--dc-ink-soft);
	padding: 40px;
}
.dc-inbox-empty .dc-display-sm { color: var(--dc-ink); }

.dc-inbox-thread { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.dc-inbox-thread-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--dc-line);
	flex-shrink: 0;
}
.dc-inbox-thread-header .dc-chat-header-text { align-items: flex-start; }
.dc-inbox-thread-header .dc-logo { font-size: 16px; }

.dc-date-divider {
	align-self: center;
	background: var(--dc-rose);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 6px 16px;
	border-radius: 999px;
	margin: 16px 0 12px;
}

.dc-inbox-emoji-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 20px 0;
}
.dc-emoji-item {
	background: rgba(36, 26, 56, 0.05);
	border: none;
	border-radius: 8px;
	font-size: 20px;
	padding: 6px 8px;
	cursor: pointer;
}
.dc-emoji-item:hover { background: rgba(36, 26, 56, 0.1); }
.dc-emoji-toggle {
	background: none;
	border: none;
	font-size: 22px;
	cursor: pointer;
	flex-shrink: 0;
	line-height: 1;
}

@media (max-width: 900px) {
	.dc-inbox-wrap { grid-template-columns: 1fr; height: auto; }
	.dc-inbox-sidebar { max-height: 320px; }
	.dc-inbox-thread-panel { min-height: 60vh; }
}

.dc-chat-thread {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	display: flex;
	flex-direction: column;
}

.dc-bubble-group { display: flex; flex-direction: column; max-width: 78%; margin-top: 10px; }
.dc-bubble-group-mine { align-self: flex-end; align-items: flex-end; }
.dc-bubble-group-theirs { align-self: flex-start; align-items: flex-start; }
.dc-bubble-grouped { margin-top: 3px; }

.dc-bubble {
	padding: 11px 16px;
	border-radius: 20px;
	font-size: 14.5px;
	line-height: 1.45;
	word-break: break-word;
	box-shadow: 0 2px 8px -4px rgba(24,11,46,0.2);
}
.dc-bubble-mine {
	background: var(--dc-gradient-brand);
	color: #fff;
	border-bottom-right-radius: 6px;
}
.dc-bubble-theirs {
	background: #fff;
	border: 1px solid var(--dc-line);
	border-bottom-left-radius: 6px;
}
.dc-bubble-time {
	font-size: 11px;
	color: var(--dc-ink-soft);
	margin: 3px 6px 0;
}

.dc-typing-indicator {
	align-self: flex-start;
	display: flex;
	align-items: center;
	gap: 4px;
	background: #fff;
	border: 1px solid var(--dc-line);
	border-radius: 20px;
	border-bottom-left-radius: 6px;
	padding: 12px 16px;
	margin: 10px 20px 0;
	width: fit-content;
}
.dc-typing-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--dc-ink-soft);
	animation: dc-typing-bounce 1.2s infinite ease-in-out;
}
.dc-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.dc-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes dc-typing-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
	30% { transform: translateY(-4px); opacity: 1; }
}

.dc-chat-input-row { display: flex; gap: 10px; margin-top: 14px; align-items: center; }
.dc-chat-send-error {
	font-size: 13px;
	color: var(--dc-rose-deep);
	margin: 8px 4px 0;
}
.dc-chat-send-error a { color: var(--dc-rose-deep); font-weight: 700; text-decoration: underline; }
.dc-chat-input-row input {
	flex: 1;
	font-family: inherit;
	font-size: 15px;
	padding: 13px 18px;
	border-radius: 999px;
	border: 1px solid var(--dc-line);
	background: rgba(251, 246, 239, 0.95);
}
.dc-send-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 20px;
	border-radius: 999px;
	border: none;
	background: var(--dc-gradient-brand);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 10px 22px -8px rgba(245, 71, 140, 0.6);
	transition: transform 0.15s ease;
	flex-shrink: 0;
}
.dc-send-btn:hover { transform: translateY(-2px); }
.dc-send-btn:active { transform: scale(0.96); }

/* -------------------------------------------------------------------- */
/* Responsive                                                            */
/* -------------------------------------------------------------------- */

@media (max-width: 600px) {
	.dc-form-row { grid-template-columns: 1fr; }
	.dc-auth-card { padding: 30px 22px; }
	.dc-birthday-row { grid-template-columns: 1fr 1fr 1.2fr; gap: 8px; }
	.dc-swipe-actions { max-width: none; }
	.dc-action-btn { padding: 15px 12px; font-size: 14.5px; gap: 6px; }
	.dc-gallery-grid { gap: 8px; }
	.dc-modal { padding: 22px; }
	.dc-inbox-wrap { padding: 0 10px calc(10px + var(--dc-bottom-nav-h) + env(safe-area-inset-bottom)); }
	.dc-chat-header-text .dc-logo { font-size: 15px; }
	.dc-chat-header-actions { gap: 8px; }
	.dc-chat-header-actions .dc-nav-link { font-size: 12px; }
	.dc-topbar { padding: 18px 18px; }
	.dc-logo { font-size: 19px; }
}

@media (max-width: 360px) {
	.dc-birthday-row { grid-template-columns: 1fr; }
	.dc-swipe-actions { flex-direction: column; }
}

/* Keyboard focus visibility */
.dc-app a:focus-visible,
.dc-app button:focus-visible,
.dc-app input:focus-visible,
.dc-app select:focus-visible,
.dc-app textarea:focus-visible {
	outline: 2px solid var(--dc-rose);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------- */
/* Public homepage                                                       */
/* -------------------------------------------------------------------- */

.dc-home-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1100px;
	margin: 0 auto;
	padding: 26px 28px;
	color: var(--dc-cream);
}
.dc-home-nav-links { display: flex; align-items: center; gap: 20px; }
.dc-home-nav-cta { width: auto; padding: 12px 24px; }

.dc-home-wrap { max-width: 1100px; margin: 0 auto; padding: 20px 28px 0; }

.dc-home-hero {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 48px;
	align-items: center;
	padding: 40px 0 80px;
}
.dc-home-headline { color: var(--dc-cream); font-size: clamp(36px, 5vw, 56px); }
.dc-home-sub { color: rgba(251,246,239,0.75); font-size: 17px; line-height: 1.6; max-width: 480px; margin: 0 0 28px; }
.dc-home-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.dc-home-hero-btn { width: auto; padding: 16px 30px; font-size: 16px; }

.dc-home-hero-visual { position: relative; height: 420px; }
.dc-home-mock-card {
	position: absolute;
	width: 300px;
	height: 400px;
	border-radius: var(--dc-radius-lg);
	box-shadow: var(--dc-shadow);
	left: 50%;
}
.dc-home-mock-back {
	background: linear-gradient(160deg, #5B3A8C, #2D1B4E);
	transform: translateX(-38%) rotate(-8deg);
	opacity: 0.7;
	top: 30px;
}
.dc-home-mock-front {
	background: linear-gradient(160deg, var(--dc-rose), var(--dc-violet-deep));
	transform: translateX(-62%) rotate(4deg);
	top: 0;
	overflow: hidden;
	animation: dc-float 5s ease-in-out infinite;
}
@keyframes dc-float {
	0%, 100% { transform: translateX(-62%) rotate(4deg) translateY(0); }
	50% { transform: translateX(-62%) rotate(4deg) translateY(-14px); }
}
.dc-home-mock-gradient {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 55%;
	background: linear-gradient(to top, rgba(21,14,26,0.94), rgba(21,14,26,0));
}
.dc-home-mock-info { position: absolute; left: 20px; right: 20px; bottom: 20px; color: #fff; }
.dc-home-mock-info h3 { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; margin: 4px 0; }
.dc-home-mock-info p { font-size: 13px; opacity: 0.85; margin: 0; }

.dc-home-features {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	padding: 20px 0 70px;
}
.dc-home-feature {
	background: rgba(251, 246, 239, 0.95);
	border-radius: var(--dc-radius-lg);
	padding: 26px 22px;
	box-shadow: var(--dc-shadow);
}
.dc-home-feature-mark {
	display: inline-block;
	font-family: 'Fraunces', serif;
	font-size: 30px;
	font-weight: 600;
	color: var(--dc-blush);
	margin-bottom: 10px;
}
.dc-home-feature h3 { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.dc-home-feature p { font-size: 14px; color: var(--dc-ink-soft); line-height: 1.5; margin: 0; }

.dc-home-how { padding: 40px 0 70px; }
.dc-home-how .dc-display-sm { color: var(--dc-cream); }
.dc-home-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 34px; }
.dc-home-step { text-align: center; color: var(--dc-cream); }
.dc-home-step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--dc-gradient-brand);
	font-family: 'Fraunces', serif;
	font-weight: 700;
	font-size: 20px;
	box-shadow: 0 10px 24px -8px rgba(245,71,140,0.6);
}
.dc-home-step h3 { font-family: 'Fraunces', serif; font-size: 18px; margin: 0 0 8px; }
.dc-home-step p { font-size: 14px; color: rgba(251,246,239,0.7); line-height: 1.5; margin: 0 auto; max-width: 260px; }

.dc-home-pricing { padding: 20px 0 70px; }
.dc-home-pricing .dc-display-sm { color: var(--dc-cream); }
.dc-home-pricing-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 30px; align-items: center; }
.dc-home-price-card {
	background: rgba(251, 246, 239, 0.95);
	border-radius: var(--dc-radius-md);
	padding: 22px 26px;
	min-width: 180px;
	text-align: center;
	box-shadow: var(--dc-shadow);
}
.dc-home-price-card h3 { font-family: 'Fraunces', serif; font-size: 16px; margin: 0 0 6px; }
.dc-home-price-amount { font-size: 24px; font-weight: 700; color: var(--dc-rose-deep); margin: 0 0 6px; }
.dc-home-price-amount span { font-size: 12px; font-weight: 500; color: var(--dc-ink-soft); }
.dc-home-price-desc { font-size: 12px; color: var(--dc-ink-soft); margin: 0; }
.dc-home-price-cta { display: flex; align-items: center; }

.dc-home-cta {
	text-align: center;
	padding: 60px 20px;
	margin: 0 0 60px;
	border-radius: var(--dc-radius-lg);
	background: linear-gradient(160deg, rgba(245,71,140,0.35), rgba(255,143,107,0.2));
	border: 1px solid rgba(255,255,255,0.12);
}
.dc-home-cta .dc-display { color: var(--dc-cream); margin-bottom: 24px; }

.dc-home-footer {
	display: flex;
	justify-content: space-between;
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 28px 40px;
	color: rgba(251,246,239,0.5);
	font-size: 13px;
}
.dc-home-footer a { color: rgba(251,246,239,0.7); text-decoration: none; }
.dc-home-footer a:hover { text-decoration: underline; }

@media (max-width: 860px) {
	.dc-home-hero { grid-template-columns: 1fr; padding-bottom: 40px; }
	.dc-home-hero-visual { height: 320px; order: -1; }
	.dc-home-mock-card { width: 220px; height: 300px; }
	.dc-home-features { grid-template-columns: repeat(2, 1fr); }
	.dc-home-steps { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 480px) {
	.dc-home-features { grid-template-columns: 1fr; }
	.dc-home-nav-links .dc-nav-link { display: none; }
}

/* -------------------------------------------------------------------- */
/* Match celebration confetti                                            */
/* -------------------------------------------------------------------- */

#dc-confetti-container {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 1300;
	overflow: hidden;
}
.dc-confetti-piece {
	position: absolute;
	top: -20px;
	width: 8px;
	height: 14px;
	opacity: 0.9;
	animation: dc-confetti-fall linear forwards;
}
@keyframes dc-confetti-fall {
	to { transform: translateY(110vh) rotate(540deg); opacity: 0; }
}

/* -------------------------------------------------------------------- */
/* Search screen                                                         */
/* -------------------------------------------------------------------- */

.dc-search-wrap { max-width: 1000px; margin: 0 auto; padding: 6px 20px 60px; }
.dc-search-wrap .dc-display-sm { color: var(--dc-cream); }

.dc-search-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(251, 246, 239, 0.95);
	border-radius: 999px;
	padding: 14px 20px;
	margin-bottom: 28px;
	box-shadow: var(--dc-shadow);
}
.dc-search-icon { color: var(--dc-ink-soft); flex-shrink: 0; }
.dc-search-bar input {
	flex: 1;
	border: none;
	background: none;
	font-family: inherit;
	font-size: 15px;
	color: var(--dc-ink);
	outline: none;
}
.dc-search-count { font-size: 13px; color: var(--dc-ink-soft); white-space: nowrap; flex-shrink: 0; }

.dc-search-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 18px;
	transition: opacity 0.15s ease;
}
.dc-search-card {
	background: rgba(251, 246, 239, 0.96);
	border-radius: var(--dc-radius-lg);
	overflow: hidden;
	box-shadow: var(--dc-shadow);
	transition: transform 0.15s ease;
}
.dc-search-card:hover { transform: translateY(-3px); }
.dc-search-card-photo {
	position: relative;
	aspect-ratio: 3 / 4;
	background-size: cover;
	background-position: center;
	background-color: #2D1B4E;
	display: flex;
}
.dc-search-online-dot {
	position: absolute;
	top: 14px; right: 14px;
	width: 12px; height: 12px;
	border: 2px solid #fff;
}
.dc-search-card-actions { display: flex; gap: 8px; padding: 10px; }

/* -------------------------------------------------------------------- */
/* Profile prompts editor                                                */
/* -------------------------------------------------------------------- */

.dc-prompts-editor { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.dc-prompt-slot {
	background: rgba(255,255,255,0.5);
	border: 1px solid var(--dc-line);
	border-radius: var(--dc-radius-sm);
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.dc-prompt-question, .dc-prompt-answer {
	font-family: inherit;
	font-size: 14px;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--dc-line);
	background: #fff;
	color: var(--dc-ink);
	width: 100%;
}
.dc-prompt-answer { resize: vertical; }

/* -------------------------------------------------------------------- */
/* Prompt display on cards (swipe / search / likes)                      */
/* -------------------------------------------------------------------- */

.dc-card-prompt {
	background: rgba(255,255,255,0.14);
	backdrop-filter: blur(4px);
	border-radius: var(--dc-radius-sm);
	padding: 12px 14px;
	margin-top: 4px;
}
.dc-card-prompt-q {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: rgba(255,255,255,0.65);
	margin: 0 0 4px;
}
.dc-card-prompt-a {
	font-family: 'Fraunces', serif;
	font-size: 17px;
	font-weight: 500;
	font-style: italic;
	color: #fff;
	margin: 0;
	line-height: 1.35;
}

/* -------------------------------------------------------------------- */
/* Search: story strip                                                   */
/* -------------------------------------------------------------------- */

.dc-story-strip {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	padding: 4px 2px 16px;
	margin-bottom: 4px;
	scrollbar-width: thin;
}
.dc-story-item {
	flex-shrink: 0;
	background: none;
	border: none;
	cursor: pointer;
	padding: 3px;
}
.dc-story-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-color: var(--dc-blush);
	color: #fff;
	font-family: 'Fraunces', serif;
	font-weight: 600;
	font-size: 22px;
	border: 3px solid rgba(255,255,255,0.15);
	transition: transform 0.15s ease;
}
.dc-story-item:hover .dc-story-avatar { transform: scale(1.06); }
.dc-story-online .dc-story-avatar { border-color: #4fd97a; }
.dc-story-featured .dc-story-avatar { border-color: var(--dc-gold); }

/* -------------------------------------------------------------------- */
/* Search: filter bar + panel                                            */
/* -------------------------------------------------------------------- */

.dc-filter-inline-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	background: rgba(251, 246, 239, 0.9);
	border-radius: var(--dc-radius-md);
	padding: 12px 16px;
	margin-bottom: 12px;
}
.dc-filter-inline-field {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--dc-ink-soft);
}
.dc-filter-inline-field input {
	width: 58px;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid var(--dc-line);
	font-family: inherit;
	font-size: 13px;
	background: #fff;
}
.dc-filter-inline-distance input { width: 64px; }
.dc-filter-inline-to { color: var(--dc-ink-soft); font-size: 13px; }
.dc-filter-inline-apply { width: auto; padding: 9px 18px; font-size: 13px; }
.dc-filter-more-toggle {
	width: 38px; height: 38px;
	border-radius: 10px;
	border: 1px solid var(--dc-line);
	background: #fff;
	color: var(--dc-ink-soft);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.dc-filter-more-toggle:hover { color: var(--dc-ink); border-color: var(--dc-ink-soft); }
.dc-get-featured-pill {
	margin-left: auto;
	background: linear-gradient(135deg, var(--dc-gold), var(--dc-rose-deep));
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 9px 16px;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
}
.dc-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.dc-active-filter-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.dc-filter-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(251, 246, 239, 0.9);
	color: var(--dc-ink);
	font-size: 12px;
	font-weight: 700;
	padding: 6px 10px;
	border-radius: 999px;
}
.dc-filter-tag-x { cursor: pointer; opacity: 0.6; font-weight: 700; }
.dc-filter-tag-x:hover { opacity: 1; }

.dc-filter-panel {
	background: rgba(251, 246, 239, 0.96);
	border-radius: var(--dc-radius-md);
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: var(--dc-shadow);
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.dc-filter-row { display: flex; gap: 20px; flex-wrap: wrap; }
.dc-filter-row .dc-label { flex: 1; min-width: 160px; }
.dc-age-range-row { display: flex; align-items: center; gap: 8px; }
.dc-age-range-row input { width: 70px; }
.dc-age-range-row span { color: var(--dc-ink-soft); }
.dc-filter-actions { display: flex; justify-content: flex-end; gap: 10px; }
.dc-filter-actions .dc-btn { width: auto; padding: 11px 22px; }

/* -------------------------------------------------------------------- */
/* Search cards: photo count badge, icon actions, footer                 */
/* -------------------------------------------------------------------- */

.dc-photo-count-badge {
	position: absolute;
	top: 12px; right: 12px;
	display: flex;
	align-items: center;
	gap: 4px;
	background: rgba(21, 14, 26, 0.6);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 999px;
	z-index: 2;
}
.dc-search-card-highlight { animation: dc-card-pulse 1.2s ease; }
@keyframes dc-card-pulse {
	0%, 100% { box-shadow: var(--dc-shadow); }
	30% { box-shadow: 0 0 0 4px var(--dc-rose), var(--dc-shadow); }
}

.dc-search-status-pill {
	position: absolute;
	top: 12px; left: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 5px;
	background: rgba(21, 14, 26, 0.55);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 5px 10px;
	border-radius: 999px;
}
.dc-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #9a9a9a; }
.dc-search-status-online .dc-status-dot { background: #4fd97a; }

.dc-search-more-btn {
	position: absolute;
	top: 10px; right: 10px;
	z-index: 2;
	width: 28px; height: 28px;
	border-radius: 50%;
	border: none;
	background: rgba(21, 14, 26, 0.45);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}
.dc-search-more-menu {
	position: absolute;
	top: 42px; right: 10px;
	z-index: 4;
	background: #fff;
	border-radius: var(--dc-radius-sm);
	box-shadow: var(--dc-shadow);
	overflow: hidden;
	min-width: 140px;
}
.dc-search-more-menu button {
	display: block;
	width: 100%;
	text-align: left;
	padding: 10px 14px;
	border: none;
	background: none;
	font-size: 13px;
	font-family: inherit;
	color: var(--dc-ink);
	cursor: pointer;
}
.dc-search-more-menu button:hover { background: rgba(36, 26, 56, 0.06); }

.dc-search-card-overlay-actions {
	position: relative;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: -21px;
}
.dc-search-round-btn {
	width: 42px; height: 42px;
	border-radius: 50%;
	border: 3px solid var(--dc-cream);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 8px 18px -6px rgba(0,0,0,0.35);
	transition: transform 0.15s ease;
}
.dc-search-round-btn:hover { transform: translateY(-2px) scale(1.05); }
.dc-search-round-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.dc-search-round-message { background: var(--dc-gold); color: #fff; }
.dc-search-round-like { background: var(--dc-rose); color: #fff; }
.dc-search-round-active { background: var(--dc-rose-deep) !important; }

.dc-search-card-footer {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 28px 14px 14px;
}
.dc-search-card-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--dc-ink);
	display: flex;
	align-items: center;
	gap: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dc-search-card-sub { font-size: 12px; color: var(--dc-ink-soft); }
.dc-search-star { color: var(--dc-gold); font-size: 13px; }
.dc-verified-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px; height: 16px;
	border-radius: 50%;
	background: #4fd97a;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	flex-shrink: 0;
}
.dc-icon-btn {
	width: 34px; height: 34px;
	border-radius: 50%;
	border: 1px solid var(--dc-line);
	background: #fff;
	color: var(--dc-ink-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.dc-icon-btn:hover { transform: translateY(-2px); }
.dc-icon-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.dc-icon-btn-like:hover, .dc-icon-btn-like.dc-icon-btn-active { background: var(--dc-rose); color: #fff; border-color: var(--dc-rose); }
.dc-icon-btn-message:hover { background: var(--dc-gold); color: #fff; border-color: var(--dc-gold); }
.dc-icon-btn-save:hover, .dc-icon-btn-save.dc-icon-btn-active { background: var(--dc-ink); color: #fff; border-color: var(--dc-ink); }

/* -------------------------------------------------------------------- */
/* View-profile trigger (cards)                                          */
/* -------------------------------------------------------------------- */

.dc-card-view-trigger { cursor: pointer; }

/* -------------------------------------------------------------------- */
/* Story strip: "Get Featured" shortcut                                  */
/* -------------------------------------------------------------------- */

.dc-story-boost {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 64px;
}
.dc-story-boost-avatar {
	background: linear-gradient(135deg, var(--dc-gold), var(--dc-rose-deep));
	color: #fff;
	border-color: rgba(255,255,255,0.25);
}
.dc-story-boost:hover .dc-story-boost-avatar { transform: scale(1.06); }
.dc-story-boost-label {
	font-size: 10px;
	font-weight: 700;
	color: rgba(251,246,239,0.75);
	text-align: center;
	line-height: 1.2;
}

.dc-story-me { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; text-decoration: none; }
.dc-story-me-avatar {
	position: relative;
	background: rgba(255,255,255,0.12);
	color: #fff;
	border-color: rgba(255,255,255,0.3);
}
.dc-story-me:hover .dc-story-me-avatar { transform: scale(1.06); }
.dc-story-me-badge {
	position: absolute;
	bottom: -2px; right: -2px;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: var(--dc-rose);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	display: flex; align-items: center; justify-content: center;
	border: 2px solid var(--dc-plum);
}

/* -------------------------------------------------------------------- */
/* Search: results heading, sort, subtitle                               */
/* -------------------------------------------------------------------- */

.dc-results-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
}
.dc-results-heading h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Fraunces', serif;
	font-size: 22px;
	font-weight: 600;
	color: var(--dc-cream);
	margin: 0;
}
.dc-results-count {
	background: var(--dc-rose);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 3px 11px;
	border-radius: 999px;
}
.dc-sort-by { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(251,246,239,0.7); }
.dc-sort-by select {
	font-family: inherit;
	font-size: 13px;
	padding: 7px 10px;
	border-radius: 8px;
	border: 1px solid rgba(251,246,239,0.25);
	background: rgba(255,255,255,0.08);
	color: var(--dc-cream);
}
.dc-sort-by select option { color: var(--dc-ink); }
.dc-results-subtitle { font-size: 13px; color: rgba(251,246,239,0.55); margin: 4px 0 18px; }

/* -------------------------------------------------------------------- */
/* Dedicated View Profile page                                           */
/* -------------------------------------------------------------------- */

.dc-view-profile-screen { min-height: 100vh; }
.dc-view-profile-wrap { max-width: 600px; margin: 0 auto; padding: 100px 20px; text-align: center; color: var(--dc-cream); }

.dc-vp-back {
	position: fixed;
	top: 18px; left: 18px;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 6px;
	background: rgba(21, 14, 26, 0.55);
	backdrop-filter: blur(6px);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 10px 16px 10px 12px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}
.dc-vp-back:hover { background: rgba(21, 14, 26, 0.75); }

#dc-vp-content { max-width: 640px; margin: 0 auto; opacity: 0; }
#dc-vp-content.dc-vp-loaded { animation: dc-vp-rise 0.45s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes dc-vp-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

.dc-vp-hero { position: relative; }
.dc-vp-photo {
	position: relative;
	width: 100%;
	height: 72vh;
	max-height: 680px;
	min-height: 380px;
	background-size: cover;
	background-position: center;
	background-color: #2D1B4E;
	display: flex;
	cursor: grab;
	touch-action: pan-y;
}
.dc-vp-gradient { height: 55%; }
.dc-vp-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px; height: 40px;
	border-radius: 50%;
	border: none;
	background: rgba(21, 14, 26, 0.45);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
}
.dc-vp-nav-prev { left: 14px; }
.dc-vp-nav-next { right: 14px; }
.dc-vp-nav:hover { background: rgba(21, 14, 26, 0.7); }

.dc-vp-body { padding: 26px 24px 10px; color: var(--dc-cream); }
.dc-vp-heading { margin-bottom: 20px; }
.dc-vp-heading .dc-display { color: var(--dc-cream); margin: 8px 0 8px; }
.dc-vp-shared-badge {
	display: inline-block;
	background: linear-gradient(135deg, var(--dc-gold), var(--dc-rose-deep));
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 999px;
	margin: 0 6px 8px 0;
}
.dc-vp-meta { display: flex; gap: 16px; font-size: 14px; color: rgba(251,246,239,0.7); margin: 0; }

.dc-vp-prompt {
	background: rgba(255,255,255,0.06);
	border-left: 3px solid var(--dc-rose);
	border-radius: var(--dc-radius-md);
	padding: 20px 22px;
	margin-bottom: 16px;
}
.dc-vp-prompt-alt { border-left-color: var(--dc-gold); background: rgba(255,143,107,0.08); }
.dc-vp-prompt-q {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(251,246,239,0.55);
	margin: 0 0 8px;
}
.dc-vp-prompt-a {
	font-family: 'Fraunces', serif;
	font-size: 21px;
	font-weight: 500;
	font-style: italic;
	color: var(--dc-cream);
	margin: 0;
	line-height: 1.4;
}

.dc-vp-bio { font-size: 16px; line-height: 1.65; color: rgba(251,246,239,0.85); margin: 4px 0 22px; }
.dc-vp-interests { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.dc-vp-interests .dc-pill { background: rgba(255,255,255,0.92); }
.dc-vp-interests .dc-pill-shared {
	background: var(--dc-gradient-brand);
	color: #fff;
	font-weight: 700;
}

.dc-vp-thumbs {
	display: flex;
	gap: 8px;
	padding: 12px 24px;
	overflow-x: auto;
}
.dc-vp-thumb {
	flex-shrink: 0;
	width: 52px; height: 52px;
	border-radius: 10px;
	border: 2px solid transparent;
	background-size: cover;
	background-position: center;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.dc-vp-thumb:hover { opacity: 0.85; transform: translateY(-2px); }
.dc-vp-thumb-active { opacity: 1; border-color: var(--dc-rose); }
.dc-vp-spacer { height: 100px; }

.dc-vp-action-bar {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 640px;
	margin: 0 auto;
	padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
	background: linear-gradient(to top, var(--dc-plum) 55%, transparent);
}
.dc-vp-action-bar .dc-icon-btn { width: 46px; height: 46px; background: rgba(255,255,255,0.92); flex-shrink: 0; }
.dc-vp-action-bar .dc-action-btn { flex: 1; }

.dc-vp-safety {
	text-align: center;
	padding: 0 24px 28px;
	font-size: 13px;
}
.dc-vp-safety button {
	background: none;
	border: none;
	color: rgba(251,246,239,0.5);
	cursor: pointer;
	font-size: 13px;
	padding: 4px;
}
.dc-vp-safety button:hover { color: rgba(251,246,239,0.85); }
.dc-vp-safety span { color: rgba(251,246,239,0.3); margin: 0 6px; }

.dc-vp-unavailable { max-width: 420px; margin: 120px auto 0; text-align: center; color: var(--dc-cream); padding: 0 20px; }
.dc-vp-unavailable .dc-display-sm { color: var(--dc-cream); }
.dc-vp-unavailable p:not(.dc-display-sm) { color: rgba(251,246,239,0.7); margin-bottom: 22px; }
.dc-vp-unavailable .dc-btn { width: auto; padding: 14px 28px; }

@media (max-width: 600px) {
	.dc-vp-photo { height: 58vh; min-height: 320px; }
	.dc-vp-body { padding: 22px 18px 8px; }
	.dc-vp-prompt-a { font-size: 18px; }
	.dc-vp-action-bar { padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); }
}

/* -------------------------------------------------------------------- */
/* Voice / video calls                                                   */
/* -------------------------------------------------------------------- */

.dc-call-overlay {
	position: fixed;
	inset: 0;
	z-index: 2000;
	background: var(--dc-plum-deep);
	overflow: hidden;
	animation: dc-fade-in 0.2s ease;
}
.dc-call-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-color: #2D1B4E;
	filter: brightness(0.75);
}
.dc-call-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(13,6,32,0.55) 0%, rgba(13,6,32,0.15) 25%, rgba(13,6,32,0.15) 60%, rgba(13,6,32,0.85) 100%);
}
.dc-call-remote-video {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: 1;
}

.dc-call-back {
	position: absolute;
	top: max(18px, env(safe-area-inset-top));
	left: 18px;
	z-index: 5;
	width: 40px; height: 40px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,0.15);
	backdrop-filter: blur(6px);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}

.dc-call-local-video {
	position: absolute;
	bottom: 140px; right: 20px;
	z-index: 5;
	width: 110px; height: 150px;
	border-radius: var(--dc-radius-md);
	object-fit: cover;
	box-shadow: 0 10px 24px -6px rgba(0,0,0,0.5);
	transform: scaleX(-1); /* mirror, like every front-camera preview */
}
.dc-call-pip-avatar {
	position: absolute;
	bottom: 140px; right: 20px;
	z-index: 5;
	width: 90px; height: 90px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-color: var(--dc-blush);
	border: 3px solid rgba(255,255,255,0.4);
	box-shadow: 0 10px 24px -6px rgba(0,0,0,0.5);
}

.dc-call-info {
	position: absolute;
	left: 24px; bottom: 210px;
	z-index: 4;
	color: #fff;
}
.dc-call-info h2 {
	font-family: 'Fraunces', serif;
	font-size: 26px;
	font-weight: 600;
	margin: 0 0 6px;
	text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.dc-call-info p {
	font-size: 14px;
	color: rgba(255,255,255,0.8);
	margin: 0;
}

.dc-call-controls {
	position: absolute;
	left: 0; right: 0; bottom: max(36px, env(safe-area-inset-bottom));
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
}
.dc-call-btn {
	width: 54px; height: 54px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,0.18);
	backdrop-filter: blur(6px);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.15s ease, transform 0.15s ease;
}
.dc-call-btn:hover { transform: translateY(-2px); }
.dc-call-btn-active { background: var(--dc-gradient-brand); }
.dc-call-btn-end {
	width: 64px; height: 64px;
	background: linear-gradient(135deg, var(--dc-rose), var(--dc-rose-deep));
	box-shadow: 0 10px 24px -6px rgba(245, 71, 140, 0.6);
}

.dc-call-incoming-actions {
	position: absolute;
	left: 0; right: 0; bottom: max(50px, env(safe-area-inset-bottom));
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 60px;
}
.dc-call-btn-decline {
	width: 62px; height: 62px;
	background: linear-gradient(135deg, var(--dc-rose), var(--dc-rose-deep));
	box-shadow: 0 10px 24px -6px rgba(245, 71, 140, 0.6);
}
.dc-call-btn-accept {
	width: 62px; height: 62px;
	background: linear-gradient(135deg, #4fd97a, #2fa855);
	box-shadow: 0 10px 24px -6px rgba(79, 217, 122, 0.6);
	animation: dc-call-pulse 1.4s ease-in-out infinite;
}
@keyframes dc-call-pulse {
	0%, 100% { box-shadow: 0 10px 24px -6px rgba(79, 217, 122, 0.6); }
	50% { box-shadow: 0 10px 34px -4px rgba(79, 217, 122, 0.9); }
}

/* -------------------------------------------------------------------- */
/* Chat header call buttons                                              */
/* -------------------------------------------------------------------- */

.dc-chat-call-actions { display: flex; gap: 8px; margin-left: auto; }
.dc-chat-call-btn {
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 1px solid var(--dc-line);
	background: #fff;
	color: var(--dc-ink-soft);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.dc-chat-call-btn:hover { background: var(--dc-gradient-brand); color: #fff; border-color: transparent; }

@media (max-width: 480px) {
	.dc-call-info { bottom: 190px; }
	.dc-call-local-video, .dc-call-pip-avatar { bottom: 120px; right: 16px; width: 84px; height: 112px; }
	.dc-call-pip-avatar { width: 72px; height: 72px; }
}