/* ===== BK radio — дизайн-система ======================================================
   Единые шрифты, размеры, интервалы, отступы и цвета для главной и /history/.
   Подключается в header.php после всех стилей (шрифты Google Fonts — там же).
   Префикс html body — чтобы перекрыть стили шаблона и компонентов без !important. */

:root {
	/* Шрифты: заголовки — Montserrat Alternates (он и был задуман в шаблоне), текст — Montserrat */
	--bk-font-display: 'Montserrat Alternates', 'Montserrat', Arial, sans-serif;
	--bk-font-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

	/* Шкала размеров: 12 · 14 · 16 · 20 · 28 · 36 */
	--bk-fs-caption: 12px;   /* метки: ON AIR, LIVE, меню, кнопки */
	--bk-fs-small: 14px;     /* подписи, списки, мета */
	--bk-fs-body: 16px;      /* основной текст */
	--bk-fs-lead: 20px;      /* название в карточке «что в эфире» */
	--bk-fs-title: 28px;     /* заголовок раздела [ RESIDENTS ] */
	--bk-fs-page: 36px;      /* заголовок страницы [ БК RADIO STREAMS HISTORY ] */

	/* Межстрочные интервалы: три значения на весь сайт */
	--bk-lh-tight: 1.2;      /* заголовки, метки */
	--bk-lh-list: 1.45;      /* списки, подписи */
	--bk-lh-body: 1.6;       /* абзацы */

	/* Отступы: шаг 8px */
	--bk-sp-1: 4px;
	--bk-sp-2: 8px;
	--bk-sp-3: 16px;
	--bk-sp-4: 24px;
	--bk-sp-5: 32px;
	--bk-sp-6: 48px;
	--bk-sp-7: 64px;         /* между разделами */

	/* Цвета */
	--bk-c-page: #000;       /* под фоновой картинкой: виден, пока фон меняется (угасание) */
	--bk-c-text: #fff;
	--bk-c-muted: rgba(255, 255, 255, 0.75);
	--bk-c-faint: rgba(255, 255, 255, 0.5);
	--bk-c-bracket: rgba(255, 255, 255, 0.35);
	--bk-c-accent: #e33;
	--bk-c-surface: rgba(10, 10, 14, 0.82);
	--bk-c-surface-hover: rgba(34, 34, 44, 0.92);
	--bk-c-border: rgba(255, 255, 255, 0.28);

	--bk-r-card: 8px;
	--bk-r-pill: 999px;
	--bk-w-content: 1120px;
}

/* ----- База --------------------------------------------------------------------- */
html body {
	font-family: var(--bk-font-body);
	font-size: var(--bk-fs-body);
	line-height: var(--bk-lh-body);
	color: var(--bk-c-text);
	background: var(--bk-c-page);   /* вместо фиолетового градиента из template_styles.css */
	overflow-x: hidden;
}
html body p { margin: 0 0 var(--bk-sp-3); }
html body a { color: var(--bk-c-text); }

