/* ==========================================================================
   Knigi.ws | knigi2 | модуль super_lists, профиль, история, окно входа
   Подключается ДО knigi2.css (токены и базовые .k-* берутся оттуда), поэтому
   селекторы здесь на ступень специфичнее. Цвета только из токенов темы,
   без фиолетового. Иконки: inline SVG в шаблонах или маски ниже.

   Оглавление
   1. Кнопка «Добавить в список» и выпадающее меню (страница книги)
   2. Подсказки tippy и тосты SweetAlert под тему
   3. Страница «Мои списки»: шапка, вкладки, поиск, полка, карточки, состояния
   4. Профиль пользователя (userinfo.tpl) и формы
   5. Всплывающая карточка профиля (profile_popup.tpl)
   6. История просмотров (youwatch.tpl)
   7. Окно входа и кабинет (login.tpl)
   ========================================================================== */


/* 1. КНОПКА «ДОБАВИТЬ В СПИСОК» И МЕНЮ
   Разметку {my-list-selected} и {my-list} выдаёт модуль. JS опирается на
   классы .watchlist_parent, .watchlist_btn, .watchlist_btn_success,
   .delete-watchlist, .super__watchlist-select, #dropdown_watchlist, .show_it.
   -------------------------------------------------------------------------- */
.watchlist_parent { position: relative; width: 100%; }

