/* ============================================
   10MinuteMail Main Stylesheet
   Uses CSS variables from design-system.css
   ============================================ */

/* ============================================
   PHASE 2: TYPOGRAPHY OVERHAUL
   Apply new font families site-wide
   ============================================ */

/* layout styles */
html {
	margin: 0;
	padding: 0;
	font-size: 16px; /* Base for rem calculations */
}

body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	background-color: var(--color-bg-base, #fff);
	color: var(--color-text-primary, #2c3e50);
	font-size: var(--text-base, 1rem);
	line-height: var(--leading-normal, 1.5);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.content {
	margin: 0 auto;
	max-width: 1000px;
	width: 100%;
}


header {
	background: url('/img/top_bar-f1d8ea10f1717d012835e08b1bb16c0a.png') repeat-x;
	padding-top: 3px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 100%;
}

header h1 {
	background: url('/img/10minutemail_logo-515f60eeeda967c3f81b3e3005cefd17.png') no-repeat center;
	background-size: contain;
	width: 184px;
	height: 104px;
	display: inline-block;
	margin: 10px;
}

header h1 span,
header h2 span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

header h2 {
	background: url('/img/tagline-5250ee47173429e1d837609fccb5a873.png') no-repeat center;
	background-size: contain;
	width: 528px;
	height: 36px;
	display: inline-block;
	margin-top: 64px;
	margin-left: 10px;
}

@media (max-width: 500px) {

	header h1,
	header h2 {
		width: 30%;

		margin: 10px 0;
	}

	header h2 {
		margin-top: 10px;
		margin-left: 0;
	}
}



header .language {
	display: inline-block;
	vertical-align: top;
	height: 42px;
	margin-top: 60px;
	margin-left: 50px;
	position: relative;
}

header .language #language_btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	/* Glassmorphism container */
	background: rgba(30, 41, 59, 0.75);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(71, 85, 105, 0.4);
	border-radius: var(--radius-md, 8px);
	padding: 0;
	overflow: hidden;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow:
		0 4px 16px rgba(0, 0, 0, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

header .language #language_btn:hover {
	background: rgba(30, 41, 59, 0.9);
	border-color: rgba(34, 211, 238, 0.4);
	box-shadow:
		0 6px 24px rgba(0, 0, 0, 0.2),
		0 0 20px rgba(34, 211, 238, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
	transform: translateY(-1px);
}

header .language #language_btn:focus-within {
	border-color: rgba(34, 211, 238, 0.6);
	box-shadow:
		0 6px 24px rgba(0, 0, 0, 0.2),
		0 0 0 3px rgba(34, 211, 238, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Globe icon before the select */
header .language #language_btn::before {
	content: '';
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(148, 163, 184)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	pointer-events: none;
	opacity: 0.85;
	transition: opacity 0.2s ease;
	z-index: 2;
}

header .language #language_btn:hover::before {
	opacity: 1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(34, 211, 238)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E");
}

/* Custom dropdown arrow */
header .language #language_btn::after {
	content: '';
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(148, 163, 184)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	pointer-events: none;
	transition: transform 0.2s ease, opacity 0.2s ease;
	z-index: 2;
}

header .language #language_btn:hover::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(34, 211, 238)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* The actual select element styling */
header .language #language_btn #localeSelector {
	display: flex;
	align-items: center;
}

header .language #language_btn #locales {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: transparent;
	border: none;
	outline: none;
	cursor: pointer;
	font-family: var(--font-body, 'Space Grotesk', sans-serif);
	font-size: var(--text-sm, 14px);
	font-weight: var(--font-medium, 500);
	color: rgb(226, 232, 240);
	padding: 10px 36px 10px 36px;
	min-width: 140px;
	line-height: 1.4;
	letter-spacing: 0.01em;
	transition: color 0.2s ease;
}

header .language #language_btn #locales:hover {
	color: rgb(248, 250, 252);
}

header .language #language_btn #locales:focus {
	outline: none;
}

/* Style the dropdown options (limited browser support but enhances where available) */
header .language #language_btn #locales option {
	background: rgb(30, 41, 59);
	color: rgb(226, 232, 240);
	padding: 12px 16px;
	font-size: 14px;
	font-family: var(--font-body, 'Space Grotesk', sans-serif);
}

header .language #language_btn #locales option:hover,
header .language #language_btn #locales option:focus,
header .language #language_btn #locales option:checked {
	background: rgb(51, 65, 85);
	color: rgb(34, 211, 238);
}

/* Light mode adjustments for language dropdown */
@media (prefers-color-scheme: light) {
	header .language #language_btn {
		background: rgba(255, 255, 255, 0.85);
		border-color: rgba(203, 213, 225, 0.6);
		box-shadow:
			0 4px 16px rgba(0, 0, 0, 0.08),
			inset 0 1px 0 rgba(255, 255, 255, 0.9);
	}

	header .language #language_btn:hover {
		background: rgba(255, 255, 255, 0.95);
		border-color: rgba(14, 165, 233, 0.5);
		box-shadow:
			0 6px 24px rgba(0, 0, 0, 0.1),
			0 0 20px rgba(14, 165, 233, 0.1),
			inset 0 1px 0 rgba(255, 255, 255, 1);
	}

	header .language #language_btn:focus-within {
		border-color: rgba(14, 165, 233, 0.6);
		box-shadow:
			0 6px 24px rgba(0, 0, 0, 0.1),
			0 0 0 3px rgba(14, 165, 233, 0.15),
			inset 0 1px 0 rgba(255, 255, 255, 1);
	}

	header .language #language_btn::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(100, 116, 139)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E");
	}

	header .language #language_btn:hover::before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(14, 165, 233)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E");
	}

	header .language #language_btn::after {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(100, 116, 139)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	}

	header .language #language_btn:hover::after {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(14, 165, 233)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	}

	header .language #language_btn #locales {
		color: rgb(51, 65, 85);
	}

	header .language #language_btn #locales:hover {
		color: rgb(30, 41, 59);
	}

	header .language #language_btn #locales option {
		background: rgb(248, 250, 252);
		color: rgb(51, 65, 85);
	}

	header .language #language_btn #locales option:hover,
	header .language #language_btn #locales option:focus,
	header .language #language_btn #locales option:checked {
		background: rgb(241, 245, 249);
		color: rgb(14, 165, 233);
	}
}

/* Manual theme toggle support */

/* end header styles */

/* ============================================
   COMPACT FOOTER CLASS STYLES
   ============================================ */
/* Note: Base footer styles are in PHASE 8 FOOTER ENHANCEMENTS section */

.footer-announcement {
	text-align: center;
	font-size: 13px;
	margin: 0 0 var(--space-5, 20px) 0;
	padding-bottom: var(--space-5, 20px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-grid-compact {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-6, 24px);
	text-align: left;
	max-width: 1000px;
	margin: 0 auto;
	padding-bottom: var(--space-5, 20px);
}

.footer-column {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.footer-column h4 {
	color: var(--color-accent, #3498db);
	font-size: 12px;
	font-weight: 700;
	margin: 0 0 var(--space-2, 8px) 0;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.footer-column a {
	color: var(--color-link, #3498db);
	text-decoration: none;
	font-size: 13px;
	line-height: 1.6;
	transition: color 0.2s ease;
}

.footer-column a:hover {
	color: var(--color-link-hover, #5dade2);
}

.footer-column span {
	font-size: 13px;
	line-height: 1.6;
	color: #bdc3c7;
}

.footer-column .paypal_form {
	margin: 4px 0 8px;
}

.footer-column .paypal_form input[type="image"] {
	height: 24px;
	width: auto;
	transition: opacity 0.2s ease;
	opacity: 0.85;
}

.footer-column .paypal_form input[type="image"]:hover {
	opacity: 1;
}

.footer-column .btc-label {
	font-size: 12px;
	color: #95a5a6;
	margin-top: 4px;
}

.footer-column .btc_wallet_address {
	font-family: var(--font-mono, 'Courier New', monospace);
	font-size: 10px;
	background: rgba(255, 255, 255, 0.08);
	padding: 4px 6px;
	border-radius: 4px;
	word-break: break-all;
	margin-top: 2px;
	display: block;
}

.footer-column.footer-about span {
	display: block;
}

.footer-column .copyright {
	margin-top: 4px;
	font-size: 12px;
	color: #7f8c8d;
}

/* Trust bar - single line */
.footer-trust-bar {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: var(--space-4, 16px);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
}

.footer-trust-bar .trust-badge {
	color: #22d3ee;
	font-weight: 600;
}

.footer-trust-bar .trust-divider {
	color: rgba(255, 255, 255, 0.2);
}

/* Mobile responsive - compact footer */
@media (max-width: 900px) {
	.footer-grid-compact {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-5, 20px);
	}
}

@media (max-width: 600px) {
	footer {
		padding: var(--space-6, 24px) var(--space-4, 16px);
	}

	.footer-grid-compact {
		grid-template-columns: 1fr;
		gap: var(--space-4, 16px);
		text-align: center;
	}

	.footer-column {
		align-items: center;
	}

	.footer-column .btc_wallet_address {
		max-width: 280px;
	}

	.footer-trust-bar {
		flex-direction: column;
		gap: 4px;
	}

	.footer-trust-bar .trust-divider {
		display: none;
	}
}

/* main content styles */
#main_content {
	/* Dynamic gradient mesh background - replaces static image */
	background:
		/* Radial gradient accents for depth */
		radial-gradient(ellipse 80% 50% at 20% 40%, rgba(34, 211, 238, 0.15) 0%, transparent 50%),
		radial-gradient(ellipse 60% 40% at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 45%),
		radial-gradient(ellipse 70% 50% at 60% 80%, rgba(52, 211, 153, 0.08) 0%, transparent 50%),
		radial-gradient(ellipse 50% 30% at 10% 90%, rgba(251, 191, 36, 0.06) 0%, transparent 40%),
		/* Base gradient */
		linear-gradient(135deg,
			rgb(15, 23, 42) 0%,
			rgb(30, 41, 59) 25%,
			rgb(51, 65, 85) 50%,
			rgb(30, 41, 59) 75%,
			rgb(15, 23, 42) 100%
		);
	background-attachment: fixed;
	color: #fff;
	position: relative;
	/* Removed min-height: 100vh - let content flow naturally to footer */
}

/* Noise texture overlay for depth */
#main_content::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--noise-texture, url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"));
	opacity: var(--noise-opacity, 0.03);
	pointer-events: none;
	z-index: 0;
}

/* Ensure content appears above noise overlay */
#main_content > * {
	position: relative;
	z-index: 1;
}

.mail_section {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.mail_top_row,
.mail_bottom_row {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.mail_bottom_row {
	margin-top: 24px;
}

.mail_top_row>div,
.mail_bottom_row>div {
	margin: 5px 0;
}

@media (min-width: 865px) {
	.mail_top_row {
		flex-direction: row;
		justify-content: center;
	}

	.mail_bottom_row {
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.mail_bottom_row>#countdown {
		display: flex;
		align-items: center;
	}

	.mail_bottom_row>#get_more_time {
		margin-left: 20px;
	}

	.mail_top_row>div,
	.mail_bottom_row>div {
		margin: 5px;
	}
}

#countdown .counter_number,
#countdown .counter_colon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#countdown {
	display: flex;
	align-items: center;
}

.counter_colon span {
	display: block;
}

#mail_address input {
	width: 200px;
}

/* Copy button - overridden by Phase 5 styles but keeping base positioning */
#main_content #copy_address {
	position: relative;
	width: 52px;
	height: 52px;
	cursor: pointer;
	background: linear-gradient(135deg, rgb(34, 211, 238) 0%, rgb(22, 178, 202) 100%);
	border-radius: var(--radius-lg, 12px);
	border: 1px solid rgba(34, 211, 238, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(34, 211, 238, 0.25);
	transition: var(--transition-all, all 0.2s ease);
}

#main_content #copy_address:hover {
	transform: scale(1.08);
	box-shadow: 0 4px 15px rgba(34, 211, 238, 0.4);
}

#main_content #copy_address .copy_icon {
	/* Inline SVG copy icon - two overlapping rectangles */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
	display: block;
	width: 24px;
	height: 24px;
}

/* "Copied!" tooltip */
#main_content #copy_address::after {
	content: 'Copied!';
	position: absolute;
	top: -40px;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	background: rgb(52, 211, 153);
	color: white;
	font-family: var(--font-body, sans-serif);
	font-size: var(--text-sm, 14px);
	font-weight: var(--font-semibold, 600);
	padding: var(--space-2, 8px) var(--space-3, 12px);
	border-radius: var(--radius-md, 8px);
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s ease;
	pointer-events: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#main_content #copy_address.copy-success::after {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* Mail address container - overridden by Phase 5 glassmorphism styles below */

/* Email input field - dark theme styling */
#main_content .mail_section #mail_address {
	display: block;
	width: 100%;
	background: rgba(15, 23, 42, 0.6);
	color: var(--color-text-primary, #f1f5f9);
	border: 1px solid var(--color-border-subtle, rgba(71, 85, 105, 0.5));
	font-family: var(--font-display, 'JetBrains Mono', monospace);
	font-size: var(--text-lg, 18px);
	font-weight: var(--font-medium, 500);
	letter-spacing: var(--tracking-mono, 0.02em);
	padding: var(--space-4, 16px) var(--space-5, 20px);
	text-align: center;
	text-align-last: center;
	border-radius: var(--radius-md, 8px);
	transition: var(--transition-all, all 0.3s ease);
}

#main_content .mail_section #mail_address:focus {
	outline: none;
	border-color: var(--color-accent, rgb(34, 211, 238));
	box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
}

