/* ============================================================
   MODERN DATING APP — PREMIUM REDESIGN
   Maintains all original class names & PHP compatibility
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
	/* Brand Colors */
	--rose:        #f43f74;
	--rose-dark:   #d6185a;
	--rose-light:  #ff6b9d;
	--rose-pale:   #fff0f5;
	--plum:        #7c3aed;
	--plum-light:  #a78bfa;
	--sapphire:    #2563eb;
	--sapphire-light: #60a5fa;
	--midnight:    #0f0520;
	--deep:        #1a0933;
	--ink:         #1e1b2e;

	/* Gradients */
	--grad-rose:   linear-gradient(135deg, #f43f74 0%, #c2255c 100%);
	--grad-vivid:  linear-gradient(135deg, #f43f74 0%, #7c3aed 100%);
	--grad-warm:   linear-gradient(135deg, #ff6b9d 0%, #f43f74 50%, #c2255c 100%);
	--grad-hero:   linear-gradient(135deg, rgba(15,5,32,0.72) 0%, rgba(124,58,237,0.2) 100%);
	--grad-glass:  linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%);

	/* Glass */
	--glass-bg:     rgba(255,255,255,0.08);
	--glass-border: rgba(255,255,255,0.18);
	--glass-blur:   blur(20px);

	/* Shadows */
	--shadow-sm:   0 2px 8px rgba(0,0,0,0.08);
	--shadow-md:   0 8px 32px rgba(0,0,0,0.12);
	--shadow-lg:   0 20px 60px rgba(0,0,0,0.18);
	--shadow-glow: 0 0 40px rgba(244,63,116,0.25);
	--shadow-rose: 0 8px 32px rgba(244,63,116,0.3);

	/* Typography */
	--font-display: 'Playfair Display', Georgia, serif;
	--font-body:    'DM Sans', -apple-system, sans-serif;

	/* Spacing */
	--radius-sm:  8px;
	--radius-md:  16px;
	--radius-lg:  24px;
	--radius-xl:  36px;
	--radius-full: 9999px;

	/* Transitions */
	--ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	--ease-out:    cubic-bezier(0.22, 1, 0.36, 1);

	/* Legacy compatibility vars */
	--primary-gradient: var(--grad-rose);
	--glass-blur: blur(20px);
	--card-shadow: var(--shadow-md);
	--premium-pink: var(--rose);
	--deep-purple: var(--plum);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; outline: none !important; word-break: break-word; }
html, body { width: 100%; height: 100%; scroll-behavior: smooth; }

body {
	background-color: #fafafa;
	padding-top: 64px;
	overflow-x: hidden;
	font-family: var(--font-body);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
}
body#white { background-color: #fff; }

p { line-height: 1.75; }
.bold { font-weight: 600; }
svg { vertical-align: middle; }
a { text-decoration: none; }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal-up {
	opacity: 0;
	transform: translateY(36px);
	transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal-up.revealed { opacity: 1; transform: translateY(0); }
.reveal-up.delay-1 { transition-delay: 0.1s; }
.reveal-up.delay-2 { transition-delay: 0.2s; }
.reveal-up.delay-3 { transition-delay: 0.3s; }
.reveal-up.delay-4 { transition-delay: 0.4s; }
.reveal-up.delay-5 { transition-delay: 0.5s; }

/* ============================================================
   NAVIGATION
   ============================================================ */
nav {
	background-color: rgba(255,255,255,0.92);
	position: fixed;
	box-shadow: 0 1px 0 rgba(0,0,0,0.07);
	height: 64px;
	line-height: 64px;
	z-index: 99;
	font-family: var(--font-body);
	top: 0; left: 0; right: 0;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	transition: all 0.3s var(--ease-out);
}
nav .nav-wrapper { justify-content: space-between; }
nav.nav-scrolled {
	box-shadow: 0 4px 24px rgba(0,0,0,0.08);
	background-color: rgba(255,255,255,0.97);
}
nav .header_logo {
	height: 100%;
	max-width: 130px;
	width: inherit;
	position: relative;
}
nav .header_logo img {
	width: 100%;
	display: block;
	pointer-events: none;
	user-select: none;
}
.nav-brand { top: 50%; transform: translateY(-50%); display: block; }

.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-login {
	color: var(--ink) !important;
	font-weight: 500;
	font-size: 15px;
	padding: 0 16px;
	height: 40px;
	line-height: 40px;
	border-radius: var(--radius-full);
	transition: all 0.2s;
}
.nav-login:hover { background: rgba(0,0,0,0.05); }
.nav-register {
	background: var(--grad-rose) !important;
	border-radius: var(--radius-full) !important;
	font-weight: 600 !important;
	font-size: 14px;
	padding: 0 20px;
	height: 40px;
	line-height: 40px;
	box-shadow: var(--shadow-rose) !important;
	transition: all 0.2s var(--ease-spring) !important;
	border: none !important;
}
.nav-register:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 40px rgba(244,63,116,0.4) !important;
}

/* Index Nav overrides */
.to_index_nav {
	background: transparent !important;
	box-shadow: none !important;
	height: 64px;
	line-height: 64px;
}
.to_index_nav .header_logo { max-width: 140px; margin: 0; }
.to_index_nav .brand-logo { top: 50%; transform: translateY(-50%); }
.to_index_nav ul a.qdt_hdr_auth_btns {
	font-size: 14px;
	height: 40px;
	line-height: 40px;
}

/* Sticky nav (landing page) */
.sticky-nav { position: fixed !important; }

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-premium {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
	color: #fff;
	margin-top: -64px;
	overflow: hidden;
}
.hero-overlay {
	position: absolute;
	inset: 0;
	background: var(--grad-hero);
	z-index: 1;
}
.hero-particles {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}
.hero-particle {
	position: absolute;
	background: rgba(255,255,255,0.4);
	border-radius: 50%;
	animation: particle-float linear infinite;
}
@keyframes particle-float {
	0%   { transform: translateY(0) scale(1); opacity: 0; }
	20%  { opacity: 0.6; }
	80%  { opacity: 0.4; }
	100% { transform: translateY(-120vh) scale(0.5); opacity: 0; }
}
.hero-content {
	position: relative;
	z-index: 5;
	padding: 120px 0 80px;
}
.hero-inner {
	max-width: 660px;
}
.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.25);
	backdrop-filter: blur(10px);
	border-radius: var(--radius-full);
	padding: 6px 16px;
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 28px;
	letter-spacing: 0.3px;
}
.badge-dot {
	width: 8px; height: 8px;
	background: #4ade80;
	border-radius: 50%;
	animation: pulse-dot 2s ease infinite;
}
@keyframes pulse-dot {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%       { transform: scale(1.4); opacity: 0.7; }
}
.hero-title {
	font-family: var(--font-display);
	font-size: clamp(48px, 7vw, 80px);
	font-weight: 700;
	line-height: 1.08;
	margin: 0 0 24px;
	letter-spacing: -1px;
}
.hero-title-highlight {
	background: linear-gradient(135deg, #fbbf24, #f43f74, #c084fc);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	display: inline-block;
	font-style: italic;
}
.hero-subtitle {
	font-size: 19px;
	color: rgba(255,255,255,0.82);
	margin: 0 0 36px;
	line-height: 1.6;
	max-width: 480px;
}
.hero-subtitle strong { color: #fff; font-weight: 600; }
.hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn-hero-primary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--grad-rose);
	color: #fff !important;
	font-weight: 600;
	font-size: 16px;
	padding: 0 32px;
	height: 56px;
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-rose), inset 0 1px 0 rgba(255,255,255,0.2);
	transition: all 0.3s var(--ease-spring);
	font-family: var(--font-body);
}
.btn-hero-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 48px rgba(244,63,116,0.5);
}
.btn-hero-primary svg { transition: transform 0.2s; }
.btn-hero-primary:hover svg { transform: translateX(4px); }
.btn-hero-ghost {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255,255,255,0.9) !important;
	font-weight: 500;
	font-size: 15px;
	padding: 0 24px;
	height: 56px;
	border-radius: var(--radius-full);
	border: 1.5px solid rgba(255,255,255,0.3);
	background: rgba(255,255,255,0.08);
	backdrop-filter: blur(10px);
	transition: all 0.2s;
}
.btn-hero-ghost:hover {
	background: rgba(255,255,255,0.15);
	border-color: rgba(255,255,255,0.5);
}
.hero-stats {
	display: flex;
	align-items: center;
	gap: 0;
	margin-top: 48px;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.15);
	backdrop-filter: blur(16px);
	border-radius: var(--radius-lg);
	padding: 20px 32px;
	width: fit-content;
}
.stat-item { text-align: center; padding: 0 24px; }
.stat-number {
	display: block;
	font-size: 28px;
	font-weight: 700;
	font-family: var(--font-display);
	line-height: 1;
	margin-bottom: 4px;
}
.stat-label { font-size: 12px; color: rgba(255,255,255,0.65); text-transform: uppercase; letter-spacing: 1px; }
.stat-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.2); }

