/* «Дизайнер сайтов» — кабинет. Опирается на общие кнопки .hub-btn из cabinet.css,
   здесь только своё: бриф, карточки вариантов, стопка экранов, список проектов. */

.hub-wd {
	--wd-accent: #2547D6;
	--wd-line: #e3e6ec;
	--wd-muted: #6b7280;
	max-width: 1100px;
}

/* Заголовки без тяжёлого начертания: в интерфейсе жирный текст должен быть
   редким исключением, иначе страница выглядит крикливо. */
.hub-wd-h {
	margin: 28px 0 14px;
	font-size: 17px;
	font-weight: 600;
}

/* --- Бриф --- */
/* Сегментированный переключатель — аккуратнее подчёркиваний и сразу читается
   как выбор одного из двух сценариев.
   ⚠️ Стиль .hub-wd-tabs/.hub-wd-tab переехал в ядро (assets/cabinet.css) и
   задаётся там же, где .hub-tabs-nav/.hub-tab-btn Вёрстальщика — одним общим
   правилом на оба класса. Здесь копии быть не должно: модульный CSS грузится
   после ядра и перебил бы его, а именно из-за таких копий вид и разъехался. */

.hub-wd-controls select {
	max-width: 280px;
}

/* Описание сервиса на публичной странице — свёрнуто, чтобы не оттеснять форму */
.hub-wd-about > summary {
	cursor: pointer;
	font-weight: 600;
	padding: 8px 0;
}

.hub-wd-row {
	margin-bottom: 16px;
}
.hub-wd-row label {
	display: block;
	margin-bottom: 5px;
	font-weight: 600;
	font-size: 14px;
}
.hub-wd-row input[type="text"],
.hub-wd-row input[type="url"],
.hub-wd-row textarea,
.hub-wd-add select {
	width: 100%;
	max-width: 520px;
	padding: 9px 12px;
	border: 1px solid var(--wd-line);
	border-radius: 6px;
	font: inherit;
	background: #fff;
}
.hub-wd-row textarea {
	resize: vertical;
}
.hub-wd-opt {
	font-weight: 400;
	color: var(--wd-muted);
	font-size: 12px;
}
.hub-wd-hint {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--wd-muted);
}

.hub-wd-inline {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}
.hub-wd-inline input[type="url"] {
	flex: 1 1 300px;
}

/* Блок «Что сохранить» удалён вместе с последней галочкой (логотип теперь
   переносится всегда). Классы .hub-wd-keep* не используются — не возвращать:
   именно на .hub-wd-keep однажды случайно налетела ячейка таблицы и утащила
   себе его фон и flex. */

.hub-wd-back {
	background: none;
	border: 0;
	padding: 6px 0;
	margin-bottom: 6px;
	font: inherit;
	font-weight: 600;
	color: var(--wd-accent);
	cursor: pointer;
}
.hub-wd-back:hover {
	text-decoration: underline;
}

.hub-wd-pid {
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	color: var(--wd-muted);
	min-width: 34px;
}

.hub-wd-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}

/* Техническая справка: что ушло в модель */
.hub-wd-techbox {
	margin: 18px 0;
	padding: 12px 16px;
	background: #f7f8fa;
	border: 1px solid var(--wd-line);
	border-radius: 8px;
	font-size: 14px;
}
.hub-wd-techbox > summary {
	cursor: pointer;
	color: var(--wd-muted);
}
.hub-wd-techlist {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 4px 16px;
	margin: 12px 0;
}
.hub-wd-techlist dt {
	color: var(--wd-muted);
}
.hub-wd-techlist dd {
	margin: 0;
}
.hub-wd-techlist code {
	background: #eef1f6;
	padding: 1px 6px;
	border-radius: 4px;
	font-size: 13px;
}
.hub-wd-techlabel {
	margin: 14px 0 6px;
	color: var(--wd-muted);
}
.hub-wd-techshot img {
	display: block;
	max-width: 260px;
	border: 1px solid var(--wd-line);
	border-radius: 6px;
}
.hub-wd-techprompt {
	margin-bottom: 10px;
}
.hub-wd-techname {
	display: block;
	color: var(--wd-muted);
	font-size: 13px;
	margin-bottom: 3px;
}
.hub-wd-techprompt pre {
	margin: 0;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid var(--wd-line);
	border-radius: 6px;
	white-space: pre-wrap;
	word-break: break-word;
	font-size: 13px;
	line-height: 1.5;
}

.hub-wd-cdesc {
	display: block;
	margin-top: 4px;
	font-weight: 400;
	font-size: 13px;
	color: var(--wd-muted);
}

/* --- Статус и прогресс --- */
.hub-wd-status {
	margin: 14px 0;
	font-size: 14px;
}
.hub-wd-error {
	color: #b42318;
}