#main_content .mail_section .counter_number {
	width: clamp(60px, 15vw, 100px);
	height: clamp(100px, 25vw, 166px);
	background: var(--color-bg-surface, #fff);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--timer-color, rgb(var(--raw-brand-blue, 97 144 211)));
	margin-right: var(--space-3, 12px);
	margin-top: 0;
	border-radius: var(--radius-lg, 12px);
	text-align: center;
	box-shadow: var(--shadow-timer, 0 8px 24px rgba(0, 0, 0, 0.1));
	transition: color var(--duration-slow, 0.3s) var(--ease-out, ease),
	            box-shadow var(--duration-slow, 0.3s) var(--ease-out, ease);
}

.counter_colon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: clamp(100px, 25vw, 166px);
	margin-top: 0;
}

.counter_colon span {
	line-height: 1;
	font-size: clamp(40px, 12vw, 80px);
	font-weight: bold;
	display: block;
}

#countdown {
	display: inline-flex;
	align-items: center;
}


#main_content .mail_section #counter_sec_one {
	margin-right: 8px;
}

#main_content .mail_section .counter_number span {
	line-height: clamp(100px, 25vw, 166px);
	font-size: clamp(40px, 12vw, 80px);
	font-weight: bold;
}

/* Inbox count - overridden by Phase 5 styles below */
.inbox_count {
	display: flex;
	align-items: center;
	gap: var(--space-3, 12px);
	padding: var(--space-3, 12px) var(--space-5, 20px);
	background: rgba(15, 23, 42, 0.6);
	border: 1px solid var(--color-border-subtle, rgba(71, 85, 105, 0.5));
	border-radius: var(--radius-lg, 12px);
	margin-left: 0;
	height: auto;
	width: auto;
	float: none;
}

#inbox_count {
	font-size: var(--text-lg, 18px);
	color: var(--color-text-secondary, #94a3b8);
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--space-2, 8px);
	position: relative;
}

.inbox_count .mail_icon {
	width: 36px;
	height: 28px;
	display: inline-block;
	/* Inline SVG mail envelope icon */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='28' viewBox='0 0 36 28'%3E%3Cpath fill='%23ffffff' d='M32 2H4c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h28c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 6l-14 8L4 8V6l14 8 14-8v2z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	margin-right: 10px;
	vertical-align: top;
}

.inbox_count #inbox_count_number {
	font-size: 36px;
	vertical-align: top;
	margin-top: -8px;
	margin-left: 10px;
	position: absolute;
}

/* "10 More Minutes" CTA Button - Hero treatment */
#get_more_time {
	margin-top: var(--space-4, 16px);
	/* Accent gradient background */
	background: linear-gradient(135deg,
		rgba(34, 211, 238, 0.9) 0%,
		rgba(22, 178, 202, 1) 50%,
		rgba(14, 165, 233, 1) 100%
	);
	border-radius: var(--radius-lg, 12px);
	border: 1px solid rgba(34, 211, 238, 0.4);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 200px;
	padding: var(--space-4, 16px) var(--space-8, 32px);
	font-family: var(--font-body, 'Space Grotesk', sans-serif);
	font-size: var(--text-lg, 18px);
	font-weight: var(--font-bold, 700);
	letter-spacing: var(--tracking-wide, 0.015em);
	color: white;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	/* Glow effect */
	box-shadow:
		0 4px 15px rgba(34, 211, 238, 0.35),
		0 2px 4px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
	transition:
		transform var(--duration-fast, 100ms) var(--ease-out),
		box-shadow var(--duration-normal, 200ms) var(--ease-out),
		background var(--duration-normal, 200ms) var(--ease-out);
}

#get_more_time:hover {
	transform: translateY(-3px);
	background: linear-gradient(135deg,
		rgba(103, 232, 249, 1) 0%,
		rgba(34, 211, 238, 1) 50%,
		rgba(22, 178, 202, 1) 100%
	);
	box-shadow:
		0 8px 25px rgba(34, 211, 238, 0.5),
		0 4px 8px rgba(0, 0, 0, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

#get_more_time:active {
	transform: translateY(-1px);
	box-shadow:
		0 2px 10px rgba(34, 211, 238, 0.4),
		0 2px 4px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
}


/* Explanation/Content Card - Dark glassmorphism styling */
#main_content .explanation {
	max-width: 800px;
	width: 90%;
	margin: var(--space-8, 32px) auto var(--space-10, 40px);
	padding: var(--space-8, 32px) var(--space-10, 40px);
	box-sizing: border-box;
	/* Dark glassmorphism */
	background: rgba(30, 41, 59, 0.7);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(71, 85, 105, 0.3);
	border-radius: var(--radius-xl, 16px);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#main_content .explanation h2 {
	margin: 0 0 var(--space-2, 8px) 0;
	font-family: var(--font-body, 'Space Grotesk', sans-serif);
	font-size: var(--text-4xl, 32px);
	font-weight: var(--font-bold, 700);
	color: var(--color-text-primary, #f1f5f9);
	letter-spacing: var(--tracking-tight, -0.015em);
	line-height: var(--leading-tight, 1.2);
}

#main_content .explanation h3 {
	margin: 0 0 var(--space-8, 32px) 0;
	font-family: var(--font-body, 'Space Grotesk', sans-serif);
	font-size: var(--text-xl, 20px);
	font-weight: var(--font-normal, 400);
	color: var(--color-text-secondary, #94a3b8);
	line-height: var(--leading-snug, 1.4);
}

#main_content .explanation p {
	padding: 0;
	margin: 0 0 var(--space-5, 20px) 0;
	line-height: var(--leading-relaxed, 1.7);
	font-size: var(--text-base, 16px);
	color: var(--color-text-secondary, #cbd5e1);
}

#main_content .explanation p:last-child {
	margin-bottom: 0;
}

#main_content .explanation strong {
	font-weight: var(--font-bold, 700);
	color: var(--color-text-primary, #f1f5f9);
	font-size: var(--text-lg, 18px);
	display: block;
	margin-bottom: var(--space-3, 12px);
}

#main_content .explanation a {
	color: rgb(34, 211, 238);
	font-weight: var(--font-semibold, 600);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: var(--transition-colors, all 0.2s ease);
}

#main_content .explanation a:hover {
	color: rgb(103, 232, 249);
	border-bottom-color: rgba(34, 211, 238, 0.5);
}

#main_content .explanation br {
	display: block;
	content: "";
	margin-top: var(--space-2, 8px);
}

/* Light mode overrides for explanation section (dark bg needs light text) */
@media (prefers-color-scheme: light) {
	#main_content .explanation {
		/* Slightly adjusted background for better light mode integration */
		background: rgba(30, 41, 59, 0.92);
		border-color: rgba(71, 85, 105, 0.4);
	}

	#main_content .explanation h2 {
		color: #f1f5f9;
	}

	#main_content .explanation h3 {
		color: #cbd5e1;
	}

	#main_content .explanation p {
		color: #e2e8f0;
	}

	#main_content .explanation strong {
		color: #f8fafc;
	}

	#main_content .explanation a {
		color: rgb(56, 189, 248);
	}

	#main_content .explanation a:hover {
		color: rgb(125, 211, 252);
	}
}

/* Manual theme toggle support for explanation section */

/* end main content styles */

/* ad styles */


/* ad container styles - min-height provides initial space before ad script loads */
#banner_ad {
	min-height: 280px;
	margin-top: 20px;
	margin-bottom: 20px;
}

/* Mobile ads are ~375px tall, reserve appropriate space */
@media (max-width: 767px) {
	#banner_ad {
		min-height: 380px;
	}
}

.top_banner_ad {
	width: 100%;
}

/* end banner ad  */

/* secondary ad */
#secondary_ads {
	margin-top: 20px;
	margin-bottom: 20px;
}

/* end secondary ad */

/* end ad styles */

/* mail messages */

#mail_messages .mail_message:first-of-type {
	margin-top: 10px;
}

#mail_messages .mail_message {
	border: 1px solid #90d2c5;
	background: #E6F7FF;
	margin-bottom: 15px;
}

#mail_messages .message_top {
	margin: 10px;
	border-top: 1px solid #90d2c5;
	background: #fff;
	/* height: 52px; */
	cursor: pointer;
	color: black;
}

#mail_messages .mail_message .message_top .small_message_icon_box {
	width: 90px;
	display: inline-block;
	vertical-align: top;
	color: black;
}

#mail_messages .mail_message .message_top .small_message_icon {
	width: 28px;
	height: 18px;
	display: inline-block;
	/* Inline SVG small mail icon */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='18' viewBox='0 0 28 18'%3E%3Cpath fill='%23ffffff' d='M25 1H3c-.8 0-1.5.7-1.5 1.5v13c0 .8.7 1.5 1.5 1.5h22c.8 0 1.5-.7 1.5-1.5v-13c0-.8-.7-1.5-1.5-1.5zm0 4l-11 6-11-6V3l11 6 11-6v2z'/%3E%3C/svg%3E");
	margin-left: 40px;
	margin-top: 18px;
}

#mail_messages .mail_message .message_top .small_sender {
	display: inline-block;
	width: 209px;
	height: 30px;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: top;
	margin-right: 10px;
	margin-top: 18px;
}

#mail_messages .mail_message .message_top .small_subject {
	display: inline-block;
	/* width: 450px; */
	height: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: top;
	margin-right: 20px;
	margin-top: 18px;
}

#mail_messages .mail_message .message_top .small_date {
	display: inline-block;
	width: 219px;
	height: 30px;
	vertical-align: top;
	margin-top: 18px;
}

#mail_messages .mail_message_expanded .message_top {
	border-bottom: 1px solid #90d2c5;
}

#mail_messages_content {
	width: 90%;

}

#mail_messages .message_bottom {
	display: none;
	color: black;
}

#mail_messages .mail_message_expanded .message_bottom {
	padding: 0 24px 24px 24px;
	display: block;
}

#mail_messages .message_bottom .message_icons {
	text-align: right;
	padding-top: 20px;
}

#mail_messages .message_bottom .message_reply {
	display: inline-block;
	cursor: pointer;
}

#mail_messages .message_bottom .message_reply_icon {
	width: 32px;
	height: 25px;
	/* Inline SVG reply arrow icon */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='25' viewBox='0 0 32 25'%3E%3Cpath fill='%23ffffff' d='M12 8v-4l-8 8 8 8v-4c8 0 12 2 14 8-1-6-4-12-14-12z'/%3E%3C/svg%3E");
	display: inline-block;
	vertical-align: top;
}

#mail_messages .message_bottom .message_forward {
	display: inline-block;
	cursor: pointer;
}

#mail_messages .message_bottom .message_forward_icon {
	width: 32px;
	height: 25px;
	/* Inline SVG forward arrow icon */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='25' viewBox='0 0 32 25'%3E%3Cpath fill='%23ffffff' d='M20 8v-4l8 8-8 8v-4c-8 0-12 2-14 8 1-6 4-12 14-12z'/%3E%3C/svg%3E");
	display: inline-block;
	vertical-align: top;
	margin-left: 26px;
}

#mail_messages .message_bottom .message_close {
	display: inline-block;
	cursor: pointer;
}

#mail_messages .message_bottom .message_close_icon {
	width: 20px;
	height: 20px;
	/* Inline SVG close X icon */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23ffffff' d='M15 5l-10 10M5 5l10 10' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	display: inline-block;
	vertical-align: top;
	margin-top: 2px;
	margin-left: 36px;
}

#mail_messages .mail_message_expanded .message_bottom p:first-of-type {
	margin-top: 0;
}

#mail_messages .mail_message .message_bottom .reply_to_message,
#mail_messages .mail_message .message_bottom .forward_message {
	display: none;
	border-bottom: 1px solid #53b4ce;
	padding-bottom: 40px;
	margin-bottom: 30px;
}

#mail_messages .mail_message .message_bottom .reply_message_text {
	width: 100%;
	height: 150px;
}

#mail_messages .mail_message .message_bottom .forward_message_address {
	width: 40%;
}

#mail_messages .mail_message .message_bottom .reply_success,
#mail_messages .mail_message .message_bottom .forward_success {
	display: none;
	background: green;
	margin: 10px;
	text-align: center;
	border-radius: 6px;
}

#mail_messages .mail_message .message_bottom .reply_success p,
#mail_messages .mail_message .message_bottom .forward_success p {
	font-weight: bold;
	color: #fff;
	padding: 10px 0;
}


/* end mail messages */

/* secondary pages */
#secondary_header {
	background: url('/img/10minutemail_main_bg-e372de2dba3d3505fa736535ee175d0e.jpg');
	color: #fff;
	height: 90px;
}

.secondary_main {
	width: 690px;
	display: inline-block;
	border-right: 2px solid #5f61b9;
	margin-top: 20px;
	padding-right: 12px;
}