/* Floating cards */
.hero-float-cards { position: absolute; right: 6%; top: 50%; transform: translateY(-50%); z-index: 4; }
.float-card {
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.2);
	backdrop-filter: blur(20px);
	border-radius: var(--radius-md);
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	color: #fff;
	margin-bottom: 16px;
	min-width: 200px;
	animation: float-card 6s ease-in-out infinite;
}
.float-card-1 { animation-delay: 0s; }
.float-card-2 { animation-delay: 2s; margin-left: 40px; }
.float-card-3 { animation-delay: 4s; font-size: 13px; }
@keyframes float-card {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-12px); }
}
.fc-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--rose), var(--plum)); }
.fc-info { display: flex; flex-direction: column; }
.fc-name { font-weight: 600; font-size: 14px; }
.fc-tag  { font-size: 12px; opacity: 0.75; margin-top: 2px; }
.fc-heart { font-size: 24px; }
.fc-online-badge { width: 10px; height: 10px; background: #4ade80; border-radius: 50%; animation: pulse-dot 2s ease infinite; }

/* ============================================================
   FILTER SECTION
   ============================================================ */
.filter-section {
	padding: 0 0 80px;
	background: #fff;
	position: relative;
}
.glass-card {
	background: #fff;
	border: 1px solid rgba(0,0,0,0.07);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
	padding: 40px 48px;
	position: relative;
	overflow: hidden;
	margin-top: -60px;
	z-index: 10;
}
.glass-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--grad-vivid);
}
.filter-card-header { margin-bottom: 32px; }
.filter-card-header h3 {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 6px;
}
.filter-card-header p { color: #888; margin: 0; font-size: 15px; }
.filter-card-body {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.filter-group { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 140px; }
.filter-label { font-size: 12px; font-weight: 600; color: var(--rose); text-transform: uppercase; letter-spacing: 1px; }
.filter-select-wrap { position: relative; }
.filter-select {
	width: 100%;
	background: #f8f8fb !important;
	border: 1.5px solid rgba(0,0,0,0.08) !important;
	border-radius: var(--radius-md) !important;
	padding: 0 16px !important;
	height: 48px !important;
	font-size: 15px !important;
	font-family: var(--font-body) !important;
	color: var(--ink) !important;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s;
	display: block !important;
}
.filter-select:focus {
	border-color: var(--rose) !important;
	box-shadow: 0 0 0 3px rgba(244,63,116,0.12) !important;
	background: #fff !important;
}
.filter-select-sm { width: 90px !important; }
.filter-age-wrap { display: flex; align-items: center; gap: 8px; }
.age-sep { font-weight: 600; color: #999; font-size: 18px; }
.filter-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--rose-pale);
	border-radius: 50%;
	color: var(--rose);
	flex-shrink: 0;
	align-self: flex-end;
	margin-bottom: 4px;
}
.filter-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--grad-rose);
	color: #fff !important;
	font-weight: 600;
	font-size: 15px;
	padding: 0 28px;
	height: 48px;
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-rose);
	transition: all 0.3s var(--ease-spring);
	font-family: var(--font-body);
	flex-shrink: 0;
	align-self: flex-end;
	margin-bottom: 0;
}
.filter-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(244,63,116,0.45); }
.filter-btn svg { transition: transform 0.2s; }
.filter-btn:hover svg { transform: translateX(4px); }

/* ============================================================
   FEATURES SECTION
   ============================================================ */
.features-section {
	padding: 100px 0;
	background: linear-gradient(180deg, #fff 0%, #fdf6ff 50%, #fff0f5 100%);
	position: relative;
}
.section-header {
	text-align: center;
	margin-bottom: 64px;
}
.section-tag {
	display: inline-block;
	background: var(--rose-pale);
	color: var(--rose);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 6px 16px;
	border-radius: var(--radius-full);
	margin-bottom: 16px;
}
.section-header h2 {
	font-family: var(--font-display);
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 16px;
	line-height: 1.2;
}
.section-header h2 em { font-style: italic; color: var(--rose); }
.section-header p { font-size: 17px; color: #666; max-width: 520px; margin: 0 auto; line-height: 1.7; }

.features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.feature-card {
	background: #fff;
	border: 1px solid rgba(0,0,0,0.06);
	border-radius: var(--radius-xl);
	padding: 40px 32px;
	position: relative;
	overflow: hidden;
	transition: all 0.4s var(--ease-out);
	cursor: default;
}
.feature-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-lg);
	border-color: transparent;
}
.feature-glow {
	position: absolute;
	top: -60px; right: -60px;
	width: 180px; height: 180px;
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.4s;
	pointer-events: none;
}
.feature-card:hover .feature-glow { opacity: 0.06; }
.feature-glow-blue  { background: var(--sapphire); }
.feature-glow-pink  { background: var(--rose); }
.feature-glow-purple { background: var(--plum); }

.feature-icon {
	width: 72px; height: 72px;
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 28px;
	transition: transform 0.3s var(--ease-spring);
}
.feature-card:hover .feature-icon { transform: scale(1.1) rotate(-3deg); }
.feature-icon-blue   { background: rgba(37,99,235,0.08); }
.feature-icon-pink   { background: rgba(244,63,116,0.08); }
.feature-icon-purple { background: rgba(124,58,237,0.08); }
.feature-icon img { height: 40px; width: auto; }

.feature-card h3 {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 12px;
}
.feature-card p {
	font-size: 15px;
	color: #666;
	line-height: 1.65;
	margin: 0 0 24px;
}
.feature-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--rose);
	transition: gap 0.2s;
}
.feature-card:hover .feature-link { gap: 10px; }

/* ============================================================
   STORIES SECTION
   ============================================================ */
