/* =====================================================================
   ZEN — a calm, trustworthy crypto-earning theme layer, inspired by
   zenfaucet.com. Loaded AFTER style.min.css / bootstrap.min.css.
   Re-skins every existing class with a teal / emerald / sky gradient
   identity, glassmorphism surfaces, the Poppins typeface, and a
   light/dark mode — without touching any page markup, IDs, or PHP logic.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root,
html[data-theme="light"] {
	--bg: #f5faf9;
	--bg-grid: rgba(13, 148, 136, .05);
	--surface: #ffffff;
	--surface-2: #eaf6f3;
	--surface-glass: rgba(255, 255, 255, .7);
	--border: #dbece7;
	--text: #0b201c;
	--text-muted: #5c746e;
	--nav-bg: rgba(255, 255, 255, .78);
	--footer-bg: #08211d;
	--footer-text: #a9d6cd;

	--violet: #0d9488;
	--violet-dark: #0f766e;
	--cyan: #0ea5e9;
	--magenta: #22c55e;
	--gradient-1: linear-gradient(135deg, #0d9488 0%, #22c55e 50%, #0ea5e9 100%);
	--gradient-2: linear-gradient(135deg, #0ea5e9 0%, #0d9488 100%);
	--gradient-text: linear-gradient(90deg, #0d9488, #22c55e 45%, #0ea5e9 90%);

	--success: #16a34a;
	--danger: #f43f5e;
	--warning: #f59e0b;
	--info: #0ea5e9;

	--shadow-sm: 0 2px 10px rgba(13, 148, 136, .07);
	--shadow-md: 0 12px 32px rgba(13, 148, 136, .10);
	--shadow-glow: 0 8px 30px rgba(13, 148, 136, .25);
	--radius: 18px;
	--radius-sm: 12px;
}

html[data-theme="dark"] {
	--bg: #061412;
	--bg-grid: rgba(45, 212, 191, .10);
	--surface: #0c211e;
	--surface-2: #123330;
	--surface-glass: rgba(12, 33, 30, .6);
	--border: #1c3d38;
	--text: #eafbf7;
	--text-muted: #92b8b0;
	--nav-bg: rgba(6, 20, 18, .72);
	--footer-bg: #030d0b;
	--footer-text: #7fb3a9;

	--violet: #2dd4bf;
	--violet-dark: #14b8a6;
	--cyan: #38bdf8;
	--magenta: #4ade80;
	--gradient-1: linear-gradient(135deg, #2dd4bf 0%, #4ade80 50%, #38bdf8 100%);
	--gradient-2: linear-gradient(135deg, #38bdf8 0%, #2dd4bf 100%);
	--gradient-text: linear-gradient(90deg, #2dd4bf, #4ade80 45%, #38bdf8 90%);

	--success: #34d399;
	--danger: #fb7185;
	--warning: #fbbf24;
	--info: #38bdf8;

	--shadow-sm: 0 2px 10px rgba(0, 0, 0, .4);
	--shadow-md: 0 16px 40px rgba(0, 0, 0, .5);
	--shadow-glow: 0 8px 34px rgba(45, 212, 191, .35);
	--radius: 18px;
	--radius-sm: 12px;
}

* { box-sizing: border-box; }

html, body {
	background: var(--bg) !important;
	background-image:
		linear-gradient(var(--bg-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px) !important;
	background-size: 42px 42px !important;
}

body {
	color: var(--text) !important;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
	transition: background-color .25s ease, color .25s ease;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Poppins', sans-serif !important;
	font-weight: 700 !important;
	letter-spacing: -.02em;
	color: var(--text);
}

a { color: var(--violet); }
a:hover, a:focus { color: var(--magenta); }

::selection { background: var(--violet); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: var(--gradient-2); border-radius: 10px; }

/* ===================== Top navigation ===================== */
.topmenu {
	background: var(--nav-bg) !important;
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	border-bottom: 1px solid var(--border);
	box-shadow: var(--shadow-sm);
	position: sticky;
	top: 0;
	z-index: 999;
}
.topmenu li a {
	color: var(--text) !important;
	font-weight: 600 !important;
	letter-spacing: .01em;
	border-radius: 999px;
	transition: all .2s ease;
}
.topmenu li a:hover {
	color: #fff !important;
	background: var(--gradient-1);
}