.secondary_main h1 {
	color: var(--color-accent, #49a6db);
	font-family: var(--font-body, inherit);
	font-weight: var(--font-bold, 700);
}

.secondary_main h2 {
	color: var(--color-accent, #49a6db);
	font-family: var(--font-body, inherit);
	font-weight: var(--font-semibold, 600);
}

.secondary_main strong {
	color: var(--color-accent, #49a6db);
	font-weight: var(--font-semibold, 600);
}

.secondary_main a,
.secondary_main a:visited,
.secondary_main a:active {
	color: var(--color-link, #49a6db);
	text-decoration: none;
	transition: var(--transition-colors, color 0.2s ease);
}

.secondary_sidebar {
	width: 290px;
	display: inline-block;
	vertical-align: top;
	margin-top: 10px;
}

.secondary_sidebar h2 {
	color: #49a6db;
	margin-left: 20px;
	margin-bottom: 40px;
}

.accolades_sidebar {
	padding-top: 120px;
}

.accolades_sidebar a,
.accolades_sidebar a:visited,
.accolades_sidebar a:active {
	text-decoration: none;
}

.accolades_sidebar p {
	margin-left: 20px;
	margin-bottom: 40px;
}

.sidebar_circle {
	color: #fff;
	background: #49a6db;
	width: 200px;
	height: 200px;
	border-radius: 100px;
	margin-left: 40px;
}

.sidebar_circle .circle_number {
	display: block;
	margin-left: 45%;
	padding-top: 30px;
	font-size: 24px;
}

.sidebar_circle .circle_text {
	display: block;
	text-align: center;
	padding-top: 14px;
}

.sidebar_circle_separator {
	margin-left: 140px;
	height: 20px;
	width: 2px;
	background: #49a6db;
}

.sidebar_try_it {
	border-radius: 4px;
	background: #50597b;
	color: #fff;
	width: 200px;
	height: 50px;
	margin-left: 40px;
	margin-top: 20px;
	text-align: center;
}

.sidebar_try_it a,
.sidebar_try_it a:visited,
.sidebar_try_it a:active {
	text-decoration: none;
	text-transform: uppercase;
	color: #fff;
	font-size: 22px;
	line-height: 50px;
}

.privacy_main {
	padding-bottom: 600px;
}

/* end secondary pages */

/* Mobile CSS syles */
@media only screen and (max-device-width: 480px) {
	.content {
		width: 100%;
	}

	header h1 {
		display: block;
		margin: 20px auto;
	}

	header h2 {
		display: block;
		margin: 20px auto;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 350px;
		height: 24px;
	}

	footer {
		padding: 40px 20px 20px;
	}

	footer .content > p:first-child {
		font-size: 13px;
		margin-bottom: 25px;
		padding-bottom: 25px;
	}

	.btc_wallet_address {
		font-size: 11px;
		padding: 6px 10px;
		max-width: 90%;
	}

	header .language {
		margin-left: 0;
		margin-top: 10px;
		display: block;
		width: 100%;
		text-align: center;
	}

	header .language #language_btn {
		display: inline-flex;
	}

	header .language #language_btn #locales {
		min-width: 120px;
		padding: 8px 32px 8px 32px;
		font-size: 13px;
	}

	header .language #language_btn::before {
		left: 10px;
		width: 14px;
		height: 14px;
	}

	header .language #language_btn::after {
		right: 10px;
		width: 8px;
		height: 8px;
	}

	#main_content {
		margin-top: 80px;
		/* Inherits gradient mesh from desktop - no separate mobile image needed */
	}

	#main_content .mail_section {
		width: 100%;
	}

	#get_more_time {
		margin-left: 8px;
	}

	#counter_min_two {
		margin-right: 8px;
	}

	#main_content #copy_address {
		float: none;
		margin-left: 8px;
		margin-bottom: 6px;
	}

	#main_content .mail_section .mail_address {
		width: 95%;
		margin-left: 8px;
		float: none;
	}

	#main_content .mail_section .mail_address #mail_address {
		margin-top: 14px;
	}

	.inbox_count {
		margin: 10px 0 0 8px;
		float: none;
		clear: both;
		height: 42px;
	}

	#inbox_count {
		margin: 0 0 0 30px;
		padding-top: 5px;
	}

	#main_content .explanation {
		margin-bottom: 32px;
		width: 95%;
		padding: 24px 20px;
	}

	#main_content .explanation h2 {
		font-size: 26px;
	}

	#main_content .explanation h3 {
		font-size: 18px;
		margin-bottom: 20px;
	}

	#main_content .explanation p {
		font-size: 15px;
		line-height: 1.7;
	}

	#main_content .explanation strong {
		font-size: 16px;
	}

	#mail_messages .mail_message {
		width: 98%;
		margin-left: 2px;
	}

	#mail_messages .mail_message:first-of-type {
		margin-top: 0;
	}

	#mail_messages .message_top {
		height: auto;
	}

	#mail_messages .mail_message .message_top .small_subject {
		display: block;
		margin-left: 10px;
	}

	#mail_messages .mail_message .message_top .small_date {
		margin-left: 10px;
	}

	#mail_messages .message_bottom .message_icons {
		margin-bottom: 20px;
	}


	#mail_messages .mail_message .message_bottom .forward_message_address {
		width: 90%;
	}

	.secondary_main {
		width: 98%;
		padding-left: 5px;
		padding-right: 5px;
		border-right: none;
	}

	.secondary_sidebar {
		display: none;
	}

	.privacy_main {
		padding-bottom: 60px;
	}

}

/* ============================================
   UX IMPROVEMENTS - Added 2025-10-19
   ============================================ */

/* Toast Notification System */
.ux-toast {
	position: fixed;
	top: var(--space-5, 20px);
	right: var(--space-5, 20px);
	background: var(--color-success, #4CAF50);
	color: white;
	padding: var(--space-4, 16px) var(--space-6, 24px);
	border-radius: var(--radius-md, 8px);
	box-shadow: var(--shadow-toast, 0 4px 12px rgba(0, 0, 0, 0.15));
	font-size: var(--text-base, 16px);
	font-weight: var(--font-medium, 500);
	z-index: var(--z-toast, 1500);
	opacity: 0;
	transform: translateY(-20px);
	transition: all var(--duration-slow, 0.3s) var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
	pointer-events: none;
}

.ux-toast.show {
	opacity: 1;
	transform: translateY(0);
}

.ux-toast.hide {
	opacity: 0;
	transform: translateY(-20px);
}

/* Copy button success state */
#main_content #copy_address.copy-success {
	background: linear-gradient(135deg, rgb(52, 211, 153) 0%, rgb(34, 197, 94) 100%) !important;
	border-color: rgba(52, 211, 153, 0.5);
	transform: scale(1.1);
	box-shadow: 0 4px 15px rgba(52, 211, 153, 0.5);
}

/* Timer Warning */
.timer-warning {
	background: var(--gradient-warning-legacy, linear-gradient(135deg, #FF9800 0%, #F57C00 100%));
	color: white;
	padding: var(--space-3, 12px) var(--space-5, 20px);
	border-radius: var(--radius-md, 8px);
	text-align: center;
	font-weight: var(--font-bold, bold);
	margin: var(--space-4, 15px) auto;
	max-width: 400px;
	font-size: var(--text-base, 16px);
	box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
	animation: pulse 1.5s ease-in-out infinite;
}

.timer-warning.hidden {
	display: none;
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.85;
		transform: scale(1.02);
	}
}

/* Button loading/success/error states */
#get_more_time.loading {
	opacity: 0.7;
	cursor: wait;
	pointer-events: none;
}

#get_more_time.success {
	background: var(--color-success, #4CAF50) !important;
	transform: scale(1.02);
	transition: var(--transition-all, all 0.2s ease);
}

#get_more_time.error {
	background: var(--color-error, #f44336) !important;
}

#get_more_time:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

/* Screen reader only class */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* Focus indicators for keyboard navigation */
#copy_address:focus-visible,
#get_more_time:focus-visible,
.message_top:focus-visible,
.message_reply:focus-visible,
.message_forward:focus-visible,
.message_close:focus-visible,
#language_btn:focus-visible {
	outline: 3px solid var(--color-focus, #FFD700);
	outline-offset: 3px;
	box-shadow: var(--shadow-focus, 0 0 0 6px rgba(255, 215, 0, 0.25));
}

/* Remove default focus for mouse users (keep for keyboard) */
#copy_address:focus:not(:focus-visible),
#get_more_time:focus:not(:focus-visible) {
	outline: none;
}

/* Note: #copy_address hover styles are defined with the main button styles above */

/* Note: #get_more_time:hover and :active are defined with the main button styles above */

.message_top:hover {
	background: #f0f8ff;
	transition: background 0.2s ease;
	cursor: pointer;
}

/* Increased touch target sizes */
#main_content #copy_address {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#main_content #copy_address .copy_icon {
	margin: 0;
}

/* Reduced timer visual prominence */
#main_content .mail_section .counter_number {
	width: clamp(45px, 12vw, 70px);
	height: clamp(75px, 20vw, 120px);
}

.counter_colon {
	height: clamp(75px, 20vw, 120px);
}

.counter_colon span {
	line-height: clamp(75px, 20vw, 120px);
	font-size: clamp(30px, 10vw, 60px);
}

#main_content .mail_section .counter_number span {
	line-height: clamp(75px, 20vw, 120px);
	font-size: clamp(30px, 10vw, 60px);
}

/* Disable hover effects on touch devices */
@media (hover: none) {
	#copy_address:hover,
	#get_more_time:hover {
		transform: none;
		box-shadow: none;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	#copy_address:focus-visible,
	#get_more_time:focus-visible {
		outline: 4px solid currentColor;
		outline-offset: 4px;
	}

	.ux-toast {
		border: 2px solid white;
	}
}

/* Reduced motion support */
/* ============================================
   SVG RADAR INBOX ANIMATION
   Used by the animated envelope icon in empty state
   ============================================ */

.inbox-radar-icon {
	width: 100px;
	height: 100px;
}

.radar-sweep {
	transform-origin: 40px 40px;
	animation: radar-rotate 3s linear infinite;
}

@keyframes radar-rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.radar-ring {
	animation: radar-pulse 3s ease-in-out infinite;
}

.radar-ring-1 { animation-delay: 0s; }
.radar-ring-2 { animation-delay: 0.5s; }
.radar-ring-3 { animation-delay: 1s; }

@keyframes radar-pulse {
	0%, 100% {
		opacity: 0.3;
		transform: scale(1);
	}
	50% {
		opacity: 0.8;
		transform: scale(1.02);
	}
}

.envelope-icon {
	animation: envelope-float 4s ease-in-out infinite;
}

@keyframes envelope-float {
	0%, 100% { transform: translate(22px, 26px); }
	50% { transform: translate(22px, 23px); }
}

/* ============================================
   Session Expired Overlay
   ============================================ */

.session-expired-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--color-bg-overlay, rgba(0, 0, 0, 0.85));
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: var(--z-modal, 9999);
	opacity: 0;
	transition: opacity var(--duration-slow, 0.3s) var(--ease-out, ease);
}

.session-expired-overlay:not(.hidden) {
	opacity: 1;
}

.session-expired-overlay.hidden {
	display: none;
}

.expired-content {
	background: var(--gradient-expired-legacy, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
	padding: var(--space-12, 50px) var(--space-10, 40px);
	border-radius: var(--radius-modal, 16px);
	text-align: center;
	max-width: 500px;
	width: 90%;
	box-shadow: var(--shadow-modal, 0 20px 60px rgba(0, 0, 0, 0.3));
	animation: slideInUp var(--duration-slower, 0.4s) var(--ease-out, ease-out);
}

@keyframes slideInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.expired-icon {
	font-size: 80px;
	margin-bottom: 20px;
	animation: pulse-slow 2s ease-in-out infinite;
}

@keyframes pulse-slow {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.8;
		transform: scale(1.05);
	}
}

.expired-title {
	color: #ffffff;
	font-size: 32px;
	font-weight: 700;
	margin: 0 0 15px 0;
	letter-spacing: 0.5px;
}

.expired-message {
	color: rgba(255, 255, 255, 0.9);
	font-size: 18px;
	margin: 0 0 30px 0;
	line-height: 1.6;
}

.refresh-session-btn {
	background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%);
	color: white;
	border: none;
	padding: 16px 40px;
	font-size: 18px;
	font-weight: 600;
	border-radius: 50px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(0, 210, 255, 0.3);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.refresh-session-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 210, 255, 0.4);
	background: linear-gradient(135deg, #00d2ff 0%, #2e6bb8 100%);
}

.refresh-session-btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 10px rgba(0, 210, 255, 0.3);
}

.refresh-session-btn:focus {
	outline: 3px solid rgba(255, 255, 255, 0.5);
	outline-offset: 3px;
}

/* ============================================
   PHASE 4: COUNTDOWN TIMER - HERO COMPONENT
   Premium 3D appearance with state transitions
   ============================================ */

/* Timer Container - Hero context */
#countdown {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2, 8px);
	padding: var(--space-4, 16px) var(--space-6, 24px);
	position: relative;
	border-radius: var(--radius-2xl, 20px);
	background: rgba(0, 0, 0, 0.15);
	backdrop-filter: blur(var(--blur-sm, 4px));
}

/* Individual Digit Cards - Premium 3D appearance */
#main_content .mail_section .counter_number {
	width: clamp(60px, 14vw, 100px);
	height: clamp(100px, 24vw, 160px);
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.98) 0%,
		rgba(245, 247, 250, 0.95) 50%,
		rgba(235, 238, 243, 0.92) 100%
	);
	border-radius: var(--radius-lg, 12px);
	box-shadow:
		0 10px 30px rgba(0, 0, 0, 0.15),
		0 5px 15px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 -1px 0 rgba(0, 0, 0, 0.05),
		inset 1px 0 0 rgba(255, 255, 255, 0.5),
		inset -1px 0 0 rgba(255, 255, 255, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--timer-color, var(--color-timer-safe, rgb(52, 211, 153)));
	text-align: center;
	margin-right: var(--space-2, 8px);
	margin-top: var(--space-4, 16px);
	transition:
		color var(--duration-slow, 0.4s) var(--ease-out, ease),
		box-shadow var(--duration-slow, 0.4s) var(--ease-out, ease),
		transform var(--duration-normal, 0.2s) var(--ease-out, ease),
		background var(--duration-slow, 0.4s) var(--ease-out, ease);
	perspective: 500px;
	transform-style: preserve-3d;
	position: relative;
	overflow: hidden;
}