.stories-section {
	padding: 100px 0;
	background: linear-gradient(135deg, #fff 0%, #fff0f5 50%, #f5efff 100%);
	position: relative;
	overflow: hidden;
}
.stories-bg-shape {
	position: absolute;
	top: -200px; right: -200px;
	width: 600px; height: 600px;
	background: radial-gradient(circle, rgba(244,63,116,0.06) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}
.stories-carousel-wrap { max-width: 820px; margin: 0 auto; }

/* Story slide override */
.story-slide {
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 40px 50px;
	height: 100%;
	background: rgba(255,255,255,0.7);
	backdrop-filter: blur(20px);
	border-radius: 24px;
}
.story-slide-avatar { flex-shrink: 0; position: relative; }
.story-avatar-img {
	width: 110px !important;
	height: 110px !important;
	object-fit: cover;
	border-radius: 50%;
	border: 4px solid #fff;
	box-shadow: 0 8px 24px rgba(244,63,116,0.25);
}
.story-avatar-ring {
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	border: 2px solid var(--rose);
	opacity: 0.4;
	animation: spin-ring 8s linear infinite;
}
@keyframes spin-ring {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
.story-slide-content { flex: 1; text-align: left; }
.story-quote-mark {
	font-family: var(--font-display);
	font-size: 80px;
	line-height: 0.5;
	color: var(--rose);
	opacity: 0.2;
	margin-bottom: 8px;
}
.story-slide-content h4 {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 600;
	color: var(--rose);
	margin: 0 0 12px;
	font-style: italic;
}
.story-slide-content p {
	font-size: 16px;
	color: #555;
	line-height: 1.7;
	margin: 0 0 20px;
}
.story-slide-footer { display: flex; align-items: center; justify-content: space-between; }
.story-hearts { font-size: 18px; }
.story-name { font-weight: 600; font-size: 14px; color: #333; }

/* Carousel indicators */
.dt_tstm_usr .carousel .indicators .indicator-item {
	background: rgba(244,63,116,0.2);
	width: 8px; height: 8px;
	border-radius: 50%;
	margin: 35px 4px 5px;
	transition: all 0.3s;
}
.dt_tstm_usr .carousel .indicators .indicator-item.active {
	background: var(--rose);
	width: 24px;
	border-radius: 4px;
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how-section {
	padding: 100px 0 80px;
	background: #fff;
	position: relative;
	overflow: hidden;
}
.how-bg-lines {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(244,63,116,0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(244,63,116,0.03) 1px, transparent 1px);
	background-size: 60px 60px;
	pointer-events: none;
}
.how-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	margin-top: 64px;
	position: relative;
}
.how-steps::before {
	content: '';
	position: absolute;
	top: 60px; left: calc(16.666% + 30px); right: calc(16.666% + 30px);
	height: 2px;
	background: linear-gradient(90deg, var(--rose), var(--plum));
	opacity: 0.2;
}
.how-step {
	text-align: center;
	position: relative;
}
.how-step-number {
	font-family: var(--font-display);
	font-size: 64px;
	font-weight: 700;
	color: var(--rose);
	opacity: 0.07;
	line-height: 1;
	margin-bottom: -20px;
	position: relative;
	z-index: 0;
}
.how-step-icon-wrap {
	width: 120px; height: 120px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 32px;
	position: relative;
	z-index: 1;
	transition: all 0.4s var(--ease-spring);
}
.how-step:hover .how-step-icon-wrap { transform: scale(1.08) translateY(-4px); }
.how-step-blue   { background: rgba(37,99,235,0.08); color: var(--sapphire); }
.how-step-purple { background: rgba(124,58,237,0.08); color: var(--plum); }
.how-step-pink   { background: rgba(244,63,116,0.08); color: var(--rose); }
.how-step-icon-wrap::after {
	content: '';
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	border: 2px dashed currentColor;
	opacity: 0.2;
	animation: spin-ring 12s linear infinite;
}
.how-step h3 {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 12px;
}
.how-step p {
	font-size: 15px;
	color: #666;
	max-width: 220px;
	margin: 0 auto;
	line-height: 1.65;
}

/* Members preview */
.members-preview {
	background: linear-gradient(135deg, #fff0f5 0%, #f5efff 100%);
	border-radius: var(--radius-xl);
	padding: 40px 48px;
	margin-top: 80px;
}
.members-preview-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 28px;
}
.members-preview-header h3 {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 600;
	color: var(--ink);
	margin: 0;
}
.members-preview-cta {
	font-size: 14px;
	font-weight: 600;
	color: var(--rose);
	transition: gap 0.2s;
}
.members-avatars { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.member-avatar-wrap {
	position: relative;
	display: block;
	transition: transform 0.2s var(--ease-spring);
}
.member-avatar-wrap:hover { transform: scale(1.12) translateY(-4px); z-index: 2; }
.member-avatar {
	width: 60px; height: 60px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #fff;
	box-shadow: var(--shadow-sm);
}
.member-online-dot {
	position: absolute;
	bottom: 2px; right: 2px;
	width: 14px; height: 14px;
	background: #4ade80;
	border: 2px solid #fff;
	border-radius: 50%;
}
.member-more {
	width: 60px; height: 60px;
	border-radius: 50%;
	background: var(--rose-pale);
	color: var(--rose);
	font-weight: 700;
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3px solid #fff;
}

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section {
	padding: 120px 0;
	background: var(--midnight);
	position: relative;
	overflow: hidden;
}
.cta-bg-mesh {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(ellipse 80% 80% at 50% -20%, rgba(244,63,116,0.3) 0%, transparent 100%);
	pointer-events: none;
}
.cta-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	pointer-events: none;
}
.cta-orb-1 { width: 400px; height: 400px; background: rgba(244,63,116,0.15); top: -100px; right: -100px; }
.cta-orb-2 { width: 300px; height: 300px; background: rgba(124,58,237,0.15); bottom: -80px; left: -80px; }
.cta-orb-3 { width: 200px; height: 200px; background: rgba(244,63,116,0.08); top: 50%; left: 50%; transform: translate(-50%,-50%); }
.cta-content { position: relative; z-index: 2; }
.cta-inner { text-align: center; max-width: 640px; margin: 0 auto; }
.cta-emoji { font-size: 56px; margin-bottom: 24px; display: block; animation: heartbeat 2s ease infinite; }
@keyframes heartbeat {
	0%, 100% { transform: scale(1); }
	25%       { transform: scale(1.12); }
	50%       { transform: scale(1); }
	75%       { transform: scale(1.08); }
}
.cta-inner h2 {
	font-family: var(--font-display);
	font-size: clamp(32px, 4vw, 52px);
	font-weight: 700;
	color: #fff;
	margin: 0 0 20px;
	line-height: 1.15;
}
.cta-inner > p {
	font-size: 18px;
	color: rgba(255,255,255,0.7);
	margin: 0 0 40px;
	line-height: 1.6;
}
.cta-inner > p strong { color: #fff; font-weight: 600; }
.cta-actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.btn-cta-primary {
	display: inline-flex;
	align-items: center;
	background: var(--grad-rose);
	color: #fff !important;
	font-weight: 700;
	font-size: 17px;
	padding: 0 40px;
	height: 60px;
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-rose);
	transition: all 0.3s var(--ease-spring);
	font-family: var(--font-body);
}
.btn-cta-primary:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 16px 48px rgba(244,63,116,0.5);
}
.btn-cta-ghost {
	display: inline-flex;
	align-items: center;
	color: rgba(255,255,255,0.85) !important;
	font-weight: 500;
	font-size: 16px;
	padding: 0 28px;
	height: 60px;
	border-radius: var(--radius-full);
	border: 1.5px solid rgba(255,255,255,0.25);
	background: transparent;
	transition: all 0.2s;
}
.btn-cta-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.45); }
.cta-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 13px;
	color: rgba(255,255,255,0.45);
	margin: 24px 0 0 !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
	background: #0d0a1a;
	color: rgba(255,255,255,0.7);
	padding: 72px 0 0;
}
.footer-top {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 60px;
	border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-brand { max-width: 340px; }
.footer-logo { margin-bottom: 20px; }
.footer-logo img { max-height: 36px; filter: brightness(0) invert(1); }
.footer-brand p { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.5); margin: 0 0 24px; }
.footer-social { display: flex; gap: 10px; }
.footer-social-btn {
	width: 38px; height: 38px;
	border-radius: 50%;
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.6) !important;
	transition: all 0.2s;
}
.footer-social-btn:hover { background: var(--rose); border-color: var(--rose); color: #fff !important; }
.footer-links-col h4 {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: rgba(255,255,255,0.9);
	margin: 0 0 20px;
}
.footer-links-col ul { padding: 0; margin: 0; list-style: none; }
.footer-links-col li { margin-bottom: 12px; }
.footer-links-col li a {
	color: rgba(255,255,255,0.5) !important;
	font-size: 14px;
	transition: color 0.2s, padding-left 0.2s;
}
.footer-links-col li a:hover { color: #fff !important; padding-left: 4px; }
.footer-bottom {
	padding: 24px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}
.footer-copyright-text { font-size: 13px; color: rgba(255,255,255,0.35); margin: 0; }

/* ============================================================
   LEGACY BUTTONS (preserve original class behavior)
   ============================================================ */
.btn_primary { background: var(--grad-rose) !important; box-shadow: var(--shadow-rose) !important; border: none !important; }
.btn_primary:hover { transform: translateY(-2px); }
.btn_round { border-radius: var(--radius-full); }
.btn_glossy { color: #fff; background-color: rgba(255,255,255,0.2); }
.btn_glossy:hover { background-color: rgba(255,255,255,0.3); }
.btn_fb  { background-color: #2d4373; }
.btn_tw  { background-color: #2795e9; }
.btn_gp  { background-color: #c23321; }
.btn_vk  { background-color: #4a76a8; }
.btn, .btn-large, .btn-small, .btn-flat { text-transform: none; }
.text-main { color: var(--rose); }
.bg_gradient { background: var(--grad-rose); }
.bg_white { background: #fff; }

/* ============================================================
   GLASS MORPHIC (legacy)
   ============================================================ */
.glass-morphic {
	background: rgba(255,255,255,0.12);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	box-shadow: var(--shadow-md);
}

/* ============================================================
   TEXT GRADIENT (legacy)
   ============================================================ */
.text-gradient {
	background: var(--grad-vivid);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ============================================================
   STICKY NAV
   ============================================================ */
.sticky-nav {
	background: rgba(255,255,255,0.85) !important;
	backdrop-filter: blur(20px) !important;
	-webkit-backdrop-filter: blur(20px) !important;
	box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
}

/* ============================================================
   FEATURE CARDS (legacy support)
   ============================================================ */
.to_index_ftrs_card {
	background: #fff;
	border-radius: var(--radius-xl);
	padding: 36px;
	box-shadow: var(--shadow-md);
	transition: all 0.35s var(--ease-out);
	height: 100%;
	border: 1px solid rgba(0,0,0,0.06);
}
.to_index_ftrs_card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); }
.to_index_ftrs_card img { height: 100px; width: auto; margin-bottom: 20px; }

/* ============================================================
   PREMIUM FILTER PANEL (legacy)
   ============================================================ */
.to_main_hero_filters.premium-filters {
	background: rgba(255,255,255,0.95);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: 1px solid rgba(255,255,255,0.4);
	border-radius: var(--radius-xl);
	padding: 36px;
	position: relative;
	z-index: 5;
}
.to_main_hero_filters .to_main_hero_filters_innrlist > p { color: var(--ink); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }

/* ============================================================
   LAYOUT (sidebar, header — from original, preserved)
   ============================================================ */
.container-fluid { padding: 0 15px; }
.r_margin { margin-left: -.75rem; margin-right: -.75rem; }
.no_margin { margin: 0; }
.no_margin_top { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.margin_right_ten { margin-right: 10px; }
.modal_sm { width: 420px; }
.border_hr { border: 0.5px solid #e3e3e3; margin: 20px 0; }
.page-margin { margin-top: 20px; margin-bottom: 20px; }
.dt_sections {
	background: #fff;
	padding: 20px;
	position: relative;
	box-shadow: var(--shadow-sm);
	border-radius: var(--radius-md);
}
.dropdown-content li > a, .dropdown-content li > span { padding: 9px 16px; }
.dropdown-content li { min-height: 30px; line-height: 1rem; }
.select-wrapper input.select-dropdown { font-size: 14px; }
.select-wrapper input.select-dropdown:focus { border-color: var(--rose); }
.select-wrapper .dropdown-content li > span { font-size: 14px; color: #676767; line-height: 15px; }
body > #container { min-height: calc(100vh - 145px); }

/* ============================================================
   SIDEBAR (original, preserved)
   ============================================================ */
.to_sidebar {
	position: fixed; width: 280px; left: 0; top: 0;
	padding: 65px 0 10px;
	background-color: #fff;
	bottom: 0;
	box-shadow: 1px 0 0 rgba(0,0,0,0.06);
	overflow: hidden; overflow-y: auto; height: 100%;
	transition: all 0.25s ease-in-out;
	font-family: var(--font-body);
	z-index: 40;
}
.side_open .to_sidebar { transform: translateX(-290px); }
.to_sidebar .home_usr_sct { padding: 0 10px 5px; display: block; border-bottom: 1px solid #eaeaea; margin: 0 15px 16px; text-align: center; }
.to_sidebar .home_usr_sct .user_popularity_icn { width: 120px; min-width: 120px; height: 120px; position: relative; text-align: center; margin: auto; }
.to_sidebar .home_usr_sct .user_popularity_icn svg { width: 120px; height: 120px; margin: -0.6px 0 0 -2px; }
.to_sidebar .home_usr_sct .user_popularity_icn svg path { fill: none; }
.to_sidebar .home_usr_sct .user_popularity_icn .load-bg { stroke: #e6e6e6; stroke-width: 3px; }
.to_sidebar .home_usr_sct .user_popularity_icn .load-circle { stroke-width: 3px; stroke-linecap: round; transition: stroke-dashoffset 1s ease-in-out; stroke: var(--rose); }
.to_sidebar .home_usr_sct .user_popularity_icn > a { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 83px; height: 83px; }
.to_sidebar .home_usr_sct .user_popularity_icn > a img { width: 100%; height: 100%; }
.to_sidebar .home_usr_sct h3 { margin-top: 0; margin-bottom: 5px; font-size: 18px; font-weight: 500; }
.to_sidebar .home_usr_sct h3 a { color: #2d2d2d; }
.to_sidebar .home_usr_sct h3 a svg, .qd_rstroy_thumbs h5 svg { width: 15px; height: 15px; margin: 0 3px; fill: currentColor; }
.to_sidebar .home_usr_sct .btn { box-shadow: none; border-radius: var(--radius-full); text-transform: none; font-weight: 500; margin: 5px 0 20px; border: 1px solid var(--rose); background: transparent; color: var(--rose); line-height: 30px; font-size: 11px; height: 32px; padding: 0 10px; }
.to_sidebar .home_usr_sct .btn svg { width: 16px; height: 16px; margin: -2px 1px 0 0; }
.to_sidebar .home_usr_sct .btn:hover { background: var(--rose); color: #fff; }
.to_sidebar .to_side_menus { display: flex; flex-direction: column; height: 100%; }
.to_sidebar .to_side_menus .home_usr_link:last-child { margin-top: auto; }
.to_sidebar .home_usr_link { margin: 0; }
.to_sidebar .home_usr_link li { padding: 5px 25px; line-height: 1; }
.to_sidebar .home_usr_link li.set { border-top: 1px solid #eaeaea; padding: 16px 10px 5px; margin: 16px 15px 0; }
.to_sidebar .home_usr_link li a { display: inline-flex; align-items: center; font-weight: 500; color: #626262; text-transform: lowercase; border-radius: var(--radius-full); padding: 0 12px 0 0; transition: all 0.15s; }
.to_sidebar .home_usr_link li a:hover { background-color: rgba(0,0,0,0.04); }
.to_sidebar .home_usr_link li a svg { margin-right: 12px; background-color: rgba(0,0,0,0.06); padding: 8px; border-radius: 50%; width: 36px; height: 36px; }
.to_sidebar .home_usr_link li a svg .active_path { display: none; }
.to_sidebar .home_usr_link li.active a svg { color: var(--rose); }
.to_sidebar .home_usr_link li.active a svg path { display: none; }
.to_sidebar .home_usr_link li.active a svg .active_path { display: block; }
.to_main_cont { transition: all 0.25s ease-in-out; }
.to_main_cont.to_side_present { margin-left: 280px; }
.side_open .to_main_cont, .side_open footer.page_footer { margin: 0 !important; }
.side_open .to_hdr_noti_cont { left: 0; }
.to_mshow_side_links { display: none; }

/* ============================================================
   MINI SIDEBAR
   ============================================================ */
.to_sidebar_mini {
	position: fixed; overflow: hidden; background-color: white;
	transition: all 0.2s; left: 0; right: 0; width: 100%; bottom: 0;
	z-index: 999; height: 56px;
	box-shadow: 0 -1px 0 rgba(0,0,0,0.07);
	display: none;
}
.to_sidebar_mini ul { margin: 0; height: 100%; justify-content: center; }
.to_sidebar_mini li { flex: 1 100%; display: flex; max-width: 168px; height: 100%; padding: 0 5px; }
.to_sidebar_mini li a { display: block; text-align: center; width: 100%; color: #979797; }
.to_sidebar_mini li.active a { color: var(--rose); }
.to_sidebar_mini li a svg { margin: 16px 0; }
.to_sidebar_mini li a img { width: 24px; height: 24px; vertical-align: middle; margin: 16px 0; }

/* ============================================================
   SPINNER
   ============================================================ */
.to_spin { height: 64px; width: 64px; animation: svg_rotate 2s linear infinite; }
.to_spin_path { stroke-dasharray: 1,150; stroke-dashoffset: 0; stroke: var(--rose); stroke-linecap: round; animation: svg_dash 1.5s ease-in-out infinite; }
@keyframes svg_rotate { 100% { transform: rotate(360deg); } }
@keyframes svg_dash {
	0%   { stroke-dasharray: 1,150; stroke-dashoffset: 0; }
	50%  { stroke-dasharray: 90,150; stroke-dashoffset: -35; }
	100% { stroke-dasharray: 90,150; stroke-dashoffset: -124; }
}

/* ============================================================
   HEADER (inner app nav)
   ============================================================ */
.dt_slide_menu { color: #5f5f5f; cursor: pointer; margin: 0 40px 0 15px; }
.dt_slide_menu svg { margin-top: -5px; }
nav .nav-wrapper { justify-content: space-between; }
nav .header_home_link li a {
	background: transparent; text-transform: capitalize;
	font-size: 15px; transition: all .15s ease-in-out;
	padding: 0 10px; margin: 0 10px; color: #4e4e4e;
	height: 64px; font-weight: 500;
}
nav .header_home_link li a:hover, nav .header_home_link li a.active { box-shadow: inset 0 -2px var(--rose); color: var(--rose); }
nav .header_home_link li a svg { width: 21px; height: 21px; margin: -3px 2px 0 0; }
nav .header_notifications .to_noti_menu.active svg path, nav .header_notifications .to_noti_menu svg .active_path { display: none; }
nav .header_notifications .to_noti_menu.active svg .active_path { display: block; }

.to_hdr_noti_cont {
	position: fixed; top: 0; right: 0; bottom: 0; left: 281px;
	background-color: white; z-index: 42; padding-top: 64px;
	opacity: 0; visibility: hidden; transition: all 0.13s ease-in-out; transform: translateY(-150px);
}
.notis_open .to_hdr_noti_cont { opacity: 1; visibility: visible; transform: translateY(0); }
.to_hdr_noti_cont .dropdown-content { left: auto !important; right: 0; width: 100% !important; max-width: 500px; border-radius: 0; padding: 10px 0; box-shadow: none; transform: none !important; top: 0 !important; position: relative; margin: auto; height: 100% !important; }
.to_hdr_noti_cont .dropdown-content .dt_notifis_prnt { max-height: 100%; overflow-y: auto; }
.to_hdr_noti_cont .dt_notifs a { min-height: 50px; padding: 10px; position: relative; font-family: var(--font-body); color: #5c5c5c; border-radius: var(--radius-md); margin: 8px 0; transition: all 0.15s; }
.to_hdr_noti_cont .dt_notifs a:hover { background-color: rgba(0,0,0,0.03); }
.to_hdr_noti_cont .dt_notifs.noti_not_seen a { background-color: #ffeef4; color: var(--rose); }
.to_hdr_noti_cont .dt_notifs .avatar { display: inline-flex; width: 75px; min-width: 75px; height: 75px; overflow: hidden; border-radius: 50%; margin: 0 15px 0 0; }
.to_hdr_noti_cont .dt_notifs .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.to_hdr_noti_cont .dt_notifs .n_detail p { line-height: normal; margin-top: 0; margin-bottom: 7px; font-size: 17px; }
.to_hdr_noti_cont .dt_notifs .n_detail p b { font-weight: 500; color: black; }
.to_hdr_noti_cont .dt_notifs.noti_not_seen .n_detail p b { color: var(--rose); }
.to_hdr_noti_cont .dt_notifs .time { font-size: 13px; color: #6f6f6f; }

.to_prem_btn, .to_hdr_finance_btn {
	margin: 11px 20px 13px 0; height: 30px; border-radius: var(--radius-full);
	padding: 0 16px; background: #fff; line-height: 30px;
	text-transform: capitalize; font-weight: 500; font-family: var(--font-body);
	transition: all 0.15s; letter-spacing: .5px; display: inline-block;
	vertical-align: middle; font-size: 12px;
}
.to_prem_btn { color: #e4982a; box-shadow: 0 0 0 1px #e4982a; }
.to_prem_btn:hover { background: #e4982a; color: #fff; }
nav .boost-me { color: #377eb0; box-shadow: 0 0 0 1px #377eb0; }
nav .boost-me:hover { background: #377eb0; color: #fff; }
nav .boost-me svg, .to_prem_btn svg, nav .header_credits > a svg { width: 16px; height: 16px; margin: -1px 7px 0 0; }
nav .boost-running { background: #fff; color: #377eb0; display: inline-flex; align-items: center; box-shadow: none; height: 30px; padding: 0; line-height: 30px; }
nav .boost-running:hover { box-shadow: none; background: #fff; }
nav .boost-running p { margin: 0 7px 0 0; height: 30px; width: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; position: relative; background: #fff; }
nav .boost-running p svg { width: 22px; height: 22px; }
nav .boosted_message_expire span { color: #377eb0; font-weight: 500; font-size: 12px; box-shadow: 0 0 0 1px #377eb0; height: 30px; line-height: 30px; display: inline-block; padding: 0 16px 0 25px; border-radius: 0 var(--radius-full) var(--radius-full) 0; margin-left: -25px; margin-right: 20px; }
nav .boost-running p:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; box-shadow: 0 2px 0 0 rgba(225,131,194,.25),0 -2px 0 0 rgba(165,181,222,.25),2px 0 0 0 rgba(225,131,194,.25),-2px 0 0 0 rgba(165,181,222,.25); animation: rotateThis 2s linear infinite; }
@keyframes rotateThis { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
nav .header_credits > a { color: #795548; box-shadow: 0 0 0 1px #795548; }
nav .header_credits > a:hover { background: #795548; color: #fff; }
nav .header_user > a { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; padding: 0; margin: 12px 15px 12px 0; }
nav .header_user > a img { width: 100%; height: 100%; object-fit: cover; }
nav .header_user { position: relative; }
nav .header_user .dropdown-content { left: auto !important; right: 0; min-width: 210px; border-radius: var(--radius-md); padding: 8px 0; box-shadow: 0 8px 32px rgba(0,0,0,0.15); transform: none !important; top: 72px !important; overflow: visible; height: auto !important; }
nav .header_user .dropdown-content:before { content: ""; position: absolute; right: 27px; top: -8px; height: 0; width: 0; border-bottom: 8px solid #fff; border-left: 8px solid transparent; border-right: 8px solid transparent; filter: drop-shadow(0 -1px 2px rgba(0,17,53,.08)); }
nav .header_user .dropdown-content li:not(.divider):hover { background: transparent; }
nav .header_user .dropdown-content li.divider { margin: 5px 0; }
nav .header_user .dropdown-content li a { color: #14171a; display: flex; align-items: center; line-height: 36px; padding: 0 16px; height: 36px; font-size: 14px; border-radius: var(--radius-sm); margin: 2px 8px; transition: none; }
nav .header_user .dropdown-content li a:hover { color: #fff; background: var(--rose); }
nav .header_user .dropdown-content li a svg { margin: -1px 12px 0 0; width: 17px; height: 17px; opacity: 0.6; }
nav .header_user .dropdown-content li a:hover svg { opacity: 1; }
nav .header_credits_mobi { display: none; }
nav .show_mobi_login { display: none; }
nav .header_msg span.badge, nav .header_notifications span.badge { min-width: 18px; height: 20px; border-radius: 4px; font-size: 14px; color: #fff; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; background-color: var(--rose); }

/* ============================================================
   SWITCH
   ============================================================ */
.switch label .lever { width: 44px; min-width: 44px; height: 24px; background-color: #bbb; }
.switch label input[type=checkbox]:checked+.lever { background: var(--grad-rose); }
.switch label .lever:before, .switch label .lever:after { top: 50%; transform: translateY(-50%); left: 2px; }
.switch label input[type=checkbox]:checked+.lever:before, .switch label input[type=checkbox]:checked+.lever:after { left: 21px; }
.switch label .lever:after, .switch label input[type=checkbox]:checked+.lever:after { background-color: #fff; box-shadow: none; }

/* ============================================================
   PAGE TITLE
   ============================================================ */
.to_page_title { justify-content: space-between; font-family: var(--font-body); margin-bottom: 15px; }
.to_page_title > h3 { margin: 0; font-weight: 600; color: #464646; font-size: 17px; line-height: normal; }
.to_page_title > h3 span { width: 29px; min-width: 29px; height: 29px; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.75rem; color: white; background: var(--grad-rose); margin-right: 8px; }
.to_page_title > h3 span svg { width: 17px; height: 17px; }
.to_page_title > .btn { box-shadow: none; font-weight: 500; font-size: 12px; height: 28px; line-height: 28px; padding: 0 12px; border-radius: 10px; }

/* ============================================================
   MAT INPUT
   ============================================================ */
.to_mat_input { position: relative; margin-bottom: 25px; font-family: var(--font-body); }
.to_mat_input > input, .to_mat_input > textarea {
	width: 100%; font-size: 16px; display: block;
	background: #f5f5f5; box-shadow: none; color: #333;
	border: 1.5px solid transparent; border-radius: var(--radius-md);
	padding: 20.3px 10px 8.3px; transition: all .15s ease-in-out;
	line-height: normal; min-height: 52.5px;
}
.to_mat_input > input:focus, .to_mat_input > textarea:focus { border-color: var(--rose); background: #fff; }
.to_mat_input label { position: absolute; cursor: text; opacity: 1; transition: all .15s ease-in-out; pointer-events: none; font-weight: 500; top: 6px; left: 10px; font-size: 12px; color: var(--rose); user-select: none; margin: 0; text-transform: capitalize; }
.to_mat_input > input::placeholder, .to_mat_input > textarea::placeholder { opacity: 0; }
.to_mat_input > input:placeholder-shown:not(:focus)+label, .to_mat_input > textarea:placeholder-shown:not(:focus)+label { top: 16px; font-size: 16px; color: rgba(0,0,0,0.38); left: 15px; }
.to_mat_input > textarea { resize: none; height: auto; }
.to_mat_input > select { width: 100%; font-size: 16px; display: block; background: #f5f5f5; box-shadow: none; color: #333; border: 1.5px solid transparent; border-radius: var(--radius-md); padding: 13.3px 10px; transition: all .15s ease-in-out; height: 52.5px; line-height: normal; }
.to_mat_input > select.pp_select_has_label { padding: 21.08px 5px 5.7px; }

/* ============================================================
   DATEPICKER
   ============================================================ */
.datepicker-date-display, .datepicker-table td.is-selected { background: var(--rose); }
.datepicker-table td.is-today, .datepicker-footer .confirmation-btns .btn-flat { color: var(--rose); }

/* ============================================================
   ALERTS
   ============================================================ */
.alert { background-color: #fff; margin: 10px auto; padding: 7px; text-align: center; border-radius: var(--radius-md); font-size: 14px; font-family: var(--font-body); font-weight: 500; }
.alert p { margin: 0; font-size: 14px; }
.alert-info    { background-color: rgba(37,99,235,0.08); color: var(--sapphire); }
.alert-success { background-color: rgba(74,222,128,0.1); color: #16a34a; }
.alert-warning { background-color: rgba(251,191,36,0.1); color: #d97706; }
.alert-danger  { background-color: rgba(244,67,54,0.08); color: #dc2626; }

/* ============================================================
   SETTINGS
   ============================================================ */
.to_sett_row { display: flex; margin-left: -.75rem; margin-right: -.75rem; }
.to_sett_row > .col.l4 { order: 2; float: none; width: 30%; }
.to_sett_row > .col.l8 { order: 1; float: none; width: 70%; }
.sett_navbar {
	margin-bottom: 25px; padding: 12px 0; list-style: none;
	background-color: #fff; box-shadow: var(--shadow-sm);
	border-radius: var(--radius-lg); font-family: var(--font-body);
}
.sett_navbar ul { padding: 0; margin: 0; }
.sett_navbar hr { margin-top: 12px; margin-bottom: 12px; }
.sett_navbar ul li { padding: 0; margin: 0; display: block; }
.sett_navbar ul li a { color: #666; display: flex; align-items: center; position: relative; line-height: 1; padding: 8px 20px; text-decoration: none; border-radius: var(--radius-md); margin: 2px 8px; transition: all 0.15s; }
.sett_navbar ul li.active a { background-color: rgba(244,63,116,0.06); color: black; box-shadow: inset 2.5px 0 var(--rose); font-weight: 600; }
.sett_navbar ul li a span { width: 28px; height: 28px; margin: 0 20px 0 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.sett_navbar ul li a svg { width: 17px; height: 17px; }
.sett_navbar ul li.general  a span { color: #5F98FD; background-color: rgba(95,152,253,0.12); }
.sett_navbar ul li.profile  a span { color: #FE7676; background-color: rgba(254,118,118,0.12); }
.sett_navbar ul li.social   a span { color: #4caf50; background-color: rgba(76,175,80,0.12); }
.sett_navbar ul li.privacy  a span { color: #9c27b0; background-color: rgba(156,39,176,0.12); }
.sett_navbar ul li.emails   a span { color: #23BB9B; background-color: rgba(35,187,155,0.12); }
.sett_navbar ul li.password a span { color: #FE6720; background-color: rgba(254,103,32,0.12); }
.sett_navbar ul li.block    a span { color: #FF9800; background-color: rgba(255,152,0,0.12); }
.sett_navbar ul li.delete   a span { color: #f44336; background-color: rgba(244,67,54,0.12); }
.dt_settings { background-color: #fff; padding: 30px 30px 5px; margin-bottom: 25px; box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); font-family: var(--font-body); }
.user_sttng_panel_hd { font-weight: 400; font-size: 28px; text-align: center; margin: 5px 0 40px; }
.dt_settings h5 { margin: 0 0 20px; font-size: 17px; font-weight: 600; display: flex; align-items: center; }
.dt_settings h5 svg { margin: -2px 7px 0 0; width: 19px; height: 19px; }
.dt_settings .dt_sett_footer { padding-top: 10px; padding-bottom: 30px; text-align: center; }
.dt_settings .chips { min-height: 52.5px; margin: 0; background: #f5f5f5; font-size: 16px; box-shadow: none; color: #333; border: 1.5px solid transparent; border-radius: var(--radius-md); padding: 10px 12px; transition: all .15s ease-in-out; }
.dt_settings .chips.focus { border-color: var(--rose); background: #fff; }
.dt_settings .chips .chip { color: #fff; height: 25px; line-height: 25px; background: var(--rose); margin: 2px; }
.dt_settings .chips .chip .close { font-size: 10px; line-height: 26px; }

/* ============================================================
   MODALS
   ============================================================ */
.modal { border-radius: var(--radius-lg); width: 100%; background-color: #fff; }
.modal .modal-content > h4 { margin: 0 0 23px; font-size: 20px; font-weight: 600; }
.modal .modal-content p { line-height: 1.6; }
.modal .modal-footer { padding: 0 24px 9px; height: 59px; background: #fff; }
.modal .modal-footer .btn, .modal .modal-footer .btn-large, .modal .modal-footer .btn-small, .modal .modal-footer .btn-flat { margin-bottom: 0; text-transform: none; border-radius: var(--radius-md); box-shadow: none; min-width: 70px; font-family: var(--font-body); font-weight: 500; }

/* ============================================================
   FOOTER (inner app, legacy)
   ============================================================ */
body > #container .page_footer { margin-left: 0; margin-right: 0; }
footer.page_footer:not(.to_index_foot) { margin-left: 280px; transition: all 0.25s ease-in-out; }
.page_footer > .container { padding: 30px 0; }
.page_footer .footer-copyright { padding: 10px; border-top: 1px solid #f0f0f0; font-size: 14px; color: #757575; background: #fff; }
.dt_fotr_spn { margin-left: auto; }
.dt_login_foot_innr .dt_foot_langs, .dt_footer_links { display: inline-block; }
.page_footer .footer-copyright .dt_foot_langs > a, .dt_login_foot_innr .dt_foot_langs > a { color: #757575; }
.dt_footer_links { margin-right: 6px; display: inline-flex; align-items: center; flex-wrap: wrap; }
.dt_footer_links li { display: inline-block; margin: 0 3px; }
.dt_footer_links li a { color: #757575; display: flex; align-items: center; transition: all 0.2s; }
.dt_footer_links li a:hover { color: #000; }

/* ============================================================
   LOADER
   ============================================================ */
.dt_ajax_progress { top: 0; left: 0; right: 0; height: 3px; width: 100%; display: none; position: fixed; z-index: 5000; overflow: hidden; }
.dt_ajax_progress:before { display: block; position: absolute; content: ""; left: -200px; width: 200px; height: 3px; animation: head_loading 1.5s linear infinite; background: var(--grad-vivid); }
@keyframes head_loading {
	from { left: -200px; width: 30%; }
	50%  { width: 30%; }
	70%  { width: 70%; }
	80%  { left: 50%; }
	95%  { left: 120%; }
	to   { left: 100%; }
}

/* ============================================================
   AUTH PAGE (login/register)
   ============================================================ */
.to_auth_page { display: flex; align-items: flex-start; margin-top: -64px; background: #fff; max-height: 100%; font-family: var(--font-body); }
.login_page { display: flex; flex-direction: column; min-height: 100vh; position: relative; width: 60%; overflow: hidden; }
.login_page.singl_auth_pg { width: 100%; }
.login_page:before, .login_page:after, .login_aside_innr:before, .login_aside_innr:after { box-flex: 1; flex-grow: 1; content: ''; display: block; height: 24px; }
.login_page .header_logo { max-width: 140px; top: 30px; left: 30px; position: absolute; }
.login_page .header_logo img { width: 100%; display: block; pointer-events: none; user-select: none; }
.login-pagez { flex-shrink: 0; margin: 0 auto; width: 100%; max-width: 480px; background: #fff; padding: 45px 0 0; }
.login-pagez h4 { color: #212529; font-size: 40px; margin: 0 0 10px; font-weight: 700; font-family: var(--font-display); }
.login-pagez p { font-size: 18px; margin-top: 0; margin-bottom: 50px; color: rgba(0,0,0,0.6); }
.login-pagez .btn.btn_primary { line-height: 56px; width: 100%; font-weight: 600; padding: 0 25px; height: 56px; display: block; font-size: 16px; position: relative; box-shadow: var(--shadow-rose); border-radius: var(--radius-md); }
.login_aside { background: linear-gradient(135deg, #ffeef4 0%, #f5efff 100%); width: 100%; min-width: 40%; max-width: 40%; height: 100%; position: fixed; top: 0; bottom: 0; right: 0; overflow: hidden; }
.login_aside_innr { display: flex; flex-direction: column; min-height: 100%; position: relative; text-align: center; color: #222; width: 100%; max-width: 420px; margin: 0 auto; }
.login_aside_innr h2 { font-size: 35px; text-align: center; margin: 0; line-height: 1.2; font-family: var(--font-display); }
.login_aside_innr p { font-size: 16px; margin-bottom: 50px; }

/* ============================================================
   SMALL USER CARDS
   ============================================================ */
.to_small_usr { background-color: #dedede; box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); overflow: hidden; font-family: var(--font-body); margin-bottom: 20px; }
.to_small_usr .card-image { position: relative; padding-bottom: 130%; height: 0; }
.to_small_usr .card-image img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.to_small_usr .card-content { position: absolute; right: 0; left: 0; bottom: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%); display: flex; z-index: 5; padding: 30px 10px 10px; }
.to_small_usr .card-content-info h3 { margin: 0 0 3px; line-height: normal; font-size: 21px; color: white; font-family: var(--font-display); }
.to_small_usr .card-content-info h3 a { color: white; }
.to_small_usr .to_small_yes { color: var(--rose); display: inline-flex; padding: 0; box-shadow: none; align-items: center; justify-content: center; width: 38px; min-width: 38px; height: 38px; border-radius: 50%; background-color: rgba(255,255,255,0.85); backdrop-filter: blur(10px); margin: auto 0 0 auto; }
.to_small_usr .to_small_yes:hover { background-color: white; }

/* ============================================================
   USER PROFILE
   ============================================================ */
.dt_user_profile_parent { margin: 20px auto 0; }
.dt_user_profile_parent .row > .col.l5 { width: 39%; position: sticky; top: 80px; }
.dt_user_profile_parent .row > .col.l7 { width: 61%; }
.to_user_media .avatar { width: 100%; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); border-radius: var(--radius-lg); }
.to_user_media .avatar > a { position: relative; display: block; padding-top: 150%; background-color: #e3e9ea; border-radius: var(--radius-lg); overflow: hidden; }
.to_user_media .avatar img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; right: 0; left: 0; bottom: 0; }
.dt_user_profile { background: #fff; margin: 0 0 20px; padding: 20px; box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); overflow: hidden; font-family: var(--font-body); }
.dt_user_info .info h2 { font-size: 30px; margin: 0; font-weight: 700; font-family: var(--font-display); }

/* ============================================================
   LOAD MORE
   ============================================================ */
.load_more { margin: 30px auto 10px; width: 200px; min-width: 100px; height: 34px; text-transform: capitalize; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: #1e1e1e; font-weight: 500; font-family: var(--font-body); }
.load_more > span { background-color: #fff; color: var(--rose); border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin-right: 7px; transition: all 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }

/* ============================================================
   EMPTY STATE
   ============================================================ */
body .empty_state { padding: 60px 10px; text-align: center; font-family: var(--font-body); font-size: 16px; }
body .empty_state > svg:not(.to_spin) { background-color: #e2e2e2; color: #737373; display: block; width: 65px; height: 65px; padding: 17px; border-radius: 50%; margin: 0 auto 13px; }
body .empty_state .btn_primary { margin-top: 40px; box-shadow: var(--shadow-rose); border-radius: var(--radius-full); display: inline-flex; align-items: center; height: 36px; line-height: 36px; }

/* ============================================================
   CHECKMARK
   ============================================================ */
.checkmark__circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke-miterlimit: 10; stroke: #7ac142; fill: none; animation: stroke 0.6s cubic-bezier(0.65,0,0.45,1) forwards; }
.checkmark { width: 80px; height: 80px; border-radius: 50%; display: block; stroke-width: 3; stroke: #fff; stroke-miterlimit: 10; margin: 30px auto 50px; box-shadow: inset 0 0 0 #7ac142; animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; }
.checkmark__check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65,0,0.45,1) 0.8s forwards; }
@keyframes stroke { 100% { stroke-dashoffset: 0; } }
@keyframes scale { 0%,100% { transform: none; } 50% { transform: scale3d(1.1,1.1,1); } }
@keyframes fill { 100% { box-shadow: inset 0 0 0 54px #7ac142; } }

/* ============================================================
   LATEST USERS (homepage showcase)
   ============================================================ */
.to_latest_users { background: linear-gradient(135deg, var(--rose-pale) 0%, #f5efff 100%); border-radius: var(--radius-xl); width: 100%; max-width: 820px; margin: 10px auto 50px; padding: 36px; }
.to_latest_users > h4 { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0 0 20px; }
.xuser { margin: 15px -2px; display: inline-block; width: 60px; height: 60px; box-shadow: 0 0 0 4px white; border-radius: 50%; overflow: hidden; }
.xuser img { width: 60px; height: 60px; object-fit: cover; }
.xuser-premium { border-radius: 50%; overflow: hidden; }

/* ============================================================
   COOKIE
   ============================================================ */
.cc-window { position: fixed; overflow: hidden; font-family: var(--font-body); font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; z-index: 9999; box-shadow: var(--shadow-lg); border-radius: var(--radius-lg); padding: 16px; left: 50%; transform: translateX(-50%); bottom: 30px; width: 100%; max-width: 800px; justify-content: space-between; background: #fff; }
.cc-btn.cc-dismiss { cursor: pointer; transition: all 0.15s; padding: 0 15px; line-height: 34px; display: block; border-radius: var(--radius-md); }

/* ============================================================
   MISC ORIGINAL CLASSES (all preserved)
   ============================================================ */
.ajax-progress { height: 1px; background-color: rgba(244,63,116,0.2) !important; margin: 0 !important; }
.ajax-progress .indeterminate { background-color: var(--rose) !important; }
div#onesignal-bell-container { visibility: hidden; display: none; }
#toast-container { z-index: 999999999999; }
.chips .input { width: 200px !important; }
.toast { background: #fff; box-shadow: var(--shadow-md); color: #707070; margin: 30px auto 10px; display: block; width: auto; min-width: 100px; height: 34px; line-height: 25px; font-size: 12px; text-transform: capitalize; border-radius: var(--radius-full); font-weight: bold; }
.useronline { width: 14px; height: 14px; background-color: #4CAF50; border-radius: 50%; position: absolute; top: 10px; left: 21px; border: 2.5px solid #fff; }
.sidenav_overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; visibility: hidden; opacity: 0; height: 100%; background-color: rgba(0,0,0,0.4); z-index: 9990; transition: all 0.2s ease; }
a.disabled { pointer-events: none; }
article img { width: 100% !important; height: auto !important; }
#logo-container img { content: url("../img/logo.png"); }
.only-mobile { display: none; }
.story2 { margin-left: -33px; }
.hidden-mobile-image { width: 100%; }
.btn_wo { background-color: #f4eeee; }
.btn-white { color: #fff; line-height: 1px; }
.sidebar-page-data { position: relative; }
input#_located:disabled { opacity: 0.2; }
.powrd_stripe { margin: 17px 0; line-height: normal; float: left; font-size: 12px; opacity: 0.8; }
.powrd_stripe svg { transform: scale(0.7); margin: -2px -8px 0; }
.carousel .carousel-item { visibility: visible !important; }

/* PRO users badge */
.to_pro_users { margin-bottom: 40px; }
.to_pro_users .pro_usrs_container { padding: 12px 0; display: block; white-space: nowrap; overflow-x: auto; margin: 0 -4px; }
.to_pro_users .pro_usrs_container .pro_usr { padding: 0 4px; display: inline-block; position: relative; width: 100px; text-align: center; }
.to_pro_users .pro_usrs_container .pro_usr > a { display: block; position: relative; }
.to_pro_users .pro_usrs_container .pro_usr p { width: 100%; font-weight: 500; margin: 7px 0 0; line-height: normal; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; }

/* Premium Page */
.dt_premium { margin: -70px auto 20px; position: relative; font-family: var(--font-body); }
.dt_pro_plans { flex-wrap: wrap; margin: 0 -15px; }
.dt_pro_plans > div { width: 25%; padding: 0 15px; }
.dt_pro_plans label .pln_name { display: flex; flex-direction: column; color: #393939; padding: 20px; background-color: #fdfdfd; border-radius: var(--radius-md); line-height: 1; transition: all 0.1s; box-shadow: inset 0 0 0 1px #dedede; }
.dt_pro_plans label [type="radio"]:checked+span { background-color: rgba(228,152,42,0.1); color: #e4982a; box-shadow: inset 0 0 0 2px #e4982a, var(--shadow-md); }

/* Credits */
.dt_credits { margin: -70px auto 20px; position: relative; font-family: var(--font-body); }
.credit_bln { width: 320px; height: 170px; margin: 30px auto 60px; background-color: #607D8B; box-shadow: var(--shadow-md); border-radius: var(--radius-md); position: relative; color: #fff; }

/* ============================================================
   FLICKITY SLIDER (original preserved)
   ============================================================ */
.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0}.flickity-viewport{overflow:hidden;position:relative;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-user-select:none;-moz-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:grabbing}.flickity-button{position:absolute;background:hsla(0,0%,100%,.75);border:none;color:#333}.flickity-button:hover{background:#fff;cursor:pointer}.flickity-button:disabled{opacity:.3;cursor:auto;pointer-events:none}.flickity-button-icon{fill:currentColor}.flickity-prev-next-button{top:50%;width:44px;height:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-page-dots{position:absolute;width:100%;bottom:-25px;padding:0;margin:0;list-style:none;text-align:center;line-height:1}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;background:#333;border-radius:50%;opacity:.25;cursor:pointer}.flickity-page-dots .dot.is-selected{opacity:1}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 1500px) {
	.container { width: 1000px; }
	.to_index_cont { width: 1300px; max-width: 1300px; }
}
@media (min-width: 1300px) {
	.hero-float-cards { display: block; }
}
@media (max-width: 1299px) {
	.hero-float-cards { display: none; }
}
@media (max-width: 1300px) {
	.to_sidebar { width: 230px; }
	.to_sidebar .home_usr_link li { padding: 6px 15px; }
	.to_main_cont.to_side_present, footer.page_footer:not(.to_index_foot) { margin-left: 230px; }
	.to_hdr_noti_cont { left: 231px; }
}
@media (max-width: 1215px) {
	.to_sidebar { width: 280px; transform: translateX(-290px); z-index: 9999; padding: 10px 0; }
	.to_main_cont.to_side_present, footer.page_footer:not(.to_index_foot) { margin: 0; }
	.to_hdr_noti_cont { left: 0; }
	body.side_open { overflow: hidden; }
	.side_open .to_sidebar { transform: translateX(0); }
	body.side_open .sidenav_overlay { opacity: 1; visibility: visible; }
}
@media (max-width: 1024px) {
	.features-grid { grid-template-columns: 1fr; gap: 20px; }
	.how-steps { grid-template-columns: 1fr; gap: 48px; }
	.how-steps::before { display: none; }
	.footer-top { grid-template-columns: 1fr 1fr; }
	.footer-brand { grid-column: 1/-1; }
	nav .nav-wrapper.container, .page_footer .footer-copyright .container { width: 100%; padding: 0 16px; }
}
@media (min-width: 769px) {
	.features-grid { grid-template-columns: repeat(3, 1fr); }
	.how-steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px) {
	.dt_user_profile_parent.container > .row > .col { width: 100%; position: inherit; }
	.to_user_media { margin-bottom: 35px; }
}
@media (max-width: 890px) {
	.to_sett_row { flex-wrap: wrap; }
	.to_sett_row > .col.l4, .to_sett_row > .col.l8 { width: 100%; }
	.to_sett_row > .col.l4 { order: 1; }
	.to_sett_row > .col.l8 { order: 2; }
	.login_page { width: 100%; }
	.login_aside { display: none; }
	body > #container { min-height: calc(100vh - 166px); }
}
@media (max-width: 860px) {
	.dt_pro_plans > div { width: 50%; margin-bottom: 30px; }
	nav .header_home_link li a { font-size: 0; position: relative; }
}
@media (max-width: 768px) {
	.hero-title { font-size: clamp(36px, 8vw, 52px); }
	.hero-stats { flex-direction: column; gap: 0; padding: 16px 24px; }
	.stat-divider { width: 60%; height: 1px; }
	.stat-item { padding: 12px 0; }
	.filter-card-body { flex-direction: column; align-items: stretch; }
	.filter-btn { width: 100%; justify-content: center; }
	.filter-divider { display: none; }
	.members-preview { padding: 24px 20px; }
	.members-preview-header { flex-direction: column; align-items: flex-start; gap: 8px; }
	.story-slide { flex-direction: column; gap: 20px; padding: 28px 24px; }
	.glass-card { padding: 28px 24px; margin-top: -40px; }
}
@media (max-width: 675px) {
	.dt_slide_menu { display: none; }
	body.side_open .sidenav_overlay { display: none; }
	.to_sidebar_mini { display: block; }
	.to_sidebar { width: 100%; bottom: 56px; height: auto; transform: translateY(calc(100% + 60px)); left: 0; right: 0; transition: all 0.15s; z-index: 998; }
	.side_open .to_sidebar { transform: translate(0); }
	.to_mhide_side_links, nav .header_user { display: none; }
	.to_mshow_side_links { display: block; }
	body { padding: 0; }
	nav { position: relative; }
	footer.page_footer:not(.to_index_foot) { padding-bottom: 56px; }
	body > #container { min-height: calc(100vh - 246px); }
	.footer-top { grid-template-columns: 1fr; gap: 32px; }
	.footer-brand { grid-column: 1; }
	.hero-badge { font-size: 12px; }
}
@media (max-width: 525px) {
	.cta-section { padding: 80px 0; }
	.how-step-icon-wrap { width: 96px; height: 96px; }
	.features-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	nav .header_user > a, nav .header_user > a img { width: 35px; height: 35px; }
	.hide_mobi_login { display: none; }
	nav .show_mobi_login { display: block; }
	.dt_pro_plans > div { width: 100%; }
	.modal { width: calc(100% - 10px); top: auto !important; bottom: 5px; }
	.only-mobile { display: block; }
}
@media (max-width: 390px) {
	.row .col.xs12 { width: 100%; margin-left: auto; left: auto; right: auto; }
}

/* ============================================================
   NIGHT MODE COMPATIBILITY
   ============================================================ */
@media (min-width: 675px) {
	.to_sidebar .home_usr_link li.fnd.active a   { color: var(--rose); }
	.to_sidebar .home_usr_link li.mch.active a   { color: #2196f3; }
	.to_sidebar .home_usr_link li.vis.active a   { color: #42a446; }
	.to_sidebar .home_usr_link li.lik.active a   { color: #ff5722; }
	.to_sidebar .home_usr_link li.pli.active a   { color: #9c27b0; }
	.to_sidebar .home_usr_link li.dis.active a   { color: #607d8b; }
	.to_sidebar .home_usr_link li.hot.active a   { color: #ff2515; }
	.to_sidebar .home_usr_link li.blg.active a   { color: #ff9800; }
	.to_sidebar .home_usr_link li.set.active a   { color: #795548; }
	.to_sidebar .home_usr_link li.fnd a svg { color: var(--rose); background-color: rgba(244,63,116,0.08); }
	.to_sidebar .home_usr_link li.mch a svg { color: #2196f3; background-color: rgba(33,150,243,0.08); }
	.to_sidebar .home_usr_link li.vis a svg { color: #42a446; background-color: rgba(66,164,70,0.08); }
	.to_sidebar .home_usr_link li.lik a svg { color: #ff5722; background-color: rgba(255,87,34,0.08); }
	.to_sidebar .home_usr_link li.pli a svg { color: #9c27b0; background-color: rgba(156,39,176,0.08); }
	.to_sidebar .home_usr_link li.dis a svg { color: #607d8b; background-color: rgba(96,125,139,0.08); }
	.to_sidebar .home_usr_link li.hot a svg { color: #ff2515; background-color: rgba(255,37,21,0.08); }
	.to_sidebar .home_usr_link li.blg a svg { color: #ff9800; background-color: rgba(255,152,0,0.08); }
	.to_sidebar .home_usr_link li.set a svg { color: #795548; background-color: rgba(121,85,72,0.08); }
	.to_sidebar .home_usr_link li.fnd.active a svg { background-color: var(--rose); }
	.to_sidebar .home_usr_link li.mch.active a svg { background-color: #2196f3; }
	.to_sidebar .home_usr_link li.vis.active a svg { background-color: #42a446; }
	.to_sidebar .home_usr_link li.lik.active a svg { background-color: #ff5722; }
	.to_sidebar .home_usr_link li.pli.active a svg { background-color: #9c27b0; }
	.to_sidebar .home_usr_link li.dis.active a svg { background-color: #607d8b; }
	.to_sidebar .home_usr_link li.hot.active a svg { background-color: #ff2515; }
	.to_sidebar .home_usr_link li.blg.active a svg { background-color: #ff9800; }
	.to_sidebar .home_usr_link li.set.active a svg { background-color: #795548; }
	.to_sidebar .home_usr_link li.active a svg { color: #fff; }
}