.morning {
  --header-bg: linear-gradient(135deg, #ffffff 0%, #e6fffa 50%, #ebf8ff 100%);
  --header-second-bg: linear-gradient(180deg, #38a169 0%, #2f855a 100%);
  --theme-bg: linear-gradient(45deg, #047857 0%, #065f46 100%);
  --theme-dark-bg: #047857;
  --theme-light-bg: #10b981;
  --btn-bg: linear-gradient(180deg, #10b981 0%, #059669 100%);
  --btn-color: #fff;
  --body-bg: #f4f9f8;
  --body-color: #1e293b;
  --body-odd-bg: #f2f2f2;
  --card-bg: #fff;
  --card-color: #000;
  --card-shadow: 0 4px 12px rgba(6, 95, 70, 0.05);
  --border-color: #e2e8f0;
  --span-color: #10b981;
}

.day {
  --header-bg: linear-gradient(135deg, #ffffff 0%, #f0f7ff 50%, #e0f2fe 100%);
  --header-second-bg: #2563eb;
  --theme-bg: linear-gradient(90deg, #004aa3 0%, #1e3a8a 100%);
  --theme-dark-bg: #004aa3;
  --theme-light-bg: #3b82f6;
  --btn-bg: linear-gradient(180deg, #3b82f6 0%, #004aa3 100%);
  --btn-color: #fefefe;
  --body-bg: #f1f5f9;
  --body-color: #0f172a;
  --body-odd-bg: #f2f2f2;
  --card-bg: #fffffe;
  --card-color: #000;
  --card-shadow: 0 4px 12px rgba(30, 58, 138, 0.06);
  --border-color: #e2e8f0;
  --span-color: #3b82f6;
}

.evening {
  --header-bg: linear-gradient(120deg, #fffdfa 0%, #fff5f5 40%, #fffaf0 100%);
  --header-second-bg: #9b2c2c;
  --theme-bg: #9b2c2c;
  --theme-dark-bg: #cd853f;
  --theme-light-bg: #ea580c;
  --btn-bg: linear-gradient(180deg, #f97316 0%, #ea580c 100%);
  --btn-color: #fff5f5;
  --body-bg: #faf8f5;
  --body-color: #1c1917;
  --body-odd-bg: #fffdfa;
  --card-bg: #fffbeb;
  --card-color: #1c1917;
  --card-shadow: 0 4px 12px rgba(154, 52, 18, 0.05);
  --border-color: #f3f0e6;
  --span-color: #9b2c2c;
}

.night {
  --header-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  --header-second-bg: linear-gradient(180deg, #F87171 0%, #DC2626 100%);
  --theme-bg: linear-gradient(90deg, #1e1b4b 0%, #312e81 100%);
  --theme-dark-bg: #121212;
  --theme-light-bg: #312e81;
  --btn-bg: #1e293b;
  --btn-color: #e2e8f0;
  --body-bg: #0f172a;
  --body-color: #f8fafc;
  --body-odd-bg: #121212;
  --card-bg: linear-gradient(180deg, #14b8a6 0%, #0f766e 100%);
  --card-color: #1e293b;
  --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  --border-color: #334155;
  --span-color: #38bdf8;
}

.theme {
	background: var(--theme-bg);
    color: var(--btn-color);
}

.theme.back { }
.theme.sms { }
.theme.brokers { }

header {
	background: var(--header-bg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	border-bottom: 2px solid var(--theme-dark-bg);
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	font-family: Geometria-ExtraBold, sans-serif;
	
	> a {
		text-decoration: none;
	}
	
	.lh-content {
		flex-grow: 1;
		
		.lh-badge {
			background: var(--header-second-bg);
			color: var(--btn-color);
			font-size: 0.9rem;
			font-weight: 700;
			padding: 1px 6px;
			border-radius: 4px;
		}
		.lh-title {
			font-weight: 800;
			line-height: 1.15;
			margin-top: 2px;
		}
		.lh-subtitle {
			color: #4a5568;
			font-weight: 500;
			span {
				color: var(--span-color);
				font-weight: 700;
			}
		}		
	}
	
	.lh-icon {
		width: 60px;
		height: 60px;		
		background-size: contain;
		background-repeat: no-repeat;
	}
	
	.lh-icon.morning {
		background-image: url(/img/icons/header/morning.webp);
	}
	
	.lh-icon.day {
		background-image: url(/img/icons/header/day.webp);
	}
	
	.lh-icon.evening {
		background-image: url(/img/icons/header/evening.webp);
	}
	
	.lh-icon.night {
		background-image: url(/img/icons/header/night.webp);
	}
	
	button {
		background: var(--header-second-bg);
		color: var(--btn-color);
		font-weight: 700;
		padding: 8px 10px;
		border-radius: 20px;
		white-space: nowrap;
		width: auto;
		display: block;
		font-size: 0.9rem;
	}  
}

@font-face {
  src: url(/font/Geometria-ExtraBold.woff2);
  font-family: Geometria-ExtraBold;
  font-style: normal;
}

@font-face {
  src: url(/font/Montserrat-SemiBold.woff2);
  font-family: Montserrat;
  font-style: normal;
}

body {	
	max-width: 1280px;
	margin: 0 auto;
	padding-left: 1rem;
	padding-right: 1rem;
	background: var(--body-bg);
	color: var(--body-color);
}

section {
	margin-top: 25px;
}

/* cards */
a.offer, .mfo-item > a {
	text-decoration: none;
}

.cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	
	.card-item {
		background: var(--card-bg);
		border: 1px solid var(--border-color);
		box-shadow: var(--card-shadow);
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		gap: 15px;
		color: var(--card-color);
		text-align: center;
		padding: 5px;
		border-radius: 5px;
		overflow: hidden;
		
		img {
			width: 100%;
		}
		
		.header {
			width: 100%;
			padding: 10px 0;
			font-size: 1.05rem;
			border-top: 2px solid var(--theme-dark-bg);
			border-bottom: 2px solid var(--theme-dark-bg);
		}
		
		.card-info {
			font-family: Montserrat, sans-serif;
			font-size: 0.8rem;
			flex-grow: 1;			
			span {
				font-weight: bold;
				color: var(--theme-light-bg);
			}
		}

		.card-info.standart {
			display: flex;
			justify-content: space-between;
			padding: 0 5px;
		}
		
		.card-info .url {
			color: var(--theme-light-bg);
			font-weight: normal;
			text-decoration: underline;
		}
	}
}

button, button.theme {
	background: var(--btn-bg);
    color: var(--btn-color);
	font-size: 1.1rem;
	width: 100%;
	white-space: pre;
	border: none;
	border-radius: 5px;
	margin: auto;
	font-weight: bold;
	padding: 8px 0;
	
	svg {
		vertical-align: middle;
		fill: var(--btn-color);
	}
}

button:not(.secondary):hover {
	opacity: .9;
	transition: .5s;
}

/* mfo */
.mfo {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;	
	
	.mfo-item {
		width: 100%;	
		overflow: hidden;
		border-radius: 5px;
		box-sizing: border-box;	
		background: var(--body-bg);
		border: 1px solid var(--border-color);
		box-shadow: var(--card-shadow);		
		
		table {
			height: 100%;
			width: 100%;
			border-collapse: collapse;
			color: var(--body-color);
			
			tbody tr:nth-child(odd) {
				background: var(--body-odd-bg);
			}
			
			th {
				text-align: center;
				padding: 10px 0;
			}
			
			td {
				padding: 5px 10px;
			}
		}
	}
}

/* calc */
.calc {
	display: flex;
	border-radius: 5px;
	background: var(--card-bg);
	color: var(--card-color);
	border: 1px solid var(--border-color);
	box-shadow: var(--card-shadow);
	font-size: 1.05rem;
	gap: 0 20px;
	
	.label {
		text-align: center;
		
		> div {
			background: var(--btn-bg);
			color: var(--btn-color);
			display: inline-block;
			padding: 5px 20px;
			border-radius: 0 0 5px 5px;
		}
	}
	
	p {
		text-align: justify;
	}
	
	> div {
		width: 50%;
		padding: 0 15px 10px;
		box-sizing: border-box;
	}
	
	.down-text {
		display: flex;
		justify-content: space-between;
	}
	
	table {
		width: 100%;
		text-align: center;
		border-collapse: collapse;
		
		td {
			border-bottom: 1px solid silver;
			white-space: pre;
			width: 20%;
			padding: 5px 0;
		}
		
		td:first-child {
			text-align: left;
		}
		
		td:last-child {
			text-align: right;
		}
	}
	
	input[type='range'] {
		-webkit-appearance: none;
		appearance: none;
		background: var(--theme-light-bg);
		width: 100%;
		height: 10px;
		border-radius: 5px;
	}
	
	input[type='range']::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		background: var(--theme-light-bg);
		height: 25px;
		width: 25px;
		border-radius: 50%;
		border: 1px dashed var(--theme-dark-bg);
		cursor: pointer;
		box-shadow: 3px 2px 10px 1px rgba(45,45,45,.2);
	}
	
	input[type='range']::-moz-range-thumb {
		height: 25px;
		width: 25px;
		border-radius: 50%;
		border: 2px solid #ccc;
		background-color: #fff;
		cursor: pointer;
	}
}

/* footer */
.info > h3 {
	font-size: 1.1rem;
	padding: 10px 15px;
	box-shadow: var(--card-shadow);
}
footer a {color: var(--body-color)}

/* dialog */
dialog.message {
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	box-shadow: var(--card-shadow);
	text-align: center;
	font-size: 1.1rem;
	min-width: 300px;
	border-radius: 5px;
	outline: none;
	
	form > div {
		display: flex;
		gap: 20px;
		justify-content: space-between;
		align-items: center;
	}
	
	button {
		background: var(--btn-bg);
		color: var(--btn-color);
		font-size: 1rem;
		outline: none;
	}
	
	button.primary { }

	button.secondary {
		opacity: 0.75;
	}
} 

dialog.message.toast {
	font-size: 0.95rem;
	min-width: 200px;
	position: fixed;    
    margin: 0;
	top: 20px;
    left: 20px;
	z-index: 99;
	
	form svg {
		fill: var(--theme-light-bg);
		.pu-ton {
			fill: var(--theme-dark-bg);
		}
		.pu-void {
			fill: var(--body-bg);
		}
	}
	
	form img {
		width: 35px;
		height: 35px;
	}
	
	button {
		font-size: 0.9rem;
	}
}

/* adaptive */
@media screen and (max-width: 991px) {
	
	section {
		margin-top: 15px;
	}
	
	.cards {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;		
	}
	
	.mfo {
		grid-template-columns: repeat(2, 1fr);		
	}
	
	.calc {
		flex-direction: column;
		
		> div {
			width: 100%;
		}
	}
	
	dialog.message.toast {
		left: 0;
		margin: 0 auto;
	}
}

@media screen and (max-width: 767px) {
	body {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
	
	header {
		margin-left: -0.5rem;
		margin-right: -0.5rem;
		padding: 7px 6px;
		
		.lh-content {
			.lh-badge {
				font-size: 0.75rem;
			}
			.lh-title {
				font-size: 0.9rem;
			}
			.lh-subtitle {
				font-size: 0.75rem;
			}
		}
		
		.lh-icon {
			width: 55px;
			height: 55px;
		}
		
		button {
			font-size: 0.75rem;
			padding: 6px 8px;
		}
	}
	
	.cards {
		grid-template-columns: repeat(2, 1fr);		
		gap: 10px;
		
		.card-info.standart {
			justify-content: center;
		}
		
		.card-info.standart > div:nth-child(1) {
			display: none;
		}
		
		.card-item button {
			font-size: 0.9rem;
		}
	}
	
	.mfo {
		grid-template-columns: repeat(1, 1fr);		
	}
	
	.info > h3 {
		margin-left: -0.5rem;
		margin-right: -0.5rem;
	}	
}