/* Digit Typography */
#main_content .mail_section .counter_number span {
	font-family: var(--font-display, 'JetBrains Mono', monospace);
	font-size: clamp(42px, 12vw, 80px);
	font-weight: var(--font-bold, 700);
	line-height: 1;
	letter-spacing: var(--tracking-tight, -0.015em);
	color: inherit;
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.5),
		0 2px 4px rgba(0, 0, 0, 0.1);
	display: block;
	transform-origin: center center;
	transition: transform var(--duration-fast, 0.15s) var(--ease-out, ease);
}

/* Colon Separator */
.counter_colon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: clamp(100px, 24vw, 160px);
	margin-top: 0;
	padding: 0 var(--space-1, 4px);
}

.counter_colon span {
	font-family: var(--font-display, 'JetBrains Mono', monospace);
	font-size: clamp(36px, 10vw, 64px);
	font-weight: var(--font-bold, 700);
	line-height: 1;
	display: block;
	color: rgba(255, 255, 255, 0.9);
	text-shadow:
		0 2px 4px rgba(0, 0, 0, 0.2),
		0 0 20px rgba(255, 255, 255, 0.3);
	animation: colon-pulse 1s ease-in-out infinite;
}

@keyframes colon-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

/* TIMER STATE: SAFE (> 2 minutes) */
#countdown.timer-state-safe .counter_number,
.timer-state-safe #countdown .counter_number {
	color: var(--color-timer-safe, rgb(52, 211, 153));
	box-shadow:
		0 10px 30px rgba(0, 0, 0, 0.15),
		0 5px 15px rgba(0, 0, 0, 0.1),
		0 0 20px var(--color-timer-safe-glow, rgba(52, 211, 153, 0.2)),
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

#countdown.timer-state-safe .counter_number::after,
.timer-state-safe #countdown .counter_number::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 10%;
	right: 10%;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--color-timer-safe, rgb(52, 211, 153)), transparent);
	border-radius: var(--radius-full, 9999px);
	opacity: 0.6;
}

/* TIMER STATE: WARNING (1-2 minutes) */
#countdown.timer-state-warning .counter_number,
.timer-state-warning #countdown .counter_number {
	color: var(--color-timer-warning, rgb(251, 191, 36));
	box-shadow:
		0 10px 30px rgba(0, 0, 0, 0.15),
		0 5px 15px rgba(0, 0, 0, 0.1),
		0 0 25px var(--color-timer-warning-glow, rgba(251, 191, 36, 0.35)),
		0 0 50px rgba(251, 191, 36, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 -1px 0 rgba(0, 0, 0, 0.05);
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.98) 0%,
		rgba(255, 251, 235, 0.95) 50%,
		rgba(254, 243, 199, 0.92) 100%
	);
}

#countdown.timer-state-warning .counter_number::after,
.timer-state-warning #countdown .counter_number::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 10%;
	right: 10%;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--color-timer-warning, rgb(251, 191, 36)), transparent);
	border-radius: var(--radius-full, 9999px);
	opacity: 0.8;
}

#countdown.timer-state-warning .counter_colon span,
.timer-state-warning #countdown .counter_colon span {
	color: var(--color-timer-warning, rgb(251, 191, 36));
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 20px var(--color-timer-warning-glow, rgba(251, 191, 36, 0.4));
}

/* TIMER STATE: DANGER (< 1 minute) */
#countdown.timer-state-danger .counter_number,
.timer-state-danger #countdown .counter_number {
	color: var(--color-timer-danger, rgb(248, 113, 113));
	box-shadow:
		0 10px 30px rgba(0, 0, 0, 0.15),
		0 5px 15px rgba(0, 0, 0, 0.1),
		0 0 30px var(--color-timer-danger-glow, rgba(248, 113, 113, 0.4)),
		0 0 60px rgba(248, 113, 113, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 -1px 0 rgba(0, 0, 0, 0.05);
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.98) 0%,
		rgba(254, 242, 242, 0.95) 50%,
		rgba(254, 226, 226, 0.92) 100%
	);
	animation: danger-pulse 0.8s ease-in-out infinite;
}

@keyframes danger-pulse {
	0%, 100% {
		box-shadow:
			0 10px 30px rgba(0, 0, 0, 0.15),
			0 5px 15px rgba(0, 0, 0, 0.1),
			0 0 30px var(--color-timer-danger-glow, rgba(248, 113, 113, 0.4)),
			0 0 60px rgba(248, 113, 113, 0.2),
			inset 0 1px 0 rgba(255, 255, 255, 0.9),
			inset 0 -1px 0 rgba(0, 0, 0, 0.05);
		transform: scale(1);
	}
	50% {
		box-shadow:
			0 10px 30px rgba(0, 0, 0, 0.15),
			0 5px 15px rgba(0, 0, 0, 0.1),
			0 0 40px var(--color-timer-danger-glow, rgba(248, 113, 113, 0.6)),
			0 0 80px rgba(248, 113, 113, 0.3),
			inset 0 1px 0 rgba(255, 255, 255, 0.9),
			inset 0 -1px 0 rgba(0, 0, 0, 0.05);
		transform: scale(1.02);
	}
}

#countdown.timer-state-danger .counter_number::after,
.timer-state-danger #countdown .counter_number::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 5%;
	right: 5%;
	height: 4px;
	background: linear-gradient(90deg, transparent, var(--color-timer-danger, rgb(248, 113, 113)), transparent);
	border-radius: var(--radius-full, 9999px);
	opacity: 1;
	animation: danger-bar-pulse 0.8s ease-in-out infinite;
}

@keyframes danger-bar-pulse {
	0%, 100% { opacity: 0.8; }
	50% { opacity: 1; }
}

#countdown.timer-state-danger .counter_colon span,
.timer-state-danger #countdown .counter_colon span {
	color: var(--color-timer-danger, rgb(248, 113, 113));
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 25px var(--color-timer-danger-glow, rgba(248, 113, 113, 0.5));
	animation: colon-danger-pulse 0.5s ease-in-out infinite;
}

@keyframes colon-danger-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

/* Digit transition animations */

@keyframes digit-flip-animation {
	0% { transform: perspective(500px) rotateX(0deg); opacity: 1; }
	50% { transform: perspective(500px) rotateX(-90deg); opacity: 0.5; }
	100% { transform: perspective(500px) rotateX(0deg); opacity: 1; }
}

@keyframes digit-pop-animation {
	0% { transform: scale(0.8); opacity: 0.5; }
	60% { transform: scale(1.1); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

/* Timer Accessibility */
@media (prefers-contrast: high) {
	#main_content .mail_section .counter_number {
		border: 2px solid currentColor;
		background: white;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.9);
	}
	#countdown.timer-state-safe .counter_number { color: #059669; }
	#countdown.timer-state-warning .counter_number { color: #b45309; }
	#countdown.timer-state-danger .counter_number { color: #dc2626; }
}

/* ============================================
   PHASE 5: EMAIL ADDRESS DISPLAY COMPONENT
   Glass morphism card with prominent email display
   ============================================ */

/* Container: Glass morphism card treatment */
.mail_top_row {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	padding: var(--space-6, 24px);
	background: var(--glass-bg, rgba(30, 41, 59, 0.8));
	backdrop-filter: blur(var(--glass-blur, 16px));
	-webkit-backdrop-filter: blur(var(--glass-blur, 16px));
	border: 1px solid var(--glass-border, rgba(100, 116, 139, 0.2));
	border-radius: var(--radius-xl, 16px);
	box-shadow:
		var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.2)),
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 0 40px rgba(var(--raw-accent, 34 211 238), 0.08);
	transition:
		box-shadow var(--duration-normal, 200ms) var(--ease-out),
		transform var(--duration-normal, 200ms) var(--ease-out);
}

.mail_top_row:hover {
	box-shadow:
		var(--shadow-xl, 0 16px 48px rgba(0, 0, 0, 0.25)),
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 0 60px rgba(var(--raw-accent, 34 211 238), 0.12);
	transform: translateY(-2px);
}

@media (min-width: 865px) {
	.mail_top_row {
		flex-direction: row;
		justify-content: center;
		gap: var(--space-4, 16px);
		padding: var(--space-8, 32px) var(--space-10, 40px);
	}
	.mail_top_row > div { margin: 0; }
}

/* Copy Button: Enhanced with clear affordance */
#main_content #copy_address {
	position: relative;
	width: 52px;
	height: 52px;
	min-width: 52px;
	flex-shrink: 0;
	cursor: pointer;
	background: linear-gradient(135deg, rgb(34, 211, 238) 0%, rgb(22, 178, 202) 100%);
	border-radius: var(--radius-lg, 12px);
	border: 1px solid rgba(34, 211, 238, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.15),
		0 0 20px rgba(34, 211, 238, 0.25);
	transition:
		transform var(--duration-fast, 100ms) var(--ease-out),
		box-shadow var(--duration-normal, 200ms) var(--ease-out),
		background var(--duration-normal, 200ms) var(--ease-out);
	user-select: none;
	-webkit-user-select: none;
}

#main_content #copy_address:hover {
	background: linear-gradient(135deg, rgb(103, 232, 249) 0%, rgb(34, 211, 238) 100%);
	transform: scale(1.08);
	box-shadow:
		0 4px 8px rgba(0, 0, 0, 0.2),
		0 0 30px rgba(34, 211, 238, 0.4);
}

#main_content #copy_address:active {
	transform: scale(0.95);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 15px rgba(34, 211, 238, 0.2);
}

#main_content #copy_address .copy_icon {
	width: 28px;
	height: 28px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin: 0;
	transition: transform var(--duration-fast, 100ms) var(--ease-out);
}

#main_content #copy_address:hover .copy_icon {
	transform: scale(1.1);
}

/* "Copied!" Tooltip */
#main_content #copy_address::after {
	content: 'Copied!';
	position: absolute;
	top: -40px;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	background: rgb(52, 211, 153);
	color: white;
	padding: 8px 16px;
	border-radius: 8px;
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.015em;
	white-space: nowrap;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 100ms ease-out,
		transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

#main_content #copy_address::before {
	content: '';
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: rgb(52, 211, 153);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 100ms ease-out;
}

#main_content #copy_address.copy-success::after {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

#main_content #copy_address.copy-success::before {
	opacity: 1;
	visibility: visible;
}

#main_content #copy_address.copy-success {
	background: rgb(52, 211, 153) !important;
	border-color: rgba(52, 211, 153, 0.5);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 0 25px rgba(52, 211, 153, 0.4);
}

#main_content #copy_address.copy-success .copy_icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Email Address Display */
#main_content .mail_section .mail_address {
	flex: 1;
	max-width: 480px;
	min-width: 320px;
	height: auto;
	padding: var(--space-3, 12px);
	background: rgba(var(--raw-slate-800, 51 65 85), 0.6);
	border: 1px solid var(--color-border-subtle, rgba(71, 85, 105, 0.5));
	border-radius: var(--radius-lg, 12px);
	float: none;
	margin: 0;
}

#main_content .mail_section #mail_address {
	display: block;
	width: 100%;
	padding: var(--space-4, 16px) var(--space-5, 20px);
	margin: 0;
	font-family: var(--font-mono, 'JetBrains Mono', 'Fira Code', monospace);
	font-size: var(--text-lg, clamp(1rem, 0.95rem + 0.25vw, 1.125rem));
	font-weight: var(--font-medium, 500);
	letter-spacing: var(--tracking-wider, 0.03em);
	line-height: var(--leading-normal, 1.5);
	color: var(--color-text-primary, rgb(241, 245, 249));
	text-align: center;
	background: rgba(var(--raw-slate-900, 30 41 59), 0.8);
	border: 2px solid var(--color-border-default, rgba(100, 116, 139, 0.4));
	border-radius: var(--radius-md, 8px);
	box-shadow: var(--shadow-inset-sm, inset 0 1px 2px rgba(0, 0, 0, 0.15));
	transition:
		border-color var(--duration-normal, 200ms) var(--ease-out),
		box-shadow var(--duration-normal, 200ms) var(--ease-out),
		background var(--duration-normal, 200ms) var(--ease-out);
	cursor: text;
}

#main_content .mail_section #mail_address:focus {
	outline: none;
	border-color: var(--color-accent, rgb(34, 211, 238));
	background: rgba(var(--raw-slate-900, 30 41 59), 0.95);
	box-shadow:
		var(--shadow-inset-sm, inset 0 1px 2px rgba(0, 0, 0, 0.15)),
		0 0 0 3px rgba(var(--raw-accent, 34 211 238), 0.15),
		0 0 20px rgba(var(--raw-accent, 34 211 238), 0.1);
}

#main_content .mail_section #mail_address:hover:not(:focus) {
	border-color: var(--color-border-strong, rgba(148, 163, 184, 0.5));
	background: rgba(var(--raw-slate-900, 30 41 59), 0.9);
}

#main_content .mail_section #mail_address::selection {
	background: rgba(var(--raw-accent, 34 211 238), 0.3);
	color: var(--color-text-primary, rgb(241, 245, 249));
}

/* Copy flash effect - used by JavaScript for visual feedback */
#main_content .mail_section #mail_address.copy-flash {
	background-color: var(--color-accent, rgb(34, 211, 238)) !important;
	transition: background-color 0.1s ease-out;
}