.hub-wd-progress {
	margin: 16px 0;
	padding: 14px 16px;
	background: #f7f8fa;
	border-radius: 8px;
	font-size: 14px;
}
.hub-wd-step {
	padding: 3px 0;
	color: var(--wd-muted);
}
.hub-wd-step-done {
	color: #111;
}
.hub-wd-step-failed {
	color: #b42318;
}
.hub-wd-mark {
	display: inline-block;
	width: 16px;
	font-weight: 700;
}
.hub-wd-step-err {
	font-size: 13px;
}

/* --- Варианты первого экрана --- */
.hub-wd-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}
.hub-wd-card {
	margin: 0;
	border: 1px solid var(--wd-line);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-direction: column;
}
.hub-wd-card img,
.hub-wd-screen img {
	display: block;
	width: 100%;
	height: auto;
}
.hub-wd-card figcaption {
	padding: 12px 14px 0;
	font-weight: 600;
}
.hub-wd-card .hub-wd-hint {
	padding: 0 14px;
}
.hub-wd-card .hub-btn {
	margin: 12px 14px 14px;
}

/* --- Собранные экраны --- */
.hub-wd-stack {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.hub-wd-screen {
	margin: 0;
	border: 1px solid var(--wd-line);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}
.hub-wd-screen figcaption {
	padding: 10px 14px;
	font-size: 14px;
	font-weight: 600;
	border-top: 1px solid var(--wd-line);
}

.hub-wd-add {
	margin: 24px 0;
	display: flex;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
}
.hub-wd-add label {
	display: block;
	margin-bottom: 5px;
	font-weight: 600;
	font-size: 14px;
	width: 100%;
}
.hub-wd-add select {
	max-width: 260px;
}

/* --- Список сохранённых проектов: гармошка с таблицей ---
   ⚠️ Сама карточка (.hub-wd-projects) и её шапка (.hub-wd-phead) заданы в ядре
   вместе с общими .hub-card/.hub-cardhead — история Вёрстальщика пользуется
   теми же правилами. Копию здесь не восстанавливать. */
.hub-wd-phead .hub-wd-h {
	margin: 0;
}

/* Проект, по которому прямо сейчас идёт генерация */
.hub-wd-working {
	opacity: .75;
}
.hub-wd-working-mark {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--wd-accent);
}
.hub-wd-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wd-accent);
	animation: hub-wd-pulse 1.2s ease-in-out infinite;
}
@keyframes hub-wd-pulse {
	0%, 100% { opacity: .25; }
	50%      { opacity: 1; }
}

.hub-wd-psummary {
	cursor: pointer;
	font-weight: 700;
	font-size: 15px;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 8px;
}
.hub-wd-psummary::-webkit-details-marker {
	display: none;
}
.hub-wd-psummary::before {
	content: "▸";
	color: var(--wd-muted);
	transition: transform .15s;
}
.hub-wd-projects[open] .hub-wd-psummary::before {
	content: "▾";
}
/* .hub-wd-pcount — счётчик в шапке карточки — тоже задан в ядре (.hub-count). */

/* ⚠️ Стиль .hub-wd-ptable (и .hub-wd-nowrap) переехал в ядро — там он задан
   вместе с общим .hub-table, которым теперь пользуется история Вёрстальщика.
   Копию здесь не восстанавливать: она перебьёт ядро и вид снова разъедется. */
/* --- Двухуровневый список: папка сайта и прогоны внутри --- */
.hub-wd-toggle {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-weight: 600;
	color: var(--wd-accent);
	cursor: pointer;
	text-align: left;
}
.hub-wd-caret {
	display: inline-block;
	width: 12px;
	color: var(--wd-muted);
}
.hub-wd-siteurl {
	display: block;
	margin-left: 12px;
	font-size: 12px;
	color: var(--wd-muted);
}
/* Прогон — вложенная строка. Одного бледного фона не хватало: строка читалась
   как обычный проект. Теперь слева идёт синяя направляющая, а название сдвинуто
   и помечено уголком — уровень виден сразу. */