/* ----- Заголовки: [ TITLE ] ----------------------------------------------------- */
html body h1,
html body h3,
html body .palyer-inner h1,
html body h3.trackTitleHeader {
	font-family: var(--bk-font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: var(--bk-lh-tight);
	color: var(--bk-c-text);
}
html body .palyer-inner h1 {
	font-size: var(--bk-fs-page);
	margin: var(--bk-sp-5) auto var(--bk-sp-4);
	padding: 0;
	overflow-wrap: break-word;   /* длинное слово не распирает страницу */
}
/* На телефоне заголовок страницы — размером заголовка раздела: «РЕДАКТИРОВАНИЕ …» в 36px не помещался */
@media (max-width: 640px) {
	html body .palyer-inner h1 { font-size: var(--bk-fs-title); }
}
html body h3,
html body h3.trackTitleHeader {
	font-size: var(--bk-fs-title);
	margin: var(--bk-sp-7) auto var(--bk-sp-4);
	padding: 0;
}
html body h1:before, html body h1:after,
html body h3:before, html body h3:after {
	color: var(--bk-c-bracket);
	font-weight: 500;
}
html body h1:before, html body h3:before { content: '[ '; }
html body h1:after, html body h3:after { content: ' ]'; }
html body a.history h3 { margin-top: var(--bk-sp-7); }

/* ----- Меню --------------------------------------------------------------------- */
html body .bx-top-nav .bx-nav-1-lvl-link-text {
	font-family: var(--bk-font-body);
	font-size: var(--bk-fs-caption);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: var(--bk-lh-tight);
}

/* Отступы внутри ширины: на страницах с bootstrap (главная, /history/) так и есть, а на /auth/ и других без него
   .body-inner (width 100% + padding) и карточка «что в эфире» были шире экрана телефона */
html body .body-inner,
html body .bkplayer-now,
html body .bkplayer-now * { box-sizing: border-box; }

/* Логотип в меню — по середине строки: на страницах с bootstrap так и было (img { vertical-align: middle }),
   на /auth/, /forum/ и других без него логотип вставал по базовой линии и меню съезжало вниз */
html body .bx-top-nav .menu-logo { vertical-align: middle; }

/* ----- Шапка: логотип и карточка «что в эфире» ----------------------------------- */
html body .bkradiologo {
	display: block;
	max-width: 100%;
	margin: var(--bk-sp-3) auto 0;
}
html body .bkplayer-now {
	max-width: min(520px, 100%);
	margin: var(--bk-sp-3) auto 0;
	padding: var(--bk-sp-2) var(--bk-sp-4) var(--bk-sp-2) var(--bk-sp-2);
	border-radius: var(--bk-r-card);
	background: var(--bk-c-surface);
	font-family: var(--bk-font-body);
}
html body .bkplayer-now:hover { background: var(--bk-c-surface-hover); }
html body .bkplayer-now-label,
html body .bkplayer-live .bkplayer-progress::before {
	font-size: var(--bk-fs-caption);
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: var(--bk-lh-tight);
}
html body .bkplayer-now-label { color: var(--bk-c-accent); margin-bottom: var(--bk-sp-1); }
html body .bkplayer-now .bkplayer-title {
	font-size: var(--bk-fs-lead);
	font-weight: 600;
	line-height: var(--bk-lh-tight);
}
html body .bkplayer-now .bkplayer-subtitle,
html body .bkplayer .bkplayer-subtitle {
	font-size: var(--bk-fs-small);
	line-height: var(--bk-lh-list);
	color: var(--bk-c-muted);
	opacity: 1;
}
html body .playerLink { margin: var(--bk-sp-2) 0 0; }
html body .playerLink a,
html body .playerLink a.noradio {
	font-family: var(--bk-font-body);
	font-size: var(--bk-fs-caption);
	letter-spacing: 0.04em;
	color: var(--bk-c-faint);
}

/* Полоса плеера внизу — те же шрифты */
html body .bkplayer { font-family: var(--bk-font-body); }
html body .bkplayer .bkplayer-title { font-size: var(--bk-fs-body); font-weight: 600; line-height: var(--bk-lh-tight); }

/* ----- Кнопки: одна форма «таблетка» (Show all, Play, BK radio full history) ------ */
html body .artists-more,
html body .bkplayer-item,
html body p > a.history:not(:has(h3)) {
	display: inline-flex;
	align-items: center;
	gap: var(--bk-sp-2);
	padding: 10px 22px;
	border: 1px solid var(--bk-c-border);
	border-radius: var(--bk-r-pill);
	background: var(--bk-c-surface);
	color: var(--bk-c-text);
	font-family: var(--bk-font-body);
	font-size: var(--bk-fs-caption);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: var(--bk-lh-tight);
	text-decoration: none;
}
html body .artists-more:hover,
html body .bkplayer-item:hover,
html body p > a.history:not(:has(h3)):hover {
	border-color: var(--bk-c-text);
	background: var(--bk-c-surface-hover);
	text-decoration: none;
}
html body p > a.history:not(:has(h3)) { margin-top: var(--bk-sp-4); }
html body .artists-more { margin: var(--bk-sp-3) auto 0; }

/* ----- Сетка эфиров (главная и /history/): плитки вплотную, текст на плитке ------- */
html body .bx-newslist-content,
html body .mixinfo {
	font-family: var(--bk-font-body);
	font-size: var(--bk-fs-small);
	line-height: var(--bk-lh-list);
}
html body .bx-newslist-audio { margin: var(--bk-sp-2) 0 var(--bk-sp-3); }
html body .bkplayer-item-tracks { margin: var(--bk-sp-2) 0 0; }
html body .bkplayer-item-tracks button {
	font-family: var(--bk-font-body);
	font-size: var(--bk-fs-small);
	line-height: var(--bk-lh-list);
	color: var(--bk-c-muted);
}

/* Главная: LATEST RECORDINGS (news.list/archive, как на /history/) и PAST STREAMS (news.list/main) — одни классы.
   Стили архива переносят каждую 4-ю (на планшете 3-ю) плитку на новый ряд; PAST STREAMS идут по 6 в ряд. */
html body .past-streams .bx-newslist .bx-newslist-container { clear: none; }

/* ----- Резиденты ---------------------------------------------------------------- */
html body .residents { gap: var(--bk-sp-4); margin: 0 auto; }
html body .residents .resident-name {
	margin-top: var(--bk-sp-2);
	font-size: var(--bk-fs-small);
	font-weight: 600;
	line-height: var(--bk-lh-tight);
}

/* ----- Артисты и гости ----------------------------------------------------------- */
html body .artists-list {
	max-width: var(--bk-w-content);
	margin: 0 auto;
	font-size: var(--bk-fs-small);
	line-height: var(--bk-lh-list);
}
html body .artists-list a { margin: 0 var(--bk-sp-2); color: var(--bk-c-muted); }
html body .artists-list a:hover { color: var(--bk-c-text); }
html body .artists-list.is-collapsed { max-height: calc(6 * var(--bk-lh-list) * 1em); }

/* ----- О нас ------------------------------------------------------------------- */
html body .about {
	max-width: var(--bk-w-content);
	font-family: var(--bk-font-body);
	font-size: var(--bk-fs-body);
	line-height: var(--bk-lh-body);
}
html body .about p {
	margin: 0 0 var(--bk-sp-4);
	padding: 0 var(--bk-sp-3);
	color: var(--bk-c-muted);
	font-family: var(--bk-font-body);
	font-size: var(--bk-fs-body);
	line-height: var(--bk-lh-body);
}

/* ----- /history/: фильтр --------------------------------------------------------- */
html body .bx_filter .bx_filter_parameters_box_title,
html body .bx_filter .bx_filter_audio_label {
	font-family: var(--bk-font-body);
	font-size: var(--bk-fs-small);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 36px;
	color: var(--bk-c-muted);
}
html body .bx_filter .bx_filter_select_text,
html body .bx_filter input[type="text"] {
	font-family: var(--bk-font-body);
	font-size: var(--bk-fs-small);
}

/* ----- /history/: пагинация ------------------------------------------------------ */
html body .bx-pagination { margin: var(--bk-sp-5) 0 0; }   /* снизу отступ задаёт список разделов (.bx_catalog_line) */
html body .bx-pagination .bx-pagination-container ul li span,
html body .bx-pagination .bx-pagination-container ul li a {
	font-family: var(--bk-font-body);
	font-size: var(--bk-fs-small);
	font-weight: 600;
}

/* ----- /history/: список разделов внизу ------------------------------------------ */
/* Стили компонента (catalog.section.list/archive/style.css) задают заголовку line-height 12px при 18px
   и описанию 13px/16px, в том числе для .bx-touch — поэтому селекторы здесь с .bx_catalog_line_ul. */
/* Отступ от плиток эфиров (они float) — как между блоками; без пагинации список прилипал к плиткам */
html body .bx_catalog_line { clear: both; padding-top: var(--bk-sp-7); }

/* Две колонки сеткой, а не float: при разной высоте описаний не остаётся дырок */
html body .bx_catalog_line .bx_catalog_line_ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--bk-sp-5);
	row-gap: var(--bk-sp-5);
	margin: 0;
}
html body .bx_catalog_line .bx_catalog_line_ul li {
	float: none;
	width: auto;
	margin: 0;
}
@media (max-width: 639px) {
	html body .bx_catalog_line .bx_catalog_line_ul { grid-template-columns: minmax(0, 1fr); }
}
html body .bx_catalog_line .bx_catalog_line_ul .bx_catalog_line_title {
	font-family: var(--bk-font-body);
	font-size: var(--bk-fs-body);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: var(--bk-lh-list);
	margin: 0 0 var(--bk-sp-2);
}
html body .bx_catalog_line .bx_catalog_line_ul .bx_catalog_line_title a {
	font-size: inherit;
	line-height: inherit;
	color: var(--bk-c-text);
}
html body h2.bx_catalog_line_title:before,
html body h2.bx_catalog_line_title:after { content: none; }
/* текст — колонкой справа от картинки, не затекает под неё */
html body .bx_catalog_line .bx_catalog_line_ul .bx_catalog_line_title,
html body .bx_catalog_line .bx_catalog_line_ul .bx_catalog_line_description { overflow: hidden; }
html body .bx_catalog_line .bx_catalog_line_ul .bx_catalog_line_img { margin: 0 var(--bk-sp-3) 0 0; }
html body .bx_catalog_line .bx_catalog_line_ul li::after { content: ''; display: block; clear: both; }
@media (max-width: 639px) {
	html body .bx_catalog_line .bx_catalog_line_ul .bx_catalog_line_img { width: 96px; height: 96px; }
}
html body .bx_catalog_line .bx_catalog_line_ul .bx_catalog_line_description {
	font-family: var(--bk-font-body);
	font-size: var(--bk-fs-small);
	line-height: var(--bk-lh-body);
	color: var(--bk-c-muted);
	margin: 0 var(--bk-sp-4) 0 0;
}