/* Inbox Count Badge */
.inbox_count {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 140px;
	height: auto;
	padding: var(--space-4, 16px) var(--space-5, 20px);
	background: linear-gradient(
		135deg,
		rgba(var(--raw-slate-800, 51 65 85), 0.7) 0%,
		rgba(var(--raw-slate-900, 30 41 59), 0.8) 100%
	);
	border: 1px solid var(--color-border-subtle, rgba(71, 85, 105, 0.5));
	border-radius: var(--radius-lg, 12px);
	float: none;
	margin: 0;
	transition:
		background var(--duration-normal, 200ms) var(--ease-out),
		border-color var(--duration-normal, 200ms) var(--ease-out),
		transform var(--duration-normal, 200ms) var(--ease-out);
}

.inbox_count:hover {
	background: linear-gradient(
		135deg,
		rgba(var(--raw-slate-700, 71 85 105), 0.6) 0%,
		rgba(var(--raw-slate-800, 51 65 85), 0.7) 100%
	);
	border-color: var(--color-border-default, rgba(100, 116, 139, 0.4));
	transform: translateY(-1px);
}

#inbox_count {
	display: flex;
	align-items: center;
	gap: var(--space-2, 8px);
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-size: var(--text-base, 16px);
	font-weight: var(--font-medium, 500);
	color: var(--color-text-secondary, rgb(178, 190, 205));
	position: static;
	margin: 0;
}

.inbox_count .mail_icon {
	width: 24px;
	height: 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='20' viewBox='0 0 24 20' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpath d='M22 6l-10 7L2 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin: 0;
	vertical-align: middle;
	opacity: 0.8;
}

.inbox_count #inbox_count_number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 var(--space-2, 8px);
	background: var(--color-accent, rgb(34, 211, 238));
	color: var(--color-text-inverse, rgb(30, 41, 59));
	border-radius: var(--radius-full, 9999px);
	font-family: var(--font-mono, 'JetBrains Mono', monospace);
	font-size: var(--text-base, 16px);
	font-weight: var(--font-bold, 700);
	position: static;
	margin: 0;
	vertical-align: middle;
	box-shadow: 0 0 12px rgba(var(--raw-accent, 34 211 238), 0.3);
	transition:
		transform var(--duration-fast, 100ms) var(--ease-bounce),
		background var(--duration-normal, 200ms) var(--ease-out);
}

#inbox_count_number.highlight {
	animation: badge-pop 0.4s var(--ease-bounce);
}

@keyframes badge-pop {
	0% { transform: scale(1); }
	50% { transform: scale(1.3); background: var(--color-success, rgb(52, 211, 153)); }
	100% { transform: scale(1); }
}

/* Email Display Mobile Responsive */
@media (max-width: 864px) {
	.mail_top_row {
		padding: var(--space-5, 20px);
		gap: var(--space-3, 12px);
	}
	#main_content .mail_section .mail_address {
		width: 100%;
		max-width: none;
		min-width: auto;
	}
	#main_content .mail_section #mail_address {
		font-size: var(--text-base, 16px);
		padding: var(--space-3, 12px) var(--space-4, 16px);
	}
	.inbox_count {
		width: 100%;
		justify-content: center;
	}
}

/* Email Display Accessibility */
@media (prefers-contrast: high) {
	.mail_top_row {
		border: 2px solid var(--color-text-primary);
		background: var(--color-bg-base);
	}
	#main_content #copy_address { border: 2px solid currentColor; }
	#main_content .mail_section #mail_address {
		border: 2px solid var(--color-text-primary);
		background: var(--color-bg-base);
	}
	#inbox_count_number { border: 2px solid currentColor; }
}

/* ============================================
   PHASE 6: DYNAMIC BACKGROUND EFFECTS
   Gradient mesh with subtle animation and noise overlay
   ============================================ */

/* CSS Custom Properties for Background */
:root {
	--bg-gradient-base: rgb(var(--raw-slate-950, 15 23 42));
	--bg-mesh-color-1: rgba(var(--raw-accent, 34 211 238), 0.15);
	--bg-mesh-color-2: rgba(var(--raw-brand-navy, 80 89 123), 0.2);
	--bg-mesh-color-3: rgba(var(--raw-slate-800, 51 65 85), 0.8);
	--bg-mesh-color-4: rgba(var(--raw-accent-dim, 22 178 202), 0.1);
	--bg-mesh-color-5: rgba(var(--raw-brand-blue, 97 144 211), 0.12);
	--bg-animation-duration: 20s;
}

@media (prefers-color-scheme: light) {
	:root {
		--bg-gradient-base: rgb(var(--raw-slate-100, 241 245 249));
		--bg-mesh-color-1: rgba(var(--raw-accent, 34 211 238), 0.08);
		--bg-mesh-color-2: rgba(var(--raw-brand-navy, 80 89 123), 0.06);
		--bg-mesh-color-3: rgba(var(--raw-slate-200, 226 232 240), 0.7);
		--bg-mesh-color-4: rgba(var(--raw-accent-dim, 22 178 202), 0.05);
		--bg-mesh-color-5: rgba(var(--raw-brand-blue, 97 144 211), 0.08);
	}
}

/* Main content dynamic background */
#main_content {
	background: var(--bg-gradient-base);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Animated Gradient Mesh Layer */
#main_content::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: var(--z-below, -1);
	background:
		radial-gradient(ellipse 80% 50% at 10% 20%, var(--bg-mesh-color-1) 0%, transparent 50%),
		radial-gradient(ellipse 60% 70% at 90% 10%, var(--bg-mesh-color-2) 0%, transparent 50%),
		radial-gradient(ellipse 100% 80% at 50% 50%, var(--bg-mesh-color-3) 0%, transparent 60%),
		radial-gradient(ellipse 70% 60% at 20% 80%, var(--bg-mesh-color-4) 0%, transparent 50%),
		radial-gradient(ellipse 50% 50% at 85% 75%, var(--bg-mesh-color-5) 0%, transparent 45%),
		var(--bg-gradient-base);
	background-size: 200% 200%, 180% 180%, 120% 120%, 160% 160%, 150% 150%, 100% 100%;
	animation: gradientMeshShift var(--bg-animation-duration) var(--ease-smooth, ease) infinite;
	transition: background var(--duration-slow, 0.3s) var(--ease-out, ease);
}

@keyframes gradientMeshShift {
	0%, 100% {
		background-position: 0% 0%, 100% 0%, 50% 50%, 0% 100%, 100% 100%, 0% 0%;
	}
	25% {
		background-position: 25% 15%, 75% 10%, 55% 45%, 15% 85%, 90% 80%, 0% 0%;
	}
	50% {
		background-position: 50% 25%, 50% 25%, 45% 55%, 25% 75%, 75% 70%, 0% 0%;
	}
	75% {
		background-position: 25% 10%, 85% 15%, 52% 48%, 10% 90%, 95% 85%, 0% 0%;
	}
}

/* Noise Texture Overlay */
#main_content::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: var(--z-base, 0);
	pointer-events: none;
	background-image: var(--noise-texture);
	background-repeat: repeat;
	background-size: 200px 200px;
	opacity: var(--noise-opacity, 0.03);
	mix-blend-mode: overlay;
}

/* Background Accessibility & Performance */
@media (prefers-contrast: high) {
	#main_content::before {
		background: var(--bg-gradient-base);
		animation: none;
	}
	#main_content::after { display: none; }
}

@supports (will-change: background-position) {
	#main_content::before { will-change: background-position; }
}

/* ============================================
   PHASE 7: INBOX EMPTY STATE - ENHANCED
   Modern scanning animation with CSS-only icon
   ============================================ */

.inbox-empty-state {
	text-align: center;
	padding: var(--space-16, 60px) var(--space-5, 20px);
	color: var(--color-text-primary, #fff);
	opacity: 1;
	transition: opacity var(--duration-slow, 0.3s) var(--ease-out, ease);
}

.inbox-empty-state.hidden { display: none; }

/* Empty state icon container - uses SVG inside */
.empty-state-icon {
	margin: 0 auto var(--space-8, 32px);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* SVG icon floats - no CSS-only fallback needed */
@keyframes icon-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

/* Radar pulse rings */

@keyframes radar-pulse {
	0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.8; }
	100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

.empty-state-title {
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-size: var(--text-2xl, 24px);
	font-weight: var(--font-semibold, 600);
	margin: 0 0 var(--space-3, 12px) 0;
	color: var(--color-text-primary, #fff);
	letter-spacing: var(--tracking-tight, -0.015em);
}

.empty-state-subtitle {
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-size: var(--text-base, 16px);
	font-weight: var(--font-normal, 400);
	margin: 0;
	color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
	line-height: var(--leading-relaxed, 1.65);
}

/* ============================================
   PHASE 7: MESSAGE LIST - MODERN CARD DESIGN
   Clean cards with hover effects and hierarchy
   ============================================ */

#mail_messages {
	padding: 0 var(--space-4, 16px);
	max-width: var(--container-lg, 1024px);
	margin: 0 auto;
}

#mail_messages .mail_message:first-of-type {
	margin-top: var(--space-4, 16px);
}

#mail_messages .mail_message {
	background: var(--color-bg-surface, rgba(255, 255, 255, 0.95));
	border: 1px solid var(--color-border-subtle, rgba(71, 85, 105, 0.3));
	border-radius: var(--radius-card, 12px);
	margin-bottom: var(--space-4, 16px);
	box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.08));
	transition:
		transform var(--duration-normal, 0.2s) var(--ease-out, ease),
		box-shadow var(--duration-normal, 0.2s) var(--ease-out, ease),
		border-color var(--duration-normal, 0.2s) var(--ease-out, ease);
	overflow: hidden;
}

#mail_messages .mail_message:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12));
	border-color: var(--color-border-accent, rgba(34, 211, 238, 0.4));
}

#mail_messages .mail_message_expanded {
	box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.15));
	border-color: var(--color-accent, rgb(34, 211, 238));
}

#mail_messages .mail_message_expanded:hover { transform: none; }

/* Message header row */
#mail_messages .message_top {
	display: flex;
	align-items: center;
	padding: var(--space-4, 16px) var(--space-5, 20px);
	margin: 0;
	border: none;
	border-top: none;
	background: transparent;
	cursor: pointer;
	color: var(--color-text-primary, #2c3e50);
	transition: background-color var(--duration-fast, 0.1s) var(--ease-out, ease);
	gap: var(--space-4, 16px);
}

#mail_messages .message_top:hover {
	background: var(--color-bg-hover, rgba(71, 85, 105, 0.05));
}

/* Message icon container */
#mail_messages .mail_message .message_top .small_message_icon_box {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-accent-muted, rgba(34, 211, 238, 0.12));
	border-radius: var(--radius-md, 8px);
	transition: background-color var(--duration-normal, 0.2s) var(--ease-out, ease);
}

#mail_messages .mail_message:hover .message_top .small_message_icon_box {
	background: var(--color-accent-muted, rgba(34, 211, 238, 0.2));
}

#mail_messages .mail_message .message_top .small_message_icon {
	width: 24px;
	height: 24px;
	display: block;
	margin: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

#mail_messages .mail_message .message_top .small_sender {
	flex: 0 0 180px;
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-size: var(--text-sm, 14px);
	font-weight: var(--font-semibold, 600);
	color: var(--color-text-primary, #2c3e50);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0;
	height: auto;
}

#mail_messages .mail_message .message_top .small_subject {
	flex: 1;
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-size: var(--text-base, 16px);
	font-weight: var(--font-normal, 400);
	color: var(--color-text-secondary, #5a6c7d);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0;
	height: auto;
	padding-right: var(--space-4, 16px);
}

#mail_messages .mail_message .message_top .small_date {
	flex-shrink: 0;
	font-family: var(--font-mono, 'JetBrains Mono', monospace);
	font-size: var(--text-xs, 12px);
	font-weight: var(--font-normal, 400);
	color: var(--color-text-tertiary, #94a3b8);
	letter-spacing: var(--tracking-wide, 0.015em);
	text-align: right;
	margin: 0;
	height: auto;
	width: auto;
}

#mail_messages .mail_message_expanded .message_top {
	border-bottom: 1px solid var(--color-border-subtle, rgba(71, 85, 105, 0.2));
}

/* Message body - expanded state */
#mail_messages .message_bottom {
	display: none;
	color: var(--color-text-primary, #2c3e50);
	background: var(--color-bg-elevated, rgba(248, 250, 252, 0.5));
}

#mail_messages .mail_message_expanded .message_bottom {
	display: block;
	padding: var(--space-6, 24px);
	animation: slideDown var(--duration-slow, 0.3s) var(--ease-out, ease);
}

@keyframes slideDown {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}

#mail_messages .mail_message_expanded .message_bottom p {
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-size: var(--text-base, 16px);
	line-height: var(--leading-relaxed, 1.65);
	color: var(--color-text-primary, #34495e);
	margin: 0 0 var(--space-4, 16px) 0;
}

#mail_messages .mail_message_expanded .message_bottom p:first-of-type { margin-top: 0; }
#mail_messages .mail_message_expanded .message_bottom p:last-of-type { margin-bottom: 0; }

/* Action buttons */
#mail_messages .message_bottom .message_icons {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-3, 12px);
	padding-top: var(--space-6, 24px);
	margin-top: var(--space-6, 24px);
	border-top: 1px solid var(--color-border-subtle, rgba(71, 85, 105, 0.15));
}

#mail_messages .message_bottom .message_reply,
#mail_messages .message_bottom .message_forward,
#mail_messages .message_bottom .message_close {
	display: flex;
	align-items: center;
	gap: var(--space-2, 8px);
	padding: var(--space-2-5, 10px) var(--space-4, 16px);
	background: var(--color-btn-secondary-bg, rgba(71, 85, 105, 0.1));
	border: 1px solid var(--color-border-subtle, rgba(71, 85, 105, 0.2));
	border-radius: var(--radius-button, 6px);
	cursor: pointer;
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-size: var(--text-sm, 14px);
	font-weight: var(--font-medium, 500);
	color: var(--color-text-secondary, #5a6c7d);
	transition:
		background-color var(--duration-fast, 0.1s) var(--ease-out, ease),
		border-color var(--duration-fast, 0.1s) var(--ease-out, ease),
		color var(--duration-fast, 0.1s) var(--ease-out, ease),
		transform var(--duration-fast, 0.1s) var(--ease-out, ease),
		box-shadow var(--duration-fast, 0.1s) var(--ease-out, ease);
}

