/* Локальный вариабельный шрифт Inter: */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('/fonts/inter-variable.woff2') format('woff2');
}

/* Локальный курсивный шрифт Inter: */

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url('/fonts/inter-variable-italic.woff2') format('woff2');
}

/* Локальный шрифт JetBrains Mono: */

@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url('/fonts/jetbrains-mono-variable-cyrillic.woff2') format('woff2'),
		url('/fonts/jetbrains-mono-variable-latin.woff2') format('woff2'),
		url('/fonts/jetbrains-mono-variable-cyrillic-ext.woff2') format('woff2'),
		url('/fonts/jetbrains-mono-variable-latin-ext.woff2') format('woff2');
}

/* Сброс отступов и базовая модель блока */

html, body {
	margin: 0;
	padding: 0;
}

* {
	box-sizing: border-box;
}

b, strong, th, h1, h2, h3, h4, h5, h6, optgroup, button {
	font-weight: 400;
}

/* Палитра нового стиля снята с фонового кадра */

:root {
	--ink: #14100D;
	--glass-1: rgba(34, 27, 22, .38);
	--glass-2: rgba(20, 16, 13, .52);
	--glass-3: rgba(11, 9, 7, .66);
	--edge: rgba(255, 236, 214, .18);
	--edge-soft: rgba(255, 236, 214, .10);
	--edge-subtle: rgba(255, 236, 214, .08);
	--bone: #FFFFFF;
	--taupe: #EDE6DD;
	--mute: rgba(255, 255, 255, .72);
	--amber: #f5b041;
	--ember: #F2A65A;
	--cognac: #B4593A;
	--dusk: #ADC3DC;
	--error: #FFB4B4;
	--lux-a: #8DF4FF;
	--lux-b: #2F6BFF;
	--lux-c: #6B27F5;
	--r-shell: 32px;
	--r-card: 22px;
	--r-block: 18px;
	--r-code: 14px;
	--r-pill: 999px;
	--seam: 0 0 14px 2px rgba(242, 166, 90, .45);
}

/* Базовая типографика страницы */

body {
	font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
	font-weight: 400;
	color: var(--bone);
	background-color: var(--ink);
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}

/* Тёплый фоновой кадр с оранжевой подсветкой и затемнением */

body::before {
	content: '';
	position: fixed;
	inset: -3%;
	background-color: #100C0A;
	background-image:
		linear-gradient(rgba(10, 7, 5, .40), rgba(10, 7, 5, .48)),
		radial-gradient(78% 66% at 20% 80%, rgba(242, 166, 90, .18), transparent 62%),
		var(--custom-background-url, url('/images/background.jpg?v=2'));
	background-size: cover, cover, cover;
	background-position: center, center, center 42%;
	background-repeat: no-repeat;
	transform: scale(1.03);
	z-index: -1;
}

/* Плейсхолдеры полей в тёплом тоне */

::placeholder {
	color: rgba(255, 255, 255, .62);
	opacity: 1;
}

/* Универсальная скрытие элементов */

.hidden-element {
	display: none !important;
}

/* Кнопки основного действия: белая стеклянная пилюля */

.primary-button {
	display: inline-block;
	padding: 13px 30px;
	border: 1px solid rgba(255, 255, 255, .85);
	border-radius: var(--r-pill);
	background-color: rgba(255, 255, 255, .92);
	color: #1B120A;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
	transition: background .25s;
}

.primary-button:hover {
	background-color: #ffffff;
}

.primary-button:disabled {
	background-color: rgba(255, 255, 255, .35);
	cursor: default;
}

/* Кнопки второстепенного действия: прозрачная пилюля с рамкой */

.ghost-button {
	display: inline-block;
	padding: 12px 22px;
	border: 1px solid var(--edge);
	border-radius: var(--r-pill);
	background-color: transparent;
	color: var(--bone);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 400;
	cursor: pointer;
	transition: background .25s, border-color .25s;
}

.ghost-button:hover {
	background-color: rgba(255, 236, 214, .08);
	border-color: rgba(255, 236, 214, .28);
}

/* Кнопка без фона только с иконкой */

.icon-only-button {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: none;
	border-radius: var(--r-pill);
	background-color: transparent;
	cursor: pointer;
	transition: color .25s, background .25s;
}

.icon-only-button:hover {
	background-color: rgba(255, 236, 214, .1);
}

/* Круглая кнопка действия в поле ввода */

.round-icon-button {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border: none;
	border-radius: 50%;
	background-color: var(--glass-1);
	cursor: pointer;
	padding: 0;
	transition: background .25s;
}

.round-icon-button:hover {
	background-color: rgba(255, 236, 214, .12);
}

.round-icon-button:disabled {
	background-color: rgba(255, 236, 214, .04);
	cursor: default;
}

/* Группа кнопки микрофона со стрелкой режима */

.voice-button-group {
	position: relative;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
}