.hub-wd-runrow > td {
	background: #f7f9fd;
	/* Тот же мелкий кегль, что у даты: прогон — подчинённая строка, и разница
	   в размере отделяет его от строки сайта не хуже отступа. */
	font-size: 12.5px;
	padding-top: 6px;
	padding-bottom: 6px;
}
.hub-wd-runrow .hub-wd-open,
.hub-wd-runrow .hub-wd-pid,
.hub-wd-runrow .hub-wd-when {
	font-size: 12.5px;
}
.hub-wd-runrow > td:first-child {
	box-shadow: inset 3px 0 0 var(--wd-accent);
}
.hub-wd-runcell {
	padding-left: 26px !important;
	position: relative;
}
.hub-wd-runcell::before {
	content: "└";
	position: absolute;
	left: 8px;
	top: 6px;
	color: #b9c2d6;
	font-size: 13px;
}
.hub-wd-runcell .hub-wd-open {
	font-weight: 400;
}
.hub-wd-runs {
	color: var(--wd-muted);
}
.hub-wd-more {
	background: none;
	border: 0;
	padding: 0 0 0 10px;
	font: inherit;
	font-size: 13px;
	color: var(--wd-accent);
	cursor: pointer;
}
.hub-wd-more:hover {
	text-decoration: underline;
}
/* .hub-wd-openown («открыть макеты» у старой папки) убран по решению владельца. */
/* Дата и время: время отдельной строкой и мельче — так колонка занимает
   меньше ширины, а взгляд цепляется за дату, а не за часы. */
.hub-wd-when {
	font-size: 12.5px;
	line-height: 1.35;
}
.hub-wd-time {
	display: block;
	font-size: 11.5px;
	color: var(--wd-muted, #6b7280);
}

/* Заголовок открытого проекта: номер, имя и адрес сайта. */
.hub-wd-openhead {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin: 6px 0 16px;
}
.hub-wd-openhead__id {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--wd-accent);
}
.hub-wd-openhead__name {
	font-weight: 600;
	font-size: 15px;
}
.hub-wd-openhead__site {
	font-size: 13px;
	color: var(--wd-muted);
}

/* Предпросмотр макета по наведению. Высоту ограничиваем: склеенная страница
   бывает в несколько тысяч пикселей и иначе не поместилась бы на экран. */
.hub-wd-peek {
	position: absolute;
	z-index: 60;
	width: 320px;
	max-height: 380px;
	overflow: hidden;
	padding: 4px;
	background: #fff;
	border: 1px solid var(--wd-line, #e3e6ec);
	border-radius: 8px;
	box-shadow: 0 8px 28px rgba(16, 24, 40, .16);
	pointer-events: none;
}
.hub-wd-peek img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 5px;
}

/* Шапка прогресса: крутилка, что делаем и сколько уже идёт. Счётчик нужен
   именно потому, что генерация занимает около двух минут — без него страница
   выглядит зависшей. */
.hub-wd-prog-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	font-weight: 600;
	font-size: 14px;
}
.hub-wd-elapsed {
	margin-left: auto;
	font-weight: 400;
	font-size: 13px;
	color: var(--wd-muted);
	font-variant-numeric: tabular-nums;
}

/* Склеенная страница целиком — высокая картинка, ограничиваем по высоте окном
   с прокруткой, иначе она вытесняет всё остальное со страницы. */
.hub-wd-sheet {
	margin: 0 0 22px;
	max-height: 70vh;
	overflow: auto;
	border: 1px solid var(--wd-line);
	border-radius: 8px;
	background: #fff;
}
.hub-wd-sheet img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Увеличение макета поверх страницы ---
   Раньше макет открывался новой вкладкой, и сравнивать варианты приходилось
   переключением вкладок. */
.hub-wd-zoom {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	position: relative;
}
.hub-wd-zoom img {
	display: block;
	width: 100%;
	height: auto;
}
/* Подсказка появляется на наведении: что картинка кликабельна, иначе неочевидно. */
.hub-wd-zoom__hint {
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 4px 9px;
	border-radius: 6px;
	background: rgba(20, 23, 28, .72);
	color: #fff;
	font-size: 11.5px;
	opacity: 0;
	transition: opacity .15s;
	pointer-events: none;
}
.hub-wd-zoom:hover .hub-wd-zoom__hint {
	opacity: 1;
}

.hub-wd-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(16, 20, 28, .88);
	overflow: auto;
	padding: 28px;
	cursor: zoom-out;
}
.hub-wd-lightbox__inner {
	max-width: 1400px;
	margin: 0 auto;
}
.hub-wd-lightbox img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	cursor: default;
}
.hub-wd-lightbox__close {
	position: fixed;
	top: 14px;
	right: 20px;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}
.hub-wd-lightbox__close:hover {
	background: rgba(255, 255, 255, .28);
}
.hub-wd-noscroll {
	overflow: hidden;
}

/* Предпросмотр по наведению: при нескольких вариантах показываем их все. */
.hub-wd-peek--multi {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	width: 460px;
	max-height: 420px;
}
.hub-wd-peek--multi img {
	width: 100%;
	height: auto;
}