#mail_messages .message_bottom .message_reply:hover,
#mail_messages .message_bottom .message_forward:hover {
	background: var(--color-accent-muted, rgba(34, 211, 238, 0.15));
	border-color: var(--color-border-accent, rgba(34, 211, 238, 0.4));
	color: var(--color-accent, rgb(34, 211, 238));
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.08));
}

#mail_messages .message_bottom .message_close:hover {
	background: var(--color-error-bg, rgba(248, 113, 113, 0.12));
	border-color: rgba(248, 113, 113, 0.4);
	color: var(--color-error, rgb(248, 113, 113));
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.08));
}

#mail_messages .message_bottom .message_reply:active,
#mail_messages .message_bottom .message_forward:active,
#mail_messages .message_bottom .message_close:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Button icons */
#mail_messages .message_bottom .message_reply_icon,
#mail_messages .message_bottom .message_forward_icon,
#mail_messages .message_bottom .message_close_icon {
	width: 18px;
	height: 18px;
	display: block;
	margin: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: filter var(--duration-fast, 0.1s) var(--ease-out, ease);
}

#mail_messages .message_bottom .message_reply_icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235a6c7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9,17 4,12 9,7'/%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E");
}

#mail_messages .message_bottom .message_reply:hover .message_reply_icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9,17 4,12 9,7'/%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E");
}

#mail_messages .message_bottom .message_forward_icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235a6c7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15,17 20,12 15,7'/%3E%3Cpath d='M4 18v-2a4 4 0 0 1 4-4h12'/%3E%3C/svg%3E");
	margin-left: 0;
}

#mail_messages .message_bottom .message_forward:hover .message_forward_icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15,17 20,12 15,7'/%3E%3Cpath d='M4 18v-2a4 4 0 0 1 4-4h12'/%3E%3C/svg%3E");
}

#mail_messages .message_bottom .message_close_icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235a6c7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
	margin-left: 0;
}

#mail_messages .message_bottom .message_close:hover .message_close_icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* Message list accessibility */
#mail_messages .message_top:focus-visible {
	outline: 3px solid var(--color-focus, #FFD700);
	outline-offset: -3px;
	border-radius: var(--radius-card, 12px) var(--radius-card, 12px) 0 0;
}

#mail_messages .message_bottom .message_reply:focus-visible,
#mail_messages .message_bottom .message_forward:focus-visible,
#mail_messages .message_bottom .message_close:focus-visible {
	outline: 3px solid var(--color-focus, #FFD700);
	outline-offset: 2px;
	box-shadow: var(--shadow-focus, 0 0 0 6px rgba(255, 215, 0, 0.25));
}

@media (prefers-contrast: high) {
	#mail_messages .mail_message {
		border-width: 2px;
		border-color: var(--color-text-primary);
	}
	#mail_messages .message_bottom .message_reply,
	#mail_messages .message_bottom .message_forward,
	#mail_messages .message_bottom .message_close { border-width: 2px; }
}

@media (hover: none) {
	#mail_messages .mail_message:hover {
		transform: none;
		box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.08));
	}
	#mail_messages .message_bottom .message_reply:hover,
	#mail_messages .message_bottom .message_forward:hover,
	#mail_messages .message_bottom .message_close:hover { transform: none; }
}

/* ============================================
   PHASE 8: FOOTER ENHANCEMENTS
   Modern styling with design system integration
   ============================================ */

/* Footer base styles - enhanced */
footer {
	background: var(--gradient-footer, linear-gradient(135deg, rgb(var(--raw-slate-900, 30 41 59)) 0%, rgb(var(--raw-slate-800, 51 65 85)) 100%));
	color: var(--color-text-footer, rgb(var(--raw-slate-100, 241 245 249)));
	padding: var(--space-16, 60px) var(--space-10, 40px) var(--space-8, 30px);
	text-align: center;
	position: relative;
}

/* Subtle top border accent */
footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--color-accent, rgb(34, 211, 238)),
		transparent
	);
	opacity: 0.6;
}

footer .content {
	max-width: var(--container-xl, 1200px);
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

footer p {
	margin: 0 0 var(--space-4, 15px) 0;
	line-height: var(--leading-relaxed, 1.6);
	font-size: var(--text-sm, 14px);
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
}

footer a,
footer a:visited {
	color: var(--color-accent, rgb(34, 211, 238));
	text-decoration: none;
	transition:
		color var(--duration-fast, 100ms) var(--ease-out),
		transform var(--duration-fast, 100ms) var(--ease-out);
	font-weight: var(--font-medium, 500);
}

footer a:hover {
	color: var(--color-accent-light, rgb(103, 232, 249));
	text-decoration: none;
}

.footer_blue {
	color: var(--color-accent, rgb(34, 211, 238));
}

/* Bitcoin wallet styling */
.btc_wallet_address {
	font-family: var(--font-mono, 'JetBrains Mono', monospace);
	background: rgba(var(--raw-slate-700, 71 85 105), 0.5);
	padding: var(--space-2, 8px) var(--space-4, 16px);
	border-radius: var(--radius-md, 8px);
	display: inline-block;
	font-size: var(--text-xs, 12px);
	margin-top: var(--space-2, 8px);
	letter-spacing: var(--tracking-wide, 0.5px);
	word-break: break-all;
	border: 1px solid rgba(var(--raw-slate-600, 100 116 139), 0.3);
	transition: background-color var(--duration-fast, 100ms) var(--ease-out);
}

.btc_wallet_address:hover {
	background: rgba(var(--raw-slate-600, 100 116 139), 0.5);
}

/* Footer grid layout enhanced */

/* Footer bottom */

/* Donate section */

/* ============================================
   PHASE 8: SECONDARY PAGES ENHANCEMENTS
   Modern styling for about, privacy, etc.
   ============================================ */

/* Secondary header */
#secondary_header {
	background: linear-gradient(
		135deg,
		rgb(var(--raw-slate-900, 30 41 59)) 0%,
		rgb(var(--raw-slate-800, 51 65 85)) 100%
	);
	color: var(--color-text-primary, rgb(241, 245, 249));
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

#secondary_header::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--color-accent, rgb(34, 211, 238)),
		transparent
	);
	opacity: 0.5;
}

/* Secondary main content */
.secondary_main {
	width: 690px;
	display: inline-block;
	border-right: 2px solid var(--color-accent-muted, rgba(34, 211, 238, 0.3));
	margin-top: var(--space-5, 20px);
	padding-right: var(--space-4, 16px);
	padding-left: var(--space-4, 16px);
}

.secondary_main h1 {
	color: var(--color-accent, rgb(34, 211, 238));
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-weight: var(--font-bold, 700);
	font-size: var(--text-3xl, 30px);
	margin-bottom: var(--space-4, 16px);
}

.secondary_main h2 {
	color: var(--color-accent, rgb(34, 211, 238));
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-weight: var(--font-semibold, 600);
	font-size: var(--text-xl, 20px);
	margin-top: var(--space-6, 24px);
	margin-bottom: var(--space-3, 12px);
}

.secondary_main p {
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-size: var(--text-base, 16px);
	line-height: var(--leading-relaxed, 1.65);
	color: var(--color-text-primary, #2c3e50);
	margin-bottom: var(--space-4, 16px);
}

.secondary_main strong {
	color: var(--color-accent, rgb(34, 211, 238));
	font-weight: var(--font-semibold, 600);
}

.secondary_main a,
.secondary_main a:visited,
.secondary_main a:active {
	color: var(--color-accent, rgb(34, 211, 238));
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition:
		color var(--duration-fast, 100ms) var(--ease-out),
		border-color var(--duration-fast, 100ms) var(--ease-out);
}

.secondary_main a:hover {
	color: var(--color-accent-light, rgb(103, 232, 249));
	border-bottom-color: var(--color-accent, rgb(34, 211, 238));
}

/* Secondary sidebar */
.secondary_sidebar {
	width: 290px;
	display: inline-block;
	vertical-align: top;
	margin-top: var(--space-4, 16px);
}

.secondary_sidebar h2 {
	color: var(--color-accent, rgb(34, 211, 238));
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	margin-left: var(--space-5, 20px);
	margin-bottom: var(--space-10, 40px);
	font-size: var(--text-xl, 20px);
}

/* Sidebar circle stats */
.sidebar_circle {
	color: var(--color-text-inverse, rgb(30, 41, 59));
	background: linear-gradient(
		135deg,
		var(--color-accent, rgb(34, 211, 238)) 0%,
		var(--color-accent-dim, rgb(22, 178, 202)) 100%
	);
	width: 200px;
	height: 200px;
	border-radius: var(--radius-full, 50%);
	margin-left: var(--space-10, 40px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.15)), 0 0 30px rgba(34, 211, 238, 0.2);
}

.sidebar_circle .circle_number {
	display: block;
	font-family: var(--font-mono, 'JetBrains Mono', monospace);
	font-size: var(--text-3xl, 30px);
	font-weight: var(--font-bold, 700);
	margin: 0;
	padding: 0;
}

.sidebar_circle .circle_text {
	display: block;
	text-align: center;
	padding-top: var(--space-2, 8px);
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-size: var(--text-sm, 14px);
}

.sidebar_circle_separator {
	margin-left: 140px;
	height: 20px;
	width: 2px;
	background: var(--color-accent, rgb(34, 211, 238));
}

/* Try it button */
.sidebar_try_it {
	border-radius: var(--radius-md, 8px);
	background: linear-gradient(
		135deg,
		rgba(var(--raw-slate-700, 71 85 105), 0.9) 0%,
		rgba(var(--raw-slate-800, 51 65 85), 1) 100%
	);
	color: var(--color-text-primary, rgb(241, 245, 249));
	width: 200px;
	height: 50px;
	margin-left: var(--space-10, 40px);
	margin-top: var(--space-5, 20px);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
	transition:
		transform var(--duration-fast, 100ms) var(--ease-out),
		box-shadow var(--duration-fast, 100ms) var(--ease-out);
}

.sidebar_try_it:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.2));
}

.sidebar_try_it a,
.sidebar_try_it a:visited,
.sidebar_try_it a:active {
	text-decoration: none;
	text-transform: uppercase;
	color: var(--color-text-primary, rgb(241, 245, 249));
	font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
	font-size: var(--text-lg, 18px);
	font-weight: var(--font-semibold, 600);
	letter-spacing: var(--tracking-wide, 0.03em);
	line-height: 50px;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   Pillar Page Styles - What is Temporary Email
   ========================================================================== */

.pillar-content {
	max-width: 750px;
}

.pillar-content .lead-paragraph {
	font-size: 1.15rem;
	line-height: 1.75;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-accent-muted, rgba(34, 211, 238, 0.2));
}

/* Table of Contents */
.pillar-content .toc {
	background: var(--color-surface, rgba(51, 65, 85, 0.3));
	border: 1px solid var(--color-accent-muted, rgba(34, 211, 238, 0.2));
	border-radius: 8px;
	padding: 1.5rem 2rem;
	margin-bottom: 2.5rem;
}

.pillar-content .toc h2 {
	font-size: 1.1rem;
	margin-bottom: 1rem;
	margin-top: 0;
}

.pillar-content .toc ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0.5rem;
}

.pillar-content .toc li {
	margin: 0;
}

.pillar-content .toc a {
	display: block;
	padding: 0.35rem 0;
	font-size: 0.95rem;
}

/* Section Styling */
.pillar-content section {
	margin-bottom: 3rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--color-accent-muted, rgba(34, 211, 238, 0.1));
}

.pillar-content section:last-of-type {
	border-bottom: none;
}

.pillar-content h2 {
	margin-top: 0;
	padding-top: 1rem;
	font-size: 1.5rem;
}

.pillar-content h3 {
	color: var(--color-accent, #49a6db);
	font-size: 1.15rem;
	margin-top: 1.5rem;
	margin-bottom: 0.75rem;
}

.pillar-content ol,
.pillar-content ul {
	margin-left: 1.25rem;
	margin-bottom: 1.5rem;
}

.pillar-content li {
	margin-bottom: 0.5rem;
	line-height: 1.65;
}

/* Comparison Table */
.pillar-content .comparison-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0 2rem;
	font-size: 0.95rem;
}

.pillar-content .comparison-table th,
.pillar-content .comparison-table td {
	padding: 0.75rem 1rem;
	text-align: left;
	border: 1px solid var(--color-accent-muted, rgba(34, 211, 238, 0.2));
}

.pillar-content .comparison-table th {
	background: var(--color-surface, rgba(51, 65, 85, 0.5));
	color: var(--color-accent, #49a6db);
	font-weight: 600;
}

.pillar-content .comparison-table tr:nth-child(even) {
	background: var(--color-surface, rgba(51, 65, 85, 0.2));
}

/* FAQ Items */
.pillar-content .faq-item {
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-accent-muted, rgba(34, 211, 238, 0.1));
}

.pillar-content .faq-item:last-child {
	border-bottom: none;
}