/* ----- Поля ввода на всех страницах: тёмная полупрозрачная подложка, как у кнопок ---- */
/* Все текстовые поля (любой type, кроме кнопок, флажков, файлов, ползунков), textarea и select в содержимом
   страницы. !important и отдельные селекторы с #request — из-за template_styles.css:
   form #request input/textarea { background: none!important } (id в селекторе перевешивает). */
html body .body-inner input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
html body .body-inner textarea,
html body .body-inner select,
html body .body-inner form #request input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
html body .body-inner form #request textarea {
	background: var(--bk-c-surface) !important;
	color: var(--bk-c-text);
}
html body .body-inner input::placeholder,
html body .body-inner textarea::placeholder { color: var(--bk-c-faint); opacity: 1; }
html body .body-inner select option { background: #16161c; color: var(--bk-c-text); }

/* ----- Формы входа, регистрации, восстановления пароля (.bx-authform) ------------- */
html body .bx-authform {
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	font-family: var(--bk-font-body);
	font-size: var(--bk-fs-small);
	line-height: var(--bk-lh-list);
	color: var(--bk-c-muted);
}
html body .bx-authform .bx-authform-formgroup-container { margin: 0 0 var(--bk-sp-3); }
html body .bx-authform .bx-authform-label-container {
	margin: 0 0 var(--bk-sp-1);
	text-align: left;
	font-size: var(--bk-fs-caption);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bk-c-faint);
}
html body .bx-authform input[type="text"],
html body .bx-authform input[type="password"],
html body .bx-authform input[type="email"],
html body .bx-authform input[type="tel"] {
	display: block;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 var(--bk-sp-3);
	box-sizing: border-box;
	border: 1px solid var(--bk-c-border);
	border-radius: var(--bk-r-card);
	background: var(--bk-c-surface);
	color: var(--bk-c-text);
	font-family: var(--bk-font-body);
	font-size: var(--bk-fs-body);
	line-height: 1.2;
	box-shadow: none;
	outline: none;
	-webkit-transition: border-color .15s ease;
	transition: border-color .15s ease;
}
html body .bx-authform input[type="text"]:focus,
html body .bx-authform input[type="password"]:focus,
html body .bx-authform input[type="email"]:focus,
html body .bx-authform input[type="tel"]:focus { border-color: var(--bk-c-text); }
html body .bx-authform input::placeholder { color: var(--bk-c-faint); opacity: 1; font-size: var(--bk-fs-small); }
/* подсказка с требованиями к паролю длинная — мельче, чтобы помещалась в поле и на телефоне */
html body .bx-authform input[type="password"]::placeholder { font-size: var(--bk-fs-caption); }
/* автозаполнение браузера не красит поле в белый/жёлтый */
html body .bx-authform input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 100px #16161c inset;
	-webkit-text-fill-color: var(--bk-c-text);
	caret-color: var(--bk-c-text);
}
html body .bx-authform .checkbox { margin: 0; }
html body .bx-authform .checkbox label {
	display: inline-flex;
	align-items: center;
	gap: var(--bk-sp-2);
	margin: 0;
	padding: 0;
	font-size: var(--bk-fs-small);
	font-weight: 400;
	color: var(--bk-c-muted);
	cursor: pointer;
}
html body .bx-authform .checkbox input[type="checkbox"] {
	position: static;
	margin: 0;
	accent-color: var(--bk-c-accent);
	cursor: pointer;
}
/* кнопка — «таблетка», как остальные; перекрывает input[type=submit] из template_styles.css */
html body .bx-authform input[type="submit"],
html body .bx-authform input[type="submit"]:hover,
html body .bx-authform button[type="submit"] {
	display: inline-flex;
	align-items: center;
	width: auto;
	height: auto;
	margin: var(--bk-sp-2) 0 0;
	padding: 12px 32px;
	border: 1px solid var(--bk-c-border);
	border-radius: var(--bk-r-pill);
	background: var(--bk-c-surface);
	color: var(--bk-c-text);
	font-family: var(--bk-font-body);
	font-size: var(--bk-fs-caption);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: var(--bk-lh-tight);
	box-shadow: none;
	cursor: pointer;
	-webkit-transition: background .15s ease, border-color .15s ease;
	transition: background .15s ease, border-color .15s ease;
}
html body .bx-authform input[type="submit"]:hover,
html body .bx-authform button[type="submit"]:hover {
	border-color: var(--bk-c-text);
	background: var(--bk-c-surface-hover);
}
html body .bx-authform a {
	color: var(--bk-c-muted);
	text-decoration: none;
	border-bottom: 1px solid var(--bk-c-border);
}
html body .bx-authform a:hover { color: var(--bk-c-text); border-bottom-color: var(--bk-c-text); }
html body .bx-authform .alert,
html body .bx-authform .errortext { display: block; margin: 0 0 var(--bk-sp-3); padding: 0; border: 0; background: none; color: var(--bk-c-accent); }
html body .bx-authform .bx-authform-psw-protected-desc { color: var(--bk-c-faint); }
/* Восстановление пароля: заголовок формы «Get checkword» дублирует заголовок страницы «Get password» */
html body .bx-authform:has(input[name="TYPE"][value="SEND_PWD"]) > h3.bx-title,
html body .bx-authform:has(input[name="TYPE"][value="SEND_PWD"]) > .bx-authform-content-container,
html body .bx-authform:has(input[name="TYPE"][value="SEND_PWD"]) .bx-authform-note-container { display: none; }   /* и пояснения «Select password change method:», «…sent to you by email.» */
/* Капча регистрации: картинка и поле ввода в одну строку, подпись — над ними */
html body .bx-authform .bx-authform-formgroup-container:has(.bx-captcha) {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: var(--bk-sp-2);
}
html body .bx-authform .bx-authform-formgroup-container:has(.bx-captcha) > .bx-authform-label-container { grid-column: 1 / -1; }
html body .bx-authform .bx-captcha { margin: 0; line-height: 0; }
html body .bx-authform .bx-captcha img { display: block; height: 44px; width: auto; border-radius: var(--bk-r-card); }