/* Пометка у технической справки: видно, что блок не для клиента. */
.hub-wd-admin-only {
	margin-left: 8px;
	padding: 1px 7px;
	border-radius: 20px;
	background: #eef1f6;
	color: var(--wd-muted, #6b7280);
	font-size: 11px;
	font-weight: 400;
}

/* Догенерация вариантов — под сеткой макетов, там же где решают «не подошло». */
.hub-wd-morevars {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
	padding: 14px 16px;
	background: #f7f8fa;
	border-radius: 8px;
	font-size: 14px;
}
.hub-wd-morevars select {
	max-width: 200px;
}

/* «Учитывать» — тумблер, а не галочка: ряд одинаковых чекбоксов справа читался
   как список задач, а это переключатель состояния поля. Сам чекбокс прячем
   и рисуем на его месте переключатель. */
/* ⚠️ Селектор с .hub-wd-row: правило `.hub-wd-row label { display: block }`
   специфичнее одиночного класса и делало ярлык блочным — дорожка становилась
   строчной и теряла ширину (0px). */
.hub-wd-row label.hub-wd-use,
.hub-wd-use {
	float: right;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 400;
	font-size: 11.5px;
	color: var(--wd-muted, #6b7280);
	cursor: pointer;
	user-select: none;
}
.hub-wd-use input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
/* Дорожка переключателя и бегунок внутри неё — так позиционирование не зависит
   от длины подписи (первый вариант через ::after ловил её и разъезжался). */
.hub-wd-sw {
	position: relative;
	flex: 0 0 auto;
	width: 28px;
	height: 16px;
	border-radius: 20px;
	background: #d3d7df;
	transition: background .15s;
}
.hub-wd-sw::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .3);
	transition: transform .15s;
}
/* Класс is-on ставит JS (syncUseToggles). Дублируем :checked — если скрипт
   не отработал, вид всё равно будет верным. */