.pillar-content .faq-item h3 {
	margin-top: 0;
	color: var(--color-text-primary, #fff);
	font-size: 1.1rem;
}

.pillar-content .faq-item p {
	margin-bottom: 0;
}

/* CTA Section */
.pillar-content .cta-section {
	background: linear-gradient(135deg, var(--color-surface, rgba(51, 65, 85, 0.4)), var(--color-surface, rgba(51, 65, 85, 0.2)));
	border: 1px solid var(--color-accent-muted, rgba(34, 211, 238, 0.3));
	border-radius: 12px;
	padding: 2rem;
	text-align: center;
	margin-top: 2rem;
}

.pillar-content .cta-section h2 {
	padding-top: 0;
	margin-bottom: 0.75rem;
}

.pillar-content .cta-button {
	display: inline-block;
	background: var(--color-btn-legacy, #50597b);
	color: #fff !important;
	padding: 0.875rem 2rem;
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
}

.pillar-content .cta-button:hover {
	background: var(--color-accent, #49a6db);
	transform: translateY(-2px);
}

/* Pillar Sidebar Stats */
.pillar_sidebar .sidebar_stats {
	background: var(--color-surface, rgba(51, 65, 85, 0.3));
	border: 1px solid var(--color-accent-muted, rgba(34, 211, 238, 0.2));
	border-radius: 8px;
	padding: 1.25rem;
	margin-bottom: 2rem;
}

.pillar_sidebar .sidebar_stats h3 {
	color: var(--color-accent, #49a6db);
	margin: 0 0 1rem 0;
	font-size: 1.1rem;
}

.pillar_sidebar .sidebar_stats .stat {
	margin: 0.5rem 0;
	font-size: 0.9rem;
	line-height: 1.5;
}

.pillar_sidebar .sidebar_stats strong {
	color: var(--color-accent, #49a6db);
}

/* ============================================
   FOOTER TRUST SIGNALS (SEO/GEO)
   ============================================ */

/* ============================================
   ABOUT PAGE STATS BOX
   ============================================ */
.about-stats-box {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	background: linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(51, 65, 85, 0.3));
	border: 1px solid rgba(34, 211, 238, 0.3);
	border-radius: 12px;
	padding: 1.5rem;
	margin: 1.5rem 0 2rem 0;
	text-align: center;
}

.about-stats-box .stat-item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.about-stats-box .stat-number {
	font-size: 1.5rem;
	font-weight: 700;
	color: #22d3ee;
	line-height: 1.2;
}

.about-stats-box .stat-label {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* CTA Button for secondary pages */
.secondary_main .cta-button {
	display: inline-block;
	background: var(--color-btn-legacy, #50597b);
	color: #fff !important;
	padding: 0.75rem 1.5rem;
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
}

.secondary_main .cta-button:hover {
	background: var(--color-accent, #49a6db);
	transform: translateY(-2px);
}

/* ============================================
   GEO/AEO OPTIMIZATION COMPONENTS
   TL;DR boxes, Related Content, Timestamps
   ============================================ */

/* TL;DR Quick Answer Box - Featured Snippet Optimization */
.tldr-box {
	background: linear-gradient(135deg, rgba(34, 211, 238, 0.15) 0%, rgba(16, 185, 129, 0.15) 100%);
	border: 2px solid #0891b2;
	border-radius: 12px;
	padding: 1.5rem;
	margin: 1.5rem 0;
}

.tldr-box .tldr-title {
	font-family: var(--font-display, 'JetBrains Mono', monospace);
	font-size: 0.9rem;
	font-weight: 600;
	color: #0891b2;
	margin: 0 0 0.75rem 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.tldr-box p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-text-primary, #1e293b);
}

.tldr-box p strong {
	color: var(--color-text-primary, #0f172a);
}

/* Last Updated Inline Text */
.last-updated-inline {
	font-size: 0.85rem;
	color: var(--color-text-secondary, #64748b);
	margin: 0.5rem 0 1.5rem 0;
	font-style: italic;
}

/* Related Content Section */
.related-content {
	margin: 3rem 0;
	padding: 2rem 0;
	border-top: 1px solid var(--color-border-default, rgba(0, 0, 0, 0.1));
}

.related-content h2 {
	font-family: var(--font-body, 'Space Grotesk', sans-serif);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--color-text-primary, #1e293b);
	margin: 0 0 1.5rem 0;
}

.related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
}

.related-card {
	background: var(--color-bg-elevated, rgba(241, 245, 249, 0.8));
	border: 1px solid var(--color-border-default, rgba(0, 0, 0, 0.1));
	border-radius: 10px;
	padding: 1.25rem;
	text-decoration: none;
	transition: all 0.2s ease;
	display: block;
}

.related-card:hover {
	border-color: #0891b2;
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.related-card .related-icon {
	font-size: 1.5rem;
	display: block;
	margin-bottom: 0.75rem;
}

.related-card h3 {
	font-family: var(--font-body, 'Space Grotesk', sans-serif);
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text-primary, #1e293b);
	margin: 0 0 0.5rem 0;
}

.related-card p {
	font-size: 0.85rem;
	color: var(--color-text-secondary, #64748b);
	margin: 0;
	line-height: 1.5;
}

.related-card:hover h3 {
	color: #0891b2;
}

/* Responsive adjustments for GEO/AEO components */
@media (max-width: 640px) {
	.related-grid {
		grid-template-columns: 1fr;
	}

	.tldr-box {
		padding: 1rem;
	}
}

/* ============================================
   UI/UX IMPROVEMENTS - PHASE 2
   Enhanced visual polish and micro-interactions
   ============================================ */

/* 1. EMAIL DISPLAY ENHANCEMENT - Animated border glow */
.mail_section {
	margin-top: var(--space-6, 24px); /* Space above email box for ad separation */
}

.mail_top_row {
	position: relative;
	/* Note: overflow visible to allow input interactions */
}

.mail_top_row::before {
	content: '';
	position: absolute;
	inset: -1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(34, 211, 238, 0.4) 25%,
		rgba(34, 211, 238, 0.6) 50%,
		rgba(34, 211, 238, 0.4) 75%,
		transparent 100%
	);
	border-radius: inherit;
	z-index: -1;
	opacity: 0;
	pointer-events: none; /* Ensure clicks pass through */
	animation: border-glow-pulse 3s ease-in-out infinite;
}

@keyframes border-glow-pulse {
	0%, 100% { opacity: 0; }
	50% { opacity: 0.6; }
}

.mail_top_row:hover::before {
	opacity: 1;
	animation: none;
}

/* Ensure email input is clickable and selectable with visible highlight */
#main_content .mail_section #mail_address {
	cursor: text;
	user-select: all;
	-webkit-user-select: all;
	position: relative;
	z-index: 1;
}

/* Make selection highlight clearly visible */
#main_content .mail_section #mail_address::selection {
	background: rgba(34, 211, 238, 0.5) !important;
	color: #fff !important;
}

#main_content .mail_section #mail_address::-moz-selection {
	background: rgba(34, 211, 238, 0.5) !important;
	color: #fff !important;
}

/* WebKit also needs specific targeting */
#main_content .mail_section input#mail_address::selection {
	background: rgba(34, 211, 238, 0.5) !important;
	color: #fff !important;
}

/* 2. TIMER VISUAL REFINEMENT - Enhanced depth and shadows */
#main_content .mail_section .counter_number {
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.15),
		0 8px 24px rgba(0, 0, 0, 0.1),
		inset 0 2px 4px rgba(255, 255, 255, 0.9),
		inset 0 -2px 4px rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.8);
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

#main_content .mail_section .counter_number:hover {
	transform: translateY(-2px);
	box-shadow:
		0 6px 16px rgba(0, 0, 0, 0.2),
		0 12px 32px rgba(0, 0, 0, 0.15),
		inset 0 2px 4px rgba(255, 255, 255, 0.9),
		inset 0 -2px 4px rgba(0, 0, 0, 0.05);
}

/* Timer state colors with enhanced glow */
#countdown.timer-state-safe .counter_number {
	border-color: rgba(52, 211, 153, 0.3);
	box-shadow:
		0 4px 12px rgba(52, 211, 153, 0.15),
		0 8px 24px rgba(0, 0, 0, 0.1),
		inset 0 2px 4px rgba(255, 255, 255, 0.9),
		0 0 20px rgba(52, 211, 153, 0.1);
}

#countdown.timer-state-warning .counter_number {
	border-color: rgba(251, 191, 36, 0.4);
	box-shadow:
		0 4px 12px rgba(251, 191, 36, 0.2),
		0 8px 24px rgba(0, 0, 0, 0.1),
		inset 0 2px 4px rgba(255, 255, 255, 0.9),
		0 0 20px rgba(251, 191, 36, 0.15);
}

#countdown.timer-state-danger .counter_number {
	border-color: rgba(248, 113, 113, 0.5);
	box-shadow:
		0 4px 12px rgba(248, 113, 113, 0.25),
		0 8px 24px rgba(0, 0, 0, 0.1),
		inset 0 2px 4px rgba(255, 255, 255, 0.9),
		0 0 25px rgba(248, 113, 113, 0.2);
}

/* 3. EMPTY INBOX STATE POLISH - Enhanced glassmorphism container */
.inbox-empty-state {
	background:
		/* Subtle top glow */
		radial-gradient(ellipse 80% 40% at 50% 0%, rgba(34, 211, 238, 0.15) 0%, transparent 70%),
		/* Solid dark base */
		linear-gradient(180deg, rgba(30, 41, 59, 0.85) 0%, rgba(30, 41, 59, 0.95) 100%);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(34, 211, 238, 0.25);
	border-radius: var(--radius-xl, 16px);
	margin: var(--space-4, 16px) auto;
	max-width: 500px;
	box-shadow:
		0 4px 24px rgba(0, 0, 0, 0.2),
		0 0 40px rgba(34, 211, 238, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.empty-state-icon {
	filter: drop-shadow(0 0 25px rgba(34, 211, 238, 0.4));
}

/* Fix title and subtitle contrast - both need to be light on dark inbox background */
.empty-state-title {
	color: #fff !important;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.empty-state-subtitle {
	color: rgba(255, 255, 255, 0.75) !important;
}

/* Light mode: ensure inbox box stands out */
@media (prefers-color-scheme: light) {
	.inbox-empty-state {
		background:
			radial-gradient(ellipse 80% 40% at 50% 0%, rgba(34, 211, 238, 0.2) 0%, transparent 70%),
			linear-gradient(180deg, rgba(30, 41, 59, 0.92) 0%, rgba(30, 41, 59, 0.98) 100%);
		border-color: rgba(34, 211, 238, 0.35);
		box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), 0 0 40px rgba(34, 211, 238, 0.08);
	}
}

/* 4. EXPLANATION BOX REFINEMENT - Left accent border */
#main_content .explanation {
	border-left: 4px solid var(--color-accent, rgb(34, 211, 238));
	position: relative;
}

#main_content .explanation::before {
	content: '';
	position: absolute;
	left: -4px;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(
		180deg,
		rgb(34, 211, 238) 0%,
		rgb(52, 211, 153) 50%,
		rgb(34, 211, 238) 100%
	);
	border-radius: 4px 0 0 4px;
	opacity: 0.8;
}

/* 5. BUTTON HOVER STATES - Enhanced interactions */
#get_more_time {
	transition:
		transform 0.15s ease-out,
		box-shadow 0.2s ease-out,
		background 0.2s ease;
}

#get_more_time:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow:
		0 8px 24px rgba(34, 211, 238, 0.3),
		0 4px 12px rgba(0, 0, 0, 0.2);
}

#get_more_time:active {
	transform: translateY(-1px) scale(0.99);
	box-shadow:
		0 4px 12px rgba(34, 211, 238, 0.2),
		0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Copy button enhanced success state */
#main_content #copy_address.copy-success {
	animation: copy-success-pulse 0.6s ease-out;
}

@keyframes copy-success-pulse {
	0% { transform: scale(1); }
	30% { transform: scale(1.1); }
	60% { transform: scale(0.95); }
	100% { transform: scale(1); }
}

/* Footer link hover enhancement */
.footer-column a {
	position: relative;
	transition: color 0.2s ease, transform 0.15s ease;
}

.footer-column a:hover {
	transform: translateX(3px);
}

/* Reduced motion: disable all new animations */
/* ============================================
   DARK MODE POLISH - Visual harmony refinements
   ============================================ */

/* 1. Timer digits - soften the bright white for dark mode integration */
@media (prefers-color-scheme: dark) {
	#main_content .mail_section .counter_number {
		background: linear-gradient(
			180deg,
			rgba(241, 245, 249, 0.95) 0%,
			rgba(226, 232, 240, 0.9) 100%
		);
		border: 1px solid rgba(34, 211, 238, 0.2);
		box-shadow:
			0 4px 12px rgba(0, 0, 0, 0.3),
			0 8px 24px rgba(0, 0, 0, 0.2),
			inset 0 2px 4px rgba(255, 255, 255, 0.5),
			0 0 20px rgba(34, 211, 238, 0.05);
	}

	#main_content .mail_section .counter_number span {
		color: rgba(30, 41, 59, 0.9);
	}
}

/* 2. Inbox empty state - add subtle glow for more visual interest */
.inbox-empty-state {
	box-shadow:
		0 4px 24px rgba(0, 0, 0, 0.2),
		0 0 40px rgba(34, 211, 238, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 0 60px rgba(34, 211, 238, 0.03);
	border: 1px solid rgba(34, 211, 238, 0.25);
}

@media (prefers-color-scheme: dark) {
	.inbox-empty-state {
		box-shadow:
			0 4px 24px rgba(0, 0, 0, 0.3),
			0 0 50px rgba(34, 211, 238, 0.08),
			inset 0 1px 0 rgba(255, 255, 255, 0.05),
			0 0 80px rgba(34, 211, 238, 0.04);
		border: 1px solid rgba(34, 211, 238, 0.3);
	}
}

/* 3. Explanation box - subtle background and border for definition */
@media (prefers-color-scheme: dark) {
	#main_content .explanation {
		background: rgba(30, 41, 59, 0.4);
		border: 1px solid rgba(71, 85, 105, 0.3);
		border-left: 4px solid var(--color-accent, rgb(34, 211, 238));
		border-radius: 0 8px 8px 0;
	}
}