/* ----- Заявка артиста (/zayavka/, веб-форма ARTISTREQUEST) ------------------------- */
/* Разметку полей задаёт HTML-шаблон самой веб-формы (хранится в БД, настройки формы): пустые блоки .inputInner,
   <br>, <font color=red>. Оформляем только стилями; селекторы с form[name="ARTISTREQUEST"] перекрывают
   общие «form #request …» из template_styles.css и не задевают форму шаблона mp3 тегов в /services/. */
html body form[name="ARTISTREQUEST"] #request {
	max-width: 560px;
	margin: 0 auto;
	text-align: left;
	font-family: var(--bk-font-body);
	font-size: var(--bk-fs-body);
	line-height: var(--bk-lh-body);
	color: var(--bk-c-muted);
}
/* пустые блоки и блоки из одного <br> — лишние отступы */
html body form[name="ARTISTREQUEST"] #request .inputInner:empty,
html body form[name="ARTISTREQUEST"] #request .inputInner:has(> br:only-child) { display: none; }
html body form[name="ARTISTREQUEST"] #request .inputInner { position: relative; margin: 0 0 var(--bk-sp-3); }
html body form[name="ARTISTREQUEST"] #request .inputInner > br { display: none; }
/* вступление — первый текстовый блок */
html body form[name="ARTISTREQUEST"] #request .inputInner:nth-child(3) {
	margin-bottom: var(--bk-sp-5);
	text-align: center;
	color: var(--bk-c-muted);
}
/* подзаголовки групп: «Artist photo», «Link to artist profile», «Your contacts» (блоки без полей) */
html body form[name="ARTISTREQUEST"] #request .inputInner:not(:nth-child(3)):not(:has(input, textarea, select)) {
	margin: var(--bk-sp-5) 0 var(--bk-sp-2);
	font-size: var(--bk-fs-caption);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: var(--bk-lh-tight);
	color: var(--bk-c-faint);
}
html body form[name="ARTISTREQUEST"] #request .starrequired { color: var(--bk-c-accent); margin-left: 2px; }
/* поля — как в формах входа */
html body form[name="ARTISTREQUEST"] #request input:not([type="submit"]):not([type="file"]):not([type="hidden"]),
html body form[name="ARTISTREQUEST"] #request textarea {
	display: block;
	width: 100%;
	height: 44px;
	margin: 0 0 var(--bk-sp-2);
	padding: 0 var(--bk-sp-3);
	box-sizing: border-box;
	border: 1px solid var(--bk-c-border);
	border-radius: var(--bk-r-card);
	color: var(--bk-c-text);
	font-family: var(--bk-font-body);
	font-size: var(--bk-fs-body);
	letter-spacing: normal;
	line-height: 1.2;
	text-align: left;
	outline: none;
	transition: border-color .15s ease;
}
html body form[name="ARTISTREQUEST"] #request textarea {
	height: auto;
	min-height: 160px;
	padding: 10px var(--bk-sp-3);
	line-height: var(--bk-lh-body);
	resize: vertical;
}
html body form[name="ARTISTREQUEST"] #request input:focus,
html body form[name="ARTISTREQUEST"] #request textarea:focus { border-color: var(--bk-c-text); }
/* дата: прозрачная иконка календаря поверх поля (template_styles.css) — под высоту поля */
html body form[name="ARTISTREQUEST"] #request img.calendar-icon { top: 0; bottom: auto !important; height: 44px !important; }
/* фото: подпись про размер и выбор файла */
html body form[name="ARTISTREQUEST"] #request .inputInner:has(input[type="file"]) > span:first-child {
	display: block;
	margin: 0 0 var(--bk-sp-2);
	font-size: var(--bk-fs-small);
	color: var(--bk-c-faint);
}
html body form[name="ARTISTREQUEST"] #request input[type="file"] {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none !important;
	color: var(--bk-c-muted);
	font-family: var(--bk-font-body);
	font-size: var(--bk-fs-small);
	text-align: left;
}
html body form[name="ARTISTREQUEST"] #request input[type="file"]::file-selector-button {
	margin: 0 var(--bk-sp-3) 0 0;
	padding: 10px 22px;
	border: 1px solid var(--bk-c-border);
	border-radius: var(--bk-r-pill);
	background: var(--bk-c-surface);
	color: var(--bk-c-text);
	font-family: var(--bk-font-body);
	font-size: var(--bk-fs-caption);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}
