/* Fonts & Variables */
@import url('https://fonts.googleapis.com/css2?family=Inter+Display:wght@400;500;600&family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap');

:root {
	--text-primary: #000000;
	--text-secondary: #666666;
	--bg-primary: #ffffff;
	--border-primary: #e6e6e6;
	--bg-controls: #f2f2f2;
	--bg-tab-active: #f2f2f2;
	--font-display: 'Inter Display', sans-serif;
	--font-sans: 'Inter', sans-serif;

	/* Button Colors */
	--button-bg: #000000;
	--button-text: #ffffff;
	--button-hover: #0d0d0d;
}

@media (prefers-color-scheme: dark) {
	:root {
		--text-primary: #ffffff;
		--text-secondary: #999999;
		--bg-primary: #000000;
		--border-primary: #262626;
		--bg-controls: #191919;
		--bg-tab-active: #191919;

		/* Button Colors */
		--button-bg: #ffffff;
		--button-text: #000000;
		--button-hover: #f2f2f2;
	}
}

/* Reset Styles */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	display: flex;
	flex-direction: column;
	min-width: 360px;
	min-height: 100vh;
	background-color: var(--bg-primary);
	color: var(--text-primary);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.32px;
	-webkit-font-smoothing: antialiased;
}

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

/* Base Typography */
p {
	margin-bottom: 16px;
}

.p {
	margin-bottom: 0;
}

/* Header */
.header {
	width: 100%;
	padding: 24px 32px;
	background-color: var(--bg-primary);
}

.header__logo a {
	font-weight: 600;
	font-size: 32px;
	line-height: 40px;
	color: var(--text-primary);
	text-decoration: none;
	letter-spacing: -0.64px;
}

/* Main Layout */
.main {
	flex: 1;
	width: 100%;
	max-width: 768px;
	margin: 0 auto;
}

.main__title {
	font-family: var(--font-display);
	font-size: 48px;
	font-weight: 600;
	letter-spacing: -0.64px;
	line-height: 56px;
	text-align: center;
	border-bottom: 1px solid var(--border-primary);
	padding-bottom: 24px;
	margin-bottom: 24px;
}

/* Buttons */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--button-bg);
	color: var(--button-text);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.32px;
	font-weight: 600;
	border: none;
	border-radius: 24px;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 0.2s,
		color 0.2s;
}

.button--generate {
	padding: 12px 32px;
	height: 48px;
}

.button:hover {
	background-color: var(--button-hover);
}

/* Generator Controls */
.generator {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.generator__tabs {
	display: flex;
	background-color: var(--bg-primary);
	border: solid 1px var(--border-primary);
	padding: 4px;
	gap: 4px;
	border-radius: 24px;
}

.generator__tab-btn {
	flex: 1;
	background: none;
	border: none;
	padding: 8px 16px;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.32px;
	font-weight: 600;
	color: var(--text-primary);
	cursor: pointer;
	border-radius: 20px;
	transition: background-color 0.2s;
}

.generator__tab-btn--active,
.generator__tab-btn:hover {
	background-color: var(--bg-tab-active);
}

.generator__actions {
	display: flex;
	gap: 16px;
}

/* Counter */
.counter {
	display: flex;
	align-items: center;
	background-color: var(--bg-primary);
	border: solid 1px var(--border-primary);
	border-radius: 24px;
	padding: 4px;
	gap: 8px;
	flex: 1;
}

.counter__btn {
	background: none;
	border: none;
	width: 40px;
	height: 40px;
	font-size: 16px;
	cursor: pointer;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 20px;
}

.counter__btn:hover {
	background-color: var(--bg-controls);
}

.counter__input {
	flex: 1;
	border: none;
	background: none;
	text-align: center;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.32px;
	color: var(--text-primary);
	width: 100%;
	-moz-appearance: textfield;
}

.counter__input::-webkit-outer-spin-button,
.counter__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Output Section */
.output {
	margin: 24px 0;
}

.output__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	min-height: 24px;
}

.output__stats {
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.32px;
	color: var(--text-secondary);
}

.output__copy-btn {
	background: none;
	border: none;
	color: var(--text-primary);
	cursor: pointer;
	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 20px;
}

.output__copy-btn:hover {
	background-color: var(--bg-controls);
}

/* FAQ Content */
.faq__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.faq__question {
	font-family: var(--font-display);
	font-size: 24px;
	line-height: 32px;
	letter-spacing: -0.48px;
	font-weight: 600;
	margin-bottom: 12px;
}

/* Info Blocks */
.info-block {
	display: flex;
	flex-direction: column;
}

.info-block__text {
	margin-bottom: 16px;
}

/* Footer */
.footer {
	width: 100%;
	padding: 16px 32px;
	background-color: var(--bg-primary);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 32px;
	position: relative;
}

/* Линия с фиксированными отступами от краев экрана */
.footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 32px;
	right: 32px;
	height: 1px;
	background-color: var(--border-primary);
}

.footer__copy {
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.32px;
	color: var(--text-secondary);
}

.footer__nav {
	display: flex;
	gap: 8px 32px;
}

.footer__nav a {
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.32px;
	color: var(--text-primary);
	text-decoration: none;
}

.footer__nav a:hover {
	text-decoration: underline;
}

/* Scrollbar */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
	background-color: var(--bg-controls);
	border-radius: 4px;
	border: 2px solid var(--bg-primary);
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--border-primary);
}

/* Media Queries */
@media (max-width: 832px) {
	.main {
		padding: 0 32px 8px 32px;
	}
}

@media (max-width: 500px) {
	.main__title {
		text-align: left;
	}

	.footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding: 16px 32px;
	}

	.footer__nav {
		flex-direction: column;
		gap: 8px;
	}
}

/* Lists & Links in Info Blocks & FAQ */
.info-block ul,
.faq ul {
	margin-bottom: 16px;
	padding-left: 24px;
}

.info-block ul:last-child,
.faq ul:last-child {
	margin-bottom: 0;
}

.info-block li,
.faq li {
	margin-bottom: 8px;
}

.info-block li:last-child,
.faq li:last-child {
	margin-bottom: 0;
}

.info-block a,
.faq a {
	color: var(--text-primary);
	text-decoration: underline;
}

.info-block a:hover,
.faq a:hover {
	color: var(--text-secondary);
}