/* ============================================
   MOBILE AD/EMAIL SECTION SPACING FIX
   Prevents overlap between ad banner and email section
   ============================================ */

/* Mobile devices: Add clear spacing between ad banner and email section */
@media (max-width: 767px) {
	.mail_section {
		margin-top: var(--space-8, 32px);
		padding: 0 var(--space-3, 12px);
	}

	/* Ensure ad container doesn't interfere with email section */
	.top_banner_ad {
		overflow: hidden;
		margin-bottom: var(--space-4, 16px);
	}

	/* Ensure #banner_ad has proper spacing */
	#banner_ad {
		margin-bottom: var(--space-6, 24px);
	}

	/* Make mail_top_row properly contained */
	.mail_top_row {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Email address input should not overflow */
	#main_content .mail_section .mail_address {
		max-width: calc(100% - var(--space-4, 16px));
		overflow: hidden;
	}

	#main_content .mail_section #mail_address {
		width: 100%;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* Small mobile devices (375px and below) */
@media (max-width: 400px) {
	.mail_section {
		margin-top: var(--space-6, 24px);
		padding: 0 var(--space-2, 8px);
	}

	/* More compact ad spacing on small screens */
	#banner_ad {
		margin-bottom: var(--space-3, 12px);
	}

	/* Tighter layout for email section */
	.mail_top_row {
		padding: var(--space-3, 12px);
		gap: var(--space-2, 8px);
	}

	/* Smaller email input on small screens */
	#main_content .mail_section #mail_address {
		font-size: var(--text-xs, 12px);
		padding: var(--space-2-5, 10px) var(--space-3, 12px);
		letter-spacing: 0;
	}

	/* Compact copy button */
	#main_content #copy_address {
		width: 40px;
		height: 40px;
		min-width: 40px;
	}

	/* Compact inbox count */
	.inbox_count {
		padding: var(--space-2, 8px) var(--space-3, 12px);
		min-width: auto;
	}

	#inbox_count {
		font-size: var(--text-base, 16px);
		margin: 0;
		padding: 0;
	}

	.inbox_count .mail_icon {
		width: 24px;
		height: 18px;
		margin-right: var(--space-2, 8px);
	}

	.inbox_count #inbox_count_number {
		font-size: var(--text-xl, 20px);
	}
}

/* Extra small mobile (320px width - iPhone SE, older devices) */
@media (max-width: 360px) {
	.mail_section {
		padding: 0 var(--space-1, 4px);
	}

	.mail_top_row {
		padding: var(--space-2, 8px);
		gap: var(--space-1-5, 6px);
	}

	#main_content .mail_section #mail_address {
		font-size: 11px;
		padding: var(--space-2, 8px);
	}

	#main_content #copy_address {
		width: 36px;
		height: 36px;
		min-width: 36px;
	}

	/* Stack layout for very small screens if needed */
	.mail_top_row {
		flex-direction: column;
	}

	.mail_top_row > div {
		width: 100%;
	}

	#main_content .mail_section .mail_address {
		width: 100%;
		max-width: 100%;
	}
}

/* ============================================
   CONSOLIDATED: Reduced Motion Preferences
   All animation/transition disabling for users
   who prefer reduced motion (accessibility)
   ============================================ */
@media (prefers-reduced-motion: reduce) {
	/* UX components */
	.ux-toast,
	#copy_address,
	#get_more_time,
	.message_top {
		transition: none;
		animation: none;
	}

	.timer-warning {
		animation: none;
	}

	/* SVG radar animations */
	.radar-sweep,
	.radar-ring,
	.envelope-icon {
		animation: none;
	}
	.radar-ring {
		opacity: 0.5;
	}

	/* Session expired overlay */
	.expired-content,
	.expired-icon {
		animation: none;
	}
	.refresh-session-btn:hover {
		transform: none;
	}

	/* Countdown timer */
	.counter_colon span { animation: none; opacity: 1; }
	#countdown.timer-state-danger .counter_number,
	.timer-state-danger #countdown .counter_number { animation: none; }
	#countdown.timer-state-danger .counter_number::after,
	.timer-state-danger #countdown .counter_number::after { animation: none; opacity: 1; }
	#countdown.timer-state-danger .counter_colon span,
	.timer-state-danger #countdown .counter_colon span { animation: none; opacity: 1; }
	#main_content .mail_section .counter_number {
		transition: color 0.01ms, box-shadow 0.01ms, transform 0.01ms, background 0.01ms;
	}

	/* Email display components */
	.mail_top_row,
	#main_content #copy_address,
	#main_content .mail_section #mail_address,
	.inbox_count,
	#inbox_count_number { transition: none; }
	.mail_top_row:hover { transform: none; }
	#main_content #copy_address:hover { transform: none; }
	#inbox_count_number.highlight { animation: none; }

	/* Background effects */
	#main_content::before {
		animation: none;
		background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
		background-position: 0% 0%, 100% 0%, 50% 50%, 0% 100%, 100% 100%, 0% 0%;
	}

	/* Empty state */
	.empty-state-icon { animation: none; }

	/* Message list */
	#mail_messages .mail_message { transition: none; }
	#mail_messages .mail_message:hover { transform: none; }
	#mail_messages .mail_message_expanded .message_bottom { animation: none; }
	#mail_messages .message_bottom .message_reply,
	#mail_messages .message_bottom .message_forward,
	#mail_messages .message_bottom .message_close { transition: none; }
	#mail_messages .message_bottom .message_reply:hover,
	#mail_messages .message_bottom .message_forward:hover,
	#mail_messages .message_bottom .message_close:hover { transform: none; }

	/* Footer and sidebar */
	footer a:hover,
	.sidebar_try_it:hover {
		transform: none;
	}

	/* Copy success and hover states */
	.mail_top_row::before,
	#main_content #copy_address.copy-success {
		animation: none;
	}
	#get_more_time:hover,
	#main_content .mail_section .counter_number:hover,
	.footer-column a:hover {
		transform: none;
	}
}

/* ============================================
   CONSOLIDATED: Mobile Styles (max-width: 480px)
   All mobile-specific adjustments
   ============================================ */
@media (max-width: 480px) {
	/* UX toast and timer warning */
	.ux-toast {
		top: 10px;
		right: 10px;
		left: 10px;
		text-align: center;
		font-size: 14px;
		padding: 12px 16px;
	}
	.timer-warning {
		font-size: 14px;
		padding: 10px 16px;
		margin: 10px 8px;
	}
	#get_more_time {
		font-size: var(--text-base, 16px);
		padding: var(--space-3, 12px) var(--space-6, 24px);
		min-width: auto;
		width: 100%;
		max-width: 280px;
	}

	/* Session expired overlay */
	.expired-content {
		padding: 40px 30px;
	}
	.expired-icon {
		font-size: 60px;
	}
	.expired-title {
		font-size: 26px;
	}
	.expired-message {
		font-size: 16px;
	}
	.refresh-session-btn {
		padding: 14px 30px;
		font-size: 16px;
	}

	/* Countdown timer */
	#countdown {
		padding: var(--space-2, 8px) var(--space-3, 12px);
	}
	#main_content .mail_section .counter_number {
		width: clamp(42px, 20vw, 60px);
		height: clamp(65px, 30vw, 95px);
		margin-right: var(--space-1, 4px);
	}
	#main_content .mail_section .counter_number span {
		font-size: clamp(26px, 16vw, 44px);
	}
	.counter_colon {
		height: clamp(65px, 30vw, 95px);
	}
	.counter_colon span {
		font-size: clamp(22px, 14vw, 36px);
	}

	/* Email display */
	.mail_top_row {
		padding: var(--space-4, 16px);
		border-radius: var(--radius-lg, 12px);
	}
	#main_content #copy_address {
		width: 48px;
		height: 48px;
	}
	#main_content .mail_section #mail_address {
		font-size: var(--text-sm, 14px);
		letter-spacing: var(--tracking-wide, 0.015em);
	}
	#main_content #copy_address::after {
		top: auto;
		bottom: -40px;
	}
	#main_content #copy_address::before {
		top: auto;
		bottom: -12px;
		border-top-color: transparent;
		border-bottom-color: var(--color-success, rgb(52, 211, 153));
	}

	/* Empty state */
	.inbox-empty-state { padding: var(--space-12, 48px) var(--space-5, 20px); }
	.empty-state-icon {
		width: 100px;
		height: 100px;
		margin-bottom: var(--space-6, 24px);
	}
	.empty-state-title { font-size: var(--text-xl, 20px); }
	.empty-state-subtitle { font-size: var(--text-sm, 14px); }

	/* Message list */
	#mail_messages .mail_message {
		margin-bottom: var(--space-3, 12px);
		border-radius: var(--radius-md, 8px);
	}
	#mail_messages .mail_message:first-of-type { margin-top: var(--space-3, 12px); }
	#mail_messages .message_bottom .message_reply,
	#mail_messages .message_bottom .message_forward,
	#mail_messages .message_bottom .message_close {
		flex: 1;
		justify-content: center;
		min-width: 100px;
	}

	/* Footer */
	footer {
		padding: var(--space-10, 40px) var(--space-5, 20px) var(--space-6, 24px);
	}
	.btc_wallet_address {
		font-size: 10px;
		padding: var(--space-1-5, 6px) var(--space-3, 12px);
		max-width: 90%;
	}

	/* About page stats */
	.about-stats-box {
		grid-template-columns: 1fr;
	}
}

/* ============================================
   CONSOLIDATED: Tablet Styles (max-width: 768px)
   All tablet-specific adjustments
   ============================================ */
@media (max-width: 768px) {
	/* Header */
	header h1,
	header h2 {
		width: 40%;
		margin: 10px 0;
	}
	header h2 {
		margin-top: 10px;
		margin-left: 0;
	}
	#main_content {
		margin-top: 60px;
	}

	/* Countdown timer */
	#countdown {
		padding: var(--space-3, 12px) var(--space-4, 16px);
		gap: var(--space-1, 4px);
	}
	#main_content .mail_section .counter_number {
		width: clamp(50px, 18vw, 75px);
		height: clamp(80px, 28vw, 120px);
		margin-right: var(--space-1-5, 6px);
		border-radius: var(--radius-md, 8px);
	}
	#main_content .mail_section .counter_number span {
		font-size: clamp(32px, 14vw, 56px);
	}
	.counter_colon {
		height: clamp(80px, 28vw, 120px);
	}
	.counter_colon span {
		font-size: clamp(28px, 12vw, 48px);
	}

	/* Background effects - simplified for tablets */
	:root { --bg-animation-duration: 30s; }
	#main_content::before {
		background:
			radial-gradient(ellipse 100% 60% at 50% 30%, var(--bg-mesh-color-1) 0%, transparent 60%),
			radial-gradient(ellipse 80% 80% at 50% 70%, var(--bg-mesh-color-2) 0%, transparent 50%),
			var(--bg-gradient-base);
		background-size: 150% 150%, 140% 140%, 100% 100%;
	}

	/* Message list */
	#mail_messages { padding: 0 var(--space-3, 12px); }
	#mail_messages .message_top {
		flex-wrap: wrap;
		padding: var(--space-3, 12px) var(--space-4, 16px);
		gap: var(--space-2, 8px);
	}
	#mail_messages .mail_message .message_top .small_message_icon_box {
		width: 36px;
		height: 36px;
	}
	#mail_messages .mail_message .message_top .small_message_icon {
		width: 20px;
		height: 20px;
	}
	#mail_messages .mail_message .message_top .small_sender {
		flex: 1;
		font-size: var(--text-sm, 14px);
		order: 1;
	}
	#mail_messages .mail_message .message_top .small_date {
		font-size: var(--text-xs, 12px);
		order: 2;
	}
	#mail_messages .mail_message .message_top .small_subject {
		flex: 0 0 100%;
		order: 3;
		padding-left: calc(36px + var(--space-4, 16px));
		padding-right: 0;
		margin-top: var(--space-1, 4px);
		font-size: var(--text-sm, 14px);
	}
	#mail_messages .mail_message_expanded .message_bottom { padding: var(--space-4, 16px); }
	#mail_messages .message_bottom .message_icons {
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-2, 8px);
		padding-top: var(--space-4, 16px);
		margin-top: var(--space-4, 16px);
	}
	#mail_messages .message_bottom .message_reply,
	#mail_messages .message_bottom .message_forward,
	#mail_messages .message_bottom .message_close {
		padding: var(--space-3, 12px) var(--space-5, 20px);
		font-size: var(--text-sm, 14px);
	}

	/* Secondary pages */
	.secondary_main {
		width: 100%;
		padding: 0 var(--space-4, 16px);
		border-right: none;
	}
	.secondary_sidebar {
		display: none;
	}

	/* Pillar content */
	.pillar-content .toc ul {
		grid-template-columns: 1fr;
	}
	.pillar-content .comparison-table {
		font-size: 0.85rem;
	}
	.pillar-content .comparison-table th,
	.pillar-content .comparison-table td {
		padding: 0.5rem;
	}
	.pillar_sidebar {
		display: block;
		margin-top: 2rem;
	}

	/* About page stats */
	.about-stats-box {
		grid-template-columns: repeat(2, 1fr);
	}
}