.top-bar {
	background: var(--gradient-1) !important;
	background-size: 200% 200% !important;
	animation: aurora-shift 8s ease infinite;
	color: #fff !important;
	font-weight: 600;
	letter-spacing: .02em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

@keyframes aurora-shift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* Theme toggle */
.theme-toggle-btn {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 999px;
	width: 38px;
	height: 38px;
	margin-top: 8px;
	color: var(--text);
	cursor: pointer;
	transition: all .2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-sm);
}
.theme-toggle-btn:hover {
	transform: translateY(-2px) rotate(-8deg);
	box-shadow: var(--shadow-glow);
}
.theme-icon-dark { display: none; }
html[data-theme="dark"] .theme-icon-light { display: none; }
html[data-theme="dark"] .theme-icon-dark { display: inline-block; }

/* ===================== Hero ===================== */
.top-bg {
	position: relative;
	overflow: hidden;
	background: radial-gradient(ellipse 80% 60% at 20% -10%, rgba(13, 148, 136, .35), transparent 60%),
				radial-gradient(ellipse 70% 50% at 90% 10%, rgba(14, 165, 233, .3), transparent 55%),
				radial-gradient(ellipse 60% 50% at 50% 100%, rgba(34, 197, 94, .22), transparent 55%),
				#051512;
}
.top-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
	background-size: 24px 24px;
	pointer-events: none;
}
.top-bg-dark { opacity: .35 !important; }

.top-bg h1 {
	font-weight: 800 !important;
	letter-spacing: -.03em;
	background: var(--gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 2px 24px rgba(13, 148, 136, .35));
}
.top-bg p { color: #cfc9e8 !important; }

.logo-block { position: relative; z-index: 2; }

.input-mine input, .input-mine select {
	background: rgba(255, 255, 255, .98) !important;
	border: 1px solid transparent !important;
	border-radius: var(--radius-sm) !important;
	box-shadow: 0 0 0 1px rgba(13, 148, 136, .18), var(--shadow-sm) !important;
	color: #16121f !important;
}
.input-mine input:focus, .input-mine select:focus {
	box-shadow: 0 0 0 3px rgba(13, 148, 136, .3) !important;
	outline: none;
}

.input-mine button, .head-login .login-but button {
	background: var(--gradient-1) !important;
	background-size: 200% 200% !important;
	border: 0 !important;
	border-radius: var(--radius-sm) !important;
	font-weight: 700;
	letter-spacing: .02em;
	box-shadow: var(--shadow-glow);
	transition: all .25s ease;
}
.input-mine button:hover, .head-login .login-but button:hover {
	background-position: 100% 0 !important;
	transform: translateY(-2px);
}
.head-login .login-but2 button {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, .35) !important;
	border-radius: var(--radius-sm) !important;
	backdrop-filter: blur(6px);
}
.head-login .login-but2 button:hover { background: rgba(255, 255, 255, .1) !important; }

/* ===================== Content surfaces ===================== */
.serv-price, .wrapper { background: transparent; }
.serv-price h2, .mine-result h2, .serv-mine h2 {
	background: var(--gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	-webkit-text-fill-color: transparent;
	display: inline-block;
}

.serv-price .price-box,
.white-box,
.account-box,
.banner-box,
.faucet,
.faq-box .faq-item,
.contact-box,
.mine-result {
	background: var(--surface-glass) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--border);
	border-radius: var(--radius) !important;
	box-shadow: var(--shadow-md) !important;
	color: var(--text);
	position: relative;
	overflow: hidden;
}
.serv-price .price-box::before,
.faq-box .faq-item::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--gradient-1);
}
.serv-price .price-box {
	transition: transform .25s ease, box-shadow .25s ease;
}
.serv-price .price-box:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-glow) !important;
}
.serv-price .price-box h3 {
	background: var(--gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	-webkit-text-fill-color: transparent;
	font-weight: 700 !important;
}

.faq-box .faq-item h2 {
	background: var(--surface-2) !important;
	color: var(--text) !important;
	font-family: 'Poppins', sans-serif !important;
}

.serv-price .price-button,
.mine-result .result-button,
.faucet button,
.contact-box button {
	background: var(--gradient-1) !important;
	background-size: 200% 200% !important;
	border: none !important;
	border-radius: var(--radius-sm) !important;
	font-weight: 700;
	letter-spacing: .02em;
	box-shadow: var(--shadow-glow);
	transition: all .25s ease;
}
.serv-price .price-button:hover,
.mine-result .result-button:hover,
.faucet button:hover,
.contact-box button:hover {
	background-position: 100% 0 !important;
	transform: translateY(-2px);
	border-bottom: none !important;
}
.serv-price .price-button-mars {
	background: var(--surface-2) !important;
	color: var(--text) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
}
.serv-price .price-button-mars:hover { border-color: var(--violet) !important; }

.mine-result { background: var(--surface-2) !important; box-shadow: none !important; }
.mine-result span {
	background: var(--surface) !important;
	color: var(--text) !important;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm) !important;
}