.hub-wd-use.is-on .hub-wd-sw,
.hub-wd-usebox:checked + .hub-wd-sw {
	background: var(--wd-accent, #2547D6);
}
.hub-wd-use.is-on .hub-wd-sw::after,
.hub-wd-usebox:checked + .hub-wd-sw::after {
	transform: translateX(12px);
}
.hub-wd-use.is-on .hub-wd-use__text,
.hub-wd-usebox:checked ~ .hub-wd-use__text {
	color: var(--wd-accent, #2547D6);
}
.hub-wd-usebox:focus-visible + .hub-wd-sw {
	outline: 2px solid var(--wd-accent, #2547D6);
	outline-offset: 2px;
}

/* Передача пака в Вёрстальщик — заметный блок над экранами: это конечная точка
   всей работы, а не рядовая кнопка. */
.hub-wd-handoff {
	margin: 0 0 20px;
	padding: 14px 16px;
	background: var(--accent-bg, #E6ECFB);
	border-radius: 10px;
}
.hub-wd-handoff__opts {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 12px 0;
	padding: 12px 14px;
	background: #fff;
	border-radius: 8px;
}
.hub-wd-handoff__opts .hub-wd-check {
	font-weight: 400;
	font-size: 13.5px;
}
.hub-wd-handoff__opts .hub-wd-hint {
	margin-top: 2px;
}
.hub-wd-logo {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--wd-line, #e3e6ec);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.hub-wd-logo__title {
	font-weight: 600;
	font-size: 13.5px;
}
.hub-wd-logo__file {
	padding: 6px 0 2px;
}
.hub-wd-handoff--done {
	background: #eaf7ee;
}

/* История вёрсток проекта: попытки сверху вниз, у каждой — этапы. */
.hub-wd-runs {
	margin: 12px 0;
}
.hub-wd-run {
	padding: 10px 12px;
	margin-bottom: 8px;
	background: #fff;
	border: 1px solid var(--wd-line, #e3e6ec);
	border-radius: 8px;
}
.hub-wd-run.is-current {
	border-color: rgba(37, 71, 214, .45);
}
.hub-wd-run__head {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.hub-wd-run__when {
	font-weight: 600;
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
}
.hub-wd-run__sum {
	font-size: 13px;
	color: var(--wd-muted, #6b7280);
}
.hub-wd-run__bad {
	color: #b42318;
}
.hub-wd-run__acts {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.hub-wd-run__acts .hub-btn {
	padding: 6px 12px;
	font-size: 13px;
}
.hub-wd-run__steps {
	margin-top: 8px;
}
.hub-wd-run__steps > summary {
	cursor: pointer;
	font-size: 13px;
	color: var(--wd-muted, #6b7280);
}
.hub-wd-run__steps .hub-wd-step {
	font-size: 13px;
}
.hub-wd-handoff .hub-wd-hint {
	margin-top: 4px;
}
.hub-wd-handoff--done {
	background: #eaf7ee;
}

/* Полоса прогресса над самим макетом. Неопределённая: провайдер не сообщает,
   сколько осталось, поэтому честнее показывать «идёт», чем выдуманные проценты. */
.hub-wd-bar {
	padding: 10px 14px 0;
}
.hub-wd-bar__track {
	height: 4px;
	border-radius: 4px;
	background: #e6ebf5;
	overflow: hidden;
}
.hub-wd-bar__fill {
	width: 35%;
	height: 100%;
	border-radius: 4px;
	background: var(--wd-accent, #2547D6);
	animation: hub-wd-sweep 1.15s ease-in-out infinite;
}
@keyframes hub-wd-sweep {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(300%); }
}
.hub-wd-bar__text {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--wd-muted, #6b7280);
}
.hub-wd-bar__time {
	font-variant-numeric: tabular-nums;
}
/* Пока идёт перегенерация, старая картинка приглушена — видно, что она устарела. */
.hub-wd-screen.is-busy .hub-wd-zoom img,
.hub-wd-card.is-busy .hub-wd-zoom img {
	opacity: .45;
	filter: grayscale(.3);
}

/* Поле замечания к экрану — под шапкой, над картинкой: правка относится
   именно к этому макету, и место у неё там же. */
.hub-wd-say {
	display: flex;
	gap: 8px;
	padding: 0 14px 10px;
}
.hub-wd-say__input {
	flex: 1 1 auto;
	padding: 8px 11px;
	border: 1px solid var(--wd-line, #e3e6ec);
	border-radius: 6px;
	font: inherit;
	font-size: 13.5px;
}
.hub-wd-say .hub-btn {
	flex: 0 0 auto;
	padding: 8px 14px;
	font-size: 13.5px;
}
.hub-wd-op--say {
	font-size: 13px;
}
/* Кнопки уровня всей страницы — под склеенным макетом. */
.hub-wd-tools {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 4px 0 14px;
}
/* Что делать после выравнивания: без этого непонятно, куда девался результат. */
.hub-wd-next {
	margin: 10px 0 0;
	padding: 10px 12px;
	background: var(--accent-bg, #E6ECFB);
	border-radius: 8px;
	font-size: 13.5px;
}

/* Отчёт о выравнивании: что и на сколько поправили. */
.hub-wd-alignreport {
	margin: 8px 0 4px;
}
.hub-wd-alignreport:empty {
	display: none;
}
/* Ссылки на вёрстку одного экрана — под его шапкой. */
.hub-wd-onecode {
	padding: 0 14px 10px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.hub-wd-onecode .hub-btn {
	padding: 7px 13px;
	font-size: 13px;
}

/* Откат — единственная бесплатная кнопка в ряду, поэтому подсвечена. */
.hub-wd-op--undo {
	color: var(--wd-accent, #2547D6);
	border-color: rgba(37, 71, 214, .3);
}
.hub-wd-customscreen {
	width: 100%;
	margin-top: 8px;
}
.hub-wd-customscreen input {
	width: 100%;
	max-width: 520px;
	padding: 9px 12px;
	border: 1px solid var(--wd-line, #e3e6ec);
	border-radius: 6px;
	font: inherit;
}

/* Шапка экрана: название сверху, действия справа.
   ⚠️ Это тоже <figcaption>, поэтому на неё налетали правила подписи снизу
   (.hub-wd-screen figcaption с border-top) — линия рисовалась НАД заголовком.
   Гасим их явно. */
.hub-wd-screen .hub-wd-screenhead,
.hub-wd-card .hub-wd-screenhead {
	border-top: 0;
	padding: 10px 14px;
	margin-bottom: 0;
}
.hub-wd-screenhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}
.hub-wd-screenname {
	font-weight: 600;
	font-size: 14px;
}
.hub-wd-screenops {
	display: inline-flex;
	gap: 4px;
}
.hub-wd-op,
.hub-wd-vop {
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid var(--wd-line, #e3e6ec);
	border-radius: 7px;
	background: #fff;
	color: var(--wd-muted, #6b7280);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: color .15s, border-color .15s, background .15s;
}
.hub-wd-op:hover:not(:disabled),
.hub-wd-vop:hover:not(:disabled) {
	color: var(--wd-accent);
	border-color: rgba(37, 71, 214, .35);
	background: #eef1f6;
}
.hub-wd-op:disabled,
.hub-wd-vop:disabled {
	opacity: .4;
	cursor: default;
}
.hub-wd-op--del:hover:not(:disabled) {
	color: #b42318;
	border-color: rgba(180, 35, 24, .35);
	background: #fdf3f2;
}

.hub-wd-known {
	margin-top: 10px;
	padding: 10px 12px;
	background: #f7f8fa;
	border-radius: 8px;
}

.hub-wd-open {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--wd-accent);
	cursor: pointer;
	text-align: left;
}
.hub-wd-open:hover {
	text-decoration: underline;
}
.hub-wd-pmeta {
	font-size: 13px;
	color: var(--wd-muted);
}
/* ⚠️ Крестик удаления (.hub-wd-drop) задан в ядре вместе с общим .hub-drop —
   историей Вёрстальщика он тоже используется. Копию здесь не восстанавливать. */

/* ⚠️ Звёздочка (.hub-wd-star) и скрытый заголовок (.hub-wd-sr) заданы в ядре
   вместе с общими .hub-star/.hub-sr — здесь только то, чего в ядре нет. */
.hub-wd-forever {
	color: var(--wd-accent);
	font-weight: 600;
}

@media (max-width: 600px) {
	.hub-wd-grid {
		grid-template-columns: 1fr;
	}
	.hub-wd-drop {
		margin-left: 0;
	}
}

/* --- «Что уйдёт в нейросеть»: текст задачи виден до запуска и правится на месте.
   Моноширинный, потому что это не проза, а точный текст запроса: так заметны
   лишние абзацы, которые туда не звали. */
.hub-wd-prompt textarea {
	width: 100%;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12.5px;
	line-height: 1.5;
	color: #1f2430;
	background: #fbfbfd;
	border: 1px solid #dfe3ea;
	border-radius: 8px;
	padding: 10px 12px;
	resize: vertical;
}
.hub-wd-prompt-meta {
	font-weight: 400;
	font-size: 12px;
	color: #8b93a3;
	margin-left: 6px;
}

/* --- Заполнение картинок у готовой вёрстки: выбор способа с ценой до запуска. */
.hub-wd-imgbox {
	margin-top: 10px;
	padding: 10px 12px;
	background: #f7f8fa;
	border: 1px solid #e6e9ef;
	border-radius: 8px;
}
.hub-wd-imgbox .hub-wd-hint { margin: 0 0 6px; }
.hub-wd-imgbox .hub-wd-check { display: block; margin: 4px 0; }
.hub-wd-imgbox .hub-btn { margin-top: 8px; }

/* --- Дизайн-паспорт макета: значения, по которым собирается вёрстка. */
.hub-wd-passport {
	margin: 14px 0;
	padding: 10px 14px;
	background: #f7f8fa;
	border: 1px solid #e6e9ef;
	border-radius: 10px;
}
.hub-wd-passport > summary {
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 500;
	color: #2b3242;
}
.hub-wd-passport__body { margin-top: 10px; }
.hub-wd-prow {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 0;
}
.hub-wd-pname {
	flex: 0 0 190px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12.5px;
	color: #5b6474;
}
.hub-wd-prow input[type="color"] {
	width: 44px;
	height: 26px;
	padding: 0;
	border: 1px solid #d8dce4;
	border-radius: 5px;
	background: none;
	cursor: pointer;
}
.hub-wd-prow input[type="text"] {
	flex: 1;
	max-width: 320px;
	font-size: 13px;
	padding: 5px 8px;
	border: 1px solid #d8dce4;
	border-radius: 6px;
}
.hub-wd-ptv {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	color: #8b93a3;
}

/* --- Паспорт: поля слева, живой предпросмотр справа. */
.hub-wd-pgrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 18px;
	align-items: start;
}
.hub-wd-prow .hub-wd-pname {
	flex: 0 0 210px;
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	font-family: inherit;
}
.hub-wd-pname b { font-size: 13px; font-weight: 500; color: #2b3242; }
.hub-wd-pname code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	color: #98a0b0;
}
.hub-wd-ppreview { position: sticky; top: 12px; }
.hub-wd-pv {
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	overflow: hidden;
	font-size: 12px;
}
.hub-wd-pv__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-bottom: 1px solid #e5e7eb;
	font-size: 10.5px;
}
.hub-wd-pv__body { padding: 12px 10px 14px; }
.hub-wd-pv__h1 { font-size: 15px; line-height: 1.25; margin-bottom: 5px; }
.hub-wd-pv__sub { font-size: 11px; line-height: 1.45; margin-bottom: 10px; }
.hub-wd-pv__btn {
	display: inline-block;
	padding: 7px 14px;
	font-size: 11px;
}
.hub-wd-pv__card {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: 12px;
	padding: 9px 11px;
	border: 1px solid #e5e7eb;
	font-size: 11px;
}

@media (max-width: 760px) {
	.hub-wd-pgrid { grid-template-columns: minmax(0, 1fr); }
	.hub-wd-ppreview { position: static; }
	.hub-wd-prow .hub-wd-pname { flex-basis: 150px; }
}

/* --- Совместная работа: доступ коллегам. */
.hub-wd-share {
	margin: 14px 0;
	padding: 10px 14px;
	background: #f7f8fa;
	border: 1px solid #e6e9ef;
	border-radius: 10px;
}
.hub-wd-share > summary {
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 500;
	color: #2b3242;
}
.hub-wd-share__body { margin-top: 10px; }
.hub-wd-share__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid #eceff4;
	font-size: 13px;
}
.hub-wd-share__row:last-child { border-bottom: 0; }
.hub-wd-share__mail { color: #8b93a3; font-size: 12.5px; }
.hub-wd-share__add {
	display: flex;
	gap: 8px;
	margin: 10px 0 6px;
	flex-wrap: wrap;
}
.hub-wd-share__add input {
	flex: 1;
	min-width: 220px;
	font-size: 13px;
	padding: 7px 10px;
	border: 1px solid #d8dce4;
	border-radius: 6px;
}
/* Чужой проект в списке: отметка вместо звезды. */
.hub-wd-sharedmark { color: #2547D6; font-size: 14px; }
.hub-wd-ptable tr.is-shared td { background: #fbfcfe; }

/* --- Звезда у вёрстки в истории проекта. Вид общий с остальными звёздами хаба
   (.hub-wd-star в ядре), здесь только место в строке и подсветка закреплённой. */
.hub-wd-run__star { margin-right: 6px; vertical-align: -1px; }
.hub-wd-run.is-pinned { border-color: #ffd27a; background: #fffdf6; }

/* Шапка открытого проекта: строка идентификации и блок доступа под ней. */
.hub-wd-openhead__row { margin-bottom: 6px; }

/* --- Иконка «команда» в списке проектов + окно доступа. */
.hub-wd-team {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 3px 5px;
	margin-right: 4px;
	border: 0;
	background: none;
	color: #9aa2b1;
	cursor: pointer;
	border-radius: 6px;
	vertical-align: middle;
	line-height: 1;
}
.hub-wd-team:hover { color: #2547D6; background: #eef2fd; }
.hub-wd-team.is-on { color: #2547D6; }
.hub-wd-team__n { font-size: 11px; font-weight: 600; }

.hub-wd-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(17, 21, 30, .55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.hub-wd-modal__win {
	position: relative;
	width: 100%;
	max-width: 460px;
	max-height: 90vh;
	overflow: auto;
	background: #fff;
	border-radius: 12px;
	padding: 20px 22px 18px;
	box-shadow: 0 18px 50px rgba(17, 21, 30, .25);
}
.hub-wd-modal__x {
	position: absolute;
	top: 10px;
	right: 12px;
	border: 0;
	background: none;
	font-size: 22px;
	line-height: 1;
	color: #9aa2b1;
	cursor: pointer;
}
.hub-wd-modal__x:hover { color: #2b3242; }
.hub-wd-modal__h { margin: 0 0 2px; font-size: 17px; }
.hub-wd-modal__sub { margin: 0 0 12px; font-size: 13px; color: #6b7280; }
.hub-wd-share__err { margin: 8px 0 0; font-size: 13px; color: #c0392b; }

/* ============================================================
   История вёрсток — «лента версий» (выбор владельца из четырёх).

   Прежний вид: дата, состав и пять подчёркнутых ссылок в одну строку,
   зелёная подложка блока и жёлтая заливка у закреплённой. Читалось тяжело
   и выглядело неопрятно. Здесь: вертикальная линия с точками, у каждой
   версии сначала ЧТО делали, потом когда и почём, потом действия.
   ============================================================ */

/* Зелёная подложка убрана: блок и так внутри карточки проекта, а цветная
   заливка спорила с содержимым. */
.hub-wd-handoff--done {
	background: #fff;
	border: 1px solid var(--wd-line, #e3e6ec);
}

.hub-wd-runs {
	position: relative;
	margin: 14px 0 16px;
	padding-left: 20px;
}
/* Сама лента. Начинается и заканчивается на уровне первой и последней точки,
   поэтому не торчит хвостами за крайними записями. */
.hub-wd-runs::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: var(--wd-line, #e3e6ec);
}

.hub-wd-run {
	position: relative;
	padding: 0 0 18px;
	margin: 0;
	background: none;
	border: 0;
	border-radius: 0;
}
.hub-wd-run:last-child { padding-bottom: 2px; }

.hub-wd-run__dot {
	position: absolute;
	left: -20px;
	top: 5px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #cbd1dc;
}
/* Свежая версия — акцентная точка с ореолом: видно, где верх ленты. */
.hub-wd-run.is-current .hub-wd-run__dot {
	background: var(--wd-accent, #2547d6);
	box-shadow: 0 0 0 3px #eef2fd;
}
.hub-wd-run.is-pinned .hub-wd-run__dot { background: #e9a93c; }

.hub-wd-run__top {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.hub-wd-run__title {
	font-weight: 500;
	font-size: 13.5px;
	color: #1b2130;
}
.hub-wd-run__last {
	font-size: 11.5px;
	color: #98a0b0;
}
.hub-wd-run__meta {
	margin: 3px 0 9px;
	font-size: 11.5px;
	color: #98a0b0;
	font-variant-numeric: tabular-nums;
}
.hub-wd-run__acts {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}
/* Кнопки одного размера: одна главная (синяя) и три тихие — раньше все пять
   действий были одинаковыми подчёркнутыми ссылками и конкурировали друг с другом. */
.hub-btn--sm {
	padding: 6px 11px;
	font-size: 12.5px;
	border-radius: 7px;
}

/* Статус результата — короткой пилюлей вместо строки текста. */
.hub-wd-chip {
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 20px;
	background: #eaf6ef;
	color: #1e6b44;
	white-space: nowrap;
}
.hub-wd-chip.is-bad {
	background: #fdeded;
	color: #a32d2d;
}

/* ⚠️ Звезда СЛЕВА, перед названием (просьба владельца): пометка «лучший
   вариант» должна читаться первой, вместе с точкой ленты. Жёлтой заливки
   у строки больше нет — закрепление показывает сама звезда и цвет точки. */
.hub-wd-run__star {
	margin: 0;
	vertical-align: baseline;
	order: -1;
}
.hub-wd-run.is-pinned {
	border-color: transparent;
	background: none;
}
.hub-wd-run__del {
	margin-left: auto;
}

/* Предупреждение «текст правлен вручную»: блок перестал пересобираться
   по анкете, и молчать об этом нельзя — человек видит старый текст
   и не понимает, почему правки полей на него не влияют. */
.hub-wd-prompt-warn {
	margin: 6px 0 0;
	padding: 7px 10px;
	background: #fff7e6;
	border: 1px solid #f0d9a8;
	border-radius: 7px;
	font-size: 12.5px;
	color: #7a5a12;
}
.hub-wd-prompt-warn .hub-link-btn { color: #7a5a12; text-decoration: underline; }

/* Полоса «в проекте идёт работа»: видна при возврате в проект, пока генерация
   не закончилась. Раньше вернувшийся клиент видел прежнее состояние и считал,
   что заказ потерялся. */
.hub-wd-busy {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 6px;
	padding: 11px 14px;
	background: #f4f7ff;
	border: 1px solid #d8e0fa;
	border-radius: 9px;
	font-size: 13px;
}
.hub-wd-busy__label { font-weight: 500; color: #24304a; }
.hub-wd-busy__time { margin-left: auto; color: #7b86a0; font-variant-numeric: tabular-nums; }
.hub-wd-busy__spin {
	width: 14px;
	height: 14px;
	border: 2px solid #c3cff5;
	border-top-color: #2547d6;
	border-radius: 50%;
	animation: hub-wd-spin .8s linear infinite;
	flex-shrink: 0;
}
@keyframes hub-wd-spin { to { transform: rotate(360deg); } }

/* Выбор формата добавляемого макета — только в вертикальных проектах. */
.hub-wd-addaspect { margin-top: 8px; }
.hub-wd-addaspect label { display: block; font-size: 12.5px; color: #5b6478; margin-bottom: 4px; }

/* «Что уйдёт в нейросеть» при правке макета — блок только для администратора.
   Нужен, чтобы разбор жалобы «перерисовал не то» не превращался в гадание. */
.hub-wd-say__tech {
	flex-basis: 100%;
	margin-top: 8px;
	padding: 9px 11px;
	background: #f7f8fa;
	border: 1px solid #e6e9ef;
	border-radius: 8px;
}
.hub-wd-say__techhead { font-size: 11.5px; color: #8b93a3; margin-bottom: 6px; }
.hub-wd-say__imgs { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.hub-wd-say__thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 5px; border: 1px solid #dfe3ea; }
.hub-wd-say__prompt {
	margin: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.5;
	white-space: pre-wrap;
	color: #1f2430;
}

/* ⚠️ Тихая кнопка. Класс использовался в разметке с самого начала, но нигде
   не был описан — поэтому ВСЕ кнопки выглядели одинаково синими, и «Открыть»
   не отличалась от второстепенных действий (владелец увидел это на #127).
   Одна главная кнопка на строку, остальные обводкой. */
.hub-wd .hub-btn--ghost {
	background: #fff;
	color: #414a5e;
	border: 1px solid #dde1ea;
	box-shadow: none;
}
.hub-wd .hub-btn--ghost:hover {
	background: #f7f8fa;
	border-color: #c8cedb;
	color: #1b2130;
}

/* Выбор модели вёрстки в блоке передачи: нужен, чтобы сравнить один и тот же
   макет на разных моделях. Стоит первым — это решение принимается до галочек. */
.hub-wd-modelpick {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	font-size: 13.5px;
	color: #414a5e;
}
.hub-wd-modelpick select {
	flex: 1;
	max-width: 340px;
	padding: 7px 10px;
	border: 1px solid #dde1ea;
	border-radius: 7px;
	font-size: 13px;
	background: #fff;
}