html body form[name="ARTISTREQUEST"] #request input[type="file"]::file-selector-button:hover { border-color: var(--bk-c-text); background: var(--bk-c-surface-hover); }
/* кнопка «Send» — таблетка */
html body form[name="ARTISTREQUEST"] #request input[type="submit"],
html body form[name="ARTISTREQUEST"] #request input[type="submit"]:hover {
	display: inline-flex;
	width: auto;
	min-height: 0;
	height: auto;
	margin: var(--bk-sp-4) 0 0;
	padding: 12px 40px;
	border: 1px solid var(--bk-c-border);
	border-radius: var(--bk-r-pill);
	background: var(--bk-c-surface) !important;
	color: var(--bk-c-text);
	font-family: var(--bk-font-body);
	font-size: var(--bk-fs-caption);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: var(--bk-lh-tight);
	box-shadow: none;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
html body form[name="ARTISTREQUEST"] #request input[type="submit"]:hover { border-color: var(--bk-c-text); background: var(--bk-c-surface-hover) !important; }
/* ошибки заполнения (выводит компонент над формой) */
html body .palyer-inner .errortext { display: block; max-width: 560px; margin: 0 auto var(--bk-sp-3); color: #ff6b6b; font-family: var(--bk-font-body); font-size: var(--bk-fs-small); text-align: left; }

/* ----- Страница 404 (/404.php) ------------------------------------------------------ */
html body .bk-404 {
	max-width: 640px;
	margin: 0 auto var(--bk-sp-6);
	padding: 0 var(--bk-sp-3);
	text-align: center;
}
html body .bk-404-code {
	font-family: var(--bk-font-display);
	font-weight: 600;
	font-size: clamp(96px, 22vw, 180px);
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--bk-c-bracket);
	margin: 0 0 var(--bk-sp-4);
}
html body .bk-404-text {
	font-size: var(--bk-fs-body);
	line-height: var(--bk-lh-body);
	color: var(--bk-c-muted);
	margin: 0 0 var(--bk-sp-2);
}
html body .bk-404-text-ru { font-size: var(--bk-fs-small); color: var(--bk-c-faint); }
html body .bk-404-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bk-sp-3);
	margin: var(--bk-sp-5) 0 0;
}
html body .bk-404-actions > a.history { margin: 0; }

/* ----- Подвал ------------------------------------------------------------------- */
/* Копирайт прижат к низу окна и на коротких страницах (вход, 404): body — колонка высотой не меньше окна,
   .body-inner занимает свободное место, внутри неё растягивается .palyer-inner, и подвал уходит вниз. Полосу плеера учитывает
   padding-bottom у body (css/bkplayer.css) — box-sizing: border-box. */
html body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	box-sizing: border-box;
}
html body > .body-inner {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}
/* растягивается содержимое страницы, а не отступ подвала: над копирайтом остаются его 64px */
html body > .body-inner > .palyer-inner { flex: 1 0 auto; }
html body > .body-inner > .footer { align-self: stretch; margin-left: 0; margin-right: 0; }
html body .footer { margin: var(--bk-sp-7) auto var(--bk-sp-5); }
html body .footer-copyright {
	margin: var(--bk-sp-3) 0 0;
	font-size: var(--bk-fs-caption);
	line-height: var(--bk-lh-tight);
	letter-spacing: 0.08em;
	color: var(--bk-c-faint);
}