/* Маленькая кнопка-стрелка рядом с круглой кнопкой */

.small-arrow-button {
	width: 18px;
	height: 18px;
	display: grid;
	place-items: center;
	position: absolute;
	right: -7px;
	bottom: -5px;
	border: none;
	border-radius: 50%;
	background-color: rgba(243, 237, 228, .22);
	cursor: pointer;
	padding: 0;
	z-index: 2;
	transition: background .25s;
}

.small-arrow-button:hover {
	background-color: rgba(243, 237, 228, .28);
}

/* Иконки внутри кнопок */

.button-icon {
	width: 17px;
	height: 17px;
	vertical-align: -3px;
	margin-right: 8px;
}

.action-icon {
	width: 20px;
	height: 20px;
	display: block;
	margin: 0 auto;
}

.arrow-icon {
	width: 12px;
	height: 12px;
	display: block;
	margin: 0 auto;
}

.header-icon {
	width: 20px;
	height: 20px;
	display: block;
}

/* Поля ввода текста */

.text-input-base {
	padding: 12px 16px;
	border: 1px solid var(--edge-soft);
	border-radius: var(--r-card);
	background-color: var(--glass-2);
	color: var(--bone);
	font-family: inherit;
	font-size: 14px;
}

.text-input-base:focus {
	outline: none;
	border-color: rgba(242, 166, 90, .42);
}

/* Сообщения об ошибках */

.error-text {
	color: var(--error);
	font-size: 13px;
}

/* Единый базовый стеклянный контейнер UIKit */

.ui-glass-panel {
	background-color: var(--glass-2);
	border: 1px solid var(--edge-soft);
	border-radius: 12px;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

/* Акцентная кнопка интерфейса UIKit */

.ui-button-accent {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border: 1px solid rgba(255, 255, 255, .85);
	border-radius: 8px;
	background-color: rgba(255, 255, 255, .92);
	color: #1B120A;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
	transition: background-color .2s, opacity .2s;
}

.ui-button-accent:hover {
	background-color: #ffffff;
}

.ui-button-accent:disabled {
	opacity: .4;
	cursor: default;
}

/* Вторичная стеклянная кнопка интерфейса UIKit */

.ui-button-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border: 1px solid var(--edge);
	border-radius: 8px;
	background-color: rgba(255, 236, 214, .04);
	color: var(--bone);
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	cursor: pointer;
	transition: background-color .2s, border-color .2s;
}

.ui-button-secondary:hover {
	background-color: rgba(255, 236, 214, .1);
	border-color: rgba(255, 236, 214, .3);
}

/* Деструктивная кнопка удаления интерфейса UIKit */

.ui-button-destructive {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border: 1px solid rgba(255, 100, 100, .35);
	border-radius: 8px;
	background-color: rgba(255, 60, 60, .12);
	color: #FFB4B4;
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	cursor: pointer;
	transition: background-color .2s, border-color .2s;
}

.ui-button-destructive:hover {
	background-color: rgba(255, 60, 60, .22);
	border-color: rgba(255, 100, 100, .55);
}

/* Стеклянное поле ввода текста интерфейса UIKit */

.ui-input-field {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--edge-soft);
	border-radius: 8px;
	background-color: var(--glass-3);
	color: var(--bone);
	font-family: inherit;
	font-size: 14px;
	transition: border-color .2s;
}

.ui-input-field:focus {
	outline: none;
	border-color: rgba(242, 166, 90, .45);
}

/* Переключатель тумблера интерфейса UIKit */

.ui-toggle-switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
	flex-shrink: 0;
}

.ui-toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* Ползунок тумблера интерфейса UIKit */

.ui-toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, .15);
	border: 1px solid var(--edge-soft);
	border-radius: 50px;
	transition: background-color .25s, border-color .25s;
}

.ui-toggle-slider::before {
	position: absolute;
	content: '';
	height: 18px;
	width: 18px;
	left: 2px;
	bottom: 2px;
	background-color: #ffffff;
	border-radius: 50%;
	transition: transform .25s;
}

.ui-toggle-switch input:checked + .ui-toggle-slider {
	background-color: var(--ember);
	border-color: rgba(242, 166, 90, .6);
}

.ui-toggle-switch input:checked + .ui-toggle-slider::before {
	transform: translateX(20px);
}

/* Индикатор прогресса интерфейса UIKit */

.ui-progress-track {
	width: 100%;
	height: 6px;
	background-color: rgba(255, 255, 255, .1);
	border-radius: 6px;
	overflow: hidden;
}

/* Заполнение полосы прогресса интерфейса UIKit */

.ui-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--ember), var(--amber));
	border-radius: 6px;
	transition: width .3s ease;
}

/* Компактный информационный бейдж интерфейса UIKit */

.ui-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 400;
	border: 1px solid var(--edge-subtle);
	background-color: rgba(255, 255, 255, .06);
	color: var(--taupe);
}