.contact-box input, .contact-box textarea {
	background: var(--surface) !important;
	color: var(--text) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
}
.contact-box input:focus, .contact-box textarea:focus {
	border-color: var(--violet) !important;
	box-shadow: 0 0 0 3px rgba(13, 148, 136, .18) !important;
	outline: none;
}

/* ===================== Tabs ===================== */
.panel-heading { border-bottom: 1px solid var(--border); }
.nav > li > a {
	background: var(--surface-2) !important;
	color: var(--text) !important;
	border-radius: 999px !important;
	font-weight: 600;
	margin: 4px 4px 4px 0 !important;
	transition: all .2s ease;
}
.nav > li.active > a, .nav > li > a:hover {
	background: var(--gradient-1) !important;
	color: #fff !important;
	box-shadow: var(--shadow-glow);
}

/* ===================== Tables ===================== */
.table, table { color: var(--text) !important; background: transparent; }
.table-bordered, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th,
.table-bordered > thead > tr > th {
	border-color: var(--border) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--surface-2) !important; }
.table > thead > tr > th {
	background: var(--surface-2) !important;
	color: var(--text) !important;
	font-family: 'Poppins', sans-serif;
	border-bottom: 2px solid var(--violet) !important;
}
.table-responsive {
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--border);
}

/* ===================== Forms (frontend) ===================== */
.form-control, input[type=text], input[type=email], input[type=password], input[type=number], textarea, select {
	background: var(--surface) !important;
	color: var(--text) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
}
.form-control:focus {
	border-color: var(--violet) !important;
	box-shadow: 0 0 0 3px rgba(13, 148, 136, .2) !important;
}

/* ===================== Buttons ===================== */
.btn { border-radius: var(--radius-sm) !important; font-weight: 700; letter-spacing: .01em; border: none !important; transition: all .2s ease; }
.btn-success { background: linear-gradient(135deg, var(--success), #059669) !important; }
.btn-warning { background: linear-gradient(135deg, var(--warning), #d97706) !important; color: #fff !important; }
.btn-danger  { background: linear-gradient(135deg, var(--danger), #e11d48) !important; }
.btn-info    { background: linear-gradient(135deg, var(--info), var(--violet)) !important; }
.btn-primary { background: var(--gradient-1) !important; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* ===================== Alerts / labels ===================== */
.alert { border-radius: var(--radius-sm) !important; border: 1px solid transparent !important; }
.alert-success { background: rgba(16, 185, 129, .12) !important; color: var(--success) !important; }
.alert-danger  { background: rgba(244, 63, 94, .12) !important; color: var(--danger) !important; }
.alert-warning { background: rgba(245, 158, 11, .14) !important; color: var(--warning) !important; }
.alert-info    { background: rgba(6, 182, 212, .12) !important; color: var(--info) !important; }

.label { border-radius: 999px !important; font-weight: 600; padding: 4px 10px; }
.label-success { background: var(--success) !important; }
.label-danger  { background: var(--danger) !important; }
.label-warning { background: var(--warning) !important; }
.label-info    { background: var(--info) !important; }

/* ===================== Referral box ===================== */
.referral-link {
	background: var(--surface-glass) !important;
	backdrop-filter: blur(10px);
	border: 1px solid var(--border) !important;
	border-radius: var(--radius) !important;
	position: relative;
	overflow: hidden;
}
.referral-link::before {
	content: '';
	position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: var(--gradient-1);
}
.referral-link h4 {
	background: var(--surface-2) !important;
	color: var(--text) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
}

/* ===================== Footer ===================== */
.footer {
	background: var(--footer-bg) !important;
	color: var(--footer-text) !important;
	border-top: 1px solid rgba(13, 148, 136, .2);
}

.payouts-box .coin, .payouts-box .tab-title, .faucet .coin {
	background: var(--gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	-webkit-text-fill-color: transparent;
	font-weight: 700;
}

/* ===================== Misc / logo pulse ===================== */
.log-mine span, .log-mine2 span {
	background: var(--gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	-webkit-text-fill-color: transparent;
}

.wrapper.white-box { background: transparent !important; }
.wrapper.white-box .faq-box .faq-item { background: var(--surface-glass) !important; }

@media (max-width: 767px) {
	html, body { background-size: 28px 28px !important; }
}