.hub-cabinet { max-width: 1100px; margin: 0 auto; font-family: inherit; }
.hub-cabinet__notice { background: #fff8e1; border: 1px solid #f0d97a; padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; }
.hub-cabinet__balance { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.hub-cabinet__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.hub-service-card { display: block; border: 1px solid #e2e2e2; border-radius: 10px; padding: 16px; text-decoration: none; color: inherit; transition: box-shadow .15s ease; }
.hub-service-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.hub-service-card__icon { width: 40px; height: 40px; margin-bottom: 10px; }
.hub-service-card__title { font-weight: 600; margin-bottom: 4px; }
.hub-service-card__desc { font-size: 13px; color: #666; margin-bottom: 8px; }
.hub-service-card__price { font-size: 12px; color: #888; }
.hub-btn { background: #2271b1; color: #fff; border: none; border-radius: 6px; padding: 8px 16px; cursor: pointer; }
.hub-btn:disabled { opacity: .5; cursor: not-allowed; }
.hub-service-progress { margin-top: 12px; color: #555; font-size: 14px; }
.hub-spinner {
    display: inline-block; width: 14px; height: 14px; margin-right: 8px;
    border: 2px solid #ccd0d4; border-top-color: #2271b1; border-radius: 50%;
    vertical-align: middle; animation: hub-spin 0.8s linear infinite;
}
@keyframes hub-spin { to { transform: rotate(360deg); } }
.hub-service-form { margin: 20px 0; }
.hub-service-result { margin-top: 20px; padding: 16px; background: #f6f7f7; border-radius: 8px; }

/*
 * ЕДИНЫЙ вид табов и таблиц по всему хабу. Эталон — «Дизайнер сайтов»:
 * его разметку и размеры и повторяем. Правила живут здесь, в ядре, и
 * перечисляют оба набора классов сразу (общий .hub-* и старый .hub-wd-*),
 * чтобы источник стиля был ОДИН. Раньше каждый модуль вёз свою копию, и
 * копии разъезжались: у табов ядра фон брался из var(--accent-bg) темы
 * (голубоватый #E6ECFB), а у Дизайнера был жёстко серый — на глаз это
 * читалось как два разных элемента.
 *
 * Дубли этих правил из modules/website-designer/assets/cabinet-wd.css
 * удалены; модульный CSS грузится ПОСЛЕ ядра и перебивал бы их.
 */

/* --- Сегментированный переключатель (табы) --- */
.hub-tabs-nav,
.hub-wd-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 24px;
    /* Фирменный голубой из темы, а не нейтральный серый: плашка так сразу
       читается как часть интерфейса хаба. */
    background: var(--accent-bg, #E6ECFB);
    border-radius: 11px;
}
.hub-tab-btn,
.hub-wd-tab {
    background: transparent;
    border: 0;
    border-radius: 8px;
    padding: 9px 20px;
    font: inherit;
    /* Без утяжеления: выбранный таб и так выделен белой подложкой и тенью,
       жирное начертание поверх этого только шумит. */
    font-weight: 500;
    font-size: 14px;
    color: var(--wd-muted, #6b7280);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.hub-tab-btn:hover,
.hub-wd-tab:hover { color: #111; }
.hub-tab-btn.is-active,
.hub-wd-tab.is-active {
    background: #fff;
    color: #111;
    box-shadow: 0 1px 2px rgba(16,24,40,.1), 0 1px 3px rgba(16,24,40,.08);
}
.hub-tab-panel[hidden] { display: none; }
.hub-tab-empty-hint { color: #888; font-size: 14px; }

@media (max-width: 520px) {
    .hub-tabs-nav,
    .hub-wd-tabs { display: flex; }
    .hub-tab-btn,
    .hub-wd-tab { flex: 1; padding: 9px 10px; }
}

/*
 * --- Таблицы ---
 * Переменные --wd-* объявлены на контейнере .hub-wd, поэтому у таблиц вне
 * Дизайнера их нет — отсюда запасные значения во всех var().
 */
.hub-table,
.hub-wd-ptable {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 14px;
}
.hub-table th,
.hub-wd-ptable th {
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    color: var(--wd-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 6px 10px 6px 0;
    border-bottom: 1px solid var(--wd-line, #e3e6ec);
    white-space: nowrap;
}
.hub-table td,
.hub-wd-ptable td {
    padding: 8px 10px 8px 0;
    border-bottom: 1px solid var(--wd-line, #e3e6ec);
    vertical-align: middle;
}
.hub-table a,
.hub-wd-ptable a { color: var(--wd-accent, #2547D6); }
.hub-nowrap,
.hub-wd-nowrap {
    white-space: nowrap;
    color: var(--wd-muted, #6b7280);
    font-variant-numeric: tabular-nums;
}

/* Карточка вокруг таблицы — как список проектов у Дизайнера. Без неё таблица
   висит на странице голой, и это первое, что бросается в глаза при сравнении. */
.hub-card,
.hub-wd-projects {
    margin-bottom: 22px;
    border: 1px solid var(--wd-line, #e3e6ec);
    border-radius: 8px;
    padding: 10px 14px;
    background: #fff;
}
.hub-cardhead,
.hub-wd-phead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.hub-count,
.hub-wd-pcount {
    background: #eef1f6;
    color: var(--wd-muted, #6b7280);
    border-radius: 20px;
    padding: 1px 9px;
    font-size: 12px;
    font-weight: 600;
}

/* Удаление — крестиком, а не словом: в строке с четырьмя действиями слово
   «Удалить» занимало место и тянуло на себя внимание сильнее, чем заслуживает. */
.hub-drop,
.hub-wd-drop {
    background: none;
    border: 0;
    font-size: 20px;
    line-height: 1;
    color: #b9bec9;
    cursor: pointer;
    padding: 0 4px;
}
.hub-drop:hover,
.hub-wd-drop:hover { color: #b42318; }

/*
 * Колонка действий одной строкой справа. Без nowrap ссылки «Открыть | Скачать
 * ZIP | Редактировать | Удалить» переносились на вторую строку, и строки
 * таблицы выходили разной высоты.
 */
.hub-table__acts {
    white-space: nowrap;
    text-align: right;
}

/*
 * Длинный текст (название модели, текст правки) — в одну строку с многоточием.
 * Иначе ячейка ломается на три строки и таблица теряет вид; полный текст
 * остаётся в подсказке title.
 */
.hub-table__cut {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Фиксированная раскладка + colgroup с долями. Обычная (auto) раскладка меряет
 * колонки по содержимому и игнорирует max-width на ячейках: таблица разъезжалась
 * шире карточки, и колонка действий уезжала за правый край. С fixed ширины
 * задаём мы, а лишний текст честно обрезается многоточием.
 */
.hub-table--fixed {
    table-layout: fixed;
    width: 100%;
}

/*
 * На узком экране жёсткие ширины уже не помещаются: колонка «Опции» схлопнулась
 * бы в одно многоточие. Там отпускаем раскладку и разрешаем переносы — строки
 * станут выше, зато ничего не обрезано.
 */
@media (max-width: 820px) {
    .hub-table--fixed { table-layout: auto; }
    .hub-table--fixed colgroup { display: none; }
    .hub-table__cut { white-space: normal; overflow: visible; }
    .hub-table__acts { white-space: normal; }
}

/*
 * Звёздочка «хранить бессрочно» — тоже одна на хаб, оба класса разом.
 */
.hub-star,
.hub-wd-star {
    background: none;
    border: 0;
    padding: 0 2px;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    color: #d3d7df;
    transition: color .12s, transform .12s;
}
.hub-star:hover,
.hub-wd-star:hover { color: #e8b923; transform: scale(1.15); }
.hub-star.is-on,
.hub-wd-star.is-on { color: #f0b429; }

/* Заголовок колонки со звездой нужен только читалкам с экрана. */
.hub-sr,
.hub-wd-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Ширина как у каталога сервисов (1100px): страницы сервиса и каталога стоят
   рядом в одном меню, и разная ширина читалась как разные разделы сайта. */
.hub-public-service { max-width: 1100px; margin: 0 auto; }
.hub-public-service h1 { margin-bottom: 8px; }
.hub-public-service__lead { font-size: 18px; color: #555; margin-bottom: 20px; }
/* Описание переехало под виджет — отступ теперь сверху, а не снизу,
   и сверху отделяем его линией, чтобы не липло к рабочей форме. */
.hub-public-service__long { margin-top: 32px; padding-top: 24px; border-top: 1px solid #e8e8e2; }
.hub-services-directory { max-width: 1100px; margin: 0 auto; }
.hub-services-directory h1 { margin-bottom: 8px; }