.super__watchlist-menu { display: flex; margin-top: 12px; }
.super__watchlist-select,
.super__watchlist-btn {
	display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
	border: 1px solid var(--line); background: transparent; color: var(--text);
	font: inherit; font-size: 15px; font-weight: 500; line-height: 1.2; cursor: pointer;
	transition: background-color 140ms ease, border-color 140ms ease, transform 140ms var(--ease);
}
.super__watchlist-select { flex: 1 1 auto; min-width: 0; border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
.super__watchlist-btn { flex: 0 0 44px; justify-content: center; padding: 0; border-radius: 0 var(--radius) var(--radius) 0; }
.super__watchlist-select:hover,
.super__watchlist-btn:hover { background: var(--hover); color: var(--text); box-shadow: none; }
.super__watchlist-select:active, .super__watchlist-btn:active { transform: translateY(1px); }
.super__watchlist-select.watchlist_btn_success { border-color: var(--accent-text); }
.super__watchlist-select.watchlist_btn_success + .super__watchlist-btn { border-color: var(--accent-text); }

/* Иконки модуля (<i class="fa ...">): вместо шрифта FA рисуем маской */
.super__watchlist-select i, .super__watchlist-btn i, .dropdown-content li i {
	flex: 0 0 18px; width: 18px; height: 18px; margin: 0; font-size: 0; line-height: 0; color: inherit;
	background: currentColor; -webkit-mask: var(--ico-mark) center / contain no-repeat; mask: var(--ico-mark) center / contain no-repeat;
	--ico-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-6-4-6 4z'/%3E%3C/svg%3E");
}
.super__watchlist-btn i {
	--ico-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.dropdown-content li i { display: none; }
.super__watchlist-select.watchlist_btn_success i { color: var(--ribbon); }

.dropdown-content {
	display: none; opacity: 0; position: absolute; left: 0; top: calc(100% + 6px); z-index: 30;
	min-width: 220px; max-width: calc(100vw - 32px); max-height: 70vh; margin: 0; padding: 6px; overflow-y: auto;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.dropdown-content.show_it { display: block; opacity: 1; width: max-content; animation: k-wl-pop 140ms var(--ease); }
@keyframes k-wl-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dropdown-content li { min-height: 44px; margin: 0; color: var(--text); cursor: pointer; text-align: left; }
.dropdown-content li > a, .dropdown-content li > span {
	display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px;
	border-radius: var(--radius); color: var(--text); font-size: 15px; font-weight: 400; line-height: 1.3;
	transition: background-color 140ms ease;
}
.dropdown-content li > a:hover { background: var(--hover); color: var(--text); }
.dropdown-content li.dropdown-title { min-height: 36px; cursor: default; }
.dropdown-content li.dropdown-title, .dropdown-title { padding: 8px 12px 4px; color: var(--muted); font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.watchlist_parent .dropdown-content li.active a { color: var(--accent-text); font-weight: 500; }
.watchlist_parent .dropdown-content li.delete-watchlist { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }
.watchlist_parent .dropdown-content li.delete-watchlist a { color: var(--danger); }
.watchlist_parent .dropdown-content li a.watchlist_btn_success { color: var(--accent-text); font-weight: 500; }
.watchlist_parent .dropdown-content li a.watchlist_btn_success::after {
	content: ""; margin-left: auto; width: 8px; height: 16px; background: var(--ribbon);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}
@media (max-width: 700px) {
	.dropdown-content.show_it { width: auto; min-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .dropdown-content.show_it { animation: none; } }

/* Подпись статуса на карточке (старый класс модуля, цвета из токенов) */
.anime-item__watch-status {
	position: absolute; left: 0; top: 0; width: 100%; padding: 2px 6px; text-align: center;
	background: var(--surface2); color: var(--text); font-size: 13px; border-radius: 6px 6px 0 0;
}
.anime-item__watch-status.seen { background: var(--ribbon); color: var(--on-accent); }


/* 2. ПОДСКАЗКИ TIPPY И ТОСТЫ SWEETALERT
   Корень tippy и swal лежит в <body>, токены берутся с <html data-theme>.
   -------------------------------------------------------------------------- */
.tippy-box, .tippy-box[data-theme~='white'] {
	background: var(--surface); color: var(--text); border: 1px solid var(--line);
	border-radius: var(--radius-lg); box-shadow: var(--shadow); font-family: var(--font); font-size: 14px; line-height: 1.4;
}
.tippy-box[data-theme~='white'] > .tippy-content { padding: 6px; }
.tippy-box > .tippy-arrow { display: none; }
.tippy-box a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.tippy-box .dropdown-content li > a { min-height: 44px; }

html body .swal2-popup.swal2-toast {
	background: var(--surface); color: var(--text); border: 1px solid var(--line);
	border-radius: var(--radius-lg); box-shadow: var(--shadow); font-family: var(--font);
}
html body .swal2-popup.swal2-toast .swal2-title { color: var(--text); font-size: 15px; font-weight: 500; }
html body .swal2-popup.swal2-toast .swal2-timer-progress-bar { background: var(--ribbon); }


/* 3. СТРАНИЦА «МОИ СПИСКИ»
   #dle-content получает класс .k-books (сетка 4 / 2 колонки из knigi2.css),
   поэтому всё, что не карточка, растягиваем на всю ширину.
   -------------------------------------------------------------------------- */
.k-books > .k-wl, .k-books > .k-pagination, .k-books > #bottom-nav, .k-books > #pagination,
.k-books > .berrors, .k-books > .k-alert, .k-books > .k-empty, .k-books > p { grid-column: 1 / -1; }

.k-wl { display: flex; flex-direction: column; gap: 24px; margin-bottom: 8px; }
.k-wl__head { display: flex; flex-direction: column; gap: 4px; }
.k-wl__who { margin: 0; color: var(--muted); font-size: 15px; }

/* Полка. Базу даёт .k-shelf/.k-spine из knigi2.css, здесь только подгонка:
   ленточка свисает ниже полки, поэтому линия полки рисуется фоном, а у
   прокручиваемого контейнера оставлен запас под ленточку. */
.k-wl .k-shelf {
	min-height: 262px; padding: 12px 12px 26px; border-bottom: 0; align-items: flex-end;
	background: linear-gradient(var(--line), var(--line)) no-repeat left bottom 22px / 100% 4px;
	scrollbar-width: thin;
}
.k-wl .k-shelf > li { max-width: 64px; }
.k-wl .k-spine {
	justify-content: flex-start; padding: 12px 0; color: var(--cloth-text);
	height: var(--spine-h, 200px);
}
.k-wl .k-spine__title { max-height: 100%; font-size: 16px; }
.k-wl .k-spine .k-ribbon { left: 58%; bottom: -22px; }
.k-wl .k-spine--current { --spine-h: 240px; }
.k-wl__shelf { display: flex; flex-direction: column; gap: 10px; }
.k-wl__shelf[hidden] { display: none; }
.k-wl__legend { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.k-wl__legend .k-ribbon--static { flex: 0 0 8px; height: 16px; width: 8px; }

/* Вкладки списков: {list_navigation} выдаёт <a>, внутри <span> со счётчиком */
.k-wl-tabs, .watchlist__sort-types {
	display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0;
	border-bottom: 1px solid var(--border); background: none; box-shadow: none; border-radius: 0; overflow-x: auto; position: static; float: none;
}
.k-wl-tabs__list, .k-wl-tabs ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; float: none; overflow: visible; }
.k-wl-tabs li { display: contents; float: none; width: auto; padding: 0; }
.k-wl-tabs a, .watchlist__sort-types a {
	display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; float: none; width: auto;
	min-height: 44px; margin: 0; padding: 0 12px; border: 0; box-shadow: inset 0 -2px 0 transparent;
	border-radius: var(--radius) var(--radius) 0 0; background: transparent; color: var(--muted);
	font-size: 16px; font-weight: 400; line-height: 1.2; text-align: left;
	transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.k-wl-tabs a span, .watchlist__sort-types a span {
	margin: 0; align-self: auto; color: var(--muted); font-size: 14px; font-weight: 400;
}
.k-wl-tabs a:hover, .watchlist__sort-types a:hover { background: var(--hover); color: var(--text); }
.k-wl-tabs a.selected, .k-wl-tabs a[aria-current="page"], .watchlist__sort-types a.watchlist__sort-active,
.watchlist__sort-active, .k-wl-tabs a.watchlist__sort-active {
	background: transparent; color: var(--text); font-weight: 500; box-shadow: inset 0 -2px 0 var(--accent-text);
}
.watchlist__sort-active { color: var(--text) !important; }

/* Поиск и сортировка */
.k-wl__tools, .watchlist__header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.k-wl .watchlist__search { flex: 1 1 240px; width: auto; min-width: 0; margin: 0; padding: 0 12px; height: 44px; border: 1px solid var(--ctl) !important; border-radius: var(--radius); }
.k-wl .sort-block { display: flex; margin: 0; flex: 0 0 auto; }
.k-wl .sort-block select { min-width: 200px; }
@media (max-width: 719px) {
	.k-wl .sort-block, .k-wl .sort-block select { width: 100%; }
}

/* Карточка списка: карточка книги + действия под ней */
.k-wl-item { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.k-wl-item > .k-wl-card { min-width: 0; }
.k-wl-item.is-moving { opacity: .55; pointer-events: none; }
.k-wl-actions { display: flex; flex-direction: column; gap: 8px; }
.k-wl-actions select { width: 100%; font-size: 15px; background-color: var(--surface); }
.k-wl-actions .k-btn { width: 100%; font-size: 15px; }
.k-wl-progress { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.k-wl-progress .k-progress { flex: 1 1 auto; }

/* Состояния: загрузка, ошибка, пусто */
.k-wl-state { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 620px; padding: 8px 0 16px; }
.k-wl-state[hidden], .k-wl-skel[hidden] { display: none; }
.k-wl-state__title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.k-wl-state p { margin: 0; color: var(--muted); }
.k-wl-state--error { padding: 24px; border: 1px solid var(--danger); border-radius: var(--radius-lg); color: var(--danger); }
.k-wl-state--error .k-wl-state__title { color: var(--text); }
.k-wl-state--error svg { display: block; }
.k-wl-state--error .k-btn { color: var(--on-accent); }
@media (max-width: 719px) { .k-wl-state--error { padding: 16px; } }

.k-wl-skel { display: flex; flex-direction: column; gap: 24px; }
.k-wl-skel i { display: block; background: var(--chip); animation: k-wl-pulse 1.3s ease-in-out infinite; }
.k-wl-skel__shelf { display: flex; align-items: flex-end; gap: 4px; height: 240px; padding: 0 12px; box-shadow: inset 0 -4px 0 var(--line); }
.k-wl-skel__shelf i { flex: 1 1 0; max-width: 56px; border-radius: 3px 3px 0 0; }
.k-wl-skel__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; }
.k-wl-skel__cards > div { display: flex; flex-direction: column; gap: 8px; }
.k-wl-skel__cover { aspect-ratio: 2 / 3; border-radius: 6px; }
.k-wl-skel__line { height: 14px; width: 86%; border-radius: 5px; }
.k-wl-skel__line--s { width: 50%; height: 12px; }
@keyframes k-wl-pulse { 50% { opacity: .45; } }
.k-wl.is-loading ~ .k-wl-item, .k-wl.is-loading ~ .watchlist-item { opacity: .45; }
@media (max-width: 719px) {
	.k-wl .k-shelf { min-height: 214px; }
	.k-wl .k-spine { height: calc(var(--spine-h, 200px) * .76); }
	.k-wl .k-spine--current { --spine-h: 232px; }
	.k-wl .k-spine__title { font-size: 14px; }
	.k-wl-skel__shelf { height: 170px; }
	.k-wl-skel__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.k-wl-skel__cards > div:nth-child(n+3) { display: none; }
	.k-wl-state__title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .k-wl-skel i { animation: none; opacity: .7; } }


/* 4. ПРОФИЛЬ ПОЛЬЗОВАТЕЛЯ (userinfo.tpl) И ФОРМЫ
   -------------------------------------------------------------------------- */
.k-profile { display: flex; flex-direction: column; gap: 24px; }
.k-profile__head {
	display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 24px;
	border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
}
.k-profile__av { position: relative; flex: 0 0 96px; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--chip); }
.k-profile__av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.k-profile__id { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.k-profile__eyebrow { margin: 0; color: var(--muted); font-size: 14px; }
.k-profile__name { font-size: 30px; line-height: 1.15; overflow-wrap: anywhere; }
.k-profile__group { margin: 0; color: var(--muted); font-size: 15px; }
.k-profile__online { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 14px; }
.k-profile__online::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ctl); }
.k-profile__online.is-on { color: var(--success); }
.k-profile__online.is-on::before { background: var(--success); }
.k-profile__btns { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 1 auto; }
.k-profile__btns:empty { display: none; }
.k-profile__btns a {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px;
	border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); font-size: 15px; font-weight: 500;
	transition: background-color 140ms ease;
}
.k-profile__btns a:hover { background: var(--hover); color: var(--text); }

.k-profile__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.k-profile__stat { padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.k-profile__stat b { display: block; font-size: 28px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.k-profile__stat span { color: var(--muted); font-size: 14px; }

.k-profile__meta { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.k-profile__meta li { padding: 12px 20px; font-size: 15px; overflow-wrap: anywhere; }
.k-profile__meta li + li { border-top: 1px solid var(--border); }
.k-profile__meta a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.k-profile__meta a:hover { text-decoration-thickness: 2px; }
.k-profile__meta li span { color: var(--muted); }

/* Списки в профиле: полоса долей и легенда */
.k-pl { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.k-pl__title { margin: 0 0 12px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.k-pl__title a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); }
.k-pl__title a:hover { color: var(--accent-text); }
.k-pl__bar { display: flex; height: 10px; border-radius: 3px; overflow: hidden; background: var(--chip); }
.k-pl__bar > div { height: 100%; }
.k-pl__types { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; }
.k-pl__type {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: var(--radius);
	color: var(--text); font-size: 15px; transition: background-color 140ms ease;
}
.k-pl__type:hover { background: var(--hover); color: var(--text); }
.k-pl__type::before { content: ""; flex: 0 0 6px; width: 6px; height: 18px; border-radius: 1px; background: var(--c, var(--spine-5)); }
.k-pl__type b { color: var(--muted); font-weight: 400; }
.k-pl--watching { --c: var(--spine-3); }
.k-pl--will-watch { --c: var(--spine-1); }
.k-pl--seen { --c: var(--ribbon); }
.k-pl--abandoned { --c: var(--spine-5); }
.k-pl--favourite { --c: var(--spine-4); }
.k-pl__bar .k-pl--watching, .k-pl__bar .k-pl--will-watch, .k-pl__bar .k-pl--seen,
.k-pl__bar .k-pl--abandoned, .k-pl__bar .k-pl--favourite { background: var(--c); }

/* Форма редактирования профиля */
.k-form { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.k-form__title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.k-field { display: flex; flex-direction: column; gap: 6px; }
.k-field > label, .k-field__label { color: var(--muted); font-size: 14px; }
.k-field select { width: 100%; }
.k-field textarea { min-height: 120px; }
.k-field__hint { margin: 0; color: var(--muted); font-size: 14px; }
.k-field__warn { margin: 0; padding: 10px 12px; border: 1px solid var(--danger); border-radius: var(--radius); color: var(--text); font-size: 14px; }
.k-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; }
.k-check label { cursor: pointer; }
.k-form .tableform, .k-form .tableform tbody, .k-form .tableform tr, .k-form .tableform td, .k-form .tableform th { display: block; width: 100%; border: 0; padding: 0; }
.k-form .tableform tr { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.k-form .tableform td:first-child, .k-form .tableform .label { color: var(--muted); font-size: 14px; }
.k-form__submit { display: flex; gap: 12px; padding-top: 4px; }

@media (max-width: 719px) {
	.k-profile__head { padding: 16px; gap: 12px 16px; }
	.k-profile__av { flex-basis: 72px; width: 72px; height: 72px; }
	.k-profile__name { font-size: 24px; }
	.k-profile__btns { width: 100%; }
	.k-profile__btns a { flex: 1 1 140px; }
	.k-profile__meta li { padding: 12px 16px; }
	.k-pl, .k-form { padding: 16px; }
}


/* 5. ВСПЛЫВАЮЩАЯ КАРТОЧКА ПРОФИЛЯ (profile_popup.tpl)
   -------------------------------------------------------------------------- */
.k-upop { display: flex; gap: 16px; padding: 4px; color: var(--text); font-size: 15px; }
.k-upop__side { flex: 0 0 72px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.k-upop__av { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--chip); }
.k-upop__av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.k-upop__state { margin: 0; color: var(--muted); font-size: 13px; }
.k-upop__state.is-on { color: var(--success); }
.k-upop__list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.k-upop__list li { color: var(--muted); overflow-wrap: anywhere; }
.k-upop__list b { color: var(--text); font-weight: 500; }
.k-upop__list a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) { .k-upop { flex-direction: column; } .k-upop__side { flex-direction: row; flex-basis: auto; } }


/* 6. ИСТОРИЯ ПРОСМОТРОВ (youwatch.tpl)
   -------------------------------------------------------------------------- */
.k-history { display: flex; flex-direction: column; gap: 20px; }
.k-history .k-books > .berrors, .k-history .k-books > .k-alert, .k-history .k-books > .k-pagination,
.k-history .k-books > #bottom-nav, .k-history .k-books > p, .k-history .k-books > .k-empty { grid-column: 1 / -1; }
.k-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 620px; padding: 8px 0 16px; }
.k-empty[hidden] { display: none; }
.k-empty h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.k-empty p { margin: 0; color: var(--muted); }


/* 7. ОКНО ВХОДА И КАБИНЕТ (login.tpl)
   Каркас .login-overlay / .login-box / .login-close и их JS живут в knigi2.css
   и libs.js. Здесь только содержимое окна.
   -------------------------------------------------------------------------- */
.login-box .login-close .far::before { content: "\00d7"; font-family: var(--font); font-weight: 400; font-size: 28px; line-height: 1; }
.login-box .login-close .far { display: inline-block; line-height: 1; }
.login-box .login-title { padding-right: 36px; padding-left: 36px; }
.login-box .login-who { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 16px; text-align: center; }
.login-box .login-who .login-title { margin: 0; padding: 0; }
.login-box .login-avatar { margin-bottom: 0; }
.login-box .login-sub { margin: 0; color: var(--muted); font-size: 14px; }
.login-box .login-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.login-box .login-field label { color: var(--muted); font-size: 14px; }
.login-box .login-btn button { width: 100%; }
.login-box .login-btm { align-items: center; }
.login-box .login-menu { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; border: 0; gap: 4px; }
.login-box .login-menu li { border: 0; }
.login-box .login-menu a {
	justify-content: flex-start; gap: 10px; min-height: 48px; padding: 6px 10px; border-radius: var(--radius);
	color: var(--text); font-size: 15px; text-align: left; line-height: 1.25;
}
.login-box .login-menu a:hover { background: var(--hover); }
.login-box .login-menu svg { flex: 0 0 18px; color: var(--muted); }
.login-box .login-menu a:hover svg { color: var(--accent-text); }
.login-box .login-menu .k-pm { margin-left: auto; min-width: 24px; padding: 0 6px; border-radius: 99px; background: var(--chip); color: var(--text); font-size: 12px; text-align: center; line-height: 20px; }
.login-box .login-menu li.is-exit { grid-column: 1 / -1; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }
.login-box .login-admin { margin: 0 0 12px; }
.login-box .login-soc-title { margin: 20px 0 12px; }
.login-box .login-soc-btns { flex-wrap: wrap; }
.login-box .login-soc-btns a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 50%; }
@media (max-width: 480px) {
	.login-box { padding: 24px 16px; }
	.login-box .login-menu { grid-template-columns: 1fr; }
}

/* hidden должен работать и на элементах с display: grid / flex */
.k-books[hidden], .k-wl__tools[hidden], .k-wl-actions[hidden], #k-wl-empty-a[hidden] { display: none; }
.k-check:empty, .k-field:empty { display: none; }

/* Профиль: блок плагина Knigi Lists Profile (4 списка сайта) */
.k-pl__total { margin-left: 6px; color: var(--muted); font-weight: 400; font-size: 15px; }
.k-pl__dot { display: none; }
.k-pl__seg--1 { --c: var(--spine-3); background: var(--c); }
.k-pl__seg--2 { --c: var(--spine-1); background: var(--c); }
.k-pl__seg--3 { --c: var(--spine-4); background: var(--c); }
.k-pl__seg--4 { --c: var(--spine-2); background: var(--c); }
.k-pl__types > .k-pl__type:nth-child(1) { --c: var(--spine-3); }
.k-pl__types > .k-pl__type:nth-child(2) { --c: var(--spine-1); }
.k-pl__types > .k-pl__type:nth-child(3) { --c: var(--spine-4); }
.k-pl__types > .k-pl__type:nth-child(4) { --c: var(--spine-2); }